/* Action-Stände und Runden (M2a Task 12, M2b Task 6): Ebenen für Action-HUD und Treppchen, Action-Stand-Blatt, „Zurück“ in der Runde,
   Ping-Anzeige online, Tanz-Knopf auf dem Treppchen. Farben/Holz wie style.css (Stand-Blatt), Ping-Punkt aus online.css. */

/* Ebenen: #rt (ui/rthud.js + Touch-Steuerung aus input/players.js) über der Bühne, #res (Treppchen-Sticker und Knöpfe) darüber */
#rt { position: absolute; inset: 0; pointer-events: none; }
#res { position: absolute; inset: 0; pointer-events: none; z-index: 12; }
#res > * { pointer-events: auto; }
#res .pd-layer { pointer-events: none; }

/* ---------- Action-Stand-Blatt ---------- */
.ax-card { gap: 8px; }
.ax-sport { margin-top: 2px; }
.ax-count { grid-template-columns: repeat(3, 1fr); }
.ax-seats { display: flex; flex-direction: column; gap: 6px; }
.ax-seat { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 5px 8px; border-radius: 16px; background: #fff7e6; border: 3px solid #e7d2ab; }
.ax-seat.hidden { display: none; }
.ax-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 2px #fff, 0 1px 3px #0005; }
.ax-seat .ax-pt { flex: none; width: 40px; height: 40px; box-shadow: inset 0 0 0 2px #fff; }
.ax-name { font-size: 19px; font-weight: 700; color: #5e3a19; }
.ax-sub { font-size: 15px; font-weight: 600; color: #a0784e; }
.ax-sub.grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-kind { flex: none; display: flex; border-radius: 14px; overflow: hidden; border: 2px solid #d9bb8a; }
.ax-k { padding: 7px 8px; font-size: 14px; font-weight: 700; color: #8a5a2b; background: #f3e3c4; white-space: nowrap; }
.ax-k.on { color: #fff; background: linear-gradient(#f7b547, #e08a1e); text-shadow: 0 1px 2px #8a4a0c; }
.ax-levels { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; min-width: 0; }
.ax-levels .pill { padding: 6px 2px; font-size: 13px; border-width: 2px; }
.ax-seat .wood.small { flex: none; }

/* ---------- Action-Runde: „Zurück“ oben links unter der Porträt-Leiste ---------- */
.hud-action .rt-back { position: absolute; left: 10px; top: calc(env(safe-area-inset-top) + 124px); width: 42px; height: 42px; z-index: 8; }

/* ---------- Online: Ping oben rechts ---------- */
.hud-ping { position: absolute; right: 8px; top: calc(env(safe-area-inset-top) + 2px); z-index: 9; display: flex; align-items: center; gap: 5px; padding: 2px 8px 2px 5px;
  border-radius: 12px; background: #2a1c12aa; color: #fff; font: 600 12px/1.2 'Fredoka', system-ui, sans-serif; pointer-events: none; }
.hud-ping .ol-ping { width: 10px; height: 10px; }
.hud-match .hud-ping { top: auto; bottom: calc(env(safe-area-inset-bottom) + 76px); }

/* ---------- Treppchen: Tanz-Knopf über der Knopfreihe rechts ---------- */
.pd-dance { position: absolute; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 96px); width: 58px; height: 58px; border-radius: 50%; pointer-events: auto;
  background: url('../img/ui/dance.png') center / 66% no-repeat, linear-gradient(#f7b547, #e08a1e); border: 3px solid #9a5512; box-shadow: 0 3px 0 #7a4410, 0 4px 10px #0005; }
.pd-dance.on { filter: brightness(1.12); }

/* ---------- Hinweis (hud.note) und Tanz-Knopf online in der Runde ---------- */
.hud-note { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); z-index: 9; max-width: 86%; padding: 9px 16px 10px; text-align: center; pointer-events: none;
  font: 700 17px/1.2 'Fredoka', system-ui, sans-serif; color: #5e3a19; background: #fff4de; border: 3px solid #b07a45; border-radius: 16px; box-shadow: 0 4px 12px #0005; }
.hud-note.hidden { display: none; }
.hud-note.pop { animation: hudNote .3s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes hudNote { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.hud-dance { position: absolute; width: 50px; height: 50px; border-radius: 50%; z-index: 8;
  background: url('../img/ui/dance.png') center / 66% no-repeat, linear-gradient(#f7b547, #e08a1e); border: 3px solid #9a5512; box-shadow: 0 3px 0 #7a4410; }
.hud-action .hud-dance { left: 6px; top: calc(env(safe-area-inset-top) + 176px); }
.hud-match .hud-dance { right: 16px; bottom: calc(env(safe-area-inset-bottom) + 84px); }
.ax-count .pill.on { background: #f7b547; border-color: #b0661a; color: #fff; text-shadow: 0 1px 2px #8a4a0c; } /* gewählte Spielerzahl */

/* ---------- M4 Bühnen-Spiele Tanz-Alarm / Winke-Kette (ui/rthud.js, render/arenas/buehne.js; Vorlagen art/mockups/m4/tanzalarm.png, winkekette.png, pad_kaesten.png) ---------- */
/* Karten in Spielerfarbe, Name weiß; gesperrt = Schloss, raus = grau mit Geist; Fortschritts-Punkte der Winke-Kette; „+3/+1“ steigt auf */
.rthud.stage .rt-card { background: linear-gradient(color-mix(in srgb, var(--pc) 62%, #fff), var(--pc)); border-color: #7a4a26; }
.rthud.stage .rt-name { color: #fff; -webkit-text-stroke: 3px #5a3418; paint-order: stroke fill; font-size: 15px; }
.rthud.stage .rt-card.out { background: linear-gradient(#d9d4cc, #a9a39a); }
.rthud.stage .rt-card.dim { opacity: .72; }
.rt-lock, .rt-ghost { position: absolute; right: -8px; bottom: -6px; width: 30px; height: 30px; display: none; background: center / contain no-repeat; filter: drop-shadow(0 2px 2px #0006); }
.rt-card.lock .rt-lock { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M13 18v-5a7 7 0 0 1 14 0v5' fill='none' stroke='%23fff' stroke-width='7'/%3E%3Cpath d='M13 18v-5a7 7 0 0 1 14 0v5' fill='none' stroke='%236d4520' stroke-width='3.5'/%3E%3Crect x='7' y='17' width='26' height='20' rx='5' fill='%23e0302c' stroke='%23fff' stroke-width='2.5'/%3E%3Ccircle cx='20' cy='26' r='3' fill='%23fff'/%3E%3C/svg%3E"); }
.rt-card.ghost .rt-ghost { display: block; width: 34px; height: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M8 36V18a12 12 0 0 1 24 0v18l-4-3.2-4 3.2-4-3.2-4 3.2-4-3.2z' fill='%23fbfbff' stroke='%23585868' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cellipse cx='15.5' cy='19' rx='2.4' ry='3.2' fill='%23333'/%3E%3Cellipse cx='24.5' cy='19' rx='2.4' ry='3.2' fill='%23333'/%3E%3Cellipse cx='20' cy='26.5' rx='2.2' ry='2.6' fill='%23333'/%3E%3C/svg%3E"); }
.rt-card.ghost .rt-x { display: none; }
.rt-pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 74px; min-height: 9px; }
.rt-pips.hidden { display: none; }
.rt-pips i { width: 8px; height: 8px; border-radius: 50%; background: #0000002e; box-shadow: inset 0 1px 1px #0004; }
.rt-pips i.on { background: #fff; box-shadow: 0 0 0 1px #6d4520; }
.rt-pips i.done { background: #5fdc3a; box-shadow: 0 0 0 1px #2f6e12; }
.rt-plus { position: absolute; left: 50%; top: 18px; z-index: 3; font: 700 30px/1 'Fredoka', system-ui; color: #fff6d0; -webkit-text-stroke: 5px #6d4520; paint-order: stroke fill;
  pointer-events: none; animation: rtPlus 1.3s ease-out forwards; }
.rt-plus.p3 { color: #ffd23a; font-size: 36px; }
@keyframes rtPlus { 0% { transform: translate(-50%, 10px) scale(.4); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.15); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -46px) scale(1); opacity: 0; } }
/* Runden-Schild (Tanz-Alarm): Hochformat mittig unter den Karten, Querformat oben rechts */
.rthud.stage .rt-timer.rt-round { display: flex; top: calc(env(safe-area-inset-top) + 160px); padding: 4px 14px 5px; font-size: 18px; color: #5a3418; text-shadow: none;
  background: linear-gradient(#e8c28e, #c9935a); border: 3px solid #7a4a26; border-radius: 12px; box-shadow: inset 0 2px 0 #fff6, 0 3px 0 #4a2c12, 0 6px 10px #0005; }
.rthud.stage.wide .rt-timer.rt-round { top: calc(env(safe-area-inset-top) + 12px); left: auto; right: 14px; transform: rotate(3deg); font-size: 24px; padding: 8px 18px 9px; }
/* Folge-Leiste (Winke-Kette): Holzbrett mit Mulden, farbige Kugeln, Zeitbalken; Schild „x von n“ */
.wk-seq { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 116px); transform: translateX(-50%); padding: 8px 12px 12px; border-radius: 14px;
  background: linear-gradient(#b98450, #8a5a30); border: 3px solid #5a3418; box-shadow: inset 0 2px 0 #fff4, 0 4px 0 #4a2c12, 0 8px 14px #0006; }
.wk-dots { display: flex; gap: 5px; }
.wk-dot { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #5a3418, #7a4a26); box-shadow: inset 0 3px 4px #0007; }
.wk-dot.gone { display: none; }
.wk-dot.c0, .wk-dot.c1, .wk-dot.c2, .wk-dot.c3 { animation: wkDot .25s cubic-bezier(.2, 1.6, .4, 1); box-shadow: 0 0 10px var(--g), inset 0 -3px 4px #0004, inset 0 3px 3px #fff8; }
.wk-dot.c0 { --g: #ff4a4a; background: radial-gradient(circle at 40% 35%, #ff9a9a, #e5383b 60%, #a8181a); }
.wk-dot.c1 { --g: #ffd84a; background: radial-gradient(circle at 40% 35%, #fff2a0, #f9cf1f 60%, #b88a08); }
.wk-dot.c2 { --g: #4aa8ff; background: radial-gradient(circle at 40% 35%, #a8d4ff, #2a8cf5 60%, #1050a8); }
.wk-dot.c3 { --g: #5ae04a; background: radial-gradient(circle at 40% 35%, #a8f09a, #2fb52a 60%, #187014); }
@keyframes wkDot { from { transform: scale(.3); } }
.wk-time { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #ffd23a, #ff8a3d); transform-origin: left center; box-shadow: 0 0 6px #ffb84a; }
.wk-time.hidden, .wk-seq.hidden, .wk-tag.hidden { display: none; }
.wk-tag { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 168px); transform: translateX(-50%); padding: 4px 14px 5px; font: 700 18px/1 'Fredoka', system-ui; color: #5e3a19; white-space: nowrap;
  background: var(--karte); border: 3px solid var(--rand); border-radius: 12px; box-shadow: 0 3px 0 #6d4520, 0 6px 10px #0005; }
.rthud.stage.wide .wk-seq { top: calc(env(safe-area-inset-top) + 126px); padding: 10px 16px 14px; }
.rthud.stage.wide .wk-dot { width: 34px; height: 34px; }
.rthud.stage.wide .wk-dots { gap: 8px; }
.rthud.stage.wide .wk-tag { top: calc(env(safe-area-inset-top) + 190px); font-size: 22px; }
/* Kasten-Modus: kein Joystick, kein Aktionsknopf (touchHalf legt sie trotzdem an) */
.rt-boxmode .rt-stick, .rt-boxmode .rt-btn { display: none; }
/* Farb-Kästen unten (Touch: input/players.js touchHalf, PC: Maus + Tasten): Hochformat 2 × 2 (geteilt: je Hälfte 2 × 2 klein), Querformat eine Reihe je Spieler */
.rt-boxes { position: absolute; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 10px); display: flex; justify-content: center; align-items: flex-end; gap: 12px; pointer-events: none; z-index: 6; }
.rt-bgroup { position: relative; flex: 1 1 0; max-width: 460px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; --bh: min(100px, 12vh); }
.rt-boxes.n2 .rt-bgroup { --bh: min(74px, 9vh); gap: 6px; padding: 5px; border-radius: 18px; border: 3px solid var(--pc); background: #0003; box-shadow: 0 0 12px var(--pc); }
.rt-boxes.wide .rt-bgroup { grid-template-columns: repeat(4, 1fr); max-width: 580px; --bh: min(96px, 15vh); }
.rt-boxes.wide.n2 { justify-content: space-between; }
.rt-boxes.wide.n2 .rt-bgroup { max-width: 420px; --bh: min(78px, 13vh); }
.rt-box { position: relative; height: var(--bh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: auto; touch-action: none;
  border-radius: 18px; border: 3px solid #5a3418; box-shadow: inset 0 3px 0 #fff7, inset 0 -5px 0 #0003, 0 4px 0 #4a2c12, 0 7px 12px #0005; transition: transform .06s, filter .06s;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.rt-box.c0 { background: linear-gradient(#ff7a7a, #e5383b 55%, #c42326); }
.rt-box.c1 { background: linear-gradient(#ffe878, #f9cf1f 55%, #e0b00a); }
.rt-box.c2 { background: linear-gradient(#7ac0ff, #2a8cf5 55%, #1a6ed0); }
.rt-box.c3 { background: linear-gradient(#7ae070, #2fb52a 55%, #22931e); }
.rt-bface { height: calc(var(--bh) * .64); aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff; background: #ffffff38; overflow: hidden; box-shadow: 0 2px 4px #0004; }
.rt-bstk { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.12); }
.rt-bname { font: 700 13px/1 'Fredoka', system-ui; color: #fff; -webkit-text-stroke: 3px #5a3418; paint-order: stroke fill; white-space: nowrap; }
.rt-boxes.n2:not(.wide) .rt-bname { display: none; }
.rt-boxes.n2:not(.wide) .rt-bface { height: calc(var(--bh) * .78); }
.rt-bkey { position: absolute; left: 6px; top: 5px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 7px; font: 700 13px/20px 'Fredoka', system-ui; font-style: normal; text-align: center;
  color: #fff; background: #4a2c12cc; box-shadow: 0 1px 0 #fff5; }
.rt-box.on { transform: translateY(3px) scale(.95); filter: brightness(1.18); }
.rt-box.ok { animation: rtBoxOk .4s ease-out; }
.rt-box.bad { animation: rtBoxBad .4s ease-out; }
@keyframes rtBoxOk { 30% { box-shadow: 0 0 0 4px #fff, 0 0 22px 6px #8cff6a; } }
@keyframes rtBoxBad { 20% { transform: translateX(-5px); box-shadow: 0 0 0 4px #ff3a2a; } 50% { transform: translateX(5px); } 80% { transform: translateX(-2px); } }
.rt-bgroup.off .rt-box { filter: grayscale(.75) brightness(.78); opacity: .62; }
.rt-bgroup.ok { animation: rtGrpOk .3s ease-out; }
.rt-bgroup.bad { animation: rtBoxBad .4s ease-out; }
@keyframes rtGrpOk { 40% { transform: scale(1.02); } }
.rt-bnote { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); padding: 6px 14px 7px; font: 700 18px/1 'Fredoka', system-ui; color: #5e3a19; white-space: nowrap;
  background: var(--karte); border: 3px solid var(--rand); border-radius: 12px; box-shadow: 0 3px 0 #6d4520, 0 6px 10px #0006; pointer-events: none; z-index: 2; }
.rt-bnote.hidden { display: none; }
.rt-blegend { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); display: flex; justify-content: center; gap: 14px; font: 700 13px/1 'Fredoka', system-ui; color: #fff; text-shadow: 0 1px 2px #000a; }
.rt-blegend span::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 2px #fff; }
/* Treffer-Chips über den Podesten (render/arenas/buehne.js, im #labels-Bereich) */
.bu-chip { position: absolute; left: 0; top: 0; width: 44px; height: 44px; pointer-events: none; }
.bu-in { position: absolute; inset: 0; border-radius: 50%; background: #fffaf0; border: 3px solid var(--pc); box-shadow: 0 3px 6px #0006; animation: buChip .35s cubic-bezier(.2, 1.6, .4, 1); }
.bu-in img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.bu-in b { display: block; text-align: center; font: 700 22px/38px 'Fredoka', system-ui; color: var(--pc); }
.bu-chip.ok .bu-in { box-shadow: 0 0 0 3px #fff, 0 0 14px 4px #7aff5a, 0 3px 6px #0006; }
.bu-chip.bad img, .bu-chip.bad b { filter: grayscale(.6) brightness(.85); }
.bu-in i { display: none; }
.bu-chip.bad i { display: block; position: absolute; inset: 6px; }
.bu-chip.bad i::before, .bu-chip.bad i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 120%; height: 6px; margin: -3px 0 0 -60%; border-radius: 3px; background: #e0302c; box-shadow: 0 0 0 2px #fff; transform: rotate(45deg); }
.bu-chip.bad i::after { transform: rotate(-45deg); }
@keyframes buChip { from { scale: .2; opacity: 0; } }