body { 
            background: radial-gradient(circle at center, #0a4a2a, #021a0a); 
            color: #fdf5e6; 
            font-family: 'Georgia', serif; 
            text-align: center; 
            padding: 10px; 
            margin: 0; 
            min-height: 100vh;
            transition: background 1s ease-in-out;
        }

        body.revolution-bg {
            background: radial-gradient(circle at center, #4a0a0a, #1a0202); 
        }

        #title-screen {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: #0d0d0d; z-index: 300;
            display: flex; align-items: center; justify-content: center;
            flex-direction: column;
            box-shadow: inset 0 0 150px rgba(0,0,0,1); 
            overflow: hidden;
        }

        

        

        

        

        

        .start-movie-btn {
            position: relative; z-index: 10;
            background: transparent; border: 2px solid #d4c4a8; color: #d4c4a8;
            padding: 15px 40px; font-size: 24px; font-family: 'Courier New', Courier, monospace;
            cursor: pointer; letter-spacing: 5px; transition: 0.3s;
        }
        .start-movie-btn:hover { background: #d4c4a8; color: #111; box-shadow: 0 0 15px rgba(212,196,168,0.5); }

        #phase-bar { 
            background: linear-gradient(90deg, #111, #333, #111); 
            color: #d4af37; 
            padding: 12px; 
            font-size: 20px; 
            font-weight: bold; 
            border: 2px solid #d4af37; 
            border-radius: 8px;
            margin: 10px auto 20px; 
            width: 80%; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.8);
            transition: 0.3s; 
        }

        .field-area { 
            background-color: rgba(0, 0, 0, 0.5); 
            border-radius: 10px; 
            padding: 15px; 
            margin-bottom: 20px; 
            position: relative; 
            box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
        }
        .opponent-area { border: 2px solid #ff4444; }
        .player-area { border: 2px solid #4488ff; }

        .card-zone { display: flex; justify-content: center; gap: 15px; margin-top: 10px; margin-bottom: 10px; min-height: 90px; }

        .card { 
            background: linear-gradient(135deg, #ffffff, #e0e0e0); 
            color: #111; 
            width: 60px; 
            height: 90px; 
            border-radius: 6px; 
            display: flex; align-items: center; justify-content: center; 
            font-size: 22px; font-weight: bold; font-family: sans-serif;
            box-shadow: 3px 3px 8px rgba(0,0,0,0.8); 
            border: 1px solid #777; 
            transition: 0.2s; user-select: none; position: relative; 
        }
        .card-back { 
            background: radial-gradient(circle, #8b0000, #4a0000); 
            background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,215,0,0.1) 5px, rgba(255,215,0,0.1) 10px); 
            border: 2px solid #d4af37;
            color: transparent !important; 
        }
        .clickable-card { cursor: pointer; }
        .clickable-card:hover { transform: translateY(-10px); border-color: #d4af37; box-shadow: 0 0 15px rgba(255,215,0,0.6); }
        .selected-card { border: 4px solid #ff4444 !important; transform: translateY(-10px) scale(1.05); box-shadow: 0 0 20px rgba(255,68,68,0.8); }

        .action-btn { 
            background: linear-gradient(to bottom, #d4af37, #aa8529); 
            color: #111; border: 1px solid #ffdf00; padding: 10px 18px; margin: 0 5px; margin-bottom: 10px; 
            font-size: 15px; font-weight: bold; border-radius: 20px; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.5);
        }
        .action-btn:hover { background: linear-gradient(to bottom, #ffdf00, #d4af37); transform: translateY(-2px); }
        .confirm-btn { background: linear-gradient(to bottom, #ff4444, #aa0000); color: white; border: 1px solid #ffaaaa; padding: 10px 20px; font-size: 16px; font-weight: bold; border-radius: 20px; cursor: pointer; margin-bottom: 20px; }
        .cancel-btn { background: linear-gradient(to bottom, #666, #333); color: white; border: 1px solid #999; padding: 10px 15px; font-size: 16px; font-weight: bold; border-radius: 20px; cursor: pointer; }

        .counter-area { background-color: rgba(0,0,0,0.7); border: 2px dashed #d4af37; padding: 15px; margin-bottom: 20px; border-radius: 10px; box-shadow: inset 0 0 15px rgba(212,175,55,0.2); }

        .disposal-container { display: flex; justify-content: space-between; gap: 20px; margin-top: 15px; }
        .disposal-box { flex: 1; background-color: rgba(0,0,0,0.4); border-radius: 8px; padding: 10px; min-height: 60px; border: 1px solid rgba(255,255,255,0.1); }
        .disposal-title { font-size: 14px; font-weight: bold; margin-bottom: 5px; border-bottom: 1px dashed rgba(255,255,255,0.3); padding-bottom: 3px; color: #ccc; }

        .graveyard-zone, .slash-zone { display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; }
        .grave-card { background-color: #222; color: #888; border: 1px solid #555; font-size: 12px; padding: 4px 6px; border-radius: 3px; font-weight: bold; font-family: sans-serif; }
        .slash-card { background-color: #4a2511; color: #d4af37; border: 1px solid #d4af37; font-size: 12px; padding: 4px 6px; border-radius: 3px; font-weight: bold; font-family: sans-serif; }

        #turn-info { font-size: 18px; font-weight: bold; margin-bottom: 5px; color: #d4af37; text-shadow: 1px 1px 2px #000; }

        .deck-container { position: absolute; right: 30px; top: 30px; width: 60px; height: 90px; }
        .deck-pile { width: 100%; height: 100%; background: radial-gradient(circle, #8b0000, #4a0000); background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,215,0,0.1) 5px, rgba(255,215,0,0.1) 10px); border-radius: 5px; border: 2px solid #d4af37; position: absolute; z-index: 10; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 24px; color: rgba(255,215,0,0.9); text-shadow: 2px 2px 4px black; transition: 0.3s; }
        .deck-bottom-card { width: 100%; height: 100%; background: #eee; color: #111; border-radius: 5px; border: 1px solid #777; position: absolute; z-index: 5; bottom: -15px; right: -15px; transform: rotate(10deg); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; opacity: 0.8; box-shadow: 2px 2px 5px rgba(0,0,0,0.5); font-family: sans-serif; }
        .deck-label { position: absolute; top: -25px; width: 100%; text-align: center; font-size: 12px; font-weight: bold; color: #d4af37; text-shadow: 1px 1px 2px #000; }

        #startup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.95); z-index: 100; color: #fdf5e6; }
        .toss-cards { display: flex; gap: 50px; margin: 20px 0; }
        .toss-player-box { text-align: center; font-size: 20px; font-weight: bold; }
        .toss-card-visual { width: 100px; height: 150px; background: #fff; color: #111; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 36px; border: 4px solid #d4af37; margin-top: 10px; font-family: sans-serif; }

        .cutin-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 200; display: none; align-items: center; justify-content: center; pointer-events: none; }
        .cutin-banner { 
            width: 100%; text-align: center; font-size: 45px; font-weight: 300; 
            padding: 40px 0; letter-spacing: 15px; 
            animation: chillCutin 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; 
            opacity: 0; font-family: 'Georgia', serif; 
            box-shadow: 0 0 30px rgba(255,255,255,0.05);
            backdrop-filter: blur(8px);
        }
        @keyframes chillCutin { 
            0% { transform: translateY(30px) scale(0.95); opacity: 0; filter: blur(15px); } 
            25% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); } 
            75% { transform: translateY(-10px) scale(1.02); opacity: 1; filter: blur(0); } 
            100% { transform: translateY(-40px) scale(1.05); opacity: 0; filter: blur(15px); } 
        }
        .bomb-bg { 
            background: linear-gradient(135deg, rgba(255, 105, 180, 0.3), rgba(75, 0, 130, 0.7), rgba(0, 0, 0, 0.6)); 
            color: #ffb6c1; text-shadow: 0 0 15px rgba(255,105,180,0.8); 
            border-top: 1px solid rgba(255,105,180,0.5); border-bottom: 1px solid rgba(255,105,180,0.5);
        }
        .revol-bg { 
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(0, 0, 128, 0.7), rgba(0, 0, 0, 0.6)); 
            color: #e0ffff; text-shadow: 0 0 15px rgba(0,255,255,0.8); 
            border-top: 1px solid rgba(0,255,255,0.5); border-bottom: 1px solid rgba(0,255,255,0.5);
        }

        #attack-arrow {
            position: absolute; font-size: 60px; z-index: 250; pointer-events: none; color: #ffcc00; text-shadow: 0 0 15px #ff0000;
        }

        /* ===== LINE・スマホ共有向け調整 ===== */
        html {
            width: 100%;
            min-height: 100%;
            overflow-x: hidden;
            -webkit-text-size-adjust: 100%;
            touch-action: manipulation;
        }

        body {
            width: 100%;
            box-sizing: border-box;
            overflow-x: hidden;
            padding:
                max(8px, env(safe-area-inset-top))
                max(8px, env(safe-area-inset-right))
                max(16px, env(safe-area-inset-bottom))
                max(8px, env(safe-area-inset-left));
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }

        button, .clickable-card {
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        @media (hover: none) {
            .clickable-card:hover,
            #player-field .card-back:hover,
            .action-btn:hover,
            .start-movie-btn:hover {
                transform: none;
                box-shadow: inherit;
            }
        }

        @media (max-width: 700px) {
            body {
                padding-left: 6px;
                padding-right: 6px;
            }

            body > h2 {
                font-size: 20px !important;
                letter-spacing: 5px !important;
            }

            

            .start-movie-btn {
                min-height: 52px;
                padding: 12px 22px;
                font-size: 18px;
                letter-spacing: 3px;
            }

            #turn-info {
                font-size: 15px;
            }

            #phase-bar {
                width: 100%;
                padding: 10px 8px;
                margin: 8px auto 12px;
                font-size: 15px;
                line-height: 1.45;
            }

            #action-buttons {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 8px;
                margin-bottom: 10px !important;
            }

            .action-btn,
            .confirm-btn,
            .cancel-btn {
                min-height: 46px;
                font-size: 14px;
                padding: 10px 14px;
                margin: 0 2px 8px;
            }

            .field-area {
                padding: 10px 6px;
                margin-bottom: 12px;
                overflow: hidden;
            }

            .field-area h3 {
                font-size: 16px;
                margin-bottom: 6px;
            }

            .card-zone {
                gap: 7px;
                min-height: 78px;
                margin-top: 7px;
                margin-bottom: 7px;
                padding: 4px 0 8px;
                overflow-x: auto;
                overflow-y: visible;
                justify-content: flex-start;
                scroll-snap-type: x proximity;
                -webkit-overflow-scrolling: touch;
            }

            #opponent-field,
            #player-field {
                justify-content: center;
                overflow-x: visible;
            }

            .card {
                flex: 0 0 49px;
                width: 49px;
                height: 73px;
                font-size: 17px;
                scroll-snap-align: center;
            }

            .selected-card {
                transform: translateY(-5px) scale(1.03);
                border-width: 3px !important;
            }

            .deck-container {
                right: 12px;
                top: 28px;
                width: 42px;
                height: 63px;
            }

            .deck-pile {
                font-size: 17px;
            }

            .deck-bottom-card {
                bottom: -8px;
                right: -8px;
                font-size: 13px;
            }

            .deck-label {
                top: -20px;
                font-size: 10px;
                white-space: nowrap;
            }

            .disposal-container {
                gap: 6px;
                margin-top: 8px;
            }

            .disposal-box {
                min-width: 0;
                padding: 6px 4px;
                min-height: 54px;
            }

            .disposal-title {
                font-size: 11px;
            }

            .grave-card,
            .slash-card {
                font-size: 10px;
                padding: 3px 4px;
            }

            .counter-area {
                padding: 10px 7px;
                margin-bottom: 12px;
            }

            .counter-area h3 {
                font-size: 16px;
            }

            .counter-area p {
                font-size: 13px;
                line-height: 1.5;
                white-space: pre-line;
            }

            #startup-overlay {
                padding:
                    max(12px, env(safe-area-inset-top))
                    10px
                    max(16px, env(safe-area-inset-bottom));
                overflow-y: auto;
            }

            #startup-overlay h1 {
                font-size: 21px;
            }

            #startup-overlay p {
                font-size: 13px;
                line-height: 1.5;
                max-width: 92vw;
            }

            .toss-cards {
                gap: 18px;
                margin: 12px 0;
            }

            .toss-player-box {
                font-size: 14px;
            }

            .toss-card-visual {
                width: 70px;
                height: 105px;
                font-size: 24px;
                border-width: 3px;
            }

            #toss-result-text {
                font-size: 17px;
                height: auto !important;
                min-height: 48px;
            }

            .cutin-banner {
                font-size: clamp(25px, 8vw, 38px);
                padding: 28px 4px;
                letter-spacing: 7px;
            }

            #attack-arrow {
                font-size: 40px;
            }
        }

        @media (max-width: 390px) {

            .action-btn {
                font-size: 13px;
                padding-left: 11px;
                padding-right: 11px;
            }

            .deck-container {
                transform: scale(0.9);
                transform-origin: top right;
            }
        }


        /* ===== シネマティック防衛・チェーン演出 ===== */
        .duel-cinematic {
            position: fixed;
            inset: 0;
            z-index: 450;
            display: none;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            pointer-events: none;
            isolation: isolate;
        }

        .duel-cinematic.show {
            display: flex;
        }

        .duel-vignette {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at center, rgba(255,255,255,.04) 0%, rgba(0,0,0,.3) 42%, rgba(0,0,0,.9) 100%),
                linear-gradient(120deg, rgba(5,8,12,.88), rgba(24,17,8,.78));
            animation: duelFade 1.75s ease both;
        }

        .duel-scanlines {
            position: absolute;
            inset: 0;
            opacity: .18;
            background: repeating-linear-gradient(
                to bottom,
                rgba(255,255,255,.08) 0,
                rgba(255,255,255,.08) 1px,
                transparent 1px,
                transparent 5px
            );
            mix-blend-mode: overlay;
            animation: scanShift .22s linear infinite;
        }

        .duel-flash {
            position: absolute;
            inset: 0;
            background: white;
            opacity: 0;
            animation: duelFlash 1.6s ease-out both;
        }

        .duel-symbol {
            position: absolute;
            font-size: min(58vw, 480px);
            line-height: 1;
            opacity: .06;
            transform: rotate(-10deg) scale(.7);
            filter: blur(2px);
            animation: symbolRise 1.7s cubic-bezier(.2,.8,.2,1) both;
        }

        .duel-panel {
            position: relative;
            width: min(92vw, 960px);
            padding: 26px 22px 30px;
            border-top: 1px solid rgba(255,255,255,.55);
            border-bottom: 1px solid rgba(255,255,255,.4);
            background:
                linear-gradient(90deg, transparent, rgba(0,0,0,.82) 10%, rgba(0,0,0,.9) 50%, rgba(0,0,0,.82) 90%, transparent);
            box-shadow: 0 0 50px rgba(0,0,0,.8);
            text-align: center;
            transform: skewX(-7deg) translateY(28px);
            opacity: 0;
            animation: panelEnter 1.7s cubic-bezier(.16,.8,.2,1) both;
        }

        .duel-panel::before,
        .duel-panel::after {
            content: "";
            position: absolute;
            left: 50%;
            width: min(70%, 560px);
            height: 1px;
            transform: translateX(-50%);
            background: linear-gradient(90deg, transparent, currentColor, transparent);
            opacity: .8;
        }

        .duel-panel::before { top: 9px; }
        .duel-panel::after { bottom: 9px; }

        .duel-kicker {
            font-family: "Courier New", monospace;
            font-size: clamp(11px, 2.6vw, 18px);
            letter-spacing: .42em;
            margin-left: .42em;
            opacity: .76;
            text-transform: uppercase;
        }

        .duel-main {
            margin-top: 7px;
            font-family: Georgia, serif;
            font-size: clamp(34px, 9vw, 82px);
            font-weight: 700;
            letter-spacing: .12em;
            margin-left: .12em;
            line-height: 1.04;
            text-shadow: 0 3px 0 rgba(0,0,0,.65), 0 0 18px currentColor;
        }

        .duel-sub {
            margin-top: 12px;
            font-size: clamp(13px, 3.2vw, 21px);
            letter-spacing: .12em;
            opacity: .9;
        }

        .duel-cinematic.type-onecard { color: #e6edf7; }
        .duel-cinematic.type-pair { color: #f3d07b; }
        .duel-cinematic.type-bomb { color: #ff9bcf; }
        .duel-cinematic.type-revolution { color: #9be8ff; }
        .duel-cinematic.type-joker { color: #d7b5ff; }
        .duel-cinematic.type-result { color: #f0dfaf; }

        .duel-cinematic.enemy .duel-vignette {
            background:
                radial-gradient(circle at center, rgba(255,60,60,.05) 0%, rgba(25,0,0,.4) 44%, rgba(0,0,0,.94) 100%),
                linear-gradient(120deg, rgba(18,0,0,.9), rgba(34,8,8,.82));
        }

        .duel-cinematic.player .duel-vignette {
            background:
                radial-gradient(circle at center, rgba(70,140,255,.07) 0%, rgba(0,10,30,.4) 44%, rgba(0,0,0,.94) 100%),
                linear-gradient(120deg, rgba(0,8,22,.92), rgba(8,24,44,.82));
        }

        @keyframes panelEnter {
            0%   { opacity:0; transform:skewX(-7deg) translateX(-14%) translateY(30px) scale(.94); filter:blur(10px); }
            18%  { opacity:1; filter:blur(0); }
            70%  { opacity:1; transform:skewX(-7deg) translateX(0) translateY(0) scale(1); }
            100% { opacity:0; transform:skewX(-7deg) translateX(8%) translateY(-10px) scale(1.02); filter:blur(4px); }
        }

        @keyframes symbolRise {
            0%   { opacity:0; transform:rotate(-18deg) scale(.45); }
            28%  { opacity:.09; }
            100% { opacity:0; transform:rotate(3deg) scale(1.25); }
        }

        @keyframes duelFlash {
            0% { opacity:.8; }
            8% { opacity:0; }
            20% { opacity:.12; }
            100% { opacity:0; }
        }

        @keyframes duelFade {
            0% { opacity:0; }
            15%, 78% { opacity:1; }
            100% { opacity:0; }
        }

        @keyframes scanShift {
            from { transform:translateY(0); }
            to   { transform:translateY(5px); }
        }

        @media (max-width: 700px) {
            .duel-panel {
                width: 100vw;
                padding: 22px 10px 26px;
            }
            .duel-kicker { letter-spacing: .28em; margin-left: .28em; }
            .duel-main { letter-spacing: .07em; margin-left: .07em; }
            .duel-sub { padding: 0 12px; }
        }


        /* ===== メイン行動を手札下へ配置 ===== */
        #main-action-dock {
            margin-top: 10px;
            padding-top: 12px;
            border-top: 1px solid rgba(212,175,55,.28);
        }

        #main-action-dock #action-buttons {
            margin-bottom: 10px !important;
        }

        @media (max-width: 700px) {
            #main-action-dock {
                position: sticky;
                bottom: max(0px, env(safe-area-inset-bottom));
                z-index: 80;
                margin: 8px -6px -10px;
                padding:
                    10px 6px
                    max(10px, env(safe-area-inset-bottom));
                background:
                    linear-gradient(to top, rgba(2,10,5,.98), rgba(2,10,5,.9) 76%, rgba(2,10,5,.2));
                border-top: 1px solid rgba(212,175,55,.5);
                box-shadow: 0 -8px 20px rgba(0,0,0,.55);
                backdrop-filter: blur(8px);
            }

            #main-action-dock #action-buttons {
                margin-bottom: 4px !important;
            }

            #main-action-dock .action-btn,
            #main-action-dock .confirm-btn,
            #main-action-dock .cancel-btn {
                min-height: 48px;
            }
        }


        /* ===== 1画面完結レイアウト ===== */
        html, body {
            width: 100%;
            height: 100%;
            min-height: 100%;
            overflow: hidden !important;
        }

        body {
            height: 100dvh;
            min-height: 100dvh;
            display: grid;
            grid-template-rows: auto auto auto minmax(0, 1fr) minmax(0, 1fr);
            gap: 4px;
            padding:
                max(4px, env(safe-area-inset-top))
                max(5px, env(safe-area-inset-right))
                max(4px, env(safe-area-inset-bottom))
                max(5px, env(safe-area-inset-left));
        }

        body > h2,
        #turn-info,
        #revolution-status,
        #phase-bar,
        #counter-menu,
        #player-chain-menu,
        .field-area {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        body > h2 {
            font-size: clamp(14px, 2.6vh, 22px) !important;
            line-height: 1;
        }

        #turn-info {
            font-size: clamp(11px, 1.9vh, 15px);
            line-height: 1.1;
        }

        #revolution-status {
            font-size: clamp(10px, 1.6vh, 13px);
            padding: 3px !important;
        }

        #phase-bar {
            width: 100%;
            padding: 5px 7px;
            font-size: clamp(11px, 1.8vh, 14px);
            line-height: 1.2;
        }

        .field-area {
            min-height: 0;
            overflow: hidden;
            padding: 6px 5px;
            display: grid;
            grid-template-rows: auto minmax(54px, 1fr) auto;
            align-content: stretch;
        }

        .player-area {
            grid-template-rows: auto minmax(48px, .8fr) auto auto minmax(50px, .9fr) auto;
        }

        .field-area h3 {
            font-size: clamp(11px, 1.8vh, 14px) !important;
            line-height: 1;
            margin: 0 0 2px !important;
        }

        .card-zone {
            min-height: 0 !important;
            height: 100%;
            margin: 0 !important;
            gap: clamp(3px, 1vw, 7px);
            padding: 2px 0;
            overflow: visible !important;
            align-items: center;
        }

        .card {
            width: min(12vw, 48px);
            height: min(17vw, 68px);
            max-height: 8.8vh;
            min-height: 42px;
            flex: 0 0 auto;
            font-size: clamp(12px, 2.3vh, 17px);
        }

        .disposal-container {
            margin-top: 2px;
            gap: 4px;
            min-height: 0;
        }

        .disposal-box {
            min-height: 0;
            height: clamp(30px, 5.8vh, 44px);
            padding: 3px;
        }

        .disposal-title {
            font-size: clamp(8px, 1.35vh, 10px);
            line-height: 1;
            margin-bottom: 2px;
            padding-bottom: 1px;
        }

        .graveyard-zone,
        .slash-zone {
            max-height: 22px;
            overflow: hidden;
        }

        .grave-card,
        .slash-card {
            font-size: 8px;
        }

        .deck-container {
            width: min(9vw, 38px);
            height: min(13vw, 54px);
            right: 8px;
            top: 19px;
        }

        .deck-label {
            top: -15px;
            font-size: 8px;
        }

        .deck-pile {
            font-size: clamp(11px, 2vh, 15px);
        }

        .deck-bottom-card {
            font-size: 10px;
            right: -5px;
            bottom: -5px;
        }

        #main-action-dock {
            position: static !important;
            margin: 2px 0 0 !important;
            padding: 4px 0 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
        }

        #main-action-dock #action-buttons {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 4px;
            margin: 0 !important;
        }

        #main-action-dock .action-btn,
        #main-action-dock .confirm-btn,
        #main-action-dock .cancel-btn {
            min-height: 32px !important;
            height: auto;
            padding: 5px 3px;
            margin: 0 !important;
            border-radius: 10px;
            font-size: clamp(9px, 1.45vh, 12px);
            line-height: 1.1;
        }

        #main-action-dock > div[style*="margin-bottom"] {
            margin: 3px 0 0 !important;
        }

        .counter-area {
            position: fixed;
            left: 5px;
            right: 5px;
            bottom: max(5px, env(safe-area-inset-bottom));
            z-index: 120;
            max-height: 32vh;
            overflow: auto;
            padding: 8px 6px;
        }

        .counter-area h3 {
            font-size: 13px;
            margin: 0 0 4px;
        }

        .counter-area p {
            font-size: 11px;
            margin: 3px 0 6px;
        }

        .counter-area .action-btn {
            min-height: 36px;
            padding: 6px 8px;
            font-size: 11px;
        }

        #startup-overlay {
            height: 100dvh;
        }

        .toss-cards {
            margin: 8px 0;
        }

        .toss-card-visual {
            width: min(18vw, 62px);
            height: min(27vw, 92px);
        }

        @media (max-height: 700px) {
            body {
                gap: 2px;
            }

            .field-area {
                padding-top: 4px;
                padding-bottom: 4px;
            }

            .card {
                max-height: 7.7vh;
                min-height: 38px;
            }

            .disposal-box {
                height: 28px;
            }

            .graveyard-zone,
            .slash-zone {
                display: none;
            }

            .player-area {
                grid-template-rows: auto minmax(42px, .75fr) auto auto minmax(44px, .8fr) auto;
            }

            #main-action-dock .action-btn,
            #main-action-dock .confirm-btn,
            #main-action-dock .cancel-btn {
                min-height: 28px !important;
                font-size: 9px;
            }
        }

        @media (orientation: landscape) and (max-height: 500px) {
            body {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto auto minmax(0, 1fr);
            }

            body > h2,
            #turn-info,
            #revolution-status,
            #phase-bar {
                grid-column: 1 / -1;
            }

            .opponent-area {
                grid-column: 1;
            }

            .player-area {
                grid-column: 2;
            }
        }


        /* ===== 1画面版の表示修正：カード寸法復元＋墓地/スラッシュ再表示 ===== */
        .card {
            flex: 0 0 49px !important;
            width: 49px !important;
            height: 73px !important;
            max-height: none !important;
            min-height: 73px !important;
            font-size: 17px !important;
        }

        .disposal-box {
            height: auto !important;
            min-height: 50px !important;
            padding: 4px !important;
        }

        .graveyard-zone,
        .slash-zone {
            display: flex !important;
            max-height: 26px !important;
            gap: 2px !important;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .graveyard-zone::-webkit-scrollbar,
        .slash-zone::-webkit-scrollbar {
            display: none;
        }

        .grave-card,
        .slash-card {
            display: inline-block !important;
            flex: 0 0 auto !important;
            font-size: 9px !important;
            line-height: 1 !important;
            padding: 2px 3px !important;
        }

        .field-area {
            grid-template-rows: auto minmax(76px, 1fr) auto !important;
        }

        .player-area {
            grid-template-rows:
                auto
                minmax(76px, .9fr)
                auto
                auto
                minmax(76px, 1fr)
                auto !important;
        }

        @media (max-height: 700px) {
            .card {
                flex-basis: 47px !important;
                width: 47px !important;
                height: 70px !important;
                min-height: 70px !important;
                font-size: 16px !important;
            }

            .graveyard-zone,
            .slash-zone {
                display: flex !important;
                max-height: 24px !important;
            }

            .disposal-box {
                min-height: 46px !important;
            }
        }

        @media (max-width: 390px) {
            .card {
                flex-basis: 45px !important;
                width: 45px !important;
                height: 68px !important;
                min-height: 68px !important;
                font-size: 16px !important;
            }
        }


        /* ===== チェーンフェイズUI再配置 ===== */
        #player-chain-menu {
            position: fixed !important;
            left: 6px !important;
            right: 6px !important;
            top: max(6px, env(safe-area-inset-top)) !important;
            bottom: auto !important;
            z-index: 130 !important;
            max-height: none !important;
            overflow: visible !important;
            padding: 7px 10px 8px !important;
            margin: 0 !important;
            border-radius: 8px !important;
            background: rgba(2, 8, 18, .94) !important;
            box-shadow: 0 4px 16px rgba(0,0,0,.55) !important;
            backdrop-filter: blur(7px);
        }

        #player-chain-menu h3 {
            font-size: 12px !important;
            margin: 0 0 2px !important;
            line-height: 1.1 !important;
        }

        #player-chain-menu #chain-message {
            font-size: 10px !important;
            line-height: 1.25 !important;
            margin: 0 !important;
            white-space: pre-line;
        }

        #player-chain-menu .chain-action-group {
            position: fixed;
            right: max(8px, env(safe-area-inset-right));
            bottom: max(8px, env(safe-area-inset-bottom));
            z-index: 150;
            align-items: stretch;
            width: min(44vw, 180px);
            pointer-events: auto;
        }

        #player-chain-menu .chain-action-group .action-btn {
            width: 100%;
            min-height: 44px !important;
            margin: 0 !important;
            padding: 8px 10px !important;
            border-radius: 12px !important;
            font-size: 11px !important;
            line-height: 1.2 !important;
            box-shadow: 0 4px 12px rgba(0,0,0,.55);
        }

        #counter-menu {
            position: fixed !important;
            left: 6px !important;
            right: 6px !important;
            top: max(6px, env(safe-area-inset-top)) !important;
            bottom: auto !important;
            z-index: 130 !important;
            max-height: none !important;
            overflow: visible !important;
            padding: 7px 10px 8px !important;
            margin: 0 !important;
            border-radius: 8px !important;
            background: rgba(14, 8, 2, .94) !important;
            box-shadow: 0 4px 16px rgba(0,0,0,.55) !important;
            backdrop-filter: blur(7px);
        }

        #counter-menu h3 {
            font-size: 12px !important;
            margin: 0 0 2px !important;
        }

        #counter-menu p {
            font-size: 10px !important;
            margin: 0 !important;
            line-height: 1.25 !important;
        }

        @media (max-width: 390px) {
            #player-chain-menu .chain-action-group {
                width: min(48vw, 168px);
            }
        }


