:root {
    color-scheme: light;
    --ink: #18211d;
    --muted: #66716b;
    --paper: #f6f1e7;
    --panel: rgba(255, 255, 255, 0.88);
    --green: #739e52;
    --red: #9e4657;
    --blue: #5563a9;
    --purple: #6a476e;
    --gold: #c79735;
    --shadow: 0 22px 60px rgba(32, 41, 35, 0.14);
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 15% 5%, rgba(115, 158, 82, 0.2), transparent 28rem),
        radial-gradient(circle at 90% 85%, rgba(106, 71, 110, 0.18), transparent 30rem),
        var(--paper);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.25rem clamp(1rem, 4vw, 3rem);
}

h1,
h2,
p {
    margin-top: 0;
}

.topbar h1 {
    margin: 0.2rem 0 0;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
}

.eyebrow {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.game-layout {
    display: grid;
    grid-template-columns: minmax(210px, 280px) minmax(500px, 820px) minmax(210px, 280px);
    grid-template-areas:
        "topbar topbar topbar"
        "player1 board player2"
        "player3 board player4"
        "info info info";
    gap: clamp(1rem, 2.5vw, 2.5rem);
    align-items: center;
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem) 3rem;
}

.player1-card {
    grid-area: player1;
}
.player2-card { grid-area: player2; }
.player3-card { grid-area: player3; }
.player4-card { grid-area: player4; }
.board-section { grid-area: board; }
.game-info { grid-area: info; }

.player-card,
.statement-card,
.game-info,
.lobby-card {
    border: 1px solid rgba(24, 33, 29, 0.08);
    border-radius: 1.25rem;
    background: var(--panel);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.player-card {
    padding: 0.75rem 0.85rem;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.player1-card {
    border-radius: 0.4rem 0.4rem 0 0;
}

.player-card.player1-card {
    padding-top: 0.05rem;
}

.player-card.player1-card.active {
    transform: translateX(var(--player-panel-x));
}

.statement-card {
    --statement-tab-extension: 2rem;
    display: flex;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0 0.4rem 0.4rem 0.4rem;
    border-bottom-width: 2px;
    border-bottom-color: rgba(24, 33, 29, 0.18);
    box-shadow: 0 0.35rem 0.7rem rgba(32, 41, 35, 0.12);
}

.statement-scroll-area {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-width: thin;
}

.player-card.active {
    transform: translateY(-4px);
    box-shadow: 0 18px 50px rgba(115, 158, 82, 0.26);
    outline: 2px solid rgba(115, 158, 82, 0.45);
}

.player-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.player-heading h2 {
    margin: 0;
    font-size: 1rem;
}

.player-card .eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.07em;
    white-space: nowrap;
}

.token-swatch,
.player-token {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.34);
}

.player1-swatch,
.player1-token {
    background: #f7f4ea;
}

.player2-swatch,
.player2-token {
    background: #242925;
}

.player3-swatch,
.player3-token {
    background: #5563a9;
}

.player4-swatch,
.player4-token {
    background: #9e4657;
}

.seat-status {
    margin-left: auto;
    padding: 0.2rem 0.42rem;
    border-radius: 999px;
    color: var(--muted);
    background: rgba(102, 113, 107, 0.1);
    font-size: 0.7rem;
    font-weight: 800;
}

.player1-card .seat-status {
    transform: translate(0.3rem, -0.2rem);
}

.seat-status.online {
    color: #476d30;
    background: rgba(115, 158, 82, 0.16);
}

.seat-status.disconnecting {
    color: #875b08;
    background: rgba(199, 151, 53, 0.2);
}

.cashflow-progress-block {
    margin-top: 0.45rem;
}

.cashflow-progress-label {
    display: flex;
    align-items: baseline;
    margin-bottom: 0.2rem;
    color: var(--muted);
    font-size: 0.7rem;
}

.cashflow-progress {
    width: 100%;
    height: 0.4rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(24, 33, 29, 0.1);
    box-shadow: inset 0 1px 2px rgba(24, 33, 29, 0.12);
}

.cashflow-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #b77c16, #f0c55b);
    transition: width 420ms ease;
}

.kick-player-button {
    width: 100%;
    min-height: 1.6rem;
    margin-top: 0.4rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid rgba(158, 70, 87, 0.42);
    border-radius: 0.55rem;
    color: #873449;
    background: rgba(158, 70, 87, 0.12);
    font-size: 0.62rem;
    font-weight: 850;
}

.kick-player-button:hover,
.kick-player-button:focus-visible {
    border-color: rgba(158, 70, 87, 0.72);
    background: rgba(158, 70, 87, 0.2);
}

.lobby-kick-button {
    width: auto;
    min-height: 1.45rem;
    margin-top: 0.15rem;
    font-size: clamp(0.5rem, 0.85vw, 0.6rem);
}

