@import url('./fonts.css');

:root {
  color-scheme:light;
  --night: #f5faff;
  --surface: #ffffff;
  --surface-raised: #edf5fc;
  --paper: #263e54;
  --ink: #263e54;
  --muted: #536d82;
  --subtle: #61798e;
  --copper: #346e96;
  --rose: #ac557c;
  --line: #d3e1ec;
  --serif:Georgia, 'Times New Roman', serif;
  font:400 14px/1.5 'DM Sans', sans-serif;
  color:var(--paper);
  background:var(--night);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
* { box-sizing:border-box; }
html { scroll-padding-top:100px; }
body { margin:0; padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); min-width:0; overflow-x:clip; isolation:isolate; background:radial-gradient(ellipse at 84% 8%, #ffffff27, transparent 44%); }
button, input, textarea { font:inherit; }
button, a, input, textarea { -webkit-tap-highlight-color:transparent; }
button, a { touch-action:manipulation; }
button { cursor:pointer; }
button, a { -webkit-user-select:none; user-select:none; }
a { color:inherit; text-decoration:none; }
button:disabled { cursor:default; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline:2px solid var(--copper); outline-offset:5px; }
[hidden] { display:none !important; }
::selection { color:var(--night); background:var(--copper); }
.wrap { width:calc(100% - 112px); max-width:1200px; margin-inline:auto; }
.icon { width:20px; height:20px; flex:0 0 auto; vertical-align:middle; }
.ambient { position:fixed; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
.ambient i { position:absolute; width:3px; height:3px; background:#e6f1fa; border-radius:50%; opacity:.24; }
.ambient i:nth-child(1) { left:8%; top:47%; box-shadow:210px -190px #6486a323, 410px 170px #6486a323; }
.ambient i:nth-child(2) { right:9%; top:32%; box-shadow:-140px 340px #6486a323, -530px -140px #6486a323; }
.ambient i:nth-child(3) { left:52%; top:77%; }
.header { height:calc(94px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
.header::before { content:''; position:absolute; inset:0 -56px; background:#f8fbffed; backdrop-filter:blur(18px); z-index:-1; }
.brand { display:inline-flex; align-items:center; gap:11px; font:34px/1 var(--serif); letter-spacing:-1.8px; min-height:44px; }
.brand-symbol { color:var(--copper); display:grid; place-items:center; }
.brand-symbol svg { width:35px; height:35px; }
.brand-dot { color:var(--copper); }
.header-tag { color:#536c81; display:flex; align-items:center; gap:11px; font-size:9px; letter-spacing:3px; margin-left:30px; }
.header-tag i { width:4px; height:4px; border-radius:50%; background:var(--copper); }
.help-button { display:flex; gap:9px; align-items:center; min-height:44px; padding:8px 0 8px 12px; border:0; background:none; color:#536c81; font-size:11px; }
.help-circle { width:20px; height:20px; border:1px solid #b8d0e270; display:grid; place-items:center; border-radius:50%; font-family:var(--serif); }
.primary, .secondary { display:inline-flex; justify-content:center; align-items:center; gap:22px; min-height:54px; border-radius:13px; padding:15px 23px; font-size:13px; font-weight:600; border:1px solid transparent; transition:background .2s, transform .2s, border-color .2s; }
.primary { background:linear-gradient(135deg, #e6f1fa, #e6f1fa); color:#536c81; box-shadow:0 5px 18px #6486a318; }
.primary .icon { width:18px; height:18px; }
.secondary { background:#d5e9f814; border-color:#b8d0e25a; color:var(--paper); font-weight:500; }
.primary.full { width:100%; }
.primary:disabled { opacity:.42; box-shadow:none; }
.quiet { display:inline-flex; gap:8px; align-items:center; border:0; background:none; color:var(--muted); min-height:44px; padding:8px 0; font-size:11px; }
.quiet .icon { width:16px; height:16px; }
@media (hover:hover) {
  .primary:not(:disabled):hover { background:#e6f1fa; transform:translateY(-1px); }
  .secondary:hover { background:#d5e9f814; border-color:#b8d0e26b; }
  .quiet:hover, .help-button:hover { color:var(--paper); }
}
.eyebrow { margin:0 0 25px; font-size:10px; letter-spacing:2.2px; color:var(--copper); font-weight:500; line-height:1.6; }
.tiny-star { font-size:18px; vertical-align:-1px; margin-right:9px; }
.lobby { display:grid; grid-template-columns:1.08fr 1fr; gap:74px; align-items:center; padding:88px 0 100px; }
.intro { min-width:0; }
h1 { font:400 clamp(55px, 5.7vw, 78px)/1.08 var(--serif); letter-spacing:-3.2px; margin:0; }
h1 > span { color:#386e94; }
h1 em { color:var(--copper); font-weight:400; }
.intro-text { color:#536c81; font-size:14px; line-height:1.95; margin:27px 0 0; }
.lobby-actions { display:flex; gap:12px; margin-top:31px; }
.lobby-actions .primary { min-width:185px; }
.lobby-actions .secondary { gap:27px; }
.intro-note { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:10px; color:#536c81; margin:19px 0 0; }
.intro-note i { width:3px; height:3px; border-radius:50%; background:#f6e5ed; }
.join-form { margin-top:24px; padding:19px; border:1px solid var(--line); border-radius:15px; background:#d5e9f814; max-width:420px; }
.join-form label { display:block; font-size:12px; color:#536c81; margin-bottom:11px; }
.join-form > div { display:flex; gap:10px; }
.join-form input { width:100%; min-width:0; border:1px solid #b8d0e25a; background:#f8fbff; color:var(--paper); border-radius:10px; padding:14px 12px; letter-spacing:3px; font-size:16px; text-transform:uppercase; }
.join-form input::placeholder { color:#536c81; }
.join-form .primary { padding-inline:20px; min-height:50px; gap:13px; }
.resume { margin-top:15px; color:#386e94; }
.lobby-error { font-size:12px; color:#536c81; margin:8px 0 0; max-width:420px; line-height:1.7; }
.lobby-error:empty { margin:0; }
.lobby-art { position:relative; min-width:0; padding:23px 10px; }
.orbit { position:absolute; pointer-events:none; border:1px solid #b8d0e25a; border-radius:50%; }
.orbit-one { width:82%; height:50%; left:9%; top:20%; transform:rotate(-24deg); }
.orbit-two { width:60%; height:70%; left:20%; top:12%; transform:rotate(31deg); border-color:#b8d0e25a; }
.art-label { position:absolute; left:10px; top:-13px; display:flex; gap:8px; align-items:center; font-size:8px; letter-spacing:2px; color:#536c81; transform:rotate(-5deg); }
.art-label > span { width:20px; height:1px; background:#e6f1fa; }
.art-star { position:absolute; color:var(--copper); z-index:2; }
.art-star-one { top:2%; right:-5%; font-size:38px; }
.art-star-two { left:-7%; bottom:22%; font-size:18px; }
.demo { position:relative; background:linear-gradient(150deg, #f8fbff, #f8fbff); border:1px solid #b8d0e25a; padding:27px 28px 22px; border-radius:22px; box-shadow:0 30px 65px #6486a323, inset 0 1px #6486a307; transform:rotate(4deg); }
.demo::before { content:''; position:absolute; inset:12px -10px -11px 10px; border:1px solid #b8d0e25a; border-radius:22px; z-index:-1; transform:rotate(-7deg); }
.demo-top { display:flex; justify-content:space-between; align-items:center; font-size:8px; letter-spacing:2px; color:#536c81; }
.demo-number { font-size:12px; letter-spacing:1px; color:#386e94; }
.demo-number i { color:#536c81; font-size:9px; font-style:normal; }
.example { margin-top:29px; text-align:center; }
.example > span { font-size:7px; color:#536c81; letter-spacing:1.9px; }
.example p { font:27px/1.4 var(--serif); letter-spacing:-.5px; color:#536c81; margin:12px 0 0; }
.mini-dial { width:88%; margin:19px auto -19px; }
.demo-axis { display:flex; justify-content:space-between; gap:15px; font:14px/1.3 var(--serif); color:#536c81; position:relative; }
.demo-axis > span:last-child { text-align:right; }
.demo-bottom { border-top:1px solid #b8d0e25a; margin-top:25px; padding-top:18px; display:flex; gap:12px; align-items:center; }
.pair-mark { display:flex; padding-right:4px; }
.pair-mark span { width:32px; height:32px; display:grid; place-items:center; border:2px solid #b8d0e2; border-radius:50%; background:#e6f1fa; color:#536c81; font:italic 19px/1 var(--serif); }
.pair-mark span + span { margin-left:-8px; background:#f6e5ed; color:#536c81; }
.demo-bottom p { font-size:10px; color:#536c81; line-height:1.65; margin:0; }
.demo-bottom small { display:block; font-size:8px; color:#536c81; }
.spark { margin-left:auto; font-size:23px; color:#386e94; }
.art-note { position:absolute; right:19px; bottom:-42px; font:14px/1.6 var(--serif); color:#536c81; transform:rotate(-5deg); }
.art-note em { color:#386e94; }
.art-note svg { position:absolute; width:70px; height:35px; left:-78px; top:0; color:#386e94; transform:rotate(20deg); }
.how-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; padding:28px 0 42px; border-top:1px solid var(--line); }
.how-row > div { display:flex; align-items:flex-start; gap:13px; background:#d5e9f814; border:1px solid #b8d0e25a; padding:22px 18px; border-radius:14px; }
.how-row b { font-size:10px; font-weight:400; color:#386e94; padding-top:2px; }
.how-row p { margin:0; }
.how-row strong { display:block; font-size:12px; color:#536c81; font-weight:500; }
.how-row p > span { display:block; font-size:10px; color:#536c81; margin-top:6px; line-height:1.7; }
.how-mark { margin-left:auto; color:#536c81; font-size:20px; line-height:1; }
.footer { display:flex; justify-content:space-between; gap:24px; border-top:1px solid var(--line); padding:24px 0 30px; font-size:10px; color:#536c81; }
.footer > a { display:inline-flex; gap:9px; align-items:center; min-height:44px; }
.footer > span { font:13px/1.7 var(--serif); color:#536c81; align-self:center; }
.footer em { color:#386e94; }

/* The game table */
.game { max-width:1000px; margin:auto; padding:18px 0 22px; min-height:65vh; scroll-margin-top:calc(106px + env(safe-area-inset-top)); }
.game-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:44px; }
.game-toolbar .quiet { font-size:11px; }
#connection { color:#536c81; font-size:10px; display:inline-flex; align-items:center; gap:6px; }
#connection::before { content:''; width:4px; height:4px; border-radius:50%; background:#e6f1fa; }
#connection.lost { color:#386e94; }
#connection.lost::before { background:#e6f1fa; }
.room-code { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:44px; padding:10px 12px; background:#d5e9f814; border:1px solid #b8d0e25a; border-radius:10px; color:#386e94; font-size:11px; font-variant-numeric:tabular-nums; letter-spacing:1.6px; }
.room-code .code-prefix { letter-spacing:1px; color:#536c81; font-size:8px; margin-right:4px; }
.room-code .icon { width:13px; height:13px; color:#536c81; margin-left:6px; }
.session-summary { display:flex; justify-content:space-between; gap:20px; align-items:center; max-width:850px; margin:24px auto 0; }
.round-label { display:inline-flex; align-items:baseline; gap:7px; letter-spacing:1.6px; font-size:9px; color:#536c81; }
.round-label b { color:#386e94; font-size:16px; font-weight:500; letter-spacing:0; }
.round-label small { font-size:10px; color:#536c81; letter-spacing:0; }
.shared-score { display:flex; align-items:center; gap:7px; font-size:10px; color:#536c81; }
.shared-score .icon { width:15px; height:15px; color:#386e94; }
.shared-score b { color:#386e94; font-size:16px; font-weight:500; }
.shared-score small { font-size:10px; color:#536c81; font-weight:400; }
.game-heading { max-width:720px; text-align:center; margin:27px auto 23px; }
.game-heading .eyebrow { font-size:9px; letter-spacing:1.8px; margin-bottom:13px; }
.game-heading h2 { font:400 36px/1.2 var(--serif); letter-spacing:-.8px; margin:0; color:#536c81; }
#phase-title:focus { outline:none; }
.game-heading > p:last-child { max-width:530px; font-size:12px; line-height:1.75; color:#536c81; margin:13px auto 0; }
.turn-steps { display:flex; justify-content:center; align-items:center; gap:13px; padding:0; margin:18px auto 22px; list-style:none; }
.turn-steps li { display:flex; align-items:center; gap:8px; padding:7px 12px; font-size:11px; color:#536c81; border:1px solid transparent; border-radius:30px; }
.turn-steps li > span { width:20px; height:20px; display:grid; place-items:center; border:1px solid #b8d0e25a; border-radius:50%; font-size:9px; }
.turn-steps .current { color:#386e94; background:#d5e9f814; border-color:#b8d0e25a; }
.turn-steps .current > span { color:#536c81; background:#e6f1fa; border-color:#b8d0e2; }
.turn-steps .complete { color:#536c81; }
.turn-steps .complete > span { border-color:#b8d0e26b; color:#386e94; }
.game-table { max-width:850px; margin:auto; }
.round-card { display:grid; grid-template-columns:1fr; border:1px solid #b8d0e25a; border-radius:22px; overflow:hidden; background:#f8fbff; box-shadow:0 20px 55px #6486a323; }
.play-card { min-width:0; padding:28px; background:radial-gradient(ellipse at 50% 0, #ffffff24, transparent 80%), #f8fbff; display:flex; flex-direction:column; justify-content:center; }
.turn-action { min-width:0; padding:30px; background:#ffffff80; display:flex; flex-direction:column; justify-content:center; }
.scale-wrap { max-width:340px; width:100%; margin-inline:auto; }
.dial-svg { display:block; width:100%; overflow:visible; }
.dial-back { fill:none; stroke:#536c81; stroke-width:26; }
.dial-color { fill:none; stroke-width:6; stroke-linecap:round; opacity:.75; }
.ticks { stroke:#536c81; stroke-width:1; }
.dial-svg text { fill:#536c81; font:8px 'DM Sans', sans-serif; text-anchor:middle; letter-spacing:1px; }
.target-band { stroke:#386e94; stroke-width:16; opacity:.45; fill:none; }
.target-dot { fill:#386e94; filter:drop-shadow(0 0 5px #6486a323); }
.needle { stroke:var(--rose); stroke-width:2.5; stroke-linecap:round; filter:drop-shadow(0 0 5px #6486a323); }
.hub { fill:#536c81; stroke:#536c81; stroke-width:1; }
.hub-inner { fill:var(--rose); }
.scale-wrap .dial-svg { margin-bottom:-12px; }
.axis-labels { display:flex; justify-content:space-between; gap:18px; font:17px/1.25 var(--serif); color:#536c81; position:relative; }
.axis-labels > span { max-width:46%; }
.axis-labels > span:last-child { text-align:right; }
.dial-label { font-size:8px; color:#536c81; text-align:center; letter-spacing:1.5px; margin:0 0 7px; line-height:1.6; }
.secret-target { text-align:center; margin-bottom:22px; }
.secret-target > span { display:flex; justify-content:center; align-items:center; gap:6px; color:#536c81; font-size:8px; letter-spacing:1.4px; }
.secret-target .icon { width:11px; height:11px; }
.secret-target strong { display:block; font:40px/1.15 var(--serif); color:#386e94; margin-top:11px; }
.secret-target strong small { font-size:17px; color:#536c81; }
.secret-target strong:has(small) { font-size:45px; }
.secret-target p { font-size:11px; color:#536c81; line-height:1.65; margin:8px 0 0; }
.received-clue { text-align:center; padding:21px 16px 17px; margin:0 0 24px; background:linear-gradient(150deg, #e6f1fa, #e6f1fa); color:#536c81; border-radius:13px; position:relative; }
.received-clue > span { display:flex; gap:6px; align-items:center; justify-content:center; color:#536c81; font-size:7px; letter-spacing:1.5px; }
.received-clue .icon { width:12px; height:12px; }
.received-clue blockquote { font:24px/1.4 var(--serif); letter-spacing:-.4px; margin:14px 0 7px; overflow-wrap:anywhere; }
.received-clue > i { font-size:15px; font-style:normal; color:#386e94; }
.field-heading { display:flex; gap:10px; align-items:center; margin-bottom:13px; }
.field-step { display:grid; place-items:center; flex:0 0 23px; width:23px; height:23px; border:1px solid #b8d0e25a; border-radius:7px; color:#386e94; font-size:8px; }
.turn-action label { display:block; font-size:13px; color:#536c81; line-height:1.55; }
.turn-action form { width:100%; }
.field-meta { display:flex; justify-content:space-between; gap:12px; font-size:9px; line-height:1.5; color:#536c81; margin-top:9px; }
.field-meta small { font-size:9px; color:#536c81; margin-left:2px; }
.target-label { margin-top:24px; margin-bottom:1px; }
.target-label output { color:#386e94; }
.action-note { display:flex; gap:7px; align-items:flex-start; font-size:10px; line-height:1.7; color:#536c81; margin:19px 0 0; }
.action-note .icon { width:12px; height:12px; margin-top:2px; }
.clue-example { margin-top:12px; font-size:11px; color:#386e94; line-height:1.7; }
.clue-example summary { display:flex; justify-content:space-between; gap:12px; align-items:center; cursor:pointer; min-height:44px; padding:9px 0; border-top:1px solid #b8d0e25a; list-style:none; }
.clue-example summary::-webkit-details-marker { display:none; }
.clue-example summary .icon { width:14px; height:14px; color:#536c81; }
.clue-example p { color:#536c81; font-size:11px; line-height:1.8; border-radius:10px; background:#ffffff70; padding:13px; margin:0 0 4px; }
.turn-waiting { text-align:center; padding:20px 8px; }
.waiting-orbit { width:74px; height:74px; border:1px solid #b8d0e25a; border-radius:50%; display:grid; place-items:center; margin:0 auto 24px; color:var(--copper); position:relative; }
.waiting-orbit > .icon { width:25px; height:25px; }
.waiting-orbit > i { position:absolute; inset:-8px; border:1px dashed #b8d0e25a; border-radius:50%; animation:orbit 30s linear infinite; }
.turn-waiting strong { display:block; font:25px/1.3 var(--serif); color:#386e94; }
.turn-waiting p { font-size:12px; line-height:1.8; color:#536c81; max-width:260px; margin:14px auto 0; }
.turn-waiting > span { display:block; font-size:8px; letter-spacing:2px; color:#536c81; margin-top:24px; }
.result-chips { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; text-align:center; }
.result-chips > div > span { color:#536c81; font-size:10px; display:flex; justify-content:center; gap:5px; align-items:center; }
.result-chips i { width:5px; height:5px; border-radius:50%; }
.gold { background:#e6f1fa; }
.rose { background:#f6e5ed; }
.result-chips b { display:block; font:48px/1.2 var(--serif); color:#386e94; margin-top:8px; }
.result-link { color:#536c81; font-size:27px; padding-top:15px; }
.earned-score { display:flex; justify-content:center; align-items:center; gap:7px; width:fit-content; border:1px solid #b8d0e25a; background:#d5e9f814; color:#386e94; border-radius:30px; padding:9px 15px; margin:23px auto 20px; font-size:12px; }
.earned-score .icon { width:15px; height:15px; }
.distance-note { color:#536c81; font:14px/1.6 var(--serif); text-align:center; margin:15px 0 24px; }
.ready-status { display:grid; gap:9px; }
.ready-status > span { display:flex; justify-content:center; align-items:center; gap:7px; padding:8px 11px; border:1px solid #b8d0e25a; border-radius:9px; color:#536c81; background:#ffffff55; font-size:10px; }
.ready-status > span > i { width:12px; height:12px; border:1px solid #b8d0e269; border-radius:50%; }
.ready-status .icon { width:13px; height:13px; }
.ready-status .is-ready { color:#536c81; border-color:#b8d0e25a; }
.action-dock { max-width:850px; margin:22px auto 0; }
.dock-inner { width:100%; max-width:485px; margin-inline:auto; }
.dock-inner > p { margin:10px 0 0; color:#536c81; font-size:10px; line-height:1.6; text-align:center; }
.dock-inner > p:empty { display:none; }
.game-bottom { max-width:850px; display:flex; justify-content:space-between; gap:16px; align-items:center; margin:19px auto 0; }
.round-dots { display:flex; gap:6px; }
.round-dots > span { display:grid; place-items:center; width:23px; height:23px; border:1px solid #b8d0e25a; border-radius:50%; font-size:8px; color:#536c81; }
.round-dots .active { background:#d5e9f814; border-color:#b8d0e287; color:#386e94; }
.round-dots .done { color:#386e94; border-color:#b8d0e25a; background:#d5e9f814; }
.game-bottom .quiet { font-size:10px; }
.table-note { color:#536c81; font:italic 12px/1.5 var(--serif); }
.waiting-card { max-width:600px; margin:auto; text-align:center; padding:36px; border:1px solid #b8d0e25a; background:radial-gradient(ellipse at 50% 0, #ffffff22, transparent 70%), #f8fbff; border-radius:22px; }
.waiting-seats { display:flex; justify-content:center; align-items:center; gap:12px; margin-bottom:30px; }
.waiting-seats > span { display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:#e6f1fa; border:1px solid #b8d0e2; color:#536c81; font:italic 22px/1 var(--serif); }
.waiting-seats > span:last-child { background:#ffffff15; color:#536c81; border:1px dashed #b8d0e26b; }
.waiting-seats > i { display:block; width:48px; height:1px; background:linear-gradient(90deg, #d5e9f869, #ffffff44); }
.waiting-card > .eyebrow { font-size:8px; margin-bottom:10px; }
.waiting-card h2 { font:31px/1.25 var(--serif); color:#386e94; margin:0; letter-spacing:-.5px; }
.waiting-card > p:not(.eyebrow) { font-size:12px; color:#536c81; line-height:1.8; max-width:315px; margin:13px auto 0; }
.invitation { max-width:320px; margin:25px auto 0; }
.invitation .room-code { width:100%; font-size:28px; letter-spacing:4px; min-height:77px; background:#ffffff38; border:1px dashed #b8d0e25a; border-radius:13px; padding:17px 13px; }
.invitation .room-code .code-prefix { display:none; }
.invitation .room-code .icon { width:18px; height:18px; margin-left:12px; }
.invitation > .primary { margin-top:12px; font-size:12px; }
.waiting-pulse { display:flex; justify-content:center; align-items:center; gap:7px; margin-top:23px; font-size:10px; color:#536c81; }
.waiting-pulse > i { width:5px; height:5px; border-radius:50%; background:#e6f1fa; animation:breathe 2.4s ease infinite; }
.waiting-card > small { display:block; font-size:9px; color:#536c81; margin-top:10px; }
.finish-card { border:1px solid #b8d0e25a; background:#f8fbff; border-radius:22px; text-align:center; padding:35px 30px 22px; }
.finish-symbol { color:#386e94; margin-bottom:20px; }
.finish-symbol .icon { width:35px; height:35px; }
.finish-card > .eyebrow { font-size:8px; margin-bottom:18px; }
.final-score { font:85px/1 var(--serif); color:#386e94; }
.final-score > span { font-size:25px; color:#536c81; margin-left:8px; }
.score-caption { font-size:8px; letter-spacing:2px; color:#536c81; margin-top:15px; }
.round-history { margin-top:30px; border-top:1px solid var(--line); text-align:left; }
.round-history > div { display:flex; align-items:center; gap:15px; padding:16px 0; border-bottom:1px solid #b8d0e25a; }
.round-history > div > span { font-size:10px; color:#536c81; }
.round-history p { font-size:12px; line-height:1.7; color:#536c81; overflow-wrap:anywhere; margin:0; }
.round-history b { font-size:12px; font-weight:500; color:#386e94; margin-left:auto; }

/* Dialogs, notices and device support */
dialog { width:min(560px, calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid #b8d0e25a; border-radius:22px; background:#f8fbff; color:var(--paper); box-shadow:0 24px 90px #6486a323; padding:38px; }
dialog::backdrop { background:#ffffffc9; backdrop-filter:blur(9px); }
dialog .eyebrow { font-size:8px; max-width:85%; margin-bottom:16px; }
dialog h2 { font:41px/1.08 var(--serif); color:#386e94; letter-spacing:-.8px; margin:0; }
dialog h2 em { color:var(--copper); font-weight:400; }
.close { position:absolute; right:11px; top:9px; display:grid; place-items:center; width:44px; height:44px; border:0; background:none; font-size:27px; color:#536c81; }
dialog ol { padding-left:20px; margin:25px 0; color:#536c81; font-size:12px; line-height:1.85; }
dialog li { padding-left:6px; margin:17px 0; }
dialog li::marker { color:#386e94; }
dialog li strong { display:block; color:#536c81; font-weight:500; }
.scoring { display:grid; grid-template-columns:repeat(3, 1fr); gap:9px; }
.scoring > span { text-align:center; padding:12px 7px; background:#d5e9f814; border:1px solid #b8d0e25a; border-radius:10px; color:#536c81; font-size:10px; }
.scoring b { display:block; font-weight:500; font-size:13px; color:#386e94; margin-top:4px; }
.help-note { font-size:11px; line-height:1.85; color:#536c81; margin:23px 0; }
.pass-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pass-actions > button { gap:0; font-size:12px; padding:13px 10px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); z-index:60; padding:14px 19px; border:1px solid #b8d0e25a; border-radius:12px; background:#f8fbfff5; color:#536c81; box-shadow:0 10px 40px #6486a323; font-size:12px; line-height:1.6; }
.busy button:not(.close), .busy form { pointer-events:none; opacity:.65; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes breathe { 50% { opacity:.3; } }
@keyframes orbit { to { transform:rotate(360deg); } }
@media (min-width:900px) {
  .round-card { grid-template-columns:1fr 1fr; }
  .play-card { border-right:1px solid #b8d0e25a; }
}
@media (max-width:1100px) {
  .wrap { width:calc(100% - 72px); }
  .header::before { inset-inline:-36px; }
  .lobby { gap:48px; padding-top:75px; }
  h1 { font-size:62px; }
  .intro-text { font-size:13px; }
  .demo { padding-inline:23px; }
  .example p { font-size:24px; }
  .how-row { gap:10px; }
  .how-row > div { padding:18px 14px; gap:9px; }
  .how-row p > span { font-size:9px; }
  .how-mark { display:none; }
}
@media (max-width:899px) {
  .lobby { gap:35px; padding-top:65px; padding-bottom:85px; }
  h1 { font-size:51px; letter-spacing:-2px; }
  .intro .eyebrow { font-size:8px; letter-spacing:1.5px; }
  .intro-text { font-size:12px; }
  .desktop-break { display:none; }
  .lobby-actions { gap:9px; }
  .lobby-actions .primary { min-width:auto; }
  .lobby-actions > button { padding-inline:19px; gap:15px; font-size:12px; }
  .intro-note { font-size:8px; gap:7px; }
  .demo { padding:22px 20px 18px; }
  .example { margin-top:21px; }
  .example p { font-size:22px; }
  .demo-top { font-size:7px; letter-spacing:1.5px; }
  .demo-axis { font-size:12px; }
  .demo-bottom { margin-top:22px; padding-top:14px; gap:8px; }
  .demo-bottom p { font-size:8px; }
  .demo-bottom small { font-size:7px; }
  .pair-mark span { width:28px; height:28px; }
  .art-label { font-size:7px; letter-spacing:1.4px; }
  .art-note { font-size:12px; bottom:-36px; right:9px; }
  .art-note svg { width:50px; left:-57px; }
  .game { max-width:680px; }
  .game-table, .game-bottom, .session-summary { max-width:600px; }
  .round-card { max-width:600px; margin:auto; }
  .play-card { padding:26px; border-bottom:1px solid #b8d0e25a; }
  .scale-wrap { max-width:300px; }
  .received-clue { max-width:430px; margin-inline:auto; width:100%; }
  .turn-action { padding:26px; }
  .revealed .turn-action { padding:27px 40px; }
  .ready-status { grid-template-columns:1fr 1fr; }
  .game-heading h2 { font-size:33px; }
}
@media (max-width:680px) {
  .wrap { width:calc(100% - 36px); }
  .header { height:calc(80px + env(safe-area-inset-top)); gap:14px; }
  .header::before { inset-inline:-18px; }
  .brand { font-size:31px; gap:8px; }
  .brand-symbol svg { width:31px; height:31px; }
  .header-tag { display:none; }
  .help-button { font-size:10px; gap:7px; }
  .lobby { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:43px 0 72px; }
  .intro .eyebrow { font-size:8px; letter-spacing:1.7px; margin-bottom:22px; }
  .tiny-star { font-size:17px; margin-right:5px; }
  h1 { font-size:clamp(46px, 10vw, 64px); letter-spacing:-2.3px; line-height:1.08; }
  .intro-text { font-size:13px; line-height:1.85; margin-top:23px; max-width:390px; }
  .lobby-actions { margin-top:26px; gap:10px; }
  .lobby-actions > button { min-height:53px; font-size:12px; padding-inline:20px; }
  .lobby-actions .primary { flex:1; }
  .lobby-actions .secondary { flex:.8; }
  .intro-note { font-size:9px; gap:9px; margin-top:16px; }
  .lobby-art { max-width:430px; width:calc(100% - 18px); margin:67px auto 0; padding:15px 3px 24px; }
  .demo { padding:26px 25px 20px; border-radius:19px; transform:rotate(3deg); }
  .demo-top { font-size:8px; letter-spacing:1.7px; }
  .example p { font-size:27px; }
  .example { margin-top:25px; }
  .mini-dial { margin-top:19px; }
  .demo-axis { font-size:14px; }
  .demo-bottom p { font-size:10px; }
  .demo-bottom small { font-size:8px; }
  .pair-mark span { width:31px; height:31px; }
  .art-star-one { right:-4%; font-size:28px; top:-8px; }
  .art-star-two { left:-4%; font-size:15px; }
  .orbit-one { width:82%; left:9%; }
  .orbit-two { width:50%; height:60%; left:25%; }
  .art-label { top:-13px; left:3px; font-size:7px; }
  .art-note { right:9px; font-size:12px; bottom:-27px; }
  .how-row { grid-template-columns:1fr; padding:28px 0; gap:10px; }
  .how-row > div { padding:18px; gap:15px; }
  .how-row b { font-size:11px; }
  .how-row strong { font-size:13px; }
  .how-row p > span { font-size:11px; margin-top:4px; }
  .how-mark { display:block; margin-top:8px; }
  .footer { flex-direction:column; align-items:center; text-align:center; gap:11px; padding:21px 0 26px; font-size:10px; }
  .footer > span { font-size:13px; }
  .game { padding-top:11px; scroll-margin-top:calc(91px + env(safe-area-inset-top)); }
  .game-toolbar { gap:8px; }
  .game-toolbar .quiet { font-size:10px; gap:5px; }
  .game-toolbar .quiet .icon { width:14px; height:14px; }
  #connection { font-size:8px; gap:5px; }
  .room-code { padding:9px; font-size:10px; letter-spacing:1px; gap:3px; border-radius:8px; }
  .room-code .code-prefix { display:none; }
  .room-code .icon { margin-left:3px; width:12px; height:12px; }
  .session-summary { margin-top:18px; }
  .shared-score { font-size:10px; }
  .shared-score b { font-size:15px; }
  .round-label { font-size:8px; }
  .game-heading { margin:23px auto 19px; }
  .game-heading .eyebrow { font-size:8px; margin-bottom:10px; letter-spacing:1.5px; }
  .game-heading h2 { font-size:29px; line-height:1.15; letter-spacing:-.6px; }
  .game-heading > p:last-child { font-size:11px; line-height:1.75; margin-top:11px; max-width:360px; }
  .turn-steps { gap:4px; margin-bottom:20px; }
  .turn-steps li { font-size:10px; padding:6px 10px; gap:7px; }
  .turn-steps li > span { width:18px; height:18px; font-size:8px; }
  .round-card { border-radius:18px; }
  .play-card { padding:22px 20px; }
  .turn-action { padding:23px 20px; }
  .preparing { display:flex; flex-direction:column; }
  .preparing > .turn-action { order:0; }
  .preparing > .play-card { order:1; border-bottom:0; border-top:1px solid #b8d0e25a; padding-block:20px; }
  .preparing .scale-wrap { max-width:225px; }
  .scale-wrap { max-width:255px; }
  .axis-labels { font-size:16px; gap:15px; }
  .dial-label { font-size:7px; letter-spacing:1.1px; margin-bottom:7px; }
  .secret-target { margin-bottom:17px; }
  .secret-target strong { font-size:30px; margin-top:9px; }
  .secret-target strong:has(small) { font-size:39px; }
  .secret-target p { font-size:11px; }
  .received-clue { padding:20px 16px 15px; margin-bottom:22px; }
  .received-clue blockquote { font-size:23px; }
  .received-clue > span { font-size:7px; }
  .turn-action label { font-size:13px; }
  .field-heading { gap:9px; }
  .field-meta { font-size:10px; }
  .target-label { margin-top:23px; }
  .action-note { font-size:11px; margin-top:17px; }
  .clue-example { font-size:11px; }
  .clue-example p { font-size:11px; }
  .turn-waiting { padding:13px 5px; }
  .turn-waiting strong { font-size:25px; }
  .turn-waiting p { font-size:12px; }
  .revealed .turn-action { padding:24px 23px; }
  .result-chips b { font-size:42px; }
  .result-chips > div > span { font-size:10px; }
  .earned-score { margin-top:21px; }
  .distance-note { font-size:14px; }
  .ready-status { grid-template-columns:1fr; }
  .ready-status > span { padding:9px; font-size:11px; }
  .action-dock { position:fixed; bottom:0; left:0; right:0; z-index:25; padding:13px 18px max(12px, env(safe-area-inset-bottom)); margin:0; max-width:none; background:#f8fbfff2; border-top:1px solid #b8d0e25a; backdrop-filter:blur(20px); }
  .dock-inner { max-width:600px; }
  .dock-inner > .primary { min-height:53px; font-size:13px; gap:16px; border-radius:13px; }
  .dock-inner > p { font-size:9px; margin-top:8px; color:#536c81; }
  body.is-playing .footer { padding-bottom:calc(155px + env(safe-area-inset-bottom)); }
  .is-playing .toast { bottom:calc(120px + env(safe-area-inset-bottom)); }
  .game-bottom { margin-top:19px; gap:10px; }
  .round-dots { gap:5px; }
  .round-dots > span { width:21px; height:21px; font-size:8px; }
  .game-bottom .quiet { font-size:10px; }
  .table-note { font-size:11px; }
  .waiting-card { padding:28px 20px; border-radius:18px; }
  .waiting-card h2 { font-size:29px; }
  .waiting-card > p:not(.eyebrow) { font-size:12px; }
  .waiting-card > .eyebrow { font-size:7px; letter-spacing:1.6px; }
  .invitation .room-code { font-size:25px; letter-spacing:3px; }
  .waiting-seats { margin-bottom:24px; }
  .finish-card { padding:30px 22px 20px; border-radius:18px; }
  .final-score { font-size:77px; }
  .round-history p { font-size:11px; }
  .round-history > div { gap:12px; }
  dialog { padding:32px 24px 25px; border-radius:19px; }
  dialog h2 { font-size:38px; }
  dialog .eyebrow { font-size:7px; letter-spacing:1.6px; }
  dialog ol { font-size:12px; padding-left:18px; }
  .help-note { font-size:11px; }
}
@media (max-width:370px) {
  .wrap { width:calc(100% - 28px); }
  .header::before { inset-inline:-14px; }
  .brand { font-size:29px; }
  .help-button { font-size:9px; }
  .intro .eyebrow { font-size:7px; letter-spacing:1.1px; }
  h1 { font-size:47px; }
  .intro-text { font-size:12px; }
  .lobby-actions > button { padding-inline:15px; font-size:11px; gap:13px; }
  .intro-note { font-size:8px; gap:7px; }
  .example p { font-size:24px; }
  .demo { padding-inline:20px; }
  .demo-axis { font-size:12px; }
  .demo-bottom p { font-size:8px; }
  .demo-bottom small { font-size:7px; }
  .game-toolbar .quiet { font-size:9px; }
  #connection { font-size:7px; }
  .room-code { font-size:9px; padding-inline:7px; }
  .room-code .icon { width:11px; height:11px; }
  .game-heading h2 { font-size:27px; }
  .turn-steps li { padding-inline:7px; }
  .turn-action { padding-inline:17px; }
  .play-card { padding-inline:17px; }
  .field-heading { gap:7px; }
  .turn-action label { font-size:12px; }
  .dock-inner > .primary { font-size:12px; gap:13px; }
  .round-dots { gap:4px; }
  .round-dots > span { width:19px; height:19px; }
  .game-bottom .quiet { font-size:9px; }
  .game-bottom { gap:7px; }
  .received-clue blockquote { font-size:21px; }
  .axis-labels { font-size:15px; }
  .scale-wrap { max-width:230px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

@media (max-width:680px) {
 .round-card.guessing { display:flex; flex-direction:column; }
 .guessing > .play-card { display:contents; }
 .guessing .received-clue { order:0; width:auto; max-width:none; margin:18px 18px 0; }
 .guessing > .turn-action { order:1; background:transparent; padding-top:21px; padding-bottom:20px; }
 .guessing .dial-label { order:2; margin:4px 18px 0; padding-top:17px; border-top:1px solid #b8d0e25a; }
 .guessing .scale-wrap { order:3; margin-bottom:23px; }
 .game-heading { margin-top:20px; margin-bottom:16px; }
 .session-summary { margin-top:14px; }
 .lobby { overflow:clip; margin-inline:-18px; padding-inline:18px; }
}
@media (max-width:370px) { .lobby { margin-inline:-14px; padding-inline:14px; } }

@media(max-width:680px){
 .guessing .received-clue { padding:16px 14px; }
 .guessing .received-clue blockquote { margin:10px 0 0; }
 .guessing .received-clue > i { display:none; }
 .guessing > .turn-action { padding-top:18px; }
}
@media(max-width:370px){ .guessing .received-clue blockquote { font-size:20px; line-height:1.35; } }

@media(max-width:680px){ .action-dock { padding-left:max(18px,env(safe-area-inset-left)); padding-right:max(18px,env(safe-area-inset-right)); } }

/* Ready-made clue choices, with no keyboard required. */
.preset-field { min-width:0; border:0; padding:0; margin:0; }
.preset-field legend { display:flex; align-items:center; gap:10px; width:100%; padding:0; color:#536c81; font-size:13px; line-height:1.55; margin-bottom:14px; }
.preset-picker { border:1px solid #b8d0e25a; border-radius:13px; background:#ffffff77; overflow:hidden; }
.preset-picker>summary { list-style:none; display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:15px; min-height:66px; cursor:pointer; color:#536c81; font-size:13px; line-height:1.6; }
.preset-picker>summary::-webkit-details-marker { display:none; }
.preset-picker>summary>small { display:flex; align-items:center; gap:7px; color:#386e94; font-size:10px; }
.preset-picker>summary .icon { width:13px; height:13px; transform:rotate(90deg); }
.preset-picker[open]>summary .icon { transform:rotate(-90deg); }
.preset-picker.has-choice:not([open]) { background:#d5e9f814; border-color:#b8d0e265; }
.preset-options { display:grid; gap:8px; padding:0; }
.turn-action .preset-option { display:flex; align-items:flex-start; gap:10px; min-height:54px; padding:13px 12px; border:1px solid #b8d0e25a; border-radius:10px; background:#f8fbff; color:#253e54; cursor:pointer; font-size:12px; line-height:1.65; }
.preset-option input { appearance:none; -webkit-appearance:none; flex:0 0 17px; width:17px; height:17px; margin:3px 0 0; border:1px solid #b8d0e2; border-radius:50%; background:transparent; }
.preset-option input:checked { border:5px solid #b8d0e2; background:#f8fbff; }
.turn-action .preset-option:has(input:checked) { border-color:#b8d0e288; color:#386e94; background:#d5e9f814; }
.preset-option:focus-within { outline:2px solid var(--copper); outline-offset:2px; }
.preset-copy { min-width:0; flex:1; }
.preset-question { display:block; }
.preset-ends { display:block; margin-top:7px; color:var(--muted); font-size:11px; line-height:1.6; overflow-wrap:break-word; }
.preset-ends i { margin-inline:3px; font-style:normal; color:var(--copper); }
@media(hover:hover){.turn-action .preset-option:hover{border-color:#b8d0e280;background:#f8fbff;}}
@media(max-width:680px){.preset-field legend{font-size:13px;gap:9px}.turn-action .preset-option{font-size:13px;padding:13px 12px;line-height:1.6}.preset-picker>summary{font-size:14px;padding:15px}.preset-options{gap:8px}.preset-picker.has-choice:not([open])>summary{font-size:15px}.preset-picker>summary>small{min-height:22px}}


/* The dial itself is the only position control. */
.round-card.direct-dial { scroll-margin-top:10px; display:block; max-width:620px; margin-inline:auto; }
.direct-dial > .turn-action { padding:28px 32px; }
.direct-dial.guessing > .play-card { display:block; padding:26px 32px; border:0; }
.direct-dial.guessing .turn-action { display:block; padding:0; background:none; }
.direct-dial.guessing .received-clue { width:100%; max-width:none; margin:0 0 24px; }
.direct-dial .scale-wrap { width:100%; max-width:390px; margin:12px auto 0; }
.direct-dial .axis-labels { margin-top:0; }
.dial-value-label { display:flex; width:100%; justify-content:space-between; align-items:center; gap:16px; color:#536c81; font-size:13px; line-height:1.6; }
.dial-value-label output { min-width:45px; text-align:right; color:#386e94; font:32px/1 var(--serif); }
.guessing .dial-value-label output { color:#536c81; }
.dial-control { position:relative; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; border-radius:200px 200px 28px 28px; }
.dial-control.is-dragging { cursor:grabbing; }
.dial-control:focus-visible { outline:2px solid var(--copper); outline-offset:5px; }
.dial-control .dial-svg { margin-bottom:-10px; }
.dial-control .needle { stroke-width:3; }
.dial-target .needle { stroke:#386e94; }
.dial-handle { fill:#386e94; stroke:#536c81; stroke-width:6; filter:drop-shadow(0 0 7px #6486a323); }
.dial-target .dial-handle { stroke:#386e94; filter:drop-shadow(0 0 7px #6486a323); }
.dial-control .dial-centre-value { fill:#386e94; font:18px 'DM Sans',sans-serif; text-anchor:middle; letter-spacing:0; }
.dial-control.is-unset .needle { opacity:.35; stroke-dasharray:5 5; }
.dial-control.is-unset .dial-handle { opacity:.5; }
.dial-control.is-dragging .dial-handle { stroke-width:7; }
.direct-dial .target-label { margin-top:22px; }
.direct-dial .action-note { justify-content:center; max-width:400px; margin:22px auto 0; text-align:center; }
.personal-question { margin:0 0 22px; text-align:left; }
.personal-question > span { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:9px; color:#386e94; font-size:10px; letter-spacing:.5px; }
.personal-question > span > b { font-weight:400; color:#386e94; }
.readable-questions .preset-field:has(.has-choice:not([open])) > legend,
.readable-questions .preset-field:has(.has-choice:not([open])) > .field-meta { display:none; }
.readable-questions .preset-picker.has-choice:not([open]) > summary { flex-direction:row; align-items:center; padding:10px 14px; min-height:44px; gap:12px; }
.readable-questions .preset-picker.has-choice:not([open]) > summary > span { flex:1; font-size:12px; }
.readable-questions .preset-picker.has-choice:not([open]) > summary > small { min-height:0; }
.personal-question h3 { margin:0; color:#386e94; font:26px/1.35 var(--serif); letter-spacing:-.35px; }
.personal-question h3:empty { display:none; }
.playing .personal-question { text-align:center; }
.conversation-prompt { border-top:1px solid #b8d0e25a; padding:18px 0; margin-bottom:7px; text-align:center; }
.conversation-prompt > span { color:#386e94; font-size:10px; }
.conversation-prompt p { margin:9px 0 0; color:#536c81; font:19px/1.5 var(--serif); }
.edition-note { max-width:620px; margin:12px auto; color:#536c81; font-size:11px; line-height:1.6; text-align:center; }
.round-history .history-item { align-items:flex-start; }
.history-content { min-width:0; flex:1; }
.history-content > strong { display:block; color:#386e94; font-size:12px; line-height:1.6; font-weight:500; margin-bottom:6px; }
.history-content small { display:block; color:#536c81; margin-top:8px; }
.history-axis { display:flex; justify-content:space-between; gap:15px; margin-top:10px; padding-top:8px; border-top:1px solid #b8d0e25a; color:#386e94; font-size:10px; line-height:1.5; }
.history-axis > span { max-width:48%; }
.history-axis > span:last-child { text-align:right; }
.history-values { display:flex; flex-wrap:wrap; gap:7px 20px; margin-top:9px; color:#536c81; font-size:10px; }
.history-values b { margin-left:5px; }
@media(max-width:680px){
 .direct-dial > .turn-action { padding:23px 20px; }
 .direct-dial.guessing > .play-card { padding:22px 20px; }
 .direct-dial .scale-wrap { max-width:390px; margin:12px auto 0; }
 .direct-dial .dial-value-label { font-size:13px; }
 .direct-dial .action-note { font-size:11px; }
 .direct-dial .axis-labels { font-size:16px; }
 .personal-question { margin-bottom:20px; }
 .personal-question > span > b { font-weight:400; color:#386e94; }
.personal-question h3 { font-size:23px; }
 .personal-question > span { font-size:11px; }
 .direct-dial.guessing .received-clue blockquote { font-size:21px; line-height:1.4; margin:10px 0 0; }
}
@media(max-width:370px){
 .direct-dial > .turn-action,.direct-dial.guessing > .play-card { padding-inline:17px; }
 .direct-dial .axis-labels { font-size:15px; }
 .direct-dial .dial-value-label { font-size:12px; }
}

/* Sixteen steps wrap within small screens; the pass action remains a separate control. */
.round-dots{flex-wrap:wrap;row-gap:6px;max-width:100%}
.game-bottom{gap:12px;flex-wrap:wrap}
@media(max-width:680px){.game-bottom .round-dots{flex:1 1 100%}}

/* A light blue / powder pink identity across every game state. */
:root{--blue-soft:#d9ecfa;--pink-soft:#f7dfe9;--answer:#3276a5;--guess:#ad527c;--focus:#286b9b}
body{background:radial-gradient(ellipse at 95% 4%,#f9e7ef 0,transparent 42%),radial-gradient(ellipse at 5% 35%,#e0effa 0,transparent 52%),#f5faff}
.header{position:relative}.header::before{background:transparent;backdrop-filter:none}
.brand-symbol,.brand-dot,.tiny-star{color:var(--answer)}
.header-tag,.help-button{color:#536d82}.header-tag i{background:#b7819c}
.primary{background:linear-gradient(135deg,#c6e3f8,#dcecf8);border-color:#b2d2e8;color:#244b69;box-shadow:0 5px 14px #5e88a018,inset 0 1px #ffffffba}
.secondary{background:#fbedf3;border-color:#e8cbd9;color:#76465f}
.primary:hover:not(:disabled){background:linear-gradient(135deg,#b6dbf4,#cee5f6)}
.secondary:hover{background:#f7e1ec;border-color:#d8adc2}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.intro .eyebrow,.art-label{color:#536d82}.intro h1{color:#263e54}.intro h1 em{color:#467da4}
.intro-text{color:#4f687e}.intro-note{color:#576f83}
.demo{background:linear-gradient(150deg,#ffffff,#f0f7fd);border-color:#cbdfea;box-shadow:0 25px 60px #6486a31c,inset 0 1px #fff}
.demo::before{background:#f9e9f0;border-color:#eacddc}
.example p{color:#2b455c}.demo-bottom{border-top-color:#d6e2ed}
.pair-mark span{background:#d5eafb;color:#32668d;border-color:#fff}.pair-mark span+span{background:#f0cfde;color:#86455f}
.how-row>div{background:#ffffffb8;border-color:#d8e5ef;box-shadow:0 5px 16px #6887a006}
.how-row>div:nth-child(2){background:#fff4f8;border-color:#ecd5df}
.join-form{background:#ffffffb8}.join-form input{background:#fff;border-color:#bdd2e2}
.join-form input::placeholder{color:#62788c}.lobby-error{color:#9c355b}
.round-card{background:#fff;border-color:#d2e1ec;box-shadow:0 16px 45px #6385a014,inset 0 1px #fff}
.play-card{background:radial-gradient(ellipse at 50% 0,#e7f3fb90,transparent 80%),#fff}
.turn-action{background:#fcfdff}.playing .turn-action{background:#f5f8fd}
.personal-question h3{color:#294158}.personal-question>span{color:#416b8b}.personal-question>span>b{color:#866078}
.preset-picker{background:#f6faff;border-color:#c8dce9}
.preset-picker.has-choice:not([open]){background:#edf6fd;border-color:#abcde3}
.turn-action .preset-option{background:#fff;border-color:#d5e3ed;color:#2f485e}
.preset-option input{border-color:#8eaec7}.preset-option input:checked{border-color:#4d83aa;background:#fff}
.turn-action .preset-option:has(input:checked){background:#edf6fe;border-color:#7faecf;color:#263e54}
.preset-question{font-weight:500}.preset-ends{color:#536d82}.preset-ends i{color:#a16281}
.field-step{color:#426e90;border-color:#bcd3e4;background:#edf6fc}
.turn-steps .current{color:#2b6088;background:#e4f1fb;border-color:#bed9ed}.turn-steps .current>span{background:#c1def3;color:#254d6c;border-color:#aacce4}
.turn-steps .complete,.turn-steps .complete>span{color:#3d7681}
.room-code{background:#ffffffc7;border-color:#cbdfea;color:#3a6585}
#connection::before{background:#689b8a}#connection.lost{color:#9c355b}#connection.lost::before{background:#b35a7e}
.waiting-card,.finish-card{background:linear-gradient(150deg,#fff,#f0f7fd);border-color:#cbdfea;box-shadow:0 15px 40px #6285a012}
.waiting-seats>span{background:#d9edfc;color:#3f7092;border-color:#b8d7ec}.waiting-seats>span:last-child{background:#f9e6ef;color:#986581;border-color:#dfb9cc}
.waiting-pulse>i{background:#679b8c}.waiting-card h2{color:#2b455b}
.result-chips>div{border:1px solid #c7dfef;border-radius:16px;padding:15px 8px;background:#eaf5fd}
.result-chips>div:last-child{border-color:#edccdd;background:#fbedf4}
.result-chips>div>span{color:#365f7c;line-height:1.6}.result-chips>div:last-child>span{color:#86445f}
.result-chips i{width:8px;height:8px;flex:0 0 auto}.gold{background:var(--answer)}.rose{background:var(--guess);border-radius:1px!important;transform:rotate(45deg)}
.result-chips b{color:#2e6e9a}.result-chips>div:last-child b{color:#a14d73}.result-link{color:#758ca0}
.earned-score{background:#eaf5f4;border-color:#c3dedb;color:#386e6b}
.ready-status>span{background:#ffffffbf;color:#536d82;border-color:#d4e2ed}.ready-status .is-ready{background:#edf6f2;color:#3c7163;border-color:#c3ddd3}
.conversation-prompt{border-color:#d8e4ef}.conversation-prompt>span{color:#96617d}.conversation-prompt p{color:#324c62}
.round-dots .active{background:#dcedfa;border-color:#9bbfd9;color:#285c82}.round-dots .done{background:#e6f2ee;border-color:#bfd8cf;color:#3c7566}
.dial-svg{filter:drop-shadow(0 8px 12px #5f809b12)}
.dial-face{stroke:#d9e5ee;stroke-width:1}
.dial-back{fill:none;stroke:#fff;stroke-width:20}
.dial-color{fill:none;stroke-width:13;stroke-linecap:round;opacity:1}
.dial-inner-ring{fill:none;stroke:#c1d4e4;stroke-width:.7}
.ticks{stroke:#90abc1;stroke-width:.7}.ticks .major-tick{stroke:#688da9;stroke-width:1.1}
.dial-svg text{fill:#536d82;font:9px 'DM Sans',sans-serif;letter-spacing:.3px;text-anchor:middle}
.dial-svg .midpoint-label{font-size:8px;fill:#59778e}
.needle{fill:none;stroke-linecap:round;filter:none;stroke-width:3}
.answer-needle{stroke:var(--answer);stroke-width:5}.guess-needle{stroke:var(--guess);stroke-width:3}
.answer-marker{fill:var(--answer);stroke:#fff;stroke-width:2;filter:drop-shadow(0 1px 3px #3276a52c)}
.guess-marker{fill:var(--guess);stroke:#fff;stroke-width:2;filter:drop-shadow(0 1px 3px #ad527c26)}
.hub{stroke:#c2d6e5;stroke-width:1.3;filter:drop-shadow(0 3px 4px #58759014)}.hub-inner{fill:#8aacc5}
.dial-handle{fill:#fff;stroke:var(--guess);stroke-width:5;filter:drop-shadow(0 3px 6px #6285a025)}
.dial-target .dial-handle,.answer-handle{stroke:var(--answer)}
.dial-target .needle{stroke:var(--answer)}.dial-guess .needle{stroke:var(--guess)}
.dial-control .dial-centre-value{fill:#29485f;font-size:18px}
.dial-control.is-unset .needle{opacity:.45}.dial-control.is-unset .dial-handle{opacity:.7}
.dial-value-label output,.target-label output{color:var(--answer)}.guessing .dial-value-label output{color:var(--guess)}
.revealed .scale-wrap{max-width:390px}.revealed .axis-labels{color:#314b62}
.secret-target strong{color:var(--answer)}
.received-clue{background:linear-gradient(135deg,#e6f2fb,#f9eaf1);color:#2c465c;border:1px solid #d4e3ed}
.toast{background:#fff;color:#344f65;border-color:#c1d7e6;box-shadow:0 9px 35px #607e9824}
.toast[hidden]{display:none}
.dialog-actions{color:#263e54}dialog{background:#fbfdff;border-color:#c8dce9;box-shadow:0 24px 90px #405e8040}
.dialog-close,.close{color:#5c7589}dialog::backdrop{background:#597a9666;backdrop-filter:blur(7px)}
.scoring>span{background:#edf6fc;border-color:#c9deec}.scoring>span:nth-child(2){background:#fbedf4;border-color:#eed5e0}
.invite-entry{max-width:600px;margin:65px auto;text-align:center;padding:48px 32px;border:1px solid #c9dfea;border-radius:28px;background:linear-gradient(145deg,#fff,#edf6fd);box-shadow:0 20px 60px #5d85a016}
.entry-symbol{display:block;font:68px/1 Georgia,serif;color:#5d8eaf;margin-bottom:25px;animation:breathe 2s ease-in-out infinite}
.invite-entry.has-error .entry-symbol{animation:none;color:#a55e7f}
.invite-entry h1{font:38px/1.2 var(--serif);letter-spacing:-1px;color:#2c465c;margin:0}
.invite-entry>p:not(.eyebrow){font-size:13px;line-height:1.8;color:#536d82;margin:20px auto 0;max-width:380px}
.entry-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:25px}
.invite-entry.has-error{border-color:#e2bfd1;background:linear-gradient(145deg,#fff,#fceff5)}
@media(max-width:680px){.action-dock{background:#f5faffed;border-top-color:#cfdfea}.revealed .play-card{padding:25px 19px}.revealed .scale-wrap{max-width:360px}.result-chips{gap:9px}.result-chips>div{padding:13px 6px}.result-chips b{font-size:37px}.result-chips>div>span{font-size:10px}.invite-entry{padding:35px 22px;margin:40px auto}.invite-entry h1{font-size:31px}}
@media(prefers-reduced-motion:reduce){.entry-symbol{animation:none}}