/* === chain buttons beside hand === */
#player-chain-menu .chain-action-group{
    position:absolute !important;
    right:8px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    bottom:auto !important;
    width:112px !important;
    display:flex;
    flex-direction:column;
    gap:6px;
    z-index:5;
}
#player-chain-menu{
    padding-right:128px !important;
}
#player-chain-menu .chain-action-group .action-btn{
    min-height:36px !important;
    font-size:10px !important;
    padding:6px 6px !important;
    width:112px !important;
}
@media (max-width:390px){
 #player-chain-menu{padding-right:108px !important;}
 #player-chain-menu .chain-action-group,
 #player-chain-menu .chain-action-group .action-btn{
   width:94px !important;
   font-size:9px !important;
 }
}


        /* ===== チェーン説明と操作ボタンを完全分離 ===== */
        #player-chain-menu {
            padding-right: 10px !important;
        }

        #hand-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 6px;
        }

        #hand-row #hand-zone {
            min-width: 0;
            width: 100%;
            justify-content: center;
        }

        #chain-hand-controls {
            gap: 5px;
            width: 94px;
            flex: 0 0 94px;
            align-self: center;
            z-index: 90;
        }

        #chain-hand-controls .action-btn {
            width: 94px !important;
            min-height: 34px !important;
            padding: 5px 5px !important;
            border-radius: 10px !important;
            font-size: 10px !important;
            line-height: 1.15 !important;
            box-shadow: 0 3px 10px rgba(0,0,0,.5);
        }

        @media (max-width: 390px) {
            #hand-row {
                gap: 4px;
            }

            #chain-hand-controls {
                width: 82px;
                flex-basis: 82px;
            }

            #chain-hand-controls .action-btn {
                width: 82px !important;
                font-size: 9px !important;
                padding-left: 3px !important;
                padding-right: 3px !important;
            }

            body.chain-choice-active #hand-zone {
                justify-content: flex-start !important;
            }
        }


        /* ===== 自分の場の裏向きカードを常時確認表示 ===== */
        #player-field .card-back {
            background-image: none !important;
            background: #333 !important;
            border-color: #d4af37 !important;
            color: #d4af37 !important;
            transform: translateY(-5px);
            box-shadow: 0 0 15px rgba(255,215,0,.45);
        }

        #player-field .card-back:hover {
            background-image: none !important;
            background: #333 !important;
            border-color: #d4af37 !important;
            color: #d4af37 !important;
            transform: translateY(-5px);
            box-shadow: 0 0 15px rgba(255,215,0,.45);
        }


        /* ===== 同数相打ち専用演出 ===== */
        .duel-cinematic.type-clash {
            color: #f7f0d0;
        }

        .duel-cinematic.type-clash .duel-vignette {
            background:
                radial-gradient(circle at center, rgba(255,255,255,.12) 0%, rgba(30,20,0,.34) 38%, rgba(0,0,0,.94) 100%),
                linear-gradient(120deg, rgba(18,12,4,.92), rgba(32,20,6,.84));
        }

        .duel-cinematic.type-clash .duel-main {
            letter-spacing: .08em;
        }

        .duel-cinematic.type-clash .duel-symbol {
            opacity: .09;
        }


        /* ===== プレイヤー側の横ずれ防止 ===== */
        .player-area {
            width: 100% !important;
            min-width: 0 !important;
            left: 0 !important;
            right: 0 !important;
        }

        #player-field,
        #hand-zone {
            width: 100% !important;
            min-width: 0 !important;
            margin-left: auto !important;
            margin-right: auto !important;
            justify-content: center !important;
            transform: none !important;
        }

        /*
         * チェーンボタンを手札レイアウトの列から除外。
         * 表示・非表示で手札の幅や中央位置が変わらないようにする。
         */
        #hand-row {
            position: relative !important;
            display: block !important;
            width: 100% !important;
            min-width: 0 !important;
            padding: 0 !important;
        }

        #hand-row #hand-zone {
            display: flex !important;
            box-sizing: border-box !important;
        }

        #chain-hand-controls {
            position: absolute !important;
            right: 2px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 78px !important;
            display: none;
            flex-direction: column;
            gap: 4px;
            z-index: 95;
            pointer-events: auto;
        }

        body.chain-choice-active #chain-hand-controls {
            display: flex !important;
        }

        #chain-hand-controls .action-btn {
            width: 78px !important;
            min-height: 31px !important;
            padding: 4px 3px !important;
            margin: 0 !important;
            font-size: 9px !important;
            line-height: 1.05 !important;
            border-radius: 9px !important;
        }

        /*
         * ボタン表示中もカード列自体は常に同じ中心位置を維持。
         * 狭い端末では右端カードとの重なりを避けるため、ボタンを少し外側へ。
         */
        @media (max-width: 390px) {
            #chain-hand-controls {
                right: -2px !important;
                width: 70px !important;
            }

            #chain-hand-controls .action-btn {
                width: 70px !important;
                font-size: 8px !important;
            }
        }

        /* タップ選択時も横方向へ見かけ上動かさない */
        #player-field .selected-card,
        #hand-zone .selected-card {
            transform: translateY(-5px) scale(1.03) !important;
            transform-origin: center center !important;
        }


        /* ===== 革命後の上部赤UI肥大化バグ修正 ===== */
        #revolution-status {
            position: static !important;
            display: none;
            width: 100% !important;
            max-width: 100% !important;
            min-height: 0 !important;
            height: auto !important;
            padding: 3px 6px !important;
            border: 0 !important;
            border-radius: 0 !important;
            font-size: clamp(9px, 1.35vh, 12px) !important;
            line-height: 1.15 !important;
            box-shadow: none !important;
            text-overflow: ellipsis;
            z-index: auto !important;
            inset: auto !important;
        }

        #revolution-status[style*="display: block"] {
            display: block !important;
        }

        /* 一時UIが革命解決後に残らないよう明示 */
        body:not(.chain-choice-active) #player-chain-menu,
        body:not(.chain-choice-active) #chain-hand-controls {
            pointer-events: none;
        }


        /* ===== 革命時の巨大赤余白：確定修正 ===== */
        /*
         * body は5行グリッドですが、革命表示が通常フローに入ると
         * 6番目の暗黙行が生成され、phase-bar が巨大化して見えていました。
         * 革命表示をグリッドから完全に外し、各主要要素の行を固定します。
         */
        body > h2 {
            grid-row: 1 !important;
        }

        #turn-info {
            grid-row: 2 !important;
        }

        #phase-bar {
            grid-row: 3 !important;
            min-height: 28px !important;
            height: auto !important;
            max-height: 38px !important;
            overflow: hidden !important;
        }

        .opponent-area {
            grid-row: 4 !important;
        }

        .player-area {
            grid-row: 5 !important;
        }

        #revolution-status {
            position: fixed !important;
            left: 6px !important;
            right: 6px !important;
            top: 118px;
            width: auto !important;
            height: 22px !important;
            min-height: 22px !important;
            max-height: 22px !important;
            padding: 3px 8px !important;
            margin: 0 !important;
            z-index: 115 !important;
            border: 1px solid rgba(212,175,55,.7) !important;
            border-radius: 7px !important;
            background: linear-gradient(90deg, rgba(70,0,0,.94), rgba(130,0,0,.98), rgba(70,0,0,.94)) !important;
            color: #ffd700 !important;
            font-size: 10px !important;
            line-height: 14px !important;
            letter-spacing: 1px !important;
            white-space: nowrap !important;
            text-align: center !important;
            box-shadow: 0 3px 10px rgba(0,0,0,.55) !important;
            pointer-events: none !important;
            transform: none !important;
            overflow: hidden !important;
        }

        @media (max-width: 390px) {
            #revolution-status {
                left: 4px !important;
                right: 4px !important;
                font-size: 9px !important;
                padding-left: 4px !important;
                padding-right: 4px !important;
            }
        }


        /* ===== チェーン中の手札を少し左へ移動 ===== */
        body.chain-choice-active #hand-zone {
            transform: translateX(-14px) !important;
            padding-right: 72px !important;
        }

        @media (max-width: 390px) {
            body.chain-choice-active #hand-zone {
                transform: translateX(-10px) !important;
                padding-right: 64px !important;
            }
        }


        /* ===== 墓地・スラッシュ：ナンバー別スタック表示 ===== */
        .graveyard-zone,
        .slash-zone {
            align-items: center;
            gap: 5px !important;
            padding: 2px 1px;
        }

        .grouped-zone-card {
            position: relative;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            min-width: 30px;
            height: 22px;
            padding: 2px 16px 2px 6px !important;
            flex: 0 0 auto !important;
            border-radius: 5px !important;
            box-shadow:
                2px 2px 0 rgba(255,255,255,.08),
                4px 4px 0 rgba(0,0,0,.18);
        }

        .grouped-zone-number {
            font-weight: 700;
            font-size: 10px;
            line-height: 1;
        }

        .grouped-zone-count {
            position: absolute;
            right: 3px;
            bottom: 2px;
            min-width: 13px;
            height: 13px;
            padding: 1px 2px;
            border-radius: 7px;
            background: rgba(0,0,0,.75);
            color: #fff;
            font-family: sans-serif;
            font-weight: 700;
            font-size: 8px;
            line-height: 11px;
            text-align: center;
            border: 1px solid rgba(255,255,255,.25);
        }

        .grave-card.grouped-zone-card {
            color: #d0d0d0 !important;
        }

        .slash-card.grouped-zone-card {
            color: #ffd86a !important;
        }

        @media (max-width: 390px) {
            .grouped-zone-card {
                min-width: 28px;
                height: 21px;
                padding-left: 5px !important;
                padding-right: 15px !important;
            }

            .grouped-zone-number {
                font-size: 9px;
            }

            .grouped-zone-count {
                font-size: 7px;
            }
        }


        /* ===== 墓地・スラッシュ：実カード積層表示 ===== */
        .graveyard-zone,
        .slash-zone {
            align-items: flex-start !important;
            gap: 8px !important;
            flex-wrap: nowrap !important;
            justify-content: flex-start !important;
            padding: 1px 2px 3px !important;
        }

        .number-stack {
            position: relative;
            flex: 0 0 34px;
            width: 34px;
            min-width: 34px;
        }

        .stacked-zone-card {
            position: absolute !important;
            width: 30px !important;
            min-width: 30px !important;
            height: 22px !important;
            padding: 0 !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            border-radius: 4px !important;
            box-sizing: border-box;
            box-shadow:
                0 1px 0 rgba(255,255,255,.18) inset,
                1px 1px 2px rgba(0,0,0,.55);
        }

        .stacked-zone-number {
            position: relative;
            z-index: 20;
            font-size: 10px;
            line-height: 1;
            font-weight: 700;
            text-shadow: 0 1px 1px rgba(0,0,0,.8);
        }

        .grave-card.stacked-zone-card {
            background: linear-gradient(180deg, #313131, #171717) !important;
            color: #d4d4d4 !important;
            border: 1px solid #666 !important;
        }

        .slash-card.stacked-zone-card {
            background: linear-gradient(180deg, #613219, #32180c) !important;
            color: #ffd86a !important;
            border: 1px solid #d4af37 !important;
        }

        /* 旧「×枚数」表示は完全に無効化 */
        .grouped-zone-card,
        .grouped-zone-count,
        .grouped-zone-number {
            display: none !important;
        }

        @media (max-width: 390px) {
            .graveyard-zone,
            .slash-zone {
                gap: 6px !important;
            }

            .number-stack {
                flex-basis: 31px;
                width: 31px;
                min-width: 31px;
            }

            .stacked-zone-card {
                width: 28px !important;
                min-width: 28px !important;
                height: 21px !important;
            }

            .stacked-zone-number {
                font-size: 9px;
            }
        }


        /* ===== 全手札スラッシュ後の累積横ずれ修正 ===== */
        .player-area,
        .opponent-area,
        .disposal-container,
        .disposal-box,
        .graveyard-zone,
        .slash-zone,
        #hand-row,
        #hand-zone,
        #player-field {
            min-width: 0 !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        .player-area,
        .opponent-area {
            width: 100% !important;
            overflow: hidden !important;
            contain: layout paint;
        }

        .disposal-container {
            width: 100% !important;
            overflow: hidden !important;
        }

        .disposal-box {
            flex: 1 1 0 !important;
            width: 0 !important;
            overflow: hidden !important;
        }

        .graveyard-zone,
        .slash-zone {
            width: 100% !important;
            max-width: 100% !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            overscroll-behavior-x: contain;
            scroll-behavior: auto;
        }

        #hand-row,
        #hand-zone,
        #player-field {
            width: 100% !important;
            left: 0 !important;
            right: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* 通常時は累積した見かけ上の移動を完全に解除 */
        body:not(.chain-choice-active) #hand-zone {
            transform: none !important;
            padding-right: 0 !important;
        }


        /* ===== 勝利・敗北専用の強化演出 ===== */
        .duel-cinematic.type-result {
            color: #f5e8bd;
        }

        .duel-cinematic.type-result .duel-vignette {
            background:
                radial-gradient(circle at center, rgba(255,255,255,.12) 0%, rgba(0,0,0,.3) 35%, rgba(0,0,0,.95) 100%),
                linear-gradient(135deg, rgba(18,12,3,.94), rgba(0,0,0,.98));
            animation: resultBackdrop 2.6s ease both;
        }

        .duel-cinematic.type-result.player {
            --result-main: #f5d66f;
            --result-glow: rgba(245,214,111,.75);
            --result-deep: rgba(80,50,0,.92);
        }

        .duel-cinematic.type-result.enemy {
            --result-main: #ff5d68;
            --result-glow: rgba(255,93,104,.72);
            --result-deep: rgba(75,0,8,.94);
        }

        .duel-cinematic.type-result .duel-panel {
            width: min(96vw, 1040px);
            padding: 34px 20px 38px;
            border-top: 2px solid var(--result-main);
            border-bottom: 2px solid var(--result-main);
            background:
                linear-gradient(90deg, transparent, rgba(0,0,0,.88) 10%, rgba(0,0,0,.96) 50%, rgba(0,0,0,.88) 90%, transparent);
            box-shadow:
                0 0 35px var(--result-glow),
                0 0 100px rgba(0,0,0,.95);
            animation: resultPanel 2.7s cubic-bezier(.16,.8,.2,1) both;
        }

        .duel-cinematic.type-result .duel-kicker {
            color: var(--result-main);
            font-size: clamp(12px, 2.8vw, 19px);
            letter-spacing: .5em;
            text-shadow: 0 0 10px var(--result-glow);
        }

        .duel-cinematic.type-result .duel-main {
            color: var(--result-main);
            font-size: clamp(52px, 14vw, 126px);
            letter-spacing: .08em;
            margin-left: .08em;
            text-shadow:
                0 3px 0 #000,
                0 0 18px var(--result-glow),
                0 0 46px var(--result-glow);
            animation: resultTitle 2.7s cubic-bezier(.17,.84,.2,1) both;
        }

        .duel-cinematic.type-result .duel-sub {
            font-size: clamp(15px, 3.7vw, 24px);
            color: #fff8df;
            text-shadow: 0 0 10px rgba(255,255,255,.3);
        }

        .result-emblem {
            position: absolute;
            z-index: 2;
            font-size: min(46vw, 360px);
            line-height: 1;
            color: var(--result-main, #f5d66f);
            opacity: 0;
            filter: drop-shadow(0 0 18px var(--result-glow, rgba(245,214,111,.7)));
            animation: resultEmblem 2.7s cubic-bezier(.18,.85,.2,1) both;
        }

        .result-shockwave {
            position: absolute;
            z-index: 1;
            width: 18vmin;
            height: 18vmin;
            border: 2px solid var(--result-main, #f5d66f);
            border-radius: 50%;
            opacity: 0;
            box-shadow: 0 0 20px var(--result-glow, rgba(245,214,111,.6));
        }

        .result-shockwave-a {
            animation: resultWaveA 2.5s ease-out both;
        }

        .result-shockwave-b {
            animation: resultWaveB 2.5s .18s ease-out both;
        }

        .result-particles {
            position: absolute;
            inset: 0;
            z-index: 3;
            overflow: hidden;
        }

        .result-particle {
            position: absolute;
            width: 5px;
            height: 18px;
            border-radius: 2px;
            background: var(--result-main, #f5d66f);
            box-shadow: 0 0 10px var(--result-glow, rgba(245,214,111,.65));
            opacity: 0;
            animation: resultParticle 2.2s ease-out forwards;
        }

        .duel-cinematic.type-result.enemy .result-particle {
            width: 3px;
            height: 24px;
        }

        .duel-cinematic.type-result.enemy .duel-panel {
            transform-origin: center;
            animation-name: defeatPanel;
        }

        .duel-cinematic.type-result.enemy .duel-main {
            animation-name: defeatTitle;
        }

        @keyframes resultBackdrop {
            0% { opacity:0; filter:brightness(2.2); }
            12% { opacity:1; filter:brightness(1.5); }
            68% { opacity:1; filter:brightness(1); }
            100% { opacity:0; filter:brightness(.7); }
        }

        @keyframes resultPanel {
            0% { opacity:0; transform:scale(.55) rotateX(24deg); filter:blur(18px); }
            16% { opacity:1; transform:scale(1.08) rotateX(0); filter:blur(0); }
            34% { transform:scale(.98); }
            78% { opacity:1; transform:scale(1); }
            100% { opacity:0; transform:scale(1.06); filter:blur(6px); }
        }

        @keyframes defeatPanel {
            0% { opacity:0; transform:scale(1.35) rotate(-2deg); filter:blur(16px); }
            14% { opacity:1; transform:scale(.94) rotate(1deg); filter:blur(0); }
            30% { transform:scale(1.02) rotate(0); }
            76% { opacity:1; transform:scale(1); }
            100% { opacity:0; transform:translateY(24px) scale(.92); filter:blur(7px); }
        }

        @keyframes resultTitle {
            0% { opacity:0; transform:translateY(36px) scale(.55); letter-spacing:.35em; filter:blur(18px); }
            18% { opacity:1; transform:translateY(0) scale(1.12); letter-spacing:.08em; filter:blur(0); }
            36% { transform:scale(.96); }
            78% { opacity:1; transform:scale(1); }
            100% { opacity:0; transform:translateY(-12px) scale(1.08); filter:blur(6px); }
        }

        @keyframes defeatTitle {
            0% { opacity:0; transform:translateY(-26px) scale(1.5); filter:blur(16px); }
            15% { opacity:1; transform:translateY(0) scale(.92); filter:blur(0); }
            32% { transform:scale(1.04); }
            76% { opacity:1; }
            100% { opacity:0; transform:translateY(18px) scale(.9); filter:blur(7px); }
        }

        @keyframes resultEmblem {
            0% { opacity:0; transform:scale(.25) rotate(-18deg); }
            18% { opacity:.18; transform:scale(1.15) rotate(0); }
            55% { opacity:.1; transform:scale(1); }
            100% { opacity:0; transform:scale(1.45) rotate(8deg); }
        }

        @keyframes resultWaveA {
            0% { opacity:.85; transform:scale(.2); }
            70% { opacity:.18; }
            100% { opacity:0; transform:scale(7); }
        }

        @keyframes resultWaveB {
            0% { opacity:.65; transform:scale(.15); }
            70% { opacity:.12; }
            100% { opacity:0; transform:scale(9); }
        }

        @keyframes resultParticle {
            0% {
                opacity:0;
                transform:translate3d(0,0,0) rotate(0deg) scale(.4);
            }
            16% {
                opacity:1;
            }
            100% {
                opacity:0;
                transform:translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)) scale(1);
            }
        }

        @media (max-width: 700px) {
            .duel-cinematic.type-result .duel-panel {
                padding: 28px 8px 32px;
            }

            .duel-cinematic.type-result .duel-kicker {
                letter-spacing: .32em;
                margin-left: .32em;
            }

            .duel-cinematic.type-result .duel-main {
                font-size: clamp(48px, 16vw, 86px);
            }
        }


        /* ===== 相手の防衛放棄演出 ===== */
        .duel-cinematic.type-surrender {
            color: #d7d7d7;
        }

        .duel-cinematic.type-surrender .duel-vignette {
            background:
                radial-gradient(circle at center, rgba(255,255,255,.04) 0%, rgba(20,20,20,.55) 42%, rgba(0,0,0,.96) 100%),
                linear-gradient(135deg, rgba(15,15,15,.94), rgba(0,0,0,.98));
        }

        .duel-cinematic.type-surrender .duel-panel {
            border-top: 1px solid rgba(210,210,210,.55);
            border-bottom: 1px solid rgba(210,210,210,.35);
            background:
                linear-gradient(90deg, transparent, rgba(0,0,0,.84) 12%, rgba(0,0,0,.94) 50%, rgba(0,0,0,.84) 88%, transparent);
            animation: surrenderPanel 1.9s cubic-bezier(.18,.82,.2,1) both;
        }

        .duel-cinematic.type-surrender .duel-main {
            color: #ececec;
            text-shadow:
                0 3px 0 #000,
                0 0 16px rgba(255,255,255,.22);
            animation: surrenderTitle 1.9s ease both;
        }

        .duel-cinematic.type-surrender .duel-kicker {
            color: #a9a9a9;
        }

        .duel-cinematic.type-surrender .duel-sub {
            color: #cfcfcf;
        }

        @keyframes surrenderPanel {
            0% {
                opacity:0;
                transform:translateY(22px) scale(.96);
                filter:blur(10px);
            }
            20% {
                opacity:1;
                transform:translateY(0) scale(1);
                filter:blur(0);
            }
            72% {
                opacity:1;
            }
            100% {
                opacity:0;
                transform:translateY(12px) scale(.98);
                filter:blur(5px);
            }
        }

        @keyframes surrenderTitle {
            0% {
                opacity:0;
                letter-spacing:.28em;
                transform:scale(.88);
                filter:blur(10px);
            }
            22% {
                opacity:1;
                letter-spacing:.1em;
                transform:scale(1);
                filter:blur(0);
            }
            75% {
                opacity:1;
            }
            100% {
                opacity:0;
                transform:scale(.96);
                filter:blur(4px);
            }
        }


/* === Theme enhancements === */
.duel-cinematic.type-revolution .duel-panel{border-top:2px solid #ff3030;border-bottom:2px solid #ff3030;box-shadow:0 0 30px #a00;}
.duel-cinematic.type-bomb .duel-panel{border-top:2px solid #b050ff;border-bottom:2px solid #b050ff;box-shadow:0 0 35px #8a2be2;}
.duel-cinematic.type-joker .duel-panel{border-top:2px solid #111;border-bottom:2px solid #555;background:linear-gradient(90deg,#000,#222,#000);box-shadow:0 0 40px #000,0 0 20px #666;}

/* ===== 必殺技級テーマ演出 ===== */
.theme-special-fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.fx-warning-line,
.fx-smoke,
.fx-burst {
    position: absolute;
    opacity: 0;
}

.duel-cinematic.type-revolution .duel-vignette {
    background:
        radial-gradient(circle at center, rgba(255,50,50,.20) 0%, rgba(80,0,0,.55) 42%, rgba(0,0,0,.97) 100%),
        linear-gradient(135deg, rgba(55,0,0,.96), rgba(0,0,0,.98));
    animation: revolutionBackdrop 2.35s ease both;
}

.duel-cinematic.type-revolution .duel-panel {
    border-top: 2px solid #ff3b3b !important;
    border-bottom: 2px solid #ff3b3b !important;
    box-shadow: 0 0 34px rgba(255,0,0,.75), inset 0 0 22px rgba(255,0,0,.18) !important;
    animation: revolutionPanel 2.35s cubic-bezier(.15,.85,.2,1) both;
}

.duel-cinematic.type-revolution .duel-main {
    color: #ff4c4c !important;
    text-shadow: 0 0 16px #ff0000, 0 0 38px rgba(255,0,0,.85), 0 3px 0 #000 !important;
    animation: revolutionTitle 2.35s cubic-bezier(.17,.84,.2,1) both;
}

.duel-cinematic.type-revolution .fx-warning-line {
    left: -15%;
    width: 130%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ff2424, transparent);
    box-shadow: 0 0 14px #ff0000;
}

.duel-cinematic.type-revolution .fx-warning-line-a {
    top: 27%;
    animation: warningSweepA 2.2s ease both;
}

.duel-cinematic.type-revolution .fx-warning-line-b {
    bottom: 26%;
    animation: warningSweepB 2.2s .08s ease both;
}

.duel-cinematic.type-bomb .duel-vignette {
    background:
        radial-gradient(circle at center, rgba(194,80,255,.28) 0%, rgba(70,0,95,.58) 42%, rgba(0,0,0,.97) 100%),
        linear-gradient(135deg, rgba(35,0,50,.96), rgba(0,0,0,.99));
    animation: bombBackdrop 2.35s ease both;
}

.duel-cinematic.type-bomb .duel-panel {
    border-top: 2px solid #c267ff !important;
    border-bottom: 2px solid #c267ff !important;
    box-shadow: 0 0 38px rgba(171,65,255,.82), inset 0 0 26px rgba(160,45,255,.22) !important;
    animation: bombPanel 2.35s cubic-bezier(.16,.82,.2,1) both;
}

.duel-cinematic.type-bomb .duel-main {
    color: #d394ff !important;
    text-shadow: 0 0 18px #9a2cff, 0 0 44px rgba(185,82,255,.9), 0 3px 0 #000 !important;
    animation: bombTitle 2.35s cubic-bezier(.17,.84,.2,1) both;
}

.duel-cinematic.type-bomb .fx-burst {
    left: 50%;
    top: 50%;
    width: 26vmin;
    height: 26vmin;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(220,130,255,.8) 12%, rgba(150,30,255,.42) 35%, transparent 68%);
    filter: blur(1px);
    animation: bombBurst 2.2s ease-out both;
}

.duel-cinematic.type-joker .duel-vignette {
    background:
        radial-gradient(circle at center, rgba(255,255,255,.035) 0%, rgba(8,8,8,.72) 40%, rgba(0,0,0,.99) 100%),
        linear-gradient(135deg, #050505, #000);
    animation: jokerBackdrop 2.55s ease both;
}

.duel-cinematic.type-joker .duel-panel {
    border-top: 2px solid #222 !important;
    border-bottom: 2px solid #666 !important;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.94) 12%, rgba(15,15,15,.98) 50%, rgba(0,0,0,.94) 88%, transparent) !important;
    box-shadow: 0 0 45px #000, 0 0 22px rgba(120,120,120,.35) !important;
    animation: jokerPanel 2.55s cubic-bezier(.15,.85,.2,1) both;
}

.duel-cinematic.type-joker .duel-main {
    color: #d0d0d0 !important;
    text-shadow: 0 0 10px #fff, 0 0 28px rgba(255,255,255,.28), 0 3px 0 #000 !important;
    animation: jokerTitle 2.55s cubic-bezier(.17,.84,.2,1) both;
}

.duel-cinematic.type-joker .fx-smoke {
    inset: -20%;
    background:
        radial-gradient(circle at 20% 40%, rgba(90,90,90,.18), transparent 34%),
        radial-gradient(circle at 75% 65%, rgba(120,120,120,.14), transparent 32%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.05), transparent 40%);
    filter: blur(24px);
    animation: jokerSmoke 2.5s ease both;
}

.duel-cinematic.type-joker .fx-warning-line {
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg, #111 0 14px, #6d0000 14px 28px);
    box-shadow: 0 0 10px rgba(180,0,0,.7);
}

.duel-cinematic.type-joker .fx-warning-line-a {
    top: 18%;
    animation: jokerLine 2.45s ease both;
}

.duel-cinematic.type-joker .fx-warning-line-b {
    bottom: 18%;
    animation: jokerLine 2.45s .12s ease both reverse;
}

body.fx-revolution-shake .card {
    animation: cardRevolutionShake .55s linear 3;
}

body.fx-bomb-freeze .field-area {
    filter: saturate(.7) brightness(.8);
}

body.fx-joker-dark .field-area,
body.fx-joker-dark #phase-bar,
body.fx-joker-dark #turn-info {
    filter: brightness(.35) contrast(1.15);
}

@keyframes revolutionBackdrop {
    0% { opacity:0; filter:brightness(2); }
    12% { opacity:1; filter:brightness(1.45); }
    65% { opacity:1; filter:brightness(1); }
    100% { opacity:0; filter:brightness(.7); }
}

@keyframes revolutionPanel {
    0% { opacity:0; transform:translateX(-18%) skewX(-8deg) scale(.92); filter:blur(14px); }
    18% { opacity:1; transform:translateX(0) skewX(-8deg) scale(1.06); filter:blur(0); }
    38% { transform:skewX(-8deg) scale(.98); }
    78% { opacity:1; }
    100% { opacity:0; transform:translateX(10%) skewX(-8deg) scale(1.03); filter:blur(5px); }
}

@keyframes revolutionTitle {
    0% { opacity:0; transform:scale(.5) rotate(-2deg); letter-spacing:.34em; filter:blur(18px); }
    18% { opacity:1; transform:scale(1.16) rotate(0); letter-spacing:.08em; filter:blur(0); }
    36% { transform:scale(.96); }
    100% { opacity:0; transform:scale(1.08); filter:blur(5px); }
}

@keyframes warningSweepA {
    0% { opacity:0; transform:translateX(-80%); }
    18% { opacity:1; }
    100% { opacity:0; transform:translateX(80%); }
}

@keyframes warningSweepB {
    0% { opacity:0; transform:translateX(80%); }
    18% { opacity:1; }
    100% { opacity:0; transform:translateX(-80%); }
}

@keyframes bombBackdrop {
    0% { opacity:0; filter:brightness(.4); }
    20% { opacity:1; filter:brightness(.75); }
    27% { filter:brightness(2.4); }
    34% { filter:brightness(.9); }
    100% { opacity:0; filter:brightness(.6); }
}

@keyframes bombPanel {
    0% { opacity:0; transform:scale(.82); filter:blur(16px); }
    18% { opacity:1; transform:scale(1.02); filter:blur(0); }
    26% { transform:scale(1.12); }
    34% { transform:scale(.96); }
    100% { opacity:0; transform:scale(1.04); filter:blur(5px); }
}

@keyframes bombTitle {
    0% { opacity:0; transform:scale(.45); filter:blur(16px); }
    20% { opacity:1; transform:scale(1.08); filter:blur(0); }
    28% { transform:scale(1.28); }
    36% { transform:scale(.94); }
    100% { opacity:0; transform:scale(1.06); filter:blur(5px); }
}

@keyframes bombBurst {
    0% { opacity:0; transform:translate(-50%,-50%) scale(.1); }
    22% { opacity:.18; }
    28% { opacity:1; transform:translate(-50%,-50%) scale(1.8); }
    38% { opacity:.35; transform:translate(-50%,-50%) scale(3.2); }
    100% { opacity:0; transform:translate(-50%,-50%) scale(5.5); }
}

@keyframes jokerBackdrop {
    0% { opacity:0; filter:brightness(.2); }
    18% { opacity:1; filter:brightness(.5); }
    72% { opacity:1; filter:brightness(.42); }
    100% { opacity:0; filter:brightness(.2); }
}

@keyframes jokerPanel {
    0% { opacity:0; transform:scaleY(.25) scaleX(.9); filter:blur(16px); }
    20% { opacity:1; transform:scaleY(1.04) scaleX(1); filter:blur(0); }
    34% { transform:scaleY(.96); }
    78% { opacity:1; }
    100% { opacity:0; transform:scaleY(.82) scaleX(1.03); filter:blur(6px); }
}

@keyframes jokerTitle {
    0% { opacity:0; transform:translateY(18px) scale(.72); letter-spacing:.3em; filter:blur(14px); }
    22% { opacity:1; transform:translateY(0) scale(1.06); letter-spacing:.12em; filter:blur(0); }
    40% { transform:scale(.98); }
    100% { opacity:0; transform:translateY(-10px) scale(1.03); filter:blur(5px); }
}

@keyframes jokerSmoke {
    0% { opacity:0; transform:scale(.8) rotate(0deg); }
    20% { opacity:.9; }
    100% { opacity:0; transform:scale(1.4) rotate(8deg); }
}

@keyframes jokerLine {
    0% { opacity:0; transform:translateX(-100%); }
    20% { opacity:.8; }
    100% { opacity:0; transform:translateX(100%); }
}

@keyframes cardRevolutionShake {
    0%,100% { transform:translate(0,0) rotate(0); }
    20% { transform:translate(-1px,1px) rotate(-.4deg); }
    40% { transform:translate(1px,-1px) rotate(.4deg); }
    60% { transform:translate(-1px,0) rotate(-.3deg); }
    80% { transform:translate(1px,1px) rotate(.3deg); }
}


/* ===== 演出表示保証 ===== */
#duel-cinematic.duel-cinematic.show {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
}

#duel-cinematic .theme-special-fx,
#duel-cinematic .duel-panel,
#duel-cinematic .duel-symbol,
#duel-cinematic .duel-vignette,
#duel-cinematic .duel-flash {
    pointer-events: none !important;
}

