/* B3 C11–C18: fixed, non-interactive original-image layers; legacy shell is the fallback. */
.b3-backdrop,.b3-scene{position:fixed;inset:0;pointer-events:none}
.b3-backdrop{z-index:-2;isolation:isolate;overflow:hidden}
.b3-scene{opacity:0}
.b3-scene::before,.b3-scene::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:var(--b3-image);background-position:center;background-repeat:no-repeat;background-size:cover}
.b3-scene::after{display:none}
body{--b3-mask:rgb(13 29 44 / .25)}
body::before{z-index:-3}
body::after{background:var(--b3-mask)}
body[data-screen=counts],body[data-screen=boards]{--b3-mask:rgb(13 29 44 / .42)}
body[data-screen=setup],body[data-screen=encyclopedia],body[data-screen=finished]{--b3-mask:rgb(13 29 44 / .58)}
body[data-screen=host][data-b3-phase=day]{--b3-mask:rgb(40 68 87 / .36)}
body[data-screen=host][data-b3-phase=night]{--b3-mask:rgb(10 24 41 / .62)}
@media(min-aspect-ratio:4/5){.b3-scene::before{filter:blur(20px);transform:scale(1.06);opacity:.8}.b3-scene::after{display:block;background-size:contain}}
@media(prefers-reduced-motion:reduce){.b3-scene{animation:none!important;transition:none!important}}

