/* Onboarding. The coach: a dimming spotlight that glides between parts of the screen, with a small card beside
   it. The spotlit part stays live; with nothing to spotlight, the whole screen dims. */
.coach{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;transition:opacity .22s var(--ease)}
.coach.on{opacity:1}
/* Paused while the guide is open over it. */
.coach.paused{display:none}
.coach-blocker{position:absolute;inset:0;pointer-events:auto}
.coach-spot{position:fixed;border-radius:12px;pointer-events:none;box-shadow:0 0 0 200vmax var(--backdrop),0 0 0 2px var(--accent),0 0 26px 2px color-mix(in srgb,var(--accent) 35%,transparent);transition:top .35s var(--ease),left .35s var(--ease),width .35s var(--ease),height .35s var(--ease)}
.coach-spot.empty{box-shadow:0 0 0 200vmax var(--backdrop)}
.coach-card{position:fixed;pointer-events:auto;box-sizing:border-box;width:min(350px,calc(100vw - 32px));padding:14px 16px;border-radius:12px;background:var(--panel);color:var(--text);box-shadow:0 18px 50px -12px var(--shade),0 0 0 1px var(--line);transition:top .35s var(--ease),left .35s var(--ease)}
.coach-card header{display:flex;align-items:center;gap:9px}
.coach-card h2{margin:0;font-size:15px;color:var(--text)}
.coach-glyph{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.coach-glyph .icon{width:16px;height:16px}
.coach-count{margin-left:auto;font:600 11px var(--mono);color:var(--muted)}
.coach-x{display:grid;place-items:center;width:30px;height:30px;min-height:0;margin:-4px -8px -4px 0;padding:0;border:0;background:transparent;color:var(--muted)}
.coach-x:hover{color:var(--text)}
.coach-card p{margin:10px 0 12px;font-size:13px;line-height:1.5;color:var(--text)}
.coach-card p .icon{width:14px;height:14px;vertical-align:-2px;color:var(--accent2)}
.coach-card footer{display:flex;align-items:center;gap:8px}
.coach-leave{margin-right:auto;min-height:0;padding:4px 0;border:0;background:transparent;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:2px}
.coach-leave:hover{color:var(--text)}
.coach-next{margin-left:auto}
.coach-leave~.coach-next,.coach-leave~.coach-waiting~.coach-next{margin-left:0}
.coach-next.skip{font-size:12px;min-height:0;padding:5px 10px;color:var(--muted)}
.coach-waiting{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--accent2)}
.coach-waiting .icon{width:14px;height:14px}
.coach-card button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .coach-card.swap{animation:coach-in .3s var(--ease)}
  .coach-waiting .icon{animation:coach-wait 1.6s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){.coach,.coach-spot,.coach-card{transition:none}}
@keyframes coach-in{from{opacity:0;transform:translateY(6px)}}
@keyframes coach-wait{50%{opacity:.4}}

/* The front door: one question on a first visit, then how to start (welcome.js). */
.welcome{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;padding:0;border:0;border-radius:16px;background:var(--panel);color:var(--text);box-shadow:0 30px 80px -20px var(--shade),0 0 0 1px var(--line);overflow:auto}
.welcome::backdrop{background:var(--backdrop)}
.welcome-body{display:grid;gap:14px;padding:22px 22px 18px}
.welcome-head{display:flex;align-items:center;gap:12px}
.welcome-head img{width:40px;height:40px}
.welcome-head small{display:block;font:700 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent2)}
.welcome h2{margin:0;font-size:20px;letter-spacing:normal;text-transform:none;color:var(--text)}
.welcome p{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)}
.welcome h3{margin:4px 0 0;font-size:14px;letter-spacing:normal;text-transform:none;color:var(--text)}
.welcome-choices{display:grid;gap:8px}
.welcome-choices button{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 12px;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text)}
.welcome-choices button:hover{border-color:var(--accent)}
.welcome-choices button.primary{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel2))}
.welcome-choices .icon{flex:none;width:22px;height:22px;color:var(--accent)}
.welcome-choices span{display:grid;gap:2px}
.welcome-choices small{color:var(--muted);font-size:12px;font-weight:400}
.welcome-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.welcome-quiet{min-height:0;padding:2px 0;border:0;background:transparent;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:2px}
.welcome-quiet:hover{color:var(--text)}
.welcome-x{display:grid;place-items:center;flex:none;width:32px;height:32px;min-height:0;margin:-6px -8px 0 auto;padding:0;border:0;background:transparent;color:var(--muted)}
.welcome-x:hover{color:var(--text)}
.welcome-x .icon{width:16px;height:16px}
/* Joining a friend skips the introduction: their invite code, right on the front door. */
.welcome-join{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 12px;border-radius:10px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line)}
.welcome-join label{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2)}
.welcome-join label .icon{width:16px;height:16px;color:var(--accent)}
.welcome-join input{flex:1 1 120px;min-width:0;max-width:170px;text-transform:uppercase}
.welcome-join button{min-height:0;padding:6px 12px}
.welcome-note{font-size:13px!important}
.welcome button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Quick start: the setup screen folded into one recommended table (welcome.js). */
.quick-start{display:none}
#setup.quick .console-grid,#setup.quick .launch .play-as,#setup.quick .launch .control,#setup.quick #debugSwitch{display:none}
#setup.quick .quick-start{display:grid;flex:1;gap:16px;align-content:start;justify-items:center;padding:28px 16px 40px;overflow:auto}
.quick-card{display:grid;gap:14px;width:min(560px,100%);box-sizing:border-box;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--pane)}
.quick-card small.quick-eyebrow{font:700 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent2)}
.quick-card h2{margin:2px 0 0;font-size:20px;letter-spacing:normal;text-transform:none;color:var(--text)}
.quick-card > p{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)}
.quick-facts{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.quick-facts li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45}
.quick-facts .icon{flex:none;width:18px;height:18px;margin-top:1px;color:var(--accent)}
.quick-facts small{display:block;color:var(--muted);font-size:12.5px}
.quick-blocked{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--text);font-size:13px;line-height:1.5}
.quick-blocked .icon{flex:none;width:16px;height:16px;margin-top:2px;color:var(--danger)}
.quick-actions{display:flex;flex-wrap:wrap;gap:8px}
.quick-actions button{display:inline-flex;align-items:center;gap:7px}
.quick-actions .icon{width:15px;height:15px}

/* The deal's first moves, under your identity (reveal.js). */
.rv-plan{padding:10px 14px 4px;border-radius:12px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line)}
.rv-plan small{font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent2)}
.rv-plan ol{margin:6px 0 8px;padding-left:20px;display:grid;gap:4px;font-size:13.5px;line-height:1.45;color:var(--text)}