/* ===================================================================================
   MONEYBUILD — MOBILE GAME UI THEME  (theme.css)
   A mobile-first "neon tycoon" design system: dark cosmic surfaces, glass panels,
   tactile 3D buttons, bottom sheets, and a holo game board.
   Everything is prefixed `mb-` except a few legacy hooks the game logic depends on
   (.board-cell, .cell-rent, .development-icons, .center-board, .player-panel,
    .active-player, .message-log-container, .modal-overlay, .hidden).
   =================================================================================== */

/* ----------------------------------------------------------------- 1. TOKENS  */
:root {
    /* surfaces */
    --bg-0: #05070f;
    --bg-1: #0a1020;
    --bg-2: #111a30;
    --panel: rgba(255, 255, 255, .045);
    --panel-2: rgba(255, 255, 255, .075);
    --stroke: rgba(255, 255, 255, .10);
    --stroke-2: rgba(255, 255, 255, .20);

    /* text */
    --text: #eef3ff;
    --muted: #8b9ec4;
    --dim: #5f6f90;

    /* brand + semantics */
    --brand: #7c5cff;
    --brand-2: #22d3ee;
    --gold: #ffc53d;
    --mint: #2ee6a8;
    --rose: #ff5470;
    --amber: #ffa63d;
    --violet: #b06bff;

    /* board group colours */
    --g-amber: #c2703c;
    --g-sky: #38bdf8;
    --g-pink: #f472b6;
    --g-orange: #fb923c;
    --g-red: #f43f5e;
    --g-yellow: #facc15;
    --g-green: #22c55e;
    --g-blue: #5b7cff;
    --g-railway: #a78bfa;
    --g-utility: #67e8f9;

    /* shape */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 26px;
    --ring: 0 0 0 1px var(--stroke);
    --shadow-1: 0 8px 24px -12px rgba(0, 0, 0, .9);
    --shadow-2: 0 18px 44px -18px rgba(0, 0, 0, 1);

    /* chrome heights (used for board sizing) */
    --top-h: 108px;
    --dock-h: 148px;

    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);

    --font-ui: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-text: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ----------------------------------------------------------------- 2. BASE  */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-ui);
    color: var(--text);
    background: var(--bg-0);
    overscroll-behavior-y: none;
    -webkit-font-smoothing: antialiased;
}

/* aurora backdrop */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(90vw 60vh at 8% -6%, rgba(124, 92, 255, .30), transparent 62%),
        radial-gradient(80vw 55vh at 105% 8%, rgba(34, 211, 238, .20), transparent 60%),
        radial-gradient(120vw 70vh at 50% 108%, rgba(255, 197, 61, .12), transparent 62%),
        linear-gradient(180deg, var(--bg-1), var(--bg-0) 60%);
}

/* fine grid texture */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .35;
    background-image:
        linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(120vh 120vh at 50% 30%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(120vh 120vh at 50% 30%, #000 20%, transparent 78%);
}

.hidden { display: none !important; }

button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; border: 0; background: none; color: inherit; }
button:disabled { cursor: not-allowed; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

.mb-num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ----------------------------------------------------------------- 3. PRIMITIVES  */
.mb-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 18px;
    border-radius: var(--r-md);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
    color: #fff;
    text-align: center;
    background: linear-gradient(180deg, var(--b1, #3d4a68), var(--b2, #232c46));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -1px 0 rgba(0, 0, 0, .30),
        0 4px 0 var(--lip, rgba(0, 0, 0, .45)),
        0 12px 22px -12px rgba(0, 0, 0, .95);
    transition: transform .12s cubic-bezier(.2, .9, .3, 1.4), box-shadow .12s, filter .18s, opacity .18s;
    user-select: none;
}

.mb-btn:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 0 0 var(--lip, rgba(0, 0, 0, .45)),
        0 6px 14px -10px rgba(0, 0, 0, .9);
}

.mb-btn:disabled { filter: grayscale(.75) brightness(.62); opacity: .75; }

.mb-btn--primary { --b1: #8b6bff; --b2: #5a37e0; --lip: #35207f; }
.mb-btn--accent  { --b1: #35e0f5; --b2: #0f9fc4; --lip: #075f79; color: #04202b; text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.mb-btn--gold    { --b1: #ffd766; --b2: #e79b16; --lip: #94600a; color: #35210a; text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.mb-btn--mint    { --b1: #4ff0bb; --b2: #12b184; --lip: #076c50; color: #032c21; text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.mb-btn--danger  { --b1: #ff7b93; --b2: #e02a4d; --lip: #8b0f28; }
.mb-btn--slate   { --b1: #3d4a68; --b2: #232d47; --lip: #131a2c; }
.mb-btn--ghost {
    background: var(--panel);
    box-shadow: inset 0 0 0 1px var(--stroke);
    color: var(--text);
    font-weight: 700;
}
.mb-btn--ghost:active:not(:disabled) { transform: translateY(2px); background: var(--panel-2); }

.mb-btn--sm { min-height: 38px; font-size: 13px; padding: 0 13px; border-radius: 11px; }
.mb-btn--xs { min-height: 32px; font-size: 12px; padding: 0 11px; border-radius: 10px; font-weight: 700; }
.mb-btn--block { display: flex; width: 100%; }

.mb-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .028));
    border: 1px solid var(--stroke);
    border-radius: var(--r-lg);
    padding: 14px;
    box-shadow: var(--shadow-1);
}

.mb-card--flat { background: rgba(255, 255, 255, .04); box-shadow: none; }

.mb-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--muted);
}

.mb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--panel);
    border: 1px solid var(--stroke);
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

.mb-chip--gold { color: var(--gold); border-color: rgba(255, 197, 61, .35); background: rgba(255, 197, 61, .12); }
.mb-chip--mint { color: var(--mint); border-color: rgba(46, 230, 168, .35); background: rgba(46, 230, 168, .12); }
.mb-chip--rose { color: var(--rose); border-color: rgba(255, 84, 112, .35); background: rgba(255, 84, 112, .12); }
.mb-chip--cyan { color: var(--brand-2); border-color: rgba(34, 211, 238, .35); background: rgba(34, 211, 238, .12); }

.mb-input {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border-radius: var(--r-md);
    background: rgba(4, 8, 18, .75);
    border: 1px solid var(--stroke);
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.mb-input::placeholder { color: var(--dim); font-weight: 500; }
.mb-input:focus { border-color: rgba(124, 92, 255, .8); box-shadow: 0 0 0 4px rgba(124, 92, 255, .18); }

.mb-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.mb-progress { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .10); overflow: hidden; }
.mb-progress > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.mb-progress--gold > i { background: linear-gradient(90deg, #ffd766, #ff9e2c); }

.mb-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--r-md);
    background: rgba(4, 8, 18, .6);
    border: 1px solid var(--stroke);
}

