/* v0.4.30 · Shared presentation system. Game-board geometry lives in style.css.
   Content sizes the cards. Motion never controls gameplay or reading deadlines. */
:root {
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  --ink:#1e2440; --paper:#fffdf7; --paper-edge:#e0dacb;
  --panel:#ffffff; --line:#dedfe5; --muted:#596279;
  --ui-ink:var(--ink); --ui-bg:var(--panel); --ui-surface:#f2f3f7;
  --ui-muted:var(--muted); --ui-border:#939baa;
  --ux-soft:#f6f5fa; --ux-teal:#086e68; --ux-teal-soft:#e9f6f3;
  --ux-purple:#6740b7; --ux-purple-soft:#f0eafa;
  --ux-gold:#845b0d; --ux-gold-soft:#fff3d6;
  --ux-shadow:0 4px 18px rgba(28,34,55,.055);
  --ux-shadow-raised:0 12px 36px rgba(28,34,55,.09);
  --ux-radius:20px; --ux-control-radius:13px;
}
html[data-theme="dark"] {
  --ink:#f1f2fa; --paper:#222637; --paper-edge:#454b61;
  --panel:#1d2131; --line:#41485e; --muted:#b8c0d5;
  --ui-ink:var(--ink); --ui-bg:var(--panel); --ui-surface:#2a3043;
  --ui-muted:var(--muted); --ui-border:#828da8;
  --ux-soft:#272b3f; --ux-teal:#8be1cd; --ux-teal-soft:#193b37;
  --ux-purple:#cfb6ff; --ux-purple-soft:#342944;
  --ux-gold:#eed089; --ux-gold-soft:#393124;
  --ux-shadow:0 5px 22px rgba(0,0,0,.13);
  --ux-shadow-raised:0 14px 40px rgba(0,0,0,.22);
}
body { background:radial-gradient(ellipse at 50% 0,#faf7ff 0,transparent 45%),#f7f5ef; color:var(--ink); }
html[data-theme="dark"] body { background:radial-gradient(ellipse at 50% 0,#25213a 0,transparent 48%),#141827; }
main { padding-top:20px; }
h2,h3 { letter-spacing:-.025em; font-weight:800; }
.meta { font-weight:650; letter-spacing:.025em; }
.card,html[data-theme="dark"] .card { background:var(--panel); border:1px solid var(--line); border-radius:var(--ux-radius); box-shadow:var(--ux-shadow); }
.card h2 { margin-bottom:14px; }
/* Keep the established primary/secondary semantics, without thick neon rings. */
:is(.home-flow,.lobby-room-card,.compose-shell,.readaround-simple,.round-complete,.finale-card,.card-preview-dialog) button:not(.avatar-choice):not(.reaction):not(.emoji) {
  font-weight:750; border-radius:var(--ux-control-radius); transition:background-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
:is(.home-flow,.lobby-room-card,.compose-shell,.readaround-simple,.round-complete,.finale-card,.card-preview-dialog) .btn-primary {
  background:#086e68; color:#fff; border:1px solid #086e68; box-shadow:0 3px 0 #05514d;
}
html[data-theme="dark"] :is(.home-flow,.lobby-room-card,.compose-shell,.readaround-simple,.round-complete,.finale-card,.card-preview-dialog) .btn-primary {
  background:#8be1cd; color:#132e29; border-color:#8be1cd; box-shadow:0 3px 0 #32675b;
}
:is(.home-flow,.lobby-room-card,.compose-shell,.readaround-simple,.round-complete,.finale-card,.card-preview-dialog) .btn-neutral {
  background:var(--ui-surface); color:var(--ink); border:1px solid var(--ui-border); box-shadow:none;
}
:is(.home-flow,.lobby-room-card,.compose-shell) .btn-purple { background:#6740b7; color:#fff; border:1px solid #6740b7; box-shadow:0 2px 0 #4e2e93; }
html[data-theme="dark"] :is(.home-flow,.lobby-room-card,.compose-shell) .btn-purple { background:#cfb6ff; color:#2c1945; border-color:#cfb6ff; box-shadow:0 2px 0 #705390; }
button:disabled { transform:none!important; }
button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible {
  outline:3px solid var(--ux-purple); outline-offset:4px;
}
input,select,textarea { border-radius:var(--ux-control-radius); }
/* Entry screens: shared widths, short useful guidance, balanced choices. */
.home-flow:not(.wide) { max-width:780px; }
.home-flow:not(.wide) .onboarding-card,.home-flow:not(.wide) .onboarding-who { max-width:none; }
.home-theme-row { max-width:none; margin-bottom:12px; }
.brand-header { margin:2px 0 18px; }
.brand-logo { max-height:136px; max-width:250px; }
.onboarding-card { padding:clamp(20px,3.5vw,32px); }
.onboarding-card.intro { max-width:580px!important; }
.onboarding-card.intro h2 { font-size:clamp(1.7rem,3.2vw,2.2rem); margin-bottom:8px; }
.onboarding-card.intro input { margin:20px 0 14px; min-height:56px; font-size:1.125rem; }
.onboarding-help { max-width:36ch; margin:0 auto 8px; }
.onboarding-who,html[data-theme="dark"] .onboarding-who { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px 16px; gap:10px; }
.onboarding-who strong { font-size:1rem; font-weight:750; }
.action-choice { padding:16px; }
.big-choice-grid { margin:0; gap:14px; }
.choice-card { position:relative; gap:8px; padding:24px; min-height:174px; border-radius:16px; border:1px solid transparent; box-shadow:none; }
.choice-card.create-choice,html[data-theme="dark"] .choice-card.create-choice { background:var(--ux-teal-soft); color:var(--ink); border-color:var(--ux-teal); }
.choice-card.join-choice,html[data-theme="dark"] .choice-card.join-choice { background:var(--ux-purple-soft); color:var(--ink); border-color:var(--ux-purple); }
.choice-card strong { font-size:1.35rem; line-height:1.25; font-weight:800; }
.choice-card small { font-size:.9375rem; line-height:1.5; font-weight:500; color:var(--muted); }
.choice-card .choice-icon { display:grid; place-items:center; border-radius:12px; width:42px; height:42px; margin-bottom:6px; font-size:1.5rem; background:var(--panel); color:var(--ux-teal); }
.join-choice .choice-icon { color:var(--ux-purple); }
@media(hover:hover) { .choice-card:hover:not(:disabled) { box-shadow:var(--ux-shadow-raised); transform:translateY(-2px); } }
/* Lobby and navigation remain quiet; the Start action is unmistakable. */
.lobby-room-card { padding:24px; }
.lobby-code { letter-spacing:.12em; font-variant-numeric:tabular-nums; font-weight:800; }
.lobby-share-actions { gap:8px; }
.lobby-start-control { margin-top:20px; }
.lobby-room-card .lobby-actions { border-top:1px solid var(--line); margin-top:20px; padding-top:14px; gap:8px; }
.lobby-room-card .lobby-actions .game-menu>summary { border:1px solid var(--ui-border); background:var(--ui-surface); color:var(--ink); border-radius:12px; }
.player,html[data-theme="dark"] .player { background:var(--ux-soft); border:1px solid transparent; border-radius:14px; box-shadow:none; }
.player-roster .section-heading h2 { font-size:1.35rem; }
.roadmap-track { background:var(--panel); border:1px solid var(--line); box-shadow:var(--ux-shadow); border-radius:16px; }
.roadmap-round { background:var(--ux-gold-soft); color:var(--ux-gold); }
/* Avoid fighting the safe-area + sticky-dock logic of the existing picker. */
.champion-selection-screen .onboarding-avatar { border-radius:18px; box-shadow:var(--ux-shadow); }
.champion-picker-heading h2 { font-size:1.5rem; }
.avatar-choice,html[data-theme="dark"] .avatar-choice { background:var(--ux-soft); border:2px solid var(--line); border-radius:14px; }
.avatar-choice.selected,html[data-theme="dark"] .avatar-choice.selected { border-color:var(--ux-teal); background:var(--ux-teal-soft); box-shadow:0 0 0 2px var(--ux-teal-soft); }
.avatar-selection-dock,html[data-theme="dark"] .avatar-selection-dock { border:1px solid var(--line); box-shadow:0 -5px 18px rgba(20,24,45,.05); border-radius:14px; }
/* Content-first paper, including saved submissions and tutorial cards. */
.paper-card,html[data-theme="dark"] .paper-card {
  height:auto; max-height:none; min-width:0; align-self:start; aspect-ratio:auto;
  background:var(--paper); border-color:var(--paper-edge); border-top-width:4px; border-radius:16px;
  box-shadow:0 3px 0 var(--paper-edge),var(--ux-shadow); padding:28px 22px 24px;
}
.paper-card .paper-label { position:static; display:table; transform:none; margin:0 0 14px; padding:5px 11px; line-height:1.35; font-size:.8125rem; letter-spacing:.075em; box-shadow:none; }
.paper-card .paper-text { height:auto; max-height:none; min-height:0; min-width:0; padding:0; font-size:clamp(1.25rem,2.4vw,1.625rem); line-height:1.55; font-weight:650; white-space:pre-wrap; overflow-wrap:anywhere; word-break:normal; }
.paper-card .paper-brand { width:32px; top:16px; right:16px; opacity:.09; }
.paper-stack { display:grid; grid-auto-rows:auto; gap:18px; align-items:start; min-width:0; }
.compose-shell { padding:clamp(16px,3vw,28px); }
.compose-paper { margin:16px 0; }
.compose-paper textarea,html[data-theme="dark"] .compose-paper textarea { background:none; font-size:1.25rem; line-height:1.55; font-weight:500; padding:10px 4px; }
.compose-shell .received-card { background:var(--ux-soft); box-shadow:none; }
.compose-shell .received-card .paper-text { font-size:1.125rem; font-weight:550; }
.compose-shell .assist-row { margin-top:18px; }
/* Keep readers, prompts and primary actions visually distinct. */
.readaround-simple .reading-roadmap { background:var(--panel); border-radius:18px; box-shadow:var(--ux-shadow); padding:12px 10px 6px; }
.reading-stop { border:1px solid var(--line); border-radius:12px; padding:6px 6px 9px; }
.reading-stop.is-current { border:2px solid var(--road-active); box-shadow:none; padding:5px 5px 8px; }
.reading-stop.is-next,.reading-stop.is-starts { border:2px solid var(--road-next); padding:5px 5px 8px; }
.reading-stop.is-closing { border-style:dashed; }
.reading-state { font-weight:700; }
.readaround-simple .read-task,html[data-theme="dark"] .readaround-simple .read-task { background:var(--panel); color:var(--ink); border:1px solid var(--line); border-left:3px solid var(--ux-purple); border-radius:12px; box-shadow:none; }
.read-task strong { font-weight:750; }
.readaround-simple .your-card-label,html[data-theme="dark"] .readaround-simple .your-card-label { font-size:.8125rem; font-weight:750; padding:5px 13px; background:var(--ux-purple-soft); color:var(--ux-purple); letter-spacing:.035em; margin:16px auto 10px; }
.holding-card { padding:16px 14px 36px!important; }
.holding-line { min-width:0; padding:14px; margin:2px 0; border-radius:12px; }
.holding-line p,html[data-theme="dark"] .holding-line p { font-size:clamp(1.1875rem,3vw,1.625rem); line-height:1.55; font-weight:550; white-space:pre-wrap; overflow-wrap:anywhere; }
.holding-label { font-size:.8125rem; letter-spacing:.09em; }
.holding-card .read-highlight,.holding-card .read-highlight.then-line,html[data-theme="dark"] .holding-card .read-highlight,html[data-theme="dark"] .holding-card .read-highlight.then-line { background:var(--ux-gold-soft); border-color:var(--ux-gold); border-width:1px 1px 1px 4px; }
.readaround-simple>.done-button { margin:18px 0 12px; font-size:1.125rem; min-height:54px; }
.readaround-simple .reaction { background:var(--ux-soft); color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.readaround-simple .reaction.selected { background:var(--ux-purple-soft); border:2px solid var(--ux-purple); }
.readaround-simple .reaction-count { color:var(--ink); font-weight:750; }
.readaround-simple .reaction-heading { color:var(--muted); font-weight:700; }
.card-preview-dialog { border:1px solid var(--ux-purple); border-radius:24px; box-shadow:var(--ux-shadow-raised); }
.card-preview-dialog .holding-card { box-shadow:none; }
.reading-turn-notice { border-width:1px; border-left-width:4px; background:var(--ux-purple-soft); color:var(--ink); border-color:var(--ux-purple); box-shadow:var(--ux-shadow-raised); }
/* Results: one complete pair per card, stacked on phones, paired on desktop.
   No fixed heights, aspect ratios, absolute text, clamping or hidden overflow. */
.finale-card { max-width:1040px; padding:clamp(16px,3vw,32px); }
.finale-heading { text-align:center; margin:4px 0 26px; }
.finale-mark { display:inline-grid; place-items:center; width:56px; height:56px; border-radius:18px; background:var(--ux-gold-soft); color:var(--ux-gold); font-size:2rem; margin-bottom:12px; }
.finale-heading .meta { margin:0 0 6px; font-size:.75rem; letter-spacing:.12em; }
.finale-heading h2 { font-size:clamp(1.625rem,4vw,2.25rem); line-height:1.2; margin:0; }
.finale-awards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:12px; margin-bottom:24px; }
.finale-awards:empty { display:none; }
.finale-awards .award { min-width:0; align-items:flex-start; margin:0; padding:16px; background:var(--ux-soft); border:1px solid var(--line); border-radius:16px; }
.award>div,.award h3,.award p { min-width:0; overflow-wrap:anywhere; }
.award h3 { font-size:1.1875rem; }
.award p { font-size:.9375rem; color:var(--muted); }
.award .meta { font-size:.75rem; font-weight:750; letter-spacing:.06em; }
.results-list { display:grid; gap:22px; min-width:0; }
.result-pair { display:block; height:auto; min-width:0; border:1px solid var(--paper-edge); border-radius:18px; background:var(--paper); box-shadow:0 3px 0 var(--paper-edge),var(--ux-shadow); }
.result-pair-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:14px 20px; border-bottom:1px solid var(--paper-edge); text-align:left; }
.result-number { display:grid; place-items:center; min-width:34px; min-height:30px; border-radius:9px; background:var(--ux-purple-soft); color:var(--ux-purple); font-weight:800; font-size:.875rem; }
.result-reactions { color:var(--muted); font-size:.875rem; font-weight:600; }
.result-lines { display:grid; grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; align-items:start; }
.result-line { display:block; height:auto; min-height:0; max-height:none; min-width:0; padding:20px; }
.result-then { border-top:1px solid var(--paper-edge); }
.result-label { display:table; position:static; margin:0 0 12px; border-radius:7px; padding:5px 9px; font-size:.75rem; line-height:1.35; letter-spacing:.08em; font-weight:800; color:var(--ux-teal); background:var(--ux-teal-soft); }
.result-then .result-label { background:var(--ux-purple-soft); color:var(--ux-purple); }
.result-text { display:block; position:static; height:auto; max-height:none; min-width:0; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; word-break:normal; font-size:clamp(1.1875rem,2vw,1.4375rem); line-height:1.55; font-weight:650; color:var(--ink); }
.results-empty { padding:24px; background:var(--ux-soft); border:1px dashed var(--line); border-radius:14px; line-height:1.5; }
.finale-actions { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:center; }
.finale-actions button { min-width:180px; }
.round-complete .recap-stat,html[data-theme="dark"] .round-complete .recap-stat { background:var(--ux-soft); border:1px solid var(--line); border-radius:16px; }
.round-complete .recap-label { font-size:.75rem; letter-spacing:.06em; color:var(--muted); }
.recap-quote { overflow-wrap:anywhere; white-space:pre-wrap; }
.recap-table>div>* { min-width:0; overflow-wrap:anywhere; }
.round-complete .round-next-actions { border-radius:16px; }
/* Arcade polish is limited to the shell and game menu. No canvas, SVG,
   physics positions, velocities, board sizes, odds, prizes or hitboxes change. */
.arcade-foreground { border-radius:22px; border:1px solid #555079; background:radial-gradient(ellipse at 50% 0,#353050 0,#20243b 80%); box-shadow:0 12px 30px #15172a20; }
.arcade-heading h3 { font-size:clamp(1.5rem,3vw,1.9rem); letter-spacing:-.025em; }
.mini-menu { gap:12px; }
.mini-menu .mini-choice { position:relative; border-radius:16px; border:1px solid #ffffff45; padding:20px; gap:7px; min-height:172px; box-shadow:0 4px 12px #10132220; }
.mini-menu .mini-choice>span { display:grid; place-items:center; width:46px; height:46px; background:#ffffff20; border-radius:12px; font-size:1.8rem; }
.mini-menu .mini-choice strong { font-size:1.2rem; font-weight:800; }
.mini-menu .mini-choice small { font-size:.875rem; line-height:1.5; font-weight:500; }
.more-mini-games { margin-top:16px; }
.arcade-tools button { border-radius:12px; }
@media(min-width:860px) { .result-lines { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; } .result-then { border-top:0; border-left:1px solid var(--paper-edge); } }
@media(max-width:699px) {
  main { padding-top:14px; }
  .brand-logo { max-height:118px; max-width:220px; }
  .brand-header { margin-bottom:16px; }
  .lobby-room-card { padding:20px; }
  .big-choice-grid { gap:12px; }
  .choice-card { min-height:148px; padding:20px; }
  .holding-card { padding:12px 8px 32px!important; }
  .holding-line { padding:12px; }
  .result-pair-heading { padding:12px 16px; }
  .result-line { padding:18px 16px; }
  .finale-card { padding:18px 14px; }
  .finale-awards .award { padding:14px; }
  .mini-menu .mini-choice { min-height:142px; padding:18px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; }
  :is(.home-flow,.lobby-room-card,.compose-shell,.readaround-simple,.round-complete,.finale-card,.card-preview-dialog) button { transition:none!important; }
  .choice-card:hover:not(:disabled) { transform:none; }
}
/* Short, non-looping feedback. These effects never acknowledge or advance cards. */
.card-preview-dialog[open] { animation:ux-card-arrive .22s cubic-bezier(.2,.75,.3,1); }
.readaround-simple .reaction.selected .reaction-emoji { animation:ux-reaction-pop .2s ease-out; }
@keyframes ux-card-arrive { from { opacity:.5; transform:translateY(8px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes ux-reaction-pop { 50% { transform:scale(1.16); } }
@media(prefers-reduced-motion:reduce) { .card-preview-dialog[open],.readaround-simple .reaction.selected .reaction-emoji { animation:none; } }