/* Kopfzeile: Währungen, Wellenleiste, Buttons, untere Leiste */
.hud{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap;pointer-events:none}
.group{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill{pointer-events:auto;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 12px;display:flex;align-items:center;gap:6px;box-shadow:0 3px 0 var(--line);font-size:13px;color:var(--ink);white-space:nowrap}
.pill b{font-size:18px}
.pill.big b{font-size:22px}
.pill small{color:var(--ink-2);font-size:12px}
.coins{gap:10px}
.coins span{display:flex;align-items:center;gap:3px;font-family:var(--display);font-size:16px}
.taler-ico{width:16px;height:16px;border-radius:50%;background:var(--gold);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);flex:none}
.wavebox{pointer-events:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:8px 10px 8px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 3px 0 var(--line)}
.wave{display:flex;flex-direction:column;line-height:1}
.wave small{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.wave b{font-size:28px}
.block{display:flex;flex-direction:column;gap:4px;min-width:0}
.block small{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:4px;align-items:center}
.block small b{font-family:var(--body);font-weight:600;color:var(--ink)}
.block .next{color:var(--ink-2);opacity:.85}
.block .next::before{content:'·';margin:0 4px}
.dots{display:flex;gap:4px;align-items:center}
.dots .d{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block;font-style:normal}
.dots .d.done{background:var(--accent)}
.dots .d.now{background:var(--accent);box-shadow:0 0 0 2.5px var(--panel),0 0 0 4px var(--accent);transform:scale(1.05)}
.dots .d.boss{width:auto;height:auto;background:none;color:var(--gold);font-size:14px;line-height:1;margin-left:2px}
.dots .d.boss.now{box-shadow:none;text-shadow:0 0 6px var(--gold);transform:scale(1.25)}
.dots .d.boss.done{color:var(--accent)}

.btn{font:500 14px var(--body);background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:8px 12px;box-shadow:0 3px 0 var(--line);cursor:pointer;display:inline-flex;align-items:center;gap:6px;justify-content:center;pointer-events:auto;transition:transform .06s;white-space:nowrap;min-height:38px;touch-action:manipulation}
.btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent-deep);box-shadow:0 3px 0 var(--accent-deep)}
.btn.primary:active:not(:disabled){box-shadow:0 1px 0 var(--accent-deep)}
.btn.danger{color:var(--danger)}
.btn.icon{padding:8px 10px}
.btn.big{font-size:15px;min-height:44px}
.btn.small{min-height:32px;padding:5px 10px;font-size:13px}
.btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);box-shadow:0 3px 0 var(--accent)}
.btn:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn small{font-size:12px;color:var(--ink-2);display:inline-flex;align-items:center;gap:4px}
.btn small .taler-ico{width:12px;height:12px}
.btn.primary small{color:inherit;opacity:.85}

.bar{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);display:flex;justify-content:center;gap:8px;flex-wrap:wrap;pointer-events:none}
.seg{display:flex;pointer-events:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 3px 0 var(--line);overflow:hidden}
.seg button{font:400 15px var(--display);border:0;background:transparent;color:var(--ink-2);padding:8px 11px;cursor:pointer;touch-action:manipulation}
.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--ink)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Radial-Baumenü */
.radial{position:absolute;left:0;top:0;width:0;height:0;z-index:3;pointer-events:none}
.radial .rc,.radial .ri{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.radial .rc{width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--panel);color:var(--ink-2);border:1px solid var(--line);box-shadow:0 3px 0 var(--line);font:600 15px var(--body);display:grid;place-items:center}
.radial .ri{width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--panel);color:var(--ink);border:2px solid var(--line);box-shadow:0 3px 0 var(--line),0 8px 20px var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0;transform:translate(var(--x),var(--y)) scale(1);transition:transform .22s cubic-bezier(.2,1.4,.4,1),opacity .18s}
.radial .ri small{font:600 12px var(--body);color:var(--ink);display:flex;align-items:center;gap:3px;line-height:1}
.radial .ri small::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2)}
.radial .ri .nm{position:absolute;top:100%;margin-top:4px;font:500 11px var(--body);color:var(--panel);background:var(--ink);padding:2px 7px;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none}
.radial .ri:hover .nm,.radial .ri:active .nm{opacity:1}
.radial .ri:hover:not(:disabled){transform:translate(var(--x),var(--y)) scale(1.1);border-color:var(--accent)}
.radial .ri:active:not(:disabled){transform:translate(var(--x),var(--y)) scale(.94)}
.radial .ri:disabled{opacity:.55;cursor:not-allowed}
.radial .ri:disabled small{color:var(--danger)}
.radial:not(.in) .ri{transform:translate(0,0) scale(.3);opacity:0}
.radial .ri.pulse{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent),0 3px 0 var(--line)!important}

/* Audio aus: roter Querstrich über dem Icon */
.btn[data-audio]{position:relative}
.btn[data-audio][aria-pressed="false"]{color:var(--ink-2)}
.btn[data-audio][aria-pressed="false"]::after{content:'';position:absolute;left:18%;right:18%;top:50%;height:3px;background:var(--danger);border-radius:2px;transform:rotate(-35deg);box-shadow:0 0 0 1.5px var(--panel)}
/* Boss-Leiste */
.bossbar{position:absolute;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 96px);width:min(70vw,420px);background:var(--panel);border:2px solid var(--gold);border-radius:14px;padding:6px 12px;display:flex;flex-direction:column;gap:4px;box-shadow:0 3px 0 var(--gold),0 10px 24px var(--shadow);pointer-events:none;z-index:2;animation:pop .3s ease-out}
.bossbar .bn{font:400 15px var(--display);color:var(--ink);letter-spacing:.02em;text-align:center}
.bossbar .bb{height:9px;border-radius:5px;background:var(--line);overflow:hidden}
.bossbar .bb span{display:block;height:100%;background:linear-gradient(90deg,var(--danger),var(--gold));transition:width .15s}
body.boss{--sky-top:#4a4f6e;--sky-bot:#33395a}