/* =====================================================================
   SHO - styles on top of Bootstrap 5 (mobile first)
   ===================================================================== */
@font-face { font-family: 'Noto Serif Tibetan'; font-weight: 600; font-display: swap; src: url('../fonts/noto-serif-tibetan-tibetan-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Noto Serif'; font-weight: 600; font-display: swap; src: url('../fonts/noto-serif-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Noto Serif'; font-weight: 700; font-display: swap; src: url('../fonts/noto-serif-latin-700-normal.woff2') format('woff2'); }

:root {
    --sho-maroon: #7a1f1f;
    --sho-maroon-dark: #561414;
    --sho-gold: #d4a017;
    --sho-gold-soft: #f3d27a;
    --sho-cream: #fbf6ec;
    --sho-ink: #2b2118;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --tabbar-h: 64px;
    --dock-h: 0px;
}

html { -webkit-tap-highlight-color: transparent; }
body { background: var(--sho-cream); color: var(--sho-ink); overscroll-behavior-y: none; }
.letter-wide { letter-spacing: .12em; }
.min-w-0 { min-width: 0; }

/* ---------- Navigation, footer, tab bar ---------- */
.sho-nav { background: linear-gradient(90deg, var(--sho-maroon-dark), var(--sho-maroon)); border-bottom: 3px solid var(--sho-gold); }
.sho-logo { font-family: 'Noto Serif Tibetan', serif; font-size: 1.6rem; line-height: 1; color: var(--sho-gold); }
.sho-logo-lg { font-family: 'Noto Serif Tibetan', serif; color: var(--sho-gold); }
.sho-footer { background: #efe6d4; color: #6b5b45; }

.has-tabbar { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; justify-content: space-around; align-items: stretch;
    height: calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
    background: rgba(255, 252, 245, .96); backdrop-filter: blur(8px);
    border-top: 1px solid #e6d9bf; box-shadow: 0 -4px 18px rgba(86, 20, 20, .08);
}
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: #7c6a52; text-decoration: none; font-size: .72rem; font-weight: 600; transition: color .2s, transform .15s; }
.tabbar a i { font-size: 1.35rem; line-height: 1; }
.tabbar a.active { color: var(--sho-maroon); }
.tabbar a:active { transform: scale(.92); }
.tabbar a.tab-main i { width: 48px; height: 48px; margin-top: -22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, var(--sho-gold), #b7791f); color: #fff; box-shadow: 0 6px 14px rgba(183, 121, 31, .45); border: 3px solid #fffcf5; }

/* ---------- Buttons ---------- */
.btn { transition: transform .12s ease, box-shadow .2s ease, background-color .2s; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-sho { background: var(--sho-maroon); color: #fff; border-color: var(--sho-maroon); }
.btn-sho:hover, .btn-sho:focus { background: var(--sho-maroon-dark); color: #fff; border-color: var(--sho-maroon-dark); }
.btn-outline-sho {
    --bs-btn-color: var(--sho-maroon); --bs-btn-border-color: var(--sho-maroon);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sho-maroon); --bs-btn-hover-border-color: var(--sho-maroon);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--sho-maroon-dark); --bs-btn-active-border-color: var(--sho-maroon-dark);
    --bs-btn-disabled-color: var(--sho-maroon); --bs-btn-disabled-border-color: var(--sho-maroon);
}
.btn-check:checked + .btn-outline-sho { color: #fff; background-color: var(--sho-maroon); border-color: var(--sho-maroon); }
.btn-icon { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #e6d9bf; color: var(--sho-maroon); font-size: 1.15rem; flex: none; }
.btn-icon:hover { background: #fff7e6; color: var(--sho-maroon-dark); }
.form-check-input:checked { background-color: var(--sho-maroon); border-color: var(--sho-maroon); }
.form-check-input:focus, .form-control:focus, .form-select:focus { border-color: #c98a8a; box-shadow: 0 0 0 .2rem rgba(122, 31, 31, .2); }
.form-control, .form-select { min-height: 44px; }

/* ---------- Page entrance ---------- */
/* (the play page's board row is not animated, because a moving parent would break the fixed dock) */
main > .container > *, .play-head, .player-strip { animation: rise .45s ease both; }
main > .container > *:nth-child(2), .player-strip { animation-delay: .06s; }
main > .container > *:nth-child(3) { animation-delay: .12s; }
.board-card { animation: boardIn .5s ease both; }
@keyframes boardIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.flash-in { animation: rise .35s ease both; }

/* ---------- Home ---------- */
.sho-hero { background: radial-gradient(circle at 80% 30%, #8d2b2b, var(--sho-maroon-dark) 60%); color: #fff; overflow: hidden; }
.sho-title { font-family: 'Noto Serif', serif; letter-spacing: .08em; }
.hero-board { max-width: 280px; width: 100%; }
.hero-board .shell-ring { transform-origin: 110px 110px; animation: spin 60s linear infinite; }
.hero-board .shell { fill: #f6ead2; stroke: #c9b48a; }
.hero-board .pad { fill: #6b3a18; stroke: #d4a017; stroke-dasharray: 4 4; stroke-width: 2; }
.hero-board .hero-dice { animation: bob 2.6s ease-in-out infinite; transform-origin: 110px 110px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-3deg); } }
.feature-card { border: 0; border-radius: 1rem; box-shadow: 0 6px 20px rgba(86, 20, 20, .07); transition: transform .2s, box-shadow .2s; }
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(86, 20, 20, .12); }

/* ---------- Games list (cards on phones) ---------- */
.game-card { border: 0; border-radius: 1rem; box-shadow: 0 4px 16px rgba(86, 20, 20, .07); }
.game-card .game-players { color: #7c6a52; }

/* ---------- Play page ---------- */
.play-body main { padding-top: .5rem !important; padding-bottom: calc(var(--dock-h) + 1rem + var(--safe-bottom)); }
.play-body .sho-footer { display: none; }
.play-body .sho-nav { display: none; }

.player-strip { display: flex; gap: .5rem; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.player-strip::-webkit-scrollbar { display: none; }
.pchip { position: relative; flex: 1 0 auto; min-width: 128px; scroll-snap-align: start; display: flex; align-items: center; gap: .5rem;
    padding: .45rem .6rem .6rem; border-radius: .9rem; background: #fff; border: 1px solid #eadfc8; overflow: hidden;
    transition: transform .25s, box-shadow .25s, border-color .25s; }
.pchip-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--pc); color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: .9rem; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--pc); }
.pchip-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.pchip-name { font-weight: 700; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.pchip-stats { font-size: .72rem; color: #7c6a52; white-space: nowrap; }
.pchip-stats b { color: var(--sho-ink); }
.pchip-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #f1e8d6; }
.pchip-bar span { display: block; height: 100%; background: var(--pc); transition: width .6s ease; }
.pchip.is-active { border-color: var(--pc); box-shadow: 0 0 0 2px var(--pc), 0 8px 18px rgba(0, 0, 0, .1); transform: translateY(-1px); }
.pchip.is-active .pchip-dot { animation: pulse 1.6s ease-out infinite; }
.pchip.is-winner { background: #fff6d8; border-color: var(--sho-gold); }
.pchip.bump { animation: bump .45s ease; }
@keyframes pulse { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--pc), 0 0 0 3px rgba(212, 160, 23, .6); }
                   100% { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--pc), 0 0 0 12px rgba(212, 160, 23, 0); } }
@keyframes bump { 40% { transform: scale(1.06); } }

/* Board */
.board-card { background: #f3e7cf; border-radius: 1.25rem; padding: 6px; box-shadow: 0 8px 24px rgba(86, 20, 20, .12); }
.sho-board { width: 100%; height: auto; display: block; touch-action: manipulation; user-select: none; }
.sho-board .mat { fill: #e9d8b4; stroke: #c9ae7a; stroke-width: 2; }
.sho-board .pad-stitch { fill: none; stroke: #e8c37a; stroke-width: 2; stroke-dasharray: 6 5; opacity: .7; transform-origin: 350px 350px; }
.sho-board .pad-text { fill: #fbe9c4; font: 700 24px 'Noto Serif', serif; text-anchor: middle; }
.sho-board .pad-logo { fill: #e8b567; font: 600 54px 'Noto Serif Tibetan', serif; text-anchor: middle; }
.sho-board .path-line { fill: none; stroke: #c9ae7a; stroke-width: 2; stroke-dasharray: 2 5; }
.sho-board .shell-num { font: 600 9px system-ui, sans-serif; fill: #8a7550; text-anchor: middle; pointer-events: none; }
.sho-board .board-label { font: 700 13px system-ui, sans-serif; fill: var(--sho-maroon); letter-spacing: .08em; text-anchor: middle; }
.sho-board .die, .hero-board .die { fill: #fffdf7; stroke: #4a3520; stroke-width: 2; }
.sho-board .pip, .hero-board .pip { fill: #1f2937; }
.sho-board .pip-red, .hero-board .pip-red { fill: #c0262d; }
.sho-board .coin { stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.sho-board .coin-num { font: 800 15px system-ui, sans-serif; fill: #fff; text-anchor: middle; pointer-events: none; }
.sho-board .stack { transition: opacity .2s; }
.sho-board .stack-movable .coin { stroke: #ffd54a; stroke-width: 4; }
.sho-board .stack-movable { animation: movable 1.2s ease-in-out infinite; transform-box: fill-box; }
@keyframes movable { 50% { filter: brightness(1.15); } }
.sho-board .marker { cursor: pointer; }
.sho-board .marker-g { animation: markerIn .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.sho-board .marker circle { fill: var(--sho-gold); stroke: var(--sho-maroon); stroke-width: 2.5; }
.sho-board .marker text { font: 800 15px system-ui, sans-serif; fill: var(--sho-maroon-dark); text-anchor: middle; pointer-events: none; }
.sho-board .marker:hover circle, .sho-board .marker:focus circle, .sho-board .marker.hl circle { fill: #ffe08a; stroke-width: 3.5; }
.sho-board .marker:focus { outline: none; }
@keyframes markerIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sho-board.replaying #markersLayer { display: none; }
.sho-board .fx-ring { fill: none; stroke-width: 4; }
.sho-board .fx-spark { pointer-events: none; }


.turn-toast { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    background: rgba(43, 33, 24, .9); color: #fff; padding: .45rem 1rem; border-radius: 999px; font-weight: 700; font-size: .95rem;
    white-space: nowrap; transition: opacity .3s, transform .35s cubic-bezier(.3, 1.4, .5, 1); z-index: 3; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.turn-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Action dock: fixed to the bottom on phones */
.sho-dock { background: #fff; border-radius: 1.1rem; padding: .85rem; box-shadow: 0 6px 22px rgba(86, 20, 20, .1); border-top: 4px solid var(--tc, var(--sho-gold)); }
.turn-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--tc); flex: none; animation: pulseDot 1.4s ease-out infinite; }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(212, 160, 23, .7); } 100% { box-shadow: 0 0 0 10px rgba(212, 160, 23, 0); } }
.sho-dock.locked { pointer-events: none; }
.sho-dock.locked > * { opacity: .55; transition: opacity .2s; }

.throw-btn { display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem; border: 0; border-radius: 1rem; color: #3b2208; text-align: left;
    background: linear-gradient(145deg, #ffd666, var(--sho-gold)); box-shadow: 0 6px 0 #a87a0e, 0 10px 22px rgba(168, 122, 14, .35); }
.throw-btn:hover { color: #3b2208; filter: brightness(1.04); }
.throw-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #a87a0e, 0 4px 10px rgba(168, 122, 14, .35); }
.throw-cup { width: 54px; height: 54px; border-radius: 50%; background: var(--sho-maroon); color: #ffe39a; display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; flex: none; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); animation: wiggle 2.4s ease-in-out infinite; }
.throw-label { font-weight: 800; font-size: 1.2rem; line-height: 1.1; }
.throw-label small { font-weight: 600; font-size: .78rem; opacity: .75; }
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
.throw-btn.shaking .throw-cup { animation: cupShake .12s linear infinite; }
@keyframes cupShake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-3px, 1px) rotate(-14deg); } 75% { transform: translate(3px, -1px) rotate(14deg); } }

.para-banner { background: linear-gradient(90deg, #e9f7ef, #fff); border-left: 4px solid #198754; padding: .5rem .75rem; border-radius: .5rem; animation: rise .35s ease both; }
.move-list { display: grid; gap: .45rem; max-height: 36vh; overflow-y: auto; padding: 2px; }
.move-btn { position: relative; display: flex; align-items: center; gap: .6rem; text-align: left; min-height: 48px; padding: .5rem .75rem .5rem .55rem;
    border-radius: .8rem; background: #fff; border: 1.5px solid #e2d6bd; color: var(--sho-ink); animation: rise .3s ease both; }
.move-btn:nth-child(4) { animation-delay: .04s; } .move-btn:nth-child(5) { animation-delay: .08s; } .move-btn:nth-child(6) { animation-delay: .12s; }
.move-btn:hover, .move-btn.hl { border-color: var(--sho-gold); background: #fffaeb; color: var(--sho-ink); }
.move-letter { width: 30px; height: 30px; border-radius: 50%; background: var(--sho-gold); color: var(--sho-maroon-dark); font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex: none; font-size: .9rem; }
.move-text { flex: 1; font-weight: 600; font-size: .92rem; }
.move-icon { font-size: 1.1rem; }
.mv-kill { border-color: #f1b4b4; } .mv-kill .move-icon { color: #c0262d; }
.mv-stack { border-color: #b7dfc6; } .mv-stack .move-icon { color: #198754; }
.mv-finish { border-color: #b6cdf3; } .mv-finish .move-icon { color: #0d6efd; }
.mv-place .move-icon { color: #9c8a6e; }
.trophy { font-size: 2.6rem; animation: trophy 1.2s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes trophy { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }
.recite-btn { animation: pulseRed 1s ease-in-out infinite; }
@keyframes pulseRed { 50% { box-shadow: 0 0 0 8px rgba(220, 53, 69, .2); } }

/* Side panel (offcanvas on phones) */
.side-panel.offcanvas-bottom { height: 75vh; border-radius: 1.25rem 1.25rem 0 0; }
.panel-card { background: #fff; border-radius: 1rem; padding: .9rem 1rem; box-shadow: 0 4px 16px rgba(86, 20, 20, .06); }
.panel-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: #8a7550; font-weight: 700; margin-bottom: .5rem; }
.game-log li { border-bottom: 1px solid #f1e8d6; }
.seat-dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); flex: none; }
.seat-dot-sm { width: 10px; height: 10px; border-width: 1px; vertical-align: middle; margin-right: 4px; }

/* Confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 2000; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--rot)); } }

/* New game */
.rule-row .form-text { margin-top: .15rem; }

/* ---------- Phones: bigger coins and markers for fingers ---------- */
@media (max-width: 575.98px) {
    .sho-board .coin-g { transform: scale(1.3); }
    .sho-board .marker-g { transform: scale(1.35); animation: none; }
    .sho-board .shell-num { font-size: 10px; }
    .board-card { padding: 3px; border-radius: 1rem; }
}

/* ---------- Phones: fixed dock ---------- */
@media (max-width: 991.98px) {
    .sho-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; border-radius: 1.25rem 1.25rem 0 0; margin: 0;
        padding: .8rem .9rem calc(.8rem + var(--safe-bottom)); box-shadow: 0 -8px 28px rgba(43, 33, 24, .18); animation: dockIn .4s ease both; }
    @keyframes dockIn { from { transform: translateY(100%); } to { transform: none; } }
    .side-panel { z-index: 1045; }
}
@media (min-width: 992px) {
    .sho-dock { position: sticky; top: 1rem; margin-bottom: 1rem; }
    .move-list { max-height: none; }
    .play-body .sho-nav { display: flex; }
    .game-log { max-height: 300px; overflow-y: auto; }
}

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

/* ===================== Two modes: new game, lobby, join ===================== */
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.mode-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; padding: 1rem .75rem;
    border: 2px solid #e6dccb; border-radius: 1rem; background: #fff; cursor: pointer; transition: all .18s ease; height: 100%; }
.mode-card:hover { border-color: var(--sho-gold); transform: translateY(-2px); }
.btn-check:checked + .mode-card { border-color: var(--sho-maroon); background: #fff8ec; box-shadow: 0 6px 18px rgba(122, 31, 31, .15); }
.btn-check:focus-visible + .mode-card { outline: 3px solid var(--sho-gold); outline-offset: 2px; }
.mode-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem;
    background: linear-gradient(145deg, var(--sho-maroon), var(--sho-maroon-dark)); color: var(--sho-gold); }
#newGameForm[data-mode="online"] .computer-only,
#newGameForm[data-mode="computer"] .online-only { display: none !important; }

.mode-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem; border-radius: 999px; background: #efe7d8; color: #6b5a44; font-weight: 600; }
.mode-badge.online { background: #dcf3e6; color: #0f6b3a; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: livePulse 1.6s infinite; vertical-align: middle; }
.live-dot.off { background: #a8a29e; animation: none; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

.lobby-card { background: radial-gradient(circle at 30% 0%, #8f2a2a, var(--sho-maroon-dark)); color: #fff; border-radius: 1.25rem;
    padding: 1.5rem 1rem; border-bottom: 4px solid var(--sho-gold); box-shadow: 0 10px 30px rgba(86, 20, 20, .3); }
.letter-wide { letter-spacing: .12em; }
.invite-code { display: flex; justify-content: center; gap: .4rem; }
.invite-code span { width: 2.6rem; height: 3.2rem; display: grid; place-items: center; font: 700 1.7rem/1 ui-monospace, Menlo, Consolas, monospace;
    background: #fffcf5; color: var(--sho-maroon-dark); border-radius: .6rem; box-shadow: inset 0 -4px 0 #e6d3a8; animation: codePop .4s ease both; }
.invite-code span:nth-child(2) { animation-delay: .05s; } .invite-code span:nth-child(3) { animation-delay: .1s; }
.invite-code span:nth-child(4) { animation-delay: .15s; } .invite-code span:nth-child(5) { animation-delay: .2s; } .invite-code span:nth-child(6) { animation-delay: .25s; }
@keyframes codePop { from { transform: translateY(10px) scale(.8); opacity: 0; } }
.lobby-seats { display: grid; gap: .5rem; }
.lobby-seat { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: .8rem; background: #faf6ee; }
.lobby-seat.filled { animation: codePop .35s ease both; }
.lobby-seat.empty { border: 2px dashed #e1d6c2; background: transparent; }
.avatar-sm { --pc: #999; width: 40px; height: 40px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; font-weight: 700; color: #fff;
    background: var(--pc); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--pc); }
.avatar-sm.empty { background: #eee5d5; color: #a8957a; box-shadow: none; }
.avatar-sm.waiting { animation: waitGlow 1.4s ease-in-out infinite; }
@keyframes waitGlow { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 9px color-mix(in srgb, var(--pc) 35%, transparent); } }
.join-icon { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem;
    background: linear-gradient(145deg, #198754, #0f5132); color: #fff; }
.join-preview { background: #faf6ee; border-radius: .8rem; padding: .75rem 1rem; }
.code-input { text-align: center; text-transform: uppercase; letter-spacing: .45em; font: 700 1.6rem ui-monospace, Menlo, Consolas, monospace; }

/* ===================== Board: player profiles with coin piles ===================== */
.avatar .av-glow { fill: none; stroke: var(--pc); stroke-width: 4; opacity: 0; }
.avatar .av-disc { stroke: #fffcf5; stroke-width: 4; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.avatar .av-person { fill: rgba(255, 255, 255, .92); }
.avatar .av-initial { text-anchor: middle; font-size: 30px; }
.avatar .av-name { text-anchor: middle; font: 700 15px 'Noto Serif', serif; fill: var(--sho-ink); paint-order: stroke; stroke: #fbf3e2; stroke-width: 4px; }
.avatar .av-home { text-anchor: middle; font: 600 12px system-ui, sans-serif; fill: #6b5a44; paint-order: stroke; stroke: #fbf3e2; stroke-width: 3px; }
.avatar.is-active .av-glow { opacity: 1; animation: avPulse 1.2s ease-in-out infinite; transform-origin: 0 0; transform-box: fill-box; }
.avatar.is-active .av-disc { stroke: var(--sho-gold); }
.avatar.is-winner .av-disc { stroke: var(--sho-gold); stroke-width: 6; }
.avatar.is-empty .pile-badge rect { fill: #a8a29e; }
@keyframes avPulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.16); opacity: .35; } }
.pile-coin { stroke: rgba(0, 0, 0, .35); stroke-width: 1; }
.pile-edge { fill: rgba(0, 0, 0, .35); }
.pile-badge rect { fill: var(--sho-maroon); stroke: #fffcf5; stroke-width: 2; }
.pile-badge text { text-anchor: middle; font: 700 13px system-ui, sans-serif; fill: #fff; }
.pile-badge.bump { animation: badgeBump .4s ease; transform-box: fill-box; transform-origin: center; }
@keyframes badgeBump { 50% { scale: 1.35; } }

/* ===================== The wooden cup and the slam ===================== */
.cup { pointer-events: none; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.cup-band { fill: #d4a017; stroke: #7a5408; stroke-width: 1; }
.cup-shadow { fill: #000; pointer-events: none; }
.board-shake { animation: boardShake .32s cubic-bezier(.36, .07, .19, .97); }
@keyframes boardShake {
    15% { transform: translate(0, 4px); } 30% { transform: translate(-3px, -2px); }
    50% { transform: translate(2px, 2px); } 70% { transform: translate(-1px, -1px); } 100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .board-shake, .avatar.is-active .av-glow, .invite-code span, .lobby-seat.filled, .live-dot, .avatar-sm.waiting { animation: none !important; }
}
@media (max-width: 575.98px) {
    .avatar { transform-box: fill-box; }
    .avatar .av-name { font-size: 17px; }
}
.mode-card strong { display: block; font-size: 1rem; margin-bottom: .2rem; }
.mode-card small { display: block; color: #6b5a44; line-height: 1.35; }

/* ===================== Tap a coin, then tap where it goes ===================== */
.stack-hit, .pile-hit { fill: transparent; }
.stack-movable, .pile-movable { cursor: pointer; }
.stack-movable:focus, .pile-movable:focus, .target:focus { outline: none; }
.pick-ring { fill: none; stroke: var(--sho-gold); stroke-width: 3.5; stroke-dasharray: 5 4; animation: pickSpin 3s linear infinite, pickGlow 1.3s ease-in-out infinite;
    transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 4px rgba(212, 160, 23, .9)); }
@keyframes pickSpin { to { rotate: 360deg; } }
@keyframes pickGlow { 50% { stroke: #fff3b0; stroke-width: 5; } }
.stack-movable.is-picked .pick-ring, .pile-movable.is-picked .pick-ring { stroke: #fff; stroke-width: 5; stroke-dasharray: none; animation: none; filter: drop-shadow(0 0 7px #ffd54a); }
.stack-movable.is-picked .coin-g { scale: 1.15; transition: scale .15s ease; }
.sho-board.picking .stack:not(.is-picked) { opacity: .55; transition: opacity .2s; }
.sho-board.picking .stack-movable:not(.is-picked) { opacity: .8; }
.sho-board.replaying .pick-ring { display: none; }
.sho-board.replaying #targetsLayer, .sho-board.replaying #trailLayer { display: none; }

.trail-dot { opacity: 0; animation: trailIn .25s ease forwards; pointer-events: none; }
@keyframes trailIn { from { opacity: 0; r: 1; } to { opacity: .55; } }

.target { cursor: pointer; }
.target-g { animation: targetIn .35s cubic-bezier(.3, 1.6, .5, 1) both; transform-box: fill-box; transform-origin: center; }
@keyframes targetIn { from { transform: scale(0); opacity: 0; } }
.target .tg-pulse { fill: none; stroke-width: 3; opacity: .8; animation: tgPulse 1.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tgPulse { from { transform: scale(.75); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
.target .tg-disc { fill: #fffdf7; stroke-width: 3.5; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.target .tg-icon { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.target .tg-label rect { stroke-width: 2; }
.target .tg-label text { text-anchor: middle; font: 800 16px system-ui, sans-serif; fill: #fff; pointer-events: none; }
.target:hover .tg-disc, .target:focus .tg-disc { fill: #fff6d6; stroke-width: 5; }
.target.chosen .target-g { animation: tgChosen .25s ease forwards; }
@keyframes tgChosen { to { transform: scale(1.3); } }
.tg-place .tg-pulse, .tg-place .tg-disc, .tg-place .tg-icon { stroke: #b7791f; } .tg-place .tg-label rect { fill: #b7791f; stroke: #fff; }
.tg-stack .tg-pulse, .tg-stack .tg-disc, .tg-stack .tg-icon { stroke: #198754; } .tg-stack .tg-label rect { fill: #198754; stroke: #fff; }
.tg-kill .tg-pulse, .tg-kill .tg-disc { stroke: #c0262d; } .tg-kill .tg-icon { stroke: #c0262d; fill: #c0262d; } .tg-kill .tg-label rect { fill: #c0262d; stroke: #fff; }
.tg-finish .tg-pulse, .tg-finish .tg-disc, .tg-finish .tg-icon { stroke: #0d6efd; } .tg-finish .tg-label rect { fill: #0d6efd; stroke: #fff; }
.sho-board.sending .target:not(.chosen) { opacity: .3; }

.pick-hint { display: flex; align-items: center; gap: .6rem; background: #fff8e6; border: 1px solid #f0dca8; border-radius: .8rem; padding: .55rem .7rem; }
.pick-hint-icon { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sho-gold); color: #fff;
    animation: tapHint 1.6s ease-in-out infinite; }
@keyframes tapHint { 50% { transform: translateY(-3px) scale(1.08); } }
.pick-legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .45rem; color: #6b5a44; }
.pick-legend .lg { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: .3rem; vertical-align: -1px; border: 2.5px solid; background: #fff; }
.lg-place { border-color: #b7791f !important; } .lg-stack { border-color: #198754 !important; }
.lg-kill { border-color: #c0262d !important; background: #c0262d !important; } .lg-finish { border-color: #0d6efd !important; }
@media (max-width: 575.98px) {
    .target-g { scale: 1.3; }
    .stack-movable .pick-ring, .stack-movable .stack-hit { scale: 1.22; }
}
@media (prefers-reduced-motion: reduce) {
    .pick-ring, .tg-pulse, .pick-hint-icon, .trail-dot, .target-g { animation: none !important; }
    .trail-dot { opacity: .55; }
}

/* ===================== The dice cup beside the player whose turn it is ===================== */
.av-cup { pointer-events: none; }
.av-cup.can-throw { pointer-events: auto; cursor: pointer; }
.av-cup-hit { fill: transparent; }
.av-cup-glow { fill: rgba(255, 213, 74, .22); stroke: var(--sho-gold); stroke-width: 3; animation: cupGlow 1.4s ease-in-out infinite;
    transform-box: fill-box; transform-origin: center; }
@keyframes cupGlow { 50% { transform: scale(1.12); fill: rgba(255, 213, 74, .38); } }
.av-cup-shadow { fill: rgba(0, 0, 0, .25); }
.av-cup-body { animation: cupIdle 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.av-cup.can-throw .av-cup-body { animation: cupWobble 1.1s ease-in-out infinite; }
@keyframes cupIdle { 50% { rotate: -4deg; } }
@keyframes cupWobble { 0%, 60%, 100% { rotate: 0deg; } 70% { rotate: -9deg; } 80% { rotate: 8deg; } 90% { rotate: -5deg; } }
.av-cup.can-throw:hover .av-cup-glow, .av-cup.can-throw:focus .av-cup-glow { stroke-width: 5; }
.av-cup:focus { outline: none; }
.av-cup.lifting { animation: cupAway .3s ease forwards; transform-box: fill-box; }
@keyframes cupAway { to { opacity: 0; translate: 0 -24px; } }
.sho-board.replaying .av-cup { display: none; }
.sho-board.sending { pointer-events: none; }

/* No entrance animation when the game area is swapped in place */
.play-page.swapped .play-head, .play-page.swapped .player-strip { animation: none; }
@media (prefers-reduced-motion: reduce) { .av-cup-glow, .av-cup-body { animation: none !important; } }

/* ===================== Admin dashboard ===================== */
.nav-admin { color: #ffd76a !important; }
.site-notice { padding: .55rem 0; font-size: .92rem; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.site-notice-info { background: #e7f1ff; color: #0b3d79; }
.site-notice-success { background: #e3f6ea; color: #0f5132; }
.site-notice-warning { background: #fff4d6; color: #6b4a00; }
.site-notice-danger { background: #fde4e4; color: #842029; }

.admin-head .admin-badge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem;
    background: linear-gradient(145deg, var(--sho-maroon), var(--sho-maroon-dark)); color: var(--sho-gold); }
.admin-tabs { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs a { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px;
    background: #fff; border: 1px solid #eadfcd; color: #5a4a36; text-decoration: none; font-weight: 600; font-size: .92rem; }
.admin-tabs a:hover { border-color: var(--sho-gold); color: var(--sho-ink); }
.admin-tabs a.active { background: var(--sho-maroon); border-color: var(--sho-maroon); color: #fff; }

.admin-card { background: #fff; border: 1px solid #eee4d3; border-radius: 1rem; padding: 1rem; box-shadow: 0 2px 10px rgba(60, 40, 20, .04); }
.admin-card-title { font-size: .95rem; font-weight: 700; margin-bottom: .75rem; color: var(--sho-ink); }
details.admin-card > summary { cursor: pointer; list-style: revert; }
.kpi { background: #fff; border: 1px solid #eee4d3; border-radius: 1rem; padding: .85rem 1rem; height: 100%; }
.kpi-label { font-size: .8rem; color: #6b5a44; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-size: 2rem; font-weight: 800; line-height: 1.15; color: var(--sho-ink); font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: .8rem; color: #7a6a55; }
@media (max-width: 575.98px) { .kpi-value { font-size: 1.6rem; } .admin-card { padding: .8rem; } }

.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-grid { stroke: #efe8dc; stroke-width: 1; }
.chart-base { stroke: #d9cdb8; stroke-width: 1; }
.chart-tick { font: 500 12px system-ui, sans-serif; fill: #7a6a55; }
.chart-value { font: 700 13px system-ui, sans-serif; fill: var(--sho-ink); }
.chart-hit { fill: transparent; }
.chart-col { outline: none; }
.chart-col:hover .chart-hit, .chart-col:focus .chart-hit { fill: rgba(122, 31, 31, .05); }
.chart-col:hover .chart-seg, .chart-col:focus .chart-seg { filter: brightness(1.12); }
.chart-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .85rem; color: #5a4a36; margin-bottom: .35rem; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: 0; }
.chart-legend b { color: var(--sho-ink); font-variant-numeric: tabular-nums; }
.chart-table summary { font-size: .8rem; color: #7a6a55; cursor: pointer; margin-top: .4rem; }
.chart-table table { font-size: .82rem; }

.hbars { display: grid; gap: .55rem; }
.hbar { display: grid; grid-template-columns: minmax(80px, 38%) 1fr auto; align-items: center; gap: .6rem; font-size: .88rem; }
.hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sho-ink); }
.hbar-track { height: 12px; border-radius: 0 4px 4px 0; position: relative; }
.hbar-fill { display: block; height: 100%; min-width: 3px; border-radius: 0 4px 4px 0; }
.hbar-value { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }

.mode-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #a8322f; margin-right: .3rem; }
.mode-dot.online { background: #b8860b; }
.admin-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #7a6a55; font-weight: 700; border-bottom-width: 1px; white-space: nowrap; }
.admin-table td { font-size: .92rem; }
.admin-table tr.is-blocked td { background: #fbf6f6; }
.admin-table .text-truncate { max-width: 260px; display: inline-block; vertical-align: middle; }
.avatar-lg { --pc: #7a1f1f; width: 72px; height: 72px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 1.8rem; font-weight: 800;
    color: #fff; background: var(--pc); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--pc); }
.mini-stat { background: #faf6ee; border-radius: .8rem; padding: .5rem; }
.mini-stat b { display: block; font-size: 1.4rem; line-height: 1.1; }
.mini-stat span { font-size: .78rem; color: #7a6a55; }
.admin-dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; }
.admin-dl dt { color: #7a6a55; font-weight: 600; }
.admin-dl dd { margin: 0; }
.admin-board { max-width: 560px; margin: 0 auto; }
.admin-board .sho-board { width: 100%; height: auto; }
.admin-log-list { max-height: 360px; overflow-y: auto; }

/* ===================== Coins ===================== */
.coin-icon { display: inline-block; width: 1em; height: 1em; border-radius: 50%; vertical-align: -.12em; margin-right: .3em; flex: none;
    background: radial-gradient(circle at 35% 30%, #fff3b0 0 18%, #f2c230 19% 55%, #b7791f 56%); box-shadow: inset 0 0 0 1.5px #8a5a12; }
.coin-chip { display: inline-flex; align-items: center; gap: .1rem; padding: .25rem .65rem; border-radius: 999px; font-weight: 800; font-size: .9rem;
    background: rgba(0, 0, 0, .25); color: #ffe08a; text-decoration: none; border: 1px solid rgba(255, 224, 138, .35); font-variant-numeric: tabular-nums; white-space: nowrap; }
.coin-chip:hover { color: #fff3b0; background: rgba(0, 0, 0, .35); }
.coin-chip-light { background: #fff8e6; color: #7a4a00; border-color: #f0dca8; }
.coin-chip-light:hover { background: #fff1cc; color: #7a4a00; }
.coin-big { width: 64px; height: 64px; border-radius: 50%; flex: none; animation: coinSpin 4s ease-in-out infinite;
    background: radial-gradient(circle at 35% 30%, #fff8cc 0 15%, #f6cf3f 16% 52%, #c48a19 53% 70%, #8a5a12 71%); box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
@keyframes coinSpin { 0%, 70%, 100% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } }
.wallet-hero { background: radial-gradient(circle at 20% 0%, #8f2a2a, var(--sho-maroon-dark)); color: #fff; border-radius: 1.25rem; padding: 1.25rem;
    border-bottom: 4px solid var(--sho-gold); box-shadow: 0 10px 30px rgba(86, 20, 20, .25); }
.wallet-balance { font-size: 2.6rem; font-weight: 800; line-height: 1.05; color: #ffe08a; font-variant-numeric: tabular-nums; }
.wallet-balance.bump, .bump { animation: bumpUp .5s ease; }
@keyframes bumpUp { 40% { transform: scale(1.15); } }
.streak { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.streak-day { position: relative; text-align: center; border-radius: .7rem; padding: .45rem .1rem; background: #faf6ee; border: 1px solid #eee4d3; }
.streak-day .streak-n { display: block; font-size: .68rem; color: #7a6a55; }
.streak-day .streak-coins { display: block; font-weight: 800; font-size: .82rem; }
.streak-day.done { background: #e8f6ee; border-color: #b7dfc6; }
.streak-day.done .bi { position: absolute; top: -6px; right: -4px; color: #198754; background: #fff; border-radius: 50%; }
.streak-day.next { background: #fff4d6; border-color: var(--sho-gold); box-shadow: 0 0 0 2px rgba(212, 160, 23, .35); animation: bumpUp 1.8s ease-in-out infinite; }
@media (max-width: 400px) { .streak { gap: .2rem; } .streak-day .streak-coins { font-size: .7rem; } .streak-day .streak-n { font-size: .6rem; } }
.pot-badge { display: inline-flex; align-items: center; padding: .3rem .6rem; border-radius: 999px; background: #fff8e6; border: 1px solid #f0dca8;
    font-weight: 800; font-size: .85rem; color: #7a4a00; white-space: nowrap; font-variant-numeric: tabular-nums; }
.coin-result { display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .9rem; border-radius: 999px; font-size: .95rem; }
.coin-result.won { background: #e3f6ea; color: #0f5132; }
.coin-result.lost { background: #fdecec; color: #842029; }
.turn-timer.hurry { background: #fde4e4 !important; color: #842029; border-color: #f1b4b4 !important; animation: bumpUp 1s ease-in-out infinite; }
.lobby-stake { display: inline-flex; align-items: center; padding: .35rem .8rem; border-radius: 999px; background: rgba(0, 0, 0, .22); color: #ffe08a; font-weight: 700; font-size: .9rem; }
.leaderboard li { display: flex; align-items: center; gap: .7rem; padding: .55rem .4rem; border-bottom: 1px solid #f1eadf; }
.leaderboard li:last-child { border-bottom: 0; }
.leaderboard li.is-me { background: #fff8e6; border-radius: .6rem; }
.lb-rank { width: 2rem; text-align: center; font-weight: 800; color: #7a6a55; font-variant-numeric: tabular-nums; }
.podium-1 .lb-rank { color: #b7791f; font-size: 1.15rem; } .podium-2 .lb-rank { color: #6b7280; font-size: 1.1rem; } .podium-3 .lb-rank { color: #9a5b2e; font-size: 1.05rem; }
.lb-coins { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.coin-strip { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .9rem; color: #5a4a36; }
.coin-mini li { padding: .2rem 0; border-bottom: 1px dashed #eee4d3; }

/* ===================== Play online: players, tables, waiting ===================== */
.online-now { font-size: .9rem; font-weight: 600; color: #0f6b3a; background: #e3f6ea; padding: .3rem .75rem; border-radius: 999px; }
.seg-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.seg-pick label { display: flex; flex-direction: column; align-items: center; padding: .7rem .5rem; border: 2px solid #e6dccb; border-radius: .9rem; background: #fff; cursor: pointer; transition: all .15s ease; }
.seg-pick .seg-n { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.seg-pick .seg-t { font-size: .8rem; color: #7a6a55; }
.btn-check:checked + label .seg-n { color: var(--sho-maroon); }
.seg-pick .btn-check:checked + label { border-color: var(--sho-maroon); background: #fff8ec; box-shadow: 0 6px 18px rgba(122, 31, 31, .12); }
.seg-pick .btn-check:focus-visible + label, .table-pick .btn-check:focus-visible + label { outline: 3px solid var(--sho-gold); outline-offset: 2px; }
.table-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.table-card { position: relative; display: flex; flex-direction: column; gap: .1rem; padding: .75rem .8rem; border-radius: .9rem; border: 2px solid #e6dccb;
    background: linear-gradient(160deg, #fff, #fbf3e2); cursor: pointer; transition: all .15s ease; min-height: 88px; }
.table-card .table-name { font-weight: 800; }
.table-card .table-prize { font-size: .85rem; color: #7a4a00; }
.table-card .table-wait { color: #0f6b3a; font-weight: 600; }
.table-card.free { background: linear-gradient(160deg, #fff, #eef7f1); }
.btn-check:checked + .table-card { border-color: var(--sho-maroon); box-shadow: 0 6px 18px rgba(122, 31, 31, .14); transform: translateY(-2px); }
.btn-check:disabled + .table-card { opacity: .55; cursor: not-allowed; }
.table-lock { font-size: .75rem; color: #842029; font-weight: 600; }
.find-btn { font-weight: 800; letter-spacing: .02em; padding-top: .8rem; padding-bottom: .8rem; }
body.queue-body { background: radial-gradient(circle at 50% 0%, #8f2a2a, #3d0e0e 70%); min-height: 100vh; }
body.queue-body .sho-footer { display: none; }
.queue-card { color: #fff; padding: 1.5rem 1rem; }
.radar { position: relative; width: 170px; height: 170px; margin: 0 auto; }
.radar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 213, 74, .6); animation: radar 2.4s ease-out infinite; }
.radar span:nth-child(2) { animation-delay: .8s; } .radar span:nth-child(3) { animation-delay: 1.6s; }
@keyframes radar { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }
.radar-core { position: absolute; inset: 50px; border-radius: 50%; display: grid; place-items: center; font-family: 'Noto Serif Tibetan', serif; font-size: 2.2rem;
    background: radial-gradient(circle at 40% 35%, #9a5b2e, #5e3517); color: var(--sho-gold); box-shadow: 0 0 0 4px rgba(255, 213, 74, .35), 0 10px 30px rgba(0, 0, 0, .4); }
.queue-card.matched .radar span { border-color: #4ade80; animation-duration: .8s; }
.queue-seats { display: flex; justify-content: center; gap: .6rem; }
.qseat { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; background: rgba(255, 255, 255, .08);
    border: 2px dashed rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .6); transition: all .25s ease; }
.qseat.on { background: var(--sho-gold); border: 2px solid #fff3b0; color: var(--sho-maroon-dark); animation: bumpUp .4s ease; }
@media (prefers-reduced-motion: reduce) { .radar span, .coin-big, .streak-day.next, .turn-timer.hurry { animation: none !important; } }

/* ===================== Content pages, ads, footer ===================== */
.ad-box { margin: 1.25rem 0; padding: .5rem; border-radius: .8rem; background: #fff; border: 1px solid #eee4d3; min-height: 120px; overflow: hidden; }
.ad-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #9c8a6e; margin-bottom: .25rem; }
.article-card { display: flex; gap: .9rem; padding: 1rem; border-radius: 1rem; background: #fff; border: 1px solid #eee4d3; text-decoration: none; color: inherit; transition: all .15s ease; }
.article-card:hover { border-color: var(--sho-gold); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(60, 40, 20, .08); color: inherit; }
.article-icon { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 1.3rem;
    background: linear-gradient(145deg, var(--sho-maroon), var(--sho-maroon-dark)); color: var(--sho-gold); }
.article-title { display: block; font-weight: 700; line-height: 1.3; margin-bottom: .2rem; color: var(--sho-ink); }
.article-desc { display: block; font-size: .88rem; color: #6b5a44; }
.article-meta { display: block; font-size: .78rem; color: #9c8a6e; margin-top: .3rem; }
.article-body { font-size: 1.04rem; line-height: 1.7; }
.article-body h2 { font-size: 1.3rem; margin-top: 1.6rem; }
.article-body table { font-size: .95rem; }
.cta-box { background: #fff8e6; border: 1px solid #f0dca8; border-radius: 1rem; padding: 1rem; }
.more-articles li { padding: .35rem 0; }
.home-about { background: #fff; border: 1px solid #eee4d3; border-radius: 1rem; padding: 1.25rem; }
.footer-links li { padding: .15rem 0; }
.footer-links a, .sho-footer a { color: inherit; }
.sho-logo-sm { font-family: 'Noto Serif Tibetan', serif; color: var(--sho-gold); }
.msg { border: 1px solid #eee4d3; border-radius: .9rem; padding: .85rem; margin-bottom: .75rem; }
.msg.unread { border-color: var(--sho-gold); background: #fffdf5; }
.msg-body { white-space: normal; word-break: break-word; font-size: .95rem; }

/* ===================== Small screens: nothing may stick out ===================== */
img, svg, video, iframe, table { max-width: 100%; }
.min-w-0 { min-width: 0; }
@media (max-width: 575.98px) {
    .wallet-balance { font-size: 2.1rem; }
    .play-head { flex-wrap: nowrap; }
    .play-head .pot-badge { font-size: .75rem; padding: .2rem .45rem; }
    .sho-hero .display-4 { font-size: 2.4rem; }
    .table-pick { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 359.98px) {
    .seg-pick .seg-n { font-size: 1.3rem; }
    .table-pick { grid-template-columns: 1fr; }
    .coin-chip { font-size: .8rem; padding: .2rem .5rem; }
}

/* ===================== Board always fully visible ===================== */
.board-card { transition: max-width .2s ease; }
@media (max-width: 991.98px) {
    .sho-dock .small.text-muted.mb-2 { margin-bottom: .35rem !important; }
    .sho-dock .pick-hint { padding: .4rem .6rem; }
    .sho-dock .pick-hint-icon { width: 28px; height: 28px; }
    .sho-dock .pick-legend { margin-top: .3rem; font-size: .78rem; }
}
/* Short landscape phones: board on the left, panel on the right (nothing fixed over the board) */
@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 560px) {
    .play-row { flex-wrap: nowrap; align-items: flex-start; }
    .play-row > .col-lg-7 { flex: 0 0 58%; max-width: 58%; }
    .play-row > .col-lg-5 { flex: 0 0 42%; max-width: 42%; }
    .sho-dock { position: sticky; top: .5rem; left: auto; right: auto; bottom: auto; border-radius: 1rem; animation: none;
        padding: .7rem; box-shadow: 0 6px 22px rgba(86, 20, 20, .1); }
    .play-body main { padding-bottom: 1rem; }
    .player-strip { display: none !important; }
    .play-head { margin-bottom: .25rem !important; }
}

/* ===================== Invite friends ===================== */
.invite-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 15% 0%, #8f2a2a, var(--sho-maroon-dark)); color: #fff;
    border-radius: 1.25rem; padding: 1.25rem; border-bottom: 4px solid var(--sho-gold); }
.invite-gift { position: absolute; right: -10px; top: -10px; font-size: 6rem; color: rgba(255, 213, 74, .18); transform: rotate(12deg); pointer-events: none; }
.invite-link-box { display: flex; gap: .4rem; }
.invite-link-box .form-control { min-width: 0; font-size: .9rem; background: #fffcf5; }
.invite-code-inline { letter-spacing: .15em; color: #ffe08a; }
.invite-list li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid #f1eadf; }
.invite-list li:last-child { border-bottom: 0; }
.invite-strip { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 1rem; text-decoration: none; color: #5a3a00;
    background: linear-gradient(90deg, #fff4d6, #fffaf0); border: 1px solid #f0dca8; }
.invite-strip > .bi-gift-fill { font-size: 1.6rem; color: var(--sho-maroon); }
.invite-strip:hover { color: #5a3a00; border-color: var(--sho-gold); }
.invited-banner { display: flex; gap: .6rem; align-items: center; padding: .6rem .8rem; border-radius: .8rem; background: #fff4d6; border: 1px solid #f0dca8; color: #5a3a00; }
.invited-banner .bi { font-size: 1.4rem; color: var(--sho-maroon); }
@media (max-width: 400px) { .invite-link-box { flex-direction: column; } }

.sho-nav .nav-link { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199.98px) { .play-body .sho-nav { display: flex; } }

/* ===================== Realistic cowrie shells ===================== */
.sho-board .shell { transition: filter .2s; }
.sho-board .cw-body { stroke: #b48a4e; stroke-width: .7; }
.sho-board .cw-teeth { fill: none; stroke: #a07740; stroke-width: .9; stroke-linejoin: round; opacity: .75; }
.sho-board .cw-edge { stroke: rgba(150, 110, 55, .45); stroke-width: .8; }
.sho-board .cw-end { stroke: #8a6534; stroke-width: 1.1; stroke-linecap: round; }
.sho-board .cw-shine { fill: #fff; opacity: .78; stroke: none; }
.sho-board .cw-ring { stroke: none; }
.sho-board .cw-shine2 { fill: #fff; opacity: .55; stroke: none; }
.sho-board .tone-1 .shell { filter: url(#cowrieShadow) sepia(.12) brightness(.98); }
.sho-board .tone-2 .shell { filter: url(#cowrieShadow) saturate(.85) brightness(1.03); }
.sho-board .shell-num { font: 700 8.5px system-ui, sans-serif; fill: #6e5532; paint-order: stroke; stroke: rgba(255, 252, 240, .85); stroke-width: 2px; }
.sho-board .shell-g.lit .shell { filter: url(#cowrieShadow) drop-shadow(0 0 5px #ffd54a) brightness(1.08); }
.sho-board .shell-g.lit .shell-num { fill: #7a1f1f; }
@media (max-width: 575.98px) { .sho-board .shell-num { font-size: 10px; } }

.sho-board .die-shadow { fill: #2a1405; opacity: .35; }

/* Turn clock ring around the active avatar */
.avatar .av-timer-track { fill: none; stroke: rgba(0, 0, 0, .12); stroke-width: 5; }
.avatar .av-timer { fill: none; stroke: #22a35a; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; }
.avatar .av-timer.hurry { stroke: #d62828; animation: timerPulse .8s ease-in-out infinite; }
@keyframes timerPulse { 50% { stroke-width: 7; } }

/* ===================== Winner celebration ===================== */
.win-pop { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; }
.win-pop[hidden] { display: none; }
.win-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(122, 31, 31, .55), rgba(20, 8, 4, .82)); opacity: 0; transition: opacity .3s; }
.win-card { position: relative; width: min(380px, 100%); text-align: center; padding: 2.2rem 1.4rem 1.4rem; border-radius: 1.5rem; overflow: hidden;
    background: linear-gradient(180deg, #fffaf0, #fff3d6); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 4px #d4a017 inset;
    transform: scale(.6) translateY(30px); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.6, .4, 1), opacity .3s; }
.win-pop.show .win-backdrop { opacity: 1; }
.win-pop.show .win-card { transform: none; opacity: 1; }
.win-rays { position: absolute; left: 50%; top: 70px; width: 520px; height: 520px; margin: -260px 0 0 -260px; pointer-events: none; opacity: .5;
    background: repeating-conic-gradient(from 0deg, rgba(212, 160, 23, .35) 0 10deg, transparent 10deg 20deg); border-radius: 50%;
    mask-image: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%);
    animation: raysSpin 14s linear infinite; }
@keyframes raysSpin { to { transform: rotate(360deg); } }
.win-x { position: absolute; top: .8rem; right: .8rem; z-index: 2; }
.win-trophy { position: relative; font-size: 3.6rem; line-height: 1; animation: trophyIn .8s cubic-bezier(.2, 1.8, .4, 1) .15s both, trophyBob 2.4s ease-in-out 1s infinite; }
@keyframes trophyIn { from { transform: scale(0) rotate(-30deg); } }
@keyframes trophyBob { 50% { transform: translateY(-6px) rotate(4deg); } }
.win-avatar { position: relative; width: 64px; height: 64px; margin: .4rem auto .2rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; font-weight: 800;
    color: #fff; background: var(--pc); box-shadow: 0 0 0 4px #fff, 0 0 0 7px #d4a017, 0 8px 18px rgba(0, 0, 0, .25); animation: trophyIn .6s ease .35s both; }
.win-title { position: relative; font-weight: 900; font-size: 1.9rem; margin: .5rem 0 .1rem; color: var(--sho-maroon-dark);
    background: linear-gradient(90deg, #7a1f1f, #b7791f, #7a1f1f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.win-sub { position: relative; color: #6b5a44; margin-bottom: .6rem; font-size: .95rem; }
.win-coins { position: relative; display: inline-flex; align-items: center; gap: .2rem; font-size: 2.2rem; font-weight: 900; color: #7a4a00;
    padding: .2rem 1rem; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px rgba(183, 121, 31, .3); font-variant-numeric: tabular-nums; }
.win-coins.small-coins { font-size: 1.1rem; font-weight: 700; }
.win-coins.done { animation: bumpUp .5s ease; }
.win-split { position: relative; font-size: .82rem; color: #7a6a55; margin-top: .45rem; }
@media (prefers-reduced-motion: reduce) { .win-rays, .win-trophy, .win-avatar { animation: none !important; } }
.confetti { z-index: 2100 !important; }

/* ===================== Tibetan-style counting: shells glow, gather, and show the count ===================== */
.sho-board .shell-g { transition: translate .25s ease; }
.sho-board .shell-g.counted .shell { filter: url(#cowrieShadow) drop-shadow(0 0 6px #ffcf3f) brightness(1.1); }
.sho-board .shell-g.trail-lit .shell { filter: url(#cowrieShadow) drop-shadow(0 0 5px rgba(255, 207, 63, .95)) brightness(1.06); }
.sho-board .shell-g.trail-lit .shell-num, .sho-board .shell-g.counted .shell-num { fill: #7a1f1f; }
.sho-board .count-badge circle { fill: #7a1f1f; stroke: #fff3b0; stroke-width: 2; }
.sho-board .count-badge text { font: 800 10px system-ui, sans-serif; fill: #fff; text-anchor: middle; }
.sho-board .count-badge { animation: badgeIn .25s cubic-bezier(.3, 1.8, .5, 1) both; transform-box: fill-box; }
.sho-board .count-badge.fade { opacity: 0; transition: opacity .35s; }
@keyframes badgeIn { from { scale: 0; } }
.sho-board .finish-mark circle { fill: #fff8e6; stroke: var(--sho-gold); stroke-width: 2; stroke-dasharray: 4 3; }
.sho-board .finish-mark text { font: 700 13px system-ui, sans-serif; fill: var(--sho-maroon); text-anchor: middle; }
.sho-board .shell-num { font-size: 8px; opacity: .8; }
.sho-board.no-nums .shell-num { display: none; }
@media (max-width: 575.98px) { .sho-board .shell-num { font-size: 9.5px; } }
.num-btn.off { opacity: .45; text-decoration: line-through; }

/* ===================== Tibetan board look (pink mat, dark felt pad, blue pips) ===================== */
.sho-board .mat { fill: #fdeef0; stroke: #f3d4da; stroke-width: 2; }
.sho-board .pad-disc { stroke: #e9b929; stroke-width: 6; }
.sho-board .pad-stitch { stroke: rgba(233, 185, 41, .35); }
.sho-board .pip, .sho-board .pip-red { fill: #1d3fb8; }
.sho-board .tone-1 .shell { filter: url(#cowrieShadow) brightness(.97); }
.sho-board .tone-2 .shell { filter: url(#cowrieShadow) brightness(1.03) sepia(.06); }
.sho-board .board-label { fill: #a3485a; }

/* ===================== Player cards (Tibetan app style) ===================== */
.board-card { background: #fbe4e8; }
.avatar .av-glow { fill: none; stroke: var(--pc); stroke-width: 4; opacity: 0; }
.avatar.is-active .av-glow { opacity: 1; }
.avatar .av-card { fill: #fff; stroke: var(--pc); stroke-width: 4; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .25)); }
.avatar.is-active .av-card { stroke-width: 5; }
.avatar.is-winner .av-card { stroke: #e9b929; stroke-width: 6; }
.avatar .av-photo { fill: color-mix(in srgb, var(--pc) 18%, #fff8ee); }
.avatar .av-person { fill: var(--pc); opacity: .85; }
.avatar .av-letter { font: 800 13px system-ui, sans-serif; fill: #fff; text-anchor: middle; pointer-events: none; }
.avatar .av-bot { font-size: 34px; }
.avatar .pile-coin { stroke: rgba(0, 0, 0, .45); stroke-width: 1.2; }
.avatar .pile-badge rect { fill: #3b3533; stroke: #fff; stroke-width: 1.5; }
.avatar .pile-badge text { font: 800 11px system-ui, sans-serif; fill: #fff; text-anchor: middle; }
.avatar .home-dots .hd { fill: #fff; stroke: #c9a5ad; stroke-width: 1.2; stroke-dasharray: 2 1.6; }
.avatar .home-dots .hd.on { stroke: #e9b929; stroke-width: 1.6; stroke-dasharray: none; }
.avatar .av-home { font-size: 10px; }
.avatar .av-timer-track { fill: none; stroke: rgba(0, 0, 0, .12); stroke-width: 5; }
.avatar .av-timer { fill: none; stroke: #22a35a; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; }
.sho-board .pile-movable .pick-ring { fill: none; }
.sho-board #homeLayer .home-stack circle { stroke: #fff; stroke-width: 2; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.sho-board #homeLayer .home-stack text { font: 800 11px system-ui, sans-serif; fill: #fff; text-anchor: middle; }
.sho-board #homeLayer .home-stack.pop { animation: bumpUp .6s ease; transform-box: fill-box; transform-origin: center; }
.sho-board .finish-mark circle { fill: #fff; stroke: #e9b929; stroke-width: 2.5; stroke-dasharray: 4 3; }
/* the band along the shells a move covers */
.sho-board .move-band { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .32; pointer-events: none; }
.sho-board .move-band.in { animation: bandIn .35s ease both; }
@keyframes bandIn { from { opacity: 0; } to { opacity: .32; } }

/* ===================== Crowded shells that part for coins; START place ===================== */
.sho-board .shell-g { transition: translate .25s ease, transform .5s cubic-bezier(.3, .8, .3, 1); }
.sho-board .start-mark circle { fill: rgba(255, 255, 255, .55); stroke: #e9b929; stroke-width: 2.5; stroke-dasharray: 4 3; }
.sho-board .ready-coin { cursor: pointer; }
.sho-board .ready-coin .coin-num { font-size: 20px; }
.sho-board .ready-coin.arriving .pick-ring { opacity: 0; }
.sho-board.replaying .ready-coin { visibility: hidden; }

/* coin counter in the top bar: flashes when a game pays out (or takes an entry) */
.coin-chip { transition: box-shadow .3s, background-color .3s; }
.coin-chip.chip-up { background: #fff3c4; box-shadow: 0 0 0 3px rgba(46, 160, 67, .45); animation: chipPop .5s ease; }
.coin-chip.chip-down { box-shadow: 0 0 0 3px rgba(207, 34, 46, .4); animation: chipPop .5s ease; }
@keyframes chipPop { 50% { transform: scale(1.15); } }
.win-coins.lost { color: #cf222e; }
.win-balance { margin-top: .4rem; font-size: .95rem; color: #5b4a44; }

/* ==================================================================
   Promotion slider (home page) - posters, flyers, videos, YouTube
   ================================================================== */
.promo-slider { position: relative; }
.promo-carousel { border-radius: 1rem; overflow: hidden; background: #1f1513; box-shadow: 0 6px 22px rgba(60, 30, 20, .18); }
.promo-stage { position: relative; aspect-ratio: 16 / 9; max-height: 460px; width: 100%; overflow: hidden; background: #1f1513; }
@media (min-width: 768px) { .promo-stage { aspect-ratio: 21 / 8; } }
/* A blurred copy of the poster fills the empty sides, so tall flyers and odd sizes look intended. */
.promo-bg { position: absolute; inset: -24px; background-size: cover; background-position: center; filter: blur(22px) brightness(.55) saturate(1.2); transform: scale(1.08); }
.promo-media { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
video.promo-media { background: #000; }
.promo-hit { position: absolute; inset: 0; z-index: 2; }
.promo-tag { position: absolute; top: .6rem; left: .6rem; z-index: 4; font: 700 .68rem/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
    color: #3b2a12; background: rgba(255, 214, 102, .92); padding: .3rem .45rem; border-radius: .35rem; pointer-events: none; }
.promo-carousel .carousel-item { position: relative; }
.promo-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: flex-end; gap: .75rem; padding: 2.2rem 1rem .9rem;
    background: linear-gradient(to top, rgba(20, 10, 8, .85), rgba(20, 10, 8, .5) 55%, transparent); color: #fff; pointer-events: none; }
.promo-strip a { pointer-events: auto; }
@media (min-width: 576px) { .promo-strip.phone-only { display: none; } }
.promo-text { min-width: 0; flex: 1; }
.promo-title { font-weight: 800; font-size: clamp(1rem, 2.4vw, 1.45rem); line-height: 1.2; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.promo-caption { font-size: clamp(.8rem, 1.7vw, 1rem); opacity: .92; margin-top: .15rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.promo-btn { flex: none; font-weight: 700; white-space: nowrap; }
.promo-carousel .carousel-indicators { z-index: 5; top: .85rem; bottom: auto; margin: 0 4.5rem; }   /* top centre: clear of the text, button and arrows */
.promo-carousel .carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 50%; border: 0; margin: 0 4px; opacity: .55; }
.promo-carousel .carousel-indicators .active { opacity: 1; background: #ffd166; }
.promo-carousel .carousel-control-prev, .promo-carousel .carousel-control-next { width: 3.2rem; z-index: 5; opacity: 1; }
.promo-arrow { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: rgba(0, 0, 0, .38); color: #fff; font-size: 1.1rem; transition: background .2s; }
.promo-carousel .carousel-control-prev:hover .promo-arrow, .promo-carousel .carousel-control-next:hover .promo-arrow { background: rgba(0, 0, 0, .6); }
.promo-pause, .promo-sound { position: absolute; top: .5rem; z-index: 6; width: 2rem; height: 2rem; border-radius: 50%; border: 0; display: grid; place-items: center;
    background: rgba(0, 0, 0, .42); color: #fff; font-size: 1rem; }
.promo-pause { right: .5rem; }
.promo-sound { right: 2.9rem; }
.promo-carousel[data-many="0"] .promo-sound { right: .5rem; }
.promo-pause:focus-visible, .promo-sound:focus-visible, .promo-yt:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
.promo-yt { position: relative; z-index: 1; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.promo-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 4.2rem; height: 3rem; border-radius: .9rem; background: #ff0033;
    color: #fff; display: grid; place-items: center; font-size: 2rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: transform .15s; }
.promo-yt:hover .promo-play { transform: translate(-50%, -50%) scale(1.08); }
.promo-yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
@media (max-width: 575.98px) {
    .promo-carousel { border-radius: .8rem; }
    /* Phones: the text goes under the picture, so it never hides part of a poster. */
    .promo-strip { position: static; padding: .6rem .75rem .7rem; gap: .5rem; align-items: center; background: #2a1814; }
    .promo-title { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .promo-strip { min-height: 3.9rem; }
    .promo-caption { -webkit-line-clamp: 1; font-size: .8rem; }
    .promo-btn { padding: .2rem .6rem; font-size: .8rem; }
    .promo-carousel .carousel-control-prev, .promo-carousel .carousel-control-next { display: none; }   /* swipe on phones */
}
@media (prefers-reduced-motion: reduce) { .promo-carousel .carousel-item { transition: none; } }

/* Admin: promotions list and form */
.promo-row { display: flex; gap: .8rem; align-items: center; padding: .7rem 0; border-top: 1px solid #f0e6d6; }
.promo-row:first-of-type { border-top: 0; }
.promo-row.is-editing { background: #fff8e6; margin: 0 -.6rem; padding: .7rem .6rem; border-radius: .6rem; }
.promo-thumb { position: relative; flex: none; width: 112px; aspect-ratio: 16 / 9; border-radius: .5rem; overflow: hidden; background: #2a1d1a; }
.promo-thumb img, .promo-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-kind { position: absolute; right: .25rem; bottom: .25rem; background: rgba(0, 0, 0, .6); color: #fff; border-radius: .3rem; font-size: .75rem; padding: 0 .3rem; }
.promo-kind.yt { background: #ff0033; }
.promo-info { flex: 1; min-width: 0; }
.promo-actions { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; max-width: 180px; }
.promo-preview img, .promo-preview video { max-width: 100%; max-height: 220px; border-radius: .5rem; display: block; background: #000; }
@media (max-width: 575.98px) {
    .promo-row { flex-wrap: wrap; }
    .promo-thumb { width: 96px; }
    .promo-actions { max-width: none; width: 100%; justify-content: flex-start; }
}

/* Sign-up and My account */
.gender-choice { display: flex; flex-wrap: wrap; gap: .4rem; }
.gender-choice .btn { border-radius: 999px; }
.account-nudge { display: flex; gap: .6rem; align-items: center; }
.otp-input { font: 700 1.6rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .5em; text-align: center; max-width: 14rem; }

/* ==================================================================
   Tournaments
   ================================================================== */
.tourney-hero { background: linear-gradient(135deg, #5a1414, #8d2a1e 60%, #b8741a); color: #fff; border-radius: 1rem; padding: 1.1rem 1.25rem; box-shadow: 0 6px 22px rgba(90, 20, 20, .2); }
.tourney-hero .btn-icon { background: rgba(255, 255, 255, .15); color: #fff; }
.tourney-desc { opacity: .92; max-width: 60rem; }
.tourney-card { border: 1px solid #eee2cf; border-radius: 1rem; color: inherit; transition: transform .15s, box-shadow .15s; }
.tourney-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(90, 40, 20, .1); color: inherit; }
.tourney-facts { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .85rem; color: #6b5a4a; }
.tourney-facts .coin-icon, .tp-state .coin-icon { width: .9em; height: .9em; vertical-align: -.1em; }
.tourney-stats b { display: block; font-size: 1.25rem; line-height: 1.1; }
.tourney-stats span { font-size: .75rem; color: #7a6a55; text-transform: uppercase; letter-spacing: .04em; }
.prize-rows > div { display: flex; justify-content: space-between; padding: .4rem 0; border-top: 1px dashed #eadfcd; }
.tourney-action .btn-lg { font-weight: 700; }
.tourney-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .4rem; }
.tp { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem .7rem; border-radius: .6rem; background: #faf6ef; font-size: .9rem; }
.tp.me { outline: 2px solid #e0a52a; }
.tp-out { opacity: .6; }
.tp-champion { background: #fff3c4; font-weight: 700; }
.tp-state { white-space: nowrap; color: #6b5a4a; font-size: .82rem; }
.tourney-flash { animation: tourneyFlash .8s ease; }
@keyframes tourneyFlash { from { opacity: .55; } to { opacity: 1; } }
.tourney-tag { color: #b8741a; font-weight: 700; text-decoration: none; }
.tourney-strip { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; border-radius: .9rem; text-decoration: none; color: #fff;
    background: linear-gradient(90deg, #6a1717, #a5501c); box-shadow: 0 4px 14px rgba(90, 20, 20, .18); }
.tourney-strip:hover { color: #fff; filter: brightness(1.05); }
.tourney-strip-icon { font-size: 1.6rem; }
.admin-tourney-row { display: flex; align-items: center; gap: .6rem; justify-content: space-between; padding: .65rem .2rem; border-top: 1px solid #f0e6d6; color: inherit; text-decoration: none; }
.admin-tourney-row:hover { background: #fffaf0; }
.min-w-0 { min-width: 0; }
.flex-none { flex: none; }

/* Bracket: rounds side by side; matches spread out so each pair lines up with the match it feeds */
.bracket { display: flex; gap: 1.6rem; overflow-x: auto; padding: .25rem .25rem 1rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.bracket:focus-visible { outline: 3px solid #e0a52a; border-radius: .5rem; }
.bracket-round { flex: 0 0 210px; display: flex; flex-direction: column; scroll-snap-align: start; }
.bracket-round-name { font: 700 .75rem/1.2 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #8a6d3b; text-align: center; margin-bottom: .6rem; }
.bracket-matches { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: .8rem; }
.bracket-match { position: relative; background: #fff; border: 1px solid #eadfcd; border-radius: .7rem; padding: .45rem .55rem .5rem; box-shadow: 0 2px 6px rgba(60, 40, 20, .05); }
.bracket-round:not(.bracket-champion) .bracket-match::after { content: ''; position: absolute; right: -1.6rem; top: 50%; width: 1.6rem; border-top: 2px solid #e2d3bb; }
.bracket-match.is-mine { border-color: #e0a52a; box-shadow: 0 0 0 2px rgba(224, 165, 42, .35); }
.bracket-match.is-live { background: #fffaf0; }
.bm-head { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; color: #8a7a66; margin-bottom: .25rem; }
.bm-chip { padding: .05rem .4rem; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.chip-live { background: #fde7c2; color: #8a4b00; }
.chip-done { background: #e6f2e7; color: #2d6a35; }
.chip-wait { background: #f1ece4; color: #7a6a55; }
.chip-bye { background: #eef0f4; color: #5c6370; }
.bm-player { display: flex; justify-content: space-between; align-items: center; gap: .4rem; padding: .25rem .35rem; border-radius: .4rem; font-size: .88rem; }
.bm-player + .bm-player { border-top: 1px solid #f3ece1; }
.bm-player.won { font-weight: 800; color: #2d6a35; }
.bm-player.won .bi { color: #2d9c48; }
.bm-player.lost { color: #9a8f82; text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
.bm-player.tbd { color: #a99c8c; font-style: italic; font-size: .8rem; }
.bm-player.me { background: #fff3d6; }
.bm-you { font: 700 .62rem/1 system-ui, sans-serif; text-transform: uppercase; background: #e0a52a; color: #fff; padding: .12rem .3rem; border-radius: .3rem; vertical-align: .1em; }
.bm-admin { display: grid; gap: .25rem; margin-top: .4rem; padding-top: .35rem; border-top: 1px dashed #eadfcd; }
.bm-admin-head { display: flex; justify-content: space-between; font-size: .7rem; color: #8a7a66; }
.bm-admin-head a { text-decoration: none; }
.bm-admin .btn { width: 100%; font-size: .74rem; padding: .15rem .4rem; display: flex; justify-content: center; gap: .25rem; min-width: 0; }
.bm-admin .btn .text-truncate { max-width: 70%; }
.champion-card { text-align: center; background: linear-gradient(180deg, #fff8e1, #fff); border: 2px dashed #e7cf8f; border-radius: .9rem; padding: .9rem .6rem; }
.champion-card.has-champion { border-style: solid; border-color: #e0a52a; box-shadow: 0 6px 18px rgba(224, 165, 42, .25); }
.champion-trophy { font-size: 2rem; }
.bracket-champion { flex-basis: 170px; }
@media (max-width: 575.98px) {
    .bracket { gap: 1.1rem; margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem; }
    .bracket-round { flex-basis: 180px; }
    .bracket-round:not(.bracket-champion) .bracket-match::after { right: -1.1rem; width: 1.1rem; }
    .tourney-hero { padding: .9rem; }
}

/* A full menu on 1200-1399 px screens: three links show only their icon (the name is in the tooltip) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .sho-nav .nav-compact .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sho-nav .nav-compact { padding-left: .55rem; padding-right: .55rem; font-size: 1.05rem; }
}

/* =====================================================================
   Version 10: preloader, in-development notice, beginner guide, donations, wallet
   ===================================================================== */

/* ---------- Preloader: the logo, with two glowing arcs turning opposite ways ---------- */
.sho-preloader { display: none; }
.sho-loading .sho-preloader {
    display: flex; position: fixed; inset: 0; z-index: 3000; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: radial-gradient(circle at 50% 42%, rgba(122, 31, 31, .7) 0%, rgba(86, 20, 20, .7) 45%, rgba(42, 10, 10, .7) 100%);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.sho-preloader.is-hiding { display: flex; position: fixed; inset: 0; z-index: 3000; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: radial-gradient(circle at 50% 42%, rgba(122, 31, 31, .7) 0%, rgba(86, 20, 20, .7) 45%, rgba(42, 10, 10, .7) 100%);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.sho-preloader-mark { position: relative; width: 160px; height: 160px; }
.sho-orbit { position: absolute; inset: 0; width: 160px; height: 160px; overflow: visible; }
.sho-orbit-a { animation: sho-spin 1.15s linear infinite; }
.sho-orbit-b { animation: sho-spin-back .9s linear infinite; }
@keyframes sho-spin { to { transform: rotate(360deg); } }
@keyframes sho-spin-back { to { transform: rotate(-360deg); } }
.sho-preloader-logo {
    position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; transform: translate(-50%, -50%); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 40% 35%, #8e2a2a, #4a1010); border: 2px solid rgba(212, 160, 23, .75);
    box-shadow: 0 0 0 6px rgba(212, 160, 23, .12), 0 0 28px rgba(243, 210, 122, .35), inset 0 -6px 14px rgba(0, 0, 0, .35);
    animation: sho-breathe-logo 1.8s ease-in-out infinite;
}
.sho-preloader-logo .sho-logo { font-size: 2.6rem; text-shadow: 0 0 14px rgba(243, 210, 122, .55); }
.sho-preloader-name { color: #f3d27a; font-weight: 700; letter-spacing: .5em; padding-left: .5em; font-size: .95rem; opacity: .9; }
@keyframes sho-breathe-logo { 50% { box-shadow: 0 0 0 9px rgba(212, 160, 23, .08), 0 0 40px rgba(243, 210, 122, .5), inset 0 -6px 14px rgba(0, 0, 0, .35); } }
@media (prefers-reduced-motion: reduce) {
    .sho-orbit-a { animation-duration: 3s; }
    .sho-orbit-b { animation-duration: 3s; }
    .sho-preloader-logo { animation: none; }
}

/* ---------- In-development notice ---------- */
.dev-notice { background: repeating-linear-gradient(-45deg, #2b2118 0 14px, #352a1f 14px 28px); color: #f6ead2; font-size: .86rem; padding: .45rem 0; border-bottom: 2px solid var(--sho-gold); }
.dev-notice-badge { background: var(--sho-gold); color: #2b2118; font-weight: 700; border-radius: 999px; padding: .1rem .6rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.dev-notice.d-none { display: none; }

/* ---------- Beginner guide ---------- */
.guide-page { max-width: 1040px; }
.guide-progress { height: 6px; background: #eadfc8; }
.guide-progress .progress-bar { background: linear-gradient(90deg, var(--sho-gold), var(--sho-maroon)); transition: width .35s ease; }
.guide-step { margin-bottom: 1rem; }
.guide-js .guide-step { display: none; margin-bottom: 0; }
.guide-js .guide-step.active { display: block; animation: guide-in .35s ease; }
@keyframes guide-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .guide-js .guide-step.active { animation: none; } }
.guide-art { width: 100%; height: auto; max-height: 260px; background: radial-gradient(circle at 50% 45%, #fffaf0, #f3e8d2); border-radius: 18px; padding: 8px; }
.guide-list { list-style: none; padding: 0; }
.guide-list li { display: flex; gap: .6rem; align-items: baseline; padding: .3rem 0; }
.guide-list li i { color: var(--sho-maroon); }
.guide-table td, .guide-table th { font-size: .92rem; }
.guide-dots { display: flex; gap: 6px; }
.guide-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: #d8c8a8; transition: transform .2s, background .2s; }
.guide-dots button.active { background: var(--sho-maroon); transform: scale(1.35); }
.guide-step h2:focus { outline: none; }

/* ---------- Wallet ---------- */
.wallet-tabs .nav-link { color: var(--sho-maroon); font-weight: 600; }
.wallet-tabs .nav-link.active { background: var(--sho-maroon); color: #fff; }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--sho-maroon); color: #fff; font-size: .85rem; margin-right: .35rem; }
.you-get { background: #fff8e6; border: 1px dashed var(--sho-gold); border-radius: 12px; padding: .6rem .9rem; }
.pay-method { display: flex; flex-direction: column; gap: 2px; padding: .8rem .9rem; border: 2px solid #e6d9bf; border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pay-method i { font-size: 1.4rem; color: var(--sho-maroon); }
.btn-check:checked + .pay-method { border-color: var(--sho-maroon); box-shadow: 0 0 0 3px rgba(122, 31, 31, .12); }
.btn-check:disabled + .pay-method { opacity: .55; cursor: not-allowed; background: #f6f1e7; }
.btn-check:focus-visible + .pay-method { outline: 3px solid var(--sho-gold); }
.pay-box { background: #fbf6ec; border: 1px solid #e6d9bf; border-radius: 14px; padding: .9rem 1rem; }
.pay-detail { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; border-bottom: 1px dashed #e6d9bf; }
.pay-detail:last-child { border-bottom: 0; }
.pay-detail-label { min-width: 8.5rem; color: #7c6a52; font-size: .85rem; }
.pay-detail-value { font-weight: 700; font-variant-numeric: tabular-nums; word-break: break-all; }

/* ---------- Donations ---------- */
.donate-hero { background: linear-gradient(135deg, var(--sho-maroon-dark), var(--sho-maroon)); color: #fff; border-radius: 20px; padding: 1.6rem; border-bottom: 4px solid var(--sho-gold); }
.donate-hero .lead { color: #f6ead2; }
.donor-wall { display: flex; flex-wrap: wrap; gap: .5rem; }
.donor-chip { background: #fff; border: 1px solid #e6d9bf; border-radius: 999px; padding: .3rem .8rem; font-size: .9rem; }
.donor-chip i { color: #c0392b; }
.wallet-row { border: 1px solid #e6d9bf; border-radius: 14px; padding: .8rem 1rem; margin-bottom: .7rem; background: #fff; }
.wallet-row.is-pending { border-left: 5px solid var(--sho-gold); background: #fffdf6; }
.sticky-save { position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 8px); z-index: 5; }
@media (min-width: 992px) { .sticky-save { bottom: 12px; } }
@media (max-width: 575.98px) {
    .dev-notice { font-size: .76rem; padding: .3rem 0; }
    .dev-notice .container { align-items: flex-start !important; }
}

/* =====================================================================
   Version 11: avatars, friends, chat, invitations, notifications
   ===================================================================== */
.avatar { border-radius: 50%; object-fit: cover; flex: none; display: inline-block; background: #eee; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.18); }
.avatar-ini { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.avatar-nav { box-shadow: 0 0 0 2px var(--sho-gold); }
.avatar-xl { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sho-gold), 0 6px 16px rgba(0,0,0,.15); }
.avatar-edit-pic { position: relative; }

/* top bar icons with counters */
.nav-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
    color: #f6e7c8; background: rgba(255,255,255,.08); border: 0; font-size: 1.1rem; text-decoration: none; transition: background .2s; }
.nav-ico:hover, .nav-ico:focus-visible, .nav-ico[aria-expanded="true"] { background: rgba(255,255,255,.2); color: #fff; }
.nav-badge { position: absolute; top: -3px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e03131; color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--sho-maroon-dark); }
.nav-badge[hidden] { display: none; }
.notify-menu { width: min(380px, 94vw); padding: 0; border-radius: 14px; overflow: hidden; }
.notify-list { max-height: 60vh; overflow-y: auto; }
.notify-item { display: flex; gap: .65rem; padding: .65rem .9rem; color: inherit; text-decoration: none; border-bottom: 1px solid #f1e8d6; }
.notify-item:hover { background: #fbf6ec; }
.notify-item.unread { background: #fff8e6; }
.notify-item.unread .notify-title::after, .notify-row.unread .notify-title::after { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e03131; margin-left: .4rem; vertical-align: middle; }
.notify-title { display: block; font-weight: 600; font-size: .92rem; }
.notify-body { display: block; font-size: .84rem; color: #6b5b45; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notify-time { display: block; font-size: .74rem; color: #9a8a73; margin-top: 2px; }
.notify-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #8a7b66; }
.notify-friend_request, .notify-friend_accepted { background: #1d5fa8; }
.notify-game_invite, .notify-invite_reply { background: #2e7d32; }
.notify-chat { background: #6a3fa0; }
.notify-wallet { background: #b7791f; }
.notify-system { background: var(--sho-maroon); }
.notify-ok { background: #2e7d32; } .notify-warn { background: #c0392b; }
.notify-row { display: flex; align-items: flex-start; gap: .75rem; padding: .8rem 1rem; border-bottom: 1px solid #f1e8d6; }
.notify-row.unread { background: #fffaf0; }
.notify-filters { display: flex; flex-wrap: wrap; gap: .35rem; }

/* pop-ups: notifications (bottom left) and game invitations (bottom right) */
.note-dock, .invite-dock { position: fixed; z-index: 2100; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.note-dock { left: 12px; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px); width: min(360px, calc(100vw - 24px)); }
.invite-dock { right: 12px; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px); width: min(340px, calc(100vw - 24px)); }
@media (min-width: 992px) { .note-dock, .invite-dock { bottom: 16px; } }
.note-toast, .invite-card { pointer-events: auto; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(43,33,24,.25); animation: pop-in .3s ease; }
.invite-card { padding: .85rem; border: 2px solid #2e7d32; }
@keyframes pop-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .note-toast, .invite-card { animation: none; } }

/* lists of players */
.online-row { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid #f1e8d6; }
.online-row:last-child { border-bottom: 0; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2fb344; margin-right: .35rem; vertical-align: middle; }
.status-dot.waiting { background: #f59f00; } .status-dot.playing { background: #1d5fa8; } .status-dot.off { background: #c9bda8; }
.online-pip { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #2fb344; box-shadow: 0 0 0 2px #fff; }
.queue-online { max-height: 70vh; overflow-y: auto; }
.social-page .wallet-tabs .badge { font-size: .7rem; }

/* messages */
.chat-side { max-height: 76vh; overflow-y: auto; }
.convo { display: flex; align-items: center; gap: .65rem; padding: .55rem .5rem; border-radius: 12px; color: inherit; text-decoration: none; }
.convo:hover { background: #fbf6ec; } .convo.active { background: #fff1d6; }
.chat-main { display: flex; flex-direction: column; height: min(76vh, 720px); padding: 0; overflow: hidden; }
.chat-head { padding: .75rem 1rem; border-bottom: 1px solid #f1e8d6; }
.chat-list { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .4rem; background: #fdf9f1; }
.chat-msg { display: flex; align-items: flex-end; gap: .4rem; max-width: 82%; }
.chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-bubble { background: #fff; border: 1px solid #eadfc8; border-radius: 16px 16px 16px 4px; padding: .45rem .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); min-width: 0; }
.chat-msg.mine .chat-bubble { background: var(--sho-maroon); color: #fff; border-color: var(--sho-maroon); border-radius: 16px 16px 4px 16px; }
.chat-text { white-space: normal; overflow-wrap: anywhere; }
.chat-name { font-size: .72rem; font-weight: 700; color: var(--sho-maroon); }
.chat-time { font-size: .68rem; opacity: .6; text-align: right; }
.chat-form { display: flex; gap: .5rem; align-items: flex-end; padding: .6rem; border-top: 1px solid #f1e8d6; background: #fff; }
.chat-form textarea { resize: none; max-height: 120px; }

/* table talk on the game board */
.game-chat-fab { position: fixed; right: 14px; bottom: calc(14px + var(--safe-bottom)); z-index: 1040; width: 54px; height: 54px; border-radius: 50%; border: 3px solid #fffcf5;
    background: linear-gradient(145deg, var(--sho-gold), #b7791f); color: #fff; font-size: 1.35rem; box-shadow: 0 8px 20px rgba(86,20,20,.35); }
.game-chat-fab .nav-badge { box-shadow: 0 0 0 2px #fffcf5; }
.game-chat { position: fixed; right: 12px; bottom: calc(78px + var(--safe-bottom)); z-index: 1041; width: min(360px, calc(100vw - 24px)); height: min(460px, 62vh);
    display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 16px 40px rgba(43,33,24,.3); overflow: hidden;
    transform: translateY(20px) scale(.96); opacity: 0; visibility: hidden; transition: transform .2s, opacity .2s, visibility 0s linear .2s; }
.game-chat.open { transform: none; opacity: 1; visibility: visible; transition: transform .2s, opacity .2s; }
.game-chat-head { padding: .6rem .8rem; border-bottom: 1px solid #f1e8d6; }
.game-chat .chat-list { padding: .7rem; }
.game-chat .chat-msg { max-width: 92%; }
.quick-chat { display: flex; gap: .3rem; overflow-x: auto; padding: .4rem .6rem 0; scrollbar-width: none; }
.quick-chat .btn { white-space: nowrap; border-radius: 999px; font-size: .78rem; border: 1px solid #eadfc8; }
.nav-social .dropdown { position: relative; }
.nav-social .notify-menu { right: 0; left: auto; margin-top: 8px; }



/* =====================================================================
   Version 12 - notifications that fit small phones
   ===================================================================== */
:root { --safe-top: env(safe-area-inset-top, 0px); --nav-bottom: 60px; }

/* Pop-up notifications: compact cards with a close button. Phones: at the top of the screen (clear of the tab bar
   and the game's action dock). Large screens: bottom left, as before. */
.note-dock { z-index: 2110; }
.note-toast { position: relative; display: flex; align-items: stretch; background: #fff; border-radius: 14px; overflow: hidden;
    border-left: 4px solid var(--sho-gold); box-shadow: 0 10px 28px rgba(43, 33, 24, .22), 0 0 0 1px rgba(43, 33, 24, .05);
    transition: opacity .3s ease, transform .3s ease; touch-action: pan-y; }
.note-toast.out { opacity: 0; transform: translateY(8px); }
.note-main { flex: 1; min-width: 0; display: flex; gap: .6rem; align-items: center; padding: .6rem .25rem .6rem .7rem; color: inherit; text-decoration: none; }
a.note-main:hover { color: inherit; background: #fffaf0; }
.note-toast .notify-ico { width: 32px; height: 32px; font-size: .95rem; }
.note-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.note-title { font-weight: 600; font-size: .88rem; line-height: 1.25; color: var(--sho-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.note-body { font-size: .8rem; line-height: 1.3; color: #6b5b45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.note-close { flex: none; width: 40px; border: 0; background: transparent; color: #9a8a73; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.note-close:hover, .note-close:focus-visible { color: var(--sho-ink); background: #f6f0e4; }
@media (max-width: 991.98px) {
    .note-dock { top: calc(var(--safe-top) + 8px); bottom: auto; left: 8px; right: 8px; width: auto; max-width: 480px; margin: 0 auto; }
    .note-toast { animation: note-drop .28s ease; }
    .note-toast.out { transform: translateY(-10px); }
    /* invitations: bottom, above the tab bar, or above the action dock on the game board */
    .invite-dock { left: 8px; right: 8px; width: auto; max-width: 480px; margin: 0 auto; max-height: 55vh; overflow-y: auto; }
    .play-body .invite-dock { bottom: calc(var(--dock-h) + var(--safe-bottom) + 10px); }
}
@keyframes note-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.invite-card { box-shadow: 0 10px 28px rgba(43, 33, 24, .25); }
.invite-card .fw-bold { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .note-toast { animation: none; transition: none; } }

/* The bell's list. Phones: a sheet right under the top bar that always fits on the screen. */
.notify-menu { display: none; }
.notify-menu.show { display: flex; flex-direction: column; }
.notify-menu .notify-list { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.notify-item .notify-title { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .nav-social .notify-menu.show { position: fixed !important; top: calc(var(--nav-bottom) + 6px) !important; left: 8px !important; right: 8px !important;
        width: auto; margin: 0 !important; transform: none !important; inset: calc(var(--nav-bottom) + 6px) 8px auto 8px !important;
        max-height: calc(100vh - var(--nav-bottom) - var(--tabbar-h) - var(--safe-bottom) - 18px);
        max-height: calc(100dvh - var(--nav-bottom) - var(--tabbar-h) - var(--safe-bottom) - 18px); }
    .play-body .nav-social .notify-menu.show { max-height: calc(100dvh - var(--nav-bottom) - 18px); }
    .notify-menu .notify-list { max-height: none; }
    .notify-item { padding: .6rem .75rem; }
    .notify-item .notify-ico { width: 32px; height: 32px; }
    .notify-title { font-size: .88rem; }
}

/* Notifications page */
.notify-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.notify-head h1 { margin-right: auto; }
.notify-tools { display: flex; gap: .35rem; flex-wrap: wrap; }
.notify-actions { display: flex; gap: .15rem; flex-shrink: 0; }
.notify-actions .btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.notify-row .notify-title, .notify-row .notify-body { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .notify-head h1 { font-size: 1.35rem; width: 100%; }
    .notify-tools .btn span { display: none; }              /* icon buttons on phones, names on hover/long-press */
    .notify-tools .btn { width: 38px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
    .notify-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -12px; margin-right: -12px; padding: 0 12px 2px;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent); }
    .notify-filters::-webkit-scrollbar { display: none; }
    .notify-filters .btn { white-space: nowrap; flex: none; border-radius: 999px; }
    .notify-row { padding: .7rem .75rem; gap: .6rem; }
    .notify-row .notify-ico { width: 32px; height: 32px; }
}

/* =====================================================================
   Version 12 - games on the platform
   ===================================================================== */
.game-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.game-card { --game-color: var(--sho-maroon); --game-accent: var(--sho-gold);
    display: flex; flex-direction: column; background: #fff; border: 1px solid #eee4d3; border-radius: 1.1rem; overflow: hidden;
    color: inherit; text-decoration: none; box-shadow: 0 4px 16px rgba(60, 40, 20, .06); transition: transform .15s ease, box-shadow .2s ease; }
.game-card:hover { color: inherit; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(60, 40, 20, .12); }
.game-card:active { transform: scale(.99); }
.game-card-art { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3;
    background: radial-gradient(circle at 30% 10%, color-mix(in srgb, var(--game-color) 70%, #fff), var(--game-color)); color: var(--game-accent); }
.game-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-card-art > .bi { font-size: 4rem; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.game-card.is-soon .game-card-art { filter: grayscale(.55) brightness(.9); }
.game-card-flag { position: absolute; left: .6rem; top: .6rem; background: rgba(0, 0, 0, .55); color: #fff; font-size: .72rem; font-weight: 700;
    padding: .2rem .55rem; border-radius: 999px; backdrop-filter: blur(4px); }
.game-card-flag.flag-live { background: rgba(20, 90, 40, .75); }
.game-card-flag.flag-admin { background: rgba(120, 70, 0, .85); }
.game-card-body { display: flex; flex-direction: column; gap: .2rem; padding: .8rem .9rem .9rem; }
.game-card-name { font-weight: 800; font-size: 1.1rem; color: var(--sho-ink); }
.game-card-native { font-family: 'Noto Serif Tibetan', serif; color: var(--game-color); font-weight: 600; }
.game-card-tag { font-size: .88rem; color: #6b5b45; }
.game-card-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.game-card-meta span { font-size: .72rem; font-weight: 600; color: #6b5b45; background: #f6f0e4; border-radius: 999px; padding: .12rem .5rem; }

.game-hero { --game-color: var(--sho-maroon); --game-accent: var(--sho-gold);
    display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1rem; border-radius: 1.25rem; color: #fff; overflow: hidden;
    background: radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--game-color) 75%, #fff), var(--game-color) 60%, color-mix(in srgb, var(--game-color) 70%, #000));
    border-bottom: 4px solid var(--game-accent); }
.game-hero-art { display: flex; align-items: center; justify-content: center; border-radius: 1rem; overflow: hidden; background: rgba(0,0,0,.12); aspect-ratio: 4 / 3; max-height: 260px; }
.game-hero-art img { width: 100%; height: 100%; object-fit: cover; }
.game-hero-art > .bi { font-size: 5rem; color: var(--game-accent); }
.game-hero-kicker { color: var(--game-accent); }
.game-hero-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .88rem; opacity: .9; }
@media (min-width: 768px) { .game-hero { grid-template-columns: 5fr 7fr; padding: 1.5rem; gap: 1.5rem; align-items: center; } .game-hero-art { order: 2; max-height: none; } }
.game-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: .5rem; }
.game-link { display: flex; align-items: center; gap: .55rem; padding: .7rem .85rem; background: #fff; border: 1px solid #eee4d3; border-radius: .9rem;
    color: var(--sho-ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.game-link:hover { border-color: var(--sho-gold); color: var(--sho-maroon); }
.game-link .bi { color: var(--sho-maroon); font-size: 1.1rem; }
@supports not (background: color-mix(in srgb, red, blue)) {
    .game-card-art, .game-hero { background: var(--game-color); }
}

/* Admin → Games catalog */
.catalog-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid #f1e8d6; }
.catalog-row:last-child { border-bottom: 0; }
.catalog-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; flex: none; }
.catalog-controls { display: flex; flex-direction: column; gap: .4rem; width: 100%; }
@media (min-width: 768px) { .catalog-controls { width: 320px; } }

/* Small screens: the brand never pushes the top-bar icons off the screen */
.brand-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
@media (max-width: 359.98px) { .brand-name { display: none; } .nav-ico { width: 34px; height: 34px; } }
/* Phones: games as a compact list (picture left, text right), so several games fit on one screen */
@media (max-width: 575.98px) {
    .game-grid { grid-template-columns: 1fr; gap: .6rem; }
    .game-card { flex-direction: row; border-radius: 1rem; }
    .game-card-art { flex: 0 0 112px; aspect-ratio: auto; min-height: 112px; }
    .game-card-art > .bi { font-size: 2.6rem; }
    .game-card-flag { left: .35rem; top: .35rem; font-size: .65rem; padding: .12rem .4rem; }
    .game-card-body { justify-content: center; padding: .6rem .75rem; min-width: 0; }
    .game-card-name { font-size: 1rem; }
    .game-card-tag { font-size: .82rem; }
    .game-hero-art { max-height: 190px; }
    .notify-row .notify-actions { flex-direction: column; }
}
/* Large screens: the menu shrinks to make room, so the friends / messages / bell icons always stay on screen */
@media (min-width: 1200px) {
    .sho-nav > .container { flex-wrap: nowrap; }
    .sho-nav .navbar-collapse { flex: 1 1 0%; min-width: 0; }
    .sho-nav .navbar-nav { flex-wrap: nowrap; min-width: 0; }
    .sho-nav .nav-social { flex: none; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .sho-nav .navbar-nav .nav-link { padding-left: .4rem; padding-right: .4rem; }
    .sho-nav .navbar-nav .nav-link:not(.nav-compact) { font-size: .92rem; }
}
/* Tab bar labels never push past the screen edge on narrow phones */
.tabbar a { min-width: 0; }
.tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
@media (max-width: 359.98px) { .tabbar a { font-size: .66rem; } }
.guide-js { overflow-x: clip; }

/* Version 12.1: profile pictures in the top bar (phones) and on the game board */
.nav-me { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; text-decoration: none; flex: none; }
.nav-me .avatar { object-fit: cover; border-radius: 50%; }
.avatar { object-fit: cover; }
.pchip-dot { overflow: hidden; }
.pchip-dot img, .avatar-sm img, .win-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar-sm, .win-avatar { overflow: hidden; }
.avatar .av-pic { pointer-events: none; }
@media (max-width: 359.98px) { .nav-me { width: 34px; height: 34px; } .nav-me .avatar { width: 28px !important; height: 28px !important; } }

/* Messages on the board ("… ran out of time, so the computer played") wrap instead of running off a phone screen */
.turn-toast { white-space: normal; text-align: center; max-width: calc(100% - 24px); width: max-content; line-height: 1.3; border-radius: 16px; }
@media (max-width: 575.98px) { .turn-toast { font-size: .82rem; padding: .4rem .8rem; } }

/* Admin → Overview: are uploaded pictures served? */
.upload-check { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .85rem; border-radius: .9rem; font-size: .9rem; border: 1px solid #eee4d3; background: #fff; }
.upload-check .bi { font-size: 1.1rem; line-height: 1.3; }
.upload-check[data-state="ok"] { border-color: #b7dfc2; background: #f1faf3; } .upload-check[data-state="ok"] .bi { color: #2e7d32; }
.upload-check[data-state="fail"] { border-color: #f1b8b0; background: #fff3f1; } .upload-check[data-state="fail"] .bi { color: #c0392b; }

/* ---------- Version 13: the dice pop-up (public/assets/js/dice-roll.js), Sho and Ludo ---------- */
.droll-layer { position: fixed; inset: 0; z-index: 1070; pointer-events: none; display: none; }
.droll-layer.show { display: block; }
.droll-row { --droll: 74px; --droll-glow: #ffd54a; position: fixed; display: flex; gap: calc(var(--droll) * .45); transform: translate(-50%, -50%);
    perspective: 700px; transition: opacity .25s ease, transform .25s ease; }
.droll-row.out { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.droll-die { position: relative; width: var(--droll); height: var(--droll); animation: drollIn .82s cubic-bezier(.2,.8,.3,1) both; }
.droll-die::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -22%; height: 16%; border-radius: 50%;
    background: radial-gradient(rgba(0, 0, 0, .45), transparent 70%); animation: drollShadow .82s ease-out both; }
.droll-cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.droll-face { position: absolute; inset: 0; border-radius: 16%; background: linear-gradient(145deg, #ffffff, #ece5d6);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06), inset 0 -6px 10px rgba(0, 0, 0, .08); display: grid; grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr); padding: 13%; backface-visibility: hidden; }
.droll-face i { border-radius: 50%; margin: 12%; }
.droll-face i.on { background: radial-gradient(circle at 35% 35%, #5b4a3a, #1d140c); }
.droll-face.one i.on { background: radial-gradient(circle at 35% 35%, #f0605a, #a3120d); margin: 0; }
.droll-front  { transform: translateZ(calc(var(--droll) / 2)); }
.droll-back   { transform: rotateY(180deg) translateZ(calc(var(--droll) / 2)); }
.droll-right  { transform: rotateY(90deg) translateZ(calc(var(--droll) / 2)); }
.droll-left   { transform: rotateY(-90deg) translateZ(calc(var(--droll) / 2)); }
.droll-top    { transform: rotateX(90deg) translateZ(calc(var(--droll) / 2)); }
.droll-bottom { transform: rotateX(-90deg) translateZ(calc(var(--droll) / 2)); }
.droll-row.landed .droll-front { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06), 0 0 0 3px var(--droll-glow), 0 0 28px var(--droll-glow); transition: box-shadow .2s ease; }
@keyframes drollIn {
    0%   { transform: translate(var(--droll-sx, -120px), var(--droll-sy, 140px)) scale(.35); opacity: 0; }
    15%  { opacity: 1; }
    55%  { transform: translate(10px, -46px) scale(1.12); }
    75%  { transform: translate(0, 0) scale(.96); }
    88%  { transform: translate(0, -10px) scale(1.02); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes drollShadow { 0% { opacity: 0; transform: scale(.4); } 55% { opacity: .3; transform: scale(.7); } 100% { opacity: 1; transform: scale(1); } }
@media (min-width: 768px) { .droll-row { --droll: 92px; } }
@media (prefers-reduced-motion: reduce) { .droll-die, .droll-die::after { animation: none; } }

/* Version 13: payment QR code on the donation page */
.donate-qr-wrap { display: flex; gap: 1.25rem; align-items: flex-start; }
.donate-qr { width: 220px; max-width: 46%; height: auto; border-radius: .9rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); background: #fff; flex: 0 0 auto; }
.donate-qr-steps { min-width: 0; }
.donate-qr-thumb { width: 72px; height: auto; border-radius: .4rem; border: 1px solid #e6dccb; }
@media (max-width: 575.98px) {
    .donate-qr-wrap { flex-direction: column; align-items: center; text-align: left; }
    .donate-qr { width: min(280px, 80vw); max-width: none; }
}

/* =====================================================================
   Version 17 - a bigger Sho board
   ===================================================================== */
/* Phones and tablets: the board uses almost the whole width of the screen. */
@media (max-width: 991.98px) {
    .play-body .play-row { --bs-gutter-x: 4px; }
    .play-body .container-xl { padding-left: 4px !important; padding-right: 4px !important; }
    .play-body .board-card { padding: 2px; border-radius: .9rem; }
}
/* Laptops: the player cards move beside the board (a compact list), so the board gets the height. */
.player-strip-side { flex-direction: column; overflow: visible; gap: .4rem; padding: 0; }
.player-strip-side .pchip { min-width: 0; flex: none; padding-top: .45rem; padding-bottom: .45rem; }
@media (min-width: 992px) {
    .play-body .play-head { margin-bottom: .4rem !important; }
    .play-body .board-card { padding: 4px; }
}