.mb-seg button {
    flex: 1;
    min-height: 40px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    color: var(--muted);
    transition: .18s;
}

.mb-seg button.is-on {
    color: #fff;
    background: linear-gradient(180deg, #8b6bff, #5a37e0);
    box-shadow: 0 6px 16px -8px #7c5cff;
}

.mb-empty { text-align: center; color: var(--dim); font-size: 13px; padding: 18px 8px; }

/* ----------------------------------------------------------------- 4. APP SHELL  */
.mb-app {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.mb-top {
    position: sticky;
    top: 0;
    z-index: 40;
    padding: calc(8px + var(--safe-t)) 12px 8px;
    background: linear-gradient(180deg, rgba(6, 10, 22, .92), rgba(6, 10, 22, .55) 70%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mb-top-row { display: flex; align-items: center; gap: 8px; }

.mb-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    font-size: 17px;
    letter-spacing: -.02em;
    line-height: 1;
}

.mb-brand-mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 15px;
    background: linear-gradient(145deg, var(--brand), #4a2fd0 60%, var(--brand-2));
    box-shadow: 0 6px 16px -6px rgba(124, 92, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .4);
}

.mb-brand b { background: linear-gradient(92deg, #fff, #b9c8ff 60%, var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mb-brand small { display: block; font-size: 9px; font-weight: 700; letter-spacing: .22em; color: var(--dim); text-transform: uppercase; }

.mb-icon-btn {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--stroke);
    backdrop-filter: blur(8px);
    transition: transform .15s, background .2s;
}

.mb-icon-btn:active { transform: scale(.92); background: var(--panel-2); }

/* legacy id kept for game.js — restyled from the old floating blue circle */
#info-btn { position: static; }

/* ----------------------------------------------------------------- 5. PLAYER RAIL  */
.mb-rail {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-bottom: 2px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* fade the trailing edge so it reads as scrollable */
    mask-image: linear-gradient(90deg, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
}

.mb-rail::-webkit-scrollbar { display: none; }

.player-panel {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 128px;
    max-width: 190px;
    padding: 8px 10px;
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
    border: 1px solid var(--stroke);
    overflow: hidden;
    transition: transform .25s, border-color .25s, box-shadow .25s, opacity .25s;
}

.player-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--pc, var(--brand));
    box-shadow: 0 0 12px var(--pc, var(--brand));
}

.player-panel.active-player {
    border-color: rgba(255, 255, 255, .34) !important;
    background: linear-gradient(180deg, rgba(124, 92, 255, .30), rgba(34, 211, 238, .12));
    box-shadow: 0 0 0 1px rgba(124, 92, 255, .5), 0 10px 28px -14px var(--brand);
    transform: translateY(-1px);
}

.player-panel.is-out { opacity: .38; filter: grayscale(1); }

.mb-p-top { display: flex; align-items: center; gap: 6px; }

.mb-p-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pc);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 10px var(--pc);
    flex: 0 0 auto;
}

.mb-p-name {
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-p-you { font-size: 9px; font-weight: 800; color: var(--brand-2); letter-spacing: .1em; }

.mb-p-money {
    margin-top: 2px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.mb-p-money.is-neg { color: var(--rose); }

.mb-p-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.mb-tag {
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .09);
    color: var(--muted);
    white-space: nowrap;
}

.mb-tag--jail { background: rgba(91, 124, 255, .22); color: #9fb4ff; }
.mb-tag--warn { background: rgba(255, 197, 61, .18); color: var(--gold); }
.mb-tag--bad  { background: rgba(255, 84, 112, .20); color: var(--rose); }
.mb-tag--good { background: rgba(46, 230, 168, .18); color: var(--mint); }

@keyframes mb-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ----------------------------------------------------------------- 6. STAGE + 3D BOARD  */
/* The board is a real CSS 3D scene, not a picture of one:
   .mb-board-wrap   → the camera (perspective + perspective-origin)
   #board-zoom      → pan/zoom layer driven by shell.js, passes depth through
   .game-board      → the tilted table top, with an extruded plinth
   .board-cell      → an extruded slab: .cell-face on top, .cell-riser as its wall
   Everything is driven by `--level` (1 = tilted table, 0 = flat top-down),
   which the 3D/2D button in the top bar flips. Tile depth, token height,
   building height and type sizes all scale off --board-px, so the scene holds
   together from a 360px phone to a 860px desktop board. */

.mb-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 8px 10px;
    --feed-h: 84px;
}

/* the room the table stands in — keeps the space a tilted board frees up
   feeling like depth instead of dead air */
.mb-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(90% 40% at 50% 74%, rgba(124, 92, 255, .18), transparent 72%),
        radial-gradient(70% 34% at 50% 18%, rgba(34, 211, 238, .09), transparent 76%),
        linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .35));
}

.mb-board-wrap {
    /* ---- camera + scene ---- */
    --mode: 1;                                         /* 1 = 3D, 0 = flat. The view button. */
    --level: 1;                                        /* same, but free to be eased */
    --tilt-base: 44deg;
    --vdrop: .34;                                      /* height a tilted board gives back */
    --tilt: calc(var(--tilt-base) * var(--level));     /* board pitch */
    --fit: calc(1 - .17 * var(--level));               /* undo the perspective spread */
    --shift: calc(-4.6% * var(--level));               /* re-centre the tilted board */
    --vfit: calc(1 - var(--vdrop) * var(--mode));      /* fraction of its width it needs */

    /* shell.js measures the frame; the board takes the largest square that
       still fits once the tilt has been applied. Sized off --mode, not --level,
       so zooming never resizes the board underneath your fingers. */
    --wrap-w: 600px;
    --wrap-h: 600px;
    --board-px: min(var(--wrap-w), calc(var(--wrap-h) / var(--vfit)));

    /* ---- materials ---- */
    --tile-h: calc(var(--board-px) * .019);            /* slab thickness */
    --plinth: calc(var(--board-px) * .05);             /* table thickness */
    --tok: calc(var(--board-px) * .026);               /* player token footprint */
    --unit: calc(var(--board-px) * .022);              /* house footprint */

    position: relative;
    width: min(100%, 640px);
    aspect-ratio: 1 / var(--vfit);
    max-height: calc(100dvh - var(--top-h) - var(--dock-h) - var(--feed-h));
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--r-xl);
    touch-action: none;
    perspective: calc(var(--board-px) * 2.2);
    perspective-origin: 50% 46%;
    transition: aspect-ratio .4s cubic-bezier(.2, .8, .3, 1);
}

.mb-board-zoom {
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .28s cubic-bezier(.2, .8, .3, 1);
}

