/* ==========================================================================
   Montana theme — dark premium casino skin layered over style.css.
   style.css keeps layout mechanics (board grid, card stacking, animations);
   this file owns colors, surfaces, typography and the progression UI.
   ========================================================================== */

:root {
    --bg-0: #060a14;
    --bg-1: #0b1224;
    --bg-2: #121b35;
    --panel: rgba(17, 25, 48, 0.82);
    --panel-strong: #111a31;
    --panel-raised: rgba(255, 255, 255, 0.05);
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.16);
    --text: #eef2ff;
    --text-soft: #c3cbe4;
    --muted: #8f9bbd;
    --gold: #f5c451;
    --gold-2: #ffe29a;
    --gold-deep: #b8860b;
    --accent: #8b5cf6;
    --accent-2: #22d3ee;
    --win: #34d399;
    --loss: #f87171;
    --tie: #cbd5e1;
    --coin: #fbbf24;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 11px;
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.35);
    --font-ui: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Georgia", "Times New Roman", serif;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[hidden] {
    display: none !important;
}

html {
    background: var(--bg-0);
}

body {
    font-family: var(--font-ui);
    color: var(--text);
    /* Transparent so the fixed ::before backdrop shows; html keeps the base color. */
    background: transparent;
    -webkit-font-smoothing: antialiased;
}

/* Painted backdrop on a fixed layer: background-attachment: fixed is
   unreliable on iOS, and a separate layer never repaints while scrolling. */
body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(6, 10, 20, 0.15), rgba(6, 10, 20, 0.45)),
        url("../images/bg/lobby-landscape.webp") center / cover no-repeat,
        var(--bg-0);
    content: "";
    pointer-events: none;
}

@media (orientation: portrait) {
    body::before {
        background:
            linear-gradient(180deg, rgba(6, 10, 20, 0.15), rgba(6, 10, 20, 0.45)),
            url("../images/bg/lobby-portrait.webp") center / cover no-repeat,
            var(--bg-0);
    }
}

/* Screens sit on the shared body backdrop instead of dark photo overlays. */
#main-menu,
#name-input,
#room-code-input,
#auth-screen,
#friends-screen,
#profile-screen,
#leaderboard-screen,
#waiting-screen,
#results-screen,
#instructions-screen,
#wager-select-screen,
#computer-difficulty-screen,
#wager-funding-screen,
#shop-screen {
    background: transparent;
}

h1, h2, h3, h4 {
    color: var(--text);
    letter-spacing: -0.01em;
}

::selection {
    background: rgba(245, 196, 81, 0.35);
}

/* ---- Loading ------------------------------------------------------------ */

#loading-screen {
    background:
        radial-gradient(600px 400px at 50% 40%, rgba(245, 196, 81, 0.12), transparent 70%),
        var(--bg-0);
    gap: 18px;
}

.loading-logo {
    display: flex;
    gap: 10px;
    font-size: 34px;
}

.loading-logo span {
    display: inline-block;
    color: var(--text);
    animation: suit-hop 1.2s var(--ease-out) infinite;
}

.loading-logo span:nth-child(2),
.loading-logo span:nth-child(4) {
    color: #ef4444;
}

.loading-logo span:nth-child(2) { animation-delay: 0.12s; }
.loading-logo span:nth-child(3) { animation-delay: 0.24s; }
.loading-logo span:nth-child(4) { animation-delay: 0.36s; }

@keyframes suit-hop {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-10px); opacity: 1; }
}

.loading-spinner {
    width: 38px;
    height: 38px;
    border-width: 3px;
    border-color: rgba(255, 255, 255, 0.12);
    border-top-color: var(--gold);
    margin-bottom: 0;
}

.loading-text {
    color: var(--muted);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---- Buttons ------------------------------------------------------------ */

.menu-btn {
    position: relative;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    transition: transform 160ms var(--ease-out), box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, filter 160ms ease;
}

.menu-btn:active:not(:disabled) {
    transform: translateY(1px) scale(0.985);
}

.menu-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.menu-btn.primary {
    border: 1px solid rgba(255, 234, 170, 0.8);
    background: linear-gradient(180deg, #ffe08a 0%, #f5c451 48%, #d99a1b 100%);
    color: #2a1a00;
    box-shadow: 0 10px 24px rgba(245, 196, 81, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(120, 70, 0, 0.35);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.menu-btn.primary:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.05) saturate(1.05);
    box-shadow: 0 14px 30px rgba(245, 196, 81, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -2px 0 rgba(120, 70, 0, 0.35);
}

.menu-btn.secondary,
.menu-btn.tertiary,
.screen .menu-btn[id$="-back-btn"] {
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.menu-btn.secondary:hover:not(:disabled),
.menu-btn.tertiary:hover:not(:disabled),
.screen .menu-btn[id$="-back-btn"]:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
    transform: translateY(-1px);
}

.language-btn {
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.language-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.column.clickable:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ---- Forms and panels --------------------------------------------------- */

.input-container,
.instructions-container,
.results-summary,
.modal-content,
.panel-container {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
        var(--panel);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.input-container h2,
.instructions-container h2,
.panel-title {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
}

.input-container input,
.input-container textarea,
.cashu-settings textarea,
.cashu-settings input[type="number"],
#friend-identifier,
#cashu-deposit-token,
#wager-payout-token,
#nostr-nsec-input,
#nostr-generated-nsec {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: rgba(3, 7, 18, 0.55);
    color: var(--text);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

.input-container input::placeholder,
textarea::placeholder {
    color: rgba(195, 203, 228, 0.45);
}

.input-container input:focus,
.cashu-settings textarea:focus,
#nostr-nsec-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(245, 196, 81, 0.18);
}

.cashu-settings input[type="number"] {
    min-height: 44px;
    padding: 10px 12px;
}

.instruction-section h3 {
    color: var(--gold-2);
}

.instruction-section p,
.instruction-section ul,
.instruction-section li {
    color: var(--text-soft);
}

.instruction-section {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel-raised);
}

.modal {
    background: rgba(2, 6, 16, 0.66);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modal.active .modal-content {
    animation: pop-in 260ms var(--ease-spring);
}

.modal-content h3 {
    color: var(--text);
}

#error-modal .modal-content h3 {
    color: var(--loss);
}

.modal-content p {
    color: var(--text-soft);
}

@keyframes pop-in {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

/* Auth, Nostr and Cashu surfaces. */
.auth-divider,
.auth-help,
.wager-select-container > p,
.wager-selection-note,
.cashu-mint-label {
    color: var(--muted);
}

.auth-divider::before,
.auth-divider::after {
    background: var(--line-strong);
}

.auth-mode-toggle .menu-btn {
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-soft);
}

.auth-mode-toggle .menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.auth-mode-toggle .menu-btn.selected {
    border-color: var(--gold);
    background: rgba(245, 196, 81, 0.14);
    color: var(--gold-2);
}

#auth-submit-btn.menu-btn.primary {
    background: linear-gradient(180deg, #ffe08a 0%, #f5c451 48%, #d99a1b 100%);
    color: #2a1a00;
}

#auth-submit-btn.menu-btn.primary:hover {
    background: linear-gradient(180deg, #ffe7a3 0%, #f7cd66 48%, #e0a42a 100%);
    color: #2a1a00;
}

.nostr-btn,
.nostr-choice-btn {
    border: 1px solid rgba(196, 181, 253, 0.5);
    background: linear-gradient(180deg, #7c3aed, #5b21b6);
    color: #fff;
}

.nostr-choice-btn.secondary,
.nostr-cancel-btn {
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.nostr-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.nostr-auth-content h3 {
    color: #c4b5fd;
}

.nostr-method {
    border-color: var(--line);
    background: var(--panel-raised);
}

.nostr-method h4,
.nostr-method label,
.nostr-backup-check {
    color: var(--text);
}

.nostr-secret-warning {
    border-color: rgba(245, 158, 11, 0.6);
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d !important;
}

.nostr-backup-content h3 {
    color: var(--gold);
}

.cashu-balance-card {
    border: 1px solid rgba(245, 196, 81, 0.35);
    background: linear-gradient(135deg, rgba(245, 196, 81, 0.16), rgba(245, 196, 81, 0.05));
    color: var(--gold-2);
}

.cashu-balance-visibility-btn {
    border-color: rgba(245, 196, 81, 0.4);
    background: rgba(0, 0, 0, 0.25);
    color: var(--gold-2);
}

.cashu-balance-visibility-btn:hover {
    background: rgba(0, 0, 0, 0.4);
}

.diamond-shop-card {
    border-color: rgba(125, 211, 252, 0.35);
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(139, 92, 246, 0.12));
    box-shadow: none;
}

.diamond-pack-copy {
    color: var(--text);
}

.diamond-pack-copy small {
    color: var(--muted);
}

.diamond-purchase-status {
    color: var(--win);
}

.diamond-purchase-status.error {
    color: var(--loss);
}

.cashu-warning {
    color: #fbbf24;
}

#cashu-withdraw-btn.menu-btn.secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid var(--line-strong) !important;
    color: var(--text) !important;
    box-shadow: none;
}

#cashu-withdraw-btn.menu-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}

.difficulty-option {
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

.difficulty-option.selected {
    border-color: var(--gold);
    background: rgba(245, 196, 81, 0.16);
    color: var(--gold-2);
    box-shadow: 0 0 0 3px rgba(245, 196, 81, 0.15);
}

.wager-preset {
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

.wager-preset.selected {
    border-color: var(--gold);
    background: rgba(245, 196, 81, 0.16);
    color: var(--gold-2);
    box-shadow: 0 0 0 3px rgba(245, 196, 81, 0.15);
}

.wager-select-container .menu-btn.secondary,
.wager-funding-container .menu-btn.secondary,
.wager-payout-content .menu-btn.secondary {
    border-color: var(--line-strong);
    color: var(--text);
}

.wager-terms-grid div,
.wager-payment-status {
    border: 1px solid var(--line);
    background: var(--panel-raised);
}

.wager-payment-status .paid {
    color: var(--win);
}

.wager-mint-url {
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-soft);
}

/* ---- Main menu ---------------------------------------------------------- */

#main-menu.active {
    justify-content: flex-start;
    padding-top: max(12px, env(safe-area-inset-top));
}

.menu-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.ambient-suit {
    position: absolute;
    color: rgba(255, 255, 255, 0.035);
    font-size: clamp(120px, 22vw, 260px);
    line-height: 1;
    animation: ambient-float 18s ease-in-out infinite;
}

.ambient-suit.s1 { top: 6%; left: -4%; }
.ambient-suit.s2 { top: 12%; right: -6%; color: rgba(239, 68, 68, 0.05); animation-delay: -4s; }
.ambient-suit.s3 { bottom: 4%; left: 6%; animation-delay: -9s; }
.ambient-suit.s4 { bottom: -4%; right: 4%; color: rgba(239, 68, 68, 0.05); animation-delay: -13s; }

@keyframes ambient-float {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-18px) rotate(6deg); }
}

.menu-topbar.hud,
.menu-topbar.hud.authenticated {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 980px;
    min-width: 0;
    margin: 0 auto;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(8, 13, 28, 0.72);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.hud #user-badge,
.menu-topbar.authenticated #user-badge {
    position: static;
    display: none;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
}

.hud-avatar-btn {
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.hud-level-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.hud-level-ring circle {
    fill: none;
    stroke-width: 4;
}

.ring-track {
    stroke: rgba(255, 255, 255, 0.1);
}

.ring-fill {
    stroke: var(--gold);
    stroke-linecap: round;
    stroke-dasharray: 144.5;
    stroke-dashoffset: 144.5;
    transition: stroke-dashoffset 900ms var(--ease-out);
    filter: drop-shadow(0 0 4px rgba(245, 196, 81, 0.6));
}

.hud #user-avatar,
#user-avatar {
    position: absolute;
    inset: 6px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--bg-2);
    object-fit: cover;
}

