/* BroPro tabletop collection and mode-button finishes. */
body.lx { font-family: 'Outfit', 'Noto Sans Devanagari', system-ui, sans-serif; --lx-frame: 1.5%; --lx-bg: #0b141d; --lx-bg2: #14232d; --lx-gold: #dcc395; --lx-muted: #a9b8c3; }
body.lx::before { background: radial-gradient(ellipse at 70% 0%, #203c4255, transparent 60%), linear-gradient(140deg, #14232d, #0b141d 75%); }
body.lx::after { display: none; }
body.ludo-playing #bhaiFloatingWidget,
body.lx:has(#scrHome:not(.lx-hidden)) #bhaiFloatingWidget { visibility: hidden; pointer-events: none; }
.lx-top { background: #0b141de8; padding-inline: max(20px, calc((100vw - 1120px)/2)); min-height: 72px; }
.lx-title small { letter-spacing: .08em; color: var(--lx-muted); }
.lx-top-right { position: relative; }
.lx-iconbtn { min-width: 44px; min-height: 44px; background: #ffffff05; border-color: #ffffff12; }
.lx-iconbtn:focus-visible, .lx button:focus-visible, .lx a:focus-visible, .lx summary:focus-visible, .lx input:focus-visible { outline: 3px solid #e7cd9a; outline-offset: 4px; }
.lx-eyebrow { font-size: .65rem; letter-spacing: .16em; font-weight: 600; color: var(--lx-gold); display: block; line-height: 1.6; }
#scrHome { max-width: 1120px; padding-top: 28px; }
.lx-home-feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; }
.lx-home-copy { padding-left: 18px; }
.lx-home-copy h1 { font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: 1.06; letter-spacing: -.05em; max-width: 470px; margin: 18px 0; font-weight: 600; }
.lx-home-copy p { max-width: 350px; color: var(--lx-muted); font-size: 1.05rem; line-height: 1.65; }
.lx-home-art { width: 100%; height: auto; display: block; }
.lx-home-tag { display: inline-block; color: #d3dedf; font-size: .78rem; border-top: 1px solid var(--lx-line); padding-top: 16px; margin-top: 12px; }
.lx-section-label { display: flex; justify-content: space-between; gap: 12px; font-size: .65rem; font-weight: 600; letter-spacing: .15em; color: var(--lx-muted); padding-block: 18px; border-top: 1px solid var(--lx-line); margin-top: 12px; }
#scrHome .lx-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lx-mode {
    --mode-light: #138d9d; --mode-dark: #064d64; --mode-edge: #49d9e2; --mode-ink: #d4f9ff;
    --mode-y: 0px; --mode-rx: 0deg; --mode-ry: 0deg; --mode-scale: 1;
    min-height: 138px; border-radius: 22px; padding: 24px 20px; gap: 16px;
    border: 1px solid color-mix(in srgb, var(--mode-edge) 58%, transparent);
    background: radial-gradient(ellipse at 0% 0%, #ffffff19, transparent 65%), linear-gradient(125deg, var(--mode-light), var(--mode-dark));
    box-shadow: inset 0 1px 0 #ffffff40, inset 0 -3px 0 #00000028, 0 6px 0 color-mix(in srgb, var(--mode-dark) 72%, #06111a), 0 14px 24px #0005;
    transform: perspective(800px) translateY(var(--mode-y)) rotateX(var(--mode-rx)) rotateY(var(--mode-ry)) scale(var(--mode-scale));
    transition: border-color .2s ease, box-shadow .2s ease;
    isolation: isolate; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.lx-mode.bot { --mode-light: #7950ce; --mode-dark: #3e2675; --mode-edge: #c4a1ff; --mode-ink: #f0e3ff; }
.lx-mode.local { --mode-light: #b34b22; --mode-dark: #702717; --mode-edge: #ffbd78; --mode-ink: #ffedcf; }
.lx-mode:hover, .lx-mode:active {
    background: radial-gradient(ellipse at 0% 0%, #ffffff19, transparent 65%), linear-gradient(125deg, var(--mode-light), var(--mode-dark));
    transform: perspective(800px) translateY(var(--mode-y)) rotateX(var(--mode-rx)) rotateY(var(--mode-ry)) scale(var(--mode-scale));
    border-color: var(--mode-edge);
    box-shadow: inset 0 1px 0 #ffffff60, inset 0 -3px 0 #00000028, 0 6px 0 color-mix(in srgb, var(--mode-dark) 72%, #06111a), 0 18px 32px #0006;
}
.lx-mode::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(115deg, transparent 20%, #ffffff16 45%, transparent 65%);
    transform: translateX(-120%); transition: transform .65s ease;
}
.lx-mode.online::after { display: none; }
.lx-mode .ic {
    width: 56px; height: 60px; border-radius: 17px; color: var(--mode-ink);
    background: linear-gradient(145deg, #ffffff26, #ffffff09) !important;
    border: 1px solid #ffffff30; box-shadow: inset 0 1px 0 #ffffff30, 0 5px 10px #0002;
    transform: rotate(-5deg); transition: transform .4s cubic-bezier(.2, 1.5, .4, 1);
}
.lx-mode .ic svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lx-mode .tx { position: relative; min-width: 0; }
.lx-mode .tx b { color: #fff; font-size: 1.02rem; font-weight: 700; margin-bottom: 6px; line-height: 1.3; }
.lx-mode .tx span { display: block; color: var(--mode-ink); font-size: .78rem; line-height: 1.5; }
.lx-mode .go { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 1px solid #ffffff35; border-radius: 50%; color: #fff; font-size: 1.2rem; background: #00000014; transition: transform .35s cubic-bezier(.2, 1.5, .4, 1); }
.lx-mode:focus-visible { outline-color: var(--mode-edge); }
.lx-mode:focus-visible .ic { transform: rotate(0deg) translateY(-2px); }
@media (hover: hover) and (pointer: fine) {
    .lx-mode:hover::before { transform: translateX(120%); }
    .lx-mode:hover .ic { transform: rotate(3deg) translateY(-3px); }
    .lx-mode:hover .go { transform: translateX(3px); }
    .lx-mode:not([data-spring]):hover { --mode-y: -5px; }
}
.lx-mode:not([data-spring]):active { --mode-y: 3px; --mode-scale: .985; }
.lx-card { background: #15232e; box-shadow: none; border-radius: 18px; }
.lx-chip[aria-pressed="true"] { background: #dfc79e; border-color: #dfc79e; box-shadow: none; color: #202c32; }
.lx-btn { background: #ddc297; color: #1a2b31; box-shadow: none; border: 1px solid #ebd4ac; border-radius: 12px; min-height: 48px; }
.lx-btn:active { box-shadow: none; transform: translateY(1px); }
.lx-btn.wa { background: #286b56; box-shadow: none; border-color: #41876f; }
.lx-sound-settings { position: absolute; right: 0; top: calc(100% + 12px); z-index: 50; width: 240px; padding: 18px; border-radius: 16px; background: #192a36; border: 1px solid #ffffff20; box-shadow: 0 16px 50px #0008; }
.lx-sound-settings[hidden] { display: none; }
.lx-sound-settings label { display: block; font-size: .85rem; margin-bottom: 12px; }
.lx-sound-settings input { width: 100%; accent-color: #dfc79e; min-height: 30px; }
.lx-sound-settings .lx-btn { margin-top: 10px; font-size: .82rem; padding: 10px; }
.lx-sound-settings { width: 260px; }
.lx-sound-label { margin: 14px 0 8px; font-size: .85rem; }
.lx-dice-sounds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lx-dice-sound { min-height: 38px; padding: 8px 6px; border-radius: 10px; border: 1px solid #ffffff22; background: #ffffff0d; color: inherit; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.lx-dice-sound:last-child { grid-column: 1 / -1; }
.lx-dice-sound:hover { border-color: #ffffff44; }
.lx-dice-sound[aria-checked="true"] { background: #dfc79e; border-color: #dfc79e; color: #1b1406; }
.lx-dice-sound[aria-checked="true"]::before { content: '✓ '; }
.lx-sound-credit { margin: 10px 0 0; font-size: .7rem; opacity: .6; text-align: center; }

/* Compact dice sit in the current player card, above or below the board. */
.lx-game { display: block; max-width: 660px; padding: 20px 20px calc(24px + var(--lx-safe-bottom)); }
.lx-play-surface { min-width: 0; }
.lx-play-feedback { margin: 14px auto 0; max-width: 600px; }
.lx-hud { gap: 12px; }
.lx-hud.top { margin-bottom: 14px; }
.lx-hud.bottom { margin-top: 14px; }
.lx-player { min-width: 0; min-height: 74px; background: #14232e; border-radius: 14px; box-shadow: none; gap: 10px; }
.lx-player.active { z-index: 3; border-color: color-mix(in srgb, var(--c) 65%, #fff 10%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent); transform: none; background: #1b2c37; }
.lx-av { width: 34px; height: 34px; font-size: .8rem; box-shadow: none; }
.lx-av svg.ring { width: 46px; height: 46px; }
.lx-pinfo b { font-size: .83rem; font-weight: 600; }
.lx-pinfo span { font-size: .69rem; }
.lx-board { border-radius: 19px; background: linear-gradient(145deg, #cbb88d, #746752 55%, #b9a67d); box-shadow: 0 20px 50px #0005, inset 0 1px 0 #fff5; }
.lx-board svg { border-radius: 12px; box-shadow: 0 0 0 1px #7b765b80; }
.lx-dice-slot { width: 50px; height: 50px; position: relative; z-index: 2; }
.lx-dice-slot:empty { display: none; }
.lx-dice { --s: 44px; --h: 22px; width: var(--s); height: var(--s); outline-offset: 8px; }
.lx-roll-result { display: block; text-align: center; color: var(--lx-muted); font-size: .78rem; line-height: 1.5; min-height: 1.5em; margin-top: 6px; overflow-wrap: anywhere; }
.lx-status { color: #e4d1ab; padding: 4px 10px; background: none; border: 0; font-size: .9rem; line-height: 1.5; margin: 0; }
.lx-reacts { flex-wrap: wrap; justify-content: center; overflow: visible; mask-image: none; -webkit-mask-image: none; }
.lx-react { min-height: 40px; font-size: .75rem; padding: 6px 10px; }
.lx-token.movable::before { border-width: 2px; box-shadow: 0 0 0 2px var(--c), 0 0 9px #fff8; }
@media (max-width: 800px) {
    .lx-top { padding-inline: 14px; min-height: 64px; }
    #scrHome .lx-modes { grid-template-columns: 1fr; }
    .lx-home-copy { padding-left: 0; }
    .lx-home-copy h1 { font-size: 3rem; }
    .lx-home-feature { grid-template-columns: 1fr 1fr; }
    .lx-mode { min-height: 116px; padding: 20px; }
    .lx-game { padding: 14px 12px calc(20px + var(--lx-safe-bottom)); }
    .lx-play-surface { width: 100%; }
    .lx-hud.top { margin-bottom: 10px; }
    .lx-hud.bottom { margin-top: 10px; }
    .lx-player { min-height: 68px; padding: 8px; gap: 6px; border-radius: 12px; }
    .lx-av { width: 28px; height: 28px; font-size: .72rem; }
    .lx-av svg.ring { width: 40px; height: 40px; }
    .lx-pinfo b { font-size: .76rem; }
    .lx-pinfo span { font-size: .64rem; }
    .lx-status { font-size: .8rem; }
    .lx-roll-result { font-size: .72rem; }
}
@media (max-width: 480px) {
    .lx-title small { display: none; }
    #scrHome { padding-top: 16px; }
    .lx-home-feature { display: flex; flex-direction: column; text-align: center; }
    .lx-home-copy .lx-eyebrow { font-size: .56rem; }
    .lx-home-copy h1 { font-size: 2.8rem; max-width: 330px; margin: 12px auto; }
    .lx-home-copy p { font-size: .9rem; margin: 0 auto; max-width: 310px; }
    .lx-home-tag { padding-top: 10px; margin-top: 12px; }
    .lx-home-art { max-width: 290px; margin: -10px auto -28px; }
    .lx-section-label { font-size: .57rem; }
}
@media (prefers-reduced-motion: reduce) {
    .lx-dice-wrap.ready::before { animation: none; }
    .lx-mode, .lx-mode:hover, .lx-mode:active { transform: none; transition: none; }
    .lx-mode::before { display: none; }
    .lx-mode .ic, .lx-mode:hover .ic, .lx-mode:focus-visible .ic, .lx-mode .go, .lx-mode:hover .go { transform: none; transition: none; }
}