.player2-progress span {
    background: linear-gradient(90deg, #45539a, #7786d5);
}

.player3-progress span {
    background: linear-gradient(90deg, #6a476e, #a873ae);
}

.player4-progress span {
    background: linear-gradient(90deg, #9e4657, #d47a8c);
}

.player-card dl,
.card-values {
    display: grid;
    gap: 0.65rem;
    margin: 1.2rem 0 0;
}

.player-card dl div,
.card-values div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.card-values div[hidden] {
    display: none;
}

dt {
    color: var(--muted);
}

dd {
    margin: 0;
    font-weight: 800;
}

.board-section {
    width: 100%;
}

.card-decks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.5rem, 1.8vw, 1.2rem);
    align-items: end;
    width: min(34rem, 92%);
    margin: clamp(1.25rem, 3vw, 2rem) auto 0;
    padding: 1rem clamp(0.65rem, 2vw, 1.25rem) 0.75rem;
    border: 1px solid rgba(24, 33, 29, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 12px 30px rgba(24, 33, 29, 0.08);
}

.card-deck {
    --deck-color: var(--green);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.deck-consume { --deck-color: var(--red); }
.deck-event { --deck-color: var(--blue); }
.deck-action { --deck-color: var(--purple); }

.deck-stack {
    position: relative;
    width: clamp(3.5rem, 7vw, 5.1rem);
    aspect-ratio: 0.7;
    margin: 0.35rem 0 0.65rem;
    perspective: 500px;
}

.deck-stack::before,
.deck-stack::after,
.deck-face {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 0.55rem;
    background: var(--deck-color);
    box-shadow: 0 7px 14px rgba(24, 33, 29, 0.18);
}

.deck-stack::before,
.deck-stack::after {
    content: "";
}

.deck-stack::before {
    transform: translate(-0.35rem, 0.3rem) rotate(-4deg);
    filter: brightness(0.76);
}

.deck-stack::after {
    transform: translate(0.3rem, 0.18rem) rotate(3deg);
    filter: brightness(0.88);
}

.deck-face {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    transform-origin: 50% 100%;
}

.deck-face::before {
    position: absolute;
    inset: 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 0.35rem;
    content: "";
}

.deck-face strong {
    position: relative;
    font-size: clamp(0.48rem, 1.2vw, 0.7rem);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.deck-symbol {
    position: relative;
    margin-bottom: 0.25rem;
    font-size: clamp(1rem, 2.8vw, 1.6rem);
    font-weight: 900;
    line-height: 1;
}

.chart-down-icon {
    display: block;
    width: 1em;
    height: 1em;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.draw-card-back-symbol .chart-down-icon {
    width: clamp(4rem, 15vw, 6rem);
    height: clamp(4rem, 15vw, 6rem);
}

.deck-caption {
    overflow: hidden;
    max-width: 100%;
    color: var(--muted);
    font-size: clamp(0.62rem, 1.5vw, 0.78rem);
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-deck.is-active .deck-stack {
    filter: drop-shadow(0 0 0.8rem var(--deck-color));
}

.card-deck.is-active .deck-face {
    animation: deck-draw 720ms cubic-bezier(0.16, 0.8, 0.25, 1.08);
}

.card-deck.is-drawing .deck-face {
    opacity: 0;
}

.card-deck.is-active .deck-caption {
    color: var(--deck-color);
}

@keyframes deck-draw {
    0% {
        transform: translate(0, 0) rotate(0) scale(1);
    }
    48% {
        transform: translate(0, -1.2rem) rotate(-4deg) scale(1.08);
    }
    100% {
        transform: translate(0, 0) rotate(0) scale(1);
    }
}

.board {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border: clamp(0.7rem, 1.5vw, 1.1rem) solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.94) 0 31%, transparent 31.5%),
        conic-gradient(from -5deg, #edf3e8, #f1e8e9, #e9ebf5, #eee8ef, #edf3e8);
    box-shadow: var(--shadow), inset 0 0 5rem rgba(24, 33, 29, 0.08);
}

.field {
    position: absolute;
    z-index: 2;
    left: var(--circle-x);
    top: var(--circle-y);
    display: grid;
    place-items: center;
    width: clamp(2.1rem, 7.4%, 4rem);
    aspect-ratio: 1;
    padding: 0.12rem;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    color: white;
    box-shadow: 0 5px 13px rgba(24, 33, 29, 0.2);
    text-align: center;
}

.field-month,
.field-chance { background: var(--green); }
.field-consume { background: var(--red); }
.field-event { background: var(--blue); }
.field-action { background: var(--purple); }
.field-jobs { background: var(--gold); }

.field-number {
    font-size: clamp(0.6rem, 1.2vw, 0.82rem);
    font-weight: 900;
    line-height: 1;
}

.field-number-start {
    font-size: clamp(0.48rem, 0.9vw, 0.68rem);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.start-payday-icon {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    width: min(66%, 3.1rem);
    height: min(66%, 3.1rem);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.start-payday-icon .wallet-note {
    fill: rgba(255, 255, 255, 0.2);
    stroke: rgba(255, 255, 255, 0.58);
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.start-payday-icon .wallet-note-back {
    fill: rgba(255, 255, 255, 0.11);
}

.start-payday-icon .wallet-note-mark {
    fill: none;
    stroke: rgba(255, 255, 255, 0.58);
    stroke-width: 2;
    stroke-linecap: round;
}

.start-payday-icon .wallet-body {
    fill: rgba(255, 255, 255, 0.3);
    stroke: rgba(255, 255, 255, 0.72);
    stroke-width: 2.2;
    stroke-linejoin: round;
}

.start-payday-icon .wallet-clasp {
    fill: rgba(255, 255, 255, 0.44);
}

.start-payday-icon .wallet-button {
    fill: rgba(255, 255, 255, 0.88);
}

.start-direction-arrow {
    position: absolute;
    z-index: 2;
    top: 0.22rem;
    right: 0.25rem;
    width: clamp(0.7rem, 1.4vw, 1rem);
    height: clamp(0.7rem, 1.4vw, 1rem);
    fill: none;
    stroke: rgba(255, 255, 255, 0.96);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 1px rgba(24, 33, 29, 0.35));
    pointer-events: none;
}

.start-payday-label {
    position: absolute;
    z-index: 1;
    right: 0.3rem;
    bottom: 0.25rem;
    font-size: clamp(0.42rem, 0.85vw, 0.62rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(24, 33, 29, 0.35);
}

.field-label {
    display: none;
}

.tokens {
    position: absolute;
    bottom: -0.3rem;
    display: flex;
}

.player-token {
    position: static;
    z-index: 4;
    width: clamp(2.025rem, 4.05vw, 2.85rem);
    height: clamp(2.025rem, 4.05vw, 2.85rem);
    margin-left: -0.22rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 0.2rem 0.13rem rgba(24, 33, 29, 0.32));
    will-change: transform;
}

.token-swatch {
    position: relative;
    width: clamp(2rem, 3.4vw, 2.45rem);
    height: clamp(2rem, 3.4vw, 2.45rem);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 0.2rem 0.14rem rgba(24, 33, 29, 0.25));
}

.token-glyph {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: clamp(1.05rem, 2.35vw, 1.6rem);
    line-height: 1;
}

.player-token .token-glyph {
    font-size: clamp(1.575rem, 3.525vw, 2.4rem);
}

.player-token[data-token="car"] .token-glyph,
.player-card .token-swatch[data-token="car"] .token-glyph {
    transform: scaleX(-1);
}

.token-swatch .token-glyph {
    font-size: clamp(1.55rem, 3vw, 2.15rem);
}

body > .player-token {
    display: none;
}

.player-token.moving {
    z-index: 20;
    filter: drop-shadow(0 8px 5px rgba(24, 33, 29, 0.34));
}

.field.landing {
    z-index: 12;
    animation: field-landing 360ms ease-out;
}

.field.destination {
    z-index: 13;
    outline: 0.35rem solid rgba(199, 151, 53, 0.35);
    animation: destination-pulse 700ms ease-in-out infinite alternate;
}

.board-center {
    position: absolute;
    z-index: 1;
    inset: 34%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.board-center > strong {
    min-height: 2.5em;
    margin: 0.35rem 0;
    font-size: clamp(0.75rem, 1.6vw, 1.05rem);
}

.dice-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    margin-bottom: 0.55rem;
}

.dice-pair {
    display: flex;
    gap: clamp(0.2rem, 0.7vw, 0.38rem);
    perspective: 300px;
}

.die {
    display: grid;
    place-items: center;
    width: clamp(1.75rem, 4.4vw, 2.7rem);
    aspect-ratio: 1;
    border: 2px solid rgba(24, 33, 29, 0.14);
    border-radius: clamp(0.38rem, 1vw, 0.65rem);
    background: white;
    box-shadow: 0 5px 14px rgba(24, 33, 29, 0.1);
    font-family: "Segoe UI Symbol", sans-serif;
    font-size: clamp(1.25rem, 3.6vw, 2rem);
    font-weight: 900;
    line-height: 1;
}

.dice-pair.rolling .die {
    animation: dice-tumble 130ms linear infinite;
}

.dice-pair.rolling .die:nth-child(2) {
    animation-direction: reverse;
    animation-delay: -65ms;
}

.dice-pair.settled .die {
    animation: dice-settle 260ms cubic-bezier(0.18, 0.9, 0.32, 1.3);
}

.dice-total {
    color: var(--muted);
    font-size: clamp(0.6rem, 1.2vw, 0.75rem);
    font-weight: 700;
}

.dice-total strong {
    color: var(--ink);
}

@keyframes dice-tumble {
    0% { transform: translateY(0) rotate(0deg) rotateX(0deg); }
    35% { transform: translateY(-0.45rem) rotate(95deg) rotateX(65deg); }
    70% { transform: translateY(0.15rem) rotate(205deg) rotateX(145deg); }
    100% { transform: translateY(0) rotate(360deg) rotateX(360deg); }
}

@keyframes dice-settle {
    0% { transform: translateY(-0.7rem) scale(0.86); }
    65% { transform: translateY(0.1rem) scale(1.12); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes field-landing {
    0% { transform: translate(-50%, -50%) scale(1); }
    55% { transform: translate(-50%, -50%) scale(1.2); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes destination-pulse {
    from {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 5px 13px rgba(24, 33, 29, 0.2);
    }
    to {
        transform: translate(-50%, -50%) scale(1.28);
        box-shadow: 0 8px 24px rgba(199, 151, 53, 0.55);
    }
}

.primary-button,
.secondary-button,
.dialog-actions button,
.invite-box button {
    min-height: 2.5rem;
    padding: 0.55rem 0.9rem;
    border: 0;
    border-radius: 0.7rem;
    font-weight: 850;
}

.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.primary-button,
.dialog-actions button:first-child {
    color: white;
    background: var(--ink);
}

.secondary-button,
.dialog-actions button {
    color: var(--ink);
    background: rgba(24, 33, 29, 0.08);
}

.board-center button {
    width: min(9rem, 100%);
    min-height: 0;
    padding: clamp(0.3rem, 1vw, 0.55rem);
    font-size: clamp(0.68rem, 1.4vw, 0.88rem);
}

.board-center button + button {
    margin-top: 0.35rem;
}

.waiting-room,
.ready-confirmation {
    position: absolute;
    z-index: 15;
    left: 50%;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(31rem, 72%);
    padding: clamp(1rem, 2.5vw, 1.65rem);
    transform: translate(-50%, -50%);
    border: 1px solid rgba(24, 33, 29, 0.1);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 70px rgba(24, 33, 29, 0.2);
    text-align: center;
    backdrop-filter: blur(16px);
}

.waiting-room {
    width: min(44rem, 88%);
}

.waiting-room[hidden],
.ready-confirmation[hidden] {
    display: none;
}

.waiting-room h2,
.ready-confirmation h2 {
    margin: 0.3rem 0 0.35rem;
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
}

.waiting-room p,
.ready-confirmation p {
    max-width: 24rem;
    margin: 0 0 0.75rem;
    color: var(--muted);
    font-size: clamp(0.72rem, 1.25vw, 0.88rem);
    line-height: 1.45;
}

#waiting-room-message {
    max-width: none;
    font-size: clamp(0.48rem, 2vw, 0.78rem);
    white-space: nowrap;
}

.waiting-room a {
    display: block;
}

.waiting-room-qr {
    display: block;
    width: clamp(7rem, 18vh, 10rem);
    height: clamp(7rem, 18vh, 10rem);
    padding: 0.35rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 8px 24px rgba(24, 33, 29, 0.12);
}

.waiting-room-invite {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin: 0.6rem 0;
}

.waiting-room-invite .waiting-room-qr {
    width: clamp(4.5rem, 12vh, 6.25rem);
    height: clamp(4.5rem, 12vh, 6.25rem);
}

.waiting-room-code {
    margin: 0;
    color: #000;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.waiting-room button,
.ready-confirmation button {
    min-height: 2.35rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.78rem;
}

.waiting-room-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
}

.lobby-choice-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    width: min(36rem, 100%);
    margin-top: 0.65rem;
}

.multiplayer-invite-choice,
.solo-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 9rem;
    padding: 0.75rem;
    border: 1px solid rgba(24, 33, 29, 0.09);
    border-radius: 1rem;
    background: rgba(24, 33, 29, 0.035);
}

.lobby-choice-divider {
    align-self: center;
    padding: 0.35rem 0.5rem;
    border-radius: 999px;
    color: var(--muted);
    background: rgba(24, 33, 29, 0.07);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.multiplayer-invite-choice .waiting-room-invite {
    margin-top: 0;
}

.solo-choice #start-solo-game {
    width: min(10rem, 100%);
}

.invite-copy-control {
    display: grid;
    justify-items: center;
    gap: 0.28rem;
    width: 100%;
}

.waiting-invite-link {
    width: 100%;
    min-height: 2.2rem;
    padding: 0 0.6rem;
    border: 1px solid rgba(24, 33, 29, 0.16);
    border-radius: 0.65rem;
    color: var(--ink);
    background: white;
    font-size: clamp(0.55rem, 1vw, 0.68rem);
    text-align: center;
}

.waiting-room .invite-copy-feedback {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 20rem;
    margin: 0.25rem 0 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(71, 109, 48, 0.22);
    border-radius: 0.75rem;
    color: #29451d;
    background: rgba(115, 158, 82, 0.16);
    font-weight: 750;
    box-shadow: 0 8px 20px rgba(71, 109, 48, 0.12);
    animation: copy-feedback-in 220ms ease-out;
}

.waiting-room .invite-copy-feedback[hidden] {
    display: none;
}

.invite-copy-feedback > span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    color: white;
    background: #5f8d42;
    font-weight: 900;
}

.waiting-room button.copy-success {
    color: #29451d;
    background: rgba(115, 158, 82, 0.24);
    box-shadow: 0 0 0 2px rgba(115, 158, 82, 0.2);
}

@keyframes copy-feedback-in {
    from {
        opacity: 0;
        transform: translateY(-0.35rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lobby-player-slots {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    width: min(38rem, 100%);
    margin-top: 0.35rem;
}

.lobby-player-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-width: 0;
    aspect-ratio: 1;
    padding: clamp(0.35rem, 1vw, 0.75rem);
    border: 1px dashed rgba(102, 113, 107, 0.32);
    border-radius: 0.9rem;
    color: var(--muted);
    background: rgba(24, 33, 29, 0.035);
    text-align: center;
}

.lobby-player-slot.occupied {
    border-style: solid;
    border-color: rgba(115, 158, 82, 0.34);
    color: var(--ink);
    background: rgba(115, 158, 82, 0.1);
}

.lobby-player-slot.ready {
    box-shadow: inset 0 0 0 1px rgba(115, 158, 82, 0.32);
}

.lobby-player-slot.disconnecting {
    border-color: rgba(199, 151, 53, 0.58);
    background: rgba(199, 151, 53, 0.14);
}

.lobby-player-slot.disconnecting small {
    color: #875b08;
    font-weight: 800;
}

.lobby-slot-summary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.lobby-player-slot strong,
.lobby-player-slot small {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lobby-player-slot small {
    margin-top: 0.08rem;
    color: var(--muted);
    font-size: clamp(0.52rem, 1vw, 0.68rem);
    line-height: 1.05;
    white-space: pre-line;
}

.lobby-slot-token {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
}

.lobby-slot-token .token-glyph {
    font-size: 1.8rem;
}

.waiting-room .ready-error {
    min-height: 1.25em;
    margin: 0.55rem 0 0;
}

.lobby-ready-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.65rem;
    text-align: center;
}

.ready-name-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    width: min(22rem, 100%);
    gap: 0;
    margin-bottom: 0.65rem;
}

.ready-name-field {
    display: grid;
    min-width: 0;
    gap: 0.3rem;
    text-align: center;
}

.ready-name-field input {
    width: 100%;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(24, 33, 29, 0.16);
    border-right: 0;
    border-radius: 0.7rem 0 0 0.7rem;
    background: #fff;
    color: var(--ink);
    font: inherit;
    text-align: center;
}

#player-ready-button {
    min-width: 5.5rem;
    min-height: 2.5rem;
    border-radius: 0 0.7rem 0.7rem 0;
    white-space: nowrap;
}

.lobby-ready-controls .token-carousel-controls {
    grid-template-columns: 2.35rem 5.5rem 2.35rem;
    gap: 0.45rem;
    margin: 0.15rem auto 0.4rem;
}

.lobby-ready-controls .token-arrow {
    width: 2.35rem;
    height: 2.35rem;
    min-height: 2.35rem;
    font-size: 1.55rem;
}

.lobby-ready-controls .selected-token {
    min-height: 3.7rem;
}

.lobby-ready-controls .selected-token-icon {
    width: 3rem;
    height: 2.8rem;
}

.lobby-ready-controls .selected-token-icon .token-glyph {
    font-size: 2.3rem;
}

.lobby-player-slot.is-current-player {
    justify-content: center;
}

.lobby-player-slot.is-current-player > .lobby-slot-token,
.lobby-player-slot.is-current-player > .lobby-slot-summary {
    display: none;
}

.lobby-player-slot.is-current-player .lobby-ready-controls {
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
}

.lobby-player-slot.is-current-player .lobby-ready-controls > .eyebrow,
.lobby-player-slot.is-current-player .ready-name-field > .eyebrow,
.lobby-player-slot.is-current-player .selected-token strong {
    display: none;
}

.lobby-player-slot.is-current-player .ready-token-carousel {
    grid-template-columns: 1.3rem 2.2rem 1.3rem;
    gap: 0.1rem;
    width: 5rem;
    margin: 0 0 0.45rem;
    transform: translateY(-0.4rem);
}

.lobby-player-slot.is-current-player .token-arrow {
    width: 1.3rem;
    height: 1.55rem;
    min-height: 1.55rem;
    padding: 0 0 0.12rem;
    border: 0;
    border-radius: 0;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
    font-size: 1.2rem;
}

.lobby-player-slot.is-current-player .token-arrow:hover,
.lobby-player-slot.is-current-player .token-arrow:focus-visible {
    color: var(--ink);
    box-shadow: none;
}

.lobby-player-slot.is-current-player .selected-token {
    min-height: 2.15rem;
}

.lobby-player-slot.is-current-player .selected-token-icon {
    width: 2.15rem;
    height: 2.15rem;
    animation: selected-token-hop 2.8s ease-in-out infinite;
    will-change: transform;
}

.lobby-player-slot.is-current-player .selected-token-icon .token-glyph {
    font-size: 1.7rem;
}

@keyframes selected-token-hop {
    0%, 24%, 100% { transform: translateY(0); }
    7% { transform: translateY(-0.42rem); }
    13% { transform: translateY(0); }
    18% { transform: translateY(-0.14rem); }
}

.lobby-player-slot.is-current-player .ready-name-controls {
    grid-template-columns: 1fr;
    width: 100%;
    margin: 0;
}

.lobby-player-slot.is-current-player .ready-name-field {
    gap: 0;
}

.lobby-player-slot.is-current-player .ready-name-field input,
.lobby-player-slot.is-current-player #player-ready-button {
    min-height: 1.8rem;
    padding: 0 0.35rem;
    font-size: clamp(0.48rem, 1.35vw, 0.62rem);
}

.lobby-player-slot.is-current-player .ready-name-field input {
    border-right: 1px solid rgba(24, 33, 29, 0.16);
    border-bottom: 0;
    border-radius: 0.55rem 0.55rem 0 0;
}

.lobby-player-slot.is-current-player #player-ready-button {
    min-width: 3.25rem;
    width: 100%;
    border-radius: 0 0 0.55rem 0.55rem;
}

.lobby-player-slot.is-current-player .ready-error:empty {
    display: none;
}

.lobby-player-slot.is-current-player .ready-error {
    margin-top: 0.2rem;
    font-size: 0.48rem;
    line-height: 1.1;
}

.lobby-player-slot.is-current-player .lobby-ready-controls.is-ready .ready-name-field {
    display: none;
}

.lobby-player-slot.is-current-player .lobby-ready-controls.is-ready .ready-name-controls {
    grid-template-columns: 1fr;
}

.lobby-player-slot.is-current-player .lobby-ready-controls.is-ready #player-ready-button {
    width: 100%;
    border-radius: 0.55rem;
}

.ready-confirmation {
    width: min(28rem, 70%);
}

.ready-confirmation dl {
    width: min(18rem, 100%);
    margin: 0 0 0.8rem;
}

.ready-confirmation dl div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.7rem;
    background: rgba(24, 33, 29, 0.05);
}

.ready-confirmation dt {
    color: var(--muted);
    font-size: 0.75rem;
}

.ready-confirmation dd {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 850;
}

.ready-error {
    min-height: 1.1em;
    margin: 0.5rem 0 0 !important;
    color: var(--red) !important;
    font-weight: 750;
}

.waiting-pulse {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    margin-bottom: 0.4rem;
    border-radius: 50%;
    background: rgba(115, 158, 82, 0.16);
}

.waiting-pulse span {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(115, 158, 82, 0.4);
    animation: waiting-pulse 1.5s ease-out infinite;
}

@keyframes waiting-pulse {
    0% { box-shadow: 0 0 0 0 rgba(115, 158, 82, 0.42); }
    75%, 100% { box-shadow: 0 0 0 0.65rem rgba(115, 158, 82, 0); }
}

.waiting-for-player .board-center,
.waiting-for-player .card-decks,
.waiting-for-player .player-card,
.waiting-for-player .statement-card,
.waiting-for-player .game-info,
.waiting-for-player .room-heading {
    opacity: 0;
    pointer-events: none;
}

.confirming-player .board-center,
.confirming-player .card-decks,
.confirming-player .player-card,
.confirming-player .statement-card,
.confirming-player .game-info,
.confirming-player .room-heading {
    opacity: 0;
    pointer-events: none;
}

.game-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 2rem;
    align-items: center;
    padding: 1rem 1.25rem;
}

.game-info[hidden] {
    display: none;
}

#game-message,
#game-error,
.goal {
    margin: 0;
}

#game-error,
#lobby-error,
.dialog-error {
    min-height: 1.25em;
    color: #a12f43;
    font-weight: 700;
}

.card-notice {
    margin: 0.55rem 0 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(158, 70, 87, 0.24);
    border-radius: 0.55rem;
    color: #793545;
    background: rgba(158, 70, 87, 0.1);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.3;
}

.card-notice[hidden] { display: none; }

.invite-box {
    grid-column: 2;
    grid-row: 1 / span 3;
}

.invite-box label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
}

