@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@700;800&display=swap');

    @font-face {
        font-family: 'MaplestoryOTFBold';
        src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFBold.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    :root {
        --bg-image: url('background.webp');
        --bg-color: #f0f2f5;
        --main-font: 'MaplestoryOTFBold', 'Pretendard', sans-serif;
        --primary-color: #007bff;
    }
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    body {
        margin: 0;
        padding: 20px;
        box-sizing: border-box;
        color: #333;
        font-family: var(--main-font);
        background-color: var(--bg-color);
        background-image: var(--bg-image);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
    }
    .global-loading-overlay {
        top: -180px;
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        box-sizing: border-box;
        background: rgba(13, 10, 22, 0.74);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        opacity: 1;
        visibility: visible;
        transition: opacity 0.42s ease, visibility 0.42s ease;
    }
    .global-loading-overlay.is-fading,
    .global-loading-overlay.is-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .global-loading-card {
        position: relative;
        width: min(100%, 420px);
        aspect-ratio: 1 / 1;
        border-radius: 28px;
        overflow: hidden;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
        border: 1px solid rgba(255, 255, 255, 0.32);
        background: rgba(255, 255, 255, 0.08);
    }
    .global-loading-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .global-loading-dim {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(20, 13, 36, 0.18), rgba(20, 13, 36, 0.42));
    }
    .global-loading-center {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        padding: 24px;
        box-sizing: border-box;
    }
    .global-loading-spinner {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 4px solid rgba(255, 255, 255, 0.28);
        border-top-color: #ffffff;
        box-shadow: 0 0 18px rgba(255, 255, 255, 0.24);
        animation: globalLoadingSpin 0.9s linear infinite;
    }
    .global-loading-text {
        color: #fff7fb;
        font-size: 15px;
        line-height: 1.5;
        text-align: center;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    }
    @keyframes globalLoadingSpin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    h1 {
        margin-bottom: 20px;
        color: #222;
        text-align: center;
    }
    .intro-help-toggle {
        position: absolute;
        top: 18px;
        left: 18px;
        z-index: 120;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        color: #4a4038;
        font-size: 18px;
        font-weight: 900;
        line-height: 1;
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid rgba(78, 60, 43, 0.18);
        border-radius: 50%;
        box-shadow: 0 8px 20px rgba(62, 48, 34, 0.12);
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
    }
    .intro-help-toggle.is-hidden {
        display: none;
    }
    .intro-help-toggle:hover,
    .intro-help-toggle.is-open {
        background: rgba(255, 255, 255, 0.94);
        transform: translateY(-1px);
    }
    .intro-help-panel {
        display: none;
        max-width: 920px;
        margin: 0 auto 16px;
        padding: 16px 18px;
        color: #777;
        font-size: 12px;
        line-height: 1.65;
        text-align: center;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(78, 60, 43, 0.12);
        border-radius: 14px;
        box-shadow: 0 12px 26px rgba(62, 48, 34, 0.1);
    }
    .intro-help-panel.is-open {
        display: block;
        animation: introHelpOpen 0.18s ease-out both;
    }
    .intro-new-panel {
        display: none;
        position: relative;
        max-width: 720px;
        margin: 0 auto 16px;
        padding: 14px 16px 16px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 18px;
        box-shadow: 0 12px 26px rgba(62, 48, 34, 0.1);
    }
    .intro-new-panel.is-open {
        display: block;
        animation: introHelpOpen 0.18s ease-out both;
    }
    .intro-new-head {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        color: #222;
        font-weight: 900;
        font-size: 15px;
    }
    .intro-new-open-btn {
        position: absolute;
        top: 16px;
        right: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        color: #fff;
        background: linear-gradient(135deg, #ff4f8d, #ffb23f);
        border: 0;
        border-radius: 50%;
        font-size: 19px;
        font-weight: 900;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 8px 18px rgba(255, 91, 137, 0.24);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    .intro-new-open-btn:hover,
    .intro-new-open-btn:focus-visible {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(255, 91, 137, 0.34);
        outline: none;
    }
    .intro-new-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        height: 24px;
        padding: 0 10px;
        color: #fff;
        background: linear-gradient(135deg, #ff4f8d, #ffb23f);
        border-radius: 999px;
        font-size: 12px;
        box-shadow: 0 8px 18px rgba(255, 91, 137, 0.22);
    }
    .intro-new-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }
    .intro-new-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 248px;
        padding: 10px 8px 12px;
        color: #2b2b2b;
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,249,253,0.96));
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 14px;
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .intro-new-card:hover,
    .intro-new-card:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(255, 91, 137, 0.5);
        box-shadow: 0 10px 22px rgba(255, 91, 137, 0.16);
        outline: none;
    }
    .intro-new-thumb-wrap {
        position: relative;
        width: 200px;
        height: 200px;
        flex: 0 0 auto;
    }
    .intro-new-thumb {
        width: 200px;
        height: 200px;
        object-fit: contain;
        image-rendering: auto;
        transform: scale(1);
        transform-origin: center;
    }
    .intro-new-thumb.is-qm-thumb {
        transform: scale(0.82);
    }
    .intro-new-code {
        position: absolute;
        left: 50%;
        top: 8px;
        bottom: auto;
        z-index: 2;
        display: none;
        max-width: calc(100% - 12px);
        padding: 4px 8px;
        color: #fff;
        background: rgba(14, 18, 28, 0.84);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 5px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        font-family: var(--main-font);
        font-size: 12px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
        transform: translateX(-50%);
        pointer-events: none;
    }
    .intro-new-panel.is-item-code-visible .intro-new-code {
        display: block;
    }
    .intro-new-name {
        max-width: 100%;
        font-size: 12px;
        font-weight: 900;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .intro-new-meta {
        color: #777;
        font-size: 10px;
        font-weight: 800;
    }
    .intro-new-toggle {
        position: relative;
        overflow: hidden;
    }
    .intro-new-toggle.is-hidden {
        display: none;
    }
    .intro-new-toggle.is-open {
        color: #fff;
        background: linear-gradient(135deg, #ff4f8d, #ffb23f);
        box-shadow: 0 10px 22px rgba(255, 91, 137, 0.22);
    }
    @keyframes introHelpOpen {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: translateY(0); }
    }
    input,
    button,
    select,
    textarea {
        font-family: var(--main-font);
    }
    input,
    textarea {
        -webkit-user-select: text;
        user-select: text;
    }
    img,
    .quiz-card,
    .category-card,
    .league-item,
    .home-exit-btn {
        -webkit-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
        -webkit-tap-highlight-color: transparent;
    }
    .container {
        position: relative;
        width: min(100%, 800px);
        max-width: 800px;
        margin: auto;
        padding: 30px;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 15px;
        background-color: rgba(249, 247, 240, 0.85);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    .theme-toggle {
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 120;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 106px;
        min-height: 38px;
        padding: 7px 9px 7px 12px;
        color: #4a4038;
        font-size: 9px;
        font-weight: 900;
        line-height: 1;
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid rgba(78, 60, 43, 0.18);
        border-radius: 999px;
        box-shadow: 0 8px 20px rgba(62, 48, 34, 0.12);
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    .theme-toggle:hover {
        background: rgba(255, 255, 255, 0.92);
    }
    .theme-toggle-track {
        position: relative;
        flex: 0 0 auto;
        width: 34px;
        height: 18px;
        border-radius: 999px;
        background: rgba(113, 93, 74, 0.25);
        border: 1px solid rgba(113, 93, 74, 0.18);
    }
    .theme-toggle-thumb {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #f4c85b;
        box-shadow: 0 0 8px rgba(244, 200, 91, 0.42);
        transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }
    body.theme-dark {
        color: #ece7dc;
        background-color: #080b12;
        background-image:
            radial-gradient(circle at 50% 8%, rgba(43, 82, 132, 0.34), transparent 42%),
            linear-gradient(180deg, rgba(10, 24, 45, 0.74), rgba(6, 16, 34, 0.88)),
            var(--bg-image);
    }
    body.theme-dark h1 {
        color: #f6efe2;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    }
    body.theme-dark .container {
        background-color: rgba(13, 17, 27, 0.88);
        border-color: rgba(240, 211, 163, 0.16);
        box-shadow: 0 14px 44px rgba(0, 0, 0, 0.38);
    }
    body.theme-dark .theme-toggle {
        color: #f4ead8;
        background: rgba(23, 28, 42, 0.88);
        border-color: rgba(205, 167, 104, 0.28);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    }
    body.theme-dark .theme-toggle-track {
        background: rgba(115, 91, 170, 0.42);
        border-color: rgba(199, 165, 255, 0.22);
    }
    body.theme-dark .theme-toggle-thumb {
        background: #d9cff7;
        box-shadow: 0 0 10px rgba(201, 164, 255, 0.54);
        transform: translateX(16px);
    }
    body.theme-dark .intro-help-toggle {
        color: #f4ead8;
        background: rgba(23, 28, 42, 0.88);
        border-color: rgba(205, 167, 104, 0.28);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    }
    body.theme-dark .intro-help-toggle:hover,
    body.theme-dark .intro-help-toggle.is-open {
        background: rgba(32, 38, 56, 0.94);
    }
    body.theme-dark .intro-help-panel {
        color: rgba(238, 230, 217, 0.72);
        background: rgba(18, 23, 35, 0.92);
        border-color: rgba(205, 167, 104, 0.2);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
    }
    body.theme-dark .intro-new-panel {
        background: rgba(18, 23, 35, 0.92);
        border-color: rgba(205, 167, 104, 0.2);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
    }
    body.theme-dark .intro-new-head {
        color: rgba(255, 248, 235, 0.92);
    }
    body.theme-dark .intro-new-card {
        color: #f6ead8;
        background: rgba(22, 28, 42, 0.92);
        border-color: rgba(205, 167, 104, 0.16);
    }
    body.theme-dark .intro-new-card:hover,
    body.theme-dark .intro-new-card:focus-visible {
        border-color: rgba(255, 125, 170, 0.52);
        box-shadow: 0 12px 24px rgba(255, 91, 137, 0.13);
    }
    body.theme-dark .intro-new-meta {
        color: rgba(238, 230, 217, 0.58);
    }
    body.theme-dark .intro-new-open-btn {
        box-shadow: 0 10px 22px rgba(255, 91, 137, 0.18);
    }
    @media (max-width: 640px) {
        .intro-new-panel {
            padding: 12px 10px 14px;
            border-radius: 16px;
        }
        .intro-new-head {
            min-height: 26px;
            line-height: 1;
            margin-bottom: 12px;
            transform: translateX(-5px);
        }
        .intro-new-head > span:not(.intro-new-badge) {
            display: inline-flex;
            align-items: center;
            height: 24px;
            transform: translateY(-1px);
        }
        .intro-new-grid {
            gap: 7px;
        }
        .intro-new-card {
            min-height: 134px;
            padding: 8px 4px 9px;
            border-radius: 12px;
        }
        .intro-new-thumb-wrap {
            width: 88px;
            height: 88px;
        }
        .intro-new-thumb {
            width: 88px;
            height: 88px;
            transform: scale(1.12);
        }
        .intro-new-thumb.is-qm-thumb {
            transform: scale(0.92);
        }
        .intro-new-code {
            top: 3px;
            bottom: auto;
            max-width: calc(100% - 6px);
            padding: 3px 5px;
            border-radius: 4px;
            font-size: 9px;
        }
        .intro-new-name {
            font-size: 10px;
        }
        .intro-new-meta {
            font-size: 9px;
        }
        .intro-new-open-btn {
            top: 12px;
            right: 12px;
            width: 26px;
            height: 26px;
            font-size: 18px;
        }
    }
    body.theme-dark .btn:not(.baseball-pitch-btn):not(.overheat-action-btn),
    body.theme-dark .btn-home,
    body.theme-dark input,
    body.theme-dark select,
    body.theme-dark textarea {
        color: #f3eadf;
        background-color: rgba(22, 27, 39, 0.9);
        border-color: rgba(230, 199, 145, 0.2);
    }
    body.theme-dark input::placeholder,
    body.theme-dark textarea::placeholder {
        color: rgba(235, 224, 209, 0.58);
    }
    body.theme-dark .btn.active,
    body.theme-dark .btn:hover:not(.baseball-pitch-btn):not(.overheat-action-btn) {
        color: #fff7e8;
        background: #2b5fae;
    }
    body.theme-dark .awards-container:not(.overheat-game-shell):not(.stella-game-shell):not(.equinox-game-shell):not(.kaprekar-game-shell):not(.blossom-round-shell):not(.classic-game-shell):not(.baseball-game-shell):not(.joker-game-shell):not(.quinter9-mode-shell),
    body.theme-dark .ranking-category-card,
    body.theme-dark .info-placeholder-card,
    body.theme-dark .list-item,
    body.theme-dark .ranking-line-mode,
    body.theme-dark .api-profile-shell {
        color: #eee6d9;
        background: rgba(18, 23, 35, 0.86);
        border-color: rgba(232, 196, 136, 0.16);
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
    }
    body.theme-dark .ranking-card-row,
    body.theme-dark .search-filter-box,
    body.theme-dark .ranking-top-note,
    body.theme-dark .ranking-score-box,
    body.theme-dark .info-switch-card {
        color: #eee6d9;
        background: rgba(10, 14, 24, 0.74);
        border-color: rgba(232, 196, 136, 0.14);
    }
    body.theme-dark .meta,
    body.theme-dark .extra,
    body.theme-dark .ranking-summary {
        color: rgba(238, 230, 217, 0.72) !important;
    }
    body.theme-dark .item-name,
    body.theme-dark .ranking-category-card h4,
    body.theme-dark .search-results-head h3 {
        color: #f8efe1;
    }
    body.theme-dark .ranking-card-rank {
        color: rgba(245, 235, 216, 0.72);
    }
    body.theme-dark .ranking-card-rank.is-only-one-static {
        color: rgba(245, 235, 216, 0.72);
        text-shadow: none;
    }
    body.theme-dark .ranking-card-rank.is-golden-new {
        color: #ffd46a;
        text-shadow:
            0 0 5px rgba(255, 218, 105, 0.72),
            0 0 12px rgba(255, 162, 46, 0.38);
    }
    body.theme-dark .ranking-card-name {
        color: #fff2df;
    }
    body.theme-dark .ranking-card-score {
        color: #ffd16a;
        text-shadow: 0 0 8px rgba(255, 184, 68, 0.22);
    }
    body.theme-dark .ranking-card-thumb {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(255, 255, 255, 0.18);
    }
    body.theme-dark .api-profile-title,
    body.theme-dark .api-profile-name,
    body.theme-dark .api-appearance-card h4,
    body.theme-dark .api-appearance-name {
        color: #f7efe2;
    }
    body.theme-dark .api-profile-copy,
    body.theme-dark .api-profile-status,
    body.theme-dark .api-profile-zero-switch-label,
    body.theme-dark .api-appearance-note {
        color: rgba(238, 230, 217, 0.68);
    }
    body.theme-dark .api-profile-status.is-success {
        color: #8fe7b6;
    }
    body.theme-dark .api-profile-status.is-error {
        color: #ff9a9a;
    }
    body.theme-dark .api-profile-searchbar select,
    body.theme-dark .api-profile-searchbar input {
        color: #f7efe2;
        background: rgba(10, 14, 24, 0.84);
        border-color: rgba(232, 196, 136, 0.18);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    }
    body.theme-dark .api-profile-searchbar button,
    body.theme-dark .api-profile-actions button {
        color: #fff8ea;
        background: linear-gradient(135deg, #225d91, #1e8bd8);
        box-shadow: 0 10px 24px rgba(30, 139, 216, 0.2);
    }
    body.theme-dark .api-profile-main-card,
    body.theme-dark .api-appearance-card {
        color: #eee6d9;
        background: linear-gradient(145deg, rgba(18, 23, 35, 0.94), rgba(13, 18, 29, 0.92));
        border-color: rgba(232, 196, 136, 0.15);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    }
    body.theme-dark .api-profile-meta-item {
        background: rgba(10, 14, 24, 0.76);
        border-color: rgba(232, 196, 136, 0.13);
    }
    body.theme-dark .api-profile-meta-label {
        color: rgba(238, 230, 217, 0.58);
    }
    body.theme-dark .api-profile-meta-value {
        color: #f8efe1;
    }
    body.theme-dark .api-profile-zero-switch-btn {
        color: #efe6d7;
        background: rgba(10, 14, 24, 0.76);
        border-color: rgba(232, 196, 136, 0.18);
    }
    body.theme-dark .api-profile-zero-switch-btn.is-active {
        color: #fff;
        background: linear-gradient(135deg, #225d91, #1e8bd8);
        border-color: rgba(100, 180, 255, 0.35);
    }
    body.theme-dark .api-appearance-actions button {
        color: #f7efe2;
        background: rgba(14, 21, 34, 0.9);
        border-color: rgba(106, 174, 235, 0.28);
    }
    body.theme-dark .api-appearance-thumb {
        --appearance-panel-start: #f3f7fc;
        --appearance-panel-end: #e7eef7;
        box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.2), 0 10px 24px rgba(0, 0, 0, 0.2);
    }
    body.theme-dark .ranking-rank-chip.is-awards-crown-chip {
        background: rgba(255, 255, 255, 0.92);
        border-color: rgba(255, 255, 255, 0.82);
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
    }
    body.theme-dark #ranking-section.is-awards-mode .ranking-card-crown-rank .awards-crowns,
    body.theme-dark .ranking-rank-chip.is-awards-crown-chip .awards-crowns {
        min-width: 28px;
        min-height: 24px;
        justify-content: center;
        padding: 3px 5px;
        background: #fff;
        border: 1px solid #fff;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    }
    body.theme-dark #ranking-section.is-awards-mode .ranking-card-crown-rank .awards-crowns:hover,
    body.theme-dark .ranking-rank-chip.is-awards-crown-chip .awards-crowns:hover,
    body.theme-dark #ranking-section.is-awards-mode .ranking-card-crown-rank .awards-crowns.is-open,
    body.theme-dark .ranking-rank-chip.is-awards-crown-chip .awards-crowns.is-open {
        background: #fff;
    }
    body.theme-dark .site-footer {
        color: rgba(238, 230, 217, 0.72);
        border-top-color: rgba(232, 196, 136, 0.14);
    }
    body.theme-dark .footer-partner {
        color: rgba(238, 230, 217, 0.42);
    }
    body.theme-dark .footer-api {
        color: rgba(238, 230, 217, 0.72);
    }
    body.theme-dark .footer-api .nexon {
        color: #fff;
    }
    body.theme-dark .footer-api .api {
        color: #1e9bff;
    }
    body.theme-dark .footer-disclaimer {
        color: rgba(238, 230, 217, 0.58);
    }
    body.theme-dark #quiz-section .quiz-mode-card,
    body.theme-dark #awards-section .awards-category-grid > .category-card {
        color: #f8efe1;
        background: linear-gradient(180deg, rgba(19, 28, 44, 0.94), rgba(10, 15, 26, 0.96));
        border-color: rgba(136, 165, 205, 0.28);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 14px 30px rgba(0, 0, 0, 0.24);
    }
    body.theme-dark #quiz-section .quiz-mode-card:hover,
    body.theme-dark #awards-section .awards-category-grid > .category-card:hover {
        border-color: rgba(125, 185, 255, 0.48);
        background: linear-gradient(180deg, rgba(25, 38, 59, 0.96), rgba(12, 20, 34, 0.98));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 16px 34px rgba(0, 0, 0, 0.3);
    }
    body.theme-dark #quiz-section .quiz-mode-card .name,
    body.theme-dark #awards-section .awards-category-grid > .category-card .name {
        color: #f8efe1;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    }
    body.theme-dark #quiz-section .quiz-subcategory-btn {
        color: #dcecff;
        background: rgba(34, 60, 92, 0.72);
        border-color: rgba(124, 181, 255, 0.32);
    }
    body.theme-dark #quiz-section .quiz-subcategory-btn:hover {
        color: #fff;
        background: rgba(45, 92, 138, 0.86);
        border-color: rgba(139, 204, 255, 0.56);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
    }
    body.theme-dark #quiz-container {
        color: #efe7dc;
        background: rgba(13, 17, 27, 0.92);
        border-color: rgba(232, 196, 136, 0.16);
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
    }
    body.theme-dark #quiz-title {
        color: #2f9dff !important;
        text-shadow: 0 0 12px rgba(47, 157, 255, 0.24);
    }
    body.theme-dark #quiz-score {
        color: rgba(238, 230, 217, 0.78);
    }
    body.theme-dark #quiz-score b {
        color: #9fd0ff !important;
    }
    body.theme-dark #quiz-container .quiz-life-bar {
        background: rgba(14, 19, 30, 0.92);
        border-color: rgba(255, 255, 255, 0.24);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
    }
    body.theme-dark #quiz-container .quiz-life-label {
        color: rgba(255, 255, 255, 0.82);
    }
    body.theme-dark #quiz-container .quiz-life {
        color: #fff;
        text-shadow:
            0 0 6px rgba(255, 255, 255, 0.72),
            0 0 14px rgba(135, 188, 255, 0.32);
    }
    body.theme-dark #quiz-container .quiz-life.lost {
        color: rgba(255, 255, 255, 0.38);
        opacity: 0.34;
        filter: grayscale(1);
        text-shadow: none;
    }
    body.theme-dark #quiz-msg {
        color: #efe7dc;
    }
    body.theme-dark #quiz-msg > div {
        background: rgba(10, 14, 24, 0.88) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 10px 22px rgba(0, 0, 0, 0.24);
    }
    body.theme-dark #quiz-msg > div div {
        color: rgba(238, 230, 217, 0.86) !important;
    }
    body.theme-dark #quiz-msg > div div:last-child {
        color: rgba(238, 230, 217, 0.62) !important;
    }
    body.theme-dark #quiz-container .quiz-card {
        color: #f6efe5;
        background: linear-gradient(180deg, rgba(19, 26, 39, 0.96), rgba(12, 17, 28, 0.98));
        border-color: rgba(232, 196, 136, 0.18);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 12px 26px rgba(0, 0, 0, 0.24);
    }
    body.theme-dark #quiz-container .quiz-card:hover {
        border-color: rgba(75, 166, 255, 0.56);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 14px 30px rgba(0, 0, 0, 0.3);
    }
    body.theme-dark #quiz-container .quiz-card img {
        background: rgba(248, 250, 253, 0.96);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    body.theme-dark #quiz-container .quiz-card strong {
        color: #f8efe1;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    }
    body.theme-dark #quiz-container .quiz-flex > div:not(.quiz-card) {
        color: rgba(248, 239, 225, 0.86) !important;
    }
    body.theme-dark #stamp-quiz-container {
        color: #efe7dc;
        background: rgba(13, 17, 27, 0.92);
        border-color: rgba(232, 196, 136, 0.16);
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
    }
    body.theme-dark #stamp-quiz-container .awards-container {
        background: rgba(14, 20, 32, 0.62);
        border-color: rgba(232, 196, 136, 0.12);
        box-shadow: none;
    }
    body.theme-dark #stamp-quiz-title {
        color: #2f9dff !important;
        text-shadow: 0 0 12px rgba(47, 157, 255, 0.24);
    }
    body.theme-dark #stamp-quiz-score {
        color: rgba(238, 230, 217, 0.82);
    }
    body.theme-dark #stamp-quiz-score b {
        color: #9fd0ff !important;
    }
    body.theme-dark #stamp-quiz-achievement-line {
        color: rgba(238, 230, 217, 0.9);
    }
    body.theme-dark #stamp-quiz-container .quiz-life-bar {
        background: rgba(14, 19, 30, 0.92);
        border-color: rgba(255, 255, 255, 0.24);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
    }
    body.theme-dark #stamp-quiz-container .quiz-life-label {
        color: rgba(255, 255, 255, 0.82);
    }
    body.theme-dark #stamp-quiz-container .quiz-life {
        color: #fff;
        text-shadow:
            0 0 6px rgba(255, 255, 255, 0.72),
            0 0 14px rgba(135, 188, 255, 0.32);
    }
    body.theme-dark #stamp-quiz-container .quiz-life.lost {
        color: rgba(255, 255, 255, 0.38);
        opacity: 0.34;
        filter: grayscale(1);
        text-shadow: none;
    }
    body.theme-dark #stamp-quiz-container .stamp-quiz-card {
        color: #f6efe5;
        background: linear-gradient(180deg, rgba(19, 26, 39, 0.96), rgba(12, 17, 28, 0.98));
        border-color: rgba(232, 196, 136, 0.18);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 12px 26px rgba(0, 0, 0, 0.24);
    }
    body.theme-dark #stamp-quiz-container .stamp-quiz-item-image {
        background: rgba(238, 244, 252, 0.96);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    body.theme-dark #stamp-quiz-container .stamp-quiz-feedback {
        background: rgba(10, 14, 24, 0.74);
        color: rgba(238, 230, 217, 0.86);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
    body.theme-dark #stamp-quiz-container .stamp-quiz-feedback.is-correct {
        background: rgba(16, 80, 44, 0.28);
        color: #8ff1ad;
        border-color: rgba(122, 229, 154, 0.42);
    }
    body.theme-dark #stamp-quiz-container .stamp-quiz-feedback.is-wrong {
        background: rgba(104, 24, 36, 0.3);
        color: #ff8fa0;
        border-color: rgba(255, 142, 160, 0.44);
    }
    body.theme-dark #stamp-quiz-container .stamp-quiz-option {
        background: rgba(17, 24, 37, 0.92);
        border-color: rgba(136, 165, 205, 0.34);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    body.theme-dark #stamp-quiz-container .stamp-quiz-option:hover:not(:disabled) {
        border-color: rgba(75, 166, 255, 0.6);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    }
    body.theme-dark #stamp-quiz-container .btn,
    body.theme-dark #stamp-quiz-container .quiz-home-btn {
        color: #f8efe1;
        background: rgba(12, 18, 30, 0.9);
        border-color: rgba(232, 196, 136, 0.22);
    }
    body.theme-dark #stamp-quiz-container .quiz-home-btn .btn-text {
        color: #f8efe1;
    }
    body.theme-dark #tournament-section .awards-container {
        color: #efe7dc;
        background: rgba(13, 17, 27, 0.92);
        border-color: rgba(232, 196, 136, 0.16);
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
    }
    body.theme-dark #tournament-section #tour-title {
        color: #2f9dff !important;
        text-shadow: 0 0 12px rgba(47, 157, 255, 0.24);
    }
    body.theme-dark #tournament-section #tour-description,
    body.theme-dark #tournament-section #tour-progress {
        color: rgba(238, 230, 217, 0.72) !important;
    }
    body.theme-dark #tournament-section .quiz-card {
        color: #f6efe5;
        background: linear-gradient(180deg, rgba(19, 26, 39, 0.96), rgba(12, 17, 28, 0.98));
        border-color: rgba(232, 196, 136, 0.18);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 12px 26px rgba(0, 0, 0, 0.24);
    }
    body.theme-dark #tournament-section .quiz-card:hover {
        border-color: rgba(75, 166, 255, 0.56);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 14px 30px rgba(0, 0, 0, 0.3);
    }
    body.theme-dark #tournament-section .quiz-card img {
        background: rgba(248, 250, 253, 0.96);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    body.theme-dark #tournament-section .quiz-card strong {
        color: #f8efe1;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    }
    body.theme-dark #tournament-section .quiz-flex > div:not(.quiz-card) {
        color: rgba(248, 239, 225, 0.86) !important;
    }
    body.theme-dark #final-tournament-section .awards-container {
        color: #efe7dc;
        background: rgba(13, 17, 27, 0.92);
        border-color: rgba(232, 196, 136, 0.16);
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
    }
    body.theme-dark #final-tournament-section #final-tour-title {
        color: #2f9dff !important;
        text-shadow: 0 0 12px rgba(47, 157, 255, 0.24);
    }
    body.theme-dark #final-tournament-section #final-tour-progress {
        color: rgba(238, 230, 217, 0.8) !important;
    }
    body.theme-dark #final-tournament-section .quiz-card {
        color: #f6efe5;
        background: linear-gradient(180deg, rgba(19, 26, 39, 0.96), rgba(12, 17, 28, 0.98));
        border-color: rgba(232, 196, 136, 0.18);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 12px 26px rgba(0, 0, 0, 0.24);
    }
    body.theme-dark #final-tournament-section .quiz-card:hover {
        border-color: rgba(75, 166, 255, 0.56);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 14px 30px rgba(0, 0, 0, 0.3);
    }
    body.theme-dark #final-tournament-section .quiz-card img {
        background: rgba(248, 250, 253, 0.96);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    body.theme-dark #final-tournament-section .final-card-name {
        color: #f8efe1;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    }
    body.theme-dark #final-tournament-section .final-origin-info {
        color: rgba(248, 239, 225, 0.72);
    }
    body.theme-dark #final-tournament-section .vs-text {
        color: rgba(248, 239, 225, 0.86) !important;
    }
    body.theme-dark #league-section .awards-container {
        color: #efe7dc;
        background: rgba(13, 17, 27, 0.92);
        border-color: rgba(232, 196, 136, 0.16);
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
    }
    body.theme-dark #league-section #league-title {
        color: #f8efe1 !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    }
    body.theme-dark #league-section #league-description,
    body.theme-dark #league-section #league-round {
        color: rgba(238, 230, 217, 0.72) !important;
    }
    body.theme-dark #league-section .league-match-box {
        background: linear-gradient(180deg, rgba(19, 26, 39, 0.96), rgba(12, 17, 28, 0.98));
        border-color: rgba(232, 196, 136, 0.18);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 12px 26px rgba(0, 0, 0, 0.24);
    }
    body.theme-dark #league-section .league-item {
        color: #f6efe5;
    }
    body.theme-dark #league-section .league-item img {
        background: rgba(248, 250, 253, 0.96);
        border-radius: 8px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    body.theme-dark #league-section .league-item span {
        color: #f8efe1;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    }
    body.theme-dark #league-section .vs-text {
        color: rgba(248, 239, 225, 0.86) !important;
    }
    body.theme-dark #league-section .btn-reset {
        color: rgba(238, 230, 217, 0.74);
        background: rgba(10, 14, 24, 0.72);
        border-color: rgba(232, 196, 136, 0.18);
    }
    body.theme-dark #league-result-section {
        color: #f7f2e8 !important;
        background: #101722 !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34) !important;
    }
    body.theme-dark #league-result-section .rank-table {
        background: transparent !important;
    }
    body.theme-dark #league-result-section .rank-table th {
        color: rgba(247, 242, 232, 0.62) !important;
        background: rgba(255, 255, 255, 0.045) !important;
        border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    }
    body.theme-dark #league-result-section .rank-table td {
        color: #f7f2e8 !important;
        border-bottom-color: rgba(255, 255, 255, 0.07) !important;
    }
    body.theme-dark #league-result-section .rank-1st {
        background: rgba(230, 166, 34, 0.15) !important;
    }
    body.theme-dark #league-result-section .rank-2nd {
        background: rgba(255, 255, 255, 0.045) !important;
    }
    body.theme-dark #league-result-section .item-cell img {
        background: rgba(255, 255, 255, 0.94);
        border-radius: 8px;
    }
    body.theme-dark #league-result-section .item-name,
    body.theme-dark #league-result-section .points-text,
    body.theme-dark #league-result-section .diff-text,
    body.theme-dark #league-result-section .rank-wrapper {
        color: #f7f2e8 !important;
    }
    body.theme-dark #league-result-section .badge-qualified {
        color: #4dff9a !important;
        background: rgba(42, 167, 92, 0.16) !important;
        border-color: rgba(77, 255, 154, 0.42) !important;
    }
    body.theme-dark #league-result-section .badge-h2h {
        color: #6fb6ff !important;
        background: rgba(27, 104, 207, 0.16) !important;
        border-color: rgba(111, 182, 255, 0.38) !important;
    }
    body.theme-dark #league-result-section .badge-random,
    body.theme-dark #league-result-section .h2h-badge {
        color: #ffc15c !important;
        background: rgba(255, 145, 0, 0.14) !important;
        border-color: rgba(255, 193, 92, 0.38) !important;
    }
    body.theme-dark #league-result-section .status-badge.win {
        color: #5fb5ff !important;
    }
    body.theme-dark #league-result-section .status-badge.lose {
        color: #ff6972 !important;
    }
    body.theme-dark #league-result-section .league-controls {
        background: rgba(255, 255, 255, 0.02);
    }
    body.theme-dark #final-result-card,
    body.theme-dark #final-result-capture,
    body.theme-dark #collection-grid {
        color: #f7f2e8;
        background: #101722 !important;
    }
    body.theme-dark #final-result-card {
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
    }
    body.theme-dark #final-result-capture h2 {
        color: #f2eadb !important;
        text-shadow: 0 0 12px rgba(232, 196, 136, 0.18);
    }
    body.theme-dark #final-result-section .collection-card {
        color: #f7f2e8;
    }
    body.theme-dark #final-result-section .item-img-wrapper {
        background: rgba(255, 255, 255, 0.94);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    body.theme-dark #final-result-section .collection-card-name {
        color: #f7f2e8 !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
    }
    body.theme-dark .btn-submit,
    body.theme-dark button.btn-submit {
        color: #fff !important;
        background: #28a745 !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
        box-shadow: 0 8px 18px rgba(40, 167, 69, 0.24) !important;
    }
    body.theme-dark .btn-submit:hover,
    body.theme-dark button.btn-submit:hover {
        background: #23923d !important;
    }
    body.theme-dark .round-notice-overlay {
        background: rgba(3, 6, 12, 0.78);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    body.theme-dark .round-notice-content {
        color: #f8efe1;
        background: linear-gradient(180deg, rgba(19, 26, 39, 0.98), rgba(12, 17, 28, 0.98));
        border: 1px solid rgba(232, 196, 136, 0.18);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 18px 42px rgba(0, 0, 0, 0.42);
    }
    body.theme-dark .round-notice-text {
        color: #f8efe1;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
    }
    body.theme-dark .round-notice-content .btn-submit {
        color: #f8efe1;
        background: rgba(38, 46, 62, 0.96);
        border: 1px solid rgba(232, 196, 136, 0.18);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
    }
    body.theme-dark .round-notice-content .btn-submit:hover {
        background: rgba(48, 58, 78, 0.98);
    }
    body.theme-dark #quiz-section .quiz-time-icon {
        background: radial-gradient(circle, rgba(235, 248, 255, 0.96), rgba(172, 218, 255, 0.74));
        box-shadow:
            0 0 0 5px rgba(80, 155, 230, 0.22),
            0 10px 22px rgba(0, 0, 0, 0.26);
    }
    body.theme-dark #quiz-section .icon-img-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 76px;
        height: 76px;
        min-height: 76px;
        margin: 0 auto 12px;
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 22px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.75),
            0 10px 22px rgba(0, 0, 0, 0.2);
    }
    body.theme-dark #awards-section .icon-img-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        min-height: 54px;
        margin: 0 auto 8px;
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 16px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.75),
            0 8px 18px rgba(0, 0, 0, 0.18);
    }
    body.theme-dark #quiz-section .category-icon-img {
        width: 62px;
        height: 62px;
        object-fit: contain;
    }
    body.theme-dark #awards-section .category-icon-img {
        width: 48px;
        height: 48px;
        object-fit: contain;
    }
    #search-section,
    #awards-section,
    #tournament-section,
    #league-section,
    #quiz-container,
    #boardgame-classic-play-section {
        position: relative;
        z-index: 10;
    }
    .menu-tabs {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-bottom: 25px;
    }
    .info-menu-trigger {
        position: relative;
        display: inline-flex;
        align-items: stretch;
    }
    .info-menu-trigger > .btn {
        width: 100%;
    }
    .info-menu-trigger::after {
        content: "";
        position: absolute;
        left: -10px;
        right: -10px;
        top: 100%;
        height: 12px;
        z-index: 1199;
        pointer-events: auto;
    }
    .info-menu-popover {
        position: absolute;
        left: 50%;
        top: calc(100% - 1px);
        z-index: 1200;
        width: 150px;
        min-width: 150px;
        padding: 14px 8px 8px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 14px;
        box-shadow: 0 18px 36px rgba(25, 25, 25, 0.18);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -8px) scale(0.98);
        transition: opacity 0.16s ease, transform 0.16s ease;
    }
    .info-menu-popover::before {
        content: "";
        position: absolute;
        left: 50%;
        top: -6px;
        width: 12px;
        height: 12px;
        background: inherit;
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        transform: translateX(-50%) rotate(45deg);
    }
    .info-menu-trigger.is-open .info-menu-popover {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, 0) scale(1);
    }
    .info-menu-option {
        min-height: 38px;
        padding: 8px 10px;
        color: #262626;
        font-size: 12px;
        font-weight: 900;
        background: rgba(245, 247, 251, 0.92);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 10px;
        cursor: pointer;
        white-space: nowrap;
    }
    .info-menu-option:hover,
    .info-menu-option:focus-visible {
        color: #fff;
        outline: none;
        background: #2b5fae;
    }
    body.theme-dark .info-menu-popover {
        background: rgba(15, 20, 31, 0.98);
        border-color: rgba(232, 196, 136, 0.16);
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.36);
    }
    body.theme-dark .info-menu-option {
        color: #eee6d9;
        background: rgba(34, 45, 64, 0.92);
        border-color: rgba(232, 196, 136, 0.14);
    }
    body.theme-dark .info-menu-option:hover,
    body.theme-dark .info-menu-option:focus-visible {
        color: #fff7e8;
        background: #2b5fae;
    }
    .info-menu-option.is-news:hover,
    .info-menu-option.is-news:focus-visible,
    body.theme-dark .info-menu-option.is-news:hover,
    body.theme-dark .info-menu-option.is-news:focus-visible {
        background: #28a957;
    }
    .info-menu-option.is-ranking:hover,
    .info-menu-option.is-ranking:focus-visible,
    body.theme-dark .info-menu-option.is-ranking:hover,
    body.theme-dark .info-menu-option.is-ranking:focus-visible {
        background: #2288f1;
    }
    .info-menu-option.is-awards:hover,
    .info-menu-option.is-awards:focus-visible,
    body.theme-dark .info-menu-option.is-awards:hover,
    body.theme-dark .info-menu-option.is-awards:focus-visible {
        background: #d79a1e;
    }
    .info-menu-option.is-tmi:hover,
    .info-menu-option.is-tmi:focus-visible,
    body.theme-dark .info-menu-option.is-tmi:hover,
    body.theme-dark .info-menu-option.is-tmi:focus-visible {
        background: #8652d9;
    }
    .beauty-menu-popover {
        width: 150px;
        min-width: 150px;
        grid-template-columns: 1fr;
    }
    .beauty-menu-option.is-my-awards:hover,
    .beauty-menu-option.is-my-awards:focus-visible,
    body.theme-dark .beauty-menu-option.is-my-awards:hover,
    body.theme-dark .beauty-menu-option.is-my-awards:focus-visible {
        background: #f0447d;
    }
    .play-menu-trigger {
        position: relative;
        display: inline-flex;
        align-items: stretch;
    }
    .play-menu-trigger > .btn {
        width: 100%;
    }
    .play-menu-trigger::after {
        content: "";
        position: absolute;
        left: -10px;
        right: -10px;
        top: 100%;
        height: 12px;
        z-index: 1199;
        pointer-events: auto;
    }
    .play-menu-popover {
        position: absolute;
        left: 50%;
        top: calc(100% - 1px);
        z-index: 1200;
        width: 150px;
        min-width: 150px;
        padding: 14px 8px 8px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 14px;
        box-shadow: 0 18px 36px rgba(25, 25, 25, 0.18);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -8px) scale(0.98);
        transition: opacity 0.16s ease, transform 0.16s ease;
    }
    .play-menu-popover::before {
        content: "";
        position: absolute;
        left: 50%;
        top: -6px;
        width: 12px;
        height: 12px;
        background: inherit;
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        transform: translateX(-50%) rotate(45deg);
    }
    .play-menu-trigger.is-open .play-menu-popover {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, 0) scale(1);
    }
    .play-menu-option {
        min-height: 38px;
        padding: 8px 10px;
        color: #262626;
        font-size: 12px;
        font-weight: 900;
        background: rgba(245, 247, 251, 0.92);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 10px;
        cursor: pointer;
        white-space: nowrap;
    }
    .play-menu-option.is-roulette {
        grid-column: 1 / -1;
    }
    .roulette-mode-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        max-width: 620px;
        margin: 0 auto 22px;
    }
    .roulette-mode-card {
        min-height: 0;
        padding: 14px;
        background: linear-gradient(180deg, rgba(255, 246, 252, 0.96), rgba(244, 232, 255, 0.92));
        border: 1px solid rgba(208, 104, 184, 0.24);
        border-radius: 14px;
        box-shadow: 0 12px 26px rgba(166, 86, 148, 0.14);
    }
    .roulette-mode-card.is-face {
        background: linear-gradient(180deg, rgba(251, 245, 255, 0.96), rgba(237, 229, 255, 0.92));
        border-color: rgba(142, 84, 218, 0.24);
        box-shadow: 0 12px 26px rgba(108, 74, 190, 0.14);
    }
    .roulette-card-launch {
        display: block;
        width: 100%;
        padding: 0;
        color: inherit;
        text-align: center;
        background: transparent;
        border: 0;
        cursor: pointer;
    }
    .roulette-card-launch:focus-visible {
        outline: 3px solid rgba(244, 95, 182, 0.42);
        outline-offset: 4px;
        border-radius: 12px;
    }
    .roulette-mode-card .icon-img-wrapper {
        min-height: 0;
        margin-bottom: 10px;
        background: transparent;
    }
    .roulette-mode-card .category-icon-img {
        width: min(100%, 210px);
        height: auto;
        max-height: 220px;
        object-fit: contain;
        filter: drop-shadow(0 10px 16px rgba(115, 50, 120, 0.18));
    }
    .roulette-mode-card .name {
        color: #6f2e73;
        font-size: 15px;
        font-weight: 900;
        letter-spacing: 0.02em;
    }
    .roulette-mode-card.is-face .name {
        color: #56308c;
    }
    .roulette-mode-card.is-disabled {
        cursor: default;
    }
    @media (max-width: 600px) {
        .roulette-mode-grid {
            gap: 8px;
            margin-bottom: 16px;
        }
        .roulette-mode-card {
            padding: 8px;
            border-radius: 12px;
        }
        .roulette-mode-card .category-icon-img {
            max-height: 146px;
        }
        .roulette-mode-card .name {
            font-size: 10px;
        }
        .roulette-detail-panel {
            margin-top: 8px;
        }
        .roulette-gender-btn {
            min-height: 38px;
            font-size: 10px;
            border-radius: 14px;
        }
        .roulette-scope-label {
            font-size: 10px;
            margin-bottom: 8px;
        }
    }
    .roulette-detail-panel {
        display: block;
        width: 100%;
        margin: 12px 0 0;
        padding: 0;
        text-align: center;
    }
    .roulette-detail-panel.is-active {
        display: block;
    }
    .roulette-detail-title {
        display: none;
    }
    .roulette-gender-toggle-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin: 0 0 10px;
    }
    .roulette-gender-btn {
        min-height: 42px;
        color: #f6f8ff;
        font-size: 12px;
        font-weight: 900;
        background: linear-gradient(180deg, #28547f, #173b61);
        border: 1px solid rgba(120, 185, 255, 0.42);
        border-radius: 16px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 18px rgba(18, 52, 88, 0.18);
        cursor: pointer;
    }
    .roulette-gender-btn.is-active {
        color: #fff;
        background: linear-gradient(180deg, #f45fb6, #c83e98);
        border-color: rgba(255, 185, 230, 0.72);
        box-shadow: 0 0 0 3px rgba(244, 95, 182, 0.18), 0 10px 22px rgba(195, 62, 152, 0.18);
    }
    .roulette-gender-btn.is-face.is-active {
        background: linear-gradient(180deg, #9a63ef, #6f41c8);
        border-color: rgba(207, 181, 255, 0.72);
        box-shadow: 0 0 0 3px rgba(154, 99, 239, 0.18), 0 10px 22px rgba(111, 65, 200, 0.18);
    }
    .roulette-scope-label {
        min-height: 20px;
        margin: 0 0 14px;
        color: #6d5870;
        font-size: 12px;
        font-weight: 800;
    }
    .roulette-draw-btn {
        width: min(100%, 160px);
        min-width: 0;
        min-height: 44px;
        margin-bottom: 16px;
        color: #fff;
        font-weight: 900;
        background: linear-gradient(135deg, #ff68bd, #8c5cff);
        border: 0;
        border-radius: 999px;
        box-shadow: 0 10px 22px rgba(211, 76, 174, 0.22);
        cursor: pointer;
    }
    .roulette-result-card {
        display: flex;
        align-items: center;
        gap: 12px;
        box-sizing: border-box;
        top: -30%;
        max-width: 360px;
        min-height: 92px;
        margin: -28px auto 50px;
        padding: 12px;
        text-align: left;
        background: rgba(255,255,255,0.86);
        border: 1px solid rgba(216, 78, 166, 0.16);
        border-radius: 14px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .roulette-result-card.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    #roulette-section .awards-container {
        position: relative;
    }
    .roulette-music-control {
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 20;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }
    .roulette-music-btn {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px;
        min-width: 96px;
        height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px;
        border: 1px solid rgba(255, 145, 218, 0.24);
        background: rgba(18, 22, 34, 0.84);
        box-shadow: 0 8px 18px rgba(214, 78, 186, 0.14);
    }
    .roulette-music-btn .btn-text,
    .roulette-music-btn .music-icon {
        color: #ffe8f8;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.04em;
        line-height: 1;
    }
    .roulette-music-btn.is-on {
        background: linear-gradient(135deg, rgba(255, 103, 196, 0.92), rgba(139, 83, 255, 0.92));
        border-color: rgba(255, 220, 244, 0.48);
        box-shadow: 0 10px 24px rgba(214, 78, 186, 0.26);
    }
    .roulette-music-btn.is-on .btn-text,
    .roulette-music-btn.is-on .music-icon {
        color: #fff;
    }
    .roulette-volume-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: 168px;
        padding: 8px 10px;
        border-radius: 14px;
        border: 1px solid rgba(255, 145, 218, 0.22);
        background: rgba(12, 15, 24, 0.94);
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 30;
    }
    .roulette-music-control.is-open .roulette-volume-panel,
    .roulette-music-control:focus-within .roulette-volume-panel {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .roulette-volume-label {
        display: block;
        margin-bottom: 5px;
        color: #ffe8f8;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-align: center;
    }
    .roulette-volume-slider {
        width: 100%;
        accent-color: #ff72c8;
        cursor: pointer;
    }
    .roulette-result-thumb-wrap {
        position: relative;
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9), var(--roulette-ball-color, #f45fb6) 46%, rgba(82, 42, 112, 0.92) 100%);
        box-shadow: inset -6px -8px 14px rgba(52, 19, 82, 0.22), 0 8px 18px rgba(130, 54, 128, 0.2);
    }
    .roulette-result-thumb-wrap img {
        max-width: 46px;
        max-height: 46px;
        object-fit: contain;
        filter: drop-shadow(0 3px 5px rgba(30, 20, 50, 0.24));
    }
    .roulette-result-name {
        color: #2f2633;
        font-size: 14px;
        font-weight: 900;
        line-height: 1.35;
    }
    .roulette-result-meta {
        margin-top: 2px;
        color: #7a687d;
        font-size: 11px;
        font-weight: 700;
    }
    .roulette-face-note {
        color: #776689;
        font-size: 12px;
        font-weight: 800;
    }
    @media (max-width: 600px) {
        .roulette-detail-panel {
            padding: 0;
        }
        .roulette-detail-title {
            font-size: 18px;
        }
        .roulette-gender-toggle-row {
            gap: 8px;
        }
        .roulette-gender-btn {
            min-height: 40px;
            font-size: 11px;
            border-radius: 14px;
        }
        .roulette-music-control {
            top: 12px;
            right: 12px;
        }
        .roulette-music-btn {
            min-width: 82px;
            height: 30px !important;
            padding: 0 9px !important;
        }
        .roulette-music-btn .btn-text,
        .roulette-music-btn .music-icon {
            font-size: 8px;
        }
        .roulette-volume-panel {
            width: 150px;
        }
    }
    .roulette-machine-panel { display: none; max-width: 520px; margin: 0 auto 24px; text-align: center; }
    .roulette-machine-panel.is-active { display: block; }
    .roulette-machine-stage { position: relative; width: min(100%, 420px); min-height: 468px; margin: 0 auto; padding-top: 8px; overflow: visible; }
    .roulette-machine-art-wrap { position: relative; width: min(100%, 360px); margin: 0 auto; z-index: 2; }
    .roulette-machine-art { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 26px rgba(163, 62, 143, 0.2)); pointer-events: none; user-select: none; }
    .roulette-floor-sparkles { position: absolute; left: 50%; bottom: 96px; width: 210px; height: 56px; transform: translateX(-50%); pointer-events: none; z-index: 1; }
    .roulette-floor-sparkles::before, .roulette-floor-sparkles::after { content: '★ ✦ ★ ✧ ★'; position: absolute; left: 50%; color: #ff72c8; font-size: 20px; letter-spacing: 10px; white-space: nowrap; text-shadow: 0 0 10px rgba(255, 103, 196, 0.9), 0 0 22px rgba(255, 164, 223, 0.65); opacity: 0.78; transform: translateX(-50%); animation: roulette-floor-shimmer 1.45s ease-in-out infinite; }
    .roulette-floor-sparkles::after { content: '✧ ★ ✦ ★ ✧'; top: 18px; font-size: 14px; letter-spacing: 13px; opacity: 0.52; animation-delay: -0.58s; }
    .roulette-orbit-stars { position: absolute; left: 50%; top: 43.5%; width: 198px; height: 198px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; z-index: 4; }
    .roulette-orbit-star { position: absolute; left: 50%; top: 50%; color: #ff7ed3; font-size: 18px; text-shadow: 0 0 10px rgba(255, 112, 211, 0.96), 0 0 18px rgba(255, 218, 117, 0.72); transform-origin: 0 0; animation: roulette-orbit-spin 1.18s linear infinite; animation-delay: var(--delay, 0s); }
    .roulette-orbit-star:nth-child(1) { --angle: 0deg; --delay: 0s; }
    .roulette-orbit-star:nth-child(2) { --angle: 60deg; --delay: -0.2s; }
    .roulette-orbit-star:nth-child(3) { --angle: 120deg; --delay: -0.4s; }
    .roulette-orbit-star:nth-child(4) { --angle: 180deg; --delay: -0.6s; }
    .roulette-orbit-star:nth-child(5) { --angle: 240deg; --delay: -0.8s; }
    .roulette-orbit-star:nth-child(6) { --angle: 300deg; --delay: -1s; }
    .roulette-machine-stage.is-spinning .roulette-orbit-stars { opacity: 1; animation: roulette-orbit-burst 1.55s ease-out forwards; }
    .roulette-dispense-ball { position: absolute; left: 50%; bottom: 70px; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,0.95), var(--roulette-ball-color, #f45fb6) 46%, rgba(87, 39, 111, 0.94) 100%); box-shadow: inset -7px -9px 15px rgba(52, 19, 82, 0.24), 0 14px 24px rgba(179, 60, 150, 0.28); opacity: 0; transform: translate(-50%, -26px) scale(0.42); pointer-events: none; z-index: 5; }
    .roulette-dispense-ball::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.86); transform: translate(-12px, -13px); filter: blur(0.5px); }
    .roulette-machine-stage.is-ball-ready .roulette-dispense-ball { animation: roulette-ball-drop 0.62s cubic-bezier(0.18, 0.85, 0.2, 1.25) forwards; }
    .roulette-machine-panel .roulette-draw-btn { width: min(100%, 170px); min-height: 46px; margin: 10px auto 16px; display: inline-flex; align-items: center; justify-content: center; }
    .roulette-draw-btn:disabled { opacity: 0.62; cursor: wait; }
    .roulette-result-card.is-visible { animation: roulette-result-rise 0.44s ease-out both; }
    @keyframes roulette-floor-shimmer { 0%, 100% { opacity: 0.36; transform: translateX(-50%) translateY(2px) scaleX(0.92); } 50% { opacity: 1; transform: translateX(-50%) translateY(-4px) scaleX(1.08); } }
    @keyframes roulette-orbit-spin { from { transform: rotate(var(--angle)) translateX(86px) rotate(0deg) scale(0.75); } to { transform: rotate(calc(var(--angle) + 360deg)) translateX(86px) rotate(240deg) scale(1.05); } }
    @keyframes roulette-orbit-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72) rotate(0deg); } 18% { opacity: 1; } 68% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(250deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.62) rotate(430deg); } }
    @keyframes roulette-ball-drop { 0% { opacity: 0; transform: translate(-50%, -30px) scale(0.38); } 62% { opacity: 1; transform: translate(-50%, 8px) scale(1.08); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } }
    @keyframes roulette-result-rise { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @media (max-width: 600px) { .roulette-machine-stage { min-height: 394px; } .roulette-machine-art-wrap { width: min(100%, 310px); } .roulette-floor-sparkles { bottom: 82px; width: 180px; } .roulette-orbit-stars { width: 166px; height: 166px; top: 43%; } .roulette-orbit-star { font-size: 15px; } @keyframes roulette-orbit-spin { from { transform: rotate(var(--angle)) translateX(72px) rotate(0deg) scale(0.75); } to { transform: rotate(calc(var(--angle) + 360deg)) translateX(72px) rotate(240deg) scale(1.05); } } }
    #roulette-section.is-machine-mode .roulette-intro,
    #roulette-section.is-machine-mode .roulette-mode-grid,
    #roulette-section.is-machine-mode #roulette-select-actions {
        display: none;
    }
    #roulette-section.is-machine-mode .roulette-machine-panel {
        margin-top: 0;
    }
    .roulette-machine-actions {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 16px;
    }
    .roulette-machine-actions .btn {
        width: min(46%, 150px);
        margin: 0;
    }
    .roulette-floor-sparkles {
        bottom: 108px;
        width: min(110vw, 520px);
        height: 168px;
    }
    .roulette-floor-sparkles::before,
    .roulette-floor-sparkles::after {
        content: '★ ✦ ✧ ★ ✦ ★ ✧ ★ ✦ ✧ ★ ✦ ★ ✧ ★';
        font-size: 28px;
        letter-spacing: 8px;
        line-height: 1.8;
        text-shadow: 0 0 12px rgba(255, 103, 196, 1), 0 0 28px rgba(255, 164, 223, 0.82), 0 0 48px rgba(255, 86, 188, 0.45);
    }
    .roulette-floor-sparkles::after {
        content: '✧ ★ ✦ ★ ✧ ✦ ★ ✧ ★ ✦ ★ ✧ ✦ ★ ✧';
        top: 42px;
        font-size: 23px;
        letter-spacing: 10px;
    }
    .roulette-orbit-stars {
        width: 330px;
        height: 330px;
    }
    .roulette-orbit-star {
        font-size: 28px;
        text-shadow: 0 0 13px rgba(255, 112, 211, 1), 0 0 28px rgba(255, 218, 117, 0.88), 0 0 44px rgba(255, 93, 190, 0.55);
    }
    .roulette-orbit-star:nth-child(1) { --angle: 0deg; --delay: 0s; }
    .roulette-orbit-star:nth-child(2) { --angle: 15deg; --delay: -0.05s; }
    .roulette-orbit-star:nth-child(3) { --angle: 30deg; --delay: -0.1s; }
    .roulette-orbit-star:nth-child(4) { --angle: 45deg; --delay: -0.15s; }
    .roulette-orbit-star:nth-child(5) { --angle: 60deg; --delay: -0.2s; }
    .roulette-orbit-star:nth-child(6) { --angle: 75deg; --delay: -0.25s; }
    .roulette-orbit-star:nth-child(7) { --angle: 90deg; --delay: -0.3s; }
    .roulette-orbit-star:nth-child(8) { --angle: 105deg; --delay: -0.35s; }
    .roulette-orbit-star:nth-child(9) { --angle: 120deg; --delay: -0.4s; }
    .roulette-orbit-star:nth-child(10) { --angle: 135deg; --delay: -0.45s; }
    .roulette-orbit-star:nth-child(11) { --angle: 150deg; --delay: -0.5s; }
    .roulette-orbit-star:nth-child(12) { --angle: 165deg; --delay: -0.55s; }
    .roulette-orbit-star:nth-child(13) { --angle: 180deg; --delay: -0.6s; }
    .roulette-orbit-star:nth-child(14) { --angle: 195deg; --delay: -0.65s; }
    .roulette-orbit-star:nth-child(15) { --angle: 210deg; --delay: -0.7s; }
    .roulette-orbit-star:nth-child(16) { --angle: 225deg; --delay: -0.75s; }
    .roulette-orbit-star:nth-child(17) { --angle: 240deg; --delay: -0.8s; }
    .roulette-orbit-star:nth-child(18) { --angle: 255deg; --delay: -0.85s; }
    .roulette-orbit-star:nth-child(19) { --angle: 270deg; --delay: -0.9s; }
    .roulette-orbit-star:nth-child(20) { --angle: 285deg; --delay: -0.95s; }
    .roulette-orbit-star:nth-child(21) { --angle: 300deg; --delay: -1s; }
    .roulette-orbit-star:nth-child(22) { --angle: 315deg; --delay: -1.05s; }
    .roulette-orbit-star:nth-child(23) { --angle: 330deg; --delay: -1.1s; }
    .roulette-orbit-star:nth-child(24) { --angle: 345deg; --delay: -1.15s; }
    @keyframes roulette-orbit-spin { from { transform: rotate(var(--angle)) translateX(145px) rotate(0deg) scale(0.8); } to { transform: rotate(calc(var(--angle) + 360deg)) translateX(145px) rotate(240deg) scale(1.2); } }
    @media (max-width: 600px) {
        .roulette-floor-sparkles { bottom: 96px; width: min(116vw, 430px); height: 132px; }
        .roulette-floor-sparkles::before { font-size: 23px; letter-spacing: 6px; }
        .roulette-floor-sparkles::after { top: 36px; font-size: 18px; letter-spacing: 8px; }
        .roulette-orbit-stars { width: 260px; height: 260px; }
        .roulette-orbit-star { font-size: 22px; }
        @keyframes roulette-orbit-spin { from { transform: rotate(var(--angle)) translateX(116px) rotate(0deg) scale(0.8); } to { transform: rotate(calc(var(--angle) + 360deg)) translateX(116px) rotate(240deg) scale(1.16); } }
    }
    .roulette-result-card {
        position: relative;
        padding-right: 48px;
        overflow: visible;
    }
    .roulette-result-thumb-wrap {
        overflow: hidden;
        background: rgba(255,255,255,0.72);
        border: 1px solid rgba(221, 154, 205, 0.48);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65), 0 8px 18px rgba(130, 54, 128, 0.12);
    }
    .roulette-result-thumb-wrap img {
        max-width: 58px;
        max-height: 58px;
    }
    .roulette-result-hsv-badge {
        position: absolute;
        top: 12px;
        right: 14px;
        width: 18px;
        height: 18px;
        border: 2px solid rgba(255,255,255,0.92);
        border-radius: 50%;
        background: var(--roulette-ball-color, #f45fb6);
        box-shadow: 0 2px 7px rgba(42, 26, 58, 0.18);
        pointer-events: none;
    }
    .roulette-machine-stage::before,
    .roulette-machine-stage::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 38px;
        width: min(148vw, 780px);
        height: 210px;
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 1;
        background-repeat: repeat;
        opacity: 0.88;
        mix-blend-mode: screen;
    }
    .roulette-machine-stage::before {
        background-image:
            radial-gradient(circle, rgba(255,122,210,0.95) 0 1.6px, transparent 2.4px),
            radial-gradient(circle, rgba(255,218,245,0.82) 0 1.2px, transparent 2.2px),
            radial-gradient(circle, rgba(255,80,190,0.64) 0 2.2px, transparent 3.4px),
            radial-gradient(ellipse at center, rgba(255,77,191,0.42), transparent 58%);
        background-size: 34px 22px, 48px 31px, 76px 42px, 100% 100%;
        background-position: 0 0, 18px 8px, 7px 15px, center;
        filter: blur(0.2px) drop-shadow(0 0 10px rgba(255, 92, 197, 0.68));
        animation: roulette-nebula-drift 5.4s ease-in-out infinite;
    }
    .roulette-machine-stage::after {
        bottom: 64px;
        height: 150px;
        background-image:
            radial-gradient(circle, rgba(255,180,232,0.92) 0 1.4px, transparent 2.4px),
            radial-gradient(circle, rgba(255,84,196,0.72) 0 2px, transparent 3.2px),
            linear-gradient(90deg, transparent, rgba(255,87,195,0.28), rgba(255,217,246,0.46), rgba(255,87,195,0.28), transparent);
        background-size: 28px 18px, 58px 34px, 100% 44px;
        background-position: 4px 2px, 20px 11px, center 56px;
        filter: blur(0.6px) drop-shadow(0 0 16px rgba(255, 111, 211, 0.74));
        animation: roulette-galaxy-wave 3.2s ease-in-out infinite;
    }
    .roulette-floor-sparkles {
        bottom: 40px;
        width: min(156vw, 840px);
        height: 240px;
        z-index: 3;
        opacity: 0.98;
    }
    .roulette-floor-sparkles::before,
    .roulette-floor-sparkles::after {
        content: '✦ ★ ✧ ✦ ✶ ★ ✧ ✦ ★ ✧ ✦ ✶ ★ ✧ ✦ ★ ✦ ✧ ✶ ★ ✧ ✦ ★';
        font-size: 31px;
        letter-spacing: 7px;
        line-height: 1.45;
        text-shadow: 0 0 9px rgba(255,255,255,0.85), 0 0 18px rgba(255, 103, 196, 1), 0 0 38px rgba(255, 164, 223, 0.96), 0 0 72px rgba(255, 60, 181, 0.58);
        animation: roulette-floor-shimmer 1.05s ease-in-out infinite, roulette-galaxy-wave 4.4s ease-in-out infinite;
    }
    .roulette-floor-sparkles::after {
        content: '✧ ✦ ★ ✶ ✦ ✧ ★ ✦ ✧ ★ ✶ ✦ ✧ ★ ✦ ✧ ✶ ★ ✦ ✧ ★ ✦ ✧';
        top: 54px;
        font-size: 24px;
        letter-spacing: 9px;
        opacity: 0.76;
        animation-delay: -0.48s, -1.2s;
    }
    @keyframes roulette-nebula-drift {
        0%, 100% { opacity: 0.62; transform: translateX(-50%) translateY(8px) scaleX(0.96); }
        45% { opacity: 1; transform: translateX(-50%) translateY(-8px) scaleX(1.05); }
        70% { opacity: 0.86; transform: translateX(-50%) translateY(0) scaleX(1.12); }
    }
    @keyframes roulette-galaxy-wave {
        0%, 100% { transform: translateX(-50%) translateY(5px) scaleX(0.94); opacity: 0.62; }
        50% { transform: translateX(-50%) translateY(-7px) scaleX(1.08); opacity: 1; }
    }
    @media (max-width: 600px) {
        .roulette-result-card { padding-right: 46px; }
        .roulette-result-hsv-badge { width: 16px; height: 16px; right: 12px; top: 11px; }
        .roulette-machine-stage::before { width: min(170vw, 600px); height: 170px; bottom: 28px; }
        .roulette-machine-stage::after { width: min(160vw, 560px); height: 126px; bottom: 52px; }
        .roulette-floor-sparkles { bottom: 30px; width: min(170vw, 600px); height: 190px; }
        .roulette-floor-sparkles::before { font-size: 25px; letter-spacing: 5px; }
        .roulette-floor-sparkles::after { top: 44px; font-size: 19px; letter-spacing: 7px; }
    }
    .roulette-machine-stage::before,
    .roulette-machine-stage::after {
        left: 50%;
        bottom: 118px;
        width: min(140vw, 720px);
        height: 285px;
        transform: translateX(-50%);
        background-repeat: repeat;
        background-image:
            radial-gradient(circle, rgba(255, 224, 248, 0.98) 0 1.3px, transparent 2.4px),
            radial-gradient(circle, rgba(255, 115, 210, 0.92) 0 2px, transparent 3.3px),
            radial-gradient(circle, rgba(255, 68, 185, 0.76) 0 2.8px, transparent 4.4px),
            radial-gradient(ellipse at 50% 100%, rgba(255, 80, 195, 0.46) 0 8%, rgba(255, 99, 204, 0.20) 32%, transparent 68%);
        background-size: 38px 54px, 64px 78px, 104px 118px, 100% 100%;
        background-position: 0 58px, 22px 92px, 9px 138px, center bottom;
        clip-path: polygon(18% 100%, 82% 100%, 98% 16%, 80% 6%, 50% 0, 20% 6%, 2% 16%);
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.92) 28%, rgba(0,0,0,0.54) 66%, transparent 100%);
        mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.92) 28%, rgba(0,0,0,0.54) 66%, transparent 100%);
        filter: drop-shadow(0 0 10px rgba(255, 91, 199, 0.82)) drop-shadow(0 0 28px rgba(255, 125, 218, 0.38));
        opacity: 0.92;
        mix-blend-mode: screen;
        z-index: 1;
        animation: roulette-fountain-rise 2.55s ease-out infinite;
    }
    .roulette-machine-stage::after {
        bottom: 108px;
        width: min(132vw, 650px);
        height: 250px;
        background-image:
            radial-gradient(circle, rgba(255, 245, 253, 0.94) 0 1px, transparent 2px),
            radial-gradient(circle, rgba(255, 151, 224, 0.86) 0 1.7px, transparent 3px),
            radial-gradient(circle, rgba(255, 74, 192, 0.68) 0 2.4px, transparent 4px),
            radial-gradient(ellipse at 50% 100%, rgba(255, 101, 207, 0.42) 0 10%, transparent 58%);
        background-size: 30px 46px, 52px 72px, 86px 108px, 100% 100%;
        background-position: 10px 92px, 4px 128px, 28px 174px, center bottom;
        clip-path: polygon(24% 100%, 76% 100%, 88% 24%, 69% 8%, 50% 0, 31% 8%, 12% 24%);
        opacity: 0.78;
        filter: blur(0.25px) drop-shadow(0 0 14px rgba(255, 108, 211, 0.9));
        animation: roulette-fountain-rise-alt 2.1s ease-out infinite;
    }
    .roulette-floor-sparkles {
        left: 50%;
        bottom: 96px;
        width: min(126vw, 590px);
        height: 230px;
        transform: translateX(-50%);
        z-index: 3;
        opacity: 1;
        overflow: visible;
    }
    .roulette-floor-sparkles::before,
    .roulette-floor-sparkles::after {
        content: '✦   ★   ✧   ✦   ★   ✧   ✦';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 100%;
        color: #ff66c7;
        font-size: 24px;
        letter-spacing: 16px;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        text-shadow: 0 0 8px rgba(255,255,255,0.85), 0 0 18px rgba(255, 91, 199, 1), 0 0 40px rgba(255, 118, 214, 0.8);
        transform: translateX(-50%);
        opacity: 0;
        animation: roulette-fountain-stars 1.85s ease-out infinite;
    }
    .roulette-floor-sparkles::after {
        content: '✧  ✦  ✶  ★  ✦  ✧  ★  ✶  ✦';
        font-size: 18px;
        letter-spacing: 13px;
        animation-delay: -0.92s;
    }
    .roulette-machine-stage::before {
        border-bottom-left-radius: 999px 52px;
        border-bottom-right-radius: 999px 52px;
    }
    .roulette-machine-stage::after {
        border-bottom-left-radius: 999px 44px;
        border-bottom-right-radius: 999px 44px;
    }
    @keyframes roulette-fountain-rise {
        0% { opacity: 0; background-position: 0 250px, 22px 286px, 9px 330px, center bottom; transform: translateX(-50%) translateY(6px) scaleX(0.34); }
        20% { opacity: 1; }
        70% { opacity: 0.82; transform: translateX(-50%) translateY(-18px) scaleX(1.02); }
        100% { opacity: 0; background-position: 0 -24px, 22px 8px, 9px 46px, center bottom; transform: translateX(-50%) translateY(-54px) scaleX(1.34); }
    }
    @keyframes roulette-fountain-rise-alt {
        0% { opacity: 0; background-position: 10px 230px, 4px 264px, 28px 314px, center bottom; transform: translateX(-50%) translateY(4px) scaleX(0.28); }
        26% { opacity: 0.92; }
        100% { opacity: 0; background-position: 10px -18px, 4px 18px, 28px 62px, center bottom; transform: translateX(-50%) translateY(-46px) scaleX(1.12); }
    }
    @keyframes roulette-fountain-stars {
        0% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.38); letter-spacing: 2px; }
        18% { opacity: 1; }
        76% { opacity: 0.78; }
        100% { opacity: 0; transform: translateX(-50%) translateY(-172px) scale(1.18); letter-spacing: 22px; }
    }
    @media (max-width: 600px) {
        .roulette-machine-stage::before { bottom: 92px; width: min(152vw, 520px); height: 228px; }
        .roulette-machine-stage::after { bottom: 84px; width: min(142vw, 480px); height: 205px; }
        .roulette-floor-sparkles { bottom: 74px; width: min(132vw, 430px); height: 184px; }
        .roulette-floor-sparkles::before { font-size: 20px; letter-spacing: 10px; }
        .roulette-floor-sparkles::after { font-size: 15px; letter-spacing: 9px; }
        @keyframes roulette-fountain-stars {
            0% { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.38); letter-spacing: 1px; }
            18% { opacity: 1; }
            76% { opacity: 0.78; }
            100% { opacity: 0; transform: translateX(-50%) translateY(-132px) scale(1.1); letter-spacing: 14px; }
        }
    }
    .roulette-machine-stage.is-face-roulette::before,
    .roulette-machine-stage.is-face-roulette::after {
        background-image:
            radial-gradient(circle, rgba(246, 231, 255, 0.98) 0 1.3px, transparent 2.4px),
            radial-gradient(circle, rgba(199, 139, 255, 0.92) 0 2px, transparent 3.3px),
            radial-gradient(circle, rgba(151, 84, 238, 0.78) 0 2.8px, transparent 4.4px),
            radial-gradient(ellipse at 50% 100%, rgba(173, 101, 255, 0.46) 0 8%, rgba(211, 164, 255, 0.20) 32%, transparent 68%);
        filter: drop-shadow(0 0 10px rgba(187, 126, 255, 0.86)) drop-shadow(0 0 28px rgba(214, 176, 255, 0.42));
    }
    .roulette-machine-stage.is-face-roulette::after {
        background-image:
            radial-gradient(circle, rgba(252, 246, 255, 0.96) 0 1px, transparent 2px),
            radial-gradient(circle, rgba(215, 169, 255, 0.88) 0 1.7px, transparent 3px),
            radial-gradient(circle, rgba(157, 87, 239, 0.72) 0 2.4px, transparent 4px),
            radial-gradient(ellipse at 50% 100%, rgba(190, 122, 255, 0.44) 0 10%, transparent 58%);
        filter: blur(0.25px) drop-shadow(0 0 14px rgba(207, 159, 255, 0.94));
    }
    .roulette-machine-stage.is-face-roulette .roulette-orbit-star,
    .roulette-machine-stage.is-face-roulette .roulette-floor-sparkles::before,
    .roulette-machine-stage.is-face-roulette .roulette-floor-sparkles::after {
        color: #c990ff;
        text-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 18px rgba(202, 143, 255, 1), 0 0 40px rgba(160, 92, 238, 0.78);
    }
    .play-menu-option:hover,
    .play-menu-option:focus-visible {
        color: #fff;
        outline: none;
        background: #2b5fae;
    }
    body.theme-dark .play-menu-popover {
        background: rgba(15, 20, 31, 0.98);
        border-color: rgba(232, 196, 136, 0.16);
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.36);
    }
    body.theme-dark .play-menu-option {
        color: #eee6d9;
        background: rgba(34, 45, 64, 0.92);
        border-color: rgba(232, 196, 136, 0.14);
    }
    body.theme-dark .play-menu-option:hover,
    body.theme-dark .play-menu-option:focus-visible {
        color: #fff7e8;
        background: #2b5fae;
    }
    .btn {
        padding: 12px 24px;
        font-weight: bold;
        font-size: 12px;
        cursor: pointer;
        background: #eee;
        border: none;
        border-radius: 8px;
        transition: 0.2s;
    }
    .btn:hover {
        background: #e0e0e0;
    }
    .btn.active {
        color: white;
        background: #007bff;
    }
    .btn.is-api {
        background: linear-gradient(135deg, #16334f, #24659b);
    }
    .btn.is-api.active {
        background: linear-gradient(135deg, #21598d, #3ea0ff);
    }
    .btn-home {
        background: #f8f9fa;
        border: 1px solid #ddd;
    }
    .btn-submit {
        flex: 1;
        padding: 14px;
        color: white;
        font-weight: bold;
        cursor: pointer;
        background-color: #28a745;
        border: none;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2);
    }
    .btn-reset {
        padding: 3px 10px;
        color: #999;
        font-size: 9px;
        cursor: pointer;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 15px;
    }
    .btn-reset:hover {
        color: #666;
        background: #f5f5f5;
    }
    input#search,
    input#ranking-search {
        width: 100%;
        padding: 12px;
        font-size: 15px;
        outline: none;
        box-sizing: border-box;
        border: 2px solid #eee;
        border-radius: 8px;
        transition: border-color 0.2s;
    }
    input#search:focus,
    input#ranking-search:focus {
        border-color: #007bff;
    }
    .search-loading-disabled {
        opacity: 0.58;
        cursor: wait !important;
    }
    .search-load-more-wrap {
        width: 100%;
        margin: 18px 0 4px;
        display: grid;
        gap: 8px;
    }
    .search-load-more-status {
        color: #777;
        font-size: 12px;
        text-align: center;
    }
    .search-load-more-btn {
        width: 100%;
        min-height: 48px;
        border: 1px solid #e5e5e5;
        border-radius: 12px;
        background: linear-gradient(180deg, #ffffff, #f5f7fb);
        color: #333;
        font-size: 14px;
        font-weight: 900;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(0,0,0,0.05);
        transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }
    .search-load-more-btn:hover {
        transform: translateY(-1px);
        border-color: #cdd8f2;
        box-shadow: 0 12px 24px rgba(50, 78, 130, 0.1);
    }
    .search-scroll-top-btn {
        position: fixed;
        right: max(18px, env(safe-area-inset-right));
        bottom: max(18px, env(safe-area-inset-bottom));
        z-index: 2200;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 88px;
        min-height: 46px;
        padding: 11px 16px;
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 999px;
        background: linear-gradient(135deg, rgba(30, 92, 157, 0.96), rgba(35, 126, 212, 0.96));
        box-shadow: 0 10px 26px rgba(30, 92, 157, 0.28);
        color: #fff;
        font-size: 13px;
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(10px);
        transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    }
    .search-scroll-top-btn.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
    .search-scroll-top-btn:hover {
        box-shadow: 0 14px 32px rgba(30, 92, 157, 0.34);
        transform: translateY(-2px);
    }
    .search-scroll-top-btn::before {
        content: "^";
        font-size: 15px;
        line-height: 1;
    }
    .ranking-summary {
        margin: 12px 0 18px;
        color: #666;
        font-size: 12px;
        line-height: 1.7;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .ranking-top-note {
        margin-bottom: 10px;
        padding: 10px 12px;
        color: #5b4b2d;
        font-size: 10px;
        line-height: 1.6;
        background: linear-gradient(135deg, rgba(255, 247, 214, 0.96), rgba(255, 239, 199, 0.88));
        border: 1px solid rgba(224, 188, 105, 0.35);
        border-radius: 14px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .ranking-score-box {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        padding: 6px 10px;
        color: #4c3f20;
        font-size: 10px;
        background: rgba(255, 248, 222, 0.9);
        border: 1px solid rgba(224, 188, 105, 0.3);
        border-radius: 999px;
    }
    .ranking-score-box strong {
        color: #b16d00;
        font-size: 10px;
    }
    .ranking-rank-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        height: 28px;
        margin-right: 10px;
        padding: 0 10px;
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        background: linear-gradient(135deg, #ff9964, #ff7e46);
        border-radius: 999px;
    }
    .ranking-rank-chip.is-awards-crown-chip {
        min-width: 42px;
        padding: 0 8px;
        color: inherit;
        background: rgba(255, 248, 222, 0.9);
        border: 1px solid rgba(214, 158, 46, 0.24);
    }
    .ranking-head-block {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        width: fit-content;
        max-width: 100%;
        margin-bottom: 2px;
    }
    .ranking-actions {
        display: flex;
        justify-content: center;
        margin-top: 22px;
    }
    .ranking-grid-mode,
    .news-grid-mode,
    .awards-grid-mode,
    .tmi-grid-mode,
    .ranking-line-mode,
    .info-placeholder-mode {
        display: none;
    }
    #ranking-section.is-news-mode .news-grid-mode {
        display: block;
    }
    #ranking-section.is-awards-mode .awards-grid-mode {
        display: block;
    }
    #ranking-section.is-tmi-mode .tmi-grid-mode {
        display: block;
    }
    .tmi-grid-mode {
        position: relative;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
    .tmi-theme-page {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin-top: 16px;
    }
    .tmi-theme-page.is-hidden { display: none; }
    .boardgame-analysis-page { min-width: 0; padding: 0 4px; box-sizing: border-box; }
    .analysis-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
    .analysis-heading h4 { margin: 0; font-size: 18px; }
    .analysis-heading span, .analysis-meta { font-size: 12px; opacity: 0.75; }
    .analysis-meta { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
    .analysis-overall .analysis-status-line { display: flex; align-items: center; gap: 8px; }
    .analysis-overall .analysis-status-line [data-analysis-status] { min-width: 0; overflow-wrap: anywhere; }
    .analysis-overall .analysis-help { flex-shrink: 0; }
    .analysis-help button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid #75838a; border-radius: 50%; background: rgba(255, 255, 255, 0.75); color: #252d31; font: inherit; font-size: 14px; cursor: pointer; }
    .analysis-help button:focus-visible { outline: 2px solid #719ca2; outline-offset: 3px; }
    .analysis-help [popover] { position: fixed; inset: auto; box-sizing: border-box; width: min(520px, calc(100vw - 24px)); max-height: min(320px, calc(100dvh - 24px)); margin: 0; padding: 14px; overflow: auto; border: 1px solid #75838a; border-radius: 6px; background: rgba(255, 255, 255, 0.97); color: #252d31; opacity: 1; font-size: 12px; line-height: 1.7; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); }
    body.theme-dark .analysis-help button { background: #25303b; color: #f1f4f6; border-color: #83909d; }
    body.theme-dark .analysis-help [popover] { background: rgba(32, 39, 46, 0.98); color: #f1f4f6; border-color: #83909d; }
    .boardgame-analysis-page [data-analysis-status] { margin: 8px 0; font-size: 14px; }
    .analysis-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .analysis-toolbar select, .analysis-toolbar input { min-width: 0; width: 100%; padding: 9px; border: 1px solid #75838a; border-radius: 4px; background: var(--input-bg, #fff); color: var(--text-color, #252d31); font: inherit; font-size: 12px; box-sizing: border-box; }
    .analysis-toolbar input { grid-column: 1 / -1; }
    body.theme-dark .analysis-toolbar select, body.theme-dark .analysis-toolbar input { background: #182029; color: #ece7dc; }
    .analysis-row summary:focus-visible { outline: 2px solid #719ca2; outline-offset: 2px; }
    .analysis-row { border-bottom: 1px solid rgba(125, 130, 140, 0.3); }
    body.theme-dark .boardgame-analysis-page [data-analysis-results]:not(:empty) {
        box-sizing: border-box;
        padding: 4px 12px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.86);
        color: #20262c;
    }
    body.theme-dark .boardgame-analysis-page .analysis-row { border-bottom-color: rgba(32, 38, 44, 0.22); }
    body.theme-dark .boardgame-analysis-page .analysis-row small { opacity: 0.9; }
    body.theme-dark .boardgame-analysis-page .analysis-metrics div { border-bottom-color: rgba(32, 38, 44, 0.18); }
    body.theme-dark .boardgame-analysis-page .analysis-overview-section { border-top-color: rgba(32, 38, 44, 0.22); }
    .analysis-row summary { display: grid; grid-template-columns: 30px 42px minmax(0, 1fr) 70px 70px; align-items: center; gap: 8px; padding: 12px 0; cursor: pointer; list-style: none; }
    .analysis-row summary::-webkit-details-marker { display: none; }
    .analysis-row summary img { width: 42px; height: 48px; object-fit: contain; }
    .analysis-card-name { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
    .analysis-row small { display: block; font-size: 10px; margin-top: 4px; opacity: 0.75; }
    .analysis-rank { font-size: 11px; }
    .analysis-value, .analysis-rate { text-align: right; font-size: 12px; }
    .analysis-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 10px 0; font-size: 12px; }
    .analysis-metrics div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; border-bottom: 1px solid rgba(125, 130, 140, 0.2); padding: 5px 0; }
    .analysis-metrics dt, .analysis-metrics dd { margin: 0; }
    .analysis-context { font-size: 11px; overflow-wrap: anywhere; line-height: 1.7; }
    .analysis-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; font-size: 12px; }
    .analysis-pagination button { width: 32px; height: 32px; font: inherit; border: 1px solid #75838a; border-radius: 4px; cursor: pointer; }
    .analysis-pagination button:disabled { opacity: 0.4; cursor: default; }
    .boardgame-analysis-page [hidden] { display: none !important; }
    .analysis-overview-section { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(125, 130, 140, 0.3); }
    .analysis-overview-section header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
    .analysis-overview-section h5 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
    .analysis-overview-section header button { flex-shrink: 0; font: inherit; font-size: 12px; padding: 6px 8px; cursor: pointer; }
    .analysis-overview-sector { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 12px; }
    .analysis-overview-sector select { min-width: 0; flex: 1; max-width: 320px; padding: 8px; font: inherit; background: var(--input-bg, #fff); color: var(--text-color, #252d31); border: 1px solid #75838a; border-radius: 4px; }
    .analysis-overview-row summary { grid-template-columns: 30px 42px minmax(0, 1fr) 100px; }
    .analysis-overview-row .analysis-value { overflow-wrap: anywhere; }
    .analysis-overview-section .analysis-pagination { margin-top: 12px; }
    @media (max-width: 480px) {
        body.theme-dark .boardgame-analysis-page [data-analysis-results]:not(:empty) { padding-inline: 8px; }
        .analysis-row summary { grid-template-columns: 28px 32px minmax(0, 1fr) 58px; gap: 5px; }
        .analysis-row summary img { width: 32px; height: 42px; }
        .analysis-overview-row summary { grid-template-columns: 24px 32px minmax(0, 1fr) 85px; }
        .analysis-rate { grid-column: 3 / 5; text-align: left; font-size: 11px; }
        .analysis-rate small { display: inline; margin-left: 6px; }
        .analysis-metrics { grid-template-columns: minmax(0, 1fr); }
    }
    .tmi-boardgame-section { padding-top: 14px; border-top: 1px solid rgba(125, 130, 140, 0.25); }
    .tmi-boardgame-section + .tmi-boardgame-section { margin-top: 18px; }
    .tmi-boardgame-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .tmi-boardgame-head h5 { margin: 0; font-size: 14px; }
    .tmi-boardgame-head .ranking-card-open-btn { position: static; flex: 0 0 32px; }
    .tmi-pagination-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 18px;
    }
    .tmi-pagination-controls .boardgame-page-arrow {
        position: static;
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        transform: none;
        font-size: 22px;
    }
    .tmi-pagination-controls .boardgame-page-arrow:hover { transform: none; }
    .tmi-pagination-controls .boardgame-page-arrow:disabled {
        opacity: 0.35;
        cursor: default;
    }
    .tmi-pagination-controls .boardgame-page-indicator {
        margin: 0;
        color: #665965;
    }
    body.theme-dark .tmi-pagination-controls .boardgame-page-indicator { color: #d8cbd4; }
    #ranking-section.is-grid-mode .ranking-grid-mode {
        display: block;
    }
    #ranking-section.is-line-mode .ranking-line-mode {
        display: block;
    }
    #ranking-section.is-info-placeholder .info-placeholder-mode {
        display: block;
    }
    .ranking-mode-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 18px;
        padding-bottom: 12px;
    }
    .ranking-mode-head h3 {
        margin: 0;
    }
    .ranking-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-top: 16px;
    }
    .ranking-category-card {
        position: relative;
        min-height: 210px;
        padding: 18px 18px 16px;
        color: #2b2b2b;
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 18px;
        box-shadow: 0 12px 28px rgba(20, 20, 20, 0.08);
    }
    .ranking-category-card h4 {
        margin: 0 44px 14px 0;
        font-size: 18px;
        line-height: 1.25;
    }
    .ranking-card-open-btn {
        position: absolute;
        top: 14px;
        right: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        color: #fff;
        font-size: 20px;
        font-weight: 900;
        line-height: 1;
        background: #252525;
        border: 0;
        border-radius: 999px;
        cursor: pointer;
    }
    .ranking-card-open-btn:hover {
        background: #252525;
    }
    .ranking-card-open-btn:disabled {
        opacity: 0.42;
        cursor: default;
    }
    .ranking-card-open-btn:disabled:hover {
        background: #252525;
    }
    .ranking-card-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .ranking-card-row {
        display: grid;
        grid-template-columns: 34px 38px minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-height: 46px;
        padding: 6px 8px;
        background: rgba(255, 255, 255, 0.62);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 10px;
    }
    .ranking-card-rank {
        color: #777;
        font-size: 11px;
        font-weight: 800;
    }
    .ranking-card-rank.is-only-one-static {
        color: #777;
        text-shadow: none;
        animation: none;
        filter: none;
        transform: none;
    }
    .ranking-card-rank.is-golden-new {
        color: #c17a00;
        text-shadow:
            0 0 4px rgba(255, 224, 102, 0.8),
            0 0 10px rgba(255, 190, 48, 0.45);
        animation: golden-new-sparkle 1.25s ease-in-out infinite;
    }
    @keyframes golden-new-sparkle {
        0%, 100% {
            filter: brightness(1);
            transform: translateY(0);
        }
        50% {
            filter: brightness(1.45);
            transform: translateY(-1px);
        }
    }
    .ranking-card-crown-rank {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
    }
    .ranking-card-crown-rank .awards-crowns,
    .ranking-rank-chip.is-awards-crown-chip .awards-crowns {
        align-items: center;
        justify-content: center;
    }
    .ranking-card-thumb {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 10px;
    }
    .ranking-card-thumb img {
        width: 34px;
        height: 34px;
        object-fit: contain;
        image-rendering: auto;
    }
    .ranking-card-name {
        min-width: 0;
        overflow: hidden;
        color: #2f2f2f;
        font-size: 12px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ranking-card-score {
        color: #b16d00;
        font-size: 12px;
        font-weight: 900;
        white-space: nowrap;
    }
    .ranking-card-score-with-crown {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
    }
    .ranking-line-back {
        min-width: 46px;
        width: 46px;
        height: 42px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .ranking-grid-icon {
        width: 18px;
        height: 18px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
    }
    .ranking-grid-icon span {
        display: block;
        border-radius: 3px;
        background: currentColor;
    }
    .info-switch-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        max-width: 760px;
        margin: 2px auto 12px;
    }
    .info-switch-grid {
        display: grid;
        grid-column: 2;
        grid-template-columns: repeat(3, 112px);
        justify-content: center;
        gap: 10px;
        min-width: 0;
        margin: 0;
    }
    .info-mode-description {
        max-width: 720px;
        margin: 0 auto 14px;
        padding: 12px 16px;
        color: #4a4a4a;
        text-align: center;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.55;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(0, 0, 0, 0.07);
        border-radius: 14px;
        box-shadow: 0 8px 18px rgba(25, 25, 25, 0.05);
    }
    .info-switch-home {
        grid-column: 3;
        justify-self: end;
        min-width: 88px;
        min-height: 40px;
        margin: 0;
    }
    .info-switch-card {
        min-height: 42px;
        padding: 9px 14px;
        color: #252525;
        font-size: 13px;
        font-weight: 900;
        background: rgba(255, 255, 255, 0.86);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 12px;
        box-shadow: 0 8px 18px rgba(25, 25, 25, 0.06);
        cursor: pointer;
        white-space: nowrap;
    }
    .info-switch-card:hover {
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 10px 22px rgba(25, 25, 25, 0.08);
    }
    .info-switch-card.is-active {
        color: #fff;
        border-color: transparent;
        box-shadow: 0 10px 22px rgba(25, 25, 25, 0.12);
    }
    #info-tab-news.is-active {
        background: #28a957;
    }
    #info-tab-ranking.is-active {
        background: #2288f1;
    }
    #info-tab-tmi.is-active {
        background: #8652d9;
    }
    .info-placeholder-card {
        max-width: 560px;
        margin: 26px auto 0;
        padding: 44px 20px;
        color: #333;
        text-align: center;
        font-size: 20px;
        font-weight: 900;
        background: rgba(255,255,255,0.82);
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 18px;
        box-shadow: 0 14px 32px rgba(25,25,25,0.08);
    }
    .ranking-grid-mode .ranking-mode-head {
        justify-content: flex-end;
    }
    .ranking-grid-mode .ranking-mode-head h3 {
        display: none;
    }
    .ranking-grid-mode .ranking-mode-head {
        display: none;
    }
    #ranking-section .meta,
    #ranking-section .extra,
    #ranking-section .list-extra-line,
    #ranking-section .item-name {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .search-results-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 30px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f0f0f0;
    }
    .search-results-head h3 {
        margin: 0;
        flex: 0 0 auto;
    }
    .search-filter-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }
    .search-filter-box {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 148px;
    }
    .search-filter-label {
        color: #7a6d5f;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }
    .search-filter-select {
        padding: 9px 34px 9px 12px;
        color: #5e5449;
        font-size: 12px;
        font-weight: 700;
        background: rgba(255, 255, 255, 0.88);
        border: 1px solid rgba(204, 194, 180, 0.9);
        border-radius: 14px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        appearance: none;
        -webkit-appearance: none;
        background-image:
            linear-gradient(45deg, transparent 50%, #9a8e80 50%),
            linear-gradient(135deg, #9a8e80 50%, transparent 50%);
        background-position:
            calc(100% - 18px) calc(50% - 2px),
            calc(100% - 12px) calc(50% - 2px);
        background-size: 6px 6px, 6px 6px;
        background-repeat: no-repeat;
    }
    .search-filter-select:focus {
        outline: none;
        border-color: #b8ab99;
        box-shadow: 0 0 0 3px rgba(184, 171, 153, 0.18);
    }
    .search-dial-btn {
        align-self: end;
        min-width: 132px;
        padding: 9px 12px;
        color: #6a5b4f;
        font-size: 12px;
        font-weight: 700;
        font-family: inherit;
        background: rgba(255, 255, 255, 0.88);
        border: 1px solid rgba(204, 194, 180, 0.9);
        border-radius: 14px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        cursor: pointer;
        transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }
    .search-dial-btn:hover {
        transform: translateY(-1px);
        border-color: #b8ab99;
    }
    .search-dial-btn.is-active {
        color: #fff;
        background: linear-gradient(135deg, #4b2f23, #8c5b39);
        border-color: transparent;
        box-shadow: 0 8px 16px rgba(90, 58, 38, 0.2);
    }
    .list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        margin-top: 10px;
        padding: 15px;
        border: 1px solid #f0f0f0;
        border-radius: 10px;
        transition: background 0.2s;
    }
    .list-item:hover {
        background: #fafafa;
    }
    .list-main {
        display: flex;
        align-items: center;
        gap: 15px;
        min-width: 0;
        flex: 1 1 auto;
    }
    .item-img-button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        cursor: pointer;
    }
    .list-copy {
        min-width: 0;
        flex: 1 1 auto;
    }
    .list-head {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .item-name {
        min-width: 0;
        color: #222;
        font-weight: 700;
        word-break: keep-all;
    }
    .item-title-row {
        display: flex;
        align-items: center;
        gap: 2px;
        min-width: 0;
        flex-wrap: wrap;
    }
    .awards-crowns {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 2px;
        flex: 0 0 auto;
        padding: 0;
        border: 0;
        background: transparent;
        font: inherit;
        cursor: pointer;
    }
    .awards-crown {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        object-fit: contain;
        flex: 0 0 auto;
    }
    .awards-crown-history {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 7px);
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 7px 8px;
        border: 1px solid rgba(92, 72, 54, 0.2);
        border-radius: 8px;
        background: rgba(255, 252, 247, 0.98);
        box-shadow: 0 8px 20px rgba(65, 45, 30, 0.2);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, 4px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
        white-space: nowrap;
    }
    .awards-crown-history .awards-crown {
        width: 18px;
        height: 18px;
    }
    .awards-crowns:hover .awards-crown-history,
    .awards-crowns:focus-visible .awards-crown-history,
    .awards-crowns.is-open .awards-crown-history {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
    .item-img-button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        border-radius: 10px;
        cursor: pointer;
    }
    .item-img-button:focus-visible {
        outline: 3px solid rgba(126, 82, 255, 0.36);
        outline-offset: 3px;
    }
    .bw-crown-overlay {
        position: absolute;
        left: -8px;
        top: -8px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .bw-crown-overlay .awards-crown {
        width: 24px;
        height: 24px;
    }
    .item-img.is-bw-switchable {
        cursor: pointer;
        touch-action: manipulation;
    }
    .item-img-button.is-bw-switchable {
        cursor: pointer;
        touch-action: manipulation;
    }
    .item-img {
        width: 60px;
        height: 60px;
        background: #f9f9f9;
        border: 1px solid #eee;
        border-radius: 10px;
        object-fit: contain;
    }
    .badge {
        margin-right: 4px;
        padding: 3px 8px;
        color: white;
        font-size: 9px;
        vertical-align: middle;
        background: #007bff;
        border-radius: 5px;
    }
    .badge-flip {
        display: inline-block;
        margin-right: 8px;
        vertical-align: middle;
        perspective: 900px;
        flex: 0 0 auto;
    }
    .badge-flip.is-boutique {
        cursor: pointer;
    }
    .badge-flip-inner {
        position: relative;
        min-width: 94px;
        min-height: 28px;
        transform-style: preserve-3d;
        transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .badge-flip.is-flipped .badge-flip-inner {
        transform: rotateY(180deg);
    }
    .badge-face {
        position: absolute;
        inset: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-radius: 8px;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    .badge-face .badge {
        margin-right: 0;
        white-space: nowrap;
    }
    .badge-face-back {
        gap: 5px;
        padding: 4px 8px;
        color: #6e5530;
        font-size: 9px;
        font-weight: 700;
        background: linear-gradient(135deg, rgba(255, 248, 228, 0.98), rgba(245, 226, 184, 0.96));
        border: 1px solid rgba(209, 170, 92, 0.72);
        box-shadow: 0 6px 14px rgba(173, 133, 58, 0.18);
        transform: rotateY(180deg);
        white-space: nowrap;
    }
    .badge-face-back.no-stamp {
        min-width: 94px;
    }
    .badge-face-back img {
        width: 14px;
        height: 18px;
        object-fit: contain;
        flex: 0 0 auto;
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
    }
    .boutique-stamp-copy {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.05;
    }
    .boutique-stamp-copy strong {
        font-size: 9px;
    }
    .boutique-stamp-copy span {
        color: #8e7246;
        font-size: 9px;
        font-weight: 600;
    }
    .meta {
        margin-top: 2px;
        color: #666;
        font-size: 11px;
    }
    .extra {
        margin-top: 6px;
        color: #999;
        font-size: 11px;
    }
    .list-extra-line {
        display: block;
    }
    .list-stamp {
        position: relative;
        width: 88px;
        flex: 0 0 88px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .list-stamp.is-boutique {
        cursor: pointer;
        perspective: 1100px;
        min-width: 96px;
        padding: 6px;
        margin: -6px;
        border-radius: 16px;
        touch-action: manipulation;
    }
    .list-stamp-flip {
        position: relative;
        width: 72px;
        height: 72px;
        transform-style: preserve-3d;
        transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .list-stamp.is-flipped .list-stamp-flip {
        transform: rotateY(180deg);
    }
    .list-stamp-face {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    .list-stamp-face-back {
        transform: rotateY(180deg);
    }
    .list-stamp-face-back img {
        width: 72px;
        height: 72px;
        object-fit: contain;
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.12));
    }
    .list-stamp img {
        width: 72px;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.12));
    }
    .list-stamp-text {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        color: #fff;
        font-size: 22px;
        font-weight: 900;
        letter-spacing: 0.08em;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, #666b72, #2f3339 62%, #1c1f24);
        box-shadow: inset 0 0 0 3px rgba(255,255,255,0.1), 0 10px 18px rgba(0, 0, 0, 0.16);
    }
    .stamp-tooltip {
        position: absolute;
        right: calc(100% + 10px);
        top: 50%;
        min-width: 160px;
        max-width: 220px;
        padding: 8px 10px;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.45;
        background: rgba(58, 47, 40, 0.96);
        border-radius: 10px;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%) translateX(6px);
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 20;
    }
    .stamp-tooltip::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        width: 10px;
        height: 10px;
        background: rgba(58, 47, 40, 0.96);
        transform: translate(-55%, -50%) rotate(45deg);
    }
    .list-stamp:hover .stamp-tooltip,
    .list-stamp:focus-within .stamp-tooltip {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
    .list-stamp.touch-tooltip-active .stamp-tooltip {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
    #quiz-container {
        display: none;
        padding: 20px;
        text-align: center;
        background: #fcfcfc;
        border: 2px solid #f0f0f0;
        border-radius: 15px;
    }
    .quiz-top-ctrl {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 5px;
    }
    .time-quiz-field { position: relative; isolation: isolate; }
    .time-quiz-content { transition: filter 0.18s ease; }
    .time-quiz-field.is-game-over .time-quiz-content { filter: blur(5px); pointer-events: none; }
    .time-quiz-game-over {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 20px;
        border-radius: 8px;
        background: rgba(12, 17, 25, 0.55);
        color: #fff;
        text-align: center;
    }
    .time-quiz-game-over[hidden] { display: none; }
    .time-quiz-game-over h3 { margin: 0; font-size: 25px; }
    .time-quiz-final-score { color: #ffe19b; font-size: 18px; font-weight: 900; }
    .time-quiz-game-over-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
    .time-quiz-game-over-actions .btn { min-width: 100px; margin: 0; }
    #quiz-score {
        flex: 1 1 auto;
        color: #555;
        font-size: 9px;
        font-weight: 500;
        font-family: 'Pretendard', sans-serif;
    }
    #quiz-score b {
        font-size: 9px;
    }
    #quiz-score span {
        display: block;
        margin-top: 2px;
    }
    .quiz-life-bar {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        padding: 6px 10px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid #ffd4df;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(255, 107, 129, 0.12);
    }
    .quiz-life-label {
        color: #c45a74;
        font-size: 9px;
        font-family: 'Pretendard', sans-serif;
        font-weight: 700;
        white-space: nowrap;
    }
    .quiz-lives {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .quiz-life {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: #ff5f87;
        font-size: 22px;
        line-height: 1;
        text-shadow: 0 3px 8px rgba(255, 95, 135, 0.35);
        transform-origin: center;
        transition: transform 0.2s ease, opacity 0.25s ease, filter 0.25s ease;
    }
    .quiz-life.lost {
        opacity: 0.2;
        filter: grayscale(1);
        text-shadow: none;
        transform: scale(0.88);
    }
    .quiz-life.bursting {
        animation: quiz-life-burst 0.42s ease-out forwards;
    }
    .quiz-flex {
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 38px;
        margin: 30px 0;
    }
    .quiz-card {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        min-height: 200px;
        padding: 25px;
        cursor: pointer;
        background: white;
        border: 2px solid #eee;
        border-radius: 15px;
        transition: all 0.3s;
    }
    .quiz-card:hover {
        border-color: #007bff;
        box-shadow: 0 10px 20px rgba(0, 123, 255, 0.1);
        transform: translateY(-8px);
    }
    .quiz-card img {
        display: block;
        width: 100%;
        max-width: 120px;
        height: 120px;
        margin: 0;
        background-color: #f9f9f9;
        border-radius: 8px;
        object-fit: contain;
    }
    .quiz-card strong {
        color: #222;
        font-size: 16px;
    }
    #quiz-msg {
        min-height: 120px;
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: bold;
        transition: all 0.3s ease;
    }
    .score-board {
        display: inline-block;
        margin-top: 40px;
        padding: 20px;
        color: #555;
        font-size: 16px;
        text-align: center;
        background-color: #f8f9fa;
        border: 1px solid #eee;
        border-radius: 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s ease;
    }
    .timer-wrapper {
        width: 100%;
        height: 10px;
        margin-top: 15px;
        position: relative;
        overflow: hidden;
        background: #eee;
        border-radius: 5px;
    }
    #timer-bar,
    #classic-timer-bar,
    #stamp-quiz-timer-bar {
        width: 100%;
        height: 100%;
        display: block;
        background: linear-gradient(to right, #4caf50, #f4c542 55%, #f44336);
        transition: width 0.1s linear;
        transform-origin: left center;
    }
    #timer-text,
    #stamp-quiz-timer-text {
        margin-top: 5px;
        color: #ff4d4d;
        font-size: 9px;
        font-weight: bold;
    }
    .quiz-status-box {
        position: absolute;
        top: 15px;
        left: 15px;
        display: none;
        flex-direction: column;
        gap: 2px;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.98);
        border: 1.5px solid #007bff;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1001;
        pointer-events: none;
    }
    #quiz-container[style*="display: block"] .quiz-status-box {
        display: flex !important;
    }
    .awards-container {
        max-width: 600px;
        margin: 20px auto;
        padding: 30px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }
    .awards-container,
    .quiz-container,
    #final-result-section {
        position: relative;
        padding-top: 32px;
    }
    .awards-category-grid {
        position: relative;
        z-index: 30;
    }
    .awards-mode-heading { padding-top: 0; }
    .awards-mode-picker {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .awards-mode-toggle {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 258px;
        min-width: 0;
        margin: 0;
        padding: 3px;
        box-sizing: border-box;
        border: 1px solid #8b939f;
        border-radius: 24px;
        background: #e0e4e9;
    }
    .awards-mode-slider {
        position: absolute;
        top: 3px;
        left: 3px;
        bottom: 3px;
        width: calc((100% - 6px) / 3);
        border-radius: 20px;
        background: #007bff;
        transform: translateX(100%);
        transition: transform 180ms ease;
        pointer-events: none;
    }
    .awards-mode-toggle label { position: relative; min-width: 0; cursor: pointer; }
    .awards-mode-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
    .awards-mode-toggle label > span {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        font-size: 11px;
        color: #4f5c6e;
        border-radius: 20px;
    }
    .awards-mode-toggle input:checked + span { color: #fff; }
    .awards-mode-toggle input:focus-visible + span { outline: 2px solid #007bff; outline-offset: 4px; }
    [data-awards-mode="quick"] .awards-mode-slider { transform: translateX(0); }
    [data-awards-mode="league"] .awards-mode-slider { background: #198754; }
    [data-awards-mode="seize"] .awards-mode-slider { transform: translateX(200%); background: #c2188b; }
    .awards-mode-comment {
        min-height: 48px;
        margin: 10px 0 20px;
        text-align: center;
        font-size: 12px;
        line-height: 1.7;
        color: #637084;
        overflow-wrap: anywhere;
    }
    body.theme-dark .awards-mode-toggle { background: #252c36; }
    body.theme-dark .awards-mode-toggle label > span,
    body.theme-dark .awards-mode-comment { color: #c6ced9; }
    body.theme-dark .awards-mode-toggle input:checked + span { color: #fff; }
    @media (prefers-reduced-motion: reduce) {
        .awards-mode-slider { transition: none; }
    }
    .seize-container { position: relative; }
    #seize-title { text-align: center; color: #007bff; margin: 12px 40px 8px; font-size: 24px; }
    #seize-progress { text-align: center; color: #637084; font-size: 13px; margin: 0 0 20px; }
    #seize-subtitle { text-align: center; color: #637084; font-size: 13px; line-height: 1.7; margin: 0 0 8px; }
    .seize-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .seize-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-width: 0;
        min-height: 124px;
        padding: 14px 6px 8px;
        border: 2px solid #c4ced9;
        border-radius: 8px;
        background: #f3f6fa;
        color: #24354b;
        cursor: pointer;
        font: inherit;
    }
    .seize-card img { width: 64px; height: 64px; object-fit: contain; }
    .seize-card-name { width: 100%; font-size: 12px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; margin-top: 8px; }
    .seize-card-check { position: absolute; top: 3px; right: 6px; color: #007bff; opacity: 0; }
    .seize-card[aria-pressed="true"] { border-color: #007bff; background: #e5f1ff; }
    .seize-card[aria-pressed="true"] .seize-card-check { opacity: 1; }
    .seize-card:disabled { cursor: default; }
    .seize-card:focus-visible, .seize-actions button:focus-visible { outline: 2px solid #007bff; outline-offset: 3px; }
    .seize-actions {
        position: sticky;
        bottom: 12px;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 120px;
        align-items: center;
        gap: 8px;
        padding: 10px;
        margin-top: 20px;
        border: 1px solid #c4ced9;
        border-radius: 8px;
        background: #fff;
        z-index: 2;
    }
    .seize-actions button { min-height: 44px; border: 0; border-radius: 4px; background: #007bff; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
    .seize-actions button:disabled { opacity: .45; cursor: default; }
    #seize-previous { font-family: Arial, sans-serif; font-size: 22px; }
    #seize-count { text-align: center; font-size: 12px; }
    body.theme-dark .seize-card { background: #f3f6fa; border-color: #c4ced9; color: #24354b; }
    body.theme-dark .seize-card[aria-pressed="true"] { border-color: #007bff; background: #e5f1ff; }
    body.theme-dark .seize-actions { background: #101722; border-color: #455365; }
    body.theme-dark #seize-progress,
    body.theme-dark #seize-subtitle { color: #c6ced9; }
    @media (max-width: 480px) {
        .seize-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    }
    .api-profile-shell {
        display: grid;
        gap: 18px;
        position: relative;
    }
    .api-profile-home-btn {
        top: 16px;
        right: 16px;
        z-index: 5;
    }
    .api-profile-title {
        margin: 0;
        color: #0f3f69;
        text-align: center;
    }
    .api-profile-copy {
        margin: 0;
        color: #5d6b7d;
        font-size: 12px;
        line-height: 1.7;
        text-align: center;
    }
    .api-profile-searchbar {
        display: grid;
        grid-template-columns: 160px minmax(0, 1fr) 120px;
        gap: 12px;
    }
    .api-profile-searchbar select,
    .api-profile-searchbar input,
    .api-profile-searchbar button {
        min-height: 46px;
        box-sizing: border-box;
        border-radius: 12px;
    }
    .api-profile-searchbar select,
    .api-profile-searchbar input {
        padding: 0 14px;
        font-size: 14px;
        border: 1px solid rgba(28, 70, 108, 0.16);
        background: rgba(255, 255, 255, 0.92);
    }
    .api-profile-searchbar button {
        color: #fff;
        font-weight: 700;
        cursor: pointer;
        background: linear-gradient(135deg, #1d5587, #2f87d7);
        border: none;
        box-shadow: 0 10px 24px rgba(47, 135, 215, 0.24);
    }
    .api-profile-status {
        min-height: 20px;
        color: #546274;
        font-size: 12px;
        text-align: center;
    }
    .api-profile-status.is-error {
        color: #bf4a4a;
    }
    .api-profile-status.is-success {
        color: #286c4b;
    }
    .api-profile-summary {
        display: grid;
        gap: 18px;
    }
    .api-profile-main-card {
        display: grid;
        grid-template-columns: 196px minmax(0, 1fr);
        gap: 20px;
        align-items: center;
        padding: 22px;
        border: 1px solid rgba(20, 52, 82, 0.1);
        border-radius: 18px;
        background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(241,247,255,0.88));
    }
    .api-profile-image-frame {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 300px;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(23, 47, 74, 0.9), rgba(46, 82, 120, 0.92));
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
        overflow: hidden;
    }
    .api-profile-image-frame img {
        max-width: 180%;
        max-height: 280px;
        object-fit: contain;
    }
    .api-profile-image-frame img.is-fitted,
    .api-appearance-thumb img.is-fitted {
        position: absolute;
        max-width: none;
        max-height: none;
        object-fit: fill;
    }
    .api-profile-image-placeholder {
        padding: 0 18px;
        color: rgba(233, 242, 255, 0.82);
        font-size: 12px;
        line-height: 1.7;
        text-align: center;
    }
    .api-profile-meta {
        display: grid;
        gap: 8px;
    }
    .api-profile-name {
        color: #17314d;
        font-size: 26px;
    }
    .api-profile-zero-switch {
        display: none;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: -2px;
    }
    .api-profile-zero-switch.is-visible {
        display: flex;
    }
    .api-profile-zero-switch-label {
        color: #627488;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }
    .api-profile-zero-switch-btn {
        min-width: 54px;
        padding: 8px 14px;
        color: #315170;
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
        background: rgba(226, 235, 245, 0.92);
        border: 1px solid rgba(38, 73, 108, 0.14);
        border-radius: 999px;
        transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }
    .api-profile-zero-switch-btn.is-active {
        color: #fff;
        background: linear-gradient(135deg, #1d5587, #2f87d7);
        border-color: rgba(29, 85, 135, 0.45);
    }
    .api-profile-meta-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .api-profile-meta-item {
        padding: 12px 14px;
        border: 1px solid rgba(27, 62, 95, 0.08);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.8);
    }
    .api-profile-meta-label {
        margin-bottom: 6px;
        color: #718196;
        font-size: 10px;
    }
    .api-profile-meta-value {
        color: #203247;
        font-size: 13px;
        line-height: 1.45;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .api-appearance-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .api-appearance-card {
        display: grid;
        gap: 12px;
        padding: 20px 18px;
        border: 1px solid rgba(26, 59, 91, 0.08);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.84);
        text-align: center;
    }
    .api-appearance-card h4 {
        margin: 0;
        color: #17314d;
        font-size: 16px;
    }
    .api-appearance-thumb {
        --appearance-theme-color: transparent;
        --appearance-panel-start: rgba(243, 247, 252, 0.72);
        --appearance-panel-end: rgba(231, 238, 247, 0.68);
        --appearance-base-color: #dbe8f7;
        --appearance-mix-color: var(--appearance-base-color);
        --appearance-mix-rate: 0%;
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        min-height: 172px;
        padding: 10px;
        border: 6px solid transparent;
        border-radius: 16px;
        background: linear-gradient(180deg, var(--appearance-panel-start), var(--appearance-panel-end));
        box-shadow: inset 0 0 24px rgba(255,255,255,0.48), 0 8px 20px rgba(30, 58, 90, 0.08);
        overflow: hidden;
    }
    .api-appearance-thumb:not(.has-color-data) {
        border-color: transparent;
        background: linear-gradient(180deg, var(--appearance-panel-start), var(--appearance-panel-end));
    }
    .api-appearance-thumb.has-color-data::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        padding: 6px;
        border-radius: inherit;
        background: conic-gradient(var(--appearance-mix-color) 0 var(--appearance-mix-rate), var(--appearance-base-color) var(--appearance-mix-rate) 100%);
        pointer-events: none;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
    }
    .api-profile-searchbar button.is-keyboard-pressed {
        transform: translateY(1px) scale(0.98);
        filter: brightness(0.92);
    }
    .api-appearance-thumb.has-theme-color::after {
        content: '';
        position: absolute;
        top: 10px;
        right: 10px;
        width: 18px;
        height: 18px;
        border: 2px solid rgba(255,255,255,0.92);
        border-radius: 50%;
        background: var(--appearance-theme-color);
        z-index: 3;
    }
    .api-appearance-thumb img {
        position: relative;
        z-index: 2;
        max-width: 100%;
        max-height: 152px;
        object-fit: contain;
    }
    .api-appearance-thumb span {
        position: relative;
        z-index: 2;
        color: #728095;
        font-size: 12px;
        line-height: 1.6;
    }
    .api-appearance-name {
        color: #1c2f42;
        font-size: 15px;
        line-height: 1.5;
    }
    .api-appearance-note {
        color: #74859b;
        font-size: 11px;
        line-height: 1.6;
    }
    .api-appearance-color-ratio {
        display: none;
        width: fit-content;
        margin: 0;
        padding: 5px 9px;
        border: 1px solid rgba(31, 74, 112, 0.12);
        border-radius: 999px;
        color: #526b86;
        font-size: 10px;
        font-weight: 800;
        background: rgba(241, 247, 253, 0.9);
    }
    .api-appearance-thumb .api-appearance-color-ratio {
        position: absolute;
        bottom: 8px;
        left: 50%;
        z-index: 3;
        transform: translateX(-50%);
        white-space: nowrap;
    }
    .api-appearance-color-ratio.is-visible {
        display: block;
    }
    .api-appearance-actions {
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .api-appearance-actions button {
        min-width: 126px;
        padding: 10px 14px;
        color: #17314d;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        background: rgba(227, 238, 250, 0.95);
        border: 1px solid rgba(31, 92, 145, 0.14);
        border-radius: 999px;
    }
    .api-profile-actions {
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .api-profile-actions button {
        min-width: 164px;
        padding: 12px 18px;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        background: linear-gradient(135deg, #244b72, #367bc0);
        border: none;
        border-radius: 999px;
    }
    .boardgame-page-shell {
        position: relative;
        overflow: visible;
    }
    .boardgame-select-head {
        margin-bottom: 24px;
        text-align: center;
    }
    .boardgame-random-banner-wrap {
        position: relative;
        display: block;
        width: min(100%, 620px);
        margin: 10px auto 0;
    }
    .boardgame-random-banner {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 2804 / 561;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
        border: 1px solid rgba(180, 208, 255, 0.38);
        border-radius: 6px;
        background: #080d19;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 0 18px rgba(90, 148, 255, 0.12);
        cursor: pointer;
        transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }
    .boardgame-random-banner:hover,
    .boardgame-random-banner:focus-visible {
        border-color: rgba(225, 237, 255, 0.78);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34), 0 0 22px rgba(105, 164, 255, 0.26);
        transform: translateY(-1px);
        outline: none;
    }
    .boardgame-random-banner img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .boardgame-random-banner.is-changing img {
        animation: boardgameRandomBannerIn 180ms ease both;
    }
    .boardgame-random-banner-refresh {
        position: absolute;
        z-index: 3;
        top: 7px;
        right: 7px;
        display: inline-flex;
        width: 30px;
        height: 30px;
        padding: 0;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(225, 237, 255, 0.64);
        border-radius: 50%;
        background: rgba(4, 9, 20, 0.82);
        color: #f4f8ff;
        font-size: 18px;
        font-weight: 900;
        line-height: 1;
        text-shadow: 0 0 8px rgba(142, 191, 255, 0.82);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38), 0 0 12px rgba(94, 153, 255, 0.24);
        cursor: pointer;
        transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
    }
    .boardgame-random-banner-refresh:hover,
    .boardgame-random-banner-refresh:focus-visible {
        border-color: #ffffff;
        background: rgba(25, 54, 98, 0.94);
        transform: rotate(22deg) scale(1.05);
        outline: none;
    }
    @keyframes boardgameRandomBannerIn {
        from { opacity: 0; transform: scale(1.015); filter: brightness(1.3); }
        to { opacity: 1; transform: scale(1); filter: brightness(1); }
    }
    @media (max-width: 640px) {
        .boardgame-random-banner-refresh {
            top: 5px;
            right: 5px;
            width: 24px;
            height: 24px;
            font-size: 15px;
        }
    }
    .boardgame-page-shell.is-hidden {
        display: none;
    }
    .boardgame-page-arrow {
        position: absolute;
        top: 50%;
        z-index: 5;
        width: 42px;
        height: 58px;
        border: 1px solid rgba(125, 185, 255, 0.28);
        border-radius: 999px;
        background: rgba(14, 20, 32, 0.82);
        color: #f8efe1;
        font-size: 28px;
        font-weight: 900;
        line-height: 1;
        cursor: pointer;
        transform: translateY(-50%);
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.26);
        transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    }
    .boardgame-page-arrow:hover {
        border-color: rgba(255, 88, 168, 0.54);
        background: rgba(26, 24, 34, 0.94);
        transform: translateY(-50%) scale(1.04);
    }
    .boardgame-page-arrow.is-next { right: -76px; }
    .boardgame-page-arrow.is-prev { left: -76px; }
    .boardgame-page-indicator {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 18px auto 0;
        color: #d8cbd4;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.04em;
    }
    .boardgame-page-indicator [data-pagination-dots] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .boardgame-page-indicator [data-pagination-dot] {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: rgba(255, 89, 169, 0.28);
        box-shadow: 0 0 8px rgba(255, 89, 169, 0.18);
    }
    .boardgame-page-indicator [data-pagination-dot].is-active {
        background: #ff62ad;
        box-shadow: 0 0 12px rgba(255, 98, 173, 0.58);
    }
    .boardgame-mode-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch;
    }
    #boardgame-mode-page-2 .boardgame-mode-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        gap: 12px;
    }
    #boardgame-mode-page-2 {
        min-height: clamp(420px, 62vw, 560px);
        padding-bottom: clamp(130px, 14vw, 190px);
        box-sizing: border-box;
    }
    #boardgame-mode-page-2 .category-card {
        width: auto;
        max-width: none;
        flex: initial;
    }
    .boardgame-mode-grid .category-card {
        min-height: 0;
        aspect-ratio: 1 / 1.22;
        padding: clamp(10px, 2vw, 18px) clamp(6px, 1.4vw, 12px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .boardgame-mode-grid .category-card .icon-img-wrapper {
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .boardgame-mode-grid .boardgame-mode-card-classic,
    .boardgame-mode-grid .boardgame-mode-card-joker,
    .boardgame-mode-grid .boardgame-mode-card-baseball,
    .boardgame-mode-grid .boardgame-mode-card-kaprekar,
    .boardgame-mode-grid .boardgame-mode-card-quinter9,
    .boardgame-mode-grid .boardgame-mode-card-blossom,
    .boardgame-mode-grid .boardgame-mode-card-stella,
    .boardgame-mode-grid .boardgame-mode-card-equinox,
    .boardgame-mode-grid .boardgame-mode-card-overheat,
    .boardgame-mode-grid .boardgame-mode-card-survival,
    .boardgame-mode-grid .boardgame-mode-card-ritual,
    .boardgame-mode-grid .boardgame-mode-card-arena {
        border-width: 5px;
    }
    .boardgame-mode-grid .boardgame-mode-card-classic {
        background: rgba(255, 240, 207, 0.92);
        border-color: #5b371e;
    }
    .boardgame-mode-grid .boardgame-mode-card-classic:hover {
        border-color: #6e4528;
        box-shadow: 0 8px 18px rgba(91, 58, 33, 0.12);
    }
    .boardgame-mode-grid .boardgame-mode-card-classic .icon-img-wrapper {
        width: 64px;
        height: 64px;
        min-height: 64px;
        margin-bottom: 10px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .boardgame-mode-grid .boardgame-mode-card-classic .category-icon-img {
        width: 64px;
        height: 64px;
        object-fit: contain;
    }
    .boardgame-mode-grid .boardgame-mode-card-classic .name {
        color: #5b371e;
    }
    .classic-branch-overlay {
        position: fixed;
        inset: 0;
        z-index: 24500;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: clamp(220px, 43vh, 380px) 14px 18px;
        background: rgba(6, 8, 12, 0.72);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    .classic-branch-panel {
        width: min(94vw, 560px);
        padding: 18px;
        border: 1px solid rgba(198, 159, 104, 0.42);
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(31, 27, 22, 0.98), rgba(15, 14, 12, 0.98));
        box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42);
        animation: centerPop 0.34s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .classic-branch-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 12px;
        color: #f7dfb8;
        font-weight: 900;
        letter-spacing: 0.03em;
    }
    .classic-branch-title {
        font-size: 17px;
    }
    .classic-branch-close {
        width: 32px;
        height: 32px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: #fff5df;
        font-size: 19px;
        font-weight: 900;
        cursor: pointer;
    }
    .classic-branch-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
    .classic-branch-card {
        aspect-ratio: 0.78;
        min-height: 0;
        padding: 14px 8px 12px;
        border: 2px solid rgba(198, 159, 104, 0.55);
        border-radius: 14px;
        background: rgba(255, 240, 207, 0.95);
        color: #5b371e;
        font-family: inherit;
        font-weight: 900;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }
    .classic-branch-card:hover {
        transform: translateY(-3px);
        border-color: #e3b96f;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
    }
    .classic-branch-card img {
        flex: 0 0 auto;
        width: 66px;
        height: 66px;
        object-fit: contain;
    }
    .classic-branch-card.is-relic {
        background: linear-gradient(180deg, rgba(42, 47, 29, 0.96), rgba(19, 22, 14, 0.98));
        border-color: rgba(165, 178, 101, 0.8);
        color: #e9f0bf;
    }
    .classic-branch-card.is-relic img {
        width: 74px;
        height: 74px;
    }
    .classic-branch-card.is-mandala {
        background: linear-gradient(180deg, rgba(14, 25, 48, 0.96), rgba(7, 10, 22, 0.98));
        border-color: rgba(95, 159, 255, 0.76);
        color: #dceaff;
    }
    .classic-branch-card.is-mandala img {
        width: 74px;
        height: 74px;
        filter: drop-shadow(0 0 14px rgba(82, 154, 255, 0.48));
    }
    .classic-branch-card.is-error {
        background: linear-gradient(180deg, rgba(33, 6, 11, 0.97), rgba(9, 2, 4, 0.99));
        border-color: rgba(255, 49, 74, 0.78);
        color: #ffdce1;
        box-shadow: inset 0 0 18px rgba(255, 35, 58, 0.16), 0 0 16px rgba(255, 35, 58, 0.14);
    }
    .classic-branch-card.is-error:hover {
        border-color: rgba(255, 112, 128, 0.92);
        box-shadow: inset 0 0 22px rgba(255, 35, 58, 0.2), 0 0 22px rgba(255, 35, 58, 0.26);
    }
    .classic-branch-card.is-error img {
        width: 74px;
        height: 74px;
        filter: drop-shadow(0 0 14px rgba(255, 42, 64, 0.72));
    }
    .classic-branch-name {
        display: block;
        font-size: 16px;
        line-height: 1.15;
    }
    .classic-branch-text {
        min-width: 0;
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        text-align: center;
    }
    .classic-branch-copy {
        display: block;
        min-height: 0;
        color: currentColor;
        opacity: 0.78;
        font-size: 10px;
        line-height: 1.45;
    }
    .classic-branch-card.is-error-corrupted {
        border-color: rgba(255, 45, 66, 0.92);
        background: #120608;
        color: #ffbec4;
        box-shadow: inset 0 0 0 1px rgba(255, 63, 82, 0.24), 0 0 18px rgba(255, 22, 48, 0.34);
        animation: error-card-corrupt 0.24s steps(2, end) 2;
    }
    .classic-branch-card.is-error-corrupted img {
        filter: grayscale(0.5) contrast(1.45) saturate(1.7) sepia(0.24) hue-rotate(310deg) drop-shadow(4px 0 0 rgba(255, 0, 34, 0.52));
    }
    .classic-branch-card.is-error-corrupted .classic-branch-name,
    .classic-branch-card.is-error-corrupted .classic-branch-copy {
        font-family: Consolas, "Courier New", monospace;
        color: #ff596b;
        letter-spacing: 0;
        text-shadow: -2px 0 rgba(255, 255, 255, 0.28), 2px 0 rgba(128, 0, 20, 0.8);
    }
    @keyframes error-card-corrupt {
        0%, 100% { transform: translate(0); }
        33% { transform: translate(-3px, 1px); }
        66% { transform: translate(3px, -1px); }
    }
    .error-access-overlay {
        position: fixed;
        inset: 0;
        z-index: 12000;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        box-sizing: border-box;
        place-items: center;
        padding: 20px;
        background: rgba(3, 0, 1, 0.9);
        opacity: 0;
        animation: error-access-in 0.22s ease-out forwards;
    }
    .error-access-overlay.is-leaving {
        animation: error-access-out 0.4s ease-in forwards;
    }
    .error-access-panel {
        position: relative;
        box-sizing: border-box;
        width: min(520px, 100%);
        min-width: 0;
        padding: 38px 24px 32px;
        overflow: hidden;
        border: 1px solid #ff334d;
        border-radius: 4px;
        background: #090305;
        color: #ffccd1;
        text-align: center;
        box-shadow: 0 0 16px rgba(255, 30, 56, 0.78), inset 0 0 28px rgba(255, 20, 48, 0.14);
    }
    .error-access-panel::before,
    .error-access-panel::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background: #ff3049;
        box-shadow: 0 0 12px #ff1739;
    }
    .error-access-panel::before { top: 10px; }
    .error-access-panel::after { bottom: 10px; }
    .error-access-kicker,
    .error-access-code {
        display: block;
        font: 700 11px/1.5 Consolas, "Courier New", monospace;
        color: #b94856;
    }
    .error-access-title {
        display: block;
        margin: 8px 0;
        font: 900 clamp(34px, 8vw, 62px)/1 Consolas, "Courier New", monospace;
        color: #fff4f5;
        letter-spacing: 0;
        text-shadow: 0 0 8px #fff, 0 0 18px #ff2444, 3px 0 #740014;
    }
    @keyframes error-access-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes error-access-out {
        from { opacity: 1; }
        to { opacity: 0; }
    }
    #boardgame-error-section {
        --boardgame-guide-accent: #ff4059;
        --boardgame-guide-accent-strong: #ffd2d7;
        --boardgame-guide-active-text: #210307;
        --boardgame-guide-tab-bg: #13070a;
        --boardgame-guide-tab-border: rgba(255, 64, 89, 0.46);
        --boardgame-guide-active-bg: #ff5369;
        --boardgame-guide-card-bg: #100609;
        --boardgame-guide-shadow: rgba(255, 30, 58, 0.3);
    }
    .error-mode-shell {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 63, 86, 0.45);
        background: #080507;
        color: #f7e8ea;
        box-shadow: 0 0 22px rgba(255, 25, 54, 0.16);
    }
    .error-mode-shell::before {
        content: 'SYSTEM://CLASSIC/ERROR/UNKNOWN';
        position: absolute;
        top: 12px;
        left: 14px;
        color: rgba(255, 70, 91, 0.42);
        font: 700 9px/1 Consolas, "Courier New", monospace;
        pointer-events: none;
    }
    .error-mode-head {
        padding: 34px 18px 12px;
        text-align: center;
    }
    .item-img-button.is-search-image:not(.is-bw-switchable) {
        cursor: default;
    }
    .error-mode-shell .error-mode-head {
        padding-top: 48px;
    }
    #error-intro-music-control {
        position: absolute;
        top: 28px;
        right: 14px;
    }
    .error-mode-head h2 {
        margin: 0;
        color: #fff1f3;
        font-family: Consolas, "Courier New", monospace;
        font-size: clamp(27px, 5vw, 42px);
        letter-spacing: 0;
        text-shadow: 0 0 12px rgba(255, 39, 68, 0.76);
    }
    .error-mode-head p {
        margin: 8px auto 0;
        color: #b98c92;
        font: 700 12px/1.7 Consolas, "Courier New", monospace;
    }
    .error-start-grid {
        display: grid;
        place-items: center;
        margin: 10px 0 22px;
    }
    .error-start-card {
        position: relative;
        display: grid;
        width: min(230px, 72vw);
        min-height: 220px;
        place-items: center;
        gap: 7px;
        padding: 18px;
        border: 1px solid rgba(255, 65, 88, 0.52);
        border-radius: 6px;
        background: #100609;
        color: #ffbdc5;
        cursor: not-allowed;
        opacity: 0.86;
        box-shadow: inset 0 0 22px rgba(255, 22, 50, 0.11), 0 0 18px rgba(255, 22, 50, 0.12);
    }
    .error-start-card img {
        display: block;
        width: 150px;
        height: 150px;
        object-fit: contain;
        filter: drop-shadow(0 0 12px rgba(255, 43, 67, 0.52));
    }
    .error-start-card strong {
        font: 900 18px/1 Consolas, "Courier New", monospace;
    }
    .error-start-card span {
        color: #a75f69;
        font: 700 10px/1.4 Consolas, "Courier New", monospace;
    }
    .error-howto-card {
        margin-top: 14px;
        padding: 20px;
        border: 1px solid rgba(255, 65, 88, 0.3);
        border-radius: 6px;
        background: #100609;
        color: #ecdadd;
        box-shadow: 0 0 18px rgba(255, 30, 58, 0.09);
    }
    .error-howto-card > strong {
        display: block;
        color: #ff6b7e;
        font: 900 19px/1.2 Consolas, "Courier New", monospace;
        text-align: center;
    }
    .error-howto-lead {
        margin: 14px 0;
        color: #caaeb2;
        font-size: 12px;
        line-height: 1.75;
        text-align: center;
    }
    .error-howto-section {
        margin-top: 12px;
        padding: 14px;
        border-left: 2px solid #d92f47;
        background: rgba(255, 255, 255, 0.018);
    }
    .error-howto-section h3 {
        margin: 0 0 8px;
        color: #ff8795;
        font: 900 13px/1.3 Consolas, "Courier New", monospace;
    }
    .error-howto-section ul {
        margin: 0;
        padding-left: 18px;
    }
    .error-howto-section li {
        margin: 5px 0;
        color: #d4bdc0;
        font-size: 11px;
        line-height: 1.65;
    }
    .error-development-tool-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 10px;
    }
    .error-development-tool-item {
        min-height: 76px;
        padding: 11px;
        border: 1px solid rgba(255, 72, 94, 0.24);
        border-radius: 4px;
        background: #0a0507;
    }
    .error-development-tool-item strong {
        display: block;
        margin-bottom: 5px;
        color: #ff5b70;
        font: 900 12px/1 Consolas, "Courier New", monospace;
    }
    .error-development-tool-item span {
        color: #bfa8ac;
        font-size: 10px;
        line-height: 1.55;
    }
    .error-video-pending {
        display: grid;
        min-height: 160px;
        place-items: center;
        color: #a95c67;
        font: 700 12px/1.6 Consolas, "Courier New", monospace;
        text-align: center;
    }
    .error-story-card {
        padding: 10px;
        overflow: hidden;
    }
    .error-story-image {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 4px;
        box-shadow: 0 0 18px rgba(255, 36, 62, 0.14);
    }
    .error-start-card:not(:disabled) {
        cursor: pointer;
        opacity: 1;
    }
    .error-start-card:not(:disabled):hover {
        transform: translateY(-2px);
        border-color: rgba(255, 112, 128, 0.78);
        box-shadow: inset 0 0 26px rgba(255, 22, 50, 0.16), 0 0 24px rgba(255, 22, 50, 0.22);
    }
    #boardgame-error-play-section {
        width: 100%;
        margin-left: 0;
        transform: none;
    }
    .error-game-shell {
        position: relative;
        overflow: hidden;
        padding: 18px;
        border: 1px solid rgba(255, 63, 86, 0.5);
        border-radius: 8px;
        background: #050204;
        color: #f7e8ea;
        box-shadow: 0 0 26px rgba(255, 25, 54, 0.18);
    }
    .error-game-header {
        display: grid;
        grid-template-columns: minmax(82px, 1fr) auto minmax(82px, 1fr);
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }
    .error-game-pill {
        display: inline-flex;
        width: fit-content;
        min-height: 38px;
        align-items: center;
        justify-content: center;
        padding: 7px 14px;
        border: 1px solid rgba(255, 86, 105, 0.42);
        border-radius: 999px;
        background: rgba(10, 5, 7, 0.92);
        color: #ffdce1;
        font: 900 13px/1 Consolas, "Courier New", monospace;
        text-shadow: 0 0 10px rgba(255, 47, 70, 0.62);
    }
    .error-stage-label {
        justify-self: start;
    }
    .error-time-label {
        justify-self: end;
    }
    .error-game-title {
        margin: 0;
        color: #fff3f5;
        font-family: Consolas, "Courier New", monospace;
        font-size: clamp(24px, 4vw, 36px);
        letter-spacing: 0;
        text-align: center;
        text-shadow: 0 0 14px rgba(255, 39, 68, 0.82);
    }
    .error-time-track {
        grid-column: 1 / -1;
        height: 8px;
        overflow: hidden;
        border: 1px solid rgba(255, 88, 108, 0.52);
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.62);
    }
    .error-time-fill {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #ff2845, #ffffff);
        box-shadow: 0 0 12px rgba(255, 55, 78, 0.72);
        transition: width 90ms linear;
    }
    .error-field {
        position: relative;
        display: block;
        aspect-ratio: 1672 / 941;
        min-height: 0;
        padding: 0;
        border: 1px solid rgba(255, 58, 82, 0.34);
        border-radius: 8px;
        background: #050204 url("boardgame/error/error background.webp") center / contain no-repeat;
        box-shadow: inset 0 0 42px rgba(255, 25, 54, 0.18);
    }
    .error-field::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 56%, rgba(255, 20, 46, 0.1), rgba(0, 0, 0, 0.32) 58%, rgba(0, 0, 0, 0.64));
        pointer-events: none;
    }
    .error-field-kind-label {
        position: absolute;
        top: 12px;
        left: 50%;
        z-index: 5;
        min-width: 72px;
        padding: 5px 12px;
        transform: translateX(-50%);
        border: 1px solid rgba(255, 66, 89, 0.62);
        border-radius: 6px;
        background: rgba(8, 2, 4, 0.88);
        color: #ff6f82;
        font: 900 12px/1 Consolas, "Courier New", monospace;
        text-align: center;
        text-shadow: 0 0 9px rgba(255, 35, 64, 0.78);
        box-shadow: inset 0 0 10px rgba(255, 28, 56, 0.12), 0 0 10px rgba(255, 28, 56, 0.16);
    }
    .error-card-stage {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: start;
        gap: clamp(6px, 1.2vw, 14px);
        min-height: 0;
        width: 100%;
        padding: clamp(24px, 4vw, 42px) clamp(18px, 3vw, 34px) 0;
        box-sizing: border-box;
        pointer-events: none;
    }
    .error-card {
        position: relative;
        grid-row: 1;
        justify-self: center;
        width: min(100%, 92px);
        aspect-ratio: 340 / 500;
        opacity: 0;
        animation: error-card-spread 520ms ease-out forwards;
        filter: drop-shadow(0 0 14px rgba(255, 35, 58, 0.34));
    }
    .error-card.is-center {
        position: absolute;
        left: 50%;
        top: 67%;
        translate: -50% -50%;
        z-index: 3;
        width: min(16%, 108px);
        animation-delay: 60ms;
    }
    .error-card[data-slot="0"] { grid-column: 1; animation-delay: 130ms; }
    .error-card[data-slot="1"] { grid-column: 2; animation-delay: 200ms; }
    .error-card[data-slot="2"] { grid-column: 3; animation-delay: 270ms; }
    .error-card[data-slot="3"] { grid-column: 4; animation-delay: 340ms; }
    .error-card[data-slot="4"] { grid-column: 5; animation-delay: 410ms; }
    @keyframes error-card-spread {
        from { opacity: 0; transform: translateY(12px) scale(0.86); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .error-card-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
    }
    .error-card-face {
        position: absolute;
        left: 50%;
        top: 48%;
        display: grid;
        width: 62%;
        aspect-ratio: 1;
        place-items: center;
        overflow: hidden;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.96);
    }
    .error-card-face img {
        width: 102%;
        height: 102%;
        object-fit: contain;
    }
    .error-card-name,
    .error-card-code,
    .error-card-kind {
        position: absolute;
        left: 12%;
        right: 12%;
        z-index: 2;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: Consolas, "Courier New", monospace;
        text-shadow: 0 0 8px rgba(255, 42, 64, 0.8);
    }
    .error-card-name {
        top: 13%;
        color: #ffe4e8;
        font-size: 9px;
        font-weight: 900;
    }
    .error-card-kind {
        bottom: 15%;
        color: #c98790;
        font-size: 9px;
        font-weight: 700;
    }
    .error-card-code {
        bottom: 14%;
        color: #ffffff;
        font-size: 17px;
        font-weight: 900;
        letter-spacing: 0;
    }
    .error-card.is-pair .error-card-code {
        top: calc(100% - 4px);
        bottom: auto;
        left: -4%;
        right: -4%;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        padding: 3px;
        overflow: visible;
        border: 1px solid rgba(255, 64, 88, 0.38);
        border-radius: 7px;
        background: rgba(7, 2, 4, 0.92);
        color: rgba(255, 220, 225, 0.4);
        font-size: 10px;
        text-shadow: none;
        box-shadow: inset 0 0 8px rgba(255, 31, 60, 0.12), 0 0 8px rgba(255, 24, 53, 0.16);
    }
    .error-code-cell {
        display: grid;
        height: 17px;
        place-items: center;
        border: 1px solid rgba(255, 75, 96, 0.2);
        border-radius: 3px;
        background: rgba(12, 3, 6, 0.82);
        color: rgba(255, 220, 225, 0.38);
        font-weight: 900;
        line-height: 1;
    }
    .error-code-cell.is-revealed {
        border-color: #ff2949;
        background: rgba(94, 5, 20, 0.9);
        color: #ff526c;
        text-shadow: 0 0 7px rgba(255, 25, 58, 0.92);
        box-shadow: inset 0 0 5px rgba(255, 37, 67, 0.38), 0 0 5px rgba(255, 31, 61, 0.44);
    }
    .error-card.is-answer {
        filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 22px rgba(255, 42, 64, 0.8));
    }
    .error-music-control {
        position: relative;
        justify-self: end;
        z-index: 10;
    }
    .error-music-control .classic-volume-panel {
        top: calc(100% + 8px);
        bottom: auto;
        background: #100307;
        border-color: rgba(255, 58, 82, 0.62);
        box-shadow: 0 0 16px rgba(255, 28, 56, 0.24);
        color-scheme: dark;
    }
    :is(#error-music-control, #error-intro-music-control) .classic-music-btn {
        background: #21070d;
        border-color: rgba(255, 86, 105, 0.58);
        box-shadow: inset 0 0 12px rgba(255, 30, 58, 0.14);
    }
    :is(#error-music-control, #error-intro-music-control) .classic-music-btn.is-on {
        background: #8f1028;
        border-color: #ff526c;
        box-shadow: 0 0 16px rgba(255, 37, 61, 0.4);
    }
    :is(#error-music-control, #error-intro-music-control) .classic-music-btn .btn-text,
    :is(#error-music-control, #error-intro-music-control) .classic-music-btn .music-icon,
    :is(#error-music-control, #error-intro-music-control) .classic-volume-label {
        color: #ffe6ea;
        text-shadow: 0 0 8px rgba(255, 42, 64, 0.8);
    }
    :is(#error-music-control, #error-intro-music-control) .classic-volume-slider {
        accent-color: #ff3657;
    }
    .error-music-control.is-open .classic-volume-panel {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .error-card.is-flipping-out {
        animation: error-card-flip-out 240ms ease-in forwards;
    }
    .error-card.is-flipping-in {
        animation: error-card-flip-in 240ms ease-out forwards;
    }
    @keyframes error-card-flip-out {
        from { opacity: 1; transform: scaleX(1); }
        to { opacity: 1; transform: scaleX(0); }
    }
    @keyframes error-card-flip-in {
        from { opacity: 1; transform: scaleX(0); }
        to { opacity: 1; transform: scaleX(1); }
    }
    .error-input-points {
        position: absolute;
        left: 50%;
        bottom: 3.5%;
        z-index: 5;
        display: flex;
        justify-content: center;
        gap: 5px;
        margin: 0;
        transform: translateX(-50%);
    }
    .error-input-point {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        background: url("boardgame/error/maple.webp") center / contain no-repeat;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.65));
        opacity: 0.95;
    }
    .error-input-point.is-used {
        filter: brightness(0.3);
        opacity: 0.55;
    }
    .error-command-panel {
        position: relative;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
        max-width: 520px;
        margin: 14px auto 0;
        padding: 12px;
        border: 1px solid rgba(255, 58, 82, 0.34);
        border-radius: 8px;
        background: rgba(5, 2, 4, 0.94);
        box-shadow: inset 0 0 18px rgba(255, 25, 54, 0.12);
    }
    .error-answer-input {
        width: 100%;
        min-height: 44px;
        border: 1px solid rgba(255, 86, 105, 0.52);
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.78);
        color: #fff5f6;
        font: 900 20px/1 Consolas, "Courier New", monospace;
        text-align: center;
        letter-spacing: 0;
        outline: none;
    }
    .error-answer-input:focus {
        border-color: rgba(255, 170, 180, 0.88);
        box-shadow: 0 0 16px rgba(255, 44, 67, 0.34);
    }
    .error-submit-btn,
    .error-stage-action {
        min-height: 44px;
        border: 1px solid rgba(255, 86, 105, 0.58);
        border-radius: 6px;
        background: #21070d;
        color: #ffe6ea;
        font: 900 13px/1 Consolas, "Courier New", monospace;
        cursor: pointer;
        box-shadow: inset 0 0 16px rgba(255, 30, 58, 0.14);
    }
    .error-submit-btn:disabled,
    .error-stage-action:disabled {
        cursor: not-allowed;
        opacity: 0.48;
    }
    .error-development-tools {
        position: absolute;
        left: clamp(14px, 2.5vw, 28px);
        right: clamp(14px, 2.5vw, 28px);
        bottom: 10%;
        z-index: 4;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 84px)) minmax(118px, 1fr) repeat(2, minmax(0, 84px));
        gap: 8px;
        margin: 0;
        max-width: none;
    }
    .error-tool-btn:nth-child(1) { grid-column: 1; }
    .error-tool-btn:nth-child(2) { grid-column: 2; }
    .error-tool-btn:nth-child(3) { grid-column: 4; }
    .error-tool-btn:nth-child(4) { grid-column: 5; }
    .error-tool-btn {
        position: relative;
        min-height: 54px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.66);
        border-radius: 6px;
        background: rgba(7, 2, 4, 0.82);
        color: #fff;
        font: 900 12px/1 Consolas, "Courier New", monospace;
        cursor: pointer;
        box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.08), 0 0 12px rgba(255, 42, 64, 0.16);
    }
    .error-tool-btn::before,
    .error-tool-btn::after {
        content: '';
        position: absolute;
        left: 50%;
        width: min(38px, calc(100% - 8px));
        height: 8px;
        transform: translateX(-50%);
        background-image: url("boardgame/error/maple.webp");
        background-size: 8px 8px;
        background-repeat: space no-repeat;
        opacity: 0.82;
        pointer-events: none;
    }
    .error-tool-btn::before { top: 4px; }
    .error-tool-btn::after { bottom: 4px; }
    .error-tool-btn span {
        position: relative;
        z-index: 1;
    }
    .error-tool-btn.is-used,
    .error-tool-btn.is-locked,
    .error-tool-btn:disabled {
        cursor: not-allowed;
        color: #9d6a72;
        border-color: rgba(255, 255, 255, 0.24);
        opacity: 0.72;
    }
    .error-tool-state {
        display: block;
        margin-top: 4px;
        color: #ff8795;
        font-size: 10px;
    }
    .error-feedback {
        min-height: 24px;
        margin: 12px 0 0;
        color: #ffb6c0;
        font: 700 12px/1.6 Consolas, "Courier New", monospace;
        text-align: center;
    }
    .error-clear-stamp {
        position: absolute;
        inset: 0;
        z-index: 8;
        display: grid;
        place-items: center;
        padding: 24px;
        pointer-events: none;
        opacity: 0;
        transform: scale(0.92);
        transition: opacity 600ms ease, transform 600ms ease;
    }
    .error-clear-stamp.is-visible {
        opacity: 1;
        transform: scale(1);
    }
    .error-clear-stamp img {
        position: absolute;
        inset: 5%;
        width: 90%;
        height: 90%;
        object-fit: contain;
        filter: drop-shadow(0 0 24px rgba(255, 42, 64, 0.72));
    }
    .error-command-panel.is-cleared {
        grid-template-columns: minmax(0, 1fr);
    }
    .error-command-panel.is-cleared .error-answer-input,
    .error-command-panel.is-cleared .error-submit-btn {
        display: none;
    }
    .error-command-panel.is-cleared .error-clear-record {
        display: block;
    }
    .error-clear-record {
        display: none;
        min-width: 0;
        padding: 8px 16px;
        border: 1px solid rgba(255, 255, 255, 0.52);
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.76);
        color: #fff8f9;
        font: 900 18px/1.1 Consolas, "Courier New", monospace;
        text-align: center;
        box-shadow: 0 0 16px rgba(255, 37, 61, 0.35);
    }
    .error-ending-dialogue {
        display: block;
        color: #fff6f7;
        text-shadow: 0 0 18px rgba(255, 44, 67, 0.9);
        opacity: 0;
        animation: error-ending-dialogue-fade 2000ms ease both;
    }
    .error-command-panel.is-ending .error-record-text {
        display: none;
    }
    @keyframes error-ending-dialogue-fade {
        0%, 100% { opacity: 0; }
        25%, 70% { opacity: 1; }
    }
    .error-blackout {
        position: fixed;
        inset: 0;
        z-index: 25000;
        background: #000;
        opacity: 0;
        pointer-events: all;
        transition: opacity 680ms ease;
    }
    .error-blackout.is-visible {
        opacity: 1;
    }
    .error-blackout.is-leaving {
        opacity: 0;
    }
    @media (max-width: 560px) {
        .error-access-overlay { padding: 16px; }
        .error-access-panel { width: min(320px, 100%); padding: 26px 12px 22px; }
        .error-access-title { font-size: 26px; line-height: 1.15; }
        .error-access-kicker,
        .error-access-code { font-size: 9px; overflow-wrap: anywhere; }
        .error-mode-head { padding-top: 38px; }
        .error-start-card { min-height: 190px; }
        .error-start-card img { width: 124px; height: 124px; }
        .error-development-tool-grid { grid-template-columns: 1fr; }
        .error-howto-card { padding: 14px; }
        .error-game-shell { padding: 12px; }
        .error-game-header {
            grid-template-columns: 44px minmax(0, 1fr) 44px;
            gap: 8px;
        }
        .error-game-header .error-stage-label {
            grid-column: 1 / -1;
            grid-row: 1;
        }
        .error-game-header .error-game-title {
            grid-column: 2;
            grid-row: 2;
            font-size: 20px;
            white-space: nowrap;
        }
        .error-game-header .error-music-control {
            grid-column: 3;
            grid-row: 2;
            align-self: center;
        }
        #error-music-control .classic-music-btn {
            box-sizing: border-box;
            min-width: 44px;
            width: 44px;
            height: 28px !important;
            padding: 0 5px !important;
            gap: 3px;
        }
        .error-game-pill,
        .error-stage-label,
        .error-time-label {
            justify-self: center;
        }
        .error-field {
            aspect-ratio: 1672 / 1020;
            min-height: 0;
            padding: 0;
        }
        .error-card-stage {
            container-type: inline-size;
            min-height: 0;
            gap: 3px;
            padding: 12px 7px 0;
        }
        .error-field-kind-label {
            top: -2px;
            min-width: 46px;
            padding: 3px 7px;
            font-size: 7px;
        }
        .error-card {
            width: min(16cqi, 54px);
        }
        .error-card.is-center {
            top: calc(65% + 5px);
            width: min(16cqi, 54px);
        }
        .error-card-name { font-size: 6px; }
        .error-card-kind { font-size: 6px; }
        .error-card-code { font-size: 9px; bottom: 7px; }
        .error-card.is-pair .error-card-code {
            top: calc(100% + 2px);
            left: -3%;
            right: -3%;
            gap: 1px;
            padding: 1px;
            border-radius: 4px;
            font-size: 6px;
        }
        .error-code-cell {
            height: 10px;
            border-radius: 2px;
        }
        .error-command-panel {
            grid-template-columns: 1fr;
            gap: 8px;
            margin-top: 10px;
            padding: 9px;
        }
        .error-development-tools {
            left: 6px;
            right: 6px;
            bottom: 8%;
            grid-template-columns: repeat(2, minmax(0, 44px)) minmax(48px, 1fr) repeat(2, minmax(0, 44px));
            gap: 3px;
        }
        .error-tool-btn {
            min-height: 34px;
            padding: 0 2px;
            font-size: 7px;
        }
        .error-tool-btn::before,
        .error-tool-btn::after {
            width: 24px;
            height: 5px;
            background-size: 5px 5px;
        }
        .error-input-points {
            bottom: 2.5%;
            gap: 2px;
        }
        .error-input-point {
            width: 8px;
            height: 8px;
        }
    }
    #boardgame-survival-section .survival-special-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-top: 16px;
    }
    #boardgame-survival-section .survival-special-card {
        min-width: 0;
        padding: 14px;
        border-radius: 16px;
        border: 1px solid rgba(255, 92, 166, 0.28);
        background: linear-gradient(180deg, rgba(255, 82, 170, 0.10), rgba(8, 8, 12, 0.44));
        text-align: left;
        overflow: hidden;
    }
    #boardgame-survival-section .survival-special-visual {
        height: 136px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: radial-gradient(circle at 50% 45%, rgba(255, 83, 172, 0.22), rgba(255, 83, 172, 0.04) 54%, rgba(0, 0, 0, 0.16));
    }
    #boardgame-survival-section .survival-special-card-grenade .survival-special-visual img {
        width: auto;
        max-width: 74%;
        max-height: 128px;
        object-fit: contain;
        filter: drop-shadow(0 0 18px rgba(255, 80, 168, 0.42));
    }
    #boardgame-survival-section .survival-special-card-blade .survival-special-visual img {
        width: 112%;
        max-width: none;
        max-height: 116px;
        object-fit: contain;
        filter: drop-shadow(0 0 16px rgba(255, 80, 168, 0.38));
    }
    #boardgame-survival-section .survival-special-copy h3 {
        margin: 0 0 6px;
        color: #ff8bc7;
        font-size: 15px;
        letter-spacing: 0.04em;
        text-align: center;
    }
    #boardgame-survival-section .survival-special-copy p {
        margin: 0 0 8px;
        color: #ffe0ee;
        font-size: 12px;
        line-height: 1.55;
        text-align: center;
    }
    @media (max-width: 520px) {
        .relic-mode-select {
            max-width: 300px;
            gap: 8px;
        }
        .relic-difficulty-card {
            min-height: 62px;
        }
        .relic-difficulty-card strong {
            font-size: 14px;
        }
        .relic-difficulty-card span {
            font-size: 9px;
        }
        .relic-hard-warning {
            font-size: 10px;
            line-height: 1.4;
        }
        .classic-branch-overlay {
            padding: clamp(148px, 34vh, 215px) 10px 18px;
        }
        .classic-branch-panel {
            padding: 12px;
            border-radius: 16px;
        }
        .classic-branch-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 7px;
        }
        .classic-branch-card {
            aspect-ratio: 0.78;
            min-height: 0;
            padding: 9px 4px 8px;
            border-radius: 12px;
            gap: 8px;
        }
        .classic-branch-card img {
            width: 44px;
            height: 44px;
        }
        .classic-branch-card.is-relic img {
            width: 48px;
            height: 48px;
        }
        .classic-branch-card.is-mandala img,
        .classic-branch-card.is-error img {
            width: 48px;
            height: 48px;
        }
        .classic-branch-name {
            font-size: 10px;
            line-height: 1.12;
        }
        .classic-branch-copy {
            min-height: 0;
            font-size: 7px;
            line-height: 1.35;
        }
    }
    .boardgame-mode-grid .boardgame-mode-card-joker {
        background: rgba(24, 21, 24, 0.94);
        border-color: #e2c1a0;
    }
    .boardgame-mode-grid .boardgame-mode-card-joker:hover {
        border-color: #f0cfad;
        box-shadow: 0 8px 18px rgba(24, 21, 24, 0.2);
    }
    .boardgame-mode-grid .boardgame-mode-card-joker .icon-img-wrapper {
        width: 64px;
        height: 64px;
        min-height: 64px;
        margin-bottom: 10px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .boardgame-mode-grid .boardgame-mode-card-joker .category-icon-img {
        width: 64px;
        height: 64px;
        object-fit: contain;
    }
    .boardgame-mode-grid .boardgame-mode-card-joker .name {
        color: #e2c1a0;
    }
    .boardgame-mode-grid .boardgame-mode-card-baseball {
        background: linear-gradient(180deg, rgba(30, 35, 43, 0.96), rgba(15, 19, 26, 0.98));
        border-color: #d8dee7;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .boardgame-mode-grid .boardgame-mode-card-baseball:hover {
        border-color: #eef3fa;
        box-shadow: 0 8px 18px rgba(15, 19, 26, 0.22);
    }
    .boardgame-mode-grid .boardgame-mode-card-baseball .icon-img-wrapper {
        width: 64px;
        height: 64px;
        min-height: 64px;
        margin-bottom: 10px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .boardgame-mode-grid .boardgame-mode-card-baseball .category-icon-img {
        width: 64px;
        height: 64px;
        object-fit: contain;
    }
    .boardgame-mode-grid .boardgame-mode-card-baseball .name {
        color: #d8dee7;
    }
    .boardgame-mode-grid .boardgame-mode-card-kaprekar {
        background: linear-gradient(180deg, rgba(45, 31, 54, 0.98), rgba(31, 21, 39, 0.99));
        border-color: #d9a682;
        box-shadow: inset 0 1px 0 rgba(255, 236, 220, 0.08), 0 8px 18px rgba(36, 20, 42, 0.16);
    }
    .boardgame-mode-grid .boardgame-mode-card-kaprekar:hover {
        border-color: #f0c8b3;
        box-shadow: 0 10px 22px rgba(185, 129, 104, 0.24), inset 0 1px 0 rgba(255, 236, 220, 0.12);
    }
    .boardgame-mode-grid .boardgame-mode-card-kaprekar .icon-img-wrapper {
        width: 64px;
        height: 64px;
        min-height: 64px;
        margin-bottom: 10px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .boardgame-mode-grid .boardgame-mode-card-kaprekar .category-icon-img {
        width: 64px;
        height: 64px;
        object-fit: contain;
    }
    .boardgame-mode-grid .boardgame-mode-card-kaprekar .name {
        color: #efc4a7;
    }
    .boardgame-mode-grid .boardgame-mode-card-quinter9 {
        position: relative;
        background: linear-gradient(180deg, rgba(24, 28, 27, 0.97), rgba(17, 18, 20, 0.98));
        border-color: transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .boardgame-mode-grid .boardgame-mode-card-quinter9::before {
        content: "";
        position: absolute;
        inset: -5px;
        border-radius: inherit;
        padding: 5px;
        background: linear-gradient(90deg, rgba(77, 175, 125, 0.9) 0 50%, rgba(196, 70, 72, 0.9) 50% 100%);
        pointer-events: none;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }
    .boardgame-mode-grid .boardgame-mode-card-quinter9:hover {
        box-shadow: 0 8px 18px rgba(17, 18, 20, 0.22);
    }
    .boardgame-mode-grid .boardgame-mode-card-quinter9:hover::before {
        background: linear-gradient(90deg, rgba(96, 214, 151, 0.95) 0 50%, rgba(228, 84, 86, 0.95) 50% 100%);
    }
    .boardgame-mode-grid .boardgame-mode-card-quinter9 .icon-img-wrapper,
    .boardgame-mode-grid .boardgame-mode-card-quinter9 .name {
        position: relative;
        z-index: 1;
    }
    .boardgame-mode-grid .boardgame-mode-card-quinter9 .icon-img-wrapper {
        width: 64px;
        height: 64px;
        min-height: 64px;
        margin-bottom: 10px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .boardgame-mode-grid .boardgame-mode-card-quinter9 .category-icon-img {
        width: 64px;
        height: 64px;
        object-fit: contain;
    }
    .boardgame-mode-grid .boardgame-mode-card-quinter9 .name {
        color: #d7ddd8;
    }
    .boardgame-mode-grid .boardgame-mode-card-blossom {
        background: linear-gradient(180deg, rgba(255, 241, 246, 0.96), rgba(250, 217, 227, 0.94));
        border-color: rgba(217, 132, 156, 0.58);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.62);
    }
    .boardgame-mode-grid .boardgame-mode-card-blossom:hover {
        border-color: rgba(232, 118, 151, 0.78);
        box-shadow: 0 8px 18px rgba(178, 91, 119, 0.16);
    }
    .boardgame-mode-grid .boardgame-mode-card-blossom .icon-img-wrapper {
        width: 64px;
        height: 64px;
        min-height: 64px;
        margin-bottom: 10px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .boardgame-mode-grid .boardgame-mode-card-blossom .category-icon-img {
        width: 64px;
        height: 64px;
        object-fit: contain;
    }
    .boardgame-mode-grid .boardgame-mode-card-blossom .name {
        color: #7f3d52;
    }
    .boardgame-mode-grid .boardgame-mode-card-stella {
        position: relative;
        background: #101927;
        border-color: transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .boardgame-mode-grid .boardgame-mode-card-stella::before {
        content: "";
        position: absolute;
        inset: -5px;
        border-radius: inherit;
        padding: 5px;
        background: linear-gradient(135deg, rgba(91, 119, 214, 0.88), rgba(166, 88, 226, 0.92) 38%, rgba(76, 197, 225, 0.82) 68%, rgba(238, 132, 206, 0.86));
        pointer-events: none;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }
    .boardgame-mode-grid .boardgame-mode-card-stella:hover {
        box-shadow: 0 8px 18px rgba(47, 36, 92, 0.24);
    }
    .boardgame-mode-grid .boardgame-mode-card-stella:hover::before {
        background: linear-gradient(135deg, rgba(111, 143, 255, 0.96), rgba(190, 110, 255, 0.98) 38%, rgba(91, 224, 255, 0.94) 68%, rgba(255, 153, 225, 0.96));
    }
    .boardgame-mode-grid .boardgame-mode-card-stella .icon-img-wrapper,
    .boardgame-mode-grid .boardgame-mode-card-stella .name {
        position: relative;
        z-index: 1;
    }
    .boardgame-mode-grid .boardgame-mode-card-stella .icon-img-wrapper {
        width: 64px;
        height: 64px;
        min-height: 64px;
        margin-bottom: 10px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .boardgame-mode-grid .boardgame-mode-card-stella .category-icon-img {
        width: 64px;
        height: 64px;
        object-fit: contain;
    }
    .boardgame-mode-grid .boardgame-mode-card-stella .name {
        color: #d7dcff;
    }
    .boardgame-mode-grid .boardgame-mode-card-equinox {
        background: #fff;
        border-color: #111;
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.04);
    }
    .boardgame-mode-grid .boardgame-mode-card-equinox:hover {
        border-color: #000;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    }
    .boardgame-mode-grid .boardgame-mode-card-equinox .icon-img-wrapper {
        width: 44px;
        height: 44px;
        min-height: 44px;
        margin-bottom: 10px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .boardgame-mode-grid .boardgame-mode-card-equinox .category-icon-img {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }
    .boardgame-mode-grid .boardgame-mode-card-equinox .name {
        color: #111;
    }
    .boardgame-mode-grid .boardgame-mode-card-overheat {
        background: linear-gradient(180deg, rgba(17, 15, 14, 0.98), rgba(5, 5, 6, 0.99));
        border-color: #d9361d;
        box-shadow:
            inset 0 1px 0 rgba(255, 130, 72, 0.16),
            0 0 0 1px rgba(255, 95, 40, 0.08);
    }
    .boardgame-mode-grid .boardgame-mode-card-overheat:hover {
        border-color: #ff5730;
        box-shadow:
            inset 0 1px 0 rgba(255, 155, 92, 0.22),
            0 8px 18px rgba(118, 25, 10, 0.26);
    }
    .boardgame-mode-grid .boardgame-mode-card-overheat .icon-img-wrapper {
        width: 64px;
        height: 64px;
        min-height: 64px;
        margin-bottom: 10px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .boardgame-mode-grid .boardgame-mode-card-overheat .category-icon-img {
        width: 64px;
        height: 64px;
        object-fit: contain;
    }
    .boardgame-mode-grid .boardgame-mode-card-overheat .name {
        color: #ff7048;
    }
    .boardgame-mode-grid .boardgame-mode-card-survival {
        background: #141218;
        border-color: #ff4f9f;
        box-shadow:
            inset 0 1px 0 rgba(255, 130, 190, 0.16),
            0 0 0 1px rgba(255, 75, 150, 0.10);
    }
    .boardgame-mode-grid .boardgame-mode-card-survival:hover {
        border-color: #ff7fbd;
        box-shadow:
            inset 0 1px 0 rgba(255, 150, 210, 0.22),
            0 8px 18px rgba(120, 10, 62, 0.28);
    }
    .boardgame-mode-grid .boardgame-mode-card-survival .icon-img-wrapper {
        width: 64px;
        height: 64px;
        min-height: 64px;
        margin-bottom: 10px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .boardgame-mode-grid .boardgame-mode-card-survival .category-icon-img {
        width: 64px;
        height: 64px;
        object-fit: contain;
        filter: drop-shadow(0 8px 14px rgba(255, 55, 146, 0.24));
    }
    #boardgame-mode-page-2 .boardgame-mode-card-survival .icon-img-wrapper {
        width: 96px;
        height: 96px;
        min-height: 96px;
    }
    #boardgame-mode-page-2 .boardgame-mode-card-survival .category-icon-img {
        width: 96px;
        height: 96px;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .boardgame-mode-grid .boardgame-mode-card-survival .name {
        color: #ff78b8;
    }
    .boardgame-mode-grid .boardgame-mode-card-ritual {
        background: linear-gradient(180deg, rgba(26, 17, 10, 0.98), rgba(8, 7, 6, 0.99));
        border-color: #d46a19;
        box-shadow:
            inset 0 1px 0 rgba(255, 153, 58, 0.16),
            0 0 0 1px rgba(255, 121, 24, 0.10);
    }
    .boardgame-mode-grid .boardgame-mode-card-ritual:hover {
        border-color: #ff8a26;
        box-shadow:
            inset 0 1px 0 rgba(255, 174, 84, 0.22),
            0 8px 18px rgba(113, 43, 7, 0.28);
    }
    .boardgame-mode-grid .boardgame-mode-card-ritual .icon-img-wrapper {
        width: 64px;
        height: 64px;
        min-height: 64px;
        margin-bottom: 10px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .boardgame-mode-grid .boardgame-mode-card-ritual .category-icon-img {
        width: 64px;
        height: 64px;
        object-fit: contain;
        filter: drop-shadow(0 8px 14px rgba(255, 115, 24, 0.24));
    }
    #boardgame-mode-page-2 .boardgame-mode-card-ritual .icon-img-wrapper {
        width: 96px;
        height: 96px;
        min-height: 96px;
    }
    #boardgame-mode-page-2 .boardgame-mode-card-ritual .category-icon-img {
        width: 96px;
        height: 96px;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .boardgame-mode-grid .boardgame-mode-card-ritual .name {
        color: #ff7a2f;
    }
    .boardgame-mode-grid .boardgame-mode-card-arena {
        background: #171225;
        border-color: #c9c4ef;
        box-shadow:
            inset 0 1px 0 rgba(236, 233, 255, 0.18),
            0 0 0 1px rgba(133, 89, 255, 0.16);
    }
    .boardgame-mode-grid .boardgame-mode-card-arena:hover {
        border-color: #eeeaff;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.24),
            0 8px 20px rgba(79, 36, 161, 0.34),
            0 0 18px rgba(126, 83, 255, 0.20);
    }
    .boardgame-mode-grid .boardgame-mode-card-arena .icon-img-wrapper {
        width: 64px;
        height: 64px;
        min-height: 64px;
        margin-bottom: 10px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .boardgame-mode-grid .boardgame-mode-card-arena .category-icon-img {
        width: 64px;
        height: 64px;
        object-fit: contain;
        filter: drop-shadow(0 8px 14px rgba(126, 83, 255, 0.28));
    }
    #boardgame-mode-page-2 .boardgame-mode-card-arena .icon-img-wrapper {
        width: 96px;
        height: 96px;
        min-height: 96px;
    }
    #boardgame-mode-page-2 .boardgame-mode-card-arena .category-icon-img {
        width: 96px;
        height: 96px;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .boardgame-mode-grid .boardgame-mode-card-arena .name {
        color: #ddd8ff;
    }
    #boardgame-arena-section .arena-mode-shell {
        background: #100d1c;
        border: 1px solid rgba(186, 171, 255, 0.5);
        box-shadow: 0 18px 46px rgba(31, 16, 76, 0.34);
    }
    #boardgame-arena-section .arena-mode-head {
        position: relative;
        margin-bottom: 20px;
        text-align: center;
    }
    #boardgame-arena-section .arena-mode-head h2 {
        margin-top: 0;
        color: #e4dfff;
        text-shadow: 0 0 18px rgba(141, 100, 255, 0.52);
    }
    #boardgame-arena-section .arena-mode-head p {
        color: #c9c0e8;
        font-size: 14px;
        line-height: 1.55;
    }
    #boardgame-arena-section .arena-start-grid {
        max-width: 280px;
        margin: 0 auto 18px;
    }
    #boardgame-arena-section .arena-start-card {
        background: #18122b;
        border: 2px solid rgba(190, 170, 255, 0.8);
        box-shadow: inset 0 0 24px rgba(137, 89, 255, 0.15), 0 12px 28px rgba(0, 0, 0, 0.32);
    }
    #boardgame-arena-section .arena-start-card:hover {
        border-color: #f0edff;
        box-shadow: inset 0 0 28px rgba(164, 123, 255, 0.23), 0 14px 30px rgba(0, 0, 0, 0.36);
    }
    #boardgame-arena-section .arena-start-card .icon-img-wrapper {
        width: 116px;
        height: 116px;
        min-height: 116px;
        margin: 0 auto 10px;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }
    #boardgame-arena-section .arena-start-card .category-icon-img {
        width: 116px;
        height: 116px;
        object-fit: contain;
        filter: drop-shadow(0 0 18px rgba(151, 103, 255, 0.4));
    }
    #boardgame-arena-section .arena-start-card .name,
    #boardgame-arena-section .arena-howto-card > strong,
    #boardgame-arena-section .arena-howto-section h3 {
        color: #ded7ff;
    }
    #boardgame-arena-section .arena-howto-card {
        position: relative;
        background: #15121f;
        border-color: rgba(177, 156, 255, 0.4);
        color: #e5e0f3;
    }
    #boardgame-arena-section .arena-mode-light-control {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
    }
    #boardgame-arena-section .arena-entry-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 76px;
        height: 34px;
        padding: 0 12px;
        border: 1px solid rgba(196, 181, 255, 0.55);
        border-radius: 999px;
        background: #251c3f;
        color: #e9e4ff;
        font-size: 9px;
        font-weight: 900;
        white-space: nowrap;
    }
    #boardgame-arena-section .arena-light-toggle {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 34px;
        padding: 0 10px;
        border: 1px solid rgba(196, 181, 255, 0.55);
        border-radius: 999px;
        background: #181326;
        color: #dcd6f4;
        font-size: 9px;
        font-weight: 900;
        cursor: pointer;
        user-select: none;
    }
    #boardgame-arena-section .arena-light-toggle input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }
    #boardgame-arena-section .arena-light-toggle-track {
        position: relative;
        width: 30px;
        height: 16px;
        flex: 0 0 auto;
        border: 1px solid rgba(189, 177, 231, 0.56);
        border-radius: 999px;
        background: #302942;
        transition: background 180ms ease, box-shadow 180ms ease;
    }
    #boardgame-arena-section .arena-light-toggle-track::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #aaa0c7;
        transition: transform 180ms ease, background 180ms ease;
    }
    #boardgame-arena-section .arena-light-toggle input:checked + .arena-light-toggle-track {
        background: #6451a9;
        box-shadow: 0 0 12px rgba(169, 143, 255, 0.45);
    }
    #boardgame-arena-section .arena-light-toggle input:checked + .arena-light-toggle-track::after {
        transform: translateX(14px);
        background: #f4f0ff;
    }
    #boardgame-arena-section .arena-light-toggle input:focus-visible + .arena-light-toggle-track {
        outline: 2px solid #eee9ff;
        outline-offset: 2px;
    }
    #boardgame-arena-section .arena-light-toggle-state {
        min-width: 16px;
        color: #afa5cb;
        font-size: 8px;
    }
    #boardgame-arena-section .arena-light-toggle input:checked ~ .arena-light-toggle-state {
        color: #f0ebff;
    }
    #boardgame-arena-section .arena-howto-lead {
        max-width: 640px;
        margin: 14px auto 16px;
        color: #ddd7ed;
        font-size: 14px;
        line-height: 1.65;
        text-align: center;
    }
    #boardgame-arena-section .arena-rule-chips {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin: 14px 0;
    }
    #boardgame-arena-section .arena-rule-chip {
        padding: 8px 6px;
        border: 1px solid rgba(182, 162, 255, 0.35);
        border-radius: 999px;
        background: #211936;
        color: #dcd5ff;
        font-size: 11px;
        font-weight: 900;
        text-align: center;
    }
    #boardgame-arena-section .arena-job-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 7px;
        margin: 14px 0;
    }
    #boardgame-arena-section .arena-job-chip {
        --arena-job-accent: #aa91ff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 102px;
        padding: 10px 6px 9px;
        border: 1px solid rgba(208, 199, 255, 0.27);
        border-radius: 6px;
        background: #1b1727;
        color: #d8d3e9;
        font-size: 11px;
        font-weight: 900;
        text-align: center;
    }
    #boardgame-arena-section .arena-job-chip img {
        width: 64px;
        height: 64px;
        display: block;
        object-fit: contain;
        filter: drop-shadow(0 0 8px var(--arena-job-accent));
    }
    #boardgame-arena-section .arena-job-chip span {
        line-height: 1;
    }
    #boardgame-arena-section .arena-job-chip.is-warrior { --arena-job-accent: #ff443d; }
    #boardgame-arena-section .arena-job-chip.is-mage { --arena-job-accent: #2f9cff; }
    #boardgame-arena-section .arena-job-chip.is-archer { --arena-job-accent: #67e637; }
    #boardgame-arena-section .arena-job-chip.is-thief { --arena-job-accent: #b45cff; }
    #boardgame-arena-section .arena-job-chip.is-pirate { --arena-job-accent: #9bc8ff; }
    #boardgame-arena-section .arena-visual-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        margin: 16px 0;
    }
    #boardgame-arena-section .arena-mini-field {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: repeat(5, minmax(0, 1fr));
        width: min(100%, 230px);
        aspect-ratio: 1;
        gap: 5px;
        padding: 8px;
        margin: 0 auto;
        border: 1px solid rgba(200, 188, 255, 0.42);
        border-radius: 6px;
        background: #0b0912;
    }
    #boardgame-arena-section .arena-mini-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 0;
        width: 100%;
        height: 100%;
        border: 1px solid rgba(180, 160, 255, 0.25);
        border-radius: 4px;
        background: #1c1730;
        color: #8f7bd0;
        font-size: 10px;
        font-weight: 900;
    }
    #boardgame-arena-section .arena-mini-cell.is-player {
        background: #7562c5;
        color: #fff;
    }
    #boardgame-arena-section .arena-mini-cell.is-com {
        background: #3d335f;
        color: #eeeaff;
    }
    #boardgame-arena-section .arena-mini-cell.is-new {
        outline: 2px solid #f0ecff;
        outline-offset: -3px;
    }
    #boardgame-arena-section .arena-mini-cell.is-blocked {
        border-color: rgba(236, 117, 255, 0.68);
        background: #120b1d;
        box-shadow: inset 0 0 8px rgba(218, 70, 255, 0.24);
    }
    #boardgame-arena-section .arena-mini-cell.is-blocked img {
        display: block;
        width: 90%;
        height: 90%;
        object-fit: contain;
        filter: drop-shadow(0 0 4px rgba(229, 103, 255, 0.76));
    }
    #boardgame-arena-section .arena-visual-copy {
        width: min(100%, 620px);
        margin: 0 auto;
        color: #ddd7ed;
        font-size: 13px;
        line-height: 1.7;
        text-align: left;
    }
    #boardgame-arena-section .arena-line-showcase {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: center;
        margin: 12px 0 14px;
        padding: 14px;
        border: 1px solid rgba(255, 218, 93, 0.38);
        border-radius: 8px;
        background: #12101b;
        box-shadow: inset 0 0 24px rgba(255, 207, 61, 0.06);
    }
    #boardgame-arena-section .arena-line-victory-mark {
        width: 82px;
        height: 82px;
        display: block;
        margin: 0 auto;
        object-fit: contain;
        filter: drop-shadow(0 0 12px rgba(255, 214, 67, 0.65));
    }
    #boardgame-arena-section .arena-line-content strong {
        display: block;
        margin-bottom: 9px;
        color: #ffe08a;
        font-size: 13px;
        text-align: center;
    }
    #boardgame-arena-section .arena-line-patterns {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    #boardgame-arena-section .arena-line-pattern {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        min-width: 0;
        padding: 8px 5px;
        border: 1px solid rgba(204, 188, 255, 0.22);
        border-radius: 6px;
        background: #1d1830;
        color: #dcd6ef;
        font-size: 10px;
        font-weight: 900;
    }
    #boardgame-arena-section .arena-line-pattern-grid {
        display: grid;
        grid-template-columns: repeat(5, 7px);
        grid-template-rows: repeat(5, 7px);
        gap: 2px;
    }
    #boardgame-arena-section .arena-line-pattern-grid i {
        width: 7px;
        height: 7px;
        border-radius: 2px;
        background: #33294e;
    }
    #boardgame-arena-section .arena-line-pattern-grid i.is-line {
        background: #ffd454;
        box-shadow: 0 0 6px rgba(255, 212, 84, 0.9);
    }
    #boardgame-arena-section .arena-howto-section {
        margin-top: 16px;
        padding: 14px 16px;
        border: 1px solid rgba(182, 162, 255, 0.22);
        border-radius: 8px;
        background: #191522;
    }
    #boardgame-arena-section .arena-howto-section h3 {
        margin: 0 0 10px;
        font-size: 14px;
        text-align: center;
    }
    #boardgame-arena-section .arena-howto-section ul {
        margin: 0;
        padding-left: 20px;
        color: #e2ddec;
        font-size: 13px;
        line-height: 1.7;
        text-align: left;
    }
    #boardgame-arena-section .boardgame-code-rule-card {
        border-color: rgba(183, 163, 255, 0.32);
        background: #12101a;
    }
    #boardgame-arena-section .boardgame-code-rule-title,
    #boardgame-arena-section .boardgame-code-rule-item strong {
        color: #ddd6ff;
    }
    .arena-play-shell { max-width: 760px; margin: 0 auto; padding: 18px; border: 1px solid rgba(186, 171, 255, 0.48); border-radius: 18px; background: #100d1c; color: #e8e1ff; box-shadow: 0 18px 46px rgba(31, 16, 76, 0.34); }
    .arena-play-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 42px; margin-bottom: 14px; }
    .arena-play-title { grid-column: 2; margin: 0; color: #e4dfff; font-size: 22px; text-align: center; text-shadow: 0 0 18px rgba(141, 100, 255, 0.52); white-space: nowrap; }
    .arena-play-sub { grid-column: 1; grid-row: 1; align-self: center; justify-self: start; min-height: 1em; margin: 0; color: #c9c0e8; font-size: 12px; font-weight: 900; white-space: nowrap; }
    .arena-play-sub.is-player, .arena-play-sub.is-com { position: relative; width: 144px; display: inline-flex; align-items: center; }
    .arena-play-sub span { margin-left: 31px; text-align: left; }
    .arena-play-sub.is-player .arena-turn-marker, .arena-play-sub.is-com .arena-turn-marker { position: absolute; left: 0; }
    .arena-turn-marker { display: block; width: 26px; height: 22px; object-fit: contain; opacity: 0.92; filter: brightness(1.08) drop-shadow(0 0 4px rgba(var(--arena-turn-rgb), 0.9)) drop-shadow(0 0 8px rgba(var(--arena-turn-rgb), 0.5)); pointer-events: none; }
    .arena-music-control { position: relative; z-index: 24; grid-column: 3; grid-row: 1; justify-self: end; }
    .arena-music-btn { min-width: 92px; height: 34px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(190, 170, 255, 0.5); border-radius: 999px; background: rgba(15, 10, 29, 0.92); color: #dcd2f7; font-family: inherit; font-size: 10px; font-weight: 900; cursor: pointer; box-shadow: inset 0 0 12px rgba(166, 105, 255, 0.12), 0 0 14px rgba(107, 63, 181, 0.16); }
    .arena-music-btn.is-on { border-color: rgba(218, 196, 255, 0.82); background: linear-gradient(135deg, #56309a, #171027); color: #fff; box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.1), 0 0 18px rgba(172, 108, 255, 0.42); }
    .arena-music-note { font-size: 14px; line-height: 1; text-shadow: 0 0 8px #c89cff; }
    .arena-music-state { min-width: 18px; color: #aa9bcf; font-size: 8px; }
    .arena-music-btn.is-on .arena-music-state { color: #f2eaff; }
    .arena-volume-panel { position: absolute; top: calc(100% + 7px); right: 0; width: 168px; padding: 9px 11px; box-sizing: border-box; border: 1px solid rgba(190, 170, 255, 0.42); border-radius: 8px; background: rgba(12, 8, 24, 0.97); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42), inset 0 0 18px rgba(148, 91, 236, 0.1); opacity: 0; transform: translateY(-5px); pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; }
    .arena-music-control.is-open .arena-volume-panel, .arena-music-control:focus-within .arena-volume-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .arena-volume-panel label { display: block; margin-bottom: 6px; color: #cfc1ed; font-size: 8px; font-weight: 900; text-align: left; }
    .arena-volume-slider { display: block; width: 100%; accent-color: #a96cff; cursor: pointer; }
    .arena-team-select, .arena-sequence-stage { position: relative; min-height: 560px; border-radius: 16px; background: #080711 url('boardgame/arena/arena background.webp') center/cover no-repeat; overflow: hidden; }
    .arena-team-select { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 24px; }
    .arena-team-select::before, .arena-sequence-stage::before, .arena-field-stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 48%, rgba(160, 92, 238, 0.13), rgba(0, 0, 0, 0.28) 54%, rgba(0, 0, 0, 0.56)); pointer-events: none; }
    .arena-team-title { position: relative; margin: 0; color: #f1ecff; text-align: center; font-size: 18px; font-weight: 900; text-shadow: 0 0 18px rgba(186, 134, 255, 0.56); }
    .arena-team-grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
    .arena-team-card { min-height: 132px; padding: 12px 8px; border: 1px solid rgba(213, 199, 255, 0.36); border-radius: 10px; background: rgba(18, 12, 31, 0.84); color: #ede8ff; font-family: inherit; font-weight: 900; cursor: pointer; box-shadow: inset 0 0 22px rgba(156, 91, 255, 0.1), 0 16px 28px rgba(0, 0, 0, 0.24); }
    .arena-team-card:hover { border-color: #eee9ff; box-shadow: inset 0 0 26px rgba(186, 134, 255, 0.2), 0 0 22px rgba(158, 96, 255, 0.26); }
    .arena-team-card img { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 auto 9px; filter: drop-shadow(0 0 12px rgba(213, 199, 255, 0.5)); }
    .arena-sequence-stage { display: grid; place-items: center; }
    .arena-vs-panel { position: relative; width: min(100%, 620px); min-height: 270px; display: grid; grid-template-columns: 1fr 160px 1fr; gap: 18px; align-items: center; overflow: visible; opacity: 0; animation: arenaVsFade 2.35s ease forwards; }
    .arena-vs-team { --arena-vs-entry: -155%; --arena-vs-spin: -16deg; --arena-vs-hit: 30%; --arena-vs-recoil: -10%; --arena-vs-settle: 3%; position: relative; z-index: 2; isolation: isolate; text-align: center; opacity: 0; animation: arenaVsTeamCrash 1.08s cubic-bezier(0.16, 0.82, 0.2, 1) 0.18s both; }
    .arena-vs-team.is-com { --arena-vs-entry: 155%; --arena-vs-spin: 16deg; --arena-vs-hit: -30%; --arena-vs-recoil: 10%; --arena-vs-settle: -3%; }
    .arena-vs-team img { position: relative; z-index: 2; width: 118px; height: 118px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(238, 231, 255, 0.66)); }
    .arena-vs-team strong { position: relative; z-index: 3; display: block; margin-top: 8px; color: #f2ecff; font-size: 13px; text-shadow: 0 0 12px rgba(207, 181, 255, 0.58); animation: arenaVsLabelReveal 0.42s ease 0.92s both; }
    .arena-vs-stamp-sparks { position: absolute; z-index: 0; left: 50%; top: 50%; width: 146px; aspect-ratio: 1; pointer-events: none; transform: translate(-50%, -54%) scale(0.15) rotate(-25deg); opacity: 0; background: radial-gradient(circle at 50% 4%, #fff 0 2px, transparent 3px), radial-gradient(circle at 87% 22%, #e7d4ff 0 2px, transparent 3px), radial-gradient(circle at 96% 58%, #fff 0 1px, transparent 3px), radial-gradient(circle at 74% 91%, #caa5ff 0 2px, transparent 3px), radial-gradient(circle at 28% 94%, #fff 0 2px, transparent 3px), radial-gradient(circle at 3% 63%, #d8bbff 0 2px, transparent 3px), radial-gradient(circle at 12% 23%, #fff 0 1px, transparent 3px), radial-gradient(circle, rgba(200, 157, 255, 0.52) 0 8%, transparent 48%); filter: drop-shadow(0 0 6px #c38cff); animation: arenaVsStampSparks 0.82s ease-out 0.46s both; }
    .arena-vs-mark-wrap { position: relative; z-index: 5; width: 160px; max-width: 100%; display: grid; place-items: center; isolation: isolate; }
    .arena-vs-mark { position: relative; z-index: 4; width: 160px; max-width: 100%; filter: drop-shadow(0 0 20px rgba(236, 217, 255, 0.46)); animation: arenaVsMarkImpact 1.08s cubic-bezier(0.18, 0.82, 0.18, 1) 0.42s both; }
    .arena-vs-impact-rays, .arena-vs-impact-ring, .arena-vs-impact-core { position: absolute; left: 50%; top: 50%; pointer-events: none; opacity: 0; }
    .arena-vs-impact-rays { z-index: 1; width: 250px; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.1) rotate(8deg); background: repeating-conic-gradient(from 4deg, rgba(255,255,255,0) 0deg 8deg, rgba(247,235,255,0.94) 9deg 10deg, rgba(174,91,255,0.22) 11deg 14deg, rgba(255,255,255,0) 15deg 23deg); clip-path: polygon(50% 0, 56% 39%, 74% 8%, 67% 42%, 100% 24%, 73% 48%, 96% 65%, 69% 57%, 79% 100%, 58% 65%, 48% 100%, 47% 65%, 15% 94%, 38% 58%, 0 63%, 37% 50%, 3% 31%, 42% 43%); filter: drop-shadow(0 0 7px #d09cff); animation: arenaVsImpactRays 0.72s ease-out 0.61s both; }
    .arena-vs-impact-ring { z-index: 2; width: 92px; aspect-ratio: 1; border: 5px solid rgba(247, 238, 255, 0.94); border-radius: 50%; transform: translate(-50%, -50%) scale(0.15); box-shadow: 0 0 12px #fff, 0 0 30px #a965ff, inset 0 0 18px #c490ff; animation: arenaVsImpactRing 0.72s ease-out 0.63s both; }
    .arena-vs-impact-core { z-index: 3; width: 72px; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(0.1); background: radial-gradient(circle, #fff 0 13%, #f5e8ff 14% 28%, rgba(182, 103, 255, 0.85) 29% 48%, transparent 72%); filter: blur(1px) drop-shadow(0 0 18px #fff); animation: arenaVsImpactCore 0.58s ease-out 0.62s both; }
    .arena-first-panel { min-height: 220px; display: grid; place-items: center; padding: 28px; border: 1px solid rgba(224, 214, 255, 0.52); border-radius: 14px; background: rgba(10, 7, 18, 0.86); color: #f4efff; text-align: center; font-size: 24px; font-weight: 900; text-shadow: 0 0 18px rgba(190, 170, 255, 0.72); box-shadow: 0 0 26px rgba(160, 92, 238, 0.24), inset 0 0 24px rgba(190, 170, 255, 0.08); animation: arenaFirstPulse 1.7s ease forwards; }
    .arena-field-stage { position: relative; border-radius: 16px; background: #070610 url('boardgame/arena/arena background.webp') center/cover no-repeat; aspect-ratio: 5 / 4; overflow: hidden; isolation: isolate; }
    .arena-win-track { position: absolute; z-index: 4; top: 15%; width: 18%; height: 55%; display: flex; flex-direction: column; align-items: center; justify-content: space-around; pointer-events: none; }
    .arena-win-track.is-player { left: 1.2%; }
    .arena-win-track.is-com { right: 1.2%; }
    .arena-win-aura { position: absolute; z-index: 0; inset: -14% -28%; border-radius: 48%; opacity: 0; transform: scale(0.72); background: radial-gradient(ellipse, rgba(var(--arena-win-rgb), 0.42) 0 10%, rgba(var(--arena-win-rgb), 0.2) 32%, transparent 70%); filter: blur(5px); }
    .arena-win-track.is-complete .arena-win-aura { opacity: 0.28; transform: scale(1); box-shadow: 0 0 28px rgba(var(--arena-win-rgb), 0.2); }
    .arena-win-track.is-awarding .arena-win-aura { animation: arenaWinAuraBurst 1.1s ease-out both; }
    .arena-win-track.is-completing .arena-win-aura { animation-name: arenaWinAuraComplete; }
    .arena-win-mark { position: relative; z-index: 2; display: block; width: 100%; max-height: 32%; aspect-ratio: 1; opacity: 0.11; transform: scale(0.82); filter: grayscale(0.78) brightness(0.42); transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease; }
    .arena-win-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
    .arena-win-mark-stars { position: absolute; z-index: 3; inset: 8%; overflow: hidden; border-radius: 42%; opacity: 0; transform: scale(0.64); pointer-events: none; transition: inset 360ms ease, opacity 360ms ease, transform 360ms ease; }
    .arena-win-mark-stars::before,
    .arena-win-mark-stars::after { content: '\2726  \22C6  \2727'; position: absolute; left: -8%; top: -8%; width: 116%; color: #fff; font-size: 8px; line-height: 1; text-align: center; word-spacing: 8px; text-shadow: 15px 18px 5px rgba(var(--arena-win-rgb),0.9), -13px 36px 4px rgba(255,255,255,0.76), 9px 56px 5px rgba(var(--arena-win-rgb),0.74); filter: drop-shadow(0 0 3px var(--arena-win-color)); opacity: 0; animation: arenaWinStarsFall 2.45s linear infinite; }
    .arena-win-mark-stars::after { content: '\22C6  \2727  \2726'; left: -16%; top: -18%; width: 132%; font-size: 6px; word-spacing: 13px; text-shadow: -17px 20px 4px rgba(var(--arena-win-rgb),0.82), 18px 42px 5px rgba(255,255,255,0.72), -5px 63px 4px rgba(var(--arena-win-rgb),0.68); animation-duration: 3.15s; animation-delay: -1.28s; }
    .arena-win-track.wins-1 .arena-win-mark.is-earned .arena-win-mark-stars { inset: 4%; opacity: 0.42; transform: scale(0.76); }
    .arena-win-track.wins-2 .arena-win-mark.is-earned .arena-win-mark-stars { inset: -8%; opacity: 0.6; transform: scale(0.96); }
    .arena-win-track.wins-3 .arena-win-mark.is-earned .arena-win-mark-stars { inset: -18%; opacity: 0.78; transform: scale(1.12); }
    .arena-win-mark.is-earned { opacity: 1; transform: scale(1); filter: brightness(1.14) drop-shadow(0 0 5px rgba(var(--arena-win-rgb), 0.88)) drop-shadow(0 0 11px rgba(var(--arena-win-rgb), 0.46)); }
    .arena-win-mark.is-new { animation: arenaWinMarkEarned 0.78s cubic-bezier(0.16, 0.82, 0.2, 1) both; }
    .arena-win-track.is-completing .arena-win-mark.is-earned { animation: arenaWinMarksComplete 0.72s ease-out 0.2s both; }
    .arena-board-grid { position: absolute; z-index: 2; left: 20.7%; top: 10%; width: 57%; height: 71%; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 0.9%; }
    .arena-board-cell { --arena-stamp-size: 82%; --arena-stamp-left: 8%; --arena-stamp-top: 30%; position: relative; display: grid; place-items: center; border: 0; background: transparent; padding: 0; cursor: pointer; }
    .arena-board-cell:disabled { cursor: default; }
    .arena-block-stamp-wrap { position: relative; z-index: 5; grid-area: 1 / 1; width: var(--arena-stamp-size); left: var(--arena-stamp-left); top: var(--arena-stamp-top); aspect-ratio: 1; display: grid; place-items: center; opacity: 0; transform: scale(0.72); transition: opacity 0.62s ease, transform 0.72s cubic-bezier(0.16, 0.82, 0.2, 1); pointer-events: none; }
    .arena-block-stamp-wrap.is-visible { opacity: 1; transform: scale(1); }
    .arena-block-stamp { width: 100%; height: 100%; object-fit: contain; filter: brightness(1.05) drop-shadow(0 0 6px rgba(255, 255, 255, 0.72)) drop-shadow(0 0 12px rgba(219, 64, 255, 0.82)); }
    .arena-board-token { position: relative; z-index: 2; grid-area: 1 / 1; width: var(--arena-stamp-size); left: var(--arena-stamp-left); top: var(--arena-stamp-top); aspect-ratio: 1; opacity: 0; transform: scale(0.64); transform-style: preserve-3d; transition: opacity 220ms ease, transform 220ms ease; pointer-events: none; }
    .arena-board-cell.is-owned .arena-board-token { opacity: 1; transform: scale(1); }
    .arena-board-token-face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; }
    .arena-board-token-face.is-back { opacity: 0; transform: none; }
    .arena-board-stamp { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 10px rgba(238, 231, 255, 0.68)); }
    .arena-board-cell.is-com .arena-board-stamp { filter: drop-shadow(0 0 12px rgba(170, 117, 255, 0.74)); }
    .arena-board-cell.is-deploying .arena-board-token { animation: arenaDeployToken 560ms cubic-bezier(0.16, 0.82, 0.22, 1) both; }
    .arena-board-cell.is-deploying::before { content: ''; position: absolute; z-index: 1; inset: 20%; border-radius: 50%; border: 2px solid rgba(244, 239, 255, 0.92); box-shadow: 0 0 18px rgba(217, 195, 255, 0.9), inset 0 0 16px rgba(255, 255, 255, 0.58); animation: arenaDeployRing 560ms ease-out both; pointer-events: none; }
    .arena-board-cell.is-flipping { perspective: none; }
    .arena-board-cell.is-flipping .arena-board-token { animation: arenaFlipToken 900ms cubic-bezier(0.18, 0.72, 0.18, 1) both; }
    .arena-board-cell.is-flipping .arena-board-token-face.is-front { animation: arenaFlipFrontSwap 900ms ease both; }
    .arena-board-cell.is-flipping .arena-board-token-face.is-back { animation: arenaFlipBackSwap 900ms ease both; }
    .arena-board-cell.is-flipping::before { content: ''; position: absolute; z-index: 1; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.98) 0 5%, rgba(255,222,117,0.78) 18%, rgba(184,137,255,0.34) 42%, transparent 68%); mix-blend-mode: screen; animation: arenaFlipBurst 900ms ease-out both; pointer-events: none; }
    .arena-board-cell.is-flipping::after { content: ''; position: absolute; z-index: 3; inset: 17%; border-radius: 50%; border: 2px solid rgba(255, 241, 181, 0.96); box-shadow: 0 0 10px #fff, 0 0 24px rgba(255, 212, 91, 0.92), inset 0 0 14px rgba(255,255,255,0.82); animation: arenaFlipShockwave 900ms ease-out both; pointer-events: none; }
    .arena-flip-flare { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; color: #fff3bd; font-size: clamp(7px, 1vw, 12px); font-weight: 1000; letter-spacing: 0; text-shadow: 0 0 4px #fff, 0 0 12px #ffd75d, 0 0 24px #9d6cff; opacity: 0; pointer-events: none; animation: arenaFlipLabel 900ms ease-out both; }
    .arena-flip-flare b { transform: translateY(-220%); }
    @keyframes arenaDeployToken { 0% { opacity: 0; transform: translateY(-24%) scale(1.45); filter: brightness(2.2); } 58% { opacity: 1; transform: translateY(3%) scale(0.9); filter: brightness(1.5); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); } }
    @keyframes arenaDeployRing { 0% { opacity: 0; transform: scale(0.28); } 38% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
    @keyframes arenaFlipToken { 0% { opacity: 1; transform: scale(1); filter: brightness(1); } 42% { opacity: 1; transform: scale(1.16); filter: brightness(2.8); } 54% { opacity: 1; transform: scale(1.22); filter: brightness(3.5); } 74% { opacity: 1; transform: scale(1.07); filter: brightness(1.65); } 100% { opacity: 1; transform: scale(1); filter: brightness(1); } }
    @keyframes arenaFlipFrontSwap { 0%, 40% { opacity: 1; } 56%, 100% { opacity: 0; } }
    @keyframes arenaFlipBackSwap { 0%, 42% { opacity: 0; } 58%, 100% { opacity: 1; } }
    @keyframes arenaFlipBurst { 0%, 18% { opacity: 0; transform: scale(0.18); } 44% { opacity: 1; transform: scale(0.82); } 72% { opacity: 0.62; transform: scale(1.22); } 100% { opacity: 0; transform: scale(1.54); } }
    @keyframes arenaFlipShockwave { 0%, 30% { opacity: 0; transform: scale(0.28) rotate(0deg); } 46% { opacity: 1; } 100% { opacity: 0; transform: scale(1.72) rotate(36deg); } }
    @keyframes arenaFlipLabel { 0%, 42% { opacity: 0; transform: scale(0.72); } 55% { opacity: 1; transform: scale(1.08); } 82% { opacity: 0.86; } 100% { opacity: 0; transform: scale(1.26); } }
    @media (prefers-reduced-motion: reduce) {
        .arena-board-cell.is-deploying .arena-board-token,
        .arena-board-cell.is-flipping .arena-board-token,
        .arena-board-cell.is-flipping .arena-board-token-face.is-front,
        .arena-board-cell.is-flipping .arena-board-token-face.is-back,
        .arena-board-cell.is-deploying::before,
        .arena-board-cell.is-flipping::before,
        .arena-board-cell.is-flipping::after,
        .arena-flip-flare,
        .arena-block-stamp-wrap,
        .arena-win-mark.is-new,
        .arena-win-track.is-completing .arena-win-mark.is-earned,
        .arena-win-track.is-awarding .arena-win-aura { animation-duration: 1ms; animation-delay: 0ms; }
        .arena-win-mark-stars::before,
        .arena-win-mark-stars::after { animation: none; opacity: 0.7; }
        .arena-block-stamp-wrap { transition-duration: 1ms; }
    }
    .arena-line-cell-confirm { position: relative; z-index: 6; grid-area: 1 / 1; width: var(--arena-stamp-size); left: var(--arena-stamp-left); top: var(--arena-stamp-top); aspect-ratio: 1; border: 2px solid rgba(255, 240, 157, 0.96); border-radius: 50%; box-shadow: 0 0 12px #fff8c7, 0 0 28px rgba(255, 211, 70, 0.92), inset 0 0 18px rgba(255, 245, 186, 0.5); pointer-events: none; animation: arenaLineCellConfirm 0.58s ease-in-out infinite alternate; }
    .arena-board-cell.is-line-victory .arena-line-cell-confirm { opacity: 0.78; transform: scale(1); animation: none; box-shadow: 0 0 8px #fff8c7, 0 0 18px rgba(255, 211, 70, 0.72); }
    .arena-board-cell.is-line-victory .arena-board-token { animation: arenaLineOwnerFade 0.52s ease forwards; }
    .arena-line-cell-victory { position: relative; z-index: 7; grid-area: 1 / 1; width: var(--arena-stamp-size); left: var(--arena-stamp-left); top: var(--arena-stamp-top); aspect-ratio: 1; display: grid; place-items: center; pointer-events: none; opacity: 0; animation: arenaLineCellVictoryIn 0.72s cubic-bezier(0.16, 0.82, 0.2, 1) 0.08s forwards; }
    .arena-line-cell-victory::before { content: ''; position: absolute; z-index: 0; inset: -22%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.88) 0 6%, rgba(255,238,145,0.58) 19%, rgba(255,195,32,0.22) 40%, transparent 68%); filter: blur(1px); animation: arenaLineCellAura 0.68s ease-out both; }
    .arena-line-cell-victory::after { content: ''; position: absolute; z-index: 1; inset: -10%; border: 1px solid rgba(255, 243, 169, 0.72); border-radius: 50%; box-shadow: 0 0 7px #fff9c7, 0 0 15px rgba(255, 201, 42, 0.68); animation: arenaLineCellRing 0.72s ease-out 0.08s both; }
    .arena-line-cell-victory-stamp { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; filter: brightness(1.08) drop-shadow(0 0 5px #fff9c7) drop-shadow(0 0 10px rgba(255, 191, 28, 0.78)); }
    .arena-hand-zone { margin-top: 14px; padding: 12px; border: 1px solid rgba(186, 171, 255, 0.32); border-radius: 14px; background: rgba(12, 9, 21, 0.9); }
    .arena-hand-head { display: flex; align-items: center; justify-content: center; min-height: 30px; margin-bottom: 10px; color: #dcd5ff; font-size: 13px; font-weight: 900; text-align: center; }
    .arena-hand-tabs { display: flex; gap: 6px; }
    .arena-hand-tab { min-width: 64px; min-height: 30px; border: 1px solid rgba(186, 171, 255, 0.34); border-radius: 999px; background: rgba(29, 23, 48, 0.88); color: #c9c0e8; font-family: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
    .arena-hand-tab.is-active { background: linear-gradient(180deg, #eee9ff, #b9a6f2); color: #171026; border-color: #eee9ff; }
    .arena-hand-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 10px; }
    .arena-hand-placeholder { display: block; width: 100%; aspect-ratio: 360 / 500; visibility: hidden; }
    .arena-hand-grid.is-revealing .arena-card-btn { opacity: 0; animation: arenaHandCardReveal 0.48s ease forwards; }
    .arena-hand-grid.is-revealing .arena-card-btn:nth-child(2) { animation-delay: 0.06s; }
    .arena-hand-grid.is-revealing .arena-card-btn:nth-child(3) { animation-delay: 0.12s; }
    .arena-hand-grid.is-revealing .arena-card-btn:nth-child(4) { animation-delay: 0.18s; }
    .arena-hand-grid.is-revealing .arena-card-btn:nth-child(5) { animation-delay: 0.24s; }
    .arena-card-btn { position: relative; display: block; min-width: 0; width: 100%; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #efeaff; font-family: inherit; font-size: 10px; font-weight: 900; cursor: pointer; transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease; }
    .arena-card-btn:not(:disabled):hover,
    .arena-card-btn.is-selected { transform: translateY(-7px); filter: drop-shadow(0 0 7px rgba(255,255,255,0.82)) drop-shadow(0 0 18px rgba(167,99,255,0.82)); }
    .arena-card-btn.is-selected::after { content: ''; position: absolute; inset: 2%; border: 2px solid rgba(255, 239, 178, 0.92); border-radius: 8px; box-shadow: 0 0 14px rgba(255, 219, 103, 0.86), inset 0 0 12px rgba(255,255,255,0.38); pointer-events: none; }
    .arena-card-btn:disabled { cursor: default; }
    .arena-card-btn.is-used { opacity: 0.28; filter: grayscale(0.72) brightness(0.7); }
    .arena-card-frame { position: relative; display: block; width: 100%; aspect-ratio: 360 / 500; overflow: hidden; background: var(--arena-card-frame, url('boardgame/arena/card/thief.webp')) center/100% 100% no-repeat; }
    .arena-card-portrait { position: absolute; left: 10.5%; top: 19.5%; width: 79%; height: 58%; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }
    .arena-card-portrait img { width: 86%; height: 86%; object-fit: contain; filter: none; }
    .arena-card-info { position: absolute; z-index: 2; left: 9%; right: 9%; bottom: 10%; min-height: 17%; display: flex; align-items: center; justify-content: center; color: #f7efff; line-height: 1.05; text-shadow: 0 1px 2px #150524, 0 0 7px rgba(210, 167, 255, 0.82); pointer-events: none; }
    .arena-card-code, .arena-card-name { display: block; letter-spacing: 0; }
    .arena-card-code { color: #fff8ff; font-size: clamp(10px, 1.35vw, 17px); }
    .arena-card-name { position: absolute; z-index: 3; left: 12%; right: 12%; top: 10%; height: 10.5%; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #f2e9ff; font-size: clamp(7px, 0.78vw, 9px); line-height: 1.05; text-align: center; text-shadow: 0 1px 2px #150524, 0 0 8px rgba(210, 167, 255, 0.9); white-space: nowrap; pointer-events: none; }
    .arena-card-name > span { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .arena-status-line { min-height: 1.45em; margin-top: 10px; color: #dcd5ff; font-size: 12px; font-weight: 900; line-height: 1.45; text-align: center; }
    .arena-field-controls { position: absolute; z-index: 9; left: 50%; bottom: 6%; width: min(42%, 210px); display: flex; justify-content: center; transform: translateX(-50%); }
    .arena-nav-actions { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
    .arena-field-state-btn { min-width: 88px; min-height: 32px; padding: 0 12px; border: 1px solid rgba(207, 183, 255, 0.46); border-radius: 999px; background: rgba(12, 7, 23, 0.9); color: #e8deff; font-family: inherit; font-size: 10px; font-weight: 900; line-height: 1; text-shadow: 0 0 8px rgba(195, 140, 255, 0.72); box-shadow: inset 0 0 10px rgba(158, 92, 255, 0.12); white-space: nowrap; }
    .arena-field-state-btn:disabled { opacity: 1; cursor: default; }
    .arena-field-state-btn.is-action { border-color: rgba(245, 234, 194, 0.6); background: rgba(35, 28, 18, 0.94); color: #f5eac2; cursor: pointer; box-shadow: 0 0 14px rgba(245, 234, 194, 0.18); }
    .arena-field-state-btn.is-retry { border-color: rgba(220, 203, 255, 0.68); background: rgba(28, 20, 46, 0.94); color: #eee7ff; box-shadow: 0 0 16px rgba(177, 120, 255, 0.22); }
    .arena-line-banner { position: absolute; z-index: 10; left: 50%; top: 45%; width: min(420px, 76%); aspect-ratio: 2 / 1; display: grid; place-items: center; opacity: 0; transform: translate(-50%, -50%) scale(0.58); pointer-events: none; animation: arenaLineBannerShow 1.25s cubic-bezier(0.16, 0.82, 0.2, 1) both; }
    .arena-line-banner::before { content: ''; position: absolute; z-index: 0; inset: 8% -8%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,0.9) 0 8%, rgba(255,226,92,0.54) 25%, rgba(255,183,24,0.18) 48%, transparent 72%); filter: blur(2px); animation: arenaLineBannerFlash 0.74s ease-out both; }
    .arena-line-banner img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(1.08) drop-shadow(0 0 7px #fff8be) drop-shadow(0 0 14px rgba(255,194,35,0.78)); }
    .arena-first-overlay { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; background: rgba(5, 3, 12, 0.12); opacity: 1; pointer-events: none; }
    .arena-first-overlay.is-leaving { animation: arenaFirstOverlayOut 0.48s ease forwards; }
    .arena-first-notice { position: relative; isolation: isolate; width: 450px; aspect-ratio: 3 / 2; padding: 0; display: grid; place-items: center; align-content: center; box-sizing: border-box; color: #f4efff; text-align: center; font-size: 38px; font-weight: 900; line-height: 1.55; text-shadow: 0 0 35px rgba(190, 170, 255, 0.78); filter: drop-shadow(0 0 30px rgba(149, 100, 255, 0.38)); animation: arenaFirstNoticeIn 0.42s ease both; }
    .arena-first-notice::before { content: ''; position: absolute; z-index: 0; left: 50%; top: 50%; width: 50%; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); clip-path: polygon(5% 0, 95% 0, 100% 8%, 100% 92%, 95% 100%, 5% 100%, 0 92%, 0 8%); background: rgba(9, 6, 18, 0.9); box-shadow: inset 0 0 40px rgba(190, 170, 255, 0.1); }
    .arena-first-notice::after { content: ''; position: absolute; z-index: 1; inset: 0; background: url('boardgame/arena/notice.webp') center/100% 100% no-repeat; pointer-events: none; }
    .arena-first-notice span { position: relative; z-index: 2; display: grid; place-items: center; gap: 6px; font-family: 'Oxanium', var(--main-font); line-height: 1.25; }
    .arena-first-notice strong { font-size: 40px; font-weight: 800; }
    .arena-first-notice small { font-size: 25px; font-weight: 700; white-space: nowrap; }
    .arena-result-overlay { position: absolute; z-index: 12; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at center, rgba(var(--arena-result-rgb), 0.16), rgba(4, 2, 10, 0.46) 56%, rgba(4, 2, 10, 0.18)); pointer-events: none; opacity: 0; animation: arenaResultOverlayIn 0.58s ease 0.08s forwards; }
    .arena-result-panel { position: relative; isolation: isolate; width: min(405px, 59.4%); aspect-ratio: 3 / 2; display: grid; place-items: center; filter: drop-shadow(0 0 18px rgba(var(--arena-result-rgb), 0.72)) drop-shadow(0 0 40px rgba(var(--arena-result-rgb), 0.34)); opacity: 0; transform: scale(0.82); animation: arenaResultPanelIn 0.72s cubic-bezier(0.16, 0.82, 0.2, 1) 0.12s forwards; }
    .arena-result-backdrop { position: absolute; z-index: 0; inset: 18% 19%; clip-path: polygon(8% 0, 92% 0, 100% 12%, 100% 88%, 92% 100%, 8% 100%, 0 88%, 0 12%); background: rgba(7, 5, 14, 0.92); box-shadow: inset 0 0 32px rgba(var(--arena-result-rgb), 0.2); }
    .arena-result-panel img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; }
    .arena-result-panel strong { position: relative; z-index: 2; color: #fff; font-family: 'Oxanium', var(--main-font); font-size: 60px; font-weight: 800; line-height: 1; text-shadow: 0 0 8px #fff, 0 0 20px var(--arena-result-color), 0 2px 4px rgba(0, 0, 0, 0.92); }
    .arena-result-overlay.is-lose .arena-result-panel strong { color: #e8ecf3; }
    .arena-result-overlay.is-draw .arena-result-panel strong { color: #f1ecff; }
    @keyframes arenaVsFade { 0%, 8% { opacity: 0; } 18%, 76% { opacity: 1; } 100% { opacity: 0; } }
    @keyframes arenaVsTeamCrash { 0% { opacity: 0; transform: translateX(var(--arena-vs-entry)) scale(0.28) rotate(var(--arena-vs-spin)); filter: brightness(2.4) blur(5px); } 42% { opacity: 1; transform: translateX(var(--arena-vs-hit)) scale(1.3) rotate(0); filter: brightness(1.75) blur(0); } 60% { transform: translateX(var(--arena-vs-recoil)) scale(0.9); filter: brightness(1.05); } 78% { transform: translateX(var(--arena-vs-settle)) scale(1.08); } 100% { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1); } }
    @keyframes arenaVsStampSparks { 0%, 24% { opacity: 0; transform: translate(-50%, -54%) scale(0.15) rotate(-25deg); } 45% { opacity: 0.95; } 100% { opacity: 0; transform: translate(-50%, -54%) scale(1.65) rotate(18deg); } }
    @keyframes arenaVsLabelReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes arenaVsMarkImpact { 0% { opacity: 0; transform: scale(0.08) rotate(-18deg); filter: brightness(3) blur(5px); } 24% { opacity: 0; } 43% { opacity: 1; transform: scale(1.42) rotate(5deg); filter: brightness(2.6) blur(0) drop-shadow(0 0 34px #fff); } 55% { transform: translateX(-5px) scale(0.9) rotate(-3deg); } 64% { transform: translateX(5px) scale(1.12) rotate(2deg); } 73% { transform: translateX(-3px) scale(0.97) rotate(-1deg); } 100% { opacity: 1; transform: translateX(0) scale(1) rotate(0); filter: brightness(1) drop-shadow(0 0 20px rgba(236, 217, 255, 0.62)); } }
    @keyframes arenaVsImpactRays { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.08) rotate(8deg); } 22% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45) rotate(34deg); } }
    @keyframes arenaVsImpactRing { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.12); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.65); border-width: 1px; } }
    @keyframes arenaVsImpactCore { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.1); } 28% { opacity: 1; transform: translate(-50%, -50%) scale(1.65); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.1); } }
    @keyframes arenaLineCellConfirm { from { opacity: 0.62; transform: scale(0.88); } to { opacity: 1; transform: scale(1.08); } }
    @keyframes arenaLineOwnerFade { from { opacity: 1; filter: brightness(1); } to { opacity: 0.08; filter: brightness(2.2) blur(3px); } }
    @keyframes arenaLineCellVictoryIn { 0% { opacity: 0; transform: scale(0.54) rotate(-8deg); filter: brightness(2.8) blur(4px); } 62% { opacity: 1; transform: scale(1.12) rotate(2deg); filter: brightness(1.5) blur(0); } 100% { opacity: 1; transform: scale(1) rotate(0); filter: brightness(1); } }
    @keyframes arenaLineCellAura { from { opacity: 0.3; transform: scale(0.88); } to { opacity: 0.72; transform: scale(1.04); } }
    @keyframes arenaLineCellRing { 0% { opacity: 0; transform: scale(0.5); } 45% { opacity: 0.82; } 100% { opacity: 0.28; transform: scale(1.22); } }
    @keyframes arenaFirstNoticeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
    @keyframes arenaFirstOverlayOut { from { opacity: 1; } to { opacity: 0; } }
    @keyframes arenaResultOverlayIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes arenaResultPanelIn { 0% { opacity: 0; transform: scale(0.82); } 68% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
    @keyframes arenaHandCardReveal { from { opacity: 0; } to { opacity: 1; } }
    @keyframes arenaLineBannerShow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.58); filter: brightness(2.8) blur(4px); } 24% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); filter: brightness(1.55) blur(0); } 42%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: brightness(1.05); } 100% { opacity: 0; transform: translate(-50%, -54%) scale(1.04); filter: brightness(1.45) blur(1px); } }
    @keyframes arenaLineBannerFlash { 0% { opacity: 0; transform: scale(0.35); } 36% { opacity: 1; transform: scale(1.08); } 100% { opacity: 0.18; transform: scale(1.32); } }
    @keyframes arenaWinMarkEarned { 0% { opacity: 0; transform: scale(0.35) rotate(-12deg); filter: brightness(3) blur(3px); } 48% { opacity: 1; transform: scale(1.2) rotate(3deg); filter: brightness(2.1) blur(0) drop-shadow(0 0 16px rgba(var(--arena-win-rgb), 0.96)); } 100% { opacity: 1; transform: scale(1) rotate(0); filter: brightness(1.14) drop-shadow(0 0 5px rgba(var(--arena-win-rgb), 0.88)) drop-shadow(0 0 11px rgba(var(--arena-win-rgb), 0.46)); } }
    @keyframes arenaWinMarksComplete { 0% { filter: brightness(1.14) drop-shadow(0 0 5px rgba(var(--arena-win-rgb), 0.88)); } 48% { filter: brightness(2.25) drop-shadow(0 0 13px #fff) drop-shadow(0 0 23px rgba(var(--arena-win-rgb), 0.94)); } 100% { filter: brightness(1.2) drop-shadow(0 0 6px rgba(var(--arena-win-rgb), 0.9)) drop-shadow(0 0 13px rgba(var(--arena-win-rgb), 0.52)); } }
    @keyframes arenaWinAuraBurst { 0% { opacity: 0; transform: scale(0.42); filter: blur(8px); } 42% { opacity: 0.82; transform: scale(1.16); filter: blur(3px); } 100% { opacity: 0; transform: scale(1.28); filter: blur(7px); } }
    @keyframes arenaWinAuraComplete { 0% { opacity: 0; transform: scale(0.42); filter: blur(8px); } 42% { opacity: 0.94; transform: scale(1.22); filter: blur(3px); } 100% { opacity: 0.28; transform: scale(1); filter: blur(5px); } }
    @keyframes arenaWinStarsFall { 0% { opacity: 0; transform: translateY(-6%) scale(0.72) rotate(-4deg); } 16% { opacity: 0.92; } 78% { opacity: 0.72; } 100% { opacity: 0; transform: translateY(88%) scale(1.02) rotate(5deg); } }
    @keyframes arenaFirstPulse { 0% { opacity: 0; transform: translateY(8px) scale(0.96); } 28%, 82% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-6px) scale(1.02); } }
    @media (max-width: 620px) {
        #boardgame-arena-section .arena-rule-chips {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        #boardgame-arena-section .arena-job-grid {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }
        #boardgame-arena-section .arena-job-chip {
            grid-column: span 2;
        }
        #boardgame-arena-section .arena-job-chip:nth-child(4) {
            grid-column: 2 / span 2;
        }
        #boardgame-arena-section .arena-job-chip:nth-child(5) {
            grid-column: 4 / span 2;
        }
        #boardgame-arena-section .arena-job-chip {
            min-height: 88px;
            padding: 8px 4px;
        }
        #boardgame-arena-section .arena-job-chip img {
            width: 52px;
            height: 52px;
        }
        #boardgame-arena-section .arena-line-showcase {
            grid-template-columns: 1fr;
            gap: 10px;
            padding: 12px 10px;
        }
        #boardgame-arena-section .arena-line-victory-mark {
            width: 68px;
            height: 68px;
            margin: 0 auto;
        }
        #boardgame-arena-section .arena-line-content strong {
            text-align: center;
        }
        #boardgame-arena-section .arena-visual-grid {
            grid-template-columns: 1fr;
        }
        #boardgame-arena-section .arena-mode-head {
            padding-top: 32px;
        }
        #boardgame-arena-section .arena-mode-light-control {
            top: 0;
            right: 0;
        }
        #boardgame-arena-section .arena-entry-badge {
            top: 10px;
            right: 10px;
            min-width: 0;
            width: auto;
            max-width: none;
            height: 24px;
            padding: 0 6px;
            font-size: 7px;
            letter-spacing: 0;
        }
        #boardgame-arena-section .arena-light-toggle {
            height: 25px;
            gap: 4px;
            padding: 0 7px;
        }
        #boardgame-arena-section .arena-light-toggle-track {
            width: 25px;
            height: 14px;
        }
        #boardgame-arena-section .arena-light-toggle-track::after {
            width: 8px;
            height: 8px;
        }
        #boardgame-arena-section .arena-light-toggle input:checked + .arena-light-toggle-track::after {
            transform: translateX(11px);
        }
        #boardgame-arena-play-section { width: calc(100% + 52px); margin-top: 4px !important; margin-left: -26px; }
        .arena-play-shell { width: 100%; min-width: 0; box-sizing: border-box; padding: 5px; border-radius: 14px; }
        .arena-play-head { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px; min-height: 32px; margin-bottom: 3px; }
        .arena-play-title { font-size: 17px; }
        .arena-play-sub { font-size: 9px; }
        .arena-play-sub.is-player, .arena-play-sub.is-com { width: 106px; }
        .arena-play-sub span { margin-left: 21px; }
        .arena-turn-marker { width: 18px; height: 16px; }
        .arena-music-btn { min-width: 66px; height: 28px; padding: 0 7px; gap: 3px; font-size: 8px; }
        .arena-music-note { font-size: 11px; }
        .arena-music-state { min-width: 14px; font-size: 7px; }
        .arena-volume-panel { width: 148px; padding: 8px 9px; }
        .arena-win-track { top: 15%; width: 18.5%; height: 53%; }
        .arena-win-track.is-player { left: 0.8%; }
        .arena-win-track.is-com { right: 0.8%; }
        .arena-first-notice { width: min(450px, 88%); }
        .arena-first-notice span { gap: 5px; }
        .arena-first-notice strong { font-size: 25px; }
        .arena-first-notice small { font-size: 16px; }
        .arena-result-panel strong { font-size: 32px; }
        .arena-team-select, .arena-sequence-stage { width: 100%; min-height: 0; aspect-ratio: 5 / 4; box-sizing: border-box; padding: 12px; border-radius: 12px; }
        .arena-team-select { gap: 10px; }
        .arena-team-title { font-size: 15px; }
        .arena-team-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
        .arena-team-card { grid-column: span 2; min-height: 86px; padding: 6px 3px; font-size: 11px; }
        .arena-team-card:nth-child(4) { grid-column: 2 / span 2; }
        .arena-team-card:nth-child(5) { grid-column: 4 / span 2; }
        .arena-team-card img { width: 44px; height: 44px; margin-bottom: 4px; }
        .arena-vs-panel { height: 100%; min-height: 0; grid-template-columns: 1fr 82px 1fr; gap: 8px; }
        .arena-vs-team img { width: 72px; height: 72px; }
        .arena-vs-mark-wrap, .arena-vs-mark { width: 82px; }
        .arena-vs-stamp-sparks { width: 94px; }
        .arena-vs-impact-rays { width: 152px; }
        .arena-vs-impact-ring { width: 58px; }
        .arena-vs-impact-core { width: 48px; }
        .arena-field-stage { width: 100%; min-width: 0; aspect-ratio: 5 / 4; border-radius: 12px; }
        .arena-field-controls { width: min(30%, 120px); }
        .arena-field-state-btn { min-width: 64px; min-height: 22px; padding: 0 8px; font-size: 8px; }
        .arena-hand-zone { min-width: 0; margin-top: 8px; padding: 7px 5px; }
        .arena-hand-head { align-items: center; justify-content: center; min-height: 24px; margin-bottom: 5px; }
        .arena-hand-grid { width: 100%; min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; overflow: visible; padding: 3px 0 4px; scroll-snap-type: none; }
        .arena-card-btn { min-width: 0; scroll-snap-align: none; }
        .arena-status-line { margin-top: 6px; font-size: 9px; }
    }
    #boardgame-ritual-section .ritual-mode-shell {
        background:
            radial-gradient(circle at 50% 0%, rgba(255, 160, 58, 0.16), transparent 46%),
            linear-gradient(180deg, rgba(30, 18, 10, 0.96), rgba(9, 8, 7, 0.98));
        border: 1px solid rgba(229, 114, 30, 0.46);
        box-shadow: 0 18px 48px rgba(53, 22, 5, 0.34);
    }
    #boardgame-ritual-section .ritual-mode-head {
        text-align: center;
        margin-bottom: 20px;
    }
    #boardgame-ritual-section .ritual-mode-head h2 {
        margin-top: 0;
        color: #ff8a2a;
        text-shadow: 0 0 18px rgba(255, 122, 32, 0.42);
    }
    #boardgame-ritual-section .ritual-mode-head p {
        color: #f2d6bd;
        font-size: 14px;
        line-height: 1.55;
    }
    #boardgame-ritual-section .ritual-start-grid {
        max-width: 280px;
        margin: 0 auto 18px;
    }
    #boardgame-ritual-section .ritual-start-card {
        background: linear-gradient(180deg, rgba(35, 18, 8, 0.94), rgba(14, 10, 8, 0.96));
        border: 2px solid rgba(255, 124, 31, 0.78);
        box-shadow: inset 0 0 24px rgba(255, 124, 31, 0.15), 0 12px 28px rgba(0, 0, 0, 0.30);
    }
    #boardgame-ritual-section .ritual-start-card:hover {
        border-color: #ffad57;
        box-shadow: inset 0 0 26px rgba(255, 160, 68, 0.22), 0 14px 30px rgba(0, 0, 0, 0.34);
    }
    #boardgame-ritual-section .ritual-start-card .icon-img-wrapper {
        width: 112px;
        height: 112px;
        min-height: 112px;
        margin: 0 auto 10px;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }
    #boardgame-ritual-section .ritual-start-card .category-icon-img {
        width: 112px;
        height: 112px;
        object-fit: contain;
        filter: drop-shadow(0 0 18px rgba(255, 125, 30, 0.32));
    }
    #boardgame-ritual-section .ritual-start-card .name {
        color: #ffc18a;
    }
    #boardgame-ritual-section .ritual-howto-card {
        position: relative;
        background: var(--boardgame-guide-card-bg);
        border-color: rgba(229, 114, 30, 0.38);
        color: #f4ddca;
    }
    #boardgame-ritual-section .ritual-howto-card > strong,
    #boardgame-ritual-section .ritual-howto-section h3 {
        color: #ff9a42;
    }
    #boardgame-ritual-section .ritual-entry-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 74px;
        height: 34px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid rgba(255, 130, 43, 0.58);
        background: linear-gradient(135deg, rgba(94, 39, 9, 0.84), rgba(33, 17, 11, 0.9));
        color: #ffd6aa;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.03em;
        box-shadow: 0 8px 18px rgba(47, 18, 5, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        pointer-events: none;
        white-space: nowrap;
        text-shadow: 0 1px 8px rgba(255, 154, 66, 0.4);
    }
    #boardgame-ritual-section .ritual-howto-lead {
        margin: 14px auto 16px;
        max-width: 600px;
        color: #f8e0ca;
        font-size: 14px;
        line-height: 1.65;
        text-align: center;
    }
    #boardgame-ritual-section .ritual-rule-chips {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin: 14px 0;
    }
    #boardgame-ritual-section .ritual-rule-chip {
        padding: 8px 6px;
        border-radius: 999px;
        border: 1px solid rgba(255, 132, 35, 0.36);
        background: rgba(255, 107, 24, 0.12);
        color: #ffc18a;
        font-size: 12px;
        font-weight: 900;
        text-align: center;
    }
    #boardgame-ritual-section .ritual-role-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin: 14px 0;
    }
    #boardgame-ritual-section .ritual-role-card {
        padding: 14px;
        border-radius: 16px;
        border: 1px solid rgba(255, 142, 49, 0.28);
        background: rgba(255, 255, 255, 0.045);
        text-align: center;
    }
    #boardgame-ritual-section .ritual-role-card img {
        width: 74px;
        height: 74px;
        object-fit: contain;
        margin-bottom: 8px;
        filter: drop-shadow(0 0 16px rgba(255, 124, 31, 0.22));
    }
    #boardgame-ritual-section .ritual-role-card strong {
        display: block;
        color: #ffd0a3;
        font-size: 13px;
        line-height: 1.35;
    }
    #boardgame-ritual-section .ritual-role-card span {
        display: block;
        margin-top: 5px;
        color: #d7b79a;
        font-size: 11px;
        line-height: 1.35;
    }
    #boardgame-ritual-section .ritual-howto-section {
        margin-top: 16px;
        padding: 14px 16px;
        border-radius: 14px;
        border: 1px solid rgba(255, 132, 35, 0.22);
        background: rgba(255, 255, 255, 0.035);
    }
    #boardgame-ritual-section .ritual-howto-section h3 {
        margin: 0 0 10px;
        font-size: 14px;
        letter-spacing: 0.04em;
        text-align: center;
    }
    #boardgame-ritual-section .ritual-howto-section ul {
        margin: 0;
        padding-left: 20px;
        text-align: left;
        color: #f4ddca;
        font-size: 13px;
        line-height: 1.7;
    }
    @media (max-width: 520px) {
        #boardgame-ritual-section .ritual-rule-chips {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        #boardgame-ritual-section .ritual-role-grid {
            grid-template-columns: 1fr;
        }
        #boardgame-ritual-section .ritual-entry-badge {
            top: 10px;
            right: 10px;
            min-width: 54px;
            height: 24px;
            padding: 0 8px;
            font-size: 7px;
            letter-spacing: 0.01em;
        }
    }
    #boardgame-ritual-play-section {
        color: #ffe7c6;
    }
    .ritual-game-shell {
        max-width: 940px;
        margin: 0 auto;
        padding: 24px;
        border-radius: 18px;
        border: 1px solid rgba(255, 120, 28, 0.42);
        background:
            radial-gradient(circle at 50% 12%, rgba(255, 141, 28, 0.16), transparent 42%),
            linear-gradient(180deg, rgba(26, 13, 8, 0.97), rgba(7, 7, 8, 0.99));
        box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38);
    }
    .ritual-game-head {
        position: relative;
        min-height: 42px;
        margin-bottom: 18px;
    }
    .ritual-game-title {
        margin: 0;
        color: #ff8a2a;
        font-size: 28px;
        text-align: center;
        text-shadow: 0 0 18px rgba(255, 118, 22, 0.42);
    }
    .ritual-music-control {
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 8;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        transform: translateY(-50%);
    }
    .ritual-music-btn {
        min-width: 104px;
        height: 42px;
        padding: 0 16px;
        border: 1px solid rgba(255, 141, 36, 0.48);
        border-radius: 999px;
        background: rgba(14, 9, 7, 0.9);
        color: #ffe0bd;
        font-family: inherit;
        font-size: 12px;
        font-weight: 900;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        box-shadow: inset 0 0 18px rgba(255, 120, 28, 0.08);
        transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
    }
    .ritual-music-btn:hover,
    .ritual-music-btn.is-active {
        border-color: rgba(255, 162, 62, 0.82);
        background: linear-gradient(135deg, rgba(255, 141, 36, 0.92), rgba(83, 28, 10, 0.95));
        color: #140805;
        box-shadow: 0 0 18px rgba(255, 116, 24, 0.36), inset 0 1px 0 rgba(255, 231, 194, 0.38);
    }
    .ritual-music-note {
        color: #ffad56;
        text-shadow: 0 0 10px rgba(255, 115, 18, 0.72);
    }
    .ritual-music-btn.is-active .ritual-music-note {
        color: #2a0b04;
        text-shadow: none;
    }
    .ritual-volume-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: 190px;
        padding: 11px 14px;
        border: 1px solid rgba(255, 141, 36, 0.34);
        border-radius: 14px;
        background: rgba(12, 8, 7, 0.94);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        transition: opacity 180ms ease, transform 180ms ease;
    }
    .ritual-music-control.is-open .ritual-volume-panel,
    .ritual-music-control:focus-within .ritual-volume-panel {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    .ritual-volume-panel label {
        display: block;
        margin-bottom: 7px;
        color: #ffe0bd;
        font-size: 10px;
        font-weight: 900;
        text-align: center;
    }
    .ritual-volume-slider {
        width: 100%;
        height: 22px;
        accent-color: #ff8a2a;
        touch-action: none;
    }
    .ritual-score-row {
        position: absolute;
        left: 11%;
        right: 11%;
        bottom: 7.5%;
        z-index: 2;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34%;
        align-items: center;
        pointer-events: none;
    }
    .ritual-score-stack {
        display: flex;
        gap: 7px;
        align-items: center;
        justify-content: flex-start;
    }
    .ritual-score-stack:first-child {
        transform: translateX(0);
    }

    .ritual-score-stack:last-child {
        justify-content: flex-end;
        transform: translateX(0);
    }
    .ritual-score-marker {
        width: 40px;
        height: 40px;
        object-fit: contain;
        opacity: 0.22;
        filter: grayscale(1);
        transition: opacity 240ms ease, filter 240ms ease, transform 240ms ease;
    }
    .ritual-score-marker.is-earned {
        opacity: 1;
        filter: drop-shadow(0 0 12px rgba(255, 133, 24, 0.55));
        transform: scale(1.08);
    }
    .ritual-status-bar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 14px;
    }
    .ritual-status-pill {
        min-height: 48px;
        padding: 8px 12px;
        border-radius: 14px;
        border: 1px solid rgba(255, 141, 36, 0.32);
        background: rgba(10, 8, 8, 0.78);
        color: #ffe2bf;
        font-size: 12px;
        font-weight: 900;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
    }
    .ritual-status-pill strong {
        color: #ff9a42;
        font-size: 16px;
    }
    .ritual-board {
        position: relative;
        overflow: hidden;
        width: min(620px, 100%);
        aspect-ratio: 1086 / 1536;
        margin: 18px auto 0;
        border-radius: 18px;
        border: 1px solid rgba(255, 115, 30, 0.34);
        background:
            linear-gradient(180deg, rgba(11, 8, 7, 0.08), rgba(0, 0, 0, 0.18)),
            url("boardgame/ritual/ritual background.webp") center / cover no-repeat;
    }
    .ritual-board::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(5, 4, 4, 0.18);
        pointer-events: none;
    }
    .ritual-board-inner {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
    }
    .ritual-role-select {
        margin: 18px auto;
        max-width: 760px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
    .ritual-role-choice {
        min-height: 280px;
        padding: 24px 20px;
        border-radius: 18px;
        border: 1px solid rgba(255, 126, 28, 0.42);
        background: rgba(12, 9, 8, 0.82);
        color: #ffe6c8;
        text-align: center;
        cursor: pointer;
        transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }
    .ritual-role-choice:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 168, 68, 0.78);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32), inset 0 0 26px rgba(255, 128, 28, 0.12);
    }
    .ritual-role-choice img {
        width: 112px;
        height: 112px;
        object-fit: contain;
        margin-bottom: 12px;
    }
    .ritual-role-choice h3 {
        margin: 0 0 10px;
        color: #ff9a42;
        font-size: 22px;
    }
    .ritual-role-choice.is-darkness h3 {
        color: #746d69;
        text-shadow: 0 0 12px rgba(54, 49, 47, 0.82), 0 0 22px rgba(255, 105, 25, 0.16);
    }
    .ritual-role-choice p {
        margin: 0;
        color: #f2d2b8;
        font-size: 14px;
        line-height: 1.6;
    }
    .ritual-count-area {
        --ritual-count-rotation: 15deg;
        position: absolute;
        left: 50%;
        top: 43.8%;
        width: 58%;
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
        display: grid;
        place-items: center;
    }
    .ritual-count-ring {
        position: absolute;
        inset: 1%;
        z-index: 0;
        border-radius: 50%;
        border: 2px solid rgba(255, 123, 31, 0.10);
        box-shadow: inset 0 0 32px rgba(255, 112, 24, 0.04), 0 0 30px rgba(255, 112, 24, 0.06);
        pointer-events: none;
    }
    .ritual-count-dot {
        --ritual-orbit-light: rgba(255, 203, 99, 1);
        --ritual-orbit-glow: rgba(255, 112, 24, 0.82);
        position: absolute;
        left: 50%;
        top: 55.5%;
        width: 32px;
        height: 32px;
        margin: -11px;
        border-radius: 50%;
        background: rgba(255, 125, 35, 0.16);
        border: 1px solid rgba(255, 167, 76, 0.36);
        transform: rotate(calc(var(--angle) + var(--ritual-count-rotation))) translateY(-165px);
        z-index: 2;
        transition: background 520ms ease, box-shadow 520ms ease, opacity 520ms ease, filter 520ms ease;
    }
    .ritual-count-dot::after {
        content: '';
        position: absolute;
        inset: -12px;
        border-radius: 50%;
        opacity: 0;
        background: radial-gradient(circle, var(--ritual-orbit-light) 0 8%, var(--ritual-orbit-glow) 28%, transparent 68%);
        filter: blur(3px);
        pointer-events: none;
    }
    .ritual-count-area.is-darkness .ritual-count-dot {
        --ritual-orbit-light: rgba(174, 166, 161, 0.94);
        --ritual-orbit-glow: rgba(75, 68, 65, 0.86);
    }
    .ritual-count-area.is-offering .ritual-count-dot {
        animation: ritualOuterCountGlow 700ms ease-in-out var(--spark-delay) both;
    }
    .ritual-count-area.is-offering .ritual-count-dot::after {
        animation: ritualOuterCountHalo 700ms ease-in-out var(--spark-delay) both;
    }
    @keyframes ritualOuterCountGlow {
        0%, 100% { filter: brightness(1); }
        42% { filter: brightness(2.15); box-shadow: 0 0 20px var(--ritual-orbit-light), 0 0 42px var(--ritual-orbit-glow); }
    }
    @keyframes ritualOuterCountHalo {
        0%, 100% { opacity: 0; transform: scale(0.72); }
        45% { opacity: 0.92; transform: scale(1.18); }
    }
    .ritual-count-dot.is-active {
        background: #ff8b2a;
        box-shadow: 0 0 16px rgba(255, 129, 32, 0.92), 0 0 34px rgba(255, 98, 21, 0.54);
    }
    .ritual-count-dot.is-entering {
        animation: ritualCountDotEnter 720ms cubic-bezier(0.2, 0.72, 0.28, 1) both;
    }
    .ritual-count-dot.is-leaving {
        animation: ritualCountDotLeave 720ms cubic-bezier(0.4, 0, 0.3, 1) both;
    }
    @keyframes ritualCountDotEnter {
        0% { opacity: 0.12; filter: brightness(0.55); box-shadow: 0 0 0 rgba(255, 129, 32, 0); }
        48% { opacity: 1; filter: brightness(1.85); box-shadow: 0 0 28px rgba(255, 184, 72, 1), 0 0 58px rgba(255, 91, 16, 0.74); }
        100% { opacity: 1; filter: brightness(1); }
    }
    @keyframes ritualCountDotLeave {
        0% { opacity: 1; filter: brightness(1.5); background: #ff8b2a; box-shadow: 0 0 22px rgba(255, 129, 32, 0.94); }
        45% { opacity: 0.48; filter: brightness(0.8); }
        100% { opacity: 1; filter: brightness(1); background: rgba(255, 125, 35, 0.16); box-shadow: none; }
    }
    .ritual-count-core {
        position: relative;
        z-index: 3;
        width: 148px;
        height: 148px;
        top: 5%;
        border-radius: 50%;
        border: 1px solid rgba(255, 140, 35, 0.46);
        background: radial-gradient(circle, rgba(255, 119, 28, 0.24), rgba(13, 10, 9, 0.86) 68%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        text-align: center;
        box-shadow: inset 0 0 34px rgba(255, 126, 24, 0.12), 0 0 26px rgba(0, 0, 0, 0.32);
    }
    .ritual-sigil {
        position: absolute;
        left: 36%;
        top: 45%;
        width: 100%;
        height: 100%;
        translate: -50% -50%;
        z-index: 0;
        display: grid;
        place-items: center;
        color: #ffae4a;
        font-size: 190px;
        line-height: 1;
        opacity: 0;
        transform: scale(1);
        text-shadow: 0 0 24px rgba(255, 177, 72, 0.62), 0 0 52px rgba(255, 103, 22, 0.34);
        pointer-events: none;
    }
    .ritual-sigil.is-darkness {
        color: #746d69;
        text-shadow: 0 0 18px rgba(73, 66, 62, 0.82), 0 0 46px rgba(20, 18, 17, 0.88);
    }
    .ritual-sigil.is-active {
        will-change: opacity, transform;
        animation: ritualSigilPulse 1500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    @keyframes ritualSigilPulse {
        0% { opacity: 0; transform: scale(0.94); }
        15% { opacity: 0.34; transform: scale(0.98); }
        30% { opacity: 0.8; transform: scale(1.02); }
        62% { opacity: 0.8; transform: scale(1.03); }
        80% { opacity: 0.32; transform: scale(1.06); }
        100% { opacity: 0; transform: scale(1.08); }
    }
    .ritual-count-core .ritual-count-number {
        position: relative;
        z-index: 1;
        color: #fff0c8;
        font-size: 52px;
        line-height: 1;
        text-shadow: 0 0 14px rgba(255, 143, 38, 0.6);
    }
    .ritual-count-core .ritual-count-number.is-count-up {
        animation: ritualCountNumberIn 720ms cubic-bezier(0.18, 0.74, 0.28, 1) both;
    }
    .ritual-count-core .ritual-count-number.is-count-down {
        animation: ritualCountNumberOut 720ms cubic-bezier(0.35, 0, 0.35, 1) both;
    }
    @keyframes ritualCountNumberIn {
        0% { opacity: 0; transform: translateY(9px); filter: brightness(0.7); }
        52% { opacity: 1; transform: translateY(-2px); filter: brightness(1.7); }
        100% { opacity: 1; transform: translateY(0); filter: brightness(1); }
    }
    @keyframes ritualCountNumberOut {
        0% { opacity: 0; transform: translateY(-8px); filter: brightness(0.65); }
        52% { opacity: 1; transform: translateY(2px); filter: brightness(1.25); }
        100% { opacity: 1; transform: translateY(0); filter: brightness(1); }
    }
    .ritual-count-core .ritual-count-label {
        position: relative;
        z-index: 1;
        color: #ff9a42;
        font-size: 12px;
        font-weight: 900;
    }
    .ritual-hand-card {
        position: relative;
        aspect-ratio: 360 / 500;
        border: 0;
        border-radius: 0;
        background: url("boardgame/ritual/card.webp") center / 100% 100% no-repeat;
        color: #fff2dc;
        text-align: center;
        overflow: visible;
    }
    .ritual-hand-card img {
        position: absolute;
        left: 50%;
        top: 47%;
        width: 68%;
        height: 49%;
        transform: translate(-50%, -50%);
        object-fit: contain;
        border-radius: 50%;
        background: transparent;
    }
    .ritual-card-name {
        position: absolute;
        left: 13%;
        top: 12%;
        width: 74%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(7px, 1.05vw, 9px);
        font-weight: 900;
        line-height: 1.1;
        color: #ffd7a3;
        text-shadow: 0 1px 3px #000;
    }
    .ritual-card-code {
        position: absolute;
        left: 13%;
        bottom: 13%;
        width: 74%;
        color: #ffb15f;
        font-size: clamp(10px, 1.35vw, 16px);
        font-weight: 900;
        line-height: 1;
        text-shadow: 0 1px 3px #000;
    }
    .ritual-action-banner {
        position: absolute;
        left: 9%;
        right: 9%;
        top: 6%;
        z-index: 2;
        box-sizing: border-box;
        height: 58px;
        min-height: 0;
        padding: 0 18px;
        border-radius: 16px;
        border: 1px solid rgba(255, 128, 28, 0.34);
        background: rgba(11, 8, 8, 0.82);
        color: #ffe2bd;
        font-size: 15px;
        font-weight: 900;
        line-height: 1.45;
        text-align: center;
        display: grid;
        place-items: center;
    }
    .ritual-action-banner.is-result {
        color: #ffb163;
        text-shadow: 0 0 12px rgba(255, 118, 24, 0.35);
    }
    .ritual-action-banner.ritual-role-banner {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        width: min(100%, 760px);
        margin: 8px auto 18px;
    }
    .ritual-final-gate {
        position: absolute;
        left: 50%;
        top: 44%;
        z-index: 4;
        width: min(82%, 640px);
        min-height: 272px;
        transform: translate(-50%, -50%);
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid rgba(255, 139, 42, 0.64);
        border-radius: 18px;
        background: rgba(10, 7, 7, 0.94);
        box-shadow: 0 0 0 1px rgba(255, 169, 77, 0.12) inset, 0 18px 46px rgba(0, 0, 0, 0.58);
        pointer-events: none;
        animation: ritualFinalGateEnter 480ms cubic-bezier(0.2, 0.82, 0.24, 1) both;
    }
    .ritual-final-gate-content {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 42px 46px;
        color: #ffe0bd;
        text-align: center;
        opacity: 0;
        transform: translateY(10px);
    }
    .ritual-final-gate.is-revealed .ritual-final-gate-content {
        animation: ritualFinalContentReveal 620ms ease 300ms both;
    }
    .ritual-final-gate-sigil {
        display: block;
        margin-bottom: 8px;
        color: #ff922f;
        font-size: clamp(54px, 7vw, 78px);
        font-weight: 900;
        line-height: 0.9;
        text-shadow: 0 0 12px rgba(255, 163, 60, 0.78), 0 0 34px rgba(255, 104, 18, 0.5);
    }
    .ritual-final-gate-result {
        display: block;
        margin-bottom: 24px;
        color: #ffdca5;
        font-size: clamp(22px, 3vw, 34px);
        font-weight: 900;
        letter-spacing: 0;
        line-height: 1.05;
        text-shadow: 0 0 14px rgba(255, 146, 47, 0.52);
    }
    .ritual-final-gate-title {
        display: block;
        margin-bottom: 20px;
        color: #ff922f;
        font-size: clamp(20px, 2.5vw, 29px);
        line-height: 1.1;
        text-shadow: 0 0 18px rgba(255, 117, 20, 0.48);
    }
    .ritual-final-gate p {
        margin: 0;
        font-size: clamp(12px, 1.9vw, 15px);
        font-weight: 900;
        line-height: 1.55;
    }
    .ritual-final-gate.is-darkness {
        border-color: rgba(125, 116, 111, 0.72);
        box-shadow: 0 0 0 1px rgba(160, 151, 145, 0.12) inset, 0 18px 46px rgba(0, 0, 0, 0.64);
    }
    .ritual-final-gate.is-revealed.is-lightness {
        animation: ritualFinalGateEnter 480ms cubic-bezier(0.2, 0.82, 0.24, 1) both,
            ritualFinalLightAura 3.2s ease-in-out 480ms infinite;
    }
    .ritual-final-gate.is-revealed.is-darkness {
        animation: ritualFinalGateEnter 480ms cubic-bezier(0.2, 0.82, 0.24, 1) both,
            ritualFinalDarkAura 3.2s ease-in-out 480ms infinite;
    }
    .ritual-final-gate.is-darkness .ritual-final-gate-sigil,
    .ritual-final-gate.is-darkness .ritual-final-gate-result,
    .ritual-final-gate.is-darkness .ritual-final-gate-title {
        color: #88807c;
        text-shadow: 0 0 18px rgba(91, 84, 81, 0.62);
    }
    .ritual-final-gate.is-draw .ritual-final-gate-sigil,
    .ritual-final-gate.is-draw .ritual-final-gate-result,
    .ritual-final-gate.is-draw .ritual-final-gate-title {
        color: #d7c4af;
        text-shadow: none;
    }
    .ritual-average-ceremony {
        position: absolute;
        left: 50%;
        bottom: calc(100% + clamp(34px, 7vw, 72px));
        z-index: 3;
        width: min(82%, 320px);
        min-height: 64px;
        transform: translateX(-50%);
        display: grid;
        place-items: center;
        overflow: visible;
        pointer-events: none;
        animation: ritualAverageBackdropIn 260ms ease both;
    }
    .ritual-average-chip-layer {
        position: absolute;
        inset: 0;
        overflow: hidden;
        border-radius: 14px;
    }
    .ritual-average-chip {
        position: absolute;
        left: 50%;
        top: 50%;
        display: grid;
        place-items: center;
        min-width: 34px;
        min-height: 28px;
        padding: 3px 7px;
        transform: translate(-50%, -50%) translateX(calc(var(--offset) * clamp(34px, 6vw, 46px)));
        border: 1px solid rgba(255, 158, 63, 0.62);
        border-radius: 999px;
        background: rgba(25, 14, 9, 0.94);
        color: #ffe0bd;
        box-shadow: 0 0 18px rgba(255, 124, 23, 0.2);
        font-size: 12px;
        font-weight: 900;
        opacity: 1;
        overflow: hidden;
        transform-origin: center;
        white-space: nowrap;
    }
    .ritual-average-ceremony.is-gathering .ritual-average-chip {
        animation: ritualAverageChipGather 920ms cubic-bezier(0.32, 0.02, 0.18, 1) var(--delay) forwards;
    }
    .ritual-average-result {
        display: grid;
        place-items: center;
        width: 100%;
        min-height: 64px;
        padding: 8px 20px;
        border: 1px solid rgba(255, 157, 61, 0.58);
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(38, 20, 11, 0.98), rgba(12, 8, 8, 0.96));
        color: #ffd8af;
        box-shadow: 0 0 0 1px rgba(255, 181, 99, 0.1) inset, 0 0 42px rgba(255, 123, 21, 0.34);
        opacity: 0;
        transform: scale(0.58);
    }
    .ritual-average-result span,
    .ritual-average-result small {
        font-size: 10px;
        font-weight: 900;
    }
    .ritual-average-result strong {
        color: #ff9a3d;
        font-size: clamp(28px, 4.2vw, 40px);
        line-height: 1;
        text-shadow: 0 0 24px rgba(255, 123, 23, 0.58);
    }
    .ritual-average-ceremony.is-average-revealed .ritual-average-result {
        animation: ritualAverageResultReveal 680ms cubic-bezier(0.18, 0.88, 0.25, 1.15) both;
    }
    .ritual-average-ceremony.is-final-kept {
        z-index: 3;
        animation: none;
    }
    .ritual-average-ceremony.is-final-kept .ritual-average-chip-layer {
        display: none;
    }
    .ritual-average-ceremony.is-final-kept .ritual-average-result {
        opacity: 1;
        transform: scale(1);
        animation: none;
    }
    .ritual-average-ceremony.is-final-kept .ritual-average-result strong {
        font-size: clamp(28px, 4.2vw, 40px);
    }
    @keyframes ritualFinalGateEnter {
        from { opacity: 0; transform: translate(-50%, -50%) scale(0.88); }
        to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    @keyframes ritualFinalContentReveal {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes ritualAverageBackdropIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes ritualAverageChipGather {
        0% {
            opacity: 1;
            clip-path: inset(0 0 0 0 round 999px);
            transform: translate(-50%, -50%) translateX(calc(var(--offset) * clamp(34px, 6vw, 46px))) scale(1);
        }
        68% {
            opacity: 1;
            clip-path: inset(0 28% 0 28% round 999px);
        }
        100% {
            opacity: 0.38;
            color: transparent;
            clip-path: inset(0 40% 0 40% round 999px);
            transform: translate(-50%, -50%) translate(calc(var(--offset) * 18px), 0) scaleX(0.42);
        }
    }
    @keyframes ritualAverageResultReveal {
        from { opacity: 0; transform: scale(0.58); }
        to { opacity: 1; transform: scale(1); }
    }
    @keyframes ritualFinalLightAura {
        0%, 100% {
            box-shadow: 0 0 0 1px rgba(255, 184, 89, 0.2) inset,
                0 0 24px rgba(255, 135, 28, 0.34), 0 0 54px rgba(255, 177, 63, 0.18),
                0 18px 46px rgba(0, 0, 0, 0.52);
        }
        50% {
            box-shadow: 0 0 0 1px rgba(255, 205, 129, 0.34) inset,
                0 0 38px rgba(255, 154, 39, 0.52), 0 0 78px rgba(255, 195, 92, 0.3),
                0 18px 46px rgba(0, 0, 0, 0.52);
        }
    }
    @keyframes ritualFinalDarkAura {
        0%, 100% {
            box-shadow: 0 0 0 1px rgba(130, 121, 129, 0.14) inset,
                0 0 28px rgba(26, 22, 31, 0.82), 0 0 58px rgba(69, 59, 78, 0.24),
                0 18px 50px rgba(0, 0, 0, 0.76);
        }
        50% {
            box-shadow: 0 0 0 1px rgba(159, 149, 158, 0.2) inset,
                0 0 42px rgba(8, 7, 11, 0.94), 0 0 82px rgba(82, 69, 91, 0.34),
                0 18px 54px rgba(0, 0, 0, 0.84);
        }
    }
    .ritual-hand-panel {
        margin-top: 16px;
        padding: 16px;
        border-radius: 16px;
        border: 1px solid rgba(255, 128, 28, 0.28);
        background: rgba(8, 7, 7, 0.76);
    }
    .ritual-hand-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
        color: #ffe2bf;
        font-size: 13px;
        font-weight: 900;
    }
    .ritual-hand-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
    }
    .ritual-hand-card {
        min-width: 0;
        width: 100%;
        padding: 0;
        cursor: pointer;
        transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
    }
    .ritual-hand-card:not(:disabled):hover,
    .ritual-hand-card.is-selected {
        transform: translateY(-2px);
        border-color: rgba(255, 169, 68, 0.78);
        box-shadow: 0 0 16px rgba(255, 120, 22, 0.25);
    }
    .ritual-hand-card:disabled,
    .ritual-hand-card.is-used {
        opacity: 0.34;
        cursor: default;
        filter: grayscale(0.65);
    }
    .ritual-control-row,
    .ritual-result-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 16px;
    }
    .ritual-btn {
        min-width: 150px;
        min-height: 44px;
        padding: 0 18px;
        border-radius: 999px;
        border: 1px solid rgba(255, 136, 35, 0.48);
        background: linear-gradient(180deg, #ff9d4d, #8e3516);
        color: #170d08;
        font-size: 13px;
        font-weight: 900;
        cursor: pointer;
    }
    .ritual-btn.secondary {
        background: rgba(13, 12, 14, 0.78);
        color: #ffe1c4;
    }
    .ritual-btn:disabled {
        opacity: 0.42;
        cursor: default;
    }
    .ritual-board-controls .ritual-result-actions .ritual-btn {
        width: 200px;
        min-width: 200px;
        height: 44px;
    }
    .ritual-count-history {
        position: absolute;
        left: 50%;
        bottom: calc(100% + clamp(34px, 7vw, 72px));
        width: min(82%, 320px);
        min-height: 42px;
        padding: 7px 12px;
        transform: translateX(-50%);
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
        align-items: center;
        margin: 0;
        border: 1px solid rgba(255, 138, 38, 0.30);
        border-radius: 14px;
        background: rgba(11, 8, 8, 0.78);
        text-align: center;
        box-sizing: border-box;
        pointer-events: none;
    }
    .ritual-count-history span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        min-height: 24px;
        padding: 3px 7px;
        border-radius: 999px;
        border: 1px solid rgba(255, 138, 38, 0.28);
        background: rgba(255, 128, 28, 0.10);
        color: #ffd7ae;
        font-size: 11px;
        font-weight: 900;
    }
    .ritual-board-controls {
        position: absolute;
        left: 50%;
        bottom: 7.2%;
        width: min(72%, 420px);
        transform: translateX(-50%);
        z-index: 2;
    }
    .ritual-board-controls .ritual-result-actions {
        margin-top: 8px;
    }
    .ritual-countdown-overlay {
        position: absolute;
        inset: 0;
        z-index: 5;
        display: grid;
        place-items: center;
        background: rgba(0, 0, 0, 0.42);
        backdrop-filter: blur(2px);
    }
    .ritual-countdown-card {
        width: min(420px, 82vw);
        padding: 24px;
        border-radius: 18px;
        border: 1px solid rgba(255, 142, 39, 0.56);
        background: rgba(12, 8, 7, 0.9);
        color: #ffe1bd;
        text-align: center;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    }
    .ritual-countdown-card strong {
        display: block;
        color: #ff9a42;
        font-size: 22px;
        margin-bottom: 8px;
    }
    .ritual-countdown-number {
        color: #fff0c8;
        font-size: 52px;
        line-height: 1;
        text-shadow: 0 0 18px rgba(255, 133, 30, 0.58);
    }
    @media (max-width: 720px) {
        .ritual-game-shell {
            padding: 14px;
        }
        .ritual-game-head {
            min-height: 34px;
            margin-bottom: 10px;
        }
        .ritual-score-row {
            left: 1%;
            right: 1%;
            bottom: 8%;
            gap: 28%;
        }
        .ritual-score-marker {
            width: 22px;
            height: 22px;
        }
        .ritual-game-title {
            font-size: 22px;
        }
        .ritual-music-control {
            right: 0;
        }
        .ritual-music-btn {
            min-width: 62px;
            height: 30px;
            padding: 0 8px;
            font-size: 8.5px;
            gap: 3px;
        }
        .ritual-music-text {
            display: none;
        }
        .ritual-volume-panel {
            width: 168px;
            top: calc(100% + 7px);
            right: 0;
            padding: 9px 11px;
        }
        .ritual-status-bar {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 5px;
            margin-bottom: 10px;
        }
        .ritual-status-pill {
            min-height: 42px;
            padding: 5px 3px;
            border-radius: 11px;
            font-size: 8px;
            line-height: 1.1;
            gap: 2px;
        }
        .ritual-status-pill strong {
            font-size: 10.5px;
            line-height: 1.12;
            word-break: keep-all;
        }
        .ritual-board-inner {
            padding: 0;
        }
        .ritual-role-select {
            grid-template-columns: 1fr;
            gap: 12px;
        }
        .ritual-role-choice {
            min-height: 220px;
            padding: 18px 14px;
        }
        .ritual-count-area {
            width: 58%;
            left: 50.6%;
            top: 44%;
        }
        .ritual-count-dot {
            width: 15px;
            height: 15px;
            margin: -8px;
            transform: rotate(calc(var(--angle) + var(--ritual-count-rotation))) translateY(-19.2vw);
        }
        .ritual-count-core {
            width: 88px;
            height: 88px;
        }
        .ritual-sigil {
            left: 40%;
            top: 45%;
            font-size: 110px;
        }
        .ritual-count-core .ritual-count-number {
            font-size: 30px;
        }
        .ritual-count-core .ritual-count-label {
            font-size: 9px;
        }
        .ritual-hand-card img {
            width: 68%;
            height: 49%;
        }
        .ritual-action-banner {
            left: 7%;
            right: 7%;
            top: 6%;
            height: 42px;
            min-height: 0;
            padding: 0 10px;
            border-radius: 12px;
            font-size: 11px;
        }
        .ritual-countdown-card {
            width: min(210px, 68vw);
            padding: 14px 16px;
            border-radius: 14px;
        }
        .ritual-countdown-card strong {
            font-size: 16px;
            margin-bottom: 5px;
        }
        .ritual-countdown-number {
            font-size: 38px;
        }
        .ritual-final-gate {
            top: 44%;
            width: 88%;
            min-height: 218px;
            border-radius: 14px;
        }
        .ritual-final-gate-content {
            padding: 28px 20px;
        }
        .ritual-final-gate-sigil {
            margin-bottom: 6px;
            font-size: 46px;
        }
        .ritual-final-gate-result {
            margin-bottom: 18px;
            font-size: 20px;
        }
        .ritual-final-gate-title {
            margin-bottom: 14px;
            font-size: 20px;
        }
        .ritual-final-gate p {
            font-size: 13px;
            line-height: 1.5;
        }
        .ritual-average-chip {
            min-width: 28px;
            min-height: 24px;
            padding: 3px 5px;
            font-size: 10px;
        }
        .ritual-average-result {
            min-height: 54px;
            padding: 6px 14px;
        }
        .ritual-average-result strong {
            font-size: 28px;
        }
        .ritual-average-ceremony.is-final-kept .ritual-average-result {
            min-height: 42px;
            padding: 4px 10px;
            border-radius: 11px;
        }
        .ritual-average-ceremony.is-final-kept .ritual-average-result span,
        .ritual-average-ceremony.is-final-kept .ritual-average-result small {
            font-size: 9px;
        }
        .ritual-average-ceremony.is-final-kept .ritual-average-result strong {
            font-size: 22px;
        }
        .ritual-average-ceremony.is-final-kept {
            bottom: calc(100% - 4px);
            width: min(68%, 180px);
            min-height: 42px;
        }
        .ritual-board-controls {
            bottom: 6.6%;
            width: 78%;
        }
        .ritual-board-controls .ritual-count-history {
            bottom: 58px;
            width: min(86%, 210px);
            min-height: 30px;
            padding: 4px 6px;
            gap: 4px;
            flex-wrap: nowrap;
        }
        .ritual-board-controls .ritual-count-history span {
            min-width: 22px;
            min-height: 20px;
            padding: 2px 4px;
            font-size: 9px;
        }
        .ritual-hand-grid {
            grid-template-columns: repeat(5, minmax(48px, 1fr));
            gap: 6px;
        }
        .ritual-card-name {
            font-size: clamp(5px, 1.8vw, 7px);
        }
        .ritual-card-code {
            font-size: clamp(7px, 2.2vw, 9px);
        }
        .ritual-btn {
            min-width: 100px;
        }
        .ritual-board-controls .ritual-result-actions .ritual-btn {
            width: 110px;
            min-width: 0;
            min-height: 34px;
            height: 34px;
            padding: 0 10px;
            font-size: 8px;
        }
    }
    #boardgame-survival-section {
        --boardgame-guide-accent: #ff9bc8;
        --boardgame-guide-accent-strong: #ffe0ed;
        --boardgame-guide-active-text: #2a0f1d;
        --boardgame-guide-tab-bg: linear-gradient(180deg, #30202a, #19131b);
        --boardgame-guide-tab-border: rgba(255, 125, 181, 0.52);
        --boardgame-guide-active-bg: linear-gradient(180deg, #ffd0e3, #f27aad);
        --boardgame-guide-card-bg: linear-gradient(180deg, #251a23, #141217);
        --boardgame-guide-shadow: rgba(255, 91, 158, 0.26);
    }
    #boardgame-survival-section .boardgame-guide-tab-btn {
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
    #boardgame-survival-section .boardgame-guide-tab-btn:hover:not(.is-active) {
        transform: translateY(-2px);
        box-shadow: 0 0 14px var(--boardgame-guide-shadow);
    }
    #boardgame-survival-section .boardgame-guide-tab-btn:focus-visible {
        outline: 2px solid #ffe0ed;
        outline-offset: 2px;
    }
    #boardgame-survival-section .survival-mode-shell {
        background:
            radial-gradient(circle at 50% 0%, rgba(255, 79, 159, 0.18), transparent 42%),
            linear-gradient(180deg, rgba(18, 17, 23, 0.96), rgba(8, 8, 12, 0.98));
        border: 1px solid rgba(255, 92, 166, 0.30);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.30);
    }
    #boardgame-survival-section .survival-mode-head {
        text-align: center;
        margin-bottom: 20px;
    }
    #boardgame-survival-section .survival-mode-head h2 {
        margin-top: 0;
        color: #ff72b8;
        text-shadow: 0 0 18px rgba(255, 69, 158, 0.45);
    }
    #boardgame-survival-section .survival-mode-head p {
        color: #c8b9c2;
        font-size: 14px;
        line-height: 1.55;
    }
    #boardgame-survival-section .survival-start-grid {
        max-width: 280px;
        margin: 0 auto 18px;
    }
    #boardgame-survival-section .survival-start-card {
        background: rgba(255, 255, 255, 0.96);
        border: 2px solid rgba(255, 96, 172, 0.58);
        box-shadow: 0 10px 26px rgba(255, 36, 139, 0.16);
    }
    #boardgame-survival-section .survival-start-card:hover {
        border-color: rgba(255, 96, 172, 0.90);
        box-shadow: 0 14px 30px rgba(255, 36, 139, 0.24);
    }
    #boardgame-survival-section .survival-start-card .category-icon-img {
        width: 96px;
        height: 96px;
        object-fit: contain;
        filter: drop-shadow(0 10px 16px rgba(255, 39, 147, 0.22));
    }
    #boardgame-survival-section .survival-start-card .name {
        color: #252027;
    }
    #boardgame-survival-section .survival-howto-card {
        max-width: 680px;
        margin: 0 auto 24px;
        padding: 18px 20px;
        border-radius: 16px;
        border: 1px solid rgba(255, 93, 168, 0.28);
        background: rgba(13, 13, 18, 0.78);
        color: #efe7ee;
        text-align: center;
    }
    #boardgame-survival-section .survival-howto-card > strong {
        display: block;
        color: #ff8bc7;
        margin-bottom: 10px;
        letter-spacing: 0.04em;
    }
    #boardgame-survival-section .survival-howto-card ul {
        margin: 12px 0 0;
        padding-left: 20px;
        text-align: left;
        color: #d8cbd4;
        font-size: 13px;
        line-height: 1.7;
    }
    #boardgame-survival-section .survival-howto-lead {
        margin: 12px auto 16px;
        max-width: 600px;
        color: #f5dce9;
        font-size: 14px;
        line-height: 1.65;
    }
    #boardgame-survival-section .survival-howto-section {
        margin-top: 16px;
        padding: 14px 16px;
        border-radius: 14px;
        border: 1px solid rgba(255, 92, 166, 0.22);
        background: rgba(255, 255, 255, 0.035);
    }
    #boardgame-survival-section .survival-howto-section h3 {
        margin: 0 0 10px;
        color: #ff8bc7;
        font-size: 14px;
        letter-spacing: 0.04em;
    }
    #boardgame-survival-section .survival-rule-chips {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 14px 0;
    }
    #boardgame-survival-section .survival-rule-chip {
        padding: 8px 6px;
        border-radius: 999px;
        background: rgba(255, 78, 159, 0.14);
        border: 1px solid rgba(255, 92, 166, 0.30);
        color: #ffd9ea;
        font-size: 12px;
        font-weight: 900;
    }
    @media (max-width: 520px) {
        #boardgame-survival-section .survival-rule-chips {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        #boardgame-survival-section .survival-special-grid {
            grid-template-columns: 1fr;
            gap: 12px;
        }
        #boardgame-survival-section .survival-special-card {
            padding: 12px 13px;
        }
        #boardgame-survival-section .survival-special-visual {
            height: 118px;
        }
        #boardgame-survival-section .survival-special-card-grenade .survival-special-visual img {
            max-width: 58%;
            max-height: 110px;
        }
        #boardgame-survival-section .survival-special-card-blade .survival-special-visual img {
            width: 96%;
            max-height: 94px;
        }
        #boardgame-survival-section .survival-special-copy p {
            font-size: 11px;
        }
        #boardgame-survival-section .survival-start-card .category-icon-img {
            width: 84px;
            height: 84px;
        }
    }
    @media (max-width: 768px) {
        .boardgame-page-arrow {
            width: 30px;
            height: 44px;
            font-size: 22px;
        }
        .boardgame-page-arrow.is-next { right: -40px; }
        .boardgame-page-arrow.is-prev { left: -40px; }
    }
    #boardgame-section .awards-container {
        position: relative;
        overflow: visible;
    }
    .boardgame-guide-open-btn {
        position: absolute;
        top: 22px;
        right: 22px;
        z-index: 8;
        min-width: 82px;
        height: 40px;
        padding: 0 18px;
        border: 1px solid rgba(255, 238, 205, 0.28);
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(25, 32, 47, 0.94), rgba(12, 17, 27, 0.98));
        color: #f8efe1;
        font-size: 12px;
        font-weight: 900;
        cursor: pointer;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
        transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    }
    .boardgame-guide-open-btn:hover {
        border-color: rgba(255, 98, 173, 0.58);
        background: linear-gradient(180deg, rgba(35, 30, 44, 0.96), rgba(16, 18, 29, 0.99));
        transform: translateY(-1px);
    }
    .boardgame-guide-overlay {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: clamp(112px, 13vh, 170px) 22px 22px;
        background: rgba(3, 6, 13, 0.72);
        backdrop-filter: blur(6px);
    }
    .boardgame-guide-overlay.is-open {
        display: flex;
    }
    .boardgame-guide-modal {
        position: relative;
        width: min(92vw, 860px);
        max-height: 88vh;
        padding: 18px;
        border: 1px solid rgba(255, 238, 205, 0.22);
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(15, 21, 33, 0.96), rgba(8, 12, 21, 0.98));
        box-shadow: 0 28px 70px rgba(0, 0, 0, 0.46);
        overflow: auto;
    }
    .boardgame-guide-modal img {
        display: block;
        width: 100%;
        height: auto;
        max-height: calc(88vh - 36px);
        object-fit: contain;
        border-radius: 16px;
    }
    .boardgame-guide-close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        width: 34px;
        height: 34px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 999px;
        background: rgba(10, 13, 20, 0.78);
        color: #f8efe1;
        font-size: 18px;
        font-weight: 900;
        cursor: pointer;
    }
    @media (max-width: 768px) {
        .boardgame-guide-open-btn {
            top: 16px;
            right: 16px;
            min-width: 66px;
            height: 34px;
            padding: 0 12px;
            font-size: 10px;
        }
        .boardgame-guide-overlay {
            padding: clamp(84px, 12vh, 118px) 14px 14px;
        }
        .boardgame-guide-modal {
            width: min(94vw, 800px);
            max-height: 82vh;
            padding: 10px;
            border-radius: 16px;
        }
        .boardgame-guide-modal img {
            max-height: calc(82vh - 20px);
            border-radius: 12px;
        }
        .boardgame-guide-close-btn {
            top: 6px;
            right: 6px;
            width: 30px;
            height: 30px;
            font-size: 16px;
        }
    }
    .mode-intro-overlay {
        position: absolute;
        inset: var(--mode-intro-top-offset, 0px) 0 0;
        z-index: 180;
        display: flex;
        align-items: stretch;
        justify-content: center;
        background: #080813;
        border-radius: inherit;
        overflow: hidden;
        opacity: 0;
        pointer-events: auto;
        animation: boardgame-intro-fade-in 0.28s ease-out forwards;
    }
    .mode-intro-overlay.is-floating {
        position: fixed;
        inset: auto;
        z-index: 9999;
    }
    .mode-intro-overlay.is-leaving {
        animation: boardgame-intro-fade-out 0.65s ease-in forwards;
    }
    .mode-intro-overlay img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center top;
        transform: none;
        filter: saturate(1.05) contrast(1.04);
    }
    .mode-intro-overlay.is-page-two-intro img {
        object-fit: contain;
        object-position: center top;
    }
    .mode-intro-overlay.is-beat-intro {
        position: fixed;
        inset: 0 auto auto var(--mode-intro-viewport-left, 8px);
        width: var(--mode-intro-viewport-width, calc(100vw - 16px));
        align-items: center;
        height: min(100dvh, 1000px);
        min-height: 0;
        background: #160201;
        overflow: visible;
    }
    .mode-intro-overlay.is-beat-intro::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background: center / cover no-repeat url('play/beat/intro.webp');
        filter: blur(18px) brightness(0.42) saturate(1.28);
        opacity: 0.72;
        transform: scale(1.08);
        clip-path: inset(3.71%);
    }
    .mode-intro-overlay.is-beat-intro::after {
        content: '';
        position: absolute;
        z-index: 0;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100dvh;
        background: #000;
        pointer-events: none;
    }
    .mode-intro-overlay.is-beat-intro img {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        object-position: center top;
        filter: saturate(1.08) contrast(1.05) drop-shadow(0 0 28px rgba(255, 58, 14, 0.32));
    }
    @keyframes boardgame-intro-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes boardgame-intro-fade-out {
        from { opacity: 1; }
        to { opacity: 0; }
    }
    .mode-intro-target-fade {
        opacity: 0;
        animation: mode-intro-target-fade-in 0.65s ease-out forwards;
    }
    @keyframes mode-intro-target-fade-in {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @media (max-width: 768px) {
        .mode-intro-overlay img {
            object-position: center top;
        }
        .mode-intro-overlay.is-beat-intro {
            inset-block-start: 0;
            height: 100dvh;
            min-height: 0;
        }
        .mode-intro-overlay.is-beat-intro img {
            object-fit: contain;
            object-position: center;
        }
    }
    .boardgame-hidden-icon-trigger {
        display: inline-block;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
    }
    .boardgame-mode-grid .category-card.is-character-icon .icon-img-wrapper {
        width: 64px;
        height: 64px;
        min-height: 64px;
    }
    .boardgame-mode-grid .category-card.is-character-icon .category-icon-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 10px 14px rgba(0,0,0,0.18));
    }
    .overheat-game-shell {
        position: relative;
        overflow: hidden;
        max-width: 880px;
        color: #f4d4c5;
        background:
            radial-gradient(circle at 50% 8%, rgba(255, 89, 33, 0.16), transparent 34%),
            linear-gradient(180deg, #161111, #070707);
        border: 1px solid rgba(255, 92, 39, 0.28);
    }
    .overheat-topbar {
        display: none;
    }
    .overheat-status-pill {
        position: absolute;
        left: 50%;
        top: 2.5%;
        z-index: 4;
        transform: translate(-50%, -52%);
        min-width: 150px;
        padding: 12px 22px;
        color: #ffd6bd;
        font-weight: 900;
        text-align: center;
        background: rgba(10, 10, 12, 0.82);
        border: 1px solid rgba(255, 111, 64, 0.42);
        border-radius: 999px;
        box-shadow: 0 0 18px rgba(255, 71, 26, 0.12);
    }
    .overheat-music-control {
        position: absolute;
        top: 2.5%;
        right: 5.2%;
        z-index: 6;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        transform: translateY(-52%);
    }
    .overheat-music-btn {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px;
        min-width: 80px;
        height: 34px !important;
        padding: 0 13px !important;
        color: #ffd6bd;
        border: 1px solid rgba(255, 111, 64, 0.42);
        border-radius: 999px;
        background: rgba(10, 10, 12, 0.82);
        box-shadow: 0 0 18px rgba(255, 71, 26, 0.12), 0 6px 14px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(3px);
    }
    .overheat-music-btn .btn-text {
        color: #ffd6bd;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.04em;
    }
    .overheat-music-btn .music-icon {
        color: #ff7b39;
        font-size: 10px;
        line-height: 1;
    }
    .overheat-music-btn.is-on {
        background: linear-gradient(180deg, rgba(118, 39, 20, 0.95), rgba(37, 16, 13, 0.96));
        border-color: rgba(255, 143, 73, 0.72);
        box-shadow: 0 0 16px rgba(255, 83, 31, 0.34), 0 8px 18px rgba(87, 29, 16, 0.28);
    }
    .overheat-music-btn.is-on .btn-text,
    .overheat-music-btn.is-on .music-icon {
        color: #ffe3d2;
    }
    .overheat-volume-panel {
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        width: 168px;
        padding: 8px 10px;
        border: 1px solid rgba(255, 111, 64, 0.28);
        border-radius: 14px;
        background: rgba(10, 10, 12, 0.94);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 30;
    }
    .overheat-music-control.is-open .overheat-volume-panel,
    .overheat-music-control:focus-within .overheat-volume-panel {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .overheat-volume-label {
        display: block;
        margin-bottom: 5px;
        color: #ffd6bd;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-align: center;
    }
    .overheat-volume-slider {
        width: 100%;
        accent-color: #ff6f40;
        cursor: pointer;
    }
    .overheat-life-row {
        position: absolute;
        z-index: 4;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        gap: 4px;
        width: 180px;
        row-gap: 7px;
        padding: 7px 12px 6px;
        background: linear-gradient(180deg, rgba(36, 24, 20, 0.84), rgba(16, 12, 12, 0.9));
        border: 1px solid rgba(255, 112, 55, 0.28);
        border-radius: 16px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 5px 12px rgba(0, 0, 0, 0.18);
        backdrop-filter: blur(2px);
    }
    .overheat-life-row::before {
        display: none;
    }
    .overheat-life-row::after {
        flex: 0 0 100%;
        padding: 0;
        color: #ffe3d2;
        font-size: 18px;
        font-weight: 900;
        line-height: 1;
        text-align: center;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.78);
    }
    .overheat-life-row.is-player::after {
        content: "PLAYER";
    }
    .overheat-life-row.is-com::after {
        content: "COM";
    }
    .overheat-life-row.is-player {
        left: 8.5%;
        bottom: 14%;
    }
    .overheat-life-row.is-com {
        right: 7.5%;
        bottom: 14%;
    }
    .overheat-set-display {
        position: absolute;
        left: 50%;
        bottom: 14.8%;
        z-index: 4;
        min-width: 100px;
        transform: translateX(-50%);
        padding: 11px 18px;
        color: #ffe3d2;
        font-size: 15px;
        font-weight: 900;
        line-height: 1;
        text-align: center;
        letter-spacing: 0.02em;
        background: linear-gradient(180deg, rgba(31, 22, 19, 0.86), rgba(10, 9, 10, 0.92));
        border: 1px solid rgba(255, 112, 55, 0.34);
        border-radius: 999px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 14px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(2px);
    }
    .overheat-set-display.is-win {
        color: #fff4c7;
        background:
            radial-gradient(circle at 50% 18%, rgba(255, 221, 93, 0.42), transparent 46%),
            linear-gradient(180deg, rgba(201, 67, 22, 0.96), rgba(95, 25, 12, 0.98));
        border-color: rgba(255, 177, 72, 0.72);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            0 0 14px rgba(255, 92, 31, 0.48),
            0 0 28px rgba(255, 48, 12, 0.28);
        text-shadow: 0 0 8px rgba(255, 225, 105, 0.85), 0 2px 4px rgba(45, 5, 0, 0.9);
    }
    .overheat-set-display.is-lose {
        color: #7a706b;
        background:
            linear-gradient(180deg, rgba(22, 18, 17, 0.98), rgba(3, 3, 4, 0.99));
        border-color: rgba(70, 54, 47, 0.82);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.03),
            inset 0 -10px 18px rgba(0, 0, 0, 0.72),
            0 6px 14px rgba(0, 0, 0, 0.32);
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.94);
    }
    .overheat-set-display.is-draw {
        color: #d4c6bc;
        background:
            radial-gradient(circle at 50% 20%, rgba(151, 90, 50, 0.22), transparent 52%),
            linear-gradient(180deg, rgba(62, 49, 43, 0.94), rgba(18, 16, 16, 0.96));
        border-color: rgba(150, 106, 80, 0.52);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            0 0 12px rgba(98, 52, 34, 0.26),
            0 6px 14px rgba(0, 0, 0, 0.24);
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.82);
    }
    .overheat-set-markers {
        position: absolute;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 240px;
        pointer-events: none;
    }
    .overheat-set-markers.is-player {
        left: 6.2%;
        bottom: 21.7%;
    }
    .overheat-set-markers.is-com {
        right: 5.2%;
        bottom: 21.7%;
    }
    .overheat-set-marker {
        width: 60px;
        height: 60px;
        object-fit: contain;
        opacity: 0.22;
        filter: grayscale(0.4) brightness(0.72);
    }
    .overheat-set-marker.is-earned {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(255, 84, 28, 0.72));
    }
    .overheat-set-marker.is-new {
        animation: overheat-set-marker-earn 0.86s cubic-bezier(.18,.9,.2,1.18) both;
    }
    .overheat-entry-action {
        position: absolute;
        z-index: 5;
        min-width: 78px;
        height: 28px;
        padding: 0 13px;
        color: #ffd8c8;
        font-size: 9px;
        font-weight: 900;
        border: 1px solid rgba(255, 112, 55, 0.34);
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(42, 26, 22, 0.82), rgba(12, 10, 10, 0.88));
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.22);
        cursor: pointer;
        backdrop-filter: blur(2px);
    }
    .overheat-entry-action.is-player {
        left: 8.5%;
        bottom: 9.6%;
    }
    .overheat-entry-action.is-com {
        right: 7.5%;
        bottom: 9.6%;
    }
    .overheat-entry-action:hover {
        border-color: rgba(255, 136, 72, 0.72);
        box-shadow: 0 0 14px rgba(255, 82, 31, 0.24);
    }
    .overheat-life-label {
        display: none;
    }
    .overheat-life-dot {
        position: relative;
        width: 15px;
        height: 17px;
        flex: 0 0 auto;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 62% 38% 62% 38% / 76% 44% 56% 24%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
        clip-path: polygon(50% 0%, 64% 16%, 76% 34%, 97% 53%, 88% 77%, 67% 100%, 34% 100%, 12% 78%, 5% 54%, 20% 33%, 35% 15%);
        box-shadow: inset 0 -4px 7px rgba(0, 0, 0, 0.34);
    }
    .overheat-life-dot::before {
        content: '';
        position: absolute;
        left: 29%;
        top: 17%;
        width: 42%;
        height: 54%;
        border-radius: 60% 40% 58% 42% / 76% 48% 52% 24%;
        background: rgba(255, 255, 255, 0.18);
        clip-path: polygon(50% 0%, 70% 28%, 78% 58%, 60% 100%, 34% 84%, 20% 58%, 31% 30%);
    }
    .overheat-life-dot.is-on {
        background:
            radial-gradient(circle at 44% 31%, #fff1a8 0 16%, transparent 34%),
            linear-gradient(180deg, #ffd26c 0%, #ff7a2c 45%, #e03112 72%, #6f0b04 100%);
        border-color: rgba(255, 168, 92, 0.72);
        box-shadow: 0 0 8px rgba(255, 82, 31, 0.66), 0 0 14px rgba(255, 135, 31, 0.34);
    }
    .overheat-life-dot.is-on::before {
        background: linear-gradient(180deg, #fff7bf 0%, #ffcf56 52%, rgba(255, 104, 28, 0.2) 100%);
    }
    .overheat-life-dot.is-lost,
    .overheat-life-dot.is-burnout {
        background:
            radial-gradient(circle at 46% 34%, rgba(255, 177, 76, 0.88) 0 12%, transparent 30%),
            linear-gradient(180deg, #16110f 0%, #070606 62%, #000 100%);
        border-color: rgba(255, 82, 32, 0.42);
        box-shadow:
            inset 0 0 0 1px rgba(0, 0, 0, 0.78),
            inset 0 -4px 7px rgba(0, 0, 0, 0.8),
            0 0 8px rgba(0, 0, 0, 0.86),
            0 0 10px rgba(91, 30, 18, 0.34);
    }
    .overheat-life-dot.is-burnout {
        animation: overheat-life-char 0.72s ease-out forwards;
    }
    .overheat-life-dot.is-lost::before,
    .overheat-life-dot.is-burnout::before {
        background: linear-gradient(180deg, rgba(255, 121, 42, 0.52), rgba(0, 0, 0, 0.92));
    }
    .overheat-life-dot.is-burnout::before {
        animation: overheat-life-core-burn 0.72s ease-out forwards;
    }
    .overheat-life-dot.is-burnout::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba(9, 8, 8, 0.94);
        transform: translate(-50%, -50%) scale(0.4);
        box-shadow:
            -12px -5px 0 rgba(0, 0, 0, 0.86),
            12px -4px 0 rgba(17, 13, 12, 0.8),
            -8px 10px 0 rgba(12, 10, 9, 0.76),
            10px 9px 0 rgba(0, 0, 0, 0.72),
            0 -14px 0 rgba(39, 23, 18, 0.66);
        animation: overheat-life-ash-burst 0.72s ease-out forwards;
    }
    .overheat-board {
        position: relative;
        width: min(100%, 760px);
        aspect-ratio: 1024 / 1422;
        margin: 0 auto 16px;
        overflow: hidden;
        background: url("boardgame/overheat/overheat field.webp") center / cover no-repeat;
        border-radius: 22px;
        border: 1px solid rgba(255, 97, 44, 0.24);
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.55), 0 18px 36px rgba(0, 0, 0, 0.24);
    }
    .overheat-board.is-overheat {
        animation: overheat-board-jolt 0.58s ease-in-out both;
    }
    .overheat-board-card-slot {
        position: absolute;
        z-index: 2;
        width: 18%;
        min-width: 92px;
        aspect-ratio: 360 / 500;
        transform: translate(-50%, -50%);
        display: grid;
        place-items: center;
    }
    .overheat-board-card-slot.is-player {
        left: 50%;
        top: 64%;
    }
    .overheat-board-card-slot.is-com {
        left: 50%;
        top: 32%;
    }
    .overheat-field-card {
        position: relative;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: 4px;
        padding: 8px;
        color: #fff;
        background: center / 100% 100% no-repeat url("boardgame/overheat/overheat.webp");
        filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.46));
    }
    .overheat-field-card.is-hidden {
        background-image: url("boardgame/overheat/back.webp");
    }
    .overheat-field-card-name,
    .overheat-field-card-code {
        position: relative;
        z-index: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        font-weight: 900;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }
    .overheat-field-card-name {
        transform: translateY(12px);
        min-height: 18px;
        font-size: 9px;
    }
    .overheat-field-card-code {
        transform: translateY(-12px);
        font-size: 18px;
    }
    .overheat-field-card-art {
        display: grid;
        place-items: center;
        min-height: 0;
    }
    .overheat-field-card-art img {
        width: 76%;
        height: 76%;
        object-fit: contain;
    }
    .overheat-field-card.is-hidden .overheat-field-card-art,
    .overheat-field-card.is-hidden .overheat-field-card-name,
    .overheat-field-card.is-hidden .overheat-field-card-code {
        opacity: 0;
    }
    .overheat-count-box {
        position: absolute;
        z-index: 3;
        width: 50px;
        min-height: 92px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 8px;
        color: #fff8f3;
        background: linear-gradient(180deg, rgba(33, 25, 22, 0.72), rgba(9, 9, 10, 0.76));
        border: 1px solid rgba(255, 116, 58, 0.22);
        border-radius: 18px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 18px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(2px);
        pointer-events: none;
    }
    .overheat-count-box.is-com {
        left: -78px;
        top: 50%;
        transform: translateY(-50%);
    }
    .overheat-count-box.is-player {
        right: -78px;
        top: 50%;
        transform: translateY(-50%);
    }
    .overheat-count-box span {
        font-size: 9px;
        font-weight: 900;
        line-height: 1;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.78);
    }
    .overheat-count-box strong {
        font-size: 40px;
        font-weight: 900;
        line-height: 0.9;
        text-shadow: 0 0 12px rgba(255, 103, 47, 0.38), 0 3px 5px rgba(0, 0, 0, 0.85);
    }
    .overheat-owner-label {
        position: absolute;
        z-index: 3;
        left: 50%;
        transform: translateX(-50%);
        min-width: 86px;
        padding: 6px 10px;
        color: #ffd7c7;
        font-size: 11px;
        font-weight: 900;
        text-align: center;
        background: rgba(7, 7, 8, 0.82);
        border: 1px solid rgba(255, 104, 48, 0.38);
        border-radius: 999px;
    }
    .overheat-board-card-slot.is-com .overheat-owner-label {
        top: auto;
        bottom: calc(100% + 26px);
    }
    .overheat-board-card-slot.is-player .overheat-owner-label {
        top: calc(100% + 15px);
        bottom: auto;
    }
    .overheat-fusion-pile {
        position: absolute;
        z-index: 5;
        inset: 0;
        pointer-events: none;
    }
    .overheat-burn-card {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 11%;
        min-width: 48px;
        aspect-ratio: 360 / 500;
        background: center / 100% 100% no-repeat url("boardgame/overheat/back.webp");
        border-radius: 8px;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--spin, 0deg)) scale(0.72);
    }
    .overheat-board.is-animating .overheat-burn-card {
        animation: overheat-card-collapse 1.18s cubic-bezier(.22,.88,.18,1) forwards;
        animation-delay: var(--delay, 0s);
    }
    .overheat-explosion {
        position: absolute;
        z-index: 4;
        left: 50%;
        top: 50%;
        width: 20%;
        aspect-ratio: 1;
        border-radius: 999px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.25);
        background:
            radial-gradient(circle, rgba(255, 243, 179, 0.96) 0 14%, rgba(255, 123, 37, 0.92) 28%, rgba(191, 24, 8, 0.62) 48%, transparent 70%);
        box-shadow: 0 0 42px rgba(255, 76, 24, 0.68);
        pointer-events: none;
    }
    .overheat-board.is-animating .overheat-explosion {
        animation: overheat-explode 1.05s ease-out 0.78s forwards;
    }
    .overheat-fire-wave {
        position: absolute;
        z-index: 4;
        left: 50%;
        top: 50%;
        width: 18%;
        aspect-ratio: 1;
        border-radius: 999px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.12);
        background:
            radial-gradient(circle, rgba(255, 246, 174, 0.9) 0 9%, rgba(255, 116, 28, 0.82) 18%, rgba(190, 24, 5, 0.48) 38%, rgba(49, 6, 2, 0.22) 58%, transparent 72%);
        box-shadow: 0 0 40px rgba(255, 73, 19, 0.72), 0 0 92px rgba(255, 42, 6, 0.4);
        pointer-events: none;
    }
    .overheat-board.is-animating .overheat-fire-wave {
        animation: overheat-fire-wave 1.28s cubic-bezier(.12,.78,.24,1) 0.92s forwards;
    }
    .overheat-alert {
        position: absolute;
        z-index: 7;
        left: 50%;
        top: 50%;
        display: grid;
        place-items: center;
        min-width: 54%;
        min-height: 18%;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -50%) scale(0.72);
        color: #fff4bb;
        font-size: clamp(34px, 8vw, 72px);
        font-weight: 1000;
        letter-spacing: 0;
        text-align: center;
        text-shadow:
            0 -2px 2px rgba(255, 255, 213, 0.96),
            0 0 9px rgba(255, 225, 96, 0.95),
            0 0 18px rgba(255, 113, 26, 0.9),
            0 0 28px rgba(255, 36, 10, 0.64),
            0 6px 0 rgba(44, 5, 0, 0.78);
    }
    .overheat-alert::before,
    .overheat-alert::after {
        content: '';
        position: absolute;
        inset: 8% 4%;
        border-radius: 999px;
        opacity: 0;
        background:
            radial-gradient(ellipse at 14% 76%, rgba(255, 222, 92, 0.72) 0 4%, transparent 13%),
            radial-gradient(ellipse at 28% 18%, rgba(255, 88, 18, 0.78) 0 5%, transparent 14%),
            radial-gradient(ellipse at 48% 82%, rgba(255, 174, 38, 0.68) 0 5%, transparent 15%),
            radial-gradient(ellipse at 70% 20%, rgba(255, 74, 14, 0.78) 0 5%, transparent 14%),
            radial-gradient(ellipse at 88% 72%, rgba(255, 218, 80, 0.64) 0 4%, transparent 13%);
        filter: blur(0.4px);
        mix-blend-mode: screen;
    }
    .overheat-alert::after {
        inset: 0 0;
        background:
            linear-gradient(180deg, transparent 0 12%, rgba(255, 125, 26, 0.42) 22%, transparent 36%),
            linear-gradient(0deg, transparent 0 16%, rgba(255, 46, 9, 0.34) 31%, transparent 48%);
        filter: blur(3px);
        mask-image: linear-gradient(90deg, transparent 0 2%, #000 12% 88%, transparent 98% 100%);
    }
    .overheat-board.is-overheat .overheat-alert {
        animation: overheat-alert-pop 0.92s cubic-bezier(.18,.9,.2,1.12) both;
    }
    .overheat-board.is-overheat .overheat-alert::before {
        animation: overheat-alert-flare 0.92s ease-out both;
    }
    .overheat-board.is-overheat .overheat-alert::after {
        animation: overheat-alert-burn 0.92s ease-out both;
    }
    .overheat-set-intro {
        position: absolute;
        inset: 0;
        z-index: 22;
        display: none;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        background: radial-gradient(circle at 50% 48%, rgba(28, 8, 4, 0.18), rgba(7, 4, 4, 0.03) 48%, transparent 68%);
    }
    .overheat-board.is-set-intro .overheat-set-intro {
        display: flex;
    }
    .overheat-set-intro-text {
        position: relative;
        color: #ff4d2d;
        font-size: clamp(28px, 5.2vw, 52px);
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0;
        text-shadow:
            0 1px 0 rgba(45, 4, 0, 0.86),
            0 0 9px rgba(255, 46, 12, 0.28);
        animation: overheat-set-intro-set 0.68s ease-out both;
    }
    .overheat-set-intro.is-fight .overheat-set-intro-text {
        color: #fff1b2;
        font-size: clamp(34px, 6vw, 62px);
        text-shadow:
            0 2px 0 rgba(72, 8, 0, 0.9),
            0 0 10px rgba(255, 236, 129, 0.72),
            0 0 19px rgba(255, 82, 19, 0.62);
        animation: overheat-set-intro-fight 0.92s ease-out both;
    }
    .overheat-set-intro.is-fight .overheat-set-intro-text::before,
    .overheat-set-intro.is-fight .overheat-set-intro-text::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -0.08em;
        width: 92%;
        height: 0.42em;
        transform: translateX(-50%);
        pointer-events: none;
        background:
            radial-gradient(ellipse at 18% 88%, rgba(255, 232, 91, 0.72) 0 7%, transparent 20%),
            radial-gradient(ellipse at 42% 82%, rgba(255, 95, 21, 0.78) 0 12%, transparent 30%),
            radial-gradient(ellipse at 67% 88%, rgba(255, 205, 55, 0.68) 0 8%, transparent 23%),
            linear-gradient(180deg, transparent, rgba(255, 56, 10, 0.42) 62%, transparent);
        filter: blur(1.8px);
        opacity: 0;
        animation: overheat-set-intro-flame 0.92s ease-out both;
    }
    .overheat-set-intro.is-fight .overheat-set-intro-text::after {
        width: 62%;
        height: 0.3em;
        bottom: 0.06em;
        filter: blur(0.9px);
        animation-delay: 0.08s;
    }
    .overheat-smoke-curtain {
        position: absolute;
        z-index: 6;
        left: 50%;
        top: 50%;
        width: min(150%, 980px);
        height: min(126%, 1060px);
        opacity: 0;
        pointer-events: none;
        border-radius: 999px;
        transform: translate(-50%, -50%) scale(0.82);
        background:
            radial-gradient(circle at 50% 52%, rgba(0, 0, 0, 0.92) 0 18%, rgba(8, 7, 7, 0.84) 34%, rgba(24, 20, 18, 0.58) 58%, transparent 80%);
        filter: blur(1.6px);
    }
    .overheat-smoke-curtain::before,
    .overheat-smoke-curtain::after,
    .overheat-smoke-curtain span {
        content: '';
        position: absolute;
        border-radius: 999px;
        opacity: 0;
        background:
            radial-gradient(circle, rgba(0, 0, 0, 0.98) 0 34%, rgba(10, 9, 8, 0.9) 52%, rgba(42, 35, 29, 0.58) 68%, transparent 82%);
        filter: blur(8px);
        transform: translate3d(0, 0, 0) scale(0.64);
    }
    .overheat-smoke-curtain::before {
        left: 18%;
        top: 44%;
        width: 36%;
        height: 34%;
    }
    .overheat-smoke-curtain::after {
        right: 17%;
        top: 35%;
        width: 38%;
        height: 40%;
    }
    .overheat-smoke-curtain span:nth-child(1) {
        left: 36%;
        top: 48%;
        width: 35%;
        height: 32%;
    }
    .overheat-smoke-curtain span:nth-child(2) {
        left: 24%;
        top: 26%;
        width: 30%;
        height: 31%;
    }
    .overheat-smoke-curtain span:nth-child(3) {
        right: 21%;
        top: 22%;
        width: 32%;
        height: 34%;
    }
    .overheat-smoke-curtain span:nth-child(4) {
        left: 31%;
        bottom: 16%;
        width: 43%;
        height: 30%;
    }
    .overheat-board.is-smoke .overheat-smoke-curtain {
        animation: overheat-smoke-hold 2s ease both;
    }
    .overheat-board.is-smoke .overheat-smoke-curtain::before {
        animation: overheat-smoke-puff-left 2s ease-out both;
    }
    .overheat-board.is-smoke .overheat-smoke-curtain::after {
        animation: overheat-smoke-puff-right 2s ease-out both;
    }
    .overheat-board.is-smoke .overheat-smoke-curtain span:nth-child(1) {
        animation: overheat-smoke-puff-center 2s ease-out both;
    }
    .overheat-board.is-smoke .overheat-smoke-curtain span:nth-child(2) {
        animation: overheat-smoke-puff-left 2s ease-out 0.1s both;
    }
    .overheat-board.is-smoke .overheat-smoke-curtain span:nth-child(3) {
        animation: overheat-smoke-puff-right 2s ease-out 0.16s both;
    }
    .overheat-board.is-smoke .overheat-smoke-curtain span:nth-child(4) {
        animation: overheat-smoke-puff-center 2s ease-out 0.22s both;
    }
    .overheat-board.is-reveal .overheat-smoke-curtain {
        animation: overheat-smoke-fade 1.1s ease-out forwards;
    }
    .overheat-board.is-reveal .overheat-smoke-curtain::before,
    .overheat-board.is-reveal .overheat-smoke-curtain::after,
    .overheat-board.is-reveal .overheat-smoke-curtain span {
        opacity: 0.72;
        transform: translateY(-10%) scale(1.08);
    }
    .overheat-impact {
        position: absolute;
        z-index: 4;
        width: 18%;
        aspect-ratio: 1;
        border-radius: 999px;
        opacity: 0;
        border: 3px solid rgba(255, 119, 48, 0.78);
        box-shadow: 0 0 18px rgba(255, 64, 18, 0.55);
        pointer-events: none;
    }
    .overheat-impact.is-player {
        left: 50%;
        top: 64%;
        transform: translate(-50%, -50%);
    }
    .overheat-impact.is-com {
        left: 50%;
        top: 32%;
        transform: translate(-50%, -50%);
    }
    .overheat-board.is-animating .overheat-impact {
        animation: overheat-impact-ring 0.82s ease-out 1.12s forwards;
    }
    .overheat-board-log {
        position: absolute;
        left: 50%;
        top: 10%;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        width: min(70%, 540px);
        min-height: 58px;
        transform: translate(-50%, -50%);
        padding: 13px 20px;
        color: #ffd8c8;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.16;
        text-align: center;
        background: rgba(18, 18, 20, 0.72);
        border: 1px solid rgba(255, 97, 44, 0.32);
        border-radius: 14px;
        backdrop-filter: blur(3px);
    }
    .overheat-primary-actions {
        position: absolute;
        left: 50%;
        bottom: 5.4%;
        z-index: 5;
        transform: translateX(-50%);
        width: min(260px, 36%);
        justify-content: center;
        margin: 0;
    }
    .overheat-primary-actions .overheat-action-btn {
        width: 100%;
        min-width: 0;
    }
    .overheat-hand-panel {
        padding: 16px;
        background: rgba(9, 9, 11, 0.74);
        border: 1px solid rgba(255, 99, 45, 0.24);
        border-radius: 16px;
    }
    .overheat-hand-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
        color: #ffd3c0;
        font-size: 12px;
        font-weight: 900;
    }
    .overheat-hand-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
    }
    .overheat-hand-card {
        position: relative;
        min-width: 0;
        display: grid;
        grid-template-rows: 18px 1fr 22px;
        gap: 2px;
        aspect-ratio: 360 / 500;
        padding: 11px 10px 13px;
        color: #f6ded4;
        background: center / 100% 100% no-repeat url("boardgame/overheat/overheat.webp");
        border: 1px solid rgba(255, 115, 55, 0.36);
        border-radius: 10px;
        cursor: pointer;
        transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
        filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.34));
    }
    .overheat-hand-card:hover:not(:disabled),
    .overheat-hand-card.is-field,
    .overheat-hand-card.is-discard {
        transform: translateY(-2px);
        border-color: rgba(255, 107, 50, 0.86);
        box-shadow: 0 0 0 2px rgba(255, 79, 25, 0.16);
    }
    .overheat-hand-card.is-field::before,
    .overheat-hand-card.is-discard::before {
        position: absolute;
        top: 6px;
        left: 6px;
        z-index: 2;
        padding: 4px 7px;
        color: #fff;
        font-size: 9px;
        font-weight: 900;
        border-radius: 999px;
    }
    .overheat-hand-card.is-field::before {
        content: "FIELD";
        background: #257fd8;
    }
    .overheat-hand-card.is-discard::before {
        content: "BURN";
        background: #d94324;
    }
    .overheat-hand-card:disabled {
        cursor: default;
        opacity: 0.72;
    }
    .overheat-hand-card-name,
    .overheat-hand-card-code {
        position: relative;
        z-index: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        font-size: 9px;
        font-weight: 900;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85);
    }
    .overheat-hand-card-code {
        align-self: end;
        color: #fff6e8;
        font-size: 15px;
        transform: translateY(-8px);
    }
    .overheat-hand-card-name {
        transform: translateY(6px);
    }
    .overheat-hand-card-art {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        min-height: 0;
        margin: 0 2px;
    }
    .overheat-hand-card-art img {
        width: 86%;
        height: 86%;
        object-fit: contain;
    }
    .overheat-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 14px;
    }
    .overheat-entry-overlay {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(0, 0, 0, 0.62);
        backdrop-filter: blur(6px);
    }
    .overheat-entry-overlay.is-open {
        display: flex;
    }
    .overheat-entry-panel {
        width: min(920px, calc(100vw - 36px));
        max-height: calc(100vh - 42px);
        overflow: auto;
        padding: 22px;
        color: #f7d6c5;
        background:
            radial-gradient(circle at 50% 0%, rgba(255, 86, 31, 0.16), transparent 42%),
            linear-gradient(180deg, rgba(22, 18, 18, 0.98), rgba(5, 5, 7, 0.98));
        border: 1px solid rgba(255, 99, 45, 0.34);
        border-radius: 18px;
        box-shadow: 0 24px 54px rgba(0, 0, 0, 0.46);
    }
    .overheat-entry-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 18px;
    }
    .overheat-entry-head strong {
        color: #ffd8c8;
        font-size: 25px;
        font-weight: 1000;
        letter-spacing: 0.02em;
    }
    .overheat-entry-head span {
        color: #c7aaa0;
        font-size: 12px;
        font-weight: 800;
    }
    .overheat-entry-close {
        width: 40px;
        height: 40px;
        color: #ffe3d7;
        font-size: 26px;
        font-weight: 900;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        cursor: pointer;
    }
    .overheat-entry-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 16px;
    }
    .overheat-entry-grid .overheat-hand-card {
        cursor: default;
    }
    .overheat-primary-actions {
        margin: 0;
    }
    .overheat-nav-actions {
        margin-top: 14px;
    }
    .overheat-action-btn {
        min-width: 180px;
        padding: 13px 20px;
        color: #fff;
        font-weight: 900;
        background: linear-gradient(180deg, #f05d31, #9f2211);
        border: 1px solid rgba(255, 141, 83, 0.55);
        border-radius: 999px;
        cursor: pointer;
    }
    .overheat-action-btn:disabled {
        cursor: default;
        opacity: 0.5;
        filter: grayscale(0.35);
    }
    .overheat-game-shell.is-blizzard {
        background: linear-gradient(180deg, rgba(8, 22, 38, 0.98), rgba(3, 10, 22, 0.99));
        border-color: rgba(126, 219, 255, 0.36);
        box-shadow: 0 18px 42px rgba(8, 34, 62, 0.28);
    }
    .overheat-board.is-blizzard {
        background-image: url("boardgame/blizzard/blizzard field.webp");
        border-color: rgba(166, 235, 255, 0.48);
        box-shadow: inset 0 0 80px rgba(8, 52, 82, 0.32), 0 18px 36px rgba(6, 22, 40, 0.28);
    }
    .overheat-board.is-blizzard .overheat-field-card,
    .overheat-game-shell.is-blizzard .overheat-hand-card,
    .overheat-entry-overlay.is-blizzard .overheat-hand-card {
        color: #f0fcff;
        background-image: url("boardgame/blizzard/blizzard.webp");
        border-color: rgba(169, 232, 255, 0.42);
        filter: drop-shadow(0 10px 16px rgba(0, 34, 62, 0.38));
    }
    .overheat-board.is-blizzard .overheat-field-card.is-hidden,
    .overheat-board.is-blizzard .overheat-burn-card,
    .overheat-entry-overlay.is-blizzard .overheat-hand-card.is-hidden {
        background-image: url("boardgame/blizzard/back.webp");
    }
    .overheat-game-shell.is-blizzard .overheat-hand-panel,
    .overheat-game-shell.is-blizzard .overheat-entry-panel,
    .overheat-entry-overlay.is-blizzard .overheat-entry-panel,
    .overheat-board.is-blizzard .overheat-status-pill,
    .overheat-board.is-blizzard .overheat-set-display,
    .overheat-board.is-blizzard .overheat-owner-label,
    .overheat-board.is-blizzard .overheat-count-box,
    .overheat-board.is-blizzard .overheat-entry-action,
    .overheat-board.is-blizzard .overheat-board-log {
        color: #e8fbff;
        background: linear-gradient(180deg, rgba(14, 39, 62, 0.82), rgba(5, 17, 33, 0.88));
        border-color: rgba(161, 231, 255, 0.38);
        box-shadow: inset 0 1px 0 rgba(228, 252, 255, 0.12), 0 9px 20px rgba(7, 27, 48, 0.24);
    }
    .overheat-entry-overlay.is-blizzard .overheat-entry-panel {
        color: #e8fbff;
        background:
            radial-gradient(circle at 50% 0%, rgba(142, 226, 255, 0.18), transparent 44%),
            linear-gradient(180deg, rgba(8, 28, 48, 0.98), rgba(3, 12, 26, 0.98));
        border-color: rgba(169, 232, 255, 0.42);
        box-shadow: 0 18px 42px rgba(5, 20, 38, 0.48), inset 0 1px 0 rgba(234, 253, 255, 0.14);
    }
    .overheat-entry-overlay.is-blizzard .overheat-entry-head strong,
    .overheat-entry-overlay.is-blizzard .overheat-entry-close {
        color: #f0fdff;
        text-shadow: 0 0 10px rgba(118, 217, 255, 0.42);
    }
    .overheat-entry-overlay.is-blizzard .overheat-entry-head span {
        color: #badfed;
    }
    .overheat-game-shell.is-blizzard .overheat-volume-panel {
        color: #e8fbff;
        background: linear-gradient(180deg, rgba(7, 26, 45, 0.96), rgba(3, 13, 28, 0.96));
        border-color: rgba(159, 231, 255, 0.42);
        box-shadow: 0 14px 26px rgba(4, 18, 34, 0.42), inset 0 1px 0 rgba(232, 252, 255, 0.12);
    }
    .overheat-game-shell.is-blizzard .overheat-volume-label {
        color: #e7fbff;
        text-shadow: 0 0 8px rgba(117, 214, 255, 0.38);
    }
    .overheat-game-shell.is-blizzard .overheat-volume-slider {
        accent-color: #76ddff;
    }
    .overheat-game-shell.is-blizzard .overheat-volume-slider::-webkit-slider-runnable-track {
        background: linear-gradient(90deg, #75ddff, #d8fbff);
        border-radius: 999px;
    }
    .overheat-game-shell.is-blizzard .overheat-volume-slider::-webkit-slider-thumb {
        background: #e6fbff;
        border-color: #7bdfff;
        box-shadow: 0 0 10px rgba(122, 224, 255, 0.58);
    }
    .overheat-game-shell.is-blizzard .overheat-volume-slider::-moz-range-track {
        background: linear-gradient(90deg, #75ddff, #d8fbff);
        border-radius: 999px;
    }
    .overheat-game-shell.is-blizzard .overheat-volume-slider::-moz-range-thumb {
        background: #e6fbff;
        border-color: #7bdfff;
        box-shadow: 0 0 10px rgba(122, 224, 255, 0.58);
    }
    .overheat-board.is-blizzard .overheat-life-row {
        background: linear-gradient(180deg, rgba(12, 40, 62, 0.84), rgba(4, 18, 34, 0.91));
        border-color: rgba(172, 236, 255, 0.42);
        box-shadow: inset 0 1px 0 rgba(235, 253, 255, 0.1), 0 5px 12px rgba(6, 25, 46, 0.24), 0 0 14px rgba(110, 211, 255, 0.13);
    }
    .overheat-board.is-blizzard .overheat-life-row::after {
        color: #e8fbff;
        text-shadow: 0 1px 0 rgba(3, 16, 34, 0.85), 0 0 8px rgba(127, 218, 255, 0.34);
    }
    .overheat-board.is-blizzard .overheat-set-display.is-win {
        color: #f5fdff;
        background:
            radial-gradient(circle at 50% 18%, rgba(232, 255, 255, 0.58), transparent 48%),
            linear-gradient(180deg, rgba(129, 218, 249, 0.96), rgba(22, 98, 159, 0.98));
        border-color: rgba(226, 255, 255, 0.82);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.34),
            inset 0 -10px 18px rgba(8, 53, 103, 0.32),
            0 0 14px rgba(153, 232, 255, 0.5),
            0 0 24px rgba(86, 177, 242, 0.32);
        text-shadow: 0 0 8px rgba(229, 255, 255, 0.95), 0 2px 4px rgba(2, 25, 58, 0.9);
    }
    .overheat-board.is-blizzard .overheat-set-display.is-draw {
        color: #cfeaf3;
        background:
            radial-gradient(circle at 50% 18%, rgba(158, 218, 236, 0.24), transparent 52%),
            linear-gradient(180deg, rgba(37, 83, 112, 0.94), rgba(9, 29, 53, 0.97));
        border-color: rgba(141, 207, 228, 0.56);
        box-shadow:
            inset 0 1px 0 rgba(220, 252, 255, 0.14),
            0 0 10px rgba(75, 161, 203, 0.2);
        text-shadow: 0 1px 4px rgba(2, 16, 34, 0.94), 0 0 6px rgba(142, 222, 255, 0.28);
    }
    .overheat-board.is-blizzard .overheat-set-display.is-lose {
        color: #7f8b92;
        background:
            linear-gradient(180deg, rgba(16, 24, 32, 0.98), rgba(3, 6, 11, 0.99));
        border-color: rgba(45, 64, 78, 0.82);
        box-shadow:
            inset 0 1px 0 rgba(210, 240, 255, 0.06),
            inset 0 -10px 16px rgba(0, 0, 0, 0.34),
            0 0 10px rgba(0, 0, 0, 0.42);
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.94);
    }
    .overheat-board.is-blizzard .overheat-music-btn,
    .overheat-game-shell.is-blizzard .overheat-action-btn {
        color: #eafaff;
        background: linear-gradient(180deg, #6cc4f1, #266e9b);
        border-color: rgba(202, 246, 255, 0.72);
        box-shadow: 0 10px 24px rgba(50, 153, 204, 0.26);
    }
    .overheat-game-shell.is-blizzard .overheat-music-btn .music-icon,
    .overheat-board.is-blizzard .overheat-music-btn .music-icon {
        color: #dffbff;
        text-shadow: 0 0 7px rgba(122, 224, 255, 0.68);
    }
    .overheat-board.is-blizzard .overheat-hand-card.is-discard::before,
    .overheat-game-shell.is-blizzard .overheat-hand-card.is-discard::before {
        content: 'FREEZE';
        background: linear-gradient(180deg, #9deaff, #3d93c8);
    }
    .overheat-board.is-blizzard .overheat-life-dot {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        clip-path: none;
        border: 1px solid rgba(213, 250, 255, 0.34);
        background:
            radial-gradient(circle at 50% 50%, rgba(244, 255, 255, 0.34) 0 22%, rgba(121, 216, 255, 0.18) 38%, rgba(14, 62, 104, 0.08) 68%, transparent 72%),
            conic-gradient(from 30deg, rgba(225, 252, 255, 0.22), rgba(92, 190, 245, 0.06), rgba(225, 252, 255, 0.22));
        transform: none;
        box-shadow: inset 0 0 5px rgba(236, 255, 255, 0.18);
        filter: drop-shadow(0 0 5px rgba(151, 233, 255, 0.34));
    }
    .overheat-board.is-blizzard .overheat-life-dot::before {
        content: '❄';
        position: absolute;
        left: 50%;
        top: 50%;
        width: auto;
        height: auto;
        transform: translate(-50%, -50%);
        color: rgba(210, 250, 255, 0.38);
        background: none;
        clip-path: none;
        border-radius: 0;
        font-size: 16px;
        line-height: 1;
        text-align: center;
        opacity: 1;
    }
    .overheat-board.is-blizzard .overheat-life-dot::after {
        content: '';
        position: absolute;
        inset: 2px;
        border-radius: 50%;
        clip-path: polygon(50% 0%, 58% 34%, 92% 16%, 66% 42%, 100% 50%, 66% 58%, 92% 84%, 58% 66%, 50% 100%, 42% 66%, 8% 84%, 34% 58%, 0% 50%, 34% 42%, 8% 16%, 42% 34%);
        background: rgba(218, 249, 255, 0.16);
        box-shadow: 0 0 7px rgba(128, 220, 255, 0.2);
    }
    .overheat-board.is-blizzard .overheat-life-dot.is-on {
        border-color: rgba(225, 253, 255, 0.78);
        background:
            radial-gradient(circle at 46% 42%, rgba(255, 255, 255, 0.92) 0 15%, rgba(184, 242, 255, 0.7) 32%, rgba(77, 184, 241, 0.45) 60%, rgba(5, 45, 84, 0.22) 82%),
            conic-gradient(from 30deg, rgba(238, 255, 255, 0.72), rgba(92, 196, 252, 0.28), rgba(238, 255, 255, 0.72));
        box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.48), 0 0 8px rgba(122, 223, 255, 0.58), 0 0 15px rgba(62, 157, 228, 0.32);
    }
    .overheat-board.is-blizzard .overheat-life-dot.is-on::before {
        color: #dffbff;
        text-shadow: 0 0 7px rgba(210, 252, 255, 0.95), 0 0 12px rgba(92, 197, 255, 0.72);
    }
    .overheat-board.is-blizzard .overheat-life-dot.is-on::after {
        background: rgba(241, 255, 255, 0.34);
        box-shadow: 0 0 9px rgba(140, 227, 255, 0.5);
    }
    .overheat-board.is-blizzard .overheat-life-dot.is-lost,
    .overheat-board.is-blizzard .overheat-life-dot.is-burnout {
        border-color: rgba(52, 92, 118, 0.52);
        background:
            radial-gradient(circle at 48% 45%, rgba(170, 213, 224, 0.24) 0 22%, rgba(18, 49, 72, 0.28) 56%, rgba(2, 14, 28, 0.44) 86%);
        box-shadow: inset 0 0 5px rgba(3, 18, 34, 0.72), 0 0 6px rgba(10, 37, 58, 0.52);
    }
    .overheat-board.is-blizzard .overheat-life-dot.is-burnout {
        animation: blizzard-life-shatter 0.72s ease-out forwards;
    }
    .overheat-board.is-blizzard .overheat-life-dot.is-lost::before,
    .overheat-board.is-blizzard .overheat-life-dot.is-burnout::before {
        color: #5c7c91;
    }
    .overheat-board.is-blizzard .overheat-life-dot.is-burnout::before {
        animation: blizzard-life-core-shatter 0.72s ease-out forwards;
    }
    .overheat-board.is-blizzard .overheat-life-dot.is-burnout::after {
        background:
            radial-gradient(circle at 25% 30%, rgba(215, 250, 255, 0.9) 0 2px, transparent 3px),
            radial-gradient(circle at 70% 36%, rgba(128, 217, 255, 0.72) 0 2px, transparent 3px),
            radial-gradient(circle at 46% 74%, rgba(232, 255, 255, 0.82) 0 2px, transparent 3px);
        animation: blizzard-life-chip-burst 0.72s ease-out forwards;
    }
    .overheat-board.is-blizzard .overheat-explosion {
        background: radial-gradient(circle, rgba(242, 255, 255, 0.98) 0 13%, rgba(128, 226, 255, 0.9) 30%, rgba(45, 120, 201, 0.58) 50%, transparent 72%);
        box-shadow: 0 0 42px rgba(137, 232, 255, 0.72);
    }
    .overheat-board.is-blizzard .overheat-fire-wave {
        background: radial-gradient(circle, rgba(244, 255, 255, 0.88) 0 9%, rgba(121, 223, 255, 0.78) 20%, rgba(49, 128, 201, 0.44) 42%, rgba(5, 32, 62, 0.2) 60%, transparent 74%);
        box-shadow: 0 0 42px rgba(138, 237, 255, 0.68), 0 0 92px rgba(68, 148, 224, 0.36);
    }
    .overheat-board.is-blizzard .overheat-alert {
        color: #edfdff;
        text-shadow: 0 -2px 2px rgba(255,255,255,0.98), 0 0 10px rgba(180,246,255,0.95), 0 0 20px rgba(82,201,255,0.88), 0 0 32px rgba(29,102,198,0.66), 0 6px 0 rgba(5,20,54,0.78);
    }
    .overheat-board.is-blizzard .overheat-alert::before {
        background:
            radial-gradient(ellipse at 16% 70%, rgba(210, 255, 255, 0.78) 0 4%, transparent 13%),
            radial-gradient(ellipse at 30% 22%, rgba(114, 228, 255, 0.72) 0 5%, transparent 14%),
            radial-gradient(ellipse at 52% 80%, rgba(226, 255, 255, 0.62) 0 5%, transparent 15%),
            radial-gradient(ellipse at 72% 20%, rgba(116, 202, 255, 0.74) 0 5%, transparent 14%),
            radial-gradient(ellipse at 88% 72%, rgba(198, 248, 255, 0.64) 0 4%, transparent 13%);
    }
    .overheat-board.is-blizzard .overheat-alert::after {
        background:
            linear-gradient(180deg, transparent 0 12%, rgba(198, 247, 255, 0.42) 22%, transparent 36%),
            linear-gradient(0deg, transparent 0 16%, rgba(82, 201, 255, 0.34) 31%, transparent 48%);
        filter: blur(3px);
    }
    .overheat-board.is-blizzard .overheat-smoke-curtain {
        background:
            radial-gradient(circle at 50% 52%, rgba(247, 254, 255, 0.9) 0 18%, rgba(200, 241, 252, 0.86) 32%, rgba(107, 186, 225, 0.78) 54%, rgba(22, 68, 118, 0.5) 74%, transparent 88%),
            radial-gradient(circle at 44% 64%, rgba(232, 252, 255, 0.74) 0 16%, rgba(94, 182, 225, 0.52) 42%, transparent 70%);
        filter: blur(2.8px) saturate(1.1);
        mix-blend-mode: normal;
    }
    .overheat-board.is-blizzard .overheat-smoke-curtain::before,
    .overheat-board.is-blizzard .overheat-smoke-curtain::after,
    .overheat-board.is-blizzard .overheat-smoke-curtain span {
        background:
            radial-gradient(circle, rgba(250, 255, 255, 0.9) 0 34%, rgba(198, 242, 253, 0.84) 50%, rgba(91, 180, 226, 0.68) 66%, rgba(24, 84, 141, 0.4) 80%, transparent 90%);
        filter: blur(11px) saturate(1.14);
    }
    .overheat-board.is-blizzard.is-smoke .overheat-smoke-curtain {
        animation: blizzard-frost-gather 2s ease both;
    }
    .overheat-board.is-blizzard.is-smoke .overheat-smoke-curtain::before {
        animation: blizzard-frost-bank-left 2s ease-out both;
    }
    .overheat-board.is-blizzard.is-smoke .overheat-smoke-curtain::after {
        animation: blizzard-frost-bank-right 2s ease-out both;
    }
    .overheat-board.is-blizzard.is-smoke .overheat-smoke-curtain span:nth-child(1) {
        animation: blizzard-frost-core 2s ease-out 0.06s both;
    }
    .overheat-board.is-blizzard.is-smoke .overheat-smoke-curtain span:nth-child(2) {
        animation: blizzard-frost-bank-left 2s ease-out 0.12s both;
    }
    .overheat-board.is-blizzard.is-smoke .overheat-smoke-curtain span:nth-child(3) {
        animation: blizzard-frost-bank-right 2s ease-out 0.16s both;
    }
    .overheat-board.is-blizzard.is-smoke .overheat-smoke-curtain span:nth-child(4) {
        animation: blizzard-frost-core 2s ease-out 0.22s both;
    }
    .overheat-board.is-blizzard.is-reveal .overheat-smoke-curtain {
        animation: blizzard-frost-fade 1.1s ease-out forwards;
    }
    .overheat-board.is-blizzard.is-reveal .overheat-smoke-curtain::before,
    .overheat-board.is-blizzard.is-reveal .overheat-smoke-curtain::after,
    .overheat-board.is-blizzard.is-reveal .overheat-smoke-curtain span {
        opacity: 0.8;
        transform: translateX(0) scale(1.08);
    }
    .overheat-board.is-blizzard .overheat-set-intro {
        background: radial-gradient(circle at 50% 48%, rgba(117, 218, 255, 0.18), rgba(5, 22, 40, 0.04) 50%, transparent 70%);
    }
    .overheat-board.is-blizzard .overheat-set-intro-text {
        color: #94ddff;
        text-shadow: 0 1px 0 rgba(4, 22, 58, 0.86), 0 0 10px rgba(96, 207, 255, 0.36);
    }
    .overheat-board.is-blizzard .overheat-set-intro.is-fight .overheat-set-intro-text {
        color: #f0fdff;
        text-shadow: 0 2px 0 rgba(5,26,70,0.9), 0 0 12px rgba(207,252,255,0.72), 0 0 22px rgba(80,190,255,0.62);
    }
    .overheat-board.is-blizzard .overheat-set-intro.is-fight .overheat-set-intro-text::before,
    .overheat-board.is-blizzard .overheat-set-intro.is-fight .overheat-set-intro-text::after {
        background:
            radial-gradient(ellipse at 16% 85%, rgba(235, 255, 255, 0.86) 0 8%, transparent 24%),
            radial-gradient(ellipse at 38% 75%, rgba(130, 226, 255, 0.7) 0 8%, transparent 24%),
            radial-gradient(ellipse at 62% 90%, rgba(204, 248, 255, 0.72) 0 8%, transparent 24%),
            radial-gradient(ellipse at 82% 78%, rgba(76, 181, 255, 0.58) 0 7%, transparent 22%),
            linear-gradient(90deg, transparent 0%, rgba(181, 242, 255, 0.52) 20%, rgba(242, 255, 255, 0.7) 50%, rgba(101, 207, 255, 0.48) 80%, transparent 100%);
        filter: blur(1.1px);
    }
    .overheat-board.is-blizzard .overheat-set-marker.is-earned {
        filter: drop-shadow(0 0 8px rgba(163, 236, 255, 0.72)) drop-shadow(0 0 14px rgba(72, 182, 255, 0.42));
    }
    .overheat-board.is-blizzard .overheat-impact {
        border-color: rgba(180, 246, 255, 0.78);
        box-shadow: 0 0 18px rgba(116, 219, 255, 0.58);
    }
    @keyframes blizzard-life-shatter {
        0% { opacity: 1; transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 8px rgba(162, 233, 255, 0.7)); }
        100% { opacity: 0.36; transform: scale(0.72) rotate(-12deg); filter: grayscale(1) brightness(0.72); }
    }
    @keyframes blizzard-life-core-shatter {
        0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        100% { opacity: 0.32; transform: translate(-50%, -50%) scale(0.72); }
    }
    @keyframes blizzard-life-chip-burst {
        0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
        35% { opacity: 1; }
        100% { opacity: 0; transform: translate(-50%, -82%) scale(1.8); }
    }
    @keyframes overheat-card-collapse {
        0% {
            opacity: 0;
            transform: translate(calc(-50% + var(--sx, 0px)), calc(-50% + var(--sy, 0px))) rotate(var(--spin, 0deg)) scale(0.74);
        }
        28% { opacity: 1; }
        78% {
            opacity: 1;
            transform: translate(-50%, -50%) rotate(calc(var(--spin, 0deg) + 140deg)) scale(0.62);
        }
        100% {
            opacity: 0;
            transform: translate(-50%, -50%) rotate(calc(var(--spin, 0deg) + 260deg)) scale(0.12);
        }
    }
    @keyframes overheat-explode {
        0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); filter: blur(0); }
        22% { opacity: 1; }
        100% { opacity: 0; transform: translate(-50%, -50%) scale(3.4); filter: blur(8px); }
    }
    @keyframes overheat-fire-wave {
        0% { opacity: 0; transform: translate(-50%, -50%) scale(0.12); filter: blur(0); }
        16% { opacity: 0.98; }
        58% { opacity: 0.82; }
        100% { opacity: 0; transform: translate(-50%, -50%) scale(5.8); filter: blur(2px); }
    }
    @keyframes overheat-board-jolt {
        0% { background-position: center center; }
        16% { background-position: calc(50% - 10px) center; }
        32% { background-position: calc(50% + 12px) center; }
        49% { background-position: calc(50% - 7px) center; }
        66% { background-position: calc(50% + 5px) center; }
        100% { background-position: center center; }
    }
    @keyframes overheat-alert-pop {
        0% { opacity: 0.86; transform: translate(-50%, -50%) scale(0.78) rotate(-3deg); filter: blur(0.2px) brightness(1.05); }
        14% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(1deg); filter: blur(0) brightness(1.24); }
        32% { opacity: 1; transform: translate(calc(-50% - 2px), calc(-50% + 1px)) scale(1.02) rotate(-0.6deg); filter: brightness(1.12); }
        58% { opacity: 1; transform: translate(calc(-50% + 2px), calc(-50% - 1px)) scale(1) rotate(0.4deg); filter: brightness(1.18); }
        100% { opacity: 0; transform: translate(-50%, -54%) scale(1.03); filter: blur(3px) brightness(0.92); }
    }
    @keyframes overheat-alert-flare {
        0% { opacity: 0; transform: translateY(4px) scale(0.9); }
        22% { opacity: 0.9; transform: translateY(-2px) scale(1.02); }
        54% { opacity: 0.72; transform: translateY(-8px) scale(1); }
        100% { opacity: 0; transform: translateY(-16px) scale(0.96); }
    }
    @keyframes overheat-alert-burn {
        0% { opacity: 0; transform: translateY(8px) scaleX(0.92); }
        24% { opacity: 0.82; transform: translateY(1px) scaleX(1.02); }
        60% { opacity: 0.58; transform: translateY(-7px) scaleX(0.98); }
        100% { opacity: 0; transform: translateY(-18px) scaleX(0.94); }
    }
    @keyframes overheat-set-intro-set {
        0% { opacity: 0; transform: translateY(8px) scale(0.96); filter: blur(3px); }
        22% { opacity: 1; filter: blur(0); }
        78% { opacity: 1; transform: translateY(0) scale(1); }
        100% { opacity: 0; transform: translateY(-5px) scale(1.02); }
    }
    @keyframes overheat-set-intro-fight {
        0% { opacity: 0; transform: translateY(9px) scale(0.9); filter: blur(4px); }
        16% { opacity: 1; transform: translateY(0) scale(1.03); filter: blur(0); }
        58% { opacity: 1; transform: translateY(0) scale(1); }
        100% { opacity: 0; transform: translateY(-8px) scale(1.06); filter: blur(3px); }
    }
    @keyframes overheat-set-intro-flame {
        0% { opacity: 0; transform: translateX(-50%) translateY(8px) scaleX(0.72); }
        18% { opacity: 0.72; }
        70% { opacity: 0.66; transform: translateX(-50%) translateY(-3px) scaleX(1); }
        100% { opacity: 0; transform: translateX(-50%) translateY(-13px) scaleX(1.06); }
    }
    @keyframes overheat-set-marker-earn {
        0% { opacity: 0.18; transform: scale(0.42) rotate(-18deg); filter: grayscale(0.4) brightness(0.72); }
        26% { opacity: 1; transform: scale(1.32) rotate(8deg); }
        46% { transform: scale(0.94) rotate(-4deg); }
        68% { transform: scale(1.08) rotate(2deg); }
        100% { opacity: 1; transform: scale(1) rotate(0deg); }
    }
    @keyframes overheat-life-char {
        0% { opacity: 1; transform: scale(1); filter: brightness(1.45) saturate(1.4); }
        28% { opacity: 1; transform: scale(1.22) rotate(-6deg); filter: brightness(0.72) saturate(0.55); }
        68% { opacity: 0.82; transform: scale(0.9) rotate(8deg); filter: brightness(0.24) saturate(0.2); }
        100% { opacity: 0.76; transform: scale(0.92) translateY(1px); filter: brightness(0.12) saturate(0.08); }
    }
    @keyframes overheat-life-core-burn {
        0% { opacity: 1; transform: scale(1); }
        42% { opacity: 0.72; transform: scale(1.25); }
        100% { opacity: 0; transform: scale(0.25) translateY(2px); }
    }
    @keyframes overheat-life-ash-burst {
        0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); }
        22% { opacity: 1; }
        100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
    }
    @keyframes overheat-smoke-hold {
        0% { opacity: 0; transform: translate(-50%, -46%) scale(0.72); filter: blur(8px); }
        28% { opacity: 1; transform: translate(-50%, -52%) scale(0.98); filter: blur(2px); }
        68% { opacity: 1; transform: translate(-50%, -58%) scale(1.07); filter: blur(1.5px); }
        100% { opacity: 0.99; transform: translate(-50%, -62%) scale(1.12); filter: blur(2.5px); }
    }
    @keyframes overheat-smoke-fade {
        0% { opacity: 0.99; transform: translate(-50%, -62%) scale(1.12); filter: blur(2.5px); }
        100% { opacity: 0; transform: translate(-50%, -72%) scale(1.28); filter: blur(12px); }
    }
    @keyframes overheat-smoke-puff-left {
        0% { opacity: 0; transform: translate(-7%, 18%) scale(0.5) rotate(-6deg); }
        28% { opacity: 1; transform: translate(-12%, -2%) scale(0.92) rotate(-9deg); }
        100% { opacity: 0.9; transform: translate(-22%, -34%) scale(1.34) rotate(-14deg); }
    }
    @keyframes overheat-smoke-puff-right {
        0% { opacity: 0; transform: translate(8%, 16%) scale(0.5) rotate(6deg); }
        28% { opacity: 1; transform: translate(12%, -4%) scale(0.94) rotate(10deg); }
        100% { opacity: 0.9; transform: translate(23%, -36%) scale(1.36) rotate(15deg); }
    }
    @keyframes overheat-smoke-puff-center {
        0% { opacity: 0; transform: translateY(22%) scale(0.52); }
        26% { opacity: 1; transform: translateY(-3%) scale(0.96); }
        100% { opacity: 0.92; transform: translateY(-38%) scale(1.42); }
    }
    @keyframes blizzard-frost-gather {
        0% { opacity: 0; transform: translate(-50%, -50%) scale(0.88); filter: blur(10px) saturate(1.05); }
        26% { opacity: 0.98; transform: translate(-50%, -50%) scale(1.02); filter: blur(3px) saturate(1.12); }
        72% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); filter: blur(2px) saturate(1.16); }
        100% { opacity: 0.99; transform: translate(-50%, -50%) scale(1.1); filter: blur(2.8px) saturate(1.12); }
    }
    @keyframes blizzard-frost-fade {
        0% { opacity: 0.99; transform: translate(-50%, -50%) scale(1.1); filter: blur(2.8px) saturate(1.12); }
        100% { opacity: 0; transform: translate(-50%, -50%) scale(1.24); filter: blur(13px) saturate(1.02); }
    }
    @keyframes blizzard-frost-bank-left {
        0% { opacity: 0; transform: translateX(-95%) scale(0.66) rotate(-3deg); }
        30% { opacity: 0.98; transform: translateX(-34%) scale(0.95) rotate(-1deg); }
        100% { opacity: 0.96; transform: translateX(8%) scale(1.24) rotate(1deg); }
    }
    @keyframes blizzard-frost-bank-right {
        0% { opacity: 0; transform: translateX(95%) scale(0.66) rotate(3deg); }
        30% { opacity: 0.98; transform: translateX(34%) scale(0.95) rotate(1deg); }
        100% { opacity: 0.96; transform: translateX(-8%) scale(1.24) rotate(-1deg); }
    }
    @keyframes blizzard-frost-core {
        0% { opacity: 0; transform: scale(0.58); }
        34% { opacity: 0.84; transform: scale(0.92); }
        100% { opacity: 0.94; transform: scale(1.22); }
    }
    @keyframes overheat-impact-ring {
        0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
        24% { opacity: 1; }
        100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
    }
    @media (min-width: 769px) {
        .boardgame-mode-grid .category-card .icon-img-wrapper {
            width: 96px;
            height: 96px;
            min-height: 96px;
        }
        .boardgame-mode-grid .category-card.is-character-icon .icon-img-wrapper {
            width: 96px;
            height: 96px;
            min-height: 96px;
        }
        .boardgame-mode-grid .category-card .category-icon-img {
            width: 96px;
            height: 96px;
        }
        .boardgame-mode-grid .boardgame-mode-card-equinox .icon-img-wrapper {
            width: 96px;
            height: 96px;
            min-height: 96px;
        }
        .boardgame-mode-grid .boardgame-mode-card-equinox .category-icon-img {
            width: 70px;
            height: 70px;
        }
    }
    .category-card {
        padding: 20px;
        text-align: center;
        cursor: pointer;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 16px;
        transition: all 0.2s ease;
    }
    .category-card:hover {
        border-color: var(--primary-color);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        transform: translateY(-3px);
    }
    .category-card .icon {
        margin-bottom: 12px;
        font-size: 35px;
    }
    .category-card .name {
        color: #333;
        font-size: 16px;
        font-weight: bold;
    }
    .quiz-mode-card .quiz-dual-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
        margin-bottom: 12px;
    }
    .quiz-mode-card {
        cursor: default;
    }
    .halloween-quiz-mode-card {
        position: relative;
        grid-column: 1 / -1;
        overflow: hidden;
        padding: 0;
        border-color: rgba(236, 139, 38, 0.48);
        background: #111629;
        box-shadow: 0 12px 28px rgba(26, 19, 45, 0.24);
    }
    body.theme-dark #quiz-section .halloween-quiz-mode-card,
    body.theme-dark #quiz-section .halloween-quiz-mode-card:hover {
        border-color: rgba(236, 139, 38, 0.52);
        background: #111629;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
    }
    .halloween-quiz-banner {
        position: relative;
        box-sizing: border-box;
        min-height: 148px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 20px 56px;
        color: #fff6df;
        background: center 58% / cover no-repeat url('quiz/halloween/halloween background.webp');
        isolation: isolate;
    }
    .halloween-quiz-help-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 3;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid rgba(255, 196, 98, 0.72);
        border-radius: 50%;
        background: rgba(8, 10, 25, 0.84);
        color: #ffc462;
        font: inherit;
        font-size: 17px;
        font-weight: 900;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    }
    .halloween-quiz-help-btn:focus-visible,
    .halloween-quiz-help-close:focus-visible {
        outline: 3px solid rgba(255, 196, 98, 0.48);
        outline-offset: 2px;
    }
    .halloween-quiz-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(180deg, rgba(4, 9, 25, 0.06), rgba(7, 8, 21, 0.86));
    }
    .halloween-quiz-title {
        color: #ffc462;
        font-size: 24px;
        font-weight: 900;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.78);
    }
    .halloween-quiz-copy {
        color: #eee7ff;
        font-size: 12px;
        font-weight: 800;
    }
    .halloween-quiz-select-panel {
        padding: 16px;
        background: linear-gradient(180deg, #15172b, #0d1020);
    }
    .halloween-quiz-toggle-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .halloween-quiz-toggle {
        min-height: 64px;
        display: grid;
        place-items: center;
        gap: 3px;
        padding: 10px 12px;
        border: 1px solid rgba(188, 164, 224, 0.34);
        border-radius: 8px;
        background: #19172b;
        color: #aca4bf;
        cursor: pointer;
    }
    .halloween-quiz-toggle strong {
        font-size: 15px;
    }
    .halloween-quiz-toggle span {
        font-size: 9px;
        font-weight: 800;
    }
    .halloween-quiz-toggle.is-trick.is-active {
        color: #2b1700;
        border-color: #ffc462;
        background: #f0a83b;
        box-shadow: 0 0 0 2px rgba(255, 196, 98, 0.18);
    }
    .halloween-quiz-toggle.is-treat.is-active {
        color: #fff;
        border-color: #bc8cff;
        background: #7143a8;
        box-shadow: 0 0 0 2px rgba(188, 140, 255, 0.16);
    }
    .halloween-quiz-toggle:focus-visible {
        outline: 3px solid rgba(255, 255, 255, 0.7);
        outline-offset: 2px;
    }
    .halloween-quiz-mode-summary {
        min-height: 18px;
        margin: 12px 0 0;
        color: #ddd5ed;
        font-size: 11px;
        font-weight: 800;
        text-align: center;
    }
    .halloween-quiz-start-btn {
        width: 100%;
        min-height: 44px;
        margin-top: 10px;
        border: 1px solid rgba(255, 196, 98, 0.72);
        border-radius: 6px;
        background: #ffc462;
        color: #211000;
        font: inherit;
        font-size: 14px;
        font-weight: 900;
        cursor: pointer;
    }
    .halloween-quiz-start-btn:hover {
        background: #ffd17f;
    }
    #halloween-quiz-container {
        color: #fff6e6;
    }
    .halloween-game-field {
        box-sizing: border-box;
        width: min(100%, 1040px);
        min-height: 740px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 26px clamp(14px, 4vw, 52px) 24px;
        border: 1px solid rgba(255, 177, 69, 0.68);
        border-radius: 8px;
        background: center / cover no-repeat url('quiz/halloween/halloween background.webp');
        box-shadow: 0 20px 48px rgba(2, 5, 16, 0.42);
        isolation: isolate;
    }
    .halloween-game-field::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(4, 8, 23, 0.58);
    }
    .halloween-game-over-visual {
        position: absolute;
        inset: 0;
        z-index: 12;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at center, rgba(19, 8, 28, 0.2), rgba(4, 6, 18, 0.76) 70%);
        opacity: 0;
        transform: scale(0.96);
        pointer-events: none;
        transition: opacity 460ms ease, transform 460ms cubic-bezier(0.18, 0.88, 0.22, 1.08);
    }
    .halloween-game-over-visual.is-visible {
        opacity: 1;
        transform: scale(1);
    }
    .halloween-game-over-visual img {
        width: min(72%, 520px);
        max-height: 72%;
        object-fit: contain;
        filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.66));
        animation: halloweenGameOverStampEnter 820ms cubic-bezier(0.18, 0.88, 0.22, 1.08) both;
    }
    @keyframes halloweenGameOverStampEnter {
        0% { opacity: 0; transform: translateY(18px) scale(0.78) rotate(-3deg); filter: blur(3px) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34)); }
        68% { opacity: 1; transform: translateY(0) scale(1.04) rotate(1deg); filter: blur(0) drop-shadow(0 18px 28px rgba(0, 0, 0, 0.66)); }
        100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
    }
    .halloween-game-stage {
        min-width: 210px;
        padding: 10px 22px;
        border: 2px solid rgba(255, 196, 98, 0.72);
        border-radius: 999px;
        background: rgba(8, 10, 26, 0.88);
        color: #ffc462;
        font-size: 18px;
        font-weight: 900;
        text-align: center;
        transition: color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }
    .halloween-game-score {
        position: absolute;
        top: 40px;
        left: clamp(14px, 4vw, 52px);
        z-index: 2;
        color: #ffc462;
        font-size: 16px;
        font-weight: 900;
        text-shadow: 0 2px 8px #000;
    }
    .halloween-game-stage.is-success {
        color: #ffe06c;
        border-color: #ffe06c;
        box-shadow: 0 0 18px rgba(255, 224, 108, 0.48);
    }
    .halloween-game-stage.is-incorrect {
        color: #c792ff;
        border-color: #a761ef;
        box-shadow: 0 0 18px rgba(167, 97, 239, 0.48);
    }
    .halloween-game-timer {
        width: min(100%, 720px);
        margin-top: 14px;
    }
    .halloween-game-timer-track {
        height: 10px;
        overflow: hidden;
        border: 1px solid rgba(255, 208, 131, 0.7);
        border-radius: 999px;
        background: rgba(5, 7, 18, 0.82);
    }
    .halloween-game-timer-bar {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #a95eef, #f0a83b);
        transition: width 100ms linear;
    }
    .halloween-game-timer-text {
        margin-top: 5px;
        color: #f6e7ff;
        font-size: 11px;
        font-weight: 800;
        text-align: center;
    }
    .halloween-game-lives {
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 4px;
    }
    .halloween-game-life {
        color: #ffbd45;
        font-size: 25px;
        filter: drop-shadow(0 0 7px rgba(255, 179, 59, 0.7));
    }
    .halloween-game-life.is-lost {
        color: #555267;
        filter: none;
        opacity: 0.58;
    }
    .halloween-game-prompt {
        min-height: 50px;
        margin: 4px 0 12px;
        color: #fff;
        font-size: clamp(16px, 2.8vw, 24px);
        font-weight: 900;
        text-align: center;
        text-shadow: 0 2px 12px #000;
    }
    .halloween-game-prompt span {
        display: block;
        margin-top: 3px;
        color: #d9d0e9;
        font-size: 14px;
        line-height: 1.5;
    }
    .halloween-game-card-zone {
        width: 100%;
        margin: 0 0 auto;
    }
    .halloween-game-achievement {
        min-height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 36px 0 34px;
        font-size: 13px;
        font-weight: 900;
        text-align: center;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    }
    .halloween-game-cards {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: clamp(6px, 1.3vw, 14px);
        margin: 0;
    }
    .halloween-game-card {
        min-width: 0;
        aspect-ratio: 360 / 504;
        position: relative;
        border: 0;
        border-radius: 6px;
        background: transparent;
        padding: 0;
        cursor: pointer;
        perspective: 900px;
    }
    .halloween-game-card:disabled {
        cursor: default;
    }
    .halloween-game-card-inner {
        position: absolute;
        inset: 0;
        transform-style: preserve-3d;
        transition: transform 620ms cubic-bezier(0.2, 0.72, 0.2, 1);
    }
    .halloween-game-card.is-flipped .halloween-game-card-inner {
        transform: rotateY(180deg);
    }
    .halloween-game-card-face {
        position: absolute;
        inset: 0;
        overflow: hidden;
        border: 2px solid transparent;
        border-radius: 6px;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    .halloween-game-card-front {
        background: center / 100% 100% no-repeat url('quiz/halloween/royal.webp');
        filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.38));
    }
    .halloween-game-card-back {
        transform: rotateY(180deg);
        background: #111225;
    }
    .halloween-game-card-back img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: fill;
    }
    .halloween-game-item-image {
        position: absolute;
        left: 19%;
        top: 22%;
        width: 62%;
        height: 48%;
        object-fit: contain;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
    }
    .halloween-game-item-name {
        position: absolute;
        left: 12%;
        right: 12%;
        bottom: 14%;
        overflow: hidden;
        color: #4a213d;
        font-size: clamp(7px, 1.2vw, 12px);
        font-weight: 900;
        line-height: 1.15;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .halloween-game-card.is-selected .halloween-game-card-face {
        border-color: #fff0a0;
        box-shadow: 0 0 0 3px rgba(255, 196, 98, 0.5), 0 0 24px rgba(255, 196, 98, 0.78);
    }
    .halloween-game-card:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 3px;
    }
    .halloween-game-feedback {
        min-height: 30px;
        margin: 12px 0 4px;
        color: #ece6f6;
        font-size: 14px;
        font-weight: 900;
        text-align: center;
    }
    .halloween-game-feedback.is-success { color: #ffe06c; }
    .halloween-game-feedback.is-incorrect { color: #c792ff; }
    .halloween-game-actions {
        width: min(100%, 520px);
        margin-top: 8px;
    }
    .halloween-game-action {
        width: 100%;
        min-height: 48px;
        border-radius: 6px;
        font: inherit;
        font-size: 13px;
        font-weight: 900;
        cursor: pointer;
    }
    .halloween-game-action.is-select {
        border: 1px solid #ffc462;
        background: #f0a83b;
        color: #281500;
    }
    .halloween-game-action.is-retry {
        border: 1px solid #a96aea;
        background: #6f3ca8;
        color: #fff;
    }
    .halloween-game-action:disabled {
        border-color: #4b485b;
        background: #222333;
        color: #777586;
        cursor: default;
    }
    .halloween-game-back {
        margin-top: 14px;
        border: 0;
        background: transparent;
        color: #d8d1e4;
        font: inherit;
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
    }
    .halloween-music-control {
        position: absolute;
        top: 30px;
        right: 14px;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 7px;
    }
    .halloween-music-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 88px;
        height: 34px;
        padding: 0 11px;
        border: 1px solid rgba(255, 196, 98, 0.62);
        border-radius: 999px;
        background: rgba(8, 10, 26, 0.9);
        color: #e7dfef;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34);
        font: inherit;
        font-size: 9px;
        font-weight: 900;
        cursor: pointer;
    }
    .halloween-music-btn.is-on {
        border-color: #ffc462;
        background: #f0a83b;
        color: #281500;
        box-shadow: 0 0 18px rgba(255, 179, 59, 0.34);
    }
    .halloween-volume-panel {
        position: absolute;
        top: calc(100% + 7px);
        right: 0;
        box-sizing: border-box;
        width: 158px;
        padding: 8px 10px;
        border: 1px solid rgba(255, 196, 98, 0.42);
        border-radius: 6px;
        background: rgba(8, 10, 26, 0.96);
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42);
        opacity: 0;
        transform: translateY(-5px);
        pointer-events: none;
        transition: opacity 180ms ease, transform 180ms ease;
    }
    .halloween-music-control.is-open .halloween-volume-panel {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .halloween-volume-label {
        display: block;
        margin-bottom: 5px;
        color: #ffc462;
        font-size: 9px;
        font-weight: 900;
        text-align: center;
    }
    .halloween-volume-slider {
        width: 100%;
        accent-color: #f0a83b;
        cursor: pointer;
    }
    .halloween-quiz-help-overlay {
        position: fixed;
        inset: 0;
        z-index: 24500;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: rgba(5, 7, 18, 0.78);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    .halloween-quiz-help-overlay[hidden] {
        display: none;
    }
    .halloween-quiz-help-dialog {
        box-sizing: border-box;
        width: min(100%, 460px);
        max-height: calc(100dvh - 36px);
        overflow-y: auto;
        position: relative;
        padding: 24px;
        border: 1px solid rgba(255, 181, 72, 0.58);
        border-radius: 8px;
        background: linear-gradient(180deg, #17172b, #0c0e1c);
        color: #f4efff;
        box-shadow: 0 22px 52px rgba(0, 0, 0, 0.48);
        text-align: left;
    }
    .halloween-quiz-help-dialog h3 {
        margin: 0 38px 18px 0;
        color: #ffc462;
        font-size: 21px;
        text-align: center;
    }
    .halloween-quiz-help-close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        background: #202038;
        color: #fff;
        font: inherit;
        font-size: 18px;
        cursor: pointer;
    }
    .halloween-quiz-help-rule + .halloween-quiz-help-rule {
        margin-top: 12px;
    }
    .halloween-quiz-help-rule {
        padding: 14px;
        border-left: 3px solid #ffc462;
        background: rgba(255, 255, 255, 0.05);
    }
    .halloween-quiz-help-rule.is-treat {
        border-left-color: #bc8cff;
    }
    .halloween-quiz-help-rule strong {
        display: block;
        margin-bottom: 6px;
        color: #ffc462;
        font-size: 14px;
    }
    .halloween-quiz-help-rule.is-treat strong {
        color: #c9a6ff;
    }
    .halloween-quiz-help-rule p {
        margin: 0;
        color: #d8d1e4;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.7;
    }
    @media (max-width: 600px) {
        .halloween-quiz-banner {
            min-height: 116px;
            padding: 14px 50px;
        }
        .halloween-quiz-title { font-size: 18px; }
        .halloween-quiz-copy { font-size: 10px; }
        .halloween-quiz-select-panel { padding: 10px; }
        .halloween-quiz-toggle-row { gap: 7px; }
        .halloween-quiz-toggle {
            min-height: 58px;
            padding: 8px;
        }
        .halloween-quiz-toggle strong { font-size: 12px; }
        .halloween-quiz-toggle span { font-size: 8px; }
        .halloween-quiz-mode-summary { font-size: 9px; }
        .halloween-quiz-help-btn {
            width: 32px;
            height: 32px;
            font-size: 15px;
        }
        .halloween-quiz-help-dialog {
            padding: 20px 16px 16px;
        }
        .halloween-quiz-help-dialog h3 {
            font-size: 18px;
        }
        .halloween-game-field {
            min-height: 640px;
            padding: 18px 10px 16px;
        }
        .halloween-game-stage {
            min-width: 174px;
            margin-top: 42px;
            padding: 8px 14px;
            font-size: 14px;
        }
        .halloween-game-score {
            top: 30px;
            left: 10px;
            font-size: 12px;
        }
        .halloween-game-timer { margin-top: 10px; }
        .halloween-game-lives { min-height: 36px; }
        .halloween-game-life { font-size: 21px; }
        .halloween-game-prompt {
            min-height: 44px;
            margin-bottom: 8px;
        }
        .halloween-game-prompt span { font-size: 12px; }
        .halloween-game-achievement {
            min-height: 24px;
            margin: 28px 0 24px;
            font-size: 11px;
        }
        .halloween-game-cards { gap: 4px; }
        .halloween-game-card-face { border-width: 1px; }
        .halloween-game-item-name { font-size: 7px; }
        .halloween-game-feedback {
            min-height: 26px;
            font-size: 12px;
        }
        .halloween-game-action { min-height: 44px; }
        .halloween-music-control {
            top: 24px;
            right: 8px;
        }
        .halloween-music-btn {
            min-width: 50px;
            height: 25px;
            padding: 0 8px;
            font-size: 8px;
        }
        .halloween-volume-panel { width: 140px; }
    }
    .quiz-time-icon {
        position: relative;
        width: 62px;
        height: 62px;
        margin: 0 auto 12px;
        border: 5px solid #267bc8;
        border-radius: 50%;
        background: linear-gradient(145deg, #ffffff, #edf7ff);
        box-shadow: inset 0 0 0 3px rgba(38, 123, 200, 0.12), 0 8px 18px rgba(38, 123, 200, 0.16);
    }
    .quiz-time-icon::before,
    .quiz-time-icon::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 4px;
        border-radius: 999px;
        background: #174e86;
        transform-origin: 50% 100%;
    }
    .quiz-time-icon::before {
        height: 19px;
        transform: translate(-50%, -100%) rotate(0deg);
    }
    .quiz-time-icon::after {
        height: 16px;
        transform: translate(-50%, -100%) rotate(118deg);
    }
    .quiz-stamp-icon {
        width: 100px;
        height: 100px;
        object-fit: contain;
    }
    .stamp-quiz-card {
        max-width: 520px;
        margin: 0 auto;
        padding: 24px;
        background: #fff;
        border: 1px solid #e8eef5;
        border-radius: 18px;
        box-shadow: 0 8px 24px rgba(24, 72, 112, 0.08);
        text-align: center;
    }
    #stamp-quiz-container .quiz-top-ctrl {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
    }
    .stamp-quiz-status-row {
        display: block;
    }
    .stamp-quiz-life-row {
        display: contents;
    }
    #stamp-quiz-container .quiz-home-btn {
        margin-left: 10px !important;
    }
    #stamp-quiz-container .quiz-life-bar {
        flex: 0 0 auto;
    }
    #stamp-quiz-container .awards-container {
        text-align: center;
    }
    #stamp-quiz-score {
        min-width: 160px;
        text-align: center !important;
    }
    .stamp-quiz-score-main {
        display: block;
    }
    #stamp-quiz-achievement-line {
        min-height: 22px;
        margin: -6px 0 14px;
        text-align: center;
        font-size: 14px;
        font-weight: 900;
    }
    #stamp-quiz-achievement-line:empty {
        display: none;
    }
    .stamp-quiz-achievement {
        white-space: nowrap;
    }
    #stamp-quiz-timer-text {
        font-size: 12px;
    }
    .stamp-quiz-question {
        margin: 0 0 18px;
        color: #123250;
        font-size: 22px;
        font-weight: 900;
    }
    .stamp-quiz-item-image {
        display: block;
        width: 150px;
        height: 150px;
        margin: 0 auto 14px;
        object-fit: contain;
        background: linear-gradient(180deg, #f5f9ff, #edf4fb);
        border-radius: 16px;
    }
    .stamp-quiz-item-name {
        display: none;
        color: #1d2d3f;
        font-size: 18px;
        font-weight: 900;
        word-break: keep-all;
    }
    .stamp-quiz-feedback {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 54px;
        margin: 16px auto 0;
        padding: 12px 14px;
        border-radius: 14px;
        background: #f6f8fb;
        color: #4a5b6d;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.45;
        text-align: center;
    }
    .stamp-quiz-feedback.is-correct {
        background: #eef9f1;
        color: #15803d;
        border: 1px solid #bce9c8;
    }
    .stamp-quiz-feedback.is-wrong {
        background: #fff1f2;
        color: #d12f45;
        border: 1px solid #ffc4cc;
    }
    .stamp-quiz-options {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
        margin: 22px auto 8px;
    }
    .stamp-quiz-option {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        padding: 4px;
        border: 2px solid #d9e5f2;
        border-radius: 18px;
        background: #fff;
        cursor: pointer;
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .stamp-quiz-option:hover:not(:disabled) {
        border-color: #267bc8;
        box-shadow: 0 8px 16px rgba(38, 123, 200, 0.14);
        transform: translateY(-2px);
    }
    .stamp-quiz-option:disabled {
        cursor: default;
        opacity: 0.7;
    }
    .stamp-quiz-option img {
        width: 58px;
        height: 58px;
        object-fit: contain;
    }
    .quiz-mode-card .quiz-dual-icon .category-icon-img {
        width: 58px;
        height: 58px;
        object-fit: contain;
    }
    .quiz-subcategory-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 14px;
    }
    .quiz-subcategory-btn {
        min-width: 92px;
        padding: 10px 16px;
        border: 1px solid #d7e7fb;
        border-radius: 999px;
        background: #eef7ff;
        color: #174e86;
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }
    .quiz-subcategory-btn:hover {
        background: #dff0ff;
        box-shadow: 0 5px 12px rgba(36, 126, 201, 0.14);
        transform: translateY(-1px);
    }
    .league-match-box {
        margin-bottom: 15px;
        padding: 20px 10px;
        background: #fff;
        border: 1px solid #f0f0f0;
        border-radius: 16px;
    }
    .match-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .league-item {
        width: 42%;
        padding: 8px;
        text-align: center;
        cursor: pointer;
        border-radius: 10px;
        transition: background-color 0.2s;
    }
    .league-item:hover {
        background-color: #f8fbff;
    }
    .league-item:active {
        transform: scale(0.97);
    }
    .league-item img {
        display: block;
        width: 80px;
        height: 80px;
        margin: 0 auto 10px;
        object-fit: contain;
    }
    .league-item span {
        color: #333;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.2;
    }
    .vs-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        min-width: 60px;
    }
    .vs-text {
        color: #eee;
        font-size: 20px;
        font-weight: bold;
    }
    .vote-dots {
        min-height: 1.2em;
        height: 30px;
        margin-top: 8px;
        color: #007bff;
        font-size: 9px;
        letter-spacing: 2px;
        word-break: break-all;
    }
    .league-controls {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin-top: 25px;
    }
    .collection-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-top: 20px;
    }
    .collection-item {
        padding: 15px 10px;
        text-align: center;
        background: #fff;
        border: 1px solid #eef4ff;
        border-radius: 15px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    }
    .collection-item img {
        width: 70px;
        height: 70px;
        margin-bottom: 5px;
        object-fit: contain;
    }
    .collection-item .rank-badge {
        display: inline-block;
        margin-bottom: 5px;
        padding: 2px 8px;
        color: #007bff;
        font-size: 9px;
        font-weight: bold;
        background: #eef4ff;
        border-radius: 10px;
    }
    .collection-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 15px;
    }
    .item-img-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 82px;
        height: 82px;
        border-radius: 14px;
    }
    .collection-card-name {
        margin-top: 10px;
        color: #333;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.25;
        text-align: center;
    }
    .final-card-name {
        display: block;
        color: #222;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
        text-align: center;
    }
    .final-origin-info {
        margin-top: 6px;
        color: #888;
        font-size: 9px;
        font-weight: 500;
        line-height: 1.35;
        text-align: center;
    }
    .screenshot-btn {
        background: #ff8c42;
        color: #fff;
        box-shadow: 0 4px 10px rgba(255, 140, 66, 0.24);
    }
    .screenshot-btn:hover {
        background: #f17c2f;
    }
    .screenshot-btn:disabled {
        cursor: wait;
        opacity: 0.75;
    }
    #final-result-section .collection-card span,
    #final-result-section .rank-badge {
        display: none !important;
    }
    #final-result-card,
    #final-result-capture,
    #collection-grid {
        background: #fff;
    }
    #final-result-card {
        overflow: hidden;
    }
    #final-result-capture {
        padding: 12px 12px 18px;
        border-radius: 18px;
    }
    .home-exit-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: auto;
        min-width: 38px;
        height: 38px;
        padding: 0 12px;
        cursor: pointer;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 999px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        z-index: 100;
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .home-exit-btn img {
        width: 14px;
        height: auto;
        object-fit: contain;
        flex-shrink: 0;
    }
    .home-exit-btn .btn-text {
        color: #444;
        font-size: 9px;
        font-weight: bold;
        line-height: 1;
        white-space: nowrap;
    }
    .home-exit-btn:hover {
        background-color: #f1f3f5;
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
        transform: scale(1.1);
    }
    .home-exit-btn:active {
        transform: scale(0.95);
    }
    .quiz-home-btn {
        position: static !important;
        top: auto !important;
        right: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex: 0 0 auto;
        gap: 4px;
        width: auto !important;
        height: 38px !important;
        padding: 0 12px !important;
        background-color: #ffffff;
        border: 1px solid #ddd;
        border-radius: 20px !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: auto;
    }
    .quiz-home-btn img {
        width: 18px !important;
        height: auto;
    }
    .quiz-home-btn .btn-text {
        color: #444;
        font-size: 9px;
        font-weight: bold;
        line-height: 1;
        white-space: nowrap;
    }
    .quiz-home-btn:hover {
        background-color: #f8f9fa;
        transform: translateY(-2px);
    }
    .home-icon-only-btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 50% !important;
    }
    .home-icon-only-btn img {
        width: 16px !important;
        height: 16px !important;
        object-fit: contain;
    }
    .home-icon-only-btn .btn-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    body.theme-dark .home-icon-only-btn {
        background: rgba(18, 23, 35, 0.94) !important;
        border-color: rgba(230, 199, 145, 0.22) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28) !important;
    }
    body.theme-dark .home-icon-only-btn:hover {
        background: rgba(26, 32, 47, 0.98) !important;
        border-color: rgba(230, 199, 145, 0.36) !important;
    }
    .quiz-container .btn-home {
        margin-top: 30px;
    }
    .home-btn-instant {
        cursor: pointer;
    }
    input#classic-answer-input {
        width: 100%;
        padding: 14px 16px;
        color: #111;
        font-size: 16px;
        border: 1px solid #ddd;
        border-radius: 10px;
        box-sizing: border-box;
        background: #fff;
    }
    input#classic-answer-input::placeholder {
        color: rgba(17, 17, 17, 0.48);
    }
    body.theme-dark #boardgame-classic-play-section input#classic-answer-input {
        color: #111 !important;
        caret-color: #111;
        background: #fff !important;
        border-color: #ddd !important;
    }
    body.theme-dark #boardgame-classic-play-section input#classic-answer-input::placeholder {
        color: rgba(17, 17, 17, 0.48) !important;
    }
    input#classic-answer-input:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.12);
    }
    .classic-game-shell {
        max-width: 680px;
        margin: 0;
    }
    #boardgame-classic-play-section .classic-game-shell {
        position: relative;
        overflow: hidden;
        background:
            linear-gradient(180deg, rgba(249, 242, 225, 0.2), rgba(105, 74, 42, 0.1)),
            url("boardgame/classic/classic field.webp") center 48% / 118% auto no-repeat;
        border: 1px solid rgba(112, 79, 43, 0.35);
        box-shadow: 0 18px 46px rgba(33, 25, 18, 0.22);
    }
    #boardgame-classic-play-section .classic-game-shell > * {
        position: relative;
        z-index: 1;
    }
    #boardgame-classic-play-section .classic-title-row {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        column-gap: 18px;
        min-height: 40px;
        margin-bottom: 18px;
    }
    #boardgame-classic-play-section .classic-title-row h2 {
        grid-column: 2;
        justify-self: center;
    }
    #boardgame-classic-play-section .classic-title-row .classic-music-control {
        grid-column: 3;
        justify-self: start;
        align-items: flex-end;
    }
    #boardgame-classic-play-section .classic-title-row .classic-volume-panel {
        top: calc(100% + 8px);
        bottom: auto;
    }
    #boardgame-classic-play-section .classic-game-shell h2 {
        color: #5d3f24 !important;
        text-shadow: 0 1px 0 rgba(255, 244, 218, 0.8);
    }
    .classic-music-control {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .classic-music-btn {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px;
        min-width: 96px;
        height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(101, 70, 37, 0.24);
        background: rgba(255, 248, 232, 0.9);
        box-shadow: 0 7px 16px rgba(73, 45, 20, 0.16);
    }
    .classic-music-btn .btn-text {
        color: #5a3a1e;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.04em;
    }
    .classic-music-btn .music-icon {
        color: #b77826;
        font-size: 9px;
        line-height: 1;
    }
    .classic-music-btn.is-on {
        background: linear-gradient(180deg, rgba(238, 199, 129, 0.96), rgba(197, 130, 48, 0.96));
        border-color: rgba(104, 66, 26, 0.36);
        box-shadow: 0 8px 18px rgba(154, 93, 30, 0.28);
    }
    .classic-music-btn.is-on .btn-text,
    .classic-music-btn.is-on .music-icon {
        color: #fff5d8;
        text-shadow: 0 1px 2px rgba(75, 43, 14, 0.28);
    }
    .classic-volume-panel {
        position: absolute;
        right: 0;
        bottom: calc(100% + 8px);
        width: 168px;
        padding: 8px 10px;
        border-radius: 14px;
        border: 1px solid rgba(101, 70, 37, 0.22);
        background: rgba(255, 249, 235, 0.96);
        box-shadow: 0 10px 24px rgba(68, 42, 18, 0.22);
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 30;
    }
    .classic-music-control.is-open .classic-volume-panel,
    .classic-music-control:focus-within .classic-volume-panel {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .classic-volume-label {
        display: block;
        margin-bottom: 5px;
        color: #5a3a1e;
        font-size: 9px;
        font-weight: 900;
        text-align: center;
    }
    .classic-volume-slider {
        width: 100%;
        accent-color: #c68230;
        cursor: pointer;
    }
    body.theme-dark #boardgame-classic-play-section .classic-volume-panel {
        background: rgba(27, 22, 18, 0.96);
        border-color: rgba(236, 194, 120, 0.22);
    }
    body.theme-dark #boardgame-classic-play-section .classic-volume-label {
        color: #f3dfbd;
    }
    #boardgame-classic-play-section .classic-game-score {
        color: #4a3523;
        text-shadow: 0 1px 0 rgba(255, 244, 218, 0.75);
    }
    #boardgame-classic-section .classic-mode-shell {
        position: relative;
        overflow: hidden;
        background:
            url("boardgame/classic/classic ready field.webp") center / 240% auto no-repeat,
            #f6edd9;
        border: 2px solid #6a4327;
        box-shadow: none;
    }
    #boardgame-classic-section .classic-mode-shell::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: rgba(255, 244, 218, 0.78);
        pointer-events: none;
    }
    #boardgame-classic-section .classic-mode-shell > * {
        position: relative;
        z-index: 1;
    }
    #boardgame-classic-section .classic-mode-head {
        margin-bottom: 18px;
        text-align: center;
    }
    #boardgame-classic-section .classic-guide-music-row {
        display: flex;
        justify-content: flex-end;
        min-height: 0;
        z-index: 2;
    }
    #classic-guide-music-control {
        align-self: flex-start;
    }
    #classic-guide-music-control .classic-volume-panel {
        top: calc(100% + 8px);
        bottom: auto;
    }
    #boardgame-classic-section .classic-mode-head h2 {
        margin-top: 0;
        color: #6a4327;
        text-shadow: 0 1px 0 rgba(255, 245, 220, 0.85);
    }
    #boardgame-classic-section .classic-mode-head p {
        color: #74543b;
        font-size: 14px;
        line-height: 1.55;
    }
    #boardgame-classic-section .classic-start-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 560px;
        margin: 0 auto 22px;
        gap: 10px;
    }
    #boardgame-classic-section .classic-start-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 128px;
        padding: 12px 16px;
        background: rgba(232, 209, 169, 0.82);
        border: 1px solid rgba(117, 78, 42, 0.2);
        border-radius: 12px;
        box-shadow: none;
    }
    #boardgame-classic-section .classic-start-card:hover {
        background: rgba(223, 195, 152, 0.88);
        border-color: rgba(117, 78, 42, 0.38);
    }
    #boardgame-classic-section .classic-start-card .name {
        color: #5b371e;
        text-align: center;
    }
    #boardgame-classic-section .classic-start-card .icon-img-wrapper {
        width: 54px;
        height: 54px;
        margin: 0 auto 10px;
        border-radius: 50%;
        background: #f5ead5;
        box-shadow: inset 0 0 0 1px rgba(126, 82, 42, 0.18);
    }
    #boardgame-classic-section .classic-start-card .category-icon-img {
        display: block;
        width: 48px;
        height: 48px;
        object-fit: contain;
    }
    #boardgame-classic-section #classic-mode-face-preview {
        width: 42px;
        height: 42px;
        margin: 3px auto 0;
        object-fit: contain;
        object-position: center;
    }
    #boardgame-classic-section .classic-howto-card {
        max-width: 560px;
        margin: 0 auto 24px;
        padding: 16px 18px;
        border-radius: 16px;
        background: rgba(255, 240, 207, 0.82);
        border: 1px solid rgba(122, 86, 57, 0.28);
        color: #6b4428;
        line-height: 1.7;
        text-align: center;
        box-shadow: none;
        text-shadow: none;
        backdrop-filter: blur(2px);
    }
    #boardgame-classic-section .classic-howto-card strong {
        display: block;
        margin-bottom: 8px;
        color: #5b371e;
    }
    #boardgame-classic-section .classic-howto-detail-card {
        text-align: center;
    }
    #boardgame-classic-section .classic-howto-lead {
        margin-bottom: 12px;
        color: #5f3f25;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.6;
        text-align: center;
    }
    #boardgame-classic-section .classic-howto-section {
        margin-top: 10px;
        padding: 12px 14px;
        border: 1px solid rgba(122, 86, 57, 0.18);
        border-radius: 12px;
        background: rgba(255, 249, 235, 0.58);
    }
    #boardgame-classic-section .classic-howto-section h3 {
        margin: 0 0 8px;
        color: #5b371e;
        font-size: 13px;
        font-weight: 900;
    }
    #boardgame-classic-section .classic-howto-section ul {
        margin: 0;
        padding-left: 18px;
        text-align: left;
    }
    #boardgame-classic-section .classic-howto-section li {
        margin: 3px 0;
        color: #6b4428;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.55;
    }
    #boardgame-classic-section .classic-score-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }
    #boardgame-classic-section .classic-score-chip {
        padding: 8px 4px;
        border-radius: 10px;
        background: rgba(107, 68, 40, 0.11);
        color: #5b371e;
        font-size: 11px;
        font-weight: 900;
        text-align: center;
    }
    #boardgame-classic-section .classic-score-chip span {
        display: block;
        margin-top: 2px;
        color: #9a622f;
        font-size: 10px;
    }
    @media (max-width: 520px) {
        #boardgame-classic-section .classic-score-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    .classic-result-overlay {
        padding: 18px;
        background: rgba(12, 9, 7, 0.72);
        backdrop-filter: blur(5px);
    }
    .classic-result-card {
        width: min(92vw, 560px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        pointer-events: auto;
    }
    .classic-result-stamp-wrap {
        position: relative;
        width: min(86vw, 520px);
        aspect-ratio: 1 / 1;
        animation: classic-result-stamp-in 520ms ease both;
        filter: drop-shadow(0 20px 34px rgba(36, 24, 13, 0.42));
    }
    .classic-result-stamp {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
        user-select: none;
        pointer-events: none;
    }
    .classic-result-score {
        position: absolute;
        left: 48%;
        top: 53.5%;
        transform: translate(-50%, -50%);
        min-width: 150px;
        padding: 5px 12px 7px;
        border-radius: 10px;
        color: #5a341b;
        text-align: center;
        text-shadow: 0 1px 0 rgba(255, 244, 205, 0.72);
    }
    .classic-result-label {
        display: block;
        color: #8c6336;
        font-size: clamp(10px, 1.8vw, 13px);
        font-weight: 900;
        line-height: 1;
    }
    .classic-result-score strong {
        display: block;
        color: #3f2615;
        font-size: clamp(34px, 6.6vw, 54px);
        font-weight: 1000;
        line-height: 0.9;
    }
    .classic-result-line-bar,
    .classic-result-record-bar {
        width: min(84vw, 430px);
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 18px;
        border: 1px solid rgba(210, 177, 121, 0.34);
        border-radius: 14px;
        background: rgba(24, 18, 13, 0.78);
        color: #f7e8bf;
        box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22);
        text-align: center;
        animation: classic-result-actions-in 520ms ease 80ms both;
    }
    .classic-result-line-bar {
        font-size: clamp(12px, 2.1vw, 16px);
        font-weight: 900;
        line-height: 1.45;
        word-break: keep-all;
    }
    .classic-result-record-bar {
        flex-direction: column;
        gap: 2px;
        animation-delay: 100ms;
    }
    .classic-result-record-bar span {
        color: #d6b370;
        font-size: clamp(11px, 1.8vw, 14px);
        font-weight: 1000;
        line-height: 1;
    }
    .classic-result-record-bar strong {
        color: #fff4d4;
        font-size: clamp(18px, 3.6vw, 26px);
        font-weight: 1000;
        line-height: 1.05;
    }
    .classic-result-actions {
        width: min(84vw, 430px);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 12px;
        border: 1px solid rgba(210, 177, 121, 0.34);
        border-radius: 14px;
        background: rgba(24, 18, 13, 0.72);
        box-shadow: 0 16px 28px rgba(0, 0, 0, 0.26);
        animation: classic-result-actions-in 520ms ease 120ms both;
    }
    .classic-result-actions .btn {
        min-height: 46px;
    }
    @keyframes classic-result-stamp-in {
        from { opacity: 0; transform: translateY(18px) scale(0.92); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes classic-result-actions-in {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @media (max-width: 520px) {
        .classic-result-overlay {
            padding: 12px;
        }
        .classic-result-card {
            gap: 10px;
        }
        .classic-result-stamp-wrap {
            width: min(94vw, 390px);
        }
        .classic-result-score {
            top: 53%;
            min-width: 118px;
            padding: 4px 8px 6px;
        }
        .classic-result-line-bar,
        .classic-result-record-bar,
        .classic-result-actions {
            width: min(92vw, 340px);
        }
        .classic-result-line-bar,
        .classic-result-record-bar {
            min-height: 42px;
            padding: 8px 12px;
            border-radius: 12px;
        }
        .classic-result-actions {
            padding: 10px;
            gap: 8px;
        }
        .classic-result-actions .btn {
            min-height: 42px;
        }
    }
    #boardgame-relic-section .relic-mode-shell {
        background:
            radial-gradient(circle at 50% 0%, rgba(178, 188, 112, 0.12), transparent 46%),
            radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.035), transparent 52%),
            linear-gradient(180deg, #151b10 0%, #0f140d 58%, #090d08 100%);
        border: 1px solid rgba(169, 181, 110, 0.5);
        box-shadow: 0 18px 48px rgba(18, 26, 10, 0.34);
    }
    #boardgame-relic-section .relic-mode-head {
        text-align: center;
        margin-bottom: 20px;
    }
    .relic-guide-music-slot {
        position: relative;
        min-height: 36px;
        min-width: 96px;
    }
    #boardgame-relic-section .relic-mode-head h2 {
        margin-top: 0;
        color: #e6dfad;
        text-shadow: 0 0 16px rgba(199, 217, 127, 0.36);
    }
    #boardgame-relic-section .relic-mode-head p {
        color: #d8d3b0;
        font-size: 14px;
        line-height: 1.55;
    }
    #boardgame-relic-section .relic-start-grid {
        max-width: 280px;
        margin: 0 auto 18px;
    }
    #boardgame-relic-section .relic-start-card {
        background: linear-gradient(180deg, rgba(50, 56, 38, 0.94), rgba(21, 24, 16, 0.96));
        border: 2px solid rgba(182, 190, 124, 0.75);
        box-shadow: inset 0 0 22px rgba(201, 218, 132, 0.14), 0 12px 28px rgba(0, 0, 0, 0.28);
    }
    #boardgame-relic-section .relic-start-card:hover {
        border-color: #e2df9a;
        box-shadow: inset 0 0 24px rgba(222, 226, 143, 0.2), 0 14px 30px rgba(0, 0, 0, 0.32);
    }
    #boardgame-relic-section .relic-start-card .icon-img-wrapper {
        width: 90px;
        height: 112px;
        margin: 0 auto 8px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    #boardgame-relic-section .relic-start-card .category-icon-img {
        width: 90px;
        height: 112px;
        object-fit: contain;
    }
    #boardgame-relic-section .relic-start-card .name {
        color: #f0e7b8;
    }
    #boardgame-mandala-section .relic-mode-shell,
    #boardgame-mandala-simulate-section .relic-mode-shell {
        position: relative;
        background:
            radial-gradient(circle at 50% 0%, rgba(83, 157, 255, 0.18), transparent 45%),
            radial-gradient(circle at 50% 52%, rgba(147, 190, 255, 0.08), transparent 54%),
            linear-gradient(180deg, #101a31 0%, #071125 58%, #050914 100%);
        border: 1px solid rgba(95, 159, 255, 0.52);
        box-shadow: 0 18px 48px rgba(15, 45, 92, 0.34);
        text-align: center;
    }
    #boardgame-mandala-section .relic-mode-head,
    #boardgame-mandala-simulate-section .relic-mode-head {
        text-align: center;
        margin-bottom: 20px;
    }
    .mandala-music-control {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 7px;
        z-index: 18;
    }
    .mandala-music-control.is-intro {
        position: absolute;
        top: 16px;
        right: 16px;
    }
    .mandala-music-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 86px;
        height: 36px;
        padding: 0 12px;
        border: 1px solid rgba(104, 169, 255, 0.48);
        border-radius: 999px;
        background: rgba(2, 8, 22, 0.88);
        color: rgba(219, 235, 255, 0.72);
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.24), inset 0 0 13px rgba(65, 138, 255, 0.13);
        cursor: pointer;
    }
    .mandala-music-btn .music-icon,
    .mandala-music-btn .btn-text {
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0;
        line-height: 1;
    }
    .mandala-music-btn.is-on {
        background: rgba(45, 92, 176, 0.9);
        color: #eef7ff;
        box-shadow: 0 0 12px rgba(82, 157, 255, 0.42), inset 0 0 10px rgba(153, 207, 255, 0.18);
    }
    .mandala-volume-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: 138px;
        padding: 8px 10px;
        box-sizing: border-box;
        border: 1px solid rgba(104, 169, 255, 0.38);
        border-radius: 8px;
        background: rgba(2, 8, 22, 0.96);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34), inset 0 0 14px rgba(65, 138, 255, 0.12);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        transition: opacity 160ms ease, transform 160ms ease;
    }
    .mandala-music-control.is-open .mandala-volume-panel,
    .mandala-music-control:focus-within .mandala-volume-panel {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    .mandala-volume-label {
        display: block;
        margin-bottom: 5px;
        color: rgba(219, 235, 255, 0.76);
        font-size: 8px;
        font-weight: 900;
        text-align: left;
    }
    .mandala-volume-slider {
        width: 100%;
        min-width: 0;
        height: 20px;
        margin: 0;
        accent-color: #659dff;
        touch-action: none;
    }
    #boardgame-mandala-simulate-section .mandala-sim-head {
        position: relative;
        min-height: 92px;
        padding: 8px 132px 0;
        box-sizing: border-box;
    }
    #boardgame-mandala-section .relic-mode-head h2,
    #boardgame-mandala-simulate-section .relic-mode-head h2 {
        margin-top: 0;
        color: #dfeaff;
        text-shadow: 0 0 18px rgba(88, 156, 255, 0.48);
    }
    #boardgame-mandala-section .relic-mode-head p,
    #boardgame-mandala-simulate-section .relic-mode-head p {
        color: #cddcff;
        font-size: 14px;
        line-height: 1.55;
    }
    #boardgame-mandala-section .relic-start-grid {
        max-width: 280px;
        margin: 0 auto 18px;
    }
    #boardgame-mandala-section .relic-start-card {
        background:
            radial-gradient(circle at 50% 34%, rgba(118, 182, 255, 0.20), transparent 46%),
            linear-gradient(180deg, rgba(16, 36, 72, 0.96), rgba(6, 13, 31, 0.98));
        border: 2px solid rgba(105, 171, 255, 0.78);
        box-shadow: inset 0 0 24px rgba(105, 171, 255, 0.16), 0 12px 28px rgba(0, 0, 0, 0.30);
    }
    #boardgame-mandala-section .relic-start-card:hover {
        border-color: #c6ddff;
        box-shadow: inset 0 0 28px rgba(130, 190, 255, 0.24), 0 14px 30px rgba(0, 0, 0, 0.34);
    }
    #boardgame-mandala-section .relic-start-card .icon-img-wrapper {
        width: 124px;
        height: 124px;
        margin: 0 auto 8px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(129, 188, 255, 0.18), transparent 68%);
        box-shadow: 0 0 28px rgba(74, 145, 255, 0.24);
    }
    #boardgame-mandala-section .relic-start-card .category-icon-img {
        width: 124px;
        height: 124px;
        object-fit: contain;
        filter: drop-shadow(0 0 16px rgba(100, 169, 255, 0.34));
    }
    #boardgame-mandala-section .relic-start-card .name {
        color: #e4efff;
        text-shadow: 0 0 12px rgba(92, 160, 255, 0.38);
    }
    #boardgame-mandala-section .relic-hard-warning {
        color: #9bb6da;
    }
    #boardgame-mandala-section .relic-difficulty-card {
        border-color: rgba(105, 171, 255, 0.58);
        background:
            radial-gradient(circle at 50% 0%, rgba(91, 168, 255, 0.18), transparent 54%),
            linear-gradient(180deg, rgba(12, 31, 67, 0.96), rgba(4, 12, 29, 0.98));
        color: #e8f3ff;
    }
    #boardgame-mandala-section .relic-difficulty-card.is-normal {
        border-color: rgba(157, 210, 255, 0.88);
        box-shadow: inset 0 0 24px rgba(90, 168, 255, 0.18), 0 0 18px rgba(58, 142, 255, 0.16);
    }
    #boardgame-mandala-section .relic-difficulty-card.is-hard {
        border-color: rgba(102, 142, 255, 0.88);
        box-shadow: inset 0 0 24px rgba(73, 117, 255, 0.18), 0 0 18px rgba(43, 92, 255, 0.16);
        cursor: pointer;
    }
    #boardgame-mandala-section .relic-howto-card,
    #boardgame-mandala-simulate-section .relic-howto-card {
        border: 1px solid rgba(98, 165, 255, 0.68);
        background:
            radial-gradient(circle at 50% 0%, rgba(105, 174, 255, 0.18), transparent 54%),
            linear-gradient(180deg, rgba(14, 32, 66, 0.94), rgba(6, 14, 34, 0.98));
        box-shadow: inset 0 0 26px rgba(94, 160, 255, 0.12);
        color: #dceaff;
        text-align: center;
    }
    #boardgame-mandala-section .relic-howto-card strong,
    #boardgame-mandala-simulate-section .relic-howto-card strong {
        color: #eef6ff;
        text-shadow: 0 0 14px rgba(114, 181, 255, 0.42);
    }
    #boardgame-mandala-section .relic-howto-lead,
    #boardgame-mandala-simulate-section .relic-howto-lead {
        color: #d2e2ff;
        text-align: center;
    }
    #boardgame-mandala-section .mandala-sim-reference-card {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #boardgame-mandala-section .mandala-sim-reference-card .relic-howto-lead {
        width: 100%;
        margin-top: 14px;
    }
    .mandala-sim-reference-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: min(225px, 100%);
        margin-top: 16px;
        padding: 11px 24px;
        border: 1px solid rgba(151, 205, 255, 0.82);
        border-radius: 8px;
        background:
            linear-gradient(180deg, rgba(91, 171, 255, 0.94), rgba(31, 84, 174, 0.94));
        color: #f8fbff;
        font-family: 'KCCMurukmuruk', sans-serif;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0;
        text-shadow: 0 1px 6px rgba(2, 17, 42, 0.54);
        box-shadow: 0 10px 24px rgba(48, 122, 229, 0.28), inset 0 0 18px rgba(211, 236, 255, 0.18);
        cursor: pointer;
        transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }
    .mandala-sim-reference-action:hover,
    .mandala-sim-reference-action:focus-visible {
        border-color: rgba(222, 243, 255, 0.96);
        box-shadow: 0 12px 28px rgba(64, 145, 255, 0.36), inset 0 0 22px rgba(222, 243, 255, 0.24);
        transform: translateY(-1px);
        outline: none;
    }
    #boardgame-mandala-section .relic-howto-section {
        border-color: rgba(105, 171, 255, 0.28);
        background: rgba(4, 13, 32, 0.48);
    }
    #boardgame-mandala-section .relic-howto-section h3 {
        color: #dceaff;
        text-shadow: 0 0 12px rgba(103, 171, 255, 0.38);
    }
    #boardgame-mandala-section .relic-howto-section li {
        color: #d2e2ff;
    }
    #boardgame-mandala-section .relic-howto-example {
        border-color: rgba(105, 171, 255, 0.2);
        background: rgba(91, 159, 255, 0.08);
        color: #bcd3f5;
    }
    .mandala-sim-panel {
        position: relative;
        max-width: 620px;
        margin: 0 auto 18px;
        padding: 18px;
        border: 1px solid rgba(97, 166, 255, 0.52);
        border-radius: 18px;
        background:
            radial-gradient(circle at 50% 16%, rgba(101, 172, 255, 0.17), transparent 46%),
            linear-gradient(180deg, rgba(8, 20, 46, 0.95), rgba(4, 9, 24, 0.98));
        box-shadow: inset 0 0 28px rgba(89, 156, 255, 0.12), 0 18px 38px rgba(0, 0, 0, 0.28);
    }
    .mandala-haze-toggle {
        position: absolute;
        left: -24px;
        top: -24px;
        height: 32px;
        padding: 0 11px;
        border: 1px solid rgba(116, 181, 255, 0.48);
        border-radius: 999px;
        background: rgba(2, 8, 24, 0.74);
        color: rgba(215, 232, 255, 0.78);
        font-family: inherit;
        font-size: 11px;
        font-weight: 900;
        cursor: pointer;
        box-shadow: inset 0 0 14px rgba(76, 145, 255, 0.1);
    }
    .mandala-haze-toggle.is-active {
        border-color: rgba(171, 214, 250, 0.96);
        color: #f2f8ff;
        background: linear-gradient(135deg, rgba(8, 18, 42, 0.96), rgba(1, 5, 17, 0.98));
        box-shadow: 0 0 16px rgba(97, 166, 255, 0.2), inset 0 0 18px rgba(76, 145, 255, 0.14);
    }
    .mandala-sim-controls {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
    }
    .mandala-sim-controls label {
        color: #dbeaff;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.04em;
    }
    .mandala-digit-input {
        width: min(260px, 100%);
        height: 42px;
        box-sizing: border-box;
        border: 1px solid rgba(116, 181, 255, 0.72);
        border-radius: 12px;
        background: rgba(2, 8, 24, 0.78);
        color: #f2f8ff;
        text-align: center;
        font-family: inherit;
        font-size: 22px;
        font-weight: 900;
        outline: none;
        box-shadow: inset 0 0 18px rgba(76, 145, 255, 0.16);
    }
    .mandala-digit-input:focus {
        border-color: #d7eaff;
        box-shadow: inset 0 0 20px rgba(97, 166, 255, 0.22), 0 0 0 3px rgba(97, 166, 255, 0.18);
    }
    .mandala-magnifier-toggle {
        position: absolute;
        right: -24px;
        top: -24px;
        height: 34px;
        padding: 0 12px;
        border: 1px solid rgba(116, 181, 255, 0.58);
        border-radius: 999px;
        background: rgba(2, 8, 24, 0.72);
        color: rgba(215, 232, 255, 0.82);
        font-family: inherit;
        font-size: 11px;
        font-weight: 900;
        cursor: pointer;
        box-shadow: inset 0 0 14px rgba(76, 145, 255, 0.12);
    }
    .mandala-magnifier-toggle.is-active {
        border-color: rgba(171, 214, 250, 0.96);
        color: #f2f8ff;
        background: linear-gradient(135deg, rgba(18, 76, 134, 0.9), rgba(9, 26, 69, 0.92));
        box-shadow: 0 0 16px rgba(97, 166, 255, 0.24), inset 0 0 18px rgba(76, 145, 255, 0.18);
    }
    @media (max-width: 600px) {
        #boardgame-mandala-simulate-section .mandala-sim-head {
            min-height: 132px;
            padding: 52px 6px 0;
        }
        #boardgame-mandala-simulate-section .mandala-sim-head .mandala-haze-toggle {
            left: 0;
            top: 6px;
        }
        #boardgame-mandala-simulate-section .mandala-sim-head .mandala-magnifier-toggle {
            right: 0;
            top: 6px;
        }
    }
    .mandala-preview {
        position: relative;
        aspect-ratio: 1032 / 1456;
        width: min(100%, 460px);
        margin: 0 auto;
        border-radius: 16px;
        background: #030814;
        overflow: visible;
    }
    .mandala-preview::before {
        content: "";
        position: absolute;
        left: 13.3%;
        top: 19.1%;
        width: 73.4%;
        aspect-ratio: 1;
        border-radius: 50%;
        background-image:
            linear-gradient(rgba(88, 161, 255, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(88, 161, 255, 0.05) 1px, transparent 1px);
        background-size: 28px 28px;
        mask-image: radial-gradient(circle, #000 55%, transparent 74%);
        opacity: 0.5;
    }
    .mandala-preview::after {
        content: "";
        position: absolute;
        left: 12.5%;
        top: 18.4%;
        width: 75%;
        aspect-ratio: 1;
        z-index: 4;
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        background:
            radial-gradient(circle at 50% 50%, rgba(0, 2, 8, 1) 0 54%, rgba(0, 3, 10, 0.98) 65%, rgba(0, 4, 13, 0.82) 76%, rgba(0, 7, 18, 0.38) 89%, rgba(0, 8, 18, 0.04) 100%),
            conic-gradient(from 18deg at 50% 50%, rgba(0, 0, 0, 0.18), rgba(28, 55, 82, 0.08), rgba(0, 0, 0, 0.22), rgba(12, 32, 54, 0.07), rgba(0, 0, 0, 0.18));
        box-shadow:
            inset 0 0 42px rgba(0, 0, 0, 0.96),
            inset 0 0 96px rgba(0, 0, 0, 0.72),
            0 0 18px rgba(0, 0, 0, 0.38);
        filter: blur(0.35px);
        transition: opacity 160ms ease;
    }
    .mandala-preview.is-haze-active::after {
        opacity: 1;
    }
    .mandala-preview.is-haze-active > .mandala-field-scene > .mandala-field-pattern {
        opacity: 0.2;
        filter: saturate(0.5) brightness(0.26);
    }
    .mandala-field-scene {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        border-radius: 16px;
        background: #020713;
    }
    .mandala-field-scene::after {
        content: "";
        position: absolute;
        inset: -4%;
        z-index: 3;
        pointer-events: none;
        opacity: 0;
        background:
            radial-gradient(circle at 50% 43%, rgba(0, 0, 0, 0.34) 0 25%, rgba(0, 0, 0, 0.7) 55%, rgba(0, 0, 0, 0.92) 100%),
            radial-gradient(circle at 15% 18%, rgba(5, 12, 25, 0.78) 0 18%, transparent 40%),
            radial-gradient(circle at 82% 22%, rgba(3, 10, 22, 0.72) 0 17%, transparent 39%),
            radial-gradient(circle at 13% 78%, rgba(4, 10, 22, 0.74) 0 20%, transparent 43%),
            radial-gradient(circle at 86% 82%, rgba(3, 8, 18, 0.76) 0 18%, transparent 41%),
            conic-gradient(from 12deg at 50% 50%, rgba(0, 0, 0, 0.82), rgba(3, 13, 28, 0.42), rgba(0, 0, 0, 0.88), rgba(2, 9, 20, 0.5), rgba(0, 0, 0, 0.82));
        filter: blur(10px);
        mix-blend-mode: multiply;
        transform: scale(1.02);
        transition: opacity 180ms ease;
    }
    .mandala-preview.is-haze-active > .mandala-field-scene::after {
        opacity: 1;
        animation: mandalaHazeDrift 6s ease-in-out infinite alternate;
    }
    @keyframes mandalaHazeDrift {
        0% {
            transform: scale(1.02) rotate(-0.7deg) translate(-1.2%, -0.7%);
        }
        100% {
            transform: scale(1.045) rotate(0.8deg) translate(1.1%, 0.8%);
        }
    }
    .mandala-field-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        user-select: none;
        -webkit-user-drag: none;
    }
    .mandala-field-pattern {
        position: absolute;
        z-index: 2;
        left: 14%;
        top: 20.5%;
        width: 73.4%;
        aspect-ratio: 1;
        border-radius: 50%;
        overflow: hidden;
        opacity: 1;
        transition: opacity 160ms ease, filter 160ms ease;
    }
    .mandala-field-pattern svg {
        width: 100%;
        height: 100%;
        display: block;
    }
    .mandala-magnifier {
        position: absolute;
        z-index: 5;
        left: 50%;
        top: 50%;
        width: min(620px, 136vw);
        height: min(620px, 136vw);
        transform: translate(-50%, -34%);
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.42));
        transition: opacity 240ms ease, visibility 0s linear 240ms;
    }
    .mandala-preview.is-magnifier-active {
        cursor: none;
        touch-action: none;
        overscroll-behavior: contain;
    }
    .mandala-preview.is-magnifier-active .mandala-magnifier {
        opacity: 1;
        visibility: visible;
        transition: opacity 240ms ease, visibility 0s;
    }
    .mandala-magnifier-lens {
        position: absolute;
        left: 23%;
        top: 4%;
        width: 54%;
        height: 54%;
        border-radius: 50%;
        overflow: hidden;
        background: rgba(7, 16, 38, 0.92);
        box-shadow: inset 0 0 18px rgba(171, 214, 250, 0.28);
        z-index: 1;
    }
    .mandala-magnifier-zoom {
        position: absolute;
        left: 0;
        top: 0;
        transform-origin: 0 0;
        will-change: transform;
    }
    .mandala-magnifier-zoom svg {
        width: 100%;
        height: 100%;
    }
    .mandala-magnifier-zoom .mandala-field-scene {
        border-radius: 16px;
    }
    .mandala-magnifier-zoom .mandala-field-pattern {
        opacity: 1;
        filter: none;
    }
    .mandala-magnifier-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: 3;
        user-select: none;
        -webkit-user-drag: none;
    }
    .mandala-sim-caption {
        margin-top: 12px;
        color: #d7e8ff;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.45;
        text-align: center;
    }
    .mandala-sim-caption span {
        display: block;
        margin-top: 3px;
        color: rgba(215, 232, 255, 0.68);
        font-size: 10px;
    }
    .mandala-game-shell {
        max-width: 640px;
        margin: 0 auto;
        padding: 16px;
        border-radius: 18px;
        border: 1px solid rgba(97, 166, 255, 0.58);
        background:
            radial-gradient(circle at 50% 0%, rgba(83, 157, 255, 0.2), transparent 44%),
            linear-gradient(180deg, #111c34 0%, #071124 62%, #050812 100%);
        box-shadow: 0 18px 48px rgba(10, 35, 78, 0.34);
        color: #e8f3ff;
    }
    .mandala-game-statusbar {
        display: grid;
        grid-template-columns: 104px 1fr 104px;
        gap: 10px;
        align-items: center;
        margin-bottom: 12px;
    }
    .mandala-game-pill {
        min-height: 50px;
        padding: 8px 10px;
        border-radius: 14px;
        border: 1px solid rgba(154, 206, 255, 0.52);
        background: rgba(5, 15, 35, 0.72);
        box-shadow: inset 0 0 18px rgba(85, 158, 255, 0.14);
        text-align: center;
        font-weight: 900;
    }
    .mandala-game-pill span {
        display: block;
        color: rgba(219, 235, 255, 0.72);
        font-size: 9px;
        letter-spacing: 0.06em;
    }
    .mandala-game-pill strong {
        display: block;
        margin-top: 2px;
        color: #f2f8ff;
        font-size: 16px;
        text-shadow: 0 0 12px rgba(122, 190, 255, 0.38);
    }
    .mandala-time-wrap {
        min-width: 0;
    }
    .mandala-time-label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        color: rgba(223, 238, 255, 0.86);
        font-size: 11px;
        font-weight: 900;
    }
    .mandala-time-track {
        height: 14px;
        overflow: hidden;
        border-radius: 999px;
        border: 1px solid rgba(151, 207, 255, 0.58);
        background: rgba(2, 8, 22, 0.88);
        box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
    }
    .mandala-time-fill {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #63d3ff, #5a8fff 58%, #bedcff);
        box-shadow: 0 0 18px rgba(92, 170, 255, 0.58);
        transition: width 140ms linear;
    }
    .mandala-play-field-wrap {
        position: relative;
        max-width: 460px;
        margin: 0 auto;
    }
    .mandala-play-field-wrap .mandala-preview {
        width: 100%;
    }
    .mandala-play-field-wrap .mandala-preview.is-revealed::after,
    .mandala-play-field-wrap .mandala-preview.is-revealed > .mandala-field-scene::after {
        opacity: 0;
    }
    .mandala-play-field-wrap .mandala-preview.is-solved > .mandala-field-scene > .mandala-field-pattern {
        opacity: 1;
        filter: none;
    }
    .mandala-game-over-stamp,
    .mandala-clear-stamp {
        position: absolute;
        z-index: 16;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        filter: blur(7px);
        transform: translateY(8px) scale(0.86);
        transition:
            opacity 520ms ease,
            filter 520ms ease,
            transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
            visibility 0s linear 620ms;
    }
    .mandala-game-over-stamp.is-visible,
    .mandala-clear-stamp.is-visible {
        opacity: 1;
        visibility: visible;
        filter: blur(0);
        transform: translateY(0) scale(1);
        transition-delay: 0s;
    }
    .mandala-game-over-stamp img,
    .mandala-clear-stamp img {
        position: relative;
        z-index: 2;
        display: block;
        width: min(88%, 410px);
        max-height: 88%;
        object-fit: contain;
        filter: drop-shadow(0 20px 32px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 22px rgba(73, 137, 255, 0.28));
    }
    .mandala-clear-dialogue {
        position: absolute;
        z-index: 4;
        left: 50%;
        top: 4%;
        width: min(90%, 420px);
        padding: 11px 14px;
        border: 1px solid currentColor;
        border-radius: 8px;
        background: rgba(0, 4, 12, 0.94);
        color: #ffffff;
        font-size: 14px;
        font-weight: 900;
        line-height: 1.55;
        letter-spacing: 0;
        text-align: center;
        word-break: keep-all;
        overflow-wrap: break-word;
        opacity: 0;
        transform: translate(-50%, -9px);
        transition: opacity 360ms ease 300ms, transform 420ms ease 300ms;
    }
    .mandala-clear-dialogue::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -6px;
        width: 10px;
        height: 10px;
        border-right: 1px solid currentColor;
        border-bottom: 1px solid currentColor;
        background: rgba(0, 4, 12, 0.94);
        transform: translateX(-50%) rotate(45deg);
    }
    .mandala-clear-stamp.is-visible .mandala-clear-dialogue {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    .mandala-clear-stamp.is-normal .mandala-clear-dialogue {
        color: #ffffff;
        text-shadow: 0 0 7px rgba(175, 202, 238, 0.96), 0 0 17px rgba(175, 202, 238, 0.74);
    }
    .mandala-clear-stamp.is-normal .mandala-clear-dialogue::after {
        box-shadow: 5px 5px 11px rgba(175, 202, 238, 0.48);
    }
    .mandala-clear-stamp.is-hard .mandala-clear-dialogue {
        color: rgb(105, 159, 241);
        text-shadow: 0 0 7px rgba(105, 159, 241, 1), 0 0 18px rgba(105, 159, 241, 0.88);
    }
    .mandala-clear-stamp.is-hard .mandala-clear-dialogue::after {
        box-shadow: 5px 5px 11px rgba(105, 159, 241, 0.64);
    }
    .mandala-clear-stamp.is-visible.is-normal .mandala-clear-dialogue {
        animation: mandalaNormalDialogueGlow 2.2s ease-in-out infinite;
    }
    .mandala-clear-stamp.is-visible.is-hard .mandala-clear-dialogue {
        animation: mandalaHardDialogueGlow 1.8s ease-in-out infinite;
    }
    .mandala-clear-record {
        position: absolute;
        z-index: 4;
        left: 50%;
        bottom: 5%;
        display: flex;
        width: min(180px, 58%);
        padding: 8px 14px 9px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        border: 1px solid rgba(190, 220, 255, 0.72);
        border-radius: 8px;
        background: rgba(1, 8, 22, 0.9);
        color: #f4f8ff;
        box-shadow: 0 0 20px rgba(91, 157, 255, 0.28), inset 0 0 16px rgba(91, 157, 255, 0.12);
        opacity: 0;
        transform: translate(-50%, 8px);
        transition: opacity 360ms ease 440ms, transform 420ms ease 440ms;
    }
    .mandala-clear-record span {
        font-size: 9px;
        font-weight: 900;
        line-height: 1;
    }
    .mandala-clear-record strong {
        margin-top: 4px;
        font-size: 19px;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        letter-spacing: 0;
        text-shadow: 0 0 12px rgba(144, 194, 255, 0.72);
    }
    .mandala-clear-stamp.is-visible .mandala-clear-record {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    .mandala-clear-stamp.is-normal .mandala-clear-record {
        border-color: rgba(211, 229, 250, 0.78);
        box-shadow: 0 0 20px rgba(175, 202, 238, 0.34), inset 0 0 16px rgba(175, 202, 238, 0.14);
    }
    .mandala-clear-stamp.is-hard .mandala-clear-record {
        border-color: rgba(105, 159, 241, 0.84);
        color: #d8e8ff;
        box-shadow: 0 0 22px rgba(105, 159, 241, 0.48), inset 0 0 16px rgba(105, 159, 241, 0.18);
    }
    .mandala-clear-stamp::before,
    .mandala-clear-stamp::after {
        content: '';
        position: absolute;
        z-index: 1;
        left: 50%;
        top: 50%;
        width: min(84%, 390px);
        aspect-ratio: 1;
        border-radius: 50%;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -50%) scale(0.78);
        mix-blend-mode: screen;
    }
    .mandala-clear-stamp.is-visible::before,
    .mandala-clear-stamp.is-visible::after {
        opacity: 1;
    }
    .mandala-clear-stamp.is-visible.is-normal::before {
        background: radial-gradient(circle, rgba(175, 202, 238, 0.82) 0 15%, rgba(175, 202, 238, 0.42) 36%, rgba(175, 202, 238, 0.14) 58%, transparent 74%);
        animation: mandalaNormalStampAura 2.5s ease-in-out infinite;
    }
    .mandala-clear-stamp.is-visible.is-normal::after {
        background: conic-gradient(from 0deg, transparent 0 8%, rgba(175, 202, 238, 0.42) 11%, transparent 15% 34%, rgba(175, 202, 238, 0.28) 38%, transparent 43% 67%, rgba(175, 202, 238, 0.4) 71%, transparent 76%);
        filter: blur(10px);
        animation: mandalaNormalStampRays 7s linear infinite;
    }
    .mandala-clear-stamp.is-visible.is-hard::before {
        background: radial-gradient(circle, rgba(105, 159, 241, 0.9) 0 12%, rgba(105, 159, 241, 0.56) 34%, rgba(105, 159, 241, 0.3) 56%, transparent 74%);
        animation: mandalaHardStampAura 1.55s ease-in-out infinite;
    }
    .mandala-clear-stamp.is-visible.is-hard::after {
        background: conic-gradient(from 0deg, transparent 0 5%, rgba(105, 159, 241, 0.68) 8%, transparent 12% 25%, rgba(105, 159, 241, 0.58) 29%, transparent 33% 48%, rgba(105, 159, 241, 0.64) 52%, transparent 57% 73%, rgba(105, 159, 241, 0.66) 77%, transparent 82%);
        filter: blur(7px);
        animation: mandalaHardStampRays 3.8s linear infinite;
    }
    .mandala-clear-stamp.is-visible.is-normal img {
        animation: mandalaNormalStampImageGlow 2.5s ease-in-out infinite;
    }
    .mandala-clear-stamp.is-visible.is-hard img {
        animation: mandalaHardStampImageGlow 1.55s ease-in-out infinite;
    }
    @keyframes mandalaNormalStampAura {
        0%, 100% { transform: translate(-50%, -50%) scale(0.82); opacity: 0.58; }
        50% { transform: translate(-50%, -50%) scale(1.04); opacity: 0.94; }
    }
    @keyframes mandalaNormalStampRays {
        from { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); }
        to { transform: translate(-50%, -50%) rotate(360deg) scale(0.96); }
    }
    @keyframes mandalaHardStampAura {
        0%, 100% { transform: translate(-50%, -50%) scale(0.86); opacity: 0.68; }
        50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
    }
    @keyframes mandalaHardStampRays {
        from { transform: translate(-50%, -50%) rotate(0deg) scale(1.02); }
        to { transform: translate(-50%, -50%) rotate(-360deg) scale(1.02); }
    }
    @keyframes mandalaNormalStampImageGlow {
        0%, 100% { filter: drop-shadow(0 20px 32px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 16px rgba(175, 202, 238, 0.48)); }
        50% { filter: drop-shadow(0 20px 32px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 34px rgba(175, 202, 238, 0.92)); }
    }
    @keyframes mandalaHardStampImageGlow {
        0%, 100% { filter: drop-shadow(0 20px 32px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 22px rgba(105, 159, 241, 0.68)); }
        50% { filter: drop-shadow(0 20px 32px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 42px rgba(105, 159, 241, 1)); }
    }
    @keyframes mandalaNormalDialogueGlow {
        0%, 100% {
            box-shadow: 0 0 8px rgba(175, 202, 238, 0.72), 0 0 20px rgba(175, 202, 238, 0.42), inset 0 0 15px rgba(175, 202, 238, 0.14);
        }
        50% {
            box-shadow: 0 0 12px rgba(175, 202, 238, 1), 0 0 30px rgba(175, 202, 238, 0.72), inset 0 0 20px rgba(175, 202, 238, 0.22);
        }
    }
    @keyframes mandalaHardDialogueGlow {
        0%, 100% {
            box-shadow: 0 0 8px rgba(105, 159, 241, 0.78), 0 0 20px rgba(105, 159, 241, 0.62), inset 0 0 15px rgba(105, 159, 241, 0.2);
        }
        50% {
            box-shadow: 0 0 12px rgba(105, 159, 241, 1), 0 0 30px rgba(105, 159, 241, 0.88), inset 0 0 20px rgba(105, 159, 241, 0.3);
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .mandala-clear-stamp::before,
        .mandala-clear-stamp::after,
        .mandala-clear-stamp img,
        .mandala-clear-dialogue,
        .mandala-clear-record {
            animation: none !important;
        }
    }
    .mandala-play-magnifier-btn {
        position: absolute;
        z-index: 8;
        top: 12px;
        right: 12px;
        width: 48px;
        height: 48px;
        padding: 5px;
        border-radius: 50%;
        border: 1px solid rgba(171, 214, 250, 0.86);
        background: rgba(6, 18, 42, 0.82);
        box-shadow: 0 0 16px rgba(79, 162, 255, 0.28), inset 0 0 14px rgba(85, 159, 255, 0.18);
        cursor: pointer;
    }
    .mandala-play-magnifier-btn.is-active {
        background: rgba(27, 86, 154, 0.9);
        box-shadow: 0 0 22px rgba(94, 179, 255, 0.42), inset 0 0 18px rgba(180, 222, 255, 0.2);
    }
    .mandala-play-magnifier-btn img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }
    .mandala-game-feedback {
        min-height: 38px;
        margin: 12px auto;
        color: #dceaff;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.45;
        text-align: center;
    }
    .mandala-command-card {
        margin: 0 auto 12px;
        padding: 14px;
        border-radius: 16px;
        border: 1px solid rgba(98, 165, 255, 0.68);
        background:
            radial-gradient(circle at 50% 0%, rgba(105, 174, 255, 0.18), transparent 54%),
            linear-gradient(180deg, rgba(14, 32, 66, 0.94), rgba(6, 14, 34, 0.98));
        text-align: center;
    }
    .mandala-command-card strong {
        display: block;
        margin-bottom: 10px;
        color: #eef6ff;
        text-shadow: 0 0 14px rgba(114, 181, 255, 0.42);
    }
    .mandala-command-row {
        display: flex;
        gap: 8px;
        justify-content: center;
    }
    .mandala-answer-input {
        width: 150px;
        min-height: 46px;
        border-radius: 12px;
        border: 1px solid rgba(171, 214, 250, 0.74);
        background: rgba(8, 15, 31, 0.9);
        color: #fff7e9;
        font-size: 22px;
        font-weight: 900;
        text-align: center;
        outline: none;
    }
    .mandala-answer-input:disabled {
        opacity: 0.44;
        cursor: not-allowed;
    }
    .mandala-submit-btn {
        min-width: 96px;
        min-height: 46px;
        border-radius: 12px;
        border: 1px solid rgba(171, 214, 250, 0.74);
        background: linear-gradient(135deg, rgba(18, 76, 134, 0.94), rgba(8, 28, 69, 0.96));
        color: #f2f8ff;
        font-weight: 900;
        cursor: pointer;
        box-shadow: inset 0 0 18px rgba(76, 145, 255, 0.18);
    }
    .mandala-answer-reveal {
        min-height: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: opacity 240ms ease, max-height 240ms ease;
        text-align: center;
    }
    .mandala-answer-reveal.is-visible {
        max-height: 120px;
        opacity: 1;
        margin: 8px auto 0;
    }
    .mandala-answer-reveal img {
        width: 54px;
        height: 54px;
        object-fit: contain;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.92);
        vertical-align: middle;
        margin-right: 8px;
    }
    .mandala-answer-reveal strong,
    .mandala-answer-reveal span {
        display: block;
        font-weight: 900;
    }
    .mandala-nav-actions {
        display: flex;
        justify-content: center;
        gap: 8px;
    }
    @media (max-width: 640px) {
        .mandala-game-statusbar {
            grid-template-columns: 1fr 1fr;
        }
        .mandala-time-wrap {
            grid-column: 1 / -1;
            order: -1;
        }
        .mandala-command-row {
            flex-direction: column;
            align-items: stretch;
        }
        .mandala-answer-input,
        .mandala-submit-btn {
            width: 100%;
        }
    }
    /* MANDALA main game: simulator-led NORMAL flow */
    .mandala-play-header {
        display: grid;
        grid-template-columns: 116px minmax(0, 1fr) 132px;
        gap: 14px;
        align-items: center;
        margin-bottom: 14px;
    }
    .mandala-play-side {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }
    .mandala-play-side .mandala-play-accuracy {
        min-height: 38px;
        padding: 5px 8px;
        box-sizing: border-box;
    }
    .mandala-play-side .mandala-play-accuracy strong {
        margin-top: 3px;
        font-size: 14px;
    }
    .mandala-music-control.is-play {
        position: relative;
        align-items: stretch;
        width: 100%;
    }
    .mandala-music-control.is-play .mandala-music-btn {
        width: 100%;
        min-width: 0;
        height: 28px;
        padding: 0 7px;
    }
    .mandala-music-control.is-play .mandala-volume-panel {
        top: calc(100% + 6px);
        right: auto;
        left: 0;
        width: 116px;
    }
    .mandala-play-heading {
        min-width: 0;
        text-align: center;
    }
    .mandala-play-accuracy strong {
        margin-top: 8px;
    }
    .mandala-play-digits-card {
        width: min(460px, 100%);
        box-sizing: border-box;
        margin-bottom: 14px;
        padding: 14px 18px 16px;
    }
    .mandala-play-digits-card .mandala-command-row {
        align-items: center;
    }
    .mandala-play-digits-card .mandala-answer-input {
        width: min(260px, 100%);
        border-color: rgba(116, 181, 255, 0.72);
        background: rgba(2, 8, 24, 0.78);
        color: #f2f8ff;
        box-shadow: inset 0 0 18px rgba(76, 145, 255, 0.16);
    }
    .mandala-play-digits-card .mandala-answer-input:focus {
        border-color: #d7eaff;
        box-shadow: inset 0 0 20px rgba(97, 166, 255, 0.22), 0 0 0 3px rgba(97, 166, 255, 0.18);
    }
    .mandala-play-title {
        display: block;
        margin-bottom: 7px;
        color: #e8f3ff;
        font-size: 21px;
        font-weight: 900;
        text-shadow: 0 0 16px rgba(116, 180, 255, 0.46);
    }
    .mandala-elapsed-clock {
        width: min(170px, 82%);
        margin: 0 auto 7px;
        padding: 6px 14px;
        border: 1px solid rgba(151, 207, 255, 0.46);
        border-radius: 999px;
        background: rgba(3, 10, 25, 0.82);
        color: #f4f8ff;
        font-size: 18px;
        font-weight: 900;
        box-shadow: inset 0 0 16px rgba(84, 154, 255, 0.14), 0 0 16px rgba(69, 139, 255, 0.12);
    }
    .mandala-play-heading .mandala-time-track {
        width: 100%;
        height: 10px;
    }
    .mandala-play-magnifier-btn {
        position: static;
        z-index: auto;
        justify-self: end;
        width: 54px;
        height: 54px;
        padding: 4px;
        border-radius: 50%;
    }
    .mandala-play-magnifier-btn:disabled {
        opacity: 0.42;
        cursor: not-allowed;
    }
    .mandala-play-field-wrap {
        overflow: visible;
    }
    .mandala-play-field-wrap .mandala-preview,
    .mandala-play-field-wrap .mandala-preview > .mandala-field-scene {
        transition: opacity 520ms ease, filter 520ms ease, transform 520ms ease;
    }
    .mandala-play-field-wrap .mandala-preview.is-stage-entering {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }
    .mandala-play-field-wrap .mandala-preview.is-stage-entering.is-pattern-ready {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    .mandala-play-field-wrap .mandala-preview.is-field-fading > .mandala-field-scene,
    .mandala-play-field-wrap .mandala-preview.is-field-fading > .mandala-magnifier {
        opacity: 0;
        filter: blur(5px);
        transform: scale(0.96);
    }
    .mandala-stage-action {
        display: block;
        width: 190px;
        min-height: 46px;
        margin: 12px auto 0;
        border: 1px solid rgba(139, 197, 255, 0.5);
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(17, 39, 75, 0.96), rgba(7, 19, 43, 0.98));
        color: #eaf4ff;
        font-size: 13px;
        font-weight: 900;
        box-shadow: inset 0 0 18px rgba(79, 151, 255, 0.16);
    }
    .mandala-stage-action:disabled {
        opacity: 1;
        cursor: default;
    }
    .mandala-stage-action.is-retry {
        cursor: pointer;
        background: linear-gradient(135deg, #438be1, #2354a7);
        box-shadow: 0 0 22px rgba(75, 154, 255, 0.32);
    }
    .mandala-answer-reveal {
        position: absolute;
        z-index: 12;
        top: 50%;
        left: 50%;
        display: flex;
        width: min(300px, 78%);
        min-height: 150px;
        max-height: none;
        margin: 0;
        padding: 18px;
        overflow: visible;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(150, 207, 255, 0.68);
        border-radius: 18px;
        background: rgba(5, 14, 34, 0.94);
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.44), inset 0 0 28px rgba(84, 155, 255, 0.13);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -46%) scale(0.92);
        transition: opacity 480ms ease, transform 480ms ease, filter 480ms ease;
    }
    .mandala-answer-reveal.is-visible {
        max-height: none;
        margin: 0;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    .mandala-answer-reveal.is-hiding {
        opacity: 0;
        filter: blur(5px);
        transform: translate(-50%, -54%) scale(0.95);
    }
    .mandala-answer-reveal img {
        width: 82px;
        height: 82px;
        margin: 0 0 9px;
    }
    .mandala-answer-reveal strong {
        color: #f3f8ff;
        font-size: 17px;
    }
    .mandala-answer-reveal span {
        margin-top: 3px;
        color: rgba(219, 235, 255, 0.72);
        font-size: 11px;
    }
    @media (max-width: 640px) {
        #boardgame-mandala-section .relic-mode-head {
            padding-top: 45px;
        }
        .mandala-music-control.is-intro {
            top: 12px;
            right: 12px;
        }
        .mandala-game-shell {
            padding: 12px;
        }
        .mandala-play-header {
            grid-template-columns: 82px minmax(0, 1fr) 48px;
            gap: 6px;
        }
        .mandala-music-control.is-play .mandala-music-btn {
            height: 26px;
            padding: 0 4px;
        }
        .mandala-music-control.is-play .mandala-music-btn .music-icon,
        .mandala-music-control.is-play .mandala-music-btn .btn-text {
            font-size: 7px;
        }
        .mandala-music-control.is-play .mandala-volume-panel {
            width: 100px;
            padding: 7px 8px;
        }
        .mandala-play-accuracy {
            min-height: 44px;
            padding: 6px;
        }
        .mandala-play-accuracy strong {
            margin-top: 7px;
            font-size: 14px;
        }
        .mandala-play-title {
            font-size: 15px;
        }
        .mandala-elapsed-clock {
            width: 88%;
            padding: 5px 8px;
            font-size: 15px;
        }
        .mandala-clear-record {
            bottom: 4%;
            width: min(150px, 54%);
            padding: 7px 10px 8px;
        }
        .mandala-clear-record span {
            font-size: 8px;
        }
        .mandala-clear-record strong {
            font-size: 16px;
        }
        .mandala-play-magnifier-btn {
            width: 48px;
            height: 48px;
            padding: 4px;
        }
        .mandala-play-digits-card {
            width: 100%;
            padding: 12px 14px 14px;
        }
        .mandala-play-digits-card .mandala-answer-input {
            width: 100%;
        }
        .mandala-stage-action {
            width: 160px;
            min-height: 42px;
        }
        .mandala-answer-reveal {
            width: 76%;
            min-height: 132px;
            padding: 14px;
        }
        .mandala-answer-reveal img {
            width: 68px;
            height: 68px;
        }
    }
    .relic-mode-select {
        display: none;
        max-width: 520px;
        margin: -4px auto 18px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: stretch;
    }
    .relic-mode-select.is-visible {
        display: grid;
    }
    .relic-difficulty-card {
        min-height: 74px;
        border-radius: 12px;
        border: 1px solid rgba(185, 193, 128, 0.42);
        background: linear-gradient(180deg, rgba(36, 42, 26, 0.95), rgba(14, 18, 11, 0.96));
        color: #eee8bf;
        font-weight: 900;
        cursor: pointer;
        box-shadow: inset 0 0 20px rgba(196, 212, 113, 0.12), 0 12px 28px rgba(0, 0, 0, 0.24);
    }
    .relic-difficulty-card strong,
    .relic-difficulty-card span {
        display: block;
    }
    .relic-difficulty-card strong {
        font-size: 18px;
        margin-bottom: 6px;
    }
    .relic-difficulty-card span {
        font-size: 11px;
        color: rgba(239, 232, 191, 0.74);
    }
    .relic-difficulty-card.is-hard {
        border-color: rgba(171, 77, 47, 0.78);
        background: linear-gradient(180deg, rgba(111, 42, 24, 0.94), rgba(55, 60, 25, 0.97) 54%, rgba(15, 18, 10, 0.97));
        color: #f3dda8;
        box-shadow: inset 0 0 22px rgba(176, 62, 33, 0.2), 0 14px 30px rgba(40, 10, 4, 0.28);
    }
    .relic-hard-warning {
        grid-column: 1 / -1;
        margin: 0;
        padding: 9px 12px;
        border-radius: 10px;
        border: 1px solid rgba(171, 77, 47, 0.35);
        background: rgba(24, 18, 11, 0.72);
        color: #d8c69a;
        font-size: 12px;
        font-weight: 900;
        text-align: center;
    }
    .relic-howto-card {
        background: rgba(17, 22, 13, 0.88);
        border-color: rgba(180, 188, 122, 0.42);
        color: #efe9c7;
    }
    .relic-howto-card strong {
        display: block;
        color: #e8df9d;
        margin-bottom: 8px;
        letter-spacing: 0.04em;
    }
    .relic-howto-lead {
        margin: 0 auto 12px;
        max-width: 560px;
        color: #f0e9c8;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.65;
        text-align: center;
    }
    .relic-howto-section {
        margin: 10px auto 0;
        max-width: 560px;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid rgba(185, 193, 128, 0.22);
        background: rgba(8, 12, 7, 0.38);
        text-align: left;
    }
    .relic-howto-section h3 {
        margin: 0 0 8px;
        color: #e4f58f;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-align: center;
    }
    .relic-howto-section ul {
        margin: 0;
        padding-left: 18px;
    }
    .relic-howto-section li {
        margin: 3px 0;
        color: #efe9c7;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.55;
    }
    .relic-howto-example {
        margin: 9px 0 0;
        padding: 9px 10px;
        border-radius: 10px;
        background: rgba(228, 245, 143, 0.08);
        border: 1px solid rgba(228, 245, 143, 0.14);
        color: #d8d3b0;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.55;
        text-align: center;
    }
    .relic-howto-mode-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .relic-howto-mode-chip {
        padding: 9px 8px;
        border-radius: 12px;
        background: rgba(188, 199, 117, 0.1);
        border: 1px solid rgba(188, 199, 117, 0.18);
        color: #f0e9c8;
        font-size: 11px;
        font-weight: 900;
        line-height: 1.45;
        text-align: center;
    }
    .relic-howto-mode-chip.is-hard {
        background: linear-gradient(180deg, rgba(104, 41, 31, 0.42), rgba(92, 105, 45, 0.16));
        border-color: rgba(214, 97, 66, 0.26);
    }
    .relic-guide-glyph-reference {
        margin: 18px auto 14px;
        max-width: 520px;
        padding: 13px;
        border-radius: 16px;
        background: rgba(8, 12, 7, 0.48);
        border: 1px solid rgba(185, 193, 128, 0.22);
    }
    .relic-guide-glyph-title {
        margin-bottom: 10px;
        color: #e4f58f;
        text-align: center;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.08em;
    }
    .relic-guide-glyph-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 7px;
    }
    .relic-guide-glyph-item {
        padding: 8px 4px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(185, 193, 128, 0.18);
        text-align: center;
        font-weight: 900;
    }
    .relic-guide-glyph-item img {
        width: 32px;
        height: 32px;
        object-fit: contain;
        margin-bottom: 4px;
        opacity: 0.95;
        filter: drop-shadow(0 0 6px rgba(192, 225, 81, 0.22));
    }
    .relic-guide-glyph-item strong {
        display: block;
        margin: 0;
        color: #edf1b3;
        font-size: 9px;
        line-height: 1.1;
    }
    .relic-guide-glyph-item span {
        display: block;
        margin-top: 2px;
        color: #bfc69a;
        font-size: 8px;
        line-height: 1.1;
    }
    @media (max-width: 520px) {
        #boardgame-relic-section .relic-start-card .icon-img-wrapper,
        #boardgame-relic-section .relic-start-card .category-icon-img {
            width: 92px;
            height: 92px;
        }
        .relic-guide-glyph-reference {
            padding: 10px;
        }
        .relic-guide-glyph-grid {
            gap: 4px;
        }
        .relic-guide-glyph-item {
            padding: 6px 2px;
            border-radius: 10px;
        }
        .relic-guide-glyph-item img {
            width: 24px;
            height: 24px;
            margin-bottom: 2px;
        }
        .relic-guide-glyph-item strong,
        .relic-guide-glyph-item span {
            font-size: 7px;
        }
    }
    .relic-game-shell {
        max-width: 760px;
        margin: 0 auto;
        padding: 18px;
        border-radius: 18px;
        background: linear-gradient(180deg, #151b10 0%, #0d120b 100%);
        border: 1px solid rgba(169, 181, 110, 0.48);
        color: #efe9c7;
        box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
    }
    .relic-statusbar {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        position: relative;
        margin-bottom: 12px;
    }
    .relic-status-pill {
        min-width: 210px;
        min-height: 46px;
        padding: 8px 14px;
        border-radius: 14px;
        background: rgba(8, 12, 7, 0.72);
        border: 1px solid rgba(185, 193, 128, 0.36);
        text-align: center;
        font-weight: 900;
    }
    .relic-status-pill strong {
        display: block;
        color: #e8df9d;
        font-size: 16px;
        line-height: 1.1;
    }
    .relic-status-pill span {
        display: block;
        margin-top: 2px;
        color: #bfc69a;
        font-size: 11px;
        letter-spacing: 0.05em;
    }
    .relic-music-control {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        z-index: 12;
    }
    .relic-music-btn {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px;
        min-width: 86px;
        height: 36px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(185, 193, 128, 0.34) !important;
        background: rgba(8, 12, 7, 0.76) !important;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.24);
    }
    .relic-music-btn .btn-text {
        color: #edf1b3;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.04em;
    }
    .relic-music-btn .music-icon {
        color: #dbe99a;
        font-size: 9px;
        line-height: 1;
    }
    .relic-music-btn.is-on {
        background: linear-gradient(180deg, rgba(76, 86, 34, 0.96), rgba(26, 35, 16, 0.96)) !important;
        border-color: rgba(218, 232, 124, 0.58) !important;
        box-shadow: 0 0 18px rgba(174, 204, 73, 0.22), 0 10px 18px rgba(0, 0, 0, 0.24);
    }
    .relic-music-btn.is-on .btn-text,
    .relic-music-btn.is-on .music-icon {
        color: #f1ff9f;
    }
    .relic-volume-panel {
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        width: 138px;
        padding: 8px 10px;
        border-radius: 12px;
        border: 1px solid rgba(185, 193, 128, 0.28);
        background: rgba(8, 12, 7, 0.94);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32);
        display: flex;
        flex-direction: column;
        gap: 6px;
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 0.16s ease, transform 0.16s ease;
        z-index: 30;
    }
    .relic-music-control.is-open .relic-volume-panel,
    .relic-music-control:focus-within .relic-volume-panel {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .relic-volume-label {
        color: rgba(239, 233, 199, 0.82);
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-align: left;
    }
    .relic-volume-slider {
        width: 100%;
        accent-color: #cddd68;
    }
    .relic-grace-points {
        display: flex;
        justify-content: center;
        gap: 4px;
        margin-top: 6px;
    }
    .relic-grace-point {
        width: 17px;
        height: 17px;
        object-fit: contain;
        opacity: 0.98;
        filter: drop-shadow(0 0 5px rgba(192, 225, 81, 0.45));
    }
    .relic-grace-point.is-spent {
        opacity: 0.2;
        filter: grayscale(1);
    }
    .relic-grace-point.is-bursting {
        animation: relicGraceBurst 0.55s ease-out both;
    }
    @keyframes relicGraceBurst {
        0% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 3px rgba(192, 225, 81, 0.45)); }
        45% { opacity: 1; transform: scale(1.78) rotate(16deg); filter: drop-shadow(0 0 16px rgba(236, 255, 139, 0.95)); }
        100% { opacity: 0.2; transform: scale(0.72); filter: grayscale(1); }
    }
    .relic-board-timer,
    .relic-board-lives {
        position: absolute;
        z-index: 7;
        left: 50%;
        transform: translateX(-50%);
        min-width: 118px;
        padding: 7px 14px;
        border-radius: 999px;
        background: rgba(8, 12, 7, 0.76);
        border: 1px solid rgba(185, 193, 128, 0.34);
        text-align: center;
        font-weight: 900;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.24);
    }
    .relic-board-timer {
        top: 1.5%;
        color: #e8df9d;
        font-size: 15px;
        letter-spacing: 0.04em;
    }
    .relic-board-type {
        position: absolute;
        z-index: 7;
        top: 10%;
        right: 40%;
        min-width: 82px;
        padding: 7px 12px;
        border-radius: 999px;
        background: rgba(8, 12, 7, 0.76);
        border: 1px solid rgba(185, 193, 128, 0.34);
        color: #dbe99a;
        text-align: center;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.06em;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.24);
    }
    .relic-board-glyph-help-btn {
        position: absolute;
        z-index: 8;
        top: 10%;
        right: 10%;
        min-width: 72px;
        padding: 7px 12px;
        border-radius: 999px;
        background: rgba(8, 12, 7, 0.76);
        border: 1px solid rgba(185, 193, 128, 0.34);
        color: #dbe99a;
        text-align: center;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.06em;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.24);
        cursor: pointer;
    }
    .relic-board-glyph-help-btn:hover,
    .relic-board-glyph-help-btn.is-active {
        border-color: rgba(218, 232, 124, 0.62);
        color: #edf1b3;
        box-shadow: 0 0 18px rgba(174, 204, 73, 0.18), 0 10px 18px rgba(0, 0, 0, 0.24);
    }
    .relic-board-accuracy {
        position: absolute;
        z-index: 7;
        top: 10%;
        left: 10%;
        min-width: 86px;
        padding: 5px 12px 7px;
        border-radius: 999px;
        background: rgba(8, 12, 7, 0.76);
        border: 1px solid rgba(185, 193, 128, 0.34);
        color: #dbe99a;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-weight: 900;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.24);
    }
    .relic-board-accuracy span {
        font-size: 8px;
        line-height: 1;
        letter-spacing: 0.08em;
        opacity: 0.84;
    }
    .relic-board-accuracy strong {
        display: block;
        margin-top: 1px;
        font-size: 18px;
        line-height: 1;
        color: #edf1b3;
        text-shadow: 0 0 8px rgba(192, 225, 81, 0.32);
    }
    .relic-board-lives {
        bottom: 1%;
    }
    .relic-glyph-help-panel {
        position: absolute;
        z-index: 10;
        left: 17%;
        right: 17%;
        top: 34%;
        padding: 14px;
        border-radius: 16px;
        background: rgba(8, 12, 7, 0.92);
        border: 1px solid rgba(218, 232, 124, 0.42);
        color: #efe9c7;
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.4), inset 0 0 22px rgba(177, 208, 69, 0.08);
        opacity: 0;
        pointer-events: none;
        transform: translateY(8px) scale(0.98);
        transition: opacity 0.24s ease, transform 0.24s ease;
    }
    .relic-glyph-help-panel.is-visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }
    .relic-glyph-help-title {
        margin-bottom: 10px;
        color: #e4f58f;
        text-align: center;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.08em;
    }
    .relic-glyph-help-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 7px;
    }
    .relic-glyph-help-item {
        padding: 8px 4px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(185, 193, 128, 0.18);
        text-align: center;
        font-weight: 900;
    }
    .relic-glyph-help-icon {
        width: 34px;
        height: 34px;
        object-fit: contain;
        margin-bottom: 4px;
        opacity: 0.95;
        filter: drop-shadow(0 0 6px rgba(192, 225, 81, 0.25));
    }
    .relic-glyph-help-item strong {
        display: block;
        color: #edf1b3;
        font-size: 10px;
        line-height: 1.1;
    }
    .relic-glyph-help-item span {
        display: block;
        margin-top: 2px;
        color: #bfc69a;
        font-size: 9px;
        line-height: 1.1;
    }
    .relic-answer-log {
        position: absolute;
        z-index: 7;
        left: 12%;
        right: 12%;
        bottom: 14%;
        min-height: 70px;
        padding: 8px 14px;
        border-radius: 16px;
        background: rgba(8, 12, 7, 0.68);
        border: 1px solid rgba(185, 193, 128, 0.28);
        color: rgba(232, 223, 157, 0.72);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.04em;
        box-shadow: 0 9px 18px rgba(0, 0, 0, 0.22);
        pointer-events: none;
    }
    .relic-answer-log.has-log {
        color: #e8df9d;
        background: rgba(8, 12, 7, 0.78);
        border-color: rgba(185, 193, 128, 0.42);
    }
    .relic-answer-log.has-hint {
        color: #e8df9d;
        background: rgba(8, 12, 7, 0.78);
        border-color: rgba(218, 232, 124, 0.58);
        box-shadow: 0 0 18px rgba(174, 204, 73, 0.18), 0 9px 18px rgba(0, 0, 0, 0.22);
    }
    .relic-answer-log-empty,
    .relic-answer-log-label {
        white-space: nowrap;
    }
    .relic-answer-log-list {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        justify-content: center;
        gap: 4px 5px;
        width: min(100%, 248px);
        min-width: 0;
        overflow: hidden;
    }
    .relic-answer-log-chip {
        min-width: 0;
        padding: 3px 6px;
        border-radius: 999px;
        background: rgba(42, 77, 118, 0.72);
        border: 1px solid rgba(96, 174, 255, 0.56);
        color: #d8ecff;
        text-align: center;
        text-shadow: 0 0 8px rgba(73, 170, 255, 0.34);
    }
    .relic-answer-log-hint {
        text-align: center;
        color: #e4f58f;
        font-size: 11px;
        text-shadow: 0 0 10px rgba(192, 225, 81, 0.42);
    }
    .relic-lives {
        display: flex;
        justify-content: center;
        gap: 3px;
    }
    .relic-life {
        display: block;
        width: 11px;
        height: 16px;
        border-radius: 58% 58% 54% 54%;
        background:
            radial-gradient(circle at 52% 68%, #f4ffc2 0 18%, transparent 19%),
            radial-gradient(circle at 48% 56%, #c8df55 0 34%, transparent 35%),
            linear-gradient(145deg, #b7c84b 0%, #71841f 62%, #344111 100%);
        clip-path: polygon(50% 0%, 67% 20%, 86% 38%, 76% 77%, 50% 100%, 24% 77%, 14% 38%, 33% 20%);
        box-shadow: 0 0 8px rgba(177, 208, 69, 0.55), 0 0 14px rgba(226, 244, 120, 0.25);
    }
    .relic-life.is-lost {
        opacity: 0.18;
        filter: grayscale(1);
    }
    .relic-board {
        position: relative;
        aspect-ratio: 1094 / 1536;
        max-width: 560px;
        margin: 0 auto 14px;
        border-radius: 16px;
        overflow: hidden;
        background: url('boardgame/relic/relic background.webp') center / cover no-repeat;
        border: 1px solid rgba(169, 181, 110, 0.38);
        box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.34);
    }
    .relic-game-over-visual {
        position: absolute;
        z-index: 17;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at center, rgba(8, 12, 7, 0.28), rgba(8, 12, 7, 0.68) 68%);
        opacity: 0;
        transform: scale(0.96);
        pointer-events: none;
        transition: opacity 0.46s ease, transform 0.46s cubic-bezier(0.18, 0.88, 0.22, 1.08);
    }
    .relic-game-over-visual.is-visible {
        opacity: 1;
        transform: scale(1);
    }
    .relic-game-over-visual img {
        width: min(70%, 390px);
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.58));
        animation: relicGameOverImageEnter 0.82s cubic-bezier(0.18, 0.88, 0.22, 1.08) both;
    }
    @keyframes relicGameOverImageEnter {
        0% { opacity: 0; transform: translateY(18px) scale(0.78); filter: blur(3px) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34)); }
        68% { opacity: 1; transform: translateY(0) scale(1.04); filter: blur(0) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.58)); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    .relic-congrats-effect {
        position: absolute;
        z-index: 18;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at center, rgba(245, 223, 137, 0.14), rgba(8, 12, 7, 0.62) 70%);
        opacity: 0;
        transform: scale(0.96);
        pointer-events: none;
        overflow: hidden;
    }
    .relic-congrats-effect.is-visible {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.18, 0.88, 0.22, 1.08);
    }
    .relic-clear-img {
        width: min(76%, 420px);
        height: auto;
        object-fit: contain;
        position: relative;
        z-index: 2;
        filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.58));
        animation: relicClearImageEnter 1.12s cubic-bezier(0.18, 0.88, 0.22, 1.08) both;
    }
    .relic-clear-dust,
    .relic-congrats-effect.is-visible::before,
    .relic-congrats-effect.is-visible::after {
        content: "";
        position: absolute;
        inset: 8% 6%;
        z-index: 1;
        background:
            radial-gradient(circle, rgba(255, 244, 166, 0.94) 0 2px, transparent 3px) 8% 24% / 88px 94px,
            radial-gradient(circle, rgba(236, 184, 80, 0.84) 0 1.5px, transparent 2.5px) 32% 8% / 74px 86px,
            radial-gradient(circle, rgba(255, 255, 216, 0.78) 0 1px, transparent 2px) 56% 18% / 66px 78px,
            radial-gradient(circle, rgba(255, 213, 102, 0.72) 0 2px, transparent 3px) 82% 36% / 92px 82px;
        opacity: 0;
        filter: drop-shadow(0 0 9px rgba(255, 215, 99, 0.68));
        animation: relicClearDust 1.55s ease-out both;
    }
    .relic-clear-dust-b,
    .relic-congrats-effect.is-visible::after {
        transform: rotate(18deg) scale(1.08);
        animation-delay: 0.12s;
        opacity: 0;
    }
    @keyframes relicClearImageEnter {
        0% { opacity: 0; transform: translateY(22px) scale(0.78); filter: blur(3px) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.36)); }
        58% { opacity: 1; transform: translateY(0) scale(1.05); filter: blur(0) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.58)); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes relicClearDust {
        0% { opacity: 0; transform: translateY(18px) scale(0.84); }
        18% { opacity: 1; }
        100% { opacity: 0; transform: translateY(-54px) scale(1.24); }
    }
    .relic-board-grid {
        position: absolute;
        left: 14%;
        right: 14%;
        top: 17%;
        bottom: 25%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: 3.9% 0%;
    }
    .relic-tile {
        position: relative;
        --relic-plate-x: 50%;
        --relic-plate-y: 50%;
        --relic-plate-size: 110%;
        border: 0;
        padding: 0;
        border-radius: 8px;
        background: rgba(16, 20, 13, 0.28);
        cursor: pointer;
        overflow: visible;
    }
    
    .relic-tile-1,
    .relic-tile-2,
    .relic-tile-3 {
    --relic-plate-y: 60%;
    }

    .relic-tile:disabled {
        cursor: default;
    }
    .relic-tile-number {
        position: absolute;
        left: 60px;
        top: -10px;
        z-index: 4;
        color: rgba(239, 233, 199, 0.92);
        font-size: 15px;
        font-weight: 900;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.62);
    }
    .relic-plate-img {
        position: absolute;
        left: var(--relic-plate-x);
        top: var(--relic-plate-y);
        width: var(--relic-plate-size);
        height: var(--relic-plate-size);
        object-fit: contain;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 3;
        transition: opacity 0.45s ease, transform 0.45s ease;
        filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.36));
    }
    .relic-glyph-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
    }
    .relic-tile.is-revealed .relic-plate-img,
    .relic-tile.is-empty .relic-plate-img {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.05);
    }
    .relic-tile.is-blocked .relic-plate-img {
        opacity: 0.96;
        transform: translate(-50%, -50%) scale(1.02);
    }
    .relic-tile.is-solved .relic-plate-img {
        opacity: 0.92;
        transform: translate(-50%, -50%) scale(1);
    }
    .relic-board-grid.is-clearing .relic-plate-img {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.08);
    }
    .relic-board-grid.is-cleared .relic-tile {
        opacity: 0;
        transform: scale(0.96);
        transition: opacity 0.48s ease, transform 0.48s ease;
    }
    .relic-board-grid.is-entering .relic-plate-img {
        animation: relicPlateFadeIn 0.7s ease-out both;
    }
    @keyframes relicPlateFadeIn {
        from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
        to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    .relic-glyph-layer {
        position: absolute;
        inset: 14%;
        z-index: 2;
        opacity: 0;
        transition: opacity 0.28s ease, filter 0.28s ease;
    }
    .relic-tile.is-revealed .relic-glyph-layer,
    .relic-tile.is-solved .relic-glyph-layer {
        opacity: 1;
    }
    .relic-glyph {
        position: absolute;
        width: 48%;
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
    }
    .relic-glyph-count-1 .relic-glyph {
        left: 50%;
        top: 50%;
        width: 62%;
    }
    .relic-glyph-count-2 .relic-glyph:nth-child(1) { left: 32%; top: 32%; }
    .relic-glyph-count-2 .relic-glyph:nth-child(2) { left: 68%; top: 68%; }
    .relic-glyph-count-3 .relic-glyph:nth-child(1) { left: 30%; top: 30%; }
    .relic-glyph-count-3 .relic-glyph:nth-child(2) { left: 50%; top: 50%; }
    .relic-glyph-count-3 .relic-glyph:nth-child(3) { left: 70%; top: 70%; }
    .relic-glyph-count-4 .relic-glyph:nth-child(1) { left: 30%; top: 30%; }
    .relic-glyph-count-4 .relic-glyph:nth-child(2) { left: 70%; top: 30%; }
    .relic-glyph-count-4 .relic-glyph:nth-child(3) { left: 30%; top: 70%; }
    .relic-glyph-count-4 .relic-glyph:nth-child(4) { left: 70%; top: 70%; }
    .relic-tile.is-order-flash .relic-glyph-layer {
        animation: relicOrderFlash 0.42s ease-in-out 2;
    }
    .relic-tile.is-solved-flash .relic-glyph-layer {
        animation: relicSolvedFlash 0.55s ease-in-out 2;
    }
    @keyframes relicOrderFlash {
        0%, 100% { filter: drop-shadow(0 0 0 rgba(73, 170, 255, 0)); }
        50% { filter: drop-shadow(0 0 18px rgba(73, 170, 255, 0.96)); }
    }
    @keyframes relicSolvedFlash {
        0%, 100% { filter: drop-shadow(0 0 0 rgba(166, 188, 87, 0)); }
        50% { filter: drop-shadow(0 0 18px rgba(190, 215, 101, 0.98)); }
    }
    .relic-answer-reveal {
        position: absolute;
        left: 17%;
        right: 17%;
        top: 38%;
        z-index: 8;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: 14px;
        background: rgba(12, 16, 10, 0.9);
        border: 1px solid rgba(208, 216, 144, 0.5);
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.34);
        opacity: 0;
        pointer-events: none;
        transform: translateY(8px) scale(0.98);
        transition: opacity 0.42s ease, transform 0.42s ease;
    }
    .relic-answer-reveal.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    .relic-answer-reveal img {
        width: 78px;
        height: 78px;
        object-fit: contain;
        border-radius: 12px;
        background: rgba(239, 233, 199, 0.12);
    }
    .relic-answer-reveal strong {
        display: block;
        color: #f2e9b5;
        font-size: 16px;
    }
    .relic-answer-reveal span {
        display: block;
        margin-top: 2px;
        color: #bfc69a;
        font-size: 12px;
    }
    .relic-feedback {
        min-height: 42px;
        margin: 0 auto 12px;
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(8, 12, 7, 0.72);
        border: 1px solid rgba(185, 193, 128, 0.26);
        color: #efe9c7;
        text-align: center;
        font-weight: 900;
        line-height: 1.45;
    }
    .relic-command-row {
        display: grid;
        grid-template-columns: minmax(120px, 170px) 128px;
        justify-content: center;
        gap: 10px;
        max-width: 330px;
        margin: 0 auto 12px;
    }
    .relic-answer-input {
        width: 100%;
        min-height: 48px;
        padding: 0 16px;
        border-radius: 12px;
        border: 1px solid rgba(185, 193, 128, 0.38);
        background: rgba(255, 255, 255, 0.92);
        color: #1b1b16;
        font-weight: 900;
        text-align: center;
        letter-spacing: 0.04em;
    }
    .relic-submit-btn,
    .relic-retry-btn {
        width: 128px;
        min-width: 0;
        border: 0;
        border-radius: 12px;
        color: #15180f;
        background: linear-gradient(180deg, #e7df9b, #9cac5a);
        font-weight: 900;
        cursor: pointer;
    }
    .relic-nav-actions {
        display: flex;
        justify-content: center;
        gap: 8px;
    }
    .relic-result-panel {
        display: none;
        max-width: 560px;
        margin: 12px auto;
        padding: 16px;
        border-radius: 14px;
        text-align: center;
        background: rgba(8, 12, 7, 0.84);
        border: 1px solid rgba(185, 193, 128, 0.34);
    }
    .relic-result-panel.is-visible {
        display: block;
    }
    .relic-result-panel strong {
        display: block;
        color: #e8df9d;
        font-size: 22px;
        margin-bottom: 6px;
    }
    #boardgame-relic-play-section.is-relic-hard .relic-game-shell {
        background:
            radial-gradient(circle at 50% 0%, rgba(155, 46, 24, 0.22), transparent 44%),
            linear-gradient(180deg, rgba(57, 65, 30, 0.94), rgba(17, 22, 10, 0.96));
        border-color: rgba(153, 73, 39, 0.46);
    }
    #boardgame-relic-play-section.is-relic-hard .relic-board {
        background-image: url('boardgame/relic/relic background (hard).webp');
    }
    #boardgame-relic-play-section.is-relic-hard .relic-status-pill,
    #boardgame-relic-play-section.is-relic-hard .relic-board-lives,
    #boardgame-relic-play-section.is-relic-hard .relic-board-type,
    #boardgame-relic-play-section.is-relic-hard .relic-board-glyph-help-btn,
    #boardgame-relic-play-section.is-relic-hard .relic-board-accuracy {
        border-color: rgba(174, 76, 39, 0.46);
        background: linear-gradient(180deg, rgba(99, 43, 25, 0.88), rgba(58, 66, 29, 0.88) 54%, rgba(16, 20, 10, 0.9));
        color: #f1dfaa;
        box-shadow: 0 0 16px rgba(136, 47, 22, 0.24);
    }
    #boardgame-relic-play-section.is-relic-hard .relic-life {
        background: linear-gradient(180deg, #9b3f28 0%, #7f8b38 42%, #4e5f20 100%);
        box-shadow: 0 0 8px rgba(139, 151, 56, 0.58), 0 0 15px rgba(170, 58, 31, 0.28);
    }
    #boardgame-relic-play-section.is-relic-hard .relic-tile.is-solved-flash .relic-glyph-layer {
        animation-name: relicHardSolvedFlash;
    }
    @keyframes relicHardSolvedFlash {
        0%, 100% { filter: drop-shadow(0 0 0 rgba(136, 148, 58, 0)); }
        40% { filter: drop-shadow(0 0 16px rgba(133, 151, 55, 0.98)) drop-shadow(0 0 26px rgba(156, 55, 28, 0.66)); }
        70% { filter: drop-shadow(0 0 10px rgba(222, 231, 128, 0.78)) drop-shadow(0 0 22px rgba(133, 47, 24, 0.56)); }
    }
    @media (max-width: 620px) {
        .relic-game-shell {
            padding: 12px;
        }
        .relic-statusbar {
            margin-bottom: 10px;
        }
        .relic-status-pill {
            min-width: 132px;
            min-height: 42px;
            padding: 6px 8px;
        }
        .relic-status-pill strong {
            font-size: 13px;
        }
        .relic-status-pill span {
            font-size: 8px;
        }
        .relic-grace-points {
            gap: 2px;
            margin-top: 3px;
        }
        .relic-grace-point {
            width: 12px;
            height: 12px;
        }
        .relic-music-control {
            right: 0;
            top: 2px;
        }
        .relic-music-btn {
            min-width: 62px;
            height: 30px !important;
            padding: 0 7px !important;
        }
        .relic-music-btn .btn-text,
        .relic-music-btn .music-icon {
            font-size: 7px;
        }
        .relic-volume-panel {
            width: 90px;
            padding: 7px 8px;
        }
        .relic-board {
            max-width: min(100%, 390px);
        }
        .relic-game-over-visual img {
            width: min(74%, 270px);
        }
        .relic-congrats-effect {
            inset: 0;
        }
        .relic-clear-img {
            width: min(80%, 292px);
        }
        .relic-board-timer {
            top: 0;
            min-width: 96px;
            font-size: 12px;
            padding: 5px 10px;
        }
        .relic-board-type {
            top: 7%;
            right: 35%;
            min-width: 64px;
            font-size: 10px;
            padding: 5px 8px;
        }
        .relic-board-glyph-help-btn {
            top: 7%;
            right: 8%;
            min-width: 50px;
            font-size: 10px;
            padding: 5px 8px;
        }
        .relic-board-accuracy {
            top: 7%;
            left: 8%;
            min-width: 50px;
            padding: 4px 7px 5px;
        }
        .relic-board-accuracy span {
            font-size: 6px;
        }
        .relic-board-accuracy strong {
            font-size: 13px;
        }
        .relic-board-lives {
            bottom: 0.5%;
            min-width: 96px;
            padding: 5px 10px;
        }
        .relic-glyph-help-panel {
            left: 8%;
            right: 8%;
            top: 31%;
            padding: 10px;
        }
        .relic-glyph-help-title {
            margin-bottom: 7px;
            font-size: 10px;
        }
        .relic-glyph-help-grid {
            gap: 4px;
        }
        .relic-glyph-help-item {
            padding: 6px 2px;
            border-radius: 10px;
        }
        .relic-glyph-help-icon {
            width: 24px;
            height: 24px;
            margin-bottom: 2px;
        }
        .relic-glyph-help-item strong {
            font-size: 7px;
        }
        .relic-glyph-help-item span {
            margin-top: 2px;
            font-size: 7px;
        }
        .relic-answer-log {
            left: 8%;
            right: 8%;
            bottom: 7.5%;
            min-height: 58px;
            padding: 5px 8px;
            gap: 3px;
            font-size: 8px;
        }
        .relic-answer-log-list {
            width: min(100%, 182px);
            gap: 3px;
        }
        .relic-answer-log-chip {
            padding: 2px 3px;
            font-size: 7px;
        }
        .relic-answer-log-hint {
            font-size: 9px;
        }
        .relic-life {
            width: 8px;
            height: 12px;
        }
        .relic-tile-number {
            font-size: 9px;
            left: 30px;
            top: -8px;
        }
        .relic-command-row {
            grid-template-columns: 1fr;
            justify-items: center;
            max-width: 250px;
            width: min(250px, 100%);
        }
        .relic-answer-input,
        .relic-submit-btn {
            width: min(250px, 100%);
        }
        .relic-submit-btn {
            min-height: 46px;
        }
        .relic-answer-reveal {
            left: 10%;
            right: 10%;
        }
    }

    .boardgame-code-rule-card {
        margin: 12px auto 14px;
        max-width: 560px;
        padding: 13px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.055);
        border: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.035), 0 10px 24px rgba(0, 0, 0, 0.18);
    }
    .boardgame-code-rule-title {
        margin-bottom: 10px;
        color: currentColor;
        text-align: center;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.04em;
    }
    .boardgame-code-rule-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }
    .boardgame-code-rule-item {
        min-width: 0;
        padding: 10px 8px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.14);
        text-align: center;
    }
    .boardgame-code-rule-item strong,
    .boardgame-code-rule-item span,
    .boardgame-code-rule-item code {
        display: block;
    }
    .boardgame-code-rule-item strong {
        margin-bottom: 6px;
        font-size: 12px;
        color: currentColor;
    }
    .boardgame-code-rule-item img {
        width: 54px;
        height: 54px;
        object-fit: contain;
        margin: 0 auto 5px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(0, 0, 0, 0.08);
    }
    .boardgame-code-rule-name {
        min-height: 16px;
        margin-bottom: 5px;
        font-size: 10px;
        line-height: 1.25;
        opacity: 0.86;
    }
    .boardgame-code-rule-item code {
        width: fit-content;
        margin: 0 auto;
        padding: 4px 9px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.32);
        color: #fff3ba;
        font-family: inherit;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.06em;
    }
    .boardgame-code-rule-note {
        margin: 10px 0 0;
        color: currentColor;
        opacity: 0.78;
        font-size: 11px;
        font-weight: 900;
        line-height: 1.45;
        text-align: center;
    }
    @media (max-width: 520px) {
        .boardgame-code-rule-card {
            padding: 10px;
            border-radius: 14px;
        }
        .boardgame-code-rule-grid {
            gap: 7px;
        }
        .boardgame-code-rule-item {
            padding: 8px 5px;
        }
        .boardgame-code-rule-item img {
            width: 46px;
            height: 46px;
        }
        .boardgame-code-rule-item strong {
            font-size: 10px;
        }
        .boardgame-code-rule-name,
        .boardgame-code-rule-note {
            font-size: 9px;
        }
        .boardgame-code-rule-item code {
            font-size: 11px;
            padding: 3px 7px;
        }
    }

    .classic-guide-tabs {
        max-width: 560px;
        margin: 0 auto 14px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .classic-guide-tab-btn {
        height: 42px;
        border: 1px solid rgba(122, 86, 57, 0.34);
        border-radius: 14px;
        color: #6b4428;
        background: rgba(255, 240, 207, 0.74);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 10px 20px rgba(122, 86, 57, 0.1);
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.05em;
        cursor: pointer;
    }
    .classic-guide-tab-btn.is-active {
        color: #fff7e8;
        background: linear-gradient(180deg, #9a6b42, #6b3e20);
        border-color: rgba(115, 67, 31, 0.7);
        box-shadow: 0 0 18px rgba(122, 86, 57, 0.24);
    }
    .classic-guide-panel {
        display: none;
    }
    .classic-guide-panel.is-active {
        display: block;
    }
    .classic-video-frame {
        width: 100%;
        aspect-ratio: 16 / 9;
        min-height: 240px;
        overflow: hidden;
        border-radius: 14px;
        background: rgba(64, 39, 19, 0.18);
        border: 1px solid rgba(122, 86, 57, 0.28);
        box-shadow: 0 12px 28px rgba(122, 86, 57, 0.16);
    }
    .classic-video-frame iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }
    .boardgame-simple-card {
        min-height: 240px;
        display: grid;
        place-items: center;
    }
    .boardgame-simple-placeholder {
        display: grid;
        gap: 10px;
        place-items: center;
        text-align: center;
        color: inherit;
        opacity: 0.82;
    }
    .boardgame-simple-placeholder strong {
        font-size: 1.45rem;
        letter-spacing: 0.08em;
    }
    .boardgame-simple-placeholder span {
        font-size: 0.92rem;
        line-height: 1.45;
    }
    #boardgame-arena-section {
        --boardgame-guide-accent: #c9c0e8;
        --boardgame-guide-accent-strong: #eee9ff;
        --boardgame-guide-active-text: #171026;
        --boardgame-guide-tab-bg: linear-gradient(180deg, rgba(25, 18, 43, 0.92), rgba(13, 10, 22, 0.98));
        --boardgame-guide-tab-border: rgba(186, 171, 255, 0.5);
        --boardgame-guide-active-bg: linear-gradient(180deg, #eee9ff, #b9a6f2);
        --boardgame-guide-card-bg: linear-gradient(180deg, rgba(25, 20, 38, 0.96), rgba(15, 12, 24, 0.98));
        --boardgame-guide-shadow: rgba(141, 100, 255, 0.3);
    }
    #boardgame-blizzard-section {
        --boardgame-guide-accent: #9be7ff;
        --boardgame-guide-accent-strong: #d8f6ff;
        --boardgame-guide-active-text: #072033;
        --boardgame-guide-tab-bg: linear-gradient(180deg, rgba(10, 31, 50, 0.92), rgba(5, 18, 33, 0.96));
        --boardgame-guide-tab-border: rgba(139, 218, 255, 0.42);
        --boardgame-guide-active-bg: linear-gradient(180deg, #c7f4ff, #68c8f2);
        --boardgame-guide-card-bg: linear-gradient(180deg, rgba(8, 24, 39, 0.93), rgba(5, 13, 25, 0.97));
        --boardgame-guide-shadow: rgba(103, 205, 255, 0.28);
    }
    #boardgame-overheat-section {
        --boardgame-guide-accent: #ff9a70;
        --boardgame-guide-accent-strong: #ffd0bc;
        --boardgame-guide-active-text: #210b05;
        --boardgame-guide-tab-bg: linear-gradient(180deg, rgba(38, 18, 13, 0.92), rgba(18, 9, 8, 0.97));
        --boardgame-guide-tab-border: rgba(255, 94, 42, 0.42);
        --boardgame-guide-active-bg: linear-gradient(180deg, #ffb088, #e65730);
        --boardgame-guide-card-bg: linear-gradient(180deg, rgba(36, 16, 13, 0.94), rgba(14, 8, 8, 0.98));
        --boardgame-guide-shadow: rgba(255, 94, 42, 0.3);
    }
    .heat-howto-card {
        position: relative;
        max-width: 640px;
    }
    .heat-howto-lead {
        margin: 0 auto 12px;
        max-width: 560px;
        color: var(--heat-howto-copy, #f2ddd2);
        font-size: 13px;
        line-height: 1.7;
    }
    .heat-howto-section {
        margin: 12px auto 0;
        max-width: 560px;
        padding: 14px 16px;
        border: 1px solid var(--heat-howto-border, rgba(255, 128, 84, 0.26));
        border-radius: 14px;
        background: var(--heat-howto-section-bg, linear-gradient(180deg, rgba(46, 20, 16, 0.64), rgba(18, 9, 8, 0.78)));
        text-align: left;
    }
    .heat-howto-section h3 {
        margin: 0 0 8px;
        color: var(--heat-howto-title, #ff9a70);
        font-size: 14px;
        letter-spacing: 0.02em;
        text-align: center;
    }
    .heat-howto-section ul {
        margin: 0;
        padding-left: 18px;
    }
    .heat-howto-section li {
        margin: 6px 0;
        color: var(--heat-howto-copy, #f2ddd2);
        font-size: 12px;
        line-height: 1.62;
    }
    .heat-howto-chip-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        max-width: 560px;
        margin: 0 auto 12px;
    }
    .heat-howto-chip {
        padding: 8px 6px;
        border-radius: 12px;
        border: 1px solid var(--heat-howto-chip-border, rgba(255, 128, 84, 0.42));
        background: var(--heat-howto-chip-bg, rgba(255, 128, 84, 0.12));
        color: var(--heat-howto-chip-text, #ffd0bc);
        font-size: 12px;
        font-weight: 900;
        text-align: center;
    }
    .heat-code-rule-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 10px;
    }
    .heat-code-rule-card {
        padding: 12px 10px;
        border-radius: 14px;
        border: 1px solid var(--heat-howto-border, rgba(255, 128, 84, 0.26));
        background: rgba(255, 255, 255, 0.045);
        text-align: center;
    }
    .heat-code-rule-card strong {
        display: block;
        margin-bottom: 6px;
        color: var(--heat-howto-title, #ff9a70);
        font-size: 13px;
    }
    .heat-code-rule-card code {
        display: inline-block;
        margin: 2px 0 8px;
        padding: 5px 8px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.34);
        color: var(--heat-howto-code, #ffd0bc);
        font-size: 12px;
        font-weight: 900;
    }
    .heat-code-rule-card span {
        display: block;
        color: var(--heat-howto-copy, #f2ddd2);
        font-size: 11px;
        line-height: 1.5;
    }
    #boardgame-blizzard-section .heat-howto-card {
        --heat-howto-title: #bcecff;
        --heat-howto-copy: #e7f8ff;
        --heat-howto-border: rgba(139, 218, 255, 0.3);
        --heat-howto-section-bg: linear-gradient(180deg, rgba(10, 35, 54, 0.66), rgba(5, 15, 29, 0.8));
        --heat-howto-chip-border: rgba(139, 218, 255, 0.45);
        --heat-howto-chip-bg: rgba(139, 218, 255, 0.12);
        --heat-howto-chip-text: #d8f6ff;
        --heat-howto-code: #c7f4ff;
    }
    @media (max-width: 640px) {
        .heat-howto-chip-grid,
        .heat-code-rule-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .heat-howto-section {
            padding: 12px;
        }
    }
    #boardgame-equinox-section {
        --boardgame-guide-accent: #d7bd83;
        --boardgame-guide-accent-strong: #f1ddb1;
        --boardgame-guide-active-text: #201608;
        --boardgame-guide-tab-bg: linear-gradient(180deg, rgba(35, 30, 22, 0.9), rgba(18, 16, 13, 0.96));
        --boardgame-guide-tab-border: rgba(215, 189, 131, 0.42);
        --boardgame-guide-active-bg: linear-gradient(180deg, #f0d89e, #b98b42);
        --boardgame-guide-card-bg: linear-gradient(180deg, rgba(36, 31, 23, 0.94), rgba(19, 17, 14, 0.98));
        --boardgame-guide-shadow: rgba(215, 189, 131, 0.28);
    }
    #boardgame-kaprekar-section {
        --boardgame-guide-accent: #d9a682;
        --boardgame-guide-accent-strong: #efc4a7;
        --boardgame-guide-active-text: #261525;
        --boardgame-guide-tab-bg: linear-gradient(180deg, rgba(45, 31, 54, 0.94), rgba(31, 21, 39, 0.98));
        --boardgame-guide-tab-border: rgba(217, 166, 130, 0.46);
        --boardgame-guide-active-bg: linear-gradient(180deg, #f0c8b3, #b98168);
        --boardgame-guide-card-bg: linear-gradient(180deg, rgba(42, 31, 48, 0.97), rgba(27, 20, 32, 0.99));
        --boardgame-guide-shadow: rgba(132, 82, 169, 0.28);
    }
    #boardgame-blossom-section {
        --boardgame-guide-accent: #e4a4b0;
        --boardgame-guide-accent-strong: #ffd9df;
        --boardgame-guide-active-text: #2b1118;
        --boardgame-guide-tab-bg: linear-gradient(180deg, rgba(55, 44, 48, 0.92), rgba(34, 25, 28, 0.98));
        --boardgame-guide-tab-border: rgba(156, 104, 116, 0.46);
        --boardgame-guide-active-bg: linear-gradient(180deg, #f0b9c4, #b66d7e);
        --boardgame-guide-card-bg: linear-gradient(180deg, rgba(55, 44, 48, 0.97), rgba(34, 25, 28, 0.98));
        --boardgame-guide-shadow: rgba(182, 109, 126, 0.28);
    }
    .blossom-howto-lead {
        margin: 0 auto 12px;
        max-width: 560px;
        color: #f5d6dc;
        font-size: 13px;
        line-height: 1.7;
    }
    .blossom-howto-section {
        margin: 12px auto 0;
        max-width: 560px;
        padding: 14px 16px;
        border: 1px solid rgba(228, 164, 176, 0.24);
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(73, 50, 58, 0.58), rgba(35, 25, 29, 0.72));
        text-align: left;
    }
    .blossom-howto-section h3 {
        margin: 0 0 8px;
        color: #f0b9c4;
        font-size: 14px;
        letter-spacing: 0.02em;
        text-align: center;
    }
    .blossom-howto-section ul {
        margin: 0;
        padding-left: 18px;
    }
    .blossom-howto-section li {
        margin: 6px 0;
        color: #f7edf0;
        font-size: 12px;
        line-height: 1.62;
    }
    .blossom-howto-chip-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        max-width: 560px;
        margin: 0 auto 12px;
    }
    .blossom-howto-chip {
        padding: 8px 6px;
        border-radius: 12px;
        border: 1px solid rgba(240, 185, 196, 0.38);
        background: rgba(240, 185, 196, 0.12);
        color: #ffe3e8;
        font-size: 12px;
        font-weight: 900;
        text-align: center;
    }
    .blossom-matchup-flow {
        position: relative;
        display: block;
        width: min(250px, 100%);
        height: 230px;
        margin: 14px auto 12px;
        border-radius: 999px;
        background:
            radial-gradient(circle at 50% 50%, rgba(240, 185, 196, 0.14) 0 32%, transparent 33%),
            radial-gradient(circle at 50% 50%, transparent 0 60%, rgba(240, 185, 196, 0.16) 61% 63%, transparent 64%);
    }
    .blossom-matchup-flow::before {
        content: '상성';
        position: absolute;
        inset: 50% auto auto 50%;
        transform: translate(-50%, -50%);
        width: 54px;
        height: 54px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(240, 185, 196, 0.34);
        background: rgba(18, 13, 16, 0.72);
        color: #ffe3e8;
        font-size: 12px;
        font-weight: 900;
        box-shadow: inset 0 0 14px rgba(255, 219, 226, 0.08), 0 0 18px rgba(240, 185, 196, 0.12);
    }
    .blossom-matchup-card {
        position: absolute;
        width: 64px;
        min-height: 64px;
        padding: 8px 6px 7px;
        border-radius: 18px;
        border: 1px solid color-mix(in srgb, var(--blossom-season-color) 58%, rgba(240, 185, 196, 0.28));
        background:
            radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--blossom-season-color) 18%, transparent), transparent 48%),
            rgba(18, 13, 16, 0.74);
        text-align: center;
        box-shadow:
            inset 0 0 15px color-mix(in srgb, var(--blossom-season-color) 12%, transparent),
            0 0 16px color-mix(in srgb, var(--blossom-season-color) 12%, transparent);
    }
    .blossom-matchup-card::before {
        content: '✿';
        display: block;
        margin-bottom: 2px;
        color: var(--blossom-season-color);
        font-size: 18px;
        line-height: 1;
        text-shadow: 0 0 10px color-mix(in srgb, var(--blossom-season-color) 70%, transparent);
    }
    .blossom-matchup-card::after {
        position: absolute;
        right: auto;
        color: #f0b9c4;
        font-size: 18px;
        font-weight: 900;
        text-shadow: 0 0 10px rgba(240, 185, 196, 0.38);
    }
    .blossom-matchup-card:nth-child(1) {
        --blossom-season-color: #ffe76b;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .blossom-matchup-card:nth-child(1)::after {
        content: '↘';
        left: 108px;
        top: 30px;
    }
    .blossom-matchup-card:nth-child(2) {
        --blossom-season-color: #f7fbff;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
    .blossom-matchup-card:nth-child(2)::after {
        content: '↙';
        left: 28px;
        top: 88px;
    }
    .blossom-matchup-card:nth-child(3) {
        --blossom-season-color: #ff9a32;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .blossom-matchup-card:nth-child(3)::after {
        content: '↖';
        right: 102px;
        top: 26px;
    }
    .blossom-matchup-card:nth-child(4) {
        --blossom-season-color: #82ddff;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    .blossom-matchup-card:nth-child(4)::after {
        content: '↗';
        left: 40px;
        top: -48px;
    }
    .blossom-matchup-season {
        display: block;
        color: #fff4f6;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.2;
    }
    .blossom-matchup-target {
        display: block;
        margin-top: 3px;
        color: color-mix(in srgb, var(--blossom-season-color) 70%, #ffe3e8);
        font-size: 10px;
        font-weight: 800;
    }
    .blossom-matchup-note {
        margin: 8px 0 0;
        color: #f7edf0;
        font-size: 12px;
        line-height: 1.6;
        text-align: center;
    }
    @media (max-width: 640px) {
        .blossom-matchup-flow {
            position: relative;
            display: block;
            width: min(244px, 100%);
            height: 224px;
            margin: 14px auto 12px;
            border-radius: 999px;
            background:
                radial-gradient(circle at 50% 50%, rgba(240, 185, 196, 0.14) 0 34%, transparent 35%),
                radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(240, 185, 196, 0.16) 59% 61%, transparent 62%);
        }
        .blossom-matchup-flow::before {
            content: '상성';
            position: absolute;
            inset: 50% auto auto 50%;
            transform: translate(-50%, -50%);
            width: 58px;
            height: 58px;
            border-radius: 999px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(240, 185, 196, 0.34);
            background: rgba(18, 13, 16, 0.72);
            color: #ffe3e8;
            font-size: 12px;
            font-weight: 900;
            box-shadow: inset 0 0 14px rgba(255, 219, 226, 0.08), 0 0 18px rgba(240, 185, 196, 0.12);
        }
        .blossom-matchup-card {
            position: absolute;
            width: 88px;
            min-height: 66px;
            padding: 8px 6px 7px;
            border-radius: 18px;
            border-color: color-mix(in srgb, var(--blossom-season-color) 58%, rgba(240, 185, 196, 0.28));
            background:
                radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--blossom-season-color) 18%, transparent), transparent 48%),
                rgba(18, 13, 16, 0.74);
            box-shadow:
                inset 0 0 15px color-mix(in srgb, var(--blossom-season-color) 12%, transparent),
                0 0 16px color-mix(in srgb, var(--blossom-season-color) 12%, transparent);
        }
        .blossom-matchup-card::before {
            content: '✿';
            display: block;
            margin-bottom: 2px;
            color: var(--blossom-season-color);
            font-size: 18px;
            line-height: 1;
            text-shadow: 0 0 10px color-mix(in srgb, var(--blossom-season-color) 70%, transparent);
        }
        .blossom-matchup-card::after {
            top: 50%;
            right: auto;
            color: #f0b9c4;
            font-size: 18px;
            text-shadow: 0 0 10px rgba(240, 185, 196, 0.38);
        }
        .blossom-matchup-card:nth-child(1) {
            --blossom-season-color: #ffe76b;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        .blossom-matchup-card:nth-child(1)::after {
            content: '↘';
            left: 78px;
            transform: translateY(-32px) rotate(-3deg);
        }
        .blossom-matchup-card:nth-child(2) {
            --blossom-season-color: #f7fbff;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }
        .blossom-matchup-card:nth-child(2)::after {
            content: '↙';
            left: 10px;
            top: 100%;
            transform: translate(-6px, -4px);
        }
        .blossom-matchup-card:nth-child(3) {
            --blossom-season-color: #ff9a32;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        .blossom-matchup-card:nth-child(3)::after {
            content: '↖';
            right: 78px;
            left: auto;
            transform: translateY(-30px) rotate(3deg);
        }
        .blossom-matchup-card:nth-child(4) {
            --blossom-season-color: #82ddff;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
        .blossom-matchup-card:nth-child(4)::after {
            content: '↗';
            left: 70px;
            top: 0;
            transform: translate(6px, -4px);
        }
        .blossom-matchup-season {
            color: #fff4f6;
            font-size: 13px;
        }
        .blossom-matchup-target {
            margin-top: 3px;
            font-size: 10px;
            color: color-mix(in srgb, var(--blossom-season-color) 70%, #ffe3e8);
        }
    }
    @media (max-width: 640px) {
        .blossom-matchup-flow {
            width: min(218px, 100%);
            height: 202px;
            margin: 12px auto 10px;
            background:
                radial-gradient(circle at 50% 50%, rgba(240, 185, 196, 0.13) 0 31%, transparent 32%),
                radial-gradient(circle at 50% 50%, transparent 0 60%, rgba(240, 185, 196, 0.16) 61% 63%, transparent 64%);
        }
        .blossom-matchup-flow::before {
            width: 48px;
            height: 48px;
            font-size: 11px;
        }
        .blossom-matchup-card {
            width: 58px;
            min-height: 58px;
            padding: 7px 5px 6px;
            border-radius: 16px;
        }
        .blossom-matchup-card::before {
            font-size: 16px;
        }
        .blossom-matchup-card::after {
            font-size: 16px;
        }
        .blossom-matchup-card:nth-child(1)::after {
            left: 92px;
            top: 56px;
        }
        .blossom-matchup-card:nth-child(2)::after {
            left: 33px;
            top: 78px;
            
        }
        .blossom-matchup-card:nth-child(3)::after {
            right: 92px;
            top: 50px;
            
        }
        .blossom-matchup-card:nth-child(4)::after {
            left: 24px;
            top: -36px;
            
        }
        .blossom-matchup-season {
            font-size: 12px;
        }
        .blossom-matchup-target {
            font-size: 9px;
        }
    }
    @media (max-width: 640px) {
        .blossom-howto-chip-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .blossom-howto-section {
            padding: 12px;
        }
    }
    #boardgame-stella-section {
        --boardgame-guide-accent: #d5b95d;
        --boardgame-guide-accent-strong: #f7e3a0;
        --boardgame-guide-active-text: #21180b;
        --boardgame-guide-tab-bg: linear-gradient(180deg, rgba(38, 31, 51, 0.92), rgba(22, 18, 30, 0.98));
        --boardgame-guide-tab-border: rgba(213, 185, 93, 0.42);
        --boardgame-guide-active-bg: linear-gradient(180deg, #f1da86, #b99132);
        --boardgame-guide-card-bg: linear-gradient(180deg, rgba(38, 31, 51, 0.96), rgba(21, 17, 29, 0.98));
        --boardgame-guide-shadow: rgba(213, 185, 93, 0.28);
    }
    #boardgame-quinter9-section {
        --boardgame-guide-accent: #bc91ff;
        --boardgame-guide-accent-strong: #eadbff;
        --boardgame-guide-active-text: #1b0f2d;
        --boardgame-guide-tab-bg: linear-gradient(180deg, rgba(34, 26, 49, 0.92), rgba(18, 14, 28, 0.98));
        --boardgame-guide-tab-border: rgba(188, 145, 255, 0.42);
        --boardgame-guide-active-bg: linear-gradient(180deg, #d8bcff, #8d62dd);
        --boardgame-guide-card-bg: linear-gradient(180deg, rgba(35, 27, 50, 0.96), rgba(18, 14, 28, 0.98));
        --boardgame-guide-shadow: rgba(188, 145, 255, 0.28);
    }
    #boardgame-relic-section {
        --boardgame-guide-accent: #e8df9d;
        --boardgame-guide-accent-strong: #f4efbd;
        --boardgame-guide-active-text: #151b10;
        --boardgame-guide-tab-bg: linear-gradient(180deg, rgba(22, 30, 16, 0.9), rgba(10, 16, 8, 0.96));
        --boardgame-guide-tab-border: rgba(180, 188, 122, 0.54);
        --boardgame-guide-active-bg: linear-gradient(180deg, #eee8b0, #aeb75f);
        --boardgame-guide-card-bg: linear-gradient(180deg, rgba(22, 30, 16, 0.96), rgba(12, 18, 10, 0.98));
        --boardgame-guide-shadow: rgba(180, 188, 122, 0.28);
    }
    #boardgame-mandala-section {
        --boardgame-guide-accent: #66aaff;
        --boardgame-guide-accent-strong: #d9eaff;
        --boardgame-guide-active-text: #071127;
        --boardgame-guide-tab-bg: linear-gradient(180deg, rgba(15, 28, 54, 0.92), rgba(6, 10, 22, 0.98));
        --boardgame-guide-tab-border: rgba(102, 170, 255, 0.48);
        --boardgame-guide-active-bg: linear-gradient(180deg, #dbeaff, #6caaff);
        --boardgame-guide-card-bg: linear-gradient(180deg, rgba(13, 27, 54, 0.96), rgba(5, 9, 21, 0.98));
        --boardgame-guide-shadow: rgba(80, 145, 255, 0.32);
    }
    #boardgame-ritual-section {
        --boardgame-guide-accent: #ff9a42;
        --boardgame-guide-accent-strong: #ffd0a3;
        --boardgame-guide-active-text: #201006;
        --boardgame-guide-tab-bg: linear-gradient(180deg, rgba(37, 20, 10, 0.92), rgba(15, 10, 7, 0.98));
        --boardgame-guide-tab-border: rgba(255, 137, 45, 0.46);
        --boardgame-guide-active-bg: linear-gradient(180deg, #ffc18a, #e46f22);
        --boardgame-guide-card-bg: linear-gradient(180deg, rgba(35, 20, 12, 0.96), rgba(17, 10, 8, 0.98));
        --boardgame-guide-shadow: rgba(255, 124, 31, 0.28);
    }
    #boardgame-baseball-section {
        --boardgame-guide-accent: #9ec4e8;
        --boardgame-guide-accent-strong: #e4f3ff;
        --boardgame-guide-active-text: #111820;
        --boardgame-guide-tab-bg: linear-gradient(180deg, rgba(23, 37, 52, 0.92), rgba(11, 21, 34, 0.98));
        --boardgame-guide-tab-border: rgba(126, 176, 221, 0.42);
        --boardgame-guide-active-bg: linear-gradient(180deg, #d7edff, #86b7df);
        --boardgame-guide-card-bg: linear-gradient(180deg, rgba(23, 37, 52, 0.96), rgba(11, 21, 34, 0.98));
        --boardgame-guide-shadow: rgba(126, 176, 221, 0.26);
    }
    .boardgame-guide-tabs {
        max-width: 560px;
        margin: 0 auto 14px;
    }
    .boardgame-guide-tab-btn {
        color: var(--boardgame-guide-accent);
        background: var(--boardgame-guide-tab-bg);
        border-color: var(--boardgame-guide-tab-border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 20px rgba(0, 0, 0, 0.14);
    }
    .boardgame-guide-tab-btn:hover,
    .boardgame-guide-tab-btn:focus-visible {
        color: var(--boardgame-guide-accent-strong);
        border-color: var(--boardgame-guide-accent);
    }
    .boardgame-guide-tab-btn.is-active {
        color: var(--boardgame-guide-active-text);
        background: var(--boardgame-guide-active-bg);
        border-color: var(--boardgame-guide-accent-strong);
        box-shadow: 0 0 18px var(--boardgame-guide-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.34);
    }
    .boardgame-simple-card {
        color: var(--boardgame-guide-accent-strong);
        background: var(--boardgame-guide-card-bg);
        border-color: var(--boardgame-guide-tab-border);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18), 0 0 18px var(--boardgame-guide-shadow);
    }
    #boardgame-equinox-section #equinox-guide-text-tab {
        color: #111111;
        background: linear-gradient(180deg, #ffffff, #e8e8e8);
        border-color: rgba(255, 255, 255, 0.92);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 10px 20px rgba(255, 255, 255, 0.08);
    }
    #boardgame-equinox-section #equinox-guide-simple-tab {
        color: #ffffff;
        background: linear-gradient(180deg, #1f1f1f, #050505);
        border-color: rgba(255, 255, 255, 0.28);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 20px rgba(0, 0, 0, 0.28);
    }
    #boardgame-equinox-section #equinox-guide-text-tab:hover,
    #boardgame-equinox-section #equinox-guide-text-tab:focus-visible {
        color: #000000;
        border-color: rgba(255, 255, 255, 1);
        background: linear-gradient(180deg, #ffffff, #f5f5f5);
    }
    #boardgame-equinox-section #equinox-guide-simple-tab:hover,
    #boardgame-equinox-section #equinox-guide-simple-tab:focus-visible {
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.58);
        background: linear-gradient(180deg, #2a2a2a, #080808);
    }
    #boardgame-equinox-section #equinox-guide-text-tab.is-active {
        color: #000000;
        background: linear-gradient(180deg, #ffffff, #f0f0f0);
        border-color: rgba(255, 255, 255, 1);
        box-shadow: 0 0 18px rgba(255, 255, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    #boardgame-equinox-section #equinox-guide-simple-tab.is-active {
        color: #ffffff;
        background: linear-gradient(180deg, #222222, #000000);
        border-color: rgba(255, 255, 255, 0.62);
        box-shadow: 0 0 18px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }
    #boardgame-equinox-section .equinox-mode-shell {
        color: #efe5cd;
        background:
            radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.07), transparent 34%),
            radial-gradient(circle at 72% 24%, rgba(0, 0, 0, 0.34), transparent 36%),
            linear-gradient(180deg, rgba(22, 21, 19, 0.98), rgba(7, 7, 7, 0.99));
        border: 1px solid rgba(215, 189, 131, 0.34);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32), inset 0 0 36px rgba(215, 189, 131, 0.07);
    }
    #boardgame-equinox-section .equinox-start-grid {
        max-width: 280px;
        margin: 0 auto 18px;
    }
    #boardgame-equinox-section .equinox-start-card {
        background: #ffffff;
        border: 2px solid rgba(215, 189, 131, 0.68);
        box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.14), 0 12px 28px rgba(0, 0, 0, 0.32);
    }
    #boardgame-equinox-section .equinox-start-card .name {
        color: #111111;
        text-shadow: none;
    }
    #boardgame-equinox-section .equinox-howto-card {
        position: relative;
        max-width: 680px;
        margin: 0 auto;
        color: #efe5cd;
        background: linear-gradient(180deg, rgba(36, 31, 23, 0.96), rgba(15, 14, 13, 0.98));
        border: 1px solid rgba(215, 189, 131, 0.42);
        box-shadow: inset 0 0 26px rgba(215, 189, 131, 0.08), 0 16px 32px rgba(0, 0, 0, 0.25);
    }
    #boardgame-equinox-section .equinox-howto-card > strong {
        color: #f1ddb1;
        text-align: center;
    }
    #boardgame-equinox-section .equinox-entry-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 74px;
        height: 34px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid rgba(215, 189, 131, 0.54);
        color: #f8e8bd;
        background: linear-gradient(135deg, rgba(42, 35, 23, 0.88), rgba(16, 15, 13, 0.96));
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.03em;
        box-shadow: 0 8px 18px rgba(20, 16, 8, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        pointer-events: none;
        white-space: nowrap;
        text-shadow: 0 1px 8px rgba(215, 189, 131, 0.42);
    }
    #boardgame-equinox-section .equinox-howto-lead {
        max-width: 560px;
        margin: 14px auto 12px;
        color: #efe5cd;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.65;
        text-align: center;
    }
    #boardgame-equinox-section .equinox-howto-chip-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        max-width: 560px;
        margin: 0 auto 12px;
    }
    #boardgame-equinox-section .equinox-howto-chip {
        padding: 8px 6px;
        border-radius: 12px;
        border: 1px solid rgba(215, 189, 131, 0.38);
        background: rgba(215, 189, 131, 0.12);
        color: #ffe7b7;
        font-size: 12px;
        font-weight: 900;
        text-align: center;
    }
    #boardgame-equinox-section .equinox-howto-section {
        max-width: 560px;
        margin: 10px auto 0;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid rgba(215, 189, 131, 0.24);
        background: linear-gradient(135deg, rgba(40, 34, 23, 0.44), rgba(10, 10, 10, 0.5));
        text-align: left;
    }
    #boardgame-equinox-section .equinox-howto-section h3 {
        margin: 0 0 8px;
        color: #f1ddb1;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-align: center;
    }
    #boardgame-equinox-section .equinox-howto-section ul {
        margin: 0;
        padding-left: 18px;
    }
    #boardgame-equinox-section .equinox-howto-section li {
        margin: 4px 0;
        color: #f1eadb;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.58;
    }
    #boardgame-equinox-section .equinox-power-rule {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 10px;
    }
    #boardgame-equinox-section .equinox-power-rule-card {
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items: center;
        padding: 12px 10px;
        border-radius: 14px;
        border: 1px solid rgba(215, 189, 131, 0.28);
        background: linear-gradient(180deg, rgba(238, 229, 207, 0.08), rgba(0, 0, 0, 0.18));
        color: #f5e7c5;
        text-align: center;
    }
    #boardgame-equinox-section .equinox-power-rule-card code {
        display: inline-flex;
        padding: 5px 10px;
        border-radius: 999px;
        color: #17140d;
        background: linear-gradient(180deg, #f1ddb1, #b98b42);
        font-family: inherit;
        font-size: 12px;
        font-weight: 900;
    }
    #boardgame-equinox-section .equinox-power-rule-card span {
        color: #efe5cd;
        font-size: 12px;
        font-weight: 800;
    }
    @media (max-width: 640px) {
        #boardgame-equinox-section .equinox-entry-badge {
            top: 10px;
            right: 10px;
            min-width: 54px;
            height: 24px;
            padding: 0 8px;
            font-size: 7px;
            letter-spacing: 0.01em;
        }
        #boardgame-equinox-section .equinox-howto-chip-grid,
        #boardgame-equinox-section .equinox-power-rule {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    #boardgame-quinter9-section #quinter9-guide-text-tab {
        color: #9af46c;
        background: linear-gradient(180deg, rgba(16, 43, 22, 0.94), rgba(8, 23, 14, 0.98));
        border-color: rgba(92, 219, 82, 0.52);
        box-shadow: inset 0 1px 0 rgba(172, 255, 126, 0.18), 0 10px 20px rgba(8, 23, 14, 0.18);
    }
    #boardgame-quinter9-section #quinter9-guide-simple-tab {
        color: #ff8b7f;
        background: linear-gradient(180deg, rgba(52, 19, 18, 0.94), rgba(25, 9, 10, 0.98));
        border-color: rgba(238, 72, 54, 0.52);
        box-shadow: inset 0 1px 0 rgba(255, 160, 132, 0.16), 0 10px 20px rgba(25, 9, 10, 0.18);
    }
    #boardgame-quinter9-section #quinter9-guide-text-tab:hover,
    #boardgame-quinter9-section #quinter9-guide-text-tab:focus-visible {
        color: #d8ffc4;
        border-color: rgba(147, 255, 107, 0.82);
    }
    #boardgame-quinter9-section #quinter9-guide-simple-tab:hover,
    #boardgame-quinter9-section #quinter9-guide-simple-tab:focus-visible {
        color: #ffd0c9;
        border-color: rgba(255, 115, 94, 0.82);
    }
    #boardgame-quinter9-section #quinter9-guide-text-tab.is-active {
        color: #11310e;
        background: linear-gradient(180deg, #c6ff9d, #58d64b);
        border-color: rgba(212, 255, 178, 0.92);
        box-shadow: 0 0 18px rgba(100, 226, 72, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.38);
    }
    #boardgame-quinter9-section #quinter9-guide-simple-tab.is-active {
        color: #330b08;
        background: linear-gradient(180deg, #ffb4a7, #e33f2e);
        border-color: rgba(255, 202, 190, 0.92);
        box-shadow: 0 0 18px rgba(238, 72, 54, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.34);
    }
    .quinter9-howto-lead {
        margin: 0 auto 12px;
        max-width: 560px;
        color: #d8f7d0;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.65;
        text-align: center;
    }
    .quinter9-howto-section {
        margin: 10px auto 0;
        max-width: 560px;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid rgba(122, 223, 98, 0.2);
        background: linear-gradient(135deg, rgba(14, 35, 20, 0.42), rgba(46, 16, 17, 0.34));
        text-align: left;
    }
    .quinter9-howto-section h3 {
        margin: 0 0 8px;
        color: #9af46c;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-align: center;
    }
    .quinter9-howto-section ul {
        margin: 0;
        padding-left: 18px;
    }
    .quinter9-howto-section li {
        margin: 3px 0;
        color: #e8f4e4;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.55;
    }
    .quinter9-howto-chip-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .quinter9-howto-chip {
        padding: 9px 8px;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(92, 219, 82, 0.13), rgba(238, 72, 54, 0.12));
        border: 1px solid rgba(147, 255, 107, 0.2);
        color: #d8f7d0;
        font-size: 11px;
        font-weight: 900;
        line-height: 1.45;
        text-align: center;
    }
    .baseball-howto-card {
        max-width: 660px;
        margin: 0 auto;
        padding: 18px;
        border: 1px solid rgba(188, 198, 210, 0.2);
        background: linear-gradient(180deg, rgba(25, 31, 39, 0.96), rgba(12, 16, 22, 0.98));
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), 0 0 18px rgba(188, 198, 210, 0.12);
    }
    .baseball-entry-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        min-width: 74px;
        height: 34px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #edf5ff;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.03em;
        background: rgba(33, 39, 48, 0.72);
        border: 1px solid rgba(188, 198, 210, 0.46);
        border-radius: 999px;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        pointer-events: none;
        white-space: nowrap;
    }
    .baseball-howto-lead {
        max-width: 580px;
        margin: 10px auto 14px;
        color: #dfe7f0;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.65;
        text-align: center;
    }
    .baseball-howto-mode-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        max-width: 520px;
        margin: 0 auto 14px;
    }
    .baseball-howto-mode-btn {
        min-height: 40px;
        border-radius: 12px;
        border: 1px solid rgba(188, 198, 210, 0.28);
        background: linear-gradient(180deg, rgba(33, 39, 48, 0.96), rgba(16, 20, 27, 0.98));
        color: #c9d3df;
        font-family: inherit;
        font-size: 12px;
        font-weight: 900;
        cursor: pointer;
        transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
    }
    .baseball-howto-mode-btn:hover,
    .baseball-howto-mode-btn:focus-visible {
        transform: translateY(-1px);
        border-color: rgba(232, 238, 246, 0.58);
        color: #ffffff;
    }
    .baseball-howto-mode-btn.is-active {
        color: #111820;
        background: linear-gradient(180deg, #e8eef6, #9aa9ba);
        border-color: rgba(238, 244, 251, 0.9);
        box-shadow: 0 0 18px rgba(188, 198, 210, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }
    .baseball-howto-panel {
        display: none;
    }
    .baseball-howto-panel.is-active {
        display: block;
    }
    .baseball-howto-section {
        margin: 10px auto 0;
        max-width: 600px;
        padding: 13px 15px;
        border-radius: 14px;
        border: 1px solid rgba(188, 198, 210, 0.18);
        background: linear-gradient(135deg, rgba(35, 42, 52, 0.48), rgba(14, 18, 25, 0.58));
        text-align: left;
    }
    .baseball-howto-section h3 {
        margin: 0 0 8px;
        color: #eef4fb;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-align: center;
    }
    .baseball-howto-section ul {
        margin: 0;
        padding-left: 18px;
    }
    .baseball-howto-section li {
        margin: 4px 0;
        color: #dce4ee;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.58;
    }
    .baseball-howto-chip-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .baseball-howto-chip-grid.is-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .baseball-howto-chip {
        padding: 9px 8px;
        border-radius: 12px;
        border: 1px solid rgba(188, 198, 210, 0.2);
        background: rgba(255, 255, 255, 0.04);
        color: #e7edf5;
        font-size: 11px;
        font-weight: 900;
        line-height: 1.45;
        text-align: center;
    }
    .baseball-howto-note {
        margin: 10px auto 0;
        max-width: 600px;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid rgba(255, 214, 120, 0.24);
        background: rgba(255, 214, 120, 0.08);
        color: #ffe2a0;
        font-size: 12px;
        font-weight: 900;
        line-height: 1.6;
        text-align: center;
    }
    .baseball-howto-note.is-extreme {
        border-color: rgba(255, 116, 89, 0.3);
        background: rgba(255, 116, 89, 0.08);
        color: #ffcabf;
    }
    @media (max-width: 640px) {
        .baseball-howto-card {
            padding: 14px 12px;
        }
        .baseball-howto-mode-tabs {
            gap: 6px;
        }
        .baseball-howto-mode-btn {
            min-height: 36px;
            font-size: 10px;
        }
        .baseball-howto-chip-grid,
        .baseball-howto-chip-grid.is-three {
            grid-template-columns: 1fr;
        }
        .baseball-howto-section {
            padding: 12px;
        }
    }
    #boardgame-classic-play-section #classic-timer-text {
        width: fit-content;
        min-width: 132px;
        margin: 8px auto 0 !important;
        padding: 7px 18px;
        color: #fff3d4;
        font-size: 15px;
        font-weight: 800;
        line-height: 1;
        text-align: center;
        background: rgba(77, 43, 24, 0.72);
        border: 1px solid rgba(255, 232, 184, 0.38);
        border-radius: 999px;
        box-shadow: 0 8px 18px rgba(44, 25, 14, 0.22);
        text-shadow: 0 2px 4px rgba(38, 20, 10, 0.72);
        backdrop-filter: blur(2px);
    }
    #boardgame-classic-play-section #classic-timer-bar {
        background: linear-gradient(to right, #4b2b19, #8a6038 52%, #ead2a5);
    }
    .classic-game-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 38px;
        margin-bottom: 12px;
    }
    .classic-mobile-actions {
        display: none;
        gap: 8px;
        margin: 4px 0 14px;
    }
    .classic-mobile-actions .btn {
        flex: 1 1 0;
    }
    .classic-mobile-life {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-top: 10px;
    }
    .classic-mobile-status-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .classic-mobile-score {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 0 16px;
        color: #5d3f24;
        font-size: 11px;
        font-weight: bold;
        background: rgba(255, 248, 230, 0.92);
        border: 1px solid rgba(129, 92, 48, 0.24);
        border-radius: 999px;
        box-shadow: 0 5px 12px rgba(55, 39, 24, 0.12);
    }
    .classic-mobile-home {
        align-self: center;
    }
    .classic-game-score {
        min-width: 92px;
        color: #333;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.4;
        text-align: left;
    }
    .classic-game-body {
        display: grid;
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
        gap: 16px;
        margin-top: 16px;
    }
    .classic-target-panel,
    .classic-hints-panel {
        padding: 14px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 14px;
    }
    #boardgame-classic-play-section .classic-target-panel,
    #boardgame-classic-play-section .classic-hints-panel {
        background: rgba(255, 249, 235, 0.86);
        border-color: rgba(118, 84, 45, 0.28);
        box-shadow: 0 10px 24px rgba(55, 39, 24, 0.14);
        backdrop-filter: blur(2px);
    }
    .classic-target-figure {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 220px;
        margin-bottom: 10px;
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(247, 244, 234, 0.95), rgba(239, 232, 214, 0.95));
        border: 1px solid rgba(166, 136, 72, 0.16);
    }
    #boardgame-classic-play-section .classic-target-figure {
        background: radial-gradient(circle, rgba(255, 250, 238, 0.92), rgba(232, 210, 170, 0.62));
        border-color: rgba(129, 92, 48, 0.28);
    }
    .classic-target-figure img {
        width: min(100%, 136px);
        max-height: 220px;
        object-fit: contain;
        transition: filter 0.22s ease, opacity 0.22s ease;
    }
    .classic-target-figure img.is-silhouette {
        filter: brightness(0) saturate(0) contrast(1.08);
    }
    .classic-info-box {
        padding: 14px;
        border-radius: 14px;
        background: rgba(249, 247, 240, 0.9);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }
    #boardgame-classic-play-section .classic-info-box {
        background: rgba(255, 248, 230, 0.88);
        border-color: rgba(129, 92, 48, 0.22);
    }
    #boardgame-classic-play-section .classic-hint-btn {
        color: #fff2d2;
        background: linear-gradient(180deg, #a84a3a, #6b211b);
        border: 1px solid rgba(255, 214, 176, 0.34);
        box-shadow: 0 8px 18px rgba(83, 25, 18, 0.28);
    }
    #boardgame-classic-play-section .classic-hint-btn:hover:not(:disabled) {
        background: linear-gradient(180deg, #b75745, #7a2a22);
    }
    #boardgame-classic-play-section .classic-answer-row .btn-submit {
        color: #fff1d1;
        background: linear-gradient(180deg, #8d5c32, #5b341c);
        border: 1px solid rgba(255, 231, 186, 0.28);
        box-shadow: 0 8px 18px rgba(62, 36, 20, 0.22);
    }
    #boardgame-classic-play-section .classic-answer-row .btn-submit:hover:not(:disabled) {
        background: linear-gradient(180deg, #9c693c, #643a20);
    }
    #boardgame-classic-play-section .classic-feedback {
        width: fit-content;
        min-width: 180px;
        max-width: 92%;
        margin: 14px auto 0;
        transform: translateY(10px);
        padding: 10px 20px 6px;
        color: #f2d69b;
        background: rgba(73, 42, 24, 0.72);
        border: 1px solid rgba(255, 228, 178, 0.28);
        border-radius: 999px;
        box-shadow: 0 8px 18px rgba(45, 25, 14, 0.2);
        text-shadow: 0 2px 4px rgba(33, 17, 8, 0.68);
        backdrop-filter: blur(2px);
    }
    #boardgame-classic-play-section .classic-feedback:empty {
        padding: 0;
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }
    .classic-info-box strong,
    .classic-info-box span {
        display: block;
    }
    .classic-info-box strong {
        margin-bottom: 5px;
        color: #222;
        font-size: 12px;
    }
    .classic-info-box span {
        color: #555;
        font-size: 12px;
        line-height: 1.65;
    }
    .quinter9-code-board {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 38px;
        align-items: center;
        min-height: 220px;
        margin-bottom: 10px;
        padding: 16px;
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(247, 244, 234, 0.95), rgba(239, 232, 214, 0.95));
        border: 1px solid rgba(166, 136, 72, 0.16);
    }
    .quinter9-code-slot {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
    }
    .quinter9-code-slot.is-answer {
        justify-self: stretch;
    }
    .quinter9-code-figure {
        width: 100%;
        min-height: 122px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(166, 136, 72, 0.14);
        padding: 8px;
    }
    .quinter9-code-figure img {
        width: min(100%, 136px);
        max-height: 120px;
        object-fit: contain;
        transition: filter 0.22s ease, opacity 0.22s ease;
    }
    .quinter9-code-figure img.is-silhouette {
        filter: brightness(0) saturate(0) contrast(1.08);
    }
    .quinter9-code-name,
    .quinter9-code-note,
    .quinter9-code-rule {
        color: #6a5845;
        font-size: 9px;
        line-height: 1.55;
    }
    .quinter9-code-name {
        max-width: 100%;
        color: #2f261d;
        font-size: 9px;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    .quinter9-code-value {
        color: #1f2c47;
        font-size: 22px;
        line-height: 1;
    }
    .quinter9-code-arrow {
        color: #82684a;
        font-size: 28px;
        line-height: 1;
    }
    .quinter9-code-rule {
        padding: 9px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(166, 136, 72, 0.14);
    }
    .quinter9-mode-shell {
        max-width: 1120px;
        color: #f1f4f8;
        background:
            linear-gradient(180deg, rgba(7, 9, 12, 0.72), rgba(7, 9, 12, 0.88)),
            url('boardgame/quinter9/quinter9 background.webp') center/cover no-repeat;
        border: 1px solid rgba(212, 219, 229, 0.16);
        box-shadow: 0 20px 46px rgba(0, 0, 0, 0.42);
    }
    .quinter9-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }
    .quinter9-topbar-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .quinter9-music-control {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }
    .quinter9-music-btn {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px;
        min-width: 76px;
        height: 34px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        background: rgba(18, 22, 30, 0.88) !important;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    }
    .quinter9-music-btn .btn-text {
        color: #edf2fa;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.03em;
    }
    .quinter9-music-btn .music-icon {
        color: #f0c78a;
        font-size: 9px;
        line-height: 1;
    }
    .quinter9-music-btn.is-on {
        background: linear-gradient(180deg, rgba(61, 50, 24, 0.96), rgba(33, 28, 16, 0.96)) !important;
        border-color: rgba(240, 199, 138, 0.34) !important;
        box-shadow: 0 8px 18px rgba(131, 95, 33, 0.24);
    }
    .quinter9-music-btn.is-on .btn-text,
    .quinter9-music-btn.is-on .music-icon {
        color: #ffdca2;
    }
    .quinter9-volume-panel {
        position: absolute;
        right: 0;
        bottom: calc(100% + 8px);
        width: 134px;
        padding: 8px 10px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(13, 16, 22, 0.96);
        box-shadow: 0 10px 24px rgba(0,0,0,0.26);
        display: flex;
        flex-direction: column;
        gap: 6px;
        opacity: 0;
        transform: translateY(6px);
        pointer-events: none;
        transition: opacity 0.16s ease, transform 0.16s ease;
        z-index: 30;
    }
    .quinter9-music-control.is-open .quinter9-volume-panel,
    .quinter9-music-control:focus-within .quinter9-volume-panel {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .quinter9-volume-label {
        color: rgba(255,255,255,0.76);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-align: left;
    }
    .quinter9-volume-slider {
        width: 100%;
        accent-color: #d6b06d;
        cursor: pointer;
    }
    .quinter9-status-pills {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .quinter9-status-pill {
        padding: 6px 12px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.1);
        background: rgba(9, 13, 18, 0.62);
        color: #eff3f8;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.06em;
        white-space: nowrap;
    }
    .quinter9-status-pill.is-player {
        color: #8ef2a1;
        border-color: rgba(110, 225, 132, 0.34);
    }
    .quinter9-status-pill.is-com {
        color: #ff8d8d;
        border-color: rgba(255, 108, 108, 0.34);
    }
    .quinter9-board-shell {
        display: grid;
        gap: 14px;
        position: relative;
    }
    .quinter9-intro-overlay {
        position: absolute;
        inset: 0;
        z-index: 12;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: rgba(6, 8, 12, 0.68);
        backdrop-filter: blur(4px);
        border-radius: 24px;
    }
    .quinter9-intro-overlay.is-open {
        display: flex;
    }
    .quinter9-result-overlay {
        position: absolute;
        inset: 0;
        z-index: 13;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: rgba(6, 8, 12, 0.72);
        backdrop-filter: blur(5px);
        border-radius: 24px;
    }
    .quinter9-result-overlay.is-open {
        display: flex;
    }
    .quinter9-intro-card {
        width: min(100%, 360px);
        padding: 26px 24px 24px;
        border-radius: 22px;
        border: 1px solid rgba(255,255,255,0.12);
        background: linear-gradient(180deg, rgba(17, 20, 27, 0.96), rgba(10, 12, 18, 0.96));
        box-shadow: 0 20px 44px rgba(0,0,0,0.34);
        text-align: center;
        display: grid;
        gap: 8px;
        justify-items: center;
        transform: translateY(-180px);
    }
    .quinter9-result-card {
        width: min(100%, 380px);
        padding: 28px 24px 22px;
        border-radius: 24px;
        border: 1px solid rgba(255,255,255,0.12);
        background: linear-gradient(180deg, rgba(17, 20, 27, 0.97), rgba(10, 12, 18, 0.97));
        box-shadow: 0 20px 44px rgba(0,0,0,0.36);
        text-align: center;
        display: grid;
        gap: 12px;
        justify-items: center;
        transform: translateY(-180px);
    }
    .quinter9-intro-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 108px;
        padding: 8px 16px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.06);
        color: #f8fafc;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.08em;
    }
    .quinter9-intro-card strong {
        color: #f8fbff;
        font-size: 24px;
        font-weight: 900;
        letter-spacing: 0.03em;
    }
    .quinter9-result-card strong {
        color: #f8fbff;
        font-size: 32px;
        font-weight: 900;
        letter-spacing: 0.04em;
    }
    .quinter9-intro-copy {
        color: #e4ecf8;
        font-size: 13px;
        line-height: 1.65;
        text-align: center;
    }
    .quinter9-result-copy {
        color: #e4ecf8;
        font-size: 13px;
        line-height: 1.7;
        text-align: center;
        white-space: pre-line;
    }
    .quinter9-intro-countdown {
        color: #f2d58f;
        font-size: 28px;
        font-weight: 900;
        line-height: 1;
        text-shadow: 0 4px 14px rgba(242, 213, 143, 0.18);
    }
    .quinter9-result-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 2px;
    }
    .quinter9-result-btn {
        min-height: 42px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.1);
        background: rgba(255,255,255,0.08);
        color: #f7fbff;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.04em;
        cursor: pointer;
    }
    .quinter9-result-btn.is-primary {
        background: linear-gradient(135deg, #7c2438, #a23652);
        border-color: rgba(255,255,255,0.08);
    }
    .boardgame-result-overlay {
        position: fixed;
        inset: 0;
        z-index: 24000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: rgba(6, 8, 12, 0.72);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    .boardgame-result-card {
        position: relative;
        width: min(100%, 380px);
        padding: 28px 24px 22px;
        border-radius: 24px;
        border: 1px solid rgba(255,255,255,0.12);
        background: linear-gradient(180deg, rgba(17, 20, 27, 0.97), rgba(10, 12, 18, 0.97));
        box-shadow: 0 20px 44px rgba(0,0,0,0.36);
        text-align: center;
        display: grid;
        gap: 12px;
        justify-items: center;
        transform: translateY(-80px);
    }
    .boardgame-result-title {
        color: #f8fbff;
        font-size: 32px;
        font-weight: 900;
        line-height: 1.05;
        letter-spacing: 0.04em;
    }
    .boardgame-result-copy {
        color: #e4ecf8;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.7;
        text-align: center;
        white-space: pre-line;
    }
    .boardgame-result-subcopy {
        color: #aab7c6;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.55;
        text-align: center;
        white-space: pre-line;
    }
    .boardgame-result-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 2px;
    }
    .boardgame-result-actions.is-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .boardgame-result-actions .btn,
    .boardgame-result-btn {
        width: 100%;
        min-height: 42px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.1);
        background: rgba(255,255,255,0.08);
        color: #f7fbff;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.04em;
        cursor: pointer;
    }
    .boardgame-result-actions .btn-submit,
    .boardgame-result-actions .is-primary,
    .boardgame-result-btn.is-primary {
        background: linear-gradient(135deg, #7c2438, #a23652);
        border-color: rgba(255,255,255,0.08);
    }
    .quinter9-feedback {
        min-height: 42px;
        padding: 10px 14px;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(12, 13, 17, 0.76);
        color:  #f3f6fb;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.03em;
    }
    .quinter9-hand-panel {
        display: grid;
        gap: 8px;
    }
    .quinter9-hand-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: #eef2f8;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.08em;
    }
    .quinter9-hand-head span:last-child {
        color: rgba(255,255,255,0.76);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.05em;
    }
    .quinter9-hand-row {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 30px;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }
    .quinter9-hand-row::-webkit-scrollbar {
        height: 6px;
    }
    .quinter9-hand-row::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.22);
        border-radius: 999px;
    }
    .quinter9-card {
        position: relative;
        min-width: 0;
        padding: 5px 5px 7px;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,0.08);
        background-color: rgba(12, 14, 18, 0.92);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: grid;
        grid-template-rows: 15px minmax(82px, 1fr) 15px;
        gap: 1px;
        align-content: stretch;
        box-shadow: 0 8px 18px rgba(0,0,0,0.24);
        transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    }
    button.quinter9-card {
        cursor: pointer;
    }
    button.quinter9-card:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 12px 18px rgba(0,0,0,0.26);
    }
    .quinter9-card.is-selected {
        box-shadow: 0 0 0 2px rgba(90, 174, 255, 0.82), 0 12px 22px rgba(10, 52, 98, 0.34);
        transform: translateY(-1px);
    }
    .quinter9-card.is-used,
    .quinter9-card:disabled {
        opacity: 0.34;
        cursor: not-allowed;
        filter: saturate(0.3);
    }
    .quinter9-card.is-used {
        grid-template-rows: 1fr;
        justify-items: center;
        align-items: center;
        align-content: center;
        gap: 0;
    }
    .quinter9-card.is-empty {
        background: rgba(255,255,255,0.04);
        border-style: dashed;
        color: rgba(255,255,255,0.34);
        box-shadow: none;
    }
    .quinter9-card.is-back {
        background-image: url('boardgame/quinter9/card/back.webp');
    }
    .quinter9-card-art {
        min-height: 82px;
        border-radius: 13px;
        background: rgba(255,255,255,0.05);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .quinter9-card-art img {
        width: 82%;
        height: 82%;
        object-fit: contain;
        image-rendering: auto;
    }
    .quinter9-card-name,
    .quinter9-card-code {
        text-align: center;
        line-height: 1.12;
        overflow-wrap: anywhere;
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82), 0 0 6px rgba(0, 0, 0, 0.42);
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
    }
    .quinter9-card-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: #fbfdff;
        font-size: 7px;
        font-weight: 800;
        line-height: 1.14;
        min-height: 2.28em;
        max-height: 2.28em;
        padding: 0 2px;
        align-self: start;
        transform: translateY(11px);
        word-break: keep-all;
        overflow-wrap: anywhere;
        text-overflow: ellipsis;
    }
    .quinter9-card-code {
        color: #f5fbff;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.06em;
        min-height: 0;
        align-self: end;
        transform: translateY(-12px);
    }
    .quinter9-card-used-label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
        color: #fbfdff;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.45);
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.24));
        transform: none;
    }
    .quinter9-middle-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "board"
            "action";
        gap: 10px;
        align-items: stretch;
    }
    .quinter9-set-panel {
        position: absolute;
        left: 50%;
        bottom: 62px;
        z-index: 4;
        width: min(82%, 620px);
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(148px, 218px) minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        padding: 0;
        pointer-events: none;
    }
    .quinter9-set-marks {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 42px;
    }
    .quinter9-set-marks.is-player {
        justify-content: flex-start;
    }
    .quinter9-set-marks.is-com {
        justify-content: flex-end;
    }
    .quinter9-set-mark {
        width: 42px;
        height: 42px;
        position: relative;
        border-radius: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.24;
        filter: grayscale(1) brightness(0.62);
        transform: scale(0.9);
        transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
    }
    .quinter9-set-mark.is-player {
        background-image: url('boardgame/quinter9/p.webp');
    }
    .quinter9-set-mark.is-com {
        background-image: url('boardgame/quinter9/c.webp');
    }
    .quinter9-set-mark.is-filled {
        opacity: 1;
        filter: none;
        transform: scale(1);
    }
    .quinter9-set-mark.is-burst {
        animation: quinter9-set-mark-burst 0.86s cubic-bezier(0.18, 0.72, 0.18, 1) both;
    }
    .quinter9-set-action-btn {
        pointer-events: auto;
        min-height: 44px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.12);
        background: linear-gradient(180deg, rgba(22, 28, 38, 0.94), rgba(9, 12, 18, 0.94));
        color: #f5f8fb;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.08em;
        box-shadow: 0 10px 24px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.08);
        cursor: default;
    }
    .quinter9-set-action-btn.is-next {
        cursor: pointer;
        border-color: rgba(255, 224, 132, 0.46);
        background: linear-gradient(180deg, #ffe697, #c9942c);
        color: #241806;
    }
    .quinter9-set-action-btn.is-final {
        cursor: default;
        background: linear-gradient(180deg, rgba(20, 22, 39, 0.98), rgba(9, 12, 26, 0.98));
        font-size: 20px;
        text-shadow: 0 0 14px currentColor;
    }
    .quinter9-set-action-btn.is-win {
        border-color: rgba(160, 255, 114, 0.72);
        color: #a5ff72;
    }
    .quinter9-set-action-btn.is-lose {
        border-color: rgba(255, 134, 75, 0.72);
        color: #ff864b;
    }
    .quinter9-set-action-btn.is-draw {
        border-color: rgba(255,255,255,0.58);
        color: #ffffff;
    }
    @keyframes quinter9-set-mark-burst {
        0% {
            transform: rotate(-130deg) scale(0.34);
            opacity: 0;
            filter: brightness(1.8) saturate(1.45);
        }
        42% {
            transform: rotate(250deg) scale(1.42);
            opacity: 1;
            filter: brightness(1.55) saturate(1.45);
        }
        68% {
            transform: rotate(338deg) scale(0.9);
            filter: brightness(1.2) saturate(1.16);
        }
        100% {
            transform: rotate(360deg) scale(1);
            opacity: 1;
            filter: none;
        }
    }
    .quinter9-action-panel {
        padding: 14px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(10, 13, 18, 0.74);
        display: grid;
        gap: 8px;
        align-content: start;
    }
    .quinter9-action-panel {
        grid-area: action;
    }
    .quinter9-action-panel strong {
        color: #f5f7fb;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-align: center;
    }
    .quinter9-action-copy {
        color: #edf2f8;
        font-size: 12px;
        line-height: 1.55;
        text-align: center;
    }
    .quinter9-action-copy strong {
        display: block;
        margin-bottom: 4px;
    }
    .quinter9-attack-btn {
        min-height: 44px;
    }
    .quinter9-board-panel {
        grid-area: board;
        position: relative;
        width: min(100%, 860px);
        justify-self: center;
        min-height: 640px;
        padding: 18px 12px 76px;
        border-radius: 24px;
        border: 1px solid rgba(255,255,255,0.08);
        background-image:
            linear-gradient(180deg, rgba(10, 11, 15, 0.12), rgba(10, 11, 15, 0.4)),
            url('boardgame/quinter9/quinter9 background.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: grid;
        align-content: center;
        justify-items: center;
        overflow: hidden;
    }
    .quinter9-defence-effect {
        position: absolute;
        inset: 0;
        z-index: 8;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        opacity: 0;
    }
    .quinter9-defence-effect.is-visible {
        animation: quinter9-defence-layer 0.9s ease-out both;
    }
    .quinter9-defence-card {
        position: relative;
        min-width: min(78%, 440px);
        padding: 18px 24px;
        border-radius: 999px;
        border: 2px solid var(--quinter9-defence-color, #55ef7a);
        color: var(--quinter9-defence-color, #55ef7a);
        background:
            radial-gradient(circle at center, var(--quinter9-defence-soft, rgba(85, 239, 122, 0.22)), rgba(7, 10, 14, 0.88) 68%),
            rgba(7, 10, 14, 0.9);
        box-shadow:
            0 0 28px var(--quinter9-defence-soft, rgba(85, 239, 122, 0.28)),
            inset 0 0 22px var(--quinter9-defence-soft, rgba(85, 239, 122, 0.2));
        text-align: center;
        font-size: 32px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-shadow: 0 0 14px var(--quinter9-defence-color, #55ef7a), 0 2px 6px rgba(0,0,0,0.9);
        transform: scale(0.72);
    }
    .quinter9-defence-effect.is-visible .quinter9-defence-card {
        animation: quinter9-defence-pop 0.82s cubic-bezier(0.18, 0.72, 0.18, 1) both;
    }
    .quinter9-defence-star {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: var(--quinter9-defence-color, #55ef7a);
        box-shadow: 0 0 14px var(--quinter9-defence-color, #55ef7a);
        transform: translate(-50%, -50%);
        opacity: 0;
    }
    .quinter9-defence-effect.is-visible .quinter9-defence-star {
        animation: quinter9-defence-star 0.74s ease-out forwards;
    }
    .quinter9-defence-effect.is-player {
        --quinter9-defence-color: #63f27d;
        --quinter9-defence-soft: rgba(99, 242, 125, 0.26);
    }
    .quinter9-defence-effect.is-com {
        --quinter9-defence-color: #ff6666;
        --quinter9-defence-soft: rgba(255, 102, 102, 0.26);
    }
    @keyframes quinter9-defence-layer {
        0% { opacity: 0; }
        14% { opacity: 1; }
        78% { opacity: 1; }
        100% { opacity: 0; }
    }
    @keyframes quinter9-defence-pop {
        0% { opacity: 0; transform: scale(0.52) rotate(-2deg); filter: brightness(1.8); }
        34% { opacity: 1; transform: scale(1.12) rotate(1deg); filter: brightness(1.4); }
        60% { transform: scale(0.96); filter: brightness(1.16); }
        100% { opacity: 1; transform: scale(1); filter: brightness(1); }
    }
    @keyframes quinter9-defence-star {
        0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
        16% { opacity: 1; }
        100% {
            opacity: 0;
            transform:
                translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)))
                scale(1.28);
        }
    }
    .quinter9-action-panel .quinter9-card.quinter9-card-preview,
    .quinter9-action-panel .quinter9-card.quinter9-card-preview.is-empty {
        width: min(100%, 104px);
        margin: 0 auto;
        justify-self: center;
        min-height: 138px;
        padding: 5px 5px 7px;
        border-radius: 14px;
        grid-template-rows: 16px minmax(78px, 1fr) 18px;
        gap: 3px;
        box-shadow: 0 6px 14px rgba(0,0,0,0.0);
    }
    .quinter9-action-panel .quinter9-card-preview .quinter9-card-art {
        border-radius: 12px;
        min-height: 78px;
    }
    .quinter9-action-panel .quinter9-card-preview .quinter9-card-name {
        font-size: 8px;
        min-height: 0;
        padding: 0 4px;
        align-self: start;
        transform: translateY(11px);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92), 0 0 8px rgba(0, 0, 0, 0.55);
    }
    .quinter9-action-panel .quinter9-card-preview .quinter9-card-code {
        font-size: 12px;
        align-self: end;
        transform: translateY(-13px);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.94), 0 0 8px rgba(0, 0, 0, 0.58);
    }
    .quinter9-grid {
        width: min(100%, 540px);
        aspect-ratio: 1 / 1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        padding: 28px 16px 36px;
    }
    .quinter9-cell {
        position: relative;
        border-radius: 18px;
        transform: translateX(3px) translateY(-18px);
        border: 2px solid rgba(255,255,255,0.84);
        background: rgba(8, 11, 15, 0.18);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
        overflow: hidden;
    }
    .quinter9-cell.is-player-owned {
        border-color: #42d66a;
        box-shadow: inset 0 0 0 1px rgba(83, 221, 116, 0.24), 0 0 18px rgba(48, 211, 103, 0.28);
    }
    .quinter9-cell.is-com-owned {
        border-color: #ef5454;
        box-shadow: inset 0 0 0 1px rgba(255, 110, 110, 0.22), 0 0 18px rgba(227, 73, 73, 0.24);
    }
    .quinter9-cell-label {
        position: absolute;
        top: 10px;
        left: 75px;
        color: rgba(255,255,255,0.96);
        font-size: 20px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-shadow: 0 2px 5px rgba(0,0,0,0.26);
    }
    .quinter9-cell-score {
        position: absolute;
        bottom: 10px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        color: rgba(255,255,255,0.82);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-align: center;
        white-space: nowrap;
    }
    .quinter9-dot-grid {
        position: absolute;
        inset: 0;
    }
    .quinter9-dot {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.2);
        background: rgba(255,255,255,0.08);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    }
    .quinter9-dot.pos-1 { top: 28px; left: 28px; }
    .quinter9-dot.pos-2 { top: 28px; right: 28px; }
    .quinter9-dot.pos-3 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .quinter9-dot.pos-4 { bottom: 28px; left: 28px; }
    .quinter9-dot.pos-5 { bottom: 28px; right: 28px; }
    .quinter9-dot.is-player {
        background: radial-gradient(circle at 35% 35%, #abffbc 0%, #43d469 44%, #137b2f 100%);
        border-color: rgba(99, 245, 126, 0.54);
        box-shadow: 0 0 8px rgba(67, 212, 105, 0.42);
    }
    .quinter9-dot.is-com {
        background: radial-gradient(circle at 35% 35%, #ffc6c6 0%, #ef6363 44%, #922424 100%);
        border-color: rgba(255, 117, 117, 0.54);
        box-shadow: 0 0 8px rgba(239, 99, 99, 0.38);
    }
    .quinter9-dot.is-empty {
        opacity: 0.45;
    }
    @media (min-width: 821px) {
        .quinter9-hand-row {
            grid-template-columns: repeat(9, minmax(0, 1fr));
            grid-auto-flow: row;
            grid-auto-columns: auto;
            overflow-x: visible;
        }
    }
    @media (max-width: 820px) {
        .quinter9-defence-card {
            min-width: min(84%, 300px);
            padding: 12px 16px;
            font-size: 20px;
            letter-spacing: 0.06em;
        }
        .quinter9-defence-star {
            width: 6px;
            height: 6px;
        }
        .quinter9-topbar {
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 6px;
        }
        .quinter9-status-pills {
            gap: 6px;
            flex: 1 1 auto;
        }
        .quinter9-status-pill {
            padding: 5px 10px;
            font-size: 9px;
        }
        .quinter9-topbar-actions {
            flex: 0 0 auto;
            justify-content: flex-end;
            align-self: flex-start;
            gap: 6px;
        }
        .quinter9-music-btn {
            min-width: 56px;
            height: 30px !important;
            padding: 0 7px !important;
        }
        .quinter9-music-btn .btn-text,
        .quinter9-music-btn .music-icon {
            font-size: 8px;
        }
        .quinter9-topbar-actions .home-exit-btn {
            height: 30px !important;
            min-width: 58px;
            padding: 0 10px !important;
        }
        .quinter9-topbar-actions .home-exit-btn .btn-text {
            font-size: 8px;
        }
        .quinter9-board-shell {
            gap: 8px;
        }
        .quinter9-volume-panel {
            width: 120px;
            padding: 7px 9px;
        }
        .quinter9-intro-card {
            width: min(100%, 320px);
            padding: 22px 18px 20px;
            gap: 8px;
            transform: translateY(-150px);
        }
        .quinter9-intro-card strong {
            font-size: 20px;
        }
        .quinter9-intro-copy {
            font-size: 12px;
        }
        .quinter9-intro-countdown {
            font-size: 24px;
        }
        .quinter9-middle-shell {
            grid-template-columns: 1fr;
            grid-template-areas:
                "board"
                "action";
            gap: 8px;
        }
        .quinter9-set-panel {
            bottom: 30px;
            width: calc(100% - 14px);
            grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
            gap: 4px;
        }
        .quinter9-set-marks {
            gap: 1px;
            min-height: 22px;
        }
        .quinter9-set-mark {
            width: 20px;
            height: 20px;
        }
        .quinter9-set-action-btn {
            width: 76px;
            min-height: 24px;
            font-size: 7.5px;
            letter-spacing: 0.02em;
            padding: 0 4px;
        }
        .quinter9-set-action-btn.is-final {
            font-size: 10px;
        }
        .quinter9-board-panel {
            min-height: 0;
            width: min(100%, 280px);
            padding: 8px 4px 38px;
        }
        .quinter9-grid {
            width: min(100%, 220px);
            gap: 7px;
            padding: 14px 7px 18px;
        }
        .quinter9-cell {
            transform: translateX(1px) translateY(-4px);
        }
        .quinter9-cell-label {
            top: 3px;
            left: 29px;
            font-size: 11px;
        }
        .quinter9-cell-score {
            bottom: 5px;
            left: 50%;
            right: auto;
            transform: translateX(-50%);
            font-size: 5.6px;
            letter-spacing: 0.03em;
        }
        .quinter9-dot {
            width: 8px;
            height: 8px;
        }
        .quinter9-dot.pos-1 { top: 16px; left: 16px; }
        .quinter9-dot.pos-2 { top: 16px; right: 16px; }
        .quinter9-dot.pos-4 { bottom: 16px; left: 16px; }
        .quinter9-dot.pos-5 { bottom: 16px; right: 16px; }
        .quinter9-action-panel {
            gap: 8px;
            padding: 12px 12px 14px;
        }
        .quinter9-action-panel .quinter9-card.quinter9-card-preview,
        .quinter9-action-panel .quinter9-card.quinter9-card-preview.is-empty {
            width: min(100%, 96px);
        }
        .quinter9-action-panel .quinter9-card-preview .quinter9-card-name {
            transform: translateY(14px);
            font-size: 7px;
            padding: 0 4px;
        }
        .quinter9-action-panel .quinter9-card-preview .quinter9-card-code {
            transform: translateY(-16px);
            font-size: 12px;
        }
        .quinter9-hand-row {
            grid-auto-columns: 74px;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 6px;
        }
        .quinter9-hand-row .quinter9-card {
            min-height: 104px;
            padding: 4px 4px 6px;
            grid-template-rows: 13px minmax(72px, 1fr) 13px;
        }
        .quinter9-hand-row .quinter9-card-art {
            min-height: 72px;
        }
        .quinter9-hand-row .quinter9-card-name {
            font-size: 6px;
            transform: translateY(9px);
        }
        .quinter9-hand-row .quinter9-card-code {
            font-size: 8px;
            transform: translateY(-10px);
        }
        .classic-feedback.quinter9-feedback {
            font-size: 12px;
            line-height: 1.45;
            letter-spacing: 0.01em;
            padding: 8px 12px;
            margin-top: 0;
        }
        #quinter9-com-hand.quinter9-hand-row {
            grid-auto-columns: 44px;
            gap: 6px;
            padding-bottom: 2px;
        }
        #quinter9-com-hand.quinter9-hand-row .quinter9-card {
            min-height: 68px;
            padding: 3px 3px 4px;
            border-radius: 12px;
            grid-template-rows: 12px minmax(44px, 1fr) 0;
        }
        #quinter9-com-hand.quinter9-hand-row .quinter9-card-art {
            min-height: 44px;
        }
        #quinter9-com-hand.quinter9-hand-row .quinter9-card-art img {
            width: 72%;
            height: 72%;
        }
        #quinter9-com-hand.quinter9-hand-row .quinter9-card-code {
            display: none;
        }
        #quinter9-com-hand.quinter9-hand-row .quinter9-card-name {
            font-size: 5px;
            transform: translateY(0);
            padding: 0 1px;
            line-height: 1;
        }
        #quinter9-com-hand.quinter9-hand-row .quinter9-card.is-used {
            grid-template-rows: 1fr;
            justify-items: center;
            align-items: center;
            align-content: center;
        }
        #quinter9-com-hand.quinter9-hand-row .quinter9-card-used-label {
            font-size: 10px;
            padding: 0 2px;
            line-height: 1;
        }
    }
    .joker-game-shell {
        max-width: 1080px;
        color: #e7ebf2;
        background:
            linear-gradient(180deg, rgba(9, 10, 13, 0.72), rgba(9, 10, 13, 0.86)),
            url('boardgame/joker/joker background.webp') center/cover no-repeat;
        border: 1px solid rgba(211, 218, 229, 0.16);
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42);
    }
    .joker-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 38px;
        margin-bottom: 12px;
    }
    .joker-topbar-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        flex: 0 0 auto;
    }
    .joker-music-control {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }
    .joker-music-btn {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px;
        min-width: 96px;
        height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px;
        border: 1px solid rgba(216, 224, 236, 0.14);
        background: rgba(19, 21, 27, 0.88);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    }
    .joker-music-btn .btn-text {
        color: #edf2fa;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.04em;
    }
    .joker-music-btn .music-icon {
        color: #f0c78a;
        font-size: 9px;
        line-height: 1;
    }
    .joker-music-btn.is-on {
        background: linear-gradient(180deg, rgba(61, 50, 24, 0.96), rgba(33, 28, 16, 0.96));
        border-color: rgba(240, 199, 138, 0.34);
        box-shadow: 0 8px 18px rgba(131, 95, 33, 0.24);
    }
    .joker-music-btn.is-on .btn-text,
    .joker-music-btn.is-on .music-icon {
        color: #ffdca2;
    }
    .joker-volume-panel {
        position: absolute;
        right: 0;
        bottom: calc(100% + 8px);
        width: 168px;
        padding: 8px 10px;
        border-radius: 14px;
        border: 1px solid rgba(216, 224, 236, 0.14);
        background: rgba(12, 13, 18, 0.94);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 30;
    }
    .joker-music-control.is-open .joker-volume-panel,
    .joker-music-control:focus-within .joker-volume-panel {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .joker-volume-label {
        display: block;
        margin-bottom: 5px;
        color: #e6ebf3;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-align: center;
    }
    .joker-volume-slider {
        width: 100%;
        accent-color: #d6a457;
        cursor: pointer;
    }
    .baseball-music-control {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }
    .baseball-music-btn {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px;
        min-width: 96px;
        height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px;
        border: 1px solid rgba(216, 224, 236, 0.14);
        background: rgba(19, 21, 27, 0.88);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    }
    .baseball-music-btn .btn-text {
        color: #edf2fa;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.04em;
    }
    .baseball-music-btn .music-icon {
        color: #f0c78a;
        font-size: 9px;
        line-height: 1;
    }
    .baseball-music-btn.is-on {
        background: linear-gradient(180deg, rgba(61, 50, 24, 0.96), rgba(33, 28, 16, 0.96));
        border-color: rgba(240, 199, 138, 0.34);
        box-shadow: 0 8px 18px rgba(131, 95, 33, 0.24);
    }
    .baseball-music-btn.is-on .btn-text,
    .baseball-music-btn.is-on .music-icon {
        color: #ffdca2;
    }
    .baseball-volume-panel {
        position: absolute;
        right: 0;
        bottom: calc(100% + 8px);
        width: 168px;
        padding: 8px 10px;
        border-radius: 14px;
        border: 1px solid rgba(216, 224, 236, 0.14);
        background: rgba(12, 13, 18, 0.94);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 30;
    }
    .baseball-music-control.is-open .baseball-volume-panel,
    .baseball-music-control:focus-within .baseball-volume-panel {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .baseball-volume-label {
        display: block;
        margin-bottom: 5px;
        color: #e6ebf3;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-align: center;
    }
    .baseball-volume-slider {
        width: 100%;
        accent-color: #d6a457;
        cursor: pointer;
    }
    .joker-board-shell {
        position: relative;
        margin-top: 18px;
        padding: 14px;
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(12, 13, 16, 0.42), rgba(12, 13, 16, 0.58));
        border: 1px solid rgba(223, 229, 239, 0.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }
    .joker-board-feedback {
        position: absolute;
        top: 62px;
        right: 12px;
        z-index: 9;
        min-height: 0;
        margin-top: 0;
        max-width: 360px;
        padding: 6px 10px;
        border-radius: 16px;
        background: rgba(12, 13, 16, 0.72);
        border: 1px solid rgba(223, 229, 239, 0.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
        font-size: 9px;
        text-align: right;
        pointer-events: none;
    }
    .joker-board-feedback:empty {
        display: none;
    }
    .joker-howto-card {
        position: relative;
        max-width: 560px;
        margin: 0 auto 24px;
        padding: 16px 18px;
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(34,30,33,0.96), rgba(24,21,24,0.98));
        border: 1px solid rgba(145,112,86,0.72);
        box-shadow: inset 0 1px 0 rgba(191,153,116,0.18), 0 14px 28px rgba(22,18,20,0.2);
        color: #d8c1aa;
        line-height: 1.7;
        text-align: center;
    }
    .joker-howto-card.relic-howto-card {
        background: linear-gradient(180deg, rgba(22, 30, 16, 0.94), rgba(12, 18, 10, 0.98));
        border-color: rgba(180, 188, 122, 0.58);
        box-shadow: inset 0 1px 0 rgba(218, 228, 151, 0.13), 0 14px 28px rgba(8, 12, 7, 0.24), 0 0 18px rgba(180, 188, 122, 0.12);
        color: #efe9c7;
    }
    .joker-howto-card.relic-howto-card > strong {
        color: #e8df9d;
    }
    .joker-howto-card.baseball-howto-card {
        max-width: 660px;
        background: linear-gradient(180deg, rgba(25, 31, 39, 0.96), rgba(12, 16, 22, 0.98));
        border-color: rgba(188, 198, 210, 0.42);
        box-shadow: inset 0 1px 0 rgba(224, 237, 250, 0.1), 0 16px 34px rgba(0, 0, 0, 0.24), 0 0 18px rgba(188, 198, 210, 0.12);
        color: #dfe7f0;
    }
    .joker-howto-card.baseball-howto-card > strong {
        color: #dfe7f0;
    }
    .joker-howto-image-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        min-width: 68px;
        height: 34px;
        padding: 0 12px;
        color: #fff2e2;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.04em;
        background: rgba(205, 163, 127, 0.16);
        border: 1px solid rgba(205, 163, 127, 0.48);
        border-radius: 999px;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
        cursor: pointer;
    }
    .joker-howto-image-btn:hover {
        background: rgba(205, 163, 127, 0.24);
    }
    .joker-entry-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        min-width: 74px;
        height: 34px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff2e2;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.03em;
        background: rgba(205, 163, 127, 0.16);
        border: 1px solid rgba(205, 163, 127, 0.48);
        border-radius: 999px;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
        pointer-events: none;
        white-space: nowrap;
    }
    .joker-guide-tabs {
        max-width: 560px;
        margin: 0 auto 14px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .joker-guide-tab-btn {
        height: 42px;
        border: 1px solid rgba(205, 163, 127, 0.42);
        border-radius: 14px;
        color: #d8c1aa;
        background: linear-gradient(180deg, rgba(34,30,33,0.82), rgba(24,21,24,0.92));
        box-shadow: inset 0 1px 0 rgba(191,153,116,0.16), 0 10px 20px rgba(22,18,20,0.16);
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.05em;
        cursor: pointer;
    }
    .joker-guide-tab-btn.is-active {
        color: #171014;
        background: linear-gradient(180deg, #e6c5a5, #bc8b67);
        border-color: rgba(255, 226, 189, 0.78);
        box-shadow: 0 0 18px rgba(205, 163, 127, 0.28);
    }
    .joker-chaos-toggle-wrap {
        width: 100%;
        margin: 10px auto 0;
        display: flex;
        justify-content: center;
        position: relative;
    }
    .joker-chaos-toggle {
        width: 168px;
        min-height: 30px;
        padding: 3px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3px;
        background: linear-gradient(180deg, rgba(34,30,33,0.88), rgba(24,21,24,0.96));
        border: 1px solid rgba(205, 163, 127, 0.44);
        border-radius: 999px;
        box-shadow: inset 0 1px 0 rgba(191,153,116,0.16), 0 10px 20px rgba(22,18,20,0.16);
        position: relative;
        z-index: 2;
    }
    .joker-chaos-toggle-input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    .joker-chaos-option {
        min-height: 24px;
        padding: 0 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #d8c1aa;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 0.04em;
        background: transparent;
        border: 0;
        border-radius: 999px;
        cursor: pointer;
        user-select: none;
    }
    .joker-chaos-option.is-active {
        color: #171014;
        background: linear-gradient(180deg, #f6d7aa, #c9915c);
        box-shadow: 0 0 14px rgba(245, 184, 111, 0.38);
    }
    .joker-chaos-toggle-wrap.is-chaos .joker-chaos-toggle {
        border-color: rgba(255, 211, 154, 0.94);
        box-shadow:
            inset 0 1px 0 rgba(255,235,204,0.24),
            0 0 0 1px rgba(255, 206, 139, 0.28),
            0 0 16px rgba(245, 184, 111, 0.38),
            0 10px 22px rgba(86, 54, 30, 0.2);
    }
    .joker-chaos-toggle-wrap.is-bursting::before,
    .joker-chaos-toggle-wrap.is-bursting::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        pointer-events: none;
        background: #f6d7aa;
        filter: drop-shadow(0 0 6px rgba(245, 184, 111, 0.9));
        transform: translate(-50%, -50%) scale(0);
        animation: joker-chaos-side-burst 0.76s ease-out both;
        z-index: 1;
    }
    .joker-chaos-toggle-wrap.is-bursting::after {
        width: 4px;
        height: 4px;
        background: #c9915c;
        animation-delay: 0.06s;
    }
    @keyframes joker-chaos-side-burst {
        0% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.2);
            box-shadow:
                0 0 0 rgba(246, 215, 170, 0),
                0 0 0 rgba(201, 145, 92, 0),
                0 0 0 rgba(255, 232, 200, 0);
        }
        22% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(1);
            box-shadow:
                -108px -8px 0 -1px rgba(246, 215, 170, 0.92),
                -96px 16px 0 -1px rgba(201, 145, 92, 0.88),
                -80px -24px 0 0 rgba(255, 232, 200, 0.9),
                80px 22px 0 -1px rgba(246, 215, 170, 0.9),
                96px -18px 0 -1px rgba(201, 145, 92, 0.9),
                108px 7px 0 -1px rgba(255, 232, 200, 0.86),
                -122px 8px 0 -1px rgba(246, 215, 170, 0.72),
                122px -7px 0 -1px rgba(201, 145, 92, 0.72);
        }
    }
    #boardgame-joker-section .awards-category-grid > .category-card {
        min-height: 194px;
        padding-bottom: 14px;
    }
    .kaprekar-chaos-toggle-wrap {
        width: 100%;
        margin: 10px auto 0;
        display: flex;
        justify-content: center;
        position: relative;
    }
    .kaprekar-chaos-toggle {
        width: 168px;
        min-height: 30px;
        padding: 3px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3px;
        background: linear-gradient(180deg, rgba(48, 31, 44, 0.94), rgba(26, 18, 32, 0.98));
        border: 1px solid rgba(217, 166, 130, 0.52);
        border-radius: 999px;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.12),
            0 8px 16px rgba(50, 31, 45, 0.24);
        position: relative;
        z-index: 2;
    }
    .kaprekar-chaos-toggle-input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    .kaprekar-chaos-option {
        min-height: 24px;
        padding: 0 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #efd0bb;
        font-family: inherit;
        font-size: 8px;
        font-weight: 900;
        line-height: 1;
        cursor: pointer;
    }
    .kaprekar-chaos-option.is-active {
        color: #2a171b;
        background: linear-gradient(180deg, #f0c8b3, #b98168);
        box-shadow: 0 0 14px rgba(217, 166, 130, 0.44);
    }
    .kaprekar-chaos-toggle-wrap.is-chaos .kaprekar-chaos-toggle {
        border-color: rgba(240, 200, 179, 0.94);
        box-shadow:
            inset 0 1px 0 rgba(255,238,226,0.24),
            0 0 0 1px rgba(217, 166, 130, 0.28),
            0 0 16px rgba(217, 166, 130, 0.42),
            0 10px 22px rgba(50, 31, 45, 0.24);
    }
    .kaprekar-chaos-toggle-wrap.is-bursting::before,
    .kaprekar-chaos-toggle-wrap.is-bursting::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        pointer-events: none;
        background: #f0c8b3;
        animation: kaprekar-chaos-side-burst 0.78s ease-out forwards;
        z-index: 1;
    }
    .kaprekar-chaos-toggle-wrap.is-bursting::after {
        width: 4px;
        height: 4px;
        background: #b98168;
        animation-delay: 0.06s;
    }
    @keyframes kaprekar-chaos-side-burst {
        0% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.2);
            box-shadow:
                0 0 0 rgba(240, 200, 179, 0),
                0 0 0 rgba(185, 129, 104, 0),
                0 0 0 rgba(255, 233, 220, 0);
        }
        22% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(1);
            box-shadow:
                -108px -8px 0 -1px rgba(240, 200, 179, 0.92),
                -96px 16px 0 -1px rgba(185, 129, 104, 0.88),
                -80px -24px 0 0 rgba(255, 233, 220, 0.9),
                80px 22px 0 -1px rgba(240, 200, 179, 0.9),
                96px -18px 0 -1px rgba(185, 129, 104, 0.9),
                108px 7px 0 -1px rgba(255, 233, 220, 0.86),
                -122px 8px 0 -1px rgba(240, 200, 179, 0.72),
                122px -7px 0 -1px rgba(185, 129, 104, 0.72);
        }
    }
    #boardgame-kaprekar-section .awards-category-grid > .category-card {
        min-height: 194px;
        padding-bottom: 14px;
    }
    .joker-guide-panel {
        display: none;
    }
    .joker-guide-panel.is-active {
        display: block;
    }
    .joker-howto-lead {
        margin: 0 auto 12px;
        max-width: 520px;
        color: #ead0b5;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.65;
        text-align: center;
    }
    .joker-howto-section {
        margin: 10px auto 0;
        max-width: 520px;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid rgba(205, 163, 127, 0.22);
        background: rgba(22, 16, 15, 0.42);
        text-align: left;
    }
    .joker-howto-section h3 {
        margin: 0 0 8px;
        color: #cda37f;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-align: center;
    }
    .joker-howto-section ul {
        margin: 0;
        padding-left: 18px;
    }
    .joker-howto-section li {
        margin: 3px 0;
        color: #e9dfd3;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.55;
    }
    .joker-howto-chip-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .joker-howto-chip {
        padding: 9px 8px;
        border-radius: 12px;
        background: rgba(205, 163, 127, 0.12);
        border: 1px solid rgba(205, 163, 127, 0.2);
        color: #ead0b5;
        font-size: 11px;
        font-weight: 900;
        line-height: 1.45;
        text-align: center;
    }
    @media (max-width: 640px) {
        .joker-entry-badge {
            top: 10px;
            right: 10px;
            min-width: 54px;
            height: 24px;
            padding: 0 8px;
            font-size: 7px;
            letter-spacing: 0.01em;
        }
        .joker-guide-tabs {
            max-width: 100%;
            margin-bottom: 12px;
            gap: 8px;
        }
        .joker-guide-tab-btn {
            height: 38px;
            border-radius: 12px;
            font-size: 11px;
        }
    }
    .overheat-entry-badge,
    .blizzard-entry-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        min-width: 74px;
        height: 34px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.03em;
        border-radius: 999px;
        pointer-events: none;
        white-space: nowrap;
    }
    .overheat-entry-badge {
        color: #ffd8c8;
        background: rgba(92, 31, 18, 0.78);
        border: 1px solid rgba(255, 112, 72, 0.58);
        box-shadow: 0 8px 18px rgba(32, 9, 4, 0.28), inset 0 1px 0 rgba(255, 188, 142, 0.16);
    }
    .blizzard-entry-badge {
        color: #e4f9ff;
        background: rgba(17, 55, 82, 0.78);
        border: 1px solid rgba(139, 218, 255, 0.62);
        box-shadow: 0 8px 18px rgba(0, 22, 42, 0.28), inset 0 1px 0 rgba(225, 250, 255, 0.2);
    }
    @media (max-width: 640px) {
        .overheat-entry-badge,
        .blizzard-entry-badge {
            top: 10px;
            right: 10px;
            min-width: 54px;
            height: 24px;
            padding: 0 8px;
            font-size: 7px;
            letter-spacing: 0.01em;
        }
    }
    .quinter9-entry-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        min-width: 74px;
        height: 34px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #eef7f0;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.03em;
        background: linear-gradient(90deg, rgba(48, 139, 91, 0.82), rgba(172, 63, 67, 0.82));
        border: 1px solid rgba(234, 229, 206, 0.5);
        border-radius: 999px;
        box-shadow: 0 8px 18px rgba(12, 22, 18, 0.24);
        pointer-events: none;
        white-space: nowrap;
    }
    @media (max-width: 640px) {
        .quinter9-entry-badge {
            top: 10px;
            right: 10px;
            min-width: 54px;
            height: 24px;
            padding: 0 8px;
            font-size: 7px;
            letter-spacing: 0.01em;
        }
    }
    .joker-token-strip {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .joker-token-strip.top {
        margin-bottom: 10px;
    }
    .joker-token-strip.bottom {
        margin-top: 14px;
    }
    .joker-token-strip .classic-hint-btn {
        min-width: 112px;
        background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
        box-shadow: inset 0 0 0 1px rgba(229, 234, 242, 0.12);
    }
    .joker-main-board {
        position: relative;
        min-height: 560px;
        border-radius: 16px;
        border: 1px solid rgba(230, 235, 242, 0.08);
        background:
            linear-gradient(180deg, rgba(9, 10, 13, 0.18), rgba(9, 10, 13, 0.28)),
            url('boardgame/joker/joker background.webp') center center / 78% auto no-repeat,
            rgba(9, 10, 13, 0.34);
        overflow: hidden;
    }
    .joker-entry-control {
        position: absolute;
        z-index: 8;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
    .joker-entry-control.com {
        top: 18px;
        right: 12px;
    }
    .joker-entry-control.player {
        left: 12px;
        bottom: 18px;
    }
    .joker-entry-control-label {
        color: #e9c29d;
        font-size: 9px;
        font-weight: 900;
        line-height: 1;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.42);
    }
    .joker-entry-action {
        min-width: 72px;
        min-height: 32px;
        padding: 0 13px;
        color: #f6ead8;
        font-size: 9px;
        font-weight: 900;
        border: 1px solid rgba(205, 163, 127, 0.48);
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(76, 54, 43, 0.9), rgba(24, 22, 25, 0.94));
        box-shadow: 0 7px 16px rgba(0, 0, 0, 0.28);
        cursor: pointer;
    }
    .joker-entry-action:hover {
        background: linear-gradient(180deg, rgba(103, 71, 52, 0.96), rgba(36, 29, 29, 0.98));
    }
    .joker-entry-overlay {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: clamp(150px, 24vh, 240px) 16px 20px;
        background: rgba(5, 6, 10, 0.76);
        backdrop-filter: blur(5px);
    }
    .joker-entry-overlay.is-open {
        display: flex;
    }
    .joker-entry-panel {
        width: min(940px, 96vw);
        max-height: none;
        overflow-y: visible;
        padding: 18px;
        color: #eef2f8;
        border: 1px solid rgba(205, 163, 127, 0.34);
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(24, 25, 31, 0.99), rgba(10, 12, 17, 0.99));
        box-shadow: 0 24px 58px rgba(0, 0, 0, 0.5);
    }
    .joker-entry-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }
    .joker-entry-head strong {
        display: block;
        color: #e9c29d;
        font-size: 20px;
        font-weight: 900;
    }
    .joker-entry-head span {
        display: block;
        margin-top: 3px;
        color: #9ea6b4;
        font-size: 9px;
        font-weight: 700;
    }
    .joker-entry-close {
        width: 34px;
        height: 34px;
        padding: 0;
        color: #f5e9dc;
        font-size: 18px;
        font-weight: 900;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        cursor: pointer;
    }
    .joker-entry-section + .joker-entry-section {
        margin-top: 16px;
    }
    .joker-entry-section-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        color: #f3dcc5;
        font-size: 12px;
        font-weight: 900;
    }
    .joker-entry-section-title span {
        color: #929aa8;
        font-size: 8px;
    }
    .joker-entry-grid {
        display: grid;
        gap: 8px;
        align-items: start;
        margin-top: 4px;
    }
    .joker-entry-grid.is-normal {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .joker-entry-grid.is-joker {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .joker-entry-grid .joker-card {
        width: 100%;
        max-width: 132px;
        justify-self: center;
        cursor: default;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
    }
    .joker-entry-grid .joker-card-name {
        display: -webkit-box;
        overflow: hidden;
        top: 17%;
        left: 10%;
        height: 15%;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: keep-all;
        overflow-wrap: normal;
        line-height: 1.1;
    }
    .joker-entry-grid .joker-card-code {
        font-size: 16px;
        font-weight: 900;
        line-height: 1;
    }
    @media (max-width: 900px) {
        .joker-entry-panel {
            width: min(940px, calc(100vw - 20px));
        }
        .joker-entry-grid {
            gap: 7px;
        }
        .joker-entry-grid .joker-card {
            max-width: 120px;
        }
    }
    @media (max-width: 760px) {
        .joker-entry-panel {
            padding: 14px;
        }
        .joker-entry-grid {
            gap: 6px;
        }
        .joker-entry-grid .joker-card {
            max-width: 108px;
        }
        .joker-entry-grid .joker-card-name {
            font-size: 8px;
        }
        .joker-entry-grid .joker-card-code {
            font-size: 13px;
        }
    }
    @media (max-width: 600px) {
        .joker-entry-overlay {
            padding-top: clamp(72px, 13vh, 104px);
        }
        .joker-entry-panel {
            width: min(940px, calc((100vw - 20px) / 0.5));
            padding: 10px;
            transform: scale(0.5);
            transform-origin: top center;
        }
        .joker-entry-grid {
            gap: 5px;
        }
        .joker-entry-grid .joker-card {
            max-width: 66px;
            border-radius: 8px;
        }
        .joker-entry-grid .joker-card-name {
            font-size: 6px;
        }
        .joker-entry-grid .joker-card-code {
            font-size: 10px;
            letter-spacing: 0;
        }
        .joker-entry-action {
            min-width: 60px;
            min-height: 28px;
            padding: 0 9px;
            font-size: 8px;
        }
        .joker-entry-control.com {
            top: 8px;
            right: 8px;
        }
        .joker-entry-control.player {
            left: 8px;
            bottom: 8px;
        }
        .joker-entry-control-label {
            font-size: 8px;
        }
    }
    .joker-board-ring {
        display: none;
    }
    .joker-board-side {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 38px;
        width: 180px;
        z-index: 1;
    }
    .joker-board-side.com {
        top: 56px;
        left: 50%;
        transform: translateX(-50%);
    }
    .joker-board-side.player {
        bottom: 56px;
        left: 50%;
        transform: translateX(-50%);
    }
    .joker-corner-turn,
    .joker-corner-life {
        position: absolute;
        z-index: 3;
    }
    .joker-corner-turn-com {
        top: 14px;
        left: 100px;
    }
    .joker-corner-turn-player {
        bottom: 20px;
        right: 100px;
    }
    .joker-corner-life-com {
        top: 60px;
        left: 92px;
    }
    .joker-corner-life-player {
        bottom: 60px;
        right: 92px;
    }
    .joker-turn-box {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 0;
        padding: 9px 14px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(228, 233, 242, 0.12);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(2px);
    }
    .joker-turn-box span {
        color: #eef3fb;
        font-weight: 800;
        white-space: nowrap;
        font-size: 13px;
        line-height: 1;
    }
    .joker-call-img-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        min-width: 42px !important;
        height: 42px;
        min-height: 42px;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 16px;
        box-shadow: none !important;
    }
    .joker-call-img-btn img {
        display: block;
        width: 60px;
        height: 60px;
        object-fit: contain;
    }
    .joker-call-img-btn:disabled {
        opacity: 0.48;
    }
    .joker-turn-notice {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(8, 10, 15, 0.56);
        border-radius: 16px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 7;
    }
    .joker-turn-notice.is-visible {
        opacity: 1;
    }
    .joker-turn-notice-card {
        min-width: 220px;
        max-width: min(92%, 360px);
        padding: 18px 22px;
        text-align: center;
        color: #f3f6fb;
        font-size: 22px;
        font-weight: 800;
        line-height: 1.45;
        background: linear-gradient(180deg, rgba(26, 30, 39, 0.96), rgba(15, 18, 25, 0.96));
        border: 1px solid rgba(233, 238, 246, 0.14);
        border-radius: 16px;
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(6px);
    }
    .joker-turn-notice.is-sweep {
        background: rgba(8, 10, 15, 0.72);
    }
    .joker-turn-notice.is-sweep .joker-turn-notice-card {
        color: #fff3b0;
        font-size: clamp(28px, 6vw, 46px);
        letter-spacing: 0;
        background: linear-gradient(180deg, rgba(48, 40, 22, 0.97), rgba(18, 20, 27, 0.98));
        border-color: rgba(255, 223, 117, 0.58);
        box-shadow: 0 0 24px rgba(255, 216, 92, 0.34), 0 18px 36px rgba(0, 0, 0, 0.34);
        animation: joker-sweep-pop 0.72s cubic-bezier(0.2, 0.9, 0.24, 1.2) both;
        text-shadow: 0 0 10px rgba(255, 238, 164, 0.88), 0 0 22px rgba(255, 192, 64, 0.58);
    }
    .joker-sweep-star-particle {
        position: fixed;
        z-index: 10001;
        pointer-events: none;
        user-select: none;
        color: #ffe47d;
        font-size: 15px;
        text-shadow: 0 0 10px rgba(255, 239, 166, 0.95), 0 0 20px rgba(255, 185, 52, 0.72);
        animation: joker-sweep-star-pop 0.72s ease-out forwards;
    }
    @keyframes joker-sweep-pop {
        0% { opacity: 0; transform: scale(0.58) rotate(-5deg); }
        58% { opacity: 1; transform: scale(1.12) rotate(2deg); }
        100% { opacity: 1; transform: scale(1) rotate(0); }
    }
    @keyframes joker-sweep-star-pop {
        0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25) rotate(0deg); }
        22% { opacity: 1; }
        100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.25) rotate(150deg); }
    }
    .joker-corner-life .joker-life-bar {
        min-width: 0;
        width: 180px;
        max-width: 180px;
        padding: 6px 12px;
        justify-content: center;
        background: linear-gradient(180deg, rgba(37, 32, 31, 0.88), rgba(24, 21, 20, 0.92));
        border-color: rgba(133, 106, 90, 0.34);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 4px 10px rgba(0, 0, 0, 0.14);
    }
    .joker-corner-life .quiz-life-label {
        display: none;
    }
    .joker-corner-life .quiz-lives {
        gap: 2px;
        width: 100%;
        justify-content: space-between;
    }
    .joker-corner-life .quiz-life {
        width: 12px;
        height: 12px;
        font-size: 9px;
    }
    .joker-side-status .quiz-life {
        color: #ff5a8e;
    }
    .joker-staging-grid {
        display: grid;
        grid-template-columns: minmax(0, 0.84fr) minmax(0, 0.96fr);
        gap: 38px;
        margin-top: 18px;
        align-items: stretch;
    }
    .joker-setup-panel {
        grid-column: auto;
        order: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-height: 200px;
        max-width: none;
        width: 100%;
        margin: 0;
    }
    .joker-staging-panel:first-of-type {
        order: 1;
    }
    .joker-staging-panel:last-of-type {
        order: 2;
    }
    .joker-player-panel,
    .joker-center-panel {
        padding: 14px;
        background: linear-gradient(180deg, rgba(22, 24, 30, 0.88), rgba(13, 15, 20, 0.92));
        border: 1px solid rgba(224, 230, 241, 0.1);
        border-radius: 14px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }
    .joker-player-panel {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-height: 200px;
    }
    .joker-player-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 5px;
        color: #eef2f8;
        font-size: 9px;
        font-weight: 700;
    }
    .joker-life-bar {
        justify-content: center;
        margin-bottom: 0;
        min-width: 184px;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(231, 236, 244, 0.16);
        color: #e5e9f1;
    }
    .joker-life-bar .quiz-lives {
        gap: 3px;
        flex-wrap: nowrap;
        justify-content: center;
    }
    .joker-life-bar .quiz-life {
        width: 14px;
        height: 14px;
        font-size: 9px;
    }
    .joker-code-slots {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
        position: absolute;
        z-index: 2;
    }
    .joker-board-side.com .joker-code-slots {
        right: 100%;
        margin-right: 22px;
        top: 50%;
        transform: translateY(-50%);
    }
    .joker-board-side.player .joker-code-slots {
        left: 100%;
        margin-left: 22px;
        top: 50%;
        transform: translateY(-50%);
    }
    .joker-count-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        min-height: 126px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(226, 232, 243, 0.12);
        color: #eef3fb;
        text-align: center;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    }
    .joker-count-label {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.04em;
    }
    .joker-count-value {
        margin-top: 6px;
        font-size: 56px;
        line-height: 1;
        font-weight: 900;
    }
    .joker-selected-card {
        display: flex;
        justify-content: center;
        margin-bottom: 0;
        min-height: 244px;
        align-self: center;
    }
    .joker-selected-card > .joker-card {
        width: 90px;
    }
    .joker-selected-card > .joker-card .joker-card-name {
        left: 10%;
        width: 76%;
        top: 30%;
        height: 16%;
        font-size: 8px;
    }
    .joker-selected-card > .joker-card .joker-card-code {
        left: 16%;
        width: 68%;
        bottom: 30%;
        height: 8.5%;
        font-size: 16px;
        align-items: center;
    }
    .joker-draw-wrap {
        padding-top: 0;
        padding-left: 0;
        border-top: none;
        border-left: none;
    }
    .joker-draw-wrap.staging {
        min-height: 124px;
        padding: 10px 18px 6px;
        border-top: 1px dashed rgba(166, 136, 72, 0.22);
        overflow: hidden;
    }
    .joker-draw-title {
        margin-bottom: 5px;
        text-align: center;
        color: #d7dde8;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.04em;
    }
    .joker-draw-grid {
        display: grid;
        gap: 8px;
        justify-items: center;
    }
    .joker-draw-wrap.staging .joker-draw-grid {
        display: grid;
        justify-content: center;
        align-content: start;
        grid-template-columns: repeat(3, minmax(0, 92px));
        gap: 10px 8px;
        min-height: 110px;
        padding: 0 6px;
        overflow: hidden;
    }
    .joker-draw-wrap.staging .joker-card {
        width: 92px;
        flex: 0 0 auto;
    }
    .joker-draw-wrap.staging .joker-card .joker-card-name {
        font-size: 7px;
        line-height: 1.1;
        top: 18%;
        left: 8%;
        width: 76%;
    }
    .joker-draw-wrap.staging .joker-draw-grid.count-5 > :nth-child(4) {
        grid-column: 1 / 2;
        transform: translateX(16px);
    }
    .joker-draw-wrap.staging .joker-draw-grid.count-5 > :nth-child(5) {
        grid-column: 3 / 4;
        transform: translateX(-16px);
    }
    .joker-draw-wrap.staging .joker-draw-grid.count-4 {
        grid-template-columns: repeat(2, minmax(0, 92px));
    }
    .joker-draw-wrap.staging .joker-draw-grid.count-3 {
        grid-template-columns: repeat(2, minmax(0, 92px));
    }
    .joker-draw-wrap.staging .joker-draw-grid.count-3 > :first-child {
        grid-column: 1 / span 2;
    }
    .joker-draw-wrap.staging .joker-draw-grid.count-2 {
        grid-template-columns: repeat(2, minmax(0, 92px));
    }
    .joker-draw-wrap.staging .joker-draw-grid.count-1 {
        grid-template-columns: minmax(0, 92px);
    }
    .joker-draw-wrap.staging .joker-card:hover:not(:disabled),
    .joker-draw-wrap.staging .joker-card.is-selected {
        z-index: 2;
    }
    .joker-setup-panel .ranking-actions {
        justify-content: center;
    }
    .joker-setup-panel .ranking-actions .btn {
        flex: 0 1 280px;
        max-width: 280px;
        justify-content: center;
        text-align: center;
    }
    #joker-start-round-btn,
    #joker-next-round-btn {
        background: linear-gradient(180deg, #cda37f, #cda37f);
        box-shadow: 0 8px 36px rgba(141, 79, 22, 0.28);
        font-size: 20px;
        font-weight: 800;
        letter-spacing: 0.01em;
    }
    #joker-start-round-btn:hover,
    #joker-next-round-btn:hover {
        background: linear-gradient(180deg, #cda37f, #cda37f);
    }
    .joker-draw-grid.count-5 > :nth-child(5) {
        grid-column: 3 / 4;
        margin-left: -16px;
    }
    .joker-draw-grid.count-4,
    .joker-draw-grid.count-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .joker-draw-grid.count-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .joker-draw-grid.count-3 > :first-child {
        grid-column: 1 / span 2;
    }
    .joker-draw-grid.count-1 {
        grid-template-columns: 1fr;
    }
    .joker-card {
        position: relative;
        width: 90px;
        aspect-ratio: 10 / 16;
        border: none;
        border-radius: 16px;
        background-color: transparent;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
        transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
        overflow: hidden;
    }
    button.joker-card {
        cursor: pointer;
    }
    button.joker-card:hover:not(:disabled) {
        transform: translateY(-3px);
        box-shadow: 0 14px 24px rgba(0, 0, 0, 0.22);
    }
    .joker-card.is-selected {
        transform: translateY(-4px);
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.18), 0 16px 28px rgba(0, 0, 0, 0.2);
    }
    .joker-card.is-disabled {
        opacity: 0.42;
        cursor: default;
    }
    .joker-card-back {
        background-image: url('boardgame/joker/card/back.webp');
    }
    .joker-card-art {
        position: absolute;
        left: 15%;
        top: 32%;
        width: 70%;
        height: 31%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }
    .joker-card-art img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }
    .joker-card-name,
    .joker-card-code {
        position: absolute;
        left: 12%;
        width: 76%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #f8f4ec;
        font-weight: 800;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 8px rgba(0, 0, 0, 0.28);
        overflow: hidden;
    }
    .joker-card-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        top: 35%;
        height: 16%;
        font-size: 9px;
        line-height: 1.2;
        word-break: keep-all;
        overflow-wrap: anywhere;
        padding: 0 4px;
    }
    .joker-card-code {
        left: 16%;
        width: 68%;
        bottom: 19%;
        height: 8.5%;
        font-size: 12px;
        letter-spacing: 0.04em;
        align-items: center;
        padding-top: 0;
    }
    .joker-center-panel {
        display: flex;
        flex-direction: column;
        gap: 8px;
        justify-content: flex-start;
    }
    .joker-status-box {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        min-height: 124px;
        text-align: center;
        background:
            linear-gradient(180deg, rgba(17, 18, 23, 0.7), rgba(17, 18, 23, 0.84)),
            url('boardgame/joker/joker background.webp') center/cover no-repeat;
        border-color: rgba(228, 233, 242, 0.14);
    }
    .joker-status-box strong {
        font-size: 12px;
        margin-bottom: 5px;
        color: #f2f5fb;
    }
    .joker-status-box span {
        color: #d8deea;
        font-size: 12px;
        line-height: 1.55;
    }
    .joker-action-bar {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .joker-token-row {
        display: grid;
        flex: 1 1 auto;
        grid-template-columns: repeat(9, minmax(0, 1fr));
        gap: 8px;
    }
    .joker-token-btn {
        min-height: 42px;
        padding: 0;
        border: none;
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
        color: #f2f5fa;
        font-size: 16px;
        font-weight: 800;
        box-shadow: inset 0 0 0 1px rgba(230, 235, 243, 0.12);
    }
    .joker-token-btn.is-used {
        opacity: 0.88;
        color: #ffffff;
        background: linear-gradient(180deg, rgba(255, 179, 71, 0.34), rgba(255, 110, 64, 0.2));
        box-shadow: inset 0 0 0 1px rgba(255, 194, 121, 0.42);
    }
    .joker-token-btn.is-readonly {
        cursor: default;
    }
    .joker-token-btn:disabled {
        opacity: 0.58;
        filter: saturate(0.45);
    }
    .classic-answer-name {
        color: #007bff !important;
        font-size: 15px !important;
        font-weight: bold;
    }
    .classic-hints-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
    }
    .classic-hints-title {
        color: #333;
        font-size: 13px;
        font-weight: bold;
    }
    .classic-hint-btn {
        min-width: 88px;
        padding: 10px 14px;
        color: #fff;
        font-size: 9px;
        font-weight: bold;
        background: linear-gradient(135deg, #007bff, #3da1ff);
        border: none;
        border-radius: 999px;
        box-shadow: 0 6px 16px rgba(0, 123, 255, 0.2);
    }
    .classic-hint-btn.is-pass {
        background: linear-gradient(135deg, #ff8c42, #ffb36b);
        box-shadow: 0 6px 16px rgba(255, 140, 66, 0.22);
    }
    .classic-hint-btn:disabled {
        opacity: 0.65;
        cursor: wait;
    }
    .classic-hint-btn.is-keyboard-pressed {
        transform: translateY(2px) scale(0.99);
        filter: brightness(0.9);
    }
    .classic-scroll-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .classic-scroll-card {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        min-height: 74px;
        border-radius: 14px;
        border: 1px solid rgba(0, 0, 0, 0.05);
        background: rgba(244, 236, 218, 0.65);
    }
    .classic-scroll-card img {
        display: block;
        width: 100%;
        height: 74px;
        object-fit: contain;
    }
    .classic-scroll-card.is-closed {
        padding: 6px 0;
    }
    .classic-scroll-card.is-closed img {
        width: auto;
        max-width: 108px;
        height: 128px;
        margin: -28px auto;
    }
    .classic-scroll-label {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px 42px;
        color: #5e4224;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        line-height: 1.45;
    }
    .classic-scroll-card.is-closed .classic-scroll-label {
        color: rgba(94, 66, 36, 0.45);
    }
    .classic-answer-row {
        display: flex;
        gap: 38px;
        align-items: stretch;
        margin-top: 18px;
    }
    .classic-answer-row .btn-submit {
        flex: 0 0 132px;
    }
    .classic-feedback {
        min-height: 26px;
        margin-top: 14px;
        color: #7a4f00;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
    }
    #league-result-section {
        position: relative;
        z-index: 50;
        width: 100%;
        margin-top: 20px;
        overflow: hidden;
        background-color: #ffffff !important;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }
    .rank-table {
        width: 100%;
        margin-top: 15px;
        background: #fff;
        border-collapse: collapse;
        border-radius: 10px;
        overflow: hidden;
        table-layout: auto;
    }
    .rank-table th {
        padding: 10px 5px;
        color: #888;
        font-size: 9px;
        background-color: #f8f9fa;
        border-bottom: 1px solid #f9f9f9;
    }
    .rank-table td {
        padding: 10px 5px;
        font-size: 9px;
        text-align: center;
        vertical-align: middle;
        border-bottom: 1px solid #f9f9f9;
    }
    .rank-item-img {
        width: 35px;
        height: 35px;
        vertical-align: middle;
        object-fit: contain;
    }
    .status-badge {
        font-size: 9px;
        font-weight: bold;
    }
    .status-badge.win {
        color: #007bff;
    }
    .status-badge.lose {
        color: #ff4d4d;
    }
    .item-cell {
        display: flex;
        align-items: center;
        gap: 38px;
        text-align: left;
    }
    .item-cell img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }
    .name-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .item-name {
        color: #333;
        font-size: 12px;
        font-weight: bold;
        line-height: 1.2;
    }
    .info-badge {
        display: inline-block;
        width: fit-content;
        padding: 1px 5px;
        font-size: 12px;
        font-weight: 500;
        border-radius: 4px;
    }
    .badge-h2h {
        color: #007bff;
        background: #e7f3ff;
        border: 1px solid #cce5ff;
    }
    .badge-random {
        color: #ff9100;
        background: #fff4e6;
        border: 1px solid #ffe0b2;
    }
    .h2h-badge {
        display: inline-block;
        margin-top: 2px;
        padding: 1px 4px;
        color: #ff9100;
        font-size: 12px;
        font-weight: normal;
        background-color: #fff4e6;
        border: 1px solid #ffe0b2;
        border-radius: 4px;
    }
    .points-text {
        color: #222;
        font-weight: bold;
    }
    .diff-text {
        color: #666;
        font-size: 9px;
    }
    .rank-1st {
        background-color: #fff9db;
    }
    .rank-2nd {
        background-color: #f8f9fa;
    }
    .rank-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        line-height: 1.2;
    }
    .rank-badge {
        display: block;
        margin-top: 3px;
        padding: 1px 5px;
        color: white;
        font-size: 9px;
        font-weight: bold;
        background-color: #00a86b;
        border-radius: 10px;
    }
    .badge-qualified {
        color: #0f9d68;
        font-weight: 700;
        background: #e8fff4;
        border: 1px solid #b7ecd1;
    }
    .note-cell {
        color: #666;
        font-size: 9px;
        font-weight: 500;
    }
    .rank-info {
        display: block;
        width: 100%;
        margin-top: 3px;
        color: #888;
        font-size: 9px;
        line-height: 1.4;
        text-align: center;
    }
    @media (min-width: 769px) {
        #league-result-section .rank-table th,
        #league-result-section .rank-table td,
        #league-result-section .status-badge,
        #league-result-section .diff-text,
        #league-result-section .rank-badge,
        #league-result-section .note-cell,
        #league-result-section .rank-info {
            font-size: 11px;
        }
        #final-tournament-section .final-origin-info {
            font-size: 11px;
        }
    }
    .awards-opening-star-particle {
        position: fixed;
        z-index: 10000;
        pointer-events: none;
        user-select: none;
        font-family: Arial, sans-serif;
        font-size: 25px;
        line-height: 1;
        color: #ffc83d;
        text-shadow: 0 0 10px rgba(255, 198, 48, 0.45);
        animation: awards-opening-star-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }
    .blue-star-particle {
        position: fixed;
        z-index: 10000;
        pointer-events: none;
        user-select: none;
        font-size: 16px;
        color: #4da3ff;
        text-shadow: 0 0 10px rgba(77, 163, 255, 0.45);
        animation: blue-star-pop 0.45s ease-out forwards;
    }
    .boardgame-star-burst-particle {
        position: fixed;
        z-index: 10000;
        pointer-events: none;
        user-select: none;
        font-size: 9px;
        color: #ffffff;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.85), 0 0 18px rgba(214, 232, 255, 0.5);
        animation: boardgame-star-burst-pop 0.48s ease-out forwards;
    }
    .purple-star-particle {
        position: fixed;
        z-index: 10000;
        pointer-events: none;
        user-select: none;
        font-size: 20px;
        color: #9b6dff;
        text-shadow: 0 0 12px rgba(155, 109, 255, 0.4);
        animation: purple-star-pop 0.52s ease-out forwards;
    }
    .green-star-particle {
        position: fixed;
        z-index: 10000;
        pointer-events: none;
        user-select: none;
        font-size: 9px;
        color: #71ff9b;
        text-shadow: 0 0 12px rgba(113, 255, 155, 0.55), 0 0 18px rgba(64, 184, 110, 0.45);
        animation: white-star-pop 0.5s ease-out forwards;
    }
    .heart-burst-particle {
        position: fixed;
        z-index: 10000;
        pointer-events: none;
        user-select: none;
        font-size: 9px;
        color: #ff5f87;
        text-shadow: 0 0 10px rgba(255, 95, 135, 0.35);
        animation: heart-burst-pop 0.48s ease-out forwards;
    }
    @keyframes quiz-life-burst {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        45% {
            opacity: 1;
            transform: scale(1.2);
        }
        100% {
            opacity: 0;
            transform: scale(0.35) rotate(-18deg);
        }
    }
    @keyframes awards-opening-star-pop {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(0.5);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--tr)) scale(1.2);
        }
    }
    @keyframes blue-star-pop {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(0.45);
        }
        100% {
            opacity: 0;
            transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.95);
        }
    }
    @keyframes white-star-pop {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(0.42);
        }
        100% {
            opacity: 0;
            transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.92);
        }
    }
    @keyframes boardgame-star-burst-pop {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(0.42);
        }
        100% {
            opacity: 0;
            transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.92);
        }
    }
    @keyframes purple-star-pop {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(0.5);
        }
        100% {
            opacity: 0;
            transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.05);
        }
    }
    @keyframes heart-burst-pop {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(0.5);
        }
        100% {
            opacity: 0;
            transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--tr)) scale(1);
        }
    }
    .round-notice-overlay {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        z-index: 20000;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        animation: fadeIn 0.3s ease;
    }
    .round-notice-content {
        padding: 40px;
        text-align: center;
        background: white;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .round-notice-icon {
        margin-bottom: 15px;
        font-size: 50px;
    }
    .round-notice-text {
        color: #333;
        font-size: 16px;
        line-height: 1.6;
    }
    .center-notice-overlay {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        z-index: 35000;
        pointer-events: none;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(2px);
        transition: opacity 0.4s ease;
    }
    #classic-gameover-overlay {
        pointer-events: auto;
    }
    #classic-gameover-overlay .center-notice-box {
        pointer-events: auto;
    }
    .center-notice-box {
        width: min(92vw, 360px);
        padding: 24px 26px 22px;
        text-align: center;
        background: linear-gradient(180deg, rgba(44, 32, 37, 0.98), rgba(26, 20, 23, 0.98));
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 24px;
        box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
        animation: centerPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .center-notice-box .notice-icon {
        margin-bottom: 8px;
        font-size: 25px;
        color: #ffd88a;
    }
    .center-notice-box .notice-text {
        color: #fff4f6;
        font-size: 17px;
        font-weight: 900;
        line-height: 1.5;
        letter-spacing: 0.02em;
    }
    .center-notice-box.is-draw-notice {
        width: min(88vw, 320px);
        padding: 26px 20px 20px;
    }
    .center-notice-box.is-draw-notice .notice-icon {
        display: none;
    }
    .center-notice-box.is-draw-notice .notice-text {
        font-size: 28px;
        line-height: 1.1;
        margin-bottom: 8px;
    }
    .center-notice-box .notice-subtext {
        color: #f0d0d7;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.4;
    }
    .joker-result-box {
        width: min(100%, 380px);
        padding: 28px 24px 22px;
        border-radius: 24px;
        border: 1px solid rgba(255,255,255,0.12);
        background: linear-gradient(180deg, rgba(17, 20, 27, 0.97), rgba(10, 12, 18, 0.97));
        box-shadow: 0 20px 44px rgba(0,0,0,0.36);
        text-align: center;
        display: grid;
        gap: 12px;
        justify-items: center;
        overflow: hidden;
    }
    .joker-result-box.is-win {
        border-color: rgba(120, 213, 145, 0.26);
    }
    .joker-result-box.is-draw {
        border-color: rgba(255,255,255,0.12);
    }
    .joker-result-box.is-lose {
        border-color: rgba(255, 150, 150, 0.24);
    }
    .joker-result-content {
        width: 100%;
        display: grid;
        gap: 12px;
        justify-items: center;
    }
    .joker-result-title {
        color: #f8fbff;
        font-size: 32px;
        font-weight: 900;
        letter-spacing: 0.04em;
        line-height: 1;
    }
    .joker-result-copy {
        color: #e4ecf8;
        font-size: 13px;
        line-height: 1.7;
        text-align: center;
        white-space: pre-line;
    }
    .joker-result-score {
        color: #f4eadc;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.5;
        text-align: center;
        letter-spacing: 0.02em;
    }
    .joker-result-actions {
        margin-top: 2px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }
    .joker-result-actions .btn {
        min-height: 42px;
        min-width: 0;
        max-width: none;
        border-radius: 14px;
    }
    .center-notice-overlay.boardgame-result-overlay {
        pointer-events: auto;
        background: rgba(6, 8, 12, 0.72);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    .center-notice-box.boardgame-result-card {
        width: min(100%, 380px);
        padding: 28px 24px 22px;
        border-radius: 24px;
        border: 1px solid rgba(255,255,255,0.12);
        background: linear-gradient(180deg, rgba(17, 20, 27, 0.97), rgba(10, 12, 18, 0.97));
        box-shadow: 0 20px 44px rgba(0,0,0,0.36);
        text-align: center;
        display: grid;
        gap: 12px;
        justify-items: center;
        transform: translateY(-80px);
    }
    .center-notice-box.boardgame-result-card .joker-result-score {
        color: #aab7c6;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.55;
        white-space: pre-line;
    }
    .joker-result-actions .btn-submit {
        background: linear-gradient(180deg, #f1d08a 0%, #c6933f 52%, #9d6d25 100%);
        color: #2f1d08;
        border: 1px solid rgba(255, 240, 201, 0.42);
        box-shadow: 0 10px 22px rgba(123, 82, 20, 0.34);
    }
    .joker-result-actions .btn-submit:hover {
        background: linear-gradient(180deg, #f7dda4 0%, #d7a652 52%, #ab7a2b 100%);
    }
    .quiz-save-overlay {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        z-index: 36000;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(3px);
        animation: fadeIn 0.2s ease;
    }
    .quiz-save-dialog {
        width: min(360px, calc(100vw - 32px));
        padding: 26px 24px 22px;
        text-align: center;
        background: rgba(255, 255, 255, 0.98);
        border: 2px solid #ffd2de;
        border-radius: 16px;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
        animation: centerPop 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .quiz-save-icon {
        margin-bottom: 5px;
        font-size: 34px;
    }
    .quiz-save-title {
        color: #222;
        font-size: 22px;
        font-weight: 700;
    }
    .quiz-save-desc {
        margin-top: 10px;
        color: #555;
        font-size: 9px;
        line-height: 1.6;
    }
    .quiz-save-actions {
        display: flex;
        gap: 8px;
        margin-top: 18px;
    }
    .quiz-save-actions .btn {
        flex: 1;
        padding: 12px 10px;
    }
    .quiz-save-actions .btn-save {
        color: #fff;
        background: linear-gradient(135deg, #ff779d, #ff5f87);
        box-shadow: 0 10px 20px rgba(255, 95, 135, 0.24);
    }
    .quiz-save-actions .btn-save:hover {
        background: linear-gradient(135deg, #ff6f96, #ff4f7b);
    }
    .quiz-score-capture {
        position: fixed;
        left: -9999px;
        top: 0;
        width: 520px;
        padding: 28px;
        color: #2b2b2b;
        font-family: var(--main-font);
        background: #ffffff;
        border: 3px solid #ffd6e2;
        border-radius: 26px;
        box-shadow: none;
    }
    .quiz-score-capture .capture-badge {
        display: inline-block;
        margin-bottom: 10px;
        padding: 6px 12px;
        color: #ff5f87;
        font-size: 9px;
        font-weight: 700;
        background: #ffffff;
        border: 1px solid #ffc5d6;
        border-radius: 999px;
    }
    .quiz-score-capture .capture-title {
        color: #1c6dff;
        font-size: 34px;
        font-weight: 700;
    }
    .quiz-score-capture .capture-score {
        margin: 18px 0 12px;
        color: #ff5f87;
        font-size: 64px;
        font-weight: 700;
        line-height: 1;
    }
    .quiz-score-capture .capture-achievement {
        display: inline-block;
        margin-top: 2px;
        padding: 6px 10px;
        font-size: 9px;
        font-weight: 700;
        background: #fff7fb;
        border: 1px solid #ffd6e2;
        border-radius: 14px;
    }
    .quiz-score-capture .capture-label {
        color: #555;
        font-size: 9px;
    }
    .quiz-score-capture .capture-meta {
        margin-top: 18px;
        color: #777;
        font-size: 9px;
        line-height: 1.7;
    }
    @keyframes centerPop {
        from {
            opacity: 0;
            transform: scale(0.8) translateY(20px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }
    @media (max-width: 980px) {
        .container {
            width: calc(100% - 24px);
            max-width: calc(100% - 24px);
            margin-left: auto;
            margin-right: auto;
            padding: 22px;
        }
        .classic-game-body {
            grid-template-columns: 1fr;
        }
        .classic-target-panel {
            order: 2;
        }
        .classic-hints-panel {
            order: 1;
        }
        #boardgame-classic-play-section .classic-game-shell {
            background:
                linear-gradient(180deg, rgba(249, 242, 225, 0.2), rgba(105, 74, 42, 0.1)),
                url("boardgame/classic/classic field.webp") center / auto 125% no-repeat;
            background-color: #ead8b5;
        }
    }
    @media (max-width: 600px) {
        html,
        body {
            overflow-x: hidden;
        }
        body {
            padding: 8px;
        }
        .container {
            width: 100%;
            max-width: 100%;
            padding: 14px;
            border-radius: 10px;
        }
        .theme-toggle {
            top: 10px;
            right: 10px;
            min-width: 82px;
            min-height: 30px;
            padding: 5px 7px 5px 9px;
            gap: 6px;
            font-size: 8px;
        }
        .theme-toggle-track {
            width: 28px;
            height: 16px;
        }
        .theme-toggle-thumb {
            width: 10px;
            height: 10px;
        }
        body.theme-dark .theme-toggle-thumb {
            transform: translateX(12px);
        }
        .intro-help-toggle {
            top: 10px;
            left: 10px;
            width: 30px;
            height: 30px;
            font-size: 14px;
        }
        .intro-help-panel {
            margin-bottom: 10px;
            padding: 12px 10px;
            font-size: 10px;
            line-height: 1.55;
        }
        h1 {
            padding: 0 76px;
            margin-bottom: 12px;
            font-size: 20px;
        }
        .menu-tabs {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 6px;
            margin: 0 0 10px;
            padding: 0;
            overflow: visible;
        }
        .menu-tabs > .btn,
        .menu-tabs > .info-menu-trigger,
        .menu-tabs > .play-menu-trigger {
            width: 100%;
            min-width: 0;
        }
        .menu-tabs > #btn-beauty {
            width: 100%;
            min-width: 0;
        }
        .info-menu-trigger {
            display: flex;
            min-width: 0;
        }
        .info-menu-popover {
            position: fixed;
            left: var(--menu-popover-left, 12px);
            right: auto;
            top: var(--menu-popover-top, 120px);
            width: var(--menu-popover-width, min(90px, calc(100vw - 24px)));
            min-width: 0;
            transform: translateY(-8px) scale(0.98);
        }
        .info-menu-popover,
        .play-menu-popover {
            grid-template-columns: 1fr;
            gap: 6px;
            padding: 13px 6px 6px;
        }
        .info-menu-trigger:hover .info-menu-popover {
            opacity: 0;
            pointer-events: none;
            transform: translateY(-8px) scale(0.98);
        }
        .info-menu-trigger.is-open .info-menu-popover {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0) scale(1);
        }
        .info-menu-popover::before {
            left: 50%;
            top: -5px;
        }
        .info-menu-option {
            min-height: 34px;
            padding: 6px 4px;
            font-size: 9px;
        }
        .play-menu-trigger {
            display: flex;
            min-width: 0;
        }
        .play-menu-popover {
            position: fixed;
            left: var(--menu-popover-left, 12px);
            right: auto;
            top: var(--menu-popover-top, 120px);
            width: var(--menu-popover-width, min(90px, calc(100vw - 24px)));
            min-width: 0;
            transform: translateY(-8px) scale(0.98);
        }
        .play-menu-trigger:hover .play-menu-popover {
            opacity: 0;
            pointer-events: none;
            transform: translateY(-8px) scale(0.98);
        }
        .play-menu-trigger.is-open .play-menu-popover {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0) scale(1);
        }
        .play-menu-popover::before {
            left: 50%;
            top: -5px;
        }
        .play-menu-option {
            min-height: 34px;
            padding: 6px 4px;
            font-size: 9px;
        }
        .btn {
            width: 100%;
            min-width: 0;
            min-height: 46px;
            padding: 7px 3px;
            font-size: 9px;
            line-height: 1.2;
            white-space: normal;
            word-break: keep-all;
            overflow-wrap: anywhere;
            text-align: center;
        }
        #btn-info {
            letter-spacing: -0.02em;
        }
        #search-section > br {
            display: none;
        }
        input#search {
            padding: 11px 12px;
            font-size: 13px;
        }
        .list-item {
            align-items: center;
            gap: 8px;
            padding: 8px;
        }
        .list-main {
            align-items: center;
            gap: 8px;
        }
        .item-img {
            width: 40px;
            height: 50px;
        }
        .list-head {
            flex-wrap: wrap;
            gap: 4px;
        }
        .meta {
            font-size: 9px;
        }
        .extra {
            font-size: 9px;
        }
        .search-results-head {
            align-items: center;
            margin-top: 14px;
        }
        .search-filter-bar {
            max-width: 340px;
        }
        .search-filter-box {
            min-width: 132px;
        }
        .search-filter-select {
            font-size: 9px;
        }
        .list-stamp {
            width: 62px;
            flex-basis: 62px;
        }
        .list-stamp.is-boutique {
            min-width: 62px;
            padding: 2px;
            margin: -2px;
            border-radius: 12px;
        }
        .list-stamp img {
            width: 40px;
        }
        .quiz-flex {
            flex-direction: row;
            align-items: stretch;
            justify-content: space-between;
            gap: 8px;
            margin: 20px 0;
        }
        #quiz-section .quiz-flex > div[style*="font-size: 28px"],
        #tournament-section .quiz-flex > div[style*="font-size: 24px"],
        #final-tournament-section .quiz-flex .vs-text {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 26px;
            margin: 0;
            font-size: 18px !important;
            line-height: 1;
        }
        .quiz-card {
            width: auto;
            min-width: 0;
            min-height: auto;
            padding: 15px 10px;
            box-sizing: border-box;
            flex: 1 1 0;
        }
        .quiz-card img {
            width: 72px;
            height: 72px;
        }
        .quiz-card strong {
            font-size: 12px;
            line-height: 1.3;
            word-break: keep-all;
        }
        .stamp-quiz-card {
            padding: 18px 12px;
        }
        .stamp-quiz-question {
            font-size: 18px;
        }
        .stamp-quiz-item-image {
            width: 122px;
            height: 122px;
        }
        .stamp-quiz-options {
            gap: 8px;
        }
        .stamp-quiz-option {
            width: 58px;
            height: 58px;
            border-radius: 14px;
        }
        .stamp-quiz-option img {
            width: 48px;
            height: 48px;
        }
        #stamp-quiz-container .quiz-top-ctrl {
            gap: 7px;
            justify-content: center;
        }
        #stamp-quiz-score {
            min-width: 112px;
            font-size: 10px;
        }
        #stamp-quiz-score b {
            font-size: 18px !important;
        }
        #stamp-quiz-container .quiz-home-btn {
            margin-left: 0 !important;
        }
        #stamp-quiz-container .quiz-home-btn .btn-text {
            font-size: 9px;
        }
        #stamp-quiz-achievement-line {
            margin-top: -2px;
            margin-bottom: 10px;
            font-size: 13px;
        }
        #stamp-quiz-timer-text {
            font-size: 11px;
        }
        .stamp-quiz-feedback {
            min-height: 70px;
            font-size: 14px;
        }
        .quiz-top-ctrl {
            flex-wrap: nowrap;
            justify-content: space-between;
            gap: 8px;
        }
        #quiz-score {
            flex: 1 1 auto;
            min-width: 0;
            text-align: left !important;
            font-size: 9px;
        }
        #quiz-score b {
            font-size: 16px;
        }
        .quiz-life-bar {
            order: 2;
            margin: 0;
            gap: 4px;
            padding: 7px 10px;
        }
        .quiz-life-label {
            font-size: 9px;
        }
        .quiz-lives {
            gap: 4px;
        }
        .quiz-life {
            width: 14px;
            height: 18px;
            font-size: 9px;
        }
        .quiz-home-btn {
            order: 3;
            margin-left: 0 !important;
            height: 34px !important;
            padding: 0 10px !important;
            gap: 4px;
        }
        .quiz-home-btn img {
            width: 15px !important;
        }
        .quiz-home-btn .btn-text {
            font-size: 9px;
        }
        .awards-container {
            width: 100%;
            max-width: 100%;
            padding: 20px 15px;
        }
        .collection-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .rank-table {
            width: 100%;
            font-size: 9px;
        }
        .rank-table th,
        .rank-table td {
            padding: 8px 4px;
        }
        #league-result-section {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .rank-table img {
            width: 24px;
            height: 24px;
        }
        #boardgame-classic-play-section .classic-game-toolbar {
            display: none;
        }
        .classic-game-score {
            width: 100%;
            text-align: center;
        }
        .classic-mobile-actions {
            display: none;
        }
        .classic-mobile-life {
            display: flex;
        }
        #boardgame-classic-play-section .classic-title-row {
            display: block;
            min-height: 34px;
            margin-bottom: 6px;
            text-align: center;
        }
        #boardgame-classic-play-section .classic-title-row .classic-music-control {
            display: none;
        }
        #boardgame-classic-play-section .classic-mobile-music {
            display: flex;
            justify-content: center;
            margin-top: 8px;
        }
        #boardgame-classic-play-section .classic-mobile-music .classic-music-btn {
            min-width: 64px;
            height: 30px !important;
            padding: 0 8px !important;
        }
        #boardgame-classic-play-section .classic-mobile-music .classic-music-btn .btn-text,
        #boardgame-classic-play-section .classic-mobile-music .classic-music-btn .music-icon {
            font-size: 8px;
        }
        #boardgame-classic-play-section .classic-mobile-music .classic-volume-panel {
            width: 136px;
            padding: 7px 8px;
            top: auto;
            bottom: calc(100% + 8px);
            right: 50%;
            transform: translate(50%, 8px);
        }
        #boardgame-classic-play-section .classic-mobile-music.is-open .classic-volume-panel,
        #boardgame-classic-play-section .classic-mobile-music:focus-within .classic-volume-panel {
            transform: translate(50%, 0);
        }
        #boardgame-classic-play-section .classic-game-shell > div:first-child {
            margin-bottom: 6px !important;
        }
        #boardgame-classic-play-section .classic-mobile-status-row .quiz-life-bar {
            order: 1;
            margin: 0;
        }
        #boardgame-classic-play-section .classic-mobile-score {
            order: 2;
        }
        #boardgame-classic-play-section .classic-mobile-home {
            width: 112px !important;
            justify-content: center;
        }
        #boardgame-classic-play-section .classic-game-toolbar > .quiz-life-bar,
        #boardgame-classic-play-section .classic-game-toolbar > .quiz-home-btn,
        #boardgame-joker-play-section .classic-game-toolbar > .quiz-life-bar,
        #boardgame-joker-play-section .classic-game-toolbar > .quiz-home-btn {
            display: none;
        }
        .classic-hints-panel {
            display: flex;
            flex-direction: column;
        }
        .classic-scroll-list {
            order: 1;
        }
        .classic-hints-header {
            order: 2;
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
            margin-top: 14px;
            margin-bottom: 0;
        }
        .classic-hints-title {
            text-align: center;
        }
        .classic-hint-btn {
            width: 100%;
            margin-top: 0;
        }
        #boardgame-classic-play-section .classic-hints-panel {
            padding: 9px;
        }
        #boardgame-classic-play-section .classic-game-shell {
            background:
                linear-gradient(180deg, rgba(249, 242, 225, 0.2), rgba(105, 74, 42, 0.1)),
                url("boardgame/classic/classic field.webp") center / auto 125% no-repeat;
            background-color: #ead8b5;
        }
        #boardgame-classic-play-section .classic-scroll-list {
            gap: 5px;
        }
        #boardgame-classic-play-section .classic-scroll-card {
            min-height: 48px;
            border-radius: 10px;
        }
        #boardgame-classic-play-section .classic-scroll-card img {
            height: 48px;
        }
        #boardgame-classic-play-section .classic-scroll-card.is-closed {
            padding: 2px 0;
        }
        #boardgame-classic-play-section .classic-scroll-card.is-closed img {
            max-width: 82px;
            height: 88px;
            margin: -20px auto;
        }
        #boardgame-classic-play-section .classic-scroll-label {
            padding: 8px 24px;
            font-size: 10px;
            line-height: 1.3;
        }
        #boardgame-classic-play-section .classic-hints-header {
            gap: 5px;
            margin-top: 8px;
        }
        #boardgame-classic-play-section .classic-hint-btn {
            min-height: 42px;
            padding: 8px 12px;
        }
        .classic-target-figure {
            min-height: 150px;
        }
        .joker-topbar {
            flex-wrap: wrap;
            justify-content: center;
        }
        .joker-board-shell {
            padding: 12px;
        }
        .joker-token-strip {
            flex-direction: column;
            align-items: stretch;
        }
        .joker-token-row {
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 38px;
        }
        .joker-main-board {
            min-height: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 14px;
        }
        .joker-board-ring {
            display: none;
        }
        .joker-board-side,
        .joker-board-side.com,
        .joker-board-side.player {
            position: static;
            width: 100%;
            transform: none;
        }
        .joker-code-slots {
            position: static;
            transform: none;
            margin: 0;
        }
        .joker-corner-turn,
        .joker-corner-life {
            position: static;
        }
        .joker-staging-grid {
            grid-template-columns: 1fr;
            gap: 38px;
        }
        .joker-setup-panel {
            order: 1;
        }
        .joker-staging-panel:first-of-type {
            order: 1;
        }
        .joker-staging-panel:last-of-type {
            order: 2;
        }
        .joker-draw-grid.count-5,
        .joker-draw-grid.count-4,
        .joker-draw-grid.count-3,
        .joker-draw-grid.count-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .joker-draw-grid.count-5 > :nth-child(4),
        .joker-draw-grid.count-5 > :nth-child(5),
        .joker-draw-grid.count-3 > :first-child {
            grid-column: auto;
        }
        .quinter9-code-board {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            min-height: 0;
        }
        .quinter9-code-arrow {
            align-self: center;
            margin: -2px 0 2px;
            transform: none;
            font-size: 24px;
        }
        .classic-answer-row {
            flex-direction: column;
        }
        .classic-answer-row .btn-submit {
            flex-basis: auto;
            width: 100%;
        }
        .classic-scroll-label {
            padding: 12px 24px;
            font-size: 9px;
        }
        #boardgame-classic-play-section .classic-bottom-actions,
        #boardgame-joker-play-section .classic-bottom-actions {
            display: none;
        }
    }
    @media (max-width: 500px) {
        .search-results-head {
            flex-direction: column;
            align-items: stretch;
            gap: 38px;
        }
        .search-filter-bar {
            display: grid;
            grid-template-columns: 1fr;
            justify-content: stretch;
            width: 100%;
            max-width: none;
            gap: 8px;
        }
        .search-filter-box {
            min-width: 0;
        }
        .search-filter-select {
            width: 100%;
            padding: 9px 34px 9px 10px;
            font-size: 9px;
        }
        .joker-card {
            width: 116px;
        }
        .joker-card-code {
            font-size: 12px;
        }
        .joker-token-row {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .search-dial-btn {
            width: 100%;
            min-width: 0;
        }
        .list-item {
            flex-direction: row;
            align-items: center;
            gap: 8px;
            padding: 10px 9px;
        }
        .list-main {
            width: auto;
            flex: 1 1 auto;
            align-items: center;
            gap: 9px;
        }
        .list-copy {
            width: auto;
            flex: 1 1 auto;
            min-width: 0;
        }
        .list-head {
            flex-direction: column;
            align-items: flex-start;
            flex-wrap: nowrap;
            gap: 4px;
        }
        .item-title-row {
            width: 100%;
            flex-wrap: nowrap;
            align-items: flex-start;
            gap: 2px;
        }
        .awards-crown-history {
            left: 0;
            bottom: calc(100% + 6px);
            transform: translate(0, 4px);
        }
        .awards-crowns:hover .awards-crown-history,
        .awards-crowns:focus-visible .awards-crown-history,
        .awards-crowns.is-open .awards-crown-history {
            transform: translate(0, 0);
        }
        #ranking-section .list-head {
            width: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: flex-start;
            gap: 4px;
        }
        #ranking-section .list-item {
            align-items: center;
        }
        #ranking-section .list-main {
            width: 100%;
            align-items: center;
            gap: 8px;
        }
        #ranking-section .list-copy {
            width: 100%;
        }
        #ranking-section .ranking-head-block {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: 4px;
            width: 100%;
            max-width: 100%;
        }
        #ranking-section .list-head {
            display: contents;
        }
        #ranking-section .item-title-row {
            grid-column: 1 / -1;
            width: 100%;
            max-width: 100%;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 4px;
        }
        #ranking-section .badge,
        #ranking-section .badge-face .badge {
            display: inline-flex;
            width: fit-content;
            max-width: 100%;
            justify-self: start;
            white-space: nowrap;
            word-break: keep-all;
        }
        #ranking-section .item-name {
            width: auto;
            flex: 0 1 auto;
            min-width: 0;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        #ranking-section .ranking-rank-chip {
            min-width: 38px;
            height: 26px;
            margin-right: 0;
            padding: 0 8px;
            font-size: 9px;
        }
        #ranking-section .ranking-score-box {
            width: 100%;
            flex-wrap: wrap;
            gap: 4px 8px;
            border-radius: 16px;
        }
        #ranking-section .search-filter-bar .btn-home {
            width: 100%;
        }
        .ranking-mode-head {
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
        }
        .ranking-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }
        .ranking-category-card {
            min-height: 0;
            padding: 14px 14px 12px;
            border-radius: 14px;
        }
        .ranking-category-card h4 {
            font-size: 15px;
            margin-right: 38px;
        }
        .ranking-card-row {
            grid-template-columns: 30px 34px minmax(0, 1fr) auto;
            gap: 6px;
        }
        .ranking-card-thumb {
            width: 34px;
            height: 34px;
            border-radius: 9px;
        }
        .ranking-card-thumb img {
            width: 30px;
            height: 30px;
        }
        .ranking-card-open-btn {
            width: 30px;
            height: 30px;
            top: 12px;
            right: 12px;
        }
        .info-container {
            margin-top: 18px;
            padding: 18px;
            border-radius: 18px;
        }
        .info-switch-row {
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 6px;
            max-width: 360px;
            margin: 4px auto 10px;
        }
        .info-switch-grid {
            grid-column: auto;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 6px;
            margin: 0;
        }
        .info-mode-description {
            max-width: 320px;
            margin-bottom: 10px;
            padding: 10px 12px;
            font-size: 11px;
            line-height: 1.5;
            border-radius: 12px;
        }
        .info-switch-home {
            grid-column: auto;
            justify-self: stretch;
            min-width: 58px;
            min-height: 36px;
            padding: 7px 8px;
            font-size: 10px;
        }
        .info-switch-card {
            min-height: 38px;
            padding: 8px 4px;
            font-size: 10px;
            border-radius: 10px;
        }
        .info-placeholder-card {
            margin-top: 16px;
            padding: 34px 14px;
            font-size: 16px;
            border-radius: 14px;
        }
        .badge {
            margin-right: 0;
            white-space: nowrap;
        }
        .item-title-row {
            flex-wrap: nowrap;
            align-items: center;
            gap: 4px;
        }
        .item-name {
            display: block;
            width: auto;
            flex: 0 1 auto;
            min-width: 0;
        }
        .meta,
        .extra {
            line-height: 1.4;
        }
        .list-stamp {
            width: 54px;
            flex: 0 0 54px;
            justify-content: center;
            align-self: center;
            margin-top: 0;
        }
        .list-stamp.is-boutique {
            min-width: 54px;
            padding: 1px;
            margin: -1px;
            border-radius: 10px;
        }
        .list-stamp img {
            width: 46px;
        }
        .awards-category-grid {
            grid-template-columns: 1fr;
        }
        .awards-category-grid.boardgame-mode-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }
        #boardgame-mode-page-2 .boardgame-mode-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }
        #boardgame-mode-page-2 {
            min-height: clamp(340px, 86vw, 430px);
            padding-bottom: clamp(72px, 20vw, 110px);
        }
        #boardgame-mode-page-2 .category-card {
            width: auto;
            max-width: none;
            flex: initial;
        }
        .boardgame-mode-grid .category-card {
            min-height: 0;
            aspect-ratio: 1 / 1.22;
            padding: clamp(5px, 1.8vw, 12px) clamp(3px, 1vw, 6px);
            border-radius: 12px;
        }
        .boardgame-mode-grid .category-card .icon {
            margin-bottom: 8px;
            font-size: 24px;
        }
        .boardgame-mode-grid .category-card .name {
            font-size: clamp(7px, 2.35vw, 10px);
            line-height: 1.25;
        }
        .boardgame-mode-grid .category-card .icon-img-wrapper {
            width: clamp(24px, 9vw, 64px);
            height: clamp(24px, 9vw, 64px);
            min-height: 0;
            margin-bottom: clamp(3px, 1.5vw, 10px);
        }
        .boardgame-mode-grid .category-card.is-character-icon .icon-img-wrapper {
            width: clamp(24px, 9vw, 64px);
            height: clamp(24px, 9vw, 64px);
            min-height: 0;
        }
        .boardgame-mode-grid .category-icon-img {
            width: 100% !important;
            height: 100% !important;
            max-width: 100% !important;
            max-height: 100% !important;
            object-fit: contain;
        }
        #boardgame-mode-page-2 .boardgame-mode-card-survival .icon-img-wrapper,
        #boardgame-mode-page-2 .boardgame-mode-card-ritual .icon-img-wrapper,
        #boardgame-mode-page-2 .boardgame-mode-card-arena .icon-img-wrapper {
            width: clamp(24px, 9vw, 64px);
            height: clamp(24px, 9vw, 64px);
            min-height: 0;
        }
        #boardgame-mode-page-2 .boardgame-mode-card-survival .category-icon-img,
        #boardgame-mode-page-2 .boardgame-mode-card-ritual .category-icon-img,
        #boardgame-mode-page-2 .boardgame-mode-card-arena .category-icon-img {
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        .boardgame-mode-grid .boardgame-mode-card-equinox .icon-img-wrapper {
            width: clamp(22px, 8.1vw, 58px);
            height: clamp(22px, 8.1vw, 58px);
            min-height: 0;
        }
        .overheat-game-shell {
            padding: 14px 8px;
        }
        .overheat-topbar {
            display: none;
        }
        .overheat-status-pill {
            top: 2.6%;
            min-width: 0;
            width: max-content;
            padding: 5px 12px;
            font-size: 10px;
            line-height: 1;
        }
        .overheat-music-control {
            top: 2.6%;
            right: 3.2%;
        }
        .overheat-music-btn {
            min-width: 74px;
            height: 26px !important;
            padding: 0 8px !important;
            gap: 4px;
        }
        .overheat-music-btn .btn-text {
            font-size: 7px;
        }
        .overheat-music-btn .music-icon {
            font-size: 7px;
        }
        .overheat-volume-panel {
            width: 132px;
            padding: 7px 8px;
        }
        .overheat-board {
            width: min(100%, 360px);
            border-radius: 16px;
        }
        .overheat-board-card-slot {
            width: 21%;
            min-width: 66px;
        }
        .overheat-board-card-slot.is-player {
            left: 50%;
            top: 64%;
        }
        .overheat-board-card-slot.is-com {
            left: 50%;
            top: 32%;
        }
        .overheat-field-card {
            padding: 5px;
        }
        .overheat-field-card-name {
            transform: translateY(7.5px);
            font-size: 7px;
        }
        .overheat-field-card-code {
            transform: translateY(-9px);
            font-size: 10px;
        }
        .overheat-field-card-art img {
            width: 74%;
            height: 74%;
        }
        .overheat-count-box {
            width: 26px;
            min-height: 48px;
            gap: 2px;
            padding: 6px 4px;
            border-radius: 11px;
        }
        .overheat-count-box.is-com {
            left: -40px;
        }
        .overheat-count-box.is-player {
            right: -40px;
        }
        .overheat-count-box span {
            font-size: 6px;
        }
        .overheat-count-box strong {
            font-size: 20px;
        }
        .overheat-owner-label {
            min-width: 48px;
            padding: 3px 6px;
            font-size: 7px;
        }
        .overheat-board-card-slot.is-com .overheat-owner-label {
            bottom: calc(95% + 2px);
        }

        .overheat-board-card-slot.is-player .overheat-owner-label {
            top: calc(90% + 2px);
        }
        .overheat-life-row {
            width: 82px;
            gap: 1px;
            row-gap: 3px;
            padding: 4px 5px 4px;
            border-radius: 10px;
        }
        .overheat-life-row::after {
            font-size: 7px;
        }
        .overheat-life-row.is-com {
            right: 7.2%;
            bottom: 14%;
        }
        .overheat-life-row.is-player {
            left: 7.2%;
            bottom: 14%;
        }
        .overheat-set-display {
            bottom: 15%;
            min-width: 34px;
            padding: 6px 4px;
            font-size: 8px;
        }
        .overheat-set-markers {
            width: 100px;
            gap: 2px;
        }
        .overheat-set-markers.is-player {
            left: 6.2%;
            bottom: 21.2%;
        }
        .overheat-set-markers.is-com {
            right: 6.2%;
            bottom: 21.2%;
        }
        .overheat-set-marker {
            width: 30px;
            height: 30px;
        }
        .overheat-entry-action {
            min-width: 42px;
            height: 18px;
            padding: 0 6px;
            font-size: 6px;
        }
        .overheat-entry-action.is-player {
            left: 8%;
            bottom: 8%;
        }
        .overheat-entry-action.is-com {
            right: 8%;
            bottom: 8%;
        }
        .overheat-set-intro-text {
            font-size: 24px;
        }
        .overheat-set-intro.is-fight .overheat-set-intro-text {
            font-size: 30px;
        }
        .overheat-life-dot {
            width: 6px;
            height: 8px;
        }
        .overheat-board.is-blizzard .overheat-life-dot {
            width: 9px;
            height: 9px;
        }
        .overheat-board.is-blizzard .overheat-life-dot::before {
            font-size: 9px;
        }
        .overheat-board-log {
            top: 11.5%;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 76%;
            min-height: 38px;
            transform: translate(-50%, -50%);
            padding: 8px 10px;
            font-size: 9px;
            line-height: 1.18;
            border-radius: 11px;
            white-space: nowrap;
        }
        .overheat-primary-actions {
            bottom: 7%;
            width: 25%;
            max-width: 82px;
        }
        .overheat-hand-grid {
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 5px;
            overflow: visible;
            padding-bottom: 0;
        }
        .overheat-hand-card {
            grid-template-rows: 10px 1fr 13px;
            padding: 6px 5px 7px;
            border-radius: 7px;
            filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.28));
        }
        .overheat-hand-card.is-field::before,
        .overheat-hand-card.is-discard::before {
            top: 4px;
            left: 4px;
            padding: 2px 5px;
            font-size: 7px;
        }
        .overheat-hand-card-name {
            font-size: 5.8px;
            transform: translateY(1px);
        }
        .overheat-hand-card-code {
            font-size: 9px;
            transform: translateY(-2px);
        }
        .overheat-hand-card-art img {
            width: 80%;
            height: 80%;
        }
        .overheat-entry-overlay {
            align-items: flex-start;
            padding: 12px;
        }
        .overheat-entry-panel {
            width: min(390px, calc(100vw - 20px));
            max-height: calc(100vh - 24px);
            padding: 14px;
            border-radius: 15px;
        }
        .overheat-entry-head {
            margin-bottom: 12px;
        }
        .overheat-entry-head strong {
            font-size: 19px;
        }
        .overheat-entry-head span {
            font-size: 9px;
        }
        .overheat-entry-close {
            width: 32px;
            height: 32px;
            font-size: 22px;
        }
        .overheat-entry-grid {
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 8px;
        }
        .overheat-entry-grid .overheat-hand-card {
            grid-template-rows: 11px 1fr 14px;
            padding: 6px 5px 7px;
            border-radius: 7px;
        }
        .overheat-entry-grid .overheat-hand-card-name {
            font-size: 6px;
            transform: translateY(1px);
        }
        .overheat-entry-grid .overheat-hand-card-code {
            font-size: 9px;
            transform: translateY(-2px);
        }
        .overheat-entry-grid .overheat-hand-card-art img {
            width: 82%;
            height: 82%;
        }
        .overheat-actions {
            flex-direction: column;
            align-items: stretch;
        }
        .overheat-nav-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            align-items: stretch;
        }
        .overheat-nav-actions .btn-home {
            width: 100%;
            min-width: 0;
        }
        .overheat-action-btn {
            width: 100%;
            min-width: 0;
            min-height: 22px;
            padding: 5px 6px;
            font-size: 8px;
            line-height: 1;
            white-space: nowrap;
        }
        #boardgame-classic-section .classic-mode-shell {
            background:
                url("boardgame/classic/classic ready field.webp") center / auto 150% no-repeat,
                #f6edd9;
        }
        .classic-guide-tabs {
            max-width: 100%;
            margin-bottom: 12px;
            gap: 8px;
        }
        .classic-guide-tab-btn {
            height: 38px;
            border-radius: 12px;
            font-size: 11px;
        }
        .classic-video-frame {
            min-height: 160px;
            border-radius: 12px;
        }
        .search-scroll-top-btn {
            right: max(12px, env(safe-area-inset-right));
            bottom: max(12px, env(safe-area-inset-bottom));
            min-width: 72px;
            min-height: 40px;
            padding: 9px 12px;
            font-size: 11px;
        }
        .league-item img {
            width: 60px;
            height: 60px;
        }
        .league-item span {
            font-size: 12px;
        }
        .rank-table th,
        .rank-table td {
            font-size: 9px;
        }
        .rank-table td {
            padding: 8px 3px;
        }
        .item-name {
            font-size: 12px;
        }
        .info-badge {
            font-size: 9px;
        }
    }
    @media (min-width: 501px) and (max-width: 760px) {
        .overheat-life-row {
            width: 142px;
            gap: 3px;
            row-gap: 6px;
            padding: 6px 10px 5px;
        }
        .overheat-life-row::after {
            font-size: 12px;
        }
        .overheat-set-display {
            min-width: 58px;
            padding: 8px 12px;
            font-size: 11px;
        }
        .overheat-set-markers {
            width: 142px;
            gap: 5px;
        }
        .overheat-set-marker {
            width: 30px;
            height: 30px;
        }
    }
    @media (max-width: 480px) {
        .home-exit-btn {
            top: 10px;
            right: 10px;
            min-width: 34px;
            height: 34px;
            padding: 0 10px;
        }
        .home-icon {
            font-size: 9px;
        }
        .home-exit-btn img {
            width: 16px;
        }
        .home-exit-btn .btn-text {
            font-size: 9px;
        }
        #tournament-section .awards-container,
        #league-section .awards-container,
        #final-tournament-section .awards-container {
            padding-top: 48px;
        }
        #tour-title,
        #league-title,
        #final-tour-title {
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 5px;
            text-align: center !important;
            font-size: 20px;
            line-height: 1.2;
        }
    }
    @media (max-width: 768px) {
        #boardgame-joker-play-section {
            overflow-x: hidden;
        }
        #boardgame-joker-play-section {
            display: flex;
            justify-content: center;
            overflow-x: hidden;
        }
        #boardgame-joker-play-section .joker-game-shell {
            --joker-mobile-scale: 0.4;
            flex: 0 0 calc(780px * var(--joker-mobile-scale));
            width: 780px;
            max-width: none;
            margin-left: 0;
            margin-right: 0;
            transform: scale(var(--joker-mobile-scale));
            transform-origin: top left;
            zoom: 1;
        }
        #boardgame-joker-play-section .joker-topbar {
            flex-wrap: nowrap;
            justify-content: space-between;
            gap: 38px;
        }
        #boardgame-joker-play-section .joker-board-shell {
            padding: 14px;
        }
        #boardgame-joker-play-section .joker-token-strip {
            flex-direction: row;
            align-items: center;
            gap: 8px;
        }
        #boardgame-joker-play-section .joker-token-row {
            grid-template-columns: repeat(9, minmax(0, 1fr));
            gap: 8px;
        }
        #boardgame-joker-play-section .joker-main-board {
            position: relative;
            display: block;
            min-height: 560px;
            padding: 0;
            gap: 0;
        }
        #boardgame-joker-play-section .joker-board-side,
        #boardgame-joker-play-section .joker-board-side.com,
        #boardgame-joker-play-section .joker-board-side.player {
            position: absolute;
            width: 180px;
        }
        #boardgame-joker-play-section .joker-board-side.com {
            top: 56px;
            left: 50%;
            transform: translateX(-50%);
        }
        #boardgame-joker-play-section .joker-board-side.player {
            bottom: 56px;
            left: 50%;
            transform: translateX(-50%);
        }
        #boardgame-joker-play-section .joker-code-slots {
            position: absolute;
            margin: 0;
        }
        #boardgame-joker-play-section .joker-board-side.com .joker-code-slots {
            right: 100%;
            margin-right: 22px;
            top: 50%;
            transform: translateY(-50%);
        }
        #boardgame-joker-play-section .joker-board-side.player .joker-code-slots {
            left: 100%;
            margin-left: 22px;
            top: 50%;
            transform: translateY(-50%);
        }
        #boardgame-joker-play-section .joker-corner-turn,
        #boardgame-joker-play-section .joker-corner-life {
            position: absolute;
        }
        #boardgame-joker-play-section .joker-corner-turn-com {
            top: 14px;
            left: 100px;
        }
        #boardgame-joker-play-section .joker-corner-turn-player {
            bottom: 20px;
            right: 100px;
        }
        #boardgame-joker-play-section .joker-corner-life-com {
            top: 60px;
            left: 92px;
        }
        #boardgame-joker-play-section .joker-corner-life-player {
            bottom: 60px;
            right: 92px;
        }
        #boardgame-joker-play-section .joker-staging-grid {
            grid-template-columns: minmax(0, 0.84fr) minmax(0, 0.96fr);
            gap: 38px;
            align-items: stretch;
        }
        #boardgame-joker-play-section .joker-setup-panel {
            order: 1;
        }
        #boardgame-joker-play-section .joker-staging-panel:first-of-type {
            order: 1;
        }
        #boardgame-joker-play-section .joker-staging-panel:last-of-type {
            order: 2;
        }
        #boardgame-joker-play-section .joker-draw-grid.count-5 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        #boardgame-joker-play-section .joker-draw-grid.count-5 > :nth-child(4) {
            grid-column: 1 / 2;
        }
        #boardgame-joker-play-section .joker-draw-grid.count-5 > :nth-child(5) {
            grid-column: 3 / 4;
        }
        #boardgame-joker-play-section .joker-draw-grid.count-4,
        #boardgame-joker-play-section .joker-draw-grid.count-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        #boardgame-joker-play-section .joker-draw-grid.count-3 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        #boardgame-joker-play-section .joker-draw-grid.count-3 > :first-child {
            grid-column: 1 / span 2;
        }
        #boardgame-joker-play-section .joker-card {
            width: 132px;
        }
        #boardgame-joker-play-section .joker-draw-wrap.staging .joker-card .joker-card-name {
            font-size: 9px;
        }
        #boardgame-joker-play-section .joker-draw-wrap.staging .joker-card .joker-card-code {
            font-size: 15px;
        }
        #boardgame-joker-play-section .joker-selected-card > .joker-card .joker-card-name {
            top: 22%;
        }
        #boardgame-joker-play-section .joker-selected-card > .joker-card .joker-card-code {
            bottom: 21%;
        }
        #boardgame-joker-play-section .classic-bottom-actions {
            display: flex;
        }
    }
    #boardgame-kaprekar-section .awards-category-grid {
        max-width: 280px;
        margin: 0 auto 18px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }
    #boardgame-kaprekar-section .category-card {
        background: linear-gradient(180deg, rgba(40, 30, 60, 0.98), rgba(18, 14, 30, 0.99));
        border: 1px solid rgba(158, 118, 211, 0.36);
        box-shadow: 0 12px 24px rgba(22, 12, 38, 0.18);
        min-height: 194px;
        padding: 22px 24px 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #boardgame-kaprekar-section .category-card:hover {
        border-color: rgba(198, 164, 255, 0.58);
        box-shadow: 0 12px 26px rgba(69, 42, 118, 0.22);
    }
    #boardgame-kaprekar-section .category-card .name {
        color: #efe8ff;
        text-shadow: 0 0 10px rgba(154, 101, 224, 0.32);
    }
    #boardgame-kaprekar-section .category-card .icon {
        color: #c9b4ff;
    }
    #boardgame-kaprekar-section .icon-img-wrapper {
        height: 84px;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #boardgame-kaprekar-section .category-icon-img {
        width: 170px;
        height: auto;
        display: block;
        margin: 0;
        object-fit: contain;
        object-position: center center;
    }
    #boardgame-kaprekar-section .kaprekar-hair-icon .category-icon-img {
        width: 54px;
        height: 32px;
    }
    #boardgame-kaprekar-section .kaprekar-face-icon .category-icon-img {
        width: 40px;
        height: 20px;
    }
    .kaprekar-howto-card {
        position: relative;
        max-width: 560px;
        margin: 0 auto 24px;
        padding: 18px 20px;
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(43, 32, 49, 0.97), rgba(27, 20, 32, 0.99));
        border: 1px solid rgba(217, 166, 130, 0.42);
        box-shadow: 0 18px 36px rgba(18, 10, 27, 0.28), inset 0 0 28px rgba(117, 67, 158, 0.08);
        color: #f1e1dd;
        line-height: 1.72;
        text-align: center;
    }
    .kaprekar-howto-card strong {
        display: block;
        margin-bottom: 5px;
        color: #efc4a7;
        letter-spacing: 0.04em;
    }
    .kaprekar-howto-lead {
        margin: 0 auto 12px;
        max-width: 520px;
        color: #dec7df;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.65;
        text-align: center;
    }
    .kaprekar-howto-section {
        margin: 10px auto 0;
        max-width: 520px;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid rgba(217, 166, 130, 0.24);
        background: rgba(30, 21, 39, 0.58);
        text-align: left;
    }
    .kaprekar-howto-section h3 {
        margin: 0 0 8px;
        color: #efc4a7;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-align: center;
    }
    .kaprekar-howto-section ul {
        margin: 0;
        padding-left: 18px;
    }
    .kaprekar-howto-section li {
        margin: 3px 0;
        color: #f3e6e1;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.55;
    }
    .kaprekar-howto-chip-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .kaprekar-howto-chip {
        padding: 9px 8px;
        border-radius: 12px;
        background: linear-gradient(180deg, rgba(94, 62, 126, 0.24), rgba(45, 31, 61, 0.32));
        border: 1px solid rgba(217, 166, 130, 0.28);
        color: #efc4a7;
        font-size: 11px;
        font-weight: 900;
        line-height: 1.45;
        text-align: center;
    }
    .kaprekar-entry-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        min-width: 74px;
        height: 34px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #f7d4bc;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.03em;
        background: linear-gradient(180deg, rgba(99, 67, 126, 0.82), rgba(61, 38, 76, 0.86));
        border: 1px solid rgba(217, 166, 130, 0.58);
        border-radius: 999px;
        box-shadow: 0 8px 18px rgba(23, 13, 34, 0.32), 0 0 14px rgba(217, 166, 130, 0.12);
        pointer-events: none;
        white-space: nowrap;
    }
    #boardgame-kaprekar-section .boardgame-code-rule-card {
        background: linear-gradient(180deg, rgba(55, 43, 61, 0.78), rgba(34, 26, 42, 0.9));
        border-color: rgba(217, 166, 130, 0.28);
        box-shadow: inset 0 0 20px rgba(151, 96, 181, 0.08);
    }
    #boardgame-kaprekar-section .boardgame-code-rule-title,
    #boardgame-kaprekar-section .boardgame-code-rule-item strong {
        color: #efc4a7;
    }
    #boardgame-kaprekar-section .boardgame-code-rule-item {
        background: rgba(237, 209, 223, 0.06);
        border-color: rgba(217, 166, 130, 0.22);
    }
    #boardgame-kaprekar-section .boardgame-code-rule-item code {
        color: #ffe2bd;
        background: rgba(22, 14, 28, 0.62);
    }
    #boardgame-kaprekar-section .boardgame-code-rule-name,
    #boardgame-kaprekar-section .boardgame-code-rule-note {
        color: #dec7df;
    }
    @media (max-width: 640px) {
        .kaprekar-entry-badge {
            top: 10px;
            right: 10px;
            min-width: 54px;
            height: 24px;
            padding: 0 8px;
            font-size: 7px;
            letter-spacing: 0.01em;
        }
    }
    .blossom-entry-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        min-width: 74px;
        height: 34px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ffe3ec;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.03em;
        background: rgba(105, 54, 67, 0.76);
        border: 1px solid rgba(224, 152, 173, 0.6);
        border-radius: 999px;
        box-shadow: 0 8px 18px rgba(26, 13, 18, 0.26);
        pointer-events: none;
        white-space: nowrap;
    }
    @media (max-width: 640px) {
        .blossom-entry-badge {
            top: 10px;
            right: 10px;
            min-width: 54px;
            height: 24px;
            padding: 0 8px;
            font-size: 7px;
            letter-spacing: 0.01em;
        }
    }
    #boardgame-stella-section .awards-category-grid {
        max-width: 280px;
        margin: 0 auto 18px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }
    #boardgame-stella-section .category-card {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 255, 0.96));
        border: 1px solid rgba(197, 176, 220, 0.42);
        box-shadow: 0 10px 22px rgba(51, 35, 83, 0.12);
    }
    #boardgame-stella-section .category-card:hover {
        border-color: rgba(246, 211, 95, 0.72);
        box-shadow: 0 14px 26px rgba(93, 64, 134, 0.16);
    }
    #boardgame-stella-section .category-card .name {
        color: #3d314a;
    }
    #boardgame-stella-section .icon-img-wrapper {
        height: 104px;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #boardgame-stella-section .category-icon-img {
        width: 118px;
        height: auto;
        display: block;
        margin: 0;
        object-fit: contain;
        object-position: center center;
    }
    .stella-howto-card {
        max-width: 640px;
        border-color: rgba(223, 199, 118, 0.26);
        background: linear-gradient(180deg, rgba(25, 28, 43, 0.97), rgba(14, 16, 30, 0.98));
        color: #e8e2d2;
    }
    .stella-howto-card strong {
        color: #f2d46c;
    }
    .stella-howto-card div {
        color: #ddd7c8;
    }
    .stella-howto-lead {
        margin: 0 auto 12px;
        max-width: 560px;
        color: #eee4c8;
        font-size: 13px;
        line-height: 1.7;
    }
    .stella-howto-section {
        margin: 12px auto 0;
        max-width: 560px;
        padding: 14px 16px;
        border: 1px solid rgba(223, 199, 118, 0.26);
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(38, 35, 57, 0.62), rgba(16, 18, 33, 0.78));
        text-align: left;
    }
    .stella-howto-section h3 {
        margin: 0 0 8px;
        color: #f2d46c;
        font-size: 14px;
        letter-spacing: 0.02em;
        text-align: center;
    }
    .stella-howto-section ul {
        margin: 0;
        padding-left: 18px;
    }
    .stella-howto-section li {
        margin: 6px 0;
        color: #f0ead7;
        font-size: 12px;
        line-height: 1.62;
    }
    .stella-howto-chip-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        max-width: 560px;
        margin: 0 auto 12px;
    }
    .stella-howto-chip {
        padding: 8px 6px;
        border-radius: 12px;
        border: 1px solid rgba(242, 212, 108, 0.42);
        background: rgba(242, 212, 108, 0.11);
        color: #ffe994;
        font-size: 12px;
        font-weight: 900;
        text-align: center;
    }
    .stella-code-effect-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 10px;
    }
    .stella-code-effect-card {
        padding: 12px 10px;
        border-radius: 14px;
        border: 1px solid rgba(242, 212, 108, 0.28);
        background: rgba(255, 255, 255, 0.045);
        text-align: center;
    }
    .stella-code-effect-card strong {
        display: block;
        margin-bottom: 6px;
        color: #fff0ae;
        font-size: 13px;
    }
    .stella-code-effect-card code {
        display: inline-block;
        margin: 2px 0 8px;
        padding: 5px 8px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.34);
        color: #f8df79;
        font-size: 12px;
        font-weight: 900;
    }
    .stella-code-effect-card span {
        display: block;
        color: #e8dfc6;
        font-size: 11px;
        line-height: 1.5;
    }
    @media (max-width: 640px) {
        .stella-howto-chip-grid,
        .stella-code-effect-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .stella-howto-section {
            padding: 12px;
        }
    }
    .stella-title-row {
        position: relative;
        display: block;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        min-height: 34px;
    }
    .stella-title-row h2 {
        margin: 0;
        text-align: center;
    }
    .stella-entry-toggle {
        position: absolute;
        left: calc(50% + 178px);
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        border: 1px solid rgba(182, 129, 255, 0.48);
        background: rgba(38, 29, 67, 0.12);
        color: #5d4d74;
        font-size: 9px;
        font-weight: 900;
        cursor: pointer;
        user-select: none;
    }
    .stella-entry-toggle input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    .stella-entry-toggle-track {
        position: relative;
        width: 38px;
        height: 20px;
        border-radius: 999px;
        background: rgba(90, 84, 105, 0.24);
        box-shadow: inset 0 1px 4px rgba(0,0,0,0.18);
        transition: background 0.18s ease, box-shadow 0.18s ease;
    }
    .stella-entry-toggle-track::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #fbf8ef;
        box-shadow: 0 2px 6px rgba(0,0,0,0.22);
        transition: transform 0.18s ease;
    }
    .stella-entry-toggle input:checked + .stella-entry-toggle-track {
        background: linear-gradient(135deg, rgba(122, 73, 210, 0.86), rgba(35, 69, 146, 0.86));
        box-shadow: 0 0 12px rgba(142, 91, 230, 0.34);
    }
    .stella-entry-toggle input:checked + .stella-entry-toggle-track::after {
        transform: translateX(18px);
    }
    .stella-entry-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        min-width: 74px;
        height: 34px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #f4eaff;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.03em;
        background: linear-gradient(135deg, rgba(50, 32, 90, 0.88), rgba(15, 24, 58, 0.88));
        border: 1px solid rgba(182, 129, 255, 0.58);
        border-radius: 999px;
        box-shadow: 0 8px 18px rgba(20, 13, 42, 0.28), inset 0 1px 0 rgba(255,255,255,0.12);
        pointer-events: none;
        white-space: nowrap;
        text-shadow: 0 1px 8px rgba(193, 134, 255, 0.52);
    }
    @media (max-width: 640px) {
        .stella-entry-badge {
            top: 10px;
            right: 10px;
            min-width: 54px;
            height: 24px;
            padding: 0 8px;
            font-size: 7px;
            letter-spacing: 0.01em;
        }
        .stella-title-row {
            min-height: 40px;
        }
        .stella-entry-toggle {
            left: auto;
            right: 6px;
            top: 50%;
            height: auto;
            min-height: 30px;
            padding: 3px 6px;
            gap: 4px;
            flex-direction: column;
            font-size: 7px;
            line-height: 1;
            border-radius: 14px;
        }
        .stella-entry-toggle-track {
            width: 28px;
            height: 14px;
        }
        .stella-entry-toggle-track::after {
            top: 2px;
            left: 2px;
            width: 10px;
            height: 10px;
        }
        .stella-entry-toggle input:checked + .stella-entry-toggle-track::after {
            transform: translateX(14px);
        }
    }
    .stella-game-shell {
        max-width: 980px;
        background: linear-gradient(180deg, rgba(7, 12, 28, 0.98), rgba(3, 7, 18, 0.99));
        border: 1px solid rgba(255, 228, 106, 0.16);
        box-shadow: 0 18px 46px rgba(2, 6, 18, 0.38), inset 0 0 38px rgba(43, 62, 114, 0.2);
    }
    .stella-topbar {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
    }
    .stella-status-pill {
        min-height: 42px;
        padding: 8px 10px;
        border-radius: 14px;
        border: 1px solid rgba(219, 198, 125, 0.28);
        background: linear-gradient(180deg, rgba(24, 26, 40, 0.96), rgba(13, 15, 28, 0.98));
        color: #eee5c9;
        display: grid;
        place-items: center;
        text-align: center;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.04em;
    }
    .stella-music-control {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
    }
    .stella-music-btn {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px;
        width: 100%;
        min-height: 42px !important;
        padding: 8px 10px !important;
        border-radius: 14px;
        border: 1px solid rgba(174, 121, 255, 0.28);
        background: linear-gradient(180deg, rgba(24, 26, 40, 0.96), rgba(13, 15, 28, 0.98));
        box-shadow: inset 0 0 18px rgba(174, 121, 255, 0.06);
    }
    .stella-music-btn .btn-text {
        color: #eee5c9;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.04em;
    }
    .stella-music-btn .music-icon {
        color: #c99bff;
        font-size: 10px;
        line-height: 1;
    }
    .stella-music-btn.is-on {
        border-color: rgba(219, 184, 255, 0.48);
        background: linear-gradient(180deg, rgba(92, 57, 151, 0.96), rgba(48, 31, 92, 0.98));
        box-shadow: 0 10px 24px rgba(119, 68, 192, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }
    .stella-music-btn.is-on .btn-text,
    .stella-music-btn.is-on .music-icon {
        color: #f7eaff;
    }
    .stella-volume-panel {
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        width: 168px;
        padding: 8px 10px;
        border-radius: 14px;
        border: 1px solid rgba(174, 121, 255, 0.2);
        background: rgba(8, 10, 20, 0.96);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 30;
    }
    .stella-music-control.is-open .stella-volume-panel,
    .stella-music-control:focus-within .stella-volume-panel {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .stella-volume-label {
        display: block;
        margin-bottom: 5px;
        color: #eee5c9;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-align: center;
    }
    .stella-volume-slider {
        width: 100%;
        accent-color: #9d6aff;
        cursor: pointer;
    }
    .stella-board-stage {
        position: relative;
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid rgba(219, 198, 125, 0.34);
        background:
            linear-gradient(180deg, rgba(7, 10, 20, 0.2), rgba(7, 10, 20, 0.5)),
            url("boardgame/stella/stella-board.webp") center / cover no-repeat;
        aspect-ratio: 797 / 436;
        box-shadow: 0 22px 46px rgba(6, 9, 22, 0.28);
    }
    .stella-field-score {
        position: absolute;
        top: 14px;
        z-index: 8;
        min-width: 82px;
        min-height: 58px;
        padding: 8px 12px 9px;
        border-radius: 14px;
        border: 1px solid rgba(219, 198, 125, 0.32);
        background: linear-gradient(180deg, rgba(24, 26, 40, 0.94), rgba(10, 12, 24, 0.96));
        color: #fff1af;
        display: grid;
        align-content: center;
        justify-items: center;
        gap: 6px;
        text-align: center;
        font-weight: 900;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 0 0 18px rgba(255, 232, 135, 0.04);
    }
    .stella-field-score-label {
        color: rgba(255, 241, 175, 0.82);
        font-size: 11px;
        line-height: 1;
        letter-spacing: 0.06em;
    }
    .stella-field-score-value {
        color: #fff1af;
        font-size: 26px;
        line-height: 1;
        letter-spacing: 0;
        text-shadow: 0 0 14px rgba(255, 228, 106, 0.32);
    }
    .stella-field-score.is-player {
        left: 18px;
    }
    .stella-field-score.is-com {
        right: 18px;
    }
    .stella-win-marks {
        position: absolute;
        bottom: 12px;
        z-index: 9;
        display: flex;
        align-items: center;
        gap: 5px;
        min-height: 34px;
        pointer-events: none;
    }
    .stella-win-marks.is-player {
        left: 18px;
    }
    .stella-win-marks.is-com {
        right: 18px;
    }
    .stella-win-mark {
        position: relative;
        width: 31px;
        height: 31px;
        border-radius: 50%;
        background: center / contain no-repeat;
        opacity: 0.2;
        filter: grayscale(1) brightness(0.68);
        transform-origin: center;
    }
    .stella-win-mark::after {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 244, 177, 0.78), rgba(255, 244, 177, 0.2) 40%, transparent 72%);
        opacity: 0;
        transform: scale(0.58);
        pointer-events: none;
    }
    .stella-win-mark.is-player {
        background-image: url("boardgame/stella/icon.webp");
    }
    .stella-win-mark.is-com {
        background-image: url("boardgame/stella/icon2.webp");
    }
    .stella-win-mark.is-filled {
        opacity: 1;
        filter: none;
    }
    .stella-win-mark.is-player.is-filled {
        filter: drop-shadow(0 0 12px rgba(255, 231, 126, 0.5));
    }
    .stella-win-mark.is-com.is-filled {
        filter: drop-shadow(0 0 12px rgba(174, 121, 255, 0.5));
    }
    .stella-win-mark.is-burst {
        animation: stella-win-mark-burst 0.86s cubic-bezier(0.18, 0.72, 0.18, 1) both;
    }
    .stella-win-mark.is-burst::after {
        animation: stella-win-mark-flare 0.86s ease-out both;
    }
    .stella-board-lines {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
    }
    .stella-board-lines line {
        stroke: rgba(33, 48, 86, 0.74);
        stroke-width: 0.85;
        filter: drop-shadow(0 0 3px rgba(30, 49, 94, 0.34));
        opacity: 0;
        transition: opacity 0.45s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    }
    .stella-board-stage.is-revealed .stella-board-lines line {
        opacity: 1;
    }
    .stella-board-lines line.is-player {
        stroke: #ffe46a;
        stroke-width: 1.65;
    }
    .stella-board-lines line.is-com {
        stroke: #ae79ff;
        stroke-width: 1.65;
    }
    .stella-node {
        position: absolute;
        width: 66px;
        height: 66px;
        transform: translate(-50%, -50%);
        z-index: 3;
    }
    .stella-node-label {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 24px;
        height: 24px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 1px solid rgba(53, 72, 119, 0.78);
        background: rgba(8, 15, 34, 0.9);
        color: #9fb4dd;
        display: grid;
        place-items: center;
        font-size: 13px;
        font-weight: 900;
        box-shadow: 0 0 10px rgba(35, 56, 103, 0.4);
    }
    .stella-node {
        opacity: 0;
        transition: opacity 0.42s ease, transform 0.42s ease;
    }
    .stella-board-stage.is-revealed .stella-node {
        opacity: 1;
    }
    .stella-node.is-player .stella-node-label {
        border-color: rgba(255, 228, 106, 0.95);
        color: #fff2a4;
        box-shadow: 0 0 18px rgba(255, 228, 106, 0.44);
    }
    .stella-node.is-com .stella-node-label {
        border-color: rgba(174, 121, 255, 0.95);
        color: #eadcff;
        box-shadow: 0 0 18px rgba(174, 121, 255, 0.46);
    }
    .stella-sector-dot {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-27px);
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(7, 9, 18, 0.84);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    }
    .stella-sector-dot.is-player {
        background: #47db8a;
        border-color: rgba(185, 255, 214, 0.52);
        box-shadow: 0 0 9px rgba(71, 219, 138, 0.46);
    }
    .stella-sector-dot.is-com {
        background: #ef5c64;
        border-color: rgba(255, 194, 199, 0.5);
        box-shadow: 0 0 9px rgba(239, 92, 100, 0.42);
    }
    .stella-sector-dot.is-player-absolute {
        background: #ffe46a;
        border-color: rgba(255, 245, 183, 0.82);
        box-shadow: 0 0 12px rgba(255, 228, 106, 0.62);
    }
    .stella-sector-dot.is-com-absolute {
        background: #ae79ff;
        border-color: rgba(228, 211, 255, 0.82);
        box-shadow: 0 0 12px rgba(174, 121, 255, 0.62);
    }
    .stella-nebula-mask {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(54%, 430px);
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
        z-index: 6;
        border-radius: 50%;
        background: center / contain no-repeat url("boardgame/stella/cosmog.webp");
        filter: drop-shadow(0 0 24px rgba(161, 108, 255, 0.48));
        opacity: 0.95;
        pointer-events: none;
        transition: opacity 1.35s ease, transform 1.35s ease, filter 1.35s ease;
    }
    .stella-board-stage.is-revealed .stella-nebula-mask {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.08);
        filter: drop-shadow(0 0 42px rgba(255, 232, 135, 0.42));
    }
    .stella-start-overlay {
        position: absolute;
        inset: 0;
        z-index: 12;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        border-radius: 18px;
        background: rgba(5, 8, 18, 0.66);
        backdrop-filter: blur(4px);
    }
    .stella-start-overlay.is-open {
        display: flex;
    }
    .stella-start-card {
        width: min(92%, 420px);
        padding: 26px 24px 24px;
        border-radius: 20px;
        border: 1px solid rgba(255, 228, 106, 0.28);
        background: linear-gradient(180deg, rgba(16, 18, 30, 0.96), rgba(8, 10, 20, 0.96));
        box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42), inset 0 0 32px rgba(174, 121, 255, 0.08);
        text-align: center;
        display: grid;
        gap: 10px;
        justify-items: center;
        transform: translateY(-18px);
        animation: stella-start-card-in 0.42s cubic-bezier(0.18, 0.8, 0.22, 1) both;
    }
    .stella-start-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 116px;
        padding: 7px 15px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.06);
        color: #f8f3d8;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.08em;
    }
    .stella-start-title {
        color: #fff1af;
        font-size: clamp(24px, 4vw, 34px);
        font-weight: 900;
        line-height: 1.2;
        text-shadow: 0 0 18px rgba(255, 228, 106, 0.34);
    }
    .stella-start-title.is-player {
        color: #ffe46a;
    }
    .stella-start-title.is-com {
        color: #d8c0ff;
        text-shadow: 0 0 18px rgba(174, 121, 255, 0.42);
    }
    .stella-start-copy {
        max-width: 330px;
        color: #e9e5d4;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.65;
        white-space: pre-line;
    }
    .stella-start-countdown {
        color: #fff1af;
        font-size: 30px;
        font-weight: 900;
        line-height: 1;
        text-shadow: 0 4px 16px rgba(255, 228, 106, 0.32);
    }
    .stella-zero-core {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 90px;
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
        z-index: 7;
        border-radius: 50%;
        border: 1px solid rgba(247, 224, 139, 0.38);
        background: radial-gradient(circle, rgba(255, 231, 116, calc(0.06 + var(--zero-rate) * 0.38)) 0%, rgba(89, 70, 123, calc(0.12 + var(--zero-rate) * 0.18)) 44%, rgba(6, 10, 21, 0.42) 72%);
        box-shadow: 0 0 calc(12px + var(--zero-rate) * 28px) rgba(255, 226, 104, calc(0.16 + var(--zero-rate) * 0.52));
        display: grid;
        place-items: center;
        text-align: center;
        color: #f7e8a5;
    }
    .stella-zero-core strong {
        display: block;
        font-size: 25px;
        line-height: 1;
    }
    .stella-zero-core span {
        display: block;
        margin-top: 6px;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.08em;
    }
    .stella-legend {
        position: absolute;
        left: 50%;
        bottom: 12px;
        z-index: 8;
        transform: translateX(-50%);
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        width: min(92%, 430px);
        margin: 0;
        pointer-events: none;
    }
    .stella-legend span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 9px;
        border-radius: 999px;
        background: rgba(18, 20, 34, 0.92);
        color: #ded8c8;
        font-size: 9px;
        font-weight: 900;
    }
    .stella-legend i {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        display: inline-block;
    }
    .stella-hand-panel {
        margin-top: 12px;
        padding: 12px;
        border-radius: 16px;
        border: 1px solid rgba(219, 198, 125, 0.28);
        background: linear-gradient(180deg, rgba(18, 20, 34, 0.94), rgba(9, 11, 22, 0.96));
        box-shadow: inset 0 0 22px rgba(247, 224, 139, 0.04);
    }
    .stella-hand-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
        color: #eee5c9;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.04em;
    }
    .stella-hand-head span {
        color: #bfb7a5;
        font-size: 10px;
    }
    .stella-hand-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 8px;
    }
    .stella-hand-card {
        position: relative;
        min-width: 0;
        aspect-ratio: 343 / 486;
        border: 0;
        border-radius: 8px;
        padding: 12% 10% 9%;
        background: url("boardgame/stella/stella-card.webp") center / 100% 100% no-repeat;
        color: #f8ecbd;
        display: grid;
        grid-template-rows: 23% 1fr 18%;
        align-items: center;
        justify-items: center;
        cursor: pointer;
        filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.25));
        transition: transform 0.16s ease, filter 0.16s ease;
    }
    .stella-hand-card:hover:not(:disabled),
    .stella-hand-card.is-selected {
        transform: translateY(-4px);
        filter: drop-shadow(0 14px 20px rgba(255, 225, 112, 0.22));
    }
    .stella-hand-card.is-selected {
        outline: 2px solid rgba(255, 228, 106, 0.84);
        outline-offset: 2px;
    }
    .stella-hand-card.is-used {
        opacity: 0.38;
        cursor: default;
        filter: grayscale(0.35);
    }
    .stella-hand-card-name,
    .stella-hand-card-code {
        width: 100%;
        text-align: center;
        font-weight: 900;
        line-height: 1.18;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.86);
        overflow-wrap: anywhere;
    }
    .stella-hand-card-name {
        align-self: center;
        color: #f2dc91;
        font-size: clamp(6px, 0.82vw, 8px);
        padding: 0 2px;
        min-height: 2.36em;
        max-height: 2.36em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .stella-hand-card-art {
        width: 78%;
        aspect-ratio: 1;
        border-radius: 50%;
        overflow: hidden;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: inset 0 0 14px rgba(20, 24, 40, 0.14);
    }
    .stella-hand-card-art img {
        width: 88%;
        height: 88%;
        object-fit: contain;
        display: block;
    }
    .stella-hand-card-art.is-hidden {
        background: radial-gradient(circle, rgba(247, 224, 139, 0.2), rgba(7, 10, 20, 0.92) 68%);
        border: 1px solid rgba(247, 224, 139, 0.26);
    }
    .stella-hand-card-art.is-hidden span {
        color: #f2dc91;
        font-size: 22px;
        font-weight: 900;
    }
    .stella-hand-card-code {
        align-self: start;
        color: #ffffff;
        font-size: clamp(9px, 1vw, 14px);
        letter-spacing: 0.02em;
    }
    .stella-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin: 12px 0 10px;
    }
    .stella-actions .btn {
        width: min(100%, 520px);
        justify-self: center;
    }
    .stella-actions .stella-primary-action {
        border: 1px solid rgba(226, 191, 255, 0.5);
        background: linear-gradient(180deg, #8f5de8, #56317f);
        color: #fff5ff;
        box-shadow: 0 10px 24px rgba(119, 68, 192, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
    .stella-actions .stella-primary-action:hover:not(:disabled) {
        background: linear-gradient(180deg, #a875ff, #654099);
    }
    body.theme-dark #boardgame-stella-play-section .stella-actions .stella-primary-action:not(.is-next):not(.is-retry):not(.is-ceremony) {
        border-color: rgba(255, 228, 106, 0.58) !important;
        background:
            radial-gradient(circle at 50% 0%, rgba(174, 121, 255, 0.22), transparent 48%),
            linear-gradient(180deg, rgba(24, 28, 52, 0.98) 0%, rgba(18, 19, 41, 0.98) 52%, rgba(10, 13, 28, 0.98) 100%) !important;
        color: #ffe46a !important;
        text-shadow: 0 0 10px rgba(255, 228, 106, 0.32);
        box-shadow:
            0 10px 24px rgba(32, 18, 72, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            inset 0 0 18px rgba(174, 121, 255, 0.08) !important;
    }
    body.theme-dark #boardgame-stella-play-section .stella-actions .stella-primary-action:not(.is-next):not(.is-retry):not(.is-ceremony):hover:not(:disabled) {
        background:
            radial-gradient(circle at 50% 0%, rgba(198, 151, 255, 0.3), transparent 50%),
            linear-gradient(180deg, rgba(31, 36, 66, 0.98) 0%, rgba(23, 24, 50, 0.98) 52%, rgba(13, 16, 34, 0.98) 100%) !important;
    }
    .stella-actions .stella-primary-action.is-next {
        grid-column: 1 / -1;
        border-color: rgba(255, 238, 157, 0.7);
        background: linear-gradient(180deg, #fff1a6, #d7a934);
        color: #241a07;
        box-shadow: 0 10px 24px rgba(255, 220, 103, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    .stella-actions .stella-primary-action.is-next:hover:not(:disabled) {
        background: linear-gradient(180deg, #fff7c4, #e5b943);
    }
    .stella-actions .stella-primary-action.is-retry {
        grid-column: 1 / -1;
        border-color: rgba(255, 255, 255, 0.18);
        background: linear-gradient(180deg, rgba(31, 35, 58, 0.98), rgba(14, 17, 32, 0.98));
        color: #eee5c9;
        box-shadow: inset 0 0 18px rgba(255, 232, 135, 0.05);
    }
    .stella-actions .stella-primary-action.is-ceremony {
        grid-column: 1 / -1;
        background: linear-gradient(180deg, rgba(20, 22, 39, 0.98), rgba(9, 12, 26, 0.98));
        font-size: 22px;
        letter-spacing: 0.08em;
        text-shadow: 0 0 14px currentColor;
        box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.04), 0 12px 26px rgba(0, 0, 0, 0.24);
    }
    .stella-actions .stella-primary-action.is-ceremony.is-win {
        border-color: rgba(255, 228, 106, 0.74);
        color: #ffe46a;
    }
    .stella-actions .stella-primary-action.is-ceremony.is-lose {
        border-color: rgba(174, 121, 255, 0.72);
        color: #ae79ff;
    }
    .stella-actions .stella-primary-action.is-ceremony.is-draw {
        border-color: rgba(255, 255, 255, 0.58);
        color: #ffffff;
    }
    .stella-actions .stella-primary-action.is-ceremony:hover:not(:disabled),
    .stella-actions .stella-primary-action.is-ceremony:active:not(:disabled) {
        background: linear-gradient(180deg, rgba(20, 22, 39, 0.98), rgba(9, 12, 26, 0.98));
        transform: none;
    }
    .stella-actions .stella-primary-action.is-ceremony.is-win:hover:not(:disabled),
    .stella-actions .stella-primary-action.is-ceremony.is-win:active:not(:disabled) {
        color: #ffe46a;
    }
    .stella-actions .stella-primary-action.is-ceremony.is-lose:hover:not(:disabled),
    .stella-actions .stella-primary-action.is-ceremony.is-lose:active:not(:disabled) {
        color: #ae79ff;
    }
    .stella-actions .stella-primary-action.is-ceremony.is-draw:hover:not(:disabled),
    .stella-actions .stella-primary-action.is-ceremony.is-draw:active:not(:disabled) {
        color: #ffffff;
    }
    .stella-entry-action {
        position: absolute;
        right: 18px;
        bottom: 53px;
        z-index: 10;
        min-width: 86px;
        min-height: 31px;
        padding: 0 14px;
        border: 1px solid rgba(178, 125, 255, 0.42);
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(82, 51, 130, 0.62), rgba(19, 15, 34, 0.68));
        color: #f3e8ff;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.03em;
        cursor: pointer;
        backdrop-filter: blur(4px);
        box-shadow: inset 0 0 18px rgba(180, 118, 255, 0.08), 0 8px 18px rgba(6, 5, 14, 0.28);
    }
    .stella-entry-action:hover:not(:disabled) {
        background: linear-gradient(180deg, rgba(104, 66, 161, 0.78), rgba(45, 31, 78, 0.82));
    }
    .stella-entry-action:disabled {
        opacity: 0.45;
        cursor: default;
    }
    .stella-entry-action.is-hidden {
        display: none;
    }
    .stella-entry-overlay {
        position: fixed;
        inset: 0;
        height: 100dvh;
        box-sizing: border-box;
        z-index: 10000;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: clamp(96px, 16vh, 132px) 18px 18px;
        background: rgba(4, 6, 16, 0.62);
        backdrop-filter: blur(4px);
    }
    .stella-entry-overlay.is-open {
        display: flex;
    }
    .stella-entry-panel {
        width: min(576px, 94vw);
        max-height: calc(100dvh - 20px);
        overflow-y: auto;
        box-sizing: border-box;
        border-radius: 18px;
        border: 1px solid rgba(219, 198, 125, 0.34);
        background:
            radial-gradient(circle at 50% 0%, rgba(124, 75, 196, 0.26), transparent 42%),
            linear-gradient(180deg, rgba(16, 18, 34, 0.98), rgba(8, 11, 22, 0.98));
        box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42), inset 0 0 26px rgba(247, 224, 139, 0.04);
        padding: 18px;
    }
    .stella-entry-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
        color: #f7e8a5;
    }
    .stella-entry-head strong {
        font-size: 20px;
        font-weight: 900;
        letter-spacing: 0.02em;
    }
    .stella-entry-head span {
        color: #bfb7d8;
        font-size: 11px;
        font-weight: 900;
    }
    .stella-entry-close {
        width: 34px;
        height: 34px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        color: #fff3c8;
        font-size: 18px;
        font-weight: 900;
        cursor: pointer;
    }
    .stella-entry-close:hover {
        background: rgba(255, 255, 255, 0.12);
    }
    .stella-entry-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        align-items: start;
        margin-top: 4px;
    }
    .stella-entry-grid .stella-hand-card {
        cursor: default;
        transform: none !important;
        filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.28));
    }
    .stella-entry-grid .stella-hand-card-name {
        font-size: clamp(8px, 1.15vw, 11px);
    }
    .stella-entry-grid .stella-hand-card-code {
        font-size: clamp(13px, 1.45vw, 17px);
    }
    .stella-entry-grid .stella-entry-break {
        grid-column: 1 / -1;
        height: 0;
    }
    .stella-entry-grid .stella-hand-card:nth-child(n + 6) {
        transform: translateX(50%) !important;
    }
    .stella-result-overlay {
        position: absolute;
        inset: 0;
        z-index: 13;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: 26px 18px 0;
        background: rgba(5, 8, 18, 0.18);
        pointer-events: none;
    }
    .stella-result-overlay.is-open {
        display: flex;
    }
    .stella-result-card {
        width: min(560px, calc(100% - 36px));
        padding: 26px 24px 22px;
        border-radius: 16px;
        border: 1px solid rgba(255, 228, 106, 0.32);
        background: linear-gradient(180deg, rgba(18, 20, 34, 0.98), rgba(8, 10, 20, 0.98));
        color: #efe7d8;
        text-align: center;
        box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42), inset 0 0 30px rgba(174, 121, 255, 0.08);
        pointer-events: auto;
    }
    .stella-result-title {
        color: #fff1af;
        font-size: 22px;
        font-weight: 900;
    }
    .stella-result-copy {
        margin: 12px auto 18px;
        color: #ddd7ca;
        font-size: 13px;
        line-height: 1.65;
        white-space: pre-line;
    }
    .stella-result-card button {
        min-width: 120px;
        min-height: 38px;
        border-radius: 999px;
        border: 1px solid rgba(255, 228, 106, 0.42);
        background: rgba(255, 255, 255, 0.08);
        color: #fff1af;
        font-family: inherit;
        font-size: 11px;
        font-weight: 900;
        cursor: pointer;
    }
    .stella-round-notice {
        position: absolute;
        inset: 0;
        z-index: 9;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 16px;
        background: transparent;
        pointer-events: none;
    }
    .stella-round-notice.is-visible {
        display: flex;
    }
    .stella-round-notice-card {
        max-width: min(92%, 620px);
        padding: 0;
        border: 0;
        background: transparent;
        color: #fff1af;
        text-align: center;
        font-size: clamp(18px, 3.2vw, 34px);
        font-weight: 900;
        line-height: 1.45;
        text-shadow: 0 0 10px rgba(255, 231, 126, 0.72), 0 0 24px rgba(174, 121, 255, 0.62), 0 2px 4px rgba(0, 0, 0, 0.7);
        animation: stella-message-pop 0.48s cubic-bezier(0.18, 0.8, 0.22, 1) both;
    }
    .stella-round-notice-card.is-final {
        animation: stella-final-message 2.05s ease both;
    }
    .stella-collision-star {
        position: fixed;
        z-index: 24000;
        pointer-events: none;
        user-select: none;
        color: #fff7bc;
        font-size: var(--size, 13px);
        text-shadow: 0 0 10px rgba(255, 245, 183, 0.9), 0 0 20px rgba(174, 121, 255, 0.62);
        animation: stella-star-burst 0.72s ease-out forwards;
    }
    @keyframes stella-message-pop {
        0% { opacity: 0; transform: translateY(10px) scale(0.86); filter: blur(2px); }
        55% { opacity: 1; transform: translateY(0) scale(1.04); filter: blur(0); }
        100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }
    @keyframes stella-final-message {
        0% { opacity: 0; transform: scale(0.92); filter: blur(2px); text-shadow: 0 0 0 rgba(255, 231, 126, 0); }
        24% { opacity: 1; transform: scale(1.04); filter: blur(0); text-shadow: 0 0 18px rgba(255, 231, 126, 0.95), 0 0 42px rgba(255, 231, 126, 0.74), 0 0 64px rgba(174, 121, 255, 0.68); }
        68% { opacity: 1; transform: scale(1); }
        100% { opacity: 0; transform: scale(1.08); filter: blur(3px); text-shadow: 0 0 26px rgba(255, 231, 126, 0.9), 0 0 70px rgba(255, 255, 255, 0.72); }
    }
    @keyframes stella-star-burst {
        0% { opacity: 1; transform: translate(-50%, -50%) scale(0.45) rotate(0deg); }
        65% { opacity: 1; }
        100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.25) rotate(var(--rot)); }
    }
    @keyframes stella-win-mark-burst {
        0% { transform: rotate(-120deg) scale(0.35); opacity: 0; }
        42% { transform: rotate(240deg) scale(1.38); opacity: 1; }
        68% { transform: rotate(330deg) scale(0.94); }
        100% { transform: rotate(360deg) scale(1); }
    }
    @keyframes stella-win-mark-flare {
        0% { opacity: 0; transform: scale(0.5); }
        36% { opacity: 0.95; transform: scale(1.36); }
        100% { opacity: 0; transform: scale(2.12); }
    }
    @keyframes stella-start-card-in {
        0% { opacity: 0; transform: translateY(-2px) scale(0.94); filter: blur(2px); }
        100% { opacity: 1; transform: translateY(-18px) scale(1); filter: blur(0); }
    }
    @media (max-width: 560px) {
        .stella-game-shell {
            padding: 16px 10px;
        }
        .stella-topbar {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .stella-music-btn {
            min-height: 38px !important;
        }
        .stella-music-btn .btn-text,
        .stella-music-btn .music-icon {
            font-size: 9px;
        }
        .stella-board-stage {
            aspect-ratio: 797 / 620;
            background-size: auto 100%;
        }
        .stella-actions {
            gap: 8px;
        }
        .stella-entry-panel {
            width: min(390px, 96vw);
            max-height: calc(100dvh - 84px);
            padding: 10px;
            border-radius: 14px;
        }
        .stella-entry-head strong {
            font-size: 16px;
        }
        .stella-entry-head span {
            font-size: 8px;
        }
        .stella-entry-head {
            gap: 8px;
            margin-bottom: 10px;
        }
        .stella-entry-close {
            width: 30px;
            height: 30px;
            font-size: 16px;
        }
        .stella-entry-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 6px;
        }
        .stella-entry-grid .stella-hand-card-name {
            font-size: clamp(5px, 1.6vw, 7px);
        }
        .stella-entry-grid .stella-hand-card-code {
            font-size: clamp(9px, 2.4vw, 12px);
        }
        .stella-entry-grid .stella-entry-break {
            display: block;
        }
        .stella-entry-grid .stella-hand-card:nth-child(n + 6) {
            transform: translateX(50%) !important;
        }
        .stella-field-score {
            top: 8px;
            min-width: 54px;
            min-height: 42px;
            padding: 5px 7px 6px;
            border-radius: 10px;
            gap: 4px;
        }
        .stella-field-score-label {
            font-size: 8px;
        }
        .stella-field-score-value {
            font-size: 18px;
        }
        .stella-field-score.is-player {
            left: 8px;
        }
        .stella-field-score.is-com {
            right: 8px;
        }
        .stella-win-marks {
            bottom: 37px;
            gap: 3px;
        }
        .stella-win-marks.is-player {
            left: 10px;
        }
        .stella-win-marks.is-com {
            right: 10px;
        }
        .stella-entry-action {
            right: 10px;
            bottom: 70px;
            min-width: 40px;
            min-height: 16px;
            padding: 0 8px;
            font-size: 7px;
        }
        .stella-win-mark {
            width: 23px;
            height: 23px;
        }
        .stella-nebula-mask {
            width: 72%;
        }
        .stella-legend {
            bottom: 8px;
            gap: 5px;
            width: min(96%, 330px);
        }
        .stella-legend span {
            padding: 5px 7px;
            font-size: 8px;
        }
        .stella-legend i {
            width: 7px;
            height: 7px;
        }
        .stella-start-card {
            width: min(96%, 320px);
            padding: 22px 18px 20px;
            gap: 8px;
        }
        .stella-start-title {
            font-size: 22px;
        }
        .stella-start-copy {
            font-size: 12px;
        }
        .stella-start-countdown {
            font-size: 25px;
        }
        .stella-round-notice-card {
            max-width: 96%;
            font-size: 16px;
            line-height: 1.35;
            white-space: nowrap;
        }
        .stella-node {
            width: 52px;
            height: 52px;
        }
        .stella-node-label {
            width: 20px;
            height: 20px;
            font-size: 11px;
        }
        .stella-sector-dot {
            width: 10px;
            height: 10px;
            transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-22px);
        }
        .stella-zero-core {
            width: 58px;
        }
        .stella-zero-core strong {
            font-size: 18px;
        }
        .stella-zero-core span {
            margin-top: 3px;
            font-size: 6px;
            letter-spacing: 0.04em;
        }
        .stella-hand-panel {
            padding: 10px;
        }
        .stella-hand-grid {
            grid-template-columns: repeat(7, minmax(0, 1fr));
            gap: 4px;
        }
        .stella-hand-card {
            padding: 11% 9% 8%;
            border-radius: 6px;
        }
        .stella-hand-card-name {
            font-size: 5px;
        }
        .stella-hand-card-code {
            font-size: 7px;
        }
    }
    .kaprekar-game-shell {
        max-width: 660px;
        background:
            radial-gradient(circle at 50% 18%, rgba(95, 54, 126, 0.28), transparent 48%),
            linear-gradient(180deg, rgba(18, 13, 26, 0.98), rgba(7, 6, 12, 0.99));
        border-color: rgba(142, 91, 172, 0.34);
        box-shadow: 0 24px 54px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(197, 147, 235, 0.08);
    }
    .kaprekar-topbar {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
    }
    .kaprekar-center-copy {
        text-align: center;
    }
    .kaprekar-center-copy h2 {
        margin: 0;
        color: #d8a17f;
    }
    .kaprekar-center-copy p {
        margin: 6px 0 0;
        color: #b4a4c9;
        font-size: 12px;
    }
    .kaprekar-music-control {
        position: absolute;
        top: 5px;
        left: auto;
        right: 10px;
        z-index: 6;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }
    .kaprekar-music-btn {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px;
        min-width: 88px;
        height: 34px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(223, 193, 195, 0.28) !important;
        background: rgba(31, 22, 26, 0.9) !important;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    }
    .kaprekar-music-btn .btn-text {
        color: #e3d3d5;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.04em;
    }
    .kaprekar-music-btn .music-icon {
        color: #dfc1c3;
        font-size: 9px;
        line-height: 1;
    }
    .kaprekar-music-btn.is-on {
        background: linear-gradient(180deg, rgba(91, 51, 58, 0.96), rgba(43, 27, 32, 0.96)) !important;
        border-color: rgba(255, 180, 191, 0.4) !important;
        box-shadow: 0 8px 18px rgba(128, 62, 73, 0.24);
    }
    .kaprekar-music-btn.is-on .btn-text,
    .kaprekar-music-btn.is-on .music-icon {
        color: #ffdce1;
    }
    .kaprekar-volume-panel {
        position: absolute;
        left: auto;
        right: 0;
        top: calc(100% + 8px);
        width: 150px;
        padding: 8px 10px;
        border-radius: 14px;
        border: 1px solid rgba(223, 193, 195, 0.18);
        background: rgba(18, 12, 16, 0.95);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 30;
    }
    .kaprekar-music-control.is-open .kaprekar-volume-panel,
    .kaprekar-music-control:focus-within .kaprekar-volume-panel {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .kaprekar-volume-label {
        display: block;
        margin-bottom: 5px;
        color: #e3d3d5;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-align: center;
    }
    .kaprekar-volume-slider {
        width: 100%;
        accent-color: #dfc1c3;
        cursor: pointer;
    }
    .kaprekar-life-panel {
        display: grid;
        gap: 8px;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid rgba(132, 92, 99, 0.28);
        background: linear-gradient(180deg, rgba(41, 32, 36, 0.96), rgba(27, 19, 23, 0.98));
        color: #d8c9cb;
        text-align: center;
    }
    .kaprekar-life-title {
        font-size: 9px;
        letter-spacing: 0.08em;
    }
    .kaprekar-life-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .kaprekar-life-dot {
        width: 24px;
        height: 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
    }
    .kaprekar-life-dot.is-on {
        background: linear-gradient(90deg, #ffb4bf, #f06b7c);
        box-shadow: 0 0 12px rgba(240, 107, 124, 0.34);
    }
    .kaprekar-board-life-panel {
        position: absolute;
        z-index: 3;
        width: fit-content;
        min-width: 102px;
        padding: 6px 8px;
        background: linear-gradient(180deg, rgba(28, 21, 25, 0.92), rgba(14, 11, 15, 0.96));
        backdrop-filter: blur(4px);
    }
    .kaprekar-board-life-panel.is-com {
        top: 5px;
        left: 10px;
    }
    .kaprekar-board-life-panel.is-player {
        bottom: 10px;
        right: 10px;
    }
    .kaprekar-board-life-panel .kaprekar-life-title {
        font-size: 8px;
    }
    .kaprekar-board-life-panel .kaprekar-life-row {
        gap: 4px;
    }
    .kaprekar-board-life-panel .kaprekar-life-dot {
        width: 11px;
        height: 6px;
    }
    .kaprekar-subbar {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-bottom: 12px;
    }
    .kaprekar-pill {
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid rgba(132, 92, 99, 0.28);
        background: rgba(35, 26, 30, 0.9);
        color: #d6c4c7;
        font-size: 9px;
        letter-spacing: 0.04em;
    }
    .kaprekar-board-shell {
        margin-bottom: 12px;
    }
    .kaprekar-board-panel {
        position: relative;
        min-height: 500px;
        padding: 44px 10px 10px;
        border-radius: 22px;
        border: 1px solid rgba(132, 92, 99, 0.3);
        background-image:
            linear-gradient(180deg, rgba(12, 11, 15, 0.2), rgba(12, 11, 15, 0.5)),
            url("boardgame/kaprekar/kaprekar background.webp");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: grid;
        align-content: start;
        justify-items: center;
        gap: 4px;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    }
    .kaprekar-feedback {
        min-height: 40px;
        min-width: 100%;
        padding: 8px 10px;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(16, 15, 20, 0.78);
        color: #f3ecee;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.03em;
    }
    .kaprekar-card-stack {
        width: 100%;
        display: grid;
        justify-items: center;
        gap: 4px;
    }
    .kaprekar-active-card,
    .kaprekar-empty-card {
        width: min(100%, 120px);
    }
    .kaprekar-card-frame,
    .kaprekar-empty-card {
        padding: 3px 3px 5px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.08);
        background: linear-gradient(180deg, rgba(24, 22, 27, 0.96), rgba(11, 10, 15, 0.98));
        box-shadow: 0 10px 20px rgba(0,0,0,0.22);
    }
    .kaprekar-card-owner {
        color: #cfb8bc;
        font-size: 8px;
        letter-spacing: 0.12em;
        text-align: center;
        margin-bottom: 2px;
    }
    .kaprekar-card-visual {
        aspect-ratio: 3 / 4;
        border-radius: 12px;
        background: rgba(255,255,255,0.04);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin-bottom: 2px;
    }
    .kaprekar-card-visual img {
        width: 86%;
        height: 86%;
        object-fit: contain;
        image-rendering: auto;
    }
    #kaprekar-player-card .kaprekar-card-visual {
        aspect-ratio: 360 / 500;
        padding: 23% 14% 25%;
        box-sizing: border-box;
        border-radius: 0;
        background:
            url("boardgame/kaprekar/card/kaprekar.webp") center / 100% 100% no-repeat;
    }
    #kaprekar-player-card .kaprekar-card-visual img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: none;
    }
    .kaprekar-card-name {
        display: block;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #f3ecee;
        font-size: 9px;
        font-weight: 700;
        text-align: center;
        line-height: 1.35;
    }
    .kaprekar-card-meta {
        margin-top: 6px;
        color: #ac999c;
        font-size: 9px;
        text-align: center;
        letter-spacing: 0.08em;
    }
    #kaprekar-com-card .kaprekar-card-meta,
    #kaprekar-player-card .kaprekar-card-meta {
        display: none;
    }
    .kaprekar-empty-card {
        height: 184px;
        min-height: 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #9f8a8e;
        text-align: center;
        letter-spacing: 0.08em;
    }
    .kaprekar-lock-row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 38px));
        gap: 5px;
        justify-content: center;
    }
    .kaprekar-lock-cell {
        height: 38px;
        border-radius: 16px;
        border: 1px solid rgba(216, 161, 127, 0.48);
        background: rgba(22, 17, 28, 0.84);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(216, 161, 127, 0.34);
        font-size: 18px;
        font-weight: 900;
    }
    .kaprekar-lock-cell.is-open {
        color: #ffd2ad;
        background: linear-gradient(180deg, rgba(86, 48, 68, 0.96), rgba(42, 27, 52, 0.98));
        border-color: rgba(216, 161, 127, 0.72);
        box-shadow: 0 0 18px rgba(216, 161, 127, 0.24);
    }
    .kaprekar-lock-cell.is-reveal {
        border-color: rgba(216, 161, 127, 0.58);
        background: rgba(30, 22, 40, 0.42);
        box-shadow: inset 0 0 0 1px rgba(255, 214, 181, 0.08);
        color: #ffd2ad;
    }
    .kaprekar-action-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
    }
    .kaprekar-action-btn {
        min-height: 42px;
        border: 1px solid rgba(158, 118, 211, 0.34);
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(42, 31, 61, 0.96), rgba(21, 17, 31, 0.98));
        color: #fff;
        font-family: inherit;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.08em;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .kaprekar-action-btn:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 12px 20px rgba(0,0,0,0.18);
    }
    .kaprekar-action-btn:disabled {
        opacity: 0.42;
        cursor: not-allowed;
    }
    .kaprekar-action-btn.is-primary {
        background: linear-gradient(180deg, rgba(102, 67, 156, 0.98), rgba(55, 35, 96, 1));
    }
    .kaprekar-lower-shell {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }
    .kaprekar-match-panel,
    .kaprekar-hand-panel {
        padding: 14px;
        border-radius: 16px;
        border: 1px solid rgba(142, 105, 196, 0.28);
        background: linear-gradient(180deg, rgba(31, 25, 44, 0.96), rgba(14, 12, 23, 0.98));
    }
    .kaprekar-hand-panel {
        padding: 18px 20px 22px;
    }
    .kaprekar-match-panel {
        display: none;
    }
    .kaprekar-match-title,
    .kaprekar-hand-head strong {
        color: #f1e6e8;
        letter-spacing: 0.08em;
    }
    .kaprekar-match-copy {
        display: grid;
        gap: 8px;
        color: #d8c8cb;
        font-size: 11px;
        line-height: 1.6;
    }
    .kaprekar-match-copy span {
        color: #a9999c;
    }
    .kaprekar-match-card-box {
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.04);
        display: grid;
        gap: 4px;
        min-height: 66px;
        align-content: center;
    }
    .kaprekar-match-card-label {
        color: #a9999c;
        font-size: 11px;
        letter-spacing: 0.08em;
    }
    .kaprekar-match-card-name {
        color: #f4ecee;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    .kaprekar-match-card-code {
        color: #d8c8cb;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.08em;
    }
    .kaprekar-hand-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 14px;
        color: #d8c8cb;
    }
    .kaprekar-hand-head span {
        color: #a9999c;
        font-size: 11px;
    }
    .kaprekar-hand-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
        margin-top: 8px;
    }
    .kaprekar-hand-card {
        position: relative;
        width: 100%;
        aspect-ratio: 360 / 500;
        border: 0;
        border-radius: 9px;
        background:
            linear-gradient(180deg, rgba(12, 10, 14, 0.1), rgba(12, 10, 14, 0.22)),
            url("boardgame/kaprekar/card/kaprekar.webp") center / 100% 100% no-repeat;
        padding: 12% 9% 8%;
        display: grid;
        grid-template-rows: 20% 1fr 18%;
        justify-items: center;
        align-items: center;
        overflow: visible;
        cursor: pointer;
        transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
    }
    .kaprekar-hand-card:hover:not(.is-used) {
        transform: translateY(-2px);
        filter: brightness(1.08);
        box-shadow: 0 10px 20px rgba(0,0,0,0.24);
    }
    .kaprekar-hand-card.is-used {
        opacity: 0.32;
        cursor: default;
        filter: grayscale(0.2);
    }
    .kaprekar-hand-card.is-current {
        filter: brightness(1.1);
        box-shadow: 0 0 0 2px rgba(255, 209, 220, 0.42), 0 0 18px rgba(255, 145, 168, 0.22);
    }
    .kaprekar-reach-badge {
        position: absolute;
        z-index: 3;
        left: 50%;
        top: -6px;
        transform: translateX(-50%);
        min-width: 36px;
        padding: 3px 7px 2px;
        border-radius: 999px;
        border: 1px solid rgba(255, 221, 165, 0.72);
        background: linear-gradient(135deg, rgba(98, 58, 28, 0.96), rgba(34, 19, 18, 0.94));
        color: #ffe4b7;
        font-size: 9px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0.04em;
        text-align: center;
        text-shadow: 0 1px 0 rgba(0,0,0,0.38), 0 0 9px rgba(255, 190, 96, 0.46);
        box-shadow: 0 0 13px rgba(255, 155, 64, 0.18), inset 0 0 9px rgba(255, 232, 178, 0.08);
        pointer-events: none;
    }
    .kaprekar-hand-card-visual {
        width: 84%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: rgba(255,255,255,0.03);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        align-self: center;
    }
    .kaprekar-hand-card-visual img {
        width: 90%;
        height: 90%;
        object-fit: contain;
    }
    .kaprekar-hand-card-name {
        display: block;
        overflow: hidden;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #f8eef0;
        font-size: 7px;
        font-weight: 900;
        line-height: 1.08;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0,0,0,0.82);
        transform: translateY(-1px);
    }
    .kaprekar-hand-card .kaprekar-card-meta {
        margin-top: 0;
        color: #f5e8eb;
        font-size: 12px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0;
        text-shadow: 0 2px 3px rgba(0,0,0,0.88);
        align-self: start;
    }
    .kaprekar-game-actions {
        justify-content: center;
    }
    .kaprekar-result-overlay {
        display: none;
    }
    @media (max-width: 768px) {
        .kaprekar-result-overlay {
            min-height: 100dvh;
            align-items: flex-start;
            padding: clamp(220px, 36vh, 320px) 16px 16px;
        }
        .kaprekar-result-card {
            margin: 0;
            transform: none;
        }
        .kaprekar-topbar {
            justify-content: center;
        }
        .kaprekar-music-control {
            top: 5px;
            left: auto;
            right: 10px;
        }
        .kaprekar-volume-panel {
            width: 136px;
        }
        .kaprekar-board-panel {
            min-height: 560px;
            padding: 44px 10px 54px;
            gap: 4px;
        }
        .kaprekar-board-life-panel {
            width: fit-content;
            min-width: 102px;
            padding: 6px 8px;
        }
        .kaprekar-board-life-panel.is-com {
            top: 5px;
            left: 10px;
        }
        .kaprekar-board-life-panel.is-player {
            bottom: 12px;
            right: 10px;
            left: auto;
        }
        .kaprekar-board-life-panel .kaprekar-life-title {
            font-size: 8px;
        }
        .kaprekar-board-life-panel .kaprekar-life-row {
            gap: 4px;
        }
        .kaprekar-board-life-panel .kaprekar-life-dot {
            width: 11px;
            height: 6px;
        }
        .kaprekar-feedback {
            min-width: 100%;
            font-size: 11px;
            padding: 8px 10px;
        }
        .kaprekar-lower-shell {
            grid-template-columns: 1fr;
        }
        .kaprekar-hand-panel {
            padding: 14px;
        }
        .kaprekar-hand-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 7px;
            margin-top: 9px;
        }
        .kaprekar-hand-card {
            border-radius: 7px;
            padding: 7% 9% 8%;
        }
        .kaprekar-hand-card-name {
            font-size: 6px;
        }
        .kaprekar-hand-card .kaprekar-card-meta {
            font-size: 10px;
        }
        .kaprekar-reach-badge {
            top: -10px;
            min-width: 34px;
            padding: 3px 6px 2px;
            font-size: 8px;
        }
    }
    .equinox-win-mark.is-player,
    .equinox-win-mark.is-com,
    .equinox-win-mark.is-draw {
        opacity: 1;
        filter: none;
    }
    .equinox-win-mark.is-player {
        border-color: rgba(255, 247, 225, 0.74);
        box-shadow: 0 0 10px rgba(255, 238, 196, 0.36), 0 2px 7px rgba(0, 0, 0, 0.32);
    }
    .equinox-win-mark.is-com {
        border-color: rgba(216, 183, 124, 0.72);
        box-shadow: 0 0 10px rgba(255, 238, 196, 0.36), 0 2px 7px rgba(0, 0, 0, 0.32);
    }
    .equinox-win-mark.is-draw {
        border-color: rgba(197, 184, 155, 0.62);
        opacity: 0.62;
    }
    .equinox-win-mark.is-burst {
        animation: equinox-win-mark-spin-burst 0.82s cubic-bezier(0.18, 0.72, 0.18, 1) both;
    }
    .equinox-win-mark.is-burst::after {
        animation: equinox-win-mark-flare 0.82s ease-out both;
    }
    @keyframes equinox-win-mark-spin-burst {
        0% {
            transform: rotate(-120deg) scale(0.35);
            opacity: 0;
        }
        42% {
            transform: rotate(250deg) scale(1.42);
            opacity: 1;
        }
        68% {
            transform: rotate(340deg) scale(0.92);
        }
        100% {
            transform: rotate(360deg) scale(1);
        }
    }
    @keyframes equinox-win-mark-flare {
        0% {
            opacity: 0;
            transform: scale(0.5);
        }
        36% {
            opacity: 0.95;
            transform: scale(1.35);
        }
        100% {
            opacity: 0;
            transform: scale(2.1);
        }
    }
    .equinox-life-label {
        display: block;
        color: #d6bd80;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.08em;
    }
    .equinox-life-value {
        display: block;
        margin-top: 8px;
        color: #fff8eb;
        font-size: 30px;
        font-weight: 900;
        line-height: 1;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.44);
    }
    .equinox-entry-buttons {
        position: absolute;
        left: 50%;
        bottom: 156px;
        z-index: 5;
        width: min(585px, calc(100% - 50px));
        display: flex;
        justify-content: space-between;
        transform: translateX(-50%);
        pointer-events: none;
    }
    .equinox-entry-btn {
        min-width: 86px;
        min-height: 30px;
        padding: 0 16px;
        border-radius: 999px;
        border: 1px solid rgba(224, 202, 154, 0.44);
        background: linear-gradient(180deg, rgba(27, 28, 31, 0.94), rgba(7, 8, 10, 0.96));
        color: #f2dfb4;
        font-family: inherit;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.06em;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        cursor: pointer;
        pointer-events: auto;
    }
    .equinox-entry-btn.is-player {
        border-color: rgba(245, 239, 222, 0.48);
    }
    .equinox-entry-btn.is-com {
        border-color: rgba(214, 189, 128, 0.58);
    }
    .equinox-game-shell {
        position: relative;
        max-width: 980px;
        background: linear-gradient(180deg, rgba(21, 21, 24, 0.98), rgba(9, 10, 12, 0.98));
        border: 1px solid rgba(221, 205, 170, 0.18);
        box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
        color: #efe7d8;
    }
    .equinox-statusbar {
        display: flex;
        justify-content: center;
        margin-bottom: 12px;
    }
    .equinox-status-pill {
        min-width: 142px;
        padding: 8px 18px;
        border-radius: 18px;
        border: 1px solid rgba(231, 215, 178, 0.24);
        background: linear-gradient(180deg, rgba(34, 34, 37, 0.94), rgba(15, 16, 18, 0.98));
        color: #efe6d4;
        font-size: 16px;
        font-weight: 900;
        text-align: center;
        line-height: 1;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    }
    .equinox-status-pill span {
        display: block;
        white-space: nowrap;
    }
    .equinox-status-pill span + span {
        margin-top: 5px;
        color: #d6bd80;
        font-size: 0.78em;
    }
    .equinox-music-control {
        position: absolute;
        top: 18px;
        right: 34px;
        z-index: 6;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }
    .equinox-music-btn {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px;
        min-width: 96px;
        height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px;
        border: 1px solid rgba(231, 215, 178, 0.2);
        background: rgba(14, 15, 17, 0.88);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    }
    .equinox-music-btn .btn-text {
        color: #efe7d8;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.04em;
    }
    .equinox-music-btn .music-icon {
        color: #d6bd80;
        font-size: 9px;
        line-height: 1;
    }
    .equinox-music-btn.is-on {
        background: linear-gradient(180deg, rgba(68, 58, 33, 0.96), rgba(30, 27, 19, 0.96));
        border-color: rgba(239, 219, 174, 0.36);
        box-shadow: 0 8px 18px rgba(116, 92, 43, 0.24);
    }
    .equinox-music-btn.is-on .btn-text,
    .equinox-music-btn.is-on .music-icon {
        color: #f6dfac;
    }
    .equinox-volume-panel {
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        width: 168px;
        padding: 8px 10px;
        border-radius: 14px;
        border: 1px solid rgba(231, 215, 178, 0.16);
        background: rgba(10, 11, 13, 0.94);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 30;
    }
    .equinox-music-control.is-open .equinox-volume-panel,
    .equinox-music-control:focus-within .equinox-volume-panel {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .equinox-volume-label {
        display: block;
        margin-bottom: 5px;
        color: #efe7d8;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-align: center;
    }
    .equinox-volume-slider {
        width: 100%;
        accent-color: #d6bd80;
        cursor: pointer;
    }
    .equinox-life-row {
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: repeat(2, minmax(108px, 1fr));
        gap: 132px;
        width: min(520px, calc(100% - 42px));
        pointer-events: none;
        z-index: 2;
    }
    .equinox-life-panel {
        position: relative;
        min-height: 66px;
        padding: 10px 14px 9px;
        border-radius: 16px;
        border: 1px solid rgba(231, 215, 178, 0.22);
        background: linear-gradient(180deg, rgba(16, 17, 19, 0.9), rgba(6, 7, 8, 0.92));
        box-shadow: 0 14px 26px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        text-align: center;
    }
    .equinox-win-marks {
        position: absolute;
        left: 50%;
        top: -35px;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-height: 20px;
        margin-bottom: 0;
        z-index: 3;
    }
    .equinox-win-mark {
        position: relative;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: 1px solid rgba(239, 229, 205, 0.18);
        background: center/cover no-repeat url('boardgame/equinox/taegeuk-mark.webp');
        opacity: 0.22;
        filter: grayscale(1) brightness(0.78);
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.32);
    }
    .equinox-win-mark::after {
        content: "";
        position: absolute;
        inset: -7px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 244, 210, 0.72), rgba(255, 244, 210, 0.18) 38%, transparent 70%);
        opacity: 0;
        transform: scale(0.62);
        pointer-events: none;
    }
    .equinox-win-mark.is-player,
    .equinox-win-mark.is-com,
    .equinox-win-mark.is-draw {
        opacity: 1;
        filter: none;
    }
    .equinox-win-mark.is-player {
        border-color: rgba(255, 247, 225, 0.74);
        box-shadow: 0 0 10px rgba(255, 238, 196, 0.36), 0 2px 7px rgba(0, 0, 0, 0.32);
    }
    .equinox-win-mark.is-com {
        border-color: rgba(216, 183, 124, 0.72);
        box-shadow: 0 0 10px rgba(255, 238, 196, 0.36), 0 2px 7px rgba(0, 0, 0, 0.32);
    }
    .equinox-win-mark.is-draw {
        border-color: rgba(197, 184, 155, 0.62);
        opacity: 0.62;
    }
    .equinox-win-mark.is-burst {
        animation: equinox-win-mark-spin-burst 0.82s cubic-bezier(0.18, 0.72, 0.18, 1) both;
    }
    .equinox-win-mark.is-burst::after {
        animation: equinox-win-mark-flare 0.82s ease-out both;
    }
    @keyframes equinox-win-mark-spin-burst {
        0% {
            transform: rotate(-120deg) scale(0.35);
            opacity: 0;
        }
        42% {
            transform: rotate(250deg) scale(1.42);
            opacity: 1;
        }
        68% {
            transform: rotate(340deg) scale(0.92);
        }
        100% {
            transform: rotate(360deg) scale(1);
        }
    }
    @keyframes equinox-win-mark-flare {
        0% {
            opacity: 0;
            transform: scale(0.5);
        }
        36% {
            opacity: 0.95;
            transform: scale(1.35);
        }
        100% {
            opacity: 0;
            transform: scale(2.1);
        }
    }
    .equinox-life-label {
        display: block;
        color: #d6bd80;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.08em;
    }
    .equinox-life-value {
        display: block;
        margin-top: 8px;
        color: #fff8eb;
        font-size: 30px;
        font-weight: 900;
        line-height: 1;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.44);
    }
    .equinox-entry-buttons {
        position: absolute;
        left: 50%;
        bottom: 156px;
        z-index: 5;
        width: min(585px, calc(100% - 50px));
        display: flex;
        justify-content: space-between;
        transform: translateX(-50%);
        pointer-events: none;
    }
    .equinox-entry-btn {
        min-width: 86px;
        min-height: 30px;
        padding: 0 16px;
        border-radius: 999px;
        border: 1px solid rgba(224, 202, 154, 0.44);
        background: linear-gradient(180deg, rgba(27, 28, 31, 0.94), rgba(7, 8, 10, 0.96));
        color: #f2dfb4;
        font-family: inherit;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.06em;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        cursor: pointer;
        pointer-events: auto;
    }
    .equinox-entry-btn.is-player {
        border-color: rgba(245, 239, 222, 0.48);
    }
    .equinox-entry-btn.is-com {
        border-color: rgba(214, 189, 128, 0.58);
    }
    .equinox-board {
        position: relative;
        min-height: 620px;
        border-radius: 18px;
        overflow: hidden;
        background: center/cover no-repeat url('boardgame/equinox/equinox background.webp');
        border: 1px solid rgba(238, 229, 210, 0.12);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 30px rgba(0, 0, 0, 0.25);
    }
    .equinox-info-panel {
        position: absolute;
        top: 53%;
        width: 128px;
        min-height: 178px;
        transform: translateY(-50%);
        padding: 12px;
        border-radius: 14px;
        border: 1px solid rgba(236, 225, 198, 0.18);
        background: rgba(12, 13, 15, 0.72);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
        backdrop-filter: blur(6px);
        text-align: center;
    }
    .equinox-info-panel.is-player {
        left: 22px;
    }
    .equinox-info-panel.is-com {
        right: 22px;
    }
    .equinox-info-label {
        color: #d6bd80;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.06em;
    }
    .equinox-info-name {
        margin-top: 7px;
        padding-bottom: 4px;
        border-bottom: 1px solid rgba(214, 189, 128, 0.48);
        color: #fff8eb;
        font-size: 12px;
        font-weight: 900;
        line-height: 1.35;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    .equinox-stat-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin-top: 10px;
    }
    .equinox-stat {
        padding: 7px 6px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
        text-align: center;
    }
    .equinox-stat.is-positive {
        background: rgba(255, 255, 255, 0.94);
        color: #111;
    }
    .equinox-stat.is-negative {
        background: rgba(255, 255, 255, 0.08);
    }
    .equinox-stat span {
        display: block;
        color: #bfb8aa;
        font-size: 8px;
        font-weight: 900;
    }
    .equinox-stat.is-positive span {
        color: #1d1d1d;
    }
    .equinox-stat strong {
        display: block;
        margin-top: 3px;
        color: #ffffff;
        font-size: 17px;
        font-weight: 900;
    }
    .equinox-stat.is-positive strong {
        color: #111;
    }
    .equinox-info-code {
        margin-top: 3px;
        color: #d6bd80;
        font-size: 9px;
        font-weight: 900;
        text-align: center;
    }
    .equinox-field-card {
        position: absolute;
        top: 48%;
        width: 80px;
        aspect-ratio: 10 / 16;
        transform: translateY(-50%);
        border: 0;
        border-radius: 14px;
        background: center/contain no-repeat url('boardgame/equinox/back.webp');
        filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.34));
        transition: transform 1.2s cubic-bezier(0.12, 0.76, 0.18, 1);
    }
    .equinox-field-card.is-player {
        left: 29.5%;
    }
    .equinox-field-card.is-com {
        right: 29.5%;
    }
    .equinox-field-card.is-empty {
        opacity: 0.32;
        filter: grayscale(1) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.22));
    }
    .equinox-field-card.is-spinning {
        animation: equinox-spin 0.6s linear infinite;
    }
    .equinox-card-state {
        position: absolute;
        top: calc(48% + 92px);
        min-width: 72px;
        padding: 7px 10px;
        border-radius: 999px;
        border: 1px solid rgba(238, 225, 196, 0.24);
        background: rgba(9, 10, 12, 0.86);
        color: #f3dfb6;
        font-size: 11px;
        font-weight: 900;
        text-align: center;
    }
    .equinox-card-state.is-player {
        left: 27.5%;
        transform: translateX(calc(-50% + 56px));
    }
    .equinox-card-state.is-com {
        right: 27%;
        transform: translateX(calc(50% - 56px));
    }
    @keyframes equinox-spin {
        to { transform: translateY(-50%) rotate(360deg); }
    }
        .equinox-impact-burst {
        position: absolute;
        left: 50%;
        top: 48%;
        width: 1px;
        height: 1px;
        pointer-events: none;
        z-index: 5;
        filter: drop-shadow(0 0 10px rgba(230, 196, 119, 0.75));
    }
    .equinox-impact-shard {
        position: absolute;
        left: 50%;
        top: 50%;
        width: var(--w, 36px);
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, rgba(255, 244, 211, 0.96), rgba(215, 165, 80, 0.98), transparent);
        opacity: 0;
        transform-origin: left center;
        animation: equinox-impact-shard 0.82s ease-out forwards;
    }
    @keyframes equinox-impact-shard {
        0% {
            opacity: 0;
            transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(0) scaleX(0.25);
        }
        16% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(var(--dist, 72px)) scaleX(1);
        }
    }.equinox-center-controls {
        position: absolute;
        left: 50%;
        bottom: 94px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .equinox-spin-btn {
        min-width: 132px;
        min-height: 44px;
        border: 1px solid rgba(239, 219, 174, 0.52);
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(244, 234, 210, 0.96), rgba(190, 167, 118, 0.98));
        color: #161616;
        font-family: inherit;
        font-size: 12px;
        font-weight: 900;
        cursor: pointer;
    }
    .equinox-spin-btn:disabled {
        opacity: 0.48;
        cursor: default;
    }
    .equinox-message {
        display: none;
        min-height: 22px;
        color: #f2e8d7;
        font-size: 11px;
        font-weight: 800;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    }
    .equinox-hand-panel {
        margin-top: 14px;
        padding: 14px;
        border-radius: 16px;
        border: 1px solid rgba(231, 215, 178, 0.12);
        background: rgba(11, 12, 15, 0.84);
    }
    .equinox-hand-title {
        width: fit-content;
        min-width: 148px;
        margin: 0 auto 12px;
        padding: 6px 18px;
        border-radius: 999px;
        border: 1px solid rgba(231, 215, 178, 0.14);
        background: rgba(15, 16, 18, 0.78);
        color: #efe7d8;
        font-size: 13px;
        font-weight: 900;
        line-height: 1;
        text-align: center;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }
    .equinox-hand-row {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
    }
    .equinox-hand-card {
        position: relative;
        width: 100%;
        aspect-ratio: 10 / 16;
        min-height: 0;
        padding: 0;
        border: 1px solid rgba(231, 215, 178, 0.16);
        border-radius: 10px;
        background-color: transparent;
        background-image: url('boardgame/equinox/equinox.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        color: #efe7d8;
        font-family: inherit;
        cursor: pointer;
        overflow: hidden;
        filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.22));
    }
    .equinox-hand-card:disabled {
        opacity: 0.4;
        cursor: default;
    }
    .equinox-hand-card.is-selected {
        border-color: rgba(239, 219, 174, 0.76);
        box-shadow: 0 0 0 2px rgba(239, 219, 174, 0.18);
    }
    .equinox-hand-card-art {
        position: absolute;
        left: 15%;
        top: 30%;
        width: 70%;
        height: 34%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }
    .equinox-hand-card-art img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
    }
    .equinox-hand-card-name {
        position: absolute;
        left: 10%;
        top: 16%;
        width: 80%;
        height: 12%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        color: #000;
        font-size: 8px;
        font-weight: 900;
        line-height: 1.15;
        text-align: center;
        text-shadow: none;
        word-break: keep-all;
        overflow-wrap: anywhere;
        overflow: hidden;
    }
    .equinox-hand-card-code {
        position: absolute;
        left: 10%;
        bottom: 12%;
        width: 80%;
        min-height: 12%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f7f2e8;
        font-size: 11px;
        font-weight: 900;
        text-align: center;
        line-height: 1.15;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
        overflow-wrap: anywhere;
    }
    .equinox-result-overlay {
        position: absolute;
        inset: 0;
        z-index: 8;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: 26px 20px 0;
        background: transparent;
        pointer-events: none;
    }
    .equinox-result-overlay.is-open {
        display: flex;
    }
    .equinox-result-card {
        width: min(580px, calc(100% - 48px));
        padding: 28px 28px 24px;
        border-radius: 16px;
        border: 1px solid rgba(224, 202, 154, 0.32);
        background: linear-gradient(180deg, rgba(28, 28, 31, 0.98), rgba(12, 12, 14, 0.98));
        color: #efe7d8;
        text-align: center;
        box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42);
        pointer-events: auto;
    }
    .equinox-result-title {
        color: #f2dfb4;
        font-size: 20px;
        font-weight: 900;
    }
    .equinox-result-copy {
        margin: 12px auto 18px;
        color: #ddd7ca;
        font-size: 13px;
        line-height: 1.6;
    }
    .equinox-result-actions {
        display: flex;
        justify-content: center;
        gap: 8px;
    }
    .equinox-result-actions button {
        min-width: 110px;
        min-height: 38px;
        border-radius: 999px;
        border: 1px solid rgba(224, 202, 154, 0.42);
        background: rgba(255, 255, 255, 0.08);
        color: #f2dfb4;
        font-family: inherit;
        font-size: 11px;
        font-weight: 900;
        cursor: pointer;
    }
    .equinox-result-actions button.is-primary {
        background: linear-gradient(180deg, rgba(244, 234, 210, 0.96), rgba(190, 167, 118, 0.98));
        color: #161616;
    }
    .equinox-entry-overlay {
        position: fixed;
        inset: 0;
        z-index: 4100;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: rgba(5, 6, 8, 0.74);
        backdrop-filter: blur(8px);
    }
    .equinox-entry-overlay.is-open {
        display: flex;
    }
    .equinox-entry-card {
        width: min(760px, calc(100vw - 32px));
        max-height: min(88vh, 780px);
        overflow: auto;
        padding: 22px;
        border-radius: 18px;
        border: 1px solid rgba(224, 202, 154, 0.32);
        background: linear-gradient(180deg, rgba(23, 23, 26, 0.98), rgba(9, 10, 12, 0.98));
        color: #efe7d8;
        box-shadow: 0 24px 54px rgba(0, 0, 0, 0.46);
        text-align: center;
    }
    .equinox-entry-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
    }
    .equinox-entry-title {
        color: #f2dfb4;
        font-size: 20px;
        font-weight: 900;
        letter-spacing: 0.04em;
    }
    .equinox-entry-close {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid rgba(224, 202, 154, 0.34);
        background: rgba(255, 255, 255, 0.08);
        color: #f2dfb4;
        font-family: inherit;
        font-size: 18px;
        font-weight: 900;
        cursor: pointer;
    }
    .equinox-entry-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
    }
    .equinox-entry-mini-card {
        position: relative;
        min-width: 0;
        aspect-ratio: 10 / 16;
        padding: 0;
        border-radius: 10px;
        border: 1px solid rgba(224, 202, 154, 0.22);
        background-color: transparent;
        background-image: url('boardgame/equinox/equinox.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        color: #efe7d8;
        overflow: hidden;
        filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.28));
    }
    .equinox-entry-mini-card.is-active {
        border-color: rgba(246, 223, 172, 0.74);
        box-shadow: 0 0 0 2px rgba(246, 223, 172, 0.18);
    }
    .equinox-entry-mini-name {
        position: absolute;
        left: 10%;
        top: 14.5%;
        width: 80%;
        height: 12%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        color: #000;
        font-size: 9px;
        font-weight: 900;
        line-height: 1.15;
        text-align: center;
        word-break: keep-all;
        overflow-wrap: anywhere;
        overflow: hidden;
    }
    .equinox-entry-mini-art {
        position: absolute;
        left: 15%;
        top: 30%;
        width: 70%;
        height: 34%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }
    .equinox-entry-mini-art img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
    }
    .equinox-entry-mini-code {
        position: absolute;
        left: 10%;
        bottom: 12%;
        width: 80%;
        min-height: 12%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f7f2e8;
        font-size: 12px;
        font-weight: 900;
        line-height: 1.15;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
        overflow-wrap: anywhere;
    }
    .equinox-entry-group-break {
        grid-column: 1 / -1;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(224, 202, 154, 0.34), transparent);
    }
    @media (max-width: 768px) {
        #boardgame-equinox-play-section[style*="display: block"] {
            display: flex !important;
            justify-content: center;
            overflow-x: hidden;
        }
        #boardgame-equinox-play-section .equinox-game-shell {
            --equinox-mobile-scale: 0.70;
            --equinox-mobile-base-width: 760px;
            flex: 0 0 calc(var(--equinox-mobile-base-width) * var(--equinox-mobile-scale));
            width: var(--equinox-mobile-base-width);
            max-width: none;
            margin-left: 0;
            margin-right: 0;
            transform: scale(var(--equinox-mobile-scale));
            transform-origin: top center;
        }
        #boardgame-equinox-play-section .equinox-statusbar {
            margin-bottom: 8px;
        }
        #boardgame-equinox-play-section .equinox-status-pill {
            min-width: 118px;
            padding: 6px 14px;
            border-radius: 15px;
            font-size: 14px;
        }
        #boardgame-equinox-play-section .equinox-status-pill span + span {
            margin-top: 2px;
        }
        #boardgame-equinox-play-section .equinox-field-card {
            left: auto;
            right: auto;
            width: 40px;
        }
        #boardgame-equinox-play-section .equinox-field-card.is-player {
            left: 38%;
        }
        #boardgame-equinox-play-section .equinox-field-card.is-com {
            right: 38%;
        }
        #boardgame-equinox-play-section .equinox-card-state {
            top: calc(48% + 48px);
            min-width: 52px;
            padding: 5px 8px;
            font-size: 9px;
        }
        #boardgame-equinox-play-section .equinox-card-state.is-player {
            left: 38%;
            transform: translateX(calc(-50% + 24px));
        }
        #boardgame-equinox-play-section .equinox-card-state.is-com {
            right: 38%;
            transform: translateX(calc(50% - 24px));
        }
        #boardgame-equinox-play-section .equinox-win-marks {
            gap: 4px;
            top: -29px;
            min-height: 18px;
            margin-bottom: 0;
        }
        #boardgame-equinox-play-section .equinox-win-mark {
            width: 17px;
            height: 17px;
        }
        #boardgame-equinox-play-section .equinox-entry-buttons {
            bottom: 142px;
            width: min(470px, calc(100% - 110px));
        }
        #boardgame-equinox-play-section .equinox-entry-btn {
            min-width: 68px;
            min-height: 26px;
            padding: 0 10px;
            font-size: 8px;
        }
        #boardgame-equinox-play-section .equinox-hand-title {
            min-width: 132px;
            padding: 5px 14px;
            font-size: 12px;
        }
        #boardgame-equinox-play-section .equinox-hand-card-name {
            font-size: 6px;
        }
        .equinox-entry-card {
            width: min(520px, calc(100vw - 24px));
            padding: 16px;
        }
        .equinox-entry-grid {
            gap: 8px;
        }
        .equinox-entry-mini-name {
            font-size: 6px;
        }
        .equinox-entry-mini-code {
            font-size: 8px;
        }
    }
    .baseball-setup-title {
        display: block;
        margin-bottom: 10px;
        color: #536172;
        font-size: 15px;
        letter-spacing: 0.04em;
    }
    .baseball-team-list {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
        align-items: stretch;
    }
    .baseball-team-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 118px;
        padding: 16px 12px;
        color: #546272;
        font-family: inherit;
        font-size: 12px;
        font-weight: 700;
        background: linear-gradient(180deg, rgba(252, 253, 255, 0.96), rgba(229, 234, 241, 0.88));
        border: 1px solid rgba(157, 171, 187, 0.52);
        border-radius: 14px;
        cursor: pointer;
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }
    .baseball-team-btn img {
        width: 58px;
        height: 58px;
        object-fit: contain;
        display: block;
    }
    .baseball-team-btn.is-active {
        background: linear-gradient(180deg, rgba(143, 160, 184, 0.98), rgba(103, 121, 145, 0.94));
        color: #fff;
        border-color: rgba(96, 114, 138, 0.9);
        box-shadow: 0 10px 18px rgba(80, 97, 122, 0.2);
        transform: translateY(-1px);
    }
    .baseball-team-note,
    .baseball-setup-summary {
        color: #637181;
        font-size: 12px;
        line-height: 1.7;
    }
    .baseball-team-panel {
        border: 1px solid rgba(155, 166, 180, 0.34);
        background: linear-gradient(180deg, rgba(26, 30, 36, 0.98), rgba(17, 20, 25, 0.98));
        box-shadow: 0 14px 28px rgba(20, 24, 30, 0.22);
    }
    .baseball-team-panel .baseball-setup-title {
        color: #d6dde6;
    }
    .baseball-team-panel .baseball-team-btn {
        color: #d1d8e2;
        background: linear-gradient(180deg, rgba(49, 56, 66, 0.94), rgba(31, 37, 45, 0.94));
        border: 1px solid rgba(136, 149, 166, 0.46);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .baseball-team-panel .baseball-team-btn.is-active {
        background: linear-gradient(180deg, rgba(186, 196, 210, 0.98), rgba(132, 146, 164, 0.94));
        color: #18202a;
        border-color: rgba(255, 255, 255, 0.98);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.36), 0 10px 18px rgba(86, 98, 114, 0.24);
    }
    .baseball-team-panel .baseball-team-note {
        color: #bcc6d2;
    }
    .baseball-cleanup-panel {
        border: 1px solid rgba(155, 166, 180, 0.34);
        background: linear-gradient(180deg, rgba(26, 30, 36, 0.98), rgba(17, 20, 25, 0.98));
        box-shadow: 0 14px 28px rgba(20, 24, 30, 0.22);
    }
    .baseball-cleanup-panel .baseball-setup-title {
        color: #d6dde6;
    }
    .baseball-cleanup-panel .baseball-order-btn {
        color: #d1d8e2;
        background: linear-gradient(180deg, rgba(49, 56, 66, 0.94), rgba(31, 37, 45, 0.94));
        border-color: rgba(136, 149, 166, 0.46);
    }
    .baseball-cleanup-panel .baseball-order-btn.is-active {
        background: linear-gradient(180deg, rgba(186, 196, 210, 0.98), rgba(132, 146, 164, 0.94));
        color: #18202a;
        border-color: rgba(175, 188, 204, 0.92);
    }
    .baseball-setup-summary {
        padding: 10px 14px;
        border: 1px solid rgba(155, 166, 180, 0.28);
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(26, 30, 36, 0.92), rgba(17, 20, 25, 0.94));
        box-shadow: 0 10px 22px rgba(20, 24, 30, 0.18);
        color: #bcc6d2;
    }
    .baseball-team-note {
        margin-top: 14px;
        text-align: center;
    }
    .baseball-cleanup-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 12px;
        text-align: center;
    }
    .baseball-order-buttons {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: center;
    }
    .baseball-order-btn {
        min-width: 68px;
        padding: 8px 10px;
        color: #735948;
        font-family: inherit;
        font-size: 12px;
        font-weight: 800;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(183, 157, 131, 0.52);
        border-radius: 999px;
        cursor: pointer;
        transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }
    .baseball-order-btn.is-active {
        background: linear-gradient(180deg, rgba(68, 112, 186, 0.96), rgba(47, 80, 140, 0.96));
        border-color: rgba(47, 80, 140, 0.9);
        color: #fff;
        transform: translateY(-1px);
    }
    .baseball-cleanup-cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        align-items: start;
        justify-items: center;
    }
    .baseball-cleanup-entry {
        width: 100%;
        max-width: 178px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .baseball-cleanup-card {
        position: relative;
        width: 100%;
        max-width: 168px;
        margin: 0;
        aspect-ratio: 10 / 16;
        border: none;
        border-radius: 14px;
        background-color: transparent;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        overflow: hidden;
        box-shadow: 0 14px 24px rgba(30, 23, 16, 0.14);
    }
    .baseball-cleanup-group-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        width: 100%;
        max-width: 154px;
    }
    .baseball-cleanup-group-btn {
        min-width: 0;
        height: 30px;
        padding: 0;
        border: 1px solid rgba(183, 157, 131, 0.56);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.9);
        color: #735948;
        font-family: inherit;
        font-size: 12px;
        font-weight: 900;
        cursor: pointer;
        transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }
    .baseball-cleanup-group-btn.is-active {
        background: linear-gradient(180deg, rgba(255, 189, 74, 0.96), rgba(215, 119, 26, 0.96));
        border-color: rgba(197, 105, 23, 0.82);
        color: #fff;
        transform: translateY(-1px);
    }
    .baseball-cleanup-group-label {
        min-height: 18px;
        color: #bcc6d2;
        font-size: 11px;
        font-weight: 900;
        text-align: center;
    }
    .baseball-cleanup-slot {
        display: none;
    }
    .baseball-cleanup-art {
        position: absolute;
        left: 15%;
        top: 32%;
        width: 70%;
        height: 31%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }
    .baseball-cleanup-art img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }
    .baseball-cleanup-name,
    .baseball-cleanup-code {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 8px rgba(0, 0, 0, 0.28);
        overflow: hidden;
    }
    .baseball-cleanup-name {
        left: 10%;
        top: 11%;
        width: 76%;
        height: 16%;
        padding: 0 4px;
        font-size: 9px;
        line-height: 1.2;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    .baseball-cleanup-name,
    .baseball-play-name,
    .baseball-lineup-name {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-overflow: "···";
        word-break: keep-all;
        overflow-wrap: normal;
    }
    .baseball-cleanup-code {
        left: 16%;
        bottom: 17%;
        width: 68%;
        height: 8.5%;
        font-size: 24px;
        font-weight: 900;
        letter-spacing: 0.04em;
    }
    .baseball-setup-summary {
        margin-top: 18px;
        text-align: center;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }
    .baseball-setup-actions {
        gap: 8px;
        flex-wrap: nowrap;
        justify-content: center;
    }
    .baseball-start-btn {
        min-width: 156px;
    }
    .baseball-difficulty-overlay {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(7, 10, 15, 0.66);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 1300;
    }
    .baseball-difficulty-card {
        position: relative;
        width: min(360px, calc(100vw - 36px));
        padding: 62px 24px 22px;
        border-radius: 16px;
        border: 1px solid rgba(176, 188, 204, 0.22);
        background: linear-gradient(180deg, rgba(21, 25, 31, 0.98), rgba(10, 13, 18, 0.98));
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
        text-align: center;
        color: #eef3fa;
    }
    .baseball-innings-toggle {
        position: absolute;
        top: 14px;
        right: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 6px 8px;
        border-radius: 999px;
        border: 1px solid rgba(176, 188, 204, 0.24);
        background: rgba(10, 13, 18, 0.72);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
        color: #eaf0f8;
        line-height: 1;
        white-space: nowrap;
        z-index: 2;
    }
    .baseball-innings-toggle-label,
    .baseball-innings-toggle-value {
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.02em;
    }
    .baseball-innings-toggle-value {
        min-width: 20px;
        text-align: left;
        color: #d9e2ed;
    }
    .baseball-innings-toggle-btn {
        position: relative;
        width: 44px;
        height: 23px;
        padding: 0;
        border: 1px solid rgba(176, 188, 204, 0.32);
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(42, 48, 58, 0.95), rgba(24, 29, 37, 0.98));
        cursor: pointer;
        transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    }
    .baseball-innings-toggle-btn::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: #eef3fa;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
        transition: transform 0.18s ease;
    }
    .baseball-innings-toggle-btn.is-on {
        border-color: rgba(115, 196, 255, 0.58);
        background: linear-gradient(180deg, rgba(44, 114, 178, 0.95), rgba(23, 66, 117, 0.98));
        box-shadow: 0 0 12px rgba(71, 155, 255, 0.24);
    }
    .baseball-innings-toggle-btn.is-on::after {
        transform: translateX(20px);
    }
    .baseball-difficulty-title {
        margin: 0 0 10px;
        font-size: 24px;
        letter-spacing: 0.04em;
    }
    .baseball-difficulty-copy {
        margin: 0;
        color: #aab6c5;
        font-size: 12px;
        line-height: 1.7;
    }
    .baseball-difficulty-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin-top: 22px;
    }
    .baseball-difficulty-btn {
        min-width: 100px;
        padding: 12px 18px;
        border-radius: 16px;
        border: 1px solid rgba(191, 200, 212, 0.26);
        background: linear-gradient(180deg, rgba(44, 51, 60, 0.95), rgba(25, 31, 39, 0.98));
        color: #eef3fa;
        font-family: inherit;
        font-size: 12px;
        font-weight: 900;
        cursor: pointer;
        transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }
    .baseball-difficulty-btn:hover {
        transform: translateY(-1px);
        border-color: rgba(215, 224, 236, 0.42);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
    }
    .baseball-difficulty-btn.is-chaos {
        background: linear-gradient(180deg, rgba(83, 99, 121, 0.96), rgba(48, 60, 76, 0.98));
    }
    .baseball-difficulty-btn.is-extreme {
        border-color: rgba(238, 122, 94, 0.44);
        background: linear-gradient(180deg, rgba(92, 49, 45, 0.98), rgba(38, 21, 24, 0.98));
        color: #ffd8cc;
    }
    .baseball-difficulty-hint {
        margin-top: 16px;
        color: #8895a5;
        font-size: 12px;
        line-height: 1.6;
    }
    .baseball-guide-overlay {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(7, 10, 15, 0.72);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 1310;
    }
    #baseball-record-overlay {
        z-index: 25000;
    }
    .api-profile-overlay {
        position: fixed;
        inset: 0;
        z-index: 2400;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: rgba(6, 14, 24, 0.72);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    .api-profile-overlay.is-visible {
        display: flex;
    }
    .api-profile-overlay-card {
        width: min(92vw, 620px);
        max-height: min(88vh, 860px);
        overflow-x: hidden;
        overflow-y: auto;
        padding: 20px;
        border-radius: 20px;
        background: linear-gradient(180deg, rgba(248,250,253,0.98), rgba(235,242,250,0.98));
        box-shadow: 0 26px 48px rgba(0,0,0,0.28);
    }
    .api-profile-overlay-body {
        overflow-x: hidden;
    }
    .api-profile-overlay-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }
    .api-profile-overlay-title {
        color: #17314d;
        font-size: 18px;
    }
    .api-profile-overlay-close {
        min-width: 90px;
        padding: 10px 14px;
        color: #17314d;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        background: rgba(223, 232, 241, 0.92);
        border: 1px solid rgba(23, 49, 77, 0.12);
        border-radius: 999px;
    }
    .api-profile-overlay-empty {
        color: #607286;
        font-size: 13px;
        line-height: 1.75;
        text-align: center;
    }
    .api-profile-overlay-card .list-stamp.is-boutique {
        min-width: 58px;
        width: 58px;
        padding: 1px;
        margin: -1px;
        border-radius: 10px;
    }
    .api-profile-overlay-card .list-stamp-flip {
        width: 72px;
        height: 72px;
        transition: none;
    }
    .api-profile-overlay-card .list-stamp.is-flipped .list-stamp-flip {
        transform: none;
    }
    .api-profile-overlay-card .list-stamp-face {
        transition: opacity 0.18s ease;
    }
    .api-profile-overlay-card .list-stamp-face-front {
        opacity: 1;
    }
    .api-profile-overlay-card .list-stamp-face-back {
        transform: none;
        opacity: 0;
        pointer-events: none;
    }
    .api-profile-overlay-card .list-stamp.is-flipped .list-stamp-face-front {
        opacity: 0;
    }
    .api-profile-overlay-card .list-stamp.is-flipped .list-stamp-face-back {
        opacity: 1;
    }
    .appearance-preview-overlay {
        position: fixed;
        inset: 0;
        z-index: 2450;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: rgba(7, 10, 17, 0.74);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
    }
    .appearance-preview-overlay.is-visible {
        display: flex;
    }
    .appearance-preview-card {
        width: min(92vw, 560px);
        max-height: min(88vh, 860px);
        overflow: hidden auto;
        padding: 18px;
        color: #2d261f;
        border: 1px solid rgba(156, 132, 106, 0.34);
        border-radius: 22px;
        background:
            radial-gradient(circle at 50% 0%, rgba(255, 246, 228, 0.98), rgba(248, 240, 229, 0.96) 42%, rgba(235, 226, 215, 0.98) 100%);
        box-shadow: 0 28px 58px rgba(0, 0, 0, 0.36);
    }
    .appearance-preview-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }
    .appearance-preview-title {
        min-width: 0;
    }
    .appearance-preview-title span {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 4px 10px;
        color: #8a5c34;
        font-size: 11px;
        font-weight: 900;
        border: 1px solid rgba(170, 119, 66, 0.24);
        border-radius: 999px;
        background: rgba(255, 248, 236, 0.72);
    }
    .appearance-preview-title strong {
        display: block;
        margin-top: 7px;
        color: #2f261e;
        font-size: 20px;
        line-height: 1.2;
    }
    .appearance-preview-close {
        flex: 0 0 auto;
        min-width: 72px;
        min-height: 38px;
        padding: 9px 14px;
        color: #5b4635;
        font-size: 11px;
        font-weight: 900;
        font-family: inherit;
        border: 1px solid rgba(115, 88, 65, 0.18);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.68);
        cursor: pointer;
    }
    .appearance-preview-stage {
        position: relative;
        display: grid;
        place-items: center;
        min-height: 360px;
        padding: 18px;
        border: 1px solid rgba(125, 105, 83, 0.18);
        border-radius: 18px;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.72), rgba(239,233,226,0.78)),
            repeating-linear-gradient(135deg, rgba(133, 111, 91, 0.06) 0 1px, transparent 1px 14px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
    }
    .appearance-preview-image {
        display: none;
        width: min(78vw, 360px);
        height: min(58vh, 360px);
        object-fit: contain;
        image-rendering: auto;
    }
    .appearance-preview-image.is-loaded {
        display: block;
    }
    .appearance-preview-placeholder {
        display: grid;
        place-items: center;
        width: min(78vw, 320px);
        min-height: 260px;
        padding: 22px;
        color: #8b7b6b;
        text-align: center;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.55;
        border: 1px dashed rgba(128, 104, 83, 0.34);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.52);
    }
    .appearance-preview-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
    }
    .appearance-preview-part {
        min-width: 0;
        padding: 10px 12px;
        border: 1px solid rgba(128, 104, 83, 0.14);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.58);
    }
    .appearance-preview-part span {
        display: block;
        margin-bottom: 3px;
        color: #8a6a4f;
        font-size: 10px;
        font-weight: 900;
    }
    .appearance-preview-part strong {
        display: block;
        overflow: hidden;
        color: #342a21;
        font-size: 12px;
        font-weight: 900;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .appearance-preview-code {
        margin-top: 10px;
        color: #7d6b5b;
        font-size: 11px;
        font-weight: 800;
        text-align: center;
    }
    @media (max-width: 640px) {
        .appearance-preview-overlay {
            padding: 12px;
        }
        .appearance-preview-card {
            width: min(94vw, 420px);
            max-height: 86vh;
            padding: 14px;
            border-radius: 18px;
        }
        .appearance-preview-title strong {
            font-size: 17px;
        }
        .appearance-preview-stage {
            min-height: 300px;
            padding: 12px;
        }
        .appearance-preview-meta {
            grid-template-columns: 1fr;
        }
    }
    .baseball-guide-card {
        width: min(540px, calc(100vw - 36px));
        max-height: min(76vh, 760px);
        overflow-y: auto;
        padding: 20px 20px 18px;
        border-radius: 16px;
        border: 1px solid rgba(176, 188, 204, 0.22);
        background: linear-gradient(180deg, rgba(21, 25, 31, 0.98), rgba(10, 13, 18, 0.98));
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
        color: #eef3fa;
    }
    .baseball-guide-card h3 {
        margin: 0 0 10px;
        font-size: 22px;
        letter-spacing: 0.04em;
        text-align: center;
    }
    .baseball-guide-card p {
        margin: 0 0 14px;
        color: #aab6c5;
        font-size: 12px;
        line-height: 1.7;
        text-align: center;
    }
    .baseball-guide-section + .baseball-guide-section {
        margin-top: 14px;
    }
    .baseball-guide-section strong {
        display: block;
        margin-bottom: 5px;
        color: #ffffff;
        font-size: 12px;
        letter-spacing: 0.04em;
    }
    .baseball-guide-list {
        display: grid;
        gap: 4px;
        padding: 10px 12px;
        border-radius: 16px;
        border: 1px solid rgba(229, 235, 243, 0.08);
        background: rgba(255, 255, 255, 0.03);
        color: #dce4ee;
        font-size: 12px;
        line-height: 1.65;
    }
    .baseball-guide-actions {
        display: flex;
        justify-content: center;
        margin-top: 16px;
    }
    .baseball-guide-close-btn {
        min-width: 96px;
    }
    .baseball-record-card {
        width: min(640px, calc(100vw - 36px));
        transform: translateY(-130px);
    }
    .baseball-record-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 12px;
        border: 1px solid rgba(176, 188, 204, 0.3);
        border-radius: 6px;
        overflow: hidden;
    }
    .baseball-record-tabs button {
        min-width: 0;
        height: 36px;
        border: 0;
        background: rgba(255, 255, 255, 0.03);
        color: #aab6c5;
        font: inherit;
        font-size: 11px;
        cursor: pointer;
    }
    .baseball-record-tabs button + button { border-left: 1px solid rgba(176, 188, 204, 0.3); }
    .baseball-record-tabs button.is-active { background: #315f78; color: #fff; }
    .baseball-record-tabs button:focus-visible { outline: 2px solid #a9d8f3; outline-offset: -3px; }
    .baseball-record-close {
        position: absolute;
        top: 10px;
        right: 10px;
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid rgba(176, 188, 204, 0.3);
        border-radius: 8px;
        background: transparent;
        color: #eef3fa;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }
    .baseball-record-close:hover,
    .baseball-record-close:focus-visible {
        background: rgba(255, 255, 255, 0.1);
        outline: 2px solid #aab6c5;
        outline-offset: 2px;
    }
    .baseball-record-grid {
        display: grid;
        grid-template-columns: minmax(110px, 1fr) minmax(96px, 1fr) minmax(96px, 1fr);
        gap: 8px 10px;
        padding: 14px 16px;
        border-radius: 16px;
        border: 1px solid rgba(229, 235, 243, 0.08);
        background: rgba(255, 255, 255, 0.03);
        color: #dce4ee;
        font-size: 9px;
        line-height: 1.6;
    }
    .baseball-record-grid + .baseball-record-grid {
        margin-top: 12px;
    }
    .baseball-record-head {
        color: #ffffff;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-align: center;
    }
    .baseball-record-label {
        color: #aab6c5;
        font-weight: 700;
    }
    .baseball-record-value {
        color: #f5f8fc;
        font-weight: 800;
        text-align: center;
    }
    .baseball-position-list { display: grid; }
    .baseball-position-row { padding: 10px 0 12px; border-bottom: 1px solid rgba(176, 188, 204, 0.22); }
    .baseball-position-row:first-child { padding-top: 0; }
    .baseball-position-index { margin-bottom: 8px; color: #b8c9d8; font-size: 10px; font-weight: 800; }
    .baseball-position-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .baseball-position-team { min-width: 0; }
    .baseball-position-team + .baseball-position-team { padding-left: 12px; border-left: 1px solid rgba(176, 188, 204, 0.22); }
    .baseball-position-team.is-mvp { position: relative; outline: 1px solid #d7a63d; outline-offset: 4px; border-radius: 2px; background: rgba(215, 166, 61, 0.09); }
    .baseball-position-mvp { position: absolute; top: -12px; right: 0; padding: 0 3px; background: #171a20; color: #f7d783; font-size: 10px; font-weight: 900; line-height: 1.2; }
    .baseball-position-identity { display: flex; align-items: center; gap: 7px; min-width: 0; margin-bottom: 9px; }
    .baseball-position-identity img { width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; image-rendering: pixelated; }
    .baseball-position-identity div { min-width: 0; }
    .baseball-position-identity span { display: block; color: #8fbacf; font-size: 9px; font-weight: 800; }
    .baseball-position-identity strong { display: block; overflow: hidden; color: #f5f8fc; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .baseball-position-name { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
    .baseball-position-name strong { min-width: 0; }
    .baseball-position-name small { flex: 0 0 auto; color: #aeb9c5; font-size: 9px; font-weight: 700; }
    .baseball-position-counts, .baseball-position-rates { display: grid; gap: 4px 6px; font-size: 10px; }
    .baseball-position-counts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .baseball-position-rates { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(176, 188, 204, 0.14); }
    .baseball-position-counts span, .baseball-position-rates span { display: flex; justify-content: space-between; gap: 3px; min-width: 0; color: #aab6c5; }
    .baseball-position-counts span { justify-content: flex-start; gap: 0; white-space: nowrap; }
    .baseball-position-counts b, .baseball-position-rates b { color: #fff; }
    .baseball-game-shell {
        background: linear-gradient(180deg, rgba(18, 21, 26, 0.98), rgba(9, 11, 15, 0.98));
        border: 1px solid rgba(177, 189, 204, 0.18);
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
        color: #e7edf5;
    }
    .baseball-game-topbar {
        display: grid;
        grid-template-columns: auto auto auto;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }
    .baseball-topbar-tools {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        justify-self: end;
    }
    .baseball-score-pill {
        padding: 10px 14px;
        border-radius: 16px;
        border: 1px solid rgba(229, 235, 243, 0.12);
        background: linear-gradient(180deg, rgba(25, 29, 36, 0.96), rgba(13, 16, 22, 0.98));
        color: #eef3fa;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.02em;
    }
    .baseball-game-topbar .home-exit-btn {
        position: static;
        top: auto;
        right: auto;
        margin: 0;
        min-width: 98px;
        height: 40px;
        padding: 0 16px;
        justify-self: end;
        flex-shrink: 0;
    }
    .baseball-guide-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 16px;
        border: 1px solid rgba(234, 241, 248, 0.16);
        background: rgba(255, 255, 255, 0.04);
        color: #ffffff;
        font-family: inherit;
        font-size: 9px;
        font-weight: 900;
        line-height: 1;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
        transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    }
    .baseball-guide-btn:hover {
        transform: translateY(-1px);
        border-color: rgba(234, 241, 248, 0.28);
        background: rgba(255, 255, 255, 0.08);
    }
    .baseball-record-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 66px;
        height: 32px;
        padding: 0 10px;
        border-radius: 16px;
        border: 1px solid rgba(234, 241, 248, 0.16);
        background: rgba(255, 255, 255, 0.04);
        color: #f7fbff;
        font-family: inherit;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.05em;
        cursor: pointer;
        transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }
    .baseball-record-btn:hover {
        transform: translateY(-1px);
        border-color: rgba(234, 241, 248, 0.28);
        background: rgba(255, 255, 255, 0.08);
    }
    .baseball-game-guide {
        margin: 0 auto 16px;
        max-width: 680px;
        padding: 12px 16px;
        border-radius: 14px;
        border: 1px solid rgba(226, 233, 241, 0.1);
        background: linear-gradient(180deg, rgba(20, 24, 30, 0.94), rgba(10, 13, 18, 0.98));
        color: #d8e0ea;
        font-size: 9px;
        font-weight: 800;
        text-align: center;
        line-height: 1.6;
    }
    .baseball-main-layout {
        display: block;
    }
    .baseball-board-panel,
    .baseball-lineup-panel {
        padding: 14px;
        border-radius: 16px;
        border: 1px solid rgba(222, 230, 239, 0.1);
        background: linear-gradient(180deg, rgba(17, 20, 26, 0.95), rgba(10, 12, 17, 0.98));
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
    .baseball-board-panel {
        max-width: 860px;
        margin: 0;
    }
    .baseball-main-board {
        position: relative;
        min-height: 620px;
        --baseball-count-top: 100px;
        --baseball-count-top-full: 82px;
        border-radius: 16px;
        overflow: hidden;
        background: center/cover no-repeat url('boardgame/baseball/baseball background.webp');
        border: 1px solid rgba(232, 238, 245, 0.08);
    }
    .baseball-inning-scoreboard {
        position: absolute;
        top: -5px;
        left: 20px;
        right: auto;
        width: 150px;
        z-index: 4;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .baseball-inning-scoreboard-card {
        position: relative;
        width: 100%;
        aspect-ratio: 21 / 15;
        background: center/contain no-repeat url('boardgame/baseball/scoreboard.webp');
        filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.26));
    }
    .baseball-inning-scoreboard.is-full {
        top: -20px;
        left: 25px;
        width: 225px;
    }
    .baseball-inning-pitch-count {
        position: absolute;
        top: -5px;
        right: 20px;
        width: 90px;
        z-index: 4;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }
    .baseball-inning-pitch-count-head {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 62px;
        padding: 4px 8px;
        border-radius: 999px;
        border: 1px solid rgba(238, 244, 252, 0.14);
        background: linear-gradient(180deg, rgba(26, 32, 41, 0.96), rgba(15, 18, 24, 0.98));
        color: #f4f8fd;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.08em;
    }
    .baseball-inning-pitch-count-card {
        width: 100%;
        padding: 8px 10px;
        border-radius: 12px;
        border: 1px solid rgba(232, 238, 245, 0.12);
        background: linear-gradient(180deg, rgba(18, 23, 30, 0.96), rgba(10, 13, 18, 0.98));
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.24);
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .baseball-inning-pitch-count-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        color: #ffffff;
        font-size: 13px;
        font-weight: 900;
        line-height: 1;
    }
    .baseball-inning-pitch-count-row strong.is-warn {
        color: #f4d35e;
    }
    .baseball-inning-pitch-count-row strong.is-alert {
        color: #ff9f43;
    }
    .baseball-inning-pitch-count-row strong.is-danger {
        color: #ff5f5f;
    }
    .baseball-breaking-caution {
        width: 68px;
        min-height: 52px;
        margin-top: 2px;
        padding: 5px;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        align-self: flex-end;
        border-radius: 11px;
        border: 1px solid rgba(76, 225, 95, 0.24);
        background: linear-gradient(180deg, rgba(13, 33, 22, 0.78), rgba(9, 15, 13, 0.94));
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 14px rgba(0,0,0,0.2);
    }
    .baseball-breaking-caution img {
        width: 40px;
        height: 40px;
        object-fit: contain;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.26));
    }
    .baseball-breaking-caution span {
        color: #80f28c;
        font-size: 5.5px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0;
        white-space: nowrap;
    }
    .baseball-breaking-caution.is-alert {
        border-color: rgba(231, 150, 55, 0.38);
        background: linear-gradient(180deg, rgba(55, 35, 15, 0.84), rgba(18, 13, 10, 0.96));
    }
    .baseball-breaking-caution.is-alert span {
        color: #f2a64b;
    }
    .baseball-breaking-caution.is-danger {
        border-color: rgba(238, 73, 88, 0.5);
        background: linear-gradient(180deg, rgba(60, 18, 24, 0.86), rgba(19, 9, 12, 0.98));
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 18px rgba(238, 73, 88, 0.18), 0 8px 16px rgba(0,0,0,0.24);
    }
    .baseball-breaking-caution.is-danger span {
        color: #ff6f7d;
    }
    .baseball-pitch-type-btn.is-locked,
    .baseball-pitch-type-btn:disabled.is-locked {
        opacity: 0.44;
        filter: saturate(0.55);
        cursor: not-allowed;
    }
    .baseball-extreme-entry-wrap {
        display: none;
        margin-top: 5px;
    }
    .baseball-extreme-entry-wrap.is-visible {
        display: block;
    }
    .baseball-extreme-entry-btn {
        width: 100%;
        min-height: 28px;
        padding: 6px 8px;
        border-radius: 999px;
        border: 1px solid rgba(238, 122, 94, 0.4);
        background: linear-gradient(180deg, rgba(92, 49, 45, 0.86), rgba(30, 18, 22, 0.94));
        color: #ffd8cc;
        font-family: inherit;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.08em;
        cursor: pointer;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
    }
    .baseball-extreme-entry-btn:disabled {
        opacity: 0.36;
        cursor: default;
        filter: saturate(0.55);
        box-shadow: none;
    }
    .baseball-entry-overlay {
        position: fixed;
        inset: 0;
        z-index: 10020;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: clamp(178px, 27vh, 278px) 22px 20px;
        background: rgba(5, 8, 12, 0.62);
        backdrop-filter: blur(5px);
    }
    .baseball-entry-overlay.is-open {
        display: flex;
    }
    .baseball-entry-panel {
        width: min(520px, calc(100vw - 28px));
        padding: 18px;
        border-radius: 18px;
        border: 1px solid rgba(238, 122, 94, 0.32);
        background: linear-gradient(180deg, rgba(20, 23, 30, 0.98), rgba(8, 10, 15, 0.99));
        box-shadow: 0 24px 54px rgba(0, 0, 0, 0.46);
        color: #eef3fa;
    }
    .baseball-entry-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }
    .baseball-entry-title {
        color: #ffd8cc;
        font-size: 22px;
        font-weight: 900;
        letter-spacing: 0.03em;
    }
    .baseball-entry-copy {
        display: block;
        margin-top: 2px;
        color: #9fa9b7;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.45;
    }
    .baseball-entry-close {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 50%;
        border: 1px solid rgba(235, 241, 248, 0.16);
        background: rgba(255, 255, 255, 0.06);
        color: #fff2ec;
        font-family: inherit;
        font-size: 18px;
        font-weight: 900;
        cursor: pointer;
    }
    .baseball-entry-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        align-items: start;
    }
    .baseball-entry-grid .baseball-lineup-entry {
        width: min(126px, 100%);
        justify-self: center;
    }
    .baseball-entry-grid .baseball-lineup-card .baseball-lineup-name {
        top: 11.5%;
        font-size: 8px;
        display: flex;
        word-break: keep-all;
        overflow-wrap: normal;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-overflow: "···";
    }
    .baseball-entry-grid .baseball-lineup-card .baseball-lineup-code {
        font-size: 20px;
    }
    .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-card {
        aspect-ratio: 31 / 17;
        background-image: url('boardgame/baseball/scoreboard full.webp');
    }
    .baseball-inning-scoreboard-head {
        position: absolute;
        left: 19%;
        top: 18%;
        width: 56%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr);
        gap: 4px;
        color: #d8dee6;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.36);
        z-index: 5;
    }
    .baseball-inning-scoreboard-head span:last-child {
        transform: translateX(7px);
    }
    .baseball-inning-scoreboard-grid {
        position: absolute;
        left: 19%;
        top: 32%;
        width: 56%;
        height: 50%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr);
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 4px;
        align-items: stretch;
    }
    .baseball-inning-scoreboard-grid .baseball-inning-scoreboard-cell:nth-child(4),
    .baseball-inning-scoreboard-grid .baseball-inning-scoreboard-cell:nth-child(8) {
        transform: translateX(7px);
    }
    .baseball-inning-scoreboard-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f4f7fb;
        font-size: 16px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    }
    .baseball-inning-scoreboard-rows {
        position: absolute;
        left: 11px;
        top: 28%;
        height: 56%;
        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        align-items: center;
        color: #dce4ee;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.06em;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    }
    .baseball-inning-scoreboard-rows img {
        width: 15px;
        height: 14px;
        object-fit: contain;
        display: block;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
    }
    .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-rows img {
        width: 12px;
        height: 12px;
    }
    .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-head {
        left: 9%;
        top: 29%;
        width: 82.5%;
        grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 1.9fr);
        font-size: 8px;
        letter-spacing: 0;
        gap: 1px;
        font-family: var(--main-font);
    }
    .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-head span:last-child {
        transform: translateX(2px);
    }
    .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-grid {
        left: 9.5%;
        top: 35%;
        width: 82%;
        height: 38%;
        grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 1.9fr);
        gap: 1px;
    }
    .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-grid .baseball-inning-scoreboard-cell:nth-child(10),
    .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-grid .baseball-inning-scoreboard-cell:nth-child(20) {
        transform: translateX(1.8px);
    }
    .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-grid .baseball-inning-scoreboard-cell:nth-child(-n+10) {
        transform: translateY(2px);
    }
    .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-grid .baseball-inning-scoreboard-cell:nth-child(10) {
        transform: translate(1.8px, 2px);
    }
    .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-grid .baseball-inning-scoreboard-cell:nth-child(20) {
        transform: translateX(1.8px);
    }
    .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-cell {
        font-size: 9px;
        letter-spacing: 0;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        font-family: var(--main-font);
    }
    .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-rows {
        left: 7.5px;
        top: 36%;
        height: 38%;
        font-size: 7px;
    }
    .baseball-count-hud {
        position: absolute;
        top: var(--baseball-count-top);
        left: 28px;
        display: flex;
        flex-direction: column;
        z-index: 3;
        padding: 6px 8px;
        border-radius: 13px;
        background: linear-gradient(180deg, rgba(31, 36, 44, 0.92), rgba(17, 20, 26, 0.98));
        border: 1px solid rgba(236, 241, 248, 0.1);
        box-shadow: 0 10px 18px rgba(0,0,0,0.18);
        gap: 3px;
    }
    .baseball-inning-scoreboard.is-full ~ .baseball-count-hud {
        top: var(--baseball-count-top-full);
    }
    .baseball-count-chip {
        min-width: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        border: 0;
        text-align: left;
        box-shadow: none;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .baseball-count-chip span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #aeb9c7;
        font-size: 9px;
        margin-bottom: 0;
        min-width: 9px;
        font-weight: 900;
    }
    .baseball-count-lights {
        display: flex;
        justify-content: flex-start;
        gap: 3px;
        flex-wrap: nowrap;
        min-height: 10px;
    }
    .baseball-count-light {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.18), rgba(255,255,255,0.06) 35%, rgba(10,12,16,0.92) 100%);
        border: 1px solid rgba(255,255,255,0.12);
        box-shadow: inset 0 2px 3px rgba(255,255,255,0.08), inset 0 -3px 4px rgba(0,0,0,0.35);
    }
    .baseball-count-light.is-on {
        border-color: rgba(255,255,255,0.24);
        box-shadow: 0 0 10px currentColor, inset 0 2px 3px rgba(255,255,255,0.24);
    }
    .baseball-count-light.is-ball.is-on {
        color: #6dff8b;
        background: radial-gradient(circle at 35% 35%, #d9ffe0 0%, #7dff9c 38%, #22b64c 100%);
    }
    .baseball-count-light.is-strike.is-on {
        color: #ffe26d;
        background: radial-gradient(circle at 35% 35%, #fff7d5 0%, #ffe57e 38%, #d4a51d 100%);
    }
    .baseball-count-light.is-out.is-on {
        color: #ff7c7c;
        background: radial-gradient(circle at 35% 35%, #ffd7d7 0%, #ff8d8d 38%, #cf3030 100%);
    }
    .baseball-event-popup {
        position: absolute;
        left: 50%;
        top: 116px;
        min-width: 220px;
        max-width: 420px;
        padding: 10px 14px;
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(18, 22, 28, 0.96), rgba(8, 11, 16, 0.98));
        border: 1px solid rgba(238, 243, 249, 0.12);
        box-shadow: 0 16px 30px rgba(0,0,0,0.28);
        color: #eaf0f7;
        font-size: 22px;
        font-weight: 900;
        text-align: center;
        transform: translateX(-50%) scale(0.82);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.24s ease, transform 0.24s ease;
        z-index: 6;
    }
    .baseball-event-popup.is-visible { opacity: 1; transform: translateX(-50%) scale(1); }
    .baseball-event-popup.is-hit { color: #7fffb6; }
    .baseball-event-popup.is-out { color: #ff8d8d; }
    .baseball-event-popup.is-foul { color: #ffd98d; }
    .baseball-event-popup.is-ball { color: #9fd7ff; }
    .baseball-event-popup.is-info { color: #d9e2ed; }
    .baseball-vs-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(8, 11, 16, 0.12);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
        z-index: 12;
    }
    .baseball-vs-overlay.is-visible {
        opacity: 1;
    }
    .baseball-vs-card {
        width: min(92vw, 300px);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        padding: 16px 18px;
        border-radius: 16px;
        border: 1px solid rgba(235, 241, 248, 0.16);
        background: linear-gradient(180deg, rgba(18, 22, 28, 0.96), rgba(10, 12, 18, 0.98));
        box-shadow: 0 18px 32px rgba(0, 0, 0, 0.28);
    }
    .baseball-vs-side {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        text-align: center;
    }
    .baseball-vs-role {
        color: #eef3fa;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.08em;
    }
    .baseball-vs-logo {
        width: 56px;
        height: 56px;
        object-fit: contain;
        display: block;
        filter: drop-shadow(0 8px 14px rgba(0,0,0,0.22));
    }
    .baseball-vs-side-label {
        color: #ffd79a;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.06em;
    }
    .baseball-vs-center {
        color: #f4f8fc;
        font-size: 22px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-shadow: 0 6px 12px rgba(0,0,0,0.24);
    }
    .baseball-caution-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle, rgba(255,255,255,0.08), rgba(12,14,18,0.03) 58%, rgba(12,14,18,0));
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.26s ease;
        z-index: 5;
    }
    .baseball-caution-overlay.is-visible { opacity: 1; }
    .baseball-caution-overlay img {
    width: min(15%, 90px);
    display: block;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.34));
    transform: translateY(-50px);
    }

    .baseball-center-stage {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        z-index: 2;
    }
    #baseball-current-card-slot {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .baseball-play-card,
    .baseball-lineup-card {
        position: relative;
        aspect-ratio: 10 / 16;
        border-radius: 14px;
        background-color: transparent;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        overflow: hidden;
        box-shadow: 0 12px 22px rgba(0,0,0,0.2);
    }
    .baseball-play-card {
        width: 120px;
        transform: translateY(80px);
    }
    .baseball-play-card-back,
    .baseball-lineup-card-back { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: contain; }
    .baseball-play-art,
    .baseball-lineup-art { position: absolute; left: 15%; top: 32%; width: 70%; height: 31%; display: flex; align-items: center; justify-content: center; }
    .baseball-play-art img,
    .baseball-lineup-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .baseball-play-name,
    .baseball-play-code,
    .baseball-lineup-name,
    .baseball-lineup-code { position: absolute; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 8px rgba(0,0,0,0.28); overflow: hidden; }
    .baseball-play-name,
    .baseball-lineup-name { left: 7%; top: 11%; width: 76%; height: 16%; padding: 0 4px; font-size: 8px; line-height: 1.15; word-break: keep-all; overflow-wrap: anywhere; }
    .baseball-play-code,
    .baseball-lineup-code { left: 16%; bottom: 16%; width: 68%; height: 8.5%; font-size: 22px; font-weight: 900; letter-spacing: 0.04em; }
    .baseball-base { position: absolute; width: 78px; height: 104px; display: flex; align-items: center; justify-content: center; z-index: 3; }
    .baseball-base-first { right: 85px; bottom: 280px; }
    .baseball-base-second { left: 50%; top: 100px; transform: translateX(-50%); }
    .baseball-base-third { left: 85px; bottom: 280px; }
    .baseball-home-burst { left: 50%; bottom: 58px; transform: translateX(-50%); width: 140px; height: 72px; }
    .baseball-runner-chip { width: 58px; height: 88px; background-position: center; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.24)); transition: opacity 0.38s ease, transform 0.38s ease; }
    .baseball-runner-chip.is-com { width: 58px; height: 88px; border-radius: 0; background-size: contain; }
    .baseball-runner-chip.is-scoring { opacity: 0.1; transform: translateY(-18px) scale(0.84); }
    .baseball-lineup-title { color: #eef2f8; font-size: 14px; font-weight: 900; letter-spacing: 0.04em; margin-bottom: 10px; }
    .baseball-lineup-row { display: flex; gap: 10px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; margin-bottom: 18px; align-items: flex-start; }
    .baseball-lineup-entry { width: 86px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .baseball-lineup-card { width: 100%; flex: 0 0 auto; border: 2px solid transparent; }
    .baseball-lineup-card.is-active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.18), 0 10px 20px rgba(0,0,0,0.22); }
    .baseball-lineup-card.is-back { border-color: rgba(255,255,255,0.08); }
    .baseball-lineup-slot { min-width: 24px; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 900; border-radius: 999px; background: rgba(11, 14, 19, 0.76); }
    .baseball-lineup-card .baseball-lineup-name { font-size: 7px; line-height: 1.1; }
    .baseball-lineup-card .baseball-lineup-code { font-size: 15px; }
    .baseball-pitch-type-strip {
        position: absolute;
        left: 50%;
        bottom: 55px;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 160px;
        min-height: 96px;
        z-index: 7;
    }
    .baseball-pitch-type-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    .baseball-pitch-type-row {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 8px;
    }
    .baseball-breaking-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    .baseball-pitch-type-btn {
        min-width: 104px;
        min-height: 40px;
        padding: 9px 14px;
        border-radius: 14px;
        border: 1px solid rgba(215, 223, 233, 0.18);
        background: linear-gradient(180deg, rgba(34, 39, 48, 0.94), rgba(18, 22, 28, 0.98));
        color: #eef3fa;
        font-family: inherit;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
    }
    .baseball-pitch-type-btn.is-active {
        border-color: rgba(255, 235, 190, 0.62);
        box-shadow: 0 0 0 1px rgba(255, 233, 169, 0.18), 0 10px 22px rgba(0, 0, 0, 0.24);
        background: linear-gradient(180deg, rgba(96, 108, 128, 0.96), rgba(49, 58, 74, 0.98));
    }
    .baseball-bunt-btn {
        border-color: rgba(255, 213, 150, 0.34);
        background: linear-gradient(180deg, rgba(105, 70, 44, 0.96), rgba(55, 34, 25, 0.98));
        color: #ffe7bc;
    }
    .baseball-bunt-btn.is-active {
        border-color: rgba(255, 227, 170, 0.82);
        background: linear-gradient(180deg, rgba(174, 105, 54, 0.98), rgba(104, 54, 34, 0.98));
        box-shadow: 0 0 0 1px rgba(255, 207, 126, 0.28), 0 10px 22px rgba(0, 0, 0, 0.26);
    }
    .baseball-pitch-type-btn:disabled {
        opacity: 0.42;
        cursor: default;
        transform: none;
        box-shadow: none;
    }
    .baseball-breaking-direction-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 24px;
    }
    .baseball-breaking-direction-btn {
        min-width: 46px;
        min-height: 24px;
        padding: 4px 8px;
        border-radius: 999px;
        border: 1px solid rgba(215, 223, 233, 0.16);
        background: rgba(12, 16, 22, 0.82);
        color: rgba(238, 243, 250, 0.86);
        font-family: inherit;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.02em;
        cursor: pointer;
        transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
    }
    .baseball-breaking-direction-btn.is-active {
        border-color: rgba(255, 235, 190, 0.62);
        background: linear-gradient(180deg, rgba(96, 108, 128, 0.96), rgba(49, 58, 74, 0.98));
        color: #fff4d5;
        box-shadow: 0 0 0 1px rgba(255, 233, 169, 0.16), 0 8px 18px rgba(0, 0, 0, 0.2);
    }
    .baseball-breaking-direction-btn:disabled {
        opacity: 0.42;
        cursor: default;
        box-shadow: none;
        transform: none;
    }
    .baseball-player-order-panel {
        max-width: 860px;
        margin: 16px auto 0;
    }
    .baseball-lineup-hidden {
        display: none !important;
    }
    .baseball-token-strip .joker-token-row { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
    .baseball-token-strip .joker-token-btn { min-height: 48px; }
    .baseball-token-strip .joker-token-btn:disabled { opacity: 0.48; filter: saturate(0.35); }
    .baseball-game-actions { margin-top: 16px; }
    .baseball-result-overlay { display: none; }
    .baseball-result-card {
        position: relative;
    }
    .baseball-result-tools { position: absolute; top: 14px; right: 14px; display: inline-flex; }
    .baseball-result-tools .baseball-record-btn { min-width: 72px; height: 30px; font-size: 10px; }
    .baseball-result-actions { justify-content: center; }
    @media (min-width: 769px) {
        #boardgame-baseball-play-section .baseball-cleanup-panel .baseball-cleanup-name {
            font-size: 12px;
            line-height: 1.15;
        }
        #boardgame-baseball-game-section #baseball-current-card-slot .baseball-play-name {
            font-size: 8px;
            line-height: 1.12;
        }
        #boardgame-baseball-game-section .baseball-player-order-panel .baseball-lineup-card .baseball-lineup-name {
            font-size: 7px;
            line-height: 1.1;
        }
    }
    @media (max-width: 860px) {
        .baseball-cleanup-head {
            flex-direction: column;
            align-items: center;
        }
        .baseball-order-buttons {
            justify-content: center;
        }
    }
    @media (max-width: 640px) {
        .baseball-howto-card .joker-howto-image-btn {
            top: 10px;
            right: 10px;
            min-width: 46px;
            height: 24px;
            padding: 0 8px;
            font-size: 7px;
            letter-spacing: 0.02em;
        }
        .baseball-entry-badge {
            top: 10px;
            right: 10px;
            min-width: 44px;
            height: 22px;
            padding: 0 6px;
            font-size: 6px;
            letter-spacing: 0;
        }
        .joker-entry-badge,
        .overheat-entry-badge,
        .blizzard-entry-badge,
        .quinter9-entry-badge,
        .kaprekar-entry-badge,
        .blossom-entry-badge,
        .stella-entry-badge,
        .baseball-entry-badge,
        #boardgame-equinox-section .equinox-entry-badge,
        #boardgame-ritual-section .ritual-entry-badge {
            min-width: 0;
            width: auto;
            max-width: none;
            padding-left: 6px;
            padding-right: 6px;
            letter-spacing: 0;
        }
        .baseball-team-list {
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 8px;
        }
        .baseball-cleanup-cards {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }
        .baseball-team-btn {
            min-height: 84px;
            padding: 10px 6px;
        }
        .baseball-team-btn img {
            width: 34px;
            height: 34px;
        }
        .baseball-team-btn span {
            font-size: 9px;
            line-height: 1.1;
        }
        .baseball-cleanup-entry {
            max-width: 132px;
            gap: 6px;
        }
        .baseball-cleanup-card {
            max-width: 132px;
        }
        .baseball-cleanup-group-buttons {
            max-width: 126px;
            gap: 4px;
        }
        .baseball-cleanup-group-btn {
            height: 24px;
            font-size: 9px;
        }
        .baseball-cleanup-group-label {
            font-size: 8px;
            line-height: 1.15;
        }
        .baseball-cleanup-name {
            left: 6%;
            font-size: 6.5px;
            line-height: 1.2;
        }
        .baseball-cleanup-code {
            left: 16%;
            bottom: 16%;
            width: 68%;
            height: 8.5%;
            font-size: 9px;
        }
        .baseball-setup-actions {
            flex-wrap: wrap;
        }
    }
    @media (max-width: 768px) {
        .api-profile-shell {
            gap: 14px;
        }
        .api-profile-home-btn {
            top: 10px;
            right: 10px;
        }
        .api-profile-title {
            font-size: 18px;
        }
        .api-profile-copy {
            font-size: 10px;
            line-height: 1.55;
        }
        .api-profile-searchbar {
            grid-template-columns: 104px minmax(0, 1fr);
            gap: 8px;
        }
        .api-profile-searchbar select,
        .api-profile-searchbar input,
        .api-profile-searchbar button {
            min-height: 42px;
            font-size: 12px;
        }
        .api-profile-searchbar button {
            grid-column: 1 / -1;
            padding: 0 8px;
        }
        .api-profile-main-card {
            grid-template-columns: 132px minmax(0, 1fr);
            gap: 14px;
            align-items: stretch;
        }
        .api-profile-main-card {
            padding: 18px;
        }
        .api-profile-image-frame {
            min-height: 220px;
        }
        .api-profile-image-frame img {
            max-width: 170%;
            max-height: 220px;
        }
        .api-profile-name {
            font-size: 18px;
            text-align: left;
        }
        .api-profile-zero-switch {
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
        }
        .api-profile-zero-switch-label {
            font-size: 9px;
        }
        .api-profile-zero-switch-btn {
            width: 100%;
            min-width: 0;
            padding: 7px 11px;
            font-size: 10px;
            text-align: center;
        }
        .api-profile-meta-grid {
            grid-template-columns: minmax(0, 1fr);
            gap: 6px;
        }
        .api-profile-meta-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 3px;
            padding: 8px 10px;
            border-radius: 12px;
        }
        .api-profile-meta-label {
            font-size: 9px;
        }
        .api-profile-meta-value {
            width: 100%;
            font-size: 10px;
            text-align: left;
            white-space: nowrap;
            word-break: keep-all;
        }
        .api-appearance-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }
        .api-appearance-card {
            padding: 16px 12px;
            gap: 8px;
        }
        .api-appearance-card h4 {
            font-size: 14px;
        }
        .api-appearance-thumb {
            min-height: 128px;
            padding: 8px;
        }
        .api-appearance-thumb img {
            max-height: 112px;
        }
        .api-appearance-color-ratio {
            font-size: 7px;
        }
        .api-appearance-name {
            font-size: 13px;
        }
        .api-appearance-note {
            font-size: 10px;
            line-height: 1.5;
        }
        .api-appearance-actions {
            gap: 6px;
        }
        .api-appearance-actions button {
            min-width: 0;
            width: 100%;
            padding: 8px 10px;
            font-size: 10px;
        }
        .api-profile-actions {
            gap: 8px;
        }
        .api-profile-actions button {
            min-width: 0;
            flex: 1 1 0;
            padding: 10px 12px;
            font-size: 11px;
        }
        .api-profile-overlay-card {
            padding: 16px;
        }
        .baseball-difficulty-card {
            width: min(320px, calc(100vw - 28px));
            padding: 56px 18px 18px;
        }
        .baseball-setup-topbar {
            padding-right: 0;
        }
        .baseball-innings-toggle {
            top: 12px;
            right: 12px;
            transform: none;
            gap: 4px;
            padding: 5px 6px;
        }
        .baseball-innings-toggle-label {
            font-size: 8px;
        }
        .baseball-innings-toggle-btn {
            width: 40px;
            height: 21px;
        }
        .baseball-innings-toggle-btn::after {
            top: 2px;
            left: 2px;
            width: 15px;
            height: 15px;
        }
        .baseball-innings-toggle-btn.is-on::after {
            transform: translateX(18px);
        }
        .baseball-innings-toggle-value {
            min-width: 18px;
            font-size: 8px;
        }
        .baseball-difficulty-actions {
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: stretch;
            gap: 8px;
        }
        .baseball-difficulty-btn {
            width: 100%;
            min-width: 0;
        }
        #boardgame-baseball-game-section {
            overflow-x: hidden;
        }
        #boardgame-baseball-game-section .baseball-game-shell {
            --baseball-mobile-card-width: clamp(66px, 18vw, 90px);
            --baseball-mobile-card-shift-x: 0px;
            --baseball-mobile-card-shift-y: 64%;
            --baseball-mobile-first-base-right: 15%;
            --baseball-mobile-first-base-bottom: 40%;
            --baseball-mobile-third-base-left: 15%;
            --baseball-mobile-third-base-bottom: 40%;
            --baseball-mobile-caution-width: min(10vw, 44px);
            --baseball-mobile-caution-shift-x: 0px;
            --baseball-mobile-caution-shift-y: -30px;
            width: 100%;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            font-family: var(--main-font);
        }
        #boardgame-baseball-game-section .awards-container.baseball-game-shell {
            padding: 14px;
        }
        #boardgame-baseball-game-section .baseball-game-topbar {
            grid-template-columns: minmax(0, 1fr);
            gap: 8px;
        }
        #boardgame-baseball-game-section .baseball-game-topbar > * {
            width: 100%;
            justify-self: stretch;
        }
        #boardgame-baseball-game-section .baseball-topbar-tools {
            justify-content: flex-end;
        }
        #boardgame-baseball-game-section .baseball-music-control {
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            width: 100%;
        }
        #boardgame-baseball-game-section .baseball-guide-btn {
            width: 28px;
            height: 28px;
            border-radius: 10px;
            font-size: 16px;
        }
        #boardgame-baseball-game-section .baseball-record-btn {
            min-width: 58px;
            height: 28px;
            padding: 0 8px;
            border-radius: 10px;
            font-size: 9px;
        }
        #boardgame-baseball-game-section .baseball-record-card {
            width: min(94vw, 420px);
        }
        #boardgame-baseball-game-section .baseball-record-grid {
            grid-template-columns: 44px 74px 52px;
            gap: 4px 2px;
            padding: 8px;
            font-size: 8.5px;
        }
        #boardgame-baseball-game-section .baseball-record-grid > * {
            min-width: 0;
        }
        #boardgame-baseball-game-section .baseball-record-head,
        #boardgame-baseball-game-section .baseball-record-label,
        #boardgame-baseball-game-section .baseball-record-value {
            font-size: 8.5px;
            line-height: 1.2;
            overflow-wrap: anywhere;
        }
        #baseball-record-overlay .baseball-record-card {
            box-sizing: border-box;
            width: min(calc(100vw - 32px), 396px);
            padding: 20px 16px 16px;
            transform: translateY(-115px);
        }
        #baseball-record-overlay .baseball-record-card h3 {
            margin-left: 28px;
            margin-right: 28px;
        }
        #baseball-record-overlay .baseball-record-grid {
            grid-template-columns: minmax(38px, 52px) minmax(58px, 74px) minmax(40px, 54px);
            justify-content: center;
            column-gap: 2px;
        }
        #baseball-record-overlay .baseball-record-head,
        #baseball-record-overlay .baseball-record-label,
        #baseball-record-overlay .baseball-record-value {
            font-size: 8.5px !important;
            line-height: 1.18;
            white-space: nowrap;
        }
        #baseball-record-overlay .baseball-position-pair { gap: 8px; }
        #baseball-record-overlay .baseball-position-team + .baseball-position-team { padding-left: 8px; }
        #baseball-record-overlay .baseball-position-identity img { width: 28px; height: 28px; flex-basis: 28px; }
        #baseball-record-overlay .baseball-position-counts,
        #baseball-record-overlay .baseball-position-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 9px; }
        #baseball-record-overlay .baseball-position-counts span:last-child { grid-column: 1 / -1; }
        #boardgame-baseball-game-section .baseball-result-tools {
            top: 10px;
            right: 10px;
        }
        #boardgame-baseball-game-section .baseball-result-tools .baseball-record-btn {
            min-width: 64px;
            height: 28px;
            font-size: 9px;
        }
        #boardgame-baseball-game-section .baseball-result-pitches {
            font-size: 11px;
        }
        #boardgame-baseball-game-section .baseball-result-card {
            box-sizing: border-box;
            width: min(calc(100vw - 32px), 360px);
            max-height: calc(100dvh - 32px);
            overflow-y: auto;
            padding: 44px 16px 18px;
            gap: 10px;
        }
        #boardgame-baseball-game-section .baseball-result-title {
            font-size: 28px;
        }
        #boardgame-baseball-game-section .baseball-result-actions .btn {
            box-sizing: border-box;
            min-width: 0;
            padding: 10px 12px;
        }
        #boardgame-baseball-game-section .baseball-score-pill {
            font-size: 9px;
            padding: 8px 10px;
        }
        #boardgame-baseball-game-section .baseball-music-btn {
            min-width: 72px;
            height: 32px !important;
            padding: 0 10px !important;
        }
        #boardgame-baseball-game-section .baseball-music-btn .btn-text {
            font-size: 9px;
        }
        #boardgame-baseball-game-section .baseball-volume-panel {
            width: 144px;
            padding: 8px 10px;
        }
        #boardgame-baseball-game-section .baseball-game-guide {
            font-size: 9px;
            padding: 8px 10px;
        }
        #boardgame-baseball-game-section .baseball-board-panel,
        #boardgame-baseball-game-section .baseball-lineup-panel {
            padding: 12px;
        }
        #boardgame-baseball-game-section .baseball-main-board {
            min-height: 0;
            aspect-ratio: 0.92 / 1;
            --baseball-count-top: clamp(50px, 17vw, 77px);
            --baseball-count-top-full: clamp(38px, 13vw, 58px);
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard {
            top: -10px;
            left: 4%;
            right: auto;
            width: clamp(90px, 25vw, 120px);
            gap: 4px;
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard.is-full {
            top: -14px;
            left: 20px;
            width: clamp(120px, 33vw, 160px);
        }
        #boardgame-baseball-game-section .baseball-inning-pitch-count {
            top: 0%;
            right: 4%;
            width: auto;
            min-width: 0;
            align-items: flex-end;
            gap: 3px;
        }
        #boardgame-baseball-game-section .baseball-inning-pitch-count-head {
            min-width: 48px;
            padding: 3px 7px;
            font-size: clamp(6.5px, 1.9vw, 8px);
        }
        #boardgame-baseball-game-section .baseball-inning-pitch-count-card {
            width: auto;
            min-width: 66px;
            max-width: 82px;
            padding: 7px 8px;
            border-radius: 10px;
            gap: 3px;
        }
        #boardgame-baseball-game-section .baseball-inning-pitch-count-row {
            justify-content: space-between;
            gap: 8px;
            font-size: clamp(9px, 2.5vw, 11.5px);
        }
        #boardgame-baseball-game-section .baseball-inning-pitch-count-row span {
            flex: 0 0 auto;
        }
        #boardgame-baseball-game-section .baseball-inning-pitch-count-row strong {
            min-width: 3ch;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }
        #boardgame-baseball-game-section .baseball-breaking-caution {
            width: 30px;
            min-height: 26px;
            margin-top: 2px;
            padding: 2px;
            border-radius: 7px;
        }
        #boardgame-baseball-game-section .baseball-breaking-caution img {
            width: 22px;
            height: 22px;
        }
        #boardgame-baseball-game-section .baseball-breaking-caution span {
            display: none;
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard-head {
            left: 19%;
            top: 18%;
            width: 56%;
            font-size: clamp(6px, 1.8vw, 8px);
            gap: 2px;
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard-head span:last-child {
            transform: translateX(6px);
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard-grid {
            left: 20px;
            width: 56%;
            gap: 2px;
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard-grid .baseball-inning-scoreboard-cell:nth-child(4),
        #boardgame-baseball-game-section .baseball-inning-scoreboard-grid .baseball-inning-scoreboard-cell:nth-child(8) {
            transform: translateX(6px);
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard-cell {
            font-size: clamp(8px, 2.2vw, 11px);
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard-cell.is-double-digit {
            font-size: clamp(6px, 1.54vw, 8px);
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard-rows {
            top: 21px;
            left: 8px;
            font-size: clamp(6px, 1.7vw, 8px);
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard-rows img {
            width: 10px;
            height: 9px;
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-rows img {
            width: 10px;
            height: 6px;
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-head {
            left: 9.5%;
            top: 25%;
            width: 82%;
            grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 1.85fr);
            font-size: clamp(4px, 1.8vw, 7.6px);
            letter-spacing: 0;
            gap: 1px;
            font-family: var(--main-font);
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-head span:last-child {
            transform: translateX(2.5px);
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-grid {
            left: 9.5%;
            top: 35%;
            width: 82%;
            height: 40%;
            font-size: clamp(4px, 1.8vw, 7.6px);
            grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 1.85fr);
            gap: 1px;
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-grid .baseball-inning-scoreboard-cell:nth-child(10),
        #boardgame-baseball-game-section .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-grid .baseball-inning-scoreboard-cell:nth-child(20) {
            transform: translateX(2.5px);
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-grid .baseball-inning-scoreboard-cell:nth-child(-n+10) {
            transform: translateY(1.5px);
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-grid .baseball-inning-scoreboard-cell:nth-child(10) {
            transform: translate(2.5px, 1.5px);
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-cell {
            font-size: clamp(3.6px, 1.8vw, 7.5px);
            letter-spacing: 0;
            line-height: 1;
            font-variant-numeric: tabular-nums;
            font-family: var(--main-font);
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-cell.is-double-digit {
            font-size: clamp(4px, 2.1vw, 9px);
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard.is-full .baseball-inning-scoreboard-rows {
            left: 3px;
            top: 38%;
            height: 34%;
            font-size: clamp(4px, 1.2vw, 6px);
        }
        #boardgame-baseball-game-section .baseball-count-hud {
            top: var(--baseball-count-top-full);
            left: 6%;
            padding: 4px 6px;
            border-radius: 10px;
            gap: 2px;
        }
        #boardgame-baseball-game-section .baseball-inning-scoreboard.is-full ~ .baseball-count-hud {
            top: var(--baseball-count-top-full);
        }
        #boardgame-baseball-game-section .baseball-count-chip {
            gap: 3px;
        }
        #boardgame-baseball-game-section .baseball-count-chip span {
            font-size: 6.5px;
            min-width: 7px;
        }
        #boardgame-baseball-game-section .baseball-count-lights {
            gap: 2px;
            min-height: 8px;
        }
        #boardgame-baseball-game-section .baseball-count-light {
            width: 6px;
            height: 6px;
        }
        #boardgame-baseball-game-section .baseball-caution-overlay img {
            width: var(--baseball-mobile-caution-width);
            transform: translate(var(--baseball-mobile-caution-shift-x), var(--baseball-mobile-caution-shift-y));
        }
        #boardgame-baseball-game-section .baseball-play-card {
            width: var(--baseball-mobile-card-width);
            transform: translate(var(--baseball-mobile-card-shift-x), var(--baseball-mobile-card-shift-y));
        }
        #boardgame-baseball-game-section .baseball-play-name {
            font-size: clamp(6px, 1.65vw, 7.5px);
        }
        #boardgame-baseball-game-section .baseball-play-code {
            font-size: clamp(8px, 2.3vw, 11px);
        }
        #boardgame-baseball-game-section .baseball-base {
            width: clamp(54px, 14vw, 78px);
            height: clamp(72px, 19vw, 104px);
        }
        #boardgame-baseball-game-section .baseball-base-first {
            right: var(--baseball-mobile-first-base-right);
            bottom: var(--baseball-mobile-first-base-bottom);
        }
        #boardgame-baseball-game-section .baseball-base-second {
            top: 13%;
            left: 50%;
            transform: translateX(-50%);
        }
        #boardgame-baseball-game-section .baseball-base-third {
            left: var(--baseball-mobile-third-base-left);
            bottom: var(--baseball-mobile-third-base-bottom);
        }
        #boardgame-baseball-game-section .baseball-home-burst {
            bottom: 5%;
            width: 28%;
            height: 12%;
        }
        #boardgame-baseball-game-section .baseball-runner-chip,
        #boardgame-baseball-game-section .baseball-runner-chip.is-com {
            width: clamp(40px, 10vw, 58px);
            height: clamp(60px, 15vw, 88px);
        }
        #boardgame-baseball-game-section .baseball-token-strip,
        #boardgame-baseball-game-section .baseball-player-order-panel {
            max-width: 100%;
        }
        #boardgame-baseball-game-section .baseball-pitch-type-strip {
            left: 50%;
            bottom: 10px;
            transform: translateX(-50%);
            width: auto;
            justify-content: center;
            gap: 100px;
            min-height: 76px;
        }
        #boardgame-baseball-game-section .baseball-pitch-type-column {
            gap: 4px;
        }
        #boardgame-baseball-game-section .baseball-pitch-type-row {
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        #boardgame-baseball-game-section .baseball-breaking-stack {
            gap: 4px;
        }
        #boardgame-baseball-game-section .baseball-pitch-type-btn {
            min-width: 64px;
            flex: 0 0 auto;
            min-height: 34px;
            padding: 7px 10px;
            font-size: 9px;
            white-space: nowrap;
        }
        #boardgame-baseball-game-section .baseball-breaking-direction-row {
            gap: 4px;
            min-height: 20px;
        }
        #boardgame-baseball-game-section .baseball-breaking-direction-btn {
            min-width: 32px;
            min-height: 20px;
            padding: 2px 6px;
            font-size: 9px;
        }
        #boardgame-baseball-game-section .baseball-lineup-row {
            gap: 8px;
        }
        #boardgame-baseball-game-section .baseball-lineup-card {
            width: clamp(68px, 18vw, 86px);
        }
        #boardgame-baseball-game-section .baseball-game-actions {
            flex-wrap: wrap;
        }
        .baseball-guide-card {
            width: min(100%, calc(100vw - 28px));
            max-height: 72vh;
            padding: 16px 16px 14px;
        }
        .baseball-guide-card h3 {
            font-size: 9px;
        }
        .baseball-guide-card p,
        .baseball-guide-list {
            font-size: 12px;
        }
    }
    #boardgame-baseball-game-section .baseball-score-pill,
    #boardgame-baseball-game-section .baseball-guide-btn,
    #boardgame-baseball-game-section .baseball-record-btn,
    #boardgame-baseball-game-section .baseball-game-guide,
    #boardgame-baseball-game-section .baseball-lineup-slot,
    #boardgame-baseball-game-section .baseball-pitch-type-btn,
    #boardgame-baseball-game-section .baseball-count-chip span,
    #boardgame-baseball-game-section .baseball-record-grid,
    #boardgame-baseball-game-section .baseball-record-head,
    #boardgame-baseball-game-section .baseball-record-label,
    #boardgame-baseball-game-section .baseball-record-value,
    #boardgame-baseball-game-section .baseball-result-tools .baseball-record-btn,
    #boardgame-baseball-game-section .baseball-music-btn .btn-text {
        font-size: 12px;
    }

    #boardgame-baseball-game-section .baseball-player-order-panel .baseball-lineup-card .baseball-lineup-name {
        font-size: 7px;
    }

    #boardgame-baseball-game-section .baseball-player-order-panel .baseball-lineup-card .baseball-lineup-code {
        font-size: 14px;
    }

    @media (max-width: 768px) {
        #boardgame-baseball-game-section .baseball-play-name {
            font-size: 8px;
        }

        #boardgame-baseball-game-section .baseball-play-code {
            font-size: 12px;
        }

        #boardgame-baseball-game-section #baseball-current-card-slot .baseball-play-name {
            font-size: 6.5px;
        }

        #boardgame-baseball-game-section #baseball-current-card-slot .baseball-play-code {
            font-size: 12px;
        }

        #boardgame-baseball-game-section .baseball-player-order-panel .baseball-lineup-card .baseball-lineup-name {
            font-size: 6.4px;
        }

        #boardgame-baseball-game-section .baseball-player-order-panel .baseball-lineup-card .baseball-lineup-code {
            font-size: 12px;
        }

        .baseball-entry-grid .baseball-lineup-card .baseball-lineup-name {
            top: 12%;
            font-size: 6px;
            line-height: 1.08;
            padding: 0 2px;
        }

        .baseball-entry-grid .baseball-lineup-card .baseball-lineup-code {
            bottom: 16.8%;
            font-size: 12px;
            letter-spacing: 0;
        }
    }
    .site-footer {
        text-align: center;
        padding: 40px 20px;
        margin-top: 60px;
        border-top: 1px solid rgba(0,0,0,0.1);
        color: #555;
        font-family: var(--main-font);
    }
    .footer-partner { font-size: 12px; letter-spacing: 2px; color: #333; margin-bottom: 8px; }
    .footer-social-links {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-bottom: 16px;
    }
    .footer-social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }
    .footer-social-link.is-discord {
        background: rgba(88, 101, 242, 0.12);
        box-shadow: 0 8px 18px rgba(88, 101, 242, 0.16);
    }
    .footer-social-link.is-kakaotalk {
        background: rgba(255, 226, 45, 0.16);
        box-shadow: 0 8px 18px rgba(64, 38, 28, 0.12);
    }
    .footer-social-link.is-disabled {
        cursor: default;
    }
    .footer-social-link.is-discord:hover {
        background: rgba(88, 101, 242, 0.2);
        box-shadow: 0 10px 22px rgba(88, 101, 242, 0.22);
        transform: translateY(-2px);
    }
    .footer-social-link.is-kakaotalk:hover {
        background: rgba(255, 226, 45, 0.24);
        box-shadow: 0 10px 22px rgba(64, 38, 28, 0.18);
        transform: translateY(-2px);
    }
    .footer-social-link img {
        width: 26px;
        height: 26px;
        object-fit: contain;
    }
    .footer-social-link.is-kakaotalk img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    .footer-social-link.is-discord img {
        width: 30px;
        height: 30px;
    }
    .footer-api {
        display: inline-flex;
        align-items: baseline;
        justify-content: center;
        gap: 4px;
        margin-bottom: 10px;
        color: #555;
        font-size: 16px;
        font-weight: 900;
        line-height: 1.25;
    }
    .footer-api .nexon { color: #000; }
    .footer-api .api { color: #007bff; }
    .footer-disclaimer { font-size: 11px; color: #888; }

    .beat-guide-shell {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        padding: 0;
        box-sizing: border-box;
        border: 1px solid rgba(255, 86, 24, 0.66);
        border-radius: 8px;
        background: #160403;
        color: #fff4e8;
        box-shadow: 0 24px 60px rgba(40, 4, 0, 0.5), inset 0 0 70px rgba(126, 17, 3, 0.14);
    }
    .beat-guide-shell::before {
        content: '';
        position: absolute;
        inset: 0 0 auto;
        z-index: 2;
        height: 4px;
        background: #ff3b0a;
        box-shadow: 0 0 20px rgba(255, 70, 10, 0.82);
        pointer-events: none;
    }
    .beat-guide-head {
        position: relative;
        padding: 84px clamp(22px, 4vw, 48px) 24px;
        border-bottom: 1px solid rgba(255, 95, 30, 0.4);
        background: #260604;
        text-align: left;
    }
    .beat-keymap-open {
        position: absolute;
        z-index: 3;
        top: 20px;
        left: clamp(18px, 3vw, 34px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        padding: 0 14px;
        border: 1px solid rgba(255, 153, 83, 0.62);
        border-radius: 6px;
        background: #160403;
        color: #ffd16d;
        font: 900 11px/1 'Oxanium', var(--main-font);
        cursor: pointer;
        box-shadow: inset 0 0 14px rgba(255, 53, 8, 0.1);
    }
    .beat-keymap-open:hover,
    .beat-keymap-open:focus-visible {
        border-color: #ffb06f;
        background: #321009;
        color: #fff3dd;
    }
    .beat-keymap-open.is-enabled {
        border-color: #65f3ff;
        color: #8ff7ff;
        box-shadow: 0 0 12px rgba(70, 230, 255, 0.22), inset 0 0 14px rgba(70, 230, 255, 0.12);
    }
    .beat-keymap-dialog {
        box-sizing: border-box;
        width: min(720px, calc(100vw - 24px));
        max-height: calc(100dvh - 24px);
        margin: auto;
        padding: 0;
        overflow: auto;
        border: 1px solid rgba(255, 112, 46, 0.88);
        border-radius: 8px;
        background: #130403;
        color: #fff2df;
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.72), inset 0 0 60px rgba(139, 20, 4, 0.16);
    }
    .beat-keymap-dialog::backdrop {
        background: rgba(0, 0, 0, 0.82);
        backdrop-filter: blur(3px);
    }
    .beat-keymap-dialog * {
        box-sizing: border-box;
        letter-spacing: 0;
    }
    .beat-keymap-dialog-head {
        position: relative;
        min-height: 72px;
        padding: 18px 68px 14px 22px;
        border-bottom: 1px solid rgba(255, 112, 46, 0.38);
        background: #270705;
    }
    .beat-keymap-dialog-head span {
        display: block;
        margin-bottom: 5px;
        color: #ffb844;
        font: 900 11px/1 'Oxanium', var(--main-font);
    }
    .beat-keymap-dialog-head h2 {
        margin: 0;
        color: #fff2df;
        font: 900 24px/1 'Oxanium', var(--main-font);
    }
    .beat-keymap-close {
        position: absolute;
        top: 16px;
        right: 18px;
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid rgba(255, 209, 174, 0.38);
        border-radius: 50%;
        background: #35100b;
        color: #fff4e8;
        font: 900 26px/1 Arial, sans-serif;
        cursor: pointer;
    }
    .beat-keymap-dialog-body {
        padding: 22px;
    }
    .beat-keymap-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        margin-bottom: 18px;
        padding: 4px;
        border: 1px solid rgba(255, 137, 72, 0.34);
        border-radius: 6px;
        background: #0d0302;
    }
    .beat-keymap-tab {
        min-height: 40px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: #b58e7a;
        font: 900 12px/1 'Oxanium', var(--main-font);
        cursor: pointer;
    }
    .beat-keymap-tab.is-active {
        background: #431108;
        color: #ffd16d;
        box-shadow: inset 0 0 14px rgba(255, 77, 18, 0.2);
    }
    .beat-keymap-panel[hidden] {
        display: none;
    }
    .beat-keymap-help {
        margin: 0 0 18px;
        color: #ddbbaa;
        font-size: 13px;
        line-height: 1.65;
    }
    .beat-keymap-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
    }
    .beat-keymap-slot {
        position: relative;
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 9px;
        min-width: 0;
        height: 94px;
        padding: 10px 6px;
        border: 1px solid rgba(255, 137, 72, 0.5);
        border-radius: 6px;
        background: #210704;
        color: #fff2df;
        cursor: pointer;
        box-shadow: inset 0 0 18px rgba(255, 53, 8, 0.1);
    }
    .beat-keymap-slot:hover,
    .beat-keymap-slot:focus-visible {
        border-color: #ffab65;
        background: #350d07;
    }
    .beat-keymap-slot.is-listening {
        border-color: #65f3ff;
        background: #082126;
        box-shadow: 0 0 16px rgba(70, 230, 255, 0.38), inset 0 0 14px rgba(70, 230, 255, 0.14);
    }
    .beat-keymap-digit {
        color: #ffb34d;
        font: 900 30px/1 'Oxanium', var(--main-font);
    }
    .beat-keymap-key {
        width: 100%;
        min-width: 0;
        overflow: hidden;
        color: #f7ddd0;
        font: 800 12px/1 'Oxanium', var(--main-font);
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .beat-keymap-slot.is-listening .beat-keymap-key {
        color: #8ff7ff;
        font-size: 11px;
    }
    .beat-touch-pad-grid,
    .beat-touch-digit-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
    }
    .beat-touch-pad-grid {
        margin-bottom: 16px;
    }
    .beat-touch-pad-slot {
        display: grid;
        place-items: center;
        gap: 8px;
        min-width: 0;
        height: 86px;
        padding: 9px 5px;
        border: 1px solid rgba(255, 137, 72, 0.5);
        border-radius: 6px;
        background: #210704;
        color: #fff2df;
        cursor: pointer;
    }
    .beat-touch-pad-slot.is-selected {
        border-color: #65f3ff;
        background: #082126;
        box-shadow: 0 0 15px rgba(70, 230, 255, 0.3), inset 0 0 12px rgba(70, 230, 255, 0.12);
    }
    .beat-touch-pad-label {
        color: #c29175;
        font: 900 10px/1 'Oxanium', var(--main-font);
    }
    .beat-touch-pad-value {
        color: #ffbd54;
        font: 900 20px/1 'Oxanium', var(--main-font);
        white-space: nowrap;
    }
    .beat-touch-pad-slot.is-selected .beat-touch-pad-value {
        color: #8ff7ff;
    }
    .beat-touch-digit {
        position: relative;
        display: grid;
        place-items: center;
        min-width: 0;
        height: 58px;
        border: 1px solid rgba(255, 137, 72, 0.44);
        border-radius: 6px;
        background: #180503;
        color: #ffb34d;
        font: 900 22px/1 'Oxanium', var(--main-font);
        cursor: pointer;
    }
    .beat-touch-digit::after {
        content: attr(data-pad);
        position: absolute;
        top: 5px;
        right: 6px;
        color: #a37a66;
        font-size: 8px;
    }
    .beat-touch-digit.is-current {
        border-color: #65f3ff;
        color: #8ff7ff;
        box-shadow: inset 0 0 12px rgba(70, 230, 255, 0.14);
    }
    .beat-keymap-status {
        min-height: 22px;
        margin: 16px 0 0;
        color: #8ff7ff;
        font-size: 12px;
        line-height: 1.5;
    }
    .beat-keymap-dialog-footer {
        display: flex;
        justify-content: flex-end;
        gap: 9px;
        padding: 14px 22px 20px;
    }
    .beat-keymap-dialog-footer button {
        min-width: 104px;
        min-height: 40px;
        padding: 0 16px;
        border: 1px solid rgba(255, 153, 83, 0.52);
        border-radius: 6px;
        background: #321009;
        color: #ffe4cf;
        font: 900 11px/1 'Oxanium', var(--main-font);
        cursor: pointer;
    }
    .beat-keymap-dialog-footer .is-primary {
        border-color: #ff6a2c;
        background: #e73c13;
        color: #fff;
    }
    .beat-guide-kicker {
        margin-bottom: 8px;
        color: #ffc64f;
        font-family: 'Oxanium', var(--main-font);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0;
    }
    .beat-guide-head h2 {
        margin: 0;
        color: #fff1df;
        font-family: 'Oxanium', var(--main-font);
        font-size: clamp(30px, 5vw, 52px);
        line-height: 1;
        letter-spacing: 0;
        text-shadow: 0 0 8px rgba(255, 214, 171, 0.24), 0 0 26px rgba(255, 49, 8, 0.72);
    }
    .beat-guide-head p {
        max-width: 760px;
        margin: 14px 0 0;
        color: #f0d6c5;
        font-size: 16px;
        line-height: 1.75;
    }
    .beat-window-mode-control {
        position: absolute;
        z-index: 3;
        top: 24px;
        right: clamp(18px, 3vw, 34px);
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: #f4ded0;
        font-family: 'Oxanium', var(--main-font);
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
        user-select: none;
    }
    .beat-window-mode-control input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }
    .beat-window-mode-switch {
        position: relative;
        width: 42px;
        height: 22px;
        flex: 0 0 auto;
        border: 1px solid rgba(255, 172, 87, 0.58);
        border-radius: 11px;
        background: #160706;
        box-shadow: inset 0 0 9px rgba(0, 0, 0, 0.72);
        transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
    }
    .beat-window-mode-switch::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #93776d;
        transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
    }
    .beat-window-mode-control input:checked + .beat-window-mode-switch {
        border-color: #ffba4e;
        background: #591307;
        box-shadow: inset 0 0 11px rgba(255, 56, 10, 0.48), 0 0 10px rgba(255, 83, 15, 0.3);
    }
    .beat-window-mode-control input:checked + .beat-window-mode-switch::after {
        background: #fff29a;
        box-shadow: 0 0 8px #ff7b20;
        transform: translateX(20px);
    }
    .beat-window-mode-control input:focus-visible + .beat-window-mode-switch {
        outline: 2px solid #fff0a8;
        outline-offset: 3px;
    }
    .beat-guide-layout {
        display: grid;
        grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
        align-items: stretch;
        min-width: 0;
    }
    .beat-guide-visual {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 22px;
        min-width: 0;
        min-height: 520px;
        padding: 40px 26px 26px;
        border-right: 1px solid rgba(255, 84, 24, 0.36);
        background: #080201;
    }
    .beat-guide-visual img {
        display: block;
        width: min(100%, 410px);
        height: auto;
        max-height: 500px;
        object-fit: contain;
        filter: drop-shadow(0 18px 30px rgba(255, 47, 10, 0.32));
    }
    .beat-guide-rules {
        display: grid;
        align-content: center;
        min-width: 0;
        padding: 12px clamp(22px, 4vw, 44px);
        background: #1b0705;
    }
    .beat-guide-rule {
        padding: 22px 0;
        border-bottom: 1px solid rgba(255, 108, 45, 0.22);
    }
    .beat-guide-rule:last-child {
        border-bottom: 0;
    }
    .beat-guide-rule h3 {
        margin: 0 0 9px;
        color: #ff9f32;
        font-family: 'Oxanium', var(--main-font);
        font-size: 17px;
        letter-spacing: 0;
    }
    .beat-guide-rule p,
    .beat-guide-rule li {
        color: #eaded5;
        font-size: 16px;
        line-height: 1.72;
    }
    .beat-guide-rule p {
        margin: 0;
    }
    .beat-guide-rule ul {
        margin: 0;
        padding-left: 20px;
    }
    .beat-guide-rule li + li {
        margin-top: 5px;
    }
    .beat-guide-tricks {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 18px;
        margin-top: 12px;
    }
    .beat-guide-trick {
        min-width: 0;
        padding: 8px 0 8px 12px;
        border-left: 3px solid #ff3b0a;
        color: #eaded5;
        font-size: 14px;
        line-height: 1.55;
    }
    .beat-guide-trick strong {
        display: block;
        margin-bottom: 2px;
        color: #fff7ec;
        font-family: 'Oxanium', var(--main-font);
        font-size: 14px;
        letter-spacing: 0;
    }
    .beat-note-generation-guide {
        margin-top: 18px;
        padding: 14px 0 0 14px;
        border-top: 1px solid rgba(255, 159, 50, 0.24);
        border-left: 3px solid #ff9f32;
    }
    .beat-note-generation-guide strong {
        display: block;
        margin-bottom: 7px;
        color: #ffbd62;
        font-family: 'Oxanium', var(--main-font);
        font-size: 14px;
        font-weight: 900;
    }
    .beat-note-generation-guide ul {
        margin: 0;
        padding-left: 18px;
    }
    .beat-note-generation-guide li {
        font-size: 14px;
        line-height: 1.6;
    }
    .beat-note-generation-modes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 18px;
        margin-top: 13px;
    }
    .beat-note-generation-mode {
        min-width: 0;
        padding: 7px 0 7px 11px;
        border-left: 2px solid rgba(255, 59, 10, 0.76);
        color: #eaded5;
        font-size: 13px;
        line-height: 1.5;
    }
    .beat-note-generation-mode strong {
        margin-bottom: 2px;
        color: #fff7ec;
        font-size: 13px;
    }
    .beat-guide-actions {
        display: flex;
        justify-content: center;
        gap: 12px;
        padding: 22px;
        border-top: 1px solid rgba(255, 84, 24, 0.34);
        background: #210805;
    }
    .beat-guide-play-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-width: 210px;
        min-height: 58px;
        padding: 8px 20px;
        border: 1px solid #ffc64f;
        border-radius: 6px;
        background: #f03a0d;
        color: #fff;
        font-family: 'Oxanium', var(--main-font);
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 0;
        cursor: pointer;
        box-shadow: 0 10px 24px rgba(240, 40, 8, 0.38), 0 0 18px rgba(255, 92, 20, 0.18);
        transition: transform 0.16s ease, background 0.16s ease;
    }
    .beat-guide-play-btn:hover,
    .beat-guide-play-btn:focus-visible {
        background: #ff541c;
        transform: translateY(-1px);
    }
    .beat-guide-play-btn:disabled,
    .beat-guide-preview-btn:disabled {
        border-color: rgba(255, 255, 255, 0.12);
        background: #34231f;
        color: #8e7b73;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }
    .beat-guide-play-copy {
        display: grid;
        gap: 1px;
        text-align: left;
    }
    .beat-guide-play-copy strong {
        font: inherit;
        line-height: 1.1;
    }
    .beat-guide-play-copy small {
        color: #ffe0a4;
        font-size: 11px;
        line-height: 1.1;
        letter-spacing: 0;
    }
    .beat-guide-controls {
        display: grid;
        width: min(100%, 410px);
        gap: 10px;
    }
    .beat-guide-controls .beat-guide-play-btn {
        width: 100%;
    }
    .beat-guide-preview-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        min-height: 48px;
        padding: 8px 18px;
        border: 1px solid #7cf8ff;
        border-radius: 6px;
        background: #087f94;
        color: #effeff;
        font-family: 'Oxanium', var(--main-font);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(0, 175, 205, 0.24), 0 0 16px rgba(61, 231, 255, 0.14);
        transition: transform 0.16s ease, background 0.16s ease;
    }
    .beat-guide-preview-btn:not(:disabled):hover,
    .beat-guide-preview-btn:not(:disabled):focus-visible {
        background: #0aa6bf;
        transform: translateY(-1px);
    }
    .beat-song-picker {
        width: 100%;
        margin-top: 2px;
        border: 1px solid rgba(255, 122, 50, 0.42);
        border-radius: 6px;
        overflow: hidden;
        background: #170806;
    }
    .beat-song-picker-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 34px;
        padding: 7px 11px;
        border-bottom: 1px solid rgba(255, 122, 50, 0.25);
        color: #ffad54;
        font-family: 'Oxanium', var(--main-font);
        font-size: 11px;
        font-weight: 800;
    }
    .beat-song-picker-head span:last-child {
        color: #8fcfd7;
    }
    .beat-song-list {
        display: grid;
        padding: 6px;
    }
    .beat-song-option {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        align-items: center;
        gap: 9px;
        width: 100%;
        min-height: 58px;
        padding: 8px 10px;
        border: 1px solid transparent;
        border-radius: 4px;
        background: transparent;
        color: #f8e9df;
        text-align: left;
        cursor: pointer;
    }
    .beat-song-option:hover,
    .beat-song-option:focus-visible {
        background: rgba(255, 88, 22, 0.1);
    }
    .beat-song-option.is-selected {
        border-color: #ff6831;
        background: rgba(255, 68, 13, 0.18);
        box-shadow: inset 3px 0 #ff3b0a;
    }
    .beat-song-number {
        color: #ffae4c;
        font-family: 'Oxanium', var(--main-font);
        font-size: 17px;
        font-weight: 800;
        text-align: center;
    }
    .beat-song-copy {
        min-width: 0;
    }
    .beat-song-copy small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .beat-song-copy strong {
        display: block;
        font-family: 'Oxanium', var(--main-font);
        font-size: 13px;
        line-height: 1.2;
        letter-spacing: 0;
        white-space: normal;
    }
    .beat-song-copy small {
        margin-top: 3px;
        color: #bba69c;
        font-size: 10px;
    }
    .beat-song-meta {
        display: grid;
        gap: 2px;
        color: #ffc86f;
        font-family: 'Oxanium', var(--main-font);
        font-size: 10px;
        font-weight: 700;
        text-align: right;
    }
    .beat-sync-control {
        width: 100%;
        padding: 10px 12px;
        box-sizing: border-box;
        border: 1px solid rgba(79, 218, 235, 0.34);
        border-radius: 6px;
        background: #081719;
    }
    .beat-sync-control.is-visual {
        border-color: rgba(255, 147, 72, 0.42);
        background: #1d1009;
    }
    .beat-sync-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: #76e8f2;
        font-family: 'Oxanium', var(--main-font);
        font-size: 11px;
        font-weight: 800;
    }
    .beat-sync-head output {
        min-width: 58px;
        color: #fff4b0;
        font-size: 13px;
        text-align: right;
    }
    .beat-sync-control.is-visual .beat-sync-head {
        color: #ff9e56;
    }
    .beat-sync-control.is-visual .beat-sync-head output {
        color: #ffe0ac;
    }
    .beat-sync-slider {
        width: 100%;
        margin: 10px 0 7px;
        accent-color: #42d7e8;
        cursor: pointer;
    }
    .beat-sync-control.is-visual .beat-sync-slider {
        accent-color: #ff762f;
    }
    .beat-sync-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }
    .beat-sync-button {
        min-height: 30px;
        padding: 5px 8px;
        border: 1px solid rgba(111, 229, 240, 0.42);
        border-radius: 4px;
        background: #10292c;
        color: #d8fbff;
        font-family: 'Oxanium', var(--main-font);
        font-size: 10px;
        font-weight: 800;
        cursor: pointer;
    }
    .beat-sync-button.is-reset {
        grid-column: 1 / -1;
    }
    .beat-sync-button:hover,
    .beat-sync-button:focus-visible {
        border-color: #bffbff;
        background: #174148;
        outline: none;
    }
    .beat-sync-control.is-visual .beat-sync-button {
        border-color: rgba(255, 157, 86, 0.44);
        background: #35180d;
        color: #ffe1ca;
    }
    .beat-sync-control.is-visual .beat-sync-button:hover,
    .beat-sync-control.is-visual .beat-sync-button:focus-visible {
        border-color: #ffd2b2;
        background: #542313;
    }
    .beat-sync-help {
        margin: 7px 0 0;
        color: #9bbfc2;
        font-size: 10px;
        line-height: 1.45;
        text-align: center;
    }
    .beat-preview-sync {
        display: grid;
        gap: 8px;
    }
    .beat-preview-sync-control {
        padding: 8px;
        border: 1px solid rgba(84, 222, 235, 0.38);
        border-radius: 5px;
        background: #071719;
    }
    .beat-preview-sync-control.is-visual {
        border-color: rgba(255, 139, 69, 0.42);
        background: #211008;
    }
    .beat-preview-sync-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: #72eaf4;
        font-family: 'Oxanium', var(--main-font);
        font-size: 9px;
        font-weight: 800;
    }
    .beat-preview-sync-control.is-visual .beat-preview-sync-head {
        color: #ff9b52;
    }
    .beat-preview-sync-head output {
        min-width: 48px;
        color: #fff1a8;
        font-size: 11px;
        text-align: right;
    }
    .beat-preview-sync-slider {
        display: block;
        width: 100%;
        margin: 7px 0;
        accent-color: #42d7e8;
        cursor: pointer;
    }
    .beat-preview-sync-control.is-visual .beat-preview-sync-slider {
        accent-color: #ff762f;
    }
    .beat-preview-sync-actions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }
    .beat-preview-sync-actions button {
        min-width: 0;
        min-height: 26px;
        padding: 3px 2px;
        border: 1px solid rgba(111, 229, 240, 0.4);
        border-radius: 3px;
        background: #10292c;
        color: #d8fbff;
        font-family: 'Oxanium', var(--main-font);
        font-size: 9px;
        font-weight: 800;
        cursor: pointer;
    }
    .beat-preview-sync-control.is-visual .beat-preview-sync-actions button {
        border-color: rgba(255, 157, 86, 0.44);
        background: #35180d;
        color: #ffe1ca;
    }
    .beat-preview-sync-actions button:hover,
    .beat-preview-sync-actions button:focus-visible {
        border-color: #fff1c9;
        outline: none;
    }
    .beat-preview-sync-actions .is-reset {
        grid-column: 1 / -1;
    }
    .beat-song-status {
        min-height: 18px;
        margin: 0;
        color: #bca79d;
        font-size: 11px;
        line-height: 1.5;
        text-align: center;
    }
    .beat-field-preview {
        position: fixed;
        inset: 0;
        z-index: 14000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(5, 1, 0, 0.92);
    }
    .beat-field-preview.is-open {
        display: flex;
        animation: boardgame-intro-fade-in 0.25s ease-out both;
    }
    .beat-field-preview-panel {
        width: min(100%, 920px);
        max-height: calc(100dvh - 40px);
        overflow: auto;
        border: 1px solid rgba(255, 91, 26, 0.72);
        border-radius: 8px;
        background: #100302;
        color: #fff3e8;
        box-shadow: 0 0 44px rgba(255, 51, 8, 0.3);
    }
    .beat-field-preview-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 16px;
        padding: 16px 18px;
        border-bottom: 1px solid rgba(255, 97, 31, 0.38);
        background: #250604;
    }
    .beat-field-preview-mode {
        display: inline-grid;
        grid-template-columns: repeat(2, minmax(78px, 1fr));
        padding: 3px;
        border: 1px solid rgba(255, 137, 54, 0.46);
        border-radius: 5px;
        background: #120403;
    }
    .beat-field-preview-mode button {
        min-height: 30px;
        padding: 5px 12px;
        border: 0;
        border-radius: 3px;
        background: transparent;
        color: #bda59b;
        font-family: 'Oxanium', var(--main-font);
        font-size: 11px;
        font-weight: 900;
        cursor: pointer;
    }
    .beat-field-preview-mode button:hover,
    .beat-field-preview-mode button:focus-visible {
        color: #fff2d4;
        outline: 1px solid rgba(255, 190, 84, 0.58);
    }
    .beat-field-preview-mode button.is-active {
        background: #e83a0e;
        color: #fff;
        box-shadow: 0 0 12px rgba(255, 73, 19, 0.34);
    }
    .beat-field-preview-mode button:disabled {
        color: #654f48;
        cursor: default;
        opacity: 0.62;
        outline: 0;
    }
    .beat-field-preview-title span,
    .beat-field-preview-title strong {
        display: block;
        font-family: 'Oxanium', var(--main-font);
        letter-spacing: 0;
    }
    .beat-field-preview-title span {
        color: #ffae45;
        font-size: 10px;
        font-weight: 800;
    }
    .beat-field-preview-title strong {
        margin-top: 2px;
        font-size: 22px;
    }
    .beat-field-preview-close {
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.24);
        border-radius: 50%;
        background: #35110c;
        color: #fff;
        font-size: 25px;
        line-height: 1;
        cursor: pointer;
    }
    .beat-field-hud {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-bottom: 1px solid rgba(255, 97, 31, 0.28);
        background: #180504;
    }
    .beat-field-hud-item {
        min-width: 0;
        padding: 11px 14px;
        border-right: 1px solid rgba(255, 97, 31, 0.22);
        text-align: center;
    }
    .beat-field-hud-item:last-child {
        border-right: 0;
    }
    .beat-field-hud-item span,
    .beat-field-hud-item strong {
        display: block;
        font-family: 'Oxanium', var(--main-font);
        letter-spacing: 0;
    }
    .beat-field-hud-item span {
        color: #bfa69a;
        font-size: 9px;
        font-weight: 700;
    }
    .beat-field-hud-item strong {
        margin-top: 2px;
        color: #ffd072;
        font-size: 18px;
    }
    .beat-field-preview-body {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(210px, 0.6fr);
        align-items: center;
        gap: 18px;
        padding: 20px;
    }
    .beat-field-stage {
        display: grid;
        grid-template-columns: 52px minmax(0, 500px);
        align-items: center;
        justify-content: center;
        gap: 14px;
        min-width: 0;
    }
    .beat-field-gauge {
        display: grid;
        justify-items: center;
        gap: 7px;
        color: #ffb64a;
        font-family: 'Oxanium', var(--main-font);
        text-align: center;
    }
    .beat-field-gauge-label {
        font-size: 10px;
        font-weight: 800;
    }
    .beat-field-gauge-track {
        position: relative;
        width: 20px;
        height: 250px;
        overflow: hidden;
        border: 2px solid rgba(255, 132, 43, 0.72);
        border-radius: 6px;
        background: #260704;
        box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.82), 0 0 10px rgba(255, 76, 13, 0.2);
    }
    .beat-field-gauge-fill {
        position: absolute;
        right: 2px;
        bottom: 2px;
        left: 2px;
        height: 0;
        border-radius: 3px;
        background: linear-gradient(0deg, #ff3710 0%, #ff8d22 58%, #ffe56b 100%);
        box-shadow: 0 0 12px rgba(255, 93, 20, 0.82);
        transition: height 0.2s ease;
    }
    .beat-field-gauge-value {
        color: #ffe079;
        font-size: 16px;
        line-height: 1;
    }
    .beat-field-gauge-unit {
        min-height: 12px;
        color: #a98b80;
        font-size: 8px;
        font-weight: 700;
    }
    .beat-field-gauge.is-burning {
        color: #7cf8ff;
    }
    .beat-field-gauge.is-burning .beat-field-gauge-track {
        border-color: #7cf8ff;
        box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.82), 0 0 15px rgba(40, 224, 240, 0.56);
    }
    .beat-field-gauge.is-burning .beat-field-gauge-fill {
        background: linear-gradient(0deg, #ff3b0f 0%, #ffb02d 50%, #fff27c 78%, #7cf8ff 100%);
        box-shadow: 0 0 15px rgba(255, 87, 17, 0.95), 0 0 8px rgba(124, 248, 255, 0.82);
    }
    .beat-field-gauge.is-burning .beat-field-gauge-value {
        color: #7cf8ff;
    }
    .beat-field-wheel {
        position: relative;
        width: min(100%, 500px);
        aspect-ratio: 1;
        overflow: hidden;
        margin: auto;
    }
    .beat-field-projector,
    .beat-field-wheel-mask {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
    }
    .beat-field-projector {
        z-index: 1;
        filter: drop-shadow(0 18px 34px rgba(255, 54, 9, 0.22));
    }
    .beat-field-wheel-mask {
        z-index: 3;
    }
    .beat-next-token {
        --beat-next-token-duration: 220ms;
        --beat-next-label-x: 0px;
        --beat-next-label-y: -10px;
        --beat-next-image-x: 0px;
        --beat-next-image-y: -5px;
        --beat-next-repeat-x: 0px;
        --beat-next-repeat-y: 0px;
        position: absolute;
        z-index: 5;
        top: 32.5%;
        left: 50.4%;
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 1px;
        width: 25%;
        aspect-ratio: 1;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.78);
        pointer-events: none;
    }
    .beat-next-token.is-visible {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    .beat-next-token.is-entering {
        animation: beat-next-token-fade-in var(--beat-next-token-duration) ease-out both;
    }
    .beat-next-token.is-leaving {
        animation: beat-next-token-fade-out var(--beat-next-token-duration) ease-in both;
    }
    .beat-next-token-label {
        position: relative;
        z-index: 1;
        color: #ffd56a;
        font-family: 'Oxanium', var(--main-font);
        font-size: clamp(7px, 0.9vw, 11px);
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0;
        white-space: nowrap;
        -webkit-text-stroke: 0.35px rgba(36, 8, 2, 0.92);
        text-shadow: 0 1px 1px #1e0501, 0 0 4px #ff3c0a, 0 0 9px rgba(255, 94, 15, 0.9);
        transform: translate(var(--beat-next-label-x), var(--beat-next-label-y));
    }
    .beat-next-token-image {
        display: block;
        width: 68%;
        aspect-ratio: 1;
        object-fit: contain;
        filter: drop-shadow(0 0 5px rgba(255, 185, 52, 0.95)) drop-shadow(0 0 10px rgba(255, 49, 8, 0.72));
        transform: translate(var(--beat-next-image-x), var(--beat-next-image-y));
    }
    .beat-next-token-repeat {
        position: absolute;
        z-index: 2;
        top: 20%;
        right: 15%;
        opacity: 0;
        color: #fff2b0;
        font-family: 'Oxanium', var(--main-font);
        font-size: clamp(30px, 1.15vw, 50px);
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0;
        white-space: nowrap;
        transform: translate(var(--beat-next-repeat-x), var(--beat-next-repeat-y));
        -webkit-text-stroke: 0.45px rgba(44, 8, 1, 0.95);
        text-shadow: 0 1px 1px #250501, 0 0 5px #ff4b0b, 0 0 10px rgba(255, 174, 38, 0.9);
    }
    .beat-next-token-repeat.is-visible {
        opacity: 1;
    }
    .beat-next-token-repeat.is-updating {
        animation: beat-next-token-repeat-pop 180ms ease-out both;
    }
    @keyframes beat-next-token-repeat-pop {
        0% { opacity: 0; transform: translate(var(--beat-next-repeat-x), var(--beat-next-repeat-y)) scale(0.62); }
        65% { opacity: 1; transform: translate(var(--beat-next-repeat-x), var(--beat-next-repeat-y)) scale(1.16); }
        100% { opacity: 1; transform: translate(var(--beat-next-repeat-x), var(--beat-next-repeat-y)) scale(1); }
    }
    @keyframes beat-next-token-fade-in {
        0% { opacity: 0; transform: translate(-50%, -50%) scale(0.82); filter: brightness(1.35); }
        100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
    }
    @keyframes beat-next-token-fade-out {
        0% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
        100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); filter: brightness(0.84); }
    }
    .beat-field-fever-flames {
        position: absolute;
        z-index: 4;
        left: 50.6%;
        top: 32.6%;
        width: 52.8%;
        aspect-ratio: 1;
        border-radius: 50%;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.98);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .beat-field-fever-flames::before,
    .beat-field-fever-flames::after {
        content: '';
        position: absolute;
        border-radius: 50%;
    }
    .beat-field-fever-flames::before {
        inset: -2px;
        border: 3px solid #ff6a1f;
        box-shadow:
            0 0 3px #ffcf55,
            0 0 7px rgba(255, 83, 18, 0.82),
            0 0 11px rgba(205, 25, 10, 0.46),
            inset 0 0 3px rgba(255, 225, 111, 0.62);
    }
    .beat-field-fever-flames::after {
        inset: -9px;
        background:
            radial-gradient(circle at 50% 0%, rgba(255, 196, 60, 0.76) 0 2%, rgba(255, 70, 18, 0.36) 3%, transparent 6%),
            radial-gradient(circle at 96% 62%, rgba(255, 91, 20, 0.66) 0 1.8%, rgba(196, 22, 10, 0.3) 3%, transparent 5.5%),
            radial-gradient(circle at 18% 91%, rgba(255, 155, 35, 0.7) 0 2.2%, rgba(255, 45, 13, 0.3) 4%, transparent 6.5%),
            radial-gradient(circle at 3% 35%, rgba(230, 43, 13, 0.58) 0 1.6%, rgba(255, 114, 20, 0.24) 3%, transparent 5%);
        filter: blur(3px);
        animation: beat-field-haze-orbit 3.2s linear infinite;
    }
    .beat-field-wheel.is-fever .beat-field-fever-flames {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        animation: beat-field-heat-pulse 1.1s ease-in-out infinite alternate;
    }
    @keyframes beat-field-heat-pulse {
        from { filter: drop-shadow(0 0 2px rgba(204, 26, 9, 0.56)); }
        to { filter: drop-shadow(0 0 5px rgba(255, 124, 25, 0.78)); }
    }
    @keyframes beat-field-haze-orbit {
        from { opacity: 0.45; transform: rotate(0deg); }
        50% { opacity: 0.72; }
        to { opacity: 0.45; transform: rotate(360deg); }
    }
    #beat-field-token-layer {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
    }
    .beat-field-token,
    .beat-field-judge-ring {
        position: absolute;
        left: var(--slot-x);
        top: var(--slot-y);
        width: 15%;
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
    }
    .beat-field-token {
        object-fit: contain;
        transition: left 0.22s linear, top 0.22s linear, opacity 0.12s ease;
        filter: drop-shadow(0 0 9px rgba(255, 76, 16, 0.72));
    }
    .beat-field-token.is-retiring {
        transition: left 0.22s linear, top 0.22s linear, opacity 0.26s ease-out;
    }
    .beat-field-judge-ring {
        z-index: 4;
        width: 10%;
        border: 3px solid #7cf8ff;
        border-radius: 50%;
        box-shadow: 0 0 12px #1ad7ea, inset 0 0 12px rgba(26, 215, 234, 0.75);
        pointer-events: none;
    }
    .beat-field-side {
        align-self: stretch;
        display: grid;
        align-content: center;
        gap: 20px;
        padding: 8px 8px 8px 20px;
        border-left: 1px solid rgba(255, 97, 31, 0.26);
    }
    .beat-field-side-label {
        color: #ff9f32;
        font-family: 'Oxanium', var(--main-font);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0;
    }
    .beat-field-survival {
        display: grid;
        gap: 7px;
    }
    .beat-field-survival-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        color: #7cf8ff;
        font-family: 'Oxanium', var(--main-font);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0;
    }
    .beat-field-survival-head strong {
        color: #d9fdff;
        font-size: 18px;
        line-height: 1;
        text-shadow: 0 0 10px rgba(68, 224, 242, 0.68);
    }
    .beat-field-survival-track {
        position: relative;
        width: 100%;
        height: 13px;
        overflow: hidden;
        border: 2px solid rgba(124, 248, 255, 0.72);
        border-radius: 5px;
        background: #06191c;
        box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.78), 0 0 10px rgba(40, 216, 235, 0.22);
    }
    .beat-field-survival-fill {
        position: absolute;
        top: 2px;
        bottom: 2px;
        left: 2px;
        width: 100%;
        max-width: calc(100% - 4px);
        border-radius: 2px;
        background: linear-gradient(90deg, #24bfd8 0%, #67e8f2 62%, #d4fcff 100%);
        box-shadow: 0 0 10px rgba(85, 232, 244, 0.82);
        transition: width 0.2s ease;
    }
    .beat-field-code {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 8px;
    }
    .beat-field-code span {
        display: grid;
        place-items: center;
        width: 34px;
        height: 40px;
        border-bottom: 2px solid #ff5a20;
        color: #fff2df;
        font-family: 'Oxanium', var(--main-font);
        font-size: 20px;
        font-weight: 800;
    }
    .beat-field-judge {
        min-height: 42px;
        color: #7cf8ff;
        font-family: 'Oxanium', var(--main-font);
        font-size: 30px;
        font-weight: 900;
        letter-spacing: 0;
        white-space: nowrap;
        text-shadow: 0 0 16px rgba(48, 223, 241, 0.72);
    }
    .beat-field-judge.has-timing-feedback {
        font-size: 18px;
    }
    .beat-field-start-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        min-height: 48px;
        padding: 9px 16px;
        border: 1px solid #ffc64f;
        border-radius: 6px;
        background: #f03a0d;
        color: #fff;
        font-family: 'Oxanium', var(--main-font);
        font-size: 16px;
        font-weight: 900;
        letter-spacing: 0;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(240, 40, 8, 0.32);
    }
    .beat-field-start-btn:hover,
    .beat-field-start-btn:focus-visible {
        background: #ff541c;
    }
    .beat-field-start-btn.is-pausing {
        border-color: #75edf5;
        background: #0d6872;
        box-shadow: 0 8px 20px rgba(36, 207, 224, 0.2);
    }
    .beat-field-start-btn.is-pausing:hover,
    .beat-field-start-btn.is-pausing:focus-visible {
        background: #10818c;
    }
    .beat-field-start-btn:disabled {
        border-color: rgba(255, 255, 255, 0.14);
        background: #3a211b;
        color: #9f8880;
        cursor: default;
        box-shadow: none;
    }
    .beat-field-note {
        margin: 0;
        color: #cbb4aa;
        font-size: 12px;
        line-height: 1.65;
    }
    .beat-play-field {
        position: fixed;
        inset: 0;
        z-index: 13900;
        display: none;
        overflow: hidden;
        background: #090100;
    }
    .beat-play-field.is-open {
        display: block;
        animation: boardgame-intro-fade-in 0.28s ease-out both;
    }
    .beat-play-field.is-window-mode .beat-play-scene {
        --beat-scene-zoom: 1;
        top: 5px;
        width: min(100vw, 800px);
        min-width: 0;
        height: 100dvh;
        aspect-ratio: auto;
        background: #090100;
        box-shadow: 0 0 48px rgba(255, 67, 12, 0.16);
    }
    .beat-play-field.is-window-mode .beat-result-preview {
        padding: clamp(8px, 2.5%, 26px);
    }
    .beat-play-field.is-window-mode .beat-result-gate {
        width: min(92%, 820px);
        max-height: 92%;
        overflow-y: auto;
    }
    .beat-play-field.is-window-mode .beat-play-number-pad {
        top: 57%;
        gap: clamp(30px, 2vw, 60px);
        width: min(110%, 550px);
    }
    .beat-play-field.is-window-mode .beat-play-number-key {
        font-size: clamp(26px, 2.3vw, 42px);
    }
    .beat-entry-caution,
    .beat-viewport-guard {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        box-sizing: border-box;
        padding: clamp(18px, 4vw, 42px);
        background: rgba(3, 0, 0, 0.9);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 240ms ease, visibility 240ms ease;
    }
    .beat-entry-caution {
        z-index: 12;
        place-items: start center;
        padding-top: clamp(150px, 22vw, 230px);
    }
    .beat-viewport-guard { z-index: 14; }
    .beat-entry-caution.is-open,
    .beat-viewport-guard.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .beat-caution-panel {
        display: grid;
        justify-items: center;
        width: min(100%, 460px);
        padding: clamp(18px, 3vw, 30px);
        box-sizing: border-box;
        border: 1px solid rgba(255, 115, 26, 0.74);
        border-radius: 6px;
        background: #130302;
        color: #fff0df;
        text-align: center;
        box-shadow: 0 0 24px rgba(255, 52, 9, 0.38), inset 0 0 34px rgba(111, 14, 3, 0.2);
    }
    .beat-caution-image {
        display: block;
        width: min(82%, 330px);
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 0 9px rgba(255, 178, 48, 0.72)) drop-shadow(0 0 20px rgba(255, 48, 9, 0.58));
    }
    .beat-caution-title {
        margin: 4px 0 0;
        color: #ffd361;
        font-family: 'Oxanium', var(--main-font);
        font-size: clamp(22px, 4vw, 34px);
        font-weight: 900;
        line-height: 1;
        text-shadow: 0 0 10px rgba(255, 75, 14, 0.9);
    }
    .beat-caution-copy {
        margin: 14px 0 0;
        color: #f6dfd0;
        font-size: clamp(13px, 2vw, 16px);
        font-weight: 700;
        line-height: 1.65;
    }
    .beat-shift-password-input {
        width: min(100%, 300px);
        min-height: 46px;
        margin-top: 18px;
        padding: 10px 14px;
        box-sizing: border-box;
        border: 1px solid rgba(255, 190, 88, 0.74);
        border-radius: 5px;
        background: #080202;
        color: #fff3d2;
        font-family: 'Oxanium', var(--main-font);
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 0;
        text-align: center;
        outline: none;
    }
    .beat-shift-password-input:focus {
        border-color: #fff2ae;
        box-shadow: 0 0 14px rgba(255, 72, 14, 0.48);
    }
    .beat-shift-password-error {
        min-height: 20px;
        margin: 8px 0 0;
        color: #ff8267;
        font-size: 12px;
        font-weight: 800;
        opacity: 0;
    }
    .beat-shift-password-error.is-visible { opacity: 1; }
    .beat-caution-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        width: 100%;
        margin-top: 20px;
    }
    .beat-caution-action {
        min-width: 126px;
        min-height: 42px;
        padding: 9px 18px;
        border: 1px solid rgba(255, 190, 88, 0.74);
        border-radius: 5px;
        background: #35100a;
        color: #ffe7d2;
        font-family: 'Oxanium', var(--main-font);
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
    }
    .beat-caution-action.is-primary {
        border-color: #ffe178;
        background: #f04413;
        color: #fff;
        box-shadow: 0 0 14px rgba(255, 72, 14, 0.58);
    }
    .beat-caution-action:hover,
    .beat-caution-action:focus-visible {
        border-color: #fff2ae;
        background: #ff541c;
        outline: none;
    }
    .beat-viewport-guard[data-state="caution"] .beat-viewport-pause-actions {
        display: none;
    }
    .beat-viewport-guard[data-state="pause"] .beat-caution-image {
        width: min(62%, 250px);
        opacity: 0.82;
    }
    .mode-loading-overlay {
        position: absolute;
        z-index: 6;
        inset: 0;
        display: grid;
        place-items: center;
        overflow: hidden;
        box-sizing: border-box;
        padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
        background: #000;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.8s ease, visibility 0.8s ease;
    }
    .mode-loading-overlay[hidden] {
        display: none;
    }
    .mode-loading-overlay.is-leaving {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .beat-play-loading-content {
        display: grid;
        justify-items: center;
        gap: clamp(4px, 1dvh, 10px);
        width: min(72vw, 340px);
    }
    .beat-play-loading-logo {
        display: block;
        width: min(100%, 300px);
        max-height: min(42dvh, 300px);
        object-fit: contain;
        filter: drop-shadow(0 0 8px rgba(255, 43, 9, 0.9)) drop-shadow(0 0 24px rgba(255, 92, 16, 0.5));
        animation: beat-loading-logo-pulse 1.4s ease-in-out infinite alternate;
    }
    .beat-play-loading-copy {
        position: relative;
        width: 12ch;
        height: 1.4em;
        color: #ff5a22;
        font-family: 'Oxanium', var(--main-font);
        font-size: clamp(18px, 3.8vw, 28px);
        font-weight: 800;
        line-height: 1.4;
        text-align: center;
        text-shadow: 0 0 8px rgba(255, 61, 18, 0.92), 0 0 18px rgba(255, 109, 29, 0.48);
        animation: beat-loading-copy-float 1.8s ease-in-out infinite;
    }
    .beat-play-loading-step {
        position: absolute;
        inset: 0;
        opacity: 1;
    }
    .boardgame-select-loading {
        position: fixed;
        z-index: 14500;
    }
    .boardgame-select-loading:not([hidden]):not(.is-leaving) {
        animation: boardgame-loading-fade-in 0.5s ease-out both;
    }
    .boardgame-select-loading.is-leaving {
        visibility: visible;
        animation: boardgame-loading-fade-out 0.8s ease-in both;
    }
    .boardgame-select-loading-content {
        display: grid;
        justify-items: center;
        gap: clamp(2px, 0.7dvh, 7px);
        width: min(76vw, 380px);
    }
    .boardgame-select-loading-logo {
        display: block;
        width: min(100%, 340px);
        max-height: min(44dvh, 340px);
        object-fit: contain;
        filter:
            drop-shadow(0 0 8px rgba(51, 221, 255, 0.92))
            drop-shadow(0 0 24px rgba(31, 80, 255, 0.66))
            drop-shadow(0 0 34px rgba(255, 184, 53, 0.22));
        animation: beat-loading-logo-pulse 1.4s ease-in-out infinite alternate;
    }
    .boardgame-select-loading-copy {
        color: #75ecff;
        font-family: 'Oxanium', var(--main-font);
        font-size: clamp(18px, 3.8vw, 28px);
        font-weight: 800;
        line-height: 1.4;
        text-align: center;
        text-shadow:
            0 0 7px rgba(80, 231, 255, 0.98),
            0 0 18px rgba(35, 96, 255, 0.88),
            0 0 30px rgba(255, 185, 52, 0.28);
        animation: beat-loading-copy-float 1.8s ease-in-out infinite;
    }
    @keyframes beat-loading-logo-pulse {
        from { opacity: 0.88; transform: scale(0.985); }
        to { opacity: 1; transform: scale(1); }
    }
    @keyframes boardgame-loading-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes boardgame-loading-fade-out {
        from { opacity: 1; }
        to { opacity: 0; }
    }
    @keyframes beat-loading-copy-float {
        0%, 100% { transform: translateY(2px); }
        50% { transform: translateY(-5px); }
    }
    .beat-play-scene {
        --beat-scene-zoom: 1.2;
        position: absolute;
        top: 0;
        left: 50%;
        width: max(100vw, calc(100dvh * 1672 / 941));
        aspect-ratio: 1672 / 941;
        overflow: hidden;
        transform: translateX(-50%) scale(var(--beat-scene-zoom));
        transform-origin: 50% 0;
    }
    .beat-play-background {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 0;
        user-select: none;
        pointer-events: none;
    }
    .beat-play-layer {
        position: absolute;
        inset: 0;
    }
    .beat-play-auto-rig {
        --beat-play-rig-top: 8.5%;
        --beat-play-rig-left: 50%;
        --beat-play-rig-width: min(19%, 360px);
        position: absolute;
        z-index: 2;
        top: var(--beat-play-rig-top);
        left: var(--beat-play-rig-left);
        display: none;
        width: var(--beat-play-rig-width);
        aspect-ratio: 1;
        transform: translateX(-50%);
    }
    .beat-play-field.is-auto-mode .beat-play-auto-rig,
    .beat-play-field.is-live-mode .beat-play-auto-rig {
        display: block;
    }
    .beat-play-scoreboard {
        position: absolute;
        z-index: 9;
        top: -24%;
        left: 45%;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: clamp(6px, 0.65vw, 12px);
        width: 60%;
        min-height: clamp(21px, 2.85vw, 35px);
        padding: clamp(3.8px, 0.4275vw, 7.6px) clamp(9px, 0.85vw, 16px);
        box-sizing: border-box;
        border: 2px solid rgba(255, 129, 34, 0.9);
        border-radius: 4px;
        background: linear-gradient(180deg, rgba(38, 8, 3, 0.96), rgba(12, 3, 2, 0.98));
        box-shadow:
            inset 0 0 12px rgba(255, 83, 13, 0.2),
            0 0 8px rgba(255, 76, 13, 0.74),
            0 0 20px rgba(255, 53, 8, 0.3);
        color: #ffab3d;
        font-family: 'Oxanium', var(--main-font);
        transform: translateX(-50%) scale(0.9);
        transform-origin: top center;
        pointer-events: none;
    }
    .beat-play-scoreboard span {
        font-size: clamp(7px, 0.58vw, 10px);
        font-weight: 800;
        line-height: 1;
    }
    .beat-play-scoreboard strong {
        min-width: 0;
        color: #fff2a3;
        font-size: clamp(15px, 1.55vw, 27px);
        font-weight: 900;
        line-height: 1;
        text-align: right;
        text-shadow: 0 0 8px rgba(255, 115, 25, 0.92);
    }
    .beat-play-scoreboard strong.is-updated {
        animation: beat-play-score-pulse 180ms ease-out;
    }
    @keyframes beat-play-score-pulse {
        0% { color: #fff; transform: scale(1.12); filter: brightness(1.7); }
        100% { color: #fff2a3; transform: scale(1); filter: brightness(1); }
    }
    .beat-play-auto-wheel {
        position: absolute;
        inset: 0;
        width: 130%;
        top: -12%;
        left: -18%;
    }
    .beat-play-auto-gauge {
        position: absolute;
        z-index: 6;
        top: 17%;
        display: grid;
        justify-items: center;
        gap: 5px;
        width: clamp(42px, 3.8vw, 58px);
        color: #ffb64a;
        font-family: 'Oxanium', var(--main-font);
        font-weight: 800;
        text-align: center;
    }
    .beat-play-auto-gauge.is-fever { left: -17%; }
    .beat-play-auto-gauge.is-survival {
        right: -17%;
        color: #7cf8ff;
    }
    .beat-play-auto-gauge-label {
        font-size: clamp(7px, 0.58vw, 10px);
        line-height: 1;
        white-space: nowrap;
    }
    .beat-play-auto-gauge-track {
        position: relative;
        width: clamp(12px, 1vw, 18px);
        height: clamp(112px, 13vw, 220px);
        overflow: hidden;
        border: 2px solid rgba(255, 132, 43, 0.82);
        border-radius: 5px;
        background: #260704;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.86), 0 0 10px rgba(255, 76, 13, 0.34);
    }
    .beat-play-auto-gauge.is-survival .beat-play-auto-gauge-track {
        border-color: rgba(124, 248, 255, 0.88);
        background: #06191c;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.86), 0 0 12px rgba(40, 216, 235, 0.4);
    }
    .beat-play-auto-gauge-fill {
        position: absolute;
        right: 2px;
        bottom: 2px;
        left: 2px;
        height: 0;
        border-radius: 2px;
        background: linear-gradient(0deg, #ff3710 0%, #ff8d22 58%, #ffe56b 100%);
        box-shadow: 0 0 12px rgba(255, 93, 20, 0.88);
        transition: height 180ms ease;
    }
    .beat-play-auto-gauge.is-survival .beat-play-auto-gauge-fill {
        height: 100%;
        background: linear-gradient(0deg, #24bfd8 0%, #67e8f2 62%, #d4fcff 100%);
        box-shadow: 0 0 10px rgba(85, 232, 244, 0.86);
    }
    .beat-play-auto-gauge.is-burning {
        color: #fff089;
    }
    .beat-play-auto-gauge.is-burning .beat-play-auto-gauge-track {
        border-color: #ffe570;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.86), 0 0 15px rgba(255, 69, 13, 0.7);
    }
    .beat-play-auto-gauge.is-burning .beat-play-auto-gauge-fill {
        background: linear-gradient(0deg, #ff2409 0%, #ff8a16 48%, #fff078 100%);
    }
    .beat-play-auto-gauge-value {
        font-size: clamp(10px, 0.9vw, 16px);
        line-height: 1;
    }
    #beat-play-token-layer {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
    }
    .beat-play-number-pad {
        position: absolute;
        z-index: 2;
        top: 54%;
        left: 50%;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: clamp(38px, 0.7vw, 77px);
        width: min(32%, 580px);
        transform: translateX(-50%);
    }
    .beat-play-field.is-auto-mode .beat-play-number-pad {
        pointer-events: none;
    }
    .beat-play-number-key {
        position: relative;
        display: grid;
        place-items: center;
        width: 100%;
        aspect-ratio: 1;
        padding: 0;
        overflow: hidden;
        border: 2px solid rgba(255, 111, 33, 0.9);
        border-radius: 6px;
        background:
            linear-gradient(145deg, rgba(72, 15, 5, 0.94), rgba(19, 4, 2, 0.97)),
            #1c0502;
        color: #ffe1a1;
        font-family: 'Oxanium', var(--main-font);
        font-size: clamp(22px, 2.3vw, 42px);
        font-weight: 900;
        line-height: 1;
        text-shadow: 0 0 10px rgba(255, 105, 26, 0.86);
        box-shadow:
            inset 0 0 0 2px rgba(255, 191, 75, 0.08),
            inset 0 -10px 22px rgba(0, 0, 0, 0.62),
            0 0 12px rgba(255, 58, 10, 0.28);
        cursor: pointer;
        transform: translateY(0) scale(1);
        transition: transform 90ms ease, border-color 90ms ease, background 90ms ease, color 90ms ease, box-shadow 90ms ease;
    }
    .beat-play-number-key::before {
        content: '';
        position: absolute;
        inset: 7%;
        border: 1px solid rgba(255, 177, 77, 0.22);
        border-radius: 3px;
        pointer-events: none;
    }
    .beat-play-number-key:hover,
    .beat-play-number-key:focus-visible {
        outline: none;
        border-color: #ffc45a;
        color: #fff7d1;
        box-shadow: inset 0 0 18px rgba(255, 92, 19, 0.32), 0 0 16px rgba(255, 83, 17, 0.58);
    }
    .beat-play-number-key.is-active {
        border-color: #fff6ba;
        background: linear-gradient(145deg, #fff29a 0%, #ffac32 34%, #ff4a12 100%);
        color: #240400;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62), 0 0 9px #fff8bd;
        box-shadow:
            inset 0 0 16px rgba(255, 255, 224, 0.92),
            0 0 8px #fff4a8,
            0 0 24px rgba(255, 113, 20, 0.96),
            0 0 44px rgba(255, 43, 8, 0.58);
        transform: translateY(-4px) scale(1.055);
    }
    .beat-play-verdict {
        position: absolute;
        z-index: 3;
        top: 47.5%;
        left: 50%;
        display: grid;
        place-items: center;
        width: min(18%, 310px);
        min-height: 10%;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -50%) scale(0.62) rotate(-4deg);
        transform-origin: center;
    }
    .beat-play-verdict img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 118px;
        object-fit: contain;
        filter: drop-shadow(0 0 8px rgba(52, 189, 255, 0.9)) drop-shadow(0 0 22px rgba(15, 104, 255, 0.58));
    }
    .beat-play-verdict[data-burning="true"] img,
    .beat-play-verdict[data-judgement="MISS"] img {
        filter: drop-shadow(0 0 8px rgba(255, 67, 20, 0.96)) drop-shadow(0 0 24px rgba(224, 16, 7, 0.68));
    }
    .beat-play-verdict.is-visible {
        animation: beat-play-verdict-pop 720ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
    }
    .beat-play-achievement {
        position: absolute;
        z-index: 7;
        top: 32.5%;
        left: 50.4%;
        display: grid;
        place-items: center;
        width: 62%;
        height: 22%;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, -50%);
    }
    .beat-play-achievement-image {
        position: relative;
        z-index: 2;
        display: block;
        width: 100%;
        max-height: 100%;
        object-fit: contain;
        opacity: 0;
        filter: drop-shadow(0 0 5px #fff4a6) drop-shadow(0 0 14px #ff7a18) drop-shadow(0 0 25px rgba(225, 28, 7, 0.9));
    }
    .beat-play-achievement.is-excellent .beat-play-achievement-image { width: 106%; }
    .beat-play-achievement-star {
        --burst-x: 0px;
        --burst-y: 0px;
        --burst-delay: 0ms;
        --burst-scale: 1;
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        width: clamp(7px, 4.5%, 18px);
        aspect-ratio: 1;
        background: linear-gradient(145deg, #fffbd0 0 20%, #ffc13d 42%, #ff5b12 70%, #d91808 100%);
        clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0 50%, 39% 35%);
        opacity: 0;
        filter: drop-shadow(0 0 4px #fff2a2) drop-shadow(0 0 9px #ff4a0b);
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    .beat-play-achievement.is-visible {
        visibility: visible;
        animation: beat-play-achievement-layer 1680ms ease both;
    }
    .beat-play-achievement.is-visible .beat-play-achievement-image {
        animation: beat-play-achievement-stamp 1680ms cubic-bezier(0.14, 0.86, 0.18, 1.08) both;
    }
    .beat-play-achievement.is-visible .beat-play-achievement-star {
        animation: beat-play-achievement-star 940ms cubic-bezier(0.13, 0.74, 0.2, 1) var(--burst-delay) both;
    }
    @keyframes beat-play-achievement-layer {
        0%, 100% { opacity: 0; }
        8%, 78% { opacity: 1; }
    }
    @keyframes beat-play-achievement-stamp {
        0% { opacity: 0; transform: scale(0.28) rotate(-7deg); filter: brightness(2.5) blur(2px); }
        18% { opacity: 1; transform: scale(1.18) rotate(2deg); filter: brightness(1.55) blur(0); }
        34% { opacity: 1; transform: scale(0.96) rotate(-0.5deg); filter: brightness(1.08); }
        48%, 78% { opacity: 1; transform: scale(1); filter: brightness(1); }
        100% { opacity: 0; transform: scale(1.04); filter: brightness(0.92); }
    }
    @keyframes beat-play-achievement-star {
        0% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0deg); }
        18% { opacity: 1; }
        62% { opacity: 1; transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(var(--burst-scale)) rotate(155deg); }
        100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(0.25) rotate(245deg); }
    }
    @keyframes beat-play-verdict-pop {
        0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-5deg); filter: brightness(2.2) blur(2px); }
        24% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(1.5deg); filter: brightness(1.45) blur(0); }
        48% { opacity: 1; transform: translate(-50%, -50%) scale(0.96) rotate(0); filter: brightness(1.08); }
        72% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
        100% { opacity: 0; transform: translate(-50%, -56%) scale(1.02); filter: brightness(1); }
    }
    .beat-play-close {
        position: absolute;
        z-index: 2;
        top: max(14px, env(safe-area-inset-top));
        right: max(14px, env(safe-area-inset-right));
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid rgba(255, 224, 190, 0.62);
        border-radius: 50%;
        background: rgba(21, 3, 1, 0.82);
        color: #fff8ed;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 0 18px rgba(255, 71, 18, 0.4);
    }
    .beat-play-close:hover,
    .beat-play-close:focus-visible {
        border-color: #ffb04d;
        background: rgba(66, 10, 3, 0.94);
    }
    .beat-play-field.is-game-over .beat-play-close { z-index: 5; }
    .beat-play-field.is-viewport-blocked .beat-play-close { z-index: 15; }
    .beat-game-over {
        position: absolute;
        z-index: 4;
        inset: 0;
        display: grid;
        place-items: center;
        overflow: hidden;
        background: rgba(5, 0, 0, 0.84);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .beat-game-over.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        animation: beat-game-over-dim 420ms ease-out both;
    }
    .beat-game-over-content {
        display: grid;
        justify-items: center;
        gap: clamp(10px, 1.8dvh, 18px);
    }
    .beat-game-over-stamp {
        position: relative;
        width: min(62vw, 660px);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
    }
    .beat-game-over-stamp::before {
        content: '';
        position: absolute;
        inset: 9%;
        border: 2px solid rgba(255, 116, 28, 0.82);
        border-radius: 50%;
        box-shadow: 0 0 22px rgba(255, 53, 8, 0.92), inset 0 0 34px rgba(255, 130, 22, 0.42);
        opacity: 0;
    }
    .beat-game-over.is-open .beat-game-over-stamp::before {
        animation: beat-game-over-ring 980ms ease-out 180ms both;
    }
    .beat-game-over-image {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 0 18px rgba(255, 69, 12, 0.9)) drop-shadow(0 20px 36px rgba(0, 0, 0, 0.7));
    }
    .beat-game-over.is-open .beat-game-over-image {
        animation: beat-game-over-stamp-in 900ms cubic-bezier(0.13, 0.88, 0.18, 1.08) both;
    }
    .beat-game-over-action {
        min-width: clamp(170px, 21vw, 250px);
        padding: 13px 28px;
        border: 2px solid #ffc45f;
        border-radius: 4px;
        background: #ff4318;
        color: #fff8e9;
        font-family: 'Oxanium', var(--main-font);
        font-size: clamp(17px, 2vw, 24px);
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 0 16px rgba(255, 68, 18, 0.82), inset 0 0 12px rgba(255, 220, 127, 0.24);
        opacity: 0;
    }
    .beat-game-over.is-open .beat-game-over-action {
        animation: beat-game-over-retry-in 420ms ease-out 720ms forwards;
    }
    .beat-game-over-action:hover,
    .beat-game-over-action:focus-visible {
        border-color: #fff2b3;
        background: #ff5b1f;
        box-shadow: 0 0 24px rgba(255, 82, 18, 0.96), inset 0 0 14px rgba(255, 236, 170, 0.34);
        outline: none;
    }
    .beat-result-preview {
        position: absolute;
        z-index: 3;
        inset: 0;
        display: grid;
        place-items: center;
        padding: clamp(18px, 4vw, 54px);
        box-sizing: border-box;
        background: rgba(8, 1, 0, 0.7);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 180ms ease, visibility 180ms ease;
    }
    .beat-result-preview.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .beat-result-gate {
        position: relative;
        isolation: isolate;
        width: min(920px, 94vw);
        min-height: min(560px, 82dvh);
        display: grid;
        grid-template-rows: auto 1fr auto;
        overflow: hidden;
        border: 1px solid rgba(255, 119, 35, 0.82);
        border-radius: 6px;
        background: rgba(18, 4, 2, 0.97);
        box-shadow: 0 0 0 1px rgba(255, 195, 92, 0.12) inset, 0 0 44px rgba(255, 48, 8, 0.34), 0 24px 70px rgba(0, 0, 0, 0.72);
        clip-path: inset(0 50% 0 50%);
    }
    .beat-result-preview.is-open .beat-result-gate {
        animation: beat-result-gate-open 520ms cubic-bezier(0.18, 0.82, 0.2, 1) forwards;
    }
    .beat-result-gate::before,
    .beat-result-gate::after {
        content: '';
        position: absolute;
        z-index: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        background: rgba(42, 8, 3, 0.96);
        pointer-events: none;
    }
    .beat-result-gate::before { left: 0; border-right: 1px solid rgba(255, 131, 39, 0.5); }
    .beat-result-gate::after { right: 0; border-left: 1px solid rgba(255, 131, 39, 0.5); }
    .beat-result-preview.is-open .beat-result-gate::before { animation: beat-result-door-left 560ms ease 180ms forwards; }
    .beat-result-preview.is-open .beat-result-gate::after { animation: beat-result-door-right 560ms ease 180ms forwards; }
    .beat-result-head,
    .beat-result-grid,
    .beat-result-foot {
        position: relative;
        z-index: 1;
        opacity: 0;
    }
    .beat-result-preview.is-open .beat-result-head,
    .beat-result-preview.is-open .beat-result-grid,
    .beat-result-preview.is-open .beat-result-foot {
        animation: beat-result-content-in 360ms ease 520ms forwards;
    }
    .beat-result-head {
        padding: 22px 30px 18px;
        border-bottom: 1px solid rgba(255, 109, 29, 0.42);
        text-align: center;
    }
    .beat-result-head span,
    .beat-result-label {
        display: block;
        color: #ffae45;
        font-family: 'Oxanium', var(--main-font);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0;
    }
    .beat-result-song-title {
        display: block;
        margin-top: 4px;
        color: #fff7e8;
        font-family: 'Oxanium', var(--main-font);
        font-size: clamp(19px, 2.8vw, 32px);
        line-height: 1.15;
        overflow-wrap: anywhere;
        text-shadow: 0 0 18px rgba(255, 93, 25, 0.62);
    }
    .beat-result-state {
        display: block;
        margin-top: 7px;
        color: #ffae45;
        font: 900 12px/1 'Oxanium', var(--main-font);
    }
    .beat-result-grid {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.35fr) minmax(180px, 1fr);
        min-height: 390px;
    }
    .beat-result-side,
    .beat-result-center {
        display: grid;
        align-content: center;
        padding: 26px 30px;
    }
    .beat-result-side:first-child { border-right: 1px solid rgba(255, 109, 29, 0.3); }
    .beat-result-side:last-child { border-left: 1px solid rgba(255, 109, 29, 0.3); }
    .beat-result-stat-list {
        display: grid;
        gap: 18px;
        margin: 0;
    }
    .beat-result-stat {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding-bottom: 9px;
        border-bottom: 1px solid rgba(255, 181, 105, 0.18);
    }
    .beat-result-stat dt {
        color: #dcb9a1;
        font-family: 'Oxanium', var(--main-font);
        font-size: 12px;
        font-weight: 800;
    }
    .beat-result-stat dd {
        margin: 0;
        color: #fff5df;
        font-family: 'Oxanium', var(--main-font);
        font-size: clamp(19px, 2vw, 26px);
        font-weight: 800;
    }
    .beat-result-center {
        place-items: center;
        align-content: center;
        text-align: center;
    }
    .beat-result-score {
        margin-top: 5px;
        color: #ffe07b;
        font-family: 'Oxanium', var(--main-font);
        font-size: clamp(28px, 4vw, 48px);
        font-weight: 800;
        line-height: 1;
        text-shadow: 0 0 18px rgba(255, 128, 25, 0.54);
    }
    .beat-result-grade-mark {
        position: relative;
        isolation: isolate;
        display: grid;
        place-items: center;
        width: min(250px, 82%);
        height: 210px;
        margin: 8px auto;
        transform: translate(0, -35px);
    }
    .beat-result-grade-mark::before,
    .beat-result-grade-mark::after {
        content: '';
        position: absolute;
        z-index: 0;
        inset: 14%;
        border-radius: 50%;
        opacity: 0;
        pointer-events: none;
    }
    .beat-result-grade-mark::before {
        border: 2px solid rgba(255, 204, 86, 0.9);
        box-shadow: 0 0 10px #fff0a8, 0 0 24px rgba(255, 74, 8, 0.9), inset 0 0 18px rgba(255, 74, 8, 0.62);
    }
    .beat-result-grade-mark::after {
        inset: -4%;
        background:
            radial-gradient(circle at 50% 3%, #fff6bd 0 2px, transparent 3px),
            radial-gradient(circle at 95% 44%, #ff9a25 0 2px, transparent 3px),
            radial-gradient(circle at 70% 91%, #fff0a0 0 2px, transparent 3px),
            radial-gradient(circle at 12% 72%, #ff6a16 0 2px, transparent 3px),
            radial-gradient(circle at 8% 24%, #fff8d1 0 2px, transparent 3px);
        filter: drop-shadow(0 0 6px #ff6b12);
    }
    .beat-result-grade {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 0 20px rgba(255, 80, 18, 0.58));
    }
    .beat-result-achievement {
        display: block;
        width: min(250px, 84%);
        max-height: 68px;
        margin: -12px auto 8px;
        object-fit: contain;
        filter: drop-shadow(0 0 13px rgba(255, 79, 15, 0.74));
    }
    .beat-result-achievement[hidden] { display: none; }
    .beat-result-preview.is-open[data-stamp-tier="1"] .beat-result-grade {
        animation: beat-result-stamp-s 780ms cubic-bezier(0.16, 0.82, 0.2, 1) 540ms both;
    }
    .beat-result-preview.is-open[data-stamp-tier="2"] .beat-result-grade {
        animation: beat-result-stamp-ss 920ms cubic-bezier(0.16, 0.82, 0.2, 1) 520ms both;
    }
    .beat-result-preview.is-open[data-stamp-tier="3"] .beat-result-grade {
        animation: beat-result-stamp-sss 1080ms cubic-bezier(0.16, 0.82, 0.2, 1) 500ms both;
    }
    .beat-result-preview.is-open[data-stamp-tier] .beat-result-grade-mark::before {
        animation: beat-result-stamp-ring 820ms ease-out 570ms both;
    }
    .beat-result-preview.is-open[data-stamp-tier="2"] .beat-result-grade-mark::after {
        animation: beat-result-stamp-stars 1050ms ease-out 560ms both;
    }
    .beat-result-preview.is-open[data-stamp-tier="3"] .beat-result-grade-mark::before {
        animation: beat-result-stamp-ring-sss 1100ms ease-out 520ms both;
    }
    .beat-result-preview.is-open[data-stamp-tier="3"] .beat-result-grade-mark::after {
        animation: beat-result-stamp-stars-sss 1380ms ease-out 520ms both;
    }
    .beat-result-clear {
        color: #78f4ff;
        font-family: 'Oxanium', var(--main-font);
        font-size: clamp(20px, 2.5vw, 30px);
        font-weight: 800;
        line-height: 1;
        text-shadow: 0 0 15px rgba(76, 231, 255, 0.72);
    }
    .beat-result-foot {
        display: flex;
        justify-content: center;
        padding: 14px 24px 18px;
        border-top: 1px solid rgba(255, 109, 29, 0.34);
    }
    .beat-result-close {
        width: 44px;
        height: 44px;
        border: 1px solid rgba(255, 164, 75, 0.62);
        border-radius: 50%;
        background: #2b0a04;
        color: #fff7e8;
        font-size: 25px;
        font-weight: 800;
        cursor: pointer;
    }
    .beat-result-close:hover,
    .beat-result-close:focus-visible {
        border-color: #ffd06c;
        box-shadow: 0 0 18px rgba(255, 93, 24, 0.5);
    }
    @keyframes beat-result-gate-open {
        from { clip-path: inset(0 50% 0 50%); transform: scaleY(0.92); }
        to { clip-path: inset(0); transform: scaleY(1); }
    }
    @keyframes beat-game-over-dim {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes beat-game-over-stamp-in {
        0% { opacity: 0; transform: scale(1.75) rotate(-9deg); filter: brightness(3) blur(5px); }
        42% { opacity: 1; transform: scale(0.9) rotate(2deg); filter: brightness(1.8) blur(0) drop-shadow(0 0 28px #ff4a0b); }
        68% { transform: scale(1.06) rotate(-1deg); }
        100% { opacity: 1; transform: scale(1) rotate(0); filter: brightness(1.05) drop-shadow(0 0 18px rgba(255, 69, 12, 0.9)); }
    }
    @keyframes beat-game-over-ring {
        0% { opacity: 0; transform: scale(0.45); }
        28% { opacity: 1; }
        100% { opacity: 0; transform: scale(1.35); }
    }
    @keyframes beat-game-over-retry-in {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes beat-result-door-left {
        from { transform: translateX(0); }
        to { transform: translateX(-102%); }
    }
    @keyframes beat-result-door-right {
        from { transform: translateX(0); }
        to { transform: translateX(102%); }
    }
    @keyframes beat-result-content-in {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes beat-result-stamp-s {
        0% { opacity: 0; transform: scale(0.35) rotate(-12deg); filter: brightness(3) blur(3px); }
        48% { opacity: 1; transform: scale(1.16) rotate(3deg); filter: brightness(2.1) blur(0) drop-shadow(0 0 16px rgba(255, 88, 12, 0.96)); }
        100% { opacity: 1; transform: scale(1) rotate(0); filter: brightness(1.12) drop-shadow(0 0 12px rgba(255, 80, 18, 0.72)); }
    }
    @keyframes beat-result-stamp-ss {
        0% { opacity: 0; transform: scale(0.24) rotate(-18deg); filter: brightness(3.5) blur(4px); }
        38% { opacity: 1; transform: scale(1.28) rotate(5deg); filter: brightness(2.45) blur(0) drop-shadow(0 0 22px rgba(255, 105, 15, 1)); }
        64% { transform: scale(0.92) rotate(-2deg); }
        100% { opacity: 1; transform: scale(1) rotate(0); filter: brightness(1.16) drop-shadow(0 0 16px rgba(255, 76, 12, 0.82)); }
    }
    @keyframes beat-result-stamp-sss {
        0% { opacity: 0; transform: scale(0.14) rotate(-24deg); filter: brightness(4) blur(5px); }
        30% { opacity: 1; transform: scale(1.4) rotate(7deg); filter: brightness(2.8) blur(0) drop-shadow(0 0 28px #fff0a0) drop-shadow(0 0 36px rgba(255, 58, 5, 1)); }
        48% { transform: scale(0.86) rotate(-4deg); }
        68% { transform: scale(1.18) rotate(2deg); }
        100% { opacity: 1; transform: scale(1) rotate(0); filter: brightness(1.22) drop-shadow(0 0 19px rgba(255, 72, 8, 0.92)); }
    }
    @keyframes beat-result-stamp-ring {
        0% { opacity: 0; transform: scale(0.2); }
        24% { opacity: 0.9; }
        100% { opacity: 0; transform: scale(1.55); }
    }
    @keyframes beat-result-stamp-ring-sss {
        0% { opacity: 0; transform: scale(0.14) rotate(0); }
        18% { opacity: 1; }
        100% { opacity: 0; transform: scale(1.9) rotate(24deg); }
    }
    @keyframes beat-result-stamp-stars {
        0% { opacity: 0; transform: scale(0.45) rotate(-12deg); }
        32% { opacity: 0.82; }
        100% { opacity: 0; transform: scale(1.32) rotate(14deg); }
    }
    @keyframes beat-result-stamp-stars-sss {
        0% { opacity: 0; transform: scale(0.32) rotate(-20deg); filter: brightness(2) drop-shadow(0 0 8px #ff5a0c); }
        24% { opacity: 1; }
        58% { opacity: 0.82; transform: scale(1.24) rotate(11deg); }
        100% { opacity: 0; transform: scale(1.58) rotate(24deg); filter: brightness(1.1) drop-shadow(0 0 4px #ff5a0c); }
    }
    .beat-guide-back-btn {
        min-width: 100px;
        border-color: rgba(255, 255, 255, 0.2);
        background: #2a100c;
        color: #f0dfd4;
    }
    @media (max-width: 750px) {
        #beat-section {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }
        .beat-guide-head {
            padding: 68px 20px 20px;
            text-align: center;
        }
        .beat-keymap-open {
            top: 16px;
            left: 16px;
            min-height: 36px;
            padding: 0 10px;
        }
        .beat-keymap-slot {
            height: 76px;
            gap: 7px;
            padding: 7px 3px;
        }
        .beat-keymap-digit {
            font-size: 24px;
        }
        .beat-keymap-key {
            font-size: 8px;
        }
        .beat-keymap-dialog-body {
            padding: 16px 12px;
        }
        .beat-keymap-grid {
            gap: 5px;
        }
        .beat-touch-pad-grid,
        .beat-touch-digit-grid {
            gap: 5px;
        }
        .beat-touch-pad-slot {
            height: 72px;
        }
        .beat-touch-pad-value {
            font-size: 15px;
        }
        .beat-keymap-dialog-footer {
            padding: 10px 12px 16px;
        }
        .beat-window-mode-control {
            top: 18px;
            right: 16px;
        }
        .beat-guide-head p {
            font-size: 16px;
        }
        .beat-guide-layout {
            grid-template-columns: 1fr;
            width: 100%;
            max-width: 100%;
        }
        .beat-guide-visual {
            align-items: center;
            min-height: 0;
            padding: 18px 24px;
            border-right: 0;
            border-bottom: 1px solid rgba(255, 147, 83, 0.18);
        }
        .beat-guide-visual img {
            width: min(72vw, 330px);
            max-height: 390px;
        }
        .beat-guide-rules {
            padding: 4px 20px;
        }
        .beat-guide-rule {
            padding: 19px 0;
        }
        .beat-guide-tricks,
        .beat-note-generation-modes {
            grid-template-columns: 1fr;
        }
        .beat-guide-actions {
            flex-wrap: wrap;
            padding: 18px;
        }
        .beat-guide-play-btn {
            width: min(100%, 280px);
        }
        .beat-guide-controls {
            width: min(100%, 330px);
        }
        .beat-field-preview {
            padding: 10px;
        }
        .beat-field-preview-panel {
            max-height: calc(100dvh - 20px);
        }
        .beat-field-preview-head {
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            padding: 13px 14px;
        }
        .beat-field-preview-mode {
            grid-column: 1 / -1;
            grid-row: 2;
            width: 100%;
            box-sizing: border-box;
        }
        .beat-field-preview-body {
            grid-template-columns: 1fr;
            padding: 14px;
        }
        .beat-field-wheel {
            width: min(100%, 430px);
        }
        .beat-field-stage {
            grid-template-columns: 42px minmax(0, 430px);
            gap: 8px;
        }
        .beat-field-gauge-track {
            width: 17px;
            height: 190px;
        }
        .beat-field-side {
            grid-template-columns: minmax(0, 1fr);
            align-items: stretch;
            gap: 12px;
            padding: 14px 4px 2px;
            border-top: 1px solid rgba(255, 97, 31, 0.26);
            border-left: 0;
        }
        .beat-field-survival {
            grid-column: 1;
        }
        .beat-field-side > div:not(.beat-field-survival),
        .beat-field-judge {
            grid-column: 1;
            min-width: 0;
        }
        .beat-field-code {
            flex-wrap: nowrap;
            min-height: 40px;
        }
        .beat-field-note {
            grid-column: 1;
        }
        .beat-field-start-btn {
            grid-column: 1;
        }
        .beat-guide-back-btn {
            flex: 1 1 110px;
        }
        .beat-play-field.is-window-mode .beat-play-auto-rig {
            --beat-play-rig-width: min(48%, 300px);
        }
        .beat-play-field.is-window-mode .beat-play-number-pad {
            gap: clamp(12px, 3.8vw, 30px);
            width: min(97.5%, calc(31vw + 294px), 530px);
        }
    }
    .beat-play-field.is-window-mode .beat-play-scene {
        --beat-mobile-podium-y: 82%;
        --beat-window-rig-offset-x: 54px;
        --beat-mobile-rig-x: calc(50% + var(--beat-window-rig-offset-x));
        --beat-mobile-field-origin-y: 60%;
        --beat-mobile-field-shift-y: 22dvh;
    }
    .beat-play-field.is-window-mode .beat-play-background {
        transform: translateY(var(--beat-mobile-field-shift-y)) scale(1.5);
        transform-origin: 50% var(--beat-mobile-field-origin-y);
    }
    .beat-play-field.is-window-mode .beat-play-auto-rig {
        --beat-play-rig-top: var(--beat-mobile-podium-y);
        --beat-play-rig-left: var(--beat-mobile-rig-x);
        --beat-play-rig-width: min(164%, 70dvh, 680px);
        transform: translate(-50%, -113.2%);
    }
    .beat-play-field.is-window-mode .beat-play-scoreboard {
        z-index: 10;
        top: 0;
        left: calc(50% - var(--beat-window-rig-offset-x));
        width: min(64vw, 360px);
        margin-top: -5px;
        transform: translateX(-50%) scale(0.9);
    }
    .beat-play-field.is-window-mode .beat-play-close {
        transform: translateY(5px);
    }
    .beat-play-field.is-window-mode .beat-play-auto-gauge.is-fever {
        left: calc(50% - min(50vw, 400px) - var(--beat-window-rig-offset-x) + clamp(18px, 4vw, 32px));
    }
    .beat-play-field.is-window-mode .beat-play-auto-gauge.is-survival {
        right: calc(50% - min(50vw, 400px) + var(--beat-window-rig-offset-x) + clamp(18px, 4vw, 32px));
    }
    .beat-play-field.is-window-mode .beat-play-number-pad {
        z-index: 8;
        top: var(--beat-mobile-podium-y);
        gap: clamp(8px, 2.5vw, 12px);
        width: min(82%, 320px);
        isolation: isolate;
        transform: translate(-50%, -190%);
    }
    .beat-play-field.is-window-mode .beat-play-number-pad::before {
        content: '';
        position: absolute;
        z-index: -1;
        inset: -10px -12px;
        border: 1px solid rgba(255, 119, 35, 0.72);
        border-radius: 6px;
        background: rgba(17, 3, 2, 0.94);
        box-shadow:
            inset 0 0 18px rgba(255, 75, 18, 0.12),
            0 0 14px rgba(0, 0, 0, 0.58);
        pointer-events: none;
    }
    .beat-play-field.is-window-mode .beat-play-verdict {
        z-index: 9;
        top: calc(var(--beat-mobile-podium-y) - 38%);
        width: min(42%, 180px);

    }
    .beat-play-field.is-window-mode .beat-result-achievement {
    width: min(220px, 78%);
    max-height: 60px;
    margin: -18px auto 8px;
    transform: translateY(15px);
    }

    .beat-play-field.is-window-mode .beat-play-scene,
    .beat-play-field.is-window-mode .beat-play-background,
    .beat-play-field.is-window-mode .beat-play-auto-rig,
    .beat-play-field.is-window-mode .beat-play-number-pad,
    .beat-play-field.is-window-mode .beat-play-scoreboard,
    .beat-play-field.is-window-mode .beat-play-auto-gauge,
    .beat-play-field.is-window-mode .beat-play-verdict {
        transition: none;
    }
    .beat-play-field.is-window-mode.is-layout-switching .beat-play-scene {
        animation: beat-window-layout-fade 420ms ease-out both;
    }
    @keyframes beat-window-layout-fade {
        0% { opacity: 0.08; filter: brightness(0.7); }
        45% { opacity: 0.24; filter: brightness(0.82); }
        100% { opacity: 1; filter: brightness(1); }
    }

    @media (width < 750px) {
        .beat-play-field.is-window-mode .beat-play-scene {
            --beat-mobile-layout-height: clamp(700px, 180vw, 920px);
            --beat-mobile-field-shift-y: clamp(154px, 39.6vw, 202px);
            height: max(var(--beat-mobile-layout-height), 100dvh);
        }
        .beat-play-field.is-window-mode .beat-play-layer {
            top: 0;
            right: 0;
            bottom: auto;
            left: 0;
            height: var(--beat-mobile-layout-height);
        }
        .beat-play-field.is-window-mode .beat-play-auto-rig {
        --beat-play-rig-top: 77%;                  /* 위아래 */
        --beat-play-rig-left: calc(49% + 51px);    /* 좌우 */
        --beat-play-rig-width: min(126%, 528px);   /* 크기 */
        }
        .beat-play-field.is-window-mode .beat-play-number-pad {
            top: 60%;
            transform: translateX(-50%);
        }

        .beat-play-field.is-window-mode .beat-play-verdict {
        top: 48%;  /* 세로 위치 */
        left: 53%; /* 좌우 위치 */
        }
        .beat-play-field.is-window-mode .beat-play-scoreboard {
            top: 2%;
            left: 41%;
        }
        .beat-play-field.is-window-mode .beat-result-grade-mark {
        transform: translate(0, -35px);
        }
    }

    /* The wide window layout starts at 750px. */
    @media (min-width: 750px) {
        .beat-play-field.is-window-mode .beat-play-scene {
            --beat-window-rig-offset-x: 18px;
            --beat-mobile-podium-y: 61%;
        }
        .beat-play-field.is-window-mode .beat-play-auto-rig {
            --beat-play-rig-width: min(110%, 47dvh, 457px);
            transform: translate(-50%, -113.2%);
        }
        .beat-play-field.is-window-mode .beat-play-scoreboard {
            top: -25%;
            gap: 12px;
            width: 380px;
            min-height: 35px;
            padding: 8px 16px;
        }
        .beat-play-field.is-window-mode .beat-play-scoreboard span {
            font-size: 10px;
        }
        .beat-play-field.is-window-mode .beat-play-scoreboard strong {
            font-size: 27px;
        }
        .beat-play-field.is-window-mode .beat-play-auto-gauge {
            top: 20%;
            width: 58px;
        }
        .beat-play-field.is-window-mode .beat-play-auto-gauge-label {
            font-size: 10px;
        }
        .beat-play-field.is-window-mode .beat-play-auto-gauge-track {
            width: 18px;
            height: 160px;
        }
        .beat-play-field.is-window-mode .beat-play-auto-gauge-value {
            font-size: 16px;
        }
        .beat-play-field.is-window-mode .beat-play-auto-gauge.is-fever {
            left: calc(50% - min(50vw, 400px) - var(--beat-window-rig-offset-x) + clamp(86px, 13vw, 108px));
        }
        .beat-play-field.is-window-mode .beat-play-auto-gauge.is-survival {
            right: calc(50% - min(50vw, 400px) + var(--beat-window-rig-offset-x) + clamp(86px, 13vw, 108px));
        }
        .beat-play-field.is-window-mode .beat-play-number-pad {
        transform: translate(-50%, -50%);
        }
        .beat-play-field.is-window-mode .beat-play-verdict {
        top: calc(var(--beat-mobile-podium-x) + 50%);
        top: calc(var(--beat-mobile-podium-y) - 18%);
        width: 300px;
        }
        .beat-play-field.is-window-mode .beat-result-grade-mark {
        transform: translate(0, -35px);
        }
    }

    @media (orientation: portrait) {
        .beat-play-scene {
            --beat-scene-zoom: 1;
        }
        .beat-result-preview { padding: 14px; }
        .beat-result-gate { width: min(94vw, 640px); min-height: 0; max-height: 92dvh; overflow-y: auto; }
        .beat-result-head { padding: 17px 18px 14px; }
        .beat-result-grid { grid-template-columns: 1fr 1.25fr; min-height: 0; }
        .beat-result-center { grid-column: 1 / -1; grid-row: 1; padding: 18px; border-bottom: 1px solid rgba(255, 109, 29, 0.3); }
        .beat-result-side { padding: 18px; }
        .beat-result-side:first-child { border-right: 1px solid rgba(255, 109, 29, 0.3); }
        .beat-result-side:last-child { border-left: 0; }
        .beat-result-grade-mark { width: min(190px, 72%); height: 125px; margin: 4px auto; }
        .beat-result-stat-list { gap: 11px; }
        .beat-result-stat { gap: 8px; padding-bottom: 6px; }
        .beat-result-stat dt { font-size: 10px; }
        .beat-result-stat dd { font-size: 18px; }
        .beat-game-over-stamp { width: min(88vw, 560px); }
    }