/* SHO version 13 - Ludo */

/* ---------- setup pages ---------- */
.ludo-seg-2 { grid-template-columns: repeat(2, 1fr); }
.ludo-seg-2 .seg-t.small { font-size: .72rem; margin-top: .15rem; text-align: center; }
.ludo-color-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.ludo-color-pick label { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .7rem .4rem; border: 2px solid #e6dccb;
    border-radius: .9rem; background: #fff; cursor: pointer; font-weight: 600; font-size: .9rem; transition: all .15s ease; }
.ludo-swatch { width: 34px; height: 34px; border-radius: 50%; background: var(--lc); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .15); }
.ludo-color-pick .btn-check:checked + label { border-color: var(--lc); background: #fff8ec; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.ludo-color-pick .btn-check:focus-visible + label { outline: 3px solid var(--sho-gold, #d4a017); outline-offset: 2px; }
.ludo-empty-art { width: 180px; max-width: 60%; border-radius: 1rem; }
.ludo-radar-core { font-size: 2.6rem; }
.ludo-rules h2 { margin-top: 1.1rem; }

/* ---------- the board page ---------- */
.ludo-body main { padding-top: .5rem !important; }
.ludo-stage { max-width: min(560px, max(330px, calc(100dvh - 250px))); margin: 0 auto; }
.ludo-row { display: flex; justify-content: space-between; gap: .5rem; min-height: 58px; }
.ludo-row-top { align-items: flex-end; margin-bottom: .4rem; }
.ludo-row-bottom { align-items: flex-start; margin-top: .4rem; }
.ludo-slot { flex: 1 1 0; min-width: 0; display: flex; }
.ludo-slot[data-slot="2"], .ludo-slot[data-slot="3"] { justify-content: flex-end; }
.ludo-board-wrap { position: relative; }
.ludo-board { display: block; width: 100%; height: auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.lb-frame { fill: #5a1414; }
.lb-bg { fill: #fdfbf6; }
.lb-cell { stroke: #c9c0ae; stroke-width: .04; }
.lb-yard { stroke: rgba(0, 0, 0, .15); stroke-width: .05; }
.lb-yard-in { stroke: rgba(0, 0, 0, .08); stroke-width: .04; }
.lb-tri { stroke: rgba(255, 255, 255, .6); stroke-width: .04; }
.lb-home-text { font-size: .55px; font-weight: 700; fill: #7a1f1f; font-family: serif; }
.lhint { opacity: .35; pointer-events: none; animation: lhint 1s ease-in-out infinite; }
@keyframes lhint { 50% { opacity: .12; } }

.ltok { transition: transform .12s ease-out; cursor: default; transform-box: view-box; }
.ltok-halo { fill: transparent; }
.ltok.can { cursor: pointer; }
.ltok.can .ltok-halo { fill: rgba(255, 255, 255, .35); stroke: #fff; stroke-width: .07; stroke-dasharray: .3 .16; animation: ltokspin 3s linear infinite, ltokpulse 1s ease-in-out infinite; }
@keyframes ltokspin { to { stroke-dashoffset: -2.3; } }
@keyframes ltokpulse { 50% { fill: rgba(255, 213, 74, .55); } }

/* players */
.ludo-chip { --lc: #999; display: flex; align-items: center; gap: .45rem; padding: .3rem .45rem .3rem .3rem; border-radius: 1rem;
    background: #fff; border: 2px solid transparent; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); max-width: 100%; min-width: 0; transition: all .2s ease; }
.ludo-slot[data-slot="2"] .ludo-chip, .ludo-slot[data-slot="3"] .ludo-chip { flex-direction: row-reverse; padding: .3rem .3rem .3rem .45rem; text-align: right; }
.ludo-chip.active { border-color: var(--lc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lc) 25%, transparent), 0 6px 16px rgba(0, 0, 0, .12); }
.ludo-chip.left { opacity: .6; }
.ludo-chip.winner { border-color: #d4a017; background: #fff8e1; }
.ludo-ava { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--lc); color: #fff; display: grid; place-items: center;
    font-weight: 800; font-size: 1.05rem; }
.ludo-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--lc); }
.ludo-ring { position: absolute; inset: -4px; width: 48px; height: 48px; transform: rotate(-90deg); pointer-events: none; }
.ludo-ring circle { fill: none; stroke: transparent; stroke-width: 3; stroke-dasharray: 113.1; stroke-dashoffset: 0; transition: stroke-dashoffset .25s linear; }
.ludo-chip.timed .ludo-ring circle { stroke: #2e9d4a; }
.ludo-chip.timed.late .ludo-ring circle { stroke: #dc3545; }
.ludo-who { min-width: 0; line-height: 1.15; }
.ludo-name { font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.ludo-you { font-size: .62rem; background: var(--lc); color: #fff; border-radius: .4rem; padding: 0 .3rem; vertical-align: middle; }
.ludo-meta { font-size: .72rem; color: #7a6a55; display: flex; gap: .4rem; white-space: nowrap; }
.ludo-slot[data-slot="2"] .ludo-meta, .ludo-slot[data-slot="3"] .ludo-meta { justify-content: flex-end; }
.ludo-meta [data-tag] { text-transform: capitalize; }

/* the die */
.ludo-die { flex: 0 0 auto; width: 44px; height: 44px; border-radius: .7rem; border: 0; padding: 5px; background: #fff;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), 0 0 0 2px color-mix(in srgb, var(--lc) 40%, #ddd); opacity: .35; transition: transform .15s ease, opacity .2s; }
.ludo-chip.active .ludo-die { opacity: 1; }
.ludo-die:disabled { cursor: default; }
.ludo-die.ready { cursor: pointer; opacity: 1; animation: ludoDie 1.1s ease-in-out infinite; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), 0 0 0 3px var(--lc), 0 0 16px color-mix(in srgb, var(--lc) 70%, transparent); }
.ludo-die.ready:hover { transform: scale(1.08); }
.ludo-die.rolling { animation: ludoRoll .35s linear infinite; opacity: 1; }
@keyframes ludoDie { 50% { transform: translateY(-3px) rotate(-6deg); } }
@keyframes ludoRoll { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(.88); } 100% { transform: rotate(360deg) scale(1); } }
.ludo-pips { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; gap: 1px; }
.ludo-pips i { border-radius: 50%; margin: 1.5px; }
.ludo-pips i.on { background: #2b2118; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25); }

.ludo-status { margin-top: .6rem; text-align: center; font-size: .95rem; padding: .45rem .75rem; border-radius: .75rem; background: rgba(255, 255, 255, .7); }
.ludo-status.you { background: #fff8e1; }

.ludo-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.8); background: rgba(33, 22, 12, .86); color: #fff;
    padding: .5rem 1rem; border-radius: 2rem; font-weight: 700; pointer-events: none; opacity: 0; transition: all .2s ease; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.ludo-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ludo-banner.hit { background: rgba(176, 30, 30, .92); }
.ludo-banner.home, .ludo-banner.six { background: rgba(31, 120, 60, .92); }

/* result */
.ludo-result { position: fixed; inset: 0; z-index: 1080; background: rgba(20, 12, 6, .55); display: grid; place-items: center; padding: 1rem; }
.ludo-result[hidden] { display: none; }
.ludo-result-card { background: #fff; border-radius: 1.25rem; padding: 1.5rem; width: 100%; max-width: 360px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); animation: ludoPop .3s ease; }
.ludo-result-icon { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto .75rem; display: grid; place-items: center; font-size: 2.3rem; color: #fff; background: #8a8a8a; }
.ludo-result-icon.won { background: radial-gradient(circle at 30% 30%, #ffe27a, #d4a017); }
.ludo-result-coins { font-weight: 700; font-size: 1.1rem; }
@keyframes ludoPop { from { transform: scale(.85); opacity: 0; } }
.ludo-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 1090; overflow: hidden; }
.ludo-confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: ludoFall linear forwards; }
@keyframes ludoFall { to { transform: translateY(105vh) rotate(720deg); } }

@media (max-width: 400px) {
    .ludo-name { max-width: 78px; font-size: .8rem; }
    .ludo-ava { width: 34px; height: 34px; }
    .ludo-ring { width: 42px; height: 42px; }
    .ludo-die { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .ltok, .ludo-die.ready, .lhint, .ltok.can .ltok-halo { animation: none; transition: none; }
}
/* the game menu opens above the board */
.ludo-page .play-head { position: relative; z-index: 30; }