.hud-level-badge {
    position: absolute;
    right: -4px;
    bottom: -3px;
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border: 2px solid var(--bg-1);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gold-2), var(--gold));
    color: #2a1a00;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.hud-player-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.hud #user-name,
#user-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hud-rank {
    color: var(--gold-2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#user-badge[data-rank="silver"] .hud-rank { color: #e2e8f0; }
#user-badge[data-rank="platinum"] .hud-rank { color: #67e8f9; }
#user-badge[data-rank="diamond"] .hud-rank { color: #93c5fd; }
#user-badge[data-rank="master"] .hud-rank { color: #d8b4fe; }
#user-badge[data-rank="legend"] .hud-rank { color: #fb923c; }

.hud-xp {
    width: min(160px, 36vw);
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

#hud-xp-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--gold));
    transition: width 900ms var(--ease-out);
}

.hud-xp-text {
    color: var(--muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.hud-guest {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-left: 4px;
}

.hud-guest-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px dashed var(--line-strong);
    border-radius: 50%;
    font-size: 18px;
}

.hud-guest-copy {
    display: grid;
    min-width: 0;
}

.hud-guest-copy strong {
    font-size: 14px;
}

.hud-guest-copy small {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hud-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.hud .language-selector,
.menu-topbar.authenticated .language-selector {
    position: static;
}

.currency-pill,
.diamond-balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    min-height: 32px;
    padding: 4px 10px 4px 6px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    font-variant-numeric: tabular-nums;
}

.currency-pill strong,
.diamond-balance-pill strong {
    font-size: 13px;
    font-weight: 900;
}

.coin-pill strong {
    color: var(--gold-2);
}

.diamond-balance-pill strong {
    color: #bae6fd;
}

.currency-icon,
.diamond-balance-icon {
    font-size: 15px;
    filter: none;
}

.bump {
    animation: bump 420ms var(--ease-spring);
}

@keyframes bump {
    30% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

.menu-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    padding-top: 10px;
}

.brand {
    display: grid;
    justify-items: center;
    gap: 2px;
    margin-bottom: 18px;
}

.brand-mark {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--line-strong);
    animation: brand-bob 6s ease-in-out infinite;
}

@keyframes brand-bob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-5px) rotate(3deg); }
}

.game-title {
    margin: 6px 0 0;
    background: linear-gradient(180deg, #fff6d6 0%, var(--gold-2) 35%, var(--gold) 60%, #b7791f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 11vw, 3.6rem);
    font-style: italic;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-shadow: none;
    filter: drop-shadow(0 6px 18px rgba(245, 196, 81, 0.25));
}

.brand-tagline {
    color: var(--muted);
    font-size: 13px;
    letter-spacing: 0.06em;
}

/* Daily / missions / shop tiles */
.event-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.event-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: transform 160ms var(--ease-out), border-color 160ms ease, background 160ms ease;
}

.event-tile:hover {
    transform: translateY(-2px);
    border-color: var(--line-strong);
    background: rgba(26, 36, 66, 0.9);
}

.event-tile.ready {
    border-color: rgba(245, 196, 81, 0.55);
    box-shadow: 0 0 0 1px rgba(245, 196, 81, 0.2), 0 8px 24px rgba(245, 196, 81, 0.15);
}

.event-tile.ready .event-icon {
    animation: wiggle 2.4s ease-in-out infinite;
}

@keyframes wiggle {
    0%, 70%, 100% { transform: rotate(0); }
    75% { transform: rotate(-12deg) scale(1.1); }
    85% { transform: rotate(10deg) scale(1.1); }
    92% { transform: rotate(-6deg); }
}

.event-icon {
    flex: 0 0 auto;
    font-size: 22px;
}

.event-copy {
    display: grid;
    min-width: 0;
}

.event-copy strong {
    font-size: 13px;
}

.event-copy small {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-tile.ready .event-copy small {
    color: var(--gold-2);
    font-weight: 800;
}

.notif-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 2px var(--bg-1);
    animation: dot-pulse 1.6s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 2px rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 7px rgba(239, 68, 68, 0); }
}

.first-win-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(52, 211, 153, 0.35);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(52, 211, 153, 0.14), rgba(34, 211, 238, 0.12));
    color: #a7f3d0;
    font-size: 12px;
    font-weight: 800;
}

.first-win-bolt {
    animation: wiggle 3s ease-in-out infinite;
}

.menu-buttons {
    gap: 10px;
    margin-top: 0;
}

.menu-btn.play-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 78px;
    padding: 14px 18px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    text-align: left;
    text-transform: none;
}

.menu-btn.play-hero::after {
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    content: '';
    transform: skewX(-20deg);
    animation: shine 3.6s ease-in-out infinite;
}

@keyframes shine {
    0%, 55% { left: -60%; }
    85%, 100% { left: 130%; }
}

.play-hero-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(42, 26, 0, 0.9);
    color: var(--gold-2);
    font-size: 18px;
    box-shadow: inset 0 0 0 2px rgba(255, 226, 154, 0.35);
}

.play-hero-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.play-hero-copy strong {
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.play-hero-copy small {
    color: rgba(42, 26, 0, 0.75);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

.streak-chip {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(42, 26, 0, 0.88);
    color: #fdba74;
    font-size: 12px;
    font-weight: 900;
}

.mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
}

.menu-btn.mode-card {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    min-height: 96px;
    padding: 12px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
        var(--panel);
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
}

.menu-btn.mode-card:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        var(--panel);
}

.mode-icon {
    font-size: 26px;
    transition: transform 200ms var(--ease-spring);
}

.mode-card:hover .mode-icon {
    transform: scale(1.15) rotate(-6deg);
}

.mode-title {
    font-size: 13px;
    font-weight: 800;
}

.mode-card small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.menu-btn.mode-card.wager-quick-btn {
    border-color: rgba(245, 196, 81, 0.4);
    background: linear-gradient(180deg, rgba(245, 196, 81, 0.18), rgba(245, 196, 81, 0.05)), var(--panel);
    color: var(--gold-2);
}

.menu-btn.auth-cta,
#auth-btn.menu-btn {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(139, 92, 246, 0.5);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(34, 211, 238, 0.14));
    color: var(--text);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
}

.menu-btn.auth-cta {
    display: grid;
}

.menu-btn.how-to-play-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(245, 196, 81, 0.35);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(245, 196, 81, 0.16), rgba(34, 211, 238, 0.08)), var(--panel);
    color: var(--text);
    text-align: left;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 16px;
}

.how-to-play-copy strong {
    font-size: 15px;
}

.how-to-play-copy small {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
}

.how-to-play-icon {
    font-size: 22px;
}

.how-to-play-copy {
    display: grid;
    gap: 1px;
}

.auth-cta-icon {
    font-size: 24px;
}

.auth-cta-copy {
    display: grid;
    gap: 1px;
}

.auth-cta-copy strong {
    font-size: 15px;
}

.auth-cta-copy small {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
}

.live-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    width: fit-content;
    max-width: 100%;
    margin: 14px auto 0;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(8, 13, 28, 0.7);
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.live-stats[hidden] {
    display: none;
}

.live-stats strong {
    color: var(--text, #fff);
    font-variant-numeric: tabular-nums;
}

.live-stats-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: live-stats-pulse 2s ease-out infinite;
}

.live-stats-sep {
    opacity: 0.5;
}

@keyframes live-stats-pulse {
    to { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .live-stats-dot { animation: none; }
}

.leaderboard-note {
    margin: 10px 0 0;
    color: var(--text-soft);
    font-size: 12px;
    text-align: center;
}

.menu-nav {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 6px;
    margin-top: 14px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(8, 13, 28, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav-btn {
    min-width: 0;
    padding: 8px 4px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--text-soft);
    text-align: center;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.nav-icon,
.nav-label {
    display: block;
}

.nav-icon {
    font-size: 20px;
    line-height: 1.2;
}

.nav-label {
    overflow: hidden;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Waiting ------------------------------------------------------------ */

.waiting-container {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 32px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--panel);
    box-shadow: var(--shadow-lg);
}

.waiting-container h2 {
    font-size: 20px;
}

#room-code-display {
    border: 1px dashed rgba(245, 196, 81, 0.6);
    background: rgba(245, 196, 81, 0.08);
    color: var(--gold-2);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: 0.3em;
}

/* ---- Profile / leaderboard / friends ------------------------------------ */

.profile-avatar-large {
    border: 3px solid var(--gold);
    background: var(--bg-2);
    box-shadow: 0 0 0 4px rgba(245, 196, 81, 0.15);
}

#profile-display-name-text {
    font-size: 20px;
    font-weight: 800;
}

.avatar-option {
    background: var(--bg-2);
    transition: transform 160ms var(--ease-spring);
}

.avatar-option:hover {
    transform: scale(1.1);
}

.avatar-option.selected {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(245, 196, 81, 0.25);
}

.profile-progress-card {
    border-color: rgba(245, 196, 81, 0.25);
    background:
        radial-gradient(circle at 88% 8%, rgba(245, 196, 81, 0.18), transparent 38%),
        radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.22), transparent 45%),
        linear-gradient(145deg, #151f3d 0%, #1a2550 52%, #1c1a44 100%);
}

.profile-level-orb {
    border: 3px solid rgba(255, 226, 154, 0.8);
    background: radial-gradient(circle at 35% 30%, #ffe8a8, var(--gold) 45%, #b7791f 100%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 24px rgba(245, 196, 81, 0.35), inset 0 2px 7px rgba(255, 255, 255, 0.45);
}

.profile-level-orb span {
    color: rgba(42, 26, 0, 0.7);
}

.profile-level-orb strong {
    color: #2a1a00;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

#profile-xp-progress {
    background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--gold));
    transition: width 900ms var(--ease-out);
}

.rank-chip {
    justify-self: start;
    padding: 3px 10px;
    border: 1px solid rgba(245, 196, 81, 0.4);
    border-radius: 999px;
    background: rgba(245, 196, 81, 0.12);
    color: var(--gold-2);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rank-chip:empty {
    display: none;
}

.profile-economy-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-economy-coins {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(217, 119, 6, 0.12));
}

.profile-streak-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.profile-streak-row div {
    display: grid;
    justify-items: center;
    gap: 1px;
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.18);
}

.profile-streak-row strong {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.profile-streak-row small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.menu-btn.logout-btn {
    width: 100%;
    margin-top: 6px;
    border: 1px solid rgba(248, 113, 113, 0.7);
    background: linear-gradient(180deg, #ef4444, #b91c1c);
    color: #fff;
    box-shadow: 0 8px 20px rgba(185, 28, 28, 0.35);
}

.menu-btn.logout-btn:hover {
    filter: brightness(1.08);
}

#stats-header strong {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
}

#stats-header div > div {
    font-size: 20px;
    font-weight: 900;
}

#history-list .history-row {
    border-bottom-color: var(--line);
}

.history-meta,
.leaderboard-rank {
    color: var(--muted);
}

#history-list .result-win { color: var(--win); }
#history-list .result-loss { color: var(--loss); }
#history-list .result-draw { color: var(--gold); }

#leaderboard-table thead tr,
#leaderboard-table tbody tr {
    border-bottom-color: var(--line) !important;
}

#leaderboard-table th {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#leaderboard-body tr:nth-child(1) .leaderboard-rank::before { content: '🥇 '; }
#leaderboard-body tr:nth-child(2) .leaderboard-rank::before { content: '🥈 '; }
#leaderboard-body tr:nth-child(3) .leaderboard-rank::before { content: '🥉 '; }

#leaderboard-body tr:nth-child(-n + 3) .leaderboard-name {
    color: var(--gold-2);
}

.leaderboard-elo {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

#friends-list > div {
    border-bottom: 1px solid var(--line);
}

/* ---- Game table --------------------------------------------------------- */

