/* ==========================================================
   Jack's Tube Trivia — player controller (mobile)
   Shared neon theme. Screens: 01 enter-code · 01b avatar ·
   02 waiting · 03 question · 03b reveal · 04 scoreboard
   ========================================================== */

:root {
  --c-bg:      #0E0B1A;
  --c-ink:     #FFFFFF;
  --c-muted:   #B4A9E0;

  --c-magenta: #FF2E93;
  --c-cyan:    #22E0FF;
  --c-lime:    #B4FF3A;
  --c-amber:   #FFC93C;
  --c-purple:  #A855F7;
  --c-red:     #FF3B5C;

  --glow-magenta: 0 0 6px rgba(255,46,147,.9), 0 0 18px rgba(255,46,147,.55);
  --glow-cyan:    0 0 6px rgba(34,224,255,.9), 0 0 18px rgba(34,224,255,.5);
  --glow-lime:    0 0 6px rgba(180,255,58,.9), 0 0 18px rgba(180,255,58,.45);
  --glow-amber:   0 0 6px rgba(255,201,60,.9), 0 0 18px rgba(255,201,60,.45);

  --font: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-xs: 4px; --space-sm: 8px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 36px;
  --radius: 18px; --radius-pill: 999px;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-ink);
  background-color: var(--c-bg);
  background-image: image-set(url("../images/bg-stage.webp") type("image/webp"),
                              url("../images/bg-stage.jpg")  type("image/jpeg"));
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* Phone-first screen shell.
   --app-h is set from visualViewport (assets/keyboard.js) so the layout shrinks
   above the on-screen keyboard; 100dvh is the no-JS fallback. */
.screen {
  min-height: var(--app-h, 100dvh);
  max-width: 480px;
  margin-inline: auto;
  padding: max(env(safe-area-inset-top), var(--space-lg)) var(--space-lg)
           max(env(safe-area-inset-bottom), var(--space-lg));
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Logo ---------- */
.logo {
  display: block;
  width: min(76%, 320px);
  margin: var(--space-sm) auto 0;
  mix-blend-mode: screen;   /* black backdrop of the asset drops out */
}
.logo--sm { width: min(42%, 170px); }

/* ---------- Room code pill ---------- */
.room-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 22px;
  border: 2px solid var(--c-magenta);
  border-radius: var(--radius-pill);
  box-shadow: var(--glow-magenta), inset 0 0 12px rgba(255,46,147,.25);
  font-weight: 700; letter-spacing: .06em;
}
.room-pill b { color: var(--c-magenta); text-shadow: var(--glow-magenta); }
.room-pill span { color: var(--c-cyan); text-shadow: var(--glow-cyan); font-size: 1.25rem; }

/* ---------- Headings ---------- */
.h1 {
  font-size: clamp(2rem, 9vw, 2.6rem);
  font-weight: 800; line-height: 1.1; margin: 0; text-align: center;
  text-shadow: 0 2px 18px rgba(168,85,247,.5);
}
.sub { color: var(--c-muted); text-align: center; margin: var(--space-sm) 0 0; font-size: 1.05rem; }

