/* HUMANS vs MACHINES — phone controller. Art bible: VOID bg, PANEL cards,
   gold=human cyan=machine red=wrong only. Compositor-only animations. */

@font-face {
  font-family: 'Press Start 2P';
  src: url('/assets/fonts/press-start-2p.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'VT323';
  src: url('/assets/fonts/vt323.woff2') format('woff2');
  font-display: swap;
}

:root {
  --void: #05070A; --ink: #0A0D12; --panel: #0D1F18;
  --green: #154734; --green-lite: #2E8B63;
  --silver: #C7D0DC; --steel: #5C6672; --white: #FFFFFF;
  --hum: #FFB81C; --hum-lite: #FFDE6E; --hum-deep: #C68A00;
  --mac: #2BD9FF; --mac-lite: #A8F0FF; --mac-deep: #0E7C9E;
  --danger: #FF3B57; --violet: #8C4DFF; --ember: #FF7A29;
  --team: var(--hum); --team-lite: var(--hum-lite); --team-deep: var(--hum-deep);
  --px: 'Press Start 2P', monospace; --vt: 'VT323', monospace;
}
body.team-machine { --team: var(--mac); --team-lite: var(--mac-lite); --team-deep: var(--mac-deep); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--void); color: var(--silver);
  font-family: var(--vt); font-size: 20px;
  overflow: hidden; overscroll-behavior: none; touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}

.screen { display: none; position: fixed; inset: 0; padding: 20px;
  flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.screen.active { display: flex; }
.hidden { display: none !important; }

/* ---------- join ---------- */
.logo { font-family: var(--px); font-size: 22px; color: var(--hum);
  text-align: center; line-height: 1.6; text-shadow: 0 0 12px rgba(255,184,28,.45); }
.logo .vs { color: var(--silver); font-size: 12px; padding: 0 8px; }
.logo::after { content: ''; }
/* Screens that can carry the AIS strip reserve space for whichever state it
   is in (body.aisx = expanded bar, body.aisc = collapsed corner tab), so the
   content reflows instead of being covered. The reserved padding snaps while
   the bar itself animates on transform/opacity only. */
#s-join, #s-wait { gap: 10px; overflow-y: auto; } /* safety net on short screens */
body.aisx #s-join, body.aisx #s-wait {
  padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
body.aisc #s-join, body.aisc #s-wait {
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
/* play expanded: push the whole column (cards + qfoot) above the bar */
body.aisx #s-play {
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
/* play collapsed: the corner wedge owns the bottom-right; the footer row
   compacts and shifts left so SEE WHY / SKIP never sit under it */
body.aisc #s-play .qfoot { padding-right: 84px; }
/* the wedge is big enough to reach above the footer row, so give the cards a
   little floor to sit on: 30px of height, not the 92px a full bar would cost */
body.aisc #s-play { padding-bottom: calc(42px + env(safe-area-inset-bottom, 0px)); }
body.aisc #s-play .seewhy { padding: 8px 10px; }

/* how to play: read once, before the first question, never again */
.howto { list-style: none; counter-reset: h; width: min(340px, 92vw);
  display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0;
  flex: none; }
.howto li { counter-increment: h; position: relative; padding-left: 24px;
  font-size: 16px; line-height: 1.35; color: var(--steel); }
.howto li::before { content: counter(h); position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 3px; background: var(--ink);
  border: 1px solid var(--steel); color: var(--hum);
  font-family: var(--px); font-size: 10px; line-height: 18px; text-align: center; }
.howto b { color: var(--silver); font-weight: 400; }

.joincard { background: var(--panel); border: 2px solid var(--green);
  border-top-color: var(--green-lite); border-radius: 6px;
  padding: 14px 20px 16px; width: min(340px, 92vw); flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px; }
.avwrap { position: relative; }
#join-av { width: 88px; height: 88px; image-rendering: pixelated; }
#reroll { position: absolute; right: -14px; bottom: -6px; width: 44px; height: 44px;
  font-size: 22px; background: var(--ink); color: var(--silver);
  border: 2px solid var(--steel); border-radius: 6px; }
.lbl { font-family: var(--px); font-size: 12px; color: var(--silver); }
.lbl.center { text-align: center; }
#initials { width: 100%; text-align: center; font-family: var(--px);
  font-size: 17px; letter-spacing: 1px;
  background: var(--ink); color: var(--white); caret-color: var(--hum);
  border: 2px solid var(--steel); border-radius: 6px; padding: 12px 4px; outline: none; }
