/* ==========================================================================
   WMJ Spieltisch – Plattform (Start, Lobby, Spielrahmen, Overlays)
   ========================================================================== */
body.games { height: 100dvh; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#app { position: relative; z-index: 1; height: 100dvh; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.screen.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
[data-ic] { display: contents; }

.field-lbl { font: 800 10.5px var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.field {
  width: 100%; padding: 6px 2px 7px; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent;
  color: var(--ink); font: 700 26px/1.1 var(--hand); outline: none; user-select: text; -webkit-user-select: text;
}
.field::placeholder { color: var(--ink-3); opacity: .7; }
.field:focus { border-bottom-color: var(--red); }
.link { background: none; border: 0; color: var(--teal); font: 700 13.5px var(--text); padding: 4px 0; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.iconbtn {
  width: 42px; height: 42px; flex: none; border-radius: 12px; border: 0; cursor: pointer; display: grid; place-items: center;
  color: #f1e7d4; background: rgba(28, 18, 12, .62); box-shadow: inset 0 0 0 1px rgba(241, 231, 212, .14);
}
.iconbtn:active { transform: scale(.94); }

/* ---------------- Start ---------------- */
.home-wrap { width: 100%; max-width: 560px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 18px 40px; }
.home-head { text-align: center; margin: 10px 0 22px; }
.home-title { margin: 6px 0 0; font: 800 58px/.95 var(--display); font-variation-settings: "opsz" 120, "SOFT" 70; letter-spacing: -.02em; color: var(--on-wood); }

.pass { padding: 18px 20px 20px; transform: rotate(-.6deg); }
.pass-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px dashed var(--line-2); }
.pass-no { font: 700 13px var(--hand); font-size: 18px; color: var(--ink-3); }
.pass-body { display: flex; align-items: center; gap: 18px; }
.pass-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.pass-av {
  --s: 96px; width: var(--s); height: var(--s); flex: none; border-radius: 50%; border: 0; padding: 9px; cursor: pointer;
  background: var(--grain), radial-gradient(circle at 35% 30%, #fffaf0, #e7dbc2 72%);
  box-shadow: 0 0 0 4px var(--c, var(--red)), 0 3px 0 4px rgba(0, 0, 0, .25), 0 10px 18px -6px rgba(0, 0, 0, .5);
  transition: transform .3s var(--spring);
}
.pass-av:hover { transform: rotate(-8deg) scale(1.04); }
.pass-av .av-svg { width: 100%; height: 100%; overflow: visible; }

.home-actions { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.btn.big { font-size: 18px; padding: 17px 18px; }
.join { padding-top: 4px; }
.join-lbl { margin-bottom: 8px; text-align: center; }
.join-row { display: flex; gap: 10px; }
.codefield {
  flex: 1; min-width: 0; height: 56px; text-align: center; padding: 0 0 0 .5em; letter-spacing: .5em; text-transform: uppercase;
  font: 800 28px var(--display); color: #2c1d10; border: 0; border-radius: 10px; outline: none; user-select: text; -webkit-user-select: text;
  background: var(--grain), linear-gradient(160deg, #efd8a8, #d9b479);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(120, 76, 30, .3), 0 3px 0 #8a5d2c, 0 8px 14px -6px rgba(0, 0, 0, .5);
}
.codefield::placeholder { color: rgba(44, 29, 16, .35); }
.codefield:focus { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 #8a5d2c, 0 0 0 3px rgba(217, 162, 58, .55); }
.join-row .btn { flex: none; min-width: 124px; }
#bTable { color: var(--on-wood-2); }

.shelf-head { display: flex; align-items: baseline; justify-content: space-between; margin: 34px 2px 12px; }
.shelf-head h2 { margin: 0; font: 800 26px var(--display); font-variation-settings: "opsz" 60, "SOFT" 50; color: var(--on-wood); }
.shelf { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px; padding-bottom: 6px; }
.box { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.box .cover { position: relative; border-radius: 5px; box-shadow: 6px 0 0 -2px rgba(0, 0, 0, .3), 0 12px 18px -8px rgba(0, 0, 0, .7); transition: transform .35s var(--spring); }
.box .cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grain), linear-gradient(105deg, rgba(255, 255, 255, .14), transparent 30%, transparent 70%, rgba(0, 0, 0, .15)); mix-blend-mode: multiply; pointer-events: none; }
.box .cover svg { width: 100%; height: auto; border-radius: 5px; }
.box b { font: 700 15px var(--display); color: var(--on-wood); }
.box small { display: block; font: 600 12px var(--text); color: var(--on-wood-3); }
.box:nth-child(3n+1) .cover { transform: rotate(-1.5deg); } .box:nth-child(3n+3) .cover { transform: rotate(1.2deg); }
.shelf::after { content: ""; grid-column: 1 / -1; height: 10px; margin-top: -14px; border-radius: 3px; background: linear-gradient(#5a4130, #3a2a1f); box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .6); display: none; }
.home-note { color: var(--on-wood-2); font-size: 14px; text-align: center; margin-top: 26px; }

/* ---------------- Lobby ---------------- */
.lobby-wrap { width: 100%; max-width: 640px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px 30px; }
.lobby-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lobby-head .tiles { --t: 52px; margin-top: 8px; }
.lobby-head { align-items: flex-start; flex-wrap: nowrap; }
.lobby-tools { flex: none; display: flex; align-items: flex-start; gap: 8px; }
.lobby-qr { width: 76px; height: 76px; padding: 5px; border: 0; border-radius: 8px; cursor: zoom-in; background: #fff; box-shadow: 0 0 0 3px var(--paper), var(--shadow-1); rotate: 2deg; transition: transform .25s var(--spring); }
.lobby-qr:hover { transform: scale(1.06) rotate(-2deg); }
.lobby-qr img { display: block; width: 100%; height: 100%; }

.seats { margin-top: 20px; padding: 18px 16px 16px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 4px 14px; }
.sec-head h3 { margin: 0; font: 800 22px var(--display); font-variation-settings: "opsz" 48, "SOFT" 50; }
.sec-head.on-wood { margin: 28px 2px 14px; color: var(--on-wood); }
.players { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px 8px; }
.ptile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 2px; text-align: center; animation: popIn .45s var(--spring) both; }
.ptile.clickable { cursor: pointer; }
.ptile .av { --s: 64px; }
.ptile .nm { font: 700 22px/1 var(--hand); color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptile .badge { position: absolute; top: -4px; right: calc(50% - 40px); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--mustard); color: #2b1d08; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.ptile .badge .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.ptile .badge.off { background: var(--paper-3); color: var(--ink-2); left: calc(50% - 40px); right: auto; }
.ptile .you { font: 800 9.5px var(--text); letter-spacing: .14em; color: var(--c); text-transform: uppercase; margin-top: -4px; }
.ptile.empty { justify-content: center; min-height: 104px; border: 1.5px dashed var(--line-2); border-radius: 12px; color: var(--ink-3); font: 600 12.5px var(--text); padding: 8px; animation: none; }
.tables-info { margin-top: 12px; display: flex; align-items: center; gap: 6px; color: var(--ink-2); font: 700 13px var(--text); }
.tables-info:empty { display: none; }
.tables-info .ic { width: 17px; height: 17px; }

.picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 12px; }
.pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; color: var(--on-wood); }
.pick .cover { position: relative; width: 100%; border-radius: 5px; box-shadow: 5px 0 0 -2px rgba(0, 0, 0, .3), 0 10px 16px -8px rgba(0, 0, 0, .7); transition: transform .35s var(--spring), box-shadow .3s; }
.pick .cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grain), linear-gradient(105deg, rgba(255, 255, 255, .14), transparent 30%, transparent 70%, rgba(0, 0, 0, .15)); mix-blend-mode: multiply; pointer-events: none; }
.pick .cover svg { width: 100%; height: auto; border-radius: 5px; }
.pick b { font: 700 15px var(--display); }
.pick small { font: 600 11.5px var(--text); color: var(--on-wood-3); }
.pick.sel .cover { transform: translateY(-8px) rotate(-2deg); box-shadow: 0 0 0 3px var(--mustard), 5px 0 0 -2px rgba(0, 0, 0, .3), 0 20px 24px -10px rgba(0, 0, 0, .8); }
.pick.sel b { color: var(--sel-c, var(--mustard)); }
.pick.locked { cursor: default; }
.pick.bad small { color: var(--bad, #e59a85); }
.pick .adult { position: absolute; top: -8px; right: -6px; z-index: 2; font: 800 10px var(--text); color: #fff6ea; background: var(--ink); border-radius: 99px; padding: 4px 7px; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }

.options { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.opt > span { font: 700 15px var(--text); }
.opt.col { flex-direction: column; align-items: stretch; }
.seg { display: inline-flex; flex-wrap: wrap; background: rgba(43, 35, 30, .08); border-radius: 10px; padding: 3px; gap: 3px; }
.seg button { border: 0; background: transparent; padding: 7px 12px; border-radius: 8px; font: 700 15px var(--display); color: var(--ink-2); cursor: pointer; }
.seg button.on { background: var(--ink); color: var(--paper); }
.seg.locked button { cursor: default; }

.start-zone { margin-top: 22px; }
.start-zone .hint { text-align: center; color: var(--on-wood-2); font: 600 14px var(--text); margin-top: 10px; }
.waiting { text-align: center; padding: 16px; font: 600 16px var(--text); color: var(--ink-2); }
.waiting.on-wood { color: var(--on-wood-2); }
.dots::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.lobby-foot { display: flex; justify-content: center; gap: 2px; flex-wrap: wrap; margin-top: 18px; color: var(--on-wood-2); }

/* Tisch-Lobby */
.tlobby { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(300px, 34%) 1fr; gap: 30px; padding: 32px; }
.tl-left { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; text-align: center; transform: rotate(-.6deg); }
.tl-url { font: 800 clamp(20px, 2.3vw, 30px) var(--display); color: var(--teal); margin-bottom: 14px; word-break: break-all; }
.tl-left .tiles { margin: 6px 0 4px; }
.tl-qr { width: min(220px, 64%); border-radius: 8px; margin-top: 18px; }
.tl-right { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.tl-game { display: flex; align-items: center; gap: 26px; }
.tl-game .cover { width: clamp(110px, 12vw, 160px); flex: none; transform: rotate(-3deg); border-radius: 6px; box-shadow: 0 16px 26px -10px rgba(0, 0, 0, .8); }
.tl-game .cover svg { width: 100%; height: auto; border-radius: 6px; }
.tl-game h2 { margin: 0; font: 800 clamp(40px, 5vw, 68px)/1 var(--display); font-variation-settings: "opsz" 120, "SOFT" 60; color: var(--on-wood); }
.tl-game p { margin: 8px 0 0; color: var(--on-wood-2); font-size: 20px; }
.tl-players { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 26px; }
.tl-p { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 140px; animation: popIn .5s var(--spring) both; }
.tl-p .av { --s: 108px; }
.tl-p b { font: 700 30px/1 var(--hand); color: var(--on-wood); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-wait { font: 600 22px var(--text); color: var(--on-wood-2); text-align: center; }
body.tablemode .lobby-wrap { display: none; }
@media (max-width: 760px) { .tlobby { grid-template-columns: 1fr; overflow-y: auto; } }

/* ---------------- Spielrahmen ---------------- */
.gbar { flex: none; display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 10px 8px; }
.gchip { flex: none; border: 0; cursor: pointer; padding: 0; background: none; }
.gchip .tiles { --t: 25px; gap: 3px; }
.gchip .tile { animation: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 0 #8a5d2c; }
.gtitle { flex: none; font: 800 18px var(--display); font-variation-settings: "opsz" 36, "SOFT" 50; color: var(--on-wood); }
.gturn { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px var(--text); color: var(--on-wood); }
.gturn .av { --s: 30px; }
.gturn.swap > * { animation: turnIn .55s var(--spring) both; }
.gturn.swap > .gt { animation-delay: .06s; }
@keyframes turnIn { from { opacity: 0; transform: translateY(-12px) scale(.8); } }
/* Mitte der Kopfleiste: Zeile 1 wer dran ist bzw. Status, Zeile 2 klein der Spielfortschritt („Runde 3/13“) */
.gturn .gt { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.gturn .gt b { font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gturn .gt small { font: 800 10.5px/1.2 var(--text); letter-spacing: .08em; color: var(--on-wood-3); white-space: nowrap; }
body.tablemode .gturn { font-size: 18px; } body.tablemode .gturn .gt small { font-size: 13px; }

/* Vollbild-Spiele (Street View, Minigolf): das Bild reicht bis ganz nach oben, Kopfleiste und Spieler liegen darüber.
   --hud = Unterkante der Kopfleiste; die Spiele legen ihre Leiste dort ab und alles Weitere darunter (--top). */
#game.bleed { --hud: calc(max(8px, env(safe-area-inset-top)) + 50px); }
#game.bleed .gbar { position: absolute; left: 0; right: 0; top: 0; z-index: 20; max-width: none; padding-bottom: 16px; pointer-events: none;
  background: linear-gradient(rgba(6, 8, 10, .5), rgba(6, 8, 10, .22) 62%, rgba(6, 8, 10, 0)); }
#game.bleed .gbar > * { pointer-events: auto; }
#game.bleed .gturn { pointer-events: none; }
#game.bleed .gturn .gt:not(:empty) { padding: 5px 12px; border-radius: 99px; background: rgba(20, 12, 8, .62); text-shadow: none; }
#game.bleed .stage { position: absolute; inset: 0; }
:root { --rail-h: 46px; } body.tablemode { --rail-h: 66px; }
.hud { --top: var(--hud, 0px); --bot: max(10px, env(safe-area-inset-bottom)); }
.hud:has(> .hud-rail:not([hidden])) { --top: calc(var(--hud, 0px) + var(--rail-h)); }
.hud-rail { position: absolute; left: 0; right: 0; top: var(--hud, 0px); z-index: 9; pointer-events: none; }
.hud-rail .rail-track { pointer-events: auto; padding-inline: 8px; }
.hud-rail .rail-chip { box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.hud-rail .rail-chip.cur { box-shadow: 0 0 0 3px var(--turn-ring), 0 2px 8px rgba(0, 0, 0, .5); }
.stage { flex: 1; min-height: 0; position: relative; }
@media (max-width: 430px) { .gtitle { display: none; } }

.react-bar { position: absolute; right: 10px; top: calc(max(8px, env(safe-area-inset-top)) + 52px); z-index: 30; display: flex; gap: 4px; padding: 6px; border-radius: 99px; animation: popIn .3s var(--spring); }
.react-bar button { border: 0; background: none; padding: 2px; cursor: pointer; border-radius: 50%; transition: transform .2s var(--spring); }
.react-bar button:active { transform: scale(1.25) rotate(-10deg); }
.react-float { position: fixed; z-index: 80; pointer-events: none; display: flex; align-items: center; gap: 0; animation: rise 2.8s var(--ease) forwards; }
.react-float .av { --s: 38px; margin-right: -10px; z-index: 1; }
.react-float .sticker { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); transform: rotate(-8deg); }
body.tablemode .react-float .av { --s: 60px; } body.tablemode .react-float .sticker { width: 74px; height: 74px; }
@keyframes rise { 0% { opacity: 0; transform: translateY(24px) scale(.5) rotate(-20deg); } 14% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-220px) rotate(8deg); } }

/* Zugwechsel-Banner: Papierschleife */
.turn-banner {
  position: fixed; left: 50%; top: 40%; z-index: 60; pointer-events: none; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 14px; padding: 14px 30px 14px 16px; color: var(--ink);
  background: var(--grain), var(--card); border-radius: 6px; box-shadow: var(--shadow-2);
  border-left: 8px solid var(--c, var(--red)); white-space: nowrap; animation: banner 1.2s var(--ease) forwards;
}
.turn-banner .av { --s: 58px; }
.turn-banner div { font: 800 28px/1 var(--display); font-variation-settings: "opsz" 60, "SOFT" 60; }
.turn-banner small { display: block; margin-top: 6px; font: 600 14px var(--text); color: var(--ink-2); }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -30%) rotate(-4deg); } 16% { opacity: 1; transform: translate(-50%, -50%) rotate(-1deg); } 78% { opacity: 1; transform: translate(-50%, -50%) rotate(-1deg); } 100% { opacity: 0; transform: translate(-50%, -64%) rotate(1deg); } }

.spectator-note { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 5; padding: 7px 14px; border-radius: 99px; background: rgba(20, 12, 8, .75); color: #e2d4bd; font: 700 13px var(--text); white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.spectator-note .ic { width: 16px; height: 16px; }

/* ---------------- Overlays ---------------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(14, 8, 4, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadeIn .25s; }
.sheet { position: relative; color: var(--ink); background: var(--grain), var(--fibers), var(--paper); width: 100%; max-width: 420px; max-height: 92dvh; overflow-y: auto; padding: 26px 22px 20px; text-align: center; border-radius: 10px; box-shadow: var(--shadow-2); }
.sheet::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line-2); border-radius: 5px; pointer-events: none; }
.sheet h2 { margin: 0 0 14px; font: 800 28px/1.1 var(--display); font-variation-settings: "opsz" 60, "SOFT" 60; }
.sheet p { color: var(--ink-2); margin: 0 0 14px; }
.sheet .stack { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.sheet .stack.menu .btn { justify-content: flex-start; }
.sheet .btn.ghost { color: var(--ink-2); }
.sheet.rules { text-align: left; max-width: 500px; }
.sheet.rules h2 { margin-top: 4px; }
.rulebook { list-style: none; counter-reset: r; padding: 0; margin: 4px 0 18px; }
.rulebook li { counter-increment: r; position: relative; padding: 0 0 12px 42px; margin: 0 0 12px; border-bottom: 1px dashed var(--line); color: var(--ink-2); font-size: 15px; }
.rulebook li:last-child { border-bottom: 0; }
.rulebook li::before { content: counter(r); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 800 14px var(--display); }
.rulebook b { display: block; color: var(--ink); font: 800 16px var(--display); margin-bottom: 2px; }
.av-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; margin-bottom: 18px; }
.av-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 6px; border-radius: 10px; border: 0; background: none; cursor: pointer; transition: transform .25s var(--spring); }
.av-opt .av { --s: 58px; }
.av-opt small { font: 700 18px/1 var(--hand); color: var(--ink-2); }
.av-opt:hover { transform: translateY(-3px); }
.av-opt.sel { background: rgba(196, 71, 47, .1); }
.av-opt.sel .av { --c: var(--red); }
.av-opt.sel .av-svg { animation: wiggle .6s ease-in-out 2; }
.ps-head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ps-head .av { --s: 96px; }
.ps-head b { font: 700 34px/1 var(--hand); }
.ps-head .tiles { --t: 46px; margin: 4px 0; }

.sheet.end { max-width: 460px; }
.sheet.end h2 { font-size: 34px; margin-bottom: 4px; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 18px 0 8px; }
.podium .pl { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.podium .pl .av { --s: 54px; }
.podium .pl.first .av { --s: 78px; }
.podium .pl b { font: 700 22px/1 var(--hand); max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .step { width: 82px; display: grid; place-items: start center; padding-top: 8px; font: 800 24px var(--display); color: var(--paper); border-radius: 4px 4px 0 0; background: var(--grain), var(--ink); }
.podium .first .step { height: 70px; background: var(--grain), var(--red); }
.podium .second .step { height: 50px; background: var(--grain), var(--teal); }
.podium .third .step { height: 36px; background: var(--grain), var(--mustard); color: var(--ink); }
.crown { color: var(--mustard); margin-bottom: -6px; animation: bob 1.8s ease-in-out infinite; }
.crown .ic { width: 30px; height: 30px; fill: var(--mustard); stroke: var(--mustard-d); }
.rank { display: flex; flex-direction: column; gap: 0; margin: 12px 0 4px; text-align: left; border-top: 1.5px solid var(--ink); }
.rank .r { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.rank .r .n { font: 800 18px var(--display); width: 20px; color: var(--ink-3); }
.rank .r .av { --s: 34px; }
.rank .r .nm { flex: 1; min-width: 0; font: 700 22px/1 var(--hand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .r .nm small { display: block; font: 600 12px var(--text); color: var(--ink-3); margin-top: 3px; }
.rank .r .pt { font: 800 24px var(--display); }
.rank .r.w .pt { color: var(--red); }
.result-big { font: 800 60px/1 var(--display); color: var(--red); margin: 6px 0 0; }
.result-big small { display: block; font: 800 11px var(--text); letter-spacing: .16em; color: var(--ink-3); margin-top: 6px; }

/* Toast, Verbindung, Effekte */
.toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 64px); z-index: 90; max-width: 92vw;
  transform: translate(-50%, -24px); opacity: 0; pointer-events: none; transition: transform .35s var(--spring), opacity .25s;
  background: var(--grain), var(--card); color: var(--ink); padding: 11px 18px; border-radius: 8px; border-left: 5px solid var(--teal);
  font: 700 14.5px var(--text); box-shadow: var(--shadow-2); text-align: center;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.err { border-left-color: var(--red); }
.conn { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 10px); transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 8px; background: var(--grain), var(--card); color: var(--ink); border-left: 5px solid var(--red); font: 700 14px var(--text); box-shadow: var(--shadow-2); }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--red); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.confetti { position: fixed; top: -16px; width: 9px; height: 14px; z-index: 70; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) translateX(var(--dx)) rotate(var(--rot)); } }
.ember { position: fixed; bottom: -10px; border-radius: 50%; background: #e08a3c; box-shadow: 0 0 8px #c4602a; z-index: 70; pointer-events: none; animation: emberRise linear forwards; }
@keyframes emberRise { to { transform: translateY(-110vh) translateX(var(--dx)); opacity: 0; } }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
.shake { animation: shake .5s; }

/* Gemeinsame Spielflächen */
.mat { position: absolute; inset: 0; }
.felt { background: var(--feltnoise), radial-gradient(120% 90% at 50% 30%, var(--felt-hi, #2d5a47), var(--felt-lo, #1b372b)); }

/* ---------------- Animationen (fx.js) ---------------- */
.fx-layer { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.fx-fly { position: fixed; pointer-events: none; will-change: transform; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .4)); perspective: 800px; }
.fx-fly > * { width: 100%; height: 100%; }
.fx-fly .fx-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.fx-fly .fx-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fx-fly .fx-face > * { width: 100% !important; height: 100% !important; }
.fx-fly .fx-back { transform: rotateY(180deg); }
.fx-ghost { position: fixed; z-index: 70; pointer-events: none; margin: 0 !important; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .45)); transition: none !important; animation: none !important; }
.fx-dragsrc { opacity: .25 !important; }
.fx-pending { visibility: hidden !important; } /* abgelegt, wartet auf den Server */
.drop-ok { outline: 3px dashed rgba(251, 246, 234, .55); outline-offset: 4px; border-radius: 10px; transition: outline-color .15s; }
.drop-hover { outline: 3px solid var(--mustard) !important; outline-offset: 5px; }
.fx-landed { animation: fxLand .32s var(--spring); }
@keyframes fxLand { from { transform: scale(1.08) rotate(-2deg); } }
.fx-bump { animation: fxBump .4s var(--spring); }
@keyframes fxBump { 40% { transform: scale(1.14); } }
.fx-tick { display: inline-block; animation: fxTick .45s var(--spring); }
@keyframes fxTick { 0% { transform: translateY(-60%) scale(1.3); opacity: .2; } }

/* ---------------- Spielerleiste mit Zug-Marker ---------------- */
.rail { flex: none; min-width: 0; }
.rail-track { position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 7px 7px 8px; width: fit-content; max-width: 100%; margin: 0 auto; }
.rail.over .rail-track { -webkit-mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
.rail-track::-webkit-scrollbar { display: none; }
.rail-chip { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 6px; padding: 3px 11px 3px 3px; border-radius: 99px; color: var(--ink); background: var(--grain), var(--paper); font: 700 18px/1 var(--hand); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); transition: transform .35s var(--spring), opacity .3s; white-space: nowrap; }
.rail-chip .av { --s: 26px; }
.rail-chip .val { font: 800 14px var(--display); color: var(--ink-2); }
.rail-chip .val:empty { display: none; }
/* wer dran ist: kräftiger Rahmen in Kontrastfarbe */
.rail-chip.cur { box-shadow: 0 0 0 3px var(--turn-ring), 0 2px 4px rgba(0, 0, 0, .35); }
.rail[hidden] { display: none; }
.rail-chip.done { opacity: .55; }
.rail-chip.out { opacity: .4; filter: grayscale(.7); }
.rail.compact .rail-chip .nm { display: none; }
.rail.compact .rail-chip { padding-right: 9px; }
body.tablemode .rail-track { justify-content: center; gap: 12px; padding: 8px 6px 10px; }
body.tablemode .rail-chip { font-size: 26px; padding: 5px 16px 5px 5px; }
body.tablemode .rail-chip .av { --s: 40px; }
body.tablemode .rail-chip .val { font-size: 20px; }

/* Einsatz an einer Spielerpille (Poker, Roulette): kleiner Chip + Betrag */
.bet-pill { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px 1px 2px; border-radius: 99px; font: 800 11px var(--text); color: var(--ink); background: rgba(217, 162, 58, .3); }
.bet-pill > i { width: 12px; height: 12px; }
body.tablemode .bet-pill { font-size: 15px; } body.tablemode .bet-pill > i { width: 16px; height: 16px; }

/* Anzahl auf einem Nachziehstapel (Skyjo, Uno, The Game): Papierplättchen unten rechts am Stapel */
.pile-cnt { position: absolute; right: -8px; bottom: -8px; z-index: 3; min-width: 26px; padding: 3px 6px; border-radius: 99px; text-align: center; color: var(--ink); background: var(--grain), var(--paper); font: 800 12px var(--display); font-variant-numeric: tabular-nums; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
body.tablemode .pile-cnt { min-width: 34px; padding: 4px 8px; font-size: 16px; }

/* kleine Hinweis-Pille (nur wo nötig, max. 2–3 Wörter) */
.cue { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; font: 800 12px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--grain), var(--mustard); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); animation: cueIn .4s var(--spring); white-space: nowrap; }
.cue.red { background: var(--grain), var(--red); color: #fff6ea; }
.cue.dark { background: rgba(20, 12, 8, .72); color: var(--on-wood); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
@keyframes cueIn { from { opacity: 0; transform: translateY(6px) scale(.9); } }
/* Glühen für Dinge, die man jetzt antippen kann */
.glow { animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { filter: drop-shadow(0 0 10px rgba(255, 214, 120, .85)); } }

/* ---------------- 3D-Würfel (dice.js) ---------------- */
.dtray { position: relative; perspective: 1500px; perspective-origin: 50% 45%; overflow: hidden; }
.dt-floor { position: absolute; inset: 0; pointer-events: none; }
.dt-hold { position: absolute; left: 6px; right: 6px; top: 4px; height: calc(var(--d) + 14px); border-radius: 10px; background: rgba(0, 0, 0, .1); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25); pointer-events: none; }
.die3d { --h: calc(var(--d) / 2); position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); transform-style: preserve-3d; will-change: transform; }
.die3d.tap { cursor: pointer; }
.d3-sh { position: absolute; left: 6%; top: 14%; width: 92%; height: 92%; border-radius: 26%; background: rgba(0, 0, 0, .5); filter: blur(5px); }
.d3-body { position: absolute; inset: 0; transform-style: preserve-3d; }
.d3-cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.d3-f { position: absolute; inset: 0; border-radius: 13%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: radial-gradient(120% 120% at 30% 25%, #fffdf6, #efe6d3 60%, #ddd0b4); box-shadow: inset 0 0 0 1px rgba(150, 125, 90, .25), inset 0 -3px 6px rgba(150, 125, 90, .25); }
.die3d .core { position: absolute; inset: 1.5%; background: #d8cbb0; border-radius: 8%; }
.die3d .core.cx { transform: rotateY(90deg); } .die3d .core.cy { transform: rotateX(90deg); }
.die3d .pips { position: absolute; inset: 15%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.die3d .pips i { width: 72%; height: 72%; margin: auto; border-radius: 50%; }
.die3d .pips i.on { background: radial-gradient(circle at 40% 35%, #4a3d36, #1f1814 70%); box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .6); }
.die3d .pips i.on.red { background: radial-gradient(circle at 40% 35%, #d65a40, #8f2a1a 70%); }
.die3d.held .d3-f { box-shadow: inset 0 0 0 3px var(--mustard), inset 0 -3px 6px rgba(150, 125, 90, .25); }
.die3d.held .d3-sh { opacity: .6; }
/* WebGL-Variante: Leinwand + unsichtbare Tippflächen über den Würfeln */
.dtray.gl .dt-gl { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.dtray.gl .dt-gl canvas { display: block; width: 100%; height: 100%; }
.dtray.gl .die3d { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 30%; transform-style: flat; will-change: transform; z-index: 2; }
.dtray.gl .dt-hold { z-index: 0; height: calc(var(--d) * 1.6); }

/* ---------------- Tisch-Physik (table.js) ---------------- */
/* „von Hand hingelegt“: eigene rotate/translate-Eigenschaften, damit transform-Animationen unberührt bleiben */
.tilt { rotate: var(--jr, 0deg); translate: var(--jx, 0px) var(--jy, 0px); }
/* Karten unter der obersten Karte eines Ablagestapels */
.pile-under { position: absolute; inset: 0; pointer-events: none; filter: brightness(.94); }
.pile-under > * { width: 100% !important; height: 100% !important; margin: 0 !important; animation: none !important; }
/* Aufdecken: überall dieselbe Drehung */
.fx-flipin { animation: fxFlipIn .55s var(--ease) both; }
@keyframes fxFlipIn { 0% { transform: perspective(500px) rotateY(90deg) scale(.95); } 65% { transform: perspective(500px) rotateY(-6deg) scale(1.03); } 100% { transform: none; } }
/* Papier (Blöcke, Zettel) liegt nie ganz gerade */
.paper-lay { rotate: -.35deg; }
.paper-lay.r { rotate: .4deg; }
/* Austeilen: Karten kommen vom Stapel geflogen – überall gleich */
.fx-dealin { animation: fxDeal .5s var(--spring) backwards; }
@keyframes fxDeal { from { transform: translateY(-90px) rotate(-16deg) scale(.6); opacity: 0; } }

/* Höchstbreite der Spielfläche (je Spiel, siehe catalog.js → maxw) */
#game .gbar { width: 100%; max-width: var(--maxw, none); margin-inline: auto; }
#game .stage > :not(.spectator-note) { max-width: var(--maxw, none); margin-inline: auto; }

/* ---------------- Spielereihe (shelf.js): Schachteln nebeneinander, darunter Name + Spielerzahl ---------------- */
.strip { --cw: 104px; position: relative; margin: 0 -16px; }
.strip-track { position: relative; display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 14px 24px 8px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); mask: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); }
.strip-track::-webkit-scrollbar { display: none; }
.spine { position: relative; flex: none; width: var(--cw); padding: 0; border: 0; background: none; cursor: pointer; color: var(--on-wood); text-align: center; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.spine .box { position: relative; width: 100%; margin-bottom: 7px; transition: transform .3s cubic-bezier(.2, .9, .25, 1.3), rotate .3s, translate .3s; }
.spine .cover { border-radius: 5px; box-shadow: 0 10px 16px -8px rgba(0, 0, 0, .75); transition: box-shadow .3s; }
.spine .cover svg { display: block; width: 100%; height: auto; border-radius: 5px; }
.spine .adult { position: absolute; top: -8px; right: -4px; z-index: 2; font: 800 10px var(--text); color: #fff6ea; background: var(--ink); border-radius: 99px; padding: 4px 7px; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.spine .nm { font: 800 14px/1.15 var(--display); max-width: 100%; }
.spine .pc { display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--text); color: var(--on-wood-3); }
.spine .pc svg { width: 15px; height: 15px; }
@media (hover: hover) { .spine:hover .box { transform: translateY(-6px) scale(1.03); rotate: 0deg; translate: 0 0; } .spine:hover .cover { box-shadow: 0 18px 22px -10px rgba(0, 0, 0, .8); } }
.spine.sel .box { transform: translateY(-4px); rotate: 0deg; translate: 0 0; }
.spine.sel .cover { box-shadow: 0 0 0 3px var(--mustard), 0 16px 22px -10px rgba(0, 0, 0, .8); }
.spine.bad .cover { filter: saturate(.45) brightness(.78); }
.spine.bad .pc { color: var(--bad, #e59a85); }
.strip.locked .spine { cursor: default; }
.strip.grabbing .strip-track, .strip.grabbing .spine { cursor: grabbing; }
.strip.grabbing .spine .box { transform: none; }
.strip-track { user-select: none; }
@media (min-width: 700px) { .strip { --cw: 120px; margin: 0; } }
.lobby-head .tiles { --t: clamp(40px, 11vw, 52px); }

/* Laufschrift für zu lange Texte (marquee.js): läuft hin und zurück, mit kurzen Pausen an den Enden */
.mq { text-overflow: clip !important; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 10px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 10px), transparent); }
.mq-in { display: inline-block; white-space: nowrap; animation: mq var(--mqt, 6s) ease-in-out infinite; }
@keyframes mq { 0%, 18% { transform: translateX(0); } 46%, 64% { transform: translateX(var(--mq)); } 92%, 100% { transform: translateX(0); } }