/* ============================================================
   NECK — app stylesheet.
   Dana Okonkwo's visual contract (neck.css) + the shared component
   classes she authored in screens-desktop.html / screens-phone.html,
   adapted verbatim into the live app. Tokens are the source of truth;
   nothing here is restyled — it is her design, wired.
   ============================================================ */

:root {
  --bg:        #0b0e14;
  --bg-2:      #10141d;
  --bg-3:      #161c28;
  --line:      #232c3d;
  --line-2:    #2e3a50;

  --ink:       #eef2f8;
  --ink-dim:   #8b97ad;
  --ink-faint: #566074;

  --you:       #c6f24e;
  --you-dim:   #7c9130;
  --you-glow:  rgba(198,242,78,0.22);

  --them:      #ff5c5c;
  --them-dim:  #a13a3a;
  --them-glow: rgba(255,92,92,0.20);

  --gold:      #ffd23f;
  --warn:      #ff8a3d;
  --ok:        #4ee39a;

  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r:   14px;
  --r-s: 10px;
  --gap: 14px;

  --ease: cubic-bezier(.2,.9,.25,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(198,242,78,0.05), transparent 60%),
    radial-gradient(900px 700px at 100% 110%, rgba(255,92,92,0.045), transparent 55%);
  transition: background .4s var(--ease);
}
body.win-glow::before {
  background: radial-gradient(900px 600px at 50% 0%, rgba(198,242,78,.12), transparent 60%);
}
body.lose-glow::before {
  background: radial-gradient(900px 600px at 50% 0%, rgba(255,92,92,.12), transparent 60%);
}

/* ---- WORDMARK ---- */
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  user-select: none;
}
.wordmark .n1 { color: var(--you); }
.wordmark .n2 { color: var(--ink); }
.wordmark .dot { color: var(--them); }

