/* +++++ START: SIGN-IN STYLES +++++ */
.hidden {
    display: none !important;
}

/* Text field + error line, shared by the Edit Profile dialog (.ep-input / .ep-error). */
.auth-input {
    width: 100%;
    max-width: none;
    padding: 0.45rem 0.9rem;
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.92);
    color: #1a1a1a;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 600;
    transition: all 0.3s ease;
    -webkit-user-select: text;
    user-select: text;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    outline: none;
}

.auth-input:focus {
    border-color: var(--premium-gold);
    box-shadow: 0 0 0 3px var(--premium-gold-glow);
}

.auth-input::placeholder {
    color: rgba(80, 60, 40, 0.5);
    font-weight: 400;
}

.error-message {
    color: #ff4d4d;
    min-height: 0;
    font-size: clamp(0.8rem, 2cqw, 0.9rem);
    font-weight: bold;
    text-align: center;
    width: 100%;
    max-width: none;
}

.error-message:empty {
    display: none;
}

/* The sign-in screen: the big logo over the city, and two big buttons (Google, Facebook). It sits
   outside the scaled game canvas, so it is sized with the real screen (vh / vw). */
.si-screen {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    opacity: 0;
    overflow: hidden;
    background: #1a0f08;
}
.si-screen.visible { display: block; }

.si-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Darker towards the edges and the bottom, so the logo and the buttons stand out from the art. */
.si-shade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 75% 70% at 50% 40%, rgba(24, 12, 4, 0) 0%, rgba(24, 12, 4, 0.3) 70%, rgba(14, 7, 2, 0.66) 100%),
        linear-gradient(180deg, rgba(14, 7, 2, 0) 40%, rgba(14, 7, 2, 0.5) 100%);
}

.si-main {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2.4vh, 18px);
    padding: 3vh 16px 4vh;
    box-sizing: border-box;
}

.si-logo {
    height: clamp(110px, 40vh, 340px);
    width: auto;
    max-width: 82vw;
    object-fit: contain;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.5));
    margin-bottom: clamp(0px, 1.2vh, 10px);
}

.si-buttons {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2.8vh, 16px);
    width: min(440px, 86vw);
}

/* Gem buttons like the menu's, framed in gold with a thick bottom edge that presses down. */
.si-btn {
    --edge: #121e52;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(50px, 13vh, 66px);
    padding: 0 20px 0 clamp(58px, 15vh, 74px);
    border-radius: 18px;
    border: 1.5px solid #e0b955;
    font-family: 'Mate SC', 'Rubik', serif;
    font-size: clamp(17px, 5vh, 23px);
    letter-spacing: 0.5px;
    -webkit-text-stroke: 0.5px currentColor; /* Mate SC has one weight: a hair heavier on the buttons */
    line-height: 1;
    box-shadow: 0 5px 0 var(--edge), 0 14px 26px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -12px 22px rgba(0, 0, 0, 0.16);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.si-btn[hidden] { display: none; }
.si-btn:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--edge), 0 6px 14px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -12px 22px rgba(0, 0, 0, 0.16);
}
@media (hover: hover) {
    .si-btn:hover { filter: brightness(1.06); }
}

.si-btn-google {
    --edge: #7d6840;
    color: #3a2810;
    background:
        radial-gradient(120% 130% at 78% -12%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 56%),
        linear-gradient(180deg, #fffaf0 0%, #f2e7cf 52%, #dccaa3 100%);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.si-btn-facebook {
    --edge: #0c2f6e;
    color: #fff6e2;
    background:
        radial-gradient(120% 130% at 78% -12%, rgba(160, 200, 255, 0.55), rgba(160, 200, 255, 0) 56%),
        linear-gradient(180deg, #4f8ff7 0%, #1f6fe8 52%, #1450b8 100%);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

/* The light sweep that runs across the menu buttons. */
.si-btn-bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}
.si-btn-bg::after {
    content: '';
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 70px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    transform: translateX(-120px) skewX(-18deg);
    animation: siSheen 5.2s cubic-bezier(0.4, 0, 0.2, 1) 1.8s infinite;
}
.si-btn-facebook .si-btn-bg::after { animation-delay: 2.4s; }
@keyframes siSheen {
    0% { transform: translateX(-120px) skewX(-18deg); }
    24%, 100% { transform: translateX(520px) skewX(-18deg); }
}

/* The provider's logo in a round badge at the left end. */
.si-btn-badge {
    position: absolute;
    left: clamp(8px, 2vh, 11px);
    top: 50%;
    width: clamp(38px, 10vh, 48px);
    height: clamp(38px, 10vh, 48px);
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 0 0 1.5px rgba(224, 185, 85, 0.85);
}
.si-btn-badge svg { width: 56%; height: 56%; }
.si-btn-google .si-btn-badge { background: #fff; }
.si-btn-facebook .si-btn-badge { background: #1258c9; }
.si-btn-facebook .si-btn-badge svg { width: 62%; height: 62%; }

.si-btn-text { position: relative; white-space: nowrap; }

/* Sign-in problems ("Sign-in was cancelled.", …): a banner at the top of the screen. */
.si-error {
    position: absolute;
    top: max(12px, 3vh);
    left: 50%;
    z-index: 2;
    width: max-content;
    max-width: min(88vw, 560px);
    padding: 8px 18px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 110, 95, 0.65);
    background: linear-gradient(180deg, rgba(78, 16, 13, 0.95), rgba(42, 8, 7, 0.95));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    color: #ffd3cc;
    font-family: 'Mate SC', serif;
    font-size: 15px;
    line-height: 1.3;
    text-align: center;
    transform: translateX(-50%);
    animation: siErrorIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.si-error:empty { display: none; }
@keyframes siErrorIn {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* First sign-in: choose a username. Centered; while the field has focus on a touch screen
   (body.si-typing) it moves to the top edge, above the on-screen keyboard, and drops its extra lines. */
.si-name {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(14, 8, 3, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.si-name.visible {
    display: flex;
    animation: siNameIn 0.28s ease-out;
}
@keyframes siNameIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.si-name-card {
    width: min(560px, 94vw);
    padding: 18px 20px 16px;
    box-sizing: border-box;
    border-radius: 22px;
    border: 2px solid rgba(224, 185, 85, 0.55);
    background: linear-gradient(180deg, rgba(46, 32, 19, 0.97), rgba(26, 17, 9, 0.97));
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
    animation: siCardIn 0.34s cubic-bezier(0.3, 1.4, 0.5, 1);
}
@keyframes siCardIn {
    from { transform: translateY(14px) scale(0.96); }
    to { transform: none; }
}

.si-name-title {
    margin: 0;
    font-family: 'Mate SC', serif;
    font-size: 23px;
    color: #f3dfa8;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.si-name-sub {
    margin: 4px 0 0;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 17px;
    color: rgba(255, 242, 220, 0.85);
}

.si-name-row {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.si-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 14px;
    box-sizing: border-box;
    border-radius: 16px;
    border: 2px solid rgba(224, 185, 85, 0.5);
    background: #fffaf0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.si-field:focus-within {
    border-color: #f0c75a;
    box-shadow: 0 0 0 3px rgba(240, 199, 90, 0.35);
}
.si-field svg { flex: 0 0 auto; width: 22px; height: 22px; fill: #9a7b3c; }
.si-field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: #23170a;
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 600;
    font-size: 18px; /* 16px or more, so phones don't zoom in on the field */
    outline: none;
    -webkit-user-select: text;
    user-select: text;
}
.si-field input::placeholder { color: rgba(90, 66, 36, 0.5); font-weight: 400; }

.si-submit {
    flex: 0 0 auto;
    height: 52px;
    padding: 0 24px;
    border-radius: 16px;
    border: 1.5px solid #8a6a17;
    background: linear-gradient(180deg, #f6d873 0%, #d4af37 55%, #b08a22 100%);
    color: #2a1c06;
    font-family: 'Mate SC', serif;
    font-size: 19px;
    box-shadow: 0 4px 0 #6e5310, 0 10px 20px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.si-submit:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #6e5310, 0 5px 12px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.si-name-error {
    margin: 10px 0 0;
    font-family: 'Rubik', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ffb4a8;
}
.si-name-error:empty { display: none; }
.si-name-hint {
    margin: 8px 0 0;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 15px;
    color: rgba(255, 242, 220, 0.62);
}

body.si-typing .si-name {
    align-items: flex-start;
    padding-top: 8px;
}
body.si-typing .si-name-card { padding: 10px 14px 12px; }
body.si-typing .si-name-sub,
body.si-typing .si-name-hint { display: none; }
body.si-typing .si-name-row { margin-top: 8px; }

/* +++++ END: SIGN-IN STYLES +++++ */

/* +++++ START: LOADING SCREEN STYLES +++++ */
/* ===== Interstitial ad cover / loading screen =====
   Sits above EVERYTHING (highest in-app z-index is ~10002) so the menu, its corner buttons, the
   in-game controls, and any game background at the screen edges are fully covered while an ad loads
   and plays. Body-level + position:fixed so it isn't affected by the scaled .game-wrapper. */
#ad-loading-overlay {
    position: fixed;
    inset: 0;
    background-color: #000;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

#ad-loading-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ad-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
}

.ad-spinner {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 5px solid rgba(212, 175, 55, 0.25);
    border-top-color: var(--premium-gold, #d4af37);
    animation: ad-spin 0.9s linear infinite;
}

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

.ad-loading-text {
    font-family: 'Mate SC', serif;
    color: #f0e6d2;
    font-size: 1.3rem;
    letter-spacing: 1px;
}

/* Loading Screen must remain relative to actual viewport to cover empty black bars */
#loading-screen {
    position: fixed;
    inset: 0;
    background-color: #000;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

#loading-background-image,
#loading-background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
}

#loading-background-image {
    z-index: 2;
}

#loading-background-video {
    z-index: 1;
}

#loading-logo,
#loading-bar-container {
    z-index: 3;
}

#loading-logo {
    position: relative;
    width: clamp(250px, 50vw, 600px);
    height: auto;
    margin-bottom: 20vh;
}

#loading-bar-container {
    position: absolute;
    bottom: 10%;
    width: 80%;
    max-width: 700px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
    transition: opacity 0.5s ease-out;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#loading-bar {
    width: 0%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 3px;
    transition: width 0.3s ease-out;
}

/* +++++ END: LOADING SCREEN STYLES +++++ */

:root {
    --board-frame-color: #4E3414;
    --playing-surface-bg: #C99244;
    --point-light: #EACB77;
    --point-dark: #37414D;
    --checker-p1: #f5f5f5;
    --checker-p2: #111111;

    /* ===== Skin variables (overridden at runtime by the equipped skin). Defaults below
       reproduce the original look exactly, so the "default" skin is pixel-identical. ===== */
    --board-surface-image: url('skins/textures/wood-pattern.png');
    --board-surface-size: 250px;
    --board-surface-blend: multiply;
    --checker-p1-bg: radial-gradient(circle at 50% 40%, var(--checker-p1), #d7d7d7);
    --checker-p2-bg: radial-gradient(circle at 50% 40%, #4a4a4a, var(--checker-p2));
    --checker-p1-ink: #000000;  /* stack-count number colour on player 1 checkers */
    --checker-p2-ink: #ffffff;  /* stack-count number colour on player 2 checkers */
    --die-face-bg: #ffffff;
    --die-pip-color: #333333;
    --die-border-color: #cccccc;
    --highlight-color: rgba(255, 215, 0, 0.8);
    --valid-move-color: rgba(135, 206, 250, 0.7);
    --background-color: #1a1a1a;
    --checker-onboard-stack-percent: 8%;
    --checker-stack-offset: -85%;
    /* ===== Accent palette — themed per board skin (defaults below = Classic Walnut).
       Drives the round action buttons, their icons, the in-game menu and the timer ring. ===== */
    --accent-color: #c62828;        /* main accent (button top) */
    --accent-deep: #801313;         /* dark shade (button bottom + border) */
    --accent-bright: #d32f2f;       /* light shade (hover, underlines, glow) */
    --accent-ink: #EACB77;          /* icon/text colour ON the accent (auto bright/dark per skin) */
    --timer-ring-color: #4caf50;    /* turn-timer ring */
    /* Menu / panel accent — a SEPARATE family that defaults to gold/brown (the premium look),
       so the default board keeps gold menus while the action buttons stay red. */
    --accent-menu-bg: rgba(78, 52, 20, 0.6); /* in-game menu fullscreen tint */
    --panel-bg: #4e3414;            /* confirm-dialog panel base */
    --menu-line: #D4AF37;           /* menu/panel accent line + No button (default gold) */
    --menu-line-soft: rgba(212, 175, 55, 0.4); /* soft accent border */
    --bear-off-width: clamp(75px, 10cqh, 110px);
    --bear-off-gap: 1.5cqh;
    --right-ui-bar-width: clamp(120px, 15cqw, 160px);
    --selectable-piece-color: rgba(15, 255, 80, 0.9);
    --selected-move-color: rgba(255, 69, 0, 0.9);

    /* Premium Theme Variables */
    --premium-gold: #D4AF37;
    --premium-gold-dark: #b38f2e;
    --premium-gold-glow: rgba(212, 175, 55, 0.5);
    --premium-text: #f0e6d2;
    --premium-bg-dark: #121212;
}

/* +++++ START: NEW TURN TIMER STYLES (REVISED) +++++ */
#turn-timer-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(80px, 10cqw, 120px);
    /* Reverted to previous size */
    height: clamp(80px, 10cqw, 120px);
    /* Reverted to previous size */
    z-index: 100;
    pointer-events: none;
}

#turn-timer-svg {
    width: 100%;
    height: 100%;
    transform: scaleY(-1) rotate(90deg);
    /* Starts from bottom, goes clockwise */
}

.timer-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.3);
    stroke-width: 50;
    /* Fills the circle (2 * radius) */
}

.timer-progress {
    fill: none;
    stroke: var(--timer-ring-color);
    /* Themed per board skin (default green) */
    stroke-width: 50;
    /* Fills the circle */
    stroke-dasharray: 157.08;
    /* 2 * PI * 25 */
    stroke-dashoffset: 0;
    /* Full circle initially */
    transition: stroke-dashoffset 1s linear;
}

/* +++++ END: NEW TURN TIMER STYLES (REVISED) +++++ */

/* VALID MOVE TRIANGLES */
.valid-move-highlight,
.selectable-piece-highlight {
    position: absolute;
    width: 0;
    height: 0;
    aspect-ratio: unset;
    border-radius: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    z-index: 20;
    animation: pulse 1.5s infinite ease-in-out;
    pointer-events: none;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent !important;
    box-shadow: none !important;
}

.valid-move-highlight[style*="top"],
.selectable-piece-highlight[style*="top"] {
    border-top-style: solid;
    border-top-width: 28px;
}

.valid-move-highlight[style*="bottom"],
.selectable-piece-highlight[style*="bottom"] {
    border-bottom-style: solid;
    border-bottom-width: 28px;
}

.selectable-piece-highlight[style*="top"] {
    border-top-color: var(--selectable-piece-color);
}

.selectable-piece-highlight[style*="bottom"] {
    border-bottom-color: var(--selectable-piece-color);
}

.valid-move-highlight.red[style*="top"] {
    border-bottom-style: solid;
    border-bottom-width: 28px;
    border-bottom-color: var(--selected-move-color);
    border-top-style: none;
}

.valid-move-highlight.red[style*="bottom"] {
    border-top-style: solid;
    border-top-width: 28px;
    border-top-color: var(--selected-move-color);
    border-bottom-style: none;
}

/* END VALID MOVE TRIANGLES */

/* General Body and Font Styles */
html,
body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

body {
    font-family: 'Cormorant Garamond', serif;
    background-color: var(--background-color);
    /* The table under the game: a soft light on the board, darker towards the edges, so the extra
       room around the 915×412 game on taller screens (16:9 phones, tablets) is part of the table. */
    background-image: radial-gradient(ellipse 70% 62% at 50% 50%, rgba(255, 236, 200, 0.07), rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.45) 100%);
    color: var(--point-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- MENU AND MODAL STYLES --- */
.modal-container {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    color: white;
    opacity: 0;
    visibility: hidden;
    /* A closed modal must never capture taps. visibility:hidden alone isn't enough: it's animated
       (transition below), so the modal stays hit-testable for ~0.4s while fading out — long enough
       to tap the (now invisible) Logout button through it. pointer-events flips instantly. */
    pointer-events: none;
    transition: opacity 0.4s, visibility 0.4s;
}

.modal-container.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Main menu background video */
.modal-container.main-menu {
    background-color: #000;
    backdrop-filter: none;
    overflow: hidden;
}

/* Profile modal fullscreen background */
.modal-container:has(.profile-modal-content) {
    background: rgba(78, 52, 20, 0.6);
    backdrop-filter: blur(15px);
}

/* Friends modal fullscreen background - matches stats page */

/* Menu + login backgrounds: fill the stage, anchored to the bottom edge (the rooftops). The video
   is cropped clear of the generator watermark that sat in its bottom-right corner. */
#menu-background-video,
#auth-background-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    z-index: -1;
    object-fit: cover;
    object-position: 50% 100%;
}

.modal-content {
    background: var(--playing-surface-bg);
    padding: clamp(1.5rem, 5cqw, 3rem);
    border-radius: 15px;
    border: 5px solid var(--board-frame-color);
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    max-width: 90cqw;
    position: relative;
}

.modal-content h2 {
    font-family: 'Mate SC', serif;
    color: var(--point-dark);
    margin-bottom: 1rem;
    font-size: clamp(2rem, 8cqw, 3rem);
}

.modal-content p {
    color: var(--point-dark);
    max-width: 60ch;
    margin: 1rem auto;
    line-height: 1.6;
}

/* Generic button styles for modals OTHER THAN main menu */
.btn {
    font-family: 'Mate SC', serif;
    font-size: clamp(1rem, 4cqw, 1.75rem);
    padding: 0.6rem 2rem;
    color: #fff;
    background: linear-gradient(145deg, var(--premium-gold), var(--premium-gold-dark));
    border: 2px solid #000;
    border-radius: 50px;
    cursor: pointer;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease-out;
}

.btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px var(--premium-gold-glow), 0 8px 25px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* Text buttons for some modals */

.menu-close-button {
    position: absolute;
    top: 4.5%;
    right: 15%;
    width: clamp(45px, 12cqw, 60px);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 3001;
}

.menu-close-button img {
    width: 100%;
    height: auto;
}

.menu-close-button:hover {
    transform: scale(1.1);
}

/* Game Layout Containers */
/* The stage: 915×412 by design, stretched by scaleGame() to the screen's own shape. */
.game-wrapper {
    position: absolute;
    width: 915px;
    height: 412px;
    transform-origin: center center;
    container-type: size; /* ADDED FIX */
    overflow: hidden;     /* ADDED FIX */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The game keeps its design size in the middle of the stage, so the board, trays and timers (sized
   in cqh / cqw of this box) look the same on every screen shape. */
.game-area {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 915px;
    height: 412px;
    container-type: size;
    box-sizing: border-box;
    position: relative;
    opacity: 0;
    visibility: hidden;
}

.game-board-and-trays {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    min-height: 0;
    gap: var(--bear-off-gap);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 2cqh;
}

.board-and-tray-wrapper {
    display: flex;
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    gap: var(--bear-off-gap);
    transform: translateX(1cqw);
    /* MOVED BOARD SLIGHTLY RIGHT */
}

/* Board Styling */
.board {
    display: grid;
    grid-template-columns: repeat(6, 1fr) 0.6fr repeat(6, 1fr);
    grid-template-rows: 1fr 1fr;
    height: 100%;
    max-height: 100%;
    flex-grow: 1;
    aspect-ratio: 1.5 / 1;
    background-color: var(--playing-surface-bg);
    background-image: var(--board-surface-image);
    background-size: var(--board-surface-size);
    background-blend-mode: var(--board-surface-blend);
    border: 16px solid var(--board-frame-color);
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 0 25px rgba(0, 0, 0, 0.7);
    position: relative;
    z-index: 1;
}

.bar {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
    grid-column: 7 / 8;
    grid-row: 1 / 3;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
    z-index: 2;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

/* Point Styling */
.point-container {
    display: flex;
    position: relative;
    cursor: pointer;
    z-index: 5;
}

.point-container:hover .point {
    filter: brightness(1.15);
}

.point-container.top {
    flex-direction: column;
}

.point-container.bottom {
    flex-direction: column-reverse;
}

.point {
    width: 100%;
    height: 85%;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: filter 0.2s ease-in-out;
}

.point.light {
    background: var(--point-light);
}

.point.dark {
    background: var(--point-dark);
}

.point-container.bottom .point {
    transform: scaleY(-1);
}

.point-number {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(10px, 1.2cqw, 14px);
    font-family: 'Mate SC', serif;
    color: rgba(0, 0, 0, 0.4);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
    z-index: 6;
    pointer-events: none;
}

.point-container.top .point-number {
    top: 2%;
}

.point-container.bottom .point-number {
    bottom: 2%;
}

/* Checker Styling */
.checker-stack {
    position: absolute;
    width: 80%;
    height: 100%;
    left: 10%;
    z-index: 10;
    pointer-events: none;
}

.point-container.top .checker-stack {
    top: 0;
}

.point-container.bottom .checker-stack {
    bottom: 0;
}

.checker {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    cursor: pointer;
    /* Only transform animates here — it's GPU-composited, so select/lift stays smooth. The glow is
       handled by ::after's opacity (also composited) instead of animating box-shadow (which repaints
       the whole checker every frame and was the source of the choppy selection). */
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
    pointer-events: all;
    z-index: 15;
    left: 0;
    will-change: transform;
}

/* Selection glow halo — a separate composited layer faded in via opacity. */
.checker::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 20px 5px var(--highlight-color), 0 8px 12px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.18s ease-out;
    pointer-events: none;
    z-index: -1;
}

/* Checkers anchor at the OUTER board edge and stack inward toward the center bar.
   Top points start at the top frame and pile downward; bottom points start at the
   bottom frame and pile upward. Same for both players. */
.point-container.top .checker {
    top: calc(var(--i, 0) * var(--checker-onboard-stack-percent));
}

.point-container.bottom .checker {
    bottom: calc(var(--i, 0) * var(--checker-onboard-stack-percent));
}

.checker.player1 {
    background: var(--checker-p1-bg);
    box-shadow: inset 0 3px 4px rgba(255, 255, 255, 0.9),
        inset 0 -4px 5px rgba(0, 0, 0, 0.25),
        0 5px 8px rgba(0, 0, 0, 0.4);
}

.checker.player2 {
    background: var(--checker-p2-bg);
    box-shadow: inset 0 3px 4px rgba(255, 255, 255, 0.2),
        inset 0 -4px 5px rgba(0, 0, 0, 0.6),
        0 5px 8px rgba(0, 0, 0, 0.5);
}

.checker.selected {
    transform: scale(1.1) translateY(-5px);
    z-index: 100;
}

.checker.selected::after {
    opacity: 1;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-5px);
    }

    40%,
    80% {
        transform: translateX(5px);
    }
}

@keyframes pulse {
    0% {
        transform: translateX(-50%) scale(0.9);
        opacity: 0.7;
    }

    50% {
        transform: translateX(-50%) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) scale(0.9);
        opacity: 0.7;
    }
}

.checker-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(16px, 2cqw, 20px);
    font-weight: 700;
    font-family: 'Mate SC', serif;
    pointer-events: none;
    z-index: 16;
    line-height: 1;
}

/* Stack-count number colour follows the equipped checker skin so it stays readable. */
.checker.player1 .checker-count {
    color: var(--checker-p1-ink);
}

.checker.player2 .checker-count {
    color: var(--checker-p2-ink);
}

/* --- BEAR-OFF TRAY & PLAYER UI STYLES --- */
.bear-off-trays {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: var(--bear-off-width);
    flex-shrink: 0;
    background: var(--board-frame-color);
    box-sizing: border-box;
    padding: 16px 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    position: relative;
}

.off-board-area {
    width: calc(100% - 16px);
    height: calc(50% - 3cqh - 25px);
    /* Adjusted height */
    background: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    border: 2px solid var(--board-frame-color);
    padding: 5px;
    z-index: 5;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    position: relative;
    cursor: pointer;
    margin: 0 8px;
}

.off-board-area .checker {
    position: absolute;
    width: 74%;
    left: 13%;
    pointer-events: none;
    /* Overlap step tuned to mirror the on-board checker fan (anchored at the edge,
       each checker overlapping the previous toward the centre). */
    --bear-off-step: 14%;
}

/* ---- Bear-off stacking direction ----
   Each player's OWN tray sits at the BOTTOM of the tray column and must stack from the
   bottom edge UP toward the centre/timer; the opponent's tray sits at the TOP and stacks
   from the top edge DOWN toward the centre. Because the trays are flipped per perspective,
   the stacking is keyed off the perspective body-class, NOT the fixed player number.

   Default (local PvP, no perspective class) and Player-1 view: p1 tray bottom, p2 tray top. */
.off-board-area.player1 .checker {
    bottom: calc(var(--i, 0) * var(--bear-off-step));
    top: auto;
}

.off-board-area.player2 .checker {
    top: calc(var(--i, 0) * var(--bear-off-step));
    bottom: auto;
}

/* Player-2 view: the trays are flipped, so reverse the stacking so each player's pieces
   still go edge -> centre (own tray bottom stacks up, opponent tray top stacks down). */
body.local-player-2 .off-board-area.player2 .checker {
    bottom: calc(var(--i, 0) * var(--bear-off-step));
    top: auto;
}

body.local-player-2 .off-board-area.player1 .checker {
    top: calc(var(--i, 0) * var(--bear-off-step));
    bottom: auto;
}

#undo-button.action-btn {
    flex-shrink: 0;
    width: clamp(40px, 4.5cqh, 45px);
    height: clamp(40px, 4.5cqh, 45px);
}

/* NEW RIGHT UI BAR STYLES */
.right-ui-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: var(--right-ui-bar-width);
    flex-shrink: 0;
    background: transparent;
    box-sizing: border-box;
    padding: 2cqh 1cqh;
    color: var(--premium-text);
    gap: 8cqh;
    transform: translateY(2cqh);
    /* MOVED PROFILES AND TIMERS DOWN */
}

.player-ui-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    /* MODIFIED: Increased gap to prevent overlap with level star */
    width: 100%;
    cursor: pointer;
    padding: 8px;
    transition: all 0.3s ease;
}

.player-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    /* Anchor for the level badge */
}

.player-info .profile-picture {
    transition: all 0.3s ease;
    border-radius: 8px;
    /* Make pictures squared */
}

.player-ui-container.active .profile-picture {
    border-color: var(--highlight-color);
    box-shadow: 0 0 12px 4px var(--highlight-color);
}

.player-info .profile-picture.large {
    width: clamp(50px, 8cqh, 70px);
    height: clamp(50px, 8cqh, 70px);
}

.player-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    font-family: 'Mate SC', serif;
    text-align: center;
}

.player-username {
    font-size: clamp(0.8rem, 2cqh, 1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    color: white;
}

.level-badge.ingame {
    width: 28px;
    height: 28px;
    position: absolute;
    bottom: -5px;
    right: -5px;
    z-index: 2;
}

.level-badge.ingame .level-number {
    font-size: 0.8rem;
}

/* Local (anonymous) games: no level badge, and the panel isn't a clickable stats link. */
.player-ui-container.local-anon .level-badge.ingame {
    display: none;
}
.player-ui-container.local-anon {
    cursor: default;
}

.player-timer {
    font-family: 'Mate SC', serif;
    font-size: clamp(1.2rem, 3cqh, 1.8rem);
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 12px;
    border-radius: 5px;
}

/* MODIFIED: Top Right Utility Controls */
.top-right-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 500;
    display: flex;
    gap: 0.75rem;
}

.action-btn.utility {
    width: clamp(40px, 4.5cqh, 45px);
    height: clamp(40px, 4.5cqh, 45px);
    border-width: 2px;
}

/* In-Board Controls */
.board-controls {
    position: absolute;
    top: 0;
    height: 100%;
    width: 47.6%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    z-index: 250;
    pointer-events: none;
}

.board-controls>* {
    pointer-events: all;
}

.board-controls.left {
    left: 0;
}

.board-controls.right {
    right: 0;
}

/* Dice Styling & Container */
.dice-container {
    display: flex;
    gap: 1rem;
    perspective: 1000px;
    min-height: 70px;
    align-items: center;
}

.die {
    width: clamp(40px, 4.5cqw, 55px);
    height: clamp(40px, 4.5cqw, 55px);
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
}

.die-face {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--die-face-bg);
    border: 1px solid var(--die-border-color);
    border-radius: 4px;
    /* Only the dim ("used") filter actually changes — transition just that, not `all` (which kept the
       faces on their own layers and added work each frame). Hiding back faces halves the faces the
       GPU has to paint while the cube spins, so the roll stays smooth. */
    transition: filter 0.3s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-sizing: border-box;
    padding: 12%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10%;
}

.dot {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--die-pip-color);
    align-self: center;
    justify-self: center;
    display: none;
    transition: background-color 0.3s ease;
}