#duel-cinematic.type-revolution,
#duel-cinematic.type-bomb,
#duel-cinematic.type-joker {
    background: rgba(0,0,0,.15);
}


        /* ===== 相手手札の常時表示 ===== */
        .opponent-hand-display {
            position: absolute;
            left: 8px;
            top: 8px;
            z-index: 25;
            width: 118px;
            min-height: 54px;
            padding: 4px 5px 5px;
            border: 1px solid rgba(255,110,110,.45);
            border-radius: 8px;
            background: rgba(15,0,0,.72);
            box-shadow: 0 3px 10px rgba(0,0,0,.55);
            backdrop-filter: blur(5px);
            pointer-events: none;
        }

        .opponent-hand-label {
            color: #ffb1b1;
            font-size: 9px;
            line-height: 1;
            text-align: left;
            margin-bottom: 4px;
            letter-spacing: .04em;
            white-space: nowrap;
        }

        .opponent-hand-cards {
            position: relative;
            width: 100%;
            height: 34px;
            overflow: visible;
        }

        .opponent-mini-card {
            position: absolute;
            top: 0;
            width: 24px;
            height: 34px;
            border-radius: 4px;
            border: 1px solid #d4af37;
            background:
                repeating-linear-gradient(
                    45deg,
                    transparent,
                    transparent 3px,
                    rgba(255,215,0,.12) 3px,
                    rgba(255,215,0,.12) 6px
                ),
                radial-gradient(circle, #8b0000, #3b0000);
            box-shadow: 1px 2px 4px rgba(0,0,0,.65);
            transform-origin: bottom center;
        }

        .opponent-mini-empty {
            color: #a87979;
            font-size: 9px;
            line-height: 30px;
            text-align: left;
        }

        @media (max-width: 390px) {
            .opponent-hand-display {
                left: 5px;
                top: 5px;
                width: 104px;
                min-height: 48px;
                padding: 3px 4px 4px;
            }

            .opponent-hand-label {
                font-size: 8px;
                margin-bottom: 3px;
            }

            .opponent-hand-cards {
                height: 30px;
            }

            .opponent-mini-card {
                width: 21px;
                height: 30px;
            }
        }


.opponent-hand-display{min-height:88px!important;}
.opponent-chain-log-title{margin-top:4px;padding-top:4px;border-top:1px solid rgba(255,130,130,.24);color:#d88f8f;font-family:"Courier New",monospace;font-size:8px;line-height:1;letter-spacing:.12em;text-align:left;}
.opponent-chain-log{
    margin-top:3px;
    max-height:42px;
    overflow-y:auto;
    text-align:left;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,130,130,.62) rgba(35,0,0,.3);
    -webkit-overflow-scrolling:touch;
    padding-right:2px;
}
.opponent-chain-log::-webkit-scrollbar{width:4px;}
.opponent-chain-log::-webkit-scrollbar-track{background:rgba(35,0,0,.3);border-radius:4px;}
.opponent-chain-log::-webkit-scrollbar-thumb{background:rgba(255,130,130,.62);border-radius:4px;}
.opponent-chain-log-entry{display:grid;gap:1px;padding:2px 3px;margin-bottom:2px;border-left:2px solid rgba(255,100,100,.55);border-radius:3px;background:rgba(70,0,0,.28);font-size:8px;line-height:1.2;}
.opponent-chain-log-cards{color:#ffd3a8;font-weight:700;word-break:break-all;}
.opponent-chain-log-action{color:#ff9f9f;}
.opponent-chain-log-empty{color:#8f6d6d;font-size:8px;line-height:1.2;padding:2px 1px;}
.opponent-chain-log-entry.surrender{border-left-color:#777;background:rgba(30,30,30,.35);}
@media(max-width:390px){.opponent-hand-display{min-height:82px!important}.opponent-chain-log{max-height:36px}.opponent-chain-log-title,.opponent-chain-log-entry,.opponent-chain-log-empty{font-size:7px}}


        .duel-cinematic.type-pair { color: #ff9d2e !important; }
        .duel-cinematic.type-pair .duel-panel {
            border-top: 2px solid #ff9d2e !important;
            border-bottom: 2px solid #ff9d2e !important;
            box-shadow: 0 0 32px rgba(255,126,0,.72), inset 0 0 20px rgba(255,126,0,.16) !important;
        }
        .duel-cinematic.type-pair .duel-main {
            color: #ffad42 !important;
            text-shadow: 0 3px 0 #000, 0 0 16px rgba(255,126,0,.9), 0 0 38px rgba(255,126,0,.6) !important;
        }

        .duel-cinematic.type-allslash { color: #5dff8b; }
        .duel-cinematic.type-allslash .duel-vignette {
            background:
                radial-gradient(circle at center, rgba(70,255,130,.18) 0%, rgba(0,75,30,.54) 42%, rgba(0,0,0,.97) 100%),
                linear-gradient(135deg, rgba(0,45,18,.96), rgba(0,0,0,.99));
        }
        .duel-cinematic.type-allslash .duel-panel {
            border-top: 2px solid #4cff7d !important;
            border-bottom: 2px solid #4cff7d !important;
            box-shadow: 0 0 38px rgba(25,255,105,.72), inset 0 0 24px rgba(25,255,105,.16) !important;
            animation: allSlashPanel 2.1s cubic-bezier(.15,.85,.2,1) both;
        }
        .duel-cinematic.type-allslash .duel-main {
            color: #62ff90 !important;
            text-shadow: 0 3px 0 #000, 0 0 18px rgba(40,255,110,.95), 0 0 44px rgba(40,255,110,.62) !important;
            animation: allSlashTitle 2.1s cubic-bezier(.17,.84,.2,1) both;
        }
        @keyframes allSlashPanel {
            0% { opacity:0; transform:skewX(-8deg) translateX(-22%) scale(.9); filter:blur(14px); }
            18% { opacity:1; transform:skewX(-8deg) translateX(0) scale(1.07); filter:blur(0); }
            38% { transform:skewX(-8deg) scale(.98); }
            78% { opacity:1; }
            100% { opacity:0; transform:skewX(-8deg) translateX(16%) scale(1.04); filter:blur(6px); }
        }
        @keyframes allSlashTitle {
            0% { opacity:0; transform:translateX(-40px) scale(.62); letter-spacing:.35em; filter:blur(16px); }
            20% { opacity:1; transform:translateX(0) scale(1.14); letter-spacing:.1em; filter:blur(0); }
            38% { transform:scale(.96); }
            100% { opacity:0; transform:translateX(28px) scale(1.06); filter:blur(5px); }
        }


        /* ===== 表向きジョーカー常駐中：黒いレトロノイズ ===== */
        .persistent-joker-noise {
            position: fixed;
            inset: 0;
            z-index: 110;
            display: none;
            pointer-events: none;
            overflow: hidden;
            isolation: isolate;
        }

        .persistent-joker-noise.active {
            display: block;
        }

        .persistent-joker-grain,
        .persistent-joker-scratches,
        .persistent-joker-vignette,
        .persistent-joker-flicker {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .persistent-joker-grain {
            opacity: .24;
            background-image:
                url('data:image/svg+xml;utf8,<svg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.92" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.55"/></svg>');
            mix-blend-mode: screen;
            filter: grayscale(1) contrast(1.5);
            animation: persistentJokerGrain .16s steps(2) infinite;
        }

        .persistent-joker-scratches {
            opacity: .42;
            background:
                repeating-linear-gradient(
                    90deg,
                    transparent 0,
                    transparent 11%,
                    rgba(255,255,255,.08) 11.1%,
                    transparent 11.35%,
                    transparent 27%,
                    rgba(255,255,255,.04) 27.1%,
                    transparent 27.25%
                ),
                repeating-linear-gradient(
                    0deg,
                    transparent 0,
                    transparent 7px,
                    rgba(0,0,0,.28) 8px,
                    transparent 10px
                );
            animation: persistentJokerScratches .42s steps(2) infinite;
        }

        .persistent-joker-vignette {
            background:
                radial-gradient(circle at center,
                    rgba(0,0,0,.02) 0%,
                    rgba(0,0,0,.18) 48%,
                    rgba(0,0,0,.62) 100%),
                linear-gradient(180deg,
                    rgba(0,0,0,.18),
                    rgba(0,0,0,.03) 35%,
                    rgba(0,0,0,.12) 70%,
                    rgba(0,0,0,.3));
            box-shadow:
                inset 0 0 90px rgba(0,0,0,.95),
                inset 0 0 180px rgba(0,0,0,.65);
        }

        .persistent-joker-flicker {
            background: rgba(0,0,0,.16);
            animation: persistentJokerFlicker .18s infinite;
            mix-blend-mode: multiply;
        }

        body.joker-aura-active::after {
            content: "";
            position: fixed;
            inset: 0;
            z-index: 109;
            pointer-events: none;
            background:
                radial-gradient(circle at center,
                    transparent 0%,
                    rgba(0,0,0,.08) 45%,
                    rgba(0,0,0,.32) 100%);
        }

        @keyframes persistentJokerGrain {
            0%   { transform: translate(0,0) scale(1.04); }
            25%  { transform: translate(-2%,1%) scale(1.05); }
            50%  { transform: translate(1%,-2%) scale(1.03); }
            75%  { transform: translate(2%,2%) scale(1.06); }
            100% { transform: translate(-1%,-1%) scale(1.04); }
        }

        @keyframes persistentJokerScratches {
            0%   { transform: translateX(0); opacity:.34; }
            35%  { transform: translateX(-1.5%); opacity:.48; }
            70%  { transform: translateX(1%); opacity:.26; }
            100% { transform: translateX(0); opacity:.4; }
        }

        @keyframes persistentJokerFlicker {
            0%   { opacity:.18; }
            20%  { opacity:.05; }
            35%  { opacity:.24; }
            55%  { opacity:.1; }
            75%  { opacity:.28; }
            100% { opacity:.14; }
        }

        /* 操作UIと必殺技演出はノイズより前面に保つ */
        #duel-cinematic {
            z-index: 9999 !important;
        }

        #player-chain-menu,
        #counter-menu,
        #chain-hand-controls {
            z-index: 150 !important;
        }


        /* ===== 先攻後攻ドロー：回転リビール演出 ===== */
        #startup-overlay {
            background:
                radial-gradient(circle at center, rgba(65,45,10,.16), rgba(0,0,0,.96) 62%),
                rgba(0,0,0,.97) !important;
            overflow: hidden;
        }

        #startup-overlay::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: .22;
            background:
                repeating-linear-gradient(
                    to bottom,
                    rgba(255,255,255,.05) 0,
                    rgba(255,255,255,.05) 1px,
                    transparent 1px,
                    transparent 5px
                );
            animation: tossScan 6s linear infinite;
        }

        .toss-cards {
            perspective: 1100px;
            gap: clamp(28px, 10vw, 90px) !important;
            position: relative;
            z-index: 2;
        }

        .toss-player-box {
            position: relative;
        }

        .toss-card-visual {
            position: relative;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            will-change: transform, filter, opacity;
            box-shadow:
                0 10px 24px rgba(0,0,0,.62),
                0 0 0 rgba(212,175,55,0);
        }

        .toss-card-visual.card-back {
            color: transparent !important;
        }

        .toss-card-visual.card-back::after {
            content: "✦";
            position: absolute;
            inset: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #d4af37;
            font-size: 32px;
            border: 1px solid rgba(212,175,55,.65);
            border-radius: 7px;
            background:
                repeating-linear-gradient(
                    45deg,
                    transparent 0 5px,
                    rgba(212,175,55,.09) 5px 10px
                );
            text-shadow: 0 0 12px rgba(212,175,55,.7);
        }

        .toss-card-visual.toss-waiting {
            animation: tossHover 1.25s ease-in-out infinite;
        }

        .toss-card-visual.toss-reveal-left {
            animation: tossRevealLeft 1.45s cubic-bezier(.16,.8,.2,1) forwards;
        }

        .toss-card-visual.toss-reveal-right {
            animation: tossRevealRight 1.45s cubic-bezier(.16,.8,.2,1) forwards;
        }

        .toss-card-visual.toss-winner {
            animation: tossWinnerPulse 1.15s ease-in-out 2;
            border-color: #ffe27a !important;
            box-shadow:
                0 12px 28px rgba(0,0,0,.7),
                0 0 20px rgba(255,226,122,.9),
                0 0 46px rgba(255,190,30,.5);
        }

        .toss-card-visual.toss-loser {
            filter: grayscale(.7) brightness(.62);
            transform: scale(.94);
        }

        .toss-card-visual.toss-draw {
            animation: tossDrawShake .45s linear 2;
        }

        #toss-result-text {
            position: relative;
            z-index: 3;
            transition: color .3s ease, text-shadow .3s ease;
        }

        #toss-result-text.toss-result-ready {
            animation: tossResultEnter .7s cubic-bezier(.2,.8,.2,1) both;
        }

        .toss-impact-flash {
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0;
            z-index: 1;
            background: white;
        }

        .toss-impact-flash.active {
            animation: tossImpactFlash .6s ease-out both;
        }

        @keyframes tossHover {
            0%,100% { transform: translateY(0) rotateY(0deg); box-shadow: 0 10px 24px rgba(0,0,0,.62); }
            50% { transform: translateY(-8px) rotateY(4deg); box-shadow: 0 16px 34px rgba(0,0,0,.72); }
        }

        @keyframes tossRevealLeft {
            0% { transform: translateX(-16px) rotateY(0deg) rotateZ(-3deg) scale(.92); filter: brightness(.45) blur(1px); }
            38% { transform: translateX(0) rotateY(540deg) rotateZ(2deg) scale(1.12); filter: brightness(1.8) blur(0); }
            72% { transform: rotateY(720deg) rotateZ(-1deg) scale(.98); filter: brightness(1.08); }
            100% { transform: rotateY(720deg) rotateZ(0) scale(1); filter: brightness(1); }
        }

        @keyframes tossRevealRight {
            0% { transform: translateX(16px) rotateY(0deg) rotateZ(3deg) scale(.92); filter: brightness(.45) blur(1px); }
            38% { transform: translateX(0) rotateY(-540deg) rotateZ(-2deg) scale(1.12); filter: brightness(1.8) blur(0); }
            72% { transform: rotateY(-720deg) rotateZ(1deg) scale(.98); filter: brightness(1.08); }
            100% { transform: rotateY(-720deg) rotateZ(0) scale(1); filter: brightness(1); }
        }

        @keyframes tossWinnerPulse {
            0%,100% { transform: scale(1); }
            50% { transform: scale(1.1) translateY(-4px); }
        }

        @keyframes tossDrawShake {
            0%,100% { transform: translateX(0); }
            20% { transform: translateX(-5px) rotate(-1deg); }
            40% { transform: translateX(5px) rotate(1deg); }
            60% { transform: translateX(-3px); }
            80% { transform: translateX(3px); }
        }

        @keyframes tossResultEnter {
            0% { opacity:0; transform:translateY(18px) scale(.9); filter:blur(8px); }
            100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
        }

        @keyframes tossImpactFlash {
            0% { opacity:.9; }
            18% { opacity:0; }
            36% { opacity:.16; }
            100% { opacity:0; }
        }

        @keyframes tossScan {
            from { transform: translateY(0); }
            to { transform: translateY(20px); }
        }

        @media (max-width: 700px) {
            .toss-card-visual {
                width: 76px !important;
                height: 114px !important;
                font-size: 26px !important;
            }

            .toss-card-visual.card-back::after {
                font-size: 24px;
            }
        }


        /* ===== 革命状態中：場と手札の持続震動 ===== */
        body.revolution-active #player-field .card,
        body.revolution-active #opponent-field .card,
        body.revolution-active #hand-zone .card,
        body.revolution-active #opponent-hand-display .opponent-mini-card {
            animation: revolutionPersistentShake .34s steps(2, end) infinite !important;
            transform-origin: center center;
            will-change: transform;
        }

        body.revolution-active #player-field,
        body.revolution-active #opponent-field,
        body.revolution-active #hand-zone,
        body.revolution-active #opponent-hand-display {
            filter: saturate(1.08) contrast(1.03);
        }

        @keyframes revolutionPersistentShake {
            0%   { transform: translate(0, 0) rotate(0deg); }
            20%  { transform: translate(-0.8px, 0.5px) rotate(-0.25deg); }
            40%  { transform: translate(0.7px, -0.6px) rotate(0.22deg); }
            60%  { transform: translate(-0.5px, -0.3px) rotate(-0.18deg); }
            80%  { transform: translate(0.6px, 0.7px) rotate(0.2deg); }
            100% { transform: translate(0, 0) rotate(0deg); }
        }

        body.revolution-active #player-field .selected-card,
        body.revolution-active #hand-zone .selected-card,
        body.revolution-active #opponent-field .selected-card {
            animation: revolutionSelectedShake .34s steps(2, end) infinite !important;
        }

        @keyframes revolutionSelectedShake {
            0%   { transform: translateY(-5px) scale(1.03) rotate(0deg); }
            25%  { transform: translate(-0.8px, -4.5px) scale(1.03) rotate(-0.25deg); }
            50%  { transform: translate(0.7px, -5.6px) scale(1.03) rotate(0.22deg); }
            75%  { transform: translate(-0.4px, -4.8px) scale(1.03) rotate(-0.18deg); }
            100% { transform: translateY(-5px) scale(1.03) rotate(0deg); }
        }


        /* ===== 手札リフレッシュ：選択順表示 ===== */
        #hand-zone .card[data-refresh-order] {
            position: relative;
            overflow: visible !important;
        }

        #hand-zone .card[data-refresh-order]::after {
            content: attr(data-refresh-order);
            position: absolute;
            left: -6px;
            top: -8px;
            z-index: 40;
            min-width: 22px;
            height: 22px;
            padding: 0 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            border-radius: 50%;
            border: 2px solid #fff4b0;
            background:
                radial-gradient(circle at 35% 30%, #ffe994, #c58513 72%);
            color: #241300;
            font-family: sans-serif;
            font-size: 12px;
            font-weight: 900;
            line-height: 1;
            box-shadow:
                0 2px 7px rgba(0,0,0,.75),
                0 0 11px rgba(255,196,53,.65);
            pointer-events: none;
        }

        @media (max-width: 390px) {
            #hand-zone .card[data-refresh-order]::after {
                left: -5px;
                top: -7px;
                min-width: 20px;
                height: 20px;
                font-size: 11px;
            }
        }


        /* ===== 攻撃カード突進・斬撃演出（判定分離版） ===== */
        #attack-arrow {
            display: none !important;
        }

        .attack-motion-layer {
            position: fixed;
            inset: 0;
            z-index: 900;
            pointer-events: none;
            overflow: hidden;
        }

        .attack-card-clone,
        .attack-afterimage {
            position: fixed;
            margin: 0 !important;
            pointer-events: none;
            transform-origin: center;
            will-change: transform, opacity, filter;
        }

        .attack-card-clone {
            z-index: 904;
            filter:
                drop-shadow(0 0 8px rgba(255,230,150,.95))
                drop-shadow(0 0 20px rgba(255,65,15,.7));
        }

        .attack-afterimage {
            z-index: 902;
            opacity: .22;
            filter:
                saturate(1.4)
                brightness(1.25)
                drop-shadow(0 0 8px rgba(255,65,15,.55));
        }

        .attack-slash-mark {
            position: fixed;
            z-index: 908;
            width: 8px;
            height: 170px;
            opacity: 0;
            border-radius: 50%;
            transform:
                translate(-50%, -50%)
                rotate(42deg)
                scaleY(.15);
            background:
                linear-gradient(
                    to bottom,
                    transparent,
                    rgba(255,245,205,.98) 24%,
                    #ff3218 50%,
                    rgba(255,205,95,.94) 76%,
                    transparent
                );
            box-shadow:
                0 0 8px #fff,
                0 0 18px #ff3b00,
                0 0 38px rgba(255,35,0,.78);
        }

        .attack-impact-ring {
            position: fixed;
            z-index: 906;
            width: 28px;
            height: 28px;
            opacity: 0;
            border: 3px solid rgba(255,220,130,.96);
            border-radius: 50%;
            transform:
                translate(-50%, -50%)
                scale(.2);
            box-shadow:
                0 0 12px #ff4a00,
                inset 0 0 8px #fff;
        }

        .attack-motion-layer.impact .attack-slash-mark {
            animation:
                slashStrike .44s
                cubic-bezier(.2,.8,.2,1)
                both;
        }

        .attack-motion-layer.impact .attack-impact-ring {
            animation:
                slashRing .52s
                ease-out both;
        }

        body.attack-hit-shake {
            animation:
                attackHitShake .3s
                linear both;
        }

        @keyframes slashStrike {
            0% {
                opacity: 0;
                transform:
                    translate(-50%, -50%)
                    rotate(42deg)
                    scaleY(.15);
            }
            24% {
                opacity: 1;
                transform:
                    translate(-50%, -50%)
                    rotate(42deg)
                    scaleY(1.15);
            }
            100% {
                opacity: 0;
                transform:
                    translate(-50%, -50%)
                    rotate(42deg)
                    scaleY(1.6);
            }
        }

        @keyframes slashRing {
            0% {
                opacity: .95;
                transform:
                    translate(-50%, -50%)
                    scale(.2);
            }
            100% {
                opacity: 0;
                transform:
                    translate(-50%, -50%)
                    scale(5);
            }
        }

        @keyframes attackHitShake {
            0%,100% { transform: translate(0,0); }
            18% { transform: translate(-3px,2px); }
            36% { transform: translate(3px,-2px); }
            54% { transform: translate(-2px,-1px); }
            72% { transform: translate(2px,2px); }
            90% { transform: translate(-1px,1px); }
        }


        /* ===== Ver2：先攻後攻・高級カード演出 ===== */
        #startup-overlay{
            background:
              radial-gradient(ellipse at 50% 58%, rgba(104,72,22,.22), transparent 34%),
              radial-gradient(circle at center, #17130e 0%, #070706 58%, #000 100%) !important;
        }
        #startup-overlay::after{
            content:""; position:absolute; inset:-12%; pointer-events:none; opacity:.32;
            background:
              linear-gradient(112deg, transparent 32%, rgba(255,231,174,.10) 45%, transparent 56%),
              repeating-radial-gradient(circle at center, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
            animation:tossLightSweep 5s ease-in-out infinite alternate;
        }
        #startup-overlay h1{
            position:relative; z-index:4; font-family:Georgia,serif; font-weight:400 !important;
            letter-spacing:.22em; color:#e3cf9a !important; text-shadow:0 2px 0 #000,0 0 22px rgba(212,175,55,.38) !important;
        }
        .toss-cards::before{
            content:""; position:absolute; left:50%; top:54%; width:min(82vw,620px); height:44%;
            transform:translate(-50%,-50%); border-radius:50%;
            background:radial-gradient(ellipse,rgba(128,80,20,.22),rgba(0,0,0,0) 68%);
            filter:blur(10px); pointer-events:none;
        }
        .toss-player-box{ color:#cdbb91; letter-spacing:.14em; text-shadow:0 2px 5px #000; }
        .toss-card-visual{
            width:108px !important; height:164px !important; border-radius:11px !important;
            border:1px solid #9b7d38 !important; overflow:hidden;
            background:
              linear-gradient(145deg,rgba(255,255,255,.72),transparent 22%),
              repeating-linear-gradient(0deg,rgba(90,65,24,.025) 0 1px,transparent 1px 3px),
              linear-gradient(135deg,#f2ead7,#d9c9a6) !important;
            color:#21190f !important; font-family:Georgia,serif !important; font-size:30px !important;
            text-shadow:0 1px 0 rgba(255,255,255,.6);
            box-shadow:0 18px 40px rgba(0,0,0,.75), inset 0 0 0 4px #e8d9b7, inset 0 0 0 5px #9b7d38 !important;
        }
        .toss-card-visual::before{
            content:""; position:absolute; inset:9px; border:1px solid rgba(104,77,28,.65); border-radius:6px;
            box-shadow:inset 0 0 14px rgba(91,58,13,.12); pointer-events:none;
        }
        .toss-card-visual.card-back{
            background:
              radial-gradient(circle at center,#171516 0 15%,transparent 16%),
              repeating-conic-gradient(from 45deg,#171516 0 10deg,#4a151c 10deg 20deg),
              linear-gradient(135deg,#48131b,#18080b) !important;
            border-color:#b89443 !important;
            box-shadow:0 18px 40px rgba(0,0,0,.82), inset 0 0 0 5px #1a0b0d, inset 0 0 0 7px #b89443 !important;
        }
        .toss-card-visual.card-back::after{
            content:"♠" !important; inset:14px !important; color:#d4b866 !important; font-size:38px !important;
            border:1px solid rgba(212,184,102,.7) !important; border-radius:5px !important;
            background:radial-gradient(circle,rgba(212,184,102,.12),transparent 58%) !important;
            text-shadow:0 0 15px rgba(212,184,102,.55) !important;
        }
        .toss-card-visual.toss-waiting{ animation:tossArrival 1.7s cubic-bezier(.16,.8,.2,1) both,tossFloat 2.4s 1.7s ease-in-out infinite !important; }
        .toss-card-visual.toss-reveal-left{ animation:tossLuxuryRevealLeft 1.55s cubic-bezier(.16,.85,.18,1) forwards !important; }
        .toss-card-visual.toss-reveal-right{ animation:tossLuxuryRevealRight 1.55s cubic-bezier(.16,.85,.18,1) forwards !important; }
        #toss-result-text{ font-family:Georgia,serif; font-weight:400; letter-spacing:.20em !important; color:#d7c08a; }
        #toss-result-text.toss-result-ready{ animation:tossResultLuxury .9s cubic-bezier(.16,.8,.2,1) both !important; }
        @keyframes tossArrival{0%{opacity:0;transform:translateY(90px) scale(.76) rotateX(62deg);filter:blur(10px)}70%{opacity:1;transform:translateY(-7px) scale(1.04) rotateX(0);filter:blur(0)}100%{transform:translateY(0) scale(1)}}
        @keyframes tossFloat{0%,100%{transform:translateY(0) rotateZ(-.4deg)}50%{transform:translateY(-7px) rotateZ(.4deg)}}
        @keyframes tossLuxuryRevealLeft{0%{transform:translateX(-18px) rotateY(0) scale(.96)}45%{transform:translateX(0) rotateY(90deg) scale(1.08);filter:brightness(1.65)}55%{transform:rotateY(270deg) scale(1.08)}100%{transform:rotateY(360deg) scale(1);filter:brightness(1)}}
        @keyframes tossLuxuryRevealRight{0%{transform:translateX(18px) rotateY(0) scale(.96)}45%{transform:translateX(0) rotateY(-90deg) scale(1.08);filter:brightness(1.65)}55%{transform:rotateY(-270deg) scale(1.08)}100%{transform:rotateY(-360deg) scale(1);filter:brightness(1)}}
        @keyframes tossResultLuxury{0%{opacity:0;transform:scale(.86);filter:blur(12px);letter-spacing:.42em}100%{opacity:1;transform:scale(1);filter:blur(0);letter-spacing:.20em}}
        @keyframes tossLightSweep{from{transform:translateX(-5%) rotate(-2deg)}to{transform:translateX(5%) rotate(2deg)}}

        /* 調整フェイズ：一回目で選択、同じカードの二回目で確定 */
        #hand-zone .adjust-tap-selected{
            border:3px solid #e7c96e !important;
            transform:translateY(-7px) scale(1.035) !important;
            box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 18px rgba(231,201,110,.8),0 8px 15px rgba(0,0,0,.7) !important;
        }
        #hand-zone .adjust-tap-selected::after{
            content:"もう一度タップ"; position:absolute; left:50%; bottom:-17px; transform:translateX(-50%);
            white-space:nowrap; color:#f5dfa0; background:rgba(0,0,0,.88); border:1px solid rgba(231,201,110,.65);
            border-radius:8px; padding:2px 5px; font:700 7px/1.2 sans-serif; z-index:20;
        }
        @media(max-width:700px){.toss-card-visual{width:82px !important;height:124px !important;font-size:25px !important}.toss-card-visual.card-back::after{font-size:28px !important}}


        /* ===== キャラクター選択画面（試作） ===== */
        #character-select-screen {
            position: fixed;
            inset: 0;
            z-index: 360;
            display: none;
            align-items: center;
            justify-content: center;
            padding: max(14px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
            color: #f5ecd7;
            background:
                radial-gradient(circle at 50% 15%, rgba(122,88,31,.20), transparent 34%),
                linear-gradient(135deg, rgba(5,7,10,.98), rgba(18,13,8,.99));
            isolation: isolate;
        }
        #character-select-screen::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .18;
            background:
                repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,.025) 80px),
                repeating-linear-gradient(0deg, transparent 0 79px, rgba(255,255,255,.018) 80px);
        }
        .character-select-shell { width: min(100%, 980px); position: relative; z-index: 1; }
        .character-select-kicker { color:#bda36a; font: 11px/1.2 "Courier New", monospace; letter-spacing:.42em; margin-left:.42em; }
        .character-select-title { margin:7px 0 3px; font:700 clamp(25px,6vw,48px)/1 Georgia,serif; letter-spacing:.13em; color:#ead8aa; text-shadow:0 3px 14px #000,0 0 22px rgba(212,175,55,.25); }
        .character-select-sub { margin:0 0 14px; color:#aaa08d; font-size:12px; letter-spacing:.08em; }
        .character-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
        .character-card { padding:10px; border:1px solid rgba(207,177,111,.28); border-radius:13px;
            background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
            box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 24px rgba(0,0,0,.34); transition:.22s ease; text-align:left;
        }
        .character-card::after { content:""; position:absolute; inset:auto -30% -60% 20%; height:85%; background:radial-gradient(circle,var(--gem-glow),transparent 68%); opacity:.38; pointer-events:none; }
        .character-card:hover { transform:translateY(-4px); border-color:rgba(235,207,144,.7); }
        .character-card.selected { transform:translateY(-5px); border-color:var(--gem); box-shadow:0 0 0 2px rgba(255,255,255,.05),0 0 24px var(--gem-glow),inset 0 1px 0 rgba(255,255,255,.12); }
        .character-portrait { height:128px; border-radius:9px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:9px; position:relative; overflow:hidden; background:radial-gradient(circle at 50% 34%,var(--gem-glow),transparent 35%),linear-gradient(145deg,#191919,#070707); border:1px solid rgba(255,255,255,.08); }
        .character-portrait::before { content:""; width:56px; height:56px; position:absolute; top:22px; border-radius:50%; background:linear-gradient(145deg,#2c2c2c,#0d0d0d); box-shadow:0 46px 0 26px #111,0 0 25px var(--gem-glow); }
        .character-mark { position:relative; z-index:2; margin-bottom:8px; font:700 32px/1 Georgia,serif; color:var(--gem); text-shadow:0 0 14px var(--gem-glow); }
        .character-name { color:#f5ead1; font:700 18px/1.1 Georgia,serif; letter-spacing:.06em; }
        .character-role { color:var(--gem); font-size:10px; letter-spacing:.12em; margin:3px 0 7px; }
        .character-desc { min-height:42px; color:#bdb5a5; font-size:10px; line-height:1.4; }
        .character-skill { margin-top:7px; padding-top:7px; border-top:1px solid rgba(255,255,255,.08); font-size:9px; line-height:1.45; color:#d7cbae; }
        .character-skill b { color:var(--gem); }
        .character-select-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:13px; padding:10px 12px; border-top:1px solid rgba(212,175,55,.24); }
        #character-selection-status { color:#c7b890; font-size:11px; text-align:left; }
        #confirm-character-btn { min-width:150px; min-height:44px; border-radius:10px; border:1px solid #e1c779; background:linear-gradient(#dcc276,#96742f); color:#111; font-weight:800; letter-spacing:.08em; box-shadow:0 5px 14px rgba(0,0,0,.45); opacity:.45; pointer-events:none; }
        #confirm-character-btn.ready { opacity:1; pointer-events:auto; cursor:pointer; }
        #selected-character-badge { display:inline-flex; align-items:center; gap:5px; margin-left:8px; padding:2px 7px; border:1px solid rgba(212,175,55,.42); border-radius:9px; background:rgba(0,0,0,.34); color:#ead8aa; font-size:9px; vertical-align:middle; }
        #selected-character-gem { width:7px; height:7px; border-radius:50%; background:#777; box-shadow:0 0 8px currentColor; }
        @media(max-width:700px){
            #character-select-screen{align-items:flex-start;}
            .character-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
            .character-card{padding:6px;border-radius:10px;}
            .character-portrait{height:92px;margin-bottom:6px;}
            .character-portrait::before{width:42px;height:42px;top:17px;box-shadow:0 35px 0 20px #111,0 0 18px var(--gem-glow);}
            .character-mark{font-size:23px;margin-bottom:5px;}
            .character-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
            .character-role{font-size:8px;margin-bottom:5px;}
            .character-desc{font-size:8px;min-height:44px;}
            .character-skill{font-size:7.5px;}
            .character-select-footer{padding:8px 2px;}
            #confirm-character-btn{min-width:122px;font-size:11px;}
        }


        /* ===== バトル画面キャラクター表示・能力操作 ===== */
        .battle-character {
            --char-gem:#d4af37;
            --char-glow:rgba(212,175,55,.45);
            position:absolute;
            z-index:36;
            width:64px;
            height:92px;
            padding:0;
            border:1px solid var(--char-gem);
            border-radius:10px;
            overflow:hidden;
            cursor:pointer;
            color:#f7edd4;
            background:
                radial-gradient(circle at 50% 25%, var(--char-glow), transparent 38%),
                linear-gradient(155deg,#242424 0%,#090909 65%,#020202 100%);
            box-shadow:0 5px 15px rgba(0,0,0,.7),0 0 13px var(--char-glow),inset 0 1px 0 rgba(255,255,255,.15);
            transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
            -webkit-tap-highlight-color:transparent;
        }
        .battle-character:active { transform:scale(.96); filter:brightness(1.2); }
        .battle-character::before {
            content:""; position:absolute; left:50%; top:14px; width:31px; height:31px;
            transform:translateX(-50%); border-radius:50%;
            background:linear-gradient(145deg,#393939,#111);
            box-shadow:0 28px 0 15px #111,0 0 16px var(--char-glow);
        }
        .battle-character-mark { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-bottom:12px; z-index:2; color:var(--char-gem); font:700 26px/1 Georgia,serif; text-shadow:0 0 10px var(--char-glow); }
        .battle-character-name { position:absolute; left:2px; right:2px; bottom:3px; z-index:3; font:700 7px/1.1 Georgia,serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 3px #000; }
        .battle-character-used::after { content:"発動済"; position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.72); color:#aaa; font-size:9px; letter-spacing:.1em; }
        #player-battle-character { left:7px; top:50%; transform:translateY(calc(-62% - 82px)); }
        #player-battle-character:active { transform:translateY(calc(-62% - 82px)) scale(.96); }
        #opponent-battle-character { right:7px; top:91px; width:54px; height:78px; }
        .player-area #player-field { padding-right:4px !important; }

        #character-ability-overlay {
            position:fixed; inset:0; z-index:620; display:none; align-items:center; justify-content:center;
            padding:14px; background:radial-gradient(circle at center,rgba(30,25,15,.55),rgba(0,0,0,.94));
            backdrop-filter:blur(7px);
        }
        #character-ability-overlay.show { display:flex; }
        .ability-panel {
            --ability-gem:#d4af37; --ability-glow:rgba(212,175,55,.5);
            width:min(92vw,440px); border:1px solid var(--ability-gem); border-radius:14px; padding:17px;
            background:linear-gradient(155deg,rgba(31,28,23,.98),rgba(5,5,5,.99));
            box-shadow:0 0 30px var(--ability-glow),0 18px 55px rgba(0,0,0,.75); color:#eee2c5;
        }
        .ability-panel-head { display:flex; align-items:center; gap:12px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.12); }
        .ability-mini-portrait { width:58px; height:74px; flex:0 0 58px; border:1px solid var(--ability-gem); border-radius:9px; display:flex; align-items:center; justify-content:center; color:var(--ability-gem); font:700 30px/1 Georgia,serif; background:radial-gradient(circle,var(--ability-glow),#090909 62%); }
        #ability-character-name { margin:0; font:700 22px/1.1 Georgia,serif; color:#fff4d8; }
        #ability-character-role { margin-top:4px; color:var(--ability-gem); font-size:10px; letter-spacing:.12em; }
        #ability-stage-title { margin:14px 0 8px; color:var(--ability-gem); font:700 18px/1.2 Georgia,serif; }
        #ability-stage-description { min-height:62px; margin:0 0 14px; padding:12px; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:rgba(255,255,255,.035); color:#cfc5b3; font-size:12px; line-height:1.6; text-align:left; white-space:pre-line; }
        .ability-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
        .ability-buttons.three { grid-template-columns:1fr 1fr 1fr; }
        .ability-btn { min-height:45px; border-radius:10px; border:1px solid rgba(255,255,255,.22); color:#f8edd2; background:linear-gradient(#39342b,#171513); font-weight:800; cursor:pointer; }
        .ability-btn.primary { border-color:var(--ability-gem); background:linear-gradient(var(--ability-gem),#6b5325); color:#090909; }
        .ability-btn[disabled] { opacity:.38; cursor:not-allowed; filter:grayscale(.8); }
        #ability-owner-note { margin:8px 0 0; color:#928a7c; font-size:9px; }
        @media(max-width:390px){
            .battle-character{width:55px;height:80px}.battle-character-mark{font-size:22px}.battle-character-name{font-size:6px}
            #player-battle-character{left:4px}.player-area #player-field{padding-left:52px !important}
            #opponent-battle-character{right:4px;top:82px;width:47px;height:68px}
        }


        /* ===== ベニート・リアナ：軽量画像表示 ===== */
        .character-portrait.has-character-image {
            background-size: cover !important;
            background-position: center 22% !important;
            background-repeat: no-repeat !important;
        }
        .character-portrait.has-character-image::before { display:none !important; }
        .character-portrait.has-character-image .character-mark {
            align-self:flex-end; width:100%; margin:0; padding:20px 5px 6px;
            font-size:15px; color:#fff; text-align:center;
            background:linear-gradient(transparent,rgba(0,0,0,.84));
            text-shadow:0 1px 4px #000;
        }
        .battle-character.has-character-image {
            background-size:cover !important;
            background-position:center 18% !important;
            background-repeat:no-repeat !important;
        }
        .battle-character.has-character-image::before { display:none !important; }
        .battle-character.has-character-image .battle-character-mark { display:none !important; }
        .battle-character.has-character-image .battle-character-name {
            bottom:0; padding:9px 2px 3px; background:linear-gradient(transparent,rgba(0,0,0,.9));
        }
        .ability-mini-portrait.has-character-image {
            background-size:cover !important;
            background-position:center 18% !important;
            background-repeat:no-repeat !important;
            color:transparent !important;
        }


        /* ===== ザラク・マブロイ：軽量画像位置調整 ===== */
        .character-card[data-character-id="zaraku-maburoi"] .character-portrait,
        #player-battle-character[data-character-id="zaraku-maburoi"],
        #opponent-battle-character[data-character-id="zaraku-maburoi"] { background-position:center 18%; }


        /* ===== ミラノ・ミーシャ：軽量画像位置調整 ===== */
        .character-card[data-character-id="mirano-misha"] .character-portrait,
        #player-battle-character[data-character-id="mirano-misha"],
        #opponent-battle-character[data-character-id="mirano-misha"] { background-position:center 18%; }

        /* ===== ノル・レナード：軽量画像位置調整 ===== */
        .character-card[data-character-id="nol-leonard"] .character-portrait {
            background-position:center 22%;
        }

        .character-card[data-character-id="milia"] .character-portrait,
        #player-battle-character[data-character-id="milia"],
        #opponent-battle-character[data-character-id="milia"] { background-position:center 20%; }

        .character-card[data-character-id="ordivo"] .character-portrait,
        #player-battle-character[data-character-id="ordivo"],
        #opponent-battle-character[data-character-id="ordivo"] { background-position:center 18%; }

        .character-card[data-character-id="benito-sarief"] .character-portrait,
        #player-battle-character[data-character-id="benito-sarief"],
        #opponent-battle-character[data-character-id="benito-sarief"] { background-position:center 15%; }

        .character-card[data-character-id="luka"] .character-portrait,
        #player-battle-character[data-character-id="luka"],
        #opponent-battle-character[data-character-id="luka"] { background-position:center 18%; }

        .character-card[data-character-id="sister-lily"] .character-portrait,
        #player-battle-character[data-character-id="sister-lily"],
        #opponent-battle-character[data-character-id="sister-lily"] { background-position:center 18%; }

        .character-card[data-character-id="benito-digna"] .character-portrait,
        #player-battle-character[data-character-id="benito-digna"],
        #opponent-battle-character[data-character-id="benito-digna"] { background-position:center 14%; }

        .character-card[data-character-id="fal-noir"] .character-portrait,
        #player-battle-character[data-character-id="fal-noir"],
        #opponent-battle-character[data-character-id="fal-noir"] { background-position:center 16%; }

        .character-card[data-character-id="monty-sarasa"] .character-portrait,
        #player-battle-character[data-character-id="monty-sarasa"],
        #opponent-battle-character[data-character-id="monty-sarasa"] { background-position:center 17%; }

        .character-card[data-character-id="monty-sasara"] .character-portrait,
        #player-battle-character[data-character-id="monty-sasara"],
        #opponent-battle-character[data-character-id="monty-sasara"] { background-position:center 16%; }


        /* ===== キャラクター能力：場札の任意入れ替え ===== */
        body.ability-field-swap-active #player-field .card {
            cursor: pointer !important;
            animation: abilitySwapPulse .85s ease-in-out infinite alternate;
            border-color: #ffe36a !important;
            box-shadow: 0 0 14px rgba(255,227,106,.82) !important;
            pointer-events: auto !important;
        }

        body.ability-field-swap-active #player-field .card:hover {
            transform: translateY(-7px) scale(1.04) !important;
        }

        body.ability-field-swap-active #player-field .card.ability-swap-selected {
            transform: translateY(-10px) scale(1.06) !important;
            outline: 3px solid #fff3a0 !important;
            box-shadow: 0 0 22px rgba(255,239,128,.95) !important;
            filter: brightness(1.35) !important;
        }

        #ability-field-swap-confirm {
            position: fixed;
            left: 50%;
            bottom: max(18px, env(safe-area-inset-bottom));
            transform: translateX(-50%);
            z-index: 530;
            display: none;
            min-width: 132px;
            padding: 12px 24px;
            border: 1px solid rgba(255,227,106,.95);
            border-radius: 12px;
            background: linear-gradient(180deg, #594516, #241a07);
            color: #fff4b8;
            font-weight: 800;
            letter-spacing: .12em;
            box-shadow: 0 6px 20px rgba(0,0,0,.75);
        }

        #ability-field-swap-confirm:disabled {
            opacity: .45;
        }

        #ability-field-swap-guide {
            position: fixed;
            left: 8px;
            right: 8px;
            top: max(8px, env(safe-area-inset-top));
            z-index: 520;
            display: none;
            padding: 10px 12px;
            border: 1px solid rgba(255,227,106,.88);
            border-radius: 10px;
            background: rgba(8,8,8,.95);
            color: #fff3b0;
            font-size: 12px;
            line-height: 1.45;
            font-weight: 700;
            letter-spacing: .04em;
            box-shadow: 0 5px 18px rgba(0,0,0,.7), 0 0 16px rgba(255,227,106,.2);
            pointer-events: none;
        }

        body.ability-field-swap-active #ability-field-swap-guide {
            display: block;
        }

        @keyframes abilitySwapPulse {
            from { filter: brightness(1); }
            to { filter: brightness(1.28); }
        }

    
        /* ===== ソーシャルゲーム風ホーム画面 ===== */
        #home-screen {
            position: fixed;
            inset: 0;
            z-index: 290;
            display: none;
            overflow: hidden;
            color: #f3e7ca;
            background:
                radial-gradient(ellipse at 50% 18%, rgba(255,220,135,.22), transparent 28%),
                linear-gradient(to bottom, rgba(13,9,10,.12), rgba(3,4,4,.76)),
                linear-gradient(90deg, #090708 0%, #201710 17%, #4b351d 50%, #201710 83%, #090708 100%);
            font-family: Georgia, "Yu Mincho", serif;
        }

        #home-screen.show { display: flex; }

        /* 宮殿内部の背景装飾 */
        #home-screen::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                /* 玉座奥の光 */
                radial-gradient(ellipse at 50% 35%, rgba(255,226,151,.24), transparent 24%),
                /* 高窓 */
                linear-gradient(90deg,
                    transparent 0 9%,
                    rgba(231,207,156,.12) 9% 15%,
                    transparent 15% 25%,
                    rgba(231,207,156,.09) 25% 31%,
                    transparent 31% 69%,
                    rgba(231,207,156,.09) 69% 75%,
                    transparent 75% 85%,
                    rgba(231,207,156,.12) 85% 91%,
                    transparent 91% 100%),
                /* 壁面 */
                linear-gradient(to bottom, rgba(116,83,45,.15), rgba(20,13,10,.18) 58%, rgba(2,3,3,.78));
            box-shadow: inset 0 0 120px rgba(0,0,0,.72);
        }

        #home-screen::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -10%;
            width: 74%;
            height: 58%;
            transform: translateX(-50%);
            pointer-events: none;
            background:
                linear-gradient(90deg, transparent, rgba(214,175,87,.15), transparent),
                repeating-linear-gradient(
                    90deg,
                    rgba(255,255,255,.025) 0 1px,
                    transparent 1px 80px
                ),
                repeating-linear-gradient(
                    0deg,
                    rgba(255,255,255,.02) 0 1px,
                    transparent 1px 55px
                );
            border-top: 1px solid rgba(212,175,55,.18);
            transform-origin: center top;
            clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
            opacity: .65;
        }

        

        

        
        

        

        

        

        

        

        

        .home-hero {
            background:
                linear-gradient(90deg, rgba(5,5,5,.84), rgba(12,8,7,.4) 52%, rgba(0,0,0,.2)),
                radial-gradient(circle at 68% 35%, rgba(255,221,139,.14), transparent 28%),
                linear-gradient(145deg, rgba(47,30,22,.6), rgba(9,8,8,.72) 62%) !important;
            backdrop-filter: blur(1.5px);
        }

        .home-hero::before {
            content: "♛" !important;
            color: rgba(212,175,55,.12) !important;
        }

        @media (max-width: 700px) {
            

            

            
        }


        .home-fog,
        .home-grain {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .home-fog {
            background:
                linear-gradient(110deg, transparent 0 30%, rgba(255,255,255,.025) 43%, transparent 58%),
                radial-gradient(ellipse at center bottom, rgba(212,175,55,.1), transparent 55%);
            animation: homeFogMove 12s ease-in-out infinite alternate;
        }

        .home-grain {
            opacity: .09;
            mix-blend-mode: screen;
            background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".72" numOctaves="3"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity=".5"/></svg>');
        }

        @keyframes homeFogMove {
            from { transform: translateX(-2%) scale(1.02); opacity:.6; }
            to   { transform: translateX(2%) scale(1.06); opacity:1; }
        }

        .home-shell {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-rows: auto minmax(0,1fr) auto;
            padding:
                max(12px, env(safe-area-inset-top))
                max(14px, env(safe-area-inset-right))
                max(12px, env(safe-area-inset-bottom))
                max(14px, env(safe-area-inset-left));
        }

        .home-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(212,175,55,.28);
        }

        .home-brand {
            text-align: left;
        }

        .home-brand-small {
            color: #a99365;
            font: 9px/1.2 "Courier New", monospace;
            letter-spacing: .34em;
        }

        .home-brand-title {
            margin-top: 2px;
            color: #e8d39b;
            font: 700 clamp(24px, 6vw, 42px)/1 Georgia, serif;
            letter-spacing: .17em;
            text-shadow: 0 2px 12px #000, 0 0 20px rgba(212,175,55,.2);
        }

        .home-resources {
            display: flex;
            gap: 7px;
            font-family: sans-serif;
        }

        .home-resource {
            min-width: 72px;
            padding: 6px 9px;
            border: 1px solid rgba(212,175,55,.38);
            border-radius: 8px;
            background: rgba(0,0,0,.46);
            color: #d8c79e;
            font-size: 10px;
            white-space: nowrap;
        }

        .home-resource b {
            color: #fff0be;
            font-size: 12px;
            margin-left: 4px;
        }

        .home-main {
            min-height: 0;
            display: grid;
            grid-template-columns: minmax(0,1.5fr) minmax(230px,.72fr);
            gap: 14px;
            padding: 14px 0 12px;
        }

        .home-hero {
            position: relative;
            min-height: 0;
            overflow: hidden;
            border: 1px solid rgba(212,175,55,.34);
            border-radius: 14px;
            background:
                linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.18)),
                radial-gradient(circle at 76% 42%, rgba(191,151,69,.2), transparent 32%),
                linear-gradient(145deg, #152019, #080b09 62%);
            box-shadow: inset 0 0 40px rgba(0,0,0,.62), 0 12px 35px rgba(0,0,0,.45);
        }

        .home-hero::before {
            content: "♛";
            position: absolute;
            right: 7%;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(212,175,55,.15);
            font-size: min(45vw, 390px);
            line-height: 1;
            text-shadow: 0 0 38px rgba(212,175,55,.15);
        }

        .home-hero-copy {
            position: absolute;
            left: clamp(18px,4vw,48px);
            bottom: clamp(22px,5vh,52px);
            max-width: 65%;
            text-align: left;
        }

        .home-season {
            display: inline-block;
            padding: 5px 9px;
            border: 1px solid rgba(212,175,55,.45);
            background: rgba(0,0,0,.42);
            color: #c9ad6b;
            font: 9px/1 "Courier New", monospace;
            letter-spacing: .22em;
        }

        .home-hero-title {
            margin: 12px 0 7px;
            color: #f4e4b8;
            font: 700 clamp(28px,7vw,66px)/.96 Georgia, serif;
            letter-spacing: .07em;
            text-shadow: 0 4px 18px #000;
        }

        .home-hero-text {
            color: #bdb39e;
            font-size: clamp(10px,1.8vw,14px);
            line-height: 1.65;
        }

        .home-side {
            display: grid;
            grid-template-rows: auto minmax(0,1fr);
            gap: 10px;
            min-height: 0;
        }

        .home-notice {
            padding: 11px 12px;
            border: 1px solid rgba(212,175,55,.3);
            border-radius: 11px;
            background: rgba(0,0,0,.42);
            text-align: left;
        }

        .home-notice-label {
            color: #b99a55;
            font: 9px/1 "Courier New", monospace;
            letter-spacing: .22em;
        }

        .home-notice-title {
            margin-top: 6px;
            color: #eee0be;
            font-size: 13px;
        }

        .home-menu-grid {
            min-height: 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 9px;
        }

        .home-menu-btn {
            position: relative;
            min-height: 84px;
            border: 1px solid rgba(212,175,55,.34);
            border-radius: 12px;
            background:
                linear-gradient(145deg, rgba(36,38,29,.92), rgba(8,10,9,.96));
            color: #eadbb6;
            cursor: pointer;
            overflow: hidden;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
        }

        .home-menu-btn::after {
            content: "";
            position: absolute;
            inset: auto -20% -55% 25%;
            height: 100%;
            background: radial-gradient(circle, rgba(212,175,55,.2), transparent 66%);
            pointer-events: none;
        }

        .home-menu-btn:active { transform: scale(.97); }
        .home-menu-icon { display:block; font-size:24px; margin-bottom:5px; }
        .home-menu-name { display:block; font:700 13px/1.1 Georgia,serif; letter-spacing:.08em; }
        .home-menu-sub { display:block; margin-top:4px; color:#8f8775; font:8px/1 "Courier New",monospace; letter-spacing:.14em; }

        .home-menu-btn.primary {
            grid-column: 1 / -1;
            min-height: 96px;
            border-color: #d9b75f;
            background:
                linear-gradient(135deg, rgba(111,78,25,.94), rgba(35,25,12,.96));
            box-shadow: 0 0 22px rgba(212,175,55,.13), inset 0 1px 0 rgba(255,255,255,.12);
        }

        .home-menu-btn.primary .home-menu-name { font-size:18px; color:#fff0bd; }
        .home-menu-btn.primary .home-menu-icon { font-size:29px; }

        .home-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            padding-top: 9px;
            border-top: 1px solid rgba(212,175,55,.23);
            color: #857d6c;
            font-size: 9px;
            letter-spacing: .1em;
        }

        #home-toast {
            position: fixed;
            left: 50%;
            bottom: max(26px, env(safe-area-inset-bottom));
            transform: translateX(-50%) translateY(18px);
            z-index: 310;
            opacity: 0;
            pointer-events: none;
            padding: 10px 18px;
            border: 1px solid rgba(212,175,55,.5);
            border-radius: 9px;
            background: rgba(3,5,4,.94);
            color: #eadbb6;
            font-size: 11px;
            box-shadow: 0 5px 20px #000;
            transition: .25s;
        }

        #home-toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        @media (max-width: 700px) {
            .home-shell { padding-left:8px; padding-right:8px; }
            .home-main {
                grid-template-columns: 1fr;
                grid-template-rows: minmax(180px,.9fr) minmax(240px,1.1fr);
                gap: 8px;
                padding: 8px 0;
            }
            .home-resources { gap:4px; }
            .home-resource { min-width:55px; padding:5px 6px; font-size:8px; }
            .home-resource b { font-size:10px; }
            .home-hero-copy { max-width:76%; left:17px; bottom:16px; }
            .home-hero-title { font-size:clamp(27px,10vw,43px); }
            .home-hero-text { font-size:9px; line-height:1.45; }
            .home-side { grid-template-rows:auto minmax(0,1fr); gap:7px; }
            .home-notice { padding:8px 10px; }
            .home-notice-title { font-size:11px; }
            .home-menu-grid { gap:6px; }
            .home-menu-btn { min-height:62px; border-radius:9px; }
            .home-menu-btn.primary { min-height:70px; }
            .home-menu-icon { font-size:19px; margin-bottom:2px; }
            .home-menu-name { font-size:11px; }
            .home-menu-btn.primary .home-menu-name { font-size:15px; }
            .home-menu-sub { font-size:7px; }
            .home-bottom { font-size:7px; padding-top:6px; }
        }

        @media (max-height: 650px) {
            .home-main { padding-top:6px; padding-bottom:6px; }
            .home-hero-title { margin-top:7px; }
            .home-menu-btn { min-height:54px; }
            .home-menu-btn.primary { min-height:61px; }
            .home-menu-icon { font-size:17px; }
        }

    
        /* ===== キャラクター選択からホームへ戻る操作 ===== */
        .character-select-footer-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        #character-back-home-btn {
            min-height: 44px;
            padding: 10px 20px;
            border: 1px solid rgba(212,175,55,.48);
            border-radius: 8px;
            background: linear-gradient(to bottom, rgba(55,52,45,.96), rgba(18,18,17,.98));
            color: #d8c9a6;
            font-family: Georgia, "Yu Mincho", serif;
            font-size: 13px;
            font-weight: bold;
            letter-spacing: .08em;
            cursor: pointer;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 12px rgba(0,0,0,.45);
        }

        #character-back-home-btn:hover {
            border-color: #d4af37;
            color: #fff0bd;
            background: linear-gradient(to bottom, rgba(78,67,43,.98), rgba(25,22,17,.98));
        }

        #character-back-home-btn:active {
            transform: scale(.97);
        }

        @media (max-width: 700px) {
            .character-select-footer-buttons {
                width: 100%;
                gap: 7px;
            }

            #character-back-home-btn,
            #confirm-character-btn {
                flex: 1 1 140px;
                min-height: 46px;
            }
        }

/* ===== 横スライド式キャラクター選択 ===== */
#character-select-screen {
    overflow: hidden;
}

.character-select-content {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.character-grid,
#character-grid {
    gap: 14px !important;
    scroll-behavior: smooth;
    padding: 14px max(18px, 8vw) 22px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,175,55,.45) rgba(0,0,0,.2);
}

