/* Local host controls and a small, shared top-five broadcast component. */
.twitch-admin{background:#08151c;min-height:100dvh}
.twitch-admin::before{background:linear-gradient(110deg,#08151cf5,#0a1822ec),url('/assets/backdrop.jpg') center/cover}
.tw-header{display:flex;align-items:center;gap:25px;padding:16px max(22px,calc((100vw - 1420px)/2));border-bottom:1px solid #ffffff12;background:#07131bda;min-height:78px}
.tw-section-label{font-size:13px;color:#9db3b8}.tw-header-actions{margin-left:auto;display:flex;align-items:center;gap:16px}
.twitch-admin main{width:min(1420px,calc(100% - 48px));margin:0 auto 40px}
.tw-login{width:min(460px,100%);margin:12vh auto 0}.tw-login h1{font-size:27px;line-height:1.3;margin:12px 0 24px}.tw-login form{display:grid;gap:12px}.tw-login button{margin-top:6px}
.tw-page-title{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:30px 0 23px}.tw-page-title h1{font-size:29px;line-height:1.2;margin:7px 0 0}.tw-eyebrow{font-size:10px;font-weight:800;letter-spacing:.18em;color:#bda7ef}
.tw-columns{display:grid;grid-template-columns:minmax(340px,390px) minmax(0,1fr);gap:22px;align-items:start}.tw-settings,.tw-live-column{display:flex;flex-direction:column;gap:20px;min-width:0}
.tw-panel{border:1px solid #31424c;background:linear-gradient(140deg,#11232ced,#0c1b24f5);border-radius:15px;padding:23px;min-width:0;box-shadow:0 14px 35px #0002}
.tw-panel h2{font-size:16px;font-weight:700;line-height:1.4;margin:0 0 17px;color:#e5e8de}.tw-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:17px}.tw-panel-heading h2{margin:0}.tw-panel-heading .tw-eyebrow+h2{margin-top:6px;font-size:24px}
.tw-live-tag{color:#c7af84;font-size:10px;white-space:nowrap;letter-spacing:.04em}.tw-connection,.tw-state{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#b9b2a0;line-height:1.4}.tw-connection:before,.tw-state:before{content:'';width:7px;height:7px;flex:none;border-radius:50%;background:#9b8d71}.tw-connection.online:before,.tw-state.online:before{background:#75d9ab;box-shadow:0 0 0 4px #75d9ab12}.tw-connection.online,.tw-state.online{color:#a8dcc4}
.twitch-admin label:not(.tw-check){display:block;font-size:12px;color:#a8bec1;margin-bottom:9px}.twitch-admin input:not([type=checkbox]),.twitch-admin select{width:100%;min-width:0;min-height:46px;border:1px solid #435962;background:#091922;border-radius:7px;padding:10px 12px;color:#f1efdf;font:inherit;font-size:15px;outline:none}.twitch-admin input:focus,.twitch-admin select:focus{border-color:#bba3e8;box-shadow:0 0 0 3px #bba3e818}.tw-help{font-size:12px;line-height:1.65;color:#91a7ad;margin:13px 0}.tw-error{font-size:12px;color:#ff9eaa;line-height:1.6;min-height:0}.tw-error:empty{display:none}
.cap-panel{border-color:#89745477}.cap-editor{display:grid;grid-template-columns:100px 1fr;gap:8px 16px;align-items:center}.cap-editor #threshold{font-size:38px;font-weight:750;line-height:1.1;height:74px;padding:10px 12px;font-variant-numeric:tabular-nums;color:#f0d291;grid-row:span 2}.cap-editor>span{font-size:12px;color:#aec0bc}.cap-editor button{min-height:38px;padding:7px 13px;font-size:12px}.cap-live{display:flex;justify-content:space-between;align-items:center;font-size:11px;gap:12px;margin:16px 0;color:#8ba4ae}.cap-live strong{color:#81dcb1}.cap-live strong.is-dirty{color:#efbe74}.tw-controls{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid #ffffff12;padding-top:17px;margin-top:18px}.tw-controls button{font-size:12px;padding:10px 12px;flex:1;min-height:44px}.tw-controls #toggleRun{flex:1 1 100%}.tw-controls .is-pausing{background:#1c323a;border-color:#52666e;color:#e0e5de}
.tw-check{display:flex;gap:12px;align-items:center;line-height:1.5;font-size:13px;color:#dde3db;margin:15px 0}.tw-check input{width:19px;height:19px;flex:none;accent-color:#be9dee}.tw-input-row{display:grid;grid-template-columns:1fr 100px;gap:12px;margin-top:20px}.tw-input-row label>span{display:block;margin-bottom:8px}.tw-connect summary{font-size:15px;font-weight:700;cursor:pointer;list-style-position:inside;color:#d6dfdb}.tw-connect[open] summary{margin-bottom:20px}.tw-connect input+label{margin-top:14px}.tw-doc-link{color:#cbb3f7;font-size:12px;text-decoration:underline;text-underline-offset:3px}.tw-connect-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:17px 0 5px}.tw-connect-actions button{font-size:12px;min-height:43px}.tw-device{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:16px 12px;border:1px solid #a180d4;border-radius:9px;background:#7a53a51a;margin-top:20px}.tw-device p{font-size:12px;margin:0;color:#c7b6e0}.tw-device strong{font-family:monospace;font-size:29px;letter-spacing:.12em;color:#eadbff}.tw-connect>.text-button{font-size:11px;color:#859aa3;margin-top:13px}
.vote-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;min-width:0}.vote-card{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:8px;border:1px solid #344b58;border-radius:10px;padding:13px 10px 15px;background:linear-gradient(140deg,#19303ee8,#11222de8);min-width:0;overflow:hidden}.vote-card.is-leading{border-color:#b9a16a;background:linear-gradient(140deg,#37413cde,#172c32)}.vote-rank{position:absolute;right:8px;top:6px;color:#5e7885;font:700 9px/1 system-ui,sans-serif}.vote-card.is-leading .vote-rank{color:#d9c392}.vote-portrait{width:44px;height:44px;object-fit:cover;border-radius:6px;border:1px solid #82928b55}.vote-info{min-width:0;display:flex;flex-direction:column;gap:7px}.vote-name{font-size:12px;font-weight:700;line-height:1.25;color:#e5e9df;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vote-count{font-size:15px;font-weight:750;line-height:1;font-variant-numeric:tabular-nums;color:#c9d6cd}.vote-card.is-leading .vote-count{color:#efd09a}.vote-track{position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff08}.vote-track i{display:block;height:100%;width:0;background:#a89ad8;transition:width 160ms ease-out}.vote-card.is-leading .vote-track i{background:#e2bd72}.vote-card.is-empty{border-style:dashed;opacity:.5;grid-template-columns:1fr}.vote-card.is-empty .vote-name{font-weight:500;color:#8c9fa8;font-size:10px}.vote-card.is-empty .vote-count{color:#718993}.vote-card.is-empty{min-height:74px}.vote-hint{color:#a0b8b8;font-size:12px;line-height:1.5;margin:14px 0 0}
.tw-voting .vote-list{grid-template-columns:1fr;gap:9px}.tw-voting .vote-card{grid-template-columns:34px 48px minmax(0,1fr);padding:9px 15px 11px;min-height:72px}.tw-voting .vote-rank{position:static;font-size:12px;text-align:center}.tw-voting .vote-portrait{width:48px;height:48px}.tw-voting .vote-info{flex-direction:row;align-items:center;gap:16px;justify-content:space-between}.tw-voting .vote-name{font-size:15px}.tw-voting .vote-count{font-size:22px;white-space:nowrap}.tw-voting .vote-track{height:3px}.tw-voting .vote-card.is-empty{grid-template-columns:34px minmax(0,1fr);min-height:58px}.tw-voting .vote-card.is-empty .vote-count{font-size:16px}
.tw-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-top:1px solid #ffffff13;padding-top:18px;margin-top:19px}.tw-metrics>span{display:flex;flex-direction:column;gap:8px}.tw-metrics small{font-size:11px;color:#91a9b0}.tw-metrics strong{font-size:24px;line-height:1.1;color:#d9e2d6;font-variant-numeric:tabular-nums}
.tw-selection{border-left:2px solid #c3a66e;background:#c3a66e0b;padding:10px 13px;font-size:12px;color:#dcc79d;line-height:1.6;margin-bottom:15px}.tw-board-panel .board{min-width:700px}.tw-board-panel .column-header{font-size:9px;min-height:40px}.tw-board-panel .guess-row{min-height:84px;gap:5px}.tw-board-panel .cell-value{font-size:11px}.tw-board-panel .hero-cell-name{font-size:10px}
.tw-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:100;background:#17372c;border:1px solid #51866e;border-radius:10px;color:#d3f2dd;padding:14px 20px;max-width:min(540px,calc(100vw - 28px));box-shadow:0 10px 50px #0007;font-size:13px;line-height:1.5}.tw-toast.is-error{background:#3f222b;border-color:#b76274;color:#ffd2d9}
/* The live vote strip does not compete with the full characteristic board. */
.chat-vote-panel{flex:0 0 auto;min-width:0;background:#0c1d27d9;border:1px solid #4b426344;border-radius:12px;padding:17px 18px}.chat-vote-heading{display:flex;gap:16px;justify-content:space-between;align-items:center;margin-bottom:14px}.chat-vote-heading h2{font-size:14px;margin:0;color:#d7cee6}.chat-vote-heading>span{font-size:11px;color:#b5a38e}.chat-vote-panel .vote-card{grid-template-columns:42px minmax(0,1fr);gap:8px;padding:16px 10px}.chat-vote-panel .vote-portrait{width:42px;height:42px}.chat-vote-footer{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:11px;color:#9eb4b7;line-height:1.5}.chat-vote-footer span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-vote-footer .chat-last{color:#e0c58e}.chat-observer .broadcast-header{min-height:74px;padding-bottom:12px}.chat-observer .broadcast-identity h1{font-size:28px;margin:5px 0}.chat-observer .broadcast-layout{gap:16px;padding-top:20px}.chat-observer .broadcast-outcome{padding:10px 16px;min-height:0;gap:13px}.chat-observer .broadcast-outcome>img{width:48px;height:42px}.chat-observer .broadcast-outcome strong{font-size:20px}.chat-observer .broadcast-outcome span{font-size:10px}.chat-observer .guess-row{min-height:98px}.chat-observer .broadcast-stat strong{font-size:30px}
@media(min-width:1550px){.chat-vote-panel .vote-name{font-size:14px}.chat-vote-panel .vote-portrait{width:50px;height:50px}.chat-vote-panel .vote-card{grid-template-columns:50px minmax(0,1fr)}.chat-vote-panel .vote-count{font-size:20px}}
@media(max-width:1100px){.tw-columns{grid-template-columns:minmax(310px,.85fr) minmax(0,1.15fr);gap:16px}.tw-panel{padding:18px}.tw-panel-heading{gap:10px}.tw-panel-heading h2{font-size:15px}.tw-state{font-size:10px}.tw-section-label{display:none}.chat-vote-panel .vote-card{grid-template-columns:1fr;padding:14px 9px 10px;gap:6px}.chat-vote-panel .vote-portrait{width:35px;height:32px}.chat-vote-panel .vote-info{gap:5px}.chat-vote-panel .vote-name{font-size:11px}.chat-vote-panel .vote-count{font-size:16px}.chat-vote-panel{padding:13px}.chat-vote-panel .vote-list{gap:7px}.chat-observer .broadcast-metrics{gap:20px}}
@media(max-width:760px){.tw-header{padding:12px 16px;gap:14px}.tw-header .brand{font-size:14px}.tw-header-actions{gap:10px}.tw-header-actions .secondary-button{font-size:11px;padding:8px 11px}.twitch-admin main{width:calc(100% - 24px)}.tw-page-title{margin-top:22px;flex-wrap:wrap;gap:12px}.tw-page-title h1{font-size:25px}.tw-columns{grid-template-columns:1fr}.tw-live-column{order:-1}.tw-panel{padding:18px}.tw-voting .vote-list{grid-template-columns:1fr}.tw-voting .vote-card{min-height:60px;grid-template-columns:24px 40px minmax(0,1fr);padding:7px 11px 9px}.tw-voting .vote-portrait{width:40px;height:40px}.tw-voting .vote-name{font-size:13px}.tw-voting .vote-count{font-size:18px}.tw-voting .vote-card.is-empty{min-height:44px}.tw-metrics{padding-top:13px;margin-top:14px}.tw-panel-heading .tw-eyebrow+h2{font-size:21px}.tw-voting .vote-hint{font-size:11px}.tw-live-column>.tw-board-panel{order:2}.tw-columns{display:flex;flex-direction:column}.tw-settings,.tw-live-column{width:100%}.tw-login{margin-top:7vh}.chat-vote-footer{flex-direction:column;gap:6px}.chat-vote-panel .vote-list{grid-template-columns:repeat(5,minmax(0,1fr))}.chat-vote-panel .vote-name{font-size:10px}.chat-vote-panel .vote-card{padding:12px 5px 9px}.chat-vote-panel .vote-count{font-size:13px}.chat-vote-heading{gap:9px}.chat-vote-heading h2{font-size:12px}.chat-vote-heading>span{font-size:10px}}
@media(max-width:480px){.chat-vote-panel .vote-list{grid-template-columns:repeat(2,minmax(0,1fr))}.chat-vote-panel .vote-card{grid-template-columns:32px minmax(0,1fr);padding:10px 9px}.chat-vote-panel .vote-card:last-child{grid-column:span 2}.chat-vote-panel .vote-name{font-size:11px}.chat-vote-panel .vote-card.is-empty{min-height:48px}.chat-vote-panel .vote-card.is-empty .vote-info{grid-column:span 2}.chat-vote-panel .vote-count{font-size:14px}.chat-observer .broadcast-identity h1{font-size:23px}.tw-connection{font-size:11px}}
@media(prefers-reduced-motion:reduce){.vote-track i{transition:none!important}}

.cap-editor{grid-template-columns:132px minmax(0,1fr)}
.cap-editor #threshold{font-size:32px}
@media(max-width:760px){
 .tw-columns{display:flex;flex-direction:column;gap:18px}
 .tw-settings,.tw-live-column{display:contents}
 .cap-panel{order:0;width:100%}
 .tw-voting{order:1;width:100%}
 .tw-settings>.tw-panel:not(.cap-panel):not(.tw-connect){order:2;width:100%}
 .tw-board-panel{order:3;width:100%}
 .tw-connect{order:4;width:100%}
}