/* ================= DeadGrid – Style ================= */
:root{
  --bg:#0f1110; --panel:#171a18; --panel2:#1e2220; --line:#2c322e;
  --txt:#d6d9d2; --dim:#8a918a; --acc:#c8f04a; --blood:#d9412b; --warn:#e8a33a;
  --ok:#6fcf5a; --water:#4aa8e8; --inf:#9b5de5;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "Consolas", "Cascadia Mono", ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font:14px/1.45 var(--font);overflow:hidden}
button{font:inherit}
[hidden]{display:none!important}
h4{margin:14px 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600}

.btn{background:var(--panel2);color:var(--txt);border:1px solid var(--line);padding:7px 12px;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;justify-content:center;transition:.12s}
.btn:hover:not(:disabled){border-color:var(--acc);color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--acc);color:#111;border-color:var(--acc);font-weight:700}
.btn.primary:hover:not(:disabled){filter:brightness(1.1);color:#000}
.btn.danger{border-color:var(--blood);color:#ffb3a6}
.btn.big{padding:12px 20px;font-size:16px}
.btn.sm{padding:5px 9px;font-size:13px}
.btn.on{background:var(--warn);color:#111;border-color:var(--warn)}

.logo{font-family:var(--mono);font-weight:900;letter-spacing:.08em;font-size:56px;margin:0;color:#e8e8e0}
.logo span{color:var(--blood)}
.logo.small{font-size:18px}

/* ---------- Start ---------- */
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:auto;
  background:radial-gradient(ellipse at 50% 30%,#2a1512 0%,#0b0c0b 70%);}
.start-box{width:min(620px,94vw);padding:30px;text-align:center;margin:auto}
.tagline{color:var(--dim);margin:4px 0 26px;font-style:italic}
.start-menu{display:flex;flex-direction:column;gap:10px;max-width:320px;margin:0 auto}
.char-create{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:20px}
.char-create h2{margin:0 0 10px}
.char-create h3{margin:16px 0 8px;font-size:14px;color:var(--acc)}
.field{display:flex;gap:10px;align-items:center}
input{background:#0d0f0e;color:var(--txt);border:1px solid var(--line);padding:7px 9px;border-radius:4px;font:inherit}
input:focus{outline:none;border-color:var(--acc)}
.cc-attrs{display:grid;gap:6px}
.cc-attr{display:grid;grid-template-columns:130px 30px 34px 34px 1fr;gap:6px;align-items:center}
.cc-attr b{text-align:center;font-family:var(--mono);font-size:16px}
.cc-attr small{color:var(--dim)}
.loc-row{display:flex;gap:6px}.loc-row input{flex:1}
.loc-results{display:flex;flex-direction:column;gap:3px;margin-top:6px;max-height:140px;overflow:auto}
.loc-results button,.loc-presets button{text-align:left;background:none;border:1px solid var(--line);color:var(--txt);padding:5px 8px;border-radius:3px;cursor:pointer}
.loc-results button:hover,.loc-presets button:hover{border-color:var(--acc)}
.loc-presets{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.loc-picked{margin-top:10px;color:var(--dim)}.loc-picked b{color:var(--acc)}
.row-btns{display:flex;justify-content:space-between;margin-top:20px}
.slot-list{display:flex;flex-direction:column;gap:6px;max-width:400px;margin:16px auto 0}
.credits{margin-top:28px;color:#555;font-size:12px}

/* ---------- Layout ---------- */
#game{position:fixed;inset:0;display:grid;grid-template-columns:260px 1fr 320px;grid-template-rows:46px 1fr}
#topbar{grid-column:1/4;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px;background:#0b0c0b;border-bottom:1px solid var(--line)}
.tb-left,.tb-right{display:flex;gap:10px;align-items:center}
.tb-time{font-family:var(--mono);font-size:16px;color:#fff}
.tb-phase{font-size:12px;color:var(--dim)}
.tb-mid{flex:1;text-align:center;color:var(--acc);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#left-panel,#right-panel{background:var(--panel);overflow-y:auto;padding:10px 12px}
#left-panel{border-right:1px solid var(--line)}
#right-panel{border-left:1px solid var(--line);display:flex;flex-direction:column}

.char-head{display:flex;justify-content:space-between;align-items:baseline}
.ch-name{font-size:18px;font-weight:700}
.ch-level{color:var(--acc);font-family:var(--mono);font-size:12px}
.bars{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.bar-row{display:grid;grid-template-columns:96px 1fr 34px;align-items:center;gap:6px;font-size:12px}
.bar-row b{font-family:var(--mono);font-weight:400;text-align:right;font-size:11px;color:var(--dim)}
.bar{height:9px;background:#0b0c0b;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;width:50%;transition:width .3s}
.bar .hp{background:var(--blood)}.bar .food{background:#c98a3c}.bar .water{background:var(--water)}
.bar .energy{background:#e8d43a}.bar .inf{background:var(--inf)}.bar .xpb{background:var(--acc)}
.status-effects{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.status-effects span{font-size:11px;padding:2px 6px;border-radius:3px;background:#3a1a16;color:#ffb3a6;border:1px solid #5a2620}
.attr-points{color:var(--acc);text-transform:none;letter-spacing:0}
.attr-list{display:flex;flex-direction:column;gap:3px}
.attr-row{display:flex;justify-content:space-between;align-items:center;padding:3px 6px;background:var(--panel2);border-radius:3px}
.attr-row .val{font-family:var(--mono);color:#fff}
.attr-row .bon{color:var(--ok);font-size:11px;margin-left:4px}
.attr-row button{padding:0 6px;margin-left:6px;background:var(--acc);border:0;border-radius:2px;cursor:pointer;font-weight:700}
.equip,.stats,.weight{font-size:12px;color:var(--dim)}
.equip b{color:var(--txt)}
.weight.over{color:var(--blood)}
.stats div{display:flex;justify-content:space-between}

/* ---------- Map ---------- */
#map-wrap{position:relative;overflow:hidden}
#map{position:absolute;inset:0;background:#141614}
.leaflet-container{background:#141614;font-family:var(--font)}
.tiles-apoc .leaflet-tile-pane{filter:sepia(.35) saturate(.6) contrast(1.05)}
.tiles-dark .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.75) contrast(.9) saturate(.35) sepia(.15)}
#darkness{position:absolute;inset:0;pointer-events:none;z-index:450;
  --px:50%;--py:50%;--r:200px;--a:0;
  background:radial-gradient(circle at var(--px) var(--py),rgba(0,0,8,0) 0,rgba(0,0,8,0) calc(var(--r)*.45),rgba(0,0,12,var(--a)) var(--r));
  transition:background .6s}
#loading-ind{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:600;background:#000c;padding:5px 12px;border-radius:12px;font-size:12px;border:1px solid var(--line)}
#legend{position:absolute;left:10px;bottom:22px;z-index:500;background:#000b;border:1px solid var(--line);border-radius:4px;padding:6px 8px;font-size:11px;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
#legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

.player-icon{font-size:24px;line-height:24px;text-align:center;filter:drop-shadow(0 0 4px #c8f04a)}
.zombie-icon{font-size:20px;line-height:20px;text-align:center;filter:drop-shadow(0 0 3px #000);transition:transform .2s}
.zombie-icon.chase{filter:drop-shadow(0 0 6px #ff2a00);animation:zpulse .8s infinite}
@keyframes zpulse{50%{transform:scale(1.25)}}
.poi-icon{font-size:22px;line-height:22px;text-align:center;filter:drop-shadow(0 0 5px #000)}
.evac-icon{font-size:30px;line-height:30px;animation:zpulse 1.5s infinite;filter:drop-shadow(0 0 8px #4aa8e8)}

#building-panel{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:700;min-width:340px;max-width:460px;
  background:#121513f0;border:1px solid var(--line);border-top:3px solid var(--acc);border-radius:5px;padding:12px 14px;box-shadow:0 8px 30px #000a}
#building-panel h3{margin:0;font-size:16px}
#building-panel .bp-sub{color:var(--dim);font-size:12px;margin-bottom:8px}
#building-panel .bp-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#building-panel .close{position:absolute;right:8px;top:6px;background:none;border:0;color:var(--dim);cursor:pointer;font-size:16px}
.loot-meter{height:6px;background:#0b0c0b;border-radius:3px;overflow:hidden;margin-top:4px}
.loot-meter i{display:block;height:100%;background:var(--warn)}

#toasts{position:absolute;top:12px;right:12px;z-index:800;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{background:#000d;border-left:3px solid var(--acc);padding:6px 10px;font-size:13px;border-radius:3px;animation:tin .25s;max-width:300px}
.toast.bad{border-color:var(--blood)}.toast.warn{border-color:var(--warn)}
@keyframes tin{from{opacity:0;transform:translateX(20px)}}

/* ---------- Right panel ---------- */
.tabs{display:flex;gap:4px}
.tabs button{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--dim);padding:6px 2px;border-radius:4px 4px 0 0;cursor:pointer;font-size:12px}
.tabs button.active{color:#fff;border-bottom-color:var(--acc);background:#232825}
.tab{display:none;padding-top:8px;min-height:120px;max-height:48%;overflow-y:auto}
.tab.active{display:block}
.inv-item{display:grid;grid-template-columns:26px 1fr auto;gap:6px;align-items:center;padding:4px 6px;border-radius:3px;background:var(--panel2);margin-bottom:3px;font-size:13px}
.inv-item .ic{font-size:18px;text-align:center}
.inv-item .nm small{display:block;color:var(--dim);font-size:11px}
.inv-item .acts{display:flex;gap:3px}
.inv-item .acts button{padding:2px 6px;font-size:11px;background:#0f1110;border:1px solid var(--line);color:var(--txt);border-radius:3px;cursor:pointer}
.inv-item .acts button:hover{border-color:var(--acc)}
.inv-item.equipped{outline:1px solid var(--acc)}
.dur{display:inline-block;width:36px;height:4px;background:#000;vertical-align:middle;margin-left:4px}
.dur i{display:block;height:100%;background:var(--ok)}
.recipe{padding:6px 8px;border-radius:3px;background:var(--panel2);margin-bottom:4px;font-size:12px}
.recipe .rt{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.recipe .req{color:var(--dim)}.recipe .req .miss{color:var(--blood)}.recipe .req .have{color:var(--ok)}
.hint{color:var(--dim);font-size:12px;font-style:italic;padding:6px}
.log-head{margin-top:10px}
.log{flex:1;overflow-y:auto;font-size:12px;font-family:var(--mono);background:#0d0f0e;border:1px solid var(--line);border-radius:3px;padding:6px;min-height:120px}
.log div{padding:2px 0;border-bottom:1px solid #1a1d1b}
.log .t{color:#555;margin-right:5px}
.log .good{color:var(--ok)}.log .bad{color:#ff8a78}.log .warn{color:var(--warn)}.log .story{color:var(--water)}

/* ---------- Modal ---------- */
#modal-back{position:fixed;inset:0;background:#000b;z-index:2000;display:flex;align-items:center;justify-content:center;animation:fade .2s}
@keyframes fade{from{opacity:0}}
#modal{width:min(580px,94vw);max-height:90vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--blood);border-radius:6px;padding:18px 22px;box-shadow:0 20px 60px #000}
#modal-title{margin:0 0 10px;font-size:20px}
#modal-body{font-size:15px;line-height:1.55}
#modal-body p{margin:0 0 10px}
#modal-body .fx{font-family:var(--mono);font-size:13px;margin:8px 0;display:flex;flex-wrap:wrap;gap:5px}
#modal-body .fx span{padding:2px 7px;border-radius:3px;background:#0d0f0e;border:1px solid var(--line)}
#modal-body .fx .g{color:var(--ok)}#modal-body .fx .b{color:#ff8a78}
#modal-btns{display:flex;flex-direction:column;gap:6px;margin-top:14px}
#modal-btns .btn{justify-content:space-between;text-align:left}
#modal-btns .btn .chk{font-family:var(--mono);font-size:12px;color:var(--acc)}
#modal-btns.row{flex-direction:row;justify-content:flex-end}

.dice-box{display:flex;align-items:center;gap:12px;margin:12px 0;padding:10px;background:#0d0f0e;border:1px solid var(--line);border-radius:4px;font-family:var(--mono)}
.die{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;
  background:#e8e8e0;color:#111;border-radius:8px;clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.die.rolling{animation:shake .1s infinite}
@keyframes shake{25%{transform:rotate(8deg)}75%{transform:rotate(-8deg)}}
.dice-sum{font-size:13px;color:var(--dim)}
.dice-res{margin-left:auto;font-weight:900;font-size:16px}
.dice-res.ok{color:var(--ok)}.dice-res.fail{color:var(--blood)}
.combat-zs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.cz{background:#0d0f0e;border:1px solid #5a2620;border-radius:4px;padding:5px 9px;font-size:12px}
.cz.dead{opacity:.35;text-decoration:line-through}
.hearts{color:var(--blood);letter-spacing:2px}
.combat-log{font-family:var(--mono);font-size:12px;max-height:130px;overflow-y:auto;background:#0d0f0e;padding:6px;border-radius:3px;margin-top:8px}

@media (max-width:1100px){#game{grid-template-columns:220px 1fr 270px}}

/* ---------- Mobile / kleine Bildschirme ---------- */
#topbar .mobile-only,#panel-back{display:none}
@media (max-width:820px){
  html,body{font-size:15px}
  .logo{font-size:clamp(34px,12vw,56px)}
  .start-box{padding:20px 12px}
  .char-create{padding:14px}
  .cc-attr{grid-template-columns:1fr 30px 38px 38px}
  .cc-attr small{grid-column:1/-1;margin-top:-4px}
  .row-btns{flex-wrap:wrap;gap:8px}
  .row-btns .btn{flex:1 1 auto}
  .field input{flex:1;min-width:0}

  #game{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;height:100dvh}
  #topbar{grid-column:1;min-width:0;flex-wrap:wrap;gap:6px 8px;padding:6px 8px;padding-top:max(6px,env(safe-area-inset-top))}
  .tb-left{gap:8px}
  .tb-time{font-size:14px}
  .tb-phase,.logo.small{display:none}
  .tb-right{order:1;flex:1 1 100%;gap:4px;justify-content:space-between}
  .tb-right .btn{flex:1 1 0}
  .tb-left{order:2}
  .tb-mid{order:3;flex:1 1 0;min-width:0;text-align:left;font-size:12px}
  #topbar .mobile-only{display:inline-flex}
  #topbar .lbl{display:none}
  .btn.sm{padding:6px 7px;min-height:34px;min-width:32px}

  #left-panel,#right-panel{position:fixed;top:0;bottom:0;z-index:1500;width:min(340px,88vw);
    transition:transform .25s ease;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
  #left-panel{left:0;transform:translateX(-105%)}
  #right-panel{right:0;transform:translateX(105%)}
  #game.show-left #left-panel,#game.show-right #right-panel{transform:none;box-shadow:0 0 40px #000}
  #game.show-left #panel-back,#game.show-right #panel-back{display:block;position:fixed;inset:0;z-index:1400;background:#0009}
  .tab{max-height:55%}

  #map-wrap{grid-row:2}
  #building-panel{min-width:0;width:calc(100% - 16px);max-width:460px;bottom:max(8px,env(safe-area-inset-bottom));max-height:60%;overflow-y:auto}
  #building-panel .bp-btns .btn{flex:1 1 auto}
  #legend{font-size:10px;left:6px;bottom:6px;padding:4px 6px;grid-template-columns:1fr 1fr;cursor:pointer}
  #legend:not(.open){display:block}
  #legend:not(.open)>*{display:none}
  #legend:not(.open)::before{content:"🗺 Legende";font-size:11px}
  #toasts{top:8px;right:8px;left:8px;align-items:flex-end}
  .toast{max-width:100%}
  #modal{padding:14px 14px;max-height:88dvh}
  #modal-btns .btn{padding:10px 12px}
  #modal-btns.row{flex-wrap:wrap}
  .leaflet-control-zoom a{width:36px!important;height:36px!important;line-height:36px!important}
}
@media (max-width:820px) and (max-height:500px){
  /* Handy quer: Topbar kompakter */
  .tb-mid{display:none}
}