/* Layout: Vollbild-Karte mit schwebendem HUD; Startbildschirm, Dialoge und Menü sind dunkle Pergamentblätter darüber. */
:root{
--ground:#0f1d1c;
--ink:#ece4d0;
--mute:#9db1a6;
--lamp:#e8ab4c;
--blood:#d96a52;
--glow:#73cdc4;
--rift:#b084ff;
/* Bildsprache Steampunk-Atlas (STIL.md), gleiche Werte wie STYLE_ATLAS.col in js/style.js: eine Bedeutung je Farbe */
--brass:#b88e4c; /* Messing: Fassung, Rang, Identität */
--steel:#7f898c; /* Stahl: Schutz, Panzer */
--paper:#e9dcc0; /* Papier */
--friend:#a9cf98; /* freundlich */
--caution:#e3bf6a; /* möglicherweise feindlich */
--warn:#ff6a45; /* akute Gefahr */
--tech:#7fe3d6; /* eigene Technik (Mer) */
/* Seltenheit von Gegenständen */
--r-common:#ece4d0;
--r-good:#82c78d;
--r-rare:#7eaae6;
--r-epic:#d9a6ea;
--r-relic:#f2cb70;
--line:rgba(236,228,208,.16);
--panel:rgba(13,26,25,.95);
/* Skillbaum (js/skilltree.js): Sektorfarben zurückhaltend, gelernt grünlich, Auswahl hell */
--sk-atk:#d9b36c;
--sk-move:#78c7bd;
--sk-ctrl:#d98f63;
--sk-sys:#9fb2d6;
--sk-build:#c9b98f;
--sk-on:#9fd6a8;
--sk-sel:#fff4dc;
--sk-bg:#0b1513;
--display:'Pirata One','UnifrakturCook',Georgia,serif;
--body:'Alegreya',Georgia,'Times New Roman',serif;
--ui:'Alegreya Sans','Trebuchet MS','Segoe UI',sans-serif;
color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:17px/1.45 var(--body);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
#fade{position:fixed;inset:0;background:var(--ground);opacity:0;pointer-events:none;transition:opacity .25s;z-index:40}#fade.on{opacity:1} /* Grenzübergang (js/border.js) */
#map{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
/* HUD */
.top{position:fixed;left:0;right:0;top:0;display:flex;gap:10px;align-items:flex-start;padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 0;pointer-events:none}
.stats{flex:1;min-width:0;max-width:340px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:grid;gap:6px}
.bar{position:relative;height:16px;border-radius:5px;background:rgba(236,228,208,.1);overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--blood);transition:width .15s}
.bar span{position:relative;display:block;text-align:center;font:700 12px/16px var(--ui);letter-spacing:.06em;text-shadow:0 1px 2px #000}
.bar.xp{height:5px}
.bar.xp i{background:var(--glow)}
.bar.chg{height:4px}.bar.chg i{background:var(--lamp);transition:width .1s}
.chips{display:flex;gap:12px;flex-wrap:wrap;font:700 12px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums}
.chips b{color:var(--lamp);font-weight:700}
#buffs{color:var(--glow)}
.icon{pointer-events:auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--panel);display:grid;place-content:center;gap:5px;padding:0}
.icon span{display:block;width:20px;height:2px;background:var(--ink);border-radius:1px}
.tracker{position:fixed;left:14px;top:calc(env(safe-area-inset-top,0px) + 104px);max-width:min(340px,calc(100% - 28px));display:flex;gap:10px;align-items:center;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px 12px 7px 10px}
.tracker .arr{flex:none;width:26px;height:26px}
.tracker .t{font:400 19px/1.1 var(--display);letter-spacing:.02em;display:block}
.tracker .d{font:700 12px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);display:block;margin-top:2px;font-variant-numeric:tabular-nums}
.qlog{position:fixed;left:14px;top:calc(env(safe-area-inset-top,0px) + 160px);display:grid;gap:4px;max-width:min(300px,calc(100% - 28px));pointer-events:auto}
.qlog button{display:block;text-align:left;background:rgba(13,26,25,.82);border:1px solid var(--line);border-left:3px solid var(--mute);border-radius:8px;padding:4px 10px;color:var(--ink)}
.qlog button.on{border-left-color:var(--lamp)}
.qlog b{display:block;font:700 12px var(--ui);letter-spacing:.04em}.qlog span{display:block;font:700 11px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums}
#toasts{position:fixed;left:14px;right:14px;top:max(calc(env(safe-area-inset-top,0px) + 168px),34vh);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 12px;font:700 14px var(--ui);letter-spacing:.03em;animation:tin .25s ease-out;text-align:center}
.toast.good{border-color:var(--glow)}
.toast.bad{border-color:var(--blood)}
.toast.gold{border-color:var(--lamp);color:var(--lamp)}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Steuerung */
#joy{position:fixed;left:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);width:128px;height:128px;border-radius:50%;border:1px solid var(--line);background:rgba(13,26,25,.5);touch-action:none}
#knob{position:absolute;left:37px;top:37px;width:54px;height:54px;border-radius:50%;background:rgba(232,171,76,.75);border:2px solid var(--lamp)}
.actions{position:fixed;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);width:200px;height:220px;pointer-events:none}
.actions .act{pointer-events:auto}
.act{position:absolute;border-radius:50%;border:2px solid var(--line);background:var(--panel);font:700 12px var(--ui);letter-spacing:.08em;text-transform:uppercase;overflow:hidden;padding:0;touch-action:none}
.act i{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.55)}
.act b{position:absolute;right:8px;top:6px;font-size:12px;color:var(--lamp)}
/* Hauptangriff mit Waffenbild, kleiner Kreis zum Wechseln zwischen Nah und Fern */
#btnAttack{right:0;bottom:0;width:84px;height:84px;border-color:var(--lamp);color:var(--lamp);font-size:9px;letter-spacing:.02em;display:grid;place-items:center;padding-top:6px}
.act .wpn{width:40px;height:40px;border-radius:6px;pointer-events:none}
#btnAttack span{position:relative;margin-top:-6px}
/* Kreise um die große Hieb-Taste: Schild links, Ausweichen oben, Fähigkeiten dazwischen und außen (Fernkampf feuert automatisch) */
#btnShield{right:106px;bottom:14px;width:56px;height:56px;border-color:var(--lamp);color:var(--lamp);font-size:10px}
#btnDodge{right:18px;bottom:114px;width:56px;height:56px;border-color:var(--ink);color:var(--ink);font-size:10px}
#btnShield.on,.slot.on{background:rgba(232,171,76,.25);border-color:var(--lamp)}
.pothud{pointer-events:auto;align-self:flex-start;margin-top:2px;background:var(--panel);border:1px solid var(--blood);color:var(--blood);border-radius:999px;padding:4px 10px;font:700 11px var(--ui);letter-spacing:.08em;text-transform:uppercase}
.pothud b{color:var(--ink)}
.mode-desktop .pothud{display:none}
#btnWhirl{right:84px;bottom:84px;width:50px;height:50px;border-color:var(--lamp);color:var(--lamp);font-size:11px}
#btnRain{right:69px;bottom:159px;width:48px;height:48px;border-color:var(--glow);color:var(--glow);font-size:11px}
#btnSk3{right:150px;bottom:116px;width:48px;height:48px;border-color:var(--rift);color:var(--rift);font-size:11px}
/* Steuerungsarten: Touch (Joystick, Rundtasten) oder Rechner (Leiste mit Zahlentasten) */
.mode-desktop #joy,.mode-desktop .actions,.mode-touch #hotbar{display:none}
.hotbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);display:flex;gap:6px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.55)}
.slot{position:relative;width:64px;height:64px;border-radius:8px;border:2px solid var(--line);background:rgba(236,228,208,.05);color:var(--ink);font:700 11px var(--ui);letter-spacing:.06em;text-transform:uppercase;overflow:hidden;padding:18px 2px 0;cursor:pointer}
.slot kbd{position:absolute;left:5px;top:3px;font:700 12px var(--ui);color:var(--mute)}
.slot b{position:absolute;right:6px;top:3px;font-size:12px;color:var(--lamp)}
.slot i{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.6);pointer-events:none}
.slot.def{width:56px;border-color:var(--ink);color:var(--ink)}
.slot.attack{width:112px;border-color:var(--lamp);color:var(--lamp);display:grid;grid-template-columns:40px 1fr;align-items:center;gap:4px;text-align:left;padding:14px 6px 4px}
.slot.attack .wpn{width:40px;height:40px;border-radius:6px}
.slot.attack.ranged{border-color:var(--glow);color:var(--glow)}
.slot.auto{cursor:default;opacity:.9;border-style:dashed}
.slot.attack span{font-size:10px;letter-spacing:.04em}.slot.attack small{font-size:9px;color:var(--mute);letter-spacing:.04em}#hbWhirl{border-color:var(--lamp);color:var(--lamp)}#hbRain{border-color:var(--glow);color:var(--glow)}#hbSk3{border-color:var(--rift);color:var(--rift)}#hbPotion{border-color:var(--blood);color:var(--blood)}
.slot.locked{opacity:.35;border-style:dashed;cursor:default}
.slot:hover:not(.locked){background:rgba(236,228,208,.12)}
.mode-desktop #btnTalk{bottom:calc(env(safe-area-inset-bottom,0px) + 104px)}
.mode-desktop #btnTalk::before{content:'E';display:inline-block;margin-right:8px;padding:0 6px;border:1px solid rgba(26,20,9,.5);border-radius:4px;font:700 12px var(--ui)}
.center{position:fixed;right:22px;top:calc(env(safe-area-inset-top,0px) + 132px);color:var(--lamp);font-size:20px;line-height:1}
#nbHud.dot::after{content:'';position:absolute;top:2px;right:2px;z-index:2;width:10px;height:10px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 2px var(--ground)}
#btnTalk{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 262px);max-width:calc(100% - 28px);background:var(--lamp);color:#1a1409;border:0;border-radius:999px;padding:10px 20px;font:700 15px var(--ui);letter-spacing:.04em;box-shadow:0 4px 18px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#btnTalk small{display:block;font:700 11px var(--ui);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
/* Bildschirme */
.screen{position:fixed;inset:0;background:var(--ground);overflow:auto;touch-action:pan-y;padding:calc(env(safe-area-inset-top,0px) + 28px) 20px calc(env(safe-area-inset-bottom,0px) + 32px);-webkit-user-select:text;user-select:text}
/* Startbild: Weltkarte mit dem Riss (img/start-map.webp, erzeugt von tools/art.py make_start_map) als feste Ebene hinter dem Inhalt, Schleier für Lesbarkeit */
#start::before{content:'';position:fixed;inset:0;background:#030707 url(../img/start-map.webp) 47% 22%/cover no-repeat;z-index:0} /* Weltkarte mit dem Riss (tools/art.py make_start_map) */
#start::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,8,10,.25) 0%,rgba(3,8,10,.15) 30%,rgba(8,15,14,.55) 62%,rgba(8,15,14,.8) 100%),radial-gradient(ellipse 60% 70% at 50% 45%,rgba(8,15,14,.55),transparent 75%)}
#start .wrap{position:relative;z-index:1}
@media (orientation:portrait){#start::before{background-position:46% 0;background-size:auto 135vh}} /* Hochformat: Europa und der Riss oben im Bild */
#start h1{text-shadow:0 0 28px rgba(176,132,255,.45),0 2px 0 rgba(0,0,0,.6)}
#start .lead,#start .fine,#start .lbl{text-shadow:0 1px 3px rgba(0,0,0,.8)}
.wrap{max-width:560px;margin:0 auto;display:grid;gap:20px}
h1{font:400 clamp(3.4rem,15vw,5.6rem)/.9 var(--display);margin:0;letter-spacing:.01em;text-wrap:balance}
h1 em{display:block;font:italic 400 1.15rem/1.3 var(--body);color:var(--mute);letter-spacing:0;margin-top:12px}
.lead{margin:0;color:var(--ink);max-width:46ch}
.lbl{font:700 12px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}
.row{display:flex;gap:8px;flex-wrap:wrap}
input[type=text]{flex:1;min-width:0;background:rgba(236,228,208,.07);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:inherit;padding:12px 14px;-webkit-user-select:text;user-select:text}
textarea.code{display:block;width:100%;margin-top:8px;background:rgba(236,228,208,.07);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:13px/1.4 ui-monospace,Menlo,Consolas,monospace;padding:10px 12px;resize:vertical;word-break:break-all;-webkit-user-select:text;user-select:text}
textarea.code:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
#startCodeMsg.err,#menuCodeMsg.err{color:var(--blood)}
#startGo,#menuGo{margin-top:8px}
.btn{background:var(--lamp);color:#1a1409;border:0;border-radius:8px;padding:12px 18px;font:700 15px var(--ui);letter-spacing:.05em}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn[disabled]{opacity:.45}
.chip.have{border-color:var(--glow);box-shadow:inset 0 0 0 1px rgba(115,205,196,.35)}
.res .tag{display:inline-block;margin:4px 6px 0 0;padding:1px 8px;border-radius:999px;font:700 11px var(--ui);letter-spacing:.04em}
.res .tag.map{background:rgba(115,205,196,.16);color:var(--glow)}.res .tag.run{background:rgba(232,171,76,.16);color:var(--lamp)}
.chip{background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font:700 13px var(--ui);letter-spacing:.04em;color:var(--ink)}
.chip[aria-pressed=true]{background:var(--lamp);border-color:var(--lamp);color:#1a1409}
.res{display:grid;gap:6px}
.res button{text-align:left;background:rgba(236,228,208,.06);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:15px;line-height:1.3}
#status{min-height:1.4em;margin:0;font:500 15px var(--ui);color:var(--glow)}
#status.err{color:var(--blood)}
.fine{font-size:14px;color:var(--mute);margin:0}
/* Dialog */
#shade{position:fixed;inset:0;background:rgba(4,10,9,.5)}
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:80%;overflow:auto;touch-action:pan-y;background:var(--panel);border-top:1px solid var(--lamp);padding:18px 18px calc(env(safe-area-inset-bottom,0px) + 18px);-webkit-user-select:text;user-select:text}
.sheet .in{max-width:640px;margin:0 auto;display:grid;gap:10px}
.role{font:700 12px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--lamp)}
.sheet h2{font:400 clamp(1.8rem,7vw,2.4rem)/1 var(--display);margin:2px 0 0;text-wrap:balance}
.real{font:italic 400 15px var(--body);color:var(--mute)}
#sText p{margin:.45em 0}
#sText .note{color:var(--glow);font:700 14px var(--ui);letter-spacing:.03em}
#sText .norbert{color:var(--mute);font-style:italic}
#sText .nbimg{width:22px;height:22px;border-radius:50%;vertical-align:-6px;margin-right:6px;box-shadow:0 0 0 1px var(--glow)}
.shead{display:flex;gap:14px;align-items:center}
.sface canvas{display:block;width:76px;height:76px;border-radius:12px;box-shadow:0 0 0 1px var(--lamp),0 6px 18px rgba(0,0,0,.5)}
.sface[hidden]{display:none}
/* Gezeichnete Bilder (js/art.js): größere Porträts, Szenenbild über dem Dialog */
.sface.art img,.sface img.artface{display:block;width:112px;height:112px;object-fit:cover;border-radius:12px;box-shadow:0 0 0 1px var(--lamp),0 8px 22px rgba(0,0,0,.55)}
.sart{margin:-18px -18px 4px;max-height:36vh;overflow:hidden;position:relative}
.sart[hidden]{display:none}
.sart img{display:block;width:100%;height:36vh;object-fit:cover;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.nbhud .face img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;box-shadow:0 0 0 2px var(--glow),0 6px 18px rgba(0,0,0,.6)}
.poicard .pc-face img{display:block;width:56px;height:56px;object-fit:cover;border-radius:50%}
img.artbeast{width:120px;height:120px;object-fit:cover;border-radius:10px;flex:none}
#sText .norbert b{color:var(--glow);font:700 12px var(--ui);font-style:normal;letter-spacing:.08em;text-transform:uppercase;margin-right:6px}
.opts{display:grid;gap:8px;margin-top:4px}
.opt{text-align:left;background:rgba(236,228,208,.06);border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:16px;line-height:1.3}
.opt.main{border-color:var(--lamp)}
.opt small{display:block;font:700 12px var(--ui);letter-spacing:.06em;color:var(--mute);margin-top:2px}
.opt[disabled]{opacity:.4}
/* Menü */
.menu h3{font:400 1.7rem/1 var(--display);margin:0 0 8px}
.q{display:block;width:100%;text-align:left;background:rgba(236,228,208,.06);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.q.on{border-color:var(--lamp)}
.qrow{display:flex;gap:6px;align-items:stretch}.qrow .q{flex:1;margin-bottom:8px}
.pin{flex:none;width:42px;margin-bottom:8px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--mute);font-size:20px}.pin.on{color:var(--lamp);border-color:var(--lamp)}
.invcat{font:700 11px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:12px 0 6px}
.item{display:flex;align-items:center;gap:8px;background:rgba(236,228,208,.06);border:1px solid var(--line);border-left:3px solid var(--rar);border-radius:8px;padding:8px 10px;margin-bottom:6px}
.item>div{flex:1;min-width:0}
.icowrap{position:relative;flex:none;width:44px;height:44px;border-radius:6px;overflow:hidden}
.icowrap.empty{border:1px dashed var(--line)}
.ico{display:block;width:44px;height:44px}
.rar-epic .icowrap::after,.rar-relic .icowrap::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:250% 100%;animation:shimmer 2.8s linear infinite}
@keyframes shimmer{from{background-position:150% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.rar-epic .icowrap::after,.rar-relic .icowrap::after{animation:none}}
.item b{color:var(--rar);font:700 15px var(--ui)}
.item .n{font:700 13px var(--ui);color:var(--mute)}
.item small{display:block;color:var(--mute);font-size:13px;margin-top:2px}
.item .chip{flex:none;padding:6px 12px}
.chip.ghost{color:var(--mute)}
.item.empty{border-left-color:var(--line);opacity:.7}
/* Reiter im Menü */
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex:none;background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font:700 13px var(--ui);letter-spacing:.04em;color:var(--ink);white-space:nowrap}
.tab[aria-selected=true]{background:var(--lamp);border-color:var(--lamp);color:#1a1409}
.tabs.sub{margin-bottom:6px}.tabs.sub .tab{padding:6px 12px;font-size:12px}
.tabs.sub .tab[aria-selected=true]{background:transparent;color:var(--lamp)}
.tab.dot::after{content:'';position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 2px var(--ground)}
.pane{display:grid;gap:16px}
.beast{display:flex;gap:14px;align-items:flex-start;background:rgba(236,228,208,.05);border:1px solid var(--line);border-left:3px solid var(--rift);border-radius:10px;padding:12px;margin-bottom:10px}
.beast.boss{border-left-color:var(--lamp)}
.beast canvas{flex:none;background:radial-gradient(circle,rgba(176,132,255,.18),transparent 70%);border-radius:8px}
.beast>div{flex:1;min-width:0}.beast b{font:700 17px var(--ui)}.beast .role{display:block;font:700 11px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:2px 0 6px}
.beast p{margin:.3em 0}.beast .norbert{color:var(--mute);font-style:italic}.beast .norbert b{color:var(--glow);font:700 11px var(--ui);font-style:normal;text-transform:uppercase;letter-spacing:.08em;margin-right:6px}
.beast ul{margin:6px 0 0;padding-left:18px}.beast .kv{margin-top:6px}
@media (max-width:480px){.beast{flex-direction:column}}
.controls ul{margin:0 0 8px;padding-left:18px;color:var(--ink)}.controls li{margin:2px 0}
.paths{display:grid;gap:4px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.item.skill.empty{opacity:.85}
.item .why{color:var(--blood)}
.rar-common{--rar:var(--r-common)}.rar-good{--rar:var(--r-good)}.rar-rare{--rar:var(--r-rare)}.rar-epic{--rar:var(--r-epic)}.rar-relic{--rar:var(--r-relic)}
#mInvMsg{color:var(--glow);margin-top:4px}
.q b{display:block;font:400 19px/1.15 var(--display);letter-spacing:.02em}
.q span{font-size:15px;color:var(--mute)}
.legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 14px;font-size:15px;line-height:1.25}
.legend div{display:flex;gap:8px;align-items:center}
.legend i{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-content:center;font:700 12px/1 var(--ui);color:#10201f;font-style:normal}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.kv div{background:rgba(236,228,208,.06);border-radius:8px;padding:8px 10px;font:700 12px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.kv b{display:block;font:500 20px var(--ui);color:var(--ink);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.toast{animation:none}.bar i{transition:none}}
/* ===== Breite Bildschirme (Rechner, Steam): Reiter senkrecht links, Inhalt breit und mehrspaltig ===== */
/* Modusanzeige (nur Rechner) und Erkundungsmodus */
.modebadge{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 10px);display:grid;justify-items:center;gap:1px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:5px 14px;pointer-events:none;max-width:calc(100% - 28px);text-align:center}
.modebadge b{font:700 12px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--lamp)}
.modebadge small{font:12px var(--ui);color:var(--mute)}
.mode-touch .modebadge{display:none}
.explore .modebadge{border-color:var(--glow)}.explore .modebadge b{color:var(--glow)}
.explore #hud::before{content:'';position:fixed;inset:0;border:3px solid var(--glow);opacity:.45;pointer-events:none}
.explore #tracker,.explore .qlog,.explore #btnTalk{display:none}
.explore #hotbar{opacity:.35}
.explore #cv{cursor:grab}
.poicard{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 70px);width:min(360px,calc(100% - 28px));display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--glow);border-radius:10px;padding:10px 14px;pointer-events:none;font:14px var(--ui)}
.poicard .pc-txt{display:grid;gap:3px;min-width:0}
.poicard .pc-face canvas{display:block;width:56px;height:56px;border-radius:50%;box-shadow:0 0 0 2px var(--line)}
.poicard .role{font:700 11px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.poicard b{font:700 18px var(--ui);color:var(--ink)}
.poicard span{color:var(--mute)}.poicard .done{color:var(--r-good)}.poicard .new{color:var(--lamp)}
/* Norbert oben rechts (immer sichtbar), Questpfeil am Kompassrand, Sprechblase links daneben */
.nbhud{position:fixed;right:14px;top:calc(env(safe-area-inset-top,0px) + 68px);width:64px;height:64px;pointer-events:auto;cursor:pointer} /* Klick: Weltkarte */
.mode-desktop .nbhud{top:calc(env(safe-area-inset-top,0px) + 16px);width:80px;height:80px}
.nbhud .face canvas{display:block;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 2px var(--glow),0 6px 18px rgba(0,0,0,.6)}
.nbhud .nbarrow{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px)}
.nbhud .dist{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:16px;font:700 12px var(--ui);color:var(--lamp);white-space:nowrap;text-shadow:0 1px 3px #000}
.explore .nbhud .nbarrow,.explore .nbhud .dist{display:none}
.nbbubble{position:fixed;right:96px;top:calc(env(safe-area-inset-top,0px) + 72px);width:max-content;max-width:min(320px,calc(100% - 124px));pointer-events:auto;cursor:pointer;animation:nbIn .25s ease-out}
.mode-desktop .nbbubble{right:116px;top:calc(env(safe-area-inset-top,0px) + 26px);max-width:min(380px,calc(100% - 140px))}
.nbbubble[hidden]{display:none}
.nbbubble p{position:relative;margin:0;background:var(--panel);border:1px solid var(--glow);border-radius:12px;padding:7px 12px;font:italic 14px/1.35 var(--body);color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.nbbubble p::after{content:'';position:absolute;right:-7px;top:16px;border:6px solid transparent;border-left-color:var(--glow);border-right:0}
.mode-touch .nbbubble{right:14px;top:calc(env(safe-area-inset-top,0px) + 180px);max-width:min(320px,calc(100% - 28px));z-index:5}
.mode-touch .nbbubble p::after{right:30px;top:-7px;border:6px solid transparent;border-bottom-color:var(--glow);border-top:0}
.explore .nbbubble{display:none}
@keyframes nbIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
/* Durchläufe (Startseite) und Speicherplätze (Menü) */
.runlist{display:grid;gap:8px;max-height:min(46vh,340px);overflow:auto}
.btn.run{display:grid;gap:2px;text-align:left}
.btn.run small{font:13px var(--ui);color:rgba(26,20,9,.72);font-weight:500}
.slots{display:grid;gap:8px;margin-top:8px}
.slotrow{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.slotrow.on{border-color:var(--lamp)}
.slotrow>div{flex:1;min-width:0;display:grid;gap:2px}.slotrow b{font:700 14px var(--ui)}.slotrow span{font:13px var(--ui);color:var(--mute)}
.slotrow .btn{padding:8px 12px;font-size:13px}
#runName{width:100%;margin:6px 0}
/* Startgebiete, Ladeanzeige und Prolog (js/prolog.js) */
.pick{display:grid;gap:8px;border:1px solid var(--lamp);border-radius:12px;padding:12px}
.picklist{display:grid;gap:6px}
.pickrow{display:flex;gap:10px;align-items:center;background:rgba(236,228,208,.05);border-radius:8px;padding:8px 10px}
.pickrow .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--lamp);color:#1a1409;font:700 13px var(--ui);flex:none}
.pickrow>div{flex:1;min-width:0;display:grid}.pickrow b{font:700 15px var(--ui)}.pickrow small{font:12px var(--ui);color:var(--mute)}
.pickrow .btn{padding:6px 10px}
.loadpill{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 168px);display:flex;gap:6px;align-items:center;background:var(--panel);border:1px solid var(--lamp);border-radius:999px;padding:6px 12px;font:700 12px var(--ui);color:var(--lamp);pointer-events:none;max-width:calc(100% - 28px)}
.mode-touch .loadpill{bottom:calc(env(safe-area-inset-bottom,0px) + 318px)}
.loadpill[hidden]{display:none}
.loadpill i{width:9px;height:9px;border-radius:50%;background:rgba(232,171,76,.35);flex:none}
.loadpill i.load,.loadpill i.retry{background:var(--lamp);animation:pulse 1s ease-in-out infinite alternate}
.loadpill i.ok{background:var(--r-good)}
.loadpill.ok{border-color:var(--r-good);color:var(--r-good)}
@keyframes pulse{from{opacity:.35}to{opacity:1}}
.skippro{display:none;position:fixed;left:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 168px);padding:6px 12px;font-size:12px}
.prolog .skippro,.pintro .skippro{display:block;z-index:100} /* auch über der Zwischensequenz und der Erinnerung */
.mode-touch .skippro{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 210px)}
.nonb #nbHud,.nonb #nbBubble{display:none}
.loadwait{position:fixed;left:50%;top:30%;transform:translateX(-50%);width:min(380px,calc(100% - 28px));z-index:20} /* lässt das Spiel bedienbar */
.loadwait[hidden]{display:none}
.loadwait>div{background:var(--panel);border:1px solid var(--lamp);border-radius:14px;padding:18px;display:grid;gap:10px;text-align:center}
.loadwait b{font:400 24px var(--display);color:var(--lamp)}
/* Weltkarte (js/worldmap.js) */
.wm-box{overflow-x:hidden}
.amwrap{position:relative}.amcanvas{cursor:grab;touch-action:none;margin:0 0 12px}
.wmcanvas{display:block;width:100%;max-width:100%;border-radius:10px;border:1px solid var(--line);margin:4px 0 10px}
.wm-legend{display:flex;flex-wrap:wrap;gap:14px;font:13px var(--ui);color:var(--mute)}
.wm-legend>span{display:flex;gap:6px;align-items:center}
.wm-legend i{width:14px;height:14px;border-radius:50%;border:2px solid var(--lamp);background:rgba(12,24,23,.9)}
.wm-legend i.planned{border:2px dashed var(--glow);background:rgba(115,205,196,.12)}.wm-legend i.other{border:2px dotted var(--mute);background:rgba(157,177,166,.1)}
.wmwrap{position:relative}.wmcanvas{cursor:crosshair;touch-action:none}
.wmzoom{position:absolute;left:10px;top:10px;display:grid;gap:6px}.wmzoom .icon{width:36px;height:36px;font:700 18px var(--ui);color:var(--ink)}
.wm-travel{display:grid;gap:14px;margin:12px 0 6px}
.wm-list{display:grid;gap:6px;max-height:240px;overflow:auto}
.wm-row{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.wm-row>div{flex:1;min-width:0;display:grid}.wm-row b{font:700 15px var(--ui)}.wm-row small{font:12px var(--ui);color:var(--mute)}
.wm-row .btn{padding:7px 12px;font-size:13px}
.wm-row.here{border-color:var(--lamp)}.wm-row.ready{border-color:var(--glow)}.wm-row.pending{opacity:.7}
#wmMsg.err{color:var(--blood)}#wmMsg .btn{margin-left:6px;padding:5px 10px;font-size:12px}
.wm-legend i.visited{border:2px solid var(--lamp);background:rgba(232,171,76,.18)}.wm-legend i.ready{border:2px solid var(--glow);background:rgba(115,205,196,.3)}
/* Karteninfo */
.mapinfo{position:fixed;inset:0;display:grid;place-items:center;background:rgba(5,10,10,.6);padding:16px;z-index:30}
.mapinfo[hidden]{display:none}
.mi-box{position:relative;width:min(460px,100%);max-height:calc(100% - 32px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px}
.mi-box .close{position:absolute;top:10px;right:10px;width:36px;height:36px;color:var(--ink);font:16px var(--ui)}
.mi-box h2,.mapinfo-pane h2{font:400 28px var(--display);color:var(--lamp);margin:0 40px 2px 0}
.mi-box .sub,.mapinfo-pane .sub{font:13px var(--ui);color:var(--mute);margin:0 0 12px}
.mi-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
.mi-stat{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:13px var(--ui);color:var(--mute)}
.mi-stat b{display:block;font:700 20px var(--ui);color:var(--ink)}
.mi-bar{height:5px;border-radius:3px;background:rgba(236,228,208,.1);margin-top:6px;overflow:hidden}.mi-bar i{display:block;height:100%;background:var(--glow)}
.mi-cats{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;font:14px var(--ui)}
.mi-cats div{display:flex;gap:8px;align-items:center}.mi-cats .g{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#10201f;font-weight:700;flex:none}
.mi-cats .n{margin-left:auto;color:var(--mute)}
.mi-box h3,.mapinfo-pane h3{font:700 12px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:4px 0 8px}
.mi-box .fine,.mapinfo-pane .fine{font:12px var(--ui);color:var(--mute);margin:12px 0 0}
@media (max-width: 959px) {
.modebadge{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 92px)}
.poicard{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 146px)}
}
@media (min-width: 960px) {
.mi-box{width:min(680px,100%)}
.wm-travel{grid-template-columns:1fr 1fr}
.sface canvas{width:104px;height:104px}
.sface.art img,.sface img.artface{width:150px;height:150px}
.sart{margin:-18px auto 4px;max-width:900px;border-radius:0 0 14px 14px}
.mi-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.mapinfo-pane{max-width:860px}
.mi-cats{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.menu .wrap{max-width:1240px;grid-template-columns:210px minmax(0,1fr);column-gap:28px;align-items:start}
.menu .wrap>.row:first-child,.menu .wrap>p.fine{grid-column:1/-1}
#mTabs{grid-column:1;grid-row:2;flex-direction:column;overflow:visible;position:sticky;top:0;gap:6px}
#mTabs .tab{text-align:left;border-radius:8px;padding:10px 14px}
.menu .pane{grid-column:2;grid-row:2}
.invgrid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:24px;align-items:start}
.invgrid #mEquipWrap{position:sticky;top:0}
.pane[data-pane="inv"] .tabs.sub{margin-left:384px}
.paths{grid-template-columns:repeat(3,minmax(0,1fr))}
#mBestiary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#mBestiary .beast{margin-bottom:0}
.pane[data-pane="help"],.pane[data-pane="settings"]{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
#mQuests{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
.pane[data-pane="hero"] .kv{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Atlas: Erinnerungsbuch der besuchten Orte */
.atlascats{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.atlascats .chip .g,.atlas .g{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;color:var(--ground);font-style:normal;font-weight:700;font-size:.75rem;margin-right:5px;vertical-align:middle}
.atlasgrid{display:grid;gap:8px;margin-bottom:12px}
.atlas{display:flex;gap:10px;align-items:flex-start;background:rgba(236,228,208,.05);border:1px solid var(--line);border-radius:10px;padding:10px}
.atlas .g{flex:none;width:26px;height:26px;margin:2px 0 0;font-size:.9rem}
.atlas b{display:block}
.atlas small{display:block;color:var(--mute)}
.atlas p{margin:6px 0 0;font-style:italic;color:var(--ink);opacity:.9}
@media (min-width: 960px) { .atlasgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width: 640px) and (max-width: 959px) { .atlasgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Antworten von Mer im Dialog */
.opt.say{border-left:3px solid var(--glow);font-style:italic}
.opt.say .who{display:block;font:700 11px var(--ui);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--glow);margin-bottom:2px}
/* ===== Gezeichneter Stil (Stufe 3 der Vorschau tools/menustil.html) =====
Tusche, Schraffur, Ruß: gezeichnete Rahmen als border-image (img/ui/*.svg, erzeugt von tools/ui-frames.py),
Papierkorn und Schmutz als SVG-Rauschen, Schraffur als Verlauf. Das HUD im Spiel bleibt bewusst schlicht. */
:root{
--soot:#050a09;
--noise:url("data:image/svg+xml;utf8,");
--grime:url("data:image/svg+xml;utf8,");
--hatch:repeating-linear-gradient(-45deg,rgba(0,0,0,.3) 0 1px,transparent 1px 4px);
--xhatch:repeating-linear-gradient(-45deg,rgba(0,0,0,.34) 0 1px,transparent 1px 4px),repeating-linear-gradient(45deg,rgba(0,0,0,.22) 0 1px,transparent 1px 6px);
--sheet-bg:radial-gradient(ellipse 90% 80% at 50% 35%,transparent 35%,rgba(2,5,5,.7) 100%),var(--grime),var(--xhatch),var(--noise),#0c1716;
}
/* große Fenster: Dialog, Karteninfo, Weltkarte */
.sheet{border-top:0;border-style:solid;border-width:14px 0 0;border-image:url(../img/ui/top.svg) 24 0 0 0 / 14px 0 0 0 round;background:var(--sheet-bg);background-attachment:local;background-size:auto,640px 640px,auto,auto,200px,auto}
.mi-box{border:16px solid transparent;border-radius:0;border-image:url(../img/ui/panel.svg) 24 / 16px round;background:var(--sheet-bg);background-size:auto,640px 640px,auto,auto,200px,auto;background-origin:border-box;padding:10px 12px 12px}
.menu{background:radial-gradient(ellipse 80% 70% at 50% 40%,transparent 40%,rgba(2,5,5,.75) 100%),var(--grime),var(--xhatch),var(--noise),var(--ground);background-size:auto,640px 640px,auto,auto,200px,auto;background-attachment:fixed}
/* Porträts im Dialog: dicker Tuscherahmen, leicht gealtert */
.sface canvas,.sface.art img,.sface img.artface{border-radius:0;box-shadow:none;border:9px solid transparent;border-image:url(../img/ui/face.svg) 24 / 9px stretch;filter:contrast(1.08) saturate(.85) sepia(.1)}
.sart img{filter:contrast(1.06) saturate(.85) sepia(.1)}
.sheet h2,.menu h3,#mTitle{text-shadow:2px 2px 0 rgba(0,0,0,.6)}
.sheet h2{display:inline-block;padding-bottom:6px;background:url("data:image/svg+xml;utf8,") no-repeat bottom/100% 12px}
/* Zeilen, Knöpfe, Karten: schmaler Tuscherahmen, schraffierter Grund, eckig */
.opt,.q,.item,.beast,.res button,.atlas,.pin,.wm-row{border:10px solid transparent;border-radius:0;border-image:url(../img/ui/thin.svg) 24 / 10px round;background:var(--hatch),rgba(236,228,208,.045);background-origin:border-box}
.opt{padding:4px 6px}.q{padding:2px 4px}.item{padding:0 2px}.beast{padding:4px}.res button{padding:2px 4px}
.opt.main,.q.on,.pin.on{border-image-source:url(../img/ui/thin-lamp.svg)}
.opt.say{border-image-source:url(../img/ui/thin-glow.svg);border-left-width:10px}
.opt.say .who{color:var(--glow)}
.opt:hover:not([disabled]),.q:hover,.res button:hover{background:var(--xhatch),rgba(232,171,76,.08)}
.item{box-shadow:inset 4px 0 0 var(--rar)}
.beast{border-image-source:url(../img/ui/thin-rift.svg)}
.beast.boss{border-image-source:url(../img/ui/thin-lamp.svg)}
.icowrap{border-radius:0;box-shadow:inset 0 0 0 2px var(--rar,var(--line))}
img.artbeast{border-radius:0;filter:contrast(1.08) saturate(.85) sepia(.1)}
.btn{border-radius:0;box-shadow:3px 3px 0 rgba(0,0,0,.5),inset 0 0 0 1px rgba(5,10,9,.45)}
.btn.ghost{border:10px solid transparent;border-image:url(../img/ui/thin.svg) 24 / 10px round;padding:2px 8px;box-shadow:none;background:var(--hatch)}
.chip,.tab{border-radius:0}
.tab,.chip.ghost,.chip:not([aria-pressed=true]):not(.have){border:8px solid transparent;border-image:url(../img/ui/thin.svg) 24 / 8px round;padding:0 6px}
.tab[aria-selected=true]{border-image-source:url(../img/ui/thin-lamp.svg)}
input[type=text],textarea.code{border-radius:0;border:10px solid transparent;border-image:url(../img/ui/thin.svg) 24 / 10px round;padding:2px 4px;background:rgba(0,0,0,.25)}
.toast{border-radius:0;border:8px solid transparent;border-image:url(../img/ui/thin.svg) 24 / 8px round;background:rgba(10,20,19,.95);padding:0 6px}
.toast.good{border-image-source:url(../img/ui/thin-glow.svg)}.toast.gold{border-image-source:url(../img/ui/thin-lamp.svg)}
.nbbubble,.poicard{border-radius:0;border:10px solid transparent;border-image:url(../img/ui/thin-glow.svg) 24 / 10px round;background:var(--noise),rgba(10,20,19,.96);background-origin:border-box}
/* Rand der Karte: Ruß, Kreuzschraffur und Schmutz zur Mitte hin auslaufend. Feste Ebene über dem Canvas (eigene Compositing-Ebene),
damit sie nicht in jedem Bild neu gezeichnet wird. Liegt unter HUD und Fenstern (die folgen später im Dokument). */
#vignette{position:fixed;inset:0;pointer-events:none;will-change:transform;background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(6,12,11,.5) 100%)}
#vignette::before{content:'';position:absolute;inset:0;background:var(--grime),repeating-linear-gradient(45deg,rgba(4,8,8,.7) 0 1px,transparent 1px 6px),repeating-linear-gradient(-45deg,rgba(4,8,8,.5) 0 1px,transparent 1px 9px);background-size:640px 640px,auto,auto;-webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,transparent 52%,#000 100%);mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,transparent 52%,#000 100%)}
/* Ortsplakette (Interaktion) klein und dezent oben rechts unter Norbert, damit sie im Kampf nicht mitten im Bild steht.
Norbert sitzt ganz oben in der Ecke. */
.mode-touch .nbhud{top:calc(env(safe-area-inset-top,0px) + 12px)}
#btnTalk{left:auto;right:12px;transform:none;bottom:auto;top:calc(env(safe-area-inset-top,0px) + 112px);max-width:min(220px,46vw);background:rgba(10,20,19,.9);color:var(--ink);border:8px solid transparent;border-image:url(../img/ui/thin-lamp.svg) 24 / 8px round;border-radius:0;padding:0 4px;font:700 13px/1.25 var(--ui);letter-spacing:.02em;text-align:right;box-shadow:0 3px 10px rgba(0,0,0,.45)}
#btnTalk small{font-size:9px;color:var(--lamp);opacity:1}
.mode-desktop #btnTalk{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 136px)}
.mode-desktop #btnTalk::before{border-color:var(--line);color:var(--lamp)}
.mode-touch .nbbubble{top:calc(env(safe-area-inset-top,0px) + 172px)}
.center{top:calc(env(safe-area-inset-top,0px) + 176px)}
.mode-desktop .center{top:calc(env(safe-area-inset-top,0px) + 196px)}
/* Rundtasten am Handy: Abklingzeit als Ring mit Verlauf, der sich leert und wieder füllt (--cd: leerer Anteil, js/game.js ring).
Gedimmt, solange es lädt; aktiv (Schild) heller Ring mit Restzeit und Leuchten; wieder bereit: kurzer Blitz. */
.act{--cd:0;--r1:var(--lamp);--r2:var(--rift);border-color:rgba(5,10,9,.7)}
.act i{display:none}
.act::before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(var(--r1) 0deg,var(--r2) calc((1 - var(--cd)) * 360deg),rgba(4,8,8,.8) calc((1 - var(--cd)) * 360deg) 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px))}
.act::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(0,0,0,.15),rgba(0,0,0,.55));opacity:0;transition:opacity .15s}
.act.cooling::after{opacity:1}
.act.cooling span,.act.cooling img,.act.cooling b{opacity:.5}
.act.on{box-shadow:0 0 16px rgba(115,205,196,.75);background:rgba(115,205,196,.16)}
.act.on::before{background:conic-gradient(#fff1cf 0deg,var(--glow) calc((1 - var(--cd)) * 360deg),rgba(4,8,8,.6) calc((1 - var(--cd)) * 360deg) 360deg)}
.act.ready{animation:actReady .45s ease-out}
@keyframes actReady{0%{transform:scale(1.1);box-shadow:0 0 0 0 rgba(255,241,207,.85)}100%{transform:scale(1);box-shadow:0 0 0 16px rgba(255,241,207,0)}}
@media (prefers-reduced-motion:reduce){.act.ready{animation:none}}
#btnDodge{--r1:#efe6b8;--r2:var(--glow)}
#btnShield{--r1:#ffd58a;--r2:var(--blood)}
#btnRain{--r1:var(--glow);--r2:var(--rift)}
#btnSk3{--r1:var(--rift);--r2:var(--glow)}
#btnShield.on{background:rgba(115,205,196,.16)}
.mode-touch .top{padding-right:calc(14px + 64px + 12px)} /* Platz für Norbert oben rechts */
.mode-touch .tracker{max-width:calc(100% - 28px - min(220px,46vw) - 10px)} /* Platz für die Ortsplakette rechts */
.mode-touch .tracker .t,.mode-touch .tracker .d{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.mode-touch .tracker>span{min-width:0;overflow:hidden}
/* Gebiet in anderem Gewand (js/variants.js): getilgte Papierwelt mit hellem, verwischtem Rand statt Ruß; Riss-Dimension violett */
body[data-variant="erased"] #vignette{background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(236,230,214,.7) 100%)}
body[data-variant="erased"] #vignette::before{background:repeating-linear-gradient(45deg,rgba(120,110,95,.35) 0 1px,transparent 1px 6px);opacity:.6}
body[data-variant="rift"] #vignette{background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(40,8,40,.65) 100%)}
/* ===== Handy-Steuerung (Okt. 2026): Leben als Orb im Joystick, Erfahrung als Ring darum, Aktionstaste daneben ===== */
#tracker{display:none!important} /* Questziel zeigt Norberts Rand, die angehefteten Quests stehen in der Liste */
.qlog{top:calc(env(safe-area-inset-top,0px) + 104px)}
.loc{font:700 12px var(--ui);letter-spacing:.06em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc small{color:var(--mute);font-weight:500;letter-spacing:.02em}
.mode-touch .top{display:grid;grid-template-columns:auto auto 1fr;align-items:start;justify-items:start;column-gap:8px;row-gap:8px}
.mode-touch .stats{grid-column:1 / -1;width:100%;max-width:min(320px,100%);gap:4px;padding:6px 10px}
.mode-touch .stats .bar,.mode-touch .stats .pothud{display:none}
.mode-touch .qlog{top:calc(env(safe-area-inset-top,0px) + 122px)}
#orb,#orbN,#btnUse{display:none}
.mode-touch #orb{display:block;position:absolute;left:-12px;top:-12px;width:152px;height:152px;pointer-events:none}
.mode-touch #joy{background:transparent;border:0}
.mode-touch #knob{background:rgba(232,171,76,.32);border:2px solid rgba(232,171,76,.9);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.mode-touch #orbN{display:block;position:absolute;left:0;right:0;bottom:16px;text-align:center;font:700 10px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#ffe3d8;text-shadow:0 1px 3px #000;pointer-events:none}
.mode-touch #btnUse{display:grid;place-items:center;align-content:center;gap:0;position:fixed;left:150px;bottom:calc(env(safe-area-inset-bottom,0px) + 40px);width:56px;height:56px;border-radius:50%;background:var(--panel);border:2px solid var(--line);color:var(--mute);font:700 9px var(--ui);letter-spacing:.06em;text-transform:uppercase;padding:0;touch-action:none;opacity:.45}
.mode-touch #btnUse i{font:700 20px/1 var(--ui);font-style:normal}
.mode-touch #btnUse.on{opacity:1;border-color:var(--lamp);color:var(--lamp);box-shadow:0 0 14px rgba(232,171,76,.45)}
/* Gegneranzeige oben in der Mitte (Handy und Rechner) */
.foehud{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 10px);display:flex;gap:10px;align-items:center;min-width:200px;max-width:min(320px,calc(100% - 28px));background:rgba(10,20,19,.9);border:8px solid transparent;border-image:url(../img/ui/thin.svg) 24 / 8px round;padding:0 6px 0 0;pointer-events:none}
.foehud.elite{border-image-source:url(../img/ui/thin-lamp.svg)}.foehud.boss{border-image-source:url(../img/ui/thin-rift.svg)}
.fh-face{flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #050a09,0 0 0 4px var(--fh,var(--line));background:#1a2422;display:grid;place-items:center;font:400 22px var(--display);color:var(--lamp)}
.fh-face img{width:100%;height:100%;object-fit:cover}
.fh-txt{min-width:0;flex:1}
.fh-txt b{display:block;font:400 19px/1.05 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fh-txt small{display:block;font:700 10px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fh-bar{position:relative;height:7px;margin-top:4px;background:rgba(0,0,0,.5);border:1px solid rgba(5,10,9,.8)}
.fh-bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#8a2a20,var(--blood));transition:width .12s}
.mode-touch .foehud{top:calc(env(safe-area-inset-top,0px) + 60px);left:calc(50% + 28px);min-width:150px;max-width:max(150px,calc(100% - 260px))}
.mode-touch .foehud .fh-face{width:42px;height:42px}
.mode-touch .foehud .fh-txt b{font-size:16px}
body.foe .modebadge{display:none}
/* Reiter „Mer“: Ausrüstungspuppe mit Modulplätzen um die Drohne (js/ui.js renderDoll) */
.herogrid{display:grid;gap:16px}
@media (min-width:960px){.herogrid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}
.doll{position:relative;width:min(380px,100%);aspect-ratio:1;margin:8px auto 70px;background:radial-gradient(circle at 50% 48%,rgba(115,205,196,.14),transparent 62%)}
.dollimg{position:absolute;left:24%;top:25%;width:52%;height:52%;display:grid;place-items:center}
.dollimg img{width:100%;height:100%;object-fit:cover;border:9px solid transparent;border-image:url(../img/ui/face.svg) 24 / 9px stretch;filter:contrast(1.06) saturate(.9)}
.dollimg svg{width:90%;height:auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.6))}
.dslot{position:absolute;transform:translate(-50%,0);width:62px;padding:0;background:transparent;border:0;display:grid;justify-items:center;gap:3px;color:var(--ink)}
.dslot img,.dslot i{display:grid;place-items:center;width:56px;height:56px;background:rgba(10,20,19,.9);border:8px solid transparent;border-image:url(../img/ui/thin.svg) 24 / 8px round;box-shadow:inset 0 0 0 2px var(--rar,var(--line));font:700 20px var(--ui);font-style:normal;color:var(--mute)}
.dslot.empty i{opacity:.7}
.dslot.on img,.dslot.on i{border-image-source:url(../img/ui/thin-lamp.svg)}
.dslot small{font:700 9px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);text-align:center;line-height:1.1}
.dollpick .item.cur{box-shadow:inset 4px 0 0 var(--lamp)}
.bar.xp.full i{background:#f2cb70;animation:xpFull 1.2s ease-in-out infinite}
@keyframes xpFull{50%{filter:brightness(1.5);box-shadow:0 0 8px #f2cb70}}
/* Hochkant auf dem Handy im laufenden Spiel: bitte drehen (das Spiel pausiert, js/ui.js rotBlocked) */
#rotate{display:none;position:fixed;inset:0;z-index:60;background:rgba(5,10,9,.95);place-items:center;text-align:center;padding:24px;color:var(--lamp)}
#rotate svg{width:84px;height:84px;animation:rotHint 2.4s ease-in-out infinite}
#rotate p{font:400 22px/1.3 var(--display);color:var(--ink);max-width:22ch;margin:12px auto 0}
@keyframes rotHint{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (orientation:portrait) and (max-width:900px) and (pointer:coarse){.forceland body.ingame #rotate{display:grid}}
/* ===== Oberer Bereich (Okt. 2026, v2): Norbert links und Gegner rechts gleich groß und rund, je mit Infos im selben Rahmen ===== */
:root{--hb:72px}
.mode-desktop{--hb:84px}
.nbhud,.mode-touch .nbhud,.mode-desktop .nbhud{left:18px;right:auto;top:calc(env(safe-area-inset-top,0px) + 4px);width:var(--hb);height:var(--hb)}
.nbhud .dist{top:auto;bottom:-6px;margin:0;padding:0 6px;background:rgba(10,20,19,.92);border:1px solid rgba(232,171,76,.5);font-size:11px;line-height:16px}
.top .stats{position:relative;padding-left:calc(var(--hb) + 22px);min-height:calc(var(--hb) - 6px);max-width:min(400px,calc(50% - 24px));align-content:center}
.mode-touch .stats{max-width:min(320px,calc(50% - 24px))}
.mode-touch .top{padding-right:14px}
#shards{display:none} /* Fragmente stehen schon in der Questliste */
.mode-touch .qlog{top:calc(env(safe-area-inset-top,0px) + 136px)}
.mode-desktop .qlog{top:calc(env(safe-area-inset-top,0px) + 112px)}
.foehud,.mode-touch .foehud{left:auto;right:12px;transform:none;top:calc(env(safe-area-inset-top,0px) + 10px);min-height:calc(var(--hb) - 6px);min-width:0;width:min(300px,calc(50% - 30px));max-width:none;padding:0 calc(var(--hb) + 14px) 0 8px;justify-content:flex-end;text-align:right}
.foehud .fh-face,.mode-touch .foehud .fh-face{position:absolute;right:6px;top:-14px;width:var(--hb);height:var(--hb);font-size:30px;z-index:1}
.foehud .fh-txt b,.mode-touch .foehud .fh-txt b{font-size:19px}
.foehud .fh-bar{margin-left:auto}
#btnTalk,.mode-desktop #btnTalk{top:calc(env(safe-area-inset-top,0px) + var(--hb) + 24px)}
.nbbubble,.mode-touch .nbbubble,.mode-desktop .nbbubble{left:126px;right:auto;top:calc(env(safe-area-inset-top,0px) + var(--hb) + 12px);max-width:min(340px,calc(100% - 150px));z-index:5}
.nbbubble p::after,.mode-touch .nbbubble p::after{left:22px;right:auto;top:-7px;border:6px solid transparent;border-bottom-color:var(--glow);border-top:0}
.mode-desktop .nbbubble{left:18px;top:calc(env(safe-area-inset-top,0px) + var(--hb) + 16px)}
/* kleine Mer im Joystick-Knopf */
#knob .mer{display:none}
.mode-touch #knob .mer{display:block;position:absolute;inset:3px;background:url(../img/art/ui/mer.webp) center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));pointer-events:none}
/* ===== Handy, schlank (Okt. 2026, v3): Norbert als Kreis links mit schmaler Kapsel (Karte, darunter der Ort in Lampenfarbe),
Gegner gespiegelt rechts; Stufe und Gold nur im Menü; kleinerer Joystick, Erfahrung als Rand des Orbs ===== */
.loc b{font-weight:700}
.loc small::before{content:' · '}
#btnTalk,.mode-desktop #btnTalk,.mode-touch #btnTalk{display:none} /* der Ort in Reichweite steht in Gold unter dem Gebietsnamen (hudLoc) */
.loc small{color:var(--lamp)}
.mode-touch{--hb:52px}
.mode-touch .nbhud{left:14px;top:calc(env(safe-area-inset-top,0px) + 6px)}
.mode-touch .nbhud .dist{font-size:10px;line-height:14px;bottom:-5px}
.mode-touch .nbhud .nbarrow{inset:-11px;width:calc(100% + 22px);height:calc(100% + 22px)}
.mode-touch .top{row-gap:14px;column-gap:6px}
.mode-touch .top .stats{width:auto;max-width:min(230px,calc(50% - 58px));min-height:0;margin:2px 0 0 calc(var(--hb) / 2);padding:4px 14px 5px calc(var(--hb) / 2 + 10px);gap:2px;border-radius:0 999px 999px 0;background:rgba(13,26,25,.82)}
.mode-touch .loc{display:grid;font-size:12px;line-height:1.2}
.mode-touch .loc b,.mode-touch .loc small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mode-touch .loc small{font-size:11px;color:var(--lamp);font-weight:600}
.mode-touch .loc small::before{content:none}
.mode-touch #lvl,.mode-touch #gold{display:none}
.mode-touch .chips{font-size:10px}
.mode-touch .chips:not(:has(#buffs:not(:empty))){display:none}
.mode-touch .top .icon{width:40px;height:40px}
.mode-touch .qlog{top:calc(env(safe-area-inset-top,0px) + 76px)} /* Menü und Karte stecken jetzt hinter Norbert */
.mode-touch .foehud{top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(14px + var(--hb) / 2);width:auto;min-width:0;max-width:min(230px,calc(50% - 58px));min-height:0;padding:4px calc(var(--hb) / 2 + 10px) 5px 14px;border:1px solid var(--line);border-image:none;border-radius:999px 0 0 999px;background:rgba(13,26,25,.82);text-align:right}
.foehud.gray .fh-txt b,.foehud.gray .fh-txt small{color:var(--mute);opacity:.75}.foehud.gray .fh-face{filter:grayscale(1) brightness(.8)}
.mode-touch .foehud.elite{border-color:rgba(232,171,76,.7)}.mode-touch .foehud.boss{border-color:rgba(176,132,255,.75)}
.mode-touch .foehud .fh-face{right:calc(var(--hb) / -2);top:50%;transform:translateY(-50%);width:var(--hb);height:var(--hb);font-size:24px}
.mode-touch .foehud .fh-txt b{font:700 12px/1.2 var(--ui);letter-spacing:.04em}
.mode-touch .foehud .fh-txt small{font-size:9px}
.mode-touch .foehud .fh-bar{height:4px;margin-top:3px;width:100%;min-width:90px}
.mode-touch .nbbubble{left:14px;top:calc(env(safe-area-inset-top,0px) + var(--hb) + 14px)}
.mode-touch #joy{width:104px;height:104px}
.mode-touch #knob{left:30px;top:30px;width:44px;height:44px}
.mode-touch #orb{left:0;top:0;width:104px;height:104px}
.mode-touch #orbN{bottom:13px;font-size:9px}
.mode-touch #btnUse{left:134px;bottom:calc(env(safe-area-inset-bottom,0px) + 51px);width:50px;height:50px}
.mode-touch #btnUse i{font-size:18px}
/* Skillbaum „Vermessungsnetz“ (js/skilltree.js) */
[data-pane="skills"]>*,.sk-wrap>*{min-width:0} /* breite Knopfleiste darf das Menü nicht verbreitern */
.sk-head{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;justify-content:space-between;padding:6px 0;background:var(--panel)} /* feste Kopfzeile */
.sk-head .lbl{margin:0}.sk-next{margin:0;font:600 13px var(--ui);color:var(--glow)}.sk-next.done{color:var(--sk-on)}
.sk-slots{display:flex;gap:6px;flex-wrap:wrap}.skslot{font-size:12px;padding:4px 10px}.skslot.on{border-color:var(--lamp);color:var(--lamp)}
.sk-focus{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:thin;padding-bottom:2px}.skfoc{--sc:var(--paper);flex:none;min-height:44px;padding:6px 12px;font:700 13px var(--ui);color:var(--sc);border-color:color-mix(in srgb,var(--sc) 45%,transparent)}
.skfoc.on{background:color-mix(in srgb,var(--sc) 18%,transparent);border-color:var(--sc)}
.sec-atk{--sc:var(--sk-atk)}.sec-move{--sc:var(--sk-move)}.sec-ctrl{--sc:var(--sk-ctrl)}.sec-sys{--sc:var(--sk-sys)}.sec-build{--sc:var(--sk-build)}
.sk-wrap{position:relative;margin-top:6px} /* Detailfeld liegt als Overlay über dem Baum */
.sk-board{position:relative;width:100%;height:clamp(300px,calc(100dvh - 230px),900px);overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--sk-bg);touch-action:none;cursor:grab} /* deckt die Schraffur des Menüs fast ganz ab */
.sk-inner{position:absolute;left:0;top:0;transform-origin:0 0}
.sk-board,.sk-board *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none} /* beim Verschieben nichts markieren */
.sklines{position:absolute;inset:0}
.sklines .secbg{fill:var(--sc);opacity:.07}.sklines .band{fill:none;stroke:rgba(233,220,192,.1);stroke-width:2}
.sklines .secline{stroke:rgba(233,220,192,.12);stroke-width:2}.sklines .rim{fill:none;stroke:rgba(233,220,192,.12);stroke-width:2}
.sklines line{stroke:rgba(157,177,166,.38);stroke-width:2}.sklines line.on{stroke:var(--sk-on);stroke-opacity:.75}.sklines line.spec{stroke-dasharray:5 4}
.sklines .ring{fill:none;stroke:rgba(233,220,192,.12);stroke-width:2;stroke-dasharray:7 7}.sklines .ring.open{stroke:rgba(233,220,192,.32);stroke-dasharray:none}
.sklines .ringlbl{fill:rgba(233,220,192,.4);font:700 15px var(--ui)}.sklines .ringlbl.open{fill:rgba(233,220,192,.75)}
.sklines .sectitle{fill:var(--sc);font:400 54px var(--display);letter-spacing:.04em;cursor:pointer}
.sklines .viewbg{fill:var(--sc);opacity:.05}.sklines .viewtitle{fill:var(--sc);font:400 46px var(--display);letter-spacing:.04em}.sklines.view{--sc:var(--paper)}
.sklines .viewhead{fill:rgba(233,220,192,.55);font:700 21px var(--ui);letter-spacing:.03em}.sklines .viewhead.open{fill:rgba(233,220,192,.9)}
.sklens{--d:96px;position:absolute;width:var(--d);height:var(--d);transform:translate(-50%,-50%);padding:10px;border-radius:50%;border:2px solid color-mix(in srgb,var(--sc) 70%,transparent);background:#0f1b19;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.sklens svg{width:100%;height:100%;display:block}.sklens:hover{background:#18282a}.sklens:focus-visible{outline:3px solid var(--sk-sel)}
.skback{position:absolute;left:10px;top:10px;z-index:2;min-height:44px}.sk-board .wmzoom{z-index:2;top:auto;bottom:10px}
.sklines .arealbl{fill:var(--paper);font:700 19px var(--ui);letter-spacing:.04em}.sklines .arealine{stroke:rgba(233,220,192,.18);stroke-width:1.5}
.sklines .areabox{fill:rgba(233,220,192,.03);stroke:rgba(233,220,192,.14);stroke-width:2;stroke-dasharray:7 7}.sklines .areabox.open{stroke:rgba(233,220,192,.32);stroke-dasharray:none}
.skmer{position:absolute;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:2px solid var(--lamp);background:#1e3432;display:grid;place-items:center;font:700 17px var(--ui);color:var(--lamp)}
.skn{--d:44px;--hit:12px;--c:var(--mute);position:absolute;width:var(--d);height:var(--d);transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--c);background:#16231f;padding:0;cursor:pointer;color:var(--c);transition:opacity .3s}
.skn::before{content:'';position:absolute;inset:calc(-1 * var(--hit));border-radius:50%} /* Trefferfläche mindestens SKL.hit */
.skn.spec{border-radius:28%}.skn.ult{border-radius:14px}.skn.key{border-radius:10px 10px 50% 50%} /* Bauweise: Schildform */
.skn .nm{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;font:700 19px var(--ui);color:var(--paper);text-shadow:0 1px 3px #000,0 0 6px #000;pointer-events:none}
.skn .rk{position:absolute;inset:0;display:grid;place-items:center;font:800 16px var(--ui);font-style:normal;color:var(--paper);pointer-events:none}
.skn.root .rk,.skn.skill .rk{inset:auto;left:50%;bottom:-11px;transform:translateX(-50%);padding:0 6px;border-radius:8px;background:#0c1513;border:1px solid var(--c)}
.skn .bd{position:absolute;right:-7px;top:-7px;width:20px;height:20px;border-radius:50%;background:#0c1513;border:1.5px solid currentColor;display:grid;place-items:center;pointer-events:none}.skn .bd svg{width:13px;height:13px}
.skn.on{--c:var(--sk-on);background:color-mix(in srgb,var(--sk-on) 12%,#16231f)}.skn.on .rk{color:var(--sk-on)}
.skn.on.more .rk{color:var(--lamp)} /* gelernt, nächster Rang möglich */
.skn.can{--c:var(--paper)}.skn.can .nm{color:#fff6dc}
.skn.off,.skn.soon{--c:rgba(157,177,166,.55);opacity:.7}.skn.off .nm,.skn.soon .nm{color:rgba(233,220,192,.6)}.skn.soon{border-style:dashed}
.skn.nochoice{--c:rgba(157,177,166,.5);border-style:dashed;opacity:.55}.skn.nochoice .nm{color:rgba(233,220,192,.5);text-decoration:line-through}
.skn.sel{outline:3px solid var(--sk-sel);outline-offset:4px}
.skn.hasimg{background-image:var(--skimg);background-size:100%;background-position:center;background-repeat:no-repeat} /* Symbol im Skillbaum (js/skillicon.js) */
.skn.hasimg.off,.skn.hasimg.soon{filter:grayscale(.7)}
.sk-card{position:absolute;z-index:4;top:10px;right:10px;width:min(380px,calc(100% - 20px));max-height:calc(100% - 20px);overflow-y:auto;border:1px solid var(--line);border-radius:12px;padding:12px 14px 14px;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.6)}
.skclose{position:absolute;top:6px;right:6px;width:44px;height:44px;font-size:26px;line-height:1}
.sk-card h4{padding-right:44px}
@media (max-width:640px){.sk-card{top:auto;bottom:0;left:0;right:0;width:auto;max-height:78%;border-radius:14px 14px 10px 10px}} /* Handy: von unten, größer */
.sk-card .kind{font:700 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.sk-card h4{margin:2px 0;font:400 22px var(--display);color:var(--lamp)}
.sk-card .meta{display:block;color:var(--glow);font:600 12px var(--ui)}
.sk-card .why{color:#d96a52;font:600 13px var(--ui)}
.sk-card .reqs{list-style:none;margin:6px 0;padding:0;display:grid;gap:4px;font:600 14px var(--ui)}.sk-card .reqs li{display:flex;gap:8px;align-items:center}
.sk-card .reqs b{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor}.sk-card .reqs b svg{width:12px;height:12px}
.sk-card .reqs .ok{color:var(--sk-on)}.sk-card .reqs .no{color:#d98a6a}
.sk-card .val{margin:6px 0;font:700 15px var(--ui);color:#e2c48a}.sk-card .need{font:600 13px var(--ui);color:#d96a52}.sk-card .need.ok{color:var(--mute)}
@media (pointer:coarse){.sk-card .row .btn{min-height:44px}}
@media (orientation:landscape) and (max-height:520px){.sk-board{height:max(240px,calc(100dvh - 110px))}.sk-head{position:static}[data-pane="skills"]>p.fine:first-of-type{display:none}.sk-card{top:6px;bottom:6px;right:6px;left:auto;width:min(360px,60%);max-height:none}}
/* Heimkehr-Zauber (js/hearth.js): kleiner Rundknopf über der Aktionstaste (Handy), am Rechner Taste H in der Leiste */
#btnHome{display:none}
.mode-touch #btnHome{display:grid;place-items:center;position:fixed;left:144px;bottom:calc(env(safe-area-inset-bottom,0px) + 112px);width:40px;height:40px;color:var(--glow);border-color:var(--glow);z-index:3}
.mode-touch #btnHome svg{width:20px;height:20px;position:relative}
#btnHome.none{opacity:.35}
.explore #btnHome{display:none}
body:has(#menu:not([hidden])) #btnHome,body:has(#sheet:not([hidden])) #btnHome{display:none} /* nicht über Menü und Dialog */
/* Testphase: Knopf zum Spawnen über der Sprung-Taste (Handy) bzw. unten rechts (Rechner) */
.spawnbtn{position:fixed;right:30px;bottom:calc(env(safe-area-inset-bottom,0px) + 256px);width:40px;height:40px;border-radius:50%;border:1px dashed var(--rift);background:rgba(13,26,25,.8);color:var(--rift);display:grid;place-items:center;padding:0;pointer-events:auto;z-index:4}
.spawnbtn[hidden]{display:none}
.spawnbtn svg{width:22px;height:22px}
.mode-desktop .spawnbtn{right:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 110px)}
.explore .spawnbtn{display:none}
.explore.mode-desktop .spawnbtn:not([hidden]){display:grid}
.fogbtn{bottom:calc(env(safe-area-inset-bottom,0px) + 304px)}
.mode-desktop .fogbtn{bottom:calc(env(safe-area-inset-bottom,0px) + 158px)}
.fogbtn.on{border-style:solid;background:var(--rift);color:#0d1a19}
.spawn-box{width:min(620px,100%)}
.spawn-types{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.spawn-counts{margin:4px 0 14px}
.spawn-box .chip.on{background:var(--lamp);color:#10201f;border-color:var(--lamp)}
/* ===== Querformat auf dem Handy (wenig Höhe): Dialog zweispaltig, Menü und Ausrüstungspuppe kompakt ===== */
@media (orientation:landscape) and (max-height:520px){
.sheet{max-height:94%;padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 10px)}
.sheet .in{max-width:none;grid-template-columns:minmax(0,1.35fr) minmax(220px,1fr);column-gap:22px;align-items:start}
.sheet .in>*{grid-column:1}
.sheet .opts{grid-column:2;grid-row:1 / span 4;position:sticky;top:0;align-self:start;margin-top:0}
.sart{margin:-10px 0 4px -16px;max-height:24vh}.sart img{height:24vh}
.sface.art img,.sface img.artface{width:84px;height:84px}
.sheet h2{font-size:1.6rem}
.opt{padding:2px 6px;font-size:15px}
.menu.screen{padding-top:calc(env(safe-area-inset-top,0px) + 10px)}
#mTitle{font-size:1.6rem!important}
.menu .tabs{margin-bottom:6px}
.herogrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.doll{width:min(300px,64vh);margin:4px auto 56px}
.dslot{width:54px}.dslot img,.dslot i{width:48px;height:48px}
/* Tod: Szenenbild über den ganzen Bildschirm, Text links auf dunklem Verlauf */
.sheet.fullart{top:0;max-height:none;border-image:none;border-width:0;background:#050a09}
.sheet.fullart .sart{position:fixed;inset:0;margin:0;max-height:none;z-index:0}
.sheet.fullart .sart img{height:100%;-webkit-mask-image:none;mask-image:none}
.sheet.fullart .sart::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,9,.9) 0,rgba(5,10,9,.78) 45%,rgba(5,10,9,.15) 75%,rgba(5,10,9,.35))}
.sheet.fullart .in>*:not(.sart){position:relative;z-index:1}
.sheet.fullart .in{min-height:100%;align-content:center}
/* Weltkarte: links die Karte über die ganze Höhe, rechts Titel, Reisen, besuchte Orte und Legende */
.mapinfo{padding:8px}
.wm-box,.am-box{width:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:16px;align-items:start;padding:10px 12px}
.wm-box>*,.am-box>*{grid-column:2}
.wm-box .wmwrap,.am-box .amwrap{grid-column:1;grid-row:1 / span 8;position:sticky;top:0}
.wm-box .wmcanvas{margin:0}
.wm-box h2{font-size:22px}
.wm-box .wm-travel{margin:6px 0}
.wm-box .wm-list{max-height:none}
.wm-legend{gap:6px 12px;font-size:12px}
}
.dollimg.cut img{border:0;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6))}
.dollimg.live{left:14%;top:18%;width:72%;height:66%}.dollimg.live canvas{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.55))} /* Mer live gezeichnet (js/merlook.js drawMerPortrait) */
/* Stil-Testansicht (js/styletest.js, nur Testphase) */
.stt{position:fixed;inset:0;z-index:90;overflow:auto;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 24px;background:var(--sheet-bg);color:var(--ink);font-family:var(--ui)}
.stt-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stt h3{font-family:var(--display);font-size:26px;margin:0;color:var(--lamp)}
.stt h4{margin:18px 0 8px;color:var(--lamp)}
.stt-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stt-pair figure{margin:0}
.stt-pair img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.stt-pair figcaption{font-size:13px;color:var(--mute);margin-top:4px}
.stt-cost{border-collapse:collapse;font-size:14px}
.stt-cost td,.stt-cost th{padding:3px 12px 3px 0;text-align:left;border-bottom:1px solid var(--line)}
.stt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.stt-card{display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto 1fr;column-gap:8px;padding:6px;border:1px solid var(--line);background:var(--panel);font-size:12px}
.stt-card canvas{grid-row:1/4;width:72px;height:72px}
.stt-card b{font-size:13px;overflow-wrap:anywhere}
.stt-card small{color:var(--mute)}
.stt-card .badge{color:var(--r-good);font-weight:700}
.stt-card.old .badge{color:var(--lamp)}
.stt-card.missing .badge{color:var(--blood)}
.stt-card.missing{border-color:var(--blood)}
@media (max-width:640px){.stt-pair{grid-template-columns:1fr}}
/* Koordinaten von Mer unter Norbert (coordText in js/game.js) */
.nbhud .coord{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);font:600 9px/1.2 var(--ui);letter-spacing:.03em;color:var(--mute);white-space:nowrap;text-shadow:0 1px 2px var(--soot);pointer-events:none}
.nbhud .coord:empty{display:none}
/* Zwischensequenzen (js/cutscene.js): Bild füllt den Schirm, Untertitel als Erzählkasten im Graphic-Novel-Stil */
#cut{position:fixed;inset:0;z-index:90;background:#000;touch-action:none}
#cut canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
.cut-cap{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 7vh);transform:translateX(-50%);width:min(680px,calc(100% - 32px));opacity:0;transition:opacity .4s}
.cut-cap.on{opacity:1}
.cut-cap p{margin:0;min-height:2.9em;padding:12px 18px;background:var(--paper);color:#17110a;font:italic 400 clamp(17px,2.4vw,22px)/1.4 var(--body);box-shadow:3px 3px 0 rgba(0,0,0,.6),inset 0 0 0 2px #17110a;background-image:var(--noise)}
.cut-skip{position:absolute;top:calc(env(safe-area-inset-top,0px) + 6vh);right:16px;background:rgba(0,0,0,.45)}
/* Steampunk-Atlas (STIL.md): hervorgehobene Knöpfe und der gewählte Reiter als Messingplatte mit Lichtkante; Rahmen sind Messingfassungen
mit Nieten (img/ui/*.svg aus tools/ui-frames.py). Türkis bleibt Mers eigener Technik vorbehalten (Antworten von Mer, Norbert). */
:root{--brass-plate:linear-gradient(180deg,#ecd194 0%,#c99d57 42%,#9c7234 100%)}
.btn:not(.ghost),.tab[aria-selected=true]{background:var(--brass-plate);color:#1d140a;text-shadow:0 1px 0 rgba(255,240,200,.35);box-shadow:inset 0 1px 0 rgba(255,244,214,.65),inset 0 -2px 0 rgba(60,40,15,.45),3px 3px 0 rgba(0,0,0,.5)}
.tabs.sub .tab[aria-selected=true]{background:transparent;color:var(--lamp);text-shadow:none;box-shadow:none}
/* Menü im Steampunk-Atlas (STIL.md): Messing-Icon je Bereich am Titel und an den Reitern, Ornamente in den Ecken (Kompass, Manometer,
Karte, Zahnrad mit Leitung), eine Messingleitung entlang der Reiter. Alles als SVG-Maske bzw. Hintergrund, nichts davon fängt Klicks. */
.mico-quests{--mico:url("data:image/svg+xml;utf8,")}
.mico-hero{--mico:url("data:image/svg+xml;utf8,")}
.mico-inv{--mico:url("data:image/svg+xml;utf8,")}
.mico-skills{--mico:url("data:image/svg+xml;utf8,")}
.mico-map{--mico:url("data:image/svg+xml;utf8,")}
.mico-world{--mico:url("data:image/svg+xml;utf8,")}
.mico-bestiary{--mico:url("data:image/svg+xml;utf8,")}
.mico-atlas{--mico:url("data:image/svg+xml;utf8,")}
.mico-help{--mico:url("data:image/svg+xml;utf8,")}
.mico-settings{--mico:url("data:image/svg+xml;utf8,")}
#mTitleIco{display:inline-block;width:.9em;height:.9em;margin-right:.3em;vertical-align:-.08em;background:linear-gradient(180deg,#ecd194,#a07636);-webkit-mask:var(--mico) center/contain no-repeat;mask:var(--mico) center/contain no-repeat;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.6))}
#mTabs .tab::before{content:'';display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;background:currentColor;opacity:.85;-webkit-mask:var(--mico) center/contain no-repeat;mask:var(--mico) center/contain no-repeat}
#mTabs .tab[aria-selected=true]::before{opacity:1}
#mTabs .tab[data-tab=quests]{--mico:url("data:image/svg+xml;utf8,")}
#mTabs .tab[data-tab=hero]{--mico:url("data:image/svg+xml;utf8,")}
#mTabs .tab[data-tab=inv]{--mico:url("data:image/svg+xml;utf8,")}
#mTabs .tab[data-tab=skills]{--mico:url("data:image/svg+xml;utf8,")}
#mTabs .tab[data-tab=map]{--mico:url("data:image/svg+xml;utf8,")}
#mTabs .tab[data-tab=world]{--mico:url("data:image/svg+xml;utf8,")}
#mTabs .tab[data-tab=bestiary]{--mico:url("data:image/svg+xml;utf8,")}
#mTabs .tab[data-tab=atlas]{--mico:url("data:image/svg+xml;utf8,")}
#mTabs .tab[data-tab=help]{--mico:url("data:image/svg+xml;utf8,")}
#mTabs .tab[data-tab=settings]{--mico:url("data:image/svg+xml;utf8,")}
.menu-orn.tl{top:-34px;left:-34px;background-image:url("data:image/svg+xml;utf8,")}
.menu-orn.tr{top:60px;right:-30px;background-image:url("data:image/svg+xml;utf8,")}
.menu-orn.bl{bottom:-18px;left:-18px;background-image:url("data:image/svg+xml;utf8,")}
.menu-orn.br{bottom:-10px;right:-10px;background-image:url("data:image/svg+xml;utf8,")}
.menu-orn{position:fixed;width:clamp(90px,13vw,170px);aspect-ratio:1;background-size:contain;background-repeat:no-repeat;opacity:.32;pointer-events:none;z-index:0}
.menu .wrap{position:relative;z-index:1}
@media (max-width:640px){.menu-orn{width:84px;opacity:.22}.menu-orn.tr{display:none}}
@media (min-width:960px){#mTabs{padding-right:16px}#mTabs::after{content:'';position:absolute;top:6px;bottom:6px;right:2px;width:7px;background:linear-gradient(90deg,#3a2a14,#b88e4c 40%,#ecd194 55%,#8a6630 80%,#2a1e0e),repeating-linear-gradient(180deg,transparent 0 58px,rgba(0,0,0,.6) 58px 60px,#c99d57 60px 66px,rgba(0,0,0,.6) 66px 68px);background-blend-mode:normal;border-radius:4px;box-shadow:1px 1px 0 rgba(0,0,0,.6);opacity:.8}#mTabs{position:sticky}}
.bpic{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;width:186px}
.bmarks{display:flex;justify-content:center;gap:2px}
.bmarks figure{margin:0;display:flex;flex-direction:column;align-items:center}
.bmarks figcaption{font:700 9px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
@media (max-width:480px){.bpic{max-width:none;flex-direction:row;flex-wrap:wrap}}
/* ===== Anzeigen oben, v4 (Okt. 2026, Handy und Rechner gleich): ein Objekt je Seite. Das runde Bild ist der Anker (links Norbert,
rechts die aktuelle Marke des Gegners), aus seinem Rand wächst eine Messingtafel mit Schienen oben und unten und abgerundetem Ende;
eine genietete Klammer sitzt, wo die Tafel aus dem Kreis kommt. Norbert: Gebiet, Ort, Leben, Erfahrung, Zustände; Gegner gespiegelt. ===== */
:root{--hb:84px;--plate-h:calc(var(--hb) * .74)}
.mode-touch{--hb:66px;--plate-h:calc(var(--hb) * .82)}
#nbHud.nbhud{left:10px;right:auto;top:calc(env(safe-area-inset-top,0px) + 8px);width:var(--hb);height:var(--hb);z-index:6}
#nbHud .face img,#nbHud .face canvas{box-shadow:0 0 0 1.5px #0a0e0d}
#hud .top{display:block;padding:0}
#hud .top .stats,#foeHud.foehud{box-sizing:border-box;position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px + (var(--hb) - var(--plate-h)) / 2);width:calc(50% - 16px - var(--hb) / 2);max-width:340px;min-height:var(--plate-h);margin:0;
border:0;border-image:none;background:linear-gradient(180deg,rgba(30,44,41,.94),rgba(10,20,19,.94));z-index:5;align-content:center;gap:3px;transform:none}
#hud .top .stats{left:calc(10px + var(--hb) / 2);padding:6px 14px 7px calc(var(--hb) / 2 + 16px);border-radius:0 14px 14px 0;
box-shadow:inset 0 2px 0 #c99d57,inset 0 -2px 0 #6f5126,inset -3px 0 0 #8a6a3a,0 0 0 1.5px #0a0e0d,0 5px 12px rgba(0,0,0,.5)}
#foeHud.foehud{right:calc(10px + var(--hb) / 2);left:auto;padding:6px calc(var(--hb) / 2 + 16px) 7px 14px;border-radius:14px 0 0 14px;text-align:right;
box-shadow:inset 0 2px 0 #c99d57,inset 0 -2px 0 #6f5126,inset 3px 0 0 #8a6a3a,0 0 0 1.5px #0a0e0d,0 5px 12px rgba(0,0,0,.5)}
#foeHud.foehud.elite{box-shadow:inset 0 2px 0 #ecd194,inset 0 -2px 0 #8a6630,inset 3px 0 0 #c99d57,0 0 0 1.5px #0a0e0d,0 5px 12px rgba(0,0,0,.5)}
#foeHud.foehud.boss{box-shadow:inset 0 2px 0 #c6a6ff,inset 0 -2px 0 #6d4fb0,inset 3px 0 0 #8a6cc8,0 0 0 1.5px #0a0e0d,0 5px 12px rgba(0,0,0,.5)}
#foeHud .fh-face{position:absolute;right:calc(var(--hb) / -2);left:auto;top:50%;transform:translateY(-50%);width:var(--hb);height:var(--hb);z-index:2}
#foeHud .fh-txt b{font:400 19px/1.05 var(--display)}
#foeHud .fh-bar{height:6px;margin-left:auto}
#hud .stats .bar{display:block;height:6px;border-radius:0}
#hud .stats .bar.xp{height:3px}
.mode-touch #hud .stats .bar.chg,.mode-touch #hud .stats .pothud{display:none}
.mode-touch #foeHud .fh-txt b{font:700 12px/1.2 var(--ui);letter-spacing:.04em}
.mode-touch .loc{font-size:12px}
.fh-face.mark{border-radius:0;overflow:visible;box-shadow:none;background:none}
.fh-face.mark canvas{width:132%;height:132%;margin:-16%;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55))}
.mode-touch .qlog,.mode-desktop .qlog,.qlog{top:calc(env(safe-area-inset-top,0px) + var(--hb) + 22px)}
.nbbubble,.mode-touch .nbbubble,.mode-desktop .nbbubble{left:14px;top:calc(env(safe-area-inset-top,0px) + var(--hb) + 22px)}
/* ===== Dialog als Vollbild wie das Menü (Okt. 2026): Bild, Kopf und Text stehen fest, nur die Antworten scrollen ===== */
.sheet{top:0;height:100%;max-height:none;overflow:hidden;display:flex;flex-direction:column;z-index:20;box-sizing:border-box}
.sheet .in{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;gap:10px}
.sheet .in>*{flex:none}
#sText{flex:0 1 auto;min-height:0;overflow:auto} /* sehr lange Texte scrollen für sich, sonst steht der Text fest */
.sheet .opts{flex:1 1 0;min-height:96px;overflow:auto;overscroll-behavior:contain;align-content:start;margin-top:4px;padding:2px 2px 8px}
.sart{flex:none}
@media (orientation:portrait){.sart{max-height:30vh}.sart img{height:30vh}}
@media (orientation:landscape) and (max-height:520px){
.sheet .in{display:grid;grid-template-rows:auto auto minmax(0,1fr);align-content:stretch}
.sheet .opts{grid-row:1 / -1;position:static;align-self:stretch;height:100%;min-height:0}
#sText{overflow:auto;min-height:0}
}
#hud .stats .chips{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mode-touch .qlog,.mode-touch .nbbubble{top:calc(env(safe-area-inset-top,0px) + var(--hb) + 34px)}
/* Ein zusammenhängender Rahmen: Messingring des Kreises (::before) hinter der Tafelfläche (::after); wo die Tafel ansetzt, verdeckt sie
den Ring, ihre Schienen laufen in ihn über. Die Tafel selbst beginnt in der Kreismitte, der Inhalt liegt darüber. */
#hud .top .stats,#foeHud.foehud{background:none;box-shadow:none;border-radius:0}
#hud .top .stats>*,#foeHud.foehud>*{position:relative;z-index:2}
#foeHud.foehud>.fh-face{position:absolute;z-index:3}
#hud .top .stats::before,#foeHud.foehud::before{content:'';position:absolute;top:calc((var(--plate-h) - var(--hb)) / 2 - 6px);width:calc(var(--hb) + 12px);height:calc(var(--hb) + 12px);border-radius:50%;z-index:0;pointer-events:none;
background:radial-gradient(circle,#1a2422 0 calc(var(--hb) / 2 - 1px),transparent calc(var(--hb) / 2)),linear-gradient(135deg,#ecd194,#b88e4c 45%,#6f5126);box-shadow:0 0 0 1.5px #0a0e0d,0 6px 16px rgba(0,0,0,.6)}
#hud .top .stats::before{left:calc(var(--hb) / -2 - 6px)}
#foeHud.foehud::before{right:calc(var(--hb) / -2 - 6px)}
#hud .top .stats::after,#foeHud.foehud::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(30,44,41,.96),rgba(10,20,19,.96))}
#hud .top .stats::after{left:0;border-radius:0 14px 14px 0;box-shadow:inset 0 3px 0 #c99d57,inset 0 -3px 0 #6f5126,inset -3px 0 0 #8a6a3a,1.5px 0 0 #0a0e0d,0 -1.5px 0 #0a0e0d,0 1.5px 0 #0a0e0d}
#foeHud.foehud::after{right:0;border-radius:14px 0 0 14px;box-shadow:inset 0 3px 0 #c99d57,inset 0 -3px 0 #6f5126,inset 3px 0 0 #8a6a3a,-1.5px 0 0 #0a0e0d,0 -1.5px 0 #0a0e0d,0 1.5px 0 #0a0e0d}
#foeHud.foehud.elite::after{box-shadow:inset 0 3px 0 #ecd194,inset 0 -3px 0 #8a6630,inset 3px 0 0 #c99d57,-1.5px 0 0 #0a0e0d,0 -1.5px 0 #0a0e0d,0 1.5px 0 #0a0e0d}
#foeHud.foehud.boss::after{box-shadow:inset 0 3px 0 #c6a6ff,inset 0 -3px 0 #6d4fb0,inset 3px 0 0 #8a6cc8,-1.5px 0 0 #0a0e0d,0 -1.5px 0 #0a0e0d,0 1.5px 0 #0a0e0d}
#hud .top .stats{padding-left:calc(var(--hb) / 2 + 12px)}
#foeHud.foehud{padding-right:calc(var(--hb) / 2 + 12px)}
#hud .stats .chips{display:flex;flex-wrap:nowrap;gap:10px}
:root{--plate-h:calc(var(--hb) * .86)}
.mode-touch{--plate-h:calc(var(--hb) * .82)}
/* Zustände und Stärkungen unter dem Rahmen (Symbole), nicht mehr in der Tafel */
#hud .top .stats>.auras,#foeHud.foehud>.auras{position:absolute;top:calc(100% + 6px);display:flex;gap:5px;z-index:2;pointer-events:auto}
#hud .top .stats>.auras{left:calc(var(--hb) / 2 + 12px)}
#foeHud.foehud>.auras{right:calc(var(--hb) / 2 + 12px);flex-direction:row-reverse}
.aura{position:relative;width:28px;height:28px;display:block;background:#101816;box-shadow:0 0 0 1.5px #0a0e0d,inset 0 0 0 2px var(--warn),2px 2px 0 rgba(0,0,0,.5);border-radius:4px}
.aura.buff{box-shadow:0 0 0 1.5px #0a0e0d,inset 0 0 0 2px var(--tech),2px 2px 0 rgba(0,0,0,.5)}
.aura img{width:100%;height:100%;display:block}
.aura b{position:absolute;right:1px;bottom:0;font:700 10px/1 var(--ui);color:#fff;text-shadow:0 0 2px #000,0 0 2px #000}
.aura small{position:absolute;left:0;right:0;top:calc(100% + 2px);text-align:center;font:700 10px/1 var(--ui);color:var(--ink);text-shadow:0 1px 2px #000}
.mode-touch .aura{width:22px;height:22px}.mode-touch .aura small{font-size:9px}
.mode-touch .qlog,.mode-touch .nbbubble{top:calc(env(safe-area-inset-top,0px) + var(--hb) + 50px)}
.mode-desktop .qlog,.mode-desktop .nbbubble{top:calc(env(safe-area-inset-top,0px) + var(--hb) + 54px)}
/* Ein Umriss für Kreis und Tafel (hudFrame): die bisherigen Teilrahmen aus, Bilder mit feiner dunkler Kante im Umriss */
#hud .top .stats::before,#hud .top .stats::after,#foeHud.foehud::before,#foeHud.foehud::after{content:none}
#hud .top .stats,#foeHud.foehud{background:none!important;box-shadow:none!important;border-radius:0}
#nbHud .face img,#nbHud .face canvas{box-shadow:0 0 0 1.5px #0a0e0d}
#nbHud.dot::after{content:none}
#hud .top .stats>.nbdot{position:absolute;top:8px;right:10px;width:10px;height:10px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 2px #0a0e0d,0 0 6px rgba(232,171,76,.7);z-index:3}
#hud .top .stats>.nbdot[hidden]{display:none}
/* Lebensleisten mit Lebenspunkten als Zahl (Mer und Gegner): am Rechner dick, am Handy etwas schmaler mit kleinerer Zahl */
.mode-desktop #hud .stats .bar:not(.xp):not(.chg),.mode-desktop #foeHud .fh-bar{position:relative;height:15px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.mode-desktop #hpTxt,.mode-desktop #fhHp{position:absolute;inset:0;display:grid;place-items:center;font:700 11px/1 var(--ui);letter-spacing:.04em;color:#fff4dc;text-shadow:0 1px 2px #000,0 0 3px #000;font-variant-numeric:tabular-nums;z-index:1}
#fhHp{display:none}
.mode-touch #hud .stats .bar:not(.xp):not(.chg),.mode-touch #foeHud .fh-bar{position:relative;height:12px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.mode-touch #hpTxt,.mode-touch #fhHp{position:absolute;inset:0;display:grid;place-items:center;font:700 9.5px/1 var(--ui);letter-spacing:.03em;color:#fff4dc;text-shadow:0 1px 2px #000,0 0 3px #000;font-variant-numeric:tabular-nums;z-index:1}
.mode-desktop #foeHud .fh-bar{width:100%;min-width:140px}
/* Rechner: Norbert größer, Tafel mittig daran; Gebiet und besonderer Ort in einem eigenen Rahmen über der Angriffsleiste */
.mode-desktop{--hb:100px}
.mode-desktop #hudLoc{display:none}
.hbloc{display:none}
.mode-desktop .hbloc{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:-1px;display:flex;align-items:center;gap:10px;max-width:calc(100% - 40px);padding:5px 14px 4px;
background:rgba(13,26,25,.95);border:1px solid rgba(236,228,208,.16);border-bottom:0;border-radius:12px 12px 0 0;box-shadow:inset 0 2px 0 rgba(201,157,87,.55),0 -4px 12px rgba(0,0,0,.35);white-space:nowrap}
.mode-desktop .hbloc::before,.mode-desktop .hbloc::after{content:'';position:absolute;bottom:0;width:12px;height:12px;background:radial-gradient(circle at 0 0,transparent 11px,rgba(236,228,208,.16) 11px 12px,rgba(13,26,25,.95) 12px)}
.mode-desktop .hbloc::before{right:100%;transform:scaleX(-1)}
.mode-desktop .hbloc::after{left:100%}
.hbloc span{overflow:hidden;text-overflow:ellipsis;font:700 13px/1.2 var(--ui);letter-spacing:.06em;color:var(--ink)}
.hbloc span small{font:600 13px/1.2 var(--ui);color:var(--lamp);letter-spacing:.04em}
.hbloc span small::before{content:' – ';color:var(--mute)}
.hbl-ic{display:block;flex:none;width:16px;height:16px;color:#c99d57}
.hbl-ic svg{width:100%;height:100%;display:block}
/* Ortsrahmen über der Leiste: Gebiet oder Ort, darunter der Hinweis auf E */
.mode-desktop .hbloc{padding:5px 14px 5px}
.hbloc span{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.hbloc span small::before{content:none}
.hbloc span b,.hbloc span small{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hbloc span em{font:italic 400 12.5px/1.15 var(--body);color:var(--mute);letter-spacing:.02em;display:flex;align-items:center;gap:5px}
.hbloc span em kbd{font:700 10px/1 var(--ui);font-style:normal;color:#0d1a19;background:#c99d57;border-radius:3px;padding:2px 5px;box-shadow:0 1px 0 #6f5126}
/* Ortsrahmen: Schrift etwa 75 % größer */
.mode-desktop .hbloc{padding:7px 20px 8px;gap:14px;border-radius:16px 16px 0 0}
.hbloc span b,.hbloc span small{font-size:23px;line-height:1.15}
.hbloc span em{font-size:21px;gap:8px}
.hbloc span em kbd{font-size:16px;padding:3px 8px;border-radius:4px}
.hbl-ic{width:26px;height:26px}
/* Ortsrahmen: Schrift wieder etwas kleiner; Gesicht der Figur statt Kompass */
.hbloc span b,.hbloc span small{font-size:19px}
.hbloc span em{font-size:17px;gap:7px}
.hbloc span em kbd{font-size:13px;padding:2px 7px}
.hbl-ic{width:24px;height:24px}
.hbl-ic.face{width:34px;height:34px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #c99d57,0 0 0 3.5px #0a0e0d}
.hbl-ic.face img{width:100%;height:100%;object-fit:cover;display:block}
/* Plaketten oben: mehr Abstand zum Bildschirmrand; Gegner nur mit dem Kopfbild im Kreis */
.mode-desktop #nbHud.nbhud{left:24px;top:calc(env(safe-area-inset-top,0px) + 20px)}
.mode-desktop #hud .top .stats{left:calc(24px + var(--hb) / 2)}
.mode-desktop #foeHud.foehud{right:calc(24px + var(--hb) / 2)}
.mode-touch #nbHud.nbhud{left:max(16px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 14px)}
.mode-touch #hud .top .stats{left:calc(max(16px,env(safe-area-inset-left,0px)) + var(--hb) / 2)}
.mode-touch #foeHud.foehud{right:calc(max(16px,env(safe-area-inset-right,0px)) + var(--hb) / 2)}
#foeHud .fh-face.head{border-radius:50%;overflow:hidden;background:#1a2422;box-shadow:0 0 0 1.5px #0a0e0d}
#foeHud .fh-face.head img,#foeHud .fh-face.head canvas{width:100%;height:100%;margin:0;display:block;object-fit:cover;filter:none;border-radius:50%}
#foeHud .fh-face.head::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 32% 28%,rgba(255,240,210,.14),rgba(0,0,0,0) 55%,rgba(0,0,0,.38) 100%)}
/* Menü liegt über den Plaketten oben (Norbert z 6, Gegner z 5), Dialoge (z 20) bleiben darüber */
#menu.screen{z-index:15}
/* Sprecherzeilen im Dialog (Fassung 2): Name vor dem Text, Mer in Türkis */
.sheet p.spk b{display:inline-block;margin-right:6px;font:700 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--lamp)}
.sheet p.spk.w-mer{font-style:italic;color:#bfe9e3}.sheet p.spk.w-mer b{color:var(--tech,#73cdc4)}
.sheet p.spk.w-norbert b{color:#73cdc4}
/* Erinnerungen (js/memory.js): Projektion über allem, auch über dem Menü */
#mem{position:fixed;inset:0;z-index:40;background:#040908;color:var(--ink);cursor:pointer;user-select:none}
#mem canvas{position:absolute;inset:0;width:100%;height:100%}
#mem .mem-head{position:absolute;left:24px;top:calc(env(safe-area-inset-top,0px) + 20px);display:grid;gap:2px;max-width:70%}
#mem .mem-head small{font:700 11px/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#73cdc4}
#mem .mem-head b{font:400 26px/1.1 var(--display);color:#e9dcc0}
#mem .mem-head span{font:italic 14px/1.3 var(--body);color:var(--mute)}
#mem .mem-cap{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 40px);width:min(760px,calc(100% - 40px));padding:14px 18px;background:rgba(6,14,13,.78);border:1px solid rgba(115,205,196,.35);border-radius:6px;min-height:84px}
#mem .mem-cap b{display:block;font:700 11px/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--lamp);min-height:13px;margin-bottom:6px}
#mem .mem-cap b.w-norbert{color:#73cdc4}
#mem .mem-cap p{margin:0;font:18px/1.45 var(--body);color:#ece4d0}
#mem .mem-cap p.narr{font-style:italic;color:#a9c9c4}
#mem .mem-cap i{position:absolute;right:12px;bottom:6px;font:600 10px/1 var(--ui);color:var(--mute);letter-spacing:.06em}
#mem .mem-skip{position:absolute;right:20px;top:calc(env(safe-area-inset-top,0px) + 20px)}
.mem-list{margin:0 0 18px}.mem-list h3{margin:0 0 8px}
.mem-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:rgba(13,26,25,.6);margin-bottom:6px}
.mem-row b{display:block}.mem-row small{color:var(--mute)}
/* Prüfung der Startgebiete (js/prolog.js pickCheck) */
.pickchk{font:13px var(--ui);color:var(--mute);margin:-2px 0 4px 44px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.pickchk.ok{color:var(--friend)}.pickchk.warn{color:var(--caution)}.pickchk.block{color:var(--warn)}
.pickchk .chip{padding:4px 10px;font-size:13px}
.pickcover{font:700 12px var(--ui);padding:2px 8px;border-radius:999px;border:1px solid currentColor}.pickcover.on{color:var(--friend)}.pickcover.off{color:var(--caution)} /* eigene Kartenablage oder live aus OSM */
.pickcovernote{border-left:3px solid var(--brass);padding-left:10px}
#btnPrologue:disabled{opacity:.45;cursor:not-allowed}
/* Testarena im Gegner-Fenster (js/arena.js) */
.arenabox{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);display:grid;gap:6px}
.arenabox .lbl{margin:4px 0 0}
/* Gezeichnete Symbole der Fähigkeiten auf den Tasten (img/art/skills, js/game.js updateHud) */
.act.skimg,.slot.skimg{background-image:var(--skimg);background-size:82%;background-position:center;background-repeat:no-repeat}
.act.skimg>span{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap;text-shadow:0 1px 2px #000}
.slot.skimg{background-size:30px 30px;background-position:center 7px}.slot.skimg>span{position:absolute;left:0;right:0;bottom:4px;font-size:9px;letter-spacing:.03em;text-shadow:0 1px 2px #000}
.slot.on>i{background:rgba(115,205,196,.32);border-top:2px solid var(--tech)} /* Fähigkeit wirkt gerade: türkiser Balken läuft ab (js/game.js skActive) */
/* Testarena: Tastenbelegung per Auswahlliste (js/arena.js arenaSlots) */
.arenaslots{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:2px 0 6px}
.arenaslot{display:grid;gap:4px;align-content:start}
.arenasel{width:100%;padding:7px 8px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:600 13px var(--ui)}
.arenadesc{margin:0;font-size:12px;line-height:1.35;color:var(--mute)}
.spawn-box .chip.ghostchip{border-style:dashed;opacity:.85}
.lore-row{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:center}.lore-thumb{width:72px;height:45px;object-fit:cover;border-radius:4px;border:1px solid var(--line)} /* Welterinnerungen im Atlas (js/lore.js) */
/* ===== Menü als Fenster in drei Bereichen (Okt. 2026) =====
Außen dunkle Werkbank (das Spiel ruht), innen ein gerahmtes Fenster mit eigenem Grund. 1 Kopfzeile fest, 2 Reiterleiste fest (scrollt nur,
wenn sie nicht passt), 3 Inhalt (#mBody) mit eigenem Scrollen. Der gewählte Reiter wird von einem Messinghebel markiert (#mLever,
js/ui.js menuLever), der mit Nachfedern auf der Schiene gleitet und beim Einrasten Dampf ablässt. Am Handy: Reiter als Zeile, Hebel darunter. */
#menu.screen{overflow:hidden;display:flex;justify-content:center;align-items:stretch;padding:calc(env(safe-area-inset-top,0px) + clamp(8px,2.2vh,24px)) clamp(6px,2vw,32px) calc(env(safe-area-inset-bottom,0px) + clamp(8px,2.2vh,24px));
background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(0,0,0,0) 30%,rgba(0,0,0,.65) 100%),repeating-linear-gradient(90deg,rgba(255,220,160,.025) 0 2px,transparent 2px 46px),var(--grime),linear-gradient(180deg,#0a0d0c,#050707);background-size:auto,auto,640px 640px,auto}
#menu .wrap{box-sizing:border-box;width:100%;max-width:1180px;height:100%;margin:0;display:grid;align-items:stretch;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:0;padding:8px 12px 0;
border:16px solid transparent;border-image:url(../img/ui/panel.svg) 24 / 16px round;background:var(--sheet-bg);background-size:auto,640px 640px,auto,auto,200px,auto;box-shadow:0 18px 60px rgba(0,0,0,.75),0 0 0 1px rgba(184,142,76,.15)}
#menu .wrap>.mhead{grid-column:1/-1;grid-row:1;padding:2px 2px 10px;margin:0 0 8px;border-bottom:1px solid rgba(184,142,76,.35);box-shadow:0 1px 0 rgba(0,0,0,.6)}
#menu .wrap>p.fine{display:none}
.mbody{grid-column:1/-1;grid-row:3;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:8px 6px 24px 2px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#8a6630 transparent}
.mbody>.pane{margin-bottom:16px}.mbody>p.fine{margin:18px 0 0;opacity:.75}
/* Reiterleiste am Handy: Zeile mit Schiene darunter */
#mTabs{grid-row:2;position:relative;padding:2px 2px 16px;margin:0}
#mTabs::before{content:'';position:absolute;left:4px;right:4px;bottom:5px;height:5px;border-radius:3px;background:linear-gradient(180deg,#2a1e0e,#b88e4c 40%,#ecd194 55%,#8a6630 80%,#2a1e0e);opacity:.75;box-shadow:0 1px 0 rgba(0,0,0,.6)}
#mTabs .tab{transition:transform .25s cubic-bezier(.34,1.56,.64,1),color .2s,background-color .2s,box-shadow .2s}
#mTabs .tab:active{transform:scale(.96)}
#mTabs .tab[aria-selected=true]{background:rgba(232,171,76,.14);color:var(--lamp);text-shadow:none;box-shadow:inset 0 0 0 1px rgba(232,171,76,.35),0 0 14px rgba(232,171,76,.18)}
/* Hebel */
.mlever{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:2;transition:transform .55s cubic-bezier(.34,1.45,.55,1)}
.mlever b{position:absolute;display:block}
.mlever.h{transform:translate(var(--x,0px),0);top:auto;bottom:7px}
.mlever.h .rod{left:calc(var(--w,60px) / -2 + 10px);width:calc(var(--w,60px) - 20px);bottom:-1px;height:7px;border-radius:4px;background:linear-gradient(180deg,#fff1cf,#e8ab4c 45%,#8a5a20);box-shadow:0 0 10px rgba(232,171,76,.55),0 1px 0 rgba(0,0,0,.7);transition:width .45s cubic-bezier(.34,1.45,.55,1),left .45s cubic-bezier(.34,1.45,.55,1)}
.mlever.h .knob{left:-8px;bottom:-6px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1cf,#c99d57 45%,#6a4a1c);border:1.5px solid #120d06;box-shadow:0 2px 4px rgba(0,0,0,.7)}
.mlever .knob::after{content:'';position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(18,13,6,.6)}
.mlever .puff{left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,rgba(236,228,208,.55),rgba(236,228,208,0) 70%);opacity:0}
.mlever.h .puff{top:auto;bottom:-14px}
.mlever.hit .puff{animation:mpuff .7s ease-out .32s}
.mlever.hit .knob{animation:mknock .5s ease-out .3s}
@keyframes mpuff{0%{opacity:.9;transform:scale(.4) translate(0,0)}100%{opacity:0;transform:scale(1.8) translate(6px,-10px)}}
@keyframes mknock{0%{transform:scale(1)}30%{transform:scale(1.25)}60%{transform:scale(.92)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.mlever,.mlever b,#mTabs .tab{transition:none!important;animation:none!important}}
/* Rechner: Reiter als Spalte links, Schiene rechts daneben, Hebelarm zeigt auf den Reiter */
@media (min-width:960px){
#menu .wrap{grid-template-columns:232px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:22px;padding:10px 16px 0 10px}
#mTabs{grid-column:1;grid-row:2;position:relative;top:auto;align-self:stretch;min-height:0;overflow-y:auto;overflow-x:hidden;flex-direction:column;gap:8px;padding:6px 34px 16px 4px;scrollbar-width:thin;scrollbar-color:#8a6630 transparent}
#mTabs::before{display:none}
#mTabs::after{top:6px;bottom:auto;height:calc(100% - 12px);min-height:520px;right:8px}
#mTabs .tab:hover{transform:translateX(3px)}
#mTabs .tab[aria-selected=true]{transform:translateX(8px)}
.mbody{grid-column:2;grid-row:2;padding:4px 10px 28px 2px}
.mlever{left:auto;right:4px;transform:translate(0,var(--y,0px))}
.mlever .rod{right:12px;top:-3px;width:26px;height:6px;border-radius:3px;background:linear-gradient(180deg,#fff1cf,#c99d57 45%,#6a4a1c);border:1px solid #120d06;box-shadow:0 2px 3px rgba(0,0,0,.6)}
.mlever .rod::before{content:'';position:absolute;left:-7px;top:-4px;width:9px;height:12px;border-radius:2px;background:linear-gradient(90deg,#8a5a20,#e8ab4c);border:1px solid #120d06} /* Klaue am Reiter */
.mlever .knob{right:-1px;top:-10px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1cf,#c99d57 45%,#6a4a1c);border:1.5px solid #120d06;box-shadow:0 3px 6px rgba(0,0,0,.7),0 0 12px rgba(232,171,76,.35)}
.mlever .puff{right:-6px;left:auto;top:-16px;width:32px;height:32px}
}
/* Handy quer (wenig Höhe): Kopfzeile schmal */
@media (orientation:landscape) and (max-height:520px){ #menu .wrap{padding:4px 8px 0;border-width:10px} #menu .wrap>.mhead{padding-bottom:4px;margin-bottom:4px} #mTabs{padding-bottom:12px} }
/* Lange Listen im Menü (Bestiarium, Atlas, Welterinnerungen): Karten außerhalb des sichtbaren Bereichs überspringt der Browser beim Zeichnen,
das hält das Scrollen am Handy flüssig; Platzhaltergröße, damit die Scrollleiste nicht springt */
#mBestiary .beast{content-visibility:auto;contain-intrinsic-block-size:auto 340px}
.mbody .atlas,.mbody .mem-row{content-visibility:auto;contain-intrinsic-block-size:auto 90px}
.beast img.vecbeast{flex:none;background:radial-gradient(circle,rgba(176,132,255,.18),transparent 70%);border-radius:8px}
.mbody{will-change:scroll-position}
/* ===== Startseite (Okt. 2026): Steampunk-Atlas =====
Oben Titel und Mer (freigestellt aus mer_aware, img/art/ui/merhero.webp von tools/art-build.py) über einer langsam drehenden Kompassrose,
darunter Messing-Tafeln (.spanel, Rahmen wie das Menüfenster). Handy: eine Spalte, Mer klein über dem Titel. Rechner ab 960 px:
Titel links, Mer rechts, Tafeln in zwei Spalten (Spiel links breit, Sicherung und Sprache rechts). */
:root{
--rose:url("data:image/svg+xml;utf8,");
}
#start .startwrap{max-width:1240px;gap:clamp(14px,2.4vw,26px)}
/* Kopf: Titel und Mer */
.hero{position:relative;display:grid;gap:4px;align-items:center}
.herotext{display:grid;gap:12px;position:relative;z-index:1}
.kicker{margin:0;font:700 12px var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--brass);display:flex;align-items:center;gap:10px;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.kicker::before,.kicker::after{content:'';height:1px;flex:0 0 28px;background:linear-gradient(90deg,transparent,var(--brass))}
.kicker::after{flex:1 1 auto;max-width:120px;background:linear-gradient(90deg,var(--brass),transparent)}
#start h1{font-size:clamp(3rem,13vw,5.4rem)}
#start .lead{max-width:52ch;font-size:16.5px}
.heromer{position:relative;justify-self:center;width:min(64vw,250px);aspect-ratio:1;margin:-10px 0 -14px;order:-1;pointer-events:none}
.heromer::before{content:'';position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,rgba(8,15,14,.82) 38%,rgba(8,15,14,.5) 58%,transparent 72%)}
.heromer>*{position:absolute}
.hm-rose{inset:2%;background:var(--rose) center/contain no-repeat;opacity:.75;animation:hmSpin 160s linear infinite;filter:drop-shadow(0 0 8px rgba(184,142,76,.25))}
.hm-glow{inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(127,227,214,.22),rgba(232,171,76,.12) 45%,transparent 70%);animation:hmPulse 5s ease-in-out infinite}
.hm-mer{left:6%;top:4%;width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.7)) drop-shadow(0 0 1px rgba(255,236,190,.6));animation:hmFloat 6.5s ease-in-out infinite}
.hm-shadow{left:24%;right:24%;bottom:4%;height:7%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);animation:hmShadow 6.5s ease-in-out infinite}
.hm-jet{width:5%;height:12%;border-radius:50%;background:radial-gradient(ellipse at 50% 0,rgba(127,227,214,.75),rgba(127,227,214,0) 70%);filter:blur(2px);animation:hmFloat 6.5s ease-in-out infinite,hmJet .9s ease-in-out infinite alternate}
.hm-jet.a{left:31.5%;top:60%}.hm-jet.b{left:63%;top:59%}
@keyframes hmSpin{to{transform:rotate(360deg)}}
@keyframes hmFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-4%) rotate(1deg)}}
@keyframes hmShadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.82);opacity:.6}}
@keyframes hmPulse{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes hmJet{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.heromer *{animation:none!important}}
/* Tafeln */
.startgrid{display:grid;gap:clamp(14px,2vw,22px);align-items:start}
.scol{display:grid;gap:clamp(14px,2vw,22px);min-width:0}
.spanel{position:relative;display:grid;gap:12px;min-width:0;border:16px solid transparent;border-image:url(../img/ui/panel.svg) 24 / 16px round;background:var(--sheet-bg);background-size:auto,640px 640px,auto,auto,200px,auto;background-origin:border-box;padding:6px 10px 10px;box-shadow:0 14px 40px rgba(0,0,0,.55)}
#start .spanel .fine,#start .spanel .lbl{text-shadow:none}
.sph{margin:0;display:flex;align-items:center;gap:10px;font:400 clamp(1.5rem,5vw,1.9rem)/1 var(--display);color:var(--paper);letter-spacing:.01em;text-shadow:2px 2px 0 rgba(0,0,0,.6)}
.sph::before{content:'';flex:none;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1cf,#c99d57 45%,#6a4a1c);border:1.5px solid #120d06;box-shadow:0 1px 2px rgba(0,0,0,.7)}
.sph::after{content:'';flex:1;height:2px;margin-left:4px;background:linear-gradient(90deg,rgba(184,142,76,.75),rgba(184,142,76,0));box-shadow:0 1px 0 rgba(0,0,0,.6)}
.searchrow input{min-width:180px}
.searchrow .chip{align-self:center}
.presetbox{border-top:1px dashed rgba(184,142,76,.35);padding-top:12px}
.presetbox .lbl{margin-bottom:8px}
.radii .fine{margin:8px 0 0}
.btn.big{padding:15px 22px;font-size:17px;letter-spacing:.08em}
#start .btn{background:linear-gradient(180deg,#f2c070,#d99a3e 55%,#a96e24);box-shadow:inset 0 1px 0 rgba(255,241,207,.6),inset 0 -2px 0 rgba(60,36,10,.45),0 2px 0 rgba(0,0,0,.55)}
#start .btn.ghost{background:rgba(236,228,208,.04);box-shadow:none}
#start .btn:not([disabled]):hover{filter:brightness(1.08)}
#start .btn:not([disabled]):active{transform:translateY(1px)}
.bkrow .btn{flex:1 1 calc(50% - 8px);padding:10px 12px;font-size:14px}
.osmline{opacity:.8;margin:0}
/* Durchläufe als Messingschilder mit Mer in ihrer Ausbaustufe */
#start .runlist{max-height:none;overflow:visible;gap:10px}
#start .btn.run{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:6px;background:linear-gradient(180deg,rgba(242,192,112,.95),rgba(201,141,58,.95) 55%,rgba(150,98,34,.95));border:1px solid #3a2810}
#start .btn.run b{font:700 17px var(--ui);color:#1a1409}
#start .btn.run small{font:13px var(--ui);color:rgba(26,20,9,.75)}
#start .btn.run>span{display:grid;gap:2px;min-width:0}#start .btn.run>span b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.runmer{width:64px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));border-radius:4px;background:radial-gradient(ellipse,rgba(18,13,6,.35),transparent 70%)}
.runarrow{font:400 28px/1 var(--display);color:rgba(26,20,9,.6);font-style:normal;transition:transform .2s}
#start .btn.run:hover .runarrow{transform:translateX(4px)}
#start .pick{border:1px solid rgba(232,171,76,.55);border-radius:6px;background:rgba(232,171,76,.05);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
/* Rechner: Titel links, Mer rechts, zwei Spalten */
@media (min-width:960px){
#start.screen{padding-top:calc(env(safe-area-inset-top,0px) + 34px)}
.hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px}
.heromer{order:0;width:min(420px,100%);margin:-30px 0 -40px}
#start h1{font-size:clamp(4.6rem,6.6vw,6.6rem)}
#start .lead{font-size:18px}
.startgrid{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr)}
.scol.side{position:sticky;top:12px}
}
/* Handy quer: Mer neben den Titel, kleiner */
@media (max-width:959px) and (orientation:landscape) and (max-height:520px){
.hero{grid-template-columns:minmax(0,1fr) 180px;gap:10px}
.heromer{order:0;width:180px;margin:0}
#start h1{font-size:clamp(2.6rem,7vw,3.6rem)}
.startgrid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
}
@media (max-width:420px){.spanel{border-width:12px;border-image-width:12px;padding:4px 6px 8px}.bkrow .btn{flex-basis:100%}}
/* Controller (js/pad.js): gewählter Knopf deutlich, Controller-Zeichen auf der Leiste rund */
.padfocus{outline:3px solid var(--lamp)!important;outline-offset:3px;box-shadow:0 0 0 7px rgba(232,171,76,.22),0 0 18px rgba(232,171,76,.35)!important}
kbd.padkey{border-radius:999px;min-width:1.9em;text-align:center;font-weight:800;letter-spacing:0}
.pad #hbRanged kbd{opacity:.7}
/* Sicherung: Code als Text nur aufgeklappt (Datei ist der Normalweg) */
.bkcode{margin-top:8px}
.bkcode>summary{cursor:pointer;font:700 13px var(--ui);letter-spacing:.04em;color:var(--mute);list-style:none;padding:4px 0;display:inline-flex;align-items:center;gap:6px}
.bkcode>summary::-webkit-details-marker{display:none}
.bkcode>summary::before{content:'▸';color:var(--brass);transition:transform .2s}
.bkcode[open]>summary::before{transform:rotate(90deg)}
.bkcode>summary:hover{color:var(--ink)}
.bkcode .fine{margin:4px 0 8px}