/* Tutto online: Filzteppich, Würfel, Karten, Lobby. Ergänzt die Gestaltung der Zähler-App in index.html. */
:root {
  --felt-hi: #21705f; --felt: #144b40; --felt-lo: #0a2a25;
  --ivory: #f7f2e3; --gold: #ffd25e; --gold-lo: #c9972a; --on-felt: #f3f1e8; --on-felt-soft: rgba(243,241,232,.66);
}

/* Vollbild-Bühnen (Start, Lobby, Tisch) */
.stage {
  position: fixed; inset: 0; z-index: 5; overflow-y: auto; overflow-x: hidden; color: var(--on-felt);
  background:
    radial-gradient(120% 80% at 50% 18%, var(--felt-hi) 0%, var(--felt) 48%, var(--felt-lo) 100%);
  padding: max(14px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
}
.stage::before { /* feine Filzmaserung */
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: repeating-radial-gradient(circle at 17% 23%, rgba(255,255,255,.05) 0 1px, transparent 1px 3px), repeating-radial-gradient(circle at 83% 71%, rgba(0,0,0,.08) 0 1px, transparent 1px 4px);
}
.stage > .wrap { position: relative; max-width: 520px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; gap: 12px; }
.stage h2 { color: var(--on-felt); }
.stage .hint { color: var(--on-felt-soft); }
.stage button { color: var(--on-felt); border-color: rgba(243,241,232,.55); background: rgba(0,0,0,.14); }
.stage button:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.stage button.primary { background: linear-gradient(180deg, #ffe08a, var(--gold) 55%, var(--gold-lo)); color: #3a2a00; border-color: #8a6410; box-shadow: 0 3px 0 #8a6410, 0 8px 18px rgba(0,0,0,.35); text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.stage button.primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #8a6410, 0 4px 10px rgba(0,0,0,.35); }
.stage button.quiet { border-color: transparent; background: transparent; color: var(--on-felt-soft); }
.stage button.danger { border-color: #ff8f84; color: #ffb3aa; }
.stage .seg { border-color: rgba(243,241,232,.55); }
.stage .seg button { background: transparent; border: 0; }
.stage .seg button + button { border-left: 2px solid rgba(243,241,232,.55); }
.stage .seg button[aria-pressed="true"] { background: var(--on-felt); color: var(--felt-lo); }
.stage input { background: rgba(0,0,0,.22); border: 2px solid rgba(243,241,232,.35); color: var(--on-felt); border-radius: 12px; padding: 12px 14px; font-weight: 700; min-height: 48px; width: 100%; }
.stage input::placeholder { color: rgba(243,241,232,.45); }
.glass { background: rgba(0,0,0,.2); border: 1.5px solid rgba(243,241,232,.18); border-radius: 18px; padding: 14px; backdrop-filter: blur(4px); }

/* Startseite */
.hero { text-align: center; padding: 18px 0 6px; }
.logo { font-size: clamp(3.4rem, 17vw, 5.2rem); font-weight: 800; letter-spacing: -.05em; line-height: .9; color: var(--ivory); text-shadow: 0 3px 0 rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.45); }
.logo em { font-style: normal; color: var(--gold); }
.hero .sub { color: var(--on-felt-soft); margin-top: 8px; font-weight: 600; }
.hero-dice { position: relative; height: 96px; margin: 14px auto 0; width: 220px; perspective: 600px; }
.hero-dice .die { position: absolute; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.hero-dice .die { animation: bob 3.4s ease-in-out infinite; }
.hero-dice .die:nth-child(2) { animation-delay: -1.1s; } .hero-dice .die:nth-child(3) { animation-delay: -2.2s; }
.stack { display: grid; gap: 10px; }
.big-btn { min-height: 58px; font-size: 1.1rem; }
.joinrow { display: flex; gap: 8px; } .joinrow input { text-transform: uppercase; letter-spacing: .3em; text-align: center; font-size: 1.15rem; }
.joinrow button { flex: none; }
.invite-banner { text-align: center; }
.invite-banner b { color: var(--gold); letter-spacing: .12em; }

/* Lobby */
.room-code { text-align: center; }
.room-code .code { font-size: 3.2rem; font-weight: 800; letter-spacing: .22em; padding-left: .22em; color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.35); line-height: 1.1; }
.qr { background: #fff; border-radius: 14px; padding: 8px; width: 148px; height: 148px; margin: 10px auto 4px; display: grid; place-items: center; }
.qr svg { width: 100%; height: 100%; display: block; }
.plist2 { display: grid; gap: 8px; }
.prow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(0,0,0,.18); }
.prow .av { flex: none; }
.prow .nm { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 99px; background: rgba(243,241,232,.18); margin-left: 6px; vertical-align: 2px; }
.av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--c, #888); color: #fff; font-weight: 800; box-shadow: inset 0 0 0 2px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.3); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #5be38a; box-shadow: 0 0 6px #5be38a; flex: none; } .dot.off { background: #888; box-shadow: none; }

/* Tisch */
.table-wrap { gap: 10px; }
.tbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tbar .room { font-weight: 800; letter-spacing: .14em; color: var(--on-felt-soft); font-size: .85rem; }
.pstrip { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; margin: 0 -2px; scrollbar-width: none; }
.pstrip::-webkit-scrollbar { display: none; }
.pchip { position: relative; flex: 1 0 84px; max-width: 130px; padding: 8px 8px 10px; border-radius: 16px; background: rgba(0,0,0,.22); border: 2px solid transparent; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; transition: border-color .3s, background .3s, box-shadow .3s, opacity .3s; overflow: hidden; }
.pchip .av { width: 30px; height: 30px; font-size: .85rem; grid-row: span 2; }
.pchip .pn { font-size: .78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.pchip .pn small { font-size: .6rem; opacity: .7; }
.pchip .ps { font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.pchip .pbar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--c); transition: width .6s; }
.pchip.active { border-color: var(--gold); background: rgba(255,210,94,.14); box-shadow: 0 0 0 3px rgba(255,210,94,.2), 0 0 22px rgba(255,210,94,.28); }
.pchip.off { opacity: .5; }
.pchip .crown { position: absolute; right: 6px; top: 3px; font-size: .8rem; }
.pchip.pulse { animation: chipPulse .8s ease; }
@keyframes chipPulse { 30% { transform: scale(1.07); } }

.cardzone { display: flex; align-items: center; gap: 14px; justify-content: center; min-height: 186px; }
.deck { position: relative; width: 86px; height: 124px; flex: none; }
.deck i { position: absolute; inset: 0; border-radius: 11px; background: repeating-linear-gradient(45deg, #1b5a4e 0 6px, #17493f 6px 12px); border: 3px solid var(--ivory); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.deck i:nth-child(1) { transform: translate(-3px, 4px); } .deck i:nth-child(2) { transform: translate(-1.5px, 2px); }
.deck b { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-size: .72rem; color: var(--on-felt-soft); font-weight: 700; }
.card { position: relative; width: 104px; height: 178px; border-radius: 13px; background: linear-gradient(160deg, #fffdf6, #efe7d0); color: #1a2a2e; padding: 8px 6px; text-align: center; display: flex; flex-direction: column; justify-content: space-between; align-items: center; box-shadow: 0 8px 22px rgba(0,0,0,.4), inset 0 0 0 3px var(--cc, #888); flex: none; transform-style: preserve-3d; }
.card .lab { font-size: .6rem; font-weight: 800; letter-spacing: .14em; color: var(--cc); margin-top: 3px; }
.card .big { font-size: 1.75rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--cc); }
.card .big.sm { font-size: .98rem; letter-spacing: -.02em; }
.card .rule { font-size: .58rem; font-weight: 700; line-height: 1.2; color: #4d5f62; padding: 0 3px 3px; }
.card.t-bonus { --cc: #b8821a; } .card.t-x2 { --cc: #2f6fe0; } .card.t-stop { --cc: #c0392b; } .card.t-fire { --cc: #e8761a; }
.card.t-pm { --cc: #92409f; } .card.t-straight { --cc: #1f9bb0; } .card.t-clover { --cc: #25906a; }
.card.flip { animation: cardIn .75s cubic-bezier(.2,.8,.2,1); }
@keyframes cardIn { 0% { transform: translate(-96px, 6px) rotateY(180deg) scale(.82); opacity: .2; } 55% { transform: translate(0, -14px) rotateY(90deg) scale(1.06); opacity: 1; } 100% { transform: none; } }
.card.stop-card { animation: cardIn .75s cubic-bezier(.2,.8,.2,1), shake .5s .8s; }
.carry { text-align: center; font-weight: 700; color: var(--on-felt-soft); min-height: 1.4em; font-size: .92rem; }
.carry b { color: var(--gold); font-size: 1.05rem; }

.tray { touch-action: none; user-select: none; -webkit-user-select: none; position: relative; height: 218px; border-radius: 26px; perspective: 760px; flex: none;
  background: radial-gradient(90% 90% at 50% 40%, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow: inset 0 0 0 3px rgba(255,210,94,.28), inset 0 12px 44px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.25); overflow: visible; }
.tray.shake { animation: shake .45s; }
@keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.tray .empty { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(243,241,232,.3); font-weight: 700; letter-spacing: .08em; font-size: .85rem; pointer-events: none; }
.rail { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 10px; border-radius: 16px; background: rgba(0,0,0,.2); }
.rail .lab { font-size: .68rem; font-weight: 800; letter-spacing: .1em; color: var(--on-felt-soft); flex: none; min-width: 64px; line-height: 1.15; }
.rail .dice { display: flex; gap: 7px; flex-wrap: wrap; perspective: 400px; }
.rail .die { position: relative; --s: 32px; flex: none; width: var(--s); height: var(--s); animation: pop .4s cubic-bezier(.3,1.6,.5,1); animation-fill-mode: backwards; }
.rail .die.straight-n { opacity: .95; }
@keyframes pop { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }

/* Würfel */
.die { position: absolute; width: var(--s, 58px); height: var(--s, 58px); transform-style: preserve-3d; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: translate .22s cubic-bezier(.3,1.5,.5,1), opacity .35s; }
.die.sel { translate: 0 -14px; z-index: 3; }
.die.sel::after { content: ""; position: absolute; inset: -5px; border-radius: 24%; box-shadow: 0 0 0 3px var(--gold), 0 0 20px rgba(255,210,94,.75); pointer-events: none; }
.tray .die { cursor: pointer; }
.tray .die.locked { cursor: default; }
.tray .die.leaving { translate: 0 150px; opacity: 0; transition: translate .45s ease-in, opacity .45s ease-in; }
.tray .die.dim { opacity: 0; transition: opacity .3s; }
.tray .die.nope { animation: nope .35s; }
@keyframes nope { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
.cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.die-shadow { position: absolute; left: 6%; right: 6%; bottom: -7%; height: 26%; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.6), transparent 70%); opacity: .45; transform: translateZ(-2px); pointer-events: none; }
.rail .die-shadow { display: none; }
.cube > .face { position: absolute; inset: 0; border-radius: 17%; backface-visibility: hidden;
  background: linear-gradient(142deg, #fffef8 0%, #f4eddb 55%, #e3d8bd 100%);
  box-shadow: inset 0 0 0 1.5px rgba(80,60,20,.16), inset -5px -6px 10px rgba(130,105,50,.22), inset 4px 4px 8px rgba(255,255,255,.95); }
.f1 { transform: translateZ(calc(var(--s) / 2)); }
.f6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.f5 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.f3 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.f4 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.pips { position: absolute; inset: 13%; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); }
.pips i { place-self: center; width: 76%; height: 76%; border-radius: 50%; }
.pips i.pip { background: radial-gradient(circle at 36% 30%, #4a4a4a, #0b0b0b 70%); box-shadow: inset 0 1.5px 2px rgba(0,0,0,.9), 0 .5px 0 rgba(255,255,255,.6); }
.pips i.pip.red { background: radial-gradient(circle at 36% 30%, #ff7a6b, #b3201a 70%); width: 84%; height: 84%; }

/* Anzeige und Bedienung */
.status { color: var(--on-felt); text-align: center; font-weight: 700; font-size: 1.02rem; min-height: 2.5em; display: grid; place-items: center; line-height: 1.25; }
.status small { display: block; color: var(--on-felt-soft); font-weight: 600; font-size: .82rem; }
.status b { color: var(--gold); }
.ctrls { display: grid; gap: 9px; }
.ctrls.two { grid-template-columns: 1fr 1fr; }
.ctrls button { min-height: 54px; font-size: 1.02rem; }
.ctrls .roll-btn { min-height: 62px; font-size: 1.2rem; }
.ctrls button small { display: block; font-weight: 600; font-size: .72rem; opacity: .8; }
.emotes { display: flex; justify-content: center; gap: 6px; }
.emotes button { min-height: 40px; min-width: 44px; padding: 4px 8px; font-size: 1.25rem; border-color: transparent; background: rgba(0,0,0,.18); }
.float-emote { position: fixed; z-index: 30; font-size: 2.1rem; pointer-events: none; animation: floatUp 2.2s ease-out forwards; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
@keyframes floatUp { from { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-10px) scale(1.2); } to { transform: translateY(-120px) scale(1); opacity: 0; } }

.banner { position: fixed; left: 0; right: 0; top: 34%; z-index: 40; text-align: center; pointer-events: none; font-size: clamp(2.4rem, 12vw, 4rem); font-weight: 800; letter-spacing: -.04em; color: var(--ivory); text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 12px 36px rgba(0,0,0,.5); animation: bannerIn 1.5s cubic-bezier(.2,.9,.3,1) forwards; }
.banner small { display: block; font-size: 1.1rem; letter-spacing: 0; font-weight: 700; margin-top: 6px; opacity: .95; }
.banner.gold { color: var(--gold); } .banner.bad { color: #ff8f84; }
@keyframes bannerIn { 0% { transform: scale(.3) rotate(-4deg); opacity: 0; } 18% { transform: scale(1.12) rotate(1deg); opacity: 1; } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: scale(1.05) translateY(-18px); opacity: 0; } }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 45; }
.toast { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; background: rgba(10,25,28,.92); color: var(--on-felt); padding: 10px 16px; border-radius: 99px; font-weight: 700; font-size: .92rem; max-width: 90vw; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: toastIn .25s ease; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } }
.net-lost { background: #b3441a; color: #fff; text-align: center; padding: 8px 12px; border-radius: 12px; font-weight: 700; font-size: .88rem; }

/* Ende */
.over { position: fixed; inset: 0; z-index: 42; display: grid; place-items: center; background: rgba(5,20,18,.82); padding: 18px; backdrop-filter: blur(5px); animation: toastIn .4s; }
.over .box { width: min(94vw, 440px); background: linear-gradient(180deg, #1c6154, #123f38); border: 2px solid rgba(255,210,94,.5); border-radius: 24px; padding: 20px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.6); max-height: 90dvh; overflow: auto; }
.over h2 { font-size: 1.9rem; letter-spacing: -.03em; margin: 4px 0 2px; color: var(--gold); }
.over .rank { display: grid; gap: 6px; margin: 14px 0; text-align: left; }
.over .rk { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.2); padding: 8px 12px; border-radius: 12px; }
.over .rk b { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.over .rk.win { background: rgba(255,210,94,.18); box-shadow: inset 0 0 0 2px var(--gold); }
.sheet { position: fixed; inset: 0; z-index: 41; background: rgba(0,0,0,.5); display: grid; align-items: end; }
.sheet .in { background: #123f38; color: var(--on-felt); border-radius: 22px 22px 0 0; padding: 16px 16px max(18px, env(safe-area-inset-bottom)); display: grid; gap: 9px; max-width: 520px; width: 100%; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) { .hero-dice .die, .card.flip, .banner { animation: none !important; } .banner { opacity: 1; } }

body.on-stage { overflow: hidden; }
.stage .opt { color: var(--on-felt-soft); }
.stage label { color: var(--on-felt-soft); }

.tray.aim { box-shadow: inset 0 0 0 3px var(--gold), inset 0 12px 44px rgba(0,0,0,.55), 0 0 26px rgba(255,210,94,.35); }

.rail img.ico { width: 36px; height: 36px; flex: none; animation: pop .4s cubic-bezier(.3,1.6,.5,1); animation-fill-mode: backwards; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); }
.hero-ico { position: absolute; width: 96px; height: 96px; animation: bob 3.4s ease-in-out infinite; filter: drop-shadow(0 8px 8px rgba(0,0,0,.4)); }
.tray .gl3d { z-index: 0; } .tray .empty { z-index: 1; }

/* ---------- Punktezähler und Dialoge im Tischdesign ---------- */
.stage h1 { color: var(--ivory); text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.stage .bar { margin-bottom: 4px; }
.stage .panel, .stage .pl { color: var(--on-felt); }
.stage .panel { background: rgba(0,0,0,.2); border: 1.5px solid rgba(243,241,232,.18); backdrop-filter: blur(4px); }
.stage .hint { color: var(--on-felt-soft); }
.stage .pitem input { background: rgba(0,0,0,.22); border: 2px solid rgba(243,241,232,.35); }
.stage .pitem button { color: var(--on-felt-soft); background: transparent; border-color: transparent; }
.stage .rank { gap: 8px; }
.stage .pl { background: rgba(0,0,0,.22); border-color: transparent; padding: 10px 12px 12px; }
.stage .pl.active { background: rgba(255,210,94,.14); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,210,94,.2), 0 0 22px rgba(255,210,94,.25); }
.stage .pl .prog { background: var(--gold); opacity: .8; }
.stage .pl .star { color: var(--gold); }
.stage .delta.up { color: #7be8a4; } .stage .delta.down { color: #ff9d92; }
.stage .badge { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.3); }
.stage .chip { background: rgba(0,0,0,.35); color: var(--ivory); border: 1.5px solid var(--gold); }
.stage .chip button { color: var(--gold); background: transparent; }
.stage .note { background: rgba(255,210,94,.16); color: var(--on-felt); border: 1px solid rgba(255,210,94,.3); }
.stage .keys .pts, .stage .sum .small, .stage .dice span { color: var(--on-felt-soft); }
.stage .dice i { border-color: var(--on-felt); } .stage .dice i.used { background: var(--gold); border-color: var(--gold); }
.stage .keys button, .stage .cardgrid button { background: rgba(0,0,0,.2); border-color: rgba(243,241,232,.45); }
.stage .keys .face { color: var(--ivory); }
.stage button.good { background: #2fae80; border-color: #1b7a58; color: #fff; box-shadow: 0 3px 0 #1b7a58, 0 8px 18px rgba(0,0,0,.3); }
.stage button.bad { border-color: #ff8f84; color: #ffb3aa; background: rgba(0,0,0,.14); }
.stage .turnhead .who { color: var(--ivory); }

dialog { background: linear-gradient(180deg, #1c6154, #123f38); color: var(--on-felt); border: 2px solid rgba(255,210,94,.4); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
dialog h2 { color: var(--gold); }
dialog .hint, dialog small, dialog .stats th { color: var(--on-felt-soft); }
dialog button { color: var(--on-felt); border-color: rgba(243,241,232,.55); background: rgba(0,0,0,.14); }
dialog button.primary { background: linear-gradient(180deg, #ffe08a, var(--gold) 55%, var(--gold-lo)); color: #3a2a00; border-color: #8a6410; box-shadow: 0 3px 0 #8a6410, 0 8px 18px rgba(0,0,0,.35); }
dialog button.quiet { border-color: transparent; background: transparent; color: var(--on-felt-soft); }
dialog .seg { border-color: rgba(243,241,232,.55); } dialog .seg button { background: transparent; border: 0; } dialog .seg button + button { border-left: 2px solid rgba(243,241,232,.55); }
dialog .seg button[aria-pressed="true"] { background: var(--on-felt); color: var(--felt-lo); }
dialog .hrow, dialog .gc { border-bottom-color: rgba(243,241,232,.14); }
dialog .winner { color: var(--ivory); }
dialog .big-trophy { color: var(--gold); }
dialog::backdrop { background: rgba(5,20,18,.72); backdrop-filter: blur(3px); }

.card .art { width: 100%; height: 46px; display: block; flex: none; }
.card .rule { flex: 1; display: grid; align-items: center; }
.card .lab { white-space: nowrap; letter-spacing: .1em; }

/* ---------- Rückfragen, Hinweise, Freunde ---------- */
.toast[popover] { inset: auto; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); margin: 0; border: 0; overflow: visible; }
dialog.ask { width: min(88vw, 360px); text-align: center; padding: 22px 18px 16px; }
dialog.ask h2 { font-size: 1.3rem; margin: 0 0 6px; }
dialog.ask p { margin: 0 0 16px; color: var(--on-felt-soft); font-weight: 600; }
.askbtns { display: grid; gap: 9px; }
dialog button.danger { border-color: #ff8f84; color: #fff; background: #b3382d; }
dialog input { background: rgba(0,0,0,.22); border: 2px solid rgba(243,241,232,.35); color: var(--on-felt); border-radius: 12px; padding: 12px 14px; font-weight: 700; min-height: 48px; width: 100%; font-size: 1rem; }
dialog input::placeholder { color: rgba(243,241,232,.45); }
dialog .joinrow input { text-transform: uppercase; letter-spacing: .3em; text-align: center; }
#friendsDlg { display: none; width: min(94vw, 460px); }
#friendsDlg[open] { display: block; overflow-y: auto; overscroll-behavior: contain; }
#friendsDlg h3 { margin: 14px 0 6px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-felt-soft); }
#friendsDlg .frme { text-align: center; margin-bottom: 12px; }
.frcode { font-size: 2.4rem; font-weight: 800; letter-spacing: .24em; padding-left: .24em; color: var(--gold); line-height: 1.15; margin: 2px 0 8px; user-select: all; -webkit-user-select: all; }
#friendsDlg .prow { margin-bottom: 6px; }
#friendsDlg .prow small { display: block; font-weight: 600; font-size: .72rem; opacity: .65; }
button.sm { min-height: 44px; padding: 8px 12px; font-size: .92rem; flex: none; }
.nbadge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 8px; border-radius: 99px; background: var(--gold); color: #3a2a00; font-size: .78rem; font-weight: 800; vertical-align: 1px; }

/* ---------- Handy: Antippen, Bildschirmhöhe, Querformat ---------- */
html { overscroll-behavior: none; }
.stage { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.stage button, dialog button { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.stage input, dialog input { font-size: max(16px, 1rem); }
.emotes button { min-height: 44px; min-width: 44px; }
.prow button.quiet { min-width: 44px; }
dialog { max-width: calc(100vw - 20px); max-height: calc(100dvh - 24px); overflow-y: auto; }
@media (max-width: 340px) { .pchip { flex-basis: 74px; } .card .rule { font-size: .52rem; } .ctrls.two { gap: 6px; } .ctrls button { padding: 8px; font-size: .95rem; } }
@media (orientation: landscape) and (max-height: 520px) { .over .box { padding: 12px; } .banner { top: 24%; } }

/* ---------- Profilbilder (Würfelgesichter) und Profil ---------- */
.av.dv { overflow: hidden; background: var(--c, #888); box-shadow: 0 0 0 2px var(--c, #888), 0 2px 6px rgba(0,0,0,.35); padding: 0; cursor: pointer; }
.av.dv svg { width: 100%; height: 100%; display: block; }
.av.dv.big { width: 104px; height: 104px; box-shadow: 0 0 0 4px var(--c, #888), 0 8px 22px rgba(0,0,0,.4); cursor: default; }
[data-pf], [data-ff], [data-pn], [data-me] { cursor: pointer; }
.pn-link { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; cursor: pointer; }
.namerow { display: flex; gap: 10px; align-items: center; }
.avbtn { flex: none; width: 56px; height: 56px; min-height: 56px; padding: 0; border-radius: 50%; border: 0 !important; background: none !important; position: relative; }
.avbtn .av { width: 56px; height: 56px; }
.avbtn::after { content: "✎"; position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #3a2a00; font-size: .8rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
#profDlg { width: min(94vw, 420px); padding: 18px 16px 16px; }
#profDlg[open] { display: block; overflow-y: auto; overscroll-behavior: contain; }
.pf-head { text-align: center; }
.pf-av { display: grid; place-items: center; margin: 2px 0 8px; }
.pf-head h2 { margin: 6px 0 4px; font-size: 1.6rem; letter-spacing: -.02em; color: var(--ivory); overflow-wrap: anywhere; }
.pf-tags .tag { margin: 0 3px; } .pf-tags .tag.on { background: #2f9a63; }
.pstats { background: rgba(0,0,0,.2); border-radius: 18px; padding: 12px; margin: 12px 0; text-align: center; }
.ps-big { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--gold); letter-spacing: -.04em; }
.ps-big small { display: block; font-size: .8rem; letter-spacing: .04em; font-weight: 700; color: var(--on-felt-soft); margin-top: 4px; }
.ps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ps-grid div { font-size: .68rem; font-weight: 700; color: var(--on-felt-soft); text-transform: uppercase; letter-spacing: .04em; }
.ps-grid b { display: block; font-size: 1.15rem; color: var(--on-felt); letter-spacing: 0; text-transform: none; }
.pf-btns { margin-top: 12px; }
.pf-btns .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-btns button { min-height: 50px; }
.pf-state { opacity: .85; }
.pf-note { text-align: center; margin: 0; }
.ed-sec h3 { margin: 12px 0 6px; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-felt-soft); }
.ed-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.presets, .faces { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.presets button, .faces button { padding: 3px; min-height: 0; aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; background: none; display: grid; place-items: stretch; }
.presets button .av, .faces button .av { width: 100%; height: 100%; box-shadow: none; }
.presets button[aria-pressed="true"], .faces button[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,210,94,.35); }
.sws { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; background: var(--sw) !important; border: 2px solid rgba(243,241,232,.5) !important; }
.sw[aria-pressed="true"] { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(255,210,94,.45); transform: scale(1.1); }
@media (max-height: 640px) { .av.dv.big { width: 76px; height: 76px; } .ps-big { font-size: 2.2rem; } .pf-head h2 { font-size: 1.3rem; } .sw { width: 32px; height: 32px; min-height: 32px; } }

/* ---------- Online ohne Scrollen: Lobby und Tisch passen immer in den Bildschirm ---------- */
#table, #lobby, #pvTable { overflow: hidden; }
#table > .wrap, #lobby > .wrap, #pvTable > .wrap { height: 100%; min-height: 0; }
.tbar { min-height: 40px; } .tbar .tbar-sp { width: 70px; }
.tbar .deckn { min-width: 70px; text-align: right; }
.stage > .table-wrap { display: flex; flex-direction: column; gap: 8px; --z: 1; }
.table-wrap > * { flex: none; min-width: 0; }
.table-wrap > .tray { flex: 1 1 0; min-height: 96px; height: auto; }
.table-wrap > .mid { display: flex; gap: 12px; align-items: stretch; }
.cardzone { zoom: var(--z); min-height: 0; flex: none; display: block; }
.mid .info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.mid .status { text-align: left; place-items: start; min-height: 0; font-size: .98rem; }
.mid .status small { font-size: .78rem; }
.mid .carry { text-align: left; min-height: 0; font-size: .88rem; }
.mid .rail { min-height: 0; padding: 5px 8px; flex-wrap: wrap; gap: 4px 8px; }
.mid .rail .lab { min-width: 0; width: 100%; font-size: .58rem; }
.mid .rail .dice { gap: 4px; flex-wrap: nowrap; }
.rail img.ico { width: 30px; height: 30px; }
.rail .die { --s: 28px; }
.ctrls button { min-height: 52px; } .ctrls .roll-btn { min-height: 58px; }
.emotes button { min-height: 40px; }
/* Karte wird bei kleiner Bildschirmhöhe kleiner, alles andere bleibt bedienbar */
@media (max-height: 780px) { .stage > .table-wrap { --z: .88; } }
@media (max-height: 700px) { .stage > .table-wrap { --z: .76; gap: 6px; } .ctrls button { min-height: 48px; } .ctrls .roll-btn { min-height: 52px; } .emotes button { min-height: 36px; } }
@media (max-height: 620px) { .stage > .table-wrap { --z: .64; gap: 5px; } .ctrls button { min-height: 44px; font-size: .96rem; } .ctrls .roll-btn { min-height: 48px; } .emotes button { min-height: 34px; padding: 2px 8px; } .stage { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); } .pchip { padding: 5px 7px 7px; } .mid .status { font-size: .9rem; } .mid .status small { font-size: .7rem; } }
@media (max-height: 540px) { .stage > .table-wrap { --z: .54; } .tbar { min-height: 34px; } .tbar button { min-height: 34px; } .mid .rail .lab { display: none; } }
@media (max-width: 340px) { .table-wrap > .mid { gap: 8px; } }

/* Querformat (Handy, Tablet, Computer): links Karte und Anzeige, rechts Tisch und Knöpfe */
@media (orientation: landscape) and (min-width: 520px) {
  #table > .wrap, #lobby > .wrap, #pvTable > .wrap { max-width: 1000px; }
  .stage > .table-wrap { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 8px; --z: 1; }
  .table-wrap > .net-lost { grid-column: 1 / -1; grid-row: 1; }
  .table-wrap > .tbar { grid-column: 1; grid-row: 1; flex-wrap: wrap; align-content: start; justify-content: flex-start; gap: 0 10px; }
  .table-wrap > .pstrip { grid-column: 2; grid-row: 1; }
  .table-wrap > .mid { grid-column: 1; grid-row: 2 / span 3; flex-direction: column; align-items: stretch; min-height: 0; }
  .table-wrap > .emotes { grid-column: 2; grid-row: 2; }
  .table-wrap > .tray { grid-column: 2; grid-row: 3; min-height: 0; }
  .table-wrap > .ctrls { grid-column: 2; grid-row: 4; }
  .mid .cardzone { align-self: center; }
  .mid .info { flex: 1 1 auto; justify-content: flex-start; gap: 8px; }
  .mid .status { text-align: center; place-items: center; }
  .mid .carry { text-align: center; }
  .tbar .tbar-sp { display: none; }
  .tbar .deckn { text-align: left; min-width: 0; }
}
@media (orientation: landscape) and (min-width: 520px) and (max-height: 780px) { .stage > .table-wrap { --z: .86; } }
@media (orientation: landscape) and (min-width: 520px) and (max-height: 600px) { .stage > .table-wrap { --z: .72; } .emotes button { min-height: 34px; } }
@media (orientation: landscape) and (min-width: 520px) and (max-height: 480px) { .stage > .table-wrap { --z: .68; } .mid .rail .lab { display: none; } .mid .status { font-size: .86rem; } .mid .status small { display: none; } }
@media (orientation: landscape) and (min-width: 520px) and (max-height: 400px) { .stage > .table-wrap { --z: .5; } .tbar .room#tRoom { display: none; } .ctrls button { min-height: 40px; } .ctrls .roll-btn { min-height: 44px; } .emotes button { min-height: 30px; } }

/* Lobby */
.stage > .lobby-wrap { display: flex; flex-direction: column; gap: 8px; }
.lobby-wrap > * { flex: none; min-width: 0; }
.lob-top { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; }
.lob-code .code { font-size: 2.6rem; text-align: left; padding-left: 0; letter-spacing: .18em; }
.lob-code .hint { text-align: left; }
.lob-link { font-size: .7rem; word-break: break-all; opacity: .8; }
.lob-btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .lob-btns button { flex: 1 1 auto; min-height: 44px; padding: 8px 10px; }
.lob-top .qr { width: 118px; height: 118px; margin: 0; padding: 6px; }
.lob-players { padding: 10px 12px; } .lob-rules { padding: 10px 14px; }
.lob-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .lob-h h2 { margin: 0; }
.lobby-wrap .plist2 { grid-template-columns: 1fr 1fr; gap: 6px; }
.lobby-wrap .prow { padding: 6px 8px; gap: 8px; min-width: 0; }
.lobby-wrap .prow .av { width: 34px; height: 34px; }
.lobby-wrap .prow .nm { font-size: .92rem; }
.lobby-wrap .prow .tag { display: none; } .lobby-wrap .prow .nm .tag:first-of-type { display: inline-block; }
.lob-rules .opt { margin: 6px 0; } .lob-rules h2 { margin: 0 0 2px; }
.lob-foot { margin-top: auto; display: grid; gap: 8px; }
@media (max-height: 640px) { .lob-code .code { font-size: 2rem; } .lob-top .qr { width: 92px; height: 92px; } .lob-link { display: none; } .lob-rules h2 { display: none; } .lobby-wrap .prow { padding: 4px 8px; } .lobby-wrap .prow .av { width: 30px; height: 30px; } .big-btn { min-height: 50px; } }
@media (max-height: 540px) { .lob-top .qr { display: none; } .lob-top { grid-template-columns: 1fr; } .lob-code { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .lob-code .hint:first-child { display: none; } .lob-btns { margin: 0; flex: 1; } }
@media (orientation: landscape) and (min-width: 520px) {
  .stage > .lobby-wrap { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr auto; gap: 8px 14px; }
  .lobby-wrap > .tbar { grid-column: 1 / -1; }
  .lobby-wrap > .lob-top { grid-column: 1; grid-row: 2; } .lobby-wrap > .lob-rules { grid-column: 1; grid-row: 3; align-self: start; }
  .lobby-wrap > .lob-players { grid-column: 2; grid-row: 2 / span 2; align-self: start; }
  .lobby-wrap > .lob-foot { grid-column: 1 / -1; grid-row: 4; margin-top: 0; }
  .lobby-wrap .plist2 { grid-template-columns: 1fr; }
  .lob-top .qr { display: grid; width: 100px; height: 100px; } .lob-top { grid-template-columns: 1fr auto; } .lob-link { display: none; }
}
.emotes { flex-wrap: nowrap; } .emotes button { flex: 0 1 56px; min-width: 0 !important; padding-left: 4px; padding-right: 4px; }
.ed-foot { position: sticky; bottom: -16px; margin: 12px -16px -16px; padding: 10px 16px 16px; display: grid; grid-template-columns: 56px 1fr 1.4fr; gap: 8px; background: linear-gradient(180deg, rgba(18,63,56,0), #123f38 28%); }
.ed-foot button { min-height: 50px; padding: 6px; }

/* ---------- Einstellungen (settings.js setzt data-Attribute am <html>) ---------- */
html[data-card="s"] { --zm: .8; } html[data-card="l"] { --zm: 1.18; }
.cardzone { zoom: calc(var(--z) * var(--zm, 1)); }
/* Größe des Würfelfeldes: Obergrenze, der Rest wandert nach oben */
html[data-tray="s"] .table-wrap > .tray { max-height: 26dvh; }
html[data-tray="m"] .table-wrap > .tray { max-height: 36dvh; }
html[data-tray="l"] .table-wrap > .tray { max-height: 50dvh; }
html[data-tray="s"] .table-wrap > .emotes, html[data-tray="m"] .table-wrap > .emotes, html[data-tray="l"] .table-wrap > .emotes { margin-top: auto; }
/* Tasten */
html[data-btn-layout="stack"] .ctrls.two { grid-template-columns: 1fr; }
html[data-hand="left"][data-btn-layout="row"] .ctrls.two > :first-child { order: 2; }
/* Reihenfolge Hochformat: Emotes direkt über dem Würfelbrett, Tasten darunter (oder darüber) */
.table-wrap > .emotes { order: 4; } .table-wrap > .tray { order: 5; } .table-wrap > .ctrls { order: 6; }
html[data-btn-pos="top"] .table-wrap > .ctrls { order: 4; } html[data-btn-pos="top"] .table-wrap > .emotes { order: 5; } html[data-btn-pos="top"] .table-wrap > .tray { order: 6; }
html[data-emotes="off"] .emotes { display: none; }
@media (orientation: landscape) and (min-width: 520px) {
  html[data-tray="s"] .table-wrap > .tray { height: 30dvh; max-width: 60%; justify-self: center; width: 100%; }
  html[data-tray="m"] .table-wrap > .tray { height: 44dvh; max-width: 80%; justify-self: center; width: 100%; }
  html[data-tray="l"] .table-wrap > .tray { height: 58dvh; }
  html[data-tray="s"] .table-wrap > .tray, html[data-tray="m"] .table-wrap > .tray, html[data-tray="l"] .table-wrap > .tray { margin: 0; max-height: calc(100dvh - 190px); min-height: 96px; }
  /* Würfelbrett mit Obergrenze: die freie Höhe wandert nach oben, Emotes bleiben am Brett */
  html:not([data-tray="auto"]) .stage > .table-wrap { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  html:not([data-tray="auto"]) .table-wrap > .emotes { align-self: end; }
  html:not([data-tray="auto"])[data-btn-pos="top"] .stage > .table-wrap { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  html[data-btn-pos="top"] .stage > .table-wrap { grid-template-rows: auto auto auto minmax(0, 1fr); }
  html[data-btn-pos="top"] .table-wrap > .ctrls { grid-row: 2; } html[data-btn-pos="top"] .table-wrap > .emotes { grid-row: 3; } html[data-btn-pos="top"] .table-wrap > .tray { grid-row: 4; }
}
/* Bewegung */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation: none !important; transition-duration: .01ms !important; }
html[data-motion="reduce"] .banner { opacity: 1; }
/* Dialog */
#setDlg { width: min(94vw, 480px); }
#setDlg h2 { margin: 0 0 10px; }
#setBody { display: grid; gap: 12px; max-height: calc(86dvh - 130px); overflow: auto; overscroll-behavior: contain; }
#setDlg .seg { border-color: rgba(243,241,232,.55); display: flex; flex-wrap: wrap; }
#setDlg .seg button { flex: 1 1 auto; background: transparent; border: 0; color: var(--on-felt); min-height: 40px; padding: 8px 10px; }
#setDlg .seg button + button { border-left: 2px solid rgba(243,241,232,.55); }
#setDlg .seg button[aria-pressed="true"] { background: var(--on-felt); color: var(--felt-lo); }
#setDlg button { color: var(--on-felt); border-color: rgba(243,241,232,.55); background: rgba(0,0,0,.14); }
#setDlg button.primary { background: linear-gradient(180deg, #ffe08a, var(--gold) 55%, var(--gold-lo)); color: #3a2a00; border-color: #8a6410; }
#setDlg button.danger { border-color: #ff8f84; color: #ffb3aa; }
.set-row .set-t { font-weight: 700; margin-bottom: 5px; } .set-row .hint { margin: 4px 0 0; color: var(--on-felt-soft); font-size: .8rem; }

/* ---------- Größen nach Gerät: --bn = Tastenhöhe in px (Stufen nach Fenstergröße), --bk = Einstellung Klein/Normal/Groß ---------- */
:root { --bn: 52; --bk: 1; }
html[data-btn-size="s"] { --bk: .8; } html[data-btn-size="l"] { --bk: 1.22; }
@media (max-height: 700px) { :root { --bn: 48; } }
@media (max-height: 620px) { :root { --bn: 44; } }
@media (orientation: landscape) and (max-height: 400px) { :root { --bn: 40; } }
@media (min-width: 600px) and (min-height: 760px) { :root { --bn: 60; } }
@media (min-width: 900px) and (min-height: 900px) { :root { --bn: 68; } }
@media (min-width: 1500px) and (min-height: 1000px) { :root { --bn: 78; } }
html .ctrls button { min-height: calc(var(--bn) * var(--bk) * 1px); font-size: max(.9rem, calc(var(--bn) * var(--bk) * .0196rem)); }
html .ctrls .roll-btn { min-height: calc(var(--bn) * var(--bk) * 1.12px); font-size: max(1.05rem, calc(var(--bn) * var(--bk) * .0225rem)); }
html .ctrls button small { font-size: max(.68rem, calc(var(--bn) * .0138rem)); }
html .emotes button { min-height: calc(var(--bn) * .78px); font-size: max(1rem, calc(var(--bn) * .021rem)); }
.mid .status { font-size: max(.9rem, calc(var(--bn) * .0188rem)); } .mid .status small { font-size: max(.7rem, calc(var(--bn) * .0148rem)); }
.mid .carry { font-size: max(.82rem, calc(var(--bn) * .0165rem)); }
.rail img.ico { width: calc(var(--bn) * .58px); height: calc(var(--bn) * .58px); } .rail .die { --s: calc(var(--bn) * .54px); }
/* Karte wächst mit großen Bildschirmen (Handy bleibt bei 1) */
@media (min-width: 600px) and (min-height: 760px) { .stage > .table-wrap { --z: 1.15; } }
@media (min-width: 900px) and (min-height: 900px) { .stage > .table-wrap { --z: 1.4; } }
@media (min-width: 1500px) and (min-height: 1000px) { .stage > .table-wrap { --z: 1.7; } }
/* Breite: Hochformat auf Tablet, Querformat auf großen Fenstern */
@media (min-width: 640px) and (orientation: portrait) { #table > .wrap, #lobby > .wrap, #pvTable > .wrap { max-width: 720px; } }
@media (min-width: 900px) and (orientation: portrait) { #table > .wrap, #lobby > .wrap, #pvTable > .wrap { max-width: 860px; } }
@media (orientation: landscape) and (min-width: 1100px) { #table > .wrap, #lobby > .wrap, #pvTable > .wrap { max-width: 1200px; } }
@media (orientation: landscape) and (min-width: 1500px) { #table > .wrap, #lobby > .wrap, #pvTable > .wrap { max-width: 1500px; } }
@media (orientation: landscape) and (min-width: 1000px) and (min-height: 760px) { .stage > .table-wrap { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); --z: 1.3; } }
@media (orientation: landscape) and (min-width: 1500px) and (min-height: 1000px) { .stage > .table-wrap { grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); --z: 1.7; } }

/* ---------- Karte füllt den Platz (Tablet/Computer): settings.js fitCard setzt --zfit ---------- */
.cardzone { zoom: var(--zfit, calc(var(--z) * var(--zm, 1))); }
html:not([data-dev="phone"]) .mid .status { font-size: clamp(.98rem, calc(var(--zfit, 1) * .9rem), 1.9rem); }
html:not([data-dev="phone"]) .mid .status small { font-size: clamp(.78rem, calc(var(--zfit, 1) * .62rem), 1.25rem); }
html:not([data-dev="phone"]) .mid .carry { font-size: clamp(.88rem, calc(var(--zfit, 1) * .72rem), 1.4rem); }
html:not([data-dev="phone"]) .mid .rail { padding: calc(var(--zfit, 1) * 4px) calc(var(--zfit, 1) * 7px); }
html:not([data-dev="phone"]) .mid .rail .lab { font-size: max(.58rem, calc(var(--zfit, 1) * .42rem)); }
html:not([data-dev="phone"]) .mid .info { justify-content: space-between; }
.pchip { flex-basis: calc(var(--bn) * 1.7px); max-width: calc(var(--bn) * 2.6px); }
.pchip .av { width: calc(var(--bn) * .58px); height: calc(var(--bn) * .58px); }
.pchip .pn { font-size: max(.78rem, calc(var(--bn) * .0165rem)); } .pchip .ps { font-size: max(1.15rem, calc(var(--bn) * .0235rem)); }
@media (orientation: landscape) and (min-width: 1000px) and (min-height: 700px) { .stage > .table-wrap { grid-template-columns: minmax(260px, 34%) minmax(0, 1fr); } }

/* Vorschau im Einstellungsfenster: echter Tisch, verkleinert */
.pvw { position: sticky; top: 0; z-index: 3; margin: 0 auto; position: sticky; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 2px rgba(255,210,94,.45), 0 8px 24px rgba(0,0,0,.45); background: #123f38; flex: none; }
.pvstage { position: absolute !important; inset: auto !important; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; overflow: hidden; z-index: 1; }
.pvstage .die { pointer-events: none; }

/* ---------- Würfel-Emotes ---------- */
html .emotes { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 4px; }
html .emotes button { flex: 0 1 calc(var(--bn) * 1.1px); min-width: 0; min-height: calc(var(--bn) * .86px); padding: 2px; display: grid; place-items: center; border-radius: 12px; font-size: 1rem; }
html .emotes button svg { width: 100%; height: auto; max-height: calc(var(--bn) * .8px); display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); transition: transform .12s; }
html .emotes button:active svg { transform: scale(.88) rotate(-6deg); }
.float-emote { display: grid; justify-items: center; gap: 4px; width: max-content; max-width: calc(100vw - 16px); font-size: 1rem; text-shadow: none; }
.float-emote svg { width: 78px; height: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.float-emote span { background: rgba(10,25,28,.94); color: var(--on-felt); border: 2px solid rgba(255,210,94,.55); padding: 4px 11px; border-radius: 99px; font-weight: 800; font-size: .82rem; white-space: nowrap; }

/* ---------- Symbole und aufgeräumte Menüs ---------- */
.ic { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -.2em; }
button[data-i] { display: inline-flex; align-items: center; justify-content: center; gap: .5em; }
.menu-row { justify-content: flex-start !important; text-align: left; gap: .8em !important; min-height: 54px; }
.menu-row .ic { width: 1.5em; height: 1.5em; opacity: .92; }
.menu-row small { margin-left: auto; opacity: .65; font-weight: 600; font-size: .78rem; text-align: right; }
.rules-btn { width: 100%; justify-content: flex-start !important; text-align: left; gap: .7em !important; margin-top: 4px; min-height: 48px; }
.rules-btn span { display: grid; line-height: 1.2; } .rules-btn small { font-weight: 600; opacity: .7; font-size: .76rem; }
.set-tabs button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px !important; font-size: .78rem; flex: 1 1 0; min-width: 0; }
.set-tabs button .ic { width: 1.35em; height: 1.35em; }
/* Tisch-Menü (Bottom-Sheet) */
.sh-grip { width: 42px; height: 4px; border-radius: 4px; background: rgba(243,241,232,.3); margin: -6px auto 2px; }
.sh-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.1rem; padding: 0 4px; }
.sh-group { display: grid; gap: 2px; background: rgba(0,0,0,.2); border-radius: 16px; padding: 4px; }
.sh-row { display: flex; align-items: center; gap: 12px; min-height: 56px; width: 100%; text-align: left; border: 0 !important; background: transparent !important; border-radius: 12px; padding: 6px 10px; color: var(--on-felt); }
.sh-row:hover, .sh-row:active { background: rgba(255,255,255,.08) !important; }
.sh-ic { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.1); display: grid; place-items: center; flex: none; } .sh-ic .ic { width: 22px; height: 22px; }
.sh-t { display: grid; font-weight: 700; line-height: 1.2; } .sh-t small { opacity: .62; font-weight: 600; font-size: .78rem; }
.sh-go { margin-left: auto; opacity: .45; width: 1.1em; height: 1.1em; }
.sh-row.danger .sh-ic { background: rgba(255,120,110,.18); color: #ffb3aa; } .sh-row.danger .sh-t { color: #ffb3aa; }
.sh-back { justify-content: center; }
/* Spezialkarten */
.spc { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 12px; font-weight: 800; font-size: .8rem; line-height: 1; background: rgba(0,0,0,.25); border: 2px solid rgba(243,241,232,.35); white-space: nowrap; color: var(--on-felt); }
.spc.good { border-color: #5be38a; background: rgba(91,227,138,.14); } .spc.bad { border-color: #ff8f84; background: rgba(255,120,110,.14); }
.spc.big { font-size: 1.05rem; padding: 10px 14px; flex: none; }
.spc-btn { padding: 0 !important; min-height: 0 !important; border: 0 !important; background: none !important; border-radius: 12px; }
.spc-btn:active .spc { transform: scale(.95); } .spc-btn.off { opacity: .5; }
.hand { display: grid; gap: 5px; min-width: 0; }
.hand-h { display: flex; align-items: center; gap: 6px; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--on-felt-soft); } .hand-h small { margin-left: auto; letter-spacing: 0; font-size: .72rem; }
.hand-cards { display: flex; flex-wrap: wrap; gap: 6px; } .hand-empty { font-size: .78rem; color: var(--on-felt-soft); display: inline-flex; gap: 6px; align-items: center; }
.fxline { display: flex; flex-wrap: wrap; gap: 5px; } .fx { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: rgba(255,210,94,.15); color: #ffe08a; }
.pchip { position: relative; } .pchip .hbadge { position: absolute; right: 7px; bottom: 5px; display: inline-flex; align-items: center; gap: 2px; font-size: .62rem; font-weight: 800; color: #ffe08a; }
.sp-sheet { display: grid; gap: 10px; } .sp-head { display: flex; gap: 12px; align-items: center; }
.sp-kind { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .sp-kind.good { color: #5be38a; } .sp-kind.bad { color: #ff8f84; }
.sp-why { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: #ffd0ca; background: rgba(255,120,110,.12); padding: 8px 10px; border-radius: 10px; }
.sp-targets { display: grid; gap: 6px; } .sp-t { display: flex; justify-content: space-between; align-items: center; text-align: left; min-height: 48px; } .sp-t small { opacity: .7; font-weight: 600; }
/* Spielregeln-Fenster */
#rulesDlg { width: min(94vw, 520px); } #rulesDlg h2 { margin: 0 0 10px; }
#rlBody { display: grid; gap: 14px; max-height: calc(86dvh - 140px); overflow: auto; overscroll-behavior: contain; padding-right: 2px; }
.rl-sec { display: grid; gap: 10px; background: rgba(0,0,0,.16); border-radius: 14px; padding: 12px; } .rl-sec h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--gold); }
.rl-bal { margin: 0; padding-left: 18px; font-size: .82rem; color: var(--on-felt-soft); display: grid; gap: 3px; }
.rl-cards { display: grid; gap: 6px; } .rl-card { display: grid; gap: 4px; text-align: left; justify-items: start; padding: 8px 10px; opacity: .55; } .rl-card.on { opacity: 1; } .rl-card small { font-weight: 600; color: var(--on-felt-soft); font-size: .76rem; line-height: 1.25; }
#rulesDlg .seg { border-color: rgba(243,241,232,.55); display: flex; flex-wrap: wrap; }
#rulesDlg .seg button { flex: 1 1 auto; background: transparent; border: 0; color: var(--on-felt); min-height: 40px; padding: 8px 10px; }
#rulesDlg .seg button + button { border-left: 2px solid rgba(243,241,232,.55); }
#rulesDlg .seg button[aria-pressed="true"] { background: var(--on-felt); color: var(--felt-lo); }
#rulesDlg .seg button:disabled { opacity: 1; } #rulesDlg .seg button:disabled[aria-pressed="false"] { opacity: .5; }
#rulesDlg button { color: var(--on-felt); border-color: rgba(243,241,232,.55); background: rgba(0,0,0,.14); }
#rulesDlg .rl-card { border-color: rgba(243,241,232,.3); } #rulesDlg .rl-card.on { border-color: var(--gold); background: rgba(255,210,94,.1); }

/* Lobby: Admin-Krone, Offline gedimmt, kompakte Admin-Tasten */
.lobby-wrap .prow .crown { margin-right: 4px; font-size: .85em; }
.lobby-wrap .prow.offl { opacity: .55; }
.lobby-wrap .prow button.quiet { min-width: 30px; width: 30px; padding: 0; flex: none; }

/* Installations-Anleitung */
#installDlg p { margin: 0 0 8px; }
.inst-steps { margin: 4px 0 0; padding-left: 22px; display: grid; gap: 8px; line-height: 1.4; }
.inst-steps .ic { width: 1.1em; height: 1.1em; vertical-align: -.2em; }

/* Ladeanzeige statt Emoji, sichtbarer Tastaturfokus */
.spin { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; border: 5px solid rgba(255,255,255,.18); border-top-color: var(--gold, #ffd25e); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }
button:focus-visible, [role="button"]:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--gold, #ffd25e); outline-offset: 2px; }

/* Handy: Namen in den Spielerchips nicht zu früh abschneiden */
@media (max-width: 480px) {
  .pchip { padding: 7px 6px 9px; gap: 2px 6px; }
  .pchip .av, #pvTable .pchip .av { width: 26px; height: 26px; font-size: .75rem; }
  .pchip .pn { font-size: .74rem; letter-spacing: -.01em; }
  .pchip .pn small { font-size: .52rem; margin-left: 1px; }
}