* { box-sizing: border-box; }

:root {
    /* === Existing colors (DO NOT MODIFY) === */
    --ms-ink: #1e1828;
    --ms-ink-muted: #5c5470;
    --ms-cream: #faf6ee;
    --ms-cream-deep: #e8dfd0;
    --ms-gold: #b8943a;
    --ms-gold-bright: #d4bc6a;
    --ms-violet: #4a3d6b;
    --ms-violet-deep: #2a2238;
    --ms-color-violet-lighter: #f2ecff;
    --ms-color-gold-light: #ffe6a6;
    --ms-color-brown-dark: #2b1b05;
    --ms-color-cream-off: #fff9f0;
    --ms-color-red-soft: #ffd0d0;
    --ms-color-border-light: #c4bdd4;
    --ms-color-purple-muted: #b8afc8;
    --ms-color-gold-mid: #e8c86a;
    --ms-color-gold-dark: #d5a746;
    --ms-color-cream-ivory: #fff8f0;
    --ms-color-cream-warm: #fff8e0;
    --ms-color-gold-light-2: #ffe9a8;
    --ms-color-gold-light-3: #ffe8b8;
    --ms-color-gold-glow: #ffd87a;
    --ms-color-cream-off-2: #fff8e4;
    --ms-color-white: #ffffff;
    --ms-color-peach-light: #fff4d4;
    --ms-color-orange-bright: #ff6a2e;
    --ms-color-violet-pale: #faf8ff;
    --ms-color-cyan-pale: #f4fdff;
    --ms-color-lavender-pale: #f0ecf8;
    --ms-color-lavender-pale-2: #f0e8ff;
    --ms-color-lavender-soft: #e8e4f0;
    --ms-color-lavender-soft-2: #e8e0f0;
    --ms-color-lavender-muted: #d9d0ea;
    --ms-color-slate-pale: #c8d0e0;
    --ms-color-gray-dark: #8a8298;
    --ms-color-gray-mid: #7a7288;
    --ms-color-gray-warm: #6a6278;
    --ms-color-dark-navy: #1a1420;
    --ms-color-dark-bg-2: #1a1520;
    --ms-color-brown: #2f2106;
    --ms-color-peach-warm: #fff0c8;
    --ms-color-gold-sand: #e8b84a;
    --ms-color-blue: #007bff;
    --ms-color-purple-deep: #4f42a0;
    --ms-color-gold-medium: #a8892e;
    --ms-color-cream-pale: #f5ead0;
    --ms-color-lavender-soft-3: #f0e6ff;
    --ms-color-lavender-muted-2: #a89bc0;
    --ms-color-lavender-light: #e8e0f8;
    --ms-color-red-soft-2: #c45a5a;
    --ms-color-red-mid: #e07070;
    --ms-color-red-light: #f09090;
    --ms-color-cream-off-3: #fff7e4;
    --ms-color-green: #7fdca8;
    --ms-color-red-coral: #ff9a9a;
    --ms-color-mint-pale: #e8fff4;
    --ms-color-cream-off-4: #fff4e0;
    --ms-color-gray-purple: #8f889c;
    --ms-color-gray-lavender: #a098b0;
    --ms-color-lavender-mid: #d4cce8;
    --ms-color-lavender-bright: #b9afca;
    --ms-color-lavender-pale-3: #ded4f0;
    --ms-color-lavender-soft-4: #d8caef;
    --ms-color-cream-peachy: #fff6ec;
    --ms-color-pink-pale: #ffe8f4;
    --ms-color-cyan-pale-2: #e6f7ff;
    --ms-color-cream-peachy-2: #fffbf5;
    --ms-color-pink-pale-2: #ffeef8;
    --ms-color-cyan-pale-3: #eef8ff;
    --ms-color-lavender-light-2: #e8e0ff;
    --ms-color-lavender-soft-5: #d8d0e8;
    --ms-color-dark-navy-alt: #16131f;
    --ms-color-dark-navy-alt-2: #1a1430;
    --ms-color-dark-navy-alt-3: #120e1c;
    --ms-color-dark-navy-alt-4: #0a0814;
    --ms-color-purple-dark-2: #2a2240;
    --ms-color-purple-dark-3: #151018;
    --ms-color-purple-dark-4: #0c0a10;
    --ms-color-dark-purple: #241830;
    --ms-color-purple-medium: #4a3a6a;
    --ms-color-gray-slate: #374151;
    --ms-color-brown-dark-2: #7a5a28;
    --ms-color-brown-dark-3: #7a5a30;
     --ms-color-gray-warm-3: #9a92ae;
     --ms-color-orange-rust: #c45c2a;
     --ms-color-mint: #c8f5d8;
     --ms-color-border-light-2: #d4daea;
     --ms-color-lavender-dark: #e8dfff;
     --ms-color-lavender-faint: #ece8f4;
     --ms-color-cream-warm-2: #f5e6b8;
     --ms-color-lavender-very-pale: #f5ecff;
     --ms-color-lavender-very-pale-2: #f6f0ff;
     --ms-color-red-pale: #ffc9c9;
    --ms-color-cream-pale-7: #fff7e8;
    --ms-color-cream-pale-8: #fffef8;
    --ms-alert-success-bg: #e7faed;
    --ms-alert-success-text: #146a33;
    --ms-alert-error-bg: #ffe8e8;
    --ms-alert-error-text: #902a2a;
    --ms-alert-success-2-bg: #dcfce3;
    --ms-alert-success-2-text: #166534;
    --ms-alert-success-2-border: #4ade80;
    --ms-alert-danger-bg: #fee2e2;
    --ms-alert-danger-text: #991b1b;
     --ms-alert-danger-border: #f87171;
     --ms-color-red-dark: #8a2f2f;
    --ms-color-purple-grad: #5d4d85;
    --ms-color-cream-gradient: #e8d4c8;
    --ms-page-bg: #f3f0eb;
    --ms-card-border: rgba(74, 61, 107, 0.14);
    --ms-shadow: rgba(30, 24, 48, 0.08);
    /* Textured button skins (SVG art + optional swap to PNG) */
    --ms-btn-tex-violet: url("/assets/ui/button-texture-violet.svg");
    --ms-btn-tex-gold: url("/assets/ui/button-texture-gold.svg");

    /* === T2.1: Spacing Scale === */
    --ms-spacing-xs: 0.25rem;   /* 4px */
    --ms-spacing-sm: 0.5rem;    /* 8px */
    --ms-spacing-10: 0.625rem;  /* 10px */
    --ms-spacing-12: 0.75rem;   /* 12px */
    --ms-spacing-md: 1rem;      /* 16px */
    --ms-spacing-20: 1.25rem;   /* 20px */
    --ms-spacing-lg: 1.5rem;    /* 24px */
    --ms-spacing-xl: 2rem;      /* 32px */
    --ms-spacing-2xl: 3rem;     /* 48px */

    /* === T2.2: Border Radius === */
    --ms-radius-sm: 4px;
    --ms-radius-md: 8px;
    --ms-radius-lg: 12px;
    --ms-radius-xl: 16px;
    --ms-radius-full: 9999px;

    /* === T2.3: Shadows === */
    --ms-shadow-sm: 0 1px 2px rgba(30, 24, 48, 0.08);
    --ms-shadow-md: 0 4px 6px rgba(30, 24, 48, 0.1);
    --ms-shadow-lg: 0 10px 15px rgba(30, 24, 48, 0.15);
    --ms-shadow-xl: 0 20px 25px rgba(30, 24, 48, 0.2);

    /* === T2.4: Z-index Scale === */
    --ms-z-base: 1;
    --ms-z-dropdown: 100;
    --ms-z-sticky: 200;
    --ms-z-modal: 1000;
    --ms-z-tooltip: 10000;

    /* === T2.5: Transitions === */
    --ms-transition-fast: 150ms ease;
    --ms-transition-base: 200ms ease;
    --ms-transition-slow: 300ms ease;

    /* === T2.6: Semantic Colors === */
    --ms-color-dark-bg: #0e0818;
    --ms-color-violet-medium: #342a4a;
    --ms-color-cream-light: #fff8ec;
    --ms-color-violet-light: #c8b8e8;
    --ms-color-white-90: rgba(255, 255, 255, 0.9);
}

body {
    margin: 0;
    font-family: "Source Sans 3", "Segoe UI", sans-serif;
    background: var(--ms-page-bg);
    color: var(--ms-ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Lobby / auth: AI page backdrops (see RoomController + AuthController body_class) */
body.page-shell {
    background-color: var(--ms-page-bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
}
body.page-shell--lobby {
    background-image:
        linear-gradient(180deg, rgba(245, 241, 234, 0.9) 0%, rgba(240, 234, 224, 0.82) 42%, rgba(232, 224, 212, 0.94) 100%),
        url("/assets/site-bg-lobby.png");
}
body.page-shell--auth {
    background-color: var(--ms-color-dark-bg);
    background-image:
        radial-gradient(ellipse 120% 90% at 50% -10%, rgba(255, 220, 170, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 80% 60% at 100% 80%, rgba(140, 110, 200, 0.2) 0%, transparent 45%),
        linear-gradient(165deg, rgba(12, 6, 22, 0.82) 0%, rgba(36, 24, 58, 0.5) 38%, rgba(248, 242, 255, 0.93) 100%),
        url("/assets/site-login-atmosphere.png");
    background-size: cover, cover, cover, cover;
    background-position: center, center, center, center center;
    background-repeat: no-repeat;
}
@media (max-width: 768px) {
    body.page-shell {
        background-attachment: scroll;
    }
}

.ms-icon {
    display: block; 
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

h1, h2, .prompt {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 700;
    font-optical-sizing: auto;
    letter-spacing: 0.03em;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container { width: min(1080px, 92vw); margin: 0 auto; }

Header: AI banner art + HTML title overlay (readable on mobile) */
.site-header {
    color: var(--ms-color-white);
    flex-shrink: 0;
}
.site-header__brand {
    display: block; 
    text-decoration: none;
    color: inherit;
    outline: none;
}
.site-header__brand:focus-visible .site-header__backdrop {
    outline: 3px solid rgba(232, 200, 120, 0.95);
    outline-offset: 0;
}
.site-header__backdrop {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-height: clamp(6.25rem, 18vw, 9rem);
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 120% at 50% 50%, var(--ms-color-dark-navy-alt-2) 0%, var(--ms-color-dark-navy-alt-3) 55%, var(--ms-color-dark-navy-alt-4) 100%);
    border-bottom: 1px solid rgba(120, 100, 160, 0.28);
    box-shadow:
        0 10px 36px rgba(12, 8, 24, 0.35),
        inset 0 -1px 0 rgba(255, 240, 200, 0.06);
}
.site-header__flank {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 30%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;
}
.site-header__flank--left {
    background-position: left center;
}
.site-header__flank--right {
    transform: scaleX(-1);
    background-position: right center;
}
.site-header__center {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.2rem;
}
.site-header__backdrop-img {
    position: relative;
    width: 100%;
    height: auto;
    max-height: clamp(6.25rem, 18vw, 9rem);
    object-fit: contain;
    object-position: center center;
    pointer-events: none;
}
@media (max-width: 640px) {
    .site-header__flank {
        max-width: 22%;
    }
}
.site-header__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 120% 100% at 50% 38%, rgba(8, 4, 18, 0.15) 0%, transparent 52%),
        linear-gradient(180deg, rgba(6, 4, 14, 0.35) 0%, rgba(6, 4, 14, 0.5) 100%);
    pointer-events: none;
}
.site-header__titles {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 0.85rem 0.65rem;
    pointer-events: none;
}
.site-header__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.02em;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 700;
    font-style: italic;
    font-optical-sizing: auto;
    font-size: clamp(1.95rem, 7vw, 3.35rem);
    line-height: 0.98;
    letter-spacing: 0.04em;
    color: var(--ms-color-cream-light);
    text-shadow:
        0 2px 0 rgba(10, 6, 18, 0.95),
        0 4px 14px rgba(0, 0, 0, 0.65),
        0 0 28px rgba(0, 0, 0, 0.45),
        0 0 36px rgba(200, 160, 80, 0.18);
}
.site-header__logo-line {
    display: block; 
}
.site-header__tagline {
    margin-top: 0.45rem;
    max-width: 36rem;
    font-family: "Source Sans 3", "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: clamp(0.6rem, 2.8vw, 0.82rem);
    line-height: 1.35;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 240, 220, 0.96);
    text-shadow:
        0 1px 0 rgba(8, 4, 14, 0.9),
        0 2px 10px rgba(0, 0, 0, 0.55);
}
@media (min-width: 640px) {
    .site-header__tagline {
        letter-spacing: 0.16em;
    }
}

Bridge banner → toolbar: softens the seam */
.site-dock-bar {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    isolation: isolate;
    overflow: hidden;
    margin-top: -1px;
    background:
        linear-gradient(180deg, rgba(22, 16, 38, 0.55) 0%, rgba(36, 28, 58, 0.92) 28%, rgba(20, 16, 32, 0.98) 100%);
    border-top: 1px solid rgba(100, 80, 140, 0.22);
    border-bottom: 1px solid rgba(200, 175, 120, 0.22);
    box-shadow:
        0 12px 32px rgba(8, 4, 18, 0.28),
        inset 0 1px 0 rgba(255, 240, 210, 0.07);
}
.site-dock-bar__blend {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 1.35rem;
    background: linear-gradient(
        180deg,
        rgba(8, 6, 16, 0.55) 0%,
        rgba(26, 20, 44, 0.18) 55%,
        transparent 100%
    );
    pointer-events: none;
}
.site-dock-bar__art {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.32;
    mix-blend-mode: soft-light;
    pointer-events: none;
}
.site-dock-bar__edge {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}
.site-dock-bar__edge--top {
    top: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212, 180, 95, 0.25) 22%,
        rgba(245, 220, 160, 0.55) 50%,
        rgba(212, 180, 95, 0.25) 78%,
        transparent 100%
    );
    opacity: 0.9;
}
.site-dock-bar__inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: clamp(0.35rem, 1.2vw, 0.85rem) clamp(0.45rem, 1.5vw, 1rem);
    padding: 0.72rem 0;
    min-height: 3.1rem;
    min-width: 0;
}
.site-dock-bar__lead {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
}
.site-dock-bar__lead-mark {
    display: block; 
    width: 3px;
    height: 1.15rem;
    border-radius: 2px;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(255, 228, 170, 0.95) 0%, rgba(180, 140, 90, 0.55) 100%);
    box-shadow: 0 0 14px rgba(255, 210, 140, 0.35);
}
.site-dock-bar__lead-text {
    font-family: "Outfit", "Source Sans 3", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: clamp(0.1em, 0.8vw, 0.22em);
    text-transform: uppercase;
    color: rgba(220, 205, 240, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.site-lang {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    flex-shrink: 0;
    margin: 0;
}
.site-lang__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.site-lang__select {
    font-family: "Outfit", "Source Sans 3", sans-serif;
    font-size: clamp(0.6rem, 0.15vw + 0.55rem, 0.68rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: clamp(0.26rem, 0.5vw, 0.32rem) clamp(0.4rem, 1vw, 0.55rem);
    border-radius: 0.55rem;
    border: 1px solid rgba(255, 228, 170, 0.28);
    background: rgba(18, 12, 32, 0.72);
    color: rgba(245, 230, 255, 0.92);
    max-width: min(9rem, 32vw);
    cursor: pointer;
}
.site-lang__select:focus {
    outline: 2px solid rgba(255, 210, 140, 0.45);
    outline-offset: 2px;
}
.site-dock {
    position: relative;
    z-index: 10;
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(0.28rem, 0.8vw, 0.45rem);
    justify-content: flex-end;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
@media (max-width: 640px) {
    .site-dock-bar__lead-text {
        font-size: 0.62rem;
    }
}
@media (max-width: 640px) {
    .site-dock-bar__lead {
        display: none;
    }
}
.site-dock__form {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.site-dock__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    flex-shrink: 0;
    padding: clamp(0.36rem, 0.5vw + 0.22rem, 0.48rem) clamp(0.5rem, 1.2vw + 0.25rem, 0.95rem);
    border-radius: 999px;
    font-family: "Outfit", "Source Sans 3", "Segoe UI", sans-serif;
    font-size: clamp(0.62rem, 0.35vw + 0.52rem, 0.78rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--ms-color-cream-ivory);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(210, 185, 130, 0.45);
    background-color: rgba(22, 16, 38, 0.72);
    background-image:
        linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, transparent 55%),
        var(--ms-btn-tex-violet);
    background-size: cover, cover;
    background-position: center, center;
    box-shadow:
        inset 0 1px 0 rgba(255, 250, 235, 0.12),
        0 3px 14px rgba(0, 0, 0, 0.35);
    transition:
        filter 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.12s ease,
        box-shadow 0.16s ease;
}
.site-dock__btn:hover {
    color: var(--ms-color-white);
    border-color: rgba(252, 236, 200, 0.88);
    filter: brightness(1.06);
    background-color: rgba(36, 28, 58, 0.88);
    background-image:
        linear-gradient(165deg, rgba(255, 255, 255, 0.14) 0%, transparent 50%),
        var(--ms-btn-tex-violet);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 250, 235, 0.16),
        0 5px 18px rgba(0, 0, 0, 0.4);
}
.site-dock__btn:focus-visible {
    outline: 2px solid rgba(232, 200, 120, 0.95);
    outline-offset: 3px;
}
.site-dock__btn--primary {
    border-color: rgba(230, 200, 120, 0.75);
    background-color: rgba(72, 52, 100, 0.55);
    background-image:
        linear-gradient(175deg, rgba(255, 228, 160, 0.38) 0%, rgba(200, 160, 80, 0.22) 45%, rgba(72, 52, 120, 0.65) 100%),
        var(--ms-btn-tex-gold);
    background-size: cover, cover;
    background-position: center, center;
    color: var(--ms-color-cream-pale-8);
    text-shadow: 0 1px 2px rgba(10, 6, 20, 0.65);
}
.site-dock__btn--primary:hover {
    border-color: rgba(255, 235, 190, 0.95);
    filter: brightness(1.05);
    background-color: rgba(88, 68, 120, 0.6);
    background-image:
        linear-gradient(175deg, rgba(255, 236, 190, 0.45) 0%, rgba(215, 175, 95, 0.32) 42%, rgba(88, 68, 140, 0.72) 100%),
        var(--ms-btn-tex-gold);
}
.site-dock__btn--submit {
    margin: 0;
    cursor: pointer;
    font: inherit;
    line-height: inherit;
}

/* Narrow dock: all locales — icons only (use aria-label on links/buttons; .site-dock__label clipped) */
@media (max-width: 900px) {
    .site-dock__btn {
        letter-spacing: 0.03em;
        padding: 0.5rem 0.55rem;
    }
    .site-dock__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

.site-footer {
    margin-top: auto;
    flex-shrink: 0;
}
.site-footer__backdrop {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 1440 / 200;
    min-height: 5rem;
    overflow: hidden;
    border-top: 1px solid rgba(74, 61, 107, 0.1);
    box-shadow: 0 -6px 24px rgba(30, 24, 48, 0.08);
    background: var(--ms-color-dark-navy-alt);
}
.site-footer__backdrop-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
}
.site-footer__scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        180deg,
        rgba(246, 247, 251, 0.06) 0%,
        rgba(10, 8, 16, 0.42) 40%,
        rgba(8, 6, 14, 0.88) 100%
    );
    pointer-events: none;
}
body.mind-sync-game .site-footer__scrim {
    background: linear-gradient(
        180deg,
        rgba(12, 10, 16, 0.2) 0%,
        rgba(10, 8, 16, 0.75) 50%,
        rgba(6, 4, 12, 0.95) 100%
    );
}
.site-footer__inner {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0.25rem;
}
.site-footer__note:not(.visually-hidden) {
    margin: 0;
    padding: var(--ms-spacing-md) var(--ms-spacing-12) var(--ms-spacing-20);
    text-align: center;
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(252, 244, 220, 0.95);
    letter-spacing: 0.03em;
    font-weight: 600;
    text-shadow:
        0 0 12px rgba(0, 0, 0, 0.65),
        0 1px 3px rgba(0, 0, 0, 0.8);
    max-width: 36rem;
}
.site-footer__note.visually-hidden {
    padding: 0;
}
.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 0 0.75rem 0.85rem;
}
.site-footer__links a {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(252, 244, 220, 0.86);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.site-footer__links a:hover,
.site-footer__links a:focus-visible {
    color: rgba(255, 248, 232, 1);
    border-color: rgba(255, 235, 186, 0.72);
}

.page-title-art {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-variation-settings: "opsz" 48, "wght" 720;
    letter-spacing: 0.04em;
    color: var(--ms-violet-deep);
}
.section-title-art {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.03em;
    color: var(--ms-violet-deep);
}

How-to-play: detailed copy + flow-style diagrams */
.rules-page__sections {
    margin-top: 1.5rem;
    gap: 1.75rem;
}
.rules-page__block {
    margin: 0;
}
.rules-page__lead {
    margin-top: 0.35rem;
    line-height: 1.55;
}
.rules-page__caption {
    margin-top: 0.35rem;
}
.rules-page__note {
    margin-top: 0.85rem;
    font-size: 0.92rem;
    line-height: 1.5;
}
.rules-page__bullets {
    margin: 0.65rem 0 0;
    padding-left: 1.25rem;
    color: var(--ms-ink-muted);
    line-height: 1.55;
}
.rules-page__bullets li {
    margin: 0.35rem 0;
}
.rules-page__back {
    margin-top: 2rem;
}
.rules-page__back--row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* How-to-play: dock opens as overlay (see layout #rules-modal + app.js) */
.rules-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ms-spacing-md);
    box-sizing: border-box;
}
.rules-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(30, 24, 40, 0.55);
    backdrop-filter: blur(2px);
}
.rules-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 42rem);
    max-height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
    background: var(--ms-cream);
    border: 1px solid var(--ms-card-border);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(30, 24, 48, 0.18);
    overflow: hidden;
}
.rules-modal__close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 2;
}
.rules-modal__scroll {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.5rem 0.75rem 1rem;
    -webkit-overflow-scrolling: touch;
}
.rules-modal__scroll .rules-page--modal {
    margin: 0;
    padding-top: 2.25rem;
    box-shadow: none;
}

