@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: 8px 16px 14px;
        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-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }
    .intro-new-toolbar .intro-new-head { margin: 0; transform: none; }
    .intro-new-toolbar .intro-new-open-btn { position: static; justify-self: end; }
    .intro-sale-only {
        display: inline-flex;
        align-items: center;
        justify-self: start;
        gap: 5px;
        min-height: 28px;
        padding: 5px 10px;
        color: #5e5449;
        background: transparent;
        border: 1px solid #b8b0a5;
        border-radius: 999px;
        font: inherit;
        font-size: 12px;
        white-space: nowrap;
        cursor: pointer;
    }
    .intro-sale-only svg { flex: none; }
    .intro-sale-only .sale-filter-check { display: none; }
    .intro-sale-only.is-active .sale-filter-funnel { display: none; }
    .intro-sale-only.is-active .sale-filter-check { display: block; }
    body.theme-dark .intro-sale-only { color: #d0d4db; border-color: #4b5260; background: rgba(0, 0, 0, 0.08); }
    .intro-sale-only.is-active,
    body.theme-dark .intro-sale-only.is-active { color: #251a08; background: #ffb23f; border-color: #ffb23f; }
    .intro-sale-only:focus-visible { outline: 2px solid #ffb23f; outline-offset: 3px; }
    .intro-sale-only:disabled { opacity: 0.5; cursor: wait; }
    .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: flex-start;
        gap: 6px;
        min-height: 248px;
        padding: 4px 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-lab-guide {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr) 76px;
        align-items: center;
        gap: 12px;
        margin-top: 14px;
        padding: 12px;
        color: #203d49;
        background: #eef7fa;
        border: 1px solid #a6cbd7;
        border-radius: 8px;
        text-align: left;
    }
    .intro-lab-mascot {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: contain;
    }
    .intro-lab-copy { min-width: 0; }
    .intro-lab-copy-title { min-width: 0; }
    .intro-lab-eyebrow {
        display: block;
        margin-bottom: 6px;
        color: #336c80;
        font-size: 10px;
        line-height: 1.3;
    }
    #intro-lab-guide-copy {
        display: block;
        min-height: 2.8em;
        align-content: center;
        font-size: 15px;
        line-height: 1.4;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    .intro-lab-copy p {
        margin: 6px 0 0;
        color: #526f7a;
        font-size: 12px;
        line-height: 1.5;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    .intro-lab-open {
        display: grid;
        place-content: center;
        gap: 4px;
        min-height: 56px;
        padding: 8px 4px;
        color: #fff;
        background: #346e85;
        border: 1px solid transparent;
        border-radius: 8px;
        font: inherit;
        font-size: 12px;
        line-height: 1.4;
        white-space: nowrap;
        cursor: pointer;
    }
    .intro-lab-open:hover { background: #27586b; }
    .intro-lab-open:focus-visible { outline: 2px solid #1282a8; outline-offset: 3px; }
    body.theme-dark .intro-lab-guide { color: #edf5f8; background: #1c2934; border-color: #42677a; }
    body.theme-dark .intro-lab-eyebrow { color: #8bc8df; }
    body.theme-dark .intro-lab-copy p { color: #bbd0da; }
    body.theme-dark .intro-lab-open { background: #326a81; }
    body.theme-dark .intro-lab-open:hover { background: #417f97; }
    body.theme-dark .intro-lab-open:focus-visible { outline-color: #8bc8df; }
    @media (max-width: 640px) {
        .intro-lab-guide {
            grid-template-columns: 56px minmax(0, 1fr);
            grid-template-areas: "mascot heading" "action description";
            gap: 8px 10px;
            padding: 10px;
        }
        .intro-lab-mascot { grid-area: mascot; align-self: start; margin-top: 5px; }
        .intro-lab-copy { display: contents; }
        .intro-lab-copy-title { grid-area: heading; }
        #intro-lab-guide-copy { min-height: 0; font-size: 13px; line-height: 1.4; }
        .intro-lab-copy p { grid-area: description; align-self: center; margin: 0; font-size: 11px; }
        .intro-lab-open {
            display: grid;
            grid-area: action;
            width: 100%;
            min-height: 48px;
            padding: 5px 3px;
            font-size: 11px;
        }
    }
    @media (max-width: 400px) {
        .intro-lab-guide { grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 9px; }
    }
    .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-toolbar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
        .intro-new-toolbar .intro-new-head { min-width: 0; white-space: nowrap; }
        .intro-sale-only { gap: 4px; padding: 4px 7px; font-size: 10px; }
        .intro-sale-only svg { width: 12px; height: 12px; }
        .intro-new-toolbar .intro-new-head { font-size: 11px; gap: 4px; }
        .intro-new-toolbar .intro-new-badge { min-width: 0; height: 22px; padding: 0 7px; font-size: 10px; }
        .intro-new-panel {
            padding: 8px 10px 12px;
            border-radius: 16px;
        }
        .intro-new-head {
            min-height: 26px;
            line-height: 1;
            margin-bottom: 8px;
            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: 6px;
        }
        .intro-new-card {
            min-height: 130px;
            gap: 4px;
            padding: 4px 4px 8px;
            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;
    }