.invite-box div {
    display: flex;
}

.invite-box input,
.lobby-card input {
    min-height: 2.6rem;
    border: 1px solid rgba(24, 33, 29, 0.16);
    border-radius: 0.7rem;
    background: white;
}

.invite-box input {
    width: min(36vw, 28rem);
    padding: 0 0.75rem;
    border-radius: 0.7rem 0 0 0.7rem;
}

.invite-box button {
    border-radius: 0 0.7rem 0.7rem 0;
}

.goal {
    color: var(--muted);
    font-size: 0.85rem;
}

dialog {
    --draw-card-color: var(--green);
    width: min(92vw, 31rem);
    height: min(78vh, 32rem);
    padding: 0;
    overflow: visible;
    border: 0;
    color: var(--ink);
    background: transparent;
    box-shadow: none;
    perspective: 1200px;
}

dialog[data-card-type="consume"] { --draw-card-color: var(--red); }
dialog[data-card-type="event"] { --draw-card-color: var(--blue); }
dialog[data-card-type="action"] { --draw-card-color: var(--purple); }

.draw-card-shell,
.draw-card-flipper {
    width: 100%;
    height: 100%;
}

.draw-card-shell {
    perspective: 1200px;
}

.draw-card-flipper {
    position: relative;
    transform-style: preserve-3d;
}

