/* Math Braves 共通CSS: タイトル/RUN選択/ステージ演出/戦闘画面/パネル/オーバーレイ。
   色は :root の --h(色相)で着せ替える。ゲーム固有のCSS(ロボの絵・色)は各ゲームのhtmlに書く */
        body {
            margin: 0;
            overflow: hidden;
            /* ポケとる風：パステル調の明るいストライプ背景 */
            background: repeating-linear-gradient(
                45deg,
                #fff8e1,
                #fff8e1 20px,
                #ffecb3 20px,
                #ffecb3 40px
            );
            font-family: "M PLUS Rounded 1c", sans-serif;
            user-select: none;
            -webkit-user-select: none;
            touch-action: none;
            height: 100vh;
            width: 100vw;
        }
        #container {
            width: 1280px;
            height: 720px;
            display: flex;
            position: absolute; top: 0; left: 0; transform-origin: center center;
            background-color: rgba(255, 255, 255, 0.85);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            border-radius: 30px;
            overflow: hidden;
            border: 10px solid #fff;
            transform-origin: center center;
        }
        
        /* ゲームプレイ中のレイヤー（左右パネル＋Canvas） */
        #game-layer {
            display: flex;
            width: 100%;
            height: 100%;
        }

        /* 左右パネル */
        #left-panel, #right-panel {
            flex: 0 0 280px;
            width: 280px;
            background: linear-gradient(170deg, hsl(calc(var(--h) - 11) 100.0% 95.5%) 0%, hsl(calc(var(--h) - 16) 74.1% 89.4%) 100%);
            color: #555;
            padding: 18px 16px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            z-index: 5;
            box-shadow: 2px 0 12px rgba(0,0,0,0.07);
            border-right: 3px solid hsl(calc(var(--h) - 12) 100.0% 81.4% / 0.5);
        }
        #right-panel {
            border-right: none;
            border-left: 3px solid rgba(255,190,120,0.5);
            background: linear-gradient(170deg, #fff8ee 0%, #fce8d0 100%);
        }

        .panel-title {
            font-size: 1.1rem; font-weight: 800; text-align: center;
            margin: 0 0 14px 0;
            padding-bottom: 10px;
            border-bottom: 3px dotted rgba(0,0,0,0.15);
        }
        #left-panel .panel-title { color: hsl(calc(var(--h) - 10) 78.7% 46.1%); }
        #right-panel .panel-title { color: #e65100; }

        /* 遊び方モーダル */
        #howto-modal {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.55); z-index: 300;
            display: flex; justify-content: center; align-items: center;
            border-radius: 20px;
        }
        #howto-modal .howto-inner {
            background: #fff; padding: 28px 30px; border-radius: 20px;
            width: 82%; max-width: 360px; position: relative;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
            border: 4px solid hsl(calc(var(--h) - 21) 92.4% 84.5%);
        }
        #btn-close-howto {
            position: absolute; top: 10px; right: 14px;
            background: none; border: none; font-size: 1.5rem;
            cursor: pointer; color: #aaa; line-height: 1; padding: 0;
        }
        #btn-close-howto:hover { color: #555; }

        #game-area {
            flex: 1;
            position: relative;
            overflow: hidden;
        }

        canvas {
            display: block;
            width: 100%;
            height: 100%;
        }
        
        h2 { 
            margin-top: 0; 
            border-bottom: 3px dotted #ffcc80; 
            padding-bottom: 10px; 
            font-size: 1.3rem; 
            color: #fb8c00;
            text-align: center;
        }
        
        /* 情報ボックス */
        .info-item { 
            margin-bottom: 12px; 
            font-size: 1.0rem; 
            background: linear-gradient(to bottom, #ffffff 0%, #f9f9f9 100%);
            padding: 8px 10px;
            border-radius: 15px;
            box-shadow: 0 3px 0 #ddd, 0 5px 5px rgba(0,0,0,0.05);
            border: 2px solid #eee;
            text-align: center;
        }
        .info-value { 
            font-size: 1.4rem; 
            font-weight: 800; 
            color: #ff7043;
            display: block; 
            line-height: 1.2;
        }
        .info-label { 
            font-size: 0.8rem; 
            color: #888; 
            font-weight: bold; 
            display: block; 
            margin-bottom: 2px; 
        }
        
        /* プレーヤー名 */
        #disp-player-name {
            font-size: 1.2rem;
            color: #555;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .invisible { visibility: hidden; }

        /* ボタン */
        .btn {
            background: linear-gradient(to bottom, hsl(calc(var(--h) - 21) 91.3% 63.9%) 0%, hsl(calc(var(--h) - 21) 91.9% 56.3%) 100%);
            color: white; 
            border: 3px solid #fff; 
            padding: 10px 20px;
            border-radius: 50px; 
            cursor: pointer; 
            font-size: 1.1rem; 
            margin: 5px;
            transition: transform 0.1s;
            box-shadow: 0 4px 0 hsl(calc(var(--h) - 19) 98.1% 41.4%), 0 6px 6px rgba(0,0,0,0.2);
            font-weight: 800;
            text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
            -webkit-tap-highlight-color: transparent;
            white-space: nowrap;
        }
        .btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 hsl(calc(var(--h) - 19) 98.1% 41.4%), 0 4px 4px rgba(0,0,0,0.2); }
        .btn:active { transform: translateY(4px); box-shadow: none; }
        
        .btn-danger { 
            background: linear-gradient(to bottom, #ff8a65 0%, #ff7043 100%);
            box-shadow: 0 4px 0 #d84315, 0 6px 6px rgba(0,0,0,0.2);
        }
        .btn-danger:hover { box-shadow: 0 2px 0 #d84315, 0 4px 4px rgba(0,0,0,0.2); }
        
        .btn-success { 
            background: linear-gradient(to bottom, #aed581 0%, #8bc34a 100%);
            box-shadow: 0 4px 0 #558b2f, 0 6px 6px rgba(0,0,0,0.2);
        }
        .btn-success:hover { box-shadow: 0 2px 0 #558b2f, 0 4px 4px rgba(0,0,0,0.2); }

        .btn-warning { 
            background: linear-gradient(to bottom, #ffd54f 0%, #ffca28 100%);
            color: #fff;
            box-shadow: 0 4px 0 #ff8f00, 0 6px 6px rgba(0,0,0,0.2);
            text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
        }
        .btn-warning:hover { box-shadow: 0 2px 0 #ff8f00, 0 4px 4px rgba(0,0,0,0.2); }
        
        /* タイトルメニューボタン */
        .title-menu-btn {
            width: 320px;
            padding: 12px 0;
            font-size: 1.2rem;
            margin-bottom: 10px;
        }

        .btn-auth {
            background: #db4437; 
            box-shadow: 0 4px 0 #c53929;
            border-radius: 50px;
            font-size: 1.1rem;
            width: 320px;
            padding: 12px 0;
            margin-bottom: 10px;
        }
        .btn-auth:hover { background: #c53929; }
        
        .btn-toggle {
            background: hsl(calc(var(--h) - 22) 15.7% 83.7%); color: white; padding: 5px 15px; 
            font-size: 0.9rem; margin: 0 5px; box-shadow: none; border-radius: 20px;
        }
        .btn-toggle.active {
            background: #ffb74d; color: #fff; pointer-events: none;
            box-shadow: 0 2px 0 #f57c00;
        }

        /* 全画面オーバーレイ（タイトル画面など） */
        #ranking-overlay, #player-manager-overlay, #settings-screen {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            /* 背景画像指定。読み込めない場合はパステルストライプ */
            background: var(--scene);
            display: flex; justify-content: center; align-items: center;
            z-index: 100;
            flex-direction: column;
            color: white;
        }
        
        /* ランキング等のコンテンツボックス */
        .overlay-content {
            background: #fff;
            color: #333;
            padding: 30px; border-radius: 30px;
            text-align: center; max-width: 90%; width: 90%;
            max-height: 648px; overflow-y: auto;   /* #containerは1280x720の論理座標で縮小されるので、vh(実画面基準)ではなくpxで決める */
            touch-action: pan-y; -webkit-overflow-scrolling: touch;
            border: 6px solid hsl(calc(var(--h) - 21) 92.4% 84.5%);
            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
        }
        
        .hidden { display: none !important; }

        /* ブラウザ標準alert/confirmの代替ポップアップ */
        .simple-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center;
            z-index: 500;
        }
        .simple-overlay .overlay-content { width: auto; min-width: 300px; max-width: 400px; }
        .simple-overlay-msg { font-size: 1.05rem; font-weight: bold; color: #444; line-height: 1.6; margin: 0 0 20px; }
        .simple-overlay-btns { display: flex; gap: 14px; justify-content: center; }
        .lang-btn { opacity: 0.55; }
        .lang-btn.active { opacity: 1; outline: 3px solid #ffca28; }
        
        #game-result {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            z-index: 20; width: 80%; max-width: 500px;
        }

        /* ランキング */
        .ranking-container {
            display: flex; justify-content: center; gap: 15px; margin-bottom: 20px;
            flex-wrap: nowrap; padding-bottom: 0;
        }
        .ranking-box {
            background: #fafafa; padding: 10px; border-radius: 20px;
            flex: 1; min-width: 0; border: 3px solid #e0e0e0;
        }
        .ranking-title {
            font-weight: 800; color: #555; margin-bottom: 8px;
            border-bottom: 2px dotted #ccc; padding-bottom: 5px; font-size: 1rem; 
        }
        .ranking-list {
            list-style: none; padding: 0; margin: 0; text-align: left;
            font-size: 0.9rem; height: 460px; overflow-y: auto;
            touch-action: pan-y; -webkit-overflow-scrolling: touch;
        }
        /* ランキング画面はモーダルの高さいっぱいまでリストを拡大 */
        /* #containerは1280x720固定でtransform:scale()により画面に合わせて縮小されるため、
           vh（実ビューポート基準）ではなく1280x720の論理座標系に対するpx指定で高さを決める */
        #ranking-screen .overlay-content {
            display: flex; flex-direction: column;
            height: 648px; max-height: 648px;
        }
        #ranking-screen .ranking-container { flex: 1; min-height: 0; }
        #ranking-screen .ranking-box { display: flex; flex-direction: column; }
        #ranking-screen .ranking-list { flex: 1; height: auto; min-height: 0; }
        .ranking-list li {
            padding: 8px 5px; border-bottom: 1px dashed #eee;
            display: flex; justify-content: space-between;
            color: #666;
        }
        .ranking-rank { display: inline-block; width: 25px; color: hsl(calc(var(--h) - 20) 15.6% 62.4%); font-weight: bold; }
        .ranking-name { display: inline-block; width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-weight: bold; }
        .ranking-score { font-weight: 800; color: #ff7043; float: right; }
        .ranking-date { font-size: 0.75rem; color: hsl(calc(var(--h) - 20) 15.3% 73.1%); white-space: nowrap; }

        /* プレーヤー管理モーダル */
        .player-list {
            list-style: none; padding: 0; margin: 20px 0;
            display: flex; flex-direction: column; gap: 10px;
        }
        .player-item {
            background: #f5f5f5; padding: 10px 20px; border-radius: 15px;
            display: flex; justify-content: space-between; align-items: center;
            border: 3px solid transparent; cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.03);
        }
        .player-item:hover { background: #fff; transform: translateY(-2px); border-color: hsl(calc(var(--h) - 21) 92.4% 84.5%); }
        .player-item.selected { border-color: #ffcc80; background: #fff8e1; }
        .player-item-name { font-size: 1.2rem; font-weight: 800; flex: 1; text-align: left; color: #555; }
        .delete-btn {
            background: #ef5350; color: white; border: none; width: 32px; height: 32px;
            border-radius: 50%; cursor: pointer; font-weight: bold; margin-left: 10px;
            line-height: 32px; padding: 0;
        }
        
        .add-player-form {
            display: flex; gap: 10px; justify-content: center; margin-bottom: 20px;
        }
        .input-name {
            padding: 12px; font-size: 20px; border-radius: 10px; border: 2px solid #e0e0e0; width: 200px;
            font-family: inherit;
        }
        
        /* 説明欄の強調 */
        strong { color: #ff7043; }
        .calc-box {
            background: #fff3e0;
            border: 2px dashed #ffcc80;
            border-radius: 10px;
            padding: 12px;
            margin-top: 15px;
            font-size: 0.95rem;
            color: #5d4037;
            text-align: center;
            font-weight: bold;
        }
        .emoji-star {
            color: #ffca28;
            text-shadow: 1px 1px 0 #fff, 0 0 2px rgba(0,0,0,0.2);
        }
        .emoji-red {
            text-shadow: 1px 1px 0 #fff, 0 0 2px rgba(0,0,0,0.2);
        }
        

        /* =====================================================================
           ステージモード（九九ポーカーのような見た目）: タイトル / RUN選択 / ステージ演出 / 結果
           ===================================================================== */
        :root { --h:220; --led:#5ff0ff; --led-soft:rgba(95,240,255,0.35); --scene: radial-gradient(ellipse 70% 50% at 50% 30%, hsl(calc(var(--h) - 4) 100.0% 65.7% / 0.5), rgba(0,0,0,0) 70%), linear-gradient(hsl(calc(var(--h) - 14) 100.0% 75.5% / 0.07) 1px, transparent 1px) 0 0 / 52px 52px, linear-gradient(90deg, hsl(calc(var(--h) - 14) 100.0% 75.5% / 0.07) 1px, transparent 1px) 0 0 / 52px 52px, linear-gradient(180deg,hsl(calc(var(--h) + 9) 78.6% 20.2%) 0%,hsl(calc(var(--h) + 4) 74.6% 35.5%) 55%,hsl(calc(var(--h) + 8) 79.6% 19.2%) 100%); --bd:hsl(calc(var(--h) + 6) 58.8% 19.0%); --bd2:hsl(calc(var(--h) + 7) 64.5% 12.2%); --gold:#ffc93d; --gold2:#ffb300; --ink:hsl(calc(var(--h) - 4) 28.5% 24.1%); --ink-dim:hsl(calc(var(--h) - 9) 18.1% 44.5%); }
        .screen { box-sizing:border-box; position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:100; color:var(--ink); }
        .screen::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.10) 2px, transparent 2px); background-size:34px 34px; pointer-events:none; }

        /* ---- 既存のランキング／設定／プレーヤー画面も同じ世界観に ---- */
        #ranking-overlay, #player-manager-overlay, #settings-screen {
            background: var(--scene);
            z-index: 120;
        }
        .overlay-content { background: linear-gradient(180deg,#fffef4,#fff2c6); border: 7px solid var(--gold); box-shadow: 0 0 0 5px #fff, 0 22px 50px rgba(0,0,0,0.45); }
        .overlay-content h2 { color: #e8603a !important; }
        .ranking-box { background: rgba(255,255,255,0.75); border: 3px solid #f0d78a; }
        .ranking-title { font-size: 1.15rem; border-bottom: 2px dotted #e0c36a; }
        .ranking-tag { font-size: 0.78rem; font-weight: 800; color: #fff; background: hsl(calc(var(--h) + 14) 100.0% 74.7%); border-radius: 50px; padding: 0 7px; margin-left: 6px; white-space: nowrap; align-self: center; }
        .ranking-tag.clear { background: #ff8a3d; }

        /* ---- ボタン ---- */
        .rs-mini { font-family: inherit; font-weight: 900; font-size: 1.25rem; color: #fff; padding: 10px 22px; border-radius: 14px; cursor: pointer; border: 4px solid var(--bd); background: linear-gradient(#e8604b,#c2402e); box-shadow: 0 5px 0 var(--bd2); text-shadow: 0 2px 0 rgba(0,0,0,0.3); -webkit-tap-highlight-color: transparent; }
        .rs-mini.blue { background: linear-gradient(hsl(calc(var(--h) - 12) 70.8% 58.4%),hsl(calc(var(--h) - 8) 59.3% 45.3%)); }
        .rs-mini:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--bd2); }

        /* ==================== TITLE（ガラス調のコマンドメニュー＋金のロゴ） ==================== */
        #title-screen { overflow: hidden; background: hsl(calc(var(--h) + 6) 57.4% 26.7%); z-index: 100; color: #fff; }
        .ts-bg { position:absolute; inset:0; overflow:hidden; background:linear-gradient(180deg,hsl(calc(var(--h) + 10) 84.3% 17.5%) 0%,hsl(calc(var(--h) + 5) 77.6% 31.6%) 34%,hsl(calc(var(--h) - 2) 74.1% 53.1%) 58%,hsl(calc(var(--h) - 15) 100.0% 78.0%) 74%,hsl(calc(var(--h) + 8) 67.5% 31.4%) 74.1%,hsl(calc(var(--h) + 10) 77.8% 17.6%) 100%); }
        .ts-sun { position:absolute; left:50%; top:533px; width:560px; height:280px; margin:-280px 0 0 -280px; border-radius:280px 280px 0 0; background:radial-gradient(ellipse at 50% 100%, #fffbe0 0%, #ffe27a 30%, rgba(255,170,60,0.0) 72%); opacity:0.9; }
        .ts-stars { position:absolute; left:0; right:0; top:0; height:380px; background:
            radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1.6px) 0 0 / 97px 83px,
            radial-gradient(circle, hsl(calc(var(--h) - 13) 100.0% 89.2% / 0.7) 1px, transparent 1.6px) 31px 47px / 143px 109px; opacity:0.55; }
        .ts-city { position:absolute; left:0; right:0; top:383px; height:150px;
            background: radial-gradient(circle, rgba(255,226,130,0.9) 1.6px, transparent 2.3px) 3px 5px / 16px 22px, linear-gradient(hsl(calc(var(--h) + 9) 66.2% 30.2%), hsl(calc(var(--h) + 11) 76.1% 18.0%)); }
        .ts-city.far { top:413px; height:120px; background: radial-gradient(circle, hsl(calc(var(--h) - 1) 100.0% 83.3% / 0.55) 1.4px, transparent 2px) 5px 7px / 18px 24px, linear-gradient(hsl(calc(var(--h) + 5) 56.7% 48.0%), hsl(calc(var(--h) + 6) 64.0% 39.2%)); }
        .ts-floor { position:absolute; left:-100%; right:-100%; top:533px; height:420px; transform-origin:50% 0; transform:perspective(700px) rotateX(70deg);
            background: linear-gradient(hsl(calc(var(--h) - 31) 100.0% 73.5% / 0.7) 2px, transparent 2px) 0 0 / 90px 90px, linear-gradient(90deg, hsl(calc(var(--h) - 31) 100.0% 73.5% / 0.7) 2px, transparent 2px) 0 0 / 90px 90px, linear-gradient(hsl(calc(var(--h) + 3) 77.3% 34.5%), hsl(calc(var(--h) + 10) 80.5% 16.1%));
            animation: tsFloor 2.6s linear infinite; }
        @keyframes tsFloor { to { background-position: 0 90px, 0 0, 0 0; } }
        .ts-hz { position:absolute; left:0; right:0; top:531px; height:4px; background:linear-gradient(90deg, transparent, #bff, transparent); box-shadow:0 0 24px 6px hsl(calc(var(--h) - 28) 100.0% 75.5% / 0.7); }
        .ts-vig { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 45%, hsl(calc(var(--h) + 11) 83.3% 9.4% / 0.6) 100%); }
        .ts-bot { position:absolute; width:150px; height:150px; animation: tsBotBob 3.2s ease-in-out infinite; }
        .ts-bot .mon { position:absolute; left:0; top:0; width:150px; height:150px; transform:scale(var(--s,1)); transform-origin:50% 100%; }
        @keyframes tsBotBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
        .ts-cards { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
        .ts-cards .pc { bottom:-90px; opacity:0; animation: tsFloat linear infinite; }
        .ts-glow { position:absolute; left:50%; top:112px; width:900px; height:420px; margin-left:-450px; margin-top:-210px; pointer-events:none; background: radial-gradient(ellipse at center, rgba(255,236,150,0.65) 0%, rgba(255,210,90,0.22) 40%, rgba(255,200,80,0) 70%); animation: tsGlow 4s ease-in-out infinite; }
        @keyframes tsGlow { 0%,100% { opacity:0.75; transform:scale(1); } 50% { opacity:1; transform:scale(1.06); } }
        .ts-floaters { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
        .ts-floaters span { position:absolute; bottom:-60px; color:#fff6c0; text-shadow:0 0 10px #ffd84d, 0 0 18px #ffb300; animation: tsFloat linear infinite; }
        @keyframes tsFloat { 0% { transform: translateY(0) scale(0.6) rotate(0deg); opacity:0; } 15% { opacity:0.95; } 85% { opacity:0.95; } 100% { transform: translateY(-780px) scale(1.15) rotate(40deg); opacity:0; } }
        .ts-logo { position:absolute; left:0; right:0; top:0; z-index:4; text-align:center; pointer-events:none; }
        .ts-emblem { position:absolute; left:50%; top:4px; width:560px; margin-left:-280px; display:flex; justify-content:space-between; align-items:center; z-index:0; opacity:0.95; }
        .ts-emblem .ico { width:56px; height:56px; color:#ffe27a; filter:drop-shadow(0 3px 0 hsl(calc(var(--h) + 8) 79.5% 15.3% / 0.7)); }
        .ts-emblem i:first-child { transform: rotate(-18deg); } .ts-emblem i:last-child { transform: scaleX(-1) rotate(-18deg); }
        .ts-logo .l1 { position:relative; display:block; margin-top:10px; font-size:1.7rem; letter-spacing:14px; padding-left:14px; z-index:2; line-height:1.2; }
        .ts-logo .l2 { position:relative; display:block; font-size:7rem; letter-spacing:2px; margin-top:4px; z-index:2; line-height:1.1; white-space:nowrap; }
        .ts-sp { display:inline-block; width:.35em; }
        .tl { position:relative; display:inline-block; font-weight:900; color:transparent; animation: tlBob 3s ease-in-out infinite; animation-delay: calc(1.4s + var(--i) * 0.14s); }
        .tl::before { content:attr(data-t); position:absolute; left:0; top:0; z-index:-1; color:var(--tstroke, hsl(calc(var(--h) + 7) 76.3% 18.2%)); -webkit-text-stroke:.13em var(--tstroke, hsl(calc(var(--h) + 7) 76.3% 18.2%)); text-shadow:0 .07em 0 var(--tshadow, hsl(calc(var(--h) + 8) 78.9% 11.2%)), 0 .13em .2em rgba(0,0,0,0.45); }
        .tl::after { content:attr(data-t); position:absolute; left:0; top:0; z-index:1; color:transparent; background:var(--tfill, linear-gradient(180deg,#fffbe0 0%,#ffe27a 36%,#ffb81f 58%,#ffd95a 100%)); -webkit-background-clip:text; background-clip:text; }
        .intro .tl { animation: tlIn 0.55s cubic-bezier(.2,.9,.3,1.4) backwards, tlBob 3s ease-in-out infinite; animation-delay: calc(0.2s + var(--i) * 0.07s), calc(1.4s + var(--i) * 0.14s); }
        @keyframes tlIn { 0% { transform: translateY(-90px) rotate(-12deg) scale(0.4); opacity:0; } 100% { transform:none; opacity:1; } }
        @keyframes tlBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
        @keyframes tsPop { from { transform: scale(0); opacity:0; } to { transform:none; opacity:1; } }
        .ts-menu { position:absolute; left:50%; top:500px; width:1100px; margin-left:-550px; z-index:5; display:flex; flex-direction:column; align-items:center; gap:16px; }
        .tm-row { display:flex; gap:10px; justify-content:center; }
        /* タイトルの主役: 大きな数字カードの扇 + 演算のバッジ */
        .ts-hero { position:absolute; left:50%; top:200px; width:0; height:0; z-index:3; pointer-events:none; }
        .th-card { position:absolute; left:-84px; top:0; width:168px; height:224px; box-sizing:border-box; border-radius:22px; border:6px solid hsl(var(--h) 85% 82%); display:flex; align-items:center; justify-content:center;
            background:linear-gradient(165deg,#ffffff,hsl(calc(var(--h) + 4) 90% 90%)); transform:translate(var(--x),var(--y)) rotate(var(--r)); transform-origin:50% 140%;
            box-shadow:0 10px 0 hsl(calc(var(--h) + 8) 60% 30% / 0.55), 0 20px 30px rgba(0,0,0,0.45); }
        .th-card { padding-bottom:30px; }
        .th-card.l { justify-content:flex-start; padding-left:16px; } .th-card.r { justify-content:flex-end; padding-right:16px; }
        .th-card b { font-size:var(--fs); font-weight:900; line-height:1; color:hsl(calc(var(--h) + 6) 55% 28%); text-shadow:0 5px 0 #fff; animation: thBob 3.2s ease-in-out infinite; }
        .th-card.gold { border-color:#ffe58a; background:linear-gradient(160deg,#fff4b0,#ffc93d 55%,#e8a317); box-shadow:0 10px 0 #a35c00, 0 0 36px 10px rgba(255,216,77,0.75), 0 20px 30px rgba(0,0,0,0.45); }
        .th-card.gold b { color:#7a2a00; text-shadow:0 5px 0 rgba(255,255,255,0.6); }
        .intro .th-card { animation: thIn 0.7s cubic-bezier(.2,1.2,.3,1) 0.5s backwards; }
        @keyframes thIn { from { transform:translate(var(--x),420px) rotate(0deg); opacity:0; } }
        @keyframes thBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
        .th-op { position:absolute; left:-58px; top:166px; width:116px; height:116px; border-radius:50%; z-index:20; display:flex; align-items:center; justify-content:center; font-size:4.6rem; font-weight:900; line-height:1; color:#4a2800;
            background:radial-gradient(circle at 35% 28%,#fff6b8,#ffd24a 55%,#e8a317); border:6px solid #fff3b0; box-shadow:0 8px 0 #a35c00, 0 0 0 5px rgba(255,214,100,0.35), 0 16px 26px rgba(0,0,0,0.45); text-shadow:0 3px 0 rgba(255,255,255,0.55); animation: tmPulse 1.8s ease-in-out infinite; }
        .tm-btn { position:relative; font-family:inherit; font-weight:900; font-size:1.2rem; color:#fff; height:46px; padding:0 20px 0 52px; text-align:left; cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
            border-radius:14px; border:2px solid rgba(255,214,100,0.85); background:linear-gradient(180deg, hsl(calc(var(--h) + 6) 63.0% 36.1% / 0.82), hsl(calc(var(--h) + 8) 72.0% 19.6% / 0.88)); backdrop-filter: blur(3px);
            box-shadow:0 4px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.8), inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 18px rgba(0,0,0,0.3); text-shadow:0 2px 0 rgba(0,0,0,0.45); transition: transform 0.12s, filter 0.12s; -webkit-tap-highlight-color:transparent; }
        .tm-btn::before { content:''; position:absolute; left:0; top:0; bottom:0; width:40px; background:rgba(255,214,100,0.18); border-right:2px solid rgba(255,214,100,0.5); }
        .tm-btn:hover { filter:brightness(1.18); transform:translateX(4px); }
        .tm-btn:active { transform: translateY(3px); box-shadow:0 1px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.8); }
        .tm-btn .ic { position:absolute; left:0; top:0; bottom:0; width:40px; display:flex; align-items:center; justify-content:center; color:#ffd24a; }
        .tm-btn .ic .ico { width:24px; height:24px; }
        .tm-btn.primary { width:560px; height:88px; font-size:2.6rem; letter-spacing:16px; border-radius:20px; text-indent:6px; text-align:center; padding:0 20px; color:#4a2800; text-shadow:0 2px 0 rgba(255,255,255,0.55);
            border:3px solid #fff3b0; background:linear-gradient(180deg,#fff0a0 0%,#ffcb3d 48%,#f09a1a 100%); box-shadow:0 6px 0 #a35c00, 0 0 0 3px rgba(255,214,100,0.35), 0 12px 26px rgba(0,0,0,0.4); animation: tmPulse 1.8s ease-in-out infinite; }
        .tm-btn.primary::before { display:none; }
        .tm-btn.primary::after { content:''; position:absolute; top:-20%; bottom:-20%; width:38%; left:-60%; transform:skewX(-22deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,0.75),transparent); animation: tmShine 3s ease-in-out infinite; }
        @keyframes tmShine { 0%,55% { left:-60%; } 100% { left:130%; } }
        @keyframes tmPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.03); } }
        .tm-btn.primary:hover { transform:scale(1.04); }
        .tm-btn.primary:active { transform: translateY(5px); box-shadow:0 1px 0 #a35c00; animation:none; }
        .tm-btn.mini { height:50px; min-width:160px; font-size:.98rem; padding:0 14px 0 46px; }
        .tm-btn.sub { background:linear-gradient(180deg, rgba(40,110,90,0.84), rgba(14,60,50,0.9)); }

        /* ==================== RUN SELECT（タイトルと同じ、ガラス調＋金のふち） ==================== */
        #run-select-screen { justify-content:flex-start; padding:12px 22px 12px; z-index:101; color:#fff;
            background: var(--scene); }
        #run-select-screen::before { display:none; }
        .glass { border-radius:14px; border:2px solid rgba(255,214,100,0.85); background:linear-gradient(180deg, hsl(calc(var(--h) + 6) 63.0% 36.1% / 0.84), hsl(calc(var(--h) + 8) 72.0% 19.6% / 0.9)); backdrop-filter: blur(3px);
            box-shadow:0 4px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.8), inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 18px rgba(0,0,0,0.3); }
        .rs-top { position:relative; z-index:2; width:100%; display:flex; align-items:center; justify-content:space-between; height:58px; flex-shrink:0; }
        .rs-mini { font-family:inherit; font-weight:900; font-size:1.1rem; color:#fff; height:46px; padding:0 22px; border-radius:14px; cursor:pointer; border:2px solid rgba(255,214,100,0.85);
            background:linear-gradient(180deg, hsl(calc(var(--h) + 6) 63.0% 36.1% / 0.88), hsl(calc(var(--h) + 8) 72.0% 19.6% / 0.92)); box-shadow:0 4px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.8), inset 0 1px 0 rgba(255,255,255,0.35); text-shadow:0 2px 0 rgba(0,0,0,0.45); -webkit-tap-highlight-color:transparent; transition: transform .12s, filter .12s; }
        .rs-mini:hover { filter:brightness(1.18); }
        .rs-mini:active { transform:translateY(3px); box-shadow:0 1px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.8); }
        .rs-mini.blue { background:linear-gradient(180deg, rgba(40,110,90,0.88), rgba(14,60,50,0.92)); }
        .rs-plaque { position:absolute; left:50%; top:2px; transform:translateX(-50%); padding:6px 70px 8px; font-size:1.8rem; font-weight:900; letter-spacing:8px; text-indent:8px; color:#fff; white-space:nowrap; text-shadow:0 2px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.7);
            background:linear-gradient(hsl(calc(var(--h) - 3) 67.1% 51.2%),hsl(calc(var(--h) + 2) 70.6% 38.6%)); clip-path:polygon(0 0,100% 0,calc(100% - 22px) 50%,100% 100%,0 100%,22px 50%); filter:drop-shadow(0 4px 0 hsl(calc(var(--h) + 7) 76.3% 18.2%)); }
        .rs-stage { position:relative; z-index:2; width:100%; flex:1; min-height:0; display:flex; align-items:center; }
        .rs-viewport { flex:1; height:100%; overflow:hidden; position:relative; }
        #rs-strip { position:absolute; left:0; top:0; height:100%; display:flex; align-items:center; gap:22px; padding:22px; transition: transform 0.35s cubic-bezier(.2,.9,.3,1.15); }
        .rs-arrow { flex-shrink:0; width:52px; height:84px; border-radius:14px; cursor:pointer; font-family:inherit; font-size:1.6rem; font-weight:900; color:#ffe27a; z-index:3;
            border:2px solid rgba(255,214,100,0.85); background:linear-gradient(180deg, hsl(calc(var(--h) + 6) 63.0% 36.1% / 0.88), hsl(calc(var(--h) + 8) 72.0% 19.6% / 0.92)); box-shadow:0 4px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.8), inset 0 1px 0 rgba(255,255,255,0.35); }
        .rs-arrow:active { transform:translateY(3px); box-shadow:0 1px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.8); }
        .rs-arrow:disabled { opacity:0.3; cursor:default; }
        .rs-card { position:relative; width:244px; height:386px; flex-shrink:0; display:flex; flex-direction:column; border-radius:20px; cursor:pointer; overflow:visible;
            border:2px solid rgba(255,214,100,0.7); background:linear-gradient(180deg, hsl(calc(var(--h) + 6) 63.0% 36.1% / 0.86), hsl(calc(var(--h) + 8) 72.0% 19.6% / 0.92)); backdrop-filter:blur(3px);
            box-shadow:0 6px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.8), inset 0 1px 0 rgba(255,255,255,0.3), 0 16px 26px rgba(0,0,0,0.4);
            transform:scale(0.92); filter:saturate(0.75) brightness(0.8); transition: transform 0.25s, filter 0.25s; }
        .rs-card.sel { transform:translateY(-12px) scale(1.04); filter:none; z-index:2; border-color:#fff3b0;
            box-shadow:0 6px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.8), 0 0 0 4px rgba(255,214,100,0.55), 0 0 32px 8px rgba(255,214,100,0.45), 0 22px 30px rgba(0,0,0,0.45); }
        .rs-card.locked { cursor:default; filter:saturate(0.3) brightness(0.65); }
        .rs-tab { height:56px; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 10px; font-weight:900; font-size:1.35rem; letter-spacing:3px; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,0.5);
            background:linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 100%); border-bottom:2px solid rgba(255,214,100,0.8); border-radius:17px 17px 0 0; box-shadow:inset 0 -8px 0 rgba(0,0,0,0.14); }
        .rs-art { position:relative; height:150px; margin:10px 12px 0; overflow:hidden; border-radius:12px; border:2px solid rgba(255,214,100,0.65); box-shadow:inset 0 0 14px rgba(0,0,0,0.25); }
        .rs-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px 12px; text-align:center; }
        .rs-short { font-size:1.1rem; font-weight:800; color:#fff; line-height:1.35; text-shadow:0 2px 0 rgba(0,0,0,0.45); }
        .rs-medals { margin-top:4px; font-size:1.2rem; font-weight:900; color:#ffd24a; letter-spacing:2px; text-shadow:0 0 8px rgba(255,200,60,0.6); }
        .rs-go { position:absolute; left:14px; right:14px; bottom:14px; height:54px; display:flex; align-items:center; justify-content:center; font-family:inherit; font-weight:900; font-size:1.5rem; letter-spacing:4px; color:#4a2800; cursor:pointer; overflow:hidden;
            border-radius:14px; border:3px solid #fff3b0; background:linear-gradient(180deg,#fff0a0 0%,#ffcb3d 48%,#f09a1a 100%); box-shadow:0 5px 0 #a35c00, 0 0 0 3px rgba(255,214,100,0.35), 0 10px 20px rgba(0,0,0,0.4);
            text-shadow:0 2px 0 rgba(255,255,255,0.55); opacity:0; pointer-events:none; transform:translateY(8px); transition: opacity 0.2s, transform 0.2s; }
        .rs-card.sel .rs-body { padding-bottom:74px; }
        .rs-card.sel .rs-go { opacity:1; pointer-events:auto; transform:none; animation: goBounce 1.4s ease-in-out infinite; }
        .rs-go::after { content:''; position:absolute; top:-20%; bottom:-20%; width:38%; left:-60%; transform:skewX(-22deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,0.75),transparent); animation: tmShine 3s ease-in-out infinite; }
        .rs-go:active { transform:translateY(4px); box-shadow:0 1px 0 #a35c00; }
        @keyframes goBounce { 0%,100% { translate:0 0; } 50% { translate:0 -4px; } }
        .rs-bottom { position:relative; z-index:2; width:100%; flex-shrink:0; margin-top:10px; padding:8px 16px 10px; border-radius:16px; border:2px solid rgba(255,214,100,0.85);
            background:linear-gradient(180deg, hsl(calc(var(--h) + 6) 65.8% 29.8% / 0.9), hsl(calc(var(--h) + 8) 75.0% 15.7% / 0.94)); box-shadow:0 4px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.8), inset 0 1px 0 rgba(255,255,255,0.25); }
        .rs-bottom-row { display:flex; gap:14px; align-items:stretch; }
        .rs-desc { color:#fff; font-size:1.08rem; font-weight:800; line-height:1.4; text-align:center; min-height:1.4em; margin-bottom:7px; text-shadow:0 2px 0 rgba(0,0,0,0.4); }
        .star-row { display:flex; gap:14px; flex:1; }
        .star-btn { flex:1; min-width:0; padding:3px 2px; border-radius:12px; cursor:pointer; font-family:inherit; font-weight:900; color:#ffe27a; font-size:1.25rem; line-height:1.15;
            border:2px solid rgba(255,214,100,0.75); background:linear-gradient(180deg, hsl(calc(var(--h) + 6) 63.0% 36.1% / 0.86), hsl(calc(var(--h) + 8) 72.0% 19.6% / 0.9)); box-shadow:0 4px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.8), inset 0 1px 0 rgba(255,255,255,0.3); text-shadow:0 2px 0 rgba(0,0,0,0.45); }
        .star-btn small { display:block; font-size:1.0rem; color:#fff; font-weight:900; }
        .star-btn.active { color:#4a2800; border-color:#fff3b0; background:linear-gradient(180deg,#fff0a0 0%,#ffcb3d 55%,#f09a1a 100%); box-shadow:0 4px 0 #a35c00, 0 0 0 3px rgba(255,214,100,0.35); text-shadow:0 1px 0 rgba(255,255,255,0.5); }
        .star-btn.active small { color:#4a2800; }
        .star-btn.locked { opacity:0.45; cursor:not-allowed; }
        .star-btn.cleared { position:relative; background:linear-gradient(180deg, rgba(40,130,90,0.9), rgba(14,70,50,0.94)); }
        .star-btn.cleared.active { background:linear-gradient(180deg,#fff0a0 0%,#ffcb3d 55%,#f09a1a 100%); color:#4a2800; box-shadow:0 4px 0 #a35c00, 0 0 0 3px rgba(255,214,100,0.35); }
        .star-btn.cleared.active small { color:#4a2800; }
        .star-btn.cleared::after { content:'CLEAR'; position:absolute; top:-13px; right:-8px; transform:rotate(7deg); background:linear-gradient(#ff7a5c,#e0402a); color:#fff; font-size:0.8rem; font-weight:900; letter-spacing:1px; padding:0 9px; border-radius:50px; border:2px solid #fff; line-height:1.5; box-shadow:0 2px 0 #8a2412; }
        .ds-best { color:#ffe27a; font-weight:900; font-size:1.05rem; }
        /* ---- カードのイラスト（CSSのみ） ---- */
        .pc { position:absolute; width:52px; height:74px; border-radius:9px; border:3px solid #fff; color:#fff; font-weight:900; font-size:2rem; display:flex; align-items:center; justify-content:center; text-shadow:0 2px 0 rgba(0,0,0,0.25); box-shadow:0 4px 0 rgba(0,0,0,0.25); }
        .spark { position:absolute; color:#fff4a8; text-shadow:0 0 8px #ffd84d, 0 0 14px #ffb300; font-weight:900; animation: sparkle 1.6s ease-in-out infinite; }
        @keyframes sparkle { 0%,100% { opacity:0.4; transform:scale(0.8); } 50% { opacity:1; transform:scale(1.2); } }
        .rsa-floor { position:absolute; left:0; right:0; bottom:0; height:46px; background: linear-gradient(hsl(calc(var(--h) - 31) 100.0% 73.5% / 0.45) 1.5px, transparent 1.5px) 0 0 / 22px 12px, linear-gradient(90deg, hsl(calc(var(--h) - 31) 100.0% 73.5% / 0.45) 1.5px, transparent 1.5px) 0 0 / 22px 12px, linear-gradient(hsl(calc(var(--h) + 4) 79.2% 30.2%),hsl(calc(var(--h) + 8) 81.8% 17.3%)); border-top:2px solid hsl(calc(var(--h) - 31) 100.0% 81.4% / 0.7); }
        .slime { position:absolute; width:56px; height:44px; border-radius:50% 50% 38% 38%; background:radial-gradient(circle at 35% 30%,#d9a3ff,#9b59b6 70%); border:3px solid #5b2a7a; box-shadow:0 4px 0 rgba(0,0,0,0.25); }
        .slime::before, .slime::after { content:''; position:absolute; top:14px; width:9px; height:11px; border-radius:50%; background:#fff; border:2px solid #222; }
        .slime::before { left:10px; } .slime::after { right:10px; }


        /* ==================== ステージ演出 ==================== */
        #stage-intro { position:absolute; inset:0; z-index:260; pointer-events:none; display:flex; align-items:center; justify-content:center; }
        #stage-intro .si-dim { position:absolute; inset:0; background:radial-gradient(circle, rgba(0,0,0,0), rgba(0,0,0,0.5)); animation: siDim 1.9s ease both; }
        .si-band { position:relative; width:100%; padding:20px 0 24px; text-align:center; background:linear-gradient(90deg, transparent, var(--sc,#4caf50) 16%, var(--sc,#4caf50) 84%, transparent); animation: siBand 1.9s cubic-bezier(.2,.9,.3,1) both; }
        .si-no { font-size:1.6rem; letter-spacing:7px; color:#fff; font-weight:900; text-shadow:0 3px 0 rgba(0,0,0,0.35); }
        .si-name { font-size:4.6rem; font-weight:900; color:#fff; line-height:1.1; -webkit-text-stroke:9px var(--bd); paint-order:stroke fill; text-shadow:0 8px 0 var(--bd2); }
        #stage-intro.final .si-band { animation: siSlam 2.2s cubic-bezier(.2,.9,.3,1) both; --sc:#d62a4a; }
        #stage-intro.final .si-name { font-size:5.4rem; }
        @keyframes siBand { 0% { transform:translateX(-110%); opacity:0; } 18% { transform:none; opacity:1; } 82% { transform:none; opacity:1; } 100% { transform:translateX(110%); opacity:0; } }
        @keyframes siSlam { 0% { transform:scale(2.6); opacity:0; } 16% { transform:scale(1); opacity:1; } 84% { opacity:1; } 100% { opacity:0; } }
        @keyframes siDim { 0%,100% { opacity:0; } 20%,80% { opacity:1; } }

        #stage-clear { position:absolute; inset:0; z-index:240; background:hsl(calc(var(--h) + 8) 71.4% 11.0% / 0.66); display:flex; align-items:center; justify-content:center; }
        .sc-box { position:relative; width:720px; box-sizing:border-box; padding:0 34px 22px; text-align:center; border-radius:34px; background:linear-gradient(180deg,#fffef4,#fff2c6); border:7px solid var(--gold); box-shadow:0 0 0 6px #fff, 0 22px 50px rgba(0,0,0,0.45), 0 0 60px rgba(255,200,60,0.5); animation: endPop 0.5s cubic-bezier(.2,1.4,.4,1); }
        .sc-ribbon { display:inline-block; margin-top:-34px; padding:4px 44px 8px; border-radius:20px; border:6px solid #fff; color:#fff; font-size:2.6rem; font-weight:900; letter-spacing:3px; line-height:1.15; background:linear-gradient(to bottom,#ff9a5c,#e8503d); box-shadow:0 8px 0 #a82a18, 0 12px 20px rgba(0,0,0,0.3); text-shadow:0 4px 0 rgba(0,0,0,0.25); }
        .sc-theme { margin-top:10px; font-size:1.5rem; font-weight:900; color:var(--ink); }
        .sc-rows { margin:14px auto 6px; width:520px; text-align:left; font-size:1.3rem; font-weight:800; color:#4a3a1a; }
        .sc-rows div { display:flex; justify-content:space-between; padding:5px 4px; border-bottom:2px dotted #e0c36a; }
        .sc-rows b { color:#e8603a; font-weight:900; }
        .sc-rows .big { font-size:1.7rem; border-bottom:none; }
        .sc-next { margin-top:10px; font-size:1.15rem; font-weight:800; color:var(--ink-dim); }
        .sc-box .rs-go { position:static; opacity:1; pointer-events:auto; transform:none; margin:14px auto 0; width:420px; animation: goBounce 1.2s ease-in-out infinite; }


        /* ===== HP制+ショップ(たしざん/ひきざん) ===== */
        /* じぶんの HP (たたかう場面の左上) */
        .bl-hp { position:absolute; left:14px; top:12px; width:236px; box-sizing:border-box; padding:7px 12px 9px; border-radius:16px; z-index:6;
            background:linear-gradient(180deg, rgba(255,255,255,0.97), rgba(232,240,255,0.94)); border:3px solid hsl(calc(var(--h) + 6) 55% 52%);
            box-shadow:0 5px 0 hsl(calc(var(--h) + 8) 60% 24% / 0.7), 0 10px 18px rgba(0,0,0,0.25); font-weight:900; color:hsl(calc(var(--h) + 6) 47.7% 29.2%); }
        .bl-hp .hl { display:flex; justify-content:space-between; align-items:baseline; line-height:1.1; }
        .bl-hp .lb { font-size:1.15rem; letter-spacing:2px; }
        .bl-hp .nm { font-size:1.45rem; text-shadow:0 2px 0 #fff; }
        .bl-hp .bar { margin-top:5px; height:15px; border-radius:8px; background:rgba(20,30,60,0.28); box-shadow:inset 0 2px 3px rgba(0,0,0,0.3); overflow:hidden; }
        .bl-hp .fl { height:100%; width:100%; border-radius:8px; background:linear-gradient(#8bf08f,#2e9d3a); transition:width 0.3s ease-out, background 0.3s; }
        .bl-hp.mid .fl { background:linear-gradient(#ffe86a,#e6b800); }
        .bl-hp.low .fl { background:linear-gradient(#ff8a80,#d32f2f); }
        .bl-hp.low { border-color:#ff5d5d; }
        .bl-hp.low .nm { color:#d32f2f; }
        .bl-hp.hurt { animation: hpHurt 0.4s ease-out; }
        .bl-hp.guard { animation: hpGuard 0.55s ease-out; }
        .bl-hp.heal { animation: hpHeal 0.7s ease-out; }
        @keyframes hpHurt { 0% { transform:translateX(0); } 20% { transform:translateX(-7px); } 40% { transform:translateX(7px); } 60% { transform:translateX(-4px); } 100% { transform:translateX(0); } }
        @keyframes hpGuard { 0% { box-shadow:0 0 0 0 rgba(79,195,247,0.9), 0 5px 0 rgba(20,60,100,0.7); } 100% { box-shadow:0 0 0 18px rgba(79,195,247,0), 0 5px 0 rgba(20,60,100,0.7); } }
        @keyframes hpHeal { 0% { transform:scale(1); filter:brightness(1); } 35% { transform:scale(1.12); filter:brightness(1.25); } 100% { transform:scale(1); filter:brightness(1); } }
        .bl-hurt { position:absolute; inset:0; z-index:40; pointer-events:none; background:radial-gradient(circle, rgba(255,60,60,0) 45%, rgba(220,30,30,0.5) 100%); animation: hurtFade 0.4s ease-out forwards; }
        @keyframes hurtFade { 0% { opacity:1; } 100% { opacity:0; } }
        .en .mon.atk { animation: monAtk 0.34s ease-out; }
        @keyframes monAtk { 0% { transform:translateY(0) scale(1); } 40% { transform:translateY(26px) scale(1.18); filter:brightness(1.3); } 100% { transform:translateY(0) scale(1); } }
        /* みぎの パネル: コインと つよさ */
        .cn { display:inline-block; width:1.05em; height:1.05em; border-radius:50%; vertical-align:-0.15em; background:radial-gradient(circle at 35% 30%,#fff6b0,#f5b800 70%); border:2px solid #c98600; box-sizing:border-box; box-shadow:0 1px 0 rgba(0,0,0,0.25); }
        .sp-coins { font-size:2.4rem; font-weight:900; line-height:1.05; color:#ffd24a; text-shadow:0 3px 0 #a35c00, 0 0 14px rgba(255,200,60,0.5); }
        .sp-coins.bump { animation: spBump 0.4s ease-out; }
        .sp-powers { flex:1; min-height:0; display:flex; flex-direction:column; }
        .sp-powers .sp-lb { flex-shrink:0; }
        #disp-powers { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding-right:2px; }
        #disp-powers .pws { display:flex; flex-wrap:wrap; gap:4px; }
        #disp-powers .pws span { padding:2px 9px; border-radius:10px; font-size:0.82rem; font-weight:900; color:#fff; background:rgba(255,255,255,0.18); border:2px solid rgba(255,214,100,0.55); }
        #disp-powers .pw.none { font-size:0.95rem; font-weight:700; opacity:0.6; padding:4px 6px; }
        #disp-powers .eq { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:12px; border:3px solid var(--kc); background:linear-gradient(180deg,var(--kg1),var(--kg2)); box-shadow:0 3px 0 var(--kd); color:#fff; }
        #disp-powers .eq.k-atk { --kc:#fff3d6; --kd:#b9741a; --kg1:#ffb347; --kg2:#ee8412; }
        #disp-powers .eq.k-guard { --kc:#dff0ff; --kd:#2a6fae; --kg1:#6bb6ff; --kg2:#2f7fd6; }
        #disp-powers .eq.k-hp { --kc:#ffe3df; --kd:#b94444; --kg1:#ff8a80; --kg2:#e0453a; }
        #disp-powers .eq.k-coin { --kc:#e2f7dc; --kd:#2f7d3a; --kg1:#6fd27a; --kg2:#3aa84a; }
        /* どうぐボタン(ポーション・つるぎのまい): HPの箱の下。canvasより上に置く */
        #bl-items { position:absolute; left:14px; top:92px; z-index:8; display:flex; gap:8px; width:236px; }
        #bl-items .ib { flex:1 1 0; min-width:0; display:flex; align-items:center; gap:4px; padding:4px 6px; border-radius:14px; border:3px solid #fff; cursor:pointer; font-family:inherit; color:#fff; box-shadow:0 4px 0 var(--kd); background:linear-gradient(180deg,var(--kg1),var(--kg2)); }
        #bl-items .ib:active { transform:translateY(3px); box-shadow:0 1px 0 var(--kd); }
        #bl-items .ib.k-potion { --kd:#b2377f; --kg1:#ff9fcf; --kg2:#e0489a; }
        #bl-items .ib.k-dance { --kd:#5b3fc0; --kg1:#b9a2ff; --kg2:#7a52e0; }
        #bl-items .ic { flex:0 0 30px; width:30px; height:30px; }
        #bl-items .ic svg { width:100%; height:100%; filter:drop-shadow(0 2px 0 rgba(0,0,0,0.25)); }
        #bl-items .tx { display:flex; flex-direction:column; line-height:1.1; text-align:left; min-width:0; }
        #bl-items .tx b { font-size:0.7rem; font-weight:900; white-space:nowrap; text-shadow:0 1px 0 rgba(0,0,0,0.35); }
        #bl-items .tx i { font-style:normal; font-size:1.05rem; font-weight:900; text-shadow:0 1px 0 rgba(0,0,0,0.35); }
        /* つるぎのまい: てふだが きらっと ひかる */
        .hc.dance { animation: hcDance 0.7s ease-out; }
        @keyframes hcDance { 0% { filter:brightness(1); box-shadow:0 0 0 0 rgba(160,120,255,0.9); } 35% { filter:brightness(1.35); box-shadow:0 0 0 14px rgba(160,120,255,0.0), 0 0 26px 8px rgba(190,150,255,0.9); } 100% { filter:brightness(1); box-shadow:0 0 0 0 rgba(160,120,255,0); } }
        /* ボスの「ため」: あかく ひかって ふるえる。ふきだしを 出す */
        .en .chg { display:none; position:absolute; text-align:center; font-weight:900; font-size:0.95rem; color:#fff; padding:2px 8px; border-radius:14px; background:linear-gradient(#ff7a5c,#d63a22); border:3px solid #fff; box-shadow:0 3px 0 #8a2412; white-space:nowrap; z-index:5; animation: chgPulse 0.5s ease-in-out infinite alternate; }
        .en.charging .chg { display:block; }
        .en.charging .mon { animation: monCharge 0.32s ease-in-out infinite alternate; filter:drop-shadow(0 0 14px #ff2a2a) brightness(1.2); }
        .en.charging .mon .glow { background:radial-gradient(circle, rgba(255,40,40,0.85) 0%, transparent 70%); }
        @keyframes chgPulse { from { transform:scale(1); } to { transform:scale(1.08); } }
        @keyframes monCharge { from { transform:translate(-3px,0) scale(1); } to { transform:translate(3px,-3px) scale(1.07); } }
        #disp-powers .eq .ic { flex:0 0 38px; width:38px; height:38px; }
        #disp-powers .eq .ic svg { width:100%; height:100%; filter:drop-shadow(0 2px 0 rgba(0,0,0,0.25)); }
        #disp-powers .eq .tx { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
        #disp-powers .eq b { font-size:0.95rem; font-weight:900; text-shadow:0 2px 0 rgba(0,0,0,0.3); }
        #disp-powers .eq span { font-size:0.85rem; font-weight:800; opacity:0.95; text-shadow:0 1px 0 rgba(0,0,0,0.3); }
        /* ショップ */
        #mb-shop { position:absolute; inset:0; z-index:245; background:hsl(calc(var(--h) + 8) 71.4% 11.0% / 0.78); display:flex; align-items:center; justify-content:center; }
        #mb-shop.hidden { display:none; }
        .mbs-box { position:relative; width:1000px; max-width:96%; box-sizing:border-box; padding:0 30px 20px; text-align:center; border-radius:34px; background:linear-gradient(180deg,#fffef4,#fff2c6); border:7px solid var(--gold); box-shadow:0 0 0 6px #fff, 0 22px 50px rgba(0,0,0,0.45), 0 0 60px rgba(255,200,60,0.5); animation: endPop 0.45s cubic-bezier(.2,1.4,.4,1); }
        .mbs-ribbon { display:inline-block; margin-top:-30px; padding:3px 46px 7px; border-radius:18px; border:6px solid #fff; color:#fff; font-size:2.3rem; font-weight:900; letter-spacing:4px; line-height:1.15; background:linear-gradient(to bottom,#ff9a5c,#e8503d); box-shadow:0 7px 0 #a82a18, 0 12px 20px rgba(0,0,0,0.3); text-shadow:0 3px 0 rgba(0,0,0,0.25); }
        .mbs-top { display:flex; align-items:center; justify-content:center; gap:14px; margin:14px 4px 16px; }
        .mbs-coins { display:flex; align-items:center; gap:8px; padding:5px 22px; border-radius:40px; background:#fff; border:3px solid #f0d78a; box-shadow:0 3px 0 #f0d78a; font-weight:900; color:#6a4a10; }
        .mbs-coins .cn { font-size:1.6rem; }
        .mbs-coins .lb { font-size:1rem; }
        .mbs-coins b { font-size:1.7rem; color:#d9682a; min-width:3ch; text-align:right; }
        .mbs-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
        .mbs-card { position:relative; display:flex; flex-direction:column; align-items:center; padding:16px 12px 12px; border-radius:22px; background:#fff; border:4px solid var(--kc,#cfc7a6); box-shadow:0 6px 0 var(--kd,#bfb48a); }
        .mbs-card.k-hp { --kc:#ef6b6b; --kd:#b94444; --kg1:#ff9a8f; --kg2:#e0453a; }
        .mbs-card.k-atk { --kc:#f4a23a; --kd:#b9741a; --kg1:#ffc060; --kg2:#ef8a14; }
        .mbs-card.k-guard { --kc:#4aa3e8; --kd:#2a6fae; --kg1:#7cc4ff; --kg2:#2f7fd6; }
        .mbs-card.k-coin { --kc:#4cba5a; --kd:#2f7d3a; --kg1:#7fdc8a; --kg2:#37a647; }
        .mbs-card.k-potion { --kc:#ee6fb0; --kd:#b2377f; --kg1:#ff9fcf; --kg2:#e0489a; }
        .mbs-card.k-dance { --kc:#9577ee; --kd:#5b3fc0; --kg1:#b9a2ff; --kg2:#7a52e0; }
        .mbs-swap { margin-top:6px; height:1.4em; line-height:1.4em; font-size:0.85rem; font-weight:800; color:#7a6a3a; }
        .mbs-card.sold { opacity:0.55; filter:grayscale(0.5); }
        .mbs-sale { position:absolute; top:-14px; right:-10px; transform:rotate(8deg); padding:2px 12px; border-radius:20px; background:linear-gradient(#ff6a4d,#d63a22); color:#fff; font-size:1.05rem; font-weight:900; border:3px solid #fff; box-shadow:0 3px 0 #8a2412; z-index:2; }
        .mbs-ic { width:112px; height:112px; display:flex; align-items:center; justify-content:center; }
        .mbs-ic svg { width:100%; height:100%; filter:drop-shadow(0 5px 0 rgba(0,0,0,0.16)); }
        .mbs-nm { margin-top:6px; font-size:1.45rem; font-weight:900; color:#3a2a10; line-height:1.2; }
        .mbs-ef { margin-top:8px; padding:6px 14px; min-width:80%; box-sizing:border-box; border-radius:14px; border:3px solid #fff; background:linear-gradient(180deg,var(--kg1,#ccc),var(--kg2,#999)); box-shadow:0 3px 0 var(--kd,#999); color:#fff; font-size:1.1rem; font-weight:900; text-shadow:0 2px 0 rgba(0,0,0,0.3); }
        .mbs-pr { margin-top:10px; display:flex; align-items:center; gap:6px; font-weight:900; color:#6a4a10; }
        .mbs-pr .cn { font-size:1.3rem; }
        .mbs-pr b { font-size:1.6rem; color:#d9682a; }
        .mbs-pr s { font-size:1rem; color:#9a8a6a; }
        .mbs-buy { margin-top:10px; width:100%; padding:8px 4px; border-radius:14px; border:3px solid #fff3b0; background:linear-gradient(180deg,#fff0a0 0%,#ffcb3d 48%,#f09a1a 100%); box-shadow:0 4px 0 #a35c00; color:#4a2800; font-family:inherit; font-size:1.2rem; font-weight:900; cursor:pointer; }
        .mbs-buy:active { transform:translateY(3px); box-shadow:0 1px 0 #a35c00; }
        .mbs-buy:disabled { background:#d9d3bd; border-color:#fff; color:#8a8366; box-shadow:0 4px 0 #b3ac8c; cursor:default; }
        .mbs-next { margin:16px auto 0; display:block; width:420px; padding:10px; border-radius:18px; border:4px solid #fff3b0; background:linear-gradient(180deg,#9be86a 0%,#4fc23a 55%,#2e9d3a 100%); box-shadow:0 6px 0 #1c6e24; color:#fff; font-family:inherit; font-size:1.5rem; font-weight:900; letter-spacing:3px; text-shadow:0 2px 0 rgba(0,0,0,0.3); cursor:pointer; animation: goBounce 1.2s ease-in-out infinite; }
        .mbs-next:active { transform:translateY(4px); box-shadow:0 2px 0 #1c6e24; }

        /* ==================== RUN END ==================== */
        #run-end-screen { position:absolute; inset:0; z-index:250; display:flex; flex-direction:column; justify-content:center; align-items:center; overflow:hidden; background:radial-gradient(circle at 50% 45%, hsl(calc(var(--h) + 2) 61.9% 41.2% / 0.82), hsl(calc(var(--h) + 8) 71.4% 11.0% / 0.94)); }
        #run-end-screen.over { background:radial-gradient(circle at 50% 45%, hsl(var(--h) 20.0% 29.4% / 0.84), hsl(calc(var(--h) + 3) 33.3% 8.2% / 0.95)); }
        .end-rays { position:absolute; left:50%; top:46%; width:1700px; height:1700px; margin:-850px 0 0 -850px; pointer-events:none; opacity:0.55;
            background:repeating-conic-gradient(from 0deg, rgba(255,220,100,0.30) 0deg 9deg, rgba(255,220,100,0) 9deg 22deg); animation: endSpin 40s linear infinite;
            -webkit-mask-image: radial-gradient(circle, #000 0, #000 18%, transparent 62%); mask-image: radial-gradient(circle, #000 0, #000 18%, transparent 62%); }
        #run-end-screen.over .end-rays { display:none; }
        @keyframes endSpin { to { transform: rotate(360deg); } }
        .end-confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
        .end-confetti i { position:absolute; top:-30px; width:14px; height:22px; border-radius:3px; animation: endFall linear infinite; }
        @keyframes endFall { 0% { transform:translateY(-40px) rotate(0); opacity:1; } 100% { transform:translateY(780px) rotate(720deg); opacity:0.9; } }
        .end-box { position:relative; width:900px; box-sizing:border-box; padding:0 34px 20px; text-align:center; border-radius:36px; background:linear-gradient(180deg,#fffef4,#fff2c6); border:7px solid var(--gold); box-shadow:0 0 0 6px #fff, 0 22px 50px rgba(0,0,0,0.45), 0 0 70px rgba(255,200,60,0.55); animation: endPop 0.6s cubic-bezier(.2,1.4,.4,1); }
        .end-box.over { background:linear-gradient(180deg,hsl(calc(var(--h) - 4) 38.5% 97.5%),hsl(calc(var(--h) - 8) 33.3% 90.0%)); border-color:hsl(calc(var(--h) - 9) 22.4% 64.1%); box-shadow:0 0 0 6px #fff, 0 22px 50px rgba(0,0,0,0.5); }
        @keyframes endPop { from { transform:scale(0.5); opacity:0; } to { transform:scale(1); opacity:1; } }
        .end-ribbon { display:inline-block; margin-top:-36px; padding:4px 50px 8px; border-radius:20px; border:6px solid #fff; color:#fff; font-size:3.1rem; font-weight:900; letter-spacing:4px; line-height:1.15;
            background:linear-gradient(to bottom,#ff9a5c,#e8503d); box-shadow:0 8px 0 #a82a18, 0 12px 20px rgba(0,0,0,0.3); text-shadow:0 4px 0 rgba(0,0,0,0.25); }
        .end-box.over .end-ribbon { background:linear-gradient(to bottom,hsl(calc(var(--h) - 8) 24.9% 64.5%),hsl(calc(var(--h) - 9) 21.5% 46.5%)); box-shadow:0 8px 0 hsl(calc(var(--h) - 8) 26.1% 32.4%), 0 12px 20px rgba(0,0,0,0.3); font-size:2.8rem; }
        .end-ribbon span { display:inline-block; animation: endBounce 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.08s); }
        .end-box.over .end-ribbon span { animation:none; }
        @keyframes endBounce { 0%,60%,100% { transform:translateY(0); } 30% { transform:translateY(-9px); } }
        .end-run { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:8px; font-size:1.35rem; font-weight:900; color:var(--ink); }
        .end-run .rn { background:#fff; border:3px solid #f0d78a; border-radius:50px; padding:2px 18px; box-shadow:0 3px 0 #f0d78a; }
        .end-journey { display:flex; align-items:flex-start; justify-content:center; margin:8px 0 4px; }
        .ej { position:relative; width:104px; }
        .ej::before { content:''; position:absolute; top:22px; left:-50%; width:100%; height:8px; background:#e0d8b6; z-index:0; }
        .ej:first-child::before { display:none; }
        .ej.ok::before { background:#ffc93d; }
        .ej .dot { position:relative; z-index:1; width:48px; height:48px; line-height:40px; margin:0 auto; border-radius:50%; border:4px solid #cfc7a6; background:#f4efd8; color:#a79f80; font-size:1.5rem; font-weight:900; }
        .ej.ok .dot { background:radial-gradient(circle at 35% 30%,#fff6b0,#f5b800 70%); border-color:#c98600; color:#7a4a00; box-shadow:0 0 14px rgba(255,200,60,0.8); }
        .ej.ng .dot { background:linear-gradient(#ff8a7a,#d63a22); border-color:#8a2412; color:#fff; }
        .ej .sc { margin-top:3px; font-size:1.0rem; font-weight:900; color:var(--ink-dim); min-height:1.2em; }
        .ej.ok .sc { color:#8a5a00; } .ej.ng .sc { color:#c0301c; }
        .end-stats { display:grid; grid-template-columns:1.3fr 1fr; gap:18px; margin:18px 0 8px; }
        .end-stat { position:relative; border-radius:26px; padding:8px 12px; border:5px solid #fff; }
        .end-stat .lb { font-size:1.25rem; font-weight:900; letter-spacing:1px; }
        .end-stat .vl { font-size:4.2rem; font-weight:900; line-height:1.05; margin-top:2px; }
        .end-stat .sb { font-size:1.1rem; font-weight:800; min-height:1.4em; }
        .end-stat.s1 { background:linear-gradient(160deg,#fff3bd,#ffd65a 60%,#ffb84a); box-shadow:0 6px 0 #d68900; color:#7a4a00; }
        .end-stat.s1 .vl { color:#b04a00; text-shadow:0 4px 0 rgba(255,255,255,0.8); }
        .end-stat.s2 { background:linear-gradient(160deg,hsl(calc(var(--h) - 6) 100.0% 94.5%),hsl(calc(var(--h) - 2) 100.0% 83.1%) 60%,hsl(calc(var(--h) - 1) 80.0% 68.6%)); box-shadow:0 6px 0 hsl(var(--h) 55.3% 46.5%); color:hsl(calc(var(--h) - 1) 60.0% 27.5%); }
        .end-stat.s2 .vl { color:hsl(calc(var(--h) + 2) 63.3% 33.1%); text-shadow:0 4px 0 rgba(255,255,255,0.75); font-size:3.2rem; }
        .end-stat .rec { position:absolute; top:-27px; right:6px; transform:rotate(8deg); background:linear-gradient(to bottom,#ff6a4d,#d63a22); color:#fff; font-size:1.15rem; font-weight:900; padding:3px 14px; border-radius:50px; border:3px solid #fff; box-shadow:0 3px 0 #8a2412; animation: endBadge 0.5s 1.2s cubic-bezier(.2,1.6,.4,1) both; }
        @keyframes endBadge { from { transform:scale(0); } to { transform:scale(1) rotate(8deg); } }
        .end-box.over .end-stat.s1 { background:linear-gradient(160deg,hsl(var(--h) 42.9% 98.6%),hsl(calc(var(--h) - 8) 30.6% 90.4%)); color:hsl(calc(var(--h) - 7) 18.9% 36.3%); box-shadow:0 6px 0 hsl(calc(var(--h) - 10) 17.4% 66.3%); }
        .end-box.over .end-stat.s1 .vl { color:hsl(calc(var(--h) - 7) 18.9% 36.3%); }
        .end-box.over .end-stat.s2 { background:linear-gradient(160deg,hsl(calc(var(--h) + 32) 55.6% 96.5%),hsl(calc(var(--h) + 32) 46.9% 87.5%)); box-shadow:0 6px 0 hsl(calc(var(--h) + 31) 29.3% 63.9%); color:hsl(calc(var(--h) + 30) 29.7% 29.0%); }
        .end-box.over .end-stat.s2 .vl { color:hsl(calc(var(--h) + 30) 34.0% 37.5%); }
        .end-btns { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:8px; }
        .end-btns .rs-mini { font-size:1.3rem; padding:10px 28px; }
        .end-btns .rs-mini.orange { background:linear-gradient(#ff9a5a,#e8602a); }

        /* ---- 九九ポーカーに合わせた RUN選択・結果の画面の部品 ---- */
        .ds-master-badge { position:relative; z-index:2; margin:0 0 2px; padding:3px 18px; border-radius:50px; font-weight:900; font-size:1.05rem; color:#5a3d00; background:linear-gradient(to bottom,#ffe27a,#ffc61a); border:3px solid #ffb300; box-shadow:0 3px 0 rgba(0,0,0,0.35); }
        .ds-master-badge.hidden { display:none; }
        .ds-master-badge { display:flex; align-items:center; gap:8px; }
        .ds-master-badge .rs-medal.mini { position:static; width:34px; height:27px; }
        .rs-go .go-st { display:block; font-size:1.2rem; line-height:1; letter-spacing:3px; color:#a35c00; text-shadow:0 1px 0 rgba(255,255,255,0.6); }
        .rs-go.has-st { flex-direction:column; gap:2px; height:auto; min-height:58px; padding:6px 0 7px; }
        .rs-card.sel .rs-body { padding-bottom:96px; }
        /* クリアした いちばん高い難易度を示す王冠(銅・銀・金) */
        .rs-medal { position:absolute; top:6px; right:8px; z-index:4; width:56px; height:44px; filter:drop-shadow(0 3px 0 rgba(0,0,0,0.4)); pointer-events:none; }
        .rs-medal svg { width:100%; height:100%; display:block; }
        .rs-medal.m1 { --c1:#e0a060; --c2:#b06a2a; --c3:#5a2e08; --c4:#ffd9b0; }
        .rs-medal.m2 { --c1:#eef2f6; --c2:#a8b4c2; --c3:#46535f; --c4:#ffffff; }
        .rs-medal.m3 { --c1:#ffd42e; --c2:#e8a800; --c3:#7a4a00; --c4:#fff6b0; filter:drop-shadow(0 3px 0 rgba(0,0,0,0.4)) drop-shadow(0 0 8px rgba(255,210,60,0.95)); }
        .rs-medal.m4 { --c1:#cdb0ff; --c2:#8f5be8; --c3:#2a0f5e; --c4:#f1e7ff; filter:drop-shadow(0 3px 0 rgba(0,0,0,0.4)) drop-shadow(0 0 9px rgba(170,120,255,0.95)); }
        .rs-medal.m5 { --c1:#ff9ad0; --c2:#ff4f9a; --c3:#5a0a3a; --c4:#fff0f7; filter:drop-shadow(0 3px 0 rgba(0,0,0,0.4)) drop-shadow(0 0 11px rgba(255,120,200,1)); animation: medalHue 3s linear infinite; }
        @keyframes medalHue { to { filter:drop-shadow(0 3px 0 rgba(0,0,0,0.4)) drop-shadow(0 0 11px rgba(255,120,200,1)) hue-rotate(360deg); } }
        /* シークレット★4(名人)・★5(伝説)の ボタン */
        .star-btn.secret4 { background:linear-gradient(#e9d8ff,#b48cf0); border-color:#2a0f5e; color:#2a0f5e; }
        .star-btn.secret4 small { color:#4a2a8a; }
        .star-btn.secret5 { background:linear-gradient(100deg,#ff9aa2,#ffd89a,#fff59a,#a8f0b0,#9ad0ff,#c9a6ff); border-color:#2a0f5e; color:#2a0f5e; }
        .star-btn.secret5 small { color:#4a2a8a; }
        .star-btn.secret4.active { background:linear-gradient(#ffe27a,#ffb724); color:#3b2d1a; border-color:#fff3b0; }
        .star-btn.secret4.active small { color:#7a6540; }
        .star-btn.secret5.active { color:#2a0f5e; border-color:#fff3b0; }
        .star-btn.secret4.cleared, .star-btn.secret5.cleared { color:#2a0f5e; }
        .star-btn { position:relative; }
        .star-btn.active { padding-top:14px; }
        .star-btn .pick { position:absolute; left:8px; top:3px; background:rgba(10,20,50,0.88); color:#ffe27a; font-style:normal; font-size:0.85rem; font-weight:900; letter-spacing:1px; padding:0 9px; border-radius:6px; white-space:nowrap; line-height:1.45; box-shadow:0 2px 0 rgba(0,0,0,0.4); text-shadow:none; }
        /* RUNの結果: 星・バッジ・スコア札の内訳 */
        .end-stars { display:flex; align-items:center; justify-content:center; gap:8px; margin:4px 0 0; }
        .end-stars b { font-size:2.8rem; line-height:1.05; color:#ffb800; text-shadow:0 3px 0 #b87800, 0 0 14px rgba(255,200,60,0.9); animation: endStar 0.5s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(0.5s + var(--i) * 0.16s); }
        .end-stars b.off { color:#d7d2bf; text-shadow:0 2px 0 #bdb8a4; animation:none; }
        .end-stars em { font-style:normal; font-size:1.9rem; font-weight:900; color:#b05a00; margin-left:10px; }
        @keyframes endStar { from { transform:scale(0) rotate(-90deg); opacity:0; } to { transform:scale(1) rotate(0); opacity:1; } }
        .end-badges { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; min-height:6px; margin:4px 0 0; }
        .end-badges span { font-size:1.3rem; font-weight:900; color:#fff; padding:3px 18px; border-radius:50px; border:3px solid #fff; background:linear-gradient(to bottom,#2fbf72,#188a4c); box-shadow:0 3px 0 #0f5f33; animation: endTag 0.5s 1.4s cubic-bezier(.2,1.6,.4,1) both; }
        @keyframes endTag { from { transform:scale(0); } to { transform:scale(1); } }
        .end-stat .vl small { font-size:1.6rem; margin-left:2px; }
        .end-stat .sb .bdi { display:inline-block; white-space:nowrap; }
        .end-stat .sb .bdp { display:inline-block; margin:0 6px; opacity:0.7; }
        .end-stat .sb b { font-weight:900; }
        .end-journey { margin:14px 0 8px; }
        .ej { flex:1 1 0; min-width:0; max-width:104px; }

        /* =====================================================================
           戦闘画面（新UI）: 紺のアリーナ＋ガラス調のサイドパネル。見た目はすべてCSS(DOM)。
           座標はゲームエリア内のpx。入力はcanvas(透明)が受ける
           ===================================================================== */
        canvas { position: relative; z-index: 5; }
        #game-layer { background: hsl(calc(var(--h) + 10) 69.7% 12.9%); }
        .sp-score.bump { animation: spBump 0.4s ease-out; }
        @keyframes spBump { 0% { transform:scale(1); } 35% { transform:scale(1.18); } 100% { transform:scale(1); } }
        .hc.tgt { border-color:hsl(calc(var(--h) - 21) 91.3% 63.9%); box-shadow:0 6px 0 hsl(calc(var(--h) - 20) 64.1% 45.9%), 0 0 0 5px hsl(calc(var(--h) - 21) 91.3% 63.9% / 0.75), 0 0 26px 8px hsl(calc(var(--h) - 21) 91.3% 63.9% / 0.8); }
        #game-area { position:relative; overflow:hidden; background-color:hsl(calc(var(--h) + 8) 65.2% 22.5%); --sc:#4caf50;
            background-image: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--sc) 46%, hsl(calc(var(--h) + 5) 60.0% 41.2%)) 0%, hsl(calc(var(--h) + 8) 64.3% 25.3%) 50%, hsl(calc(var(--h) + 10) 69.7% 12.9%) 100%); transition: background 0.4s; }
        #game-area::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: linear-gradient(hsl(calc(var(--h) - 14) 100.0% 79.4% / 0.06) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, hsl(calc(var(--h) - 14) 100.0% 79.4% / 0.06) 1px, transparent 1px) 0 0 / 44px 44px, radial-gradient(ellipse at 50% 34%, rgba(255,255,255,0.12), transparent 55%); }
        #game-area::after { content:''; position:absolute; left:0; right:0; top:0; height:6px; z-index:1; pointer-events:none; background: linear-gradient(90deg, transparent, var(--sc) 20%, var(--sc) 80%, transparent); box-shadow:0 0 14px var(--sc); }
        #game-area.bossfield { --sc:#e0405e; background-image: radial-gradient(ellipse at 50% 20%, #8a2060 0%, #411152 52%, #160629 100%); }
        #bl { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }

        /* ---- サイドパネル ---- */
        .ico { display:inline-flex; width:1.2em; height:1.2em; flex-shrink:0; }
        .ico svg { width:100%; height:100%; display:block; }
        #left-panel, #right-panel { flex:0 0 280px; width:280px; box-sizing:border-box; padding:12px; display:flex; flex-direction:column; gap:8px; color:#fff; z-index:5; position:relative; overflow:hidden;
            background:linear-gradient(180deg,hsl(calc(var(--h) + 6) 67.6% 35.1%) 0%,hsl(calc(var(--h) + 9) 71.4% 20.6%) 100%); box-shadow:none; }
        #left-panel { border-right:3px solid rgba(255,214,100,0.85); border-left:none; }
        #right-panel { border-left:3px solid rgba(255,214,100,0.85); border-right:none; }
        #left-panel::before, #right-panel::before { content:''; position:absolute; inset:0; pointer-events:none;
            background: linear-gradient(hsl(calc(var(--h) - 14) 100.0% 75.5% / 0.06) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, hsl(calc(var(--h) - 14) 100.0% 75.5% / 0.06) 1px, transparent 1px) 0 0 / 28px 28px; }
        #left-panel > *, #right-panel > * { position:relative; }
        #right-panel-content { display:flex; flex-direction:column; gap:9px; height:100%; min-height:0; }
        .sp-brand { display:flex; align-items:center; justify-content:center; gap:10px; height:40px; flex-shrink:0; border-radius:12px; font-size:1.2rem; font-weight:900; letter-spacing:5px; text-indent:5px; color:#4a2800; text-shadow:0 1px 0 rgba(255,255,255,0.55);
            border:2px solid #fff3b0; background:linear-gradient(180deg,#fff0a0 0%,#ffcb3d 55%,#f09a1a 100%); box-shadow:0 4px 0 #a35c00; }
        .sp-brand .ico { width:22px; height:22px; color:#7a4a00; }
        .sp-card { border-radius:14px; padding:9px 12px 10px; border:2px solid rgba(255,214,100,0.5); background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.25), 0 3px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.55); }
        .sp-lb { display:flex; align-items:center; gap:6px; font-size:0.82rem; font-weight:900; color:#ffd98a; letter-spacing:1px; margin-bottom:7px; }
        .sp-lb .ico { width:18px; height:18px; color:#ffd24a; }
        .sp-lb .rt-num { margin-left:auto; font-size:1.05rem; color:#fff; letter-spacing:0; text-shadow:0 2px 0 rgba(0,0,0,0.4); }
        .sp-star { padding:0 8px; border-radius:50px; font-size:0.8rem; color:#4a2800; background:linear-gradient(#fff0a0,#ffcb3d); letter-spacing:0; }
        .sp-mode { display:flex; gap:6px; justify-content:center; flex-shrink:0; }
        .sp-mode span { padding:3px 12px; border-radius:50px; font-size:0.85rem; font-weight:900; white-space:nowrap; }
        .sp-mode .rn { color:#fff; background:hsl(var(--h) 70% 42%); border:2px solid rgba(255,214,100,0.8); text-shadow:0 1px 0 rgba(0,0,0,0.4); }
        .sp-mode .df { color:#4a2800; background:linear-gradient(#fff0a0,#ffcb3d); border:2px solid #fff3b0; }
        .sp-player { display:flex; align-items:center; gap:10px; padding:8px 12px; }
        .sp-player .av { width:42px; height:42px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.35rem; font-weight:900; color:#6a3a00;
            background:radial-gradient(circle at 35% 30%,#fff3b8,#f5a21a); border:3px solid #fff3b0; box-shadow:0 3px 0 #a35c00; }
        .sp-player .who { min-width:0; flex:1; }
        .sp-player .sp-lb { margin:0 0 1px; font-size:0.72rem; }
        #disp-player-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.15rem; font-weight:900; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,0.4); }
        /* ステージの路線図 */
        .rt-list { position:relative; display:flex; flex-direction:column; gap:2px; }
        .rt-list::before { content:''; position:absolute; left:15px; top:14px; bottom:14px; width:3px; background:rgba(255,255,255,0.18); }
        .rt { position:relative; display:flex; align-items:center; gap:8px; height:26px; padding:0 8px 0 4px; border-radius:9px; font-size:0.84rem; font-weight:800; color:rgba(255,255,255,0.5); }
        .rt .no { flex:0 0 23px; height:23px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:900; background:hsl(calc(var(--h) + 8) 65.2% 30.4%); border:2px solid rgba(255,255,255,0.3); color:rgba(255,255,255,0.65); }
        .rt .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .rt.last .no { border-radius:7px; }
        .rt.done { color:rgba(255,255,255,0.72); }
        .rt.done .no { background:var(--rc); border-color:#fff; color:transparent; }
        .rt.done .no::after { content:''; width:9px; height:5px; border-left:3px solid #fff; border-bottom:3px solid #fff; transform:rotate(-45deg) translate(1px,-1px); }
        .rt.now { color:#fff; background:linear-gradient(90deg, rgba(255,214,100,0.34), rgba(255,214,100,0.08)); box-shadow:inset 0 0 0 2px rgba(255,214,100,0.9); }
        .rt.now .no { background:linear-gradient(#fff0a0,#ffcb3d); border-color:#fff; color:#5a3400; animation: pipNow 1.2s ease-in-out infinite; }
        .rt.now::after { content:''; position:absolute; right:9px; top:50%; margin-top:-6px; border-left:9px solid #ffd24a; border-top:6px solid transparent; border-bottom:6px solid transparent; animation: rtArrow 0.9s ease-in-out infinite; }
        @keyframes rtArrow { 0%,100% { transform:translateX(0); } 50% { transform:translateX(-4px); } }
        @keyframes pipNow { 0%,100% { box-shadow:0 0 0 0 rgba(255,214,100,0.8); } 50% { box-shadow:0 0 0 6px rgba(255,214,100,0); } }
        /* てきロボのならび */
        .foes { display:flex; align-items:flex-end; justify-content:center; gap:9px; height:62px; padding-top:12px; box-sizing:border-box; }
        .foes .ch { align-self:center; margin-bottom:6px; width:0; height:0; border-left:7px solid rgba(255,255,255,0.4); border-top:6px solid transparent; border-bottom:6px solid transparent; }
        .tk { position:relative; flex-shrink:0; width:46px; height:44px; border-radius:12px; background:linear-gradient(135deg,hsl(calc(var(--h) + 2) 76.9% 94.9%),hsl(calc(var(--h) + 1) 40.6% 72.9%) 55%,hsl(calc(var(--h) + 3) 27.4% 55.7%)); box-shadow:inset 0 -5px 0 rgba(0,0,0,0.16), 0 4px 0 rgba(0,0,0,0.35); transition: filter 0.3s, opacity 0.3s; }
        .tk::before { content:''; position:absolute; left:50%; top:-8px; width:3px; height:9px; margin-left:-1.5px; background:hsl(calc(var(--h) + 2) 27.2% 61.8%); }
        .tk::after { content:''; position:absolute; left:50%; top:-14px; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,var(--led)); box-shadow:0 0 8px var(--led); }
        .tk i { position:absolute; left:5px; right:5px; top:12px; height:21px; border-radius:8px; background:hsl(calc(var(--h) + 3) 65.6% 12.5%); box-shadow:inset 0 0 6px var(--led-soft); }
        .tk i::before, .tk i::after { content:''; position:absolute; top:5px; width:8px; height:11px; border-radius:3px; background:var(--led); box-shadow:0 0 8px var(--led); animation: rbLed 3s infinite; }
        .tk i::before { left:6px; } .tk i::after { right:6px; }
        .tk.now { animation: tkBob 1.1s ease-in-out infinite; box-shadow:0 0 0 3px rgba(255,214,100,0.95), 0 0 16px rgba(255,214,100,0.75), 0 4px 0 rgba(0,0,0,0.35); }
        @keyframes tkBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
        .tk.done { filter:grayscale(1) brightness(0.62); opacity:0.7; }
        .tk.done::after { background:#666; box-shadow:none; }
        .tk.done i::before, .tk.done i::after { top:9px; height:3px; background:#556; box-shadow:none; animation:none; }
        .tk.boss { width:62px; height:54px; background:linear-gradient(135deg,hsl(calc(var(--h) + 3) 60.8% 90.0%),hsl(calc(var(--h) + 3) 33.3% 61.8%) 55%,hsl(calc(var(--h) + 5) 28.2% 41.0%)); }
        .tk.boss::before { left:9px; top:-9px; width:8px; height:12px; margin:0; border-radius:4px; background:#ff5d5d; box-shadow:36px 0 0 #ff5d5d, 0 0 8px #ff5d5d; }
        .tk.boss::after { display:none; }
        .tk.boss i { top:14px; height:26px; background:#2a0808; box-shadow:inset 0 0 8px rgba(255,60,60,0.55); }
        .tk.boss i::before, .tk.boss i::after { top:6px; height:13px; width:11px; background:#ff4d4d; box-shadow:0 0 8px #ff4d4d; }
        .tk.boss i::before { left:8px; } .tk.boss i::after { right:8px; }
        .sp-sub { margin-top:6px; font-size:0.85rem; font-weight:800; color:hsl(var(--h) 100.0% 86.9%); display:flex; justify-content:space-between; }
        .sp-sub b { color:#fff; }
        .sp-spacer { flex:1; }
        .sp-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:0; box-sizing:border-box; font-family:inherit; font-weight:900; font-size:1rem; color:#fff; height:42px; flex-shrink:0; border-radius:12px; cursor:pointer; border:2px solid rgba(255,214,100,0.85);
            background:linear-gradient(180deg, hsl(calc(var(--h) + 6) 63.0% 36.1% / 0.9), hsl(calc(var(--h) + 8) 72.0% 19.6% / 0.94)); box-shadow:0 4px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.8), inset 0 1px 0 rgba(255,255,255,0.3); text-shadow:0 2px 0 rgba(0,0,0,0.45); -webkit-tap-highlight-color:transparent; }
        .sp-btn .ico { width:20px; height:20px; color:#ffd24a; }
        .sp-btn.hidden { display:none; }
        .sp-btn:hover { filter:brightness(1.2); }
        .sp-btn:active { transform:translateY(3px); box-shadow:0 1px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.8); }
        .sp-btn.red { background:linear-gradient(180deg, rgba(190,70,70,0.92), rgba(120,30,40,0.95)); }
        .sp-btn.red .ico { color:#fff; }
        .sp-score { font-size:2.8rem; font-weight:900; line-height:1.05; color:#ffe27a; text-shadow:0 3px 0 #a35c00, 0 0 18px rgba(255,200,60,0.6); }
        .sp-best { font-size:1.9rem; font-weight:900; line-height:1.1; color:#ff9a7a; text-shadow:0 2px 0 rgba(0,0,0,0.4); }
        .sp-score.bump { animation: spBump 0.4s ease-out; }
        @keyframes spBump { 0% { transform:scale(1); } 35% { transform:scale(1.18); } 100% { transform:scale(1); } }
        .sp-formula { display:flex; align-items:stretch; justify-content:space-between; gap:3px; }
        .sp-formula .t { flex:1; min-width:0; text-align:center; border-radius:10px; padding:5px 2px 4px; background:rgba(0,0,0,0.28); border:2px solid rgba(255,255,255,0.15); }
        .sp-formula .t .ico { display:flex; margin:0 auto 1px; width:20px; height:20px; color:#ffd24a; }
        .sp-formula .t b { display:block; font-size:1.4rem; line-height:1.1; font-weight:900; }
        .sp-formula .t span { display:block; margin-top:1px; font-size:0.62rem; font-weight:800; color:hsl(var(--h) 100.0% 86.9%); line-height:1.15; }
        .sp-formula .x { align-self:center; font-weight:900; font-size:1.1rem; color:#ffd24a; }
        .sp-eq { margin-top:8px; text-align:center; font-weight:900; font-size:0.95rem; color:hsl(var(--h) 100.0% 86.9%); }
        .sp-eq b { font-size:1.7rem; color:#ffd24a; text-shadow:0 2px 0 rgba(0,0,0,0.4); margin:0 2px; }
        .sp-formula b.bump, .sp-eq b.bump { animation: spBump 0.45s ease-out; }
        .sp-log { flex:1; min-height:0; display:flex; flex-direction:column; }
        .sp-log .sp-lb { flex-shrink:0; }
        #battle-log-entries { flex:1; overflow-y:auto; font-size:0.78rem; line-height:1.5; color:hsl(var(--h) 100.0% 92.9%); }
        #battle-log-entries .lg { padding:3px 7px; margin-bottom:4px; border-radius:8px; background:rgba(255,255,255,0.07); border-left:3px solid rgba(255,214,100,0.4); }
        #battle-log-entries .lg.latest { background:rgba(255,214,100,0.2); border-left-color:#ffd24a; color:#fff; font-weight:800; }
        #battle-log-entries .lg b { color:#ffd24a; }
        .lg svg, .bl-hint svg { width:1.05em; height:1.05em; vertical-align:-0.18em; color:#ffd24a; }
        .bl-hint svg { color:#fff; }
        .gs { display:inline-block; width:1em; height:1em; margin:0 0.03em; vertical-align:-0.12em; background:linear-gradient(#fff3a0,#ffc400 55%,#e69500); clip-path:polygon(50% 0,62% 35%,98% 36%,69% 58%,80% 94%,50% 72%,20% 94%,31% 58%,2% 36%,38% 35%); }

        /* ---- フィールド ---- */
        .bl-lane { position:absolute; left:14px; border-radius:20px; background:linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04)); border:2px solid rgba(255,255,255,0.22); box-shadow:inset 0 0 18px rgba(0,0,0,0.25); }
        .bl-cap { position:absolute; left:0; right:0; text-align:center; font-size:0.9rem; font-weight:900; color:#ffe9a8; text-shadow:0 2px 0 rgba(0,0,0,0.5); letter-spacing:1px; }
        .bl-cap b { display:inline-block; padding:0 16px; height:22px; line-height:22px; border-radius:50px; background:rgba(0,0,0,0.38); animation: capBob 1.8s ease-in-out infinite; }
        @keyframes capBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
        .bl-ap { position:absolute; left:16px; top:16px; width:88px; height:88px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
            background:radial-gradient(circle at 35% 28%, #ffffff 0%, hsl(calc(var(--h) + 3) 100.0% 93.7%) 55%, hsl(calc(var(--h) + 4) 55.8% 79.6%) 100%); border:5px solid #ffd24a; box-shadow:0 0 0 3px rgba(255,214,100,0.35), 0 6px 0 #a35c00, 0 10px 18px rgba(0,0,0,0.4); }
        .bl-ap .lb { font-size:0.75rem; font-weight:900; letter-spacing:1px; color:hsl(calc(var(--h) + 6) 28.0% 49.0%); }
        .bl-ap .nm { font-size:2.6rem; font-weight:900; color:hsl(calc(var(--h) + 6) 47.7% 29.2%); text-shadow:0 2px 0 #fff; }
        .bl-ap.low { border-color:#ff5d5d; animation: apLow 0.7s ease-in-out infinite; background:radial-gradient(circle at 35% 28%, #fff, #ffd5d5 60%, #ff9a9a 100%); }
        .bl-ap.low .nm { color:#d32f2f; }
        @keyframes apLow { 0%,100% { transform:scale(1); box-shadow:0 0 0 3px rgba(255,90,90,0.35), 0 6px 0 #8a1c1c; } 50% { transform:scale(1.1); box-shadow:0 0 0 8px rgba(255,90,90,0.25), 0 6px 0 #8a1c1c; } }
        .bl-ap.gain { animation: apGain 0.6s ease-out; }
        @keyframes apGain { 0% { transform:scale(1); } 35% { transform:scale(1.25); filter:brightness(1.3); } 100% { transform:scale(1); } }
        .bl-trash { position:absolute; left:0; right:0; bottom:0; background:repeating-linear-gradient(45deg, rgba(0,0,0,0.3) 0 14px, rgba(0,0,0,0.2) 14px 28px); border-top:3px dashed rgba(255,255,255,0.5); display:flex; align-items:center; justify-content:center; gap:10px; color:hsl(calc(var(--h) + 8) 100.0% 90.6%); font-size:1.15rem; font-weight:900; text-shadow:0 2px 0 rgba(0,0,0,0.5); transition: background-color 0.15s; }
        .bl-trash .ic { display:flex; width:30px; height:30px; }
        .bl-trash .ic svg { width:100%; height:100%; }
        .bl-trash.over { background:repeating-linear-gradient(45deg, rgba(229,90,90,0.65) 0 14px, rgba(200,60,60,0.65) 14px 28px); color:#fff; }
        .bl-trash.over .ic { animation: blShake 0.3s ease-in-out infinite; }
        @keyframes blShake { 0%,100% { transform:rotate(-12deg); } 50% { transform:rotate(12deg); } }
        .bl-hint { position:absolute; left:0; top:0; z-index:35; transform:translate(-50%,-100%); white-space:nowrap; padding:3px 12px 4px; border-radius:50px; font-size:1.05rem; font-weight:900; color:#fff; background:linear-gradient(hsl(calc(var(--h) + 5) 65.5% 53.3%),hsl(calc(var(--h) + 6) 68.5% 38.6%)); border:2px solid #fff; box-shadow:0 4px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.7); pointer-events:none; }
        .bl-hint.hit { background:linear-gradient(#ff8a3d,#e0501a); font-size:1.2rem; }
        .bl-hint.bad { background:linear-gradient(#7a7f96,#555a70); }
        .bl-hint.trash { background:linear-gradient(#e55a5a,#b03030); }

        /* ---- 手札カード ---- */
        .hc { position:absolute; left:0; top:0; box-sizing:border-box; border-radius:16px; border:4px solid hsl(calc(var(--h) + 5) 56.5% 86.5%); background:linear-gradient(180deg,#ffffff 0%,hsl(calc(var(--h) + 3) 100.0% 95.9%) 100%);
              box-shadow:0 6px 0 hsl(calc(var(--h) + 8) 40.9% 68.8%), 0 10px 14px hsl(calc(var(--h) + 20) 100.0% 2.0% / 0.4); transition: transform 0.18s cubic-bezier(.2,.9,.3,1.2); will-change: transform; overflow:hidden; text-align:center; }
        .hc.dragging { transition:none; z-index:20; box-shadow:0 14px 0 hsl(calc(var(--h) + 20) 100.0% 2.0% / 0.25), 0 22px 28px hsl(calc(var(--h) + 20) 100.0% 2.0% / 0.45); }
        .hc.pop { animation: hcPop 0.32s cubic-bezier(.2,1.4,.4,1); }
        @keyframes hcPop { from { opacity:0; scale:0.4; } to { opacity:1; scale:1; } }
        .hc .tp { position:absolute; left:0; right:0; top:5px; display:flex; justify-content:center; align-items:center; gap:1px; font-weight:900; line-height:1; }
        .hc .tp .sw { display:flex; }
        .hc .tp .sw svg { width:1.15em; height:1.15em; color:hsl(calc(var(--h) + 5) 27.3% 54.7%); }
        .hc.st2 .sw svg { color:#b8841c; } .hc.st3 .sw svg { color:#c05a10; } .hc.st4 .sw svg, .hc.st5 .sw svg { color:#6a35c0; }
        .hc .tp .mul { font-size:1.1rem; color:#e53935; text-shadow:0 1px 0 #fff; }
        .hc .nm { position:absolute; left:0; right:0; bottom:8px; font-weight:900; line-height:1; color:hsl(calc(var(--h) + 4) 37.0% 31.8%); text-shadow:0 3px 0 #fff, 0 4px 0 rgba(0,0,0,0.12); }
        .hc::after { content:''; position:absolute; top:-30%; bottom:-30%; width:34%; left:-70%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,0.75),transparent); opacity:0; }
        .hc.st2 { border-color:#ffd24a; background:linear-gradient(180deg,#fffdf0,#fff1b8); box-shadow:0 6px 0 #d9a21f, 0 0 18px 3px rgba(255,200,60,0.6), 0 10px 14px hsl(calc(var(--h) + 20) 100.0% 2.0% / 0.4); }
        .hc.st2 .nm { color:#7a4a00; }
        .hc.st3 { border-color:#ff9a3d; background:linear-gradient(180deg,#fff6e6,#ffd29a); box-shadow:0 6px 0 #d06a12, 0 0 22px 5px rgba(255,150,50,0.7), 0 10px 14px hsl(calc(var(--h) + 20) 100.0% 2.0% / 0.4); }
        .hc.st3 .nm { color:#8a3a00; }
        .hc.st4, .hc.st5 { border-color:#c07bff; background:linear-gradient(180deg,#f6ecff,#d7b4ff); box-shadow:0 6px 0 #7e3fd0, 0 0 26px 7px rgba(170,100,255,0.75), 0 10px 14px hsl(calc(var(--h) + 20) 100.0% 2.0% / 0.4); }
        .hc.st4 .nm, .hc.st5 .nm { color:#4a1f94; }
        .hc.st2::after, .hc.st3::after, .hc.st4::after, .hc.st5::after { opacity:1; animation: hcShine 2.6s ease-in-out infinite; }
        @keyframes hcShine { 0%,60% { left:-70%; } 100% { left:140%; } }

        /* ---- 敵 ---- */
        .en { position:absolute; left:0; top:0; width:0; height:0; }
        .en.dead { animation: enDead 0.5s ease-in forwards; transform-origin:50% 40%; }
        @keyframes enDead { to { opacity:0; transform:scale(1.25); filter:brightness(2.2); } }
        .en .gnd { position:absolute; height:22px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 70%); }
        .en .mon { position:absolute; animation: monBob 2.4s ease-in-out infinite; }
        .en .mon.hit { animation: monHit 0.45s ease-out; }
        @keyframes monBob { 0%,100% { transform:translateY(0) scale(1,1); } 50% { transform:translateY(-6px) scale(1.03,0.97); } }
        @keyframes monHit { 0% { transform:translateX(0); filter:brightness(2.4); } 20% { transform:translateX(-12px) rotate(-6deg); } 40% { transform:translateX(12px) rotate(6deg); filter:brightness(1.6); } 70% { transform:translateX(-5px); } 100% { transform:translateX(0); filter:none; } }
        .mon { --c:#9b59b6; --d:#6c3483; --led:color-mix(in srgb, var(--c) 45%, #9ff); filter: drop-shadow(0 8px 6px hsl(calc(var(--h) + 20) 100.0% 3.9% / 0.4)); }
        .mon .glow { position:absolute; inset:-10px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--c) 45%, transparent) 0%, transparent 68%); z-index:0; animation: monGlow 2.4s ease-in-out infinite; }
        @keyframes monGlow { 0%,100% { opacity:0.55; } 50% { opacity:1; } }
        .mon.boss .glow { inset:-20px; background:radial-gradient(circle, rgba(255,60,60,0.5) 0%, transparent 68%); }
        .bosslbl { position:absolute; transform:translateX(-100%); padding:0 10px; height:24px; line-height:20px; font-size:0.95rem; font-weight:900; letter-spacing:2px; color:#fff; border-radius:50px; border:2px solid #fff; background:linear-gradient(#ff6a5c,#c92a1c); box-shadow:0 2px 0 #7a1a10; text-shadow:0 1px 0 rgba(0,0,0,0.4); box-sizing:border-box; }
        .hp { position:absolute; height:20px; border-radius:9px; background:rgba(0,0,0,0.4); border:2px solid rgba(255,255,255,0.85); box-sizing:border-box; overflow:hidden; box-shadow:0 2px 0 hsl(calc(var(--h) + 20) 100.0% 2.0% / 0.4); }
        .hp .fl { position:absolute; left:0; top:0; bottom:0; border-radius:8px; background:linear-gradient(#7be07f,#2e9d3a); }
        .hp .fl.mid { background:linear-gradient(#ffe86a,#e6b800); } .hp .fl.low { background:linear-gradient(#ff8a80,#d32f2f); }
        .hp .tx { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:900; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.75); }
        .yc { position:absolute; box-sizing:border-box; border-radius:16px; border:4px solid #e6a82e; background:linear-gradient(180deg,#fffbe8 0%,#ffeeb4 100%); box-shadow:0 6px 0 #c5871a, 0 10px 14px hsl(calc(var(--h) + 20) 100.0% 2.0% / 0.4); text-align:center; }
        .yc .st { position:absolute; left:0; right:0; top:11%; line-height:1; white-space:nowrap; filter:drop-shadow(0 1px 0 rgba(120,80,0,0.45)); }
        .yc .nm { position:absolute; left:0; right:0; top:38%; font-weight:900; line-height:1.1; color:#4a3b22; text-shadow:0 3px 0 #fff; }
        .yc.roll { animation: ycRoll 0.4s cubic-bezier(.2,.9,.3,1.3); }
        @keyframes ycRoll { 0% { transform:rotateY(90deg); } 100% { transform:rotateY(0); } }
        .yc.match { border-color:#ff7a1a; animation: ycMatch 0.6s ease-in-out infinite; }
        @keyframes ycMatch { 0%,100% { box-shadow:0 6px 0 #c5871a, 0 0 0 4px rgba(255,140,40,0.85), 0 0 14px 4px rgba(255,160,60,0.7); transform:scale(1); } 50% { box-shadow:0 6px 0 #c5871a, 0 0 0 7px rgba(255,200,60,1), 0 0 28px 12px rgba(255,190,60,0.95); transform:scale(1.05); } }

        /* ---- エフェクト ---- */
        .fx-t { position:absolute; transform:translate(-50%,-100%); white-space:nowrap; font-weight:900; -webkit-text-stroke:6px hsl(calc(var(--h) + 6) 58.8% 19.0%); paint-order:stroke fill; text-shadow:0 3px 0 rgba(0,0,0,0.3); animation: fxFloat 1.15s ease-out forwards; z-index:30; }
        @keyframes fxFloat { 0% { transform:translate(-50%,-100%) scale(0.5); opacity:0; } 12% { transform:translate(-50%,-100%) scale(1.25); opacity:1; } 25% { transform:translate(-50%,-100%) scale(1); } 100% { transform:translate(-50%,-260%) scale(1); opacity:0; } }
        .fx-r { position:absolute; width:420px; height:420px; margin:-210px 0 0 -210px; border-radius:50%; border:9px solid; box-sizing:border-box; pointer-events:none; animation: fxRing 0.55s ease-out forwards; z-index:25; }
        @keyframes fxRing { from { transform:scale(0.05); opacity:1; } to { transform:scale(1); opacity:0; } }
        .fx-fly { position:absolute; left:0; top:0; z-index:40; pointer-events:none; transition: transform 0.3s cubic-bezier(.5,0,.9,.6), opacity 0.3s ease-in; }
        .bl-flash { position:absolute; inset:0; z-index:50; background:radial-gradient(circle, rgba(255,60,60,0.0) 30%, rgba(200,0,0,0.55) 100%); animation: blFlash 0.75s ease-out forwards; display:flex; align-items:center; justify-content:center; }
        .bl-flash b { font-size:2.6rem; font-weight:900; color:#fff; -webkit-text-stroke:8px #b71c1c; paint-order:stroke fill; letter-spacing:3px; }
        @keyframes blFlash { 0% { opacity:0; } 15% { opacity:1; } 100% { opacity:0; } }
    

        /* ==================== ランキング画面(RUN選択と同じ作り: 上=RUNカードの帯 / 下=記録の板) ==================== */
        #ranking-screen { justify-content:flex-start; padding:12px 22px 12px; z-index:120; color:#fff; background: var(--scene); }
        #ranking-screen::before { display:none; }
        .rk-stage { position:relative; z-index:2; width:100%; height:170px; flex-shrink:0; display:flex; align-items:center; }
        .rk-arrow { width:46px; height:74px; font-size:1.4rem; }
        #rk-strip { position:absolute; left:0; top:0; height:100%; display:flex; align-items:center; gap:14px; padding:18px; transition: transform 0.35s cubic-bezier(.2,.9,.3,1.15); }
        .rk-card { position:relative; width:150px; height:134px; flex-shrink:0; display:flex; flex-direction:column; border-radius:16px; cursor:pointer; overflow:hidden;
            border:2px solid rgba(255,214,100,0.7); background:linear-gradient(180deg, hsl(calc(var(--h) + 6) 63.0% 36.1% / 0.86), hsl(calc(var(--h) + 8) 72.0% 19.6% / 0.92));
            box-shadow:0 5px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.8), 0 12px 18px rgba(0,0,0,0.35); opacity:0.8; filter:saturate(0.8); transition: transform .2s, opacity .2s; }
        .rk-card.sel { opacity:1; filter:none; transform:translateY(-8px) scale(1.07); z-index:2; border-color:#fff3b0; box-shadow:0 5px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.8), 0 0 0 4px rgba(255,214,100,0.55), 0 0 26px 6px rgba(255,214,100,0.45), 0 16px 22px rgba(0,0,0,0.4); }
        .rk-card.locked { cursor:default; filter:saturate(0.3) brightness(0.6); }
        .rk-tab { height:36px; display:flex; align-items:center; justify-content:center; padding:0 6px; font-weight:900; font-size:1.05rem; letter-spacing:2px; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,0.5);
            background:linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 100%); border-bottom:2px solid rgba(255,214,100,0.8); }
        .rk-art { position:relative; flex:1; overflow:hidden; }
        .rk-art-in { position:absolute; left:0; top:0; width:244px; height:158px; transform:scale(0.6); transform-origin:0 0; }
        .rk-art-in .rs-art { height:158px; margin:0; border:none; border-radius:0; }
        .rk-panel { position:relative; z-index:2; flex:1; min-height:0; width:100%; margin-top:10px; display:flex; flex-direction:column; padding:10px 16px; border-radius:18px; border:2px solid rgba(255,214,100,0.85);
            background:linear-gradient(180deg, hsl(calc(var(--h) + 6) 65.8% 29.8% / 0.92), hsl(calc(var(--h) + 8) 75.0% 15.7% / 0.95)); box-shadow:0 4px 0 hsl(calc(var(--h) + 8) 78.9% 11.2% / 0.8), inset 0 1px 0 rgba(255,255,255,0.25); }
        .rk-ctrl { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px; flex-shrink:0; }
        .rk-seg { display:flex; gap:5px; padding:4px; background:rgba(0,0,0,0.28); border:2px solid rgba(255,214,100,0.5); border-radius:14px; }
        .rk-seg button { font-family:inherit; font-weight:900; font-size:1.08rem; padding:6px 20px; border-radius:10px; border:2px solid transparent; background:transparent; color:#e8e4cf; cursor:pointer; white-space:nowrap; }
        .rk-seg button:hover { color:#fff; }
        .rk-seg button.on { background:linear-gradient(180deg,#fff0a0 0%,#ffcb3d 55%,#f09a1a 100%); color:#4a2800; border-color:#fff3b0; box-shadow:0 3px 0 #a35c00; }
        .rk-head, .rk-row { display:grid; grid-template-columns:62px minmax(0,1fr) 80px 150px 120px 128px; align-items:center; column-gap:12px; padding:0 14px; }
        .rk-head { height:24px; flex-shrink:0; font-size:.85rem; font-weight:800; color:rgba(255,226,122,0.8); letter-spacing:1px; }
        .rk-head .r, .rk-row .r { text-align:right; } .rk-head .c { text-align:center; }
        .rk-list { flex:1; min-height:0; overflow-y:auto; list-style:none; margin:0; padding:2px 6px 6px 0; scrollbar-width:thin; scrollbar-color:#f2b84a rgba(0,0,0,0.3); touch-action:pan-y; }
        .rk-row { height:40px; margin-bottom:6px; border-radius:12px; border:2px solid rgba(255,214,100,0.55); background:linear-gradient(180deg,#fffdf0,#fff0c8); box-shadow:0 3px 0 rgba(0,0,0,0.35); color:#3b2d1a; font-weight:800; }
        .rk-row.r1 { background:linear-gradient(#fff3b0,#ffd95e); height:46px; border-color:#fff3b0; }
        .rk-row.r2 { background:linear-gradient(#f6f8f9,#d5dce1); }
        .rk-row.r3 { background:linear-gradient(#ffe6cc,#efb68a); }
        .rk-row.me { box-shadow:0 3px 0 rgba(0,0,0,0.35), 0 0 0 3px #4aa3ee; }
        .rk-no { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.05rem; color:#6a5530; background:#ead9ae; border:2px solid rgba(0,0,0,0.5); }
        .r1 .rk-no { background:radial-gradient(circle at 35% 30%,#fff6b0,#ffc91f); color:#5a3d00; width:36px; height:36px; font-size:1.2rem; }
        .r2 .rk-no { background:radial-gradient(circle at 35% 30%,#fff,#b8c2c9); color:#3e4a52; }
        .r3 .rk-no { background:radial-gradient(circle at 35% 30%,#ffd9b3,#d8894f); color:#5a2e10; }
        .rk-name { font-size:1.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .rk-star { justify-self:center; padding:1px 12px; border-radius:50px; background:rgba(20,30,60,0.88); color:#ffe27a; font-size:.98rem; font-weight:900; }
        .rk-res { justify-self:center; padding:2px 14px; border-radius:50px; border:2px solid rgba(0,0,0,0.5); font-size:.95rem; font-weight:900; color:#fff; background:#7a8a96; }
        .rk-res.clear { background:linear-gradient(#ffb84a,#ee7a1a); }
        .rk-score { font-size:1.5rem; font-weight:900; color:#c2501e; text-align:right; font-variant-numeric:tabular-nums; }
        .r1 .rk-score { font-size:1.65rem; }
        .rk-sub { font-size:.98rem; color:#6a5530; text-align:right; white-space:nowrap; }
        .rk-empty { margin:22px auto 0; text-align:center; color:#e8e4cf; }
        .rk-empty b { display:block; font-size:1.5rem; color:#fff; margin-bottom:6px; } .rk-empty span { font-size:1.05rem; }
        .rk-chip { width:74px; height:74px; margin:0 auto 12px; border-radius:50%; background:radial-gradient(circle,#ffb84a 0 42%,#fff 43% 52%,#ffb84a 53% 68%,#fff 69% 74%,#ffb84a 75%); border:4px solid rgba(0,0,0,0.5); box-shadow:0 5px 0 rgba(0,0,0,0.4); opacity:.85; }
        .rk-loading { margin:40px auto 0; text-align:center; color:#fff; font-size:1.3rem; font-weight:800; letter-spacing:2px; }