@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
        
        :root {
            /* アニメ公式サイト風のポップでサイバーなカラーパレット */
            --primary-accent: #8b5cf6;
            --secondary-accent: #ec4899;
            --accent-cyan: #38bdf8;
            --accent-glow: rgba(236, 72, 153, 0.45);
            --soul-gold: #facc15;
            --bg-darker: #080414;
            --panel-glass: rgba(24, 18, 48, 0.82);
            --header-h: 52px; 
            --table-felt: #172554;
            --tile-w: 26.4px; 
            --tile-h: 37.4px; 
            --discard-tile-w: 26.4px;
            --discard-tile-h: 37.4px;
            --discard-gap: 2px;
            --discard-row-gap: 3px;
            --avatar-size: clamp(74px, 18vw, 96px); 
            --table-shift-y: 80px;
        }
        
        * { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
        
        /* 多層グラデーションの華やかな背景 */
        body { 
            background-color: var(--bg-darker); 
            color: #f8fafc; 
            font-family: 'Noto Sans JP', sans-serif; 
            height: 100vh; 
            height: 100dvh; 
            display: flex; 
            flex-direction: column; 
            overflow: hidden; 
            background-image:
                radial-gradient(circle at 20% 0%, rgba(236, 72, 153, 0.22) 0%, transparent 34%),
                radial-gradient(circle at 85% 12%, rgba(56, 189, 248, 0.2) 0%, transparent 38%),
                radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.2) 0%, transparent 45%),
                linear-gradient(180deg, #12071f 0%, #080414 50%, #020617 100%);
        }
        
        header { 
            height: var(--header-h); 
            padding: 0 16px; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            background: rgba(18, 7, 31, 0.85); 
            backdrop-filter: blur(12px); 
            z-index: 300; 
            flex-shrink: 0; 
            box-shadow: 0 4px 20px rgba(0,0,0,0.5); 
            padding-top: env(safe-area-inset-top); 
            position: relative;
        }
        
        /* ヘッダー境界線のネオン感 */
        header::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, rgba(236,72,153,0.5), rgba(139,92,246,0.5), rgba(56,189,248,0.5));
        }

        .game-logo { font-size: 1.2rem; color: #fff; font-weight: 900; letter-spacing: 2px; margin: 0; display: flex; align-items: baseline; gap: 6px; }
        .game-logo-sub { font-size: 0.6rem; color: var(--accent-cyan); font-weight: 700; letter-spacing: 1px; }
        .nav-actions { display: flex; gap: 8px; }
        .nav-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); color: #94a3b8; padding: 6px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: 0.2s; }
        .nav-btn:hover { color: #fff; border-color: var(--accent-cyan); background: rgba(56, 189, 248, 0.1); }
        
        main { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; width: 100%; }

        /* ==========================================
            画面切り替え：ロビー / 対局画面
        ========================================== */
        #view-lobby {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 10px 20px;
            overflow-y: auto;
            z-index: 10;
            position: relative;
        }

        #view-game {
            display: none;
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            flex-direction: column;
        }

        body.in-game #view-lobby { display: none !important; }
        body.in-game #view-game { display: flex !important; }
        body:not(.in-game) #view-lobby { display: flex !important; }
        body:not(.in-game) #view-game { display: none !important; }

        .board-zone { flex: 1; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 4px 0 152px 0; }

        /* --- LOBBY UI --- */
        .lobby-inner {
            width: 100%;
            max-width: 400px; /* アイコンを少し小さく見せるために全体幅を絞る */
            position: relative;
            top: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .glass-card { 
            background: var(--panel-glass); 
            padding: 18px; 
            border-radius: 12px; 
            border: 1px solid rgba(139, 92, 246, 0.2); 
            width: 100%; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.6); 
            backdrop-filter: blur(10px); 
            margin-bottom: 20px; 
            position: relative; 
            z-index: 1; 
        }

        /* 顔が見えるキャラカード式 UI */
        .chara-grid { 
            display: grid; 
            grid-template-columns: repeat(2, minmax(0, 1fr)); 
            gap: 16px; 
            margin: 10px 0; 
        }
        
        .chara-card { 
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            padding: 8px;
            background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)), rgba(24, 18, 48, 0.82);
            border: 1px solid rgba(255,255,255,0.12);
            box-shadow: 0 8px 22px rgba(0,0,0,0.45);
            cursor: pointer; 
            transition: 0.2s; 
        }
        .chara-card.selected { 
            border-color: rgba(250, 204, 21, 0.9);
            box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.22), 0 0 26px rgba(236, 72, 153, 0.42), 0 10px 28px rgba(0,0,0,0.55);
            transform: translateY(-2px);
        }
        .chara-card .img-box { 
            width: 100%; 
            aspect-ratio: 4 / 5; /* 縦横比を少し正方形寄りに */
            overflow: hidden; 
            border-radius: 12px; 
            background: rgba(15, 23, 42, 0.7); 
        }
        .chara-card img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            transform: none !important;
        }

        /* キャラごとの顔位置微調整 */
        .chara-grid .chara-card:nth-child(1) img { object-position: center 16%; }
        .chara-grid .chara-card:nth-child(2) img { object-position: center 18%; }
        .chara-grid .chara-card:nth-child(3) img { object-position: center 14%; }
        .chara-grid .chara-card:nth-child(4) img { object-position: center 18%; }
        .chara-grid .chara-card:nth-child(5) img { object-position: center 16%; }
        .chara-grid .chara-card:nth-child(6) img { object-position: center 18%; }
        
        .select-badge { 
            background: linear-gradient(135deg, #facc15, #ec4899);
            color: #020617;
            position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; box-shadow: 0 2px 5px rgba(0,0,0,0.5); z-index: 10; 
        }
        .chara-card.selected .select-badge { display: flex; }
        .chara-card span, .chara-card .name { 
            display: block; margin-top: 8px; text-align: center; font-size: 0.92rem; font-weight: 900; color: #f8fafc; text-shadow: 0 0 8px rgba(236,72,153,0.35); 
        }
        
        /* 対局開始ボタンを特別に派手にする */
        #startMatchBtn { 
            width: min(100%, 280px);
            padding: 14px; 
            background: linear-gradient(135deg, #facc15 0%, #ec4899 48%, #8b5cf6 100%);
            color: #fff; 
            border: 1px solid rgba(255,255,255,0.35);
            box-shadow: 0 10px 28px rgba(236,72,153,0.38), 0 0 24px rgba(250,204,21,0.25);
            border-radius: 999px;
            font-weight: 900; font-size: 1.1rem; letter-spacing: 2px; cursor: pointer; transition: 0.3s; position: relative; z-index: 100; 
            margin: 0 auto;
            display: block;
        }
        .btn-primary { width: 100%; max-width: 440px; padding: 14px; border-radius: 10px; background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%); color: white; font-weight: 900; font-size: 1.1rem; letter-spacing: 2px; cursor: pointer; transition: 0.3s; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4); position: relative; z-index: 100; }
        #startMatchBtn:active:not(:disabled), .btn-primary:active:not(:disabled) { transform: scale(0.98); }
        #startMatchBtn:disabled, .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(1); box-shadow: none; }

        .mahjong-learning-links {
            width: min(100%, 760px);
            margin: 0 auto;
            padding: 16px;
            border-radius: 12px;
            border: 1px solid rgba(139, 92, 246, 0.22);
            background: rgba(15, 23, 42, 0.62);
            box-shadow: 0 10px 24px rgba(0,0,0,0.32);
            color: #dbeafe;
        }
        .mahjong-learning-links h2 {
            margin: 0 0 8px;
            font-size: 1rem;
            color: #fff;
            font-weight: 900;
        }
        .mahjong-learning-links p {
            margin: 0 0 10px;
            font-size: 0.84rem;
            line-height: 1.7;
            color: #cbd5e1;
        }
        .mahjong-learning-links ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .mahjong-learning-links a {
            display: block;
            min-height: 38px;
            padding: 8px 10px;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(24, 18, 48, 0.72);
            color: #e0f2fe;
            text-decoration: none;
            font-size: 0.82rem;
            font-weight: 900;
        }
        .mahjong-learning-links a:hover {
            color: #fff;
            border-color: var(--accent-cyan);
            background: rgba(56, 189, 248, 0.1);
        }

        /* --- GAME ENGINE UI --- */
        .game-hud { position: absolute; top: 8px; right: 8px; z-index: 500; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
        .hud-btn { background: rgba(24, 18, 48, 0.85); border: 1px solid rgba(255, 255, 255, 0.2); padding: 5px 9px; border-radius: 6px; font-size: 0.65rem; color: #cbd5e0; font-weight: 900; cursor: pointer; backdrop-filter: blur(5px); transition: 0.2s; }
        .hud-auto-btn { width: 100%; min-width: 104px; text-align: center; }
        .hud-btn.active { background: linear-gradient(135deg, #8b5cf6, #ec4899); border-color: #facc15; color: white; box-shadow: 0 0 15px rgba(236, 72, 153, 0.5); }
        .speed-bar { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 104px; background: rgba(0,0,0,0.7); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 2px; }
        .speed-opt { padding: 4px 8px; border-radius: 4px; font-size: 0.62rem; color: #64748b; font-weight: 900; cursor: pointer; transition: 0.2s; }
        .speed-opt.active { background: var(--primary-accent); color: #fff; }

        .mahjong-table { width: calc(100vw - 4px); max-width: 560px; aspect-ratio: 1 / 1; background: radial-gradient(circle, #1a365d 0%, #0f172a 100%); border: 4px solid #1e293b; border-radius: 10px; position: relative; box-shadow: inset 0 0 60px rgba(0,0,0,0.8), 0 10px 30px rgba(0,0,0,0.9); transform: translateY(var(--table-shift-y)); }
        .central-block { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(118px, 31vw, 148px); height: clamp(118px, 31vw, 148px); border-radius: 16px; background: radial-gradient(circle at center, rgba(15,23,42,0.98), rgba(2,6,23,0.96)); border: 2px solid rgba(251,191,36,0.45); box-shadow: inset 0 0 24px rgba(251,191,36,0.12), 0 0 24px rgba(0,0,0,0.65); position: absolute; z-index: 15; pointer-events: none; }
        .score-box { position: absolute; display: flex; align-items: center; justify-content: center; padding: 2px 4px; }
        .score-box span { font-size: clamp(10px, 2.9vw, 14px); letter-spacing: 0.5px; white-space: nowrap; }
        .active-turn-score { color: #fff; text-shadow: 0 0 10px var(--soul-gold), 0 0 5px var(--soul-gold); }
        .center-info { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; padding: 4px 6px; gap: 4px; }
        #roundInfo { font-size: clamp(10px, 2.8vw, 12px); color: rgba(229,231,235,0.92); letter-spacing: 0.1em; font-weight: 700; }
        .center-info .text-white { font-size: clamp(12px, 3.4vw, 14px); font-weight: 900; }
        .center-info .text-yellow-500 { font-size: clamp(10px, 2.8vw, 11px); }
        .s-top { top: 8%; left: 50%; transform: translateX(-50%) rotate(180deg); transform-origin: center; }
        .s-left { top: 50%; left: 8%; transform: translateY(-50%) rotate(90deg); transform-origin: center; }
        .s-right { top: 50%; right: 8%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; }
        .s-bot { bottom: 8%; left: 50%; transform: translateX(-50%); }

        .dora-panel { position: absolute; top: 6px; left: 6px; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; z-index: 40; }
        .dora-label { font-size: 9px; color: var(--soul-gold); font-weight: 900; letter-spacing: 1px; text-align: center; line-height: 1; }
        
        .riichi-stick-layer { position: absolute; inset: 0; pointer-events: none; z-index: 25; }
        .kyotaku-stick-area { position: absolute; left: 50%; top: calc(50% + clamp(64px, 17vw, 84px)); transform: translateX(-50%); display: none; align-items: center; gap: 4px; background: rgba(0,0,0,0.5); border: 1px solid rgba(251,191,36,0.25); border-radius: 999px; padding: 3px 7px; color: #fbbf24; font-size: 10px; font-weight: 900; z-index: 30; }

        /* --- 点棒 --- */
        .stick { width: 48px; height: 10px; border-radius: 999px; background: linear-gradient(180deg, #ffffff 0%, #e5e7eb 55%, #cbd5e1 100%); border: 1px solid rgba(15, 23, 42, 0.45); position: relative; display: inline-block; box-shadow: inset 0 1px 1px rgba(255,255,255,0.95), inset 0 -1px 2px rgba(0,0,0,0.22), 0 2px 4px rgba(0,0,0,0.45); overflow: hidden; }
        .stick::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 2; }
        .stick::after { content: ""; position: absolute; top: 50%; left: 8px; right: 8px; height: 2px; transform: translateY(-50%); border-radius: 999px; opacity: 0.85; z-index: 1; }
        .stick-100::before { background: #111827; }
        .stick-100::after { background: repeating-linear-gradient(90deg, #111827 0 4px, transparent 4px 8px); }
        .stick-1000::before { background: #dc2626; }
        .stick-1000::after { background: #dc2626; }
        .stick-5000::before { background: #2563eb; }
        .stick-5000::after { background: #2563eb; }
        .stick-10000::before { background: #f59e0b; }
        .stick-10000::after { background: #f59e0b; }
        .stick-mini { width: 40px; height: 9px; }
        
        .stick-riichi { position: absolute; width: 42px; height: 9px; display: none; z-index: 20; }
        .stick-riichi::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(180deg, #ffffff 0%, #e5e7eb 55%, #cbd5e1 100%); border: 1px solid rgba(15, 23, 42, 0.45); box-shadow: inset 0 1px 1px rgba(255,255,255,0.95), inset 0 -1px 2px rgba(0,0,0,0.22), 0 2px 4px rgba(0,0,0,0.45); z-index: 1; }
        .stick-riichi::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #dc2626; transform: translate(-50%, -50%); box-shadow: -12px 0 0 -2px #dc2626, 12px 0 0 -2px #dc2626; z-index: 2; }
        .stick-row { display: flex; justify-content: center; align-items: center; gap: 5px; flex-wrap: wrap; }
        .stick-result-area { display: flex; justify-content: center; align-items: center; gap: 5px; margin: 15px 0; flex-wrap: wrap; min-height: 18px; }

        .riichi-pos-0 { bottom: 30%; left: 50%; transform: translateX(-50%); }
        .riichi-pos-1 { right: 30%; top: 50%; transform: translateY(-50%) rotate(-90deg); }
        .riichi-pos-2 { top: 30%; left: 50%; transform: translateX(-50%) rotate(180deg); }
        .riichi-pos-3 { left: 30%; top: 50%; transform: translateY(-50%) rotate(90deg); }

        /* --- 牌表示 --- */
        .mahjong-tile {
            position: relative;
            width: var(--tile-w);
            height: var(--tile-h);
            flex: 0 0 var(--tile-w);
            background-color: #f8fafc;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.9);
            display: inline-block;
            transition: transform 0.2s, box-shadow 0.2s;
            vertical-align: middle;
        }
        /* tiles.html の .tile-symbol と同じスプライト表示を使う */
        .tile-sprite {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('./mahjong_tiles.png');
            background-repeat: no-repeat;
            pointer-events: none;
            transform: none;
        }
        .tile-back { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%) !important; border: 1px solid #78350f !important; }
        .tile-recommend { box-shadow: 0 0 12px 2px rgba(59, 130, 246, 0.8) !important; transform: translateY(-3px); }
        .tile-dora { box-shadow: 0 0 12px 2px rgba(239, 68, 68, 0.8) !important; }
        .tile-rotated { transform: rotate(-90deg); margin: 0 4px; }
        .tile-white-dragon { background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important; border: 1px solid rgba(148, 163, 184, 0.45); }
        .white-dragon-mark { display: none !important; }

        .discard-area {
            position: absolute;
            z-index: 35;
            pointer-events: none;
            max-width: 100%;
        }

        .discard-river {
            display: grid;
            grid-template-columns: repeat(6, var(--discard-tile-w));
            grid-auto-rows: var(--discard-tile-h);
            column-gap: var(--discard-gap);
            row-gap: var(--discard-row-gap);
            align-items: center;
            justify-items: center;
            justify-content: center;
            width: min(calc((var(--discard-tile-w) * 6) + (var(--discard-gap) * 5)), 100%);
            min-height: calc((var(--discard-tile-h) * 3) + (var(--discard-row-gap) * 2));
        }

        .discard-tile,
        .discard-river .mahjong-tile {
            width: var(--discard-tile-w);
            height: var(--discard-tile-h);
            flex: 0 0 var(--discard-tile-w);
            display: block;
            margin: 0;
            padding: 0;
        }

        .discard-river .tile-rotated {
            margin: 0;
        }

        .discard-tile.is-riichi {
            transform: rotate(90deg);
            transform-origin: center;
        }

        .discard-area-bottom {
            left: 50%;
            bottom: clamp(28px, 8vw, 56px);
            transform: translateX(-50%);
        }

        .discard-area-top {
            left: 50%;
            top: clamp(28px, 8vw, 56px);
            transform: translateX(-50%) rotate(180deg);
            transform-origin: center;
        }

        .discard-area-left {
            left: 18px;
            top: 50%;
            transform: translateY(-50%) rotate(90deg);
            transform-origin: center;
        }

        .discard-area-right {
            right: 18px;
            top: 50%;
            transform: translateY(-50%) rotate(-90deg);
            transform-origin: center;
        }

        .meld-area { position: absolute; display: flex; gap: 2px; }
        #meld-0 { bottom: 5px; right: 5px; transform-origin: bottom right; transform: scale(0.75); }
        #meld-1 { right: 5px; top: 5px; transform-origin: top right; transform: scale(0.75) rotate(-90deg); }
        #meld-2 { top: 5px; left: 5px; transform-origin: top left; transform: scale(0.75) rotate(180deg); }
        #meld-3 { left: 5px; bottom: 5px; transform-origin: bottom left; transform: scale(0.75) rotate(90deg); }

        /* --- アバター --- */
        #allPlayersUI { position: absolute; inset: 0; pointer-events: none; z-index: 180; }
        .player-card { position: absolute; width: var(--avatar-size); display: flex; flex-direction: column; align-items: center; pointer-events: auto; }
        .avatar-frame { width: var(--avatar-size); height: var(--avatar-size); border-radius: 16px; border: 2px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.5); overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.75), inset 0 0 18px rgba(255,255,255,0.05); transition: 0.3s; }
        .player-card.active-player .avatar-frame { border-color: var(--soul-gold); box-shadow: 0 0 20px rgba(251,191,36,0.55), 0 8px 24px rgba(0,0,0,0.85); }
        .avatar-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: scale(1.6); }
        .p-pos-2 { top: -8%; left: 50%; transform: translateX(-50%); }
        .p-pos-3 { bottom: 18%; left: 8%; transform: none; }
        .p-pos-1 { bottom: 18%; right: 8%; transform: none; }
        .name-tag { background: linear-gradient(180deg, rgba(30,41,59,0.95), rgba(15,23,42,0.95)); color: #fff; font-size: clamp(11px, 3vw, 13px); font-weight: 900; padding: 3px 10px; border-radius: 6px; margin-top: -8px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 2px 8px rgba(0,0,0,0.5); z-index: 2; max-width: 100%; white-space: nowrap; }

        /* --- 手牌エリア --- */
        .footer-hand { 
            position: fixed; 
            bottom: 0; 
            left: 0; 
            width: 100%; 
            background: rgba(18, 7, 31, 0.85); 
            backdrop-filter: blur(12px); 
            padding: 12px 2px 0; 
            z-index: 250; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            box-shadow: 0 -4px 20px rgba(0,0,0,0.5); 
            overflow: visible;
            position: relative;
            padding-bottom: env(safe-area-inset-bottom);
        }
        
        /* フッター上部のネオンボーダー */
        .footer-hand::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, rgba(236,72,153,0.5), rgba(139,92,246,0.5), rgba(56,189,248,0.5));
        }
        
        .footer-hand .text-[10px], #myWind, #beginnerAdvice { font-size: 13px !important; z-index: 1; }
        .beginner-advice {
            position: relative;
            z-index: 5;
            min-height: 24px;
            padding: 6px 12px;
            background: rgba(15, 23, 42, 0.88);
            border: 1px solid rgba(248, 203, 79, 0.3);
            border-radius: 999px;
            color: #fef3c7;
            font-size: 12px;
            line-height: 1.3;
            letter-spacing: 0.01em;
            text-shadow: 0 1px 2px rgba(0,0,0,0.35);
            box-shadow: 0 0 18px rgba(248, 203, 79, 0.12);
            max-width: min(100%, 250px);
            text-align: center;
            white-space: normal;
        }
        .mahjong-tile.beginner-highlight {
            border: 1px solid rgba(248, 113, 113, 0.95);
            box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.95), 0 0 16px 4px rgba(248, 113, 113, 0.25);
            transform: translateY(-4px);
        }
        #myHand .mahjong-tile {
            position: relative;
            z-index: 0;
            transition: transform 0.2s, box-shadow 0.2s, z-index 0s;
        }
        #myHand .mahjong-tile:hover,
        #myHand .mahjong-tile:active {
            z-index: 9999;
        }
        #myHand { display: flex; gap: 1px; justify-content: center; align-items: flex-end; width: 100%; max-width: 100vw; overflow-x: auto; overflow-y: visible; padding: 0 8px 2px; scroll-padding: 8px; -webkit-overflow-scrolling: touch; }
        #myHand.hand-overflow { justify-content: flex-start; }
        #myHand::-webkit-scrollbar { display: none; }
        #myHand .mahjong-tile {
            width: var(--tile-w);
            height: var(--tile-h);
            flex: 0 0 var(--tile-w);
            border-radius: 5px;
        }
        #myHand .mahjong-tile:hover, #myHand .mahjong-tile:active { transform: scale(1.1); cursor: pointer; box-shadow: 0 12px 20px rgba(0,0,0,0.8); }
        .drawn-tile { margin-left: 10px !important; }

        .action-overlay { position: fixed; bottom: calc(118px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 100%; padding: 0 10px; z-index: 650; }
        .action-btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
        
        .action-btn { min-width: 84px; min-height: 48px; background: linear-gradient(135deg, #facc15, #ec4899); border: 1px solid rgba(255,255,255,0.4); color: #fff; padding: 11px 22px; border-radius: 14px; font-weight: 900; font-size: 1.18rem; cursor: pointer; backdrop-filter: blur(8px); box-shadow: 0 8px 20px rgba(236,72,153, 0.4); transition: 0.2s; }
        #btn-pon, #btn-chi, #btn-kan { background: linear-gradient(135deg, #8b5cf6, #38bdf8); box-shadow: 0 8px 20px rgba(56,189,248, 0.4); }
        .action-btn:active { transform: scale(0.95); }
        .action-btn.pass { background: rgba(30, 41, 59, 0.9); border-color: #64748b; font-size: 0.95rem; box-shadow: none; }
        
        .chi-options { display: flex; gap: 8px; background: rgba(0,0,0,0.8); padding: 8px; border-radius: 8px; border: 1px solid var(--primary-accent); }
        .chi-opt-btn { display: flex; gap: 2px; padding: 4px; background: rgba(255,255,255,0.1); border-radius: 4px; cursor: pointer; border: 1px solid transparent; transition: 0.2s; }
        .chi-opt-btn:hover { border-color: var(--soul-gold); background: rgba(251, 191, 36, 0.2); }

        /* --- 演出アニメーション --- */
        .effect-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1400; overflow: hidden; }
        .cutin-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1500; display: none; align-items: center; justify-content: center; }
        .cutin-layer.active { display: flex; }
        .cutin-bg { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(251,191,36,0.18), transparent 55%), linear-gradient(90deg, transparent, rgba(15,23,42,0.88), transparent); animation: cutinFlash 0.9s ease-out forwards; }
        
        .cutin-card { position: relative; width: min(92vw, 520px); height: 150px; display: flex; align-items: center; overflow: hidden; border-radius: 18px; background: linear-gradient(90deg, rgba(24,18,48,0.96), rgba(18,7,31,0.88)); border: 2px solid rgba(236,72,153,0.75); box-shadow: 0 0 40px rgba(236,72,153,0.45), inset 0 0 30px rgba(255,255,255,0.06); transform: translateX(-120%); animation: cutinSlide 0.9s cubic-bezier(.2,.9,.2,1) forwards; }
        .cutin-card img { width: 145px; height: 145px; object-fit: cover; object-position: center top; transform: scale(1.25); filter: drop-shadow(0 0 18px rgba(255,255,255,0.25)); }
        .cutin-text-wrap { flex: 1; padding: 0 20px; text-align: right; }
        .cutin-action { font-size: clamp(36px, 11vw, 64px); font-weight: 900; line-height: 1; letter-spacing: 4px; color: #fff; text-shadow: 0 0 10px rgba(236,72,153,0.9), 0 0 24px rgba(139,92,246,0.7); }
        .cutin-name { margin-top: 8px; font-size: 14px; font-weight: 900; color: var(--soul-gold); letter-spacing: 2px; }

        /* 画像なしカットイン */
        .cutin-card.no-image { justify-content: center; text-align: center; }
        .cutin-card.no-image img { display: none !important; }
        .cutin-card.no-image .cutin-text-wrap { width: 100%; flex: none; text-align: center; padding: 0 24px; }
        .cutin-card.no-image .cutin-action { text-align: center; letter-spacing: 5px; }
        .cutin-card.no-image .cutin-name { text-align: center; }
        
        .action-burst { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(0.6); font-size: clamp(42px, 13vw, 78px); font-weight: 900; letter-spacing: 6px; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.95), 0 0 28px rgba(251,191,36,0.9), 0 0 48px rgba(239,68,68,0.7); opacity: 0; animation: actionBurst 0.9s ease-out forwards; }
        .action-burst.pon, .action-burst.chi { color: #fff; text-shadow: 0 0 14px rgba(56,189,248,0.9), 0 0 36px rgba(139,92,246,0.75); }
        .action-burst.kan { color: #fff; text-shadow: 0 0 14px rgba(139,92,246,0.9), 0 0 42px rgba(236,72,153,0.8); }
        .action-burst.riichi { color: #fff; text-shadow: 0 0 14px rgba(250,204,21,1), 0 0 48px rgba(236,72,153,0.9); }
        .action-burst.tsumo, .action-burst.ron { color: #fff; text-shadow: 0 0 16px rgba(255,255,255,1), 0 0 52px rgba(250,204,21,1); }
        
        .screen-shake { animation: screenShake 0.42s ease-in-out; }
        .screen-flash { position: absolute; inset: 0; background: rgba(255,255,255,0.22); pointer-events: none; z-index: 1390; animation: flashOut 0.45s ease-out forwards; }

        .dialogue-bubble { position: absolute; z-index: 800; background: rgba(15,23,42,0.95); padding: 10px 20px; border-radius: 12px; border: 1px solid var(--primary-accent); color: #fff; font-weight: 700; font-size: 11px; white-space: nowrap; transition: 0.3s; transform: translate(-50%,-50%) scale(0.5); opacity: 0; box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
        .dialogue-bubble.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
        .dialogue-bubble.hide { opacity: 0; transform: translate(-50%,-50%) scale(1.1); }

        @keyframes cutinSlide { 0% { transform: translateX(-120%) skewX(-10deg); opacity: 0; } 18% { transform: translateX(0) skewX(-6deg); opacity: 1; } 55% { transform: translateX(0) skewX(-6deg); opacity: 1; } 100% { transform: translateX(120%) skewX(-10deg); opacity: 0; } }
        @keyframes cutinFlash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
        @keyframes actionBurst { 0% { transform: translate(-50%, -50%) scale(0.4) rotate(-4deg); opacity: 0; filter: blur(8px); } 18% { transform: translate(-50%, -50%) scale(1.18) rotate(2deg); opacity: 1; filter: blur(0); } 70% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.35) rotate(0); opacity: 0; } }
        @keyframes screenShake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, -2px); } 80% { transform: translate(3px, 2px); } }
        @keyframes flashOut { 0% { opacity: 1; } 100% { opacity: 0; } }

        /* --- モーダル --- */
        .overlay { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.9); backdrop-filter: blur(8px); z-index: 1000; display: none; justify-content: center; align-items: center; }
        .modal { width: 95%; max-width: 400px; max-height: 90vh; background: #0f172a; border-radius: 16px; border: 1px solid rgba(59, 130, 246, 0.3); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.8); }
        .modal-header { padding: 16px; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; }
        .modal-header h2 { font-size: 1rem; color: #fff; font-weight: 900; border-left: 4px solid var(--primary-accent); padding-left: 10px; }
        
        .guide-tabs { display: flex; background: rgba(0,0,0,0.4); }
        .guide-tab { flex: 1; padding: 12px 5px; font-size: 0.8rem; font-weight: 900; color: #64748b; cursor: pointer; text-align: center; border-bottom: 2px solid transparent; transition: 0.2s; }
        .guide-tab.active { color: #fff; border-bottom-color: var(--primary-accent); background: rgba(59, 130, 246, 0.1); }
        .guide-body { flex: 1; overflow-y: auto; padding: 20px; color: #cbd5e0; line-height: 1.6; font-size: 0.85rem; }
        .guide-page { display: none; }
        .guide-page.active { display: block; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        
        .result-panel { text-align: center; font-weight: 900; }
        .result-yaku { color: var(--soul-gold); font-size: 1rem; margin: 10px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
        .yaku-badge { background: rgba(251, 191, 36, 0.2); padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(251, 191, 36, 0.5); }
        .result-score { font-size: 2rem; color: #fff; text-shadow: 0 0 15px rgba(255,255,255,0.3); margin-top: 10px; }

        /* --- サイコロ --- */
        .dice-overlay { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.8); backdrop-filter: blur(5px); z-index: 1800; display: none; justify-content: center; align-items: center; flex-direction: column; }
        .dice-panel { background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98)); border: 2px solid var(--soul-gold); border-radius: 20px; padding: 30px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.8), inset 0 0 20px rgba(251, 191, 36, 0.2); width: 90%; max-width: 320px; }
        .dice-title { font-size: 1.2rem; color: var(--soul-gold); font-weight: 900; margin-bottom: 20px; letter-spacing: 2px; }
        .dice-row { display: flex; justify-content: center; gap: 24px; margin-bottom: 20px; }
        .dice { width: 64px; height: 64px; background: linear-gradient(145deg, #ffffff, #e2e8f0); border-radius: 12px; box-shadow: inset -4px -4px 10px rgba(0,0,0,0.2), inset 4px 4px 10px rgba(255,255,255,1), 0 5px 15px rgba(0,0,0,0.5); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 8px; gap: 2px; align-items: center; justify-items: center; }
        .dice-dot { width: 11px; height: 11px; background: #1e293b; border-radius: 50%; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.8), inset -1px -1px 3px rgba(255,255,255,0.4); display: block; visibility: hidden; }
        
        .dice[data-val="1"] .dot-5 { visibility: visible; background: #ef4444; }
        .dice[data-val="2"] .dot-1, .dice[data-val="2"] .dot-9 { visibility: visible; }
        .dice[data-val="3"] .dot-1, .dice[data-val="3"] .dot-5, .dice[data-val="3"] .dot-9 { visibility: visible; }
        .dice[data-val="4"] .dot-1, .dice[data-val="4"] .dot-3, .dice[data-val="4"] .dot-7, .dice[data-val="4"] .dot-9 { visibility: visible; }
        .dice[data-val="5"] .dot-1, .dice[data-val="5"] .dot-3, .dice[data-val="5"] .dot-5, .dice[data-val="5"] .dot-7, .dice[data-val="5"] .dot-9 { visibility: visible; }
        .dice[data-val="6"] .dot-1, .dice[data-val="6"] .dot-3, .dice[data-val="6"] .dot-4, .dice[data-val="6"] .dot-6, .dice[data-val="6"] .dot-7, .dice[data-val="6"] .dot-9 { visibility: visible; }
        
        @keyframes diceShake { 
            0% { transform: rotate(0deg) translate(0, 0); } 
            25% { transform: rotate(8deg) translate(2px, -2px); } 
            50% { transform: rotate(-8deg) translate(-2px, 2px); } 
            75% { transform: rotate(6deg) translate(2px, 2px); } 
            100% { transform: rotate(0deg) translate(0, 0); } 
        }
        @keyframes dicePop { 
            0% { transform: scale(0.82) rotate(-8deg); opacity: 0.7; } 
            60% { transform: scale(1.18) rotate(4deg); opacity: 1; } 
            100% { transform: scale(1) rotate(0deg); opacity: 1; } 
        }
        
        .dice.rolling { animation: diceShake 0.1s infinite; }
        .dice.popping { animation: dicePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .dice-message { font-size: 1rem; color: #fff; font-weight: 700; margin-bottom: 10px; }
        .dice-total { font-size: 1.2rem; color: var(--primary-accent); font-weight: 900; text-shadow: 0 0 10px var(--accent-glow); }

        /* --- Settings CSS --- */
        .setting-section { margin-bottom: 22px; }
        .setting-label { display: block; font-size: 0.85rem; font-weight: 900; color: #cbd5e1; margin-bottom: 10px; }
        .setting-help { margin-top: 8px; font-size: 0.72rem; color: #64748b; line-height: 1.5; }
        .setting-select-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
        .setting-toggle-row { display: flex; gap: 10px; background: rgba(0,0,0,0.3); padding: 5px; border-radius: 8px; }
        .setting-btn { flex: 1; min-height: 42px; border: 1px solid rgba(148, 163, 184, 0.25); background: rgba(15, 23, 42, 0.85); color: #94a3b8; border-radius: 8px; font-size: 0.78rem; font-weight: 900; cursor: pointer; transition: 0.2s; }
        .setting-btn.active { background: var(--primary-accent); border-color: #60a5fa; color: #fff; box-shadow: 0 0 14px rgba(59, 130, 246, 0.45); }
        #bgmVolumeSlider, #seVolumeSlider { width: 100%; accent-color: var(--primary-accent); }

        .think-timer-label { min-width: 54px; height: 34px; padding: 6px 14px; border-radius: 999px; background: rgba(15, 23, 42, 0.92); border: 1px solid rgba(251, 191, 36, 0.65); color: #fbbf24; font-size: 1rem; font-weight: 900; text-align: center; box-shadow: 0 0 16px rgba(251, 191, 36, 0.25); }

        /* --- ログ用 CSS --- */
        .log-line { padding: 4px 0; border-bottom: 1px solid rgba(148, 163, 184, 0.08); word-break: break-word; }
        .log-info { color: #cbd5e1; }
        .log-system { color: #38bdf8; font-weight: 900; }
        .log-discard { color: #e5e7eb; }
        .log-call { color: #a78bfa; font-weight: 900; }
        .log-riichi { color: #facc15; font-weight: 900; }
        .log-win { color: #fbbf24; font-weight: 900; }
        .log-pass { color: #94a3b8; }
        .log-danger { color: #fb7185; font-weight: 900; }
        /* --- PCレイアウト最適化 --- */
        @media (min-width: 1024px) {
            :root {
                --tile-w: 34px;
                --tile-h: 48px;
                --avatar-size: 108px;
                --table-shift-y: 18px;
            }

            header {
                height: 60px;
                padding-inline: 28px;
            }

            .game-logo {
                font-size: 1.35rem;
            }

            .nav-btn {
                min-height: 36px;
                padding: 8px 14px;
                font-size: 0.82rem;
            }

            #view-lobby {
                justify-content: center;
                padding: 32px;
            }

            .lobby-inner {
                max-width: 760px;
                top: 0;
                display: flex;
                flex-direction: column;
                gap: 18px;
                align-items: center;
            }

            .glass-card {
                margin-bottom: 0;
                padding: 24px;
            }

            .chara-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 18px;
            }

            .chara-card {
                border-radius: 14px;
            }

            .chara-card .img-box {
                aspect-ratio: auto;
                height: 200px;
            }

            .chara-card img {
                object-fit: contain;
                object-position: center top;
            }

            #startMatchBtn {
                width: min(100%, 320px);
                max-width: 320px;
                align-self: center;
                padding: 16px;
                font-size: 1.12rem;
            }

            .board-zone {
                padding: 18px 220px 170px;
            }

            .mahjong-table {
                width: min(52vw, 640px);
                max-width: 640px;
                transform: translateY(var(--table-shift-y));
            }

            .central-block {
                width: 156px;
                height: 156px;
            }

            .p-pos-2 {
                top: 2%;
            }

            .p-pos-1 {
                right: 9%;
                bottom: 22%;
            }

            .p-pos-3 {
                left: 9%;
                bottom: 22%;
            }

            .game-hud {
                top: 18px;
                right: 22px;
            }

            .footer-hand {
                padding: 10px 28px 8px;
            }

            #myHand {
                max-width: min(980px, calc(100vw - 96px));
                margin-inline: auto;
                overflow-x: visible;
            }

            .action-overlay {
                bottom: calc(132px + env(safe-area-inset-bottom));
            }
        }

        @media (min-width: 1280px) {
            .board-zone {
                padding-inline: 280px;
            }

            .mahjong-table {
                width: min(48vw, 680px);
                max-width: 680px;
            }

            .p-pos-1 {
                right: 12%;
            }

            .p-pos-3 {
                left: 12%;
            }
        }

        /* --- 狭小端末対応 --- */
        @media (max-width: 480px) {
            :root { --tile-w: 26.4px; --tile-h: 37.4px; --discard-tile-w: 18px; --discard-tile-h: 26px; --discard-gap: 1px; --discard-row-gap: 2px; --avatar-size: clamp(70px, 20vw, 80px); --table-shift-y: 32px; }
            .mahjong-table { width: 96vw; max-width: 370px; }
            .mahjong-learning-links { padding: 12px; }
            .mahjong-learning-links ul { grid-template-columns: 1fr; }
            .central-block { width: 90px; height: 90px; }
            .central-block .center-info { padding: 3px 6px; }
            .center-info .text-white { font-size: 12px; }
            .center-info .text-yellow-500 { font-size: 10px; }
            .score-box span { font-size: 10px; }
            
            /* ロビー画面の最適化 */
            #view-lobby { padding: 20px 10px 10px; }
            .lobby-inner { top: 20px; max-width: 100%; }
            .glass-card { padding: 12px; margin-bottom: 12px; }
            .chara-grid { 
                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
                gap: 12px; 
                margin: 8px 0; 
            }
            .chara-card { padding: 6px; }
            .chara-card .img-box { aspect-ratio: 4 / 5; }
            #startMatchBtn { 
                width: 100%; 
                max-width: 280px; 
                padding: 14px; 
                font-size: 1.1rem;
                margin: 0 auto;
                display: block;
            }
            
            /* アクションボタン最適化 */
            .action-btn-row { 
                gap: 8px; 
                padding: 0 4px;
            }
            .action-btn { 
                min-width: 72px; 
                min-height: 52px; 
                padding: 10px 16px; 
                font-size: 1rem;
                flex: 1;
                max-width: calc(50% - 4px);
            }
            .action-btn:nth-child(n+4) {
                margin-top: 4px;
            }
            .action-btn.pass { min-width: 64px; }
            
            /* 牌表示の最適化 */
            #myHand .mahjong-tile {
                width: var(--tile-w);
                height: var(--tile-h);
                flex: 0 0 var(--tile-w);
                border-radius: 5px;
            }
            
            /* その他の要素 */
            .cutin-card { height: 120px; }
            .cutin-card img { width: 118px; height: 118px; }
            .cutin-action { letter-spacing: 1px; font-size: 0.9rem; }
            .p-pos-1 { right: -2px; }
            .p-pos-3 { left: -2px; }
            .discard-area-bottom { bottom: 8px; }
            .discard-area-top { top: 8px; }
            .discard-area-left { left: 2px; }
            .discard-area-right { right: 2px; }
            
            /* ナビゲーションボタン */
            .nav-btn { 
                padding: 8px 12px; 
                font-size: 0.7rem;
                min-height: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            /* ヘッダーロゴ */
            .game-logo { 
                font-size: 1rem;
                letter-spacing: 1px;
            }
        }
        
        @media (max-width: 360px) {
            :root { --tile-w: 24.2px; --tile-h: 35.2px; --discard-tile-w: 16px; --discard-tile-h: 23px; --discard-gap: 1px; --discard-row-gap: 1px; --avatar-size: 65px; --table-shift-y: 28px; }
            .mahjong-table { width: 94vw; max-width: 340px; }
            .central-block { width: 80px; height: 80px; }
            
            /* さらに狭い画面への最適化 */
            .action-btn { 
                min-width: 64px; 
                min-height: 48px; 
                padding: 8px 12px; 
                font-size: 0.9rem;
            }
            
            .lobby-inner { top: 10px; }
            .glass-card { padding: 10px; margin-bottom: 10px; }
            .chara-grid { gap: 8px; }
            
            #myHand .mahjong-tile {
                width: var(--tile-w);
                height: var(--tile-h);
                flex: 0 0 var(--tile-w);
                border-radius: 5px;
            }
            
            .cutin-card { height: 100px; }
            .cutin-card img { width: 98px; height: 98px; }
            .nav-btn { padding: 6px 10px; font-size: 0.65rem; }
            .discard-area-bottom { bottom: 6px; }
            .discard-area-top { top: 6px; }
            .discard-area-left { left: 1px; }
            .discard-area-right { right: 1px; }
        }

        @media (max-height: 700px) {
            :root { --tile-w: 24.2px; --tile-h: 35.2px; --discard-tile-w: 16px; --discard-tile-h: 23px; --discard-gap: 1px; --discard-row-gap: 1px; --avatar-size: 60px; --table-shift-y: 24px; }
            .board-zone { padding-bottom: 120px; }
            .mahjong-table { width: min(94vw, 380px); max-width: 380px; }
            .footer-hand { padding-top: 4px; }
            .action-overlay { bottom: calc(108px + env(safe-area-inset-bottom)); }
            
            /* スマートフォン向けアクションボタン */
            .action-btn-row { 
                gap: 6px; 
                padding: 0 2px;
            }
            .action-btn { 
                min-width: 60px; 
                min-height: 46px; 
                padding: 8px 12px; 
                font-size: 0.95rem;
            }
            
            #myHand .mahjong-tile {
                width: var(--tile-w);
                height: var(--tile-h);
                flex: 0 0 var(--tile-w);
                border-radius: 5px;
            }
            
            .lobby-inner { top: 16px; }
            .chara-grid { 
                gap: 8px;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .glass-card { padding: 12px; margin-bottom: 10px; }
            .chara-card { padding: 6px; }
            .chara-card .img-box { aspect-ratio: 4 / 5; }
            
            #startMatchBtn { 
                padding: 12px; 
                font-size: 1rem;
                max-width: 240px;
            }
            
            /* テキスト調整 */
            .text-center { font-size: 0.75rem; }
        }

        /* --- SEO本文セクション --- */
        .seo-breadcrumb {
            background: rgba(15, 23, 42, 0.6);
            padding: 12px 16px;
            font-size: 0.9rem;
            border-bottom: 1px solid rgba(139, 92, 246, 0.2);
            display: block;
        }
        
        body.in-game .seo-breadcrumb {
            display: none;
        }
        
        .breadcrumb-inner {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .seo-breadcrumb a {
            color: #38bdf8;
            text-decoration: none;
            transition: 0.2s;
        }
        
        .seo-breadcrumb a:hover {
            color: #fff;
        }
        
        .breadcrumb-sep {
            color: #64748b;
            margin: 0 4px;
        }
        
        .seo-breadcrumb .current {
            color: #cbd5e0;
        }

        @media (max-width: 768px) {
            :root { --header-h: 48px; }
            
            /* ヘッダー最適化 */
            header { 
                padding: 0 12px;
                gap: 8px;
            }
            .game-logo { 
                font-size: 1rem;
                letter-spacing: 1px;
            }
            
            /* パンくずリスト */
            .seo-breadcrumb {
                padding: 8px 12px;
                font-size: 0.75rem;
            }
            .breadcrumb-inner {
                gap: 4px;
            }
            
            /* レイアウト最適化 */
            main { 
                width: 100vw;
                overflow-x: hidden;
            }
            
            /* フッター最適化 */
            .footer-hand { 
                padding: 8px 2px 0;
                box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
            }
            
            /* タッチ対応 */
            button, .action-btn, .nav-btn {
                -webkit-user-select: none;
                user-select: none;
                -webkit-touch-callout: none;
            }
            
            /* HUD最適化 */
            .game-hud {
                gap: 6px;
                padding: 6px;
            }
            .hud-btn {
                min-width: 60px;
                min-height: 40px;
                font-size: 0.8rem;
            }
            .speed-bar {
                min-width: 90px;
                gap: 2px;
            }
            .speed-opt {
                padding: 3px 6px;
                font-size: 0.55rem;
            }
        }