: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}
body.deathcam #hud, body.deathcam #touch{display:none}   /* deathcam: bez HUD (js/systems/Deathcam.js) */
.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}
.xp{background:#6a8a4a}
.stat-bars{display:flex;flex-direction:column}
/* udźwig i survival */
.needs{display:flex;gap:8px;margin-top:6px}
.need{flex:1;display:flex;align-items:center;gap:4px;font-size:11px}.need .bar{flex:1;height:7px;margin-top:0}
#stamina{background:#c9a227}#stamina.run{background:#e8d060}#stamina.bad{background:#7a5a20}
#needFood{background:#c8762a}#needWater{background:#3a8ad0}#needPsyche{background:#9a6ac8}#needPsyche.bad{background:#d83a2a}
.health-line{font-size:11px;color:#e8a080;margin-top:3px;min-height:0}.health-line:empty{display:none}
#psycheVignette{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:0;transition:opacity 1s;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 45%,rgba(20,0,20,.85) 100%)}
body.in-shelter #psycheVignette{display:none}
#needFood.bad,#needWater.bad{background:#d83a2a;animation:needBlink 1s steps(2) infinite}
@keyframes needBlink{50%{opacity:.35}}
.carry-row{margin-top:6px;font-size:12px}.carry-row .heavy{color:#e6c86a}.carry-row .overloaded{color:#ff6b6b}
.carry-bar{position:relative;height:6px;margin-top:3px}
#carryFill{background:#6a8a4a}#carryFill.heavy{background:#c9a227}#carryFill.overloaded{background:#d83a2a}
.carry-bar .mark{position:absolute;top:0;bottom:0;width:1px;background:#d8d0c0aa}.carry-bar .mark.heavy{left:50%}.carry-bar .mark.over{left:80%}
.mact.on{background:linear-gradient(180deg,#5a4a1add,#3a3010dd);border-color:#c9a227}
.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}
#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}
  #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(3, 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 3;
    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;
  }
  .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}
  #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)}}

/* Raid inventory */
#raidInventory{z-index:120;background:#050706d9;backdrop-filter:blur(8px);padding:clamp(12px,3vw,36px);}
.raid-inventory-modal{width:min(960px,100%);max-height:min(90dvh,900px);overflow:auto;background:linear-gradient(145deg,#171d1a,#0a0e0c 72%);border:1px solid #71816d;border-top:3px solid #b3944c;box-shadow:0 20px 80px #000d;padding:clamp(16px,3vw,30px);color:#e3e5dd;font-family:inherit}
.raid-inventory-modal header,.raid-inventory-modal footer{display:flex;align-items:center;justify-content:space-between;gap:16px}
.raid-inventory-modal header{border-bottom:1px solid #ffffff20;padding-bottom:14px}
.raid-inventory-modal header small{color:#b9a267;letter-spacing:.18em;font-size:10px}
.raid-inventory-modal h2{margin:5px 0 0;font-size:clamp(22px,4vw,34px);letter-spacing:.12em}
.raid-inventory-modal header button{background:#252d28;color:#ddd;border:1px solid #ffffff36;font-size:20px;width:42px;height:42px;cursor:pointer}
.raid-inventory-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 0}
.raid-inventory-grid section{background:#ffffff08;border:1px solid #ffffff18;padding:14px;min-width:0}
.raid-inventory-grid h3{display:flex;justify-content:space-between;margin:0 0 10px;color:#c7b577;font-size:12px;letter-spacing:.12em}
.raid-inventory-grid .raid-inv-wide{grid-column:1/-1}
.raid-inv-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #ffffff12;font-size:13px}
.raid-inv-row:last-child{border-bottom:0}
.raid-inv-row small{display:block;color:#9da59b;margin-top:3px;font-size:11px}
.raid-inv-row button,.raid-inventory-modal footer button{background:#313a32;color:#edf0e9;border:1px solid #809071;padding:8px 11px;font:inherit;font-size:11px;letter-spacing:.06em;cursor:pointer}
.raid-inv-row button:hover,.raid-inventory-modal footer button:hover{background:#596447}
.raid-inv-empty{color:#8b938a;font-size:12px;padding:8px 0}
.raid-inventory-modal footer{border-top:1px solid #ffffff20;padding-top:14px;color:#9da59b;font-size:11px}
@media(max-width:620px){.raid-inventory-grid{grid-template-columns:1fr}.raid-inventory-grid .raid-inv-wide{grid-column:auto}.raid-inventory-modal footer{align-items:flex-start;flex-direction:column}.raid-inventory-modal footer button{width:100%}}

/* Personal raid terminal: compact, touch friendly field tablet. */
.raid-terminal-overlay{z-index:35;padding:12px;pointer-events:auto}
.raid-terminal{width:min(1120px,96vw);height:min(820px,94vh);display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(145deg,#1a211b,#0b100d);border:2px solid #697858;box-shadow:0 22px 90px #000;border-radius:8px;color:#d8d0c0}
.terminal-head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid #697858;background:linear-gradient(90deg,#293329,#131914)}
.terminal-head small{color:#adbe9c;letter-spacing:.16em;font-size:10px}.terminal-head h2{margin:3px 0 0;color:#ddc56c;font-size:19px;letter-spacing:.09em}
.terminal-head button{margin:0;padding:7px 12px;font-size:18px}
.terminal-tabs{display:flex;gap:8px;padding:8px 14px;border-bottom:1px solid #ffffff1b}
.terminal-tabs button{margin:0;padding:9px 15px;font-size:12px;color:#9fa995}
.terminal-tabs button.active{border-color:#ddc56c;color:#f1db82;background:#353b28}
#terminalBleedBadge{color:#ef564c;animation:needBlink .8s steps(2) infinite}
.terminal-pane{min-height:0;flex:1;display:flex;flex-direction:column;padding:12px 15px;gap:10px}
.terminal-pane[hidden]{display:none}
.terminal-map-wrap{position:relative;min-height:0;flex:1;border:1px solid #78876a;background:#101714;overflow:hidden}
#terminalMap{display:block;width:100%;height:100%;object-fit:fill;touch-action:manipulation;cursor:crosshair}
.terminal-map-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#aeb5a6;font-size:12px}
.terminal-map-controls label{display:flex;align-items:center;gap:8px}.terminal-map-controls select{background:#182019;color:#e7e2d6;border:1px solid #697858;padding:7px}
.terminal-map-controls button{margin:0;padding:8px 10px;font-size:10px}.terminal-map-controls small{flex-basis:100%;color:#849180}
.terminal-health-layout{display:grid;grid-template-columns:minmax(200px,32%) 1fr;gap:20px;min-height:0;overflow:auto}
.body-outline{align-self:start;position:sticky;top:0;text-align:center;padding:8px;border:1px solid #ffffff18;background:#101511}
.body-outline svg{display:block;width:min(100%,250px);height:min(54vh,440px);margin:auto}.body-lines{fill:#252d26;stroke:#c6d1bf;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
#medicalBodyZones circle,#medicalBodyZones rect{stroke-width:2}.body-outline p{margin:4px 0;color:#e0d18b;font-weight:700;font-size:12px}
.medical-detail h3{font-size:12px;color:#ddc56c;letter-spacing:.12em;margin:3px 0 8px}
.medical-zone{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:7px 9px;border-bottom:1px solid #ffffff13;font-size:12px}
.medical-zone b{color:#c6d7bb}.medical-zone small{grid-column:1/-1;color:#91a08a;font-size:10px}
.medical-zone.black{background:#241919}.medical-zone.black b,.medical-zone.black small{color:#e5756d}.medical-zone.bleeding{background:#301a19}
.blood-drop{font-style:normal;animation:needBlink .7s steps(2) infinite}
.medical-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid #ffffff12;font-size:12px}
.medical-item small{color:#b7b08e}.medical-item button{margin:2px;padding:6px 10px;font-size:10px}.medical-item button:disabled{opacity:.4;cursor:default}
.medical-rules{display:block;line-height:1.5;color:#9aa392;margin:9px 0}
.terminal-foot{display:flex;align-items:center;justify-content:space-between;padding:9px 15px;border-top:1px solid #ffffff22;color:#899487;font-size:11px}.terminal-foot button{margin:0;padding:8px 13px;font-size:11px}
.bleeding-hud{margin-top:4px;color:#ff786c;font-weight:800;font-size:10px;animation:needBlink .7s steps(2) infinite}
.bleeding-hud[hidden]{display:none}
@media(max-width:650px){.raid-terminal-overlay{padding:4px}.raid-terminal{width:100vw;height:96vh}.terminal-head{padding:9px}.terminal-head h2{font-size:15px}.terminal-tabs{padding:6px}.terminal-tabs button{flex:1;padding:8px 5px;font-size:10px}.terminal-pane{padding:7px}.terminal-health-layout{grid-template-columns:34% 1fr;gap:8px}.body-outline{padding:2px}.body-outline svg{height:42vh}.medical-zone{padding:6px 4px;font-size:10px;gap:2px 4px}.medical-zone b{font-size:9px}.medical-item{font-size:10px}.medical-item button{padding:5px;font-size:9px}.terminal-foot{padding:7px}.terminal-foot span{max-width:55%}.terminal-foot button{font-size:9px;padding:7px}}