/* Lobby: character picker overlay after Create / Join (see rooms/index + app.js) */
.lobby-avatar-modal__panel {
    width: min(100%, 36rem);
    max-height: min(92vh, 720px);
}
.lobby-avatar-modal__body {
    padding: var(--ms-spacing-xl) var(--ms-spacing-20) var(--ms-spacing-20);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: inherit;
}
.lobby-avatar-modal__title {
    font-family: "Fraunces", "Source Sans 3", serif;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    padding-right: 2.5rem;
    color: var(--ms-ink);
}
.lobby-avatar-modal__sub {
    margin: 0 0 0.75rem;
    font-size: 0.92rem;
    line-height: 1.5;
}
.lobby-avatar-modal__timer-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    flex-wrap: wrap;
}
.lobby-avatar-modal__timer-label {
    font-size: 0.9rem;
    color: var(--ms-muted);
}
.lobby-avatar-modal__timer {
    font-family: "Outfit", "Source Sans 3", sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--ms-violet);
}
.lobby-avatar-modal__timer.is-urgent {
    color: var(--ms-color-orange-rust);
}
.lobby-avatar-modal__timer.is-timeout {
    color: var(--ms-muted);
}
.lobby-avatar-modal__picker {
    margin-top: 0.25rem;
}
.lobby-avatar-modal__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

Stronger role/avatar selection in lobby modal (cream panel; default picker styles are tuned for dark local UI) */
.lobby-avatar-modal .local-avatar-picker {
    border-color: rgba(90, 74, 120, 0.18);
    background: rgba(255, 252, 248, 0.55);
}
.lobby-avatar-modal .local-avatar-option {
    border-width: 2px;
    border-color: rgba(90, 74, 120, 0.2);
    box-shadow: 0 4px 12px rgba(42, 34, 72, 0.08);
}
.lobby-avatar-modal .local-avatar-option:has(input:checked),
.lobby-avatar-modal .local-avatar-option.is-selected {
    border-color: rgba(201, 149, 42, 0.98);
    box-shadow:
        0 0 0 4px rgba(201, 169, 74, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.65) inset,
        0 14px 28px rgba(42, 34, 72, 0.18);
    transform: translateY(-3px) scale(1.04);
}
.lobby-avatar-modal .local-avatar-option:has(input:checked)::after,
.lobby-avatar-modal .local-avatar-option.is-selected::after {
    z-index: 5;
    width: 28px;
    height: 28px;
    right: 8px;
    bottom: 8px;
    font-size: 1.05rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.lobby-avatar-modal .local-avatar-option:has(input:focus-visible) {
    outline: 2px solid var(--ms-violet);
    outline-offset: 3px;
}
.lobby-avatar-modal .local-avatar-option:hover:not(.is-taken) {
    border-color: rgba(201, 169, 74, 0.55);
    box-shadow: 0 8px 20px rgba(42, 34, 72, 0.12);
}

.rules-flow {
    list-style: none;
    margin: var(--ms-spacing-md) 0 0;
    padding: 0;
    counter-reset: rulesflow;
}
.rules-flow__step {
    position: relative;
    margin: 0;
    padding: 0.15rem 0 1.1rem 2.6rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ms-ink);
}
.rules-flow__step::before {
    counter-increment: rulesflow;
    content: counter(rulesflow);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: linear-gradient(155deg, var(--ms-color-purple-grad), var(--ms-violet));
    color: var(--ms-color-violet-pale);
    font-family: "Outfit", "Source Sans 3", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ms-cream);
    box-shadow: 0 2px 10px rgba(42, 34, 56, 0.12);
}
.rules-flow__step::after {
    content: "";
    position: absolute;
    left: 0.875rem;
    top: 1.85rem;
    bottom: 0.15rem;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(
        180deg,
        rgba(201, 169, 74, 0.65) 0%,
        rgba(201, 169, 74, 0.25) 100%
    );
}
.rules-flow__step:last-child {
    padding-bottom: 0;
}
.rules-flow__step:last-child::after {
    display: none;
}

.rules-scorechart {
    margin-top: 1rem;
    padding: var(--ms-spacing-md) var(--ms-spacing-md) var(--ms-spacing-20);
    border-radius: 12px;
    border: 1px solid var(--ms-card-border);
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 2px 0 rgba(201, 169, 74, 0.1);
}
.rules-scorechart__prep {
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px dashed rgba(74, 61, 107, 0.22);
    background: rgba(74, 61, 107, 0.04);
}
.rules-scorechart__arrow {
    text-align: center;
    font-size: 1.35rem;
    line-height: 1;
    color: rgba(90, 74, 120, 0.55);
    margin: 0.45rem 0;
    user-select: none;
}
.rules-scorechart__root {
    margin: 0.25rem 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ms-violet-deep);
    line-height: 1.45;
}
.rules-scorechart__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    align-items: stretch;
}
@media (max-width: 768px) {
    .rules-scorechart__split {
        grid-template-columns: 1fr;
    }
}
.rules-scorechart__branch {
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(201, 169, 74, 0.28);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(248, 244, 255, 0.88));
    min-width: 0;
}
.rules-scorechart__mini-title {
    margin: 0 0 0.45rem;
    font-family: "Outfit", "Source Sans 3", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ms-violet-deep);
    line-height: 1.35;
}
.rules-scorechart__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}
.rules-scorechart__notes {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(74, 61, 107, 0.1);
}
@media (min-width: 640px) {
    .rules-scorechart__notes {
        grid-template-columns: 1fr 1fr;
    }
}
.rules-scorechart__note {
    padding: 0.6rem 0.7rem;
    border-radius: 8px;
    background: rgba(74, 61, 107, 0.05);
    border: 1px solid rgba(74, 61, 107, 0.08);
    min-width: 0;
}

.page { padding: var(--ms-spacing-20) 0 var(--ms-spacing-xl); flex: 1; }
.grid { display: grid; gap: var(--ms-spacing-md); }
.two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.page--rooms .grid.two-col {
    max-width: min(52rem, 100%);
    margin-inline: auto;
}
.page--rooms .card p.muted {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.room-category-picker {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.room-category-picker legend {
    padding: 0;
    margin-bottom: 0.35rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ms-violet-deep);
}
.room-category-picker__lead {
    margin: 0 0 0.7rem;
}
.room-category-picker__grid {
    display: grid;
    grid-template-columns: repeat(var(--category-cols, 3), minmax(0, 1fr));
    gap: 0.75rem;
}
.room-category-option {
    --category-panel-bg: none;
    position: relative;
    display: grid;
    align-items: stretch;
    min-height: 15rem;
    padding: 0;
    border-radius: 20px;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    box-shadow:
        0 10px 28px rgba(42, 34, 72, 0.12),
        0 2px 0 rgba(201, 169, 74, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.room-category-option__art,
.room-category-option__overlay,
.room-category-option::after {
    position: relative;
    z-index: 1;
}
.room-category-option__art {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(180deg, rgba(16, 10, 28, 0.03) 0%, rgba(16, 10, 28, 0.12) 44%, rgba(16, 10, 28, 0.34) 70%, rgba(12, 9, 20, 0.58) 100%),
        var(--category-panel-bg);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    transform: scale(1.01);
    transition: transform 0.28s ease, filter 0.28s ease;
}
.room-category-option__art::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 248, 225, 0.34), rgba(255, 248, 225, 0) 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
    pointer-events: none;
}
.room-category-option__overlay {
    position: relative;
    display: grid;
    align-content: end;
    gap: 0.32rem;
    width: 100%;
    min-height: 100%;
    padding: 0.9rem 0.95rem 0.95rem;
    background:
        linear-gradient(180deg, rgba(9, 7, 18, 0) 0%, rgba(9, 7, 18, 0.06) 54%, rgba(9, 7, 18, 0.16) 72%, rgba(9, 7, 18, 0.34) 100%);
}
.room-category-option__eyebrow {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.56rem;
    border-radius: 999px;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    color: rgba(255, 247, 232, 0.94);
    background: rgba(20, 14, 34, 0.44);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.room-category-option__info {
    display: grid;
    gap: 0.22rem;
    width: 100%;
    padding: 0.2rem 0;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
}
.room-category-option:hover {
    transform: translateY(-3px);
    box-shadow:
        0 16px 34px rgba(42, 34, 72, 0.18),
        0 2px 0 rgba(201, 169, 74, 0.22);
    filter: saturate(1.05);
}
.room-category-option:hover .room-category-option__art {
    transform: scale(1.045);
    filter: saturate(1.08) contrast(1.03);
}
.room-category-option input {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.room-category-option__name {
    display: block; 
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ms-color-cream-pale-7);
    letter-spacing: 0.01em;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.9),
        0 0 18px rgba(0, 0, 0, 0.28);
}
.room-category-option__desc {
    display: block; 
    font-size: 0.77rem;
    line-height: 1.35;
    color: rgba(248, 239, 224, 0.92);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.78);
}
.room-category-option:has(input:checked),
.room-category-option.is-selected {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 0 0 4px rgba(201, 169, 74, 0.42),
        0 18px 38px rgba(42, 34, 72, 0.24);
}
.room-category-option:has(input:checked)::after,
.room-category-option.is-selected::after {
    content: "✓";
    position: absolute;
    top: 0.65rem;
    left: 0.7rem;
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    color: var(--ms-color-brown-dark);
    background: linear-gradient(180deg, var(--ms-color-gold-light), var(--ms-color-gold-dark));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 6;
}
.room-category-option:has(input:focus-visible) {
    outline: 2px solid var(--ms-violet);
    outline-offset: 3px;
}
.room-category-option:has(input:focus-visible):not(.is-selected) {
    box-shadow:
        0 0 0 3px rgba(120, 90, 180, 0.26),
        0 12px 28px rgba(42, 34, 72, 0.16);
}
.room-category-current {
    margin: 0 0 0.65rem;
}
.room-category-form {
    margin: 0 0 0.85rem;
}
.room-category-picker--compact .room-category-picker__grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.room-category-option--compact {
    min-height: 10.75rem;
}
.room-category-option--compact .room-category-option__desc { display: none; }
.room-category-option--compact .room-category-option__overlay {
    padding: 0.65rem 0.72rem 0.72rem;
}
.room-category-option--compact .room-category-option__eyebrow {
    font-size: 0.6rem;
    padding: 0.16rem 0.48rem;
}
.room-category-option--compact .room-category-option__info {
    padding: 0.12rem 0;
}
.room-category-option--compact .room-category-option__name {
    font-size: 0.92rem;
}
.room-category-option--compact:has(input:checked)::after,
.room-category-option--compact.is-selected::after {
    top: 0.45rem;
    left: 0.45rem;
    width: 1.55rem;
    height: 1.55rem;
    font-size: 0.82rem;
}
.stack { display: grid; gap: var(--ms-spacing-12); min-width: 0; }
.card {
    background: var(--ms-cream);
    border: 1px solid var(--ms-card-border);
    border-radius: 12px;
    padding: var(--ms-spacing-md);
    box-shadow:
        0 2px 0 rgba(201, 169, 74, 0.12),
        0 8px 24px var(--ms-shadow);
}
.narrow { max-width: 560px; margin: var(--ms-spacing-20) auto; }