.character-grid::-webkit-scrollbar,
#character-grid::-webkit-scrollbar {
    height: 7px;
}

.character-grid::-webkit-scrollbar-thumb,
#character-grid::-webkit-scrollbar-thumb {
    background: rgba(212,175,55,.45);
    border-radius: 999px;
}

.character-card {
    flex: 0 0 clamp(180px, 36vw, 260px) !important;
    min-width: clamp(180px, 36vw, 260px) !important;
    height: min(58vh, 430px);
    position: relative;
    border: 1px solid rgba(212,175,55,.38);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(23,21,17,.98), rgba(5,6,5,.98));
    box-shadow: 0 10px 24px rgba(0,0,0,.52);
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.character-card:hover,
.character-card:focus-visible {
    transform: translateY(-4px);
    border-color: #e0bd63;
    box-shadow: 0 14px 32px rgba(0,0,0,.65), 0 0 18px rgba(212,175,55,.12);
}

.character-card.selected {
    border-color: #f1d07a !important;
    box-shadow: 0 0 0 2px rgba(212,175,55,.2), 0 14px 32px rgba(0,0,0,.65);
}

.character-card img,
.character-card .character-image,
.character-card .portrait {
    width: 100% !important;
    height: calc(100% - 72px) !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block;
}

.character-card-name,
.character-name {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 72px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 12px !important;
    background: linear-gradient(to top, rgba(0,0,0,.98), rgba(10,9,7,.88), rgba(0,0,0,.18));
    color: #f2dfaa !important;
    font-family: Georgia, "Yu Mincho", serif;
    font-size: 17px !important;
    letter-spacing: .08em;
    text-shadow: 0 2px 8px #000;
    z-index: 2;
}

