*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d1018; --bg2:#141a26; --panel:#1a2130; --panel2:#222b3d;
  --line:#2e3a52; --text:#e6ecf7; --dim:#8b9ab5; --acc:#6ee7a0; --acc2:#4ea3f5;
  --warn:#f5c04e; --bad:#f2686b; --slot:#111726;
}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:13px; overflow:hidden; -webkit-font-smoothing:none;
}
#app{height:100vh;width:100vw;position:relative}
.hidden{display:none !important}

/* ---------- Screens / Menüs (Pixel-Look) ---------- */
.screen{
  position:absolute; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1200px 700px at 50% 40%, #1b2740 0%, #0b0e15 70%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 2px,transparent 2px 4px);
}
/* Bewegte Meeresszene hinter dem Hauptmenü */
#menu{background:#0a1526}
#menu-bg{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
/* Scanlines geben den Röhrenlook */
.screen::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 4px);
}
.menu-box{
  position:relative; z-index:1; background:var(--panel);
  padding:26px 30px; width:min(470px,88vw); text-align:center;
  max-height:86vh; overflow:auto; image-rendering:pixelated;
  box-shadow:
     0 -4px 0 0 var(--panel),  0 4px 0 0 var(--panel),
    -4px 0 0 0 var(--panel),   4px 0 0 0 var(--panel),
     0 -8px 0 0 var(--line),   0 8px 0 0 var(--line),
    -8px 0 0 0 var(--line),    8px 0 0 0 var(--line),
     0 -12px 0 0 #080b12,      0 12px 0 0 #080b12,
    -12px 0 0 0 #080b12,      12px 0 0 0 #080b12;
}
.menu-box::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 4px 4px 0 rgba(255,255,255,.05), inset -4px -4px 0 rgba(0,0,0,.38);
}
.menu-box.wide{width:min(740px,88vw)}
#logo-holder{margin:-4px 0 6px;display:flex;justify-content:center}
/* Breiten sind Vielfache der Logobreite (200 px): bei krummen Faktoren wird
   aus einem Pixel mal zwei, mal drei Bildschirmpixel – der Schriftzug wirkt
   dann ausgefranst statt gestochen. */