Auth: login / register — AI atmosphere + glass panel + Outfit + gold CTA */
.page--auth-gate {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    padding: clamp(1.25rem, 4vw, 2rem) 0 clamp(2rem, 8vw, 3rem);
     min-height: min(52rem, 100svh);
     min-height: min(52rem, 100vh);
}
.page--auth-gate.container {
    width: min(440px, 92vw);
}
.auth-gate {
    position: relative;
    width: 100%;
}
.auth-gate__sparkle {
    position: absolute;
    inset: -2rem -10% auto;
    height: 12rem;
    background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(255, 236, 200, 0.35) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0.85;
}
.auth-gate__content {
    position: relative;
    z-index: 1;
}
.auth-gate__header {
    text-align: center;
    margin-bottom: 1.35rem;
}
.auth-eyebrow {
    margin: 0;
    font-family: "Outfit", "Source Sans 3", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(72, 56, 98, 0.88);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.auth-title {
    margin: 0.5rem 0 0.45rem;
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.95rem, 5.5vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: 0.02em;
    color: var(--ms-color-dark-purple);
    text-shadow: 0 2px 24px rgba(255, 255, 255, 0.35);
}
.auth-lead {
    margin: 0;
    font-family: "Outfit", "Source Sans 3", sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(48, 40, 64, 0.82);
    max-width: 26rem;
    margin-inline: auto;
}
.auth-panel {
    background: linear-gradient(155deg, rgba(255, 253, 254, 0.78) 0%, rgba(238, 232, 252, 0.62) 100%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 22px;
    padding: clamp(1.35rem, 4vw, 2rem);
    box-shadow:
        0 0 0 1px rgba(120, 90, 160, 0.08) inset,
        0 28px 56px rgba(18, 10, 36, 0.38),
        0 8px 20px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.auth-form.stack {
    gap: var(--ms-spacing-md);
}
.auth-field {
    display: block; 
}
.auth-field__label {
    display: block; 
    font-family: "Outfit", "Source Sans 3", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(62, 48, 88, 0.78);
    margin-bottom: 0.35rem;
}
.auth-field input {
    width: 100%;
    margin-top: 0;
    padding: 0.72rem 1rem;
    font-family: "Outfit", "Source Sans 3", sans-serif;
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--ms-ink);
    border-radius: 14px;
    border: 1px solid rgba(110, 90, 140, 0.28);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.auth-field input::placeholder {
    color: rgba(92, 84, 112, 0.45);
}
.auth-field input:hover {
    border-color: rgba(140, 110, 170, 0.4);
}
.auth-field input:focus {
    outline: none;
    border-color: rgba(200, 160, 80, 0.75);
    background: var(--ms-color-white);
    box-shadow:
        0 0 0 3px rgba(212, 188, 120, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.auth-actions {
    margin-top: 0.35rem;
}
.auth-actions--split {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0;
}
@media (min-width: 640px) {
    .auth-actions--split {
        flex-direction: row;
        justify-content: center;
    }
}
.auth-actions--split .button.button--auth-primary,
.auth-actions--split .button.button--auth-secondary {
    width: 100%;
}
.auth-gate--home .auth-lead {
    max-width: min(32rem, 100%);
}
.button.button--auth-primary {
    width: 100%;
    min-height: 3.1rem;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 14px;
    font-family: "Outfit", "Source Sans 3", sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ms-color-cream-off);
    border: 1px solid rgba(255, 228, 160, 0.55);
    text-shadow:
        0 1px 2px rgba(12, 6, 4, 0.95),
        0 0 1px rgba(0, 0, 0, 0.75);
    background-color: var(--ms-color-brown-dark-3);
    background-image:
        linear-gradient(168deg, rgba(255, 248, 220, 0.45) 0%, transparent 48%),
        var(--ms-btn-tex-gold);
    background-size: cover, cover;
    background-position: center, center;
    box-shadow:
        0 3px 0 rgba(40, 28, 60, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 14px 32px rgba(20, 12, 40, 0.28);
    transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.button.button--auth-primary:hover {
    filter: brightness(1.06) saturate(1.05);
    color: var(--ms-color-white);
    transform: translateY(-1px);
}
.button.button--auth-primary:active {
    transform: translateY(0);
}
.button.button--auth-primary .ms-icon {
    width: 1.15rem;
    height: 1.15rem;
}
.button.button--auth-secondary {
    width: 100%;
    min-height: 3.1rem;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 14px;
    font-family: "Outfit", "Source Sans 3", sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ms-violet-deep);
    border: 1px solid rgba(74, 61, 107, 0.38);
    text-shadow: none;
    background-color: rgba(255, 255, 255, 0.92);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 244, 255, 0.82) 100%),
        var(--ms-btn-tex-violet);
    background-size: cover, cover;
    background-position: center, center;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 4px 14px rgba(30, 24, 48, 0.12);
    transition: transform 0.12s ease, filter 0.15s ease, border-color 0.15s ease;
}
.button.button--auth-secondary:hover {
    color: var(--ms-color-dark-navy-alt);
    filter: brightness(1.03);
    border-color: rgba(74, 61, 107, 0.5);
    transform: translateY(-1px);
}
.button.button--auth-secondary:active {
    transform: translateY(0);
}
.button.button--auth-secondary .ms-icon {
    width: 1.15rem;
    height: 1.15rem;
}
.auth-alert {
    margin-bottom: 0.35rem;
    border-radius: 12px;
    font-family: "Outfit", "Source Sans 3", sans-serif;
    font-size: 0.9rem;
}
.auth-switch {
    margin: 1.5rem 0 0;
    text-align: center;
    font-family: "Outfit", "Source Sans 3", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(48, 40, 64, 0.82);
}
.auth-switch__link {
    margin-left: 0.35rem;
    font-weight: 700;
    color: var(--ms-color-purple-medium);
    text-decoration: none;
    border-bottom: 1px solid rgba(74, 61, 107, 0.35);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.auth-switch__link:hover {
    color: var(--ms-violet-deep);
    border-bottom-color: rgba(42, 34, 56, 0.55);
}
.auth-switch__link:focus-visible {
    outline: 2px solid rgba(212, 188, 120, 0.9);
    outline-offset: 3px;
    border-radius: 2px;
}

Improve text contrast on the home/auth atmosphere background. */
body.page-shell--auth .auth-gate__header {
    padding: 0.65rem 0.85rem 0.85rem;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(16, 12, 28, 0.68) 0%, rgba(16, 12, 28, 0.24) 68%, rgba(16, 12, 28, 0) 100%);
}
body.page-shell--auth .auth-eyebrow {
    color: rgba(255, 238, 204, 0.95);
    text-shadow:
        0 1px 1px rgba(4, 2, 10, 0.95),
        0 2px 14px rgba(0, 0, 0, 0.68);
}
body.page-shell--auth .auth-title {
    color: var(--ms-color-cream-pale-5);
    text-shadow:
        0 1px 1px rgba(6, 3, 12, 0.95),
        0 3px 18px rgba(0, 0, 0, 0.72),
        0 0 26px rgba(255, 218, 140, 0.2);
}
body.page-shell--auth .auth-lead,
body.page-shell--auth .auth-switch {
    color: rgba(244, 236, 255, 0.95);
    text-shadow:
        0 1px 1px rgba(6, 3, 12, 0.9),
        0 2px 10px rgba(0, 0, 0, 0.52);
}
body.page-shell--auth .auth-switch__link {
    color: var(--ms-color-gold-light-4);
    border-bottom-color: rgba(255, 226, 168, 0.72);
}
body.page-shell--auth .auth-switch__link:hover {
    color: var(--ms-color-cream-pale-3);
    border-bottom-color: rgba(255, 240, 205, 0.9);
}
.page--rooms .card {
    border-color: rgba(90, 74, 120, 0.14);
    box-shadow:
        0 2px 0 rgba(201, 169, 74, 0.12),
        0 10px 36px rgba(42, 34, 72, 0.07);
}
.muted { color: var(--ms-ink-muted); }
.button {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background-color: var(--ms-color-violet-medium);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 52%),
        var(--ms-btn-tex-violet);
    background-size: cover, cover;
    background-position: center, center;
    color: var(--ms-color-violet-pale);
    border-radius: 10px;
    padding: var(--ms-spacing-10) var(--ms-spacing-md);
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 22px rgba(18, 12, 32, 0.2);
    transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.button:hover:not(:disabled) {
    filter: brightness(1.07) saturate(1.06);
    color: var(--ms-color-white);
}
.button--with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}
.ghost {
    border: 1px solid rgba(74, 61, 107, 0.32);
    background-color: rgba(255, 255, 255, 0.88);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 244, 255, 0.78) 100%),
        var(--ms-btn-tex-violet);
    background-size: cover, cover;
    background-position: center, center;
    color: var(--ms-violet-deep);
    text-shadow: none;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 3px 12px rgba(30, 24, 48, 0.08);
}
.ghost:hover:not(:disabled) {
    filter: brightness(1.02);
    color: var(--ms-violet-deep);
    border-color: rgba(74, 61, 107, 0.45);
}

Gold accent (lobby + game) — light label + dark halo: texture mixes bright gold + deep purple */
.button.button--gold {
    color: var(--ms-color-cream-off);
    border: 1px solid rgba(255, 220, 150, 0.45);
    text-shadow:
        0 1px 2px rgba(12, 6, 4, 0.95),
        0 0 1px rgba(0, 0, 0, 0.75);
    background-color: var(--ms-color-brown-dark-2);
    background-image:
        linear-gradient(180deg, rgba(255, 250, 220, 0.4) 0%, transparent 52%),
        var(--ms-btn-tex-gold);
    background-size: cover, cover;
    background-position: center, center;
    box-shadow:
        0 2px 0 rgba(40, 28, 20, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 8px 26px rgba(40, 28, 20, 0.18);
}
.button.button--gold:hover:not(:disabled) {
    filter: brightness(1.06) saturate(1.05);
    color: var(--ms-color-white);
}
.actions { display: flex; gap: var(--ms-spacing-10); }
input, select {
    width: 100%;
    border: 1px solid var(--ms-color-border-light-2);
    border-radius: 8px;
    padding: var(--ms-spacing-sm) var(--ms-spacing-10);
    margin-top: 6px;
}
label span { font-size: 14px; color: var(--ms-ink-muted); }
.alert { border-radius: var(--ms-spacing-sm); padding: var(--ms-spacing-10); margin-top: var(--ms-spacing-10); }
.alert.error { background: var(--ms-alert-error-bg); color: var(--ms-alert-error-text); }
.alert.success { background: var(--ms-alert-success-bg); color: var(--ms-alert-success-text); }
.alert--danger { background: var(--ms-alert-danger-bg); color: var(--ms-alert-danger-text); border: 1px solid var(--ms-alert-danger-border); }
.alert--success { background: var(--ms-alert-success-2-bg); color: var(--ms-alert-success-2-text); border: 1px solid var(--ms-alert-success-2-border); }

WordHunt Layout */
.room-list, .score-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ms-spacing-sm); }
.room-list li, .score-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ms-spacing-10);
    min-width: 0;
}
.room-list li a {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.score-list li > :first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.room-list__meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}
.room-list__close-form {
    display: inline;
    margin: 0;
}
.room-list__close-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid rgba(180, 90, 90, 0.45);
    background-color: rgba(255, 232, 232, 0.4);
    background-image:
        linear-gradient(180deg, rgba(255, 200, 200, 0.45) 0%, rgba(255, 230, 230, 0.2) 100%),
        var(--ms-btn-tex-violet);
    background-size: cover, cover;
    background-position: center, center;
    color: var(--ms-color-red-dark);
    cursor: pointer;
    line-height: 1.2;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.room-list__close-btn:hover {
    filter: brightness(1.03);
    background-color: rgba(255, 210, 210, 0.55);
    background-image:
        linear-gradient(180deg, rgba(255, 190, 190, 0.5) 0%, rgba(255, 220, 220, 0.35) 100%),
        var(--ms-btn-tex-violet);
}
.room-list__close-text {
    display: inline;
}
@media (max-width: 640px) {
    .room-list__close-text {
        display: none;
    }
    .room-list__close-btn {
        padding: 0.3rem;
    }
    .room-category-picker__grid {
        grid-template-columns: 1fr;
    }
}
.pill {
    background: rgba(201, 169, 74, 0.18);
    color: var(--ms-violet-deep);
    border-radius: 999px;
    padding: 2px var(--ms-spacing-10);
    font-size: 12px;
    font-weight: 600;
}
.callout {
    background: rgba(74, 61, 107, 0.06);
    border: 1px solid var(--ms-card-border);
    padding: var(--ms-spacing-12);
    border-radius: 10px;
}
.prompt { font-size: 18px; color: var(--ms-violet-deep); }
.hand-grid, .table-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--ms-spacing-10); }
.card-tile, .table-card {
    background: linear-gradient(145deg, var(--ms-cream-deep), var(--ms-color-cream-gradient));
    border-radius: 10px;
    border: 1px solid rgba(201, 169, 74, 0.25);
    min-height: 86px;
    display: grid;
    align-content: center;
    justify-items: center;
    font-weight: 700;
    overflow: hidden;
    gap: var(--ms-spacing-xs);
}
.card-tile img, .table-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    aspect-ratio: 1376 / 768;
    display: block; 
}
.table-card small { font-weight: 500; color: var(--ms-color-gray-slate); }
@media (max-width: 900px) {
    .two-col { grid-template-columns: 1fr; }
}

—— Mind Sync 遊戲頁：卡牌式版面 —— */
body.mind-sync-game {
    min-height: 100vh;
}
Dark cosmic backdrop (fallback if lobby class omitted) */
body.mind-sync-game:not(.page-shell--lobby) {
    background: radial-gradient(ellipse 120% 80% at 50% -20%, var(--ms-color-purple-dark-2) 0%, var(--ms-color-purple-dark-3) 45%, var(--ms-color-purple-dark-4) 100%);
    color: var(--ms-color-lavender-soft);
}
Match rooms / lobby page background (see RoomController, GameController) */
body.mind-sync-game.page-shell--lobby {
    background-color: var(--ms-page-bg);
    background-image:
        linear-gradient(180deg, rgba(245, 241, 234, 0.9) 0%, rgba(240, 234, 224, 0.82) 42%, rgba(232, 224, 212, 0.94) 100%),
        url("/assets/site-bg-lobby.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    color: var(--ms-ink);
}
@media (max-width: 768px) {
    body.mind-sync-game.page-shell--lobby {
        background-attachment: scroll;
    }
}
body.mind-sync-game.page-shell--lobby .dixit-board {
    color: var(--ms-color-lavender-soft);
}
body.mind-sync-game.page-shell--lobby .dixit-board .muted {
    color: rgba(210, 204, 228, 0.82);
}
body.mind-sync-game .site-header__backdrop {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
body.mind-sync-game .site-header__scrim {
    /* Match lobby banner — avoid darker upper-right on game pages */
    background: radial-gradient(
        ellipse 95% 130% at 50% 42%,
        rgba(10, 8, 18, 0.02) 0%,
        rgba(10, 8, 16, 0.18) 55%,
        rgba(6, 4, 12, 0.38) 100%
    );
}
body.mind-sync-game .site-dock-bar {
    background: linear-gradient(180deg, rgba(22, 18, 34, 0.96), rgba(12, 10, 22, 0.98));
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
body.mind-sync-game .site-dock__btn {
    color: var(--ms-color-lavender-very-pale-2);
    border-color: rgba(255, 255, 255, 0.22);
    background-color: rgba(8, 6, 16, 0.42);
    background-image:
        linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, transparent 55%),
        var(--ms-btn-tex-violet);
    background-size: cover, cover;
    background-position: center, center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 18px rgba(0, 0, 0, 0.4);
}
body.mind-sync-game .site-dock__btn:hover {
    border-color: rgba(232, 200, 255, 0.45);
    filter: brightness(1.06);
    background-color: rgba(22, 16, 40, 0.65);
    background-image:
        linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        var(--ms-btn-tex-violet);
}
body.mind-sync-game .site-dock__btn--primary {
    border-color: rgba(212, 168, 75, 0.55);
    background-color: rgba(60, 48, 90, 0.45);
    background-image:
        linear-gradient(160deg, rgba(212, 168, 75, 0.4), rgba(60, 48, 110, 0.55)),
        var(--ms-btn-tex-gold);
    background-size: cover, cover;
    background-position: center, center;
}
body.mind-sync-game .site-dock__btn--primary:hover {
    border-color: rgba(255, 235, 190, 0.85);
    filter: brightness(1.06);
    background-color: rgba(72, 56, 110, 0.55);
    background-image:
        linear-gradient(160deg, rgba(230, 190, 95, 0.48), rgba(72, 58, 125, 0.62)),
        var(--ms-btn-tex-gold);
}
body.mind-sync-game .site-footer__backdrop {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
}
body.mind-sync-game main.page--game {
    width: min(1320px, 96vw);
    padding-top: 1rem;
    padding-bottom: 2.5rem;
}

Kids coach: popover under hint button; pointer-events none on panel so taps pass through */
.coach-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.coach-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    cursor: pointer;
    user-select: none;
}
.coach-mode-switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}
.coach-mode-switch__track {
    width: 2.05rem;
    height: 1.18rem;
    border-radius: 999px;
    border: 1px solid rgba(212, 168, 75, 0.45);
    background: rgba(36, 28, 56, 0.55);
    display: inline-flex;
    align-items: center;
    padding: 0.12rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.coach-mode-switch__thumb {
    width: 0.86rem;
    height: 0.86rem;
    border-radius: 50%;
    background: rgba(245, 230, 200, 0.95);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
    transform: translateX(0);
    transition: transform 0.2s ease;
}
.coach-mode-switch__text {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(245, 230, 200, 0.9);
}
.coach-mode-switch__input:checked + .coach-mode-switch__track {
    background: linear-gradient(180deg, rgba(255, 232, 176, 0.55), rgba(170, 120, 45, 0.4));
    border-color: rgba(255, 235, 194, 0.75);
}
.coach-mode-switch__input:checked + .coach-mode-switch__track .coach-mode-switch__thumb {
    transform: translateX(0.84rem);
}
.coach-mode-switch__input:focus-visible + .coach-mode-switch__track {
    outline: 2px solid rgba(232, 200, 120, 0.95);
    outline-offset: 2px;
}
.coach-toolbar--popover {
    position: relative;
    z-index: 40;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    vertical-align: middle;
    align-self: center;
}
.coach-hint-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.35rem;
    border-radius: 10px;
    border: 1px solid rgba(212, 168, 75, 0.4);
    background: rgba(36, 28, 56, 0.55);
    color: rgba(245, 230, 200, 0.95);
    cursor: pointer;
    line-height: 0;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}