/* B3 C01–C10: approved color tokens; secondary surface values are implementation baselines. */
:root{
 --b3-primary:#B2DBE5;--b3-on-primary:#13212D;--b3-secondary:#8CBACB;
 --b3-text:#F4F8F9;--b3-text-secondary:#C8DBE6;--b3-wolf:#F0A3B0;--b3-god:#E8D09B;--b3-villager:#C8DBE6;
 --b3-canvas:#13212D;--b3-panel:rgb(32 57 75 / .68);--b3-panel-deep:rgb(27 49 66 / .88);--b3-edge:rgb(130 171 189 / .62);
 --b3-inner:inset 0 1px 0 rgb(244 248 249 / .14),inset 0 0 0 3px rgb(178 219 229 / .035);
 --b3-blur:20px;--b3-radius-sm:8px;--b3-radius-md:12px;--b3-radius-lg:18px;--b3-radius-xl:22px;
 --b3-space-xs:4px;--b3-space-sm:8px;--b3-space-md:12px;--b3-space-lg:16px;--b3-space-xl:24px;
 --bg:var(--b3-canvas);--panel:var(--b3-panel-deep);--purple:var(--b3-panel);--gold:var(--b3-primary);--ink:var(--b3-text);--muted:var(--b3-text-secondary);--line:var(--b3-edge);
 --wolf:var(--b3-wolf);--god:var(--b3-god);--civil:var(--b3-villager);--green:var(--b3-villager);
 font-family:system-ui,-apple-system,BlinkMacSystemFont,'Noto Sans TC','Microsoft JhengHei',sans-serif;
}
/* Vote/PK state colors and all dialog interiors retain their existing semantics. */
:is(.vote-dialog,.exile-editor,.vote-result,.vote-records){--bg:#142132;--panel:#1b2a3c;--purple:#2b3045;--gold:#c0aa84;--ink:#ece8df;--muted:#b0bac8;--line:#46546a}
#host #actions{--gold:#c0aa84;--purple:#2b3045}
button:not(:where(dialog *,.seat,.preview-card,.role-card,#actions *)),.problem-report{
 background:linear-gradient(135deg,rgb(178 219 229 / .09),transparent 65%),var(--b3-panel);
 border-color:var(--b3-edge);border-radius:var(--b3-radius-lg);color:var(--b3-text);box-shadow:var(--b3-inner);
 backdrop-filter:blur(var(--b3-blur));-webkit-backdrop-filter:blur(var(--b3-blur));
}
button.primary:not(:where(dialog *,#actions *)){background:var(--b3-primary);border-color:var(--b3-primary);color:var(--b3-on-primary);text-shadow:none}
button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,.problem-report:focus-visible{outline:2px solid var(--b3-primary);outline-offset:3px}
button:disabled{opacity:.45}
#host .host-center{background:linear-gradient(130deg,rgb(178 219 229 / .08),transparent 65%),var(--b3-panel);border-color:var(--b3-edge);border-radius:var(--b3-radius-lg);box-shadow:var(--b3-inner);backdrop-filter:blur(var(--b3-blur));-webkit-backdrop-filter:blur(var(--b3-blur))}
#host .script-box{position:relative;text-align:center;flex:0 1 auto;min-height:44px;max-height:66%;padding:3px 0 8px;overflow:auto}
#host .script-box::after{content:'';display:block;flex:none;height:1px;margin:6px 0 0;background:linear-gradient(90deg,transparent,var(--b3-primary),transparent);pointer-events:none}
#host #subtitle{color:var(--b3-text);font-size:clamp(1.1875rem,4.7vw,1.75rem);line-height:1.35;overflow-wrap:anywhere;margin:0;text-shadow:0 1px 5px rgb(4 18 31 / .55)}
#host .caption{color:var(--b3-text-secondary)}
#host .judge-box{border:1px solid rgb(130 171 189 / .3);border-radius:var(--b3-radius-sm);background:rgb(19 33 45 / .62);padding:5px 7px;min-height:0;overflow:auto}
#host .judge-content{min-height:44px;flex:1 0 44px}
#host #hint{color:var(--b3-text-secondary)}
#host .host-top{gap:5px;min-width:0}
#host :is(#phase,#boardName){background:var(--b3-panel-deep);border:1px solid var(--b3-edge);border-radius:9999px;padding:4px 7px;box-shadow:var(--b3-inner);line-height:1.3}
#host #phase{color:var(--b3-primary);flex:none}
#host #boardName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--b3-text-secondary)}
#host .host-top>div{flex:none}
#host .host-top button{border-radius:var(--b3-radius-sm)}
#host .seat{--b3-seat-tint:rgb(178 219 229 / .07);background:linear-gradient(130deg,var(--b3-seat-tint),transparent 75%),linear-gradient(160deg,rgb(32 57 75 / .74),rgb(19 33 45 / .84));box-shadow:var(--b3-inner);backdrop-filter:blur(var(--b3-blur));-webkit-backdrop-filter:blur(var(--b3-blur))}
#host .seat.wolf{--b3-seat-tint:rgb(240 163 176 / .15)}
#host .seat.god{--b3-seat-tint:rgb(232 208 155 / .13)}
#host .seat.villager{--b3-seat-tint:rgb(200 219 230 / .11)}
#host .seat.dead{--b3-seat-tint:rgb(200 219 230 / .025)}
#host .seat.selected{outline-color:var(--b3-primary)}
#host .seat.vote-selected{outline-color:#A99AC7}
#host>footer,#host>nav{background:none;border:0}
#host>footer button,#host>nav button{background:linear-gradient(135deg,rgb(178 219 229 / .06),transparent 65%),var(--b3-panel);color:var(--b3-text);border-color:var(--b3-edge);box-shadow:var(--b3-inner);text-shadow:0 1px 3px #13212d}
#host>footer button{color:var(--b3-text-secondary)}
#host>nav #next{background:var(--b3-primary);border-color:var(--b3-primary);color:var(--b3-on-primary);text-shadow:none}
@media(max-width:360px){#host .host-top{gap:3px}#host :is(#phase,#boardName){padding:4px}#host .judge-box{padding:3px 5px}}
@media(max-height:650px){#host #subtitle{font-size:1.1875rem}#host .script-box{padding-bottom:3px}#host .script-box::after{margin-top:3px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 #host .seat,#host .host-center,button:not(:where(dialog *,.seat,.preview-card,.role-card,#actions *)){background-color:var(--b3-panel-deep)}
 #host>nav #next,button.primary:not(:where(dialog *,#actions *)){background:var(--b3-primary)}
}

/* B3 C10/C19–C22: reuse each page's original controls and information order. */
.home-brand{background:radial-gradient(ellipse, rgb(178 219 229 / .12),transparent 70%);border-radius:50%;text-shadow:0 2px 12px #13212d}
.home-brand h1{font-family:inherit;font-size:clamp(2.25rem,7.4vw,3.5rem);font-weight:700;line-height:1.15;color:var(--b3-text);letter-spacing:.13em}
.home-brand p{color:var(--b3-text-secondary);font-size:clamp(.875rem,2.1vw,1.125rem);letter-spacing:.18em}
.welcome .menu button{background:linear-gradient(135deg,rgb(178 219 229 / .09),transparent 65%),var(--b3-panel);border-color:var(--b3-edge);box-shadow:var(--b3-inner);color:var(--b3-text);border-radius:var(--b3-radius-xl)}
.welcome .menu button.primary{background:var(--b3-primary);color:var(--b3-on-primary);border-color:var(--b3-primary)}
.problem-report{color:var(--b3-text-secondary);min-height:44px}
.count-choices button,#boardChoices button{background:linear-gradient(125deg,rgb(178 219 229 / .13),transparent 62%),var(--b3-panel);border-color:var(--b3-edge);box-shadow:var(--b3-inner);color:var(--b3-text);backdrop-filter:blur(var(--b3-blur));-webkit-backdrop-filter:blur(var(--b3-blur))}
.count-choices button::after,#boardChoices button::after{color:var(--b3-primary)}
.board-window{background:var(--b3-panel);border-color:var(--b3-edge);box-shadow:var(--b3-inner);backdrop-filter:blur(var(--b3-blur));-webkit-backdrop-filter:blur(var(--b3-blur))}
.board-tabs button[aria-pressed=true],.library-tabs button[aria-pressed=true]{border-color:var(--b3-primary);box-shadow:var(--b3-inner),inset 0 0 0 1px var(--b3-primary);background:var(--b3-panel-deep)}
.board-tabs button[aria-pressed=true]{color:var(--b3-primary)}
.setup-grid section,.rules-form,.night-order{background:var(--b3-panel);border:1px solid var(--b3-edge);border-radius:var(--b3-radius-lg);box-shadow:var(--b3-inner);backdrop-filter:blur(var(--b3-blur));-webkit-backdrop-filter:blur(var(--b3-blur))}
.setup-grid section:first-child{background:linear-gradient(135deg,rgb(240 163 176 / .12),transparent 68%),var(--b3-panel)}
.setup-grid section:last-child{background:linear-gradient(135deg,rgb(232 208 155 / .1),rgb(200 219 230 / .06) 75%),var(--b3-panel)}
.setup-grid section:first-child h2{color:var(--b3-wolf)}
.setup-grid section:last-child h2{color:var(--b3-god)}
.setup-grid section{min-width:0;overflow-wrap:anywhere}
.rules-form label{gap:8px;flex-wrap:wrap}
.rules-form select{max-width:100%;min-width:0}
.role-card{background:var(--b3-panel);border:1px solid var(--b3-edge);border-radius:var(--b3-radius-lg);box-shadow:var(--b3-inner);backdrop-filter:blur(var(--b3-blur));-webkit-backdrop-filter:blur(var(--b3-blur))}
.role-card.wolf{color:var(--b3-wolf)}.role-card.god{color:var(--b3-god)}.role-card.villager{color:var(--b3-villager)}
.preview-card .preview-front,.preview-card .preview-back{background:var(--b3-panel-deep);border:1px solid var(--b3-edge);border-radius:var(--b3-radius-lg);box-shadow:var(--b3-inner)}
.preview-card .preview-front img{object-fit:contain}
/* C28: shell only. Vote layouts, semantic colors and timer controls stay intact. */
dialog:not(#rolePreview){background:linear-gradient(135deg,rgb(178 219 229 / .045),transparent 70%),var(--b3-panel-deep);border-color:var(--b3-edge);border-radius:var(--b3-radius-xl);box-shadow:var(--b3-inner),0 12px 40px rgb(3 14 25 / .35);backdrop-filter:blur(var(--b3-blur));-webkit-backdrop-filter:blur(var(--b3-blur))}
dialog::backdrop{background:rgb(5 15 27 / .74)}
dialog:not(:is(#rolePreview,.exile-editor,.vote-dialog)){max-height:calc(var(--app-height,100dvh) - max(12px,var(--safe-top)) - max(12px,var(--safe-bottom)) - 16px);overflow-y:auto}
/* C29: CSS-only feedback never delays a click or changes selected state. */
button:not(:is(.seat,.preview-card)){transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
button:active:not(:disabled):not(:is(.seat,.preview-card)){transform:translateY(1px);filter:brightness(1.06)}
button:active:not(:disabled):not(:is(.seat,.preview-card,dialog *,#actions *)){box-shadow:var(--b3-inner),inset 0 0 10px rgb(178 219 229 / .2)}
/* C30: fixed to each scrollport's clipped bounds, never in list layout or hit testing. */
.b3-scroll-hint{position:fixed;pointer-events:none!important;z-index:20;background:linear-gradient(transparent,rgb(178 219 229 / .23));border-radius:0 0 var(--b3-radius-sm) var(--b3-radius-sm)}
@media(prefers-reduced-motion:reduce){button:not(:is(.seat,.preview-card)),.preview-inner{transition:none!important}button:active:not(:disabled):not(:is(.seat,.preview-card)){transform:none;filter:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.board-window,.setup-grid section,.rules-form,.night-order,.role-card,dialog:not(#rolePreview){background-color:var(--b3-panel-deep)}}

/* B3 C23–C27: original separate illustrations and information, with arctic surfaces. */
#finished{--b3-victory-glow:rgb(232 208 155 / .15);padding-bottom:calc(80px + var(--safe-bottom))}
#finished.wolves-win{--b3-victory-glow:rgb(240 163 176 / .18)}
#finished .recap-victory{background:radial-gradient(ellipse at top,var(--b3-victory-glow),transparent 75%),var(--b3-panel-deep);border:1px solid var(--b3-edge);box-shadow:var(--b3-inner);border-radius:var(--b3-radius-lg);color:var(--b3-text)}
#finished .recap-victory h3{color:var(--b3-text);font-weight:600;letter-spacing:.15em}
#finished .recap-victory p{color:var(--b3-text-secondary)}
.recap-section-title{color:var(--b3-text);overflow-wrap:anywhere}
.recap-segment{position:relative;padding-left:20px}
.recap-segment::before{content:'';position:absolute;left:6px;top:20px;bottom:-20px;width:1px;background:linear-gradient(var(--b3-edge),rgb(130 171 189 / .2));pointer-events:none}
.recap-segment::after{content:'';position:absolute;left:2px;top:19px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 70% 30%,transparent 42%,var(--b3-primary) 46%);pointer-events:none}
.recap-segment.day::after{background:var(--b3-god);outline:1px dashed var(--b3-god);outline-offset:2px}
/* User revision: retain original five-column illustration / role / skill / role / illustration layout. */
.recap-event{background:linear-gradient(110deg,rgb(130 171 189 / .08),transparent 50%,rgb(130 171 189 / .08)),var(--b3-panel-deep);color:var(--b3-text);border-color:var(--b3-edge);border-radius:var(--b3-radius-lg);box-shadow:var(--b3-inner);backdrop-filter:blur(var(--b3-blur));-webkit-backdrop-filter:blur(var(--b3-blur))}
.recap-person,.recap-event-label,.recap-no-target{overflow-wrap:anywhere}
.recap-outcome{color:var(--b3-text-secondary)}
.night-result{background:var(--b3-panel-deep);border-color:var(--b3-edge);color:var(--b3-text-secondary);box-shadow:var(--b3-inner)}
.final-identity-card{background:var(--b3-panel-deep);border-color:var(--b3-edge);box-shadow:var(--b3-inner);border-radius:var(--b3-radius-md)}
.identity-status,.identity-original{color:var(--b3-text-secondary)}
.finish-actions{background:rgb(19 33 45 / .84);border-color:var(--b3-edge);padding-bottom:calc(14px + var(--safe-bottom));backdrop-filter:blur(var(--b3-blur));-webkit-backdrop-filter:blur(var(--b3-blur))}
.finish-actions #playAgain,.finish-actions #finishHome{background:var(--b3-panel-deep);color:var(--b3-text);box-shadow:var(--b3-inner);text-shadow:none}
.finish-actions #playAgain{border-color:var(--b3-primary);box-shadow:var(--b3-inner),inset 0 0 0 1px rgb(178 219 229 / .24)}
@media(max-width:360px){.recap-segment{padding-left:15px}.recap-segment::before{left:4px}.recap-segment::after{left:0}.recap-event{gap:4px;padding:10px 6px}}

/* User revision: polished, softly tinted glass without changing any control state. */
:root{--b3-glass-sheen:linear-gradient(180deg,rgb(244 248 249 / .12),rgb(244 248 249 / .025) 46%,transparent 48%,rgb(13 29 44 / .12));--b3-glass-edge:inset 0 1px 0 rgb(244 248 249 / .26),inset 1px 0 0 rgb(178 219 229 / .12),inset 0 -1px 0 rgb(8 22 35 / .3),0 3px 9px rgb(5 15 27 / .16)}
body :is(.welcome .menu button,.problem-report,.count-choices button,#boardChoices button,.board-tabs button,.library-tabs button,#setupStart,#setupBack,#host .host-top button,#host>footer button,#host>nav button,.finish-actions button){background-color:rgb(27 49 66 / .44);text-shadow:0 1px 3px rgb(5 15 27 / .65);background-image:var(--b3-glass-sheen),linear-gradient(115deg,rgb(178 219 229 / .12),transparent 48%,rgb(140 186 203 / .065));box-shadow:var(--b3-glass-edge)}
body :is(.welcome .menu button.primary,#setupStart,#host>nav #next){background-color:rgb(178 219 229 / .7);text-shadow:0 1px 0 rgb(244 248 249 / .18);background-image:var(--b3-glass-sheen),linear-gradient(120deg,rgb(244 248 249 / .16),transparent 55%,rgb(112 159 179 / .18));color:var(--b3-on-primary);border-color:#c8e8ee}
body .finish-actions #playAgain{box-shadow:var(--b3-glass-edge),inset 0 0 0 1px rgb(178 219 229 / .18)}
body :is(.board-tabs button,.library-tabs button)[aria-pressed=true]{box-shadow:var(--b3-glass-edge),inset 0 0 0 1px var(--b3-primary)}
body :is(.welcome .menu button,.count-choices button,#boardChoices button,#setupStart,#host .host-top button,#host>footer button,#host>nav button,.finish-actions button):active:not(:disabled){box-shadow:inset 0 1px 5px rgb(8 22 35 / .22),inset 0 0 12px rgb(178 219 229 / .18)}
@media(prefers-contrast:more){body :is(#host>footer button,#host>nav button,.welcome .menu button){border-width:2px;text-shadow:none}}

/* B3-R01–R09: approved second-round refinements; game handlers and data are untouched. */
:root{--b3-glass-home:rgb(27 49 66 / .20);--b3-glass-seat:rgb(27 49 66 / .48);--b3-glass-info:rgb(19 36 52 / .68);--b3-glass-recap:rgb(27 49 66 / .65)}
/* R01: one scrolling surface, one inline skill/actions row; results follow underneath. */
#host .judge-box{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;overflow:auto}
#host .judge-content{display:flex;align-items:center;align-content:flex-start;flex-wrap:wrap;gap:4px 6px;overflow:visible;flex:1 0 auto;min-height:44px}
#host :is(#operationCard,.operation-control,#actions){display:contents}
#host :is(#hint,#gestureResult,#selection,#exileVoteResult,#voteUpdateToast){flex:0 0 100%;min-width:0;margin:0}
#host #hint{padding-bottom:2px}
#host .judge-box button{min-height:44px;min-width:44px;padding:5px 9px;font-size:12px;background:var(--b3-glass-seat);border:1px solid var(--b3-edge);color:var(--b3-text);box-shadow:var(--b3-inner)}
#host .judge-box button[aria-pressed=true]{border-color:var(--b3-primary);background:rgb(178 219 229 / .18);box-shadow:inset 0 0 0 1px rgb(178 219 229 / .2)}
#host .operation-control>span{font-size:12px;color:var(--b3-text-secondary)}
#host #knifeToggle{margin-left:0!important;float:none!important}
#host .judge-box .skill-icon{flex:none}
/* R02: state values and priority remain in render(); no thick secondary outline. */
#host :is(#left,#right) .seat:is(.candidate,.withdrawn,.vote-selected){border-width:1px;box-shadow:var(--b3-inner)}
#host :is(#left,#right) .seat.candidate{border-color:var(--b3-primary)}
#host :is(#left,#right) .seat.withdrawn{border-color:#8CBACB}
#host :is(#left,#right) .seat.vote-selected{border-color:#d7eff4;outline:0;box-shadow:inset 0 0 0 1px rgb(178 219 229 / .1)}
#host .seat:is(.candidate,.withdrawn,.vote-selected) .seat-tags span{color:var(--b3-text);background:rgb(19 36 52 / .8);border-radius:3px}
/* R03: ordinary exile editor only; #voteDialog election/PK styles are unchanged. */
#exileVoteDialog{--gold:var(--b3-primary);--ink:var(--b3-text);--muted:var(--b3-text-secondary)}
#exileVoteDialog .vote-modes button{background:rgb(27 49 66 / .65);border-color:var(--b3-edge)}
#exileVoteDialog .vote-modes button[aria-pressed=true]{background:rgb(178 219 229 / .18);border-color:var(--b3-primary);box-shadow:inset 0 0 0 1px rgb(178 219 229 / .15)}
#exileVoteDialog #exileTargetSummary{min-height:56px;border:1px solid var(--b3-edge);background:linear-gradient(120deg,rgb(178 219 229 / .1),transparent),rgb(27 49 66 / .65);border-radius:12px;color:var(--b3-text)}
#exileVoteDialog .exile-candidates{border-color:var(--b3-edge);background:rgb(19 36 52 / .92)}
#exileVoteDialog .exile-candidates button[aria-pressed=true]{border-color:var(--b3-primary)!important;background:rgb(178 219 229 / .15)!important;box-shadow:none!important}
#exileVoteDialog .exile-voters button{border-radius:9px;border:1px solid var(--b3-edge);background:rgb(27 49 66 / .6);color:var(--b3-text)}
#exileVoteDialog .exile-voters button.ballot-selected{background:rgb(178 219 229 / .13)!important;border-color:var(--b3-primary)!important;box-shadow:inset 0 0 0 1px rgb(178 219 229 / .15)!important}
#exileVoteDialog .exile-voters .ballot-selected::after{border-color:var(--b3-primary)}
#exileVoteDialog .exile-voters button.ballot-other{background:rgb(27 49 66 / .35);color:var(--b3-text-secondary)}
#exileVoteDialog #exileCurrentVoter{border-color:var(--b3-edge);background:var(--b3-glass-info)}
#exileVoteDialog :is(#exileVoteDone,#exileNext){background:var(--b3-glass-sheen),rgb(178 219 229 / .7);border-color:var(--b3-primary);color:var(--b3-on-primary)}
/* R04: CSS only; preserve the existing wheel, clock and mode animations. */
#timerDialog .time-wheels{background:rgb(27 49 66 / .28);box-shadow:var(--b3-inner)}
#timerDialog .time-wheels::after{border-color:var(--b3-primary);background:rgb(178 219 229 / .045)}
#timerDialog .time-wheel button{color:var(--b3-text-secondary);background:transparent;box-shadow:none}
#timerDialog .time-wheel button[aria-selected=true]{color:var(--b3-text)}
#timerDialog :is(#timerStart,#timerPause){background:var(--b3-glass-sheen),rgb(178 219 229 / .7);border-color:var(--b3-primary);color:var(--b3-on-primary);box-shadow:var(--b3-glass-edge)}
#timerDialog :is(#timerMinus,#timerPlus,#timerRestore,#timerReset){background:rgb(27 49 66 / .44);border-color:var(--b3-edge);color:var(--b3-text)}
/* R05/R06: alpha applies to the background paint, never to card contents. */
body #home :is(button#start,button#encyclopediaOpen,a#problemReport){background-color:var(--b3-glass-home);background-image:var(--b3-glass-sheen);color:var(--b3-text);text-shadow:0 1px 4px #13212d}
#home .problem-report{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px}
#host .seat{background:linear-gradient(130deg,rgb(178 219 229 / .04),transparent 75%),var(--b3-glass-seat)}
#host :is(.host-center,#phase,#boardName){background:linear-gradient(130deg,rgb(178 219 229 / .04),transparent 65%),var(--b3-glass-info)}
#finished :is(.recap-event,.final-identity-card){background:linear-gradient(120deg,rgb(178 219 229 / .035),transparent 65%),var(--b3-glass-recap);border-color:var(--b3-edge)}
#finished .recap-image{border:0;background:none;box-shadow:none}
/* R07: manipulation includes pinch zoom; do not intercept touch or gesture events. */
:where(button,a,summary,select,[role=listbox],.board-window,.library,.vote-scroll,.exile-voters,.exile-candidates){touch-action:manipulation}
#timerDialog .time-wheel{touch-action:pan-y pinch-zoom}
/* R08: show the complete approved image. Frame/figure differences inside a bitmap are not repainted. */
.role-card,.role-card:hover:not(:disabled){border:0;background:transparent;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
.role-card img{width:100%;height:auto;aspect-ratio:5/7;object-fit:contain;object-position:var(--portrait-position,50% 50%)}
#rolePreview .preview-front{border:0;box-shadow:none;background:transparent;border-radius:0;overflow:hidden}
#rolePreview .preview-front img{object-fit:contain;object-position:var(--portrait-position,50% 50%)}
:is(.role-card,.preview-front)[data-role=blood],:is(.role-card,.preview-front)[data-role=demon],:is(.role-card,.preview-front)[data-role=mixed]{--portrait-position:50% 0%}
:is(.role-card,.preview-front)[data-role=duelist]{--portrait-position:50% 50%}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 body #home :is(button#start,button#encyclopediaOpen,a#problemReport),#host .seat,#host :is(.host-center,#phase,#boardName),#finished :is(.recap-event,.final-identity-card){background-color:rgb(19 36 52 / .92)}
}

/* User follow-up: emphasize the primary home action without changing the 20% paint. */
body #home button#start{background-image:var(--b3-glass-sheen),linear-gradient(110deg,rgb(178 219 229 / .3),rgb(140 186 203 / .08) 65%,rgb(178 219 229 / .18));font-size:20px;font-weight:750;border:2px solid var(--b3-primary);box-shadow:inset 0 1px 0 rgb(244 248 249 / .45),inset 0 0 18px rgb(178 219 229 / .12),0 0 0 3px rgb(178 219 229 / .08),0 4px 20px rgb(178 219 229 / .18);letter-spacing:.04em}

#home .home-brand h1{overflow-wrap:anywhere}

/* R09: override the legacy hard-coded shared night image in the actual fallback layer. */
body[data-screen=host]::before{background-image:var(--page-background)}
/* B3-R10–R16: presentation only; existing engine, ballots, recap model and assets stay authoritative. */
/* R10: explicit row boundaries; 34px visible paint inside non-overlapping 44px buttons. */
#host .judge-content{display:flex;flex-direction:column;align-items:stretch;gap:3px}
#host .judge-content>:is(#hint,#gestureResult,#selection,#exileVoteResult,#voteUpdateToast){flex:0 0 auto;width:100%}
#host .operation-row{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;min-width:0;flex:none}
#host .operation-row:empty{display:none}
#host .operation-row button{position:relative;isolation:isolate;flex:none;min-width:44px;min-height:44px;margin:0;padding:5px 9px;border:0;background:none;box-shadow:none;color:var(--b3-text);line-height:24px}
#host .operation-row button::before{content:'';position:absolute;inset:5px 0;border:1px solid var(--b3-edge);border-radius:inherit;background:var(--b3-glass-sheen),var(--b3-glass-seat);box-shadow:var(--b3-inner);pointer-events:none;z-index:-1}
#host .operation-row button[aria-pressed=true]{background:none;box-shadow:none}
#host .operation-row button[aria-pressed=true]::before{border-color:var(--b3-primary);background:rgb(178 219 229 / .18);box-shadow:inset 0 0 0 1px rgb(178 219 229 / .2)}
/* R11: candidate/withdrawn identity remains visible beneath the stronger selection ring. */
#host :is(#left,#right) .seat.candidate::before{content:'';position:absolute;top:3px;right:3px;width:10px;height:10px;background:var(--b3-primary);clip-path:polygon(0 0,100% 0,100% 100%);pointer-events:none}
#host #right .seat.candidate::before{right:auto;left:3px;transform:scaleX(-1)}
#host :is(#left,#right) .seat.withdrawn{border-color:#698899;box-shadow:inset 0 0 0 1px rgb(105 136 153 / .08)}
#host :is(#left,#right) .seat:is(.selected,.target,.vote-selected){border:2px solid var(--b3-primary);outline:0;box-shadow:inset 0 0 0 1px rgb(178 219 229 / .22)}
/* R12: shared visual language, keeping each editor's existing structure and actions. */
:is(#voteDialog,#exileVoteDialog){--gold:var(--b3-primary);--purple:var(--b3-panel);--ink:var(--b3-text);--muted:var(--b3-text-secondary);--line:var(--b3-edge)}
:is(#voteDialog,#exileVoteDialog) button{color:var(--b3-text);border-color:var(--b3-edge);background:var(--b3-glass-sheen),rgb(27 49 66 / .65);box-shadow:var(--b3-inner)}
:is(#voteDialog,#exileVoteDialog) :is(.vote-step,.vote-step-info){border-color:var(--b3-edge);color:var(--b3-text)}
:is(#voteDialog,#exileVoteDialog) .vote-modes button[aria-pressed=true]{border-color:var(--b3-primary);background:rgb(178 219 229 / .18);box-shadow:inset 0 0 0 1px rgb(178 219 229 / .15)}
#voteDialog #voteVoters button.ballot-selected{border-color:var(--b3-primary);background:rgb(178 219 229 / .13);box-shadow:inset 0 0 0 1px rgb(178 219 229 / .15)}
#voteDialog #voteVoters button.ballot-selected::after{border-color:var(--b3-primary)}
:is(#voteDialog,#exileVoteDialog) :is(#voteDone,#voteNext,#exileVoteDone,#exileNext){background:var(--b3-glass-sheen),rgb(178 219 229 / .7);border-color:var(--b3-primary);color:var(--b3-on-primary)}
/* R13: only background paint and camp text; preserve borders, fused art and timeline. */
#finished :is(.recap-event,.final-identity-card){background:linear-gradient(120deg,rgb(178 219 229 / .035),transparent 65%),rgb(27 49 66 / .65)}
#finished :is(.recap-person,.final-identity-card).wolf{color:var(--wolf)}
#finished :is(.recap-person,.final-identity-card).god{color:var(--god)}
#finished :is(.recap-person,.final-identity-card).villager{color:var(--civil)}
/* R14: limit warning semantics to destructive confirmations, not ordinary navigation. */
:is(#resetCancel,#finishCancel,#voteClearCancel,#voteAbandonCancel,#exileClearCancel,#exileAbandonCancel){background:var(--b3-glass-sheen),rgb(178 219 229 / .7);border-color:var(--b3-primary);color:var(--b3-on-primary);box-shadow:var(--b3-glass-edge)}
:is(#resetConfirm,#finishConfirm,#voteClearConfirm,#voteAbandonConfirm,#exileClearConfirm,#exileAbandonConfirm){background:var(--b3-glass-sheen),rgb(145 95 113 / .46);border-color:#C09AA7;color:#F4E8ED;box-shadow:var(--b3-glass-edge)}
/* R15: scoped fill only. Two uniform fills compose to 61.72%, before sheen/backdrop. */
body #boards .board-window{background-color:rgb(27 49 66 / .42);background-image:linear-gradient(130deg,rgb(178 219 229 / .035),transparent 70%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body #boards #boardChoices button{background-color:rgb(27 49 66 / .34);background-image:var(--b3-glass-sheen);color:var(--b3-text);text-shadow:0 1px 4px #13212d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 body #boards .board-window{background-color:rgb(19 36 52 / .78)}
 body #boards #boardChoices button{background-color:rgb(19 36 52 / .60)}
}
/* R13 follow-up: legacy event-card::after was still painting a gold/brown veil. */
#finished .recap-event::after{background:none}

/* Draw completion: scoped to the existing dialog; no global primary change. */
#drawDialog #drawClose{background-color:#B2DBE5;color:#13212D;border-color:#c8e8ee;background-image:var(--b3-glass-sheen);box-shadow:var(--b3-glass-edge)}
/* Original WolfCue frosted inlays: keep colors, transparent glass and hit areas. */
body :is(#home .menu button,#problemReport,#setupStart,#setupBack,#traditionalMode,#onlineMode){position:relative;border-radius:15px 24px 15px 24px}
body :is(#home .menu button,#problemReport,#setupStart,#setupBack,#traditionalMode,#onlineMode)::after{content:'';position:absolute;inset:8px;pointer-events:none;border:0;border-radius:inherit;opacity:.78;background:none;box-shadow:inset 1px 0 0 #b2dbe51c,inset -1px 0 0 #b2dbe514}
body #home .menu button::before{inset:2px 8px auto;height:42%;border-radius:12px 20px 70% 25%;background:linear-gradient(115deg,#effbff20,transparent 67%);pointer-events:none}

/* OPEN-01–10: isolated, silent startup layer. Source SVG and home stay intact. */
.wolfcue-opening{position:fixed;inset:0;z-index:2147483646;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background:#13212D;color:#F4F8F9;text-align:center;isolation:isolate;touch-action:manipulation;outline:none}
.opening-art{position:relative;width:min(48vw,210px);aspect-ratio:1}
.opening-art svg{position:absolute;inset:0;width:100%;height:100%}
.opening-badge,.opening-brand strong,.opening-brand p{opacity:0}
.opening-trace path{fill:none;stroke:#B2DBE5;stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 4px #b2dbe5)}
.opening-brand strong{display:block;font-size:clamp(24px,6vw,32px);letter-spacing:.06em;font-weight:600}
.opening-brand p{margin:10px 0 0;font-size:15px;letter-spacing:.15em;color:#C8DBE6}
/* While the first lobby image decodes, expose only the neutral canvas. */
body[data-screen=home][data-lobby-managed]::before{background-image:none}
body[data-screen=home][data-lobby-managed]{background-image:none}
/* HOST-02: body-level panel stays below native dialog top layers. */
.mini-safe-probe{position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.mini-timer{position:fixed;z-index:25;display:flex;align-items:center;gap:2px;width:286px;min-height:56px;box-sizing:border-box;padding:5px 6px;border:1px solid #b2dbe58f;border-radius:15px;background:linear-gradient(125deg,#426476b8,#13212de8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 26px #07121f70,inset 0 1px #e6f8ff38;color:#f4f8f9;user-select:none;touch-action:pan-y pinch-zoom}
.mini-timer[hidden]{display:none}
.mini-time{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-width:0;cursor:grab}
.mini-time strong{font-size:21px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.mini-timer svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;pointer-events:none}
.mini-timer button{display:grid;place-items:center;flex:0 0 44px;min-width:44px;width:44px;min-height:44px;height:44px;padding:0;border:0;border-radius:9px;background:rgb(178 219 229 / .09);color:#f4f8f9;box-shadow:none}
.mini-timer button:disabled{opacity:.4}
.mini-timer.dragging{outline:1px solid #b2dbe5;box-shadow:0 12px 32px #07121f90;translate:0 -2px}
#timerDialog .dialog-head h2{flex:1}
#timerMinimize{flex:none;min-width:44px;min-height:44px;margin-left:auto}
/* HOST-03: same voteGroups output, individual cancellation in the editing draft only. */
.batch-records{grid-column:1/-1;min-width:0}
.batch-records:has(.vote-people) {border-top:1px solid #b2dbe540;padding-top:8px}
.batch-records .vote-people{display:flex;flex-wrap:wrap;gap:5px}
.batch-records .vote-people button{min-width:44px;min-height:44px;padding:6px 10px;font-size:14px;background:rgb(178 219 229 / .1);border:1px solid #b2dbe55e;border-radius:9px;display:inline-flex;align-items:center;gap:3px}
.batch-records .vote-people img{width:17px;height:17px}
.batch-records>p:only-child{display:none}
#exileVoters[data-complete="true"]{display:block}
@media(prefers-reduced-motion:reduce){.mini-timer.dragging{translate:none}}

/* Glass review, stage 2: home and host paint only. Keep geometry, states and assets. */
:is(#home,#host,#voteDialog,#exileVoteDialog,#online){
 --review-sheen:linear-gradient(120deg,rgb(244 248 249 / .12),transparent 40%,rgb(178 219 229 / .025) 72%);
 --review-edge:rgb(178 219 229 / .38);
 --review-shadow:inset 0 1px 0 rgb(244 248 249 / .3),inset 0 -1px 0 rgb(8 20 32 / .24),0 6px 16px rgb(3 12 23 / .15);
}
body #home :is(button#start,button#encyclopediaOpen,a#problemReport){
 background-image:var(--review-sheen);border-color:var(--review-edge);box-shadow:var(--review-shadow);
}
body #home button#start{
 background-image:linear-gradient(118deg,rgb(178 219 229 / .3),rgb(178 219 229 / .06) 58%,rgb(178 219 229 / .15));
 border-color:var(--b3-primary);
 box-shadow:inset 0 1px 0 rgb(244 248 249 / .45),inset 0 -1px 0 rgb(178 219 229 / .22),0 0 0 3px rgb(178 219 229 / .05),0 8px 20px rgb(3 12 23 / .2);
}
body #home .menu button::before{
 content:'';inset:3px 12px auto;height:1px;border-radius:0;
 background:linear-gradient(90deg,transparent,rgb(244 248 249 / .55),transparent);
}
body #home :is(.menu button,#problemReport)::after{
 background:none;box-shadow:inset 1px 0 0 rgb(178 219 229 / .12),inset -1px 0 0 rgb(178 219 229 / .08);
}
#host .host-center{
 background-image:var(--review-sheen);border-color:var(--review-edge);
 box-shadow:inset 0 1px 0 rgb(244 248 249 / .2),0 10px 28px rgb(4 14 25 / .14);
}
#host :is(#phase,#boardName){background-image:var(--review-sheen);border-color:var(--review-edge);box-shadow:inset 0 1px 0 rgb(244 248 249 / .14)}
#host .script-box::after{background:linear-gradient(90deg,transparent,rgb(178 219 229 / .45) 22%,rgb(178 219 229 / .45) 78%,transparent)}
#host .seat{background-image:linear-gradient(120deg,rgb(178 219 229 / .065),transparent 65%);box-shadow:inset 0 1px 0 rgb(244 248 249 / .12)}
#host :is(#left,#right) .seat:is(.selected,.target,.vote-selected){
 background-image:linear-gradient(120deg,rgb(178 219 229 / .13),transparent 70%);
 box-shadow:inset 0 0 0 1px rgb(178 219 229 / .22),inset 0 1px 0 rgb(244 248 249 / .45);
}
#host .seat:active:not(:disabled){transform:none}
body #host :is(.host-top>div,footer,nav)>button{
 background-image:var(--review-sheen);border-color:var(--review-edge);box-shadow:var(--review-shadow);
}
body #host>nav #next{
 background-image:linear-gradient(135deg,rgb(237 249 250 / .47),transparent 50%,rgb(74 133 153 / .18));
 border-color:rgb(210 238 244 / .8);
}
#host .operation-row button::before{background-image:var(--review-sheen);border-color:var(--review-edge);box-shadow:inset 0 1px 0 rgb(244 248 249 / .14)}
#host .operation-row button[aria-pressed=true]::before{border-color:var(--b3-primary);background-color:rgb(178 219 229 / .2)}
body #host :is(.host-top>div,footer,nav)>button:disabled{
 background-image:none;background-color:rgb(43 61 76 / .7);color:var(--b3-text-secondary);
 border-color:rgb(140 166 181 / .22);box-shadow:inset 0 1px 0 rgb(244 248 249 / .07);text-shadow:none;
}
body #home :is(button,a):active:not(:disabled),body #host :is(.host-top>div,footer,nav)>button:active:not(:disabled){box-shadow:inset 0 2px 8px rgb(8 20 32 / .22),inset 0 0 0 1px rgb(178 219 229 / .2)}
/* Background alpha and existing blur fallback are inherited, not replaced. */

/* Glass review, stage 3. R03/R12 structure and ballot state remain authoritative. */
:is(#voteDialog,#exileVoteDialog){
 background-image:var(--review-sheen);border-color:var(--review-edge);
 box-shadow:inset 0 1px 0 rgb(244 248 249 / .24),0 18px 48px rgb(3 14 25 / .4);
}
:is(#voteDialog,#exileVoteDialog) button{
 background-image:var(--review-sheen);box-shadow:var(--review-shadow);
}
:is(#voteDialog,#exileVoteDialog) .vote-modes button[aria-pressed=true]{
 background-image:linear-gradient(120deg,rgb(178 219 229 / .13),transparent 70%);
 box-shadow:inset 0 -2px 0 var(--b3-primary),inset 0 1px 0 rgb(244 248 249 / .28);
}
#exileVoteDialog #exileTargetSummary,#voteDialog .vote-step,#exileVoteDialog #exileCurrentVoter{
 background-image:linear-gradient(110deg,rgb(178 219 229 / .1),transparent 68%);
 box-shadow:inset 3px 0 0 rgb(178 219 229 / .55),inset 0 1px 0 rgb(244 248 249 / .16);
}
#exileVoteDialog .exile-voter-section{border-top-color:var(--review-edge)}
#exileVoteDialog .exile-section-title{color:var(--b3-text)}
#exileVoteDialog .exile-section-help{color:var(--b3-text-secondary)}
#exileVoteDialog .exile-candidates{box-shadow:inset 0 1px 0 rgb(244 248 249 / .12),0 8px 20px rgb(3 12 23 / .2)}
#exileVoteDialog .exile-voters button:not(.ballot-selected),#voteDialog #voteVoters button:not(.ballot-selected){
 background-image:linear-gradient(120deg,rgb(244 248 249 / .055),transparent 65%);
 box-shadow:inset 0 1px 0 rgb(244 248 249 / .15),inset 0 -1px 0 rgb(8 20 32 / .24);
}
/* Keep the existing checkmark, text labels and actual selection conditions. */
#exileVoteDialog .exile-voters button.ballot-selected{
 background-image:linear-gradient(120deg,rgb(178 219 229 / .13),transparent 70%)!important;
 box-shadow:inset 0 0 0 1px rgb(178 219 229 / .3),inset 0 1px 0 rgb(244 248 249 / .28)!important;
}
#voteDialog #voteVoters button.ballot-selected{background-image:linear-gradient(120deg,rgb(178 219 229 / .13),transparent 70%);box-shadow:inset 0 0 0 1px rgb(178 219 229 / .3),inset 0 1px 0 rgb(244 248 249 / .28)}
:is(#voteDialog,#exileVoteDialog) :is(#voteDone,#voteNext,#exileVoteDone,#exileNext){
 background-image:linear-gradient(135deg,rgb(237 249 250 / .47),transparent 50%,rgb(74 133 153 / .18));
 box-shadow:var(--review-shadow);
}
:is(#voteDialog,#exileVoteDialog) :is(button,summary):focus-visible{outline:2px solid var(--b3-text);outline-offset:-3px}
:is(#voteDialog,#exileVoteDialog) :is(#voteProgress,#exileProgress,#voteStepCount,small){font-variant-numeric:tabular-nums}
:is(#voteDialog,#exileVoteDialog) button:active:not(:disabled){box-shadow:inset 0 2px 8px rgb(8 20 32 / .22),inset 0 0 0 1px var(--b3-primary)}
@media(hover:hover) and (pointer:fine){
 :is(#voteDialog,#exileVoteDialog) button:hover:not(:disabled){outline:1px solid rgb(178 219 229 / .55);outline-offset:-2px}
}