#logo{image-rendering:pixelated;width:600px;max-width:100%;height:auto}
.tagline{color:var(--dim);margin-bottom:20px;font-size:12px;letter-spacing:1px}
h2{font-size:20px;margin-bottom:16px;letter-spacing:3px;text-shadow:2px 2px 0 #080b12}
h3{font-size:13px;margin:10px 0 6px;color:var(--acc2);letter-spacing:1px}
.menu-btns{display:flex;flex-direction:column;gap:9px}
/* Nebenpunkte nebeneinander – hält den Menükasten kurz genug fürs Bild.
   Die beiden Hauptknöpfe tauschen je nach Spielstand die Reihenfolge (order 0
   und 1), deshalb brauchen Raster und Kontozeile feste Plätze dahinter. */
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.menu-btns > .menu-grid{order:2}
.menu-btns > .account{order:3}
#menu .tagline{margin-bottom:14px}
/* Der Kasten des Hauptmenüs ist breiter als die übrigen: er richtet sich nach
   dem Logo, nicht nach den Knöpfen. Die bleiben in ihrer alten Breite mittig
   darunter – über die ganze Kastenbreite gezogen sähen sie wie Balken aus. */
#menu .menu-box{padding:20px 28px;width:min(660px,92vw)}
#menu .menu-btns{width:100%;max-width:430px;margin:0 auto}
/* Niedrige Fenster (kleine Notebooks, verkleinerte Browser): Logo und
   Abstände schrumpfen, damit nichts scrollen muss. */
@media (max-height:820px){
  #logo{width:400px}
  #menu .tagline{margin-bottom:10px;font-size:11px}
  #menu .menu-box{padding:14px 26px}
  #menu .menu-btns{gap:7px}
  #menu .account{padding:8px 0;margin:2px 0}
  #menu .version{margin-top:10px}
}
@media (max-height:680px){
  #logo{width:300px}
  #menu .btn.big{padding:9px 13px;font-size:13px}
}

/* ---------- Rückfrage im Spielstil ---------- */
.ask-wrap{
  position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;
  background:rgba(6,9,16,.66);
}
.menu-box.ask{width:min(420px,90vw);padding:22px 24px}
.menu-box.ask h2{font-size:17px;margin-bottom:10px}
.ask-text{line-height:1.6;margin-bottom:4px;font-size:12px}
.menu-box.ask .row{margin-top:16px}
.menu-box.ask .row .btn{flex:1}
/* Der folgenreiche Knopf ist schon vor dem Überfahren als solcher erkennbar */
.menu-box.ask .btn.danger{color:var(--bad);box-shadow:
  inset 3px 3px 0 rgba(255,255,255,.07), inset -3px -3px 0 rgba(0,0,0,.45),
  0 -3px 0 0 #5e3040, 0 3px 0 0 #5e3040, -3px 0 0 0 #5e3040, 3px 0 0 0 #5e3040}
.menu-box.ask .btn.danger:hover{background:#4a2530;color:#ff9a9c}
.menu-box.ask .btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.version{margin-top:18px;color:#5d6b8a;font-size:11px;letter-spacing:1px}

/* ---------- Konto & Cloud ---------- */
.account{display:flex;flex-direction:column;gap:6px;align-items:stretch;
  margin:4px 0;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Der Anmeldeknopf steht mitten in der Knopfreihe und soll auffallen */
.btn.google{display:flex;align-items:center;justify-content:center;gap:10px}
.btn.google .g{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;background:#fff;color:#4285f4;font-weight:700;font-size:15px;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.18);
}
.btn.google:hover:not(:disabled){background:#2f4a76;color:#fff}
.acc-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.ok{color:var(--acc)} .warn{color:var(--warn)}
.sync-row{border:2px solid var(--line);background:var(--panel2);padding:10px 12px;margin-bottom:10px;text-align:left}
.sync-row .name{letter-spacing:1px;margin-bottom:6px}
.sync-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
@media(max-width:640px){.sync-cols{grid-template-columns:1fr}}
.sync-side{border:1px solid var(--line);background:var(--slot);padding:7px 9px}
.sync-side.vor{border-color:var(--acc)}
.sync-side .nm{font-size:11px;color:var(--acc2);letter-spacing:1px}
.sync-side .meta{color:var(--dim);font-size:11px;margin-top:3px;line-height:1.5}
#sync-ui .btn.big{margin-top:6px}

/* Pixelknopf: harte Kanten, Licht oben links, Schatten unten rechts */
.btn{
  position:relative; background:var(--panel2); color:var(--text); border:none;
  padding:9px 13px; cursor:pointer; font:inherit; letter-spacing:1px;
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,.09),
    inset -3px -3px 0 rgba(0,0,0,.45),
    0 -3px 0 0 var(--line), 0 3px 0 0 var(--line),
    -3px 0 0 0 var(--line), 3px 0 0 0 var(--line);
}
.btn:hover:not(:disabled){background:#33415f;color:#fff}
.btn:active:not(:disabled){
  transform:translate(2px,2px);
  box-shadow:
    inset 3px 3px 0 rgba(0,0,0,.35),
    inset -3px -3px 0 rgba(255,255,255,.05),
    0 -3px 0 0 var(--line), 0 3px 0 0 var(--line),
    -3px 0 0 0 var(--line), 3px 0 0 0 var(--line);
}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.big{padding:12px 15px;font-size:14px}
.btn.tiny{padding:3px 8px;font-size:11px;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.08), inset -2px -2px 0 rgba(0,0,0,.4),
    0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line)}
.btn.danger:hover{background:#4a2530;color:var(--bad)}
.btn.go{color:var(--acc)}
.dim{color:var(--dim)} .small{font-size:11px} .mini{font-size:11px;color:var(--dim)}

.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:left;margin-bottom:16px}
.help-grid ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.help-grid li{color:var(--dim);line-height:1.45}
.help-grid b{color:var(--text)}
@media(max-width:700px){.help-grid{grid-template-columns:1fr}}

.opt{display:flex;align-items:center;gap:12px;padding:7px 4px;border-bottom:1px solid var(--line);text-align:left;font-size:12px}
.opt label{flex:1;color:var(--dim)}
.opt input[type=range]{width:180px;accent-color:var(--acc)}
.opt input[type=checkbox]{width:16px;height:16px;accent-color:var(--acc)}
.opt select{background:var(--slot);color:var(--text);border:2px solid var(--line);padding:5px;font:inherit}
#options .btn.big{margin-top:18px}

/* ---------- Spielstände ---------- */
.slot{
  display:flex;align-items:center;gap:12px;text-align:left;
  border:2px solid var(--line);background:var(--panel2);padding:10px 12px;margin-bottom:8px;
}
.slot .info{flex:1}
.slot .name{letter-spacing:1px}
.slot .meta{color:var(--dim);font-size:11px;margin-top:3px}
.slot .cloudmark{color:var(--acc2)}
.slot.auto{border-color:#3a4a6b}
#slots .btn.big{margin-top:10px}

/* Truhe und Station legen sich nur halbdurchsichtig über die Welt – man soll
   sehen, wo man gerade steht. */
#chest-ui,#station-ui{background:rgba(6,9,16,.62)}
#chest-ui::after,#station-ui::after{opacity:.5}

/* ---------- Verarbeitungsstation ---------- */
.st-flow{display:grid;grid-template-columns:1fr 150px 1fr;gap:12px;align-items:start;margin:10px 0 4px}
.st-col{text-align:left}
.st-mid{display:flex;flex-direction:column;align-items:center;gap:5px;padding-top:30px}
.st-arrow{color:var(--dim);font-size:16px}
/* Hochkant am Handy passen drei Spalten nicht nebeneinander – dann
   untereinander, und der Pfeil zeigt nach unten. Muss hinter den Grundregeln
   stehen: gleiche Spezifität, es gewinnt die spätere. */
@media(max-width:640px){
  .st-flow{grid-template-columns:1fr;gap:8px}
  .st-mid{padding-top:0;flex-direction:row;gap:10px;width:100%}
  .st-mid .st-arrow{transform:rotate(90deg)}
  .st-mid .st-prog{flex:1}
}
.tiny-grid{grid-template-columns:repeat(4,1fr);gap:4px}
.tiny-grid.two{grid-template-columns:repeat(2,44px)}
.st-prog,.st-burn{width:100%;height:10px;background:var(--slot);border:2px solid var(--line);position:relative}
.st-burn{height:8px;margin-top:6px}
.st-prog span,.st-burn span{position:absolute;inset:0;width:0;transition:width .12s linear}
#st-progbar{background:var(--acc)}
#st-burnbar{background:var(--warn)}
#st-state.ok{color:var(--acc)} #st-state.warn{color:var(--warn)}
#st-inv{grid-template-columns:repeat(10,1fr);max-height:24vh;margin-bottom:6px}
/* Was die Station gebrauchen kann, hebt sich im Inventar ab */
#st-inv .slotbox.usable{border-color:#4a6b58}
#st-book{text-align:left;margin:4px 0 12px}
#st-book summary{cursor:pointer;color:var(--acc2);padding:5px 0;letter-spacing:1px}
#st-book .list{max-height:26vh;margin-top:6px}
#station-ui h3{margin:8px 0 5px}

/* ---------- Spiel-Layout ---------- */
#game{display:flex;height:100vh;width:100vw}
#stage{flex:1 1 80%;position:relative;background:#050810;overflow:hidden;display:flex;align-items:center;justify-content:center}
#view{image-rendering:pixelated;image-rendering:crisp-edges;display:block;cursor:crosshair;touch-action:none}
#side{
  flex:0 0 20%; min-width:270px; max-width:400px;
  background:var(--panel);border-left:2px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
}
/* Eingeklappt: die Karte bekommt die ganze Breite */
#game.side-off #side{display:none}
#game:not(.side-off) #side-open{display:none}
.tab.tabx{flex:0 0 30px;font-size:16px;line-height:1}
.tab.tabx:hover{color:var(--acc)}

#hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:8px;pointer-events:none}
#hud button{pointer-events:auto}
#hud-left{display:flex;gap:6px;flex-wrap:wrap}
#hud-right{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-content:flex-start}
.chip{background:rgba(10,14,24,.82);border:1px solid var(--line);padding:3px 8px;font-size:11px;color:var(--dim)}
.chip b{color:var(--text)}

/* ---------- Dungeon-Countdown ----------
   Die wichtigste Zahl auf dem Bildschirm, solange man drin ist. */
#dungeon-bar{
  position:absolute;top:44px;left:50%;transform:translateX(-50%);
  background:rgba(12,6,22,.9);border:2px solid #5b2c9c;padding:6px 14px 8px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  pointer-events:none;min-width:210px;
  box-shadow:0 0 0 2px rgba(143,90,214,.25);
}
#dungeon-bar .dg-name{font-size:10px;letter-spacing:2px;color:#cba6ff}
#dungeon-bar .dg-time{font-size:22px;letter-spacing:3px;color:#e6ecf7;text-shadow:2px 2px 0 #080b12}
#dungeon-bar .dg-hint{font-size:10px;color:var(--dim);letter-spacing:1px}
#dungeon-bar .dg-bar{width:100%;height:4px;background:#241338;margin-top:4px}
#dungeon-bar .dg-bar span{display:block;height:100%;background:#8f5ad6}
#dungeon-bar.knapp{border-color:var(--warn);box-shadow:0 0 0 2px rgba(245,192,78,.25)}
#dungeon-bar.knapp .dg-time{color:var(--warn)}
#dungeon-bar.knapp .dg-bar span{background:var(--warn)}
#dungeon-bar.kritisch{border-color:var(--bad);box-shadow:0 0 0 2px rgba(242,104,107,.3);animation:dgpuls .9s infinite}
#dungeon-bar.kritisch .dg-time{color:var(--bad)}
#dungeon-bar.kritisch .dg-bar span{background:var(--bad)}
@keyframes dgpuls{0%,100%{opacity:1}50%{opacity:.62}}
@media (max-height:520px){
  #dungeon-bar{top:34px;padding:3px 10px 5px;min-width:160px}
  #dungeon-bar .dg-time{font-size:16px}
}

/* ---------- Meldungsverlauf ---------- */
#log{position:absolute;left:8px;bottom:8px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;z-index:6}
.log-btns{display:flex;gap:4px}
#log-toggle{position:relative}
#log-toggle.offen,#ctl-toggle.offen{color:var(--acc);border-color:var(--acc)}
/* Punkt zeigt an, dass seit dem letzten Öffnen etwas dazugekommen ist */
#log-toggle.neu::after{content:'';position:absolute;top:-2px;right:-2px;width:5px;height:5px;background:var(--acc)}
#log-list{
  width:min(340px,42vw);max-height:38vh;overflow-y:auto;
  background:rgba(10,14,24,.93);border:1px solid var(--line);padding:5px;
  display:flex;flex-direction:column;gap:2px;
}
/* Steuerungsübersicht: gleiche Stelle, eigener Kasten */
#ctl-list{
  width:min(400px,60vw);max-height:56vh;overflow-y:auto;
  background:rgba(10,14,24,.95);border:1px solid var(--line);padding:8px 10px;
}
.ctlrow{font-size:11.5px;line-height:1.5;color:var(--dim);padding:2px 0;border-bottom:1px solid rgba(44,55,80,.5)}
.ctlrow:last-child{border-bottom:none}
.ctlrow b{color:var(--text)}

/* ---------- Erste Schritte ---------- */
#tutorial{
  position:absolute;left:8px;top:44px;z-index:5;width:min(250px,40vw);
  background:rgba(10,14,24,.9);border:1px solid var(--line);padding:8px 10px;
}
#tutorial h4{font-size:11px;letter-spacing:1px;color:var(--acc2);margin:0 0 6px;display:flex;justify-content:space-between;align-items:center;gap:8px}
#tutorial.min{width:auto}
#tutorial.min h4{margin:0}
#tutorial .tutbtns{display:flex;gap:6px}
#tutorial h4 button{background:none;border:none;color:var(--dim);font:inherit;cursor:pointer;padding:0 2px}
#tutorial h4 button:hover{color:var(--text)}
.tutrow{display:flex;gap:7px;font-size:11px;line-height:1.5;color:var(--dim);align-items:baseline}
.tutrow .tick{flex:0 0 12px;color:var(--line)}
.tutrow.done{color:#5d6b8a;text-decoration:line-through}
.tutrow.done .tick{color:var(--acc);text-decoration:none}
.tutrow.aktiv{color:var(--text)}
.tutrow.aktiv .tick{color:var(--warn)}
body.touch #tutorial{top:52px}
/* Die Liste wächst mit den Schritten; ohne Deckel lief sie quer am Handy
   unten aus dem Bild. Am Finger endet sie über dem Steuerkreuz. */
#tutorial{max-height:50vh;overflow-y:auto}
body.touch #tutorial{max-height:calc(100vh - var(--b) * 3 - 96px)}
@media (max-height:520px){ #tutorial{width:min(210px,34vw);top:40px} }
.logrow{display:flex;gap:7px;font-size:11px;line-height:1.45;padding:2px 3px;border-left:2px solid var(--line)}
.logrow .lt{color:#5d6b8a;flex:0 0 42px}
.logrow .lm{color:var(--dim);flex:1}
.logrow.warn{border-left-color:var(--warn)} .logrow.warn .lm{color:#e3d0a4}
.logrow.bad{border-left-color:var(--bad)} .logrow.bad .lm{color:#f0b6b7}
@media (max-height:520px){ #log{left:6px;bottom:6px} #log-list{max-height:30vh;width:min(280px,50vw)} }
body.touch #log-toggle{padding:8px 12px}

/* Meldungen oben mittig am Rand – über der Hotbar verdeckten sie beim
   Sammeln ständig genau die Plätze, um die es gerade ging. */
#toasts{position:absolute;left:50%;transform:translateX(-50%);top:calc(38px + var(--st));display:flex;flex-direction:column;gap:5px;align-items:center;pointer-events:none}
/* Im Dungeon steht an dieser Stelle der Countdown – Meldungen rutschen darunter */
#dungeon-bar:not(.hidden) ~ #toasts{top:calc(122px + var(--st))}
.toast{background:rgba(10,14,24,.9);border:1px solid var(--line);border-left:3px solid var(--acc);padding:5px 12px;font-size:12px;animation:pop .25s}
.toast.warn{border-left-color:var(--warn)} .toast.bad{border-left-color:var(--bad)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1}}

/* ---------- Leben ---------- */
#hearts{
  position:absolute;bottom:66px;left:50%;transform:translateX(-50%);
  display:flex;gap:1px;pointer-events:none;
  background:rgba(10,14,24,.78);border:1px solid var(--line);padding:3px 5px;
}
#hearts .heart canvas{width:15px;height:15px;image-rendering:pixelated;display:block}
#hearts .heart.leer{opacity:.75}
#hearts.kritisch{border-color:var(--bad);animation:hzpuls 1s infinite}
@keyframes hzpuls{0%,100%{opacity:1}50%{opacity:.6}}
@media (max-height:520px){ #hearts{bottom:50px;padding:2px 4px} #hearts .heart canvas{width:12px;height:12px} }

#buffs{
  position:absolute;bottom:92px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;pointer-events:none;
}
.buff{
  display:flex;align-items:center;gap:5px;
  background:rgba(10,14,24,.88);border:1px solid var(--line);border-bottom:2px solid var(--acc);
  padding:3px 8px 3px 5px;font-size:11px;
}
.buff canvas{width:18px;height:18px;image-rendering:pixelated}
.buff .nm{color:var(--text);letter-spacing:1px}
.buff .tm{color:var(--acc)}
.buff.low{border-bottom-color:var(--warn)} .buff.low .tm{color:var(--warn)}

#hotbar{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;gap:4px;background:rgba(10,14,24,.85);padding:5px;border:1px solid var(--line);
}
.hot{
  width:46px;height:46px;background:var(--slot);border:2px solid var(--line);
  position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.hot.sel{border-color:var(--acc);box-shadow:0 0 0 2px rgba(110,231,160,.25)}
.hot .key{position:absolute;top:1px;left:2px;font-size:9px;color:#63739a}
.hot .cnt{position:absolute;bottom:0px;right:2px;font-size:10px;text-shadow:1px 1px 0 #000}

/* ---------- Sidebar ---------- */
.tabs{display:flex;border-bottom:2px solid var(--line);flex:0 0 auto}
.tab{flex:1;background:none;border:none;color:var(--dim);padding:10px 4px;cursor:pointer;font:inherit;letter-spacing:1px}
.tab.active{color:var(--acc);box-shadow:inset 0 -2px 0 var(--acc);background:var(--panel2)}
/* „Compendium“ ist deutlich länger als „Lexikon“; ohne das rutscht der
   Einklapp-Knopf rechts aus der Leiste. Nur im Englischen enger setzen. */
html[lang=en] .tabs .tab{letter-spacing:0;padding-left:2px;padding-right:2px;min-width:0}
.subtabs{display:flex;gap:4px;margin-bottom:8px}
.subtab{flex:1;background:var(--panel2);border:2px solid var(--line);color:var(--dim);padding:5px;cursor:pointer;font:inherit;font-size:11px}
.subtab.active{color:var(--acc);border-color:var(--acc)}

.panel{display:none;flex:1;flex-direction:column;padding:10px;overflow:hidden;min-height:0}
.panel.active{display:flex}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;letter-spacing:1px}
.row{display:flex;gap:6px;margin-top:8px}
.row .btn{flex:1}

.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;overflow-y:auto;align-content:start;scrollbar-width:thin}
/* Am Finger liegt die Rollleiste über der letzten Spalte und verdeckt die
   Stückzahl – ein Streifen Platz daneben genügt. */
body.touch .grid{padding-right:6px}
#chest-grid,#chest-inv{grid-template-columns:repeat(5,1fr);max-height:44vh}
.slotbox{
  aspect-ratio:1;background:var(--slot);border:2px solid var(--line);
  position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.slotbox:hover{border-color:var(--acc2)}
.slotbox.sel{border-color:var(--acc);box-shadow:0 0 0 2px rgba(110,231,160,.22)}
/* touch-action: doppeltes Tippen darf nicht zoomen, wischen soll aber weiter
   scrollen – das Ziehen hält der Zeigercode selbst an. */
.slotbox,.hot{touch-action:manipulation;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.slotbox.voll,.hot.voll{cursor:grab}
.slotbox.dragging,.hot.dragging{opacity:.35;cursor:grabbing}
.slotbox.drag-over,.hot.drag-over{border-color:var(--acc);background:#1a2a22;box-shadow:0 0 0 2px rgba(110,231,160,.35)}
.slotbox *,.hot *{pointer-events:none}

/* Angehoben: der Stapel hängt am Finger und wartet auf Ziehen oder Teilen */
.slotbox.armed,.hot.armed{border-color:var(--acc2);transform:scale(1.08);z-index:2;
  box-shadow:0 0 0 2px rgba(122,162,247,.35)}
/* Der Balken zeigt an, dass gleich der Mengenwähler kommt – ohne ihn hält
   man ins Leere und weiß nicht, ob die Geste ankam. */
.slotbox.teilbar::before,.hot.teilbar::before{
  content:'';position:absolute;left:0;bottom:0;height:3px;background:var(--acc);
  animation:teilbar .43s linear forwards;pointer-events:none;
}
@keyframes teilbar{from{width:0}to{width:100%}}

/* Der Geist am Finger: liegt über allem und fängt selbst nichts ab */
.drag-ghost{
  position:fixed;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;z-index:200;
  background:var(--slot);border:2px solid var(--acc);pointer-events:none;opacity:.92;
  display:flex;align-items:center;justify-content:center;
}
.drag-ghost canvas{image-rendering:pixelated;width:78%;height:78%}
.drag-ghost .cnt{position:absolute;bottom:0;right:2px;font-size:11px;text-shadow:1px 1px 0 #000}

.slot-hint{font-size:10px;line-height:1.4;margin:5px 0 0;color:var(--dim)}
.slotbox .cnt{position:absolute;bottom:0;right:2px;font-size:10px;text-shadow:1px 1px 0 #000}
/* Seltene Gegenstände funkeln – Pixelkreuz statt weichem Schein */
.slotbox.rare,.hot.rare{border-color:#6a5aa0}
.slotbox.rare::after,.hot.rare::after{
  content:'';position:absolute;top:5px;right:6px;width:2px;height:2px;background:#fff;
  box-shadow:0 -2px 0 #fff,0 2px 0 #fff,-2px 0 0 #fff,2px 0 0 #fff,0 0 0 #fff;
  opacity:0;animation:sparkle 2.4s var(--d,0s) infinite;pointer-events:none;
}
@keyframes sparkle{0%,72%{opacity:0}80%{opacity:1}86%{opacity:.35}92%{opacity:.8}100%{opacity:0}}
.slotbox canvas,.hot canvas{image-rendering:pixelated;width:78%;height:78%}

/* Debug-Zeile im Inventar – bewusst andersfarbig, damit klar ist, dass das
   kein regulärer Spielinhalt ist */
.row.debug{gap:4px;border-top:1px dashed var(--warn);padding-top:8px;margin-top:6px}
.row.debug select{flex:1;min-width:0;background:var(--slot);color:var(--text);
  border:2px solid var(--warn);padding:6px;font:inherit;font-size:11px}
.row.debug input{width:52px;background:var(--slot);color:var(--text);
  border:2px solid var(--warn);padding:6px;font:inherit;font-size:11px}
.row.debug .btn{flex:0 0 auto;color:var(--warn)}
body.touch .row.debug select,body.touch .row.debug input{padding:10px;font-size:12px}

.detail{margin-top:10px;padding:9px;background:var(--slot);border:1px solid var(--line);min-height:74px;color:var(--dim);font-size:11.5px;line-height:1.5}
.detail b{color:var(--text);font-size:13px}
.detail .tagline2{color:var(--acc2)}

/* Vier Felder in einer Zeile werden zu eng – lieber umbrechen lassen */
.row.debug{flex-wrap:wrap}
.debug #debug-search{flex:1 0 100%;background:var(--slot);border:2px solid var(--line);
  color:var(--text);padding:5px;font:inherit}
.debug select{flex:1 1 55%;min-width:0}
.debug #debug-n{flex:0 0 52px;background:var(--slot);border:2px solid var(--line);
  color:var(--text);padding:5px;font:inherit}
.debug #debug-give{flex:1 1 auto}
#newgame .search{margin-top:12px}
#newgame .row{margin-top:10px}
#newgame #seed-hint{margin-top:10px;min-height:16px}
#newgame .btn.big{margin-top:14px}
#seedchip{letter-spacing:1px}
.search{width:100%;background:var(--slot);border:2px solid var(--line);color:var(--text);padding:6px;font:inherit;margin-bottom:8px;flex:0 0 auto}
.search:focus{outline:none;border-color:var(--acc2)}
.list{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:5px;min-height:0}
.recipe{border:2px solid var(--line);background:var(--panel2);padding:7px;cursor:pointer}
.recipe:hover{border-color:var(--acc2)}
.recipe.can{border-left:3px solid var(--acc)}
.recipe.cannot{opacity:.55}
.recipe .top{display:flex;align-items:center;gap:7px}
.recipe .top canvas{width:22px;height:22px;image-rendering:pixelated}
.recipe .nm{flex:1}
.recipe .ing{margin-top:5px;font-size:11px;color:var(--dim);display:flex;flex-wrap:wrap;gap:6px}
.recipe .ing span.ok{color:var(--acc)} .recipe .ing span.no{color:var(--bad)}

.lexrow{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel2);padding:5px 7px}
.lexrow canvas{width:26px;height:26px;image-rendering:pixelated}
.lexrow .nm{flex:1}
.lexrow .tg{font-size:10px;color:var(--dim)}

.chest-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0}
@media(max-width:640px){.chest-cols{grid-template-columns:1fr}}

/* ---------- Mengenwähler (Stapel teilen) ---------- */
.amount-wrap{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(6,9,16,.6)}
.amount{background:var(--panel);padding:18px 20px;width:min(340px,90vw);text-align:center;
  box-shadow:0 -4px 0 0 var(--panel),0 4px 0 0 var(--panel),-4px 0 0 0 var(--panel),4px 0 0 0 var(--panel),
             0 -8px 0 0 var(--line),0 8px 0 0 var(--line),-8px 0 0 0 var(--line),8px 0 0 0 var(--line)}
.amount-head{display:flex;align-items:center;justify-content:center;gap:9px;letter-spacing:1px}
.amount-head canvas{width:26px;height:26px;image-rendering:pixelated}
.amount-main{display:flex;align-items:center;gap:10px;margin:10px 0 8px}
.amount-n{flex:1;font-size:30px;color:var(--acc);letter-spacing:2px}
.amount-step{width:52px;padding:12px 0;font-size:20px;line-height:1;flex:none;touch-action:manipulation}
/* Eigener Regler: der Systemgriff ist am Finger zu klein zum Treffen */
.amount-range{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:none;
  touch-action:none;cursor:pointer}
.amount-range::-webkit-slider-runnable-track{height:8px;background:var(--slot);border:2px solid var(--line)}
.amount-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;
  background:var(--acc);border:2px solid #0d1018}
.amount-range::-moz-range-track{height:8px;background:var(--slot);border:2px solid var(--line)}
.amount-range::-moz-range-thumb{width:22px;height:22px;border-radius:0;background:var(--acc);border:2px solid #0d1018}
.amount-quick{display:flex;gap:5px;margin-top:8px}
.amount-quick .btn{flex:1;padding:8px 4px;font-size:11px}
.amount .row{margin-top:12px}

/* ---------- Größere Ziele am Finger ----------
   Menü, Inventar und Truhe werden angetippt, nicht angeklickt. */
body.touch .btn.big{padding:16px 15px;font-size:15px}
body.touch .btn{padding:12px 14px}
body.touch .menu-btns{gap:12px}
/* Feste Spaltenzahl × Mindestgröße ergab breitere Gitter, als die Leiste hat –
   die letzte Spalte lag halb außerhalb. So kommen so viele Spalten, wie
   wirklich passen. */
body.touch .grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px}
body.touch .slotbox{min-height:56px}
/* Truhe und Station geben ihren Gittern feste Spaltenzahlen vor – mit den
   großen Feldern am Finger ragten sie aus dem Kasten heraus. */
body.touch #chest-grid,body.touch #chest-inv,body.touch #st-inv{
  grid-template-columns:repeat(auto-fill,minmax(56px,1fr));
}
body.touch .tiny-grid{gap:6px}
body.touch .tab{padding:15px 4px;font-size:14px}
body.touch .subtab{padding:11px}
body.touch .search{padding:11px}
body.touch .lexrow{padding:9px 8px}
body.touch .recipe{padding:11px}
body.touch .slot{padding:13px 12px}
body.touch .opt{padding:13px 4px}
body.touch .opt input[type=checkbox]{width:24px;height:24px}
body.touch .opt select{padding:9px}
body.touch .amount-quick .btn{padding:13px 3px}
body.touch .amount-step{width:64px;padding:16px 0;font-size:24px}
body.touch .amount-range{height:38px}
body.touch .amount-range::-webkit-slider-thumb{width:36px;height:36px;margin-top:-16px}
body.touch .amount-range::-moz-range-thumb{width:36px;height:36px}
body.touch .drag-ghost{width:62px;height:62px;margin:-42px 0 0 -31px}
body.touch .slot-hint{font-size:11px}
/* Die kleinen Kopfzeilenknöpfe (Inventar, Menü, Verlauf, Steuerung) waren am
   Finger nur halb so hoch wie ein Fingerkuppenziel – am Handy bekommen sie
   dieselbe Höhe wie die Steuerknöpfe. */
body.touch .btn.tiny{padding:9px 12px;font-size:12px}
/* Hochkant ist die Seitenleiste bildschirmbreit – da passen große Felder */
@media (orientation:portrait){
  body.touch .grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}
  body.touch .slotbox{min-height:60px}
  /* Auf 390 px blieben von 88vw nach dem Innenabstand nur 283 px für den
     Inhalt – zu wenig für fünf Felder samt Fugen. */
  body.touch .menu-box{padding:18px 14px;width:min(740px,96vw)}
  body.touch .menu-box.wide{width:min(740px,96vw)}
  /* Der Innenabstand des Hauptmenüs hängt an einer ID und schlägt die Regel
     darüber – sonst bleiben für das Logo 318 statt 320 px, und die knappe
     Unterschreitung reicht schon für krumme Pixel. */
  body.touch #menu .menu-box{padding:18px 14px;width:min(660px,96vw)}
}
/* Quer am Handy fehlt die Höhe für eine Knopfsäule. Statt die Knöpfe wieder
   klein zu machen, stehen sie zu zweit nebeneinander – so bleiben sie groß.
   Alle Knöpfe stehen damit im Bild; auf sehr flachen Geräten (unter ~400 px
   Höhe) rutscht die Versionszeile unter die Kante, der Kasten scrollt dann.
   Das Logo hier weiter zu verkleinern wäre der schlechtere Tausch. */
@media (orientation:landscape) and (max-height:560px){
  /* Die Nebenpunkte stehen ohnehin schon zweispaltig (.menu-grid) – hier
     reicht es, Abstände und Logo zu straffen. */
  body.touch .menu-btns{gap:6px}
  body.touch .menu-grid{gap:6px}
  body.touch .account{margin:0;padding:8px 0}
  body.touch .menu-box{padding:9px 18px;width:min(620px,94vw);max-height:96vh}
  /* Das Hauptmenü setzt Breite und Innenabstand über eine ID – ohne dieselbe
     Spezifität bleibt hier der großzügige Abstand stehen, und das Menü muss
     quer am Handy scrollen. */
  body.touch #menu .menu-box{padding:9px 18px;width:min(620px,94vw)}
  body.touch #logo{width:200px}
  body.touch .tagline{margin-bottom:7px;font-size:10px}
  body.touch .version{margin-top:6px;font-size:10px}
  body.touch .account{padding:6px 0;gap:3px}
  body.touch .account .small{font-size:9px}
  body.touch #logo-holder{margin:0}
  body.touch .btn.big{padding:13px 12px;font-size:14px}
  body.touch .account .small{font-size:10px}
}

::-webkit-scrollbar{width:9px} ::-webkit-scrollbar-track{background:var(--slot)}
::-webkit-scrollbar-thumb{background:var(--line)} ::-webkit-scrollbar-thumb:hover{background:#3d4d6e}

/* ================= Touch-Bedienung (nur auf Geräten ohne Maus) =================
   Alle Maße hängen an --b (Knopfgröße) und an den Sicherheitsabständen des
   Geräts. Ohne env(safe-area-*) liegen die Knöpfe auf einem iPhone unter der
   Home-Leiste und der abgerundeten Ecke – genau das schnitt sie ab.
   Die Variablen stehen an :root, damit auch Hotbar, Buffs und HUD sie sehen. */
:root{
  --b:52px;                                  /* Kantenlänge eines Steuerknopfs */
  --sl:env(safe-area-inset-left,0px);
  --sr:env(safe-area-inset-right,0px);
  --sb:env(safe-area-inset-bottom,0px);
  --st:env(safe-area-inset-top,0px);
  --band:0px;                                /* Höhe des Steuerbands unten */
}
#touch{display:none}
body.touch #touch{display:block}
/* Sanfter Abdunkler unter der Steuerung – sonst verschwimmen die Knöpfe
   über hellen Inseln. Nur dort, wo das Band wirklich steht. */
body.touch #touch::before{
  content:'';position:absolute;left:0;right:0;bottom:0;pointer-events:none;
  height:calc(var(--band) + var(--b) * 1.6 + var(--sb) + 24px);
  background:linear-gradient(to top,rgba(6,9,16,.55),rgba(6,9,16,0));
}
#touch button{
  background:rgba(20,26,38,.82);color:var(--text);border:2px solid var(--line);
  font:inherit;font-size:12px;letter-spacing:1px;line-height:1.15;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.07), inset -2px -2px 0 rgba(0,0,0,.45);
}
#touch button.hit{background:rgba(46,66,52,.92);border-color:var(--acc);color:#fff}
#touch button small{font-size:9px;color:var(--dim);letter-spacing:0}
#touch button.hit small{color:#cfe9d8}

#pad,#acts{position:absolute;bottom:calc(12px + var(--sb));display:grid;gap:3px}
#pad{left:calc(12px + var(--sl));grid-template-columns:repeat(3,var(--b));grid-template-rows:repeat(3,var(--b))}
#pad .up{grid-area:1/2} #pad .left{grid-area:2/1} #pad .right{grid-area:2/3} #pad .down{grid-area:3/2}
#acts{right:calc(12px + var(--sr));grid-template-columns:auto auto;justify-items:stretch}
#acts [data-tap="drop"]{grid-column:1/span 2;height:calc(var(--b) * .7)}
#acts [data-tap="place"]{width:calc(var(--b) * 1.15);height:calc(var(--b) * 1.4)}
#acts [data-hold="use"]{width:calc(var(--b) * 1.75);height:calc(var(--b) * 1.4)}

/* Hotbar sitzt zwischen den beiden Blöcken und darf nie darunter geraten.
   Reicht der Platz nicht, wird sie scrollbar statt abgeschnitten. */
body.touch #hotbar{
  bottom:calc(6px + var(--band) + var(--sb));
  max-width:calc(100vw - var(--sl) - var(--sr) - var(--gap, 0px));
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;justify-content:flex-start;
}
body.touch #hotbar::-webkit-scrollbar{display:none}
body.touch #buffs{bottom:calc(52px + var(--band) + var(--sb))}
body.touch #toasts{top:calc(44px + var(--st))}
/* Verlauf und Steuerung stehen am Finger nicht mehr unten links – dort liegt
   in beiden Lagen das Steuerkreuz und verschluckte die Knöpfe „links“ und
   „runter“. Sie ziehen in die freie Nische über dem Aktionsblock; der ist
   2,02 b + 3 px hoch, darüber bleibt Platz. */
body.touch #log{
  left:auto;right:calc(10px + var(--sr));align-items:flex-end;
  bottom:calc(var(--sb) + var(--b) * 2.02 + 22px);
}
body.touch #hud{padding:calc(6px + var(--st)) calc(6px + var(--sr)) 6px calc(6px + var(--sl))}

