/* DEBATABLE.TV — tokens and landing geometry lifted from the canvas artboards. */

@font-face { font-family:'Cocogoose'; font-weight:100; font-style:normal; font-display:swap;
  src:url('/fonts/cocogoose-100.woff2') format('woff2'); }
@font-face { font-family:'Cocogoose'; font-weight:300; font-style:normal; font-display:swap;
  src:url('/fonts/cocogoose-300.woff2') format('woff2'); }
@font-face { font-family:'Cocogoose'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/fonts/cocogoose-400.woff2') format('woff2'); }
@font-face { font-family:'Cocogoose'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/fonts/cocogoose-700.woff2') format('woff2'); }

:root {
  --cyan: #5AD7E8;
  --cyan-lift: #A2EDF6;
  --cyan-pale: #EAFBFE;
  --cyan-dim: #4A8E99;
  --amber: #F0B44A;
  --amber-pale: #FEF6E8;
  --amber-dim: #9A7936;
  --red: #FF3B30;

  --ink: #0A0A0A;
  --paper: #FFFFFF;
  --wash: #F6F6F6;
  --sunk: #ECECEC;
  --line: #E4E4E4;

  --t2: #3A3A3A;
  --t3: #6A6A6A;
  --t4: #9A9A9A;
  --t5: #B8B8B8;

  /* Cocogoose (4 weights, lifted from the canvas) covers the full Latin
     alphabet and digits — verified, not assumed. It is still display-only by
     choice: headings and the wordmark, with Onest carrying body and any text a
     player typed. */
  --display: 'Cocogoose', 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  --body: 'Onest', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

/* An author `display` rule beats the UA stylesheet's [hidden] { display: none },
   so anything styled display:flex stays on screen while marked hidden. Settle it
   once, globally, instead of remembering a [hidden] override per component. */
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%;
  background: var(--paper);
  font-family: var(--body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--mono); }
/* the one small-label style used everywhere. Plain sentence case in the body
   face — mono is kept for numbers only, where it actually earns its keep. */
.micro {
  font-family: var(--body); font-size: 13px; letter-spacing: 0;
  color: var(--t3); text-transform: none;
}

.screen { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--paper); }

/* shared chrome, same geometry as the landing: squared, hairline rules, cyan fill */
.topbar {
  height: 62px; flex-shrink: 0; padding: 0 28px; display: flex; align-items: center;
  justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--paper);
}
.wm.sm { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.05em; }
.top-mid { display: flex; align-items: center; gap: 10px; }
.clock { font-family: var(--mono); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; }
.live-dot {
  width: 8px; height: 8px; border-radius: 999px; background: #E23B2E;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rules li { font-size: 13px; line-height: 1.4; color: var(--t3); }
.rules li b { color: var(--ink); font-weight: 700; }
.rules-head { margin-bottom: 12px; }

.meter { display: flex; gap: 3px; align-items: flex-end; height: 14px; }
.meter i { width: 4px; background: var(--sunk); display: block; transition: height .08s linear, background .08s linear; }
.meter i.on { background: var(--cyan); }

.bar { position: relative; height: 8px; background: var(--sunk); overflow: hidden; }
.bar.big { height: 12px; }
.bar .fill-you { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cyan); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.bar .fill-them { position: absolute; right: 0; top: 0; bottom: 0; background: var(--amber); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.bar .needle { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); transition: left .5s cubic-bezier(.2,.7,.2,1); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ============================================================ 1 · LANDING */

#landing {
  background: #FFFFFF; color: var(--ink);
  font-family: var(--display);
  align-items: center; justify-content: center;
  gap: clamp(26px, 4vh, 46px);
  padding: clamp(28px, 4vh, 48px) 34px;
}

.brandblock { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wm {
  margin: 0; font-size: clamp(40px, 4.6vw, 64px); font-weight: 700;
  letter-spacing: -0.05em; line-height: 1; text-align: center;
}
.wm .tv { font-size: .54em; color: var(--cyan); letter-spacing: -0.03em; }
.hook {
  margin: 0; font-size: clamp(24px, 2.3vw, 34px); font-weight: 700;
  color: var(--ink); text-align: center; letter-spacing: -0.028em;
}

.action { display: flex; flex-direction: column; align-items: center; gap: 13px; width: min(348px, 84vw); }
.kicker {
  font-family: var(--body); font-size: 15px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--t3); font-size: 13px;
}
.group { width: 100%; display: flex; flex-direction: column; gap: 12px; }

.btn-side {
  width: 100%; height: clamp(60px, 7.2vh, 76px);
  background: var(--cyan); color: var(--ink); border: 2px solid var(--cyan);
  display: flex; align-items: center; justify-content: flex-start; gap: 18px;
  padding-left: clamp(26px, 8%, 54px);
  transition: background .12s linear, border-color .12s linear;
}
.btn-side:hover { background: var(--cyan-lift); border-color: var(--cyan-lift); }
.btn-side .icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.btn-side .label {
  font-family: var(--body); font-weight: 700; font-size: clamp(29px, 2.9vw, 42px);
  letter-spacing: -0.03em; line-height: 1;
}

/* the only small text on the page */
.you-row {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--body); font-size: 13px; letter-spacing: 0;
  text-transform: none; color: var(--t3);
}
.me { display: flex; align-items: baseline; gap: 9px; color: #6A6A6A; }
.me b {
  font-family: var(--body); font-weight: 700; font-size: 13px;
  letter-spacing: -0.01em; text-transform: none; color: var(--ink);
}
.me i { font-style: normal; color: #D0D0D0; }
.linkish {
  font: inherit; color: #A0A0A0; text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--ink); }

/* ========================================================== 2 · MATCHING */

#matching { align-items: stretch; }

.wait {
  flex-grow: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 22px; padding: 24px;
}
.blocks { display: flex; gap: 9px; }
.blocks i { width: 22px; height: 22px; background: var(--cyan); display: block; }
.blocks i:nth-child(1) { animation: step 1.2s ease-in-out infinite; }
.blocks i:nth-child(2) { animation: step 1.2s ease-in-out .18s infinite; }
.blocks i:nth-child(3) { animation: step 1.2s ease-in-out .36s infinite; }
@keyframes step { 0%, 100% { opacity: .22; } 40% { opacity: 1; } }

.wait h2 {
  margin: 0; font-family: var(--display); font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700; letter-spacing: -0.04em; text-align: center;
}
.sides { display: flex; align-items: center; gap: 12px; }
.side-chip {
  font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0;
  padding: 8px 14px; color: var(--ink);
}
.side-chip.you { background: var(--cyan); }
.side-chip.them { background: var(--sunk); color: var(--t3); }
.sides .vs { font-family: var(--mono); font-size: 11px; color: var(--t4); }

.corner { position: absolute; bottom: 28px; width: 236px; }
.corner.left { left: 28px; }
.corner.right { right: 28px; border-left: 1px solid var(--line); padding-left: 16px; }

.selfcheck { height: 148px; background: var(--sunk); overflow: hidden; border: 1px solid var(--line); }
.selfcheck video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }

/* ============================================================== 3 · CALL */

.stage {
  /* Both halves sit together in the middle rather than hugging the far edges. */
  flex-grow: 1; display: flex; min-height: 0; justify-content: center;
}

/* left — two cameras stacked, Omegle style */
.feeds {
  /* The column is exactly as wide as two stacked 4:3 cameras need, so the rail
     sits right beside it and the pair lands in the middle of the screen.
     Width has to be stated outright — deriving it from the cameras' height via
     aspect-ratio is circular, and the column collapses. 140px of chrome
     (top bar + dock), 40px padding and one 14px gap come off the height. */
  --feed-w: min(470px, calc((100vh - 140px - 40px - 14px) / 2 * 4 / 3));
  flex: 0 0 auto; width: var(--feed-w); padding: 20px 0;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.feed {
  flex: 0 0 auto; width: 100%; aspect-ratio: 4 / 3;
  position: relative; background: var(--sunk); border: 1px solid var(--line); overflow: hidden;
}
.feed video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feed.me video { transform: scaleX(-1); }
.feed .placeholder {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--t5);
}
.feed.dark video { visibility: hidden; }
.plate {
  position: absolute; left: 0; bottom: 0; padding: 8px 14px; color: var(--ink);
  font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0;
}
.plate.me { background: var(--cyan); }
.plate.them { background: var(--amber); }
.badges { position: absolute; left: 0; top: 0; display: flex; }
.badge {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper);
}
.badge svg { width: 17px; height: 17px; }
.badge + .badge { border-left: 1px solid rgba(255,255,255,0.3); }

.feed .vu {
  position: absolute; right: 0; bottom: 0; display: flex; gap: 3px; align-items: flex-end;
  height: 30px; padding: 8px 10px; background: var(--paper);
}
.feed .vu i { width: 4px; display: block; background: var(--sunk); transition: height .08s linear; }

/* ---- the call screen has two states: searching, then live ---------------
   Omegle-style: you are on this one screen the whole time. Your camera is up
   from the moment you pick a side; the opponent pane fills in when there is
   someone to fill it. Everything that only means something once you have an
   opponent — their name plate, the ratings, the stakes clock — stays out of
   the way until then. */

/* NOTE: `searching` is also the state class on #call itself, so this block is
   keyed to the child's id. A bare `.searching` selector here matched the call
   screen too and laid the whole screen out as a centred overlay. */
#searching {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center;
}
#searching h2 {
  margin: 0; font-family: var(--display); font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 700; letter-spacing: -0.03em; color: var(--ink);
}
#searching p { margin: 0; font-size: 14px; color: var(--t3); }
#searching .linkish { margin-top: 10px; font-size: 13px; color: var(--t4); text-decoration: underline; text-underline-offset: 3px; }

