/* Wavelength — Game Theory Content · premium retro theme */
:root {
  --bg: #131c36;
  --bg-deep: #0d1428;
  --panel: #182242;
  --panel-2: #1d2a4f;
  --ink: #ece4d0;
  --dim: #8d97b8;
  --cream: #ece4d0;
  --cream-30: rgba(236, 228, 208, 0.3);
  --cream-15: rgba(236, 228, 208, 0.15);
  --coral: #e2654f;
  --coral-deep: #c14e3b;
  --gold: #c9a45c;
  --teal: #3f9184;
  --green: #b9dcb2;
  --dial-face: #f0e8d5;
  --dial-rim: #ece4d0;
  --dial-tick: rgba(26, 39, 69, 0.55);
  --cover-tick: rgba(236, 228, 208, 0.55);
  --needle: #e2654f;
  --cover: #00bfff;
  --radius: 16px;
  --font-display: 'Jost', 'Futura', 'Avenir Next', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 38%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(1px 1px at 34% 64%, rgba(255,255,255,0.3), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 58%, rgba(185, 220, 178, 0.4), transparent 60%),
    radial-gradient(1px 1px at 8% 82%, rgba(255,255,255,0.28), transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 18%, rgba(127, 195, 182, 0.45), transparent 60%),
    radial-gradient(1px 1px at 52% 88%, rgba(185, 220, 178, 0.35), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='1000'%3E%3Cpath d='M0 0 H90 C150 120 40 230 120 350 C190 460 60 600 130 720 C190 830 70 920 110 1000 H0 Z' fill='%232a3b63' opacity='0.5'/%3E%3Cpath d='M0 0 H45 C95 140 15 260 75 390 C130 500 25 640 85 770 C130 870 30 930 55 1000 H0 Z' fill='%233f9184' opacity='0.22'/%3E%3Cpath d='M0 300 C55 380 15 470 65 560 C105 640 30 700 50 760 C70 830 20 900 40 1000 H0 Z' fill='%23b9dcb2' opacity='0.12'/%3E%3Cpath d='M0 560 C60 620 20 720 70 800 C110 870 40 940 60 1000 H0 Z' fill='%23d9ba8c' opacity='0.22'/%3E%3C/svg%3E") left top / min(18vw, 260px) 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='1000'%3E%3Cpath d='M240 0 H150 C90 120 200 230 120 350 C50 460 180 600 110 720 C50 830 170 920 130 1000 H240 Z' fill='%232a3b63' opacity='0.5'/%3E%3Cpath d='M240 0 H195 C145 140 225 260 165 390 C110 500 215 640 155 770 C110 870 210 930 185 1000 H240 Z' fill='%233f9184' opacity='0.2'/%3E%3Cpath d='M240 180 C185 260 225 350 175 440 C135 520 210 590 190 660 C170 730 220 800 200 900 C190 950 215 980 225 1000 H240 Z' fill='%23b9dcb2' opacity='0.12'/%3E%3Cpath d='M240 430 C180 500 220 610 170 700 C130 780 200 900 180 1000 H240 Z' fill='%23d9ba8c' opacity='0.22'/%3E%3C/svg%3E") right top / min(18vw, 260px) 100% no-repeat,
    radial-gradient(1100px 700px at 50% -160px, var(--panel), var(--bg) 55%, var(--bg-deep));
  color: var(--ink);
  font-family: var(--font-body);
}
.hidden { display: none !important; }
.dim { color: var(--dim); }
.spacer { flex: 1; }

/* ---------- typography ---------- */
.title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--cream);
  display: flex; align-items: center; justify-content: center; gap: 22px;
  text-transform: uppercase;
}
.rule { display: inline-block; width: 54px; height: 1.5px; background: var(--cream-30); }
.rule.sm { width: 22px; }
.title-orn { text-align: center; color: var(--gold); font-size: 0.7rem; letter-spacing: 0; margin-top: 2px; }
.subtitle { text-align: center; color: var(--dim); font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.3em; margin: 10px 0 0; }
h2 { font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.28em; color: var(--cream); margin: 0 0 12px; text-transform: uppercase; }
h3 { font-family: var(--font-display); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.26em; color: var(--gold); margin: 22px 0 8px; text-transform: uppercase; }
.small-note { font-size: 0.8rem; line-height: 1.5; color: var(--dim); }

