:root { --text:#1c1c1c; --muted:#60708a; --line:#d7e4f7; --surface:#fff; --background:#f5f8ff; --primary:#1769e0; --primary-dark:#1154b5; --accent:#ff625c; --danger:#ff625c; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--background); color:var(--text); font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button { font:inherit; }
button:focus-visible,[role="button"]:focus-visible { outline:3px solid rgba(23,105,224,.4); outline-offset:2px; }
button:disabled { opacity:.58; cursor:wait; }
.app-shell { width:min(100% - 32px,640px); margin:0 auto; padding:40px 0 28px; }
.hero { margin-bottom:26px; } h1,h2 { line-height:1.15; letter-spacing:-.02em; margin:0; } h1 { font-size:30px; } .wordmark { display:flex; align-items:baseline; }.wordmark-image { display:block; width:min(100%,340px); height:50px; object-fit:cover; object-position:center; mix-blend-mode:multiply; } .intro,.stage-copy { color:var(--muted); margin:8px 0 0; }
.game-card { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--surface); }.progress { display:flex; align-items:center; padding:15px 18px; border-bottom:1px solid var(--line); }.step { display:flex; align-items:center; gap:7px; color:#8290a7; font-size:13px; }.step b { display:grid; place-items:center; width:22px; height:22px; border:1px solid currentColor; border-radius:50%; font-size:12px; }.step.active { color:var(--primary); font-weight:700; }.step.active b { color:#531f1d; border-color:var(--accent); background:var(--accent); animation:step-cue .32s ease-out; }.progress i { flex:1; height:1px; background:var(--line); margin:0 12px; }
.round-label { margin:25px 24px 0; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.06em; }.stage { padding:10px 24px 28px; text-align:left; }.stage.active { animation:stage-enter .24s ease-out; }.stage-kicker { margin:0 0 6px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.05em; }.stage h2 { font-size:25px; }.stage-copy { max-width:500px; }
.player-picker { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin:26px 0; }.player-picker button { min-height:44px; border:1px solid var(--line); border-radius:7px; color:var(--text); background:#fff; cursor:pointer; transition:border-color .15s,background .15s,color .15s; }.player-picker button:hover { border-color:var(--primary); background:#edf5ff; }.player-picker button.selected { border-color:var(--primary); color:#fff; background:var(--primary); font-weight:700; }
.recorder { min-height:182px; display:grid; place-items:center; align-content:center; gap:13px; }.record-button { display:grid; place-items:center; width:64px; height:64px; border:0; border-radius:50%; background:var(--primary); cursor:pointer; transition:background .15s,transform .15s; }.record-button:hover { background:var(--primary-dark); transform:scale(1.04); }.stage.active .record-button:not(.recording) { animation:recording-cue 2.8s ease-in-out .4s 3; }.record-button span { width:20px; height:20px; background:#fff; border-radius:50%; }.record-button.recording { background:var(--danger); animation:none; }.record-button.recording span { border-radius:3px; width:18px; height:18px; }.recorder p { margin:0; color:var(--muted); font-size:14px; }
.inline-actions { display:flex; align-items:center; gap:14px; margin-top:28px; }.text-button,.secondary-button { border:0; background:transparent; color:var(--primary); cursor:pointer; font:inherit; padding:10px 0; }.playback-box { display:flex; align-items:center; width:100%; gap:12px; padding:15px; margin:24px 0; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#fff; text-align:left; cursor:pointer; transition:border-color .15s,background .15s; }.playback-box:hover,.playback-box[aria-pressed="true"] { border-color:var(--primary); background:#edf5ff; }.play-button,.play-control { flex:none; display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; background:var(--primary); color:#fff; cursor:pointer; }.playback-box strong,.reveal-row strong { display:block; font-size:14px; }.playback-copy { display:block; }.playback-copy > span { display:block; font-size:13px; color:var(--muted); }
.primary-button,.comparison-button { width:100%; border:0; border-radius:7px; padding:13px 16px; color:#fff; background:var(--primary); cursor:pointer; font-size:16px; font-weight:600; }.stage.active .primary-button { animation:action-cue 2.8s ease-in-out 1.1s 2; }.primary-button:hover,.comparison-button:hover { background:var(--primary-dark); }.primary-button span { margin-left:7px; }.comparison-button { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:22px; text-align:center; }.comparison-button::before { content:'▶'; font-size:13px; line-height:1; }.comparison-button[aria-pressed="true"] { background:var(--primary-dark); }.comparison-button[aria-pressed="true"]::before { content:'■'; }.reveal-list { display:grid; gap:10px; margin:16px 0 12px; }.reveal-row { display:flex; align-items:center; width:100%; gap:12px; padding:12px 15px; border:1px solid var(--line); border-radius:7px; color:var(--text); background:#fff; text-align:left; cursor:pointer; transition:border-color .15s,background .15s,box-shadow .15s; }.reveal-row:hover { border-color:var(--primary); background:#f4f8ff; }.reveal-row strong { color:var(--text); }.reveal-row.is-playing { border-color:var(--primary); background:#edf5ff; box-shadow:0 0 0 3px rgba(23,105,224,.14); }.tag,.is-playing .tag { width:62px; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.04em; }.is-playing .tag { color:var(--primary); }.now-playing { display:none; margin-left:auto; color:var(--primary); font-size:12px; font-weight:700; white-space:nowrap; }.is-playing .now-playing { display:block; }.recap-button { display:inline-flex; align-items:center; min-height:44px; margin-top:2px; padding:9px 14px; border:1px solid var(--line); border-radius:7px; background:#fff; font-weight:600; }.recap-button:hover { border-color:var(--primary); background:#edf5ff; }.privacy-copy,.support-copy { color:var(--muted); font-size:13px; }.privacy-copy { margin:5px 0 16px; }.support-copy { margin:18px 0 0; text-align:center; }.kofi-link { color:inherit; text-decoration:underline; text-underline-offset:2px; } .support-copy .kofi-link { color:var(--primary); }
.toast { position:fixed; left:16px; right:16px; bottom:16px; z-index:3; padding:12px 15px; border-radius:8px; color:#fff; background:#333; opacity:0; transform:translateY(10px); transition:.2s; }.toast.show { opacity:1; transform:translateY(0); } footer { margin-top:24px; text-align:center; color:var(--muted); font-size:13px; }
@keyframes stage-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes step-cue { from { transform:scale(.82); } to { transform:scale(1); } }
@keyframes recording-cue { 0%,100% { box-shadow:0 0 0 0 rgba(23,105,224,0); } 45% { box-shadow:0 0 0 8px rgba(23,105,224,.14); } }
@keyframes action-cue { 0%,100% { box-shadow:0 0 0 0 rgba(23,105,224,0); } 45% { box-shadow:0 0 0 4px rgba(23,105,224,.18); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
@media (max-width:420px) { .app-shell { width:100%; padding:0; }.hero { padding:25px 20px 18px; margin:0; }.game-card { border-width:1px 0; border-radius:0; }.progress { padding:14px 20px; }.step span { display:none; }.progress i { margin:0 10px; }.round-label { margin-left:20px; }.stage { padding:10px 20px 24px; }.stage h2 { font-size:23px; }.inline-actions { flex-wrap:wrap; }.inline-actions .primary-button { width:auto; flex:1; } footer { padding:0 20px; }.player-picker { grid-template-columns:repeat(4,1fr); gap:8px; }.reveal-row { display:grid; grid-template-columns:62px 40px minmax(0,1fr); }.now-playing { grid-column:3; margin-left:0; }.recap-button { width:100%; justify-content:center; } }

.idea-picker { margin-top:14px; }
.idea-picker .secondary-button { padding-bottom:4px; }
.starter-phrase { margin:2px 0 0; color:var(--text); font-size:14px; font-weight:600; }
.round-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:25px 24px 0; }
.round-bar .round-label { margin:0; }
.round-new-button { border:0; border-radius:6px; padding:7px 10px; color:var(--primary); background:#edf5ff; cursor:pointer; font-size:13px; font-weight:700; }
.round-new-button:hover { background:#dcecff; }
.recap-button.round-new-button { display:inline-flex; min-height:unset; margin-top:2px; }
.round-new-button.needs-attention { animation:next-round-nudge 2.8s ease-in-out infinite; }
@keyframes next-round-nudge { 0%,100% { box-shadow:0 0 0 0 rgba(23,105,224,0); transform:translateY(0); } 35% { box-shadow:0 0 0 5px rgba(23,105,224,.16); transform:translateY(-1px); } }
@media (max-width:420px) { .round-bar { margin-left:20px; margin-right:20px; }.recap-button.round-new-button { width:auto; justify-content:initial; } }
.reveal-row { display:grid; grid-template-columns:62px minmax(0,1fr) auto; align-items:center; gap:12px; cursor:default; }
.reveal-details { min-width:0; }
.direction-controls { display:flex; gap:6px; }
.direction-button { border:1px solid var(--line); border-radius:6px; padding:7px 9px; color:var(--primary); background:#fff; cursor:pointer; font-size:12px; font-weight:700; }
.direction-button:hover,.direction-button[aria-pressed="true"] { border-color:var(--primary); background:#edf5ff; }
.now-playing { grid-column:2 / -1; margin-left:0; }
@media (max-width:420px) { .reveal-row { grid-template-columns:1fr; gap:8px; }.direction-controls { width:100%; }.direction-button { flex:1; }.now-playing { grid-column:1; } }
.idea-picker .secondary-button { color:var(--accent); font-weight:700; }
.idea-picker .secondary-button span { margin-right:3px; }
#handoff-title::before,#attempt-kicker::before { content:'●'; color:var(--accent); font-size:.7em; margin-right:7px; vertical-align:middle; }
.now-playing { color:var(--accent); }
.toast.success { background:var(--accent); color:#531f1d; font-weight:700; }