/* ---------- Code entry ---------- */
.code {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2.4%;
  width: 100%; margin: 0; padding: 0; border: 0;
}
.code__box {
  width: 100%; min-width: 0; aspect-ratio: 41/54;
  display: grid; place-items: center;
  font-family: var(--font); font-weight: 800; font-size: clamp(1.5rem, 7vw, 2rem);
  color: #fff; background: rgba(255,255,255,.03);
  border: 2px solid var(--c-cyan); border-radius: 14px;
  box-shadow: var(--glow-cyan), inset 0 0 10px rgba(34,224,255,.15);
  text-align: center; padding: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.code__box::placeholder { color: transparent; }
.code__box:focus { outline: none; border-color: var(--c-magenta); box-shadow: var(--glow-magenta), inset 0 0 12px rgba(255,46,147,.25); }
.code__box--empty { border-color: var(--c-purple); box-shadow: 0 0 6px rgba(168,85,247,.6), inset 0 0 10px rgba(168,85,247,.15); }

/* Next-to-type box: magenta with a blinking caret (matches the mockup) */
.code__box--active {
  border-color: var(--c-magenta);
  box-shadow: var(--glow-magenta), inset 0 0 12px rgba(255,46,147,.22);
  caret-color: transparent;
  /* caret drawn as a glowing bar so it reads on the mockup's terms */
  background-image: linear-gradient(var(--c-magenta), var(--c-magenta));
  background-repeat: no-repeat;
  background-size: 4px 42%;
  background-position: center;
  animation: caret-blink 1.2s ease-in-out infinite;
}
.code__box--active:focus { border-color: var(--c-magenta); }
/* fade rather than hard-blink so the caret is always visible in screenshots */
@keyframes caret-blink { 0%, 100% { opacity: 1 } 55% { opacity: .35 } }

/* ---------- Text field ---------- */
.field {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 16px 20px;
  border: 2px solid var(--c-purple); border-radius: var(--radius);
  background: rgba(168,85,247,.06);
  box-shadow: 0 0 10px rgba(168,85,247,.35);
}
.field svg { flex: none; width: 24px; height: 24px; stroke: var(--c-purple); fill: none; stroke-width: 2; }
.field input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--font); font-size: 1.15rem; font-weight: 600; color: #fff;
}
.field input::placeholder { color: #8E82BF; font-weight: 500; }

/* ---------- Buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 62px; padding: 16px 28px;
  font-family: var(--font); font-weight: 800; font-size: 1.45rem; color: #fff;
  border: 2px solid rgba(255,255,255,.85); border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #FF2E93 0%, #C13BE8 55%, #7C3AED 100%);
  box-shadow: 0 0 16px rgba(255,46,147,.65), 0 0 34px rgba(124,58,237,.45);
  cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 22px rgba(255,46,147,.8), 0 0 46px rgba(124,58,237,.6); }
.btn:active { transform: translateY(0) scale(.99); filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Screen 1 form: code near the heading, CTA pushed toward the bottom */
.screen__form {
  flex: 1 1 auto;
  justify-content: flex-start;
  margin-top: clamp(20px, 4vh, 36px);
  padding-bottom: clamp(8px, 3vh, 28px);
}
.screen__form > .btn { margin-top: auto; margin-bottom: clamp(20px, 9vh, 76px); }

/* Keyboard open (or any short viewport): reclaim vertical space so the CTA
   stays visible above the keyboard. The media query is the no-JS fallback. */
.kb-open .screen        { padding-top: var(--space-sm); }
.kb-open .logo          { width: min(46%, 190px); }
.kb-open .h1            { font-size: 1.5rem; }
.kb-open .screen__form  { margin-top: var(--space-md); padding-bottom: 0; }
.kb-open .screen__form > .btn { margin-bottom: var(--space-md); }
.kb-open .gap-lg > * + *{ margin-top: var(--space-md); }

@media (max-height: 620px) {
  .screen        { padding-top: var(--space-sm); }
  .logo          { width: min(46%, 190px); }
  .h1            { font-size: 1.5rem; }
  .screen__form  { margin-top: var(--space-md); padding-bottom: 0; }
  .screen__form > .btn { margin-bottom: var(--space-md); }
  .gap-lg > * + *{ margin-top: var(--space-md); }
}

/* ---------- Loading overlay ---------- */
/* Shown (display:flex via JS) during async actions like join/leave. */
#overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: none; place-items: center;
  background: rgba(14, 11, 26, .82);
  backdrop-filter: blur(2px);
}
.spinner {
  width: 60px; height: 60px; border-radius: 50%;
  border: 6px solid rgba(34, 224, 255, .18);
  border-top-color: var(--c-cyan);
  box-shadow: var(--glow-cyan);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Layout helpers ---------- */
.stack   { display: flex; flex-direction: column; align-items: center; width: 100%; }
.gap-md > * + * { margin-top: var(--space-md); }
.gap-lg > * + * { margin-top: var(--space-lg); }
.grow    { flex: 1 1 auto; }
.center  { display: grid; place-items: center; }

:focus-visible { outline: 3px solid var(--c-cyan); outline-offset: 3px; border-radius: 10px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
</content>