/* ---------- buttons & inputs ---------- */
.btn {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  color: var(--cream);
  border: 1.5px solid var(--cream-30);
  border-radius: 12px;
  padding: 11px 20px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.08s, opacity 0.15s;
}
.btn:hover:not(:disabled) { border-color: var(--cream); background: rgba(236, 228, 208, 0.06); transform: translateY(-1px); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn.solid { background: var(--coral); border-color: var(--coral); color: #fff6ec; }
.btn.solid:hover:not(:disabled) { background: #ea7460; border-color: #ea7460; }
.btn.big { font-size: 1.05rem; padding: 15px 30px; width: 100%; border-radius: 14px; }
.btn.small { font-size: 0.7rem; padding: 8px 14px; }
.btn.tiny { font-size: 0.62rem; padding: 6px 11px; border-radius: 9px; letter-spacing: 0.16em; }
.btn.danger { border-color: rgba(226, 101, 79, 0.55); color: var(--coral); }
.btn.danger:hover:not(:disabled) { border-color: var(--coral); background: rgba(226, 101, 79, 0.1); }
.btn.ctx { font-size: 0.76rem; }
.btn.guess {
  font-size: 1rem; padding: 13px 30px; border-radius: 40px;
  display: inline-flex; align-items: center; gap: 12px;
  border-width: 1.5px;
}
.btn.guess .chev { width: 17px; height: 11px; color: var(--coral); }
.btn.guess.selected { border-color: var(--coral); background: rgba(226, 101, 79, 0.14); color: #fff; }
.file-btn { display: inline-block; }

input[type="text"], input[type="number"], select {
  background: rgba(13, 20, 40, 0.7);
  color: var(--ink);
  border: 1.5px solid var(--cream-30);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: var(--font-body);
  min-width: 0;
}
input[type="color"] { width: 42px; height: 42px; border: none; background: none; cursor: pointer; padding: 0; }
input:focus, select:focus { outline: none; border-color: var(--gold); }
::placeholder { color: rgba(141, 151, 184, 0.7); }

.field-row { display: flex; align-items: center; gap: 10px; margin: 9px 0; font-size: 0.9rem; }
.field-row input[type="text"] { flex: 1; }
.field-row input[type="number"] { width: 76px; }
.check-row { display: flex; align-items: center; gap: 9px; margin: 8px 0; font-size: 0.88rem; cursor: pointer; }
input[type="checkbox"] { accent-color: var(--coral); width: 15px; height: 15px; }

.tag { font-size: 0.58rem; font-weight: 600; font-family: var(--font-display); letter-spacing: 0.14em; padding: 2px 8px; border-radius: 20px; vertical-align: middle; }
.tag-nsfw { background: rgba(226, 101, 79, 0.18); color: var(--coral); border: 1px solid rgba(226, 101, 79, 0.4); }
.tag-brain { background: rgba(63, 145, 132, 0.2); color: #7cc3b6; border: 1px solid rgba(63, 145, 132, 0.5); }

/* ---------- lobby ---------- */
#lobby { max-width: 620px; margin: 0 auto; padding: 56px 20px 60px; position: relative; }
.lobby-head { margin-bottom: 26px; }
.lobby-head .title { font-size: 2.5rem; }
.banner {
  border: 1.5px solid var(--gold); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px;
  background: rgba(201, 164, 92, 0.08); font-size: 0.9rem;
}
.lobby-card {
  border: 1.5px solid var(--cream-15); background: rgba(24, 34, 66, 0.55);
  border-radius: 20px; padding: 26px 28px;
}
.lobby-actions { display: flex; gap: 10px; margin: 18px 0 8px; flex-wrap: wrap; }
.lobby-actions .btn { flex: 1; white-space: nowrap; font-size: 0.68rem; }
#btn-start { margin-top: 14px; }

/* ---------- console ---------- */
#console { display: flex; flex-direction: column; height: 100vh; position: relative; }
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 10px;
}
.bar-title { font-size: 0.95rem; }
.hud { font-family: var(--font-display); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.24em; color: var(--dim); text-transform: uppercase; }
.hud.phase { color: var(--gold); }
#phone-count { color: var(--gold); margin-left: 4px; }

.stage { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 4px 18px 0; min-height: 0; }
/* team cards float in the corners so the dial gets the vertical space */
.team-row { position: relative; width: 100%; }
.team-row .team-card { position: absolute; top: 0; z-index: 5; }
#team-card-0 { left: 4px; }
#team-card-1 { right: 4px; }
.stage-mid { text-align: center; padding-top: 8px; }
.psychic-pill {
  font-family: var(--font-display); letter-spacing: 0.2em; text-transform: uppercase;
  font-size: 0.72rem; color: var(--cream);
  border: 1.5px solid var(--cream-15); border-radius: 30px; padding: 7px 18px;
  cursor: pointer; display: inline-block;
}
.psychic-pill:hover { border-color: var(--cream-30); }
.psychic-pill b { color: var(--gold); font-weight: 500; }
.turn-note { font-size: 0.68rem; color: var(--dim); margin-top: 6px; letter-spacing: 0.06em; }

.team-card {
  border: 2px solid var(--cream-30); border-radius: 16px;
  padding: 10px 20px 10px; text-align: center; min-width: 128px;
  background: rgba(13, 20, 40, 0.35);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.team-card.active { border-color: var(--team, var(--coral)); box-shadow: 0 0 24px -6px var(--team, var(--coral)); }
.team-kicker { font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.34em; color: var(--dim); }
.team-name { font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: 0.14em; color: var(--team, var(--cream)); text-transform: uppercase; margin-top: 2px; }
.team-score { font-family: var(--font-display); font-weight: 400; font-size: 2.9rem; line-height: 1.05; color: var(--cream); font-variant-numeric: tabular-nums; }
.team-tools { display: flex; gap: 5px; justify-content: center; margin-top: 4px; }
.adj {
  background: transparent; border: 1px solid var(--cream-15); color: var(--dim);
  border-radius: 7px; min-width: 26px; padding: 2px 7px; font-size: 0.72rem; cursor: pointer;
  font-family: var(--font-display); letter-spacing: 0.1em;
}
.adj:hover { border-color: var(--cream-30); color: var(--cream); }
.adj.wide { font-size: 0.56rem; }

#op-dial { width: min(100%, 940px); flex: 1; min-height: 0; margin-top: 2px; cursor: default; }
#op-dial.draggable { cursor: grab; }

/* fixed-shape bar: the type scales down to fit, the pill never changes size */
.spectrum-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border: 1.5px solid rgba(236, 228, 208, 0.6); border-radius: 40px;
  padding: 0 32px; width: min(100%, 880px); height: 74px; flex-shrink: 0;
  margin-top: 10px; overflow: hidden;
  background: linear-gradient(100deg, #d9ba8c 0%, #b8bfba 48%, #86aac9 100%);
}
.spec-label {
  font-family: var(--font-display); font-weight: 600; font-size: 1.4rem;
  letter-spacing: 0.05em; color: #16233f; line-height: 1.12;
  max-width: 46%;
}
.spec-label.left { text-align: left; }
.spec-label.right { text-align: right; }
.spectrum-pill .spec-label.long { font-size: 1.05rem; }
.spectrum-pill .spec-label.xlong { font-size: 0.85rem; }
.d-pill .spec-label.long { font-size: clamp(0.95rem, 1.9vw, 2rem); }
.d-pill .spec-label.xlong { font-size: clamp(0.78rem, 1.5vw, 1.6rem); }
.spec-arrow { color: var(--gold); font-size: 1.25rem; flex-shrink: 0; }
.spectrum-meta { margin-top: 6px; font-size: 0.7rem; color: var(--dim); display: flex; gap: 8px; align-items: center; min-height: 18px; }

.clue-row {
  display: flex; align-items: center; gap: 12px; width: min(100%, 640px); margin-top: 10px;
}
.clue-kicker { font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.3em; color: var(--gold); }
.clue-row input { flex: 1; text-align: center; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.08em; border-radius: 30px; }

.ctx-row { display: flex; gap: 12px; margin-top: 14px; min-height: 20px; flex-wrap: wrap; justify-content: center; }

.score-review {
  border: 1.5px solid var(--gold); border-radius: var(--radius);
  background: rgba(201, 164, 92, 0.07);
  padding: 12px 22px; margin-top: 12px; max-width: 640px; text-align: center;
}
.review-kicker { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.3em; color: var(--gold); }
.score-review p { margin: 6px 0 10px; font-size: 0.9rem; line-height: 1.5; color: var(--ink); }
.rev-headline { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.12em; color: var(--gold); }
.rev-line2 { color: var(--dim); }
.review-fields { display: flex; gap: 22px; justify-content: center; }
.review-fields label { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; }
.review-fields input { width: 62px; text-align: center; }

.actionbar { padding: 12px 18px 16px; display: flex; justify-content: center; }
.actionbar .btn { max-width: 560px; }

/* ---------- modals ---------- */
.modal-wrap {
  position: fixed; inset: 0; background: rgba(7, 11, 26, 0.86);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal {
  position: relative; background: var(--panel); border-radius: 20px;
  border: 1.5px solid var(--cream-15); padding: 26px 30px; max-width: 480px; width: 92%;
  max-height: 90vh; overflow-y: auto; text-align: center;
}
.modal.wide { max-width: 780px; }
.modal.left { text-align: left; }
.modal-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  color: var(--dim); font-size: 1rem; cursor: pointer;
}
.modal-close:hover { color: var(--cream); }
#qr-box { background: #fdfbf5; border-radius: 12px; padding: 10px; display: inline-block; margin: 12px 0; min-width: 200px; min-height: 80px; }
#qr-box svg { display: block; width: 250px; height: 250px; }
.modal a { color: var(--gold); }

.phone-list { margin: 6px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.phone-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--cream-15); border-radius: 10px; padding: 8px 14px; font-size: 0.85rem;
}
.phone-row.assigned { border-color: var(--gold); }
.phone-badge { font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.2em; color: var(--gold); }

.roster-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.roster-add input { flex: 1; min-width: 130px; }
#roster-name, #p-name, #clue-input, #p-clue { text-transform: uppercase; }
.warn-note {
  border: 1.5px solid var(--gold); border-radius: 12px;
  background: rgba(201, 164, 92, 0.1); color: var(--gold);
  padding: 10px 14px; font-size: 0.8rem; line-height: 1.5; margin: 8px 0;
}
.roster-list { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.roster-row { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; border-bottom: 1px solid rgba(236, 228, 208, 0.08); padding: 5px 0; }
.roster-row .r-team { font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.14em; padding: 2px 8px; border-radius: 12px; border: 1px solid var(--cream-30); cursor: pointer; }
.roster-row .r-x { margin-left: auto; background: none; border: none; color: var(--dim); cursor: pointer; font-size: 0.8rem; }
.roster-row .r-x:hover { color: var(--coral); }
.roster-row.up-now .r-name { color: var(--gold); }

.pack-row { display: flex; align-items: center; gap: 9px; margin: 7px 0; font-size: 0.9rem; cursor: pointer; }
.history { font-size: 0.78rem; max-height: 180px; overflow-y: auto; }
.hist-row { border-bottom: 1px solid rgba(236, 228, 208, 0.08); padding: 6px 0; }

.lib-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.lib-toolbar input[type="text"] { flex: 1; min-width: 140px; }
.lib-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.lib-add input[type="text"] { flex: 1; min-width: 110px; }
#lib-pack { max-width: 110px; }
.lib-list { max-height: 44vh; overflow-y: auto; border-top: 1px solid var(--cream-15); }
.lib-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 4px; border-bottom: 1px solid rgba(236, 228, 208, 0.07); font-size: 0.86rem;
}
.lib-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mini {
  background: transparent; color: var(--cream); border: 1px solid var(--cream-30);
  border-radius: 7px; padding: 3px 10px; font-size: 0.64rem; cursor: pointer;
  font-family: var(--font-display); letter-spacing: 0.12em;
}
.mini:hover { border-color: var(--cream); }
.mini.danger { border-color: rgba(226, 101, 79, 0.5); color: var(--coral); }

/* ---------- audience display ---------- */
body.display-mode { overflow: hidden; }
#display-view { display: flex; flex-direction: column; height: 100vh; padding: 3.4vh 3vw 2.4vh; user-select: none; position: relative; }
.d-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; }
.d-teams { display: flex; gap: 1vw; }
.d-card { min-width: 8.6vw; padding: 1vh 1.6vw; }
.d-card .team-name { font-size: clamp(0.7rem, 1.05vw, 1.15rem); }
.d-card .team-score { font-size: clamp(2rem, 3.9vw, 4.2rem); }
.d-card .team-kicker { font-size: clamp(0.4rem, 0.55vw, 0.62rem); }
.d-mid { text-align: center; }
.d-title { font-size: clamp(1.2rem, 2.5vw, 2.6rem); }
.d-round { font-family: var(--font-display); letter-spacing: 0.3em; font-size: clamp(0.55rem, 0.85vw, 0.95rem); color: var(--dim); margin-top: 6px; text-transform: uppercase; }

.d-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 0; position: relative; }
#d-dial { width: min(88vw, 148vh); }
.d-pill { width: min(86vw, 150vh); margin-top: 1.4vh; padding: 0 3vw; height: clamp(58px, 9vh, 118px); }
.d-pill .spec-label { font-size: clamp(1.2rem, 2.5vw, 2.7rem); }

.d-guess-row {
  display: flex; justify-content: space-between; align-items: center;
  width: min(66vw, 112vh); margin-top: 1.4vh;
}
.guess-chip {
  font-family: var(--font-display); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dim); border: 1.5px solid var(--cream-15); border-radius: 14px;
  padding: 0.9vh 2.6vw; font-size: clamp(0.75rem, 1.5vw, 1.6rem);
  display: inline-flex; align-items: center; gap: 12px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.guess-chip .chev { width: 0.9em; height: 0.6em; color: var(--coral); opacity: 0.7; }
.guess-chip.picked {
  color: var(--cream); border-color: var(--gold); background: rgba(201, 164, 92, 0.14);
}
.guess-chip.picked .chev { opacity: 1; }

/* clue sits below the spectrum bar — never over the dial or needle */
.d-clue {
  margin-top: 1.2vh; align-self: center;
  border: 1.5px solid var(--gold); color: var(--cream); border-radius: 50px;
  background: rgba(13, 20, 40, 0.85);
  font-family: var(--font-display); font-weight: 500; letter-spacing: 0.1em;
  font-size: clamp(1rem, 2vw, 2.1rem);
  padding: 0.8vh 3vw; animation: clue-pop 0.4s; max-width: 92vw;
}
@keyframes clue-pop { 0% { transform: scale(0.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.d-status {
  font-family: var(--font-display); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  font-size: clamp(0.9rem, 1.7vw, 1.8rem); color: var(--ink);
  min-height: 3.2vh; margin-top: 1.4vh; text-align: center;
}
.d-points {
  position: absolute; top: 24%; left: 50%; transform: translateX(-50%);
  background: rgba(13, 20, 40, 0.94); border: 1.5px solid var(--gold);
  border-radius: 22px; padding: 2.2vh 3.4vw; text-align: center; z-index: 5;
}
.pts-big { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.1em; font-size: clamp(1.5rem, 3.2vw, 3.4rem); text-transform: uppercase; }
.pts-sub { font-family: var(--font-display); letter-spacing: 0.12em; font-size: clamp(0.85rem, 1.6vw, 1.7rem); margin-top: 0.7vh; text-transform: uppercase; }
.d-points.pop { animation: clue-pop 0.5s; }

#d-dial.suspense { animation: suspense-pulse 0.65s infinite alternate; }
@keyframes suspense-pulse { from { filter: brightness(1); } to { filter: brightness(1.3); } }
.wedge-hit { animation: wedge-flash 0.75s 3; }
@keyframes wedge-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.wedge-num { font-family: var(--font-display); font-weight: 600; font-size: 38px; fill: #1a2745; }
.needle { transition: transform 0.1s linear; }

.d-gameover {
  position: fixed; inset: 0; background: rgba(9, 13, 30, 0.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 20; gap: 3vh;
}
.d-gameover .title { font-size: clamp(1.2rem, 2.2vw, 2.2rem); }
.d-winner { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.16em; font-size: clamp(2.6rem, 6.5vw, 7rem); text-transform: uppercase; animation: winner-glow 1.2s infinite alternate; }
@keyframes winner-glow { from { text-shadow: 0 0 18px rgba(226, 101, 79, 0.25); } to { text-shadow: 0 0 44px rgba(226, 101, 79, 0.7); } }
.d-final { font-family: var(--font-display); letter-spacing: 0.2em; font-size: clamp(1.1rem, 2.4vw, 2.5rem); color: var(--dim); text-transform: uppercase; }

.d-corner { position: fixed; bottom: 14px; right: 16px; display: flex; gap: 8px; opacity: 0.25; transition: opacity 0.2s; z-index: 30; }
.d-corner:hover { opacity: 1; }
.corner-btn {
  background: rgba(13, 20, 40, 0.8); color: var(--dim); border: 1px solid var(--cream-15);
  border-radius: 9px; font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.2em;
  padding: 7px 12px; cursor: pointer; text-transform: uppercase;
}
.corner-btn:hover, .corner-btn.on { color: var(--cream); border-color: var(--cream-30); }

@media (prefers-reduced-motion: reduce) {
  .d-winner, #d-dial.suspense, .wedge-hit, .d-points.pop, .d-clue { animation: none !important; }
  .needle { transition: none; }
}

/* ---------- psychic phone ---------- */
body.psychic-mode { display: flex; align-items: flex-start; justify-content: center; min-height: 100vh; }
#psychic-view { width: 100%; max-width: 460px; padding: 26px 16px; }
.p-card {
  border: 1.5px solid var(--cream-15); background: rgba(24, 34, 66, 0.55);
  border-radius: 22px; padding: 24px 20px; text-align: center;
}
.p-title { font-size: 1.05rem; margin-bottom: 18px; }
.p-banner {
  font-family: var(--font-display); font-weight: 500; font-size: 1.15rem;
  letter-spacing: 0.24em; color: var(--cream); text-transform: uppercase; margin: 8px 0;
}
.p-banner.accent { color: var(--gold); }
.p-warn { color: var(--coral); font-size: 0.82rem; letter-spacing: 0.04em; margin: 2px 0 12px; }
.p-note { font-size: 0.86rem; line-height: 1.55; color: var(--dim); }
.p-section input[type="text"] { width: 100%; text-align: center; font-size: 1.05rem; margin: 12px 0; }
.p-labels { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0 2px; }
.p-label { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--cream); text-transform: uppercase; }
#p-dial, #ps-dial { width: 100%; }
.p-clue-form { margin-top: 8px; }
.p-pulse {
  width: 12px; height: 12px; border-radius: 50%; background: var(--teal);
  margin: 20px auto 8px; animation: p-breathe 1.6s infinite;
}
@keyframes p-breathe { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.5); opacity: 1; } }