/* First Touch — Quiet ritual (approved direction A, 15 July 2026).
   Built on ARC tokens (midnight register). Fraunces + Public Sans. */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-variable.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-italic-variable.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans-variable.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --midnight:#0D1B2A; --midnight2:#122336; --recess:#0A1622;
  --bone:#F5F1E8; --stone:#8A8F98; --mist:#8FA0B3;
  --faint:#7A8CA0; /* quietest text that still clears 4.5:1 on midnight */
  --blue:#4FC3F7; --cyan:#9BE8E0; --gold:#E8B548;
  --red:#A8442A; --clay:#C1683F; --charcoal:#2B2B28;
  --green:#5B8A5E; --green-lit:#8FBF92; --red-lit:#D98B6F;
  --hairline:rgba(245,241,232,.13);
  --arc:linear-gradient(90deg,#4FC3F7 0%,#E8B548 55%,#A8442A 100%);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Public Sans",system-ui,sans-serif;
  --glow-gold:0 0 26px rgba(232,181,72,.45), 0 0 64px rgba(232,181,72,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { height:100%; }
body {
  margin:0; background:var(--midnight); color:var(--bone);
  font-family:var(--sans); font-weight:340; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  overscroll-behavior:none;
}
button { font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; }
:focus-visible { outline:2px solid color-mix(in srgb, var(--blue) 55%, transparent); outline-offset:2px; }

#app { position:fixed; inset:0; overflow:hidden; }

/* ---------- screens ---------- */
.screen {
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:calc(24px + env(safe-area-inset-top)) 26px calc(24px + env(safe-area-inset-bottom));
  overflow-y:auto; overscroll-behavior:contain;
  animation:screen-in .35s var(--ease);
}
.screen[hidden] { display:none; }
@keyframes screen-in { from { opacity:0; transform:translateY(10px); } }
.screen.sub-screen { padding-top:calc(78px + env(safe-area-inset-top)); }
/* content screens read as a column on wide viewports; the live stage stays full-bleed */
#scr-home, .screen.sub-screen { max-width:560px; margin-inline:auto; }

.topbar {
  position:absolute; top:calc(10px + env(safe-area-inset-top)); left:14px; right:14px;
  display:flex; justify-content:space-between; z-index:30; pointer-events:none;
}
.topbar button {
  pointer-events:auto; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; color:var(--mist);
}
.topbar button:active { background:rgba(245,241,232,.08); }

.eyebrow {
  font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--stone);
}
h1.mark { font-family:var(--serif); font-weight:480; font-size:40px; line-height:1.1; margin:10px 0 0; }
h2.ask  { font-family:var(--serif); font-weight:500; font-size:31px; line-height:1.15; margin:0 0 6px; }
.tag { font-size:14px; color:var(--mist); margin:8px 0 0; }
.rule { height:3px; width:88px; border-radius:2px; background:var(--arc); margin:28px 0 32px; flex:none; }

.card-btn {
  display:flex; align-items:center; justify-content:space-between; width:100%;
  text-align:left; background:var(--midnight2); border:1px solid var(--hairline);
  border-radius:14px; padding:18px; margin-bottom:12px; min-height:64px;
  transition:transform .15s var(--ease), border-color .15s;
}
.card-btn:active { transform:scale(.985); border-color:rgba(245,241,232,.3); }
.card-btn .t { font-size:17px; font-weight:480; }
.card-btn small { display:block; font-size:12.5px; color:var(--faint); font-weight:360; margin-top:2px; }
.card-btn svg { flex:none; }

.primary-btn {
  display:block; width:100%; text-align:center; border-radius:14px;
  background:var(--gold); color:var(--charcoal);
  font-weight:600; font-size:17px; padding:16px; min-height:56px;
  transition:transform .15s var(--ease), opacity .2s;
}
.primary-btn:active { transform:scale(.985); }
.primary-btn:disabled { opacity:.35; }
.ghost-btn {
  display:block; width:100%; text-align:center; border-radius:14px;
  border:1px solid var(--hairline); color:var(--mist);
  font-size:15px; padding:14px; min-height:48px; margin-top:10px;
}
a.ghost-btn { text-decoration:none; box-sizing:border-box; }
.foot { margin-top:auto; padding-top:28px; text-align:center; font-size:12px; color:var(--faint); }
.textlink {
  color:var(--mist); font-size:14px; text-decoration:underline; text-underline-offset:3px;
  padding:12px 10px; margin:-12px -10px; /* full-size hit area on a quiet link */
}

/* ---------- steppers ---------- */
.stepper { display:flex; align-items:center; justify-content:center; gap:26px; margin:30px 0; }
.stepper button {
  width:58px; height:58px; border-radius:50%; border:1px solid var(--hairline);
  color:var(--bone); font-size:26px; font-weight:300; display:grid; place-items:center;
  transition:transform .12s var(--ease);
}
.stepper button:active { transform:scale(.92); background:rgba(245,241,232,.07); }
.stepper button:disabled { opacity:.25; }
.stepper .num {
  font-family:var(--serif); font-weight:480; font-size:76px; line-height:1;
  min-width:2ch; text-align:center; font-variant-numeric:tabular-nums;
}
.stepper-note { text-align:center; font-size:14px; color:var(--mist); min-height:44px; }
.stepper-note strong { color:var(--gold); font-weight:520; }

/* split method toggle */
.seg { display:flex; border:1px solid var(--hairline); border-radius:14px; padding:4px; margin:6px 0 24px; }
.seg button {
  flex:1; padding:13px 8px; border-radius:10px; font-size:15px; color:var(--mist); min-height:48px;
}
.seg button[aria-pressed="true"] { background:var(--midnight2); color:var(--bone); border:1px solid var(--hairline); }

/* ---------- team sizes ---------- */
.team-row {
  display:flex; align-items:center; gap:14px; padding:13px 0;
  border-bottom:1px solid var(--hairline);
}
.team-row .chip {
  width:34px; height:34px; border-radius:50%; flex:none;
  border:2px solid var(--tc, var(--stone)); position:relative;
}
.team-row .chip::after {
  content:""; position:absolute; inset:8px; border-radius:50%; background:var(--tc, var(--stone));
}
.team-row .name { flex:1; font-size:16px; }
.team-row .mini { display:flex; align-items:center; gap:12px; }
.team-row .mini button {
  width:44px; height:44px; border-radius:50%; border:1px solid var(--hairline);
  font-size:20px; font-weight:300; display:grid; place-items:center;
}
.team-row .mini .n { font-family:var(--serif); font-size:26px; min-width:1.6ch; text-align:center; font-variant-numeric:tabular-nums; }
.sum-note { text-align:center; font-size:14px; margin:16px 0 20px; min-height:22px; }
.sum-note.ok { color:var(--green-lit); }
.sum-note.off { color:var(--red-lit); }

.swatch-row { display:flex; flex-wrap:wrap; gap:10px; padding:12px 0 4px; }
.swatch-row button {
  width:36px; height:36px; border-radius:50%; border:2px solid transparent;
  background:var(--sc); position:relative;
}
.swatch-row button.edge { box-shadow:inset 0 0 0 1px rgba(245,241,232,.35); }
.swatch-row button[aria-pressed="true"] { border-color:var(--bone); }
.swatch-row button:disabled { opacity:.22; }

/* ---------- live stage ---------- */
#scr-live { padding:0; overflow:hidden; touch-action:none; }
#stage { position:absolute; inset:0; touch-action:none; }

#perimeter { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; }
#perimeter rect { opacity:0; }
#perimeter rect.tracing { opacity:1; stroke-dasharray:0 100; animation:trace-draw var(--trace-ms,2600ms) linear forwards; }
#perimeter rect.retract { opacity:1; animation:trace-out .3s var(--ease) forwards; }
@keyframes trace-draw { from { stroke-dasharray:0 100; } to { stroke-dasharray:100 0; } }
@keyframes trace-out  { to { stroke-dasharray:0 100; opacity:0; } }

.status-wrap {
  position:absolute; top:calc(58px + env(safe-area-inset-top)); left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:10; pointer-events:none; text-align:center; padding:0 24px;
}
.round-label { font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); }
.status-chip {
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--hairline); border-radius:999px; padding:8px 18px;
  font-size:14px; color:var(--mist);
  transition:color .4s, border-color .4s;
}
.status-chip .lamp { width:8px; height:8px; border-radius:50%; background:var(--faint); transition:background .4s; }
.status-chip.red   { color:var(--red-lit);   border-color:color-mix(in srgb, var(--red) 55%, transparent); }
.status-chip.red .lamp   { background:var(--red-lit); }
.status-chip.gold  { color:var(--gold);      border-color:color-mix(in srgb, var(--gold) 55%, transparent); }
.status-chip.gold .lamp  { background:var(--gold); }
.status-chip.green { color:var(--green-lit); border-color:color-mix(in srgb, var(--green) 65%, transparent); }
.status-chip.green .lamp { background:var(--green-lit); }