.mb-board-zoom.is-dragging { transition: none; }
.mb-board-wrap.is-dragging * { pointer-events: none; }

/* ---- the table --------------------------------------------------------- */
.game-board {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    grid-template-columns: 1.32fr repeat(9, 1fr) 1.32fr;
    grid-template-rows: 1.32fr repeat(9, 1fr) 1.32fr;
    gap: 3px;
    width: var(--board-px);
    aspect-ratio: 1 / 1;
    padding: 7px;
    border-radius: var(--r-xl);
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(124, 92, 255, .22), transparent 58%),
        radial-gradient(70% 60% at 12% 100%, rgba(34, 211, 238, .12), transparent 60%),
        linear-gradient(160deg, #182444 0%, #0b1120 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .10),
        inset 0 2px 0 rgba(255, 255, 255, .10);
    transform-style: preserve-3d;
    transform: translate(-50%, calc(-50% + var(--shift))) scale(var(--fit)) rotateX(var(--tilt));
    transition: transform .45s cubic-bezier(.2, .8, .3, 1);
}

/* front rim — the thickness of the table itself */
.game-board::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--plinth);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    background: linear-gradient(180deg, #26325a, #0a0e1c 72%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -8px 16px -8px #000;
    transform-origin: 50% 0;
    transform: rotateX(-90deg);
}

/* soft contact shadow on the floor beneath the table */
.game-board::after {
    content: "";
    position: absolute;
    inset: 2% -6% -8%;
    border-radius: 50%;
    background: radial-gradient(58% 52% at 50% 62%, rgba(0, 0, 0, .9), transparent 70%);
    filter: blur(14px);
    transform: translateZ(calc(-1 * var(--plinth) - 4px));
}

/* ---- tiles ------------------------------------------------------------- */
.board-cell {
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(var(--tile-h));
    transition: transform .28s cubic-bezier(.2, .9, .3, 1.2);
    cursor: pointer;
}

.cell-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #dbe4fb;
    background: linear-gradient(180deg, #223058 0%, #16203a 55%, #121a30 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        inset 0 0 0 1px rgba(0, 0, 0, .45);
    transition: background .25s, box-shadow .25s;
}

/* the slab walls, dropped from the tile face back down to the table */
.cell-riser {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform-style: preserve-3d;
}

/* near edge — visible on every tile, since the camera sits in front */
.cell-riser::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--tile-h);
    border-radius: 0 0 4px 4px;
    background: linear-gradient(180deg, #1b2744, #070b16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    transform-origin: 50% 0;
    transform: rotateX(-90deg);
}

/* outer columns also show a side wall, because they sit off the camera axis */
.left-col .cell-riser::after,
.right-col .cell-riser::after,
.corner .cell-riser::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--tile-h);
    background: linear-gradient(90deg, #16203a, #070b16);
}

.left-col .cell-riser::after,
#cell-10 .cell-riser::after,
#cell-20 .cell-riser::after  { left: 100%;  transform-origin: 0 50%;   transform: rotateY(90deg); }

.right-col .cell-riser::after,
#cell-0 .cell-riser::after,
#cell-30 .cell-riser::after  { right: 100%; transform-origin: 100% 50%; transform: rotateY(-90deg); }

.board-cell:active { transform: translateZ(calc(var(--tile-h) * .45)); }

/* the tile the current player is standing on lifts off the board */
.board-cell.is-hot {
    transform: translateZ(calc(var(--tile-h) * 2.6));
    z-index: 4;
}

