:root{color-scheme:dark;--gold:#e7c86f;--ink:#0c110d;--panel:rgba(14,20,15,.94);--line:rgba(239,222,170,.2)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#080b09;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans TC",sans-serif}body{display:grid;place-items:center;background:radial-gradient(circle at 50% 18%,#273226 0,#111812 56%,#070a08 100%)}
button{font:inherit}#shell{position:relative;width:min(100vw,177.777vh);aspect-ratio:16/9;max-height:100vh;background:#101510;border:1px solid #3b443b;box-shadow:0 24px 90px #000c;overflow:hidden}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;user-select:none;-webkit-user-select:none;cursor:default}
.hidden{display:none!important}.overlay{position:absolute;inset:0;z-index:20}
.cover{overflow:auto;padding:30px 34px 24px;background:radial-gradient(circle at 18% 22%,rgba(169,145,74,.16),transparent 25%),radial-gradient(circle at 83% 14%,rgba(80,123,83,.14),transparent 27%),linear-gradient(135deg,#0a100b 0,#121a13 50%,#080d09 100%)}
.cover:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:32px 32px}.cover-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.58),transparent 42%)}
.cover-shell,.cover-footer{position:relative;z-index:1}.cover-shell{width:min(1180px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(330px,.82fr) minmax(560px,1.18fr);gap:28px;align-items:start}.cover-hero{min-height:625px;padding:18px 4px 12px;display:flex;flex-direction:column}.brand-line{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:.18em;color:#8f9a8c;font-weight:900}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(235,211,128,.45);border-radius:7px;background:linear-gradient(145deg,#302d1d,#171d17);color:#efd77d;letter-spacing:0;font-size:10px;box-shadow:0 6px 20px #0007}.title-block{max-width:470px;margin:72px 0 24px}.eyebrow{font-size:9px;letter-spacing:.26em;color:#c7b36f;font-weight:900}.title-block h1{font-family:Georgia,"Noto Serif TC",serif;font-size:72px;line-height:.88;margin:10px 0 17px;color:#f5e7b9;text-shadow:0 7px 30px #000}.title-block p{margin:0;color:#aeb9ad;font-weight:650;font-size:13px;line-height:1.8;max-width:430px}
.battle-brief{margin-top:auto;border-top:1px solid rgba(231,207,128,.19);border-bottom:1px solid rgba(231,207,128,.12);padding:15px 0}.brief-title{font-size:9px;color:#d5c17d;letter-spacing:.18em;font-weight:950;margin-bottom:10px}.brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.brief-grid div{min-height:58px;padding:9px 10px;border:1px solid rgba(226,215,172,.10);border-radius:9px;background:rgba(22,30,23,.58)}.brief-grid b{display:block;color:#e7ddbd;font-size:10px;margin-bottom:4px}.brief-grid span{display:block;color:#78867a;font-size:8.5px;line-height:1.45;font-weight:700}.quick-keys{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.quick-keys span{padding:5px 7px;border-radius:5px;background:#151c16;border:1px solid rgba(223,213,171,.10);font-size:8px;color:#7f8c80;font-weight:800}
.cover-panel{padding-top:5px}.panel-kicker{display:flex;justify-content:space-between;align-items:center;margin:0 2px 8px;font-size:9px;letter-spacing:.18em;color:#879386;font-weight:950}.version-chip{letter-spacing:.05em;padding:4px 7px;border:1px solid rgba(230,208,130,.26);border-radius:99px;color:#d8c578;background:#28291e}.menu-card{width:100%;background:linear-gradient(180deg,rgba(24,33,25,.97),rgba(11,17,12,.98));border:1px solid rgba(231,218,173,.17);border-radius:15px;box-shadow:0 18px 50px #0008;padding:16px;margin-bottom:11px}.main-card{padding:18px}.save-card{padding:14px 16px}.section-title{display:flex;justify-content:space-between;align-items:center;color:#f2e7c5;font-weight:950;font-size:12px;margin-bottom:11px}.muted{font-size:8.5px;color:#6e7a70;font-weight:750}.setup-step{display:flex;align-items:center;gap:8px;margin:12px 0 7px;color:#aab5a7;font-size:9px;font-weight:900;letter-spacing:.08em}.setup-step span{display:grid;place-items:center;width:22px;height:18px;border-radius:5px;background:#2a2b1e;border:1px solid rgba(230,207,126,.22);color:#dcc875;font-size:8px}.choice-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.choice,.segmented button{border:1px solid rgba(230,216,169,.13);border-radius:9px;background:#161e17;color:#cfd7cc;padding:10px 11px;text-align:left;cursor:pointer;font-weight:900;transition:.14s transform,.14s border-color,.14s background}.choice strong{display:block;font:950 18px/1 system-ui;color:#e9dfbf}.choice>span{display:block;margin-top:3px;font-size:9px;color:#9ba79a}.choice small,.segmented small{display:block;margin-top:5px;font-size:8.5px;line-height:1.35;color:#6f7c70;font-weight:700}.choice:hover,.segmented button:hover{transform:translateY(-1px);border-color:rgba(239,210,111,.42)}.choice.active,.segmented button.active{border-color:rgba(240,207,105,.68);background:linear-gradient(180deg,#46432d,#282f23);box-shadow:inset 0 0 0 1px rgba(255,234,159,.05);color:#fff0b8}.choice.active strong{color:#ffe79a}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:7px}.difficulty-cards button{min-height:58px}.difficulty-cards b{display:block;font-size:11px;color:#e8dfc1}.toggle-line{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;border:1px solid rgba(230,216,169,.12);border-radius:9px;padding:9px 11px;background:#141b15;color:#e1e4d5;font-weight:850;font-size:10px;cursor:pointer}.toggle-line div b{display:block;font-size:10px}.toggle-line div small{display:block;margin-top:4px;color:#6f7b70;font-size:8.5px}.map-toggle input{position:absolute;opacity:0;pointer-events:none}.map-toggle i{position:relative;width:38px;height:21px;border-radius:99px;background:#242d25;border:1px solid rgba(232,217,166,.16);flex:0 0 auto}.map-toggle i:before{content:"";position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:#7e887c;transition:.18s}.map-toggle input:checked+i{background:#5e5b32;border-color:#d1ba66}.map-toggle input:checked+i:before{left:20px;background:#f2d978}.primary{border:1px solid #f1d97e!important;background:linear-gradient(180deg,#e6c66d,#9c7e31)!important;color:#191b13!important;font-weight:950!important;cursor:pointer}.big{width:100%;min-height:49px;border-radius:9px;font-size:13px}.start-battle{margin-top:13px;display:flex;align-items:center;justify-content:space-between;padding:0 15px}.start-battle span{font-size:13px}.start-battle small{font-size:8px;opacity:.68}.start-battle:hover{filter:brightness(1.06)}.save-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.save-slot{min-height:78px;border:1px solid rgba(232,217,166,.11);border-radius:9px;padding:9px;background:rgba(24,32,25,.76)}.save-slot .slot-title{font-size:9.5px;color:#eee1b9;font-weight:900}.save-slot .slot-meta{font-size:8px;line-height:1.45;color:#7c897d;min-height:28px;margin:4px 0}.slot-actions{display:flex;gap:4px}.slot-actions button,.pause-actions button,.icon-btn{border:1px solid rgba(232,217,166,.16);border-radius:6px;background:#232c24;color:#dbe1d3;padding:5px 7px;font-size:8.5px;font-weight:900;cursor:pointer}.slot-actions button:hover,.pause-actions button:hover,.icon-btn:hover{border-color:#d8bd66}.danger{color:#ff9e91!important}.cover-footer{width:min(1180px,100%);margin:8px auto 0;color:#59655b;font-size:8px;font-weight:750;text-align:right;letter-spacing:.04em}
.modal{display:grid;place-items:center;background:rgba(4,7,5,.76);backdrop-filter:blur(5px)}.modal-card{width:min(840px,88%);background:linear-gradient(180deg,#1c271e,#0e150f);border:1px solid rgba(232,217,166,.23);border-radius:18px;padding:22px;box-shadow:0 30px 100px #000d}.modal-head{display:flex;justify-content:space-between;align-items:flex-start}.modal-head h2{margin:3px 0 0;color:#f2e7c5;font-size:28px}.icon-btn{width:34px;height:34px}.match-summary{margin:12px 0;padding:10px 12px;border-radius:9px;background:#131a14;color:#9fa99d;font-size:10px}.pause-actions{display:flex;gap:8px;margin:12px 0 20px}.pause-actions button{padding:10px 14px}
.hud-controls{position:absolute;right:14px;top:164px;z-index:8}.hud-controls button,#audioControls button,#zoomControls button{border:1px solid rgba(232,217,166,.24);border-radius:8px;background:rgba(14,19,15,.90);color:#efe3bd;font:800 10px system-ui;padding:7px 9px;cursor:pointer;box-shadow:0 4px 16px #0005;backdrop-filter:blur(4px)}.hud-controls button:hover,#audioControls button:hover,#zoomControls button:hover{border-color:rgba(255,226,132,.62);background:rgba(49,54,38,.94)}#audioControls{position:absolute;right:14px;top:202px;display:flex;gap:7px;z-index:7}#audioControls button.off{opacity:.52;text-decoration:line-through}#zoomControls{position:absolute;right:14px;top:240px;display:flex;align-items:center;gap:4px;z-index:7;padding:5px 6px;border:1px solid rgba(232,217,166,.18);border-radius:9px;background:rgba(14,19,15,.88);box-shadow:0 4px 16px #0005}#zoomControls span{min-width:38px;text-align:center;color:#efe3bd;font:900 10px system-ui}#zoomControls button{min-width:27px;padding:5px}#zoomControls button.active{border-color:rgba(255,226,132,.68);background:rgba(92,78,39,.92);color:#fff0b4}
.loading{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:rgba(8,13,9,.96);transition:opacity .28s}.loading:not(.visible){opacity:0;pointer-events:none}.loader-wrap{text-align:center;color:#efe3b7;font-weight:900;letter-spacing:.08em;font-size:12px}.spinner{width:46px;height:46px;border-radius:50%;border:3px solid rgba(238,220,162,.15);border-top-color:#e7c86f;margin:0 auto 14px;animation:spin .78s linear infinite}.loading-bar{width:260px;height:4px;background:#283028;margin-top:12px;border-radius:999px;overflow:hidden}.loading-bar i{display:block;width:8%;height:100%;background:#e4c468;transition:width .2s}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.cover{padding:20px}.cover-shell{grid-template-columns:1fr}.cover-hero{min-height:auto}.title-block{margin:34px 0 18px}.title-block h1{font-size:50px}.brief-grid{grid-template-columns:1fr 1fr}.cover-panel{padding-top:0}.choice-row{grid-template-columns:1fr}.save-slots{grid-template-columns:1fr}.cover-footer{text-align:left}}

/* V3.0 PHP/MySQL multiplayer */
.front-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px}.front-mode-tabs button{border:1px solid rgba(232,217,166,.14);border-radius:10px;background:#151d16;color:#98a495;padding:9px 12px;text-align:left;cursor:pointer}.front-mode-tabs button b{display:block;font-size:11px;color:#d9dfd1}.front-mode-tabs button small{display:block;margin-top:3px;font-size:8px;color:#6f7b70}.front-mode-tabs button.active{background:linear-gradient(180deg,#49452d,#273026);border-color:#d9bd64}.front-mode-tabs button.active b{color:#ffe79a}.front-setup-panel{display:block}.online-card{min-height:370px}.online-two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}.online-box{padding:12px;border:1px solid rgba(232,217,166,.11);border-radius:10px;background:rgba(14,20,15,.68)}.online-field{display:block;margin:10px 0}.online-field>span{display:block;margin-bottom:5px;color:#9da99c;font-size:9px;font-weight:900}.online-field input,.online-field select{width:100%;height:39px;border:1px solid rgba(232,217,166,.16);border-radius:8px;background:#0e1510;color:#f0e7c8;padding:0 10px;font:800 11px system-ui;outline:none}.online-field input:focus,.online-field select:focus{border-color:#d6ba62;box-shadow:0 0 0 2px rgba(214,186,98,.09)}.online-message{margin-top:11px;padding:9px 10px;border-radius:8px;background:#111812;border:1px solid rgba(232,217,166,.08);color:#788579;font-size:8.5px;line-height:1.5}.online-message.error{color:#ff9d8e;border-color:rgba(255,110,90,.3)}.online-message.ok{color:#bfe1a9;border-color:rgba(151,215,126,.25)}.resume-online{margin-top:9px;width:100%;border:1px solid rgba(142,215,255,.28);border-radius:8px;background:#17242a;color:#cfeeff;padding:9px;font:900 10px system-ui;cursor:pointer}.online-info-card{padding:13px 16px}.online-rules{display:flex;gap:6px;flex-wrap:wrap}.online-rules span{padding:6px 8px;border-radius:6px;background:#121a13;border:1px solid rgba(232,217,166,.08);color:#7e8a7e;font-size:8px;font-weight:800}
.lobby-card{width:min(760px,90%)}.lobby-code-row{display:flex;align-items:center;justify-content:space-between;margin:14px 0;padding:13px 15px;border:1px solid rgba(232,217,166,.14);border-radius:10px;background:#111913}.lobby-code-row small{display:block;color:#748176;font-size:8px;font-weight:900;letter-spacing:.12em}.lobby-code-row strong{display:block;margin-top:2px;color:#ffe48e;font:950 27px/1 monospace;letter-spacing:.16em}.lobby-code-row button{border:1px solid rgba(232,217,166,.18);border-radius:7px;background:#263027;color:#e8ddbc;padding:8px 10px;font-size:9px;font-weight:900;cursor:pointer}.lobby-status{font-size:9px;color:#879589;margin-bottom:8px}.lobby-players{display:grid;gap:6px}.lobby-player{display:grid;grid-template-columns:42px 1fr auto auto;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;background:#141c15;border:1px solid rgba(232,217,166,.09)}.lobby-player .slot{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#243126;font:950 10px system-ui}.lobby-player .name{color:#e9dfc0;font-size:10px;font-weight:900}.lobby-player .role{color:#738076;font-size:8px}.lobby-player .state{font-size:8px;font-weight:950;color:#d5a66a}.lobby-player.ready .state{color:#9cd58a}.lobby-player.offline{opacity:.48}.lobby-actions{display:flex;gap:8px;margin-top:13px}.lobby-actions button{flex:1;min-height:42px;border:1px solid rgba(232,217,166,.16);border-radius:8px;background:#202a21;color:#e5ddc2;font-weight:950;cursor:pointer}.lobby-help{margin-top:10px;color:#677469;font-size:8px;line-height:1.5}.net-status{display:inline-flex;align-items:center;margin-right:6px;padding:6px 8px;border:1px solid rgba(117,211,137,.26);border-radius:8px;background:rgba(13,30,17,.88);color:#95e6a5;font:900 8px system-ui;letter-spacing:.05em}.net-status.warn{color:#ffe08a;border-color:rgba(255,224,138,.28)}.net-status.bad{color:#ff9b91;border-color:rgba(255,120,105,.28)}
body.online-match .save-card,body.online-match #pauseSaveSlots{display:none!important}body.online-match .modal-card .section-title:last-of-type{display:none}.online-note{padding:10px;border-radius:8px;background:#101712;color:#819084;font-size:8.5px;border:1px solid rgba(232,217,166,.08)}
@media(max-width:900px){.online-two-col{grid-template-columns:1fr}.front-mode-tabs{grid-template-columns:1fr 1fr}.lobby-player{grid-template-columns:36px 1fr auto}}
body.online-match #restartBtn{display:none!important}