.character-carousel-hint {
    color: #a99978;
    font-size: 10px;
    letter-spacing: .12em;
    text-align: center;
    padding: 3px 8px 0;
}

/* 能力詳細モーダル */
#character-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 520;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: rgba(0,0,0,.84);
    backdrop-filter: blur(5px);
}

#character-detail-modal.show {
    display: flex;
}

.character-detail-panel {
    position: relative;
    width: min(940px, 96vw);
    height: min(720px, 92vh);
    display: grid;
    grid-template-columns: minmax(250px, .9fr) minmax(310px, 1.1fr);
    overflow: hidden;
    border: 1px solid rgba(222,185,92,.55);
    border-radius: 18px;
    background:
        radial-gradient(circle at 75% 20%, rgba(212,175,55,.12), transparent 28%),
        linear-gradient(145deg, rgba(35,26,18,.99), rgba(7,8,7,.99) 66%);
    box-shadow: 0 22px 60px rgba(0,0,0,.78), inset 0 0 40px rgba(0,0,0,.42);
}

.character-detail-portrait-wrap {
    position: relative;
    background:
        radial-gradient(circle at 50% 30%, rgba(222,188,106,.13), transparent 34%),
        linear-gradient(to bottom, #21180f, #070807);
    border-right: 1px solid rgba(212,175,55,.28);
}

#character-detail-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.character-detail-portrait-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.72), transparent 40%);
}

