:root {
    --bg: #101827;
    --card: rgba(255, 255, 255, 0.12);
    --card2: rgba(255, 255, 255, 0.18);
    --text: #f8fafc;
    --muted: #b9c5d6;
    --line: rgba(255, 255, 255, 0.18);
    --red: #ff4d6d;
    --blue: #38bdf8;
    --green: #4ade80;
    --yellow: #facc15;
    --field: #fff7df;
    --dark: #172033;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    min-height: 100vh;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    color: var(--text);
    background: radial-gradient(circle at 15% 15%, #28416f 0, #101827 38%, #080c15 100%);
    overflow-x: hidden;
}
.app-shell {
    width: min(1500px, 96vw);
    margin: 0 auto;
    padding: 22px;
}
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #93c5fd;
    font-size: 0.75rem;
    font-weight: 800;
}
.topbar h1 {
    margin: 0.1rem 0 0;
    font-size: clamp(1.8rem, 4vw, 3.3rem);
    line-height: 1;
}
.glass-card {
    background: linear-gradient(145deg, var(--card), rgba(255, 255, 255, 0.06));
    border: 1px solid var(--line);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(18px);
    border-radius: 28px;
}
.join-panel {
    padding: 28px;
    max-width: 880px;
    margin: 7vh auto;
}
.join-panel h2 {
    margin: 0 0 6px;
    font-size: 2rem;
}
.join-panel p {
    color: var(--muted);
    margin-top: 0;
}
.join-grid {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    align-items: center;
}
input {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
    border-radius: 18px;
    padding: 14px 16px;
    font-size: 1rem;
    outline: none;
}
input:focus {
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18);
}
.btn {
    border: 0;
    border-radius: 18px;
    padding: 13px 18px;
    color: white;
    font-weight: 800;
    cursor: pointer;
    transition:
        0.2s transform,
        0.2s opacity,
        0.2s background;
}
.btn:hover {
    transform: translateY(-2px);
}
.btn.primary {
    background: linear-gradient(135deg, #38bdf8, #2563eb);
}
.btn.ghost {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid var(--line);
}
.color-choices {
    display: flex;
    gap: 10px;
}
.color-dot {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    border: 3px solid rgba(255, 255, 255, 0.75);
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    position: relative;
}
.color-dot.selected {
    outline: 4px solid white;
}
.color-dot.locked {
    opacity: 0.22;
    filter: grayscale(1);
    cursor: not-allowed;
}
.hidden {
    display: none !important;
}
.game-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start;
}
.side-panel {
    padding: 20px;
    position: sticky;
    top: 16px;
}
.turn-box {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 22px;
    padding: 16px;
    margin-bottom: 18px;
}
.label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    font-weight: 900;
}
.turn-name {
    font-size: 1rem;
    font-weight: 900;
    margin-top: 4px;
}
.dice-button {
    width: 145px;
    height: 145px;
    border: 0;
    border-radius: 34px;
    display: grid;
    place-items: center;
    margin: 8px auto 12px;
    background: linear-gradient(145deg, #fff, #cbd5e1);
    box-shadow:
        inset -10px -10px 20px rgba(15, 23, 42, 0.18),
        inset 8px 8px 18px rgba(255, 255, 255, 0.8),
        0 20px 40px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: 0.2s transform;
}
.dice-button span {
    font-size: 5.2rem;
    color: #111827;
    line-height: 1;
}
.dice-button.can-roll {
    animation: pulse 1.2s infinite;
}
.dice-button.rolling {
    animation: roll 0.6s ease-in-out;
}
.hint,
.rules-note {
    color: var(--muted);
    font-size: 0.94rem;
    text-align: center;
}
.players-box {
    margin-top: 22px;
}
.players-box h3 {
    margin-bottom: 10px;
}
.player-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.08);
    margin-bottom: 8px;
}
.mini-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.board-wrap {
    padding: 16px;
    min-height: 650px;
    display: grid;
    place-items: center;
}
.board {
    position: relative;
    width: min(84vh, calc(96vw - 360px));
    aspect-ratio: 1;
    min-width: 560px;
    border-radius: 36px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)), #101a2b;
    box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.board:before,