.board-cell.is-hot .cell-face {
    background: linear-gradient(180deg, #3a4c85 0%, #202c4e 60%, #18213a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .32),
        inset 0 0 0 1px rgba(124, 92, 255, .55),
        0 0 22px -2px rgba(124, 92, 255, .85);
}

.board-cell.is-hot .cell-riser::before { background: linear-gradient(180deg, #3d4f8c, #0a1020); }

/* corners get a heavier, more monumental slab */
.corner { --tile-h: calc(var(--board-px) * .026); }
.corner .cell-face {
    border-radius: 11px;
    background: linear-gradient(160deg, #2b3a6b 0%, #16203c 55%, #0d1428 100%);
}
.corner .cell-riser { border-radius: 0 0 7px 7px; }

#cell-0  { grid-column: 11; grid-row: 11; } #cell-1  { grid-column: 10; grid-row: 11; }
#cell-2  { grid-column: 9;  grid-row: 11; } #cell-3  { grid-column: 8;  grid-row: 11; }
#cell-4  { grid-column: 7;  grid-row: 11; } #cell-5  { grid-column: 6;  grid-row: 11; }
#cell-6  { grid-column: 5;  grid-row: 11; } #cell-7  { grid-column: 4;  grid-row: 11; }
#cell-8  { grid-column: 3;  grid-row: 11; } #cell-9  { grid-column: 2;  grid-row: 11; }
#cell-10 { grid-column: 1;  grid-row: 11; } #cell-11 { grid-column: 1;  grid-row: 10; }
#cell-12 { grid-column: 1;  grid-row: 9;  } #cell-13 { grid-column: 1;  grid-row: 8;  }
#cell-14 { grid-column: 1;  grid-row: 7;  } #cell-15 { grid-column: 1;  grid-row: 6;  }
#cell-16 { grid-column: 1;  grid-row: 5;  } #cell-17 { grid-column: 1;  grid-row: 4;  }
#cell-18 { grid-column: 1;  grid-row: 3;  } #cell-19 { grid-column: 1;  grid-row: 2;  }
#cell-20 { grid-column: 1;  grid-row: 1;  } #cell-21 { grid-column: 2;  grid-row: 1;  }
#cell-22 { grid-column: 3;  grid-row: 1;  } #cell-23 { grid-column: 4;  grid-row: 1;  }
#cell-24 { grid-column: 5;  grid-row: 1;  } #cell-25 { grid-column: 6;  grid-row: 1;  }
#cell-26 { grid-column: 7;  grid-row: 1;  } #cell-27 { grid-column: 8;  grid-row: 1;  }
#cell-28 { grid-column: 9;  grid-row: 1;  } #cell-29 { grid-column: 10; grid-row: 1;  }
#cell-30 { grid-column: 11; grid-row: 1;  } #cell-31 { grid-column: 11; grid-row: 2;  }
#cell-32 { grid-column: 11; grid-row: 3;  } #cell-33 { grid-column: 11; grid-row: 4;  }
#cell-34 { grid-column: 11; grid-row: 5;  } #cell-35 { grid-column: 11; grid-row: 6;  }
#cell-36 { grid-column: 11; grid-row: 7;  } #cell-37 { grid-column: 11; grid-row: 8;  }
#cell-38 { grid-column: 11; grid-row: 9;  } #cell-39 { grid-column: 11; grid-row: 10; }

/* ---- colour band: a lit inlay strip ------------------------------------ */
.cell-band {
    position: absolute;
    z-index: 1;
    background: linear-gradient(180deg, color-mix(in srgb, var(--g, var(--brand)) 92%, #fff), var(--g, var(--brand)));
    box-shadow:
        0 0 12px -1px var(--g, var(--brand)),
        inset 0 0 0 1px rgba(255, 255, 255, .28);
}

/* bands always face the middle of the board */
.bottom-row .cell-band { left: 0; right: 0; top: 0;    height: 24%; }
.top-row .cell-band    { left: 0; right: 0; bottom: 0; height: 24%; }
.left-col .cell-band   { top: 0; bottom: 0; right: 0;  width: 24%; }
.right-col .cell-band  { top: 0; bottom: 0; left: 0;   width: 24%; }

[data-group="amber"]   { --g: var(--g-amber); }
[data-group="sky"]     { --g: var(--g-sky); }
[data-group="pink"]    { --g: var(--g-pink); }
[data-group="orange"]  { --g: var(--g-orange); }
[data-group="red"]     { --g: var(--g-red); }
[data-group="yellow"]  { --g: var(--g-yellow); }
[data-group="green"]   { --g: var(--g-green); }
[data-group="blue"]    { --g: var(--g-blue); }
[data-group="railway"] { --g: var(--g-railway); }
[data-group="utility"] { --g: var(--g-utility); }

.board-cell[data-group] .cell-riser::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--g) 32%, #16203a), #070b16 78%);
}

/* specular sheen — a single light source, up and to the left */
.cell-gloss {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(148deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 26%, transparent 52%);
    mix-blend-mode: screen;
}

/* ---- tile label -------------------------------------------------------- */
.cell-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
}

/* never let a tight cell squash its label away */
.cell-content > * { flex: 0 0 auto; }

.bottom-row .cell-content { padding-top: 20%; }
.top-row .cell-content    { padding-bottom: 20%; }
.left-col .cell-content   { padding-right: 20%; }
.right-col .cell-content  { padding-left: 20%; }

.cell-icon { font-size: 15px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8)); }
.corner .cell-icon { font-size: 22px; }

.cell-name {
    max-width: 100%;
    font-size: 0;
    font-weight: 800;
    letter-spacing: .02em;
    color: #e3eaff;
    overflow: hidden;
}

/* on small screens only the 3-letter code shows */
.cell-name::after {
    content: attr(data-abbr);
    font-size: min(8px, 2.2vw);
    line-height: 1;
}

.corner .cell-name { white-space: nowrap; }
.corner .cell-name::after { font-size: 8.5px; letter-spacing: .06em; }

.cell-price { display: none; font-size: 7px; font-weight: 800; color: var(--gold); }
.cell-rent  { display: none; font-size: 6.5px; font-weight: 700; color: var(--brand-2); }

/* the far row loses the most to perspective, so give it more type and contrast */
.top-row .cell-name::after { font-size: min(9.2px, 2.6vw); }
.top-row .cell-name { color: #f2f6ff; }
.top-row .cell-icon { font-size: 16px; }

/* ---- ownership --------------------------------------------------------- */
/* ui.js sets --own to the owner's colour */
.board-cell.is-owned .cell-face {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--own) 26%, transparent), transparent 62%),
        linear-gradient(180deg, #223058 0%, #16203a 55%, #121a30 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        inset 0 0 0 1.5px color-mix(in srgb, var(--own) 85%, transparent),
        0 0 16px -6px var(--own);
}

.board-cell.is-owned .cell-riser::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--own) 55%, #16203a), #070b16 78%);
}

.board-cell.is-mortgaged { opacity: .6; }
.board-cell.is-mortgaged .cell-face::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: repeating-linear-gradient(45deg, rgba(255, 84, 112, .34) 0 4px, transparent 4px 9px);
}

/* ---- buildings: extruded blocks that stand on the tile ------------------ */
.development-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform-style: preserve-3d;
    transform: translateZ(.6px);
}

.dev-unit-icon,
.dev-skyscraper-icon {
    --bh: var(--unit);
    position: absolute;
    width: var(--unit);
    height: calc(var(--unit) * .72);
    transform-style: preserve-3d;
    /* ground shadow */
    background: radial-gradient(60% 60% at 50% 60%, rgba(0, 0, 0, .55), transparent 72%);
}

/* front wall — rises off the tile */
.dev-unit-icon::before,
.dev-skyscraper-icon::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0;
    height: var(--bh);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bc, #6ee7ff) 70%, #fff) 0%, var(--bc, #6ee7ff) 38%, color-mix(in srgb, var(--bc, #6ee7ff) 45%, #000) 100%);
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .5);
    border-radius: 1px 1px 0 0;
    transform-origin: 50% 100%;
    transform: rotateX(-90deg);
}

/* roof — a flat plane resting on top of the walls */
.dev-unit-icon::after,
.dev-skyscraper-icon::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0;
    height: 100%;
    border-radius: 1px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--bc, #6ee7ff) 50%, #fff), color-mix(in srgb, var(--bc, #6ee7ff) 85%, #000));
    box-shadow: 0 0 7px -1px var(--bc, #6ee7ff);
    transform: translateZ(var(--bh));
}

.dev-unit-icon { --bc: #34d399; --bh: calc(var(--unit) * .6); }
.dev-unit-icon.pos1 { top: 8%;    left: 5%; }
.dev-unit-icon.pos2 { top: 8%;    right: 5%; }
.dev-unit-icon.pos3 { bottom: 26%; left: 5%; }
.dev-unit-icon.pos4 { bottom: 26%; right: 5%; }

.dev-skyscraper-icon {
    --bc: #6d8cff;
    --bh: calc(var(--unit) * 1.9);
    left: 50%;
    bottom: 24%;
    width: calc(var(--unit) * .72);
    margin-left: calc(var(--unit) * -.36);
}

/* lit windows, so the tower doesn't read as a stack of coins */
.dev-skyscraper-icon::before {
    background:
        repeating-linear-gradient(90deg, transparent 0 1px, rgba(255, 214, 120, .85) 1px 2px, transparent 2px 3px),
        repeating-linear-gradient(180deg, rgba(0, 0, 0, .45) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #dbe6ff 0%, var(--bc) 30%, color-mix(in srgb, var(--bc) 35%, #000) 100%);
}

.dev-skyscraper-icon::after {
    background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--bc) 70%, #000));
}

/* ---- player tokens: standing pieces with a contact shadow --------------- */
.player-token {
    position: absolute;
    z-index: 6;
    width: var(--tok);
    height: var(--tok);
    background: none;
    transform-style: preserve-3d;
    transform: translateZ(.5px);
    transition: top .32s cubic-bezier(.3, 1.2, .4, 1), left .32s cubic-bezier(.3, 1.2, .4, 1),
                right .32s cubic-bezier(.3, 1.2, .4, 1), bottom .32s cubic-bezier(.3, 1.2, .4, 1);
}

/* contact shadow, flat on the tile */
.player-token::after {
    content: "";
    position: absolute;
    inset: 22% -6% 6%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent 78%);
}

