/* BroPro Ludo — dice materials, board frames and the Customise studio */

/* ---------- Dice materials (same 3D cube, different surface) ---------- */
.lx-dice-wrap[data-skin="marble"] .lx-die .f {
    background:
        linear-gradient(118deg, transparent 38%, rgba(120, 120, 130, .16) 40%, transparent 42%),
        linear-gradient(64deg, transparent 66%, rgba(140, 140, 150, .12) 67.5%, transparent 69%),
        linear-gradient(150deg, transparent 14%, rgba(160, 160, 170, .12) 15.5%, transparent 17%),
        radial-gradient(circle at 30% 24%, #ffffff, #eef0f2 55%, #d3d6db);
    box-shadow: inset 0 0 0 1px rgba(80, 80, 90, .15), inset 0 -3px 6px rgba(60, 60, 70, .22), inset 0 2px 3px #fff;
}
.lx-dice-wrap[data-skin="marble"] .lx-die .core { background: #dcdfe3; }
.lx-dice-wrap[data-skin="marble"] .lx-die .f i.on { background: radial-gradient(circle at 42% 38%, #5b6170, #1d212b 65%); }

.lx-dice-wrap[data-skin="wood"] .lx-die .f {
    background:
        repeating-linear-gradient(92deg, rgba(70, 35, 10, .0) 0 3px, rgba(70, 35, 10, .16) 3px 4px, rgba(70, 35, 10, 0) 4px 7px),
        repeating-linear-gradient(88deg, rgba(255, 220, 170, .0) 0 9px, rgba(255, 220, 170, .14) 9px 11px),
        radial-gradient(circle at 30% 24%, #d9a066, #b3743c 55%, #7d4a1f);
    box-shadow: inset 0 0 0 1px rgba(60, 30, 5, .35), inset 0 -3px 6px rgba(50, 25, 5, .45), inset 0 2px 3px rgba(255, 220, 170, .5);
}
.lx-dice-wrap[data-skin="wood"] .lx-die .core { background: #8a5428; }
.lx-dice-wrap[data-skin="wood"] .lx-die .f i.on { background: radial-gradient(circle at 42% 38%, #4a2a12, #1d0e04 70%); box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, .8), 0 .5px 0 rgba(255, 220, 170, .5); }

.lx-dice-wrap[data-skin="onyx"] .lx-die .f {
    background: radial-gradient(circle at 28% 22%, #4a4d57 0%, #1b1d23 50%, #07080b 100%);
    box-shadow: inset 0 0 0 1px rgba(231, 194, 106, .35), inset 0 -3px 6px rgba(0, 0, 0, .6), inset 0 2px 3px rgba(255, 255, 255, .18);
}
.lx-dice-wrap[data-skin="onyx"] .lx-die .core { background: #0d0e12; }
.lx-dice-wrap[data-skin="onyx"] .lx-die .f i.on { background: radial-gradient(circle at 40% 35%, #fff3c4, #e2b347 55%, #8a5e0c); box-shadow: 0 0 3px rgba(231, 194, 106, .6); }

.lx-dice-wrap[data-skin="gold"] .lx-die .f {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, transparent 30%),
        radial-gradient(circle at 30% 24%, #fff1b8 0%, #e8bc52 45%, #a8771a 100%);
    box-shadow: inset 0 0 0 1px rgba(120, 80, 10, .5), inset 0 -3px 6px rgba(90, 60, 5, .45), inset 0 2px 3px rgba(255, 250, 220, .9);
}
.lx-dice-wrap[data-skin="gold"] .lx-die .core { background: #b88a2a; }
.lx-dice-wrap[data-skin="gold"] .lx-die .f i.on { background: radial-gradient(circle at 42% 38%, #3b2a08, #120c02 65%); box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, .7), 0 .5px 0 rgba(255, 245, 200, .8); }

.lx-dice-wrap[data-skin="team"] .lx-die .f {
    background: radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--tc, #e03131) 45%, white), var(--tc, #e03131) 55%, color-mix(in srgb, var(--tc, #e03131) 60%, black));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), inset 0 -3px 6px rgba(0, 0, 0, .3), inset 0 2px 3px rgba(255, 255, 255, .5);
}
.lx-dice-wrap[data-skin="team"] .lx-die .core { background: color-mix(in srgb, var(--tc, #e03131) 70%, black); }
.lx-dice-wrap[data-skin="team"] .lx-die .f i.on { background: radial-gradient(circle at 40% 35%, #ffffff, #e9e9e9 60%, #bdbdbd); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .15); }
/* Traditional red one-and-four only belongs to ivory. */
.lx-dice-wrap[data-skin]:not([data-skin="ivory"]) .lx-die .f1 i.on,
.lx-dice-wrap[data-skin]:not([data-skin="ivory"]) .lx-die .f4 i.on { background: inherit; }
.lx-dice-wrap[data-skin="marble"] .lx-die .f1 i.on, .lx-dice-wrap[data-skin="marble"] .lx-die .f4 i.on { background: radial-gradient(circle at 42% 38%, #5b6170, #1d212b 65%); }
.lx-dice-wrap[data-skin="wood"] .lx-die .f1 i.on, .lx-dice-wrap[data-skin="wood"] .lx-die .f4 i.on { background: radial-gradient(circle at 42% 38%, #4a2a12, #1d0e04 70%); }
.lx-dice-wrap[data-skin="onyx"] .lx-die .f1 i.on, .lx-dice-wrap[data-skin="onyx"] .lx-die .f4 i.on { background: radial-gradient(circle at 40% 35%, #fff3c4, #e2b347 55%, #8a5e0c); }
.lx-dice-wrap[data-skin="gold"] .lx-die .f1 i.on, .lx-dice-wrap[data-skin="gold"] .lx-die .f4 i.on { background: radial-gradient(circle at 42% 38%, #3b2a08, #120c02 65%); }
.lx-dice-wrap[data-skin="team"] .lx-die .f1 i.on, .lx-dice-wrap[data-skin="team"] .lx-die .f4 i.on { background: radial-gradient(circle at 40% 35%, #ffffff, #e9e9e9 60%, #bdbdbd); }

/* ---------- Board frames ---------- */
.lx-board[data-theme="wood"] {
    background:
        repeating-linear-gradient(90deg, rgba(40, 20, 5, 0) 0 6px, rgba(40, 20, 5, .14) 6px 7px),
        linear-gradient(145deg, #a8693a 0%, #6e3e1a 45%, #94582c 70%, #4f2a10 100%);
}
.lx-board[data-theme="night"] {
    background:
        radial-gradient(circle at 3.2% 3.2%, #e6ecff 0 .55%, #445174 .75%, transparent .95%),
        radial-gradient(circle at 96.8% 3.2%, #e6ecff 0 .55%, #445174 .75%, transparent .95%),
        radial-gradient(circle at 3.2% 96.8%, #e6ecff 0 .55%, #445174 .75%, transparent .95%),
        radial-gradient(circle at 96.8% 96.8%, #e6ecff 0 .55%, #445174 .75%, transparent .95%),
        linear-gradient(145deg, #cfd8f0 0%, #6a7898 25%, #2c3550 50%, #8a97b8 72%, #1f2638 100%);
}

/* Gem goti sparkle */
.lx-token .gem-spark { animation: lx-spark 2.6s ease-in-out infinite; transform-origin: 28px 29px; }
@keyframes lx-spark { 0%, 70%, 100% { opacity: 0; transform: scale(.4); } 80% { opacity: 1; transform: scale(1.1); } }

/* ---------- Customise studio ---------- */
.lx-studio-btn { font-size: 18px; }
.lx-studio {
    position: fixed; inset: 0; z-index: 80; display: grid; place-items: end center;
    background: rgba(3, 6, 14, .66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    animation: lx-st-fade .2s ease;
}
@keyframes lx-st-fade { from { opacity: 0; } }
@media (min-width: 640px) { .lx-studio { place-items: center; } }
.lx-studio-card {
    width: min(560px, 100%); max-height: min(92dvh, 820px); display: flex; flex-direction: column; overflow: hidden;
    background: linear-gradient(180deg, #1a2234, #0e1320); color: #f5f3ee;
    border: 1px solid rgba(231, 194, 106, .3); border-radius: 26px 26px 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
    animation: lx-st-up .32s cubic-bezier(.2, .9, .3, 1.05);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 640px) { .lx-studio-card { border-radius: 26px; } }
@keyframes lx-st-up { from { transform: translateY(40px); opacity: 0; } }
.lx-studio-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 6px; }
.lx-studio-head h2 { margin: 0; font-size: 1.25rem; letter-spacing: .2px; }
.lx-studio-head small { display: block; color: #a3a9bf; font-weight: 500; font-size: .78rem; margin-top: 2px; }
.lx-studio-close { margin-left: auto; width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: inherit; font-size: 18px; cursor: pointer; }

.lx-studio-stage {
    position: relative; margin: 8px 16px 4px; border-radius: 20px; height: 150px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 22px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -20px 40px rgba(0, 0, 0, .25);
}
.lx-studio-stage svg.felt { position: absolute; inset: 0; width: 100%; height: 100%; }
.lx-studio-pieces { position: relative; display: flex; gap: 4px; align-items: flex-end; }
.lx-studio-pieces .pc { width: 40px; height: 56px; }
.lx-studio-pieces .pc svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.lx-studio-pieces .pc:nth-child(odd) { transform: translateY(-6px); }
.lx-studio-dice { position: relative; transform: scale(1.35); }
.lx-studio-hint { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: .7rem; font-weight: 600; color: rgba(60, 40, 15, .6); pointer-events: none; }
.lx-studio-stage[data-theme="night"] .lx-studio-hint { color: rgba(255, 255, 255, .6); }

.lx-studio-tabs { display: flex; gap: 6px; padding: 10px 16px 6px; }
.lx-studio-tab {
    flex: 1; padding: 10px 6px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04);
    color: inherit; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; transition: all .15s ease;
}
.lx-studio-tab[aria-selected="true"] { background: linear-gradient(180deg, #f3d98b, #d4a640); color: #2a1a00; border-color: #f3d98b; }
.lx-studio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 8px 16px 14px; overflow-y: auto; }
@media (max-width: 380px) { .lx-studio-grid { grid-template-columns: repeat(2, 1fr); } }
.lx-opt {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px 10px; border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    color: inherit; font: inherit; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lx-opt:hover { border-color: rgba(255, 255, 255, .25); transform: translateY(-1px); }
.lx-opt:focus-visible { outline: 2px solid #f3d98b; outline-offset: 2px; }
.lx-opt[aria-checked="true"] { border-color: #e7c26a; box-shadow: 0 0 0 1px #e7c26a, 0 8px 22px rgba(231, 194, 106, .18); }
.lx-opt[aria-checked="true"]::after {
    content: '✓'; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
    background: #e7c26a; color: #2a1a00; font-size: .7rem; font-weight: 800; display: grid; place-items: center;
}
.lx-opt b { font-size: .84rem; }
.lx-opt .sw { width: 60px; height: 60px; display: grid; place-items: center; }
.lx-opt .sw svg { width: 44px; height: 62px; overflow: visible; }
.lx-opt .sw .lx-dice-wrap { pointer-events: none; }
.lx-opt .sw .lx-dice { --s: 36px; --h: 18px; }
.lx-opt .sw .board-sw { width: 58px; height: 58px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); }
.lx-opt .sw .board-sw svg { width: 100%; height: 100%; }
.lx-opt.locked { cursor: not-allowed; }
.lx-opt.locked .sw { filter: grayscale(.85) brightness(.6); }
.lx-opt .lock {
    position: absolute; top: 40px; left: 50%; transform: translateX(-50%); font-size: 1.1rem;
    background: rgba(10, 12, 20, .85); border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center;
}
.lx-opt .need { font-size: .68rem; color: #e7c26a; font-weight: 700; }
.lx-opt .bar { width: 70%; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.lx-opt .bar i { display: block; height: 100%; background: linear-gradient(90deg, #e7c26a, #f3d98b); }
.lx-studio-foot { padding: 10px 16px 16px; display: flex; align-items: center; gap: 10px; color: #a3a9bf; font-size: .78rem; border-top: 1px solid rgba(255, 255, 255, .06); }
.lx-studio-foot .wins { margin-left: auto; color: #f3d98b; font-weight: 700; }

.lx-unlock-toast {
    position: fixed; left: 50%; top: calc(80px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 90;
    background: linear-gradient(180deg, #2a2210, #15110a); border: 1px solid #e7c26a; color: #fff3c4; padding: 12px 18px; border-radius: 14px;
    font-weight: 800; box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(231, 194, 106, .25); animation: lx-st-up .35s ease; text-align: center;
}
@media (prefers-reduced-motion: reduce) {
    .lx-studio, .lx-studio-card, .lx-unlock-toast { animation: none; }
    .lx-token .gem-spark { animation: none; opacity: .8; }
}