/* Turmbau – UI. Nur System-Schriften (kein Webfont, kein CDN). Palette nach GDD 10.2 (Bauplan dunkel / Tagbau hell). */
:root{--bg:#12263A;--bg2:#183049;--panel:#1C3A57;--panel2:#24496C;--grid:#2C5278;--fg:#F3F1E8;--muted:#9DB2C6;--acc:#FFB000;--acc-fg:#0B1621;--ink:#0B1621;--bad:#FF7B6B;--good:#8FD694;--line:#3A6288;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-h:"Arial Narrow","Roboto Condensed","Helvetica Neue Condensed","Liberation Sans Narrow",system-ui,sans-serif;--font-n:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --wb-footer-color:var(--muted);--wb-footer-link:var(--muted);--wb-footer-size:11px;--wb-footer-pad:4px 8px;--wb-footer-opacity:.9}
:root[data-theme=tagbau]{--bg:#F4F1E6;--bg2:#EAE5D3;--panel:#FFFFFF;--panel2:#EFEADA;--grid:#C9C2AA;--fg:#12263A;--muted:#4A6075;--acc:#B45F00;--acc-fg:#FFFFFF;--ink:#0B1621;--bad:#B3261E;--good:#2E7D32;--line:#A9A184}
:root[data-contrast=high]{--line:var(--fg);--muted:var(--fg)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:var(--font);overscroll-behavior:none}
body{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
#app{flex:1;min-height:0;position:relative;display:flex;padding-top:env(safe-area-inset-top)}
.screen{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch}
body[data-screen=game] .wb-footer{display:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.btn{background:var(--panel);border:2px solid var(--line);border-radius:6px;padding:12px 18px;min-height:48px;min-width:48px;font-weight:600;font-size:1.05rem;cursor:pointer;color:var(--fg)}
.btn:hover{border-color:var(--acc)}
.btn.primary{background:var(--acc);color:var(--acc-fg);border-color:var(--acc)}
.btn.big{font-size:1.3rem;min-height:58px}
.btn.small{min-height:40px;padding:6px 12px;font-size:.95rem}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:active:not(:disabled){transform:translateY(1px)}
.icon-btn{width:48px;height:48px;min-width:48px;border-radius:6px;background:var(--panel);border:2px solid var(--line);cursor:pointer;font-size:1.15rem;display:inline-flex;align-items:center;justify-content:center}
/* Menü */
.menu-wrap{margin:auto;width:min(92vw,420px);padding:18px 0;text-align:center;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:100% 100%;}
.logo{margin:0 0 6px;font-family:var(--font-h);font-weight:800;letter-spacing:.02em;line-height:1;display:flex;align-items:flex-end;justify-content:center;font-size:clamp(2.6rem,13vw,4rem);color:var(--fg)}
.logo .lt{display:inline-block;transform-origin:50% 100%}
.logo .a{transform:rotate(-1.5deg)}.logo .b{transform:rotate(1deg) translateY(2px)}.logo .c{transform:rotate(-2deg)}.logo .d{transform:rotate(1.5deg) translateY(1px)}.logo .e{transform:rotate(-1deg)}
.logo .roof{width:.78em;height:.86em;fill:#C8563F;stroke:var(--ink);stroke-width:2;transform:rotate(1.5deg);margin:0 .02em}.logo .roof .bar{stroke:var(--fg);stroke-width:3;fill:none}
.logo .blk{background:#D9A066;color:var(--ink);padding:0 .08em;border:2px solid var(--ink);transform:rotate(-1.2deg);margin-left:.04em;font-size:.88em;line-height:1.05}
.tag{color:var(--muted);margin:0 0 22px}
.menu{display:flex;flex-direction:column;gap:12px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.best{margin:16px 0 0;color:var(--muted);font-size:.95rem}
/* Leisten und Seiten */
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;position:sticky;top:0;z-index:3;background:var(--bg)}
.bar h2{margin:0;font-family:var(--font-h);font-size:1.4rem;letter-spacing:.04em;text-transform:uppercase}
.bar-r{min-width:48px;text-align:right;color:var(--acc);font-weight:700;font-variant-numeric:tabular-nums}
.page{width:min(94vw,560px);margin:0 auto;padding:6px 0 24px}
.page h3{font-family:var(--font-h);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 8px;color:var(--acc)}
.page p,.page li{line-height:1.5}
.fine{color:var(--muted);font-size:.85rem}
.set label,.set .row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;border-bottom:1px solid var(--line)}
.set .row{flex-wrap:wrap;padding:6px 0}
.set input[type=checkbox]{width:26px;height:26px;accent-color:var(--acc)}
.set select{background:var(--panel);color:var(--fg);border:2px solid var(--line);border-radius:6px;padding:8px;font:inherit;min-height:44px}
#lang-sw select,#lang-sw button{font:inherit}
.lic{white-space:pre-wrap;font-family:var(--font-n);font-size:.78rem;background:var(--panel);border:1px solid var(--line);padding:10px;border-radius:6px;overflow:auto}
.hash{font-family:var(--font-n);font-size:.72rem;word-break:break-all}
/* Aufgaben */
.chapters{width:min(94vw,520px);margin:0 auto;padding:4px 0 24px;display:flex;flex-direction:column;gap:16px}
.chap{background:var(--panel);border:2px solid var(--line);border-radius:6px;padding:12px}
.chap h3{margin:0 0 8px;font-family:var(--font-h);text-transform:uppercase;letter-spacing:.05em;display:flex;justify-content:space-between;align-items:baseline}
.chap h3 small{color:var(--muted);font-weight:400;letter-spacing:0;text-transform:none}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.tile{min-height:72px;border:2px solid var(--line);border-radius:6px;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;padding:4px;color:var(--fg);font:inherit}
.tile .n{font-family:var(--font-n);font-weight:700}.tile .nm{font-size:.72rem;color:var(--muted);text-align:center;line-height:1.1}
.tile .st{color:var(--acc);letter-spacing:.05em;font-size:.9rem;height:1.1em}
.tile.cur{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset}
.tile.done{border-color:var(--good)}
.tile.lock{opacity:.55;cursor:not-allowed;border-style:dashed}
/* Spielscreen */
.hud{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--bg)}
.hud-c{flex:1;text-align:center;min-width:0}
.hud-h{font-family:var(--font-n);font-size:1.7rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.hud-h small{font-size:.9rem;color:var(--muted)}
.hud-s{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-r{min-width:84px;text-align:right;font-size:.85rem}
.lost{letter-spacing:.15em;font-size:1.1rem}.lost .on{color:var(--bad)}.lost .off{color:var(--muted)}
.wind{font-family:var(--font-n);font-size:.8rem;color:var(--acc)}
#stage{position:relative;flex:1;min-height:0;touch-action:none;background:var(--bg2)}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.goalbar{position:absolute;left:8px;top:6px;right:96px;font-size:.8rem;color:var(--fg);background:rgba(11,22,33,.55);border-radius:4px;padding:2px 6px;pointer-events:none;width:max-content;max-width:calc(100% - 100px)}
:root[data-theme=tagbau] .goalbar{background:rgba(255,255,255,.7)}
.nextbox{position:absolute;right:8px;top:6px;display:flex;flex-direction:column;align-items:center;font-size:.7rem;color:var(--muted);background:rgba(11,22,33,.45);border:1px solid var(--line);border-radius:4px;padding:2px 4px;pointer-events:none}
:root[data-theme=tagbau] .nextbox{background:rgba(255,255,255,.7)}
.nextbox canvas{width:72px;height:48px}
.startmsg{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:var(--panel);border:2px solid var(--acc);border-radius:6px;padding:8px 12px;text-align:center;max-width:90%;font-size:.92rem;pointer-events:none}
.blockmsg{position:absolute;left:50%;top:60px;transform:translateX(-50%);background:var(--panel);border:2px solid var(--bad);border-radius:6px;padding:6px 10px;display:flex;gap:8px;align-items:center;font-size:.92rem}
.ctl{display:grid;grid-template-columns:56px 56px 64px 1fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--bg)}
.ctl .btn{padding:0;font-size:1.3rem;min-height:56px}
.ctl .drop{font-size:1.2rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Overlays */
.ov{position:absolute;inset:0;background:rgba(7,15,24,.72);display:flex;align-items:center;justify-content:center;z-index:20;padding:12px}
.ov-box{background:var(--panel);border:2px solid var(--line);border-radius:8px;padding:18px;width:min(92vw,380px);text-align:center;max-height:92%;overflow:auto}
.ov-box h2{margin:0 0 6px;font-family:var(--font-h);text-transform:uppercase;letter-spacing:.05em}
.ov-box p{margin:6px 0;line-height:1.45}
.ov-box .btns{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.stars{font-size:2.2rem;color:var(--acc);letter-spacing:.1em;margin:4px 0}
.stamp{display:inline-block;transform:rotate(-4deg);border:3px solid var(--acc);color:var(--acc);padding:2px 10px;border-radius:4px;font-family:var(--font-h);text-transform:uppercase;letter-spacing:.08em}
.kv{display:grid;grid-template-columns:1fr auto;gap:2px 12px;text-align:left;font-variant-numeric:tabular-nums;margin:10px 0}
.kv b{font-family:var(--font-n)}
.toast{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);background:var(--panel);border:2px solid var(--acc);padding:8px 14px;border-radius:6px;z-index:30;max-width:90%;text-align:center}
.card{background:var(--panel);border:2px solid var(--line);border-radius:6px;padding:12px;margin:10px 0}
.rules{padding-left:1.2em}.rules li{margin:8px 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:root[data-motion=reduced] *{transition:none!important;animation:none!important}
/* Beta: Bauvorhaben, Sammlung, Erfolge */
.wcard{width:100%;text-align:left;cursor:pointer;color:var(--fg);font:inherit}
.wcard.cur{border-color:var(--acc)}.wcard.lock{opacity:.6;border-style:dashed;cursor:not-allowed}
.wcard p{margin:4px 0 0}
.tile.coll{cursor:default}
.skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.skin{display:flex;flex-direction:column;gap:8px;margin:0}
.skin .sw{display:flex;gap:4px}.skin .sw i{display:block;width:26px;height:18px;border:2px solid var(--ink);border-radius:3px}
.achs{list-style:none;padding:0;margin:0}.achs li{display:flex;flex-direction:column;border-bottom:1px solid var(--line);padding:8px 0}
.achs li.no{opacity:.6}.achs li span{color:var(--muted);font-size:.9rem}
.kv b.sm{font-family:var(--font);font-weight:600;grid-column:1/-1;text-align:left}
.page h3 small{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}