/* Handy-App 6 (Sebastian 30.09.2026): übersichtlich, selbsterklärend, nichts fehlt.
   Etappe 1 – Grundgerüst: Spielleiste mit Mittelknopf als Haupt-Bestätigung, Einblendungen von oben, Bereitschafts-Stand, Karten scrollbar.
   Wird als letzte Datei geladen (nach ph5.css). */
:root { --p6-gold: #e8c46a; --p6-gold2: #f7e3a6; --p6-ink: #f1e6cf; --p6-mute: #a89a82; --p6-iron: #16120e; --p6-line: rgb(232 196 106 / .35) }

/* ---------- Spielleiste ---------- */
body.play .ptabs.p6 { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 118px 1fr !important; align-items: end; gap: 0 !important;
  height: calc(74px + env(safe-area-inset-bottom)); padding: 0 12px env(safe-area-inset-bottom) !important; background: none !important; border: 0 !important; box-shadow: none !important; pointer-events: none }
body.play .ptabs.p6::before { display: none }
/* Die Leiste selbst: Eisenband mit Goldkante, in der Mitte eine Fassung für den Kristall */
body.play .ptabs.p6 .p6-bar { position: absolute; inset: 14px 0 0; pointer-events: auto;
  background:
    radial-gradient(circle 52px at 50% 2px, #0d0a08 0 44px, #231b14 46px, var(--p6-gold) 47px 48.5px, #000 49px, transparent 50px) top / 100% 100% no-repeat,
    linear-gradient(180deg, #2a221b, #15110d 38%, #0b0907);
  box-shadow: inset 0 1px 0 var(--p6-gold), inset 0 2px 0 #000, inset 0 3px 0 rgb(255 230 180 / .08), 0 -10px 24px rgb(0 0 0 / .6) }
body.play .ptabs.p6 .p6-bar::after { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgb(255 220 160 / .035) 22px 23px) }
body.play .ptabs.p6 button { position: relative; z-index: 1; display: grid; justify-items: center; align-content: end; gap: 4px; min-height: 0 !important; height: 60px; padding: 0 0 8px !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; pointer-events: auto; color: var(--p6-mute) !important;
  font: 800 10px var(--u5) !important; letter-spacing: .18em; text-transform: uppercase; -webkit-tap-highlight-color: transparent }
body.play .ptabs.p6 .p6-ic { position: relative; width: 38px; height: 38px; border-radius: 50%; padding: 2px; background: linear-gradient(145deg, #8a6a30, #2b2012 55%, #6b5028) }
body.play .ptabs.p6 .p6-ic img { width: 100% !important; height: 100% !important; padding: 0 !important; background: none !important; border-radius: 50% !important; box-shadow: inset 0 0 0 1px #000 !important; filter: saturate(.65) brightness(.8); transition: filter .2s }
body.play .ptabs.p6 button.on:not(.main), body.play .ptabs.p6 button.open { color: var(--p6-gold2) !important }
body.play .ptabs.p6 button.on:not(.main) .p6-ic, body.play .ptabs.p6 button.open .p6-ic { background: linear-gradient(145deg, #fff0c0, #b8913a 50%, #f3dea0); box-shadow: 0 0 14px rgb(232 196 106 / .45) }
body.play .ptabs.p6 button.on:not(.main) .p6-ic img, body.play .ptabs.p6 button.open .p6-ic img { filter: none }
body.play .ptabs.p6 button:active .p6-ic { scale: .92 }
body.play .ptabs.p6 .badge { position: absolute !important; top: auto !important; bottom: 34px !important; right: calc(50% - 30px) !important; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center;
  font: 800 12px var(--u5) !important; letter-spacing: 0; color: #2a1404; background: linear-gradient(180deg, #ffc46a, #ff8a2a); box-shadow: 0 0 0 2px #0b0907, 0 0 10px rgb(255 140 40 / .7); animation: p6badge 2s ease-in-out infinite }
body.play .ptabs.p6 .badge[hidden] { display: none !important }
@keyframes p6badge { 50% { box-shadow: 0 0 0 2px #0b0907, 0 0 18px rgb(255 140 40 / .95) } }

/* ---------- Mittelknopf (Sebastian 30.09.: kein Icon, kein Fremdkörper – Runen bleiben) ----------
   Sebastians Wahl aus drei Varianten: A Runensiegel (runde Goldfassung, Schrift eingraviert, bei Weiter/Pull glüht das Metall golden). */
body.play .ptabs.p6 button.main { height: 104px; margin-top: -30px !important; padding: 0 0 6px !important; align-content: end; gap: 2px }
body.play .ptabs.p6 button.main::before { display: none !important }
/* Siegel und Runenkreis teilen sich EINE feste Mitte (--mc): Zustandswechsel ändern nur die Größe um diese Mitte, nie die Lage.
   Vorher hing beides an „top“ (Siegel 8 px / −6 px, Ring −14 px / −30 px) – die Mitte sprang beim Wechsel Weiter ↔ Eingeloggt um 6 px
   und lag in den grünen/offenen Zuständen 6 px unter der Ringmitte (Sebastian 01.10.: „Knopf verschiebt sich kurz“). */
body.play .ptabs.p6 button.main { --mc: 43px }
body.play .ptabs.p6 .p6-seal { position: absolute; left: 50%; top: var(--mc); translate: -50% -50%; display: block; pointer-events: none; transition: width .35s cubic-bezier(.34, 1.5, .64, 1), height .35s cubic-bezier(.34, 1.5, .64, 1), filter .35s }
body.play .ptabs.p6 .p6-seal .f, body.play .ptabs.p6 .p6-seal .sh { position: absolute; inset: 0; border-radius: inherit; pointer-events: none }
body.play .ptabs.p6 .p6-seal .sh { background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .55) 48%, transparent 58%) -130% 0 / 260% 100% no-repeat; opacity: 0 }
body.play .ptabs.p6 button.main .tl { position: absolute; left: 50%; translate: -50% 0; z-index: 3; white-space: nowrap; letter-spacing: .06em; transition: color .3s }
body.play .ptabs.p6 .mx { position: absolute; inset: 0; pointer-events: none; z-index: 4 }
body.play .ptabs.p6 .mx .cnt { position: absolute; right: 4px; top: 0; min-width: 30px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center;
  font: 800 11.5px var(--u5); font-style: normal; letter-spacing: 0; color: var(--p6-ink); background: #0b0907; box-shadow: 0 0 0 1px var(--p6-gold) }
/* Runenkreise – nur wenn etwas zu tun ist */
body.play .ptabs.p6 .p6-rr { position: absolute; left: 50%; top: var(--mc); width: 108px; height: 108px; translate: -50% -50%; pointer-events: none; opacity: 0; transition: opacity .4s, width .35s, height .35s }
body.play .ptabs.p6 .p6-rr img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; padding: 0 !important; background: none !important; border-radius: 0 !important; box-shadow: none !important; translate: none }
body.play .ptabs.p6 .p6-rr .r1 { animation: p6spin 26s linear infinite; filter: drop-shadow(0 0 4px rgb(255 205 90 / .7)) }
body.play .ptabs.p6 .p6-rr .r2 { inset: 17%; width: 66% !important; height: 66% !important; animation: p6spin 14s linear infinite reverse; filter: drop-shadow(0 0 4px rgb(90 210 240 / .7)) }
@keyframes p6spin { to { rotate: 360deg } }
body.play .ptabs.p6:not(.mk-f) button.main.k-need .p6-rr { opacity: .8 }
body.play .ptabs.p6:not(.mk-f) button.main:is(.k-gate, .k-login) .p6-rr { opacity: 1; width: 140px; height: 140px }
body.play .ptabs.p6:not(.mk-f) button.main:is(.k-gate, .k-login) .p6-rr .r1 { animation-duration: 12s }
body.play .ptabs.p6:not(.mk-f) button.main:is(.k-ready, .k-locked) .p6-rr { opacity: .5 } body.play .ptabs.p6:not(.mk-f) button.main:is(.k-ready, .k-locked) .p6-rr img { filter: hue-rotate(80deg) saturate(.8) }
body.play .ptabs.p6:not(.mk-f) button.main.waiting .p6-rr { opacity: .3 }
body.play .ptabs.p6 button.main:is(.k-gate, .k-login) .p6-seal .sh { opacity: 1; animation: p6shine 2.6s ease-in-out infinite }
@keyframes p6shine { 0%, 40% { background-position: -130% 0 } 80%, 100% { background-position: 130% 0 } }
@keyframes p6ok { 0% { scale: 1.14; filter: brightness(1.8) } 100% { scale: 1 } }

/* ===== A · Runensiegel: runde Goldfassung, dunkles Metall, Schrift eingraviert; bei „Weiter“ glüht das Metall golden ===== */
body.play .ptabs.p6.mk-a .p6-seal { width: 76px; height: 76px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(0 0 0 / .22) 0 2deg, transparent 2deg 6deg), conic-gradient(from 210deg, #5a4218, #f7e3a6, #8a6a2a, #fff1c4, #5a4218, #d9b25c, #5a4218);
  box-shadow: 0 0 0 1.5px #000, inset 0 0 0 1px rgb(255 240 200 / .35), 0 10px 18px rgb(0 0 0 / .8) }
body.play .ptabs.p6.mk-a .p6-seal .f { inset: 6px; background: url(/assets/ui/v5/rune-gold.svg) center / 86% no-repeat, radial-gradient(circle at 50% 30%, #3b3128, #1b1611 66%, #0b0907);
  background-blend-mode: soft-light, normal; box-shadow: inset 0 4px 10px #000, inset 0 -2px 3px rgb(255 220 160 / .1), 0 0 0 1px #000; transition: background .35s, box-shadow .35s }
body.play .ptabs.p6.mk-a .p6-seal .sh { inset: 6px }
/* Symbol statt Schrift (Sebastian 30.09.): eingraviert ins Metall; die Beschriftung bleibt nur für Screenreader/title */
body.play .ptabs.p6.mk-a button.main .tl { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
body.play .ptabs.p6.mk-a .mx .sub { display: none }
body.play .ptabs.p6.mk-a .p6-seal .ic { position: absolute; inset: 6px; border-radius: 50%; display: grid; place-items: center; color: #b89a5e; transition: color .3s;
  filter: drop-shadow(0 -1px 0 rgb(0 0 0 / .9)) drop-shadow(0 1px 0 rgb(255 230 180 / .22)) }
body.play .ptabs.p6.mk-a .p6-seal .ic svg { width: 54%; height: 54%; overflow: visible }
body.play .ptabs.p6.mk-a .p6-seal .ic .l { font: 400 15.5px var(--d5); fill: #1b1611 }
body.play .ptabs.p6.mk-a button.main.on .p6-seal .ic { color: var(--p6-gold2) }
body.play .ptabs.p6.mk-a button.main.k-need .p6-seal .ic { color: #ffd98a; filter: drop-shadow(0 -1px 0 #000) drop-shadow(0 0 6px rgb(255 190 80 / .8)); animation: mkAic 1.8s ease-in-out infinite }
@keyframes mkAic { 50% { scale: 1.08 } }
body.play .ptabs.p6.mk-a button.main:is(.k-gate, .k-login) .p6-seal .ic { color: #3a2206; filter: drop-shadow(0 1px 0 rgb(255 250 220 / .6)) drop-shadow(0 -1px 0 rgb(90 50 0 / .5)) }
body.play .ptabs.p6.mk-a button.main:is(.k-gate, .k-login) .p6-seal .ic svg { width: 58%; height: 58% }
body.play .ptabs.p6.mk-a button.main:is(.k-gate, .k-login) .p6-seal .ic .l { fill: #f7d77a }
body.play .ptabs.p6.mk-a button.main:is(.k-ready, .k-locked) .p6-seal .ic { color: #06240e; filter: drop-shadow(0 1px 0 rgb(220 255 225 / .6)) }
body.play .ptabs.p6.mk-a button.main:is(.k-ready, .k-locked) .p6-seal .ic .l { fill: #8ff0a8 }
body.play .ptabs.p6.mk-a button.main.k-need .p6-seal .f { animation: mkAbreath 1.8s ease-in-out infinite }
@keyframes mkAbreath { 50% { box-shadow: inset 0 4px 10px #000, inset 0 0 18px rgb(255 190 80 / .55), 0 0 0 1px #000 } }
body.play .ptabs.p6.mk-a button.main:is(.k-gate, .k-login) .p6-seal { width: 92px; height: 92px; box-shadow: 0 0 0 1.5px #000, inset 0 0 0 1px rgb(255 240 200 / .5), 0 0 30px rgb(255 200 80 / .7), 0 10px 20px #000d; animation: mkAcall 1.6s ease-in-out infinite }
body.play .ptabs.p6.mk-a button.main:is(.k-gate, .k-login) .p6-seal .f { background: url(/assets/ui/v5/rune-gold.svg) center / 86% no-repeat, radial-gradient(circle at 50% 28%, #fff6d2, #f3c64e 40%, #b07a1a 80%, #6e4a10); background-blend-mode: multiply, normal; box-shadow: inset 0 3px 8px rgb(80 40 0 / .6), 0 0 0 1px #000 }
body.play .ptabs.p6.mk-a button.main:is(.k-gate, .k-login):active .p6-seal { scale: .93 }
@keyframes mkAcall { 50% { box-shadow: 0 0 0 1.5px #000, inset 0 0 0 1px rgb(255 240 200 / .6), 0 0 52px rgb(255 205 80 / .95), 0 10px 20px #000d } }
body.play .ptabs.p6.mk-a button.main:is(.k-ready, .k-locked) .p6-seal { animation: p6ok .6s cubic-bezier(.34, 1.6, .64, 1) }
body.play .ptabs.p6.mk-a button.main:is(.k-ready, .k-locked) .p6-seal .f { background: radial-gradient(circle at 50% 28%, #d8ffe0, #4ecf6c 44%, #17602a 88%); box-shadow: inset 0 3px 8px rgb(0 40 10 / .6), 0 0 0 1px #000 }
body.play .ptabs.p6.mk-a button.main.waiting .p6-seal { filter: grayscale(.7) brightness(.7); animation: none }

/* Aufklappmenü: Zähler an den Einträgen */
.fan .fan-items button .fcnt { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; font: 800 12px var(--u5); font-style: normal; color: #2a1404; background: linear-gradient(180deg, #ffc46a, #ff8a2a) }
/* Platz für die Leiste */
body.play.has-tabs .pbody { padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important }

/* ---------- Einblendungen von oben (wie eine Nachricht) ----------
   Sebastian 30.09.: schmal und nur ganz oben. Eine Zeile (höchstens zwei), die neueste vorn, ältere liegen als Kante dahinter
   (wie ein Benachrichtigungsstapel) – der Stapel ist nie höher als ~60 px. */
body.play .toasts.t6 { position: fixed; inset: auto; top: calc(6px + env(safe-area-inset-top)) !important; left: 8px !important; right: 8px !important; bottom: auto !important; width: auto; max-width: 520px; margin: 0 auto;
  padding: 0; border: 0; background: none; overflow: visible; display: grid !important; grid-template: 1fr / 1fr; gap: 0 !important; z-index: 90; pointer-events: none }
body.play .toasts.t6 .toast { grid-area: 1 / 1; align-self: start; pointer-events: auto; display: grid !important; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 0; padding: 6px 10px 6px 7px !important;
  border-radius: 12px !important; border: 1px solid transparent !important; background: linear-gradient(180deg, rgb(34 27 20 / .95), rgb(14 11 8 / .96)) padding-box, linear-gradient(180deg, #f3dea0, #6e5424) border-box !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 18px #000c, 0 0 0 1px #000 !important; font: 600 13px/1.25 var(--u5) !important; color: var(--p6-ink) !important;
  touch-action: none; transition: transform .25s, scale .25s, opacity .25s, translate .25s; animation: t6in .45s cubic-bezier(.2, 1.3, .4, 1) both; z-index: 3 }
body.play .toasts.t6 .toast:nth-child(2) { z-index: 2; translate: 0 7px; scale: .95; opacity: .75; pointer-events: none }
body.play .toasts.t6 .toast:nth-child(2) > * { visibility: hidden }
body.play .toasts.t6 .toast:nth-child(n+3) { display: none !important }
body.play .toasts.t6 .toast.out { animation: t6out .34s cubic-bezier(.5, 0, .9, .4) both }
@keyframes t6in { from { transform: translateY(-130%); opacity: 0 } }
@keyframes t6out { to { transform: translateY(-130%); opacity: 0 } }
body.play .toasts.t6 .ti { width: 24px; height: 24px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #8a6a30 }
body.play .toasts.t6 .ti img { width: 100%; height: 100%; display: block }
body.play .toasts.t6 .ti.dot { display: grid; place-items: center; background: radial-gradient(circle, #3a2c1a, #15100a) } body.play .toasts.t6 .ti.dot::after { content: ""; width: 8px; height: 8px; rotate: 45deg; background: var(--p6-gold); box-shadow: 0 0 8px var(--p6-gold) }
body.play .toasts.t6 .tx { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden } body.play .toasts.t6 .tx b { color: var(--p6-gold2) }
body.play .toasts.t6 .tx .money, body.play .toasts.t6 .tx .cn { vertical-align: middle }
body.play .toasts.t6 .tx img { max-height: 16px; width: auto; vertical-align: -3px }
body.play .toasts.t6 .tx button, body.play .toasts.t6 .tx .so-row { display: none !important }
body.play .toasts.t6 .tgo { font: 800 20px/1 var(--u5); font-style: normal; color: var(--p6-gold) }
body.play .toasts.t6 .toast.k-ok { background: linear-gradient(180deg, rgb(22 34 24 / .95), rgb(8 14 9 / .96)) padding-box, linear-gradient(180deg, #b8f5c4, #2e7a44) border-box !important }
body.play .toasts.t6 .toast.k-ok .tx b { color: #b8f5c4 }
body.play .toasts.t6 .toast.k-req { background: linear-gradient(180deg, rgb(40 26 14 / .95), rgb(16 10 5 / .96)) padding-box, linear-gradient(180deg, #ffd08a, #b8621e) border-box !important }

/* ---------- Bereitschafts-Stand (der Knopf ist der Mittelknopf) ---------- */
.g6 { display: grid; gap: 10px; margin: 12px 0; padding: 14px 16px; border-radius: 12px; border: 1px solid transparent;
  background: linear-gradient(180deg, rgb(30 24 17 / .92), rgb(12 9 7 / .94)) padding-box, linear-gradient(180deg, #d9b45e, #5a4424) border-box; box-shadow: 0 8px 22px #000b }
.g6-h { display: flex; align-items: baseline; gap: 10px } .g6-h b { font: 400 20px var(--d5); color: var(--p6-gold2) }
.g6-h em { margin-left: auto; font: 800 13px var(--u5); font-style: normal; letter-spacing: .12em; color: var(--p6-mute) }
.g6-pips { display: flex; flex-wrap: wrap; gap: 8px }
.g6-pips i { position: relative; width: 40px; height: 40px; border-radius: 50%; padding: 2px; background: #2a2016; box-shadow: 0 0 0 1px #000; opacity: .55; filter: grayscale(.8); transition: opacity .3s, filter .3s }
.g6-pips i img { width: 100%; height: 100%; border-radius: 50%; display: block }
.g6-pips i.on { opacity: 1; filter: none; background: var(--c); box-shadow: 0 0 0 1px #000, 0 0 12px color-mix(in srgb, var(--c) 60%, transparent) }
.g6-pips i.on::after { content: "✓"; position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 var(--u5); color: #07260f; background: #6ee08a; box-shadow: 0 0 0 2px #0b0907 }
.g6-t { margin: 0; font: 500 14.5px/1.4 var(--u5); color: var(--p6-mute) } .g6-t b { color: var(--p6-gold2) }
.g6.done { background: linear-gradient(180deg, rgb(20 32 22 / .92), rgb(8 12 9 / .94)) padding-box, linear-gradient(180deg, #8af0a4, #2e6a3e) border-box }
.g6.done .g6-h b { color: #b8f5c4 }
body.gatemode .ppane[data-tab="act"] { min-height: 0 !important }

/* ---------- Karten: ein Finger scrollt die Seite, zwei Finger zoomen; gezoomt verschiebt ein Finger die Karte ---------- */
body.play .mp6-map, body.play .mp6-map * { touch-action: pan-y !important }
body.play .mp6-map.zoomed, body.play .mp6-map.zoomed * { touch-action: none !important }

/* ---------- Antwort-Pad: Hinweiszeile statt Eingeloggt-Block ---------- */
body.play .pad-help b { color: var(--p6-gold2) }

/* =====================================================================================================================
   Etappe 2 – Bosskampf-Aktion aufgeräumt, Ziele als echte Einheitenrahmen, Antwortkarten als Runentafeln
   ===================================================================================================================== */
/* Eigene Leisten: schmal, Leben + Ressource in einem Block, Auren als Symbole */
.cb5-me { gap: 4px !important; margin: 2px 0 10px !important; padding: 8px 10px; border-radius: 10px; background: rgb(0 0 0 / .35); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .18) }
.cb5-me .rt-hp { height: 18px !important } .cb5-me .rt-hp span { font-size: 11.5px !important; line-height: 18px !important }
.cb5-me .rt-res { height: 11px } .cb5-me .rt-res span { font-size: 9.5px; line-height: 11px }
.cb5-auras:empty { display: none }
/* Begleiter: eine Zeile statt Karte */
.pet7 { grid-template-columns: 44px minmax(0, 1fr) auto !important; gap: 2px 10px !important; margin: 0 0 10px !important; padding: 6px 10px 6px 6px !important; border-radius: 10px !important }
.pet7 .pp { width: 44px !important; height: 44px !important } .pet7 .pp img { inset: 5px !important; width: 34px !important; height: 34px !important }
.pet7 .pi b { font-size: 14px !important } .pet7 .pi small { font-size: 11px !important } .pet7 .pi .rt-hp { height: 10px !important } .pet7 .pi .rt-hp span { font-size: 0 !important }
.pet7 .pab { display: none !important }
.pet7 .pet6-st { grid-column: 3; grid-row: 1 / span 2; display: grid !important; gap: 3px; margin: 0 !important }
.pet7 .pet6-st button { min-height: 22px !important; padding: 0 8px !important; font: 800 10.5px var(--u5) !important; border-radius: 6px !important }

/* Ansage des Bosses: kompakt */
.cb6-ann { grid-template-columns: 44px minmax(0, 1fr) !important; padding: 8px 10px !important } .cb6-ann .ab { width: 44px !important; height: 44px !important }
.cb6-ann b { font-size: 17px !important } .cb6-ann span { font-size: 12.5px !important }
.cb5-pre { margin: 6px 0 10px !important }

/* Dein Zug: vier Plätze wie eine Aktionsleiste */
.cb6-plan { display: grid; gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid transparent;
  background: linear-gradient(180deg, rgb(34 27 20 / .95), rgb(14 11 8 / .96)) padding-box, linear-gradient(180deg, #d9b45e, #5a4424) border-box; box-shadow: 0 8px 20px #000b }
.cb6-ph { display: flex; align-items: center; gap: 10px } .cb6-ph b { font: 400 19px var(--d5); color: var(--p6-gold2) } .cb6-ph small { font: 700 11.5px var(--u5); color: var(--p6-mute) }
.cb6-ph .pb { margin-left: auto; min-height: 32px !important; padding: 4px 12px !important; font-size: 12.5px !important }
.cb6-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px }
.cb6-slot { display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; padding: 6px 4px 7px; border-radius: 9px; border: 0; background: rgb(0 0 0 / .4); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .2); color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent }
.cb6-slot .ab { width: 42px; height: 42px; padding: 0 !important; border-radius: 8px; background: #0b0907 url(/assets/ui/paperdoll/bagslot.png) center / cover; box-shadow: 0 0 0 1px #000, 0 0 0 2px #7a5c24 }
.cb6-slot .ab img { width: 100%; height: 100%; border-radius: 8px; display: block }
.cb6-slot small { font: 800 9.5px var(--u5); letter-spacing: .16em; text-transform: uppercase; color: var(--p6-mute) }
.cb6-slot b { max-width: 100%; font: 700 12px/1.2 var(--u5); color: var(--p6-ink); text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.cb6-slot b em { font-style: normal; color: #9fd3ff }
.cb6-slot.empty b { color: var(--p6-mute); font-weight: 600 } .cb6-slot.empty .ab { opacity: .6 }
.cb6-slot.on { background: radial-gradient(ellipse 90% 90% at 50% 0, rgb(232 196 106 / .22), transparent 70%), rgb(0 0 0 / .4); box-shadow: inset 0 0 0 1.5px var(--p6-gold) }
.cb6-slot.on .ab { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--p6-gold2), 0 0 12px rgb(232 196 106 / .5) }
.cb6-slot[disabled] { cursor: default }
.cb6-plan.done { background: linear-gradient(180deg, rgb(20 32 22 / .92), rgb(8 12 9 / .94)) padding-box, linear-gradient(180deg, #8af0a4, #2e6a3e) border-box }
.cb6-plan.done .cb6-ph b { color: #b8f5c4 } .cb6-wait { margin: 0; font: 500 13.5px/1.35 var(--u5); color: var(--p6-mute) }

/* Reiter der Auswahl */
.cb6-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 6px; margin: 12px 0 8px; padding: 6px 0; background: linear-gradient(180deg, #0b0907 70%, transparent) }
.cb6-tabs button { flex: 1; min-height: 38px; padding: 0 8px; border: 0; border-radius: 19px; font: 800 12.5px var(--u5); letter-spacing: .08em; text-transform: uppercase; color: var(--p6-mute);
  background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .25); -webkit-tap-highlight-color: transparent }
.cb6-tabs button.on { color: #2a1a04; background: linear-gradient(180deg, #ffe7a0, #d9a54a); box-shadow: 0 0 12px rgb(232 196 106 / .45) }
.cb6-sec { margin: 10px 2px 6px; font: 800 11px var(--u5); letter-spacing: .18em; text-transform: uppercase; color: #cdb88a } .cb6-sec small { letter-spacing: .04em; text-transform: none; font-weight: 600; color: var(--p6-mute) }
.cb6-pane[hidden] { display: none }
/* Fähigkeiten-Kacheln: Name groß, Beschreibung höchstens zwei Zeilen */
.cb6-pane .cb5-ab { min-height: 54px !important } .cb6-pane .cb5-ab small { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.cb6-pane .cb5-ab .why { display: block; margin-top: 2px; font: 700 11px var(--u5); font-style: normal; color: #ff8a7a }
.cb6-pane .cb5-list.items { grid-template-columns: 1fr }
.cb6-forms { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px }

/* Zielwahl: Einheitenrahmen wie im Raid */
.cb6-pick { display: grid; gap: 8px; margin-top: 4px }
.cb6-uf { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 66px; padding: 6px 10px 6px 6px; border-radius: 10px; border: 1px solid transparent; text-align: left; color: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c, #888) 16%, #16110c), #0d0a08 60%) padding-box, linear-gradient(180deg, #8a6a30, #3a2a14) border-box; box-shadow: 0 6px 14px #000a; -webkit-tap-highlight-color: transparent }
.cb6-uf:active { transform: scale(.98) }
.cb6-uf .por { position: relative; width: 54px; height: 54px; border-radius: 50%; padding: 2px; background: var(--c, #888) }
.cb6-uf .por img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; box-shadow: inset 0 0 0 1px #000 }
.cb6-uf .por .lv { position: absolute; left: -3px; bottom: -3px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; display: grid; place-items: center; font: 800 11px var(--u5); font-style: normal; color: var(--p6-gold2); background: #0b0907; box-shadow: 0 0 0 1px var(--p6-gold) }
.cb6-uf .bd { display: grid; gap: 4px; min-width: 0 }
.cb6-uf .nm { display: flex; align-items: baseline; gap: 6px } .cb6-uf .nm b { font: 800 15px var(--u5); color: var(--c) } .cb6-uf .nm small { font: 700 11px var(--u5); color: var(--p6-mute) }
.cb6-uf .bar { position: relative; height: 16px; border-radius: 3px; overflow: hidden; background: #070504; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(214 176 104 / .18) }
.cb6-uf .bar i { position: absolute; inset: 0 auto 0 0; transition: width .4s }
.cb6-uf .bar em { position: relative; display: block; text-align: center; font: 800 11px/16px var(--u5); font-style: normal; color: #fff; text-shadow: 0 1px 1px #000 } .cb6-uf .bar em u { text-decoration: none; color: #cfe6ff }
.cb6-uf .bar.hp.ok i { background: linear-gradient(180deg, #56d86e, #1f7a36) } .cb6-uf .bar.hp.mid i { background: linear-gradient(180deg, #f0d24a, #a8841a) } .cb6-uf .bar.hp.low i { background: linear-gradient(180deg, #ff6a4a, #9a1a12) }
.cb6-uf .bar.mana { height: 9px } .cb6-uf .bar.mana i { background: linear-gradient(180deg, #4f8cff, #1c3fa8) } .cb6-uf .bar.wut { height: 9px } .cb6-uf .bar.wut i { background: linear-gradient(180deg, #ff5a4a, #9a1a12) }
.cb6-uf .bar.energie { height: 9px } .cb6-uf .bar.energie i { background: linear-gradient(180deg, #ffe45a, #b89a12) } .cb6-uf .bar:is(.mana, .wut, .energie) em { display: none }
.cb6-uf .au { display: grid; grid-template-columns: repeat(2, 24px); gap: 3px; align-content: center }
.cb6-uf .au i { position: relative; width: 24px; height: 24px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px #000 } .cb6-uf .au i img { width: 100%; height: 100%; display: block }
.cb6-uf .au i.deb { box-shadow: 0 0 0 1px #000, 0 0 0 2px #b04ae0 } .cb6-uf .au i.buf { box-shadow: 0 0 0 1px #000, 0 0 0 2px #4aa6ff }
.cb6-uf .au i em { position: absolute; right: 1px; bottom: 0; font: 800 10px var(--u5); font-style: normal; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000 }
.cb6-uf.down .por { background: #555 } .cb6-uf.down .por img { filter: grayscale(1) brightness(.6) } .cb6-uf.down .nm b { color: #9a9a9a }
.cb6-uf.me { box-shadow: 0 6px 14px #000a, 0 0 0 1px var(--p6-gold) }
.cb6-uf.boss { --c: #ff6a3a } .cb6-uf.boss .por img { border-radius: 50% } .cb6-uf.boss .bd small { font: 600 12px var(--u5); color: var(--p6-mute) }

/* Antwortkarten: Runentafeln – eingravierter Runenkreis, der beim Wählen zu leuchten und zu drehen beginnt; eingeloggt = Siegel */
.pad4 .pk { isolation: isolate; background: radial-gradient(ellipse 80% 70% at 50% 45%, rgb(60 46 30 / .55), transparent 72%), linear-gradient(180deg, #221a13, #0f0b08) padding-box, linear-gradient(180deg, #c9a24a, #4a3616) border-box !important }
.pad4 .pk::before, .pad4 .pk::after { z-index: 2 } .pad4 .pk .gem5 { z-index: 3 !important } .pad4 .pk .kl { z-index: 4 !important } .pad4 .pk > em { z-index: 5 }
.pad4 .pk .rr6 { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(92%, 170px); aspect-ratio: 1; translate: -50% -50%; background: url(/assets/ui/v5/rune-gold.svg) center / contain no-repeat; opacity: .13; pointer-events: none;
  animation: p6spin 60s linear infinite; transition: opacity .35s, filter .35s }
.pad4 .pk:nth-child(2) .rr6 { animation-direction: reverse } .pad4 .pk:nth-child(3) .rr6 { animation-duration: 70s } .pad4 .pk:nth-child(4) .rr6 { animation-direction: reverse; animation-duration: 50s }
.pad4 .pk.pre .rr6, .pad4 .pk.sel .rr6 { opacity: .85; animation-duration: 9s; filter: drop-shadow(0 0 4px rgb(255 205 90 / .8)) }
.pad4 .pk.sel > em { display: none }
.pad4 .pk.sel { overflow: visible !important }
/* Eingeloggt: kein roter Haken mehr (Sebastian 01.10.) – Goldkachel, Runenkreis und Hinweiszeile reichen */
/* Vorauswahl-Hinweis als kleine Plakette im Stil der Kachel (dunkel, feiner Goldrand) statt breitem Goldbalken (Sebastian 01.10.) */
.pad4 .pk.pre > em { left: 50%; right: auto; bottom: 9px; translate: -50% 0; width: max-content; max-width: calc(100% - 24px); display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px; border-radius: 999px; font: 800 10.5px/1.25 var(--u5); font-style: normal; letter-spacing: .05em; white-space: nowrap; color: #ffe7a0; text-shadow: 0 1px 1px #000;
  background: rgb(18 13 8 / .86); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(240 212 136 / .6), 0 2px 6px #0009 }
.pad4 .pk.pre > em svg { width: 11px; height: 11px; flex: none }
.pad4 .pk.gone .rr6 { opacity: 0 }
.pad4.rv .pk.ok .rr6 { opacity: .8; filter: hue-rotate(80deg) drop-shadow(0 0 4px rgb(120 240 150 / .7)) }

/* ==========================================================================
   Etappe 3 – Charakter: Klassenwappen + Porträt-Medaillon, Leersymbole, Werte knapp,
   Fähigkeiten als eigener Unterreiter, Talente mit sichtbarem Zurücksetzen, Taschen mit Vergleich
   ========================================================================== */
.pd6 { display: grid; gap: 10px; padding-bottom: 8px }
.pd6-head { display: grid; justify-items: center; gap: 1px; text-align: center; padding-top: 2px }
.pd6-head b { font: 400 25px/1.1 var(--ra-font-display); color: var(--c); text-shadow: 0 2px 0 #000, 0 0 18px color-mix(in srgb, var(--c) 45%, transparent) }
.pd6-head span { font: 700 12px var(--u5); letter-spacing: .08em; color: var(--p6-mute) } .pd6-head span em { font-style: normal; color: var(--c) }
.pd6-head i { font: italic 500 13px var(--u5); color: var(--p6-gold) }
/* Die Puppe: Talentbild der Klasse als Grund, Goldrahmen, links/rechts je drei Plätze */
.pd6-doll { position: relative; display: grid; grid-template-columns: 66px 1fr 66px; align-items: center; gap: 4px; padding: 12px 10px; border-radius: 14px; isolation: isolate; overflow: hidden;
  background: radial-gradient(ellipse 60% 55% at 50% 48%, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%), linear-gradient(180deg, rgb(8 6 4 / .35), rgb(8 6 4 / .82)), var(--tbg) center / cover, #120e0a;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgb(232 196 106 / .55), inset 0 0 40px #000, 0 10px 28px rgb(0 0 0 / .55) }
.pd6-doll::before { content: ""; position: absolute; inset: 6px; border-radius: 10px; border: 1px solid rgb(232 196 106 / .18); pointer-events: none; z-index: -1 }
.pd6-col { display: grid; gap: 10px; justify-items: center }
.pd6-slot { display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; -webkit-tap-highlight-color: transparent }
.pd6-slot i { position: relative; width: 54px; height: 54px; border-radius: 7px; padding: 2px; background: linear-gradient(160deg, #5b4a33, #1a140e 50%, #4a3a26); box-shadow: 0 0 0 1px #000, 0 4px 10px rgb(0 0 0 / .6) }
.pd6-slot img { display: block; width: 100%; height: 100%; border-radius: 5px }
.pd6-slot.has i { background: var(--q); box-shadow: 0 0 0 1px #000, 0 0 12px color-mix(in srgb, var(--q) 55%, transparent), 0 4px 10px rgb(0 0 0 / .6) }
.pd6-slot.has img { box-shadow: inset 0 0 0 1px #000 }
.pd6-slot.empty img { filter: brightness(1.9) contrast(1.1); opacity: .85 }
.pd6-slot.empty i::after { content: ""; position: absolute; inset: 2px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), inset 0 0 14px rgb(0 0 0 / .7); pointer-events: none }
.pd6-slot small { font: 800 9px var(--u5); letter-spacing: .1em; text-transform: uppercase; color: rgb(241 230 207 / .7); text-shadow: 0 1px 2px #000; white-space: nowrap }
.pd6-slot.empty small { color: rgb(168 154 130 / .75) }
.pd6-slot.on i { outline: 2px solid var(--p6-gold2); outline-offset: 2px }
.pd6-slot:active i { scale: .94 }
/* Gegenstände 6: 8 Plätze, Zweihänder in der Nebenhand ausgegraut, nicht tragbar rot, Set/Widerstands-Chips */
.pd6-col { gap: 6px }
.pd6-slot.ghost i { background: linear-gradient(160deg, #3a3226, #15110c 50%, #2e261b); box-shadow: 0 0 0 1px #000, 0 4px 10px rgb(0 0 0 / .6) } .pd6-slot.ghost img { opacity: .38; filter: grayscale(.7) }
.pd6-slot.off i::after { content: ""; position: absolute; inset: 2px; border-radius: 5px; background: rgb(200 20 20 / .38); box-shadow: inset 0 0 0 2px #ff3030 }
.pd6-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 2px }
.pd6-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: rgb(20 16 10 / .85); box-shadow: 0 0 0 1px rgb(232 196 106 / .25); font: 700 11.5px var(--u5); color: #1eff00 }
.pd6-chip img { width: 16px; height: 16px; border-radius: 3px } .pd6-chip small { font-weight: 600; color: #cfe8c8; opacity: .85 } .pd6-chip.set { color: #ffd100 }
/* Wappen (Sebastian 30.09.): Klassenwappen groß in der Mitte, Runenringe dahinter, links das Volkswappen, rechts das Porträt-Medaillon */
.pd6-crest { position: relative; justify-self: stretch; height: 222px; isolation: isolate }
.pd6-crest::before { content: ""; position: absolute; left: 50%; top: 18px; width: 190px; height: 170px; translate: -50% 0; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), color-mix(in srgb, var(--c) 18%, transparent) 60%, transparent) }
.pd6-crest .rr { position: absolute; left: 50%; top: 12px; width: 182px; height: 182px; translate: -50% 0; z-index: -1; background: url(/assets/ui/v5/rune-gold.svg) center / contain no-repeat; opacity: .5; filter: drop-shadow(0 0 5px rgb(255 205 90 / .6)); animation: p6spin 40s linear infinite }
.pd6-crest .rr.b { top: 40px; width: 126px; height: 126px; background-image: url(/assets/ui/v5/rune-teal.svg); opacity: .3; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c) 70%, transparent)); animation-duration: 24s; animation-direction: reverse }
.pd6-crest .wap { position: absolute; left: 50%; top: 4px; height: 178px; width: auto; max-width: 186px; object-fit: contain; translate: -50% 0;
  filter: drop-shadow(0 10px 12px rgb(0 0 0 / .85)) drop-shadow(0 0 16px color-mix(in srgb, var(--c) 40%, transparent)) }
.pd6-crest .rw { position: absolute; right: calc(50% + 34px); bottom: 20px; width: 58px; height: 62px; display: grid; place-items: center }
.pd6-crest .rw img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px #000) drop-shadow(0 0 1px #000) }
.pd6-crest .med { position: absolute; left: calc(50% + 38px); bottom: 26px; width: 50px; height: 50px; border-radius: 50%; padding: 2px; background: linear-gradient(145deg, #fff0c0, #8a6a30 55%, #e9cf8a); box-shadow: 0 0 0 2px #000, 0 4px 10px #000 }
.pd6-crest .med img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #1b140e }
.pd6-crest .med em { position: absolute; right: -8px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; display: grid; place-items: center; font: 800 12px var(--u5); font-style: normal; color: #2a1a06; background: linear-gradient(180deg, #ffe7a0, #d6a23e); box-shadow: 0 0 0 2px #000 }
.pd6-crest .gs { position: absolute; left: 50%; bottom: 0; translate: -50% 0; padding: 3px 12px; border-radius: 12px; font: 800 14px var(--u5); color: var(--p6-gold2); white-space: nowrap;
  background: linear-gradient(180deg, #2a2016, #0e0b08); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(232 196 106 / .5), 0 4px 10px #000 }
.pd6-crest .gs small { font-size: 10px; letter-spacing: .14em; color: var(--p6-mute) }
.pd6-more > summary .pd6-rc { align-self: center; height: 24px; width: auto; filter: drop-shadow(0 2px 3px #000) }
.pd6-gmb img.cr { width: 44px; height: 44px; border-radius: 0; box-shadow: none; object-fit: contain; filter: drop-shadow(0 3px 4px #000) }
.pd6-hint { margin: -2px 0 0; text-align: center; font: 600 11.5px var(--u5); color: var(--p6-mute) }
/* Werte: kleine Kacheln, zwei Spalten */
.pd6-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.pd6-st { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; min-height: 36px; padding: 5px 9px 5px 6px; border-radius: 8px; background: linear-gradient(180deg, rgb(40 32 24 / .75), rgb(14 11 8 / .85)); box-shadow: inset 0 0 0 1px rgb(232 196 106 / .16) }
.pd6-st img { width: 22px; height: 22px; border-radius: 4px; box-shadow: 0 0 0 1px #000 }
.pd6-st span { font: 700 11.5px var(--u5); color: var(--p6-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pd6-st b { font: 800 15px var(--u5); color: var(--p6-ink) } .pd6-st.dkp b { color: #7fd0ff }
.pd6-st:not(:has(img)) { grid-template-columns: 1fr auto; padding-left: 10px }
.pd6-more { border-radius: 9px; background: rgb(14 11 8 / .7); box-shadow: inset 0 0 0 1px rgb(232 196 106 / .16) }
.pd6-more > summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; list-style: none; cursor: pointer }
.pd6-more > summary::-webkit-details-marker { display: none }
.pd6-more > summary::after { content: "›"; margin-left: auto; font: 700 18px/1 var(--u5); color: var(--p6-gold); transition: rotate .2s } .pd6-more[open] > summary::after { rotate: 90deg }
.pd6-more > summary b { font: 800 13px var(--u5); color: var(--p6-ink) } .pd6-more > summary span { font: 600 11.5px var(--u5); color: var(--p6-mute) }
.pd6-more > p, .pd6-more > .pd6-stats { margin: 0; padding: 0 12px 12px } .pd6-more p { font: 500 13.5px/1.4 var(--u5); color: #e6dccb }
/* GM: Klasse & Volk wechseln */
.pd6-gm { border-radius: 10px; background: linear-gradient(180deg, rgb(60 26 8 / .75), rgb(20 10 4 / .9)); box-shadow: inset 0 0 0 1px rgb(255 154 90 / .55), 0 0 18px rgb(255 120 40 / .15) }
.pd6-gm > summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; list-style: none; font: 800 13px var(--u5); color: #ffb98a } .pd6-gm > summary::-webkit-details-marker { display: none }
.pd6-gm > summary img { width: 22px; height: 22px; border-radius: 4px }
.pd6-gm > p { margin: 0; padding: 0 12px 8px; color: #e8cdb8 }
.pd6-gmrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; padding: 0 10px 10px }
.pd6-gmb { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 0; border-radius: 8px; background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); font: 700 11.5px var(--u5); color: var(--c, var(--p6-ink)) }
.pd6-gmb img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px #000, 0 0 0 3px rgb(232 196 106 / .5); object-fit: cover }
.pd6-gmb.on { box-shadow: inset 0 0 0 2px var(--c) } .pd6-gmb:disabled:not(.on) { opacity: .4 }

/* Fähigkeiten: gruppierte Liste, Beschreibung auf Antippen */
.sk6-wrap { display: grid; gap: 6px; padding-bottom: 8px }
.sk6-sec { display: flex; align-items: center; gap: 8px; margin: 8px 2px 0; font: 800 11px var(--u5); letter-spacing: .16em; text-transform: uppercase; color: var(--p6-gold) }
.sk6-sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--p6-line), transparent) }
.sk6-sec em { order: 2; font-style: normal; font-size: 10px; color: var(--p6-mute); letter-spacing: 0 }
.sk6-list { display: grid; gap: 5px }
.sk6 { border-radius: 9px; background: linear-gradient(180deg, rgb(36 29 22 / .8), rgb(12 10 7 / .9)); box-shadow: inset 0 0 0 1px rgb(232 196 106 / .14) }
.sk6 > summary { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; list-style: none; cursor: pointer }
.sk6 > summary::-webkit-details-marker { display: none }
.sk6 > summary::after { content: "›"; font: 700 17px/1 var(--u5); color: var(--p6-mute); transition: rotate .2s } .sk6[open] > summary::after { rotate: 90deg; color: var(--p6-gold) }
.sk6 .ab { width: 38px; height: 38px; border-radius: 6px; padding: 1px; background: linear-gradient(160deg, #8a6a30, #2b2012); box-shadow: 0 0 0 1px #000 } .sk6 .ab img { width: 100%; height: 100%; border-radius: 5px; display: block }
.sk6 summary span { display: grid; min-width: 0 } .sk6 summary b { font: 800 14px var(--u5); color: var(--p6-ink) } .sk6 summary small { font: 600 11.5px var(--u5); color: var(--p6-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sk6 > p { margin: 0; padding: 0 12px 10px 54px; font: 500 13.5px/1.4 var(--u5); color: #7ce36a }
.sk6.lock { opacity: .55 } .sk6.lock .ab img { filter: grayscale(1) }
.sk6[open] { box-shadow: inset 0 0 0 1px rgb(232 196 106 / .45) }

/* Talente: Zurücksetzen immer sichtbar */
.tt6-respec { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 9px; background: rgb(0 0 0 / .55); box-shadow: inset 0 0 0 1px rgb(232 196 106 / .16) }
.tt6-respec .pb { flex: none; display: inline-flex; align-items: center; gap: 6px } .tt6-respec .pb img { width: 18px; height: 18px; border-radius: 3px }
.tt6-respec .pb:disabled { opacity: .45; filter: grayscale(.7) }
.tt6-respec span { font: 600 11.5px/1.3 var(--u5); color: var(--p6-mute) }

/* Taschen: Vergleich mit Unterschied, Anlegen im Kampf gesperrt */
.wtt-dl { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 2px 0; font: 800 12.5px var(--u5) } .wtt-dl .up { color: #3ee05a } .wtt-dl .dn { color: #ff5a4a }
.wtt-note { margin: 6px 2px 0; font: 600 12px var(--u5); color: #ffb35a }
.wtt-b .pb:disabled { opacity: .45 }
/* Tooltip als Blatt über der Spielleiste */
body.play .wtt-pop { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); max-height: 60vh; border-radius: 14px; padding: 16px 8px 8px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(232 196 106 / .3), 0 -16px 50px #000 }
body.play .wtt-pop::before { content: ""; position: absolute; left: 50%; top: 6px; width: 38px; height: 4px; translate: -50% 0; border-radius: 2px; background: rgb(255 255 255 / .22) }

/* ==========================================================================
   Etappe 4 – Gemeinschaft: Raid mit EP-Balken + schlankem Betrachten, Anfragen als Posteingang,
   Emote-Plaketten mit Abklingzeit, Erfolge als Übersicht + Symbolraster
   ========================================================================== */
/* Raid */
body.play .prank.r6 .r { grid-template-columns: 22px 56px minmax(0, 1fr) auto !important; padding: 8px 10px !important }
body.play .prank.r6 .nm2 { display: grid; gap: 5px; font: 400 17px var(--ra-font-display) }
body.play .prank.r6 .nm2 .off { font: 700 10px var(--u5); color: #c96a5a; font-style: normal; letter-spacing: .08em; text-transform: uppercase }
.xp6 { position: relative; display: block; height: 15px; border-radius: 8px; overflow: hidden; background: #0a0806; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px rgb(232 196 106 / .28) }
.xp6 i { position: absolute; inset: 0 auto 0 0; border-radius: 8px; background: linear-gradient(180deg, #d9a6ff, #8a3fd0 55%, #5b1e96); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 0 8px rgb(170 90 255 / .6) }
.xp6 b { position: relative; display: block; padding-left: 8px; font: 800 10.5px/15px var(--u5); letter-spacing: .04em; color: #fff; text-shadow: 0 1px 2px #000 }
body.play .prank.r6 .ep { display: grid; justify-items: end; gap: 1px } body.play .prank.r6 .ep b { font: 800 14px var(--u5); color: #e0b8ff } body.play .prank.r6 .ep small { font: 600 10.5px var(--u5); color: var(--p6-mute) }
.in6 { display: grid; gap: 8px; margin-top: 4px }
.in6-gear { display: flex; align-items: center; gap: 5px }
.in6-sl { width: 36px; height: 36px; border-radius: 5px; padding: 1px; background: #2a2016; box-shadow: 0 0 0 1px #000 } .in6-sl img { width: 100%; height: 100%; display: block; border-radius: 4px }
.in6-sl.has { background: var(--q) } .in6-sl:not(.has) img { filter: brightness(1.8); opacity: .75 }
.in6-gs { margin-left: auto; font: 800 15px var(--u5); color: var(--p6-gold2) } .in6-gs small { font-size: 9.5px; letter-spacing: .12em; color: var(--p6-mute); margin-left: 2px }
.in6-tal span { display: flex; flex-wrap: wrap; gap: 2px 6px; font: 700 11.5px var(--u5); color: var(--p6-mute) } .in6-tal span b { font-weight: 700 } .in6-tal span b.main { color: var(--c) } .in6-tal span i { font-style: normal; opacity: .5 }
.in6-ti { display: flex; gap: 4px; margin-top: 5px } .in6-ti img { width: 28px; height: 28px; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgb(94 220 94 / .5) } .in6-ti small { font: 600 11.5px var(--u5); color: var(--p6-mute) }
.in6-act { display: grid; gap: 6px; margin-top: 2px } .in6-act > .pb { justify-self: start; display: inline-flex; align-items: center; gap: 6px } .in6-act .pb img { width: 18px; height: 18px; border-radius: 3px }
.in6-acc > summary { display: flex; align-items: center; gap: 6px; list-style: none; font: 800 12.5px var(--u5); color: #ff9a7a; cursor: pointer } .in6-acc > summary::-webkit-details-marker { display: none }
.in6-acc > summary img { width: 18px; height: 18px; border-radius: 3px } .in6-acc > summary small { color: var(--p6-mute); font-weight: 600 }
.in6-acc .so-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px }

/* Sozial: Anfragen als Posteingang ganz oben */
.so6-in { display: grid; gap: 6px; margin: 4px 0 12px; padding: 10px; border-radius: 12px; background: linear-gradient(180deg, rgb(60 44 16 / .8), rgb(24 18 8 / .9)); box-shadow: inset 0 0 0 1px rgb(232 196 106 / .55), 0 0 22px rgb(232 196 106 / .12) }
.so6-inh { display: flex; align-items: center; gap: 8px; font: 800 11px var(--u5); letter-spacing: .16em; text-transform: uppercase; color: var(--p6-gold) }
.so6-inh em { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; font: 800 12px var(--u5); font-style: normal; letter-spacing: 0; color: #2a1404; background: linear-gradient(180deg, #ffc46a, #ff8a2a) }
body.play .so6-in .offer { display: grid !important; grid-template-columns: 34px minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 8px 10px !important; border-radius: 9px !important; background: rgb(0 0 0 / .45) !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06) !important; font: 600 14px/1.3 var(--u5) }
body.play .so6-in .offer::before { content: ""; width: 34px; height: 34px; border-radius: 6px; box-shadow: 0 0 0 1px #000; background: url(/assets/ui/icons/wow/inv_misc_bag_10.jpg) center / cover }
body.play .so6-in .offer[data-k="roll"]::before { background-image: url(/assets/ui/icons/wow/inv_misc_dice_01.jpg) }
body.play .so6-in .offer[data-k="group"]::before { background-image: url(/assets/ui/icons/wow/ability_warrior_battleshout.jpg) }
body.play .so6-in .offer[data-k="friend"]::before { background-image: url(/assets/ui/icons/wow/inv_misc_gift_02.jpg) }
body.play .so6-in .offer[data-k="guild"]::before { background-image: url(/assets/ui/icons/wow/inv_bannerpvp_01.jpg) }
body.play .so6-in .offer .ot b { color: var(--p6-gold2) }
body.play .so6-in .offer .so-row { grid-column: 2; display: flex !important; gap: 6px } body.play .so6-in .offer .pb { flex: 1; min-height: 38px !important }
body.play .so6-in .offer .pb:first-child { background: linear-gradient(180deg, #2c5a2c, #123012) padding-box, linear-gradient(180deg, #a8f0a0, #3a8a3a) border-box !important; color: #d8ffd0 !important }

/* Emotes: Plaketten mit Goldring, Satz darunter, Abklingzeit als Uhrzeiger-Schatten */
.emo6 { display: grid; gap: 10px; padding-bottom: 8px }
.emo6-h { display: grid; justify-items: center; text-align: center } .emo6-h b { font: 400 24px var(--ra-font-display); color: var(--p6-gold2); text-shadow: 0 2px 0 #000 } .emo6-h span { font: 600 12px var(--u5); color: var(--p6-mute) }
.emo6-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.emo6-b { position: relative; display: grid; justify-items: center; gap: 3px; padding: 12px 4px 10px; border: 0; border-radius: 14px; color: var(--p6-ink); -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 50% 30%, rgb(232 196 106 / .16), transparent 60%), linear-gradient(180deg, #221a12, #0e0b08); box-shadow: inset 0 0 0 1px rgb(232 196 106 / .25), 0 6px 14px rgb(0 0 0 / .45);
  animation: emo6in .5s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--i) * 35ms) }
.emo6-b .ab { position: relative; width: 58px; height: 58px; border-radius: 50%; padding: 3px; background: conic-gradient(from 210deg, #6b4f1e, #f7e3a6, #9a7430, #fff1c4, #6b4f1e); box-shadow: 0 0 0 2px #000, 0 6px 12px #000 }
.emo6-b .ab img { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: inset 0 0 0 2px #000 }
.emo6-b .ab s { position: absolute; inset: 3px; border-radius: 50%; pointer-events: none; opacity: 0; background: conic-gradient(rgb(0 0 0 / .72) calc(var(--cd, 0) * 1%), transparent 0) }
.emo6-b b { font: 400 16px var(--ra-font-display) } .emo6-b small { font: italic 500 11px var(--u5); color: var(--p6-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100% }
.emo6-b:active { scale: .95 }
@property --cd { syntax: "<number>"; inherits: true; initial-value: 0 }
.emo6-b.cd .ab s { opacity: 1; animation: emo6cd 4s linear forwards }
.emo6-b.cd:not(.fired) { filter: saturate(.5) brightness(.8) }
.emo6-b.fired { box-shadow: inset 0 0 0 2px var(--p6-gold2), 0 0 26px rgb(232 196 106 / .5) }
.emo6-b.fired .ab { animation: emo6pop .5s cubic-bezier(.2, .9, .3, 1.6) }
@keyframes emo6cd { from { --cd: 100 } to { --cd: 0 } }
@keyframes emo6pop { 40% { scale: 1.18 } }
@keyframes emo6in { from { opacity: 0; translate: 0 10px; scale: .9 } }
.emo6-more { text-align: center; margin: 0 }

/* Erfolge */
body.play .ach6 { display: grid; gap: 8px }
body.play .fold.ms6 .fold-h { display: grid !important; grid-template-columns: 26px 1fr auto 16px; align-items: center; gap: 2px 10px; text-align: left; padding: 10px 12px !important }
body.play .fold.ms6 .fold-h img { grid-row: span 2; width: 26px; height: 26px; border-radius: 4px }
body.play .fold.ms6 .fold-h span { font: 800 14px var(--u5); color: var(--p6-ink) } body.play .fold.ms6 .fold-h em { font: 800 14px var(--u5); font-style: normal; color: var(--p6-gold2) }
body.play .fold.ms6 .fold-h small { grid-column: 2 / 4; font: 600 11px var(--u5); color: var(--p6-mute); text-transform: none; letter-spacing: 0 }
body.play .fold.ms6 .fold-h i { grid-column: 4; grid-row: 1 / 3 }
.ms6-help { margin-top: 6px }
.ach6-n { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: linear-gradient(180deg, rgb(36 29 22 / .85), rgb(12 10 7 / .9)); box-shadow: inset 0 0 0 1px rgb(232 196 106 / .18) }
.ach6-n .ab { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #000 } .ach6-n .ab img { width: 100%; height: 100%; display: block }
.ach6-n b { display: block; font: 800 14px var(--u5); color: var(--p6-ink) } .ach6-n small { display: block; font: 500 12px var(--u5); color: var(--p6-mute); margin-bottom: 4px }
.ach6-n > em { font: 800 13px var(--u5); font-style: normal; color: var(--p6-gold2); padding: 4px 8px; border-radius: 12px; background: rgb(0 0 0 / .5); box-shadow: inset 0 0 0 1px rgb(232 196 106 / .4) }
.ach6-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px }
.ach6-i { position: relative; aspect-ratio: 1; padding: 2px; border: 0; border-radius: 8px; background: conic-gradient(#8a6a30 calc(var(--p) * 1%), #1a140e 0); box-shadow: 0 0 0 1px #000; -webkit-tap-highlight-color: transparent }
.ach6-i img { width: 100%; height: 100%; display: block; border-radius: 6px; filter: grayscale(1) brightness(.55) }
.ach6-i em { position: absolute; right: -3px; bottom: -3px; min-width: 18px; height: 16px; padding: 0 3px; border-radius: 8px; font: 800 9.5px/16px var(--u5); font-style: normal; color: #cfc6b4; background: #0b0907; box-shadow: 0 0 0 1px rgb(232 196 106 / .35) }
.ach6-i.done { background: linear-gradient(145deg, #fff0c0, #b8913a 50%, #f3dea0); box-shadow: 0 0 0 1px #000, 0 0 10px rgb(255 209 0 / .35) } .ach6-i.done img { filter: none } .ach6-i.done em { color: #2a1a06; background: linear-gradient(180deg, #ffe7a0, #d6a23e) }
.ach6-i.on { outline: 2px solid var(--p6-gold2); outline-offset: 2px }
body.play .achwin .tt-tip:not(:empty) { position: fixed; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgb(8 10 30 / .97), rgb(4 5 16 / .98)); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(232 196 106 / .35), 0 -16px 50px #000; animation: wttup .22s cubic-bezier(.2, .9, .3, 1.2) }
body.play .achwin .tt-tip b { font: 400 19px var(--ra-font-display) } body.play .achwin .tt-tip span { font: 500 14px/1.4 var(--u5); color: #f4ecdc }

/* Questtafel am Handy: Kategorie-Köpfe wachsen mit (lange Namen wurden abgeschnitten) */
body.play .qt-cat { height: auto !important; min-height: 68px; justify-content: center !important; flex-direction: column; gap: 3px !important; padding: 6px 4px !important; font: 400 13px/1.15 var(--ra-font-display) !important; text-align: center; white-space: normal; overflow-wrap: anywhere }
body.play .qt-cat .wi.cat { width: 22px !important; height: 22px !important }

/* Betrachten: Ausrüstung der anderen antippbar → Tooltip als Blatt mit Vergleich (Sebastian 30.09.) */
button.in6-sl { border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent } button.in6-sl:active { scale: .92 }
.in6-sl.on { outline: 2px solid var(--p6-gold2); outline-offset: 2px }
body.play .in6-pop[hidden] { display: none !important }
body.play .in6-pop { z-index: 70 }

/* ===== Markt am Handy: Bandit und Glückskiste zum Anfassen (Sebastian 01.10.) =====
   Handy = Automat bzw. Kiste als Bedienteil; das Ergebnis zeigt nur der Spielbildschirm. --pull 0–1 kommt aus client.js ([data-pull]). */
body.play .gb6-slot { --pull: 0; position: relative; width: min(78vw, 310px); aspect-ratio: 1; margin: 2px auto 0; translate: -7% 0; container-type: inline-size; filter: drop-shadow(0 14px 18px #000c) }
body.play .gb6-slot .cab { position: absolute; inset: 0 }
body.play .gb6-slot .cab::after { content: ''; position: absolute; inset: 0; z-index: 2; background: url(/assets/ui/market/v2/bandit-gehaeuse.webp) center / 100% 100% no-repeat; pointer-events: none }
body.play .gb6-slot .win { position: absolute; left: 33%; top: 48%; width: 34%; height: 15%; display: flex; gap: 1.4cqw; padding: 0 1cqw; overflow: hidden; background: #050403 }
body.play .gb6-slot .win { z-index: 1 } body.play .gb6-slot .led, body.play .gb6-slot .bulbs { z-index: 3 }
body.play .gb6-slot .reel { position: relative; flex: 1; overflow: hidden; background: linear-gradient(90deg, #030202, #241c14 22%, #33291e 50%, #241c14 78%, #030202) }
body.play .gb6-slot .strip { display: grid; justify-items: center; gap: 2cqw; padding-top: 2.6cqw; translate: 0 calc(var(--k) * -6cqw) }
body.play .gb6-slot .strip img { width: 9cqw; height: 9cqw; border-radius: 1cqw; box-shadow: 0 0 0 .4cqw #000, 0 0 0 .8cqw #7a5c24; filter: brightness(.55) saturate(.6) }
body.play .gb6-slot .glass { position: absolute; inset: 0; background: linear-gradient(180deg, #000c, transparent 32%, transparent 68%, #000c), linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .12) 40%, transparent 48%); pointer-events: none }
body.play .gb6-slot.going .strip { animation: gb6reel .22s linear infinite; filter: blur(1.4px) }
body.play .gb6-slot.going .strip img { filter: brightness(.85) }
body.play .gb6-slot.going .reel:nth-child(2) .strip { animation-duration: .19s } body.play .gb6-slot.going .reel:nth-child(3) .strip { animation-duration: .25s }
@keyframes gb6reel { from { translate: 0 0 } to { translate: 0 -66cqw } }
body.play .gb6-slot .bulbs { position: absolute; left: 30%; top: 1%; width: 40%; height: 12%; border-radius: 50%; background: radial-gradient(ellipse, rgb(255 226 140 / .55), transparent 70%); mix-blend-mode: screen; opacity: .35; animation: gb6bulb 2.4s ease-in-out infinite }
body.play .gb6-slot.going .bulbs { animation-duration: .4s }
@keyframes gb6bulb { 50% { opacity: .9 } }
body.play .gb6-slot .led { position: absolute; left: 34%; top: 69.5%; width: 32%; height: 5.4%; display: grid; place-items: center; overflow: hidden }
body.play .gb6-slot .led span { font: 800 3.1cqw/1 ui-monospace, Consolas, monospace; letter-spacing: .04em; color: #ffb84a; text-shadow: 0 0 1.2cqw #ff8a1a; white-space: nowrap; text-transform: uppercase }
body.play .gb6-slot.going .led span { color: #9fff9f; text-shadow: 0 0 1.2cqw #3aff5a; animation: gb6bulb .5s steps(2) infinite }
/* Hebel: großer Griff, nach unten ziehen (Drehpunkt wie auf der Bühne) */
body.play .gb6-lever { position: absolute; z-index: 5; left: 65.3%; top: 40.4%; width: 36%; height: 36%; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent }
body.play .gb6-lever img { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 38% 86.5%; rotate: calc(var(--pull) * 52deg); transition: rotate .32s cubic-bezier(.3, 1.7, .5, 1); filter: drop-shadow(0 2cqw 1.6cqw #000b) }
body.play .gb6-lever.drag img { transition: none }
body.play .gb6-lever::before { content: ''; position: absolute; left: -30%; top: -40%; width: 160%; height: 110%; }   /* große Greiffläche */
body.play .gb6-lever .sock { position: absolute; left: 22%; top: 72%; width: 32%; height: 32%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe7a8, #b8862a 45%, #4a3410 80%); box-shadow: 0 0 0 1.2cqw #1a1006, 0 2cqw 2cqw #000a; opacity: 0 }
body.play .gb6-lever.fired::after { content: ''; position: absolute; left: 10%; top: 50%; width: 60%; aspect-ratio: 1; border-radius: 50%; border: 2px solid #ffd77a; opacity: 0; animation: gb6ring .6s ease-out }
@keyframes gb6ring { 0% { opacity: .9; scale: .3 } 100% { opacity: 0; scale: 2.2 } }
body.play .gb6-slot.going .gb6-lever { cursor: default } body.play .gb6-slot.going .gb6-lever img { filter: drop-shadow(0 2cqw 1.6cqw #000b) brightness(.75) }
body.play .gb6-lever:disabled img { filter: grayscale(.8) brightness(.55) }
body.play .gb6-slot.going .cab { animation: gb6shake .12s 6 linear }
@keyframes gb6shake { 25% { translate: .5cqw 0 } 75% { translate: -.5cqw 0 } }
body.play .gb6-cap { display: grid; justify-items: center; gap: 3px; margin-top: -4px; text-align: center }
body.play .gb6-cap b { font: 400 19px 'Friz', Georgia, serif; color: #ffe6a0; text-shadow: 0 2px 0 #000 }
body.play .gb6-cap span { font: 700 14px 'Alegreya Sans', sans-serif; color: #c9b88e } body.play .gb6-cap em { font-style: normal; color: #7dff6a }

/* Glückskiste: antippen = Kiste springt, Ventil dreht, Kolben pumpen; beim Öffnen pulsiert Licht aus der Fuge */
body.play .gb6-crate { --pull: 0; position: relative; display: grid; justify-items: center; padding-top: 6px }
body.play .gb6-crate .ring { position: absolute; top: 0; left: 50%; width: min(76vw, 300px); aspect-ratio: 1; translate: -50% -4%; background: url(/assets/ui/v5/rune-gold.svg) center / contain no-repeat; opacity: .32; animation: gb6spin 26s linear infinite; pointer-events: none }
body.play .gb6-crate .ring.r2 { width: min(60vw, 236px); translate: -50% 10%; background-image: url(/assets/ui/v5/rune-teal.svg); opacity: .28; animation-direction: reverse; animation-duration: 18s }
body.play .gb6-crate.opening .ring { animation-duration: 3s; opacity: .7 } body.play .gb6-crate.opening .ring.r2 { animation-duration: 2.2s }
@keyframes gb6spin { to { rotate: 360deg } }
body.play .gb6-crate .box { position: relative; z-index: 2; width: min(64vw, 250px); aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; filter: drop-shadow(0 16px 16px #000d); transition: scale .12s }
body.play .gb6-crate .box img { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
body.play .gb6-crate .box .base { z-index: 3 }
body.play .gb6-crate .box .lid { z-index: 6; translate: 0 calc(-6% - var(--pull) * 9%); transition: translate .35s cubic-bezier(.3, 1.8, .5, 1) }
body.play .gb6-crate .box.drag { scale: .94 } body.play .gb6-crate .box.drag .lid { transition: none }
body.play .gb6-crate .box .seam { position: absolute; z-index: 5; left: 12%; right: 12%; top: 55.5%; height: 3%; border-radius: 50%; background: #fff4c8; filter: blur(4px); opacity: 0 }
body.play .gb6-crate .box.fired { animation: gb6hop .55s cubic-bezier(.3, 1.6, .5, 1) }
@keyframes gb6hop { 0% { translate: 0 0; scale: .92 } 35% { translate: 0 -9%; scale: 1.05 } 100% { translate: 0 0; scale: 1 } }
body.play .gb6-crate.opening .box { animation: gb6rattle .16s linear infinite; cursor: default }
body.play .gb6-crate.opening .box .lid { animation: gb6lid .45s ease-in-out infinite alternate }
body.play .gb6-crate.opening .box .seam { animation: gb6seam .45s ease-in-out infinite alternate }
@keyframes gb6rattle { 25% { rotate: -1.6deg } 75% { rotate: 1.6deg } }
@keyframes gb6lid { from { translate: 0 -6% } to { translate: 0 -11% } }
@keyframes gb6seam { from { opacity: .25 } to { opacity: 1 } }
body.play .gb6-crate .box:disabled img { filter: grayscale(.7) brightness(.55) }
body.play .gb6-crate .plate { position: relative; z-index: 3; margin-top: -6px; display: grid; justify-items: center; gap: 2px; padding: 9px 22px 10px; border-radius: 12px; background: linear-gradient(180deg, #2a1d10, #120c07) padding-box, linear-gradient(180deg, #f3d58a, #9a6a24 45%, #4a3010 70%, #d9b25a) border-box; border: 2px solid transparent; box-shadow: 0 8px 16px #000b }
body.play .gb6-crate .plate b { font: 400 19px 'Friz', Georgia, serif; color: #ffe6a0 } body.play .gb6-crate .plate span { font: 700 14px 'Alegreya Sans', sans-serif; color: #d8c69a }
body.play .gb6-crate.opening .plate b { color: #fff }
body.play [data-pull] img, body.play [data-pull] i { pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none }
body.play [data-pull] { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none }

/* Buffs/Debuffs am Handy (Sebastian 01.10.): antippen = Erklärung als Blatt über der Spielleiste */
.cb6-uf .au i.t-fluch, .cb5-me .au6 i.t-fluch { box-shadow: 0 0 0 1px #000, 0 0 0 2px #a335ee } .cb6-uf .au i.t-gift, .cb5-me .au6 i.t-gift { box-shadow: 0 0 0 1px #000, 0 0 0 2px #19b019 }
.cb6-uf .au i.t-magie, .cb5-me .au6 i.t-magie { box-shadow: 0 0 0 1px #000, 0 0 0 2px #3c8cff } .cb6-uf .au i.t-krankheit, .cb5-me .au6 i.t-krankheit { box-shadow: 0 0 0 1px #000, 0 0 0 2px #b8860b }
.cb6-uf .au i.t-furcht, .cb5-me .au6 i.t-furcht { box-shadow: 0 0 0 1px #000, 0 0 0 2px #e0403a }
.cb6-uf .au i { cursor: help }
.cb5-me .au6 { display: inline-flex; flex-wrap: wrap; gap: 6px }
.cb5-me .au6 i { position: relative; width: 30px; height: 30px; border-radius: 6px; overflow: visible; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a7040; cursor: help }
.cb5-me .au6 i.deb { box-shadow: 0 0 0 1px #000, 0 0 0 2px #c8342c } .cb5-me .au6 i img { width: 100%; height: 100%; display: block; border-radius: 5px }
.cb5-me .au6 i em { position: absolute; right: -3px; bottom: -4px; font: 800 12px var(--u5); font-style: normal; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 0 #000 }
.au-pop { position: fixed; z-index: 80; left: 12px; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; align-items: center; padding: 12px 14px;
  border-radius: 10px; background: linear-gradient(180deg, rgb(10 14 32 / .97), rgb(4 6 16 / .97)); box-shadow: 0 0 0 1px #000, 0 0 0 2px #9a9ab0, 0 12px 30px #000c; animation: aupop .2s ease-out }
.au-pop img { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 7px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a7040 } .au-pop.neg img { box-shadow: 0 0 0 1px #000, 0 0 0 2px #c8342c }
.au-pop b { font: 700 17px 'Alegreya Sans', sans-serif; color: #ffd100 } .au-pop.neg b { color: #ff6a5a }
.au-pop span { font: 500 15px/1.3 'Alegreya Sans', sans-serif; color: #f2ecd8 } .au-pop small { grid-column: 2; font: 700 13px 'Alegreya Sans', sans-serif; color: #9fd3ff }
@keyframes aupop { from { opacity: 0; translate: 0 8px } }

/* Meme-Kino im Reiter Sozial (01.10.2026): großer Kauf-Knopf, laufendes Video, gelaufene Videos mit „Nochmal“ */
body.play .so-menu[data-menu="m"] .mm6-buy { width: 100%; min-height: 54px; justify-content: center; font: 800 16px 'Alegreya Sans', sans-serif; color: #ffe9b8;
  background: linear-gradient(180deg, #7b1d12, #4d0f09); border: 1px solid #c9563f; border-radius: 10px; box-shadow: inset 0 1px 0 rgb(255 220 180 / .25), 0 4px 12px #0008 }
body.play .so-menu[data-menu="m"] .mm6-buy::before { display: none }
body.play .so-menu[data-menu="m"] .mm6-buy:disabled { filter: grayscale(.8) brightness(.7) }
body.play .mm6-now { margin: 8px 2px 2px; padding: 8px 10px; border-radius: 8px; background: rgb(255 209 0 / .08); border: 1px solid rgb(255 209 0 / .25); color: #f2e6c8 }
body.play .mm6-h { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid rgb(222 184 104 / .15) }
body.play .mm6-h > span { flex: 1; min-width: 0; display: grid }
body.play .mm6-h > span b { font: 700 15px 'Alegreya Sans', sans-serif; color: #f2ecd8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
body.play .mm6-h > span small { font: 500 12.5px 'Alegreya Sans', sans-serif; color: #a89a7c }
body.play .mm6-h .so-opt { flex: none; width: auto; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid rgb(222 184 104 / .55); background: linear-gradient(180deg, #2a2016, #16110c); color: #f7df9c; font: 700 14.5px 'Alegreya Sans', sans-serif }
body.play .mm6-h .so-opt:disabled { color: #8a7d62; border-color: rgb(222 184 104 / .2); background: none }
body.play .mm6-h .so-opt::before { display: none }

/* ===== Forever-Hauptbutton (mk-f, Sebastian 01.10.: Paket „forever-hauptbutton-ui-v2“ + Pull-Korrektur) =====
   Ebenen wie im Paket (Fassung 100 %, Scheibe 68 % ab 16 %/15,3 %, Kern 111,765 %, Zeichen 41,8 % ab 29,1 %/27,7 %).
   Petrol = Info (Ruhe, Aufgabe offen) · Blau = Aktion (Weiter, Pull!, Nochmal!, YA RLY!, Einloggen, Bestätigen) · Grün = abgegeben/bereit.
   Melden (Sebastian: „denk an die Runenkreise“): Runenkreise hinter der Fassung –
     will etwas  → Gold + Türkis drehen, Glut atmet, Knopf klopft beim Erscheinen und stupst alle 6 s leicht an
     Aufgabe     → nur der türkise Kreis, ruhig atmend, das ! glimmt
     grün        → grüne Druckwelle + Kreise flammen kurz grün auf, danach langsames „Warten“-Atmen
     alle bereit → helle Welle, Kreise verglühen
     Wartezeit   → grauer Kern, Fortschrittsring füllt sich bis zur Freigabe (--wait aus FX.afterGates)
   Drücken: Kern + Zeichen sinken 2 px (80 ms), Fassung und Zähler bleiben stehen; Loslassen 120 ms; nach dem Auslösen blitzt die Lichtkante. */
@property --wp { syntax: '<angle>'; inherits: false; initial-value: 0deg }
body.play .ptabs.p6.mk-f button.main { --fs: 114px; --fl: #77cce0 }
body.play .ptabs.p6.mk-f button.main:disabled { filter: none !important; opacity: 1 !important }   /* gesperrt: nur Kern + Zeichen grau, die Fassung bleibt Bronze */
/* Fassung in der Leiste: dunkle Mulde unter dem Ring + Goldkontur, die exakt der Form der Bronzefassung folgt (inkl. Spitzen) und nur
   unterhalb der Leistenkante sichtbar ist (Sebastian 01.10., Variante „Kontur“). Eine Kreislinie wirkte schief, weil die Fassung kein exakter Kreis ist.
   Technik: Fassung als Maske, leicht vergrößert (1,035) hinter dem Ring, oben weggeschnitten. */
body.play .ptabs.p6.mk-f .p6-bar { background:
    radial-gradient(circle 50px at 50% -1px, #0d0a08 0 44px, transparent 45px) top / 100% 100% no-repeat,
    linear-gradient(180deg, #2a221b, #15110d 38%, #0b0907) }
body.play .ptabs.p6.mk-f .fb::before { content: ''; position: absolute; inset: 0; z-index: -1; scale: 1.035; pointer-events: none;
  background: linear-gradient(180deg, #f6dc94, #c9a24a 60%, #8a6a2e);
  -webkit-mask-image: url(/assets/ui/fb/frame-bronze.webp), linear-gradient(transparent 50.6%, #000 50.6%); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: source-in;
  mask-image: url(/assets/ui/fb/frame-bronze.webp), linear-gradient(transparent 50.6%, #000 50.6%); mask-size: 100% 100%; mask-repeat: no-repeat; mask-composite: intersect }
body.play .ptabs.p6.mk-f button.main .tl { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
body.play .ptabs.p6.mk-f .mx { display: none }
body.play .ptabs.p6.mk-f .fb { position: absolute; z-index: 2; left: 50%; top: var(--mc); width: var(--fs); height: var(--fs); translate: -50% -50%; pointer-events: none; isolation: isolate }
body.play .ptabs.p6.mk-f .fb-clip { position: absolute; left: 16%; top: 15.3%; width: 68%; height: 68%; border-radius: 50%; overflow: hidden; background: #08171f }
body.play .ptabs.p6.mk-f .fb-disc { position: absolute; inset: 0; transition: transform 120ms ease-out, filter 160ms ease-out; transform-origin: 50% 50% }
body.play .ptabs.p6.mk-f .fb-core { position: absolute; width: 111.765%; height: 111.765%; left: -5.882%; top: -5.882%; max-width: none; pointer-events: none; user-select: none }
body.play .ptabs.p6.mk-f .fb-shade { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 -3px 5px #0005, inset 0 1px 2px #c9f4ff33; transition: box-shadow 120ms ease-out }
body.play .ptabs.p6.mk-f .fb-light { position: absolute; inset: 2.5%; border-radius: 50%; border: 1px solid var(--fl); opacity: .36; box-shadow: inset 0 0 3px var(--fl); transition: opacity 200ms ease-out }
body.play .ptabs.p6.mk-f .fb-sh { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .42) 48%, transparent 58%) -130% 0 / 260% 100% no-repeat; opacity: 0 }
body.play .ptabs.p6.mk-f .fb-frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; user-select: none; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .65)) }
body.play .ptabs.p6.mk-f .fb-sym { position: absolute; left: 29.1%; top: 27.7%; width: 41.8%; height: 41.8%; transition: transform 120ms ease-out, opacity 160ms ease-out, filter 200ms; transform-origin: 50% 50% }
body.play .ptabs.p6.mk-f .fb-ic { display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; user-select: none }
/* alte Bild-Regeln der Leiste (fv/ph/ph5: kleine runde Icons mit Rahmen, teils !important) für die Ebenen außer Kraft setzen */
body.play .ptabs.p6.mk-f button.main .fb img { translate: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; opacity: 1; transform: none; max-width: none }
body.play .ptabs.p6.mk-f button.main .fb .fb-core { position: absolute !important; left: -5.882% !important; top: -5.882% !important; width: 111.765% !important; height: 111.765% !important; filter: none }
body.play .ptabs.p6.mk-f button.main .fb .fb-frame { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .65)) }
body.play .ptabs.p6.mk-f button.main .fb .fb-ic { position: static !important; width: 100% !important; height: 100% !important; filter: none }
body.play .ptabs.p6.mk-f .fb-let { position: absolute; left: 0; right: 0; top: 53%; text-align: center; font: 700 calc(var(--fs) * .109)/1 Georgia, 'Times New Roman', serif; color: #273137; text-shadow: 0 .4px #faeac7 }
body.play .ptabs.p6.mk-f .fb-let:empty { display: none }
body.play .ptabs.p6.mk-f .fb-cnt { position: absolute; z-index: 3; right: 3.3%; top: 10.8%; min-width: 23%; height: 15.5%; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 1px solid #d8b771; border-radius: 999px;
  background: #100f0c; color: #fff1d1; font: 700 max(11px, calc(var(--fs) * .091))/1 Georgia, 'Times New Roman', serif; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 2px 5px #000a }
body.play .ptabs.p6.mk-f .fb-cnt[hidden] { display: none }
body.play .ptabs.p6.mk-f .fb-cnt.bump { animation: fbBump .45s cubic-bezier(.34, 1.6, .64, 1) }
@keyframes fbBump { 0% { scale: 1.35; color: #fff; border-color: #fff2c8 } 100% { scale: 1 } }
/* Töne */
body.play .ptabs.p6.mk-f [data-tone="muted"] .fb-disc { filter: brightness(.68) }
body.play .ptabs.p6.mk-f [data-tone="muted"] .fb-sym { opacity: .55 }
body.play .ptabs.p6.mk-f [data-tone="quiet"] .fb-disc { filter: brightness(.92) }
body.play .ptabs.p6.mk-f [data-info="1"] .fb-light, body.play .ptabs.p6.mk-f [data-info="1"] .fb-shade { display: none }
body.play .ptabs.p6.mk-f [data-tone="action"] { --fl: #efd18b }
body.play .ptabs.p6.mk-f [data-tone="action"] .fb-light { opacity: .85; animation: fbEdge 1.6s ease-in-out infinite }
body.play .ptabs.p6.mk-f :is([data-tone="saved"], [data-tone="complete"]) { --fl: #79dfae }
body.play .ptabs.p6.mk-f [data-tone="saved"] .fb-light { opacity: .8 }
body.play .ptabs.p6.mk-f [data-tone="complete"] .fb-light { opacity: 1; border-width: 2px }
@keyframes fbEdge { 50% { opacity: 1; box-shadow: inset 0 0 9px var(--fl) } }
/* Druck – nur bei aktiven Aktions-/Grün-Zuständen, nie bei Info */
body.play .ptabs.p6.mk-f button.main:not([data-info="1"]):not(:disabled):is(:active, .down) :is(.fb-disc, .fb-sym) { transform: translateY(2px) scale(.985); transition-duration: 80ms }
body.play .ptabs.p6.mk-f button.main:not([data-info="1"]):not(:disabled):is(:active, .down) .fb-disc { filter: brightness(.8) }
body.play .ptabs.p6.mk-f button.main:not([data-info="1"]):not(:disabled):is(:active, .down) .fb-shade { box-shadow: inset 0 4px 6px #000b, inset 0 -1px 1px #acf4ff66; transition-duration: 80ms }
body.play .ptabs.p6.mk-f button.main[data-info="1"]:is(:active, .down) .fb-sym { opacity: 1; filter: brightness(1.25) }   /* Info: nur das Zeichen hellt kurz auf, nichts sinkt */
/* Nach dem Auslösen: Lichtkante blitzt, Glanz läuft einmal über den Kern */
body.play .ptabs.p6.mk-f button.main.fl .fb-light { animation: fbFlash 480ms ease-out 1 }
body.play .ptabs.p6.mk-f button.main.fl .fb-sh { animation: fbSweep 560ms ease-out 1 }
@keyframes fbFlash { 0% { opacity: .35 } 45% { opacity: 1; box-shadow: inset 0 0 10px var(--fl) } 100% { opacity: .85 } }
@keyframes fbSweep { 0% { opacity: 1; background-position: -130% 0 } 100% { opacity: 1; background-position: 130% 0 } }
/* Wartezeit (Weiter noch gesperrt): grau, Fortschrittsring füllt sich */
body.play .ptabs.p6.mk-f button.main.waiting .fb-disc { filter: grayscale(.9) brightness(.48) }
body.play .ptabs.p6.mk-f button.main.waiting .fb-sym { opacity: .4 }
body.play .ptabs.p6.mk-f button.main.waiting .fb-light { border: 0; opacity: .9; box-shadow: none; animation: fbWaitFill var(--wait, 3s) linear both;
  background: conic-gradient(from 0deg, #ffe29a var(--wp), rgb(255 255 255 / .1) 0); filter: drop-shadow(0 0 4px rgb(255 214 120 / .9)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)) }
@keyframes fbWaitFill { from { --wp: 0deg } to { --wp: 360deg } }
/* Runenkreise (melden) */
body.play .ptabs.p6.mk-f .p6-rr { z-index: 1; top: var(--mc); width: 156px; height: 156px; translate: -50% -50%; opacity: 0; transition: opacity .45s, filter .45s }
body.play .ptabs.p6.mk-f .p6-rr .r1 { animation: p6spin 22s linear infinite; filter: drop-shadow(0 0 4px rgb(255 205 90 / .75)) }
body.play .ptabs.p6.mk-f .p6-rr .r2 { inset: 13%; width: 74% !important; height: 74% !important; animation: p6spin 13s linear infinite reverse; filter: drop-shadow(0 0 4px rgb(90 210 240 / .75)) }
/* will etwas: Kreise flammen auf, drehen schneller, Glut atmet; Knopf klopft einmal und stupst danach alle 6 s an */
body.play .ptabs.p6.mk-f [data-tone="action"]:not(.waiting) .p6-rr { opacity: 1; animation: fbRingIn .6s cubic-bezier(.2, .9, .3, 1.25) both, fbGlow 1.6s .6s ease-in-out infinite }
body.play .ptabs.p6.mk-f [data-tone="action"]:not(.waiting) .p6-rr .r1 { animation-duration: 11s }
body.play .ptabs.p6.mk-f [data-tone="action"]:not(.waiting) .fb { animation: fbKnock .62s cubic-bezier(.3, 1.4, .5, 1) both, fbNudge 6s 3s ease-in-out infinite }
@keyframes fbRingIn { from { scale: .62; opacity: 0 } to { scale: 1; opacity: 1 } }
@keyframes fbGlow { 50% { filter: brightness(1.35) drop-shadow(0 0 7px rgb(255 210 110 / .7)) } }
@keyframes fbKnock { 0% { scale: .9 } 35% { scale: 1.07 } 60% { scale: .98 } 80% { scale: 1.015 } 100% { scale: 1 } }
@keyframes fbNudge { 0%, 86%, 100% { scale: 1 } 90% { scale: 1.045 } 94% { scale: .99 } 97% { scale: 1.01 } }
/* Aufgabe offen: nur der türkise Kreis, ruhig; das ! glimmt */
body.play .ptabs.p6.mk-f [data-tone="attn"] .p6-rr { opacity: .75; animation: fbRingIn .6s ease-out both, fbBreath 2.4s .6s ease-in-out infinite }
body.play .ptabs.p6.mk-f [data-tone="attn"] .p6-rr .r1 { opacity: .25 }
body.play .ptabs.p6.mk-f [data-tone="attn"] .fb-sym { animation: fbBang 2.4s ease-in-out infinite }
@keyframes fbBreath { 50% { opacity: .4 } }
@keyframes fbBang { 0%, 100% { filter: none } 50% { filter: drop-shadow(0 0 3px #f4e9c3) drop-shadow(0 0 7px rgb(255 214 140 / .7)) } }
/* grün: Druckwelle, Kreise flammen grün auf und gehen ins langsame Warten über */
body.play .ptabs.p6.mk-f .fb-wave { position: absolute; z-index: 1; left: 50%; top: var(--mc); width: 78px; height: 78px; translate: -50% -50%; border-radius: 50%; border: 3px solid var(--wv, #79dfae); opacity: 0; pointer-events: none;
  box-shadow: 0 0 16px var(--wv, #79dfae), inset 0 0 12px var(--wv, #79dfae) }
body.play .ptabs.p6.mk-f :is([data-tone="saved"], [data-tone="complete"]) .fb-wave { animation: fbWave .8s cubic-bezier(.2, .7, .3, 1) 1 }
body.play .ptabs.p6.mk-f [data-tone="action"]:not(.waiting) .fb-wave { --wv: #ffd98a; animation: fbWave .7s cubic-bezier(.2, .7, .3, 1) 1 }
@keyframes fbWave { 0% { opacity: .95; scale: .9 } 100% { opacity: 0; scale: 2.1 } }
body.play .ptabs.p6.mk-f :is([data-tone="saved"], [data-tone="complete"]) .p6-rr .r1 { filter: hue-rotate(80deg) saturate(.9) drop-shadow(0 0 4px rgb(120 240 160 / .7)) }
body.play .ptabs.p6.mk-f :is([data-tone="saved"], [data-tone="complete"]) .p6-rr .r2 { filter: hue-rotate(-48deg) saturate(1.1) drop-shadow(0 0 4px rgb(120 240 160 / .7)) }   /* Türkis → Jadegrün (nicht über Violett) */
body.play .ptabs.p6.mk-f [data-tone="saved"] .p6-rr { animation: fbGreenIn 1.3s ease-out both, fbWaitBreath 3.4s 1.3s ease-in-out infinite }
body.play .ptabs.p6.mk-f [data-tone="saved"] .p6-rr .r1 { animation-duration: 40s }
body.play .ptabs.p6.mk-f [data-tone="saved"] .p6-rr .r2 { animation-duration: 28s }
@keyframes fbGreenIn { 0% { opacity: 0; scale: .7 } 25% { opacity: 1; scale: 1.06 } 60% { opacity: .7; scale: 1 } 100% { opacity: .38; scale: 1 } }
@keyframes fbWaitBreath { 0%, 100% { opacity: .38 } 50% { opacity: .18 } }
/* alle bereit: helle Welle, Kreise verglühen */
body.play .ptabs.p6.mk-f [data-tone="complete"] { --wv: #c8ffd8 }
body.play .ptabs.p6.mk-f [data-tone="complete"] .p6-rr { animation: fbDone 1.6s ease-out both }
@keyframes fbDone { 0% { opacity: .4; scale: 1 } 30% { opacity: 1; scale: 1.08; filter: brightness(1.5) } 100% { opacity: 0; scale: 1.18 } }
/* Wartezeit: Kreise grau und langsam */
body.play .ptabs.p6.mk-f button.main.waiting .p6-rr { opacity: .3; filter: grayscale(1) brightness(.8) }
body.play .ptabs.p6.mk-f button.main.waiting .p6-rr img { animation-duration: 40s }
body.play .ptabs.p6.mk-f button.main:focus-visible { outline: none }
body.play .ptabs.p6.mk-f button.main:focus-visible .fb-clip { outline: 2px solid #f5db9d; outline-offset: 3px }
@media (prefers-reduced-motion: reduce) {
  body.play .ptabs.p6.mk-f :is(.fb, .fb-wave, .p6-rr, .p6-rr img, .fb-light, .fb-sym, .fb-sh, .fb-cnt) { animation: none !important; transition: none !important }
  body.play .ptabs.p6.mk-f [data-tone="saved"] .p6-rr { opacity: .35 }
}

/* Glücksrad am Handy (09.10.2026, ersetzt das Roulette): Rad anschubsen – nach unten wischen dreht es mit (--pull), Loslassen/Tippen = Dreh */
body.play .gb7-rad { --pull: 0; position: relative; display: grid; justify-items: center; padding-top: 18px }
body.play .gb7-rad .whl { position: relative; z-index: 2; width: min(72vw, 290px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; filter: drop-shadow(0 14px 16px #000d) }
body.play .gb7-rad .whl > * { position: absolute; display: block; pointer-events: none }
body.play .gb7-rad .whl .dsk, body.play .gb7-rad .whl .hs { inset: 0; width: 100%; height: 100% }
body.play .gb7-rad .whl .hb { left: 49.4%; top: 48.29%; width: 15.6%; height: auto; translate: -50% -50% }
body.play .gb7-rad .whl .dsk { transform-origin: 49.4% 48.29% }
body.play .gb7-rad .whl .dsk, body.play .gb7-rad .whl .hb { rotate: calc(var(--pull) * 50deg); transition: rotate .4s cubic-bezier(.3, 1.6, .5, 1) }
body.play .gb7-rad .whl.drag .dsk, body.play .gb7-rad .whl.drag .hb { transition: none }
body.play .gb7-rad .whl.fired .dsk, body.play .gb7-rad.going .whl .dsk, body.play .gb7-rad .whl.fired .hb, body.play .gb7-rad.going .whl .hb { animation: gb7spin 1.1s cubic-bezier(.2, .7, .3, 1) infinite; transition: none }
body.play .gb7-rad.going .whl { cursor: default } body.play .gb7-rad .whl:disabled { filter: grayscale(.7) brightness(.55) drop-shadow(0 14px 16px #000d) }
@keyframes gb7spin { from { rotate: 0deg } to { rotate: 360deg } }
body.play .gb7-rad .ptr { position: absolute; z-index: 3; top: calc(18px + min(72vw, 290px) * .043); left: calc(50% - min(72vw, 290px) * .006); width: calc(min(72vw, 290px) * .11); aspect-ratio: 676 / 1280; translate: -50% 0; transform-origin: 50.6% 15.6%; background: url('/assets/ui/market/v5/rad-zeiger-sm.webp') center / 100% 100% no-repeat; filter: drop-shadow(0 3px 2px #000) }
body.play .gb7-rad.going .ptr { animation: gb7flap .14s ease-in-out infinite alternate } @keyframes gb7flap { from { rotate: -2deg } to { rotate: 9deg } }
body.play .gb7-rad .plate { position: relative; z-index: 3; margin-top: -14px; display: grid; justify-items: center; gap: 2px; padding: 9px 22px 10px; border-radius: 12px; background: linear-gradient(180deg, #2a1d10, #120c07) padding-box, linear-gradient(180deg, #f3d58a, #9a6a24 45%, #4a3010) border-box; border: 2px solid transparent; box-shadow: 0 8px 18px #000a; text-align: center }
body.play .gb7-rad .plate b { font: 400 19px 'Friz', Georgia, serif; color: #ffe6a0 } body.play .gb7-rad .plate span { font: 700 14px 'Alegreya Sans', sans-serif; color: #d8c69a } body.play .gb7-rad .plate em { font-style: normal; color: #7dff6a }
body.play .gb7-gut { display: grid; gap: 6px }
body.play .gb7-gut span { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 10px 6px 6px; border-radius: 10px; background: linear-gradient(90deg, #3a2810, #18100a); box-shadow: inset 0 0 0 1px #8a6a30 }
body.play .gb7-gut img { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 6px } body.play .gb7-gut b { font: 400 16px 'Friz', Georgia, serif; color: #ffe08a } body.play .gb7-gut small { font: 600 12.5px 'Alegreya Sans', sans-serif; color: #c9b88e }
body.play .gb7-cpn { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; margin-bottom: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; background: linear-gradient(90deg, #1d3a66, #0e1a30); box-shadow: inset 0 0 0 1px #6aa0ff80 }
body.play .gb7-cpn img { width: 40px; height: 40px; border-radius: 7px } body.play .gb7-cpn b { display: block; font: 400 17px 'Friz', Georgia, serif; color: #cfe2ff } body.play .gb7-cpn small { font: 600 12.5px 'Alegreya Sans', sans-serif; color: #a9bede }
body.play .wtt-b s { opacity: .6; margin-left: 4px }
body.play .gb7-rad .whl img { background: none; box-shadow: none; border: 0; border-radius: 0; padding: 0; object-fit: contain }