.coach-hint-btn:hover {
    background: rgba(120, 90, 200, 0.35);
    border-color: rgba(212, 168, 75, 0.55);
    color: var(--ms-color-white);
}
.coach-hint-btn:focus {
    outline: none;
}
.coach-hint-btn:focus-visible {
    outline: 2px solid rgba(232, 200, 120, 0.95);
    outline-offset: 3px;
}
.coach-hint-btn:active {
    background: rgba(120, 90, 200, 0.5);
}

.coach-panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    left: auto;
    width: min(300px, calc(100vw - 1.75rem));
    max-height: min(78vh, 36rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    pointer-events: none;
    transform-origin: top right;
    transform: translateY(-10px) scale(0.97);
    opacity: 0;
    visibility: hidden;
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.26s ease,
        visibility 0.3s;
    filter: drop-shadow(0 18px 28px rgba(8, 4, 20, 0.55));
}
.coach-panel,
.coach-panel * {
    pointer-events: none;
}
.coach-panel .coach-panel__close {
    pointer-events: auto;
}
@media (max-width: 640px) {
    .coach-toolbar--popover {
        align-items: center;
    }
    .coach-panel__figure {
        justify-content: center;
    }
    .coach-panel {
        right: 50%;
        transform: translate(50%, -10px) scale(0.97);
        transform-origin: top center;
    }
}
@media (prefers-reduced-motion: reduce) {
    .coach-panel {
        transition: opacity 0.2s ease, visibility 0.2s;
    }
}
.coach-panel.coach-panel--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
@media (max-width: 640px) {
    .coach-panel.coach-panel--visible {
        transform: translate(50%, 0) scale(1);
    }
}
.coach-panel__inner {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
    padding: 0.65rem 0.7rem 0.75rem;
    margin: 0;
    border-radius: 22px;
    border: 1px solid rgba(212, 188, 120, 0.42);
    background: linear-gradient(145deg, rgba(48, 34, 72, 0.96), rgba(22, 14, 42, 0.98));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 12px 32px rgba(12, 8, 28, 0.5);
    max-height: min(74vh, 33rem);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    animation: coach-frame-glow 2.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .coach-panel__inner {
        animation: none;
    }
}
.coach-panel__close {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 2;
    margin: 0;
    padding: 0.28rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.28);
    color: rgba(245, 230, 200, 0.95);
    cursor: pointer;
    line-height: 0;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}
.coach-panel__close:hover {
    background: rgba(120, 90, 200, 0.38);
    border-color: rgba(212, 168, 75, 0.45);
    color: var(--ms-color-white);
}
.coach-panel__close:focus {
    outline: none;
}
.coach-panel__close:focus-visible {
    outline: 2px solid rgba(232, 200, 120, 0.95);
    outline-offset: 2px;
}
.coach-panel__title {
    margin: 0;
    padding: 0 2.25rem 0 0.15rem;
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    font-style: italic;
    color: var(--ms-color-lavender-very-pale);
    letter-spacing: 0.03em;
    text-align: center;
    text-shadow: 0 1px 12px rgba(186, 154, 255, 0.35);
}
Assistant: portrait frame (3:4) — matches typical rectangular character art */
.coach-panel__figure {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
}
.coach-panel__wrap {
    position: relative;
    display: block;
    width: fit-content;
    margin: 0 auto;
    max-width: 100%;
    line-height: 0;
}
.coach-panel__mage-bob {
    animation: mage-bob 2.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .coach-panel__mage-bob {
        animation: none;
    }
}
.coach-panel__aura {
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    border: 2px solid rgba(186, 154, 255, 0.5);
    box-shadow:
        0 0 18px rgba(167, 118, 255, 0.4),
        0 0 36px rgba(120, 80, 200, 0.22);
    animation: aura-pulse 1.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
.coach-panel__spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, var(--ms-color-cream-warm), var(--ms-color-gold-glow) 70%);
    box-shadow: 0 0 10px rgba(255, 220, 130, 0.95);
    animation: spark-float 1.45s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}
.coach-panel__spark--a {
    left: 6px;
    top: 14px;
}
.coach-panel__spark--b {
    right: 8px;
    top: 10px;
    animation-delay: 0.35s;
}
.coach-panel__spark--c {
    right: 10px;
    bottom: 28%;
    animation-delay: 0.7s;
}
.coach-panel__spark--d {
    left: 50%;
    bottom: 8px;
    margin-left: -3px;
    width: 5px;
    height: 5px;
    animation-delay: 0.15s;
}
.coach-panel__spark--e {
    left: 12%;
    top: 22%;
    width: 4px;
    height: 4px;
    animation-delay: 0.45s;
}
@media (prefers-reduced-motion: reduce) {
    .coach-panel__aura {
        animation: none;
    }
    .coach-panel__spark {
        animation: none;
        opacity: 0.85;
    }
}
.coach-panel__scene {
    position: relative;
    z-index: 1;
    width: min(200px, 70vw);
    max-width: 240px;
    aspect-ratio: 1 / 1;
    padding: 0;
    box-sizing: border-box;
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.38);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        0 0 0 1px rgba(212, 168, 75, 0.32),
        0 10px 28px rgba(12, 8, 28, 0.42);
    background: radial-gradient(ellipse 85% 90% at 50% 60%, rgba(62, 48, 108, 0.55), rgba(16, 10, 32, 0.82));
}
.coach-panel__art {
    position: absolute;
    inset: 0;
    display: block; 
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    object-fit: contain;
    object-position: center center;
    border-radius: 0;
    border: none;
    box-shadow: none;
    filter: brightness(1.05) saturate(1.08) contrast(0.99);
}
.coach-panel__bubble {
    padding: 0.6rem 0.7rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(212, 168, 75, 0.22);
}
.coach-panel__msg {
    margin: 0;
    font-family: "Outfit", "Source Sans 3", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ms-color-lavender-faint);
}
@keyframes coach-frame-glow {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.06) inset,
            0 12px 32px rgba(12, 8, 28, 0.5),
            0 0 0 rgba(255, 200, 140, 0);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.09) inset,
            0 14px 38px rgba(12, 8, 28, 0.58),
            0 0 28px rgba(200, 160, 255, 0.22);
    }
}

.dixit-board {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    overflow: visible;
}

.dixit-hero {
    padding: 1.1rem 1.35rem;
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(250, 246, 238, 0.07), rgba(20, 16, 28, 0.92));
    border: 1px solid rgba(201, 169, 74, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(42, 34, 56, 0.6),
        0 12px 40px rgba(0, 0, 0, 0.4);
    overflow: visible;
}
.dixit-hero__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.dixit-hero .dixit-progress-line {
    margin: 0.35rem 0 0;
    width: 100%;
    font-size: 0.9rem;
}
.dixit-hero__name {
    margin: 0 0 0.35rem 0;
    font-size: clamp(1.25rem, 3vw, 1.65rem);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.dixit-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
}
.dixit-hero__meta .coach-hint-btn {
    flex-shrink: 0;
}
.dixit-hero__deck {
    font-size: 0.85rem;
    color: var(--ms-color-gray-warm-3);
}
.dixit-pill {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.dixit-pill--round {
    background: rgba(120, 90, 200, 0.35);
    color: var(--ms-color-lavender-dark);
    border: 1px solid rgba(200, 180, 255, 0.25);
}
.dixit-pill--phase {
    background: rgba(212, 168, 75, 0.25);
    color: var(--ms-color-cream-warm-2);
    border: 1px solid rgba(212, 168, 75, 0.45);
}
.dixit-countdown-scene {
    position: relative;
    display: inline-block;
    margin: 0.65rem 0 0;
    line-height: 0;
    vertical-align: top;
}
.dixit-countdown-scene__art {
    display: block; 
    width: min(260px, 88vw);
    height: auto;
    max-height: 148px;
    border-radius: 18px;
    object-fit: cover;
    object-position: center;
    border: 2px solid rgba(232, 200, 106, 0.45);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        0 8px 22px rgba(12, 8, 28, 0.35);
}
.dixit-countdown-scene__digits {
    position: absolute;
    left: 50%;
    bottom: 19%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 4;
    font-size: clamp(1.85rem, 5.5vw, 2.85rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--ms-color-cyan-pale);
    text-shadow:
        0 0 12px rgba(120, 240, 255, 0.95),
        0 0 28px rgba(80, 180, 255, 0.55),
        0 2px 4px rgba(0, 20, 40, 0.85);
    pointer-events: none;
}
.dixit-countdown-scene.is-warning .dixit-countdown-scene__digits {
    color: var(--ms-color-gold-light-3);
    text-shadow:
        0 0 14px rgba(255, 210, 120, 0.9),
        0 0 28px rgba(255, 170, 60, 0.45),
        0 2px 5px rgba(40, 20, 0, 0.75);
}
.dixit-countdown-scene.is-urgent .dixit-countdown-scene__digits {
    color: var(--ms-color-red-soft);
    text-shadow:
        0 0 16px rgba(255, 120, 120, 0.95),
        0 0 34px rgba(255, 80, 80, 0.5),
        0 2px 5px rgba(40, 0, 0, 0.8);
}
.dixit-countdown-scene.is-critical .dixit-countdown-scene__digits {
    animation: countdown-pulse 0.55s ease-in-out infinite;
}
.dixit-countdown-scene.is-timeout .dixit-countdown-scene__digits {
    color: var(--ms-color-slate-pale);
    text-shadow: 0 0 10px rgba(180, 200, 255, 0.5);
}
.dixit-prompt-block {
    margin: 1rem 0 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid rgba(212, 168, 75, 0.7);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0 10px 10px 0;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--ms-color-cream-tan);
}
body.mind-sync-game .alert.error {
    background: rgba(180, 40, 50, 0.25);
    color: var(--ms-color-red-pale);
    border: 1px solid rgba(255, 120, 120, 0.35);
}
body.mind-sync-game .alert.success {
    background: rgba(40, 120, 70, 0.25);
    color: var(--ms-color-mint);
    border: 1px solid rgba(100, 200, 140, 0.35);
}

.dixit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ms-spacing-md);
}
@media (min-width: 900px) {
    .dixit-layout {
        grid-template-columns: minmax(260px, 280px) minmax(0, 1fr);
        align-items: start;
    }
}

.dixit-scores {
    max-width: clamp(220px, 28vw, 360px);
    padding: var(--ms-spacing-md);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(201, 169, 74, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.dixit-scores__timer {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 0 0.85rem;
}
.dixit-scores .dixit-countdown-scene {
    margin: 0;
    width: 100%;
    max-width: 100%;
}
.dixit-scores .dixit-countdown-scene__art {
    width: 100%;
    height: auto;
    max-height: 128px;
    object-fit: cover;
}
Sidebar timer: scene only has position:absolute children — need definite width (not fit-content + %). */
.dixit-scores__timer .local-avatar-clock {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    padding: 0.45rem 0.5rem 0.5rem;
    box-sizing: border-box;
}
.dixit-scores__timer .local-avatar-clock__scene {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 900px) {
    Sidebar: explicit 1:1 box so the 1:1 asset scales down fully inside the frame */
    .dixit-scores__timer .local-avatar-clock__scene {
        width: min(196px, 100%);
        max-width: 196px;
        aspect-ratio: 1 / 1;
        height: auto;
    }
}
.dixit-scores__timer .local-avatar-clock__art {
    border-radius: 0;
}
/* Timer Fix #3 — .dixit-scores__timer .local-avatar-clock (Sidebar Local Game) */
.dixit-scores__timer .local-avatar-clock__digits {
    color: var(--ms-color-cream-light);
    text-shadow: 0 2px 4px rgba(10, 6, 18, 0.7);
    z-index: 40;
}
.dixit-scores__timer .local-avatar-clock__scene {
    min-width: 140px;
}
@media (max-width: 199px) {
    .dixit-scores__timer .local-avatar-clock__scene {
        aspect-ratio: 30 / 4;
        height: auto;
    }
}
@media (min-width: 200px) {
    .dixit-scores__timer .local-avatar-clock__scene {
        aspect-ratio: 30 / 4;
        height: auto;
    }
}
.dixit-scores__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.dixit-scores__title {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ms-color-gray-dark);
}
.dixit-scores__toggle-btn {
    min-width: 28px;
    height: 28px;
    padding: 0.2rem;
}
.dixit-scores.is-collapsed .dixit-scores__list,
.dixit-scores.is-collapsed .local-score-category,
.dixit-scores.is-collapsed .dixit-scores__deck-line {
    display: none;
}
.dixit-scores__deck-line {
    margin: 0 0 0.65rem;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--ms-color-gray-dark);
}
.dixit-scores__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.dixit-score-chip {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    min-height: 58px;
    padding: 0;
    border-radius: 12px;
    font-size: 0.9rem;
    border: 1px solid rgba(120, 90, 160, 0.35);
    background-color: rgba(10, 6, 20, 0.88);
    background-image:
        linear-gradient(105deg, rgba(6, 4, 14, 0.82) 0%, rgba(22, 14, 38, 0.55) 45%, rgba(10, 8, 24, 0.78) 100%),
        url("score-chip-bg.png");
    background-size: cover, cover;
    background-position: center, center;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 10px rgba(0, 0, 0, 0.35);
}
.dixit-score-chip[data-active-turn="1"] {
    overflow: visible;
    z-index: 1;
}
.dixit-score-chip[data-active-turn="1"] .dixit-score-chip__avatar-wrap {
    box-shadow: inset 4px 0 0 rgba(255, 210, 140, 0.95);
}
.dixit-score-chip--storyteller {
    border-color: rgba(212, 168, 75, 0.55);
    box-shadow:
        inset 0 0 0 1px rgba(255, 210, 140, 0.12),
        0 0 14px rgba(212, 168, 75, 0.22),
        0 2px 10px rgba(0, 0, 0, 0.35);
}
.dixit-score-chip--active-turn:not(.dixit-score-chip--storyteller) {
    border-color: rgba(212, 168, 75, 0.58);
    box-shadow:
        inset 0 0 0 1px rgba(255, 210, 140, 0.14),
        0 0 16px rgba(212, 168, 75, 0.28),
        0 2px 10px rgba(0, 0, 0, 0.35);
}
.dixit-score-chip--storyteller.dixit-score-chip--active-turn {
    border-color: rgba(212, 168, 75, 0.78);
    box-shadow:
        inset 0 0 0 1px rgba(255, 230, 180, 0.2),
        0 0 20px rgba(255, 210, 140, 0.38),
        0 2px 10px rgba(0, 0, 0, 0.35);
}
.dixit-score-chip__player {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: stretch;
    gap: 0;
}
.dixit-score-chip__avatar-wrap {
    flex-shrink: 0;
    width: 56px;
    min-height: 58px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.dixit-score-chip__avatar-wrap .local-char-avatar {
    width: 56px;
    min-width: 56px;
    height: 100%;
    min-height: 58px;
    border-radius: 0;
    align-self: stretch;
}
.dixit-score-chip__avatar-wrap .local-char-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 0;
}
.dixit-score-chip__avatar-fallback {
    display: block; 
    width: 100%;
    min-height: 58px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
}
.dixit-score-chip__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.45rem 0.4rem 0.45rem 0.5rem;
}
.dixit-score-chip__player-name {
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.25;
    color: var(--ms-color-violet-lighter);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.game-storyteller-line {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: wrap;
    margin-top: 0.1rem;
}
.game-storyteller-line__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    aspect-ratio: 1 / 1;
    filter:
        drop-shadow(0 0 10px rgba(255, 200, 100, 0.5))
        drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75));
}
.game-storyteller-line__img {
    display: block; 
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.game-storyteller-line__badge {
    flex-shrink: 0;
    padding: 0.12rem 0.42rem;
    border-radius: 7px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--ms-color-cream-off-3);
    background: linear-gradient(180deg, rgba(255, 224, 160, 0.4), rgba(170, 120, 45, 0.3));
    border: 1px solid rgba(255, 230, 190, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 14px rgba(255, 200, 100, 0.2);
    text-transform: none;
}
與 .game-storyteller-line 同色、同版面（圖示改為內嵌 SVG） */
.game-active-turn-line {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: wrap;
    margin-top: 0.1rem;
}
.game-active-turn-line__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    aspect-ratio: 1 / 1;
    filter:
        drop-shadow(0 0 10px rgba(255, 200, 100, 0.5))
        drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75));
}
.game-active-turn-line__svg {
    display: block; 
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.game-active-turn-line__badge {
    flex-shrink: 0;
    padding: 0.12rem 0.42rem;
    border-radius: 7px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--ms-color-cream-off-3);
    background: linear-gradient(180deg, rgba(255, 224, 160, 0.4), rgba(170, 120, 45, 0.3));
    border: 1px solid rgba(255, 230, 190, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 14px rgba(255, 200, 100, 0.2);
    text-transform: none;
}
.game-verdict-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    aspect-ratio: 1 / 1;
}
.game-verdict-mark__img {
    display: block; 
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.game-verdict-mark--ok {
    filter:
        drop-shadow(0 0 14px rgba(55, 220, 150, 0.5))
        drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}
.game-verdict-mark--bad {
    filter:
        drop-shadow(0 0 14px rgba(255, 90, 110, 0.45))
        drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}
.dixit-score-chip__score-block {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.55rem 0.4rem 0.35rem;
    min-width: 4.75rem;
}
.dixit-score-chip__acting-pill {
    display: block; 
    max-width: 100%;
    padding: 0.22rem 0.5rem;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.25;
    color: var(--ms-color-brown);
    text-align: center;
    word-break: keep-all;
    background: linear-gradient(180deg, var(--ms-color-peach-warm), var(--ms-color-gold-sand));
    border: 1px solid rgba(255, 236, 200, 0.95);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 2px 10px rgba(0, 0, 0, 0.5);
}
.dixit-score-chip__val {
    flex-shrink: 0;
    align-self: flex-end;
    padding: 0;
    font-size: 1.38rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ms-color-gold-light-2);
    font-variant-numeric: tabular-nums;
    text-shadow:
        0 0 14px rgba(255, 210, 130, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.95);
}

