:root{color-scheme:dark;--bg:#0B0D1A;--panel:#161C30;--panel2:#12182A;--edge:#313950;--muted:#A5AEC7;--text:#F9F7FE;--pink:#F33C83;--red:#EA244E;--cyan:#6ADAF5;--gold:#FFB86F}
*{box-sizing:border-box}body{margin:0;color:var(--text);background:radial-gradient(ellipse at 50% -40%,#402043 0%,#171225 45%,#0B0D1A 90%);font:14px/1.5 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.app-shell{max-width:1500px;margin:auto;padding:23px 22px 36px}.hero{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 19px}.brand{display:flex;align-items:center;gap:13px}.brand img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 0 13px #FF336858)}h1{font-size:27px;line-height:1.15;letter-spacing:.02em;margin:0;font-weight:900}h1 strong{color:#FF5A93}.brand p{margin:4px 0 0;color:#BAC1D3;font-size:12px}.top-tags{display:flex;gap:8px;flex-wrap:wrap}.tag{background:#19253B;border:1px solid #344360;border-radius:100px;padding:6px 10px;font-size:10px;font-weight:800;letter-spacing:.04em;color:#BED3E8}.tag.hot{background:#32172C;border-color:#7A385D;color:#FFC0D8}.main-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;align-items:start;gap:16px}.stage-card,.card{border:1px solid var(--edge);border-radius:13px;overflow:hidden;background:linear-gradient(145deg,#1A2137,#14192B);box-shadow:0 17px 45px #0003}.stage-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;background:#111A2D;border-bottom:1px solid #303A50;font-size:11px;letter-spacing:.02em}.stage-heading span:last-child{color:#98A6C1;font-size:10px}.dot{display:inline-block;width:8px;height:8px;background:#51E0AD;border-radius:50%;vertical-align:middle;margin-right:5px;box-shadow:0 0 9px #52F4AB}.stage{position:relative;overflow:hidden;background:#11172A}canvas{display:block;width:100%;height:auto;aspect-ratio:600/372;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair}.stage-sticker{position:absolute;left:13px;top:11px;padding:4px 7px;background:#0C1428DE;border:1px solid #94799A;border-radius:4px;font-size:9px;font-weight:800;letter-spacing:.05em;pointer-events:none}.stage-hint{position:absolute;bottom:9px;left:12px;padding:4px 7px;border-radius:5px;background:#0B1428C7;color:#B9C5DB;font-size:10px;pointer-events:none}.stage-actions{background:#141B2D;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap;border-top:1px solid #30364E}.buttons{display:flex;gap:7px;flex-wrap:wrap}.btn{border:1px solid #485674;color:#F8F7FE;border-radius:7px;background:#293249;font-size:12px;font-weight:750;padding:8px 11px;transition:filter .18s,transform .18s}.btn:hover{filter:brightness(1.2)}.btn:active{transform:translateY(1px)}.btn.primary{background:#E73575;border-color:#FF72A2}.btn.outline{background:#131B2E}.switch{display:flex;gap:8px;align-items:center;font-size:11px;color:#B9C2D6;cursor:pointer;white-space:nowrap}.switch input{accent-color:#FF477F}.sidebar{display:grid;gap:12px}.card{padding:14px 15px}.card-title{display:flex;justify-content:space-between;gap:9px;align-items:center;margin-bottom:10px}.card h2{margin:0 0 9px;font-size:14px;letter-spacing:.01em}.card-title h2{margin:0}.chip{font-size:9px;color:#F9AED1;border-radius:4px;background:#43213B;padding:3px 6px;font-weight:850;letter-spacing:.03em}.chip.blue{background:#193D54;color:#91E8FF}.chip.green{background:#163A32;color:#6FE2BD}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.stat{border:1px solid #323F5A;background:#10182A;border-radius:8px;padding:10px}.stat strong{display:block;font-size:24px;font-variant-numeric:tabular-nums;line-height:1.2}.stat span{font-size:11px;color:#B0BED5}.range-head{display:flex;justify-content:space-between;margin-top:15px;color:#B6C1D4;font-size:11px}.range-head b{color:#F1F4FF}input[type=range]{width:100%;accent-color:#F2397D;height:23px}.fine{font-size:10.5px;line-height:1.5;color:#AAB4CD;margin:9px 0 0}.team-list{display:grid;gap:5px}.team-row{display:flex;align-items:center;gap:9px;padding:5px 3px;border-radius:6px}.team-row.me{background:#421E36;border:1px solid #A34C73;padding:5px 6px}.iconbox{width:26px;height:26px;display:grid;place-items:center;border-radius:5px;flex:none;background:linear-gradient(145deg,#E93D78,#8B3269);border:1px solid #FF9ABF;font-size:11px;font-weight:850}.team-row.owner .iconbox{background:linear-gradient(140deg,#B68F46,#F1C57A);color:#241824;border-color:#FFE4B0}.team-row .who{flex:1;min-width:0}.team-row b{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.team-row small{color:#9CA8C1;font-size:9px;display:block}.team-row .pin{font-size:9px;color:#FFB7D0}.mini-btn{border:1px solid #465578;border-radius:6px;background:#1B273A;color:#E5ECFA;font-size:10px;padding:5px 8px}.ranking{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:7px}.ranking li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}.ranking li b{color:#FFBB73;margin-right:8px}.ranking li em{font-style:normal;color:#EFC7E5;font-size:10px;font-variant-numeric:tabular-nums}.events{display:grid;gap:7px;max-height:190px;overflow-y:auto}.event{border-left:2px solid #E94383;padding-left:8px;font-size:10.5px;color:#C6CDE2}.event time{color:#8194B5;margin-right:4px;font-size:9px}footer{font-size:10.5px;color:#8F9DB7;margin-top:16px}.modal-wrap{position:fixed;inset:0;display:grid;place-items:center;background:#050915D9;z-index:20;padding:16px}.modal-wrap[hidden]{display:none}.modal{width:min(100%,560px);padding:21px;background:#1B2338;border-radius:13px;border:1px solid #5D6684;box-shadow:0 30px 80px #0009}.modal h2{font-size:18px;margin:0 0 9px}.modal p{font-size:12px;color:#BAC3D7}.modal code{color:#FFB7CF}.fieldlabel{font-size:11px;color:#C6D4E9;font-weight:700}.modal textarea{margin-top:7px;display:block;width:100%;min-height:210px;max-height:50vh;resize:vertical;background:#0C1323;border:1px solid #556584;border-radius:7px;color:#F1EFF8;padding:9px;font:12px/1.5 ui-monospace,'SFMono-Regular',Consolas,monospace}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.notice{min-height:16px;color:#FFD18C!important;font-size:11px!important}@media(max-width:1120px){.main-grid{grid-template-columns:1fr}.sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.app-shell{padding:12px 9px 24px}.brand img{width:43px;height:43px}h1{font-size:19px}.brand p{font-size:10px}.top-tags{gap:5px}.tag{font-size:9px;padding:5px 7px}.sidebar{grid-template-columns:1fr}.stage-heading{align-items:flex-start;flex-direction:column;gap:3px;padding:8px}.stage-actions{padding:9px}.btn{font-size:11px;padding:7px 8px}.stage-sticker{font-size:7px;left:5px;top:5px}.stage-hint{display:none}}

/* V0.3: opt-in Telegram live mode */
.mode-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:#0D182A;border-top:1px solid #343951;flex-wrap:wrap}
.mode-controls{display:flex;gap:6px;padding:3px;border:1px solid #3A435D;background:#151D30;border-radius:8px}
.mode-btn{border:0;color:#B0B9D0;background:transparent;padding:7px 11px;font-size:11px;font-weight:750;border-radius:6px}
.mode-btn.active{color:#FFF6FD;background:#DB326F;box-shadow:0 2px 9px #F4428355}
.mode-description{font-size:10px;color:#94ABC1}.live-card{border-color:#245473;background:linear-gradient(145deg,#13253C,#191729)}
.test-buttons{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 5px}
.test-buttons .mini-btn{font-size:10px;padding:7px 9px;background:#23435D;border-color:#416782}
#liveExplain code{color:#90E4FB;background:#0B192B;padding:2px 3px;border-radius:4px}
@media(max-width:590px){.mode-toolbar{align-items:stretch;flex-direction:column}.mode-controls{width:100%}.mode-btn{flex:1}.stage-heading span:last-child{display:none}}

.test-buttons[hidden]{display:none}

/* Readable HTML lettering sits over the unchanged pixel-art room. */
.main-column{display:grid;gap:16px;min-width:0}
.admin-link{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:1px solid #FF8DB5;border-radius:7px;background:#D73271;color:#fff;text-decoration:none;font-size:12px;font-weight:800}
.admin-link:hover{filter:brightness(1.15)}
.admin-link:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.stage-overlay{position:absolute;inset:0;pointer-events:none;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-shadow:none}
.room-sign,.room-status,.room-community,.room-floor{position:absolute;z-index:1;display:flex;flex-direction:column;justify-content:center;overflow:hidden;white-space:nowrap;font-weight:850;line-height:1.15;letter-spacing:.01em}
.room-sign{left:35.5%;top:3%;width:33.5%;height:10%;padding:0 1%;background:#2a1025;color:#fff;font-size:clamp(9px,1.2vw,18px)}
.room-sign b{color:#ff5b9b}.room-sign small{font-size:clamp(7px,.65vw,10px);color:#edc7df;letter-spacing:.06em}
.room-status{left:78%;top:4%;width:19%;height:18%;padding:1%;background:#0a2137;border:1px solid #5683ae;color:#aeedff;font-size:clamp(8px,.82vw,12px);white-space:normal}
.room-community{left:2%;top:31.5%;width:21%;height:7%;padding:0 1%;background:#201529;color:#f7dbea;font-size:clamp(8px,.85vw,12px)}
.room-community small{color:#c8d9ee;font-size:clamp(7px,.68vw,10px)}
.room-floor{left:42.5%;top:90%;width:17%;height:8%;align-items:center;text-align:center;background:#36142c;border:1px solid #ec5e9d;color:#fff;font-size:clamp(7px,.7vw,10px);white-space:normal}
.name-layer{position:absolute;inset:0;z-index:4}.name-label{position:absolute;transform:translate(-50%,-100%);max-width:28%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 5px;border-radius:4px;border:1px solid #b477aa;background:#1a1932e8;color:#fff;font-size:clamp(9px,.78vw,12px);font-weight:800;line-height:1.15;box-shadow:0 2px 6px #0009}
.name-label.admin-label{border-color:#ffb6da;background:#572344ef;color:#fff1b5}
.speech-bubble{position:absolute;z-index:6;transform:translate(-50%,-100%);max-width:28%;min-width:55px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 8px;border-radius:8px;border:1px solid #b66b9a;background:#fff8fb;color:#301c37;font-size:clamp(9px,.85vw,12px);font-weight:750;box-shadow:0 3px 12px #0009}
.speech-bubble::after{content:'';position:absolute;left:50%;bottom:-5px;width:8px;height:8px;background:#fff8fb;transform:rotate(45deg);border-right:1px solid #b66b9a;border-bottom:1px solid #b66b9a}
.stage-toast{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);z-index:7;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 9px;border-radius:6px;background:#672a58;color:#fff;font-size:clamp(9px,.85vw,12px);font-weight:750}
.speech-bubble[hidden],.stage-toast[hidden]{display:none}
.ranking-card .ranking{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(10,auto);grid-auto-flow:column;column-gap:14px;row-gap:9px}.ranking-card .ranking li{min-width:0;border-bottom:1px solid #344057;padding:3px 0 6px}.ranking-card .ranking li>span{min-width:0;display:flex;align-items:center;overflow:hidden}.ranking-card .ranking li>span>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-role{margin-left:5px;color:#ffe0a8;font-size:9px}.ranking-card .ranking li em{flex:none}
@media(max-width:900px){.ranking-card .ranking{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(25,auto)}}
@media(max-width:590px){.ranking-card .ranking{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}.room-sign small,.room-community small{display:none}.room-status{font-size:8px}.name-label{max-width:33%;font-size:9px}.speech-bubble{max-width:45%;font-size:10px}}