#game-screen,
#game-screen.active {
    --felt-1: #1f8a5b;
    --felt-2: #13603f;
    --felt-3: #07301f;
    --felt-edge: rgba(245, 196, 81, 0.18);
    background:
        url("../images/bg/table-emblem.svg") center / min(58vmin, 420px) no-repeat,
        radial-gradient(ellipse 70% 55% at 50% 50%, rgba(255, 255, 255, 0.09), transparent 70%),
        url("../images/bg/felt-texture.webp") 0 0 / 256px 256px repeat,
        var(--felt-pattern, linear-gradient(transparent, transparent)) 0 0 / var(--felt-pattern-size, auto),
        radial-gradient(ellipse at 50% 50%, var(--felt-1) 0%, var(--felt-2) 50%, var(--felt-3) 100%);
    background-blend-mode: normal, normal, overlay, normal, normal;
    box-shadow: inset 0 0 0 1px var(--felt-edge), inset 0 0 0 6px rgba(0, 0, 0, 0.25), inset 0 0 140px rgba(0, 0, 0, 0.6);
}

body[data-table="midnight"] #game-screen {
    --felt-1: #2848a8;
    --felt-2: #172c6e;
    --felt-3: #080f2c;
}

body[data-table="crimson"] #game-screen {
    --felt-1: #a3263a;
    --felt-2: #6b1424;
    --felt-3: #2a060d;
}

body[data-table="royal"] #game-screen {
    --felt-1: #6d35a3;
    --felt-2: #45206e;
    --felt-3: #1a0a30;
}

body[data-table="gold"] #game-screen {
    --felt-1: #4a3b16;
    --felt-2: #2a200b;
    --felt-3: #0d0a03;
    --felt-edge: rgba(245, 196, 81, 0.55);
}

.game-header {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    background: rgba(5, 10, 22, 0.62);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.game-info .round-label {
    color: var(--muted);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.game-info #current-round {
    color: var(--gold-2);
}

.turn-indicator {
    color: var(--text-soft);
    font-weight: 700;
}

.turn-indicator.active,
#turn-text.active {
    color: var(--gold-2);
    text-shadow: 0 0 12px rgba(245, 196, 81, 0.45);
}

.timer-circle {
    background: radial-gradient(circle at 35% 30%, #6ee7b7, #059669);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.35);
}

.timer-circle.warning {
    background: radial-gradient(circle at 35% 30%, #fde68a, #d97706);
}

.timer-circle.danger {
    background: radial-gradient(circle at 35% 30%, #fca5a5, #dc2626);
}

#show-results-now-btn.menu-btn.secondary {
    border: 1px solid rgba(255, 234, 170, 0.8) !important;
    background: linear-gradient(180deg, #ffe08a, #f5c451 50%, #d99a1b) !important;
    color: #2a1a00 !important;
    animation: nudge 1.6s ease-in-out infinite;
}

@keyframes nudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(245, 196, 81, 0.45); }
}

.player-info {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(5, 10, 22, 0.6);
    color: var(--text);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.avatar-outside {
    border: 2px solid var(--gold);
    background: var(--bg-2);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.35);
}

.column {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.16);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.25);
}

.column.clickable:hover {
    border-color: rgba(245, 196, 81, 0.5);
    background: rgba(245, 196, 81, 0.08);
}

.column.valid-placement {
    border-color: rgba(52, 211, 153, 0.8);
    background: rgba(52, 211, 153, 0.1);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35), 0 0 18px rgba(52, 211, 153, 0.3), inset 0 2px 10px rgba(0, 0, 0, 0.2);
}

.column.invalid-placement {
    border-color: rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.28);
    opacity: 0.55;
}

.column.winning-column {
    border-color: var(--gold);
    background: rgba(245, 196, 81, 0.14);
}

.card {
    border: 1px solid rgba(15, 23, 42, 0.25);
    border-radius: 8px;
    background: linear-gradient(160deg, #ffffff 0%, #f5f3ee 100%);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.35);
    font-family: var(--font-ui);
}

.card.red,
.dealing-card.red {
    color: #d62839;
}

.card.black,
.dealing-card.black {
    color: #151826;
}

.card:hover {
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08), 0 8px 18px rgba(0, 0, 0, 0.45);
}

.card.swap-revealed {
    border: 2px solid var(--win);
    box-shadow: 0 0 16px rgba(52, 211, 153, 0.55);
}

/* Card backs. Each back defines --back; hover keeps the pattern. */
body {
    --back: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.09) 0 3px, transparent 3px 7px),
        linear-gradient(135deg, #1d4ed8, #3b82f6 55%, #1e3a8a);
}

body[data-card-back="ocean"] {
    --back: radial-gradient(circle at 20% 110%, rgba(255, 255, 255, 0.25) 0 18%, transparent 19%),
        radial-gradient(circle at 80% -10%, rgba(255, 255, 255, 0.2) 0 18%, transparent 19%),
        repeating-radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 8px),
        linear-gradient(160deg, #06b6d4, #0e7490 60%, #164e63);
}

body[data-card-back="flame"] {
    --back: radial-gradient(ellipse at 50% 110%, #fde047 0%, transparent 45%),
        repeating-linear-gradient(-60deg, rgba(0, 0, 0, 0.12) 0 3px, transparent 3px 8px),
        linear-gradient(170deg, #f97316, #dc2626 60%, #7f1d1d);
}

body[data-card-back="jade"] {
    --back: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 9px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 9px),
        linear-gradient(135deg, #10b981, #047857 60%, #064e3b);
}

body[data-card-back="galaxy"] {
    --back: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 20%, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle at 40% 75%, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle at 85% 65%, #fff 0 1px, transparent 1.5px),
        radial-gradient(ellipse at 60% 40%, rgba(236, 72, 153, 0.55), transparent 55%),
        radial-gradient(ellipse at 30% 70%, rgba(99, 102, 241, 0.6), transparent 60%),
        linear-gradient(160deg, #1e1b4b, #0f0a2e);
}

.card.face-down,
.player-columns .card.face-down:hover,
.opponent-columns .card.face-down:hover,
.swatch-back,
.dealing-card .card-back {
    border-color: rgba(255, 255, 255, 0.85);
    background: var(--back);
    color: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), inset 0 0 0 4px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.4);
}

.player-columns .card.face-down:hover {
    filter: brightness(1.12);
}

.card.face-down::before {
    content: '♠';
    font-size: 18px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.dealing-card {
    border-radius: 8px;
    background: linear-gradient(160deg, #ffffff 0%, #f5f3ee 100%);
}

.dealing-card .card-back {
    border-radius: 8px;
}

.card-instruction,
.swap-instruction {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(5, 10, 22, 0.7);
    color: var(--text-soft);
}

#pass-swap-btn {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(5, 10, 22, 0.7);
    color: var(--text);
}

#pass-swap-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.game-notification {
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(5, 10, 22, 0.92);
    box-shadow: var(--shadow-md);
}

/* ---- Results ------------------------------------------------------------ */

#results-screen {
    background: rgba(4, 8, 18, 0.35);
}

#results-screen.is-win {
    background: linear-gradient(180deg, rgba(6, 6, 16, 0.1), rgba(6, 6, 16, 0.55)),
        url("../images/bg/victory-landscape.webp") center top / cover no-repeat, var(--bg-0);
}

#results-screen.is-loss {
    background: linear-gradient(180deg, rgba(6, 6, 16, 0.1), rgba(6, 6, 16, 0.5)),
        url("../images/bg/defeat-landscape.webp") center / cover no-repeat, var(--bg-0);
}

@media (orientation: portrait) {
    #results-screen.is-win {
        background: linear-gradient(180deg, rgba(6, 6, 16, 0.1), rgba(6, 6, 16, 0.55)),
            url("../images/bg/victory-portrait.webp") center top / cover no-repeat, var(--bg-0);
    }

    #results-screen.is-loss {
        background: linear-gradient(180deg, rgba(6, 6, 16, 0.1), rgba(6, 6, 16, 0.5)),
            url("../images/bg/defeat-portrait.webp") center / cover no-repeat, var(--bg-0);
    }
}

.results-container {
    position: relative;
    max-width: 440px;
}

.result-rays {
    position: absolute;
    top: -80px;
    left: 50%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(245, 196, 81, 0.16) 0 10deg, transparent 10deg 20deg);
    opacity: 0;
    transform: translateX(-50%);
    -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%);
    mask: radial-gradient(circle, #000 20%, transparent 68%);
    pointer-events: none;
}

#results-screen.is-win .result-rays {
    opacity: 1;
    animation: rays-spin 18s linear infinite;
}

@keyframes rays-spin {
    to { transform: translateX(-50%) rotate(360deg); }
}

#game-result-title {
    position: relative;
    margin-bottom: 2px;
    font-family: var(--font-display);
    font-size: clamp(36px, 10vw, 48px);
    font-style: italic;
    animation: title-drop 520ms var(--ease-spring);
}

#results-screen.is-win #game-result-title {
    background: linear-gradient(180deg, #fff6d6, var(--gold-2) 40%, var(--gold) 70%, #b7791f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 18px rgba(245, 196, 81, 0.35));
}

#results-screen.is-loss #game-result-title {
    color: #fca5a5;
}

#results-screen.is-tie #game-result-title {
    color: var(--tie);
}

@keyframes title-drop {
    from { opacity: 0; transform: translateY(-16px) scale(1.2); }
    to { opacity: 1; transform: none; }
}

.result-score {
    position: relative;
    margin-bottom: 16px;
    color: var(--text-soft);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

.winner-display {
    display: none;
}

.results-summary {
    padding: 16px;
    margin-bottom: 16px;
}

.results-header {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.column-result {
    border-bottom-color: var(--line);
    padding: 9px 0;
}

.hands-container {
    gap: 6px;
    font-size: 14px;
}

.hands-container .winner {
    color: var(--win);
    font-weight: 800;
}

.hands-container .loser {
    color: var(--loss);
    opacity: 0.85;
}

.hands-container .tie {
    color: var(--gold);
}

.vs-text {
    color: var(--muted);
}

.results-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Rewards panel */
.match-rewards {
    position: relative;
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid rgba(245, 196, 81, 0.28);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 100% 0%, rgba(245, 196, 81, 0.16), transparent 45%),
        linear-gradient(160deg, rgba(26, 36, 72, 0.95), rgba(17, 22, 46, 0.95));
    box-shadow: var(--shadow-lg);
    text-align: left;
}

.match-rewards.animate {
    animation: pop-in 420ms var(--ease-spring);
}

.reward-level-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.reward-level-badge {
    display: grid;
    place-items: center;
    width: 58px;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 226, 154, 0.85);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe8a8, var(--gold) 45%, #b7791f 100%);
    color: #2a1a00;
    box-shadow: 0 0 20px rgba(245, 196, 81, 0.35);
}

.reward-level-badge small {
    margin-top: 6px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.reward-level-badge strong {
    margin-top: -8px;
    font-size: 24px;
    font-weight: 900;
}

.reward-level-badge.pop {
    animation: level-pop 600ms var(--ease-spring);
}

@keyframes level-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); box-shadow: 0 0 40px rgba(245, 196, 81, 0.9); }
    100% { transform: scale(1); }
}

.reward-xp {
    display: grid;
    gap: 6px;
}

.reward-xp-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

#reward-xp-gain {
    color: #a5f3fc;
    font-size: 20px;
    font-weight: 900;
}

#reward-xp-count {
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.reward-xp-track {
    height: 12px;
    padding: 2px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
}

#reward-xp-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--gold));
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
}

.reward-lines {
    display: grid;
    gap: 6px;
    list-style: none;
}

.reward-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 13px;
    opacity: 0;
    animation: line-in 380ms var(--ease-out) forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes line-in {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: none; }
}

.reward-line-label {
    color: var(--text-soft);
    font-weight: 700;
}

