/* y8: Google Fonts import removed — system fallbacks only */

        :root {
            --color-ink: #1a1a1a;
            --color-paper: #f5f5f0;
            --color-gold: #c5a059;
            --transition-fast: 150ms;
            --transition-normal: 300ms;
            --transition-slow: 500ms;
            --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
            --ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);
            --space-xs: 8px;
            --space-sm: 16px;
            --space-md: 24px;
            --space-lg: 32px;
            --space-xl: 48px;
            
            --v4-ink: #11100e;
            --v4-ink-soft: #24201b;
            --v4-paper: #eee6d2;
            --v4-paper-bright: #f7f0df;
            --v4-paper-muted: #d8cdb4;
            --v4-vermilion: #a9342d;
            --v4-vermilion-dark: #6f201d;
            --v4-gold: #d1aa58;
            --v4-gold-soft: #f0d79a;
            --v4-mist: #f6f1e7;
            --v4-border: rgba(209, 170, 88, 0.42);
            --v4-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
            /* Overridable in tests via --osl-test-safe-*. Live devices use env(). */
            --osl-safe-top: var(--osl-test-safe-top, env(safe-area-inset-top, 0px));
            --osl-safe-right: var(--osl-test-safe-right, env(safe-area-inset-right, 0px));
            --osl-safe-bottom: var(--osl-test-safe-bottom, env(safe-area-inset-bottom, 0px));
            --osl-safe-left: var(--osl-test-safe-left, env(safe-area-inset-left, 0px));

            /* Height of the area the user can actually see. Equals 100dvh until an
               interactive widget (soft keyboard) covers part of the screen; a
               feature-detected visualViewport listener then narrows it. Panels that
               must stay reachable while typing size against this, never against dvh.
               Overridable in tests via --osl-test-vvh. */
            --osl-vvh: var(--osl-test-vvh, var(--osl-vvh-px, 100dvh));

            /* Typography Variables with Wuxia brush & serif fonts */
            --font-zh-display: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Source Han Serif SC", serif;
            --font-en-display: "Cinzel", "Cormorant Garamond", Georgia, serif;
            --font-en-body: "Source Sans 3", "Cormorant Garamond", system-ui, sans-serif;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; scrollbar-width: none; }
        *::-webkit-scrollbar { display: none; }

        body, html {
            width: 100%;
            height: 100%;
            height: 100svh;
            height: 100dvh;
            /* Resolves to 100dvh unless a soft keyboard covers part of the screen.
               The shell is centred in this box, so it must be the *visible* box or
               the centred shell lands behind the keyboard. */
            height: var(--osl-vvh);
            max-height: var(--osl-vvh);
            overflow: hidden !important;
            touch-action: none; -webkit-touch-action: none;
            overscroll-behavior: none;
            font-family: var(--font-en-body);
            background: #060504 radial-gradient(circle at 50% 50%, #1c1713 0%, #060504 80%) !important;
            display: flex; align-items: center; justify-content: center;
        }

        #game-world {
            position: relative; width: 100%; height: 100%; max-width: 520px;
            max-height: min(960px, var(--osl-vvh));
            margin: auto; background: #090908; isolation: isolate; overflow: hidden !important;
            touch-action: none; overscroll-behavior: none;
            -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
            box-shadow: 0 0 90px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(209, 170, 88, 0.4); border-radius: 4px;
        }
        
        #game-world::after {
            content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
            background: radial-gradient(circle at 50% 12%, rgba(245, 232, 196, 0.06), transparent 26%),
                        linear-gradient(180deg, rgba(4, 4, 3, 0.08) 0%, rgba(5, 5, 4, 0.2) 58%, rgba(4, 4, 3, 0.5) 100%),
                        radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.52) 100%);
            mix-blend-mode: multiply;
        }

        #game-canvas {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;
            touch-action: none; overscroll-behavior: none;
            -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
            -webkit-user-drag: none;
        }
        /* Menu hitboxes sit above the canvas, but a host/SDK focus raise must
           never let the full-screen canvas swallow Start / mute / language. */
        #game-world[data-screen="menu"] #game-canvas,
        #game-world[data-screen="menu"] #combat-cinematic-frame,
        #game-world[data-screen="menu"] #tension-frame {
            pointer-events: none !important;
        }
        #start-hold[hidden],
        #pause-overlay:not(.visible) {
            display: none !important;
            pointer-events: none !important;
        }
        #combat-cinematic-frame,
        .menu-png-frame img,
        .menu-title-img,
        .menu-start-img {
            -webkit-user-drag: none;
            -webkit-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
        }

        .screen {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            opacity: 0; pointer-events: none; transition: opacity var(--transition-normal) var(--ease-out); z-index: 10;
        }

        .screen.active { opacity: 1; pointer-events: auto; animation: v4-screen-in 420ms var(--ease-out) both; }
        /* Prepared screens reveal in one paint. Do not replay the generic
           fade/scale after content/outcome/language are already applied. */
        .screen.active.entry-atomic { animation: none; }
        .screen.is-preparing,
        #menu-screen.is-preparing,
        #results-screen.is-preparing,
        #skill-screen.is-preparing,
        #name-entry-screen.is-preparing {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            animation: none !important;
        }
        /*
          Root fix for combat click-through:
          opacity:0 + pointer-events:none on .screen is NOT enough — descendants with
          pointer-events:auto (menu hitboxes) still receive hits in the layout tree.
          Inactive full-screen UIs must leave the box tree via display:none, same as
          #name-entry-screen / #skill-screen.
        */
        #menu-screen:not(.active),
        #results-screen:not(.active) {
            display: none !important;
            pointer-events: none !important;
        }
        #menu-screen.active,
        #results-screen.active {
            display: flex !important;
            pointer-events: auto !important;
        }
        @keyframes v4-screen-in { from { opacity: 0; transform: scale(1.018); } to { opacity: 1; transform: scale(1); } }

        .screen-content { text-align: center; padding: var(--space-lg); width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }

        /* Menu Styles */
        #menu-screen { color: var(--v4-mist); }
        #menu-screen::before {
            content: ''; position: absolute; inset: 0; pointer-events: none;
            background: linear-gradient(180deg, rgba(6, 7, 6, 0.15), rgba(8, 8, 7, 0.35) 55%, rgba(3, 3, 3, 0.72)),
                        radial-gradient(circle at 50% 10%, rgba(242, 224, 175, 0.15), transparent 31%);
        }
        #menu-screen .screen-content { position: relative; z-index: 2; padding: clamp(30px, 5vh, 72px) 34px 40px; max-width: 760px; }
        
        .menu-hero {
            position: relative; width: min(94%, 560px); padding: 46px 20px 38px; margin: 0 auto 32px;
            background: linear-gradient(145deg, rgba(28, 24, 20, 0.88), rgba(14, 13, 11, 0.94)), radial-gradient(circle at 50% 0%, rgba(225, 188, 106, 0.28), transparent 60%);
            border: 1px solid rgba(225, 188, 106, 0.45); border-top: 2px solid rgba(240, 215, 154, 0.85); border-bottom: 2px solid var(--v4-vermilion);
            box-shadow: 0 28px 85px rgba(0, 0, 0, 0.75), inset 0 0 50px rgba(225, 188, 106, 0.06);
            backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 14px;
        }
        .menu-hero::before, .menu-hero::after {
            content: ''; position: absolute; left: 50%; width: 110px; height: 2px; transform: translateX(-50%);
            background: linear-gradient(90deg, transparent, var(--v4-gold), transparent);
        }
        .menu-hero::before { top: 16px; }
        .menu-hero::after { bottom: 15px; background: linear-gradient(90deg, transparent, var(--v4-vermilion), transparent); }

        .menu-kicker { margin-bottom: 16px; color: var(--v4-gold-soft); font: 700 12px/1.2 var(--font-en-body); letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.92; }
        #menu-screen .title { margin: 0 0 12px; font-size: min(13.5vw, 64px); line-height: 1.05; letter-spacing: 3px; white-space: nowrap !important; color: #fefcf5; text-shadow: 0 3px 10px rgba(0,0,0,.9), 0 0 35px rgba(225, 188, 106, 0.45); font-weight: 700; }
        #menu-screen .subtitle { margin: 0 auto 20px; padding: 11px 28px; font-size: clamp(21px, 3vw, 29px); color: rgba(246, 241, 231, 0.75); letter-spacing: 1.5px; position: relative; }
        #menu-screen .subtitle::before, #menu-screen .subtitle::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); height: 1px; background: linear-gradient(90deg, transparent, rgba(209, 170, 88, 0.75), transparent); width: 150px; }
        #menu-screen .subtitle::before { top: 0; } #menu-screen .subtitle::after { bottom: 0; }

        .daily-challenge-badge { margin: 8px auto 0; padding: 9px 18px; border: 1px solid rgba(209, 170, 88, 0.36); background: rgba(169, 52, 45, 0.15); color: var(--v4-gold-soft); font-family: var(--font-en-body); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; border-radius: 999px; box-shadow: inset 0 0 18px rgba(169, 52, 45, 0.12); z-index: 2;}

        .menu-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(86%, 520px); position: relative; z-index: 3; }
        .menu-secondary-actions { width: 100%; display: grid; grid-template-columns: 1fr; gap: 10px; }
        .menu-footnote { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 14px; color: rgba(246, 241, 231, 0.55); font: 600 11px/1.4 var(--font-en-body); letter-spacing: .12em; text-transform: uppercase; }
        .menu-footnote span + span::before { content: '◆'; margin-right: 14px; color: var(--v4-vermilion); font-size: 8px; }

        /* Audio & Lang Controls */
        .top-controls {
            position: absolute;
            top: max(24px, calc(var(--osl-safe-top) + 10px));
            right: max(24px, calc(var(--osl-safe-right) + 10px));
            display: flex; gap: 10px; z-index: 1001;
        }
        .icon-btn { border: 1px solid rgba(238,230,210,.2); border-radius: 999px; background: rgba(8,8,7,.56); color: rgba(246,241,231,.62); padding: 8px 12px; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 14px; transition: 0.2s; }
        .icon-btn:hover, .icon-btn.active { background: var(--v4-paper); color: var(--v4-ink); box-shadow: 0 4px 14px rgba(0,0,0,.28); }
        .lang-toggle { display: flex; gap: 2px; border: 1px solid rgba(238,230,210,.2); border-radius: 999px; background: rgba(8,8,7,.56); padding: 4px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
        .lang-btn { border: 0; border-radius: 999px; background: transparent; color: rgba(246,241,231,.62); padding: 8px 13px; font-size: 12px; cursor: pointer; transition: 0.2s;}
        .lang-btn.active { background: var(--v4-paper); color: var(--v4-ink); box-shadow: 0 4px 14px rgba(0,0,0,.28); }

        #player-name-display { color: var(--v4-gold-soft) !important; margin: 0 0 14px !important; font-size: 21px !important; text-shadow: 0 2px 12px rgba(0,0,0,.7); font-family: var(--font-en-display); }

        .button {
            min-width: 0; min-height: 88px; width: 100%; padding: 20px 30px; border: 1px solid rgba(255, 220, 145, .82);
            background-image: linear-gradient(180deg, #d84a3d 0%, #a52f27 54%, #741b18 100%) !important;
            background-color: #a52f27 !important; color: #fffaf0 !important; cursor: pointer;
            font-family: var(--font-en-display); font-size: clamp(29px, 4vw, 38px); font-weight: 700; letter-spacing: 2px;
            box-shadow: 0 16px 42px rgba(109, 20, 15, .58), 0 0 38px rgba(201, 61, 48, .34), inset 0 1px 0 rgba(255,255,255,.26) !important;
            clip-path: polygon(2% 0, 98% 0, 100% 18%, 100% 82%, 98% 100%, 2% 100%, 0 82%, 0 18%); transition: all var(--transition-fast) var(--ease-out);
            position: relative; isolation: isolate; animation: v7CtaBreath 2.35s ease-in-out infinite;
        }
        .button::before { content: ''; position: absolute; inset: 7px; z-index: -1; pointer-events: none; border: 1px solid rgba(255,237,190,.18); clip-path: inherit; }
        .button:hover { transform: translateY(-2px); box-shadow: 0 19px 46px rgba(103,19,15,.58), 0 0 42px rgba(190,55,43,.34), inset 0 1px 0 rgba(255,255,255,.26); filter: brightness(1.07); background-image: linear-gradient(180deg, #e15a4c 0%, #b4382f 54%, #7c211d 100%) !important; }
        .button:active { transform: translateY(1px) scale(.985); }
        @keyframes v7CtaBreath { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.09); } }

        .button.secondary {
            animation: none; padding: 13px 16px; background: rgba(15, 14, 12, .66) !important; border-color: rgba(238, 230, 210, .24) !important;
            color: rgba(246, 241, 231, .88) !important; font-size: clamp(21px, 3vw, 29px); box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 0 22px rgba(255,255,255,.025) !important;
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); min-height: 68px; opacity: .88;
        }
        .button.secondary:hover { border-color: rgba(209,170,88,.55) !important; color: var(--v4-gold-soft) !important; }

        /* Skill / Name Screens
           Name entry must sit above PNG menu hitboxes (z~4–5) and fully capture
           pointer events while active. Inactive screens use display:none so their
           layout boxes never intercept menu clicks (opacity:0 alone is insufficient). */
        #skill-screen, #name-entry-screen {
            background: linear-gradient(180deg, rgba(9,9,8,.72), rgba(3,3,3,.9));
            z-index: 320;
        }
        #name-entry-screen:not(.active),
        #skill-screen:not(.active) {
            display: none !important;
            pointer-events: none !important;
        }
        #name-entry-screen.active,
        #skill-screen.active {
            display: flex !important;
            pointer-events: auto !important;
            isolation: isolate;
        }
        #name-entry-screen.active .name-entry-content,
        #name-entry-screen.active .name-entry-content * {
            pointer-events: auto;
        }

        /* In-run pause overlay */
        #start-hold {
            position: absolute;
            inset: 0;
            z-index: 270;
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 8px;
            pointer-events: auto;
            background: radial-gradient(ellipse at 50% 42%, rgba(18,14,10,.55), rgba(3,3,3,.72));
        }
        #start-hold.visible { display: flex; }
        #start-hold-kicker {
            margin: 0;
            color: rgba(236,226,200,.62);
            font: 700 11px/1 "Cinzel", "Noto Serif SC", serif;
            letter-spacing: .18em;
        }
        #start-hold-text {
            color: #f3e7c8;
            font: 700 clamp(22px, 5vw, 32px)/1.15 "Noto Serif SC", "Cinzel", serif;
            letter-spacing: .08em;
            text-shadow: 0 2px 16px rgba(0,0,0,.55);
        }
        #pause-overlay {
            position: absolute;
            inset: 0;
            z-index: 280;
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 14px;
            padding: 24px;
            background: radial-gradient(ellipse at 50% 40%, rgba(18,14,10,.82), rgba(3,3,3,.92));
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }
        #pause-overlay.visible { display: flex; }
        #pause-overlay .pause-title {
            margin: 0 0 4px;
            color: #f3e7c8;
            font: 700 clamp(28px, 6vw, 42px)/1.1 var(--font-zh-display), var(--font-en-display);
            letter-spacing: .08em;
            text-shadow: 0 2px 16px rgba(0,0,0,.55);
        }
        #pause-overlay .pause-hint {
            margin: 0 0 12px;
            color: rgba(236,226,200,.72);
            font: 600 12px/1.4 var(--font-en-body);
            letter-spacing: .06em;
        }
        #pause-overlay .pause-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: min(86%, 320px);
        }
        #pause-overlay .pause-actions .button {
            width: 100%;
            min-height: 52px;
        }
        .results-content { background: transparent; padding: 34px 22px; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; overflow-y: auto; overflow-x: hidden !important; touch-action: pan-y; overscroll-behavior: contain; }
        
        .skill-modal-shell {
            width: min(92%, 480px); max-height: min(88dvh, 850px); display: flex; flex-direction: column; overflow: hidden !important; padding: 22px 18px 16px;
            background: linear-gradient(145deg, rgba(246,239,220,.985), rgba(216,204,176,.975)); border: 1px solid rgba(225,188,106,.70);
            box-shadow: 0 28px 76px rgba(0,0,0,.58); clip-path: polygon(2% 0, 98% 0, 100% 4%, 100% 96%, 98% 100%, 2% 100%, 0 96%, 0 4%);
        }
        .skill-kicker { flex: 0 0 auto; margin-bottom: 5px; color: #8d3028; font: 800 11px/1.3 var(--font-en-body); letter-spacing: .18em; text-align: center; }
        .skill-header { flex: 0 0 auto; margin: 0 0 4px; color: #1d1812; font-size: clamp(34px, 7vw, 50px); line-height: 1.05; text-shadow: none; font-family: var(--font-en-display); font-weight: 700;}
        .skill-subtitle { flex: 0 0 auto; margin: 0 auto 12px; max-width: 440px; color: #615747; font: 500 13px/1.45 var(--font-en-body); text-align: center; }
        .skill-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden !important; padding: 3px 4px 8px; gap: 10px; display: flex; flex-direction: column; touch-action: pan-y; overscroll-behavior: contain;}
        
        .skill-card {
            position: relative; overflow: visible; padding: 16px 64px 16px 18px; border: 1px solid rgba(209,170,88,.3); border-left: 4px solid var(--v4-vermilion);
            background: linear-gradient(105deg, rgba(244,237,218,.96), rgba(215,203,174,.93)); box-shadow: 0 14px 32px rgba(0,0,0,.3);
            text-align: left; clip-path: polygon(0 0, 97% 0, 100% 18%, 100% 100%, 3% 100%, 0 82%); cursor: pointer; transition: all 0.2s;
            min-height: 112px; display: flex; flex-direction: column; justify-content: center; gap: 4px;
        }
        .skill-card::after { content: '剑'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: var(--font-zh-display); font-size: 62px; color: rgba(169,52,45,.08); pointer-events: none; }
        .skill-card:hover { background: linear-gradient(105deg, #fff9e9, #e2d2ad); transform: translateX(5px) scale(1.01); border-color: rgba(209,170,88,.72); }
        .skill-name { color: #17130f; font-family: var(--font-en-display); font-size: clamp(22px, 3.8vw, 30px); font-weight: 700; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
        .skill-desc { color: #665c4c; max-width: 100%; font-size: clamp(12.5px, 2.4vw, 14px); line-height: 1.4; font-family: var(--font-en-body); white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
        .skill-safe-hint { flex: 0 0 auto; padding-top: 9px; color: #746957; font: 700 10px/1.3 var(--font-en-body); letter-spacing: .10em; text-transform: uppercase; text-align: center; }
        .skill-school-tag { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(129,42,34,.09); border: 1px solid rgba(129,42,34,.18); color: #8b3028; font: 800 9px/1 var(--font-en-body); letter-spacing: .12em; text-transform: uppercase; }

        .name-entry-content { width: min(92%, 560px); padding: clamp(28px, 5vh, 44px) clamp(22px, 6vw, 36px); background: linear-gradient(145deg, rgba(246,239,220,.98), rgba(216,204,176,.96)); border: 1px solid rgba(209,170,88,.54); box-shadow: var(--v4-shadow); clip-path: polygon(2% 0, 98% 0, 100% 4%, 100% 96%, 98% 100%, 2% 100%, 0 96%, 0 4%); display: flex; flex-direction: column; align-items: center;}
        .name-entry-title { color: var(--v4-ink); font-family: var(--font-en-display); font-size: clamp(34px, 7vw, 50px); margin-bottom: 8px;}
        .name-entry-subtitle { color: #5d5548; font-family: var(--font-en-body); font-size: clamp(13px, 2.6vw, 16px); margin-bottom: 26px; text-align: center;}
        .name-input-container { width: 100%; margin-bottom: 18px; }
        .name-input { width: 100%; min-height: 58px; padding: 13px 16px; font-family: var(--font-en-body); font-size: clamp(20px, 4.4vw, 27px); font-weight: 650; text-align: center; border: 1px solid rgba(96,70,37,.58); border-bottom: 3px solid var(--v4-vermilion); background: rgba(255,253,246,.95); color: #18130f; outline: none; transition: all 0.2s; border-radius: 5px; }
        .name-input:focus { border-color: var(--v4-gold); box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2); }
        .name-char-count { font-family: var(--font-en-body); font-size: 14px; color: #6d6253; text-align: right; margin-top: 8px; }
        .name-helper-text { font-family: var(--font-en-body); font-size: clamp(12px, 2.45vw, 14px); color: #6f6453; text-align: center; margin-bottom: 22px; max-width: 420px;}
        #submit-name-button { background: linear-gradient(180deg, #b7473c 0%, #8d2b25 52%, #69201c 100%) !important; padding: 13px 20px; font-size: clamp(25px, 5vw, 33px); clip-path: polygon(2% 0, 98% 0, 100% 16%, 100% 84%, 98% 100%, 2% 100%, 0 84%, 0 16%); min-height: 58px; animation: none;}
        #skip-name-button { margin-top: 12px !important; background: rgba(56,50,42,.08) !important; color: #4b4338 !important; border: 1px solid rgba(72,61,47,.35) !important; min-height: 58px; padding: 13px 20px; box-shadow: none !important; backdrop-filter: none; }

        /* HUD */
        #hud { position: absolute; top: 9px; left: 0; width: 100%; padding: 0 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; z-index: 100; pointer-events: none; }
        /* In-run pause (Esc still works). Left side so it never covers HUD hearts. */
        #pause-button.pause-hud-btn {
            position: absolute;
            top: 58px;
            left: 10px;
            z-index: 125;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            border: 1px solid rgba(209,170,88,.45);
            background: rgba(12,11,9,.78);
            color: #f0d79a;
            font: 800 15px/1 "Source Sans 3", sans-serif;
            letter-spacing: 0;
            cursor: pointer;
            display: none;
            place-items: center;
            pointer-events: auto;
            box-shadow: 0 6px 16px rgba(0,0,0,.35);
        }
        #game-world[data-screen="game"] #pause-button {
            display: grid;
        }
        #pause-button:hover { border-color: rgba(233,196,102,.75); color: #fff3c8; }
        #pause-button:active { transform: scale(0.96); }
        .hud-item { min-width: 0; padding: 4px 5px 5px; background: linear-gradient(180deg, rgba(8,9,8,.78), rgba(8,8,7,.52)); border: 1px solid rgba(238,230,210,.14); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.03); display: flex; flex-direction: column; align-items: center; }
        .hud-label { color: rgba(246,241,231,.52); font-family: var(--font-en-body); font-size: 8px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; margin-bottom: 1px; }
        #score-display, #timer-display, #combo-display { font-family: var(--font-en-body); font-size: clamp(14px, 2.4vw, 20px); font-variant-numeric: tabular-nums; text-shadow: 0 1px 5px rgba(0,0,0,.5); font-weight: 700; }
        #score-display { color: var(--v4-gold-soft); }
        #combo-display, #timer-display { color: #fff; }
        #lives-display { color: #ef6b61; letter-spacing: 1px; font-family: var(--font-en-body); font-size: clamp(12px, 2.2vw, 18px); white-space: nowrap; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,.5); }

        #active-skill-container { position: absolute !important; left: 14px !important; bottom: max(18px, env(safe-area-inset-bottom)) !important; z-index: 118; display: none; flex-direction: column; align-items: flex-start !important; gap: 6px !important; max-width: min(78vw, 320px) !important; pointer-events: none; }
        .active-skill-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: 100%; padding: 5px 10px 5px 6px; border: 1px solid rgba(222,180,95,.45); border-radius: 999px; background: rgba(10,9,8,.78); color: #f7efdc; box-shadow: 0 6px 18px rgba(0,0,0,.30); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
        .active-skill-chip .skill-chip-seal { flex: 0 0 auto; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(238,202,119,.66); color: #f2d286; background: rgba(117,31,25,.46); font: 400 18px/1 var(--font-zh-display); }
        .active-skill-chip .skill-chip-copy { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.15 var(--font-en-body); font-family: var(--font-en-display);}

        #intent-hud { position: absolute; top: 105px; left: 50%; transform: translateX(-50%); width: min(58%, 360px); display: none; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; z-index: 112; pointer-events: none; padding: 7px 10px; border-radius: 999px; background: rgba(8, 8, 7, .67); border: 1px solid rgba(238, 230, 210, .18); box-shadow: 0 7px 18px rgba(0, 0, 0, .25); }
        #intent-label, #intent-value { color: rgba(246, 241, 231, .84); font-family: var(--font-en-body); font-size: 10px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
        .intent-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); }
        #intent-fill { width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8d2924, #d0a354 44%, #f2d98e); transform-origin: left center; transition: width 180ms ease-out; }

        #gate-hud { position:absolute; top:67px; left:50%; transform:translateX(-50%); z-index:113; display:grid; grid-template-columns:auto auto 1fr auto auto; grid-template-rows:auto auto; align-items:center; gap:2px 9px; width:min(86%,560px); padding:6px 14px; border:1px solid rgba(209,170,88,.46); border-radius:12px; background:linear-gradient(180deg,rgba(17,15,12,.9),rgba(8,8,7,.78)); color:#f5ecd5; box-shadow:0 8px 24px rgba(0,0,0,.32); backdrop-filter:blur(8px); font:700 11px/1.2 var(--font-en-body); pointer-events:none; white-space:nowrap; }
        #gate-count { color:#f0d79a; white-space:nowrap; }
        #gate-next { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width: 0;}
        .gate-divider { width:1px; height:15px; background:rgba(240,215,154,.35); }
        
        #insight-badge { position:absolute; right:14px; bottom:18px; z-index:114; display:none; padding:7px 11px; border:1px solid rgba(209,170,88,.45); border-radius:999px; color:#f0d79a; background:rgba(14,12,10,.78); font:700 10px/1 var(--font-en-body); pointer-events:none; }

        .combo-feedback { position: absolute; top: 30% !important; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-en-display); font-size: clamp(22px, 4vmin, 40px); color: var(--v4-gold-soft); text-shadow: 0 3px 0 #35110d, 0 0 24px rgba(209,170,88,.5); opacity: 0; pointer-events: none; z-index: 50; transition: all 0.45s var(--ease-out); width: calc(100% - 36px); max-width: 470px; padding: 10px 14px; white-space: normal !important; overflow-wrap: anywhere; text-wrap: balance; text-align: center; font-weight: 700; line-height: 1.18; box-sizing: border-box; }

        #stage-banner { position: absolute; top: 54% !important; left: 50%; transform: translate(-50%, -50%) scale(0.92); font-family: var(--font-en-display); font-size: clamp(22px, 3.4vmin, 36px); line-height: 1.16; color: var(--v4-mist); background: linear-gradient(90deg, transparent, rgba(12,12,10,.9) 12%, rgba(12,12,10,.9) 88%, transparent); border-top: 1px solid rgba(209,170,88,.72); border-bottom: 1px solid rgba(169,52,45,.75); padding: 13px 18px 14px; opacity: 0; transition: opacity 220ms ease, transform 360ms cubic-bezier(.2,.8,.2,1); pointer-events: none; z-index: 60; letter-spacing: .04em; text-shadow: 0 2px 12px rgba(0,0,0,.72); box-shadow: 0 18px 45px rgba(0,0,0,.28); backdrop-filter: blur(8px); width: calc(100% - 44px) !important; max-width: 450px !important; white-space: normal !important; overflow-wrap: anywhere; text-wrap: balance; text-align: center; font-weight: 700; box-sizing: border-box; }
        #stage-banner::before, #stage-banner::after { content: ''; position: absolute; top: 50%; width: 48px; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,188,104,.8)); }
        #stage-banner::before { right: calc(100% + 8px); } #stage-banner::after { left: calc(100% + 8px); transform: scaleX(-1); }
        #stage-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        #combat-event-banner {
            position: absolute;
            left: 50%;
            top: clamp(176px, 22%, 238px);
            z-index: 74;
            width: min(84%, 380px);
            box-sizing: border-box;
            transform: translate(-50%, -10px) scale(.97);
            opacity: 0;
            pointer-events: none;
            padding: 10px 16px 11px;
            text-align: center;
            color: #f5e8c7;
            background: rgba(15, 13, 10, .92);
            border-top: 1px solid rgba(218, 178, 91, .72);
            border-bottom: 1px solid rgba(218, 178, 91, .48);
            box-shadow: 0 10px 30px rgba(0,0,0,.34);
            transition: opacity 150ms ease, transform 220ms ease;
        }
        #combat-event-banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
        #combat-event-banner strong, #combat-event-banner span { display: block; }
        #combat-event-banner strong { font: 800 clamp(17px, 3.2vmin, 25px)/1.18 var(--font-zh-display), var(--font-en-display); }
        #combat-event-banner span { margin-top: 4px; color: rgba(245,232,199,.8); font: 650 clamp(11px, 1.9vmin, 14px)/1.3 var(--font-zh-body), var(--font-en-body); }
        #combat-event-banner[data-kind="damage"] { border-color: rgba(200,61,48,.82); background: rgba(37, 13, 10, .94); }
        #combat-event-banner[data-kind="sect"] { border-color: rgba(222,180,75,.95); background: rgba(31, 24, 10, .94); }
        #combat-event-banner[data-kind="ultimate"] { top: 42%; border-color: rgba(239,210,112,.98); background: rgba(12,10,8,.96); }
        #game-world:not([data-screen="game"]) #combat-event-banner { display: none; }

        #wanjian-cast-button {
            position:absolute;
            right:clamp(10px,3%,18px);
            bottom:clamp(178px,20vh,220px);
            z-index:132;
            width:82px;
            aspect-ratio:1;
            display:grid;
            grid-template-rows:1fr auto auto;
            place-items:center;
            padding:7px 6px 8px;
            border:2px solid #e3bf68;
            border-radius:50%;
            color:#fff2bf;
            background:radial-gradient(circle,rgba(86,61,15,.96) 0 45%,rgba(17,13,7,.98) 72%);
            box-shadow:0 0 0 4px rgba(201,162,75,.18),0 0 24px rgba(238,196,93,.62),inset 0 0 16px rgba(255,221,133,.18);
            cursor:pointer;
            touch-action:manipulation;
            animation:wanjian-ready-pulse 1.45s ease-in-out infinite;
        }
        #wanjian-cast-button[hidden] { display:none !important; }
        #wanjian-cast-button img { width:37px; height:37px; object-fit:contain; pointer-events:none; filter:drop-shadow(0 0 6px rgba(255,220,125,.65)); }
        #wanjian-cast-button strong { font:900 15px/1 var(--font-zh-display),var(--font-en-display); letter-spacing:0; pointer-events:none; }
        #wanjian-cast-button small { font:800 9px/1 var(--font-zh-display),var(--font-en-body); letter-spacing:0; color:#e3bf68; pointer-events:none; }
        #wanjian-cast-button:disabled { opacity:.58; cursor:not-allowed; animation:none; filter:saturate(.7); }
        #wanjian-cast-button:not(:disabled):active { transform:scale(.94); }
        @keyframes wanjian-ready-pulse {
            0%,100% { box-shadow:0 0 0 4px rgba(201,162,75,.16),0 0 18px rgba(238,196,93,.48),inset 0 0 16px rgba(255,221,133,.16); }
            50% { box-shadow:0 0 0 8px rgba(201,162,75,.08),0 0 32px rgba(255,213,100,.78),inset 0 0 20px rgba(255,228,150,.24); }
        }
        #game-world:not([data-screen="game"]) #wanjian-cast-button { display:none !important; }
        @media (max-width:430px), (max-height:760px) {
            #wanjian-cast-button { right:9px; bottom:166px; width:70px; padding:6px; }
            #wanjian-cast-button img { width:31px; height:31px; }
            #wanjian-cast-button strong { font-size:13px; }
        }

        #boss-hud { position: absolute; top: 137px; left: 50%; transform: translateX(-50%); width: min(78%, 560px); display: none; z-index: 110; pointer-events: none; text-align: center; padding: 12px 20px 14px; background: linear-gradient(180deg, rgba(21,18,15,.91), rgba(9,9,8,.85)); border: 1px solid rgba(209,170,88,.46); border-top: 1px solid rgba(209,170,88,.72); border-bottom: 2px solid var(--v4-vermilion); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.42); backdrop-filter: blur(9px); }
        #boss-name { font-family: var(--font-en-display); font-size: 29px; color: var(--v4-mist); letter-spacing: .045em; line-height: 1; font-weight: 700;}
        .boss-health-track { height: 9px; margin: 9px 0 7px; border: 0; border-radius: 999px; background: rgba(255,255,255,.09); overflow: hidden; }
        #boss-health-fill { width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8c2823, #d44c3e 52%, #f1cf78); transition: width 180ms ease-out; box-shadow: 0 0 15px rgba(212,76,62,.38); }
        .boss-state-row { min-height: 14px; display:flex; align-items:center; justify-content:center; gap:7px; margin:0 0 5px; color:rgba(246,241,231,.58); font:700 9px/1 "Source Sans 3","Noto Serif SC",sans-serif; }
        #boss-armor-pips { display:inline-flex; gap:3px; min-width:38px; justify-content:flex-start; }
        #boss-armor-pips i { display:block; width:11px; height:4px; background:#c9a85c; box-shadow:0 0 5px rgba(217,179,107,.4); }
        #boss-armor-pips i.empty { background:rgba(246,241,231,.13); box-shadow:none; }
        #boss-breaks { color:#d98e79; min-width:58px; text-align:left; }
        #boss-hint { font-family: var(--font-en-body); font-size: 17px; color: rgba(246,241,231,.68); max-width: 100%; line-height: 1.25;}

        /* Results Screen */
        #results-screen { background: radial-gradient(circle at 50% 8%, rgba(209,170,88,.12), transparent 28%), linear-gradient(180deg, rgba(5,5,4,.8), rgba(3,3,3,.96)); z-index: 300;}
        #results-screen .results-content:not(.leaderboard-only) { min-height: 100dvh; justify-content: center !important; gap: clamp(10px, 1.8vh, 18px) !important; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) !important; overflow-y: auto; }
        #results-screen .results-content:not(.leaderboard-only)::after { content: ''; position: fixed; inset: auto 0 0; height: 35%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0,0,0,.16)), radial-gradient(ellipse at 50% 110%, rgba(198,161,83,.10), transparent 58%); z-index: 0; }
        
        #personal-results {
            width: min(100%, 480px) !important;
            padding: clamp(20px, 3vh, 28px) clamp(16px, 4vw, 24px) !important;
            margin: 0 auto !important;
            border: 1px solid rgba(209,170,88,.44);
            border-top-color: rgba(240,215,154,.7);
            background: linear-gradient(145deg, rgba(248,241,223,.985), rgba(221,208,177,.97)), radial-gradient(circle at 100% 0, rgba(169,52,45,.12), transparent 34%);
            box-shadow: 0 22px 58px rgba(0,0,0,.48), inset 0 0 58px rgba(82,55,24,.05) !important;
            clip-path: polygon(1.5% 0, 98.5% 0, 100% 3%, 100% 97%, 98.5% 100%, 1.5% 100%, 0 97%, 0 3%);
            position: relative; isolation: isolate; overflow: hidden;
            display: flex; flex-direction: column; align-items: center; z-index: 1;
        }
        #personal-results::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(111,70,31,.13); pointer-events: none; background: linear-gradient(112deg, transparent 0 46%, rgba(111,70,31,.045) 46.5% 47%, transparent 47.5%), radial-gradient(circle at 88% 16%, rgba(157,53,45,.09), transparent 22%); z-index: -1; }
        #personal-results::after { content: '封'; position: absolute; right: 24px; top: 23px; width: 46px; height: 46px; display: grid; place-items: center; border: 2px solid rgba(169,52,45,.72); color: rgba(169,52,45,.72); font-family: var(--font-zh-display); font-size: 28px; transform: rotate(5deg); pointer-events: none; }
        #personal-results .ranks-row { display: flex; align-items: center; gap: 16px; width: 100%; margin: 8px 0 4px; padding: 10px 6px; border-top: 1px solid rgba(111,70,31,.17); }

        .result-kicker { color: #7d6a4a; font: 700 10px/1.2 var(--font-en-body); letter-spacing: .27em; text-transform: uppercase; margin-bottom: 8px; }
        .results-title { margin: 0 0 4px; font-size: clamp(32px, 6.5vw, 52px) !important; line-height: 1.02 !important; font-family: var(--font-en-display); font-weight: 700; color: #6f4f18; overflow-wrap:anywhere; text-wrap:balance; }
        #results-screen[data-outcome="defeat"] .results-title, #results-screen[data-outcome="timeout"] .results-title { color: #7d2822; }

        .results-score { position: relative; margin: 0 0 5px !important; font-size: clamp(52px, 10.5vw, 80px) !important; line-height: .98; color: #17130f; font-family: var(--font-en-body); font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }

        .result-highlight { position: relative; z-index: 2; width: min(100%, 460px); margin: 6px auto 4px !important; color: #6f211d; font-family: var(--font-en-display); font-size: clamp(16px, 3.5vw, 24px) !important; font-weight: 700; line-height: 1.2; letter-spacing: .035em; text-align: center; }
        .result-story { position: relative; z-index: 2; width: min(100%, 440px); margin: 2px auto 8px !important; color: #6d604c; font: 600 clamp(11px, 2.4vw, 14px)/1.45 var(--font-en-body); text-align: center; }

        .result-stats-grid.v18-final {
            position: relative; z-index: 2;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            width: min(100%, 460px);
            margin: 8px auto 10px !important;
            gap: 6px;
        }
        .result-stat {
            padding: 12px 4px 10px;
            border: 1px solid rgba(111,70,31,.12);
            border-radius: 6px;
            background: rgba(255,255,255,.28);
            text-align: center;
        }
        .result-stat-value {
            display: block;
            color: #1f1812;
            font: 800 clamp(18px, 4vw, 24px)/1.1 var(--font-en-body);
            font-variant-numeric: tabular-nums;
        }
        .result-stat-label {
            display: block;
            margin-top: 4px;
            color: #6d5f4a;
            font: 700 clamp(8px, 1.7vw, 10px)/1.2 var(--font-en-body);
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .results-rank { position: relative; margin: 0; padding-top: 12px !important; border-top: 1px solid rgba(111,70,31,.12); display: flex; flex-direction: column; align-items: center;}
        .rank-seal { width: clamp(64px, 14vw, 88px) !important; height: clamp(64px, 14vw, 88px) !important; margin: 0 auto 6px; filter: drop-shadow(0 9px 13px rgba(87,40,20,.18)); animation: v4-stamp-in 620ms cubic-bezier(.16,.9,.26,1.18) both; }
        @keyframes v4-stamp-in { 0% { opacity: 0; transform: scale(1.65) rotate(-10deg); filter: blur(4px); } 65% { opacity: 1; transform: scale(.94) rotate(2deg); filter: blur(0); } 100% { transform: scale(1) rotate(0); } }
        .rank-title { margin: 0 0 3px; font-size: clamp(26px, 5vw, 36px) !important; color: #1f1812; font-family: var(--font-en-display); font-weight: 800;}
        .rank-phrase { max-width: 440px; margin: 0 auto; color: #6c604e; font: 500 12px/1.4 var(--font-en-body); }

        .button-row { width: min(100%, 480px) !important; margin: 0 auto !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; z-index: 4 !important; padding: 4px 0 !important; }
        .button-row .button { min-height: 52px !important; padding: 10px 4px !important; font-size: clamp(15px, 3.2vw, 20px) !important; display: flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: 8px !important; }

        /* Local Leaderboard */
        .leaderboard-section {
            width: min(94%, 680px); height: auto; max-height: 50vh; min-height: 230px;
            margin: 0; padding: 22px 16px 18px;
            overflow-y: auto;
            touch-action: pan-y;
            overscroll-behavior: contain;
            color: var(--v4-mist);
            background: linear-gradient(180deg, rgba(20,18,15,.94), rgba(8,8,7,.94));
            border: 1px solid rgba(209,170,88,.34);
            border-top-color: rgba(240,215,154,.58);
            border-bottom: 2px solid rgba(169,52,45,.72);
            border-radius: 14px;
            box-shadow: 0 20px 55px rgba(0,0,0,.43), inset 0 0 38px rgba(255,255,255,.018);
            display: flex; flex-direction: column; align-items: center;
        }
        .leaderboard-title { margin: 0 0 2px; color: var(--v4-mist); font-size: clamp(35px, 6vw, 50px); letter-spacing: .055em; text-shadow: 0 2px 12px rgba(0,0,0,.55); font-family: var(--font-en-display); font-weight: 700;}
        .leaderboard-subtitle { margin-bottom: 9px; color: var(--v4-gold); font: 700 10px/1.2 var(--font-en-body); letter-spacing: .25em; text-transform: uppercase; }
        .player-rank-info { margin: 0 auto 10px; padding: 6px 10px; color: rgba(246,241,231,.72); background: rgba(255,255,255,.035); border-radius: 999px; font: 600 11px/1.3 var(--font-en-body); }
        .leaderboard-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; width: 100%;}
        .leaderboard-entry {
            display: grid;
            grid-template-columns: 38px 46px minmax(0,1fr) 76px;
            align-items: center; gap: 8px;
            padding: 9px 12px;
            color: var(--v4-mist);
            background: rgba(255,255,255,.035);
            border: 1px solid rgba(255,255,255,.045);
            border-bottom-color: rgba(255,255,255,.075);
            border-radius: 8px;
            transition: background .15s, border-color .15s;
        }
        .leaderboard-entry:hover { background: rgba(255,255,255,.06); border-color: rgba(209,170,88,.2); }
        .leaderboard-entry.current-player { background: linear-gradient(90deg, rgba(169,52,45,.28), rgba(209,170,88,.08)); border: 1px solid rgba(240,215,154,.55); box-shadow: 0 0 0 1px rgba(169,52,45,.18), 0 8px 22px rgba(0,0,0,.24); }
        .entry-rank { color: var(--v4-gold-soft); font-size: 18px; font-weight: 700; text-align: center;}
        .entry-seal { width: 42px; height: 42px; object-fit: contain; }
        .entry-name-wrapper { display: flex; flex-direction: column; overflow: hidden; text-align: left;}
        .entry-username { color: #fffaf0; font-size: 14px; font-family: var(--font-en-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
        .entry-rank-title { color: var(--v4-gold); font-size: 15px; font-family: var(--font-en-display);}
        .entry-score { color: #fff; font-size: 17px; font-weight: 700; text-align: right;}
        .leaderboard-loading { color: rgba(246,241,231,.62); font-family: var(--font-en-body); padding: 20px;}

        .results-content.leaderboard-only { justify-content: center !important; padding: 26px 20px !important; }
        .results-content.leaderboard-only .leaderboard-section { width: min(94%, 680px); height: min(72vh, 790px); max-height: 72vh; padding: 28px 18px 18px; }
        .results-content.leaderboard-only .button-row { grid-template-columns: 1fr !important; margin-top: 4px; }
        
        /* Share Modal */
        .share-fallback-modal[hidden] { display: none !important; }
        .share-fallback-modal {
            position: absolute !important;
            inset: 0 !important;
            z-index: 2 !important;
            padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
            background: rgba(5,5,4,.90) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
        }
        .share-fallback-card { width: min(96vw, 500px) !important; height: min(98dvh, 820px) !important; max-height: 98dvh !important; padding: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; border: 0 !important; border-radius: 14px !important; background: #13110e !important; color: #f5ecd8 !important; box-shadow: 0 28px 90px rgba(0,0,0,.72) !important; }
        .share-fallback-card h3 { margin: 0 !important; padding: 11px 52px 2px !important; flex: 0 0 auto; color: #f4e6c6 !important; font: 700 clamp(17px, 4vw, 22px)/1.2 var(--font-en-display) !important; letter-spacing: .08em; text-align: center;}
        .share-fallback-card > p { margin: 0 !important; padding: 2px 42px 7px !important; flex: 0 0 auto; color: rgba(245,236,216,.58) !important; font: 600 11px/1.35 var(--font-en-body) !important; text-align: center;}
        #share-card-open { width: auto !important; min-height: 0 !important; flex: 1 1 auto !important; display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 !important; padding: 0 10px !important; overflow: hidden !important; background: radial-gradient(circle at 50% 40%, rgba(202,167,91,.10), transparent 52%), #0b0a08 !important; text-decoration: none;}
        #share-card-preview { display: block !important; width: auto !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; aspect-ratio: 4 / 5 !important; object-fit: contain !important; margin: 0 !important; border: 0 !important; border-radius: 4px !important; background: transparent !important; box-shadow: 0 10px 34px rgba(0,0,0,.52) !important; }
        #share-action-status { flex: 0 0 auto !important; min-height: 24px !important; margin: 0 !important; padding: 5px 12px !important; border-radius: 0 !important; background: rgba(255,255,255,.035) !important; color: rgba(245,236,216,.68) !important; font-size: 10px !important; font-family: var(--font-en-body); text-align: center; display: flex; align-items: center; justify-content: center;}
        .share-fallback-actions.three { flex: 0 0 auto !important; display: grid !important; grid-template-columns: 1fr 1fr auto !important; gap: 7px !important; margin: 0 !important; padding: 8px !important; background: #13110e !important; }
        .share-fallback-actions button { min-height: 43px !important; padding: 8px 9px !important; border-radius: 6px !important; border: 1px solid rgba(220,186,108,.23) !important; font-size: 12px !important; background: #8f2c25; color: #fff7e8; font-family: var(--font-en-body); font-weight: 700; cursor: pointer; transition: transform .14s ease, filter .14s ease;}
        .share-fallback-actions button:active { transform:scale(.97); }
        .share-fallback-actions button[disabled] { opacity:.58; cursor:wait; }
        #share-fallback-save { background: #2d2821 !important; color: #fff7e8 !important; }
        #share-fallback-close { min-width: 58px; background: rgba(255,255,255,.07) !important; color: rgba(245,236,216,.78) !important; border-color: transparent !important;}
        
        /* Language Overrides */
        html[lang="zh"] .hud-label, html[lang="zh"] .skill-desc, html[lang="zh"] .name-entry-subtitle, html[lang="zh"] .name-helper-text, html[lang="zh"] #score-display, html[lang="zh"] #timer-display, html[lang="zh"] #combo-display, html[lang="zh"] #lives-display, html[lang="zh"] #intent-label, html[lang="zh"] #intent-value, html[lang="zh"] #boss-hint, html[lang="zh"] .leaderboard-subtitle, html[lang="zh"] .player-rank-info, html[lang="zh"] .entry-username, html[lang="zh"] .entry-score, html[lang="zh"] .rank-phrase, html[lang="zh"] .result-stat-label, html[lang="zh"] .result-stat-value, html[lang="zh"] .menu-footnote, html[lang="zh"] .daily-challenge-badge, html[lang="zh"] .menu-kicker, html[lang="zh"] .result-kicker, html[lang="zh"] .skill-kicker, html[lang="zh"] .skill-safe-hint { font-family: var(--font-zh-display), var(--font-en-body) !important; }
        html[lang="zh"] .title, html[lang="zh"] .subtitle, html[lang="zh"] .button, html[lang="zh"] .skill-header, html[lang="zh"] .skill-name, html[lang="zh"] .name-entry-title, html[lang="zh"] .results-title, html[lang="zh"] .rank-title, html[lang="zh"] .leaderboard-title, html[lang="zh"] .entry-rank-title, html[lang="zh"] #stage-banner, html[lang="zh"] #boss-name, html[lang="zh"] .combo-feedback, html[lang="zh"] #player-name-display, html[lang="zh"] #active-skill-name, html[lang="zh"] .skill-chip-copy, html[lang="zh"] .result-highlight { font-family: var(--font-zh-display), var(--font-en-display) !important; }

        /* Media Queries */
        @media (max-width: 620px) {
            #menu-screen .screen-content { padding: 70px 18px 24px; }
            .menu-hero { width: 96%; padding: 35px 20px 28px; margin-bottom: 22px; }
            #menu-screen .title { font-size: min(13vw, 54px); letter-spacing: 2px; white-space: nowrap !important; }
            #menu-screen .subtitle { font-size: 16px; padding-inline: 18px; }
            .menu-actions { width: 92%; }
            .button { font-size: 22px; padding: 15px 20px;}
            .button.secondary { font-size: 17px; }
            
            #hud { top: 12px; padding: 0 9px; gap: 5px; grid-template-columns: .88fr 1.18fr .8fr 1.08fr;}
            .hud-item { padding: 5px 4px 6px; border-radius: 8px; }
            .hud-label { font-size: 8px; letter-spacing: .08em; }
            #score-display, #timer-display, #combo-display, #lives-display { font-size: 17px; }
            
            #gate-hud { top: 61px; width: 94%; padding: 7px 10px; font-size: 9px; gap: 6px; }
            #intent-hud { top: 94px !important; }
            #boss-hud { top: 126px !important; width: 88%; padding: 9px 14px 11px; }
            #boss-name { font-size: 24px; }
            #boss-hint { font-size: 12px !important; }
            
            #stage-banner { font-size: clamp(22px, 6.7vw, 34px) !important; padding: 12px 14px !important; top: 55% !important;}
            .combo-feedback { font-size: clamp(32px, 9.5vw, 54px) !important; top: 30% !important;}

            .result-stats-grid.v18-final { gap: 5px; }
            #results-screen .rank-seal { width: 82px !important; height: 82px !important; }
            #results-screen .button-row { grid-template-columns: 1fr 1fr !important; width: 98vw !important;}
            #results-screen .button-row #restart-button { grid-column: 1 / -1 !important; }
            
            .leaderboard-section { width: 98%; max-height: 39vh; min-height: 200px; padding: 15px 9px 11px; }
            .leaderboard-title { font-size: 30px; letter-spacing: 4px; }
            .leaderboard-entry { grid-template-columns: 30px 38px minmax(0,1fr) 60px; padding: 7px 7px; }
            .entry-seal { width: 34px; height: 34px; }
            .entry-username { font-size: 12px; }
            .entry-score { font-size: 14px; }
        }
        
        @media (max-width: 430px) {
            #active-skill-container { left: 10px !important; bottom: max(12px, env(safe-area-inset-bottom)) !important; max-width: 78%; }
            #active-skill-name { max-width: 170px; font-size: 16px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
            .skill-modal-shell { max-height: 91dvh; padding: 18px 13px 13px; }
            #skill-screen .skill-card { min-height: 91px; padding: 13px 54px 13px 15px; }
            .share-fallback-actions.three { grid-template-columns: 1fr 1fr 52px !important; }
        }

        @media (max-width: 390px), (max-height: 720px) {
            #gate-hud { width: 96%; padding-inline: 8px; }
            #gate-count, #gate-next { font-size: 8px; }
            #boss-hud { width: 94%; padding: 8px 10px 9px; }
            #boss-name { font-size: 19px; }
            #boss-hint { font-size: 10px !important; }
            .result-highlight { font-size: 18px !important; }
            .result-story { font-size: 11px !important; margin-bottom: 7px !important; }
            .result-stats-grid.v18-final { margin-block: 5px 8px !important; }
            #results-screen .rank-seal { width: 68px !important; height: 68px !important; }
            #results-screen .rank-title { font-size: 27px !important; }
            #results-screen .rank-phrase { font-size: 10px; display: none !important;}
            #personal-results { padding-top: 14px !important; padding-bottom: 12px !important; }
            .share-fallback-card h3, .share-fallback-card > p { display: none !important; }
        }


        /* === Sword Seal Ultimate: brighter wuxia art direction === */
        :root {
            --font-zh-display: "Noto Serif SC", "Songti SC", "STSong", "Source Han Serif SC", serif;
            --seal-silver: #e8eef0;
            --seal-gold: #f3d27a;
            --seal-cinnabar: #bb4b3f;
        }
        #game-world {
            background: #24221e;
            box-shadow: 0 0 72px rgba(0,0,0,.72), 0 0 0 1px rgba(222,190,115,.52);
        }
        #game-world::after {
            background:
                radial-gradient(circle at 50% 18%, rgba(255,244,210,.07), transparent 35%),
                linear-gradient(180deg, rgba(255,247,226,.015), rgba(10,9,8,.09) 62%, rgba(5,5,4,.29)),
                radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.34) 100%);
            mix-blend-mode: normal;
        }
        #stage-banner, .combo-feedback, #boss-name,
        .results-title, .rank-title, .leaderboard-title,
        #menu-screen .title, .skill-header, .skill-name {
            font-family: var(--font-en-display), var(--font-zh-display) !important;
            font-weight: 500 !important;
            letter-spacing: .08em;
        }
        .hud-label, #score-display, #timer-display, #combo-display,
        #lives-display, #gate-hud, #boss-hint, .result-stat-label,
        .result-stat-value, .skill-desc, .result-story {
            font-family: var(--font-en-body), var(--font-zh-display) !important;
        }
        #gate-hud {
            background: linear-gradient(180deg, rgba(31,29,25,.86), rgba(18,17,15,.72));
            border-color: rgba(231,204,139,.55);
            color: #fff9e9;
        }
        #gate-next { white-space: normal; line-height: 1.28; text-align: left; }
        #stage-banner {
            color: #fffaf0;
            border-top-color: rgba(248,220,147,.9);
            border-bottom-color: rgba(187,75,63,.84);
            text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 0 24px rgba(243,210,122,.24);
        }
        .combo-feedback {
            color: var(--seal-gold);
            text-shadow: 0 2px 0 rgba(67,29,24,.72), 0 0 30px rgba(243,210,122,.72);
        }
        @media (max-width:620px) {
            #gate-hud { top: 59px; width: 95%; font-size: 9px; }
            #gate-count { flex: 0 0 auto; }
        }


        /* === Core Loop Clarity Pass: restrained menu, purpose HUD, rules modal === */
        #game-world { container-type: inline-size; }

        #menu-screen .screen-content {
            justify-content: flex-start;
            padding: clamp(68px, 10vh, 100px) 20px 24px;
        }
        #menu-screen .menu-hero {
            width: min(80%, 380px);
            margin: 0 auto 22px;
            padding: 20px 20px 18px;
            border-radius: 8px;
            background: linear-gradient(150deg, rgba(20,18,15,.88), rgba(10,10,8,.92));
            border: 1px solid rgba(226,197,126,.40);
            border-top-color: rgba(241,220,164,.65);
            border-bottom: 1px solid rgba(166,55,46,.55);
            box-shadow: 0 16px 44px rgba(0,0,0,.42), inset 0 0 24px rgba(226,197,126,.025);
        }
        #menu-screen .menu-hero::before { top: 11px; width: 60px; opacity: .6; }
        #menu-screen .menu-hero::after { bottom: 10px; width: 54px; opacity: .6; }
        #menu-screen .menu-kicker {
            margin: 0 0 12px;
            font-family: "Source Sans 3", system-ui, sans-serif;
            font-size: 9px;
            line-height: 1;
            letter-spacing: .24em;
            opacity: .8;
        }
        #menu-screen .title {
            margin: 0 auto 12px;
            max-width: 100%;
            color: #faf6eb;
            line-height: 1.04;
            letter-spacing: .055em;
            white-space: normal !important;
            overflow-wrap: normal;
            text-wrap: balance;
            text-shadow: 0 2px 8px rgba(0,0,0,.74), 0 0 22px rgba(221,191,120,.16);
        }
        html[lang="zh"] #menu-screen .title {
            font-family: "Noto Serif SC", "Songti SC", serif !important;
            font-size: clamp(30px, 7cqw, 36px);
            font-weight: 700 !important;
            letter-spacing: .08em;
        }
        html[lang="en"] #menu-screen .title {
            font-family: "Cinzel", Georgia, serif !important;
            font-size: clamp(24px, 6cqw, 32px);
            font-weight: 600 !important;
            letter-spacing: .045em;
        }
        #menu-screen .title .title-secondary {
            display: block;
            margin-top: 2px;
            font-size: .70em;
            letter-spacing: .18em;
        }
        #menu-screen .subtitle {
            margin: 0 auto;
            padding: 10px 6px 10px;
            max-width: 280px;
            color: rgba(247,242,230,.7);
            font-family: "Source Sans 3", "Noto Serif SC", system-ui, sans-serif !important;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.35;
            letter-spacing: .015em;
            text-wrap: balance;
        }
        html[lang="zh"] #menu-screen .subtitle {
            font-family: "Noto Serif SC", "Songti SC", serif !important;
            font-size: 13px;
            letter-spacing: .06em;
        }
        #menu-screen .daily-challenge-badge,
        #menu-screen .menu-footnote { display: none !important; }
        #player-name-display {
            margin: 0 0 10px !important;
            color: rgba(226,200,137,.7) !important;
            font-family: "Source Sans 3", "Noto Serif SC", sans-serif !important;
            font-size: 11px !important;
            letter-spacing: .03em;
        }
        #menu-screen .menu-actions {
            width: min(72%, 340px);
            gap: 8px;
        }
        #menu-screen .menu-secondary-actions {
            grid-template-columns: 1fr 1fr;
            gap: 6px;
        }
        #menu-screen .button {
            min-height: 54px;
            padding: 11px 16px;
            clip-path: polygon(2% 0,98% 0,100% 14%,100% 86%,98% 100%,2% 100%,0 86%,0 14%);
            font-family: "Noto Serif SC", "Cinzel", serif !important;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: .05em;
            animation: none;
            background-image: linear-gradient(180deg,#c94236 0%,#a42e27 58%,#77201c 100%) !important;
            box-shadow: 0 10px 24px rgba(103,19,15,.36), inset 0 1px rgba(255,255,255,.16) !important;
        }
        html[lang="zh"] #menu-screen .button { font-size: 21px; }
        #menu-screen .button.secondary {
            min-height: 40px;
            padding: 8px 6px;
            font-family: "Source Sans 3", "Noto Serif SC", sans-serif !important;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .03em;
            border-radius: 2px;
            clip-path: none;
            background: rgba(10,10,8,.66) !important;
        }
        html[lang="zh"] #menu-screen .button.secondary {
            font-family: "Noto Serif SC", serif !important;
            font-size: 13px;
        }

        /* Purpose HUD: always answers threat / required art / current progress. */
        #gate-hud {
            top: 63px;
            width: min(92%, 470px);
            padding: 8px 12px 9px;
            display: none;
            grid-template-columns: 1fr auto;
            grid-template-areas:
                "title time"
                "threat threat"
                "progress progress";
            gap: 3px 8px;
            border-radius: 9px;
            background: linear-gradient(180deg, rgba(24,22,18,.92), rgba(11,11,9,.86));
            box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 18px rgba(225,195,126,.025);
            text-align: left;
            font-family: "Source Sans 3", "Noto Serif SC", sans-serif !important;
        }
        #gate-count { grid-area: title; color: #f1d58f; font-size: 10px; letter-spacing: .08em; }
        #gate-time { grid-area: time; color: rgba(248,243,230,.68); font-size: 10px; font-variant-numeric: tabular-nums; }
        #gate-threat { grid-area: threat; color: #fffaf0; font: 700 13px/1.28 "Noto Serif SC", "Source Sans 3", serif; letter-spacing: .035em; }
        #gate-next { grid-area: progress; color: rgba(245,238,220,.70); font-size: 10.5px; line-height: 1.25; white-space: normal; overflow: hidden; }
        #gate-reqs { grid-column:1/-1; display:flex; gap:6px; flex-wrap:wrap; padding:3px 2px 1px; border-top:1px solid rgba(209,170,88,.25); margin-top:1px; white-space:normal; }
        .req-badge { display:inline-flex; align-items:center; gap:4px; font:700 9.5px/1.2 var(--font-en-body); color:#d4c49e; background:rgba(209,170,88,.12); padding:2px 7px; border-radius:999px; border:1px solid rgba(209,170,88,.15); }
        .req-badge.done { color:#b8d9a8; background:rgba(100,180,80,.12); border-color:rgba(100,180,80,.25); }
        .hud-life-row { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; }
        #route-relics { position:static; display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:2px; pointer-events:none; min-width:0; max-width:58px; }
        #route-relics:empty { display:none; }
        #game-world:not([data-screen="game"]) #route-relics { display:none !important; }
        .route-relic-chip { display:grid; place-items:center; flex:0 0 17px; width:17px; height:17px; font:700 9px/1 var(--font-en-body); color:#f5ecd5; background:rgba(20,16,12,.88); padding:0; border-radius:50%; border:1px solid rgba(217,179,107,.48); white-space:nowrap; overflow:hidden; box-shadow:0 1px 5px rgba(0,0,0,.54), inset 0 0 6px rgba(217,179,107,.13); transition:transform .3s ease, box-shadow .3s ease; }
        .route-relic-chip.relic-pulse { animation: relicPulseAnim 0.8s ease-out; }
        @keyframes relicPulseAnim { 0% { transform: scale(1.15); box-shadow: 0 0 16px rgba(255,210,118,0.8); } 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(0,0,0,0.6); } }
        .route-relic-chip .glyph { color:#ffd276; font-weight:700; font-size:9px; text-shadow:0 0 4px rgba(255,210,118,.52); }
        .route-relic-chip .relic-icon { width: 16px; height: 16px; object-fit: contain; margin-right: 2px; }
        .route-relic-overflow { color:#ffd276; background:rgba(30,22,15,.85); border:1px dashed rgba(217,179,107,.6); font-size:8px; }
        .req-badge .req-value { color:#f5ecd5; font-weight:800; }
        .req-badge .req-label { opacity:.78; }
        .gate-divider { display: none; }

        #active-skill-container { bottom: 181px !important; max-width: min(88%, 430px) !important; }
        html[lang="zh"] #player-name-display, html[lang="en"] #player-name-display { font-family: "Source Sans 3", "Noto Serif SC", sans-serif !important; font-size: 13px !important; }

        /* Stroke chip: rare, single short line only (action game — no reading mid-slash). */
        #stroke-result {
            position: absolute;
            left: 50%;
            bottom: 182px;
            z-index: 119;
            width: auto;
            max-width: min(70%, 280px);
            transform: translate(-50%, 7px);
            opacity: 0;
            pointer-events: none;
            padding: 5px 12px;
            border: 1px solid rgba(231,204,139,.28);
            border-radius: 999px;
            background: rgba(12,11,9,.72);
            color: #f7efdc;
            font: 700 11px/1.2 "Source Sans 3", "Noto Serif SC", sans-serif;
            text-align: center;
            letter-spacing: 0.04em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: opacity 110ms ease, transform 140ms ease;
            box-shadow: 0 5px 14px rgba(0,0,0,.24);
        }
        #stroke-result.show { opacity: 0.92; transform: translate(-50%, 0); }
        #stroke-result.danger { color: #ffaca2; border-color: rgba(211,76,62,.55); }
        #stroke-result.success { color: #ffe8aa; border-color: rgba(233,196,102,.55); }

        /* Interactive micro-teach: under gate HUD, never over mid-field foes */
        #teach-banner {
            position: absolute;
            left: 50%;
            top: max(96px, calc(env(safe-area-inset-top, 0px) + 92px));
            z-index: 121;
            width: min(92%, 340px);
            transform: translate(-50%, 0);
            pointer-events: none;
            padding: 8px 14px 7px;
            border: 1px solid rgba(232, 201, 120, .55);
            border-radius: 10px;
            background: linear-gradient(180deg, rgba(22, 18, 12, .92), rgba(10, 9, 7, .90));
            box-shadow: 0 8px 22px rgba(0,0,0,.45);
            text-align: center;
            animation: teach-banner-in 180ms ease both;
        }
        #teach-banner[hidden] { display: none !important; }
        #teach-banner strong {
            display: block;
            color: #ffe7a8;
            font: 750 clamp(13px, 2.8vmin, 17px)/1.2 "Noto Serif SC", "Cinzel", serif;
            letter-spacing: .04em;
            text-shadow: 0 1px 6px rgba(0,0,0,.75);
        }
        #teach-banner span {
            display: block;
            margin-top: 3px;
            color: rgba(245, 232, 200, .82);
            font: 600 clamp(10px, 2vmin, 12px)/1.3 "Source Sans 3", "Noto Serif SC", sans-serif;
        }
        #teach-banner[data-phase="AWAIT_ACTION"] {
            border-color: rgba(255, 210, 100, .88);
            box-shadow: 0 8px 24px rgba(0,0,0,.48), 0 0 18px rgba(255, 190, 60, .22);
        }
        #teach-banner[data-phase="AWAIT_ACTION"] strong {
            color: #fff0b8;
        }
        #teach-banner[data-phase="CONFIRM"] strong {
            color: #c8e6a8;
        }
        #teach-banner[data-outcome="timeout"] {
            border-color: rgba(180, 160, 130, .4);
            opacity: .88;
        }
        @keyframes teach-banner-in {
            from { opacity: 0; transform: translate(-50%, -6px); }
            to { opacity: 1; transform: translate(-50%, 0); }
        }
        #game-world:not([data-screen="game"]) #teach-banner { display: none !important; }

        /* How-to-play modal (lives in #modal-layer; z-index relative to layer) */
        #how-to-play-modal[hidden] { display: none !important; }
        #how-to-play-modal {
            position: absolute;
            inset: 0;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(4,4,3,.84);
            backdrop-filter: blur(10px);
            pointer-events: auto;
        }
        .howto-card,
        .howto-card p,
        .results-content,
        .pk-modal-card,
        .name-input,
        #arcade-name-input,
        .menu-name-input,
        #pk-modal-status {
            -webkit-user-select: text;
            user-select: text;
            -webkit-touch-callout: default;
        }
        .howto-controls {
            margin: 0 0 12px;
            color: rgba(248,241,223,.78);
            font: 600 13px/1.45 var(--font-en-body);
            text-align: center;
        }
        .howto-card {
            position: relative;
            width: min(92%, 430px);
            max-height: min(86dvh, 760px);
            overflow-y: auto;
            touch-action: pan-y;
            overscroll-behavior: contain;
            padding: 26px 22px 20px;
            border: 1px solid rgba(229,199,126,.58);
            border-top-color: rgba(244,222,165,.85);
            border-bottom: 2px solid rgba(171,55,47,.85);
            border-radius: 10px;
            background: linear-gradient(150deg, rgba(30,27,22,.98), rgba(12,12,10,.98));
            color: #f8f1df;
            box-shadow: 0 25px 76px rgba(0,0,0,.68);
        }
        .howto-close {
            position: absolute;
            top: 9px;
            right: 10px;
            width: 34px;
            height: 34px;
            border: 0;
            border-radius: 50%;
            background: rgba(255,255,255,.06);
            color: rgba(255,255,255,.72);
            font-size: 20px;
            cursor: pointer;
        }
        #howto-title {
            margin: 0 34px 20px;
            color: #fff8e6;
            font: 700 clamp(22px,5vw,27px)/1.15 "Noto Serif SC", "Cinzel", serif;
            text-align: center;
            overflow-wrap:anywhere;
            text-wrap:balance;
        }
        html[lang="en"] #howto-title { font-family: "Cinzel", serif; font-size: clamp(19px,4.5vw,23px); }
        .howto-list { display: grid; gap: 11px; }
        .howto-item {
            padding: 11px 12px;
            border-left: 2px solid rgba(223,184,92,.72);
            background: rgba(255,255,255,.035);
        }
        .howto-item h3 {
            margin: 0 0 4px;
            color: #efd28b;
            font: 700 14px/1.2 "Noto Serif SC", "Source Sans 3", serif;
        }
        .howto-item p {
            margin: 0;
            color: rgba(248,242,227,.72);
            font: 550 12px/1.45 "Source Sans 3", "Noto Serif SC", sans-serif;
        }
        .howto-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
        .howto-actions button {
            min-height: 48px;
            border: 1px solid rgba(226,193,115,.46);
            border-radius: 6px;
            background: rgba(255,255,255,.055);
            color: #f8f0dc;
            font: 700 15px "Source Sans 3", "Noto Serif SC", sans-serif;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        #howto-begin {
            background: linear-gradient(180deg, rgba(32, 26, 20, 0.95) 0%, rgba(14, 12, 10, 0.98) 100%) !important;
            border: 1px solid rgba(217, 179, 107, 0.75) !important;
            color: #e9cb82 !important;
            font-family: "Noto Serif SC", "Cinzel", serif !important;
            font-size: 16px !important;
            font-weight: 700 !important;
            letter-spacing: 0.15em !important;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(217, 179, 107, 0.15) !important;
        }
        #howto-begin:hover {
            background: linear-gradient(180deg, rgba(46, 38, 28, 0.98) 0%, rgba(20, 16, 12, 1) 100%) !important;
            border-color: rgba(235, 200, 130, 0.95) !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(217, 179, 107, 0.25) !important;
            color: #fff4d0 !important;
            transform: translateY(-1px);
        }


        .howto-loop {
            display: grid;
            grid-template-columns: repeat(4, minmax(0,1fr));
            gap: 4px;
            margin: -5px 0 16px;
            padding: 9px 8px;
            border: 1px solid rgba(231,201,130,.25);
            border-radius: 7px;
            background: linear-gradient(180deg, rgba(239,209,136,.07), rgba(255,255,255,.018));
            color: rgba(255,248,229,.86);
            font: 750 10px/1.2 "Source Sans 3","Noto Serif SC",sans-serif;
            letter-spacing: .04em;
            text-align: center;
        }
        .howto-loop span { position:relative; padding-right:10px; }
        .howto-loop span:not(:last-child)::after {
            content:'›'; position:absolute; right:0; top:50%; transform:translateY(-52%);
            color:#e7bd62; font-size:14px; opacity:.9;
        }
        .howto-arts-item { padding-bottom: 13px; }
        .howto-seal-grid {
            display:grid;
            grid-template-columns: repeat(2, minmax(0,1fr));
            gap:7px;
            margin-top:10px;
        }
        .howto-seal-card {
            display:grid;
            grid-template-columns: 42px minmax(0,1fr);
            align-items:center;
            gap:9px;
            min-height:56px;
            padding:7px 8px;
            border:1px solid rgba(233,205,137,.20);
            border-radius:6px;
            background:rgba(255,255,255,.025);
        }
        .howto-seal-card {
            border-color: color-mix(in srgb, var(--seal-color, #e9cd89) 42%, rgba(233,205,137,.20));
        }
        .howto-seal-card.origin {
            border-color:rgba(201,162,75,.48);
            background:linear-gradient(135deg,rgba(135,96,28,.18),rgba(255,255,255,.025));
        }
        .howto-seal-card.residual {
            border-color: rgba(154,154,160,.55);
            background: rgba(36,36,40,.78);
        }
        .howto-seal-card.break { --seal-color:#c65b49; }
        .howto-seal-card.swift { --seal-color:#6ba7b7; }
        .howto-seal-card.guard { --seal-color:#7e9f73; }
        .howto-seal-card.shadow { --seal-color:#8a78ae; }
        .howto-seal-card.origin { --seal-color:#c9a24b; }
        .howto-seal-card.residual { --seal-color:#9a9aa0; }
        .howto-seal-icon {
            width:42px; height:42px; display:block;
            border-radius:8px;
            background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.08),rgba(0,0,0,.14));
        }
        .howto-seal-name {
            margin:0 0 2px; color:#fff4d5;
            font:800 11px/1.15 "Source Sans 3","Noto Serif SC",sans-serif;
            letter-spacing:.03em;
        }
        .howto-seal-effect {
            color:rgba(245,238,221,.70);
            font:600 10px/1.25 "Source Sans 3","Noto Serif SC",sans-serif;
        }

        /* Quiet battle tension: the edge reacts to danger without covering the arena. */
        #tension-frame {
            position:absolute; inset:0; z-index:116; pointer-events:none; opacity:.20;
            box-shadow: inset 0 0 28px rgba(225,194,119,.10);
            transition: opacity 180ms ease, box-shadow 180ms ease;
        }
        #game-world[data-tension="rising"] #tension-frame {
            opacity:.42;
            box-shadow: inset 0 0 34px rgba(224,180,78,.20), inset 0 -22px 34px rgba(111,70,23,.15);
        }
        #game-world[data-tension="high"] #tension-frame {
            opacity:.72; animation:tension-breathe 1.05s ease-in-out infinite;
            box-shadow: inset 0 0 44px rgba(211,82,62,.28), inset 0 -34px 50px rgba(128,35,27,.22);
        }
        #game-world[data-tension="critical"] #tension-frame {
            opacity:.95; animation:tension-breathe .58s ease-in-out infinite;
            box-shadow: inset 0 0 54px rgba(236,72,55,.48), inset 0 0 0 2px rgba(240,91,68,.32);
        }
        #game-world[data-tension="origin"] #tension-frame {
            opacity:.78; animation:origin-breathe 1.25s ease-in-out infinite;
            box-shadow: inset 0 0 48px rgba(247,202,83,.34), inset 0 0 0 1px rgba(250,217,119,.28);
        }
        @keyframes tension-breathe { 50% { opacity:.46; } }
        @keyframes origin-breathe { 50% { opacity:.42; filter:brightness(1.12); } }

        /* Gate introductions feel like a sword title card, not a full-width debug bar. */
        #stage-banner {
            width:min(62%, 280px) !important; max-width:280px !important;
            padding:7px 14px 8px !important;
            border:1px solid rgba(229,195,112,.35) !important;
            border-radius:4px !important;
            background:linear-gradient(105deg,rgba(8,8,7,.88),rgba(20,17,13,.84),rgba(8,8,7,.88)) !important;
            box-shadow:0 8px 24px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.04) !important;
            transition: opacity 180ms ease, transform 300ms cubic-bezier(.2,.8,.2,1) !important;
        }
        #stage-banner::before, #stage-banner::after { display:none !important; }
        .stage-index {
            display:block; margin-bottom:2px; color:#d4b06a;
            font:700 8px/1 "Source Sans 3","Noto Serif SC",sans-serif;
            letter-spacing:.18em; text-transform:uppercase;
        }
        .stage-name {
            display:block; color:#f5ecdb;
            font:600 clamp(15px,3.8cqw,21px)/1.1 "Cinzel","Noto Serif SC",serif;
            letter-spacing:.03em;
        }
        .stage-subtitle {
            display:block; margin-top:3px; color:rgba(246,238,219,.6);
            font:600 9px/1.2 "Source Sans 3","Noto Serif SC",sans-serif;
            letter-spacing:.025em;
        }
        html[lang="zh"] .stage-name { font-family:"Noto Serif SC",serif; font-weight:700; }

        .combo-feedback.impact { animation:feedback-impact 300ms cubic-bezier(.18,.88,.28,1.2) both; }
        @keyframes feedback-impact { 0%{transform:translate(-50%,-50%) scale(.88);filter:brightness(1.35)} 100%{transform:translate(-50%,-50%) scale(1);filter:brightness(1)} }
        .combo-feedback[data-seal="break"] { border-color:rgba(220,91,65,.78) !important; box-shadow:0 13px 32px rgba(0,0,0,.38),0 0 22px rgba(206,73,50,.16) !important; }
        .combo-feedback[data-seal="swift"] { border-color:rgba(119,186,211,.80) !important; box-shadow:0 13px 32px rgba(0,0,0,.38),0 0 22px rgba(99,174,205,.18) !important; }
        .combo-feedback[data-seal="guard"] { border-color:rgba(116,180,143,.80) !important; box-shadow:0 13px 32px rgba(0,0,0,.38),0 0 22px rgba(99,168,127,.18) !important; }
        .combo-feedback[data-seal="shadow"] { border-color:rgba(145,130,201,.82) !important; box-shadow:0 13px 32px rgba(0,0,0,.38),0 0 22px rgba(132,113,194,.18) !important; }
        .combo-feedback[data-seal="origin"] { border-color:rgba(241,199,80,.92) !important; box-shadow:0 13px 32px rgba(0,0,0,.38),0 0 30px rgba(239,192,58,.28) !important; }

        @media (max-width: 620px) {
            #menu-screen .screen-content { padding: 98px 16px 24px; }
            #menu-screen .menu-hero { width: min(88%, 420px); padding: 25px 20px 22px; margin-bottom: 23px; }
            #menu-screen .menu-actions { width: min(82%, 380px); }
            #gate-hud { top: 60px; width: 94%; padding: 7px 10px 8px; }
            #gate-threat { font-size: 12px; }
            #gate-next { font-size: 9.5px; }
            #active-skill-container { bottom: 181px !important; max-width: min(88%, 430px) !important; }
        html[lang="zh"] #player-name-display, html[lang="en"] #player-name-display { font-family: "Source Sans 3", "Noto Serif SC", sans-serif !important; font-size: 13px !important; }

        #stroke-result { bottom: 176px; font-size: 11px; }
        }
        @media (max-width: 390px), (max-height: 720px) {
            #menu-screen .screen-content { padding-top: 80px; }
            #menu-screen .menu-hero { margin-bottom: 17px; padding-top: 22px; padding-bottom: 20px; }
            #menu-screen .menu-actions { gap: 8px; }
            #menu-screen .button { min-height: 56px; font-size: 20px; }
            #menu-screen .button.secondary { min-height: 43px; font-size: 13px; }
            #gate-hud { top: 58px; }
            #how-to-play-modal { padding: 10px; }
            .howto-card { width:min(96%, 450px); max-height:92dvh; padding:20px 13px 14px; }
            .howto-seal-grid { gap:5px; }
            .howto-seal-card { grid-template-columns:36px minmax(0,1fr); gap:7px; padding:6px; min-height:50px; }
            .howto-seal-icon { width:36px; height:36px; }
            .howto-loop { font-size:9px; padding-inline:5px; }
        }

    

        /* === Offline Friend PK / readability pass === */
        #share-fallback-text { display: none !important; }
        #gate-count { color:#ffe29a !important; font-weight:800 !important; text-shadow:0 2px 5px rgba(0,0,0,.95); }
        #gate-time { color:#f4efe2 !important; font-weight:700 !important; text-shadow:0 2px 5px rgba(0,0,0,.9); }
        #gate-threat { color:#fffdf6 !important; font-weight:800 !important; text-shadow:0 2px 6px rgba(0,0,0,.98); }
        #gate-next { color:#e9e2d2 !important; font-weight:700 !important; text-shadow:0 2px 5px rgba(0,0,0,.95); }
        #stroke-result { color:#fff9e8 !important; font-weight:750 !important; text-shadow:0 2px 5px rgba(0,0,0,.95); }
        #stroke-result.success { color:#ffe18a !important; }
        #stroke-result.danger { color:#ffb4aa !important; }
        .active-skill-chip { color:#fff9e9 !important; background:rgba(8,8,7,.9) !important; }

        #player-name-display {
            cursor:pointer; user-select:none; padding:7px 14px; border-radius:999px;
            border:1px solid rgba(224,191,112,.38); background:rgba(14,13,11,.66);
            color:#f3d58b !important; font-weight:750 !important;
            box-shadow:0 5px 18px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.04);
            transition:border-color .16s ease, color .16s ease, transform .16s ease;
        }
        #player-name-display:hover, #player-name-display:focus-visible {
            border-color:rgba(255,222,144,.82); color:#ffe9a8 !important; transform:translateY(-1px); outline:none;
        }

        #menu-screen .pk-entry-button {
            min-height:51px !important; padding:11px 16px !important; animation:none !important;
            background:linear-gradient(180deg,rgba(82,54,26,.92),rgba(43,31,19,.96)) !important;
            border:1px solid rgba(239,204,118,.62) !important; color:#ffe7a7 !important;
            font-size:17px !important; box-shadow:0 9px 24px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.08) !important;
            clip-path:none !important; border-radius:4px;
        }
        html[lang="en"] #menu-screen .pk-entry-button { font-family:"Source Sans 3",sans-serif !important; font-size:16px !important; letter-spacing:.09em; }

        /* Modal host: exclusive interaction surface (pair with HTML inert on siblings). */
        #modal-layer {
            position: absolute;
            inset: 0;
            z-index: 8000;
            pointer-events: none;
        }
        #modal-layer:not(:empty) {
            pointer-events: none;
        }
        #friend-pk-modal[hidden],
        #how-to-play-modal[hidden],
        #share-fallback-modal[hidden] { display: none !important; }
        #friend-pk-modal {
            position: absolute;
            inset: 0;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            background: rgba(4,4,3,.88);
            backdrop-filter: blur(11px);
            -webkit-backdrop-filter: blur(11px);
            pointer-events: auto;
        }
        .pk-modal-card {
            position: relative;
            z-index: 1;
            width: min(94%, 460px);
            /* Holds the two text inputs, so it must fit the visible area, not the
               full viewport — otherwise the keyboard covers the field being typed in. */
            max-height: min(calc(var(--osl-vvh) * 0.91), 820px);
            overflow: auto;
            touch-action: pan-y;
            overscroll-behavior: contain;
            padding: 26px 22px 20px;
            border: 1px solid rgba(226,193,115,.55);
            border-radius: 14px;
            pointer-events: auto;
            background:
                radial-gradient(circle at 50% 0%, rgba(226,193,115,0.12), transparent 60%),
                linear-gradient(160deg, rgba(26,22,18,0.96) 0%, rgba(14,12,10,0.98) 100%);
            color: #fdf4de;
            box-shadow: 0 30px 80px rgba(0,0,0,.85), 0 0 40px rgba(226,193,115,0.12), inset 0 1px 0 rgba(255,255,255,0.15);
        }
        .pk-modal-close { position:absolute; right:12px; top:12px; width:34px; height:34px; border:1px solid rgba(226,193,115,.3); border-radius:50%; cursor:pointer; background:rgba(255,255,255,.07); color:#eee5d4; font-size:20px; transition:all 0.2s; }
        .pk-modal-close:hover { background:rgba(255,255,255,.15); transform:scale(1.05); }
        #pk-modal-title { margin:0 36px 6px; color:#fdf4de; text-align:center; font:800 clamp(22px,5vw,28px)/1.2 "Noto Serif SC","Cinzel",serif; text-shadow:0 2px 12px rgba(226,193,115,0.3); overflow-wrap:anywhere; text-wrap:balance; }
        #pk-modal-subtitle { margin:0 auto 18px; max-width:360px; color:rgba(234,224,204,.8); text-align:center; font:550 clamp(12px,2.5vw,13px)/1.5 "Source Sans 3","Noto Serif SC",sans-serif; overflow-wrap:anywhere; }
        .pk-name-row { display:grid; grid-template-columns:80px 1fr auto; align-items:center; gap:8px; margin-bottom:16px; }
        .pk-name-row label { color:#ffd276; font:700 13px "Source Sans 3","Noto Serif SC",sans-serif; }
        .pk-input, .pk-code-input {
            width:100%; border:1px solid rgba(226,193,115,.4); border-bottom-color:rgba(226,193,115,.7);
            border-radius:6px; outline:none; background:rgba(255,255,255,.05); color:#fdf4de;
            font:600 13px/1.4 "Source Sans 3","Noto Serif SC",sans-serif;
            transition:border-color 0.2s;
        }
        .pk-input:focus, .pk-code-input:focus { border-color:rgba(255,210,118,.8); box-shadow:0 0 10px rgba(255,210,118,.2); }
        .pk-input { height:40px; padding:8px 12px; }
        .pk-code-input { min-height:82px; resize:vertical; padding:10px 12px; overflow-wrap:anywhere; }
        .pk-small-btn, .pk-action-btn {
            border:1px solid rgba(226,193,115,.45); border-radius:6px; cursor:pointer;
            color:#fdf4de; background:rgba(255,255,255,.06); font:700 13px "Source Sans 3","Noto Serif SC",sans-serif;
            transition:all 0.2s;
        }
        .pk-small-btn:hover, .pk-action-btn:hover { background:rgba(255,255,255,.12); border-color:rgba(226,193,115,.7); }
        .pk-small-btn { min-height:40px; padding:7px 12px; white-space:nowrap; }
        .pk-action-btn { min-height:46px; width:100%; padding:10px 14px; }
        .pk-action-btn.primary {
            background:linear-gradient(180deg, #b8332a 0%, #7d1f18 100%); border:1px solid rgba(217,179,107,.75);
            color:#fdf4de; box-shadow:0 4px 15px rgba(130,25,20,.4), inset 0 1px 0 rgba(255,255,255,.2);
        }
        .pk-action-btn.primary:hover { background:linear-gradient(180deg, #c9382b 0%, #9e2a22 100%); box-shadow:0 6px 20px rgba(150,30,25,.6); transform:translateY(-1px); }
        .pk-panel { margin-top:12px; padding:16px 14px; border:1px solid rgba(226,193,115,.25); background:rgba(255,255,255,.03); border-radius:8px; }
        .pk-panel h3 { margin:0 0 6px; color:#ffd276; font:800 15px/1.25 "Noto Serif SC","Source Sans 3",serif; }
        .pk-panel p { margin:0 0 10px; color:rgba(234,224,204,.8); font:550 12px/1.45 "Source Sans 3","Noto Serif SC",sans-serif; }
        .pk-panel-actions { display:grid; grid-template-columns:1fr; gap:8px; margin-top:10px; }

        #pk-modal-status { min-height:23px; margin-top:10px; color:#ffe39a; text-align:center; font:700 11px/1.4 "Source Sans 3","Noto Serif SC",sans-serif; }
        #pk-recent-list { display:grid; gap:7px; margin-top:8px; }
        .pk-recent-item { display:grid; grid-template-columns:1fr auto; gap:8px; padding:8px 9px; background:rgba(255,255,255,.04); border-left:2px solid rgba(221,181,86,.58); }
        .pk-recent-main { min-width:0; }
        .pk-recent-title { color:#f7edd4; font:700 12px/1.25 "Source Sans 3","Noto Serif SC",sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .pk-recent-meta { margin-top:3px; color:#aaa18f; font:600 10px/1.2 "Source Sans 3",sans-serif; }
        .pk-recent-open { border:0; background:transparent; color:#edcf87; cursor:pointer; font-weight:800; }

        #share-code-preview {
            display:block; flex:0 0 auto; max-height:65px; overflow:auto; margin:0; padding:6px 10px;
            color:#d8c99e; background:rgba(255,255,255,.035); border-top:1px solid rgba(226,194,114,.14);
            font:650 9px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; text-align:center;
        }

        .leaderboard-entry { grid-template-columns:38px minmax(0,1fr) 88px !important; }
        @media (max-width:620px){ .leaderboard-entry { grid-template-columns:30px minmax(0,1fr) 68px !important; } }

        .pk-records-heading { width:100%; margin:16px 0 8px; padding-top:13px; border-top:1px solid rgba(225,194,117,.24); color:#f0d58c; font:800 14px/1.2 "Noto Serif SC","Source Sans 3",serif; text-align:left; }
        #pk-records-list { width:100%; display:grid; gap:9px; }
        .pk-record-card { padding:10px; border:1px solid rgba(225,194,117,.18); background:rgba(255,255,255,.03); border-radius:7px; }
        .pk-record-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:7px; }
        .pk-record-title { min-width:0; color:#fff5dd; font:800 12px/1.25 "Source Sans 3","Noto Serif SC",sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .pk-record-id { color:#c8ae70; font:700 9px ui-monospace,monospace; white-space:nowrap; }
        .pk-score-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto auto; gap:6px; align-items:center; padding:5px 6px; border-top:1px solid rgba(255,255,255,.045); color:#ddd5c5; font:650 11px/1.2 "Source Sans 3","Noto Serif SC",sans-serif; }
        .pk-score-row:first-of-type { border-top:0; }
        .pk-score-rank { color:#e9cb82; font-weight:800; text-align:center; }
        .pk-score-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
        .pk-score-value { color:#fff5dc; font-weight:800; font-variant-numeric:tabular-nums; }
        .pk-score-gate { color:#aaa18e; font-size:9px; }

        .pk-empty { color:#aaa18e; font:600 11px/1.4 "Source Sans 3","Noto Serif SC",sans-serif; padding:8px 0; }
        .pk-empty { color:#aaa18e; font:600 11px/1.4 "Source Sans 3","Noto Serif SC",sans-serif; padding:8px 0; }

        @media (max-width:430px) {
            .pk-modal-card { padding:21px 13px 14px; }
            .pk-name-row { grid-template-columns:70px 1fr; }
            .pk-name-row .pk-small-btn { grid-column:1 / -1; }
            #share-code-preview { font-size:8px; }
        }


        /* === Release UI polish: clean hierarchy, readable combat feedback === */
        #game-world { container-type:inline-size; }
        #game-world[data-screen="results"] #hud,
        #game-world[data-screen="results"] #gate-hud,
        #game-world[data-screen="results"] #intent-hud,
        #game-world[data-screen="results"] #boss-hud,
        #game-world[data-screen="results"] #active-skill-container,
        #game-world[data-screen="results"] #combo-feedback,
        #game-world[data-screen="results"] #stroke-result,
        #game-world[data-screen="results"] #stage-banner,
        #game-world[data-screen="results"] #insight-badge { display:none !important; opacity:0 !important; }
        #game-world[data-screen="results"] #results-screen {
            background:
                radial-gradient(circle at 50% 7%, rgba(223,190,114,.16), transparent 30%),
                linear-gradient(180deg, rgba(7,7,6,.97), rgba(3,3,3,.995));
        }

        /* Compact purpose HUD: two readable information bands below the score row. */
        #gate-hud {
            top: 49px !important;
            width: min(88%, 400px) !important;
            min-height: 36px;
            padding: 5px 9px 6px !important;
            grid-template-columns: minmax(0,1fr) auto !important;
            grid-template-areas:
                "title time"
                "threat threat" !important;
            gap: 1px 6px !important;
            border: 1px solid rgba(230,201,132,.28) !important;
            border-radius: 5px !important;
            background: linear-gradient(180deg, rgba(12,11,9,.88), rgba(7,7,6,.92)) !important;
            box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.03) !important;
        }
        #gate-count { font:700 8px/1.1 "Source Sans 3","Noto Serif SC",sans-serif !important; letter-spacing:.06em !important; }
        #gate-time { font:700 8px/1.1 "Source Sans 3",sans-serif !important; }
        #gate-threat { font:700 11px/1.2 "Source Sans 3","Noto Serif SC",sans-serif !important; letter-spacing:.01em !important; }
        #gate-next { display:none !important; }

        /* One decisive message, never pale text floating directly on paper. */
        .combo-feedback {
            top: 31% !important;
            width: min(76%, 390px) !important;
            max-width: calc(100% - 54px) !important;
            min-height: 0;
            padding: 12px 18px 13px !important;
            border: 1px solid rgba(239,207,126,.52);
            border-left: 2px solid rgba(239,207,126,.86);
            border-right: 2px solid rgba(239,207,126,.86);
            border-radius: 7px;
            background: linear-gradient(180deg, rgba(13,12,10,.92), rgba(7,7,6,.87));
            color: #fff7df !important;
            font: 800 clamp(18px, 5.1cqw, 27px)/1.15 "Source Sans 3","Noto Serif SC",sans-serif !important;
            letter-spacing: .015em !important;
            text-shadow: 0 2px 5px rgba(0,0,0,.95), 0 0 12px rgba(216,174,79,.22) !important;
            box-shadow: 0 13px 32px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.04);
            white-space: pre-line !important;
            text-wrap: balance;
        }
        html[lang="zh"] .combo-feedback { font-family:"Noto Serif SC","Source Sans 3",sans-serif !important; }
        .combo-feedback[data-tone="danger"] { color:#ffb1a6 !important; border-color:rgba(218,76,62,.72) !important; }
        #stroke-result {
            bottom: 178px !important;
            width: min(82%, 390px) !important;
            padding: 6px 10px !important;
            border-radius: 5px !important;
            background: rgba(9,9,8,.88) !important;
            font: 700 11px/1.25 "Source Sans 3","Noto Serif SC",sans-serif !important;
        }
        /* The bottom seal panel already carries persistent art state; remove duplicated left-side chips. */
        #active-skill-container { display:none !important; }

        /* Results are a distinct scene, with buttons that fit English. */
        #results-screen .results-content:not(.leaderboard-only) {
            justify-content:center !important;
            gap: 10px !important;
            padding: max(18px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom)) !important;
        }
        #personal-results { width:min(94%, 454px) !important; padding:20px 17px 16px !important; }
        .results-title { font-size:clamp(30px, 8cqw, 44px) !important; letter-spacing:.025em !important; }
        .results-score { margin-top:3px !important; font-size:clamp(54px, 14cqw, 74px) !important; }
        .result-highlight { margin-top:10px !important; font-size:clamp(14px, 3.8cqw, 19px) !important; line-height:1.28 !important; }
        .result-story { max-width:390px !important; font-size:12px !important; line-height:1.42 !important; }
        .result-stats-grid.v18-final { margin:4px auto 7px !important; }
        .rank-seal { width:64px !important; height:64px !important; }
        .rank-title { font-size:clamp(23px, 6cqw, 31px) !important; }
        .button-row {
            width:min(94%, 454px) !important;
            grid-template-columns:1fr 1fr !important;
            grid-template-areas:"retry retry" "menu share";
            gap:8px !important;
        }
        .button-row #restart-button {
            grid-area:retry;
            background-image: linear-gradient(180deg,#c94236 0%,#a42e27 58%,#77201c 100%) !important;
            border:1px solid rgba(230,190,120,.8) !important;
            color:#fffaf0 !important;
            font-family:"Cinzel","Noto Serif SC",serif !important;
            font-weight:700 !important;
            letter-spacing:.06em !important;
            box-shadow:0 12px 28px rgba(103,19,15,.38), inset 0 1px rgba(255,255,255,.18) !important;
        }
        .button-row #rebuild-button {
            grid-area:menu;
            background:rgba(10,10,8,.7) !important;
            border:1px solid rgba(200,175,135,.35) !important;
            color:rgba(246,241,231,.85) !important;
            font-family:"Source Sans 3","Noto Serif SC",sans-serif !important;
            font-weight:600 !important;
            letter-spacing:.04em !important;
        }
        .button-row #share-result-button {
            grid-area:share;
            background:rgba(10,10,8,.7) !important;
            border:1px solid rgba(200,175,135,.35) !important;
            color:rgba(246,241,231,.85) !important;
            font-family:"Source Sans 3","Noto Serif SC",sans-serif !important;
            font-weight:600 !important;
            letter-spacing:.04em !important;
        }
        .button-row .button {
            min-height:50px !important;
            padding:10px 8px !important;
            font-size:clamp(14px, 3.4cqw, 18px) !important;
            white-space:normal !important;
            text-wrap:balance;
            display:flex; align-items:center; justify-content:center;
            clip-path:polygon(2% 0,98% 0,100% 14%,100% 86%,98% 100%,2% 100%,0 86%,0 14%);
            border-radius:0;
            transition:filter .15s ease,transform .15s ease;
        }
        .button-row .button:hover { filter:brightness(1.08); transform:translateY(-1px); }
        .button-row .button:active { transform:translateY(1px) scale(.985); }
        .button-row #restart-button { font-size:clamp(17px, 4.5cqw, 22px) !important; }

        @media (max-width: 620px) {
            #gate-hud { top:61px !important; width:94% !important; }
            #gate-threat { font-size:11.5px !important; }
            #gate-next { font-size:9px !important; }
            .combo-feedback { font-size:clamp(18px, 5.5cqw, 25px) !important; top:30% !important; }
            #results-screen .button-row { width:min(94%,454px) !important; grid-template-columns:1fr 1fr !important; }
            #results-screen .button-row #restart-button { grid-column:auto !important; }
        }
        @media (max-width:390px), (max-height:720px) {
            #gate-hud { top:57px !important; padding-top:6px !important; padding-bottom:6px !important; }
            #gate-threat { font-size:10.5px !important; }
            #gate-next { font-size:8.5px !important; }
            .combo-feedback { top:29% !important; padding:10px 12px !important; }
            #personal-results { padding:15px 13px 12px !important; }
            .rank-seal { width:55px !important; height:55px !important; }
            .button-row .button { min-height:43px !important; }
        }



        /* ==========================================================
           FINAL RUNTIME ART + CSS XUAN-PAPER REPORT POLISH
           ========================================================== */
        :root {
            --ink-button-image: none;
            --ink-banner-image: none;
            --report-paper: #eee5d2;
            --report-paper-light: #f8f1e2;
            --report-ink: #201914;
            --report-ink-muted: #716656;
            --report-gold: #a98a51;
            --report-seal-red: #a5372d;
        }

        /* Asset-backed buttons retain text as live/localized HTML. */
        .ink-btn {
            position: relative;
            isolation: isolate;
            overflow: visible;
            border-color: rgba(202,163,86,.64) !important;
            background-image: var(--ink-button-image), linear-gradient(180deg,#b94535,#84261f) !important;
            background-size: 100% 100%, 100% 100% !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            box-shadow: 0 10px 26px rgba(74,19,14,.35), inset 0 1px rgba(255,255,255,.12) !important;
            transition: transform .12s ease, filter .12s ease, box-shadow .12s ease !important;
        }
        .ink-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
        .ink-btn:active { filter: brightness(.9); transform: translateY(1px) scale(.985); }
        .ink-btn:disabled { filter: grayscale(.35); opacity:.55; }
        .ink-btn.secondary,
        .button-row .ink-btn.secondary,
        .howto-actions .ink-btn {
            background-image: linear-gradient(180deg,rgba(26,23,18,.94),rgba(9,9,8,.96)) !important;
            border-color: rgba(177,143,77,.42) !important;
            box-shadow: inset 0 0 20px rgba(197,156,72,.035), 0 8px 18px rgba(0,0,0,.24) !important;
        }

        /* Ink-wash HUD backing instead of hard black rectangles. */
        .ink-banner {
            border: 0 !important;
            background-color: transparent !important;
            background-image:
                linear-gradient(90deg, transparent 0%, rgba(8,8,7,.68) 10%, rgba(11,10,8,.94) 24%, rgba(11,10,8,.94) 76%, rgba(8,8,7,.68) 90%, transparent 100%),
                var(--ink-banner-image) !important;
            background-size: 100% 100%, 100% 100% !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            box-shadow: none !important;
            filter: drop-shadow(0 8px 14px rgba(0,0,0,.25));
        }

        /* Results are a live CSS battle report: texture only, never baked text or grids. */
        #results-screen {
            background:
                radial-gradient(circle at 50% 12%, rgba(205,163,76,.13), transparent 32%),
                linear-gradient(180deg, rgba(7,6,5,.85), rgba(2,2,2,.98)) !important;
        }
        #personal-results {
            width: min(92%, 456px) !important;
            padding: clamp(28px,4.2vh,42px) clamp(20px,5cqw,30px) clamp(22px,3vh,30px) !important;
            border: 0 !important;
            border-radius: 2px !important;
            clip-path: polygon(2% 0, 98% 0, 100% 2.4%, 99.3% 96.8%, 97% 100%, 2.5% 99.2%, 0 97%, .7% 3%);
            color: var(--report-ink) !important;
            background-color: var(--report-paper) !important;
            background-image:
                radial-gradient(circle at 52% 42%, rgba(255,255,255,.52), rgba(115,82,42,.06) 72%, rgba(66,42,20,.11) 100%),
                repeating-radial-gradient(ellipse at 30% 20%, rgba(64,45,24,.025) 0 1px, transparent 1px 4px),
                linear-gradient(112deg, transparent 0 45%, rgba(88,57,26,.045) 45.4% 46%, transparent 46.5% 100%) !important;
            box-shadow: 0 26px 62px rgba(0,0,0,.52), inset 0 0 48px rgba(92,57,25,.10) !important;
            overflow: hidden;
            isolation: isolate;
        }
        #personal-results::before {
            content:'' !important;
            position:absolute !important;
            inset:11px !important;
            z-index:-1 !important;
            pointer-events:none !important;
            border:1px solid rgba(145,107,55,.34) !important;
            box-shadow: inset 0 0 0 3px rgba(245,231,197,.28) !important;
            background:
                radial-gradient(circle at 91% 11%, rgba(165,55,45,.05), transparent 19%),
                radial-gradient(circle at 8% 92%, rgba(74,48,23,.055), transparent 24%) !important;
        }
        #personal-results::after {
            content:'封' !important;
            right:24px !important;
            top:21px !important;
            width:42px !important;
            height:42px !important;
            border:2px solid rgba(165,55,45,.73) !important;
            color:rgba(165,55,45,.73) !important;
            background:rgba(165,55,45,.025);
            font-size:25px !important;
            line-height:1;
            transform:rotate(5deg) !important;
        }
        .result-kicker {
            margin:0 0 8px !important;
            color:var(--report-gold) !important;
            font:700 10px/1 "Cinzel","Noto Serif SC",serif !important;
            letter-spacing:.34em !important;
        }
        .results-title {
            max-width:82%;
            margin:0 auto 14px !important;
            color:var(--report-ink) !important;
            font:500 clamp(28px,7.5cqw,40px)/1.08 "Cormorant Garamond","Noto Serif SC",serif !important;
            letter-spacing:.03em !important;
            text-wrap:balance;
        }
        html[lang="zh"] .results-title { font-family:"Noto Serif SC","Songti SC",serif !important; font-weight:700 !important; }
        #results-screen[data-outcome="defeat"] .results-title,
        #results-screen[data-outcome="timeout"] .results-title { color:#7d2822 !important; }
        .results-score {
            margin:3px 0 10px !important;
            color:#17120e !important;
            font:600 clamp(58px,15cqw,82px)/.93 "Cormorant Garamond","Times New Roman",serif !important;
            letter-spacing:-.035em !important;
            font-variant-numeric:tabular-nums;
            text-shadow:0 2px 9px rgba(37,24,12,.08) !important;
        }
        .result-highlight {
            width:min(96%,420px);
            margin:7px auto 2px !important;
            color:#7e2d26 !important;
            font:700 clamp(13px,3.35cqw,17px)/1.35 "Cormorant Garamond","Noto Serif SC",serif !important;
            letter-spacing:.02em;
            text-wrap:balance;
        }
        .result-story {
            width:min(96%,420px);
            margin:0 auto 14px !important;
            color:var(--report-ink-muted) !important;
            font:600 clamp(10px,2.65cqw,13px)/1.45 "Cormorant Garamond","Noto Serif SC",serif !important;
            text-wrap:balance;
        }
        .result-stats-grid.v18-final {
            width:100% !important;
            margin:2px auto 15px !important;
            gap:0 !important;
            border-top:1px solid rgba(111,70,31,.16);
            border-bottom:1px solid rgba(111,70,31,.12);
        }
        .result-stat {
            min-width:0;
            padding:14px 6px 13px !important;
            background:transparent !important;
            border:0 !important;
            position:relative;
        }
        .result-stat:not(:last-child)::after {
            content:'';
            position:absolute;
            right:0;
            top:27%;
            width:1px;
            height:46%;
            background:rgba(111,70,31,.13);
        }
        .result-stat-value {
            color:#241b13 !important;
            font:600 clamp(20px,5cqw,28px)/1 "Cormorant Garamond","Noto Serif SC",serif !important;
            font-variant-numeric:tabular-nums;
        }
        .result-stat-label {
            margin-top:7px !important;
            color:#796c58 !important;
            font:700 clamp(7.5px,1.85cqw,10px)/1.2 "Cinzel","Noto Serif SC",serif !important;
            letter-spacing:.08em !important;
            white-space:normal;
        }
        .results-rank {
            width:100%;
            margin:0 !important;
            padding:13px 12px 4px !important;
            border:0 !important;
            background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
        }
        #results-screen .rank-seal {
            width:54px !important;
            height:54px !important;
            margin-bottom:5px !important;
            filter:drop-shadow(0 4px 5px rgba(68,27,18,.17));
        }
        #results-screen .rank-title {
            color:#271c14 !important;
            font:600 clamp(22px,5.8cqw,32px)/1.1 "Cormorant Garamond","Noto Serif SC",serif !important;
        }
        #results-screen .rank-phrase {
            margin:5px 0 0 !important;
            color:#7d705f !important;
            font:italic 500 clamp(9px,2.35cqw,12px)/1.35 "Cormorant Garamond","Noto Serif SC",serif !important;
        }
        #results-screen .button-row {
            width:min(92%,456px) !important;
            grid-template-areas:"retry retry" "menu share" !important;
            grid-template-columns:1fr 1fr !important;
            gap:8px !important;
        }
        #results-screen .button-row .button {
            min-width:0 !important;
            min-height:46px !important;
            padding:10px 7px !important;
            overflow:hidden;
            text-overflow:ellipsis;
            font:700 clamp(11px,2.75cqw,15px)/1.15 "Cinzel","Noto Serif SC",serif !important;
            letter-spacing:.025em !important;
        }
        #results-screen #restart-button { grid-area:retry !important; min-height:54px !important; font-size:clamp(15px,3.7cqw,20px) !important; }
        #results-screen #rebuild-button { grid-area:menu !important; }
        #results-screen #share-result-button { grid-area:share !important; }

        @media (max-width:390px) {
            #personal-results { width:94% !important; padding:25px 16px 19px !important; }
            #personal-results::after { width:36px !important; height:36px !important; right:17px !important; top:17px !important; font-size:21px !important; }
            .results-title { max-width:76%; }
            .result-stat { padding-inline:3px !important; }
            #results-screen .button-row { width:94% !important; }
        }



        /* ==========================================================
           FINAL CANONICAL ART DIRECTION · 2026-07-01
           One visual system for menu, combat, seals and results.
           ========================================================== */
        :root {
            --ui-ink: #11100e;
            --ui-ink-soft: #27231d;
            --ui-paper: #eee5cf;
            --ui-paper-light: #faf3df;
            --ui-gold: #d7b567;
            --ui-gold-bright: #f3d991;
            --ui-vermilion: #a9342d;
            --ui-vermilion-bright: #d65143;
            --seal-break: #f06b55;
            --seal-swift: #56d7e8;
            --seal-guard: #63d48e;
            --seal-shadow: #b58aff;
            --seal-origin: #ffd45f;
            --seal-residual: #9a9aa0;
        }

        body, html {
            font-family: "Source Sans 3", "Noto Serif SC", system-ui, sans-serif !important;
            background: #030302 radial-gradient(circle at 50% 42%, #211c16 0%, #080706 48%, #020202 100%) !important;
        }
        #game-world {
            border-radius: 0 !important;
            box-shadow: 0 0 95px rgba(0,0,0,.94), 0 0 0 1px rgba(214,181,103,.34) !important;
        }

        /* Unified typography. Display copy is classical; data remains highly legible. */
        #menu-screen .title, #stage-banner, .combo-feedback, #boss-name,
        .results-title, .rank-title, .leaderboard-title, .skill-header,
        .skill-name, .name-entry-title, .button {
            font-family: "Cinzel", "Noto Serif SC", "Songti SC", serif !important;
        }
        html[lang="zh"] #menu-screen .title,
        html[lang="zh"] #stage-banner,
        html[lang="zh"] .combo-feedback,
        html[lang="zh"] #boss-name,
        html[lang="zh"] .results-title,
        html[lang="zh"] .rank-title,
        html[lang="zh"] .leaderboard-title,
        html[lang="zh"] .skill-header,
        html[lang="zh"] .skill-name,
        html[lang="zh"] .name-entry-title,
        html[lang="zh"] .button {
            font-family: "Noto Serif SC", "Songti SC", "STSong", serif !important;
        }
        .hud-label, #score-display, #timer-display, #combo-display, #lives-display,
        #gate-hud, #boss-hint,
        .result-stat-label, .result-stat-value, .result-story, .rank-phrase {
            font-family: "Source Sans 3", "Noto Serif SC", system-ui, sans-serif !important;
        }


        #game-world:not([data-screen="game"]) #hud,
        #game-world:not([data-screen="game"]) #gate-hud,
        #game-world:not([data-screen="game"]) #intent-hud,
        #game-world:not([data-screen="game"]) #boss-hud,
        #game-world:not([data-screen="game"]) #active-skill-container,
        #game-world:not([data-screen="game"]) #combo-feedback,
        #game-world:not([data-screen="game"]) #stroke-result,
        #game-world:not([data-screen="game"]) #stage-banner,
        #game-world:not([data-screen="game"]) #insight-badge { display:none !important; }

        /* ---------- Menu: title belongs to the painting, not to a web card ---------- */
        #menu-screen {
            /* Default gradient fallback; moon-bamboo image injected via JS inline style */
            background:
                linear-gradient(180deg, rgba(8,8,7,.18) 0%, rgba(6,6,5,.07) 35%, rgba(5,5,4,.40) 72%, rgba(3,3,3,.86) 100%),
                radial-gradient(ellipse at 50% 15%, rgba(40,35,25,.55) 0%, transparent 55%);
            background-size: auto, cover;
            background-position: center, center;
            background-repeat: no-repeat, no-repeat;
        }
        #menu-screen::before {
            background:
                radial-gradient(circle at 50% 12%, rgba(255,239,190,.16), transparent 28%),
                linear-gradient(90deg, rgba(0,0,0,.18), transparent 24%, transparent 76%, rgba(0,0,0,.18)),
                var(--wuxia-boss-shadow, none),
                var(--wuxia-swordsman, none) !important;
            background-size: auto, auto, cover, auto !important;
            background-position: center, center, center bottom, right 8% bottom 5% !important;
            background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
        }
        #menu-screen::after {
            content: '';
            position: absolute;
            left: 52%;
            top: 8%;
            width: 4px;
            height: 42%;
            transform: translateX(-50%) rotate(22deg);
            pointer-events: none;
            /* Sword trace: fallback luminous spine + optional image overlay */
            background:
                linear-gradient(180deg,
                    transparent 0%,
                    rgba(244,219,151,.22) 6%,
                    rgba(244,219,151,.92) 16%,
                    rgba(244,219,151,.96) 35%,
                    rgba(244,219,151,.78) 55%,
                    rgba(169,52,45,.62) 72%,
                    rgba(120,30,22,.18) 88%,
                    transparent 100%),
                var(--wuxia-sword-trace, none);
            background-size: auto, contain;
            background-repeat: no-repeat, no-repeat;
            background-position: center, center;
            box-shadow:
                0 0 22px rgba(237,207,130,.28),
                0 0 48px rgba(237,207,130,.10),
                2px 0 8px rgba(169,52,45,.22);
            opacity: .62;
        }
        #menu-screen .screen-content {
            justify-content: center !important;
            padding: 76px 28px 42px !important;
        }
        #menu-screen .menu-hero {
            width: min(91%, 440px) !important;
            margin: 0 auto 24px !important;
            padding: 16px 18px 20px !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        #menu-screen .menu-hero::before,
        #menu-screen .menu-hero::after {
            width: 132px !important;
            height: 1px !important;
            left: 50% !important;
            opacity: .78 !important;
            background: linear-gradient(90deg, transparent, rgba(235,207,136,.92), transparent) !important;
        }
        #menu-screen .menu-hero::before { top: 0 !important; }
        #menu-screen .menu-hero::after {
            bottom: 0 !important;
            background: linear-gradient(90deg, transparent, rgba(169,52,45,.82), transparent) !important;
        }
        #menu-screen .title {
            margin: 0 auto 13px !important;
            color: #fffaf0 !important;
            font-size: clamp(34px, 9.4cqw, 52px) !important;
            font-weight: 600 !important;
            line-height: .98 !important;
            letter-spacing: .075em !important;
            text-transform: uppercase;
            text-shadow: 0 3px 10px rgba(0,0,0,.92), 0 0 28px rgba(222,190,115,.24) !important;
            /* Title brush treatment as subtle background behind text */
            background: var(--wuxia-title-brush, none) center/contain no-repeat;
        }
        #menu-screen .title .title-secondary {
            margin-top: 7px !important;
            font-size: .52em !important;
            font-weight: 500 !important;
            letter-spacing: .28em !important;
            color: rgba(255,247,226,.82) !important;
        }
        html[lang="zh"] #menu-screen .title {
            font-size: clamp(34px, 9cqw, 48px) !important;
            font-weight: 700 !important;
            letter-spacing: .13em !important;
        }
        #menu-screen .subtitle {
            max-width: 330px !important;
            margin: 0 auto !important;
            padding: 8px 10px !important;
            color: rgba(247,239,219,.76) !important;
            font: 600 13px/1.55 "Noto Serif SC", "Source Sans 3", serif !important;
            letter-spacing: .065em !important;
            text-shadow: 0 2px 7px rgba(0,0,0,.86);
        }
        html[lang="en"] #menu-screen .subtitle {
            font-family: "Cinzel", Georgia, serif !important;
            font-size: 11px !important;
            letter-spacing: .10em !important;
            text-transform: uppercase;
        }
        #menu-screen .subtitle::before,
        #menu-screen .subtitle::after { display: none !important; }

        #menu-screen .menu-actions {
            width: min(82%, 390px) !important;
            gap: 9px !important;
        }
        #menu-screen .button {
            clip-path: polygon(3% 0,97% 0,100% 18%,100% 82%,97% 100%,3% 100%,0 82%,0 18%) !important;
            border-radius: 0 !important;
            animation: none !important;
        }
        #menu-screen #start-button {
            min-height: 61px !important;
            padding: 13px 18px !important;
            border: 1px solid rgba(250,219,147,.76) !important;
            color: #fff8e7 !important;
            background-image:
                linear-gradient(90deg, rgba(255,255,255,.05), transparent 22%, transparent 78%, rgba(255,255,255,.04)),
                linear-gradient(180deg, #c84235 0%, #9d2d26 56%, #6f1e1a 100%),
                var(--wuxia-start-btn, none) !important;
            background-size: auto, auto, cover !important;
            background-position: center, center, center !important;
            background-repeat: no-repeat, no-repeat, no-repeat !important;
            box-shadow: 0 13px 31px rgba(91,18,14,.42), inset 0 1px rgba(255,255,255,.17) !important;
            font-size: clamp(19px, 4.7cqw, 25px) !important;
            letter-spacing: .075em !important;
        }
        #menu-screen #friend-pk-btn {
            min-height: 48px !important;
            padding: 10px 16px !important;
            border: 1px solid rgba(204,169,101,.42) !important;
            color: #eed69c !important;
            background: linear-gradient(180deg, rgba(72,50,27,.88), rgba(45,31,19,.94)) !important;
            box-shadow: 0 8px 20px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.06) !important;
            font-size: clamp(14px, 3.6cqw, 18px) !important;
            letter-spacing: .09em !important;
        }
        #menu-screen .menu-secondary-actions {
            grid-template-columns: 1fr 1fr !important;
            gap: 7px !important;
        }
        #menu-screen .button.secondary {
            min-height: 38px !important;
            padding: 7px 8px !important;
            clip-path: none !important;
            border: 0 !important;
            border-top: 1px solid rgba(218,190,126,.16) !important;
            border-bottom: 1px solid rgba(218,190,126,.11) !important;
            color: rgba(244,236,216,.67) !important;
            background: rgba(8,8,7,.36) !important;
            box-shadow: none !important;
            font: 700 11px/1.1 "Source Sans 3", "Noto Serif SC", sans-serif !important;
            letter-spacing: .075em !important;
        }
        #menu-screen .button.secondary:hover {
            color: #f2d68c !important;
            background: rgba(18,15,11,.58) !important;
        }
        #player-name-display {
            margin-bottom: 10px !important;
            color: rgba(238,211,149,.72) !important;
            font: 600 11px/1.2 "Noto Serif SC", "Source Sans 3", serif !important;
        }
        .top-controls {
            top: max(18px, calc(var(--osl-safe-top) + 8px)) !important;
            right: max(17px, calc(var(--osl-safe-right) + 8px)) !important;
            gap: 7px !important;
        }
        .icon-btn, .lang-toggle {
            border-color: rgba(239,221,177,.18) !important;
            background: rgba(7,7,6,.44) !important;
            box-shadow: 0 5px 16px rgba(0,0,0,.18) !important;
        }
        .icon-btn { width: 40px; height: 40px; padding: 0 !important; display: grid; place-items: center; }
        .lang-btn { min-height: 31px; padding: 7px 11px !important; }

        /* ---------- Combat HUD: compact and outside the playable arena ---------- */
        #hud {
            top: 7px !important;
            padding: 0 9px !important;
            gap: 4px !important;
        }
        .hud-item {
            min-height: 39px !important;
            padding: 4px 4px 5px !important;
            border-radius: 3px !important;
            border: 1px solid rgba(232,213,166,.11) !important;
            background: linear-gradient(180deg, rgba(14,13,11,.80), rgba(7,7,6,.66)) !important;
            box-shadow: 0 4px 11px rgba(0,0,0,.20) !important;
        }
        .hud-label { font-size: 7px !important; letter-spacing: .11em !important; }
        #score-display, #timer-display, #combo-display { font-size: clamp(14px, 3.5cqw, 19px) !important; }
        #lives-display { font-size: clamp(13px, 3.2cqw, 18px) !important; }
        #gate-hud, #gate-hud.ink-banner {
            top: 51px !important;
            width: min(91%, 430px) !important;
            min-height: 44px !important;
            padding: 6px 10px 7px !important;
            display: none;
            grid-template-columns: minmax(0,1fr) auto !important;
            grid-template-areas: "title time" "threat threat" !important;
            gap: 2px 8px !important;
            border: 1px solid rgba(223,190,113,.27) !important;
            border-left-color: rgba(223,190,113,.44) !important;
            border-right-color: rgba(223,190,113,.44) !important;
            border-radius: 4px !important;
            background-image: linear-gradient(180deg, rgba(14,13,11,.91), rgba(6,6,5,.89)) !important;
            filter: none !important;
            box-shadow: 0 6px 16px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.025) !important;
        }
        #gate-count { color: #e9cb82 !important; font-size: 8px !important; letter-spacing: .08em !important; }
        #gate-time { color: rgba(247,239,219,.65) !important; font-size: 8px !important; }
        #gate-threat {
            color: #fff9eb !important;
            font: 700 11px/1.25 "Noto Serif SC", "Source Sans 3", serif !important;
            letter-spacing: .025em !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        html[lang="en"] #gate-threat { font-family: "Source Sans 3", sans-serif !important; letter-spacing: .02em !important; }
        #gate-next { font-size: 9px !important; color: rgba(247,239,219,.80) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #art-status { font-size: 9px !important; color: #f0d79a !important; white-space: nowrap; margin-left:auto; min-width:60px; text-align:right; }
        #boss-hud {
            top: 103px !important;
            width: min(80%, 382px) !important;
            padding: 6px 13px 7px !important;
            border-radius: 5px !important;
            background: linear-gradient(180deg, rgba(19,16,13,.91), rgba(7,7,6,.88)) !important;
        }
        #boss-name { font-size: clamp(16px, 4.1cqw, 20px) !important; letter-spacing: 0 !important; line-height:1.15 !important; }
        #boss-hud .boss-health-track { height:6px !important; margin:5px 0 4px !important; }
        #boss-hud .boss-state-row { margin-bottom:3px !important; }
        #boss-hint { font-size: 9.5px !important; line-height:1.25 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        /* Feedback becomes a narrow ink ribbon above the sword case, never a central web modal. */
        .combo-feedback {
            top: auto !important;
            bottom: clamp(164px, 19vh, 194px) !important;
            width: min(84%, 420px) !important;
            max-width: calc(100% - 42px) !important;
            min-height: 0 !important;
            padding: 8px 18px 9px !important;
            border: 0 !important;
            border-top: 1px solid rgba(239,207,126,.60) !important;
            border-bottom: 1px solid rgba(169,52,45,.58) !important;
            border-radius: 0 !important;
            color: #fff6dd !important;
            background: linear-gradient(90deg, transparent, rgba(12,11,9,.89) 13%, rgba(12,11,9,.94) 50%, rgba(12,11,9,.89) 87%, transparent) !important;
            box-shadow: 0 9px 23px rgba(0,0,0,.24) !important;
            font-size: clamp(14px, 3.75cqw, 19px) !important;
            font-weight: 700 !important;
            line-height: 1.2 !important;
            letter-spacing: .045em !important;
            text-shadow: 0 2px 6px rgba(0,0,0,.9) !important;
        }
        .combo-feedback[data-tone="danger"] { color: #ffb2a6 !important; border-top-color: rgba(226,88,71,.75) !important; }
        #stroke-result, #stroke-result.ink-banner {
            bottom: clamp(146px, 17vh, 173px) !important;
            width: min(82%, 390px) !important;
            padding: 6px 14px !important;
            border: 0 !important;
            border-top: 1px solid rgba(223,192,122,.42) !important;
            border-bottom: 1px solid rgba(223,192,122,.22) !important;
            border-radius: 0 !important;
            background-image: none !important;
            background: linear-gradient(90deg, transparent, rgba(8,8,7,.82) 12%, rgba(8,8,7,.9) 50%, rgba(8,8,7,.82) 88%, transparent) !important;
            box-shadow: 0 5px 14px rgba(0,0,0,.20) !important;
            filter: none !important;
            font-size: 11px !important;
            white-space: pre-line;
        }
        #stage-banner {
            top: 45% !important;
            width: min(82%, 410px) !important;
            padding: 10px 22px 11px !important;
            border: 0 !important;
            border-top: 1px solid rgba(236,207,137,.65) !important;
            border-bottom: 1px solid rgba(169,52,45,.62) !important;
            border-radius: 0 !important;
            color: #fff8e7 !important;
            background: linear-gradient(90deg, transparent, rgba(10,9,8,.78) 15%, rgba(10,9,8,.88) 50%, rgba(10,9,8,.78) 85%, transparent) !important;
            box-shadow: 0 12px 30px rgba(0,0,0,.20) !important;
            backdrop-filter: none !important;
            font-size: clamp(17px, 4.7cqw, 24px) !important;
            letter-spacing: .075em !important;
        }
        #stage-banner::before, #stage-banner::after { display: none !important; }

        /* ── Tutorial swipe guide ── */
        #tutorial-swipe-guide { position:fixed; top:0; left:0; width:100%; height:100%; z-index:250; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .5s ease; pointer-events:none; }
        #tutorial-swipe-guide.visible { opacity:1; }
        .tutorial-overlay-bg { position:absolute; inset:0; background:radial-gradient(circle at center, rgba(14,12,10,0.55) 0%, rgba(3,3,3,0.85) 100%); backdrop-filter:blur(3px); }
        .tutorial-guide-content { position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; gap:13px; }
        .tutorial-sword-demo { position:relative; width:260px; height:150px; display:flex; align-items:center; justify-content:center; }
        .tutorial-target-group { position:relative; width:252px; height:84px; }
        .tutorial-target-ring { position:absolute; inset:-9px; border:1px solid rgba(217,179,107,.68); transform:rotate(45deg); box-shadow:inset 0 0 0 3px rgba(12,10,8,.45); animation:tutSealBreathe 1.45s ease-in-out infinite; }
        .tutorial-target-seal { position:absolute; width:56px; height:56px; border:2px solid rgba(184,51,42,.9); border-radius:4px; background:linear-gradient(145deg,rgba(119,28,24,.86),rgba(27,13,11,.96)); display:flex; align-items:center; justify-content:center; box-shadow:0 7px 18px rgba(0,0,0,.4); transform:rotate(-4deg); }
        .tutorial-target-seal.seal-1 { left:6px; top:14px; }
        .tutorial-target-seal.seal-2 { left:98px; top:14px; transform:rotate(2deg); }
        .tutorial-target-seal.seal-3 { right:6px; top:14px; transform:rotate(-2deg); }
        .tut-canvas { width:52px; height:52px; display:block; }
        .tutorial-slash-beam { position:absolute; width:300px; height:6px; background:linear-gradient(90deg, transparent 0%, rgba(255,245,210,0.95) 50%, #ffd276 80%, transparent 100%); transform-origin:center; transform:translateX(-220px); opacity:0; filter:drop-shadow(0 0 12px #ffd276) drop-shadow(0 0 25px #b8332a); animation:tutSwordSlash 2.2s cubic-bezier(0.2,0.8,0.2,1) infinite; }
        @keyframes tutSealBreathe { 0%,100% { opacity:.48; transform:rotate(45deg) scale(.95); } 50% { opacity:1; transform:rotate(45deg) scale(1.04); } }
        @keyframes tutSwordSlash {
            0%, 15% { transform:translateX(-220px) scaleX(0.5); opacity:0; }
            35% { transform:translateX(0) scaleX(1.3); opacity:1; }
            55%, 100% { transform:translateX(220px) scaleX(0.6); opacity:0; }
        }
        .tutorial-guide-text { color:#fdf4de; font:700 18px/1.4 "Noto Serif SC","Cinzel",serif; text-shadow:0 2px 16px rgba(0,0,0,0.9), 0 0 20px rgba(217,179,107,0.6); letter-spacing:.08em; padding:6px 20px; border-bottom:1px solid rgba(217,179,107,0.4); }
        .tutorial-guide-detail { color:rgba(247,235,203,.8); font:600 13px/1.35 "Noto Serif SC","Source Sans 3",sans-serif; letter-spacing:.04em; }
        .tutorial-case-demo { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:2px; padding:8px 14px; border-radius:8px; background:linear-gradient(180deg,rgba(22,16,12,.72),rgba(10,8,6,.88)); border:1px solid rgba(217,179,107,.35); box-shadow:0 6px 18px rgba(0,0,0,.35); }
        .tutorial-case-slot { width:22px; height:28px; border-radius:3px; border:1px solid rgba(232,111,104,.85); background:linear-gradient(160deg,rgba(184,51,42,.75),rgba(40,16,14,.95)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); animation:tutCaseFill 2.2s ease-in-out infinite; opacity:.25; }
        .tutorial-case-slot.s1 { animation-delay:0s; }
        .tutorial-case-slot.s2 { animation-delay:.18s; }
        .tutorial-case-slot.s3 { animation-delay:.36s; }
        .tutorial-case-slot.empty { border-color:rgba(217,179,107,.28); background:rgba(20,16,12,.55); animation:none; opacity:.55; }
        .tutorial-case-art { margin-left:8px; color:#ffd276; font:700 12px/1 "Noto Serif SC","Cinzel",serif; letter-spacing:.12em; padding:5px 10px; border:1px solid rgba(217,179,107,.55); border-radius:4px; background:linear-gradient(90deg,transparent,rgba(108,28,24,.4),transparent); animation:tutArtPulse 2.2s cubic-bezier(0.2,0.8,0.2,1) infinite; }
        @keyframes tutCaseFill { 0%,18% { opacity:.22; transform:scale(.92); } 32%,70% { opacity:1; transform:scale(1); } 100% { opacity:.22; transform:scale(.92); } }
        .tutorial-art-banner { color:#ffd276; font:700 14px/1.3 "Noto Serif SC","Cinzel",serif; padding:7px 20px; border-top:1px solid rgba(217,179,107,.5); border-bottom:1px solid rgba(217,179,107,.5); background:linear-gradient(90deg,transparent,rgba(108,28,24,.35),transparent); animation:tutArtPulse 2.2s cubic-bezier(0.2,0.8,0.2,1) infinite; }
        @keyframes tutArtPulse {
            0%, 20% { transform:scale(0.92); opacity:0.35; filter:brightness(0.8); }
            36%, 54% { transform:scale(1.08); opacity:1; filter:brightness(1.35); box-shadow:0 0 32px rgba(255,210,118,0.85); border-color:#fff5dd; }
            70%, 100% { transform:scale(0.95); opacity:0.4; filter:brightness(0.8); }
        }

        /* Novice-only score grammar strip — hidden for veterans */
        #score-grammar-strip {
            position: fixed; left: 50%; top: clamp(86px, 12vh, 118px); transform: translateX(-50%);
            z-index: 120; width: min(92%, 420px); pointer-events: none;
            padding: 7px 14px 8px; text-align: center;
            border-top: 1px solid rgba(223,192,122,.38); border-bottom: 1px solid rgba(223,192,122,.22);
            background: linear-gradient(90deg, transparent, rgba(8,8,7,.78) 10%, rgba(8,8,7,.88) 50%, rgba(8,8,7,.78) 90%, transparent);
            opacity: 0; transition: opacity .35s ease;
        }
        #score-grammar-strip.visible { opacity: 1; }
        #score-grammar-strip .sg-title {
            color: #f0d79a; font: 700 11px/1.2 "Noto Serif SC","Cinzel",serif; letter-spacing: .14em;
            margin-bottom: 3px;
        }
        #score-grammar-strip .sg-line {
            color: rgba(247,239,219,.82); font: 600 10px/1.35 "Source Sans 3","Noto Serif SC",sans-serif;
        }
        #score-grammar-strip .sg-line.good { color: rgba(196, 230, 170, .92); }
        #score-grammar-strip .sg-line.bad { color: rgba(255, 178, 166, .92); }

        /* ---------- Results: a dramatic sealed battle record ---------- */
        #results-screen {
            background:
                radial-gradient(circle at 50% 9%, rgba(222,185,102,.18), transparent 29%),
                linear-gradient(180deg, rgba(11,9,7,.80), rgba(3,3,3,.98)) !important;
        }
        #results-screen::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(90deg, rgba(0,0,0,.28), transparent 17%, transparent 83%, rgba(0,0,0,.28)),
                radial-gradient(ellipse at 50% 103%, rgba(169,52,45,.10), transparent 48%);
        }
        /* Scheme C: perfect vs normal clear — full gold / gold accents on settle */
        #results-screen[data-clear-quality="flawless"] {
            background:
                radial-gradient(circle at 50% 12%, rgba(255,220,140,.42), transparent 34%),
                radial-gradient(circle at 50% 80%, rgba(198,150,50,.18), transparent 50%),
                linear-gradient(180deg, rgba(42,32,12,.92), rgba(12,9,4,.99)) !important;
        }
        #results-screen[data-clear-quality="flawless"]::before {
            background:
                linear-gradient(90deg, rgba(80,55,10,.25), transparent 18%, transparent 82%, rgba(80,55,10,.25)),
                radial-gradient(ellipse at 50% 0%, rgba(255,220,140,.22), transparent 45%);
        }
        #results-screen[data-clear-quality="flawless"] #personal-results {
            border-color: rgba(255,220,140,.78) !important;
            background:
                radial-gradient(circle at 50% 0%, rgba(255,230,160,.28), transparent 55%),
                linear-gradient(160deg, rgba(58,44,16,.97) 0%, rgba(22,16,8,.99) 100%) !important;
            box-shadow:
                0 30px 90px rgba(0,0,0,.85),
                0 0 60px rgba(255,200,80,.35),
                inset 0 1px 0 rgba(255,240,190,.35) !important;
        }
        #results-screen[data-clear-quality="flawless"] .results-title {
            color: #ffe7a0 !important;
            text-shadow: 0 0 24px rgba(255,210,100,.55), 0 2px 12px rgba(0,0,0,.5) !important;
        }
        #results-screen[data-clear-quality="flawless"] .results-score {
            color: #ffe08a !important;
            text-shadow: 0 0 28px rgba(255,200,80,.6) !important;
        }
        #results-screen[data-clear-quality="flawless"] .result-kicker,
        #results-screen[data-clear-quality="flawless"] .result-highlight,
        #results-screen[data-clear-quality="flawless"] .result-story {
            color: rgba(255,230,170,.92) !important;
        }
        #results-screen[data-clear-quality="flawless"] .result-stat-value {
            color: #ffe7a8 !important;
        }
        #results-screen[data-clear-quality="flawless"] .result-outcome-stamp,
        #results-screen[data-clear-quality="flawless"] .result-outcome-stamp[data-outcome="flawless"] {
            border-color: rgba(255,220,140,.9) !important;
            color: #3a2a08 !important;
            background: linear-gradient(145deg, #ffe7a0, #d4a84a) !important;
            box-shadow: 0 0 28px rgba(255,200,80,.55) !important;
        }
        #results-screen[data-clear-quality="masterful"] {
            background:
                radial-gradient(circle at 50% 10%, rgba(240,200,110,.28), transparent 32%),
                linear-gradient(180deg, rgba(22,16,8,.88), rgba(4,3,2,.98)) !important;
        }
        #results-screen[data-clear-quality="masterful"] #personal-results {
            border-color: rgba(240,200,110,.62) !important;
            box-shadow: 0 28px 80px rgba(0,0,0,.85), 0 0 36px rgba(226,180,80,.22) !important;
        }
        #results-screen[data-clear-quality="masterful"] .results-title {
            color: #f5dfa0 !important;
        }
        #results-screen[data-clear-quality="mixed"] #result-stat-perfect,
        #results-screen[data-clear-quality="masterful"] #result-stat-perfect,
        #results-screen[data-clear-quality="flawless"] #result-stat-perfect {
            color: #ffd276 !important;
            text-shadow: 0 0 12px rgba(255,200,80,.45);
        }
        #results-screen .results-content:not(.leaderboard-only) {
            justify-content: center !important;
            gap: 12px !important;
            padding: max(26px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom)) !important;
        }
        #personal-results {
            width: min(92%, 450px) !important;
            padding: 28px 24px 24px !important;
            border: 1px solid rgba(226,193,115,0.45) !important;
            border-radius: 14px !important;
            clip-path: none !important;
            background:
                radial-gradient(circle at 50% 0%, rgba(226,193,115,0.12), transparent 60%),
                linear-gradient(160deg, rgba(26,22,18,0.95) 0%, rgba(14,12,10,0.98) 100%) !important;
            color: #fdf4de !important;
            box-shadow: 0 30px 80px rgba(0,0,0,0.85), 0 0 40px rgba(226,193,115,0.12), inset 0 1px 0 rgba(255,255,255,0.15) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
        }
        #personal-results::before {
            content: '' !important;
            inset: 8px !important;
            border: 1px solid rgba(226,193,115,0.18) !important;
            border-radius: 8px !important;
            pointer-events: none !important;
            box-shadow: none !important;
            background: transparent !important;
        }
        #personal-results::after {
            display: none !important;
        }
        #results-screen[data-outcome="victory"] #personal-results::after { display: none !important; }
        #results-screen[data-outcome="defeat"] #personal-results::after,
        #results-screen[data-outcome="timeout"] #personal-results::after { display: none !important; }
        .result-kicker {
            margin-bottom: 9px !important;
            color: rgba(226,193,115,0.8) !important;
            font: 700 9px/1 "Cinzel", "Noto Serif SC", serif !important;
            letter-spacing: .34em !important;
        }
        .results-title {
            max-width: 80% !important;
            margin: 0 auto 10px !important;
            color: #fdf4de !important;
            font-size: clamp(30px, 8cqw, 42px) !important;
            font-weight: 700 !important;
            line-height: 1.1 !important;
            letter-spacing: .04em !important;
            text-shadow: 0 2px 15px rgba(226,193,115,0.3) !important;
        }
        #results-screen[data-outcome="defeat"] .results-title,
        #results-screen[data-outcome="timeout"] .results-title { color: #e86f68 !important; text-shadow: 0 2px 15px rgba(232,111,104,0.3) !important; }
        .results-score {
            margin: 4px 0 14px !important;
            color: #ffd276 !important;
            font: 700 clamp(58px, 15cqw, 82px)/.92 "Source Sans 3", sans-serif !important;
            letter-spacing: -.04em !important;
            text-shadow: 0 2px 20px rgba(255,210,118,0.4) !important;
        }
        .result-highlight {
            width: min(94%, 390px) !important;
            margin: 12px auto 6px !important;
            color: #ffd276 !important;
            font: 700 clamp(14px, 3.6cqw, 18px)/1.36 "Noto Serif SC", "Source Sans 3", serif !important;
            letter-spacing: .03em !important;
        }
        html[lang="en"] .result-highlight { font-family: "Cinzel", Georgia, serif !important; font-size: clamp(11px, 2.9cqw, 14px) !important; }
        .result-story {
            width: min(94%, 390px) !important;
            margin: 0 auto 16px !important;
            color: rgba(234,224,204,0.8) !important;
            font-size: 12px !important;
            line-height: 1.5 !important;
        }
        .result-stats-grid.v18-final {
            width: 100% !important;
            margin: 0 auto 16px !important;
            gap: 0 !important;
            border-top: 1px solid rgba(226,193,115,.2) !important;
            border-bottom: 1px solid rgba(226,193,115,.2) !important;
            background: rgba(255,255,255,0.02) !important;
        }
        .result-stat {
            padding: 14px 5px 13px !important;
            border: 0 !important;
            background: transparent !important;
        }
        .result-stat:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 25%;
            right: 0;
            width: 1px;
            height: 50%;
            background: rgba(226,193,115,.2);
        }
        .result-stat-value {
            color: #fdf4de !important;
            font-size: clamp(20px, 5.2cqw, 27px) !important;
            font-weight: 700 !important;
        }
        .result-stat-label {
            margin-top: 6px !important;
            color: rgba(226,193,115,.75) !important;
            font-size: clamp(8px, 2cqw, 10px) !important;
            letter-spacing: .1em !important;
        }
        .results-rank {
            width: 100% !important;
            padding: 12px 10px 4px !important;
            border: 1px solid rgba(226,193,115,.18) !important;
            border-radius: 8px !important;
            background: rgba(255,255,255,.03) !important;
        }
        #results-screen .rank-seal {
            width: 52px !important;
            height: 52px !important;
            margin-bottom: 5px !important;
            filter: drop-shadow(0 0 10px rgba(255,210,118,0.3));
        }
        #results-screen .rank-title {
            color: #ffd276 !important;
            font-size: clamp(21px, 5.8cqw, 29px) !important;
            font-weight: 600 !important;
            text-shadow: 0 0 10px rgba(255,210,118,0.3) !important;
        }
        #results-screen .rank-phrase {
            margin-top: 4px !important;
            color: rgba(234,224,204,.75) !important;
            font-size: 11px !important;
            font-style: normal !important;
        }
        #results-screen .button-row {
            width: min(92%, 450px) !important;
            grid-template-columns: 1fr 1fr !important;
            grid-template-areas: "retry retry" "menu share" !important;
            gap: 10px !important;
        }
        #results-screen .button-row .button {
            min-height: 46px !important;
            padding: 10px 12px !important;
            clip-path: none !important;
            border-radius: 8px !important;
            font-size: clamp(13px, 3.2cqw, 15px) !important;
            letter-spacing: .06em !important;
            transition: all 0.2s ease !important;
        }
        #results-screen .button-row .button:hover {
            transform: translateY(-1px) !important;
        }
        #results-screen #restart-button {
            min-height: 54px !important;
            color: #fdf4de !important;
            background: linear-gradient(180deg, #b8332a 0%, #7d1f18 100%) !important;
            border: 1px solid rgba(217,179,107,.75) !important;
            box-shadow: 0 6px 20px rgba(130,25,20,0.5), inset 0 1px 0 rgba(255,255,255,.2) !important;
            font-size: clamp(17px, 4.2cqw, 21px) !important;
        }
        #results-screen #restart-button:hover {
            background: linear-gradient(180deg, #c9382b 0%, #9e2a22 100%) !important;
            box-shadow: 0 8px 25px rgba(189,63,53,0.7), inset 0 1px 0 rgba(255,255,255,0.35) !important;
        }
        #results-screen #rebuild-button,
        #results-screen #share-result-button {
            color: #fdf4de !important;
            background: rgba(255,255,255,.06) !important;
            border: 1px solid rgba(226,193,115,.35) !important;
            box-shadow: 0 4px 12px rgba(0,0,0,.3) !important;
            font-family: "Source Sans 3", "Noto Serif SC", sans-serif !important;
        }
        #results-screen #rebuild-button:hover,
        #results-screen #share-result-button:hover {
            background: rgba(255,255,255,.1) !important;
            border-color: rgba(226,193,115,.55) !important;
        }


        @media (max-width: 430px) {
            #menu-screen .screen-content { padding: 72px 19px 27px !important; }
            #menu-screen .menu-hero { margin-bottom: 19px !important; }
            #menu-screen .menu-actions { width: 88% !important; }
            #menu-screen .difficulty-picker { width: 84% !important; }
            #gate-hud, #gate-hud.ink-banner { top: 51px !important; width: 94% !important; }
            .combo-feedback { bottom: clamp(156px, 18.2vh, 181px) !important; }
            #personal-results { width: 93% !important; padding: 27px 18px 20px !important; }
            #personal-results::after { right: 17px !important; top: 18px !important; width: 38px !important; height: 38px !important; font-size: 22px !important; }
            .results-title { max-width: 76% !important; }
            #results-screen .button-row { width: 93% !important; }
        }
        @media (max-height: 740px) {
            #menu-screen .screen-content { padding-top: 61px !important; padding-bottom: 17px !important; }
            #menu-screen .menu-hero { margin-bottom: 14px !important; padding-top: 11px !important; padding-bottom: 14px !important; }
            #menu-screen .title { font-size: clamp(30px, 8.2cqw, 43px) !important; }
            #menu-screen #start-button { min-height: 53px !important; }
            #menu-screen #friend-pk-btn { min-height: 43px !important; }
            #personal-results { padding-top: 23px !important; padding-bottom: 17px !important; }
            .result-story { display: none !important; }
            #results-screen .rank-phrase { display: none !important; }
            .combo-feedback { bottom: 151px !important; }
        }


        /* ---------- Final polish: results + duel share card unified ---------- */
        .share-fallback-card {
            border: 1px solid rgba(205,170,100,.32) !important;
            border-top-color: rgba(241,219,164,.50) !important;
            background: linear-gradient(180deg, rgba(18,16,13,.98), rgba(8,8,7,.98)) !important;
            box-shadow: 0 30px 95px rgba(0,0,0,.74) !important;
        }
        .share-fallback-card h3 {
            padding: 15px 52px 4px !important;
            color: #f3e7c9 !important;
            font: 600 clamp(18px, 4vw, 24px)/1.15 "Cinzel","Noto Serif SC",serif !important;
            letter-spacing: .14em !important;
        }
        html[lang="zh"] .share-fallback-card h3 {
            font-family: "Noto Serif SC","Source Han Serif SC",serif !important;
            letter-spacing: .10em !important;
        }
        .share-fallback-card > p,
        #share-action-status {
            color: rgba(241,233,214,.62) !important;
            font: 600 11px/1.45 "Source Sans 3","Noto Serif SC",sans-serif !important;
        }
        #share-card-open {
            background: radial-gradient(circle at 50% 18%, rgba(205,170,100,.10), transparent 45%), #0b0907 !important;
            padding: 10px 12px 6px !important;
        }
        #share-card-preview {
            border-radius: 2px !important;
            box-shadow: 0 18px 48px rgba(0,0,0,.52) !important;
        }
        #share-code-preview,
        #share-action-status {
            background: rgba(255,255,255,.03) !important;
            border-top: 1px solid rgba(205,170,100,.12) !important;
        }
        .share-fallback-actions.three {
            padding: 10px !important;
            gap: 8px !important;
            background: linear-gradient(180deg, rgba(24,21,18,.95), rgba(17,15,13,.98)) !important;
        }
        .share-fallback-actions button {
            min-height: 44px !important;
            border-radius: 3px !important;
            border: 1px solid rgba(205,170,100,.22) !important;
            font: 700 12px/1.2 "Source Sans 3","Noto Serif SC",sans-serif !important;
            letter-spacing: .04em !important;
            color: #f7efdd !important;
        }
        #share-fallback-copy {
            background: linear-gradient(180deg, #c34235, #8f2a23 58%, #691c18) !important;
            border-color: rgba(241,219,164,.48) !important;
        }
        #share-fallback-save {
            background: rgba(40,34,28,.92) !important;
        }
        #share-fallback-close {
            background: rgba(255,255,255,.05) !important;
        }


        /* ---------- Final pass v3: cleaner seal rings + unified menu / HUD ---------- */
        #menu-screen::before {
            background:
                radial-gradient(circle at 50% 9%, rgba(216,179,96,.16), transparent 20%),
                linear-gradient(180deg, rgba(6,6,5,.86), rgba(4,4,4,.97)) !important;
        }
        #menu-screen .screen-content {
            padding-top: 78px !important;
            padding-bottom: 22px !important;
        }
        #menu-screen .menu-hero {
            width: min(88%, 450px) !important;
            margin-bottom: 18px !important;
            padding: 18px 18px 16px !important;
            border: 1px solid rgba(205,170,100,.24) !important;
            border-top-color: rgba(240,214,154,.40) !important;
            background:
                linear-gradient(180deg, rgba(14,12,10,.82), rgba(9,8,7,.92)),
                radial-gradient(circle at 50% 0, rgba(215,178,95,.08), transparent 36%) !important;
            box-shadow: 0 18px 42px rgba(0,0,0,.34) !important;
        }
        #menu-screen .menu-kicker {
            margin-bottom: 8px !important;
            color: rgba(224,196,123,.82) !important;
            font-size: 10px !important;
            letter-spacing: .28em !important;
        }
        #menu-screen .title {
            margin-bottom: 10px !important;
            text-shadow: 0 2px 12px rgba(0,0,0,.80), 0 0 24px rgba(215,178,95,.18) !important;
        }
        #menu-screen .subtitle {
            margin-bottom: 0 !important;
            color: rgba(239,228,202,.72) !important;
        }
        #menu-screen .difficulty-picker {
            width: min(82%, 380px) !important;
            margin-bottom: 11px !important;
            background: linear-gradient(180deg, rgba(13,12,10,.75), rgba(8,8,7,.84)) !important;
        }
        #menu-screen .menu-actions {
            width: min(86%, 398px) !important;
            gap: 8px !important;
        }
        #menu-screen #start-button {
            min-height: 58px !important;
            box-shadow: 0 10px 24px rgba(86,19,15,.34), inset 0 1px rgba(255,255,255,.14) !important;
        }
        #menu-screen #friend-pk-btn {
            min-height: 46px !important;
        }
        #menu-screen .button.secondary {
            min-height: 40px !important;
            color: rgba(240,231,208,.74) !important;
        }

        #hud {
            top: 8px !important;
            padding: 0 8px !important;
            gap: 5px !important;
        }
        .hud-item {
            min-height: 42px !important;
            padding: 5px 5px 6px !important;
            border: 1px solid rgba(232,213,166,.14) !important;
            border-top-color: rgba(244,232,201,.18) !important;
            background:
                linear-gradient(180deg, rgba(16,14,12,.84), rgba(7,7,6,.70)),
                radial-gradient(circle at 50% 0, rgba(215,178,95,.05), transparent 55%) !important;
            box-shadow: 0 6px 14px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.03) !important;
        }
        .hud-label {
            color: rgba(242,234,214,.48) !important;
            font-size: 7px !important;
            letter-spacing: .13em !important;
            margin-bottom: 2px !important;
        }
        #score-display, #timer-display, #combo-display, #lives-display {
            color: #f7efdd !important;
            text-shadow: 0 2px 6px rgba(0,0,0,.82) !important;
        }

        #gate-hud, #gate-hud.ink-banner {
            top: 57px !important;
            width: min(92%, 442px) !important;
            min-height: 48px !important;
            padding: 7px 11px 8px !important;
            border: 1px solid rgba(205,170,100,.24) !important;
            border-top-color: rgba(241,219,164,.36) !important;
            background:
                linear-gradient(180deg, rgba(17,15,13,.92), rgba(8,8,7,.91)),
                radial-gradient(circle at 50% 0, rgba(215,178,95,.06), transparent 58%) !important;
            box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
        }
        #gate-count { color: #cfa85f !important; }
        #gate-time { color: rgba(246,238,216,.55) !important; }
        #gate-threat {
            color: #f8f1e2 !important;
            font-size: 11.5px !important;
            line-height: 1.28 !important;
            letter-spacing: .02em !important;
        }
        #boss-hud {
            top: 132px !important;
            width: min(88%, 430px) !important;
            padding: 5px 11px 6px !important;
            border: 1px solid rgba(205,170,100,.24) !important;
            border-top-color: rgba(241,219,164,.38) !important;
            border-bottom-color: rgba(153,47,39,.58) !important;
            background:
                linear-gradient(180deg, rgba(18,16,13,.95), rgba(8,8,7,.90)),
                radial-gradient(circle at 50% 0, rgba(153,47,39,.08), transparent 60%) !important;
            box-shadow: 0 11px 26px rgba(0,0,0,.30) !important;
        }
        #stage-banner {
            top: clamp(148px, 17.5vh, 176px) !important;
            width: min(64%, 284px) !important;
            max-width: 284px !important;
            padding: 7px 14px 8px !important;
            color: #fff6e6 !important;
            border-top-color: rgba(236,207,137,.54) !important;
            border-bottom-color: rgba(153,47,39,.52) !important;
            background: linear-gradient(90deg, transparent, rgba(10,9,8,.72) 14%, rgba(10,9,8,.88) 50%, rgba(10,9,8,.72) 86%, transparent) !important;
            box-shadow: 0 7px 18px rgba(0,0,0,.18) !important;
            font-size: clamp(14px, 3.8cqw, 19px) !important;
            letter-spacing: 0 !important;
        }
        #boss-hud #boss-name { font-size: clamp(13px, 3.4cqw, 16px) !important; line-height:1.08 !important; }
        #boss-hud .boss-health-track { height:5px !important; margin:4px 0 3px !important; }
        #boss-hud .boss-state-row { min-height:9px !important; margin:0 0 2px !important; font-size:8px !important; }
        #boss-hud #boss-hint { font-size:8.5px !important; line-height:1.1 !important; }
        .combo-feedback {
            bottom: clamp(170px, 19.8vh, 198px) !important;
            padding: 8px 16px 9px !important;
            box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
        }
        #stroke-result, #stroke-result.ink-banner {
            bottom: clamp(150px, 17.6vh, 178px) !important;
            width: min(72%, 330px) !important;
            color: rgba(247,239,221,.84) !important;
        }

        @media (max-width: 430px) {
            #menu-screen .screen-content { padding-top: 66px !important; }
            #menu-screen .menu-hero { width: min(90%, 430px) !important; }
            #gate-hud, #gate-hud.ink-banner { top: 55px !important; }
            #boss-hud { top: 128px !important; }
        }
        @media (max-height: 760px) {
            #menu-screen .screen-content { padding-top: 58px !important; }
            #menu-screen .menu-hero { padding: 14px 16px 13px !important; }
            #menu-screen #start-button { min-height: 54px !important; }
            .combo-feedback { bottom: 160px !important; }
        }


        /* ---------- Final pass v4: premium menu / results / duel share ---------- */
        #menu-screen .screen-content {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 10px !important;
            padding-top: 76px !important;
            padding-bottom: 26px !important;
        }
        #menu-screen .menu-hero {
            width: min(88%, 462px) !important;
            margin-bottom: 10px !important;
            padding: 22px 22px 20px !important;
            background:
                linear-gradient(180deg, rgba(15,13,11,.82), rgba(9,8,7,.92)),
                radial-gradient(circle at 50% 0, rgba(217,181,103,.08), transparent 38%) !important;
            border: 1px solid rgba(205,170,100,.22) !important;
            border-top-color: rgba(240,214,154,.38) !important;
            box-shadow: 0 18px 46px rgba(0,0,0,.34) !important;
        }
        #menu-screen .menu-kicker {
            letter-spacing: .32em !important;
            margin-bottom: 10px !important;
            opacity: .92 !important;
        }
        #menu-screen .title {
            font-size: clamp(38px, 8.8cqw, 58px) !important;
            line-height: 1.02 !important;
            letter-spacing: .07em !important;
            margin-bottom: 12px !important;
        }
        #menu-screen .title .title-secondary {
            display: block !important;
            margin-top: 6px !important;
            font-size: .58em !important;
            letter-spacing: .15em !important;
            opacity: .92 !important;
        }
        #menu-screen .subtitle {
            max-width: 28em !important;
            margin: 0 auto 2px !important;
            font-size: 12px !important;
            line-height: 1.55 !important;
            letter-spacing: .08em !important;
            color: rgba(239,228,202,.70) !important;
        }
        #menu-screen .difficulty-picker {
            width: min(82%, 386px) !important;
            margin-bottom: 8px !important;
        }
        #menu-screen .menu-actions {
            width: min(84%, 400px) !important;
            gap: 9px !important;
        }
        #menu-screen .menu-secondary-actions {
            gap: 8px !important;
        }
        #menu-screen #start-button {
            min-height: 60px !important;
            font-size: clamp(18px, 4.8cqw, 24px) !important;
        }
        #menu-screen #friend-pk-btn {
            min-height: 47px !important;
        }
        #menu-screen .button.secondary {
            min-height: 41px !important;
        }

        #results-screen .results-content:not(.leaderboard-only) {
            gap: 14px !important;
            padding-top: max(18px, env(safe-area-inset-top)) !important;
            padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
        }
        #personal-results {
            width: min(94%, 462px) !important;
            padding: 28px 18px 20px !important;
            background:
                linear-gradient(145deg, rgba(245,236,213,.985), rgba(226,212,180,.975)),
                radial-gradient(circle at 88% 14%, rgba(153,47,39,.10), transparent 24%) !important;
            border-color: rgba(205,170,100,.40) !important;
            border-top-color: rgba(242,218,160,.68) !important;
            box-shadow: 0 24px 60px rgba(0,0,0,.46), inset 0 0 60px rgba(82,55,24,.04) !important;
        }
        #personal-results::before {
            inset: 12px !important;
            background:
                linear-gradient(112deg, transparent 0 46%, rgba(111,70,31,.035) 46.5% 47%, transparent 47.5%),
                radial-gradient(circle at 86% 14%, rgba(157,53,45,.07), transparent 18%) !important;
        }
        .results-title {
            margin-bottom: 8px !important;
            font-size: clamp(44px, 10.4vw, 68px) !important;
            letter-spacing: .03em !important;
        }
        .result-kicker { letter-spacing: .24em !important; }
        .result-story {
            margin-top: 2px !important;
            margin-bottom: 10px !important;
            color: #705d4c !important;
            font-size: 12px !important;
            line-height: 1.5 !important;
        }
        .result-stats-grid.v18-final {
            gap: 0 !important;
            margin: 10px auto 14px !important;
            width: min(100%, 420px) !important;
            border-top: 1px solid rgba(111,70,31,.16) !important;
            border-bottom: 1px solid rgba(111,70,31,.12) !important;
            background: rgba(255,255,255,.18) !important;
        }
        .result-stat {
            padding: 12px 4px 10px !important;
            background: transparent !important;
            border: 0 !important;
            position: relative !important;
        }
        .result-stat:not(:last-child)::after {
            content: '' !important;
            position: absolute !important;
            right: 0 !important;
            top: 16% !important;
            width: 1px !important;
            height: 68% !important;
            background: rgba(111,70,31,.12) !important;
        }
        .result-stat-value { font-size: clamp(20px, 4.8vw, 28px) !important; }
        .result-stat-label {
            margin-top: 4px !important;
            color: #7a6d5a !important;
            font-size: 10px !important;
            letter-spacing: .09em !important;
        }
        #results-screen .rank-seal {
            width: 72px !important;
            height: 72px !important;
            margin-bottom: 6px !important;
        }
        #results-screen .rank-title {
            font-size: clamp(28px, 6.4vw, 38px) !important;
            margin-bottom: 3px !important;
        }
        #results-screen .rank-phrase {
            max-width: 26em !important;
            color: #746452 !important;
            font-size: 11px !important;
            line-height: 1.45 !important;
        }
        #results-screen .button-row {
            width: min(94%, 462px) !important;
            gap: 8px !important;
        }
        #results-screen #restart-button {
            min-height: 56px !important;
            box-shadow: 0 10px 24px rgba(86,19,15,.30), inset 0 1px rgba(255,255,255,.12) !important;
        }
        #results-screen #rebuild-button,
        #results-screen #share-result-button {
            min-height: 44px !important;
            background: linear-gradient(180deg, rgba(70,49,29,.92), rgba(42,29,19,.95)) !important;
            color: #f0dfb2 !important;
            border-color: rgba(205,170,100,.28) !important;
        }

        #share-fallback-card {
            width: min(94vw, 540px) !important;
        }
        #share-card-open {
            padding: 10px 10px 0 !important;
            background: radial-gradient(circle at 50% 10%, rgba(205,170,100,.08), transparent 34%), #090807 !important;
        }
        #share-card-preview {
            width: min(100%, 450px) !important;
            max-height: 74vh !important;
            margin: 0 auto !important;
            object-fit: contain !important;
            border-radius: 1px !important;
        }
        #share-code-preview {
            font-size: 10px !important;
            line-height: 1.4 !important;
        }

        @media (max-height: 760px) {
            #menu-screen .screen-content { padding-top: 60px !important; }
            #menu-screen .menu-hero { padding: 18px 18px 16px !important; }
            #personal-results { padding-top: 24px !important; }
            #results-screen .rank-phrase { display: none !important; }
        }


        /* ---------- Final pass v5: clearer seals, richer reports, brighter menu ---------- */
        #menu-screen::before {
            background:
                radial-gradient(circle at 50% 10%, rgba(216,201,162,.16), transparent 18%),
                linear-gradient(180deg, rgba(13,13,12,.42), rgba(8,8,7,.68)),
                var(--wuxia-boss-shadow, none),
                var(--wuxia-swordsman, none) !important;
            background-size: auto, auto, cover, auto !important;
            background-position: center, center, center bottom, right 8% bottom 5% !important;
            background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
        }
        /* #menu-screen bg is set via JS inline style when moon-bamboo loads */
        #menu-screen {
            background: radial-gradient(circle at 50% 12%, rgba(225,207,160,.10), transparent 20%), rgba(0,0,0,0);
        }
        #menu-screen .menu-hero {
            background: transparent !important;
            box-shadow: none !important;
        }
        #menu-screen .subtitle { color: rgba(239,228,202,.78) !important; }

        .results-title {
            max-width: 7.6em !important;
            font-size: clamp(34px, 8vw, 56px) !important;
            line-height: 1.05 !important;
            letter-spacing: .02em !important;
        }
        .results-score { margin-top: 2px !important; }
        .result-analysis-grid {
            width: min(100%, 426px) !important;
            margin: 14px auto 6px !important;
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 8px !important;
        }
        .result-analysis-card {
            padding: 12px 12px 10px !important;
            border: 1px solid rgba(111,70,31,.14) !important;
            border-radius: 6px !important;
            background: rgba(255,255,255,.22) !important;
            min-height: 52px !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: flex-start !important;
            text-align: left !important;
            box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
        }
        .result-analysis-value {
            display: block !important;
            color: #1f1812 !important;
            font: 800 clamp(18px, 4vw, 24px)/1.15 var(--font-en-body) !important;
            word-break: break-word !important;
        }
        .result-analysis-label {
            display: block !important;
            margin-top: 2px !important;
            color: #6d5f4a !important;
            font: 700 clamp(8px, 1.8vw, 10px)/1.2 var(--font-en-body) !important;
            letter-spacing: .09em !important;
            text-transform: uppercase !important;
        }
        .result-analysis-summary {
            width: min(100%, 420px) !important;
            margin: 6px auto 0 !important;
            padding: 8px 12px !important;
            border-radius: 6px !important;
            background: rgba(111,70,31,.05) !important;
            color: #5a4b38 !important;
            font: 600 11px/1.5 var(--font-en-body) !important;
            text-align: center !important;
        }
        #share-card-preview {
            width: min(100%, 470px) !important;
            max-height: 78vh !important;
        }
        @media (max-width: 430px) {
            .result-analysis-grid { gap: 5px !important; }
            .result-analysis-card { padding: 9px 9px 8px !important; }
            .results-title { font-size: clamp(32px, 7.6vw, 48px) !important; }
        }


        /* ---------- v5.1 hotfix: result runtime + title wrapping ---------- */
        html[lang="en"] .results-title {
            width: 100% !important;
            max-width: none !important;
            font-size: clamp(30px, 7.0cqw, 43px) !important;
            line-height: 1.06 !important;
            letter-spacing: .015em !important;
            text-wrap: balance !important;
            overflow-wrap: normal !important;
            word-break: normal !important;
        }
        html[lang="zh"] .results-title {
            width: 100% !important;
            max-width: none !important;
            text-wrap: balance !important;
        }
        #rank-seal {
            object-fit: contain !important;
            display: block !important;
        }


        /* === Final result + duel redesign (single authoritative override) === */
        #results-screen {
            background-image:
                linear-gradient(180deg, rgba(10,9,7,.70), rgba(5,4,3,.94)),
                url('../assets/images/backgrounds/bg_bamboo_default.webp') !important;
            background-size:cover !important;
            background-position:center !important;
        }
        #results-screen[data-outcome="defeat"],
        #results-screen[data-outcome="timeout"] {
            background-image:
                linear-gradient(180deg, rgba(22,7,6,.68), rgba(5,3,3,.95)),
                url('../assets/images/backgrounds/bg_bamboo_bloodmoon.webp') !important;
        }
        #results-screen .results-content:not(.leaderboard-only) { min-height: 100dvh; justify-content:center !important; gap:18px !important; padding: max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom)) !important; overflow-y:auto !important; overflow-x:hidden !important; }
        #personal-results { width:min(94%,500px) !important; padding:22px 24px 20px !important; gap:0 !important; border:1px solid rgba(226,193,115,.42) !important; border-radius:8px !important; clip-path:none !important; background:linear-gradient(160deg, rgba(22,19,16,0.94) 0%, rgba(10,9,8,0.97) 100%) !important; box-shadow:0 24px 64px rgba(0,0,0,.76), inset 0 1px 0 rgba(255,255,255,0.10) !important; overflow:visible !important; }
        #personal-results::before { inset:8px !important; border:1px solid rgba(226,193,115,.18) !important; border-radius:8px !important; background:transparent !important; box-shadow:none !important; }
        #personal-results::after { display:none !important; }
        .result-kicker { margin:0 0 8px !important; color:rgba(226,193,115,0.85) !important; font:700 10px/1.2 var(--font-zh-display) !important; letter-spacing:.22em !important; }
        .result-heading-row { width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; position:relative; padding:0; }
        .result-outcome-stamp {
            position:absolute;
            top:72px;
            right:clamp(20px, 7%, 46px);
            z-index:8;
            width:76px;
            aspect-ratio:1;
            display:grid;
            place-items:center;
            color:#ad352d;
            border:5px double currentColor;
            outline:1px solid currentColor;
            outline-offset:-9px;
            background:rgba(120,25,20,.035);
            opacity:0;
            transform:translateY(-26px) rotate(10deg) scale(1.28);
            filter:drop-shadow(0 5px 5px rgba(0,0,0,.22));
            pointer-events:none;
        }
        .result-outcome-stamp span { font:900 20px/1 var(--font-zh-display), var(--font-en-display); max-width:60px; text-align:center; overflow-wrap:anywhere; }
        .result-outcome-stamp[data-outcome="victory"] { color:#9f2924; }
        .result-outcome-stamp[data-outcome="timeout"] { color:#75634b; }
        .result-outcome-stamp.landed { animation:result-stamp-land 620ms cubic-bezier(.12,.88,.26,1.18) both; }
        @media (max-width:480px) {
            .result-outcome-stamp { top:68px; right:14px; width:62px; border-width:4px; outline-offset:-7px; }
            .result-outcome-stamp span { max-width:48px; font-size:16px; }
        }
        @keyframes result-stamp-land {
            0% { opacity:0; transform:translateY(-26px) rotate(10deg) scale(1.28); }
            45% { opacity:.96; transform:translateY(2px) rotate(-7deg) scale(.91); }
            62% { opacity:.72; transform:translateY(0) rotate(-7deg) scale(1.08); }
            100% { opacity:.88; transform:translateY(0) rotate(-7deg) scale(1); }
        }
        .results-score { margin:6px 0 10px !important; color:#ffd276 !important; font-size:clamp(54px,13cqw,76px) !important; line-height:.95 !important; letter-spacing:0 !important; text-shadow:0 2px 20px rgba(255,210,118,.4) !important; }
        .result-highlight { margin:15px auto 4px !important; color:#ffd276 !important; font-size:clamp(15px,3.6cqw,20px) !important; line-height:1.25 !important; text-shadow:0 1px 4px rgba(0,0,0,.8) !important; }
        .result-story { margin:6px auto 16px !important; color:rgba(234,224,204,.85) !important; font-size:clamp(13px,3cqw,15px) !important; font-weight:600 !important; line-height:1.5 !important; }
        .result-stats-grid.v18-final { width:100% !important; margin:0 auto 12px !important; gap:6px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; border:none !important; background:transparent !important; }
        .result-stat { min-height:54px !important; padding:8px 6px 6px !important; border:1px solid rgba(226,193,115,.18) !important; border-radius:6px !important; background:rgba(255,255,255,.03) !important; overflow:hidden !important; white-space:nowrap !important; text-overflow:ellipsis !important; }
        .result-stat-value { color:#fdf4de !important; font-size:clamp(15px,3.8cqw,19px) !important; font-weight:700 !important; display:block !important; }
        .result-stat-label { color:rgba(226,193,115,.8) !important; font-family:var(--font-zh-display) !important; font-size:11px !important; letter-spacing:.04em !important; display:block !important; margin-top:3px !important; }
        .result-recap { width:100% !important; margin:0 !important; padding:10px 14px !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:3px !important; border:1px solid rgba(226,193,115,.22) !important; border-radius:8px !important; background:rgba(255,255,255,.025) !important; text-align:center !important; }
        .result-recap-kicker { color:#ffd276 !important; font:700 10px/1.2 var(--font-zh-display) !important; letter-spacing:.14em !important; text-transform:uppercase !important; }
        /* Best / worst / next: same type scale (only color differs). */
        .result-recap-line1,
        .result-recap-line2 {
            color: #fdf4de !important;
            font: 600 clamp(12.5px, 2.8cqw, 14.5px) / 1.4 var(--font-zh-display) !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 100%;
            text-align: center;
        }
        #result-recap-best { color: #f0d79a !important; }
        #result-recap-worst { color: rgba(255, 178, 166, .92) !important; }
        #result-recap-next { color: rgba(234, 224, 204, .88) !important; }
        #result-recap-next {
            color:#ffd276 !important;
            font-size:clamp(14px,3.25cqw,17px) !important;
            font-weight:800 !important;
            margin-top:4px !important;
            text-shadow:0 0 16px rgba(255,210,118,.22);
        }
        .result-recap[data-regret="boss"],
        .result-recap[data-regret="seal"],
        .result-recap[data-regret="case"],
        .result-recap[data-regret="breach"] {
            border-color:rgba(255,210,118,.5) !important;
            background:rgba(139,39,28,.13) !important;
        }
        #combo-display {
            transition:color .18s ease,text-shadow .18s ease,transform .18s ease;
        }
        #combo-display[data-tier="1"] { color:#f0d79a !important; }
        #combo-display[data-tier="2"] { color:#ffd276 !important; text-shadow:0 0 10px rgba(255,210,118,.46) !important; }
        #combo-display[data-tier="3"] { color:#fff1ad !important; text-shadow:0 0 14px rgba(255,210,118,.68) !important; }
        #combo-display[data-tier="4"],
        #combo-display[data-tier="5"] {
            color:#fff7d6 !important;
            text-shadow:0 0 8px #d63b31,0 0 18px rgba(255,210,118,.9) !important;
            transform:scale(1.08);
        }
        .result-analysis-summary { width:100% !important; margin:2px 0 0 !important; padding:0 !important; border:0 !important; background:transparent !important; color:rgba(234,224,204,.7) !important; font:600 10px/1.45 var(--font-zh-display) !important; }
        .result-fail-feedback { width:100% !important; margin:10px 0 0 !important; padding:12px 14px 11px !important; display:none !important; flex-direction:column !important; align-items:flex-start !important; gap:5px !important; border:1px solid rgba(232,111,104,.35) !important; border-radius:8px !important; background:rgba(232,111,104,.08) !important; text-align:left !important; }
        .result-fail-feedback p { width:100% !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; font: 600 clamp(11.5px, 2.5cqw, 13.5px)/1.45 var(--font-zh-serif) !important; color: #fdf4de !important; }
        .fail-feedback-why { color:#ff9e96 !important; font-weight:700 !important; }
        .fail-feedback-stats { color:#ffd276 !important; font-weight:700 !important; }
        .fail-feedback-next { color:rgba(234,224,204,.9) !important; font-weight:600 !important; }
        .result-details-review { display: none !important; }
        @media (max-height:760px){
            .result-fail-feedback { padding:9px 12px 8px !important; gap:3px !important; }
        }
        /* Canonical result actions: revenge owns the first row when available. */
        #results-screen .button-row { width:min(94%,468px) !important; grid-template-columns:1fr 1fr !important; gap:10px !important; padding:0 !important; }
        #results-screen .button-row.has-revenge { grid-template-areas:"revenge revenge" "fresh menu" "share share" !important; }
        #results-screen .button-row:not(.has-revenge) { grid-template-areas:"primary primary" "menu share" !important; }
        #results-screen .button-row.has-revenge #revenge-button { grid-area:revenge !important; }
        #results-screen .button-row.has-revenge #restart-button { grid-area:fresh !important; }
        #results-screen .button-row #rebuild-button { grid-area:menu !important; }
        #results-screen .button-row.has-revenge #share-result-button { grid-area:share !important; }
        #results-screen .button-row:not(.has-revenge) #restart-button { grid-area:primary !important; }
        #results-screen .button-row:not(.has-revenge) #share-result-button { grid-area:share !important; }
        #results-screen .button-row #restart-button.primary-result-cta,
        #results-screen .button-row #revenge-button.primary-result-cta { min-height:54px !important; font-size:20px !important; background:linear-gradient(180deg,#b8332a 0%,#7d1f18 100%) !important; border:1px solid rgba(217,179,107,.75) !important; color:#fdf4de !important; box-shadow:0 6px 20px rgba(130,25,20,.5),inset 0 1px 0 rgba(255,255,255,.2) !important; border-radius:8px !important; }
        #results-screen .button-row #revenge-button.primary-result-cta { animation:revengeBreath 2.4s ease-in-out infinite; }
        #results-screen .button-row #restart-button.primary-result-cta:hover,
        #results-screen .button-row #revenge-button.primary-result-cta:hover { background:linear-gradient(180deg,#c9382b 0%,#9e2a22 100%) !important; box-shadow:0 8px 25px rgba(150,30,25,.7) !important; }
        #results-screen .button-row #restart-button.secondary-result-cta,
        #results-screen .button-row .button.secondary { min-height:44px !important; font-size:13px !important; clip-path:none !important; border-radius:8px !important; background:rgba(255,255,255,.06) !important; border:1px solid rgba(226,193,115,.35) !important; color:#fdf4de !important; box-shadow:none !important; }
        #results-screen .button-row #restart-button.secondary-result-cta:hover,
        #results-screen .button-row .button.secondary:hover { background:rgba(255,255,255,.12) !important; border-color:rgba(226,193,115,.55) !important; }
        @keyframes revengeBreath {
            0%,100% { box-shadow:0 6px 20px rgba(130,25,20,.45),inset 0 1px 0 rgba(255,255,255,.18); filter:brightness(1); }
            50% { box-shadow:0 8px 27px rgba(180,45,30,.66),0 0 16px rgba(217,179,107,.16),inset 0 1px 0 rgba(255,255,255,.24); filter:brightness(1.06); }
        }
        @media (prefers-reduced-motion:reduce) {
            #results-screen .button-row #revenge-button.primary-result-cta { animation:none; }
        }
        .share-fallback-modal { padding:8px !important; }
        .share-fallback-card { width:min(96vw,500px) !important; height:min(98dvh,780px) !important; max-height:98dvh !important; border:1px solid rgba(211,176,101,.28) !important; border-radius:12px !important; background:#100e0c !important; }
        .share-fallback-card h3,.share-fallback-card>p { display:none !important; }
        #share-card-open { min-height:0 !important; padding:8px 8px 0 !important; background:radial-gradient(circle at 50% 5%,rgba(205,170,100,.10),transparent 36%),#080706 !important; }
        #share-card-preview { width:auto !important; height:100% !important; max-width:100% !important; max-height:100% !important; aspect-ratio:4/5 !important; object-fit:contain !important; border-radius:4px !important; box-shadow:0 12px 36px rgba(0,0,0,.48) !important; }
        #share-code-preview,#share-fallback-text { display:none !important; }
        #share-action-status { min-height:20px !important; padding:3px 8px !important; }
        .share-fallback-actions.three { padding:7px !important; gap:6px !important; }
        .share-fallback-actions button { min-height:42px !important; font-size:12px !important; }
        @media (max-height:760px){
            #personal-results{padding:16px 17px 14px !important;}
            .result-kicker{margin-bottom:4px !important;}
            .results-score{font-size:52px !important;margin:5px 0 8px !important;}
            .result-highlight{margin-top:12px !important;}
            .result-story{margin-bottom:8px !important;}
            .result-stat{min-height:60px !important;padding:8px 3px 7px !important;}
            .result-next-goal{padding:9px 12px 8px !important;}
            #results-screen .button-row #restart-button{min-height:48px !important;}
        }

        /* ==========================================================================
           WUXIA VISUAL UNIFICATION - MAIN MENU (100% FAITHFUL TO IMAGE 2)
           ========================================================================== */
        #menu-screen {
            background-color: #080807 !important;
            background-image: none !important;
            overflow: hidden !important;
            position: relative !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: space-between !important;
            align-items: center !important;
            width: 100% !important;
            height: 100% !important;
        }
        #menu-screen::before, #menu-screen::after {
            display: none !important;
        }

        /* --- Wuxia Background Layers --- */
        .wuxia-bg-layer {
            position: absolute !important;
            inset: 0 !important;
            pointer-events: none !important;
            width: 100% !important;
            height: 100% !important;
        }
        .wuxia-bg-base {
            z-index: 1 !important;
            background: linear-gradient(180deg, rgba(8,8,7,.30) 0%, rgba(6,6,5,.15) 35%, rgba(5,5,4,.55) 72%, rgba(3,3,3,.95) 100%) !important;
            background-size: cover !important;
            background-position: center !important;
        }
        .wuxia-bg-vignette {
            z-index: 5 !important;
            box-shadow: inset 0 0 120px rgba(0,0,0,0.85) !important;
        }

        /* --- Top Identity Bar --- */
        #menu-screen .wuxia-top-bar {
            position: absolute !important;
            top: 16px !important;
            left: 24px !important;
            z-index: 100 !important;
            display: flex !important;
            align-items: center !important;
        }
        .wuxia-identity {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            background: rgba(18, 16, 14, 0.75) !important;
            border: 1px solid rgba(217, 179, 107, 0.35) !important;
            padding: 6px 16px 6px 8px !important;
            border-radius: 22px !important;
            cursor: pointer !important;
            transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important;
            backdrop-filter: blur(8px) !important;
            -webkit-backdrop-filter: blur(8px) !important;
        }
        .wuxia-identity:hover {
            background: rgba(28, 25, 21, 0.9) !important;
            border-color: rgba(217, 179, 107, 0.7) !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 6px 20px rgba(0,0,0,0.8), 0 0 15px rgba(217, 179, 107, 0.2) !important;
        }
        .wuxia-identity-emblem {
            width: 30px !important;
            height: 30px !important;
            border-radius: 50% !important;
            background: linear-gradient(135deg, #b8332a, #7d1f18) !important;
            border: 1.5px solid #e1bc6a !important;
            color: #fefcf5 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 15px !important;
            font-weight: bold !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.7) !important;
            font-family: var(--font-title, "Noto Serif SC", serif) !important;
        }
        .wuxia-identity-name {
            color: #fefcf5 !important;
            font-size: 16px !important;
            font-weight: 600 !important;
            letter-spacing: 1px !important;
        }
        .wuxia-identity-score {
            color: #d1aa58 !important;
            font-size: 14px !important;
            padding-left: 10px !important;
            border-left: 1px solid rgba(217, 179, 107, 0.3) !important;
            letter-spacing: 0.5px !important;
            font-family: var(--font-number, monospace) !important;
        }

        /* --- Main Content (Center) --- */
        .wuxia-menu-content {
            position: relative !important;
            z-index: 10 !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important;
            width: 100% !important;
            max-width: 800px !important;
            margin: auto 0 !important;
            padding: 20px !important;
        }
        .wuxia-menu-hero {
            position: relative !important;
            z-index: 10 !important;
            text-align: center !important;
            margin-top: clamp(10px, 2vh, 30px) !important;
            margin-bottom: clamp(20px, 4vh, 40px) !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
        }
        .wuxia-title-box {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            position: relative !important;
        }
        .wuxia-title {
            font-size: clamp(52px, 12vw, 88px) !important;
            line-height: 1.1 !important;
            font-weight: 800 !important;
            color: #fefcf5 !important;
            letter-spacing: 6px !important;
            text-shadow: 0 4px 20px rgba(0,0,0,0.9), 0 0 45px rgba(225, 188, 106, 0.5) !important;
            margin: 0 !important;
            font-family: var(--font-title, "Noto Serif SC", "STSong", serif) !important;
        }
        .title-seal {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: clamp(34px, 6vw, 46px) !important;
            height: clamp(34px, 6vw, 46px) !important;
            background: linear-gradient(135deg, #c9382b, #8a1f17) !important;
            border: 2px solid #f6f1e7 !important;
            color: #f6f1e7 !important;
            font-size: clamp(15px, 2.5vw, 19px) !important;
            font-weight: bold !important;
            line-height: 1.1 !important;
            text-align: center !important;
            border-radius: 6px !important;
            box-shadow: 0 3px 12px rgba(0,0,0,0.8), inset 0 0 4px rgba(0,0,0,0.4) !important;
            margin-left: 14px !important;
            transform: rotate(4deg) !important;
            letter-spacing: 1px !important;
            font-family: var(--font-title, "Noto Serif SC", serif) !important;
            vertical-align: middle !important;
        }
        .wuxia-subtitle {
            font-size: clamp(16px, 3vw, 22px) !important;
            color: rgba(246, 241, 231, 0.85) !important;
            letter-spacing: 3px !important;
            margin-top: 16px !important;
            margin-bottom: 0 !important;
            text-shadow: 0 2px 10px rgba(0,0,0,0.9) !important;
            font-family: var(--font-body, "Noto Serif SC", serif) !important;
        }

        /* --- Difficulty Picker (3 Side-by-Side Cards) --- */
        .wuxia-difficulty-picker {
            position: relative !important;
            z-index: 10 !important;
            display: flex !important;
            flex-direction: row !important;
            justify-content: center !important;
            align-items: stretch !important;
            gap: clamp(12px, 3vw, 24px) !important;
            width: 100% !important;
            max-width: 540px !important;
            margin: 0 auto clamp(24px, 5vh, 48px) !important;
            padding: 0 !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }
        .wuxia-diff-btn {
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 16px 12px 14px !important;
            background: rgba(18, 16, 14, 0.65) !important;
            border: 1px solid rgba(217, 179, 107, 0.25) !important;
            border-radius: 14px !important;
            cursor: pointer !important;
            transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
            position: relative !important;
            overflow: hidden !important;
            backdrop-filter: blur(6px) !important;
            -webkit-backdrop-filter: blur(6px) !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
        }
        .wuxia-diff-btn::before {
            content: '' !important;
            position: absolute !important;
            inset: 0 !important;
            background: radial-gradient(circle at center, rgba(225, 188, 106, 0.15), transparent 70%) !important;
            opacity: 0 !important;
            transition: opacity 0.25s ease !important;
        }
        .wuxia-diff-btn:hover {
            background: rgba(28, 25, 21, 0.85) !important;
            border-color: rgba(217, 179, 107, 0.6) !important;
            transform: translateY(-3px) !important;
            box-shadow: 0 8px 25px rgba(0,0,0,0.7), 0 0 15px rgba(217, 179, 107, 0.2) !important;
        }
        .wuxia-diff-btn:hover::before {
            opacity: 1 !important;
        }
        .wuxia-diff-btn.active {
            background: linear-gradient(180deg, rgba(38, 33, 25, 0.95) 0%, rgba(22, 19, 14, 0.95) 100%) !important;
            border: 1.5px solid #e1bc6a !important;
            box-shadow: 0 8px 25px rgba(0,0,0,0.8), 0 0 30px rgba(225, 188, 106, 0.35) !important;
            transform: translateY(-4px) !important;
        }
        .wuxia-diff-btn.active::after {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            width: 45% !important;
            height: 2.5px !important;
            background: #e1bc6a !important;
            box-shadow: 0 0 12px #e1bc6a !important;
        }
        .diff-icon {
            width: 40px !important;
            height: 40px !important;
            margin-bottom: 10px !important;
            background-size: contain !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            filter: drop-shadow(0 2px 5px rgba(0,0,0,0.8)) !important;
            transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
        }
        .wuxia-diff-btn.active .diff-icon {
            transform: scale(1.15) !important;
        }
        .diff-icon-easy { background-image: url("../assets/images/seals/seal_swift.png") !important; }
        .diff-icon-normal { background-image: url("../assets/images/seals/seal_guard.png") !important; }
        .diff-icon-hell { background-image: url("../assets/images/seals/seal_break.png") !important; }
        .diff-label-zh {
            color: #fefcf5 !important;
            font-size: clamp(16px, 2.5vw, 20px) !important;
            font-weight: bold !important;
            letter-spacing: 2px !important;
            line-height: 1.2 !important;
            font-family: var(--font-title, "Noto Serif SC", serif) !important;
        }
        .wuxia-diff-btn.active .diff-label-zh {
            color: #e1bc6a !important;
            text-shadow: 0 0 12px rgba(225, 188, 106, 0.6) !important;
        }
        .diff-label-en {
            color: rgba(246, 241, 231, 0.55) !important;
            font-size: 11px !important;
            letter-spacing: 1.5px !important;
            margin-top: 4px !important;
            font-family: "Source Sans 3", sans-serif !important;
            text-transform: uppercase !important;
        }
        .wuxia-diff-btn.active .diff-label-en {
            color: rgba(225, 188, 106, 0.85) !important;
        }

        /* --- Main Action Button --- */
        .wuxia-menu-actions {
            position: relative !important;
            z-index: 10 !important;
            display: flex !important;
            justify-content: center !important;
            width: 100% !important;
            margin-bottom: clamp(20px, 4vh, 40px) !important;
        }
        .wuxia-start-btn {
            width: min(85%, 380px) !important;
            min-height: clamp(64px, 8vh, 80px) !important;
            background: none !important;
            background-color: transparent !important;
            border: none !important;
            color: #fefcf5 !important;
            font-size: clamp(26px, 5vw, 34px) !important;
            font-weight: 800 !important;
            letter-spacing: 8px !important;
            text-shadow: 0 3px 8px rgba(0,0,0,0.9), 0 0 20px rgba(225, 188, 106, 0.4) !important;
            cursor: pointer !important;
            transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding-bottom: 6px !important;
            box-shadow: 0 10px 30px rgba(184, 51, 42, 0.45), 0 0 45px rgba(0,0,0,0.8) !important;
            position: relative !important;
            font-family: var(--font-title, "Noto Serif SC", serif) !important;
        }
        .wuxia-start-btn:hover {
            transform: scale(1.05) translateY(-3px) !important;
            filter: brightness(1.15) !important;
            box-shadow: 0 14px 40px rgba(184, 51, 42, 0.65), 0 0 60px rgba(225, 188, 106, 0.5) !important;
        }
        .wuxia-start-btn:active {
            transform: scale(0.98) !important;
        }

        /* --- Bottom Navigation Bar --- */
        .wuxia-bottom-nav {
            position: relative !important;
            width: 100% !important;
            z-index: 10 !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            gap: clamp(16px, 4vw, 48px) !important;
            padding: 16px 24px clamp(20px, 3vh, 32px) !important;
            background: linear-gradient(0deg, rgba(8,8,7,0.95) 0%, rgba(8,8,7,0.7) 60%, transparent 100%) !important;
            border-top: 1px solid rgba(217, 179, 107, 0.15) !important;
        }
        .wuxia-nav-btn {
            background: transparent !important;
            border: 1px solid transparent !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            color: rgba(246, 241, 231, 0.8) !important;
            font-size: clamp(15px, 2.5vw, 18px) !important;
            cursor: pointer !important;
            padding: 8px 18px !important;
            border-radius: 22px !important;
            transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
            box-shadow: none !important;
            font-family: var(--font-body, "Noto Serif SC", serif) !important;
        }
        .wuxia-nav-btn:hover {
            color: #e1bc6a !important;
            background: rgba(217, 179, 107, 0.12) !important;
            border-color: rgba(217, 179, 107, 0.35) !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
        }
        .wuxia-nav-icon {
            font-size: 20px !important;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)) !important;
        }
        .wuxia-nav-text {
            font-weight: 600 !important;
            letter-spacing: 1px !important;
        }

        /* ═══════════════════════════════════════════════════════════════
           MAIN MENU PNG V1 — final component assembly
           ═══════════════════════════════════════════════════════════════ */

        /* Neutralize old menu elements when PNG v1 is active */
        #menu-screen.menu-png-v1 .wuxia-bg-layer,
        #menu-screen.menu-png-v1 .wuxia-bg-base,
        #menu-screen.menu-png-v1 .wuxia-bg-boss-shadow,
        #menu-screen.menu-png-v1 .wuxia-bg-swordsman,
        #menu-screen.menu-png-v1 .wuxia-bg-sword-trace,
        #menu-screen.menu-png-v1 .wuxia-bg-vignette,
        #menu-screen.menu-png-v1 .wuxia-top-bar,
        #menu-screen.menu-png-v1 .screen-content,
        #menu-screen.menu-png-v1 .menu-hero,
        #menu-screen.menu-png-v1 .menu-kicker,
        #menu-screen.menu-png-v1 .wuxia-title-box,
        #menu-screen.menu-png-v1 .title,
        #menu-screen.menu-png-v1 .subtitle,
        #menu-screen.menu-png-v1 .daily-challenge-badge,
        #menu-screen.menu-png-v1 .menu-actions,
        #menu-screen.menu-png-v1 .wuxia-bottom-nav,
        #menu-screen.menu-png-v1 .wuxia-nav-btn,
        #menu-screen.menu-png-v1 .wuxia-start-btn,
        #menu-screen.menu-png-v1 .wuxia-menu-content,
        #menu-screen.menu-png-v1 .wuxia-menu-hero,
        #menu-screen.menu-png-v1 .wuxia-difficulty-picker,
        #menu-screen.menu-png-v1 .wuxia-diff-btn,
        #menu-screen.menu-png-v1 .wuxia-menu-actions { display: none !important; }

        #menu-screen.menu-png-v1 .screen-content { display: none !important; }

        /* ── PNG Frame Container ── */
        #menu-screen.menu-png-v1 {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #0a0907;
        }
        #menu-screen.menu-png-v1::before { display: none; }
        /* Interactive 9:16 frame is sized against this inset box, not the
           unsafe visual viewport. Shell fill still paints under the notch. */
        .menu-safe-host {
            position: absolute;
            top: var(--osl-safe-top);
            right: var(--osl-safe-right);
            bottom: var(--osl-safe-bottom);
            left: var(--osl-safe-left);
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            container-type: size;
            container-name: menuhost;
            pointer-events: none;
        }
        /* Tall-phone / letterbox continuation. Same menu artwork, cover-fitted
           to the shell. The 9:16 interactive frame is never stretched. */
        .menu-shell-fill {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
            background: #0a0907;
        }
        .menu-shell-fill-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 42%;
            filter: saturate(.8) contrast(1.06) brightness(.88);
            display: block;
            pointer-events: none;
        }
        .menu-shell-fill::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(180deg, rgba(8,7,6,.10), transparent 16%, transparent 84%, rgba(8,7,6,.18)),
                radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(4,3,3,.22) 100%);
        }
        #game-world[data-screen="menu"] {
            background: #0a0907;
            /* The menu is allowed to fill the whole visible box (no letterbox void on
               tall phones); gameplay caps at 960px. That difference means the shell
               resizes with no viewport event, so the canvas is re-measured from a
               ResizeObserver on #game-world rather than from window resize alone. */
            max-height: var(--osl-vvh);
        }

        /* The menu is laid out in container units (cqw/cqh) relative to this
           frame, never in vw/vh. The frame MUST stay 9:16 and letterbox inside
           a non-portrait host (CrazyGames 16:9 iframe). Stretching it to the
           parent made painted art and hitboxes miss. */
        .menu-png-frame {
            container-type: size;
            container-name: menuframe;
            position: relative;
            z-index: 1;
            aspect-ratio: 9 / 16;
            width: min(100%, calc(100cqh * 9 / 16));
            height: min(100%, calc(100cqw * 16 / 9));
            max-width: min(520px, 100%);
            max-height: 100%;
            overflow: hidden;
            isolation: isolate;
            background: #0a0907;
            border-inline: 1px solid rgba(181, 145, 76, .18);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 0 42px rgba(0,0,0,.72);
            /* Decor only — never intercept clicks meant for .menu-hitbox (playtest intercept). */
            pointer-events: none;
        }
        .menu-png-frame .menu-name-wrap,
        .menu-png-frame .menu-setting-wrap,
        .menu-png-frame .menu-difficulty-wrap,
        .menu-png-frame .menu-start-wrap,
        .menu-png-frame .menu-tribulation-wrap,
        .menu-png-frame .menu-bottom-wrap {
            pointer-events: none;
        }
        .menu-png-frame .menu-hitbox {
            pointer-events: auto !important;
            z-index: 30 !important;
        }
        /* Popovers / dialogs nested under the PNG frame must still receive clicks. */
        .menu-png-frame #menu-settings-popover,
        .menu-png-frame #menu-settings-popover *,
        .menu-png-frame .skill-modal-shell,
        .menu-png-frame .pk-modal-card {
            pointer-events: auto !important;
        }

        /* ── Background & ambient depth stack ──────────────────────────────
           The menu used to be one flat photo with PNGs pasted on top — no
           light, no depth, no motion. The same artwork is now drawn three
           times (far / mid / near) at different scale, blur and brightness to
           build parallax depth, then lit by a breathing moon, separated by two
           drifting fog bands, and finished with a paper grain + vignette.
           All decorative layers are inert: pointer-events none, aria-hidden. */
        .menu-fx {
            position: absolute;
            inset: 0;
            pointer-events: none;
            user-select: none;
            overflow: hidden;
            will-change: transform;
        }
        .menu-fx img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .menu-fx-far { z-index: 0; }
        .menu-fx-far img {
            transform: scale(1.14);
            filter: blur(3px) saturate(.5) brightness(.62);
        }
        .menu-fx-mid { z-index: 1; }
        /* .menu-png-bg is the canonical background image (asset tests assert it). */
        .menu-png-bg {
            transform: scale(1.03);
            filter: saturate(.8) contrast(1.06) brightness(.9);
            -webkit-mask-image: radial-gradient(ellipse 92% 86% at 50% 50%, #000 62%, transparent 100%);
                    mask-image: radial-gradient(ellipse 92% 86% at 50% 50%, #000 62%, transparent 100%);
        }
        /* Foreground only darkens the very bottom edge; it must not eat the
           swordsman baked into the artwork at x 18–32% / y 76–92%. */
        .menu-fx-near { z-index: 2; }
        .menu-fx-near img {
            transform: scale(1.26) translateY(6%);
            filter: blur(7px) brightness(.5) saturate(.4);
            opacity: .7;
            -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 15%);
                    mask-image: linear-gradient(to top, #000 0%, transparent 15%);
        }
        /* The moon is the scene's only light source — give it a pulse. */
        .menu-fx-moon {
            z-index: 1;
            background: radial-gradient(circle 26% at 50% 13%,
                rgba(255,241,206,.42), rgba(255,232,180,.13) 42%, transparent 72%);
            mix-blend-mode: screen;
            animation: menuMoonBreathe 11s ease-in-out infinite;
        }
        @keyframes menuMoonBreathe {
            0%, 100% { opacity: .72; transform: scale(1); }
            50%      { opacity: 1;   transform: scale(1.06); }
        }
        .menu-fx-fog {
            z-index: 1;
            background: radial-gradient(ellipse 70% 26% at 50% 62%, rgba(190,200,205,.13), transparent 70%);
            animation: menuFogDrift 26s ease-in-out infinite;
        }
        .menu-fx-fog2 {
            z-index: 1;
            background: radial-gradient(ellipse 90% 20% at 42% 76%, rgba(170,185,195,.10), transparent 72%);
            animation: menuFogDrift 34s ease-in-out infinite reverse;
        }
        @keyframes menuFogDrift {
            0%, 100% { transform: translateX(-3%); }
            50%      { transform: translateX(3%); }
        }
        /* Falling ash / bamboo motes. CSS keyframes rather than a canvas rAF
           loop: the menu must not run a permanent frame loop. */
        .menu-fx-motes { z-index: 3; }
        .menu-mote {
            position: absolute;
            top: -6px;
            border-radius: 50%;
            background: rgba(232,214,172,.9);
            will-change: transform;
            animation-name: menuMoteFall, menuMoteSway;
            animation-timing-function: linear, ease-in-out;
            animation-iteration-count: infinite, infinite;
        }
        @keyframes menuMoteFall {
            from { transform: translateY(0); }
            to   { transform: translateY(calc(100% + 780px)); }
        }
        @keyframes menuMoteSway {
            0%, 100% { margin-left: -7px; }
            50%      { margin-left: 7px; }
        }
        /* Paper grain: the cheapest single trick for a "crafted" surface. */
        .menu-fx-paper {
            z-index: 3;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.5'/></svg>");
            mix-blend-mode: overlay;
            opacity: .16;
        }
        .menu-fx-vignette {
            z-index: 3;
            background: radial-gradient(ellipse 88% 80% at 50% 46%, transparent 54%, rgba(6,5,4,.6) 100%);
        }
        @media (prefers-reduced-motion: reduce) {
            .menu-fx-moon, .menu-fx-fog, .menu-fx-fog2 { animation: none; }
            .menu-fx-motes { display: none; }
        }

        /* ── All overlay images ── */
        .menu-png-frame > img,
        .menu-png-frame .menu-name-img,
        .menu-png-frame .menu-setting-img,
        .menu-png-frame .menu-title-img,
        .menu-png-frame .menu-start-img,
        .menu-png-frame .menu-bottom-img {
            pointer-events: none;
            user-select: none;
            display: block;
            background: transparent;
        }

        /* ── Name Plate Area (upper-left) ── */
        .menu-name-wrap {
            position: absolute;
            top: clamp(10px, 1.6vh, 18px);
            left: clamp(10px, 2vw, 16px);
            z-index: 5;
            width: clamp(210px, 51vw, 250px);
            height: clamp(44px, 6.2vh, 58px);
            background: transparent;
        }
        .menu-name-wrap::after {
            content: '';
            position: absolute;
            left: 18%;
            right: 4%;
            bottom: 4%;
            height: 1px;
            background: linear-gradient(90deg, rgba(219,190,124,.36), transparent 92%);
            pointer-events: none;
        }
        .menu-name-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: left center;
            pointer-events: none;
            user-select: none;
            z-index: 0;
        }
        .menu-name-text {
            position: absolute;
            top: 14%;
            left: 20%;
            right: 4%;
            bottom: 50%;
            display: flex;
            align-items: center;
            color: #f5ecd5;
            font-family: "Noto Serif SC", "Cinzel", serif;
            font-size: clamp(10px, 2.1vw, 13px);
            font-weight: 700;
            text-shadow: 0 1px 4px rgba(0,0,0,.8);
            pointer-events: none;
            user-select: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            z-index: 1;
        }
        .menu-png-frame[data-menu-lang="en"] .menu-name-text {
            font-size: clamp(10px, 1.8vw, 13px);
            letter-spacing: 0;
        }
        .menu-best-score-text {
            position: absolute;
            top: 54%;
            left: 20%;
            right: 4%;
            bottom: 8%;
            display: flex;
            align-items: center;
            color: rgba(245,236,213,.75);
            font-family: "Source Sans 3", "Noto Serif SC", sans-serif;
            font-size: clamp(8px, 1.8vw, 11px);
            font-weight: 600;
            text-shadow: 0 1px 3px rgba(0,0,0,.7);
            pointer-events: none;
            user-select: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            z-index: 1;
        }
        .menu-name-input {
            position: absolute;
            top: 12%;
            left: 19%;
            right: 4%;
            bottom: 48%;
            display: none;
            border: 1px solid rgba(209,170,88,.6);
            border-bottom: 2px solid rgba(169,52,45,.7);
            border-radius: 3px;
            background: rgba(20,16,12,.92);
            color: #f5ecd5;
            font-family: "Noto Serif SC", "Cinzel", serif;
            font-size: clamp(11px, 2.4vw, 14px);
            font-weight: 600;
            text-align: center;
            outline: none;
            z-index: 3;
            padding: 2px 6px;
            caret-color: #d1aa58;
        }
        .menu-name-input:focus { border-color: rgba(240,215,154,.85); box-shadow: 0 0 8px rgba(209,170,88,.25); }

        /* ── Settings Strip (upper-right) ── */
        .menu-setting-wrap {
            position: absolute;
            top: clamp(9px, 1.4vh, 15px);
            right: clamp(10px, 2vw, 16px);
            z-index: 5;
            width: clamp(88px, 19vw, 104px);
            height: clamp(26px, 3.8vh, 32px);
            background: transparent;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            align-items: center;
            justify-items: center;
            gap: 5px;
        }
        .menu-setting-icon-box {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            user-select: none;
        }
        /* Clean vector glyphs: centered, uniform. No crop/scale hacks needed. */
        .menu-setting-icon {
            --menu-icon-scale-x: 1;
            --menu-icon-scale-y: 1;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 64%;
            height: 64%;
            object-fit: contain;
            object-position: center;
            transform: translate(-50%, -50%) scale(var(--menu-icon-scale-x), var(--menu-icon-scale-y));
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
            pointer-events: none;
            user-select: none;
            z-index: 1;
        }
        /* Per-glyph optical balance (settings gear reads heavier than speaker). */
        .menu-audio-img    { --menu-icon-scale-x: 1.02; --menu-icon-scale-y: 1.02; }
        .menu-language-img { --menu-icon-scale-x: 1.0;  --menu-icon-scale-y: 1.0;  }
        .menu-settings-img { --menu-icon-scale-x: .92;  --menu-icon-scale-y: .92;  }
        .menu-muted-indicator { display: none !important; }

        /* ── Title Image (upper-middle) ── */
        /* Sits just below the demon silhouette baked into the artwork's upper
           third, so the boss reads instead of being covered by the wordmark. */
        .menu-title-img {
            position: absolute;
            top: 19cqh;
            left: 50%;
            transform: translateX(-50%);
            width: 88cqw;
            max-width: 96%;
            height: auto;
            aspect-ratio: auto;
            object-fit: contain;
            pointer-events: none;
            user-select: none;
            z-index: 4;
            filter: saturate(.9) contrast(1.06)
                drop-shadow(0 3px 16px rgba(0,0,0,.75))
                drop-shadow(0 0 22px rgba(255,222,160,.14));
        }

        /* ── Entrance choreography ──────────────────────────────────────────
           Staggered so the menu is written rather than pasted. Purely additive:
           every element's final state is its normal layout, so a skipped or
           disabled animation leaves the menu fully usable. */
        .menu-png-frame .menu-name-wrap,
        .menu-png-frame .menu-setting-wrap,
        .menu-png-frame .menu-title-img,
        .menu-png-frame .menu-difficulty-wrap,
        .menu-png-frame .menu-start-wrap,
        .menu-png-frame .menu-tribulation-wrap,
        .menu-png-frame .menu-bottom-wrap {
            animation: menuRise 900ms cubic-bezier(.16,.84,.3,1) both;
        }
        .menu-png-frame .menu-name-wrap    { animation-delay: 150ms; }
        .menu-png-frame .menu-setting-wrap { animation-delay: 150ms; }
        .menu-png-frame .menu-title-img    { animation-delay: 300ms; }
        .menu-png-frame .menu-difficulty-wrap { animation-delay: 750ms; }
        .menu-png-frame .menu-start-wrap   { animation-delay: 950ms; }
        .menu-png-frame .menu-tribulation-wrap { animation-delay: 1100ms; }
        .menu-png-frame .menu-bottom-wrap  { animation-delay: 1250ms; }
        /* These two are centred with translateX; keep it inside the keyframes
           or the animation would clobber the centring. */
        @keyframes menuRise {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        @media (prefers-reduced-motion: reduce) {
            .menu-png-frame .menu-name-wrap,
            .menu-png-frame .menu-setting-wrap,
            .menu-png-frame .menu-title-img,
            .menu-png-frame .menu-difficulty-wrap,
            .menu-png-frame .menu-start-wrap,
            .menu-png-frame .menu-tribulation-wrap,
            .menu-png-frame .menu-bottom-wrap { animation: none; }
        }

        /* ── Difficulty Strip (middle) ── */
        .menu-difficulty-wrap {
            position: absolute;
            top: 56cqh;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 88cqw;
            max-width: 92%;
            height: 15cqh;
            z-index: 5;
            background: transparent;
        }
        /* Single-focus carousel: all three labels are stacked in the same box
           and only the selected one is shown. Three equal-weight columns gave
           the difficulties no visual hierarchy — one large name at a time can
           carry real typographic weight, and the arrows/dots make the other
           options discoverable without competing for attention. */
        .menu-diff-labels {
            position: absolute;
            inset: 0 14cqw 4.6cqh;
            display: grid;
            z-index: 4;
            pointer-events: none;
        }
        /* Difficulty reads as ink on the scene, not as three pasted plates.
           Unselected stays legible (it used to be crushed to near-black over a
           dark photo); selection is carried by a brush stroke + a seal, both
           drawn in CSS, so nothing depends on per-language artwork. */
        /* Every label occupies the same cell; the inactive ones fade out. */
        .menu-diff-label {
            grid-area: 1 / 1;
            position: relative;
            display: grid;
            grid-template-rows: auto auto auto;
            justify-items: center;
            align-content: center;
            gap: .5cqh;
            width: 100%;
            min-width: 0;
            color: #f0e2c2;
            font-family: "Noto Serif SC", "Cinzel", serif;
            text-shadow: 0 2px 10px rgba(0,0,0,.95), 0 0 22px rgba(0,0,0,.75);
            opacity: 0;
            transform: scale(.94);
            pointer-events: none;
            transition: opacity 300ms ease, transform 380ms cubic-bezier(.2,.9,.3,1);
        }
        /* The seal is redundant now that only the selected difficulty is shown
           at all — selection no longer needs a third signal. Kept in the DOM
           (menuUI localises it) but not rendered. */
        .menu-diff-label .seal { display: none; }
        /* Brush stroke under the selected label. Shape comes from a generated
           alpha asset (tools/gen_brush_stroke.py) used as a mask, so the colour
           stays CSS-controlled and the same file can be reused elsewhere. */
        /* Flows as its own grid row between the name and its subtitle, so it
           reads as a stroke laid under that word. Absolutely positioning it
           made it collide with the subtitle instead. */
        .menu-diff-label .stroke {
            grid-row: 2;
            justify-self: center;
            width: 0;
            height: 1.7cqh;
            background: linear-gradient(90deg, #6d1a15 0%, #c8352a 42%, #a82a20 70%, #7d1f19 100%);
            -webkit-mask-image: url('../assets/images/ui/menu/brush_stroke.png');
                    mask-image: url('../assets/images/ui/menu/brush_stroke.png');
            -webkit-mask-size: 100% 100%;
                    mask-size: 100% 100%;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            opacity: 0;
            transition: width 420ms cubic-bezier(.2,.9,.3,1), opacity 300ms ease;
        }
        .menu-diff-label > * {
            position: relative;
            z-index: 1;
        }
        .menu-diff-label::marker { content: ''; }
        .menu-diff-label::selection { background: transparent; }
        .menu-diff-label .main::before {
            display: none;
        }
        .menu-diff-label .main {
            grid-row: 1;
            font-size: 9.4cqw;
            font-weight: 800;
            line-height: 1;
            white-space: nowrap;
            letter-spacing: .1em;
            text-indent: .1em;
        }
        .menu-diff-label .sub {
            grid-row: 3;
            font: 650 2.6cqw/1 "Noto Serif SC", "Cinzel", serif;
            letter-spacing: .34em;
            text-indent: .34em;
            white-space: nowrap;
            color: #a2977f;
            text-shadow: 0 1px 5px rgba(0,0,0,.95);
            transition: color 260ms ease;
        }
        .menu-png-frame[data-difficulty="easy"] .menu-diff-label[data-difficulty="easy"],
        .menu-png-frame[data-difficulty="normal"] .menu-diff-label[data-difficulty="normal"],
        .menu-png-frame[data-difficulty="hell"] .menu-diff-label[data-difficulty="hell"] {
            opacity: 1;
            transform: scale(1);
        }
        .menu-png-frame[data-difficulty="easy"] .menu-diff-label[data-difficulty="easy"] .stroke,
        .menu-png-frame[data-difficulty="normal"] .menu-diff-label[data-difficulty="normal"] .stroke,
        .menu-png-frame[data-difficulty="hell"] .menu-diff-label[data-difficulty="hell"] .stroke {
            width: 62%;
            opacity: 1;
        }

        /* ── Carousel arrows ── */
        .menu-diff-arrow {
            position: absolute;
            top: 50%;
            width: 11cqw;
            height: 11cqw;
            transform: translateY(-62%);
            display: grid;
            place-items: center;
            border: 0;
            background: transparent;
            color: rgba(196,176,134,.6);
            font: 400 7cqw/1 "Cinzel", Georgia, serif;
            cursor: pointer;
            z-index: 31;
            pointer-events: auto;
            text-shadow: 0 1px 6px rgba(0,0,0,.9);
            transition: color 200ms ease, transform 200ms ease;
        }
        .menu-diff-prev { left: 0; }
        .menu-diff-next { right: 0; }
        .menu-diff-arrow:hover { color: #f0dcae; }
        .menu-diff-prev:hover { transform: translate(-2px, -62%); }
        .menu-diff-next:hover { transform: translate(2px, -62%); }
        .menu-diff-arrow:focus-visible { outline: 2px solid rgba(209,170,88,.5); outline-offset: 2px; }
        .menu-diff-arrow:disabled {
            color: rgba(150,134,104,.22);
            cursor: default;
            pointer-events: none;
        }
        /* Blood Moon is the top difficulty: it reads red even when unselected,
           so the danger is legible before you commit to it. */
        .menu-diff-label[data-difficulty="hell"] { color: #c4544a; }
        .menu-diff-label[data-difficulty="hell"] .sub { color: #b5695f; }
        .menu-png-frame[data-difficulty="hell"] .menu-diff-label[data-difficulty="hell"] {
            color: #ff6a58;
            text-shadow: 0 0 18px rgba(216,56,42,.62), 0 1px 5px rgba(0,0,0,.9);
        }
        .menu-png-frame[data-difficulty="hell"] .menu-diff-label[data-difficulty="hell"] .sub {
            color: #d4776a;
        }
        .menu-png-frame[data-difficulty="hell"] .menu-diff-label[data-difficulty="hell"] .stroke {
            background: linear-gradient(90deg, #5d120e 0%, #d8382a 42%, #b02218 70%, #6d1a15 100%);
        }
        .menu-png-frame[data-menu-lang="en"] .menu-diff-label .main {
            font-family: "Cinzel", Georgia, serif;
            font-size: clamp(14px, 3vw, 18px);
            font-weight: 700;
            letter-spacing: .035em;
        }
        .menu-png-frame[data-menu-lang="en"] .menu-diff-label .sub {
            font-family: "Source Sans 3", Arial, sans-serif;
            font-weight: 650;
            letter-spacing: .08em;
        }

        /* ── Start Button Area (lower-middle) ── */
        .menu-start-wrap {
            position: absolute;
            top: 67cqh;
            bottom: auto;
            left: 50%;
            transform: translateX(-50%);
            width: 62cqw;
            max-width: 88%;
            height: 11cqh;
            z-index: 5;
            background: transparent;
        }
        .menu-start-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            pointer-events: none;
            user-select: none;
            z-index: 0;
            transition: filter 200ms ease, transform 200ms ease;
            filter: saturate(.74) contrast(1.08) brightness(.94) drop-shadow(0 5px 8px rgba(0,0,0,.46));
        }

        .menu-tribulation-wrap {
            position: absolute;
            top: 80cqh;
            left: 50%;
            width: 66cqw;
            transform: translateX(-50%);
            z-index: 7;
            pointer-events: auto !important;
        }
        /* Tribulation reads as ink on the scene, matching the difficulty row.
           The old version stretched tribulation_bloodmoon_v2.png to 170% height
           behind a clip-path box, which rendered as a grey blob — especially in
           the locked state that every new player sees. No box, no stretched
           art: text, a hairline rule either side, and a blood underline that
           only appears once the mode is actually unlocked. */
        .menu-tribulation-button {
            position: relative;
            width: 100%;
            display: grid;
            grid-template-rows: auto auto;
            align-content: center;
            justify-items: center;
            gap: 3px;
            padding: 6px 0 9px;
            border: 0;
            background: transparent;
            box-shadow: none;
            color: #a99a7c;
            text-shadow: 0 1px 6px rgba(0,0,0,.95), 0 0 16px rgba(0,0,0,.8);
            cursor: pointer;
            pointer-events: auto;
            transition: color 200ms ease, transform 200ms ease;
        }
        /* Blood brush underline — the unlocked-state signal. */
        .menu-tribulation-button::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 0;
            height: 9px;
            transform: translateX(-50%);
            background: linear-gradient(90deg, #5d120e 0%, #b02218 45%, #7d1f19 100%);
            -webkit-mask-image: url('../assets/images/ui/menu/brush_stroke.png');
                    mask-image: url('../assets/images/ui/menu/brush_stroke.png');
            -webkit-mask-size: 100% 100%;
                    mask-size: 100% 100%;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            opacity: 0;
            transition: width 420ms cubic-bezier(.2,.9,.3,1), opacity 300ms ease;
        }
        .menu-tribulation-wrap:not([data-locked="true"]) .menu-tribulation-button::after {
            width: 72%;
            opacity: .95;
        }
        .menu-tribulation-wrap:not([data-locked="true"]) .menu-tribulation-button {
            color: #e8d3a8;
        }
        .menu-tribulation-button > span { position: relative; z-index: 1; }
        .menu-tribulation-button:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
        .menu-tribulation-button:active:not(:disabled) { transform: translateY(1px); }
        /* Hairline rules flank the name, replacing the old boxed banner. */
        .tribulation-name {
            position: relative;
            font: 750 4.2cqw/1 "Noto Serif SC", serif;
            letter-spacing: .42em;
            text-indent: .42em;
        }
        .tribulation-name::before,
        .tribulation-name::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 7cqw;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(160,142,105,.5));
        }
        .tribulation-name::before { right: 100%; margin-right: 3cqw; }
        .tribulation-name::after { left: 100%; margin-left: 1.5cqw; transform: scaleX(-1); }
        .tribulation-status {
            color: rgba(231,213,180,.72);
            font: 650 2.2cqw/1 "Source Sans 3","Noto Serif SC",sans-serif;
            letter-spacing: .06em;
            text-shadow: 0 1px 6px rgba(0,0,0,.95);
        }
        .menu-png-frame[data-menu-lang="en"] .tribulation-name {
            font-family: "Cinzel", Georgia, serif;
            font-size: clamp(13px, 2.65vw, 16px);
            font-weight: 700;
            letter-spacing: .1em;
        }
        .menu-tribulation-wrap[data-locked="true"] .menu-tribulation-button {
            color: #8f8368;
            cursor: not-allowed;
        }
        .menu-tribulation-wrap[data-locked="true"] .tribulation-name::before,
        .menu-tribulation-wrap[data-locked="true"] .tribulation-name::after {
            background: linear-gradient(90deg, transparent, rgba(140,124,92,.34));
        }
        .menu-tribulation-wrap[data-locked="true"] .tribulation-status { color: rgba(210,196,168,.6); }
        .menu-tribulation-wrap.locked-pulse { animation: tribulationLockedPulse 420ms ease both; }
        @keyframes tribulationLockedPulse { 45% { transform: translateX(-50%) scale(.98); filter: brightness(1.5); } }

        .tribulation-choice-modal {
            position: fixed;
            inset: 0;
            z-index: 4200;
            display: grid;
            place-items: center;
            padding: clamp(16px, 4vw, 48px);
            background:
                radial-gradient(circle at 50% 30%, rgba(130,34,49,.24), transparent 42%),
                linear-gradient(180deg, rgba(7,8,10,.72), rgba(6,7,9,.94));
            backdrop-filter: blur(8px) saturate(.82);
        }
        .tribulation-choice-modal[hidden] { display: none !important; }
        .tribulation-choice-shell {
            width: min(1040px, 96vw);
            max-height: min(780px, 92vh);
            overflow: auto;
            padding: clamp(24px, 4.5vw, 52px);
            border: 1px solid rgba(224,173,102,.42);
            border-radius: 4px;
            color: #efe3ca;
            text-align: center;
            background:
                linear-gradient(135deg, transparent 18px, rgba(19,18,20,.97) 0) top left,
                linear-gradient(225deg, transparent 18px, rgba(19,18,20,.97) 0) top right,
                linear-gradient(315deg, transparent 18px, rgba(19,18,20,.97) 0) bottom right,
                linear-gradient(45deg, transparent 18px, rgba(19,18,20,.97) 0) bottom left;
            background-size: 51% 51%;
            background-repeat: no-repeat;
            box-shadow: 0 30px 80px rgba(0,0,0,.68), inset 0 0 70px rgba(128,28,34,.09);
        }
        .tribulation-choice-kicker {
            color: #c56150;
            font: 800 11px/1.2 "Source Sans 3", sans-serif;
            letter-spacing: .28em;
            text-transform: uppercase;
        }
        .tribulation-choice-shell h2 {
            margin: 8px 0 7px;
            color: #f5e9d1;
            font: 800 clamp(25px, 4.4vw, 43px)/1.12 "Noto Serif SC", "Cinzel", serif;
            letter-spacing: .08em;
            text-shadow: 0 4px 24px rgba(202,61,49,.25);
        }
        #tribulation-choice-summary {
            max-width: 680px;
            margin: 0 auto 24px;
            color: rgba(238,224,198,.66);
            font: 600 clamp(12px, 1.8vw, 15px)/1.65 "Source Sans 3", "Noto Serif SC", sans-serif;
        }
        .tribulation-choice-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
            gap: 13px;
            align-items: stretch;
        }
        .tribulation-choice-card {
            position: relative;
            min-height: 196px;
            padding: 25px 20px 21px;
            overflow: hidden;
            border: 1px solid rgba(214,175,111,.26);
            border-radius: 3px;
            color: #eadfc8;
            text-align: left;
            cursor: pointer;
            background:
                radial-gradient(circle at 84% 16%, rgba(190,57,49,.13), transparent 34%),
                linear-gradient(155deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
            transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
        }
        .tribulation-choice-card::after {
            content: attr(data-glyph);
            position: absolute;
            right: 12px;
            bottom: -20px;
            color: rgba(211,73,55,.09);
            font: 900 94px/1 "Noto Serif SC", serif;
            pointer-events: none;
        }
        .tribulation-choice-card:hover,
        .tribulation-choice-card:focus-visible {
            outline: none;
            transform: translateY(-3px);
            border-color: rgba(229,170,90,.76);
            background: radial-gradient(circle at 84% 16%, rgba(196,53,46,.24), transparent 38%), rgba(255,255,255,.055);
        }
        .tribulation-card-tag {
            display: inline-block;
            margin-bottom: 13px;
            color: #cc6c59;
            font: 800 10px/1.1 "Source Sans 3", sans-serif;
            letter-spacing: .18em;
        }
        .tribulation-choice-card strong {
            display: block;
            margin-bottom: 9px;
            color: #f4e7cc;
            font: 800 21px/1.25 "Noto Serif SC", "Cinzel", serif;
            letter-spacing: .04em;
        }
        .tribulation-choice-card small,
        .tribulation-card-risk,
        .tribulation-card-reward {
            position: relative;
            z-index: 1;
            display: block;
            color: rgba(232,218,192,.68);
            font: 600 12px/1.55 "Source Sans 3", "Noto Serif SC", sans-serif;
        }
        .tribulation-card-risk { margin-top: 8px; color: #dc8778; }
        .tribulation-card-reward { margin-top: 3px; color: #d8bf83; }
        .tribulation-choice-secondary { margin: 22px auto 0; min-width: 190px; }
        @media (max-width: 720px) {
            .tribulation-choice-shell { padding: 24px 16px; }
            .tribulation-choice-grid { grid-template-columns: 1fr; }
            .tribulation-choice-card { min-height: 145px; }
        }

        /* ── Bottom Nav (near bottom) ── */
        .menu-bottom-wrap {
            position: absolute;
            bottom: clamp(1.8%, 2.4vh, 5%);
            left: 50%;
            transform: translateX(-50%);
            width: clamp(300px, 86vw, 450px);
            max-width: 96%;
            height: clamp(52px, 7.6vh, 72px);
            z-index: 5;
            background: transparent;
        }
        .menu-bottom-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            pointer-events: none;
            user-select: none;
            z-index: 0;
            opacity: .86;
            filter:
                brightness(1.02)
                contrast(1.08)
                saturate(.72)
                drop-shadow(0 3px 7px rgba(0,0,0,.72));
            clip-path: inset(0 0 38% 0);
        }

        /* ── Transparent Hitboxes ── */
        .menu-hitbox {
            position: absolute;
            background: transparent;
            border: none;
            box-shadow: none;
            outline: none;
            cursor: pointer;
            z-index: 30;
            color: transparent;
            font-size: 0;
            line-height: 0;
            overflow: hidden;
            -webkit-tap-highlight-color: transparent;
            pointer-events: auto;
        }
        #menu-screen.menu-png-v1 .menu-hitbox {
            appearance: none !important;
            min-width: 0 !important;
            min-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            background-image: none !important;
            box-shadow: none !important;
            color: transparent !important;
            font-size: 0 !important;
            line-height: 0 !important;
            text-shadow: none !important;
        }
        #menu-screen.menu-png-v1 #start-button,
        #menu-screen.menu-png-v1 #friend-pk-btn,
        #menu-screen.menu-png-v1 #how-to-play-btn,
        #menu-screen.menu-png-v1 #view-leaderboard-btn {
            position: absolute !important;
            display: block !important;
            transform: none !important;
            opacity: 1 !important;
            background: transparent !important;
            background-image: none !important;
            border: 0 !important;
            box-shadow: none !important;
            filter: none !important;
        }
        .menu-hitbox:hover { background: transparent; }
        .menu-hitbox:active { background: transparent; }
        .menu-hitbox:focus-visible { outline: 2px solid rgba(209,170,88,.5); outline-offset: 1px; }

        /* Name hitbox */
        .menu-hitbox-name {
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
        }

        /* Settings hitboxes (audio ≈ left third, lang ≈ middle third, settings ≈ right third) */
        .menu-hitbox-audio  { top: 14%; left: 4%;  width: 28%; height: 68%; }
        .menu-hitbox-language { top: 14%; left: 36%; width: 28%; height: 68%; }
        .menu-hitbox-settings { top: 14%; left: 68%; width: 28%; height: 68%; }

        /* Difficulty hitboxes are the dot indicators under the carousel: direct
           selection for anyone who does not want to step with the arrows, and
           the position marker for where you are in the three. */
        .menu-hitbox[data-difficulty] {
            top: auto;
            bottom: 0;
            width: 7cqw;
            height: 4.4cqh;
            display: grid;
            place-items: center;
        }
        .menu-hitbox[data-difficulty]::after {
            content: '';
            width: 1.5cqw;
            height: 1.5cqw;
            border-radius: 50%;
            background: rgba(196,176,134,.34);
            box-shadow: 0 1px 4px rgba(0,0,0,.8);
            transition: background 240ms ease, transform 240ms ease, box-shadow 240ms ease;
        }
        .menu-hitbox[data-difficulty]:hover::after { background: rgba(232,214,172,.7); }
        .menu-hitbox-diff-easy   { left: calc(50% - 9cqw); }
        .menu-hitbox-diff-normal { left: calc(50% - 3.5cqw); }
        .menu-hitbox-diff-hell   { left: calc(50% + 2cqw); }
        .menu-png-frame[data-difficulty="easy"] .menu-hitbox-diff-easy::after,
        .menu-png-frame[data-difficulty="normal"] .menu-hitbox-diff-normal::after {
            background: #e8cf9c;
            transform: scale(1.35);
            box-shadow: 0 0 8px rgba(224,176,96,.6);
        }
        .menu-png-frame[data-difficulty="hell"] .menu-hitbox-diff-hell::after {
            background: #e05242;
            transform: scale(1.35);
            box-shadow: 0 0 9px rgba(216,56,42,.75);
        }

        /* Start hitbox */
        .menu-hitbox-start {
            inset: 0;
            width: 100%;
            height: 100%;
        }

        /* Bottom nav hitboxes */
        .menu-hitbox-duel    { top: 16%; left: 6%;  width: 27%; height: 68%; }
        .menu-hitbox-rules   { top: 16%; left: 36%; width: 28%; height: 68%; }
        .menu-hitbox-records { top: 16%; left: 67%; width: 27%; height: 68%; }

        /* ── Hover / Active Animation ── */
        .menu-start-wrap:hover .menu-start-img {
            filter: saturate(.82) contrast(1.1) brightness(1.02) drop-shadow(0 5px 9px rgba(0,0,0,.5));
            transform: scale(1.015);
        }
        .menu-start-wrap:active .menu-start-img {
            transform: scale(0.985);
            filter: brightness(0.96);
        }

        /* ── Settings Popover ── */
        #menu-settings-popover {
            position: absolute;
            top: clamp(50px, 8vh, 80px);
            right: clamp(4px, 1.5vw, 12px);
            z-index: 50;
            width: clamp(160px, 42vw, 220px);
            padding: 14px 16px 12px;
            background: linear-gradient(160deg, rgba(24,22,18,.96), rgba(12,12,10,.98));
            border: 1px solid rgba(209,170,88,.45);
            border-radius: 6px;
            box-shadow: 0 14px 38px rgba(0,0,0,.55);
            color: #f5ecd5;
            font-family: "Source Sans 3", "Noto Serif SC", sans-serif;
            font-size: 12px;
        }
        #menu-settings-popover[hidden] { display: none; }
        #menu-settings-popover h3 {
            margin: 0 0 8px;
            padding-bottom: 6px;
            border-bottom: 1px solid rgba(209,170,88,.25);
            color: #d1aa58;
            font-family: "Noto Serif SC", "Cinzel", serif;
            font-size: 15px;
            font-weight: 700;
            text-align: center;
        }
        .menu-popover-btn {
            display: block;
            width: 100%;
            margin: 4px 0;
            padding: 7px 10px;
            border: 1px solid rgba(209,170,88,.2);
            border-radius: 3px;
            background: rgba(255,255,255,.04);
            color: rgba(245,236,213,.82);
            font-family: "Source Sans 3", "Noto Serif SC", sans-serif;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            transition: background .15s, border-color .15s;
        }
        .menu-popover-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(209,170,88,.5); }
        .menu-popover-btn.confirmed,
        .menu-popover-btn:disabled { color:#d9bd79; border-color:rgba(209,170,88,.46); background:rgba(209,170,88,.08); cursor:default; opacity:1; }
        .menu-popover-btn.failed { color:#e49a8d; border-color:rgba(190,67,52,.5); }
        .menu-popover-btn.danger { color: rgba(211,91,65,.9); }
        .menu-popover-btn.danger:hover { background: rgba(169,52,45,.12); border-color: rgba(169,52,45,.4); }
        .menu-popover-version {
            margin-top: 8px;
            padding-top: 6px;
            border-top: 1px solid rgba(209,170,88,.15);
            color: rgba(245,236,213,.43);
            font-size: 9px;
            text-align: center;
        }

        /* ── Hitbox Debug Mode ── */
        body.menu-debug-hitboxes .menu-hitbox {
            outline: 1px dashed rgba(255,100,100,.55) !important;
            background: rgba(255,60,60,.07) !important;
        }
        body.menu-debug-hitboxes .menu-hitbox::after {
            content: attr(aria-label);
            position: absolute;
            top: 2px;
            left: 2px;
            font-size: 7px;
            color: rgba(255,150,150,.8);
            pointer-events: none;
            white-space: nowrap;
        }

        /* ── Responsive adjustments ── */
        @media (max-width: 620px) {
            .menu-png-frame { max-height: 100vh; border-radius: 0; }
            .menu-name-wrap { width: clamp(226px, 58vw, 276px); }
            .menu-setting-wrap { width: clamp(88px, 23vw, 108px); height: clamp(25px, 3.8vh, 32px); }
            /* Title / difficulty / start / tribulation are sized in container
               units and are already proportional — viewport overrides here
               would re-introduce the drift they were added to patch. */
            .menu-bottom-wrap { width: 88cqw; height: 7cqh; }
        }
        @media (max-width: 390px), (max-height: 720px) {
            .menu-name-wrap { top: 6px; left: 2px; }
            .menu-setting-wrap { top: 6px; right: 4px; width: clamp(86px, 23vw, 102px); }
            .menu-bottom-wrap { bottom: 2%; }
            #menu-settings-popover { top: clamp(44px, 7vh, 64px); }
        }

        /* Persistent relic progression stays compact inside the battle report. */
        .relic-progression {
            width: 100%;
            margin: 1px auto 12px;
            padding: 10px 2px 0;
            border-top: 1px solid rgba(220,184,104,.18);
            color: #f0e2c4;
            perspective: 700px;
        }
        .relic-unlock-card[hidden] { display: none !important; }
        .relic-unlock-card {
            display: grid;
            grid-template-columns: 58px minmax(0,1fr);
            align-items: center;
            gap: 12px;
            min-height: 66px;
            margin: 0 0 9px;
            padding: 0 4px 9px;
            border-bottom: 1px solid rgba(191,68,53,.28);
            transform-origin: center;
            backface-visibility: hidden;
        }
        .relic-unlock-card.is-revealed { animation: relicCardReveal 620ms cubic-bezier(.2,.8,.2,1) both; }
        .relic-unlock-art {
            position: relative;
            width: 58px;
            height: 58px;
            display: grid;
            place-items: center;
            flex: 0 0 58px;
        }
        .relic-unlock-art::before {
            content: '';
            position: absolute;
            inset: 5px;
            border: 1px solid rgba(220,184,104,.48);
            transform: rotate(45deg);
        }
        #relic-unlock-image { position: relative; width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(64,37,12,.22)); }
        #relic-unlock-glyph { position: absolute; color: #e6c77f; font: 800 13px/1 "Noto Serif SC",serif; text-shadow: 0 1px 5px rgba(0,0,0,.55); }
        #relic-unlock-image:not([hidden]) + #relic-unlock-glyph { opacity: 0; }
        .relic-unlock-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
        #relic-unlock-kicker { color: #dc6c59; font: 800 9px/1.2 "Source Sans 3","Noto Serif SC",sans-serif; letter-spacing: .12em; }
        #relic-unlock-name { margin-top: 3px; color: #f0ddb0; font: 800 19px/1.15 "Cormorant Garamond","Noto Serif SC",serif; }
        #relic-unlock-effect { margin-top: 3px; color: rgba(239,224,193,.68); font: 650 10px/1.35 "Source Sans 3","Noto Serif SC",sans-serif; }
        .relic-next-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-height: 31px; }
        .relic-next-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
        #relic-next-label, #records-relic-next-label { color: #c5a45e; font: 800 8px/1.2 "Source Sans 3","Noto Serif SC",sans-serif; letter-spacing: .11em; }
        #relic-next-goal, #records-relic-next-goal { max-width: 330px; margin-top: 2px; color: rgba(239,224,193,.78); font: 750 11px/1.25 "Source Sans 3","Noto Serif SC",sans-serif; overflow-wrap: anywhere; }
        #relic-next-value, #records-relic-next-value { flex: 0 0 auto; color: #e28c74; font: 800 12px/1 "Source Sans 3",sans-serif; font-variant-numeric: tabular-nums; }
        .relic-progress-track { width: 100%; height: 4px; margin-top: 6px; overflow: hidden; background: rgba(240,220,178,.12); }
        #relic-progress-fill, #records-relic-progress-fill { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#b23c31,#d2ad5f); transition: width 420ms ease; }
        #leaderboard-section .relic-next-row { color: inherit !important; margin: 10px 0 4px; }
        @keyframes relicCardReveal {
            0% { opacity: 0; transform: rotateY(82deg) scale(.92); }
            62% { opacity: 1; transform: rotateY(-7deg) scale(1.015); }
            100% { opacity: 1; transform: rotateY(0) scale(1); }
        }
        @media (max-width: 390px), (max-height: 720px) {
            .relic-progression { margin-bottom: 8px; padding-top: 7px; }
            .relic-unlock-card { grid-template-columns: 46px minmax(0,1fr); min-height: 52px; gap: 9px; padding-bottom: 7px; }
            .relic-unlock-art { width: 46px; height: 46px; }
            #relic-unlock-image { width: 43px; height: 43px; }
            #relic-unlock-name { font-size: 16px; }
            #relic-unlock-effect { font-size: 9px; }
            #relic-next-goal { font-size: 10px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .relic-unlock-card.is-revealed { animation: none; }
            #relic-progress-fill { transition: none; }
        }

        /* Gate IX victory is a one-off ascension record, not a normal run report. */
        #results-screen[data-outcome="victory"] {
            background:
                linear-gradient(180deg, rgba(8,7,6,.18), rgba(12,5,4,.72)),
                url('../assets/images/backgrounds/bg_bamboo_forest_bloodmoon.webp') center/cover no-repeat !important;
        }
        #results-screen[data-outcome="victory"] #personal-results {
            border-color: rgba(222,181,82,.64) !important;
            box-shadow: 0 0 0 1px rgba(128,36,27,.46), 0 24px 70px rgba(0,0,0,.72) !important;
            background:
                linear-gradient(180deg, rgba(18,13,10,.96), rgba(12,9,7,.985)) !important;
        }
        #results-screen[data-outcome="victory"] #personal-results::before {
            content: '';
            position: absolute;
            inset: 46px 18% auto;
            height: 210px;
            background: url('../assets/images/bosses/boss_phase3_true_form.png') center/contain no-repeat;
            opacity: .095;
            filter: sepia(.25) contrast(1.2);
            pointer-events: none;
        }
        #results-screen[data-outcome="victory"] .results-title {
            color: #f3dfad !important;
            text-shadow: 0 2px 0 #36100c, 0 0 24px rgba(214,159,55,.34) !important;
        }
        #results-screen[data-outcome="victory"] .results-score { color: #f0c75f !important; }
        #results-screen[data-outcome="victory"] .result-outcome-stamp {
            color: #a32b25 !important;
            border-width: 5px !important;
            transform: rotate(-8deg) scale(1.08);
        }
        .boss-victory-honor[hidden] { display: none !important; }
        .boss-victory-honor {
            position: relative;
            width: 100%;
            margin: 10px 0 14px;
            padding: 15px 10px 13px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-top: 1px solid rgba(221,180,84,.42);
            border-bottom: 1px solid rgba(148,44,34,.46);
            background: linear-gradient(90deg, transparent, rgba(111,26,20,.2), transparent);
            overflow: hidden;
        }
        .boss-victory-honor::after {
            content: '';
            position: absolute;
            top: -30%; bottom: -30%; left: 49.7%;
            width: 2px;
            background: linear-gradient(180deg, transparent, rgba(248,218,133,.9), transparent);
            transform: rotate(18deg);
            box-shadow: 0 0 16px rgba(239,185,63,.7);
            animation: victory-sword-line 720ms 180ms both;
        }
        #boss-victory-kicker { color:#c95643; font:800 9px/1.2 "Source Sans 3","Noto Serif SC",sans-serif; letter-spacing:.14em; }
        #boss-victory-title { margin-top:4px; color:#f0d391; font:900 26px/1.1 "Cormorant Garamond","Noto Serif SC",serif; }
        .boss-victory-phases { width:min(100%,360px); margin:10px 0 5px; display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:7px; color:rgba(240,222,178,.78); font:750 9px/1.2 "Source Sans 3","Noto Serif SC",sans-serif; }
        .boss-victory-phases i { height:1px; background:linear-gradient(90deg,rgba(203,63,46,.3),rgba(228,190,95,.65)); }
        #boss-victory-detail { color:rgba(240,220,171,.62); font:650 10px/1.3 "Source Sans 3","Noto Serif SC",sans-serif; }
        @keyframes victory-sword-line { from { opacity:0; transform:translateY(-45px) rotate(18deg) scaleY(.25); } to { opacity:1; transform:translateY(0) rotate(18deg) scaleY(1); } }
        @media (prefers-reduced-motion: reduce) { .boss-victory-honor::after { animation:none; } }

        /* Final combat hierarchy: one persistent panel, one transient ribbon. */
        #gate-hud, #gate-hud.ink-banner {
            width: min(92%, 442px) !important;
            min-height: 39px !important;
            grid-template-columns: minmax(0, 1fr) auto !important;
            grid-template-rows: auto auto !important;
            padding: 5px 10px 6px !important;
            border-width: 1px 0 !important;
            border-radius: 0 !important;
            background: linear-gradient(90deg, transparent, rgba(12,11,9,.78) 10%, rgba(12,11,9,.88) 50%, rgba(12,11,9,.78) 90%, transparent) !important;
            box-shadow: 0 5px 12px rgba(0,0,0,.16) !important;
            backdrop-filter: none !important;
        }
        #gate-next, #gate-reqs { display: none !important; }
        #gate-count { grid-column: 1; grid-row: 1; }
        #gate-time { grid-column: 2; grid-row: 1; }
        #gate-threat { grid-column: 1; grid-row: 2; min-width: 0; }
        #art-status { grid-column: 2; grid-row: 2; min-width: 0 !important; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }

        #boss-hud {
            top: 55px !important;
            width: min(90%, 446px) !important;
            padding: 6px 13px 7px !important;
            border-width: 1px 0 !important;
            border-radius: 0 !important;
            background: linear-gradient(90deg, transparent, rgba(17,13,11,.84) 8%, rgba(17,13,11,.94) 50%, rgba(17,13,11,.84) 92%, transparent) !important;
            box-shadow: 0 7px 18px rgba(0,0,0,.2) !important;
            backdrop-filter: none !important;
        }
        #boss-hud #boss-name { color:#f1dfb5 !important; font-size:clamp(14px,3.7cqw,18px) !important; }
        #boss-hud .boss-state-row { display:flex; justify-content:center; gap:8px; color:rgba(240,222,181,.68); }
        #boss-breaks { min-width:94px !important; color:#f0c96f !important; text-align:right !important; font-variant-numeric:tabular-nums; }
        #boss-hud[data-phase="3"] {
            border-bottom-color:rgba(190,51,39,.82) !important;
            background:linear-gradient(90deg, transparent, rgba(42,10,8,.84) 8%, rgba(24,9,8,.96) 50%, rgba(42,10,8,.84) 92%, transparent) !important;
            animation:boss-true-form-pressure 1.45s ease-in-out infinite;
        }
        #boss-hud[data-phase="3"] #boss-health-fill { box-shadow:0 0 12px rgba(225,67,43,.76); }
        @keyframes boss-true-form-pressure {
            50% { filter:drop-shadow(0 0 7px rgba(164,36,27,.36)); }
        }

        #combat-event-banner {
            width:min(78%,390px) !important;
            min-height:0 !important;
            padding:7px 19px 8px !important;
            border:0 !important;
            border-top:1px solid rgba(228,195,119,.5) !important;
            border-bottom:1px solid rgba(164,48,39,.5) !important;
            border-radius:0 !important;
            background:linear-gradient(90deg, transparent, rgba(13,11,9,.82) 12%, rgba(13,11,9,.9) 50%, rgba(13,11,9,.82) 88%, transparent) !important;
            box-shadow:0 6px 16px rgba(0,0,0,.18) !important;
        }
        #combat-event-banner strong { font-size:clamp(14px,3cqw,19px) !important; }
        #combat-event-banner span { margin-top:2px !important; font-size:clamp(9px,1.8cqw,12px) !important; }
        #combat-event-banner[data-kind="damage"],
        #combat-event-banner[data-kind="sect"],
        #combat-event-banner[data-kind="ultimate"] { background:linear-gradient(90deg, transparent, rgba(23,10,8,.84) 12%, rgba(16,11,8,.93) 50%, rgba(23,10,8,.84) 88%, transparent) !important; }
        @media (prefers-reduced-motion: reduce) { #boss-hud[data-phase="3"] { animation:none; } }

        /* ==========================================================
           CINEMATIC CLARITY PASS — asset-backed, no procedural canvas art.
           ========================================================== */
        #combat-cinematic-frame {
            position: absolute;
            top: 94px;
            right: 0;
            bottom: 142px;
            left: 0;
            width: 100%;
            height: calc(100% - 236px);
            object-fit: fill;
            z-index: 5;
            pointer-events: none;
            user-select: none;
            opacity: 0;
            filter: saturate(.72) contrast(1.06);
            transition: opacity 360ms ease, filter 220ms ease;
        }
        #game-world[data-screen="game"] #combat-cinematic-frame {
            opacity: .24;
        }
        #game-world[data-screen="game"][data-tension="rising"] #combat-cinematic-frame {
            opacity: .29;
            filter: saturate(.82) contrast(1.08);
        }
        #game-world[data-screen="game"][data-tension="high"] #combat-cinematic-frame,
        #game-world[data-screen="game"][data-tension="critical"] #combat-cinematic-frame {
            opacity: .34;
            filter: saturate(.95) contrast(1.1) drop-shadow(0 0 8px rgba(146,38,29,.24));
        }

        /* PNG menu already owns these controls; the legacy strip duplicated them. */
        #game-world[data-screen="menu"] > .top-controls {
            display: none !important;
        }

        /* HUD hierarchy: time is support; combo and remaining life are decisions. */
        #hud .hud-item:nth-child(2) {
            opacity: .76;
            background: linear-gradient(180deg, rgba(12,11,10,.7), rgba(7,7,6,.54)) !important;
        }
        #hud .hud-item:nth-child(3) {
            border-bottom-color: rgba(213,178,92,.42) !important;
            background: linear-gradient(180deg, rgba(30,24,14,.85), rgba(8,8,7,.7)) !important;
        }
        #hud .hud-item:nth-child(4) {
            border-bottom-color: rgba(176,57,46,.46) !important;
        }
        #combo-display {
            color: #efd187 !important;
            text-shadow: 0 1px 0 #2c160a, 0 0 9px rgba(218,179,84,.22) !important;
        }
        #lives-display { color: #fff0d4 !important; }

        /* Feedback is a decisive callout, not grey text floating on paper. */
        .combo-feedback {
            border-top-color: rgba(244,214,139,.74) !important;
            border-bottom-color: rgba(191,57,44,.72) !important;
            background: linear-gradient(90deg, transparent, rgba(11,9,7,.92) 12%, rgba(17,12,8,.97) 50%, rgba(11,9,7,.92) 88%, transparent) !important;
            text-shadow: 0 2px 0 #36120d, 0 0 14px rgba(232,194,105,.32) !important;
        }
        #stroke-result, #stroke-result.ink-banner {
            color: rgba(255,246,222,.9) !important;
            text-shadow: 0 1px 3px rgba(0,0,0,.96) !important;
        }

        @media (max-height: 720px) {
            #combat-cinematic-frame { top: 93px; bottom: 141px; }
        }
        @media (prefers-reduced-motion: reduce) {
            #combat-cinematic-frame { transition: none; }
        }

        /* ==========================================================
           ORGANIC INK UI PASS — authored alpha assets, no card grids.
           ========================================================== */
        .skill-modal-shell {
            border:0 !important;
            background:transparent url('../assets/images/ui/wuxia_result_scroll.png') center/100% 100% no-repeat !important;
            box-shadow:none !important;
            color:#2a2018 !important;
        }
        /* .howto-seal-card is deliberately NOT in this group: it is a dark card
           whose children carry light text, so a paper plate would put light
           type on light paper. It was bundled in here by mistake. */
        .skill-card {
            border:0 !important;
            border-radius:0 !important;
            color:#2a2018 !important;
            background:transparent url('../assets/images/ui/wuxia_choice_plate.png') center/100% 100% no-repeat !important;
            box-shadow:none !important;
        }
        .skill-card:hover { transform:translateY(-2px) scale(1.015) !important; filter:brightness(1.04) drop-shadow(0 8px 10px rgba(0,0,0,.24)); }
        .skill-card::after { display:none !important; }
        .howto-seal-icon { object-fit:contain; filter:drop-shadow(0 4px 5px rgba(0,0,0,.3)); }

        .tribulation-choice-modal {
            background:radial-gradient(circle at 50% 26%, rgba(142,43,34,.18), transparent 40%), rgba(4,4,4,.91) !important;
        }
        .tribulation-choice-shell {
            width:min(1080px,97vw) !important;
            padding:clamp(52px,7vw,82px) clamp(34px,7vw,76px) !important;
            border:0 !important;
            border-radius:0 !important;
            color:#2a2018 !important;
            background:transparent url('../assets/images/ui/wuxia_result_scroll.png') center/100% 100% no-repeat !important;
            box-shadow:none !important;
        }
        .tribulation-choice-kicker { color:#9d3229 !important; }
        .tribulation-choice-shell h2 { color:#322219 !important; text-shadow:none !important; }
        #tribulation-choice-summary { color:#6f5c47 !important; }
        .tribulation-choice-grid { gap:5px !important; }
        .tribulation-choice-card {
            min-height:190px !important;
            padding:31px 32px 27px !important;
            border:0 !important;
            border-radius:0 !important;
            color:#2a2018 !important;
            background:transparent url('../assets/images/ui/wuxia_choice_plate.png') center/100% 100% no-repeat !important;
            box-shadow:none !important;
            transform:rotate(-.35deg);
        }
        .tribulation-choice-card:nth-child(even) { transform:rotate(.35deg); }
        .tribulation-choice-card::after { color:rgba(151,45,35,.10) !important; }
        .tribulation-choice-card:hover,
        .tribulation-choice-card:focus-visible {
            transform:translateY(-4px) scale(1.015) !important;
            filter:brightness(1.04) drop-shadow(0 10px 12px rgba(0,0,0,.24));
            background:transparent url('../assets/images/ui/wuxia_choice_plate.png') center/103% 103% no-repeat !important;
        }
        .tribulation-choice-card strong { color:#3a251b !important; }
        .tribulation-choice-card small { color:#66533f !important; }
        .tribulation-card-tag,
        .tribulation-card-risk { color:#a13a30 !important; }
        .tribulation-card-reward { color:#7a622d !important; }

        #results-screen {
            background:radial-gradient(circle at 50% 10%, rgba(185,53,40,.16), transparent 31%), linear-gradient(180deg,#15100c,#050403) !important;
        }
        #personal-results,
        #results-screen[data-clear-quality="flawless"] #personal-results,
        #results-screen[data-clear-quality="masterful"] #personal-results,
        #results-screen[data-outcome="victory"] #personal-results {
            width:min(96%,500px) !important;
            padding:clamp(43px,8cqw,58px) clamp(30px,8cqw,48px) clamp(42px,7cqw,54px) !important;
            border:0 !important;
            border-radius:0 !important;
            clip-path:none !important;
            color:#251b14 !important;
            background:transparent url('../assets/images/ui/wuxia_result_scroll.png') center/100% 100% no-repeat !important;
            box-shadow:none !important;
            backdrop-filter:none !important;
            overflow:visible !important;
        }
        #personal-results::before,
        #personal-results::after { display:none !important; }
        #personal-results .result-kicker { color:#8c6d36 !important; }
        /* The victory rules further up were authored for a dark panel and set
           cream/gold type. This panel is light paper, and those selectors are
           more specific, so they must be restated here or a win renders pale
           text on pale paper. */
        #personal-results .results-title,
        #results-screen[data-clear-quality="flawless"] .results-title,
        #results-screen[data-clear-quality="masterful"] .results-title,
        #results-screen[data-outcome="victory"] .results-title { color:#8d2d25 !important; text-shadow:none !important; }
        #personal-results .results-score,
        #results-screen[data-clear-quality="flawless"] .results-score,
        #results-screen[data-outcome="victory"] .results-score { color:#221812 !important; text-shadow:0 3px 10px rgba(72,43,20,.14) !important; }
        #results-screen[data-outcome="victory"] #personal-results::before { display:none !important; }
        #personal-results .result-highlight,
        #personal-results .result-story,
        #results-screen[data-clear-quality="flawless"] .result-highlight,
        #results-screen[data-clear-quality="flawless"] .result-story { color:#6f2a23 !important; }
        #personal-results .result-story { color:#71614e !important; }
        .result-stats-grid.v18-final {
            grid-template-columns:repeat(3,minmax(0,1fr)) !important;
            gap:0 !important;
            margin:5px auto 12px !important;
            border:0 !important;
            background:transparent !important;
        }
        .result-stat {
            min-height:58px !important;
            padding:12px 5px 9px !important;
            border:0 !important;
            border-radius:0 !important;
            background:transparent !important;
            overflow:visible !important;
            white-space:normal !important;
        }
        .result-stat::before {
            content:'◆';
            display:block;
            margin-bottom:5px;
            color:rgba(151,45,35,.42);
            font-size:6px;
        }
        .result-stat:not(:last-child)::after { display:none !important; }
        .result-stat-value,
        #results-screen[data-clear-quality="flawless"] .result-stat-value { color:#2b2018 !important; text-shadow:none !important; }
        .result-stat-label { color:#75644f !important; }
        .relic-progression {
            margin:3px 0 9px !important;
            padding:10px 3px 8px !important;
            border:0 !important;
            border-top:1px solid rgba(111,70,31,.18) !important;
            background:transparent !important;
        }
        .relic-next-row { color:#49392b !important; }
        .relic-progress-track { background:rgba(74,48,30,.12) !important; }
        .result-recap {
            width:108% !important;
            margin:3px -4% 0 !important;
            padding:24px 34px 22px !important;
            border:0 !important;
            border-radius:0 !important;
            color:#33251b !important;
            background:transparent url('../assets/images/ui/wuxia_choice_plate.png') center/100% 100% no-repeat !important;
            box-shadow:none !important;
        }
        .result-recap-kicker,
        #result-recap-best { color:#7b5b29 !important; }
        #result-recap-worst { color:#9b3b31 !important; }
        #result-recap-next { color:#4f3e2f !important; border:0 !important; }

        #results-screen .button-row .button,
        .tribulation-choice-secondary {
            min-height:64px !important;
            padding:14px 42px !important;
            border:0 !important;
            border-radius:0 !important;
            clip-path:none !important;
            color:#4c291e !important;
            background:transparent url('../assets/images/ui/wuxia_choice_plate.png') center/100% 100% no-repeat !important;
            box-shadow:none !important;
        }
        #results-screen .button-row #restart-button {
            color:#8f2e25 !important;
            background:transparent url('../assets/images/ui/wuxia_choice_plate.png') center/100% 100% no-repeat !important;
        }

        @media (max-width:720px) {
            .tribulation-choice-shell { padding:48px 22px !important; }
            .tribulation-choice-grid { grid-template-columns:1fr !important; }
            .tribulation-choice-card { min-height:154px !important; padding:25px 29px 23px !important; }
        }
        @media (max-width:390px), (max-height:720px) {
            #personal-results { padding:38px 26px 36px !important; }
            .result-recap { padding:20px 27px 18px !important; }
        }

        /* VFX clarity pass: combo is a staged sword-chain ceremony, not a
           technical label in a generic notification ribbon. */
        .combo-feedback[data-combo]:not([data-combo=""]) {
            width:min(76%,340px) !important;
            min-height:96px !important;
            padding:13px 34px 14px !important;
            display:grid !important;
            grid-template-columns:auto 1fr;
            grid-template-rows:auto auto;
            align-items:center;
            column-gap:13px;
            overflow:hidden;
            border-top-color:rgba(255,226,151,.9) !important;
            border-bottom-color:rgba(188,48,38,.82) !important;
            background:
                linear-gradient(112deg, transparent 0 32%, rgba(244,205,111,.08) 32.5% 33%, transparent 33.5%),
                linear-gradient(90deg, transparent, rgba(14,10,8,.97) 12%, rgba(36,16,10,.98) 50%, rgba(14,10,8,.97) 88%, transparent) !important;
            box-shadow:0 14px 34px rgba(0,0,0,.36),0 0 26px rgba(196,55,40,.13) !important;
        }
        .combo-feedback[data-combo]:not([data-combo=""])::before {
            content:'';
            position:absolute;
            left:-12%; top:49%;
            width:124%; height:2px;
            background:linear-gradient(90deg,transparent 2%,#6e211a 20%,#ffe3a0 52%,#9b2c22 76%,transparent 98%);
            transform:rotate(-8deg) scaleX(.1);
            transform-origin:center;
            box-shadow:0 0 12px rgba(255,213,119,.7);
            animation:combo-sword-cut 420ms cubic-bezier(.14,.73,.21,1) 70ms both;
        }
        .combo-surge-name {
            grid-column:2; grid-row:1;
            align-self:end;
            color:#f4cf77;
            font:900 clamp(13px,3cqw,17px)/1.05 "Noto Serif SC","Cormorant Garamond",serif;
            letter-spacing:.13em;
            text-align:left;
        }
        .combo-surge-number {
            grid-column:1; grid-row:1 / 3;
            min-width:72px;
            color:#fff1ba;
            font:900 clamp(52px,13cqw,72px)/.88 "Cormorant Garamond","Noto Serif SC",serif;
            text-align:right;
            letter-spacing:-.045em;
            text-shadow:0 2px 0 #5b1811,0 0 13px rgba(255,211,104,.72),0 0 28px rgba(181,45,34,.42);
        }
        .combo-surge-detail {
            grid-column:2; grid-row:2;
            align-self:start;
            margin-top:5px;
            color:rgba(255,239,200,.84);
            font:800 clamp(9px,2.2cqw,12px)/1.1 "Source Sans 3","Noto Serif SC",sans-serif;
            letter-spacing:.06em;
            text-align:left;
        }
        .combo-feedback[data-combo="4"],
        .combo-feedback[data-combo="5"] {
            filter:drop-shadow(0 0 12px rgba(197,46,35,.34));
        }
        /* Each threshold should feel like a rung, not the same card with a new
           noun. Scale, edge heat, and number treatment rise in restrained steps. */
        .combo-feedback[data-combo="1"] .combo-surge-number {
            color:#f2dfac;
            text-shadow:0 2px 0 #4a1b15,0 0 8px rgba(231,192,99,.46);
        }
        .combo-feedback[data-combo="2"] {
            border-top-color:rgba(255,224,139,.94) !important;
            box-shadow:0 14px 34px rgba(0,0,0,.38),0 0 28px rgba(196,55,40,.18) !important;
        }
        .combo-feedback[data-combo="3"] .combo-surge-number {
            color:#fff0b0;
            text-shadow:0 2px 0 #651812,0 0 16px rgba(255,211,104,.78),0 0 30px rgba(181,45,34,.46);
        }
        .combo-feedback[data-combo="4"] {
            width:min(80%,356px) !important;
            border-bottom-color:rgba(218,55,41,.94) !important;
        }
        .combo-feedback[data-combo="5"] {
            width:min(84%,372px) !important;
            border-top-width:2px !important;
            border-bottom-width:2px !important;
            box-shadow:0 16px 38px rgba(0,0,0,.44),0 0 38px rgba(218,48,35,.28),inset 0 0 24px rgba(255,213,112,.06) !important;
        }
        .combo-feedback[data-combo="5"] .combo-surge-number {
            color:#fff6cf;
            font-size:clamp(60px,15cqw,80px);
            text-shadow:0 2px 0 #6c130e,0 0 18px rgba(255,226,139,.9),0 0 38px rgba(210,43,31,.66);
        }
        @keyframes combo-sword-cut {
            0% { opacity:0; transform:rotate(-8deg) scaleX(.08); }
            38% { opacity:1; }
            100% { opacity:.62; transform:rotate(-8deg) scaleX(1); }
        }

        /* The result scroll is pale paper. Keep every decision-relevant number
           and recap line comfortably above decorative parchment contrast. */
        #personal-results .result-story {
            color:#514233 !important;
            font-weight:700 !important;
        }
        #personal-results .result-highlight {
            color:#68251f !important;
            font-weight:850 !important;
        }
        .result-stats-grid.v18-final {
            border-top:1px solid rgba(78,48,27,.22) !important;
            border-bottom:1px solid rgba(78,48,27,.22) !important;
            background:rgba(89,53,29,.045) !important;
        }
        .result-stat {
            background:rgba(255,249,228,.18) !important;
        }
        .result-stat:nth-child(3n+2) {
            border-left:1px solid rgba(78,48,27,.15) !important;
            border-right:1px solid rgba(78,48,27,.15) !important;
        }
        .result-stat-value,
        #results-screen[data-clear-quality="flawless"] .result-stat-value {
            color:#17100b !important;
            font-weight:900 !important;
        }
        .result-stat-label {
            color:#493526 !important;
            font-weight:800 !important;
        }
        .result-recap-kicker { color:#5e421d !important; font-weight:900 !important; }
        #result-recap-best { color:#60451d !important; font-weight:800 !important; }
        #result-recap-worst { color:#842f28 !important; font-weight:800 !important; }
        #result-recap-next { color:#33261d !important; font-weight:900 !important; }

        @media (prefers-reduced-motion:reduce) {
            .combo-feedback[data-combo]:not([data-combo=""])::before { animation:none; transform:rotate(-8deg) scaleX(1); }
        }

        /* Boss duel cadence: an authored-looking countdown dial. The ring owns
           remaining time; the number owns combo excitement. */
        #boss-duel-overlay {
            position:absolute;
            top:39%;
            left:calc(50% + clamp(78px,9cqw,112px));
            z-index:109;
            width:clamp(104px,27cqw,148px);
            display:grid;
            justify-items:center;
            pointer-events:none;
            opacity:0;
            transform:translateX(18px) scale(.92);
            transform-origin:left center;
            filter:drop-shadow(0 8px 13px rgba(0,0,0,.52));
            transition:opacity 150ms ease,transform 190ms cubic-bezier(.2,.8,.2,1);
        }
        #boss-duel-overlay[data-active="true"] {
            opacity:1;
            transform:translateX(0) scale(1);
        }
        #game-world:not([data-screen="game"]) #boss-duel-overlay {
            display:none !important;
        }
        #boss-duel-overlay::before {
            content:'';
            position:absolute;
            inset:25% -20%;
            z-index:-1;
            background:radial-gradient(circle,rgba(164,45,31,.24),rgba(15,7,4,.08) 42%,transparent 68%);
            filter:blur(5px);
        }
        #boss-duel-label {
            color:#e4b95f;
            font:900 clamp(10px,2.5cqw,13px)/1 "Noto Serif SC","Cinzel",serif;
            letter-spacing:.14em;
            text-align:center;
            text-shadow:0 2px 3px #130704;
            margin-bottom:-3px;
            z-index:2;
        }
        .boss-duel-ring {
            position:relative;
            width:100%;
            aspect-ratio:1;
            display:grid;
            place-items:center;
            border-radius:50%;
            background:
                radial-gradient(circle at 50% 46%,rgba(255,225,151,.09),transparent 38%),
                radial-gradient(circle,rgba(17,8,5,.84) 0 48%,rgba(71,22,15,.56) 49% 53%,transparent 54%);
            box-shadow:
                inset 0 0 18px rgba(246,190,89,.08),
                0 0 0 1px rgba(86,42,25,.42),
                0 7px 16px rgba(0,0,0,.48);
        }
        .boss-duel-ring::after {
            content:'';
            position:absolute;
            inset:9%;
            border-radius:50%;
            border:1px solid rgba(240,198,112,.22);
            box-shadow:inset 0 0 14px rgba(184,53,34,.18);
        }
        .boss-duel-ring svg {
            position:absolute;
            inset:0;
            width:100%;
            height:100%;
            overflow:visible;
            transform:rotate(-90deg);
            filter:drop-shadow(0 0 5px rgba(221,83,48,.45));
        }
        .boss-duel-ring circle {
            fill:none;
            stroke-linecap:round;
        }
        .boss-duel-ring-track {
            stroke:rgba(83,43,28,.78);
            stroke-width:7;
            stroke-dasharray:2 3;
        }
        #boss-duel-ring-progress {
            stroke:url(#boss-duel-ring-gradient);
            stroke-width:8;
            stroke-dasharray:100;
            stroke-dashoffset:0;
            transition:stroke-dashoffset 60ms linear;
        }
        #boss-duel-count {
            position:relative;
            z-index:2;
            color:#fff1b8;
            font:900 clamp(50px,14cqw,76px)/.78 "Cormorant Garamond","Noto Serif SC",serif;
            letter-spacing:-.07em;
            text-align:center;
            text-shadow:0 3px 0 #6f1e16,0 0 13px rgba(255,212,111,.8),0 0 32px rgba(190,50,37,.55);
            transform-origin:center;
        }
        #boss-duel-time {
            position:absolute;
            z-index:2;
            left:50%;
            bottom:20%;
            transform:translateX(-50%);
            color:#f1c984;
            font:900 clamp(10px,2.4cqw,13px)/1 "Source Sans 3",sans-serif;
            font-variant-numeric:tabular-nums;
            text-shadow:0 2px 3px #160907;
        }
        #boss-duel-overlay.surge #boss-duel-count {
            animation:boss-count-impact 260ms cubic-bezier(.1,.75,.2,1);
        }
        #boss-duel-overlay.milestone #boss-duel-count {
            color:#fff8d0;
            text-shadow:0 3px 0 #8e2319,0 0 18px #ffd774,0 0 46px rgba(220,55,38,.85);
        }
        #boss-duel-overlay.milestone::after {
            content:'';
            position:absolute;
            inset:-24px -28px;
            z-index:-2;
            background:radial-gradient(circle,rgba(238,190,80,.22),rgba(165,37,27,.1) 35%,transparent 68%);
            animation:boss-milestone-flare 520ms ease-out both;
        }
        #boss-duel-overlay.urgent #boss-duel-time,
        #boss-duel-overlay.urgent #boss-duel-label { color:#ff9a7e; }
        #boss-duel-overlay.urgent #boss-duel-ring-progress {
            stroke:#ef634c;
            filter:drop-shadow(0 0 7px rgba(239,70,48,.88));
        }
        #boss-duel-overlay.urgent { animation:boss-window-urgent 410ms ease-in-out infinite alternate; }
        @keyframes boss-count-impact {
            0% { opacity:.25; transform:scale(2.05) rotate(-4deg); filter:blur(2px); }
            55% { opacity:1; transform:scale(.9) rotate(1deg); filter:none; }
            100% { transform:scale(1); }
        }
        @keyframes boss-milestone-flare {
            0% { opacity:1; transform:scale(.45) rotate(-7deg); }
            100% { opacity:0; transform:scale(1.35) rotate(3deg); }
        }
        @keyframes boss-window-urgent {
            to { filter:drop-shadow(0 8px 13px rgba(0,0,0,.52)) drop-shadow(0 0 12px rgba(220,50,37,.62)); }
        }
        @media (max-width:420px) {
            #boss-duel-overlay { left:calc(50% + 70px); width:100px; }
        }
        @media (prefers-reduced-motion:reduce) {
            #boss-duel-overlay,
            #boss-duel-overlay.surge #boss-duel-count,
            #boss-duel-overlay.milestone::after,
            #boss-duel-overlay.urgent { animation:none; transition:none; }
        }

        /* Boss clear is sealed in gold foil. Defeat/timeout keep the cinnabar
           stamp, so the outcome is readable before the player reads a word. */
        #results-screen[data-outcome="victory"] .result-outcome-stamp {
            color:#3b2607 !important;
            border-color:#b67b18 !important;
            outline-color:rgba(255,236,170,.92) !important;
            background:
                radial-gradient(circle at 32% 24%,rgba(255,251,218,.94) 0 7%,transparent 25%),
                linear-gradient(145deg,#fff0ae 0%,#e0b955 38%,#b87c1c 72%,#f0d47d 100%) !important;
            box-shadow:
                inset 0 0 0 2px rgba(102,62,8,.22),
                inset 0 0 16px rgba(255,245,194,.58),
                0 8px 18px rgba(62,31,4,.34),
                0 0 24px rgba(226,177,63,.42) !important;
            filter:drop-shadow(0 5px 6px rgba(46,24,6,.28)) saturate(1.08) !important;
        }
        #results-screen[data-outcome="victory"] .result-outcome-stamp span {
            color:#3b2607 !important;
            text-shadow:0 1px 0 rgba(255,242,177,.72);
        }
        #results-screen[data-outcome="victory"] .boss-victory-honor {
            border-top-color:rgba(160,104,22,.42);
            border-bottom-color:rgba(160,104,22,.42);
            background:linear-gradient(90deg,transparent,rgba(211,164,56,.13),transparent);
        }
        #results-screen[data-outcome="victory"] #boss-victory-kicker {
            color:#9a6417;
        }
        #results-screen[data-outcome="victory"] #boss-victory-title {
            color:#5a3710;
            text-shadow:0 1px 0 rgba(255,238,174,.72);
        }
        #results-screen[data-outcome="victory"] .boss-victory-phases,
        #results-screen[data-outcome="victory"] #boss-victory-detail {
            color:#6b522a;
        }

        /* Perfect clear is a white-gold imperial seal, not the ordinary gold
           clear stamp: nine perfect gates, including the boss gate, are required. */
        #results-screen[data-result-tier="perfect"] {
            background:
                radial-gradient(circle at 50% 14%,rgba(255,244,190,.34),transparent 31%),
                radial-gradient(circle at 50% 72%,rgba(211,165,55,.18),transparent 48%),
                linear-gradient(180deg,#211a0f 0%,#080604 78%,#030302 100%) !important;
        }
        #results-screen[data-result-tier="perfect"]::before {
            background:
                linear-gradient(90deg,rgba(5,4,3,.54),transparent 20%,transparent 80%,rgba(5,4,3,.54)),
                radial-gradient(ellipse at 50% 3%,rgba(255,244,202,.30),transparent 42%);
        }
        #results-screen[data-result-tier="perfect"] #personal-results {
            filter:
                drop-shadow(0 24px 30px rgba(0,0,0,.58))
                drop-shadow(0 0 26px rgba(255,220,119,.32)) !important;
            animation:perfect-result-aura 2.8s ease-in-out infinite;
        }
        #results-screen[data-result-tier="perfect"] .results-title {
            color:#674413 !important;
            letter-spacing:.16em;
            text-shadow:0 1px 0 rgba(255,248,213,.92),0 0 12px rgba(208,155,40,.20) !important;
        }
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp[data-outcome="flawless"] {
            color:#342407 !important;
            border-color:#d5ad4e !important;
            outline-color:rgba(255,255,239,.98) !important;
            background:
                radial-gradient(circle at 30% 22%,rgba(255,255,255,.96) 0 9%,transparent 28%),
                conic-gradient(from 25deg,#fffdf0,#d6b04c,#fff5bd,#b47a18,#fff9d7,#d6b04c,#fffdf0) !important;
            box-shadow:
                inset 0 0 0 2px rgba(112,72,8,.20),
                inset 0 0 18px rgba(255,255,246,.82),
                0 9px 20px rgba(57,31,3,.34),
                0 0 10px rgba(255,255,238,.92),
                0 0 34px rgba(244,202,88,.64) !important;
            filter:drop-shadow(0 5px 7px rgba(40,22,3,.32)) saturate(.96) brightness(1.08) !important;
        }
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp span {
            color:#342407 !important;
            text-shadow:0 1px 0 #fffbe0,0 0 7px rgba(255,255,243,.86);
        }
        #results-screen[data-result-tier="perfect"] .boss-victory-honor {
            border-top-color:rgba(184,132,29,.62);
            border-bottom-color:rgba(184,132,29,.62);
            background:
                radial-gradient(ellipse at 50% 50%,rgba(255,239,175,.34),transparent 68%),
                linear-gradient(90deg,transparent,rgba(212,164,55,.20),transparent);
        }
        #results-screen[data-result-tier="perfect"] #boss-victory-kicker {
            color:#aa741d;
            letter-spacing:.28em;
        }
        #results-screen[data-result-tier="perfect"] #boss-victory-title {
            color:#4a2b08;
            text-shadow:0 1px 0 #fff3bd,0 0 11px rgba(216,162,42,.25);
        }
        @keyframes perfect-result-aura {
            0%,100% {
                filter:drop-shadow(0 24px 30px rgba(0,0,0,.58)) drop-shadow(0 0 22px rgba(255,220,119,.24));
            }
            50% {
                filter:drop-shadow(0 24px 30px rgba(0,0,0,.58)) drop-shadow(0 0 34px rgba(255,231,145,.46));
            }
        }
        @media (prefers-reduced-motion:reduce) {
            #results-screen[data-result-tier="perfect"] #personal-results { animation:none; }
        }

        /* Keep the seal on-screen when the parchment is taller than the
           viewport; auto margins still center the parchment when space allows. */
        #results-screen .results-content:not(.leaderboard-only) {
            justify-content:flex-start !important;
        }
        #results-screen .results-content:not(.leaderboard-only) #personal-results {
            flex-shrink:0;
            margin-block:auto !important;
        }

    

        /* ── Friend PK arena board (results screen) ─────────────────────────
           A podium the eye reads before the text does: rank is height and
           colour first, the number second. Ordinal digits are deliberately
           absent from the top three -- the step already says it, and the
           medal reads the same in both languages, which the rest of this
           game's art has to as well. */
        .arena-board {
            width: min(96%, 520px);
            margin: 18px auto 4px;
            padding: 16px 16px 12px;
            border: 1px solid rgba(226,193,115,.42);
            border-radius: 14px;
            background:
                radial-gradient(circle at 50% 0%, rgba(226,193,115,0.10), transparent 62%),
                linear-gradient(160deg, rgba(26,22,18,0.92) 0%, rgba(14,12,10,0.96) 100%);
            box-shadow: 0 18px 46px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.10);
        }
        .arena-board[hidden] { display: none; }
        .arena-board-kicker {
            font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
            color: rgba(226,193,115,.78); text-align: center;
        }
        .arena-board-title {
            margin: 2px 0 14px; text-align: center;
            font-size: clamp(18px, 4.4vw, 22px); color: #fdf4de; font-weight: 600;
        }

        .arena-podium {
            display: grid; grid-template-columns: 1fr 1.14fr 1fr;
            align-items: end; gap: 8px;
            margin: 0 0 12px; padding: 0; list-style: none;
        }
        .arena-podium-step {
            display: flex; flex-direction: column; align-items: center; gap: 4px;
            padding: 10px 6px 8px; border-radius: 10px 10px 4px 4px;
            border: 1px solid rgba(226,193,115,.28);
            background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
            min-width: 0;
        }
        /* Height carries the rank; the tallest step sits in the middle. */
        .arena-podium-step[data-rank="1"] { min-height: 128px; border-color: rgba(232,196,106,.85);
            background: linear-gradient(180deg, rgba(232,196,106,.24), rgba(232,196,106,.05)); }
        .arena-podium-step[data-rank="2"] { min-height: 104px; border-color: rgba(206,206,206,.6);
            background: linear-gradient(180deg, rgba(214,214,214,.18), rgba(214,214,214,.04)); }
        .arena-podium-step[data-rank="3"] { min-height: 88px; border-color: rgba(196,138,86,.6);
            background: linear-gradient(180deg, rgba(196,138,86,.18), rgba(196,138,86,.04)); }
        .arena-podium-medal { font-size: clamp(20px, 5vw, 26px); line-height: 1; }
        .arena-podium-name {
            font-size: 13px; color: #f3e7cd; max-width: 100%;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .arena-podium-score {
            font-variant-numeric: tabular-nums; font-size: clamp(14px, 3.6vw, 17px);
            color: #fdf4de; font-weight: 600;
        }
        .arena-tries { font-size: 11px; color: rgba(226,193,115,.72); }

        .arena-rest { margin: 0 0 12px; padding: 0; list-style: none; }
        .arena-rest-row {
            display: grid; grid-template-columns: 26px 1fr auto;
            align-items: center; gap: 8px;
            padding: 6px 8px; border-radius: 8px;
            border-bottom: 1px solid rgba(226,193,115,.14);
        }
        .arena-rest-row:last-child { border-bottom: 0; }
        .arena-rank { font-variant-numeric: tabular-nums; color: rgba(226,193,115,.7); font-size: 13px; }
        .arena-name { color: #eadfc6; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .arena-score { font-variant-numeric: tabular-nums; color: #fdf4de; font-size: 14px; }
        /* Finding yourself must not need reading. */
        .arena-self, .arena-podium-step.arena-self {
            border: 1px solid rgba(232,196,106,.9);
            background: linear-gradient(90deg, rgba(232,196,106,.18), rgba(232,196,106,.04));
            box-shadow: 0 0 0 1px rgba(232,196,106,.25), 0 0 18px rgba(232,196,106,.16);
        }

        /* The board is the point; the actions sit under it rather than
           swallowing it. .button is the full-width primary used elsewhere on
           this screen, so its scale is overridden here on purpose. */
        .arena-board-actions { display: flex; gap: 10px; justify-content: center; }
        .arena-board-actions .button {
            flex: 1 1 0; min-width: 0; width: auto;
            margin: 0; padding: 10px 12px;
            font-size: clamp(14px, 3.4vw, 16px); line-height: 1.2;
            letter-spacing: .04em;
        }
        .arena-board-status { margin-top: 8px; text-align: center; font-size: 12px; color: rgba(226,193,115,.8); min-height: 16px; }

        /* ── Arena hub: rooms + overall board (inside the Friend PK modal) ── */
        .pk-empty { margin: 6px 0 0; font-size: 13px; color: rgba(226,193,115,.7); line-height: 1.6; }
        .arena-room-row {
            display: flex; align-items: center; gap: 10px; justify-content: space-between;
            padding: 8px 4px; border-bottom: 1px solid rgba(226,193,115,.16);
        }
        .arena-room-row:last-child { border-bottom: 0; }
        .arena-room-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .arena-room-title { font-size: 13px; color: #f3e7cd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .arena-room-sub { font-size: 11px; color: rgba(226,193,115,.72); font-variant-numeric: tabular-nums; }
        .arena-room-actions { display: flex; gap: 6px; flex: 0 0 auto; }

        .arena-totals-help { margin: 2px 0 8px; font-size: 12px; color: rgba(226,193,115,.72); }
        .arena-totals-list { margin: 0; padding: 0; list-style: none; }
        .arena-total-row { border-bottom: 1px solid rgba(226,193,115,.14); border-radius: 8px; }
        .arena-total-row:last-child { border-bottom: 0; }
        .arena-total-row summary {
            display: grid; grid-template-columns: 26px 1fr auto;
            align-items: center; gap: 8px; padding: 7px 8px; cursor: pointer;
            list-style: none;
        }
        .arena-total-row summary::-webkit-details-marker { display: none; }
        .arena-total-detail {
            display: flex; flex-wrap: wrap; gap: 6px 12px;
            padding: 2px 8px 9px 34px;
            font-size: 11px; color: rgba(226,193,115,.78); font-variant-numeric: tabular-nums;
        }
        /* Best single round is what a latecomer can still win, so it reads first. */
        .arena-total-best { color: #e8c46a; }

        /* ======================================================================
           RESULTS V7 — one-screen battle record.
           The report and its actions share the game viewport; no result requires
           a swipe. Outcome seals are ink impressions, never metallic plaques.
           ====================================================================== */
        #results-screen {
            overflow: hidden !important;
        }
        #results-screen .results-content:not(.leaderboard-only) {
            box-sizing: border-box !important;
            width: 100% !important;
            height: 100% !important;
            min-height: 0 !important;
            padding: max(54px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom)) !important;
            display: grid !important;
            grid-template-rows: minmax(0, 1fr) auto !important;
            justify-items: center !important;
            align-items: center !important;
            gap: 7px !important;
            overflow: hidden !important;
        }
        #results-screen .results-content:not(.leaderboard-only)::after {
            display: none !important;
        }
        #results-screen .results-content:not(.leaderboard-only) #personal-results {
            box-sizing: border-box !important;
            width: min(94%, 468px) !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: 804px !important;
            margin: 0 !important;
            padding: clamp(22px, 3.1vh, 30px) clamp(24px, 6cqw, 36px) clamp(17px, 2.5vh, 25px) !important;
            flex-shrink: 1 !important;
            overflow: hidden !important;
            color: #261c14 !important;
            background:
                linear-gradient(180deg, rgba(255, 251, 233, .10), rgba(116, 72, 30, .08)),
                transparent url('../assets/images/ui/wuxia_result_scroll.png') center/100% 100% no-repeat !important;
            filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .52)) !important;
        }
        #personal-results::before {
            content: '' !important;
            display: block !important;
            position: absolute !important;
            inset: 20px 18px !important;
            z-index: -1 !important;
            border: 0 !important;
            border-top: 1px solid rgba(102, 61, 27, .16) !important;
            border-bottom: 1px solid rgba(102, 61, 27, .13) !important;
            border-radius: 0 !important;
            background:
                radial-gradient(circle at 13% 12%, rgba(136, 43, 34, .055), transparent 18%),
                radial-gradient(circle at 87% 88%, rgba(133, 91, 33, .065), transparent 20%) !important;
            box-shadow: none !important;
            pointer-events: none !important;
        }
        #personal-results::after {
            display: none !important;
        }
        #personal-results .result-kicker {
            margin: 0 0 3px !important;
            color: #8a672f !important;
            font-size: 9px !important;
            letter-spacing: .24em !important;
        }
        #personal-results .result-heading-row {
            min-height: 0 !important;
        }
        #personal-results .results-title,
        #results-screen[data-outcome="victory"] .results-title,
        #results-screen[data-clear-quality="masterful"] .results-title,
        #results-screen[data-clear-quality="flawless"] .results-title {
            width: 78% !important;
            max-width: 78% !important;
            margin: 0 auto 2px !important;
            color: #6f261f !important;
            font-size: clamp(27px, 7.2cqw, 38px) !important;
            line-height: 1.02 !important;
            letter-spacing: .025em !important;
            text-shadow: none !important;
        }
        #personal-results .results-score,
        #results-screen[data-outcome="victory"] .results-score,
        #results-screen[data-clear-quality="flawless"] .results-score {
            margin: 2px 0 3px !important;
            color: #211710 !important;
            font-size: clamp(43px, 11.5cqw, 60px) !important;
            line-height: .92 !important;
            text-shadow: 0 2px 7px rgba(61, 34, 15, .11) !important;
        }
        #personal-results .result-highlight {
            width: 80% !important;
            margin: 3px auto 1px !important;
            color: #742a23 !important;
            font-size: clamp(12px, 3cqw, 15px) !important;
            line-height: 1.25 !important;
        }
        #personal-results .result-story {
            width: 86% !important;
            margin: 1px auto 5px !important;
            color: #5d4d3d !important;
            font-size: clamp(9px, 2.35cqw, 12px) !important;
            line-height: 1.3 !important;
        }

        /* Ordinary clear: restrained gold ink. Perfect: brighter double-ring
           impression. Neither reads as a shiny UI badge pasted onto the paper. */
        .result-outcome-stamp {
            top: clamp(22px, 3.2vh, 30px) !important;
            right: clamp(24px, 6.5%, 36px) !important;
            width: clamp(48px, 12.5cqw, 58px) !important;
            aspect-ratio: 1 !important;
            border: 2px solid currentColor !important;
            border-radius: 48% 52% 46% 54% / 52% 45% 55% 48% !important;
            outline: 1px solid currentColor !important;
            outline-offset: -6px !important;
            background: rgba(139, 43, 34, .035) !important;
            box-shadow: inset 0 0 0 1px rgba(255, 248, 224, .2) !important;
            filter: none !important;
            mix-blend-mode: multiply;
        }
        .result-outcome-stamp span {
            max-width: 42px !important;
            color: currentColor !important;
            font-size: clamp(13px, 3.5cqw, 17px) !important;
            line-height: .95 !important;
            letter-spacing: .06em;
            text-shadow: none !important;
        }
        #results-screen[data-outcome="victory"] .result-outcome-stamp {
            color: #9a681d !important;
            border-color: currentColor !important;
            outline-color: rgba(154, 104, 29, .68) !important;
            background:
                radial-gradient(circle at 45% 48%, rgba(183, 132, 41, .07), transparent 63%) !important;
            box-shadow: none !important;
            filter: none !important;
        }
        #results-screen[data-outcome="victory"] .result-outcome-stamp span {
            color: currentColor !important;
            text-shadow: none !important;
        }
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp[data-outcome="flawless"] {
            color: #9b691d !important;
            border: 3px double currentColor !important;
            outline-color: rgba(202, 164, 74, .72) !important;
            background:
                radial-gradient(circle, rgba(216, 177, 81, .13), transparent 68%) !important;
            box-shadow: 0 0 18px rgba(222, 184, 88, .20) !important;
            filter: none !important;
        }
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp span {
            color: currentColor !important;
            text-shadow: none !important;
        }

        #personal-results .boss-victory-honor {
            margin: 4px 0 5px !important;
            padding: 6px 8px 5px !important;
            min-height: 0 !important;
            border-top-color: rgba(133, 84, 26, .24) !important;
            border-bottom-color: rgba(139, 43, 34, .20) !important;
            background: linear-gradient(90deg, transparent, rgba(161, 113, 38, .07), transparent) !important;
        }
        #personal-results .boss-victory-honor::after {
            display: none !important;
        }
        #personal-results #boss-victory-kicker {
            color: #95651c !important;
            font-size: 8px !important;
        }
        #personal-results #boss-victory-title {
            margin-top: 1px !important;
            color: #5a3917 !important;
            font-size: clamp(17px, 4.4cqw, 21px) !important;
            text-shadow: none !important;
        }
        #personal-results .boss-victory-phases {
            margin: 4px 0 2px !important;
            color: #6f5940 !important;
            font-size: 8px !important;
        }
        #personal-results #boss-victory-detail {
            color: #67523b !important;
            font-size: 8px !important;
        }
        #personal-results .relic-progression {
            margin: 1px 0 4px !important;
            padding: 5px 2px 0 !important;
            border-top-color: rgba(94, 57, 25, .15) !important;
        }
        #personal-results .relic-next-row {
            min-height: 22px !important;
        }
        #personal-results #relic-next-label {
            color: #8a672f !important;
            font-size: 7px !important;
        }
        #personal-results #relic-next-goal {
            color: #574636 !important;
            font-size: 9px !important;
        }
        #personal-results #relic-next-value {
            color: #8f332a !important;
            font-size: 10px !important;
        }
        #personal-results .relic-progress-track {
            height: 3px !important;
            margin-top: 3px !important;
        }
        #personal-results .relic-unlock-card {
            grid-template-columns: 40px minmax(0, 1fr) !important;
            min-height: 42px !important;
            gap: 7px !important;
            margin-bottom: 4px !important;
            padding-bottom: 4px !important;
        }
        #personal-results .relic-unlock-art,
        #personal-results #relic-unlock-image {
            width: 38px !important;
            height: 38px !important;
        }
        #personal-results #relic-unlock-name { font-size: 14px !important; }
        #personal-results #relic-unlock-effect { font-size: 8px !important; }

        #personal-results .result-stats-grid.v18-final {
            width: 100% !important;
            margin: 1px auto 4px !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 0 !important;
            border-top: 1px solid rgba(81, 48, 24, .15) !important;
            border-bottom: 1px solid rgba(81, 48, 24, .13) !important;
            background: rgba(106, 70, 34, .025) !important;
        }
        #personal-results .result-stat {
            min-height: 38px !important;
            padding: 5px 3px 4px !important;
            border: 0 !important;
            background: transparent !important;
        }
        #personal-results .result-stat::before {
            display: none !important;
        }
        #personal-results .result-stat:nth-child(3n+2) {
            border-left: 1px solid rgba(81, 48, 24, .12) !important;
            border-right: 1px solid rgba(81, 48, 24, .12) !important;
        }
        #personal-results .result-stat-value,
        #results-screen[data-clear-quality="flawless"] .result-stat-value {
            color: #241a12 !important;
            font-size: clamp(14px, 3.7cqw, 18px) !important;
        }
        #personal-results .result-stat-label {
            margin-top: 2px !important;
            color: #695847 !important;
            font-size: 8px !important;
            letter-spacing: .04em !important;
        }
        #personal-results .result-recap {
            width: 100% !important;
            margin: 0 !important;
            padding: 5px 8px 4px !important;
            gap: 1px !important;
            border: 0 !important;
            border-radius: 0 !important;
            border-top: 1px solid rgba(116, 54, 38, .16) !important;
            background: linear-gradient(90deg, transparent, rgba(112, 70, 31, .045), transparent) !important;
        }
        #personal-results .result-recap-kicker {
            color: #795829 !important;
            font-size: 7px !important;
        }
        #personal-results .result-recap-line1,
        #personal-results .result-recap-line2 {
            font-size: clamp(9px, 2.25cqw, 11px) !important;
            line-height: 1.22 !important;
        }
        #personal-results #result-recap-next {
            margin-top: 1px !important;
            color: #4f3a27 !important;
            font-size: clamp(10px, 2.5cqw, 12px) !important;
            text-shadow: none !important;
        }

        #results-screen .results-content:not(.leaderboard-only) > .button-row {
            box-sizing: border-box !important;
            width: min(94%, 468px) !important;
            margin: 0 !important;
            gap: 5px !important;
        }
        #results-screen .button-row:not(.has-revenge) {
            grid-template-areas: "primary primary" "menu share" !important;
        }
        #results-screen .button-row .button,
        #results-screen .button-row #restart-button.primary-result-cta,
        #results-screen .button-row .button.secondary {
            min-height: 34px !important;
            padding: 6px 16px !important;
            font-size: clamp(10px, 2.6cqw, 13px) !important;
            line-height: 1.05 !important;
        }
        #results-screen .button-row #restart-button.primary-result-cta {
            min-height: 40px !important;
            color: #8f2e25 !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent url('../assets/images/ui/wuxia_choice_plate.png') center/100% 100% no-repeat !important;
            box-shadow: none !important;
        }

        @media (max-height: 760px) {
            #results-screen .results-content:not(.leaderboard-only) {
                padding-top: 46px !important;
                padding-bottom: 5px !important;
                gap: 4px !important;
            }
            #results-screen .results-content:not(.leaderboard-only) #personal-results {
                padding: 17px 22px 13px !important;
            }
            #personal-results .result-kicker { display: none !important; }
            #personal-results .results-title,
            #results-screen[data-outcome="victory"] .results-title {
                font-size: clamp(24px, 6.4cqw, 31px) !important;
            }
            #personal-results .results-score,
            #results-screen[data-outcome="victory"] .results-score {
                font-size: clamp(38px, 9.8cqw, 48px) !important;
            }
            #personal-results .boss-victory-phases { display: none !important; }
            #personal-results .boss-victory-honor { padding-block: 4px !important; }
            #personal-results .relic-unlock-card {
                grid-template-columns: 32px minmax(0, 1fr) !important;
                min-height: 34px !important;
            }
            #personal-results .relic-unlock-art,
            #personal-results #relic-unlock-image {
                width: 30px !important;
                height: 30px !important;
            }
            #personal-results .result-stat {
                min-height: 34px !important;
                padding-block: 3px !important;
            }
            #results-screen .button-row .button,
            #results-screen .button-row #restart-button.primary-result-cta,
            #results-screen .button-row .button.secondary {
                min-height: 30px !important;
                padding-block: 4px !important;
            }
            #results-screen .button-row #restart-button.primary-result-cta {
                min-height: 35px !important;
            }
        }

        /* ======================================================================
           DIRECTOR PASS V8 — bodies own the field; HUD recedes; the result is a
           ceremonial poster before it becomes a report.
           ====================================================================== */
        #hud {
            gap: 0 !important;
            padding: 0 9px !important;
            border-top: 1px solid rgba(235,211,155,.18);
            border-bottom: 1px solid rgba(137,95,49,.24);
            background: linear-gradient(90deg, transparent, rgba(10,9,8,.72) 7%, rgba(10,9,8,.82) 50%, rgba(10,9,8,.72) 93%, transparent);
            box-shadow: 0 8px 18px rgba(0,0,0,.16);
        }
        .hud-item {
            min-height: 39px !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
        }
        .hud-item + .hud-item {
            border-left: 1px solid rgba(226,193,115,.15) !important;
        }
        .hud-label { opacity:.78; }

        #gate-hud, #gate-hud.ink-banner {
            min-height: 41px !important;
            padding: 5px 11px 6px !important;
            border-left: 0 !important;
            border-right: 0 !important;
            border-radius: 0 !important;
            background: linear-gradient(90deg, transparent, rgba(12,10,8,.79) 9%, rgba(12,10,8,.90) 50%, rgba(12,10,8,.79) 91%, transparent) !important;
            box-shadow: 0 7px 16px rgba(0,0,0,.16) !important;
        }
        #gate-threat { font-size: 11px !important; }
        #gate-next { opacity:.72; }

        #personal-results .result-heading-row {
            position: relative !important;
            min-height: clamp(56px, 8vh, 76px) !important;
            display: flex !important;
            align-items: flex-end !important;
            overflow: visible !important;
            isolation: isolate;
        }
        #personal-results .result-heading-row::before {
            content: '';
            position: absolute;
            z-index: -1;
            left: 4%;
            top: -22%;
            width: 86%;
            height: 142%;
            background: url('../assets/images/vfx/slash_impact_02.png') center/contain no-repeat;
            opacity: .15;
            mix-blend-mode: multiply;
            transform: rotate(-7deg) scaleX(1.06);
            filter: saturate(.72) contrast(1.08);
            pointer-events: none;
        }
        #results-screen[data-outcome="victory"] #personal-results .result-heading-row::before {
            opacity: .20;
            filter: sepia(.35) saturate(.72) hue-rotate(350deg) contrast(1.06);
        }
        #personal-results .results-title,
        #results-screen[data-outcome="victory"] .results-title,
        #results-screen[data-clear-quality="masterful"] .results-title,
        #results-screen[data-clear-quality="flawless"] .results-title {
            width: 82% !important;
            max-width: 82% !important;
            margin: 0 0 5px 3% !important;
            text-align: left !important;
            font-size: clamp(30px, 7.8cqw, 42px) !important;
            line-height: .98 !important;
        }
        #personal-results .results-score,
        #results-screen[data-outcome="victory"] .results-score,
        #results-screen[data-clear-quality="flawless"] .results-score {
            margin: -2px 0 8px 3% !important;
            text-align: left !important;
            font-size: clamp(49px, 12.7cqw, 68px) !important;
            letter-spacing: -.055em !important;
        }
        #personal-results .result-kicker {
            margin-left: 3% !important;
            text-align: left !important;
        }
        .result-outcome-stamp {
            top: clamp(25px, 3.5vh, 34px) !important;
            right: 8% !important;
            width: clamp(52px, 13.5cqw, 64px) !important;
            transform: rotate(7deg);
        }
        #personal-results .result-highlight,
        #personal-results .result-story {
            width: 94% !important;
            text-align: left !important;
        }
        #personal-results .result-stats-grid.v18-final {
            margin-top: 6px !important;
            background: linear-gradient(90deg, transparent, rgba(106,70,34,.045) 8%, rgba(106,70,34,.055) 50%, rgba(106,70,34,.045) 92%, transparent) !important;
        }
        #personal-results .result-recap { margin-top: 4px !important; }

        @media (min-height:761px) {
            #results-screen .results-content:not(.leaderboard-only) {
                grid-template-rows: minmax(0, .92fr) auto !important;
                padding-top: max(42px, env(safe-area-inset-top)) !important;
                gap: 9px !important;
            }
            #results-screen .results-content:not(.leaderboard-only) #personal-results {
                width: min(96%, 486px) !important;
                padding: 32px 38px 28px !important;
                transform: translateY(-5px);
            }
            #results-screen .results-content:not(.leaderboard-only) > .button-row {
                width: min(96%, 486px) !important;
            }
        }

        @media (max-height:760px) {
            #personal-results .result-heading-row { min-height: 48px !important; }
            #personal-results .results-title,
            #results-screen[data-outcome="victory"] .results-title { font-size:clamp(25px,6.8cqw,34px) !important; }
            #personal-results .results-score,
            #results-screen[data-outcome="victory"] .results-score { font-size:clamp(41px,10.6cqw,54px) !important; }
        }

        /* ======================================================================
           FINAL DIRECTION PASS V9 — paper, brush, number, seal. One authored
           result beat instead of every dashboard child appearing at once.
           ====================================================================== */
        #results-screen.ceremony-enter #personal-results {
            animation:result-paper-unfurl 480ms cubic-bezier(.18,.76,.24,1) both;
            transform-origin:50% 12%;
        }
        #results-screen.ceremony-enter .result-heading-row,
        #results-screen.ceremony-enter .result-kicker {
            animation:result-brush-enter 420ms 150ms cubic-bezier(.2,.75,.25,1) both;
        }
        #results-screen.ceremony-enter .results-score {
            animation:result-number-settle 420ms 260ms cubic-bezier(.18,.8,.25,1) both;
        }
        #results-screen.ceremony-enter .result-highlight,
        #results-screen.ceremony-enter .result-story,
        #results-screen.ceremony-enter .relic-progression,
        #results-screen.ceremony-enter .result-stats-grid,
        #results-screen.ceremony-enter .result-recap {
            animation:result-report-reveal 300ms 390ms ease-out both;
        }
        #results-screen.ceremony-enter .results-content:not(.leaderboard-only) > .button-row {
            animation:result-actions-rise 300ms 650ms ease-out both;
        }
        @keyframes result-paper-unfurl {
            0% { opacity:1; clip-path:inset(0 0 0 0); filter:none; }
            100% { opacity:1; clip-path:inset(0 0 0 0); filter:none; }
        }
        @keyframes result-brush-enter {
            0% { opacity:0; clip-path:inset(0 100% 0 0); filter:blur(1.5px); }
            100% { opacity:1; clip-path:inset(0 0 0 0); filter:blur(0); }
        }
        @keyframes result-number-settle {
            0% { opacity:0; letter-spacing:.08em; filter:blur(2px); }
            100% { opacity:1; letter-spacing:-.055em; filter:blur(0); }
        }
        @keyframes result-report-reveal {
            from { opacity:0; filter:blur(1px); }
            to { opacity:1; filter:blur(0); }
        }
        @keyframes result-actions-rise {
            from { opacity:0; transform:translateY(8px); }
            to { opacity:1; transform:translateY(0); }
        }
        @media (prefers-reduced-motion:reduce) {
            #results-screen.ceremony-enter #personal-results,
            #results-screen.ceremony-enter .result-heading-row,
            #results-screen.ceremony-enter .result-kicker,
            #results-screen.ceremony-enter .results-score,
            #results-screen.ceremony-enter .result-highlight,
            #results-screen.ceremony-enter .result-story,
            #results-screen.ceremony-enter .relic-progression,
            #results-screen.ceremony-enter .result-stats-grid,
            #results-screen.ceremony-enter .result-recap,
            #results-screen.ceremony-enter .results-content:not(.leaderboard-only) > .button-row,
            .result-outcome-stamp.landed {
                animation:none !important;
                opacity:1;
                filter:none;
                clip-path:none;
                transform:none;
            }
        }

        /* === Ink, cinnabar, jade and aged-gold cohesion pass === */
        #stroke-result {
            max-width:min(76%,320px) !important;
            padding:7px 20px 8px !important;
            border:0 !important;
            border-top:1px solid rgba(181,128,54,.56) !important;
            border-bottom:1px solid rgba(110,35,28,.46) !important;
            border-radius:0 !important;
            background:linear-gradient(90deg,transparent,rgba(18,17,13,.82) 16%,rgba(27,24,17,.88) 50%,rgba(18,17,13,.82) 84%,transparent) !important;
            color:#ead9ad !important;
            font:800 12px/1.15 "Noto Serif SC","Source Sans 3",serif !important;
            letter-spacing:.08em !important;
            text-shadow:0 1px 2px rgba(0,0,0,.8) !important;
            box-shadow:none !important;
        }
        #stroke-result.success { color:#e0bd66 !important; border-bottom-color:rgba(49,95,92,.52) !important; }
        #stroke-result.danger { color:#d66b5d !important; border-top-color:rgba(157,48,39,.68) !important; }

        .combo-feedback[data-combo]:not([data-combo=""]) {
            width:min(62%,286px) !important;
            min-height:72px !important;
            padding:10px 26px 11px !important;
            column-gap:10px !important;
            border-top:1px solid rgba(186,139,61,.72) !important;
            border-bottom:1px solid rgba(50,94,90,.54) !important;
            background:
                linear-gradient(104deg,transparent,rgba(25,23,17,.88) 13%,rgba(35,29,19,.91) 50%,rgba(19,23,21,.88) 87%,transparent) !important;
            box-shadow:0 9px 22px rgba(0,0,0,.24) !important;
            filter:none !important;
        }
        .combo-feedback[data-combo]:not([data-combo=""])::before {
            height:1px !important;
            background:linear-gradient(90deg,transparent,#8f332b 28%,#c49a45 52%,#315f5c 78%,transparent) !important;
            box-shadow:none !important;
            animation-duration:320ms !important;
        }
        .combo-surge-number,
        .combo-feedback[data-combo="5"] .combo-surge-number {
            min-width:50px !important;
            color:#d8b45d !important;
            font:900 clamp(39px,10cqw,52px)/.88 "Noto Serif SC","Cormorant Garamond",serif !important;
            letter-spacing:-.04em !important;
            text-shadow:0 1px 0 #501c17,0 0 8px rgba(205,158,65,.28) !important;
        }
        .combo-surge-name { color:#d4ad55 !important; font-size:clamp(12px,2.8cqw,15px) !important; }
        .combo-surge-detail { color:rgba(230,218,181,.82) !important; font-family:"Noto Serif SC","Source Sans 3",serif !important; }
        .combo-feedback[data-combo="4"],
        .combo-feedback[data-combo="5"] { width:min(68%,306px) !important; box-shadow:0 10px 25px rgba(0,0,0,.28),0 0 16px rgba(151,48,38,.10) !important; }

        /* Boss chain: restore the dark circular sword-intent dial. The pale
           paper ticket flattened the climax and covered the fighter. */
        #boss-duel-overlay {
            width:clamp(104px,27cqw,142px) !important;
            left:calc(50% + clamp(72px,8cqw,96px)) !important;
            filter:drop-shadow(0 9px 15px rgba(0,0,0,.58)) !important;
        }
        #boss-duel-label {
            margin-bottom:-3px !important;
            color:#efc86d !important;
            font-family:"Noto Serif SC","Cinzel",serif !important;
            text-shadow:0 2px 4px #160806,0 0 11px rgba(224,167,65,.35) !important;
        }
        .boss-duel-ring {
            aspect-ratio:1 !important;
            border-radius:50% !important;
            border:1px solid rgba(237,193,96,.48) !important;
            outline:0 !important;
            background:
                radial-gradient(circle at 48% 44%,rgba(255,220,125,.10),transparent 34%),
                radial-gradient(circle,rgba(22,10,7,.96) 0 48%,rgba(91,27,18,.82) 49% 55%,rgba(17,8,6,.96) 57% 68%,transparent 69%),
                conic-gradient(from -16deg,#7d251d,#d29f46,#561813,#e1bc63,#671d18,#d29f46,#7d251d) !important;
            box-shadow:inset 0 0 22px rgba(238,184,74,.10),0 0 0 3px rgba(47,17,12,.76),0 8px 18px rgba(0,0,0,.50),0 0 24px rgba(163,45,32,.20) !important;
            transform:none !important;
        }
        .boss-duel-ring::after {
            inset:10% !important;
            border-radius:50% !important;
            border:1px solid rgba(247,211,126,.28) !important;
            box-shadow:inset 0 0 16px rgba(161,42,30,.22) !important;
        }
        .boss-duel-ring svg { opacity:1 !important; filter:drop-shadow(0 0 5px rgba(231,79,47,.50)) !important; }
        .boss-duel-ring-track { stroke:rgba(87,44,27,.86) !important; stroke-width:7 !important; }
        #boss-duel-ring-progress { stroke:url(#boss-duel-ring-gradient) !important; stroke-width:8 !important; }
        #boss-duel-count {
            color:#fff0b0 !important;
            font:900 clamp(50px,14cqw,74px)/.78 "Cormorant Garamond","Noto Serif SC",serif !important;
            letter-spacing:-.07em !important;
            text-shadow:0 3px 0 #6f1e16,0 0 14px rgba(255,212,111,.82),0 0 34px rgba(190,50,37,.60) !important;
        }
        #boss-duel-time { bottom:19% !important; color:#efc779 !important; font-family:"Source Sans 3","Noto Serif SC",serif !important; text-shadow:0 2px 3px #160907 !important; }
        #boss-duel-overlay.urgent #boss-duel-time,
        #boss-duel-overlay.urgent #boss-duel-label { color:#ff977e !important; }

        /* Results V10: an imperial decree occupies the stage. The previous
           compact paper card looked like a receipt and made the square seal an
           afterthought. */
        #results-screen .results-content:not(.leaderboard-only) {
            padding:max(42px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)) !important;
            gap:6px !important;
        }
        #results-screen .results-content:not(.leaderboard-only) #personal-results {
            width:min(96%,520px) !important;
            min-height:min(76dvh,780px) !important;
            max-height:min(82dvh,840px) !important;
            padding:clamp(38px,5.4vh,58px) clamp(30px,7cqw,46px) clamp(28px,4vh,40px) !important;
            background:
                linear-gradient(180deg,rgba(255,251,233,.04),rgba(116,72,30,.055)),
                transparent url('../assets/images/ui/wuxia_result_scroll.png') center/100% 100% no-repeat !important;
            filter:drop-shadow(0 26px 34px rgba(0,0,0,.62)) drop-shadow(0 0 1px rgba(239,205,130,.38)) !important;
        }
        #personal-results::before {
            inset:28px 24px !important;
            border-top:1px solid rgba(102,61,27,.20) !important;
            border-bottom:1px solid rgba(102,61,27,.18) !important;
        }
        #personal-results .results-title,
        #results-screen[data-outcome="victory"] .results-title {
            font-size:clamp(34px,8.5cqw,46px) !important;
            letter-spacing:.05em !important;
        }
        #personal-results .results-score,
        #results-screen[data-outcome="victory"] .results-score {
            margin:8px 0 10px !important;
            font-size:clamp(52px,13cqw,70px) !important;
        }
        #personal-results .result-highlight { margin-top:5px !important; font-size:clamp(13px,3.2cqw,16px) !important; }
        #personal-results .result-story { margin-bottom:10px !important; font-size:clamp(10px,2.55cqw,13px) !important; }
        #personal-results .result-stats-grid.v18-final { margin:7px auto 10px !important; }
        #personal-results .result-stat { min-height:46px !important; padding:7px 3px 6px !important; }
        #personal-results .result-recap { padding:9px 12px 8px !important; }
        #results-screen .results-content:not(.leaderboard-only) > .button-row { width:min(96%,520px) !important; }

        /* Imperial result seal: square cinnabar imprint with an inner seal frame. */
        .result-outcome-stamp,
        #results-screen[data-outcome="victory"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp[data-outcome="flawless"] {
            top:clamp(38px,5.4vh,58px) !important;
            right:clamp(30px,8%,46px) !important;
            width:clamp(68px,17cqw,82px) !important;
            aspect-ratio:1 !important;
            color:#9f3028 !important;
            border:4px double currentColor !important;
            border-radius:1px !important;
            outline:2px solid rgba(159,48,40,.62) !important;
            outline-offset:-10px !important;
            background:
                repeating-linear-gradient(17deg,rgba(151,42,34,.06) 0 1px,transparent 1px 5px),
                rgba(159,48,40,.045) !important;
            box-shadow:none !important;
            filter:none !important;
            mix-blend-mode:multiply !important;
            transform:rotate(-3.2deg) scale(1.02) !important;
        }
        .result-outcome-stamp::before {
            content:'';
            position:absolute;
            inset:13px;
            border:2px solid currentColor;
            opacity:.76;
            pointer-events:none;
        }
        .result-outcome-stamp span,
        #results-screen[data-outcome="victory"] .result-outcome-stamp span,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp span {
            max-width:42px !important;
            color:currentColor !important;
            font:900 clamp(18px,4.8cqw,24px)/.90 "Noto Serif SC",serif !important;
            letter-spacing:.12em !important;
            text-shadow:none !important;
        }
        html[lang="zh"] .result-outcome-stamp span { writing-mode:vertical-rl; }
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp[data-outcome="flawless"] {
            background:
                radial-gradient(circle at 48% 46%,rgba(159,48,40,.12),transparent 64%),
                repeating-linear-gradient(17deg,rgba(151,42,34,.07) 0 1px,transparent 1px 4px) !important;
            border-width:4px !important;
        }

        @media (max-height:760px) {
            #results-screen .results-content:not(.leaderboard-only) #personal-results {
                min-height:min(68dvh,560px) !important;
                max-height:calc(100dvh - 112px) !important;
                padding:28px 28px 22px !important;
            }
            .result-outcome-stamp,
            #results-screen[data-outcome="victory"] .result-outcome-stamp {
                top:28px !important;
                right:30px !important;
                width:62px !important;
            }
        }

        /* Records are a separate screen state, centered independently from the
           asymmetric result poster and its two-row ceremony grid. */
        #results-screen .results-content.leaderboard-only {
            box-sizing:border-box !important;
            width:100% !important;
            height:100% !important;
            min-height:0 !important;
            padding:max(58px,env(safe-area-inset-top)) 20px max(18px,env(safe-area-inset-bottom)) !important;
            display:flex !important;
            flex-direction:column !important;
            align-items:center !important;
            justify-content:center !important;
            gap:16px !important;
            overflow-y:auto !important;
            overflow-x:hidden !important;
        }
        #results-screen .results-content.leaderboard-only::after { display:none !important; }
        #results-screen .results-content.leaderboard-only .leaderboard-section {
            box-sizing:border-box !important;
            width:min(92%,500px) !important;
            height:auto !important;
            max-height:min(70dvh,720px) !important;
            min-height:0 !important;
            margin:0 auto !important;
            padding:28px 18px 18px !important;
            flex:0 1 auto !important;
            transform:none !important;
        }
        #results-screen .results-content.leaderboard-only > .button-row {
            width:min(92%,500px) !important;
            margin:0 auto !important;
            padding:0 !important;
            grid-template-columns:1fr !important;
            flex:0 0 auto !important;
            transform:none !important;
        }

        /* === IMPERIAL ART V61: open-rank elite, jade sword dial, short decree === */
        /* The boss chain is a restrained sword-intent compass. Ink-jade owns the
           mass, aged gold carries legibility, and cinnabar appears only at urgency. */
        #boss-duel-overlay {
            width:clamp(104px,24cqw,128px) !important;
            left:calc(50% + clamp(68px,7cqw,88px)) !important;
            filter:drop-shadow(0 8px 13px rgba(0,0,0,.48)) !important;
        }
        #boss-duel-label {
            margin-bottom:1px !important;
            color:#c6ad70 !important;
            letter-spacing:.13em !important;
            text-shadow:0 2px 3px rgba(5,14,13,.86) !important;
        }
        .boss-duel-ring {
            border-color:rgba(190,163,96,.50) !important;
            background:
                radial-gradient(circle at 47% 42%,rgba(185,166,111,.08),transparent 31%),
                radial-gradient(circle,rgba(15,25,24,.97) 0 49%,rgba(42,68,64,.90) 50% 55%,rgba(12,20,19,.97) 57% 69%,transparent 70%),
                conic-gradient(from -18deg,#243d3a,#788a78,#a48b4b,#2e5550,#172c2a,#9c854d,#395f59,#243d3a) !important;
            box-shadow:
                inset 0 0 18px rgba(104,144,132,.13),
                0 0 0 3px rgba(10,22,20,.72),
                0 7px 16px rgba(0,0,0,.45),
                0 0 16px rgba(52,91,84,.16) !important;
        }
        .boss-duel-ring::after {
            border-color:rgba(196,173,111,.26) !important;
            box-shadow:inset 0 0 14px rgba(42,84,77,.26) !important;
        }
        .boss-duel-ring svg {
            filter:drop-shadow(0 0 4px rgba(104,145,134,.36)) !important;
        }
        .boss-duel-ring-track {
            stroke:rgba(42,72,67,.90) !important;
            stroke-width:7 !important;
        }
        #boss-duel-ring-progress {
            stroke:url(#boss-duel-ring-gradient) !important;
            stroke-width:7 !important;
        }
        #boss-duel-count {
            color:#e2d2a2 !important;
            font-size:clamp(46px,12cqw,64px) !important;
            text-shadow:0 2px 0 #243f3b,0 0 11px rgba(184,162,98,.38) !important;
        }
        #boss-duel-time {
            bottom:18% !important;
            color:#bca66e !important;
            text-shadow:0 2px 3px #081311 !important;
        }
        #boss-duel-overlay.urgent .boss-duel-ring {
            border-color:rgba(157,60,50,.66) !important;
            box-shadow:inset 0 0 18px rgba(116,45,40,.18),0 0 0 3px rgba(27,18,16,.76),0 7px 17px rgba(0,0,0,.48),0 0 17px rgba(147,51,43,.22) !important;
        }
        #boss-duel-overlay.urgent #boss-duel-time,
        #boss-duel-overlay.urgent #boss-duel-label { color:#cb7768 !important; }

        /* Short imperial decree: its height follows the report. This removes the
           empty lower half while keeping long victory/relic reports scroll-safe. */
        #results-screen .results-content:not(.leaderboard-only) {
            padding:max(48px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom)) !important;
            grid-template-rows:minmax(0,auto) auto !important;
            align-content:center !important;
            gap:8px !important;
            overflow-y:auto !important;
        }
        #results-screen .results-content:not(.leaderboard-only) #personal-results,
        #results-screen[data-clear-quality="flawless"] #personal-results,
        #results-screen[data-clear-quality="masterful"] #personal-results,
        #results-screen[data-outcome="victory"] #personal-results {
            width:min(92%,480px) !important;
            height:auto !important;
            min-height:0 !important;
            max-height:calc(100dvh - 126px) !important;
            padding:clamp(28px,3.8vh,38px) clamp(27px,6.5cqw,38px) clamp(23px,3.1vh,31px) !important;
            overflow-y:auto !important;
            overflow-x:hidden !important;
            background:
                linear-gradient(180deg,rgba(255,251,233,.04),rgba(116,72,30,.045)),
                transparent url('../assets/images/ui/wuxia_result_scroll.png') center/100% 100% no-repeat !important;
            filter:drop-shadow(0 20px 28px rgba(0,0,0,.58)) drop-shadow(0 0 1px rgba(239,205,130,.30)) !important;
        }
        #personal-results::before { inset:22px 20px !important; }
        #personal-results .result-kicker {
            margin:0 0 5px !important;
            text-align:left !important;
        }
        #personal-results .result-heading-row {
            box-sizing:border-box !important;
            width:100% !important;
            min-height:58px !important;
            display:grid !important;
            grid-template-columns:minmax(0,1fr) clamp(54px,13cqw,64px) !important;
            align-items:center !important;
            gap:12px !important;
            padding:0 !important;
        }
        #personal-results .results-title,
        #results-screen[data-outcome="victory"] .results-title,
        #results-screen[data-clear-quality="masterful"] .results-title,
        #results-screen[data-clear-quality="flawless"] .results-title {
            width:100% !important;
            max-width:none !important;
            margin:0 !important;
            text-align:left !important;
            font-size:clamp(30px,7.7cqw,41px) !important;
            line-height:1.03 !important;
        }
        .result-outcome-stamp,
        #results-screen[data-outcome="victory"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp[data-outcome="flawless"] {
            position:relative !important;
            inset:auto !important;
            justify-self:end !important;
            align-self:center !important;
            width:clamp(54px,13cqw,64px) !important;
            flex:0 0 auto !important;
            border:3px double currentColor !important;
            outline:1px solid currentColor !important;
            outline-offset:-8px !important;
            transform:rotate(-3deg) !important;
        }
        .result-outcome-stamp::before { inset:10px !important; border-width:1px !important; }
        .result-outcome-stamp span,
        #results-screen[data-outcome="victory"] .result-outcome-stamp span,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp span {
            max-width:36px !important;
            font-size:clamp(16px,4.1cqw,20px) !important;
            line-height:.9 !important;
        }
        #personal-results .results-score,
        #results-screen[data-outcome="victory"] .results-score,
        #results-screen[data-clear-quality="flawless"] .results-score {
            margin:7px 0 8px !important;
            font-size:clamp(48px,12cqw,64px) !important;
        }
        #personal-results .result-highlight { width:92% !important; margin:2px auto 2px !important; }
        #personal-results .result-story { width:92% !important; margin:1px auto 8px !important; }
        #personal-results .result-stats-grid.v18-final { margin:7px auto 8px !important; }
        #personal-results .result-stat { min-height:43px !important; padding:6px 3px 5px !important; }
        #personal-results .result-recap { margin-top:2px !important; padding:8px 10px 7px !important; }
        #results-screen .results-content:not(.leaderboard-only) > .button-row {
            width:min(92%,480px) !important;
        }
        @media (max-height:760px) {
            #results-screen .results-content:not(.leaderboard-only) #personal-results {
                min-height:0 !important;
                max-height:calc(100dvh - 104px) !important;
                padding:23px 25px 19px !important;
            }
            #personal-results .result-heading-row { min-height:50px !important; }
        }

        /* === IMPERIAL ART V63: warm black-gold boss chain ===
           The jade dial read as modern enamel on the warm paper scene. Return
           gold to the climax, but keep it aged and ink-bound rather than orange. */
        #boss-duel-label {
            color:#d5b768 !important;
            text-shadow:0 2px 4px rgba(17,10,4,.92),0 0 8px rgba(186,139,48,.22) !important;
        }
        .boss-duel-ring {
            border-color:rgba(227,194,109,.62) !important;
            background:
                radial-gradient(circle at 47% 42%,rgba(255,226,145,.09),transparent 31%),
                radial-gradient(circle,rgba(20,16,10,.98) 0 49%,rgba(79,61,25,.90) 50% 54%,rgba(14,12,9,.98) 57% 69%,transparent 70%),
                conic-gradient(from -18deg,#3a2d15,#9b7a32,#d0aa53,#59441c,#231b0f,#b8913d,#745923,#3a2d15) !important;
            box-shadow:
                inset 0 0 19px rgba(225,184,83,.12),
                0 0 0 3px rgba(26,19,9,.76),
                0 7px 17px rgba(0,0,0,.48),
                0 0 15px rgba(172,127,35,.15) !important;
        }
        .boss-duel-ring::after {
            border-color:rgba(235,204,128,.28) !important;
            box-shadow:inset 0 0 14px rgba(128,91,28,.22) !important;
        }
        .boss-duel-ring svg {
            filter:drop-shadow(0 0 4px rgba(209,164,68,.34)) !important;
        }
        .boss-duel-ring-track {
            stroke:rgba(73,55,23,.92) !important;
        }
        #boss-duel-count {
            color:#f0d88f !important;
            text-shadow:0 2px 0 #4b3515,0 0 11px rgba(218,175,77,.42) !important;
        }
        #boss-duel-time {
            color:#d1b466 !important;
            text-shadow:0 2px 3px #130d06 !important;
        }
        #boss-duel-overlay.urgent .boss-duel-ring {
            border-color:rgba(174,72,57,.70) !important;
            box-shadow:inset 0 0 18px rgba(128,49,40,.18),0 0 0 3px rgba(31,18,11,.78),0 7px 17px rgba(0,0,0,.48),0 0 17px rgba(151,53,42,.24) !important;
        }

        /* === IMPERIAL ART V64: battle report + in-game challenge writ ===
           Results read as a decree with a verdict, not a spreadsheet. Friend PK
           is a separate paper scene and never opens the operating-system share UI. */
        #personal-results .result-verdict {
            box-sizing:border-box !important;
            width:94% !important;
            margin:9px auto 8px !important;
            padding:8px 12px 9px !important;
            position:relative !important;
            text-align:center !important;
            border-top:1px solid rgba(111,68,30,.25) !important;
            border-bottom:1px solid rgba(111,68,30,.21) !important;
            background:
                linear-gradient(90deg,transparent,rgba(137,89,36,.055) 18%,rgba(137,89,36,.07) 50%,rgba(137,89,36,.055) 82%,transparent) !important;
        }
        #personal-results .result-verdict::before,
        #personal-results .result-verdict::after {
            content:'';
            position:absolute;
            top:-1px;
            width:40px;
            border-top:2px solid rgba(130,81,34,.42);
        }
        #personal-results .result-verdict::before { left:9%; }
        #personal-results .result-verdict::after { right:9%; }
        #personal-results .result-verdict-kicker {
            display:block;
            margin:0 0 2px;
            color:#805f2d;
            font:800 9px/1.2 var(--font-zh-display);
            letter-spacing:.25em;
        }
        #personal-results .result-verdict .results-score,
        #results-screen[data-outcome="victory"] #personal-results .result-verdict .results-score {
            margin:1px 0 4px !important;
            font-size:clamp(48px,12cqw,64px) !important;
            line-height:.94 !important;
        }
        #personal-results .result-verdict .result-highlight {
            width:100% !important;
            margin:2px auto 1px !important;
            font-weight:850 !important;
        }
        #personal-results .result-verdict .result-story {
            width:100% !important;
            margin:1px auto 0 !important;
        }
        #personal-results .boss-victory-honor {
            width:94% !important;
            margin:7px auto 8px !important;
            padding:7px 12px 6px !important;
            border:0 !important;
            border-left:3px double rgba(137,49,40,.70) !important;
            border-right:3px double rgba(137,49,40,.70) !important;
            background:linear-gradient(90deg,transparent,rgba(143,47,38,.07) 16%,rgba(143,47,38,.10) 50%,rgba(143,47,38,.07) 84%,transparent) !important;
        }
        #personal-results .boss-victory-honor::after { display:none !important; }
        #personal-results #boss-victory-title {
            color:#6d2a22 !important;
            font-size:clamp(19px,4.8cqw,24px) !important;
            letter-spacing:.12em !important;
        }
        #personal-results .result-stats-grid.v18-final {
            width:94% !important;
            margin:8px auto 9px !important;
            border-top:1px solid rgba(105,63,27,.18) !important;
            border-bottom:1px solid rgba(105,63,27,.16) !important;
        }
        #personal-results .result-stat {
            border-radius:0 !important;
            background:transparent !important;
        }
        #personal-results .result-stat:nth-child(-n+3) .result-stat-value {
            font-size:clamp(19px,4.6cqw,24px) !important;
            color:#2b1c11 !important;
        }
        #personal-results .result-stat:nth-child(n+4) {
            min-height:38px !important;
            border-top:1px solid rgba(105,63,27,.11) !important;
        }
        #personal-results .result-stat:nth-child(n+4) .result-stat-value {
            font-size:clamp(16px,4cqw,20px) !important;
        }
        #personal-results .result-recap {
            box-sizing:border-box !important;
            width:94% !important;
            margin:3px auto 0 !important;
            padding:8px 12px 8px 15px !important;
            align-items:flex-start !important;
            text-align:left !important;
            border:0 !important;
            border-left:2px solid rgba(135,49,41,.54) !important;
            border-radius:0 !important;
            background:linear-gradient(90deg,rgba(133,73,28,.07),transparent 78%) !important;
        }
        #personal-results .result-recap-line1,
        #personal-results .result-recap-line2 { text-align:left !important; }

        #results-screen .results-content.arena-active {
            box-sizing:border-box !important;
            width:100% !important;
            height:100% !important;
            min-height:0 !important;
            padding:max(54px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom)) !important;
            display:flex !important;
            align-items:center !important;
            justify-content:center !important;
            overflow-y:auto !important;
        }
        #results-screen .results-content.arena-active #personal-results,
        #results-screen .results-content.arena-active .leaderboard-section,
        #results-screen .results-content.arena-active > .button-row {
            display:none !important;
        }
        #results-screen .results-content.arena-active .arena-board {
            display:block;
        }
        .arena-board {
            box-sizing:border-box !important;
            width:min(94%,488px) !important;
            max-height:calc(100dvh - 88px) !important;
            margin:0 auto !important;
            padding:clamp(33px,5vh,48px) clamp(26px,6cqw,38px) clamp(26px,4vh,36px) !important;
            overflow-y:auto !important;
            color:#2a1d13 !important;
            border:0 !important;
            border-radius:0 !important;
            background:
                linear-gradient(180deg,rgba(255,251,233,.04),rgba(116,72,30,.05)),
                transparent url('../assets/images/ui/wuxia_result_scroll.png') center/100% 100% no-repeat !important;
            box-shadow:none !important;
            filter:drop-shadow(0 22px 30px rgba(0,0,0,.62)) !important;
        }
        .arena-board[hidden] { display:none !important; }
        .arena-board-head {
            display:grid;
            grid-template-columns:minmax(0,1fr) 60px;
            gap:14px;
            align-items:start;
            padding-bottom:13px;
            border-bottom:1px solid rgba(103,61,27,.24);
        }
        .arena-board-kicker {
            color:#8b692f !important;
            text-align:left !important;
            font:800 9px/1.2 var(--font-zh-display) !important;
            letter-spacing:.28em !important;
        }
        .arena-board-title {
            margin:5px 0 4px !important;
            color:#722921 !important;
            text-align:left !important;
            font:900 clamp(26px,6.8cqw,35px)/1.06 var(--font-zh-display) !important;
            letter-spacing:.06em !important;
        }
        .arena-board-intro {
            margin:0;
            color:#65523f;
            font-size:11px;
            line-height:1.55;
        }
        .arena-board-seal {
            width:56px;
            aspect-ratio:1;
            display:grid;
            place-items:center;
            color:#9c3028;
            border:3px double currentColor;
            outline:1px solid currentColor;
            outline-offset:-8px;
            transform:rotate(4deg);
            opacity:.80;
            mix-blend-mode:multiply;
        }
        .arena-board-seal span {
            writing-mode:vertical-rl;
            font:900 17px/.9 var(--font-zh-display);
            letter-spacing:.08em;
        }
        .arena-podium {
            display:flex !important;
            flex-direction:column !important;
            gap:0 !important;
            margin:13px 0 10px !important;
            padding:0 !important;
            list-style:none !important;
        }
        .arena-podium-step,
        .arena-podium-step[data-rank="1"],
        .arena-podium-step[data-rank="2"],
        .arena-podium-step[data-rank="3"] {
            box-sizing:border-box !important;
            min-height:54px !important;
            display:grid !important;
            grid-template-columns:42px minmax(0,1fr) auto !important;
            grid-template-rows:auto auto !important;
            column-gap:10px !important;
            align-items:center !important;
            padding:8px 4px !important;
            color:#2b1d13 !important;
            border:0 !important;
            border-bottom:1px solid rgba(100,59,27,.18) !important;
            border-radius:0 !important;
            background:transparent !important;
            box-shadow:none !important;
        }
        .arena-podium-step[data-rank="1"] {
            order:1;
            background:linear-gradient(90deg,rgba(144,95,34,.10),transparent 82%) !important;
        }
        .arena-podium-step[data-rank="2"] { order:2; }
        .arena-podium-step[data-rank="3"] { order:3; }
        .arena-podium-medal {
            grid-row:1 / 3;
            width:34px;
            aspect-ratio:1;
            display:grid;
            place-items:center;
            color:#7f2d26 !important;
            border:1px solid rgba(127,45,38,.67);
            outline:1px solid rgba(127,45,38,.35);
            outline-offset:-4px;
            border-radius:0 !important;
            font:900 15px/1 var(--font-zh-display) !important;
            transform:rotate(-2deg);
        }
        .arena-podium-name {
            align-self:end;
            color:#3a291d !important;
            font:850 13px/1.25 var(--font-zh-display) !important;
        }
        .arena-podium-score {
            grid-column:3;
            grid-row:1 / 3;
            align-self:center;
            color:#241810 !important;
            font-size:clamp(18px,4.6cqw,23px) !important;
            font-weight:900 !important;
        }
        .arena-tries {
            grid-column:2;
            color:#8b672f !important;
            font-size:10px !important;
        }
        .arena-self,
        .arena-podium-step.arena-self {
            border:0 !important;
            border-left:3px solid rgba(145,48,39,.67) !important;
            border-bottom:1px solid rgba(100,59,27,.18) !important;
            background:linear-gradient(90deg,rgba(145,48,39,.08),transparent 86%) !important;
            box-shadow:none !important;
        }
        .arena-rest { margin:0 0 10px !important; }
        .arena-rest-row {
            border-radius:0 !important;
            border-bottom:1px solid rgba(100,59,27,.14) !important;
        }
        .arena-rank,.arena-name,.arena-score { color:#493626 !important; }
        .arena-board-status {
            box-sizing:border-box;
            min-height:28px !important;
            margin:7px 0 9px !important;
            padding:7px 10px !important;
            color:#754f21 !important;
            text-align:center !important;
            font-size:11px !important;
            border-top:1px solid rgba(111,68,30,.16);
            border-bottom:1px solid rgba(111,68,30,.13);
            background:rgba(139,91,35,.045);
        }
        .arena-board-actions {
            display:grid !important;
            grid-template-columns:1fr 1fr !important;
            gap:8px !important;
        }
        .arena-board-actions .button {
            min-height:43px !important;
            margin:0 !important;
            padding:9px 10px !important;
            color:#f0dfb5 !important;
            border:1px solid rgba(113,72,30,.76) !important;
            border-radius:1px !important;
            background:linear-gradient(180deg,#48301b,#28190f) !important;
            box-shadow:inset 0 0 0 2px rgba(226,193,115,.09) !important;
            font:800 14px/1.2 var(--font-zh-display) !important;
            letter-spacing:.08em !important;
        }
        .arena-board-actions .arena-share {
            color:#fff0c8 !important;
            border-color:rgba(146,50,41,.80) !important;
            background:linear-gradient(180deg,#8d3027,#5c1f1b) !important;
        }
        .arena-board-actions .arena-back {
            grid-column:1 / -1;
            min-height:34px !important;
            color:#6a5030 !important;
            border:0 !important;
            border-top:1px solid rgba(107,66,29,.18) !important;
            background:transparent !important;
            box-shadow:none !important;
        }
        .arena-share-manual {
            margin:9px 0;
            color:#704c28;
            font-size:11px;
            line-height:1.4;
        }
        .arena-share-manual[hidden] { display:none !important; }
        .arena-share-manual textarea {
            box-sizing:border-box;
            width:100%;
            min-height:92px;
            margin-top:6px;
            padding:9px;
            resize:vertical;
            color:#37271b;
            border:1px solid rgba(103,61,27,.28);
            border-radius:0;
            background:rgba(255,249,225,.48);
            font:11px/1.45 ui-monospace,Consolas,monospace;
        }
        @media(max-height:760px) {
            .arena-board { padding:28px 25px 23px !important; }
            .arena-podium-step,
            .arena-podium-step[data-rank="1"],
            .arena-podium-step[data-rank="2"],
            .arena-podium-step[data-rank="3"] { min-height:46px !important; padding:5px 4px !important; }
        }

        /* === IMPERIAL ART V68: remove report void; finish the paper as one composition === */
        #results-screen .results-content:not(.leaderboard-only):not(.arena-active) #personal-results,
        #results-screen[data-outcome="victory"] .results-content:not(.leaderboard-only):not(.arena-active) #personal-results,
        #results-screen[data-clear-quality="masterful"] .results-content:not(.leaderboard-only):not(.arena-active) #personal-results,
        #results-screen[data-clear-quality="flawless"] .results-content:not(.leaderboard-only):not(.arena-active) #personal-results {
            min-height:0 !important;
            height:auto !important;
            padding-bottom:30px !important;
        }
        #personal-results .result-recap {
            margin:9px 0 0 !important;
        }

        /* === IMPERIAL ART V66: actual hierarchy, not another reskin === */
        #results-screen .results-content:not(.leaderboard-only):not(.arena-active) {
            grid-template-rows:minmax(0,1fr) auto !important;
            align-content:stretch !important;
            padding:max(46px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom)) !important;
            gap:9px !important;
        }
        #results-screen .results-content:not(.leaderboard-only):not(.arena-active) #personal-results,
        #results-screen[data-outcome="victory"] .results-content:not(.leaderboard-only):not(.arena-active) #personal-results,
        #results-screen[data-clear-quality="masterful"] .results-content:not(.leaderboard-only):not(.arena-active) #personal-results,
        #results-screen[data-clear-quality="flawless"] .results-content:not(.leaderboard-only):not(.arena-active) #personal-results {
            box-sizing:border-box !important;
            width:min(94%,500px) !important;
            min-height:min(72dvh,730px) !important;
            max-height:calc(100dvh - 150px) !important;
            margin:auto 0 !important;
            padding:clamp(32px,4.2vh,44px) clamp(31px,7cqw,44px) clamp(27px,3.5vh,36px) !important;
            display:flex !important;
            flex-direction:column !important;
            justify-content:flex-start !important;
            overflow-y:auto !important;
        }
        #personal-results .result-kicker {
            margin:0 0 8px !important;
            text-align:center !important;
            font-size:9px !important;
            letter-spacing:.32em !important;
        }
        #personal-results .result-heading-row {
            min-height:66px !important;
            grid-template-columns:minmax(0,1fr) 68px !important;
            gap:16px !important;
            padding-bottom:9px !important;
            border-bottom:1px solid rgba(105,63,27,.18) !important;
        }
        #personal-results .results-title,
        #results-screen[data-outcome="victory"] #personal-results .results-title {
            font-size:clamp(32px,8cqw,43px) !important;
            line-height:1.04 !important;
            letter-spacing:.055em !important;
        }
        #personal-results .result-verdict {
            width:100% !important;
            margin:13px auto 10px !important;
            padding:10px 12px 12px !important;
            border-top:0 !important;
            border-bottom:1px solid rgba(111,68,30,.22) !important;
            background:linear-gradient(90deg,transparent,rgba(137,89,36,.065),transparent) !important;
        }
        #personal-results .result-verdict::before,
        #personal-results .result-verdict::after { display:none !important; }
        #personal-results .result-verdict-kicker {
            margin-bottom:3px !important;
            font-size:9px !important;
            letter-spacing:.30em !important;
        }
        #personal-results .result-verdict .results-score,
        #results-screen[data-outcome="victory"] #personal-results .result-verdict .results-score {
            margin:0 0 7px !important;
            font-size:clamp(54px,13.7cqw,72px) !important;
            line-height:.92 !important;
            letter-spacing:-.035em !important;
        }
        #personal-results .result-verdict .result-highlight {
            font-size:clamp(13px,3.25cqw,16px) !important;
            line-height:1.28 !important;
        }
        #personal-results .result-verdict .result-story {
            margin-top:3px !important;
            color:#65523e !important;
            font-size:clamp(10px,2.45cqw,12px) !important;
            line-height:1.38 !important;
        }
        #personal-results .relic-progression {
            width:100% !important;
            margin:2px auto 11px !important;
        }
        #personal-results .result-merit-heading {
            width:100%;
            display:flex;
            align-items:center;
            gap:10px;
            margin:2px 0 6px;
            color:#79562b;
            font:850 9px/1.2 var(--font-zh-display);
            letter-spacing:.28em;
        }
        #personal-results .result-merit-heading::before,
        #personal-results .result-merit-heading::after {
            content:'';
            height:1px;
            flex:1;
            background:linear-gradient(90deg,transparent,rgba(108,65,29,.28));
        }
        #personal-results .result-merit-heading::after { transform:scaleX(-1); }
        #personal-results .result-stats-grid.v18-final {
            width:100% !important;
            margin:0 auto 11px !important;
            padding:2px 0 !important;
            display:grid !important;
            grid-template-columns:1fr 1fr !important;
            gap:0 24px !important;
            border-top:0 !important;
            border-bottom:1px solid rgba(105,63,27,.17) !important;
            background:transparent !important;
        }
        #personal-results .result-stat,
        #personal-results .result-stat:nth-child(n+4) {
            box-sizing:border-box !important;
            min-height:38px !important;
            padding:7px 2px 6px !important;
            display:flex !important;
            flex-direction:row-reverse !important;
            align-items:baseline !important;
            justify-content:space-between !important;
            gap:8px !important;
            border:0 !important;
            border-top:1px solid rgba(105,63,27,.12) !important;
            background:transparent !important;
        }
        #personal-results .result-stat:nth-child(3n+2) {
            border-left:0 !important;
            border-right:0 !important;
        }
        #personal-results .result-stat-value,
        #personal-results .result-stat:nth-child(-n+3) .result-stat-value,
        #personal-results .result-stat:nth-child(n+4) .result-stat-value {
            flex:0 0 auto;
            color:#2b1d13 !important;
            font-size:clamp(18px,4.5cqw,23px) !important;
            font-weight:900 !important;
            line-height:1 !important;
        }
        #personal-results .result-stat-label {
            min-width:0;
            margin:0 !important;
            color:#6f5a43 !important;
            font-size:9px !important;
            line-height:1.2 !important;
            letter-spacing:.04em !important;
            text-align:left !important;
        }
        #personal-results .result-recap {
            width:100% !important;
            margin:auto 0 0 !important;
            padding:10px 12px 9px 15px !important;
            gap:3px !important;
            border-left:3px double rgba(137,49,40,.58) !important;
            border-top:1px solid rgba(105,63,27,.12) !important;
            border-bottom:1px solid rgba(105,63,27,.12) !important;
            background:linear-gradient(90deg,rgba(133,73,28,.075),transparent 82%) !important;
        }
        #personal-results .result-recap-kicker {
            font-size:8px !important;
            letter-spacing:.24em !important;
        }
        #personal-results .result-recap-line1,
        #personal-results .result-recap-line2 {
            font-size:clamp(10px,2.45cqw,12px) !important;
            line-height:1.32 !important;
        }
        #results-screen .results-content:not(.leaderboard-only):not(.arena-active) > .button-row {
            box-sizing:border-box !important;
            width:min(94%,500px) !important;
            margin:0 !important;
            padding:8px !important;
            gap:7px !important;
            grid-template-areas:"primary primary" "menu share" !important;
            border:1px solid rgba(186,144,69,.30) !important;
            background:linear-gradient(180deg,rgba(45,30,17,.92),rgba(21,14,9,.96)) !important;
            box-shadow:0 13px 24px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,240,195,.08) !important;
        }
        #results-screen .button-row #restart-button.primary-result-cta {
            min-height:44px !important;
            color:#f3ddb1 !important;
            border:1px solid rgba(151,55,45,.74) !important;
            background:linear-gradient(180deg,#843127,#591f1a) !important;
            box-shadow:inset 0 0 0 2px rgba(247,214,145,.08) !important;
        }
        #results-screen .button-row .button.secondary {
            min-height:36px !important;
            color:#d5c29e !important;
            border:1px solid rgba(188,149,79,.25) !important;
            border-radius:1px !important;
            background:rgba(255,246,220,.035) !important;
        }

        #results-screen .results-content.arena-active .arena-board {
            min-height:min(70dvh,700px) !important;
            max-height:calc(100dvh - 92px) !important;
            padding:clamp(38px,5.2vh,52px) clamp(30px,7cqw,44px) clamp(30px,4vh,40px) !important;
            display:flex !important;
            flex-direction:column !important;
        }
        .arena-board-head {
            grid-template-columns:minmax(0,1fr) 64px !important;
            padding-bottom:14px !important;
        }
        .arena-board-title {
            margin:6px 0 6px !important;
            font-size:clamp(28px,7cqw,37px) !important;
        }
        .arena-board-intro {
            max-width:310px;
            color:#574431 !important;
            font-size:11px !important;
            line-height:1.55 !important;
        }
        .arena-board-meta {
            margin:8px 0 0;
            color:#8a672f;
            font:800 9px/1.3 var(--font-zh-display);
            letter-spacing:.10em;
        }
        .arena-podium {
            margin:16px 0 10px !important;
            border-bottom:1px solid rgba(100,59,27,.17);
            width:100% !important;
            align-items:stretch !important;
        }
        .arena-podium-step,
        .arena-podium-step[data-rank="1"],
        .arena-podium-step[data-rank="2"],
        .arena-podium-step[data-rank="3"] {
            min-height:62px !important;
            padding:9px 5px !important;
            width:100% !important;
            max-width:none !important;
            margin:0 !important;
            align-self:stretch !important;
            transform:none !important;
        }
        .arena-podium-step.arena-vacant {
            opacity:.58;
            border-left:0 !important;
            background:linear-gradient(90deg,rgba(112,77,36,.035),transparent) !important;
        }
        .arena-vacant .arena-podium-medal {
            color:#7f6848 !important;
            border-color:rgba(108,78,42,.45) !important;
            outline-color:rgba(108,78,42,.20) !important;
        }
        .arena-vacant .arena-podium-name,
        .arena-vacant .arena-podium-score { color:#6f5b43 !important; }
        .arena-board-status {
            margin-top:auto !important;
            min-height:32px !important;
            padding:8px 10px !important;
        }
        .arena-board-actions {
            grid-template-areas:"copy copy" "next back" !important;
        }
        .arena-board-actions .arena-share {
            grid-area:copy;
            min-height:46px !important;
        }
        .arena-board-actions #arena-next-round-btn { grid-area:next; }
        .arena-board-actions .arena-back {
            grid-area:back;
            grid-column:auto !important;
            min-height:43px !important;
            color:#6d5131 !important;
            border:1px solid rgba(107,66,29,.20) !important;
        }
        @media(max-height:760px) {
            #results-screen .results-content:not(.leaderboard-only):not(.arena-active) #personal-results {
                min-height:0 !important;
                max-height:calc(100dvh - 112px) !important;
                padding:24px 27px 20px !important;
            }
            #personal-results .result-heading-row { min-height:54px !important; }
            #personal-results .result-verdict { margin:7px auto 6px !important; padding:6px 10px 7px !important; }
            #personal-results .result-stat,
            #personal-results .result-stat:nth-child(n+4) { min-height:32px !important; padding:5px 2px 4px !important; }
            #results-screen .results-content.arena-active .arena-board { min-height:0 !important; padding:27px 27px 23px !important; }
        }

        /* V68 final cascade: the report ends with its last line, never an empty sheet. */
        #results-screen .results-content:not(.leaderboard-only):not(.arena-active) #personal-results,
        #results-screen[data-outcome="victory"] .results-content:not(.leaderboard-only):not(.arena-active) #personal-results,
        #results-screen[data-clear-quality="masterful"] .results-content:not(.leaderboard-only):not(.arena-active) #personal-results,
        #results-screen[data-clear-quality="flawless"] .results-content:not(.leaderboard-only):not(.arena-active) #personal-results {
            min-height:0 !important;
            height:auto !important;
            padding-bottom:30px !important;
        }
        #personal-results .result-recap {
            margin:9px 0 0 !important;
        }

        /* === IMPERIAL ART V72 FINAL CASCADE: centered, non-scrolling decree ===
           Keep these rules last: historical result passes above assign start
           margins and overflow:auto. */
        #results-screen .results-content:not(.leaderboard-only):not(.arena-active) {
            display:grid !important;
            grid-template-columns:minmax(0,1fr) !important;
            justify-items:center !important;
            width:100% !important;
            max-width:none !important;
            margin:0 auto !important;
            overflow-y:hidden !important;
            overflow-x:hidden !important;
            left:auto !important;
            right:auto !important;
            transform:none !important;
        }
        #results-screen .results-content:not(.leaderboard-only):not(.arena-active) > #personal-results,
        #results-screen .results-content:not(.leaderboard-only):not(.arena-active) > .button-row {
            justify-self:center !important;
            margin-left:auto !important;
            margin-right:auto !important;
            left:auto !important;
            right:auto !important;
            transform:none !important;
        }
        #results-screen .results-content:not(.leaderboard-only):not(.arena-active) > #personal-results {
            max-height:calc(100dvh - 172px) !important;
        }
        @media(max-height:760px) {
            #results-screen[data-outcome] .results-content:not(.leaderboard-only):not(.arena-active) > #personal-results {
                min-height:0 !important;
                height:calc(100dvh - 214px) !important;
                max-height:calc(100dvh - 214px) !important;
            }
            #results-screen[data-outcome].ceremony-enter .results-content:not(.leaderboard-only):not(.arena-active) > #personal-results,
            #results-screen[data-outcome] .results-content:not(.leaderboard-only):not(.arena-active) > #personal-results.ceremony-enter {
                animation:none !important;
            }
        }

        /* === IMPERIAL ART V83: true seal impression, legible perfect gate,
           and separate decree / duel-writ visual languages === */
        .combo-feedback[data-seal="perfect-gate"] {
            width:min(76%,350px) !important;
            padding:9px 24px 10px !important;
            color:#f2e7cc !important;
            border-top:1px solid rgba(174,143,85,.72) !important;
            border-bottom:1px solid rgba(111,70,38,.66) !important;
            background:
                linear-gradient(90deg,transparent,rgba(17,14,10,.94) 12%,rgba(25,20,13,.97) 50%,rgba(17,14,10,.94) 88%,transparent) !important;
            text-shadow:0 2px 2px rgba(0,0,0,.96),0 0 8px rgba(187,159,102,.16) !important;
            box-shadow:0 10px 24px rgba(0,0,0,.34) !important;
            filter:saturate(.72) !important;
        }

        /* The result is an imperial archive sheet: symmetric, warm and
           ceremonially endorsed. */
        #results-screen .results-content:not(.leaderboard-only):not(.arena-active) > #personal-results {
            background:
                radial-gradient(ellipse at 50% 22%,rgba(255,249,220,.28),transparent 47%),
                linear-gradient(90deg,rgba(125,42,31,.035),transparent 8% 92%,rgba(125,42,31,.035)),
                transparent url('../assets/images/ui/wuxia_result_scroll.png') center/100% 100% no-repeat !important;
            filter:drop-shadow(0 24px 34px rgba(0,0,0,.58)) !important;
        }
        #personal-results .result-heading-row {
            position:relative !important;
            background:linear-gradient(90deg,transparent,rgba(145,94,42,.055),transparent) !important;
        }
        #personal-results .result-heading-row::after {
            content:'';
            position:absolute;
            left:0;
            right:0;
            bottom:-1px;
            height:3px;
            background:
                linear-gradient(90deg,transparent 0 7%,rgba(129,43,34,.30) 7% 20%,rgba(171,128,55,.34) 20% 80%,rgba(129,43,34,.30) 80% 93%,transparent 93%);
            clip-path:polygon(0 35%,47% 35%,50% 0,53% 35%,100% 35%,100% 70%,53% 70%,50% 100%,47% 70%,0 70%);
        }
        #personal-results .result-verdict {
            background:
                radial-gradient(ellipse at 50% 46%,rgba(191,144,62,.10),transparent 62%),
                linear-gradient(90deg,transparent,rgba(137,89,36,.055),transparent) !important;
        }

        .result-outcome-stamp,
        #results-screen[data-outcome="victory"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp[data-outcome="flawless"] {
            width:74px !important;
            aspect-ratio:1 !important;
            position:relative !important;
            isolation:isolate !important;
            display:grid !important;
            place-items:center !important;
            overflow:visible !important;
            color:#9b2d27 !important;
            border:0 !important;
            outline:0 !important;
            background:none !important;
            opacity:0 !important;
            transform-origin:50% 54% !important;
            mix-blend-mode:multiply !important;
            filter:drop-shadow(0 4px 3px rgba(72,25,20,.18)) saturate(.84) contrast(1.08) !important;
        }
        .result-seal-impression {
            position:absolute;
            inset:0;
            z-index:0;
            width:100%;
            height:100%;
            overflow:visible;
            color:inherit;
            transform:rotate(-1.5deg);
        }
        .result-seal-field {
            fill:rgba(147,39,32,.075);
            stroke:currentColor;
            stroke-width:5.2;
            stroke-linejoin:bevel;
            filter:url(#result-seal-roughen);
        }
        .result-seal-carving {
            fill:none;
            stroke:currentColor;
            stroke-width:2.35;
            stroke-linecap:square;
            stroke-linejoin:miter;
            opacity:.82;
            filter:url(#result-seal-roughen);
        }
        .result-outcome-stamp::before {
            content:'' !important;
            position:absolute !important;
            z-index:-1 !important;
            inset:-26px !important;
            border:0 !important;
            opacity:0 !important;
            background:
                radial-gradient(ellipse at 50% 52%,rgba(139,37,31,.16) 0 18%,transparent 19%),
                conic-gradient(from 8deg at 50% 50%,transparent 0 7%,rgba(139,37,31,.14) 8% 9%,transparent 10% 23%,rgba(139,37,31,.11) 24% 25%,transparent 26% 54%,rgba(139,37,31,.12) 55% 56%,transparent 57% 78%,rgba(139,37,31,.10) 79% 80%,transparent 81%);
            transform:scale(.42) rotate(7deg) !important;
            pointer-events:none;
        }
        .result-outcome-stamp::after {
            content:'';
            position:absolute;
            z-index:1;
            inset:9px 11px 12px 8px;
            opacity:.24;
            background:
                radial-gradient(circle at 15% 20%,transparent 0 2px,currentColor 2.5px 3px,transparent 3.5px),
                radial-gradient(circle at 78% 28%,transparent 0 1.5px,currentColor 2px 2.8px,transparent 3.3px),
                radial-gradient(circle at 62% 84%,transparent 0 2px,currentColor 2.5px 3.2px,transparent 3.8px);
            pointer-events:none;
        }
        .result-outcome-stamp span,
        #results-screen[data-outcome="victory"] .result-outcome-stamp span,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp span {
            position:relative !important;
            z-index:2 !important;
            color:currentColor !important;
            font-size:19px !important;
            font-weight:950 !important;
            letter-spacing:.10em !important;
            text-shadow:.45px 0 currentColor,-.35px .25px currentColor !important;
        }
        .result-outcome-stamp small {
            z-index:3 !important;
            bottom:-17px !important;
            color:#71352e !important;
        }
        .result-outcome-stamp.landed,
        #results-screen[data-outcome="victory"] .result-outcome-stamp.landed,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp.landed {
            animation:result-stamp-land 780ms cubic-bezier(.18,.78,.18,1) both !important;
        }
        .result-outcome-stamp.landed::before {
            animation:result-seal-ink-bloom 520ms 315ms ease-out both !important;
        }
        @keyframes result-stamp-land {
            0% { opacity:0; transform:translateY(-112px) rotate(9deg) scale(1.34); filter:drop-shadow(0 24px 12px rgba(45,18,14,.10)) blur(.6px); }
            42% { opacity:.90; transform:translateY(-7px) rotate(-5deg) scale(1.06); }
            55% { opacity:.98; transform:translateY(4px) rotate(-7deg) scale(.86); filter:drop-shadow(0 1px 1px rgba(45,18,14,.20)); }
            70% { opacity:.91; transform:translateY(-2px) rotate(-6deg) scale(1.055); }
            100% { opacity:.89; transform:translateY(0) rotate(-6deg) scale(1); filter:drop-shadow(0 4px 3px rgba(72,25,20,.18)); }
        }
        @keyframes result-seal-ink-bloom {
            0% { opacity:0; transform:scale(.36) rotate(7deg); }
            36% { opacity:.72; transform:scale(1.08) rotate(7deg); }
            100% { opacity:.16; transform:scale(1.28) rotate(7deg); }
        }

        /* The PK surface is a jianghu challenge writ, not another imperial
           results decree: darker tea paper, black-ink hierarchy and a folded,
           slightly skewed handbill silhouette. */
        #results-screen .results-content.arena-active .arena-board {
            position:relative !important;
            isolation:isolate !important;
            color:#2c241b !important;
            border:1px solid rgba(55,39,25,.28) !important;
            clip-path:polygon(1.1% .4%,98.7% 1.2%,99.4% 96.8%,96.8% 99.2%,2.1% 98.6%,.5% 3.2%) !important;
            transform:rotate(-.22deg) !important;
            background:
                linear-gradient(94deg,rgba(56,37,22,.13),transparent 8% 92%,rgba(56,37,22,.10)),
                radial-gradient(ellipse at 78% 26%,rgba(78,53,30,.10),transparent 32%),
                linear-gradient(180deg,rgba(239,222,180,.20),rgba(120,82,43,.10)),
                transparent url('../assets/images/ui/wuxia_result_scroll.png') center/100% 100% no-repeat !important;
            box-shadow:0 27px 50px rgba(0,0,0,.68) !important;
            filter:none !important;
        }
        #results-screen .results-content.arena-active .arena-board::before {
            content:'';
            position:absolute;
            z-index:0;
            left:22px;
            top:38px;
            bottom:34px;
            width:5px;
            opacity:.72;
            background:
                linear-gradient(180deg,transparent,#6d2822 8% 41%,#29231c 42% 78%,transparent 92%);
            clip-path:polygon(45% 0,100% 6%,60% 43%,96% 54%,38% 100%,0 93%,34% 55%,5% 43%);
        }
        #results-screen .results-content.arena-active .arena-board::after {
            content:'战';
            position:absolute;
            z-index:0;
            right:34px;
            bottom:118px;
            color:#342a21;
            font:950 148px/1 var(--font-zh-display),serif;
            opacity:.035;
            transform:rotate(-11deg);
            pointer-events:none;
        }
        html[lang="en"] #results-screen .results-content.arena-active .arena-board::after {
            content:'DUEL';
            right:22px;
            bottom:132px;
            font-size:72px;
            letter-spacing:-.06em;
        }
        #results-screen .results-content.arena-active .arena-board > * {
            position:relative;
            z-index:1;
        }
        .arena-board-head {
            border-bottom:2px solid rgba(51,39,28,.38) !important;
        }
        .arena-board-kicker {
            color:#97372e !important;
        }
        .arena-board-title {
            color:#2d261e !important;
            text-shadow:.5px .5px rgba(255,248,221,.52) !important;
        }
        .arena-board-intro { color:#544839 !important; }
        .arena-board-meta { color:#7a382d !important; }
        .arena-board-seal {
            width:58px !important;
            aspect-ratio:1 !important;
            color:#9a332c !important;
            border:3px solid currentColor !important;
            outline:0 !important;
            clip-path:polygon(8% 0,92% 3%,100% 90%,91% 100%,4% 96%,0 10%) !important;
            background:
                radial-gradient(circle at 25% 22%,rgba(145,43,36,.15),transparent 28%),
                repeating-linear-gradient(16deg,rgba(145,43,36,.075) 0 1px,transparent 1px 4px) !important;
            box-shadow:inset 0 0 0 5px rgba(154,51,44,.08),inset 0 0 0 7px currentColor !important;
            opacity:.82 !important;
            transform:rotate(3deg) !important;
        }
        .arena-board-seal span {
            position:relative;
            z-index:1;
            color:currentColor;
            text-shadow:.45px 0 currentColor;
        }
        html[lang="en"] .arena-board-seal span,
        .arena-board[data-locale="en"] .arena-board-seal span {
            writing-mode:horizontal-tb !important;
            font:900 11px/1 var(--font-en-display),serif !important;
            letter-spacing:.08em !important;
        }
        .arena-podium-step[data-rank="1"] {
            border-left:3px solid rgba(131,48,40,.58) !important;
            background:linear-gradient(90deg,rgba(49,40,29,.13),transparent 86%) !important;
        }
        .arena-board-actions .arena-share {
            color:#f0dfb8 !important;
            border:1px solid rgba(133,51,43,.72) !important;
            background:linear-gradient(180deg,#3b3025,#191510) !important;
            box-shadow:inset 0 0 0 2px rgba(242,219,165,.06),0 5px 12px rgba(0,0,0,.18) !important;
        }
        .arena-board-actions .arena-share:hover,
        .arena-board-actions .arena-share:focus-visible {
            color:#fff0ca !important;
            border-color:#9a3a31 !important;
            background:linear-gradient(180deg,#4b3829,#211812) !important;
        }
        .arena-board-actions #arena-next-round-btn {
            color:#ead6aa !important;
            border-color:rgba(58,45,31,.54) !important;
            background:linear-gradient(180deg,#594329,#362819) !important;
        }

        @media(max-height:760px) {
            .result-outcome-stamp,
            #results-screen[data-outcome="victory"] .result-outcome-stamp { width:64px !important; }
            #results-screen .results-content.arena-active .arena-board::before { top:24px; bottom:22px; }
            #results-screen .results-content.arena-active .arena-board::after { bottom:92px; font-size:112px; }
        }
        @media(prefers-reduced-motion:reduce) {
            .result-outcome-stamp.landed,
            .result-outcome-stamp.landed::before { animation-duration:1ms !important; animation-delay:0ms !important; }
        }

        /* === IMPERIAL ART V81: finished decree + compact duel writ === */
        #personal-results .result-heading-row {
            align-items:center !important;
        }
        #personal-results .results-title,
        #results-screen[data-outcome="victory"] #personal-results .results-title {
            color:#842821 !important;
            text-shadow:0 1px rgba(255,246,218,.45) !important;
        }
        .result-outcome-stamp,
        #results-screen[data-outcome="victory"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp[data-outcome="flawless"] {
            position:relative !important;
            overflow:visible !important;
            color:#9f3028 !important;
            border-color:currentColor !important;
            opacity:.90 !important;
            filter:saturate(.92) contrast(1.08) !important;
            mix-blend-mode:multiply !important;
            background:
                radial-gradient(circle at 28% 22%,rgba(123,34,29,.08),transparent 31%),
                repeating-linear-gradient(13deg,rgba(135,39,32,.045) 0 1px,transparent 1px 4px) !important;
        }
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp[data-outcome="flawless"] {
            color:#9f3028 !important;
            background:
                radial-gradient(circle at 34% 27%,rgba(210,164,74,.24),transparent 44%),
                repeating-linear-gradient(13deg,rgba(151,104,36,.085) 0 1px,transparent 1px 4px) !important;
        }
        .result-outcome-stamp::before {
            border-color:currentColor !important;
            opacity:.78 !important;
        }
        .result-outcome-stamp span,
        #results-screen[data-outcome="victory"] .result-outcome-stamp span,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp span {
            writing-mode:vertical-rl !important;
            overflow-wrap:normal !important;
            word-break:keep-all !important;
            color:currentColor !important;
            font-family:var(--font-zh-display) !important;
            font-size:18px !important;
            letter-spacing:.12em !important;
        }
        .result-outcome-stamp small {
            position:absolute;
            left:50%;
            bottom:-18px;
            display:block;
            min-width:92px;
            transform:translateX(-50%) rotate(-3deg);
            color:#79352d;
            font:800 8px/1.1 var(--font-en-display),serif;
            letter-spacing:.11em;
            text-align:center;
            white-space:nowrap;
        }
        html[lang="zh"] .result-outcome-stamp small:empty { display:none; }
        html[lang="en"] #personal-results .results-title,
        html[lang="en"] #results-screen[data-outcome="victory"] #personal-results .results-title {
            max-width:300px;
            font-size:clamp(29px,7.2cqw,38px) !important;
            line-height:1.01 !important;
            letter-spacing:.025em !important;
        }
        html[lang="en"] #personal-results .result-heading-row {
            min-height:92px !important;
            padding-bottom:12px !important;
        }
        html[lang="en"] #personal-results .result-highlight {
            font-size:clamp(11px,2.75cqw,13px) !important;
            letter-spacing:.015em !important;
        }
        html[lang="en"] #personal-results .result-stat-label {
            font-size:8.5px !important;
            letter-spacing:.025em !important;
        }
        html[lang="en"] #personal-results .result-recap-line1,
        html[lang="en"] #personal-results .result-recap-line2 {
            font-size:11px !important;
        }

        #results-screen .results-content.arena-active {
            align-content:center !important;
            justify-items:center !important;
            overflow-y:auto !important;
        }
        #results-screen .results-content.arena-active .arena-board {
            min-height:0 !important;
            height:auto !important;
            max-height:none !important;
            margin:auto !important;
            padding:clamp(34px,4.5vh,46px) clamp(30px,7cqw,44px) clamp(28px,3.6vh,36px) !important;
        }
        .arena-board-head {
            align-items:start !important;
        }
        .arena-board-seal {
            color:#9f3028 !important;
            opacity:.88 !important;
            background:repeating-linear-gradient(17deg,rgba(135,39,32,.045) 0 1px,transparent 1px 4px) !important;
        }
        .arena-podium {
            position:relative;
            isolation:isolate;
            margin:14px 0 8px !important;
            overflow:hidden;
            background:linear-gradient(90deg,rgba(132,79,30,.035),transparent 72%);
        }
        .arena-podium::before {
            content:'劍';
            position:absolute;
            z-index:-1;
            right:20px;
            top:50%;
            transform:translateY(-50%) rotate(-8deg);
            color:#722820;
            font:900 112px/1 var(--font-zh-display);
            opacity:.035;
            pointer-events:none;
        }
        .arena-podium-step.arena-vacant {
            opacity:.72 !important;
            background:linear-gradient(90deg,rgba(112,77,36,.055),transparent 78%) !important;
        }
        .arena-board-status {
            margin:12px 0 10px !important;
            margin-top:12px !important;
            min-height:30px !important;
        }
        .arena-board-actions .arena-back {
            color:#3f2817 !important;
            border:1px solid rgba(107,66,29,.42) !important;
            background:linear-gradient(180deg,rgba(118,82,40,.14),rgba(74,47,24,.09)) !important;
            box-shadow:inset 0 0 0 2px rgba(255,246,220,.20) !important;
        }
        .arena-board-actions .arena-back:hover,
        .arena-board-actions .arena-back:focus-visible {
            color:#351f12 !important;
            border-color:rgba(125,74,31,.55) !important;
            background:rgba(117,74,31,.15) !important;
        }
        html[lang="en"] .arena-board-title {
            max-width:300px;
            font-size:clamp(27px,6.7cqw,35px) !important;
            line-height:1.02 !important;
            letter-spacing:.025em !important;
        }
        html[lang="en"] .arena-board-intro {
            font-family:var(--font-en-body),serif !important;
            font-size:11px !important;
            letter-spacing:.01em !important;
        }
        html[lang="en"] .arena-board-meta,
        html[lang="en"] .arena-tries {
            text-transform:none !important;
            letter-spacing:.035em !important;
        }
        html[lang="en"] .arena-podium-name {
            font-family:var(--font-en-display),serif !important;
            letter-spacing:.02em !important;
        }
        html[lang="en"] .arena-board-actions .button {
            letter-spacing:.035em !important;
            text-transform:none !important;
        }
        @media(max-height:760px) {
            .result-outcome-stamp small { bottom:-14px; font-size:7px; }
            html[lang="en"] #personal-results .result-heading-row {
                min-height:78px !important;
            }
            html[lang="en"] #personal-results .results-title,
            html[lang="en"] #results-screen[data-outcome="victory"] #personal-results .results-title {
                font-size:31px !important;
            }
            #results-screen .results-content.arena-active .arena-board {
                min-height:0 !important;
                height:auto !important;
                padding:25px 27px 22px !important;
            }
        }

        /* V83 FINAL CASCADE: keep the authored seal and writ finish above all
           historical compatibility passes. */
        .result-outcome-stamp,
        #results-screen[data-outcome="victory"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp[data-outcome="flawless"] {
            width:74px !important;
            aspect-ratio:1 !important;
            position:relative !important;
            isolation:isolate !important;
            overflow:visible !important;
            color:#9b2d27 !important;
            border:0 !important;
            outline:0 !important;
            background:none !important;
            opacity:0 !important;
            transform-origin:50% 54% !important;
            mix-blend-mode:multiply !important;
            filter:drop-shadow(0 4px 3px rgba(72,25,20,.18)) saturate(.84) contrast(1.08) !important;
        }
        .result-outcome-stamp.landed,
        #results-screen[data-outcome="victory"] .result-outcome-stamp.landed,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp.landed {
            opacity:.89 !important;
            animation:result-stamp-land 780ms cubic-bezier(.18,.78,.18,1) both !important;
        }
        .result-outcome-stamp::before {
            inset:-26px !important;
            border:0 !important;
            opacity:0 !important;
        }
        .result-outcome-stamp.landed::before {
            animation:result-seal-ink-bloom 520ms 315ms ease-out both !important;
        }
        .result-outcome-stamp span,
        #results-screen[data-outcome="victory"] .result-outcome-stamp span,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp span {
            position:relative !important;
            z-index:2 !important;
            color:currentColor !important;
            font-family:var(--font-zh-display) !important;
            font-size:19px !important;
            font-weight:950 !important;
            letter-spacing:.10em !important;
        }
        .arena-board-seal {
            color:#9a332c !important;
            border:3px solid currentColor !important;
            outline:0 !important;
            background:
                radial-gradient(circle at 25% 22%,rgba(145,43,36,.15),transparent 28%),
                repeating-linear-gradient(16deg,rgba(145,43,36,.075) 0 1px,transparent 1px 4px) !important;
            box-shadow:inset 0 0 0 5px rgba(154,51,44,.08),inset 0 0 0 7px currentColor !important;
        }
        html[lang="en"] .arena-board-seal span,
        .arena-board[data-locale="en"] .arena-board-seal span {
            writing-mode:horizontal-tb !important;
            font:900 11px/1 var(--font-en-display),serif !important;
            letter-spacing:.08em !important;
        }
        @media(max-height:760px) {
            .result-outcome-stamp,
            #results-screen[data-outcome="victory"] .result-outcome-stamp { width:64px !important; }
        }

        /* === IMPERIAL ART V84: imperial verdict + black challenge writ ===
           Results are a court-endorsed battle decree. The friend challenge is
           a rough jianghu black writ. Their silhouettes, value hierarchy and
           interaction colour now deliberately diverge. */
        #personal-results .result-heading-row {
            box-sizing:border-box !important;
            min-height:102px !important;
            margin:2px -5px 10px !important;
            padding:17px 8px 17px 18px !important;
            grid-template-columns:minmax(0,1fr) 84px !important;
            align-items:center !important;
            background:
                linear-gradient(102deg,#211711 0%,#2d1a15 61%,rgba(45,26,21,.92) 72%,transparent 72.4%) !important;
            box-shadow:inset 4px 0 0 #8b3027,inset 0 1px rgba(222,183,101,.22),0 8px 17px rgba(55,31,18,.12) !important;
            clip-path:polygon(0 3%,72% 0,75% 8%,100% 8%,100% 95%,75% 92%,72% 100%,0 96%) !important;
        }
        #personal-results .result-heading-row::after {
            left:18px !important;
            right:28% !important;
            bottom:10px !important;
            height:1px !important;
            clip-path:none !important;
            background:linear-gradient(90deg,rgba(180,55,45,.72),rgba(206,167,91,.52),transparent) !important;
        }
        #personal-results .results-title,
        #results-screen[data-outcome="victory"] #personal-results .results-title {
            max-width:none !important;
            color:#f1dfb8 !important;
            text-shadow:0 2px 1px rgba(0,0,0,.74),0 0 16px rgba(176,124,51,.12) !important;
        }
        html[lang="en"] #personal-results .result-heading-row {
            min-height:108px !important;
            padding-bottom:20px !important;
        }
        html[lang="en"] #personal-results .results-title,
        html[lang="en"] #results-screen[data-outcome="victory"] #personal-results .results-title {
            max-width:315px !important;
            color:#f1dfb8 !important;
            font-size:clamp(28px,7cqw,37px) !important;
        }
        #personal-results .result-verdict {
            position:relative !important;
            margin:0 0 7px !important;
            padding:9px 13px 11px 18px !important;
            border-left:4px double rgba(132,43,34,.70) !important;
            background:
                linear-gradient(90deg,rgba(126,43,33,.075),rgba(177,128,52,.035) 66%,transparent) !important;
        }
        #personal-results .result-verdict::before {
            content:'御批';
            position:absolute;
            right:9px;
            top:9px;
            color:rgba(117,40,32,.48);
            font:800 8px/1 var(--font-zh-display),serif;
            letter-spacing:.18em;
        }
        html[lang="en"] #personal-results .result-verdict::before { content:'VERDICT'; }
        #personal-results .results-score {
            color:#21150e !important;
            text-shadow:0 1px rgba(255,250,227,.72) !important;
        }
        #personal-results .boss-victory-honor:not([hidden]) {
            margin:7px 0 9px !important;
            padding:10px 14px 11px !important;
            color:#ead9b0 !important;
            border:0 !important;
            border-left:4px double #8d3028 !important;
            border-right:1px solid rgba(181,137,61,.42) !important;
            background:
                linear-gradient(104deg,#241712,#36201a 68%,#1b1410) !important;
            box-shadow:inset 0 1px rgba(239,207,137,.12),0 7px 14px rgba(48,29,17,.13) !important;
        }
        #personal-results #boss-victory-kicker,
        #personal-results #boss-victory-detail,
        #personal-results .boss-victory-phases { color:#c6a96d !important; }
        #personal-results #boss-victory-title {
            color:#f0dfb5 !important;
            text-shadow:0 2px 1px #0d0907 !important;
        }

        /* Perfect Gate is an earned cinnabar chop, never pale gold on paper. */
        #personal-results #result-stat-perfect[data-active="true"] {
            display:inline-grid !important;
            min-width:34px !important;
            min-height:30px !important;
            padding:2px 7px 3px !important;
            place-items:center !important;
            color:#fff0ca !important;
            border:1px solid #6f201c !important;
            outline:1px solid rgba(255,233,185,.38) !important;
            outline-offset:-4px !important;
            background:linear-gradient(145deg,#a23b30,#6f211c) !important;
            box-shadow:0 3px 7px rgba(74,27,19,.24),inset 0 1px rgba(255,223,165,.17) !important;
            text-shadow:0 1px #3f110e !important;
            transform:rotate(-1deg) !important;
        }
        #personal-results #result-stat-perfect[data-active="false"] {
            color:#2b1c11 !important;
            text-shadow:none !important;
        }
        .combo-feedback[data-seal="perfect-gate"] {
            z-index:32 !important;
            width:min(82%,390px) !important;
            color:#f7e9c8 !important;
            border-top:2px solid #a64034 !important;
            border-bottom:1px solid rgba(202,163,84,.62) !important;
            background:
                linear-gradient(100deg,transparent 0 4%,#241512 11%,#351a16 50%,#211411 89%,transparent 96%) !important;
            text-shadow:0 2px 2px #000,0 0 4px #000 !important;
            filter:none !important;
        }
        .combo-feedback[data-seal="perfect-gate"]::before {
            content:'完';
            display:inline-grid;
            width:23px;
            height:23px;
            margin-right:9px;
            place-items:center;
            color:#f6dfad;
            border:1px solid #b8473b;
            outline:1px solid rgba(246,223,173,.28);
            outline-offset:-4px;
            font:900 12px/1 var(--font-zh-display),serif;
            vertical-align:middle;
        }
        html[lang="en"] .combo-feedback[data-seal="perfect-gate"]::before { content:'P'; }

        /* The seal ceremony is intentionally long enough to read: fall,
           compression, paper recoil, then an expanding ink bloom. */
        .result-outcome-stamp,
        #results-screen[data-outcome="victory"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp[data-outcome="flawless"] {
            width:78px !important;
            opacity:0 !important;
            mix-blend-mode:multiply !important;
        }
        .result-outcome-stamp small {
            left:50% !important;
            bottom:-23px !important;
            min-width:96px !important;
            padding:3px 5px 2px !important;
            color:#6e2a24 !important;
            background:rgba(241,226,189,.90) !important;
            box-shadow:0 0 0 1px rgba(111,44,35,.12) !important;
            transform:translateX(-50%) rotate(-2deg) !important;
        }
        .result-outcome-stamp.landed,
        #results-screen[data-outcome="victory"] .result-outcome-stamp.landed,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp.landed {
            opacity:.94 !important;
            animation:result-stamp-land 1260ms cubic-bezier(.16,.72,.15,1) both !important;
        }
        .result-outcome-stamp.landed::before {
            animation:result-seal-ink-bloom 840ms 510ms ease-out both !important;
        }
        #results-screen.stamp-impact #personal-results {
            animation:result-paper-impact 480ms cubic-bezier(.2,.75,.25,1) both !important;
        }
        #results-screen.stamp-impact #personal-results .result-heading-row::before {
            content:'';
            position:absolute;
            z-index:4;
            right:-12px;
            top:-22px;
            width:132px;
            aspect-ratio:1;
            border:2px solid rgba(145,40,32,.34);
            border-radius:50%;
            opacity:0;
            pointer-events:none;
            animation:result-stamp-shockwave 560ms ease-out both;
        }
        @keyframes result-stamp-land {
            0% { opacity:0; transform:translateY(-220px) rotate(15deg) scale(1.82); filter:drop-shadow(0 34px 15px rgba(34,14,10,.16)) blur(1.1px); }
            25% { opacity:.98; transform:translateY(-72px) rotate(4deg) scale(1.34); }
            46% { opacity:1; transform:translateY(3px) rotate(-7deg) scale(.76); filter:drop-shadow(0 1px 1px rgba(34,14,10,.32)); }
            58% { transform:translateY(-15px) rotate(-5deg) scale(1.12); }
            72% { transform:translateY(4px) rotate(-6deg) scale(.94); }
            84% { transform:translateY(-3px) rotate(-6deg) scale(1.025); }
            100% { opacity:.94; transform:translateY(0) rotate(-6deg) scale(1); filter:drop-shadow(0 5px 4px rgba(72,25,20,.24)); }
        }
        @keyframes result-seal-ink-bloom {
            0% { opacity:0; transform:scale(.20) rotate(7deg); }
            28% { opacity:.86; transform:scale(1.02) rotate(7deg); }
            58% { opacity:.42; transform:scale(1.34) rotate(7deg); }
            100% { opacity:.13; transform:scale(1.62) rotate(7deg); }
        }
        @keyframes result-paper-impact {
            0%,100% { transform:translate3d(0,0,0); }
            18% { transform:translate3d(-2px,2px,0) rotate(-.12deg); }
            38% { transform:translate3d(2px,-1px,0) rotate(.08deg); }
            62% { transform:translate3d(-1px,0,0); }
        }
        @keyframes result-stamp-shockwave {
            0% { opacity:.72; transform:scale(.38); filter:blur(0); }
            100% { opacity:0; transform:scale(1.54); filter:blur(1px); }
        }

        /* PK: a black-ink challenge handbill, not a pale second result page. */
        #results-screen .results-content.arena-active .arena-board {
            color:#e9d8b1 !important;
            border:1px solid rgba(28,20,15,.84) !important;
            background:
                linear-gradient(90deg,rgba(26,19,14,.90) 0 13px,transparent 13px),
                radial-gradient(ellipse at 72% 82%,rgba(121,38,30,.12),transparent 38%),
                linear-gradient(155deg,rgba(221,199,150,.18),rgba(59,40,24,.08)),
                transparent url('../assets/images/ui/wuxia_result_scroll.png') center/100% 100% no-repeat !important;
            box-shadow:0 30px 54px rgba(0,0,0,.72),inset 13px 0 0 #17120f !important;
            transform:rotate(-.38deg) !important;
        }
        #results-screen .results-content.arena-active .arena-board::before {
            left:13px !important;
            top:0 !important;
            bottom:0 !important;
            width:7px !important;
            opacity:1 !important;
            background:linear-gradient(180deg,#8d3028,#201610 18% 82%,#8d3028) !important;
        }
        #results-screen .results-content.arena-active .arena-board::after {
            color:#15110e !important;
            opacity:.075 !important;
        }
        .arena-board-head {
            margin:-9px -10px 17px !important;
            padding:18px 78px 17px 18px !important;
            display:block !important;
            position:relative !important;
            border:0 !important;
            border-left:4px solid #9a382f !important;
            background:
                linear-gradient(101deg,#17130f,#2a1d17 75%,rgba(42,29,23,.86)) !important;
            box-shadow:0 9px 17px rgba(36,23,15,.20),inset 0 1px rgba(220,184,112,.14) !important;
            clip-path:polygon(0 3%,97% 0,100% 88%,94% 100%,0 94%) !important;
        }
        .arena-board-kicker { color:#c65a4d !important; }
        .arena-board-title,
        html[lang="en"] .arena-board-title {
            max-width:none !important;
            color:#f0dfb8 !important;
            text-shadow:0 2px 1px #080604 !important;
        }
        .arena-board-intro { color:#cdbb95 !important; }
        .arena-board-meta { color:#b99758 !important; }
        .arena-board-seal {
            position:absolute !important;
            right:14px !important;
            top:14px !important;
            color:#d46b5c !important;
            border-color:currentColor !important;
            background:rgba(23,18,14,.52) !important;
            box-shadow:inset 0 0 0 5px rgba(212,107,92,.08),inset 0 0 0 7px currentColor !important;
        }
        .arena-podium {
            border-top:1px solid rgba(57,42,29,.34) !important;
            border-bottom:1px solid rgba(57,42,29,.30) !important;
            background:
                linear-gradient(90deg,rgba(28,22,17,.10),transparent 84%) !important;
        }
        .arena-podium-step,
        .arena-podium-step[data-rank="1"],
        .arena-podium-step[data-rank="2"],
        .arena-podium-step[data-rank="3"] {
            border-bottom:1px solid rgba(59,43,30,.20) !important;
            background:linear-gradient(90deg,rgba(28,22,17,.075),transparent 76%) !important;
        }
        .arena-podium-step[data-rank="1"] {
            border-left:4px solid #8f3028 !important;
            background:linear-gradient(90deg,rgba(123,43,34,.13),rgba(28,22,17,.045) 70%,transparent) !important;
        }
        .arena-board-actions .arena-share {
            color:#f1dfb7 !important;
            border-color:#17120f !important;
            background:linear-gradient(180deg,#2e2119,#17120f) !important;
            box-shadow:inset 4px 0 #96362d,inset 0 0 0 1px rgba(235,205,143,.10),0 6px 14px rgba(0,0,0,.20) !important;
        }
        .arena-board-actions #arena-next-round-btn {
            color:#ead7ae !important;
            background:linear-gradient(180deg,#7d3028,#4f1f1b) !important;
        }

        @media(max-height:760px) {
            #personal-results .result-heading-row { min-height:84px !important; }
            html[lang="en"] #personal-results .result-heading-row { min-height:90px !important; }
            .result-outcome-stamp,
            #results-screen[data-outcome="victory"] .result-outcome-stamp { width:66px !important; }
        }
        @media(prefers-reduced-motion:reduce) {
            .result-outcome-stamp.landed,
            #results-screen[data-outcome="victory"] .result-outcome-stamp.landed,
            #results-screen[data-result-tier="perfect"] .result-outcome-stamp.landed {
                animation:result-stamp-land-reduced 320ms ease-out both !important;
            }
            .result-outcome-stamp.landed::before { animation:result-seal-ink-bloom 360ms 120ms ease-out both !important; }
            #results-screen.stamp-impact #personal-results { animation:none !important; }
        }
        @keyframes result-stamp-land-reduced {
            0% { opacity:0; transform:translateY(-18px) rotate(-2deg) scale(1.18); }
            62% { opacity:1; transform:translateY(2px) rotate(-6deg) scale(.94); }
            100% { opacity:.94; transform:translateY(0) rotate(-6deg) scale(1); }
        }

        /* === IMPERIAL ART V85: visible merit + vermilion duel seal === */
        #personal-results .result-stat:has(#result-stat-perfect[data-active="true"]) {
            border-left:2px solid rgba(130,43,34,.62) !important;
            background:linear-gradient(90deg,rgba(139,48,39,.10),transparent 78%) !important;
        }
        #personal-results .result-stat:has(#result-stat-perfect[data-active="true"]) .result-stat-label {
            color:#6e2c24 !important;
            font-weight:850 !important;
            letter-spacing:.035em !important;
        }
        #personal-results #result-stat-perfect[data-active="true"] {
            min-width:40px !important;
            min-height:34px !important;
            color:#fff7dc !important;
            background:
                linear-gradient(rgba(255,238,198,.14),rgba(255,238,198,0)),
                #842a23 !important;
            box-shadow:
                0 0 0 1px rgba(92,24,20,.72),
                inset 0 0 0 4px rgba(255,236,194,.16),
                0 4px 8px rgba(67,22,17,.28) !important;
        }

        /* Multiply made red ink disappear on the black challenge header.
           Keep it as an opaque cinnabar imprint with an observable landing. */
        .arena-board-seal {
            color:#f07a67 !important;
            opacity:1 !important;
            mix-blend-mode:normal !important;
            background:
                radial-gradient(circle at 46% 42%,rgba(185,57,46,.52),rgba(92,29,24,.72) 68%,rgba(32,20,16,.88)) !important;
            border:3px solid currentColor !important;
            outline:1px solid rgba(247,197,148,.30) !important;
            outline-offset:-7px !important;
            box-shadow:
                inset 0 0 0 4px rgba(240,122,103,.16),
                inset 0 0 0 7px currentColor,
                0 5px 8px rgba(0,0,0,.36) !important;
            text-shadow:0 1px 1px #2a0f0c !important;
            animation:arena-writ-seal-land 760ms 220ms cubic-bezier(.16,.78,.2,1.12) both !important;
        }
        .arena-board-seal::after {
            content:'';
            position:absolute;
            inset:-14px;
            border:2px solid rgba(224,88,72,.44);
            border-radius:4px;
            opacity:0;
            pointer-events:none;
            animation:arena-writ-ink-echo 760ms 620ms ease-out both;
        }
        .arena-board-seal span,
        html[lang="en"] .arena-board-seal span,
        .arena-board[data-locale="en"] .arena-board-seal span {
            color:#ffe5bd !important;
            text-shadow:0 1px 1px #421612 !important;
        }
        @keyframes arena-writ-seal-land {
            0% { opacity:0; transform:translateY(-46px) rotate(9deg) scale(1.42); filter:blur(.8px); }
            52% { opacity:1; transform:translateY(3px) rotate(-4deg) scale(.88); filter:none; }
            72% { transform:translateY(-5px) rotate(-2deg) scale(1.07); }
            100% { opacity:1; transform:translateY(0) rotate(-3deg) scale(1); }
        }
        @keyframes arena-writ-ink-echo {
            0% { opacity:.62; transform:scale(.58); }
            100% { opacity:0; transform:scale(1.42); }
        }
        @media(prefers-reduced-motion:reduce) {
            .arena-board-seal { animation:arena-writ-seal-land 340ms ease-out both !important; }
            .arena-board-seal::after { animation:none !important; }
        }

        /* === IMPERIAL ART V86: carved cinnabar impressions === */
        .result-outcome-stamp,
        #results-screen[data-outcome="victory"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp[data-outcome="flawless"] {
            color:#fff0c8 !important;
            border:2px solid #5f1d18 !important;
            outline:1px solid rgba(255,231,190,.44) !important;
            outline-offset:-7px !important;
            background:
                radial-gradient(circle at 12% 18%,rgba(255,232,190,.18) 0 2px,transparent 2.6px),
                radial-gradient(circle at 84% 72%,rgba(75,18,15,.30) 0 2px,transparent 3px),
                linear-gradient(145deg,#b4493d,#852920 72%,#6f211c) !important;
            box-shadow:
                inset 0 0 0 5px rgba(255,225,177,.12),
                inset 0 0 0 8px rgba(91,24,20,.44),
                0 5px 8px rgba(65,19,15,.24) !important;
            mix-blend-mode:normal !important;
            clip-path:polygon(3% 1%,96% 3%,100% 94%,94% 99%,2% 96%,0 8%) !important;
        }
        .result-outcome-stamp::before {
            inset:9px !important;
            border:1px solid rgba(255,232,190,.70) !important;
            outline:2px solid rgba(91,24,20,.34) !important;
            outline-offset:3px !important;
        }
        .result-outcome-stamp span,
        #results-screen[data-outcome="victory"] .result-outcome-stamp span,
        #results-screen[data-result-tier="perfect"] .result-outcome-stamp span {
            color:#fff1cc !important;
            text-shadow:0 1px 1px #44110e !important;
        }

        .arena-board-seal {
            color:#ffe5b9 !important;
            border:2px solid #571b17 !important;
            outline:1px solid rgba(255,228,184,.42) !important;
            background:
                radial-gradient(circle at 18% 22%,rgba(255,229,185,.18) 0 2px,transparent 2.7px),
                radial-gradient(circle at 82% 76%,rgba(66,14,12,.28) 0 2px,transparent 3px),
                linear-gradient(145deg,#bd4c40,#8f2c25 68%,#6d211c) !important;
            box-shadow:
                inset 0 0 0 5px rgba(255,226,179,.13),
                inset 0 0 0 8px rgba(77,18,15,.42),
                0 5px 9px rgba(0,0,0,.38) !important;
            clip-path:polygon(2% 3%,96% 0,100% 94%,94% 100%,1% 96%) !important;
        }
        .arena-board-seal span,
        html[lang="en"] .arena-board-seal span,
        .arena-board[data-locale="en"] .arena-board-seal span {
            color:#fff0c9 !important;
            text-shadow:0 1px 1px #3f100d !important;
        }