.win-caption {
  position:absolute; top:calc(64px + env(safe-area-inset-top)); left:0; right:0;
  text-align:center; z-index:10; pointer-events:none;
  font-family:var(--serif); font-style:italic; font-size:24px; color:var(--gold);
  opacity:0; transition:opacity .45s var(--ease);
}
.win-caption.show { opacity:1; }

.stage-hint {
  position:absolute; left:0; right:0; bottom:calc(44px + env(safe-area-inset-bottom));
  text-align:center; font-size:13px; color:var(--faint); z-index:10; pointer-events:none;
  padding:0 30px; transition:opacity .3s;
}
.idle-pulse { animation:idle 3s ease-in-out infinite; }
@keyframes idle { 0%,100% { opacity:.55; } 50% { opacity:1; } }

.live-actions {
  position:absolute; left:0; right:0; bottom:calc(28px + env(safe-area-inset-bottom));
  display:flex; justify-content:center; gap:12px; z-index:20;
  opacity:0; pointer-events:none; transition:opacity .4s .3s;
}
.live-actions.show { opacity:1; pointer-events:auto; }
.live-actions button {
  border:1px solid var(--hairline); border-radius:999px; padding:12px 24px;
  font-size:15px; color:var(--bone); background:rgba(18,35,54,.85); min-height:48px;
}