/* Quer: Steuerkreuz und Aktionen flankieren die Hotbar, daher der Abstand */
@media (orientation:landscape){
  body.touch{--gap:calc(var(--b) * 6.6 + 48px)}
}
/* Hochkant: eigenes Steuerband unten, darüber stapeln sich Hotbar, Herzen und
   Effekte. Damit ist auch Hochkant vollwertig spielbar.

   Die Knopfgröße wird gerechnet statt geraten: Steuerkreuz (3b + 6 px Fugen)
   und Aktionsblock (2,9b + 3 px) stehen nebeneinander, dazu 12 px Rand je
   Seite und 16 px Luft dazwischen – zusammen 5,9b + 46 px. Vorher standen
   beide bei festen 58 px auf einem 375-px-Gerät exakt Kante an Kante. */
@media (orientation:portrait){
  body.touch{
    --b:min(58px, (100vw - var(--sl) - var(--sr) - 46px) / 5.9);
    --band:calc(var(--b) * 3 + 22px); --gap:24px;
  }
  /* Zehn Plätze passen nebeneinander auf kein Handy – zweireihig bleiben sie
     groß, statt hinter einem Scrollstreifen zu verschwinden. */
  body.touch #hotbar{
    bottom:calc(var(--band) + var(--sb) + 6px);
    display:grid;grid-template-columns:repeat(5,46px);gap:4px;
    width:auto;max-width:none;overflow:visible;justify-content:center;
  }
  /* Herzen und Effekte lagen bisher mitten auf dem Steuerkreuz */
  body.touch #hearts{bottom:calc(var(--band) + var(--sb) + 118px)}
  body.touch #buffs{bottom:calc(var(--band) + var(--sb) + 150px)}

  /* Die Nische über dem Aktionsblock ist hochkant nur so breit wie dieser –
     die beiden Knöpfe müssen sich daran halten, sonst ragen sie ins Kreuz. */
  body.touch #log{max-width:calc(var(--b) * 2.9 + 3px)}
  body.touch .log-btns{justify-content:flex-end}
  body.touch .log-btns .btn.tiny{
    flex:0 1 auto;min-width:0;padding:8px 7px;font-size:11px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  /* Der Punkt für neue Meldungen sitzt sonst außerhalb und würde vom
     overflow:hidden oben abgeschnitten */
  body.touch #log-toggle.neu::after{top:2px;right:2px}
  body.touch #log-list,body.touch #ctl-list{width:min(340px,calc(100vw - 20px))}

  /* Oben ist hochkant wenig Breite: Meldungen unter die Kopfzeile, die
     Schrittliste darunter und breit genug, dass nicht jedes Wort umbricht. */
  body.touch #toasts{top:calc(var(--st) + 78px);z-index:7}
  /* Deckel: oben die Kopfzeile, unten Herzen und Hotbar über dem Steuerband */
  body.touch #tutorial{
    top:calc(var(--st) + 122px);width:min(330px,calc(100vw - 16px));
    max-height:calc(100vh - var(--band) - var(--st) - 275px);overflow-y:auto;
  }
  body.touch #hud-left .chip{font-size:10px;padding:3px 6px}
}
/* Auf schmalen Geräten wird die Nische über dem Aktionsblock so eng, dass die
   Beschriftungen sonst abgeschnitten würden – lieber eine Nummer kleiner und
   ohne Sperrung als „Steueru…“. */