.reward-line-values {
    color: var(--gold-2);
    font-weight: 900;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.reward-line--first_win,
.reward-line--streak,
.reward-line--flawless {
    border-color: rgba(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 0.08);
}

.reward-totals {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.reward-total {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.reward-coins strong {
    color: var(--gold-2);
}

.reward-diamonds strong {
    color: #bae6fd;
}

.reward-elo strong {
    color: var(--win);
}

.reward-elo.negative strong {
    color: var(--loss);
}

.reward-missions-note {
    margin: 0;
    color: var(--gold-2);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

/* ---- Shop --------------------------------------------------------------- */

#shop-screen.active {
    justify-content: flex-start;
}

#shop-screen .panel-topbar {
    margin-top: 30px;
}

.panel-container {
    width: 100%;
    max-width: 560px;
    margin-block: auto;
    padding: 18px;
}

.panel-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.panel-topbar .menu-btn {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 12px;
}

.panel-wallet {
    display: flex;
    gap: 6px;
}

.panel-title {
    margin: 14px 0 12px;
    text-align: center;
}

.shop-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
}

.shop-tab {
    min-height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
}

.shop-tab.active {
    background: linear-gradient(180deg, #ffe08a, var(--gold));
    color: #2a1a00;
    box-shadow: 0 4px 12px rgba(245, 196, 81, 0.3);
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.shop-card {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel-raised);
    text-align: center;
    animation: pop-in 280ms var(--ease-out);
}

.shop-card.equipped {
    border-color: rgba(52, 211, 153, 0.6);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.25);
}

.shop-card.locked .shop-art {
    filter: grayscale(0.8) brightness(0.55);
}

.shop-card strong {
    font-size: 14px;
}

.shop-card small {
    color: var(--muted);
    font-size: 11px;
}

.shop-card--chest {
    grid-column: 1 / -1;
    padding: 18px;
}

.shop-art {
    height: 96px;
    border-radius: 12px;
}

.chest-art {
    display: grid;
    place-items: center;
    height: 120px;
    background: radial-gradient(circle, rgba(245, 196, 81, 0.35), transparent 65%);
    font-size: 64px;
    animation: brand-bob 3.5s ease-in-out infinite;
}

.swatch-table {
    --felt-1: #1f8a5b;
    --felt-2: #13603f;
    --felt-3: #07301f;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255, 255, 255, 0.1), transparent 70%),
        radial-gradient(ellipse at 50% 50%, var(--felt-1), var(--felt-2) 55%, var(--felt-3));
    box-shadow: inset 0 0 0 3px rgba(84, 52, 20, 0.9), inset 0 0 0 5px rgba(245, 196, 81, 0.35);
}

.swatch-table[data-value="midnight"] { --felt-1: #2848a8; --felt-2: #172c6e; --felt-3: #080f2c; }
.swatch-table[data-value="crimson"] { --felt-1: #a3263a; --felt-2: #6b1424; --felt-3: #2a060d; }
.swatch-table[data-value="royal"] { --felt-1: #6d35a3; --felt-2: #45206e; --felt-3: #1a0a30; }
.swatch-table[data-value="gold"] { --felt-1: #4a3b16; --felt-2: #2a200b; --felt-3: #0d0a03; }

.swatch-back {
    width: 66px;
    height: 92px;
    margin: 2px auto;
    border: 1px solid #fff;
    border-radius: 8px;
}

.swatch-back[data-value="classic"] {
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.09) 0 3px, transparent 3px 7px),
        linear-gradient(135deg, #1d4ed8, #3b82f6 55%, #1e3a8a);
}

.swatch-back[data-value="ocean"] {
    background: radial-gradient(circle at 20% 110%, rgba(255, 255, 255, 0.25) 0 18%, transparent 19%),
        repeating-radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 8px),
        linear-gradient(160deg, #06b6d4, #0e7490 60%, #164e63);
}

.swatch-back[data-value="flame"] {
    background: radial-gradient(ellipse at 50% 110%, #fde047 0%, transparent 45%),
        repeating-linear-gradient(-60deg, rgba(0, 0, 0, 0.12) 0 3px, transparent 3px 8px),
        linear-gradient(170deg, #f97316, #dc2626 60%, #7f1d1d);
}

.swatch-back[data-value="jade"] {
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 9px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 9px),
        linear-gradient(135deg, #10b981, #047857 60%, #064e3b);
}

.swatch-back[data-value="galaxy"] {
    background: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 20%, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle at 40% 75%, #fff 0 1px, transparent 1.5px),
        radial-gradient(ellipse at 60% 40%, rgba(236, 72, 153, 0.55), transparent 55%),
        radial-gradient(ellipse at 30% 70%, rgba(99, 102, 241, 0.6), transparent 60%),
        linear-gradient(160deg, #1e1b4b, #0f0a2e);
}

.shop-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.shop-card button {
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
    transition: transform 140ms var(--ease-out), filter 140ms ease;
}

.shop-card button:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.shop-card button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.shop-card .shop-buy,
.shop-card .shop-open {
    border-color: rgba(255, 234, 170, 0.8);
    background: linear-gradient(180deg, #ffe08a, var(--gold) 50%, #d99a1b);
    color: #2a1a00;
}

.shop-card .shop-open {
    border-color: rgba(196, 181, 253, 0.6);
    background: linear-gradient(180deg, #a78bfa, #7c3aed);
    color: #fff;
}

.shop-card .shop-equip {
    border-color: rgba(52, 211, 153, 0.6);
    color: #a7f3d0;
}

.shop-card .shop-equipped {
    border-color: transparent;
    background: rgba(52, 211, 153, 0.18);
    color: #a7f3d0;
    opacity: 1 !important;
}

.shop-empty {
    grid-column: 1 / -1;
    color: var(--muted);
    text-align: center;
}

/* ---- Reward modals (daily / missions) ----------------------------------- */

.game-modal .modal-content.reward-modal {
    position: relative;
    width: min(92vw, 440px);
    max-width: 440px;
    max-height: 90dvh;
    overflow-y: auto;
    padding: 24px 18px 18px;
    border-color: rgba(245, 196, 81, 0.3);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.modal-hero-icon {
    font-size: 46px;
    line-height: 1;
    filter: drop-shadow(0 8px 16px rgba(245, 196, 81, 0.35));
    animation: brand-bob 3s ease-in-out infinite;
}

.reward-modal h3 {
    margin: 8px 0 2px;
    font-family: var(--font-display);
    font-size: 24px;
}

.modal-sub {
    margin-bottom: 14px !important;
    color: var(--muted) !important;
    font-size: 13px !important;
}

.daily-calendar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.daily-cell {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel-raised);
}

.daily-cell small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.daily-icon {
    font-size: 24px;
}

.daily-cell strong {
    font-size: 11px;
    line-height: 1.2;
}

.daily-cell.claimed {
    opacity: 0.55;
}

.daily-cell.claimed .daily-icon {
    color: var(--win);
    font-weight: 900;
}

.daily-cell.today {
    border-color: var(--gold);
    background: rgba(245, 196, 81, 0.14);
    box-shadow: 0 0 0 1px rgba(245, 196, 81, 0.3), 0 0 18px rgba(245, 196, 81, 0.25);
    animation: nudge 1.6s ease-in-out infinite;
}

.daily-cell.jackpot {
    grid-column: span 2;
    border-color: rgba(139, 92, 246, 0.5);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(245, 196, 81, 0.12));
}

.daily-cell.pop {
    animation: level-pop 600ms var(--ease-spring);
}

.claim-btn {
    width: 100%;
}

.claim-btn.pulse {
    animation: nudge 1.4s ease-in-out infinite;
}

.missions-list {
    display: grid;
    gap: 10px;
    text-align: left;
}

.mission-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel-raised);
}

.mission-row.complete {
    border-color: rgba(245, 196, 81, 0.55);
    background: rgba(245, 196, 81, 0.08);
}

.mission-row.claimed {
    opacity: 0.55;
}

.mission-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.mission-copy strong {
    font-size: 14px;
}

.mission-copy small {
    color: var(--gold-2);
    font-size: 12px;
    font-weight: 800;
}

.mission-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
}

.mission-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-2), var(--win));
    transition: width 600ms var(--ease-out);
}

.mission-claim {
    min-width: 76px;
    min-height: 38px;
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-soft);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.mission-row.complete .mission-claim {
    border-color: rgba(255, 234, 170, 0.8);
    background: linear-gradient(180deg, #ffe08a, var(--gold) 50%, #d99a1b);
    color: #2a1a00;
    animation: nudge 1.4s ease-in-out infinite;
}

.mission-claim:disabled {
    cursor: default;
}

/* ---- Celebrations ------------------------------------------------------- */

.celebration-overlay {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(2, 6, 16, 0.78);
    opacity: 0;
    transition: opacity 220ms ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.celebration-overlay.visible {
    opacity: 1;
}

.celebration-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 10px;
    width: min(92vw, 380px);
    padding: 30px 22px 22px;
    overflow: hidden;
    border: 1px solid rgba(245, 196, 81, 0.45);
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 0%, rgba(245, 196, 81, 0.25), transparent 60%),
        linear-gradient(170deg, #1b2550, #0f1530);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(245, 196, 81, 0.18);
    text-align: center;
    transform: scale(0.9);
    transition: transform 380ms var(--ease-spring);
}

.celebration-overlay.visible .celebration-card {
    transform: scale(1);
}

.celebration-card > *:not(.celebration-rays) {
    position: relative;
}

.celebration-rays {
    position: absolute;
    top: -120px;
    left: 50%;
    width: 440px;
    height: 440px;
    background: repeating-conic-gradient(from 0deg, rgba(245, 196, 81, 0.14) 0 9deg, transparent 9deg 18deg);
    transform: translateX(-50%);
    -webkit-mask: radial-gradient(circle, #000 15%, transparent 65%);
    mask: radial-gradient(circle, #000 15%, transparent 65%);
    animation: rays-spin 14s linear infinite;
}

.celebration-kicker {
    color: var(--gold-2);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.levelup-number {
    display: grid;
    place-items: center;
    width: 128px;
    aspect-ratio: 1;
    border: 4px solid rgba(255, 226, 154, 0.9);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff1c4, var(--gold) 45%, #a86b12 100%);
    color: #2a1a00;
    font-size: 58px;
    font-weight: 900;
    box-shadow: 0 0 50px rgba(245, 196, 81, 0.55), inset 0 3px 10px rgba(255, 255, 255, 0.6);
    animation: level-pop 800ms var(--ease-spring);
}

.levelup-rank {
    padding: 6px 14px;
    border: 1px solid rgba(196, 181, 253, 0.5);
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.2);
    color: #ddd6fe;
    font-weight: 900;
}

.levelup-rewards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 4px 0 8px;
}

.reward-chip {
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
    opacity: 0;
    animation: chip-in 420ms var(--ease-spring) forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes chip-in {
    from { opacity: 0; transform: translateY(10px) scale(0.8); }
    to { opacity: 1; transform: none; }
}

.celebration-card .menu-btn {
    width: 100%;
}

.lootbox-chest {
    font-size: 96px;
    line-height: 1.1;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}

.lootbox-chest.shake {
    animation: chest-shake 1.1s ease-in-out;
}

.lootbox-chest.open {
    animation: level-pop 700ms var(--ease-spring);
    filter: drop-shadow(0 0 30px rgba(125, 211, 252, 0.8));
}

@keyframes chest-shake {
    0%, 100% { transform: rotate(0) scale(1); }
    10%, 30%, 50%, 70% { transform: rotate(-9deg) scale(1.03); }
    20%, 40%, 60%, 80% { transform: rotate(9deg) scale(1.06); }
    90% { transform: scale(1.18); }
}

.lootbox-result {
    min-height: 32px;
    color: #bae6fd;
    font-size: 26px;
    font-weight: 900;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 300ms ease, transform 300ms var(--ease-spring);
}

.lootbox-result.show {
    opacity: 1;
    transform: none;
}

.confetti-layer {
    position: fixed;
    inset: 0;
    z-index: 7000;
    overflow: hidden;
    pointer-events: none;
}

.confetti-layer i {
    position: absolute;
    top: -20px;
    left: var(--x);
    width: 8px;
    height: 14px;
    border-radius: 2px;
    animation: confetti-fall var(--duration) cubic-bezier(0.25, 0.6, 0.4, 1) var(--delay) forwards;
}

@keyframes confetti-fall {
    to {
        transform: translate(var(--drift), 110vh) rotate(var(--spin));
        opacity: 0.9;
    }
}

/* ---- Toasts ------------------------------------------------------------- */

.toast-stack {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
    z-index: 8000;
    display: grid;
    justify-items: center;
    gap: 6px;
    width: min(92vw, 380px);
    transform: translateX(-50%);
    pointer-events: none;
}

.toast {
    padding: 10px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(8, 13, 28, 0.94);
    color: var(--text);
    box-shadow: var(--shadow-md);
    font-size: 14px;
    font-weight: 800;
    opacity: 0;
    transform: translateY(-12px) scale(0.95);
    transition: opacity 240ms ease, transform 300ms var(--ease-spring);
}

.toast.show {
    opacity: 1;
    transform: none;
}

.toast--reward {
    border-color: rgba(245, 196, 81, 0.6);
    color: var(--gold-2);
}

.toast--error {
    border-color: rgba(248, 113, 113, 0.6);
    color: #fecaca;
}

/* ---- Standalone PWA and small screens ----------------------------------- */

@media (display-mode: standalone) {
    html {
        background: var(--bg-0);
    }

    #main-menu {
        background: transparent;
    }
}

@media (max-width: 600px) {
    .menu-topbar.hud,
    .menu-topbar.hud.authenticated {
        padding: 6px 8px;
    }

    .hud-avatar-btn {
        width: 46px;
        height: 46px;
    }

    .hud #user-avatar,
    #user-avatar {
        inset: 5px;
        width: 36px;
        height: 36px;
    }

    .hud #user-name,
    #user-name {
        max-width: 100%;
        font-size: 13px;
    }

    .hud-xp {
        width: min(120px, 30vw);
    }

    .hud-xp-text {
        display: none;
    }

    .currency-pill,
    .diamond-balance-pill,
    #menu-diamonds {
        min-width: 0;
        min-height: 30px;
        padding: 3px 8px 3px 5px;
    }

    .brand-mark {
        width: 52px;
        height: 52px;
    }

    .brand {
        margin-bottom: 12px;
    }

    .menu-btn.play-hero {
        min-height: 70px;
    }

    .play-hero-copy strong {
        font-size: 18px;
    }

    .event-tile {
        flex-direction: column;
        gap: 2px;
        padding: 8px 4px;
        text-align: center;
    }

    .event-copy {
        justify-items: center;
    }

    .profile-economy-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .profile-economy-tile {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .profile-economy-icon {
        grid-row: auto;
    }

    .daily-calendar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .daily-cell.jackpot {
        grid-column: span 3;
    }
}

@media (max-width: 380px) {
    .hud-player-copy .hud-rank,
    .hud-guest-copy small {
        display: none;
    }

    .language-btn {
        padding: 5px 8px;
    }

    .mode-grid {
        grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
        gap: 6px;
    }

    .menu-btn.mode-card {
        min-height: 88px;
        padding: 10px 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-suit,
    .brand-mark,
    .menu-btn.play-hero::after,
    .result-rays,
    .celebration-rays {
        animation: none !important;
    }
}

/* ==========================================================================
   Throwable effects (effects.js)
   ========================================================================== */

.fx-layer {
    position: fixed;
    inset: 0;
    z-index: 5200;
    overflow: hidden;
    pointer-events: none;
}

.fx-layer > * {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
}

.fx-projectile {
    z-index: 3;
}

.fx-projectile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.45));
}