.dixit-stage-wrap {
    min-width: 0;
}
.dixit-stage {
    padding: 1.1rem 1.25rem 1.35rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(30, 26, 42, 0.95), rgba(18, 14, 24, 0.98));
    border: 1px solid rgba(201, 169, 74, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(42, 34, 56, 0.5),
        0 16px 48px rgba(0, 0, 0, 0.45);
}
.dixit-stage__heading {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ms-color-gray-mid);
}
.dixit-stage__empty {
    padding: var(--ms-spacing-xl) var(--ms-spacing-md);
    text-align: center;
    color: var(--ms-color-gray-mid);
    font-size: 0.95rem;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 14px;
}
.dixit-stage__hint {
    margin: 0 0 1rem;
    color: var(--ms-color-border-light);
    font-size: 0.95rem;
}

.dixit-card img { 
    width: 100%;
    height: auto;
    display: block; 
}

.dixit-card--selected {
    border: 3px solid var(--ms-color-blue);
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
    transform: scale(1.05);
    transition: all 0.2s ease;
}

.dixit-table-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--ms-spacing-md);
}
@media (max-width: 639px) {
    .dixit-table-grid {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 640px) and (max-width: 767px) {
    .dixit-table-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.15rem;
    }
}
@media (min-width: 768px) {
    .dixit-table-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1.15rem;
    }
}
.dixit-table-grid--vote {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

投票：與手牌選取相同的「點選放大」展開（線上 / 本機） */
.dixit-vote-dock--expand {
    display: grid;
    grid-template-columns: repeat(var(--vote-cols, 3), minmax(0, 1fr));
    grid-auto-flow: row;
    align-items: stretch;
    justify-items: stretch;
    gap: 0.95rem;
    overflow-x: visible;
    overflow-y: visible;
}
.dixit-vote-dock--expand .dixit-table-card--pick {
    width: 100%;
    min-width: 0;
    max-width: none;
    transform-origin: center center;
    transition:
        width 1.5s ease,
        max-width 1.5s ease,
        transform 1.5s ease,
        opacity 1.5s ease,
        filter 1.5s ease,
        box-shadow 1.5s ease;
}
.dixit-vote-dock--expand .dixit-table-card__frame,
.dixit-vote-dock--expand .dixit-table-card__badge {
    transition:
        border-color 1.5s ease,
        box-shadow 1.5s ease,
        opacity 1.5s ease,
        transform 1.5s ease;
}
.dixit-vote-dock--expand.dixit-vote-dock--has-featured {
    justify-content: center;
}
.dixit-vote-dock--expand.dixit-vote-dock--has-featured .dixit-table-card--pick {
    opacity: 0.72;
    filter: saturate(0.8) brightness(0.84);
}
.dixit-vote-dock--expand.dixit-vote-dock--has-featured .dixit-table-card--pick.is-minimized {
    transform: translateY(0) scale(0.9);
}
.dixit-vote-dock--expand.dixit-vote-dock--has-featured .dixit-table-card--pick.is-featured {
    order: -1;
    grid-column: 1 / -1;
    width: min(66%, 38rem);
    max-width: min(66%, 38rem);
    justify-self: center;
    opacity: 1;
    filter: none;
    transform: translateY(-8px) scale(1);
    z-index: 3;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.48),
        0 0 0 3px rgba(212, 168, 75, 0.88),
        0 12px 36px rgba(212, 168, 75, 0.22);
}
.dixit-vote-dock--expand.dixit-vote-dock--has-featured .dixit-table-card--pick.is-featured .dixit-table-card__frame {
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(255, 255, 255, 0.14);
}
@media (max-width: 640px) {
    .dixit-vote-dock--expand.dixit-vote-dock--has-featured .dixit-table-card--pick.is-featured {
        width: min(100%, 66vw);
        max-width: min(100%, 66vw);
    }
}
@media (max-width: 640px) {
    .dixit-vote-dock--expand {
        gap: 0.7rem;
    }
    .dixit-vote-dock--expand.dixit-vote-dock--has-featured .dixit-table-card--pick.is-featured {
        width: min(100%, 68vw);
        max-width: min(100%, 68vw);
    }
}
.dixit-vote-your-note {
    margin-bottom: 0.45rem;
    font-size: 0.86rem;
}
.dixit-table-grid--yours {
    margin-bottom: 1rem;
    pointer-events: none;
    user-select: none;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.65rem;
    opacity: 0.95;
}
.dixit-table-card--nonvote {
    outline: 1px dashed rgba(255, 255, 255, 0.22);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    transition: none;
}
.dixit-table-card--nonvote:hover {
    transform: none;
}
.dixit-table-card--nonvote .dixit-table-card__frame {
    filter: saturate(0.88);
}

.dixit-table-card {
    position: relative;
    display: block; 
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dixit-table-card__frame {
    display: block; 
    aspect-ratio: 1376 / 768;
    background: var(--ms-color-dark-bg-2);
}
.dixit-table-card__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; 
}
.dixit-table-card__owner {
    display: block; 
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.55);
    color: var(--ms-color-lavender-soft-5);
}
.dixit-table-card__tag {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0.2rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
     border-radius: 6px;
     background: rgba(212, 168, 75, 0.9);
     color: var(--ms-color-dark-navy);
 }

.dixit-table-card--pick {
    cursor: pointer;
}
.dixit-table-card__radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.dixit-table-card--pick:focus-within {
    outline: 2px solid rgba(212, 168, 75, 0.8);
    outline-offset: 3px;
}
.dixit-table-card--pick:has(.dixit-table-card__radio:checked) {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 12px 36px rgba(212, 168, 75, 0.25),
        0 0 0 3px rgba(212, 168, 75, 0.85),
        0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.dixit-table-card__badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.6rem 0.5rem;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 800;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    color: var(--ms-color-white);
    opacity: 0;
    transition: opacity 0.2s;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.dixit-table-card--pick:has(.dixit-table-card__radio:checked) .dixit-table-card__badge {
    opacity: 1;
}
.local-guess-card--secret {
    box-shadow:
        0 0 0 4px rgba(120, 255, 185, 0.95),
        0 14px 40px rgba(20, 140, 86, 0.55),
        0 10px 28px rgba(0, 0, 0, 0.6);
}
.local-guess-card--picked:not(.local-guess-card--secret) {
    box-shadow:
        0 0 0 4px rgba(255, 198, 106, 0.95),
        0 12px 32px rgba(155, 106, 22, 0.5),
        0 10px 24px rgba(0, 0, 0, 0.55);
}
.local-guess-card--secret .dixit-table-card__badge,
.local-guess-card--picked .dixit-table-card__badge {
    opacity: 1;
    font-size: 0.9rem;
    padding-bottom: 0.75rem;
}
.local-guess-card--secret .dixit-table-card__badge,
.local-guess-card--secret.local-guess-card--picked .dixit-table-card__badge {
    background: linear-gradient(transparent, rgba(12, 92, 54, 0.88));
}
.local-guess-card--picked:not(.local-guess-card--secret) .dixit-table-card__badge {
    background: linear-gradient(transparent, rgba(118, 76, 18, 0.85));
}

Guess mode pages: shift visual focus to large cards */
.local-guess {
    display: grid;
    gap: var(--ms-spacing-md);
}
.local-guess__hero {
    text-align: center;
    padding: 1rem 0 1.5rem;
}
.local-guess__heading {
    margin-bottom: 0.6rem;
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-weight: 800;
}
.local-guess__lead {
    margin: 0 auto;
    max-width: 58rem;
}

/* WordHunt: clue-style keyword presentation (no timer → tight spacing) */
.page--wordhunt .local-guess__heading {
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.85;
    margin-bottom: 0.4rem;
}
.page--wordhunt .local-guess__hero--wordhunt {
    padding-block: 0;
    margin-block: 0 1rem;
    text-align: left;
}
.page--wordhunt .local-guess__hero--wordhunt .dixit-prompt-block {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-top: 0.5rem;
    padding: 1.15rem 1.5rem;
}

.local-guess__form {
    display: grid;
    gap: 0.9rem;
}
.local-guess-clock-row {
    display: flex;
    justify-content: center;
    margin: 0.2rem 0 0.4rem;
}
.local-avatar-clock--guess-wide {
    padding: 0.42rem 0.58rem 0.5rem;
    border-radius: 16px;
}
.local-avatar-clock--guess-wide .local-avatar-clock__scene {
    width: min(560px, 88vw);
    max-width: min(560px, 88vw);
    min-width: min(260px, 72vw);
    aspect-ratio: 30 / 4;
    border-radius: 14px;
    border-width: 2px;
}
.local-avatar-clock--guess-wide .local-avatar-clock__digits {
    font-size: clamp(1.3rem, 4.8vw, 2.1rem);
    color: var(--ms-color-cyan-pale);
    text-shadow:
        0 0 14px rgba(120, 240, 255, 0.95),
        0 0 32px rgba(80, 180, 255, 0.55),
        0 2px 5px rgba(0, 20, 40, 0.88);
    z-index: 4;
}
.local-avatar-clock--guess-play {
    max-width: min(88vw, 36rem);
}
.local-guess-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.9rem, 2.4vw, 1.4rem);
}

本機猜測：點選放大展開 */
.local-guess-dock--expand {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.9rem, 2.4vw, 1.4rem);
    align-items: stretch;
    justify-items: stretch;
    overflow-x: visible;
    overflow-y: visible;
}
.local-guess-dock--expand .dixit-table-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    transform-origin: center center;
    transition:
        width 1.5s ease,
        max-width 1.5s ease,
        transform 1.5s ease,
        opacity 1.5s ease,
        filter 1.5s ease,
        box-shadow 1.5s ease;
}
.local-guess-dock--expand.local-guess-dock--has-featured {
    justify-content: center;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.local-guess-dock--has-featured .dixit-table-card.is-minimized {
    transition: none;
    transform-origin: center top;
    transform: translateY(0) scale(0.75);
    opacity: 0.6;
    filter: saturate(0.5);
}
.local-guess-dock--expand .dixit-table-card.is-featured {
    order: -1;
    grid-column: 1 / -1;
    width: min(70%, 42rem);
    max-width: min(70%, 42rem);
    justify-self: center;
    opacity: 1;
    filter: none;
    transform: translateY(-8px) scale(1.05);
    z-index: 3;
    box-shadow:
        0 0 1.5rem rgba(255, 215, 0, 0.6),
        0 0.5rem 2rem rgba(0, 0, 0, 0.3);
}

@media (max-width: 640px) {
    .local-guess-dock--expand.local-guess-dock--has-featured {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .local-guess-dock--expand .dixit-table-card.is-featured {
        width: 66vw;
        max-width: 66vw;
    }
}
@media (max-width: 640px) {
    .local-guess-dock--expand.local-guess-dock--has-featured {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .local-guess-dock--expand .dixit-table-card.is-featured {
        width: 80vw;
        max-width: 80vw;
    }
}

.local-guess__clue-input {
    width: 70%;
    max-width: 42rem;
    margin: 0.75rem auto 0;
}
.local-guess__clue-input label {
    display: block; 
    font-size: 0.85rem;
    color: var(--ms-color-purple-muted);
    margin-bottom: 0.35rem;
}
.local-guess__clue-input input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.35);
    color: var(--ms-color-lavender-pale);
    font-size: 1rem;
}
.local-guess__clue-input input::placeholder {
    color: var(--ms-color-gray-warm);
}

.local-guess-grid .dixit-table-card {
    padding: 0;
    border: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 16px;
    box-shadow:
        0 10px 34px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.12);
}
.local-guess-grid .dixit-table-card__frame {
    aspect-ratio: 1376 / 768;
    overflow: hidden;
}
.local-guess-grid .dixit-table-card__frame img {
    width: 100%;
    height: 100%;
    display: block; 
    object-fit: cover;
}
.local-guess-grid--focus .dixit-table-card__frame {
    min-height: clamp(150px, 18vw, 250px);
}
.local-guess-grid .dixit-table-card.js-guess-card-pick.is-selected {
    transform: translateY(-5px) scale(1.02);
    box-shadow:
        0 12px 36px rgba(212, 168, 75, 0.3),
        0 0 0 3px rgba(212, 168, 75, 0.9),
        0 12px 30px rgba(0, 0, 0, 0.48);
}
.local-guess--secret .dixit-action-bar,
.local-guess--play .dixit-action-bar {
    justify-content: center;
}
.local-guess--cover .dixit-table-card--nonvote .dixit-table-card__frame {
    filter: brightness(0.24) saturate(0.12) blur(0.6px);
}
.local-guess-grid--cover {
    position: relative;
}
.local-guess-cover-stack {
    position: relative;
}
.local-guess-cover-layer {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 216, 120, 0.24) 0%, rgba(10, 6, 20, 0.78) 42%, rgba(8, 6, 16, 0.95) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 230, 170, 0.2),
        0 12px 30px rgba(0, 0, 0, 0.52);
    pointer-events: auto;
}
.local-guess-cover-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(6, 4, 12, 0.3);
}
.local-guess-cover-layer .local-avatar-clock__mage,
.local-guess-cover-layer .local-avatar-clock__wrap {
    width: 100%;
    height: 100%;
}
.local-guess-cover-layer .local-avatar-clock--cover-layer .local-avatar-clock__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.local-avatar-clock--cover-layer {
    width: 100%;
    height: 100%;
}

/* 5 秒遮蓋：正方 LAYER 以 coach-countdown-mage-1x1.png 為主體，疊倒數；關閉一般時鐘外框／呼吸動畫 */
.local-guess-cover-layer .local-avatar-clock.local-guess-cover-mage-1x1 {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    animation: none;
    border-radius: 0;
}
.local-guess-cover-layer .local-avatar-clock.local-guess-cover-mage-1x1::after {
    display: none;
}
.local-guess-cover-layer .local-guess-cover-mage-1x1 .local-avatar-clock__wrap {
    animation: none;
}
.local-guess-cover-layer .local-guess-cover-mage-1x1__scene {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: radial-gradient(ellipse 95% 90% at 50% 55%, rgba(32, 24, 48, 0.35), rgba(10, 8, 18, 0.55));
}
.local-guess-cover-layer .local-guess-cover-mage-1x1__scene .local-guess-cover-mage-1x1__art {
    z-index: 1;
}

.local-guess-cover-layer .local-avatar-clock.local-avatar-clock--cover-layer .local-avatar-clock__scene {
    aspect-ratio: 1 / 1;
    width: min(100%, min(92vw, 440px));
    max-width: min(92vw, 440px);
    min-height: 0;
    height: auto;
    margin: auto;
    border-radius: 20px;
    border-width: 2px;
    container-type: size;
}
.local-guess-cover-layer .local-avatar-clock__picture,
.local-guess-cover-layer .local-avatar-clock__art {
    inset: 0;
    width: 100%;
    height: 100%;
}
.local-guess-cover-layer .local-avatar-clock__art {
    object-fit: cover;
    object-position: center;
}
.local-guess-cover-layer .local-guess-cover-mage-1x1__art {
    object-fit: contain;
}
/* 覆蓋層倒數：優先級需高於 .local-avatar-clock.is-warning/.is-urgent 對數字的著色 */
.local-guess-cover-layer .local-avatar-clock.local-avatar-clock--cover-layer .local-avatar-clock__digits {
    position: absolute;
    inset: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 0.35rem;
    box-sizing: border-box;
    text-align: center;
    transform-origin: center center;
    z-index: 60;
    line-height: 1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    font-size: clamp(2.4rem, 33cqh, 8rem);
    letter-spacing: 0.02em;
    color: var(--ms-color-cream-light);
    text-shadow: 0 2px 4px rgba(10, 6, 18, 0.7);
    pointer-events: none;
    animation: local-guess-cover-digits-pulse 0.92s ease-in-out infinite;
}
.local-guess-cover-layer .local-avatar-clock.local-avatar-clock--cover-layer.is-warning .local-avatar-clock__digits,
.local-guess-cover-layer .local-avatar-clock.local-avatar-clock--cover-layer.is-urgent .local-avatar-clock__digits,
.local-guess-cover-layer .local-avatar-clock.local-avatar-clock--cover-layer.is-critical .local-avatar-clock__digits {
    color: var(--ms-color-orange-bright);
    text-shadow:
        0 0 10px rgba(255, 40, 0, 0.95),
        0 0 26px rgba(255, 120, 20, 0.85),
        0 0 48px rgba(200, 30, 10, 0.55),
        0 3px 0 rgba(120, 18, 0, 0.55),
        0 5px 14px rgba(0, 0, 0, 0.65);
}
@keyframes local-guess-cover-digits-pulse {
    0% {
        transform: scale(0.96);
        filter: saturate(1.05) brightness(1);
    }
    100% {
        transform: scale(1.04);
        filter: saturate(1.2) brightness(1.06);
    }
}
@media (min-width: 900px) {
    .local-guess-grid .dixit-table-card__frame {
        min-height: 220px;
    }
}
@media (max-width: 768px) {
    .local-avatar-clock--guess-wide .local-avatar-clock__scene {
        width: min(94vw, 420px);
        min-width: min(240px, 82vw);
    }
    .local-avatar-clock--guess-wide .local-avatar-clock__digits {
        font-size: clamp(1.15rem, 5.5vw, 1.7rem);
    }
    .local-avatar-clock--guess-play {
        max-width: min(94vw, 26rem);
    }
    .local-guess-grid {
        gap: 0.7rem;
    }
    .local-guess-grid--focus .dixit-table-card__frame {
        min-height: clamp(118px, 30vw, 168px);
    }
}