@media (orientation:portrait) and (max-width:370px){
  body.touch .log-btns .btn.tiny{font-size:10px;padding:8px 5px;letter-spacing:0}
}

/* Quer am Handy blieb vom Inventargitter nur eine Reihe übrig: Reiter,
   Beschreibung und Knöpfe fraßen die Höhe. Hier bekommt das Gitter den Rest,
   alles andere wird gestrafft – Verschieben braucht sichtbare Felder. */
@media (orientation:landscape) and (max-height:520px){
  body.touch .tab{padding:9px 4px;font-size:12px}
  body.touch .panel{padding:7px}
  body.touch .panel-head{margin-bottom:5px;font-size:11px}
  body.touch #inv-grid{flex:1 1 auto;min-height:0}
  body.touch .slot-hint{font-size:10px;margin-top:4px}
  body.touch .detail{margin-top:5px;padding:6px;min-height:0;max-height:76px;overflow-y:auto;font-size:11px;line-height:1.35}
  body.touch #tab-inv .row{margin-top:5px}
  body.touch #tab-inv .row .btn{padding:9px 6px;font-size:12px}
}

/* Kleinere Knöpfe, wenn wenig Platz ist – aber nicht kleiner als eine
   Fingerkuppe. Quer liegt das Steuerkreuz neben der Hotbar statt darunter,
   deshalb ist die Höhe hier weniger knapp, als die alten 38 px nahelegten. */