.fx-fuse {
    position: absolute;
    top: 2%;
    right: 12%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 20%, #ffe066 40%, #ff7a18 70%, transparent 72%);
    box-shadow: 0 0 12px 4px rgba(255, 170, 40, 0.8);
    animation: fx-fuse-flicker 90ms steps(2) infinite;
}

@keyframes fx-fuse-flicker {
    50% { transform: scale(1.5); opacity: 0.75; }
}

.fx-sizzle {
    animation: fx-sizzle 90ms linear infinite;
}

@keyframes fx-sizzle {
    0% { transform: translate(-2px, 1px) rotate(-8deg) scale(1.05); }
    50% { transform: translate(2px, -1px) rotate(8deg) scale(1.12); }
    100% { transform: translate(-1px, 0) rotate(-4deg) scale(1.08); }
}

.fx-shadow {
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
    filter: blur(2px);
    z-index: 1;
}

.fx-particle,
.fx-spark {
    border-radius: 50%;
    z-index: 4;
}

.fx-spark {
    box-shadow: 0 0 8px 1px rgba(255, 180, 60, 0.75);
}

.fx-shape-seed {
    border-radius: 50% / 60%;
}

.fx-shape-debris {
    border-radius: 2px;
    box-shadow: none;
}

.fx-smoke {
    border-radius: 50%;
    filter: blur(3px);
    z-index: 2;
}

.fx-flash {
    inset: 0;
    width: auto !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 6;
    mix-blend-mode: screen;
}

.fx-ring {
    border-style: solid;
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(255, 190, 80, 0.6), inset 0 0 18px rgba(255, 190, 80, 0.4);
    z-index: 4;
}

.fx-fireball {
    border-radius: 50%;
    background: radial-gradient(circle, #fffbe0 0 10%, #ffe066 22%, #ffa227 42%, #ff5a1f 58%, rgba(190, 30, 20, 0.7) 70%, transparent 74%);
    box-shadow: 0 0 60px 20px rgba(255, 120, 30, 0.55);
    mix-blend-mode: screen;
    z-index: 5;
}

.fx-splat {
    width: 96px;
    height: 84px;
    border-radius: 46% 54% 42% 58% / 52% 40% 60% 48%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 170, 150, 0.9) 0 7%, transparent 8%),
        radial-gradient(circle at 70% 64%, rgba(255, 220, 140, 0.9) 0 4%, transparent 5%),
        radial-gradient(circle at 42% 70%, rgba(255, 220, 140, 0.9) 0 3.5%, transparent 4.5%),
        radial-gradient(circle at 50% 50%, #e53526 0 42%, #a8120f 70%);
    box-shadow:
        26px -16px 0 -18px #d62828,
        -30px 8px 0 -20px #c81e1e,
        12px 30px 0 -22px #d62828,
        -14px -28px 0 -24px #e0332b,
        0 6px 18px rgba(120, 0, 0, 0.45);
    z-index: 5;
}

.fx-drip {
    position: absolute;
    top: 60%;
    left: calc(50% + var(--drip-x));
    width: 9px;
    height: 0;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(180deg, #b3140f, #d62828);
    animation: fx-drip 1100ms ease-in var(--drip-delay) forwards;
}

@keyframes fx-drip {
    to { height: var(--drip-length); }
}

.fx-comic {
    z-index: 7;
    padding: 2px 8px;
    color: #fff;
    font-family: "Arial Black", "Segoe UI", sans-serif;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0.02em;
    white-space: nowrap;
    -webkit-text-stroke: 2px #2a0a00;
    paint-order: stroke fill;
    text-shadow: 3px 3px 0 #2a0a00;
}

.fx-comic--tomato { color: #ff5a4a; }
.fx-comic--bomb { color: #ffc247; }
.fx-comic--dynamite { color: #ffe066; font-size: 40px; }

/* Target reactions on the avatars. */
.avatar-outside.fx-windup {
    animation: fx-windup 380ms cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes fx-windup {
    35% { transform: scale(0.82) rotate(-10deg); }
    70% { transform: scale(1.12) rotate(6deg); }
}

.avatar-outside.fx-hit-tomato {
    animation: fx-hit 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: sepia(0.6) saturate(3) hue-rotate(-30deg) brightness(0.95);
    transition: filter 900ms ease 500ms;
}

.avatar-outside.fx-hit-blast {
    animation: fx-hit 640ms cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: grayscale(0.8) brightness(0.35) contrast(1.2);
    transition: filter 1000ms ease 400ms;
}

@keyframes fx-hit {
    0%, 100% { transform: translate(0, 0) scale(1); }
    18% { transform: translate(-6px, 3px) rotate(-12deg) scale(1.2); }
    40% { transform: translate(6px, -3px) rotate(9deg) scale(0.9); }
    62% { transform: translate(-3px, 1px) rotate(-4deg) scale(1.05); }
}

/* Throw menu: consistent with the new glass surfaces. */
.throw-menu {
    border-color: rgba(245, 196, 81, 0.5);
    border-radius: 16px;
    background: rgba(8, 13, 28, 0.94);
}

.throw-item-btn:hover,
.throw-item-btn:focus-visible {
    transform: translateY(-3px) scale(1.08) rotate(-4deg);
}

/* ==========================================================================
   End-of-match showdown (GameUI.playEndSequence)
   ========================================================================== */

.board-container {
    position: relative;
}

#game-screen.end-reveal .column {
    filter: brightness(0.55) saturate(0.7);
    transition: filter 300ms ease;
}

#game-screen.end-reveal .column.reveal-focus,
#game-screen.end-reveal .column.reveal-win,
#game-screen.end-reveal .column.reveal-tie {
    filter: none;
}

#game-screen.end-reveal .column.reveal-lose {
    filter: grayscale(0.8) brightness(0.5);
}

.column.reveal-focus {
    animation: reveal-focus 620ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes reveal-focus {
    0% { transform: scale(1); }
    35% { transform: scale(1.08); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.35); }
    100% { transform: scale(1); }
}

.column.reveal-win {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(245, 196, 81, 0.6), 0 0 26px rgba(245, 196, 81, 0.45);
}

.column.reveal-lose {
    opacity: 0.72;
}

.column-hand-badge {
    position: absolute;
    left: 50%;
    z-index: 30;
    max-width: 118%;
    padding: 3px 7px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(5, 10, 22, 0.92);
    color: var(--text);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transform: translateX(-50%);
    animation: badge-in 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    pointer-events: none;
}

/* Badges face the center of the table. */
.player-columns .column-hand-badge { top: -12px; }
.opponent-columns .column-hand-badge { bottom: -12px; }

.column-hand-badge.win {
    border-color: rgba(255, 234, 170, 0.9);
    background: linear-gradient(180deg, #ffe08a, #f5c451 50%, #d99a1b);
    color: #2a1a00;
}

.column-hand-badge.lose {
    color: #fca5a5;
}

.column-hand-badge.tie {
    color: #e2e8f0;
}

@keyframes badge-in {
    from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.6); }
    to { opacity: 1; transform: translateX(-50%) scale(1); }
}

.end-scoreboard {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    border: 1px solid rgba(245, 196, 81, 0.55);
    border-radius: 999px;
    background: rgba(5, 10, 22, 0.9);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 30px rgba(245, 196, 81, 0.2);
    font-size: 30px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    transform: translate(-50%, -50%);
    animation: pop-in 320ms var(--ease-spring);
}

.end-score-me { color: var(--win); }
.end-score-them { color: var(--loss); }
.end-score-sep { color: var(--muted); }

.end-score-me.bump,
.end-score-them.bump {
    display: inline-block;
    animation: bump 480ms var(--ease-spring);
}

.end-banner {
    position: absolute;
    inset: 0;
    z-index: 4500;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 20px;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 45%, rgba(5, 10, 22, 0.55), rgba(5, 10, 22, 0.88));
    opacity: 0;
    transition: opacity 280ms ease;
    cursor: pointer;
}

.end-banner.visible {
    opacity: 1;
}

.end-banner.dismissed {
    opacity: 0;
    pointer-events: none;
}

