* { margin:0; padding:0; box-sizing:border-box; touch-action:none; user-select:none; -webkit-touch-callout:none; }
        body { background:#1a1a2e; display:flex; justify-content:center; align-items:center; height:100dvh; width:100vw; overflow:hidden; font-family:'Press Start 2P', monospace; }
        #gameWrapper { position:relative; width:100%; max-width:800px; aspect-ratio:16/9; background:#16213e; border:4px solid #e94560; border-radius:12px; overflow:hidden; box-shadow:0 0 40px rgba(233,69,96,0.3); }
        canvas { display:block; width:100%; height:100%; background:#2b2b44; image-rendering:pixelated; image-rendering:crisp-edges; }
        #ui-overlay { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
        #hud { position:absolute; top:8px; left:10px; right:10px; display:flex; flex-direction:column; gap:4px; pointer-events:none; z-index:10; }
        .health-bar { display:flex; align-items:center; gap:8px; font-size:10px; color:#fff; text-shadow:2px 2px 0 #000; }
        .health-bar .bar-bg { flex:1; height:14px; background:#333; border:2px solid #555; position:relative; overflow:hidden; }
        .health-bar .bar-fill { height:100%; width:100%; background:#4caf50; transition:width 0.15s; }
        .health-bar .bar-fill.enemy { background:#f44336; }
        #energy-bar { display:flex; align-items:center; gap:8px; font-size:8px; color:#aaccff; text-shadow:1px 1px 0 #000; margin-top:2px; }
        #energy-bar .bar-bg { flex:1; height:8px; background:#222; border:1px solid #446; }
        #energy-bar .bar-fill { height:100%; width:0%; background:#00d4ff; box-shadow:0 0 10px #00d4ff; }
        #arrow-count { display:flex; align-items:center; gap:6px; font-size:10px; color:#ffcc66; text-shadow:1px 1px 0 #000; margin-top:2px; }
        #arrow-count .arrow-icon { font-size:14px; }

        #menu-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.75); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:20px; z-index:100; pointer-events:all; backdrop-filter:blur(4px); }
        #menu-overlay h1 { font-size:clamp(24px,6vw,48px); color:#e94560; text-shadow:4px 4px 0 #0f3460; letter-spacing:4px; text-align:center; }
        #menu-overlay .sub { color:#eee; font-size:clamp(10px,2vw,16px); opacity:0.8; }
        .difficulty-buttons { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
        .difficulty-buttons button { font-family:'Press Start 2P', monospace; padding:14px 28px; font-size:clamp(12px,2vw,18px); border:3px solid #fff; background:rgba(0,0,0,0.5); color:#fff; cursor:pointer; transition:all 0.15s; border-radius:8px; min-width:120px; pointer-events:all; }
        .difficulty-buttons button:active { transform:scale(0.95); background:#e94560; border-color:#e94560; }
        .menu-btn-row { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:4px; overflow: auto; touch-action: auto; -webkit-overflow-scrolling: touch; max-height: 60vh;}
        .menu-btn-row button { font-family:'Press Start 2P', monospace; padding:10px 24px; font-size:clamp(10px,1.5vw,14px); border:2px solid #ffd700; background:rgba(255,215,0,0.15); color:#ffd700; cursor:pointer; transition:all 0.2s; border-radius:8px; pointer-events:all; }
        .menu-btn-row button:active { transform:scale(0.95); background:#ffd700; color:#000; }

        #charGrid {overflow: auto; touch-action: auto; -webkit-overflow-scrolling: touch; max-height: 60vh;}
        #char-select { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:none; flex-direction:column; justify-content:center; align-items:center; gap:20px; z-index:110; pointer-events:all; backdrop-filter:blur(4px); }
        #char-select .char-title { font-size:clamp(18px,4vw,32px); color:#ffd700; text-shadow:3px 3px 0 #000; }
        #char-select .char-grid { display:flex; gap:30px; flex-wrap:wrap; justify-content:center; }
        .char-card { background:rgba(255,255,255,0.05); border:3px solid #555; border-radius:16px; padding:15px 20px; text-align:center; cursor:pointer; transition:all 0.2s; min-width:120px; pointer-events:all; }
        .char-card.selected { border-color:#ffd700; background:rgba(255,215,0,0.15); box-shadow:0 0 20px rgba(255,215,0,0.3); }
        .char-card img { width:60px; height:60px; image-rendering:pixelated; display:block; margin:0 auto 8px; }
        .char-card .cname { color:#fff; font-size:12px; }
        .char-card .cdesc { color:#888; font-size:8px; margin-top:4px; }
        #charStartBtn { font-family:'Press Start 2P', monospace; padding:12px 40px; font-size:clamp(12px,2vw,18px); border:3px solid #4caf50; background:rgba(76,175,80,0.2); color:#4caf50; cursor:pointer; transition:all 0.2s; border-radius:8px; pointer-events:all; }
        #charStartBtn:active { transform:scale(0.95); background:#4caf50; color:#fff; }

        #pokedex-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); display:none; flex-direction:column; justify-content:center; align-items:center; z-index:200; pointer-events:all; backdrop-filter:blur(6px); padding:20px; overflow: auto; touch-action: auto; -webkit-overflow-scrolling: touch; max-height: 60vh;}
        #pokedex-overlay.show { display:flex; overflow: auto; touch-action: auto; -webkit-overflow-scrolling: touch; max-height: 60vh;}
        .pokedex-content { width:100%; max-width:680px; max-height:85vh; background:#1a1a2e; border:3px solid #ffd700; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 0 60px rgba(255,215,0,0.15); position:relative; }
        .pokedex-header { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:2px solid rgba(255,215,0,0.2); background:rgba(0,0,0,0.3); flex-shrink:0; }
        .pokedex-header h2 { font-size:clamp(14px,3vw,22px); color:#ffd700; text-shadow:2px 2px 0 #000; }
        .pokedex-close { background:rgba(255,255,255,0.1); border:2px solid #e94560; color:#e94560; border-radius:8px; padding:6px 14px; font-size:16px; cursor:pointer; transition:0.2s; font-family:'Press Start 2P', monospace; pointer-events:all; }
        .pokedex-close:active { transform:scale(0.9); background:#e94560; color:#fff; }
        .pokedex-body { display:flex; flex-direction:column; gap:8px; padding:12px 16px 16px; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; touch-action:auto; -webkit-overflow-scrolling:touch; }
        .pokedex-body::-webkit-scrollbar { width:4px; }
        .pokedex-body::-webkit-scrollbar-track { background:rgba(255,255,255,0.05); border-radius:4px; }
        .pokedex-body::-webkit-scrollbar-thumb { background:#ffd700; border-radius:4px; }
        .dex-list { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; }
        .dex-list .dex-card-item { background:rgba(255,255,255,0.05); border:2px solid #555; border-radius:16px; padding:20px 25px; text-align:center; cursor:pointer; transition:all 0.2s; min-width:140px; pointer-events:all; }
        .dex-list .dex-card-item:active { transform:scale(0.95); border-color:#ffd700; background:rgba(255,215,0,0.1); }
        .dex-list .dex-card-item .dex-icon { font-size:clamp(32px,6vw,48px); display:block; margin-bottom:6px; }
        .dex-list .dex-card-item .dex-name { color:#fff; font-size:clamp(14px,2.5vw,20px); }
        .dex-list .dex-card-item .dex-hint { color:#888; font-size:10px; margin-top:4px; }
        .dex-detail { display:none; flex-direction:column; gap:8px; }
        .dex-detail.active { display:flex; }
        .dex-detail .dex-back { background:rgba(255,255,255,0.08); border:2px solid #888; color:#fff; border-radius:8px; padding:6px 14px; font-size:12px; cursor:pointer; transition:0.2s; align-self:flex-start; font-family:'Press Start 2P', monospace; pointer-events:all; }
        .dex-detail .dex-back:active { transform:scale(0.9); background:#888; }
        .dex-detail .dex-title { display:flex; align-items:center; gap:12px; font-size:clamp(16px,3vw,24px); color:#ffd700; border-bottom:1px solid rgba(255,215,0,0.15); padding-bottom:6px; }
        .dex-detail .dex-title .dex-icon { font-size:clamp(24px,4vw,36px); }
        .dex-detail .dex-stats { display:flex; gap:16px; font-size:clamp(9px,1.4vw,12px); color:#aaa; flex-wrap:wrap; }
        .dex-detail .dex-stats span { background:rgba(255,255,255,0.06); padding:2px 10px; border-radius:6px; }
        .dex-detail .dex-skill { padding:4px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
        .dex-detail .dex-skill:last-child { border-bottom:none; }
        .dex-detail .dex-skill .sk-name { font-size:clamp(10px,1.6vw,14px); color:#fff; }
        .dex-detail .dex-skill .sk-desc { font-size:clamp(8px,1.2vw,11px); color:#999; padding-left:6px; }
        .dex-detail .dex-skill .sk-meta { font-size:clamp(7px,1vw,10px); color:#666; padding-left:6px; }
        .dex-detail .dex-skill .sk-meta em { color:#88ddff; font-style:normal; }

        #result-message { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(28px,8vw,60px); color:#fff; text-shadow:4px 4px 0 #000; z-index:50; pointer-events:none; display:none; text-align:center; background:rgba(0,0,0,0.6); padding:20px 40px; border-radius:16px; border:4px solid #fff; }
        #result-message.show { display:block; pointer-events:all; }
        #result-message .sub { font-size:14px; color:#aaa; margin-top:10px; }
        #result-message .btn-row { margin-top:16px; display:flex; gap:16px; justify-content:center; pointer-events:all; }
        #result-message .btn-row button { font-family:'Press Start 2P', monospace; padding:8px 20px; font-size:12px; border:2px solid #fff; background:rgba(0,0,0,0.5); color:#fff; cursor:pointer; border-radius:8px; transition:0.2s; }
        #result-message .btn-row button:active { transform:scale(0.95); background:#fff; color:#000; }

        #touch-controls { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:space-between; padding:0 10px; pointer-events:none; z-index:20; }
        .ctrl-group { display:flex; gap:8px; pointer-events:all; align-items:flex-end; }
        .ctrl-btn { width:clamp(44px, 10vw, 64px); height:clamp(44px, 10vw, 64px); background:rgba(255,255,255,0.15); border:2px solid rgba(255,255,255,0.4); border-radius:12px; color:#fff; font-size:clamp(16px,3.5vw,26px); display:flex; justify-content:center; align-items:center; touch-action:none; backdrop-filter:blur(4px); box-shadow:0 4px 0 rgba(0,0,0,0.3); font-family:'Press Start 2P', monospace; text-shadow:2px 2px 0 #000; font-weight:bold; user-select:none; position:relative; overflow:hidden; }
        .ctrl-btn:active { background:rgba(233,69,96,0.6); transform:scale(0.92); }
        .ctrl-btn.dpad { background:rgba(0,0,0,0.4); border-color:rgba(255,255,255,0.2); }
        .ctrl-btn.jump { background:rgba(0,200,100,0.3); border-color:#00ff88; color:#00ff88; }
        .ctrl-btn.jump:active { background:rgba(0,200,100,0.7); }
        .right-controls { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
        .right-controls .skill-row { display:flex; gap:8px; }
        .ctrl-btn.skill { background:rgba(0,200,255,0.2); border-color:#00d4ff; font-size:clamp(12px,2.5vw,18px); flex-direction:column; gap:2px; }
        .ctrl-btn.skill:active { background:rgba(0,200,255,0.6); }
        .ctrl-btn.ult { background:rgba(255,215,0,0.2); border-color:#ffd700; color:#ffd700; }
        .ctrl-btn.ult:active { background:rgba(255,215,0,0.6); }
        .ctrl-btn .sub-label { font-size:8px; opacity:0.7; position:relative; z-index:2; }
        .ctrl-btn.cooldown { background:rgba(80,80,80,0.6) !important; border-color:#666 !important; color:#888 !important; }
        .ctrl-btn.cooldown .sub-label { color:#888; }
        .ctrl-btn.ult.cooldown { background:rgba(80,80,80,0.6) !important; border-color:#666 !important; color:#888 !important; }
        .ctrl-btn.ult.cooldown .sub-label { color:#888; }
        .ctrl-btn .cd-overlay { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; border-radius:12px; background:conic-gradient(from 0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.6) 0%, transparent 0%, transparent 100%); z-index:1; }
        .ctrl-btn .cd-overlay.hidden { display:none; }
        .btn-wrapper { position:relative; display:flex; align-items:center; justify-content:center; }


        /* 菜单屏幕切换 */
        .menu-screen {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 20px;
            width: 100%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            position: relative;
        }

        /* 主菜单标题图片 */
        .menu-title {
            text-align: center;
            white-space: nowrap;
        }
        .menu-title img {
            max-width: 100%;
            width: clamp(280px, 80%, 800px);
            height: auto;
            display: block;
            margin: 0 auto;
        }
        .difficulty-title {
            font-size: clamp(18px, 4vw, 32px);
            color: #ffd700;
            text-shadow: 3px 3px 0 #000;
            letter-spacing: 2px;
        }

        /* 主菜单三个按钮水平排列 */
        .menu-buttons {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
            max-width: 500px;
        }

        .menu-btn {
            background: transparent;
            border: none;
            padding: 0;
            cursor: pointer;
            flex: 1 1 100px;
            min-width: 80px;
            max-width: 160px;
            transition: transform 0.15s ease;
            touch-action: manipulation;
            pointer-events: all;
        }

        .menu-btn:active {
            transform: scale(0.92);
        }

        .menu-btn img {
            width: 100%;
            height: auto;
            display: block;
            image-rendering: pixelated;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.5);
            pointer-events: none;
        }

        /* 难度选择界面的按钮（三个难度） */
        .difficulty-buttons {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
            max-width: 500px;
        }

        .difficulty-buttons button {
            background: transparent;
            border: none;
            padding: 0;
            cursor: pointer;
            flex: 1 1 100px;
            min-width: 80px;
            max-width: 160px;
            transition: transform 0.15s ease;
            touch-action: manipulation;
            pointer-events: all;
        }

        .difficulty-buttons button:active {
            transform: scale(0.92);
        }

        .difficulty-buttons button img {
            width: 100%;
            height: auto;
            display: block;
            image-rendering: pixelated;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.5);
            pointer-events: none;
        }

        /* 返回按钮（难度界面） */
        .back-btn {
            font-family: 'Press Start 2P', monospace;
            padding: 12px 28px;
            font-size: 14px;
            background: rgba(255,255,255,0.08);
            border: 2px solid #ffd700;
            color: #ffd700;
            border-radius: 8px;
            cursor: pointer;
            transition: 0.2s;
            touch-action: manipulation;
            pointer-events: all;
        }

        .back-btn:active {
            transform: scale(0.95);
            background: #ffd700;
            color: #000;
        }

        /* ========== PvP 大厅样式 ========== */
        #menu-pvp { gap: 24px; }
        #menu-pvp .pvp-title { font-size: clamp(16px, 3vw, 28px); color: #00d4ff; text-shadow: 2px 2px 0 #000; }
        .pvp-buttons { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
        .pvp-btn { font-family: 'Press Start 2P', monospace; padding: 14px 28px; font-size: clamp(10px, 1.8vw, 16px); border: 3px solid #00d4ff; background: rgba(0,212,255,0.12); color: #00d4ff; cursor: pointer; border-radius: 10px; transition: 0.2s; pointer-events: all; }
        .pvp-btn:active { transform: scale(0.93); background: #00d4ff; color: #000; }
        .pvp-btn.highlight { border-color: #ffd700; color: #ffd700; background: rgba(255,215,0,0.12); }
        .pvp-btn.highlight:active { background: #ffd700; color: #000; }
        .pvp-code-area { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
        .pvp-code-area label { color: #aaa; font-size: 10px; }
        .pvp-code-area textarea { width: 100%; height: 60px; background: #0d0d1a; border: 2px solid #444; color: #00ff88; font-family: 'Courier New', monospace; font-size: 10px; padding: 8px; border-radius: 8px; resize: none; pointer-events: all; }
        .pvp-code-area textarea.input-code { color: #ffd700; border-color: #ffd700; height: 48px; }
        .pvp-status { color: #888; font-size: clamp(8px, 1.2vw, 11px); text-align: center; min-height: 16px; }
        .pvp-status.connected { color: #4caf50; }
        .room-code-display { font-family: 'Press Start 2P', monospace; font-size: clamp(28px, 5vw, 48px); color: #ffd700; background: #0d0d1a; border: 3px solid #ffd700; border-radius: 12px; padding: 12px 28px; letter-spacing: 12px; text-align: center; text-shadow: 0 0 20px rgba(255,215,0,0.4); }
        .room-code-input { font-family: 'Press Start 2P', monospace; font-size: clamp(20px, 3.5vw, 32px); color: #ffd700; background: #0d0d1a; border: 3px solid #ffd700; border-radius: 12px; padding: 10px 16px; letter-spacing: 8px; text-align: center; width: 200px; max-width: 80vw; outline: none; pointer-events: all; }
        .room-code-input::placeholder { color: #444; font-size: 12px; letter-spacing: 2px; }
        .copy-btn { font-size: clamp(9px, 1.5vw, 13px) !important; padding: 10px 20px !important; }

        /* 图鉴角落按钮（左上角） */
        .pokedex-corner {
            position: absolute;
            top: 12px;
            left: 12px;
            font-family: 'Press Start 2P', monospace;
            padding: 8px 14px;
            font-size: 10px;
            background: rgba(255,215,0,0.15);
            border: 2px solid rgba(255,215,0,0.4);
            color: #ffd700;
            border-radius: 8px;
            cursor: pointer;
            transition: 0.2s;
            touch-action: manipulation;
            pointer-events: all;
        }

        .pokedex-corner:active {
            transform: scale(0.95);
            background: #ffd700;
            color: #000;
        }

        /* 原菜单中的描述文字不再显示 */
        #menu-overlay .sub,
        #menu-overlay .menu-btn-row,
        #menu-overlay > div:not(.menu-screen) {
            display: none;
        }



        /* 16:9 菜单适配优化：压缩高度、避免图片按钮溢出 */
        .menu-screen {
            padding: 12px 16px;
            gap: 12px;
            justify-content: center;
            overflow: hidden;
        }

        /* 主菜单内容放大150% */
        .menu-title,
        .menu-buttons,
        .difficulty-title,
        .difficulty-buttons,
        .back-btn {
            transform: scale(1.5);
            transform-origin: center center;
        }

        .menu-title {
            text-align: center;
            white-space: nowrap;
        }
        .menu-title img {
            max-width: 100%;
            width: clamp(280px, 80%, 800px);
            height: auto;
            display: block;
            margin: 0 auto 4px;
        }

        .menu-buttons {
            gap: 14px;
            max-width: 460px;
        }

        .menu-btn {
            flex: 1 1 90px;
            min-width: 70px;
            max-width: 140px;
        }

        .difficulty-title {
            font-size: clamp(16px, 3vw, 26px);
            line-height: 1.2;
        }

        .difficulty-buttons {
            gap: 12px;
            max-width: 460px;
        }

        .difficulty-buttons button {
            flex: 1 1 80px;
            min-width: 70px;
            max-width: 130px;
        }

        .back-btn {
            padding: 10px 24px;
            font-size: 12px;
            margin-top: 4px;
        }

        .pokedex-corner {
            top: 8px;
            left: 8px;
            padding: 6px 12px;
            font-size: 9px;
        }

        @keyframes shake {
            0% { transform: translate(0, 0); }
            10% { transform: translate(-5px, -3px); }
            20% { transform: translate(5px, 3px); }
            30% { transform: translate(-4px, 2px); }
            40% { transform: translate(4px, -2px); }
            50% { transform: translate(-3px, -1px); }
            60% { transform: translate(3px, 1px); }
            70% { transform: translate(-2px, 0px); }
            80% { transform: translate(2px, 0px); }
            90% { transform: translate(-1px, 0px); }
            100% { transform: translate(0, 0); }
        }

        @media (max-width:500px) { .ctrl-btn { width:44px; height:44px; font-size:16px; } .health-bar .bar-bg { height:10px; } #hud { top:4px; left:6px; right:6px; } .ctrl-btn.skill { font-size:11px; } .ctrl-btn .sub-label { font-size:6px; } .char-card { min-width:80px; padding:10px; } .char-card img { width:40px; height:40px; } .pokedex-content { max-height:90vh; } .dex-list .dex-card-item { min-width:100px; padding:12px; } .dex-detail .dex-title { font-size:14px; } }