/* A "used" die is a dimmed version of whatever dice skin is equipped (face + pips
   dim together), so it stays on-theme instead of forcing a hardcoded grey. */
.die.used .die-face {
    filter: grayscale(0.5) brightness(0.78);
}

.face-1 .dot:nth-child(1) {
    display: block;
    grid-area: 2 / 2;
}

.face-2 .dot:nth-child(1) {
    display: block;
    grid-area: 1 / 1;
}

.face-2 .dot:nth-child(2) {
    display: block;
    grid-area: 3 / 3;
}

.face-3 .dot:nth-child(1) {
    display: block;
    grid-area: 1 / 1;
}

.face-3 .dot:nth-child(2) {
    display: block;
    grid-area: 2 / 2;
}

.face-3 .dot:nth-child(3) {
    display: block;
    grid-area: 3 / 3;
}

.face-4 .dot:nth-child(1) {
    display: block;
    grid-area: 1 / 1;
}

.face-4 .dot:nth-child(2) {
    display: block;
    grid-area: 1 / 3;
}

.face-4 .dot:nth-child(3) {
    display: block;
    grid-area: 3 / 1;
}

.face-4 .dot:nth-child(4) {
    display: block;
    grid-area: 3 / 3;
}

.face-5 .dot:nth-child(1) {
    display: block;
    grid-area: 1 / 1;
}

.face-5 .dot:nth-child(2) {
    display: block;
    grid-area: 1 / 3;
}

.face-5 .dot:nth-child(3) {
    display: block;
    grid-area: 2 / 2;
}

.face-5 .dot:nth-child(4) {
    display: block;
    grid-area: 3 / 1;
}

.face-5 .dot:nth-child(5) {
    display: block;
    grid-area: 3 / 3;
}

.face-6 .dot:nth-child(1) {
    display: block;
    grid-area: 1 / 1;
}

.face-6 .dot:nth-child(2) {
    display: block;
    grid-area: 1 / 3;
}

.face-6 .dot:nth-child(3) {
    display: block;
    grid-area: 2 / 1;
}

.face-6 .dot:nth-child(4) {
    display: block;
    grid-area: 2 / 3;
}

.face-6 .dot:nth-child(5) {
    display: block;
    grid-area: 3 / 1;
}

.face-6 .dot:nth-child(6) {
    display: block;
    grid-area: 3 / 3;
}

.face-1 {
    transform: rotateY(0deg) translateZ(clamp(20px, 2.25cqw, 27.5px));
}

.face-2 {
    transform: rotateY(90deg) translateZ(clamp(20px, 2.25cqw, 27.5px));
}

.face-3 {
    transform: rotateY(180deg) translateZ(clamp(20px, 2.25cqw, 27.5px));
}

.face-4 {
    transform: rotateY(-90deg) translateZ(clamp(20px, 2.25cqw, 27.5px));
}

.face-5 {
    transform: rotateX(90deg) translateZ(clamp(20px, 2.25cqw, 27.5px));
}

.face-6 {
    transform: rotateX(-90deg) translateZ(clamp(20px, 2.25cqw, 27.5px));
}

/* Buttons & Modals */
.action-btn {
    width: clamp(55px, 6cqw, 70px);
    height: clamp(55px, 6cqw, 70px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: radial-gradient(circle at 50% 40%, var(--accent-color), var(--accent-deep));
    border: 3px solid var(--accent-deep);
    box-shadow: inset 0px 3px 5px rgba(255, 255, 255, 0.25),
        inset 0px -3px 5px rgba(0, 0, 0, 0.4),
        0 8px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.1s ease-out;
    cursor: pointer;
}

.action-btn:hover {
    background: radial-gradient(circle at 50% 45%, var(--accent-bright), var(--accent-color));
    box-shadow: inset 0px 3px 5px rgba(255, 255, 255, 0.3),
        inset 0px -3px 5px rgba(0, 0, 0, 0.4),
        0 10px 18px rgba(0, 0, 0, 0.45);
    transform: translateY(-2px);
}

.action-btn:active {
    transform: translateY(1px);
    box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.5),
        0 4px 8px rgba(0, 0, 0, 0.4);
}

.action-btn:disabled {
    background: #6d4c41;
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.4);
    transform: translateY(0);
}

.action-btn svg {
    width: 60%;
    height: 60%;
    fill: var(--accent-ink);
    transition: transform 0.2s;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

.action-btn:hover svg {
    transform: scale(1.1);
}

/* Turn Indicator */
.turn-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(14px, 2cqw, 18px);
    color: white;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}
/* The computer is working out its move: "Computer's turn..." with the dots ticking. An empty
   spacer of the same width sits on the left so the centred text never shifts. */
.turn-indicator.ai-thinking::before,
.turn-indicator.ai-thinking::after {
    content: '';
    display: inline-block;
    width: 1.1em;
    text-align: left;
}
.turn-indicator.ai-thinking::after {
    animation: aiThinkingDots 1.2s steps(1, end) infinite;
}
@keyframes aiThinkingDots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* Special Text & Animations */

@keyframes legendary-doubles {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }

    80% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
        visibility: hidden;
    }
}

/* +++++ START: PROFILE UI STYLES +++++ */

/* Legacy profile-button class kept for backward compat */
.profile-button {
    position: relative;
    top: auto;
    left: auto;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    padding: 4px;
    border-radius: 40px;
    border: 2px solid var(--premium-gold-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--premium-text);
    font-family: 'Mate SC', serif;
    cursor: pointer;
    transform: scale(0.9);
}

.profile-button:hover {
    background-color: rgba(20, 20, 20, 0.8);
    border-color: var(--premium-gold);
}

.profile-picture {
    width: 35px;
    height: 35px;
    background-color: #333;
    border-radius: 50%;
    border: 2px solid var(--premium-gold);
    background-image: url('menu/guest-icon.png');
    background-size: cover;
    background-position: center;
}

#profile-username {
    font-size: 0.9rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}

.xp-bar-progress {
    height: 100%;
    width: 0%;
    /* Will be set by JS */
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    border-radius: 4px;
    transition: width 0.5s ease-out;
}

.level-badge {
    position: relative;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.level-badge.large {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.level-star {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.level-number {
    position: relative;
    font-size: 0.9rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.level-badge.large .level-number {
    font-size: 1.8rem;
}

/* Profile modal level badge positioning - positioned relative to profile picture */
.profile-picture-large .level-badge.large {
    position: absolute;
    top: -30px;
    left: -30px;
    width: 80px;
    height: 80px;
    z-index: 10;
}

.profile-picture-large .level-badge.large .level-star {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.profile-picture-large .level-badge.large .level-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    z-index: 11;
}

/* MODIFIED: Profile Modal Layout */
.profile-modal-content {
    background: transparent !important;
    backdrop-filter: none !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    color: var(--premium-text);
    gap: 0;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1000 !important;
}

.profile-layout-wrapper {
    width: 100%;
    max-width: 1200px;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* Center the layout */
    align-items: center;
    /* Vertically center the sections */
    padding: 0 2rem;
    margin: 0;
    gap: 4rem;
    /* Reduced space between sections */
    box-sizing: border-box;
}

.profile-right-section {
    /* This is the user info section (LEFT) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex: 0 1 400px;
    height: 100%;
    padding-top: 0;
    margin-top: 0;
}

/* Target username correctly and style it like a title */
#opponent-username {
    font-family: 'Mate SC', serif;
    font-size: clamp(2.2rem, 5cqw, 3rem);
    margin: 0;
    line-height: 1.1;
    font-weight: bold;
    color: white !important;
    text-align: center;
    width: 100%;
}

.country-flag-img {
    display: inline-block;
    width: 24px;
    height: 18px;
    vertical-align: middle;
    margin-left: 6px;
    object-fit: contain;
}

.profile-picture-large {
    width: clamp(120px, 25cqw, 150px);
    height: clamp(120px, 25cqw, 150px);
    flex-shrink: 0;
    background-color: #333;
    border-radius: 12px;
    border: 3px solid var(--premium-gold);
    background-image: url('menu/guest-icon.png');
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    /* Anchor for the level badge */
}

.xp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    white-space: nowrap;
}

.profile-stats {
    /* This is the stats section (RIGHT) */
    flex: 0 1 500px;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.profile-stats h3 {
    font-family: 'Mate SC', serif;
    font-size: clamp(1.8rem, 4cqw, 2.2rem);
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--premium-gold-dark);
    padding-bottom: 0.5rem;
    text-align: center;
    width: 80%;
    color: var(--premium-text);
}

/* +++++ END: PROFILE UI STYLES +++++ */

/* +++++ START: CHAT BUBBLE STYLES +++++ */
/* Chat Bubble Styles */
.chat-bubble {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 15px;
    border: 2px solid #000;
    font-family: 'Mate SC', serif;
    font-size: clamp(0.7rem, 1.5cqw, 1rem);
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    z-index: 1001;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    animation: chatBubbleAppear 0.3s ease-out;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 80px;
}

/* Position chat bubbles relative to profile pictures */
.player-info {
    position: relative;
}

.player-info .profile-picture {
    position: relative;
}

/* Responsive chat bubble positioning for mobile */
@media (max-width: 768px) {
    .chat-bubble {
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
        font-size: clamp(0.6rem, 1.2cqw, 0.8rem);
        padding: 0.3rem 0.8rem;
        max-width: 120px;
        min-width: 60px;
    }
}

.chat-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(255, 255, 255, 0.95);
}

@keyframes chatBubbleAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(10px) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0) scale(1);
    }
}

@keyframes chatBubbleDisappear {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-10px) scale(0.8);
    }
}

.chat-bubble.disappearing {
    animation: chatBubbleDisappear 0.3s ease-in forwards;
}

/* +++++ END: CHAT BUBBLE STYLES +++++ */

/* +++++ START: GAME OVER MODAL STYLES +++++ */
/* Game over modal fullscreen background - matches stats page */
.modal-container:has(.profile-modal-content) {
    background: rgba(78, 52, 20, 0.6);
    backdrop-filter: blur(15px);
}

/* Game result details section styling - matches profile stats */
.game-result-details {
    flex: 0 1 500px;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.game-result-details h3 {
    font-family: 'Mate SC', serif;
    font-size: clamp(1.8rem, 4cqw, 2.2rem);
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--premium-gold-dark);
    padding-bottom: 0.5rem;
    text-align: center;
    width: 80%;
    color: var(--premium-text);
}

.result-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 100%;
    max-width: 400px;
}

.result-text {
    font-family: 'Cinzel Decorative', cursive;
    font-size: clamp(2.5rem, 6cqw, 4rem);
    font-weight: bold;
    text-align: center;
    margin: 0;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
    letter-spacing: 2px;
}

.result-text.win {
    color: #28a745;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7), 0 0 20px rgba(40, 167, 69, 0.5);
}

.result-text.lose {
    color: #dc3545;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7), 0 0 20px rgba(220, 53, 69, 0.5);
}

.result-description {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.2rem, 3cqw, 1.6rem);
    color: var(--premium-text);
    text-align: center;
    margin: 0;
    line-height: 1.6;
    opacity: 0.9;
}

.result-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: nowrap !important;
    width: 100%;
}

/* Force side-by-side layout for all result action containers */
#game-win-modal .result-actions,
#game-lose-modal .result-actions,
#game-over-modal .result-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.result-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: 'Mate SC', serif;
    font-size: clamp(1.2rem, 3.5cqw, 1.6rem);
    font-weight: bold;
    padding: 1.2rem 2.5rem;
    border-radius: 25px;
    border: 3px solid transparent;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-width: 280px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

.result-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.result-btn:hover::before {
    left: 100%;
}