/* live state hides the search block; searching hides the generic person icon */
#call:not(.searching) #searching { display: none; }
#call.searching .placeholder .ghost { display: none; }

#call.searching .live-dot,
#call.searching .clock,
#call.searching .plate.them,
#call.searching .feed.them .badges,
#call.searching .feed.them .vu,
#call.searching #ratingBlock,
#call.searching .arm,
#call.searching #btnForfeit { display: none; }
.feed .vu i.on { background: var(--ink); }

/* right — rules and metadata */
.rail {
  width: 300px; flex: 0 0 auto; border-left: 1px solid var(--line); background: var(--paper);
  padding: 20px 0 20px 22px; margin-left: 22px;
  display: flex; flex-direction: column; gap: 22px; overflow-y: auto;
}
.rail-block { display: flex; flex-direction: column; }
.rail-block > .micro { margin-bottom: 12px; }

/* the rail says two things: the rule, and whether it is live yet */
.rule { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.arm-head { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--t2); }
.arm.hot .arm-head { color: var(--ink); }

.stake-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--t3);
}
.stake-row:last-child { border-bottom: none; }
.stake-row b { font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.stake-row b.up { color: var(--ink); }
.stake-row b.down { color: var(--t4); }

.ratings { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.ratings .r { font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.ratings .r-vs { font-family: var(--mono); font-size: 10px; color: var(--t4); }
.ratings .r.them { color: var(--t3); }

.arm { border-top: 1px solid var(--line); padding-top: 16px; }
.arm-note { font-size: 13px; line-height: 1.45; color: var(--t3); margin-top: 8px; }
.arm.hot > .micro { color: var(--ink); }
.arm.hot .arm-note { color: var(--ink); font-weight: 600; }

/* dock */
.dock {
  height: 78px; flex-shrink: 0; border-top: 1px solid var(--line); background: var(--paper);
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px; gap: 16px;
}
.dock-left { display: flex; gap: 10px; }
.ctrl {
  height: 44px; padding: 0 20px; display: flex; align-items: center;
  border: 1px solid var(--line); background: var(--wash); color: var(--ink);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  transition: background .12s linear, color .12s linear;
}
.ctrl:hover { background: var(--ink); color: var(--paper); }
.ctrl.off { background: var(--ink); color: var(--paper); }
.ctrl.danger { border-color: #E23B2E; color: #E23B2E; padding: 0 26px; }
.ctrl.danger:hover { background: #E23B2E; color: var(--paper); }

.curtain {
  position: absolute; inset: 0; z-index: 30; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
}
.curtain h2 {
  margin: 0; font-family: var(--display); font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700; letter-spacing: -0.04em; text-align: center;
}
.curtain .count {
  font-family: var(--mono); font-size: 88px; font-weight: 700;
  letter-spacing: -0.04em; line-height: 1; color: var(--cyan);
}

/* =========================================================== 4 · VERDICT */

#verdict { align-items: center; justify-content: center; gap: 30px; padding: 40px 24px; }

.tape { width: min(560px, 94vw); border: 1px solid var(--line); padding: 34px 34px 0; }
.tape-score { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.tape-score .col { display: flex; flex-direction: column; gap: 6px; }
.tape-score .col.right { align-items: flex-end; }
.tape-score .tag { font-family: var(--body); font-size: 13px; color: var(--t3); }
.tape-score .big { font-family: var(--mono); font-size: 54px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.tape-score .big.them { color: var(--t4); font-size: 34px; }
.tape-score .delta { font-family: var(--mono); font-size: 16px; font-weight: 700; }
.tape-score .delta.up { color: var(--ink); }
.tape-score .delta.down { color: var(--t4); }
.tape-score .delta.flat { color: var(--t5); }

.ruling {
  margin: 26px 0 30px; font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.2; text-wrap: pretty;
}

.tape-foot {
  display: flex; align-items: center; gap: 34px;
  border-top: 1px solid var(--line); margin: 0 -34px; padding: 16px 34px;
}
.tape-foot > span { display: flex; flex-direction: column; gap: 3px; }
.tape-foot i {
  font-style: normal; font-family: var(--body); font-size: 12px;
  letter-spacing: 0; text-transform: none; color: var(--t3);
}
.tape-foot b { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.tape-foot .micro { margin-left: auto; }

.verdict-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.big-btn {
  height: 52px; padding: 0 28px; display: flex; align-items: center;
  border: 1px solid var(--line); background: var(--wash); color: var(--ink);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  transition: background .12s linear, color .12s linear;
}
.big-btn:hover { background: var(--ink); color: var(--paper); }
.big-btn.primary { background: var(--cyan); border-color: var(--cyan); }
.big-btn.primary:hover { background: var(--cyan-lift); border-color: var(--cyan-lift); color: var(--ink); }
.big-btn.danger { border-color: #E23B2E; color: #E23B2E; }
.big-btn.danger:hover { background: #E23B2E; border-color: #E23B2E; color: var(--paper); }

/* ============================================================== claim/auth */

.sheet {
  position: fixed; inset: 0; z-index: 60; background: rgba(255,255,255,0.86);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.sheet-card { width: min(400px, 100%); border: 1px solid var(--line); background: var(--paper); padding: 30px; }
.sheet-card h2 {
  margin: 0 0 8px; font-family: var(--display); font-size: 27px;
  font-weight: 700; letter-spacing: -0.045em;
}
.sheet-card p { margin: 0 0 22px; font-size: 14px; color: var(--t3); line-height: 1.5; }
.field { margin-bottom: 10px; }
.field input {
  width: 100%; height: 48px; padding: 0 14px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); font: inherit; font-size: 15px;
}
.field input::placeholder { color: var(--t5); }
.field input:focus { outline: none; border-color: var(--cyan); }
.sheet-err { font-size: 13px; color: #E23B2E; margin-bottom: 10px; min-height: 18px; }
.sheet-actions { display: flex; gap: 10px; }
.sheet-actions .big-btn { flex-grow: 1; justify-content: center; }
.sheet-foot { margin-top: 16px; text-align: center; }
.sheet-foot button { font-size: 13px; color: var(--t4); text-decoration: underline; text-underline-offset: 3px; }
.sheet-foot button:hover { color: var(--ink); }

/* ================================================================ toast */

#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(16px);
  z-index: 90; padding: 12px 20px; background: var(--ink); color: var(--paper);
  font-family: var(--body); font-size: 14px; letter-spacing: 0; text-transform: none;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) {
  .rail { display: none; }
  .corner { display: none; }
  .tape { padding: 24px 22px 0; }
  .tape-foot { margin: 0 -22px; padding: 16px 22px; }
}