@media (orientation:landscape) and (max-height:460px){ body.touch{--b:48px} }
@media (orientation:landscape) and (max-height:380px){ body.touch{--b:44px} }
/* Hochkant rechnet die Formel oben die Größe selbst aus – auf 320 px bleiben
   damit noch 46 px statt der früheren pauschalen 48 px mit Überlappung. */

/* Kompakte Hotbar auf niedrigen Fenstern (Handy quer) */
@media (max-height:520px){
  .hot{width:38px;height:38px}
  .hot .key{font-size:8px}
  #hotbar{gap:3px;padding:3px}
  .chip{font-size:10px;padding:2px 6px}
  .btn.tiny{padding:3px 6px;font-size:10px}
  /* Am Finger darf auch auf niedrigen Fenstern nichts unter ~32 px fallen */
  body.touch .btn.tiny{padding:7px 10px;font-size:11px}
}
/* 28 px waren am Finger kaum zu treffen; 34 px passen bei 812 px Breite immer
   noch ohne Scrollen zwischen Steuerkreuz und Aktionsblock. */
@media (max-height:400px){ .hot{width:34px;height:34px} }

/* Die Seitenleiste legt sich am Handy über die Karte, statt sie zu stauchen */
body.touch #side{
  position:absolute;top:0;right:0;bottom:0;z-index:40;
  width:min(320px,58vw);max-width:none;min-width:0;
  padding-right:var(--sr);padding-bottom:var(--sb);
}
@media (orientation:portrait){
  /* Hochkant wäre eine schmale Spalte unlesbar – also die ganze Fläche */
  body.touch #side{left:0;width:auto;border-left:none;padding-left:var(--sl)}
}
/* Vollbildflächen folgen der wirklich sichtbaren Höhe: 100vh ist auf iOS
   größer als das Fenster, dadurch rutschte alles Untere aus dem Bild. */
@supports (height:100dvh){
  #app,#game{height:100dvh}
}