.character-detail-info {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 3vw, 34px);
    text-align: left;
}

.character-detail-kicker {
    color: #b89b5c;
    font: 10px/1 "Courier New", monospace;
    letter-spacing: .24em;
}

#character-detail-name {
    margin: 10px 0 4px;
    color: #f4e3b4;
    font: 700 clamp(28px, 5vw, 52px)/1 Georgia, "Yu Mincho", serif;
    letter-spacing: .08em;
    text-shadow: 0 3px 14px #000;
}

#character-detail-type {
    color: #a99d84;
    font-size: 12px;
    letter-spacing: .12em;
    margin-bottom: 18px;
}

.character-detail-scroll {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding-right: 6px;
}

.character-detail-ability {
    margin-bottom: 14px;
    padding: 14px 15px;
    border: 1px solid rgba(212,175,55,.28);
    border-radius: 10px;
    background: rgba(0,0,0,.3);
}

.character-detail-ability-title {
    color: #e6bd58;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: .08em;
    margin-bottom: 7px;
}

.character-detail-ability-text {
    color: #e7dcc0;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.character-detail-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.character-detail-actions button {
    flex: 1;
    min-height: 48px;
    border-radius: 9px;
    font-family: Georgia, "Yu Mincho", serif;
    font-weight: bold;
    letter-spacing: .07em;
    cursor: pointer;
}