.end-banner-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    margin: -450px 0 0 -450px;
    background: repeating-conic-gradient(from 0deg, rgba(245, 196, 81, 0.16) 0 8deg, transparent 8deg 16deg);
    -webkit-mask: radial-gradient(circle, #000 12%, transparent 60%);
    mask: radial-gradient(circle, #000 12%, transparent 60%);
    animation: rays-spin-center 22s linear infinite;
    pointer-events: none;
}

@keyframes rays-spin-center {
    to { transform: rotate(360deg); }
}

.end-banner--loss .end-banner-rays,
.end-banner--tie .end-banner-rays {
    display: none;
}

.end-banner-title {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(52px, 16vw, 104px);
    font-style: italic;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.end-banner.visible .end-banner-title {
    animation: banner-slam 700ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes banner-slam {
    0% { opacity: 0; transform: scale(2.6) rotate(-6deg); filter: blur(8px); }
    55% { opacity: 1; transform: scale(0.92) rotate(1deg); filter: blur(0); }
    100% { transform: scale(1) rotate(0); }
}

.end-banner--win .end-banner-title {
    padding: 0 0.12em;
    background: linear-gradient(180deg, #fff6d6, var(--gold-2) 40%, var(--gold) 70%, #b7791f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 8px 24px rgba(245, 196, 81, 0.55));
}

.end-banner--loss .end-banner-title {
    color: #fca5a5;
    text-shadow: 0 6px 24px rgba(248, 113, 113, 0.35);
}

.end-banner--loss.visible .end-banner-title {
    animation: banner-drop 900ms cubic-bezier(0.3, 1.2, 0.4, 1) both;
}

@keyframes banner-drop {
    0% { opacity: 0; transform: translateY(-80px); }
    60% { opacity: 1; transform: translateY(8px) rotate(-2deg); }
    75% { transform: translateY(-3px) rotate(1deg); }
    100% { transform: none; }
}

.end-banner--tie .end-banner-title {
    color: var(--tie);
}

.end-banner-score {
    position: relative;
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    animation: fadeIn 400ms ease 350ms both;
}

.end-banner-cta {
    position: relative;
    min-width: 220px;
    margin-top: 6px;
    animation: fadeIn 400ms ease 600ms both;
}

.end-banner-hint {
    position: relative;
    color: var(--muted);
    font-size: 12px;
    animation: fadeIn 400ms ease 900ms both;
}

/* 5–0 sweeps: "Juego perfecto" for the winner, a broom for the loser. */
.end-banner--perfect .end-banner-title,
.end-banner--swept .end-banner-title {
    max-width: 100%;
    font-size: clamp(40px, 11vw, 92px);
    text-align: center;
}

.end-banner--perfect .end-banner-title {
    background: linear-gradient(100deg, #b7791f 0%, var(--gold) 25%, #fff6d6 45%, var(--gold-2) 55%, var(--gold) 75%, #b7791f 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

.end-banner--perfect.visible .end-banner-title {
    animation:
        banner-slam 700ms cubic-bezier(0.2, 1.4, 0.4, 1) both,
        perfect-shimmer 2.4s linear 700ms infinite;
}

@keyframes perfect-shimmer {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

.end-banner--perfect .end-banner-rays {
    background: repeating-conic-gradient(from 0deg, rgba(245, 196, 81, 0.28) 0 8deg, transparent 8deg 16deg);
    animation-duration: 12s;
}

.end-banner-stars {
    position: relative;
    display: flex;
    gap: 8px;
    font-size: clamp(28px, 7vw, 44px);
    line-height: 1;
}

.end-banner-stars span {
    color: var(--gold-2);
    text-shadow: 0 0 18px rgba(245, 196, 81, 0.8);
    animation: perfect-star 520ms cubic-bezier(0.2, 1.6, 0.4, 1) both;
    animation-delay: calc(450ms + var(--i) * 160ms);
}

.end-banner-stars span:nth-child(3) {
    font-size: 1.3em;
}

@keyframes perfect-star {
    0% { opacity: 0; transform: scale(0) rotate(-120deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

.end-banner--swept.visible .end-banner-title {
    animation: banner-swept-in 1.1s cubic-bezier(0.25, 1.1, 0.4, 1) 250ms both;
}

@keyframes banner-swept-in {
    0% { opacity: 0; transform: translateX(70vw) skewX(-25deg); }
    55% { opacity: 1; transform: translateX(-14px) skewX(10deg); }
    75% { transform: translateX(6px) skewX(-4deg); }
    100% { transform: none; }
}

.end-banner-broom {
    position: absolute;
    left: 50%;
    bottom: 6%;
    width: 120px;
    height: 220px;
    margin-left: -60px;
    transform-origin: 50% 0;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
    pointer-events: none;
    animation: broom-sweep 2.2s ease-in-out both;
}

.end-banner-broom svg {
    display: block;
}

@keyframes broom-sweep {
    0% { opacity: 0; transform: translateX(70vw) rotate(-18deg); }
    8% { opacity: 1; }
    24% { transform: translateX(22vw) rotate(-38deg); }
    36% { transform: translateX(34vw) rotate(-12deg); }
    56% { transform: translateX(-8vw) rotate(-38deg); }
    68% { transform: translateX(4vw) rotate(-12deg); }
    90% { opacity: 1; transform: translateX(-42vw) rotate(-38deg); }
    100% { opacity: 0; transform: translateX(-72vw) rotate(-30deg); }
}

@media (max-width: 600px) {
    /* Narrow columns: let long hand names wrap instead of truncating. */
    .column-hand-badge {
        width: max-content;
        max-width: calc(100% + 10px);
        padding: 2px 5px;
        border-radius: 8px;
        font-size: 9px;
        line-height: 1.1;
        text-align: center;
        white-space: normal;
    }

    /* Both boards touch on phones, so each badge sits in the empty end of
       its own column (cards stack toward the center of the table). */
    .player-columns .column-hand-badge { top: auto; bottom: 6px; }
    .opponent-columns .column-hand-badge { bottom: auto; top: 6px; }

    .end-scoreboard {
        padding: 6px 16px;
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .end-banner-rays,
    .end-banner-stars span {
        animation: none !important;
    }

    .end-banner-broom {
        display: none;
    }
}

/* ==========================================================================
   Opening deal pairing, deck pile and the rival's hidden card
   ========================================================================== */

/* Both columns of a pair light up while their cards are dealt face to face. */
.column.lane-pulse {
    animation: lane-pulse 1.3s ease-out;
}

@keyframes lane-pulse {
    0% { box-shadow: 0 0 0 0 rgba(245, 196, 81, 0.8); }
    25% { box-shadow: 0 0 0 2px rgba(245, 196, 81, 0.9), 0 0 24px rgba(245, 196, 81, 0.55); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Deck pile: sits in the tray, under the avatars column, and is where every
   dealt card comes from. */
.board-container {
    --avatar-col: clamp(64px, 12vw, 120px);
}

.deck-pile {
    position: absolute;
    top: 50%;
    right: 0;
    width: var(--avatar-col);
    height: 100%;
    max-height: 120px;
    transform: translateY(-50%);
    pointer-events: none;
}

.deck-pile span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(62%, 58px);
    aspect-ratio: 0.72;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 7px;
    background: var(--back);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), 0 3px 8px rgba(0, 0, 0, 0.45);
    transform: translate(-50%, -50%) translate(calc(var(--i) * -2px), calc(var(--i) * -2px));
}

.deck-pile span:nth-child(1) { --i: 0; }
.deck-pile span:nth-child(2) { --i: 1; }
.deck-pile span:nth-child(3) { --i: 2; }
.deck-pile span:nth-child(4) { --i: 3; }

.deck-pile span:last-child::before {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.6);
    content: '♠';
    font-size: 18px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

#game-screen.is-dealing .deck-pile {
    animation: deck-bob 0.35s ease-in-out infinite alternate;
}

@keyframes deck-bob {
    to { transform: translateY(-50%) translateY(-3px) rotate(-2deg); }
}

/* While the opening deal runs there is no card to place yet. */
#game-screen.is-dealing #current-card-container {
    visibility: hidden;
}

/* A new card to place slides out of the deck. */
#current-card.from-deck {
    animation: from-deck 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes from-deck {
    from { transform: translate(var(--from-x, 0), var(--from-y, 0)) scale(0.6) rotate(12deg); opacity: 0.4; }
    to { transform: none; opacity: 1; }
}

/* Rounds 16-20: the rival's card is private; show only its back. */
#current-card.rival-hidden {
    color: transparent;
}

#current-card-container.is-rival-hidden .card-instruction,
#current-card-container.not-my-turn .card-instruction {
    display: none;
}

.rival-card-caption {
    display: none;
    max-width: min(80vw, 420px);
    margin: 5px auto 0;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(5, 10, 22, 0.7);
    color: var(--text-soft);
    font-size: clamp(11px, 1.6vw, 14px);
    line-height: 1.25;
}

#current-card-container.is-rival-hidden .rival-card-caption {
    display: block;
}

@media (max-width: 600px) {
    .board-container {
        --avatar-col: clamp(52px, 18vw, 70px);
    }

    .rival-card-caption {
        font-size: 10px;
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    .board-container {
        --avatar-col: 48px;
    }
}

/* ==========================================================================
   Rival player card
   ========================================================================== */

.avatar-outside.avatar-tappable {
    cursor: pointer;
    transition: transform 160ms var(--ease-spring), box-shadow 160ms ease;
}

.avatar-outside.avatar-tappable:hover,
.avatar-outside.avatar-tappable:focus-visible {
    transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(245, 196, 81, 0.35), 0 4px 12px rgba(0, 0, 0, 0.35);
}

.game-modal .modal-content.player-card {
    position: relative;
    display: grid;
    gap: 14px;
    width: min(94vw, 420px);
    max-width: 420px;
    max-height: 92dvh;
    overflow-y: auto;
    padding: 20px 16px 16px;
    border-color: rgba(245, 196, 81, 0.35);
    background:
        radial-gradient(circle at 20% 0%, rgba(245, 196, 81, 0.18), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.2), transparent 50%),
        linear-gradient(165deg, #182247, #0f1530);
    text-align: left;
}

.pc-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding-right: 34px;
}

.pc-avatar-wrap {
    position: relative;
    width: 76px;
    height: 76px;
}

.pc-avatar-wrap img {
    width: 100%;
    height: 100%;
    border: 3px solid var(--gold);
    border-radius: 50%;
    background: var(--bg-2);
    object-fit: cover;
    box-shadow: 0 0 0 4px rgba(245, 196, 81, 0.18), 0 10px 24px rgba(0, 0, 0, 0.4);
}

.pc-level {
    position: absolute;
    right: -4px;
    bottom: -2px;
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 2px solid #0f1530;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gold-2), var(--gold));
    color: #2a1a00;
    font-size: 13px;
    font-weight: 900;
}

.pc-identity {
    display: grid;
    justify-items: start;
    gap: 4px;
    min-width: 0;
}

.pc-identity h3 {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-kind {
    color: var(--muted);
    font-size: 12px;
}

.pc-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pc-stat {
    display: grid;
    justify-items: center;
    gap: 1px;
    padding: 9px 4px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    text-align: center;
    animation: pop-in 260ms var(--ease-out) both;
}

.pc-stat span {
    font-size: 16px;
}

.pc-stat strong {
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.pc-stat small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pc-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--gold-2);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pc-h2h,
.pc-throws {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}

.pc-h2h-score {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    text-align: center;
}

.pc-h2h-score div {
    display: grid;
    gap: 1px;
}

.pc-h2h-score strong {
    font-size: 26px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.pc-h2h-score div:nth-child(1) strong { color: var(--win); }
.pc-h2h-score div:nth-child(2) strong { color: var(--tie); }
.pc-h2h-score div:nth-child(3) strong { color: var(--loss); }

.pc-h2h-score small,
.pc-h2h-recent small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.pc-h2h-recent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.pc-h2h-dots {
    display: flex;
    gap: 5px;
}

.pc-dot {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #0b1020;
    font-size: 11px;
    font-weight: 900;
}

.pc-dot--win { background: var(--win); }
.pc-dot--loss { background: var(--loss); }
.pc-dot--draw { background: var(--tie); }

.pc-h2h-empty {
    text-align: center;
}

.pc-note {
    margin: 0 !important;
    padding: 10px 12px;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    color: var(--text-soft) !important;
    font-size: 13px !important;
    line-height: 1.4;
}

.pc-diamonds {
    min-height: 26px;
    padding: 2px 8px 2px 5px;
    text-transform: none;
    letter-spacing: 0;
}

/* The throw menu used to float next to the avatar; inside the card it is a
   simple row of buttons. */
.player-card .throw-menu {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    transform: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.player-card .throw-item-btn {
    width: 100%;
    height: 74px;
    border-radius: 14px;
}

.player-card .throw-item-icon {
    width: 50px;
    height: 50px;
}

.player-card .throw-cost {
    right: 6px;
    bottom: 6px;
}

.player-card .throw-item-btn:disabled {
    cursor: not-allowed;
    filter: grayscale(0.7);
    opacity: 0.45;
    transform: none;
}

.pc-throw-hint {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

/* Bottom sheet on phones. */
@media (max-width: 600px) {
    #opponent-card-modal.active {
        align-items: flex-end;
    }

    .game-modal .modal-content.player-card {
        width: 100%;
        max-width: none;
        border-radius: 24px 24px 0 0;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
        animation: sheet-up 320ms var(--ease-out);
    }

    @keyframes sheet-up {
        from { transform: translateY(100%); }
        to { transform: none; }
    }
}

/* ==========================================================================
   Own player menu: timeout strikes and surrender
   ========================================================================== */

.strike-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.strike-dot {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 2px dashed var(--line-strong);
    border-radius: 50%;
    font-size: 16px;
}

.strike-dot.used {
    border: 2px solid rgba(248, 113, 113, 0.8);
    background: rgba(248, 113, 113, 0.18);
    box-shadow: 0 0 12px rgba(248, 113, 113, 0.35);
}

.self-strikes-text {
    display: block;
    margin-top: 8px;
    color: var(--text-soft);
    font-size: 12px;
    text-align: center;
}

.menu-btn.surrender-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 1px solid rgba(248, 113, 113, 0.7);
    background: linear-gradient(180deg, #ef4444, #b91c1c);
    color: #fff;
    box-shadow: 0 8px 20px rgba(185, 28, 28, 0.35);
}

.menu-btn.surrender-btn:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.surrender-confirm .modal-hero-icon,
.logout-confirm .modal-hero-icon {
    animation: none;
}

.confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.confirm-actions .menu-btn {
    min-height: 48px;
    padding: 10px;
    font-size: 13px;
}

/* Timeout warnings must stand out on the felt. */
.game-notification.danger {
    border-color: rgba(248, 113, 113, 0.8);
    background: rgba(127, 29, 29, 0.95);
}

/* ==========================================================================
   Friends: requests, list and match invites
   ========================================================================== */

#friends-screen.active {
    justify-content: flex-start;
}

.friends-container {
    display: grid;
    gap: 12px;
}

.friends-container .panel-title {
    margin: 4px 0 0;
}

.friend-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.friend-add-row input {
    min-width: 0;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: rgba(3, 7, 18, 0.55);
    color: var(--text);
    font-size: 15px;
}

.friend-add-row input:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 196, 81, 0.18);
}

.friend-add-row .menu-btn {
    min-height: 46px;
    padding: 8px 14px;
    font-size: 12px;
}

.friends-status {
    min-height: 16px;
    margin: -4px 2px 0;
    color: var(--win);
    font-size: 13px;
}

.friends-status.error {
    color: var(--loss);
}

.friends-status:empty {
    display: none;
}

.friends-section {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}

#friends-incoming {
    border-color: rgba(245, 196, 81, 0.45);
    background: rgba(245, 196, 81, 0.07);
}

.friends-list {
    display: grid;
    gap: 8px;
}

.friend-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.2);
    animation: pop-in 240ms var(--ease-out) both;
}

.friend-avatar {
    position: relative;
    width: 42px;
    height: 42px;
}

.friend-avatar img {
    width: 100%;
    height: 100%;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: var(--bg-2);
    object-fit: cover;
}

.friend-avatar.online::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    border: 2px solid var(--bg-1);
    border-radius: 50%;
    background: var(--win);
    content: '';
}

.friend-copy {
    display: grid;
    min-width: 0;
}

.friend-copy strong,
.friend-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-copy small {
    color: var(--muted);
    font-size: 11px;
}

.friend-actions {
    display: flex;
    gap: 6px;
}

.friend-btn {
    min-width: 38px;
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
}

.friend-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.friend-btn.accept,
.friend-btn.invite {
    border-color: rgba(255, 234, 170, 0.8);
    background: linear-gradient(180deg, #ffe08a, var(--gold) 50%, #d99a1b);
    color: #2a1a00;
}

.friend-btn.decline,
.friend-btn.remove {
    color: #fca5a5;
}

.friends-empty {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.nav-btn {
    position: relative;
}

.nav-btn .notif-dot {
    top: 4px;
    right: 18%;
}

.game-invite {
    display: grid;
    justify-items: center;
    gap: 6px;
}

.game-invite-avatar {
    width: 84px;
    height: 84px;
    border: 3px solid var(--gold);
    border-radius: 50%;
    background: var(--bg-2);
    object-fit: cover;
    box-shadow: 0 0 0 5px rgba(245, 196, 81, 0.18), 0 0 30px rgba(245, 196, 81, 0.35);
    animation: brand-bob 2.4s ease-in-out infinite;
}

.game-invite-countdown {
    width: 100%;
    height: 6px;
    margin: 4px 0 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.game-invite-countdown span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--loss), var(--gold), var(--win));
}

.game-invite .confirm-actions {
    width: 100%;
}

/* Add friend: rival card and match history */
.menu-btn.friend-cta {
    width: 100%;
    border: 1px solid rgba(52, 211, 153, 0.6);
    background: linear-gradient(180deg, #34d399, #059669);
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
}

.menu-btn.friend-cta.done {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-soft);
    opacity: 1;
}

#history-list .history-row {
    gap: 10px;
}

#history-list .history-row > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.history-friend-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(52, 211, 153, 0.6);
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.14);
    color: #a7f3d0;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}

