/* Tooth Run — portrait, mobile-first.
   The canvas owns all gameplay pixels; this file only sizes the box it lives in
   and styles the overlay screens that sit on top of it. */

:root {
  --ink:      #17394a;
  --ink-soft: #5b7b88;
  --teal:     #00b5b5;
  --orange:   #ff7639;
  --pink:     #ff6fa5;
  --card:     rgba(255, 255, 255, .94);
  --shadow:   0 10px 30px rgba(23, 57, 74, .22);
  /* iOS Safari's layout viewport ignores the bottom URL bar; js publishes the
     really-visible height here so the stage never runs underneath it. */
  --app-vh:   100svh;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  background: #17394a;
  color: var(--ink);
  font: 600 16px/1.4 Nunito, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  display: flex;
  align-items: stretch;
  justify-content: center;
  /* the game is a reflex test — never let a stray drag scroll or select */
  user-select: none;
  -webkit-user-select: none;
}

#game-container {
  position: relative;
  width: 100%;
  min-height: var(--app-vh, 100svh);
  display: flex;
  align-items: center;
  justify-content: center;
}

#stage {
  position: relative;
  flex: none;              /* flex-shrink would squash the canvas box */
  line-height: 0;
}

canvas { display: block; border-radius: 18px; }

/* ---------------------------------------------------------------- screens */

#screens {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  line-height: 1.4;
}
#screens.on { display: flex; }

/* The canvas keeps drawing the world behind an overlay, so the scrim is only
   deep enough to lift the card off it — the game stays visible underneath. */
#screens::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(23, 57, 74, .42);
  backdrop-filter: blur(3px);
  border-radius: 18px;
}

.card {
  position: relative;
  width: min(100%, 460px);
  background: var(--card);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 26px 24px 22px;
  text-align: center;
}

/* Once a card holds only its buttons, a full-width panel is mostly empty white
   around them. These shrink to what they contain. Qualified with .card so it
   beats the width above regardless of which order the two end up in. */
.card.card--bare {
  width: auto;
  max-width: 100%;
  padding: 22px;
}

.card h1 {
  margin: 0 0 4px;
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--teal);
}
.card h2 {
  margin: 0 0 10px;
  font-size: clamp(22px, 6.5vw, 30px);
  font-weight: 900;
  color: var(--ink);
}
.card p { margin: 0 0 16px; color: var(--ink-soft); font-size: 15px; }
.card p.sub { margin: 6px 0 0; font-size: 13px; }

.stars { font-size: 40px; letter-spacing: 6px; margin: 4px 0 2px; color: #ffc233; }
.stars .off { color: var(--ink); opacity: .16; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 9px 0 0;
  padding: 15px 18px;
  font: inherit;
  font-size: 19px;
  font-weight: 900;
  color: #fff;
  background: var(--orange);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .13);
  cursor: pointer;
  transition: transform .08s ease;
}
.btn:active { transform: translateY(2px) scale(.99); box-shadow: 0 2px 0 rgba(0, 0, 0, .13); }
.btn.ghost { background: #e7f3f6; color: var(--ink); box-shadow: 0 4px 0 rgba(23, 57, 74, .10); }
.btn.teal  { background: var(--teal); }

/* Icon-only actions, for the cards where the icon is already the whole message.
   This audience cannot read the label anyway — the loop means again and the
   triangle means go — so the words come off and the tap target grows instead.
   The label survives as aria-label; it is only the visible text that goes. */
.btnrow {
  display: flex;
  justify-content: center;
  gap: 18px;
}
.btn--icon {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border-radius: 50%;
}
.btn--icon svg { width: 42px; height: 42px; }
/* The only thing on the card, so it can afford to be the size of the decision. */
.btn--big { width: 116px; height: 116px; }
.btn--big svg { width: 56px; height: 56px; }

/* ---------------------------------------------------------------- title screen
   The canvas draws Toothy running across the lower half; everything here lives in the
   sky above him. Almost no words — the audience largely cannot read yet, so the only
   thing that must be understood is the play triangle. */

#screens.bare { align-items: stretch; justify-content: stretch; padding: 0; }
#screens.bare::before { background: none; backdrop-filter: none; }

.title {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3.4vh, 30px);
  padding: clamp(22px, 6vh, 54px) 22px 0;
}

