:root{
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0a0c0b;color:#d8d0c0;font-family:"Segoe UI",system-ui,Arial,sans-serif}
canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none}
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
.panel{position:absolute;background:rgba(12,14,12,.88);border:1px solid #3a4a32;box-shadow:0 8px 30px #000a, inset 0 0 20px #0006;border-radius:4px}
#stats{left:14px;top:14px;padding:10px 13px;min-width:250px}
.row{display:flex;justify-content:space-between;gap:18px;margin:3px 0;font-size:13px}
.bar{height:10px;background:#1a2218;border-radius:2px;overflow:hidden;margin-top:7px}.fill{height:100%;width:100%;transition:width .12s}
#hp{background:#a33a2a}.xp{background:#6a8a4a}
.stat-bars{display:flex;flex-direction:column}
.stats-meta{display:flex;flex-direction:column}
#hudRight{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#weapon{position:static;padding:10px 13px;text-align:right;min-width:190px}
#wname{font-size:18px;font-weight:800;letter-spacing:.5px}.ammo{font-size:27px;font-weight:900}
#radar{width:120px;height:90px;border:2px solid #c9a227;border-radius:4px;background:#0a0c0b}
#grenadeInfo{position:static;padding:6px 10px;font-size:12px}
#raidInfo{position:static;padding:6px 10px;font-size:11px;line-height:1.45;text-align:right;min-width:150px}
#raidInfo:empty{display:none}
#raidInfo .ok{color:#8fd08f} #raidInfo .bad{color:#ff6b6b} #raidInfo .warn{color:#e6c86a} #raidInfo .dim{color:#8a8a80}
#boss{left:50%;top:15px;transform:translateX(-50%);width:min(520px,70vw);display:none;padding:8px 12px;text-align:center}.bossbar{height:13px;background:#2a1510;border-radius:2px;overflow:hidden}.bossfill{height:100%;background:#c43a2a;width:100%}
#hint{left:50%;bottom:14px;transform:translateX(-50%);padding:7px 12px;font-size:12px;opacity:.72}
.m-pause-btn{display:none;position:absolute;top:calc(8px + var(--sat));left:calc(50% - 22px);transform:translateX(-50%);width:38px;height:34px;border:1px solid #5a6a4a;background:rgba(18,22,16,.92);color:#c9a227;border-radius:6px;font-size:16px;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;z-index:12;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.m-pause-btn:active{background:#2a3422;border-color:#c9a227}
.m-mute-btn{display:none;position:absolute;top:calc(8px + var(--sat));left:calc(50% + 22px);transform:translateX(-50%);width:38px;height:34px;border:1px solid #5a6a4a;background:rgba(18,22,16,.92);color:#c9a227;border-radius:6px;font-size:15px;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;z-index:12;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.m-mute-btn:active{background:#2a3422;border-color:#c9a227}
.overlay{position:fixed;inset:0;background:rgba(6,8,6,.88);display:flex;align-items:center;justify-content:center;z-index:20}
.modal{width:min(720px,94vw);max-height:92vh;overflow:auto;padding:28px;border-radius:6px;background:linear-gradient(160deg,#1a1e18,#0e120e);border:2px solid #4a5a3a;box-shadow:0 20px 80px #000, inset 0 0 40px #0005;position:relative}
.modal::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,#c9a227 0 16px,#1a1a1a 16px 32px)}
h1{margin:0 0 6px;font-size:42px;letter-spacing:4px;color:#c9a227;text-shadow:0 0 12px #c9a22744}.sub{color:#8a9a7a;margin-bottom:18px}
button{border:1px solid #5a6a4a;background:linear-gradient(180deg,#2a3224,#1a2218);color:#d8d0c0;border-radius:4px;padding:11px 16px;font-weight:700;cursor:pointer;margin:4px;letter-spacing:.5px}button:hover{background:linear-gradient(180deg,#3a4a32,#2a3224);border-color:#c9a227;color:#f0e8c0}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.card{padding:12px;border:1px solid #3a4a32;border-radius:4px;background:#121610}.card b{display:block;margin-bottom:4px;color:#c9a227}
#levelup{display:none}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.choice{min-height:130px;text-align:left}.choice strong{font-size:16px;display:block;margin-bottom:6px}.choice span{font-size:12px;color:#a8bdcd}
#touch{display:none;position:fixed;inset:0;pointer-events:none;z-index:5}
.stick{position:absolute;width:140px;height:140px;border:2px solid #ffffff2a;border-radius:50%;background:#ffffff0a;pointer-events:auto;touch-action:none}
.knob{position:absolute;width:60px;height:60px;border-radius:50%;left:40px;top:40px;background:#ffffff22;border:1px solid #ffffff3a;transition:transform .03s linear}
#moveZone{position:absolute;left:0;top:0;bottom:0;width:48%;pointer-events:auto}
#leftStick{left:24px;bottom:32px}
#aimZone{position:absolute;right:0;top:0;bottom:0;width:52%;pointer-events:auto}
.aimstick{display:none;width:150px;height:150px;border-color:#ff596955;background:#ff304014;z-index:6}
.aimstick .knob{background:#ff30401a;border-color:#ff596988}
.aimstick.active{display:block}
.fire{position:absolute;right:34px;bottom:44px;width:88px;height:88px;border-radius:50%;background:#ff304018;border:2px dashed #ff596966;pointer-events:none;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;letter-spacing:1px;color:#ffb0b0;opacity:.85;transition:opacity .15s}
.fire.hide{opacity:0}
.smallbtn{position:absolute;right:20px;bottom:200px;pointer-events:auto;width:56px;height:56px;border-radius:50%;font-size:16px;display:flex;align-items:center;justify-content:center;padding:0}
#mobileActions{position:absolute;left:14px;bottom:190px;display:flex;flex-direction:column;gap:8px;pointer-events:auto}
.mact{width:64px;height:56px;border-radius:10px;background:linear-gradient(180deg,#2a3224dd,#1a2218dd);border:1px solid #5a6a4a;color:#d8d0c0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:18px;padding:2px;line-height:1}
.mact span{font-size:8px;letter-spacing:.5px;font-weight:700;opacity:.85}
.mact:active{background:linear-gradient(180deg,#3a4a32dd,#2a3224dd);border-color:#c9a227}
#desktopActions{display:flex;position:absolute;right:14px;bottom:14px;pointer-events:auto;z-index:10;gap:6px;flex-wrap:wrap;justify-content:flex-end}
#mobileActions{display:none}
@media(max-width:1024px), (pointer: coarse), (hover: none){
  #touch{display:block}
  #hint{display:none}
  #desktopActions{display:none}
  .m-pause-btn{display:flex}
  .m-mute-btn{display:flex}

  /* Compact top-left stats */
  #stats{
    left:calc(10px + var(--sal));
    top:calc(8px + var(--sat));
    padding:6px 10px;
    min-width:unset;
    width:auto;
    max-width:min(285px, 48vw);
    box-shadow:0 4px 16px rgba(0,0,0,.6);
  }
  #stats .row{font-size:11px;margin:1px 0;gap:8px}
  #stats .bar{height:7px;margin-top:2px;margin-bottom:3px}
  .stats-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2px 8px;
    margin-top:3px;
    border-top:1px solid #283622;
    padding-top:3px;
  }
  .stat-chip{margin:0;font-size:10px}

  /* Compact top-right HUD */
  #hudRight{
    right:calc(10px + var(--sar));
    top:calc(8px + var(--sat));
    gap:5px;
    transform:none;
    align-items:flex-end;
  }
  #weapon{
    padding:5px 8px;
    min-width:115px;
    max-width:160px;
    box-shadow:0 4px 16px rgba(0,0,0,.6);
  }
  #wname{font-size:12px;letter-spacing:.3px}
  .ammo{font-size:18px;line-height:1.15}
  #reload{font-size:10px;color:#c9a227}
  #radar{width:92px;height:69px}
  #grenadeInfo{padding:3px 7px;font-size:10px}

  /* Boss bar below top HUD */
  #boss{
    top:calc(50px + var(--sat));
    width:min(360px, 86vw);
    padding:5px 10px;
    font-size:11px;
  }
  .bossbar{height:9px}

  /* Mobile Actions: 2-column cluster above left stick */
  #mobileActions{
    position:absolute;
    left:calc(14px + var(--sal));
    bottom:calc(180px + var(--sab));
    display:grid;
    grid-template-columns:repeat(2, 54px);
    gap:6px;
    pointer-events:auto;
    z-index:10;
    touch-action:none;
  }
  .mact{
    width:54px;
    height:44px;
    border-radius:8px;
    font-size:15px;
  }
  .mact.span2{
    grid-column:span 2;
    width:100%;
    height:30px;
    flex-direction:row;
    gap:6px;
    font-size:13px;
  }
  .mact.span2 span{font-size:9px}

  /* Left Stick */
  #leftStick{
    left:calc(20px + var(--sal));
    bottom:calc(24px + var(--sab));
  }

  /* Right Stick & Touch Reload */
  .smallbtn{
    right:calc(18px + var(--sar));
    bottom:calc(145px + var(--sab));
    width:52px;
    height:52px;
    font-size:18px;
  }
  .fire{
    right:calc(30px + var(--sar));
    bottom:calc(30px + var(--sab));
    width:80px;
    height:80px;
    font-size:12px;
  }

  /* Modal scaling */
  .modal{padding:18px;width:min(640px, 94vw);max-height:90vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  h1{font-size:26px;letter-spacing:2px}
  .grid{grid-template-columns:1fr}
}

@media(max-width:600px) and (orientation:portrait){
  #stats{
    width:calc(100% - 135px - var(--sal) - var(--sar));
    max-width:none;
  }
  #hudRight{
    width:120px;
  }
  #radar{width:80px;height:60px}
  .m-pause-btn{
    left:auto;
    right:calc(170px + var(--sar));
    transform:none;
  }
  .m-mute-btn{
    left:auto;
    right:calc(128px + var(--sar));
    transform:none;
  }
  #boss{
    top:calc(85px + var(--sat));
    width:92vw;
  }
  #mobileActions{
    bottom:calc(195px + var(--sab));
  }
  .smallbtn{
    bottom:calc(170px + var(--sab));
    right:calc(18px + var(--sar));
  }
  .choices{grid-template-columns:1fr}
  .choice{min-height:75px}
}

@media(max-height:480px) and (orientation:landscape){
  #stats{
    padding:4px 8px;
    max-width:min(260px, 45vw);
  }
  #stats .row{font-size:10px;gap:6px}
  #stats .bar{height:6px;margin-top:2px;margin-bottom:2px}
  .stats-meta{gap:1px 6px;margin-top:2px;padding-top:2px}
  .stat-chip{font-size:9px}

  #hudRight{
    gap:3px;
  }
  #weapon{
    padding:4px 6px;
    min-width:105px;
  }
  #wname{font-size:11px}
  .ammo{font-size:16px}
  #radar{width:76px;height:57px}
  #grenadeInfo{padding:2px 5px;font-size:9px}

  #boss{
    top:calc(6px + var(--sat));
    max-width:270px;
    padding:4px 8px;
    font-size:10px;
  }
  .bossbar{height:7px}

  .m-pause-btn{
    width:34px;
    height:30px;
    font-size:14px;
    top:calc(6px + var(--sat));
    left:calc(50% - 20px);
  }
  .m-mute-btn{
    width:34px;
    height:30px;
    font-size:14px;
    top:calc(6px + var(--sat));
    left:calc(50% + 20px);
  }

  #mobileActions{
    bottom:calc(148px + var(--sab));
    grid-template-columns:repeat(2, 48px);
    gap:4px;
  }
  .mact{
    width:48px;
    height:36px;
    font-size:13px;
  }
  .mact.span2{
    height:26px;
    font-size:11px;
  }
  .mact span{font-size:7px}

  #leftStick{
    bottom:calc(14px + var(--sab));
    width:120px;
    height:120px;
  }
  #leftStick .knob{
    width:50px;
    height:50px;
    left:35px;
    top:35px;
  }

  .smallbtn{
    bottom:calc(125px + var(--sab));
    right:calc(16px + var(--sar));
    width:44px;
    height:44px;
    font-size:15px;
  }
  .fire{
    bottom:calc(20px + var(--sab));
    right:calc(24px + var(--sar));
    width:70px;
    height:70px;
    font-size:11px;
  }

  .modal{
    padding:12px 18px;
    max-height:95vh;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  h1{
    font-size:20px;
    margin-bottom:3px;
  }
  .sub{
    margin-bottom:6px;
    font-size:11px;
  }
  .choices{
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
  }
  .choice{
    min-height:75px;
    padding:6px 8px;
  }
  .choice strong{
    font-size:13px;
    margin-bottom:2px;
  }
  .choice span{
    font-size:10px;
  }
  #death .death-msg{
    margin:6px 0 12px;
    font-size:14px;
  }
  #death button{
    padding:7px 12px;
    font-size:12px;
  }
}
@media(max-width:420px){#mobileActions{bottom:180px}.mact{width:56px;height:48px;font-size:15px}}

.fs-btn{
  background:rgba(26,38,24,.92);
  border:1px solid #4a6a3e;
  color:#c9a227;
  cursor:pointer;
  padding:10px 18px;
  font-size:14px;
  font-weight:700;
  border-radius:4px;
  letter-spacing:1px;
  touch-action:manipulation;
  transition:all .15s ease;
}
.fs-btn:hover, .fs-btn:active{
  background:#2e4428;
  border-color:#c9a227;
  color:#fff;
}
@media(max-width:1024px){
  .fs-btn{padding:7px 12px;font-size:12px}
}

/* === DEATH SCREEN === */
#death{display:none;background:#120000;overflow:hidden;z-index:30}
#death .modal{background:linear-gradient(160deg,#2a0a0a,#120005);border:2px solid #8b1a1a;box-shadow:0 0 40px #5a0000aa,inset 0 0 30px #000;text-align:center;position:relative;z-index:2}
#death h1{color:#ff2a2a;font-size:42px;letter-spacing:3px;text-shadow:0 0 12px #ff0000,0 0 30px #aa0000;margin-bottom:12px}
#death .death-msg{color:#ffb0b0;font-size:18px;line-height:1.45;margin:18px 0 28px;font-weight:600}
#death .death-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
#death button{background:#3a1010;border:1px solid #a33;color:#ffdddd;font-size:15px;padding:12px 20px}
#death button:hover{background:#5a1818;border-color:#ff4444}
#death button#deathRestart{background:#4a1515;border-color:#c44}

/* Pixel blood dripping */
.blood-container{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.blood-drop{position:absolute;top:-40px;width:6px;background:#8b0000;border-radius:0 0 3px 3px;opacity:.85;
  box-shadow:0 0 4px #5a0000; image-rendering:pixelated;
  animation:drip linear infinite}
.blood-drop::after{content:"";position:absolute;bottom:-4px;left:-2px;width:10px;height:8px;background:#8b0000;border-radius:50%;}
.blood-stream{position:absolute;top:0;width:4px;height:100%;background:linear-gradient(to bottom,#6b0000 0%,#8b0000 30%,transparent 100%);opacity:.4}
@keyframes drip{
  0%{transform:translateY(-50px);opacity:0}
  10%{opacity:.9}
  90%{opacity:.8}
  100%{transform:translateY(110vh);opacity:0}
}
.color-btn{width:36px;height:36px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:.15s}
.color-btn.selected{border-color:#fff;transform:scale(1.15);box-shadow:0 0 10px #fff8}
#create label{font-weight:700;color:#a8c0d0}

/* === LOADING SCREEN === */
/* ekran ładowania = scena Phasera (js/scenes/PreloadScene.js); do tego czasu chowamy HUD i sterowanie */
body.booting #hud, body.booting #touch, body.booting #levelBanner{display:none!important}
body.booting canvas{cursor:pointer}

/* Menu steam & pipes - background only */
.menu-decor{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:6px;z-index:0}
.modal > *:not(.menu-decor){position:relative;z-index:1}
.steam{position:absolute;width:7px;height:7px;background:#ffffff18;border-radius:50%;animation:steamRise 3.5s ease-out infinite}
@keyframes steamRise{0%{transform:translateY(0) scale(1);opacity:0}25%{opacity:.4}100%{transform:translateY(-90px) scale(2.8);opacity:0}}
.menu-pipe{position:absolute;background:linear-gradient(90deg,#2a2a2a88,#4a4a4a66,#2a2a2a88);border:1px solid #1115;opacity:0.45}
/* Level-up chainsaw banner */
#levelBanner{position:fixed;top:-120px;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:center;gap:16px;padding:14px;background:linear-gradient(90deg,#1a0505,#3a0a0a,#1a0505);border-bottom:3px solid #8b0000;transition:top .4s ease;pointer-events:none}
#levelBanner.show{top:0}
#levelBanner .lvl-text{font-size:28px;font-weight:900;color:#ff3333;letter-spacing:3px;text-shadow:0 0 12px #ff0000}
#levelBanner .chainsaw{width:64px;height:36px;position:relative;animation:sawShake .08s infinite}
#levelBanner .chainsaw .body{position:absolute;left:8px;top:8px;width:40px;height:18px;background:#333;border-radius:3px}
#levelBanner .chainsaw .blade{position:absolute;left:0;top:4px;width:28px;height:28px;border:4px solid #666;border-radius:50%;border-right-color:#999;animation:bladeSpin .12s linear infinite}
#levelBanner .chainsaw .blood{position:absolute;right:0;top:0;width:8px;height:8px;background:#8b0000;border-radius:50%;box-shadow:4px 6px 0 #8b0000, -2px 10px 0 #5a0000}
@keyframes sawShake{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes bladeSpin{to{transform:rotate(360deg)}}