:root{--bg:#171b20;--panel:#232a32;--panel2:#2f3843;--rand:#3b4552;--fg:#eef1f4;--muted:#9aa6b3;--gold:#f2c14e;--stahl:#aab8c8;--oel:#7f9bd9;--rot:#d9473a;--gut:#4caf6e}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:14px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-user-select:none;user-select:none;overflow:hidden}
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}
#kopf{display:flex;align-items:center;gap:6px;padding:6px 8px;padding-top:max(6px,env(safe-area-inset-top));background:linear-gradient(90deg,#2b3139,#3a2b2b);flex-wrap:wrap;min-height:44px}
.roh{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.3);border-radius:8px;padding:3px 8px;min-width:96px;position:relative}
.roh i{width:14px;height:14px;border-radius:50%;flex:none}
.roh.gold i{background:radial-gradient(circle at 35% 35%,#fff3b0,var(--gold) 55%,#9a7420)}
.roh.stahl i{border-radius:3px;background:linear-gradient(135deg,#e6edf5,var(--stahl) 50%,#5d6b7a)}
.roh.oel i{border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(135deg,#a9c0f0,var(--oel) 50%,#2c3d66)}
.roh b{font-variant-numeric:tabular-nums;font-size:.95rem}
.roh .balken{position:absolute;left:8px;right:8px;bottom:1px;height:2px;background:rgba(255,255,255,.12)}
.roh .balken span{display:block;height:100%;width:0;background:currentColor}
.roh.gold{color:var(--gold)}.roh.stahl{color:var(--stahl)}.roh.oel{color:var(--oel)}
.roh.voll b{color:#ff8a7a}
.trupps{color:var(--muted);font-size:.85rem;padding:0 4px}
.konto{margin-left:auto;color:var(--muted);font-size:.8rem;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#buehne{position:relative;flex:1;min-height:0;background:#2c3524}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#hinweis{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:rgba(0,0,0,.78);padding:6px 12px;border-radius:8px;font-weight:600;pointer-events:none;opacity:0;transition:opacity .2s;max-width:90%;text-align:center}
#hinweis.zeigen{opacity:1}
#mess{position:absolute;right:6px;top:6px;background:rgba(0,0,0,.6);font:12px ui-monospace,monospace;padding:4px 6px;border-radius:6px;pointer-events:none;white-space:pre}
.laden{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,24,28,.8);font-weight:600}
.laden[hidden]{display:none}
#leiste{background:var(--panel);border-top:2px solid var(--rand);padding:6px 8px;padding-bottom:max(6px,env(safe-area-inset-bottom));min-height:86px}
.zeile{display:flex;gap:6px;align-items:stretch;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.titel{font-weight:700;align-self:center;margin-right:4px;white-space:nowrap}
.info{color:var(--muted);font-size:.82rem;margin-top:4px;min-height:1.1em}
button{font:600 .88rem system-ui,sans-serif;border:0;border-radius:9px;padding:8px 12px;background:var(--panel2);color:var(--fg);cursor:pointer;flex:none;min-height:40px}
button:disabled{opacity:.4;cursor:default}
button.haupt{background:var(--rot);color:#fff}
button.gut{background:var(--gut);color:#fff}
button.karte{display:flex;flex-direction:column;align-items:flex-start;min-width:104px;padding:6px 9px;border:2px solid transparent;text-align:left}
button.karte.aktiv{border-color:var(--gold)}
button.karte small{font-weight:400;color:var(--muted);font-size:.74rem;margin-top:2px}
button.karte .k{display:flex;gap:6px;font-size:.76rem;font-weight:600;margin-top:2px}
.k .gold{color:var(--gold)}.k .stahl{color:var(--stahl)}.k .oel{color:var(--oel)}.k .fehlt{color:#ff8a7a}
@media (max-height:520px){#kopf{min-height:36px;padding-top:3px;padding-bottom:3px}.roh{min-width:80px;padding:2px 6px}#leiste{min-height:70px;padding-top:4px}.info{display:none}button{min-height:36px;padding:6px 10px}}
@media (max-width:520px){.roh{min-width:0;flex:1}.trupps{order:5}.konto{order:6;max-width:none;margin-left:0;flex-basis:100%;display:none}}
/* Touch-Geräte: Platz für die Plattform-Leiste oben in der Mitte freihalten, damit sie keine Anzeige verdeckt */
@media (pointer:coarse){#kopf{padding-top:max(40px,env(safe-area-inset-top))}}
.roh b{white-space:nowrap}
@media (max-width:520px){.roh b{font-size:.8rem}.roh i{width:11px;height:11px}.roh{gap:3px;padding:3px 5px}}