/* style.css (Cleaned V3.9.1) */

/* ================= 1. 全局基础 ================= */
@font-face { font-family: 'Press Start 2P'; src: url('./PressStart2P-Regular.ttf') format('truetype'); font-display: swap; }
* { box-sizing: border-box; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color: #202020; overflow: hidden; font-family: sans-serif; overscroll-behavior: none; overscroll-behavior-x: none;}

/* ================= 2. 启动页 (Start Screen) ================= */
#start-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center; overflow-y: auto; }
.brand-header { margin-bottom: 25px; display: flex; flex-direction: column; align-items: center; width: 100%; }
h2 { font-size: 36px; margin: 5px 0; line-height: 1.2; background: linear-gradient(180deg, #FF9800 0%, #FF5722 100%); background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0px #5d1c15); font-weight: 900; letter-spacing: 2px; flex-shrink: 0; }
.app-subtitle { color: #fff; font-size: 16px; font-weight: bold; letter-spacing: 1px; margin-bottom: 8px; opacity: 0.9; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.app-features { color: #888; font-size: 12px; background: rgba(255,255,255,0.1); padding: 4px 12px; border-radius: 12px; margin-bottom: 5px; }
.app-features span { color: #ccc; font-weight: normal; margin: 0 3px; }
.version-text { color: #666; font-size: 12px; font-family: monospace; margin-bottom: 15px; letter-spacing: 1px; flex-shrink: 0; }
.start-content-layout { display: flex; flex-direction: column; align-items: center; width: 90%; max-width: 800px; transition: all 0.3s; padding-bottom: 60px; gap: 40px; }
.layout-column { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.main-action-column { order: 1; z-index: 10; width: 100%; display: flex; flex-direction: column; gap: 15px; }
.netplay-column { order: 2; opacity: 0.9; transform: scale(0.98); width: 100%; }
#netplay-area { background: linear-gradient(145deg, #2b2b2b, #1a1a1a); border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); width: 100%; max-width: 360px; margin-bottom: 0px; padding: 10px 15px 15px 15px; margin-inline: 0; min-width: 0; }
#netplay-area legend { color: #ddd; font-size: 13px; font-weight: bold; padding: 0 8px; margin-left: 10px; display: flex; align-items: center; gap: 6px; }
.apple-net-icon { width: 1.1em; height: 1.1em; opacity: 0.9; }
.net-btn { background: #304ffe; color: #fff; border: none; height: 32px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-size: 13px; margin: 5px; transition: transform 0.1s; white-space: nowrap; }
.net-btn:active { transform: scale(0.95); }
.net-input { height: 32px; padding: 0 10px; border-radius: 5px; border: 1px solid #666; background: #222; color: #fff; width: 140px; text-align: center; font-size: 16px; letter-spacing: 2px; user-select: text; -webkit-user-select: text; }
.join-row { display: flex; justify-content: center; gap: 10px; margin-top: 10px; width: 100%; }
#host-id-input { width: 110px; margin: 0; }
.room-code-display { margin: 10px 0; font-size: 14px; color: #ccc; }
#display-room-code { background: #000; color: #2ecc71; padding: 5px 10px; border-radius: 5px; font-size: 20px; letter-spacing: 3px; cursor: pointer; border: 1px dashed #555; }
.player-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 10px; }
.player-slot { background: #222; border: 1px solid #444; border-radius: 4px; padding: 8px; font-size: 12px; color: #666; transition: all 0.3s; }
.player-slot.active { background: #27ae60; color: #fff; border-color: #2ecc71; box-shadow: 0 0 5px rgba(46, 204, 113, 0.5); font-weight: bold; }
#slot-p1.active { background: #3498db; border-color: #5dade2; }
.player-slot.relay { background: #8e44ad !important; border-color: #9b59b6 !important; }

/* ================= 3. 游戏选择条 ================= */
.game-selector-trigger { background: linear-gradient(145deg, #2b2b2b, #1a1a1a); border: 1px solid #444; border-radius: 14px; padding: 12px 18px; width: 100%; max-width: 360px; margin-bottom: 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,0.4); transition: all 0.2s; position: relative; }
.game-selector-trigger:active { transform: scale(0.98); background: #111; }
.trigger-info { display: flex; flex-direction: column; text-align: left;}
.trigger-label { color: #888; font-size: 11px; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
.trigger-label::before { content: ''; display: inline-block; width: 6px; height: 6px; background: #2ecc71; border-radius: 50%; box-shadow: 0 0 5px #2ecc71; }
.trigger-value { color: #fff; font-weight: bold; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;}
.trigger-action { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 20px; }
.trigger-hint { font-size: 12px; color: #ccc; }
.trigger-icon { font-size: 12px; color: #fff; opacity: 0.8; }

/* ================= 4. 恢复区 & Loading ================= */
#resume-area { display: none !important; margin-top: -5px; margin-bottom: 5px;}
.resume-title { color: #2ecc71; font-weight: bold; font-size: 18px; margin-bottom: 10px; text-shadow: 0 2px 2px #000; }
.resume-file { color: #fff; font-size: 16px; font-weight: bold; margin-bottom: 5px; border-bottom: 1px dashed #666; padding-bottom: 5px; }
.btn-discard { background: transparent; border: 1px solid #666; color: #888; padding: 8px 20px; border-radius: 20px; margin-top: 15px; font-size: 12px; cursor: pointer; }
/* 注意：旧版 #start-btn 样式已删除，由后续“双入口按钮布局”接管 */
#start-btn:disabled { background: #555; box-shadow: none; cursor: not-allowed; }
#loading-msg { color:#888; font-size:12px; margin-top:20px; font-family: monospace; min-height: 1.2em; }

/* ================= 5. 底部键盘提示 ================= */
.pc-tips { display: none; position: absolute; bottom: 10px; font-size: 11px; color: #aaa; background: rgba(0,0,0,0.8); padding: 12px 20px; border-radius: 8px; line-height: 1.6; text-align: center; border: 1px solid #444; pointer-events: none; width: 90%; max-width: 360px; }
@media (min-width: 768px) and (hover: hover) { .pc-tips { display: block; } }
.tips-header { font-weight: bold; color: #fff; margin-bottom: 5px; font-size: 12px; display: block; }
.tip-row { display: block; margin-bottom: 2px; }

/* ================= 6. 通用弹窗 (Modals) ================= */
#custom-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); z-index: 10999; display: none; justify-content: center; align-items: center; }
.modal-box { background: #2c3e50; width: 300px; padding: 25px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); text-align: center; border: 2px solid #34495e; animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes modalPop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-msg { color: #ecf0f1; font-size: 16px; margin-bottom: 25px; line-height: 1.5; font-weight: bold; }
.modal-btns { display: flex; justify-content: center; gap: 15px; }
.modal-btn { padding: 10px 25px; border-radius: 25px; border: none; cursor: pointer; font-size: 14px; font-weight: bold; transition: transform 0.1s; }
.modal-btn:active { transform: scale(0.95); }
.btn-ok { background: #27ae60; color: white; box-shadow: 0 4px 0 #1e8449; }
.btn-cancel { background: #95a5a6; color: white; box-shadow: 0 4px 0 #7f8c8d; }
#client-wait-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 2000; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center; }
.wait-content { animation: pulse 2s infinite; }
.wait-spinner { font-size: 50px; margin-bottom: 20px; display: inline-block; animation: spin 2s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulse { 0% { opacity: 0.8; } 50% { opacity: 1; } 100% { opacity: 0.8; } }
.wait-sub { color: #888; font-size: 12px; margin-top: 10px; }
#toast { position: fixed; top: 30px; left: 50%; transform: translateX(-50%) translateY(-100px); background: rgba(50,50,50,0.95); color: #fff; padding: 10px 25px; border-radius: 30px; z-index: 12000; transition: transform 0.3s; white-space: nowrap; max-width: 90%; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
#toast.show { transform: translateX(-50%) translateY(0); }

/* ================= 7. 游戏库弹窗 ================= */
#game-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); z-index: 9999; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.25s; touch-action: auto !important; }
#game-modal-overlay.open { display: flex; opacity: 1; }
.game-modal-content { background: #1c1c1e; width: 90%; max-width: 450px; max-height: 85vh; border-radius: 20px; border: 1px solid #333; display: flex; flex-direction: column; box-shadow: 0 25px 50px rgba(0,0,0,0.8); transform: scale(0.95); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden; touch-action: auto !important; }
#game-modal-overlay.open .game-modal-content { transform: scale(1); }
.modal-header { padding: 15px 20px; background: rgba(30,30,30,0.95); border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.modal-title { color: #fff; font-weight: bold; font-size: 17px; }
.modal-close { background: rgba(255,255,255,0.1); border: none; color: #ccc; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-tabs-container { padding: 15px 15px 5px 15px; background: #1c1c1e; flex-shrink: 0; }
.modal-tabs { display: flex; background: #2c2c2e; padding: 4px; border-radius: 12px; gap: 4px; }
.modal-tab-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; border: none; color: #8e8e93; padding: 8px 0; border-radius: 10px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.tab-main { font-size: 13px; font-weight: bold; line-height: 1.4; }
.tab-sub { font-size: 9px; opacity: 0.6; font-family: monospace; letter-spacing: 0.5px; }
.modal-tab-btn.active { color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.modal-tab-btn.active .tab-sub { opacity: 1; color: rgba(255,255,255,0.8); }
.modal-tab-btn[data-cat="home_console"].active { background: linear-gradient(180deg, #ff4757, #d63031); }
.modal-tab-btn[data-cat="handheld"].active { background: linear-gradient(180deg, #6c5ce7, #5352ed); }
.modal-tab-btn[data-cat="arcade"].active { background: linear-gradient(180deg, #ffa502, #e67e22); }
.modal-game-list { flex: 1; overflow-y: auto; min-height: 0; max-height: 65vh; padding-right: 5px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.modal-game-list * { touch-action: pan-y !important; }
.modal-game-list::-webkit-scrollbar { width: 4px; }
.modal-game-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }
.modal-game-item { touch-action: pan-y !important; background: #2c2c2e; color: #fff; padding: 15px; border-radius: 12px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background 0.1s; border: 1px solid transparent; }
.modal-game-item:active { background: #3a3a3c; }
.modal-game-item.selected { background: #1c1c1e; border-color: #2ecc71; color: #2ecc71; font-weight: bold; box-shadow: inset 0 0 10px rgba(46, 204, 113, 0.1); }
.modal-game-item::after { content: ''; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ecc71' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center; background-size: contain; opacity: 0; transition: opacity 0.2s; }
.modal-game-item.selected::after { opacity: 1; }

/* ================= 8. 游戏外壳 & 虚拟按键 ================= */
#gb-shell { display: flex; flex-direction: column; width: 100%; height: 100%; max-width: min(600px, calc(100vh * 0.65)); margin: 0 auto; background-color: #c4c4c4; position: relative; border-radius: 10px 10px 40px 40px; box-shadow: 0 0 50px rgba(0,0,0,0.5); overflow: hidden; font-size: clamp(10px, 3.5vh, 16px); }
.screen-container { width: 98%; margin: 5px auto 5px auto; aspect-ratio: 4 / 3; background-color: #000; border-radius: 8px; box-shadow: inset 0 0 10px rgba(0,0,0,1); position: relative; flex-shrink: 0; border: 2px solid #333; z-index: 5; overflow: hidden; }
.screen-container canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: contain !important; image-rendering: pixelated; }
#remote-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; display: none; background: #000; z-index: 20; }
.gb-branding { text-align: center; margin: 0.2em auto; font-family: sans-serif; font-weight: 800; font-style: italic; opacity: 0.6; flex-shrink: 0; z-index: 5; }
.brand-nintendo { color: #888; font-size: 0.75em; font-weight: 800; margin-right: 4px; text-transform: uppercase; letter-spacing: 6px; font-family: Arial, sans-serif; opacity: 0.8; }
.brand-gameboy { color: #304ffe; font-size: 1.2em; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 2px; font-family: sans-serif; text-shadow: 1px 1px 0px rgba(0,0,0,0.1); }
.controls-area { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; padding: 1% 5%; position: relative; }
.upper-controls { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 1%; flex-shrink: 0; }
.dpad-visual-base { position: fixed; width: 120px; height: 120px; background: rgba(255, 255, 255, 0.15); border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); transform: translate(-50%, -50%); pointer-events: none; display: none; z-index: 9999; box-shadow: 0 0 15px rgba(0,0,0,0.3); }
.dpad-visual-knob { position: fixed; width: 50px; height: 50px; background: rgba(255, 255, 255, 0.6); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; display: none; z-index: 10000; box-shadow: 0 0 10px rgba(255,255,255,0.6); backdrop-filter: blur(2px); border: 2px solid rgba(255,255,255,0.8); }
.dpad-group { width: 36%; aspect-ratio: 1 / 1; position: relative; pointer-events: none; }
.dpad-bg { position: absolute; top: 33.33%; left: 0; width: 100%; height: 33.33%; background: #333; border-radius: 4px; box-shadow: inset 0 0 5px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.5); z-index: 1;}
.dpad-bg::after { content: ''; position: absolute; top: -100%; left: 33.33%; width: 33.33%; height: 300%; background: #333; border-radius: 4px; z-index: 1;}
.dpad-arrow { position: absolute; background: rgba(255, 255, 255, 0.3); border-radius: 2px; z-index: 2; display: none; box-shadow: 0 0 5px rgba(255,255,255,0.5); }
.dpad-arrow.active { display: block; }
.dpad-up { top: 0; left: 33.33%; width: 33.33%; height: 33.33%; }
.dpad-down { bottom: 0; left: 33.33%; width: 33.33%; height: 33.33%; }
.dpad-left { top: 33.33%; left: 0; width: 33.33%; height: 33.33%; }
.dpad-right { top: 33.33%; right: 0; width: 33.33%; height: 33.33%; }
.action-group { width: 42%; aspect-ratio: 1 / 1; position: relative; z-index: 101; pointer-events: none; }
.round-btn { width: 35%; height: 35%; border-radius: 50%; position: absolute; color: rgba(255,255,255,0.6); font-weight: 900; box-shadow: 3px 3px 6px rgba(0,0,0,0.4); font-size: 1.2em; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(0,0,0,0.1); font-family: sans-serif; transition: transform 0.05s, opacity 0.05s; }
.round-btn::after { content: attr(data-label); transform: rotate(0deg); }
.btn-red { background: #8b1d28; border-color: #731822; }
.btn-blue { background: #2980b9; border-color: #1a5276; }
.btn-ta { top: 0; left: 50%; transform: translateX(-50%); }
.btn-b { bottom: 0; left: 50%; transform: translateX(-50%); }
.btn-tb { top: 50%; left: 0; transform: translateY(-50%); }
.btn-a { top: 50%; right: 0; transform: translateY(-50%); }
.btn-ta.active, .btn-b.active { transform: translateX(-50%) scale(0.9); }
.btn-tb.active, .btn-a.active { transform: translateY(-50%) scale(0.9); }
.round-btn.active { opacity: 0.9; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5); filter: brightness(1.2); }
.middle-controls { display: flex; justify-content: center; gap: 15%; width: 100%; margin-top: 12%; margin-bottom: auto; z-index: 300; pointer-events: none; }
.capsule-btn { width: 16%; aspect-ratio: 2.8 / 1; background: #666; border-radius: 50px; border: 1px solid #555; box-shadow: 2px 2px 4px rgba(0,0,0,0.3); transform: rotate(-20deg); position: relative; pointer-events: auto; }
.capsule-label { position: absolute; width: 100%; text-align: center; top: 130%; color: #777; font-size: 0.6em; font-weight: bold; transform: rotate(0deg); white-space: nowrap; }
.capsule-btn:active { transform: rotate(-20deg) scale(0.95); opacity: 0.8; }
#gamepad-ui { display: none; width: 100%; text-align: center; margin-bottom: 8px; animation: fadeIn 0.5s; z-index: 50; pointer-events: none; }
.gp-layout-selector { pointer-events: auto; background: rgba(0, 0, 0, 0.3); color: #fff; border: 1px solid #555; padding: 4px 8px; border-radius: 4px; font-size: 12px; outline: none; cursor: pointer; font-family: sans-serif; }
.gp-icon { font-size: 14px; margin-right: 5px; vertical-align: middle; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.bottom-controls { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 10px; padding-bottom: 20px; position: relative; flex-shrink: 0; z-index: 300; pointer-events: auto; }
.emu-sys-btns { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px 15px; width: 100%; max-width: 230px; margin: 0 auto; padding: 0 5px; }
.sys-btn { background: #2980b9; color: #fff; padding: 0 0.8em; font-size: 0.7em; border: none; height: 2.6em; border-radius: 1em; box-shadow: 0 3px 0 rgba(0,0,0,0.3); white-space: nowrap; transition: transform 0.1s; min-width: 4.5em;}
.sys-btn:active { transform: scale(0.95); box-shadow: 0 1px 0 rgba(0,0,0,0.3); }
.speaker { position: absolute; right: 15px; bottom: 15px; display: flex; gap: 5px; transform: rotate(-25deg); opacity: 0.2; pointer-events: none; }
.speaker div { width: 5px; height: 30px; background: #000; border-radius: 2px; }
#dpad-hitbox { position: absolute; z-index: 999; touch-action: none; background: rgba(0,255,0,0.0); }
#action-hitbox { position: absolute; z-index: 999; touch-action: none; background: rgba(255,0,0,0.0); }

/* ================= 9. 屏幕控制板模式 ================= */
.screen-container { transition: aspect-ratio 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
.screen-container.screen-pad-mode { aspect-ratio: 4 / 3.25 !important; }
.screen-container.screen-pad-mode canvas, .screen-container.screen-pad-mode video { height: 92% !important; object-fit: contain; object-position: top center; border-bottom: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.screen-btn { position: absolute; bottom: 0; top: auto; height: 8%; width: 50%; background: rgba(20, 20, 20, 0.95); backdrop-filter: blur(10px); color: #666; font-size: 10px; font-weight: 800; font-family: sans-serif; letter-spacing: 2px; display: flex; align-items: center; justify-content: center; z-index: 100; transition: all 0.1s; user-select: none; }
.screen-btn.left { left: 0; border-right: 1px solid rgba(255, 255, 255, 0.05); }
.screen-btn.left::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #2980b9; opacity: 0; transition: opacity 0.2s; }
.screen-btn.right { right: 0; }
.screen-btn.right::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: #c0392b; opacity: 0; transition: opacity 0.2s; }
.screen-btn.active { background: rgba(50, 50, 50, 1); color: #fff; text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
.screen-btn.left.active { box-shadow: inset 15px 0 20px -10px rgba(41, 128, 185, 0.3); }
.screen-btn.left.active::before { opacity: 1; }
.screen-btn.right.active { box-shadow: inset -15px 0 20px -10px rgba(192, 57, 43, 0.3); }
.screen-btn.right.active::before { opacity: 1; }

/* ================= 10. iPad/平板 竖屏适配 ================= */
@media (min-width: 768px) and (orientation: portrait) { #gb-shell { max-width: min(900px, calc(100svh * 0.62)) !important; border-radius: 20px 20px 50px 50px; margin-bottom: 0; } .screen-container { border-width: 0 8px; } .controls-area { justify-content: center; } }

/* ================= 11. 游戏加载动画 ================= */
#game-loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 3000; display: none; flex-direction: column; justify-content: center; align-items: center; backdrop-filter: blur(10px); }
.loader-box { text-align: center; width: 80%; max-width: 400px; }
.loader-icon { font-size: 60px; margin-bottom: 20px; animation: bounce 1s infinite alternate; }
.loader-text { color: #fff; font-size: 18px; font-weight: bold; margin-bottom: 15px; font-family: sans-serif; letter-spacing: 1px; }
.loader-sub { color: #888; font-size: 12px; margin-top: 10px; }
.loader-bar-container { width: 100%; height: 20px; background: #333; border: 2px solid #555; border-radius: 10px; overflow: hidden; position: relative; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); }
.loader-bar-fill { width: 100%; height: 100%; background: linear-gradient(45deg, #304ffe 25%, #3d5afe 25%, #3d5afe 50%, #304ffe 50%, #304ffe 75%, #3d5afe 75%, #3d5afe 100%); background-size: 30px 30px; animation: stripe-move 1s linear infinite; }
@keyframes stripe-move { 0% { background-position: 0 0; } 100% { background-position: 30px 0; } }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* ================= 12. 新手引导 (Onboarding) ================= */
#guide-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10001; display: none; touch-action: none; }
#guide-spotlight { position: absolute; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.85); border: 2px solid #f1c40f; border-radius: 12px; pointer-events: none; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
#guide-info { position: absolute; width: 100%; text-align: center; color: #fff; pointer-events: none; transition: all 0.3s ease; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.guide-title { font-size: 20px; font-weight: bold; margin-bottom: 8px; color: #f1c40f; }
.guide-desc { font-size: 14px; color: #ccc; line-height: 1.5; }
.guide-icon { font-size: 60px; margin-bottom: 20px; animation: pulse 1.5s infinite; }
.guide-next-hint { margin-top: 30px; font-size: 12px; color: #888; border: 1px solid #555; display: inline-block; padding: 4px 12px; border-radius: 20px; background: rgba(0,0,0,0.5); }
.joystick-bubble { position: absolute; background: #e67e22; color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: bold; z-index: 500; pointer-events: none; box-shadow: 0 4px 10px rgba(0,0,0,0.5); animation: float-bubble 2s infinite ease-in-out; }
.joystick-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border-width: 6px; border-style: solid; border-color: #e67e22 transparent transparent transparent; }
@keyframes float-bubble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } }
#pc-key-guide, #pc-guide-trigger { display: none !important; }
@media (min-width: 768px) and (hover: hover) { #pc-key-guide { display: flex; align-items: center; justify-content: center; gap: 20px; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(30, 30, 30, 0.85); backdrop-filter: blur(8px); padding: 10px 30px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); z-index: 2000; box-shadow: 0 10px 30px rgba(0,0,0,0.5); opacity: 1; transition: opacity 0.6s ease, transform 0.4s ease; } #pc-key-guide.autohide { opacity: 0 !important; transform: translate(-50%, 20px) !important; pointer-events: none; } #pc-key-guide:hover { opacity: 1 !important; transform: translate(-50%, 0) !important; pointer-events: auto; } kbd { display: inline-block; background: linear-gradient(180deg, #f0f0f0 0%, #d0d0d0 100%); color: #333; font-family: monospace; font-weight: bold; font-size: 14px; padding: 4px 8px; border-radius: 4px; border-bottom: 3px solid #999; min-width: 28px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.3); margin: 2px; } kbd.key-wide { min-width: 50px; font-size: 12px; } .guide-section { display: flex; flex-direction: column; align-items: center; } .guide-label { color: #888; font-size: 10px; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; } .key-cluster { display: flex; flex-direction: column; align-items: center; } .key-row { display: flex; justify-content: center; } .key-cluster-linear { display: flex; gap: 15px; } .key-pair { display: flex; flex-direction: column; align-items: center; gap: 2px; } .key-pair span { font-size: 10px; color: #aaa; } .key-cluster-action { display: flex; gap: 15px; } .action-col { display: flex; flex-direction: column; gap: 5px; align-items: center; } .action-hint { font-size: 10px; color: #666; } .action-hint.highlight { color: #f1c40f; font-weight: bold; } .guide-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.1); } .guide-close { position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; background: #c0392b; color: #fff; border-radius: 50%; text-align: center; line-height: 24px; cursor: pointer; font-size: 16px; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.3); } .guide-close:hover { transform: scale(1.1); } }

#home-help-btn{position:fixed;top:20px;right:20px;z-index:10000;width:28px;height:28px;color:rgba(255,255,255,0.5);cursor:pointer;background:transparent;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.8));transition:all 0.3s ease}#home-help-btn:active{color:#fff;opacity:1;transform:scale(0.95);filter:drop-shadow(0 0 8px rgba(255,255,255,0.6))}

/* ================= 13. 杂项与存档管理器 ================= */
.tab-btn-wrapper { position: relative; display: inline-block; }
.modal-tab-btn { position: relative; overflow: visible !important; }
.red-dot { position: absolute; top: -5px; right: -2px; background: linear-gradient(135deg, #ff6b6b, #ee5253); color: white; font-size: 10px; padding: 1px 5px; border-radius: 10px; font-weight: 800; line-height: 1.2; box-shadow: 0 2px 4px rgba(231, 76, 60, 0.4); z-index: 10; pointer-events: none; animation: dotBounce 2s infinite ease-in-out; }
@keyframes dotBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.game-folder { margin-bottom: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); }
.folder-header { padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background 0.2s; }
.folder-header:active { background: rgba(255, 255, 255, 0.1); }
.folder-title-row { display: flex; flex-direction: column; gap: 2px; }
.folder-name { font-weight: bold; color: #f5f5f5; font-size: 14px; }
.folder-desc { font-size: 11px; color: #888; }
.folder-arrow { font-size: 12px; color: #666; transition: transform 0.3s; }
.folder-header.open .folder-arrow { transform: rotate(180deg); }
.folder-content { background: rgba(0, 0, 0, 0.2); display: none; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.sub-item { padding-left: 32px !important; font-size: 13px !important; position: relative; }
.sub-item::before { content: ""; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background-color: rgba(255,255,255,0.3); border-radius: 50%; }

/* --- 双入口按钮布局 (New) --- */
.start-action-container { width: 100%; max-width: 360px; display: flex; gap: 12px; margin-top: 0; padding: 0 2px; }
#start-btn, #btn-restart { border: none; color: #fff; font-family: 'Press Start 2P', sans-serif; letter-spacing: 1px; cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,0.4); display: flex; align-items: center !important; justify-content: center !important; gap: 10px; }
#start-btn::before, #btn-restart::before { content: ''; display: block; background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)); flex-shrink: 0; }
#start-btn { flex: 1; height: 54px; border-radius: 14px; font-size: 16px; background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%); box-shadow: 0 5px 0 #922b21, 0 12px 15px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.3); }
#start-btn[data-mode='new']::before { width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); }
#start-btn[data-mode='resume'] { background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%); box-shadow: 0 5px 0 #1e8449, 0 12px 15px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.3); }
#start-btn[data-mode='resume']::before { width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z'/%3E%3C/svg%3E"); }
#btn-restart { display: none; flex: 0 0 35%; height: 54px; border-radius: 14px; font-size: 14px; background: linear-gradient(180deg, #e67e22 0%, #d35400 100%); box-shadow: 0 5px 0 #a04000, 0 6px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3); }
#btn-restart::before { width: 20px; height: 20px; margin-top: -2px; transition: transform 0.4s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z'/%3E%3C/svg%3E"); }
#start-btn:active, #btn-restart:active { transform: translateY(3px) scale(0.99); filter: brightness(0.9); box-shadow: inset 0 2px 5px rgba(0,0,0,0.2) !important; }
#btn-restart:active::before { transform: rotate(-360deg); }
.start-action-container.dual-mode #start-btn { flex: 1; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.start-action-container.dual-mode #btn-restart { display: flex !important; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }

/* --- 存档管理器核心 UI --- */
#save-manager-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); z-index: 9999; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.2s; touch-action: pan-y !important; }
#save-manager-overlay.open { display: flex; opacity: 1; }
.save-manager-content { background: rgba(28, 28, 30, 0.95); width: 85%; max-width: 380px; height: 70vh; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; box-shadow: 0 25px 50px rgba(0,0,0,0.5); overflow: hidden; transform: scale(0.95); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
#save-manager-overlay.open .save-manager-content { transform: scale(1); }
.save-header { padding: 15px 20px; background: rgba(44, 44, 46, 0.95); border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.save-title { color: #fff; font-weight: bold; font-size: 16px; letter-spacing: 1px; }
.save-header-actions { display: flex; gap: 15px; align-items: center; }
.cloud-btn { background: transparent; border: none; font-size: 20px; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; padding: 0; }
.cloud-btn:active { opacity: 1; transform: scale(0.9); }
.save-list { flex: 1; overflow-y: auto; padding: 15px; -webkit-overflow-scrolling: touch; touch-action: pan-y !important; }
.save-slot-item { display: flex; background: #2c2c2e; border-radius: 10px; padding: 10px; margin-bottom: 12px; border: 1px solid transparent; cursor: pointer; transition: all 0.2s; align-items: center; position: relative; overflow: hidden; touch-action: pan-y !important; }
.save-slot-item:active { transform: scale(0.98); background: #3a3a3c; }
.slot-thumb { width: 120px; flex-basis: 120px; aspect-ratio: 4/3; height: auto !important; background-color: #000; border-radius: 8px; background-size: cover; background-position: center; flex-shrink: 0; margin-right: 15px; border: 1px solid #444; position: relative; touch-action: pan-y !important; }
.slot-info { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; touch-action: pan-y !important; }
.slot-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; touch-action: pan-y !important; }
.slot-id { color: #fff; font-weight: bold; font-size: 15px; touch-action: pan-y !important; }
.slot-date { color: #8e8e93; font-size: 12px; font-family: monospace; touch-action: pan-y !important; }
.slot-tag { background: #e67e22; color: #fff; font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: bold; }
.save-slot-item.auto-slot { background: linear-gradient(145deg, #1e3a28, #14251a); border: 1px solid #2ecc71; }
.save-slot-item.auto-slot .slot-id { color: #2ecc71; }
.save-slot-item.empty { background: transparent; border: 1px dashed #444; opacity: 0.7; }
.save-slot-item.empty .slot-thumb { background: rgba(255,255,255,0.05); border: none; }
.save-slot-item.empty .slot-id { color: #666; }
.save-separator { display: flex; align-items: center; color: #666; font-size: 11px; margin: 15px 0 10px 0; touch-action: pan-y !important; }
.save-separator::before, .save-separator::after { content: ''; flex: 1; height: 1px; background: #444; }
.save-separator span { padding: 0 10px; }
.auto-thumb { background-color: #1e3a28 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.43-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 46px !important; border: 1px solid #2ecc71; box-shadow: inset 0 0 15px rgba(0,0,0,0.6); }
.no-img-thumb, .empty-thumb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpath d='M8.5 22v-2h7v2'%3E%3C/path%3E%3Cpath d='M12 8l4 4H8l4-4z'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 35px; }

/* ================= 14. 底部系统菜单 ================= */
.three-col-mode { display: flex; justify-content: center; gap: 30px; width: 100%; align-items: flex-end; }
.sys-btn-icon { background: transparent; border: none; color: #888; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 5px 15px; border-radius: 12px; transition: all 0.2s; cursor: pointer; min-width: 60px; }
.sys-btn-icon:active { background: rgba(255, 255, 255, 0.1); transform: scale(0.95); }
.btn-icon-img { font-size: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.btn-icon-label { font-size: 10px; font-weight: bold; color: #aaa; }
.sys-btn-icon.active .btn-icon-img { transform: scale(1.1); }
.sys-btn-icon.active .btn-icon-label { color: #fff; }
#sys-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 11000; display: none; opacity: 0; align-items: flex-end; justify-content: center; transition: opacity 0.2s; touch-action: none; }
#sys-menu-overlay.open { display: flex; opacity: 1; }
.sys-menu-content { background: rgba(28, 28, 30, 0.90); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); width: 100%; max-width: 450px; border-radius: 24px 24px 0 0; padding: 20px 16px 10px 16px; box-shadow: 0 -10px 40px rgba(0,0,0,0.6); border-top: 1px solid rgba(255,255,255,0.1); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; max-height: 80vh; }
#sys-menu-overlay.open .sys-menu-content { transform: translateY(0); }
.menu-header-profile { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.05); padding: 12px; border-radius: 16px; margin-bottom: 20px; cursor: pointer; }
.menu-header-profile:active { background: rgba(255,255,255,0.1); }
.profile-avatar { width: 40px; height: 40px; background: #444; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.profile-info { flex: 1; }
.profile-name { color: #fff; font-weight: bold; font-size: 15px; }
.profile-desc { color: #888; font-size: 11px; margin-top: 2px; }
.profile-arrow { color: #666; font-size: 12px; }
.menu-scroll-area { overflow-y: auto; padding-bottom: 20px; }
.menu-group-title { color: #666; font-size: 12px; margin: 15px 0 8px 5px; font-weight: bold; letter-spacing: 0.5px; }
.menu-grid-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 5px; }
.menu-card { background: rgba(44, 44, 46, 0.6); border-radius: 14px; padding: 12px 5px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: all 0.1s; }
.menu-card:active { background: #fff; }
.menu-card:active * { color: #000 !important; }
.card-icon { font-size: 24px; margin-bottom: 2px; }
.card-name { color: #fff; font-size: 12px; font-weight: bold; }
.card-status { color: #888; font-size: 10px; }
.menu-list-item { display: flex; align-items: center; gap: 12px; background: rgba(44, 44, 46, 0.6); padding: 12px; margin-bottom: 1px; cursor: pointer; }
.menu-list-item:first-of-type { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.menu-list-item:last-of-type { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; margin-bottom: 5px; }
.menu-list-item:active { background: rgba(60, 60, 62, 0.8); }
.item-icon { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; }
.item-content { flex: 1; }
.item-title { color: #fff; font-size: 14px; }
.item-desc { color: #888; font-size: 10px; margin-top: 2px; }
.item-action { color: #888; font-size: 12px; }
.item-arrow { color: #555; font-size: 12px; }
.menu-close-bar { width: 100%; height: 20px; display: flex; justify-content: center; align-items: center; margin-top: 5px; cursor: pointer; }
.close-indicator { width: 40px; height: 4px; background: #555; border-radius: 2px; }
.item-toggle { width: 40px; height: 24px; background: #3a3a3c; border-radius: 12px; position: relative; transition: background 0.3s; }
.item-toggle::after { content: ''; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.item-toggle.active { background: #34c759; }
.item-toggle.active::after { transform: translateX(16px); }

/* ================= 15. 滚动与触控修复 ================= */
.menu-scroll-area, .menu-scroll-area * { touch-action: pan-y !important; -webkit-overflow-scrolling: touch; user-select: none; }
.menu-list-item:active, .menu-card:active { transition: background 0.1s; }
#sys-menu-overlay { touch-action: none; }
.sys-menu-content { touch-action: auto; }
@media (hover: hover) { #dpad-hitbox, #action-hitbox { pointer-events: auto !important; cursor: crosshair; } .capsule-btn { pointer-events: auto !important;}}

/* ================= 16. 游戏简介 ================= */
#game-info-card { box-sizing: border-box; width: 100%; max-width: 360px; margin: 10px auto 0; background: linear-gradient(145deg, #2b2b2b, #1a1a1a); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 15px; color: #ccc; text-align: left; box-shadow: 0 8px 20px rgba(0,0,0,0.4); order: 3; }
summary { list-style: none; outline: none; } /* 隐藏默认三角 */
summary::-webkit-details-marker { display: none; }
.info-header-row { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.info-title-group { display: flex; align-items: center; gap: 8px; }
.info-icon-graphic { font-size: 18px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
#game-display-title { font-size: 16px; color: #f1c40f; margin: 0; font-weight: bold; }
.info-meta span { background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px; font-size: 10px; color: #777; margin-left: 5px; }
#game-introduction { margin-top: 12px; font-size: 13px; line-height: 1.6; color: #bbb; border-top: 1px dashed rgba(255,255,255,0.1); padding-top: 12px; }
@media (orientation: landscape) { #game-info-card { max-width: 800px; margin-top: 0; } } /* 横屏适配 */
@media (max-height: 800px) { /* 矮屏/手机竖屏滚动修复 */
    #start-overlay { justify-content: flex-start !important; padding-top: 25px; padding-bottom: 0; }
    .brand-header { margin-bottom: 15px !important; flex-shrink: 0; }
    .start-content-layout { gap: 20px !important; }
    #start-overlay, #start-overlay * { touch-action: pan-y !important; }
    #loading-msg:not(:empty){position:fixed!important;left:0;bottom:0!important;width:100%;z-index:999;pointer-events:none;height:auto;background-color:rgba(18,18,18,0.98);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,0.1);padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom));box-shadow:0 -4px 10px rgba(0,0,0,0.3)}
}

/* ================= 17. 横屏适配与 UI 优化 (iPad L/R 终极修复版) ================= */
@media (orientation: landscape) {
    /* 默认全隐 (触屏/iPad) */
    #pc-guide-trigger { display: none; pointer-events: none !important;}
    /* 仅 PC 鼠标设备显示 */
    @media (hover: hover) { #pc-guide-trigger { display: block !important; pointer-events: auto !important;}  }

    /* --- 2. 游戏库弹窗布局 --- */
    .game-modal-content { max-height: 90vh; width: 80%; max-width: 600px; flex-direction: row; }
    .modal-game-list { grid-template-columns: 1fr 1fr; }
    .modal-header { display: none; }
    .modal-tabs-container { width: 120px; padding: 10px; border-right: 1px solid #333; background: #222; }
    .modal-tabs { flex-direction: column; background: transparent; padding: 0; }
    .modal-tab-btn { margin-bottom: 5px; }

    /* --- 3. 基础布局与控件位置 --- */
    #gb-shell { max-width: none; width: calc(100% - 4px); height: calc(100% - 4px); margin: 2px auto; border-radius: 15px; background-color: #c4c4c4; display: block; --screen-max-w: calc(100vw - 360px); --screen-ratio-w: calc(94vh * 4 / 3); --real-screen-w: min(var(--screen-max-w), var(--screen-ratio-w)); --side-gap: calc((100vw - var(--real-screen-w)) / 2); }
    .screen-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 94%; aspect-ratio: 4 / 3; width: auto; max-width: var(--screen-max-w); margin: 0; border-width: 0 6px; box-shadow: 0 0 0 1px #333; background-color: #000; z-index: 10; }
    .controls-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; pointer-events: none; }
    .controls-area * { pointer-events: auto; } 
    
    .upper-controls { position: absolute; width: 100%; height: 100%; margin: 0; }
    .gb-branding { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 3%; left: calc(var(--side-gap) / 2); transform: translateX(-50%); width: auto; opacity: 0.8; margin: 0; }
    .brand-nintendo { display: block; font-size: 0.8em; color: #555; margin-bottom: 2px; font-weight: 700; line-height: 1; }
    .brand-gameboy { display: block; font-size: 1.3em; font-style: italic; font-weight: 900; color: #304ffe; line-height: 1; }
    .speaker { display: flex; position: absolute; top: 15px; right: 15px; bottom: auto; left: auto; transform: rotate(-25deg); gap: 6px; opacity: 0.2; }
    .speaker div { height: 35px; width: 5px; background: #000; border-radius: 3px; }
    .dpad-group { position: absolute; top: 45%; transform: translateY(-50%); width: 140px; height: 140px; left: max(calc(var(--side-gap) / 2 - 70px), calc(env(safe-area-inset-left)) - 5px); }
    .middle-controls { position: absolute; top: 82%; width: 140px; justify-content: space-between; margin: 0; gap: 0; left: max(calc(var(--side-gap) / 2 - 70px), calc(env(safe-area-inset-left)) - 5px); }
    .capsule-btn { transform: rotate(-20deg); width: 42%; aspect-ratio: 2.8/1; }
    .capsule-label { top: 120%; font-size: 0.6em; transform: rotate(0deg); }
    .action-group { position: absolute; top: 42%; transform: translateY(-50%); width: 140px; height: 140px; right: max(calc(var(--side-gap) / 2 - 70px), calc(env(safe-area-inset-right)) - 5px); }
    #gamepad-ui { position: absolute; top: 65%; bottom: 85px; right: calc(var(--side-gap) / 2 - 75px); width: 150px; margin: 0; }
    
    .emu-sys-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px 6px; width: 100%; }
    .sys-btn { width: 100%; height: 28px; font-size: 10px; padding: 0; margin: 0; box-shadow: 0 2px 0 rgba(0,0,0,0.3); border-radius: 1em; min-width: 0; }
    .start-content-layout { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 50px; width: 92%; max-width: 900px; padding-bottom: 0; }
    .layout-column { width: 45%; max-width: 420px; }
    #netplay-area, .game-selector-trigger, #start-btn { max-width: 100%; width: 100%; max-width: 360px; }
    #netplay-area { margin-bottom: 0; height: 160px; display: flex; flex-direction: column; justify-content: center; }

    /* --- 4. 存档管理器布局 --- */
    .save-manager-content { width: 70%; max-width: 600px; height: 90vh; }
    .save-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; grid-auto-rows: min-content; }
    .save-separator { grid-column: 1 / -1; }
    .save-slot-item { margin-bottom: 0; padding: 12px; min-height: 100px; align-items: center; background: rgba(44, 44, 46, 0.8); }
    .save-slot-item.auto-slot { grid-column: 1 / -1; margin-bottom: 5px; }
    .slot-info { padding-left: 5px; }

    /* --- 5. 底部控件 --- */
    .bottom-controls { display: flex !important; position: absolute; width: 180px !important; right: max(calc(var(--side-gap) / 2 - 90px), env(safe-area-inset-right) - 25px) !important; top: 80% !important; margin: 0; justify-content: center; pointer-events: none; z-index: 300; }
    .bottom-controls > * { pointer-events: auto; } /* 确保按钮可点 */
    
    .three-col-mode { gap: 6px; }
    .sys-btn-icon { min-width: 50px; padding: 4px; }
    .btn-icon-img { font-size: 20px; }
    .btn-icon-label { font-size: 9px; display: block !important; margin-top: -2px; white-space: nowrap; }
    #sys-menu-overlay { align-items: center; justify-content: flex-end; padding-right: 0; }
    .sys-menu-content { height: 100%; max-height: 100%; width: 320px; border-radius: 24px 0 0 24px; transform: translateX(100%); }
    #sys-menu-overlay.open .sys-menu-content { transform: translateX(0); }
    /* 嵌套检测：如果是 PWA (Standalone) 模式，强制回退 */
    @media (display-mode: standalone) {
        .dpad-group { left: calc(var(--side-gap) / 2 - 70px) !important; }
        .middle-controls { left: calc(var(--side-gap) / 2 - 70px) !important; }
        .action-group { right: calc(var(--side-gap) / 2 - 70px) !important; }
        .bottom-controls { right: calc(var(--side-gap) / 2 - 90px) !important; }
    }
    /* 恢复你的常用白名单，双重保险 */
    .capsule-btn, .sys-btn, .sys-btn-icon, .round-btn, .dpad-group { pointer-events: auto !important; }
}