/* Handy 8 (02.10.2026): Questtafel-Sonderrunden (sr6-*), Tooltip-Schmiede v3 (ts3-*), Sulfuras-Schmiede (sf-*), Donnerzorn (dz-*).
   Wird nach ph7.css geladen. Tokens aus ph5 (--gold5/--ink5/--mute5/--d5/--u5/--pan5/--rim5). */

/* ---------- Kopf jeder Sonderrunde ---------- */
body.play .sr6-h { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center; align-items: center; padding: 8px 10px; margin-bottom: 8px; border-radius: 12px;
  background: var(--pan5); box-shadow: inset 0 0 0 1px rgb(232 196 106 / .3), 0 6px 16px rgb(0 0 0 / .45) }
body.play .sr6-h img { grid-row: span 2; width: 46px; height: 46px; border-radius: 9px; box-shadow: 0 0 0 2px #120d08, 0 0 0 4px #9c7a36 }
body.play .sr6-h div { display: grid; line-height: 1.1 }
body.play .sr6-h span { font: 800 10px var(--u5); letter-spacing: .28em; text-transform: uppercase; color: var(--mute5) }
body.play .sr6-h b { font: 400 20px var(--d5); color: var(--gold5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
body.play .sr6-h em { justify-self: start; font: 800 11px var(--u5); font-style: normal; padding: 4px 9px; border-radius: 99px; background: rgb(0 0 0 / .5); box-shadow: inset 0 0 0 1px currentColor; white-space: nowrap }
body.play .sr6-h em.r-c { color: #d8d8d8 } body.play .sr6-h em.r-u { color: #3fe06e } body.play .sr6-h em.r-r { color: #5cb4ff } body.play .sr6-h em.r-e { color: #c48bff }
body.play .sr6-t { margin: 4px 2px 10px; text-align: center; font: 500 15px/1.4 var(--u5); color: var(--ink5) } body.play .sr6-t b { color: var(--gold5) }

/* ---------- Wette ---------- */
body.play .sr6-bets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
body.play .sr6-bets .col { display: grid; gap: 8px; padding: 8px; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 16%, #1a140e), #0c0907); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 45%, #3a2c18) }
body.play .sr6-bets .col.pro { --sc: #4bd06c } body.play .sr6-bets .col.con { --sc: #e0503c }
body.play .sr6-bets h5 { margin: 0 0 2px; text-align: center; font: 400 16px var(--d5); color: color-mix(in srgb, var(--sc) 70%, #fff) }
body.play .sr6-bet { position: relative; display: grid; justify-items: center; gap: 2px; min-height: 62px; padding: 8px 6px; border: 0; border-radius: 11px; cursor: pointer;
  background: linear-gradient(180deg, #2b2218, #15100b); box-shadow: inset 0 0 0 1px #5a4422, inset 0 1px 0 rgb(255 230 170 / .12), 0 3px 8px rgb(0 0 0 / .5); color: var(--ink5); transition: transform .12s, box-shadow .2s }
body.play .sr6-bet b { font: 800 22px/1 var(--u5); color: var(--ink5) } body.play .sr6-bet span { font: 700 13px var(--u5); color: var(--mute5) }
body.play .sr6-bet:active { transform: translateY(2px) scale(.98) }
body.play .sr6-bet.sel { background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 35%, #2b2218), #15100b); box-shadow: inset 0 0 0 2px var(--gold5), 0 0 0 2px color-mix(in srgb, var(--sc) 60%, transparent), 0 0 18px color-mix(in srgb, var(--sc) 45%, transparent) }
body.play .sr6-bet.sel b { color: #fff } body.play .sr6-bet.sel span { color: var(--gold5) }
body.play .sr6-mybet { display: grid; justify-items: center; gap: 4px; margin: 6px 0 10px; padding: 16px 12px; border-radius: 16px; text-align: center; --sc: var(--gold5);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 14%, #1d1610), #0c0907); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sc) 55%, #3a2c18), 0 8px 20px rgb(0 0 0 / .5) }
body.play .sr6-mybet.pro { --sc: #4bd06c } body.play .sr6-mybet.con { --sc: #e0503c }
body.play .sr6-mybet span { font: 800 11px var(--u5); letter-spacing: .26em; text-transform: uppercase; color: var(--mute5) }
body.play .sr6-mybet b { font: 400 26px/1.1 var(--d5); color: color-mix(in srgb, var(--sc) 65%, #fff) }
body.play .sr6-mybet em { font: 700 14px var(--u5); font-style: normal; color: var(--gold5) }

/* ---------- Frage (Kandidat / Schätz-Duell) ---------- */
body.play .sr6-q { margin: 2px 0 10px; padding: 14px 14px; border-radius: 14px; text-align: center; font: 600 17px/1.35 var(--u5); color: var(--ink5);
  background: linear-gradient(180deg, #2a2117, #120e09); box-shadow: inset 0 0 0 1px #8a6a2c, inset 0 1px 0 rgb(255 230 170 / .14) }
body.play .k-schaetz .sr6-q, body.play .sr6-q:has(+ .sr6-in) { background: linear-gradient(180deg, #16302e, #0a1514); box-shadow: inset 0 0 0 1px #3e8a80, inset 0 1px 0 rgb(180 255 240 / .15) }

/* ---------- Schätz-Eingabe ---------- */
body.play .sr6-in { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; padding: 6px 14px 6px 6px; border-radius: 16px; background: #070a0a; box-shadow: inset 0 0 0 2px #3e8a80, 0 6px 16px rgb(0 0 0 / .5) }
body.play .sr6-in:focus-within { box-shadow: inset 0 0 0 2px #7ae6d6, 0 0 0 3px rgb(122 230 214 / .25), 0 6px 16px rgb(0 0 0 / .5) }
body.play .sr6-in input { flex: 1; min-width: 0; height: 62px; border: 0; outline: 0; background: transparent; text-align: center; font: 800 32px var(--u5); color: #c8fff6; letter-spacing: .02em }
body.play .sr6-in input::placeholder { font: 600 18px var(--u5); color: #4d6e6a; letter-spacing: 0 }
body.play .sr6-in span { flex: none; font: 700 14px var(--u5); color: #7ae6d6 }

/* ---------- Wer oder was bin ich? ---------- */
body.play .sr6-wer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 8px 12px; border-radius: 12px;
  background: linear-gradient(90deg, #2a2038, #120e18); box-shadow: inset 0 0 0 1px #5c4a78 }
body.play .sr6-wer b { font: 400 17px var(--d5); color: #d7c2ff }
body.play .sr6-wer span { font: 800 13px var(--u5); padding: 3px 10px; border-radius: 99px; background: #6a4ab0; color: #fff }
body.play .sr6-help { margin: 10px 0 0; text-align: center; font: 700 13px var(--u5); color: var(--mute5) } body.play .sr6-help b { color: var(--gold5) }

/* ---------- Tooltip-Schmiede 3 „Auftragsarbeit“ ---------- */
body.play .ts3-h { display: grid; grid-template-columns: 44px 1fr; align-items: center; column-gap: 12px; padding: 8px 10px; margin-bottom: 8px; border-radius: 12px; background: var(--pan5); box-shadow: inset 0 0 0 1px rgb(240 169 74 / .35), 0 6px 16px rgb(0 0 0 / .45) }
body.play .ts3-h img { width: 44px; height: 44px; border-radius: 9px; box-shadow: 0 0 0 2px #120d08, 0 0 0 4px #9c6a26 }
body.play .ts3-h div { display: grid; line-height: 1.15 } body.play .ts3-h span { font: 800 10px var(--u5); letter-spacing: .2em; text-transform: uppercase; color: var(--mute5) } body.play .ts3-h b { font: 400 19px var(--d5); color: #ffb85a }
body.play .ts3-t { margin: 4px 2px 10px; text-align: center; font: 500 15px/1.4 var(--u5); color: var(--ink5) } body.play .ts3-t b { color: var(--gold5) }
body.play .ts3-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px }
body.play .ts3-track button { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border: 0; border-radius: 10px; background: #120d09; box-shadow: inset 0 0 0 1px #3a2c18; color: var(--mute5); font: 700 11px var(--u5) }
body.play .ts3-track button b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #0a0806; box-shadow: 0 0 0 1px #5a4422; font: 800 13px var(--u5); color: var(--mute5) }
body.play .ts3-track button.ok { color: #9be3a6; box-shadow: inset 0 0 0 1px #3d7a4a } body.play .ts3-track button.ok b { background: #1d4a2a; color: #fff; box-shadow: 0 0 0 1px #6dbf7a }
body.play .ts3-track button.cur { color: var(--gold5); box-shadow: inset 0 0 0 2px var(--gold5) } body.play .ts3-track button.cur b { background: #3a2a10; color: var(--gold5); box-shadow: 0 0 0 1px var(--gold5) }
body.play .ts3-track button:disabled { opacity: 1 }
body.play .ts3-ask { margin: 2px 0 8px; text-align: center; font: 400 19px var(--d5); color: var(--gold5) }
body.play .ts3-ol { display: grid; gap: 8px } body.play .ts3-ol.art { grid-template-columns: 1fr 1fr } body.play .ts3-ol.icon { grid-template-columns: repeat(3, 1fr) }
body.play .ts3-o { position: relative; display: flex; align-items: center; gap: 9px; min-height: 58px; padding: 9px 11px; border: 0; border-radius: 12px; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, #2b2218, #15100b); box-shadow: inset 0 0 0 1px #5a4422, inset 0 1px 0 rgb(255 230 170 / .1), 0 3px 8px rgb(0 0 0 / .5); color: var(--ink5); font: 600 14px/1.3 var(--u5); transition: transform .12s, box-shadow .2s }
body.play .ts3-o:active { transform: translateY(2px) scale(.985) }
body.play .ts3-o img { width: 38px; height: 38px; border-radius: 7px; box-shadow: 0 0 0 1px #000; flex: none }
body.play .ts3-o span { display: grid; gap: 1px; min-width: 0 } body.play .ts3-o b { font: 400 15px/1.15 var(--d5); color: var(--ink5) } body.play .ts3-o small { font: 600 11px var(--u5); color: var(--mute5) }
body.play .ts3-ol.werte .ts3-o { flex-direction: column; align-items: flex-start; gap: 1px } body.play .ts3-ol.werte .ts3-o span { display: block; font: 600 14px var(--u5) }
body.play .ts3-o .gr { color: #4cff6a; font: 600 14px/1.3 var(--u5) } body.play .ts3-o .mute { color: var(--mute5); font-style: italic }
body.play .ts3-o.sq { justify-content: center; aspect-ratio: 1; min-height: 0; padding: 8px } body.play .ts3-o.sq img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 9px }
body.play .ts3-o.was { box-shadow: inset 0 0 0 1px #8a6a2c, 0 3px 8px rgb(0 0 0 / .5) }
body.play .ts3-o.sel { background: linear-gradient(180deg, #3a2c16, #1a120a); box-shadow: inset 0 0 0 2px var(--gold5), 0 0 16px rgb(232 196 106 / .35) }
body.play .ts3-o em { position: absolute; right: 8px; bottom: 5px; padding: 1px 7px; border-radius: 99px; background: #1a120a; box-shadow: inset 0 0 0 1px var(--gold5); font: 800 10px var(--u5); font-style: normal; color: var(--gold5) }
body.play .ts3-o.sq em { left: 50%; right: auto; translate: -50% 0; bottom: -6px; white-space: nowrap }
body.play .ts3-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 }
body.play .ts3-back { padding: 8px 14px; border: 0; border-radius: 99px; background: #1a140e; box-shadow: inset 0 0 0 1px #5a4422; color: var(--ink5); font: 700 13px var(--u5) }
body.play .ts3-help { font: 600 11px/1.3 var(--u5); color: var(--mute5); text-align: right }
body.play .ts3-hints { display: grid; gap: 6px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(175deg, #3d3022, #21190f); box-shadow: inset 0 0 0 1px rgb(240 200 130 / .22) }
body.play .ts3-hints p { margin: 0; font: italic 500 13px/1.35 var(--u5); color: var(--ink5) } body.play .ts3-hints i { display: block; font: 800 10px var(--u5); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--gold5) }
body.play .ts3-hints p.new { color: #ffe6a8 } body.play .ts3-hints p.lock { opacity: .55; font-style: normal }
body.play .ts3-sum { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: start; padding: 12px; border-radius: 12px; background: linear-gradient(180deg, rgb(10 12 36 / .97), rgb(4 5 18 / .97)); box-shadow: inset 0 0 0 1px rgb(200 200 220 / .55) }
body.play .ts3-sum .ic img { width: 58px; height: 58px; border-radius: 9px; box-shadow: 0 0 0 2px #000 }
body.play .ts3-sum > div:last-child { display: grid; gap: 2px; font: 500 14px/1.3 var(--u5); color: #fff } body.play .ts3-sum b { font: 400 16px var(--d5); color: var(--ink5) } body.play .ts3-sum .gr { color: #4cff6a } body.play .ts3-sum .mute { color: #8a8aa0; font-style: italic }
body.play .ts3-res { display: grid; justify-items: center; gap: 4px; margin: 6px 0 10px; padding: 16px 12px; border-radius: 16px; text-align: center; background: linear-gradient(180deg, #2a1f14, #0c0907); box-shadow: inset 0 0 0 2px #8a6a2c }
body.play .ts3-res span { font: 800 11px var(--u5); letter-spacing: .24em; text-transform: uppercase; color: var(--mute5) } body.play .ts3-res b { font: 400 22px/1.15 var(--d5); color: var(--ink5) } body.play .ts3-res em { font: 700 14px var(--u5); font-style: normal; color: var(--gold5) }
body.play .ts3-res b.q-p { color: #9d9d9d } body.play .ts3-res b.q-c { color: #fff } body.play .ts3-res b.q-u { color: #1eff00 } body.play .ts3-res b.q-r { color: #3a8cff } body.play .ts3-res b.q-e { color: #c066ff } body.play .ts3-res b.q-l { color: #ff8000 }

/* ---------- Die Esse von Ragnaros (Sulfuras-Teamevent) ---------- */
body.play .sf5-h { display: grid; grid-template-columns: 44px 1fr; align-items: center; column-gap: 12px; padding: 8px 10px; margin-bottom: 10px; border-radius: 12px; background: linear-gradient(180deg, #2a140a, #120806); box-shadow: inset 0 0 0 1px rgb(255 128 0 / .45), 0 6px 16px rgb(0 0 0 / .45) }
body.play .sf5-h img { width: 44px; height: 44px; border-radius: 9px; box-shadow: 0 0 0 2px #120806, 0 0 0 4px #ff8000 }
body.play .sf5-h div { display: grid; line-height: 1.15 } body.play .sf5-h span { font: 800 10px var(--u5); letter-spacing: .2em; text-transform: uppercase; color: #c99a7a } body.play .sf5-h b { font: 400 20px var(--d5); color: #ff9d3a }
body.play .sf5-t { margin: 6px 2px 10px; text-align: center; font: 500 15px/1.4 var(--u5); color: var(--ink5) } body.play .sf5-t.small { font-size: 13px; color: var(--mute5) } body.play .sf5-t b { color: #ffb35a }
body.play .sf5-steps { margin: 0 0 10px; padding: 10px 12px 10px 30px; border-radius: 12px; background: rgb(20 10 6 / .8); box-shadow: inset 0 0 0 1px #5a2c18; font: 500 14px/1.4 var(--u5); color: var(--ink5) } body.play .sf5-steps li { margin: 4px 0 } body.play .sf5-steps b { color: #ffb35a }
/* Glutanzeige */
body.play .sf5-heat { position: relative; height: 34px; margin: 4px 0 8px; border-radius: 99px; overflow: hidden; background: linear-gradient(90deg, #1a0a06, #2a1208); box-shadow: inset 0 0 0 1px #6a3018, inset 0 2px 6px #000 }
body.play .sf5-heat i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--h); background: linear-gradient(90deg, #5a1408, #c8320c 45%, #ff8a1e 70%, #ffe7a8); transition: width .25s ease-out }
body.play .sf5-heat .band { position: absolute; left: 68%; width: 22%; top: 0; bottom: 0; box-shadow: inset 0 0 0 2px #fff6d8; background: rgb(255 246 216 / .12) }
body.play .sf5-heat.z-heiss i { background: linear-gradient(90deg, #5a1408, #ff3a1a 60%, #ff2a10) }
body.play .sf5-z { margin: 4px 0 10px; text-align: center; font: 400 20px var(--d5); color: var(--ink5) } body.play .sf5-z.z-kalt { color: #ff9d3a } body.play .sf5-z.z-glut { color: #fff2b8 } body.play .sf5-z.z-heiss { color: #ff6a4a }
body.play .sf5-pump { display: grid; place-items: center; gap: 2px; width: min(78vw, 300px); aspect-ratio: 1; margin: 6px auto 4px; border: 0; border-radius: 50%; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  background: radial-gradient(circle at 50% 38%, #5a2a14, #2a1208 62%, #140804); box-shadow: inset 0 0 0 3px #8a4a1c, inset 0 -10px 30px rgb(255 120 30 / .25), 0 0 0 6px #1a0c06, 0 0 0 8px #6a3a18, 0 14px 30px #000c; transition: transform .07s }
body.play .sf5-pump b { font: 400 34px var(--d5); color: #ffcf8a; text-shadow: 0 2px 0 #000 } body.play .sf5-pump span { font: 700 12px var(--u5); color: #c99a7a }
body.play .sf5-pump:active { transform: scale(.94) translateY(3px); box-shadow: inset 0 0 0 3px #ffb35a, inset 0 -10px 40px rgb(255 140 40 / .55), 0 0 0 6px #1a0c06, 0 0 0 8px #b86a28, 0 6px 16px #000c }
/* Hammertakt */
body.play .sf5-beat { position: relative; display: grid; place-items: center; width: min(80vw, 310px); aspect-ratio: 1; margin: 4px auto 8px; --k: 0 }
body.play .sf5-beat .ring { position: absolute; inset: 0; border-radius: 50%; border: 6px solid #ffb35a; opacity: calc(.15 + var(--k) * .85); scale: calc(1.9 - var(--k) * .9); box-shadow: 0 0 18px rgb(255 160 60 / .6); pointer-events: none }
body.play .sf5-beat.near .ring { border-color: #fff6d8 }
body.play .sf5-beat .core { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px #6a3a18; pointer-events: none }
body.play .sf5-beat.over .ring { opacity: 0 }
body.play .sf5-hit { position: relative; display: grid; place-items: center; gap: 2px; width: 82%; aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none;
  background: radial-gradient(circle at 50% 35%, #6a3016, #2a1208 65%, #140804); box-shadow: inset 0 0 0 3px #b86a28, 0 10px 26px #000c }
body.play .sf5-hit b { font: 400 36px var(--d5); color: #ffe2a8; text-shadow: 0 2px 0 #000 } body.play .sf5-hit span { font: 700 12px var(--u5); color: #c99a7a }
body.play .sf5-hit.hit { animation: sf5hit .22s ease-out }
@keyframes sf5hit { 30% { transform: scale(.92); box-shadow: inset 0 0 0 4px #fff6d8, 0 0 30px rgb(255 200 120 / .9) } }
body.play .sf5-mine { display: flex; justify-content: center; gap: 8px; margin: 2px 0 8px } body.play .sf5-mine i { width: 16px; height: 16px; rotate: 45deg; border-radius: 3px; background: #1a0c06; box-shadow: inset 0 0 0 1px #6a3a18 }
body.play .sf5-mine i.p { background: #ffe39a } body.play .sf5-mine i.g { background: #6dff8a } body.play .sf5-mine i.k { background: #ffb35a } body.play .sf5-mine i.x { background: #5a2a20 }
/* Das Auge */
body.play .sf5-eye { display: grid; place-items: center; width: min(78vw, 300px); aspect-ratio: 1; margin: 4px auto 6px }
body.play .sf5-hold { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border: 0; border-radius: 50%; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  background: radial-gradient(circle at 50% 40%, #3a1a10, #1a0a06 62%, #0a0403); box-shadow: inset 0 0 0 3px #8a4a1c, 0 0 0 6px #1a0c06, 0 0 0 8px #6a3a18, 0 14px 30px #000c }
body.play .sf5-hold i { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffd2a0, #ff6a1a 40%, #7a1a08 75%, #2a0804); box-shadow: 0 0 0 3px #2a0804, 0 0 24px rgb(255 120 40 / .5); transition: transform .3s, box-shadow .3s }
body.play .sf5-hold b { position: absolute; bottom: 14%; font: 400 24px var(--d5); color: #ffcf8a; text-shadow: 0 2px 0 #000 }
body.play .sf5-eye.on .sf5-hold { box-shadow: inset 0 0 0 3px #ffcf8a, 0 0 0 6px #1a0c06, 0 0 0 8px #ff8000, 0 0 40px rgb(255 128 0 / .5) } body.play .sf5-eye.on .sf5-hold i { transform: scale(1.12); box-shadow: 0 0 0 3px #2a0804, 0 0 40px rgb(255 160 60 / .9) }
body.play .sf5-eye.armed.on .sf5-hold i { animation: sf5pulse .5s ease-in-out infinite alternate } @keyframes sf5pulse { to { transform: scale(1.2) } }
body.play .sf5-res { display: grid; justify-items: center; gap: 4px; margin: 6px 0 12px; padding: 18px 12px; border-radius: 16px; text-align: center; background: radial-gradient(ellipse at 50% 0%, #4a1e0a, #140806 70%); box-shadow: inset 0 0 0 2px #ff8000 }
body.play .sf5-res img { width: 64px; height: 64px; border-radius: 10px; box-shadow: 0 0 0 2px #000, 0 0 0 4px #ff8000 } body.play .sf5-res span { font: 800 11px var(--u5); letter-spacing: .22em; text-transform: uppercase; color: #c99a7a }
body.play .sf5-res b { font: 400 28px var(--d5); color: #ff9d3a } body.play .sf5-res.t3 b { color: #ffe39a } body.play .sf5-res.t0 b { color: #b08a7a } body.play .sf5-res em { font: 700 13px var(--u5); font-style: normal; color: var(--ink5) } body.play .sf5-res p { margin: 6px 0 0; font: 500 14px var(--u5); color: var(--ink5) }

/* ---------- Donnerzorn: Fesseln des Windsuchers (Bosskampf Donneraan) ---------- */
body.play .dz6 { position: relative; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 10px; margin: 0 0 8px; padding: 8px 10px 12px; border-radius: 12px; overflow: hidden; background: linear-gradient(90deg, #0e2234, #0a121c); box-shadow: inset 0 0 0 1px #3a7aa8 }
body.play .dz6 img { width: 36px; height: 36px; border-radius: 8px; box-shadow: 0 0 0 1px #000 }
body.play .dz6 div { display: grid; gap: 1px } body.play .dz6 b { font: 400 16px var(--d5); color: #9fdcff } body.play .dz6 span { font: 600 12px/1.35 var(--u5); color: #c8e4f6 }
body.play .dz6 > i { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--s); background: linear-gradient(90deg, #3a8cff, #bfe8ff) }
body.play .dz6.ent { background: linear-gradient(90deg, #12406a, #0a1a2c); box-shadow: inset 0 0 0 2px #7ac8ff, 0 0 18px rgb(122 200 255 / .35) } body.play .dz6.ent b { font-size: 19px; color: #fff }
body.play .dz6.ent.me { box-shadow: inset 0 0 0 2px #fff, 0 0 22px rgb(160 220 255 / .6); animation: dz6p 1.2s ease-in-out infinite alternate } @keyframes dz6p { to { box-shadow: inset 0 0 0 2px #bfe8ff, 0 0 30px rgb(160 220 255 / .8) } }

/* Boss-Signaturen (03.10.2026): Gefahr-Leiste mit Regel + Gegenmittel, Vorschau auf die nächste Runde */
.cb6-dg { margin: 8px 0 4px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(180deg, rgb(70 8 6 / .92), rgb(34 4 4 / .92)); border: 1px solid #b3341f; box-shadow: inset 0 0 0 1px rgb(255 120 80 / .12); display: grid; gap: 4px }
.cb6-dg b { font: 700 12px/1 var(--ui, sans-serif); letter-spacing: .18em; text-transform: uppercase; color: #ff7a5a }
.cb6-dg span { font-size: 15px; line-height: 1.35; color: #f6e7d4 }
.cb6-dg em { font-style: normal; font-size: 13px; color: #ffcf8a }
.cb6-dg.t3, .cb6-dg.t4 { border-color: #e04a2a; background: linear-gradient(180deg, rgb(90 10 8 / .95), rgb(40 4 6 / .95)) }
.cb6-dg.t4 { border-color: #7ac8ff; background: linear-gradient(180deg, rgb(10 30 60 / .95), rgb(6 12 28 / .95)) }
.cb6-dg.t4 b { color: #9fdcff }
.cb6-nx { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; font-size: 13px; color: #d8cbb0 }
.cb6-nx img { width: 22px; height: 22px; border-radius: 4px }
.cb6-nx b { color: #ffcf8a }

/* Zwillingsimperatoren: Ziel wählen (combat.js twPhone) */
.cb6-tw { margin: 6px 0 8px; display: grid; gap: 6px }
.cb6-tw .h { font: 700 11px/1 var(--ui, sans-serif); letter-spacing: .18em; text-transform: uppercase; color: #cdb98f }
.cb6-tw .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.cb6-tw .tb { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 10px; border-radius: 12px; text-align: left; color: #e9dcc3;
  background: linear-gradient(180deg, rgb(28 22 16 / .94), rgb(14 11 8 / .94)); border: 1px solid #5a4a30; box-shadow: inset 0 0 0 1px rgb(255 230 180 / .05); transition: border-color .2s, box-shadow .2s, opacity .2s, transform .08s }
.cb6-tw .tb:active { transform: translateY(1px) scale(.985) }
.cb6-tw .tb img { width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid #8a6d3b; background: #1a120a }
.cb6-tw .tb span { display: grid; gap: 3px; min-width: 0 }
.cb6-tw .tb b { font: 700 15px/1.1 var(--ui, sans-serif); color: #f3e3c0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cb6-tw .tb small { font-size: 12.5px; line-height: 1.2; color: #bfae8c }
.cb6-tw .tb:not(.on):not(.dead) { opacity: .72 }
.cb6-tw .tb.on { border-color: #e2b55a; box-shadow: inset 0 0 0 1px rgb(255 214 130 / .35), 0 0 0 1px rgb(226 181 90 / .35) }
.cb6-tw .tb.on img { border-color: #f1cf7a }
.cb6-tw .tb.dead { opacity: .4; filter: grayscale(1) }
.cb6-tw em { font-style: normal; font-size: 13px; color: #d8cbb0 }
.cb6-tw.near em { color: #ffcf6a }
.cb6-tw.hot em { color: #ff8a6a; font-weight: 700; animation: cb6twp 1.1s ease-in-out infinite }
.cb6-tw.hot .row { animation: cb6twr 1.1s ease-in-out infinite }
@keyframes cb6twp { 50% { opacity: .55 } }
@keyframes cb6twr { 50% { filter: drop-shadow(0 0 6px rgb(255 90 50 / .45)) } }
@media (prefers-reduced-motion: reduce) { .cb6-tw.hot em, .cb6-tw.hot .row { animation: none } }

/* Handy-Questtafel 6 (04.10.2026): Forever-Cinematic dezent hinter Tafel und Fragen, Kategorien als Kopf mit Goldfassung, Runensteine als Sechsecke wie auf der Bühne */
body.play.sc-board::before { background: linear-gradient(180deg, rgb(7 5 10 / .5), rgb(7 5 10 / .74) 34%, rgb(7 5 10 / .9) 62%, #07050a 92%), url(/assets/ui/backgrounds/forever-cinematic-sm.webp) 50% 0 / auto max(66vh, 56.25vw) no-repeat, #07050a !important; filter: saturate(.85) }
body.play.sc-board::after { opacity: .045 }
body.play .qt6-top { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(180deg, rgb(26 20 14 / .86), rgb(10 8 6 / .9)); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .35), 0 8px 22px rgb(0 0 0 / .45); backdrop-filter: blur(3px) }
body.play .qt6-top .kick { display: block; font: 800 11px var(--u5); letter-spacing: .18em; text-transform: uppercase; color: #c9a45a }
body.play .qt6-top h4 { margin: 3px 0 0; font: 400 20px/1.15 var(--d5); color: var(--gold5) }
body.play .qt6-top h4 .nm { font: inherit }
body.play .qt6-top p { margin: 5px 0 0; font-size: 14px; line-height: 1.35; color: var(--mute5) }
body.play .qt6-top .pf { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #120c06 center / cover; box-shadow: 0 0 0 2px var(--c), 0 0 0 4px #120c06 }
body.play .qt6-top .qn { position: absolute; right: 12px; top: 10px; padding: 1px 8px; border-radius: 99px; font: 800 11px var(--u5); letter-spacing: .08em; color: #e8d4a4; background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .35) }
body.play .qt6-top:not(.me) .kick { padding-right: 70px }
body.play .qt6-top.me { display: block; box-shadow: inset 0 0 0 1px #d6b56a, 0 0 0 1px #000, 0 10px 26px rgb(0 0 0 / .5) }
body.play .qt6-top.me::before { content: ''; position: absolute; inset: -1px; border-radius: 11px; padding: 1px; background: linear-gradient(105deg, transparent 30%, #fff2c4 50%, transparent 70%) 0 0 / 300% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: qt6sweep 3.2s linear infinite; pointer-events: none }
@keyframes qt6sweep { from { background-position: 150% 0 } to { background-position: -50% 0 } }

body.play .qt6 { display: grid; gap: 14px; margin-top: 4px }
body.play .qt6-cat { display: grid; gap: 7px; animation: qt6in .45s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc(var(--k) * 70ms) }
@keyframes qt6in { from { opacity: 0; translate: 0 10px } }
body.play .qt6-ch { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 3px 10px 3px 3px; border-radius: 22px 8px 8px 22px;
  background: linear-gradient(90deg, rgb(34 26 16 / .92), rgb(14 11 7 / .78)); box-shadow: inset 0 0 0 1px rgb(168 140 92 / .45), 0 4px 14px rgb(0 0 0 / .4) }
body.play .qt6-ic { flex: none; width: 36px; height: 36px; padding: 2px; border-radius: 50%; background: linear-gradient(160deg, #f6dc96, #7a5a1e 50%, #d6b060); box-shadow: 0 0 0 2px #120c06 }
body.play .qt6-ic .wi { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; margin: 0 }
body.play .qt6-ch b { flex: 1; min-width: 0; font: 400 16px/1.1 var(--d5); color: var(--gold5); text-shadow: 0 1px 0 #000; hyphens: auto; overflow-wrap: break-word }
body.play .qt6-pp { flex: none; display: flex; gap: 6px; padding-right: 2px }
body.play .qt6-pp i { width: 8px; height: 8px; rotate: 45deg; border-radius: 1px; background: #1a140c; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 60%, #000) }
body.play .qt6-pp i.r-c, body.play .qt6-st.r-c { --c: #d8d8d8 } body.play .qt6-pp i.r-u, body.play .qt6-st.r-u { --c: #3fe06e }
body.play .qt6-pp i.r-r, body.play .qt6-st.r-r { --c: #3aa0ff } body.play .qt6-pp i.r-e, body.play .qt6-st.r-e { --c: #b56dff }
body.play .qt6-pp i.on { background: var(--c) } body.play .qt6-pp i.none { opacity: .25 }

body.play .qt6-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 2px }
body.play .qt6-gap { aspect-ratio: .866 }
body.play .qt6-st { --hexp: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); position: relative; display: block; width: 100%; aspect-ratio: .866; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit;
  filter: drop-shadow(0 5px 8px rgb(0 0 0 / .55)); transition: transform .18s cubic-bezier(.2, 1.4, .4, 1), filter .2s; -webkit-tap-highlight-color: transparent }
body.play .qt6-st .rim { position: absolute; inset: 0; clip-path: var(--hexp); background: linear-gradient(160deg, #f6dc96 0%, #9a7426 22%, #3b2a10 46%, #b8913f 70%, #4a3414 100%) }
body.play .qt6-st .fa { position: absolute; inset: 3px; clip-path: var(--hexp); display: grid; align-content: center; justify-items: center; gap: 3px; padding: 0 4px; text-align: center;
  background: radial-gradient(ellipse 80% 60% at 50% 34%, color-mix(in srgb, var(--rc) 18%, #2c251e), #110d0a 74%) }
body.play .qt6-st .fa::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(255 236 190 / .13), transparent 26%, transparent 78%, rgb(0 0 0 / .45)); pointer-events: none }
body.play .qt6-st .gem { position: relative; width: 17px; height: 17px; margin-bottom: 3px; rotate: 45deg; border-radius: 2px;
  background: linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--rc) 70%, #fff) 22%, var(--rc) 48%, color-mix(in srgb, var(--rc) 45%, #000) 100%); box-shadow: 0 0 0 2px #2a1c08, 0 0 0 3px #c9a24e, 0 0 12px color-mix(in srgb, var(--rc) 55%, transparent) }
body.play .qt6-st.r-r .gem, body.play .qt6-st.r-e .gem { width: 20px; height: 20px }
body.play .qt6-st b { position: relative; font: 400 12.5px/1 var(--d5); color: var(--rc); text-shadow: 0 1px 0 #000 }
body.play .qt6-st .rew { position: relative; font-size: 12px; color: var(--ink5); white-space: nowrap }
body.play .qt6-st .rew .money { display: inline-flex; align-items: center; gap: 2px }
body.play .qt6-st .who { position: relative; display: grid; justify-items: center; gap: 2px }
body.play .qt6-st .who em { font: 800 8.5px var(--u5); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #ffb36b }
body.play .qt6-st .fc { display: flex } body.play .qt6-st .fc img { width: 17px; height: 17px; border-radius: 50%; margin-left: -4px; box-shadow: 0 0 0 1.5px var(--c), 0 0 0 2.5px #000 }
body.play .qt6-st .fc img:first-child { margin-left: 0 } body.play .qt6-st .fc small { font-size: 11px; color: var(--mute5) }
body.play .qt6-st.done { filter: saturate(.25) brightness(.62) drop-shadow(0 3px 5px rgb(0 0 0 / .5)) }
body.play .qt6-st.done .gem { background: linear-gradient(135deg, #8a8a8a, #3a3a3a); box-shadow: 0 0 0 2px #2a1c08, 0 0 0 3px #6a5a3a }
body.play .qt6.look .qt6-st:not(.done) { filter: brightness(.86) drop-shadow(0 5px 8px rgb(0 0 0 / .55)) }
/* Wähler: offene Steine glänzen nacheinander, Druck = Stein sinkt */
body.play .qt6.pick .qt6-st:not(.done) { cursor: pointer }
body.play .qt6.pick .qt6-st:not(.done) .rim::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgb(255 246 214 / .6) 50%, transparent 62%) 0 0 / 260% 100%; animation: qt6glint 5s linear infinite; animation-delay: calc(var(--d) * -.37s) }
@keyframes qt6glint { 0% { background-position: 160% 0 } 30%, 100% { background-position: -110% 0 } }
body.play .qt6.pick .qt6-st:not(.done):active { transform: translateY(2px) scale(.95); filter: brightness(1.25) drop-shadow(0 2px 4px rgb(0 0 0 / .6)) }
body.play .qt6-foot { margin: 0; padding: 0 6px; font-size: 13px; line-height: 1.4; text-align: center; color: var(--mute5) } body.play .qt6-foot b { color: var(--gold5); font-weight: 700 }
@media (min-width: 700px) { body.play .qt6-row { max-width: 560px; justify-self: center; width: 100%; gap: 10px } body.play .qt6-st b { font-size: 15px } body.play .qt6-st .rew { font-size: 14px } }
@media (prefers-reduced-motion: reduce) { body.play .qt6-cat, body.play .qt6.pick .qt6-st .rim::after, body.play .qt6-top.me::before { animation: none } }

/* Finaltafeln 6 (04.10.2026): Bild des Gegners hinter Erzählung und Fragen am Handy, Farben je Zeitalter */
body.play .cho6-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(6 5 9 / .42), rgb(6 5 9 / .72) 36%, rgb(6 5 9 / .9) 64%, #07050a 94%), var(--img) var(--bgp, 50% 0) / auto max(66vh, 56.25vw) no-repeat, #07050a }
body.play .cho6-bg.k-nzoth { --img: url(/assets/ui/backgrounds/finale-nzoth-sm.webp); --bgp: 50% 0 } body.play .cho6-bg.k-argus { --img: url(/assets/ui/backgrounds/finale-argus-sm.webp); --bgp: 50% 0 }
body.play .cho6-bg.k-illidan { --img: url(/assets/ui/backgrounds/finale-illidan-sm.webp); --bgp: 64% 0 } body.play .cho6-bg.k-lich { --img: url(/assets/ui/backgrounds/finale-lich-sm.webp); --bgp: 60% 0 }
body.play:has(.cho6-bg)::after { opacity: .03 }
body.play .cho6-card { --a: #ff8a3a; position: relative; display: grid; gap: 8px; padding: 16px 16px 14px; border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--a) 10%, rgb(14 10 16 / .88)), rgb(8 7 10 / .92)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 55%, #2a2016), 0 10px 26px rgb(0 0 0 / .55); backdrop-filter: blur(3px) }
body.play .cho6-card.k-argus { --a: #7ee6ff } body.play .cho6-card.k-illidan { --a: #6fff3a } body.play .cho6-card.k-lich { --a: #8fd8ff }
body.play .cho6-card .kick { font: 800 11px var(--u5); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--a) 60%, #fff) }
body.play .cho6-card h4 { margin: 0; font: 400 24px/1.1 var(--d5); color: color-mix(in srgb, var(--a) 45%, #fff); text-shadow: 0 2px 0 #000 }
body.play .cho6-card .st { margin: 0; font-style: italic; font-size: 16px; line-height: 1.45; color: var(--ink5) }
body.play .cho6-pm { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mute5) }
body.play .cho6-pm i { width: 11px; height: 11px; rotate: 45deg; border-radius: 2px; background: #15121a; box-shadow: 0 0 0 1px color-mix(in srgb, var(--a) 60%, #000) } body.play .cho6-pm i.on { background: var(--a) }
body.play .cho6-pm span { margin-left: 4px }
body.play .cho6-card .small { margin: 0; font-size: 13px; color: var(--mute5) }

/* Schattengestalt am Handy (04.10.): Gesicht wird zum violetten Schatten wie auf der Bühne (.uf.f-schatten), Kopfrahmen + Zielrahmen im Kampf */
body.play .uf5 .por.f-schatten .face, body.play .cb6-uf .por.f-schatten img { filter: grayscale(1) sepia(1) hue-rotate(218deg) saturate(3.2) brightness(.42) contrast(1.35) }
body.play .uf5 .por.f-schatten { box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #7a2aff, 0 0 0 3.5px #000, 0 0 16px rgb(122 42 255 / .6) }
body.play .uf5 .por.f-schatten::after, body.play .cb6-uf .por.f-schatten::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 14px #7a2aff; animation: ph8sfp 2.4s ease-in-out infinite alternate }
@keyframes ph8sfp { to { box-shadow: inset 0 0 6px #7a2aff } }