.board:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 247, 223, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.25);
    z-index: 0;
}
.board:before {
    width: 96%;
    height: 11.2%;
    border-radius: 18px;
}
.board:after {
    width: 11.2%;
    height: 96%;
    border-radius: 18px;
}
.cell {
    position: absolute;
    width: 4.55%;
    height: 4.55%;
    border-radius: 8px;
    background: var(--field);
    border: 2px solid rgba(0, 0, 0, 0.18);
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28);
    z-index: 2;
}
.cell.safe {
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.22),
        0 5px 10px rgba(0, 0, 0, 0.28);
}
.cell.safe:before {
    content: "★";
    color: #aaa;
    font-size: 1.35em;
    line-height: 1;
    text-shadow: 0 1px 0 #fff;
}
.home-yard {
    position: absolute;
    width: 18.5%;
    height: 18.5%;
    border-radius: 26px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16%;
    padding: 4%;
    box-shadow:
        inset 0 0 0 6px rgba(255, 255, 255, 0.24),
        0 20px 35px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.yard-red {
    left: 1.5%;
    bottom: 1.5%;
    background: rgba(255, 77, 109, 0.28);
}
.yard-blue {
    right: 1.5%;
    bottom: 1.5%;
    background: rgba(56, 189, 248, 0.28);
}
.yard-green {
    right: 1.5%;
    top: 1.5%;
    background: rgba(74, 222, 128, 0.28);
}
.yard-yellow {
    left: 1.5%;
    top: 1.5%;
    background: rgba(250, 204, 21, 0.28);
}
.home-slot,
.finish-slot {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.76);
    border: 3px dashed rgba(0, 0, 0, 0.18);
    position: relative;
}
.finish-slot {
    z-index: 3;
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.18);
    background: var(--field) !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.28);
}
.finish-slot:after {
    content: "";
    width: 46%;
    height: 46%;
    border-radius: 50%;
    box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.18);
}
.finish-red:after {
    background: var(--red);
}
.finish-blue:after {
    background: var(--blue);
}
.finish-green:after {
    background: var(--green);
}
.finish-yellow:after {
    background: var(--yellow);
}
.pawn {
    width: clamp(18px, 3.9%, 32px);
    height: clamp(18px, 3.9%, 32px);
    border-radius: 50% 50% 45% 45%;
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.35),
        inset -3px -4px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: clamp(0.72rem, 1.35vw, 1.05rem);
    border: 2px solid rgba(255, 255, 255, 0.75);
    z-index: 8;
}
.pawn:before {
    content: "👀";
    font-size: 0.82em;
    transform: translateY(-6%);
}
.pawn.movable {
    animation: bounce 0.7s infinite;
    outline: 4px solid white;
}
.name-tag {
    position: absolute;
    font-weight: 900;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--line);
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.8rem;
    white-space: nowrap;
}
.name-red {
    bottom: 31%;
    left: 8%;
}
.name-blue {
    bottom: 31%;
    right: 8%;
}
.name-green {
    top: 31%;
    right: 8%;
}
.name-yellow {
    top: 31%;
    left: 8%;
}
.center-star {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 21%;
    height: 21%;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    background: conic-gradient(var(--green) 0 25%, var(--blue) 0 50%, var(--red) 0 75%, var(--yellow) 0);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    z-index: 1;
    pointer-events: none;
}
.center-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 11.5%;
    aspect-ratio: 1;
    border-radius: 18px;
    background: linear-gradient(145deg, #f8fafc, #cbd5e1);
    color: #111827;
    display: grid;
    place-items: center;
    text-align: center;
    font-weight: 950;
    font-size: clamp(0.58rem, 1vw, 0.9rem);
    line-height: 1.12;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
    z-index: 5;
    pointer-events: none;
}
.error {
    color: #fecaca;
    margin-top: 12px;
    font-weight: 700;
}
.toast {
    position: fixed;
    right: 20px;
    top: 20px;
    background: #111827;
    color: white;
    padding: 14px 18px;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(-15px);
    pointer-events: none;
    transition: 0.25s;
}
.toast.show {
    opacity: 1;
    transform: translateY(0);
}
@keyframes pulse {
    50% {
        transform: scale(1.05) rotate(-2deg);
    }
}
@keyframes roll {
    25% {
        transform: rotate(12deg) scale(1.06);
    }
    50% {
        transform: rotate(-14deg) scale(1.08);
    }
    75% {
        transform: rotate(9deg) scale(1.03);
    }
}
@keyframes bounce {
    50% {
        transform: translate(-50%, -66%) scale(1.12);
    }
}
@media (max-width: 980px) {
    .game-layout {
        grid-template-columns: 1fr;
    }
    .side-panel {
        position: relative;
        top: auto;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 16px;
        align-items: center;
    }
    .players-box {
        margin-top: 0;
    }
    .board {
        width: 92vw;
        min-width: 320px;
    }
    .board-wrap {
        min-height: auto;
    }
    .join-grid {
        grid-template-columns: 1fr;
    }
    .color-choices {
        justify-content: center;
    }
    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }
    .dice-button {
        width: 110px;
        height: 110px;
    }
    .dice-button span {
        font-size: 4rem;
    }
}
@media (max-width: 640px) {
    .app-shell {
        padding: 12px;
    }
    .side-panel {
        grid-template-columns: 1fr;
    }
    .board {
        border-radius: 20px;
    }
    .cell {
        border-width: 2px;
        border-radius: 10px;
    }
    .home-yard {
        border-radius: 20px;
    }
    .name-tag {
        font-size: 0.65rem;
    }
    .finish-slot,
    .home-slot {
        border-width: 2px;
    }
    .pawn {
        border-width: 2px;
    }
    .join-panel {
        padding: 20px;
    }
}
.start-btn {
    width: 100%;
    margin: 14px 0 8px;
}
.waiting-box {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(250, 204, 21, 0.13);
    border: 1px solid rgba(250, 204, 21, 0.28);
    color: #fde68a;
    text-align: center;
    font-weight: 800;
}
.game-log {
    margin-top: 18px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.16);
    color: var(--muted);
    font-size: 0.82rem;
    display: grid;
    gap: 6px;
}
.btn:disabled,
.dice-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none !important;
    animation: none !important;
}