/* the piece itself, standing upright and facing the camera */
.player-token::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 34%;
    width: 78%;
    height: 132%;
    border-radius: 50% 50% 42% 42% / 64% 64% 36% 36%;
    background:
        radial-gradient(60% 42% at 34% 22%, rgba(255, 255, 255, .95), transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, var(--pc, #fff) 88%, #fff) 0%, var(--pc, #fff) 45%, color-mix(in srgb, var(--pc, #fff) 55%, #000) 100%);
    box-shadow: 0 0 9px -1px var(--pc, #fff), inset 0 0 0 .5px rgba(255, 255, 255, .8);
    transform-origin: 50% 100%;
    transform: translateX(-50%) rotateX(calc(-1 * var(--tilt)));
}

.player-token.is-turn { z-index: 8; animation: mb-token-hover 1.8s ease-in-out infinite; }
.player-token.is-moving { animation: mb-token-hop .5s cubic-bezier(.2, 1.2, .4, 1); }

@keyframes mb-token-hover {
    0%, 100% { transform: translateZ(.5px); }
    50%      { transform: translateZ(calc(var(--tok) * .55)); }
}

@keyframes mb-token-hop {
    0%   { transform: translateZ(.5px) scale(.6); }
    55%  { transform: translateZ(calc(var(--tok) * 1.6)) scale(1.25); }
    100% { transform: translateZ(.5px) scale(1); }
}

/* ---- centre of the board ---- */
.center-board {
    position: relative;
    grid-column: 2 / 11;
    grid-row: 2 / 11;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

/* the recessed well the HUD floats over */
/* a big ring lying flat on the felt — perspective turns it into an ellipse,
   which is what really sells the tilt */
.center-well::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 66%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .13);
    box-shadow:
        0 0 0 12px rgba(124, 92, 255, .05),
        0 0 90px -20px rgba(124, 92, 255, .9),
        inset 0 0 60px -16px rgba(34, 211, 238, .55);
}

.center-well::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .10);
}

