/* Handy v5 (27.09.2026) – gleiche Formensprache wie die Bühne v4: fast schwarzer Grund mit Welt-Schimmer, Goldkante als feiner Verlauf,
   Petrol-Kristalle, Friz für Titel, Alegreya Sans für alles andere. Liegt als letzte Datei über ph.css/forever.css/ph4.css.
   Aufbau: Kopf (kleiner Einheitenrahmen + Stationszeile) · Aktion (Controller) · Anfragen darunter · Spielleiste unten. */
@font-face { font-family: 'Alegreya Sans'; font-weight: 700; src: url('/assets/ui/fonts/alegreya-sans-latin-700-normal.woff2') format('woff2'); font-display: swap }
body.play {
  --d5: Friz, 'Friz Quadrata', Georgia, serif; --u5: 'Alegreya Sans', 'Segoe UI', sans-serif;
  --rim5: linear-gradient(180deg, #f3e0a8, #b8914a 38%, #6e4f22 62%, #d6b56a); --rim5s: linear-gradient(180deg, #8a6a30, #3a2a12 50%, #6a4e22);
  --pan5: linear-gradient(180deg, rgb(30 23 16 / .95), rgb(12 9 7 / .96)); --teal5: #2f93b4; --gold5: #e8c46a; --ink5: #f3ead6; --mute5: #b9a787;
  --line5: linear-gradient(90deg, transparent, #7a5c24 15%, #d9b45e 50%, #7a5c24 85%, transparent);
  background: #07050a !important; color: var(--ink5); font-family: var(--u5) }
body.play::before { background: radial-gradient(ellipse 90% 45% at 50% 108%, rgb(47 147 180 / .28), transparent 70%), radial-gradient(ellipse 80% 35% at 50% -6%, rgb(232 196 106 / .12), transparent 70%), radial-gradient(ellipse at 50% 50%, transparent 55%, rgb(0 0 0 / .7)) !important; z-index: 0 }
/* Runenkreis als ruhiger Hintergrund hinter dem Controller */
body.play::after { content: ""; position: fixed; left: 50%; top: 56%; width: 150vmin; aspect-ratio: 1; translate: -50% -50%; background: url(/assets/ui/v5/rune-teal.svg) center / contain no-repeat; opacity: .07; pointer-events: none; z-index: 0; animation: bg5spin 180s linear infinite }
@keyframes bg5spin { to { rotate: 360deg } }
body.play .pbody { position: relative; z-index: 1; font-family: var(--u5) }

/* ---------- Kopf: kleiner Einheitenrahmen wie auf der Bühne ---------- */
body.play .phead { position: sticky; top: 0; z-index: 20; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 0 !important; background: linear-gradient(180deg, #0d0a08 70%, rgb(13 10 8 / .0)) !important; border: 0 !important; box-shadow: none !important }
.uf5 { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border: 1px solid transparent; border-radius: 8px; overflow: hidden;
  background: radial-gradient(ellipse 60% 120% at 0% 50%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%), var(--pan5) padding-box, var(--rim5) border-box; box-shadow: 0 8px 22px #000a }
.uf5 .rkbg { position: absolute; right: 8px; top: -6px; font: 400 64px/1 var(--d5); font-style: normal; color: rgb(255 255 255 / .05); pointer-events: none }
.uf5.top1 .rkbg { color: rgb(255 209 90 / .16) } .uf5.top2 .rkbg { color: rgb(210 220 235 / .14) } .uf5.top3 .rkbg { color: rgb(220 140 80 / .15) }
.uf5 .por { position: relative; width: 62px; height: 62px; border-radius: 50%; box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #c9a24a, 0 0 0 3.5px #000, 0 0 14px color-mix(in srgb, var(--c) 45%, transparent) }
.uf5 .por .face { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 28% }
.uf5 .por .cls { position: absolute; left: -5px; top: -5px; width: 24px; height: 24px; border-radius: 50%; background: #000; box-shadow: 0 0 0 1px #000, 0 0 0 2px #c9a24a }
.uf5 .por .lvl { position: absolute; left: -4px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 4px; display: grid; place-items: center; border-radius: 11px; font: 800 12px var(--u5); color: #f6e7c0; background: radial-gradient(circle at 50% 35%, #3a2c18, #120d08); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c9a24a }
.uf5 .inf { display: grid; gap: 5px; min-width: 0 }
.uf5 .nm { display: flex; align-items: baseline; gap: 8px; min-width: 0 }
.uf5 .nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 20px/1.05 var(--d5); color: var(--c); text-shadow: 0 1px 0 #000, 0 0 10px #000 }
.uf5 .nm small { flex: none; font: 800 10.5px var(--u5); letter-spacing: .16em; text-transform: uppercase; color: var(--mute5) }
.uf5.top1 .rk { color: #ffd76a } .uf5.top2 .rk { color: #d6dde8 } .uf5.top3 .rk { color: #e39a60 }
.uf5 .streak { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font: 800 12px var(--u5); color: #ffb04a } .uf5 .streak img { width: 14px; height: 14px; border-radius: 3px }
.uf5 .xp { position: relative; height: 15px; border-radius: 2px; overflow: hidden; background: #050404; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(214 176 104 / .25) }
.uf5 .xp i { position: absolute; inset: 0 auto 0 0; width: var(--p); background: linear-gradient(0deg, rgb(90 47 160 / .45), rgb(90 47 160 / .45)), url(/assets/ui/fx/v4/fill-arkan.png) 0 50% / auto 100% repeat-x; box-shadow: 1px 0 0 #d8b8ff8c; transition: width .8s cubic-bezier(.22, 1, .36, 1) }
.uf5 .xp em { position: relative; display: block; text-align: center; font: 800 10.5px/15px var(--u5); font-style: normal; color: #fff; text-shadow: 0 1px 1px #000, 0 0 3px #000 }
.uf5 .cur { display: flex; align-items: center; gap: 12px; font: 800 13px var(--u5); color: var(--ink5) }
.uf5 .cur .money { display: inline-flex; align-items: center; gap: 3px } .uf5 .cur .dkp { color: #9fd0ff; letter-spacing: .02em }
/* Stationszeile: Goldlinie mit Kristall wie der Kopf der Questtafel */
.kick5 { display: flex; align-items: center; gap: 10px; margin: 8px 2px 2px; font: 800 11px var(--u5); letter-spacing: .22em; text-transform: uppercase; color: #e3cfa2 }
.kick5 i { flex: 1; height: 1px; background: var(--line5) } .kick5 i:first-child { background: linear-gradient(90deg, transparent, #d9b45e) } .kick5 i:last-child { background: linear-gradient(90deg, #d9b45e, transparent) }
.kick5 span { position: relative; padding-left: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 78% }
.kick5 span::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; translate: 0 -50%; rotate: 45deg; background: var(--teal5); box-shadow: 0 0 8px var(--teal5), 0 0 0 1px #e8d19a }
/* alten Kopf ausblenden, falls noch vorhanden */
.phead .uf4 { display: none }
body[data-role="play"] .gm-banner { margin: 0 auto 6px; width: max-content; border-radius: 12px }

/* ---------- Panels, Titel, Knöpfe (alle Reiter) ---------- */
body.play .pbody { padding: 12px 14px 110px !important; gap: 12px }
body.play .pbody h4, body.play .pbody .fvh { display: flex; align-items: center; gap: 10px; font: 400 20px var(--d5) !important; color: var(--gold5) !important; text-shadow: 0 1px 0 #000 }
body.play .pbody .fvh::after, body.play .pbody > .ppane > h4::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #d9b45e, transparent) }
body.play .pbody .small { color: #cdbd9c }
body.play .sec { font: 800 11px var(--u5) !important; letter-spacing: .22em !important; text-transform: uppercase; color: #c9a45a !important }
body.play .pb, body.play .pbig { border: 1px solid transparent !important; border-radius: 8px !important; color: var(--ink5) !important; font-family: var(--u5) !important; font-weight: 700 !important;
  background: linear-gradient(180deg, #2a1f15, #120d09) padding-box, var(--rim5s) border-box !important; box-shadow: 0 4px 12px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 230 170 / .07) !important }
body.play .pb:active, body.play .pbig:active { filter: brightness(1.2); transform: translateY(1px) }
body.play .pb.sel, body.play .pbig.sel { background: linear-gradient(180deg, #4a3614, #1e1508) padding-box, var(--rim5) border-box !important; box-shadow: 0 0 16px rgb(240 200 100 / .35) !important }
body.play .pbig:not(.alt) { background: linear-gradient(180deg, #6a4c18, #3a280c) padding-box, var(--rim5) border-box !important; color: #fff3d0 !important; text-shadow: 0 1px 0 #000 }
body.play .pbig.alt { background: linear-gradient(180deg, #221a12, #0e0a07) padding-box, var(--rim5s) border-box !important }
body.play .wf, body.play .parch, body.play .mcard, body.play .acard, body.play .achv, body.play .prank .r, body.play .offer, body.play .cs-card, body.play .csheet .skl, body.play .tal-opt {
  border: 1px solid transparent !important; background: var(--pan5) padding-box, var(--rim5s) border-box !important; box-shadow: 0 6px 16px rgb(0 0 0 / .45) !important }

/* ---------- Warten: Kristall mit Runenkreis ---------- */
body.play .wait { position: relative; display: grid; justify-items: center; gap: 6px; margin: 18px 0; padding: 118px 16px 8px !important; border: 0 !important; background: none !important; box-shadow: none !important; text-align: center;
  font: 500 17px/1.4 var(--u5) !important; color: var(--mute5) }
body.play .wait::before { content: ""; position: absolute; left: 50%; top: 0; width: 104px; height: 104px; translate: -50% 0; background: url(/assets/ui/v5/rune-gold.svg) center / contain no-repeat; opacity: .75; animation: bg5spin 24s linear infinite }
body.play .wait::after { content: ""; position: absolute; left: 50%; top: 34px; width: 36px; height: 36px; translate: -50% 0; rotate: 45deg; border-radius: 4px; background: radial-gradient(circle at 50% 30%, #6fc4e0, #16627f 60%, #0a3a4e); box-shadow: 0 0 0 3px #d6b56a, 0 0 0 4px #000, 0 0 22px rgb(47 147 180 / .6); animation: gem5 3s ease-in-out infinite }
@keyframes gem5 { 50% { box-shadow: 0 0 0 3px #f3e0a8, 0 0 0 4px #000, 0 0 34px rgb(47 147 180 / .9) } }
body.play .wait b { font: 400 22px var(--d5); color: var(--gold5) }
body.play .wait .spin { display: none }

/* ---------- Frage: Kopfzeile + 2 × 2 Kristalle ---------- */
body.play .pq-head { display: flex !important; align-items: center; gap: 10px; padding: 0 2px !important; background: none !important; border: 0 !important; box-shadow: none !important; font: 800 11.5px var(--u5); letter-spacing: .18em; text-transform: uppercase }
body.play .pq-head .rd { width: 9px; height: 9px; rotate: 45deg; background: var(--rc, #ccc); box-shadow: 0 0 8px var(--rc, #ccc) } body.play .pq-head .rar { color: var(--rc, #ccc) }
body.play .pq-head .qcol { letter-spacing: .1em } body.play .pq-look { margin-left: auto; color: var(--mute5); letter-spacing: .12em }
.pad4 .pk { border: 1px solid transparent !important; border-radius: 10px !important; min-height: 128px;
  background: radial-gradient(ellipse 70% 60% at 50% 110%, rgb(47 147 180 / .22), transparent 70%), radial-gradient(ellipse 80% 90% at 50% 0%, #3a2b1c, #140f0b 70%) padding-box, var(--rim5) border-box !important;
  box-shadow: 0 8px 18px rgb(0 0 0 / .55), inset 0 0 0 1px #000, inset 0 0 0 4px rgb(10 8 6 / .6) !important }
.pad4 .pk::before { width: 54% !important; max-width: 112px !important; background: var(--rim5) !important; filter: drop-shadow(0 4px 8px #000c) }
.pad4 .pk::after { width: calc(54% - 14px) !important; max-width: 98px !important }
.pad4 .pk .gem5 { position: absolute; width: 54%; max-width: 112px; aspect-ratio: 1; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .35) 48%, transparent 58%) -120% 0 / 250% 100% no-repeat; z-index: 1; animation: gem5shine 6s ease-in-out infinite; pointer-events: none }
.pad4 .pk:nth-child(2) .gem5 { animation-delay: .4s } .pad4 .pk:nth-child(3) .gem5 { animation-delay: .8s } .pad4 .pk:nth-child(4) .gem5 { animation-delay: 1.2s }
@keyframes gem5shine { 0%, 70% { background-position: -120% 0 } 85%, 100% { background-position: 220% 0 } }
.pad4 .pk .kl { z-index: 2 !important; font-size: 42px !important }
.pad4 .pk em { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; padding: 4px 6px; border-radius: 12px; font: 800 11.5px/1.2 var(--u5); font-style: normal; letter-spacing: .04em; text-align: center; color: #2a1a04; background: linear-gradient(180deg, #ffe7a0, #d9a53a); box-shadow: 0 2px 6px #0009 }
/* Vorauswahl: goldene Kontur pulsiert */
.pad4 .pk.pre { --g: #d9a132; animation: pre5 1.1s ease-in-out infinite !important; background: radial-gradient(ellipse 70% 70% at 50% 50%, rgb(240 200 100 / .28), transparent 70%), linear-gradient(180deg, #4a3614, #1e1508) padding-box, linear-gradient(180deg, #fff2c0, #e0b050 50%, #fff2c0) border-box !important }
.pad4 .pk.pre .kl { color: #2a1a04 !important; text-shadow: 0 1px 0 #fff8 !important }
@keyframes pre5 { 50% { box-shadow: 0 0 0 2px rgb(255 220 120 / .8), 0 0 26px rgb(255 205 90 / .6), inset 0 0 0 1px #000 } }
.pad4.haspre .pk:not(.pre):not(.gone) { opacity: .6 }
/* Eingeloggt: Kristall wird Gold, Rest tritt zurück */
.pad4 .pk.sel { --g: #d9a132; background: radial-gradient(ellipse 70% 70% at 50% 50%, rgb(255 210 100 / .35), transparent 70%), linear-gradient(180deg, #5e4516, #2e210a) padding-box, linear-gradient(180deg, #fff2c0, #e0b050 50%, #fff2c0) border-box !important; box-shadow: 0 0 28px rgb(255 205 90 / .5), inset 0 0 0 1px #000 !important; animation: lock5 .6s cubic-bezier(.34, 1.5, .64, 1) }
@keyframes lock5 { 0% { transform: scale(.9); filter: brightness(2) } 100% { transform: none } }
.pad4.locked .pk:not(.sel) { opacity: .28 !important; filter: saturate(.4) }
.pad4 .pk.gone { opacity: .14 !important }
body.play .pad-help { margin: 0; text-align: center; font: 700 13px var(--u5) !important; color: var(--mute5) } body.play .pad-help b { color: var(--gold5) }
/* Hilfen: Aktionsleisten-Plätze mit Icon */
body.play .hint-h { display: flex; justify-content: space-between; gap: 8px; font: 700 12px var(--u5); color: var(--mute5) } body.play .hint-h em { font-style: normal; color: var(--gold5) }
body.play .hints { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px !important }
body.play .hb { display: grid !important; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; min-height: 54px !important; padding: 7px 8px !important; text-align: left; border: 1px solid transparent !important; border-radius: 8px !important;
  background: linear-gradient(180deg, #221a12, #0e0a07) padding-box, var(--rim5s) border-box !important; box-shadow: 0 4px 10px rgb(0 0 0 / .45) !important; color: var(--ink5) !important; font: 800 13px/1.1 var(--u5) !important }
body.play .hb .ab { grid-row: 1 / 3; width: 38px; height: 38px; padding: 0 !important } body.play .hb .ab img { width: 100%; height: 100%; border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6a30 }
body.play .hb small { font: 700 11.5px var(--u5) !important; color: #ff9a7a } body.play .hb.free small { color: #7fe08f }
body.play .hb:disabled { opacity: .45; filter: grayscale(.7) }
body.play .hint { border-radius: 8px !important; font: 500 15px/1.4 var(--u5) !important }

/* Eingeloggt / Auflösung: schmale Tafeln */
body.play .plocked, body.play .presult4 { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px 14px !important; border: 1px solid transparent !important; border-radius: 10px !important; background: var(--pan5) padding-box, var(--rim5) border-box !important; box-shadow: 0 6px 16px #0008 !important }
body.play .plocked img, body.play .presult4 img { width: 40px; height: 40px }
body.play .plocked b, body.play .presult4 b { display: block; font: 400 21px var(--d5) !important; color: var(--gold5) } body.play .plocked span, body.play .presult4 span { font: 600 14px var(--u5) !important; color: var(--mute5) }

/* ---------- „Weiter“: großer Kristall mit Runenkreis ---------- */
.g5 { display: grid; justify-items: center; gap: 12px; margin: 10px 0 }
.pgate5 { position: relative; width: 200px; height: 200px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent }
.pgate5 .rr { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: .9; filter: drop-shadow(0 0 6px rgb(232 196 106 / .6)); animation: bg5spin 30s linear infinite; pointer-events: none }
.pgate5 .gem { position: absolute; width: 104px; height: 104px; rotate: 45deg; border-radius: 10px; background: radial-gradient(circle at 50% 28%, #fff4c8, #f0c24a 38%, #a8741a 78%, #6e4a10);
  box-shadow: 0 0 0 3px #000, 0 0 0 6px #d6b56a, 0 0 0 7px #000, 0 0 40px rgb(255 205 80 / .6), 0 12px 24px #000c; animation: gate5 2.4s ease-in-out infinite }
.pgate5 .gem::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .55) 48%, transparent 58%) -120% 0 / 250% 100% no-repeat; animation: gem5shine 4s ease-in-out infinite }
.pgate5 b { position: relative; z-index: 1; font: 400 28px/1 var(--d5); color: #2a1a04; text-shadow: 0 1px 0 #fff9 }
.pgate5:active .gem { scale: .94 }
@keyframes gate5 { 50% { box-shadow: 0 0 0 3px #000, 0 0 0 6px #f3e0a8, 0 0 0 7px #000, 0 0 64px rgb(255 205 80 / .9), 0 12px 24px #000c } }
.pgate5[disabled] .gem, .pgate5.wait .gem { filter: grayscale(.6) brightness(.7); animation: none }
.pgate5.ok { width: 150px; height: 150px; cursor: default } .pgate5.ok .gem { width: 78px; height: 78px; animation: ok5 .7s cubic-bezier(.34, 1.6, .64, 1); background: radial-gradient(circle at 50% 28%, #d8ffe0, #5ee07a 42%, #1e7034 85%); box-shadow: 0 0 0 3px #000, 0 0 0 5px #8af0a4, 0 0 0 6px #000, 0 0 30px rgb(90 230 120 / .5) }
.pgate5.ok .rr { filter: hue-rotate(80deg) saturate(.8) drop-shadow(0 0 5px rgb(120 240 150 / .5)); animation-duration: 60s } .pgate5.ok b { font-size: 21px; color: #06220e }
@keyframes ok5 { 0% { scale: 1.4; filter: brightness(2) } 100% { scale: 1 } }
.g5-pips { display: flex; align-items: center; gap: 6px } .g5-pips i { width: 12px; height: 12px; rotate: 45deg; border-radius: 2px; background: #1a140e; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5a4428 }
.g5-pips i.on { background: var(--c); box-shadow: 0 0 0 1px #000, 0 0 0 2px #e8c46a, 0 0 8px var(--c) } .g5-pips em { margin-left: 6px; font: 800 12px var(--u5); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--mute5) }
.g5-wait { margin: 0; max-width: 300px; text-align: center; font: 500 14.5px/1.4 var(--u5); color: var(--mute5) }
body.gatemode .ppane[data-tab="act"] { min-height: calc(100dvh - 260px) !important }

/* ---------- Anfragen unter den Aktionen ---------- */
.inbox5 { margin-top: 6px; display: grid; gap: 8px }
.inbox5 .ib-h { display: flex; align-items: center; gap: 10px; font: 800 11px var(--u5); letter-spacing: .22em; text-transform: uppercase; color: #c9a45a }
.inbox5 .ib-h i { width: 8px; height: 8px; rotate: 45deg; background: #ff9a3c; box-shadow: 0 0 10px #ff9a3c; animation: gem5 1.6s infinite }
.inbox5 .ib-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #d9b45e, transparent) }
.inbox5 .ib-h em { order: 3; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; font: 800 12px var(--u5); font-style: normal; letter-spacing: 0; color: #2a1a04; background: #e8c46a }
.inbox5 .ib-l { display: grid; gap: 6px }
.inbox5 .offer { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 8px 8px 12px !important; border-radius: 8px !important; font: 600 14px/1.3 var(--u5) !important; animation: offer5 .45s cubic-bezier(.22, 1, .36, 1) both }
@keyframes offer5 { from { opacity: 0; transform: translateY(10px) } }
.inbox5 .offer .ot b { color: var(--gold5) }
.inbox5 .offer .so-row { display: flex !important; gap: 6px; flex-wrap: nowrap }
.inbox5 .offer .pb { min-height: 38px !important; padding: 6px 10px !important; font-size: 13px !important }
.inbox5 .offer .pb:first-child { background: linear-gradient(180deg, #2c5a2c, #123012) padding-box, linear-gradient(180deg, #a8f0a0, #3a8a3a) border-box !important }
body.qmode .inbox5 .ib-l { display: none } body.qmode .inbox5 { flex: none; margin: 0 } body.qmode .inbox5 .ib-h::before { content: "offen · später beantworten"; order: 4; font-weight: 600; letter-spacing: .06em; text-transform: none; color: var(--mute5) }
.offers { display: none }

/* ---------- Spielleiste unten ---------- */
body.play .ptabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 96px 1fr !important; align-items: end; gap: 0 !important; padding: 6px 14px calc(8px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(180deg, rgb(10 8 6 / .0), #0b0907 30%) !important; border: 0 !important; box-shadow: none !important }
body.play .ptabs::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--line5) }
body.play .ptabs button { position: relative; display: grid; justify-items: center; gap: 4px; min-height: 58px !important; padding: 8px 0 2px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--mute5) !important; font: 800 10.5px var(--u5) !important; letter-spacing: .16em; text-transform: uppercase }
body.play .ptabs button img { width: 32px !important; height: 32px !important; border-radius: 50% !important; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6a30 !important; filter: saturate(.7) brightness(.85) }
body.play .ptabs button.on:not(.main), body.play .ptabs button.open { color: var(--gold5) !important } body.play .ptabs button.on:not(.main) img, body.play .ptabs button.open img { filter: none; box-shadow: 0 0 0 1px #000, 0 0 0 2px #f3e0a8, 0 0 12px rgb(232 196 106 / .6) !important }
/* Aktion: der Kristall in der Mitte */
body.play .ptabs button.main { min-height: 86px !important; margin-top: -26px !important; padding-top: 0 !important }
body.play .ptabs button.main::before { content: ""; width: 50px; height: 50px; margin: 9px 0 6px; rotate: 45deg; border-radius: 6px; background: radial-gradient(circle at 50% 28%, #6fc4e0, #16627f 60%, #0a3a4e); box-shadow: 0 0 0 1px #000, 0 0 0 3.5px #d6b56a, 0 0 0 4.5px #000, 0 6px 14px #000c }
body.play .ptabs button.main.on::before { background: radial-gradient(circle at 50% 28%, #fff4c8, #f0c24a 40%, #a8741a 85%); box-shadow: 0 0 0 1px #000, 0 0 0 3.5px #f3e0a8, 0 0 0 4.5px #000, 0 0 22px rgb(255 205 80 / .6), 0 6px 14px #000c }
body.play .ptabs button.main.on { color: var(--gold5) !important }
body.play .ptabs button.main img { position: absolute; top: 20px; left: 50%; translate: -50% 0; width: 30px !important; height: 30px !important; border-radius: 4px !important; box-shadow: 0 0 0 1px #000 !important; opacity: .95; filter: none }
body.play .ptabs .badge { position: absolute; top: 2px !important; right: calc(50% - 34px) !important; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; font: 800 12px var(--u5); color: #2a1a04; background: #ff9a3c; box-shadow: 0 0 0 2px #000, 0 0 12px #ff9a3c; animation: gem5 1.2s infinite }
/* Aufklappmenü der Reiter */
.fan .fan-bg { background: rgb(4 3 2 / .72) !important; backdrop-filter: blur(3px) }
.fan .fan-items button { border: 1px solid transparent !important; border-radius: 8px !important; background: var(--pan5) padding-box, var(--rim5s) border-box !important; box-shadow: 0 8px 20px #000c !important; color: var(--ink5) !important; font: 400 18px var(--d5) !important }
.fan .fan-items button.on { background: linear-gradient(180deg, #4a3614, #1e1508) padding-box, var(--rim5) border-box !important; color: var(--gold5) !important }
.fan .fan-items button .ab img { border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #c9a24a }

/* ---------- Hinweise (Toasts): schmale Tafeln über der Spielleiste ---------- */
body.play .toasts { bottom: 116px !important; left: 12px; right: 12px }
body.play .toast { border: 1px solid transparent !important; border-radius: 8px !important; background: linear-gradient(180deg, rgb(30 23 16 / .97), rgb(12 9 7 / .97)) padding-box, var(--rim5) border-box !important; box-shadow: 0 8px 20px #000c !important; font: 600 15px/1.35 var(--u5) !important; color: var(--ink5) !important }

/* ---------- Antwortbildschirm (qmode): alles passt aufs Display ---------- */
body.qmode .pbody { height: calc(100dvh - 150px - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important; padding: 8px 12px 4px !important }
body.qmode .uf5 { grid-template-columns: 46px minmax(0, 1fr); padding: 6px 10px 6px 6px } body.qmode .uf5 .por { width: 46px; height: 46px } body.qmode .uf5 .cur { display: none } body.qmode .uf5 .nm b { font-size: 17px } body.qmode .uf5 .rkbg { font-size: 48px }
body.qmode .kick5 { margin-top: 6px }
body.qmode .hints { flex: none } body.qmode .hb { min-height: 48px !important }

/* ---------- Tablet ---------- */
@media (min-width: 700px) {
  body.play .phead { max-width: 860px; margin: 0 auto } .uf5 { grid-template-columns: 80px minmax(0, 1fr); padding: 10px 16px 10px 10px } .uf5 .por { width: 80px; height: 80px } .uf5 .nm b { font-size: 26px } .uf5 .xp { height: 18px } .uf5 .xp em { line-height: 18px; font-size: 12px }
  .pgate5 { width: 260px; height: 260px } .pgate5 .gem { width: 136px; height: 136px } .pgate5 b { font-size: 36px }
  .pad4 .pk { min-height: 190px } .pad4 .pk .kl { font-size: 60px !important }
  body.play .ptabs { grid-template-columns: 1fr 120px 1fr !important; max-width: 860px; margin: 0 auto }
  body.qmode .pbody { height: calc(100dvh - 190px - 110px) !important }
}
body.play .ptabs .badge[hidden] { display: none !important }
/* Hinweise kompakt: höchstens zwei sichtbar, eine Zeile, schnell weg */
body.play .toasts { display: grid; gap: 6px; pointer-events: none } body.play .toasts .toast:nth-last-child(n+3) { display: none }
body.play .toast { padding: 8px 12px !important; font-size: 13.5px !important; line-height: 1.3 !important }
body.qmode .toasts { bottom: 100px !important }

/* ---------- Bosskampf am Handy: eigene Lebensleiste, Mechanik, Fähigkeiten als Aktionsleiste ---------- */
body.play .me-hp .rt-hp { position: relative; height: 22px !important; border-radius: 3px !important; overflow: hidden; background: #050404 !important; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(214 176 104 / .3) !important }
body.play .me-hp .rt-hp i { display: block; height: 100%; background: linear-gradient(0deg, rgb(47 138 44 / .5), rgb(47 138 44 / .5)), url(/assets/ui/fx/v4/fill-natur.png) 0 50% / auto 100% repeat-x !important; box-shadow: 1px 0 0 #c8ffb0 }
body.play .me-hp .rt-hp span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12.5px var(--u5) !important; color: #fff; text-shadow: 0 1px 1px #000 }
body.play .mech { border: 1px solid transparent !important; border-radius: 8px !important; padding: 7px 12px !important; font: 700 13.5px/1.35 var(--u5) !important; color: #ffd9a0 !important;
  background: linear-gradient(90deg, rgb(120 50 10 / .45), rgb(20 12 6 / .9)) padding-box, linear-gradient(90deg, #ff9a3c, #6e4f22) border-box !important }
body.play .sk-bar { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important }
body.play .sk-bar .kick { grid-column: 1 / -1; font: 800 11px var(--u5) !important; letter-spacing: .2em; text-transform: uppercase; color: #c9a45a !important }
body.play .skb { display: grid !important; grid-template-columns: 34px 1fr; align-items: center; gap: 7px; min-height: 52px; padding: 6px 7px !important; border: 1px solid transparent !important; border-radius: 8px !important; text-align: left;
  background: linear-gradient(180deg, #221a12, #0e0a07) padding-box, var(--rim5s) border-box !important; box-shadow: 0 4px 10px rgb(0 0 0 / .45) !important; color: var(--ink5) !important }
body.play .skb img, body.play .skb .wi { width: 34px !important; height: 34px !important; border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6a30 }
body.play .skb span { display: grid; min-width: 0 } body.play .skb b { font: 800 13px/1.1 var(--u5) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } body.play .skb small { display: none }
body.play .skb:not(:disabled) { background: linear-gradient(180deg, #3a2a12, #150e06) padding-box, var(--rim5) border-box !important; box-shadow: 0 0 14px rgb(255 205 80 / .25), 0 4px 10px rgb(0 0 0 / .45) !important }
body.play .skb:not(:disabled) img { box-shadow: 0 0 0 1px #000, 0 0 0 2px #f3e0a8, 0 0 10px rgb(255 205 80 / .5) }
body.play .skb:disabled, body.play .skb.used, body.play .skb.locked { opacity: .5; filter: grayscale(.8) }
body.play .pq-head { letter-spacing: .12em; white-space: nowrap } body.play .pq-head > * { flex: none } body.play .pq-look { flex: 0 1 auto !important; overflow: hidden; text-overflow: ellipsis }

/* ===================== v5.1 (27.09.2026) ===================== */
/* „Weiter“: sauberer Kreis aus CSS – feine Skala dreht langsam, ein Lichtkometen läuft um, Kristall in der Mitte */
.pgate5 { --rg: 232 196 106; width: 210px; height: 210px }
.pgate5 .rr { display: none !important }
.pgate5::before, .pgate5::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none }
.pgate5::before { background: repeating-conic-gradient(rgb(var(--rg) / .8) 0 .7deg, transparent .7deg 6deg);
  mask: radial-gradient(circle closest-side, transparent calc(100% - 17px), #000 calc(100% - 16.5px) calc(100% - 10px), transparent calc(100% - 9.5px)); animation: bg5spin 60s linear infinite }
.pgate5::after { background: conic-gradient(from 0deg, transparent 0 62%, rgb(255 236 180 / .95) 99.2%, #fff 100%), linear-gradient(rgb(var(--rg) / .5), rgb(var(--rg) / .5));
  mask: radial-gradient(circle closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px) calc(100% - .5px), transparent 100%); animation: bg5spin 3.6s linear infinite; filter: drop-shadow(0 0 4px rgb(var(--rg) / .8)) }
.pgate5 .gem { width: 108px; height: 108px; border-radius: 12px }
.pgate5.ok { --rg: 120 230 150; width: 160px; height: 160px } .pgate5.ok::after { animation-duration: 8s }
@media (min-width: 700px) { .pgate5 { width: 270px; height: 270px } .pgate5 .gem { width: 140px; height: 140px } }

/* Aktion: feste Reihenfolge – Antworten zuerst und groß, Infos darunter */
body.play .ppane[data-tab="act"]:not([hidden]) { display: flex; flex-direction: column; gap: 10px }
body.play .ppane[data-tab="act"] > * { order: 5 }
body.play .ppane[data-tab="act"] > .pq-head { order: 1 } body.play .ppane[data-tab="act"] > .pad4 { order: 2 } body.play .ppane[data-tab="act"] > .pad-help { order: 3 } body.play .ppane[data-tab="act"] > .plocked { order: 3 }
body.play .ppane[data-tab="act"] > .mech { order: 4 } body.play .ppane[data-tab="act"] > .inbox5 { order: 9 }
body.play .me-hp .rt-hp { display: none !important }   /* Leben steht auf dem Spielbildschirm */
body.play .me-hp:not(:has(.chip)) { display: none }
body.qmode .pbody { overflow-y: auto !important; overscroll-behavior: contain }
body.qmode .pad4 { flex: 1 0 auto !important; min-height: 46dvh }
body.qmode .pad4 .pk .kl { font-size: 46px !important }
/* Fähigkeiten im Antwortmodus: kompakte Icon-Leiste */
body.qmode .sk-bar { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)) !important; gap: 6px !important }
body.qmode .skb { grid-template-columns: 1fr; justify-items: center; min-height: 0; padding: 6px 4px 4px !important; gap: 3px }
body.qmode .skb img, body.qmode .skb .wi { width: 36px !important; height: 36px !important }
body.qmode .skb b { font-size: 10.5px !important; max-width: 60px }
body.qmode .skb b small { display: none }

/* Fenster ohne die alten Stein-/Holzränder */
body.play .so-menu, body.play .achv-head, body.play .cdoll, body.play .bagwin, body.play .ttree, body.play .cs-card, body.play .cr-info, body.play .ppane .wf {
  border: 1px solid transparent !important; border-image: none !important; border-radius: 10px !important; background: var(--pan5) padding-box, var(--rim5s) border-box !important }

/* ---------- Charakterbogen v5 ---------- */
.c5 { display: grid; gap: 10px }
.c5-head { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border: 1px solid transparent; border-radius: 10px; overflow: hidden;
  background: radial-gradient(ellipse 70% 120% at 0% 50%, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%), var(--pan5) padding-box, var(--rim5) border-box }
.c5-head .por { position: relative; width: 84px; height: 84px; border-radius: 50%; box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #c9a24a, 0 0 0 3.5px #000, 0 0 18px color-mix(in srgb, var(--c) 50%, transparent) }
.c5-head .face { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 28% }
.c5-head .cls { position: absolute; left: -4px; top: -4px; width: 28px; height: 28px; border-radius: 50%; background: #000; box-shadow: 0 0 0 1px #000, 0 0 0 2px #c9a24a }
.c5-head .lvl { position: absolute; left: -4px; bottom: -4px; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 13px; font: 800 13px var(--u5); color: #f6e7c0; background: radial-gradient(circle at 50% 35%, #3a2c18, #120d08); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c9a24a }
.c5-head > div:last-child { display: grid; gap: 2px; min-width: 0 }
.c5-head b { font: 400 26px/1.05 var(--d5); color: var(--c); text-shadow: 0 1px 0 #000 }
.c5-head span { font: 700 14.5px var(--u5); color: var(--ink5) } .c5-head span em { font-style: normal }
.c5-head i { font: italic 500 14px var(--u5); color: #d8c28a }
.c5-head .fac { margin-top: 4px; font: 800 10.5px var(--u5); letter-spacing: .18em; text-transform: uppercase; color: var(--mute5) } .c5-head .fac.horde { color: #ff7a6a } .c5-head .fac.alliance { color: #8ab8ff }
.c5-sec { display: flex; align-items: center; gap: 10px; margin-top: 4px; font: 800 11px var(--u5); letter-spacing: .22em; text-transform: uppercase; color: #c9a45a }
.c5-sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #d9b45e, transparent) }
.c5-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
.c5-st { display: grid; gap: 3px; padding: 8px 10px; border-radius: 8px; background: rgb(0 0 0 / .35); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .14) }
.c5-st span { font: 800 9.5px var(--u5); letter-spacing: .14em; text-transform: uppercase; color: var(--mute5) }
.c5-st b { font: 800 16px/1.15 var(--u5); color: var(--ink5); overflow-wrap: anywhere } .c5-st.dkp b { color: #9fd0ff } .c5-st.ap b { color: #ffd84a } .c5-st.tt b { font: italic 600 13px var(--u5); color: #d8c28a }
.c5-list { display: grid; gap: 6px }
.c5-ab { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 8px; background: rgb(0 0 0 / .32); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .14) }
.c5-ab .ab { width: 44px; height: 44px; padding: 0 !important; border-radius: 6px; background: #0a0806; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6a30 } .c5-ab .ab img { width: 100%; height: 100%; border-radius: 6px }
.c5-ab b { display: block; font: 800 14.5px var(--u5); color: #f2e2b8 } .c5-ab small { display: block; font: 500 12.5px/1.35 var(--u5); color: #bcae94 }
.c5-ab em { font: 800 10.5px var(--u5); font-style: normal; letter-spacing: .08em; color: #8f8068; white-space: nowrap } .c5-ab em.on { color: var(--gold5) }
.c5-ab.lock .ab img { filter: grayscale(1) brightness(.5) } .c5-ab.lock b { color: #8f8068 }
.c5-ab.empty .ab { background: repeating-linear-gradient(45deg, #15100b 0 6px, #0d0a07 6px 12px) }
.c5-buffs { display: flex; flex-wrap: wrap; gap: 6px } .c5-buffs span { padding: 4px 10px; border-radius: 12px; font: 700 12.5px var(--u5); color: #bfe8ff; background: rgb(40 90 130 / .35); box-shadow: inset 0 0 0 1px rgb(120 190 240 / .4) }
.c5 .csets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }

/* ---------- Talentbaum mit dem Hintergrund der Klasse (Classic-Talentfenster, drei Bäume untereinander) ---------- */
body.play .ttree.t5 { background: linear-gradient(180deg, rgb(8 6 4 / .35), rgb(8 6 4 / .55)) padding-box, var(--tbg) top center / 296px auto no-repeat padding-box, #050403 var(--rim5s) border-box !important; padding: 14px 8px 12px !important }
body.play .ttree.t5::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #050403, transparent calc(50% - 148px + 30px), transparent calc(50% + 148px - 30px), #050403) }
body.play .ttree.t5 > * { position: relative }
body.play .ttree.t5 .tt-head { padding: 0 6px } body.play .ttree.t5 .tt-head b { font: 400 24px var(--d5) !important; text-shadow: 0 2px 4px #000 }
body.play .ttree.t5 .tt-tier { font: 800 11px var(--u5); letter-spacing: .2em; color: #f3e0a8; text-shadow: 0 1px 3px #000, 0 0 8px #000 }
body.play .ttree.t5 .tn b { text-shadow: 0 1px 2px #000, 0 0 6px #000, 0 0 10px #000 }
body.play .ttree.t5 .tt-note { position: relative; padding: 8px 10px; border-radius: 8px; background: rgb(0 0 0 / .6) }

/* ---------- Rucksack ---------- */
.b5 { display: grid; gap: 10px; padding: 12px !important }
.b5-head { display: flex; align-items: center; gap: 10px } .b5-head .ab { width: 34px; height: 34px; padding: 0 !important } .b5-head .ab img { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 1px #000, 0 0 0 2px #c9a24a }
.b5-head b { font: 400 21px var(--d5); color: var(--gold5) } .b5-head span { margin-left: auto; font: 800 12px var(--u5); color: var(--mute5); letter-spacing: .1em }
.b5-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 8px; border-radius: 8px; background: #0a0806; box-shadow: inset 0 0 0 1px #000, inset 0 2px 10px #000 }
.b5-slot { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; background: radial-gradient(circle at 50% 40%, #221a13, #0f0b08 75%); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgb(110 84 51 / .45), inset 0 3px 8px #000 }
.b5-slot.has { box-shadow: inset 0 0 0 1px #000, 0 0 0 1.5px var(--q), 0 0 10px color-mix(in srgb, var(--q) 40%, transparent) }
.b5-slot.has img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); max-width: 64px; max-height: 64px; margin: auto; border-radius: 4px }
.b5-slot.sup { box-shadow: inset 0 0 0 1px #000, 0 0 0 1.5px #d8d0bc }
.b5-slot:active { filter: brightness(1.3) }
.b5-money { display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 6px 10px; border-radius: 6px; background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .2); font: 800 14px var(--u5) } .b5-money .dkp { color: #9fd0ff; margin-right: auto }
.b5-note { margin: 0; font: 500 13px/1.4 var(--u5); color: var(--mute5) }
body.play .bagwin .tt-tip:not(:empty) { padding: 10px 12px; border-radius: 8px; background: rgb(0 0 0 / .7); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .35) }

/* ---------- Schlachtzug-Liste: Portrait nicht über dem Namen ---------- */
body.play .prank .r { display: grid !important; grid-template-columns: 22px 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px 8px 8px !important }
body.play .prank .r .pu-por { position: relative; width: 52px !important; height: 52px !important; margin: 0 !important }
body.play .prank .r .nm2 { min-width: 0 } body.play .prank .r .n { font: 800 16px var(--u5); color: var(--gold5); text-align: center }
body.play .prank .r .insp { grid-column: 1 / -1 }
/* Brachland: Posten „glaub ich“ / „SAFE!“ unter den Kristallen */
body.play .bc-post { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px }
body.play .bcp { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 9px; min-height: 64px; padding: 8px 10px; text-align: left; border: 1px solid transparent; border-radius: 10px; color: #f3ead6; cursor: pointer;
  background: linear-gradient(180deg, #2c2016, #120c08) padding-box, linear-gradient(180deg, #f3e0a8, #b8914a 38%, #6e4f22 62%, #d6b56a) border-box; box-shadow: 0 6px 14px #000a; font: inherit }
body.play .bcp .ab { grid-row: 1 / 3; width: 40px; height: 40px; padding: 0 } body.play .bcp .ab img { width: 100%; height: 100%; border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6a30 }
body.play .bcp b { font: 400 17px 'Friz', Georgia, serif; color: #ffe6a0 } body.play .bcp small { font-size: 12px; color: #c9b88e }
body.play .bcp.safe { background: linear-gradient(180deg, #5a1c10, #240806) padding-box, linear-gradient(180deg, #ffe7a0, #e0902a 40%, #7a3a08 62%, #ffd46a) border-box; box-shadow: 0 6px 14px #000a, 0 0 18px rgb(255 150 50 / .35); animation: bcsafe 1.8s ease-in-out infinite }
body.play .bcp.safe b { color: #fff2c0 } @keyframes bcsafe { 50% { box-shadow: 0 6px 14px #000a, 0 0 28px rgb(255 170 60 / .6) } }
body.play .bcp:active { transform: scale(.97) }

/* ===== Markt am Handy (v5) ===== */
body.play .gb5-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 10px }
body.play .gb5-top > div { display: grid; justify-items: center; padding: 7px 4px; border-radius: 9px; background: linear-gradient(180deg, #221a12, #0e0a07) padding-box, linear-gradient(180deg, #f3e0a8, #8a6a30) border-box; border: 1px solid transparent }
body.play .gb5-top small { font: 800 9.5px 'Alegreya Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #b9a787 } body.play .gb5-top b { font: 800 15px 'Alegreya Sans', sans-serif; color: #fff2c8; white-space: nowrap }
body.play .gb5-top .t b { font: 400 20px 'Friz', Georgia, serif; color: #ffd98a } body.play .gb5-top .j { background: linear-gradient(180deg, #4a1010, #1a0505) padding-box, linear-gradient(180deg, #ffe7a0, #b8781a) border-box } body.play .gb5-top .j b { color: #ffe27a }
body.play .gb5-top .money, body.play .gb5-body .money, body.play .gb5-fin .money { white-space: nowrap }
body.play .gb5-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 12px }
body.play .gb5-nav button { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border: 1px solid transparent; border-radius: 9px; background: linear-gradient(180deg, #1c150e, #0c0906) padding-box, linear-gradient(180deg, #6a5230, #3a2a14) border-box; color: #cdbb94; font: 700 10.5px 'Alegreya Sans', sans-serif; cursor: pointer }
body.play .gb5-nav i { width: 38px; height: 38px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6a30 } body.play .gb5-nav i img { width: 100%; height: 100% }
body.play .gb5-nav .on { background: linear-gradient(180deg, #4e3814, #1e1406) padding-box, linear-gradient(180deg, #fff0b8, #d8a640) border-box; color: #ffe6a0; box-shadow: 0 0 14px rgb(255 200 90 / .35) } body.play .gb5-nav .on i { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd98a }
body.play .gb5-body { display: grid; gap: 10px }
body.play .gb5-hint { display: grid; gap: 4px; padding: 14px; border-radius: 10px; text-align: center; background: rgb(0 0 0 / .35); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .25) } body.play .gb5-hint b { font: 400 18px 'Friz', Georgia, serif; color: #ffd98a } body.play .gb5-hint span { font-size: 14px; color: #d8ccb0 }
/* Bandit */
body.play .gb5-reels { display: flex; justify-content: center; gap: 8px; padding: 12px; border-radius: 12px; background: linear-gradient(180deg, #0a0806, #1a1410 50%, #0a0806); box-shadow: inset 0 0 0 2px #000, 0 0 0 2px #8a6a30, inset 0 0 24px #000 }
body.play .gb5-reels i { width: 62px; height: 62px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 2px #3a2a14, 0 4px 10px #000 } body.play .gb5-reels i img { width: 100%; height: 100% }
body.play .gb5-reels.win { box-shadow: inset 0 0 0 2px #000, 0 0 0 2px #ffd84a, 0 0 22px rgb(255 216 74 / .5) } body.play .gb5-reels.lose { box-shadow: inset 0 0 0 2px #000, 0 0 0 2px #ff5a3a }
body.play .gb5-lbl { margin: 0; text-align: center; font: 700 14px 'Alegreya Sans', sans-serif; color: #e6dcc4 }
body.play .gb5-lever { display: grid; justify-items: center; gap: 2px; justify-self: center; width: 170px; height: 170px; align-content: center; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: radial-gradient(circle at 35% 28%, #ffb0a0, #e02a1a 42%, #6a0a04 80%); box-shadow: 0 0 0 4px #1a0402, 0 0 0 7px #d8b04a, 0 0 0 9px #3a2208, 0 12px 26px #000c, inset 0 -10px 20px rgb(0 0 0 / .35) }
body.play .gb5-lever i { display: none } body.play .gb5-lever b { font: 400 21px 'Friz', Georgia, serif; text-shadow: 0 2px 0 #4a0402 } body.play .gb5-lever small { font: 700 13px 'Alegreya Sans', sans-serif; color: #ffe0c8 }
body.play .gb5-lever:active { transform: scale(.95); box-shadow: 0 0 0 4px #1a0402, 0 0 0 7px #ffe27a, 0 0 0 9px #3a2208, 0 4px 10px #000c, inset 0 10px 20px rgb(0 0 0 / .4) }
body.play .gb5-lever:disabled { filter: grayscale(.8) brightness(.6) }
/* Schätzautomat */
body.play .gb5-screen { padding: 14px; border-radius: 10px; background: radial-gradient(ellipse at 50% 30%, #0e2a1a, #041008); box-shadow: inset 0 0 0 2px #000, 0 0 0 2px #b8914a; font: 600 16px/1.4 'Alegreya Sans', sans-serif; color: #9fffb0; text-shadow: 0 0 8px rgb(80 255 120 / .4) }
body.play .gb5-l { font: 800 11px 'Alegreya Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #c9a45a }
body.play .gb5-in { width: 100%; box-sizing: border-box; padding: 14px; border-radius: 10px; border: 1px solid #8a6a30; background: #0a0806; color: #fff2c8; font: 800 22px 'Alegreya Sans', sans-serif; text-align: center }
body.play .gb5-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 0 } body.play .gb5-rules span { padding: 3px 9px; border-radius: 99px; background: rgb(0 0 0 / .45); font-size: 12px; color: #d8ccb0 } body.play .gb5-rules b { color: #ffd98a }
body.play .gb5-stakes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
body.play .gb5-stakes button { display: grid; gap: 1px; padding: 10px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font: 800 16px 'Alegreya Sans', sans-serif; color: #fff2c8; background: linear-gradient(180deg, #2c2016, #120c08) padding-box, linear-gradient(180deg, #f3e0a8, #b8914a 38%, #6e4f22 62%, #d6b56a) border-box }
body.play .gb5-stakes button small { font: 700 10px 'Alegreya Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #b9a787 } body.play .gb5-stakes button:last-child { background: linear-gradient(180deg, #5a1c10, #240806) padding-box, linear-gradient(180deg, #ffe7a0, #e0902a 40%, #7a3a08 62%, #ffd46a) border-box }
body.play .gb5-res { display: grid; gap: 4px; padding: 14px; border-radius: 10px; text-align: center; background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 1px #8a6a30 } body.play .gb5-res b { font: 400 22px 'Friz', Georgia, serif; color: #ffd98a } body.play .gb5-res.win b { color: #7fe08f } body.play .gb5-res.lose b { color: #ff8a6a } body.play .gb5-res span { font-weight: 700; color: #f3ead6 } body.play .gb5-res small { color: #c9b88e }
/* Buttons */
body.play .gb5-btn { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 12px 14px; border: 1px solid transparent; border-radius: 11px; cursor: pointer; color: #fff2c8; background: linear-gradient(180deg, #2c2016, #120c08) padding-box, linear-gradient(180deg, #f3e0a8, #b8914a 38%, #6e4f22 62%, #d6b56a) border-box; box-shadow: 0 6px 14px #000a }
body.play .gb5-btn:not(:has(i)) { grid-template-columns: 1fr; text-align: center; font: 800 15px 'Alegreya Sans', sans-serif }
body.play .gb5-btn i { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6a30 } body.play .gb5-btn i img { width: 100%; height: 100% }
body.play .gb5-btn b { font: 400 18px 'Friz', Georgia, serif; color: #ffe6a0 } body.play .gb5-btn small { font-size: 13px; color: #c9b88e }
body.play .gb5-btn.loot { background: linear-gradient(180deg, #3a1a5a, #140824) padding-box, linear-gradient(180deg, #f0d8ff, #a86ae8 40%, #4a1a7a 62%, #e0b8ff) border-box; box-shadow: 0 6px 14px #000a, 0 0 20px rgb(160 90 230 / .35) }
body.play .gb5-btn.alt { background: linear-gradient(180deg, #1c150e, #0c0906) padding-box, linear-gradient(180deg, #6a5230, #3a2a14) border-box; color: #cdbb94 }
body.play .gb5-btn:disabled, body.play .gb5-stakes button:disabled, body.play .gb5-shop button:disabled { opacity: .45 }
/* Kiste */
body.play .gb5-loot { --qc: #fff; display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 11px; background: radial-gradient(ellipse at 0 50%, color-mix(in srgb, var(--qc) 22%, transparent), transparent 70%), #0c0a12; box-shadow: inset 0 0 0 2px var(--qc), 0 0 18px color-mix(in srgb, var(--qc) 35%, transparent) }
body.play .gb5-loot i { width: 54px; height: 54px; flex: none; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 2px var(--qc) } body.play .gb5-loot i img { width: 100%; height: 100% }
body.play .gb5-loot b { display: block; font: 700 17px 'Alegreya Sans', sans-serif; color: var(--qc) } body.play .gb5-loot span { font-size: 14px; color: #ffd100 }
body.play .gb5-loot.q-p { --qc: #9d9d9d } body.play .gb5-loot.q-u { --qc: #1eff00 } body.play .gb5-loot.q-r { --qc: #3a9cff } body.play .gb5-loot.q-e { --qc: #b56dff } body.play .gb5-loot.q-l { --qc: #ff8000 }
/* Laden */
body.play .gb5-shop { display: grid; gap: 8px } body.play .gb5-shop button { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 9px 11px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; color: #f3ead6; background: linear-gradient(180deg, #221a12, #0e0a07) padding-box, linear-gradient(180deg, #8a6a30, #3a2a14) border-box }
body.play .gb5-shop i { width: 46px; height: 46px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 2px #3a9cff } body.play .gb5-shop i img { width: 100%; height: 100% }
body.play .gb5-shop b { display: block; font: 700 15px 'Alegreya Sans', sans-serif; color: #7fb8ff } body.play .gb5-shop small { font-size: 12px; color: #1eff00 } body.play .gb5-shop em { font-style: normal; font-weight: 800; color: #fff; white-space: nowrap }
body.play .gb5-bag { display: flex; align-items: center; gap: 5px; flex-wrap: wrap } body.play .gb5-bag small { font: 800 10px 'Alegreya Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #c9a45a; margin-right: 4px } body.play .gb5-bag i { width: 34px; height: 34px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px #8a6a30 } body.play .gb5-bag i img { width: 100%; height: 100% }
/* Bank */
body.play .gb5-bank { display: grid; grid-template-columns: 1fr 1fr; gap: 8px } body.play .gb5-bank > div { display: grid; justify-items: center; padding: 12px; border-radius: 10px; background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 1px #8a6a30 } body.play .gb5-bank small { font: 800 10px 'Alegreya Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #b9a787 } body.play .gb5-bank b { font: 800 18px 'Alegreya Sans', sans-serif; color: #fff2c8 } body.play .gb5-bank .debt b { color: #ff8a6a }
/* Fertig */
body.play .gb5-fin { display: grid; justify-items: center; gap: 2px; width: 100%; margin-top: 16px; padding: 12px; border: 1px dashed #8a6a30; border-radius: 11px; background: rgb(0 0 0 / .3); color: #e6dcc4; cursor: pointer } body.play .gb5-fin b { font: 400 17px 'Friz', Georgia, serif; color: #ffd98a } body.play .gb5-fin small { font-size: 12px; color: #b9a787 }
body.play .gb5-done { display: grid; justify-items: center; gap: 8px; padding: 22px 16px; border-radius: 12px; text-align: center; background: radial-gradient(ellipse at 50% 0, rgb(120 220 140 / .15), transparent 70%), rgb(0 0 0 / .4); box-shadow: inset 0 0 0 1px #7fe08f }
body.play .gb5-done img { width: 54px; border-radius: 8px; box-shadow: 0 0 0 2px #7fe08f } body.play .gb5-done b { font: 400 22px 'Friz', Georgia, serif; color: #9fffb0 } body.play .gb5-done span { font-size: 14px; color: #d8ccb0 }

/* ---------- 5.4: Rundenkampf-Planung (cb5), Kartenabstimmung (mp5), Talentbaum (t5v), Ausrüstung (g5) ---------- */
.cb5-me { display: grid; gap: 6px; margin: 4px 0 8px }
.cb5-me .rt-hp { position: relative; height: 22px; border-radius: 4px; overflow: hidden; background: #140606; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(214 176 104 / .25) }
.cb5-me .rt-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #4ad06a, #1f7a36); transition: width .5s }
.cb5-me.dead .rt-hp i { background: #444 } .cb5-me .rt-hp span { position: relative; display: block; text-align: center; font: 800 12.5px/22px var(--u5); color: #fff; text-shadow: 0 1px 2px #000 }
.cb5-auras { display: flex; flex-wrap: wrap; gap: 5px } .cb5-auras span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font: 700 11.5px var(--u5); background: rgb(47 147 180 / .22); color: #bfe6f5 }
.cb5-auras span.deb { background: rgb(160 60 200 / .25); color: #e6c8ff } .cb5-auras img { width: 14px; height: 14px; border-radius: 3px }
.cb5-ann { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: radial-gradient(ellipse 80% 120% at 0 50%, rgb(200 40 30 / .25), transparent 70%), var(--pan5) padding-box, var(--rim5) border-box; border: 1px solid transparent }
.cb5-ann .ab { width: 52px; height: 52px; padding: 0 !important; border-radius: 8px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #b0302a } .cb5-ann .ab img { width: 100%; height: 100%; border-radius: 8px }
.cb5-ann small { display: block; font: 800 10.5px var(--u5); letter-spacing: .16em; text-transform: uppercase; color: #e59a86 } .cb5-ann b { display: block; font: 400 19px/1.15 var(--d5); color: #ffe0c8 } .cb5-ann b em { font-style: normal; font-weight: 800 }
.cb5-ann span { display: block; font: 500 13px/1.3 var(--u5); color: #d8c7aa }
.cb5-pre { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 } .cb5-pre span { padding: 3px 10px; border-radius: 12px; font: 800 11.5px var(--u5); background: rgb(0 0 0 / .45); color: var(--gold5); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .3) }
.cb5-pre .r-c { color: #e8e8e8 } .cb5-pre .r-u { color: #3fd46a } .cb5-pre .r-r { color: #4aa6ff } .cb5-pre .r-e { color: #c07bff } .cb5-pre .bad { color: #ff6a4a }
.cb5-sec { margin: 12px 2px 6px; font: 800 11px var(--u5); letter-spacing: .18em; text-transform: uppercase; color: #cdb88a }
.cb5-list { display: grid; gap: 6px } .cb5-list.items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
.cb5-ab { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; min-height: 58px; padding: 6px 10px 6px 6px; text-align: left; border-radius: 9px; border: 1px solid transparent; color: inherit; cursor: pointer;
  background: var(--pan5) padding-box, var(--rim5s) border-box; transition: transform .12s, box-shadow .2s }
.cb5-ab .ab { width: 46px; height: 46px; padding: 0 !important; border-radius: 7px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #7a5c24 } .cb5-ab .ab img { width: 100%; height: 100%; border-radius: 7px }
.cb5-ab b { display: block; font: 800 14.5px var(--u5); color: #f2e2b8 } .cb5-ab small { display: block; font: 500 12px/1.3 var(--u5); color: #b7a88c }
.cb5-ab.on { background: radial-gradient(ellipse 90% 140% at 0 50%, rgb(47 147 180 / .35), transparent 70%), var(--pan5) padding-box, var(--rim5) border-box; box-shadow: 0 0 16px rgb(47 147 180 / .45) } .cb5-ab.on b { color: #fff }
.cb5-ab:disabled { opacity: .42; filter: grayscale(.7) } .cb5-ab:active:not(:disabled) { transform: scale(.98) }
.cb5-ab.sm { min-height: 50px; grid-template-columns: 36px minmax(0, 1fr) } .cb5-ab.sm .ab { width: 36px; height: 36px }
.cb5-go { margin-top: 14px; width: 100% } .cb5-warn { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: rgb(160 60 200 / .2); color: #e6c8ff; font: 700 13px var(--u5) }
.cb5-done { display: grid; gap: 6px; justify-items: center; margin-top: 12px; padding: 14px; border-radius: 10px; text-align: center; background: var(--pan5) padding-box, var(--rim5) border-box; border: 1px solid transparent }
.cb5-done b { font: 400 20px var(--d5); color: #7dff9a } .cb5-done span { font: 700 14px var(--u5); color: #f2e2b8 } .cb5-done em { font: 500 12.5px var(--u5); color: var(--mute5); font-style: normal }
.cb5-pick { display: grid; gap: 6px; margin-top: 10px } .cb5-pick .pb small { display: block; font-size: 12px; color: #b7a88c }
/* Karte */
.mp5-head { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 2px 6px } .mp5-head b { font: 400 20px var(--d5); color: var(--gold5) } .mp5-head span { font: 700 12.5px var(--u5); color: var(--mute5) }
.mp5-mats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px } .mp5-mats span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border-radius: 12px; background: rgb(255 128 0 / .15); color: #ffc27a; font: 700 11.5px var(--u5) } .mp5-mats img { width: 20px; height: 20px; border-radius: 10px }
.mp5-sec { margin: 12px 2px 6px; font: 800 11px var(--u5); letter-spacing: .18em; text-transform: uppercase; color: #cdb88a }
.mp5-list { display: grid; gap: 6px }
.mp5-n { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 58px; padding: 6px 10px 6px 6px; text-align: left; border-radius: 9px; border: 1px solid transparent; color: inherit; background: var(--pan5) padding-box, var(--rim5s) border-box }
.mp5-n .ab { width: 46px; height: 46px; padding: 0 !important; border-radius: 50%; box-shadow: 0 0 0 1px #000, 0 0 0 2px #7a5c24 } .mp5-n .ab img { width: 100%; height: 100%; border-radius: 50% }
.mp5-n b { display: block; font: 800 14.5px var(--u5); color: #f2e2b8 } .mp5-n small { display: block; font: 500 12px/1.3 var(--u5); color: #b7a88c }
.mp5-n em { display: flex; gap: 3px } .mp5-n em i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px #000 }
.mp5-n.on { background: radial-gradient(ellipse 90% 140% at 0 50%, rgb(47 147 180 / .38), transparent 70%), var(--pan5) padding-box, var(--rim5) border-box; box-shadow: 0 0 16px rgb(47 147 180 / .45) }
.mp5-n.gold { background: radial-gradient(ellipse 90% 140% at 0 50%, rgb(255 128 0 / .3), transparent 70%), var(--pan5) padding-box, var(--rim5) border-box } .mp5-n.gold b { color: #ffb24a }
.mp5-n.lock { opacity: .5; filter: grayscale(.8) } .mp5-n.done { opacity: .45 } .mp5-n.done b { text-decoration: line-through }
/* Talentbaum 5.4 */
.t5v .t5-auto { width: 100%; margin: 6px 0 10px }
.t5v .t5-row { position: relative; margin: 6px 0; padding: 8px 6px 6px; border-radius: 8px; background: rgb(0 0 0 / .38); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .14) }
.t5v .t5-row.lock { opacity: .55 } .t5v .t5-gate { display: block; margin: 0 4px 6px; font: 800 10.5px var(--u5); letter-spacing: .16em; text-transform: uppercase; color: #bfa877 }
.t5v .t5-nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px }
.t5v .t5-n { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; align-items: start; padding: 6px; border-radius: 8px; background: rgb(0 0 0 / .3) }
.t5v .t5-n .t5-ic { grid-row: span 2; position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 7px; background: #000; box-shadow: 0 0 0 1px #000, 0 0 0 2px #555; filter: grayscale(1) brightness(.7) }
.t5v .t5-n .t5-ic img { width: 100%; height: 100%; border-radius: 7px } .t5v .t5-n .rk { position: absolute; right: -6px; bottom: -6px; padding: 0 4px; border-radius: 6px; background: #000; font: 800 11px/16px var(--u5); color: #9f9; box-shadow: 0 0 0 1px #4a4 }
.t5v .t5-n.on .t5-ic, .t5v .t5-n.can .t5-ic { filter: none; box-shadow: 0 0 0 1px #000, 0 0 0 2px #3fbf4a } .t5v .t5-n.max .t5-ic { box-shadow: 0 0 0 1px #000, 0 0 0 2px #e8c46a } .t5v .t5-n.max .rk { color: #ffd76a; box-shadow: 0 0 0 1px #c9a24a }
.t5v .t5-n.can .t5-ic { animation: t5pulse 1.6s infinite } @keyframes t5pulse { 50% { box-shadow: 0 0 0 1px #000, 0 0 0 2px #3fbf4a, 0 0 14px #3fbf4a } }
.t5v .t5-n b { font: 800 12.5px/1.2 var(--u5); color: #f2e2b8 } .t5v .t5-n small { font: 500 11px/1.3 var(--u5); color: #aa9c80 }
.t5v .t5-minus { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #5a1a14; color: #fff; font: 800 15px/24px var(--u5) }
/* Ausrüstung */
.g5 .g5-grid { display: grid; gap: 6px; margin-bottom: 10px }
.g5-slot, .g5-inv { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 8px 6px 6px; border-radius: 8px; background: rgb(0 0 0 / .35); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q) 35%, transparent) }
.g5-slot .ab, .g5-inv .ab { width: 44px; height: 44px; padding: 0 !important; border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--q) } .g5-slot .ab img, .g5-inv .ab img { width: 100%; height: 100%; border-radius: 6px }
.g5-slot:not(.has) .ab img { opacity: .25 } .g5-slot small { display: block; font: 800 10px var(--u5); letter-spacing: .14em; text-transform: uppercase; color: #9f8f70 }
.g5-slot b { display: block; font: 800 13.5px var(--u5); color: var(--q) } .g5-slot em, .g5-inv small { display: block; font: 500 11.5px/1.3 var(--u5); font-style: normal; color: #b7a88c } .g5-inv b { display: block; font: 800 13.5px var(--u5) }
.g5-cons { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px } .g5-cons span { position: relative } .g5-cons img { width: 40px; height: 40px; border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #7a5c24 }
.g5-cons b { position: absolute; right: -2px; bottom: -2px; padding: 0 3px; border-radius: 4px; background: #000; font: 800 11px var(--u5); color: #fff }
.gb5-sec { margin: 12px 2px 6px; font: 800 11px var(--u5); letter-spacing: .18em; text-transform: uppercase; color: #cdb88a }
/* Preise im Baron-Laden: Münzen klein halten (die Icon-Regel .gb5-shop i gilt sonst auch für Münzen) */
body.play .gb5-shop em .money { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap }
body.play .gb5-shop em .money i { width: 13px; height: 13px; border-radius: 50%; box-shadow: none; overflow: visible; display: inline-block; vertical-align: -2px }
body.play .gb5-shop small { color: #b7a88c }

/* ---------- 5.5: WoW-Tooltip, Charakterfenster, Talentbaum, Rucksack, Karte am Handy ---------- */
.wtt { position: relative; display: grid; gap: 2px; margin: 10px 0; padding: 10px 12px; border-radius: 6px; background: linear-gradient(180deg, rgb(8 10 30 / .96), rgb(4 5 16 / .97)); box-shadow: 0 0 0 1px #000, 0 0 0 2px #8f8f8f, inset 0 0 0 1px rgb(255 255 255 / .06), 0 10px 26px #000c; font: 500 14px/1.35 var(--u5); color: #fff }
.wtt > b { font: 700 16px/1.25 var(--u5) } .wtt span { display: block } .wtt .w { color: #fff } .wtt .g { color: #1eff00 } .wtt .y { color: #ffd100 } .wtt .r { color: #ff3030 } .wtt .o { color: #ff8000 } .wtt .d { color: #808080 } .wtt small { font-size: 12px; opacity: .85 }
.wtt-b { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px } .wtt-b .pb { flex: 1; min-width: 110px }
.wtt-cmp { margin-top: -4px } .wtt-cmp small { display: block; margin: 0 2px; font: 800 10.5px var(--u5); letter-spacing: .14em; text-transform: uppercase; color: #9aa }
/* Charakterfenster */
.pd-head { text-align: center; margin: 2px 0 8px } .pd-head b { display: block; font: 400 24px var(--d5); color: var(--c) } .pd-head span { font: 700 13px var(--u5); color: #e8d8b0 } .pd-head i { display: block; font: italic 500 12.5px var(--u5); color: #b9a787 }
.pd-doll { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 8px; align-items: stretch; padding: 10px; border-radius: 10px; background: radial-gradient(ellipse 60% 70% at 50% 45%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), url(/assets/ui/paperdoll/ttbg.png), #0a0806; box-shadow: 0 0 0 1px #000, 0 0 0 2px #6e4f22, inset 0 0 30px #000 }
.pd-col { display: grid; gap: 10px; align-content: center }
.pd-slot { position: relative; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 6px; background: #000; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5a5a5a, inset 0 0 8px #000 }
.pd-slot img { width: 100%; height: 100%; border-radius: 6px } .pd-slot:not(.has) img { opacity: .8 }
.pd-slot.has { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--q), 0 0 12px color-mix(in srgb, var(--q) 45%, transparent) } .pd-slot.on { outline: 2px solid #ffd100; outline-offset: 3px }
.pd-fig { position: relative; display: grid; place-items: center } .pd-fig img { width: 100%; max-width: 190px; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; border-radius: 8px; -webkit-mask: radial-gradient(ellipse 70% 75% at 50% 45%, #000 60%, transparent 100%); mask: radial-gradient(ellipse 70% 75% at 50% 45%, #000 60%, transparent 100%) }
.pd-fig .gs { position: absolute; bottom: 4px; padding: 2px 10px; border-radius: 10px; background: rgb(0 0 0 / .7); font: 800 12px var(--u5); color: #ffd76a; box-shadow: inset 0 0 0 1px #8a6a30 }
.pd-hint { text-align: center; margin: 6px 0 0; font: 600 12px var(--u5); color: #8f8068 }
/* Talentbaum */
.tt6 { border-radius: 10px; overflow: hidden; background: #050403; box-shadow: 0 0 0 1px #000, 0 0 0 2px #6e4f22 }
.tt6-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(180deg, #2a1d0e, #120c06); box-shadow: inset 0 -1px 0 #6e4f22 } .tt6-head b { font: 400 20px var(--d5) } .tt6-head span { flex: 1; font: 700 13px var(--u5); color: #d8c7aa } .tt6-head em { font-style: normal; color: #7dff9a } .tt6-head .pb { min-height: 34px }
.tt6-body { overflow-x: auto; background: linear-gradient(rgb(0 0 0 / .35), rgb(0 0 0 / .55)), var(--tbg) center / cover no-repeat } .tt6-tree { position: relative; margin: 0 auto }
.tt6-svg { position: absolute; inset: 0; pointer-events: none }
.tt6-svg .br { fill: none; stroke: #5a5a5a; stroke-width: 7; stroke-linejoin: round; filter: drop-shadow(0 1px 1px #000) } .tt6-svg .br.on { stroke: #d9b31f }
.tt6-svg .ah { fill: #5a5a5a; stroke: #111; stroke-width: 1.5 } .tt6-svg .ah.on { fill: #ffd61a }
.tt6-svg .gate { font: 800 11px 'Alegreya Sans', sans-serif; fill: #6a5a40 } .tt6-svg .gate.ok { fill: #7dff9a } .tt6-svg .oder { font: italic 700 12px 'Alegreya Sans', sans-serif; fill: #d8c7aa; text-anchor: middle }
.tn6 { position: absolute; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 4px; background: #000; box-shadow: 0 0 0 1px #000, 0 0 0 2px #444 }
.tn6 img { width: 100%; height: 100%; border-radius: 4px; filter: grayscale(1) brightness(.55) }
.tn6 .rk { position: absolute; right: -8px; bottom: -8px; min-width: 26px; padding: 0 3px; border-radius: 4px; background: #000; font: 800 11.5px/17px var(--u5); color: #aaa; box-shadow: 0 0 0 1px #555 }
.tn6.open img { filter: grayscale(.6) brightness(.8) }
.tn6.can { box-shadow: 0 0 0 1px #000, 0 0 0 2px #1eff00, 0 0 10px rgb(30 255 0 / .45) } .tn6.can img { filter: none } .tn6.can .rk { color: #1eff00; box-shadow: 0 0 0 1px #1eff00 }
.tn6.on { box-shadow: 0 0 0 1px #000, 0 0 0 2px #1eff00 } .tn6.on img { filter: none } .tn6.on .rk { color: #1eff00; box-shadow: 0 0 0 1px #1eff00 }
.tn6.max { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd100, 0 0 12px rgb(255 209 0 / .45) } .tn6.max img { filter: none } .tn6.max .rk { color: #ffd100; box-shadow: 0 0 0 1px #ffd100 }
.tn6.sel { outline: 2px solid #fff; outline-offset: 3px }
/* Rucksack */
.bg6 { padding: 10px; border-radius: 10px; background: linear-gradient(180deg, #2a1d0e, #140e08); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6e4f22 }
.bg6-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px } .bg6-head img { width: 32px; height: 32px; border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6a30 } .bg6-head b { flex: 1; font: 400 18px var(--d5); color: #ffd76a } .bg6-head span { font: 700 12px var(--u5); color: #b9a787 }
.bg6-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px }
.bg6-slot { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; background: url(/assets/ui/paperdoll/bagslot.png) center / 100% 100%, #000; box-shadow: 0 0 0 1px #000 }
.bg6-slot.has { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--q, #9d9d9d) } .bg6-slot.cons { --q: #bbb } .bg6-slot img { width: 100%; height: 100%; border-radius: 6px } .bg6-slot.on { outline: 2px solid #ffd100; outline-offset: 2px }
.bg6-slot b { position: absolute; right: 3px; bottom: 1px; font: 800 13px var(--u5); color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000 }
/* Karte am Handy */
.mp6-head { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 2px 6px } .mp6-head b { font: 400 20px var(--d5); color: var(--gold5) } .mp6-head span { font: 700 12.5px var(--u5); color: var(--mute5) }
.mp6-maps { display: grid; gap: 6px }
.mp6-map { position: relative; aspect-ratio: 1.3; border-radius: 10px; overflow: hidden; background: #0b0805; box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #8a6a30, 0 0 0 3.5px #000, 0 8px 20px #000a }
.mp6-map > .bg { position: absolute; max-width: none; transition: left .45s cubic-bezier(.3, .8, .3, 1), top .45s cubic-bezier(.3, .8, .3, 1), width .45s cubic-bezier(.3, .8, .3, 1), height .45s cubic-bezier(.3, .8, .3, 1) }
.mp6-map > .vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 55%, rgb(0 0 0 / .55)) }
.mp6-lvn { position: absolute; left: 0; top: 8px; z-index: 3; padding: 2px 12px 2px 9px; border-left: 2px solid #c9a24a; background: linear-gradient(90deg, rgb(0 0 0 / .8), transparent); font: 400 13px var(--d5); color: #ffe6a8 }
.mp6-lead { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none } .mp6-lead line { stroke: #f3d890; stroke-width: 1.2; stroke-dasharray: 3 2.5; vector-effect: non-scaling-stroke } .mp6-lead circle { fill: #ffd66a; stroke: #000; stroke-width: 1 }
.mp6-dot, .mp6-cl { position: absolute; translate: -50% -50%; padding: 0; border: 0; transition: left .45s cubic-bezier(.3, .8, .3, 1), top .45s cubic-bezier(.3, .8, .3, 1) }
.mp6-dot { width: 30px; height: 30px; border-radius: 50%; padding: 2.5px; background: conic-gradient(from 210deg, #6e4f22, #f3e0a8 12%, #b8914a 25%, #5a3f18 40%, #d6b56a 55%, #fff0c0 62%, #8a6a30 75%, #6e4f22); box-shadow: 0 0 0 1px #000, 0 2px 6px #000 }
.mp6-dot img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover } .mp6-dot.lock { filter: grayscale(1) brightness(.6) } .mp6-dot.done { filter: grayscale(.9) brightness(.5) }
.mp6-dot.gold { box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #ff8000, 0 0 12px #ff8000 } .mp6-dot.k-raid, .mp6-dot.k-eb { width: 34px; height: 34px } .mp6-dot.k-finale { width: 40px; height: 40px; background: conic-gradient(#6a4ab0, #fff, #c9a8ff, #3a1f6a, #e8d8ff, #6a4ab0); box-shadow: 0 0 0 1px #000, 0 0 16px #a878ff }
.mp6-dot.on { z-index: 3; box-shadow: 0 0 0 1.5px #000, 0 0 0 3.5px #fff, 0 0 16px #fff; animation: mp6p 1.2s infinite } @keyframes mp6p { 50% { scale: 1.14 } }
.mp6-dot em, .mp6-cl em { position: absolute; right: -6px; top: -6px; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 9px; background: #2f93b4; font: 800 11px/17px var(--u5); font-style: normal; color: #fff; box-shadow: 0 0 0 1.5px #000 }
.mp6-cl { width: 46px; height: 40px; background: none } .mp6-cl img { position: absolute; left: calc(var(--k) * 9px); top: calc(var(--k) * 3px); width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #c9a24a, 0 2px 5px #000 }
.mp6-cl em { right: -4px; top: -8px; background: linear-gradient(180deg, #e8c46a, #a8802a); color: #1a1208 } .mp6-cl.on img:first-child { box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff, 0 0 12px #fff } .mp6-cl.lock { filter: grayscale(1) brightness(.65) }
.mp6-cl::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgb(255 214 106 / .35), transparent 65%); animation: mp6g 2.2s ease-in-out infinite; z-index: -1 } @keyframes mp6g { 50% { opacity: .3; scale: 1.2 } }
.mp6-back { position: absolute; right: 8px; top: 8px; z-index: 4; padding: 6px 12px; border: 0; border-radius: 16px; background: linear-gradient(180deg, #3a2a14, #1a1208); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c9a24a; font: 800 12.5px var(--u5); color: #ffe6a8 }
.mp6-tip { position: absolute; right: 8px; bottom: 6px; padding: 2px 8px; border-radius: 8px; background: rgb(0 0 0 / .6); font: 700 11px var(--u5); color: #d9c393; pointer-events: none }
.mp6-card { margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; background: var(--pan5) padding-box, var(--rim5) border-box } .mp6-card.gold { background: radial-gradient(ellipse 80% 100% at 0 0, rgb(255 128 0 / .22), transparent 70%), var(--pan5) padding-box, var(--rim5) border-box }
.mp6-card .h { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center } .mp6-card .ab { width: 52px; height: 52px; padding: 0 !important; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 2px #c9a24a } .mp6-card .ab img { width: 100%; height: 100%; object-fit: cover }
.mp6-card small { display: block; font: 800 10.5px var(--u5); letter-spacing: .16em; text-transform: uppercase; color: #bfa877 } .mp6-card b { display: block; font: 400 20px/1.15 var(--d5); color: #ffe6a8 } .mp6-card .h span { font: 600 12.5px var(--u5); color: #c9b894 }
.mp6-card p { margin: 8px 0 4px; font: 500 13.5px/1.4 var(--u5); color: #e8dcc0 } .mp6-card .facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 } .mp6-card .facts span { padding: 2px 9px; border-radius: 10px; background: rgb(0 0 0 / .45); font: 700 12px var(--u5); color: #e8d6a8 }
.mp6-card .why { margin: 6px 0; font: 700 12.5px var(--u5); color: #ff9a7a } .mp6-card .pbig { width: 100%; margin-top: 8px } .mp6-card.lock { filter: saturate(.6) }
.mp6-hint { margin-top: 10px; padding: 12px; border-radius: 10px; text-align: center; font: 600 13px var(--u5); color: #b9a787; background: rgb(0 0 0 / .35) }
.mp6-list { margin-top: 10px } .mp6-list summary { cursor: pointer; padding: 8px 4px; font: 800 12px var(--u5); letter-spacing: .12em; text-transform: uppercase; color: #cdb88a } .mp6-list .mp5-n { margin-bottom: 6px }
.mp6-dot .lb { position: absolute; left: 50%; top: 100%; translate: -50% 2px; white-space: nowrap; pointer-events: none; font: 700 10.5px/1.2 var(--u5); color: #fbeac0; text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 }
.mp6-dot.lock .lb { color: #b8a888 }
/* Tooltip über der Spielleiste (Talente, Rucksack) */
.wtt-pop { position: fixed; left: 12px; right: 12px; bottom: calc(126px + env(safe-area-inset-bottom, 0px)); z-index: 60; max-height: 56vh; overflow: auto; animation: wttup .22s cubic-bezier(.2, .9, .3, 1.2) }
.wtt-pop > .wtt { margin: 0; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8f8f8f, 0 -10px 40px #000e } @keyframes wttup { from { opacity: 0; translate: 0 18px } }
.bg6-slot { background: radial-gradient(circle at 50% 40%, #2a2218, #120e09 70%) !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #4a3b24, inset 0 4px 10px #000c, 0 0 0 1px #000 !important }
.bg6-slot.has { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--q, #9d9d9d), 0 0 10px color-mix(in srgb, var(--q, #9d9d9d) 40%, transparent) !important }
.wtt-pop { padding: 8px; border-radius: 10px; background: #06060e; box-shadow: 0 0 0 1px #000, 0 -12px 40px #000e } .wtt-pop .wtt-cmp { margin-top: 8px } .wtt-pop .wtt-cmp .wtt { margin: 4px 0 0 }
/* Handykarte 5.6: Finger-Zoom (MapZoom in client.js) */
html, body.play { touch-action: manipulation }
.mp6-map { aspect-ratio: 1.2; touch-action: none; user-select: none; -webkit-user-select: none }
.mp6-bgw { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform } .mp6-bgw > .bg { position: absolute; max-width: none; transition: none }
.mp6-dot, .mp6-cl { transition: none } .mp6-dot.off { visibility: hidden }
.mp6-dot .lb { display: none } .mp6-map.zl .mp6-dot .lb, .mp6-dot.on .lb { display: block }
.mp6-map.zoomed .mp6-tip { display: none }
.mp6-back[hidden] { display: none }
.mp6-dot.on::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; z-index: -1; background: url(/assets/ui/v5/rune-gold.svg) center / contain no-repeat; animation: mp6rune 6s linear infinite; opacity: .9 } @keyframes mp6rune { to { rotate: 360deg } }
.mp6-card .reqs { display: grid; gap: 3px; margin: 8px 0 2px; padding: 8px 10px; border-radius: 8px; background: rgb(0 0 0 / .4) }
.mp6-card .reqs small { font: 800 10.5px var(--u5); letter-spacing: .16em; text-transform: uppercase; color: #bfa877 }
.mp6-card .reqs span { display: flex; justify-content: space-between; gap: 10px; font: 600 13.5px var(--u5); color: #ff8a6a } .mp6-card .reqs b { font-weight: 600 } .mp6-card .reqs em { font-style: normal; font-weight: 800; color: #ff5a3a }
.gb5-shop button.on { box-shadow: 0 0 0 2px #000, 0 0 0 3.5px #ffd66a, 0 0 16px rgb(255 214 106 / .5) !important }

/* Zwei Antworten (Wahrheit oder Lüge): Wort unter der Raute, damit A/B am Handy eindeutig sind */
.pad4 .pk .pkt { position: absolute; z-index: 1; left: 6px; right: 6px; top: 12%; text-align: center; font: 800 21px/1.1 var(--u5); letter-spacing: .06em; text-transform: uppercase; color: #f3dfae; text-shadow: 0 2px 6px #000 }

/* Wahrheit oder Lüge? (29.09.2026): Wischkarte – rechts = Wahrheit (Gold), links = Lüge (Rot). --k: −1 … 1 beim Ziehen */
body.play .wl-ph { display: grid; gap: 12px; padding-top: 4px; user-select: none; -webkit-user-select: none }
body.play .wl-sides { display: flex; justify-content: space-between; font: 400 15px var(--d5); letter-spacing: .08em; text-transform: uppercase }
body.play .wl-sides .l { color: #e0776a } body.play .wl-sides .r { color: var(--gold5) }
body.play .wl-card { --k: 0; position: relative; min-height: 46vh; display: grid; align-content: center; gap: 12px; padding: 26px 20px 30px; border-radius: 14px; touch-action: pan-y; cursor: grab;
  background: radial-gradient(ellipse at 50% 0%, rgb(255 244 214 / .16), transparent 60%), linear-gradient(180deg, #e9dcc0, #d6c29b 55%, #c4ab7f) ; color: #2b1d0d;
  box-shadow: 0 0 0 1px #000, 0 0 0 3px #8a6a30, 0 14px 30px rgb(0 0 0 / .65), inset 0 0 40px rgb(120 80 30 / .35); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .2s }
body.play .wl-card.drag { transition: none; cursor: grabbing }
body.play .wl-card.gone { transition: transform .45s cubic-bezier(.5, 0, .9, .4), opacity .45s; opacity: 0 }
body.play .wl-card .wl-k { font: 700 12px var(--u5); letter-spacing: .12em; text-transform: uppercase; color: #7a5a2a; text-align: center }
body.play .wl-card p { margin: 0; font: 600 20px/1.42 Georgia, 'Times New Roman', serif; text-align: center; text-wrap: pretty }
body.play .wl-lab { position: absolute; top: 18px; padding: 4px 12px 2px; border: 3px solid currentColor; border-radius: 6px; font: 400 24px var(--d5); font-style: normal; letter-spacing: .1em; text-transform: uppercase; opacity: 0; pointer-events: none }
body.play .wl-lab.w { left: 16px; color: #b8860b; rotate: -14deg; opacity: clamp(0, var(--k) * 1.6, 1) }
body.play .wl-lab.l { right: 16px; color: #b0261c; rotate: 14deg; opacity: clamp(0, var(--k) * -1.6, 1) }
body.play .wl-card:not(.sent) { box-shadow: 0 0 0 1px #000, 0 0 0 3px #8a6a30, 0 14px 30px rgb(0 0 0 / .65), inset 0 0 40px rgb(120 80 30 / .35), 0 0 calc(max(var(--k), 0) * 40px) rgb(232 196 106 / .7), 0 0 calc(max(var(--k) * -1, 0) * 40px) rgb(220 60 40 / .7) }
body.play .wl-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
body.play .wl-btns .pbig.alt { color: #f0a097 !important }
body.play .wl-help, body.play .wl-wait { margin: 0; text-align: center; font: 600 13px var(--u5); color: var(--mute5) }
body.play .wl-wait { font-size: 15px }
body.play .wl-card.sent { min-height: 30vh; opacity: .88; transform: scale(.94); cursor: default }
body.play .wl-card.sent p { font-size: 16px }
body.play .wl-seal { justify-self: center; margin-top: 4px; padding: 5px 16px 3px; border: 3px solid currentColor; border-radius: 6px; font: 400 22px var(--d5); letter-spacing: .12em; text-transform: uppercase; rotate: -6deg }
body.play .wl-card.sent.w .wl-seal { color: #9a7209 } body.play .wl-card.sent.l .wl-seal { color: #a3241a }

/* Roulette am Handy (29.09.2026): Chips wählen, dann auf Rot/Schwarz/Drittel/Zahl tippen */
body.play .rou5-top { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; border-radius: 12px !important; background: radial-gradient(ellipse at 50% 0%, #1b5a3a, #0b2418) !important; box-shadow: inset 0 0 0 1px #3f8a62, 0 0 0 1px #000 !important }
body.play .rou5-top .st { display: grid !important; gap: 2px !important } body.play .rou5-top .st b { font: 400 18px var(--d5) !important; color: #ffe39a !important } body.play .rou5-top .st span { font: 600 12px var(--u5) !important; color: #b7d6c2 !important }
body.play .rou5-last { display: grid !important; justify-items: center !important; gap: 2px !important; flex: none !important } body.play .rou5-last i { display: grid !important; place-items: center !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; font: 800 20px var(--u5) !important; font-style: normal !important; color: #fff !important; box-shadow: 0 0 0 2px #d6b56a, 0 2px 6px #000 !important }
body.play .rou5-last.rot i { background: #b3261e !important } body.play .rou5-last.schwarz i { background: #17191c !important } body.play .rou5-last.gruen i { background: #1f7a3a !important }
body.play .rou5-last span { font: 800 12px var(--u5) !important; color: #ffe39a !important }
body.play .rou5-chips { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important }
body.play .rou5-chips button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 9px 4px !important; border: 0 !important; border-radius: 99px !important; font: 800 14px var(--u5) !important; color: #f3ead6 !important; background: #1d1610 !important; box-shadow: inset 0 0 0 1px #6a4e22 !important }
body.play .rou5-chips button i { width: 16px !important; height: 16px !important; border-radius: 50% !important; background: repeating-conic-gradient(#e8c46a 0 30deg, #7a1d16 30deg 60deg) !important; box-shadow: 0 0 0 1px #000 !important }
body.play .rou5-chips button.on { color: #2a1a04 !important; background: linear-gradient(#ffe7a0, #d8a640) !important; box-shadow: 0 0 12px rgb(232 196 106 / .6) !important }
body.play .rou5-chips button:disabled { opacity: .4 !important }
body.play .rou5-out { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 6px !important }
body.play .rou5-out .rb:nth-child(1), body.play .rou5-out .rb:nth-child(2) { grid-column: span 3 !important } body.play .rou5-out .rb:nth-child(n+3) { grid-column: span 2 !important }
body.play .rou5-nums { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 4px !important }
body.play .rou5-nums .z { grid-column: 1 / -1 !important }
body.play .rb { position: relative !important; display: grid !important; place-items: center !important; gap: 0 !important; min-height: 42px !important; padding: 4px 2px !important; border: 0 !important; border-radius: 8px !important; cursor: pointer !important; font: 800 15px var(--u5) !important; color: #fff !important; background: #133a26 !important; box-shadow: inset 0 0 0 1px #2f7a52 !important }
body.play .rb small { font: 700 10px var(--u5) !important; color: #cfe6d6 !important }
body.play .rb.r { background: linear-gradient(180deg, #c0342a, #7d1a13) !important; box-shadow: inset 0 0 0 1px #e56a5a !important } body.play .rb.s { background: linear-gradient(180deg, #2a2d33, #0e0f12) !important; box-shadow: inset 0 0 0 1px #5a5f68 !important } body.play .rb.g { background: linear-gradient(180deg, #2a9a4e, #145a2c) !important; box-shadow: inset 0 0 0 1px #6ad08a !important }
body.play .rou5-nums .rb { min-height: 36px !important; font-size: 14px !important }
body.play .rb.has { box-shadow: inset 0 0 0 2px #ffe39a, 0 0 10px rgb(255 220 120 / .55) !important }
body.play .rb em { position: absolute !important; top: -7px !important; right: -4px !important; padding: 0 5px !important; border-radius: 99px !important; font: 800 10px var(--u5) !important; font-style: normal !important; color: #2a1a04 !important; background: linear-gradient(#ffe7a0, #d8a640) !important; box-shadow: 0 1px 3px #000 !important }
body.play .rb:disabled { opacity: .55 !important; cursor: default !important }
body.play .rou5-top .st b span { font: inherit !important; color: inherit !important }

/* ---------- Klassen 6.0: Ressourcen, Gestalten, Begleiter, Vorbereitung, drei Talentbäume ---------- */
.rt-res { position: relative; height: 14px; border-radius: 3px; overflow: hidden; background: #06080f; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(214 176 104 / .18) }
.rt-res i { position: absolute; inset: 0 auto 0 0; transition: width .5s } .rt-res span { position: relative; display: block; text-align: center; font: 800 10.5px/14px var(--u5); color: #fff; text-shadow: 0 1px 2px #000 }
.rt-res.mana i { background: linear-gradient(180deg, #4f8cff, #1c3fa8) } .rt-res.wut i { background: linear-gradient(180deg, #ff5a4a, #9a1a12) } .rt-res.energie i { background: linear-gradient(180deg, #ffe45a, #b98a0a) }
.rt-res.sm { height: 9px } .rt-res.sm span { font-size: 0; }
.rt-cp { display: flex; gap: 6px; justify-content: center } .rt-cp i { width: 13px; height: 13px; transform: rotate(45deg); border-radius: 2px; background: #2a1a10; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #6e4f22 }
.rt-cp i.on { background: radial-gradient(circle at 35% 35%, #ffe07a, #e0561a 70%); box-shadow: 0 0 0 1px #000, 0 0 8px rgb(255 140 40 / .7) }
.cb5-auras .fm { color: #9fd3ff; border-color: rgb(120 180 255 / .45) }
.cb5-sec small { margin-left: 6px; font: 600 10.5px var(--u5); letter-spacing: .04em; text-transform: none; color: #8f8068 }
.cb5-ab .why { display: block; margin-top: 2px; font: 800 11.5px var(--u5); font-style: normal; color: #ff8a6a }
.cb6-forms { display: flex; gap: 8px; flex-wrap: wrap }
.cb6-f { flex: 1 1 0; min-width: 70px; display: grid; justify-items: center; gap: 4px; padding: 8px 4px 7px; border-radius: 9px; border: 1px solid rgb(214 176 104 / .25); background: rgb(20 14 8 / .8); color: #cdb88a; font: 700 11.5px var(--u5) }
.cb6-f img { width: 38px; height: 38px; border-radius: 7px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5a4420; filter: grayscale(.55) brightness(.8) }
.cb6-f.cur { color: #f2e2b8 } .cb6-f.cur img { filter: none }
.cb6-f.on { border-color: #4fb8e0; background: radial-gradient(ellipse at 50% 0, rgb(47 147 180 / .45), rgb(20 14 8 / .85) 70%); color: #fff; box-shadow: 0 0 14px rgb(47 147 180 / .45) } .cb6-f.on img { filter: none; box-shadow: 0 0 0 1px #000, 0 0 0 2px #7fd6ff }
.pet6 { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; margin: 0 0 8px; padding: 7px 10px 7px 7px; border-radius: 10px; background: rgb(18 13 8 / .85); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(214 176 104 / .22) }
.pet6 > img { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 1px #000, 0 0 0 2px #7a5c24 } .pet6 b { display: block; margin-bottom: 3px; font: 800 13px var(--u5); color: #f2e2b8 }
.pet6 .rt-hp { height: 14px; border-radius: 3px } .pet6 .rt-hp span { font: 800 10.5px/14px var(--u5) } .pet6.dead > img { filter: grayscale(1) brightness(.5) }
.pet6-st { grid-column: 1 / -1; display: flex; gap: 6px } .pet6-st button { flex: 1; min-height: 34px; border-radius: 7px; border: 1px solid rgb(214 176 104 / .25); background: #140e08; color: #b7a88c; font: 800 12px var(--u5) }
.pet6-st button.on { border-color: #d6b068; color: #fff; background: linear-gradient(180deg, #4a3616, #20160a) }
.prep6 { display: grid; gap: 10px; margin: 8px 0 12px; padding: 10px; border-radius: 12px; background: rgb(14 10 6 / .82); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(214 176 104 / .25) }
.prep6 > .kick { text-align: center } .prep6-row > small { display: block; margin: 0 2px 5px; font: 800 11px var(--u5); letter-spacing: .14em; text-transform: uppercase; color: #cdb88a }
.prep6-opts { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px }
.prep6-opts button { flex: 0 0 auto; width: 76px; display: grid; justify-items: center; gap: 4px; padding: 7px 3px 6px; border-radius: 9px; border: 1px solid rgb(214 176 104 / .2); background: #120d07; color: #b7a88c; font: 700 11px/1.15 var(--u5) }
.prep6-opts img { width: 40px; height: 40px; border-radius: 7px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5a4420; filter: grayscale(.5) brightness(.8) }
.prep6-opts button.on { border-color: #4fb8e0; color: #fff; background: radial-gradient(ellipse at 50% 0, rgb(47 147 180 / .45), #120d07 70%) } .prep6-opts button.on img { filter: none; box-shadow: 0 0 0 1px #000, 0 0 0 2px #7fd6ff }
.prep6-opts button.rare span { color: #c78bff } .prep6-row p { margin: 5px 2px 0; font: 500 12px/1.35 var(--u5); color: #b7a88c }
.tt6-tabs { display: flex; gap: 0; background: #0c0805; box-shadow: inset 0 -1px 0 #6e4f22 }
.tt6-tab { flex: 1; display: grid; justify-items: center; gap: 1px; padding: 8px 4px 7px; border: 0; background: transparent; color: #9b8a6a; font: 700 13px var(--u5); border-bottom: 3px solid transparent }
.tt6-tab span { font: 800 11px var(--u5); color: #7c6c52 } .tt6-tab.on { color: #ffd100; border-bottom-color: #ffd100; background: linear-gradient(180deg, transparent, rgb(255 209 0 / .08)) } .tt6-tab.on span { color: #f2e2b8 }
.tt6-idea { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #0a0705; font: 500 12px/1.3 var(--u5); color: #b7a88c } .tt6-idea span { flex: 1 } .tt6-idea .pb { white-space: nowrap }
.tt6-new { margin: 0; padding: 8px 12px; background: #1a2a12; color: #cfe8b8; font: 500 12.5px/1.35 var(--u5) }
.tt6 .tt6-body { background: linear-gradient(rgb(0 0 0 / .3), rgb(0 0 0 / .5)), var(--tbg) 50% var(--tby, 0%) / 100% 300% no-repeat !important }
.tn6.crown { border-radius: 50% } .tn6.crown img { border-radius: 50% }

/* ---------- Klassen 6.0 · Handy: Begleiter-Rahmen und Kombopunkte ---------- */
.pet7 { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 4px 12px; align-items: center; margin: 0 0 10px; padding: 10px 12px 10px 10px; border-radius: 12px;
  background: radial-gradient(120% 140% at 0% 0%, rgb(60 44 22 / .55), transparent 60%), linear-gradient(180deg, rgb(26 19 12 / .96), rgb(12 9 6 / .96));
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(214 176 104 / .35), inset 0 1px 0 rgb(255 230 170 / .12), 0 6px 14px #0008 }
.pet7 .pp { position: relative; width: 58px; height: 58px; border-radius: 50%; background: #0a0806 }
.pet7 .pp img { position: absolute; inset: 7px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px #000 }
.pet7 .pp svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg) } .pet7 .pp circle { fill: none; stroke-width: 3.2 } .pet7 .pp .bg { stroke: #2a1a0c; stroke-width: 4.4 } .pet7 .pp .hp { stroke-linecap: round; transition: stroke-dasharray .5s }
.pet7 .pp::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 0 2px #c9a24a, 0 0 0 3px #000, 0 0 12px rgb(201 162 74 / .35); pointer-events: none }
.pet7.demon .pp::after { box-shadow: 0 0 0 2px #9a5ad8, 0 0 0 3px #000, 0 0 14px rgb(140 70 220 / .55) }
.pet7.bw .pp::after { box-shadow: 0 0 0 2px #ff5a2a, 0 0 0 3px #000, 0 0 18px #ff3a1a; animation: bwp7 .7s ease-in-out infinite alternate } @keyframes bwp7 { to { box-shadow: 0 0 0 2px #ffb05a, 0 0 0 3px #000, 0 0 26px #ff5a1a } }
.pet7.dead .pp img { filter: grayscale(1) brightness(.35) } .pet7 .pp .sk { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 22px; color: #ddd; text-shadow: 0 0 5px #000 }
.pet7 .pi b { display: block; font: 400 17px/1.1 var(--d5, Georgia, serif); color: #ffe6a8; text-shadow: 0 1px 0 #000 } .pet7 .pi small { display: block; margin: 1px 0 5px; font: 700 11px var(--u5); letter-spacing: .06em; text-transform: uppercase; color: #a8987a }
.pet7 .rt-hp { height: 14px; border-radius: 3px } .pet7 .rt-hp span { font: 800 10.5px/14px var(--u5) }
.pet7 .pab { grid-column: 1 / -1; margin: 4px 2px 2px; font: 500 12.5px/1.35 var(--u5); color: #cfc2a4 } .pet7 .pab b { color: #f2cf6b }
.pet7 .pet6-st { grid-column: 1 / -1; margin-top: 4px }
.rt-cp7 { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 2px } .rt-cp7 span { margin-right: 4px; font: 800 10.5px var(--u5); letter-spacing: .08em; text-transform: uppercase; color: #a8987a }
.rt-cp7 i { position: relative; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, #140806 0 45%, transparent 47%), conic-gradient(from 200deg, #f5dc8a, #8a5a1a, #f0cf78, #6a4210, #f5dc8a); box-shadow: 0 0 0 1px #000, 0 2px 3px #000c }
.rt-cp7 i em { position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #5a2a22, #1a0806 70%) }
.rt-cp7 i.on em { background: radial-gradient(circle at 34% 28%, #fff4d0 0 8%, #ff9a6a 16%, #e8201a 45%, #7a0404 88%); box-shadow: 0 0 8px #ff3a1aaa, 0 0 16px #ff5a2a55 }
.rt-cp7.full i.on em { animation: cpf7 1s ease-in-out infinite alternate } @keyframes cpf7 { to { filter: brightness(1.5); box-shadow: 0 0 12px #ff5a2a, 0 0 24px #ff7a3a88 } }

/* Handy: Druide in Tiergestalt – Symbol im Porträt (Originalgröße), Farbring der Gestalt */
.uf5 .por .formpor { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--fc) 55%, #000), #0b0806 72%); animation: fp5 .5s cubic-bezier(.2, 1.4, .4, 1) both }
.uf5 .por .formpor img { width: min(100%, 64px); border-radius: 50%; -webkit-mask: radial-gradient(circle, #000 60%, transparent 71%); mask: radial-gradient(circle, #000 60%, transparent 71%) }
.uf5 .por.formed { box-shadow: 0 0 0 1px #000, 0 0 0 2.5px color-mix(in srgb, var(--fc) 70%, #c9a24a), 0 0 0 3.5px #000, 0 0 16px color-mix(in srgb, var(--fc) 55%, transparent) }
.uf5 .por.formed .face { opacity: 0 }
@keyframes fp5 { 0% { transform: scale(.4) rotate(-30deg); opacity: 0 } 100% { transform: none; opacity: 1 } }
/* ---------- Markt 6 (30.09.2026): Glückszähler, Beutel zum Verkaufen, Gildenbank, Kurier nach dem Wipe ---------- */
body.play .gb5-shop button.gone { opacity: .5; filter: grayscale(.7) }
body.play .gb5-shop small .up { color: #7fe08f; font-weight: 800 }
body.play .gb5-pity { display: grid; justify-items: center; gap: 5px; padding: 10px; border-radius: 10px; background: rgb(0 0 0 / .4); box-shadow: inset 0 0 0 1px rgb(163 53 238 / .4) }
body.play .gb5-pity small { font: 800 11px var(--u5); letter-spacing: .16em; text-transform: uppercase; color: #c9a7ff }
body.play .gb5-pity .bar { display: flex; gap: 3px } body.play .gb5-pity .bar i { width: 12px; height: 20px; border-radius: 3px; background: rgb(255 255 255 / .12) } body.play .gb5-pity .bar i.on { background: linear-gradient(#d9a7ff, #8a3ce0); box-shadow: 0 0 6px #a335ee }
body.play .gb5-pity span { font: 700 13px 'Alegreya Sans', sans-serif; color: #e4d4ff }
body.play .gb5-bagrow { display: flex; flex-wrap: wrap; gap: 6px }
body.play .gb5-bagrow button { position: relative; width: 50px; height: 50px; padding: 0; border: 1px solid #6b6950; border-radius: 6px; background: #0d1511; overflow: hidden }
body.play .gb5-bagrow button.on { outline: 2px solid #f7d078; outline-offset: 1px } body.play .gb5-bagrow img { width: 100%; height: 100%; display: block }
body.play .gb5-bagrow b { position: absolute; right: 2px; bottom: 0; font: 800 12px var(--u5); color: #fff; text-shadow: 0 0 2px #000, 1px 1px 0 #000 }
body.play .gb5-bagrow em { position: absolute; left: 2px; top: 1px; font: 800 10px var(--u5); font-style: normal; color: #ffe08a; text-shadow: 0 0 2px #000 }
body.play .gb5-log { display: grid; gap: 3px; padding: 8px 10px; border-radius: 8px; background: rgb(0 0 0 / .35); font: 600 13px 'Alegreya Sans', sans-serif; color: #c8c9b6 } body.play .gb5-log b { float: right; color: #a6d991 }
.kurier6 { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(166 217 145 / .45) } .kurier6 > .kick { color: #a6d991 }
.kurier6-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px }
.kurier6-l button { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid #46564a; border-radius: 8px; background: linear-gradient(125deg, #2b3930, #18241f); color: #e9e5d5; text-align: left }
.kurier6-l button:disabled { opacity: .45 } .kurier6-l img { width: 38px; height: 38px; border-radius: 5px } .kurier6-l b { display: block; font: 700 13px 'Alegreya Sans', sans-serif } .kurier6-l small { font: 600 11px var(--u5); color: #b7a88c }
body.play .gb5-btn small .money, body.play .gb5-lever small .money { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap }
body.play .gb5-btn small .money i, body.play .gb5-lever small .money i { grid-row: auto; width: 13px !important; height: 13px !important; border-radius: 50%; box-shadow: none !important; overflow: visible; display: inline-block; vertical-align: -2px }
/* Doppeltipp-Zoom aus (Sebastian 30.09.2026): touch-action wird nicht vererbt und endet an jedem Scrollbereich (.pbody) –
   deshalb auf jedem Element. Ausnahmen: Karte (eigener Finger-Zoom), Wahrheit-oder-Lüge-Karte (Wischen) */
body.play *, body.play *::before, body.play *::after { touch-action: manipulation }
body.play .mp6-map, body.play .mp6-map * { touch-action: none }
body.play .wl-card, body.play .wl-card * { touch-action: pan-y }

/* Inventur 01.10.: Kopf v5 – Portrait reagiert wie früher .pu-por */
.uf5 .por.fl-ok { animation: ufok .9s ease-out } .uf5 .por.fl-no { animation: ufno .7s ease-out } .uf5 .por.fl-xp { animation: ufxp .8s ease-out }