/* === Board-Exact-Fix: Vorlage "neu" === */
.cell{
  width:4.25%;
  height:4.25%;
  border-radius:8px;
}
.cell.safe:before{
  content:'★';
  color:#aaa;
  font-size:1.25em;
  line-height:1;
  text-shadow:0 1px 0 #fff;
}
.cell.start-cell{
  outline:3px solid rgba(255,255,255,.38);
  outline-offset:1px;
}
.finish-slot.cell{
  border-radius:8px;
  background:var(--field)!important;
  border:2px solid rgba(0,0,0,.18)!important;
  box-shadow:0 4px 8px rgba(0,0,0,.28)!important;
}
.finish-slot.cell:after{
  content:'';
  display:block;
  width:45%;
  height:45%;
  border-radius:999px;
  box-shadow:inset -2px -2px 4px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.15);
}
.center-star{
  width:20.5%;
  height:20.5%;
  border-radius:6px;
}
.home-yard{
  width:18.2%;
  height:18.2%;
  padding:3.8%;
  gap:14%;
}
.pawn{
  width:clamp(18px,3.35%,29px);
  height:clamp(18px,3.35%,29px);
}

/* === Bob-Fix: Brett exakt nach Vorlage "neu" === */
.board{
  overflow:hidden;
}
.board:before{
  width:96%;
  height:11.2%;
  border-radius:18px;
}
.board:after{
  width:11.2%;
  height:96%;
  border-radius:18px;
}
#board .cell{
  width:4.55% !important;
  height:4.55% !important;
  border-radius:8px !important;
  background:#fff7df !important;
  border:2px solid rgba(0,0,0,.18) !important;
  box-shadow:0 4px 8px rgba(0,0,0,.28) !important;
  z-index:4;
}
#board .cell.safe:before{
  content:'★' !important;
  color:#aaa !important;
  font-size:1.25em !important;
  line-height:1 !important;
  text-shadow:0 1px 0 #fff !important;
}
#board .cell.start-cell{
  outline:4px solid rgba(255,255,255,.35) !important;
  outline-offset:1px !important;
}
#board .cell.finish-slot{
  background:#fff7df !important;
  border-radius:8px !important;
  border:2px solid rgba(0,0,0,.18) !important;
  box-shadow:0 4px 8px rgba(0,0,0,.28) !important;
  z-index:5 !important;
}
#board .cell.finish-slot:before{
  content:'' !important;
}
#board .cell.finish-slot:after{
  content:'' !important;
  display:block !important;
  width:45% !important;
  height:45% !important;
  border-radius:999px !important;
  box-shadow:inset -2px -2px 4px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.15) !important;
}
#board .finish-green:after{ background:var(--green) !important; }
#board .finish-blue:after{ background:var(--blue) !important; }
#board .finish-red:after{ background:var(--red) !important; }
#board .finish-yellow:after{ background:var(--yellow) !important; }

.home-yard{
  width:18.5% !important;
  height:18.5% !important;
  padding:0 !important;
  gap:0 !important;
  display:block !important;
}
.home-yard .home-slot{
  position:absolute !important;
  width:27% !important;
  height:27% !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.76) !important;
  border:3px dashed rgba(0,0,0,.18) !important;
}
.home-yard .home-slot:nth-child(1){ left:22%; top:22%; }
.home-yard .home-slot:nth-child(2){ right:22%; top:22%; }
.home-yard .home-slot:nth-child(3){ left:22%; bottom:22%; }
.home-yard .home-slot:nth-child(4){ right:22%; bottom:22%; }