.center-well {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background:
        radial-gradient(58% 44% at 50% 40%, rgba(124, 92, 255, .34), transparent 70%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 24px),
        linear-gradient(180deg, #0a1024, #04060f);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .08),
        inset 0 26px 40px -26px rgba(124, 92, 255, .9),
        inset 0 -20px 30px -24px rgba(34, 211, 238, .6);
    transform: translateZ(calc(var(--tile-h) * -.9));
}

/* the HUD is a hologram: always square to the camera, floating above the well */
.mb-center-hud {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 14px;
    text-align: center;
    /* stands up from the well like a sign, rather than sinking through it */
    transform-origin: 50% 100%;
    transform: translateZ(calc(var(--board-px) * .03)) rotateX(calc(-1 * var(--tilt)));
    transition: transform .45s cubic-bezier(.2, .8, .3, 1);
}

.mb-emblem { display: flex; flex-direction: column; align-items: center; gap: 1px; }

.mb-emblem-logo {
    font-size: clamp(15px, calc(var(--board-px) * .085), 46px);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1;
    background: linear-gradient(92deg, #fff 10%, #a9b8ff 55%, var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 14px rgba(124, 92, 255, .75));
}

.mb-emblem-sub { font-size: clamp(6.5px, calc(var(--board-px) * .022), 14px); font-weight: 700; letter-spacing: .28em; color: var(--dim); text-transform: uppercase; }

.mb-turn-banner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: clamp(8px, calc(var(--board-px) * .026), 16px);
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, color-mix(in srgb, var(--pc, #7c5cff) 55%, transparent), rgba(255, 255, 255, .05));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 6px 18px -8px var(--pc, #7c5cff);
}

.mb-turn-banner::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pc, #7c5cff);
    box-shadow: 0 0 10px var(--pc, #7c5cff);
    animation: mb-breathe 1.6s ease-in-out infinite;
}

.mb-turn-banner:empty { display: none; }

.mb-center-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }

.mb-stat {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: clamp(7.5px, calc(var(--board-px) * .023), 14px);
    font-weight: 800;
    line-height: 1.5;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .10);
    color: var(--muted);
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mb-stat:empty { display: none; }
.mb-stat[data-tone="up"]   { color: var(--mint); border-color: rgba(46, 230, 168, .35); background: rgba(46, 230, 168, .12); }
.mb-stat[data-tone="down"] { color: var(--rose); border-color: rgba(255, 84, 112, .35); background: rgba(255, 84, 112, .12); }
.mb-stat[data-tone="gold"] { color: var(--gold); border-color: rgba(255, 197, 61, .35); background: rgba(255, 197, 61, .12); }
.mb-stat[data-tone="cyan"] { color: var(--brand-2); border-color: rgba(34, 211, 238, .3); background: rgba(34, 211, 238, .1); }

/* activity feed — sits under the board so it stays readable */
.message-log-container { width: 100%; max-width: 640px; }

.message-log {
    max-height: 62px;
    overflow-y: auto;
    padding: 9px 13px;
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
    border: 1px solid var(--stroke);
    font-family: var(--font-text);
    font-size: 11.5px;
    line-height: 1.55;
    color: #98a8ca;
    text-align: left;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.message-log::-webkit-scrollbar { display: none; }
.message-log p { margin: 0; }
.message-log p:last-child { color: #fff; font-weight: 600; }

/* ---- camera controls (top bar) ----------------------------------------- */
.mb-zoom { display: flex; gap: 6px; }

.mb-zoom button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--muted);
    background: var(--panel);
    border: 1px solid var(--stroke);
    transition: transform .15s, color .2s, background .2s, box-shadow .2s;
}

.mb-zoom button:active { transform: scale(.9); color: #fff; background: rgba(124, 92, 255, .35); }

.mb-view-btn { font-size: 12px !important; letter-spacing: .04em; }

.mb-view-btn.is-on {
    color: #fff;
    background: linear-gradient(180deg, rgba(124, 92, 255, .9), rgba(124, 92, 255, .55));
    border-color: rgba(180, 160, 255, .55);
    box-shadow: 0 6px 16px -8px var(--brand), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.mb-board-wrap.is-zoomed { box-shadow: inset 0 0 0 2px rgba(124, 92, 255, .5); }

/* flat mode: no depth cues to pay for */
[data-view="flat"] .cell-riser,
[data-view="flat"] .game-board::before,
[data-view="flat"] .game-board::after { opacity: 0; }

/* ----------------------------------------------------------------- 7. DOCK  */
.mb-dock {
    position: sticky;
    bottom: 0;
    z-index: 45;
    padding: 8px 12px calc(8px + var(--safe-b));
    background: linear-gradient(180deg, transparent, rgba(5, 8, 18, .82) 22%, rgba(5, 8, 18, .97));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.mb-dock-inner { max-width: 620px; margin: 0 auto; }

.mb-dock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.mb-dice { display: flex; gap: 6px; }

.die {
    position: relative;
    display: grid;
    grid-template-areas: "a . b" "c d e" "f . g";
    place-content: center;
    gap: 2px;
    width: 36px;
    height: 36px;
    padding: 5px;
    border-radius: 10px;
    background: linear-gradient(160deg, #ffffff, #c9d3ea);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16), inset 0 2px 0 #fff, 0 6px 14px -6px rgba(0, 0, 0, .9);
}

.die i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #16203a;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .35);
}

.die[data-v="0"]::after { content: "?"; grid-area: d; font-size: 19px; font-weight: 900; color: #16203a; }
.die[data-v="1"] i:nth-child(1) { grid-area: d; }
.die[data-v="2"] i:nth-child(1) { grid-area: a; } .die[data-v="2"] i:nth-child(2) { grid-area: g; }
.die[data-v="3"] i:nth-child(1) { grid-area: a; } .die[data-v="3"] i:nth-child(2) { grid-area: d; } .die[data-v="3"] i:nth-child(3) { grid-area: g; }
.die[data-v="4"] i:nth-child(1) { grid-area: a; } .die[data-v="4"] i:nth-child(2) { grid-area: b; } .die[data-v="4"] i:nth-child(3) { grid-area: f; } .die[data-v="4"] i:nth-child(4) { grid-area: g; }
.die[data-v="5"] i:nth-child(1) { grid-area: a; } .die[data-v="5"] i:nth-child(2) { grid-area: b; } .die[data-v="5"] i:nth-child(3) { grid-area: d; } .die[data-v="5"] i:nth-child(4) { grid-area: f; } .die[data-v="5"] i:nth-child(5) { grid-area: g; }
.die[data-v="6"] i:nth-child(1) { grid-area: a; } .die[data-v="6"] i:nth-child(2) { grid-area: b; } .die[data-v="6"] i:nth-child(3) { grid-area: c; } .die[data-v="6"] i:nth-child(4) { grid-area: e; } .die[data-v="6"] i:nth-child(5) { grid-area: f; } .die[data-v="6"] i:nth-child(6) { grid-area: g; }

.die.is-rolling { animation: mb-roll .5s cubic-bezier(.3, 1.4, .5, 1); }

@keyframes mb-roll {
    0%   { transform: rotate(0) scale(1); }
    35%  { transform: rotate(-18deg) scale(1.16); }
    70%  { transform: rotate(14deg) scale(1.06); }
    100% { transform: rotate(0) scale(1); }
}

.mb-wallet { text-align: right; line-height: 1.1; }
.mb-wallet span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.mb-wallet b { font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: var(--gold); font-variant-numeric: tabular-nums; }
.mb-wallet b.is-neg { color: var(--rose); }

.mb-dock-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
#action-buttons-container { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mb-span2 { grid-column: span 2; }

/* secondary dock buttons stay slimmer than the primary action */
.mb-dock #bank-btn, .mb-dock #railway-btn { min-height: 42px; font-size: 14px; }

.mb-hint {
    margin: 6px 0 0;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    font-family: var(--font-text);
}

/* ----------------------------------------------------------------- 8. TOASTS  */
.mb-toasts {
    position: fixed;
    left: 50%;
    top: calc(var(--safe-t) + 8px);
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: min(94vw, 460px);
    transform: translateX(-50%);
    pointer-events: none;
}

.mb-toast {
    max-width: 100%;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(12, 18, 36, .94);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: var(--shadow-2), 0 0 24px -12px var(--brand);
    font-family: var(--font-text);
    font-size: 12.5px;
    font-weight: 600;
    color: #eaf0ff;
    text-align: center;
    animation: mb-toast-in .3s cubic-bezier(.2, 1.3, .4, 1) both;
}

.mb-toast.is-out { animation: mb-toast-out .3s ease forwards; }

@keyframes mb-toast-in  { from { opacity: 0; transform: translateY(-14px) scale(.94); } }
@keyframes mb-toast-out { to   { opacity: 0; transform: translateY(-10px) scale(.96); } }

/* ----------------------------------------------------------------- 9. SHEETS / MODALS  */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(3, 6, 14, .72);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    animation: mb-fade .2s ease both;
}

@keyframes mb-fade { from { opacity: 0; } }

/* every direct child of an overlay becomes a sheet */
.modal-overlay > div {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 90dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 16px calc(20px + var(--safe-b));
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(124, 92, 255, .18), transparent 60%),
        linear-gradient(180deg, #131b30, #080d1a);
    border: 1px solid var(--stroke);
    border-bottom: 0;
    box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 1);
    color: var(--text);
    animation: mb-sheet-up .34s cubic-bezier(.2, .9, .25, 1) both;
}

@keyframes mb-sheet-up { from { transform: translateY(100%); } }

/* drag handle */
.modal-overlay > div::before {
    content: "";
    position: sticky;
    top: -8px;
    display: block;
    width: 40px;
    height: 4px;
    margin: -10px auto 12px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .22);
}

.mb-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.mb-sheet-title {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.mb-sheet-sub { margin: 3px 0 0; font-size: 12.5px; font-weight: 500; color: var(--muted); font-family: var(--font-text); }

.mb-sheet-x {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
    color: var(--muted);
    background: var(--panel);
    border: 1px solid var(--stroke);
}

.mb-sheet-x:active { transform: scale(.9); }

.mb-sheet--hero { text-align: center; }
.mb-sheet-emoji { font-size: 40px; line-height: 1; margin-bottom: 6px; display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .8)); }

.mb-stack { display: flex; flex-direction: column; gap: 12px; }
.mb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.mb-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; font-family: var(--font-text); }
.mb-kv dt { color: var(--muted); }
.mb-kv dd { margin: 0; font-weight: 800; font-family: var(--font-ui); }

.mb-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--stroke);
}

.mb-list-item h5 { margin: 0; font-size: 14px; font-weight: 800; }
.mb-list-item p { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); font-family: var(--font-text); }

.mb-group-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--g, var(--brand));
}

