/* ==========================================================================
   LudoBoard — stylesheet
   Design direction: "Aurora Arcade" — a night-sky board room. Deep indigo
   glass panels, aurora gradients, gold trophy accents. Built mobile-first so
   the site behaves like an installed app on a phone.
   No CSS framework, no template. Everything below is hand written.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* palette */
    --ink-900: #0a0619;
    --ink-800: #130a2e;
    --ink-700: #1c1040;
    --ink-600: #2a1860;
    --glass: rgba(255, 255, 255, .07);
    --glass-2: rgba(255, 255, 255, .12);
    --line: rgba(255, 255, 255, .14);
    --text: #f3efff;
    --muted: #a99fd0;
    --gold: #ffd166;
    --gold-2: #ff9f1c;

    /* player gradients */
    --red-1: #ff5c7a;
    --red-2: #c81046;
    --green-1: #4ee89a;
    --green-2: #0b9c56;
    --yellow-1: #ffd75e;
    --yellow-2: #f08a00;
    --blue-1: #57b0ff;
    --blue-2: #1546c8;

    /* aurora accents */
    --a1: #7c3aed;
    --a2: #ec4899;
    --a3: #22d3ee;

    --grad-app: radial-gradient(1200px 800px at 12% -10%, #3b1d7a 0%, transparent 55%),
                radial-gradient(900px 700px at 105% 8%, #7a1d5e 0%, transparent 52%),
                radial-gradient(900px 900px at 50% 115%, #123a6b 0%, transparent 55%),
                linear-gradient(170deg, var(--ink-900), var(--ink-800) 55%, #0d0724);
    --grad-cta: linear-gradient(135deg, var(--a2) 0%, var(--a1) 52%, var(--a3) 100%);
    --grad-gold: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
    --grad-board: linear-gradient(145deg, #ffffff 0%, #f2edff 100%);

    /* metrics */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-pill: 999px;
    --shadow-1: 0 8px 26px rgba(0, 0, 0, .38);
    --shadow-2: 0 18px 46px rgba(0, 0, 0, .5);
    --pad: clamp(12px, 3.4vw, 22px);
    --top-h: 56px;

    --font-display: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* themes ------------------------------------------------------------------ */
html[data-theme="sunset"] {
    --a1: #f97316; --a2: #ef4444; --a3: #fbbf24;
    --grad-app: radial-gradient(1100px 780px at 10% -8%, #7c2d12 0%, transparent 55%),
                radial-gradient(900px 700px at 100% 6%, #831843 0%, transparent 50%),
                linear-gradient(170deg, #1a0a12, #2a0f1a 60%, #140811);
}
html[data-theme="emerald"] {
    --a1: #10b981; --a2: #06b6d4; --a3: #a3e635;
    --grad-app: radial-gradient(1100px 780px at 12% -8%, #064e3b 0%, transparent 55%),
                radial-gradient(900px 700px at 100% 6%, #0f766e 0%, transparent 50%),
                linear-gradient(170deg, #04140f, #062018 60%, #03110d);
}
html[data-theme="midnight"] {
    --a1: #3b82f6; --a2: #8b5cf6; --a3: #38bdf8;
    --grad-app: radial-gradient(1000px 760px at 10% -8%, #1e3a8a 0%, transparent 55%),
                radial-gradient(880px 700px at 100% 6%, #312e81 0%, transparent 50%),
                linear-gradient(170deg, #050a1c, #0a1230 60%, #04081a);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text);
    background: var(--grad-app);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}
body.in-game { overflow: hidden; }
h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; margin: 0; }
p { margin: 0 0 .8em; color: var(--muted); line-height: 1.65; }
a { color: var(--a3); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 3px solid var(--a3); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--a2); color: #fff; }

/* --------------------------------------------------------------------------
   3. Shell
   -------------------------------------------------------------------------- */
.lb-app {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.lb-top {
    position: sticky; top: 0; z-index: 60;
    height: var(--top-h);
    display: flex; align-items: center; gap: 10px;
    padding: 0 var(--pad);
    background: linear-gradient(180deg, rgba(10, 6, 25, .92), rgba(10, 6, 25, .55));
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.lb-logo { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 1.16rem; font-weight: 800; color: #fff; }
.lb-logo:hover { text-decoration: none; }
.lb-logo__mark {
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--grad-cta);
    display: grid; place-items: center; font-size: 17px;
    box-shadow: 0 6px 18px rgba(124, 58, 237, .5);
}
.lb-logo__mark::after { content: "🎲"; }
.lb-top__spacer { flex: 1; }

.lb-wallet {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--r-pill);
    background: var(--grad-gold); color: #3a2500; font-weight: 800; font-size: .86rem;
    box-shadow: 0 6px 16px rgba(255, 159, 28, .32);
}
.lb-iconbtn {
    width: 38px; height: 38px; border-radius: 12px;
    display: grid; place-items: center; font-size: 17px;
    background: var(--glass); border: 1px solid var(--line);
    transition: transform .15s, background .2s;
}
.lb-iconbtn:hover { background: var(--glass-2); transform: translateY(-1px); }

.lb-main { flex: 1; width: 100%; }
.lb-wrap { width: min(1120px, 100%); margin: 0 auto; padding: var(--pad); }

.lb-screen { display: none; }
.lb-screen.is-active { display: block; animation: fadeUp .32s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   4. Cards, buttons, chips
   -------------------------------------------------------------------------- */
.lb-card {
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(16px, 4vw, 24px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-1);
}
.lb-card + .lb-card { margin-top: 14px; }
.lb-card__title { font-size: 1.02rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.lb-card__title small { font-weight: 500; color: var(--muted); font-family: var(--font-body); font-size: .78rem; }

.lb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 22px; border-radius: var(--r-pill);
    font-weight: 700; font-size: .95rem;
    background: var(--glass-2); border: 1px solid var(--line);
    transition: transform .14s, box-shadow .2s, filter .2s;
}
.lb-btn:hover { transform: translateY(-2px); }
.lb-btn:active { transform: translateY(0) scale(.985); }
.lb-btn--primary {
    background: var(--grad-cta); border: 0; color: #fff;
    box-shadow: 0 12px 30px rgba(124, 58, 237, .42);
}
.lb-btn--primary:hover { filter: brightness(1.08); box-shadow: 0 16px 38px rgba(124, 58, 237, .55); }
.lb-btn--gold { background: var(--grad-gold); color: #3a2500; border: 0; box-shadow: 0 12px 28px rgba(255, 159, 28, .38); }
.lb-btn--ghost { background: transparent; }
.lb-btn--block { width: 100%; }
.lb-btn--lg { padding: 17px 30px; font-size: 1.06rem; }
.lb-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none !important; }

.lb-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.lb-chip {
    padding: 10px 16px; border-radius: var(--r-pill);
    border: 1px solid var(--line); background: var(--glass);
    font-weight: 700; font-size: .87rem; color: var(--muted);
    transition: .2s;
}
.lb-chip:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }
.lb-chip.is-on {
    background: var(--grad-cta); color: #fff; border-color: transparent;
    box-shadow: 0 8px 20px rgba(124, 58, 237, .38);
}

.lb-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 12px 4px; border-bottom: 1px solid var(--line);
    font-weight: 600;
}
.lb-toggle:last-child { border-bottom: 0; }
.lb-toggle::after {
    content: ""; width: 46px; height: 27px; border-radius: var(--r-pill); flex: none;
    background: rgba(255, 255, 255, .16); position: relative; transition: background .25s;
    box-shadow: inset 0 0 0 1px var(--line);
}
.lb-toggle::before {
    content: ""; position: absolute; right: calc(var(--pad) + 21px); width: 21px; height: 21px;
    border-radius: 50%; background: #fff; transition: transform .25s; z-index: 2;
}
.lb-toggle { position: relative; }
.lb-toggle.is-on::after { background: var(--grad-cta); }
.lb-toggle.is-on::before { transform: translateX(19px); }

/* --------------------------------------------------------------------------
   5. Home screen
   -------------------------------------------------------------------------- */
.lb-hero {
    position: relative; overflow: hidden;
    border-radius: var(--r-lg);
    padding: clamp(22px, 6vw, 44px);
    background: linear-gradient(140deg, rgba(124, 58, 237, .34), rgba(236, 72, 153, .22) 45%, rgba(34, 211, 238, .2));
    border: 1px solid var(--line);
    box-shadow: var(--shadow-2);
}
.lb-hero::before {
    content: ""; position: absolute; inset: -40% -20% auto -20%; height: 90%;
    background: conic-gradient(from 210deg, transparent, rgba(255, 255, 255, .16), transparent 55%);
    animation: sweep 9s linear infinite; pointer-events: none;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.lb-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
    padding: 6px 13px; border-radius: var(--r-pill);
    background: rgba(0, 0, 0, .3); border: 1px solid var(--line);
    font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
}
.lb-hero h1 {
    font-size: clamp(1.9rem, 8vw, 3.4rem); line-height: 1.03; margin-bottom: 12px;
    background: linear-gradient(100deg, #fff 20%, var(--gold) 60%, var(--a3) 95%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lb-hero p { max-width: 46ch; color: #ded7ff; font-size: clamp(.95rem, 3.4vw, 1.05rem); }
.lb-hero__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 20px; position: relative; z-index: 2; }

.lb-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin-top: 14px; }
.lb-quick__item {
    display: flex; align-items: center; gap: 11px; padding: 14px;
    border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--line);
    text-align: left; transition: .2s;
}
.lb-quick__item:hover { background: var(--glass-2); transform: translateY(-2px); }
.lb-quick__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; flex: none; background: var(--grad-cta); }
.lb-quick__item b { display: block; font-size: .93rem; }
.lb-quick__item span { font-size: .76rem; color: var(--muted); }
.lb-quick__item.is-claimed { opacity: .55; }

.lb-featgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.lb-feat { padding: 18px; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--line); }
.lb-feat__ico { font-size: 24px; margin-bottom: 8px; }
.lb-feat b { display: block; margin-bottom: 5px; }
.lb-feat span { font-size: .84rem; color: var(--muted); line-height: 1.55; }

.lb-statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lb-stat { text-align: center; padding: 14px 8px; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--line); }
.lb-stat b { display: block; font-family: var(--font-display); font-size: 1.5rem; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lb-stat span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* --------------------------------------------------------------------------
   6. Game screen
   -------------------------------------------------------------------------- */
.lb-play {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    height: calc(100dvh - var(--top-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 10px var(--pad) 8px;
}

.lb-seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.lb-seats:has(.lb-seat:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.lb-seats:has(.lb-seat:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }

.lb-seat {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 7px;
    padding: 7px 8px; border-radius: 14px;
    background: var(--glass); border: 1px solid var(--line);
    transition: .25s; min-width: 0;
}
.lb-seat.is-active { border-color: transparent; box-shadow: 0 0 0 2px var(--gold), 0 8px 22px rgba(0, 0, 0, .4); background: rgba(255, 255, 255, .13); }
.lb-seat.is-out { opacity: .45; }
.lb-seat.is-out::after { content: attr(data-rank); position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .5); font-family: var(--font-display); font-size: 1.1rem; }
.lb-seat__ring { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; padding: 2px; }
.lb-seat--red .lb-seat__ring { background: linear-gradient(135deg, var(--red-1), var(--red-2)); }
.lb-seat--green .lb-seat__ring { background: linear-gradient(135deg, var(--green-1), var(--green-2)); }
.lb-seat--yellow .lb-seat__ring { background: linear-gradient(135deg, var(--yellow-1), var(--yellow-2)); }
.lb-seat--blue .lb-seat__ring { background: linear-gradient(135deg, var(--blue-1), var(--blue-2)); }
.lb-seat__avatar { width: 100%; height: 100%; border-radius: 50%; background: var(--ink-800); display: grid; place-items: center; font-size: 15px; }
.lb-seat__meta { min-width: 0; }
.lb-seat__name { display: block; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-seat__stat { font-size: .68rem; color: var(--muted); }
.lb-seat__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .1); }
.lb-seat__timer span { display: block; height: 100%; width: 0; background: var(--grad-gold); transition: width .1s linear; }
.lb-emote { position: absolute; right: 6px; top: 2px; font-size: 21px; animation: pop 1.5s ease both; }
@keyframes pop { 0% { transform: scale(0) translateY(6px); } 25% { transform: scale(1.25); } 40% { transform: scale(1); } 100% { transform: scale(1) translateY(-16px); opacity: 0; } }

/* board -------------------------------------------------------------------- */
.lb-boardwrap { display: grid; place-items: center; min-height: 0; }
.lb-board {
    position: relative;
    width: min(100%, calc(100dvh - var(--top-h) - 210px));
    max-width: 560px;
    aspect-ratio: 1 / 1;
    border-radius: clamp(14px, 3vw, 26px);
    background: var(--grad-board);
    padding: 0;
    box-shadow: 0 0 0 clamp(5px, 1.4vw, 10px) rgba(255, 255, 255, .08),
                0 26px 60px rgba(0, 0, 0, .55),
                inset 0 0 60px rgba(124, 58, 237, .08);
    overflow: hidden;
    touch-action: manipulation;
}
.lb-board::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .55), transparent 45%);
    mix-blend-mode: soft-light;
}

.lb-yard { position: absolute; padding: 5.5%; }
.lb-yard--red { background: linear-gradient(150deg, var(--red-1), var(--red-2)); }
.lb-yard--green { background: linear-gradient(150deg, var(--green-1), var(--green-2)); }
.lb-yard--yellow { background: linear-gradient(150deg, var(--yellow-1), var(--yellow-2)); }
.lb-yard--blue { background: linear-gradient(150deg, var(--blue-1), var(--blue-2)); }
.lb-yard__inner {
    width: 100%; height: 100%; border-radius: 14%;
    background: rgba(255, 255, 255, .93);
    display: grid; grid-template-columns: 1fr 1fr; place-items: center;
    padding: 9%; gap: 6%;
    box-shadow: inset 0 3px 12px rgba(0, 0, 0, .12);
}
.lb-yard__slot { width: 76%; aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, .07); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .12); }

.lb-cell {
    position: absolute;
    border: 1px solid rgba(28, 16, 64, .16);
    background: rgba(255, 255, 255, .55);
    display: grid; place-items: center;
}
.lb-cell--safe { background: linear-gradient(140deg, #e9e2ff, #cfc2ff); }
.lb-cell--start.lb-cell--red, .lb-cell--home.lb-cell--red { background: linear-gradient(140deg, var(--red-1), var(--red-2)); }
.lb-cell--start.lb-cell--green, .lb-cell--home.lb-cell--green { background: linear-gradient(140deg, var(--green-1), var(--green-2)); }
.lb-cell--start.lb-cell--yellow, .lb-cell--home.lb-cell--yellow { background: linear-gradient(140deg, var(--yellow-1), var(--yellow-2)); }
.lb-cell--start.lb-cell--blue, .lb-cell--home.lb-cell--blue { background: linear-gradient(140deg, var(--blue-1), var(--blue-2)); }
.lb-star { font-size: clamp(7px, 1.5vw, 12px); color: rgba(28, 16, 64, .45); font-style: normal; line-height: 1; }
.lb-cell--start .lb-star { color: rgba(255, 255, 255, .85); }

.lb-centre { position: absolute; display: grid; place-items: center; }
.lb-tri { position: absolute; inset: 0; }
.lb-tri--red { background: linear-gradient(140deg, var(--red-1), var(--red-2)); clip-path: polygon(0 0, 50% 50%, 0 100%); }
.lb-tri--green { background: linear-gradient(140deg, var(--green-1), var(--green-2)); clip-path: polygon(0 0, 100% 0, 50% 50%); }
.lb-tri--yellow { background: linear-gradient(140deg, var(--yellow-1), var(--yellow-2)); clip-path: polygon(100% 0, 100% 100%, 50% 50%); }
.lb-tri--blue { background: linear-gradient(140deg, var(--blue-1), var(--blue-2)); clip-path: polygon(0 100%, 100% 100%, 50% 50%); }
.lb-centre__crown { position: relative; z-index: 3; font-size: clamp(13px, 3.4vw, 26px); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); }

.lb-tokens { position: absolute; inset: 0; z-index: 30; }
.lb-token {
    position: absolute; padding: 0; border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: left .12s linear, top .12s linear, width .18s, height .18s;
    display: grid; place-items: center; z-index: 30;
}
.lb-token__body {
    position: absolute; inset: 8%; border-radius: 50%;
    box-shadow: 0 3px 7px rgba(0, 0, 0, .45), inset 0 -3px 6px rgba(0, 0, 0, .28), inset 0 3px 6px rgba(255, 255, 255, .5);
    border: 2px solid rgba(255, 255, 255, .92);
}
.lb-token--red .lb-token__body { background: linear-gradient(150deg, var(--red-1), var(--red-2)); }
.lb-token--green .lb-token__body { background: linear-gradient(150deg, var(--green-1), var(--green-2)); }
.lb-token--yellow .lb-token__body { background: linear-gradient(150deg, var(--yellow-1), var(--yellow-2)); }
.lb-token--blue .lb-token__body { background: linear-gradient(150deg, var(--blue-1), var(--blue-2)); }
.lb-token__num { position: relative; z-index: 2; font-size: clamp(7px, 1.5vw, 11px); font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.lb-token.is-movable { animation: bob .75s ease-in-out infinite; z-index: 60 !important; }
.lb-token.is-movable .lb-token__body { box-shadow: 0 0 0 3px var(--gold), 0 6px 14px rgba(0, 0, 0, .5); }
@keyframes bob { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -62%) scale(1.08); } }
.lb-token.is-killed { animation: killed .6s ease both; }
@keyframes killed { 0% { transform: translate(-50%, -50%) scale(1) rotate(0); } 50% { transform: translate(-50%, -90%) scale(1.3) rotate(180deg); } 100% { transform: translate(-50%, -50%) scale(1) rotate(360deg); } }
.lb-token.is-home .lb-token__body { box-shadow: 0 0 0 2px var(--gold), 0 4px 10px rgba(0, 0, 0, .4); }

.lb-fx { position: absolute; width: 14%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 70; }
.lb-fx--kill { background: radial-gradient(circle, rgba(255, 80, 80, .9), transparent 70%); animation: burst .7s ease-out both; }
.lb-fx--home { background: radial-gradient(circle, rgba(255, 209, 102, .95), transparent 70%); animation: burst .7s ease-out both; }
@keyframes burst { from { transform: translate(-50%, -50%) scale(.3); opacity: 1; } to { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }

/* control bar --------------------------------------------------------------- */
.lb-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.lb-controls__side { display: flex; gap: 7px; align-items: center; }
.lb-controls__side--right { justify-content: flex-end; }

.lb-turnchip {
    display: inline-flex; flex-direction: column; align-items: flex-start;
    padding: 7px 12px; border-radius: 12px; min-width: 0;
    background: var(--glass); border: 1px solid var(--line);
}
.lb-turnchip strong { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22vw; }
.lb-turnchip small { font-size: .68rem; color: var(--muted); }
.lb-turnchip--red { box-shadow: inset 3px 0 0 var(--red-1); }
.lb-turnchip--green { box-shadow: inset 3px 0 0 var(--green-1); }
.lb-turnchip--yellow { box-shadow: inset 3px 0 0 var(--yellow-1); }
.lb-turnchip--blue { box-shadow: inset 3px 0 0 var(--blue-1); }

.lb-dice {
    width: clamp(58px, 15vw, 76px); aspect-ratio: 1; border-radius: 18px;
    background: linear-gradient(150deg, #ffffff, #e6dcff);
    padding: 14%;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 -5px 10px rgba(0, 0, 0, .16), inset 0 4px 8px rgba(255, 255, 255, .9);
    transition: transform .2s, box-shadow .2s;
    position: relative;
}
.lb-dice::after {
    content: ""; position: absolute; inset: -7px; border-radius: 24px; z-index: -1;
    background: var(--grad-cta); opacity: 0; transition: opacity .25s;
}
.lb-dice:not([disabled])::after { opacity: .85; animation: glow 1.5s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.lb-dice:not([disabled]):hover { transform: translateY(-3px) scale(1.04); }
.lb-dice[disabled] { filter: grayscale(.4) brightness(.85); cursor: default; }
.lb-dice.is-rolling { animation: shake .12s linear infinite; }
@keyframes shake { 0% { transform: rotate(-9deg) scale(1.05); } 50% { transform: rotate(9deg) scale(.97); } 100% { transform: rotate(-9deg) scale(1.05); } }
.lb-dice--red::after { background: linear-gradient(140deg, var(--red-1), var(--red-2)); }
.lb-dice--green::after { background: linear-gradient(140deg, var(--green-1), var(--green-2)); }
.lb-dice--yellow::after { background: linear-gradient(140deg, var(--yellow-1), var(--yellow-2)); }
.lb-dice--blue::after { background: linear-gradient(140deg, var(--blue-1), var(--blue-2)); }
.lb-diceface { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8%; }
.lb-diceface i { border-radius: 50%; background: transparent; }
.lb-diceface i.on { background: radial-gradient(circle at 35% 30%, #4b2a8a, #170a33); box-shadow: inset 0 -1px 2px rgba(255, 255, 255, .3); }

.lb-hint { font-size: .74rem; color: var(--muted); text-align: center; }
.lb-clock { font-family: var(--font-display); font-size: .84rem; color: var(--gold); min-width: 34px; text-align: right; }
.lb-underrow {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    min-width: 0;
}
.lb-underrow__ad { flex: 1; min-width: 0; max-width: 340px; }
.lb-history { display: flex; gap: 4px; overflow: hidden; }
.lb-hchip { width: 19px; height: 19px; border-radius: 6px; display: grid; place-items: center; font-size: .64rem; font-weight: 800; color: #fff; flex: none; }
.lb-hchip--red { background: linear-gradient(140deg, var(--red-1), var(--red-2)); }
.lb-hchip--green { background: linear-gradient(140deg, var(--green-1), var(--green-2)); }
.lb-hchip--yellow { background: linear-gradient(140deg, var(--yellow-1), var(--yellow-2)); }
.lb-hchip--blue { background: linear-gradient(140deg, var(--blue-1), var(--blue-2)); }

/* --------------------------------------------------------------------------
   7. Sheets, modals, toasts
   -------------------------------------------------------------------------- */
.lb-sheet {
    position: fixed; inset: 0; z-index: 120;
    display: grid; align-items: end; justify-items: center;
    background: rgba(6, 3, 16, .72); backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none; transition: opacity .25s;
}
.lb-sheet.is-open { opacity: 1; pointer-events: auto; }
.lb-sheet__panel {
    width: min(520px, 100%);
    max-height: 88dvh; overflow-y: auto;
    background: linear-gradient(165deg, var(--ink-700), var(--ink-900));
    border: 1px solid var(--line); border-bottom: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 20px var(--pad) calc(22px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .32s cubic-bezier(.22, 1, .36, 1);
    box-shadow: var(--shadow-2);
}
.lb-sheet.is-open .lb-sheet__panel { transform: none; }
.lb-sheet__panel::before {
    content: ""; display: block; width: 44px; height: 4px; border-radius: 4px;
    background: rgba(255, 255, 255, .25); margin: -6px auto 16px;
}
.lb-sheet__title { font-size: 1.16rem; margin-bottom: 4px; }
.lb-sheet__sub { font-size: .84rem; color: var(--muted); margin-bottom: 16px; }
.lb-sheet__row { display: flex; gap: 10px; margin-top: 14px; }
.lb-sheet__row .lb-btn { flex: 1; }
.lb-field { margin-bottom: 14px; }
.lb-field label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.lb-input, .lb-select, .lb-textarea {
    width: 100%; padding: 12px 14px; border-radius: 12px;
    background: rgba(0, 0, 0, .32); border: 1px solid var(--line); color: var(--text);
    font: inherit;
}
.lb-input:focus, .lb-select:focus, .lb-textarea:focus { border-color: var(--a1); outline: none; }
.lb-textarea { min-height: 120px; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .84rem; }

.lb-avatars { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-avatars button { width: 44px; height: 44px; border-radius: 14px; font-size: 20px; background: var(--glass); border: 1px solid var(--line); }
.lb-avatars button.is-on { background: var(--grad-cta); border-color: transparent; }

.lb-emotes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lb-emotes button { aspect-ratio: 1; border-radius: 14px; font-size: 22px; background: var(--glass); border: 1px solid var(--line); }
.lb-emotes button:active { transform: scale(.92); }

.lb-rrow {
    display: flex; align-items: center; gap: 10px; padding: 11px 13px;
    border-radius: 13px; margin-bottom: 7px;
    background: var(--glass); border: 1px solid var(--line);
}
.lb-rrow.is-winner { background: linear-gradient(120deg, rgba(255, 209, 102, .28), rgba(255, 159, 28, .12)); border-color: rgba(255, 209, 102, .5); }
.lb-rrow__pos { width: 30px; font-family: var(--font-display); font-size: 1rem; }
.lb-rrow__name { flex: 1; font-weight: 700; font-size: .9rem; }
.lb-rrow__kv { font-size: .74rem; color: var(--muted); }
.lb-rrow--red { box-shadow: inset 4px 0 0 var(--red-1); }
.lb-rrow--green { box-shadow: inset 4px 0 0 var(--green-1); }
.lb-rrow--yellow { box-shadow: inset 4px 0 0 var(--yellow-1); }
.lb-rrow--blue { box-shadow: inset 4px 0 0 var(--blue-1); }

.lb-reward { text-align: center; padding: 26px 0; }
.lb-reward__count {
    width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%;
    display: grid; place-items: center; font-family: var(--font-display); font-size: 2rem;
    background: var(--grad-cta); box-shadow: 0 0 40px rgba(124, 58, 237, .6);
}

.lb-toasts { position: fixed; left: 0; right: 0; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 200; display: grid; justify-items: center; gap: 7px; pointer-events: none; padding: 0 12px; }
.lb-toast {
    padding: 10px 18px; border-radius: var(--r-pill); font-size: .85rem; font-weight: 600;
    background: rgba(10, 6, 25, .94); border: 1px solid var(--line); box-shadow: var(--shadow-1);
    animation: toastIn .28s cubic-bezier(.22, 1, .36, 1) both; max-width: 92vw; text-align: center;
}
.lb-toast--good { border-color: rgba(78, 232, 154, .55); color: #b8ffdc; }
.lb-toast--warn { border-color: rgba(255, 209, 102, .55); color: #ffe9b8; }
.lb-toast.is-out { animation: toastOut .4s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } }

/* --------------------------------------------------------------------------
   8. Ads (own inventory, served from our database)
   -------------------------------------------------------------------------- */
.lb-ad {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--r-md); border: 1px dashed rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .05);
    margin: 12px 0;
}
.lb-ad__label {
    position: absolute; top: 6px; right: 8px; z-index: 3;
    font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, .55); background: rgba(0, 0, 0, .45);
    padding: 2px 7px; border-radius: 5px;
}
.lb-ad__inner { display: grid; place-items: center; min-height: 62px; padding: 10px; text-align: center; }
.lb-ad__inner img { border-radius: 10px; }
.lb-ad--banner { max-width: 100%; }
.lb-ad--ingame { margin: 0; border-radius: 12px; }
.lb-ad--empty { display: none; }

.lb-interstitial { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: rgba(4, 2, 12, .92); opacity: 0; pointer-events: none; transition: opacity .3s; padding: var(--pad); }
.lb-interstitial.is-open { opacity: 1; pointer-events: auto; }
.lb-interstitial__box { width: min(420px, 100%); background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); }
.lb-interstitial__close { display: block; width: 100%; padding: 13px; font-weight: 700; background: var(--glass-2); }

/* --------------------------------------------------------------------------
   9. Content pages (rules / privacy / etc.) + footer
   -------------------------------------------------------------------------- */
.lb-prose h2 { font-size: 1.3rem; margin: 26px 0 10px; }
.lb-prose h3 { font-size: 1.05rem; margin: 20px 0 8px; color: var(--gold); }
.lb-prose ul, .lb-prose ol { color: var(--muted); line-height: 1.75; padding-left: 20px; margin: 0 0 14px; }
.lb-prose li { margin-bottom: 6px; }
.lb-prose strong { color: var(--text); }
.lb-prose table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: .88rem; }
.lb-prose th, .lb-prose td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; }
.lb-prose th { color: var(--gold); font-family: var(--font-display); }

.lb-foot { margin-top: 30px; padding: 26px var(--pad) calc(30px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(0, 0, 0, .28); }
.lb-foot__grid { width: min(1120px, 100%); margin: 0 auto; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.lb-foot h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); margin-bottom: 10px; }
.lb-foot a { display: block; color: var(--muted); font-size: .87rem; padding: 4px 0; }
.lb-foot a:hover { color: #fff; }
.lb-foot__bottom { width: min(1120px, 100%); margin: 22px auto 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }

.lb-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lb-lead { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 460px; }
.lb-lead th, .lb-lead td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.lb-lead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.lb-lead tbody tr:hover { background: var(--glass); }
.lb-lead .rank1 { color: var(--gold); font-weight: 800; }

.lb-alert { padding: 12px 15px; border-radius: 12px; margin-bottom: 14px; font-size: .87rem; border: 1px solid; }
.lb-alert--ok { background: rgba(78, 232, 154, .12); border-color: rgba(78, 232, 154, .4); color: #b8ffdc; }
.lb-alert--bad { background: rgba(255, 92, 122, .12); border-color: rgba(255, 92, 122, .4); color: #ffc9d3; }

/* --------------------------------------------------------------------------
   10. Admin
   -------------------------------------------------------------------------- */
.lb-admin { display: grid; grid-template-columns: 230px 1fr; min-height: 100dvh; }
.lb-admin__side { background: rgba(0, 0, 0, .35); border-right: 1px solid var(--line); padding: 18px 14px; }
.lb-admin__side a { display: block; padding: 11px 14px; border-radius: 12px; color: var(--muted); font-weight: 600; font-size: .89rem; margin-bottom: 4px; }
.lb-admin__side a:hover { background: var(--glass); color: #fff; text-decoration: none; }
.lb-admin__side a.is-on { background: var(--grad-cta); color: #fff; }
.lb-admin__body { padding: var(--pad); }
.lb-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 18px; }
.lb-kpi { padding: 16px; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--line); }
.lb-kpi b { display: block; font-family: var(--font-display); font-size: 1.7rem; }
.lb-kpi span { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* --------------------------------------------------------------------------
   11. Responsive — phone, phablet, tablet, laptop, desktop, TV
   -------------------------------------------------------------------------- */

/* very small phones (<=360px) */
@media (max-width: 360px) {
    :root { --top-h: 50px; }
    .lb-seat__name { font-size: .7rem; }
    .lb-seat__ring { width: 28px; height: 28px; }
    .lb-quick { grid-template-columns: 1fr; }
}

/* phones in landscape — put the board beside the controls */
@media (orientation: landscape) and (max-height: 560px) {
    .lb-play {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr minmax(180px, 240px);
        gap: 12px;
        align-items: center;
    }
    .lb-boardwrap { grid-row: 1; grid-column: 1; }
    .lb-board { width: min(100%, calc(100dvh - var(--top-h) - 24px)); }
    .lb-seats { grid-row: 1; grid-column: 2; grid-template-columns: 1fr !important; align-content: start; }
    .lb-controls { grid-row: 1; grid-column: 2; align-self: end; grid-template-columns: 1fr; justify-items: center; gap: 6px; }
    .lb-controls__side { justify-content: center; }
}

/* tablets & up */
@media (min-width: 720px) {
    :root { --top-h: 64px; }
    .lb-play {
        grid-template-columns: 1fr minmax(260px, 330px);
        grid-template-rows: auto auto 1fr;
        gap: 16px;
        padding: 16px var(--pad);
        align-content: start;
    }
    /* the board owns column one for the full height; everything else stacks
       down the rail, so nothing can land on top of the board again */
    .lb-boardwrap { grid-row: 1 / span 3; grid-column: 1; align-self: start; }
    .lb-board { width: min(100%, calc(100dvh - var(--top-h) - 80px)); max-width: 560px; }
    .lb-underrow {
        grid-column: 2;
        grid-row: 3;
        align-self: start;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .lb-underrow__ad { max-width: none; }
    .lb-history { justify-content: center; }
    .lb-seats { grid-column: 2; grid-template-columns: 1fr !important; gap: 9px; }
    .lb-seat { padding: 10px 12px; }
    .lb-seat__ring { width: 42px; height: 42px; }
    .lb-seat__name { font-size: .92rem; }
    .lb-seat__stat { font-size: .76rem; }
    .lb-controls {
        grid-column: 2; align-self: start;
        grid-template-columns: 1fr; justify-items: center; gap: 12px;
        background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px;
    }
    .lb-controls__side { justify-content: center; }
    .lb-turnchip strong { max-width: none; }
    .lb-sheet { align-items: center; }
    .lb-sheet__panel { border-radius: var(--r-lg); border-bottom: 1px solid var(--line); transform: translateY(24px) scale(.97); }
    .lb-sheet.is-open .lb-sheet__panel { transform: none; }
    .lb-quick { grid-template-columns: repeat(4, 1fr); }
    .lb-statgrid { grid-template-columns: repeat(6, 1fr); }
}

/* laptops */
@media (min-width: 1024px) {
    .lb-hero { padding: 52px; }
    .lb-board { max-width: 600px; }
}

/* large desktop / TV */
@media (min-width: 1600px) {
    .lb-wrap { width: min(1320px, 100%); }
    .lb-board { max-width: 660px; }
}

/* admin collapses on small screens */
@media (max-width: 860px) {
    .lb-admin { grid-template-columns: 1fr; }
    .lb-admin__side { display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .lb-admin__side a { white-space: nowrap; margin-bottom: 0; }
}

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

/* print */
@media print {
    .lb-top, .lb-foot, .lb-ad, .lb-sheet { display: none !important; }
    body { background: #fff; color: #000; }
}

/* colour picker in the match setup sheet ----------------------------------- */
.lb-colours {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.lb-colour {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 14px;
    border: 2px solid var(--line);
    background: var(--glass);
    color: var(--muted);
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .16s, border-color .16s, background .16s, opacity .16s;
}
.lb-colour i {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25);
}
.lb-colour[data-val="red"] i    { background: linear-gradient(150deg, var(--red-1), var(--red-2)); }
.lb-colour[data-val="green"] i  { background: linear-gradient(150deg, var(--green-1), var(--green-2)); }
.lb-colour[data-val="yellow"] i { background: linear-gradient(150deg, var(--yellow-1), var(--yellow-2)); }
.lb-colour[data-val="blue"] i   { background: linear-gradient(150deg, var(--blue-1), var(--blue-2)); }

.lb-colour:hover:not(:disabled) { transform: translateY(-2px); }
.lb-colour.is-on {
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
    color: var(--text);
}
.lb-colour.is-off, .lb-colour:disabled {
    opacity: .3;
    cursor: not-allowed;
    transform: none;
}
.lb-field__note {
    display: block;
    margin-top: 8px;
    font-size: .76rem;
    color: var(--muted);
}