.pawn{
  width:clamp(18px,3.25%,29px) !important;
  height:clamp(18px,3.25%,29px) !important;
  z-index:10 !important;
}
.center-star{
  width:20.5% !important;
  height:20.5% !important;
  border-radius:6px !important;
  z-index:2 !important;
}
.center-logo{
  z-index:6 !important;
}

/* === Finaler Brett-Fix: Zielspuren und Garagen exakt nach Vorgabe === */
#board .finish-slot.cell{
  width:4.55% !important;
  height:4.55% !important;
  background:#fff7df !important;
  border:2px solid rgba(0,0,0,.18) !important;
  border-radius:8px !important;
  box-shadow:0 4px 8px rgba(0,0,0,.28) !important;
  display:grid !important;
  place-items:center !important;
  z-index:7 !important;
}
#board .finish-slot.cell::before{
  content:none !important;
}
#board .finish-slot.cell::after{
  content:'' !important;
  display:block !important;
  width:48% !important;
  height:48% !important;
  border-radius:999px !important;
  box-shadow:inset -2px -2px 4px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.18) !important;
}
#board .finish-green::after{background:var(--green) !important;}
#board .finish-blue::after{background:var(--blue) !important;}
#board .finish-red::after{background:var(--red) !important;}
#board .finish-yellow::after{background:var(--yellow) !important;}

#board .pawn{
  width:clamp(18px,3.2%,28px) !important;
  height:clamp(18px,3.2%,28px) !important;
  transform:translate(-50%,-50%);
}

/* === Zielfeld-Positions-Fix: Finish-Felder müssen absolut im Brett sitzen ===
   Die alte Regel `.home-slot,.finish-slot{position:relative}` hat die per JS
   gesetzten left/top-Werte der Zielfelder ausgehebelt. Deshalb klebten die
   Zielpunkte wild/diagonal unten rechts statt bei 12/3/6/9 Uhr. */
#board .cell.finish-slot{
  position:absolute !important;
  transform:translate(-50%,-50%);
  display:grid !important;
  place-items:center !important;
  width:4.55% !important;
  height:4.55% !important;
  background:#fff7df !important;
  border:2px solid rgba(0,0,0,.18) !important;
  border-radius:8px !important;
  box-shadow:0 4px 8px rgba(0,0,0,.28) !important;
  z-index:7 !important;
}
#board .cell.finish-slot::before{
  content:none !important;
}
#board .cell.finish-slot::after{
  content:'' !important;
  display:block !important;
  width:48% !important;
  height:48% !important;
  border-radius:999px !important;
  box-shadow:inset -2px -2px 4px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.18) !important;
}
#board .finish-green::after{ background:var(--green) !important; }
#board .finish-blue::after{ background:var(--blue) !important; }
#board .finish-red::after{ background:var(--red) !important; }
#board .finish-yellow::after{ background:var(--yellow) !important; }

/* Home-Slots bleiben relativ zur Garage, aber nicht als globale Regel für Zielfelder. */
#board .home-yard .home-slot{
  position:absolute !important;
}


/* Figuren wackeln wieder leicht, wenn der Spieler am Zug ist. */
.pawn.turn-ready{animation:turnWiggle 1.05s ease-in-out infinite;}
.pawn.turn-ready.movable{animation:bounce .7s infinite;outline:4px solid white;}
@keyframes turnWiggle{
  0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg)}
  25%{transform:translate(-50%,-53%) scale(1.04) rotate(-2deg)}
  50%{transform:translate(-50%,-50%) scale(1.02) rotate(2deg)}
  75%{transform:translate(-50%,-53%) scale(1.04) rotate(-1deg)}
}

/* === Fix: Zug-Wackeln nicht durch !important-Transform blockieren === */
#board .pawn{
  transform:translate(-50%,-50%);
}
#board .pawn.turn-ready{
  animation:turnWiggle 1.05s ease-in-out infinite !important;
}
#board .pawn.turn-ready.movable{
  animation:bounce .7s infinite !important;
  outline:4px solid white;
}

