@font-face {
  font-family: Lilita;
  src: url('public/fonts/LilitaOne-Regular.ttf') format('truetype');
  font-display: swap;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { font-family: Lilita, sans-serif; background: #000; overscroll-behavior: none; touch-action: none; }
main { position: fixed; inset: 0; }
#game {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100svh;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  touch-action: none;
  outline: none;
}
/* The canvas draws the interface. Keep semantic controls and a native input
   available to assistive technology and the mobile on-screen keyboard. */
.hud, .overlay, #toast {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  top: 0;
  left: 0;
}
#initials { font-size: 16px; }
.eyebrow { font-style: italic; }
.mobile-controller { display: none; }
@media (pointer: coarse), (max-width: 700px) {
  body {
    --control-height: 192px;
    --pad-key: 52px;
    background: #21180f;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  main {
    position: relative;
    inset: auto;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #game {
    position: relative;
    inset: auto;
    width: min(100%, calc((100dvh - var(--control-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 4 / 3));
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .mobile-controller {
    display: block;
    position: relative;
    width: 100%;
    flex: none;
    height: var(--control-height);
    padding: 12px max(24px, env(safe-area-inset-right)) 12px max(24px, env(safe-area-inset-left));
    background: linear-gradient(#49301c, #2c1c11);
    border-top: 4px solid #754621;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  .touch-controls { height: 100%; max-width: 520px; margin: auto; display: flex; align-items: center; justify-content: space-between; }
  .d-pad { display: grid; grid-template: repeat(3, var(--pad-key)) / repeat(3, var(--pad-key)); }
  .touch-controls button {
    appearance: none;
    border: 3px solid #683514;
    border-radius: 12px;
    background: linear-gradient(#ffe7a2, #edb957);
    color: #583011;
    font: 25px Lilita, sans-serif;
    box-shadow: 0 5px 0 #120d08, inset 0 2px 0 #fff1bf;
    padding: 0;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }
  .pad-up { grid-area: 1 / 2; }
  .d-pad svg { display: block; width: 26px; height: 26px; margin: auto; fill: currentColor; pointer-events: none; }
  .pad-left { grid-area: 2 / 1; }
  .pad-right { grid-area: 2 / 3; }
  .pad-down { grid-area: 3 / 2; }
  .touch-controls .gas {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: linear-gradient(#ffb84b, #ef7b08);
    font-size: 30px;
    color: #fff4d9;
    text-shadow: 0 2px #683514;
  }
  .touch-controls button.pressed { transform: translateY(4px); box-shadow: 0 1px 0 #120d08, inset 0 3px 5px #68351466; filter: brightness(.9); }
  .touch-controls button:focus-visible { outline: 3px solid #ffe8a3; outline-offset: 4px; }
}
@media (orientation: landscape) and (pointer: coarse), (orientation: landscape) and (max-width: 700px) {
  body { --control-height: 152px; --pad-key: 44px; }
  .mobile-controller { padding-top: 6px; padding-bottom: 6px; }
  .touch-controls .gas { width: 82px; height: 82px; }
}
[hidden] { display: none !important; }