.dixit-hand-shell {
    padding: 1.15rem 1.25rem 1.5rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(40, 32, 58, 0.55), rgba(20, 16, 28, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.35);
}
.dixit-hand-head {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
}
.dixit-hand-head__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.dixit-hand-head__actor {
    margin: 0;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    font-size: 0.88rem;
     font-weight: 650;
     line-height: 1.45;
     color: var(--ms-color-lavender-soft-3);
     text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
     background: linear-gradient(
        105deg,
        rgba(212, 168, 75, 0.22) 0%,
        rgba(90, 70, 140, 0.35) 50%,
        rgba(20, 16, 32, 0.55) 100%
    );
    border: 1px solid rgba(212, 168, 75, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 14px rgba(0, 0, 0, 0.35);
}
.dixit-hand-head__title {
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ms-color-lavender-muted-2);
}
.dixit-hand-head__live {
    margin: 0;
    font-size: 0.8rem;
}

.dixit-selection-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.65rem 1rem;
    border-radius: 12px;
     background: rgba(212, 168, 75, 0.15);
     border: 1px solid rgba(212, 168, 75, 0.45);
     color: var(--ms-color-cream-pale);
 }
.dixit-selection-banner__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ms-color-gold-mid);
}
.dixit-selection-banner__thumb-wrap {
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.dixit-selection-banner__thumb {
    display: block; 
    width: 120px;
    height: auto;
    aspect-ratio: 1376 / 768;
    object-fit: cover;
    vertical-align: middle;
}
.dixit-selection-banner__id {
    font-size: 1rem;
}
.dixit-selection-banner__id strong {
    color: var(--ms-color-white);
    font-size: 1.15rem;
}

.hand-dock {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    overflow-x: visible;
    overflow-y: visible;
    padding: 0.5rem 0.25rem 0.5rem;
}
@media (max-width: 640px) {
    .hand-dock {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-inline: var(--ms-spacing-sm);
    }
    .hand-dock .hand-card {
        flex-shrink: 0;
        scroll-snap-align: center;
    }
}
.hand-dock--readonly {
    opacity: 0.92;
}

.hand-card {
    position: relative;
    flex: 0 1 180px;
    width: min(180px, 30vw);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 14px;
    transition: transform 0.2s ease;
}
.hand-card--static {
    width: min(180px, 30vw);
    flex: 0 1 180px;
}
.hand-card__frame {
    display: block; 
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1376 / 768;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.12);
}
.hand-card__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; 
}
.hand-card__ring {
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    border: 3px solid transparent;
    pointer-events: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.hand-card__check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
     border-radius: 50%;
     background: rgba(212, 168, 75, 0.95);
     color: var(--ms-color-dark-navy);
     font-weight: 900;
     font-size: 0.95rem;
    line-height: 28px;
    text-align: center;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.hand-card.is-selected .hand-card__ring {
    border-color: rgba(212, 168, 75, 0.95);
    box-shadow: 0 0 0 2px rgba(212, 168, 75, 0.35), 0 8px 28px rgba(212, 168, 75, 0.2);
}
.hand-card.is-selected {
    transform: translateY(-6px);
    z-index: 2;
}
.hand-card.is-selected .hand-card__check {
    opacity: 1;
    transform: scale(1);
}
.hand-card:hover:not(.hand-card--static) {
    transform: translateY(-3px);
}
.hand-dock--local-expand {
    display: grid;
    grid-template-columns: repeat(var(--hand-cols, 3), minmax(0, 1fr));
    grid-auto-flow: row;
    align-items: stretch;
    justify-items: stretch;
    gap: 0.95rem;
}
.hand-dock--local-expand .hand-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    transform-origin: center center;
    transition:
        width 1.5s ease,
        max-width 1.5s ease,
        transform 1.5s ease,
        opacity 1.5s ease,
        filter 1.5s ease;
}
.hand-dock--local-expand .hand-card__frame,
.hand-dock--local-expand .hand-card__ring,
.hand-dock--local-expand .hand-card__check {
    transition:
        border-color 1.5s ease,
        box-shadow 1.5s ease,
        opacity 1.5s ease,
        transform 1.5s ease;
}
.hand-dock--local-expand.hand-dock--has-featured {
    justify-content: center;
}
.hand-dock--local-expand.hand-dock--has-featured .hand-card {
    opacity: 0.72;
    filter: saturate(0.8) brightness(0.84);
}
.hand-dock--local-expand.hand-dock--has-featured .hand-card.is-minimized {
    transform: translateY(0) scale(0.9);
}
.hand-dock--local-expand.hand-dock--has-featured .hand-card.is-featured {
    order: -1;
    grid-column: 1 / -1;
    width: min(66%, 38rem);
    max-width: min(66%, 38rem);
    justify-self: center;
    opacity: 1;
    filter: none;
    transform: translateY(-8px) scale(1);
    z-index: 3;
}
.hand-dock--local-expand.hand-dock--has-featured .hand-card.is-featured .hand-card__frame {
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(255, 255, 255, 0.14);
}
.hand-dock--local-expand .hand-card.is-featured .hand-card__check {
    transform: scale(1.06);
}
@media (max-width: 640px) {
    .hand-dock--local-expand.hand-dock--has-featured .hand-card.is-featured {
        width: min(100%, 66vw);
        max-width: min(100%, 66vw);
    }
}
@media (max-width: 640px) {
    .hand-dock--local-expand {
        gap: 0.7rem;
    }
    .hand-dock--local-expand.hand-dock--has-featured .hand-card.is-featured {
        width: min(100%, 68vw);
        max-width: min(100%, 68vw);
    }
}

.dixit-action-form {
    margin-top: 1.25rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dixit-field {
    display: block; 
    margin-bottom: 0.85rem;
}
.dixit-field__label {
    display: block; 
    font-size: 0.85rem;
    color: var(--ms-color-purple-muted);
    margin-bottom: 0.35rem;
}
.dixit-action-form input[type="text"] {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.35);
    color: var(--ms-color-lavender-pale);
    font-size: 1rem;
}
.dixit-action-form input[type="text"]::placeholder {
    color: var(--ms-color-gray-warm);
}
.dixit-action-hint {
    margin: 0 0 0.75rem;
    color: var(--ms-color-purple-muted);
    font-size: 0.95rem;
}
.dixit-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* WordHunt: center Submit Guess button in picking phase */
.page--wordhunt .local-guess--picking .dixit-action-bar {
    justify-content: center;
}
.dixit-vote-status {
    font-size: 0.9rem;
    color: var(--ms-color-violet-light);
}
.dixit-wait-msg {
    margin: 0 0 0.75rem;
}

body.mind-sync-game .button {
    background-color: var(--ms-color-purple-deep);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 48%),
        linear-gradient(180deg, rgba(107, 92, 224, 0.55) 0%, rgba(85, 72, 201, 0.92) 100%),
        var(--ms-btn-tex-violet);
    background-size: cover, cover, cover;
    background-position: center, center, center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 4px 14px rgba(85, 72, 201, 0.45);
    font-weight: 600;
}
body.mind-sync-game .button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}
body.mind-sync-game .button--gold {
    background-color: var(--ms-color-gold-medium);
    background-image:
        linear-gradient(180deg, rgba(255, 235, 190, 0.35) 0%, transparent 50%),
        var(--ms-btn-tex-gold);
    background-size: cover, cover;
    background-position: center, center;
    color: var(--ms-color-cream-off);
    border: 1px solid rgba(255, 220, 150, 0.45);
    text-shadow:
        0 1px 2px rgba(12, 6, 4, 0.95),
        0 0 1px rgba(0, 0, 0, 0.75);
    box-shadow:
        0 2px 0 rgba(40, 28, 20, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 18px rgba(212, 168, 75, 0.35);
}
body.mind-sync-game .button--gold:hover:not(:disabled) {
    filter: brightness(1.06) saturate(1.05);
}
body.mind-sync-game .ghost {
    background-color: rgba(255, 255, 255, 0.07);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 52%),
        var(--ms-btn-tex-violet);
     background-size: cover, cover;
     background-position: center, center;
     color: var(--ms-color-lavender-light);
     border: 1px solid rgba(255, 255, 255, 0.15);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.2);
}
body.mind-sync-game .ghost:hover:not(:disabled) {
    filter: brightness(1.06);
    color: var(--ms-color-violet-lighter);
    border-color: rgba(255, 255, 255, 0.22);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
body.mind-sync-game .ghost:focus-visible {
    color: var(--ms-color-violet-lighter);
    outline: 2px solid rgba(232, 200, 120, 0.85);
    outline-offset: 2px;
}
.dixit-footer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
    padding: 0.5rem 0 1rem;
}

Local pass-and-play: icon + visible label, consistent min-width */
.button.button--local-action,
a.button.button--local-action {
    min-width: 11rem;
    justify-content: center;
}
.button.button--local-footer,
a.button.button--local-footer {
    display: inline-flex;
    min-width: 10.5rem;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    justify-content: center;
}
.local-footer-btn__icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.local-footer-btn__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.local-footer-btn__text {
    font-size: 0.72rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
}
.dixit-action-bar .button.button--local-action {
    flex-shrink: 0;
}
.dixit-footer-actions--host {
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    padding-top: 0.85rem;
    margin-top: 0.25rem;
}
.dixit-host-close-form {
    margin: 0;
}
.dixit-host-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(180, 90, 90, 0.5);
    background-color: rgba(255, 232, 232, 0.28);
    background-image:
        linear-gradient(180deg, rgba(255, 190, 190, 0.35) 0%, rgba(255, 220, 220, 0.12) 100%),
        var(--ms-btn-tex-violet);
    background-size: cover, cover;
    background-position: center, center;
    color: var(--ms-color-red-soft-2);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.dixit-host-close-btn:hover {
    filter: brightness(1.04);
    background-color: rgba(255, 210, 210, 0.4);
    background-image:
        linear-gradient(180deg, rgba(255, 180, 180, 0.45) 0%, rgba(255, 210, 210, 0.22) 100%),
        var(--ms-btn-tex-violet);
}

Game page: .button wins over .dixit-host-close-btn — restore destructive styling + texture */
body.mind-sync-game .button.dixit-host-close-btn {
     color: var(--ms-color-red-mid);
     border: 1px solid rgba(200, 100, 100, 0.55);
     background-color: rgba(80, 32, 32, 0.45);
    background-image:
        linear-gradient(180deg, rgba(255, 120, 100, 0.25) 0%, rgba(60, 24, 24, 0.55) 100%),
        var(--ms-btn-tex-violet);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 180, 180, 0.12),
        0 4px 14px rgba(80, 30, 30, 0.35);
}
body.mind-sync-game .button.dixit-host-close-btn:hover:not(:disabled) {
     filter: brightness(1.08);
     color: var(--ms-color-red-light);
 }