.result-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4), 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.result-btn:active {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 15px rgba(212, 175, 55, 0.3), 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

/* Play Again button styling */
.play-again-btn {
    background: linear-gradient(145deg, var(--premium-gold), var(--premium-gold-dark));
    color: #000;
    border-color: var(--premium-gold-dark);
}

.play-again-btn:hover {
    background: linear-gradient(145deg, #E6C547, var(--premium-gold));
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4), 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

/* Return to Menu button styling */
.return-menu-btn {
    background: linear-gradient(145deg, #dc3545, #c82333);
    color: white;
    border-color: #a32020;
}

.return-menu-btn:hover {
    background: linear-gradient(145deg, #e74c3c, #d32f2f);
    box-shadow: 0 12px 30px rgba(220, 53, 69, 0.4), 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

/* Game result icon styling */

/* Mobile responsiveness for game over modal */
@media (max-width: 768px) and (orientation: portrait) {
    .result-actions {
        gap: 1rem;
    }

    .result-btn {
        font-size: clamp(1rem, 4cqw, 1.4rem);
        padding: 1rem 2rem;
        min-width: 250px;
    }

    .game-result-details h3 {
        font-size: clamp(1.4rem, 4cqw, 1.8rem);
        margin-bottom: 1.5rem;
    }

    .result-text {
        font-size: clamp(2rem, 5cqw, 3rem);
    }

    .result-description {
        font-size: clamp(1rem, 3cqw, 1.3rem);
    }
}

@media (max-width: 992px) and (max-height: 500px) and (orientation: landscape) {
    .result-actions {
        flex-direction: row;
        gap: 1rem;
    }

    .result-btn {
        font-size: clamp(0.9rem, 3cqw, 1.2rem);
        padding: 0.8rem 1.5rem;
        min-width: 200px;
    }

    .game-result-details h3 {
        font-size: clamp(1.2rem, 3cqw, 1.6rem);
        margin-bottom: 1rem;
    }

    .result-text {
        font-size: clamp(1.8rem, 4cqw, 2.5rem);
    }

    .result-description {
        font-size: clamp(0.9rem, 2.5cqw, 1.1rem);
    }
}

/* +++++ END: GAME OVER MODAL STYLES +++++ */

/* +++++ START: INVITE COOLDOWN STYLES +++++ */
.invite-friend-btn.cooldown {
    background: linear-gradient(145deg, #6c757d, #5a6268) !important;
    color: white !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.invite-friend-btn.in-game {
    background: linear-gradient(145deg, #dc3545, #c82333) !important;
    color: white !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* +++++ END: INVITE COOLDOWN STYLES +++++ */

/* +++++ START: REMATCH BUTTON STYLES +++++ */
.rematch-btn {
    background: linear-gradient(145deg, var(--premium-gold), var(--premium-gold-dark));
    color: #000;
    border-color: var(--premium-gold-dark);
}

.rematch-btn:hover {
    background: linear-gradient(145deg, #E6C547, var(--premium-gold));
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4), 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.rematch-countdown {
    margin-top: 1.5rem;
    text-align: center;
}

.rematch-countdown p {
    font-family: 'Mate SC', serif;
    font-size: clamp(1.2rem, 3cqw, 1.6rem);
    color: var(--premium-gold);
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin: 0;
}

.rematch-countdown span {
    color: #28a745;
    font-weight: bold;
}

.rematch-btn:disabled {
    background: linear-gradient(145deg, #6c757d, #5a6268) !important;
    color: #adb5bd !important;
    border-color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.rematch-btn:disabled:hover {
    background: linear-gradient(145deg, #6c757d, #5a6268) !important;
    color: #adb5bd !important;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* +++++ END: REMATCH BUTTON STYLES +++++ */

/* --- RESPONSIVENESS --- */
/* Mobile Portrait - COMPLETE REWRITE - KEEP BOARD UNCHANGED */
@media (max-width: 768px) and (orientation: portrait) {

    /* === KEEP BOARD ELEMENTS UNCHANGED === */
    .game-board-and-trays {
        flex-direction: column;
        max-width: 100%;
        gap: var(--bear-off-gap);
        padding: 1rem 0.5rem;
    }

    .board-and-tray-wrapper {
        flex-direction: column;
        width: 100%;
    }

    .board {
        aspect-ratio: 1.2 / 1;
        min-height: 0;
        border-width: 8px;
        width: 100%;
        border-radius: 10px;
        max-width: 100%;
    }

    .bear-off-trays {
        flex-direction: row;
        width: 100%;
        height: var(--bear-off-width);
        gap: 1rem;
        flex-shrink: 0;
        padding: 8px;
        border-radius: 10px;
    }

    .off-board-area {
        flex-direction: row;
        flex-grow: 1;
        width: auto;
        height: 100%;
        margin: 0;
    }

    .off-board-area .checker {
        position: absolute;
        height: 82%;
        width: auto;
        aspect-ratio: 1 / 1;
        top: 9%;
        left: auto;
        pointer-events: none;
        /* Horizontal step in portrait so the stack spreads across the tray. */
        --bear-off-step: 16%;
    }

    .off-board-area.player1 .checker {
        left: calc(var(--i, 0) * var(--bear-off-step));
        right: auto;
        bottom: auto;
    }

    .off-board-area.player2 .checker {
        right: calc(var(--i, 0) * var(--bear-off-step));
        left: auto;
        top: 9%;
    }

    /* Player-2 view: trays are flipped in portrait too — reverse so each player's
       pieces still stack from their own edge toward the centre. */
    body.local-player-2 .off-board-area.player2 .checker {
        left: calc(var(--i, 0) * var(--bear-off-step));
        right: auto;
    }

    body.local-player-2 .off-board-area.player1 .checker {
        right: calc(var(--i, 0) * var(--bear-off-step));
        left: auto;
    }

    /* === COMPACT UI ELEMENTS === */
    .right-ui-bar {
        flex-direction: row;
        width: 100%;
        height: auto;
        padding: 2px;
        gap: 0.2rem;
    }

    .player-ui-container {
        flex-direction: column;
        flex: 1;
        gap: 2px;
        padding: 0;
        border: none;
        background: none;
    }

    #player-1-ui-container {
        flex-direction: column;
    }

    #player-2-ui-container {
        flex-direction: column;
    }

    .player-info {
        flex-direction: column;
        gap: 1px;
    }

    #player-2-ui-container .player-info {
        flex-direction: column;
    }

    .player-info .profile-picture.large {
        width: 25px;
        height: 25px;
    }

    .player-username {
        font-size: 0.6rem;
        line-height: 1;
    }

    .player-timer {
        font-size: 0.7rem;
        padding: 1px 4px;
    }

    .player-info .level-badge.ingame {
        width: 16px;
        height: 16px;
        bottom: -2px;
        right: -2px;
    }

    .level-badge.ingame .level-number {
        font-size: 0.5rem;
    }

    /* === COMPACT MODALS === */
    .modal-content {
        max-width: 70cqw;
        padding: 0.5rem;
    }

    /* Override for friends modal specifically */

    /* Options Menu - TINY */

    .menu-close-button {
        top: 4%;
        right: 8%;
        width: 10cqw;
        max-width: 32px;
    }

    /* Profile Modal - COMPACT */
    .profile-modal-content {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        flex-direction: column;
        gap: 0;
        justify-content: flex-start;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        background: transparent;
        backdrop-filter: none;
    }

    .profile-layout-wrapper {
        flex-direction: row;
        gap: 2rem;
        justify-content: flex-start;
        /* Start from left */
        align-items: center;
        padding: 0;
        margin: 0;
        margin-left: 4cqw;
        /* Shift everything to the right on mobile */
        margin-top: 1.5rem;
        /* Reduced margin to move up */
    }

    .profile-right-section {
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        /* Reduced gap on mobile too */
        margin-right: 0;
        padding-right: 0;
        margin-top: 0;
        /* Reset margin for center positioning */
        align-self: center;
        padding-top: 0;
        /* Remove padding for center alignment */
        height: 100%;
    }

    .profile-picture-large {
        width: 90px;
        /* 1.5X bigger on mobile */
        height: 90px;
        /* 1.5X bigger on mobile */
    }

    .profile-stats {
        padding: 0;
        margin: 0;
        transform: none;
        margin-right: 0;
        padding-right: 0;
        margin-top: 0;
        /* Reset margin for center positioning */
        align-self: center;
        padding-top: 0;
        /* Remove padding for center alignment */
        margin-right: 0;
        /* Remove right margin for center */
    }

    .profile-stats h3 {
        font-size: 1.2rem;
        margin-bottom: 0.2rem;
        /* Much smaller bottom margin */
    }

    /* Friends Modal - COMPACT */

    #friends-close-button {
        top: 1rem !important;
        right: 1rem !important;
        width: clamp(35px, 7cqw, 45px) !important;
        height: clamp(35px, 7cqw, 45px) !important;
        position: absolute !important;
        z-index: 10001 !important;
        transform: none !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
    }

    .friends-tabs {
        margin-bottom: 0.3rem;
        position: absolute;
        top: 0;
        left: 0;
        background: transparent;
        padding: 0.5rem 0 0.3rem 0;
        z-index: 10000;
    }

    .tab-btn {
        padding: 0.15rem 0.45rem;
        font-size: 0.9rem;
        color: white;
    }

    /* === COMPACT BUTTONS === */
    .btn {
        font-size: 0.6rem;
        padding: 0.2rem 0.5rem;
    }

    /* === COMPACT AUTH SCREEN === */
    /* Auth responsive handled by auth-specific media queries */

    /* === COMPACT LOADING SCREEN === */
    #loading-logo {
        width: 120px;
        margin-bottom: 8vh;
    }

}

/* Higher z-index for confirmation modals */
#confirm-modal,
#disconnect-modal,
#game-invite-modal,
#view-profile-modal {
    z-index: 3001;
}

/* Mobile Landscape - COMPLETE REWRITE - KEEP BOARD UNCHANGED */
@media (max-width: 992px) and (max-height: 500px) and (orientation: landscape) {

    /* === KEEP BOARD ELEMENTS UNCHANGED === */
    .board {
        aspect-ratio: 1.6 / 1;
        border-width: 10px;
    }

    .bear-off-trays {
        width: clamp(60px, 12cqh, 80px);
        padding: 10px 0;
    }

    /* === COMPACT MODAL PANELS === */

    .menu-close-button {
        width: clamp(32px, 8cqh, 45px);
        top: 4%;
        right: 8%;
    }

    /* === COMPACT AUTH SCREEN === */
    /* Auth responsive handled by auth-specific media queries */

    /* === COMPACT PROFILE MODAL === */
    .profile-modal-content {
        width: 100%;
        height: 100%;
        transform: none;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        background: transparent;
        backdrop-filter: none;
    }

    /* === COMPACT FRIENDS MODAL === */

    #friends-close-button {
        top: 1rem !important;
        right: 1rem !important;
        width: clamp(35px, 7cqw, 45px) !important;
        height: clamp(35px, 7cqw, 45px) !important;
        position: absolute !important;
        z-index: 10001 !important;
        transform: none !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
    }

    .friends-tabs {
        position: absolute;
        top: 0;
        left: 0;
        background: transparent;
        padding: 0.3rem 0 0.2rem 0;
        z-index: 10000;
    }

    .tab-btn {
        color: white;
    }

    /* === COMPACT BUTTONS === */
    .btn {
        font-size: 0.5rem;
        padding: 0.2rem 0.4rem;
    }
}

/* === OVERRIDE: Move level star to top-left of profile picture === */
.level-badge.ingame {
    width: 28px;
    height: 28px;
    position: absolute;
    top: -5px;
    /* Push a little above */
    left: -5px;
    /* Push a little left */
    z-index: 2;
}

.level-badge.ingame .level-number {
    font-size: 0.8rem;
}

/* === FIXED: Bigger star covering top-left corner === */
.level-badge.ingame {
    width: 34px;
    /* bigger */
    height: 34px;
    position: absolute;
    top: -8px;
    /* move slightly above the picture */
    left: -8px;
    /* move slightly left of the picture */
    z-index: 5;
    /* make sure it stays on top */
}

.level-badge.ingame .level-number {
    font-size: 1rem;
    /* adjust size for bigger star */
}

/* === FIX: Center star on profile picture top-left corner === */
/* The badge sits inside the picture, so these offsets are from the picture's corner (outside its
   2px border). */
.player-info .level-badge.ingame {
    width: 36px;
    height: 36px;
    position: absolute;
    top: -2px;
    left: -2px;
    right: auto;
    bottom: auto;
    margin: 0;
    transform: translate(-50%, -50%);
    /* center the star on the corner */
    z-index: 99;
    /* force it above everything */
}

.player-info .level-badge.ingame .level-number {
    font-size: 1rem;
}

/* ===== PLAYER-CENTRIC VIEW LOGIC ===== */
/* When the body has .local-player-1, this reverses the flex container,
   placing the P1 UI (which is second in the HTML) at the top. */
body.local-player-1 .right-ui-bar {
    flex-direction: column-reverse;
}

/* Bear-off trays positioning: each player's OWN tray must sit at the BOTTOM of their view.
   HTML child order is [P2 tray, undo, P1 tray], so:
   - P1's tray is the LAST child  -> plain `column` already drops it to the bottom.
   - P2's tray is the FIRST child -> `column-reverse` drops it to the bottom. */
body.local-player-1 .bear-off-trays {
    flex-direction: column;
}

body.local-player-2 .bear-off-trays {
    flex-direction: column-reverse;
}

/* ===== PLAYER LAYOUT LOGIC (Unchanged) ===== */
/* Ensure all player containers use column layout */
.player-ui-container {
    flex-direction: column !important;
}

/* Portrait Mode Logic: lay the trays/UI out horizontally so each player's own
   tray ends up on their near (left) side. P1's tray is the last child (row-reverse
   moves it left); P2's tray is the first child (plain row keeps it left). This also
   overrides the landscape `column`/`column-reverse` rules above while in portrait. */
@media (max-width: 768px) and (orientation: portrait) {

    body.local-player-1 .right-ui-bar {
        flex-direction: row-reverse;
    }

    body.local-player-1 .bear-off-trays {
        flex-direction: row-reverse;
    }

    body.local-player-2 .right-ui-bar {
        flex-direction: row;
    }

    body.local-player-2 .bear-off-trays {
        flex-direction: row;
    }
}

/* Move player UI elements down */
.player-ui-container {
    transform: translateY(20px);
    /* adjust 20px to move more or less */
}

/* Move player and timer slightly up */

.player {
    margin-bottom: 3px;
    /* space between player and timer */
}

.timer {
    margin-top: -3px;
    /* move timer closer to player text */
}

/* Adjust player position and timer spacing */

.player {
    display: block;
    margin-bottom: 2px;
    /* space between player name and timer */
}

.timer {
    display: block;
    margin-top: -2px;
    /* brings timer closer to player name */
    font-size: 0.9em;
    /* optional: adjust timer size if needed */
}

/* Adjust only the bottom player's timer */

/* Store and Inventory Page Styles */

/* ===== GAME OVER MODAL STYLES ===== */
.game-result-details {
    flex: 0 1 400px;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    max-width: 100%;
    padding-top: 2rem;
}

.game-result-details h3 {
    font-family: 'Mate SC', serif;
    font-size: clamp(1.8rem, 4cqw, 2.2rem);
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--premium-gold-dark);
    padding-bottom: 0.5rem;
    text-align: center;
    width: 80%;
    color: var(--premium-text);
}

.result-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.result-text {
    font-family: 'Mate SC', serif;
    font-size: clamp(2.5rem, 6cqw, 4rem);
    font-weight: bold;
    margin: 0;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.result-text.win {
    color: #28a745;
}

.result-text.lose {
    color: #dc3545;
}

.result-description {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.2rem, 3cqw, 1.8rem);
    color: white !important;
    text-align: center;
    margin: 0;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.result-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: nowrap;
    width: 100%;
}

/* Force side-by-side layout for all result action containers */
#game-win-modal .result-actions,
#game-lose-modal .result-actions,
#game-over-modal .result-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.result-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.2rem;
    border: none;
    border-radius: 8px;
    font-family: 'Mate SC', serif;
    font-size: clamp(0.9rem, 2.2cqw, 1.1rem);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 160px;
    height: 50px;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

.result-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.play-again-btn {
    background: linear-gradient(145deg, var(--premium-gold), var(--premium-gold-dark));
    color: #000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.play-again-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px var(--premium-gold-glow), 0 6px 25px rgba(0, 0, 0, 0.4);
}

.rematch-btn {
    background: linear-gradient(145deg, #28a745, #218838);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.rematch-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.5), 0 6px 25px rgba(0, 0, 0, 0.4);
}

.return-menu-btn {
    background: linear-gradient(145deg, #dc3545, #c82333);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.return-menu-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5), 0 6px 25px rgba(0, 0, 0, 0.4);
}

.rematch-countdown {
    margin-top: 1rem;
    text-align: center;
}

.rematch-countdown p {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 2.5cqw, 1.4rem);
    color: white;
    margin: 0;
    opacity: 0.8;
}

/* ===== INVITATION MODAL STYLES ===== */

.invite-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

.invite-message p {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.2rem, 3cqw, 1.8rem);
    color: white;
    text-align: center;
    margin: 0;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Force buttons to be side by side - duplicate rule for specificity */

.accept-btn {
    background: linear-gradient(145deg, #28a745, #218838);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.accept-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.5), 0 6px 25px rgba(0, 0, 0, 0.4);
}

.decline-btn {
    background: linear-gradient(145deg, #dc3545, #c82333);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.decline-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5), 0 6px 25px rgba(0, 0, 0, 0.4);
}
/* +++++ START: NEW OPTIONS/MENU MODAL STYLES +++++ */

.options-menu-btn {
    width: 100% !important;
    min-width: 250px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    padding: 1rem 1.5rem !important;
    text-transform: uppercase;
    font-size: clamp(1rem, 2.5cqw, 1.3rem) !important;
}

/* Update mobile response for options grid */
@media (max-width: 768px) {
    
    .options-menu-btn {
        min-width: 200px !important;
        padding: 0.8rem 1.2rem !important;
        font-size: 1rem !important;
    }
}
/* +++++ END: NEW OPTIONS/MENU MODAL STYLES +++++ */

/* ============================================================
   COSMETIC SHOP & INVENTORY  (skins: boards / checkers / dice)
   ============================================================ */

/* --- Menu corner buttons (Shop + Inventory), top-left cluster --- */

/* --- Shop / Inventory full page --- */
/* Animated modals over the (blurred) live menu, like Friends / Stats. Layout: a header band (title
   chip, coin balance, close), then a category sidebar on the left and the scrolling item grid. */
.modal-container.shop-modal {
    background:
        radial-gradient(ellipse 70% 60% at 60% 45%, rgba(255, 196, 92, 0.1), transparent 70%),
        linear-gradient(180deg, rgba(30, 20, 9, 0.72), rgba(14, 9, 4, 0.82));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
}

/* The content slides + scales in when the modal opens, and reverses on close. */
.shop-modal .shop-inner {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-modal.visible .shop-inner {
    opacity: 1;
    transform: none;
}

.shop-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 12px 16px 10px 18px;
    gap: 10px;
}

/* ---- Header ---- */
.shop-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    min-height: 48px;
    padding: 0 2px 8px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.22);
}
.shop-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.shop-title-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #2a1c06;
    background: linear-gradient(180deg, #f6da78, #c99a2e);
    border: 1px solid #8a6a17;
    box-shadow: 0 3px 0 #6b4f10, 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.shop-title-icon svg { width: 24px; height: 24px; }
.shop-title {
    margin: 0;
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-size: 26px;
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
    color: #fbe3a0;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 18px rgba(212, 175, 55, 0.3);
}

/* ---- Body: sidebar + grid ---- */
.shop-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 14px;
}

/* Category sidebar (Boards / Checkers / Dice) */
.shop-tabs {
    flex: 0 0 156px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 2px;
}
.shop-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    background: linear-gradient(180deg, rgba(62, 43, 21, 0.72), rgba(24, 16, 8, 0.8));
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 236, 180, 0.07);
    color: rgba(244, 232, 205, 0.82);
    font-family: 'Mate SC', serif;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
    touch-action: pan-y;
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.shop-tab-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #f0c75a;
    background: rgba(0, 0, 0, 0.38);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.shop-tab-icon svg { width: 20px; height: 20px; }
.shop-tab-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-tab-count {
    flex: 0 0 auto;
    min-width: 24px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    color: #f6e2a8;
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    text-align: center;
}
@media (hover: hover) {
    .shop-tab:not(.active):hover { color: #fff3d6; background: linear-gradient(180deg, rgba(84, 58, 27, 0.8), rgba(30, 20, 10, 0.85)); }
}
.shop-tab:active { transform: scale(0.97); }
.shop-tab.active {
    color: #2a1c06;
    border-color: #8a6a17;
    background: linear-gradient(180deg, #f6da78, #c99a2e);
    box-shadow: 0 3px 0 #6b4f10, 0 8px 18px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.shop-tab.active .shop-tab-icon { color: #2a1c06; background: rgba(42, 28, 6, 0.16); box-shadow: none; }
.shop-tab.active .shop-tab-count { color: #2a1c06; background: rgba(42, 28, 6, 0.18); }

/* Scrollable grid of skin cards */
.shop-grid-wrap {
    flex: 1 1 auto;
    /* min-height:0 lets the grid shrink to the space left so its own overflow scrolling takes over. */
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.5) transparent;
    padding: 2px 8px 10px 2px;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    contain: layout paint style;
}
.shop-grid-wrap::-webkit-scrollbar { width: 8px; }
.shop-grid-wrap::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.45);
    border-radius: 4px;
}

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

/* Empty page (nothing owned in a slot, no bundles, offline with no catalog): dice art, a line
   saying why and an optional button, centred in the whole grid area. */
.shop-grid.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}
.shop-tabs:empty { display: none; }
.shop-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 360px;
    margin: auto;
    padding: 12px 12px 22px;
    text-align: center;
}
.shop-empty-art {
    position: relative;
    width: 116px;
    height: 81px;
    margin-bottom: 8px;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
    animation: shopEmptyBob 3.4s ease-in-out infinite;
}
.shop-empty-art svg { display: block; width: 100%; height: 100%; }
@keyframes shopEmptyBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.shop-empty-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #f0645a, #b3242c);
    box-shadow: 0 0 0 2px #fff1cf, 0 3px 6px rgba(0, 0, 0, 0.5);
    color: #fff;
}
.shop-empty-badge svg { width: 18px; height: 18px; }
.shop-empty-title {
    font-family: 'Mate SC', serif;
    font-size: 19px;
    line-height: 1.2;
    color: #fbe3a0;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.shop-empty-sub {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    color: rgba(240, 230, 210, 0.78);
}
/* Same purple as the menu's Shop button. */
.shop-empty-btn {
    margin-top: 10px;
    height: 42px;
    padding: 0 24px;
    border-radius: 14px;
    border: 1.5px solid #e0b955;
    font: 16px/1 'Mate SC', 'Rubik', serif;
    letter-spacing: 0.5px;
    color: #fff6e2;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    background:
        radial-gradient(120% 110% at 50% -20%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, #a774e0 0%, #7446b8 52%, #4c2785 100%);
    box-shadow: 0 4px 0 #331a5c, 0 10px 18px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.shop-empty-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #331a5c, 0 6px 12px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(0, 0, 0, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

/* ---- Item card ---- */
.skin-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 7px 7px 9px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(64, 44, 21, 0.78), rgba(22, 15, 8, 0.88));
    border: 1px solid rgba(212, 175, 55, 0.22);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 236, 180, 0.08);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
    touch-action: pan-y;
    /* Cards below the fold skip layout/paint until scrolled into view. */
    content-visibility: auto;
    contain-intrinsic-size: auto 210px;
}
@media (hover: hover) {
    .skin-card:hover {
        transform: translateY(-4px);
        border-color: rgba(212, 175, 55, 0.55);
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(212, 175, 55, 0.16);
    }
}
.skin-card.equipped {
    border-color: #f0c75a;
    box-shadow: 0 0 0 1px #f0c75a, 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 22px rgba(240, 199, 90, 0.32);
}

/* The spotlit stage the preview sits on. */
.skin-card-stage {
    position: relative;
    padding: 7px 6px 6px;
    border-radius: 12px;
    background:
        radial-gradient(ellipse 75% 65% at 50% 42%, rgba(255, 214, 130, 0.24), transparent 70%),
        linear-gradient(180deg, #2e2113, #110b05);
    box-shadow: inset 0 0 0 1px rgba(255, 214, 130, 0.12), inset 0 -12px 18px rgba(0, 0, 0, 0.45);
}
.skin-card.equipped .skin-card-stage {
    background:
        radial-gradient(ellipse 75% 65% at 50% 42%, rgba(255, 214, 130, 0.38), transparent 72%),
        linear-gradient(180deg, #3a2a14, #140d05);
}
.skin-card-stage .skin-preview { box-shadow: 0 8px 14px rgba(0, 0, 0, 0.55); }
.skin-card-stage .skin-preview.board-preview { box-shadow: 0 8px 14px rgba(0, 0, 0, 0.55); }

/* Equipped / Owned flag (top-left) and an owned item's price tag (top-right). */
.skin-card-flag {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.6px;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.skin-card-flag.is-equipped { background: linear-gradient(180deg, #f6da78, #c99a2e); color: #2a1c06; }
.skin-card-flag.is-owned { background: rgba(10, 30, 16, 0.82); color: #8fe3a5; border: 1px solid rgba(120, 220, 150, 0.45); }
.skin-card-stage .skin-card-cost {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    margin: 0;
    padding: 2px 7px 2px 4px;
    font-size: 10.5px;
    opacity: 0.9;
}

.skin-card-name {
    font-family: 'Mate SC', serif;
    font-size: 15px;
    color: var(--premium-text);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
}

/* Action button: Equip / Equipped / price (coins) / ad progress / Free */
.skin-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-family: 'Mate SC', serif;
    font-size: 15px;
    letter-spacing: 0.5px;
    cursor: pointer;
    touch-action: pan-y;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease;
}
.skin-card-btn .coin-svg,
.skin-card-btn .ad-svg { width: 20px; height: 20px; vertical-align: middle; }
.skin-card-btn:active { transform: translateY(2px); }
@media (hover: hover) {
    .skin-card-btn:not(.is-equipped):hover { filter: brightness(1.08); }
}
/* Price buttons use the money font and a chunky raised edge. */
.skin-card-btn.is-buy,
.skin-card-btn.is-ad,
.skin-card-btn.is-free {
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 800;
    font-size: 15px;
    font-variant-numeric: lining-nums tabular-nums;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}
.skin-card-btn.is-buy,
.skin-card-btn.is-free {
    background: linear-gradient(180deg, #67d673, #2f9d45);
    border-color: #1f6e2e;
    box-shadow: 0 3px 0 #1a5a27, 0 6px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.skin-card-btn.is-free { text-transform: uppercase; letter-spacing: 1px; }
.skin-card-btn.is-buy.is-short { filter: saturate(0.55) brightness(0.9); }
.skin-card-btn.is-ad {
    background: linear-gradient(180deg, #62b0ff, #2f6fd6);
    border-color: #1d4593;
    box-shadow: 0 3px 0 #193c80, 0 6px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.skin-card-btn.is-ad .ad-svg { color: #fff; }
.skin-card-btn.is-equip {
    background: rgba(240, 199, 90, 0.08);
    border-color: rgba(240, 199, 90, 0.7);
    color: #f6d77a;
}
.skin-card-btn.is-equipped {
    background: linear-gradient(180deg, #f6da78, #c99a2e);
    border-color: #8a6a17;
    color: #2a1c06;
    cursor: default;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.skin-btn-check { font-family: 'Rubik', system-ui, sans-serif; font-weight: 800; }
.skin-card-btn.is-equipped:active { transform: none; }

/* ---------- Skin previews (use the card's scoped CSS variables) ---------- */
.skin-preview {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #0c0a07;
    display: grid;
    place-items: center;
}

/* Board preview */
/* Board preview: the mini board (buildMiniBoard) lying on a softly lit table, like the checkers'
   product shot. Its sizes are in cqw of the board itself, so it scales with any preview. */
.skin-preview.board-preview {
    aspect-ratio: 1.5 / 1;
    display: block;
    background:
        radial-gradient(ellipse 58% 44% at 50% 58%, rgba(255, 214, 130, 0.24), transparent 72%),
        radial-gradient(circle at 50% 28%, #3a2b1c, #0b0805 82%);
}

/* ---- The mini board ---- */
.mb-tilt {
    position: absolute;
    left: 50%;
    top: 47%;
    width: 96%;
    aspect-ratio: 1.8 / 1;
    container-type: inline-size;
    transform: translate(-50%, -50%) perspective(700px) rotateX(20deg);
    transform-origin: 50% 60%;
}
/* The board's thickness: the frame seen below its top. */
.mb-edge {
    position: absolute;
    inset: 0;
    border-radius: 4.2cqw;
    background: var(--board-frame-color);
    filter: brightness(0.42);
    transform: translateY(3cqw);
    box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, 0.6);
}
.mb {
    position: absolute;
    inset: 0;
    display: flex;
    padding: 3.4cqw;
    box-sizing: border-box;
    border-radius: 4.2cqw;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 34%, rgba(0, 0, 0, 0.3)),
        var(--board-frame-color);
    box-shadow: inset 0 0.5cqw 0 rgba(255, 255, 255, 0.28), inset 0 -0.6cqw 1cqw rgba(0, 0, 0, 0.45);
}
.mb-half {
    position: relative;
    flex: 1 1 0;
    overflow: hidden;
    border-radius: 1.4cqw;
    background-color: var(--playing-surface-bg);
    background-image: var(--board-surface-image);
    background-size: var(--board-surface-size);
    background-blend-mode: var(--board-surface-blend);
    box-shadow: inset 0 0 2.6cqw rgba(0, 0, 0, 0.6), 0 0 0 0.4cqw rgba(0, 0, 0, 0.25);
}
.mb-bar {
    position: relative;
    flex: 0 0 6.5%;
    margin: 0 1.2cqw;
    border-radius: 1cqw;
    box-shadow: inset 1.2cqw 0 1.4cqw -0.8cqw rgba(0, 0, 0, 0.5), inset -1.2cqw 0 1.4cqw -0.8cqw rgba(0, 0, 0, 0.5);
}
.mb-hinge {
    position: absolute;
    left: 50%;
    width: 64%;
    height: 9%;
    transform: translateX(-50%);
    border-radius: 0.7cqw;
    background: linear-gradient(180deg, #f6dd92, #b88a2c 55%, #6e4f12);
    box-shadow: 0 0.4cqw 0.7cqw rgba(0, 0, 0, 0.55), inset 0 0.25cqw 0 rgba(255, 255, 255, 0.45);
}
.mb-hinge:first-child { top: 18%; }
.mb-hinge:last-child { bottom: 18%; }
.mb-points {
    position: absolute;
    left: 3%;
    right: 3%;
    height: 43%;
    display: flex;
}
.mb-points.mb-top { top: 0; }
.mb-points.mb-bottom { bottom: 0; transform: scaleY(-1); }
/* Each point with a soft crease down its middle. */
.mb-pt {
    flex: 1 1 0;
    clip-path: polygon(6% 0, 94% 0, 50% 100%);
}
.mb-pt.light { background: linear-gradient(90deg, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.14) 50%, rgba(0, 0, 0, 0.2)), var(--point-light); }
.mb-pt.dark { background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.24)), var(--point-dark); }
/* A sheen across the whole board. */
.mb-gloss {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(112deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0) 32%);
    pointer-events: none;
}
/* Its shadow on the table. */
.mb-shadow {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 3%;
    height: 22%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.78), transparent);
}
/* Checkers on the mini board (bundles): lying in its plane, with a rim and an edge below. */
.mb-chk {
    position: absolute;
    z-index: 1;
    width: 5.9cqw;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    transform: translateX(-50%);
}
.mb-chk::after {
    content: '';
    position: absolute;
    inset: 20%;
    border-radius: 50%;
    box-shadow: inset 0 0.2cqw 0.3cqw rgba(0, 0, 0, 0.3), 0 0.2cqw 0 rgba(255, 255, 255, 0.25);
}
.mb-chk.p1 {
    background: var(--checker-p1-bg);
    box-shadow: inset 0 0.5cqw 0.6cqw rgba(255, 255, 255, 0.85), inset 0 -0.5cqw 0.7cqw rgba(0, 0, 0, 0.28), 0 0.55cqw 0 rgba(0, 0, 0, 0.38), 0 0.9cqw 1.1cqw rgba(0, 0, 0, 0.45);
}
.mb-chk.p2 {
    background: var(--checker-p2-bg);
    box-shadow: inset 0 0.5cqw 0.6cqw rgba(255, 255, 255, 0.32), inset 0 -0.5cqw 0.7cqw rgba(0, 0, 0, 0.55), 0 0.55cqw 0 rgba(0, 0, 0, 0.45), 0 0.9cqw 1.1cqw rgba(0, 0, 0, 0.5);
}

/* Checker preview: the set on its own, a stack of each side's checkers in 3D on a neutral, softly
   lit stage (no board, so nothing clashes). Sizes are in cqw of the preview, so it scales with
   the card / dialog it sits in. */
.skin-preview.checkers-preview {
    --ck-w: 38cqw;     /* a checker's width */
    --ck-top: 18cqw;   /* height of its top seen at an angle */
    --ck-edge: 6.5cqw; /* its thickness */
    display: block;
    aspect-ratio: 1.5 / 1;
    container-type: inline-size;
    background:
        radial-gradient(ellipse 40% 38% at 63% 40%, rgba(255, 226, 170, 0.2), transparent 72%),
        radial-gradient(ellipse 62% 42% at 50% 74%, rgba(255, 214, 130, 0.22), transparent 70%),
        radial-gradient(circle at 50% 30%, #3a2b1c, #0b0805 80%);
}
.ck-stack {
    position: absolute;
    bottom: 30%;
    width: var(--ck-w);
    height: 0;
    transform: translateX(-50%) scale(var(--s, 1));
    transform-origin: 50% 100%;
}
/* Soft shadow on the ground under the stack. */
.ck-stack::before {
    content: "";
    position: absolute;
    left: -14%;
    right: -14%;
    top: calc(var(--ck-top) * -0.55);
    height: calc(var(--ck-top) * 1.1);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent);
}
.ck-piece {
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(var(--ck-top) + var(--ck-edge));
    bottom: calc(var(--k, 0) * var(--ck-edge) - var(--ck-edge) * 0.4);
}
/* The edge: the lower half of the checker, darker, with a sheen across it. */
.ck-side {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--ck-top) / 2);
    bottom: 0;
    border-radius: 0 0 50% 50% / 0 0 calc(var(--ck-top) / 2) calc(var(--ck-top) / 2);
    filter: brightness(0.62) saturate(1.1);
    /* A groove under each checker so the pieces in a stack read one by one. */
    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.55), inset 0 -3px 0 rgba(255, 255, 255, 0.12);
}
.ck-piece.p1 .ck-side { background: linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.28) 32%, rgba(0, 0, 0, 0.3)), var(--checker-p1-bg); }
.ck-piece.p2 .ck-side { background: linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.22) 32%, rgba(0, 0, 0, 0.3)), var(--checker-p2-bg); }
/* The top: the checker's face, with a light from above and a ring a little in from the edge. */
.ck-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--ck-top);
    border-radius: 50%;
}
.ck-piece.p1 .ck-top { background: var(--checker-p1-bg); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.85), inset 0 -2px 3px rgba(0, 0, 0, 0.18); }
.ck-piece.p2 .ck-top { background: var(--checker-p2-bg); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.4), inset 0 -2px 3px rgba(0, 0, 0, 0.45), 0 0 6px rgba(255, 230, 180, 0.12); }
.ck-top::after {
    content: "";
    position: absolute;
    inset: 18% 15%;
    border-radius: 50%;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.28);
}

