/* Keep the existing cream/mint background; use a quiet, Chinese game menu. */
:root{--menu-ink:#284f44;--menu-soft:#526e63;--menu-line:#c7d6c9}
body[data-screen="home"] :is(#reset),body[data-screen="matching"] :is(#reset){display:none}
body[data-screen="online"] :is(.selection,.moves,.controls,#reset){display:none}
body[data-screen="online"] .arena{margin-bottom:24px}
header .brand{font-size:24px;letter-spacing:2px}header .tools{align-items:center}header .header-note>span{border:0;margin:0;padding:0;font-size:12px;color:#617b6c}
#connection{font:11px ui-monospace,monospace;color:#337a61;padding-right:8px}#back-home{border:1px solid var(--menu-line);background:#fffdf5;color:#416653}
#portal{container-type:inline-size;container-name:lobby;max-width:1120px;margin:0 auto;color:var(--menu-ink)}
.home-layout{display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:48px;align-items:center;min-height:calc(100dvh - 160px);padding:24px 16px 32px}
.home-art{display:flex;align-items:flex-end;justify-content:center;min-width:0;height:440px;gap:0}
.home-fighter{min-width:0;flex:1;text-align:center}.home-fighter img{display:block;width:100%;height:400px;object-fit:contain}.home-fighter>span{font-size:14px;letter-spacing:2px;color:#557463;display:block;padding:8px 0}
.home-menu{text-align:center;width:100%;max-width:384px;justify-self:center}.home-menu h1{font-size:48px;font-weight:700;line-height:1.4;letter-spacing:4px;margin:0;color:#2e5547}.home-subtitle{font-size:14px;color:var(--menu-soft);margin:8px 0 32px}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mode-card{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;min-height:80px;border:1px solid #bed0c2;border-radius:12px;background:#fffdf6;color:#315b48;padding:16px;transition:background .15s,border-color .15s}
.mode-card strong{font-size:18px;font-weight:600;letter-spacing:1px}.mode-card>span{font-size:12px;color:#5a7463}.mode-card:hover{color:#315b48;background:#f3f8ee;border-color:#83ab8e}.mode-card.selected{border-color:#4a8060;background:#e6f0e0;box-shadow:inset 0 0 0 1px #4a8060}.mode-card.soon{background:#f6f3e8}.mode-card.soon.selected{border-color:#aa975c;box-shadow:inset 0 0 0 1px #aa975c}
.mode-description{min-height:64px;margin:16px 0;text-align:center}.mode-description>span{font-size:12px;color:#496a55}.mode-description p{font-size:12px;color:#5e7566;line-height:1.8;margin:8px 0 0}
.start-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:68px;padding:16px 24px;border:1px solid #c9a447;border-radius:12px;background:#eac467;color:#4c431e;font-size:28px;font-weight:700;letter-spacing:4px;box-shadow:0 3px 0 #bc9a43}
.start-button:hover{background:#f0cf7d;color:#4c431e}.start-button:active{transform:translateY(2px);box-shadow:0 1px 0 #bc9a43}.start-button:disabled{opacity:1;background:#e7e8da;border-color:#c7cbbb;box-shadow:0 2px 0 #c5c9b7;color:#737967;cursor:default}
.room-code-wrap{margin-top:16px;text-align:left}.room-code-wrap label{display:block;font-size:12px;color:#4d6c59;margin-bottom:8px}.room-code-wrap input{display:block;width:100%;height:48px;border:1px solid #a9c6b3;border-radius:8px;background:#fffdf5;color:#315c48;text-align:center;font:24px ui-monospace,monospace;letter-spacing:8px;padding:8px 16px;outline-offset:4px}.room-code-wrap input::placeholder{font:14px "Microsoft YaHei";letter-spacing:2px;color:#6c8072}.room-code-wrap p{font-size:11px;line-height:1.7;margin:8px 0 0;color:#5b7462}
.portal-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 8px;border-top:1px solid #c9d7c8;color:#607969;font-size:11px}.portal-footer a:hover{color:#315f45;text-decoration:underline}
.match-heading{display:flex;align-items:center;justify-content:space-between;margin:8px 0 0;border-bottom:1px solid var(--menu-line);padding:8px 0 16px}.text-button{padding:8px 0;font-size:13px;color:#4b7058}.match-heading>span{font-size:12px;color:#607761}
.queue-panel{min-height:480px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:48px 16px}.queue-symbol,.queue-panel .eyebrow{display:none}.queue-panel h1{font-size:32px;letter-spacing:1px;margin:0 0 16px;font-weight:600}.queue-panel>p{font-size:14px;color:#506d5c;line-height:1.8;margin:0 0 24px}.queue-panel #queue-time{font:24px ui-monospace,monospace;color:#557c5d;margin:0 0 24px}.queue-panel small{font-size:12px;line-height:1.8;color:#5b7561;margin-top:24px}.queue-panel .start-button{font-size:18px;letter-spacing:2px;max-width:240px;min-height:56px;margin:8px 0}
.pick-title{position:relative;text-align:center;padding:32px 64px 24px}.pick-title h1{font-size:30px;font-weight:600;margin:0 0 12px;letter-spacing:2px}.pick-title p{font-size:13px;color:#5a735f;line-height:1.8;margin:0}.pick-title #pick-clock{position:absolute;right:16px;top:32px;border:1px solid #c5d6ba;background:#edf3e3;border-radius:8px;width:48px;height:48px;display:grid;place-items:center;font:24px Georgia;color:#4d7c5d}.pick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1020px;margin:0 auto 24px;gap:24px}.pick-card{position:relative;border:1px solid #cbd8c0;border-radius:16px;overflow:hidden;background:#f9f5df;padding:16px 24px 24px;color:#35583d;text-align:left}.pick-card[data-pick="dog"]{background:#e8f2ee}.pick-card img{width:100%;height:260px;object-fit:contain;display:block}.pick-badge{position:absolute;top:16px;left:16px;font-size:11px;padding:8px;background:#fffcf0db;border:1px solid #c9d4b8;border-radius:6px;color:#537153}.pick-card>div{border-top:1px solid #b8c4a44a;padding-top:16px}.pick-card>div>span{font-size:11px;color:#5c7462}.pick-card h2{font-size:24px;margin:8px 0;color:#385943}.pick-card p{font-size:12px;margin:0;color:#536f59;line-height:1.7}.pick-card:not(:disabled):hover{border-color:#508765;background:#f0f5e6}.pick-card.mine{box-shadow:inset 0 0 0 2px #548466;border-color:#548466}.pick-card:disabled{opacity:1;cursor:default}.pick-card.mine .pick-badge{background:#437857;color:#fff;border-color:#437857}.pick-card.taken canvas{filter:grayscale(.75);opacity:.6}.pick-card.taken .pick-badge{background:#6e7869;color:#fff;border-color:#6e7869}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #377b61;outline-offset:4px}
/* Cooldown is grouped with the player label, above each life bar. */
.hud .name{flex-wrap:wrap;gap:4px}.hud .name .role-info{display:inline-flex!important;align-items:center;gap:4px;flex:none}.ult-status{white-space:nowrap;font-size:10px;font-weight:600;color:#326c52;border:1px solid #b4cfb4;background:#e7f1df;border-radius:4px;padding:2px 4px}.ult-status.cooling{background:#f0ead8;border-color:#d6c494;color:#785c26}
.arena{container-type:inline-size;container-name:arena}
@container arena (max-width:600px){.hud .fighter{width:38%;padding:6px;column-gap:5px;grid-template-columns:28px minmax(0,1fr);border-radius:10px}.hud .p2{grid-template-columns:minmax(0,1fr) 28px}.portrait{width:28px;height:28px}.arena .hud .name strong{font-size:10px;letter-spacing:0}.hud .name{margin-bottom:5px;gap:4px}.arena .fighter-role{display:none}.ult-status{font-size:8px;padding:2px 4px}.hud .hp{height:9px}.hp-caption{font-size:7px}.hp-caption .life-label{display:none}.energy-line{gap:3px;margin-top:4px}.energy-line>span{font-size:7px;min-width:21px}.stamina{height:3px}.hud .round{width:32px;padding:5px 2px;top:2px}.round>span{font-size:5px;letter-spacing:0}.round b{font-size:22px;line-height:24px}.round small{display:none}}
@container lobby (max-width:980px){.home-layout{gap:24px;grid-template-columns:minmax(0,1fr) 352px;padding:24px 0}.home-art{height:380px}.home-fighter img{height:344px}.home-menu h1{font-size:40px}.home-subtitle{margin-bottom:24px}}
@container lobby (max-width:700px){.home-layout{grid-template-columns:1fr;gap:24px;min-height:0;padding:24px 8px 32px}.home-menu{order:0;max-width:384px}.home-art{order:1;height:260px;width:100%;max-width:400px;justify-self:center}.home-fighter img{height:232px}.home-fighter>span{font-size:12px}.home-menu h1{font-size:36px}.home-subtitle{font-size:13px;margin-bottom:24px}.mode-card{min-height:72px;padding:12px;gap:8px}.mode-card strong{font-size:16px}.mode-card>span{font-size:11px}.start-button{font-size:28px;min-height:64px}.mode-description{min-height:56px}.mode-description p{font-size:11px}.pick-grid{gap:12px}.pick-card{padding:12px}.pick-card img{height:230px}.pick-card h2{font-size:20px}.pick-card p{font-size:11px}.pick-badge{top:12px;left:12px;font-size:10px;padding:6px}.pick-title h1{font-size:26px}.pick-title p{font-size:12px}}
@container lobby (max-width:450px){.home-layout{padding-top:16px;gap:16px}.home-menu h1{font-size:36px}.home-art{height:240px}.home-fighter img{height:216px}.home-subtitle{margin:8px 0 24px}.mode-grid{gap:8px}.mode-description{margin:16px 0}.portal-footer{padding:16px 4px;font-size:10px}.pick-title{padding:24px 32px}.pick-title h1{font-size:24px}.pick-title #pick-clock{right:0;top:24px;width:32px;height:32px;font-size:20px}.pick-title p{font-size:11px}.pick-grid{gap:8px}.pick-card{padding:8px 8px 16px;border-radius:12px}.pick-card img{height:184px}.pick-card h2{font-size:18px}.pick-card p{font-size:10px}.pick-badge{top:8px;left:8px;font-size:9px}.queue-panel h1{font-size:26px}.queue-panel>p{font-size:12px}.queue-panel small{font-size:11px}}
@media(max-width:760px){header .brand{font-size:20px;letter-spacing:1px}#connection{font-size:9px;padding-right:4px}}
@media(prefers-reduced-motion:reduce){.mode-card{transition:none}}

@container arena (max-width:600px){.arena .hud .name{flex-direction:column;align-items:flex-start}.arena .hud .p2 .name{flex-direction:column;align-items:flex-end}}

.home-fighter img,.pick-card img{filter:drop-shadow(0 6px 4px #39604920)}
.asset-loading{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;background:#eef3e8e8;backdrop-filter:blur(8px);color:#315747}
.asset-loading[hidden]{display:none}.asset-loading section{width:min(100%,440px);padding:32px;border:1px solid #b9ceba;border-radius:20px;background:#fffdf4;box-shadow:0 16px 60px #284f4422}.asset-loading h2{font-size:26px;line-height:1.4;margin:0 0 16px;letter-spacing:1px}.asset-loading p{font-size:14px;line-height:1.8;margin:0 0 20px;overflow-wrap:anywhere}.asset-loading progress{display:block;width:100%;height:12px;accent-color:#518d67;border:0;border-radius:8px;overflow:hidden;background:#e3eadc}.asset-loading progress::-webkit-progress-bar{background:#e3eadc}.asset-loading progress::-webkit-progress-value{background:#518d67;border-radius:8px}.asset-loading progress::-moz-progress-bar{background:#518d67}.asset-numbers{display:flex;align-items:center;justify-content:space-between;margin:12px 0 24px;gap:12px;font-size:13px;font-variant-numeric:tabular-nums}.asset-numbers strong{font-size:22px}.asset-buttons{display:flex;gap:12px;justify-content:flex-end}.asset-buttons button{padding:12px 20px;border-radius:8px;border:1px solid #b4c9b2;background:#f4f7ed;color:#315747;font-size:15px}.asset-buttons #asset-retry{background:#eccb79;border-color:#d1b05c}.asset-loading small{display:block;font-size:12px;line-height:1.8;color:#6b7e68;margin-top:24px}.asset-loading #asset-error{color:#985732;font-size:13px;margin:0 0 20px}.assets-busy #battle-screen{pointer-events:none}
@media(max-width:480px){.asset-loading section{padding:24px}.asset-loading h2{font-size:22px}}