/* ---------- finger dots ---------- */
.dot {
  position:absolute; left:0; top:0; width:134px; height:134px; margin:-67px 0 0 -67px;
  pointer-events:none; z-index:8;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.dot .ring { position:absolute; inset:0; }
.dot .ring circle.base {
  fill:none; stroke:var(--c); stroke-width:7; opacity:0;
  transition:opacity .3s;
}
.dot .ring circle.confirm {
  fill:none; stroke:var(--c); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:0 100;
  transform:rotate(-90deg); transform-origin:center;
}
.dot.confirming .ring circle.confirm { animation:confirm-sweep var(--confirm-ms,1500ms) linear forwards; }
@keyframes confirm-sweep { from { stroke-dasharray:0 100; } to { stroke-dasharray:100 0; } }
.dot .center {
  position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:50%; background:var(--c);
}
.dot .badge {
  position:absolute; left:50%; bottom:-26px; transform:translateX(-50%);
  font-size:11px; font-weight:520; color:var(--mist); white-space:nowrap;
  opacity:0; transition:opacity .3s;
}
/* breathe on the svg element, not the circle: SVG children don't composite */
.dot.armed .ring { animation:ring-breathe 2.4s ease-in-out infinite; transform-origin:center; }
.dot.armed .ring circle.base { opacity:1; }
.dot.armed .ring circle.confirm { opacity:0; transition:opacity .4s; }
.dot.armed .badge { opacity:1; }
@keyframes ring-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.055); } }

.dot.loser { opacity:.06; transform:scale(.82); }
.dot.winner { transform:scale(1.16); }
.dot .halo {
  position:absolute; inset:-6px; border-radius:50%;
  opacity:0; animation:halo-in .6s var(--ease) forwards;
}
.dot.winner .halo { box-shadow:var(--glow-gold); }
@keyframes halo-in { to { opacity:1; } }

/* team lines: grow from each member and meet in the middle */
#lines {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:6;
}
#lines line {
  stroke-width:2.5; stroke-linecap:round; opacity:.85;
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:line-draw .9s var(--ease) forwards;
}
@keyframes line-draw { to { stroke-dashoffset:0; } }
.dot.edge-color .ring circle.base { filter:drop-shadow(0 0 1px rgba(245,241,232,.6)); }

/* ---------- results ---------- */
.result-block {
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  background:var(--midnight2); border:1px solid var(--hairline);
  border-radius:14px; padding:16px 18px; margin-bottom:10px;
  transition:border-color .12s, box-shadow .3s;
}
.result-block .chip { width:30px; height:30px; border-radius:50%; border:2px solid var(--tc); flex:none; position:relative; }
.result-block .chip::after { content:""; position:absolute; inset:7px; border-radius:50%; background:var(--tc); }
.result-block .t { flex:1; font-size:16px; }
.result-block .n { font-family:var(--serif); font-size:24px; color:var(--mist); font-variant-numeric:tabular-nums; }
.result-block.picking { border-color:rgba(232,181,72,.6); }
.result-block.picked { border-color:var(--tc); box-shadow:0 0 26px -6px var(--tc); }
.result-block .members {
  flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;
}
.result-block .members span {
  font-size:12px; font-weight:520; letter-spacing:.06em;
  border:1px solid var(--tc); color:var(--bone);
  border-radius:999px; padding:3px 10px;
  transition:border-color .12s, color .12s;
}
.result-block .members span.picking { border-color:var(--gold); color:var(--gold); }
.result-block .members span.picked {
  border-color:var(--gold); color:var(--gold);
  box-shadow:0 0 14px -2px var(--gold);
}

