/* ==========================================================================
   Gravity - web/PWA chrome
   ==========================================================================
   The canvas draws the scene; everything in here is the interactive shell.
   All geometry comes from CSS custom properties that main.js sets from the
   same metrics the canvas uses, so the input bar always lands exactly under
   the play field even as the iOS keyboard opens and closes.
   ========================================================================== */

:root {
  --vv-height: 100vh;
  --vv-top: 0px;
  --hud-h: 56px;
  --sidebar-w: 0px;
  --entry-h: 52px;
  --entry-gap: 8px;
  --entry-bottom: 8px;
  --safe-t: 0px;
  --safe-l: 0px;
  --safe-r: 0px;

  --ink: #f5f6fa;
  --ground: #090b0e;
  --accent: #3bcfcd;
  --accent-hot: #ffcd1d;
  --danger: #fa635e;
  --cyan: #30c5ff;
  --muted: #9aa4b2;

  --font: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  /* A typing game must never trigger callout menus or double-tap zoom. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
}

#safeprobe {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  visibility: hidden;
  pointer-events: none;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

#app {
  position: fixed;
  top: var(--vv-top);
  left: 0;
  right: 0;
  height: var(--vv-height);
  overflow: hidden;
}

#scene {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Pause chip ---------------------------------------------------------- */

/* Sits inside the HUD strip on a phone and just below the inset on desktop,
   where --hud-h collapses to zero because the stats move to the sidebar. */
.chip {
  position: absolute;
  top: calc(var(--safe-t) + 8px);
  right: calc(var(--safe-r) + 10px);
  z-index: 3;
  width: 40px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: rgba(59, 207, 205, 0.9);
  color: #10242b;
  font: 700 12px/1 var(--font);
  cursor: pointer;
}
.chip:active { background: var(--accent-hot); }

/* --- Overlay ------------------------------------------------------------- */
/* Stops above the input bar. The prompt must never cover the field the player
   is typing into, and the keyboard stays open across the whole run. */

.overlay {
  position: absolute;
  top: var(--hud-h);
  left: calc(var(--sidebar-w) + var(--safe-l));
  right: var(--safe-r);
  bottom: calc(var(--entry-h) + var(--entry-bottom) + var(--entry-gap));
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.overlay.hidden { display: none; }

.panel {
  width: 100%;
  max-width: 520px;
  max-height: 100%;
  text-align: center;
}
.panel.scrollable {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: left;
}

.center { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.title { margin: 0; font-size: clamp(26px, 7vw, 44px); font-weight: 700; letter-spacing: -0.02em; }
.muted { color: var(--muted); margin: 0; }
.small { font-size: 13px; }
.hint { margin-top: 4px; opacity: 0.75; }
.danger { color: var(--danger); }
.accent { color: var(--accent); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  appearance: none;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #10242b;
  font: 700 17px/1 var(--font);
  padding: 14px 26px;
  min-height: 48px;          /* comfortable thumb target */
  min-width: 200px;
  cursor: pointer;
}
.btn:active { background: var(--accent-hot); }
.btn.big { font-size: 19px; padding: 17px 32px; }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(245, 246, 250, 0.28);
}
.btn.ghost:active { background: rgba(245, 246, 250, 0.12); }
.btn[disabled] { opacity: 0.5; }

/* --- Deck picker --------------------------------------------------------- */

.decks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }

.deck {
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  overflow: hidden;
}

.deck-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 13px 14px;
  min-height: 56px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.deck-main:active { background: rgba(255, 255, 255, 0.08); }
.deck-name { font-weight: 700; font-size: 16px; }
.deck-meta { font-size: 12px; color: var(--muted); }

.deck-save {
  flex: 0 0 auto;
  min-width: 84px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--cyan);
  font: 600 12px/1 var(--font);
  cursor: pointer;
}
.deck-save.done { color: var(--accent); }
.deck-save:active { background: rgba(255, 255, 255, 0.1); }
.deck-save[disabled] { color: var(--muted); }

.deck-save.local { color: var(--accent-hot); }

.tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-hot);
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* --- Deck import --------------------------------------------------------- */

.field { display: block; text-align: left; margin: 10px 0; }
.field > span { display: block; margin-bottom: 4px; }

.field input,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid rgba(70, 78, 88, 0.9);
  background: rgba(20, 23, 29, 0.94);
  color: var(--ink);
  /* 16px minimum or iOS zooms the page when this is focused. */
  font: 400 16px/1.4 var(--font);
  -webkit-user-select: text;
  user-select: text;
  resize: vertical;
}
.field textarea { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cyan);
}

.row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.row .btn { min-width: 0; flex: 1 1 auto; }

.btn.wide { width: 100%; margin-top: 10px; }
.btn.danger-btn { color: var(--danger); border-color: rgba(250, 99, 94, 0.5); }

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 5px;
  border-radius: 4px;
}

/* --- Prompt -------------------------------------------------------------- */

.prompt { gap: 8px; }
.prompt-img {
  max-width: min(58vw, 220px);
  max-height: 26vh;
  border-radius: 8px;
  object-fit: contain;
}
.prompt-def {
  margin: 0;
  font-size: clamp(14px, 3.8vw, 19px);
  line-height: 1.35;
  color: var(--ink);
}
.prompt-term {
  margin: 2px 0 0;
  font-size: clamp(28px, 8vw, 48px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- Stats --------------------------------------------------------------- */

.stats {
  margin: 4px 0 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
  width: 100%;
  max-width: 340px;
}
.stats > div { display: flex; justify-content: space-between; gap: 10px; }
.stats dt { color: var(--muted); font-size: 13px; margin: 0; }
.stats dd { margin: 0; font-weight: 700; font-size: 15px; }

/* --- Input bar ----------------------------------------------------------- */

.entry {
  position: absolute;
  left: calc(var(--sidebar-w) + var(--safe-l) + 12px);
  right: calc(var(--safe-r) + 12px);
  bottom: var(--entry-bottom);
  height: var(--entry-h);
  z-index: 4;
  display: flex;
  gap: 8px;
}

.entry input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 16px;
  border-radius: 12px;
  border: 2px solid rgba(70, 78, 88, 0.9);
  background: rgba(20, 23, 29, 0.94);
  color: var(--ink);
  /* 16px minimum, or iOS zooms the page the instant this is focused. */
  font: 400 17px/1 var(--font);
  -webkit-user-select: text;
  user-select: text;
  backdrop-filter: blur(8px);
}
.entry input::placeholder { color: #9aa0ac; }
.entry input:focus { outline: none; border-color: var(--cyan); }
.entry input.is-disabled, .entry input[disabled] { opacity: 0.45; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
.entry input.shake {
  animation: shake 0.28s ease;
  border-color: var(--danger);
}

/* Keypad-mode keys: Enter always, +/- only when some answer is negative.
   Pressed state is a class, not :active -- the press is cancelled so the
   input keeps focus, and iOS does not reliably apply :active to that. */
.key {
  display: none;
  flex: none;
  width: calc(var(--entry-h) * 1.25);
  height: 100%;
  border: 0;
  border-radius: 12px;
  background: rgba(59, 207, 205, 0.9);
  color: #10242b;
  font: 700 22px/1 var(--font);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.key-sign { background: rgba(70, 78, 88, 0.9); color: var(--ink); }
.key.down { background: var(--accent-hot); color: #10242b; }
.entry.keypad .key-enter,
.entry.signed .key-sign { display: block; }
.entry input[disabled] ~ .key { opacity: 0.45; }

/* --- Toast --------------------------------------------------------------- */

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--entry-h) + var(--entry-bottom) + 18px);
  transform: translate(-50%, 8px);
  z-index: 5;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(9, 11, 14, 0.9);
  font: 700 15px/1 var(--font);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.good { color: var(--accent); }
.toast.bad { color: var(--danger); }
.toast.info { color: var(--ink); }

/* --- Spinner ------------------------------------------------------------- */

.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(245, 246, 250, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
  .entry input.shake { animation: none; }
  .toast { transition: none; }
}