.local-reset-form {
    margin: 0;
}
Setup: main stage uses available width; inner panel caps readable line length */
.local-dixit--setup .dixit-stage {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}
.local-setup-panel {
    width: 100%;
    max-width: min(100%, 42rem);
    margin-left: auto;
    margin-right: auto;
    padding: var(--ms-spacing-md) var(--ms-spacing-md) var(--ms-spacing-20);
    border-radius: 14px;
    border: 1px solid rgba(255, 228, 170, 0.18);
    background:
        linear-gradient(180deg, rgba(16, 12, 28, 0.88) 0%, rgba(10, 8, 20, 0.92) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 28px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-sizing: border-box;
}
.local-setup-panel__heading {
    margin-bottom: 0.35rem;
}
.local-setup-panel__lead {
    margin: 0;
}
.local-setup-tabs {
    margin-top: 0.85rem;
}
.local-setup-tabs__nav {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    margin: 0 0 0.8rem;
    padding: 0.26rem;
    border-radius: 999px;
    border: 1px solid rgba(201, 169, 74, 0.22);
    background: rgba(12, 8, 24, 0.58);
}
.local-setup-tab {
    border: 0;
    border-radius: 999px;
    padding: 0.38rem 0.75rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: rgba(232, 220, 248, 0.9);
    background: transparent;
    cursor: pointer;
}
.local-setup-tab.is-active {
    color: var(--ms-color-brown-dark);
    background: linear-gradient(180deg, var(--ms-color-gold-light), var(--ms-color-gold-dark));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.local-setup-panel .local-add-form,
.local-setup-panel .local-form--start {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.local-quick-setup-card {
    margin: 0.2rem 0 0.95rem;
    padding: 0.85rem 1rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 228, 170, 0.22);
    background: linear-gradient(165deg, rgba(22, 18, 36, 0.92) 0%, rgba(14, 12, 26, 0.88) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 18px rgba(0, 0, 0, 0.25);
}
.local-quick-setup-card__title {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ms-color-violet-light);
    font-weight: 700;
}
.local-quick-setup-card__lead {
    margin: 0.35rem 0 0.65rem;
}
.local-form--quick-setup {
    gap: 0.6rem;
}
.local-quick-count {
    margin: 0;
    padding: 0;
    border: 0;
}
.local-quick-count > legend {
    margin: 0 0 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ms-color-lavender-muted);
}
.local-quick-count__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
.local-quick-count__option {
    display: block; 
}
.local-quick-count__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.local-quick-count__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.35rem;
    border-radius: 11px;
    border: 1px solid rgba(201, 169, 74, 0.28);
    background: rgba(26, 18, 46, 0.75);
    color: var(--ms-color-violet-lighter);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.local-quick-count__option.is-selected .local-quick-count__chip,
.local-quick-count__option:has(input:checked) .local-quick-count__chip {
    transform: translateY(-1px);
    border-color: rgba(255, 233, 180, 0.78);
    color: var(--ms-color-brown-dark);
    background: linear-gradient(180deg, var(--ms-color-gold-light), var(--ms-color-gold-dark));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 6px 14px rgba(0, 0, 0, 0.28);
}
.local-setup-panel .local-form--start {
    margin-top: 0.35rem;
    padding-top: 0.85rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
@media (min-width: 640px) {
    .local-setup-panel {
        max-width: min(100%, 48rem);
        padding: 1.15rem 1.25rem 1.4rem;
    }
}
@media (min-width: 900px) {
    .local-setup-panel {
        max-width: min(100%, 52rem);
    }
}
@media (max-width: 640px) {
    .local-setup-panel {
        padding: 0.85rem 0.75rem 1rem;
        border-radius: 12px;
    }
    .local-setup-panel .button--local-action {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .local-pin-digits--slots {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.45rem 0.5rem;
    }
}
.local-dixit__hero {
    padding: 0.85rem 1.1rem 1rem;
}
.local-dixit__hero-row {
    align-items: center;
}
.local-dixit .dixit-hero__name {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: clamp(1.05rem, 2.8vw, 1.45rem);
}
.local-dixit__title--mobile {
    display: none;
}
.local-dixit__hero-meta {
    margin-left: auto;
    justify-content: flex-end;
}
.local-category-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.local-category-pill__icon,
.local-score-category__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.local-category-pill__icon img,
.local-score-category__icon img {
    display: block; 
    width: 1.15rem;
    height: 1.15rem;
}
.local-score-category {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.45rem;
    color: var(--ms-color-lavender-muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.local-score-category__label {
    display: inline-block;
}
.local-dixit .dixit-prompt-block {
    margin-top: 0.35rem;
}
Local pass-and-play: panel base art (hero / scores / main stage — 本回合; deck theme via --category-panel-bg on section) */
.local-pass-play .dixit-hero {
    background-color: rgba(10, 8, 20, 0.94);
    background-image:
        linear-gradient(165deg, rgba(250, 246, 238, 0.08), rgba(14, 12, 26, 0.88)),
        var(--category-panel-bg, url("local-pass-hero-panel.png"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.local-pass-play .dixit-scores {
    background-color: rgba(10, 8, 20, 0.94);
    background-image:
        linear-gradient(180deg, rgba(12, 10, 22, 0.55), rgba(18, 14, 32, 0.9)),
        var(--category-panel-bg, url("local-pass-scores-panel.png"));
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
.local-pass-play .dixit-stage {
    background-color: rgba(10, 8, 20, 0.96);
    background-image:
        linear-gradient(180deg, rgba(26, 22, 38, 0.78), rgba(14, 12, 22, 0.94)),
        var(--category-panel-bg, url("local-pass-stage-panel.png"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
Local pass-and-play: compact score rows, one-line status badges (remove duplicate role/action indicators). */
.local-dixit__scores .dixit-score-chip {
    min-height: 50px;
}
.local-dixit__scores .dixit-score-chip__avatar-wrap {
    width: 50px;
    min-height: 50px;
}
.local-dixit__scores .dixit-score-chip__avatar-wrap .local-char-avatar {
    width: 50px;
    min-width: 50px;
    min-height: 50px;
}
.local-dixit__scores .dixit-score-chip__avatar-fallback {
    min-height: 50px;
}
.local-dixit__scores .dixit-score-chip__meta {
    gap: 0.18rem;
    padding: 0.4rem 0.4rem 0.4rem 0.5rem;
}
.local-dixit__scores .dixit-score-chip__player-name {
    font-size: 0.8rem;
    line-height: 1.2;
}
.local-dixit__scores .dixit-score-chip__status-row {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.local-dixit__scores .dixit-score-chip__status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.08rem 0.38rem;
    border-radius: 999px;
    font-size: 0.58rem;
     font-weight: 800;
     letter-spacing: 0.04em;
     color: var(--ms-color-cream-off-3);
     background: linear-gradient(180deg, rgba(255, 224, 160, 0.36), rgba(170, 120, 45, 0.24));
     border: 1px solid rgba(255, 230, 190, 0.5);
}
.local-dixit__scores .dixit-score-chip__status-badge--active {
    background: linear-gradient(180deg, rgba(255, 238, 186, 0.46), rgba(194, 135, 54, 0.35));
    border-color: rgba(255, 236, 198, 0.72);
}
.local-dixit__scores .dixit-score-chip__score-block {
    gap: 0.2rem;
    padding: 0.32rem 0.5rem 0.32rem 0.32rem;
    min-width: 3.6rem;
}
.local-dixit__scores .dixit-score-chip__acting-pill {
    display: none;
}
.local-dixit__scores .dixit-score-chip__val {
    font-size: 1.24rem;
}
.local-results__subhead {
    margin-top: 1.25rem;
    margin-bottom: 0.65rem;
}
.local-result-rows {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.local-result-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    min-height: 58px;
    padding: 0;
    border-radius: 12px;
    font-size: 0.9rem;
    border: 1px solid rgba(120, 90, 160, 0.35);
    background-color: rgba(10, 6, 20, 0.88);
    background-image:
        linear-gradient(105deg, rgba(6, 4, 14, 0.82) 0%, rgba(22, 14, 38, 0.55) 45%, rgba(10, 8, 24, 0.78) 100%),
        url("score-chip-bg.png");
    background-size: cover, cover;
    background-position: center, center;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 10px rgba(0, 0, 0, 0.35);
}
.local-result-row--storyteller {
    border-color: rgba(212, 168, 75, 0.55);
    box-shadow:
        inset 0 0 0 1px rgba(255, 210, 140, 0.12),
        0 0 14px rgba(212, 168, 75, 0.22),
        0 2px 10px rgba(0, 0, 0, 0.35);
}
.local-result-row--gain {
    border-color: rgba(90, 180, 130, 0.45);
}
.local-result-row--loss {
    border-color: rgba(200, 90, 90, 0.4);
}
.local-result-row--verdict-correct {
    border-color: rgba(90, 200, 140, 0.42);
    box-shadow:
        inset 0 0 0 1px rgba(140, 220, 170, 0.1),
        0 2px 10px rgba(0, 0, 0, 0.35);
}
.local-result-row--verdict-wrong {
    border-color: rgba(220, 100, 100, 0.38);
 }
 .local-result-row--delta.local-result-row--gain .local-result-row__delta {
     color: var(--ms-color-green);
     text-shadow:
        0 0 12px rgba(120, 220, 160, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.85);
 }
 .local-result-row--delta.local-result-row--loss .local-result-row__delta {
     color: var(--ms-color-red-coral);
     text-shadow:
        0 0 12px rgba(255, 120, 120, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.85);
}
.local-result-row__player {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: stretch;
    gap: 0;
}
.local-result-row__avatar-wrap {
    flex-shrink: 0;
    width: 56px;
    min-height: 58px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.local-result-row__avatar-wrap .local-char-avatar {
    width: 56px;
    min-width: 56px;
    height: 100%;
    min-height: 58px;
    border-radius: 0;
    align-self: stretch;
}
.local-result-row__avatar-wrap .local-char-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 0;
}
.local-result-row__avatar-fallback {
    display: block; 
    width: 100%;
    min-height: 58px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
}
.local-result-row__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.45rem 0.5rem 0.45rem 0.55rem;
}
.local-result-row__player-name {
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.25;
    color: var(--ms-color-violet-lighter);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.local-result-row__verdict {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.local-result-row__verdict-label {
    font-size: 0.85rem;
     font-weight: 800;
     letter-spacing: 0.02em;
     color: var(--ms-color-mint-pale);
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
 }
.local-result-row--verdict-wrong .local-result-row__verdict-label {
    color: var(--ms-color-red-soft);
}
.local-result-row__detail {
    font-size: 0.78rem;
    line-height: 1.25;
    color: rgba(200, 190, 230, 0.92);
}
.local-result-row__delta {
    flex-shrink: 0;
    align-self: center;
    padding: 0 0.65rem 0 0.35rem;
    font-size: 1.48rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.local-result-row__card {
    flex-shrink: 0;
    width: 88px;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0.35rem 0.45rem 0.35rem 0;
}
.local-result-row__card img {
    display: block; 
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    aspect-ratio: 3 / 4;
    object-fit: cover;
}
.local-result-row .local-result-row__player-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}
.local-form--pin {
    max-width: 22rem;
}
.local-add-field__label {
    display: block; 
    margin-bottom: 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(230, 222, 248, 0.95);
    letter-spacing: 0.02em;
}
.local-add-pin-card {
    margin: 0.25rem 0 0.15rem;
    padding: 0.85rem 1rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 228, 170, 0.22);
    background:
        linear-gradient(165deg, rgba(22, 18, 36, 0.92) 0%, rgba(14, 12, 26, 0.88) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 18px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.local-setup-panel .local-add-pin-card {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
}
.local-add-pin-card__title {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ms-color-violet-light);
    font-weight: 700;
}
.local-add-pin-card__lead {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: rgba(196, 189, 212, 0.95);
}
Checkbox + PIN fields live in one inner frame (below section title/lead) */
.local-add-pin-controls {
    margin-top: 0.15rem;
    padding: 0.75rem 0.85rem 0.95rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 228, 170, 0.2);
    background: rgba(8, 6, 18, 0.65);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    box-sizing: border-box;
    width: 100%;
}
.local-add-pin-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(240, 232, 255, 0.92);
}
.local-add-pin-toggle input {
    width: 1rem;
    height: 1rem;
    margin: 0.18rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    flex: 0 0 auto;
    accent-color: var(--ms-color-gold-mid);
}
.local-add-pin-toggle span {
    font-size: inherit;
    color: rgba(240, 232, 255, 0.96);
}
.local-add-pin-wrap {
    margin: 0;
    padding-top: 0.65rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.local-pin-field-label {
    margin: 0 0 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ms-color-lavender-pale-2);
    letter-spacing: 0.02em;
}
.local-pin-field-hint {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(180, 170, 205, 0.95);
}
.local-pin-digits {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    justify-content: flex-start;
    align-items: center;
}
.local-pin-digits--slots {
    gap: 0.55rem;
    align-items: flex-end;
}
.local-pin-digit-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.local-pin-digit-slot .local-pin-digit {
    margin: 0;
}
.local-pin-digit-slot-num {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(160, 150, 188, 0.95);
    font-variant-numeric: tabular-nums;
}
.local-pin-digit {
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-radius: 10px;
    border: 1px solid rgba(255, 228, 170, 0.35);
    background: rgba(18, 12, 32, 0.55);
    color: var(--ms-color-cream-ivory);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.local-pin-digit:focus {
    outline: 2px solid rgba(232, 200, 120, 0.85);
    outline-offset: 2px;
}
.local-pin-digit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.local-start-pin-policy {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 228, 170, 0.22);
    background: rgba(12, 8, 24, 0.45);
}
.local-start-pin-policy__title {
    margin: 0 0 0.5rem;
     font-size: 1.02rem;
     font-weight: 700;
     color: var(--ms-color-cream-off-4);
 }
.local-start-pin-policy__list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}
.local-start-pin-policy__item + .local-start-pin-policy__item {
    margin-top: 0.5rem;
}
.local-start-pin-policy__label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgba(236, 228, 255, 0.95);
}
.local-start-pin-policy__label input {
    width: 1rem;
    height: 1rem;
    margin: 0.15rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    flex: 0 0 auto;
    accent-color: var(--ms-color-gold-mid);
}
.local-form--start {
    margin-top: 1.25rem;
}
.local-form--next-round {
    margin-top: 1rem;
}
.local-guess-result-actions {
    justify-content: center;
    gap: 1.25rem;
    padding-top: 0.5rem;
}
.local-guess-result-actions .local-form--next-round {
    margin-top: 0.5rem;
}
.local-form--next-round__skip {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    text-align: center;
}
.online-round-results__countdown {
    margin-bottom: 1.35rem;
}
.online-round-results__countdown-hint {
    margin: 0 auto 0.85rem;
    max-width: 28rem;
    text-align: center;
}
.online-round-results__countdown .local-avatar-clock--results {
    margin-left: auto;
    margin-right: auto;
    max-width: 22rem;
}
/* Timer Fix #5 — .local-avatar-clock--results (Round Results) */
.local-avatar-clock--results .local-avatar-clock__digits {
    color: var(--ms-color-cream-light);
    text-shadow: 0 2px 4px rgba(10, 6, 18, 0.7);
    z-index: 40;
}
.local-result-score-cap-notice {
    margin: 0.75rem 0 0;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--ms-color-lavender-pale-2);
    background: rgba(80, 160, 120, 0.2);
    border: 1px solid rgba(120, 220, 170, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.local-result-row--delta-zero {
    border-color: rgba(120, 90, 160, 0.28);
 }
 .local-result-row--delta-zero .local-result-row__delta {
     color: var(--ms-color-gray-purple);
     font-size: 1.12rem;
     font-weight: 700;
    text-shadow: none;
}
.local-victory {
    margin: 0;
    padding: 1.25rem 1rem 1.1rem;
    border-radius: 16px;
    text-align: center;
    background:
        linear-gradient(165deg, rgba(40, 28, 72, 0.55), rgba(14, 10, 28, 0.92)),
        radial-gradient(ellipse 120% 80% at 50% 0%, rgba(255, 210, 130, 0.18), transparent 55%);
    border: 1px solid rgba(212, 168, 75, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 40px rgba(0, 0, 0, 0.4);
}
.local-victory__hero {
    margin-bottom: 1rem;
}
.local-victory__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ms-color-gray-lavender);
}
.local-victory__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.35rem, 4vw, 1.85rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--ms-color-peach-light);
    text-shadow: 0 0 24px rgba(255, 210, 130, 0.35), 0 2px 8px rgba(0, 0, 0, 0.6);
}
.local-victory__lead {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--ms-color-lavender-mid);
}
.local-victory__winners {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    text-align: left;
}
.local-victory__winner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.local-victory__winner-id {
    flex: 1;
    min-width: 0;
}
.local-victory__winner-score {
    flex-shrink: 0;
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ms-color-gold-light-2);
    text-shadow: 0 0 12px rgba(255, 210, 130, 0.35);
}
.local-victory__hint {
    margin: var(--ms-spacing-md) 0 0;
    font-size: 0.82rem;
}
.local-finish-highlight {
    margin-top: 0.75rem;
}
.local-finish-winners {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
    font-size: 1.05rem;
    color: var(--ms-color-lavender-soft-2);
}
.local-finish-score {
    color: var(--ms-color-gold-mid);
    font-variant-numeric: tabular-nums;
}
.local-summary-list--inline {
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.dixit-stage__hint--compact {
    margin-top: 0;
    margin-bottom: 0.65rem;
}
@media (min-width: 900px) {
    .local-dixit__layout--solo {
        grid-template-columns: minmax(0, 1fr);
    }
}
.local-pin-callout {
    font-size: 1.15rem;
    margin: 0 0 1rem;
    color: var(--ms-color-lavender-soft-2);
}
.local-dixit--unlock .dixit-stage {
    padding: var(--ms-spacing-md);
}
.local-unlock-screen {
    width: 100%;
    min-height: clamp(24rem, 72vh, 42rem);
    display: grid;
    gap: var(--ms-spacing-md);
    align-items: stretch;
}
.local-unlock-hero {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.75rem;
    min-height: 0;
    padding: 1.1rem 1rem 1.2rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 228, 170, 0.24);
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 222, 147, 0.18), rgba(255, 222, 147, 0) 36%),
        radial-gradient(circle at 50% 50%, rgba(120, 88, 202, 0.18), rgba(120, 88, 202, 0) 58%),
        linear-gradient(180deg, rgba(18, 14, 32, 0.92), rgba(8, 6, 18, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 14px 34px rgba(0, 0, 0, 0.32);
    overflow: hidden;
    box-sizing: border-box;
}
.local-unlock-hero::before {
    content: "";
    position: absolute;
    width: min(66vw, 20rem);
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(255, 226, 150, 0.24) 0%, rgba(255, 226, 150, 0.08) 38%, rgba(255, 226, 150, 0) 72%);
    filter: blur(8px);
    pointer-events: none;
}
.local-unlock-hero__eyebrow {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--ms-color-lavender-bright);
 }
.local-unlock-hero__portrait {
    position: relative;
    z-index: 1;
    width: min(56vw, 18rem);
    min-width: 10rem;
    max-width: 18rem;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
}
.local-unlock-hero__portrait .local-char-avatar {
    width: 100%;
    height: 100%;
    border-radius: 28px;
    border-width: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 0 1px rgba(255, 228, 170, 0.2),
        0 18px 34px rgba(0, 0, 0, 0.38);
}
.local-unlock-hero__portrait .local-char-avatar img,
.local-unlock-hero__portrait .local-char-avatar svg {
    border-radius: 26px;
}
.local-unlock-hero__portrait--empty {
    border-radius: 28px;
    border: 2px dashed rgba(255, 228, 170, 0.3);
    background: rgba(255, 255, 255, 0.04);
}
.local-unlock-hero__fallback {
    font-size: 3rem;
    font-weight: 800;
    color: rgba(255, 240, 210, 0.75);
}
.local-unlock-hero__meta {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.35rem;
    width: 100%;
    max-width: 28rem;
    text-align: center;
}
.local-unlock-hero__name {
    margin: 0;
    font-size: clamp(1.55rem, 5.5vw, 2.4rem);
    line-height: 1.05;
    font-weight: 800;
    color: var(--ms-color-peach-light);
    text-shadow: 0 0 24px rgba(255, 210, 130, 0.22), 0 3px 12px rgba(0, 0, 0, 0.45);
    word-break: break-word;
}
.local-unlock-hero__hint {
    margin: 0;
     font-size: clamp(0.98rem, 2.7vw, 1.08rem);
     line-height: 1.5;
     color: var(--ms-color-lavender-pale-3);
 }
.local-form--pin--unlock {
    max-width: min(100%, 28rem);
    width: 100%;
    margin: 0;
    position: relative;
    z-index: 1;
}
.local-unlock-action-card {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    padding: var(--ms-spacing-md) var(--ms-spacing-md) var(--ms-spacing-lg);
    border-radius: 16px;
    border: 1px solid rgba(255, 228, 170, 0.2);
    background:
        linear-gradient(180deg, rgba(14, 10, 24, 0.94), rgba(10, 8, 18, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 26px rgba(0, 0, 0, 0.28);
}
.local-form--pin--unlock .local-pin-digits {
    justify-content: center;
    width: 100%;
}
.local-form--pin--unlock .local-pin-digit {
    width: min(18vw, 3.35rem);
    height: min(18vw, 3.35rem);
    min-width: 2.7rem;
    min-height: 2.7rem;
    font-size: clamp(1.25rem, 4vw, 1.6rem);
}
.local-unlock-submit {
    min-width: min(100%, 16rem);
}
@media (min-width: 900px) {
    .local-dixit--unlock .dixit-stage {
        padding: 1.15rem;
    }
    .local-unlock-screen {
        min-height: clamp(28rem, 74vh, 46rem);
        max-width: min(100%, 48rem);
        margin-left: auto;
        margin-right: auto;
        gap: 1.15rem;
    }
    .local-unlock-hero {
        min-height: 100%;
        padding: 1.4rem 1.6rem 1.5rem;
    }
    .local-unlock-hero__portrait {
        width: min(32vw, 22rem);
        max-width: 22rem;
    }
    .local-unlock-action-card {
        align-content: center;
        padding: 1.15rem 1.2rem 1.2rem;
    }
    .local-form--pin--unlock .local-pin-digits {
        gap: 0.65rem;
    }
}
@media (max-width: 640px) {
    .local-dixit--unlock .dixit-stage {
        padding: 0.75rem;
    }
    .local-unlock-screen {
        min-height: 0;
        gap: 0.8rem;
    }
    .local-unlock-hero {
        padding: 0.95rem 0.75rem 1rem;
        border-radius: 16px;
    }
    .local-unlock-hero__portrait {
        width: min(68vw, 15rem);
        min-width: 9rem;
    }
    .local-unlock-action-card {
        padding: 0.9rem 0.75rem 1rem;
    }
    .local-unlock-submit {
        width: 100%;
    }
}
.local-player-list {
    margin: 0.5rem 0 1rem;
    padding-left: 1.25rem;
    color: var(--ms-color-border-light);
}
.local-player-list--avatars {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.6rem;
}
.local-avatar-picker {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 0.6rem 0.7rem 0.75rem;
}
 .local-avatar-picker legend {
     padding: 0 0.35rem;
     color: var(--ms-color-lavender-soft-4);
     font-size: 0.9rem;
 }
.local-avatar-picker__grid {
    display: grid;
    grid-template-columns: repeat(var(--avatar-cols, 4), minmax(0, 1fr));
    gap: 0.6rem;
}
.local-avatar-option {
    position: relative;
    display: block; 
    border-radius: 12px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(165deg, var(--ms-color-cream-peachy) 0%, var(--ms-color-pink-pale) 40%, var(--ms-color-cyan-pale-2) 100%);
    cursor: pointer;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.local-avatar-option input {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
}
.local-avatar-option.is-taken input {
    cursor: not-allowed;
}
.local-avatar-option .local-char-avatar {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 11px;
    background: linear-gradient(160deg, var(--ms-color-cream-peachy-2) 0%, var(--ms-color-pink-pale-2) 50%, var(--ms-color-cyan-pale-3) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    pointer-events: none;
}
.local-avatar-option .local-char-avatar img {
    border-radius: 11px;
    mix-blend-mode: normal;
    filter: brightness(1.06) saturate(1.12) contrast(0.98);
}
.local-avatar-option:has(input:checked),
.local-avatar-option.is-selected {
    border-color: rgba(255, 225, 133, 0.98);
    box-shadow:
        0 0 0 2px rgba(255, 225, 133, 0.55),
        0 0 22px rgba(255, 210, 92, 0.62),
        0 12px 22px rgba(0, 0, 0, 0.42);
    transform: translateY(-2px) scale(1.02);
}
.local-avatar-option:has(input:checked)::before,
.local-avatar-option.is-selected::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 11px;
    background: radial-gradient(circle at 50% 18%, rgba(255, 242, 193, 0.26), rgba(255, 242, 193, 0) 60%);
    pointer-events: none;
}
.local-avatar-option:has(input:checked)::after,
.local-avatar-option.is-selected::after {
    content: "✓";
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 4;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ms-color-gold-light), var(--ms-color-gold-dark));
    color: var(--ms-color-brown-dark);
    font-size: 0.92rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
.local-avatar-option.is-taken {
    opacity: 0.45;
    cursor: not-allowed;
}
.local-avatar-option:hover:not(.is-taken) {
    transform: translateY(-1px);
    border-color: rgba(255, 221, 141, 0.62);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.local-name-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}
.local-char-avatar {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255, 244, 214, 0.12), rgba(0, 0, 0, 0.25));
    border: 1px solid rgba(235, 206, 124, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 3px 10px rgba(0, 0, 0, 0.35);
}
.local-char-avatar svg {
    display: block; 
    width: 100%;
    height: 100%;
    filter: saturate(1.08) contrast(1.04);
}
.local-char-avatar img {
    display: block; 
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    filter: saturate(1.06) contrast(1.04);
}
.local-char-avatar--correct {
    border-color: rgba(120, 232, 164, 0.75);
    box-shadow: 0 0 8px rgba(120, 232, 164, 0.45);
}
.local-char-avatar--wrong {
    border-color: rgba(255, 112, 112, 0.75);
    box-shadow: 0 0 8px rgba(255, 112, 112, 0.45);
}
.local-char-avatar--animated {
    animation: avatar-pop 1.25s ease-in-out infinite;
}
.local-vote-result-item__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.92rem;
}
.local-vote-result-item__text {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
}
.local-summary-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--ms-color-border-light);
}
.local-vote-result-list {
    gap: 0.55rem;
}
.local-vote-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
}
.local-vote-result-item__card {
    width: 82px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.local-vote-result-item__card img {
    display: block; 
    width: 100%;
    aspect-ratio: 1376 / 768;
    object-fit: cover;
}
.local-avatar-clock {
    display: block; 
    margin-top: 0.85rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0.6rem 0.95rem 0.65rem;
    border-radius: 22px;
    width: fit-content;
    max-width: 100%;
    background: linear-gradient(145deg, rgba(48, 34, 72, 0.92), rgba(22, 14, 42, 0.96));
    border: 1px solid rgba(212, 188, 120, 0.42);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 12px 32px rgba(12, 8, 28, 0.45);
    position: relative;
    overflow: hidden;
    animation: countdown-frame-breathe 3.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .local-avatar-clock {
        animation: none;
    }
}
.local-dixit__scores .dixit-score-chip__player-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}
.local-avatar-clock::after {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle, rgba(255, 233, 170, 0.55) 0%, rgba(255, 233, 170, 0) 65%);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.4);
}
.local-avatar-clock__mage {
    position: relative;
    flex-shrink: 0;
}
.local-avatar-clock__wrap {
    position: relative;
    animation: mage-bob 1.85s ease-in-out infinite;
}
.dixit-scores__timer .local-avatar-clock__wrap {
    animation-duration: 1.65s;
}
.local-avatar-clock__aura {
    position: absolute;
    inset: -3px;
    border-radius: 22px;
    border: 2px solid rgba(186, 154, 255, 0.5);
    box-shadow:
        0 0 18px rgba(167, 118, 255, 0.4),
        0 0 36px rgba(120, 80, 200, 0.22);
    animation: aura-pulse 1.2s ease-in-out infinite;
    pointer-events: none;
}
.local-avatar-clock__spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, var(--ms-color-cream-warm), var(--ms-color-gold-glow) 70%);
    box-shadow: 0 0 10px rgba(255, 220, 130, 0.95);
    animation: spark-float 1.45s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}