#initials:focus { border-color: var(--hum); }
.err { color: var(--danger); font-size: 18px; min-height: 22px; }
.primary { width: 100%; min-height: 64px; font-family: var(--px); font-size: 16px;
  background: var(--team, var(--hum)); color: var(--ink);
  border: 0; border-radius: 6px; }
.primary:active { transform: scale(.97); }
.ghost { background: none; border: 0; color: var(--steel);
  font-family: var(--vt); font-size: 20px; min-height: 48px; }
.foot { color: var(--steel); font-size: 18px; position: fixed; bottom: 14px; }

/* AIS strip: pinned to the bottom, quiet enough to ignore while reading the
   join card, big enough to hit with a thumb. Both targets are 44px+.
   Two states, driven by a body class: .aisx shows this full bar, .aisc swaps
   it for the diagonal corner tab (.aistab). Both animate on transform/opacity
   only; visibility flips after the slide so hidden states can't be tapped. */
.aisbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 20; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  /* its own band, not buttons floating over the screen */
  background: var(--ink); border-top: 2px solid #1B2430;
  box-shadow: 0 -8px 20px rgba(0,0,0,.55);
  transform: translateY(110%); opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.25,.9,.3,1), opacity .25s linear,
    visibility 0s linear .3s; }
body.aisx .aisbar { transform: none; opacity: 1; visibility: visible;
  pointer-events: auto;
  transition: transform .3s cubic-bezier(.25,.9,.3,1), opacity .25s linear,
    visibility 0s; }
.aisbar .lbl { font-family: var(--px); font-size: 11px; color: var(--steel);
  letter-spacing: 1px; margin-right: 2px; }
.igbtn { display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none; border-radius: 8px;
  border: 2px solid var(--steel); color: var(--silver); }
.igbtn svg { width: 24px; height: 24px; }
.interestbtn { display: flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 20px; border-radius: 8px; text-decoration: none;
  font-family: var(--px); font-size: 13px; letter-spacing: .5px;
  background: var(--hum); color: var(--ink); }
.igbtn:active, .interestbtn:active { transform: scale(.96); }
/* tuck-away control: mirrors the wedge it collapses into */
.barhide { display: flex; align-items: center; justify-content: center;
  width: 44px; height: 46px; flex: none; padding: 0;
  background: none; border: 2px solid #1B2430; border-radius: 8px;
  color: var(--steel); font-family: var(--vt); font-size: 18px; }
.barhide:active { transform: scale(.96); color: var(--hum); }

/* Collapsed state: a 45° wedge tucked into the bottom-right corner. The gold
   diagonal edge + AIS label mark it as the pulled-in bar. The whole 64px
   triangle is the hit area (~90px along the edge, ~45px deep). */
.aistab { position: fixed; right: 0; bottom: 0; z-index: 20;
  width: 92px; height: calc(92px + env(safe-area-inset-bottom, 0px));
  padding: 0; margin: 0; border: 0; -webkit-appearance: none; appearance: none;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: linear-gradient(135deg,
    transparent calc(50% - 3px),
    var(--hum) calc(50% - 3px) calc(50% + 1px),
    rgba(255, 184, 28, .34) calc(50% + 1px),
    rgba(255, 184, 28, .16) 72%,
    #10151E 100%);
  filter: drop-shadow(-2px -2px 8px rgba(0,0,0,.45));
  transform: translate(70px, 70px); opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.25,.9,.3,1), opacity .25s linear,
    visibility 0s linear .3s; }
body.aisc .aistab { transform: none; opacity: 1; visibility: visible;
  pointer-events: auto;
  transition: transform .3s cubic-bezier(.25,.9,.3,1), opacity .25s linear,
    visibility 0s; }
body.aisc .aistab:active { transform: translate(3px, 3px); }
.aistab span { position: absolute;
  inset: 0 0 env(safe-area-inset-bottom, 0px) 0;
  display: flex; align-items: center; justify-content: center;
  transform: translate(19px, 19px) rotate(-45deg);
  font-family: var(--px); font-size: 13px; letter-spacing: 1px;
  color: var(--hum); text-shadow: 0 0 8px rgba(0,0,0,.9); }

/* GG screen: the one moment every phone in the room is looking at the same
   thing, so the sign-up is a tap away instead of a thing to remember later. */
.finalcta { display: flex; flex-direction: column; align-items: center;
  gap: 12px; width: min(360px, 92vw); margin-top: 8px; }
.ctabtn { display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 64px; text-decoration: none;
  font-family: var(--px); font-size: 16px; letter-spacing: .5px;
  border-radius: 6px; }
