:root{color-scheme:dark;--bg:#171c22;--card:#252d36;--line:#394550;--text:#e4eaf0;--muted:#a0aebb;--green:#afcf9f;--ink:#1f2c1b;--amber:#e0be87;--red:#e3a3a3}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 "Microsoft YaHei","PingFang SC",system-ui,sans-serif;position:relative;isolation:isolate;min-height:100vh}body::before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:950px;background:linear-gradient(180deg,#11171da6,#11171dbb 40%,#171c22 100%),url("assets/dota-heroes-desktop.webp") center top/cover no-repeat;pointer-events:none}
button,select,input{font:inherit}button,a,summary,input{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);border-radius:9px;background:#202831;color:var(--text);padding:11px 17px;line-height:1.4;transition:background .15s}button:hover:not(:disabled){background:#34404b}button.primary{background:var(--green);border-color:var(--green);color:var(--ink);font-weight:700}button.primary:hover:not(:disabled){background:#c0ddaf}button.secondary{background:#31433c;color:#d1e3c7;border-color:#708b61;font-weight:600}button.danger{color:var(--red);border-color:#68484e;background:#34282d}button:disabled{cursor:default;background:#29313a;border-color:#424d59;color:var(--muted)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:4px}a{color:var(--green);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,p{margin:0}h2{font-size:19px;font-weight:600}h3{font-size:16px;font-weight:600}[hidden]{display:none!important}.shell{max-width:1160px;padding:0 28px;margin:auto}header{background:#141a1fb3;border-bottom:1px solid #66757940}header .shell{height:80px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:12px;color:var(--text);white-space:nowrap}.brand:hover{text-decoration:none}.brand strong{font-size:18px;letter-spacing:.05em}.mark{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#354a37,#22332b);border:1px solid #53694b;flex-shrink:0}.mark svg{width:27px;height:27px}.tag{color:var(--amber);font-size:12px;background:#302c27;border:1px solid #574b3a;border-radius:6px;padding:5px 10px}.back{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#c2cdd7;margin-bottom:18px}main{padding-top:30px!important;padding-bottom:30px!important}.room-header{background:linear-gradient(110deg,#27352ce8,#202b34f2);border:1px solid #5a6c57;border-radius:15px;padding:26px 28px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:24px}.eyebrow{font-size:12px;color:var(--green);margin-bottom:8px}.room-title{display:flex;align-items:baseline;gap:10px;line-height:1.2}.room-title strong{font-size:38px;letter-spacing:.03em;font-weight:600}.room-title span{font-size:20px;font-weight:500}.headline-copy{color:#b4c4b0;margin-top:12px;font-size:13px}.badge{display:inline-flex;align-items:center;gap:7px;border-radius:6px;padding:6px 12px;font-size:13px;background:#344432;color:#c0dab3;white-space:nowrap}.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.badge.busy{background:#3e382e;color:var(--amber)}.badge.fault{background:#443238;color:var(--red)}.badge.neutral{background:#303a45;color:#c0ccd7}
.workspace{background:#1b232bf5;border:1px solid #44515c;border-radius:16px;padding:24px;box-shadow:0 14px 40px #0a101633}.columns{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:22px;align-items:start}.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px}.panel+.panel{margin-top:18px}.section-intro{font-size:13px;color:var(--muted);margin-top:5px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.step-title{display:flex;align-items:center;gap:9px;font-size:13px;margin:19px 0 10px}.step-title b{display:grid;place-items:center;width:22px;height:22px;background:#344632;border:1px solid #4d6046;color:var(--green);border-radius:6px;font-size:11px}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.choice{display:flex;align-items:center;gap:12px;position:relative;cursor:pointer;border:1px solid #48535c;border-radius:10px;background:#202831;padding:16px;min-width:0}.choice:has(input:checked){background:linear-gradient(125deg,#2c3b30,#263139);border-color:#829b70}.choice:has(input:disabled){cursor:default}.choice input{accent-color:var(--green);width:16px;height:16px;flex-shrink:0;margin:0}.choice strong{display:block;font-size:14px;font-weight:600}.choice small{display:block;font-size:12px;color:var(--muted);margin-top:3px}.choice svg{width:30px;height:30px;color:var(--green);flex-shrink:0}.choices.single{grid-template-columns:1fr}.selection-footer{border-top:1px solid var(--line);margin-top:24px;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:18px}.selection-summary{font-size:12px;color:var(--muted)}.selection-summary strong{display:block;font-size:14px;color:#ccd7cd;font-weight:500}.start-button{min-width:176px;min-height:49px;flex-shrink:0}.aside-copy{font-size:13px;color:var(--muted);margin:8px 0 16px}.full{width:100%}.sidebar-divider{height:1px;background:var(--line);margin:22px 0}.small-note{font-size:12px;color:var(--muted);margin-top:9px;line-height:1.7}.alert{padding:15px 17px;border:1px solid #66553c;border-radius:9px;background:#302c27;color:var(--amber);font-size:13px;margin-bottom:18px}.alert.red{border-color:#68484e;background:#34282d;color:var(--red)}.alert button{margin-top:13px}.empty{padding:22px;background:#202831;border-radius:10px;color:var(--muted);font-size:13px}.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0;padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.facts div{min-width:0}.facts div+div{border-left:1px solid var(--line);padding-left:16px}.facts dt{font-size:12px;color:var(--muted);margin-bottom:4px}.facts dd{font-size:20px;font-weight:600;margin:0}.facts dd small{font-size:12px;color:var(--muted);font-weight:400}.game-name{font-size:23px;font-weight:600;margin-top:3px}.game-profile{color:var(--muted);font-size:13px;margin-top:4px}.join-actions{display:flex;align-items:center;gap:12px}.join-actions button{min-height:48px}.join-actions .primary{flex:1}.join-actions .secondary{flex:1}.connection{margin-top:16px;border:1px solid var(--line);background:#1b232b;border-radius:8px;padding:12px 14px}.connection summary{cursor:pointer;font-size:13px;color:#c2cdd7}.connection code{display:block;font-size:12px;line-height:1.8;color:#cbd8c4;overflow-wrap:anywhere;white-space:normal;margin:12px 0}.connection button{font-size:12px}.progress-top{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:16px 0}.progress-top strong{font-size:16px;font-weight:500}.elapsed{color:var(--muted);font-size:12px;white-space:nowrap}.progress-list{list-style:none;margin:20px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.progress-list li{font-size:12px;line-height:1.6;border-radius:8px;border:1px solid #394550;background:#202831;padding:12px;color:var(--muted)}.progress-list b{display:block;margin-bottom:4px;color:#81909c;font-size:16px;font-weight:500}.progress-list .active{border-color:#7d7158;background:#39332b;color:var(--amber)}.progress-list .active b{color:var(--amber)}.progress-list .done{border-color:#53664d;color:#bad0ae}.progress-list .done b{color:var(--green)}.progress-actions{display:flex;gap:12px;border-top:1px solid var(--line);padding-top:17px;align-items:center}.progress-actions p{font-size:12px;color:var(--muted);flex:1}.timeline{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}.timeline summary{font-size:13px;color:var(--muted);cursor:pointer}.timeline ol{padding:0;margin:12px 0 0;list-style:none}.timeline li{padding:9px 0;display:flex;align-items:start;gap:18px;border-top:1px solid #39455066;font-size:12px}.timeline time{min-width:52px;color:#91a1af;font-variant-numeric:tabular-nums}.timeline li span{color:#b4c3cb}.released{padding:38px;text-align:center}.released .symbol{width:52px;height:52px;border-radius:50%;background:#344932;display:grid;place-items:center;color:var(--green);margin:0 auto 18px;font-size:22px}.released h2{font-size:23px}.released p{margin:12px 0 22px;color:var(--muted);font-size:14px}.released a{display:inline-block;padding:12px 26px;background:var(--green);color:var(--ink);border-radius:9px;font-weight:600}footer{color:var(--muted);font-size:12px;padding:0 0 20px}footer .shell{display:flex;justify-content:space-between;gap:16px}dialog{padding:0;color:var(--text);background:var(--card);border:1px solid #52604f;border-radius:15px;width:470px;max-width:calc(100% - 32px);box-shadow:0 22px 80px #0008}dialog::backdrop{background:#0b1017c4}.dialog-content{padding:27px}dialog h2{font-size:21px;margin-bottom:10px}dialog p{font-size:14px;color:#b8c4ce}.confirm-detail{padding:14px 16px;background:#1e252d;border-radius:8px;margin:18px 0;font-size:13px;color:var(--muted)}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.toast{position:fixed;z-index:5;bottom:22px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;background:#344333;border:1px solid #7a946d;padding:12px 18px;border-radius:9px;color:#e2efd9;box-shadow:0 8px 36px #0007;font-size:13px}
@media(max-width:900px){.columns{grid-template-columns:minmax(0,1fr) 250px;gap:16px}.workspace{padding:18px}.panel{padding:18px}.choices{grid-template-columns:1fr}.selection-footer{align-items:stretch;flex-direction:column;gap:13px}.start-button{width:100%}.facts{gap:8px}.facts div+div{padding-left:10px}.facts dd{font-size:18px}}
@media(max-width:680px){.columns{grid-template-columns:1fr}.room-header{padding:22px}.workspace{padding:16px}.choices{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{display:block}}
@media(max-width:580px){.shell{padding:0 18px}header .shell{height:auto;min-height:70px;gap:8px 10px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.brand{gap:10px}.brand strong{font-size:16px}.mark{width:30px;height:30px}.mark svg{width:23px;height:23px}.tag{font-size:10px;padding:4px 6px;margin-left:auto}main{padding-top:22px!important}.room-header{padding:20px 18px;gap:12px}.room-title strong{font-size:32px}.room-title span{font-size:18px}.headline-copy{font-size:12px}.badge{font-size:12px;padding:5px 8px}.workspace{padding:14px 12px;border-radius:13px}.panel{padding:17px 14px}.choices{grid-template-columns:1fr}.choice{padding:14px}.section-heading{margin-bottom:15px}h2{font-size:18px}.join-actions{flex-direction:column;align-items:stretch;gap:9px}.facts dd{font-size:17px}.facts{gap:6px}.facts div+div{padding-left:8px}.facts dt{font-size:11px}.progress-list{grid-template-columns:1fr}.progress-list li{display:flex;align-items:center;gap:10px;padding:10px 12px}.progress-list b{margin:0;width:20px}.progress-actions{flex-direction:column;align-items:stretch}.room-header .badge{align-self:flex-start;margin-top:5px}.progress-top{align-items:start}.released{padding:28px 12px}.released h2{font-size:20px}footer .shell{flex-direction:column;gap:4px}.dialog-content{padding:23px}.dialog-actions{flex-direction:column-reverse}.dialog-actions button{width:100%}body::before{background-image:linear-gradient(180deg,#11171da6,#11171dbb 40%,#171c22 100%),url("assets/dota-heroes-mobile.webp");background-position:center,57% top}.section-intro{font-size:12px}}

.main-column{display:flex;flex-direction:column;gap:18px}.main-column .panel+.panel{margin-top:0}.main-column .alert{margin-bottom:0}#catalog-fieldset{margin-top:18px!important}#catalog-fieldset legend{padding:0}.room-header:has(+ #workspace[hidden]){opacity:.85}@media(max-width:580px){.room-header{display:grid;grid-template-columns:1fr auto;gap:7px 12px}.room-header>div{display:contents}.room-header .eyebrow{grid-column:1/-1;margin:0}.room-title{grid-column:1;grid-row:2}.room-header .badge{grid-column:2;grid-row:2;margin:0;align-self:center}.headline-copy{grid-column:1/-1;margin-top:6px}}
.brand .mark{background:#342827;border-color:#69443e;border-radius:8px;box-shadow:none}.brand .mark svg{width:28px;height:28px}@media(max-width:580px){.brand .mark svg{width:24px;height:24px}}
.choice{align-items:flex-start}.choice input{margin-top:4px}.choice svg{margin-top:3px}.choice:hover{border-color:#70876a}.choice-meta{display:inline-block;margin-top:9px;font-size:11px;font-style:normal;color:#bbcbb0;background:#344136;border:1px solid #4a5b46;border-radius:4px;padding:1px 6px}.choices:not(.single) .choice{padding:15px 13px}.choice strong{line-height:1.5}.choice small{line-height:1.6}
.profile-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:19px 0 10px}.profile-heading .step-title{margin:0}.profile-scroll-note{font-size:11px;color:var(--muted)}.choices.scrollable{max-height:264px;overflow-y:auto;overscroll-behavior:contain;padding-right:8px;scrollbar-width:thin;scrollbar-color:#788c6d #1b232b;align-content:start}.choices.scrollable .choice{min-height:58px;align-items:center}.choices.scrollable .choice input{margin-top:0}.choices.scrollable::-webkit-scrollbar{width:6px}.choices.scrollable::-webkit-scrollbar-track{background:#1b232b;border-radius:4px}.choices.scrollable::-webkit-scrollbar-thumb{background:#788c6d;border-radius:4px}@media(max-width:580px){.profile-heading{align-items:flex-start;flex-direction:column;gap:6px}.choices.scrollable{max-height:254px}.choices.scrollable .choice{min-height:53px}}
.map-scroll-note{font-size:11px;color:var(--muted);margin:0 0 9px}.choices.scrollable.compact-scroll{max-height:220px}

.game-heading,.join-heading,.selection-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.game-heading{align-items:flex-start}.game-heading .eyebrow{margin-bottom:7px}.current-game .game-name{font-size:26px;line-height:1.4;margin:0}.game-heading .badge{margin-top:4px}.current-game .facts{margin:20px 0 0;padding:16px 0;border-bottom:0}.join-section{margin:20px -22px -22px;padding:22px;background:#1c252d;border-radius:0 0 12px 12px;border-top:1px solid var(--line)}.join-heading h3,.join-heading h2{font-size:18px}.join-heading .small-note{margin:0;font-size:11px}.client-entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:17px}.client-entry{display:flex;align-items:center;gap:12px;min-height:86px;padding:15px;background:#2d4037;border:1px solid #708b61;border-radius:10px;color:#e1ecd9;text-decoration:none}.client-entry:hover{background:#354f40;text-decoration:none}.client-entry strong{display:block;font-size:17px;font-weight:600;white-space:nowrap}.client-entry small{display:block;font-size:12px;color:#bdd0b4;margin-top:3px}.client-symbol{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;background:#afcf9f;color:#213021;border-radius:50%;font-size:19px;font-weight:700}.china-symbol{background:#3b4f42;border:1px solid #95b685;color:#d3e6c8;font-size:17px}.client-arrow{margin-left:auto;font-size:22px}.invite-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:19px 0 0;font-size:12px;color:var(--muted)}.invite-row button{font-size:12px;padding:8px 12px;background:transparent;border-color:#53614f;color:#c6d8bf}.connection{margin-top:15px;background:transparent;border:0;border-top:1px solid #394550;padding:14px 0 0;border-radius:0}.protocol-help{margin-top:12px;padding-top:0;border-top:0}.protocol-help summary{font-size:12px;color:var(--muted)}.next-game-bar{padding:19px 22px;border:1px solid var(--line);border-radius:12px;background:#222b33;display:flex;justify-content:space-between;align-items:center;gap:16px}.next-game-bar h2{font-size:17px}.next-game-bar button{white-space:nowrap;padding:11px 18px;border-color:#6c7f62;color:#d5e1ce;background:#2c3932;font-weight:600}.selection-heading button{font-size:12px;padding:6px 12px;background:transparent}.sidebar .panel{background:#202831}.sidebar h2{font-size:17px}.sidebar .small-note{font-size:11px}.sidebar .aside-copy{font-size:12px}.sidebar h3{font-size:15px}
@media(max-width:900px){.join-section{margin-left:-18px;margin-right:-18px;margin-bottom:-18px;padding:18px}.client-entry{gap:9px;padding:12px}.client-symbol{width:28px;height:28px}.client-entry strong{font-size:15px}.client-entry small{font-size:11px}.client-arrow{font-size:18px}}
@media(min-width:681px) and (max-width:1000px){.client-entries{grid-template-columns:1fr}}
@media(max-width:580px){.current-game .game-name{font-size:22px}.join-section{margin-left:-14px;margin-right:-14px;margin-bottom:-17px;padding:17px 14px}.client-entries{grid-template-columns:1fr;gap:10px}.client-entry{min-height:70px;padding:13px;gap:12px}.client-entry strong{font-size:16px}.client-symbol{width:32px;height:32px}.next-game-bar{padding:17px 14px;flex-direction:column;align-items:stretch}.next-game-bar button{width:100%}.next-game-bar .section-intro{font-size:12px}.invite-row{gap:8px}.invite-row button{padding:8px;font-size:11px}.game-heading{gap:8px}.game-heading .badge{font-size:11px}}

.join-shell{max-width:900px}.join-card{padding:26px}.join-card .join-section{margin:22px -26px -26px;padding:24px 26px}.join-context{font-size:13px;color:var(--muted);margin-bottom:18px}.join-state{padding:28px 8px 12px;text-align:center}.state-symbol{margin:0 auto 16px;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#384737;color:var(--green);font-size:23px}.join-state h2{font-size:23px}.join-state p{max-width:430px;margin:12px auto 22px;color:var(--muted);font-size:14px}.state-action{display:inline-block;padding:11px 22px;border:1px solid #708b61;border-radius:9px;background:#2d4037;color:#e1ecd9}.public-summary{border:1px solid var(--line);border-radius:10px;padding:16px;margin:18px 0 20px;text-align:left;background:#202831}.public-summary strong{display:block;font-size:16px}.public-summary span{font-size:12px;color:var(--muted)}.join-footnote{text-align:center;font-size:12px;color:var(--muted);margin-top:18px}@media(max-width:580px){.join-card{padding:21px 16px}.join-card .join-section{margin-left:-16px;margin-right:-16px;margin-bottom:-21px;padding:21px 16px}.join-state{padding:16px 0 8px}.join-state h2{font-size:20px}.join-context{font-size:12px}}


.client-entries{display:flex;flex-wrap:wrap;gap:10px;margin-top:21px}.client-entry{flex:1;justify-content:center;min-height:48px;padding:12px 14px;border-radius:8px;background:#afcf9f;border-color:#afcf9f;color:#1f2c1b;gap:8px}.client-entry:hover{background:#c0ddaf}.client-entry strong{font-size:14px}.client-arrow{font-size:17px;margin-left:0}.connection.command-box{margin-top:21px;padding:17px;border:1px solid #465b49;border-radius:9px;background:#1e2c28}.command-box h3{font-size:12px;font-weight:400;color:#aebfaf}.command-box code{margin:8px 0 13px;color:#d8e7d0;font-size:13px;font-weight:600}.command-box button{font-size:12px;background:#293930;border-color:#62765b;color:#d0e2c6}.protocol-help{margin-top:23px;padding-top:17px;border-top:1px solid var(--line)}.console-help{margin-top:17px;padding-top:17px;border-top:1px solid var(--line)}.console-help summary{font-size:12px;color:var(--muted);cursor:pointer}.invite-row{margin-top:23px;padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap;gap:10px}.invite-row button{font-size:12px;padding:9px 13px}.join-heading h2,.join-heading h3{font-size:25px;line-height:1.35}.join-heading .small-note{font-size:11px;white-space:nowrap}
@media(max-width:580px){.client-entries{display:flex;gap:9px}.client-entry{min-height:47px;padding:11px;min-width:135px}.client-entry strong{font-size:13px}.command-box code{font-size:12px}.join-heading h2,.join-heading h3{font-size:23px}}
.join-card .join-section{margin:25px 0 0;padding:25px 0 0;background:none;border-top:1px solid var(--line)}.join-card{background:#252d36}.join-card .facts{border-bottom:0;margin-bottom:0}.join-card .client-entries{display:flex}.join-card .command-box{margin-top:20px}@media(max-width:580px){.join-card .join-section{margin:22px 0 0;padding:22px 0 0}}
.command-box code{font-family:Consolas,ui-monospace,monospace}

.join-context-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px}.join-context-row .join-context{margin:0}