.local-avatar-clock__spark--a {
    left: 2px;
    top: 10px;
}
.local-avatar-clock__spark--b {
    right: 4px;
    top: 6px;
    animation-delay: 0.35s;
}
.local-avatar-clock__spark--c {
    right: 8px;
    bottom: 4px;
    animation-delay: 0.7s;
}
.local-avatar-clock__spark--d {
    left: 50%;
    bottom: 1px;
    margin-left: -3px;
    width: 5px;
    height: 5px;
    animation-delay: 0.15s;
}
.local-avatar-clock__spark--e {
    left: 14%;
    top: 4px;
    width: 4px;
    height: 4px;
    animation-delay: 0.45s;
}
/* Countdown mage: 30:4 banner <900px; 1:1 square ≥900px (design refs narrow 30:4 art). coach-countdown-mage-30x4-ai-brief.txt */
.local-avatar-clock__scene {
    position: relative;
    z-index: 1;
    display: block; 
    width: 100%;
    max-width: min(100%, 100vw - 2rem);
    min-width: 0;
    aspect-ratio: 30 / 4;
    margin: 0 auto;
    line-height: 0;
    vertical-align: top;
    border-radius: 20px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.38);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        0 0 0 1px rgba(212, 168, 75, 0.32),
        0 10px 28px rgba(12, 8, 28, 0.42);
    background: radial-gradient(ellipse 95% 90% at 50% 58%, rgba(40, 32, 72, 0.35), rgba(12, 8, 24, 0.5));
}
@media (min-width: 900px) {
    .local-avatar-clock__scene {
        width: min(260px, 92vw);
        max-width: 280px;
        min-width: 140px;
        aspect-ratio: 1 / 1;
    }
}
.local-avatar-clock__picture {
    position: absolute;
    inset: 0;
    display: block; 
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.local-avatar-clock__art {
    position: absolute;
    inset: 0;
    display: block; 
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    border-radius: 0;
    object-fit: contain;
    object-position: center center;
    border: none;
    box-shadow: none;
    filter: brightness(1.04) saturate(1.1) contrast(0.98);
    z-index: 1;
}
/* 倒數置中（30:4 與 1:1 皆對齊畫面中央光球區） */
.local-avatar-clock__digits {
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 4;
    font-size: clamp(1.9rem, 6vw, 3rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--ms-color-cyan-pale);
    text-shadow:
        0 0 14px rgba(120, 240, 255, 0.95),
        0 0 32px rgba(80, 180, 255, 0.55),
        0 2px 5px rgba(0, 20, 40, 0.88);
    pointer-events: none;
}
@media (min-width: 900px) {
    .local-avatar-clock__digits {
        font-size: clamp(1.75rem, 5.5vw, 2.75rem);
    }
}
.local-avatar-clock.is-warning .local-avatar-clock__digits {
    color: var(--ms-color-gold-light-3);
    text-shadow:
        0 0 14px rgba(255, 210, 120, 0.9),
        0 0 28px rgba(255, 170, 60, 0.45),
        0 2px 5px rgba(40, 20, 0, 0.75);
}
.local-avatar-clock.is-urgent .local-avatar-clock__digits {
    color: var(--ms-color-red-soft);
    text-shadow:
        0 0 16px rgba(255, 120, 120, 0.95),
        0 0 34px rgba(255, 80, 80, 0.5),
        0 2px 5px rgba(40, 0, 0, 0.8);
}
.local-avatar-clock.is-critical .local-avatar-clock__digits {
    animation: countdown-pulse 0.55s ease-in-out infinite;
}
.local-avatar-clock.is-timeout .local-avatar-clock__digits {
    color: var(--ms-color-slate-pale);
    text-shadow: 0 0 10px rgba(180, 200, 255, 0.5);
}
/* Timer Fix #1 — #ms-countdown (Online Game Board) */
#ms-countdown {
    color: var(--ms-color-cream-light);
    text-shadow: 0 2px 4px rgba(10, 6, 18, 0.7);
    z-index: 40;
    font-size: max(0.9rem, clamp(1.6rem, 4.8vw, 3rem));
}
/* Timer Fix #2 — #lobby-avatar-modal-timer (Lobby Modal) */
#lobby-avatar-modal-timer .local-avatar-clock__digits {
    color: var(--ms-color-cream-light);
    text-shadow: 0 2px 4px rgba(10, 6, 18, 0.7);
    z-index: 40;
}
#lobby-avatar-modal-timer .local-avatar-clock__scene {
    min-width: 140px;
}
.local-avatar-clock.is-warning {
    border-color: rgba(255, 193, 86, 0.6);
}
.local-avatar-clock.is-warning .local-avatar-clock__aura {
    border-color: rgba(255, 186, 79, 0.7);
    box-shadow: 0 0 16px rgba(255, 186, 79, 0.45);
}
.local-avatar-clock.is-urgent {
    border-color: rgba(255, 92, 92, 0.7);
    box-shadow: 0 0 0 1px rgba(255, 92, 92, 0.35), 0 0 18px rgba(255, 92, 92, 0.35);
    animation: urgent-shake 0.26s linear infinite;
}
.local-avatar-clock.is-urgent .local-avatar-clock__aura {
    border-color: rgba(255, 92, 92, 0.8);
    box-shadow: 0 0 20px rgba(255, 92, 92, 0.5);
    animation-duration: 0.5s;
}
.local-avatar-clock.is-urgent .local-avatar-clock__wrap {
    animation-duration: 0.95s;
}
.local-avatar-clock.is-critical {
    animation: urgent-shake 0.18s linear infinite;
}
.local-avatar-clock.is-critical .local-avatar-clock__aura {
    animation-duration: 0.35s;
}
.local-avatar-clock.is-critical .local-avatar-clock__spark {
    animation-duration: 0.45s;
}
.local-avatar-clock.is-timeout::after {
    animation: timeout-burst 0.45s ease-out 1;
}
@keyframes countdown-pulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
    50% { transform: translateX(-50%) scale(1.06); opacity: 0.92; }
}
@keyframes countdown-frame-breathe {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.06) inset,
            0 12px 32px rgba(12, 8, 28, 0.45);
        border-color: rgba(212, 188, 120, 0.42);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.08) inset,
            0 14px 38px rgba(12, 8, 28, 0.52),
            0 0 22px rgba(167, 118, 255, 0.2);
        border-color: rgba(230, 200, 130, 0.55);
    }
}
@keyframes mage-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes aura-pulse {
    0%, 100% { transform: scale(1); opacity: 0.75; }
    50% { transform: scale(1.08); opacity: 1; }
}
@keyframes spark-float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
    50% { transform: translateY(-6px) scale(1.2); opacity: 1; }
}
@keyframes urgent-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(1px); }
    75% { transform: translateX(-1px); }
}
@keyframes critical-blink {
    0%, 40% { opacity: 1; }
    50%, 90% { opacity: 0.25; }
    100% { opacity: 1; }
}
@keyframes timeout-burst {
    0% { opacity: 0; transform: scale(0.4); }
    40% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.4); }
}
@keyframes avatar-pop {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
.dixit-footer-actions--subtle {
    opacity: 0.75;
}
.link-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(184, 168, 224, 0.22);
    color: var(--ms-color-violet-light);
    text-decoration: none;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    background-color: rgba(24, 20, 44, 0.45);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        var(--ms-btn-tex-violet);
    background-size: cover, cover;
    background-position: center, center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 14px rgba(0, 0, 0, 0.25);
    transition: filter 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
 .link-refresh:hover {
     filter: brightness(1.1);
     color: var(--ms-color-lavender-light-2);
     border-color: rgba(216, 200, 248, 0.4);
 }

/* Mobile responsive title: show short label with icon at ≤640px */
@media (max-width: 640px) {
    .local-dixit__title--full {
        display: none;
    }
    .local-dixit__title--mobile {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
}
@media (max-width: 640px) {
    .local-dixit__title--mobile {
        font-size: 0;
        gap: 0;
     }
     .local-dixit__title--mobile .ms-icon {
         width: 1.45rem;
         height: 1.45rem;
     }
 }

/* === Utility: Hidden Attribute === */
[hidden] { display: none !important; }

/* === Utility Classes: Spacing (T3.7) === */
.m-0 { margin: 0; }
.m-xs { margin: var(--ms-spacing-xs); }
.m-sm { margin: var(--ms-spacing-sm); }
.m-md { margin: var(--ms-spacing-md); }
.m-lg { margin: var(--ms-spacing-lg); }
.m-xl { margin: var(--ms-spacing-xl); }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--ms-spacing-xs); }
.mt-sm { margin-top: var(--ms-spacing-sm); }
.mt-md { margin-top: var(--ms-spacing-md); }
.mt-lg { margin-top: var(--ms-spacing-lg); }
.mt-xl { margin-top: var(--ms-spacing-xl); }
.mt-2xl { margin-top: var(--ms-spacing-2xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--ms-spacing-xs); }
.mb-sm { margin-bottom: var(--ms-spacing-sm); }
.mb-md { margin-bottom: var(--ms-spacing-md); }
.mb-lg { margin-bottom: var(--ms-spacing-lg); }
.mb-xl { margin-bottom: var(--ms-spacing-xl); }

.p-0 { padding: 0; }
.p-xs { padding: var(--ms-spacing-xs); }
.p-sm { padding: var(--ms-spacing-sm); }
.p-md { padding: var(--ms-spacing-md); }
.p-lg { padding: var(--ms-spacing-lg); }
.p-xl { padding: var(--ms-spacing-xl); }

.pt-0 { padding-top: 0; }
.pt-xs { padding-top: var(--ms-spacing-xs); }
.pt-sm { padding-top: var(--ms-spacing-sm); }
.pt-md { padding-top: var(--ms-spacing-md); }
.pt-lg { padding-top: var(--ms-spacing-lg); }
.pt-xl { padding-top: var(--ms-spacing-xl); }

.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: var(--ms-spacing-xs); }
.pb-sm { padding-bottom: var(--ms-spacing-sm); }
.pb-md { padding-bottom: var(--ms-spacing-md); }
.pb-lg { padding-bottom: var(--ms-spacing-lg); }
.pb-xl { padding-bottom: var(--ms-spacing-xl); }

.gap-xs { gap: var(--ms-spacing-xs); }
.gap-sm { gap: var(--ms-spacing-sm); }
.gap-md { gap: var(--ms-spacing-md); }
.gap-lg { gap: var(--ms-spacing-lg); }
.gap-xl { gap: var(--ms-spacing-xl); }

/* === Utility Classes: Layout & Flexbox (T3.8) === */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.flex-center { display: flex; align-items: center; justify-content: center; }
.button--full { width: 100%; display: flex; justify-content: center; }

.grid-display { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }

/* Hide header banner in active game modes (Guess, WordHunt) */
body.mind-sync-game .site-header {
    display: none !important;
}