:root {
  color-scheme: dark;
  --ink: oklch(0.17 0.016 83);
  --panel: oklch(0.20 0.019 82 / .94);
  --text: oklch(0.94 0.018 88);
  --muted: oklch(0.73 0.025 84);
  --accent: oklch(0.72 0.17 52);
  --danger: oklch(0.62 0.22 28);
  --health: oklch(0.68 0.16 151);
  font-family: "Segoe UI", system-ui, sans-serif;
  touch-action: none;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); color: var(--text); }
button { color: inherit; font: inherit; }
#game-shell { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; }
#game { width: 100%; height: 100%; display: block; background: #36372c; }
.hud-top { position: absolute; inset: max(12px, env(safe-area-inset-top)) 14px auto; display: grid; grid-template-columns: 150px minmax(190px, 410px) 170px; justify-content: space-between; align-items: start; gap: 18px; pointer-events: none; text-shadow: 0 2px 4px #111b; }
.phase-block, .status-block { display: flex; flex-direction: column; }
.phase-block span, .objective span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.phase-block strong { font-size: 21px; letter-spacing: .05em; }
.objective { padding-top: 4px; text-align: center; }
.objective-track { height: 6px; margin-top: 7px; overflow: hidden; background: oklch(0.13 0.01 82 / .72); border: 1px solid oklch(0.68 0.03 83 / .25); }
.objective-track i { display: block; height: 100%; width: 0%; background: var(--accent); transition: width 120ms linear; }
.status-block { align-items: flex-end; gap: 5px; }
.money { font: 800 20px ui-monospace, monospace; color: oklch(0.84 0.15 92); }
.health { position: relative; width: 138px; height: 24px; overflow: hidden; background: oklch(0.13 0.02 28 / .86); border: 1px solid oklch(0.8 0.05 30 / .28); text-align: right; }
.health i { position: absolute; inset: 0; width: 100%; background: var(--health); transition: width 180ms ease-out; }
.health b { position: relative; padding-right: 8px; font: 800 14px ui-monospace, monospace; line-height: 22px; color: var(--ink); }
#ammo { position: absolute; right: 28px; bottom: 148px; display: flex; align-items: baseline; gap: 5px; font: 700 14px ui-monospace, monospace; text-shadow: 0 2px 4px #000; pointer-events: none; }
#ammo b { font-size: 34px; } #ammo.reloading b { color: var(--accent); }
#toast { position: absolute; left: 50%; top: 18%; translate: -50% 0; padding: 8px 13px; min-height: 32px; opacity: 0; background: var(--panel); border: 1px solid oklch(0.75 0.04 75 / .25); font-size: 12px; font-weight: 800; letter-spacing: .08em; transition: opacity 140ms ease-out, translate 180ms ease-out; pointer-events: none; }
#toast.show { opacity: 1; translate: -50% -5px; }
#hotbar { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); translate: -50% 0; display: flex; gap: 5px; z-index: 5; }
#hotbar button { position: relative; width: clamp(51px, 7vw, 72px); height: 64px; padding: 5px; border: 1px solid oklch(0.76 0.04 78 / .32); background: var(--panel); clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); cursor: pointer; transition: transform 120ms ease-out, background 120ms ease-out; }
#hotbar button:active { transform: translateY(2px); }
#hotbar button.selected { background: oklch(0.36 0.09 53 / .96); border-color: var(--accent); }
#hotbar button.unavailable { opacity: .42; }
#hotbar small { position: absolute; inset: auto 2px 3px; overflow: hidden; color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .06em; text-overflow: ellipsis; }
#hotbar b { position: absolute; right: 5px; top: 4px; font: 800 11px ui-monospace, monospace; }
.slot-key { position: absolute; left: 4px; top: 3px; color: var(--muted); font-size: 9px; }
.icon { position: absolute; left: 50%; top: 51%; width: 29px; height: 19px; translate: -50% -50%; }
.icon.rifle, .icon.shotgun, .icon.grenade, .icon.medkit { background-position:center; background-repeat:no-repeat; background-size:contain; image-rendering:pixelated; }
.icon.rifle { background-image:url('assets/weapons/m4a1.png'); }
.icon.shotgun { background-image:url('assets/weapons/mp153.png'); }
.icon.axe::before { content: ""; position:absolute; left:13px; top:0; width:4px; height:24px; background:#8a6442; transform:rotate(38deg); }
.icon.axe::after { content:""; position:absolute; left:5px; top:0; width:15px; height:9px; background:#bfc1b5; clip-path:polygon(0 0,100% 8%,78% 100%,10% 72%); transform:rotate(17deg); }
.icon.grenade { width:22px; height:22px; background-image:url('assets/items/frag.png'); }
.icon.medkit { width:25px; height:25px; background-image:url('assets/items/ifak.png'); }
.icon.barrier::before,.icon.barrier::after { content:""; position:absolute; left:2px; width:26px; height:6px; background:#8a6442; border:1px solid #302419; transform:rotate(-7deg); }
.icon.barrier::before { top:4px; }.icon.barrier::after { top:14px; transform:rotate(6deg); }
#controls { position: absolute; inset: 0; pointer-events: none; }
.stick-zone { position: absolute; bottom: max(78px, calc(env(safe-area-inset-bottom) + 74px)); width: 148px; height: 148px; pointer-events: auto; user-select: none; }
.stick-zone.move { left: max(12px, env(safe-area-inset-left)); }
.stick-zone.aim { right: max(12px, env(safe-area-inset-right)); }
.stick-ring { position:absolute; left:50%; top:50%; width:104px; height:104px; translate:-50% -50%; border:2px solid oklch(0.9 0.02 85 / .28); border-radius:50%; background:oklch(0.12 0.01 82 / .22); }
.stick-ring i { position:absolute; left:50%; top:50%; width:48px; height:48px; translate:-50% -50%; border-radius:50%; background:oklch(0.86 0.03 82 / .34); box-shadow:0 4px 14px #0005; }
.stick-zone.active .stick-ring { border-color: oklch(0.86 0.11 61 / .65); }
.stick-zone span { position:absolute; inset:auto 0 0; text-align:center; color:oklch(0.84 0.02 85 / .55); font-size:8px; font-weight:800; letter-spacing:.12em; }
#shop { position:absolute; inset:0; z-index:20; overflow:auto; padding:max(24px,env(safe-area-inset-top)) clamp(20px,5vw,72px) max(28px,env(safe-area-inset-bottom)); background:oklch(0.18 0.018 82); }
.shop-head { display:flex; justify-content:space-between; align-items:end; gap:20px; border-bottom:1px solid oklch(0.8 0.03 78 / .2); padding-bottom:16px; }
.shop-head span,.shop-note { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.14em; }
.shop-head h1 { margin:2px 0 0; font-size:clamp(25px,5vw,48px); line-height:1; }
.shop-wallet { text-align:right; }.shop-wallet b { display:block; color:oklch(0.84 0.15 92); font:800 30px ui-monospace,monospace; }
.shop-note { margin:14px 0 18px; letter-spacing:.05em; }
#shop-grid { display:grid; grid-template-columns:repeat(4,minmax(140px,1fr)); gap:9px; }
.shop-item { min-height:124px; padding:14px; text-align:left; border:1px solid oklch(0.78 0.03 80 / .18); background:oklch(0.23 0.018 82); cursor:pointer; }
.shop-item:hover,.shop-item:focus-visible { border-color:var(--accent); background:oklch(0.28 0.045 63); outline:none; }
.shop-item:disabled { opacity:.38; cursor:not-allowed; }
.shop-item strong { display:block; margin-bottom:4px; font-size:14px; }.shop-item p { margin:0; min-height:37px; color:var(--muted); font-size:11px; line-height:1.35; }.shop-item b { display:block; margin-top:10px; color:oklch(0.84 0.15 92); font:800 16px ui-monospace,monospace; }
#finish-shop,#start-button { border:0; background:var(--accent); color:oklch(0.18 0.025 45); font-weight:900; cursor:pointer; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); }
#finish-shop { float:right; margin-top:18px; padding:14px 20px; } #finish-shop span { display:block; font-size:8px; letter-spacing:.12em; }
#start-screen { position:absolute; inset:0; z-index:30; display:grid; place-items:center; background:linear-gradient(90deg,oklch(0.14 0.018 80 / .94),oklch(0.18 0.02 76 / .5)), repeating-linear-gradient(113deg,transparent 0 80px,oklch(0.76 0.15 62 / .06) 80px 83px); }
.start-copy { width:min(560px,calc(100% - 42px)); }.start-copy>span { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.24em; }.start-copy h1 { margin:5px 0; font-size:clamp(52px,12vw,104px); line-height:.85; letter-spacing:-.06em; }.start-copy p { margin:18px 0 28px; color:var(--muted); font-size:18px; }.start-copy small { display:block; margin-top:14px; color:var(--muted); }
#start-button { padding:15px 22px; font-size:16px; letter-spacing:.05em; }
#fade { position:absolute; inset:0; z-index:50; background:oklch(0.08 0.008 80); opacity:0; pointer-events:none; transition:opacity 420ms ease-out; } #fade.on { opacity:1; }
[hidden] { display:none !important; }
@media (pointer:fine) { .stick-zone { opacity:.24; } .stick-zone span { display:none; } }
@media (max-width:760px) {
  .hud-top { grid-template-columns:105px 1fr 94px; gap:8px; }.phase-block strong{font-size:15px}.objective{padding-top:1px}.status-block .money{font-size:15px}.health{width:92px;height:20px}.health b{line-height:18px;font-size:11px}
  #hotbar { width:calc(100% - 116px); justify-content:center; bottom:max(9px,env(safe-area-inset-bottom)); gap:3px; } #hotbar button { flex:1; max-width:61px; min-width:42px; height:55px; } #hotbar small{font-size:6px}.icon{scale:.82}
  .stick-zone { width:118px;height:118px;bottom:max(66px,calc(env(safe-area-inset-bottom) + 60px));}.stick-ring{width:88px;height:88px}.stick-ring i{width:42px;height:42px}
  #ammo { right:17px;bottom:179px } #ammo b{font-size:25px}
  #shop { padding-left:16px;padding-right:16px; } #shop-grid { grid-template-columns:repeat(2,minmax(130px,1fr)); }.shop-item{min-height:110px;padding:11px}
}
@media (max-height:520px) {
  .stick-zone{bottom:58px;width:105px;height:105px}.stick-ring{width:76px;height:76px}.stick-ring i{width:38px;height:38px}#hotbar button{height:50px}.icon{scale:.74}#ammo{bottom:120px}
  #shop-grid{grid-template-columns:repeat(4,minmax(125px,1fr))}.shop-item{min-height:92px}.shop-item p{min-height:28px}
}