/* ---- SHELL ---- */
.screen {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 28px; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0;
}
.topbar .brand { font-size: 26px; }
.topbar .meta {
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* ---- BUTTONS ---- */
.btn {
  font-family: var(--display); font-weight: 600; font-size: 16px;
  border: none; border-radius: var(--r);
  padding: 16px 26px; cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .2s var(--ease), background .2s;
  letter-spacing: -0.01em;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: var(--you); color: #0b0e14;
  box-shadow: 0 0 0 0 var(--you-glow), 0 8px 30px -8px var(--you-glow);
}
.btn-primary:hover { box-shadow: 0 0 0 4px var(--you-glow), 0 10px 40px -6px var(--you-glow); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover { border-color: var(--ink-dim); background: var(--bg-2); }

.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* ============================================================
   COMPONENT CLASSES (from Dana's desktop screens <style>)
   ============================================================ */
.rail { padding: 20px 22px; border-radius: var(--r); border: 1px solid var(--line); }
.rail-you  { background: linear-gradient(180deg, rgba(198,242,78,.07), transparent); border-color: rgba(198,242,78,.28); }
.rail-them { background: linear-gradient(180deg, rgba(255,92,92,.06), transparent); border-color: rgba(255,92,92,.22); }
.rail .who {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; display: flex; align-items: center; gap: 8px;
}
.rail-you .who  { color: var(--you); }
.rail-them .who { color: var(--them); }
.who .pip { width: 9px; height: 9px; border-radius: 50%; }
.rail-you .pip  { background: var(--you); box-shadow: 0 0 10px var(--you-glow); }
.rail-them .pip { background: var(--them); box-shadow: 0 0 10px var(--them-glow); }
.rail .score {
  font-family: var(--display); font-weight: 700; font-size: 76px;
  line-height: 1; letter-spacing: -.04em; margin-top: 8px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.rail .sub { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); margin-top: 6px; }

.bar { height: 8px; border-radius: 99px; background: var(--bg-3); margin-top: 16px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; transition: width .45s var(--ease); }
.rail-you .bar > i  { background: var(--you); box-shadow: 0 0 12px var(--you-glow); }
.rail-them .bar > i { background: var(--them); box-shadow: 0 0 12px var(--them-glow); }

.tray { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tile {
  width: 78px; height: 88px; border-radius: var(--r-s);
  background: var(--bg-3); border: 1px solid var(--line-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 500; font-size: 40px; color: var(--ink);
  position: relative; cursor: pointer; user-select: none;
  transition: transform .1s var(--ease), border-color .15s, background .15s;
}
.tile:hover { border-color: var(--ink-dim); transform: translateY(-2px); }
.tile.used { background: rgba(198,242,78,.14); border-color: var(--you); color: var(--you); }
.tile.flash { animation: tileFlash .35s var(--ease); }
@keyframes tileFlash {
  0% { background: var(--you); color: #0b0e14; transform: scale(1.08); }
  100% { background: var(--bg-3); }
}
.tile .pts {
  position: absolute; right: 8px; bottom: 6px;
  font-size: 12px; color: var(--ink-faint); font-weight: 400;
}

.entry {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 6px 6px 6px 22px;
  transition: border-color .15s, box-shadow .2s;
}
.entry.accept { box-shadow: 0 0 0 2px var(--ok); border-color: var(--ok); }
.entry.shake { animation: shake .25s var(--ease); border-color: var(--them); }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.entry .typed {
  flex: 1; font-family: var(--mono); font-weight: 500; font-size: 30px;
  letter-spacing: .08em; color: var(--ink); text-transform: uppercase;
  min-height: 38px; word-break: break-all;
}
.entry.shake .typed { color: var(--them); }
.caret { color: var(--you); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.entry .go {
  background: var(--you); color: #0b0e14; border: none; border-radius: 10px;
  font-family: var(--display); font-weight: 600; font-size: 15px; padding: 14px 22px; cursor: pointer;
  white-space: nowrap;
}

.found { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--mono); font-size: 13px; color: var(--ink-dim);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; display: inline-flex; gap: 8px; align-items: baseline;
}
.chip b { color: var(--you); font-weight: 500; }
.chip.fly { animation: chipFly .35s var(--ease); }
@keyframes chipFly {
  0% { transform: translateY(-6px) scale(.9); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.clock {
  font-family: var(--display); font-weight: 700; font-size: 44px;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink);
  transition: transform .2s var(--ease), color .3s;
}
.clock.warn { color: var(--warn); transform: scale(1.08); }
.clock.pulse { animation: clockPulse .5s var(--ease); }
@keyframes clockPulse {
  0% { transform: scale(1.08); filter: brightness(1); }
  40% { transform: scale(1.2); filter: brightness(1.4); }
  100% { transform: scale(1.08); filter: brightness(1); }
}

.pop {
  font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--you);
  opacity: 0;
}
.pop.show { animation: popIn .4s var(--ease); }
@keyframes popIn {
  0% { transform: scale(1.4); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1); opacity: .9; }
}

.pips { display: flex; gap: 7px; }
.pips .p { width: 12px; height: 12px; border-radius: 3px; background: var(--bg-3); border: 1px solid var(--line-2); transition: background .3s, border-color .3s; }
.pips .p.you  { background: var(--you);  border-color: var(--you); }
.pips .p.them { background: var(--them); border-color: var(--them); }
.pips .p.pop { animation: pipPop .3s var(--ease); }
@keyframes pipPop { 0% { transform: scale(.4); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

.result-big {
  font-family: var(--display); font-weight: 700; letter-spacing: -.045em;
  line-height: .92; font-size: 120px;
}
.win  { color: var(--you); }
.lose { color: var(--them); }

/* vertical creep column (desktop opponent panel) */
.creep-col {
  flex: 1; background: var(--bg-3); border-radius: 12px; position: relative;
  overflow: hidden; border: 1px solid var(--line); min-height: 220px;
}
.creep-fill {
  position: absolute; bottom: 0; left: 0; right: 0; height: 0%;
  background: linear-gradient(180deg, var(--them), var(--them-dim));
  box-shadow: 0 0 24px var(--them-glow);
  transition: height .45s var(--ease);
}
.creep-fill.glow { animation: creepGlow 1.2s var(--ease); }
@keyframes creepGlow {
  0% { box-shadow: 0 0 24px var(--them-glow); }
  30% { box-shadow: 0 0 60px rgba(255,92,92,.6), 0 0 24px var(--them-glow); }
  100% { box-shadow: 0 0 24px var(--them-glow); }
}
.you-line {
  position: absolute; left: -6px; right: -6px; height: 2px;
  background: var(--you); box-shadow: 0 0 8px var(--you-glow);
  transition: bottom .45s var(--ease);
}
.you-line-label {
  position: absolute; right: 6px; font-family: var(--mono); font-size: 10px; color: var(--you);
  transition: bottom .45s var(--ease);
}

.dashed-ring {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto;
  background: transparent; border: 2px dashed var(--them-dim);
  animation: ringPulse 1.5s var(--ease) infinite;
}
.dashed-ring.solid {
  background: var(--them); border: none; box-shadow: 0 0 30px var(--them-glow);
  animation: ringSnap .4s var(--ease);
}
@keyframes ringPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes ringSnap { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

.solid-you {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto;
  background: var(--you); box-shadow: 0 0 30px var(--you-glow);
}

/* coral drop band over opponent panel */
.drop-band {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
  background: rgba(255,92,92,.14); border: 1px solid var(--them);
  border-radius: 12px; backdrop-filter: blur(2px);
  font-family: var(--mono); font-size: 13px; color: var(--them);
  z-index: 5;
}

.hidden { display: none !important; }
.fade-in { animation: fadeIn .3s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* count-up numbers shouldn't reflow */
.score, .p-score { font-variant-numeric: tabular-nums; }

/* ============================================================
   PHONE FACE (from Dana's screens-phone.html <style>)
   A genuinely separate layout — engaged under 720px.
   ============================================================ */
.p-only { display: none; }

.p-screen { display: flex; flex-direction: column; padding: 22px 20px; min-height: 100vh; }
.p-top { display:flex; align-items:center; justify-content:space-between; }
.p-brand { font-family:var(--display); font-weight:700; letter-spacing:-.04em; font-size:22px; }
.p-brand .a{color:var(--you)} .p-brand .b{color:var(--ink)} .p-brand .d{color:var(--them)}
.p-meta { font-family:var(--mono); font-size:10px; color:var(--ink-faint); letter-spacing:.1em; text-transform:uppercase; }

.p-versus { display:flex; gap:12px; }
.p-side { flex:1; padding:14px 16px; border-radius:14px; border:1px solid var(--line); position: relative; overflow: hidden; }
.p-you { background:linear-gradient(180deg,rgba(198,242,78,.08),transparent); border-color:rgba(198,242,78,.3); }
.p-them{ background:linear-gradient(180deg,rgba(255,92,92,.07),transparent); border-color:rgba(255,92,92,.24); }
.p-who { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; display:flex; align-items:center; gap:6px; }
.p-you .p-who{color:var(--you)} .p-them .p-who{color:var(--them)}
.p-who .pip{width:8px;height:8px;border-radius:50%}
.p-you .pip{background:var(--you)} .p-them .pip{background:var(--them)}
.p-score { font-family:var(--display); font-weight:700; font-size:52px; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; margin-top:4px; }
.p-bar{height:6px;border-radius:99px;background:var(--bg-3);margin-top:10px;overflow:hidden}
.p-bar>i{display:block;height:100%;border-radius:99px; transition: width .45s var(--ease);}
.p-you .p-bar>i{background:var(--you);box-shadow:0 0 10px var(--you-glow)}
.p-them .p-bar>i{background:var(--them);box-shadow:0 0 10px var(--them-glow)}
.p-them .p-bar.glow>i { animation: creepGlow 1.2s var(--ease); }
.p-sub{font-family:var(--mono);font-size:11px;color:var(--them);margin-top:6px; min-height:14px;}

.p-clock{font-family:var(--display);font-weight:700;font-size:40px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-align:center; transition: transform .2s var(--ease), color .3s;}
.p-clock.warn{color:var(--warn); transform: scale(1.06);}
.p-clock.pulse { animation: clockPulse .5s var(--ease); }

.p-tray{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.p-tile{width:44px;height:54px;border-radius:10px;background:var(--bg-3);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:500;font-size:26px;color:var(--ink);position:relative; cursor: pointer; user-select: none; transition: transform .1s var(--ease), background .15s, border-color .15s;}
.p-tile:active { transform: scale(.94); }
.p-tile.used{background:rgba(198,242,78,.14);border-color:var(--you);color:var(--you)}
.p-tile.flash { animation: tileFlash .35s var(--ease); }

.p-entry{display:flex;align-items:center;gap:8px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:14px;padding:6px 6px 6px 18px;margin-top:16px; transition: border-color .15s, box-shadow .2s;}
.p-entry.accept { box-shadow: 0 0 0 2px var(--ok); border-color: var(--ok); }
.p-entry.shake { animation: shake .25s var(--ease); border-color: var(--them); }
.p-typed{flex:1;font-family:var(--mono);font-weight:500;font-size:24px;letter-spacing:.08em;color:var(--ink);text-transform:uppercase; min-height: 30px; word-break: break-all;}
.p-entry.shake .p-typed { color: var(--them); }
.p-go{background:var(--you);color:#0b0e14;border:none;border-radius:10px;font-family:var(--display);font-weight:600;font-size:18px;padding:14px 22px; min-width: 60px;}

.p-found{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.p-chip{font-family:var(--mono);font-size:12px;color:var(--ink-dim);background:var(--bg-2);border:1px solid var(--line);border-radius:7px;padding:5px 8px}
.p-chip b{color:var(--you);font-weight:500}
.p-chip.fly { animation: chipFly .35s var(--ease); }

.p-btn{font-family:var(--display);font-weight:600;font-size:17px;border:none;border-radius:14px;padding:18px;width:100%;cursor:pointer}
.p-btn-primary{background:var(--you);color:#0b0e14}
.p-btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}

.p-pips{display:flex;gap:6px;justify-content:center}
.p-pips .pp{width:11px;height:11px;border-radius:3px;background:var(--bg-3);border:1px solid var(--line-2); transition: background .3s, border-color .3s;}
.p-pips .pp.you{background:var(--you);border-color:var(--you)}
.p-pips .pp.them{background:var(--them);border-color:var(--them)}
.p-pips .pp.pop { animation: pipPop .3s var(--ease); }

.p-result{font-family:var(--display);font-weight:700;letter-spacing:-.045em;line-height:.92;font-size:66px;text-align:center}
.spacer{flex:1}

.p-drop-band {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12px;
  background: rgba(255,92,92,.16); border: 1px solid var(--them);
  border-radius: 14px; font-family: var(--mono); font-size: 11px; color: var(--them); z-index: 5;
}
.p-pop {
  font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--you);
  text-align: right; opacity: 0;
}
.p-pop.show { animation: popIn .4s var(--ease); }

/* ---- FACE SWITCH ---- desktop >=721px, phone <=720px ---- */
@media (max-width: 720px) {
  .d-only { display: none !important; }
  .p-only { display: block; }
}
@media (min-width: 721px) {
  .p-only { display: none !important; }
  .d-only { display: block; }
}