.mb-group-title::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: var(--g, var(--brand));
    box-shadow: 0 0 10px var(--g, var(--brand));
}

/* ---- banking sheet ---- */
#banking-modal > div { max-width: 700px; }

.mb-bank-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: var(--r-lg);
    background: linear-gradient(120deg, rgba(124, 92, 255, .32), rgba(34, 211, 238, .16));
    border: 1px solid rgba(255, 255, 255, .16);
}

.mb-bank-hero small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.mb-bank-hero b { font-size: 22px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }

.mb-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 14px; }

.mb-stat-tile {
    padding: 9px 8px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--stroke);
    text-align: center;
}

.mb-stat-tile span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.mb-stat-tile b { font-size: 14.5px; font-weight: 900; font-variant-numeric: tabular-nums; }

/* legacy bank classes, restyled */
.bank-section-card {
    padding: 14px;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
    border: 1px solid var(--stroke);
}

.bank-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.bank-section-title svg { width: 18px; height: 18px; opacity: .8; }

/* ---- passbook ---- */
.passbook-modal { color: var(--text); }
.passbook-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.passbook-title { margin: 0; font-size: 19px; font-weight: 900; }
.passbook-owner { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.passbook-content { max-height: 52dvh; overflow-y: auto; border-radius: var(--r-md); border: 1px solid var(--stroke); }
.passbook-table { width: 100%; border-collapse: collapse; font-family: var(--font-text); }
.passbook-table th {
    position: sticky;
    top: 0;
    padding: 8px 10px;
    background: #101830;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dim);
    text-align: left;
}
.passbook-table td { padding: 9px 10px; font-size: 11.5px; border-top: 1px solid rgba(255, 255, 255, .06); vertical-align: top; }
.passbook-debit { color: var(--rose); font-weight: 700; text-align: center; white-space: nowrap; }
.passbook-credit { color: var(--mint); font-weight: 700; text-align: center; white-space: nowrap; }
.passbook-table td:last-child { text-align: right; font-weight: 800; white-space: nowrap; }
.passbook-footer { padding-top: 12px; }

/* ---- stock market ---- */
.mb-stock {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 10px;
    padding: 12px;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--stroke);
}

.mb-stock-name { font-size: 14px; font-weight: 800; line-height: 1.15; }
.mb-stock-ticker { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--dim); }
.mb-stock-price { text-align: right; font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.mb-stock-trade { grid-column: span 2; display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; }
.mb-stock-trade .mb-input { min-height: 40px; font-size: 14px; }
.stock-up { color: var(--mint); }
.stock-down { color: var(--rose); }

/* ---- chance / relief cards ---- */
.chance-card-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    perspective: 1200px;
    padding: 4px 0;
}

.chance-card {
    position: relative;
    flex: 1 1 0;
    max-width: 160px;
    aspect-ratio: 5 / 7;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.2, .8, .3, 1);
    cursor: pointer;
}

.chance-card:active { transform: translateY(-6px); }
.chance-card.is-flipped { transform: rotateY(180deg); }
.chance-card.is-flipped:active { transform: rotateY(180deg); }

.card-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    border-radius: 16px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    text-align: center;
    font-family: var(--font-text);
    font-size: 11.5px;
    line-height: 1.35;
    overflow: hidden;
}

.card-back {
    font-family: var(--font-ui);
    font-size: 34px;
    font-weight: 900;
    color: #fff;
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(255, 255, 255, .28), transparent 60%),
        linear-gradient(160deg, #7c5cff, #3d1fb8);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 14px 30px -16px #7c5cff;
    text-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}

.card-front {
    transform: rotateY(180deg);
    color: var(--text);
    background: linear-gradient(170deg, #1d2846, #121a30);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.card-front-icon { font-size: 26px; }

#relief-fund-options-container .card-back { background: radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.25), transparent 60%), linear-gradient(160deg, #12b184, #05614a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 14px 30px -16px #12b184; }
#relief-fund-options-container .chance-card { max-width: 200px; }
#relief-fund-options-container .card-front { justify-content: flex-start; align-items: stretch; text-align: left; }

/* ---- lucky wheel ---- */
#lucky-wheel-container { position: relative; margin: 0 auto; }

#lucky-wheel {
    border-radius: 50%;
    background: #0b1020;
    box-shadow: 0 0 0 6px #131b30, 0 0 0 8px var(--gold), 0 0 40px -8px var(--gold), inset 0 0 30px rgba(0, 0, 0, .6);
    overflow: hidden;
    transition: transform 4s cubic-bezier(.15, .85, .2, 1);
}

#wheel-pointer { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .8)); }

/* ---- property / info sheet ---- */
.mb-prop-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px;
    border-radius: var(--r-lg);
    background: linear-gradient(120deg, rgba(124, 92, 255, .35), rgba(255, 255, 255, .04));
    background: linear-gradient(120deg, color-mix(in srgb, var(--g) 45%, transparent), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.mb-prop-type { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.mb-prop-price { font-size: 22px; font-weight: 900; color: #fff; }

.mb-rent-list { display: flex; flex-direction: column; }

.mb-rent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-family: var(--font-text);
    color: var(--muted);
}

.mb-rent-row + .mb-rent-row { border-top: 1px solid rgba(255, 255, 255, .06); }
.mb-rent-row b { font-family: var(--font-ui); color: var(--text); }

.mb-rent-row.is-now {
    background: rgba(46, 230, 168, .12);
    box-shadow: inset 0 0 0 1px rgba(46, 230, 168, .35);
    color: var(--mint);
    border-top-color: transparent;
}

.mb-rent-row.is-now b { color: var(--mint); }

.mb-leader-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: 13.5px; font-weight: 700; }
.mb-leader-top b:last-child { color: var(--gold); }

/* ---- auction ---- */
.mb-auction-timer {
    margin: 14px 0 0;
    text-align: center;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .04em;
    color: var(--gold);
}

.mb-auction-timer.is-urgent { color: var(--rose); animation: mb-breathe 1s ease-in-out infinite; }

/* ---- wheels ---- */
.mb-wheel-wrap { position: relative; width: 210px; height: 210px; margin: 0 auto 8px; }

#lucky-wheel { position: relative; width: 100%; height: 100%; }

.mb-wheel-label {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 74px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
    pointer-events: none;
}

#wheel-pointer {
    position: absolute;
    left: 50%;
    top: -6px;
    z-index: 10;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 22px solid var(--gold);
}

#wheel-center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 9;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(160deg, #fff, #ffd766);
    box-shadow: 0 0 0 4px #131b30, 0 4px 12px rgba(0, 0, 0, .8);
}