.history-friend-btn:disabled {
    border-color: var(--line);
    background: transparent;
    cursor: default;
}

/* ==========================================================================
   Mini chat. It is the board's fourth row, so both boards give up the same
   height (the empty ends of the columns) and the bar lines up under the
   player's columns, with the avatar column kept free on the right.
   ========================================================================== */

.board-container {
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) auto;
}

.game-chat {
    grid-row: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--avatar-col);
    gap: clamp(4px, 1.5vw, 12px);
    min-width: 0;
    padding: 6px 0 2px;
}

.game-chat-inner {
    grid-column: 1;
    display: grid;
    gap: 6px;
    justify-self: center;
    width: 100%;
    max-width: 720px;
    min-width: 0;
}

/* Same offset the column rows use on wider screens. */
@media (min-width: 601px) {
    .game-chat-inner {
        transform: translateX(clamp(32px, 6.5vw, 66px));
    }
}

.chat-phrases {
    display: flex;
    gap: 6px;
    min-width: 0;
    padding: 1px 1px 3px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
}

.chat-phrases::-webkit-scrollbar {
    display: none;
}

.chat-chip {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(5, 10, 22, 0.6);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 140ms var(--ease-out), background 140ms ease, border-color 140ms ease;
}

.chat-chip:hover {
    border-color: rgba(245, 196, 81, 0.6);
    background: rgba(245, 196, 81, 0.14);
}

.chat-chip:active {
    transform: scale(0.95);
}

.chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
}

#chat-input {
    min-width: 0;
    min-height: 38px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(5, 10, 22, 0.65);
    color: var(--text);
    font-size: 16px; /* 16px keeps iOS from zooming into the field */
    -webkit-user-select: text;
    user-select: text;
}

#chat-input::placeholder {
    color: rgba(195, 203, 228, 0.5);
}

#chat-input:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 196, 81, 0.18);
}

.chat-icon-btn {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background: rgba(5, 10, 22, 0.65);
    color: var(--text);
    font-size: 15px;
    cursor: pointer;
}

.chat-icon-btn.chat-send {
    border-color: rgba(255, 234, 170, 0.8);
    background: linear-gradient(180deg, #ffe08a, var(--gold) 50%, #d99a1b);
    color: #2a1a00;
    font-weight: 900;
}

.chat-icon-btn.active {
    border-color: rgba(248, 113, 113, 0.6);
    background: rgba(248, 113, 113, 0.14);
}

.game-chat.sending .chat-chip,
.game-chat.sending .chat-send {
    opacity: 0.6;
    pointer-events: none;
}

/* Speech bubbles by the avatars. */
.player-info-block {
    position: relative;
}

.chat-bubble {
    position: absolute;
    right: 0;
    z-index: 60;
    width: max-content;
    max-width: min(60vw, 260px);
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    background: #f8fafc;
    color: #0b1020;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
    white-space: normal;
    animation: bubble-in 260ms var(--ease-spring);
    pointer-events: none;
}

.chat-bubble::after {
    position: absolute;
    right: 18px;
    width: 12px;
    height: 12px;
    background: inherit;
    content: '';
    transform: rotate(45deg);
}

/* Mine opens upward, the rival's downward, both toward the table. */
.chat-bubble--me {
    bottom: calc(100% + 10px);
    border-bottom-right-radius: 6px;
}

.chat-bubble--me::after {
    bottom: -6px;
}

.chat-bubble--rival {
    top: calc(100% + 10px);
    border-color: rgba(245, 196, 81, 0.5);
    background: #fff5d6;
    border-top-right-radius: 6px;
}

.chat-bubble--rival::after {
    top: -6px;
}

.chat-bubble.leaving {
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
    transition: opacity 280ms ease, transform 280ms ease;
}

@keyframes bubble-in {
    from { opacity: 0; transform: translateY(6px) scale(0.85); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
    .game-chat {
        padding-top: 4px;
    }

    .chat-chip {
        min-height: 30px;
        padding: 4px 10px;
        font-size: 12px;
    }

    #chat-input,
    .chat-icon-btn {
        min-height: 36px;
        height: 36px;
    }

    .chat-icon-btn {
        width: 36px;
    }

    .chat-bubble {
        font-size: 13px;
    }
}

/* Short landscape phones: keep only the text row. */
@media (orientation: landscape) and (max-height: 600px) {
    .game-chat {
        gap: 3px;
        padding: 2px 0 0;
    }

    .chat-phrases {
        display: none;
    }

    #chat-input,
    .chat-icon-btn {
        min-height: 30px;
        height: 30px;
        font-size: 14px;
    }

    .chat-icon-btn {
        width: 30px;
    }
}

/* ==========================================================================
   Spectators
   ========================================================================== */

/* Players: how many people are watching. */
.spectator-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 3px 10px;
    border: 1px solid rgba(167, 139, 250, 0.6);
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.2);
    color: #ddd6fe;
    font-size: 13px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Spectator view: a banner on top and no controls that belong to players. */
.spectator-banner {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin: 0 auto 4px;
    width: 100%;
    max-width: 720px;
    padding: 6px 8px 6px 12px;
    border: 1px solid rgba(167, 139, 250, 0.55);
    border-radius: 999px;
    background: rgba(46, 16, 101, 0.75);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.spectator-eye {
    font-size: 16px;
    animation: dot-pulse 2s ease-in-out infinite;
    border-radius: 50%;
}

.spectator-banner-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #ede9fe;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spectator-leave-btn {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 4px 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.spectator-leave-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

body.spectating .game-chat,
body.spectating #show-results-now-btn,
body.spectating #game-diamonds,
body.spectating .card-instruction {
    display: none !important;
}


body.spectating .column.clickable,
body.spectating .avatar-outside.avatar-tappable {
    cursor: default;
}

body.spectating .column.clickable:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.16);
    transform: none;
}

