/* GAFFLO 1.13.45 — approved black / cream / burgundy club composition.
   The hand is one unpaginated grid: every dealt card remains visible and
   reachable. Longer content and text zoom may grow the document, never clip it. */
:root{color-scheme:dark;--bg:#080706;--surface:#11100e;--ink:#f5ecdb;--muted:#bdb3a4;--gold:#dcba76;--line:#3c3327;--paper:#f2e1c5;--paper-ink:#261b12;--accent:#781227;--accent-low:#480913;--focus:#f2c977;--danger:#e3b9ac;--app-width:460px;--font-ui:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-joke:Georgia,"Times New Roman",serif}
:root[data-theme=day]{color-scheme:light;--bg:#f5efdf;--surface:#eee4d2;--ink:#261b14;--muted:#695b4b;--gold:#77551c;--line:#b8a68b;--paper:#fff5e3;--paper-ink:#271c12;--focus:#70481b;--danger:#783528}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg);scroll-padding-bottom:90px}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--font-ui);-webkit-tap-highlight-color:transparent}button,input,textarea{font:inherit}button,a,input,summary{touch-action:manipulation}button{color:inherit;cursor:pointer}button:disabled{cursor:default}button,a,summary{outline-offset:4px}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus)}a{color:var(--ink);text-underline-offset:4px}button{max-width:100%}button>span{min-width:0}img{max-width:100%}svg.g-ico{width:22px;height:22px;display:block}h1,h2,h3,p,blockquote{margin:0}h1,h2,h3{font-weight:400}p+ p{margin-top:12px}[hidden]{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:4px;left:8px;z-index:100;transform:translateY(-150%);background:var(--paper);color:var(--paper-ink);padding:10px 16px;border-radius:8px;min-height:44px}.skip-link:focus{transform:none}
#app{width:min(100%,var(--app-width));margin:0 auto;min-height:100svh;position:relative;background:var(--bg);isolation:isolate;padding-top:env(safe-area-inset-top)}
.hdr{height:62px;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px;padding:4px 13px;position:relative;z-index:2}.brand{display:flex;gap:7px;align-items:center;justify-content:center;background:none;border:0;min-height:44px;text-decoration:none}.brand b{font:600 29px/.95 var(--font-joke);letter-spacing:-1.4px}.brand .sub{align-self:center;font:10px/1 var(--font-ui);border:1px solid var(--line);padding:3px;border-radius:4px;color:var(--muted)}.icon-button{width:44px;min-width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;border-radius:50%}.icon-button:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}.music-control{color:var(--gold)}.music-control[aria-pressed=false]{color:var(--muted)}.header-title{text-align:center;font-size:15px;color:var(--muted)}
.screen{min-width:0;padding:20px 20px 100px;outline:none;min-height:calc(100svh - 62px);position:relative}.page-title{font:27px/1.15 var(--font-joke);letter-spacing:-.6px;margin:8px 0 24px}.eyebrow,.section-label{text-transform:uppercase;color:var(--muted);font:500 11px/1.5 var(--font-ui);letter-spacing:.14em;text-align:center}.section-label{text-align:left;margin:22px 0 12px}.muted{color:var(--muted)}.legal-small{font:12px/1.55 var(--font-ui);color:var(--muted);text-align:center;margin:16px 0;overflow-wrap:anywhere}.note{font-size:12px;color:var(--muted);text-align:center;line-height:1.5;margin:8px 0 0}.badge{font:12px/1.4 var(--font-ui);letter-spacing:.08em;color:var(--muted);margin:8px 0 14px}.link{border:0;background:none;padding:8px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);text-decoration:underline;text-underline-offset:4px;font-size:13px}.link:hover{color:var(--ink)}
.cta{display:flex;width:100%;justify-content:center;align-items:center;gap:9px;min-height:50px;border:1px solid #b1874c;border-radius:999px;padding:11px 17px;color:#fff1dc;background:linear-gradient(165deg,#8c1930 0%,#700e24 56%,#480913 100%);box-shadow:inset 0 1px 0 #cf60614d;font:17px/1.25 var(--font-joke);text-align:center;transition:transform .12s,background .12s}.cta:hover{background:linear-gradient(165deg,#a0233b,#751326 60%,#570e1d)}.cta:active{transform:translateY(1px)}.cta.ghost{background:transparent;color:var(--ink);border-color:#9b8b71;box-shadow:none}.cta.ghost:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}.cta[aria-disabled=true]{background:linear-gradient(165deg,#57202b,#3b111b);color:#e6cbbc;border-color:#745139;box-shadow:none}.cta+ .cta{margin-top:10px}.foot{width:min(100%,var(--app-width));position:fixed;bottom:0;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;z-index:8;border-top:1px solid var(--line);background:var(--bg);padding:5px 12px calc(6px + env(safe-area-inset-bottom));height:calc(66px + env(safe-area-inset-bottom))}.tab{background:none;border:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-width:44px;min-height:44px;font:11px/1.3 var(--font-ui);color:var(--muted);border-radius:8px}.t-ico{display:block}.tab.on{color:var(--gold)}.tab.on .g-ico{stroke-width:2.3}.tab.on:first-child .g-ico{fill:var(--gold);stroke:var(--bg)}
/* Venue entrances are a single composition, not a card dashboard. */
.venue-lobby{padding:0 26px 100px;min-height:calc(100svh - 62px);display:flex;flex-direction:column;isolation:isolate}.venue-lobby:before{content:"";position:absolute;inset:0 0 66px;background:linear-gradient(180deg,var(--bg) 0%,transparent 30%,transparent 78%,var(--bg) 100%),url('../art/club/audience.webp') center 72%/100% auto no-repeat;z-index:-1;opacity:.74}.venue-lobby:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 28% 12%,#74331528,transparent 45%);z-index:-1}.lobby-intro{margin:auto 0 25px;text-align:center;padding:35px 8px 40px}.home-screen .lobby-intro{margin-top:clamp(44px,10svh,95px)}.lobby-title{font:38px/1.12 var(--font-joke);letter-spacing:-.8px;text-wrap:balance;max-width:285px;margin:14px auto 0}.lobby-subtitle{font-size:15px;color:var(--muted);margin:20px auto 0;max-width:240px;line-height:1.55}.lobby-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:5px}.lobby-bottom .link{margin-bottom:-12px}.free-lobby .lobby-intro{padding-top:55px}.free-lobby .lobby-title{font-size:38px}.free-lobby:after{background:url('../art/club/spotlight.webp') center 8%/100% auto no-repeat;opacity:.85}
/* All twelve card faces on one board. No pager, picker, modal or nested scroller. */
.screen.play{padding:12px 16px 86px;min-height:calc(100svh - 62px);display:flex;flex-direction:column;gap:10px}.builder-intro{padding:7px 8px 5px}.builder-intro .eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:9px}.setup{font:25px/1.17 var(--font-joke);text-align:center;letter-spacing:-.25px;text-wrap:balance;overflow-wrap:break-word}.rack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0}.slot{min-width:0;min-height:82px;border:1px dashed #786547;border-radius:7px;background:transparent;color:var(--ink);padding:8px 15px 8px 6px;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;font:14px/1.2 var(--font-joke);overflow-wrap:anywhere;hyphens:auto}.slot.empty{padding:6px}.slot-number{font:12px/1.2 var(--font-ui);color:var(--muted)}.slot-hint{font:11px/1.2 var(--font-ui);color:var(--muted)}.slot.filled{background:linear-gradient(125deg,#faedd7,var(--paper));border:1px solid #ccb390;color:var(--paper-ink);box-shadow:0 2px 6px #0003}.slot.active-slot{outline:2px solid var(--gold);outline-offset:1px}.slot-x{position:absolute;top:4px;right:3px;opacity:.7}.slot-x svg{width:11px;height:11px}.slot-t{width:100%;text-align:center}
.hand-wrap{min-width:0}.hand-heading{font:10px/1.4 var(--font-ui);letter-spacing:.11em;text-transform:uppercase;text-align:center;color:var(--muted);margin:0 0 8px}.hand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;align-items:stretch}.card{background:linear-gradient(120deg,#fbefd9 0%,var(--paper) 100%);color:var(--paper-ink);border:1px solid #cbb28b;border-radius:6px;padding:9px 7px;min-width:0;min-height:64px;font:15px/1.18 var(--font-joke);position:relative;box-shadow:0 2px 4px #0004;text-align:center;overflow-wrap:break-word;hyphens:auto;transition:transform .12s,border-color .12s}.card:hover{border-color:#f3cc80;box-shadow:0 0 0 1px #cda755}.card:active{transform:translateY(1px)}.card.used{background:#d8c3a0;border-color:#f2d08b;padding-top:10px;padding-bottom:14px;box-shadow:inset 0 0 0 1px #806644;opacity:1}.card-assigned{position:absolute;right:3px;bottom:2px;width:14px;height:14px;display:grid;place-items:center;border-radius:50%;background:#573a1d;color:#fff0d4;font:700 9px/1 var(--font-ui)}.card-text{display:block}.builder-actions{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:0}.builder-actions .cta{min-height:46px}.builder-actions .note{font-size:11px;margin:6px 0 0}.builder-actions .new-hand{min-height:44px;margin-top:0}.play>.eyebrow{margin:0}.play>.setup{margin:0 4px 2px}
/* Stage captions, scores and controls remain live DOM. The corrected Comic
   below is the only performer; source-size scenery is supplementary. */
#app[data-screen=performing],#app[data-screen=result],#app[data-screen=dailycomplete]{--bg:#050403;--ink:#f5ecdb;--muted:#bdb3a4;--gold:#dcba76;--line:#3c3327;--focus:#f2c977;background:#050403;color:var(--ink)}
.performance-screen{padding:0 0 22px;min-height:calc(100svh - 62px);display:flex;flex-direction:column;background:#050403}.emcee-art{width:100%;height:auto;object-fit:contain;display:block;margin-top:0;mask-image:linear-gradient(to bottom,transparent 0%,#000 5%,#000 100%)}.performance-script{margin:-1px 17px 0;position:relative;z-index:1;background:linear-gradient(125deg,#fbeed7,#efdabc);color:#251c12;padding:21px 18px;border-radius:10px;border:1px solid #d7ba90;box-shadow:0 8px 30px #0004;text-align:center;font:24px/1.24 var(--font-joke);overflow-wrap:break-word}.script-setup{font:inherit}.script-punchline{font:inherit;margin-top:8px}.audience-art{background:url('../art/club/audience.webp') center/cover no-repeat;min-height:120px;flex:1;margin-top:-3px;mask-image:linear-gradient(to bottom,#000 30%,transparent 100%)}.stage-skip{margin:0 auto;color:var(--muted);min-height:44px;position:relative;z-index:1}.result-screen{padding:0 20px 24px;min-height:calc(100svh - 62px);display:flex;flex-direction:column;align-items:stretch;background:#050403}.critic-art{align-self:center;display:block;width:calc(100% + 40px);max-width:calc(100% + 40px);height:auto;margin:0 -20px;mask-image:linear-gradient(to bottom,transparent 0%,#000 6%,#000 100%)}.verdict-card{position:relative;margin:-1px 0 20px;padding:21px 20px 24px;background:linear-gradient(160deg,#100d09,#050403 68%);border:1px solid #3c2d1b;border-radius:12px;box-shadow:0 5px 20px #0002;text-align:center}.score{font:78px/.95 var(--font-joke);letter-spacing:-3px}.score-cap{font:22px/1.25 var(--font-joke);margin:10px 0 0}.critic{font:19px/1.4 var(--font-joke);color:#cbbfae;text-align:center;max-width:340px;margin:28px auto 0;text-wrap:balance;overflow-wrap:break-word}.result-screen .cta{flex-shrink:0}.shareStatus:empty{display:none}.shareStatus{color:var(--muted);font-size:13px;margin:10px 0}.notes{border-top:1px solid var(--line);margin:20px 0 0;padding-top:5px;color:var(--muted);font-size:14px}.notes summary{min-height:44px;cursor:pointer;padding:12px 2px;line-height:1.35}.notes[open]>p{margin:12px 0;line-height:1.6}.result-notes{--line:#30271d;margin-top:18px;color:#bdb3a4}.result-setup,.punch{font:18px/1.4 var(--font-joke);color:var(--ink)}.bd-row{display:flex;gap:14px;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}.bd-row b{white-space:nowrap}.bd-total{color:var(--ink)}.bd-cap{font-style:italic}.bonus{font-size:13px}.reveal{display:grid;gap:16px;margin:20px 0}.reveal-row{padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;font:20px/1.35 var(--font-joke)}.reveal-row b{color:var(--gold);font-size:32px}.reveal .critic{margin:10px auto}.beat-to{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.daily-complete{padding:40px 26px 32px;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:calc(100svh - 62px);background:radial-gradient(ellipse at 50% 20%,#6b411527,transparent 50%),#050403}.complete-title{font:38px/1.14 var(--font-joke);letter-spacing:-.6px;max-width:280px;margin:30px 0 18px}.empty-stage-art{display:block;width:100%;height:auto;max-width:340px;mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 87%,transparent 100%)}.complete-note{font:19px/1.3 var(--font-joke);margin:10px 0}.daily-complete>.muted{font-size:14px;max-width:270px;line-height:1.6;margin:5px 0 24px}.daily-complete .cta{margin-top:auto}
/* Backstage: plain rows, not another dashboard. */
.menu-list{margin:12px 0 20px}.more-screen{padding-top:30px}.menu-row{display:grid;grid-template-columns:24px minmax(0,1fr) 18px;gap:14px;align-items:center;min-height:60px;width:100%;border:0;border-bottom:1px solid var(--line);padding:12px 2px;background:transparent;text-align:left;font-size:16px}.menu-row:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}.more-screen .menu-row{border:0;min-height:65px}.menu-icon{color:var(--muted)}.menu-arrow{color:var(--muted);font-size:20px;text-align:right}.links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:18px 0}.links a{min-height:44px;padding:11px 12px;font-size:13px;color:var(--muted)}.studio-sig{display:flex;justify-content:center;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:20px 0 0}.sig-mark svg{width:30px;height:30px;display:block}.setting-row{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:60px;gap:15px;border:0;border-bottom:1px solid var(--line);background:none;padding:14px 2px;text-align:left}.setting-copy{flex:1;min-width:0}.setting-title{font-size:15px;display:block}.setting-description{font-size:12px;color:var(--muted);display:block;margin-top:4px}.switch-mark{width:44px;height:26px;flex-shrink:0;border-radius:999px;background:#615548;position:relative;border:1px solid #9b866a}.switch-mark:before{content:"";position:absolute;width:20px;height:20px;top:2px;left:2px;border-radius:50%;background:#e4d7c0}.switch-mark span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[aria-checked=true] .switch-mark{background:#8b642e}[aria-checked=true] .switch-mark:before{left:20px;background:#f1cc80}.set-note{font-size:13px;color:var(--muted);margin:8px 0 18px}.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}.seg button{min-height:48px;display:flex;justify-content:center;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:none}.seg button.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--bg))}.palettes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pal{position:relative;min-height:98px;min-width:0;display:flex;flex-direction:column;gap:9px;padding:10px;border:1px solid var(--line);border-radius:12px;background:none;color:var(--ink);font-size:13px;text-align:left}.pal.on{border:2px solid var(--gold);padding:9px}.pal .sw{width:100%;height:36px;border-radius:6px;display:block}.pal-check{position:absolute;right:9px;bottom:10px;color:var(--gold)}.pal-check svg{width:16px;height:16px}.pal .pn{padding-right:15px}.stats-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 26px}.stats-summary>div{display:flex;flex-direction:column-reverse;align-items:flex-start}.stats-summary dt{font-size:12px;color:var(--muted);margin-top:5px}.stats-summary dd{font:38px/1 var(--font-joke);margin:0}.score-chart{display:flex;align-items:flex-end;gap:14px;height:165px;margin:40px 0 28px;padding-bottom:22px}.score-bar{flex:1;height:100%;position:relative;display:flex;align-items:flex-end}.score-bar i{display:block;width:100%;max-width:28px;margin:0 auto;background:linear-gradient(90deg,#bd8734,#edc471,#d29d44);border:1px solid #eacb87;border-radius:3px 3px 0 0}.score-bar span{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted);margin-top:6px;white-space:nowrap}.stat-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}.stat-row b{font:22px/1 var(--font-joke);color:var(--gold)}.gallery{border-radius:8px;overflow:clip;background:color-mix(in srgb,var(--surface) 65%,var(--bg))}.g-item{padding:4px 14px;border-bottom:1px solid var(--line)}.g-item>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:65px;cursor:pointer;font:16px/1.3 var(--font-joke);padding:10px 0}.g-item>summary::marker{content:""}.g-item>summary::-webkit-details-marker{display:none}.g-score{color:var(--gold);font-size:20px;font-weight:400}.g-line{font:20px/1.45 var(--font-joke);margin:10px 0}.g-meta{font-size:12px;color:var(--muted);margin:6px 0 15px}.empty-note{min-height:240px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:24px;text-align:center;font:20px/1.4 var(--font-joke);color:var(--muted)}.empty-note svg{width:32px;height:32px}.empty-note .cta{font-size:17px}.help-steps{counter-reset:step;padding:0;margin:30px 0;list-style:none;display:grid;gap:20px}.help-steps li{counter-increment:step;position:relative;padding-left:47px;min-height:44px}.help-steps li:before{content:counter(step);position:absolute;left:0;top:0;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--gold);color:var(--gold);border-radius:50%;font:21px/1 var(--font-joke)}.help-steps h2{font:19px/1.3 var(--font-joke);margin:1px 0 5px}.help-steps p{font-size:13px;color:var(--muted);line-height:1.55}.backup-status{padding:10px 0;color:var(--ink);font-size:14px}.backup-status:empty{display:none}.backup-confirm{border:1px solid var(--gold);border-radius:9px;padding:16px;margin:20px 0;color:var(--ink)}.screen>p.muted{margin:12px 0 22px}.screen>textarea,.shareStatus textarea{max-width:100%;width:100%;color:var(--ink);background:var(--surface);padding:10px;border:1px solid var(--line)}
.sheet{width:min(calc(100% - 24px),440px);max-height:calc(100svh - 32px);overflow-y:auto;margin:auto;border:1px solid var(--line);padding:0;background:var(--bg);color:var(--ink);border-radius:16px;box-shadow:0 20px 60px #0008}.sheet::backdrop{background:#000c}.sheet-inner{padding:18px}.hp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.hp-head h2{font:24px/1.2 var(--font-joke)}
/* Startup is skippable, session-only, with the exact supplied stool scene. */

.document-page .hdr{display:flex;justify-content:center}.document-page .hdr .logo{display:none}.document-page .screen{padding:20px 24px 60px;min-height:auto}.document-page .setup{font:24px/1.4 var(--font-joke);text-align:left;text-wrap:pretty}.document-page h1{font:30px/1.2 var(--font-joke);margin-bottom:22px}.document-page h2{font:22px/1.3 var(--font-joke);margin:24px 0 12px}.document-page p,.document-page li{font-size:15px;line-height:1.7}.document-page a{display:inline-block;padding:8px 2px;min-height:44px}.document-page ul{padding-left:20px}
/* Optional saved palette changes ambiance only. Cards stay cream and legible;
   selected/correctness states never become colour puzzles. */
:root[data-wonder] #app:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(130deg,color-mix(in srgb,var(--wonder-a) 9%,transparent),transparent 45%,color-mix(in srgb,var(--wonder-b) 7%,transparent))}
:root[data-theme=day] .venue-lobby:before{opacity:.13}:root[data-theme=day] .free-lobby:after{opacity:.2}:root[data-theme=day] .card.used{background:#dcc5a1}:root[data-theme=day] .slot{border-color:#856d4c}

@media(max-width:350px){.hdr{height:52px;padding:2px 10px}.brand b{font-size:26px}.brand .sub{font-size:9px}.screen{min-height:calc(100svh - 52px);padding-left:16px;padding-right:16px}.screen.play{gap:8px;padding:8px 12px 80px;min-height:calc(100svh - 52px)}.builder-intro{padding:4px 2px}.builder-intro .eyebrow{margin-bottom:6px}.setup{font-size:22px}.slot{font-size:13px;min-height:68px;padding-right:12px}.hand{gap:5px}.card{font-size:14px;padding:7px 5px;min-height:61px}.hand-heading{font-size:9px;margin-bottom:6px}.builder-actions .cta{min-height:44px;font-size:16px}.note{font-size:11px}.lobby-title{font-size:33px}.venue-lobby{min-height:calc(100svh - 52px);padding-left:22px;padding-right:22px}.performance-script{font-size:21px;padding:18px 14px;margin-left:13px;margin-right:13px}.score{font-size:67px}.score-cap{font-size:21px}.critic{font-size:17px;margin-top:22px}.verdict-card{padding:17px 14px 21px}.stats-summary dd{font-size:32px}.menu-row{font-size:15px}.more-screen .menu-row{min-height:58px}}
@media(max-height:690px) and (max-width:759px){.hdr{height:48px}.screen{min-height:calc(100svh - 48px)}.screen.play{gap:5px;padding-top:1px;padding-bottom:63px;min-height:calc(100svh - 48px)}.builder-intro{padding:2px}.builder-intro .eyebrow{font-size:9px;margin-bottom:4px}.setup{font-size:20px;line-height:1.15}.slot{min-height:50px;font-size:12px;padding:5px 12px 5px 4px}.slot-hint{font-size:10px}.hand-heading{font-size:9px;margin-bottom:4px}.hand{gap:4px}.card{font-size:13px;line-height:1.12;min-height:44px;padding:6px 4px}.card.used{padding:6px 4px 12px}.builder-actions .cta{min-height:44px;font-size:16px;padding:8px 14px}.builder-actions .note{font-size:10px;margin-top:3px}.foot{height:calc(54px + env(safe-area-inset-bottom));padding-top:3px;padding-bottom:calc(3px + env(safe-area-inset-bottom))}.tab{font-size:10px;gap:1px}.tab .g-ico{width:19px;height:19px}.venue-lobby{min-height:calc(100svh - 48px);padding-bottom:77px}.home-screen .lobby-intro{margin-top:36px;padding-top:15px}.lobby-title{font-size:33px}.lobby-intro{padding-bottom:20px}.critic-art{width:80%;max-width:80%;margin:0}.verdict-card{padding-top:16px;margin-top:-2px;margin-bottom:15px}.critic{margin-top:18px;font-size:17px}.score{font-size:58px}.score-cap{font-size:20px}.complete-title{margin:0 0 12px;font-size:32px}.empty-stage-art{max-width:225px}.daily-complete{padding-top:20px}.more-screen{padding-top:12px}.more-screen .menu-row{min-height:48px}.performance-screen{min-height:calc(100svh - 48px)}.performance-script{font-size:21px}.menu-list{margin:0 0 8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html[data-motion=reduce] *,html[data-motion=reduce] *:before,html[data-motion=reduce] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
/* The shortest phone still shows the entire hand; compress spacing, not cards. */
@media(max-height:610px) and (max-width:350px){.hdr{height:44px;padding-top:0;padding-bottom:0}.screen.play{min-height:calc(100svh - 44px);gap:4px}.card{padding:4px;line-height:1.12}.card.used{padding:4px 4px 10px}.hand{gap:3px}.builder-intro .eyebrow{margin-bottom:3px}.hand-heading{margin-bottom:3px}.slot{padding-top:4px;padding-bottom:4px}.setup{font-size:19px}.builder-intro{padding-top:1px;padding-bottom:1px}}
/* Feather the audience plate into the black room; never expose a crop edge. */
.venue-lobby:before{inset:auto 0 70px;height:48%;background:url('../art/club/audience.webp') center/cover no-repeat;mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 68%,transparent 100%)}
/* Preserve the art's full-bleed inset when the generic 320px page padding shrinks. */
.screen.result-screen{padding-left:20px;padding-right:20px}
.screen.performance-screen{padding-left:0;padding-right:0}
/* A lighting plate must dissolve into the room, never read as a rectangular tile. */
.free-lobby:after{inset:35px 0 auto;height:110px;background-position:center;background-size:100% 100%;mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 45%,transparent 100%);mix-blend-mode:screen}


/* ============================================================
   V1.13 — HUMOR CORE + APPROVED COMIC PERFORMANCE
   Joke-first hierarchy; all 12 dealt cards remain visible at once.
   ============================================================ */
.structure-hint{margin:8px auto 0;max-width:360px;text-align:center;color:var(--muted);font:12px/1.45 var(--font-ui)}
.rack-one{grid-template-columns:repeat(2,minmax(0,1fr));max-width:360px;width:100%;margin-inline:auto}
.rack-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:360px;width:100%;margin-inline:auto}
.rack-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.slot-label{font:600 9px/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:#7b6243;margin-bottom:3px}
.optional-slot{border-style:dotted;opacity:.9}
.revision-note{font:600 11px/1.4 var(--font-ui);color:var(--gold);text-align:center;margin:5px 0 0}

/* Performance uses only the owner-approved Comic pixels, extracted without redraw. */
.comic-performance{overflow:hidden;background:radial-gradient(ellipse at 50% 18%,#7b2e1938 0,transparent 40%),linear-gradient(#0a0706,#030302 76%)}
.comic-stage{position:relative;min-height:clamp(268px,43svh,370px);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:linear-gradient(90deg,#260b11 0 10%,#651d2c 10% 18%,transparent 18% 82%,#651d2c 82% 90%,#260b11 90% 100%)}
.comic-stage:before,.comic-stage:after{content:"";position:absolute;top:0;bottom:0;width:19%;z-index:1;background:repeating-linear-gradient(90deg,#48101d,#641726 18px,#381019 36px);filter:drop-shadow(0 0 12px #0008)}
.comic-stage:before{left:0;clip-path:polygon(0 0,100% 0,72% 100%,0 100%)}
.comic-stage:after{right:0;clip-path:polygon(0 0,100% 0,100% 100%,28% 100%)}
.stage-light{position:absolute;inset:-8% 16% 22%;background:radial-gradient(ellipse at 50% 10%,#ffe1a95c 0,transparent 58%);filter:blur(2px);pointer-events:none}
/* Fixed shared window: original y=480..1408 on ALL poses. At 256 CSS px
   wide, the largest figure is 216 CSS px high (432 native px at DPR 2).
   Natural bending/gestures remain different; never auto-fit each silhouette. */
.comic-figure{position:relative;z-index:2;flex:none;width:min(256px,80vw);aspect-ratio:1024/928;overflow:hidden;isolation:isolate}
.comic-figure>.comic-pose{position:absolute;left:0;top:-51.724137931%;display:block;width:100%;height:auto;max-width:none;max-height:none;transform:none;object-fit:contain;filter:drop-shadow(0 5px 7px #0006)}
.comic-stage>.comic-figure{margin-bottom:18px}
/* Scenery is an absolute background layer, not a flex sibling that pushes the
   fixed x=512 performer off-centre. No audience rectangle beside the actor. */
.comic-stage>.audience-art{position:absolute;inset:auto 0 0;z-index:0;width:100%;height:88px;min-height:0;margin:0;flex:none;opacity:.28;pointer-events:none;background-position:center bottom;mask-image:linear-gradient(to bottom,transparent,#000)}
.performance-line{position:relative;z-index:4;margin:-12px 18px 7px;padding:16px 18px;min-height:70px;border-radius:9px;border:1px solid #d2b78c;background:linear-gradient(135deg,#faeed9,#ecd8b9);color:#251c12;text-align:center;font:22px/1.3 var(--font-joke);box-shadow:0 8px 28px #0006;text-wrap:balance;overflow-wrap:anywhere}
.performance-line.punchline-beat{border-color:#e7c26f;box-shadow:0 8px 28px #0006,0 0 0 1px #a6732a55}
[data-motion=reduce] .comic-pose{animation:none;transition:none;opacity:1;transform:none}

.comic-verdict{padding-top:0}.result-comic{align-self:center;margin:4px auto 0;width:min(256px,72vw)}
.comic-verdict .verdict-card{z-index:2;margin-top:0}.critic-note{margin:14px auto 0;max-width:330px;color:#e6ddcf;font:14px/1.45 var(--font-ui)}
.challenge-bonus{margin:14px auto 0;padding-top:12px;border-top:1px solid var(--line);color:var(--gold);font:12px/1.45 var(--font-ui)}
.compare-versions{margin:0 0 15px;border:1px solid var(--line);border-radius:10px;padding:0 13px;background:#0d0a08}.compare-versions summary{min-height:44px;padding:11px 0;cursor:pointer;color:var(--gold)}
.version-row{display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding:10px 0;border-top:1px solid var(--line)}.version-row p{grid-column:1/-1;margin:0;color:var(--muted);font:15px/1.35 var(--font-joke)}
.g-item.favourite{border-color:#775929}.g-item.favourite .g-title{color:var(--gold)}

.room-start,.room-pass{display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - 128px);text-align:center}.room-start .muted,.room-pass .muted{max-width:330px;margin:0 auto 28px;line-height:1.55}
.room-joke{padding:18px 0;border-bottom:1px solid var(--line)}.room-joke h2{font:22px/1.2 var(--font-joke);margin:0 0 8px}.room-joke .g-line{font:18px/1.4 var(--font-joke)}.room-favorite-note{color:var(--gold);font-size:13px;text-align:center;margin:18px 0}

@media(max-width:350px){.structure-hint{font-size:10px;margin-top:4px}.rack-one,.rack-two{gap:6px}.performance-line{font-size:19px;margin-left:12px;margin-right:12px}.comic-stage{min-height:292px}.result-comic{width:210px;margin-bottom:0}}
@media(max-height:610px) and (max-width:350px){.structure-hint{display:none}.comic-stage{min-height:248px}.stage-comic{width:230px}.performance-line{min-height:56px;font-size:17px;padding:10px 12px}.result-comic{width:174px;margin-top:4px;margin-bottom:0}.critic-note,.challenge-bonus{font-size:11px}}

/* Native-detail ceiling on denser displays. The art is not re-rendered/upscaled
   to invent detail: 864 production pixels are only 432 approved native pixels. */


/* ============================================================
   V1.13.45 — responsive venue, not a phone frame in a browser.
   Width determines composition; viewport height never separates a
   headline from its action. The 12-card hand remains one DOM grid.
   ============================================================ */
:root {
  --app-width: 100%;
  --header-h: 62px;
  --nav-h: 66px;
  --page-pad: 20px;
}
html { scroll-padding-top: 12px; }
body { background: var(--bg); }
#app {
  --app-width: 100%;
  width: 100%;
  max-width: none;
  box-shadow: none;
  background: transparent;
}
.hdr { height: var(--header-h); }
.screen {
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  min-height: calc(100svh - var(--header-h));
  padding: 24px var(--page-pad) calc(var(--nav-h) + 24px + env(safe-area-inset-bottom));
  overflow-wrap: break-word;
}
.screen > .cta { max-width: 360px; margin-inline: auto; }
.screen > .link { margin-inline: auto; }
.foot { width: 100%; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); }

/* A bounded scene and a single content group. No audience cover image:
   its 341x198 plate cannot become a full-height desktop backdrop. */
.screen.venue-lobby {
  max-width: none;
  min-height: min(580px, calc(100svh - var(--header-h) - var(--nav-h) - env(safe-area-inset-bottom)));
  padding: 72px 24px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  isolation: isolate;
}
.venue-lobby::before {
  inset: 0;
  height: auto;
  opacity: 1;
  mask-image: none;
  background: radial-gradient(ellipse at 16% 15%,#74331526,transparent 54%),
              radial-gradient(ellipse at 94% 95%,#690e2524,transparent 54%);
}
.venue-lobby::after, .free-lobby::after {
  inset: 12px auto auto max(0px, calc(50% - 280px));
  width: min(295px, 100%);
  height: 75px;
  background: url('../art/club/spotlight.webp') left top / 295px 75px no-repeat;
  opacity: .62;
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 54%, transparent);
  mix-blend-mode: screen;
  pointer-events: none;
}
.home-screen .lobby-intro, .free-lobby .lobby-intro, .lobby-intro {
  margin: 0;
  padding: 0;
  width: 100%;
}
.lobby-title, .free-lobby .lobby-title {
  font-size: clamp(34px, 8.7vw, 40px);
  line-height: 1.15;
  max-width: 340px;
  margin: 14px auto 0;
  letter-spacing: -.7px;
}
.lobby-subtitle { max-width: 330px; margin-top: 16px; }
.lobby-bottom { margin: 0; width: 100%; max-width: 340px; gap: 8px; }
.lobby-bottom .link { margin: 0; }
:root[data-theme=day] .venue-lobby::before { opacity: .42; }
:root[data-theme=day] .venue-lobby::after { opacity: .1; mix-blend-mode: multiply; }

/* Reflow, never re-deal. CSS-only column changes retain order and focus. */
.screen.play {
  max-width: 840px;
  min-height: 0;
  margin-inline: auto;
}
.builder-actions { margin-top: 8px; }
.builder-actions > .cta { max-width: 360px; }
.screen.play > .cta { max-width: 360px; }
.hand { overflow: visible; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { overflow: visible; }
/* Used cards keep the same row height as unused cards. The assignment marker
   occupies a reserved corner, never overlaps the text or hides the selection. */
.card, .card.used { padding-bottom: 14px; }
.card-assigned { width: 12px; height: 12px; font-size: 8px; bottom: 1px; }
.slot-t, .g-title, .rl, .version-row p { min-width: 0; overflow-wrap: anywhere; }
.g-score { flex: none; }

/* Theatre width is independent of the fixed Comic frame/feet. The source
   pixels, y=480 crop and native-detail DPR ceilings are unchanged. */
.screen.performance-screen {
  max-width: 840px;
  min-height: 0;
  margin-inline: auto;
  padding: 0 0 28px;
  overflow: visible;
}
.comic-stage > .audience-art {
  background-size: 341px 198px;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.performance-line {
  width: calc(100% - 36px);
  max-width: 560px;
  margin: -12px auto 8px;
}
.stage-skip { flex: none; }
.screen.result-screen {
  max-width: 680px;
  min-height: 0;
  padding: 0 var(--page-pad) 32px;
}
.verdict-stage { min-width: 0; }
.result-comic { display: block; }
.comic-verdict .verdict-card { margin: 0 0 20px; }
.result-screen .notes, .result-screen .compare-versions { width: 100%; }

/* Completion is an invitation, not a tall spacer above a distant button.
   The tiny stool plate stays at native CSS dimensions. */
.screen.daily-complete {
  max-width: 840px;
  min-height: 0;
  padding: 36px var(--page-pad) 32px;
  gap: 24px;
}
.completion-message { width: 100%; max-width: 500px; }
.complete-title { max-width: 400px; margin: 0 auto 16px; font-size: 34px; }
.complete-note { margin: 0 0 10px; }
.completion-message > .muted { max-width: 350px; margin: 0 auto; font-size: 14px; }
.completion-message .cta { max-width: 340px; margin: 28px auto 0; }
.completion-message .link { margin: 8px auto 0; }
.empty-stage-art { max-width: 194px; width: 194px; height: auto; }


/* Reading/support surfaces use line length, not screen width, as the limit. */
.more-screen { max-width: 600px; }
.more-screen .menu-list { margin-top: 0; }
.stats-summary { margin-top: 16px; }
.score-chart { max-width: 520px; margin-inline: auto; }
.room-start, .room-pass {
  min-height: min(560px, calc(100svh - var(--header-h) - var(--nav-h)));
}
.sheet { max-width: 560px; width: calc(100% - 32px); }
.sheet .setting-row, .menu-row, .setting-row { min-height: 54px; }
.shareStatus, .backup-status, .restore-success { overflow-wrap: anywhere; }
.document-page #app { width: 100%; max-width: 1040px; }
.document-page .screen { max-width: 680px; min-height: 0; margin-inline: auto; padding: 24px var(--page-pad) 48px; }
.document-page .hdr { height: auto; min-height: var(--header-h); }

@media (max-width: 350px) {
  :root { --header-h: 52px; --page-pad: 16px; }
  .screen.venue-lobby { padding: 56px 22px 48px; }
  .lobby-title, .free-lobby .lobby-title { font-size: 34px; max-width: 290px; }
  .card, .card.used { padding-bottom: 14px; }
  .screen.play { padding-inline: 12px; }
}
/* Short phones: the cards remain >=44px, not shrunk to stickers. Text growth
   may increase document height; no clipped content or nested hand scrolling. */
@media (max-height: 690px) and (max-width: 599px) {
  :root { --header-h: 48px; --nav-h: 54px; }
  .screen.venue-lobby { padding: 44px 22px 36px; }
  .lobby-title, .free-lobby .lobby-title { font-size: 32px; }
  .screen.play { padding-bottom: calc(var(--nav-h) + 10px + env(safe-area-inset-bottom)); }
  .card, .card.used { padding: 5px 4px 12px; }
  .builder-actions { margin-top: 2px; }
  .screen.result-screen { padding-top: 0; }
}
@media (max-height: 610px) and (max-width: 350px) {
  :root { --header-h: 44px; }
  .card, .card.used { padding: 4px 4px 11px; }
  .screen.play { gap: 4px; }
  .structure-hint { display: block; font-size: 10px; margin-top: 3px; line-height: 1.25; }
  .builder-actions { margin-top: 0; }
}

/* Medium: a real tablet composition. Four across, three rows, one bottom nav. */
@media (min-width: 600px) {
  :root { --header-h: 72px; --nav-h: 70px; --page-pad: 24px; }
  #app { width: calc(100% - 48px); max-width: 760px; margin-inline: auto; }
  .hdr { padding-inline: 0; }
  .brand b { font-size: 32px; }
  .foot { max-width: 760px; width: calc(100% - 48px); }
  .screen { padding-top: 32px; }
  .page-title { font-size: 32px; margin-bottom: 28px; }
  .screen.venue-lobby {
    min-height: min(600px, calc(100svh - var(--header-h) - var(--nav-h) - 24px));
    padding: 96px 32px 80px;
  }
  .lobby-title, .free-lobby .lobby-title { font-size: 48px; max-width: 480px; }
  .lobby-subtitle { font-size: 16px; max-width: 400px; }
  .lobby-bottom { max-width: 320px; }
  .venue-lobby::after { top: 24px; left: 12px; }
  .screen.play { padding: 20px 0 calc(var(--nav-h) + 24px); gap: 14px; }
  .builder-intro { max-width: 620px; padding: 4px 12px; margin-inline: auto; }
  .builder-intro .eyebrow { font-size: 11px; margin-bottom: 10px; }
  .setup { font-size: 30px; line-height: 1.18; }
  .structure-hint { max-width: 480px; font-size: 13px; margin-top: 10px; }
  .rack { width: 100%; max-width: 600px; margin-inline: auto; gap: 12px; }
  .rack-one, .rack-two { max-width: 480px; }
  .slot { min-height: 80px; padding: 10px 18px 10px 10px; font-size: 16px; }
  .slot-hint { font-size: 12px; }
  .slot-label { font-size: 10px; }
  .hand-heading { font-size: 11px; margin-bottom: 10px; }
  .hand { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .card, .card.used { min-height: 78px; font-size: 16px; line-height: 1.22; padding: 10px 10px 16px; }
  .card-assigned { width: 14px; height: 14px; font-size: 9px; }
  .builder-actions { margin-top: 4px; }
  .builder-actions .cta, .screen.play > .cta { min-height: 50px; font-size: 18px; }
  .builder-actions .note { font-size: 12px; margin-top: 8px; }
  .comic-stage { min-height: 324px; }
  .performance-line { font-size: 24px; padding: 20px 24px; }
  .screen.performance-screen { max-width: 680px; padding-top: 16px; }
  .screen.result-screen { padding-top: 28px; }
  .verdict-stage { display: grid; grid-template-columns: minmax(170px,.8fr) minmax(0,1.2fr); align-items: center; gap: 16px; margin-bottom: 24px; }
  .verdict-stage .result-comic { width: min(100%,256px); max-width: 256px; margin: 0 auto; }
  .comic-verdict .verdict-card { padding: 24px 20px; margin: 0; }
  .score { font-size: 72px; }
  .critic { margin-top: 24px; }
  .screen.daily-complete { padding-top: 64px; }
  .complete-title { font-size: 44px; max-width: 450px; }
  .completion-message > .muted { font-size: 15px; }
  .palettes { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* Wide: one top navigation, centred 1040px shell, 840px writing surface.
   No cloned mobile nav. Immersive screens keep their three-control header. */
@media (min-width: 1024px) {
  :root { --header-h: 80px; --nav-h: 0px; --page-pad: 24px; }
  #app { max-width: 1040px; width: calc(100% - 64px); }
  .hdr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .hdr.with-nav { grid-template-columns: 44px minmax(128px,1fr) auto 44px; gap: 14px; }
  .hdr.with-nav .brand { justify-content: flex-start; }
  .hdr.with-nav > .foot {
    position: static; transform: none; width: auto; max-width: none;
    height: auto; margin: 0; padding: 0; border: 0;
    display: flex; gap: 8px; background: transparent;
  }
  .hdr.with-nav .tab { flex-direction: row; gap: 8px; font-size: 13px; min-height: 44px; padding: 10px 14px; }
  /* Active nav pigment is supplied by the shared palette rule below. */
  .hdr.with-nav .g-ico { width: 19px; height: 19px; }
  .screen { padding-bottom: 48px; }
  .screen.venue-lobby {
    min-height: min(580px, calc(100svh - var(--header-h) - 24px));
    padding: 96px 64px 80px;
    margin-top: 16px;
  }
  .lobby-title, .free-lobby .lobby-title { font-size: 58px; max-width: 560px; letter-spacing: -1.5px; }
  .venue-lobby::after { left: 60px; top: 30px; }
  .lobby-bottom { max-width: 320px; }
  .screen.play { padding-top: 24px; padding-bottom: 36px; gap: 16px; }
  .setup { font-size: 32px; }
  .card, .card.used { min-height: 80px; font-size: 18px; }
  .screen.performance-screen { max-width: 840px; padding-top: 24px; }
  .comic-stage { min-height: 324px; }
  .screen.result-screen { max-width: 740px; padding-top: 32px; }
  .verdict-stage { grid-template-columns: 256px minmax(0,1fr); gap: 28px; }
  .screen.daily-complete { flex-direction: row; justify-content: center; align-items: center; gap: 48px; padding: 96px 24px 64px; }
  .daily-complete .empty-stage-art { flex: 0 0 194px; }
  .completion-message { max-width: 440px; }
  .room-start, .room-pass { min-height: min(560px,calc(100svh - var(--header-h))); }
}
/* Short wide windows/landscape tablets: reduce whitespace, not control sizes.
   A real phone in landscape may grow vertically instead of clipping cards. */
@media (min-width: 600px) and (max-height: 800px) {
  .screen.play { padding-top: 12px; gap: 10px; }
  .builder-intro { padding-top: 0; padding-bottom: 0; }
  .setup { font-size: 28px; }
  .slot { min-height: 68px; }
  .card, .card.used { min-height: 66px; padding-top: 8px; padding-bottom: 16px; font-size: 16px; }
  .structure-hint { margin-top: 6px; }
  .builder-actions { margin-top: 6px; }
  .comic-stage { min-height: 280px; }
  .screen.daily-complete { padding-top: 40px; }
}
/* Character size follows CSS viewport width, never device pixel density. */

/* Text enlargement may grow both bars. Never overlap labels or cover the last
   action to force an all-visible screenshot; the document may grow instead. */
.hdr { height: auto; min-height: var(--header-h); }
.foot { height: auto; min-height: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
.tab .t-lbl { max-width: 100%; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  .screen { padding-bottom: calc(var(--bottom-space, var(--nav-h)) + 24px); }
  .screen.play { padding-bottom: calc(var(--bottom-space, var(--nav-h)) + 16px); }
  .screen.venue-lobby { padding-bottom: 48px; }
  .screen.performance-screen, .screen.result-screen, .screen.daily-complete { padding-bottom: 32px; }
}
@media (max-height: 610px) and (max-width: 350px) {
  .card, .card.used { padding-top: 2px; }
  .slot { line-height: 1.1; }
}
/* Policy links are controls too: short labels keep a full practical target. */
.document-page a { min-width: 44px; }

/* Retained approved More / recovery presentation. */
.screen.more-screen{max-width:600px;padding-top:24px;}.more-screen .menu-list{margin:0;}.more-screen .menu-row{min-height:54px;}.more-screen .menu-utilities{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;}.more-screen .more-footer{border-top:1px solid var(--line);margin-top:20px;padding-top:6px;}.more-footer .links{margin:4px 0;}.more-footer .studio-sig{margin:4px 0 0;}.studio-sig .publisher-name{font:650 13px/1.4 var(--font-ui);letter-spacing:.12em;text-transform:none;}
.screen.backup-screen{max-width:640px;}.backup-screen .page-title{margin-bottom:18px;}.backup-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 0;border:0;background:none;color:var(--muted);font-size:14px;text-align:left;margin:0 0 16px;}.backup-back svg{width:18px;height:18px;}.backup-screen .backup-intro{margin:0 0 10px;font-size:16px;line-height:1.6;color:var(--ink);}.backup-screen .backup-local{margin:0 0 24px;font-size:14px;line-height:1.6;color:var(--muted);}.backup-actions{display:grid;gap:12px;}.backup-actions .cta{max-width:none;margin:0;}.backup-actions .cta svg{width:20px;height:20px;}.backup-warning{font-size:14px;line-height:1.6;color:var(--muted);margin:14px 0 8px;}.backup-screen .note{text-align:left;font-size:13px;line-height:1.5;}.backup-screen .restore-success{font-size:15px;line-height:1.6;border-left:2px solid var(--gold);padding:10px 12px;margin:16px 0 8px;}.backup-screen .backup-undo{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 8px;padding:8px 0;}.backup-screen .backup-help{border-top:1px solid var(--line);margin-top:24px;}.backup-help details{border-bottom:1px solid var(--line);}.backup-help summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:54px;list-style:none;cursor:pointer;font:500 17px/1.4 var(--font-joke);padding:13px 0;color:var(--ink);}.backup-help summary::-webkit-details-marker{display:none;}.backup-help summary::after{content:'+';font:20px/1 var(--font-ui);color:var(--gold);}.backup-help details[open] summary::after{content:'−';}.backup-help .help-copy{padding:0 0 18px;font-size:15px;line-height:1.65;color:var(--muted);}.backup-help .help-copy p{margin:0 0 12px;}.backup-help .help-copy p:last-child{margin-bottom:0;}.backup-help .help-copy li{margin:0 0 8px;}.backup-help .help-copy ol{padding-left:22px;margin:0 0 12px;}
@media(min-width:600px){.screen.more-screen{padding-top:32px;}}@media(min-width:1024px){.screen.more-screen{padding-top:24px;}.backup-screen .page-title{font-size:34px;}}

/* V1.13.45 — spoken setup, explicit /10, and earned theatre reactions. */
.setup-toolbar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;width:100%;margin:0 0 4px;min-height:44px;}
.setup-toolbar .eyebrow{margin:0!important;padding:0;}.setup-read{color:var(--gold);justify-self:end;}.setup-read[aria-pressed=true]{border:1px solid var(--gold);background:var(--surface);}.setup-read svg{width:19px;height:19px;}
.setup-voice-note{font:12px/1.45 var(--font-ui);color:var(--muted);text-align:center;max-width:460px;margin:6px auto 0;}
.score{white-space:nowrap;}.score-denominator{font-size:.42em;line-height:1;margin-left:.08em;color:inherit;}.g-score{white-space:nowrap;font-size:18px;}.stats-summary dd{white-space:nowrap;font-size:clamp(25px,6vw,38px);}
@media(max-height:690px) and (max-width:599px){.setup-toolbar{margin-bottom:0;}.builder-intro .setup{font-size:20px;}}
.theatre-host{position:relative;isolation:isolate;}
.theatre-fx{position:absolute;inset:-18px -12px -12px;z-index:0;overflow:hidden;pointer-events:none;contain:paint;border-radius:22px;}
.theatre-host>.comic-figure,.theatre-host>.verdict-card,.theatre-host>.reveal-row,.theatre-host>.critic,.theatre-host>.cta{position:relative;z-index:2;}
.theatre-wash{position:absolute;inset:0;opacity:0;animation:theatre-wash var(--fx-duration) ease-in-out both;background:radial-gradient(ellipse at 4% 20%,#f7b94064,transparent 46%),radial-gradient(ellipse at 95% 28%,#bc65df61,transparent 45%),radial-gradient(ellipse at 50% 95%,#40cbd544,transparent 58%);}
.theatre-beam{position:absolute;top:-10%;width:48%;height:125%;transform-origin:50% 0;opacity:0;clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);background:linear-gradient(var(--light),transparent 90%);animation:theatre-beam var(--fx-duration) ease-in-out both;}
.theatre-beam.left{left:-8%;--turn:-18deg;--light:#e8b35140;}.theatre-beam.right{right:-8%;--turn:18deg;--light:#65ceea40;}.theatre-beam.middle{left:26%;--turn:8deg;--light:#c977df30;}
.theatre-balloon{position:absolute;left:var(--x);bottom:-85px;width:clamp(23px,4vw,36px);height:clamp(31px,5.5vw,47px);border-radius:49% 49% 46% 46%;background:radial-gradient(ellipse at 30% 24%,#fff9,transparent 24%),radial-gradient(ellipse at 35% 30%,var(--balloon),color-mix(in srgb,var(--balloon) 50%,#171013));box-shadow:inset -3px -4px 8px #0003;opacity:0;animation:theatre-balloon var(--flight) cubic-bezier(.18,.5,.4,1) var(--delay) both;}
.theatre-balloon:before{content:"";position:absolute;left:calc(50% - 3px);top:calc(100% - 1px);width:6px;height:6px;background:var(--balloon);clip-path:polygon(50% 0,100% 100%,0 100%);}
.theatre-balloon:after{content:"";position:absolute;top:calc(100% + 4px);left:50%;width:8px;height:35px;border-left:1px solid #ddcca58c;border-radius:40%;}
@keyframes theatre-wash{0%,100%{opacity:0;}16%,74%{opacity:1;}}
@keyframes theatre-beam{0%,100%{opacity:0;transform:rotate(calc(var(--turn) * -1));}22%,68%{opacity:.8;}85%{transform:rotate(var(--turn));}}
@keyframes theatre-balloon{0%{opacity:0;transform:translate3d(0,0,0) rotate(-5deg);}12%{opacity:.94;}80%{opacity:.85;}100%{opacity:0;transform:translate3d(var(--drift),calc(var(--rise) * -1),0) rotate(7deg);}}
.theatre-fx.calm .theatre-wash{animation:none;opacity:.48;}.theatre-fx.calm .theatre-beam{animation:none;opacity:.28;transform:rotate(var(--turn));}.theatre-fx.calm .theatre-balloon{animation:none;opacity:.55;bottom:auto;top:var(--rest);transform:none;}
:root[data-motion=reduce] .theatre-fx *{animation:none!important;transition:none!important;}:root[data-motion=reduce] .theatre-wash{opacity:.48;}:root[data-motion=reduce] .theatre-beam{opacity:.28;transform:rotate(var(--turn));}:root[data-motion=reduce] .theatre-balloon{opacity:.55;bottom:auto;top:var(--rest);transform:none;}
@media(prefers-reduced-motion:reduce){.theatre-fx *{animation:none!important;transition:none!important;}.theatre-wash{opacity:.48;}.theatre-beam{opacity:.28;transform:rotate(var(--turn));}.theatre-balloon{opacity:.55;bottom:auto;top:var(--rest);transform:none;}}
:root[data-theme=day] .theatre-wash{mix-blend-mode:multiply;}:root[data-theme=day] .theatre-beam{mix-blend-mode:multiply;}

/* A score has a denominator; its summary cell must grow with text zoom. */
.stats-summary{grid-template-columns:repeat(auto-fit,minmax(min(100%,7em),1fr));}

/* Version identity belongs in the recovery screen, not the gameplay HUD. */
.backup-screen .backup-version-note{margin:0 0 24px;padding:12px 14px;border-left:2px solid var(--gold);color:var(--ink);background:color-mix(in srgb,var(--gold) 5%,transparent);font-size:14px;line-height:1.65;overflow-wrap:anywhere;}
.backup-screen #backup-date,.backup-screen #buStatus{overflow-wrap:anywhere;}

/* Full-joke speech controls. No changes to the all-cards-visible builder.
   The static script is always reachable; errors never advance a silent timer. */
.performance-progress{margin:10px 18px 0;text-align:center;color:var(--muted);font-size:12px;line-height:1.5}
.performance-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 16px;margin:4px 16px 0}
.performance-controls .link{margin:0;min-height:44px;padding:10px 12px;color:var(--ink);font-size:14px}
.performance-voice-note{max-width:580px;margin:8px auto;padding:0 18px;text-align:center;color:var(--muted);font-size:14px;line-height:1.5}
.performance-retry{align-self:center;min-height:44px;padding:10px 16px;color:var(--ink)}
.performance-full-text{width:calc(100% - 36px);max-width:640px;align-self:center;margin:8px auto 18px}
.performance-full-text summary{text-align:center;color:var(--ink);padding:12px;min-height:44px}
.performance-full-text>p{font:19px/1.45 var(--font-joke);color:var(--ink);overflow-wrap:anywhere}
.hear-joke{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px}
.hear-joke .g-ico{width:20px;height:20px}
#performanceRetry[hidden],#performanceVoiceStatus[hidden]{display:none}
@media(max-width:350px){.performance-full-text>p{font-size:17px}.performance-controls{gap:4px}.performance-progress{font-size:11px}}

/* 1.13.45 — visible actions; zero auto-posting; non-obscuring save/update notices. */
.share-game { display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px; }
.share-game-row { color:var(--gold);border-bottom:1px solid var(--line);margin-bottom:12px; }
.result-share-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:560px;margin:8px auto; }
.result-share-actions .cta { width:100%;margin:0;min-height:48px;font-size:16px; }
.share-dialog .share-explanation { font:14px/1.5 var(--font-ui);color:var(--muted);margin-bottom:14px; }
.share-preview { display:block;width:100%;resize:vertical;min-height:110px;max-height:35svh;background:var(--paper);color:var(--paper-ink);border:1px solid var(--line);border-radius:8px;padding:14px;font:16px/1.4 var(--font-ui); }
.share-dialog-actions { display:grid;gap:10px;margin-top:18px; }.share-dialog-actions .cta { margin:0; }
.share-feedback { min-height:2.8em;font:13px/1.45 var(--font-ui);overflow-wrap:anywhere; }
.update-tools { margin:20px auto;text-align:center; }.update-tools p{font:12px/1.4 var(--font-ui);margin:0;}
.save-notice,.update-notice { position:relative;z-index:20;max-width:680px;margin:16px auto calc(var(--nav-h,66px) + 20px);padding:14px 18px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;font:14px/1.4 var(--font-ui); }
.update-notice { margin-bottom:12px; }.save-notice .link,.update-notice .link{display:inline-flex;min-height:44px;margin:4px 12px 0 0;}
.theatre-fx.settled .theatre-wash{animation:none;opacity:.32;}
.theatre-fx.settled .theatre-beam{animation:none;opacity:.18;transform:rotate(var(--turn));}
.theatre-fx.settled .theatre-balloon{animation:none;opacity:.32;bottom:auto;top:var(--rest);transform:none;}
@media(max-width:420px){.result-share-actions{grid-template-columns:1fr;gap:8px;}.share-dialog .sheet-inner{padding:16px;}}
/* 1.13.45: one shared navigation and one responsive system in every browser.
   Device density changes raster sampling, not the character's CSS size.
   Never reset the player's chosen theme to conceal a browser-local preference. */
:root { --gafflo-css-build: "1.13.56"; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button { -webkit-appearance: none; appearance: none; }
.foot { grid-template-columns: repeat(5,minmax(0,1fr)); }
.tab { min-width: 0; }
.tab.nav-share .t-lbl { overflow-wrap: normal; }
@media (max-width: 599px) {
  .tab.nav-share .t-lbl { max-width: 58px; line-height: 1.15; }
}
@media (min-width: 1024px) {
  .hdr.with-nav { grid-template-columns: 44px minmax(115px,1fr) auto 44px; gap: 10px; }
  .hdr.with-nav > .foot { gap: 4px; }
  .hdr.with-nav .tab { padding-inline: 11px; }
  .hdr.with-nav .tab.nav-share .t-lbl { white-space: nowrap; }
}

/* V1.13.45 — visible utility controls. One navigation, one utility group.
   A compact second row on phones avoids hiding preferences behind More.
   Dialog changes update live state, never remount the performance or card hand. */
#app:not(.document-page #app) .hdr { height:auto; min-height:52px; grid-template-columns:44px minmax(0,1fr) 44px; grid-template-rows:auto auto; row-gap:4px; padding-top:6px; padding-bottom:8px; }
.hdr > .brand, .hdr > .header-title { grid-column:2; grid-row:1; }
.hdr > .icon-button { grid-column:1; grid-row:1; }
.hdr > .header-utilities { grid-column:1/-1; grid-row:2; justify-self:center; }
.header-utilities { display:flex; align-items:center; gap:6px; max-width:100%; }
.utility-control { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; border:1px solid var(--line); background:color-mix(in srgb,var(--gold) 4%,var(--bg)); color:var(--ink); border-radius:999px; font:600 12px/1.2 var(--font-ui); padding:8px 12px; }
.utility-control.music-control { min-width:108px; }
.utility-control.icon-button { padding:8px; width:44px; min-width:44px; }
.utility-control .g-ico { width:18px; height:18px; flex:none; color:var(--gold); }
.utility-control:hover { border-color:var(--gold); background:color-mix(in srgb,var(--gold) 9%,var(--bg)); }
.music-control[aria-pressed=false] { color:var(--muted); }
.utility-control[aria-expanded=true] { box-shadow:0 0 0 1px var(--gold); }
.utility-sheet, .share-dialog { color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:20px; max-height:calc(100dvh - 24px); padding:0; width:calc(100% - 24px); max-width:540px; }
.utility-sheet::backdrop, .share-dialog::backdrop { background:rgba(0,0,0,.68); }
.utility-sheet .sheet-inner, .share-dialog .sheet-inner { padding:18px 20px 22px; }
.utility-sheet .hp-head, .share-dialog .hp-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.utility-sheet .hp-head h2, .share-dialog .hp-head h2 { font:25px/1.15 var(--font-joke); }
.utility-sheet .setting-description { font-size:12px; line-height:1.45; }
.utility-sheet .setting-row { min-height:70px; }
.voice-details { border-top:1px solid var(--line); margin-top:20px; padding-top:18px; }
.voice-details h3 { font:600 15px/1.3 var(--font-ui); margin:0 0 10px; }
.voice-details p { font:12px/1.5 var(--font-ui); color:var(--muted); margin-bottom:10px; overflow-wrap:anywhere; }
.ryan-consent { display:flex; gap:10px; align-items:flex-start; font:12px/1.5 var(--font-ui); background:color-mix(in srgb,var(--gold) 6%,var(--bg)); border:1px solid var(--line); padding:12px; border-radius:10px; }
.ryan-consent input { min-width:24px; width:24px; height:24px; margin:0; accent-color:var(--gold); }
.ryan-consent { min-height:44px; cursor:pointer; }
.voice-test-actions { display:flex; flex-wrap:wrap; gap:4px; }
.voice-test-actions button { min-height:44px; }
.voice-test-actions button:disabled { opacity:.65; text-decoration:none; }
.critic-voice-note { font:12px/1.4 var(--font-ui); margin-top:12px; }
.share-explanation { color:var(--muted); font:14px/1.5 var(--font-ui); margin:6px 0 18px; }
.native-share { margin-bottom:16px; font:600 15px/1.3 var(--font-ui); }
.share-destinations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.share-destination { display:flex; align-items:center; justify-content:flex-start; gap:10px; text-decoration:none; min-height:58px; border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--surface); color:var(--ink); font:500 14px/1.3 var(--font-ui); overflow-wrap:anywhere; }
.share-destination:hover { border-color:var(--gold); }
.share-target-symbol { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:color-mix(in srgb,var(--gold) 12%,var(--bg)); color:var(--gold); font:700 17px/1 var(--font-ui); flex:none; }
.share-service-note { font:12px/1.45 var(--font-ui); color:var(--muted); margin-top:15px; }
.share-preview-details { margin-top:12px; border-top:1px solid var(--line); }
.share-preview-details summary { cursor:pointer; min-height:44px; padding-block:12px; color:var(--muted); font-size:13px; }
.share-preview { width:100%; max-width:100%; border:1px solid var(--line); color:var(--ink); background:var(--surface); border-radius:8px; font:13px/1.5 var(--font-ui); padding:12px; resize:vertical; }
.share-feedback { color:var(--gold); font-size:13px; margin-top:12px; }
.shared-joke-screen { display:flex; flex-direction:column; gap:22px; }
.shared-setup { font:32px/1.25 var(--font-joke); text-align:center; overflow-wrap:anywhere; }
.shared-punchline { font:24px/1.35 var(--font-joke); padding:24px; background:var(--paper); color:var(--paper-ink); border-radius:10px; overflow-wrap:anywhere; }
@media (max-width:350px) {
  .header-utilities { gap:4px; }
  .utility-control { padding-inline:10px; font-size:11px; }
  .utility-control.music-control { min-width:100px; }
  .utility-sheet .sheet-inner, .share-dialog .sheet-inner { padding:12px 14px 18px; }
  .share-destinations { gap:7px; }
  .share-destination { gap:6px; padding:8px; font-size:13px; }
  .shared-setup { font-size:26px; }
}
@media (min-width:600px) and (max-width:1023px) {
  #app:not(.document-page #app) .hdr { grid-template-columns:44px minmax(0,1fr) auto; grid-template-rows:auto; padding-block:12px; }
  .hdr > .header-utilities { grid-column:3; grid-row:1; }
  .hdr > .brand { justify-content:flex-start; }
}
@media (min-width:1024px) {
  #app:not(.document-page #app) .hdr { grid-template-rows:auto auto; grid-template-columns:44px minmax(0,1fr) auto; gap:8px; padding-block:12px; }
  .hdr > .brand { justify-content:flex-start; }
  .hdr > .header-utilities { grid-row:1; grid-column:3; justify-self:end; }
  .hdr.with-nav > .foot { grid-row:2; grid-column:1/-1; justify-self:end; }
  .hdr.immersive-header { grid-template-rows:auto; }
}
@media (min-width:1200px) {
  #app:not(.document-page #app) .hdr.with-nav { grid-template-columns:44px auto 1fr auto; grid-template-rows:auto; gap:8px; }
  .hdr.with-nav > .foot { grid-row:1; grid-column:3; justify-self:end; gap:2px; }
  .hdr.with-nav .tab { font-size:12px; gap:5px; padding-inline:8px; }
  .hdr.with-nav > .header-utilities { grid-row:1; grid-column:4; }
  .hdr.with-nav .brand b { font-size:29px; }
}

/* V1.13.45 — one palette system, including Original in Day mode.
   Theme JS supplies solid sRGB tokens so surface/CTA colour is consistent
   without transparent colour-mix layers or light-mode bitmap blend tricks. */
html, body { background:var(--bg); color:var(--ink); }
#app { background:var(--bg); }
#app::before { display:none; }
.hdr, .foot { background:var(--chrome); border-color:var(--line); }
.screen.venue-lobby { background:transparent; }
.venue-lobby::before, .free-lobby::before {
  content:""; inset:0; width:auto; height:auto; opacity:1;
  background:radial-gradient(ellipse at 9% 8%,var(--venue-glow-a),transparent 55%),
    radial-gradient(ellipse at 96% 92%,var(--venue-glow-b),transparent 58%),
    linear-gradient(140deg,var(--venue-a),var(--bg) 53%,var(--venue-b));
  mask-image:none; -webkit-mask-image:none; mix-blend-mode:normal;
}
/* The small dark spotlight plate becomes a grey rectangle on a light surface.
   Keep the approved plate in Night; in Day use only two-colour venue lighting. */
:root[data-theme=day] .venue-lobby::after,
:root[data-theme=day] .free-lobby::after { display:none; }
:root[data-theme=night] .venue-lobby::after { display:block; }
:root[data-theme=day] .venue-lobby::before { opacity:1; }
.utility-control { border-color:var(--line); background:var(--control-fill); color:var(--ink); }
.utility-control .g-ico { color:var(--gold); }
.utility-control:hover { background:var(--control-hover); border-color:var(--gold); }
.utility-control[aria-expanded=true] { outline:2px solid var(--focus); outline-offset:2px; box-shadow:none; }
/* A clearly selected primary destination, still labelled and keyboard-visible. */
.tab.on { color:var(--nav-active-ink); background:var(--nav-active); }
.tab.on .g-ico { color:var(--nav-active-ink); }
.tab.on:first-child .g-ico { fill:var(--nav-active-ink); stroke:var(--nav-active); }
.cta:not(.ghost):not([aria-disabled=true]) {
  color:var(--on-accent); border-color:var(--accent-low);
  background:linear-gradient(150deg,var(--accent),var(--accent-low));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17);
}
.cta:not(.ghost):not([aria-disabled=true]):hover { background:var(--accent-low); }
.cta.ghost { color:var(--ink); border-color:var(--line); background:transparent; }
.cta[aria-disabled=true] { background:var(--surface); color:var(--muted); border-color:var(--line); }
.slot { border-color:var(--line); }
.slot.active-slot { outline-color:var(--focus); }
.slot.filled, .card { color:var(--paper-ink); }
.seg button.on { background:var(--nav-active); color:var(--nav-active-ink); border-color:var(--nav-active); }
.pal.on { border-color:var(--focus); outline:1px solid var(--focus); outline-offset:1px; }
.pal .pn { color:var(--ink); }
.pal-check { color:var(--gold); }
.setting-row, .menu-row { background:transparent; }
.setting-row:hover, .menu-row:hover { background:var(--control-fill); }
[aria-checked=true] .switch-mark { background:var(--accent); border-color:var(--accent-low); }
[aria-checked=true] .switch-mark::before { background:var(--on-accent); }
.utility-sheet, .share-dialog { background:var(--bg); color:var(--ink); border-color:var(--line); }
.share-destination { background:var(--control-fill); border-color:var(--line); color:var(--ink); }
.share-destination:hover { background:var(--control-hover); }
.share-target-symbol { background:var(--surface); color:var(--gold); }
.score-bar i { background:linear-gradient(135deg,var(--accent),var(--accent-low)); border-color:var(--accent-low); }
.appearance-current { margin:10px 0 14px; font:600 13px/1.5 var(--font-ui); color:var(--gold); }
.appearance-save-note { color:var(--muted); font:13px/1.5 var(--font-ui); }
/* Never put Day-coloured chrome or dark Day ink on the intentionally dark stage. */
#app[data-screen=performing], #app[data-screen=result], #app[data-screen=bankresult], #app[data-screen=dailycomplete] {
  --bg:#050403; --surface:#11100e; --ink:#f5ecdb; --muted:#c4b9a9;
  --gold:#dcba76; --line:#8a7760; --focus:#f2c977;
  --chrome:#0b0806; --control-fill:#211912; --control-hover:#302318;
  background:var(--bg); color:var(--ink);
}
@media(forced-colors:active){
  .tab.on,.seg button.on{outline:2px solid Highlight;outline-offset:-2px;}
  .cta,.utility-control{border:1px solid ButtonText;}
  .pal.on{outline:2px solid Highlight;}
}
/* Dissolve the Day venue into the page; no hard tinted photograph/canvas edge. */
:root[data-theme=day] .venue-lobby::before {
  -webkit-mask-image:linear-gradient(#000 0%,#000 60%,transparent 100%);
  mask-image:linear-gradient(#000 0%,#000 60%,transparent 100%);
}

/* V1.13.45 — modern comedy club / tactile writer's room.
   Scene composition only. Keep palette tokens, Comic crop, game order and
   native document scrolling. No remote assets, font downloads or new timers. */
.screen.home-screen.club-home {
  display:grid; grid-template-columns:minmax(0,1fr); align-items:center;
  max-width:1040px; min-height:0; gap:16px; margin:0 auto;
  padding:32px 24px calc(var(--bottom-space,var(--nav-h)) + 24px + env(safe-area-inset-bottom));
}
:root[data-theme] .home-screen.club-home::before {
  inset:0; opacity:1; mask-image:none; -webkit-mask-image:none;
  background:radial-gradient(ellipse at 88% 52%,var(--venue-glow-a),transparent 62%),
    linear-gradient(125deg,var(--bg) 28%,var(--venue-a));
}
:root[data-theme] .home-screen.club-home::after { display:none; }
.club-home-copy { position:relative; z-index:2; min-width:0; }
.club-home .lobby-intro { padding:0; margin:0 auto; max-width:540px; text-align:center; }
.club-home .eyebrow { margin:0 0 14px; color:var(--gold); font:600 11px/1.5 var(--font-ui); letter-spacing:.16em; text-align:inherit; }
.club-home .lobby-title { max-width:520px; margin:0 auto; font:clamp(32px,7vw,46px)/1.12 var(--font-joke); letter-spacing:-.025em; text-wrap:balance; }
.club-home .lobby-challenge { max-width:470px; margin:24px auto 0; color:var(--ink); font:700 clamp(23px,4vw,30px)/1.25 var(--font-ui); text-wrap:balance; opacity:1; }
.club-home .challenge-question { display:block; }
.club-home .challenge-proof { display:block; margin-top:8px; color:var(--gold); font:800 clamp(36px,7.5vw,52px)/1.08 var(--font-ui); letter-spacing:-.025em; }
.club-home .lobby-bottom { max-width:340px; width:100%; margin:24px auto 0; gap:4px; align-items:center; }
.club-home .lobby-bottom .cta { width:100%; min-height:52px; margin:0; font-size:17px; }
.club-home .lobby-bottom .link { min-height:44px; margin:0; font-size:14px; opacity:1; }
.club-home-stage {
  position:relative; display:grid; place-items:end center; min-width:0; width:100%;
  max-width:340px; margin:0 auto; padding:16px 12px 10px;
  background:radial-gradient(ellipse at 50% 20%,var(--venue-glow-b),transparent 70%);
}
.club-home-stage::after { content:""; position:absolute; bottom:4px; left:16%; right:16%; height:1px; background:var(--line); }
.club-home-stage .home-comic { width:176px; max-width:100%; margin:0; }

/* One complete hand. Text determines height, including on short phones. */
.screen.play.writer-screen { width:100%; max-width:1040px; min-height:0; gap:16px; padding:20px 16px calc(var(--bottom-space,var(--nav-h)) + 24px + env(safe-area-inset-bottom)); background:var(--bg); }
.writer-board { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; width:100%; min-width:0; }
.screen.play.writer-screen .builder-intro { width:100%; max-width:none; margin:0; padding:0; }
.screen.play.writer-screen .setup { margin:12px 0 0; font-size:clamp(23px,4vw,32px); line-height:1.25; }
.screen.play.writer-screen .setup-toolbar { margin:0; }
.writer-screen .structure-hint { display:block; max-width:520px; margin:12px auto 0; color:var(--muted); font:13px/1.5 var(--font-ui); }
.writer-rack { min-width:0; }
.writer-label, .writer-screen .hand-heading { margin:0 0 10px; color:var(--muted); font:600 11px/1.5 var(--font-ui); letter-spacing:.1em; text-transform:uppercase; text-align:left; }
.writer-screen .rack { width:100%; max-width:none; gap:8px; margin:0; }
.screen.play.writer-screen .slot { height:auto; min-height:76px; padding:10px 8px; gap:6px; border-radius:8px; border-color:var(--line); font:16px/1.3 var(--font-joke); }
.writer-screen .slot-number { display:grid; place-items:center; width:22px; height:22px; flex:none; border:1px solid currentColor; border-radius:50%; font:600 11px/1 var(--font-ui); color:var(--muted); }
.writer-screen .slot-hint { font:12px/1.35 var(--font-ui); }
.screen.play.writer-screen .slot.filled { background:var(--paper); color:var(--paper-ink); border:1px solid #baa17e; box-shadow:0 2px 0 #0002; padding:10px 8px; }
.screen.play.writer-screen .slot.filled .slot-label { margin:0; color:var(--paper-ink); font:600 10px/1.3 var(--font-ui); letter-spacing:.04em; padding-inline:8px; }
.writer-screen .slot.filled .slot-number { color:var(--paper-ink); }
.screen.play.writer-screen .slot.filled .slot-t { position:static; width:100%; height:auto; margin:0; clip-path:none; overflow:visible; text-align:center; }
.writer-screen .slot-x { top:6px; right:5px; opacity:1; }
.writer-screen .slot-x svg { width:12px; height:12px; }
.writer-screen .slot.active-slot { outline:3px solid var(--focus); outline-offset:3px; background:var(--surface); }
.writer-screen .hand { gap:8px; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; }
.writer-screen .card, .writer-screen .card.used { min-height:76px; padding:12px 8px 24px; background:var(--paper); color:var(--paper-ink); border:1px solid #baa17e; border-radius:8px; font:16px/1.3 var(--font-joke); box-shadow:0 3px 0 #0002; opacity:1; }
:root[data-theme] .writer-screen .card.used { background:var(--paper); border-color:var(--paper-ink); box-shadow:inset 0 0 0 1px var(--paper-ink),0 3px 0 #0002; }
.writer-screen .card-assigned { width:18px; height:18px; bottom:4px; right:5px; background:var(--paper-ink); color:var(--paper); font:700 10px/1 var(--font-ui); }
.writer-screen .builder-actions { margin:0; padding-top:4px; gap:8px; }
.writer-screen .builder-actions > .cta { width:100%; max-width:360px; min-height:50px; margin:0; font-size:17px; }
.writer-screen .builder-actions .note { max-width:480px; margin:0; font:12px/1.5 var(--font-ui); }
.writer-screen .builder-actions .new-hand { margin:0; }
.writer-screen .beat-to { margin:14px 0 0; }
@media (hover:hover) and (pointer:fine) {
  .writer-screen .card:hover { transform:translateY(-2px); border-color:var(--paper-ink); box-shadow:0 5px 0 #0002; }
  .writer-screen .card:active { transform:translateY(1px); box-shadow:0 1px 0 #0002; }
}

/* A quiet stage, a readable caption, controls in a separate reading area.
   Comic PNGs still use the one shared frame above, at <=256 CSS pixels. */
.screen.performance-screen.showtime-screen { max-width:960px; padding:20px 16px 40px; background:var(--bg); }
.showtime-scene { display:grid; grid-template-columns:minmax(0,1fr); border:1px solid var(--line); border-radius:16px; background:#100b09; }
.showtime-screen .comic-stage { min-height:262px; border-radius:15px 15px 0 0; background:radial-gradient(ellipse at 50% 16%,#71412666,transparent 72%),linear-gradient(90deg,#281017,#100b09 30%,#100b09 70%,#281017); }
.showtime-screen .comic-stage::before, .showtime-screen .comic-stage::after { width:12%; background:repeating-linear-gradient(90deg,#281017,#411320 18px,#251019 36px); filter:none; }
.showtime-screen .stage-comic { width:256px; max-width:100%; margin-bottom:12px; }
.showtime-screen .stage-light { inset:0 12% 10%; background:radial-gradient(ellipse at 50% 10%,#ffe1a942,transparent 66%); }
.performance-caption { min-width:0; padding:4px 16px 22px; }
.showtime-screen .performance-progress { min-height:18px; margin:8px 0 12px; color:var(--gold); font:600 11px/1.5 var(--font-ui); letter-spacing:.12em; text-align:center; }
.showtime-screen .performance-line { width:100%; max-width:none; min-height:100px; margin:0; padding:20px 18px; display:grid; place-items:center; border:1px solid #cbb28b; border-radius:10px; background:var(--paper); color:var(--paper-ink); box-shadow:0 3px 0 #0003; font:24px/1.4 var(--font-joke); }
.showtime-screen .performance-line.punchline-beat { border-color:var(--gold); box-shadow:0 3px 0 #0003; }
.showtime-notes { width:100%; max-width:640px; margin:12px auto 0; }
.showtime-screen .performance-controls { margin:0; padding:0; gap:8px 24px; }
.showtime-screen .performance-controls .link { min-height:44px; margin:0; }
.showtime-screen .performance-full-text { width:100%; max-width:none; margin:12px 0 0; padding:0 4px; border-top:1px solid var(--line); }
.showtime-screen .performance-full-text summary { min-height:44px; padding-block:12px; }
.showtime-screen .full-joke-setup, .showtime-screen .full-joke-punchline { font:19px/1.5 var(--font-joke); }
.showtime-screen .performance-voice-note { margin:8px auto; font:13px/1.5 var(--font-ui); }

/* Reaction, score and critique belong to the same panel. The score and
   all actor/content children stay above the existing celebration effects. */
.screen.result-screen.club-verdict { max-width:840px; padding:20px 16px 40px; }
.club-verdict .verdict-stage { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-areas:"comic score" "critic critic"; align-items:center; gap:16px; padding:20px 16px; margin:0 0 20px; border:1px solid var(--line); border-radius:16px; background:radial-gradient(ellipse at 20% 0,#703f263d,transparent 70%),#100b09; }
.club-verdict .verdict-stage > .result-comic { grid-area:comic; width:100%; max-width:176px; margin:0 auto; align-self:center; }
.verdict-score { grid-area:score; min-width:0; position:relative; z-index:2; text-align:left; }
.club-verdict .verdict-score .eyebrow { margin:0 0 8px; font:600 10px/1.5 var(--font-ui); color:var(--gold); letter-spacing:.1em; text-align:inherit; }
.club-verdict .score { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 4px; font-size:clamp(56px,12vw,76px); line-height:1; margin:0; letter-spacing:-.04em; }
.club-verdict .score-denominator { margin-left:0; font:400 .38em/1 var(--font-ui); color:var(--muted); letter-spacing:0; }
.club-verdict .score-cap { font:20px/1.25 var(--font-joke); margin:10px 0 0; }
.club-verdict .verdict-card { grid-area:critic; min-width:0; margin:0; padding:16px 0 0; background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; }
.club-verdict .critic { max-width:560px; margin:0 auto; color:var(--ink); font:21px/1.45 var(--font-joke); text-wrap:balance; }
.club-verdict .critic-note { max-width:560px; margin:12px auto 0; color:var(--muted); font:13px/1.5 var(--font-ui); }
.club-verdict .challenge-bonus { font:12px/1.5 var(--font-ui); }
.verdict-actions { width:100%; max-width:560px; margin:0 auto; display:grid; gap:12px; }
.verdict-actions > .cta { width:100%; max-width:none; min-height:50px; margin:0; font-size:17px; }
.verdict-actions > .share-joke-primary { min-height:56px; gap:10px; font:600 18px/1.3 var(--font-ui); }
.result-keep-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.result-keep-actions .cta { min-width:0; width:100%; min-height:48px; margin:0; padding:12px 8px; font:600 14px/1.4 var(--font-ui); overflow-wrap:anywhere; }
.verdict-more-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:0 20px; }
.verdict-more-actions .link { min-height:44px; margin:0; font:14px/1.4 var(--font-ui); }
.club-verdict .result-notes { max-width:680px; margin:12px auto; border-top:1px solid var(--line); padding-top:4px; }
.club-verdict .result-notes summary { min-height:44px; padding-block:12px; }

@media (max-width:350px) {
  .screen.home-screen.club-home { padding:24px 18px calc(var(--bottom-space,var(--nav-h)) + 20px + env(safe-area-inset-bottom)); gap:8px; }
  .club-home .lobby-challenge { margin-top:16px; }
  .club-home .lobby-bottom { margin-top:20px; }
  .club-home-stage .home-comic { width:144px; }
  .screen.play.writer-screen { padding-inline:12px; }
  .writer-board { gap:16px; }
  .writer-screen .hand { gap:6px; }
  .writer-screen .card, .writer-screen .card.used { font-size:15px; padding-inline:6px; }
  .screen.play.writer-screen .slot { font-size:15px; padding-inline:6px; }
  .screen.result-screen.club-verdict, .screen.performance-screen.showtime-screen { padding-inline:12px; }
  .club-verdict .verdict-stage { padding:16px 12px; gap:12px; }
  .club-verdict .score-cap { font-size:18px; }
  .club-verdict .critic { font-size:19px; }
  .result-keep-actions .cta { font-size:13px; }
}
@media (min-width:600px) {
  .screen.home-screen.club-home { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; padding:48px 24px calc(var(--bottom-space,var(--nav-h)) + 32px + env(safe-area-inset-bottom)); }
  .club-home .lobby-intro, .club-home .lobby-title, .club-home .lobby-challenge { text-align:left; margin-left:0; }
  .club-home .lobby-title { font-size:40px; }
  .club-home .lobby-bottom { margin-left:0; align-items:flex-start; }
  .club-home-stage { padding:32px 0 20px; align-self:stretch; align-content:center; }
  .club-home-stage .home-comic { width:256px; }
  .screen.play.writer-screen { padding-inline:0; padding-top:28px; }
  .writer-screen .hand { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
  .writer-screen .card, .writer-screen .card.used { min-height:88px; font-size:17px; }
  .screen.result-screen.club-verdict { padding:28px 16px 48px; }
  .club-verdict .verdict-stage { grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr); grid-template-areas:"comic score" "comic critic"; padding:28px; gap:20px 28px; }
  .club-verdict .verdict-stage > .result-comic { max-width:256px; }
  .club-verdict .verdict-score .eyebrow { font-size:11px; }
  .club-verdict .verdict-card { padding-top:20px; text-align:left; }
  .club-verdict .critic { text-align:left; }
}
@media (min-width:1024px) {
  .screen.home-screen.club-home { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:48px; padding:56px 48px 64px; }
  .club-home .lobby-title { font-size:54px; }
  .club-home .lobby-challenge { margin-top:24px; }
  .club-home .lobby-bottom { margin-top:28px; }
  .club-home-stage { max-width:none; border:1px solid var(--line); border-radius:160px 160px 16px 16px; }
  .club-home-stage::after { bottom:24px; }
  .writer-board { grid-template-columns:minmax(0,2fr) minmax(0,3fr); grid-template-areas:"intro hand" "rack hand" "actions actions"; grid-template-rows:auto 1fr auto; gap:24px 32px; align-items:start; }
  .writer-board > .builder-intro { grid-area:intro; }
  .writer-board > .writer-rack { grid-area:rack; }
  .writer-board > .hand-wrap { grid-area:hand; padding:0 0 0 24px; border-left:1px solid var(--line); }
  .writer-board > .builder-actions { grid-area:actions; padding-top:24px; border-top:1px solid var(--line); }
  .screen.play.writer-screen .setup { text-align:left; }
  .writer-screen .structure-hint { text-align:left; margin-left:0; }
  .writer-screen .rack { grid-template-columns:minmax(0,1fr); gap:10px; }
  .screen.play.writer-screen .slot { min-height:68px; display:grid; grid-template-columns:22px minmax(0,1fr); gap:4px 12px; padding:12px 26px 12px 12px; text-align:left; }
  .writer-screen .slot-number { grid-column:1; grid-row:1 / span 2; align-self:center; }
  .writer-screen .slot-hint { grid-column:2; grid-row:1 / span 2; }
  .screen.play.writer-screen .slot.filled .slot-label { grid-column:2; padding:0; }
  .screen.play.writer-screen .slot.filled .slot-t { grid-column:2; text-align:left; }
  .writer-screen .card, .writer-screen .card.used { min-height:104px; }
  .screen.performance-screen.showtime-screen { padding:32px 0 48px; }
  .showtime-scene { grid-template-columns:360px minmax(0,1fr); align-items:stretch; }
  .showtime-screen .comic-stage { min-height:360px; border-radius:15px 0 0 15px; align-items:center; }
  .showtime-screen .stage-comic { margin:0; }
  .performance-caption { align-self:center; padding:32px 32px 32px 12px; }
  .showtime-screen .performance-progress { text-align:left; margin-top:0; }
  .showtime-screen .performance-line { min-height:180px; font-size:28px; }
  .club-verdict .verdict-stage { grid-template-columns:256px minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  .writer-screen .card, .writer-screen .card:hover, .writer-screen .card:active { transform:none; transition:none; }
}
:root[data-motion=reduce] .writer-screen .card { transform:none; transition:none; }
@media (forced-colors:active) {
  .club-home-stage, .showtime-scene, .club-verdict .verdict-stage { border-color:CanvasText; background:Canvas; }
  .writer-screen .card, .screen.play.writer-screen .slot { background:ButtonFace; color:ButtonText; border:1px solid ButtonText; box-shadow:none; }
  :root[data-theme] .writer-screen .card.used { border:3px double Highlight; box-shadow:none; }
  .writer-screen .card-assigned { background:Highlight; color:HighlightText; }
  .writer-screen .slot.active-slot { outline-color:Highlight; }
  .showtime-screen .performance-line { background:Canvas; color:CanvasText; border-color:CanvasText; }
}

/* Only browsers without native sharing show the compact copy fallback. */
.share-dialog [hidden] { display:none !important; }
.showtime-screen .full-stage-joke { white-space:pre-line; text-wrap:pretty; }

/* Phone writing surface: text determines height. Navigation and Perform follow
   the complete hand in normal flow; no opaque bar is laid over the cards. */
html { scroll-padding-bottom:calc(var(--bottom-occlusion, 90px) + 12px); }
@media (max-width:599px) {
  #app:not(.document-page #app) .hdr { padding:4px 12px; row-gap:0; }
  .hdr .brand b { font-size:26px; }
  .header-utilities { gap:4px; flex-wrap:wrap; justify-content:center; }
  .utility-control { padding-inline:10px; }
  .utility-control.music-control { min-width:100px; }
  .foot {
    min-height:calc(56px + env(safe-area-inset-bottom));
    padding:4px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .foot .tab { min-height:48px; font-size:11px; gap:2px; }
  .foot .tab .g-ico { width:20px; height:20px; }
  .screen.play.writer-screen {
    padding:4px max(12px, env(safe-area-inset-right))
      20px
      max(12px, env(safe-area-inset-left));
    gap:12px;
  }
  .writer-screen .writer-board { gap:12px; }
  .screen.play.writer-screen .setup { margin:2px 0 0; font-size:22px; line-height:1.2; }
  .writer-screen .structure-hint { margin-top:6px; font-size:12px; line-height:1.4; }
  .writer-screen .writer-label, .writer-screen .hand-heading { margin-bottom:6px; }
  .writer-screen .rack, .writer-screen .hand { gap:6px; }
  .screen.play.writer-screen .slot {
    min-height:56px; padding:6px; gap:4px; font-size:15px; line-height:1.25;
  }
  .writer-screen .slot-number { width:20px; height:20px; }
  .screen.play.writer-screen .slot.filled {
    display:grid; grid-template-columns:20px minmax(0,1fr); align-content:center;
    padding:6px; gap:4px;
  }
  .writer-screen .slot.filled .slot-number { grid-column:1; grid-row:1; }
  .screen.play.writer-screen .slot.filled .slot-label {
    grid-column:2; grid-row:1; padding:0 12px 0 0; text-align:left;
  }
  .screen.play.writer-screen .slot.filled .slot-t { grid-column:1/-1; grid-row:2; }
  .writer-screen .card, .writer-screen .card.used {
    min-height:68px; padding:8px 6px 20px; font-size:15px; line-height:1.25;
  }
  .writer-screen .card-assigned { width:16px; height:16px; bottom:3px; right:4px; }
  .writer-screen .card, .writer-screen .slot, .writer-screen .slot-t {
    -webkit-hyphens:none; hyphens:none; word-break:normal; overflow-wrap:anywhere;
    scroll-margin-block:8px;
  }
  .writer-screen .builder-actions { padding-top:0; gap:4px; }
  .writer-screen .builder-actions::before {
    content:none; display:none;
  }
  .writer-screen .builder-actions > .cta {
    position:static;
    width:100%; max-width:360px; min-height:48px; margin:0; padding:10px 14px;
    font-size:17px; line-height:1.25;
  }
}
@media (max-width:1023px) {
  #app.writing-layout { display:flex; flex-direction:column; min-height:100svh; }
  #app.writing-layout > .screen { flex:1; padding-bottom:20px; }
  #app.writing-layout > nav.foot {
    position:static; inset:auto; transform:none; flex:none;
    width:100%; height:auto; margin:0; margin-top:auto;
  }
}

/* Authored sentences need room to read. Keep every card in the same hand. */
.bank-writer .bank-rack { grid-template-columns:repeat(var(--bank-slots,3),minmax(0,1fr)); }
.bank-writer .hand { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
.bank-writer .card, .bank-writer .card.used {
  display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;
  height:auto; max-height:none; min-width:0; padding:10px; gap:8px;
  font-size:16px; line-height:1.3; text-align:left; opacity:1;
  white-space:normal; -webkit-hyphens:none; hyphens:none; overflow-wrap:anywhere;
}
.bank-writer .card .card-text { display:block; overflow:visible; white-space:normal; }
.bank-card-stage { font:600 11px/1.4 var(--font-ui); letter-spacing:.02em; }
.bank-card-selected { margin-top:auto; font:700 11px/1.4 var(--font-ui); text-decoration:underline; }
.bank-writer .card.used { outline:2px solid var(--accent); outline-offset:-4px; }
.bank-writer .card.bank-unmatched { border-style:dashed; }
.bank-writer .slot-text { display:block; min-width:0; grid-column:1/-1; text-align:left; white-space:normal; overflow-wrap:anywhere; }
.bank-writer .setup-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bank-writer .setup-toolbar .link { min-height:44px; margin:0; flex-shrink:0; font-size:13px; }
.bank-result { max-width:760px; margin-inline:auto; }
.bank-verdict-entry { min-width:0; margin:0 0 16px; }
.revision-feedback { margin:20px 0; padding:16px; border:1px solid var(--line); border-radius:12px; text-align:start; overflow-wrap:anywhere; }
.revision-feedback p { line-height:1.55; }
.revision-before, .revision-after { white-space:pre-wrap; }
.showtime-screen .performance-lead, .showtime-screen .performance-reveal { display:block; overflow-wrap:anywhere; }
.showtime-screen .performance-lead { margin-bottom:0.7em; padding-bottom:0.7em; border-bottom:1px solid currentColor; font-size:0.86em; line-height:1.5; font-weight:400; }
.showtime-screen .performance-reveal { font-weight:700; }
#performanceNext { min-height:44px; white-space:normal; }
.bank-verdict-entry > .section-label { margin:0 0 12px; }
.bank-set-summary { margin:0 0 20px; color:var(--gold); text-align:center; }
.bank-verdict-entry > .cta { max-width:360px; margin-inline:auto; }
.bank-result .bank-joke-text { font-size:18px; line-height:1.5; color:var(--ink); }
.bank-joke { margin:0 0 24px; padding:18px 0; border-bottom:1px solid var(--line); }
.bank-joke-text { font:400 23px/1.5 var(--font-joke); overflow-wrap:anywhere; margin:0 0 20px; }
.bank-joke .result-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.bank-joke .cta { min-width:0; width:100%; max-width:none; min-height:48px; margin:0; font:600 15px/1.4 var(--font-ui); padding:12px; }
.bank-joke .share-joke-primary { grid-column:1/-1; min-height:56px; font-size:18px; }
.bank-reactions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.bank-joke [aria-pressed=true] { outline:2px solid var(--accent); outline-offset:2px; }
.bank-joke .section-label { margin-top:24px; }
.bank-joke .critic-note { color:var(--muted); font-size:14px; line-height:1.5; }
@media (min-width:600px) {
  .bank-writer .hand { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .bank-writer .card, .bank-writer .card.used { font-size:17px; padding:12px; }
}
@media (min-width:1024px) {
  .bank-writer .bank-rack { grid-template-columns:minmax(0,1fr); }
}
@media (forced-colors:active) {
  .bank-writer .card.used, .bank-joke [aria-pressed=true] { outline-color:Highlight; }
}

/* Landscape phones: honor both notch edges. */
@media (min-width:600px) and (max-width:1023px){.hdr,.screen{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));}}

/* Outlined logo inherits the selected accessible ink colour. */
.gafflo-logo{display:block;width:92px;line-height:0;flex:none}.gafflo-wordmark{display:block;width:100%;height:auto;overflow:visible}
@media(min-width:1024px){.gafflo-logo{width:102px}}

/* Outlined logo inherits the selected accessible ink colour. */
.gafflo-logo{display:block;width:92px;line-height:0;flex:none}.gafflo-wordmark{display:block;width:100%;height:auto;overflow:visible}
@media(min-width:1024px){.gafflo-logo{width:102px}}

/* Ten lightweight, bounded celebrations. No external assets or audio changes. */
.celebration-particle{position:absolute;left:var(--x);top:-24px;width:var(--size);height:var(--size);background:var(--color);opacity:0;animation:celebration-fall var(--flight) ease-out var(--delay) both;will-change:transform,opacity;}
.effect-confetti{height:calc(var(--size) * .45);border-radius:1px;}
.effect-streamers{width:5px;height:56px;border-radius:50%;background:repeating-linear-gradient(150deg,var(--color) 0 8px,transparent 9px 13px);}
.effect-stars{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 95%,50% 73%,21% 95%,32% 57%,2% 35%,39% 35%);top:var(--y);animation-name:celebration-burst;}
.effect-fireworks{top:var(--y);width:4px;height:4px;border-radius:50%;box-shadow:0 -14px var(--color),10px -10px var(--color),14px 0 var(--color),10px 10px var(--color),0 14px var(--color),-10px 10px var(--color),-14px 0 var(--color),-10px -10px var(--color);animation-name:celebration-burst;}
.effect-tickets{width:24px;height:13px;background:#eabd52;border:1px dashed #6c3b27;clip-path:polygon(0 0,100% 0,100% 30%,90% 50%,100% 70%,100% 100%,0 100%,0 70%,10% 50%,0 30%);}
.effect-bubbles{top:auto;bottom:-30px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff9,transparent 35%);border:2px solid var(--color);animation-name:celebration-rise;}
.effect-comets{top:var(--y);width:48px;height:4px;border-radius:100%;background:linear-gradient(90deg,transparent,var(--color),#fff);transform-origin:right center;animation-name:celebration-comet;}
.effect-rosettes{top:var(--y);border-radius:50%;background:repeating-conic-gradient(var(--color) 0deg 18deg,transparent 18deg 36deg);width:28px;height:28px;animation-name:celebration-bloom;}
.effect-ribbons{width:38px;height:38px;border:4px solid var(--color);border-left-color:transparent;border-bottom-color:transparent;background:none;border-radius:15% 70%;animation-name:celebration-ribbon;}
@keyframes celebration-fall{0%{opacity:0;transform:translate3d(0,0,0) rotate(0);}12%,65%{opacity:.85;}100%{opacity:0;transform:translate3d(var(--drift),var(--rise),0) rotate(var(--spin));}}
@keyframes celebration-rise{0%{opacity:0;transform:translate3d(0,0,0) scale(.7);}20%,70%{opacity:.8;}100%{opacity:0;transform:translate3d(var(--drift),calc(-1 * var(--rise)),0) scale(1.2);}}
@keyframes celebration-burst{0%{opacity:0;transform:scale(.2);}18%{opacity:.85;}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(1.5) rotate(var(--spin));}}
@keyframes celebration-comet{0%{opacity:0;transform:translate3d(calc(-1 * var(--dx)),calc(-1 * var(--dy)),0) rotate(-35deg) scaleX(.3);}22%{opacity:.9;}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) rotate(-35deg) scaleX(1.5);}}
@keyframes celebration-bloom{0%{opacity:0;transform:scale(.1) rotate(0);}25%,60%{opacity:.8;}100%{opacity:0;transform:scale(2.4) rotate(var(--spin));}}
@keyframes celebration-ribbon{0%{opacity:0;transform:translate3d(0,0,0) rotate(-40deg);}20%,65%{opacity:.8;}100%{opacity:0;transform:translate3d(var(--drift),var(--rise),0) rotate(var(--spin));}}
.celebration-crown{position:absolute;left:15%;right:15%;top:4px;text-align:center;font:700 16px Georgia,serif;letter-spacing:.15em;color:#eabd52;animation:celebration-bloom var(--fx-duration) ease-out both;}
.theatre-fx.settled .celebration-particle,.theatre-fx.settled .theatre-balloon,.theatre-fx.settled .celebration-crown{display:none;will-change:auto;}
.theatre-fx.calm .celebration-particle,:root[data-motion=reduce] .celebration-particle{animation:none!important;top:var(--rest);bottom:auto;opacity:.4;transform:none;will-change:auto;}
.theatre-fx.calm .celebration-crown,:root[data-motion=reduce] .celebration-crown{animation:none!important;opacity:.7;transform:none;}
@media(prefers-reduced-motion:reduce){.celebration-particle{animation:none!important;top:var(--rest);bottom:auto;opacity:.4;transform:none;will-change:auto;}.celebration-crown{animation:none!important;opacity:.7;transform:none;}}

/* Readable authored cards: natural height, clear hierarchy, no clipped copy. */
.writer-screen.bank-writer .hand{gap:12px;align-items:stretch;}
.writer-screen.bank-writer .card,.writer-screen.bank-writer .card.used{
  height:auto;min-height:0;max-height:none;padding:16px;gap:12px;
  font:400 18px/1.5 var(--font-ui);letter-spacing:normal;text-align:left;
  white-space:normal;word-break:normal;overflow-wrap:break-word;
  color:var(--paper-ink);border-width:1px;border-radius:12px;
}
.writer-screen.bank-writer .card .card-text{
  font:inherit;line-height:1.5;display:block;max-height:none;
  overflow:visible;white-space:normal;word-break:normal;overflow-wrap:break-word;
}
.writer-screen.bank-writer .bank-card-stage{
  align-self:flex-start;padding:4px 9px;border-radius:5px;
  color:var(--paper-ink);background:#0000000c;
  font:700 12px/1.4 var(--font-ui);letter-spacing:.025em;
}
.writer-screen.bank-writer .bank-card-selected{
  font:700 13px/1.5 var(--font-ui);padding-top:4px;text-decoration:none;
}
.writer-screen.bank-writer .slot-text{font:400 17px/1.5 var(--font-ui);}
@media(max-width:599px){
 .writer-screen.bank-writer .hand{grid-template-columns:minmax(0,1fr);gap:12px;}
 .screen.play.writer-screen.bank-writer{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));}
}
@media(min-width:600px) and (max-width:1023px){
 .writer-screen.bank-writer .hand{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(display-mode:standalone){
 body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top);background:var(--bg);z-index:1000;pointer-events:none;}
 .skip-link{top:calc(env(safe-area-inset-top) + 4px);}
}
@media(forced-colors:active){
 .writer-screen.bank-writer .bank-card-stage{background:Canvas;color:CanvasText;border:1px solid CanvasText;}
}

/* Native keyboard-accessible stage accordions keep chosen text visible. */
.bank-stage-sections{display:grid;gap:12px;min-width:0;}
.bank-stage-section{border:1px solid var(--line);border-radius:12px;min-width:0;background:var(--bg);overflow:visible;}
.bank-stage-summary{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;min-height:60px;cursor:pointer;padding:16px 42px 16px 16px;list-style:none;scroll-margin-block:calc(env(safe-area-inset-top) + 16px) 90px;}
.bank-stage-summary::-webkit-details-marker{display:none;}
.bank-stage-summary::after{content:'+';position:absolute;right:16px;top:16px;font:500 22px/1.2 var(--font-ui);color:var(--ink);}
.bank-stage-section[open]>.bank-stage-summary::after{content:'−';}
.bank-section-title{font:700 16px/1.4 var(--font-ui);color:var(--ink);}
.bank-section-state{font:600 12px/1.6 var(--font-ui);color:var(--muted);align-self:center;}
.bank-selected-preview{grid-column:1/-1;font:400 16px/1.5 var(--font-ui);color:var(--ink);overflow-wrap:break-word;}
.bank-stage-section.complete{border-color:var(--gold);}
.writer-screen.bank-writer .bank-stage-section>.hand{padding:0 12px 12px;margin:0;}
.bank-stage-section[open]>.bank-stage-summary{margin-bottom:4px;}
@media(max-width:380px){.bank-stage-summary{grid-template-columns:minmax(0,1fr);}.bank-section-state{grid-column:1;}}
@media(forced-colors:active){.bank-stage-section,.bank-stage-section.complete{border-color:CanvasText;}}

/* Separate the invitation, challenge and punch visually. */
.club-home .challenge-question{color:#e5bd72;font:700 clamp(21px,3.5vw,27px)/1.3 var(--font-ui);}
.club-home .challenge-proof{color:#e88da6;font:800 clamp(36px,7.5vw,52px)/1.08 var(--font-ui);}
:root[data-theme=day] .club-home .challenge-question{color:#785018;}
:root[data-theme=day] .club-home .challenge-proof{color:#982b4b;}
@media(forced-colors:active){.club-home .challenge-question,.club-home .challenge-proof{color:CanvasText;}}

/* Minimal publisher credit below the complete home hero, in normal flow. */
.club-home .home-publisher-footer{
 grid-column:1/-1;display:flex;align-items:flex-start;justify-content:space-between;
 gap:20px;width:100%;min-width:0;margin-top:12px;padding:24px 0 0;
 border-top:1px solid var(--line);color:var(--muted);text-align:left;
 font:400 13px/1.5 var(--font-ui);
}
.home-publisher-brand{display:flex;align-items:flex-start;gap:10px;min-width:0;}
.home-publisher-mark{display:block;flex:none;width:24px;height:24px;color:var(--ink);}
.home-publisher-mark svg{display:block;width:100%;height:100%;}
.home-publisher-name{color:var(--ink);font:700 14px/1.5 var(--font-ui);}
.home-publisher-brand .home-publisher-tagline{margin:4px 0 0;font:700 11px/1.5 var(--font-ui);letter-spacing:.065em;}
.home-publisher-meta{text-align:right;min-width:0;}
.home-publisher-meta .home-publisher-build{margin:12px 0 0;font-size:12px;}
/* Phone footer: one centered lockup and one compact, wrapping metadata row. */
@media(max-width:599px){
 .screen.home-screen.club-home{
  padding-bottom:calc(max(var(--bottom-space,0px),calc(56px + env(safe-area-inset-bottom))) + 28px);
 }
 .club-home .home-publisher-footer{
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;
  gap:14px;margin-top:8px;padding:20px 8px 0;text-align:center;
 }
 .home-publisher-brand{
  display:grid;grid-template-columns:20px auto;align-items:center;justify-content:center;
  gap:6px 8px;width:100%;text-align:center;
 }
 .home-publisher-brand>div{display:contents;}
 .home-publisher-mark{width:20px;height:20px;}
 .home-publisher-name{font-size:14px;line-height:1.4;text-align:left;}
 .home-publisher-brand .home-publisher-tagline{
  grid-column:1/-1;margin:0;font-size:10px;line-height:1.5;letter-spacing:.07em;text-align:center;
 }
 .home-publisher-meta{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:4px 14px;max-width:100%;text-align:center;font-size:12px;line-height:1.5;
 }
 .home-publisher-meta p,.home-publisher-meta .home-publisher-build{margin:0;font-size:inherit;line-height:inherit;}
}