:root{--bg: #0a0e17;--panel: #121a2b;--panel-border: #1f2e4a;--accent: #35e7ff;--accent-2: #b45cff;--text: #dbe6ff;--text-dim: #7e8dad;--danger: #ff4d6d;--ok: #3dffa0;--select: #ffc24a;--topbar-h: 56px;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}button,select,input,.village-plot,.troop-row,.train-card,.map-tile,.tabs button{touch-action:manipulation}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);overflow-x:clip}body.auth-bg{background:linear-gradient(180deg,rgba(10,14,23,.55),rgba(10,14,23,.92) 70%,var(--bg) 100%),radial-gradient(1200px 600px at 20% -10%,rgba(53,231,255,.1),transparent 60%),radial-gradient(900px 500px at 90% 10%,rgba(180,92,255,.1),transparent 60%),url(/art/skyline.png) center top / cover no-repeat,var(--bg);min-height:100vh}#app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}h1,h2,h3{letter-spacing:.04em;text-transform:uppercase;margin:0 0 .5em}h1{color:var(--accent);text-shadow:0 0 12px rgba(53,231,255,.5)}button{font:inherit;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04101c;border:none;border-radius:8px;padding:.6em 1em;font-weight:700;cursor:pointer;min-height:44px}button:disabled{opacity:.4;cursor:not-allowed}button.secondary{background:transparent;border:1px solid var(--panel-border);color:var(--text)}input,select{font:inherit;background:#0d1424;border:1px solid var(--panel-border);color:var(--text);border-radius:6px;padding:.6em .8em;min-height:44px}.topbar{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto auto;grid-template-areas:"brand village res tabs clock logout";align-items:center;column-gap:.5em;row-gap:.25em;padding:.3em .8em;background:var(--panel);border-bottom:1px solid var(--panel-border);position:sticky;top:0;z-index:100;box-shadow:0 6px 18px #00000073}.topbar .brand{grid-area:brand}.topbar #village-switcher{grid-area:village}.topbar .resource-bar{grid-area:res}.topbar .tabs{grid-area:tabs}.topbar .server-clock{grid-area:clock}.topbar #logout-btn{grid-area:logout}.topbar .brand{font-weight:800;color:var(--accent);letter-spacing:.1em;font-size:.95em;flex:0 0 auto}.topbar select{min-height:34px;padding:.25em .5em;max-width:200px;flex:0 0 auto}.topbar #logout-btn{min-height:34px;padding:.35em .8em}.topbar .resource-bar{display:flex;flex-wrap:nowrap;gap:.35em;padding:0;background:transparent;border:none;overflow-x:auto;scrollbar-width:thin;min-width:0;flex:1 1 auto;-webkit-overflow-scrolling:touch}.resource-chip{display:flex;gap:.35em;align-items:baseline;background:#0d1424;border:1px solid var(--panel-border);border-radius:20px;padding:.2em .65em;font-size:.85em;white-space:nowrap;flex:0 0 auto}.resource-chip .label{color:var(--text-dim);font-size:.8em}.resource-chip strong{font-variant-numeric:tabular-nums}.resource-chip .short-label{display:none}.resource-chip.full{border-color:#ffc24a8c}.resource-chip.full strong{color:var(--select)}.resource-chip.over{border-color:#3dffa08c}.resource-chip.over strong{color:var(--ok)}.resource-chip.delivery{border-color:#35e7ff73}.resource-chip.delivery strong{color:var(--ok)}.resource-chip.delivery.full{border-color:#ffc24a8c}.resource-chip.delivery.full strong{color:var(--select)}.topbar .tabs{display:flex;gap:.2em;padding:0;background:transparent;border:none;overflow-x:auto;flex:0 0 auto}.topbar .tabs button{background:transparent;color:var(--text-dim);border-radius:8px;border:1px solid transparent;padding:.35em .7em;white-space:nowrap;min-height:34px}.topbar .tabs button.active{color:var(--accent);border-color:var(--accent);background:#0d1424}.topbar .tabs .tab-short{display:none}@media (max-width: 1100px){.topbar .tabs .tab-full{display:none}.topbar .tabs .tab-short{display:inline}}main{flex:1;padding:.8em 1em 2.5em;max-width:1240px;margin:0 auto;width:100%}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8em}.card{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:.9em}.card .level{color:var(--accent);font-weight:700}.card-icon{display:block;margin:0 auto .4em;filter:drop-shadow(0 0 6px rgba(53,231,255,.35))}.card .queue-note{color:var(--ok);font-size:.85em}.form{display:flex;flex-direction:column;gap:.8em;max-width:420px;margin:2em auto}.form-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:1.4em}.error{color:var(--danger);font-size:.9em}.hint{color:var(--text-dim);font-size:.85em}.map-stage-wrap{position:relative;padding:0 1.4em;--map-max: max(340px, calc(100vh - var(--topbar-h, 56px) - 330px))}.map-scroll{max-width:100%;overflow-x:auto;scrollbar-width:thin}.map-edge-arrow{position:absolute;z-index:20;width:2.1em;height:2.1em;border-radius:50%;background:#0a101acc;border:1px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1em;cursor:pointer;box-shadow:0 0 10px #00000080}.map-edge-arrow:hover{background:#35e7ff2e}.map-edge-arrow.edge-n{top:.2em;left:50%;transform:translate(-50%)}.map-edge-arrow.edge-s{bottom:.2em;left:50%;transform:translate(-50%)}.map-edge-arrow.edge-w{left:.1em;top:50%;transform:translateY(-50%)}.map-edge-arrow.edge-e{right:.1em;top:50%;transform:translateY(-50%)}.map-context-overlay{position:fixed;inset:0;z-index:1000;background:#05080e99;display:flex;align-items:flex-end;justify-content:center}.map-context-panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:16px 16px 0 0;width:100%;max-width:680px;max-height:82vh;overflow-y:auto;padding:1em 1.2em 1.4em;box-shadow:0 -12px 40px #0000008c}.map-context-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6em;padding-bottom:.5em;border-bottom:1px solid var(--panel-border)}.map-context-head strong{color:var(--select)}.map-context-close{background:transparent;border:1px solid var(--panel-border);color:var(--text);width:2em;height:2em;border-radius:50%;font-size:1.1em;line-height:1;cursor:pointer}.map-context-close:hover{border-color:var(--danger);color:var(--danger)}.map-grid{display:grid;gap:0;width:min(100%,var(--map-max, 100%));margin:.6em auto;background:#05080e;padding:2px;border-radius:8px;border:1px solid var(--panel-border)}.map-tile{aspect-ratio:1;min-width:26px;border:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.map-coord{display:flex;align-items:center;justify-content:center;font-size:.55em;color:var(--text-dim);min-width:22px;min-height:22px;aspect-ratio:1}.coord-corner{background:transparent}.map-tile .tile-label{font-size:.6em;font-weight:800;color:#fff;text-shadow:0 0 4px #000,0 0 2px #000;background:#00000059;border-radius:4px;padding:1px 3px}.map-tile.own,.map-tile.enemy{z-index:1}.map-tile.ruins .tile-label,.map-tile.core .tile-label{color:#ffd23c}.map-tile.selected{z-index:2}.map-tile .tile-art{position:absolute;inset:0;z-index:0;background-size:100% 100%;background-position:center;background-repeat:no-repeat;filter:brightness(.9) saturate(1.02);pointer-events:none}.map-tile:after{content:"";position:absolute;inset:0;z-index:10;pointer-events:none}.map-tile.own:after{box-shadow:inset 0 0 0 2px var(--accent)}.map-tile.enemy:after{box-shadow:inset 0 0 0 2px var(--danger)}.map-tile.selected:after{box-shadow:inset 0 0 0 3px var(--select),inset 0 0 18px #ffc24a4d}.map-tile.loose:after{box-shadow:inset 0 0 0 2px #55ffb4cc,inset 0 0 12px #55ffb466}.map-tile .tile-icon,.map-tile .tile-label{position:relative;z-index:5}.map-tile.loose .loose-icon{z-index:6}.map-tile .tile-icon{width:86%;height:86%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8)) drop-shadow(0 0 4px rgba(0,0,0,.55))}.map-tile .tile-icon.city{width:96%;height:96%}.map-tile.loose .loose-icon{position:absolute;right:0;top:0;width:46%;height:46%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.9))}.map-tile .loose-amount{position:absolute;left:2px;bottom:2px;z-index:7;font-size:.6em;font-weight:800;line-height:1.2;color:#04120c;background:#55ffb4eb;border-radius:6px;padding:0 3px;pointer-events:none;font-variant-numeric:tabular-nums}.map-legend{margin:.5em 0 .4em;font-size:.8em;color:var(--text-dim)}.map-legend>summary{cursor:pointer;padding:.2em 0}.map-legend[open]{display:flex;flex-wrap:wrap;align-items:center;gap:.4em .9em}.map-legend[open]>summary{flex:0 0 auto;margin-right:.6em}.map-legend>span{display:inline-flex;align-items:center;gap:.35em;margin:.15em 0}.map-legend img{width:22px;height:22px;object-fit:contain}.map-legend .biome-thumb{width:26px;height:26px;border-radius:4px;border:1px solid var(--panel-border);object-fit:cover}.map-legend .legend-title{font-weight:800;color:var(--accent);letter-spacing:.04em}.legend-select-swatch{display:inline-block;width:16px;height:16px;border-radius:4px;border:2px solid var(--select);box-shadow:0 0 6px #ffc24a80}.map-legend .legend-credit{opacity:.65;font-style:italic}.village-marker{display:flex;flex-direction:column;align-items:center;gap:1px}.village-flag{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--accent);filter:drop-shadow(0 0 3px rgba(53,231,255,.8))}.map-tile.enemy .village-flag{border-bottom-color:var(--danger);filter:drop-shadow(0 0 3px rgba(255,77,109,.8))}.village-tag{font-size:.5em;font-weight:800;color:#fff;text-shadow:0 0 3px #000,0 0 2px #000;background:#0006;border-radius:3px;padding:0 2px;line-height:1.3}.map-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.8em;margin-bottom:.6em}.map-pad{display:flex;flex-direction:column;align-items:center;gap:2px}.map-pad button{padding:.2em .6em;min-height:32px}.goto-form{display:flex;gap:.4em;align-items:center}.building-card{text-align:center}.building-name{font-weight:700;margin-top:.2em}.effect-desc{color:var(--text-dim);font-size:.78em;margin:.3em 0;min-height:2.2em}.effect-current{color:var(--ok);font-size:.82em}.effect-next{color:var(--accent);font-size:.82em;margin-bottom:.4em}.cost-preview{color:var(--text-dim);font-size:.72em;margin:.3em 0}.movement-form{display:flex;flex-direction:column;gap:.6em;margin-top:1em}.unit-row{display:flex;align-items:center;gap:.6em;justify-content:space-between}.village-subtabs{display:flex;gap:.4em;margin-bottom:.8em}.village-subtabs button{background:var(--panel);color:var(--text-dim);border:1px solid var(--panel-border)}.village-subtabs .queue-badge{margin-left:auto;align-self:center;font-size:.8em;font-weight:700;color:var(--text-dim);border:1px solid var(--panel-border);border-radius:20px;padding:.15em .6em;white-space:nowrap}.village-subtabs .queue-badge.full{color:var(--select);border-color:#ffc24a80}.queue-full{color:var(--select)}.village-subtabs button.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04101c}.village-layout{display:block}.village-stage{min-width:0}.village-ring,.village-center{position:relative;width:100%;max-width:min(560px,62vh);aspect-ratio:1;margin:0 auto 1em;background:radial-gradient(circle at center,rgba(53,231,255,.1) 0%,transparent 55%),linear-gradient(180deg,#060a12d1,#060a12eb),url(/art/village_hub.png) center / cover no-repeat;border:1px solid rgba(120,190,255,.25);box-shadow:0 0 24px #000c,0 0 40px #35e7ff1a inset}.village-ring{border-radius:50%}.village-center{border-radius:16px;background:radial-gradient(circle at center,rgba(180,92,255,.1) 0%,transparent 60%),linear-gradient(180deg,#060a12d1,#060a12eb),url(/art/village_hub.png) center / cover no-repeat;box-shadow:0 0 24px #000c,0 0 40px #b45cff1a inset}.village-plot{position:absolute;transform:translate(-50%,-50%);width:15%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 28%,#2a3c56f7,#060a12f7);border:2px solid rgba(130,200,255,.55);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;min-height:0;box-shadow:0 3px 12px #000000d9,inset 0 1px #ffffff24;transition:transform .15s,border-color .15s,box-shadow .15s}.village-plot:hover{transform:translate(-50%,-50%) scale(1.08);border-color:var(--accent);box-shadow:0 4px 16px #000000e6,0 0 12px #35e7ff73}.village-plot.selected{border-color:var(--ok);box-shadow:0 0 0 3px #3dffa059,0 4px 16px #000000e6}.village-plot.empty{opacity:1;border:2px dashed rgba(150,205,245,.5);background:radial-gradient(circle at 50% 50%,#0e1624e6,#060a12c7)}.village-plot.empty img{opacity:.38;filter:grayscale(1) drop-shadow(0 0 4px rgba(0,0,0,.6))}.village-plot.empty:hover{border-color:var(--ok);box-shadow:0 4px 16px #000000e6,0 0 12px #3dffa059}.plot-plus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.7em;font-weight:800;color:#aae1ffe6;text-shadow:0 0 8px rgba(53,231,255,.5);pointer-events:none}.village-meta{font-size:.8em;color:var(--text-dim);margin:0 0 .6em;text-align:center}.village-plot.building{border-style:dashed}.village-plot.building img{opacity:.6}.building-detail .pick-wrap{flex:1 1 auto;min-width:0}.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:.4em;margin:.6em 0;max-height:40vh;overflow-y:auto;padding-right:.2em}.pick-card{display:flex;flex-direction:column;align-items:center;gap:.15em;padding:.35em .2em;background:#0a101ab8;border:1px solid var(--panel-border);border-radius:10px;cursor:pointer;min-height:0}.pick-card:hover{border-color:var(--accent)}.pick-card img{width:44px;height:44px;object-fit:contain}.pick-card .pick-name{font-size:.64em;line-height:1.15;text-align:center;color:var(--text-dim)}.pick-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px #35e7ff4d}.pick-card.selected .pick-name{color:var(--text)}.pick-card.unaffordable{opacity:.45}.pick-detail{border-top:1px solid var(--panel-border);padding-top:.6em;display:flex;flex-direction:column;gap:.35em;align-items:flex-start}.pick-detail .build-btn{align-self:flex-start}.village-plot img{width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 0 4px rgba(0,0,0,.6))}.plot-badge{position:absolute;bottom:4%;right:4%;min-width:1.5em;height:1.5em;padding:0 .2em;background:var(--panel);border:1px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.6em;font-weight:800;color:var(--accent);box-shadow:0 0 4px #000c}.building-detail-panel{max-width:560px;margin:0 auto}.building-detail{display:flex;gap:1em;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:1em;align-items:flex-start}.detail-icon{width:72px;height:72px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(53,231,255,.35))}.building-detail h3{margin:0 0 .2em}.server-clock{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent);background:#0d1424;border:1px solid var(--panel-border);border-radius:8px;padding:.25em .6em;font-size:.9em;white-space:nowrap}.plot-badge.upgradeable{color:#04101c;background:var(--ok);border-color:var(--ok);box-shadow:0 0 8px #3dffa0b3}.village-plot.can-upgrade{border-color:#3dffa099}.level.upgradeable{color:var(--ok);text-shadow:0 0 8px rgba(61,255,160,.5)}.train-form{display:flex;flex-wrap:wrap;gap:.5em;align-items:center}.train-form select{flex:1 1 200px}.train-form input{width:110px}.train-stats{color:var(--text-dim);font-size:.82em;margin:.4em 0 .6em}.train-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.7em;margin-bottom:1em}.train-card{display:flex;flex-direction:column;gap:.35em;align-items:stretch;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:.7em}.train-card:not(.unaffordable){border-color:#3dffa08c;box-shadow:0 0 0 1px #3dffa02e}.train-card.unaffordable{opacity:.6}.train-icon{width:96px;height:96px;object-fit:contain;align-self:center;filter:drop-shadow(0 0 6px rgba(53,231,255,.3))}.train-name{font-weight:800;text-align:center}.train-rank{align-self:flex-start;font-size:.68em;font-weight:800;letter-spacing:.05em;color:var(--text-dim);background:#0d1424;border:1px solid var(--panel-border);border-radius:10px;padding:.1em .5em;text-transform:uppercase}.train-card:not(.unaffordable) .train-rank{color:var(--ok);border-color:#3dffa080}.train-purpose{font-size:.74em;color:var(--text-dim);margin:0;text-align:left;line-height:1.35}.counter-line{font-size:.76em;margin:0;color:var(--ok)}.counter-line strong{color:var(--ok)}.train-statline{font-size:.75em;color:var(--text-dim);display:flex;flex-direction:column;gap:.1em}.train-statline strong{color:var(--text);font-variant-numeric:tabular-nums}.train-cost{font-size:.73em;color:var(--text);text-align:center}.train-max{font-size:.82em;text-align:center}.train-max.ok{color:var(--ok)}.train-max.none{color:var(--danger)}.train-max strong{font-variant-numeric:tabular-nums}.train-controls{display:flex;gap:.4em}.train-amount{width:100%;min-width:0}.train-amount.over{border-color:var(--danger);color:var(--danger)}.train-maxbtn{padding:.3em .6em;min-height:40px}.train-duration{font-size:.78em;text-align:center;min-height:1.1em}.train-duration.ok{color:var(--accent)}.train-duration.over{color:var(--danger)}.train-go{margin-top:.1em}.troop-summary{display:flex;flex-wrap:wrap;gap:.6em 1.4em;margin:.8em 0;padding:.6em .9em;background:#0d1424;border:1px solid var(--panel-border);border-radius:10px}.troop-summary strong{color:var(--accent)}.unit-layout{display:block}.troop-list{display:flex;flex-direction:column;gap:.4em;min-width:0}.troop-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:.5em .7em;background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:.5em .7em;color:var(--text);text-align:left;min-height:48px;cursor:pointer}.troop-row.selected{border-color:var(--ok);box-shadow:0 0 0 2px #3dffa04d}.troop-row img{grid-row:1 / span 2}.troop-name{font-weight:700}.troop-count{font-weight:800;color:var(--accent);justify-self:end;font-variant-numeric:tabular-nums}.troop-stat{grid-column:2 / span 2;font-size:.78em;color:var(--text-dim);display:inline-block;margin-right:.6em}.unit-detail-panel{min-width:0}.unit-detail{display:flex;gap:1em;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:1em;align-items:flex-start}.unit-detail h3{margin:0 0 .2em}.stat-grid{display:grid;grid-template-columns:auto auto;gap:.25em .9em;margin:.5em 0 .4em;font-size:.85em}.stat-grid span{color:var(--text-dim)}.stat-grid strong{color:var(--text);font-variant-numeric:tabular-nums}.send-form{display:flex;flex-direction:column;gap:.7em;max-width:560px;margin:1em auto 0}.send-head{display:flex;align-items:center;justify-content:space-between;gap:.6em;flex-wrap:wrap}.send-head .label{color:var(--text-dim);font-size:.85em}.send-type{min-width:160px}.send-units{display:flex;flex-direction:column;gap:.4em}.send-row{display:grid;grid-template-columns:1fr auto 96px auto;align-items:center;gap:.5em;background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;padding:.4em .6em}.send-uname{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.send-avail{color:var(--text-dim);font-size:.8em;white-space:nowrap}.send-input{width:96px}.send-max{padding:.3em .6em;min-height:36px}.send-preview{background:#0d1424;border:1px solid var(--panel-border);border-radius:10px;padding:.7em .9em;display:flex;flex-direction:column;gap:.25em}.pv-row{display:flex;justify-content:space-between;gap:1em;font-size:.9em}.pv-row span{color:var(--text-dim)}.pv-row strong{font-variant-numeric:tabular-nums}.pv-arrive strong{color:var(--ok)}.tile-info{background:#0d1424;border:1px solid var(--panel-border);border-radius:10px;padding:.6em .9em;max-width:560px;margin:.8em auto}.tile-info-title{font-weight:700;color:var(--accent);margin-bottom:.2em}.tile-info-body{font-size:.85em;color:var(--text-dim)}.loose-info{border-color:#55ffb480}.loose-info .tile-info-title{color:var(--ok)}.loose-marker{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.8em;color:#04120c;background:radial-gradient(circle,rgba(85,255,180,.95) 0%,rgba(85,255,180,.35) 60%,transparent 70%);border-radius:50%;pointer-events:none}.spy-panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:.7em .9em;margin:.8em 0}.spy-panel>summary{cursor:pointer;font-weight:700;color:var(--accent)}.spy-report{border-top:1px solid var(--panel-border);padding:.6em 0;font-size:.85em}.spy-report:first-of-type{border-top:none}.spy-head{font-weight:700;margin-bottom:.2em}@media (min-width: 760px){.unit-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:1em;align-items:start}.unit-detail-panel{position:sticky;top:calc(var(--topbar-h, 56px) + .6em)}}@media (max-width: 1100px){.train-cards{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:.5em}.train-card{padding:.55em;gap:.25em}.train-purpose{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.train-statline .stat-extra{display:none}}@media (max-width: 600px){.village-plot{width:17%}main{padding:.8em .8em 3em}.topbar .brand{display:none}.topbar select{max-width:150px}}@media (max-width: 819px){.village-layout.has-selection{display:flex;flex-direction:column}.village-layout.has-selection .building-detail-panel{order:1}.village-layout.has-selection .village-stage{order:2}}@media (min-width: 820px){.village-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.4em;align-items:start}.village-ring,.village-center{margin:0 auto}.building-detail-panel{max-width:none;margin:0;position:sticky;top:calc(var(--topbar-h, 56px) + .6em)}.building-detail-panel .hint{padding-top:.4em}}@media (max-width: 1280px){.topbar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"village tabs logout" "res res res";column-gap:.4em;row-gap:.2em;padding:.25em .7em}.topbar .brand{display:none}.topbar select{max-width:30vw}.topbar .tabs{min-width:0;justify-content:flex-start}.topbar .server-clock{display:none}}@media (max-width: 1500px){.resource-chip{padding:.15em .5em;font-size:.8em;gap:.25em}.resource-chip .full-label{display:none}.resource-chip .short-label{display:inline}.resource-chip .cap{display:none}}@media (max-width: 640px){.topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"village logout" "tabs tabs" "res res";padding:.2em .5em}.topbar select{max-width:none}.topbar .tabs{justify-content:flex-start}.topbar .tabs button{padding:.3em .55em;font-size:.85em}.topbar .resource-chip.delivery{order:-1}}@media (orientation: landscape) and (max-height: 620px){.topbar{padding:.25em .8em;gap:.35em}.topbar .tabs button{padding:.3em .6em}.resource-chip{padding:.15em .6em;font-size:.8em}main{padding-top:.6em}.village-ring,.village-center{max-width:min(560px,74vh)}}.hp-block{margin:.5em 0 .2em;display:flex;flex-direction:column;gap:.35em}.hp-label{font-size:.8em;color:var(--muted, #9aa4b2)}.hp-label strong{color:var(--text, #e8eef7)}.hp-bar{height:8px;border-radius:999px;background:#ffffff1a;overflow:hidden}.hp-fill{display:block;height:100%;border-radius:999px;transition:width .3s ease}.hp-fill.ok{background:linear-gradient(90deg,#2fbf71,#6ee7a8)}.hp-fill.warn{background:linear-gradient(90deg,#e0a325,#ffd166)}.hp-fill.critical{background:linear-gradient(90deg,#c2382e,#ff6b5e)}.repair-btn{align-self:flex-start;margin-top:.2em;padding:.35em .7em;font-size:.78em;border-radius:8px;border:1px solid rgba(255,179,71,.5);background:#ffb34726;color:#ffd9a0;cursor:pointer}.repair-btn:hover{background:#ffb34747}.plot-damage{position:absolute;top:6%;left:6%;width:12px;height:12px;border-radius:50%;background:#ff5a4d;box-shadow:0 0 8px #ff5a4de6;z-index:12}.reports-panel{display:flex;flex-direction:column;gap:.6em}.reports-layout{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:1em;align-items:start}@media (max-width: 820px){.reports-layout{grid-template-columns:1fr}}.report-list{display:flex;flex-direction:column;gap:.3em;max-height:62vh;overflow-y:auto;padding-right:.2em}.report-row{display:grid;grid-template-columns:22px 1fr auto;gap:.5em;align-items:center;padding:.45em .6em;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:#ffffff08;color:inherit;text-align:left;cursor:pointer}.report-row:hover{background:#ffffff12}.report-row.selected{border-color:var(--select, #ffc24a);background:#ffc24a1f}.report-kind{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:.75em;font-weight:700}.report-kind.win{background:#2fbf7140;color:#6ee7a8}.report-kind.loss{background:#c2382e40;color:#ff8b80}.report-kind.collect{background:#579bff40;color:#9ec3ff}.report-kind.neutral{background:#a0a0a033;color:#cfcfcf}.report-label{font-size:.85em}.report-time{font-size:.72em;color:var(--muted, #9aa4b2);white-space:nowrap}.report-detail-panel{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:.8em 1em;background:#0000002e}.report-detail h3{margin:0 0 .2em;font-size:1em}.report-detail h4{margin:.9em 0 .3em;font-size:.85em;color:var(--muted, #9aa4b2)}.report-outcome{display:inline-block;margin:.4em 0;padding:.25em .7em;border-radius:999px;font-size:.8em;font-weight:600}.report-outcome.win{background:#2fbf7133;color:#6ee7a8}.report-outcome.loss{background:#c2382e33;color:#ff8b80}.report-outcome.neutral{background:#a0a0a02e;color:#cfcfcf}.loss-table{width:100%;border-collapse:collapse;font-size:.8em}.loss-table th,.loss-table td{padding:.25em .4em;border-bottom:1px solid rgba(255,255,255,.06);text-align:right}.loss-table th:first-child,.loss-table td:first-child{text-align:left}.loss-table th{color:var(--muted, #9aa4b2);font-weight:600}.loss-table td.lost,.loss-table strong.lost{color:#ff8b80}.move-help{margin:.5em 0 .7em;padding:.65em .85em;border:1px solid rgba(120,170,255,.22);border-left:3px solid rgba(120,170,255,.65);border-radius:8px;background:#4678d21a;font-size:.82em;line-height:1.45}.move-help-title{font-weight:700;color:#bcd6ff;margin-bottom:.15em}.move-help-text{margin:0 0 .35em;color:var(--text, #e8eef7)}.move-help-points{margin:0;padding-left:1.1em;color:var(--muted, #9aa4b2)}.move-help-points li{margin:.12em 0}@media (max-width: 820px){.move-help{font-size:.78em}}.mv-recon{display:flex;flex-direction:column;gap:.15em;background:#0d1424;border:1px solid var(--panel-border);border-radius:10px;padding:.55em .8em;margin-bottom:.8em}.mv-recon strong{color:var(--accent)}.mv-heading{margin:.9em 0 .4em;font-size:.8em;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase}.mv-heading.incoming{color:var(--danger)}.mv-list{display:flex;flex-direction:column;gap:.5em}.mv-row{display:flex;gap:.7em;align-items:flex-start;background:var(--panel);border:1px solid var(--panel-border);border-left:3px solid var(--panel-border);border-radius:10px;padding:.55em .7em}.mv-row.own{border-left-color:var(--accent)}.mv-row.incoming{border-left-color:var(--danger)}.mv-kind{font-size:.7em;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:.2em .5em;border-radius:6px;background:#0d1424;color:var(--accent);white-space:nowrap;flex:0 0 auto}.mv-kind.attack,.mv-kind.raid{color:var(--danger)}.mv-kind.spy{color:var(--accent-2)}.mv-kind.collect{color:var(--ok)}.mv-kind.return{color:var(--text-dim)}.mv-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.22em}.mv-route{font-size:.9em}.mv-units{font-size:.85em;color:var(--text-dim);overflow-wrap:anywhere}.mv-units.unknown{color:#b08a4a;font-style:italic}.mv-loot{font-size:.85em;color:var(--ok)}.mv-times{display:flex;flex-wrap:wrap;gap:.2em .8em;font-size:.8em;align-items:baseline}.mv-eta{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}.mv-eta.soon{color:var(--select)}.mv-row.incoming .mv-eta{color:var(--danger)}.mv-bar{height:4px;background:#0d1424;border-radius:3px;overflow:hidden;margin-top:.2em}.mv-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 1s linear}.mv-row.incoming .mv-bar>span{background:linear-gradient(90deg,var(--danger),var(--accent-2))}@media (max-width: 640px){.mv-row{flex-direction:column;gap:.3em}.mv-kind{align-self:flex-start}}.topbar{padding-left:calc(.8em + env(safe-area-inset-left,0px));padding-right:calc(.8em + env(safe-area-inset-right,0px))}main{padding-left:calc(1em + env(safe-area-inset-left,0px));padding-right:calc(1em + env(safe-area-inset-right,0px));padding-bottom:calc(2.5em + env(safe-area-inset-bottom,0px))}.map-context-panel{padding-bottom:calc(1.4em + env(safe-area-inset-bottom,0px))}@media (display-mode: standalone){.topbar{padding-top:env(safe-area-inset-top,0px)}}@supports (height: 100dvh){.map-stage-wrap{--map-max: max(340px, calc(100dvh - var(--topbar-h, 56px) - 330px))}.village-ring,.village-center{max-width:min(560px,62dvh)}@media (orientation: landscape) and (max-height: 620px){.village-ring,.village-center{max-width:min(560px,74dvh)}}}@media (hover: none) and (pointer: coarse){input,select,textarea{font-size:16px}.topbar .tabs button{min-height:38px}.map-pad button{min-height:40px;min-width:44px}}.map-scroll,.pick-grid{-webkit-overflow-scrolling:touch}