#character-detail-select {
    border: 1px solid #e0bd63;
    background: linear-gradient(135deg, #77531f, #2a1c0d);
    color: #fff0bd;
}

#character-detail-close {
    border: 1px solid rgba(212,175,55,.4);
    background: linear-gradient(to bottom, #343029, #151513);
    color: #ded0ad;
}

@media (max-width: 720px) {
    .character-card {
        flex-basis: 68vw !important;
        min-width: 68vw !important;
        height: min(55vh, 410px);
    }

    .character-detail-panel {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(210px, 42%) minmax(0, 58%);
        height: 94vh;
    }

    .character-detail-portrait-wrap {
        border-right: 0;
        border-bottom: 1px solid rgba(212,175,55,.28);
    }

    .character-detail-info {
        padding: 16px;
    }

    #character-detail-name {
        font-size: 30px;
    }

    .character-detail-actions {
        margin-top: 10px;
    }
}

.character-card {
    aspect-ratio: 925 / 1130;
    border-radius: 8px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.58) !important;
}

.character-card::after {
    display: none !important;
}

.character-card .character-card-image {
    background: #fff;
    border-radius: 8px;
    pointer-events: none;
}

.character-card.selected {
    transform: translateY(-7px) scale(1.025) !important;
    box-shadow:
        0 0 0 3px rgba(242,207,116,.9),
        0 0 26px rgba(212,175,55,.42),
        0 16px 34px rgba(0,0,0,.68) !important;
}

