:root{--bg:#14131b;--panel:rgba(20,19,28,.93);--panel2:#211e2a;--line:rgba(255,255,255,.13);--text:#f5efd9;--muted:#aaa3b0;--accent:#f0c45c;--cyan:#69d0d5;--pink:#e879a7;--danger:#df6a67;--good:#66d18a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#game{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;color:var(--text)}body{touch-action:none}button,input{font:inherit}button{cursor:pointer}input{touch-action:auto;user-select:text;-webkit-user-select:text}canvas{display:block;image-rendering:pixelated}.hidden{display:none!important}.glass{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:0 8px 28px #0007}
.topbar{position:fixed;z-index:20;top:max(7px,env(safe-area-inset-top));left:7px;right:7px;min-height:58px;border-radius:14px;display:flex;align-items:center;gap:7px;padding:7px 9px}.townTitle{min-width:105px;max-width:38vw;text-align:left;color:var(--text);border:0;background:transparent;font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:3px}.townTitle small{display:block;color:var(--muted);font-size:8px;letter-spacing:1.1px;margin-top:2px}.resources{display:flex;align-items:center;gap:8px;overflow-x:auto;white-space:nowrap;flex:1;border:0;background:#ffffff08;border-radius:10px;padding:7px 8px;color:var(--text);font-size:10px;scrollbar-width:none}.resources::-webkit-scrollbar{display:none}.resources span{display:inline-flex;gap:3px}.net{font-size:11px;color:var(--good)}
.zoomControls{position:fixed;z-index:20;right:9px;top:78px;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}.zoomControls button,.modeSwitch button,.buildPanel button{border:0;color:var(--text);background:transparent;font-weight:900}.zoomControls button{width:42px;height:40px;font-size:20px;border-bottom:1px solid var(--line)}.zoomControls button:last-child{border-bottom:0}.modeSwitch{position:fixed;z-index:20;left:9px;top:78px;border-radius:12px;padding:4px;display:flex}.modeSwitch button{height:36px;padding:0 10px;border-radius:8px;color:var(--muted);font-size:10px}.modeSwitch button.active{background:#ffffff14;color:var(--text)}
.buildPanel{position:fixed;z-index:30;left:7px;right:7px;bottom:max(7px,env(safe-area-inset-bottom));min-height:58px;border-radius:15px;display:flex;align-items:center;padding:6px;gap:6px}.hammer{width:48px;height:46px;font-size:22px;border-radius:11px;background:#ffffff10!important}.tray{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:none}.tray::-webkit-scrollbar{display:none}.tray button{min-width:92px;height:48px;padding:4px 7px;border-radius:10px;background:#ffffff0c;border:1px solid var(--line);font-size:9px;line-height:1.1}.tray button.selected{outline:2px solid var(--accent);background:#f0c45c18}.tray button img{width:24px;height:24px;object-fit:contain;vertical-align:middle;image-rendering:pixelated;margin-right:3px}.tray .cost{color:var(--muted);font-size:8px}
.sheet{position:fixed;z-index:50;left:7px;right:7px;bottom:max(7px,env(safe-area-inset-bottom));max-height:65vh;overflow:auto;background:#1c1b24f8;border:1px solid var(--line);border-radius:19px;padding:23px 16px 16px;box-shadow:0 16px 50px #000c;touch-action:pan-y}.handle{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:42px;height:4px;background:#ffffff2d;border-radius:9px}.close,.iconClose{border:0;background:transparent;color:white;font-size:24px}.close{position:absolute;right:11px;top:8px}.sheet h2{font-size:18px;margin:5px 0 3px}.sheet .tag,.eyebrow{color:var(--cyan);font-size:9px;text-transform:uppercase;letter-spacing:1.4px}.desc{color:#d4ced6;font-size:11px;line-height:1.5;margin:7px 0}.stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.stat{background:#ffffff08;border:1px solid var(--line);padding:9px;border-radius:9px}.stat small{display:block;color:var(--muted);font-size:9px}.stat b{font-size:13px}.nerd{margin-top:13px;border-top:1px solid var(--line);padding-top:11px;color:#d2ccd5;font-size:10px;line-height:1.65}.nerdGrid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.ledger{margin-top:10px}.ledgerRow{padding:7px 0;border-top:1px solid #ffffff0d;font-size:9px;color:var(--muted)}
.toast{position:fixed;z-index:70;top:145px;left:50%;transform:translateX(-50%);width:min(90vw,430px);padding:11px 13px;border-radius:13px;background:#17151ff4;border:1px solid #f0c45c55;box-shadow:0 10px 35px #0009;font-size:10px;line-height:1.45}.toast b{display:block;color:var(--accent);margin-bottom:3px;font-size:11px}
.joystick{position:fixed;z-index:25;left:22px;bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px));width:112px;height:112px;border-radius:50%;background:#ffffff10;border:2px solid #ffffff1d}.stick{position:absolute;width:50px;height:50px;border-radius:50%;left:29px;top:29px;background:#ffffff28;border:1px solid #ffffff38}.districtActions{position:fixed;z-index:26;right:20px;bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px));display:flex;gap:9px}.actionBtn{width:58px;height:58px;border-radius:50%;border:1px solid #ffffff2a;background:#24212de8;color:#fff;font-size:22px;box-shadow:0 7px 25px #0008}.actionBtn.attack{width:72px;height:72px;background:#5c2f37eb;border-color:#dc7179}.district .buildPanel{display:none}.district .joystick,.district .districtActions{display:block!important}.district .districtActions{display:flex!important}
.overlay{position:fixed;z-index:100;inset:0;background:radial-gradient(circle at 50% 20%,#2e2843dd,#101018f7 60%);display:flex;align-items:center;justify-content:center;padding:max(14px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom));touch-action:pan-y;overflow:auto}.onboardCard,.townManager{position:relative;width:min(94vw,520px);border-radius:22px;padding:20px;overflow:hidden}.scanline{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#ffffff06 4px);opacity:.25}.onStep{position:relative;z-index:1}.onStep h1{font-size:24px;line-height:1.05;margin:10px 0 10px;color:#fff6cf;text-shadow:2px 2px #000}.lead{color:#c8c1cb;font-size:11px;line-height:1.55;margin-bottom:18px}.onStep label,.newTown label{display:block;font-size:9px;color:var(--cyan);letter-spacing:1.2px}.onStep input,.newTown input{display:block;width:100%;margin-top:7px;border:1px solid #ffffff1f;border-radius:11px;background:#0e0e15;color:white;padding:13px 12px;font-size:16px;outline:none}.onStep input:focus,.newTown input:focus{border-color:var(--cyan)}.hint{color:var(--muted);font-size:9px;margin:7px 2px 17px}.primary,.secondary{border:1px solid #ffffff1c;border-radius:11px;padding:12px 13px;font-weight:900;letter-spacing:.5px}.primary{background:var(--accent);color:#282014}.secondary{background:#ffffff0d;color:var(--text)}.onStep>.primary{width:100%;margin-top:14px}.row{display:flex;gap:8px;margin-top:14px}.row>*{flex:1}.stepDots{display:flex;justify-content:center;gap:6px;margin-top:17px}.stepDots i{width:7px;height:7px;border-radius:50%;background:#ffffff24}.stepDots i.active{background:var(--accent)}
.creator{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:start}.avatarStage{border:1px solid #ffffff18;background:linear-gradient(#252239,#15151e);border-radius:14px;text-align:center;padding:8px}.avatarStage canvas{width:96px;height:144px;margin:auto;image-rendering:pixelated}.avatarStage div{font-size:9px;color:var(--accent);margin-top:3px}.avatarOptions{display:grid;gap:5px;max-height:275px;overflow:auto;touch-action:pan-y}.avatarOpt{display:grid;grid-template-columns:1fr 34px 34px;align-items:center;border:1px solid #ffffff10;background:#ffffff06;border-radius:8px;padding:4px 5px;font-size:9px}.avatarOpt button{height:30px;border:0;background:#ffffff0d;color:#fff;border-radius:7px}.avatarOpt b{color:#fff}.inputWithButton{display:flex;gap:6px}.inputWithButton input{flex:1}.inputWithButton button{width:50px;margin-top:7px;border:1px solid #ffffff1f;border-radius:10px;background:#ffffff0c;color:#fff;font-size:19px}.suggestions{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.suggestions button{border:1px solid #ffffff17;background:#ffffff08;color:#d7d0da;border-radius:15px;padding:6px 8px;font-size:8px}.starterBox{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;background:#ffffff07;border:1px solid #ffffff12;border-radius:11px;padding:10px;font-size:9px}.starterBox b{width:100%;color:var(--muted)}
.modalHead{display:flex;justify-content:space-between;align-items:start}.modalHead h2{margin:4px 0 12px}.townCards{display:grid;gap:8px;max-height:55vh;overflow:auto;touch-action:pan-y}.townCard{border:1px solid #ffffff12;background:#ffffff07;border-radius:13px;padding:11px}.townCard.active{border-color:#f0c45c70;background:#f0c45c0c}.townCardHead{display:flex;justify-content:space-between;gap:8px}.townCard h3{margin:0 0 3px;font-size:14px}.townCard .meta{color:var(--muted);font-size:8px}.townCardStats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:9px 0}.townMini{border-radius:7px;background:#0003;padding:6px;font-size:8px}.townMini b{display:block;font-size:10px;color:#fff}.townActions{display:flex;gap:6px}.townActions button{flex:1;border:1px solid #ffffff12;border-radius:8px;padding:7px;background:#ffffff09;color:#fff;font-size:8px}.townActions button.primarySmall{background:var(--accent);color:#2c2517}.newTown{margin:10px 0;border-top:1px solid #ffffff13;padding-top:12px}.townManager>#showNewTown{width:100%;margin-top:10px}.threat-calm{color:var(--good)}.threat-elevated{color:var(--accent)}
@media(max-width:390px){.creator{grid-template-columns:112px 1fr}.avatarStage canvas{width:80px;height:120px}.resources{gap:6px;font-size:9px}.townTitle{max-width:32vw}.onboardCard{padding:16px}.onStep h1{font-size:21px}}
@media(min-width:700px){.topbar{max-width:700px;left:50%;transform:translateX(-50%)}.buildPanel{max-width:760px;left:50%;transform:translateX(-50%)}.sheet{max-width:560px;left:50%;transform:translateX(-50%)}}

/* v0.3 – svensk UI, tydligare gå-/byggläge och större touchytor */
.playModeBadge{position:fixed;z-index:20;left:9px;top:126px;border-radius:9px;padding:6px 9px;font-size:8px;letter-spacing:.7px;color:var(--muted)}
body.build-mode .playModeBadge{color:var(--accent);border-color:#f0c45c55}
body.build-mode .joystick{display:none!important}
body.district .playModeBadge{display:none}
.hammer{display:flex!important;flex-direction:column;align-items:center;justify-content:center;line-height:1}.hammer small{display:block;font-size:7px;margin-top:2px;color:var(--muted);letter-spacing:.4px}.buildPanel{transition:transform .18s ease,opacity .18s ease}.tray button{min-width:104px}.tray .cost{display:inline-block;margin-top:2px}.actionBtn.salvage{background:#3e493fe8;border-color:#9eb675}
.resourceWarn{color:#f3ba70}.resourceGood{color:var(--good)}
.buildCostMissing{display:block;color:#f39b85;font-size:9px;margin-top:4px}
.starterBox small{width:100%;color:var(--muted)}
.labelTown{color:#cabfd0}
@media(max-width:520px){.playModeBadge{top:126px}.joystick{width:104px;height:104px}.stick{left:26px;top:26px}.districtActions{right:12px}.actionBtn{width:52px;height:52px}.actionBtn.attack{width:64px;height:64px}.tray button{min-width:98px}.resources{font-size:9px}}