.title h1 {
  margin: 0;
  font-size: clamp(40px, 15vw, 76px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.03em;
  text-align: center;
  color: #fff;
  text-shadow: 0 5px 0 rgba(23, 57, 74, .18), 0 12px 26px rgba(23, 57, 74, .22);
}
.title h1 span { display: block; color: var(--orange); }

.picker { display: flex; gap: clamp(8px, 2.6vw, 14px); }
.tile {
  width: clamp(66px, 20vw, 96px);
  padding: 0 0 7px;
  border: 4px solid rgba(255, 255, 255, .85);
  border-radius: 20px;
  background: linear-gradient(var(--sky) 0 42%, var(--hill) 42% 68%, var(--ground) 68% 100%);
  box-shadow: 0 5px 14px rgba(23, 57, 74, .2);
  cursor: pointer;
  transition: transform .1s ease;
}
.tile.sel { border-color: var(--orange); transform: translateY(-4px) scale(1.05); }
.tile:active { transform: scale(.96); }
.tile .num {
  display: block;
  padding: 10px 0 4px;
  font: 900 clamp(24px, 7vw, 34px)/1 Nunito, system-ui, sans-serif;
  color: #fff;
  text-shadow: 0 3px 0 rgba(23, 57, 74, .25);
}
.tile .pips { display: block; font-size: 12px; letter-spacing: 1px; line-height: 1; }
.tile .pips i { font-style: normal; color: rgba(255, 255, 255, .45); }
.tile .pips i.on { color: #ffc233; text-shadow: 0 1px 0 rgba(23, 57, 74, .2); }

.play {
  display: grid;
  place-items: center;
  width: clamp(88px, 26vw, 122px);
  height: clamp(88px, 26vw, 122px);
  padding: 0 0 0 6px;
  color: #fff;
  background: var(--orange);
  border: 5px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  box-shadow: 0 7px 0 rgba(0, 0, 0, .14), 0 14px 30px rgba(23, 57, 74, .26);
  cursor: pointer;
  animation: playPulse 1.9s ease-in-out infinite;
}
.play:active { transform: translateY(3px); box-shadow: 0 4px 0 rgba(0, 0, 0, .14); }
@keyframes playPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .play { animation: none; } }

/* ---------------------------------------------------------------- dev only */
/* Feel panel + its gear button. Development aids — both should come out before this
   ships. Toggled by the gear or the T key. */

#gear {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 20;
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 21px;
  line-height: 1;
  color: #17394a;
  background: rgba(255, 255, 255, .85);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: .5;
  transition: opacity .15s ease;
}
#gear:hover { opacity: 1; }
/* a dot when the game is running on tuned values rather than the defaults */
#gear.tuned { opacity: 1; box-shadow: var(--shadow), 0 0 0 3px var(--orange); }
#gear.hidden { display: none; }

#tune {
  /* Fixed to the page, not the stage: on a desktop the portrait canvas is centred with
     dark margin either side, and this drops straight into it without covering the game. */
  position: fixed;
  right: 14px;
  top: 14px;
  z-index: 21;
  width: 236px;
  max-height: calc(100vh - 28px);
  overflow: auto;
  padding: 10px 12px 12px;
  display: none;
  background: rgba(255, 255, 255, .95);
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-size: 12px;
  line-height: 1.3;
}
#tune.on { display: block; }
#tune h4 {
  margin: 12px 0 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--teal);
}
#tune h4:first-child { margin-top: 0; }
#tune label { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; margin: 6px 0; }
#tune output { font: 11px ui-monospace, Menlo, monospace; color: var(--ink-soft); }
#tune input { grid-column: 1 / -1; width: 100%; accent-color: var(--teal); margin: 0; }

#t_status {
  margin: 10px 0 8px;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
}
#t_status.ok  { background: #e2f6ee; color: #1c7a5a; }
#t_status.bad  { background: #ffe4ec; color: #c02a5c; }
#t_status.warn { background: #fff2dd; color: #9a5a10; }

#tune .row { display: flex; gap: 6px; margin-top: 6px; }
#tune .row button {
  flex: 1 1 0;
  padding: 7px 4px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
  background: #e7f3f6;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
#tune .row button:hover { background: #d5f2f2; }