/* === Testmodus: Würfelwerte 1-12 ohne Brettlayout anzufassen === */
.cheat-panel{
  margin:12px 0 4px;
  padding:10px;
  border-radius:16px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.12);
}
.cheat-title{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  font-weight:900;
  margin-bottom:8px;
  text-align:center;
}
.cheat-buttons{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:6px;
}
.cheat-buttons button{
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  padding:7px 0;
  background:rgba(255,255,255,.1);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.cheat-buttons button:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.cheat-buttons button:not(:disabled):hover{
  background:rgba(56,189,248,.28);
}

/* === Spielende / Host-Aktionen === */
.game-actions{
  display:grid;
  gap:8px;
  margin:12px 0 8px;
}
.game-actions .btn{
  width:100%;
}
.confirm-backdrop{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(10px);
  z-index:1000;
}
.confirm-box{
  width:min(420px,92vw);
  border-radius:24px;
  padding:22px;
  background:linear-gradient(145deg,rgba(31,47,85,.98),rgba(15,23,42,.98));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  color:var(--text);
}
.confirm-box h3{
  margin:0 0 8px;
  font-size:1.35rem;
}
.confirm-box p{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.45;
}
.confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.fireworks-canvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  z-index:999;
}

/* === Spaßpaket: Emotes, Sprüche, Mini-Animationen, Sounds ohne Brettlayout-Änderung === */
.emote-panel{
  margin:12px 0 4px;
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.emote-title{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  font-weight:900;
  margin-bottom:8px;
  text-align:center;
}
.emote-buttons{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
}
.emote-buttons button{
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  padding:8px 0;
  background:rgba(255,255,255,.1);
  font-size:1.15rem;
  cursor:pointer;
  transition:.16s transform,.16s background;
}
.emote-buttons button:hover{
  transform:translateY(-2px) scale(1.05);
  background:rgba(56,189,248,.22);
}
.float-emote,.float-pop,.float-dice,.float-hit{
  position:absolute;
  transform:translate(-50%,-100%);
  pointer-events:none;
  z-index:80;
  animation:floatUp 1.65s ease-out forwards;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.42));
}
.float-emote{
  font-size:clamp(1.7rem,4.8vw,3.2rem);
}
.float-pop,.float-hit{
  font-size:clamp(1.5rem,4vw,2.8rem);
}
.float-dice{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.88);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  font-weight:900;
  font-size:clamp(.9rem,2.2vw,1.35rem);
}
.float-hit{
  animation:hitBurst 1.25s ease-out forwards;
}
.board-quip{
  position:absolute;
  left:50%;
  top:22%;
  max-width:64%;
  transform:translate(-50%,-50%);
  z-index:75;
  padding:10px 14px;
  border-radius:18px;
  background:rgba(15,23,42,.86);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 18px 38px rgba(0,0,0,.38);
  color:#fff;
  font-weight:900;
  text-align:center;
  line-height:1.2;
  animation:quipIn 2.35s ease-out forwards;
}
.pawn.pawn-pop{
  animation:pawnPop .75s ease-out !important;
}
.pawn.pawn-hop{
  animation:pawnHop .55s ease-out !important;
}
@keyframes floatUp{
  0%{opacity:0;transform:translate(-50%,-65%) scale(.7) rotate(-4deg)}
  15%{opacity:1;transform:translate(-50%,-105%) scale(1.08) rotate(3deg)}
  100%{opacity:0;transform:translate(-50%,-190%) scale(.92) rotate(-2deg)}
}
@keyframes hitBurst{
  0%{opacity:0;transform:translate(-50%,-80%) scale(.3) rotate(0deg)}
  20%{opacity:1;transform:translate(-50%,-120%) scale(1.45) rotate(-10deg)}
  100%{opacity:0;transform:translate(-50%,-190%) scale(.8) rotate(18deg)}
}
@keyframes quipIn{
  0%{opacity:0;transform:translate(-50%,-42%) scale(.9)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  78%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-62%) scale(.96)}
}
@keyframes pawnPop{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  35%{transform:translate(-50%,-72%) scale(1.22) rotate(-6deg)}
  65%{transform:translate(-50%,-45%) scale(.98) rotate(4deg)}
}
@keyframes pawnHop{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-66%) scale(1.12)}
}