.mb-wheel-result {
    min-height: 26px;
    margin: 12px 0 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--gold);
    animation: mb-breathe 1.6s ease-in-out infinite;
}

/* ----------------------------------------------------------------- 10. LOBBY / ONBOARDING (index.html)  */
.mb-lobby {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100dvh;
    padding: calc(28px + var(--safe-t)) 18px calc(28px + var(--safe-b));
    max-width: 520px;
    margin: 0 auto;
}

.mb-hero { text-align: center; margin-bottom: 22px; }

.mb-hero-logo {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 14px;
    border-radius: 24px;
    font-size: 38px;
    background: linear-gradient(150deg, var(--brand), #4526cc 55%, var(--brand-2));
    box-shadow: 0 20px 44px -18px var(--brand), inset 0 2px 0 rgba(255, 255, 255, .45);
    animation: mb-float 4.5s ease-in-out infinite;
}

@keyframes mb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.mb-hero h1 {
    margin: 0;
    font-size: clamp(34px, 11vw, 46px);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1;
    background: linear-gradient(96deg, #fff 15%, #b0c0ff 55%, var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mb-hero h2 {
    margin: 7px 0 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--dim);
    padding-left: .42em;
}

.mb-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 197, 61, .12);
    border: 1px solid rgba(255, 197, 61, .3);
    color: var(--gold);
    transition: .3s;
}

.mb-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: mb-breathe 1.5s ease-in-out infinite;
}

.mb-status[data-state="ok"]  { color: var(--mint); background: rgba(46, 230, 168, .12); border-color: rgba(46, 230, 168, .3); }
.mb-status[data-state="err"] { color: var(--rose); background: rgba(255, 84, 112, .12); border-color: rgba(255, 84, 112, .3); }

.mb-panel {
    padding: 18px;
    border-radius: var(--r-xl);
    background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(12px);
}

.mb-panel h3 { margin: 0 0 4px; font-size: 20px; font-weight: 900; letter-spacing: -.02em; }
.mb-panel p.mb-panel-sub { margin: 0 0 16px; font-size: 13px; color: var(--muted); font-family: var(--font-text); }

.mb-code-input {
    text-align: center;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: .34em;
    text-transform: uppercase;
    padding-left: .34em;
    min-height: 60px;
}

.mb-count {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.mb-count button {
    padding: 13px 0;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--stroke);
    font-weight: 800;
    color: var(--muted);
    transition: .18s;
}

.mb-count button.is-on {
    color: #fff;
    background: linear-gradient(180deg, rgba(124, 92, 255, .6), rgba(90, 55, 224, .5));
    border-color: rgba(255, 255, 255, .35);
    box-shadow: 0 10px 24px -14px var(--brand);
}

.mb-count b { display: block; font-size: 20px; font-weight: 900; color: inherit; }
.mb-count span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

.mb-lobby-code {
    display: block;
    text-align: center;
    font-size: 40px;
    font-weight: 900;
    letter-spacing: .18em;
    padding-left: .18em;
    line-height: 1.1;
    background: linear-gradient(96deg, #ffd766, #ff9e2c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 18px rgba(255, 158, 44, .4));
}

.mb-slot-list { display: flex; flex-direction: column; gap: 8px; }

.mb-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--stroke);
    font-weight: 700;
    animation: mb-slot-in .35s cubic-bezier(.2, 1.2, .4, 1) both;
}

@keyframes mb-slot-in { from { opacity: 0; transform: translateX(-10px); } }

.mb-slot--empty {
    border-style: dashed;
    color: var(--dim);
    font-weight: 600;
    background: transparent;
    animation: none;
}

.mb-msg { min-height: 20px; margin-top: 14px; text-align: center; font-size: 13px; font-weight: 700; color: var(--rose); }

/* ----------------------------------------------------------------- 11. LOADER  */
.mb-loader { display: grid; place-items: center; min-height: 100dvh; padding: 24px; text-align: center; }

.mb-spinner {
    width: 54px;
    height: 54px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, .12);
    border-top-color: var(--brand);
    border-right-color: var(--brand-2);
    animation: mb-spin .9s linear infinite;
}

@keyframes mb-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------- 12. RESPONSIVE  */
/* short screens — drop the feed so the board keeps its size */
@media (max-height: 700px) {
    .mb-stage { --feed-h: 0px; }
    #activity-feed { display: none; }
}

/* small phones — a shallower camera keeps the far row readable */
@media (max-width: 399px) {
    .mb-board-wrap { --tilt-base: 34deg; --vdrop: .25; --fit: calc(1 - .13 * var(--level)); }
}

/* larger phones — show prices */
@media (min-width: 400px) {
    .cell-name::after { font-size: 8px; }
    .cell-icon { font-size: 17px; }
    .cell-price { display: block; }
}

/* small tablets — show full names and rent */
@media (min-width: 620px) {
    :root { --top-h: 116px; --dock-h: 158px; }
    .cell-name { font-size: 8px; }
    .cell-name::after { content: none; }
    .top-row .cell-name { font-size: 8.6px; }
    .cell-price { font-size: 7.5px; }
    .cell-rent { display: block; font-size: 7px; }
    .cell-icon { font-size: 17px; }
    .corner .cell-icon { font-size: 26px; }
    .modal-overlay { align-items: center; padding: 20px; }
    .modal-overlay > div { border-radius: var(--r-xl); border-bottom: 1px solid var(--stroke); max-height: 88dvh; }
    .modal-overlay > div::before { display: none; }
    .mb-grid-2 { gap: 12px; }
}

/* desktop — board + side rail */
@media (min-width: 1024px) {
    .mb-app {
        display: grid;
        grid-template-columns: 1fr 340px;
        grid-template-rows: auto 1fr;
        grid-template-areas: "top side" "stage side";
        column-gap: 18px;
        padding-right: 18px;
    }

    .mb-top { grid-area: top; background: none; backdrop-filter: none; }
    .mb-stage { grid-area: stage; }
    .mb-dock {
        grid-area: side;
        position: sticky;
        top: 18px;
        align-self: start;
        margin: 18px 0;
        border: 1px solid var(--stroke);
        border-radius: var(--r-xl);
        background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    }

    .mb-rail { flex-wrap: wrap; mask-image: none; -webkit-mask-image: none; }
    .player-panel { flex: 1 1 150px; max-width: 240px; }

    /* the dock lives in the side column here, so it no longer eats board height —
       and the extra room buys a deeper camera angle */
    .mb-board-wrap {
        --tilt-base: 46deg;
        --vdrop: .36;
        --fit: calc(1 - .17 * var(--level));
        width: min(100%, 860px);
        max-height: calc(100dvh - var(--top-h) - var(--feed-h) - 46px);
    }

    .message-log-container { max-width: 860px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}