/* Tinker Merge - Palette aus GDD 11 (Entwurf). System-Fonts (TODO: Fredoka/Nunito selbst hosten, Lizenz pruefen). */
:root{--navy:#1F3A4D;--copper:#C8742C;--cream:#FFF4DE;--teal:#2A9D8F;--yellow:#F4B63F;--rust:#B5482F;--wood:#8C5A3A;--ink:#2B2118;
 --bg:#1F3A4D;--fg:#FFF4DE;--panel:#2A4A60;--line:#4D7088;--muted:#B9CAD4;--cell:#33566E;--cellb:#3C6580;--accent:#F4B63F;--accent-fg:#2B2118;--focus:#FFFFFF;--danger:#B5482F;
 --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
/* Gebiets-Themes: Hintergrund/Panel/Zellen je Gebiet leicht umgefaerbt (Texte bleiben Creme auf dunkel) */
html[data-area="1"]{--bg:#1F3A4D;--panel:#2A4A60;--cell:#33566E;--cellb:#3C6580;--line:#4D7088}
html[data-area="2"]{--bg:#27394A;--panel:#33495E;--cell:#3A5570;--cellb:#44648A;--line:#54738F}
html[data-area="3"]{--bg:#3A3326;--panel:#4D4533;--cell:#5A503A;--cellb:#6B5F45;--line:#7C6E50}
html[data-area="4"]{--bg:#3C3A22;--panel:#4F4C2C;--cell:#5C5833;--cellb:#6F6A3E;--line:#847E4A}
html[data-area="5"]{--bg:#1F4144;--panel:#2A565A;--cell:#32666A;--cellb:#3D7A7E;--line:#4D9094}
html[data-area="6"]{--bg:#41282A;--panel:#573436;--cell:#664044;--cellb:#7A4F53;--line:#92605F}
html[data-area="7"]{--bg:#1B3556;--panel:#264570;--cell:#2E5486;--cellb:#3A66A0;--line:#4A7BB8}
html[data-area="8"]{--bg:#244533;--panel:#305A44;--cell:#386C52;--cellb:#448165;--line:#549878}
html[data-area="9"]{--bg:#2F2A4C;--panel:#3F3963;--cell:#4A437A;--cellb:#5A528F;--line:#6B63A6}
html[data-area="10"]{--bg:#18303F;--panel:#223F52;--cell:#2B4F66;--cellb:#38637F;--line:#4A7A98}
html[data-contrast="high"]{--bg:#000;--fg:#fff;--panel:#111;--line:#fff;--muted:#fff;--cell:#000;--cellb:#222;--accent:#FFE066;--accent-fg:#000}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.35;-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh}
#app{max-width:520px;margin:0 auto;padding:8px 10px 6px;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.top{display:flex;align-items:center;gap:6px;padding:4px 0}
.logo{flex:1;margin:0;font-size:1.25rem;letter-spacing:.02em;color:var(--yellow)}
.gears{font-weight:700;background:var(--panel);border:2px solid var(--line);border-radius:999px;padding:3px 10px;font-size:.9rem}
.icon-btn{min-width:44px;min-height:44px;border-radius:10px;border:2px solid var(--line);background:var(--panel);color:var(--fg);font-size:1.2rem;cursor:pointer}
.icon-btn[aria-pressed="false"]{opacity:.55;text-decoration:line-through}
.btn,.tool{min-height:44px;padding:8px 14px;border-radius:12px;border:2px solid var(--line);background:var(--panel);color:var(--fg);font:inherit;font-weight:600;cursor:pointer}
.btn.primary{background:var(--copper);border-color:var(--ink);color:var(--ink)}
.btn.danger{border-color:var(--danger)}
.btn:disabled,.tool:disabled{opacity:.5;cursor:default}
.btn:focus-visible,.tool:focus-visible,.icon-btn:focus-visible,.cell:focus-visible,.slot:focus-visible,.node:focus-visible,.dogbtn:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.screen{display:flex;flex-direction:column;gap:8px;flex:1}
.screen[hidden]{display:none}
.menu{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.hero{width:min(80%,320px);margin:6px auto 0;display:block}
.tag{text-align:center;color:var(--muted);margin:4px 8px}
.muted{color:var(--muted);font-size:.9rem;margin:0}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hidden-svg{position:absolute}
.skip{position:absolute;left:8px;top:-60px;background:var(--accent);color:var(--accent-fg);padding:10px 14px;border-radius:8px;z-index:100;font-weight:700}
.skip:focus{top:8px}
h2{margin:4px 0;font-size:1.15rem}
/* HUD / Auftrag */
.hud{display:flex;align-items:center;justify-content:space-between;gap:8px}
.energy{font-weight:700;background:var(--panel);border:2px solid var(--yellow);border-radius:999px;padding:4px 12px;font-size:.95rem}
.energy small{font-weight:400;color:var(--muted);margin-left:6px}
.dogbtn{display:flex;align-items:center;gap:6px;min-height:44px;border-radius:999px;border:2px solid var(--line);background:var(--panel);color:var(--fg);padding:2px 12px 2px 4px;font:inherit;cursor:pointer}
.dogbtn svg{width:34px;height:34px}
.dogbtn.ready{border-color:var(--teal);box-shadow:0 0 0 3px rgba(42,157,143,.5);animation:pulse 1.6s infinite}
.dogbtn:disabled{opacity:.75;cursor:default}
.order{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:8px 10px}
.order.drop{border-color:var(--yellow);background:#35607a}
.order-head{display:flex;justify-content:space-between;gap:8px;font-size:.95rem}
.moves{color:var(--yellow);font-weight:700}
.goals{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.goal{display:flex;align-items:center;gap:6px;background:var(--bg);border:2px solid var(--line);border-radius:10px;padding:2px 8px 2px 2px;font-weight:700}
.goal svg{width:36px;height:36px}
.goal.full{border-color:var(--teal)}
.repair{display:flex;align-items:center;gap:8px;margin-top:6px}
.repair svg{width:46px;height:46px;transition:opacity .4s}
.bar{flex:1;height:10px;background:var(--bg);border:2px solid var(--line);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--teal)}
.hint{background:#2f5a49;border:2px solid var(--teal);border-radius:10px;padding:6px 10px;font-size:.9rem}
/* Brett */
.board-wrap{position:relative;display:flex;justify-content:center}
#board{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;width:min(100%,calc((100vh - 330px) * 7 / 9));min-width:260px;touch-action:none;user-select:none;-webkit-user-select:none;background:var(--ink);padding:4px;border-radius:12px;border:3px solid var(--wood)}
#board [role=row]{display:contents}
.cell{position:relative;aspect-ratio:1;padding:0;border:2px solid var(--cellb);border-radius:9px;background:var(--cell);color:var(--fg);cursor:pointer;touch-action:none;display:block;min-width:0}
.cell svg.art{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);pointer-events:none}
.cell.rubble{background:#4a2a22;border-color:#6b3a2c}
.cell.sel{outline:3px solid var(--yellow);outline-offset:-2px;background:#46728c}
.cell.can{outline:3px dashed var(--teal);outline-offset:-3px}
.cell.third{outline:3px solid var(--yellow);outline-offset:-3px}
.cell.lift{opacity:.35}
.cell.pop svg.art{animation:pop .28s}
.cell .dots{position:absolute;left:3px;bottom:3px;display:flex;gap:2px}
.cell .dots i{width:6px;height:6px;border-radius:50%;background:var(--ink);border:1px solid var(--cream)}
.cell .dots i.on{background:var(--yellow)}
.cell .cnt{position:absolute;right:3px;bottom:2px;font-size:.7rem;font-weight:800;color:var(--cream);text-shadow:0 0 2px #000}
.ghost{position:fixed;width:56px;height:56px;margin:-28px 0 0 -28px;pointer-events:none;z-index:80;filter:drop-shadow(0 4px 4px rgba(0,0,0,.5))}
.ghost svg{width:100%;height:100%}
#cover{position:absolute;inset:0;background:rgba(31,58,77,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-radius:12px;z-index:5}
#cover[hidden]{display:none}
.storage{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.slot{position:relative;width:48px;height:48px;border-radius:9px;border:2px dashed var(--line);background:var(--panel);padding:0;color:var(--fg);cursor:pointer}
.slot svg.art{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);pointer-events:none}
.slot.buy{font-size:.75rem;width:auto;padding:0 8px;min-height:48px}
.tools{display:flex;gap:6px;justify-content:space-between}
.tools .tool{flex:1;padding:8px 4px}
/* Karte */
.mapwrap{flex:1;overflow:auto;max-height:calc(100vh - 150px);border:2px solid var(--line);border-radius:14px;background:#2d5a49}
#map-svg{display:block;width:100%;height:auto}
.node{cursor:pointer}
.node circle.n{fill:var(--cream);stroke:var(--ink);stroke-width:3}
.node.done circle.n{fill:var(--teal)}
.node.locked circle.n{fill:#9aa7a0;stroke-dasharray:4 3}
.node.preview circle.n{fill:#c9c0a8;stroke-dasharray:3 3}
.node.open circle.n{fill:var(--yellow)}
.node.cur circle.ring{stroke:var(--cream);stroke-width:3;fill:none}
.node text{font-family:var(--font);font-weight:800;fill:var(--ink);text-anchor:middle;pointer-events:none}
.node text.tp{font-size:11px;fill:var(--rust)}
.node:focus{outline:none}
.node:focus-visible circle.n{stroke:#fff;stroke-width:5}
#map-svg path.road{fill:none;stroke:var(--wood);stroke-width:8;stroke-linecap:round;opacity:.9}
#map-svg path.side{fill:none;stroke:var(--wood);stroke-width:4;stroke-dasharray:6 6;stroke-linecap:round}
#map-svg text.lab{font:700 11px var(--font);fill:var(--cream)}
/* Dialoge */
.dlg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:12px}
.dlg[hidden],.toast[hidden],.ghost[hidden],.upd[hidden],#hint[hidden]{display:none}
.dlg-box{background:var(--bg);color:var(--fg);border:3px solid var(--copper);border-radius:14px;padding:16px;max-width:460px;width:100%;max-height:90vh;overflow:auto}
.dlg-box h3{margin:0 0 8px;color:var(--yellow)}
.dlg-box .btn{margin:6px 6px 0 0}
.dlg-box p{margin:6px 0}
.dlg-art{display:flex;align-items:flex-end;gap:10px;margin-bottom:6px}
.dlg-art svg{width:84px;height:84px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chip{display:flex;align-items:center;gap:4px;background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:2px 8px 2px 2px;font-weight:700}
.chip svg{width:34px;height:34px}
.chip.off svg{filter:grayscale(1) brightness(.4)}
.bookgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.bookgrid .chip{flex-direction:column;text-align:center;padding:6px;font-size:.8rem}
.bookgrid .chip svg{width:56px;height:56px}
.set label,.set .row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.set input[type=checkbox]{width:26px;height:26px}
.wb-lang button{min-width:44px;min-height:44px;margin-left:4px;border-radius:10px;border:2px solid var(--line);background:var(--panel);color:var(--fg);font-weight:700;cursor:pointer}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--cream);border:2px solid var(--yellow);border-radius:12px;padding:10px 14px;z-index:90;max-width:90vw;text-align:center}
.upd{background:var(--panel);border:2px solid var(--yellow);border-radius:10px;padding:6px 10px;display:flex;gap:8px;align-items:center}
@keyframes pop{0%{transform:scale(.5)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(42,157,143,.15)}}
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (forced-colors:active){.cell,.slot,.btn,.tool{border:2px solid ButtonText}.cell.sel{outline:3px solid Highlight}}
@media (max-height:640px){.hero{display:none}}

/* Beta 0.10: Karte ueber alle Gebiete, Pfadwahl, Erfolge, Statistik */
.anavwrap{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.anav{min-width:40px;min-height:40px;border-radius:10px;border:2px solid var(--line);background:var(--panel);color:var(--fg);font:inherit;font-weight:800;cursor:pointer}
.anav.cur{border-color:var(--yellow);box-shadow:0 0 0 2px var(--yellow) inset}
.anav.dim{opacity:.6}
.anav.full{background:var(--teal);color:var(--ink)}
.anav:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
#map-svg text.ahd{font:800 15px var(--font);fill:var(--cream);text-anchor:middle}
#map-svg text.alab{font:600 11px var(--font);fill:var(--cream);opacity:.85;text-anchor:middle}
#map-svg rect.band{opacity:.55}
#map-svg path.road.walked{stroke:var(--teal);opacity:1}
.node.meister circle.n{fill:#d9c7ff}
.node.event circle.n{fill:#ffd1e8}
.node.done.meister circle.n,.node.done.event circle.n{fill:var(--teal)}
.node.opt circle.n{stroke-dasharray:0}
.node.locked.opt{opacity:.8}
.mapwrap{background:#1f2f3a}
.pick{border:2px solid var(--line);border-radius:12px;padding:8px 10px;margin:8px 0;background:var(--panel)}
.quote{border-left:4px solid var(--copper);padding-left:8px}
.ach{color:var(--yellow);font-weight:700}
.achlist{list-style:none;margin:6px 0;padding:0}
.achlist li{padding:6px 0;border-bottom:1px solid var(--line)}
.achlist li.open{opacity:.7}
.achlist em{float:right;font-style:normal;font-weight:700;color:var(--teal)}
.achlist li.open em{color:var(--muted)}
table.stats{width:100%;border-collapse:collapse;margin:6px 0}
table.stats th{text-align:left;font-weight:400;padding:4px 6px 4px 0;border-bottom:1px solid var(--line)}
table.stats td{text-align:right;font-weight:700;padding:4px 0;border-bottom:1px solid var(--line)}
.dlg-box h4{margin:12px 0 4px;color:var(--yellow)}
.tools .tool{font-size:.85rem}