.tf { margin-top:24px; }
.tf-note {
  font-family:var(--serif); font-style:italic; font-size:21px; color:var(--gold);
  text-align:center; margin:0 0 16px;
}

/* ---------- share ---------- */
.share-box {
  background:var(--midnight2); border:1px solid var(--hairline); border-radius:14px;
  padding:18px; margin-bottom:12px;
}
.share-box h3 { font-family:var(--serif); font-weight:520; font-size:18px; margin:0 0 8px; }
.share-box p { font-size:14px; color:var(--mist); margin:0 0 6px; }
.share-box .url {
  font-size:13px; color:var(--cyan); word-break:break-all;
  background:var(--recess); border-radius:10px; padding:10px 12px; margin:10px 0;
}
.qr-card {
  display:grid; place-items:center;
  background:var(--bone); border-radius:10px; padding:16px;
}
.qr-card svg { width:100%; max-width:220px; height:auto; display:block; }

/* ---------- toast ---------- */
.toast {
  position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom));
  transform:translate(-50%, 12px); z-index:60;
  background:var(--midnight2); border:1px solid var(--hairline); border-radius:12px;
  padding:12px 20px; font-size:14px; color:var(--bone); max-width:86vw; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.show { opacity:1; transform:translate(-50%, 0); }

/* ---------- name players (live-screen chip + in-app keyboard) ---------- */
.status-wrap .name-chip { pointer-events:auto; }
.name-chip {
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  border:1px solid var(--hairline); border-radius:999px; padding:10px 18px;
  font-size:13px; color:var(--mist); background:rgba(18,35,54,.75);
  transition:color .2s, border-color .2s, background .2s;
}
.name-chip[aria-pressed="true"] {
  color:var(--gold); border-color:rgba(232,181,72,.55); background:rgba(232,181,72,.12);
}
.chip-row { display:flex; gap:8px; align-items:center; pointer-events:none; }
.chip-row .name-chip { pointer-events:auto; }
.info-chip {
  display:inline-flex; align-items:center; min-height:44px;
  border:1px solid var(--hairline); border-radius:999px; padding:10px 16px;
  font-size:13px; color:var(--faint); background:rgba(18,35,54,.5);
}
#naming-done {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:26; width:auto; padding:18px 46px; font-size:18px;
  box-shadow:0 14px 44px rgba(10,22,34,.6);
}

.kb-team { display:flex; align-items:center; color:var(--mist); }
.kb-dot {
  display:inline-block; width:11px; height:11px; border-radius:50%;
  background:var(--tc); margin-right:9px;
}
.kb-slots { display:flex; justify-content:center; gap:10px; margin:16px 0 18px; min-height:64px; }
.kb-slots span {
  width:52px; height:64px; border-bottom:2px solid var(--hairline);
  font-family:var(--serif); font-size:38px; text-align:center; line-height:64px;
  color:var(--bone);
}
.kb-slots span.filled { border-color:var(--gold); }
.kb-slots span.active { animation:cursor-pulse 1.2s ease-in-out infinite; }
@keyframes cursor-pulse {
  0%, 100% { border-color:var(--hairline); }
  50% { border-color:var(--gold); }
}
.kb-slots span.hint {
  opacity:.4; transform:scale(.92);
  animation:hint-in .3s var(--ease), hint-pulse 1.6s ease-in-out .3s infinite;
}
@keyframes hint-in { from { opacity:0; transform:scale(.7); } }
@keyframes hint-pulse { 0%, 100% { opacity:.35; } 50% { opacity:.65; } }
.kb-row { display:flex; justify-content:center; gap:6px; margin-bottom:7px; }
.kb-key {
  flex:1; min-width:24px; max-width:34px; height:46px; border-radius:8px;
  background:var(--recess); border:1px solid var(--hairline);
  color:var(--bone); font-size:15px; font-weight:480;
}
.kb-key:active { background:var(--midnight); border-color:var(--stone); }
.kb-key.kb-del { max-width:48px; font-size:17px; color:var(--mist); }
.kb-actions { display:flex; gap:10px; margin-top:16px; }
.kb-actions button { flex:1; width:auto; margin:0; }

.modal {
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  background:rgba(10,22,34,.78); padding:26px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.modal-card {
  width:100%; max-width:320px; background:var(--midnight2);
  border:1px solid var(--hairline); border-radius:14px; padding:22px;
}
@media (prefers-reduced-motion: reduce) {
  .screen { animation:none; }
  .dot.armed .ring { animation:none; }
  .idle-pulse { animation:none; }
  .kb-slots span.hint { animation:hint-in .3s var(--ease); }
}