/* === Erweiterung: Lobby, Reconnect, Stats, Themes, Mobile-Hilfe === */
body[data-theme="midnight"]{
  --bg:#101827;--card:rgba(255,255,255,.12);--card2:rgba(255,255,255,.18);--text:#f8fafc;--muted:#b9c5d6;--line:rgba(255,255,255,.18);--field:#fff7df;--dark:#172033;
  background:radial-gradient(circle at 15% 15%,#28416f 0,#101827 38%,#080c15 100%);
}
body[data-theme="neon"]{
  --bg:#090916;--card:rgba(88,28,135,.20);--card2:rgba(14,165,233,.18);--text:#fdf4ff;--muted:#d8b4fe;--line:rgba(236,72,153,.28);--field:#fff7ff;--dark:#160b2e;
  background:radial-gradient(circle at 20% 15%,#6d28d9 0,#0f172a 42%,#020617 100%);
}
body[data-theme="wood"]{
  --bg:#20140c;--card:rgba(120,76,38,.22);--card2:rgba(180,83,9,.18);--text:#fff7ed;--muted:#fed7aa;--line:rgba(251,191,36,.22);--field:#fff1cf;--dark:#2b1a10;
  background:radial-gradient(circle at 15% 15%,#6b4423 0,#24150d 42%,#0c0704 100%);
}
body[data-theme="candy"]{
  --bg:#201527;--card:rgba(255,255,255,.18);--card2:rgba(244,114,182,.16);--text:#fff7fb;--muted:#fbcfe8;--line:rgba(255,255,255,.28);--field:#fff9e8;--dark:#331a3d;
  background:radial-gradient(circle at 15% 15%,#fb7185 0,#7c3aed 42%,#0f172a 100%);
}

.lobby-panel{overflow:hidden;position:relative}
.lobby-panel:before{content:'';position:absolute;right:-80px;top:-90px;width:240px;height:240px;border-radius:999px;background:rgba(56,189,248,.18);filter:blur(8px);pointer-events:none}.lobby-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.lobby-mascot{width:110px;height:110px;border-radius:32px;display:grid;place-items:center;font-size:4rem;background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.08));border:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.25);animation:lobbyDice 4s ease-in-out infinite}.lobby-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.lobby-option-card,.reconnect-box,.host-setup{border:1px solid var(--line);background:rgba(0,0,0,.14);border-radius:20px;padding:13px}.lobby-option-card p{margin:6px 0 0;color:var(--muted);font-size:.92rem}.reconnect-box{display:flex;align-items:center;gap:12px;margin-bottom:16px}.reconnect-box span{color:var(--muted);flex:1}.select-control{width:100%;border:1px solid var(--line);background:rgba(15,23,42,.72);color:var(--text);border-radius:15px;padding:11px 13px;font-weight:800;outline:none}.select-control:focus{box-shadow:0 0 0 4px rgba(56,189,248,.18)}.host-setup{margin:12px 0 8px;display:grid;gap:8px}.host-setup small{color:var(--muted);line-height:1.35}.stats-box{margin-top:18px;display:grid;gap:8px}.stats-box h3{margin:0 0 2px}.stat-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:9px 10px;border-radius:15px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.06)}.stat-row .stat-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.stat-row .stat-grid span{font-size:.78rem;color:var(--muted);background:rgba(0,0,0,.14);border-radius:999px;padding:4px 6px;text-align:center}.mobile-board-tools{display:none;align-items:center;gap:8px;margin:0 0 10px;justify-content:center;color:var(--muted);font-weight:900}.mobile-board-tools .btn{padding:7px 12px;border-radius:12px}.board{transform:scale(var(--board-zoom,1));transform-origin:center center;transition:.18s transform}.player-row small{color:var(--muted);margin-left:auto}.player-row strong,.stat-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes lobbyDice{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(5deg)}}

@media(max-width:980px){.lobby-hero{align-items:flex-start}.lobby-mascot{width:84px;height:84px;font-size:3rem;border-radius:24px}.lobby-options{grid-template-columns:1fr}.reconnect-box{align-items:flex-start;flex-direction:column}.mobile-board-tools{display:flex}.board-wrap{overflow:auto;place-items:start center;padding:12px;max-width:100vw}.board{margin:6px auto 18px;min-width:520px;width:86vw}.side-panel{position:relative;z-index:20}.stats-box{max-height:220px;overflow:auto;padding-right:3px}}
@media(max-width:640px){.topbar .btn{width:100%}.lobby-hero{flex-direction:column}.lobby-mascot{align-self:center}.board{min-width:500px}.board-wrap{border-radius:20px}.stat-row .stat-grid{grid-template-columns:repeat(2,1fr)}.join-panel{margin:2vh auto}.app-shell{width:100%;overflow:hidden}.game-layout{gap:12px}}

/* === Sichtbare Lobby-/Theme-Steuerung für Big-Feature-Update === */
.top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.theme-picker{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:900;font-size:.82rem}
.theme-picker .select-control{min-width:150px;padding:10px 12px}
.lobby-panel .join-grid{position:relative;z-index:2}
@media(max-width:760px){.top-actions{width:100%;justify-content:stretch}.top-actions .btn,.theme-picker,.theme-picker .select-control{width:100%}.theme-picker{align-items:flex-start;flex-direction:column}}