.character-card:hover,
.character-card:focus-visible {
    transform: translateY(-5px) scale(1.015);
}

.character-card .character-card-name,
.character-card .character-name,
.character-card .character-portrait,
.character-card .character-role,
.character-card .character-desc {
    display: none !important;
}

.character-card.card-image-unavailable {
    border: 1px solid rgba(212,175,55,.38) !important;
    background: linear-gradient(145deg,#251d13,#090a09) !important;
}

.character-card.card-image-unavailable .character-portrait,
.character-card.card-image-unavailable .character-card-name,
.character-card.card-image-unavailable .character-name {
    display: flex !important;
}

.character-card-tap-label {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 3;
    padding: 5px 11px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 999px;
    background: rgba(0,0,0,.72);
    color: #fff3cd;
    font-size: 9px;
    letter-spacing: .08em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}

.character-card:hover .character-card-tap-label,
.character-card:focus-visible .character-card-tap-label {
    opacity: 1;
}

#character-detail-portrait {
    background: #f4f1e9;
}

.character-detail-portrait-wrap {
    background: #ece9e1 !important;
}

@media (max-width: 720px) {
    .character-card {
        flex-basis: 72vw !important;
        min-width: 72vw !important;
        max-width: 340px;
    }

    .character-grid,
    #character-grid {
        padding-left: 14vw !important;
        padding-right: 14vw !important;
    }
}


/* ===== カード全体表示・下端欠け防止 ===== */
.character-card {
    flex: 0 0 clamp(235px, 42vw, 330px) !important;
    min-width: clamp(235px, 42vw, 330px) !important;
    width: clamp(235px, 42vw, 330px) !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
}

.character-card .character-card-image {
    aspect-ratio: 925 / 1133 !important;
    object-position: center !important;
    overflow: visible !important;
    border-radius: 4px !important;
}

.character-card-tap-label {
    bottom: 14px !important;
}

#character-detail-portrait {
    max-height: 72vh !important;
    object-position: center !important;
}

@media (max-width: 720px) {
    .character-card {
        flex-basis: min(76vw, 340px) !important;
        min-width: min(76vw, 340px) !important;
        width: min(76vw, 340px) !important;
    }
}

.character-select-shell {
    padding-bottom: max(34px, env(safe-area-inset-bottom)) !important;
}

.character-grid,
#character-grid {
    padding-top: 18px !important;
    padding-bottom: 54px !important;
    scroll-padding-left: max(18px, 8vw);
    scroll-padding-right: max(18px, 8vw);
}

.character-card {
    box-sizing: border-box !important;
    border: 2px solid rgba(255,255,255,.82) !important;
    border-radius: 18px !important;
    box-shadow:
        0 2px 0 rgba(255,255,255,.55) inset,
        0 13px 28px rgba(0,0,0,.62) !important;
}

.character-card .character-card-image {
    position: relative !important;
    border-radius: 15px !important;
}

.character-card:hover,
.character-card:focus-visible,
.character-card.selected {
    overflow: hidden !important;
}

.character-card-tap-label {
    line-height: 1.2 !important;
    bottom: 12px !important;
}

/* 詳細画面でもカードの上下を一切切らない */
.character-detail-panel {
    overflow: auto !important;
}

.character-detail-portrait-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
}

#character-detail-portrait {
    max-height: calc(92vh - 24px) !important;
    border-radius: 18px !important;
}

@media (max-width: 720px) {
    .character-grid,
    #character-grid {
        padding-top: 14px !important;
        padding-bottom: 62px !important;
    }

    .character-card {
        border-radius: 16px !important;
    }

    .character-card .character-card-image {
        border-radius: 13px !important;
    }

    .character-detail-portrait-wrap {
        padding: 10px !important;
    }

    #character-detail-portrait {
        max-height: 46vh !important;
        border-radius: 15px !important;
    }
}


/* ===== カード全体を1画面内へ収める確定修正 ===== */
#character-select-screen {
    align-items: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}

.character-select-shell {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.character-grid,
#character-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    align-items: center !important;
    overflow-y: hidden !important;
    padding: 10px max(18px, 10vw) 18px !important;
}

/* 幅ではなく画面の高さを基準にカード寸法を決める */
.character-card {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: min(62dvh, 600px) !important;
    max-height: calc(100dvh - 210px) !important;
    aspect-ratio: 925 / 1133 !important;
    border: 2px solid rgba(255,255,255,.9) !important;
}

.character-card .character-card-image {
    height: 100% !important;
    max-width: none !important;
}

.character-select-footer {
    flex: 0 0 auto !important;
    margin-top: 4px !important;
}

/* 詳細画面も必ず全体表示 */
.character-detail-portrait-wrap {
    overflow: hidden !important;
}

#character-detail-portrait {
    max-height: 74dvh !important;
}

@media (max-width: 720px) {
    .character-select-title {
        margin-top: 3px !important;
        font-size: clamp(24px, 8vw, 38px) !important;
    }

    .character-select-sub {
        margin-bottom: 4px !important;
    }

    .character-card {
        height: min(57dvh, 500px) !important;
        max-height: calc(100dvh - 220px) !important;
        border-radius: 17px !important;
    }

    .character-card .character-card-image {
        border-radius: 14px !important;
    }

    .character-grid,
    #character-grid {
        padding-top: 6px !important;
        padding-bottom: 10px !important;
    }

    .character-select-footer {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}

@media (max-height: 700px) {
    .character-card {
        height: calc(100dvh - 205px) !important;
    }
}


.character-select-shell {
    min-height: 100% !important;
    height: auto !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
}

.character-grid,
#character-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 14px max(12vw, 28px) 34px !important;
    gap: 18px !important;
    scroll-snap-type: x mandatory !important;
}

/* ボタンの高さを一切固定せず、画像の実寸比率に従わせる */
.character-card {
    flex: 0 0 min(78vw, 390px) !important;
    width: min(78vw, 390px) !important;
    min-width: min(78vw, 390px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 2px solid rgba(255,255,255,.92) !important;
    border-radius: 20px !important;
    background: #fff !important;
    line-height: 0 !important;
    scroll-snap-align: center !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.62) !important;
}

.character-card .character-card-image {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 17px !important;
    transform: none !important;
    clip-path: none !important;
}

/* 詳細表示も画像全体を自然比率のまま表示 */
.character-detail-portrait-wrap {
    height: auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 10px !important;
}

#character-detail-portrait {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 76vh !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: auto !important;
    border-radius: 20px !important;
    clip-path: none !important;
}

@media (max-width: 720px) {
    .character-grid,
    #character-grid {
        padding-left: 11vw !important;
        padding-right: 11vw !important;
        padding-bottom: 42px !important;
    }

    .character-card {
        flex-basis: 78vw !important;
        width: 78vw !important;
        min-width: 78vw !important;
        border-radius: 18px !important;
    }

    .character-card .character-card-image {
        border-radius: 15px !important;
    }
}