.ghostbtn { background: none; border: 2px solid var(--steel); color: var(--silver); }
.ghostbtn:active, .primary.ctabtn:active { transform: scale(.97); }
.ctanote { color: var(--steel); font-family: var(--vt); font-size: 18px; }

/* ---------- team stamp ---------- */
#s-stamp { justify-content: center; transition: none; }
#s-stamp.human { background: var(--hum); }
#s-stamp.machine { background: var(--mac); }
.stamp { font-family: var(--px); font-size: 26px; color: var(--ink);
  text-align: center; line-height: 1.8; transform: scale(.2); }
#s-stamp.active .stamp { animation: stampin .5s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes stampin { to { transform: scale(1); } }
.stamp.payout { font-size: 64px; } /* short number: fill the flood */
.stamp-sub { color: var(--ink); font-size: 22px; opacity: .75; }

/* ---------- play ---------- */
#s-play { justify-content: flex-start; padding: 10px 14px 14px; gap: 8px; }
.hud { width: 100%; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid var(--team); padding-bottom: 8px; }
.streak { font-family: var(--px); font-size: 16px; color: var(--ember); }
.who { font-family: var(--px); font-size: 12px; color: var(--team); }
.scorewrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.score { font-family: var(--px); font-size: 18px; color: var(--white); line-height: 1; }
.best { font-family: var(--px); font-size: 9px; color: var(--steel); line-height: 1;
  letter-spacing: .5px; }
.prompt { font-family: var(--px); font-size: clamp(15px, 5.4vw, 23px);
  color: var(--white); text-align: center; line-height: 1.5;
  padding: 10px 2px 0; letter-spacing: -.5px;
  text-shadow: 0 0 14px color-mix(in srgb, var(--team) 55%, transparent); }
.subprompt { align-self: center; font-family: var(--px); font-size: 11px;
  color: var(--team); line-height: 1; letter-spacing: 1px;
  border: 2px solid color-mix(in srgb, var(--team) 45%, transparent);
  border-radius: 999px; padding: 7px 14px; margin-bottom: 2px; }
.subprompt:empty { display: none; }
.cards { width: 100%; flex: 1; min-height: 0; display: flex;
  flex-direction: column; gap: 10px; }
/* Image rounds: every pair is a 3:4 portrait. Stacked A-over-B gives each photo
   ~2x the pixel area of a side-by-side pair on a portrait phone. object-fit is
   `contain`, never `cover` — a crop could hide the very artifact being hunted. */
.cards.imgs .acard { padding: 3px; min-height: 0; }
.cards.imgs .acard img { width: 100%; height: 100%; max-height: none;
  object-fit: contain; border-radius: 3px; }
.acard { flex: 1; background: var(--panel); border: 2px solid var(--steel);
  border-radius: 6px; padding: 14px; font-size: 21px; line-height: 1.35;
  color: var(--silver); display: flex; align-items: center; justify-content: center;
  text-align: center; min-height: 0; position: relative; overflow: hidden;
  transition: transform .06s; }
.acard .tag { position: absolute; top: 6px; left: 8px; font-family: var(--px);
  font-size: 10px; color: var(--silver); z-index: 2;
  background: rgba(5,7,10,.72); padding: 3px 5px; border-radius: 3px; }
.acard img { max-width: 100%; max-height: 38vh; border-radius: 4px; pointer-events: none; }
.acard.pressed { transform: scale(.97); }
.acard.right { border-color: var(--team); background: color-mix(in srgb, var(--team) 18%, var(--panel)); }
.acard.wrongpick { border-color: var(--danger);
  animation: shake .2s; }