/* === Header-Platzspar-Fix: Titel direkt hinter Browser-Brettspiel === */
.top-title{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.top-title .eyebrow{
  margin:0;
}
.top-game-title{
  font-size:.75rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text);
  opacity:.9;
}
.topbar h1{
  font-size:1rem;
  margin:0;
}
@media(max-width:760px){
  .top-title{
    width:100%;
  }
  .top-game-title{
    font-size:.72rem;
  }
}

/* === Optionale Figurenbilder / Avatare ===
   Ohne Auswahl bleibt die bisherige Augen-Figur unverändert. */
.avatar-picker-box{
  margin:16px 0 6px;
  padding:14px;
  border-radius:20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.avatar-picker-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.avatar-picker-head strong{
  font-size:1rem;
}
.avatar-picker-head span{
  color:var(--muted);
  font-size:.86rem;
}
.avatar-choices{
  display:grid;
  grid-template-columns:repeat(13,minmax(48px,1fr));
  gap:8px;
}
.avatar-choice{
  min-width:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:rgba(255,255,255,.08);
  color:var(--text);
  padding:7px 5px 5px;
  cursor:pointer;
  display:grid;
  place-items:center;
  gap:4px;
  transition:.16s transform,.16s background,.16s outline-color;
}
.avatar-choice:hover{
  transform:translateY(-2px);
  background:rgba(56,189,248,.16);
}
.avatar-choice.selected{
  outline:3px solid rgba(255,255,255,.88);
  background:rgba(56,189,248,.22);
}
.avatar-choice img{
  width:36px;
  height:36px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));
}
.avatar-choice small{
  color:var(--muted);
  font-size:.68rem;
  font-weight:800;
}
.avatar-default-preview{
  width:36px;
  height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#fff,#cbd5e1);
  box-shadow:inset -3px -4px 6px rgba(0,0,0,.16);
}
.pawn.has-avatar{
  border-radius:999px !important;
  overflow:visible;
  background:rgba(255,255,255,.88) !important;
  border:2px solid rgba(255,255,255,.9) !important;
}
.pawn.has-avatar::before{
  content:none !important;
}
.pawn.has-avatar img{
  width:220%;
  height:220%;
  object-fit:contain;
  display:block;
  pointer-events:none;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.32));
}
.mini-avatar{
  width:24px;
  height:24px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.88);
  border:2px solid rgba(255,255,255,.75);
  box-shadow:0 0 0 3px rgba(255,255,255,.12);
  overflow:visible;
  flex:0 0 auto;
}
.mini-avatar img{
  width:130%;
  height:130%;
  object-fit:contain;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));
}
@media(max-width:980px){
  .avatar-choices{grid-template-columns:repeat(7,minmax(42px,1fr));}
}
@media(max-width:640px){
  .avatar-picker-head{display:block;}
  .avatar-picker-head span{display:block;margin-top:4px;}
  .avatar-choices{grid-template-columns:repeat(4,minmax(54px,1fr));}
  .avatar-choice img,.avatar-default-preview{width:34px;height:34px;}
}

