/* ⋮ 메뉴의 화면 크기 슬라이더가 조절하는 배율(1 = 100%, poke-arena.js가 세팅). 텍스트만
           키우기엔 이 파일의 font-size가 전부 px 하드코딩이라 위험이 커서, 화면 전체를 zoom으로
           같이 확대/축소한다 — body의 width/height를 미리 이 배율의 역수로 잡아둬서, zoom을 걸어도
           실제 화면(뷰포트) 크기에 정확히 다시 맞아떨어지게 한다. */
        :root { --ui-scale: 1; }
        body {
            margin: 0; padding: 0;
            background-color: #0f1117;
            color: #ffffff;
            font-family: 'Segoe UI', sans-serif;
            /* 페이지(body) 자체는 절대 스크롤되지 않는다 - 화면 높이에 딱 맞춰 고정하고,
               헤더/푸터는 제 크기만큼만 차지하며, 그 사이 .app-content만 내부 스크롤된다.
               dvh를 지원하지 않는 구형 웹뷰에서는 이 선언이 무시되고 앞의 100vh가 유지된다. */
            width: calc(100vw / var(--ui-scale));
            height: calc(100vh / var(--ui-scale));
            height: calc(100dvh / var(--ui-scale));
            overflow: hidden;
            box-sizing: border-box;
            zoom: var(--ui-scale);
        }
        .hidden { display: none !important; }
        /* 헤더/컨텐츠/푸터 3단 세로 레이아웃. 화면(body) 전체를 정확히 채우고, 셋 중
           .app-content만 늘어나며(flex:1) 내부 스크롤을 갖는다. */
        .app-shell {
            display: flex;
            flex-direction: column;
            height: 100%;
            box-sizing: border-box;
            /* Android 15(targetSdk 35)부터 앱이 기본적으로 엣지투엣지로 그려져 콘텐츠가
               제스처/내비게이션 바, 노치 아래까지 이어질 수 있다. 셸 전체에 안전영역만큼
               안쪽 여백을 둬서 헤더/푸터가 시스템 UI와 겹치지 않게 한다(viewport-fit=cover가
               있어야 이 값이 0이 아닌 실제 높이로 계산된다). */
            padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
                env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        }
        h1 { margin-bottom: 10px; font-size: 24px; color: #6c63ff; text-align: center; }

        /* ===== 분석 진행 오버레이 ===== */
        .analysis-progress-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: overlay-fadein 0.2s ease;
        }
        .analysis-progress-overlay.hidden { display: none !important; }
        @keyframes overlay-fadein { from { opacity: 0; } to { opacity: 1; } }
        
        .analysis-progress-card {
            background: #1a1d27;
            border: 1px solid #3a3a5c;
            border-radius: 16px;
            padding: 36px 48px;
            min-width: 250px;
            max-width: 360px;
            width: 80%;
            text-align: center;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
        }
        .analysis-progress-text {
            font-size: 15px;
            color: #ccc;
            font-weight: bold;
            margin-bottom: 20px;
            letter-spacing: 0.01em;
        }
        .analysis-progress-bar-track {
            width: 100%;
            height: 4px;
            background: #0f1117;
            border-radius: 2px;
            overflow: hidden;
        }
        .analysis-progress-bar-fill {
            height: 100%;
            width: 45%;
            background: linear-gradient(90deg, #6c63ff, #a78bfa);
            border-radius: 2px;
            animation: progress-slide 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        @keyframes progress-slide {
            0%   { transform: translateX(-120%); width: 45%; }
            50%  { width: 65%; }
            100% { transform: translateX(240%); width: 45%; }
        }

        /* ===== 상단 바 / 메인 컨텐츠 / 하단 촬영 버튼 (3단 레이아웃) ===== */
        .header-bar {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            padding: 16px 20px 8px;
            box-sizing: border-box;
        }
        .header-bar-title {
            font-size: 20px;
            font-weight: bold;
            color: #6c63ff;
            cursor: pointer;
            user-select: none;
        }
        .header-bar-title:active {
            opacity: 0.7;
        }
        .header-options-btn {
            background: transparent;
            border: 1px solid #3a3a5c;
            color: #a78bfa;
            border-radius: 8px;
            padding: 6px 14px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            white-space: nowrap;
            line-height: 1;
            display: none;
        }

        /* ===== 메인 BGM 미니 플레이어 (헤더 아래 · 컨텐츠 위) =====
           배틀 화면 미니 플레이어와 동일 조작(일시중지/재생 토글 · 정지 · 클릭 시 목록 다이얼로그). */
        .main-bgm-bar {
            flex-shrink: 0;
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            padding: 0 20px 8px;
            box-sizing: border-box;
        }
        .main-bgm-mini {
            display: flex;
            align-items: center;
            gap: 8px;
            height: 34px;
            padding: 0 10px 0 12px;
            border-radius: 999px;
            border: 1px solid rgba(90, 90, 140, 0.55);
            background: rgba(0, 0, 0, 0.35);
            color: #d8d8ff;
            cursor: pointer;
            user-select: none;
            box-sizing: border-box;
        }
        .main-bgm-mini:hover {
            border-color: rgba(130, 130, 200, 0.75);
            background: rgba(20, 22, 40, 0.55);
        }
        .main-bgm-mini-eq {
            display: inline-flex;
            align-items: flex-end;
            gap: 2px;
            height: 12px;
            flex-shrink: 0;
            opacity: 0.35;
        }
        .main-bgm-mini-eq i {
            display: block;
            width: 2px;
            height: 4px;
            border-radius: 1px;
            background: #8cf;
        }
        .main-bgm-mini.is-playing .main-bgm-mini-eq { opacity: 1; }
        .main-bgm-mini.is-playing .main-bgm-mini-eq i:nth-child(1) {
            animation: main-bgm-eq 0.55s ease-in-out infinite alternate;
        }
        .main-bgm-mini.is-playing .main-bgm-mini-eq i:nth-child(2) {
            animation: main-bgm-eq 0.45s ease-in-out 0.12s infinite alternate;
            height: 8px;
        }
        .main-bgm-mini.is-playing .main-bgm-mini-eq i:nth-child(3) {
            animation: main-bgm-eq 0.5s ease-in-out 0.05s infinite alternate;
            height: 6px;
        }
        @keyframes main-bgm-eq {
            from { transform: scaleY(0.45); }
            to   { transform: scaleY(1.15); }
        }
        .main-bgm-mini-name {
            flex: 1 1 auto;
            min-width: 0;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .main-bgm-mini-btn {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            padding: 0;
            border: 1px solid transparent;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
            color: #e8e8ff;
            font-size: 12px;
            line-height: 1;
            cursor: pointer;
            font-family: inherit;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .main-bgm-mini-btn:hover {
            background: rgba(255, 255, 255, 0.16);
            border-color: rgba(122, 122, 255, 0.45);
        }

        /* 메인 BGM 플레이리스트 다이얼로그 (fixed, 앱 전체 기준) */
        .main-bgm-dlg-backdrop {
            position: fixed;
            inset: 0;
            z-index: 10600;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            background: rgba(4, 6, 14, 0.55);
            box-sizing: border-box;
        }
        .main-bgm-dlg {
            width: min(440px, 94%);
            max-height: min(520px, 86%);
            display: flex;
            flex-direction: column;
            border-radius: 12px;
            border: 1px solid rgba(90, 90, 130, 0.65);
            background: linear-gradient(180deg, #2a2d3a 0%, #1e2130 55%, #181b28 100%);
            box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
            color: #eef0ff;
            overflow: hidden;
            font-size: 13px;
        }
        .main-bgm-dlg-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 10px 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(0, 0, 0, 0.18);
        }
        .main-bgm-dlg-head-title { font-weight: 700; font-size: 13px; }
        .main-bgm-dlg-close {
            width: 28px; height: 28px; border: none; border-radius: 6px;
            background: transparent; color: #c8c8e8; cursor: pointer;
            font-size: 14px; font-family: inherit;
        }
        .main-bgm-dlg-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
        .main-bgm-dlg-list {
            flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 8px 0;
        }
        .main-bgm-dlg-row {
            display: flex; align-items: center; gap: 6px;
            padding: 6px 12px; min-height: 32px;
        }
        .main-bgm-dlg-row:hover { background: rgba(255, 255, 255, 0.05); }
        .main-bgm-dlg-row.is-current { background: rgba(100, 110, 220, 0.14); }
        .main-bgm-dlg-check-wrap {
            flex-shrink: 0; display: inline-flex; align-items: center; cursor: pointer;
        }
        .main-bgm-dlg-check { width: 15px; height: 15px; accent-color: #6c63ff; cursor: pointer; }
        .main-bgm-dlg-track {
            flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline;
            flex-wrap: wrap; gap: 4px 6px; padding: 2px 0; border: none;
            background: transparent; color: inherit; font: inherit;
            text-align: left; cursor: pointer;
        }
        .main-bgm-dlg-file { font-weight: 700; color: #f0f0ff; white-space: nowrap; }
        .main-bgm-dlg-title { font-weight: 600; color: #c8d0ff; }
        .main-bgm-dlg-desc {
            flex: 1 1 100%;
            font-size: 11px; color: #9aa0c0; font-weight: 500;
            line-height: 1.35;
            overflow-wrap: anywhere; word-break: break-word;
        }
        .main-bgm-dlg-desc-link {
            color: #8ec5ff; text-decoration: underline;
            text-underline-offset: 2px;
        }
        .main-bgm-dlg-desc-link:hover { color: #b8dbff; }
        .main-bgm-dlg-playing {
            flex-shrink: 0; min-width: 4.5em; text-align: right;
            font-size: 11px; font-weight: 700; color: #8cf0a0; white-space: nowrap;
        }
        .main-bgm-dlg-transport {
            display: flex; align-items: center; gap: 8px;
            padding: 8px 14px 4px; border-top: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 11px; color: #b0b4d0; font-variant-numeric: tabular-nums;
        }
        .main-bgm-dlg-seek {
            flex: 1 1 auto; min-width: 0; height: 4px;
            accent-color: #7a7aff; cursor: pointer;
        }
        .main-bgm-dlg-footer {
            display: flex; flex-direction: column; align-items: stretch;
            gap: 8px; padding: 6px 14px 14px;
        }
        .main-bgm-dlg-now-title {
            font-size: 16px; font-weight: 800; color: #fff;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .main-bgm-dlg-controls {
            display: flex; align-items: center; justify-content: center; gap: 10px;
        }
        .main-bgm-dlg-btn {
            width: 36px; height: 36px; border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.06); color: #eef0ff;
            font-size: 14px; cursor: pointer; font-family: inherit;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .main-bgm-dlg-btn:hover { background: rgba(255, 255, 255, 0.14); }
        .main-bgm-dlg-pp-main {
            width: 44px; height: 44px; font-size: 18px;
            border-color: rgba(122, 122, 255, 0.55);
            background: radial-gradient(circle at 40% 35%, #8b85ff, #5757ff 70%);
            box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.25);
        }

        /* 헤더/푸터 사이 유일하게 늘어나는(flex:1) 영역 - 여기에만 세로 스크롤이 생긴다.
           min-height:0이 없으면 내용이 넘칠 때 이 영역이 flex 비율을 무시하고 내용 크기만큼
           커져버려서 body까지 같이 스크롤되는(이중 스크롤) 문제가 있었다. */
        .app-content {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* justify-content: center를 overflow-y: auto와 같이 쓰면, 컨텐츠가 넘칠 때
               위쪽으로 넘친 부분이 스크롤로 절대 닿을 수 없는 잘 알려진 flexbox 버그가
               있다(중앙정렬이 "위/아래로 균등하게 넘친 것"까지 그대로 반영해버려서, 맨
               위로 스크롤해도 실제로는 여전히 잘린 상태가 됨) - 짧을 때 예쁘게 가운데
               정렬되는 것보다, 내용이 길어졌을 때 위쪽이 항상 스크롤로 보이는 게 더
               중요하므로 flex-start(기본값)로 둔다. */
            padding: 0 20px 20px;
            box-sizing: border-box;
        }
        .controls-panel {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            flex-shrink: 0;
            margin-top: auto;
            margin-bottom: auto;
        }

        /* ===== 실시간 유저 스캔 갤러리 (다른 사용자들이 스캔한 카드 피드) =====
           서버가 모은 커뮤니티 스캔 목록을 홈 화면 하단에 보여준다. 카드가 없는
           사용자도 항목을 눌러 같은 분석 결과를 열어볼 수 있다. */
        .scan-gallery {
            width: 90%;
            max-width: 800px;
            margin-top: 22px;
        }
        .scan-gallery-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .scan-gallery-title {
            font-size: 15px;
            font-weight: 700;
            color: #d8d8ff;
        }
        .gallery-refresh-btn {
            background: none;
            border: 1px solid #3a3a5c;
            border-radius: 8px;
            color: #a78bfa;
            font-size: 15px;
            width: 32px;
            height: 32px;
            cursor: pointer;
            font-family: inherit;
            line-height: 1;
        }
        .gallery-refresh-btn:active { transform: scale(0.92); }
        .gallery-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }
        .gallery-tab {
            flex: 1;
            padding: 9px 12px;
            background: #14161f;
            border: 1px solid #2e3147;
            border-radius: 10px;
            color: #a78bfa;
            font-size: 13px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }
        .gallery-tab.active {
            background: #232637;
            border-color: #6c63ff;
            color: #fff;
        }
        /* 네트워크배틀은 앱(네이티브 블루투스 브릿지)에서만 실제로 동작한다. 웹 브라우저에서는
           JS가 window.AndroidBluetooth 유무를 보고 이 클래스를 붙여 비활성화처럼 보이게 한다
           (poke-arena.js의 syncNetworkTabAvailability) - 앱에서는 이 클래스가 안 붙어 다른
           탭과 동일하게 보인다. */
        .gallery-tab.network-unavailable {
            color: #666;
            background: #14161f;
            border-color: #1f2233;
            cursor: not-allowed;
            opacity: 0.7;
        }
        .gallery-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .gallery-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            background: #1a1d27;
            border: 1px solid #3a3a5c;
            border-radius: 12px;
            cursor: pointer;
            transition: transform 0.1s ease, border-color 0.2s ease, background 0.2s ease;
        }
        .gallery-item:hover { border-color: #6c63ff; background: #232637; }
        .gallery-item:active { transform: scale(0.98); }
        /* 대표 카드 포켓몬 스프라이트 썸네일 (없으면 🃏 플레이스홀더) */
        .gallery-item-thumb {
            position: relative;
            flex-shrink: 0;
            width: 46px;
            height: 46px;
            border-radius: 10px;
            background: #0f1117;
            border: 1px solid #2e3147;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }
        .gallery-item-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .gallery-item-thumb.is-empty { color: #6c63ff; }
        /* 인기 탭 순위 뱃지 - 썸네일 좌상단에 겹쳐 표시 */
        .gallery-item-rank {
            position: absolute;
            top: -1px;
            left: -1px;
            min-width: 18px;
            height: 18px;
            padding: 0 4px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 9px 0 9px 0;
            background: #6c63ff;
            color: #fff;
            font-size: 11px;
            font-weight: 700;
        }
        .gallery-item-info { flex: 1; min-width: 0; }
        .gallery-item-title {
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .gallery-item-sub {
            font-size: 12px;
            color: #8b8fa8;
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .gallery-item-badge {
            flex-shrink: 0;
            font-size: 11px;
            font-weight: 600;
            color: #a78bfa;
            background: #0f1117;
            border: 1px solid #2e3147;
            border-radius: 999px;
            padding: 3px 9px;
            white-space: nowrap;
        }

        /* ===== 하단 탭 내비게이션 + 화면 전환 ===== */
        .tab-bar {
            flex-shrink: 0;
            display: flex;
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            border-top: 1px solid #2e3147;
            background: #14161f;
        }
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            padding: 8px 0 10px;
            background: none;
            border: none;
            color: #8b90a5;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        /* 아이콘은 이모지라 color가 안 먹으므로, 비활성 탭은 grayscale로 회색빛 처리하고
           활성 탭만 원색(filter 해제)으로 되돌린다. */
        .tab-item .tab-ico {
            font-size: 20px; line-height: 1;
            filter: grayscale(1);
            opacity: 0.5;
            transition: filter 0.2s ease, opacity 0.2s ease;
        }
        .tab-item.active { color: #a78bfa; }
        .tab-item.active .tab-ico { filter: none; opacity: 1; }

        /* Poke Arena 브랜드 아이콘(피카츄) - 이모지 칼(⚔️) 자리를 대신한다. 부모의
           font-size에 맞춰 1em으로 스케일되어 어디에 쓰이든 텍스트 높이와 나란히 맞는다. */
        .icon-img { width: 1em; height: 1em; vertical-align: -0.15em; object-fit: contain; }

        /* 활성 화면에 따라 메인(controlsPanel/#result)·덱스 아레나(#screenArena)·
           배틀결과(#screenBattle)를 토글. 활성 화면만 남기고 나머지는 감춘다. */
        .app-shell[data-active-screen="arena"] #controlsPanel,
        .app-shell[data-active-screen="arena"] #result,
        .app-shell[data-active-screen="result"] #controlsPanel,
        .app-shell[data-active-screen="result"] #result { display: none !important; }
        .app-shell[data-active-screen="main"] #screenArena,
        .app-shell[data-active-screen="result"] #screenArena { display: none; }
        /* 배틀결과 화면은 기본 숨김, active-screen=result 일 때만 표시(arena 모드에서만 도달).
           레이아웃은 덱스 아레나 화면(.screen-arena)과 동일하게 중앙 정렬 컬럼으로 맞춘다. */
        /* 하단에 떠 있는 '배틀 보기' 버튼에 마지막 배틀상세가 가리지 않도록 아래 여백을 넉넉히. */
        .screen-battle { width: 100%; max-width: 640px; flex-direction: column; align-items: center; padding: 8px 16px 120px; box-sizing: border-box; }
        #screenBattle { display: none; }
        .app-shell[data-active-screen="result"] #screenBattle { display: flex; }
        /* 배틀결과 빈 상태 안내 + 대결 구도가 비었을 때 숨김 */
        .battle-empty-state { text-align: center; color: #8b90a5; font-size: 14px; line-height: 1.7; padding: 56px 24px; }
        .battle-empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.7; }
        .arena-matchup-preview:empty { display: none; }
        /* ===== Poke Arena 전용 화면 조정 =====
           예전엔 이 파일을 Snap Mon 앱과도 공유해 ?app= 값으로 나눴지만, 이제 항상
           Poke Arena(window.APP_MODE='arena')만 남아 관련 규칙만 남긴다. */
        /* 네이티브 앱(?native=1로 열렸을 때)에서는 ⋮ 메뉴의 앱 설치 링크가 불필요해 감춘다.
           링크에 인라인 display:block이 있어 !important로 덮는다. */
        .app-shell[data-native-app] .app-install-link { display: none !important; }
        /* Poke Arena 앱은 음성 선택 없이 선희(edge) 고정이라 ⋮ 메뉴의 음성 선택 버튼을 감춘다. */
        .app-shell[data-app-mode="arena"] #openVoiceModalBtn { display: none !important; }
        /* 배경음/효과음 on/off 토글은 Poke Arena(arena 모드)에서만 ⋮ 메뉴에 노출한다. */
        .arena-audio-toggle { display: none; }
        .app-shell[data-app-mode="arena"] .arena-audio-toggle { display: block; }
        /* Poke Arena 앱은 원래 포켓몬 카드 없이 쓰는 앱이라 "카드가 없어도 괜찮아요" 문구가
           불필요하다(Snap Mon 앱/웹 벤치의 덱스 아레나 탭에서는 그대로 보인다). */
        .app-shell[data-app-mode="arena"] .arena-no-card-msg { display: none !important; }
        /* Poke Arena: 배틀상세(설명 + 읽기 버튼)를 '배틀결과' 화면(#screenBattle)에 표시.
           재생 버튼(.btn-battle-play)은 이 안에서 숨겨지고 하단 고정 바가 대신 누른다. */
        #arenaResult { width: 100%; max-width: 640px; font-size: 16px; line-height: 1.6; }
        #arenaResult:empty { display: none; }
        #arenaResult h1 { font-size: 26px; }
        #arenaResult h2 { font-size: 22px; }
        #arenaResult h3 { font-size: 18px; }
        /* 배틀로그: 기본 접힘. summary 탭으로 펼침 */
        #arenaResult .battle-log-fold {
            margin: 12px 0 18px;
            border: 1px solid #3a3a5c;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.03);
            overflow: hidden;
        }
        #arenaResult .battle-log-fold > summary {
            cursor: pointer;
            list-style: none;
            padding: 12px 14px;
            font-weight: 700;
            font-size: 15px;
            color: #c4b5fd;
            user-select: none;
            -webkit-user-select: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        #arenaResult .battle-log-fold > summary::-webkit-details-marker { display: none; }
        #arenaResult .battle-log-fold > summary::before {
            content: '▸';
            display: inline-block;
            transition: transform .15s ease;
            color: #a78bfa;
        }
        #arenaResult .battle-log-fold[open] > summary::before {
            transform: rotate(90deg);
        }
        #arenaResult .battle-log-hint {
            font-weight: 500;
            font-size: 12px;
            color: #8b90a5;
        }
        #arenaResult .battle-log-fold[open] .battle-log-hint {
            display: none;
        }
        #arenaResult .battle-log-fold > *:not(summary) {
            padding: 0 14px 14px;
            color: #c8cce0;
            font-size: 14px;
            line-height: 1.65;
        }
        /* 배틀결과 화면 전용 하단 액션 바(인스타 촬영 버튼처럼 스크롤 안 하고 떠 있음).
           바 자체는 투명 오버레이(position:fixed)라 뒤쪽 배틀상세가 그대로 비치고, 버튼만 둥둥
           떠 보인다. 배틀결과 화면 + 재생 가능한 배틀이 있을 때(.available)만 노출된다.
           주 액션: '배틀 보기'(#arenaResult 의 .btn-battle-play 대신 누름).
           보조 액션: '새로운 배틀'(포켓몬 아레나 탭으로 복귀). */
        .battle-view-bar {
            position: fixed;
            left: 0; right: 0;
            /* 하단 탭바 위로 띄운다(엣지투엣지 안전영역 + 탭바 높이 + 여유 간격). */
            bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
            z-index: 40;
            display: none;
            justify-content: center;
            align-items: center;
            gap: 10px;
            padding: 0 12px;
            box-sizing: border-box;
            pointer-events: none;   /* 바 영역은 투명·통과(스크롤/탭 그대로), 버튼만 클릭 가능 */
        }
        .app-shell[data-active-screen="result"] .battle-view-bar.available { display: flex; }
        .battle-view-fab {
            pointer-events: auto;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 32px;
            border: none;
            border-radius: 34px;      /* 꾹 눌린 동그라미(알약) 모양 */
            background: #16a34a;
            color: #fff;
            font-size: 19px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 8px 24px rgba(22, 163, 74, 0.5);
            transition: transform 0.1s, background 0.15s, border-color 0.15s;
            font-family: inherit;
        }
        .battle-view-fab:active { transform: scale(0.94); }
        .battle-view-fab-ico { font-size: 24px; line-height: 1; }
        /* '새로운 배틀': 배틀 보기보다 덜 튀게(아웃라인·작은 패딩·약한 그림자) */
        .battle-view-fab-secondary {
            padding: 12px 20px;
            font-size: 15px;
            font-weight: 700;
            background: rgba(30, 34, 52, 0.92);
            color: #c8cce0;
            border: 1px solid #3a3a5c;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
        }
        .battle-view-fab-secondary .battle-view-fab-ico { font-size: 18px; }
        .battle-view-fab-secondary:hover {
            border-color: #6c63ff;
            color: #e8eaf8;
            background: rgba(40, 44, 68, 0.95);
        }
        /* 화면 전환 시 살짝 떠오르는 진입 애니메이션(가로 오버플로우 회피 위해 세로만 이동) */
        .app-content.screen-enter { animation: screenEnter 0.18s ease; }
        @keyframes screenEnter {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: none; }
        }

        /* ===== 덱스 아레나 (모의 배틀) ===== */
        .screen-arena {
            width: 100%;
            max-width: 640px;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 하단에 고정된 '아레나 시작' 버튼(.arena-start-bar)에 마지막 슬롯이 가리지
               않도록 아래 여백을 넉넉히(.screen-battle의 동일한 처리와 맞춤). */
            padding: 8px 16px 120px;
            box-sizing: border-box;
        }
        .arena-head { text-align: center; margin: 8px 0 18px; }
        .arena-title { font-size: 22px; font-weight: 800; color: #fff; margin: 0; }
        .arena-sub { font-size: 15px; color: #8b90a5; margin: 6px 0 0; line-height: 1.5; width: 100%; box-sizing: border-box; text-align: center; }
        .arena-mode-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
        .arena-mode-content.hidden { display: none !important; }
        .arena-custom {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 14px;
            margin-top: 4px;
            background: #1c1f2b;
            border: 1px solid #2e3147;
            border-radius: 12px;
            padding: 10px 16px;
            width: 100%;
            box-sizing: border-box;
        }
        .arena-stepper { display: flex; align-items: center; gap: 10px; color: #cbd5e1; font-weight: 700; white-space: nowrap; }
        .arena-team-size-split {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            flex-wrap: wrap;
        }
        .arena-team-size-unified { display: flex; align-items: center; justify-content: center; }
        .arena-team-size-unified.hidden,
        .arena-team-size-split.hidden { display: none; }
        .arena-team-size-unified .arena-count { min-width: 2.4em; }
        .arena-step-btn {
            width: 30px; height: 30px;
            border-radius: 50%;
            border: 1px solid #3a3a5c;
            background: #232637;
            color: #fff;
            font-size: 19px;
            line-height: 1;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }
        .arena-step-btn:active { transform: scale(0.92); }
        .arena-count { min-width: 20px; text-align: center; font-size: 18px; }
        
        /* 드래프트 토글 스위치. width:100%로 줘서 위 좌/우 스테퍼 줄과 절대 한 줄에 같이
           끼지 않고(.arena-custom의 flex-wrap:wrap과 맞물려) 항상 자기 줄을 갖는다 - 세로
           모드 좁은 화면에서 "드래프트" 글자가 억지로 한 줄에 끼워지다 "드래"/"프트"로
           쪼개지던 문제 수정. 구분선도 왼쪽 세로선 대신 위쪽 가로선으로 바꿨다. */
        .draft-toggle-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid #3a3a5c;
        }
        .draft-toggle-label {
            font-size: 12px;
            font-weight: 700;
            color: #8b90a5;
            white-space: nowrap;
        }
        /* AI배틀 전용 드래프트 토글 묶음. 모의배틀에선 .hidden */
        .draft-toggle-group {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .draft-toggle-group.hidden {
            display: none;
        }
        /* 전체 랜덤 토글 묶음(모의/AI). 네트워크배틀에선 .hidden */
        .arena-full-random-group {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .arena-full-random-group.hidden {
            display: none;
        }
        /* 드래프트 토글과 한 줄에 나란히 놓일 때 앞 여백 */
        .draft-toggle-group:not(.hidden) + .arena-full-random-group {
            margin-left: 14px;
        }
        .draft-toggle-switch {
            position: relative;
            display: inline-block;
            width: 38px;
            height: 22px;
            margin: 0;
        }
        .draft-toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .draft-toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: #1a1d27;
            border: 1px solid #3a3a5c;
            transition: .3s;
            border-radius: 22px;
        }
        .draft-toggle-slider:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 3px;
            bottom: 3px;
            background-color: #6c7089;
            transition: .3s;
            border-radius: 50%;
        }
        .draft-toggle-switch input:checked + .draft-toggle-slider {
            background-color: #625df5;
            border-color: #625df5;
        }
        .draft-toggle-switch input:checked + .draft-toggle-slider:before {
            transform: translateX(16px);
            background-color: white;
        }
        /* 허용 세대(모의배틀/AI배틀 공통) - 위 드래프트/전체랜덤 토글 줄과 같은 구분선
           스타일로 아래에 이어붙인다. 버튼/패널 자체는 검색 다이얼로그의 세대별 필터
           (.arena-gen-toggle/.arena-gen-panel/.arena-gen-chip)를 그대로 재사용한다. */
        .arena-allowed-gen-row {
            width: 100%;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid #3a3a5c;
        }
        .arena-allowed-gen-row .arena-gen-panel {
            margin-top: 6px;
        }

        .arena-vs-mini { color: #a78bfa; font-weight: 800; }
        .arena-field {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            width: 100%;
            margin-top: 22px;
        }
        .arena-side {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            align-content: flex-start;
        }
        .arena-vs { flex-shrink: 0; font-size: 20px; font-weight: 800; color: #a78bfa; }
        .arena-slot {
            width: 93px;
            aspect-ratio: 63 / 88;
            border: 2px dashed #3a3a5c;
            border-radius: 10px;
            background: #1c1f2b;
            color: #6c7089;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            cursor: pointer;
            transition: border-color 0.15s, transform 0.1s;
        }
        .arena-side.left .arena-slot { border-color: #33507e; }
        .arena-side.right .arena-slot { border-color: #7e3a4a; }
        .arena-slot:active { transform: scale(0.95); }
        .arena-slot-plus { font-size: 34px; }
        .arena-slot-label { font-size: 15px; }
        /* 드래프트 모드(AI배틀/네트워크배틀 공통): 지금 채워야 하는 빈 슬롯을 밝게 강조해서
           "이 자리(들)를 골라야 한다"는 걸 한눈에 알 수 있게 한다(poke-arena.js
           needsPickHighlight). */
        .arena-slot.arena-slot-needed {
            border-style: solid;
            border-color: #facc15;
            background: #2a2412;
            color: #fde68a;
            box-shadow: 0 0 0 1px #facc15, 0 0 10px rgba(250, 204, 21, 0.5);
            animation: arena-slot-needed-pulse 1.4s ease-in-out infinite;
        }
        @keyframes arena-slot-needed-pulse {
            0%, 100% { box-shadow: 0 0 0 1px #facc15, 0 0 10px rgba(250, 204, 21, 0.5); }
            50% { box-shadow: 0 0 0 1px #facc15, 0 0 16px rgba(250, 204, 21, 0.85); }
        }
        .arena-toast {
            position: fixed;
            left: 50%;
            bottom: 120px;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.85);
            color: #fff;
            padding: 10px 16px;
            border-radius: 20px;
            font-size: 15px;
            font-weight: 600;
            z-index: 5000;
            opacity: 0;
            transition: opacity 0.2s ease;
            pointer-events: none;
        }
        .arena-toast.show { opacity: 1; }

        /* AI/네트워크 상대 포켓몬 클릭 — 스킬 툴팁과 비슷한 작은 상성 팝업(모달 아님) */
        .opp-matchup-popup {
            position: fixed;
            z-index: 99999;
            box-sizing: border-box;
            min-width: 200px;
            padding: 10px 12px;
            background: rgba(15, 23, 42, 0.96);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 10px;
            color: #e5e7eb;
            font-size: 12px;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            pointer-events: none;
        }
        .opp-matchup-head {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .opp-matchup-img {
            width: 48px;
            height: 48px;
            object-fit: contain;
            flex-shrink: 0;
            background: rgba(0, 0, 0, 0.25);
            border-radius: 8px;
        }
        .opp-matchup-meta { min-width: 0; flex: 1; }
        .opp-matchup-no {
            font-size: 11px;
            font-weight: 700;
            color: #94a3b8;
            font-variant-numeric: tabular-nums;
        }
        .opp-matchup-name {
            font-size: 14px;
            font-weight: 800;
            color: #fff;
            line-height: 1.25;
            word-break: keep-all;
        }
        .opp-matchup-types {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 4px;
        }
        .opp-matchup-cols {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .opp-matchup-col-title {
            font-size: 11px;
            font-weight: 800;
            margin-bottom: 5px;
            line-height: 1.3;
        }
        .opp-matchup-col.is-good .opp-matchup-col-title { color: #4ade80; }
        .opp-matchup-col.is-bad .opp-matchup-col-title { color: #fbbf24; }
        .opp-matchup-badge-row {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        .opp-matchup-type-badge {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            font-size: 10px;
            font-weight: 700;
            color: #fff;
            padding: 2px 5px 2px 3px;
            border-radius: 999px;
            text-shadow: 0 1px 1px rgba(0,0,0,0.45);
            line-height: 1.2;
        }
        .opp-matchup-empty {
            color: #6c7089;
            font-size: 11px;
            font-weight: 600;
        }

        /* 선택 완료된 슬롯: 스프라이트 이미지 표시. 오른쪽 팀은 좌우반전(왼쪽을 바라보게). */
        .arena-slot.filled { border-style: solid; background: #232637; padding: 0; overflow: hidden; position: relative; }
        .arena-side.left .arena-slot.filled { border-color: #3b82f6; }
        .arena-side.right .arena-slot.filled { border-color: #ef4444; }
        .arena-slot-img { width: 100%; height: 100%; object-fit: contain; }
        .arena-side.right .arena-slot-img { transform: scaleX(-1); }
        .arena-slot-clear {
            position: absolute; top: 3px; left: 3px;
            width: 27px; height: 27px; border-radius: 50%;
            border: none; background: rgba(0,0,0,0.6); color: #fff;
            font-size: 17px; line-height: 1; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            padding: 0;
        }
        .arena-slot-fav {
            position: absolute; top: 3px; right: 3px;
            width: 28px; height: 28px; border-radius: 50%;
            border: none; background: rgba(0,0,0,0.5);
            font-size: 17px; line-height: 1; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            padding: 0;
            filter: grayscale(1) opacity(0.85);
        }
        .arena-slot-fav.on { filter: none; }
        .arena-slot-name {
            position: absolute; left: 0; right: 0; bottom: 0;
            font-size: 14px; text-align: center; color: #e5e7eb;
            background: rgba(0,0,0,0.55); padding: 2px 0;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .arena-slot-info {
            position: absolute; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.7);
            display: flex; flex-direction: column; align-items: center;
            padding: 3px 2px 4px 2px;
        }
        .arena-slot-name-new {
            font-size: 13px; font-weight: bold; color: #fff;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; text-align: center;
        }
        .arena-slot-types {
            display: flex; gap: 3px; margin-top: 2px;
        }
        .arena-type-badge {
            display: inline-flex; align-items: center; gap: 2px;
            font-size: 9px; padding: 1px 4px 1px 2px; border-radius: 3px;
            color: #fff; font-weight: 700;
            text-shadow: 0 1px 1px rgba(0,0,0,0.6);
            line-height: 1.2;
        }
        /* 타입 필터 칩 아이콘 (색 점 대체) */
        .arena-type-icon {
            width: 14px; height: 14px;
        }
        .arena-start-btn {
            padding: 13px 30px;
            border-radius: 26px;
            border: none;
            background: #6c63ff;
            color: #fff;
            font-size: 18px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 8px 24px rgba(108, 99, 255, 0.5);
            transition: opacity 0.2s, transform 0.1s;
        }
        .arena-start-btn:active { transform: scale(0.96); }
        .arena-start-btn:disabled { background: #2e3147; color: #6c7089; cursor: not-allowed; box-shadow: none; }
        /* 배틀 결과가 현재 선택 그대로일 때는 '아레나 시작' 대신 '배틀 보기'로 바뀐다. */
        .arena-start-btn.view-mode { background: #16a34a; box-shadow: 0 8px 24px rgba(22, 163, 74, 0.5); }
        /* 하단 시작 안내 — 어두운 바에 묻히지 않게 밝은 본문색. 준비 완료 시 강조색. */
        .arena-start-hint {
            font-size: 14px;
            font-weight: 700;
            color: #e2e8f0;
            margin: 0 0 8px;
            min-height: 14px;
            text-align: center;
            letter-spacing: -0.01em;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
            transition: color 0.2s ease;
        }
        .arena-start-hint.is-ready {
            color: #fde68a;
            text-shadow: 0 0 12px rgba(253, 230, 138, 0.35), 0 1px 3px rgba(0, 0, 0, 0.5);
        }
        .arena-start-hint.is-loading {
            color: #c4b5fd;
        }
        /* 상대가 "아레나 시작"을 누름 — 힌트·버튼을 더 급하게 보이게 */
        .arena-start-hint.peer-wants-start {
            color: #fbbf24;
            font-size: 15px;
            font-weight: 800;
            line-height: 1.35;
            white-space: pre-line;
            max-width: min(92vw, 360px);
            padding: 8px 12px;
            border-radius: 12px;
            background: rgba(251, 191, 36, 0.14);
            border: 1px solid rgba(251, 191, 36, 0.45);
            text-shadow: 0 0 14px rgba(251, 191, 36, 0.4), 0 1px 3px rgba(0, 0, 0, 0.55);
            animation: arena-peer-wants-hint 1.2s ease-in-out infinite;
        }
        @keyframes arena-peer-wants-hint {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.03); opacity: 0.92; }
        }
        .arena-start-btn.peer-wants-start {
            background: linear-gradient(180deg, #f59e0b 0%, #ea580c 100%);
            box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.45), 0 10px 28px rgba(234, 88, 12, 0.55);
            animation: arena-peer-wants-btn 1s ease-in-out infinite;
        }
        @keyframes arena-peer-wants-btn {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.06); }
        }
        .arena-start-btn.peer-wants-start:active { transform: scale(0.97); }

        /* 덱스 아레나 화면 상단 모드 탭(모의배틀/AI배틀/네트워크배틀) - .app-content를 스크롤해도
           화면 상단에 붙박이로 고정된다(아래 내용만 그 밑으로 스크롤됨). */
        .arena-mode-tabs-sticky {
            position: sticky;
            top: 0;
            z-index: 5;
            background: #0f1117;
            padding-top: 4px;
        }

        /* 덱스 아레나 화면 전용: 탭바 바로 위에 스크롤 없이 고정되는 '아레나 시작' 버튼
           ('배틀 보기' 버튼 .battle-view-bar와 동일한 위치·방식). arena 화면이 활성일 때만
           보이고(그 외 화면은 #screenArena 자체가 숨겨지므로 같이 숨음), 바 영역 자체는
           투명·통과라 버튼/힌트만 떠 보인다. */
        .arena-start-bar {
            position: fixed;
            left: 0; right: 0;
            bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
            z-index: 40;
            display: none;
            flex-direction: column;
            align-items: center;
            pointer-events: none;
        }
        .app-shell[data-active-screen="arena"] .arena-start-bar { display: flex; }
        .arena-start-bar .arena-start-btn { pointer-events: auto; }

        /* ===== 배틀 대결 구도 미리보기 (배틀결과 화면 상단, 배틀상세 위) =====
           초상화 vs 초상화 - 각 초상화 아래 포켓몬 이름만 크게 보여준다(이름 텍스트 타이틀은 없앰).
           1:1~4:4 대응. flex-wrap은 폭에 따라 3+1처럼 들쭉날쭉 줄바꿈돼서, 2열 그리드로
           고정한다(1=1칸, 2=1행2열, 3=2+1, 4=2×2). 내용이 있을 때만 보인다(:empty 숨김). */
        .arena-matchup-preview {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
            width: 100%;
        }
        /* 스크립트무비가 배틀상세 헤더 앞에 넣는 보라색 'A VS B' 박스(.battle-matchup-title)는
           Poke Arena 배틀결과에선 대결 구도와 중복이라 숨긴다(웹 벤치의 #result에선 그대로 둔다). */
        #arenaResult .battle-matchup-title { display: none; }
        .arena-matchup-sides {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
        }
        .arena-matchup-team {
            display: grid;
            grid-template-columns: repeat(2, max-content);
            justify-content: center;
            justify-items: center;
            align-items: start;
            gap: 8px 10px;
            max-width: 47%;
        }
        /* 1마리는 2열 그리드 쓰면 한쪽에 치우치므로 1칸 */
        .arena-matchup-team[data-count="1"] {
            grid-template-columns: max-content;
        }
        .arena-matchup-mon {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 68px;
        }
        .arena-matchup-mon img,
        .arena-matchup-mon-placeholder {
            width: 58px;
            height: 58px;
        }
        .arena-matchup-mon img {
            object-fit: contain;
            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
        }
        .arena-matchup-team.right-team .arena-matchup-mon img {
            transform: scaleX(-1);
        }
        .arena-matchup-mon-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
        }
        .arena-matchup-mon-name {
            margin-top: 6px;
            font-size: 14px;
            font-weight: 700;
            color: #d8d8ff;
            background: rgba(0,0,0,0.35);
            padding: 3px 9px;
            border-radius: 999px;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .arena-matchup-vs {
            flex: 0 0 auto;
            font-size: 22px;
            font-weight: 800;
            color: #a78bfa;
        }

        /* 팀별 인원수에 따른 반응형 사이즈 조정 (1:1, 2:2, 3:3, 4:4) */
        .arena-matchup-team[data-count="1"] .arena-matchup-mon { width: 136px; }
        .arena-matchup-team[data-count="1"] .arena-matchup-mon img,
        .arena-matchup-team[data-count="1"] .arena-matchup-mon-placeholder { width: 116px; height: 116px; font-size: 62px; }
        .arena-matchup-team[data-count="1"] .arena-matchup-mon-name { font-size: 18px; margin-top: 10px; padding: 4px 12px; }

        .arena-matchup-team[data-count="2"] .arena-matchup-mon { width: 80px; }
        .arena-matchup-team[data-count="2"] .arena-matchup-mon img,
        .arena-matchup-team[data-count="2"] .arena-matchup-mon-placeholder { width: 70px; height: 70px; font-size: 42px; }
        .arena-matchup-team[data-count="2"] .arena-matchup-mon-name { font-size: 14px; margin-top: 6px; }

        .arena-matchup-team[data-count="3"] .arena-matchup-mon { width: 72px; }
        .arena-matchup-team[data-count="3"] .arena-matchup-mon img,
        .arena-matchup-team[data-count="3"] .arena-matchup-mon-placeholder { width: 62px; height: 62px; font-size: 36px; }
        .arena-matchup-team[data-count="3"] .arena-matchup-mon-name { font-size: 13px; margin-top: 5px; }

        /* 4:4 — 2×2 그리드용 크기(행이 두 줄이라 기본보다 살짝 여유) */
        .arena-matchup-team[data-count="4"] .arena-matchup-mon { width: 70px; }
        .arena-matchup-team[data-count="4"] .arena-matchup-mon img,
        .arena-matchup-team[data-count="4"] .arena-matchup-mon-placeholder { width: 60px; height: 60px; font-size: 34px; }
        .arena-matchup-team[data-count="4"] .arena-matchup-mon-name { font-size: 13px; margin-top: 5px; }

        /* ===== 덱스 아레나 포켓몬 검색 다이얼로그 ===== */
        .arena-search-overlay {
            display: none;
            position: fixed; inset: 0;
            z-index: 10001;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            align-items: flex-start;
            justify-content: center;
            /* viewport-fit=cover라 오버레이가 하단 내비게이션 바 밑까지 깔린다. 그 영역만큼
               (env(safe-area-inset-bottom)) 아래 패딩을 더 줘서, 박스(결과 목록) 하단이 내비바
               뒤로 잘려 마지막 항목이 안 보이고 스크롤이 안 닿는 문제를 막는다. */
            padding: 40px 16px calc(16px + env(safe-area-inset-bottom, 0px));
            box-sizing: border-box;
            -webkit-user-select: none;
            user-select: none;
        }
        .arena-search-overlay img {
            -webkit-user-drag: none;
            -khtml-user-drag: none;
            -moz-user-drag: none;
            -o-user-drag: none;
            user-drag: none;
        }
        .arena-search-overlay.show { display: flex; }
        .arena-search-box {
            width: 100%;
            max-width: 440px;
            max-height: 100%;
            display: flex;
            flex-direction: column;
            background: #1a1d27;
            border: 1px solid #2e3147;
            border-radius: 16px;
            overflow: hidden;
        }
        .arena-search-head {
            flex-shrink: 0;
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 12px;
            border-bottom: 1px solid #2e3147;
        }
        .arena-search-title { color: #fff; font-weight: 700; font-size: 17px; }
        .arena-search-close {
            background: none; border: none; color: #8b90a5;
            font-size: 20px; cursor: pointer; padding: 4px 8px;
        }
        .arena-search-head-actions { display: flex; align-items: center; gap: 6px; }
        .arena-filter-reset {
            background: none; border: 1px solid #3a3a5c; color: #8b90a5;
            font-size: 14px; font-weight: 700; border-radius: 8px;
            padding: 5px 10px; cursor: pointer; white-space: nowrap;
            user-select: none; -webkit-user-select: none;
        }
        .arena-filter-reset:active { background: #232637; }
        
        
        .dp-stepper {
            display: flex;
            align-items: center;
            background: #181a25;
            border: 1px solid #3a3a5c;
            border-radius: 4px;
            overflow: hidden;
        }
        .dp-step-btn {
            background: #232637;
            color: white;
            border: none;
            width: 26px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            padding: 0;
            line-height: 1;
        }
        .dp-step-btn:active {
            background: #3a3a5c;
        }
        .dp-stepper input {
            width: 24px;
            text-align: center;
            background: transparent;
            border: none;
            color: white;
            font-size: 14px;
            font-weight: bold;
            pointer-events: none;
            padding: 0;
            margin: 0;
        }
        .dp-stepper-btn {
            background: #3a3a5c;
            border: none;
            color: white;
            width: 26px;
            height: 26px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .dp-stepper-btn:active {
            background: #4b45cc;
        }
        /* Hide default spin buttons */
        input[type=number]::-webkit-inner-spin-button, 
        input[type=number]::-webkit-outer-spin-button { 
            -webkit-appearance: none; 
            margin: 0; 
        }
        input[type=number] {
            -moz-appearance: textfield;
        }
        .arena-search-random-float {
            position: absolute;
            top: 12px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            padding: 6px 16px;
            border-radius: 20px;
            background: linear-gradient(135deg, rgba(98, 93, 245, 0.35), rgba(139, 92, 246, 0.35));
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
            border: none;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(98, 93, 245, 0.15);
            display: flex;
            align-items: center;
            gap: 6px;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
        }
        .arena-search-random-float:active {
            background: linear-gradient(135deg, rgba(75, 69, 204, 0.5), rgba(107, 64, 214, 0.5));
        }
        .arena-search-inputrow { flex-shrink: 0; display: flex; gap: 8px; padding: 10px 12px; }
        .arena-search-input {
            flex: 1;
            padding: 9px 12px;
            border-radius: 8px;
            border: 1px solid #3a3a5c;
            background: #232637;
            color: #fff;
            font-size: 16px;
            outline: none;
        }
        .arena-search-input:focus { border-color: #6c63ff; }
        .arena-search-mic {
            flex-shrink: 0;
            width: 44px;
            border-radius: 10px;
            border: 1px solid #3a3a5c;
            background: #232637;
            font-size: 20px;
            cursor: pointer;
        }
        .arena-search-mic.listening {
            background: #ef4444; border-color: #ef4444; color: #fff;
            box-shadow: 0 0 0 0 rgba(239,68,68,0.6);
            animation: micRing 1.1s ease-out infinite;
        }
        @keyframes micRing {
            0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
            100% { box-shadow: 0 0 0 12px rgba(239,68,68,0); }
        }
        /* 음성인식 진행 배너 - 듣는 중일 때만(.show) 크게 표시해 상태를 분명히 알린다. */
        .arena-voice-status {
            display: none;
            width: calc(100% - 32px);
            margin: 0 16px 12px;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(90deg, #6c63ff, #8b5cf6);
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            box-sizing: border-box;
        }
        .arena-voice-status.show { display: flex; }
        .arena-voice-dot {
            width: 11px; height: 11px; border-radius: 50%;
            background: #ff5b5b; flex-shrink: 0;
            box-shadow: 0 0 8px rgba(255,91,91,0.9);
            animation: voiceBlink 1s step-start infinite;
        }
        @keyframes voiceBlink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0.25; } }
        .arena-voice-mic { font-size: 22px; flex-shrink: 0; animation: voicePulse 0.85s ease-in-out infinite; }
        @keyframes voicePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.28); } }
        .arena-voice-text { flex: 1; text-align: left; }
        .arena-voice-stop { font-size: 13px; font-weight: 700; opacity: 0.85; white-space: nowrap; }
        .arena-search-results {
            flex: 1 1 0%;
            /* flex 아이템 기본 min-height:auto면 내용만큼 늘어나 박스에 잘려 끝까지 스크롤이
               안 된다. min-height:0으로 풀어야 이 영역이 남은 높이 안에서 스크롤된다. */
            min-height: 0;
            overflow-y: auto;
            /* float 버튼이 떠있으므로 상단 패딩은 기본만 유지 */
            padding: 12px 8px calc(16px + env(safe-area-inset-bottom, 0px));
            -webkit-overflow-scrolling: touch;
            position: relative;
            z-index: 1;
        }
        .arena-search-item {
            display: flex;
            align-items: center;
            width: 100%;
            border-radius: 10px;
            user-select: none;
            -webkit-user-select: none;
        }
        .arena-search-item:active { background: #232637; }
        .arena-search-pick {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 10px;
            border: none;
            background: none;
            color: #e5e7eb;
            font-size: 17px;
            text-align: left;
            cursor: pointer;
        }
        .arena-search-pick span:not(.arena-search-num) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .arena-search-num {
            flex-shrink: 0;
            width: 64px;
            text-align: left;
            color: #8b90a5;
            font-size: 14px;
            font-variant-numeric: tabular-nums;
            text-align: right;
        }
        .arena-search-section { font-size: 14px; font-weight: 700; color: #8b90a5; padding: 10px 10px 4px; }
        .fav-heart {
            flex-shrink: 0;
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            padding: 6px 12px;
            filter: grayscale(1) opacity(0.75);
        }
        .fav-heart.on { filter: none; }
        .arena-search-thumb {
            width: 40px; height: 40px; flex-shrink: 0;
            object-fit: contain;
            background: #232637;
            border-radius: 8px;
        }
        .arena-search-empty { color: #6c7089; font-size: 15px; text-align: center; padding: 20px; }
        .arena-search-loose-hint {
            color: #8b93b8; font-size: 12px; text-align: center;
            padding: 8px 12px; border-bottom: 1px solid #2e3147;
        }
        /* 이전/다음 페이지 (검색 결과 40마리 단위) */
        .arena-search-pager-container {
            flex-shrink: 0;
            border-top: 1px solid #2e3147;
            background: #181a25;
            padding-bottom: 8px;
        }
        .arena-search-pager-container:empty {
            display: none;
        }
        .arena-search-pager {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            padding: 12px 4px 4px;
        }
        .arena-pager-btn {
            background: #232637; border: 1px solid #3a3a5c; color: #cbd5e1;
            font-size: 14px; font-weight: 700; border-radius: 10px;
            padding: 8px 12px; cursor: pointer; white-space: nowrap;
        }
        .arena-pager-btn:active { background: #2e3147; }
        .arena-pager-btn:disabled { opacity: 0.4; cursor: default; }
        .arena-pager-info { color: #8b90a5; font-size: 15px; font-weight: 700; min-width: 48px; text-align: center; }
        /* 세대별 필터 */
        .arena-gen-filter { flex-shrink: 0; padding: 0 12px 8px; }
        .arena-double-panels { padding: 0 12px 0; margin-top: -4px; }
        .arena-gen-toggle {
            display: flex; align-items: center; gap: 6px; width: 100%;
            padding: 8px 10px; border-radius: 8px;
            border: 1px solid #3a3a5c; background: #232637;
            color: #cbd5e1; font-size: 14px; font-weight: 700; cursor: pointer;
        }
        .arena-gen-summary { margin-left: auto; color: #a78bfa; font-weight: 700;
            max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .arena-gen-caret { color: #8b90a5; transition: transform .15s; }
        .arena-gen-toggle[aria-expanded="true"] .arena-gen-caret { transform: rotate(180deg); }
        /* 네트워크배틀: 상대가 자기 허용 세대를 바꾸면 이 기기에 알려주는 표시 - 열어서
           확인하면(클릭) 사라진다(peer-gens-changed 클래스 토글, poke-arena.js). */
        .arena-gen-toggle.peer-gens-changed { border-color: #ef4444; box-shadow: 0 0 0 1px #ef4444; }
        .arena-gen-panel { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px; }
        .arena-gen-panel.hidden { display: none; }
        .arena-gen-chip {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 7px 12px; border-radius: 999px;
            border: 1px solid #3a3a5c; background: #232637;
            color: #cbd5e1; font-size: 14px; font-weight: 700; cursor: pointer;
            user-select: none; -webkit-user-select: none;
        }
        .arena-gen-chip input { accent-color: #6c63ff; width: 15px; height: 15px; margin: 0; cursor: pointer; }
        .arena-gen-chip.checked { background: #2b2f52; border-color: #6c63ff; color: #fff; }
        /* 타입별 필터 - 레이아웃은 세대 필터(.arena-gen-*)를 재사용하고, 타입 색 점만 추가한다 */
        .arena-type-dot {
            width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
        }
        /* 좋아요만 보기 토글 - on/off 버튼(펼침 패널 없음). 켜지면 분홍으로 강조. */
        .arena-fav-toggle.on { background: #3a1f2e; border-color: #f472b6; color: #fff; }
        .arena-fav-toggle.on .arena-gen-summary { color: #f9a8d4; }
        /* 좋아요만 보기(절반) + 아무거나(랜덤, 절반) 한 줄에 나란히 */
        .arena-fav-random-row, .arena-double-filter-row { display: flex; gap: 8px; }
        .arena-fav-random-row .arena-gen-toggle, .arena-double-filter-row .arena-gen-toggle { width: auto; flex: 1 1 0; min-width: 0; }
        .arena-random-pick { justify-content: center; }

        /* ===== 배틀 대결 구도 표시 (배틀상세 헤더 바로 위) ===== */
        .battle-matchup-title {
            font-size: 15px;
            font-weight: 700;
            color: #a78bfa;
            background: #232637;
            border: 1px solid #3a3a5c;
            border-radius: 8px;
            padding: 6px 12px;
            margin: 20px 0 -4px;
            text-align: center;
        }

        /* ===== TTS 읽기 버튼 ===== */
        .btn-tts {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            background: #232637;
            border: 1px solid #3a3a5c;
            border-radius: 8px;
            color: #a78bfa;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            margin-left: 10px;
            font-family: inherit;
            white-space: nowrap;
            vertical-align: middle;
        }
        .btn-tts:hover {
            background: #2e3147;
            color: #fff;
            border-color: #6c63ff;
        }
        .btn-tts.playing {
            background: #6c63ff;
            color: #fff;
            border-color: #6c63ff;
        }
        .btn-tts.loading {
            color: #a78bfa;
            border-color: #6c63ff;
            cursor: wait;
        }
        .btn-tts.loading::before {
            content: '';
            width: 9px;
            height: 9px;
            flex-shrink: 0;
            border: 2px solid currentColor;
            border-top-color: transparent;
            border-radius: 50%;
            animation: btn-tts-spin 0.7s linear infinite;
        }
        @keyframes btn-tts-spin {
            to { transform: rotate(360deg); }
        }

        /* 모달 공통 (히스토리 / 사진 옵션 등) */
        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            z-index: 100;
            align-items: center;
            justify-content: center;
        }
        .modal-overlay.show { display: flex; }
        .modal-box {
            background: #1a1d27;
            border: 1px solid #3a3a5c;
            border-radius: 16px;
            padding: 28px 24px;
            width: 88%;
            max-width: 360px;
            box-sizing: border-box;
        }
        .modal-box h2 { margin: 0 0 16px; font-size: 18px; color: #a78bfa; }
        .modal-box p { margin: 0 0 12px; font-size: 13px; color: #ccc; line-height: 1.5; }
        #serverUrlInput {
            width: 100%;
            box-sizing: border-box;
            background: #0f1117;
            border: 1px solid #3a3a5c;
            border-radius: 8px;
            color: #fff;
            padding: 12px;
            font-size: 15px;
            margin-bottom: 16px;
        }
        .modal-actions { display: flex; gap: 10px; }
        .modal-actions button {
            flex: 1;
            padding: 12px;
            border-radius: 8px;
            border: none;
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
        }
        #optCancelBtn { background: #2e3147; color: #a78bfa; }

        /* 개발자 노트 모달 - note/index.html을 iframe으로 그대로 띄운다. 내용은
           note/style.css가 자체적으로 책임지므로 여기선 iframe을 담는 틀만 잡는다. */
        .dev-note-modal-box {
            width: 92%;
            max-width: 480px;
            height: 78vh;
            max-height: 640px;
            padding: 16px;
            display: flex;
            flex-direction: column;
        }
        .dev-note-modal-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            flex-shrink: 0;
        }
        .dev-note-modal-head h2 { margin: 0; }
        .detail-rules-head-left {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }
        .detail-rules-lang {
            display: flex;
            gap: 4px;
            flex-shrink: 0;
        }
        .detail-rules-lang-btn {
            background: #14161f;
            border: 1px solid #2e3147;
            color: #8b90a5;
            font-size: 11px;
            font-weight: 650;
            padding: 3px 8px;
            border-radius: 999px;
            cursor: pointer;
            line-height: 1.3;
        }
        .detail-rules-lang-btn.is-active {
            color: #14161f;
            background: linear-gradient(90deg, #a78bfa, #f472b6);
            border-color: transparent;
        }
        .dev-note-modal-close {
            background: none;
            border: none;
            color: #a6adc8;
            font-size: 26px;
            cursor: pointer;
            padding: 0;
            line-height: 1;
        }
        .dev-note-frame {
            flex: 1;
            width: 100%;
            border: 1px solid #2e3147;
            border-radius: 10px;
            background: #1a1d27;
        }

        /* 상세규칙 모달 - 개발자 노트보다 훨씬 긴 글이라 dev-note-modal-box 기본 크기로는
           답답해서, 거의 풀스크린에 가깝게 키운다(모달 형태 자체는 유지). */
        .detail-rules-modal-box {
            width: 96%;
            max-width: 720px;
            height: 92vh;
            height: 92dvh;
            max-height: 92vh;
            max-height: 92dvh;
        }

        /* ===== Dropdown & Voice Modal ===== */
        .dropdown-menu { position: absolute; top: 100%; right: 0; background: #1a1d27; border: 1px solid #2e3147; border-radius: 8px; min-width: 190px; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.5); margin-top: 8px; }
        .dropdown-menu.hidden { display: none; }
        .modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            align-items: center;
            justify-content: center;
            z-index: 10000;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        .modal-content {
            background: #1a1d27;
            border: 1px solid #3a3a5c;
            border-radius: 16px;
            padding: 20px;
            width: 88%;
            max-width: 800px;
            box-sizing: border-box;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        }
        /* 면책/저작권 모달: 다이얼로그 박스 안에서만 헤더·푸터 고정, 본문만 스크롤
           (전체 화면 헤더/푸터가 아님) */
        .disclaimer-modal-content {
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 0;
        }
        .disclaimer-modal-header {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 14px 16px 0;
            border-bottom: 1px solid #2e3147;
            background: #1a1d27;
        }
        .disclaimer-modal-header-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        }
        .disclaimer-modal-title {
            font-size: 18px;
            margin: 0;
            color: #a78bfa;
            line-height: 1.3;
        }
        .disclaimer-modal-close {
            flex-shrink: 0;
            background: none;
            border: none;
            color: #a6adc8;
            font-size: 24px;
            line-height: 1;
            cursor: pointer;
            padding: 0 4px;
        }
        .disclaimer-modal-close:hover { color: #e2e8f0; }
        /* 다이얼로그 상단 탭(섹션 바로가기) — 헤더에 붙어 본문 스크롤과 무관하게 고정 */
        .disclaimer-modal-tabs {
            display: flex;
            gap: 6px;
            padding-bottom: 10px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .disclaimer-modal-tabs::-webkit-scrollbar { display: none; }
        .disclaimer-modal-tab {
            flex: 1 1 0;
            min-width: 0;
            padding: 8px 6px;
            border-radius: 8px;
            border: 1px solid #3a3a5c;
            background: rgba(255, 255, 255, 0.04);
            color: #a78bfa;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.25;
            cursor: pointer;
            white-space: nowrap;
            text-align: center;
            font-family: inherit;
        }
        .disclaimer-modal-tab:hover {
            border-color: rgba(167, 139, 250, 0.55);
            background: rgba(167, 139, 250, 0.1);
        }
        .disclaimer-modal-tab.is-active {
            border-color: #a78bfa;
            background: rgba(167, 139, 250, 0.18);
            color: #c4b5fd;
            box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.25);
        }
        .disclaimer-modal-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 14px 20px;
            line-height: 1.6;
            color: #e2e8f0;
            font-size: 14px;
            text-align: left;
            scroll-behavior: smooth;
        }
        .disclaimer-section {
            scroll-margin-top: 8px;
        }
        .disclaimer-section + .disclaimer-section {
            margin-top: 22px;
            padding-top: 18px;
            border-top: 1px solid #4b5563;
        }
        /* 세 소메뉴 제목: 기존 [저작권 표기…] 와 동일한 보라 톤 */
        .disclaimer-section-title {
            color: #a78bfa;
            margin: 0 0 15px;
            font-size: 16px;
            font-weight: 700;
            line-height: 1.4;
        }
        .disclaimer-section-title-en {
            font-size: 13px;
            color: #8b90a5;
            font-weight: 600;
        }
        .disclaimer-modal-footer {
            flex-shrink: 0;
            padding: 12px 20px 16px;
            border-top: 1px solid #2e3147;
            background: #161822;
        }
        .disclaimer-modal-footer-text {
            margin: 0 0 6px;
            font-size: 13px;
            color: #e2e8f0;
            line-height: 1.5;
        }
        .disclaimer-modal-footer-en {
            color: #9ca3af;
            font-size: 12px;
        }
        .disclaimer-modal-footer-contact {
            margin: 0;
            font-weight: bold;
            color: #a78bfa;
            font-family: monospace;
            font-size: 13px;
        }
        .dropdown-item { display: block; width: 100%; padding: 12px 16px; text-align: left; background: none; border: none; color: #cdd6f4; font-size: 14px; cursor: pointer; white-space: nowrap; }
        /* 폰트크기 조절 모달 슬라이더의 가/가 라벨 (작음↔큼 시각 힌트) */
        .ui-scale-label { color: #8b90a5; line-height: 1; flex-shrink: 0; }
        .ui-scale-label-sm { font-size: 12px; }
        .ui-scale-label-lg { font-size: 18px; }
        .ui-scale-slider { flex: 1; accent-color: #6c63ff; cursor: pointer; }
        /* 볼륨 설정 모달의 배경음/효과음 슬라이더 행 */
        .volume-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
        .volume-row-label { flex-shrink: 0; width: 68px; font-size: 14px; color: #cdd6f4; }
        .volume-slider { flex: 1; accent-color: #6c63ff; cursor: pointer; }
        .volume-row-value { flex-shrink: 0; width: 40px; text-align: right; font-size: 13px; color: #a78bfa; font-variant-numeric: tabular-nums; }
        .voice-layout { display: flex; gap: 10px; flex-direction: column; }
        .voice-column h3 { margin-top:0; margin-bottom: 8px; font-size: 16px; color: #a78bfa; border-bottom: 1px solid #2e3147; padding-bottom: 4px; }
        .voice-list { display: flex; flex-direction: column; gap: 6px; }
        .voice-item { padding: 10px; border: 1px solid #2e3147; border-radius: 6px; background: #181825; cursor: pointer; }
        .voice-item.selected { border-color: #6c63ff; border-width: 2px; }
        .voice-item.disabled { opacity: 0.5; pointer-events: none; }
        .voice-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
        .voice-name { font-weight: bold; font-size: 14px; }
        .voice-host { font-size: 10px; padding: 2px 4px; border-radius: 4px; background: #1e1e2e; border: 1px solid #2e3147; }
        .voice-desc { font-size: 12px; color: #a6adc8; }
        .host-typecast { color: #f87171; border-color: #f87171; }
        .host-clova { color: #4ade80; border-color: #4ade80; }
        .host-edge { color: #60a5fa; border-color: #60a5fa; }

        .mds-empty-state { padding: 24px; text-align: center; color: #a78bfa; font-size: 13px; }
        .mds-empty-state.hidden { display: none; }

        /* ===== Poke Arena 스플래시(로딩) 화면 =====
           피카츄 아이콘을 회색으로 깔고, 그 위에 같은 컬러 이미지를 아래→위로 채워(clip-path)
           로딩 진행을 표현한다. 이미지는 5MB짜리 원본(design/poke-arena-favi.png) 대신 서빙되는
           최적화 아이콘(poke-arena-icon-144.png, 35KB)을 쓴다. arena 모드에서만 JS가 켠다. */
        .splash-screen {
            display: none;
            position: fixed;
            /* body 의 zoom: var(--ui-scale) 을 상쇄해 스플래시는 항상 뷰포트 1x.
               (저장해 둔 화면 폰트 배율이 늦게 적용되면 아이콘/문구가 한 번 커지는
               점프가 난다 — 역 zoom + 박스 크기로 시각 크기를 고정한다.) */
            top: 0;
            left: 0;
            width: calc(100vw * var(--ui-scale, 1));
            height: calc(100vh * var(--ui-scale, 1));
            height: calc(100dvh * var(--ui-scale, 1));
            zoom: calc(1 / var(--ui-scale, 1));
            z-index: 100000;
            flex-direction: column; align-items: center; justify-content: center; gap: 24px;
            background: #0f1117;
            /* 하단 저작권 카드(~170px) + 내비바 여유 — 아이콘/Loading 과 겹침 방지 */
            padding:
                env(safe-area-inset-top, 0px)
                env(safe-area-inset-right, 0px)
                calc(190px + env(safe-area-inset-bottom, 0px))
                env(safe-area-inset-left, 0px);
            box-sizing: border-box;
        }
        .splash-screen.show { display: flex; }
        .splash-screen.hide { opacity: 0; transition: opacity .4s ease; pointer-events: none; }
        .splash-mon { position: relative; width: 132px; height: 132px; }
        .splash-mon img {
            position: absolute; inset: 0; width: 100%; height: 100%;
            object-fit: contain; -webkit-user-select: none; user-select: none;
            pointer-events: none;
        }
        /* 회색 바탕 레이어 */
        .splash-mon-gray { filter: grayscale(1) brightness(.7) contrast(.9); opacity: .85; }
        /* 컬러 레이어: 처음엔 위에서 100% 잘려(=안 보임) 있다가, 아래에서 위로 채워진다. */
        .splash-mon-color { clip-path: inset(100% 0 0 0); will-change: clip-path; }
        .splash-loading {
            font-size: 20px; font-weight: 800; letter-spacing: 3px;
            /* 좌우로 흐르는 그라데이션(shimmer)으로 로딩 느낌 */
            background: linear-gradient(90deg,#6c63ff,#a78bfa,#ffd54a,#a78bfa,#6c63ff);
            background-size: 200% auto;
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent; color: transparent;
            animation: splashShimmer 1.6s linear infinite;
        }
        @keyframes splashShimmer { to { background-position: 200% center; } }
        /* 점(...)은 개수가 바뀌어도 'Loading' 위치가 흔들리지 않게 폭을 고정 */
        .splash-dots { display: inline-block; width: 1.6em; text-align: left; }
        /* 웹(브라우저) 전용: 아이콘 탭 전 대기 상태. 사운드 자동재생 정책 때문에
           사용자 제스처 뒤에 로딩·효과음·BGM을 시작해야 한다. */
        .splash-screen.splash-await-tap .splash-mon {
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            border-radius: 24px;
            animation: splashMonPulse 1.8s ease-in-out infinite;
        }
        .splash-screen.splash-await-tap .splash-mon:active {
            transform: scale(0.96);
        }
        .splash-screen.splash-await-tap .splash-loading {
            font-size: 15px;
            letter-spacing: 1px;
            font-weight: 700;
            animation: splashShimmer 2.4s linear infinite;
        }
        .splash-screen.splash-await-tap .splash-dots { display: none; }
        @keyframes splashMonPulse {
            0%, 100% { filter: drop-shadow(0 0 0 rgba(167, 139, 250, 0)); transform: scale(1); }
            50% { filter: drop-shadow(0 0 18px rgba(167, 139, 250, 0.55)); transform: scale(1.04); }
        }
        /* 스플래시 하단 저작권 문구 카드.
           - 얇은 글라스 패널로 아이콘/Loading과 시각 계층 분리
           - word-break: keep-all + 의미 단위 <p>/<br> 로 어절·문장 중간 끊김 방지
           - bottom 은 Android 3버튼/제스처 내비바(~48–56dp) 위 + safe-area */
        .splash-disclaimer {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: calc(48px + env(safe-area-inset-bottom, 0px));
            width: min(340px, calc(100% - 40px));
            box-sizing: border-box;
            padding: 14px 16px 13px;
            text-align: center;
            color: rgba(226, 232, 240, 0.78);
            font-size: 12px;
            line-height: 1.55;
            font-weight: 500;
            letter-spacing: -0.01em;
            font-family: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo",
                "Noto Sans KR", sans-serif;
            word-break: keep-all;
            overflow-wrap: break-word;
            background: linear-gradient(
                165deg,
                rgba(108, 99, 255, 0.12) 0%,
                rgba(15, 17, 23, 0.72) 45%,
                rgba(15, 17, 23, 0.82) 100%
            );
            border: 1px solid rgba(167, 139, 250, 0.28);
            border-radius: 14px;
            box-shadow:
                0 8px 28px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            -webkit-user-select: none;
            transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
        }
        .splash-disclaimer:active {
            transform: translateX(-50%) scale(0.985);
            border-color: rgba(167, 139, 250, 0.5);
            box-shadow:
                0 6px 20px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        .splash-disclaimer-lang[hidden] { display: none !important; }
        .splash-disclaimer-lang-hint {
            margin-top: 8px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            color: rgba(196, 181, 253, 0.55);
        }
        .splash-disclaimer-badge {
            display: inline-block;
            margin: 0 0 10px;
            padding: 3px 10px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.06em;
            color: #e9d5ff;
            background: rgba(108, 99, 255, 0.28);
            border: 1px solid rgba(167, 139, 250, 0.45);
            line-height: 1.3;
        }
        .splash-disclaimer-line {
            margin: 0;
            padding: 0;
            color: rgba(226, 232, 240, 0.72);
        }
        .splash-disclaimer-line + .splash-disclaimer-line {
            margin-top: 2px;
        }
        /* 문단 구분(책임 고지 블록) */
        .splash-disclaimer-sep {
            margin-top: 9px !important;
            padding-top: 9px;
            border-top: 1px solid rgba(167, 139, 250, 0.16);
            color: rgba(254, 202, 202, 0.82);
            font-weight: 600;
        }
        .splash-disclaimer-more {
            margin-top: 8px !important;
            color: rgba(203, 213, 225, 0.62);
            font-size: 11px;
            font-weight: 500;
            line-height: 1.5;
        }
        .splash-disclaimer-link {
            color: #c4b5fd;
            font-weight: 700;
            white-space: nowrap;
        }
        /* ===== Pokedex Modal ===== */
        .pokedex-modal-box {
            background: #dc0a2d;
            border-radius: 12px;
            width: 320px;
            max-width: 90%;
            border: 4px solid #8b0015;
            padding: 16px;
            box-shadow: inset -4px -4px 0px 0px rgba(0,0,0,0.2), 0 10px 20px rgba(0,0,0,0.5);
            display: flex;
            flex-direction: column;
            gap: 16px;
            position: relative;
        }
        .pokedex-top {
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 2px solid #8b0015;
            padding-bottom: 12px;
            margin-bottom: 4px;
        }
        .pokedex-lens {
            width: 48px;
            height: 48px;
            background: #1cb8f0;
            border-radius: 50%;
            border: 3px solid #fff;
            box-shadow: inset -4px -4px 0px 0px rgba(0,0,0,0.3), 0 0 4px #000;
        }
        .pokedex-lights {
            display: flex;
            gap: 6px;
            align-self: flex-start;
            margin-top: 4px;
        }
        .pokedex-light {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 1px solid #000;
        }
        .pokedex-light.red { background: #ff0000; }
        .pokedex-light.yellow { background: #ffcc00; }
        .pokedex-light.green { background: #33cc00; }
        .pokedex-screen-container {
            background: #dedede;
            padding: 16px;
            border-radius: 8px 8px 32px 8px;
            border: 3px solid #555;
        }
        .pokedex-screen {
            background: #232323;
            border-radius: 4px;
            padding: 12px;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            min-height: 200px;
            max-height: min(62vh, 420px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .pokedex-img {
            width: 100px;
            height: 100px;
            object-fit: contain;
            image-rendering: pixelated;
        }
        .pokedex-name {
            font-size: 20px;
            font-weight: bold;
            margin: 8px 0 4px;
            color: #fff;
            text-shadow: 1px 1px 0 #000;
        }
        .pokedex-types {
            display: flex;
            gap: 6px;
            margin-bottom: 8px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .pokedex-type {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: #666;
            padding: 3px 8px 3px 5px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: bold;
        }
        .pokedex-spec {
            font-size: 12px;
            color: #aaa;
            margin-bottom: 8px;
        }
        .pokedex-stats {
            width: 100%;
            box-sizing: border-box;
            margin: 0 0 10px;
            padding: 8px;
            background: #111;
            border: 1px inset #444;
            border-radius: 4px;
            text-align: left;
        }
        .pokedex-stats[hidden] { display: none !important; }
        .pokedex-stats-title {
            font-size: 11px;
            font-weight: 700;
            color: #c4b5fd;
            margin-bottom: 6px;
            letter-spacing: 0.02em;
        }
        .pokedex-stat-row {
            display: grid;
            grid-template-columns: 40px 28px 1fr;
            align-items: center;
            gap: 6px;
            margin-bottom: 4px;
            font-size: 11px;
        }
        .pokedex-stat-row:last-child { margin-bottom: 0; }
        .pokedex-stat-label {
            color: #bbb;
            font-weight: 700;
        }
        .pokedex-stat-val {
            color: #fff;
            font-variant-numeric: tabular-nums;
            text-align: right;
        }
        .pokedex-stat-bar {
            display: block;
            height: 8px;
            background: #2a2a2a;
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid #444;
        }
        .pokedex-stat-fill {
            display: block;
            height: 100%;
            border-radius: 3px;
            min-width: 2px;
        }
        .pokedex-stat-fill.is-hp { background: linear-gradient(90deg, #4ade80, #22c55e); }
        .pokedex-stat-fill.is-atk { background: linear-gradient(90deg, #f87171, #ef4444); }
        .pokedex-stat-fill.is-def { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
        .pokedex-stat-fill.is-spa { background: linear-gradient(90deg, #a78bfa, #8b5cf6); }
        .pokedex-stat-fill.is-spd { background: linear-gradient(90deg, #67e8f9, #06b6d4); }
        .pokedex-stat-fill.is-spe { background: linear-gradient(90deg, #f9a8d4, #ec4899); }
        .pokedex-desc {
            font-size: 13px;
            line-height: 1.5;
            color: #eee;
            background: #111;
            padding: 8px;
            border-radius: 4px;
            text-align: left;
            width: 100%;
            box-sizing: border-box;
            border: 1px inset #444;
            margin: 0;
        }
        .pokedex-close {
            background: #333;
            color: #fff;
            border: 2px solid #111;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: bold;
            cursor: pointer;
            align-self: center;
            transition: all 0.2s;
        }
        .pokedex-close:hover { background: #555; }

        /* ===== 타입 상성표 모달 =====
           상단: 타입 아이콘+이름 선택 바(항상 표시)
           하단: 선택한 타입의 공격/방어 상성 2열(좁은·세로 화면은 1열 스택) */
        .type-matchup-modal {
            max-height: 88vh;
            width: 95%;
            max-width: 720px;
            padding: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .type-matchup-header {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 16px 16px 10px;
            border-bottom: 1px solid #2e3147;
            background: #1a1d27;
        }
        .type-matchup-title {
            margin: 0;
            font-size: 18px;
            font-weight: 800;
            color: #a78bfa;
        }
        .type-matchup-close {
            background: none;
            border: none;
            color: #a6adc8;
            font-size: 28px;
            line-height: 1;
            cursor: pointer;
            padding: 0 4px;
        }
        .type-matchup-close:hover { color: #fff; }

        /* 상단 타입 선택 바 — 스크롤 없이 한눈에, 아이콘 아래 이름 */
        .type-matchup-type-bar {
            flex-shrink: 0;
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 6px;
            padding: 12px 12px 10px;
            background: #161822;
            border-bottom: 1px solid #2e3147;
        }
        @media (max-width: 480px) {
            .type-matchup-type-bar {
                grid-template-columns: repeat(6, minmax(0, 1fr));
                gap: 4px;
                padding: 10px 8px 8px;
            }
        }
        .type-matchup-type-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 6px 2px 5px;
            background: #1c1f2b;
            border: 2px solid transparent;
            border-radius: 10px;
            cursor: pointer;
            color: inherit;
            font-family: inherit;
            transition: border-color 0.12s, background 0.12s, transform 0.12s;
            min-width: 0;
        }
        .type-matchup-type-btn:hover {
            border-color: var(--type-color, #6c63ff);
            background: #22263a;
        }
        .type-matchup-type-btn.is-selected {
            border-color: var(--type-color, #6c63ff);
            background: #252838;
            box-shadow: 0 0 0 1px var(--type-color, #6c63ff);
        }
        .type-matchup-type-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--type-color, #9ca3af);
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            box-shadow: 0 2px 5px rgba(0,0,0,0.28);
            flex-shrink: 0;
            overflow: hidden;
        }
        .type-matchup-type-icon-img {
            width: 28px;
            height: 28px;
        }
        .type-matchup-type-name {
            font-size: 11px;
            font-weight: 700;
            color: #e5e7eb;
            line-height: 1.15;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }
        @media (max-width: 400px) {
            .type-matchup-type-icon { width: 30px; height: 30px; font-size: 15px; }
            .type-matchup-type-name { font-size: 10px; }
            .type-matchup-type-btn { padding: 5px 1px 4px; gap: 3px; }
        }

        /* 본문: 선택 전 안내 / 선택 후 상성 패널 */
        .type-matchup-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 12px 14px 16px;
            -webkit-overflow-scrolling: touch;
        }
        .type-matchup-empty-state {
            text-align: center;
            color: #8b90a5;
            font-size: 13px;
            line-height: 1.65;
            padding: 36px 16px 28px;
        }
        .type-matchup-empty-state-ico {
            font-size: 28px;
            display: block;
            margin-bottom: 10px;
            opacity: 0.85;
        }

        .type-matchup-selected-head {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            padding: 8px 10px;
            border-radius: 10px;
            background: #1c1f2b;
            border: 1px solid var(--type-color, #6c63ff);
        }
        .type-matchup-selected-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--type-color, #9ca3af);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            overflow: hidden;
        }
        .type-matchup-selected-icon-img {
            width: 30px;
            height: 30px;
        }
        .type-matchup-selected-name {
            font-size: 17px;
            font-weight: 800;
            color: #fff;
            line-height: 1.2;
        }
        .type-matchup-selected-sub {
            font-size: 11px;
            color: #a6adc8;
            margin-top: 2px;
        }

        /* 공격 | 방어 2열 — 좁은/세로 화면은 1열 */
        .type-matchup-panels {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            align-items: start;
        }
        @media (max-width: 560px) {
            .type-matchup-panels { grid-template-columns: 1fr; }
        }
        .type-matchup-panel {
            background: #1c1f2b;
            border: 1px solid #2e3147;
            border-radius: 12px;
            padding: 12px 12px 10px;
            min-width: 0;
        }
        .type-matchup-panel-title {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            font-weight: 800;
            color: #e5e7eb;
            margin: 0 0 4px;
            padding-bottom: 8px;
            border-bottom: 1px solid #2e3147;
        }
        .type-matchup-panel-desc {
            font-size: 11px;
            color: #8b90a5;
            margin: 0 0 10px;
            line-height: 1.4;
        }
        .type-matchup-section { margin-bottom: 10px; }
        .type-matchup-section:last-child { margin-bottom: 0; }
        .type-matchup-section-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 12px;
            font-weight: 800;
            margin-bottom: 6px;
            line-height: 1.3;
        }
        .type-matchup-section-title.is-good { color: #4ade80; }
        .type-matchup-section-title.is-bad { color: #fbbf24; }
        .type-matchup-section-title.is-none { color: #94a3b8; }
        .type-matchup-section-mult {
            font-size: 11px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            opacity: 0.9;
            flex-shrink: 0;
        }
        .type-matchup-badge-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .type-matchup-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 9px 4px 5px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            background: var(--type-color, #9ca3af);
            color: #fff;
            text-shadow: 0 1px 1px rgba(0,0,0,0.45);
            line-height: 1.2;
        }
        .type-matchup-none {
            color: #6c7089;
            font-size: 12px;
            font-weight: 600;
            padding: 2px 0;
        }

        /* ===== 타입 아이콘 공통 (/static/icons/*.svg, type-icons.js) ===== */
        .type-icon {
            display: inline-block;
            width: 18px;
            height: 18px;
            object-fit: contain;
            vertical-align: middle;
            flex-shrink: 0;
            pointer-events: none;
        }
        .type-icon-xs { width: 12px; height: 12px; }
        .type-icon-sm { width: 16px; height: 16px; }
        .type-icon-md { width: 28px; height: 28px; }
        .type-icon-lg { width: 32px; height: 32px; }
        .type-icon-missing {
            display: none !important;
        }
        .type-icon-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            vertical-align: middle;
            line-height: 1.2;
        }
        .type-icon-badge-name {
            font-weight: inherit;
        }
        .skill-type-badge {
            font-size: 11px;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.6);
            padding: 2px 6px 2px 4px;
            border-radius: 4px;
            margin-left: 4px;
        }

        /* ===== 네트워크(블루투스) 배틀 ===== */
        .network-battle-panel {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            background: #1c1f2b;
            border: 1px solid #2e3147;
            border-radius: 12px;
            padding: 20px 16px;
            box-sizing: border-box;
        }
        .network-nickname-row {
            display: flex; align-items: center; gap: 8px; width: 100%;
            justify-content: center; flex-wrap: wrap;
        }
        .network-nickname-label { color: #8b90a5; font-size: 13px; font-weight: 700; }
        .network-nickname-text { color: #a78bfa; font-weight: 800; font-size: 16px; }
        .network-nickname-change {
            background: #232637; border: 1px solid #3a3a5c; color: #cbd5e1;
            border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer;
        }
        .network-transport-row {
            display: flex; align-items: center; gap: 8px; width: 100%;
            justify-content: center; flex-wrap: wrap; margin-top: 6px;
        }
        .network-transport-label { color: #8b90a5; font-size: 13px; font-weight: 700; }
        .network-transport-value { color: #67e8f9; font-weight: 800; font-size: 14px; }
        .network-transport-choices {
            display: flex; flex-direction: column; gap: 10px; margin-top: 12px;
        }
        .network-transport-choice {
            text-align: left; border: 1px solid #3a3a5c; background: #232637;
            color: #e8eaf6; border-radius: 12px; padding: 14px 16px; cursor: pointer;
            display: flex; flex-direction: column; gap: 4px;
        }
        .network-transport-choice:active { background: #2b2f52; border-color: #6c63ff; }
        .network-transport-choice:disabled {
            cursor: not-allowed; opacity: 0.45; background: #1c1e30;
        }
        .network-transport-choice:disabled:active { background: #1c1e30; border-color: #3a3a5c; }
        .network-transport-choice-ico { font-size: 22px; line-height: 1.2; }
        .network-transport-choice-title { font-size: 16px; font-weight: 800; }
        .network-transport-choice-desc { font-size: 12px; color: #8b90a5; line-height: 1.4; }
        .network-ready-toggle {
            width: 100%; max-width: 280px; padding: 14px; border-radius: 12px;
            border: 1px solid #3a3a5c; background: #232637; color: #fff;
            font-size: 16px; font-weight: 800; cursor: pointer;
        }
        .network-ready-toggle[aria-pressed="true"] {
            background: #2b2f52; border-color: #6c63ff; color: #a78bfa;
        }
        .network-status-hint { color: #8b90a5; font-size: 13px; text-align: center; margin: 0; }
        .network-device-list {
            width: 100%; display: flex; flex-direction: column; gap: 8px;
        }
        .network-remote-choice-row {
            width: 100%; display: flex; flex-direction: column; gap: 10px; align-items: center;
        }
        .network-room-code-input {
            width: 100%; max-width: 240px; margin: 4px auto 12px; display: block;
            background: #1a1d35; border: 1px solid #3a3a5c; color: #fff;
            border-radius: 10px; padding: 12px; font-size: 22px; font-weight: 800;
            letter-spacing: 4px; text-align: center;
        }
        .network-room-code-input:focus { outline: none; border-color: #6c63ff; }
        .network-device-row {
            display: flex; align-items: center; justify-content: space-between;
            background: #232637; border: 1px solid #3a3a5c; border-radius: 10px;
            padding: 12px 14px; cursor: pointer; font-weight: 700; color: #fff;
        }
        .network-device-row:active { background: #2b2f52; }
        .network-device-empty { color: #8b90a5; font-size: 13px; text-align: center; padding: 12px 0; }

        /* 원거리 방 참가: 코드 입력 행 + 공개방 목록 + 페이징 */
        .network-room-join-head {
            display: flex; align-items: center; justify-content: space-between; gap: 8px;
        }
        .network-room-refresh-btn {
            background: #2e3147; color: #cbd5e1; border: 1px solid #3a3a5c;
            border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
        }
        .network-room-refresh-btn:active { background: #3a3f63; color: #fff; }
        .network-room-code-row { display: flex; gap: 8px; align-items: stretch; margin: 4px 0 14px; }
        .network-room-code-row .network-room-code-input { margin: 0; max-width: none; flex: 1; }
        .network-room-code-submit {
            flex: 0 0 auto; background: #6c63ff; color: #fff; border: none; border-radius: 10px;
            padding: 0 18px; font-weight: 800; font-size: 15px; cursor: pointer;
        }
        .network-room-code-submit:active { background: #574fd6; }
        .network-room-list-label { color: #8b90a5; font-size: 12px; font-weight: 700; margin: 2px 0 8px; }
        .network-room-list {
            width: 100%; display: flex; flex-direction: column; gap: 8px;
            min-height: 132px; max-height: 40vh; overflow-y: auto;
        }
        .network-room-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .network-room-row-code {
            flex: 0 0 auto; margin-left: 10px; color: #9aa0bd; font-size: 13px;
            font-weight: 700; letter-spacing: 1px;
        }
        .network-room-pager {
            display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 10px;
        }
        .network-room-page-btn {
            background: #2e3147; color: #cbd5e1; border: 1px solid #3a3a5c; border-radius: 8px;
            padding: 6px 14px; font-size: 14px; font-weight: 800; cursor: pointer;
        }
        .network-room-page-btn:active { background: #3a3f63; color: #fff; }
        .network-room-page-btn:disabled { opacity: 0.35; cursor: default; }
        .network-room-page-label { color: #cbd5e1; font-size: 13px; font-weight: 700; min-width: 48px; text-align: center; }

        /* 원거리 방 공개 설정(공개방/비공개방 선택) */
        .network-room-visibility-choices { display: flex; flex-direction: column; gap: 12px; }
        .network-room-visibility-btn {
            display: flex; flex-direction: column; gap: 6px; text-align: left;
            background: #232637; border: 1px solid #3a3a5c; border-radius: 12px;
            padding: 14px 16px; cursor: pointer; color: #fff;
        }
        .network-room-visibility-btn:active { background: #2b2f52; border-color: #6c63ff; }
        .network-room-visibility-title { font-size: 16px; font-weight: 800; }
        .network-room-visibility-desc { font-size: 12px; color: #9aa0bd; font-weight: 500; line-height: 1.4; }

        .network-nickname-grid {
            display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
        }
        .network-nickname-chip {
            padding: 10px 16px; border-radius: 999px; border: 1px solid #3a3a5c;
            background: #232637; color: #cbd5e1; font-weight: 700; font-size: 14px;
            cursor: pointer;
        }
        .network-nickname-chip:active { background: #2b2f52; border-color: #6c63ff; color: #fff; }

        .network-vote-options {
            display: flex; flex-direction: column; gap: 10px; margin: 10px 0;
        }
        .network-vote-option-btn {
            padding: 14px; border-radius: 10px; border: 1px solid #3a3a5c;
            background: #232637; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
        }
        .network-vote-option-btn.selected { background: #2b2f52; border-color: #6c63ff; color: #a78bfa; }
        .network-vote-option-btn:disabled { opacity: 0.7; cursor: default; }
        /* 허용 세대 투표: 검색 필터와 같은 칩 레이아웃. 모달이 좁아도 줄바꿈되게. */
        .network-vote-modal-box { max-width: min(420px, 94vw); }
        .network-vote-gen-panel {
            display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
            max-height: 40vh; overflow-y: auto; padding: 4px 0;
        }
        .network-vote-gen-hint {
            margin: 0; font-size: 12px; color: #8b90a5; text-align: center; line-height: 1.4;
        }
        .network-vote-timer {
            text-align: center; font-size: 28px; font-weight: 800; color: #a78bfa; margin: 4px 0 0;
        }

        .network-waiting-overlay {
            position: fixed; inset: 0; z-index: 10002;
            background: rgba(0,0,0,0.6);
            display: flex; align-items: center; justify-content: center;
        }
        .network-waiting-overlay.hidden { display: none; }
        .network-waiting-box {
            background: #1a1d27; border: 1px solid #3a3a5c; border-radius: 16px;
            padding: 28px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px;
        }
        .network-waiting-spinner {
            width: 32px; height: 32px; border-radius: 50%;
            border: 3px solid #3a3a5c; border-top-color: #6c63ff;
            animation: network-spin 0.8s linear infinite;
        }
        @keyframes network-spin { to { transform: rotate(360deg); } }
        .network-waiting-box p { margin: 0; color: #cbd5e1; font-size: 14px; }
        .network-waiting-cancel {
            background: #2e3147; border: 1px solid #3a3a5c; color: #f87171;
            border-radius: 8px; padding: 8px 20px; font-size: 13px; font-weight: 700; cursor: pointer;
        }

        /* ===== 모의배틀 튜토리얼 (poke-arena-tutorial.js) =====
           body의 zoom:var(--ui-scale)이 fixed 자손까지 다시 스케일하므로, splash-screen과 동일하게
           자기 자신에 역zoom + 배율만큼 키운 박스 크기로 상쇄해 항상 실제 뷰포트 1:1로 그린다. */
        .poke-tut-fab {
            /* arena-start-bar/battle-view-bar와 동일하게 zoom 상쇄 없이 그대로 둔다(자연스럽게
               --ui-scale과 같이 확대/축소됨). 드래그 위치 계산도 이 좌표계 기준으로 일관되게 처리. */
            position: fixed;
            right: 14px;
            bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
            width: 64px;
            height: 64px;
            z-index: 210;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6c63ff, #8b5cf6);
            color: #fff;
            box-shadow: 0 6px 18px rgba(108, 99, 255, 0.55);
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            touch-action: none;
            transition: box-shadow 0.15s ease, transform 0.1s ease;
        }
        .poke-tut-fab.dragging { transition: none; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); transform: scale(1.06); }
        .poke-tut-fab.hidden { display: none; }
        .poke-tut-fab-ico { font-size: 20px; line-height: 1; }
        .poke-tut-fab-label { font-size: 9px; font-weight: 700; line-height: 1.2; text-align: center; }
        .poke-tut-fab-hide-chip {
            position: fixed;
            z-index: 211;
            background: #1a1d27;
            border: 1px solid #3a3a5c;
            color: #f87171;
            border-radius: 20px;
            padding: 8px 16px;
            font-size: 12px;
            font-weight: 700;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }
        .poke-tut-fab-hide-chip.hidden { display: none; }

        .poke-tut-overlay {
            position: fixed;
            top: 0; left: 0;
            width: calc(100vw * var(--ui-scale, 1));
            height: calc(100vh * var(--ui-scale, 1));
            height: calc(100dvh * var(--ui-scale, 1));
            zoom: calc(1 / var(--ui-scale, 1));
            z-index: 200000;
            pointer-events: none;
        }
        .poke-tut-overlay.hidden { display: none; }
        /* 인트로 카드가 떠 있을 때 다이얼로그 밖만 스포트라이트와 같은 농도로 가린다.
           완료 카드에는 쓰지 않는다 — 뒤에 재생 중인 배틀 영상을 가리면 안 된다. */
        .poke-tut-overlay.card-dim::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(8, 9, 15, 0.72);
            pointer-events: none;
        }
        .poke-tut-spotlight {
            position: fixed;
            box-sizing: border-box;
            border: 2px solid #a78bfa;
            border-radius: 14px;
            box-shadow: 0 0 0 9999px rgba(8, 9, 15, 0.72), 0 0 18px rgba(167, 139, 250, 0.85);
            pointer-events: none;
            /* 기본은 즉시 고정. 단계 이동처럼 크게 옮길 때만 .moving 으로 부드럽게. */
            transition: none;
        }
        .poke-tut-spotlight.moving {
            transition: left 0.22s ease, top 0.22s ease, width 0.22s ease, height 0.22s ease;
        }
        .poke-tut-spotlight.hidden { display: none; }
        /* scale 하면 구멍+테두리가 밖으로 삐져 나간다. 광량만 깜빡인다. */
        .poke-tut-spotlight.pulse { animation: poke-tut-pulse 0.35s ease; }
        @keyframes poke-tut-pulse {
            0%, 100% { box-shadow: 0 0 0 9999px rgba(8, 9, 15, 0.72), 0 0 18px rgba(167, 139, 250, 0.85); }
            50% { box-shadow: 0 0 0 9999px rgba(8, 9, 15, 0.72), 0 0 28px rgba(167, 139, 250, 1); }
        }
        .poke-tut-tooltip {
            position: fixed;
            width: min(320px, calc(100vw - 32px));
            background: #1a1d27;
            border: 1px solid #4c3f91;
            border-radius: 14px;
            padding: 14px 16px;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
            pointer-events: auto;
            max-height: min(280px, calc(100vh - 28px));
            overflow-y: auto;
            box-sizing: border-box;
            transition: left 0.22s ease, top 0.22s ease, bottom 0.22s ease;
        }
        .poke-tut-tooltip.hidden { display: none; }
        /* 검색 다이얼로그처럼 대상이 화면을 채울 때: 좁혀서 옆으로 붙인다(목록이 보이게). */
        .poke-tut-tooltip.side {
            width: min(200px, calc(100vw - 24px));
            max-height: min(220px, calc(100vh - 28px));
            padding: 10px 12px;
        }
        /* '다음' 버튼이 없는 단계(하이라이트된 실제 화면 요소를 직접 눌러야 하는 단계)는 말풍선이
           그 아래 실제 클릭 대상(검색 결과 목록 등)을 가리지 않도록 클릭을 통과시킨다.
           닫기(X) 버튼만은 예외적으로 계속 눌리게 한다. */
        .poke-tut-tooltip.watch-only { pointer-events: none; }
        .poke-tut-tooltip.watch-only .poke-tut-close { pointer-events: auto; }
        .poke-tut-tooltip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
        .poke-tut-step-badge { font-size: 11px; font-weight: 800; color: #a78bfa; letter-spacing: 0.02em; }
        .poke-tut-close {
            background: none; border: none; color: #8b90a5; font-size: 20px; line-height: 1;
            cursor: pointer; padding: 2px 4px;
        }
        .poke-tut-tooltip-text { margin: 0; font-size: 14px; line-height: 1.55; color: #e5e7eb; }
        .poke-tut-tooltip-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 10px; }
        .poke-tut-hint { font-size: 12px; color: #8b90a5; line-height: 1.4; }
        .poke-tut-next-btn {
            flex-shrink: 0;
            background: #6c63ff; border: none; color: #fff; font-weight: 800; font-size: 13px;
            border-radius: 20px; padding: 8px 18px; cursor: pointer;
        }
        .poke-tut-next-btn.hidden { display: none; }

        .poke-tut-card {
            position: fixed;
            left: 50%; top: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            width: min(360px, calc(100vw - 40px));
            max-height: min(560px, calc(100vh - 60px));
            overflow-y: auto;
            background: #1a1d27;
            border: 1px solid #3a3a5c;
            border-radius: 18px;
            padding: 26px 22px 20px;
            box-sizing: border-box;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
            pointer-events: auto;
        }
        .poke-tut-card.hidden { display: none; }
        /* 튜토리얼 중 인원 스테퍼 잠금(항상 1:1). JS 가드와 함께 클릭 자체를 막는다. */
        .arena-team-size-split.tut-locked .arena-step-btn,
        .arena-team-size-unified.tut-locked .arena-step-btn {
            opacity: 0.4;
            pointer-events: none;
            cursor: default;
        }
        .poke-tut-card-close { position: absolute; top: 10px; right: 10px; }
        .poke-tut-card-title { margin: 0 0 12px; font-size: 19px; color: #a78bfa; padding-right: 24px; }
        .poke-tut-card-body { font-size: 14px; line-height: 1.65; color: #e5e7eb; }
        .poke-tut-card-body p { margin: 0 0 10px; }
        .poke-tut-card-body p:last-child { margin-bottom: 0; }
        .poke-tut-card-actions { display: flex; gap: 10px; margin-top: 18px; }
        .poke-tut-card-skip {
            flex: 1; background: #2e3147; border: 1px solid #3a3a5c; color: #a6adc8;
            border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer;
        }
        .poke-tut-card-btn {
            flex: 1; background: linear-gradient(135deg, #6c63ff, #8b5cf6); border: none; color: #fff;
            border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 800; cursor: pointer;
        }
        .network-waiting-cancel:active { background: #3a1f2e; }