/* Bastion Byte - UI. Nur System-Schriften (keine Webfonts, kein CDN). Palette nach GDD 9.2. */
:root{--bg:#0B1220;--bg2:#12203A;--panel:#16233A;--panel2:#1E2F4D;--fg:#E6F0FF;--muted:#8A9BB5;--cy:#35D0E8;--gr:#4ADE80;--mg:#FF4FA3;--or:#FFA63D;--ye:#F5D547;--vi:#9B7BFF;--line:#2A3F66;--ink:#0B1220;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-h:"Arial Narrow","Roboto Condensed","Helvetica Neue Condensed",system-ui,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wb-footer-bg:transparent;--wb-footer-color:var(--muted);--wb-footer-link:var(--muted);--wb-footer-size:11px;--wb-footer-pad:4px 8px;--wb-footer-opacity:.85}
:root[data-hc=on]{--line:#6E8FCB;--muted:#B5C3DA;--panel:#101C33}
*{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;background:radial-gradient(120% 80% at 50% 0%,var(--bg2),var(--bg) 70%)}
#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(--ye);outline-offset:2px}
.btn{background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:10px 16px;min-height:48px;font-weight:600;font-size:1rem;cursor:pointer;color:var(--fg)}
.btn:hover{border-color:var(--cy)}
.btn.primary{background:var(--cy);color:var(--ink);border-color:var(--cy)}
.btn.big{font-size:1.2rem;min-height:56px}
.btn.danger{border-color:var(--mg);color:var(--mg)}
.btn:disabled,.btn.off{opacity:.45;cursor:not-allowed}
.btn:active:not(:disabled){transform:translateY(1px)}
.icon-btn{width:46px;height:46px;min-width:46px;border-radius:12px;background:var(--panel);border:2px solid var(--line);cursor:pointer;font-size:1.05rem;display:inline-flex;align-items:center;justify-content:center;padding:0;font-weight:700}
.icon-btn:hover{border-color:var(--cy)}
/* menu */
.menu-wrap{margin:auto;width:min(92vw,420px);padding:16px 0;text-align:center}
.shield{width:76px;height:76px}
.logo{margin:4px 0 4px;font-family:var(--font-h);font-weight:800;letter-spacing:.06em;line-height:.95;font-size:clamp(2.2rem,9vw,3.2rem)}
.logo .l1{color:var(--cy);display:block}.logo .l2{color:var(--fg);display:block}
.tag{color:var(--muted);margin:0 0 18px}
.menu{display:flex;flex-direction:column;gap:10px}
.menu-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.best,.ver{margin:12px 0 0;color:var(--muted);font-size:.9rem}.ver{font-size:.75rem;margin-top:4px;font-family:var(--mono)}
/* bars / pages */
.bar{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(11,18,32,.7);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.bar h2{margin:0;font-size:1.15rem;flex:1}
.bar-r{color:var(--ye);font-weight:700;font-variant-numeric:tabular-nums}
.page{width:min(100%,640px);margin:0 auto;padding:12px 14px 24px}
.page.wide{width:min(100%,860px)}
.page h3{margin:18px 0 6px;color:var(--cy);font-size:1.05rem}
.page p{line-height:1.45;margin:6px 0}
.note{color:var(--muted);font-size:.85rem}
.set label,.set .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);min-height:52px}
.set .row{flex-wrap:wrap;justify-content:flex-start}
.set input[type=checkbox]{width:26px;height:26px;accent-color:var(--cy)}
.set select{background:var(--panel);color:var(--fg);border:2px solid var(--line);border-radius:10px;padding:8px;font:inherit;min-height:44px}
/* map list */
.sector{margin:14px 0 4px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.sector h3{margin:0;color:var(--fg)}.sector p{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.sector.locked{opacity:.55}
.maps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:8px}
.card{background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:4px;text-align:left;min-height:120px}
.card:hover:not(:disabled){border-color:var(--cy)}
.card:disabled{opacity:.45;cursor:not-allowed}
.card .th{align-self:center}
.card .nm{font-weight:700;font-size:.95rem}.card .mt{font-size:.78rem;color:var(--muted)}
.stars{letter-spacing:1px;color:var(--ye);font-size:.9rem;white-space:nowrap}.stars i{font-style:normal;color:#3a4a6b}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#33466b;margin-right:3px}.dot.on{background:var(--gr)}
/* briefing */
.brief-grid{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start}
.seg{display:flex;gap:6px;flex-wrap:wrap}.seg button{flex:1;min-width:92px}
.seg .btn[aria-pressed=true]{background:var(--cy);color:var(--ink);border-color:var(--cy)}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{display:inline-flex;align-items:center;gap:4px;background:var(--panel2);border-radius:999px;padding:3px 10px 3px 6px;font-size:.85rem}
.ada{border-left:4px solid var(--cy);background:var(--panel);padding:8px 12px;border-radius:0 10px 10px 0;margin:10px 0;font-size:.95rem}
.ada b{color:var(--cy)}
/* game */
#scr-game{overflow:hidden}
.hud{display:flex;align-items:center;gap:8px;padding:6px 8px;background:rgba(11,18,32,.85);border-bottom:1px solid var(--line);flex:none}
.hud-v{font-family:var(--mono);font-weight:700;font-size:.92rem;padding:6px 6px;border-radius:8px;background:var(--panel);min-width:56px;text-align:center;white-space:nowrap}
#h-lives{color:var(--gr)}#h-lives.low{color:var(--or)}#h-lives.crit{color:var(--mg)}#h-bits{color:var(--ye)}
.hud-w{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:.82rem}
.spd{font-family:var(--mono);font-size:1rem}
#field{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
#cv{display:block;touch-action:none;outline:none;border-radius:6px;box-shadow:0 0 0 1px var(--line)}
.panel{flex:none;background:rgba(11,18,32,.92);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px;width:100%;max-width:640px;margin:0 auto}
.wavestrip{display:flex;align-items:center;gap:8px;min-height:48px}
.wnext{flex:1;min-width:0;display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.wnext .chip{padding:2px 8px 2px 4px}.wnext .boss{color:var(--or);font-weight:700}
#btn-wave{min-width:120px;font-size:.95rem;padding:8px 10px}
.bbar{min-height:78px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:62px;background:var(--panel);border:2px solid var(--line);border-radius:10px;cursor:pointer;padding:4px 2px;font-size:.78rem}
.bb b{font-size:.8rem}.bb .c{font-family:var(--mono);color:var(--ye);font-weight:700}
.bb[aria-pressed=true]{border-color:var(--gr);background:#12342a}
.bb.poor .c{color:var(--mg)}.bb:disabled{opacity:.5}
.bb:hover:not(:disabled){border-color:var(--cy)}
.tp{grid-column:1/-1;display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.tp .info{flex:1;min-width:150px;font-size:.82rem;line-height:1.35}.tp .info b{font-size:.95rem}
.tp .acts{display:flex;gap:6px;flex-wrap:wrap}
.tp .btn{min-height:44px;padding:6px 10px;font-size:.88rem}
.hint{grid-column:1/-1;color:var(--muted);font-size:.8rem;text-align:center}
.tutcard,.tipcard{position:absolute;left:8px;right:8px;top:8px;background:rgba(22,35,58,.97);border:2px solid var(--cy);border-radius:12px;padding:8px 10px;font-size:.88rem;z-index:3;box-shadow:0 4px 16px rgba(0,0,0,.5)}
.tipcard{border-color:var(--or);top:auto;bottom:8px}
.tutcard .row,.tipcard .row{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.tutcard button,.tipcard button{min-height:36px;padding:4px 10px;font-size:.85rem}
/* overlay */
.ov{position:absolute;inset:0;background:rgba(5,9,18,.78);display:flex;align-items:center;justify-content:center;z-index:20;padding:12px;overflow:auto}
.ov-box{background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:18px;width:min(100%,400px);text-align:center;max-height:100%;overflow:auto}
.ov-box h2{margin:0 0 6px}.ov-box p{margin:6px 0;color:var(--muted)}
.ov-box .stack{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ov-box .big-stars{font-size:2rem;color:var(--ye);letter-spacing:4px}
.kv{display:grid;grid-template-columns:1fr auto;gap:2px 12px;text-align:left;font-size:.92rem;margin:8px 0}.kv span:nth-child(even){font-family:var(--mono);text-align:right}
.tbl{width:100%;border-collapse:collapse;font-size:.85rem;margin:6px 0}.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:5px 4px;text-align:left}.tbl th{color:var(--muted);font-weight:600}
.ach{display:flex;gap:10px;align-items:center;padding:8px;border-bottom:1px solid var(--line)}.ach .ic{font-size:1.4rem;width:34px;text-align:center}.ach.lock{opacity:.5}.ach b{display:block}.ach span{color:var(--muted);font-size:.85rem}
.toast{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);background:var(--panel2);border:2px solid var(--cy);border-radius:12px;padding:10px 16px;z-index:40;max-width:90vw;text-align:center;font-size:.92rem;pointer-events:none}
[data-motion=reduce] *{animation:none!important;transition:none!important}
@media (min-width:900px){.panel{max-width:760px}.page{width:min(100%,720px)}}
@media (max-height:560px){.bb{min-height:50px}.bbar{min-height:62px}}