:root{color-scheme:light;--ink:#002b2e;--cream:#fff0c6;--gold:#d5ae5b;--red:#b51810;--line:#c29743;--blue:#086582;font-family:'Arial Narrow','Roboto Condensed',Impact,Arial,sans-serif;color:var(--ink);background:#00282c;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:radial-gradient(ellipse at top,#074047,#001e21 75%)}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e0aa20;outline-offset:3px}button,input,select{-webkit-tap-highlight-color:transparent}img{display:block;max-width:100%;user-select:none}#app{height:100svh;padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:center}h1,h2,h3,p{margin:0}h2{font-size:clamp(17px,2.7svh,24px);line-height:1.15}h3{font-size:16px}p{line-height:1.35}small,.small{font-size:clamp(11px,1.7svh,14px)}.frame{width:100%;height:100%;max-width:470px;display:flex;flex-direction:column;border:3px solid var(--ink);border-radius:25px;overflow:hidden;background:var(--ink);box-shadow:0 0 0 2px #e6cd91,0 20px 80px #0008}.header{position:relative;flex:0 0 min(17svh,140px);min-height:88px;overflow:hidden}.header>img{width:100%;height:100%;object-fit:cover;object-position:center top}.back{position:absolute;left:12px;top:12px;width:38px;height:40px;background:#002b2e;color:var(--cream);border:2px solid var(--cream);border-radius:10px;font:36px/25px Georgia,serif;box-shadow:0 3px 3px #0006}.ribbon{flex-shrink:0;position:relative;align-self:center;z-index:1;margin:-6px 10px 8px;padding:7px 20px 8px;max-width:calc(100% - 22px);min-width:75%;font-size:clamp(19px,3svh,27px);text-align:center;text-transform:uppercase;font-weight:900;line-height:1.1;color:#002428;background:linear-gradient(100deg,#e7c579,#fff5ce 20%,#fff8df 65%,#edcc7e);clip-path:polygon(0 8%,5% 15%,3% 80%,8% 85%,9% 100%,91% 100%,92% 85%,97% 80%,95% 15%,100% 8%,70% 0,30% 0);filter:drop-shadow(0 3px 1px #000)}.panel{flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(6px,1.3svh,12px);margin:0 7px 7px;padding:clamp(10px,1.7svh,16px);border-radius:20px;background:radial-gradient(ellipse at 50% 35%,#fff9e7,#ffedbd 80%);border:1px solid #f8d582;box-shadow:inset 0 0 0 3px #fff2ce}.statusbar{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:5px 12px;color:var(--cream);font:11px Arial,sans-serif}.room-tag{margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:64%}.connection{display:inline-block;width:7px;height:7px;border-radius:50%;background:#d29036;flex:none}.connection.on{background:#52be72}.button{min-height:43px;width:100%;flex-shrink:0;padding:9px 12px;border:2px solid #f6deb0;border-radius:13px;background:linear-gradient(#06464a,#002328);color:var(--cream);font-size:clamp(14px,2.4svh,20px);font-weight:800;text-align:center;line-height:1.1;box-shadow:0 2px 0 #102e29,0 0 0 1px #5c4424;display:flex;align-items:center;justify-content:center;gap:7px}.button.red{background:linear-gradient(#db281b,#a60e0b);color:#fff6d9}.button.green{background:linear-gradient(#298a38,#14531e)}.button.cream{color:var(--ink);background:linear-gradient(115deg,#f8d89e,#fff0cc 50%,#f2d39e);border-color:#f5ddb6}.button.outline{border-color:#ead3a6;background:#003439;color:var(--cream)}.button>span:last-child{margin-left:auto}.button.push{margin-top:auto}.actions,.lobby-actions{display:flex;gap:8px;margin-top:auto}.actions .button,.lobby-actions .button{flex:1;width:0}.actions .button{font-size:14px}.welcome{width:100%;max-width:470px;height:100%;display:flex;flex-direction:column;background:#002a2f;overflow:hidden;border-radius:12px}.welcome-hero{min-height:0;flex:1;overflow:hidden;display:flex;justify-content:center;align-items:flex-start}.welcome-hero img{width:100%;height:100%;object-fit:cover;object-position:center top}.welcome-menu{flex-shrink:0;padding:0 7.5%;display:flex;flex-direction:column;gap:clamp(9px,1.8svh,16px);margin-top:-1px}.welcome-menu .button{height:clamp(43px,7svh,62px);justify-content:flex-start;padding:12px 18px;border-radius:13px;font-size:clamp(16px,2.6svh,23px);text-transform:uppercase;letter-spacing:.1px}.welcome-menu .resume{font-size:14px;min-height:32px;height:36px}.welcome-footer{display:flex;flex-shrink:0;justify-content:space-around;align-items:center;margin:clamp(12px,3svh,28px) 5% 0;padding:12px 0;border-top:1px solid #e2c89b70}.welcome-footer button{background:none;border:0;color:#e5cfaa;font:26px Georgia,serif}.welcome-footer small{display:block;font:12px Arial,sans-serif;margin-top:5px}.form-stack{height:100%;display:flex;flex-direction:column;gap:clamp(12px,2.8svh,23px)}label{font-size:18px;font-weight:800;display:flex;flex-direction:column;gap:8px}input,select{width:100%;min-height:46px;background:#fff8df;border:2px solid var(--ink);border-radius:12px;color:var(--ink);padding:10px 12px;font:17px Arial,sans-serif;box-shadow:0 2px 0 #cfb67e}.code-input{text-transform:uppercase;letter-spacing:3px;font-weight:800}.divider{height:1px;background:#476b60;margin:4px 0}.info{font-family:Arial,sans-serif;border:1px solid #cfb06a;border-radius:11px;padding:10px 11px;background:#fff4d4;box-shadow:0 2px 0 #d8b776;font-size:clamp(12px,1.9svh,15px)}.or{text-align:center;font-style:italic}.lobby-meta{display:flex;align-items:center;justify-content:space-between;gap:4px}.badge{padding:5px 7px;background:#bc8a27;color:#fff6dd;text-transform:uppercase;font-size:11px;font-weight:900;border-radius:7px;white-space:nowrap}.count{display:flex;justify-content:space-between;align-items:center;font-size:17px;font-weight:800}.count strong{font-size:27px}progress{width:100%;height:14px;accent-color:#218d39;border-radius:9px;flex-shrink:0}.players{display:flex;flex-direction:column;gap:4px;min-height:0;flex:1}.player{display:flex;align-items:center;gap:9px;background:#fff3d3;border:1px solid #173e38;border-radius:8px;padding:4px 8px;min-height:29px;flex:1;max-height:43px;color:var(--ink);text-align:left;font-weight:800;font-size:clamp(13px,2svh,18px)}.player-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.player small{font:10px Arial,sans-serif;white-space:nowrap}.player .ready{color:#237d32}.player:disabled{opacity:.5}.player.dead{opacity:.5}.seat{width:20px;flex:none;text-align:center}.player.selected,.policy-card.selected{box-shadow:0 0 0 3px #f2c62c,0 0 15px #d39e24;background:#fff9e8}.compact .player{min-height:22px;padding-top:2px;padding-bottom:2px}.prompt{text-align:center;font-size:clamp(15px,2.4svh,20px);font-weight:800;line-height:1.3}.waiting-label{text-align:center;font-size:13px;font-weight:700}.nameplate{border:1px solid #8d793f;background:#fff5da;border-radius:20px;padding:7px 14px;font-weight:800;font-size:18px}.role-area{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}.covered-card{border:none;background:none;min-height:0;max-height:75%;height:100%;padding:0;box-shadow:0 5px 9px #321e2250;border-radius:16px}.covered-card img{height:100%;width:auto;border-radius:16px}.role-card{border:5px double var(--gold);border-radius:13px;overflow:hidden;background:#fff3ce;min-height:0;max-height:60%;box-shadow:0 4px 6px #5d392c44;display:flex;flex-direction:column;width:min(210px,65%);flex-shrink:1}.role-card img{min-height:0;object-fit:cover;object-position:top;flex:1}.role-card p{padding:7px;font-size:12px;font-weight:700}.secret-info{border:1px solid #c5a154;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:7px;text-align:center}.secret-info h2{font-size:17px;text-transform:uppercase}.secret-info p{font-size:14px}.offices{display:grid;grid-template-columns:1fr 1fr;gap:9px;flex-shrink:0}.offices>div{background:linear-gradient(#fff9e5,#f6dfa4);border:1px solid #96773a;border-radius:13px;display:flex;align-items:center;flex-direction:column;min-width:0;padding:5px;box-shadow:0 3px 0 #9f813b}.offices img{height:clamp(34px,7svh,65px);object-fit:contain}.offices small{text-transform:uppercase;font-weight:900;font-size:12px}.offices b{font-size:clamp(14px,2.3svh,20px);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ballots{display:flex;gap:16px;align-items:center;flex:1;min-height:0;padding:12px 7px}.ballot{width:50%;height:min(220px,28svh);border:4px double #c4a564;border-radius:14px;box-shadow:0 6px 0 #73633e;display:flex;flex-direction:column;justify-content:center;gap:8px;align-items:center}.ja{background:#fff8e1;color:#0a2322}.nein{background:#111d1c;color:#fff4d7}.ballot strong{font:italic 900 clamp(32px,6svh,54px) Georgia,serif}.ballot span{font-size:40px}.ballot small{font-size:12px}.waiting-art{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(10px,2svh,18px)}.waiting-art>img{max-height:min(22svh,180px);object-fit:contain;min-height:0}.waiting-art p{font-size:clamp(14px,2.4svh,19px);max-width:340px}.policy-cards{display:flex;gap:10px;justify-content:center;min-height:0;flex:1;align-items:center;padding:9px 3px}.policy-card{border:0;background:transparent;padding:0;max-width:42%;max-height:100%;min-height:0;border-radius:10px;box-shadow:0 3px 3px #98732a66;overflow:hidden}.policy-card img{width:100%;height:100%;max-height:24svh;object-fit:contain}.policy-cards.three .policy-card{max-width:30%}.tracks{display:flex;flex-direction:column;gap:7px;width:100%;flex-shrink:0}.track{border:2px solid #d4b05b;border-radius:11px;padding:7px;box-shadow:inset 0 0 0 1px #fff7d4}.track.liberal{background:linear-gradient(125deg,#003d55,#0e8397);color:#fff6d6}.track.fascist{background:linear-gradient(125deg,#8c0908,#c82815);color:#fff6d6}.track h3{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}.tiles{display:flex;gap:4px}.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-width:0;height:43px;border:1px solid #a78643;border-radius:6px;background:#fff0ca;color:#002a2b;font-weight:900;overflow:hidden;padding:2px}.tile small{font:7px Arial,sans-serif;line-height:1.05;overflow-wrap:anywhere}.tile.enacted{padding:0;background:none}.tile.enacted img{width:100%;height:100%;object-fit:cover;object-position:50% 65%}.tracker{font-size:12px;font-weight:800;display:flex;justify-content:space-between;align-items:center;padding:5px 8px;background:#fff0c8;border-radius:9px;border:1px solid #bda36a}.tracker>span{display:flex;gap:7px}.tracker i{width:15px;height:15px;border-radius:50%;border:1px solid #a48a52;background:#d1bd8b}.tracker i.filled{background:#ad1710;box-shadow:inset 0 0 0 2px #f6dfab}.pause-banner{background:#3d2c13;color:#fff3d1;border:1px solid #bd9729;border-radius:9px;padding:8px;text-align:center;font:12px Arial,sans-serif;flex-shrink:0}.panel:has(.pause-banner)>:not(.pause-banner){opacity:.65}.victory{display:flex;flex:1;flex-direction:column;justify-content:center;gap:14px;text-align:center;min-height:0}.victory h2{font-size:20px}.final-roles{display:flex;flex-direction:column;gap:4px;min-height:0}.final-roles>div{display:flex;align-items:center;justify-content:space-between;background:#fff3d4;border:1px solid #a88a4b;border-radius:15px;overflow:hidden;text-align:left;min-height:25px}.final-roles span{padding:4px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.final-roles strong{padding:4px 10px;color:#fff4d8;min-width:100px;text-align:center;font-size:13px;text-transform:uppercase}.final-roles .liberal{background:#00657a}.final-roles .fascist,.final-roles .hitler{background:#a50c0b}dialog{border:0;padding:0;background:var(--ink);color:var(--ink);max-width:min(94vw,430px);width:430px;max-height:94svh;border-radius:24px;box-shadow:0 0 0 2px #e7bb46,0 0 0 7px #052b2d,0 30px 80px #000b;overflow:hidden}dialog::backdrop{background:#001d22c9;backdrop-filter:blur(3px)}.modal-header{height:90px;overflow:hidden}.modal-header img{width:100%;object-fit:cover;object-position:50% 25%;height:100%}.modal-panel{margin:0 10px 11px;padding:15px;border:4px double #d4ac3d;border-radius:20px;background:radial-gradient(ellipse,#fff9e5,#ffe4a1);display:flex;flex-direction:column;gap:13px;max-height:calc(94svh - 112px);overflow:auto}.modal-panel h2{text-align:center;text-transform:uppercase;border:1px solid #d4ac3d;border-radius:20px;background:var(--ink);color:#fff0c1;padding:9px;font-family:Georgia,serif;font-size:19px}.modal-content{display:flex;flex-direction:column;gap:12px;text-align:center;font-size:16px}.modal-actions{display:flex;flex-wrap:wrap;gap:8px}.modal-actions .button{flex:1;min-width:120px;font-size:16px;min-height:42px}.results{display:grid;grid-template-columns:1fr;gap:4px}.results>div{display:flex;justify-content:space-between;border:1px solid #a18846;border-radius:15px;overflow:hidden;font-size:14px;background:#fff5d5}.results span{padding:3px 10px}.results b{min-width:62px;padding:3px}.tallies{display:flex;justify-content:center;gap:15px}.tallies b{border:2px solid #b29653;border-radius:8px;padding:6px 15px}.result-policy{height:100px;width:auto;object-fit:contain;align-self:center}.qr{width:200px;height:200px;align-self:center}.room-code{font:900 30px Arial,sans-serif;letter-spacing:4px;align-self:center}#scanner{max-height:45svh;width:100%;object-fit:cover;border-radius:12px}.tv-frame{height:100%;width:100%;max-width:1600px;border:4px double #ddba67;border-radius:25px;background:var(--ink);color:var(--cream);padding:10px;display:flex;flex-direction:column;gap:10px}.tv-frame>header{height:15%;min-height:65px;display:flex;align-items:center;justify-content:space-between;gap:15px;overflow:hidden}.tv-frame h1{font:900 clamp(18px,3.2vw,38px) Georgia,serif;text-transform:uppercase}.tv-logo{height:100%;width:25%;max-width:300px}.tv-logo img{width:100%;height:100%;object-fit:cover;object-position:center}.tv-content{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}.tv-frame .offices{align-self:center;width:min(70%,850px);height:20%;min-height:70px;flex-shrink:1}.tv-frame .offices>div{position:relative;justify-content:center;padding-left:50px;color:var(--ink)}.tv-frame .offices img{position:absolute;left:10px;height:75%;max-width:70px}.tv-frame .offices small{font-size:clamp(12px,1.3vw,21px)}.tv-frame .offices b{font-size:clamp(16px,2.4vw,32px)}.tv-frame .tracks{flex:1;min-height:0}.tv-frame .track{flex:1;min-height:0;padding:10px 15px;display:flex;flex-direction:column}.tv-frame .track h3{font-size:clamp(15px,2vw,29px)}.tv-frame .tiles{flex:1;min-height:0;gap:10px}.tv-frame .tile{height:100%;font-size:clamp(18px,3vw,38px);border-radius:12px}.tv-frame .tile small{font-size:clamp(10px,1.2vw,20px)}.tv-frame .tile.enacted img{object-fit:cover;object-position:50% 65%}.tv-frame .tracker{font-size:20px;flex-shrink:0}.tv-frame .tracker i{width:23px;height:23px}.tv-bottom{text-align:center}.tv-bottom h2{font-size:23px}.tv-bottom p{font-size:15px;margin-top:5px}.tv-frame>footer{display:flex;align-items:center;gap:8px;font-size:12px}.tv-frame>footer .button{margin-left:auto;width:auto;min-height:30px;padding:5px 10px;font-size:12px}.tv-lobby{align-self:center;display:flex;flex:1;flex-direction:column;gap:14px;width:min(100%,650px);min-height:0}.tv-lobby .players{color:var(--ink)}.tv-frame .victory{align-self:center;width:min(100%,850px)}.tv-frame .final-roles{display:grid;grid-template-columns:1fr 1fr;gap:9px}.tv-frame .final-roles>div{min-height:40px}.tv-frame .victory h2{font-size:28px}
@media(max-height:690px){.header{flex-basis:90px;min-height:75px}.ribbon{font-size:19px;padding-top:5px;padding-bottom:6px;margin-bottom:4px}.panel{padding:9px;gap:7px}.info{padding:7px;font-size:11px}.button{min-height:36px;font-size:14px;padding:7px}.player{min-height:21px;max-height:31px;font-size:13px}.compact .player{min-height:18px}.offices img{height:32px}.secret-info{padding:7px}.secret-info h2{font-size:13px}.secret-info p{font-size:12px}.track{padding:5px}.tile{height:32px}.form-stack{gap:12px}label{font-size:16px}.count strong{font-size:22px}.nameplate{font-size:15px}.welcome-footer{padding:8px 0;margin-top:12px}.welcome-menu{gap:8px}.welcome-menu .button{height:42px;font-size:16px}.welcome-footer small{font-size:10px}}
@media(max-width:500px){.tv-frame{padding:7px;border-radius:15px}.tv-frame>header{flex-wrap:wrap;height:16%;gap:3px}.tv-frame h1{font-size:18px}.tv-frame .badge{font-size:9px}.tv-frame .offices{width:100%;height:15%;}.tv-frame .offices>div{padding-left:35px}.tv-frame .offices img{max-width:40px;left:2px}.tv-frame .track{padding:7px}.tv-frame .tiles{gap:4px}.tv-frame .tile small{font-size:8px}.tv-frame .tracker{font-size:12px}.tv-frame .final-roles{grid-template-columns:1fr}.tv-frame .final-roles>div{min-height:25px}.tv-bottom h2{font-size:17px}.tv-bottom p{font-size:12px}}
@media(prefers-reduced-motion:no-preference){button{transition:filter .12s,box-shadow .12s}button:not(:disabled):active{filter:brightness(.88)}}

.header .back{left:0;top:1px;width:61px;height:62px;box-shadow:none;border-color:transparent;background:#002b2e;font-size:42px;border-radius:14px}
.welcome-menu .button{font-size:clamp(14px,2.3svh,21px);white-space:nowrap}.welcome-footer button{font-family:Arial,sans-serif}

.last-policy{font-size:clamp(12px,1.5vw,22px);margin-bottom:7px;padding:6px;border:1px solid #d8b663;border-radius:10px;color:#002b2e;background:#fff0c6}.modal-header img{object-position:center}.frame:has(.victory) .header{flex-basis:min(21svh,170px)}

@media(max-height:720px){.qr{width:150px;height:150px}.modal-header{height:75px}.modal-panel{padding:10px;gap:8px;max-height:calc(94svh - 98px)}.modal-content{gap:8px;font-size:14px}.modal-panel h2{font-size:17px;padding:7px}.room-code{font-size:25px}}

.staging-label{position:fixed;inset:0 0 auto;height:24px;background:#e9c46b;color:#082d30;text-align:center;line-height:24px;font:700 11px/24px Arial,sans-serif;z-index:5}.staging-label+#app{margin-top:24px;height:calc(100svh - 24px)}