.draw-card-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 1.25rem;
    backface-visibility: hidden;
    box-shadow: 0 30px 100px rgba(24, 33, 29, 0.35);
}

.draw-card-back {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.2), transparent 32%),
        var(--draw-card-color);
    text-align: center;
}

.draw-card-back::before {
    position: absolute;
    inset: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 0.85rem;
    content: "";
}

.draw-card-back-symbol,
.draw-card-back strong,
.draw-card-back small {
    position: relative;
}

.draw-card-back-symbol {
    margin-bottom: 1rem;
    font-size: clamp(3rem, 12vw, 5rem);
    font-weight: 900;
    line-height: 1;
}

.draw-card-back strong {
    font-size: clamp(1.4rem, 6vw, 2.4rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.draw-card-back small {
    margin-top: 0.55rem;
    opacity: 0.78;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.draw-card-front {
    overflow-y: auto;
    background: white;
    transform: rotateY(180deg);
}

dialog::backdrop {
    background: rgba(24, 33, 29, 0.55);
    backdrop-filter: blur(4px);
}

dialog.deck-draw-enter {
    animation: card-from-deck 760ms cubic-bezier(0.2, 0.72, 0.25, 1) forwards;
}

dialog.deck-draw-enter .draw-card-flipper {
    animation: card-turn-over 760ms cubic-bezier(0.22, 0.7, 0.24, 1) 680ms forwards;
}

dialog.deck-draw-enter::backdrop {
    animation: backdrop-enter 500ms ease-out;
}

@keyframes card-from-deck {
    from {
        transform:
            translate(var(--draw-x, 0), var(--draw-y, 0))
            scale(
                var(--draw-scale-x, 0.2),
                var(--draw-scale-y, 0.2)
            )
            rotate(-4deg);
    }
    72% {
        transform: translate(0, -0.75rem) scale(1.035) rotate(1deg);
    }
    to {
        transform: translate(0, 0) scale(1) rotate(0);
    }
}

@keyframes card-turn-over {
    from { transform: rotateY(0); }
    to { transform: rotateY(180deg); }
}

@keyframes backdrop-enter {
    from { background: rgba(24, 33, 29, 0); }
    to { background: rgba(24, 33, 29, 0.55); }
}

.dialog-accent {
    height: 0.6rem;
    background: var(--green);
}

.dialog-accent.consume { background: var(--red); }
.dialog-accent.event { background: var(--blue); }
.dialog-accent.action { background: var(--purple); }

.dialog-body {
    padding: 1.5rem;
}

.dialog-body h2 {
    margin: 0.3rem 0 0.7rem;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 1.3rem;
}

.lobby-page {
    display: grid;
    place-items: center;
    padding: 1rem;
}

.lobby-board-page {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(14.286vh + 0.75rem) calc(9.091vw + 0.75rem);
    overflow-x: hidden;
}

.lobby-board-frame {
    position: fixed;
    z-index: 0;
    inset: 0.3rem;
    overflow: hidden;
    border: clamp(0.45rem, 1vw, 0.75rem) solid rgba(255, 255, 255, 0.7);
    border-radius: 1.5rem;
    background:
        linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.48)),
        linear-gradient(135deg, #edf3e8, #f1e8e9 38%, #e9ebf5 68%, #eee8ef);
    box-shadow: var(--shadow), inset 0 0 4rem rgba(24, 33, 29, 0.07);
    pointer-events: none;
}

.lobby-board-field {
    position: absolute;
    z-index: 1;
    left: var(--landscape-x);
    top: var(--landscape-y);
    display: grid;
    place-items: center;
    padding: 0.15rem;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 0;
    color: #fff;
    font-size: clamp(0.58rem, 1vw, 0.76rem);
    font-weight: 900;
}

.lobby-board-field.landscape-top,
.lobby-board-field.landscape-bottom,
.lobby-board-field.landscape-right {
    width: 9.091%;
    height: 14.286%;
}

.lobby-board-field.landscape-left {
    width: 9.091%;
    height: 17.857%;
}

.lobby-board-field.landscape-corner {
    width: 9.091%;
    height: 14.286%;
}

.lobby-board-field[data-lobby-field="1"] {
    border-top-left-radius: 1.1rem;
}

.lobby-board-field[data-lobby-field="11"] {
    border-top-right-radius: 1.1rem;
}

.lobby-board-field[data-lobby-field="17"] {
    border-bottom-right-radius: 1.1rem;
}

.lobby-board-field[data-lobby-field="27"] {
    border-bottom-left-radius: 1.1rem;
}

.lobby-board-page .lobby-card {
    position: relative;
    z-index: 2;
    padding: clamp(1rem, 2.5vw, 2rem);
}

.lobby-board-page .mode-grid {
    margin: 1.25rem 0 0.75rem;
}

.lobby-board-page .mode-option {
    min-height: clamp(12.5rem, 25vh, 15rem);
}

.lobby-board-page .join-panel {
    padding: 1rem;
}

@media (orientation: portrait) {
    .lobby-board-page {
        padding: calc(9.091vh + 0.75rem) calc(14.286vw + 0.75rem);
    }

    .lobby-board-field {
        left: var(--portrait-x);
        top: var(--portrait-y);
        border-radius: 0;
    }

    .lobby-board-field.portrait-top,
    .lobby-board-field.portrait-bottom,
    .lobby-board-field.portrait-right {
        width: 14.286%;
        height: 9.091%;
    }

    .lobby-board-field.portrait-left {
        width: 14.286%;
        height: 10.227%;
    }

    .lobby-board-field.portrait-corner {
        width: 14.286%;
        height: 9.091%;
    }

    .lobby-board-field[data-lobby-field="1"] {
        border-top-left-radius: 1.1rem;
    }

    .lobby-board-field[data-lobby-field="7"] {
        border-top-right-radius: 1.1rem;
    }

    .lobby-board-field[data-lobby-field="17"] {
        border-bottom-right-radius: 1.1rem;
    }

    .lobby-board-field[data-lobby-field="23"] {
        border-bottom-left-radius: 1.1rem;
    }
}

.lobby-card {
    width: min(100%, 34rem);
    padding: clamp(1.5rem, 6vw, 3.5rem);
}

.lobby-card-wide {
    width: min(100%, 58rem);
}

.invitation-card {
    width: min(100%, 34rem);
}

.invitation-heading {
    text-align: center;
}

.invitation-heading h1 {
    margin-bottom: 0.65rem;
}

.invitation-heading p {
    max-width: none;
    margin-right: auto;
    margin-bottom: 0.85rem;
    margin-left: auto;
    font-size: clamp(0.56rem, 2.4vw, 0.88rem);
    white-space: nowrap;
}

.invitation-code {
    display: inline-block;
    padding: 0.45rem 0.75rem;
    border-radius: 0.65rem;
    color: #000;
    background: rgba(24, 33, 29, 0.07);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.invitation-card .player-name-panel,
.invitation-join-panel {
    grid-template-columns: 1fr;
}

.invitation-join-panel {
    margin-top: 0.85rem;
}

.invitation-join-panel .join-controls button {
    min-width: 8rem;
}

.lobby-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
}

.lobby-heading {
    max-width: 42rem;
}

.player-name-panel {
    display: grid;
    grid-template-columns: minmax(10rem, 0.75fr) minmax(16rem, 1.25fr);
    gap: 1.5rem;
    align-items: center;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(24, 33, 29, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.66);
}

.player-name-panel h2 {
    margin: 0.2rem 0 0;
    font-size: 1rem;
}

.player-name-panel input {
    min-height: 2.7rem;
    border: 1px solid rgba(24, 33, 29, 0.16);
    border-radius: 0.7rem;
    background: #fff;
}

.player-name-panel small {
    display: block;
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.72rem;
}

.token-carousel-controls {
    display: grid;
    grid-template-columns: 3rem minmax(7rem, 10rem) 3rem;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    margin: 0.25rem auto 0.65rem;
}

.token-arrow {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0 0 0.18rem;
    border: 1px solid rgba(24, 33, 29, 0.12);
    border-radius: 50%;
    color: var(--ink);
    background: #fff;
    box-shadow: 0 5px 15px rgba(24, 33, 29, 0.08);
    font-size: 2rem;
    font-weight: 650;
    line-height: 1;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.token-arrow:hover,
.token-arrow:focus-visible {
    transform: scale(1.08);
    border-color: rgba(85, 99, 169, 0.5);
    box-shadow: 0 7px 18px rgba(24, 33, 29, 0.14);
}

.ready-confirmation .token-arrow {
    min-height: 3rem;
    padding: 0 0 0.18rem;
    font-size: 2rem;
}

.selected-token {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 6.4rem;
}

.selected-token-icon {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 4.8rem;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 3.7rem;
    filter: drop-shadow(0 0.35rem 0.2rem rgba(24, 33, 29, 0.2));
    line-height: 1;
}

.selected-token-icon .token-glyph {
    font-size: 3.7rem;
}

.selected-token strong {
    color: var(--muted);
    font-size: 0.72rem;
}

.ready-token-carousel {
    margin-bottom: 0.35rem;
}

.qr-panel {
    display: grid;
    grid-template-columns: minmax(11rem, 1fr) 8.5rem;
    gap: 1rem;
    align-items: center;
    max-width: 25rem;
    padding: 1rem;
    border: 1px solid rgba(24, 33, 29, 0.1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 28px rgba(24, 33, 29, 0.08);
}

.qr-panel h2 {
    margin: 0.25rem 0 0.35rem;
    font-size: 1.05rem;
}

.lobby-card .qr-panel p {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    line-height: 1.4;
}

.qr-panel a {
    display: block;
    overflow: hidden;
    color: var(--blue);
    font-size: 0.75rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qr-panel img {
    display: block;
    width: 8.5rem;
    height: 8.5rem;
    padding: 0.35rem;
    border-radius: 0.65rem;
    background: white;
}

.lobby-card h1 {
    margin: 0.35rem 0 0.8rem;
    font-size: clamp(2rem, 8vw, 3.6rem);
    line-height: 0.95;
}

.lobby-card p {
    color: var(--muted);
    line-height: 1.6;
}

.lobby-card label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 800;
}

.lobby-card input {
    width: 100%;
    padding: 0 0.85rem;
}

.mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2rem 0 1rem;
}

.mode-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 16rem;
    padding: 1.4rem;
    overflow: hidden;
    border: 1px solid rgba(24, 33, 29, 0.1);
    border-radius: 1rem;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 28px rgba(24, 33, 29, 0.08);
    text-align: left;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.mode-option::after {
    position: absolute;
    right: -2.5rem;
    bottom: -3rem;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: rgba(115, 158, 82, 0.14);
    content: "";
}

.friend-option::after {
    background: rgba(85, 99, 169, 0.14);
}

.mode-option:hover,
.mode-option:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(115, 158, 82, 0.45);
    box-shadow: 0 18px 38px rgba(24, 33, 29, 0.14);
}

.friend-option:hover,
.friend-option:focus-visible {
    border-color: rgba(85, 99, 169, 0.45);
}

.mode-icon {
    display: grid;
    place-items: center;
    min-width: 3rem;
    height: 3rem;
    margin-bottom: 1.2rem;
    padding: 0 0.65rem;
    border-radius: 0.8rem;
    color: white;
    background: var(--green);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: -0.15em;
}

.friend-option .mode-icon {
    background: var(--blue);
}

.mode-option strong {
    margin: 0.25rem 0 0.55rem;
    font-size: 1.35rem;
}

.mode-option small {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.mode-cta {
    margin-top: auto;
    padding-top: 1.25rem;
    font-weight: 850;
}

.join-panel {
    display: grid;
    grid-template-columns: 1fr minmax(18rem, 1.25fr);
    gap: 1.5rem;
    align-items: end;
    padding: 1.25rem;
    border-radius: 1rem;
    background: rgba(24, 33, 29, 0.045);
}

.join-panel h2 {
    margin: 0.25rem 0 0;
    font-size: 1rem;
}

.join-controls {
    display: flex;
}

.join-controls input {
    min-width: 0;
    border-radius: 0.7rem 0 0 0.7rem;
}

.join-controls button {
    border-radius: 0 0.7rem 0.7rem 0;
    white-space: nowrap;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.lobby-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.room-join-qr {
    display: block;
    line-height: 0;
}

.room-join-qr img {
    display: block;
    width: clamp(4.5rem, 6.5vw, 5.25rem);
    height: clamp(4.5rem, 6.5vw, 5.25rem);
    padding: 0.18rem;
    border-radius: 0.3rem;
    background: #fff;
}

.room-heading .compact-invite-box {
    width: clamp(9.5rem, 12vw, 11.5rem);
}

.room-heading .compact-invite-box label {
    margin-bottom: 0.15rem;
    color: #000;
    font-size: clamp(0.45rem, 0.52vw, 0.55rem);
    line-height: 1.1;
}

.room-heading .compact-invite-box div {
    display: flex;
}

.room-heading .compact-invite-box input,
.room-heading .compact-invite-box button {
    min-height: 1.55rem;
    height: 1.55rem;
    font-size: 0.52rem;
}

.room-heading .compact-invite-box input {
    width: calc(100% - 3.15rem);
    min-width: 0;
    padding: 0 0.35rem;
}

.room-heading .compact-invite-box button {
    width: 3.15rem;
    padding: 0.2rem;
}

/* Keep the complete game visible in common Surface Pro viewport sizes. */
@media (min-width: 1051px) and (min-height: 700px) and (max-height: 1000px),
       (min-width: 651px) and (max-width: 1050px) and (min-height: 1000px) {
    body:not(.lobby-page) {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .topbar {
        padding-top: clamp(0.55rem, 1.3vh, 0.8rem);
        padding-bottom: clamp(0.55rem, 1.3vh, 0.8rem);
    }

    .game-layout {
        gap: clamp(0.65rem, 1.5vh, 1rem) clamp(1rem, 2vw, 1.75rem);
        padding-bottom: clamp(0.6rem, 1.4vh, 0.9rem);
    }

    .board-section {
        width: min(100%, calc(100vh - 18rem));
        width: min(100%, calc(100dvh - 18rem));
        margin: 0 auto;
    }

    .board-center {
        inset: 29%;
    }

    .board-center > strong {
        min-height: 2.2em;
        margin: 0.2rem 0;
    }

    .dice-display {
        margin-bottom: 0.35rem;
    }

    .board-center button + button {
        margin-top: 0.2rem;
    }

    .card-decks {
        width: min(28rem, 82%);
        margin-top: clamp(0.45rem, 1vh, 0.65rem);
        padding: 0.4rem 0.75rem 0.35rem;
    }

    .deck-stack {
        width: clamp(2.7rem, 5vh, 3rem);
        width: clamp(2.7rem, 5dvh, 3rem);
        margin: 0.15rem 0 0.3rem;
    }

    .deck-face strong {
        font-size: 0.55rem;
    }

    .deck-symbol {
        font-size: 1.05rem;
    }

    .deck-caption {
        font-size: 0.65rem;
    }

    .player-card {
        padding: 1rem;
    }

    .player-card dl {
        gap: 0.45rem;
        margin-top: 0.85rem;
    }

    .game-info {
        gap: 0.35rem 1.5rem;
        padding: 0.65rem 1rem;
    }

    .invite-box label {
        margin-bottom: 0.2rem;
    }

    .invite-box input,
    .invite-box button {
        min-height: 2.25rem;
    }
}

@media (max-width: 1050px) {
    .game-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "topbar topbar"
            "board board"
            "player1 player2"
            "player3 player4"
            "info info";
    }

    .board-section {
        width: min(82vh, 100%);
        margin: 0 auto;
    }
}

@media (max-width: 650px) {
    .topbar {
        align-items: flex-start;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .game-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "topbar topbar"
            "board board"
            "player1 player2"
            "player3 player4"
            "info info";
    }

    .board-section {
        width: 100%;
    }

    .field {
        border-width: 1px;
    }

    .game-info {
        grid-template-columns: 1fr;
    }

    .invite-box {
        grid-column: 1;
        grid-row: auto;
    }

    .invite-box input {
        width: 100%;
        min-width: 0;
    }

    .lobby-actions {
        grid-template-columns: 1fr;
    }

    .mode-grid,
    .join-panel,
    .lobby-intro,
    .player-name-panel {
        grid-template-columns: 1fr;
    }

    .qr-panel {
        grid-template-columns: 1fr 7rem;
        width: 100%;
        max-width: none;
    }

    .qr-panel img {
        width: 7rem;
        height: 7rem;
    }

    .mode-option {
        min-height: 14rem;
    }

    .lobby-player-slots {
        gap: 0.3rem;
    }

    .lobby-player-slot {
        gap: 0.25rem;
    }

    .lobby-player-slot strong {
        font-size: clamp(0.58rem, 2.6vw, 0.8rem);
    }

    .lobby-slot-token {
        width: clamp(1.5rem, 8vw, 2.25rem);
        height: clamp(1.5rem, 8vw, 2.25rem);
    }
}

/* The rectangular edge-to-edge board is the default on every game device.
   Keeping it outside a media query prevents mobile Safari viewport quirks
   from falling back to the legacy circular board. */
    body:not(.lobby-page) {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body:not(.lobby-page) .topbar {
        position: static;
        display: contents;
    }

    .room-heading {
        position: absolute;
        z-index: 6;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.28rem;
        right: calc(9.091% + 1.35rem);
        bottom: calc(14.286% + 1.25rem);
        max-width: min(22rem, 38vw);
        overflow: hidden;
        color: #000;
        background: transparent;
    }

    .leave-game-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: 2.15rem;
        min-height: 0;
        gap: 0.3rem;
        padding: 0 0.65rem;
        border: 1px solid rgba(24, 33, 29, 0.18);
        border-radius: 0.65rem;
        color: var(--ink);
        background: rgba(255, 255, 255, 0.86);
        box-shadow: 0 0.35rem 1rem rgba(24, 33, 29, 0.16);
        font-size: 0.72rem;
        font-weight: 800;
        line-height: 1;
        transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
    }

    .leave-game-button svg {
        width: 1.15rem;
        height: 1.15rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .leave-game-button:hover,
    .leave-game-button:focus-visible {
        border-color: rgba(158, 70, 87, 0.62);
        background: rgba(255, 246, 247, 0.96);
        transform: translateY(-1px);
    }

    .game-layout {
        position: relative;
        display: block;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        padding: 0 0.3rem 0.5rem;
    }

    .board-section {
        position: absolute;
        inset: 0 0.3rem 0.5rem;
        width: auto;
        margin: 0;
    }

    .board {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        border-width: clamp(0.45rem, 1vw, 0.75rem);
        border-radius: 1.5rem;
        background:
            linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.48)),
            linear-gradient(135deg, #edf3e8, #f1e8e9 38%, #e9ebf5 68%, #eee8ef);
        box-shadow: var(--shadow), inset 0 0 4rem rgba(24, 33, 29, 0.07);
    }

    .board::before {
        display: none;
    }

    .field {
        z-index: 5;
        left: var(--landscape-x);
        top: var(--landscape-y);
        aspect-ratio: auto;
        border-width: 1px;
        border-radius: 0;
        box-shadow: none;
    }

    .field-number {
        position: absolute;
        top: 0.3rem;
        left: 0.4rem;
        z-index: 1;
    }

    .tokens {
        z-index: 2;
        inset: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.08rem;
        pointer-events: none;
    }

    .tokens .player-token {
        margin-left: 0;
    }

    .field.landscape-top,
    .field.landscape-bottom,
    .field.landscape-right {
        width: 9.091%;
        height: 14.286%;
    }

    .field.landscape-left {
        width: 9.091%;
        height: 17.857%;
    }

    .field.landscape-corner {
        width: 9.091%;
        height: 14.286%;
        border-radius: 0;
    }

    .field[data-field="1"] {
        border-top-left-radius: 1.1rem;
    }

    .field[data-field="11"] {
        border-top-right-radius: 1.1rem;
    }

    .field[data-field="17"] {
        border-bottom-right-radius: 1.1rem;
    }

    .field[data-field="27"] {
        border-bottom-left-radius: 1.1rem;
    }

    .board-center {
        z-index: 3;
        inset: auto;
        left: 50%;
        top: 48%;
        width: min(25rem, 34vw);
        min-height: 14rem;
        padding: 1rem;
        transform: translate(-50%, -50%);
        border: 1px solid rgba(24, 33, 29, 0.08);
        border-radius: 1.25rem;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 12px 36px rgba(24, 33, 29, 0.1);
        backdrop-filter: blur(12px);
    }

    .player-card {
        --player-panel-x: 0%;
        position: absolute;
        z-index: 4;
        left: calc(9.091% + 0.75rem);
        width: clamp(6.75rem, 16vw, 12rem);
        padding: 0.35rem 0.55rem 0.4rem;
        transform: translateX(var(--player-panel-x));
    }

    .player-card.active {
        transform: translate(var(--player-panel-x), -4px);
    }

    .player-card .player-heading {
        gap: 0.4rem;
    }

    .player-card .player-heading .eyebrow {
        line-height: 1;
    }

    .player-card .player-heading h2 {
        overflow: hidden;
        max-width: 7.5rem;
        font-size: 0.86rem;
        line-height: 1.05;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .player-card .cashflow-progress-block {
        margin-top: 0.2rem;
    }

    .player-card .cashflow-progress-label {
        font-size: 0.58rem;
        line-height: 1;
    }

    .player-card .cashflow-progress-label > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .player-card .cashflow-progress {
        height: 0.32rem;
    }

    .player-card dl {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin-top: 0.6rem;
        font-size: 0.65rem;
    }

    .player-card dl div {
        gap: 0.25rem;
    }

    .player-card dl div:nth-child(2) {
        display: none;
    }

    .player-card {
        top: calc(14.286% + 0.75rem);
    }

    .player-card[data-panel-index="1"] {
        --player-panel-x: 0%;
    }

    .player-card[data-panel-index="2"] {
        --player-panel-x: calc(100% + 0.4rem);
    }

    .player-card[data-panel-index="3"] {
        --player-panel-x: calc(200% + 0.8rem);
    }

    .player-card[data-panel-index="4"] {
        --player-panel-x: calc(300% + 1.2rem);
    }

    .statement-card {
        position: absolute;
        z-index: 4;
        top: calc(14.286% + 6.25rem);
        bottom: calc(14.286% + 2rem);
        left: calc(9.091% + 0.75rem);
        display: flex;
        width: clamp(10rem, 20vw, 16rem);
        min-height: 0;
        flex-direction: column;
        padding: 0.8rem 0.9rem;
        overflow: hidden;
    }

    .statement-scroll-area {
        min-height: 0;
        flex: 1 1 auto;
        padding-right: 0.18rem;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .statement-section h2 {
        margin: 0;
        padding-bottom: 0.3rem;
        border-bottom: 1px solid rgba(24, 33, 29, 0.14);
        font-size: 0.95rem;
    }

    .statement-income-list,
    .statement-expense-list {
        margin: 0.1rem 0 0;
    }

    .statement-income-list div,
    .statement-expense-list div {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
        align-items: baseline;
        padding: 0.2rem 0;
        border-bottom: 1px solid rgba(24, 33, 29, 0.08);
    }

    .statement-income-list dt,
    .statement-income-list dd,
    .statement-expense-list dt,
    .statement-expense-list dd {
        margin: 0;
        font-size: 0.78rem;
        line-height: 1.1;
    }

    .statement-income-list dd,
    .statement-expense-list dd {
        font-weight: 850;
        white-space: nowrap;
    }

    .statement-income-list div.is-new-income {
        background: rgba(115, 158, 82, 0.16);
        transform-origin: left center;
        animation: statement-income-appear 1.6s cubic-bezier(0.16, 0.82, 0.3, 1);
    }

    @keyframes statement-income-appear {
        0% { opacity: 0; transform: translateX(-0.8rem) scale(0.92); background: rgba(115, 158, 82, 0); }
        25% { opacity: 1; transform: translateX(0) scale(1.06); background: rgba(115, 158, 82, 0.28); }
        55% { transform: scale(1); background: rgba(115, 158, 82, 0.18); }
        100% { opacity: 1; transform: scale(1); background: rgba(115, 158, 82, 0.16); }
    }

    .statement-empty-row {
        min-height: 1.25rem;
        border-bottom: 1px solid rgba(24, 33, 29, 0.08);
    }

    .statement-expenses {
        margin-top: 0.3rem;
    }

    .statement-payday {
        flex: 0 0 auto;
        margin-top: 0.35rem;
        padding-top: 0.55rem;
    }

    .payday-calculation {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.6rem;
        align-items: baseline;
        padding-top: 0.35rem;
    }

    .payday-calculation small {
        color: var(--muted);
        font-size: 0.68rem;
    }

    .payday-calculation strong {
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .statement-account {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.6rem;
        align-items: baseline;
        margin-top: 0.45rem;
        padding-top: 0.4rem;
        border-top: 1px solid rgba(24, 33, 29, 0.14);
        flex: 0 0 auto;
    }

    .statement-account h2 {
        padding: 0;
        border-bottom: 0;
    }

    .statement-account-balance {
        display: flex;
        justify-content: flex-end;
        padding-top: 0;
    }

    .statement-account-balance strong {
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .account-log {
        grid-column: 1 / -1;
        margin-top: 0.35rem;
        padding-top: 0.3rem;
        border-top: 1px dashed rgba(24, 33, 29, 0.14);
    }

    .account-log > small {
        display: block;
        margin-bottom: 0.12rem;
        color: var(--muted);
        font-size: 0.58rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .account-log ol {
        display: grid;
        gap: 0.08rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .account-log li {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.22rem;
        align-items: baseline;
        font-size: 0.62rem;
        line-height: 1.15;
    }

    .account-log li span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-log .account-log-icon {
        width: 0.7rem;
        overflow: visible;
        font-weight: 950;
        text-align: center;
    }

    .account-log li.is-credit .account-log-icon { color: #568f38; }
    .account-log li.is-debit .account-log-icon { color: #b33f52; }

    .account-log li.is-credit strong { color: #568f38; }
    .account-log li.is-debit strong { color: #b33f52; }

    .account-log li.account-log-empty {
        display: block;
        color: var(--muted);
        font-style: italic;
    }

    .statement-expense-list div.is-financial-change,
    .payday-calculation.is-financial-change {
        background: rgba(179, 63, 82, 0.14);
        animation: statement-financial-change 750ms cubic-bezier(0.2, 0.8, 0.35, 1);
    }

    @keyframes statement-financial-change {
        0% { transform: scale(0.96); background: rgba(179, 63, 82, 0); }
        40% { transform: scale(1.04); background: rgba(179, 63, 82, 0.24); }
        100% { transform: scale(1); background: rgba(179, 63, 82, 0.14); }
    }

    .statement-account-balance strong.is-payday-updated {
        animation: account-payday-pulse 850ms cubic-bezier(0.2, 0.8, 0.35, 1);
    }

    .statement-account-balance strong.is-debit-updated {
        color: #b33f52;
        animation: account-debit-pulse 850ms cubic-bezier(0.2, 0.8, 0.35, 1);
    }

    .statement-account-balance strong.is-credit-updated {
        color: #568f38;
        animation: account-credit-pulse 900ms cubic-bezier(0.2, 0.8, 0.35, 1);
    }

    .payday-reward-pop {
        position: fixed;
        z-index: 100;
        left: var(--payday-pop-x);
        top: var(--payday-pop-y);
        padding: 0.58rem 0.95rem;
        border: 3px solid rgba(255, 255, 255, 0.94);
        border-radius: 999px;
        color: #fff;
        background: linear-gradient(135deg, #5d963f, #78ad55);
        box-shadow:
            0 0.7rem 1.8rem rgba(57, 100, 35, 0.42),
            0 0 0 0.3rem rgba(120, 173, 85, 0.18);
        font-size: clamp(1rem, 2.8vw, 1.4rem);
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
        pointer-events: none;
        will-change: opacity, transform;
        animation: payday-reward-pop 1.9s cubic-bezier(0.16, 0.82, 0.3, 1) forwards;
    }

    @keyframes payday-reward-pop {
        0% { opacity: 0; transform: translate(-50%, 5%) scale(0.35); }
        20% { opacity: 1; transform: translate(-50%, -80%) scale(1.25); }
        38% { opacity: 1; transform: translate(-50%, -92%) scale(0.96); }
        58% { opacity: 1; transform: translate(-50%, -112%) scale(1.04); }
        78% { opacity: 1; transform: translate(-50%, -135%) scale(1); }
        100% { opacity: 0; transform: translate(-50%, -210%) scale(0.9); }
    }

    @keyframes account-payday-pulse {
        0%, 100% { color: inherit; transform: scale(1); }
        35% { color: #568f38; transform: scale(1.28); }
    }

    .account-debit-pop {
        position: fixed;
        z-index: 101;
        left: var(--account-debit-x);
        top: var(--account-debit-y);
        padding: 0.4rem 0.65rem;
        border: 2px solid rgba(255, 255, 255, 0.94);
        border-radius: 999px;
        color: #fff;
        background: linear-gradient(135deg, #a93f50, #d45c69);
        box-shadow:
            0 0.7rem 1.8rem rgba(125, 37, 52, 0.4),
            0 0 0 0.3rem rgba(212, 92, 105, 0.16);
        font-size: clamp(0.82rem, 1.8vw, 1.05rem);
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
        pointer-events: none;
        will-change: opacity, transform;
        animation: account-debit-pop 1.8s cubic-bezier(0.16, 0.82, 0.3, 1) forwards;
    }

    @keyframes account-debit-pop {
        0% { opacity: 0; transform: translate(-50%, -20%) scale(0.35); }
        20% { opacity: 1; transform: translate(-50%, -55%) scale(1.25); }
        38% { opacity: 1; transform: translate(-50%, -48%) scale(0.96); }
        62% { opacity: 1; transform: translate(-50%, -52%) scale(1.02); }
        100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    @keyframes account-debit-pulse {
        0%, 100% { color: inherit; transform: scale(1); }
        35% { color: #b33f52; transform: scale(1.28); }
    }

    .account-credit-pop {
        position: fixed;
        z-index: 101;
        left: var(--account-credit-x);
        top: var(--account-credit-y);
        padding: 0.4rem 0.65rem;
        border: 2px solid rgba(255, 255, 255, 0.94);
        border-radius: 999px;
        color: #fff;
        background: linear-gradient(135deg, #4f8d36, #76ad50);
        box-shadow:
            0 0.7rem 1.8rem rgba(53, 103, 31, 0.42),
            0 0 0 0.3rem rgba(118, 173, 80, 0.18);
        font-size: clamp(0.82rem, 1.8vw, 1.05rem);
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
        pointer-events: none;
        will-change: opacity, transform;
        animation: account-credit-pop 1.9s cubic-bezier(0.16, 0.82, 0.3, 1) forwards;
    }

    @keyframes account-credit-pop {
        0% { opacity: 0; transform: translate(-50%, -20%) scale(0.35); }
        20% { opacity: 1; transform: translate(-50%, -55%) scale(1.28); }
        38% { opacity: 1; transform: translate(-50%, -48%) scale(0.96); }
        60% { opacity: 1; transform: translate(-50%, -52%) scale(1.04); }
        100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    @keyframes account-credit-pulse {
        0%, 100% { color: inherit; transform: scale(1); }
        35% { color: #568f38; transform: scale(1.28); }
    }

    .card-decks {
        position: absolute;
        z-index: 4;
        top: calc(14.286% + 1rem);
        right: calc(9.091% + 1rem);
        bottom: auto;
        left: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: clamp(16rem, 23vw, 21rem);
        margin: 0;
        gap: clamp(0.75rem, 1.4vw, 1.15rem);
        padding: 1rem 0.9rem 0.85rem;
        transform: none;
    }

    .deck-stack {
        width: clamp(5.25rem, 6.9vw, 7.25rem);
        margin: 0.35rem 0 0.4rem;
    }

    .game-info {
        position: absolute;
        z-index: 4;
        top: calc(14.286% + 7rem);
        left: 50%;
        width: min(42rem, 56vw);
        transform: translateX(-50%);
    }

@media (orientation: portrait) {
    .room-heading {
        right: calc(14.286% + 1.35rem);
        bottom: calc(9.091% + 1.25rem);
    }

    .field {
        left: var(--portrait-x);
        top: var(--portrait-y);
    }

    .field.portrait-top,
    .field.portrait-bottom,
    .field.portrait-right {
        width: 14.286%;
        height: 9.091%;
        border-radius: 0;
    }

    .field.portrait-left {
        width: 14.286%;
        height: 10.227%;
        border-radius: 0;
    }

    .field.portrait-corner {
        width: 14.286%;
        height: 9.091%;
        border-radius: 0;
    }

    .field[data-field="1"] {
        border-top-left-radius: 1.1rem;
    }

    .field[data-field="7"] {
        border-top-right-radius: 1.1rem;
    }

    .field[data-field="17"] {
        border-bottom-right-radius: 1.1rem;
    }

    .field[data-field="23"] {
        border-bottom-left-radius: 1.1rem;
    }

    .board-center {
        top: 46%;
        width: min(22rem, 34vw);
    }

    .player-card {
        left: calc(14.286% + 0.75rem);
        width: clamp(6.75rem, 16vw, 12rem);
    }

    .player-card {
        top: calc(9.091% + 0.75rem);
    }

    .statement-card {
        --statement-tab-extension: 1.25rem;
        top: calc(9.091% + 6.25rem);
        bottom: calc(39.773% + 1rem);
        left: calc(14.286% + 0.75rem);
        width: clamp(8rem, 18vw, 13rem);
    }

    .card-decks {
        top: auto;
        right: calc(14.286% + 0.75rem);
        bottom: calc(9.091% + 0.75rem);
        left: auto;
        width: min(16rem, 32vw);
        transform: none;
    }

    .game-info {
        width: min(40rem, 64vw);
        top: calc(9.091% + 7rem);
    }
}

/* Phone sizing for the desktop-style board. The board geometry stays the
   same; only the controls inside it are condensed to avoid overlaps. */
@media (max-width: 650px) {
    .room-heading {
        right: calc(14.286% + 0.4rem);
        bottom: calc(9.091% + 0.4rem);
        max-width: none;
        overflow: visible;
    }

    .room-heading .room-join-qr,
    .room-heading .compact-invite-box {
        display: none;
    }

    .leave-game-button {
        height: 1.9rem;
        padding: 0 0.5rem;
        border-radius: 0.55rem;
        font-size: 0.65rem;
    }

    .leave-game-button svg {
        width: 1rem;
        height: 1rem;
    }

    .board-center {
        top: 57%;
        width: min(13rem, 54vw);
        min-height: 10.5rem;
        padding: 0.55rem;
        border-radius: 0.85rem;
    }

    .board-center > strong {
        min-height: 2em;
        margin: 0.15rem 0;
        font-size: clamp(0.62rem, 2.8vw, 0.78rem);
    }

    .board-center button {
        width: min(7.5rem, 100%);
        padding: 0.3rem;
        font-size: 0.66rem;
    }

    .dice-display {
        margin-bottom: 0.25rem;
    }

    .die {
        width: clamp(1.65rem, 8vw, 2.15rem);
        font-size: clamp(1.15rem, 6vw, 1.55rem);
    }

    .player-card {
        --player-panel-x: 0%;
        left: calc(14.286% + 0.4rem);
        width: calc(35.714% - 0.6rem);
        min-width: 0;
        padding: 0.28rem 0.38rem 0.32rem;
        transform: none;
    }

    .player-card.active {
        transform: translateY(-2px);
    }

    .player-card[data-panel-index="1"] {
        top: calc(9.091% + 0.4rem);
    }

    .player-card[data-panel-index="1"].active {
        transform: none;
    }

    .player-card[data-panel-index="2"] {
        top: calc(9.091% + 2.8rem);
    }

    .player-card[data-panel-index="3"],
    .player-card[data-panel-index="4"] {
        top: calc(9.091% + 6.95rem);
    }

    .player-card[data-panel-index="2"],
    .player-card[data-panel-index="4"] {
        right: calc(14.286% + 0.4rem);
        left: auto;
    }

    .player-card .player-heading {
        gap: 0.2rem;
    }

    .player-card .player-heading .eyebrow {
        font-size: 0.42rem;
        letter-spacing: 0.04em;
    }

    .player-card .player-heading h2 {
        max-width: 4.7rem;
        font-size: 0.68rem;
    }

    .player-card .token-swatch {
        width: 1.45rem;
        height: 1.45rem;
    }

    .player-card .token-swatch .token-glyph {
        font-size: 1.3rem;
    }

    .player-card .seat-status {
        padding: 0.12rem 0.2rem;
        font-size: 0.48rem;
    }

    .player-card .cashflow-progress-label,
    .player-card dl {
        font-size: 0.52rem;
    }

    .player-card dl {
        gap: 0.2rem;
        margin-top: 0.35rem;
    }

    .card-decks {
        top: auto;
        right: auto;
        bottom: calc(9.091% + 0.4rem);
        left: 50%;
        width: min(11rem, 48vw);
        gap: 0.35rem;
        padding: 0.35rem 0.45rem 0.3rem;
        border-radius: 0.65rem;
        transform: translateX(-50%);
    }

    .deck-stack {
        width: 2.2rem;
        margin: 0.1rem 0 0.25rem;
    }

    .deck-face strong {
        font-size: 0.42rem;
    }

    .deck-symbol {
        margin-bottom: 0.1rem;
        font-size: 0.85rem;
    }

    .deck-caption {
        font-size: 0.5rem;
    }

    .game-info {
        top: calc(9.091% + 11.4rem);
        width: min(16rem, 66vw);
        gap: 0.15rem;
        padding: 0.35rem 0.5rem;
        border-radius: 0.65rem;
        font-size: 0.62rem;
    }

    .game-info .goal {
        display: none;
    }

    .waiting-room,
    .ready-confirmation {
        width: calc(100% - 1rem);
        max-height: calc(100dvh - 1rem);
        padding: 0.85rem;
        overflow-y: auto;
        border-radius: 0.9rem;
    }
}

@media (max-width: 650px) and (orientation: portrait) {
    .statement-card {
        --statement-tab-extension: 0.9rem;
        top: calc(9.091% + 6.25rem);
        bottom: calc(39.773% + 1.35rem);
        left: calc(14.286% + 0.65rem);
        width: calc(35.714% + 0.05rem);
        padding: 0.5rem 0.55rem;
        border-radius: 0.4rem;
    }

    body.has-lower-left-player .statement-card {
        top: calc(9.091% + 11rem);
    }

    .statement-section h2 {
        padding-bottom: 0.22rem;
        font-size: 0.72rem;
    }

    .statement-income-list div,
    .statement-expense-list div {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.3rem;
        padding: 0.12rem 0;
    }

    .statement-income-list dt,
    .statement-income-list dd,
    .statement-expense-list dt,
    .statement-expense-list dd {
        font-size: 0.62rem;
    }

    .statement-empty-row {
        min-height: 1rem;
    }

    .statement-expenses {
        margin-top: 0.2rem;
    }

    .statement-payday {
        padding-top: 0.35rem;
    }

    .payday-calculation {
        gap: 0.25rem;
        padding-top: 0.25rem;
    }

    .payday-calculation small {
        font-size: 0.52rem;
    }

    .payday-calculation strong {
        font-size: 0.72rem;
    }

    .statement-account {
        gap: 0.3rem;
        margin-top: 0.25rem;
        padding-top: 0.28rem;
    }

    .statement-account-balance {
        padding-top: 0;
    }

    .statement-account-balance strong {
        font-size: 0.72rem;
    }

    .board-center {
        right: calc(14.286% + 0.4rem);
        left: auto;
        width: calc(35.714% - 0.6rem);
        transform: translateY(-50%);
    }
}

/* Compact phone landscape: retain the desktop perimeter and its four-player
   row while making enough room for the status and exit controls. */
@media (max-width: 1000px) and (max-height: 649px) and (orientation: landscape) {
    .room-heading {
        right: calc(9.091% + 0.4rem);
        bottom: calc(14.286% + 0.35rem);
        max-width: none;
        overflow: visible;
    }

    .room-heading .room-join-qr,
    .room-heading .compact-invite-box {
        display: none;
    }

    .player-card {
        left: calc(9.091% + 0.4rem);
        width: clamp(5rem, 12vw, 6.4rem);
        padding: 0.22rem 0.3rem;
    }

    .player-card[data-panel-index="2"] {
        --player-panel-x: calc(100% + 0.25rem);
    }

    .player-card[data-panel-index="3"] {
        --player-panel-x: calc(200% + 0.5rem);
    }

    .player-card[data-panel-index="4"] {
        --player-panel-x: calc(300% + 0.75rem);
    }

    .player-card .token-swatch {
        width: 1.35rem;
        height: 1.35rem;
    }

    .player-card .token-swatch .token-glyph {
        font-size: 1.2rem;
    }

    .player-card .player-heading h2 {
        max-width: 3.2rem;
        font-size: 0.62rem;
    }

    .player-card .seat-status,
    .player-card .cashflow-progress-label,
    .player-card dl {
        font-size: 0.48rem;
    }

    .player-card dl {
        display: none;
    }

    .board-center {
        width: min(17rem, 36vw);
        min-height: 9.5rem;
        padding: 0.45rem;
    }

    .board-center > strong {
        min-height: 1.8em;
        margin: 0.1rem 0;
        font-size: 0.68rem;
    }

    .board-center button {
        padding: 0.25rem;
        font-size: 0.62rem;
    }

    .die {
        width: 1.7rem;
        font-size: 1.2rem;
    }

    .card-decks {
        top: calc(14.286% + 0.35rem);
        right: calc(9.091% + 0.4rem);
        bottom: auto;
        left: auto;
        width: min(10rem, 28vw);
        padding: 0.25rem 0.4rem;
        transform: none;
    }

    .deck-stack {
        width: 2rem;
        margin: 0.05rem 0 0.15rem;
    }

    .deck-face strong,
    .deck-caption {
        font-size: 0.42rem;
    }

    .deck-symbol {
        margin-bottom: 0.05rem;
        font-size: 0.75rem;
    }

    .game-info {
        top: calc(14.286% + 0.35rem);
        width: min(24rem, 52vw);
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        font-size: 0.58rem;
    }

    .game-info #game-message,
    .game-info .goal {
        display: none;
    }

    .waiting-room,
    .ready-confirmation {
        width: calc(100% - 1rem);
        max-height: calc(100dvh - 1rem);
        padding: 0.75rem;
        overflow-y: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dice-pair.rolling .die,
    .dice-pair.settled .die,
    .field.landing,
    .field.destination {
        animation: none;
    }

    .lobby-player-slot.is-current-player .selected-token-icon {
        animation: none;
    }

    .statement-account-balance strong.is-payday-updated {
        animation: none;
        color: #568f38;
    }

    .statement-account-balance strong.is-debit-updated {
        animation: none;
        color: #b33f52;
    }

    .statement-account-balance strong.is-credit-updated {
        animation: none;
        color: #568f38;
    }

    .payday-reward-pop {
        animation: payday-reward-fade 1.5s linear forwards;
    }

    .account-debit-pop,
    .account-credit-pop {
        animation: account-change-reduced 300ms linear forwards;
    }

    @keyframes account-change-reduced {
        from { opacity: 0; transform: translate(-50%, -50%); }
        to { opacity: 1; transform: translate(-50%, -50%); }
    }

    .statement-income-list div.is-new-income {
        animation: none;
        background: rgba(115, 158, 82, 0.18);
    }

    @keyframes payday-reward-fade {
        0%, 100% { opacity: 0; transform: translate(-50%, -80%); }
        15%, 80% { opacity: 1; transform: translate(-50%, -80%); }
    }

    .card-deck.is-active .deck-face {
        animation: none;
    }

    dialog.deck-draw-enter {
        animation-duration: 420ms;
    }

    dialog.deck-draw-enter .draw-card-flipper {
        animation-duration: 460ms;
        animation-delay: 360ms;
    }

    .player-card {
        transition: none;
    }
}