.friend-btn.watch {
    border-color: rgba(167, 139, 250, 0.7);
    background: linear-gradient(180deg, #a78bfa, #7c3aed);
    color: #fff;
}

/* ==========================================================================
   Spectator gifts
   ========================================================================== */

/* The gift bar takes the chat's row while watching. */
.spectator-gifts {
    display: none;
    grid-row: 4;
    grid-template-columns: minmax(0, 1fr) var(--avatar-col);
    gap: clamp(4px, 1.5vw, 12px);
    min-width: 0;
    padding: 6px 0 2px;
}

body.spectating .spectator-gifts {
    display: grid;
}

body.spectating .board-container {
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) auto;
}

.spectator-gifts-inner {
    grid-column: 1;
    display: grid;
    gap: 6px;
    justify-self: center;
    width: 100%;
    max-width: 720px;
    min-width: 0;
}

@media (min-width: 601px) {
    .spectator-gifts-inner {
        transform: translateX(clamp(32px, 6.5vw, 66px));
    }
}

.gift-targets {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.gift-label {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.gift-target {
    flex: 1 1 0;
    min-width: 0;
    min-height: 32px;
    padding: 4px 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(5, 10, 22, 0.6);
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.gift-target.selected {
    border-color: rgba(167, 139, 250, 0.8);
    background: rgba(139, 92, 246, 0.3);
    color: #fff;
}

.gift-balance {
    flex: 0 0 auto;
}

.gift-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.gift-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: rgba(5, 10, 22, 0.65);
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 140ms var(--ease-out), border-color 140ms ease;
}

.gift-item > span:first-child {
    font-size: 20px;
}

.gift-item small {
    color: #bae6fd;
    font-size: 11px;
}

.gift-item:hover:not(:disabled) {
    border-color: rgba(245, 196, 81, 0.6);
    transform: translateY(-2px);
}

.gift-item:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Center-left banner: who sent the gift and to whom. */
.gift-announce {
    position: fixed;
    top: 50%;
    left: max(10px, env(safe-area-inset-left));
    z-index: 5150;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(70vw, 280px);
    padding: 8px 14px 8px 8px;
    border: 1px solid rgba(245, 196, 81, 0.55);
    border-radius: 999px;
    background: rgba(8, 13, 28, 0.94);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(245, 196, 81, 0.2);
    opacity: 0;
    transform: translate(-120%, -50%);
    transition: transform 380ms var(--ease-spring), opacity 250ms ease;
    pointer-events: none;
}

.gift-announce.visible {
    opacity: 1;
    transform: translate(0, -50%);
}

.gift-announce-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    background: var(--bg-2);
    object-fit: cover;
}

.gift-announce-copy {
    display: grid;
    min-width: 0;
}

.gift-announce-copy strong,
.gift-announce-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gift-announce-copy strong {
    color: var(--text);
    font-size: 14px;
}

.gift-announce-copy small {
    color: var(--gold-2);
    font-size: 13px;
    font-weight: 800;
}

/* Gift effects */
.fx-emoji {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 40px;
    line-height: 1;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4));
}

.fx-heart,
.fx-bloom {
    z-index: 6;
    color: #f472b6;
    font-size: 22px;
    line-height: 1;
    text-shadow: 0 0 10px rgba(244, 114, 182, 0.7);
}

.fx-bloom {
    font-size: 64px;
    filter: drop-shadow(0 0 18px rgba(244, 63, 94, 0.6));
}

.fx-shape-petal {
    border-radius: 60% 0 60% 0;
    box-shadow: none;
}

.fx-comic--kiss { color: #f472b6; }
.fx-comic--flower { color: #fb7185; font-size: 42px; }

.avatar-outside.fx-hit-kiss {
    animation: fx-hit 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 0 0 4px rgba(244, 114, 182, 0.7), 0 0 26px rgba(244, 114, 182, 0.8);
}

.avatar-outside.fx-hit-flower {
    animation: fx-windup 600ms cubic-bezier(0.3, 1.6, 0.5, 1);
    box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.6), 0 0 24px rgba(251, 113, 133, 0.7);
}

/* ==========================================================================
   Install the app (home screen)
   ========================================================================== */

.install-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 10px 10px 12px;
    border: 1px solid rgba(34, 211, 238, 0.45);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.18), transparent 55%),
        rgba(8, 13, 28, 0.85);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 260ms ease, transform 360ms var(--ease-spring);
}

.install-banner.visible {
    opacity: 1;
    transform: none;
}

.install-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.install-banner-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
    text-align: left;
}

.install-banner-copy strong {
    font-size: 14px;
}

.install-banner-copy small {
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.3;
}

.install-banner-btn {
    min-height: 38px;
    padding: 6px 14px;
    border: 1px solid rgba(165, 243, 252, 0.7);
    border-radius: 999px;
    background: linear-gradient(180deg, #67e8f9, #0891b2);
    color: #062a33;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
}

.install-banner-close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 20px;
    cursor: pointer;
}

.menu-btn.install-app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    border: 1px solid rgba(34, 211, 238, 0.5);
    background: rgba(34, 211, 238, 0.12);
    color: #a5f3fc;
    text-transform: none;
    letter-spacing: 0;
}

.install-ios {
    display: grid;
    justify-items: center;
    gap: 8px;
}

.install-ios-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

.install-steps {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 4px 0 8px;
    padding: 0;
    list-style: none;
    counter-reset: step;
    text-align: left;
}

.install-steps li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 14px;
    line-height: 1.35;
}

.install-step-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.install-step-icon--done {
    background: rgba(52, 211, 153, 0.2);
    color: var(--win);
    font-weight: 900;
}

.install-ios .menu-btn {
    width: 100%;
}

/* Country flag next to a player's name. Where the system has no flag emoji
   (Windows) the two-letter code is shown as a small badge instead. */
.country-flag {
    display: inline-block;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.05em;
    line-height: 1;
    vertical-align: -0.08em;
}

.country-flag--code {
    padding: 2px 5px;
    border: 1px solid rgba(245, 196, 81, 0.45);
    border-radius: 4px;
    background: rgba(245, 196, 81, 0.12);
    color: var(--gold);
    font-family: var(--font-ui);
    font-size: 0.7em;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: 0.12em;
}

.profile-country {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-top: 12px;
}

.profile-country-btn {
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-raised);
    color: inherit;
    font-weight: 700;
    cursor: pointer;
}

.profile-country-btn:hover {
    border-color: rgba(245, 196, 81, 0.6);
}

.profile-country-select {
    width: min(100%, 320px);
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-2);
    color: inherit;
    font-size: 15px;
}

/* ==========================================================================
   Match versus intro (versus-intro.js)
   ========================================================================== */

.vs-intro {
    position: fixed;
    inset: 0;
    z-index: 6000;
    overflow: hidden;
    background: rgba(4, 7, 16, 0.55);
    font-family: var(--font-ui);
    cursor: pointer;
    transition: opacity 0.32s var(--ease-out);
}

.vs-intro.is-leaving {
    opacity: 0;
    pointer-events: none;
}

.vs-side {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: clamp(14px, 4vw, 28px);
    padding: 0 clamp(18px, 7vw, 64px);
    transition: transform 0.38s var(--ease-out);
}

.vs-side-rival {
    clip-path: polygon(0 0, 100% 0, 100% 44%, 0 56%);
    background: linear-gradient(160deg, #4a0b19, #b3122e 60%, #ff3b4f);
    flex-direction: row-reverse;
    align-items: flex-start;
    padding-top: clamp(64px, 14vh, 150px);
    transform: translateX(-105%);
}

.vs-side-me {
    clip-path: polygon(0 56%, 100% 44%, 100% 100%, 0 100%);
    background: linear-gradient(200deg, #170f55, #3b2fd0 50%, #22d3ee);
    align-items: flex-end;
    padding-bottom: clamp(64px, 14vh, 150px);
    transform: translateX(105%);
}

.vs-intro.is-in .vs-side {
    transform: none;
}

.vs-intro.is-in .vs-side-me {
    transition-delay: 0.08s;
}

.vs-avatar-wrap {
    flex: 0 0 auto;
}

.vs-avatar {
    display: block;
    width: clamp(104px, 28vmin, 210px);
    height: clamp(104px, 28vmin, 210px);
    border-radius: 50%;
    object-fit: cover;
    background: #f6ead2;
    border: 6px solid #fff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.vs-side-rival .vs-avatar {
    border-color: #ff8a95;
}

.vs-side-me .vs-avatar {
    border-color: #7ff0ff;
}

.vs-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fff;
}

.vs-side-rival .vs-info {
    align-items: flex-end;
    text-align: right;
}

.vs-tag {
    font-size: clamp(12px, 3vw, 15px);
    font-weight: 800;
    letter-spacing: 0.22em;
    opacity: 0.8;
}

.vs-name {
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(22px, 6.4vw, 38px);
    font-weight: 900;
    line-height: 1.1;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}

.vs-record {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.vs-stat {
    min-width: 58px;
    padding: 6px 8px 5px;
    border-radius: var(--radius-sm);
    background: rgba(5, 10, 22, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.22);
    text-align: center;
}

.vs-stat strong {
    display: block;
    font-size: clamp(20px, 5.6vw, 28px);
    font-weight: 900;
    line-height: 1;
}

.vs-stat span {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}

.vs-stat-wins strong { color: #6dffb4; }
.vs-stat-draws strong { color: #e2e8f0; }
.vs-stat-losses strong { color: #ff9aa3; }

.vs-note {
    margin-top: 4px;
    font-size: clamp(13px, 3.4vw, 16px);
    font-weight: 700;
    opacity: 0.9;
}

.vs-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: "Arial Black", "Segoe UI", sans-serif;
    font-size: clamp(84px, 26vmin, 190px);
    font-style: italic;
    font-weight: 900;
    line-height: 1;
    color: var(--gold);
    -webkit-text-stroke: 5px #1a0f00;
    paint-order: stroke fill;
    text-shadow: 0 0 40px rgba(255, 190, 60, 0.85), 0 8px 0 #000;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-8deg) scale(3.4);
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1.25), opacity 0.12s linear;
    pointer-events: none;
}

.vs-intro.is-slammed .vs-badge {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-8deg) scale(1);
}

.vs-intro.is-slammed {
    animation: vs-shake 0.38s ease-out 0.12s;
}

@keyframes vs-shake {
    0%, 100% { transform: none; }
    20% { transform: translate(-10px, 6px); }
    40% { transform: translate(8px, -6px); }
    60% { transform: translate(-5px, 3px); }
    80% { transform: translate(3px, -2px); }
}

/* Wide screens: rival on the left, you on the right, split by a steep diagonal. */
@media (orientation: landscape) {
    .vs-side,
    .vs-side-rival,
    .vs-side-me {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    .vs-side-rival {
        clip-path: polygon(0 0, 56% 0, 44% 100%, 0 100%);
        padding: 0 54% 0 2%;
        transform: translateY(-105%);
    }

    .vs-side-me {
        clip-path: polygon(56% 0, 100% 0, 100% 100%, 44% 100%);
        padding: 0 2% 0 54%;
        transform: translateY(105%);
    }

    .vs-side .vs-info,
    .vs-side-rival .vs-info {
        align-items: center;
        text-align: center;
    }

    .vs-avatar {
        width: clamp(76px, 24vh, 190px);
        height: clamp(76px, 24vh, 190px);
    }

    .vs-name {
        max-width: 36vw;
        font-size: clamp(20px, 5.5vh, 38px);
    }

    .vs-badge {
        font-size: clamp(64px, 20vh, 170px);
    }

    .vs-record {
        gap: 5px;
    }

    .vs-stat {
        min-width: 0;
        padding: 5px 6px 4px;
    }

    .vs-stat span {
        font-size: 9px;
        letter-spacing: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vs-side,
    .vs-badge {
        transition: none;
    }

    .vs-intro.is-slammed {
        animation: none;
    }
}