.cp-disc {
    width: 34%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.cp-disc.p1 {
    background: var(--checker-p1-bg);
    box-shadow: inset 0 3px 4px rgba(255, 255, 255, 0.9), inset 0 -4px 5px rgba(0, 0, 0, 0.25), 0 4px 7px rgba(0, 0, 0, 0.45);
}

.cp-disc.p2 {
    background: var(--checker-p2-bg);
    box-shadow: inset 0 3px 4px rgba(255, 255, 255, 0.2), inset 0 -4px 5px rgba(0, 0, 0, 0.6), 0 4px 7px rgba(0, 0, 0, 0.5);
}

/* Dice preview — the EXACT in-game 3D dice (.die/.die-face/.dot). perspective gives the cube
   its depth; the dice keep their in-game cqw sizing (resolved from the game-wrapper) and are
   scaled up in JS so they read clearly + bigger in the card. NO container-type here — it would
   re-scope cqw and flatten the 3D. */
.skin-preview.dice-preview {
    aspect-ratio: 1.5 / 1;
    background: radial-gradient(circle at 50% 35%, #2a2113, #0b0805);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22%;
    box-sizing: border-box;
    perspective: 700px;
    /* drop-shadow lives on the CONTAINER — a filter on .die itself would flatten its
       preserve-3d faces and collapse the cube to an edge-on line. */
    filter: drop-shadow(0 7px 11px rgba(0, 0, 0, 0.5));
}

/* Toast for "Added to inventory" feedback */
/* A gold-framed tile like the menu buttons, coloured by kind (data-kind, see showShopToast):
   emerald success, ruby error / offline, lapis info, walnut for coins. An illustrated icon disc
   on the left, backgammon points fading in on the right, and a gold bar that runs out. It springs
   up from the bottom and sinks back down. */
.shop-toast {
    --st-top: #38ad6c;
    --st-mid: #24804f;
    --st-bot: #155333;
    --st-edge: #0c331f;
    --st-disc: linear-gradient(180deg, #5fd892, #1f7a47);
    position: absolute;
    bottom: 18px;
    left: 50%;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 230px;
    max-width: min(78%, 520px);
    box-sizing: border-box;
    padding: 8px 22px 11px 8px;
    overflow: hidden;
    border: 1.5px solid #e0b955;
    border-radius: 18px;
    background:
        radial-gradient(120% 130% at 78% -12%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 56%),
        linear-gradient(180deg, var(--st-top) 0%, var(--st-mid) 52%, var(--st-bot) 100%);
    box-shadow: 0 4px 0 var(--st-edge), 0 14px 30px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 18px rgba(0, 0, 0, 0.25);
    color: #fff6e2;
    opacity: 0;
    transform: translateX(-50%) translateY(34px) scale(0.92);
    transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.5, 0, 0.75, 0);
    pointer-events: none;
}
.shop-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    transition: opacity 0.18s ease, transform 0.5s cubic-bezier(0.2, 1.55, 0.4, 1);
}
.shop-toast[data-kind="error"],
.shop-toast[data-kind="offline"] {
    --st-top: #dc4652;
    --st-mid: #a92233;
    --st-bot: #6b0f1e;
    --st-edge: #470a13;
    --st-disc: linear-gradient(180deg, #ff7a6e, #b3242c);
}
.shop-toast[data-kind="info"] {
    --st-top: #4a74e0;
    --st-mid: #2c4cb0;
    --st-bot: #1b2e7a;
    --st-edge: #121e52;
    --st-disc: linear-gradient(180deg, #7fa3ff, #2c4cb0);
}
.shop-toast[data-kind="coins"] {
    --st-top: #8a5d2c;
    --st-mid: #5e3c18;
    --st-bot: #34200b;
    --st-edge: #1f1205;
    --st-disc: radial-gradient(circle at 50% 35%, #4a3215, #1c1106);
}
/* Backgammon points along the right edge, like the menu's mode buttons. */
.shop-toast::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='100' viewBox='0 0 132 100'%3E%3Cpath d='M0 0h22l-11 34z' fill='rgba(255,255,255,.16)'/%3E%3Cpath d='M0 100h22l-11 -34z' fill='rgba(0,0,0,.22)'/%3E%3Cpath d='M22 0h22l-11 34z' fill='rgba(0,0,0,.22)'/%3E%3Cpath d='M22 100h22l-11 -34z' fill='rgba(255,255,255,.16)'/%3E%3Cpath d='M44 0h22l-11 34z' fill='rgba(255,255,255,.16)'/%3E%3Cpath d='M44 100h22l-11 -34z' fill='rgba(0,0,0,.22)'/%3E%3Cpath d='M66 0h22l-11 34z' fill='rgba(0,0,0,.22)'/%3E%3Cpath d='M66 100h22l-11 -34z' fill='rgba(255,255,255,.16)'/%3E%3Cpath d='M88 0h22l-11 34z' fill='rgba(255,255,255,.16)'/%3E%3Cpath d='M88 100h22l-11 -34z' fill='rgba(0,0,0,.22)'/%3E%3Cpath d='M110 0h22l-11 34z' fill='rgba(0,0,0,.22)'/%3E%3Cpath d='M110 100h22l-11 -34z' fill='rgba(255,255,255,.16)'/%3E%3C/svg%3E") right center / auto 100% no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 85%);
    mask-image: linear-gradient(90deg, transparent 35%, #000 85%);
    pointer-events: none;
}
.st-icon {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--st-disc);
    box-shadow: 0 0 0 2px #f6da78, 0 3px 6px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.45);
    color: #fff;
}
.st-icon svg { width: 21px; height: 21px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.shop-toast[data-kind="coins"] .st-icon svg { width: 30px; height: 30px; }
.shop-toast.visible .st-icon { animation: stIconPop 0.55s 0.08s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes stIconPop {
    from { transform: scale(0) rotate(-35deg); }
    to { transform: scale(1) rotate(0); }
}
.st-text {
    position: relative;
    font-family: 'Mate SC', serif;
    font-size: 16.5px;
    line-height: 1.2;
    letter-spacing: 0.3px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}
.shop-toast[data-kind="coins"] .st-text { color: #fbe3a0; }
.st-timer {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #f6da78, #fff3c4);
    box-shadow: 0 0 6px rgba(246, 218, 120, 0.6);
    opacity: 0.85;
    transform-origin: left center;
}
.shop-toast.visible .st-timer { animation: stTimer var(--toast-ms, 2s) linear forwards; }
@keyframes stTimer {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .shop-toast, .shop-toast.visible { transition: opacity 0.2s ease; }
    .shop-toast.visible .st-icon { animation: none; }
}

/* ---------- Friend request button (viewed-profile / stats modal) ---------- */

/* ---------- App-wide toast (#friend-toast: friends, online play, the menu's offline message) ----------
   The same tile as the shop's (.shop-toast), above every page. On the main menu it rises to just
   above the Shop / Inventory / Friends dock instead of covering it. */
.shop-toast.friend-toast { z-index: 5000; }
#menu-container.visible ~ .friend-toast { bottom: 92px; }

/* ---------- Buy dialog (#shop-confirm) ----------
   A walnut-and-gold card like the rest of the game: a gold ribbon with the question, the item on a
   spotlit stand with slowly turning rays (left), and its kind, name, price plate and chunky game
   buttons (right). Backgammon points run along the top edge. */
.shop-confirm {
    position: absolute;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255, 196, 92, 0.12), transparent 70%), rgba(8, 5, 2, 0.66);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.shop-confirm.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.shop-confirm-box {
    position: relative;
    width: min(610px, 94%);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 216px 1fr;
    align-items: center;
    gap: 20px;
    padding: 26px 24px 20px 20px;
    border-radius: 24px;
    border: 1.5px solid #d4af37;
    background:
        radial-gradient(120% 90% at 25% 0%, rgba(255, 214, 130, 0.14), transparent 60%),
        linear-gradient(180deg, rgba(50, 34, 16, 0.98), rgba(16, 10, 5, 0.98));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 36px rgba(212, 175, 55, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 4px rgba(0, 0, 0, 0.22), inset 0 0 0 5px rgba(212, 175, 55, 0.16);
    transform: translateY(20px) scale(0.92);
    transition: transform 0.42s cubic-bezier(0.22, 1.35, 0.36, 1);
}
.shop-confirm.visible .shop-confirm-box { transform: none; }
/* Backgammon points hanging from the top edge. */
.shop-confirm-box::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 30px;
    border-radius: 23px 23px 0 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='30' viewBox='0 0 44 30'%3E%3Cpath d='M0 0h22l-11 30z' fill='rgba(246,218,120,.16)'/%3E%3Cpath d='M22 0h22l-11 30z' fill='rgba(0,0,0,.28)'/%3E%3C/svg%3E") repeat-x left top / 44px 30px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    pointer-events: none;
}

/* The question, on a gold ribbon pinned over the top edge. */
.shop-confirm-title {
    position: absolute;
    top: -17px;
    left: 50%;
    z-index: 2;
    margin: 0;
    padding: 7px 26px 8px;
    transform: translateX(-50%);
    border-radius: 999px;
    border: 1.5px solid #fff0b8;
    background:
        radial-gradient(120% 120% at 50% -30%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, #f6da78, #c99a2e);
    box-shadow: 0 3px 0 #6b4f10, 0 8px 18px rgba(0, 0, 0, 0.45);
    color: #2a1c06;
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* The stand: a dark velvet stage, a warm spotlight and turning rays behind the item. */
.sc-showcase {
    position: relative;
    height: 176px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 18px;
    background:
        radial-gradient(ellipse 70% 58% at 50% 44%, rgba(255, 214, 130, 0.3), transparent 72%),
        radial-gradient(circle at 50% 30%, #3d2c1a, #0b0805 82%);
    box-shadow: inset 0 0 0 1px rgba(255, 214, 130, 0.2), inset 0 -18px 26px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.45);
}
.sc-showcase::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: 72%;
    height: 18px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6), transparent 70%);
    pointer-events: none;
}
.sc-rays {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 320px;
    height: 320px;
    margin: -160px 0 0 -160px;
    border-radius: 50%;
    background: repeating-conic-gradient(rgba(255, 220, 120, 0.17) 0 9deg, transparent 9deg 22.5deg);
    -webkit-mask: radial-gradient(circle, #000 14%, transparent 64%);
    mask: radial-gradient(circle, #000 14%, transparent 64%);
    animation: csRays 16s linear infinite;
    pointer-events: none;
}
.shop-confirm-preview {
    position: relative;
    z-index: 1;
    width: 82%;
}
.shop-confirm-preview .skin-preview { box-shadow: 0 10px 18px rgba(0, 0, 0, 0.6), 0 0 0 1.5px rgba(255, 214, 130, 0.35); }
/* Checkers and dice stand straight on the stand (a board keeps its frame). */
.shop-confirm-preview .skin-preview.checkers-preview,
.shop-confirm-preview .skin-preview.dice-preview,
.shop-confirm-preview .skin-preview.board-preview,
.shop-confirm-preview .bundle-scene { background: none; box-shadow: none; overflow: visible; }
.shop-confirm.visible .shop-confirm-preview { animation: csPop 0.6s 0.05s cubic-bezier(0.22, 1.5, 0.36, 1) both; }

/* Kind, name, price, note and the buttons. */
.sc-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    text-align: left;
}
.sc-kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 11px 4px 7px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.42);
    background: rgba(0, 0, 0, 0.36);
    color: #f6d77a;
    font: 700 11.5px/1 'Rubik', system-ui, sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
}
.sc-kind svg { flex: 0 0 auto; width: 15px; height: 15px; }
.sc-kind span { overflow: hidden; text-overflow: ellipsis; }
.shop-confirm-name {
    max-width: 100%;
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-size: 25px;
    line-height: 1.1;
    color: #fbe3a0;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(212, 175, 55, 0.3);
}
/* The price plate: a recessed bar like the coin counters. */
.sc-price {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px 0 9px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1.5px solid rgba(241, 201, 104, 0.75);
    background: linear-gradient(180deg, rgba(14, 10, 5, 0.88), rgba(34, 24, 11, 0.84));
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(255, 230, 160, 0.12), 0 3px 10px rgba(0, 0, 0, 0.45);
    color: #fff4cc;
    font: 800 21px/1 'Rubik', system-ui, sans-serif;
    font-variant-numeric: lining-nums tabular-nums;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
    white-space: nowrap;
}
.sc-price .coin-svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.sc-price s { font-size: 14px; font-weight: 700; color: rgba(255, 244, 204, 0.5); text-decoration-thickness: 2px; }
.sc-price .sc-save {
    padding: 4px 7px;
    border-radius: 999px;
    border: 1px solid #ffe19a;
    background: linear-gradient(180deg, #ff6b62, #c5242d);
    color: #fff;
    font-size: 11px;
    font-style: normal;
    letter-spacing: 0.4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}
.sc-price[data-kind="free"] { padding: 0 18px; border-color: rgba(120, 220, 150, 0.7); color: #b6f0c6; font-size: 17px; letter-spacing: 1.5px; text-transform: uppercase; }
.sc-price[data-kind="level"] { font-size: 17px; }
.sc-price .star-svg { width: 22px; height: 22px; color: #f6d77a; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.sc-price[data-kind="ads"] { border-color: rgba(120, 170, 255, 0.7); color: #d6e4ff; font-size: 18px; }
.sc-price .ad-svg { width: 24px; height: 24px; color: #8fc1ff; }
.sc-ad-bar { width: 72px; height: 8px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
.sc-ad-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #62b0ff, #a9d6ff); }
.shop-confirm-msg {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 16.5px;
    line-height: 1.25;
    color: rgba(244, 232, 205, 0.8);
}
.shop-confirm-msg[data-tone="good"] { color: #b6f0c6; }
.shop-confirm-msg[data-tone="warn"] { color: #ffb4a8; }

.shop-confirm-actions {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}
.shop-confirm-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    box-sizing: border-box;
    border-radius: 14px;
    border: 1.5px solid transparent;
    font-family: 'Mate SC', serif;
    font-size: 17px;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease;
}
.shop-confirm-btn[hidden] { display: none; }
.shop-confirm-btn svg { flex: 0 0 auto; width: 19px; height: 19px; }
.shop-confirm-btn:active:not(:disabled) { transform: translateY(3px); }
.shop-confirm-btn.cancel,
.shop-confirm-btn.view {
    flex: 0 0 auto;
    color: #f4e8cd;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.shop-confirm-btn.view { color: #fbe3a0; }
/* The main button, coloured by what it does (data-style): buy (green), get coins / claim (gold),
   watch an ad (blue). */
.shop-confirm-btn.confirm {
    flex: 1 1 auto;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    background:
        radial-gradient(120% 110% at 50% -20%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, #67d673, #2f9d45);
    border-color: #1f6e2e;
    box-shadow: 0 4px 0 #1a5a27, 0 9px 18px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.shop-confirm-btn.confirm[data-style="coins"],
.shop-confirm-btn.confirm[data-style="claim"] {
    color: #2a1c06;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    background:
        radial-gradient(120% 110% at 50% -20%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, #f6da78, #c99a2e);
    border-color: #8a6a17;
    box-shadow: 0 4px 0 #6b4f10, 0 9px 18px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.shop-confirm-btn.confirm[data-style="ad"] {
    background:
        radial-gradient(120% 110% at 50% -20%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, #62b0ff, #2f6fd6);
    border-color: #1d4593;
    box-shadow: 0 4px 0 #193c80, 0 9px 18px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.shop-confirm-btn:active:not(:disabled) { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.shop-confirm-btn.confirm:disabled,
.shop-confirm-btn.confirm.is-disabled {
    color: rgba(244, 232, 205, 0.6);
    text-shadow: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    cursor: not-allowed;
}
@media (hover: hover) {
    .shop-confirm-btn:not(:disabled):hover { filter: brightness(1.08); }
}

@media (max-width: 600px) {
    .shop-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ===== COIN WALLET UI ===== */
/* Numbers use Rubik with lining, tabular figures — the menu serif fonts draw old-style digits
   ("5oo") that read poorly as money. */
.coin-pill,
.coin-reward,
.skin-card-cost {
    font-family: 'Rubik', system-ui, sans-serif;
    font-variant-numeric: lining-nums tabular-nums;
}

/* The coin balance "pill" in the shop/inventory top bar: a recessed dark bar with an oversized
   coin overlapping its left end (the familiar mobile-game currency counter). */
.coin-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 30px;
    margin-left: 14px;               /* room for the coin that pokes out on the left */
    padding: 0 16px 0 30px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(14, 10, 5, 0.86), rgba(34, 24, 11, 0.82));
    border: 1.5px solid rgba(241, 201, 104, 0.7);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(255, 230, 160, 0.12), 0 3px 10px rgba(0, 0, 0, 0.45);
    color: #fff4cc;
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
    user-select: none;
    white-space: nowrap;
}
.coin-pill .coin-amount { min-width: 1ch; text-align: left; }

/* Inline SVG icon sizing (replaces the unsupported 🪙 / 📺 emoji). */
.coin-svg, .ad-svg { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.2em; flex: 0 0 auto; }
.coin-pill .coin-svg {
    position: absolute;
    left: -13px;
    top: 50%;
    width: 38px;
    height: 38px;
    margin-top: -20px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
}

/* Brief pop when the balance changes. */
.coin-pill.coin-pulse { animation: coinPulse 0.55s ease; }
.coin-pill.coin-pulse .coin-svg { animation: coinIconBob 0.55s ease; }
@keyframes coinPulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.1); border-color: #ffe79a; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 14px rgba(247, 224, 138, 0.7); }
    100% { transform: scale(1); }
}
@keyframes coinIconBob {
    35% { transform: rotate(-14deg) scale(1.12); }
}

/* Shop / inventory: the coin balance and the close (X) button sit together at the right end of the
   header band, vertically centred on one line. */
.shop-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
}
.shop-topbar .menu-close-button { position: static; top: auto; right: auto; width: 42px; }
.shop-topbar .shop-coin-pill { position: relative; top: auto; right: auto; }

/* Per-item cost / unlock tag on shop cards. */
.skin-card-cost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 2px auto 6px;
    padding: 3px 11px 3px 7px;
    border-radius: 999px;
    font-weight: 700;
    font-size: clamp(11px, 3cqw, 13px);
    line-height: 1;
    letter-spacing: 0.2px;
}
.skin-card-cost .coin-svg { width: 1.35em; height: 1.35em; vertical-align: middle; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.skin-card-cost.cost-coins { background: rgba(10, 7, 3, 0.55); border: 1px solid rgba(241, 201, 104, 0.55); color: #ffe9a8; }
.skin-card-cost.cost-ads   { background: rgba(120, 170, 255, 0.14); border: 1px solid rgba(120, 170, 255, 0.5); color: #bcd4ff; padding-left: 10px; }
.skin-card-cost.cost-free  { background: rgba(120, 220, 150, 0.14); border: 1px solid rgba(120, 220, 150, 0.5); color: #b6f0c6; text-transform: uppercase; letter-spacing: 0.5px; padding-left: 11px; }

/* ----- Coin reward on the win / lose result screen -----
   A compact chip that slides in under the result, flips its coin, counts the amount up from +0,
   sprays a few coins and finishes with a shine sweep (see renderCoinRewardOnModal). */
.coin-reward {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 34px;
    margin: 0 auto;
    padding: 0 18px 0 38px;
    left: 5px; /* optically center chip + overhanging coin */
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(14, 10, 5, 0.86), rgba(36, 25, 10, 0.84));
    border: 1.5px solid rgba(247, 212, 116, 0.8);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 18px rgba(247, 200, 80, 0.22);
    color: #ffeaa8;
    font-weight: 800;
    font-size: 19px;
    line-height: 1;
    letter-spacing: 0.4px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
.coin-reward .coin-reward-ico {
    position: absolute;
    left: -10px;
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: -23px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.coin-reward .coin-reward-text { min-width: 3ch; text-align: left; }
/* Shine sweep, clipped to the chip by its own rounded box (the chip can't be overflow:hidden —
   the coin and sparks intentionally spill past its edges). */
.coin-reward::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 200, 0.42) 50%, transparent 62%) no-repeat;
    background-size: 260% 100%;
    background-position: 140% 0;
}
.coin-reward.animate { animation: coinChipIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.coin-reward.animate .coin-reward-ico { animation: coinFlip 1.05s cubic-bezier(0.3, 0.7, 0.3, 1) 0.1s both; }
.coin-reward.animate::before { animation: coinShine 0.85s ease-in-out 1.35s both; }
@keyframes coinChipIn {
    0%   { opacity: 0; transform: translateY(10px) scale(0.88); }
    100% { opacity: 1; transform: none; }
}
@keyframes coinFlip {
    0%   { transform: rotateY(0deg) scale(0.5); }
    65%  { transform: rotateY(560deg) scale(1.12); }
    100% { transform: rotateY(720deg) scale(1); }
}
@keyframes coinShine {
    from { background-position: 140% 0; }
    to   { background-position: -40% 0; }
}
.coin-reward .coin-spark {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    pointer-events: none;
    opacity: 0;
    animation: coinSpark 0.9s cubic-bezier(0.2, 0.75, 0.3, 1) var(--d, 0s) forwards;
}
.coin-reward .coin-spark .coin-svg { width: 100%; height: 100%; vertical-align: top; }
@keyframes coinSpark {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
    20%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.85) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) {
    .coin-reward.animate, .coin-reward.animate .coin-reward-ico, .coin-reward.animate::before { animation: none; }
    .coin-reward .coin-spark { display: none; }
}

/* ---- Avatar frame on the legacy two-column game-over modal ---- */
.profile-modal-content .profile-picture-large {
    border-color: var(--premium-gold);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 22px rgba(212, 175, 55, 0.18);
}
/* The change-username modal opens ON TOP of the (still-open) profile/stats modal, so it must sit
   above the default modal z-index (3000) — otherwise it renders behind it and the pencil looks dead. */
#change-username-modal { z-index: 4200; }

/* Username + pencil row on the menu stats page. */
.edit-username-btn {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.45);
    background: rgba(212, 175, 55, 0.14);
    color: var(--premium-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.edit-username-btn:active { transform: scale(0.92); }
@media (hover: hover) {
    .edit-username-btn:hover {
        background: rgba(212, 175, 55, 0.28);
        box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
    }
}

/* Secondary "Cancel" button — ghost style so it reads clearly under the gold Save button. */

/* ============================================================
   OPPONENT SEARCH SCREEN (8-ball-pool style)
   Your card (gold) vs. the opponent's (crimson) across a diagonal split, a glowing VS medallion
   in the middle, and a slot-machine reel of faces that lands on the real opponent. Modes are
   classes on the container: .is-searching / .is-found / .is-inviting / .is-declined.
   ============================================================ */
#matchmaking-container.mm-screen {
    z-index: 3500; /* above the Friends page — inviting a friend opens this on top of it */
    justify-content: space-between;
    gap: 0;
    padding: 22px 0 22px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 55% 75% at 50% 54%, rgba(255, 196, 92, 0.16), transparent 70%),
        linear-gradient(180deg, rgba(12, 8, 4, 0.62), rgba(12, 8, 4, 0.8));
    backdrop-filter: blur(14px);
    font-family: 'Mate SC', serif;
}
/* Friend invitations must still be answerable while you're searching. */
#game-invite-modal.lobby-invite { z-index: 3600; }

.mm-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.mm-backdrop::before,
.mm-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
}
.mm-backdrop::before {
    clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%);
    background: linear-gradient(90deg, rgba(214, 160, 52, 0.3), rgba(214, 160, 52, 0.04) 85%);
}
.mm-backdrop::after {
    clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%);
    background: linear-gradient(270deg, rgba(196, 42, 52, 0.34), rgba(196, 42, 52, 0.04) 85%);
}
.mm-seam {
    position: absolute;
    left: 50%;
    top: -10%;
    width: 3px;
    height: 120%;
    margin-left: -1.5px;
    background: linear-gradient(180deg, transparent 6%, #ffd978 26%, #fff1c4 44%, #ffd978 60%, transparent 76%);
    box-shadow: 0 0 14px rgba(255, 204, 85, 0.85);
    transform: rotate(10deg);
    opacity: 0.75;
}
.mm-rays {
    position: absolute;
    left: 50%;
    top: 54%;
    width: 780px;
    height: 780px;
    margin: -390px 0 0 -390px;
    background: repeating-conic-gradient(rgba(255, 222, 150, 0.1) 0deg 7deg, transparent 7deg 20deg);
    -webkit-mask: radial-gradient(circle, #000 0%, transparent 60%);
    mask: radial-gradient(circle, #000 0%, transparent 60%);
    animation: mmSpin 46s linear infinite;
}

.mm-header,
.mm-stage,
.mm-footer { position: relative; z-index: 1; }

.mm-title {
    margin: 0;
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-size: 30px;
    letter-spacing: 1px;
    color: #fbe8b6;
    text-align: center;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 200, 90, 0.35);
}
.is-found .mm-title {
    color: #ffd76a;
    animation: mmTitlePop 0.55s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.is-declined .mm-title { color: #ff9c90; }

/* ---- Player cards ---- */
.mm-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 54px;
}
.mm-player {
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.mm-frame {
    position: relative;
    width: 136px;
    height: 136px;
    border-radius: 26px;
    background: linear-gradient(145deg, #fff0b8, #d9a83c 42%, #7b5414);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 12px 26px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 196, 80, 0.38);
}
.mm-opp .mm-frame {
    background: linear-gradient(145deg, #ffc4b8, #d24a45 42%, #6c1316);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 12px 26px rgba(0, 0, 0, 0.55), 0 0 30px rgba(235, 72, 72, 0.38);
}
.mm-avatar,
.mm-reel {
    position: absolute;
    inset: 5px;
    border-radius: 21px;
    overflow: hidden;
    background: #fff url('menu/guest-icon.png') center / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* The reel: a vertical strip of faces scrolling behind a slot "window". */
.mm-reel { background: #1b130a; }
.mm-reel::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.6));
    transition: opacity 0.4s ease;
}
.mm-reel-strip {
    display: flex;
    flex-direction: column;
    will-change: transform;
}
.mm-reel-strip.is-spinning {
    animation: mmReelSpin 0.95s linear infinite;
    filter: blur(0.7px);
}
.mm-reel-strip.is-landing {
    transition: transform 1.25s cubic-bezier(0.12, 0.8, 0.22, 1.04);
}
.mm-face {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
}
.mm-face.is-real { background: #fff url('menu/guest-icon.png') center / cover no-repeat; }

/* Which layer shows when: reel while searching / landing, the static avatar once revealed or
   while inviting a friend. */
.mm-opp-avatar { opacity: 0; transition: opacity 0.3s ease; }
.is-inviting .mm-opp-avatar,
.is-declined .mm-opp-avatar,
.mm-frame.is-revealed .mm-opp-avatar { opacity: 1; }
.is-inviting .mm-reel,
.is-declined .mm-reel { display: none; }
.mm-frame.is-revealed .mm-reel::after { opacity: 0; }

/* Level star tucked on the frame's corner. Hidden for the opponent until we know who it is. */
.mm-level {
    position: absolute;
    right: -15px;
    bottom: -15px;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.mm-level img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.mm-level span {
    position: relative;
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.is-searching .mm-opp .mm-level,
.is-found .mm-opp .mm-frame:not(.is-revealed) .mm-level {
    opacity: 0;
    transform: scale(0.4);
}

.mm-name {
    max-width: 210px;
    padding: 6px 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.42));
    border: 1px solid rgba(255, 214, 120, 0.45);
    color: #fff;
    font-size: 17px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.mm-opp .mm-name { border-color: rgba(255, 140, 130, 0.45); }
.is-searching .mm-opp .mm-name,
.is-found .mm-opp .mm-frame:not(.is-revealed) + .mm-name {
    color: rgba(255, 255, 255, 0.6);
    animation: mmBreathe 1.4s ease-in-out infinite;
}

/* Reveal: flash + bump when the reel settles on the opponent. */
.mm-frame.is-revealed { animation: mmReveal 0.6s cubic-bezier(0.25, 1.5, 0.45, 1); }
.mm-frame.is-revealed::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 32px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 220, 140, 0) 70%);
    animation: mmFlash 0.7s ease-out forwards;
}

/* Waiting on a friend: a pulse ring around their card. Declined: their card greys out. */
.is-inviting .mm-opp .mm-frame::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 32px;
    border: 2px solid rgba(255, 150, 130, 0.75);
    pointer-events: none;
    animation: mmRing 1.6s ease-out infinite;
}
.mm-opp .mm-frame { transition: filter 0.4s ease; }
.is-declined .mm-opp .mm-frame { filter: grayscale(0.9) brightness(0.65); }

/* ---- VS medallion ---- */
.mm-vs {
    position: relative;
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 48px; /* line up with the avatar frames, not the frames + name plates */
}
.mm-vs::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 32%, #57381a, #170e05 72%);
    border: 3px solid #e9bf5c;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35), 0 0 34px rgba(255, 190, 70, 0.55), inset 0 0 18px rgba(0, 0, 0, 0.65);
}
.mm-vs::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 214, 120, 0.55);
    animation: mmSpin 10s linear infinite;
}
.mm-vs span {
    position: relative;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: -1px;
    line-height: 1;
    color: transparent;
    background: linear-gradient(180deg, #fff8da 12%, #f3c14b 55%, #b17816);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.65));
}
.is-searching .mm-vs span,
.is-inviting .mm-vs span { animation: mmPulse 1.6s ease-in-out infinite; }

/* ---- Footer: status line + cancel ---- */
.mm-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-height: 86px;
}
.mm-status {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
    color: #f4e4c0;
    font-size: 17px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
.mm-clock {
    padding: 3px 11px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 214, 120, 0.3);
    color: #ffe7a6;
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 600;
    font-size: 14px;
    font-variant-numeric: lining-nums tabular-nums;
}
.mm-dots { display: inline-flex; gap: 6px; }
.mm-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f3c14b;
    box-shadow: 0 0 8px rgba(243, 193, 75, 0.7);
    animation: mmDot 1.2s ease-in-out infinite;
}
.mm-dots i:nth-child(2) { animation-delay: 0.15s; }
.mm-dots i:nth-child(3) { animation-delay: 0.3s; }
.mm-count {
    display: inline-block;
    min-width: 1.2ch;
    text-align: center;
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    color: #ffd76a;
    text-shadow: 0 0 14px rgba(255, 200, 80, 0.65), 0 2px 0 rgba(0, 0, 0, 0.6);
    animation: mmCount 0.9s ease-out;
}
.is-declined .mm-status { color: #ffc2ba; }
/* No Cancel button once matched / declined — keep the status line near the cards. */
.is-found .mm-footer,
.is-declined .mm-footer { justify-content: center; }

.mm-cancel {
    font-family: 'Mate SC', serif;
    font-size: 18px;
    letter-spacing: 1px;
    color: #fff;
    padding: 8px 38px;
    border-radius: 999px;
    border: 2px solid rgba(255, 196, 186, 0.45);
    background: linear-gradient(180deg, #e0574f, #a3222a);
    box-shadow: 0 4px 0 #5c0f14, 0 8px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.32);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease;
}
.mm-cancel:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #5c0f14, 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
@media (hover: hover) {
    .mm-cancel:hover { filter: brightness(1.08); }
}

/* ---- Entrance (replayed each time the screen opens; see openMatchScreen) ---- */
.mm-enter .mm-me { animation: mmInLeft 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.mm-enter .mm-opp { animation: mmInRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.mm-enter .mm-vs { animation: mmVsIn 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.2s both; }
.mm-enter .mm-header,
.mm-enter .mm-footer { animation: mmFadeUp 0.5s ease 0.15s both; }

@keyframes mmSpin { to { transform: rotate(360deg); } }
@keyframes mmReelSpin { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes mmPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes mmBreathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes mmDot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.35; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes mmCount { 0% { transform: scale(1.9); opacity: 0; } 35% { transform: scale(1); opacity: 1; } }
@keyframes mmRing { 0% { transform: scale(0.96); opacity: 0.9; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes mmReveal { 0% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes mmFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mmTitlePop { 0% { transform: scale(0.7); opacity: 0.2; } 100% { transform: scale(1); opacity: 1; } }
@keyframes mmInLeft { from { opacity: 0; transform: translateX(-120px); } to { opacity: 1; transform: none; } }
@keyframes mmInRight { from { opacity: 0; transform: translateX(120px); } to { opacity: 1; transform: none; } }
@keyframes mmVsIn { from { opacity: 0; transform: scale(0.3) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes mmFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .mm-rays, .mm-vs::after, .mm-vs span, .mm-dots i { animation: none; }
}

/* ============================================================
   EDIT PROFILE (username + profile picture picker)
   ============================================================ */
#change-username-modal {
    background:
        radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255, 196, 92, 0.1), transparent 70%),
        rgba(12, 8, 4, 0.66);
    backdrop-filter: blur(10px);
}
.ep-card {
    width: min(92%, 700px);
    box-sizing: border-box;
    padding: 18px 26px 20px;
    border-radius: 26px;
    border: 1.5px solid rgba(212, 175, 55, 0.42);
    background: linear-gradient(180deg, rgba(34, 23, 12, 0.96), rgba(16, 11, 6, 0.97));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(212, 175, 55, 0.1), inset 0 1px 0 rgba(255, 236, 180, 0.08);
    transform: translateY(18px) scale(0.96);
    opacity: 0;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease;
}
#change-username-modal.visible .ep-card { transform: none; opacity: 1; }
/* Typing the name on a phone (body.kb-typing): the canvas stays pinned to the top of the screen and
   the card slides up so the field sits above the on-screen keyboard. */
body.kb-typing .game-wrapper { top: 0; transform-origin: top center; }
body.kb-typing #change-username-modal.visible .ep-card { transform: translateY(calc(-1 * var(--kb-lift, 0px))); }
.ep-title {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-size: 24px;
    letter-spacing: 1px;
    text-align: center;
    color: #fbe3a0;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(212, 175, 55, 0.3);
}
.ep-body {
    display: flex;
    align-items: center;
    gap: 26px;
}
.ep-preview-col {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.ep-preview {
    width: 132px;
    height: 132px;
    border-radius: 28px;
    background: #fff url('menu/guest-icon.png') center / cover no-repeat;
    box-shadow: 0 0 0 3px #e2b94a, 0 0 0 6px rgba(0, 0, 0, 0.4), 0 12px 26px rgba(0, 0, 0, 0.55), 0 0 30px rgba(226, 185, 74, 0.35);
}
.ep-preview.ep-pop { animation: epPop 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes epPop { 0% { transform: scale(0.88); } 100% { transform: scale(1); } }
.ep-preview-name {
    max-width: 150px;
    font-family: 'Mate SC', serif;
    font-size: 17px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.ep-fields {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ep-label {
    font-family: 'Mate SC', serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: rgba(244, 228, 192, 0.72);
}
#change-username-modal .ep-input {
    padding: 9px 16px;
    font-size: 18px;
    line-height: 1.5;
    border-radius: 14px;
    margin-bottom: 4px;
}
.ep-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 2px 2px;
}
.ep-tile {
    position: relative;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.ep-tile-img {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: #fff url('menu/guest-icon.png') center / cover no-repeat;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}
.ep-tile::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    border: 2.5px solid transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ep-tile.is-selected::after {
    border-color: #f3c14b;
    box-shadow: 0 0 14px rgba(243, 193, 75, 0.6);
}
.ep-tile.is-selected::before {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 2;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #f3c14b;
    color: #2a1c06;
    font: 800 12px/19px 'Rubik', system-ui, sans-serif;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.ep-tile-badge {
    position: absolute;
    left: -5px;
    bottom: -5px;
    z-index: 1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
@media (hover: hover) {
    .ep-tile:hover { transform: translateY(-2px); }
}
.ep-tile:active { transform: scale(0.94); }
.ep-error:empty { display: none; }
.ep-error { margin: 0; font-size: 14px; }
.ep-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 6px;
}
.ep-btn {
    min-width: 118px;
    padding: 9px 22px;
    border-radius: 999px;
    font-family: 'Mate SC', serif;
    font-size: 17px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
.ep-btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(212, 175, 55, 0.45);
    color: var(--premium-text);
}
.ep-btn-gold {
    background: linear-gradient(180deg, #f6da78, #c99a2e);
    border: 1.5px solid #8a6a17;
    color: #2a1c06;
    box-shadow: 0 3px 0 #6b4f10, 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.ep-btn:active { transform: translateY(2px); }
.ep-btn:disabled { opacity: 0.6; cursor: progress; }
@media (hover: hover) {
    .ep-btn:hover { filter: brightness(1.08); }
}

/* The big avatar on the stats page also opens Edit Profile. */
#profile-modal .profile-picture-large.is-editable { cursor: pointer; }

/* ============================================================
   TAWLA UI KIT — shared look for the Friends page, stats pages, result screens, invitation card
   and quick chat (same family as Shop / Edit Profile / opponent search).
   Colours come from --tw-* tokens. The defaults are the gold menu look; in-game screens
   (.tw-board, the in-game stats popup and the rematch invite) map them onto the equipped board's
   palette (--menu-line / --panel-bg / --accent-*), so they recolour with every board skin.
   ============================================================ */
.tw-ui {
    --tw-line: #d4af37;
    --tw-line-soft: rgba(212, 175, 55, 0.38);
    --tw-line-faint: rgba(212, 175, 55, 0.16);
    --tw-title: #fbe3a0;
    --tw-text: #f4e8cd;
    --tw-muted: rgba(244, 232, 205, 0.62);
    --tw-panel: linear-gradient(180deg, rgba(40, 27, 13, 0.97), rgba(15, 10, 5, 0.98));
    --tw-card: linear-gradient(180deg, rgba(64, 44, 21, 0.72), rgba(22, 15, 8, 0.84));
    --tw-well: rgba(0, 0, 0, 0.32);
    --tw-scrim: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255, 196, 92, 0.1), transparent 70%), rgba(12, 8, 4, 0.66);
    --tw-page-bg: radial-gradient(ellipse 70% 60% at 60% 45%, rgba(255, 196, 92, 0.1), transparent 70%), linear-gradient(180deg, rgba(30, 20, 9, 0.74), rgba(14, 9, 4, 0.84));
    --tw-close-bg: linear-gradient(180deg, rgba(62, 43, 21, 0.95), rgba(20, 13, 6, 0.96));
    --tw-close-line: rgba(233, 196, 90, 0.62);
    --tw-glow: rgba(212, 175, 55, 0.24);
    --tw-frame: linear-gradient(145deg, #fff0b8, #d9a83c 42%, #7b5414);
    --tw-pri-top: #f6da78;
    --tw-pri-bot: #c99a2e;
    --tw-pri-border: #8a6a17;
    --tw-pri-edge: #6b4f10;
    --tw-pri-ink: #2a1c06;
}
.tw-board,
#view-profile-modal.in-game,
#game-invite-modal:not(.lobby-invite) {
    --tw-line: var(--menu-line);
    --tw-line-soft: var(--menu-line-soft);
    --tw-line-faint: rgba(255, 255, 255, 0.1);
    --tw-title: var(--menu-line);
    --tw-text: var(--premium-text);
    --tw-muted: rgba(240, 230, 210, 0.66);
    --tw-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.45)), var(--panel-bg);
    --tw-card: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.24));
    --tw-well: rgba(0, 0, 0, 0.26);
    --tw-scrim: var(--accent-menu-bg);
    --tw-page-bg: radial-gradient(ellipse 70% 60% at 60% 45%, rgba(255, 255, 255, 0.06), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42)), var(--accent-menu-bg);
    --tw-close-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.4)), var(--panel-bg);
    --tw-close-line: var(--menu-line-soft);
    --tw-glow: var(--menu-line-soft);
    --tw-frame: linear-gradient(145deg, rgba(255, 255, 255, 0.85), var(--menu-line) 42%, var(--accent-deep));
    --tw-pri-top: var(--accent-bright);
    --tw-pri-bot: var(--accent-color);
    --tw-pri-border: var(--accent-deep);
    --tw-pri-edge: var(--accent-deep);
    --tw-pri-ink: var(--accent-ink);
}

/* ---- Modal backdrop + the panel that pops in ---- */
.modal-container.tw-modal {
    background: var(--tw-scrim);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    gap: 0;
}
.tw-panel {
    position: relative;
    box-sizing: border-box;
    border-radius: 24px;
    border: 1.5px solid var(--tw-line-soft);
    background: var(--tw-panel);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: var(--tw-text);
    text-align: left;
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.modal-container.visible > .tw-panel { opacity: 1; transform: none; }

/* ---- Header: icon chip, title, close ---- */
.tw-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--tw-line-faint);
}
.tw-chip {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--tw-pri-ink);
    background: linear-gradient(180deg, var(--tw-pri-top), var(--tw-pri-bot));
    border: 1px solid var(--tw-pri-border);
    box-shadow: 0 3px 0 var(--tw-pri-edge), 0 7px 14px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.tw-chip svg { width: 22px; height: 22px; fill: currentColor; }
.tw-ui .tw-title {
    margin: 0;
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--tw-title);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 16px var(--tw-glow);
}
.tw-ui .tw-head .menu-close-button,
#friends-modal #friends-close-button {
    position: static !important;
    flex: 0 0 auto;
    width: 42px !important;
    height: 42px !important;
    max-width: none;
    margin-left: auto;
    top: auto !important;
    right: auto !important;
}

/* ---- Buttons ---- */
.tw-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    min-width: 0;
    padding: 0 22px;
    box-sizing: border-box;
    border-radius: 14px;
    border: 1.5px solid transparent;
    font-family: 'Mate SC', serif;
    font-size: 17px;
    letter-spacing: 0.6px;
    line-height: 1;
    white-space: nowrap;
    color: var(--tw-text);
    background: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease, background 0.2s ease;
}
.tw-btn svg { flex: 0 0 auto; width: 20px; height: 20px; fill: currentColor; }
.tw-btn > span { overflow: hidden; text-overflow: ellipsis; }
.tw-btn:active:not(:disabled) { transform: translateY(3px); }
@media (hover: hover) {
    .tw-btn:not(:disabled):hover { filter: brightness(1.08); }
}
.tw-btn:disabled { cursor: default; filter: saturate(0.45) brightness(0.82); }
.tw-ui .tw-btn-primary {
    color: var(--tw-pri-ink);
    background: linear-gradient(180deg, var(--tw-pri-top), var(--tw-pri-bot));
    border-color: var(--tw-pri-border);
    box-shadow: 0 3px 0 var(--tw-pri-edge), 0 8px 16px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.tw-ui .tw-btn-ghost {
    color: var(--tw-text);
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--tw-line-soft);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.tw-ui .tw-btn-green {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #67d673, #2f9d45);
    border-color: #1f6e2e;
    box-shadow: 0 3px 0 #1a5a27, 0 8px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.tw-ui .tw-btn-red {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #e0574f, #a3222a);
    border-color: #6e1218;
    box-shadow: 0 3px 0 #5c0f14, 0 8px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.tw-btn:active:not(:disabled).tw-btn-primary,
.tw-btn:active:not(:disabled).tw-btn-green,
.tw-btn:active:not(:disabled).tw-btn-red,
.tw-btn:active:not(:disabled).tw-btn-ghost { box-shadow: 0 0 0 transparent, 0 4px 10px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.tw-btn-sm {
    height: 34px;
    padding: 0 13px;
    gap: 6px;
    border-radius: 11px;
    font-size: 14px;
    letter-spacing: 0.4px;
}
.tw-btn-sm svg { width: 16px; height: 16px; }

/* ---- Full-screen page shell (Friends, stats): header band + body, like Shop / Inventory ---- */
.modal-container.tw-page {
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: var(--tw-page-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.tw-page-inner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 12px 18px;
    color: var(--tw-text);
    text-align: left;
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.tw-page.visible .tw-page-inner { opacity: 1; transform: none; }
.tw-page-inner > .tw-head { flex-shrink: 0; }

/* ============================================================
   MAIN MENU — top bar (player card · coins · settings), the logo, the two ways to play and the
   Shop / Inventory / Friends dock. Same family as the Settings and Friends pages: walnut glass,
   gold hairlines, Mate SC labels. Sizes are fixed px (the 915×412 stage scales as a whole).
   ============================================================ */
#menu-container {
    --mn-line: rgba(212, 175, 55, 0.46);
    --mn-line-soft: rgba(212, 175, 55, 0.22);
    --mn-glass: linear-gradient(180deg, rgba(46, 31, 15, 0.88), rgba(17, 11, 5, 0.93));
    --mn-text: #f4e8cd;
    --mn-muted: rgba(244, 232, 205, 0.66);
    --mn-gold: #e9c45a;
    --mn-ink: #2a1c06;
}

/* Grade the video: a little shade under the top bar and the dock, and soft edges. */
.mn-shade {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(30, 14, 44, 0.5) 0%, rgba(30, 14, 44, 0) 22%),
        linear-gradient(0deg, rgba(20, 10, 6, 0.74) 0%, rgba(20, 10, 6, 0.3) 24%, rgba(20, 10, 6, 0) 46%),
        radial-gradient(125% 95% at 50% 42%, rgba(0, 0, 0, 0) 58%, rgba(12, 5, 16, 0.38) 100%);
}

.main-menu .mn-content {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-align: left;
}

#menu-container button {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Top bar and dock wait for the profile (showMainMenuUI adds .visible). */
.mn-reveal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.45s;
}
.mn-hud.mn-reveal { transform: translateY(-14px); }
.mn-dock.mn-reveal { transform: translateY(16px); }
.mn-reveal.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

/* ---- Top bar ---- */
.mn-hud {
    position: absolute;
    top: 14px;
    left: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.mn-hud-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mn-player {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    padding: 0 12px 0 5px;
    box-sizing: border-box;
    border-radius: 17px;
    border: 1.5px solid #e0b955;
    background:
        radial-gradient(120% 110% at 50% -20%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, var(--dk-top) 0%, var(--dk-mid) 52%, var(--dk-bot) 100%);
    box-shadow: 0 4px 0 var(--dk-edge), 0 12px 22px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 16px rgba(0, 0, 0, 0.22);
    color: #fff6e2;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    font-family: 'Mate SC', 'Rubik', serif;
    text-align: left;
    transition: transform 0.14s ease, filter 0.15s ease;
}
.mn-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 2px;
    box-sizing: border-box;
    border-radius: 13px;
    background: linear-gradient(145deg, #fff0b8, #d9a83c 42%, #7b5414);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}
.mn-avatar .profile-picture {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 11px;
    background-color: #2b1d0e;
    background-size: cover;
    background-position: center;
}
.mn-level {
    position: absolute;
    right: -9px;
    bottom: -8px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
}
.mn-level img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.mn-level span {
    position: relative;
    font: 700 10px/1 'Rubik', system-ui, sans-serif;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.mn-player-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding-left: 3px;
}
.mn-player-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: 0.4px;
}
.mn-xp {
    position: relative;
    display: block;
    width: 122px;
    height: 13px;
    border-radius: 999px;
    background: rgba(2, 28, 36, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 220, 130, 0.35);
    overflow: hidden;
}
.mn-xp-text {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 700 9.5px/1 'Rubik', system-ui, sans-serif;
    letter-spacing: 0.3px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85);
}
.mn-player-go {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-left: 2px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 225, 140, 0.5);
    color: #ffe08a;
}
.mn-player-go svg { width: 15px; height: 15px; fill: currentColor; }
.mn-xp-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #b07f22, #f6da78);
    box-shadow: 0 0 8px rgba(246, 218, 120, 0.55);
    transition: width 0.6s ease;
}

.mn-coins {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 15px 0 6px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1.5px solid #e0b955;
    background:
        radial-gradient(120% 110% at 50% -20%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, var(--dk-top) 0%, var(--dk-mid) 52%, var(--dk-bot) 100%);
    box-shadow: 0 4px 0 var(--dk-edge), 0 12px 22px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 16px rgba(0, 0, 0, 0.22);
    color: #fff8e8;
    text-shadow: 0 1px 2px rgba(0, 24, 32, 0.7);
    font: 700 16px/1 'Rubik', system-ui, sans-serif;
    letter-spacing: 0.3px;
    transition: transform 0.14s ease, filter 0.15s ease;
}
.mn-coins svg {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.mn-coins.coin-pulse { animation: mnCoinPulse 0.55s ease; }
.mn-coins.coin-pulse svg { animation: coinIconBob 0.55s ease; }
@keyframes mnCoinPulse {
    35% { transform: scale(1.08); filter: brightness(1.15); }
}

.mn-icon-btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 14px;
    border: 1.5px solid #e0b955;
    background:
        radial-gradient(120% 110% at 50% -20%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, var(--dk-top) 0%, var(--dk-mid) 52%, var(--dk-bot) 100%);
    box-shadow: 0 4px 0 var(--dk-edge), 0 12px 22px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 16px rgba(0, 0, 0, 0.22);
    color: #fff1c8;
    transition: transform 0.14s ease, filter 0.15s ease;
}
.mn-icon-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Logo + the two ways to play ---- */
.mn-center {
    position: absolute;
    /* 10px from the top of the 412px design; on a taller (16:9 / tablet) stage it keeps that place
       relative to the middle, so the logo and buttons stay centred between the top bar and dock. */
    top: calc(10px + (100% - 412px) / 2);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.mn-logo-wrap { width: 330px; }
.mn-logo {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 12px 18px rgba(28, 8, 30, 0.45));
    animation: mnFloat 6s ease-in-out infinite;
}
@keyframes mnFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.mn-modes {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    pointer-events: auto;
}

.mn-mode {
    position: relative;
    display: flex;
    align-items: center;
    width: 240px;
    height: 80px;
    padding: 0 0 0 18px;
    box-sizing: border-box;
    border-radius: 19px;
    border: 1.5px solid #e0b955;
    text-align: left;
    font-family: 'Mate SC', 'Rubik', serif;
    color: #fff4dc;
    transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.15s ease;
}
/* Clipped layer behind the content: the backgammon points texture, plus the light sweep. */
.mn-mode-bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}
.mn-mode-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 62%);
    mask-image: linear-gradient(90deg, transparent 18%, #000 62%);
}
.mn-mode-online .mn-mode-bg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='100' viewBox='0 0 176 100'%3E%3Cpath d='M0 0h22l-11 36z' fill='rgba(255,255,255,.14)'/%3E%3Cpath d='M0 100h22l-11 -36z' fill='rgba(6,12,46,.26)'/%3E%3Cpath d='M22 0h22l-11 36z' fill='rgba(6,12,46,.26)'/%3E%3Cpath d='M22 100h22l-11 -36z' fill='rgba(255,255,255,.14)'/%3E%3Cpath d='M44 0h22l-11 36z' fill='rgba(255,255,255,.14)'/%3E%3Cpath d='M44 100h22l-11 -36z' fill='rgba(6,12,46,.26)'/%3E%3Cpath d='M66 0h22l-11 36z' fill='rgba(6,12,46,.26)'/%3E%3Cpath d='M66 100h22l-11 -36z' fill='rgba(255,255,255,.14)'/%3E%3Cpath d='M88 0h22l-11 36z' fill='rgba(255,255,255,.14)'/%3E%3Cpath d='M88 100h22l-11 -36z' fill='rgba(6,12,46,.26)'/%3E%3Cpath d='M110 0h22l-11 36z' fill='rgba(6,12,46,.26)'/%3E%3Cpath d='M110 100h22l-11 -36z' fill='rgba(255,255,255,.14)'/%3E%3Cpath d='M132 0h22l-11 36z' fill='rgba(255,255,255,.14)'/%3E%3Cpath d='M132 100h22l-11 -36z' fill='rgba(6,12,46,.26)'/%3E%3Cpath d='M154 0h22l-11 36z' fill='rgba(6,12,46,.26)'/%3E%3Cpath d='M154 100h22l-11 -36z' fill='rgba(255,255,255,.14)'/%3E%3C/svg%3E"); }
.mn-mode-local .mn-mode-bg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='100' viewBox='0 0 176 100'%3E%3Cpath d='M0 0h22l-11 36z' fill='rgba(255,255,255,.13)'/%3E%3Cpath d='M0 100h22l-11 -36z' fill='rgba(3,28,14,.26)'/%3E%3Cpath d='M22 0h22l-11 36z' fill='rgba(3,28,14,.26)'/%3E%3Cpath d='M22 100h22l-11 -36z' fill='rgba(255,255,255,.13)'/%3E%3Cpath d='M44 0h22l-11 36z' fill='rgba(255,255,255,.13)'/%3E%3Cpath d='M44 100h22l-11 -36z' fill='rgba(3,28,14,.26)'/%3E%3Cpath d='M66 0h22l-11 36z' fill='rgba(3,28,14,.26)'/%3E%3Cpath d='M66 100h22l-11 -36z' fill='rgba(255,255,255,.13)'/%3E%3Cpath d='M88 0h22l-11 36z' fill='rgba(255,255,255,.13)'/%3E%3Cpath d='M88 100h22l-11 -36z' fill='rgba(3,28,14,.26)'/%3E%3Cpath d='M110 0h22l-11 36z' fill='rgba(3,28,14,.26)'/%3E%3Cpath d='M110 100h22l-11 -36z' fill='rgba(255,255,255,.13)'/%3E%3Cpath d='M132 0h22l-11 36z' fill='rgba(255,255,255,.13)'/%3E%3Cpath d='M132 100h22l-11 -36z' fill='rgba(3,28,14,.26)'/%3E%3Cpath d='M154 0h22l-11 36z' fill='rgba(3,28,14,.26)'/%3E%3Cpath d='M154 100h22l-11 -36z' fill='rgba(255,255,255,.13)'/%3E%3C/svg%3E"); }
.mn-mode-online .mn-mode-bg::after {
    content: '';
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 70px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0));
    transform: translateX(-120px) skewX(-18deg);
    animation: mnSheen 5.2s cubic-bezier(0.4, 0, 0.2, 1) 1.6s infinite;
}
@keyframes mnSheen {
    0% { transform: translateX(-120px) skewX(-18deg); }
    24%, 100% { transform: translateX(320px) skewX(-18deg); }
}
/* Lapis blue and emerald, like the tilework, both framed in gold. */
.mn-mode-online {
    background:
        radial-gradient(120% 130% at 78% -12%, rgba(150, 190, 255, 0.5), rgba(150, 190, 255, 0) 56%),
        linear-gradient(180deg, #4a74e0 0%, #2c4cb0 50%, #1b2e7a 100%);
    box-shadow: 0 5px 0 #121e52, 0 16px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(8, 14, 52, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.32), inset 0 -14px 24px rgba(8, 16, 60, 0.4);
}
.mn-mode-local {
    background:
        radial-gradient(120% 130% at 78% -12%, rgba(160, 245, 195, 0.42), rgba(160, 245, 195, 0) 56%),
        linear-gradient(180deg, #38ad6c 0%, #24804f 50%, #155333 100%);
    box-shadow: 0 5px 0 #0c331f, 0 16px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(3, 32, 16, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -14px 24px rgba(4, 34, 18, 0.4);
}
/* Play Local swaps the row for its two choices: Vs Computer (ruby, the third gem next to lapis
   and emerald) and Two Players (emerald, like Play Local), with a Back button. Both rows share
   one grid cell so they can cross over while one slides out and the other slides in. */
.mn-modes-stack {
    display: grid;
    margin-top: 14px;
}
.mn-modes-stack > .mn-modes {
    grid-area: 1 / 1;
    justify-self: center;
    margin-top: 0;
}
.mn-modes[hidden] { display: none; }
.mn-modes.is-animating .mn-mode,
.mn-modes.is-animating .mn-back { transition: none; }
.mn-modes.is-leaving { pointer-events: none; }
.mn-back {
    --dk-top: #2b9fb3; --dk-mid: #1a7387; --dk-bot: #0e4b5c; --dk-edge: #07303b;
    align-self: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 16px;
    border: 1.5px solid #e0b955;
    background:
        radial-gradient(120% 110% at 50% -20%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, var(--dk-top) 0%, var(--dk-mid) 52%, var(--dk-bot) 100%);
    box-shadow: 0 4px 0 var(--dk-edge), 0 12px 22px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 16px rgba(0, 0, 0, 0.22);
    color: #fff1c8;
    transition: transform 0.14s ease, filter 0.15s ease;
}
.mn-back svg {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
}
@media (hover: hover) {
    .mn-back:hover { filter: brightness(1.08); transform: translateY(-2px); }
}
.mn-back:active,
.mn-back.is-pressed {
    transform: translateY(3px);
    filter: none;
    box-shadow: 0 1px 0 var(--dk-edge), 0 6px 12px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(0, 0, 0, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 16px rgba(0, 0, 0, 0.22);
}
.mn-mode-ai {
    background:
        radial-gradient(120% 130% at 78% -12%, rgba(255, 178, 170, 0.45), rgba(255, 178, 170, 0) 56%),
        linear-gradient(180deg, #dc4652 0%, #a92233 50%, #6b0f1e 100%);
    box-shadow: 0 5px 0 #470a13, 0 16px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(52, 4, 12, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.32), inset 0 -14px 24px rgba(60, 6, 16, 0.4);
}
.mn-mode-ai .mn-mode-bg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='100' viewBox='0 0 176 100'%3E%3Cpath d='M0 0h22l-11 36z' fill='rgba(255,255,255,.14)'/%3E%3Cpath d='M0 100h22l-11 -36z' fill='rgba(46,4,12,.28)'/%3E%3Cpath d='M22 0h22l-11 36z' fill='rgba(46,4,12,.28)'/%3E%3Cpath d='M22 100h22l-11 -36z' fill='rgba(255,255,255,.14)'/%3E%3Cpath d='M44 0h22l-11 36z' fill='rgba(255,255,255,.14)'/%3E%3Cpath d='M44 100h22l-11 -36z' fill='rgba(46,4,12,.28)'/%3E%3Cpath d='M66 0h22l-11 36z' fill='rgba(46,4,12,.28)'/%3E%3Cpath d='M66 100h22l-11 -36z' fill='rgba(255,255,255,.14)'/%3E%3Cpath d='M88 0h22l-11 36z' fill='rgba(255,255,255,.14)'/%3E%3Cpath d='M88 100h22l-11 -36z' fill='rgba(46,4,12,.28)'/%3E%3Cpath d='M110 0h22l-11 36z' fill='rgba(46,4,12,.28)'/%3E%3Cpath d='M110 100h22l-11 -36z' fill='rgba(255,255,255,.14)'/%3E%3Cpath d='M132 0h22l-11 36z' fill='rgba(255,255,255,.14)'/%3E%3Cpath d='M132 100h22l-11 -36z' fill='rgba(46,4,12,.28)'/%3E%3Cpath d='M154 0h22l-11 36z' fill='rgba(46,4,12,.28)'/%3E%3Cpath d='M154 100h22l-11 -36z' fill='rgba(255,255,255,.14)'/%3E%3C/svg%3E"); }
.mn-mode-ai .mn-mode-art { animation-delay: -1.1s; }
/* Vs Computer levels: Easy (emerald), Medium (copper), Hard (ruby), one to three gold stars. */
.mn-mode.mn-diff { width: 200px; padding-left: 16px; }
.mn-diff .mn-mode-text { max-width: 112px; }
.mn-diff .mn-mode-art { width: 82px; height: 79px; top: -12px; }
.mn-diff .mn-mode-bg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='100' viewBox='0 0 176 100'%3E%3Cpath d='M0 0h22l-11 36z' fill='rgba(255,255,255,.13)'/%3E%3Cpath d='M0 100h22l-11 -36z' fill='rgba(0,0,0,.2)'/%3E%3Cpath d='M22 0h22l-11 36z' fill='rgba(0,0,0,.2)'/%3E%3Cpath d='M22 100h22l-11 -36z' fill='rgba(255,255,255,.13)'/%3E%3Cpath d='M44 0h22l-11 36z' fill='rgba(255,255,255,.13)'/%3E%3Cpath d='M44 100h22l-11 -36z' fill='rgba(0,0,0,.2)'/%3E%3Cpath d='M66 0h22l-11 36z' fill='rgba(0,0,0,.2)'/%3E%3Cpath d='M66 100h22l-11 -36z' fill='rgba(255,255,255,.13)'/%3E%3Cpath d='M88 0h22l-11 36z' fill='rgba(255,255,255,.13)'/%3E%3Cpath d='M88 100h22l-11 -36z' fill='rgba(0,0,0,.2)'/%3E%3Cpath d='M110 0h22l-11 36z' fill='rgba(0,0,0,.2)'/%3E%3Cpath d='M110 100h22l-11 -36z' fill='rgba(255,255,255,.13)'/%3E%3Cpath d='M132 0h22l-11 36z' fill='rgba(255,255,255,.13)'/%3E%3Cpath d='M132 100h22l-11 -36z' fill='rgba(0,0,0,.2)'/%3E%3Cpath d='M154 0h22l-11 36z' fill='rgba(0,0,0,.2)'/%3E%3Cpath d='M154 100h22l-11 -36z' fill='rgba(255,255,255,.13)'/%3E%3C/svg%3E"); }
.mn-diff-easy {
    background:
        radial-gradient(120% 130% at 78% -12%, rgba(160, 245, 195, 0.42), rgba(160, 245, 195, 0) 56%),
        linear-gradient(180deg, #38ad6c 0%, #24804f 50%, #155333 100%);
    box-shadow: 0 5px 0 #0c331f, 0 16px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(3, 32, 16, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -14px 24px rgba(4, 34, 18, 0.4);
}
.mn-diff-medium {
    background:
        radial-gradient(120% 130% at 78% -12%, rgba(255, 214, 160, 0.45), rgba(255, 214, 160, 0) 56%),
        linear-gradient(180deg, #e3843a 0%, #b5561d 50%, #72300e 100%);
    box-shadow: 0 5px 0 #4a1e07, 0 16px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(52, 20, 4, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.32), inset 0 -14px 24px rgba(62, 24, 6, 0.4);
}
.mn-diff-hard {
    background:
        radial-gradient(120% 130% at 78% -12%, rgba(255, 178, 170, 0.45), rgba(255, 178, 170, 0) 56%),
        linear-gradient(180deg, #dc4652 0%, #a92233 50%, #6b0f1e 100%);
    box-shadow: 0 5px 0 #470a13, 0 16px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(52, 4, 12, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.32), inset 0 -14px 24px rgba(60, 6, 16, 0.4);
}
.mn-diff-medium .mn-mode-art { animation-delay: -1.4s; }
.mn-diff-hard .mn-mode-art { animation-delay: -2.8s; }
.mn-diff-easy:active, .mn-diff-easy.is-pressed {
    box-shadow: 0 1px 0 #0c331f, 0 8px 16px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(3, 32, 16, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -14px 24px rgba(4, 34, 18, 0.4);
}
.mn-diff-medium:active, .mn-diff-medium.is-pressed {
    box-shadow: 0 1px 0 #4a1e07, 0 8px 16px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(52, 20, 4, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.32), inset 0 -14px 24px rgba(62, 24, 6, 0.4);
}
.mn-diff-hard:active, .mn-diff-hard.is-pressed {
    box-shadow: 0 1px 0 #470a13, 0 8px 16px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(52, 4, 12, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.32), inset 0 -14px 24px rgba(60, 6, 16, 0.4);
}

.mn-mode-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    max-width: 140px;
}
.mn-mode-title {
    font-size: 19px;
    line-height: 1;
    letter-spacing: 0.6px;
    white-space: nowrap;
    color: #fff6e2;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.32), 0 0 14px rgba(255, 255, 255, 0.12);
}
.mn-mode-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-family: 'Cormorant Garamond', 'Rubik', serif;
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.05;
    color: rgba(255, 246, 226, 0.84);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.mn-mode-sub > span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mn-live {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #46e27e;
    box-shadow: 0 0 0 2px rgba(10, 40, 20, 0.35), 0 0 8px rgba(70, 226, 126, 0.9);
    animation: mnLive 1.8s ease-in-out infinite;
}
@keyframes mnLive {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
/* Dice / checkers on the right, breaking out over the top edge. */
.mn-mode-art {
    position: absolute;
    right: 2px;
    top: -12px;
    width: 86px;
    height: 83px;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.28));
    animation: mnBob 4.2s ease-in-out infinite;
}
.mn-mode-local .mn-mode-art { animation-delay: -2.1s; }
.mn-mode-art svg { display: block; width: 100%; height: 100%; }
@keyframes mnBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ---- Dock: three jewel-coloured tiles framed in gold (same family as the play buttons) ---- */
.mn-dock {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    width: max-content;
    margin: 0 auto;
    display: flex;
    gap: 10px;
}
.mn-dock-btn {
    position: relative;
    width: 92px;
    height: 62px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1.5px solid #e0b955;
    border-radius: 17px;
    color: #fff6e2;
    font-family: 'Mate SC', 'Rubik', serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    background:
        radial-gradient(120% 110% at 50% -20%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, var(--dk-top) 0%, var(--dk-mid) 52%, var(--dk-bot) 100%);
    box-shadow: 0 4px 0 var(--dk-edge), 0 12px 22px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(0, 0, 0, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 16px rgba(0, 0, 0, 0.22);
    transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.15s ease;
}
/* Top bar: deep teal. */
.mn-player,
.mn-coins,
.mn-icon-btn { --dk-top: #2b9fb3; --dk-mid: #1a7387; --dk-bot: #0e4b5c; --dk-edge: #07303b; }
.mn-dock-shop { --dk-top: #a774e0; --dk-mid: #7446b8; --dk-bot: #4c2785; --dk-edge: #331a5c; }
.mn-dock-inv { --dk-top: #2fbcb4; --dk-mid: #1b8d8a; --dk-bot: #10605e; --dk-edge: #0a4240; }
.mn-dock-friends { --dk-top: #e5584a; --dk-mid: #b8302a; --dk-bot: #7e1a18; --dk-edge: #561010; }
.mn-dock-icon {
    position: relative;
    width: 32px;
    height: 32px;
}
.mn-dock-icon svg {
    display: block;
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}
.mn-dock-label {
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.mn-badge {
    position: absolute;
    top: -9px;
    right: -30px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 999px;
    background: linear-gradient(180deg, #ea5d55, #a8232b);
    box-shadow: 0 0 0 2px #fff1cf, 0 2px 5px rgba(0, 0, 0, 0.55);
    color: #fff;
    font: 700 11px/18px 'Rubik', system-ui, sans-serif;
    text-align: center;
}
.mn-badge.is-zero { display: none; }

/* ---- Hover / press ---- */
@media (hover: hover) {
    .mn-player:hover,
    .mn-coins:hover,
    .mn-icon-btn:hover,
    .mn-mode:hover { filter: brightness(1.07); }
    .mn-mode:hover { transform: translateY(-2px); }
    .mn-icon-btn:hover svg { transform: rotate(60deg); }
    .mn-dock-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
}
.mn-mode:active,
.mn-mode.is-pressed { transform: translateY(4px); filter: none; }
.mn-mode-online:active,
.mn-mode-online.is-pressed {
    box-shadow: 0 1px 0 #121e52, 0 8px 16px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(8, 14, 52, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.32), inset 0 -14px 24px rgba(8, 16, 60, 0.4);
}
.mn-mode-local:active,
.mn-mode-local.is-pressed {
    box-shadow: 0 1px 0 #0c331f, 0 8px 16px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(3, 32, 16, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -14px 24px rgba(4, 34, 18, 0.4);
}
.mn-mode-ai:active,
.mn-mode-ai.is-pressed {
    box-shadow: 0 1px 0 #470a13, 0 8px 16px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(52, 4, 12, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.32), inset 0 -14px 24px rgba(60, 6, 16, 0.4);
}
.mn-player:active, .mn-player.is-pressed,
.mn-coins:active, .mn-coins.is-pressed,
.mn-icon-btn:active, .mn-icon-btn.is-pressed {
    transform: translateY(3px);
    filter: none;
    box-shadow: 0 1px 0 var(--dk-edge), 0 6px 12px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(0, 0, 0, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 16px rgba(0, 0, 0, 0.22);
}
.mn-dock-btn:active,
.mn-dock-btn.is-pressed {
    transform: translateY(3px);
    filter: none;
    box-shadow: 0 1px 0 var(--dk-edge), 0 6px 12px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(0, 0, 0, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 16px rgba(0, 0, 0, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .mn-logo,
    .mn-mode-art,
    .mn-live,
    .mn-mode-online .mn-mode-bg::after { animation: none; }
}

/* ============================================================
   FRIENDS PAGE
   ============================================================ */
.fr-head { flex-shrink: 0; }
.fr-online-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(120, 220, 150, 0.32);
    color: #a8ecb9;
    font-family: 'Mate SC', serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.fr-online-pill i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3ddc6a;
    box-shadow: 0 0 8px rgba(61, 220, 106, 0.8);
    animation: frPulse 1.8s ease-in-out infinite;
}
.fr-online-pill.is-zero { border-color: rgba(255, 255, 255, 0.12); color: var(--tw-muted); }
.fr-online-pill.is-zero i { background: #6c757d; box-shadow: none; animation: none; }
#friends-online-count { font-family: 'Rubik', system-ui, sans-serif; font-weight: 700; }

.fr-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 14px;
}

/* Sidebar tabs (same pattern as the shop categories) */
.fr-tabs {
    flex: 0 0 172px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 2px;
}
#friends-modal .fr-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 9px 10px;
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    background: linear-gradient(180deg, rgba(62, 43, 21, 0.72), rgba(24, 16, 8, 0.8));
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 236, 180, 0.07);
    color: rgba(244, 232, 205, 0.82);
    font-family: 'Mate SC', serif;
    font-size: 16px;
    text-align: left;
    text-shadow: none;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
#friends-modal .fr-tab:active { transform: scale(0.97); }
@media (hover: hover) {
    #friends-modal .fr-tab:not(.active):hover { color: #fff3d6; background: linear-gradient(180deg, rgba(84, 58, 27, 0.8), rgba(30, 20, 10, 0.85)); }
}
#friends-modal .fr-tab.active {
    color: #2a1c06;
    border-color: #8a6a17;
    background: linear-gradient(180deg, #f6da78, #c99a2e);
    box-shadow: 0 3px 0 #6b4f10, 0 8px 18px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    text-shadow: none;
}
.fr-tab-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #f0c75a;
    background: rgba(0, 0, 0, 0.38);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.fr-tab-icon svg { width: 19px; height: 19px; fill: currentColor; }
.fr-tab.active .fr-tab-icon { color: #2a1c06; background: rgba(42, 28, 6, 0.16); box-shadow: none; }
.fr-tab-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-tab-count {
    flex: 0 0 auto;
    min-width: 24px;
    padding: 3px 7px;
    box-sizing: border-box;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    color: #f6e2a8;
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    text-align: center;
}
.fr-tab.active .fr-tab-count { color: #2a1c06; background: rgba(42, 28, 6, 0.18); }
.fr-tab-count.is-alert { background: linear-gradient(180deg, #ff6a5c, #c8302a); color: #fff; box-shadow: 0 0 10px rgba(255, 90, 80, 0.5); }
.fr-tab-count.is-alert.is-zero { display: none; }

/* Tab panels */
.fr-panels { flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; }
#friends-modal .fr-panel { display: none; height: 100%; flex-direction: column; gap: 10px; min-height: 0; }
#friends-modal .fr-panel.active { display: flex; animation: frPanelIn 0.28s ease both; }

.fr-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
    padding: 2px 8px 12px 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.5) transparent;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.fr-list::-webkit-scrollbar { width: 8px; }
.fr-list::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.45); border-radius: 4px; }

.fr-section {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    color: var(--tw-muted);
    font-family: 'Mate SC', serif;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.fr-section:not(:first-child) { margin-top: 8px; }
.fr-section b {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    color: #f6e2a8;
    font-family: 'Rubik', system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: 0;
}
.fr-section::after { content: ''; flex: 1; height: 1px; background: var(--tw-line-faint); }

/* Player card */
.fr-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 9px 10px 9px 9px;
    box-sizing: border-box;
    border-radius: 16px;
    background: var(--tw-card);
    border: 1px solid var(--tw-line-faint);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 236, 180, 0.07);
    animation: frCardIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.fr-card.is-online { border-color: rgba(103, 214, 115, 0.3); }
.fr-card.is-online::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #3ddc6a;
    box-shadow: 0 0 8px rgba(61, 220, 106, 0.7);
}
.fr-card.is-offline .fr-avatar { filter: saturate(0.55) brightness(0.85); }
.fr-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fff url('menu/guest-icon.png') center / cover no-repeat;
    box-shadow: 0 0 0 2px var(--tw-line-soft), 0 4px 10px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}
.fr-presence {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2.5px solid #1a1209;
    background: #6c757d;
}
.is-online .fr-presence { background: #3ddc6a; box-shadow: 0 0 8px rgba(61, 220, 106, 0.75); }
.is-busy .fr-presence { background: #f0b43c; box-shadow: 0 0 8px rgba(240, 180, 60, 0.6); }
.fr-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    cursor: pointer;
}
.fr-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fr-name {
    min-width: 0;
    font-family: 'Mate SC', serif;
    font-size: 16px;
    letter-spacing: 0.4px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.fr-level {
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.fr-level img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fr-level span {
    position: relative;
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 800;
    font-size: 10px;
    color: #fff;
    text-shadow: 0 1px 2px #000;
}
.fr-sub {
    font-family: 'Mate SC', serif;
    font-size: 13px;
    color: var(--tw-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fr-sub:first-letter { text-transform: uppercase; }
.is-online .fr-sub { color: #8fe3a5; }
.is-busy .fr-sub { color: #f3c76a; }
.fr-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

/* Small square icon buttons (remove / decline / cancel) */
.tw-ui .fr-icon-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(244, 232, 205, 0.72);
    font-family: 'Mate SC', serif;
    font-size: 13px;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.fr-icon-btn svg { width: 18px; height: 18px; fill: currentColor; }
.fr-icon-btn:active { transform: scale(0.92); }
@media (hover: hover) {
    .tw-ui .fr-icon-btn:hover { color: #ff9a8e; border-color: rgba(255, 120, 110, 0.5); background: rgba(255, 90, 80, 0.12); }
}
.tw-ui .fr-icon-btn.is-confirming {
    width: auto;
    padding: 0 12px;
    color: #fff;
    background: linear-gradient(180deg, #e0574f, #a3222a);
    border-color: #6e1218;
    box-shadow: 0 2px 0 #5c0f14;
    animation: frArm 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.fr-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--tw-muted);
    font-family: 'Mate SC', serif;
    font-size: 12.5px;
    white-space: nowrap;
}
.fr-tag svg { width: 14px; height: 14px; fill: currentColor; }
.fr-tag.is-friends { color: #8fe3a5; border-color: rgba(120, 220, 150, 0.35); }

/* Empty states */
.fr-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px 10px;
    text-align: center;
}
.fr-empty p {
    margin: 0;
    color: var(--tw-muted);
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 600;
}
.fr-empty-icon {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    color: var(--tw-line);
    background: radial-gradient(circle at 50% 35%, rgba(255, 214, 130, 0.18), rgba(0, 0, 0, 0.35) 70%);
    border: 1px solid var(--tw-line-soft);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.fr-empty-icon svg { width: 34px; height: 34px; fill: currentColor; }

/* Add-friend search bar */
.fr-search { display: flex; align-items: center; gap: 10px; padding: 2px 10px 0 2px; flex-shrink: 0; }
.fr-search-field { position: relative; flex: 1 1 auto; min-width: 0; display: block; }
.fr-search-field svg {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    fill: var(--tw-muted);
    pointer-events: none;
}
#friends-modal #user-search-input {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 16px 0 42px;
    box-sizing: border-box;
    border-radius: 14px;
    border: 1.5px solid var(--tw-line-soft);
    background: rgba(0, 0, 0, 0.42);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
    color: #fff;
    font-family: 'Mate SC', serif;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#friends-modal #user-search-input::placeholder { color: rgba(244, 232, 205, 0.4); }
#friends-modal #user-search-input:focus { border-color: var(--tw-line); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--tw-line-faint); }
#friends-modal #user-search-btn { flex: 0 0 auto; }

@keyframes frPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes frPanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes frCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes frArm { from { transform: scale(0.85); } to { transform: scale(1); } }

/* ============================================================
   STATS PAGES (#profile-modal = you, #view-profile-modal = another player)
   ============================================================ */
.ps-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 16px; align-items: stretch; }
.ps-hero {
    flex: 0 0 290px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 20px;
    background: radial-gradient(ellipse 80% 55% at 50% 28%, var(--tw-glow), transparent 72%), var(--tw-well);
    border: 1px solid var(--tw-line-faint);
}
.ps-frame {
    position: relative;
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    border-radius: 30px;
    background: var(--tw-frame);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 12px 24px rgba(0, 0, 0, 0.5), 0 0 26px var(--tw-glow);
}
.tw-ui .ps-frame .profile-picture-large {
    position: absolute;
    inset: 5px;
    width: auto;
    height: auto;
    margin: 0;
    border: none;
    border-radius: 25px;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.ps-level {
    position: absolute;
    right: -14px;
    bottom: -14px;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.ps-level img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ps-level span {
    position: relative;
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.ps-name-row { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; margin-top: 6px; }
#profile-modal .ps-name,
#view-profile-modal .ps-name {
    margin: 0;
    min-width: 0;
    font-family: 'Mate SC', serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.ps-name-row .edit-username-btn { width: 30px; height: 30px; }
.ps-xp { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ps-xp-track {
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--tw-line-faint);
}
.ps-xp-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #36a9f5, #7fdcff);
    box-shadow: 0 0 10px rgba(79, 172, 254, 0.6);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.tw-ui .ps-xp .ps-xp-text {
    position: static;
    transform: none;
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--tw-muted);
    text-shadow: none;
    font-variant-numeric: tabular-nums;
}
.ps-friend-btn { margin-top: 4px; max-width: 100%; min-width: 170px; }

.ps-stats {
    --rate: 0;
    --wins-share: 50%;
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr 1fr auto;
    gap: 14px;
}
.ps-tile {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    align-content: center;
    column-gap: 18px;
    row-gap: 6px;
    padding: 14px 22px;
    border-radius: 20px;
    background: var(--tw-card);
    border: 1px solid var(--tw-line-faint);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 236, 180, 0.07);
    overflow: hidden;
}
.ps-tile-icon {
    grid-row: 1 / 3;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: var(--tw-line);
    background: rgba(0, 0, 0, 0.34);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--tw-line-faint);
}
.ps-tile-icon svg { width: 32px; height: 32px; fill: currentColor; }
.ps-tile.is-wins .ps-tile-icon { color: #6fe08a; }
.ps-tile.is-losses .ps-tile-icon { color: #ff8478; }
.ps-tile-value {
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 1;
    color: #fff;
    font-variant-numeric: lining-nums tabular-nums;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.ps-tile-label {
    grid-column: 2;
    font-family: 'Mate SC', serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: var(--tw-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ps-tile.is-wins .ps-tile-value { color: #b9f5c6; }
.ps-tile.is-losses .ps-tile-value { color: #ffc6bf; }
/* Win-rate ring (conic arc driven by --rate set from JS) */
.ps-ring {
    grid-row: 1 / 3;
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(#56d36e calc(var(--rate) * 1%), rgba(255, 255, 255, 0.1) 0);
    box-shadow: 0 0 14px rgba(86, 211, 110, 0.25);
}
.ps-ring::before {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.62) 75%), var(--tw-well);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.ps-tile.is-rate .ps-tile-value { color: #d6ffe0; }
/* Wins vs losses split bar */
.ps-wl { grid-column: 1 / -1; }
.ps-wl-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.ps-wl-w { width: var(--wins-share); background: linear-gradient(90deg, #2f9d45, #67d673); transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.ps-wl-l { flex: 1; background: linear-gradient(90deg, #ff7a6e, #b52a2a); }
.ps-stats.is-empty .ps-wl-w,
.ps-stats.is-empty .ps-wl-l { background: transparent; }

/* ============================================================
   RESULT SCREENS (win / lose / opponent left) — always board-themed
   ============================================================ */
.rs-panel {
    width: 600px;
    max-width: calc(100% - 40px);
    margin-top: 34px;
    padding: 46px 30px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}
/* Medal overlapping the top edge, with spinning rays behind it on a win */
.rs-emblem {
    position: absolute;
    left: 50%;
    top: 0;
    width: 84px;
    height: 84px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
}
.rs-rays {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    background: repeating-conic-gradient(var(--tw-glow) 0deg 8deg, transparent 8deg 22deg);
    -webkit-mask: radial-gradient(circle, #000 0%, transparent 62%);
    mask: radial-gradient(circle, #000 0%, transparent 62%);
    animation: mmSpin 30s linear infinite;
    pointer-events: none;
}
.rs-modal.is-lose .rs-rays { display: none; }
.rs-panel > :not(.rs-emblem) { position: relative; z-index: 1; }
.rs-medal {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--tw-pri-ink);
    background: radial-gradient(circle at 50% 30%, var(--tw-pri-top), var(--tw-pri-bot) 70%);
    border: 3px solid var(--tw-line);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 30px var(--tw-glow), inset 0 2px 0 rgba(255, 255, 255, 0.45);
}
.rs-medal svg { width: 42px; height: 42px; fill: currentColor; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35)); }
.rs-modal.is-lose .rs-medal {
    color: rgba(255, 255, 255, 0.85);
    background: radial-gradient(circle at 50% 30%, #5d5149, #241c16 72%);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.18);
}
.modal-container.visible .rs-medal { animation: rsMedalIn 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.1s both; }

.tw-ui .rs-eyebrow {
    margin: 0;
    padding: 0;
    border: none;
    font-family: 'Mate SC', serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--tw-line);
    display: flex;
    align-items: center;
    gap: 10px;
}
.tw-ui .rs-eyebrow::before,
.tw-ui .rs-eyebrow::after { content: ''; width: 34px; height: 1px; background: var(--tw-line-soft); }
.tw-ui .rs-title {
    margin: 0;
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 1px;
    color: transparent;
    background: linear-gradient(180deg, #ffffff 8%, #b8f5c4 46%, #39b85a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(80, 220, 120, 0.35));
}
.rs-modal.is-lose .rs-title {
    background: linear-gradient(180deg, #ffffff 8%, #ffc0b8 46%, #e2463b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(240, 80, 70, 0.32));
}
.modal-container.visible .rs-title { animation: mmTitlePop 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) 0.15s both; }
.tw-ui .rs-reason {
    margin: 0;
    max-width: 480px;
    color: var(--tw-muted);
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
}
.tw-ui .rs-reason:empty { display: none; }
.rs-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
    min-height: 34px;
}
.rs-opp {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border-radius: 16px;
    background: var(--tw-well);
    border: 1px solid var(--tw-line-faint);
}
/* Local games: no opponent chip or coins, and Return to Menu is the only (main) action. */
.rs-modal.is-local .rs-row { display: none; }
.tw-ui.rs-modal.is-local .rs-actions .tw-btn-ghost {
    color: var(--tw-pri-ink);
    background: linear-gradient(180deg, var(--tw-pri-top), var(--tw-pri-bot));
    border-color: var(--tw-pri-border);
    box-shadow: 0 3px 0 var(--tw-pri-edge), 0 8px 16px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.tw-ui .rs-opp .rs-opp-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: 0;
    border: none;
    border-radius: 12px;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 2px var(--tw-line-soft), 0 4px 10px rgba(0, 0, 0, 0.4);
}
.rs-opp-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.rs-opp-label {
    font-family: 'Mate SC', serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--tw-muted);
}
.rs-opp-name {
    max-width: 170px;
    font-family: 'Mate SC', serif;
    font-size: 17px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rs-opp-level { position: relative; flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.rs-opp-level img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rs-opp-level span { position: relative; font-family: 'Rubik', system-ui, sans-serif; font-weight: 800; font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; }
.rs-row .coin-reward { margin: 0; }
.rs-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    width: 100%;
    margin-top: 14px;
}
.rs-actions .tw-btn { flex: 0 1 230px; height: 48px; font-size: 18px; }
@keyframes rsMedalIn { from { opacity: 0; transform: scale(0.3) rotate(-30deg); } to { opacity: 1; transform: none; } }

/* ============================================================
   INVITATION CARD (friend's lobby invite = gold; rematch = board theme)
   ============================================================ */
.iv-panel {
    width: 580px;
    max-width: calc(100% - 40px);
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 24px 28px 26px;
    overflow: hidden;
}
.iv-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 45% 80% at 16% 50%, var(--tw-glow), transparent 70%);
    opacity: 0.8;
}
.iv-frame {
    position: relative;
    flex: 0 0 auto;
    width: 128px;
    height: 128px;
    border-radius: 28px;
    background: var(--tw-frame);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 12px 26px rgba(0, 0, 0, 0.55), 0 0 30px var(--tw-glow);
}
.iv-frame::before {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 34px;
    border: 2px solid var(--tw-line);
    opacity: 0;
    pointer-events: none;
}
.modal-container.visible .iv-frame::before { animation: mmRing 1.6s ease-out infinite; }
.tw-ui .iv-frame .profile-picture-large {
    position: absolute;
    inset: 5px;
    width: auto;
    height: auto;
    margin: 0;
    border: none;
    border-radius: 23px;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.iv-level {
    position: absolute;
    right: -14px;
    bottom: -14px;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.iv-level img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.iv-level span { position: relative; font-family: 'Rubik', system-ui, sans-serif; font-weight: 800; font-size: 14px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
.iv-info { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tw-ui .iv-eyebrow {
    margin: 0;
    padding: 0;
    border: none;
    font-family: 'Mate SC', serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--tw-line);
}
.tw-ui .iv-name {
    margin: 0;
    max-width: 100%;
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--tw-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 16px var(--tw-glow);
}
.tw-ui .iv-message {
    margin: 0 0 6px;
    max-width: none;
    color: var(--tw-text);
    font-family: 'Cormorant Garamond', serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
}
.iv-actions { display: flex; gap: 12px; width: 100%; }
.iv-actions .tw-btn { flex: 1 1 0; height: 46px; }
.iv-clock {
    position: absolute;
    top: 14px;
    right: 16px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--tw-line-soft);
    color: var(--tw-title);
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.iv-timer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(0, 0, 0, 0.35);
}
.iv-timer i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--tw-pri-bot), var(--tw-pri-top));
    box-shadow: 0 0 10px var(--tw-glow);
    transform-origin: left center;
    transition: transform 1s linear;
}
.iv-clock[hidden],
.iv-timer[hidden] { display: none; }

/* ============================================================
   QUICK CHAT (in-game, board-themed)
   ============================================================ */
.qc-panel {
    width: 560px;
    max-width: calc(100% - 40px);
    padding: 14px 20px 20px;
    overflow: hidden;
}
.qc-head { gap: 10px; }
.tw-ui .qc-head .tw-title { font-size: 21px; }
.qc-tabs {
    display: flex;
    gap: 4px;
    margin-left: auto;
    padding: 3px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--tw-line-faint);
}
.qc-head .qc-tabs ~ .menu-close-button { margin-left: 0 !important; }
.qc-tab {
    padding: 6px 14px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--tw-muted);
    font-family: 'Mate SC', serif;
    font-size: 14px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
#chat-modal .qc-tab.active {
    color: var(--tw-pri-ink);
    background: linear-gradient(180deg, var(--tw-pri-top), var(--tw-pri-bot));
    box-shadow: 0 2px 0 var(--tw-pri-edge), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.qc-cooldown {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 140, 120, 0.45);
    color: #ffb4a8;
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.qc-cooldown[hidden] { display: none; }
.qc-pages {
    position: relative;
    height: 230px;
    margin-top: 14px;
    overflow: hidden;
}
.qc-page {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
    pointer-events: none;
}
.qc-page.active { opacity: 1; transform: none; pointer-events: auto; }
.qc-page.prev { transform: translateX(-100%); }
.qc-page.next { transform: translateX(100%); }
/* Message bubbles: speech-bubble cards with a little tail */
#chat-modal .qc-msg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 6px 10px;
    border-radius: 16px 16px 16px 6px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: linear-gradient(180deg, #ffffff, #ece6dc);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), 0 8px 14px rgba(0, 0, 0, 0.3);
    color: #2a1f16;
    font-family: 'Mate SC', serif;
    font-size: 16px;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.2s ease, opacity 0.2s ease;
}
.qc-page[dir="rtl"] .qc-msg { border-radius: 16px 16px 6px 16px; font-family: system-ui, sans-serif; font-weight: 700; font-size: 19px; }
.qc-msg:active:not(:disabled) { transform: translateY(3px) scale(0.97); box-shadow: 0 0 0 rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3); }
@media (hover: hover) {
    .qc-msg:not(:disabled):hover { filter: brightness(1.04); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), 0 10px 18px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--tw-line); }
}
.qc-msg.chat-cooldown,
.qc-msg:disabled { cursor: not-allowed; opacity: 0.45; filter: grayscale(0.8); }
#chat-modal .qc-nav {
    position: absolute;
    top: 58%;
    z-index: 2;
    width: 30px;
    height: 46px;
    display: none !important;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tw-line-soft);
    background: rgba(0, 0, 0, 0.5);
    color: var(--tw-title);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.qc-nav.prev { left: 0; border-radius: 0 12px 12px 0; border-left: none; }
.qc-nav.next { right: 0; border-radius: 12px 0 0 12px; border-right: none; }
/* The header tabs switch pages; the edge arrows only matter with more than two pages. */
.qc-panel:has(.qc-tab:nth-child(3)) .qc-nav[style*="flex"] { display: flex !important; }

@media (prefers-reduced-motion: reduce) {
    .rs-rays, .fr-online-pill i, .modal-container.visible .iv-frame::before { animation: none; }
}

/* ============================================================
   CLOSE BUTTON (every page / modal) — a raised glass square with an X, in the page's accent colour
   (gold on menu pages, the board's accent line in-game). Position comes from each page's rules.
   ============================================================ */
.menu-close-button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    max-width: none;
    padding: 0;
    box-sizing: border-box;
    border-radius: 13px;
    border: 1.5px solid var(--tw-close-line, rgba(233, 196, 90, 0.62));
    background: var(--tw-close-bg, linear-gradient(180deg, rgba(62, 43, 21, 0.95), rgba(20, 13, 6, 0.96)));
    color: var(--tw-line, #e9c45a);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 236, 180, 0.14);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease, color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}
.menu-close-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5));
    transition: transform 0.2s ease;
}
.menu-close-button:hover { transform: none; }
@media (hover: hover) {
    .menu-close-button:hover { color: #fff3c4; border-color: var(--tw-line, #e9c45a); filter: brightness(1.1); }
    .menu-close-button:hover svg { transform: rotate(90deg); }
}
.menu-close-button:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 236, 180, 0.14);
}

/* ============================================================
   SETTINGS PAGE (#options-container) — full page, gold menu look
   ============================================================ */
.op-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 16px;
    align-items: stretch;
}
/* Audio + Language column scrolls on its own (the Account card stays put). */
.op-col {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.5) transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
.op-col::-webkit-scrollbar { width: 6px; }
.op-col::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.45); border-radius: 3px; }
.op-col > .op-card { flex-shrink: 0; }
.op-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
    box-sizing: border-box;
    border-radius: 20px;
    background: var(--tw-well);
    border: 1px solid var(--tw-line-faint);
}
.tw-ui .op-card-title {
    margin: 0 0 2px 4px;
    padding: 0;
    border: none;
    font-family: 'Mate SC', serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tw-line);
    text-align: left;
}
/* A settings row: icon chip, label + hint, and a control on the right. */
.tw-ui .op-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 74px;
    margin: 0;
    padding: 12px 16px 12px 12px;
    box-sizing: border-box;
    border-radius: 16px;
    border: 1px solid var(--tw-line-faint);
    background: var(--tw-card);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 236, 180, 0.07);
    color: var(--tw-text);
    text-align: left;
    font: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.tw-ui button.op-row { cursor: pointer; transition: transform 0.12s ease, border-color 0.2s ease, filter 0.15s ease; }
.tw-ui button.op-row:active { transform: scale(0.985); }
@media (hover: hover) {
    .tw-ui button.op-row:hover { border-color: var(--tw-line-soft); filter: brightness(1.05); }
}
.op-row-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--tw-line);
    background: rgba(0, 0, 0, 0.34);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--tw-line-faint);
    transition: color 0.2s ease, opacity 0.2s ease;
}
.op-row-icon svg { width: 25px; height: 25px; fill: currentColor; }
.op-toggle:not(.is-on) .op-row-icon { color: var(--tw-muted); opacity: 0.7; }
.op-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.op-row-label {
    font-family: 'Mate SC', serif;
    font-size: 18px;
    letter-spacing: 0.4px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.op-row-sub {
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--tw-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* On / off switch (the row is the button; this is just the indicator). */
.op-switch {
    position: relative;
    flex: 0 0 auto;
    width: 56px;
    height: 32px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.op-switch i {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff, #d9d2c6);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    transition: transform 0.28s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.op-toggle.is-on .op-switch {
    background: linear-gradient(180deg, var(--tw-pri-top), var(--tw-pri-bot));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px var(--tw-pri-border), 0 0 14px var(--tw-glow);
}
.op-toggle.is-on .op-switch i { transform: translateX(24px); }
/* English / Arabic segmented switch */
.op-seg {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid var(--tw-line-faint);
}
.tw-ui .op-seg-btn {
    min-width: 92px;
    height: 38px;
    padding: 0 14px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--tw-muted);
    font-family: 'Mate SC', serif;
    font-size: 15px;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.2s ease, color 0.2s ease;
}
.tw-ui .op-seg-btn[lang="ar"] { font-family: system-ui, sans-serif; font-weight: 700; font-size: 16px; }
.tw-ui .op-seg-btn.active {
    color: var(--tw-pri-ink);
    background: linear-gradient(180deg, var(--tw-pri-top), var(--tw-pri-bot));
    box-shadow: 0 2px 0 var(--tw-pri-edge), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
/* Language row: the switch takes the rest of the row. */
.op-lang .op-seg { flex: 1 1 auto; }
.op-lang .op-seg-btn { flex: 1 1 0; min-width: 0; }
/* Account card (right column) */
.op-account-card { flex: 0 0 300px; }
.op-account {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 16px;
    background: radial-gradient(ellipse 80% 60% at 50% 32%, var(--tw-glow), transparent 72%);
}
.op-avatar-frame {
    width: 100px;
    height: 100px;
    margin-bottom: 6px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 26px;
    background: var(--tw-frame);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 24px var(--tw-glow);
}
.op-avatar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 21px;
    background: #fff url('menu/guest-icon.png') center / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.op-account-name {
    max-width: 100%;
    font-family: 'Mate SC', serif;
    font-size: 21px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.op-account-sub {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--tw-muted);
}
.op-account-actions { display: flex; gap: 10px; }
.op-account-actions .tw-btn { flex: 1 1 0; height: 40px; }
.op-account-actions .tw-btn[hidden] { display: none; }

/* ============================================================
   IN-GAME PAUSE MENU (#ingame-menu-modal) — full-screen page in the board's colours
   Left: the match (you vs opponent) and a big Resume. Right: game controls + Leave Game.
   ============================================================ */
.gm-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 16px; align-items: stretch; }
.gm-match {
    flex: 1.35 1 0;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: radial-gradient(ellipse 70% 60% at 50% 42%, var(--tw-glow), transparent 72%), var(--tw-well);
}
.gm-match .op-card-title { align-self: center; margin: 0; letter-spacing: 3px; }
.gm-vs { display: flex; align-items: center; justify-content: center; gap: 26px; }
.gm-player { width: 150px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gm-frame {
    position: relative;
    width: 104px;
    height: 104px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 26px;
    background: var(--tw-frame);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 24px var(--tw-glow);
}
.gm-avatar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 21px;
    background: #fff url('menu/guest-icon.png') center / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.gm-level {
    position: absolute;
    right: -13px;
    bottom: -13px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.gm-level img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gm-level span { position: relative; font-family: 'Rubik', system-ui, sans-serif; font-weight: 800; font-size: 13px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
.gm-name {
    max-width: 100%;
    padding: 5px 14px;
    box-sizing: border-box;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid var(--tw-line-soft);
    font-family: 'Mate SC', serif;
    font-size: 16px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gm-vs-badge {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    margin-bottom: 40px; /* line up with the avatars, not avatars + name plates */
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-weight: 700;
    font-size: 21px;
    color: var(--tw-title);
    background: radial-gradient(circle at 40% 32%, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.55) 72%);
    border: 2.5px solid var(--tw-line);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3), 0 0 22px var(--tw-glow);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
.gm-resume { width: min(340px, 90%); height: 54px; font-size: 20px; }
.gm-resume svg { width: 22px; height: 22px; }
.gm-controls { flex: 1 1 0; min-width: 0; }
.gm-controls .gm-leave { margin-top: auto; height: 50px; font-size: 18px; }

/* ============================================================
   LEAVE DIALOG (#confirm-modal) — board-themed card, red Leave
   ============================================================ */
.cf-panel {
    width: 470px;
    max-width: calc(100% - 40px);
    margin-top: 30px;
    padding: 44px 28px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.cf-icon {
    position: absolute;
    left: 50%;
    top: 0;
    width: 72px;
    height: 72px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: radial-gradient(circle at 50% 30%, #f06a60, #a3222a 72%);
    border: 3px solid var(--tw-line);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.35), 0 10px 22px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.35);
}
.cf-icon svg { width: 34px; height: 34px; fill: currentColor; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.modal-container.visible .cf-icon { animation: cfIconIn 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.05s both; }
@keyframes cfIconIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-30deg); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}
.tw-ui .cf-eyebrow {
    margin: 0;
    padding: 0;
    border: none;
    font-family: 'Mate SC', serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--tw-line);
}
.tw-ui .cf-title {
    margin: 0;
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: #ffb3a9;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(240, 90, 80, 0.3);
}
.tw-ui .cf-message {
    margin: 4px 0 0;
    max-width: 380px;
    color: var(--tw-text);
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
}
.cf-actions { display: flex; gap: 12px; width: 100%; margin-top: 14px; }
.cf-actions .tw-btn { flex: 1 1 0; height: 46px; }

/* Portrait on a touch screen: the game is landscape, and tablets may ignore the app's landscape
   lock (Android 16), so cover the screen and ask the player to turn the device. */
#rotate-hint {
    display: none;
}
@media (orientation: portrait) and (pointer: coarse) {
    #rotate-hint {
        position: fixed;
        inset: 0;
        z-index: 100000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        padding: 24px;
        background: radial-gradient(120% 90% at 50% 35%, #4a2d14 0%, #23140a 70%);
        color: #f3d68a;
        font: 700 20px/1.3 'Mate SC', 'Rubik', serif;
        text-align: center;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    }
    #rotate-hint svg {
        width: 96px;
        height: 96px;
        animation: rotateHint 2.4s ease-in-out infinite;
    }
}
@keyframes rotateHint {
    0%, 20% { transform: rotate(0deg); }
    50%, 80% { transform: rotate(-90deg); }
    100% { transform: rotate(0deg); }
}

/* ============================================================
   COIN STORE (#coin-store-page) — coin packs bought through Google Play
   Same shell as Shop / Inventory. Five jewel-coloured cards in gold frames (emerald, lapis,
   amethyst, ruby, royal gold), each with its own illustration, then a result layer for
   buying / success / pending / failed.
   ============================================================ */
/* Opens over Shop / Inventory (all modals share z-index 3000; later ones in the page win). */
#coin-store-page { z-index: 4100; } /* above the shop, the practice board and the buy dialog */
.cs-title-icon svg { width: 26px; height: 26px; }

.cs-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cs-packs {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(148px, 1fr));
    gap: 12px;
    padding: 14px 4px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-x;
}
.cs-packs::-webkit-scrollbar { display: none; }

.cs-pack {
    --cs-a: #39b27a;
    --cs-b: #0e4a32;
    --cs-edge: #08301f;
    --cs-glow: rgba(120, 255, 190, 0.38);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 7px 7px 9px;
    box-sizing: border-box;
    border-radius: 18px;
    border: 2px solid transparent;
    background:
        radial-gradient(130% 70% at 50% 0%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 60%) padding-box,
        linear-gradient(180deg, var(--cs-a), var(--cs-b)) padding-box,
        linear-gradient(160deg, #fff0b8, #d9a83c 42%, #7b5414) border-box;
    box-shadow: 0 5px 0 var(--cs-edge), 0 14px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    color: #fff;
    font: inherit;
    text-align: center;
    cursor: pointer;
    scroll-snap-align: center;
    touch-action: pan-x;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}
.cs-pack.cs-tier-2 { --cs-a: #4f8ff0; --cs-b: #14306f; --cs-edge: #0c1f4d; --cs-glow: rgba(140, 200, 255, 0.4); }
.cs-pack.cs-tier-3 { --cs-a: #a15be0; --cs-b: #3d1670; --cs-edge: #290d4d; --cs-glow: rgba(215, 160, 255, 0.42); }
.cs-pack.cs-tier-4 { --cs-a: #e0505a; --cs-b: #6b1220; --cs-edge: #470a15; --cs-glow: rgba(255, 150, 150, 0.42); }
.cs-pack.cs-tier-5 { --cs-a: #f0b93a; --cs-b: #7a420a; --cs-edge: #4f2a05; --cs-glow: rgba(255, 228, 140, 0.55); }

/* Cards rise in one after another each time the store opens. */
.cs-pack { opacity: 0; transform: translateY(26px) scale(0.96); }
#coin-store-page.visible .cs-pack {
    animation: csCardIn 0.55s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
    animation-delay: calc(0.08s + var(--i, 0) * 0.07s);
}
@keyframes csCardIn { to { opacity: 1; transform: none; } }
@media (hover: hover) {
    #coin-store-page.visible .cs-pack:hover { filter: brightness(1.07); }
}
#coin-store-page.visible .cs-pack:active {
    filter: brightness(0.96);
    box-shadow: 0 2px 0 var(--cs-edge), 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* "Most popular" / "Best value" ribbon over the top edge. */
.cs-ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    padding: 4px 11px;
    border-radius: 999px;
    font: 800 10.5px/1 'Rubik', system-ui, sans-serif;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #ff6b62, #c5242d);
    border: 1.5px solid #ffe19a;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}
.cs-pack.is-best .cs-ribbon { background: linear-gradient(180deg, #67d673, #24883a); }

/* The spotlit stage the illustration sits on (board points along the top, like the table). */
.cs-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 92px;
    border-radius: 13px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 62% at 50% 56%, var(--cs-glow), transparent 72%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.18));
    box-shadow: inset 0 0 0 1px rgba(255, 236, 180, 0.16), inset 0 -10px 18px rgba(0, 0, 0, 0.35);
}
.cs-stage .cs-points { position: absolute; left: 0; top: 0; width: 100%; height: 36%; opacity: 0.24; }
.cs-art {
    position: absolute;
    inset: 8px 0 2px;
    display: grid;
    place-items: center;
    transform: scale(1.18);
    transform-origin: 50% 62%;
}
.cs-art svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.45));
    animation: csFloat 3.4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -0.6s);
}
@keyframes csFloat { 50% { transform: translateY(-4px) rotate(-1.5deg); } }
.cs-spark { transform-box: fill-box; transform-origin: center; animation: csTwinkle 2.2s ease-in-out infinite; }
.cs-spark.s2 { animation-delay: 0.7s; }
.cs-spark.s3 { animation-delay: 1.4s; }
@keyframes csTwinkle { 0%, 100% { opacity: 0; transform: scale(0.3); } 45% { opacity: 1; transform: scale(1); } }
/* A light sweep across the featured packs. */
.cs-pack.is-popular .cs-stage::after,
.cs-pack.is-best .cs-stage::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-18deg);
    animation: csShine 3.8s ease-in-out infinite 1.2s;
    pointer-events: none;
}
@keyframes csShine { 0% { left: -60%; } 40%, 100% { left: 130%; } }

.cs-amount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font: 800 23px/1 'Rubik', system-ui, sans-serif;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: 0.3px;
    color: #fff8df;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 12px rgba(255, 220, 120, 0.35);
}
.cs-amount .coin-svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.cs-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 19px;
}
.cs-name {
    min-width: 0;
    font-family: 'Mate SC', serif;
    font-size: 13.5px;
    letter-spacing: 0.3px;
    color: rgba(255, 248, 230, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-bonus {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    padding: 3px 7px;
    border-radius: 999px;
    font: 800 10.5px/1 'Rubik', system-ui, sans-serif;
    letter-spacing: 0.4px;
    color: #3a2203;
    background: linear-gradient(180deg, #fff1a8, #f2c23e);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.cs-price {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 36px;
    border-radius: 11px;
    font: 800 17px/1 'Rubik', system-ui, sans-serif;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: 0.3px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #67d673, #2f9d45);
    border: 1px solid #1f6e2e;
    box-shadow: 0 3px 0 #1a5a27, 0 6px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.cs-pack.is-busy .cs-price { color: transparent; text-shadow: none; }
.cs-pack.is-busy .cs-price::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: csSpin 0.8s linear infinite;
}
@keyframes csSpin { to { transform: rotate(360deg); } }

.cs-note {
    flex: 0 0 auto;
    margin: 0;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 14.5px;
    font-weight: 600;
    color: rgba(244, 232, 205, 0.62);
}

/* "+" on the coin balance in Shop / Inventory and on the menu: opens the coin store. */
.coin-add {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: 0 -9px 0 9px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #1f6e2e;
    background: linear-gradient(180deg, #67d673, #2f9d45);
    box-shadow: 0 2px 0 #1a5a27, inset 0 1px 0 rgba(255, 255, 255, 0.45);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.coin-add svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; }
.coin-add:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.mn-coins-plus {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin: 0 -8px 0 1px;
    border-radius: 50%;
    border: 1px solid #1f6e2e;
    background: linear-gradient(180deg, #67d673, #2f9d45);
    box-shadow: 0 2px 0 #1a5a27, inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.mn-coins .mn-coins-plus svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3.6; stroke-linecap: round; filter: none; }

/* ---- Result layer: buying / success / pending / failed ---- */
.cs-result {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 12px;
    box-sizing: border-box;
    background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255, 196, 92, 0.1), transparent 70%), rgba(10, 6, 2, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.cs-result.visible { opacity: 1; pointer-events: auto; }
.cs-result-box {
    --cs-state: #d4af37;
    --cs-state-glow: rgba(212, 175, 55, 0.3);
    position: relative;
    width: min(400px, 94vw);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 20px 16px;
    box-sizing: border-box;
    border-radius: 24px;
    border: 1.5px solid var(--cs-state);
    background: linear-gradient(180deg, rgba(44, 30, 14, 0.98), rgba(16, 10, 5, 0.98));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 34px var(--cs-state-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.35s cubic-bezier(0.22, 1.3, 0.36, 1);
}
.cs-result.visible .cs-result-box { transform: none; }
.cs-result-box[data-state="success"] { --cs-state: #f0c75a; --cs-state-glow: rgba(240, 199, 90, 0.45); }
.cs-result-box[data-state="pending"] { --cs-state: #f0a43a; --cs-state-glow: rgba(240, 164, 58, 0.35); }
.cs-result-box[data-state="failed"] { --cs-state: #e0574f; --cs-state-glow: rgba(224, 87, 79, 0.35); }
.cs-result-box.is-shaking { animation: csShake 0.5s ease; }
@keyframes csShake {
    15%, 55% { transform: translateX(-9px); }
    35%, 75% { transform: translateX(9px); }
    90% { transform: translateX(-3px); }
}

.cs-result-stage {
    position: relative;
    width: 150px;
    height: 104px;
    display: grid;
    place-items: center;
}
.cs-result-stage > svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5)); }
/* Turning sun rays behind the pack on success. */
.cs-rays {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 230px;
    height: 230px;
    margin: -115px 0 0 -115px;
    border-radius: 50%;
    background: repeating-conic-gradient(rgba(255, 220, 120, 0.32) 0 9deg, transparent 9deg 22.5deg);
    -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%);
    mask: radial-gradient(circle, #000 18%, transparent 68%);
    animation: csRays 9s linear infinite;
}
@keyframes csRays { to { transform: rotate(360deg); } }
.cs-result-box[data-state="success"] .cs-result-stage > svg { animation: csPop 0.6s cubic-bezier(0.22, 1.5, 0.36, 1); }
@keyframes csPop { 0% { transform: scale(0.3) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* Coins bursting out of the pack. */
.cs-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    pointer-events: none;
    opacity: 0;
    animation: csBurst 1s cubic-bezier(0.15, 0.7, 0.35, 1) forwards;
    animation-delay: var(--d, 0s);
}
.cs-burst .coin-svg { width: 100%; height: 100%; }
@keyframes csBurst {
    0% { opacity: 1; transform: translate(0, 0) scale(0.4) rotate(0deg); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r)); }
}
/* Busy: a coin flipping in place. */
.cs-flip { width: 72px; height: 72px; animation: csFlip 1.1s ease-in-out infinite; }
.cs-flip .coin-svg { width: 100%; height: 100%; }
@keyframes csFlip { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
.cs-state-icon {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35), 0 12px 24px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.35);
    animation: csPop 0.5s cubic-bezier(0.22, 1.5, 0.36, 1);
}
.cs-state-icon svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.cs-state-icon.is-failed { background: linear-gradient(180deg, #ff6b62, #b0202a); }
.cs-state-icon.is-pending { background: linear-gradient(180deg, #ffc35c, #c9741a); }
.cs-state-icon.is-pending svg { animation: csHourglass 2.4s ease-in-out infinite; }
@keyframes csHourglass { 0%, 40% { transform: rotate(0deg); } 60%, 100% { transform: rotate(180deg); } }

.cs-result-title {
    margin: 2px 0 0;
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.8px;
    line-height: 1.15;
    color: #fbe3a0;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(212, 175, 55, 0.3);
}
.cs-result-box[data-state="failed"] .cs-result-title { color: #ffb4ad; }
.cs-result-amount {
    display: none;
    align-items: center;
    gap: 6px;
    font: 800 30px/1 'Rubik', system-ui, sans-serif;
    font-variant-numeric: lining-nums tabular-nums;
    color: #ffe58a;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 210, 90, 0.55);
}
.cs-result-amount .coin-svg { width: 30px; height: 30px; }
.cs-result-box[data-state="success"] .cs-result-amount { display: flex; }
.cs-result-msg {
    margin: 0;
    max-width: 340px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(244, 232, 205, 0.85);
}
.cs-result-actions { display: flex; gap: 10px; margin-top: 6px; }
.cs-result-actions .tw-btn { min-width: 128px; height: 42px; }
.cs-result-actions .tw-btn[hidden],
.cs-result-box[data-state="busy"] .cs-result-actions { display: none; }
/* A coin flying from the result up to the balance. */
.cs-flyer {
    position: fixed;
    z-index: 3100;
    width: 26px;
    height: 26px;
    pointer-events: none;
}
.cs-flyer .coin-svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }

/* Narrow screens: the cards scroll sideways. */
@media (max-width: 760px) {
    .cs-packs { grid-template-columns: repeat(5, 40vw); }
}

/* ---- Settings: About card, links, Delete account ---- */
.op-chevron { flex: 0 0 auto; width: 26px; height: 26px; color: var(--tw-line); }
.op-chevron svg { width: 100%; height: 100%; }
.op-delete-link {
    align-self: center;
    margin-top: -2px;
    padding: 4px 10px;
    border: none;
    background: none;
    font-family: 'Mate SC', serif;
    font-size: 14px;
    letter-spacing: 0.4px;
    color: #ff9c94;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.op-delete-link[hidden] { display: none; }

/* Delete-account dialog */
.da-panel {
    width: min(440px, 92vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 22px 18px;
    text-align: center;
}
.da-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #ff6b62, #a3222a);
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 5px 0 #5c0f14, 0 10px 20px rgba(0, 0, 0, 0.45);
}
.da-icon svg { width: 32px; height: 32px; fill: #fff; }
.tw-ui .da-title {
    margin: 4px 0 0;
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-size: 22px;
    color: #ffc2bc;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.da-msg {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tw-text);
}
.da-error { margin: 0; min-height: 1em; color: #ff8a80; font: 600 14px/1.2 'Rubik', system-ui, sans-serif; }
.da-actions { display: flex; gap: 10px; width: 100%; }
.da-actions .tw-btn { flex: 1 1 0; }

/* Sign-in screen: privacy policy link under the buttons. */
.si-legal {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 244, 220, 0.8);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    text-align: center;
}
.si-legal-link {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: #ffe08a;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* ============================================================
   INTEGRITY BLOCK (#integrity-block): this copy of the app was refused by the server
   ============================================================ */
.ib-screen {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: none;
    place-items: center;
    padding: 16px;
    box-sizing: border-box;
    background:
        radial-gradient(ellipse 70% 70% at 50% 45%, rgba(24, 12, 4, 0.35), rgba(14, 7, 2, 0.85)),
        url('menu/Background.jpg') center / cover no-repeat, #1a0f06;
}
.ib-screen.visible { display: grid; }
.ib-card {
    width: min(560px, 100%);
    max-height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 22px 18px;
    box-sizing: border-box;
    border-radius: 24px;
    border: 1.5px solid rgba(212, 175, 55, 0.6);
    background: linear-gradient(180deg, rgba(44, 30, 14, 0.96), rgba(16, 10, 5, 0.97));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
}
.ib-logo { height: clamp(56px, 18vh, 96px); width: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55)); }
.ib-title {
    margin: 0;
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-size: 21px;
    line-height: 1.2;
    color: #fbe3a0;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.ib-msg {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(244, 232, 205, 0.88);
}
.ib-actions { display: flex; gap: 10px; margin-top: 6px; }
.ib-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: 14px;
    font-family: 'Mate SC', serif;
    font-size: 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ib-btn svg { width: 20px; height: 20px; }
.ib-btn:active { transform: translateY(3px); }
.ib-btn-ghost { color: #f4e8cd; background: rgba(255, 255, 255, 0.07); border: 1.5px solid rgba(212, 175, 55, 0.38); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.32); }
.ib-btn-green {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #67d673, #2f9d45);
    border: 1.5px solid #1f6e2e;
    box-shadow: 0 3px 0 #1a5a27, 0 8px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ---- XP row on the result screens (level badge, bar, +XP, bonuses, "Level up!") ---- */
.rs-xp {
    --star: 54px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    width: min(440px, 100%);
    margin: 0 auto 8px;
}
.rs-xp[hidden] { display: none; }
/* The star sits on the left end of the bar, so the bar comes out of its middle. */
.rs-xp-star { position: relative; z-index: 1; flex: 0 0 auto; width: var(--star); height: var(--star); display: grid; place-items: center; }
/* The star art has empty space around it in the image: scale it so the star itself fills the badge. */
.rs-xp-star img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scale(1.2); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.rs-xp-lv {
    position: relative;
    /* Same look as the level on the menu's star, a size up; the star's body sits a little low. */
    transform: translateY(2px);
    font: 700 15px/1 'Rubik', system-ui, sans-serif;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.6);
}
.rs-xp-track {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: calc(var(--star) / -2);
    height: 18px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--tw-line-soft);
}
.rs-xp-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, #8ff09a, #2f9d45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 10px rgba(110, 230, 130, 0.55);
}
.rs-xp-gain {
    flex: 0 0 auto;
    min-width: 64px;
    margin-left: 10px;
    text-align: right;
    font: 800 15px/1 'Rubik', system-ui, sans-serif;
    font-variant-numeric: lining-nums tabular-nums;
    color: #b7f5bf;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
/* "Level up! +70" ribbon that pops over the bar at each new level. */
.rs-xp-up {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    font: 800 13px/1 'Rubik', system-ui, sans-serif;
    color: #3a2203;
    background: linear-gradient(180deg, #fff1a8, #f2c23e);
    box-shadow: 0 3px 0 #a5740f, 0 6px 14px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.6);
    pointer-events: none;
}
.rs-xp-up b { text-transform: uppercase; letter-spacing: 0.6px; }
.rs-xp-up .coin-svg { width: 16px; height: 16px; }
.rs-xp.is-levelup .rs-xp-up { animation: rsLevelUp 1.9s cubic-bezier(0.22, 1.3, 0.36, 1) forwards; }
.rs-xp.is-levelup .rs-xp-star { animation: rsStarPop 0.6s cubic-bezier(0.22, 1.6, 0.36, 1); }
@keyframes rsLevelUp {
    0% { opacity: 0; transform: translate(-50%, 8px) scale(0.6); }
    18% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
    28%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -6px) scale(1); }
}
@keyframes rsStarPop { 40% { transform: scale(1.45) rotate(-12deg); filter: brightness(1.4); } }

/* ============================================================
   SHOP: level rewards, bundles, "View" (practice board), unlock celebration
   ============================================================ */
/* "View" pill on a card's stage. */
.skin-card-view {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 9px 0 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 236, 180, 0.55);
    background: rgba(18, 12, 5, 0.72);
    color: #fbe3a0;
    font: 700 11px/1 'Rubik', system-ui, sans-serif;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.skin-card-view svg { width: 15px; height: 15px; }
.skin-card-view:active { transform: scale(0.94); }

/* Level-locked button and the owned item's level tag. */
.skin-card-btn.is-level {
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #f6e2a8;
    background: linear-gradient(180deg, rgba(90, 64, 30, 0.95), rgba(46, 31, 13, 0.95));
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 3px 0 #2c1d08, inset 0 1px 0 rgba(255, 236, 180, 0.18);
}
.skin-card-btn .lock-svg, .ip-action .lock-svg { width: 16px; height: 16px; }
.skin-card-cost.cost-level .star-svg { width: 13px; height: 13px; color: #fff3b0; }

/* Bundle cards: twice as wide, with the set as one picture (buildBundleArt): the mini board in the
   set's colours on a spotlit table, its checkers on the points and its dice on the right half. */
.bundle-card { grid-column: span 2; }
.bundle-stage { overflow: hidden; }
.bundle-scene {
    --bs-die: 0.72;   /* the in-game dice, scaled down to the small board */
    position: relative;
    width: 100%;
    aspect-ratio: 2.1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 56% 46% at 50% 56%, rgba(255, 214, 130, 0.26), transparent 72%),
        radial-gradient(circle at 50% 26%, #3d2c1a, #0b0805 84%);
}
.bundle-scene .mb-tilt { top: 47%; width: 94%; aspect-ratio: 2.2 / 1; }
.bundle-scene .mb-shadow { left: 5%; right: 5%; bottom: 2%; height: 24%; }
.bs-dice {
    position: absolute;
    left: 73.5%;
    top: 49%;
    z-index: 2;
    display: flex;
    gap: 7px;
    transform: translate(-50%, -50%);
    perspective: 700px;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
}
/* "Save 25%" on a red sash across the stage's corner. */
.bundle-save {
    position: absolute;
    top: 15px;
    right: -34px;
    z-index: 3;
    width: 132px;
    padding: 5px 0 4px;
    transform: rotate(35deg);
    text-align: center;
    font: 800 11.5px/1 'Rubik', system-ui, sans-serif;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #ff6b62, #c5242d);
    border-top: 1.5px solid #ffe19a;
    border-bottom: 1.5px solid #ffe19a;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}
.bundle-name {
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-size: 16px;
    color: #fbe3a0;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
/* What's in the set, each ticked once owned. */
.bundle-parts {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: -2px;
}
.bundle-part {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 7px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(0, 0, 0, 0.32);
    color: #f1dfb2;
    font: 700 10.5px/1 'Rubik', system-ui, sans-serif;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
}
.bundle-part svg { width: 13px; height: 13px; color: #f6d77a; }
.bundle-part i { font-style: normal; color: #7ee08f; font-weight: 800; }
.bundle-part.is-owned { border-color: rgba(126, 224, 143, 0.5); color: #c8f2d0; }

.bundle-was {
    margin-right: 2px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.75;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}
.shop-confirm-preview:has(.bundle-scene) { width: 94%; }
.shop-confirm-preview .bundle-scene { --bs-die: 0.5; }

/* ---- The practice board page ---- */
#item-preview { z-index: 3002; }
.modal-container.ip-page {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    gap: 0;
    overflow: hidden;
    background: radial-gradient(ellipse 70% 70% at 40% 50%, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.55)), var(--panel-bg, #120b05);
}
/* The board copy uses the game's own classes and sizes; it's only for looking at. */
.ip-stage {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: min(100%, 412px); /* the game's own size, even on a taller (tablet) stage */
    align-self: center;
    container-type: size;
    display: flex;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#item-preview.visible .ip-stage { opacity: 1; transform: none; }
.ip-stage .game-board-and-trays { flex: 1 1 auto; }
.ip-panel {
    position: relative;
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 50px 14px 16px;
    box-sizing: border-box;
    text-align: center;
    background: var(--tw-panel);
    border-left: 1.5px solid var(--tw-line-soft);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.45), inset 1px 0 0 rgba(255, 255, 255, 0.06);
    transform: translateX(30px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
#item-preview.visible .ip-panel { transform: none; opacity: 1; }
.ip-panel .ip-close {
    position: absolute !important; top: 10px !important; right: 10px !important; width: 40px !important; height: 40px !important;
    background: var(--tw-close-bg) !important;
    border-color: var(--tw-close-line) !important;
    color: var(--tw-title) !important;
}
.ip-panel .ip-close svg { stroke: currentColor; }
.ip-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 700 11px/1 'Rubik', system-ui, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tw-line);
}
.ip-eye svg { width: 16px; height: 16px; display: block; }
.ip-title {
    margin: 0;
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-size: 21px;
    line-height: 1.15;
    color: var(--tw-title);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 16px var(--tw-glow);
    overflow-wrap: anywhere;
}
.ip-kind { font-family: 'Mate SC', serif; font-size: 14px; color: var(--tw-text); }
.ip-note { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--tw-muted); }
.ip-note:empty { display: none; }
.ip-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 44px;
    margin-top: 8px;
    border-radius: 13px;
    border: 1px solid transparent;
    font: 800 17px/1 'Rubik', system-ui, sans-serif;
    font-variant-numeric: lining-nums tabular-nums;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ip-action .coin-svg, .ip-action .ad-svg { width: 22px; height: 22px; }
.ip-action:active:not(:disabled) { transform: translateY(2px); }
.ip-action.is-buy { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); background: linear-gradient(180deg, #67d673, #2f9d45); border-color: #1f6e2e; box-shadow: 0 3px 0 #1a5a27, 0 6px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.ip-action.is-ad { color: #fff; background: linear-gradient(180deg, #62b0ff, #2f6fd6); border-color: #1d4593; box-shadow: 0 3px 0 #193c80, inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.ip-action.is-equip { color: var(--tw-title); background: rgba(255, 255, 255, 0.07); border-color: var(--tw-line-soft); font-family: 'Mate SC', serif; font-weight: 400; }
.ip-action.is-equipped { color: var(--tw-pri-ink); background: linear-gradient(180deg, var(--tw-pri-top), var(--tw-pri-bot)); border-color: var(--tw-pri-border); box-shadow: 0 3px 0 var(--tw-pri-edge); font-family: 'Mate SC', serif; font-weight: 400; cursor: default; }
.ip-action.is-level { color: var(--tw-text); background: var(--tw-well); border-color: var(--tw-line-soft); cursor: default; font-size: 15px; }

/* ---- Level unlock celebration ---- */
#unlock-modal { z-index: 4200; }
.ul-panel {
    width: min(380px, 92vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 22px 18px;
    text-align: center;
}
.ul-stage {
    position: relative;
    width: 150px;
    height: 110px;
    display: grid;
    place-items: center;
}
.ul-stage > .skin-preview { position: relative; z-index: 1; width: 130px; animation: csPop 0.6s cubic-bezier(0.22, 1.5, 0.36, 1); }
.ul-rays {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 240px;
    height: 240px;
    margin: -120px 0 0 -120px;
    border-radius: 50%;
    background: repeating-conic-gradient(rgba(255, 220, 120, 0.3) 0 9deg, transparent 9deg 22.5deg);
    -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%);
    mask: radial-gradient(circle, #000 18%, transparent 68%);
    animation: csRays 9s linear infinite;
}
.ul-stage .cs-burst { color: #ffe08a; }
.ul-stage .cs-burst svg { width: 100%; height: 100%; }
.ul-eyebrow { font: 700 12px/1 'Rubik', system-ui, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #d4af37; }
.ul-title {
    margin: 0;
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-size: 22px;
    color: #fbe3a0;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(212, 175, 55, 0.3);
}
.ul-name { font-family: 'Mate SC', serif; font-size: 17px; color: #fff; }
.ul-actions { display: flex; gap: 10px; width: 100%; margin-top: 6px; }
.ul-actions .tw-btn { flex: 1 1 0; }

/* ---- The level number on a level star (every place a star shows a level) ----
   The stars are faceted, so the number is bold white with a crisp dark outline (drawn with shadows,
   which every WebView supports), straight on the star: no plate or glow behind it, which made the
   small stars look like circles. */
:is(.mn-level, .mm-level, .fr-level, .ps-level, .iv-level, .gm-level, .rs-opp-level) span,
.rs-xp-lv,
.level-badge .level-number {
    position: relative;
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: lining-nums tabular-nums;
    color: #fff;
    background: none;
    text-shadow:
        0.075em 0 0 #2a1606, -0.075em 0 0 #2a1606, 0 0.075em 0 #2a1606, 0 -0.075em 0 #2a1606,
        0.055em 0.055em 0 #2a1606, -0.055em 0.055em 0 #2a1606, 0.055em -0.055em 0 #2a1606, -0.055em -0.055em 0 #2a1606,
        0 0.13em 0.08em rgba(0, 0, 0, 0.55);
    transform: translateY(0.06em); /* the star's body sits a little low in its picture */
}

/* Level stars, a little bigger everywhere (the small ones were hard to read). */
.mn-level { width: 30px; height: 30px; right: -10px; bottom: -9px; }
.fr-level { width: 30px; height: 30px; }
.rs-opp-level { width: 34px; height: 34px; }
.level-badge.ingame { width: 32px; height: 32px; right: -6px; bottom: -6px; }
.ps-level, .iv-level { width: 50px; height: 50px; right: -15px; bottom: -15px; }
.gm-level { width: 46px; height: 46px; right: -14px; bottom: -14px; }
.mm-level { width: 50px; height: 50px; right: -16px; bottom: -16px; }
.rs-xp { --star: 58px; }
.level-badge.ingame .level-number { font-size: 0.72rem; }

/* ============================================================
   OFFLINE (body.is-offline, set by the connection watch in script.js)
   Whatever needs the server ([data-needs-net]) turns slate grey with its art desaturated; the menu's
   picture buttons get a red "no signal" badge, and a tap shakes the button and says why.
   ============================================================ */
[data-needs-net="badge"] { position: relative; }
body.is-offline [data-needs-net] { cursor: not-allowed; }
body.is-offline [data-needs-net="badge"] {
    --dk-top: #8f969f;
    --dk-mid: #666d76;
    --dk-bot: #444950;
    --dk-edge: #2a2e33;
    border-color: #a3aab3;
}
body.is-offline [data-needs-net="badge"] > :not(.net-off-badge) { filter: grayscale(1) brightness(0.9); opacity: 0.72; }
body.is-offline [data-needs-net]:not([data-needs-net="badge"]) { filter: grayscale(1) brightness(0.85); opacity: 0.55; }
body.is-offline [data-needs-net]:hover,
body.is-offline [data-needs-net]:active,
body.is-offline [data-needs-net].is-pressed { transform: none; }
body.is-offline [data-needs-net].net-nope { animation: netNope 0.38s ease; }
@keyframes netNope {
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* Play Online: slate instead of lapis, a red dot and "No connection" under the title. */
body.is-offline .mn-mode-online[data-needs-net] {
    background:
        radial-gradient(120% 130% at 78% -12%, rgba(225, 230, 238, 0.32), rgba(225, 230, 238, 0) 56%),
        linear-gradient(180deg, #8f969f 0%, #666d76 50%, #444950 100%);
    box-shadow: 0 5px 0 #2a2e33, 0 16px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(20, 22, 26, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -14px 24px rgba(20, 22, 26, 0.4);
}
body.is-offline .mn-mode-online > .mn-mode-text { filter: none; opacity: 1; }
body.is-offline .mn-mode-online .mn-mode-bg::after { animation: none; opacity: 0; }
.mn-online-off { display: none; }
body.is-offline #mn-online-sub { display: none; }
body.is-offline .mn-online-off { display: inline; color: #ffe1dc; }
body.is-offline .mn-mode-online .mn-live {
    background: #ff6b5e;
    box-shadow: 0 0 0 2px rgba(60, 10, 10, 0.35), 0 0 8px rgba(255, 107, 94, 0.85);
    animation: none;
}
/* Friend-request counts can't be acted on offline. */
body.is-offline .mn-badge { display: none; }

.net-off-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 3;
    width: 24px;
    height: 24px;
    display: none;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #f0645a, #b3242c);
    box-shadow: 0 0 0 2px #fff1cf, 0 3px 6px rgba(0, 0, 0, 0.5);
    color: #fff;
    pointer-events: none;
}
.net-off-badge svg { width: 15px; height: 15px; }
body.is-offline .net-off-badge { display: grid; animation: netBadgeIn 0.4s cubic-bezier(0.22, 1.5, 0.36, 1); }
@keyframes netBadgeIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* "You're not connected" note under the sign-in buttons. */
.net-note { display: none; }
body.is-offline .net-note { display: flex; }
.si-net-note {
    align-items: center;
    gap: 7px;
    width: max-content;
    max-width: 92%;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 110, 95, 0.65);
    background: linear-gradient(180deg, rgba(78, 16, 13, 0.95), rgba(42, 8, 7, 0.95));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    color: #ffd3cc;
    font-family: 'Mate SC', serif;
    line-height: 1.2;
    text-align: center;
}
.si-net-note { margin: 0; padding: 6px 16px; font-size: 15px; }
body.is-offline .fr-online-pill { display: none; }

/* An open shop / coin store while offline: buying is greyed out (equipping what you own still works). */
body.is-offline .is-shop .skin-card-btn:not(.is-equip):not(.is-equipped) { filter: grayscale(1) brightness(0.85); opacity: 0.55; }
body.is-offline .cs-pack { filter: grayscale(1) brightness(0.8); opacity: 0.6; }

/* ============================================================
   INVITE FRIENDS + CHALLENGE LINKS (INVITE FRIENDS / CHALLENGE LINKS in script.js)
   ============================================================ */
.gift-svg { display: inline-block; flex: 0 0 auto; vertical-align: middle; }

/* ---- The menu's Invite button: warm gold, with a "Win" tag ---- */
.mn-dock-invite { --dk-top: #f4b946; --dk-mid: #d0841f; --dk-bot: #8f5410; --dk-edge: #5e3608; }
.mn-dock-btn[hidden] { display: none; }
.mn-dock-tag {
    position: absolute;
    top: -10px;
    left: 50%;
    padding: 3px 9px 2px;
    border-radius: 999px;
    border: 1.5px solid #fff1cf;
    background: linear-gradient(180deg, #ff6b62, #c5242d);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    color: #fff;
    font: 800 10px/1.1 'Rubik', system-ui, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    transform: translateX(-50%) rotate(-5deg);
    animation: mnTagPulse 2.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes mnTagPulse {
    0%, 100% { transform: translateX(-50%) rotate(-5deg) scale(1); }
    50% { transform: translateX(-50%) rotate(-5deg) scale(1.12); }
}
body.is-offline .mn-dock-tag { display: none; }

/* ---- The Invite page ---- */
.ivf-chip svg { width: 27px; height: 27px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.ivf-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.42);
    background: rgba(0, 0, 0, 0.38);
    color: #f6d77a;
    font: 700 13px/1 'Rubik', system-ui, sans-serif;
    white-space: nowrap;
}
.ivf-count-pill:empty { display: none; }
.ivf-count-pill .gift-svg { width: 16px; height: 16px; }
.ivf-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 14px; }
.ivf-main, .ivf-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.45) transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.ivf-main { flex: 1 1 auto; min-width: 0; padding: 12px 4px 4px 0; }
.ivf-side { flex: 0 0 264px; padding-top: 12px; }
.ivf-track-card {
    padding: 12px 14px 4px;
    border-radius: 18px;
    border: 1px solid var(--tw-line-faint);
    background: var(--tw-card);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 236, 180, 0.08);
}
.ivf-track-title {
    margin: 0;
    font-family: 'Cinzel Decorative', 'Mate SC', serif;
    font-size: 17px;
    color: #fbe3a0;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.ivf-track-sub {
    margin: 3px 0 10px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 15.5px;
    color: var(--tw-muted);
}
.ivf-loading { padding: 28px 0; text-align: center; font-family: 'Mate SC', serif; color: var(--tw-muted); }

/* The reward track: a card per reward above a progress bar with a gift marker under each one. */
.ivt-cards { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 10px; margin-bottom: 18px; }
.ivt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 7px 7px 8px;
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    background: linear-gradient(180deg, rgba(64, 44, 21, 0.78), rgba(22, 15, 8, 0.88));
}
.ivt-card.is-next { border-color: #e0b955; box-shadow: 0 0 18px rgba(240, 199, 90, 0.38); animation: ivtNext 2.4s ease-in-out infinite; }
@keyframes ivtNext { 50% { box-shadow: 0 0 26px rgba(240, 199, 90, 0.6); } }
.ivt-card.is-won { border-color: rgba(126, 224, 143, 0.6); }
.ivt-card.is-locked .ivt-stage { filter: saturate(0.5) brightness(0.72); }
.ivt-stage { position: relative; width: 100%; border-radius: 10px; overflow: hidden; }
.ivt-check {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #67d673, #2f9d45);
    box-shadow: 0 0 0 2px #fff1cf, 0 2px 5px rgba(0, 0, 0, 0.5);
    color: #fff;
    font: 800 14px/1 'Rubik', system-ui, sans-serif;
}
.ivt-name { font-family: 'Mate SC', serif; font-size: 13px; line-height: 1.15; color: #f4e8cd; text-align: center; }
.ivt-state {
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--tw-muted);
    font: 800 10.5px/1.1 'Rubik', system-ui, sans-serif;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.ivt-card.is-next .ivt-state { background: linear-gradient(180deg, #f6da78, #c99a2e); color: #2a1c06; }
.ivt-card.is-won .ivt-state { background: rgba(126, 224, 143, 0.2); color: #b6f0c6; }
.ivt-bar {
    position: relative;
    height: 14px;
    margin: 0 6px 30px;
    border-radius: 999px;
    border: 1.5px solid rgba(241, 201, 104, 0.55);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(30, 20, 8, 0.6));
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
.ivt-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #b9861f, #f6da78 70%, #fff3c4);
    box-shadow: 0 0 12px rgba(246, 218, 120, 0.7);
}
.ivt-fill::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, rgba(255, 240, 180, 0.8) 40%, rgba(255, 240, 180, 0) 72%);
}
.ivt-node {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%);
}
.ivt-node-dot {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid rgba(241, 201, 104, 0.55);
    background: linear-gradient(180deg, #4a3519, #1f1409);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.ivt-node-dot .gift-svg { width: 18px; height: 18px; filter: grayscale(0.85) brightness(0.8); transition: filter 0.3s ease; }
.ivt-node.is-reached .ivt-node-dot {
    border-color: #fff1cf;
    background: linear-gradient(180deg, #f6da78, #c99a2e);
    box-shadow: 0 0 14px rgba(246, 218, 120, 0.85), 0 2px 6px rgba(0, 0, 0, 0.5);
    animation: ivtPop 0.5s cubic-bezier(0.22, 1.6, 0.36, 1);
}
.ivt-node.is-reached .ivt-node-dot .gift-svg { filter: none; }
@keyframes ivtPop { 40% { transform: scale(1.3); } }
.ivt-node-label {
    position: absolute;
    top: 33px;
    white-space: nowrap;
    color: var(--tw-muted);
    font: 700 11px/1 'Rubik', system-ui, sans-serif;
}
.ivt-node.is-reached .ivt-node-label { color: #f6d77a; }

/* Side: your code and how to share it, the challenge button, a new player's gift or code box. */
.ivf-code-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 18px;
    border: 1.5px solid rgba(212, 175, 55, 0.5);
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255, 214, 130, 0.14), transparent 70%),
        linear-gradient(180deg, rgba(64, 44, 21, 0.85), rgba(22, 15, 8, 0.92));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
    text-align: center;
}
.ivf-label { color: #d4af37; font: 700 11px/1.1 'Rubik', system-ui, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; }
.ivf-code {
    padding: 8px 16px;
    border-radius: 12px;
    border: 1.5px dashed rgba(241, 201, 104, 0.7);
    background: #0e0905;
    color: #fff4cc;
    font: 800 28px/1 'Rubik', system-ui, sans-serif;
    letter-spacing: 6px;
    text-shadow: 0 0 12px rgba(246, 218, 120, 0.4);
    user-select: all;
}
.ivf-share { display: flex; gap: 8px; width: 100%; }
.ivf-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1.5px solid transparent;
    color: #fff;
    font: 15px/1 'Mate SC', serif;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.15s ease;
}
.ivf-btn svg { flex: 0 0 auto; width: 18px; height: 18px; }
.ivf-btn:active { transform: translateY(2px); }
.ivf-btn:disabled { filter: saturate(0.4) brightness(0.8); }
.ivf-btn.is-whatsapp {
    background: linear-gradient(180deg, #3fd47a, #1e9e55);
    border-color: #14703b;
    box-shadow: 0 3px 0 #0f5a2f, inset 0 1px 0 rgba(255, 255, 255, 0.35);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.ivf-btn.is-copy {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(212, 175, 55, 0.45);
    color: #fbe3a0;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
.ivf-btn.is-gold {
    background: linear-gradient(180deg, #f6da78, #c99a2e);
    border-color: #8a6a17;
    color: #2a1c06;
    box-shadow: 0 3px 0 #6b4f10, inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.ivf-btn.is-gold { flex: 0 0 auto; padding: 0 16px; }
.ivf-how { margin: 0; color: var(--tw-muted); font: 700 14px/1.25 'Cormorant Garamond', serif; }
.ivf-mine, .ivf-enter {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    background: rgba(0, 0, 0, 0.3);
}
.ivf-mine { border-color: rgba(126, 224, 143, 0.45); }
.ivf-mine[hidden], .ivf-enter[hidden] { display: none; }
.ivf-mine-text { color: #f4e8cd; font: 14px/1.2 'Mate SC', serif; }
.ivf-games { height: 10px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.ivf-games i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3fd47a, #9ef0b9); transition: width 0.8s ease; }
.ivf-enter-row { display: flex; gap: 8px; }
.ivf-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1.5px solid rgba(241, 201, 104, 0.55);
    background: #0e0905;
    color: #fff4cc;
    font: 800 18px/1 'Rubik', system-ui, sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.ivf-input::placeholder { color: rgba(255, 244, 204, 0.3); }
.ivf-enter-err { color: #ff8a80; font: 600 13px/1.2 'Rubik', system-ui, sans-serif; }
.ivf-enter-err:empty { display: none; }

/* Friends who joined. */
.ivf-friends { padding: 10px 12px; border-radius: 16px; border: 1px solid var(--tw-line-faint); background: rgba(0, 0, 0, 0.22); }
.ivf-friends-head { margin-bottom: 8px; color: #fbe3a0; font: 15px/1 'Mate SC', serif; }
.ivf-friends-empty { color: var(--tw-muted); font: 700 15px/1.2 'Cormorant Garamond', serif; }
.ivf-friend-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ivf-friend {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 4px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    background: rgba(255, 255, 255, 0.06);
}
.ivf-friend.is-done { border-color: rgba(126, 224, 143, 0.55); }
.ivf-friend-avatar { width: 26px; height: 26px; border-radius: 50%; background: #3a2a14 center / cover no-repeat; }
.ivf-friend-name { color: #f4e8cd; font: 13px/1 'Mate SC', serif; }
.ivf-friend-state { color: #f6d77a; font: 800 11px/1 'Rubik', system-ui, sans-serif; }
.ivf-friend.is-done .ivf-friend-state { color: #7ee08f; }
.ivf-coins-art {
    aspect-ratio: 1.5 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 10px;
    background: radial-gradient(circle at 50% 35%, #3d2c1a, #0b0805);
    color: #fff4cc;
    font: 800 20px/1 'Rubik', system-ui, sans-serif;
}
.ivf-coins-art .coin-svg { width: 40px; height: 40px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5)); }

/* ---- A reward: the prize pops, a ribbon banner unfurls under it, then the bar fills ---- */
#invite-reward-modal { z-index: 4300; }
.ir-panel {
    width: min(430px, 92vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 22px 16px;
    text-align: center;
}
.ir-stage { position: relative; width: 170px; height: 112px; display: grid; place-items: center; }
.ir-stage > .skin-preview, .ir-stage > .ivf-coins-art, .ir-stage > .ir-gift-art { position: relative; z-index: 1; width: 150px; }
.ir-gift-art { display: grid; place-items: center; }
.ir-stage > .ivf-coins-art { background: none; gap: 8px; font-size: 30px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(246, 218, 120, 0.5); }
.ir-stage > .ivf-coins-art .coin-svg { width: 62px; height: 62px; }
/* Checkers and dice stand straight on the stage, among the rays. */
.ir-stage > .skin-preview.checkers-preview, .ir-stage > .skin-preview.dice-preview { background: none; box-shadow: none; overflow: visible; }
.ir-gift-art svg { width: 92px; height: 92px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); }
.ir-stage .cs-burst { color: #ffe08a; }
.ir-stage .cs-burst svg { width: 100%; height: 100%; }
.ir-modal.ir-play .ir-stage > .skin-preview,
.ir-modal.ir-play .ir-stage > .ivf-coins-art,
.ir-modal.ir-play .ir-stage > .ir-gift-art { animation: csPop 0.6s cubic-bezier(0.22, 1.5, 0.36, 1) both; }
.ir-banner {
    position: relative;
    z-index: 2;
    margin-top: -12px;
    padding: 8px 38px 8px;
    border-top: 1.5px solid #ffe19a;
    border-bottom: 1.5px solid #ffe19a;
    background: linear-gradient(180deg, #e8483e, #a91f27);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%);
    color: #fff;
    font: 800 16px/1 'Rubik', system-ui, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}
.ir-modal.ir-play .ir-banner { animation: irBanner 0.55s 0.35s cubic-bezier(0.22, 1.4, 0.36, 1) both; }
@keyframes irBanner {
    from { transform: scaleX(0.1); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.ir-name {
    margin-top: 4px;
    color: #fbe3a0;
    font: 20px/1.15 'Cinzel Decorative', 'Mate SC', serif;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.ir-msg { margin: 0; color: var(--tw-muted); font: 700 16px/1.25 'Cormorant Garamond', serif; }
.ir-modal.ir-play .ir-name, .ir-modal.ir-play .ir-msg { animation: irRise 0.45s 0.6s ease both; }
.ir-modal.ir-play .ir-progress, .ir-modal.ir-play .ir-actions { animation: irRise 0.45s 0.85s ease both; }
@keyframes irRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ir-progress { width: 100%; margin-top: 2px; }
.ir-progress .ivt-bar { margin: 8px 18px 28px; }
.ir-progress-label { color: #f6d77a; font: 700 12.5px/1.25 'Rubik', system-ui, sans-serif; }
.ir-games {
    position: relative;
    height: 14px;
    margin: 8px 12px 8px;
    border-radius: 999px;
    border: 1.5px solid rgba(241, 201, 104, 0.55);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(30, 20, 8, 0.6));
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
.ir-games i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #2fb866, #9ef0b9);
    box-shadow: 0 0 10px rgba(126, 224, 143, 0.6);
}
.ir-games span { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: rgba(241, 201, 104, 0.7); }
.ir-actions { display: flex; gap: 10px; width: 100%; margin-top: 8px; }
.ir-actions .tw-btn { flex: 1 1 0; }
.ir-actions .tw-btn[hidden] { display: none; }

/* ---- Shop: invite rewards ask for friends instead of coins ---- */
/* Red like the gift (green buys with coins, blue watches ads), with friends counted / needed. */
.skin-card-btn.is-invite {
    color: #fff;
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 800;
    font-size: 15px;
    font-variant-numeric: lining-nums tabular-nums;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    background: linear-gradient(180deg, #ff7f6e, #d8362e);
    border-color: #8f1f1a;
    box-shadow: 0 3px 0 #741812, 0 6px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.skin-card-btn .gift-svg, .ip-action .gift-svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
/* The gift's own red would vanish on the red button: a cream box with a red ribbon there. */
.skin-card-btn.is-invite .gift-svg rect:nth-of-type(1) { fill: #fff3d6; }
.skin-card-btn.is-invite .gift-svg rect:nth-of-type(2) { fill: #ffffff; }
.skin-card-btn.is-invite .gift-svg rect:nth-of-type(3) { fill: #e2453c; }
.skin-card-cost.cost-invite { border: 1px solid rgba(240, 199, 90, 0.55); background: rgba(240, 199, 90, 0.14); color: #f6d77a; }
.skin-card-cost .gift-svg { width: 1.3em; height: 1.3em; }
.ip-action.is-invite {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #ff7f6e, #d8362e);
    border-color: #8f1f1a;
    box-shadow: 0 3px 0 #741812, inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.ip-action.is-invite .gift-svg rect:nth-of-type(1) { fill: #fff3d6; }
.ip-action.is-invite .gift-svg rect:nth-of-type(2) { fill: #ffffff; }
.ip-action.is-invite .gift-svg rect:nth-of-type(3) { fill: #e2453c; }

/* ---- Play Online's three choices (same shape as the Vs Computer levels) ---- */
.mn-mode.mn-diff.mn-opt { width: 226px; padding-left: 15px; }
.mn-opt .mn-mode-text { max-width: 140px; }
.mn-opt .mn-mode-title { font-size: 17px; }
.mn-opt .mn-mode-art { width: 76px; height: 73px; right: 0; top: -10px; }
.mn-opt-random {
    background:
        radial-gradient(120% 130% at 78% -12%, rgba(150, 190, 255, 0.5), rgba(150, 190, 255, 0) 56%),
        linear-gradient(180deg, #4a74e0 0%, #2c4cb0 50%, #1b2e7a 100%);
    box-shadow: 0 5px 0 #121e52, 0 16px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(8, 14, 52, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.32), inset 0 -14px 24px rgba(8, 16, 60, 0.4);
}
.mn-opt-invite {
    background:
        radial-gradient(120% 130% at 78% -12%, rgba(222, 190, 255, 0.45), rgba(222, 190, 255, 0) 56%),
        linear-gradient(180deg, #a774e0 0%, #7446b8 50%, #4c2785 100%);
    box-shadow: 0 5px 0 #331a5c, 0 16px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(40, 14, 70, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.32), inset 0 -14px 24px rgba(40, 14, 70, 0.4);
}
.mn-opt-code {
    background:
        radial-gradient(120% 130% at 78% -12%, rgba(170, 255, 245, 0.42), rgba(170, 255, 245, 0) 56%),
        linear-gradient(180deg, #2fbcb4 0%, #1b8d8a 50%, #10605e 100%);
    box-shadow: 0 5px 0 #0a4240, 0 16px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(3, 40, 38, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -14px 24px rgba(3, 40, 38, 0.4);
}
.mn-opt-random:active, .mn-opt-random.is-pressed { box-shadow: 0 1px 0 #121e52, 0 8px 16px rgba(0, 0, 0, 0.38), inset 0 2px 0 rgba(255, 255, 255, 0.32); }
.mn-opt-invite:active, .mn-opt-invite.is-pressed { box-shadow: 0 1px 0 #331a5c, 0 8px 16px rgba(0, 0, 0, 0.38), inset 0 2px 0 rgba(255, 255, 255, 0.32); }
.mn-opt-code:active, .mn-opt-code.is-pressed { box-shadow: 0 1px 0 #0a4240, 0 8px 16px rgba(0, 0, 0, 0.38), inset 0 2px 0 rgba(255, 255, 255, 0.3); }
.mn-opt-invite .mn-mode-art { animation-delay: -1.4s; }
.mn-opt-code .mn-mode-art { animation-delay: -2.8s; }
body.is-offline .mn-opt[data-needs-net] {
    background:
        radial-gradient(120% 130% at 78% -12%, rgba(225, 230, 238, 0.32), rgba(225, 230, 238, 0) 56%),
        linear-gradient(180deg, #8f969f 0%, #666d76 50%, #444950 100%);
    box-shadow: 0 5px 0 #2a2e33, 0 16px 30px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.28);
}

/* ---- The search screen when inviting by link: your code and how to send it ---- */
.mm-share { display: none; align-items: center; gap: 8px; }
.is-challenge .mm-share { display: flex; }
.is-challenge:not(.is-ready) .mm-share { opacity: 0.5; pointer-events: none; }
#matchmaking-container.mm-screen.is-challenge { padding: 14px 0 14px; }
.is-challenge .mm-footer { gap: 9px; }
.mm-share-code {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 14px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1.5px dashed rgba(241, 201, 104, 0.75);
    background: rgba(14, 9, 5, 0.85);
}
.mm-share-code span { color: #d4af37; font: 700 10.5px/1.1 'Rubik', system-ui, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; }
.mm-share-code b { color: #fff4cc; font: 800 24px/1 'Rubik', system-ui, sans-serif; letter-spacing: 5px; text-shadow: 0 0 12px rgba(246, 218, 120, 0.4); user-select: all; }
.mm-share-btn {
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1.5px solid transparent;
    color: #fff;
    font: 16px/1 'Mate SC', serif;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.15s ease;
}
.mm-share-btn svg { width: 19px; height: 19px; }
.mm-share-btn:active { transform: translateY(2px); }
.mm-share-btn.is-share {
    color: #2a1c06;
    background: linear-gradient(180deg, #f6da78, #c99a2e);
    border-color: #8a6a17;
    box-shadow: 0 3px 0 #6b4f10, inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.mm-share-btn.is-wa {
    background: linear-gradient(180deg, #3fd47a, #1e9e55);
    border-color: #14703b;
    box-shadow: 0 3px 0 #0f5a2f, inset 0 1px 0 rgba(255, 255, 255, 0.35);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.mm-share-btn.is-copy {
    color: #fbe3a0;
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}
.mm-status .mm-wait-text { letter-spacing: 0.3px; }

/* ---- Join by Code ---- */
#join-code-sheet { z-index: 4250; }
.jc-panel {
    width: min(380px, 92vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 22px 16px;
    text-align: center;
}
.jc-art svg { display: block; width: 92px; height: 88px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); animation: mnFloat 5s ease-in-out infinite; }
.jc-title { margin: 0; color: #fbe3a0; font: 21px/1.1 'Cinzel Decorative', 'Mate SC', serif; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.jc-msg { margin: 0; color: var(--tw-muted); font: 700 16px/1.25 'Cormorant Garamond', serif; }
.jc-input {
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    padding: 0 14px;
    border-radius: 14px;
    border: 1.5px dashed rgba(241, 201, 104, 0.75);
    background: #0e0905;
    color: #fff4cc;
    font: 800 28px/1 'Rubik', system-ui, sans-serif;
    letter-spacing: 8px;
    text-align: center;
    text-transform: uppercase;
}
.jc-input::placeholder { color: rgba(255, 244, 204, 0.22); }
.jc-input:focus { outline: none; border-style: solid; box-shadow: 0 0 0 3px rgba(246, 218, 120, 0.25); }
.jc-err { color: #ff8a80; font: 600 13px/1.2 'Rubik', system-ui, sans-serif; }
.jc-err:empty { display: none; }
.jc-actions { display: flex; gap: 10px; width: 100%; margin-top: 4px; }
.jc-actions .tw-btn { flex: 1 1 0; }

/* ---- A new player's welcome: the inviter, and the path to the gift (Game 1 -> Game 2 -> gift) ---- */
.ir-face {
    position: relative;
    z-index: 1;
    width: 92px;
    height: 92px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 24px;
    background: linear-gradient(145deg, #fff0b8, #d9a83c 42%, #7b5414);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55), 0 0 26px rgba(255, 196, 80, 0.45);
}
.ir-face-pic { display: block; width: 100%; height: 100%; border-radius: 19px; background: #fff url('menu/guest-icon.png') center / cover no-repeat; }
.ir-modal.ir-play .ir-face { animation: csPop 0.6s cubic-bezier(0.22, 1.5, 0.36, 1) both; }
.ir-name.is-plain { font-family: 'Mate SC', serif; font-size: 21px; letter-spacing: 0.4px; }
.ir-path {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 6px 0 2px;
}
.ir-step { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; }
.ir-token {
    position: relative;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px dashed rgba(241, 201, 104, 0.6);
    background: radial-gradient(circle at 50% 35%, #3a2a14, #140d05);
    color: #f6d77a;
    font: 800 20px/1 'Rubik', system-ui, sans-serif;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
.ir-token i { display: none; font-style: normal; }
.ir-token .gift-svg { width: 28px; height: 28px; filter: grayscale(0.4) brightness(0.85); }
.ir-step-label { color: var(--tw-muted); font: 700 11.5px/1.15 'Rubik', system-ui, sans-serif; letter-spacing: 0.3px; text-align: center; }
.ir-step.is-prize .ir-token { width: 52px; height: 52px; margin-top: -3px; border-style: solid; border-color: rgba(241, 201, 104, 0.85); background: radial-gradient(circle at 50% 35%, #5a3f19, #1c1206); box-shadow: 0 0 16px rgba(246, 218, 120, 0.35), inset 0 2px 6px rgba(0, 0, 0, 0.5); animation: irPrize 2s ease-in-out infinite; }
.ir-step.is-prize .ir-step-label { color: #f6d77a; }
@keyframes irPrize { 50% { box-shadow: 0 0 26px rgba(246, 218, 120, 0.7), inset 0 2px 6px rgba(0, 0, 0, 0.5); transform: scale(1.06); } }
.ir-line {
    flex: 0 0 28px;
    height: 4px;
    margin-top: 21px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, rgba(241, 201, 104, 0.45) 0 5px, transparent 5px 9px);
}
/* Done steps: a green checker-like token with a tick. When the gift is earned they light up one by one. */
.ir-step.is-done .ir-token { border: 2px solid #fff1cf; background: linear-gradient(180deg, #67d673, #2f9d45); color: #fff; box-shadow: 0 0 14px rgba(126, 224, 143, 0.6); }
.ir-step.is-done .ir-token b { display: none; }
.ir-step.is-done .ir-token i { display: block; font-size: 22px; }
.ir-step.is-done .ir-step-label { color: #b6f0c6; }
.ir-line.is-done { background: linear-gradient(90deg, #67d673, #2f9d45); }
.ir-step.is-prize.is-done .ir-token { background: linear-gradient(180deg, #f6da78, #c99a2e); border-color: #fff1cf; animation: none; box-shadow: 0 0 22px rgba(246, 218, 120, 0.85); }
.ir-step.is-prize.is-done .ir-token .gift-svg { filter: none; }
.ir-path.is-earned:not(.is-playing) .ir-step .ir-token { opacity: 0.35; }
.ir-path.is-earned.is-playing .ir-step .ir-token { animation: irStep 0.5s cubic-bezier(0.22, 1.6, 0.36, 1) both; animation-delay: calc(var(--i) * 0.28s); }
@keyframes irStep { from { transform: scale(0.4); opacity: 0.35; } to { transform: none; opacity: 1; } }