.acard.reveal { border-color: var(--violet); }
@keyframes shake { 0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.qfoot { min-height: 46px; width: 100%; display: flex;
  align-items: center; justify-content: center; gap: 10px; }
.tell { font-size: 20px; color: var(--steel);
  text-align: center; padding: 4px 8px; }
.tell:empty { display: none; } /* else its padding shoves the button off-centre */
.tell b { color: var(--silver); }
.dots { display: flex; gap: 8px; }
.dots i { width: 10px; height: 10px; background: var(--steel); border-radius: 2px; }
.dots i.on { background: var(--team); }

/* SEE WHY: opt-in review of the pair they just finished. Deliberately quiet,
   so it never competes with the two answer cards for a thumb. */
.seewhy { background: none; border: 2px solid var(--steel);
  border-radius: 4px; color: var(--steel); font-family: var(--px);
  font-size: 12px; letter-spacing: .5px; padding: 8px 18px; min-height: 42px; }
.seewhy:active { border-color: var(--ember); color: var(--ember); }
.skipq { border-color: #3A2530; color: #8a6f78; } /* quieter still: last resort */
.skipq:active { border-color: var(--danger); color: var(--danger); }
#s-skip .paper { text-align: center; }
#s-skip .c-prompt { font-size: 26px; margin: 6px 0 10px; }
#s-skip .c-sub { margin-bottom: 18px; }

.whywrap { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; width: 100%; height: 100%; }
/* sizes to its content, so a short line doesn't sit in a huge empty box */
.whymedia { flex: 0 1 auto; min-height: 0; max-height: 62%; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 2px solid var(--danger); border-radius: 6px;
  padding: 14px; font-size: 21px; color: var(--silver); text-align: center;
  overflow: auto; }
/* for a photo the red frame hugs the image itself, no letterbox bands */
.whymedia.img { background: none; border: none; padding: 0; }
.whymedia.img img { max-height: 100%; max-width: 100%; width: auto; height: auto;
  object-fit: contain; border: 2px solid var(--danger); border-radius: 6px; }
.whytell { font-size: 20px; color: var(--silver); text-align: center;
  padding: 0 6px; }
.whywrap .primary { width: 100%; }

/* streak death card */
.deathband { font-family: var(--px); font-size: 15px; color: var(--danger); }
.lost { font-family: var(--px); font-size: 15px; color: var(--danger); opacity: .8; }

/* ---------- interrupt card (paper breaks the game frame) ---------- */
.paper { background: #E9E4D8; color: #26221A; width: min(360px, 94vw);
  border-radius: 4px; padding: 26px 22px; position: relative;
  font-family: var(--vt);
  box-shadow: 0 8px 0 rgba(0,0,0,.5); }
.skip { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  background: none; border: 0; color: #8a8271; font-size: 24px; }
/* payout badge: the ask is a trade, so price it on the card */
.c-bonus { position: absolute; top: 10px; left: 22px;
  font-family: var(--px); font-size: 12px; letter-spacing: .5px;
  color: #1F6B3E; background: #DFEDE4; border: 2px solid var(--green);
  border-radius: 3px; padding: 4px 7px; }
.c-bonus:not(.hidden) + .c-title { margin-top: 22px; } /* clear the badge */
.c-title { font-family: var(--px); font-size: 13px; margin-bottom: 6px; }
.c-sub { font-size: 19px; color: #6b6355; margin-bottom: 4px; }
.c-sub.center { text-align: center; color: var(--steel); }
.c-prompt { font-size: 24px; margin: 8px 0 14px; }
.c-body { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.c-body .opt { min-height: 56px; font-family: var(--vt); font-size: 21px;
  background: #F6F2E9; border: 2px solid #B9B09C; border-radius: 4px;
  color: #26221A; text-align: left; padding: 0 14px; }
.c-body .opt.sel { border-color: var(--green); background: #DFEDE4; }
.c-body input[type=text], .c-body input[type=email] {
  min-height: 52px; font-family: var(--vt); font-size: 22px;
  border: 2px solid #B9B09C; border-radius: 4px; padding: 0 12px;
  background: #F6F2E9; color: #26221A; outline: none; width: 100%; }
.c-body label.chk { display: flex; align-items: center; gap: 10px; font-size: 21px;
  min-height: 44px; }
.c-body label.chk input { width: 22px; height: 22px; accent-color: var(--green); }
.paper .primary { background: var(--green); color: #fff; }
.paper .ghost { color: #8a8271; width: 100%; }

/* ---------- showdown / predict ---------- */
.bigword { font-family: var(--px); font-size: 30px; color: var(--violet);
  text-shadow: -2px 0 rgba(255,0,60,.4), 2px 0 rgba(0,229,255,.4);
  text-align: center; line-height: 1.6; }
.bigword.small { font-size: 16px; color: var(--silver); text-shadow: none; }
.tale { font-size: 22px; color: var(--silver); text-align: center; line-height: 1.5; }
.predrow { display: flex; gap: 12px; width: 100%; }
.pbtn { flex: 1; min-height: 96px; font-family: var(--px); font-size: 14px;
  border: 0; border-radius: 6px; color: var(--ink); line-height: 1.6; }
.pbtn.human { background: var(--hum); }
.pbtn.machine { background: var(--mac); }
.pbtn:disabled { opacity: .35; }

/* ---------- clash ---------- */
#s-clash { padding: 0; }
#clash-btn { width: 100%; height: 100%; border: 0;
  background: var(--team); color: var(--ink); font-family: var(--px); }
#clash-btn span { font-size: 40px; display: block; }
#clash-btn em { font-style: normal; font-size: 64px; display: block; margin-top: 18px; }
#clash-btn:active { filter: brightness(1.15); }