:root{color-scheme:dark;--ink:#edf0eb;--muted:#a6acaa;--muted2:#79858c;--bg:#141b24;--panel:#1d2732;--panel2:#25323f;--line:#3c4b55;--gold:#e4bd73;--green:#70c7a1;--red:#ec8d80;--earth:#c4b695}*{box-sizing:border-box}html,body,#app{height:100%;margin:0;overflow:hidden}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;border:0}button:disabled{cursor:not-allowed;opacity:.45}.hidden{display:none!important}.topbar{height:76px;display:flex;align-items:center;gap:18px;padding:9px 16px;background:#18222c;border-bottom:1px solid #3f4b52;box-shadow:0 3px 20px #0003;position:relative;z-index:4}.brand{display:flex;align-items:center;gap:9px;min-width:220px}.emblem{width:42px;height:43px;background:linear-gradient(150deg,#ceaa65,#906b3e);box-shadow:inset 0 0 0 2px #f1d39554;border-radius:9px;display:grid;place-items:center;color:#242423;font-size:30px}.brand strong{display:block;white-space:nowrap;font-family:Georgia,'Times New Roman',serif;letter-spacing:1px;font-size:15px;color:#f4dca7}.brand small{display:block;font-size:9px;letter-spacing:1.35px;color:#a4b0b2;margin-top:4px}.stat-track{display:flex;flex:1;justify-content:space-evenly;align-items:center;min-width:0;gap:10px}.stat{display:flex;align-items:center;gap:9px;white-space:nowrap}.stat-icon{color:#83aea6;font-size:23px}.stat-icon.gold-icon{color:var(--gold)}.stat small,.wave-time small{display:block;color:#9aa4ab;font-size:9px;letter-spacing:1.1px;margin-bottom:4px}.stat b{font-size:18px;font-variant-numeric:tabular-nums;font-weight:700}.wave-meta{display:flex;gap:13px;align-items:center;border-left:1px solid var(--line);padding-left:16px}.wave-badge{display:flex;flex-direction:column;justify-content:center;align-items:center;color:#e5c384;font-size:9px;letter-spacing:1px;font-weight:700;min-width:50px}.wave-badge b{font-size:28px;line-height:27px}.wave-time{text-align:center;min-width:79px}.wave-time strong{font-size:22px;letter-spacing:.5px;font-variant-numeric:tabular-nums}.top-actions{display:flex;gap:5px}.icon-btn{min-width:33px;height:35px;background:#26323e;border:1px solid #47515a;color:#dde6e9;border-radius:6px;font-size:17px;display:grid;place-items:center}.icon-btn:hover,.round-btn:hover{background:#394957}.game-area{display:flex;height:calc(100% - 76px);overflow:hidden}.map-wrap{position:relative;flex:1;min-width:0;background:#c3b490;touch-action:none;overflow:hidden}.map-wrap canvas#worldCanvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.map-wrap canvas#worldCanvas:active{cursor:grabbing}.map-title{position:absolute;top:14px;left:15px;pointer-events:none;z-index:2;display:flex;align-items:center;gap:9px;background:#18222ccc;color:#f0ece1;border:1px solid #5d6965;padding:8px 10px;border-radius:7px;font-size:10px;letter-spacing:.6px;font-weight:700}.map-label{color:#afbcbb;border-left:1px solid #63706c;padding-left:10px;font-weight:400}.pulse{width:7px;height:7px;border-radius:50%;background:#72dbab;box-shadow:0 0 0 3px #72dbab35}.map-control{display:flex;flex-direction:column;gap:7px;position:absolute;bottom:53px;left:16px}.round-btn{border-radius:8px;width:41px;height:41px;background:#202c35e6;color:white;font-weight:800;border:1px solid #657176;font-size:25px;box-shadow:0 3px 8px #0003}.radar-shell{position:absolute;top:15px;right:15px;background:#1e2935ed;border:1px solid #52616d;border-radius:9px;padding:9px;width:210px;box-shadow:0 6px 19px #0003}.radar-heading{display:flex;justify-content:space-between;font-size:10px;color:#cad1cf;font-weight:700;letter-spacing:1px}.radar-heading span:last-child{color:var(--gold)}#minimap{width:190px;height:146px;display:block;background:#827f6b;margin-top:6px;border:1px solid #647168;cursor:crosshair}.radar-legend{display:flex;gap:9px;align-items:center;justify-content:space-between;font-size:9px;color:#c6c9c3;margin-top:6px}.radar-legend span{display:flex;align-items:center;gap:3px}.legend-swatch{display:inline-block;width:7px;height:7px;border-radius:50%}.legend-swatch.green{background:#55d6aa}.legend-swatch.red{background:#e68176}.legend-swatch.beige{background:#dcd0a6}.footer-note{position:absolute;bottom:12px;left:72px;padding:9px 12px;background:#1d2a33d9;color:#e5ece7;border:1px solid #4e5b58;border-radius:7px;font-size:11px;pointer-events:none}.mode-hint{position:absolute;top:65px;left:50%;transform:translateX(-50%);padding:11px 15px;background:#f2d399;color:#2b241c;border-radius:7px;box-shadow:0 5px 25px #0006;display:flex;align-items:center;gap:13px;font-size:12px;font-weight:800;white-space:nowrap}.mode-hint button{background:#58412b;color:#fff;padding:7px 10px;border-radius:5px;font-size:11px}.side-panel{background:#1d2731;border-left:1px solid #53616c;flex:0 0 328px;max-width:328px;display:flex;flex-direction:column;box-shadow:-3px 0 15px #0002;z-index:2}.panel-head{height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;background:#24313d;border-bottom:1px solid #3d4d56;color:#e4c58c;font-size:10px;font-weight:800;letter-spacing:1.35px}.panel-collapse{background:transparent;color:#b4c1c3;font-size:20px;display:none}.panel-body{padding:19px 16px;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:#606e74 #1d2731}.panel-foot{border-top:1px solid #344651;min-height:35px;padding:12px 16px;font-size:10px;color:#9aa9a9}.panel-foot span{color:#64c59d}.overview-tag{color:#d2b37a;font-size:10px;letter-spacing:1.4px;font-weight:800}.panel-title{font-family:Georgia,'Times New Roman',serif;font-size:27px;line-height:1.12;margin:10px 0 7px;color:#f0ebe1}.panel-subtitle{font-size:12px;color:#abbab9;line-height:1.6;margin:0 0 16px}.big-crest{height:78px;width:78px;display:grid;place-items:center;margin:12px auto;color:#e8ce96;background:#344755;border:1px solid #72817c;border-radius:50%;font-size:44px}.section-heading{display:flex;align-items:center;justify-content:space-between;color:#e2c28b;font-size:11px;font-weight:800;letter-spacing:.8px;margin:19px 0 10px}.section-heading::after{content:'';flex:1;height:1px;background:#44515b;margin-left:9px}.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.info-card{padding:11px;background:#263440;border:1px solid #3e525d;border-radius:8px;min-width:0}.info-card small{font-size:10px;color:#a3b3b6;display:block}.info-card strong{display:block;font-size:18px;font-variant-numeric:tabular-nums;margin-top:5px;color:#f4f2e9;overflow:hidden;text-overflow:ellipsis}.info-card strong.good{color:#7bdbb1}.info-card strong.bad{color:#eb9c96}.primary,.secondary,.danger-outline{padding:11px 14px;border-radius:7px;font-weight:800;letter-spacing:.2px;font-size:12px;transition:filter .15s}.primary{background:#dbb878;color:#222626;border:1px solid #f0d39b}.secondary{background:#30414c;color:#ebede6;border:1px solid #5d6c72}.danger-outline{background:#352e33;color:#ffb2ac;border:1px solid #945a59}.primary:not(:disabled):hover,.secondary:not(:disabled):hover,.danger-outline:not(:disabled):hover{filter:brightness(1.16)}.full{width:100%;display:block;margin-top:9px}.action-pair{display:flex;gap:7px}.action-pair button{flex:1;min-width:0}.detail-line{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:9px 0;border-bottom:1px solid #364751;font-size:12px;color:#b7c1c1}.detail-line strong{color:#f0eddf;font-variant-numeric:tabular-nums}.ownership{display:inline-flex;gap:7px;align-items:center;font-size:11px;font-weight:700;padding:6px 9px;border-radius:5px;background:#293943;color:#e5d2a4}.owner-dot{width:9px;height:9px;border-radius:50%;background:var(--owner,#ccc);box-shadow:0 0 0 2px #ffffff16}.city-coords{font-size:11px;color:#9faeb3;margin:12px 0}.hint-block{padding:11px;border:1px solid #4a5962;background:#293640;border-radius:7px;color:#c6d0ce;font-size:11px;line-height:1.7;margin:12px 0}.select-caption{font-size:11px;color:#b9c9ca;margin-bottom:7px}.recruit-box{background:#26353f;border:1px solid #455865;border-radius:8px;padding:12px;margin-top:9px}.recruit-row{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:11px;font-size:12px}.recruit-row strong{color:#f3d398}.recruit-controls{display:flex;align-items:center;gap:7px}.recruit-controls input{width:100%;min-width:0;max-width:105px;background:#17232d;border:1px solid #56636a;color:#e9f1ef;border-radius:5px;padding:9px;font-size:12px}.recruit-controls button{flex:1}.empty-card{padding:15px;border:1px dashed #75817c;border-radius:8px;color:#d2dbd3;text-align:center;font-size:12px;line-height:1.7}.tiny{color:#8d9c9d;font-size:10px;line-height:1.7}.battle-card{background:#293945;border-left:3px solid #eac287;padding:10px 12px;margin:9px 0;border-radius:5px}.battle-top{display:flex;justify-content:space-between;gap:7px;font-size:12px;font-weight:800}.battle-card small{display:block;font-size:10px;color:#a5babc;margin-top:8px}.battle-row{font-size:11px;margin-top:8px;color:#d4e0dc}.toast-host{position:absolute;bottom:65px;left:50%;transform:translateX(-50%);width:min(460px,85%);pointer-events:none;display:flex;flex-direction:column;gap:7px;z-index:7}.toast{background:#1c2a34ed;border:1px solid #71817b;color:#f1eee5;padding:11px 14px;font-size:12px;border-radius:7px;box-shadow:0 8px 20px #0005;animation:fadeIn .18s ease}.toast.error{border-color:#d67b76}.toast.success{border-color:#73c8a5}@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.overlay{position:fixed;inset:0;background:#0a1019d9;display:flex;align-items:center;justify-content:center;z-index:20;padding:15px;overflow:auto}.dialog{width:min(480px,100%);max-height:calc(100vh - 30px);overflow-y:auto;background:#222e38;border:1px solid #8b7b61;border-radius:13px;padding:25px;box-shadow:0 23px 80px #0009}.intro-dialog{text-align:center;width:min(610px,100%);padding:30px}.intro-mark{width:61px;height:61px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:#d6b479;color:#22303b;font-size:44px}.eyebrow{letter-spacing:2px;font-size:10px;color:#e0be81;font-weight:800}.intro-dialog h1{font-family:Georgia,serif;letter-spacing:1px;font-size:36px;margin:10px 0;color:#f3deac}.intro-dialog p{font-size:13px;color:#c7d1ce;max-width:440px;line-height:1.75;margin:12px auto 23px}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left;margin:0 0 23px}.intro-grid>div{background:#293943;padding:12px;border:1px solid #47555d;border-radius:7px}.intro-grid b{display:block;font-size:11px;letter-spacing:.3px;color:#eed5a1}.intro-grid span{display:block;margin-top:6px;color:#bac8c7;font-size:11px;line-height:1.6}.primary.big{font-size:14px;padding:14px 22px}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog-top h2{font-family:Georgia,serif;font-size:22px;margin:0;color:#e9d3a2}.ghost-x{background:transparent;font-size:22px;color:#d9e0db}.menu-intro{color:#b7c5c3;font-size:12px;line-height:1.7}.menu-row{display:flex;justify-content:space-between;gap:8px;padding:11px 0;border-bottom:1px solid #3b505a;font-size:12px;color:#adbfc0}.menu-row b{color:#f0dab0}.send-route{padding:12px;background:#2b3a45;border:1px solid #52646b;border-radius:8px;margin:19px 0 12px;font-size:12px;line-height:1.9;color:#dbe4df}.send-count{text-align:center;margin:18px 0 15px}.send-count strong{display:block;font-size:32px;color:#f1d5a3}.send-count span{display:block;font-size:10px;letter-spacing:1.5px;color:#abc0bc}.send-dialog input[type=range]{display:block;width:100%;accent-color:#ddbb7a}.presets{display:flex;gap:8px;margin-top:15px}.presets button{background:#30424d;color:#d6e0db;border:1px solid #56656a;border-radius:6px;flex:1;padding:9px 3px;font-size:12px}.presets button.active{background:#d7b477;color:#222;border-color:#e7c994;font-weight:800}.send-eta{color:#a7bbb7;font-size:12px;margin:17px 0}.menu-dialog .full{margin-top:10px}@media(max-width:1180px){.brand{min-width:183px}.brand strong{font-size:13px}.stat-track{gap:12px}.stat-icon{display:none}.topbar{gap:9px}.side-panel{flex-basis:298px;max-width:298px}.stat b{font-size:16px}.wave-meta{gap:6px;padding-left:10px}}@media(max-width:900px){.topbar{height:71px;flex-wrap:wrap;align-content:center;row-gap:3px;padding:5px 9px;gap:4px 9px}.brand{min-width:0;flex:0 0 173px}.emblem{height:35px;width:35px;font-size:25px}.brand strong{font-size:12px}.brand small{font-size:8px}.stat-track{order:3;width:100%;flex:0 0 100%;justify-content:space-around;gap:6px}.stat{gap:2px}.stat small{font-size:8px;margin:0}.stat b{font-size:13px}.wave-meta{margin-left:auto;gap:7px;border-left:0;padding-left:0}.wave-badge b{font-size:20px;line-height:20px}.wave-time strong{font-size:17px}.wave-time small{font-size:8px}.wave-badge{min-width:30px}.top-actions{gap:3px}.icon-btn{min-width:28px;width:29px;height:29px;font-size:14px}.game-area{height:calc(100% - 71px)}.side-panel{flex-basis:270px;max-width:270px}.radar-shell{width:155px;padding:7px}.radar-shell #minimap{width:139px;height:107px}.radar-legend{gap:2px;font-size:8px}.map-title{font-size:9px}.map-label{display:none}}@media(max-width:680px){.topbar{height:98px;gap:4px 7px;align-content:space-between;padding:6px 8px}.brand{flex:1 1 auto;min-width:0}.brand strong{font-size:11px}.brand small{font-size:7px;letter-spacing:.8px}.top-actions{order:2;gap:3px}.icon-btn{width:29px;min-width:29px;height:27px;font-size:14px}.wave-meta{order:3;margin-left:0;gap:8px}.wave-badge{flex-direction:row;gap:4px;font-size:9px}.wave-badge b{font-size:16px}.wave-time{display:flex;align-items:baseline;gap:6px;min-width:0}.wave-time strong{font-size:14px}.stat-track{order:4;border-top:1px solid #34424d;padding-top:6px;gap:7px;justify-content:space-between}.stat small{font-size:7px}.stat b{font-size:12px}.cashflow{display:none}.game-area{height:calc(100% - 98px);display:block}.map-wrap{position:absolute;inset:98px 0 0 0}.side-panel{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:100%;height: min(285px,43vh);border-left:0;border-top:1px solid #7b846f;box-shadow:0 -4px 22px #0006;flex-basis:auto;transition:height .18s}.side-panel.collapsed{height:44px}.side-panel.collapsed .panel-body,.side-panel.collapsed .panel-foot{display:none}.panel-head{height:44px;flex:0 0 44px}.panel-collapse{display:block}.panel-body{padding:12px 14px}.panel-title{font-size:22px;margin:7px 0}.panel-subtitle{margin-bottom:8px}.section-heading{margin:13px 0 7px}.info-grid{gap:7px}.info-card{padding:8px}.info-card strong{font-size:15px}.radar-shell{top:10px;right:10px;width:125px;padding:6px}.radar-shell #minimap{width:111px;height:86px;margin-top:4px}.radar-legend{font-size:7px}.map-title{left:9px;top:10px;padding:7px;font-size:8px;max-width:calc(100% - 150px)}.map-control{bottom:calc(min(285px,43vh) + 14px);left:8px;gap:5px}.round-btn{width:35px;height:35px;font-size:21px}.footer-note{bottom:calc(min(285px,43vh) + 15px);left:49px;max-width:calc(100% - 57px);font-size:10px;padding:6px 9px}.mode-hint{top:48px;max-width:95%;font-size:10px;padding:8px 9px}.toast-host{bottom:calc(min(285px,43vh) + 32px)}.intro-dialog{padding:18px}.intro-dialog h1{font-size:28px}.intro-grid{gap:7px}.intro-grid>div{padding:9px}.intro-grid b{font-size:10px}.intro-grid span{font-size:10px}.dialog{padding:17px}.side-panel.collapsed~.x{display:none}}@media(max-width:380px){.brand strong{font-size:10px}.brand{gap:5px}.emblem{height:30px;width:30px}.icon-btn{min-width:26px;width:26px}.radar-shell{width:111px}.radar-shell #minimap{width:97px;height:76px}.radar-heading{font-size:8px}.radar-legend{font-size:6px}}

/* v1.1 – grass map and mobile-first compact interface */
.map-wrap{background:#94bf89}
#minimap{background:#93bc86}
.panel-head{cursor:pointer}
#panelHeadText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
@media (max-width:680px){
  :root{--mobile-bar:84px;--sheet-open:min(360px,46dvh);--sheet-closed:46px}
  .topbar{
    height:var(--mobile-bar);padding:6px 8px;display:grid;
    grid-template-columns:98px minmax(0,1fr);grid-template-rows:31px 36px;
    grid-template-areas:'brand brand' 'wave stats';align-items:center;
    gap:4px 6px;
  }
  .brand{grid-area:brand;flex:none;margin-right:150px;min-width:0;gap:6px}
  .brand strong{font-size:11px;line-height:1.05;letter-spacing:.55px}
  .brand small{font-size:7px;line-height:1.1;white-space:nowrap;letter-spacing:.15px;margin-top:3px}
  .emblem{width:29px;height:29px;font-size:20px;border-radius:5px;flex-shrink:0}
  .top-actions{position:absolute;top:7px;right:8px;gap:3px;display:flex;order:0}
  .icon-btn{min-width:28px;width:28px;height:28px;font-size:14px;border-radius:6px}
  .wave-meta{grid-area:wave;order:0;margin:0;padding:0;border:0;display:flex;align-items:center;justify-content:flex-start;gap:4px;min-width:0}
  .wave-badge{display:flex;flex-direction:row;align-items:baseline;gap:3px;min-width:0;font-size:9px;white-space:nowrap}
  .wave-badge b{font-size:17px;line-height:18px}
  .wave-time{display:block;min-width:0;text-align:left}
  .wave-time small{display:none}
  .wave-time strong{font-size:14px;font-variant-numeric:tabular-nums}
  .stat-track{grid-area:stats;order:0;width:100%;min-width:0;flex:1;padding:0;margin:0;border:0;gap:3px;display:flex;justify-content:space-between}
  .stat{display:block;min-width:0;text-align:center;flex:1;white-space:nowrap}
  .stat small{font-size:7px;margin-bottom:3px;letter-spacing:.2px;overflow:hidden}
  .stat b{display:block;font-size:13px;line-height:15px;overflow:hidden;text-overflow:ellipsis}
  .cashflow{display:none}
  .game-area{height:calc(100% - var(--mobile-bar))}
  .map-wrap{position:absolute;inset:var(--mobile-bar) 0 0}
  .side-panel{height:var(--sheet-open);max-height:var(--sheet-open);bottom:0;left:0;right:0;z-index:5;border-radius:13px 13px 0 0;border-top:1px solid #8a9e86;box-shadow:0 -6px 24px #142d2680;background:#1f2e36;transition:height .2s ease}
  .side-panel.collapsed{height:var(--sheet-closed);max-height:var(--sheet-closed)}
  .panel-head{height:var(--sheet-closed);min-height:var(--sheet-closed);padding:0 14px;gap:9px;touch-action:manipulation}
  .panel-head span{font-size:10px;letter-spacing:.35px}
  .panel-collapse{font-size:22px;min-height:34px;min-width:36px;flex-shrink:0}
  .panel-body{padding:10px 14px max(14px,env(safe-area-inset-bottom))}
  .panel-foot{display:none}
  .panel-title{font-size:20px;margin:6px 0}
  .info-grid{gap:6px}
  .info-card{padding:7px 9px}
  .info-card small{font-size:9px}
  .info-card strong{font-size:15px}
  .section-heading{margin:10px 0 5px}
  .recruit-box{padding:9px;margin-top:7px}
  .recruit-row{margin-bottom:6px}
  .recruit-controls input{max-width:140px;font-size:16px}
  .primary,.secondary{min-height:39px}
  .map-control{bottom:calc(var(--sheet-closed) + 12px);left:9px;gap:6px;z-index:3;transition:bottom .2s}
  body.panel-open .map-control{bottom:calc(var(--sheet-open) + 10px)}
  .round-btn{height:38px;width:38px;border-radius:10px;font-size:23px}
  .footer-note{display:none}
  .radar-shell{top:10px;right:9px;width:122px;padding:6px;background:#1d2e34d9;border-color:#8aa594}
  .radar-shell #minimap{width:108px;height:82px;margin-top:4px}
  .radar-legend{font-size:7px;gap:2px}
  .radar-heading{font-size:8px}
  .map-title{left:9px;top:10px;padding:6px 8px;border-radius:9px;font-size:8px;max-width:calc(100% - 145px);min-height:28px}
  .toast-host{bottom:calc(var(--sheet-closed) + 16px);width:calc(100% - 36px);z-index:8}
  body.panel-open .toast-host{bottom:calc(var(--sheet-open) + 16px)}
  .mode-hint{top:44px;left:9px;max-width:calc(100% - 18px);font-size:11px}
  .intro-dialog{max-height:calc(100dvh - 28px)}
  .overlay{padding:12px;align-items:center}
  .send-dialog{max-height:calc(100dvh - 26px)}
}
@media(max-width:380px){
  .brand strong{font-size:10px}
  .brand small{font-size:6.6px}
  .top-actions{gap:2px}
  .icon-btn{min-width:27px;width:27px}
  .stat b{font-size:12px}
  .radar-shell{width:112px}
  .radar-shell #minimap{width:98px;height:75px}
  .map-title{max-width:calc(100% - 133px)}
}
@media(max-width:680px) and (orientation:landscape){
  :root{--mobile-bar:63px;--sheet-open:min(245px,62dvh);--sheet-closed:38px}
  .topbar{grid-template-rows:25px 26px;padding:3px 8px}
  .emblem{width:25px;height:25px}
  .icon-btn{height:24px}
  .top-actions{top:3px}
  .panel-head{padding:0 12px}
  .map-title{top:5px}
  .radar-shell{top:5px}
}

/* v1.2 – day counter stays readable beside the next-wave countdown. */
.wave-time small b{font-size:inherit;color:#e9ca8b;font-weight:800}
@media(max-width:680px){.wave-meta{gap:5px}.wave-time small{display:block;font-size:7px;letter-spacing:.15px;margin:0 0 2px;white-space:nowrap}.wave-time strong{font-size:11px;line-height:12px}.wave-time{align-self:center}}

/* v1.2 mobile refinement: dedicate a vertical strip to wave/day/countdown,
   so population and treasury never overlap at small widths. */
@media(max-width:680px){
  .topbar{grid-template-columns:96px minmax(0,1fr);grid-template-areas:'brand brand' 'wave stats';}
  .wave-meta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;overflow:hidden;}
  .wave-badge{font-size:8px;line-height:12px;gap:3px;}
  .wave-badge b{font-size:13px;line-height:12px;}
  .wave-time{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:10px;}
  .wave-time small{font-size:7px;line-height:9px;margin:0;}
  .wave-time strong{font-size:10px;line-height:11px;}
  .stat-track{align-items:center;}
}

/* v1.3 PWA — install item and compact help dialog, mobile-safe layout. */
.install-section{margin-top:16px;padding:12px;background:#283b3b;border:1px solid #487b69;border-radius:10px}
.install-section .pwa-install-btn{margin-top:0;min-height:45px;font-weight:800;letter-spacing:.15px;font-size:13px}
.install-subtitle{color:#bcd4c7;font-size:11px;line-height:1.45;margin:7px 1px 0}
.install-dialog{max-width:420px}
.install-dialog p{font-size:14px;line-height:1.65;color:#e7eee8;white-space:pre-line}
.install-note{padding:10px 12px;background:#283b3b;border:1px solid #42635e;color:#c4d2c9;border-radius:8px;font-size:12px;line-height:1.5;margin-bottom:10px;white-space:pre-line}
@media(max-width:680px){.install-section{margin-top:10px;padding:9px}.install-section .pwa-install-btn{min-height:42px;font-size:12px}.install-subtitle{font-size:10px}.install-dialog{max-height:calc(100dvh - 24px)}}

/* v1.4 — prioritize the mobile map, reserve only one slim toolbar and compact sheet. */
@media(max-width:680px){
  :root{--mobile-bar:52px;--sheet-open:min(242px,39dvh);--sheet-closed:36px}
  .topbar{height:var(--mobile-bar);padding:4px 6px;display:flex;flex-wrap:nowrap;gap:5px;align-items:center;justify-content:space-between}
  .brand{display:none!important}
  .wave-meta{order:0;display:flex;flex:0 0 55px;width:55px;min-width:0;flex-direction:column;align-items:center;justify-content:center;padding:0;margin:0;gap:0;border:0}
  .wave-badge{display:flex;flex-direction:row;align-items:center;gap:3px;font-size:8px;line-height:12px;color:#dfc389}
  .wave-badge b{font-size:13px;line-height:14px}
  .wave-time{display:block;min-width:0;text-align:center}
  .wave-time small{display:none}
  .wave-time strong{font-size:10px;line-height:12px;color:#f2d9a4}
  .stat-track{display:flex;order:1;flex:1;min-width:0;justify-content:space-evenly;gap:2px;align-items:center;padding:0;margin:0;border:0}
  .stat{display:flex;flex:1;min-width:0;align-items:center;justify-content:center;gap:3px;text-align:center;white-space:nowrap}
  .stat small{display:none}
  .stat b{display:inline;font-size:clamp(10px,2.9vw,13px);line-height:16px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
  .stat-icon{font-size:12px;flex:0 0 auto}
  .stat.cashflow{display:none}
  .top-actions{order:2;display:flex;position:static;align-items:center;gap:3px;flex:0 0 auto}
  .top-actions #saveBtn,.top-actions #reloadBtn{display:none}
  .icon-btn{width:29px;min-width:29px;height:32px;border-radius:7px;font-size:14px}
  .game-area{height:calc(100dvh - var(--mobile-bar));display:block}
  .map-wrap{position:absolute;inset:var(--mobile-bar) 0 0 0}
  .map-title{display:none}
  .radar-shell{display:none;top:9px;right:8px;width:135px;padding:6px;z-index:4}
  .radar-shell.radar-open{display:block}
  .radar-shell #minimap{width:121px;height:90px}
  .radar-legend{font-size:7px}
  .map-control{position:absolute;left:auto;right:8px;bottom:calc(var(--sheet-closed) + 8px);gap:5px;z-index:3}
  body.panel-open .map-control{bottom:calc(var(--sheet-open) + 8px)}
  .round-btn{width:34px;height:34px;border-radius:9px;font-size:20px;box-shadow:0 2px 6px #0004}
  .footer-note{display:none}
  .side-panel{position:fixed;inset:auto 0 0;width:100%;max-width:100%;height:var(--sheet-open);max-height:var(--sheet-open);z-index:5;border-radius:11px 11px 0 0;transition:height .18s}
  .side-panel.collapsed{height:var(--sheet-closed);max-height:var(--sheet-closed)}
  .panel-head{height:var(--sheet-closed);min-height:var(--sheet-closed);flex:0 0 var(--sheet-closed);padding:0 10px;gap:5px}
  .panel-head span{font-size:10px;letter-spacing:0;line-height:14px}
  .panel-collapse{font-size:19px;min-width:32px;min-height:31px}
  .panel-body{padding:8px 12px max(12px,env(safe-area-inset-bottom))}
  .panel-title{font-size:18px;line-height:1.1;margin:4px 0}
  .panel-subtitle{font-size:11px;line-height:1.35;margin:4px 0 6px}
  .city-coords{display:none}
  .overview-tag{font-size:9px;letter-spacing:.4px}
  .ownership{font-size:10px;padding:3px 6px;margin:2px 0 5px}
  .info-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .info-card{padding:5px 6px;border-radius:5px}
  .info-card small{font-size:8px;line-height:10px;white-space:normal}
  .info-card strong{font-size:12px;margin-top:1px}
  .section-heading{font-size:9px;margin:6px 0 3px}
  .recruit-box{padding:6px;margin:3px 0}
  .recruit-row{font-size:10px;margin-bottom:4px}
  .recruit-controls input{min-height:35px;max-width:110px;padding:4px 6px;font-size:16px}
  .recruit-controls button{min-height:35px;padding:5px;font-size:12px}
  .hint-block{font-size:10px;line-height:1.3;margin:6px 0;padding:7px}
  .tiny{font-size:9px;line-height:1.25;margin:4px 0}
  .primary.full{margin-top:5px;min-height:35px;padding:6px 10px}
  .toast-host{bottom:calc(var(--sheet-closed) + 8px);width:calc(100% - 65px);left:45%;}
  body.panel-open .toast-host{bottom:calc(var(--sheet-open) + 8px)}
  .toast{font-size:11px;line-height:1.2;padding:8px 10px}
  .mode-hint{top:8px;left:8px;transform:none;max-width:calc(100% - 55px);white-space:normal;font-size:10px;padding:6px 8px}
}
@media(max-width:355px){
  .topbar{gap:3px;padding:3px 4px}
  .wave-meta{flex-basis:48px;width:48px}
  .stat-track{gap:0}
  .stat{gap:2px}
  .stat b{font-size:10px}
  .stat-icon{font-size:11px}
  .icon-btn{width:27px;min-width:27px}
}
@media(max-width:680px) and (orientation:landscape){
  :root{--mobile-bar:44px;--sheet-open:min(175px,52dvh);--sheet-closed:32px}
  .topbar{height:var(--mobile-bar)}
}

/* Small, unambiguous V/D/Q markers replace wide symbolic icons on phones. */
@media(max-width:680px){
  .stat-icon{font-size:0!important;flex:0 0 auto;line-height:1}
  .stat-icon::after{content:'V';font-size:10px;font-weight:800;color:#e4bd73}
  .stat:nth-child(2) .stat-icon::after{content:'D';color:#a3ddb8}
  .stat:nth-child(3) .stat-icon::after{content:'Q';color:#e5ebef}
}

@media(max-width:680px){.stat-icon{display:none!important}}

/* v1.5: the mobile city controls are a tiny, tap-to-open contextual panel. */
@media(max-width:680px){
  :root{--sheet-open:138px;--sheet-closed:0px}
  .side-panel,.side-panel.collapsed{display:none!important}
  body.panel-open .side-panel:not(.collapsed){
    display:block!important;position:fixed;inset:auto 0 0;width:100%;height:auto;max-height:none;
    z-index:6;overflow:visible;background:#1d2c34;border-radius:12px 12px 0 0;
    border:1px solid #5a7776;border-bottom:none;box-shadow:0 -5px 20px #14212e8a;
  }
  .side-panel .panel-head,.side-panel .panel-foot{display:none!important}
  .side-panel .panel-body{overflow:visible;max-height:none;padding:7px 8px calc(8px + env(safe-area-inset-bottom,0px));}
  .quick-city{display:flex;flex-direction:column;gap:7px;width:100%;}
  .quick-title{display:flex;align-items:center;gap:7px;min-width:0;height:25px;white-space:nowrap}
  .quick-title strong{flex:0 1 auto;min-width:0;max-width:42%;font-size:14px;overflow:hidden;text-overflow:ellipsis;color:#f7e8c4}
  .quick-title .quick-owner{flex:1;min-width:0;font-size:12px;color:#d5dedb;overflow:hidden;text-overflow:ellipsis}
  .quick-owner::before{content:'';display:inline-block;vertical-align:middle;width:7px;height:7px;border-radius:50%;margin-right:5px;background:var(--owner,#ddd)}
  .quick-title button{flex:0 0 29px;width:29px;height:25px;font-size:20px;line-height:20px;color:#f7dfae;background:#34434b;border:1px solid #63747a;border-radius:6px}
  .quick-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;min-width:0;width:100%}
  .quick-stat{min-width:0;min-height:37px;padding:4px 1px 3px;background:#263842;border:1px solid #435960;border-radius:5px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
  .quick-stat span{font-size:9px;line-height:10px;color:#b1c3c4;white-space:nowrap}
  .quick-stat b{max-width:100%;font-size:12px;line-height:14px;letter-spacing:-.25px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f5f3ea}
  .quick-stat.good b{color:#8fe1b8}.quick-stat.bad b{color:#e9a5a0}
  .quick-actions{display:grid;grid-template-columns:minmax(64px,0.9fr) minmax(80px,1fr) minmax(108px,1.35fr);gap:6px;height:37px;min-width:0}
  .quick-actions input,.quick-actions button{width:100%;height:37px;min-height:37px;margin:0;padding:4px 5px;border-radius:6px}
  .quick-actions input{background:#13252e;border:1px solid #647a83;color:#e9f3f2;text-align:center;font-size:16px;min-width:0}
  .quick-actions button{font-size:12px;font-weight:800;letter-spacing:0;white-space:nowrap}
  .quick-enemy-note{font-size:10px;color:#d7c9ab;text-align:center;line-height:18px}
  .quick-siege{font-size:10px;color:#ffcaa1;background:#3e3838;padding:3px 6px;text-align:center;border-radius:4px}
  .quick-tile-action{display:flex;align-items:center;gap:8px;justify-content:space-between}
  .quick-tile-action span{font-size:11px;color:#e5d8b7}
  .quick-tile-action button{min-height:35px;font-size:11px;padding:5px 12px;margin:0}
  .map-control{bottom:10px!important;right:8px}
  body.panel-open .map-control{bottom:155px!important}
  .toast-host{bottom:14px!important}
  body.panel-open .toast-host{bottom:155px!important}
  .map-wrap{bottom:0}
}
@media(max-width:350px){
  .quick-stat b{font-size:10.5px}
  .quick-title strong{font-size:13px}
  .quick-title .quick-owner{font-size:11px}
  .quick-actions{grid-template-columns:minmax(60px,.8fr) minmax(65px,.8fr) minmax(102px,1.3fr)}
  .quick-actions button{font-size:11px}
}
@media(max-width:680px) and (orientation:landscape){
  body.panel-open .map-control{bottom:142px!important}
  body.panel-open .toast-host{bottom:142px!important}
}