/* === Step 1-3: Laufanimation, Rauswurf deluxe, Regelwahl === */
.rules-setup{
  display:grid;
  gap:8px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.12);
}
.rules-setup label{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-size:.9rem;
  font-weight:800;
  cursor:pointer;
}
.rules-setup input{
  width:18px;
  height:18px;
  padding:0;
  accent-color:#38bdf8;
}
.pawn-ghost{
  pointer-events:none !important;
  z-index:90 !important;
  transition:left .105s ease, top .105s ease, transform .105s ease !important;
}
.pawn.animating-hidden{
  opacity:.18 !important;
}
.pawn-ghost.step-hop{
  transform:translate(-50%,-72%) scale(1.16) !important;
}
.board-shake{
  animation:boardShake .45s ease-in-out;
}
.float-hit.deluxe{
  font-size:clamp(2rem,6vw,4rem);
  animation:hitBurstDeluxe 1.25s ease-out forwards;
}
.pawn.pawn-hit-out{
  animation:pawnHitOut .65s ease-out !important;
}
@keyframes boardShake{
  0%,100%{filter:none;}
  20%{filter:drop-shadow(8px 0 0 rgba(255,77,109,.25));}
  40%{filter:drop-shadow(-8px 0 0 rgba(56,189,248,.2));}
  60%{filter:drop-shadow(5px 0 0 rgba(250,204,21,.18));}
  80%{filter:drop-shadow(-5px 0 0 rgba(74,222,128,.16));}
}
@keyframes hitBurstDeluxe{
  0%{opacity:0;transform:translate(-50%,-70%) scale(.25) rotate(0deg)}
  18%{opacity:1;transform:translate(-50%,-130%) scale(1.75) rotate(-14deg)}
  52%{opacity:1;transform:translate(-50%,-155%) scale(1.15) rotate(9deg)}
  100%{opacity:0;transform:translate(-50%,-230%) scale(.75) rotate(24deg)}
}
@keyframes pawnHitOut{
  0%{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:1}
  35%{transform:translate(-50%,-95%) scale(1.28) rotate(-18deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(.8) rotate(32deg);opacity:.35}
}

/* === Hilfe-Button und Footer === */
.help-btn{
  width:44px;
  height:44px;
  padding:0;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:1.15rem;
  line-height:1;
}
.site-footer{
  margin:18px 0 4px;
  padding:12px 16px;
  text-align:center;
  color:var(--muted);
  font-size:.86rem;
  letter-spacing:.04em;
}
.site-footer strong{
  color:var(--text);
}
.help-backdrop{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(2,6,23,.74);
  backdrop-filter:blur(12px);
  z-index:1100;
}
.help-box{
  position:relative;
  width:min(560px,94vw);
  border-radius:28px;
  padding:26px;
  color:var(--text);
  background:linear-gradient(145deg,rgba(31,47,85,.98),rgba(15,23,42,.98));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 34px 90px rgba(0,0,0,.55);
  overflow:hidden;
}
.help-box:before{
  content:'';
  position:absolute;
  right:-70px;
  top:-80px;
  width:190px;
  height:190px;
  border-radius:999px;
  background:rgba(56,189,248,.22);
  filter:blur(8px);
  pointer-events:none;
}
.help-close{
  position:absolute;
  right:16px;
  top:16px;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:var(--text);
  font-size:1.45rem;
  line-height:1;
  cursor:pointer;
  z-index:2;
}
.help-close:hover{
  background:rgba(255,255,255,.18);
}
.help-kicker{
  position:relative;
  z-index:1;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#93c5fd;
  font-size:.72rem;
  font-weight:900;
}
.help-box h3{
  position:relative;
  z-index:1;
  margin:5px 0 10px;
  font-size:1.9rem;
}
.help-box p{
  position:relative;
  z-index:1;
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.5;
}
.help-steps{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:16px 0;
}
.help-steps div{
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.help-steps strong{
  display:block;
  margin-bottom:5px;
}
.help-steps span{
  display:block;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.35;
}
.help-credit{
  margin-top:16px !important;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.14);
  text-align:center;
}
.help-credit strong{
  color:var(--text);
}
@media(max-width:640px){
  .help-steps{grid-template-columns:1fr;}
  .help-box{padding:22px;}
  .help-btn{width:100%;}
}


/* === Raumcode / Einladung per Code === */
.room-code-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:11px 13px;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.86rem;
  font-weight:900;
  white-space:nowrap;
}
.room-code-badge strong{
  color:var(--text);
  letter-spacing:.12em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}
.room-join-box{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr minmax(310px,.9fr);
  gap:14px;
  align-items:center;
  margin:16px 0;
  padding:14px;
  border-radius:20px;
  background:rgba(0,0,0,.14);
  border:1px solid var(--line);
}
.room-join-box strong{
  display:block;
  margin-bottom:4px;
}
.room-join-box span{
  display:block;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.35;
}
.room-join-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}
.room-join-form input{
  min-width:0;
}
@media(max-width:980px){
  .room-join-box{
    grid-template-columns:1fr;
  }
}
@media(max-width:640px){
  .room-join-form{
    grid-template-columns:1fr;
  }
  .room-code-badge{
    width:100%;
    justify-content:center;
  }
}


/* === UX-Fix: Raumcode direkt beim Beitreten statt Extra-Umweg === */
.join-grid-modern{
  grid-template-columns:1fr 1fr auto auto;
}
.join-grid-modern #roomCodeInput{
  min-width:0;
}
.room-help-text{
  margin:10px 0 0;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.4;
}
#copyRoomCode.hidden,
#copyInvite.hidden,
#roomCodeBadge.hidden{
  display:none !important;
}
#copyRoomCode{
  white-space:nowrap;
}
@media(max-width:980px){
  .join-grid-modern{
    grid-template-columns:1fr;
  }
}