:root {
  --ink: #0b0c14;
  --panel: #24252c;
  --orange: #ee6618;
  --orange-dark: #c5510e;
  --muted: #aab0bb;
  --font: "Heebo", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--ink); color: #fff; font-family: var(--font); overscroll-behavior: none; }
body { overflow: hidden; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
[hidden] { display: none !important; }

#shell { height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }

/* The stage keeps the game's aspect ratio and fits the viewport either way. */
#stage { position: relative; aspect-ratio: 672 / 526; width: min(100vw, calc(100dvh * 672 / 526)); flex: 0 0 auto; }
#game { display: block; width: 100%; height: 100%; outline: none; background: var(--ink); }

/* Fixed to the viewport, not the stage: on a portrait phone the stage is far too short to hold it. */
#overlay { position: fixed; inset: 0; z-index: 5; display: flex; padding: 12px; background: rgba(11, 12, 20, .84); overflow-y: auto; overscroll-behavior: contain; }
.screen { width: min(100%, 560px); margin: auto; text-align: left; }

h1 { margin: 0 0 6px; font-size: clamp(30px, 8cqw, 58px); font-size: clamp(30px, 8vmin, 58px); line-height: 1; font-weight: 900; letter-spacing: -.01em; color: #fff; }
h2 { margin: 0 0 8px; font-size: clamp(22px, 5vmin, 36px); font-weight: 900; }
.eyebrow { margin: 0 0 6px; color: var(--orange); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.lede { margin: 0 0 12px; color: #dfe1e6; font-size: 15px; line-height: 1.4; }

.how { display: flex; gap: 8px; margin-bottom: 10px; }
.how > div { flex: 1; background: var(--panel); border-left: 3px solid var(--orange); padding: 7px 10px; font-size: 13px; }
.how b { display: block; }
.how span { color: var(--muted); }
.only-touch { display: none; }

.legend { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 5px; font-size: 13px; line-height: 1.3; color: #d3d6dc; }
.legend li { display: flex; gap: 9px; align-items: flex-start; }
.legend b { color: #fff; }
.swatch { flex: 0 0 13px; width: 13px; height: 13px; margin-top: 2px; border-radius: 3px; }
.swatch.ring { background: transparent; border: 3px solid #e8e9ec; border-top-color: #ee6618; border-right-color: #ee6618; border-radius: 50%; }
.swatch.squeeze { background: #e0407f; border-radius: 50%; }
.swatch.water { background: #39a9e0; }
.swatch.rock { background: #8f939c; border-radius: 40% 55% 45% 50%; }
.swatch.paper { background: #f4f1e6; box-shadow: inset 0 0 0 2px #d3272f; border-radius: 1px; }

.name-row label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 5px; }
.name-row small { font-weight: 400; color: var(--muted); }
.name-row > div { display: flex; gap: 8px; }
input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; font: 800 16px var(--font); text-transform: uppercase; color: #fff; background: #14151c; border: 2px solid #3a3b44; border-radius: 3px; -webkit-user-select: text; user-select: text; }
input:focus { outline: none; border-color: var(--orange); }

.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; font: 800 15px var(--font); border-radius: 3px; cursor: pointer; text-decoration: none; }
.primary { background: var(--orange); color: #0b0c14; border: 2px solid var(--orange); }
.primary:hover, .primary:focus-visible { background: #ff7f33; border-color: #fff; outline: none; }
.secondary { background: transparent; color: #fff; border: 2px solid #5a5c66; }
.secondary:hover, .secondary:focus-visible { border-color: var(--orange); outline: none; }
.link { background: none; border: 0; padding: 6px 0; color: var(--muted); font: 600 13px var(--font); text-decoration: underline; cursor: pointer; }
.link:hover, .link:focus-visible { color: #fff; outline: none; }
.row-small { display: flex; gap: 18px; margin-top: 6px; }

#pause-screen { text-align: center; max-width: 380px; }
#pause-screen .primary { width: 100%; margin-bottom: 8px; }

#over-screen { width: 100%; max-width: 680px; }
.over-grid { display: grid; grid-template-columns: minmax(150px, 44%) 1fr; gap: 16px; align-items: center; }
#cover { width: 100%; height: auto; display: block; box-shadow: 0 8px 28px rgba(0, 0, 0, .6); background: #fff; }
.over-side { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.over-side .link { text-align: left; }

#touch { display: none; touch-action: none; }

@media (pointer: coarse) {
  .only-touch { display: inline; }
  .only-keys { display: none; }

  #touch { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 4px 18px calc(8px + env(safe-area-inset-bottom)); flex: 0 0 auto; }
  #pad { position: relative; width: 156px; height: 156px; border-radius: 50%; background: var(--panel); border: 2px solid #3a3b44; touch-action: none; }
  #pad i { position: absolute; width: 0; height: 0; border: 15px solid transparent; }
  #pad .u { top: 8px; left: 61px; border-bottom-color: #8b8d95; border-top-width: 0; }
  #pad .d { bottom: 8px; left: 61px; border-top-color: #8b8d95; border-bottom-width: 0; }
  #pad .l { left: 8px; top: 61px; border-right-color: #8b8d95; border-left-width: 0; }
  #pad .r { right: 8px; top: 61px; border-left-color: #8b8d95; border-right-width: 0; }
  #pad[data-dir="up"] .u { border-bottom-color: var(--orange); }
  #pad[data-dir="down"] .d { border-top-color: var(--orange); }
  #pad[data-dir="left"] .l { border-right-color: var(--orange); }
  #pad[data-dir="right"] .r { border-left-color: var(--orange); }
  #fire { width: 112px; height: 112px; border-radius: 50%; border: 3px solid #fff; background: var(--orange); color: var(--ink); font: 900 16px var(--font); touch-action: none; }
  #fire:active { background: #ff9d63; }
  #touch-pause { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #5a5c66; background: transparent; color: #fff; font: 800 13px var(--font); }

  /* Phones held sideways: controls float either side of the stage. */
  @media (orientation: landscape) {
    #shell { flex-direction: row; }
    #stage { width: min(calc(100vw - 280px), calc(100dvh * 672 / 526)); }
    #touch { position: fixed; inset: 0; padding: 0 10px; pointer-events: none; align-items: flex-end; padding-bottom: 14px; }
    #pad, #fire, #touch-pause { pointer-events: auto; }
    #pad { width: 128px; height: 128px; }
    #pad .u, #pad .d { left: 47px; }
    #pad .l, #pad .r { top: 47px; }
    #touch-pause { position: fixed; top: 10px; right: 10px; }
  }
}

@media (max-width: 520px) {
  .over-grid { grid-template-columns: 1fr; }
  #cover { max-width: 62vw; margin: 0 auto; }
}

/* The dense how-to needs real estate on small screens, so it scrolls and tightens. */
@media (max-height: 560px), (max-width: 560px) {
  #overlay { padding: 8px; }
  .lede { font-size: 13px; margin-bottom: 8px; }
  .legend { font-size: 11.5px; gap: 3px; }
  .how > div { padding: 5px 8px; font-size: 12px; }
  .over-grid { gap: 10px; }
  .over-side .primary, .over-side .secondary { min-height: 38px; font-size: 13px; padding: 0 8px; }
}