:root{color-scheme:dark;--bg:#0D1424;--panel:#161d30;--purple:#302440;--gold:#B99A62;--ink:#ebe9e6;--muted:#a5aabc;--line:#384058;--wolf:#ed8585;--god:#d4b67b;--civil:#d6d9e1;--green:#6fcf97;font-family:system-ui,"Microsoft JhengHei",sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--ink);min-height:100vh}main{max-width:1180px;margin:auto;padding:18px 20px 90px}h1{font-size:29px;margin:25px 0}h2{font-size:24px;margin:12px 0;line-height:1.5}p{line-height:1.7}
button,input,select{font:inherit}button{color:var(--ink);background:var(--purple);border:1px solid var(--line);border-radius:8px;padding:10px 16px;min-height:44px;cursor:pointer}button:hover:not(:disabled){border-color:var(--gold)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #94c3e3;outline-offset:3px}button:disabled{cursor:default;opacity:.45}button[aria-pressed=true]:not(.seat):not(.preview-card){border-color:var(--gold);background:#5d4c35;box-shadow:inset 0 0 0 1px var(--gold)}.primary{background:#806a44;border-color:var(--gold);color:white}.quiet{background:transparent;font-size:13px;color:var(--muted)}.actions{display:flex;gap:8px;flex-wrap:wrap}.small,.caption{font-size:12px;color:var(--muted)}.screen{max-width:850px;margin:auto;padding:25px}.welcome{text-align:center;padding-top:12vh}.moon{width:55px;height:55px;border-radius:50%;background:#0b1020;box-shadow:7px 0 0 var(--gold);margin:20px auto}.menu{display:flex;flex-direction:column;gap:16px;max-width:380px;margin:30px auto}.menu button{min-height:58px;font-size:18px}#boardChoices{margin:0}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}.setup-grid section,details{background:var(--panel);padding:18px;border:1px solid var(--line);border-radius:12px}.setup-grid li{line-height:2}.setup-grid .villager,.library .villager,.preview-back.villager{color:var(--green)}.rules-form label{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:16px 0}details{margin-bottom:16px}summary{cursor:pointer;font-weight:600}#setupOrder{white-space:pre-line}select,input{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:9px;max-width:160px}.wolf{color:var(--wolf)}.god{color:var(--god)}.villager{color:var(--civil)}
#host{height:calc(100dvh - 136px);min-height:300px;display:grid;grid-template-rows:32px clamp(112px,25dvh,185px) minmax(0,1fr);gap:8px}.host-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;min-width:0}.host-top span:first-child{color:var(--gold);white-space:nowrap}.host-top span:nth-child(2){color:var(--muted);font-size:12px}.host-top>div{display:flex;gap:3px}.host-top button{min-height:30px;padding:4px 8px}
.host-center{background:var(--panel);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;padding:10px 14px;min-height:0;overflow:hidden}.caption{margin:0 0 2px;font-size:10px}.script-box{flex:none;margin-bottom:4px}#subtitle{font-size:clamp(20px,3vw,31px);font-weight:650;line-height:1.3;margin:0}#subtitle:empty::after{content:"—";color:var(--muted)}.judge-box{border-top:1px solid var(--line);padding-top:5px;overflow:auto;min-height:0}#hint{font-size:13px;margin:0;line-height:1.5;color:#b9c1d4}#selection{font-size:12px;color:var(--gold);margin:3px 0}#selection:empty{display:none}.judge-box .actions{margin-top:5px;gap:5px}.judge-box button{font-size:12px;min-height:31px;padding:4px 9px}#gestureResult p{color:var(--gold);font-weight:600;margin:3px 0;font-size:16px}.thumb-icon{width:35px;height:35px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}.thumb-icon.down{transform:rotate(180deg);stroke:#b89bc7}
.table{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:0}.seats{display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:6px;min-height:0}.seat{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:5px;background:var(--panel);border:1px solid var(--line);min-height:0;padding:5px 10px 23px;text-align:center;color:var(--ink);overflow:hidden}.seat-number{font-size:17px;font-weight:600}.role-name{font-size:clamp(16px,2.8vw,24px);font-weight:750;line-height:1.2;min-width:0}.seat.long-name .role-name{font-size:clamp(12px,3.4vw,21px);white-space:nowrap}.seat.wolf .role-name{color:var(--wolf)}.seat.god .role-name{color:var(--god)}.seat.villager .role-name{color:var(--civil)}#left .seat.wolf{border-left:3px solid var(--wolf)}#left .seat.god{border-left:3px solid var(--god)}#left .seat.villager{border-left:3px solid var(--civil)}#right .seat.wolf{border-right:3px solid var(--wolf)}#right .seat.god{border-right:3px solid var(--god)}#right .seat.villager{border-right:3px solid var(--civil)}.seat.unknown .role-name{color:var(--muted)}.seat:disabled{opacity:1}.seat.dead .role-name,.seat.dead .seat-number{opacity:.45}.seat.inactive{opacity:.3!important}.seat.selected{outline:2px solid #aac6ec;outline-offset:-2px}.seat.target{outline:2px dashed #86d3c0;outline-offset:-2px}.seat.speaking{box-shadow:inset 0 0 0 2px #9dbaec}.seat-tags{position:absolute;bottom:2px;display:flex;gap:3px;right:4px}#right .seat-tags{left:4px;right:auto}.seat-tags span{font-size:9px;padding:1px 4px;background:var(--purple);border-radius:3px}.seat.candidate .seat-tags span:first-child{color:#f5d497;background:#6a5533}
.sheriff-badge{position:absolute;top:1px;width:24px;height:24px;left:1px}#right .sheriff-badge{left:auto;right:1px}.seat:has(.sheriff-badge){padding-left:27px}#right .seat:has(.sheriff-badge){padding-left:10px;padding-right:27px}.skill-marks{position:absolute;left:3px;bottom:2px;display:flex;flex-direction:row-reverse;align-items:end}#right .skill-marks{left:auto;right:3px;flex-direction:row}.skill-mark{position:relative;width:24px;height:24px;flex:none}.skill-mark+.skill-mark{margin-right:-6px}#right .skill-mark+.skill-mark{margin-right:0;margin-left:-6px}.skill-mark img{width:24px;height:24px}.swap-partner{position:absolute;bottom:0;right:-1px;font-size:10px;line-height:12px;padding:0 2px;background:var(--bg);color:#56ccf2;border-radius:3px}
footer{position:fixed;bottom:73px;left:0;right:0;max-width:1180px;margin:auto;display:flex;justify-content:center;gap:10px;padding:5px 20px 7px;background:var(--bg);border-bottom:1px solid var(--line);z-index:2}footer button{min-height:32px;padding:4px 10px;font-size:12px}nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;gap:18px;max-width:1180px;margin:auto;padding:14px 20px;background:var(--bg);border-top:1px solid var(--line);z-index:2}nav button{min-width:125px}#saveStatus:empty{display:none}#saveStatus{position:fixed;bottom:120px;background:var(--bg);z-index:3}
dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:14px;width:calc(100% - 30px);max-width:460px;padding:24px}dialog::backdrop{background:#050916de}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.dialog-head h2{margin:0}output{display:block;text-align:center;font-size:64px;color:var(--gold);font-variant-numeric:tabular-nums;margin:25px 0}#gameRules{white-space:pre-line;line-height:2}.draw-dialog{text-align:center}.draw-spinner{font-size:85px;color:var(--gold);margin:20px auto;animation:draw-spin .65s linear infinite}.draw-result{font-size:26px;font-weight:600;color:var(--gold);min-height:42px;margin:20px 0}.draw-dialog button{margin:8px 0}@keyframes draw-spin{to{transform:rotate(360deg)}}
.library-tabs{display:flex;gap:12px;margin-top:20px}.library-tabs button:first-child{color:var(--wolf)}.library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}.library-heading,.library-divider{grid-column:1/-1}.library-heading{margin:8px 0;font-size:20px}.library-divider{border:0;border-top:1px solid var(--line);width:100%;margin:12px 0}.role-card{background:var(--panel);padding:8px;border:1px solid var(--line);min-width:0}.role-card img{display:block;width:100%;height:160px;object-fit:contain}.role-card span{display:block;font-size:15px;font-weight:600;padding:6px 0}
#rolePreview{background:transparent;border:0;max-width:440px;padding:8px;overflow:visible}.role-preview-content{text-align:center}.role-preview-content>p,.preview-returnhint{font-size:12px;color:var(--muted);text-align:center}.preview-returnhint{margin-top:25px}.preview-card{display:block;width:min(320px,78vw);height:min(480px,65dvh);margin:auto;padding:0;border:0;background:transparent;perspective:1000px}.preview-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s}.preview-card.flipped .preview-inner{transform:rotateY(180deg)}.preview-front,.preview-back{display:flex;position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:12px;background:var(--panel);border:1px solid var(--line);overflow:auto}.preview-front{align-items:center;justify-content:center}.preview-front img{width:100%;height:100%;object-fit:contain}.preview-back{transform:rotateY(180deg);flex-direction:column;text-align:left;padding:20px}.preview-back h2{color:inherit}.preview-back p{font-size:14px;color:var(--ink);margin:6px 0}.preview-back p:first-of-type{color:inherit}
@media(max-width:640px){main{padding:10px 8px 85px}.screen{padding:12px}.host-top{font-size:11px;gap:4px}.host-top span:nth-child(2){font-size:10px}.host-top button{font-size:11px;padding:3px 5px}.table{gap:6px}.seats{gap:4px}#host{height:calc(100dvh - 130px);grid-template-rows:30px clamp(105px,24dvh,165px) minmax(0,1fr);gap:6px}.host-center{padding:6px 9px}#subtitle{font-size:21px}#hint{font-size:11px}.judge-box button{font-size:11px;min-height:30px;padding:4px 7px}.seat{grid-template-columns:29px minmax(0,1fr);padding:3px 5px 22px;gap:3px}.seat-number{font-size:13px}.role-name{font-size:15px}.seat:has(.sheriff-badge){padding-left:22px}#right .seat:has(.sheriff-badge){padding-left:5px;padding-right:22px}.sheriff-badge{width:20px;height:20px}.seat-tags span{font-size:8px;padding:0 2px}.setup-grid{gap:8px}.setup-grid section{padding:10px}.setup-grid h2{font-size:18px}.setup-grid ul{padding-left:19px;font-size:14px}nav{padding:12px 10px}nav button{min-width:108px}footer{bottom:69px;padding:4px 8px 7px;gap:7px}footer button{font-size:11px;padding:4px 8px}.library{gap:7px}.role-card{padding:4px}.role-card img{height:110px}.role-card span{font-size:12px}.draw-result{font-size:22px}}
@media(max-height:650px){#host{grid-template-rows:28px 110px minmax(0,1fr)}.seat{padding-bottom:20px}.skill-mark,.skill-mark img{width:22px;height:22px}.skill-mark+.skill-mark{margin-right:-5px}#right .skill-mark+.skill-mark{margin-left:-5px}.role-name{font-size:14px}.judge-box{padding-top:2px}#subtitle{font-size:19px}.script-box{margin-bottom:2px}}
@media(prefers-reduced-motion:reduce){.draw-spinner{animation:none}.preview-inner{transition:none}}
@media(min-width:641px) and (max-height:650px){.seat{padding-bottom:4px}#left .seat{padding-left:calc(var(--mark-space,0px) + 10px)}#right .seat{padding-right:calc(var(--mark-space,0px) + 10px)}.seat:has(.sheriff-badge){padding-top:12px}.skill-marks{top:50%;bottom:auto;transform:translateY(-50%)}}
.judge-box{display:flex;flex-direction:column;overflow:hidden;flex:1}.judge-content{overflow:auto;min-height:0;flex:1}.judge-box .actions{flex-shrink:0}@media(min-width:641px) and (max-height:650px){#host{grid-template-rows:28px 130px minmax(0,1fr)}}
/* Approved home reference: background extracted without its text or drawn controls. */
body[data-screen=home] main{padding:0;max-width:none}
.welcome{position:relative;isolation:isolate;max-width:600px;min-height:100svh;min-height:100dvh;padding:0 max(24px,7%) calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:flex-end;background:url('art/home-background.svg') center top/100% 100% no-repeat}
.home-brand{text-align:center;position:relative;margin-top:45dvh;margin-bottom:2dvh}
.home-brand h1{font-family:Georgia,"Noto Serif TC",serif;font-size:clamp(52px,11dvh,88px);letter-spacing:.14em;color:#f2d097;margin:0;text-shadow:0 2px 15px #050916}
.home-brand p{letter-spacing:.4em;color:#ebe2d5;margin:8px 0 0;font-size:clamp(16px,3dvh,24px)}
.welcome .menu{width:100%;margin:12px auto 3dvh;gap:14px}
.welcome .menu button{position:relative;overflow:hidden;border-radius:22px;background:linear-gradient(140deg,#44485ee6,#1a1b30f0 65%);border:1px solid #747e96;box-shadow:inset 0 1px 0 #fff3,inset 0 0 0 4px #c6cad214,0 9px 20px #03051077;color:#fff9ed;font-weight:650;min-height:58px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.welcome .menu button::before{content:"";position:absolute;inset:4px 5px 55%;border-radius:18px;background:linear-gradient(110deg,#fff2,transparent)}
.welcome .menu .primary{border:1px solid #d4b581;background:linear-gradient(140deg,#4b5265d9,#211d32e6);box-shadow:inset 0 1px 0 #fff5,inset 0 0 0 4px #c7ae7621,0 9px 20px #03051077}
.welcome .menu button:active{transform:translateY(2px)}
@supports not (backdrop-filter:blur(1px)){.welcome .menu button{background:#22263c}.welcome .menu .primary{background:#303246}}
#setup .setup-grid h2{color:var(--ink)}
/* Shared skill cards: approved role PNGs only; seats retain their original layout. */
.event-card{position:relative;isolation:isolate;overflow:hidden;border-radius:12px;border:1px solid #927c4c65;background:linear-gradient(110deg,#242235e8,#352b22c9);margin:8px 0;padding:12px 14px;min-height:87px;color:#ebdfbd;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.event-card.wolf{border-color:#9b536265;background:linear-gradient(110deg,#2c1c31eb,#461e30c9);color:#efb6b4}
.event-art{position:absolute;z-index:-2;right:0;top:0;width:48%;height:100%;object-fit:cover;object-position:50% 28%;opacity:.52;filter:brightness(.65) saturate(.65);mask-image:linear-gradient(90deg,transparent,#000 38%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 38%)}
.event-card::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#221e2be6 15%,#30292288 58%,#76522230)}
.event-card.wolf::after{background:linear-gradient(90deg,#2b192be6 15%,#39162e88 58%,#841d3138)}
.event-content{position:relative;width:80%;min-width:0;text-shadow:0 1px 3px #080913}
.event-card h3{font-size:15px;margin:0 0 5px;color:inherit;line-height:1.3}
.event-line{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px;line-height:1.5;color:#f8f1e3}
.skill-icon{display:inline-block;vertical-align:middle;width:27px;height:27px;object-fit:contain;flex-shrink:0}
.event-result{font-size:12px;line-height:1.5;margin:4px 0 0;color:#e6d8b8}
.operation-card{padding:7px 10px;min-height:54px;max-width:420px}
.operation-card h3{font-size:12px;margin:0 0 2px}.operation-card .event-line{font-size:12px}.operation-card .skill-icon{width:23px;height:23px}
.finished-screen{height:calc(100dvh - 20px);max-width:850px;margin:auto;display:flex;flex-direction:column;padding-bottom:calc(80px + env(safe-area-inset-bottom));overflow:hidden}
body[data-screen=finished] main{padding:10px 14px 0}
.victory{flex-shrink:0;text-align:center;padding:24px 12px 18px;border-radius:18px;background:radial-gradient(ellipse at top,#263e5b66,transparent 75%),linear-gradient(140deg,#101d32,#24223a);border:1px solid #b5a07955}
.victory>p:first-child{font-size:14px;letter-spacing:.22em;color:#c6b99c;margin:0}
.victory h1{font-size:clamp(23px,5vw,34px);color:#e5ce9c;margin:14px 0 6px;line-height:1.3}
.victory>p:last-child{font-size:13px;color:#ced4e2;margin:0}
.wolves-win .victory{background:radial-gradient(ellipse at top,#78363b55,transparent 75%),linear-gradient(140deg,#251324,#20182e);border-color:#9e596e55}
.wolves-win .victory h1{color:#e9aaaa}.wolves-win .victory>p:first-child{color:#c7919b}
.recap-title{flex-shrink:0;font-size:16px;margin:17px 4px 8px}
.night-recap{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;padding:0 3px 10px;scrollbar-gutter:stable}
.recap-night{padding:0;background:transparent;border:0;margin:0 0 10px}
.recap-night>summary{background:#242438bb;border:1px solid #51556870;border-radius:9px;padding:12px 14px;color:#e9decb;list-style:none;display:flex;justify-content:space-between}
.recap-night>summary::-webkit-details-marker{display:none}
.recap-night>summary::after{content:"⌄"}.recap-night[open]>summary::after{content:"⌃"}
.night-result{padding:12px 14px;margin:8px 0 12px;background:#263044aa;border:1px solid #72809950;border-radius:12px;color:#d3dbea;backdrop-filter:blur(8px)}
.night-result h3{font-size:14px;margin:0 0 4px}.night-result p{font-size:14px;margin:0}
.finish-actions{position:fixed;bottom:0;left:0;right:0;z-index:3;max-width:850px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 17px calc(14px + env(safe-area-inset-bottom));background:#141a2aee;border-top:1px solid #46475d}
.finish-actions button{min-width:0;min-height:48px}
#finishDialog{background:linear-gradient(135deg,#302942ed,#161d2bf5);box-shadow:0 14px 50px #0006;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
/* Three-row timer with independently scrollable minute/second wheels. */
#timerDialog{padding:18px;max-width:430px}
#timerDialog .dialog-head{margin-bottom:12px}
.timer-adjust{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.timer-adjust>button{font-size:13px;padding:8px;min-width:60px}
.time-wheels{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:12px;background:#101627;overflow:hidden}
.time-wheels::after{content:"";position:absolute;pointer-events:none;top:44px;height:40px;left:0;right:0;border-top:1px solid #cab78077;border-bottom:1px solid #cab78077;background:#bdaa6914}
.time-wheel{width:60px;height:128px;overflow-y:auto;scroll-snap-type:y mandatory;padding:44px 0;scrollbar-width:none;touch-action:pan-y;overscroll-behavior:contain}
.time-wheel::-webkit-scrollbar{display:none}
.time-wheel button{display:block;width:100%;height:40px;min-height:40px;padding:0;font-size:25px;font-variant-numeric:tabular-nums;color:#8790a5;border:0;border-radius:0;background:transparent;scroll-snap-align:center;scroll-margin:0}
.time-wheel button[aria-selected=true]{color:#f4dfb2;font-weight:700}
.time-wheel.locked{pointer-events:none;overflow-y:hidden}.time-wheel button:disabled{opacity:1}
.timer-controls{justify-content:center;margin-top:14px}
#timerNotice{font-size:12px;text-align:center;margin:6px 0 0}
@media(max-width:640px){.finished-screen{height:calc(100dvh - 12px)}body[data-screen=finished] main{padding:6px 8px 0}.victory{padding:20px 9px 15px}.event-card{padding:11px;min-height:83px}.operation-card{padding:6px 9px;min-height:50px}.event-content{width:85%}.event-line{font-size:13px}}
@media(max-height:620px){.welcome{justify-content:flex-end}.home-brand{margin-top:40dvh;margin-bottom:0}.home-brand h1{font-size:42px}.home-brand p{font-size:16px;margin:4px 0}.welcome .menu{gap:9px;margin:10px auto 0}.welcome .menu button{min-height:46px}.victory{padding:12px}.victory h1{margin:6px 0}.recap-title{margin:10px 3px 6px}}
@media(min-width:641px){.welcome{border:1px solid #74624a55;border-radius:20px;margin-top:12px;min-height:calc(100dvh - 24px)}}
@media(prefers-reduced-motion:reduce){.welcome .menu button{transition:none}}
/* Keep the existing host controls above the iPhone home indicator. */
body[data-screen=host] main{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
#host{height:calc(100dvh - 136px - env(safe-area-inset-bottom))}
#host nav{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
#host footer{bottom:calc(73px + env(safe-area-inset-bottom))}
#saveStatus{bottom:calc(120px + env(safe-area-inset-bottom))}
@media(max-width:640px){body[data-screen=host] main{padding-bottom:calc(85px + env(safe-area-inset-bottom))}#host{height:calc(100dvh - 130px - env(safe-area-inset-bottom))}#host nav{padding-bottom:calc(12px + env(safe-area-inset-bottom))}#host footer{bottom:calc(69px + env(safe-area-inset-bottom))}}
/* Host controls are plain SVG + text; role art remains exclusive to recap/library. */
.operation-control{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gold);margin:3px 0}
.script-box{display:flex;flex-direction:column;justify-content:center;min-height:54px;padding-bottom:7px}
.judge-content{padding-top:0}
/* A revealed idiot stays alive; use a distinct card without the death style. */
.seat.idiot-revealed{background:linear-gradient(120deg,#303854,#242038);border-top:2px solid #b9aad8;border-bottom:2px solid #b9aad8;box-shadow:inset 0 0 0 1px #b9aad866}
.event-card.villager{border-color:#6d9d7865;background:linear-gradient(110deg,#142e28eb,#264335c9);color:#badebd}
.event-card.villager::after{background:linear-gradient(90deg,#152b25e6 15%,#18362c88 58%,#43855430)}
.mixed-outcome{flex-shrink:0;margin:8px 2px 0;padding:9px 11px;border:1px solid #62816b66;border-radius:9px;background:#19352e88;color:#c6e0cb;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
/* Council theme: stronger decoration at entry; quiet frosted host controls. */
:root{--bg:#142132;--panel:#1b2a3c;--purple:#2b3045;--line:#46546a;--ink:#ece8df;--muted:#b0bac8;--gold:#c0aa84;--wolf:#db9293;--god:#d2bd92;--green:#91baa0}
body{background:radial-gradient(ellipse at 50% 0,#34435488,transparent 65%),var(--bg)}
body[data-screen=host]{background:var(--bg)}
.welcome{background:url('art/council-background.svg') center center/cover no-repeat;max-width:none;padding:0 24px calc(24px + env(safe-area-inset-bottom));justify-content:flex-end}
.home-brand{margin:0 0 10dvh;padding-top:38dvh}.home-brand h1{font-size:clamp(38px,7dvh,70px);letter-spacing:.13em;color:#dac7a3;font-weight:600}.home-brand p{font-size:clamp(14px,2.2dvh,20px);letter-spacing:.18em;color:#cdd2d7}
.welcome .menu{max-width:350px;margin:0 auto 5dvh;gap:13px}.welcome .menu button{border-radius:16px;min-height:58px;color:var(--ink);box-shadow:inset 0 1px 0 #dfe4e51a,0 8px 24px #08111e66;background:linear-gradient(135deg,#354256c9,#222a3add);border-color:#69758a}.welcome .menu .primary{background:linear-gradient(135deg,#455063cc,#272e3de6);border-color:#b4a082;box-shadow:inset 0 1px 0 #f4e9d330,0 8px 24px #08111e66}
body[data-screen=counts],body[data-screen=boards],body[data-screen=setup]{background:linear-gradient(#142132d9,#142132f5),url('art/council-background.svg') center/cover fixed}
#counts,#boards{text-align:center}.page-subtitle{font-size:14px;color:var(--muted);margin:0 0 22px}
.count-choices{max-width:440px;gap:18px}.count-choices button{position:relative;text-align:left;padding:22px 24px;background:linear-gradient(125deg,#34465bc9,#263148df);border:1px solid #ab98746b;border-radius:15px;box-shadow:inset 0 1px 0 #ded6c81c;min-height:86px}.count-choices button::after{content:'›';position:absolute;right:24px;color:var(--gold)}
#boards{height:calc(100dvh - 55px - env(safe-area-inset-bottom));max-width:660px;display:flex;flex-direction:column;min-height:0;padding-bottom:0}#boards h1{margin:10px 0 8px}.board-window{padding:12px;background:#243247c7;border:1px solid #7b839460;border-radius:18px;min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;box-shadow:inset 0 1px 0 #c4cbd71a}
#boardChoices{max-width:none;gap:9px}#boardChoices button{position:relative;min-height:56px;padding:14px 36px 14px 17px;text-align:left;font-size:17px;background:#3440578c;border-color:#6a778a50;border-radius:10px}#boardChoices button::after{content:'›';position:absolute;right:15px;color:#b9b2a2}
.page-back{display:block;margin:16px auto 0;min-width:140px;min-height:44px}#boards>.page-back{flex-shrink:0;margin-bottom:8px}
.setup-grid section,.rules-form,.night-order{background:linear-gradient(135deg,#2b3a4dce,#1f2b3ee8);border-color:#77809150;box-shadow:inset 0 1px 0 #ced6e015}
.host-center,.seat{background:linear-gradient(135deg,#2b3b4bcf,#202d40ef);border-color:#67748970;box-shadow:inset 0 1px 0 #dae0e015}
.role-card img{height:auto;aspect-ratio:5/7;object-fit:contain}
.preview-card{height:min(65dvh,448px);width:min(78vw,320px,calc(65dvh * 5 / 7))}.preview-front:has(img){border:0;background:transparent;border-radius:0}
@supports not (backdrop-filter:blur(1px)){.seat,.host-center,.board-window,.setup-grid section{background:#243347}}
@media(max-height:620px){.home-brand{padding-top:20dvh;margin-bottom:3dvh}.home-brand h1{font-size:36px}.welcome .menu{margin-bottom:2dvh}.welcome .menu button{min-height:48px}.welcome{padding-bottom:10px}}
@media(min-width:641px){.welcome{border:0;border-radius:0;margin:0;min-height:100dvh}.home-brand{padding-top:38dvh}}
/* README 43–45: approved backgrounds, unified cards and input-specific focus. */
body{background-image:linear-gradient(#0d142433,#0d142433),var(--page-background);background-size:cover;background-position:center;background-attachment:fixed}
.welcome{background:none}
.role-card{background:var(--panel);padding:6px;border:1px solid var(--line);border-radius:12px}
.role-card span{white-space:normal;overflow-wrap:anywhere}
.preview-back .description-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:start}
.preview-card{-webkit-tap-highlight-color:transparent;box-shadow:none;outline:none}
.preview-card:focus-visible{outline:2px solid var(--god);outline-offset:5px}
.preview-card:focus:not(:focus-visible){outline:none;box-shadow:none}
.seat.candidate{border:2px solid #439DFF;box-shadow:0 0 0 1px #439DFF}
.board-tabs{display:flex;justify-content:center;gap:12px;margin:12px 0}
.board-tabs[hidden]{display:none}.board-tabs [aria-pressed=true]{border-color:var(--god);color:var(--god)}
body[data-screen=host]{background-image:linear-gradient(#0d1424b8,#0d1424c9),var(--page-background)}
@media(prefers-reduced-motion:reduce){body{background-attachment:scroll}}
.identity-review{margin:auto;width:min(92vw,680px);padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.identity-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.identity-card{padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:10px}.identity-card img{width:100%;aspect-ratio:5/7;object-fit:contain}.identity-card p{font-size:12px;overflow-wrap:anywhere}
body[data-input=pointer] #previewCard:focus,body[data-input=pointer] #previewCard:focus-visible{outline:none;box-shadow:none}
body[data-input=keyboard] #previewCard:focus-visible{outline:2px solid var(--god);outline-offset:5px}
#left .seat.candidate,#right .seat.candidate{border-color:#439DFF}
.identity-review[open]{max-height:80dvh;overflow-y:auto}.identity-review h2{position:static}
body[data-screen=home]{background-position:left center}
.event-card.face-priority{min-height:clamp(105px,27vw,215px)}
/* README 48: fixed decorative backdrop; scroll only foreground containers. */
html,body{height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
body{position:relative;isolation:isolate;background:var(--bg)!important}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#0d142433,#0d142433),var(--page-background);background-size:cover;background-position:center;transform:translateZ(0)}
body[data-screen=home]::before{background-position:left center}
body[data-screen=host]::before{background-image:linear-gradient(#0d1424b8,#0d1424c9),var(--page-background)}
main{height:100%;overflow:hidden;padding-top:max(10px,env(safe-area-inset-top))}
#counts,#setup,#encyclopedia{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain}
#boards{height:100%;padding-bottom:max(8px,env(safe-area-inset-bottom))}
body[data-screen=boards] main,body[data-screen=setup] main,body[data-screen=counts] main,body[data-screen=encyclopedia] main{padding-bottom:8px}
.welcome{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain}
#infectionDialog{background:linear-gradient(135deg,#302440ee,#182238f5);backdrop-filter:blur(12px)}
nav{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
footer{bottom:calc(69px + env(safe-area-inset-bottom))}
#host{height:calc(100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:0}
/* Consistent viewport and single safe-area owner for installed PWA. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
html,body{height:var(--app-height,100dvh)}
main{height:100%;padding-top:max(10px,var(--safe-top));padding-bottom:max(8px,var(--safe-bottom));min-height:0}
body[data-screen=boards] main,body[data-screen=setup] main,body[data-screen=counts] main,body[data-screen=encyclopedia] main{padding-bottom:max(8px,var(--safe-bottom))}
#boards{height:100%;min-height:0;padding-bottom:0}#boards .board-window{flex:1 1 0;min-height:0}#boardBack{flex:0 0 auto}
#host{height:calc(var(--app-height,100dvh) - 140px - var(--safe-top) - var(--safe-bottom))}
.welcome{padding-bottom:16px}.home-brand{flex-shrink:0}.welcome .menu{flex-shrink:0;margin-bottom:12px}
.problem-report{display:block;margin:0 auto;color:#c7d5e2;text-decoration:none;background:#26344a9c;border:1px solid #8497b657;border-radius:12px;padding:8px 22px;font-size:13px;min-height:36px}

/* Use only the current scene as fallback; before app initialization keep the navy canvas. */
body{--background-mask:.45}
body::before{z-index:-2;background-image:var(--page-background,none);background-size:cover;background-position:center;background-repeat:no-repeat}
body[data-screen=home]::before,body[data-screen=host]::before{background-image:var(--page-background,none);background-position:center}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:rgb(13 20 36 / var(--background-mask));transform:translateZ(0)}
body[data-screen=home]{--background-mask:.15}body[data-screen=counts]{--background-mask:.25}body[data-screen=boards]{--background-mask:.35}body[data-screen=setup]{--background-mask:.45}body[data-screen=host]{--background-mask:.6}body[data-screen=encyclopedia],body[data-screen=finished]{--background-mask:.55}
.recap-segment{margin:0 0 18px}.recap-section-title{margin:12px 0 8px;font-size:17px;color:#eadbbc}
.recap-event{display:grid;grid-template-columns:minmax(32px,.8fr) minmax(42px,1fr) minmax(34px,.75fr) minmax(42px,1fr) minmax(32px,.8fr);gap:5px;align-items:center;min-height:100px;padding:10px 7px;background:#142138c9;border:1px solid #8191a64d;border-radius:12px;overflow:visible}
.recap-image{min-width:0;width:100%;display:flex;justify-content:center}.recap-portrait{width:100%;max-height:112px;aspect-ratio:5/7;object-fit:contain;display:block}
.recap-person{min-width:0;text-align:center;display:flex;flex-direction:column;gap:5px;font-size:clamp(11px,2.8vw,15px);line-height:1.35;overflow-wrap:anywhere}
.recap-person.wolf,.final-identity-card.wolf{color:var(--wolf)}.recap-person.god,.final-identity-card.god{color:var(--god)}.recap-person.villager,.final-identity-card.villager{color:var(--green)}
.recap-effect{min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}.recap-effect .skill-icon{width:30px;height:30px;object-fit:contain}.recap-outcome{font-size:11px;line-height:1.3;text-align:center;color:#e8d6b2;overflow-wrap:anywhere}
.recap-double-targets{grid-column:4 / 6;min-width:0;display:flex;flex-direction:column;gap:6px}.recap-target-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4px}.recap-target-row img{max-height:80px}
.recap-mapping{grid-column:1 / -1;font-size:11px;text-align:center;margin:2px 0;color:#d4dceb}.recap-no-target{grid-column:4 / 6;font-size:13px;text-align:center}.single-event{grid-template-columns:1fr 1.4fr .6fr 1.5fr}.recap-event-label{font-size:13px;text-align:center}.badge-destroyed{color:#e99595;font-size:28px;text-align:center}.pk-result{grid-column:1 / -1;margin:0;font-size:13px}
.recap-victory{margin:18px 0}.recap-victory h2{font-size:23px}.wolves-win .recap-victory h2{color:var(--wolf)}.good-win .recap-victory h2{color:var(--god)}
.final-identity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.final-identity-card{min-width:0;display:grid;grid-template-columns:minmax(36px,.75fr) minmax(0,1fr);align-items:center;gap:5px;border:1px solid #8191a64d;border-radius:12px;background:#142138cb;padding:7px}.final-identity-card .recap-person{font-size:12px}.final-identity-card img{max-height:114px}.identity-status,.identity-original{font-size:11px;color:#d0d9e6}.final-identities h4{margin:12px 0 7px}
#finished{height:100%;padding-bottom:85px}#finished .recap-title{margin:12px 0;flex:none}.night-recap{scrollbar-gutter:auto}.night-result h4{margin:0 0 5px}.night-result p{margin:0}
@media(min-width:768px){.recap-event{gap:12px;min-height:145px;padding:14px 20px}.recap-portrait{max-height:160px}.recap-effect .skill-icon{width:42px;height:42px}.recap-outcome{font-size:14px}.final-identity-card .recap-person{font-size:15px}}

/* Approved original portraits crop and blend into the existing glass cards. */
.recap-event{overflow:hidden;position:relative;background:linear-gradient(110deg,#203049ba,#242438b0);backdrop-filter:blur(7px)}
.recap-event>.recap-image{align-self:stretch;margin:-10px -7px; width:calc(100% + 14px);overflow:hidden}
.recap-event>.recap-image:first-child{mask-image:linear-gradient(to right,#000 65%,transparent);-webkit-mask-image:linear-gradient(to right,#000 65%,transparent)}
.recap-event>.recap-image:last-child{mask-image:linear-gradient(to left,#000 65%,transparent);-webkit-mask-image:linear-gradient(to left,#000 65%,transparent)}
.recap-fused-art{aspect-ratio:auto;height:100%;min-height:90px;max-height:none;filter:saturate(.8);opacity:.85}
.recap-target-row .recap-image{height:84px;overflow:hidden;mask-image:linear-gradient(to left,#000 70%,transparent);-webkit-mask-image:linear-gradient(to left,#000 70%,transparent)}
.final-identity-card .recap-image{height:100%;overflow:hidden;mask-image:linear-gradient(to right,#000 80%,transparent);-webkit-mask-image:linear-gradient(to right,#000 80%,transparent)}
.recap-victory{margin:0 0 18px}
#timerDialog{width:min(92vw,430px);overflow-x:hidden;position:relative}
.timer-countdown{min-height:128px;display:flex;align-items:center;justify-content:center;font-size:clamp(42px,12vw,72px);font-variant-numeric:tabular-nums;line-height:1.25;letter-spacing:.04em;color:#f4dfb2}
.timer-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}.timer-controls button{width:100%;min-height:48px}
.timer-defaults{display:block;margin:10px auto 0;padding:8px 22px;min-height:44px;max-width:145px;font-size:13px}
.recap-event:not(.single-event){grid-template-columns:minmax(32px,1.15fr) minmax(42px,.85fr) minmax(34px,.7fr) minmax(42px,.85fr) minmax(32px,1.15fr)}
.problem-report:focus-visible{outline:2px solid #94c3e3;outline-offset:3px}
nav{padding-bottom:calc(12px + var(--safe-bottom))}footer{bottom:calc(69px + var(--safe-bottom))}
html,body{min-height:0}

#setup{display:flex;flex-direction:column;overflow:hidden}.setup-content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}#setup .actions{flex-shrink:0;margin:0;padding:12px 0;background:var(--bg)}

/* Footer reserves space while showing only the existing action buttons. */
#setup .actions{background:transparent;padding:12px 0}

/* README 53/54: operation states take priority over role border colours. */
#host .seat.candidate{border-color:#CBD5E1;box-shadow:inset 0 0 0 1px #CBD5E1}
#host .seat.withdrawn{border-color:#778396;box-shadow:inset 0 0 0 1px #778396}
#host .seat.withdrawn .seat-tags span:first-child{background:#343f50;color:#d9e0ec}
#host .seat.vote-selected{border-color:#A99AC7;outline:2px solid #A99AC7;outline-offset:-2px;box-shadow:none}
.timer-countdown{position:relative;width:min(240px,100%);height:auto;min-height:0;aspect-ratio:1;margin:8px auto;color:#CBD5E1;font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,12vw,58px);letter-spacing:.02em}
.timer-ring{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:2}
.timer-ring-track{stroke:#CBD5E1;opacity:.12}
.timer-ring-progress{stroke:currentColor;stroke-dasharray:1;transform:rotate(-90deg);transform-origin:120px 120px;transition:stroke-dashoffset .25s linear,color .3s ease}
.timer-countdown[data-tone=warm]{color:#F3E9D2}.timer-countdown[data-tone=urgent]{color:#E9A095}
@media(max-height:550px){.timer-countdown{width:min(180px,100%)}}
@media(prefers-reduced-motion:reduce){.timer-ring-progress{transition:none}}

/* README 55: election labels persist; detailed ballots are an optional dialog. */
#host .seat.candidate .seat-tags span:first-child{background:#343f50;color:#CBD5E1}
.vote-dialog{width:min(94vw,460px);height:min(680px,calc(var(--app-height,100dvh) - 24px));max-height:calc(var(--app-height,100dvh) - 24px);padding:14px;overflow:hidden;display:flex;flex-direction:column;gap:10px}
.vote-dialog:not([open]){display:none}.vote-dialog .dialog-head{flex:none;margin:0;gap:8px}.vote-dialog h2{margin:0;font-size:22px}.vote-dialog .dialog-head button{flex:none}
.vote-dialog p{margin:0}.vote-modes{display:flex;gap:6px;flex:none}.vote-modes button{flex:1;padding:8px 4px;font-size:14px}
.vote-step{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#19223580}
.vote-step-info{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}.vote-step-info>span{font-size:13px;color:var(--muted)}.vote-step-info strong{font-size:22px;line-height:1.25}.vote-step>#voteStepCount{white-space:nowrap;font-size:13px;color:var(--muted)}
.vote-scroll{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:2px 2px 8px}.vote-voter-grid,.vote-choice-grid{display:grid;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr))}
.vote-voter-grid button{position:relative;min-width:0;min-height:64px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.vote-voter-grid button small{font-size:10px;color:var(--muted)}.vote-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.vote-choice-grid button{position:relative;min-width:0;min-height:56px;padding:8px 5px}
#voteVoters button.ballot-selected{border-color:#A99AC7;background:#302f46;box-shadow:inset 0 0 0 1px #A99AC7}
#voteVoters button.ballot-selected::after{content:'';position:absolute;top:5px;right:7px;width:5px;height:9px;border:solid #A99AC7;border-width:0 2px 2px 0;transform:rotate(45deg)}
.vote-navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 4px}.vote-navigation button{min-height:44px}
#voteStepHint{margin:8px 0!important;color:var(--muted)}
.vote-dialog img,.vote-people img{width:18px;height:18px;vertical-align:middle;margin-left:3px}.vote-dialog details{margin:10px 0 0;padding:10px;background:transparent}
.vote-footer{flex:none;padding:8px 0 max(0px,var(--safe-bottom,env(safe-area-inset-bottom)));background:var(--bg)}.vote-footer button{width:100%;min-height:44px}
.vote-groups>div{padding:8px 0;border-bottom:1px solid var(--line)}.vote-groups>div:last-child{border-bottom:0}.vote-people{display:flex;flex-wrap:wrap;gap:8px;margin:5px 0 0!important;font-size:13px;color:var(--muted)}.vote-people>span{display:inline-flex;align-items:center;white-space:nowrap}
.vote-records{margin:0 0 12px;padding:10px 12px;background:#161d30b8;color:var(--ink);font-size:13px}.vote-records>summary{font-weight:500}.vote-records h4{font-size:13px;margin:10px 0 0}.vote-records details{margin:10px 0 0;padding:8px;background:transparent}.vote-records .vote-groups strong{font-weight:600}
@media(max-height:480px){.vote-dialog{gap:5px;padding:9px}.vote-dialog h2{font-size:18px}.vote-dialog .dialog-head button{padding:4px 10px}.vote-modes button{padding:5px 2px}.vote-step{padding:8px}.vote-step-info strong{font-size:21px}.vote-choice-grid button{min-height:48px}.vote-footer{padding-top:4px}}

/* Keep every editing control scrollable above the fixed submission footer. */
.vote-scroll>.vote-modes,.vote-scroll>.vote-step,.vote-scroll>#voteProgress{margin:10px 0}
#voteSubmissionHint{margin:0 0 6px;overflow-wrap:anywhere}
#voteOptions button+button{margin-top:8px}

/* Host controls: floating glass buttons, without a surrounding bottom panel. */
#host>footer,#host>nav{background:transparent;border:0;box-shadow:none}
#host>footer button,#host>nav button{
  background:linear-gradient(140deg,#ffffff20,transparent 52%),linear-gradient(135deg,#30244080,#26344a66);
  border-color:#a5b3cc70;
  box-shadow:inset 0 1px 0 #ffffff38,inset 0 -1px 0 #ffffff0a,0 3px 12px #03081438;
  backdrop-filter:blur(14px) saturate(145%);-webkit-backdrop-filter:blur(14px) saturate(145%);
  color:#f3f1ec;text-shadow:0 1px 3px #030814d9;font-weight:600;
}
#host>nav button.primary{
  background:linear-gradient(140deg,#ffffff14,transparent 52%),linear-gradient(135deg,#806a44b3,#806a4499 58%,#806a4480);
  border-color:var(--gold);color:#fffaf0;
}
#host>footer button:hover:not(:disabled),#host>nav button:hover:not(:disabled){border-color:var(--gold)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #host>footer button,#host>nav button{background:linear-gradient(135deg,#302440d9,#26344acc)}
  #host>nav button.primary{background:linear-gradient(135deg,#806a44eb,#806a44d9)}
}
/* VOTE-01–62: isolated ordinary-exile editor; election and PK controls stay intact. */
.exile-editor{position:fixed;inset:max(12px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(12px,var(--safe-bottom)) max(10px,env(safe-area-inset-left));margin:auto;width:min(94vw,460px);height:min(740px,calc(var(--app-height,100dvh) - max(12px,var(--safe-top)) - max(12px,var(--safe-bottom)) - 8px));max-height:calc(var(--app-height,100dvh) - max(12px,var(--safe-top)) - max(12px,var(--safe-bottom)) - 8px);padding:12px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.exile-editor:not([open]){display:none}.exile-editor h2{font-size:1.125rem;margin:0}.exile-editor p{margin:0}.exile-editor .dialog-head{margin:0;min-height:44px}.exile-header{flex:none;min-height:0;max-height:calc(100% - 160px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.exile-header>.vote-modes{margin:6px 0}.exile-header .vote-modes button{min-height:44px;overflow-wrap:anywhere}
.exile-candidates,.exile-voters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.exile-candidates{max-height:32dvh;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px}.exile-candidates button,.exile-voters button{position:relative;min-width:0;min-height:60px;padding:6px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:.9375rem;overflow-wrap:anywhere}.exile-candidates button small,.exile-voters button small{font-size:.75rem;color:var(--muted)}.exile-candidates button[aria-pressed=true],.exile-voters .ballot-selected{background:#302f46!important;border-color:#A99AC7!important;box-shadow:inset 0 0 0 1px #a99ac7!important}
.exile-voters .ballot-selected::after{content:'';position:absolute;top:4px;right:5px;width:5px;height:9px;border:solid #a99ac7;border-width:0 2px 2px 0;transform:rotate(45deg)}.exile-voters .ballot-other{background:#263041;border-color:#546073}.exile-editor img{width:18px;height:18px;vertical-align:middle;margin-left:2px}.exile-voters{min-height:44px;flex:1;overflow:auto;align-content:start;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch;padding:2px}.exile-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.exile-navigation{display:flex;gap:8px;margin:4px 0}.exile-navigation button{flex:1;min-height:44px;font-size:.875rem}.exile-footer{flex:none;max-height:38%;overflow:auto;overscroll-behavior:contain}.exile-footer>#exileVoteDone{width:100%;min-height:44px;font-size:.9375rem}.exile-footer details{margin:2px 0 0;padding:0;border:0;background:none}.exile-footer summary{min-height:36px;padding:7px;font-size:.8rem}.exile-footer details button{min-height:44px;font-size:.8rem;margin:2px}.exile-editor #exileVoteError:not(:empty){font-size:.8rem;padding:4px}
@media(max-width:360px){.exile-candidates,.exile-voters:not(.exile-choices){grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Relative minimum widths also allow four columns to become three at larger text sizes. */
.exile-candidates,.exile-voters:not(.exile-choices){grid-template-columns:repeat(auto-fit,minmax(max(calc((100% - 18px)/4),min(4.2rem,calc((100% - 12px)/3))),1fr))}
@media(max-width:360px){.exile-candidates,.exile-voters:not(.exile-choices){grid-template-columns:repeat(3,minmax(0,1fr))}}
.vote-result{padding:8px;margin:8px 0;border:1px solid #6b739354;border-radius:10px;background:#18213599;font-size:.85rem}.vote-result>summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px;cursor:pointer;list-style:none;min-height:32px}.vote-result-heading{flex:1;min-width:0}.vote-edit{font-size:.75rem;min-height:32px;padding:4px 7px}.vote-result-compact{flex-basis:100%;width:100%}.vote-result[open]>.vote-result-compact,.vote-result[open]>summary>.vote-result-compact{display:none}.vote-result-candidate{padding:7px 9px;margin:6px 0;border:1px solid #606c8140;border-radius:8px}.vote-highest{border-color:#a99ac7a0;background:#3e385969}.vote-result-line{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.vote-result-line strong{font-weight:600}.vote-result-line>span{font-weight:400}.vote-result-people{margin:3px 0!important;color:var(--muted);font-size:.75rem;line-height:1.6;overflow-wrap:anywhere}.vote-result-people>span{display:inline-flex;align-items:center;white-space:nowrap}.vote-result-people img{width:16px;height:16px;vertical-align:middle;margin:0 2px}.vote-result-abstain{padding:6px 4px;color:var(--muted);font-size:.75rem}.vote-no-valid{margin:8px 0!important}.vote-result-content{overflow:hidden}.vote-records .vote-result{background:transparent}.vote-records .vote-result details{margin:0}
.vote-mismatch{position:absolute;left:10px;right:10px;bottom:calc(100% + 4px);margin:0;padding:6px 8px;border-radius:7px;background:#182335ed;color:#d5c7e1;font-size:12px;line-height:1.45;text-align:left}
#host:has(#voteMismatch:not([hidden]))>footer{bottom:calc(69px + var(--safe-bottom) + var(--vote-warning-height))}
#host:has(#voteMismatch:not([hidden])){height:calc(var(--app-height,100dvh) - 140px - var(--safe-top) - var(--safe-bottom) - var(--vote-warning-height))}
@media(prefers-reduced-motion:reduce){.vote-result-content,.exile-editor button{animation:none;transition:none}}

/* Ordinary exile follow-up: distinct voter identity, compact readable type. */
.exile-editor #exileCurrentVoter{display:inline-flex;align-items:center;justify-content:center;min-width:88px;min-height:44px;margin:4px 0;padding:6px 16px;border:1px solid #b99a6299;border-radius:9px;background:#243248b3;color:var(--ink);font-size:1.125rem;font-weight:650;line-height:1.3}
.exile-editor[data-mode=individual] .exile-footer{max-height:50%}

/* Vote UX follow-up: distinguish who receives votes from who casts them. */
.vote-dialog .vote-footer{min-height:80px;max-height:48%;overflow:auto;overscroll-behavior:contain}
.vote-footer>.vote-navigation{margin:0 0 8px}
.exile-editor .exile-header{flex:0 1 auto;min-height:44px;max-height:52%}
.exile-target-section{padding:8px;border:1px solid #52658180;border-radius:12px;background:#13203380}
.exile-section-title{font-size:.875rem;font-weight:650;line-height:1.4;color:#dce5f1}
.exile-section-help{font-size:.75rem;line-height:1.45;color:#b5c3d5;overflow-wrap:anywhere}
.exile-target-section>.exile-section-help{margin:3px 0 7px}
.exile-target-section .exile-candidates{max-height:clamp(64px,28dvh,224px)}
.exile-candidates button{border-radius:7px;background:#263248}
.exile-voter-section{display:flex;flex-direction:column;flex:1;min-height:116px;gap:6px;overflow:hidden;border-top:1px solid #8193af80;padding-top:10px}
.exile-voter-heading{flex:0 1 auto;min-height:22px;max-height:calc(100% - 50px);overflow:auto;overscroll-behavior:contain}
.exile-section-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:3px 8px}
.exile-voter-heading>.exile-section-help{margin-top:4px;min-height:2.9em}
.exile-voters:not(.exile-choices) button{border-radius:24px;background:#17313e;border-color:#607f8f}
.exile-voter-section .exile-voters{min-height:44px;flex:1}
.exile-editor .exile-footer{flex:0 1 auto;min-height:80px}

.exile-voters:not(.exile-choices) button.ballot-other{background:#263041;border-color:#546073}

/* Compact target dropdown; control containers have no background panel. */
.vote-dialog .vote-footer,.exile-editor .exile-footer{background:transparent;border:0;box-shadow:none}
.vote-navigation,.exile-navigation{background:transparent;border:0;box-shadow:none}
.exile-target-section{padding:0;border:0;background:transparent}
.exile-target-picker{margin:6px 0 0;padding:0;border:0;background:transparent}
.exile-target-picker>summary{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;list-style:none;border:1px solid #a99ac790;border-radius:8px;background:#263248;color:var(--ink);font-size:.9375rem;cursor:pointer}
.exile-target-picker>summary::-webkit-details-marker{display:none}
.exile-target-picker>summary::after{content:'';width:7px;height:7px;border-right:2px solid #c3cbdb;border-bottom:2px solid #c3cbdb;transform:rotate(45deg);margin-left:auto;margin-right:3px}
.exile-target-picker[open]>summary::after{transform:rotate(225deg)}
.exile-target-picker>summary small{font-size:.75rem;color:var(--muted)}
.exile-target-picker .exile-candidates{display:flex;flex-direction:column;gap:0;margin-top:4px;padding:3px;max-height:clamp(64px,26dvh,224px);border:1px solid #61728f;border-radius:8px;background:#182638}
.exile-target-picker .exile-candidates button{display:flex;flex-direction:row;justify-content:space-between;flex:none;min-height:44px;padding:10px 12px;border:0;border-bottom:1px solid #60718b50;border-radius:5px;background:transparent}
.exile-target-picker .exile-candidates button:last-child{border-bottom:0}