:root{--bg: #0b1220;--panel-bg: rgba(14, 22, 38, .94);--panel-border: #23324d;--text: #e6edf7;--text-muted: #8ea1bd;--accent: #4f9dff;--accent-hover: #6cb0ff;--success: #3ecf8e;--warn: #ffb347;--danger: #ff5d6c;--radius: 10px;--gap: 12px}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:13px}#app{position:relative;width:100vw;height:100vh}#world{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}.panel{position:absolute;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 8px 24px #00000059}#topbar{top:var(--gap);left:var(--gap);right:var(--gap);display:flex;align-items:center;gap:14px;padding:8px 14px;z-index:10;flex-wrap:wrap}#topbar .brand{font-weight:700;letter-spacing:.5px;color:var(--accent)}.stat{display:flex;flex-direction:column;line-height:1.15}.stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted)}.stat-value{font-variant-numeric:tabular-nums;font-weight:600}.resource-bar{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}.resource-chip{display:flex;gap:4px;align-items:baseline;background:#101b2e;border:1px solid var(--panel-border);border-radius:6px;padding:3px 7px;font-variant-numeric:tabular-nums}.resource-chip .res-name{color:var(--text-muted);font-size:10px;text-transform:uppercase}.resource-chip.full{border-color:var(--warn)}.players-toggle{display:none}.map-search{position:relative;width:min(250px,42vw);z-index:2}.map-search input{width:100%;min-height:32px;padding:6px 9px;color:var(--text);background:#101b2e;border:1px solid var(--panel-border);border-radius:7px}.map-search-results{position:absolute;top:calc(100% + 5px);left:0;width:max(250px,100%);max-height:280px;overflow-y:auto;border:1px solid var(--panel-border);border-radius:8px;background:#0e1626;box-shadow:0 8px 24px #00000073}.map-search-result{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:8px 10px;border-radius:0;text-align:left;background:transparent}.map-search-result:hover{background:#1a2a40}.map-search-result.active,.map-search-result:focus-visible{background:#1a2a40;outline:2px solid var(--accent);outline-offset:-2px}.map-search-result span,.map-search-empty{color:var(--text-muted);font-size:11px}.map-search-empty{padding:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.match-history{z-index:12;top:50%;left:50%;width:min(520px,calc(100vw - 32px));max-height:min(70vh,620px);overflow-y:auto;padding:16px 18px;transform:translate(-50%,-50%)}.match-history h2{margin:0 0 7px}.match-history h3{margin:12px 0 5px;font-size:12px}.match-history p{color:var(--text-muted)}.match-history ol{display:grid;gap:8px;padding-left:24px}.match-history .campaign-events{max-height:150px;overflow-y:auto;gap:4px}.match-history li{padding-left:3px}.match-history li strong,.match-history li span{display:block}.match-history li span{color:var(--text-muted);font-size:11px}.campaign-browser{margin-top:14px;padding-top:11px;border-top:1px solid var(--panel-border)}.campaign-browser-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.campaign-browser-heading button{padding:5px 8px;font-size:11px}.campaign-browser .hint{margin:6px 0}.campaign-list{display:grid;gap:6px;max-height:180px;overflow-y:auto;list-style:none;padding:0;margin:0}.campaign-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px;background:#101b2e;border-radius:6px}.campaign-list li span{min-width:0;color:var(--text-muted);font-size:11px}.campaign-list li button{flex:0 0 auto;padding:5px 8px;font-size:11px}.campaign-history{margin-top:10px;color:var(--text-muted);font-size:12px}.campaign-history summary{cursor:pointer;padding:5px 0}.campaign-history details ol{margin:6px 0 0;padding-left:24px}.campaign-host-controls{margin:8px 0;padding:8px;border:1px solid #29364b;border-radius:8px}.campaign-host-controls legend{color:var(--text-muted);font-size:11px}.campaign-host-controls>label,.campaign-host-controls .row label{display:grid;gap:4px;flex:1 1 120px;font-size:11px;color:var(--text-muted)}.scenario-objectives{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:5px 10px;margin:8px 0;padding:8px;border:1px solid #29364b;border-radius:7px}.scenario-objectives legend{color:var(--text-muted);font-size:11px}.scenario-objectives label{display:flex;align-items:center;gap:6px;font-size:11px}.scenario-objectives input{accent-color:var(--accent)}.scenario-objectives small{grid-column:1 / -1;color:var(--text-muted);line-height:1.4}button{font:inherit;color:var(--text);background:var(--accent);border:none;border-radius:8px;padding:7px 12px;cursor:pointer;transition:background .15s ease,opacity .15s ease}button:hover{background:var(--accent-hover)}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ffd166;outline-offset:2px;position:relative;z-index:1}input,select,textarea{accent-color:var(--accent)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}button:disabled{opacity:.45;cursor:not-allowed}button.secondary{background:#223148}button.secondary:hover{background:#2c3f5c}button.active{outline:2px solid var(--accent)}#players-panel{top:68px;right:var(--gap);width:330px;padding:10px 12px;max-height:40vh;overflow-y:auto;z-index:9}#players-panel h2,.tab-content h2{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted)}#players-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}#players-list li{display:grid;grid-template-columns:12px minmax(90px,1fr) 76px 74px auto;align-items:center;gap:8px}.player-kick{padding:4px 7px;font-size:10px;white-space:nowrap}#players-list .swatch{width:12px;height:12px;border-radius:3px;flex-shrink:0}#players-list .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#players-list .meta{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:11px}#players-list .offline{opacity:.5}#side-panel{top:68px;left:var(--gap);width:300px;max-height:calc(100vh - 92px);display:flex;flex-direction:column;z-index:9;overflow:hidden}#tabs{display:flex;flex-wrap:wrap;gap:2px;padding:8px 8px 0}#tabs button{background:transparent;color:var(--text-muted);padding:6px 8px;border-radius:6px;font-size:12px}#tabs button.active{background:#223148;color:var(--text);outline:none}.tab-body{padding:10px 12px 14px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.tab-content{display:none}.tab-content.active{display:block}#tabs button[role=tab]:focus-visible{outline-offset:-1px}#side-panel.spectator-view .tab-content{pointer-events:none;opacity:.68}#info-body{margin:0;display:flex;flex-direction:column;gap:3px}#info-body div{display:flex;justify-content:space-between;gap:12px}#info-body dt{color:var(--text-muted)}#info-body dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}#claim-button{margin-top:10px;width:100%}.hint{color:var(--text-muted);font-size:12px;margin:4px 0 8px}.checkbox{display:flex;align-items:center;gap:8px;margin:8px 0;cursor:pointer}.checkbox input{width:16px;height:16px}#attack-ratio{width:100%}.list{display:flex;flex-direction:column;gap:4px}.list-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--panel-border);border-radius:7px;background:#101b2e}.list-item .li-main{flex:1;min-width:0}.list-item .li-title{display:block;font-weight:600}.list-item .li-sub{display:block;color:var(--text-muted);font-size:11px}.list-item button{padding:5px 9px;font-size:12px}.row{display:flex;gap:6px;margin:6px 0;align-items:center}.row select,.row input,#offer-form select,#offer-form input{flex:1;min-width:0;padding:6px 8px;border-radius:7px;border:1px solid var(--panel-border);background:#0d1526;color:var(--text);font:inherit}h3{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin:14px 0 6px}.action-hint{margin:0;padding:8px 12px;background:#4f9dff26;border-top:1px solid var(--panel-border);color:var(--accent);font-size:12px}#notices{position:absolute;bottom:var(--gap);right:var(--gap);display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:20;pointer-events:none}.notice{padding:8px 14px;border-radius:8px;background:var(--panel-bg);border:1px solid var(--panel-border);animation:notice-in .18s ease;max-width:320px}.notice.success{border-color:var(--success)}.notice.warn{border-color:var(--danger)}@keyframes notice-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}#debug{bottom:var(--gap);left:var(--gap);padding:6px 10px;font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;display:none;pointer-events:none}#debug.visible{display:block}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#16233c,#070c16 70%);z-index:100;overflow-y:auto;padding:20px}.overlay.hidden{display:none}.overlay-card{width:min(380px,92vw);padding:26px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:16px;text-align:center}.overlay-card h1{margin:0 0 4px;color:var(--accent)}.overlay-card h2{font-size:13px;text-transform:uppercase;color:var(--text-muted);margin:20px 0 8px}.overlay-card>p{color:var(--text-muted);margin:0 0 18px}.overlay-card label{display:block;text-align:left;font-size:12px;color:var(--text-muted);margin-bottom:6px}.overlay-card input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--panel-border);background:#0d1526;color:var(--text);font:inherit;margin-bottom:12px}.overlay-card button{width:100%}#lobby ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}#lobby li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border:1px solid var(--panel-border);border-radius:7px}.overlay-status{margin-top:12px;min-height:18px;font-size:12px;color:var(--danger)}#tutorial-card{right:350px;left:auto;bottom:var(--gap);width:min(340px,calc(100vw - 2 * var(--gap)));padding:12px 14px;z-index:9}.tutorial-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.tutorial-heading strong{font-size:14px}.tutorial-progress{margin:8px 0 4px;color:var(--accent);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}#tutorial-copy{margin:4px 0 10px;color:var(--text-muted);line-height:1.45}#tutorial-action{width:100%}#tutorial-close{min-width:32px;padding:3px 8px}@media(max-width:860px){#tutorial-card{top:120px;right:8px;bottom:auto;width:min(300px,calc(100vw - 16px))}}.leaderboard-head{display:grid;grid-template-columns:minmax(102px,1fr) 76px 74px;gap:8px;margin:0 0 7px 20px;color:var(--text-muted);font-size:9px;text-transform:uppercase}#players-list .land,#players-list .troops{text-align:right;white-space:nowrap}.map-context-menu{position:fixed;z-index:30;width:220px;padding:12px;border:1px solid #4f6d8f;border-radius:10px;background:#0c1727f7;box-shadow:0 12px 35px #00000080}.map-context-menu strong,.map-context-menu span{display:block;margin-bottom:8px}.map-context-menu button{width:100%}.map-context-menu{display:flex;flex-direction:column;gap:7px}.map-context-menu[hidden]{display:none}.city-view-banner{position:fixed;z-index:18;top:70px;left:50%;transform:translate(-50%);display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;max-width:min(94vw,1000px);padding:8px 12px;border:1px solid #db8cff;border-radius:9px;color:#f4e6ff;background:#14172bf0;box-shadow:0 8px 24px #00000059}.city-view-banner label{display:inline-flex;align-items:center;gap:5px;font-size:12px}.city-view-banner input,.city-view-banner select{max-width:145px;padding:6px}.city-view-heading{display:flex;flex-direction:column;gap:2px;min-width:120px}.city-view-heading small{color:#c6b6dc}.city-local-stock{flex-basis:100%;text-align:center;color:#c6b6dc;font-size:11px}.city-local-stock.shortage{color:#ffb86b}.city-view-banner[hidden]{display:none}.spawn-banner{position:fixed;z-index:20;left:50%;top:78px;transform:translate(-50%);padding:10px 18px;border:1px solid var(--accent);border-radius:10px;background:#0c1727f5;box-shadow:0 8px 24px #00000059;pointer-events:none}@media(max-width:860px){#players-panel{display:none}.players-toggle{display:inline-flex}#players-panel.mobile-open{display:block;top:116px;left:var(--gap);right:auto;width:min(310px,calc(100vw - 2 * var(--gap)));max-height:38vh}#side-panel{width:calc(100vw - 2 * var(--gap));max-height:46vh;top:auto;bottom:var(--gap);overscroll-behavior:contain}#topbar .brand{display:none}}@media(pointer:coarse){button,input:not([type=checkbox]):not([type=radio]),select{min-height:44px;touch-action:manipulation}input[type=checkbox],input[type=radio]{width:22px;height:22px;margin:0 4px;flex:0 0 auto}#tabs button{min-height:44px;padding-inline:12px}.map-search-results{max-height:min(40vh,320px)}}