:root{
  --bg:#0d0d11; --panel:#17171d; --line:#2a2a35; --txt:#e8e8ee; --dim:#8b8b99;
  --red:#e60012; --red2:#ff3b3b;
  --top-bg:#141419ee; --ctrl-bg:#0a0a0d; --box-bg:#14141a; --btn-bg:#1b1b22;
}

/* ===== 主题配色（默认 = 经典红黑，以下为可选） ===== */
body[data-theme="blue"]{--bg:#0a1018;--panel:#111a26;--line:#22344a;--txt:#e6edf5;--dim:#7e93aa;
  --red:#2f81f7;--red2:#63a4ff;--top-bg:#0f1826ee;--ctrl-bg:#070c12;--box-bg:#111a26;--btn-bg:#182535;}
body[data-theme="green"]{--bg:#0a1210;--panel:#111c17;--line:#234434;--txt:#e6f2ec;--dim:#7fa294;
  --red:#1fae62;--red2:#4ede8f;--top-bg:#0f1c16ee;--ctrl-bg:#060d0a;--box-bg:#111c17;--btn-bg:#17261f;}
body[data-theme="purple"]{--bg:#0f0c16;--panel:#171224;--line:#322a4a;--txt:#ece8f6;--dim:#9a8fb8;
  --red:#8b5cf6;--red2:#b18cff;--top-bg:#150f24ee;--ctrl-bg:#0a0812;--box-bg:#171224;--btn-bg:#211a33;}
body[data-theme="orange"]{--bg:#120e0a;--panel:#1c1610;--line:#453322;--txt:#f4ece2;--dim:#b09a82;
  --red:#f08c1e;--red2:#ffb45e;--top-bg:#191209ee;--ctrl-bg:#0d0906;--box-bg:#1c1610;--btn-bg:#261d13;}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;}
body{min-height:100vh;}
button{font-family:inherit;}

/* ===== 首页顶栏 ===== */
#top{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:14px 16px 12px;background:var(--top-bg);border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
#top h1{margin:0;font-size:19px;font-weight:800;letter-spacing:.5px;color:#fff;
  display:flex;align-items:center;gap:9px;}
/* GBA 小徽标：主题色渐变，整站唯一的"招牌" */
#top h1 .logo{display:inline-flex;align-items:center;justify-content:center;
  padding:4px 9px;border-radius:9px;font-size:13px;font-weight:800;letter-spacing:1.5px;
  color:#fff;background:linear-gradient(135deg,var(--red2),var(--red));
  box-shadow:0 5px 16px -6px var(--red);}
#count{font-size:12px;color:var(--dim);}
/* 窄屏：标题+计数一行，按钮换到第二行，避免挤压溢出 */
@media (max-width:430px){
  #top h1{font-size:16px;letter-spacing:0;}
  #top h1 .logo{font-size:12px;padding:3px 7px;letter-spacing:1px;}
  #top{gap:6px 8px;row-gap:6px;padding:10px 12px 8px;}
  #count{font-size:11px;}
}

#toolbar{padding:10px 16px 0;}
#search{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel);color:var(--txt);font-size:14px;outline:none;}
#search:focus{border-color:var(--red);}

#chips{display:flex;gap:8px;overflow-x:auto;padding:10px 16px;scrollbar-width:none;}
#chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;padding:6px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--dim);font-size:13px;cursor:pointer;}
.chip.on{background:var(--red);border-color:var(--red);color:#fff;}

/* ===== 首页游戏卡片 ===== */
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;
  padding:4px 16px 40px;}
@media (max-width:430px){ #grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:4px 12px 32px;} }
/* 电脑端固定一排 10 个（按用户要求，一行刚好排满）；窄屏仍用上面的自适应列数 */
@media (min-width:1200px){ #grid{grid-template-columns:repeat(10,1fr);} }

.card{position:relative;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel);cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;}
.card:active{transform:scale(.975);}
/* 悬停只在真有鼠标的设备上生效（手机点完会残留 hover 状态） */
@media (hover:hover){
  .card:hover{transform:translateY(-3px);border-color:var(--red);
    box-shadow:0 16px 32px -18px #000, 0 0 0 1px var(--red) inset;}
  .card:hover .cover img{transform:scale(1.05);}
}

.cover{position:relative;aspect-ratio:3/2;background:var(--ctrl-bg);overflow:hidden;}
.cover img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1);transition:transform .35s ease;}
/* 没有封面图（上游有 3 个游戏确实没有），或封面加载失败时的占位 */
.cover.ph{background:linear-gradient(135deg,var(--btn-bg),var(--panel) 55%,var(--line));}
/* 占位文字铺满封面居中显示。用 .phtx 而不是 span 通配，
   否则会把左下角的分类角标一起改小改灰 */
.cover .phtx{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--dim);letter-spacing:2px;}
.cover .phtx[hidden]{display:none;}
.cover .ctag{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.5px;color:#fff;
  background:#000000a8;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.card .meta{padding:9px 10px 11px;}
.card .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13px;font-weight:600;line-height:1.35;margin:0;min-height:2.7em;}

.fav,.del{position:absolute;top:7px;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;background:#00000085;color:#ffffffa6;line-height:1;
  cursor:pointer;padding:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.fav{right:7px;width:26px;height:26px;font-size:14px;}
.fav.on{color:#f7b500;}
.del{left:7px;width:24px;height:24px;font-size:12px;}
.del:active{color:var(--red2);}
#gridEmpty{text-align:center;color:var(--dim);padding:70px 20px;font-size:14px;}
#gridEmpty[hidden]{display:none;}

/* ===== 播放器 ===== */
#player{position:fixed;inset:0;z-index:50;background:#000;display:flex;flex-direction:column;}
#player[hidden]{display:none;}
#ptop{position:relative;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px;background:var(--ctrl-bg);border-bottom:1px solid var(--line);}
#ptitleRow{flex:1;min-width:0;display:flex;align-items:center;gap:8px;}
#ptitle{min-width:0;font-size:13px;color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pbtn{flex:0 0 auto;padding:6px 10px;font-size:12px;border-radius:8px;border:1px solid var(--line);
  background:var(--btn-bg);color:#ddd;cursor:pointer;}
.pbtn:active{border-color:var(--red);color:#fff;}
/* 播放器顶栏「收起/展开」文字按钮（与旁边按钮同色） */
#hideBtn{-webkit-tap-highlight-color:transparent;}
#hideBtn:active{border-color:var(--line);color:inherit;}   /* 关闭点击时闪红边 */
#hideBtn:focus,#hideBtn:focus-visible{outline:none;}
#screenWrap{flex:1;min-height:0;position:relative;background:#000;}
#screen{position:absolute;inset:0;width:100%;height:100%;background:#000;
  display:flex;align-items:center;justify-content:center;}
/* canvas 按核心给出的原生比例（GBA 240x160 = 3:2）居中显示：
   EJS 在窄屏（触屏 small_screen 模式）下样式不同，单纯依赖 object-fit 会导致画面顶到最上方；
   注意 canvas 外还有一层 .ejs_canvas_parent（官方样式 height:100%），必须在这层内也做居中。
   竖屏按宽度撑满，横屏按高度撑满——避免宽扁窗口下比例冲突导致画面忽大忽小 */
#screen, #screen .ejs_canvas_parent{display:flex;align-items:center;justify-content:center;}
/* EJS 官方样式表可能未加载，包装层默认只有内容高——必须显式撑满，否则画面大小随 canvas 属性尺寸随机变化（忽大忽小） */
#screen .ejs_canvas_parent{width:100%!important;height:100%!important;}
#screen canvas{width:100%!important;height:auto!important;max-height:100%!important;
  /* GBA 原生 240x160 = 3:2；--game-ar 由 app.js 按核心实际输出尺寸动态写入（GB/GBC 是 10:9） */
  aspect-ratio:var(--game-ar,3/2);object-fit:contain;image-rendering:pixelated;}
@media (orientation: landscape){
  #screen canvas{width:auto!important;height:100%!important;max-width:100%!important;}
}
/* 电脑横屏：画面高度留出呼吸空间、整体下移，不再紧贴顶栏（手机横屏仍撑满） */
@media (orientation: landscape) and (pointer: fine){
  #screen canvas{height:calc(100% - 40px)!important;}
}
/* EJS 自带虚拟手柄不使用（我们有自己的虚拟按键） */
#screen .ejs_virtualGamepad_parent{display:none!important;}
/* EJS 自带的所有界面组件全部禁用（声音/菜单/设置/右键菜单/状态栏/触屏菜单开关——功能都由我们的顶栏提供） */
.ejs_volume_parent,.ejs_menu_button,.ejs_menu_bar,.ejs_context_menu,.ejs_settings_parent,
.ejs_virtualGamepad_open{display:none!important;}

/* ===== 加载层（封面 + 百分比进度条） ===== */
#loading{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
  background:#000d;padding:16px;}
#loading[hidden]{display:none;}
.ldbox{width:min(290px,80%);display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;}
.ldcover{width:100%;aspect-ratio:3/2;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel);
  display:flex;align-items:center;justify-content:center;}
.ldcover img{width:100%;height:100%;object-fit:cover;display:block;}
.ldcover .ldph{font-size:22px;font-weight:800;letter-spacing:4px;color:var(--dim);}
.ldname{font-size:14px;font-weight:700;color:#fff;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ldbar{width:100%;height:6px;border-radius:999px;background:#ffffff22;overflow:hidden;}
.ldfill{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--red),var(--red2));transition:width .18s linear;}
.ldstat{font-size:12px;color:var(--dim);letter-spacing:.3px;}
/* 启动核心阶段：进度条改成来回滑动的条纹，表示"在忙但不知道还要多久" */
#loading.busy .ldfill{width:38%!important;animation:ldslide 1.15s ease-in-out infinite;}
@keyframes ldslide{0%{margin-left:-38%;}100%{margin-left:100%;}}
#loading.fail .ldbar{display:none;}
#loading.fail .ldstat{color:var(--red2);}
.ldacts{display:flex;gap:8px;}
.ldacts[hidden]{display:none;}
#padDoneBtn, #fpsDoneBtn{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:30;
  background:var(--red);border-color:var(--red);color:#fff;padding:8px 18px;font-size:13px;}
#padDoneBtn[hidden], #fpsDoneBtn[hidden]{display:none;}

/* ===== 触屏手柄 ===== */
#controls[hidden]{display:none;}
/* 尺寸变量：--ps 为用户缩放（面板可调），窄屏媒体查询自动缩小基准 */
#controls{--cell:calc(54px*var(--ps,1)); --abz:calc(70px*var(--ps,1));
  --pillw:calc(60px*var(--ps,1)); --pgap:calc(14px*var(--ps,1));
  position:relative;   /* L/R 等按键是绝对定位分组，需要一个定位上下文 */
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px calc(16px + env(safe-area-inset-bottom));background:transparent;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
#dpad,#ab,#mid{opacity:var(--pad-a,1);}
/* #abBoth 在 #ab 内部，透明度继承父级——绝不能再叠加一层（平方后会明显偏淡） */
#dpad{display:grid;grid-template-areas:". u ." "l c r" ". d .";
  grid-template-columns:repeat(3,var(--cell));grid-template-rows:repeat(3,var(--cell));gap:calc(4px*var(--ps,1));}
.dbtn{border:1px solid var(--line);background:var(--pad-c,#1b1b22);border-radius:10px;position:relative;isolation:isolate;}
.dbtn::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border:calc(9px*var(--ps,1)) solid transparent;opacity:.9;}
.dbtn[data-dir=UP]{grid-area:u;}    .dbtn[data-dir=UP]::after{border-bottom-color:var(--pad-t,#666);transform:translateY(-30%);}
.dbtn[data-dir=DOWN]{grid-area:d;}  .dbtn[data-dir=DOWN]::after{border-top-color:var(--pad-t,#666);transform:translateY(30%);}
.dbtn[data-dir=LEFT]{grid-area:l;}  .dbtn[data-dir=LEFT]::after{border-right-color:var(--pad-t,#666);transform:translateX(-30%);}
.dbtn[data-dir=RIGHT]{grid-area:r;} .dbtn[data-dir=RIGHT]::after{border-left-color:var(--pad-t,#666);transform:translateX(30%);}
#mid{display:flex;flex-direction:row;gap:calc(12px*var(--ps,1));align-items:center;}
.midg{flex:0 0 auto;}
.pill{min-width:var(--pillw);padding:calc(7px*var(--ps,1)) calc(12px*var(--ps,1));font-size:calc(12px*var(--ps,1));border-radius:999px;
  border:1px solid var(--line);background:var(--pill-c,var(--pad-c,#1b1b22));color:var(--pill-t2,var(--pad-t2,#bbb));position:relative;isolation:isolate;}
/* A/B 区 = 2x2 网格：上排 L R，下排 B A。L/R 与 A/B 同尺寸、同列对齐，左右对称 */
#ab{display:grid;grid-template-columns:var(--abz) var(--abz);
  grid-template-areas:"l r" "b a";gap:var(--pgap);align-items:center;position:relative;}
#btnL{grid-area:l;} #btnR{grid-area:r;} #btnB{grid-area:b;} #btnA{grid-area:a;}
.padg{width:var(--abz);height:var(--abz);}
.rbtn{width:var(--abz);height:var(--abz);border-radius:50%;border:1px solid #0007;
  font-size:calc(var(--abz)*0.31);font-weight:700;color:var(--pad-t3,#fff);cursor:pointer;touch-action:none;
  background:radial-gradient(circle at 35% 30%,var(--pad-c2,#e23b3b),var(--pad-c2d,#a01018));
  position:relative;isolation:isolate;}
/* L/R 默认跟随方向键颜色，可在「虚拟按键」面板单独设（--pad-c3 系列） */
#btnL .rbtn,#btnR .rbtn{
  background:radial-gradient(circle at 35% 30%,var(--pad-c3,var(--pad-c2,#e23b3b)),var(--pad-c3d,var(--pad-c2d,#a01018)));
  color:var(--pad-t4,var(--pad-t3,#fff));}
/* 按下反馈：::before 高亮覆盖层用透明度切换（合成器动画，零重绘）。
   改 background/border/color 每次点按都会触发重绘，在部分手机 GPU 上会拖累底层 WebGL 画布出帧
   （表现为页面和核心帧率都正常、游戏画面却卡顿），所以按下态只动 opacity，绝不动绘制属性。
   isolation:isolate + z-index:-1 让覆盖层压在按钮背景之上、文字/方向箭头(::after)之下。 */
.dbtn::before,.pill::before,.rbtn::before{content:"";position:absolute;inset:-1px;border-radius:inherit;
  background:var(--pad-cd,var(--red));opacity:0;pointer-events:none;z-index:-1;
  will-change:opacity;transform:translateZ(0);}
.dbtn.down::before,.pill.down::before,.rbtn.down::before{opacity:1;}
.rbtn::before{background:radial-gradient(circle at 35% 30%,var(--pad-c2b,#ff6b6b),var(--pad-c2,#e23b3b));}
#btnL .rbtn::before,#btnR .rbtn::before{
  background:radial-gradient(circle at 35% 30%,var(--pad-c3b,var(--pad-c2b,#ff6b6b)),var(--pad-c3,var(--pad-c2,#e23b3b)));}
.pill::before{background:var(--pill-cd,var(--pad-cd,var(--red)));}

/* ===== 窄屏（手机竖屏）：缩小虚拟按键基准，避免溢出屏幕 ===== */
@media (max-width: 480px){
  #controls{gap:8px;padding:10px 12px calc(12px + env(safe-area-inset-bottom));
    --cell:calc(46px*var(--ps,1)); --abz:calc(56px*var(--ps,1));
    --pillw:calc(52px*var(--ps,1)); --pgap:calc(10px*var(--ps,1));}
}
@media (max-width: 400px){
  #controls{gap:6px;padding:8px 8px calc(10px + env(safe-area-inset-bottom));
    --cell:calc(40px*var(--ps,1)); --abz:calc(50px*var(--ps,1));
    --pillw:calc(46px*var(--ps,1)); --pgap:calc(8px*var(--ps,1));}
}

#toast{position:fixed;left:50%;top:72px;transform:translateX(-50%);background:#000c;color:#fff;
  padding:8px 16px;border-radius:8px;font-size:13px;z-index:99;pointer-events:none;}
#toast[hidden]{display:none;}

/* 游戏真实帧率显示器：模拟器核心每秒实际产出的帧数（可在「帧率」面板开关/自定义） */
#fps{position:fixed;z-index:98;pointer-events:auto;touch-action:none;
  background:#000a;color:#8fff8f;line-height:1;padding:4px 7px;border-radius:6px;
  font-variant-numeric:tabular-nums;user-select:none;-webkit-user-select:none;}
#fps[hidden]{display:none;}
/* 调整位置模式：虚线高亮 + 放大抓取区 + 移动光标 */
#fps.dragging{outline:2px dashed #ff3b3b;outline-offset:4px;padding:8px 12px;z-index:99;cursor:move;}
#fpsBody{padding:12px 14px;display:flex;flex-direction:column;gap:10px;}

/* 合成层隔离：把画布提升为独立图层（按键重绘不牵连 WebGL 画布出帧）。
   注意：绝不能给 #dpad/#ab/#mid 加 will-change:transform —— 那会把它们变成
   绝对定位子元素的包含块，pad-custom 模式下按钮百分比坐标会整体错位 */
.ejs_canvas_parent{transform:translateZ(0);}

/* ===== 存档管理面板 / 金手指面板 ===== */
#slotPanel, #cheatPanel, #keysPanel, #padPanel, #speedPanel, #sndPanel, #fpsPanel, #corePanel{position:absolute;inset:0;z-index:20;background:#000d;display:flex;
  align-items:center;justify-content:center;padding:16px;}
#slotPanel[hidden], #cheatPanel[hidden], #keysPanel[hidden], #padPanel[hidden], #speedPanel[hidden], #sndPanel[hidden], #fpsPanel[hidden], #corePanel[hidden]{display:none;}
#slotBox, #cheatBox, #keysBox, #padBox, #speedBox, #sndBox, #fpsBox, #coreBox{width:min(440px,100%);max-height:100%;display:flex;flex-direction:column;
  background:var(--box-bg);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
#slotHead, #cheatHead, #keysHead, #padHead, #speedHead, #sndHead, #fpsHead, #coreHead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);}
#slotTitle, #cheatTitle, #keysTitle, #padTitle, #speedTitle, #sndTitle, #fpsTitle, #coreTitle{font-size:14px;font-weight:600;color:#eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#slotList{overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;}
.slot{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);
  border-radius:10px;background:var(--btn-bg);}
#slotFoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line);}
#slotFoot .cheatHint{flex:1;min-width:0;}
.sthumb{width:64px;height:60px;object-fit:contain;background:#000;border-radius:6px;flex:0 0 auto;image-rendering:pixelated;}
.sempty{width:64px;height:60px;display:flex;align-items:center;justify-content:center;
  color:#555;font-size:12px;background:#000;border-radius:6px;flex:0 0 auto;}
.sinfo{flex:1;min-width:0;}
.sname{font-size:13px;font-weight:600;color:#ddd;}
.stime{font-size:11px;color:var(--dim);margin-top:2px;}
.sacts{display:flex;gap:8px;flex:0 0 auto;}
.sacts .pbtn{padding:9px 14px;font-size:13px;}

/* ===== 金手指 ===== */
#cheatBody{overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px;}
#cheatInput{width:100%;height:72px;resize:vertical;padding:8px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--ctrl-bg);color:var(--txt);font-size:13px;
  font-family:Consolas,Menlo,monospace;letter-spacing:1px;outline:none;}
#cheatInput:focus{border-color:var(--red);}
#cheatAddRow{display:flex;align-items:center;gap:10px;}
#cheatAdd{padding:7px 18px;font-size:13px;}
.cheatHint{font-size:11px;color:var(--dim);line-height:1.5;flex:1;min-width:0;}
#cheatList{display:flex;flex-direction:column;gap:6px;}
.cheat{gap:8px;}
.cheat label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;cursor:pointer;}
.cheat input[type=checkbox]{width:16px;height:16px;flex:0 0 auto;accent-color:var(--red);}
.ccode{font-family:Consolas,Menlo,monospace;font-size:13px;font-weight:600;letter-spacing:1px;color:#fff;}
.cheat.off .ccode{color:#666;text-decoration:line-through;}
.cmeta{font-size:11px;color:var(--dim);margin-top:2px;font-family:Consolas,Menlo,monospace;}
.emptyCheat{text-align:center;color:#555;font-size:12px;padding:18px 0;}

/* ===== 键盘按键设置 ===== */
#keysBody{overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px;}
.keyrow{justify-content:space-between;}
.kname{font-size:13px;font-weight:600;color:#ddd;flex:1;min-width:0;}
.kcode{min-width:96px;text-align:center;font-family:Consolas,Menlo,monospace;padding:7px 10px;}
.kcode.listening{border-color:var(--red);color:#fff;animation:blink 1s infinite;}
@keyframes blink{50%{opacity:.55;}}

/* ===== 全屏模式（浮层化 UI，避免遮挡画面）=====
   .fakefs = 伪全屏：浏览器不支持网页全屏 API（如 iOS Safari）时页面内铺满的降级方案 */
#player:fullscreen #ptop, #player:-webkit-full-screen #ptop, #player.fakefs #ptop{position:absolute;z-index:10;left:0;right:0;top:0;
  background:none;border:none;}
#player:fullscreen #ptitle, #player:-webkit-full-screen #ptitle, #player.fakefs #ptitle{display:none;}
#player:fullscreen #screenWrap, #player:-webkit-full-screen #screenWrap, #player.fakefs #screenWrap{position:absolute;inset:0;}
#player:fullscreen #controls, #player:-webkit-full-screen #controls, #player.fakefs #controls{position:absolute;left:0;right:0;bottom:0;
  background:transparent;}

/* ===== 手机竖屏：播放器顶栏 = 标题一行 + 按钮固定两排（每排 5 个等宽铺满，不乱换行）===== */
@media (max-width: 520px){
  #ptop{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:8px 10px;}
  /* 标题行独占一行：「收起」紧跟标题右侧，整体居中（桌面保持居左不受影响） */
  #ptitleRow{grid-column:1/-1;order:-1;justify-content:center;}
  #ptitle{font-size:12px;}
  #ptop .pbtn{padding:7px 2px;font-size:11px;text-align:center;white-space:nowrap;min-width:0;}
  #ptop #hideBtn{padding:5px 8px;}
  /* 收起后只剩返回+展开：切回紧凑排列，展开按钮紧贴返回右侧（标题行取消居中、取消前置排序） */
  #ptop.collapsed, #ptop:has(#ptitle[hidden]){display:flex;gap:8px;}
  #ptop.collapsed .pbtn, #ptop:has(#ptitle[hidden]) .pbtn{padding:6px 10px;}
  #ptop.collapsed #ptitleRow, #ptop:has(#ptitle[hidden]) #ptitleRow{order:0;justify-content:flex-start;}
}
@media (max-width: 360px){
  #ptop .pbtn{padding:6px 1px;font-size:10px;}
}

/* ===== 横屏模式（画面占满，手柄悬浮两侧）===== */
#player.landscape #ptop{position:absolute;z-index:10;left:0;right:0;top:0;
  background:none;border:none;}
#player.landscape #ptitle{display:none;}
#player.landscape #screenWrap{position:absolute;inset:0;}
#player.landscape #controls{position:absolute;inset:0;background:transparent;
  pointer-events:none;padding:0;z-index:5;}
#player.landscape #dpad{position:absolute;
  left:calc(14px + env(safe-area-inset-left));
  bottom:calc(14px + env(safe-area-inset-bottom));pointer-events:auto;opacity:calc(var(--pad-a,1)*.92);}
#player.landscape #ab{position:absolute;
  right:calc(14px + env(safe-area-inset-right));
  bottom:calc(14px + 50px*var(--ps,1) + env(safe-area-inset-bottom));pointer-events:auto;opacity:calc(var(--pad-a,1)*.92);}
#player.landscape #mid{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom));pointer-events:auto;
  flex-direction:row;gap:16px;opacity:calc(var(--pad-a,1)*.9);}
/* AB同按键：锚定在整个 A/B 区（含 L/R 两行）的正上方（绝对定位的 grid 子元素不占网格，
   也不参与 #controls 的 flex 分布）。自定义模式的行内 left/top 会覆盖它 */
#abBoth{position:absolute;left:50%;bottom:100%;
  transform:translateX(-50%);pointer-events:auto;}
#player.pad-custom #abBoth{transform:none;}   /* 自定义模式：AB同按是普通按键，left/top 是左边缘百分比，与其它按键一致，不做居中位移 */
#player.landscape #loading{z-index:8;}

/* ===== 虚拟手柄自定义位置（拖拽模式）===== */
#player.pad-custom #controls{position:absolute;inset:0;background:transparent;
  pointer-events:none;padding:0;z-index:5;}
/* 浏览器全屏时 ：fullscreen 规则优先级更高，会把 controls 改回底部条，这里覆盖回来保证坐标系一致 */
#player:fullscreen.pad-custom #controls, #player:-webkit-full-screen.pad-custom #controls,
#player.fakefs.pad-custom #controls{
  position:absolute;inset:0;bottom:0;background:transparent;
  pointer-events:none;padding:0;z-index:5;}
#player.pad-custom #controls > div{pointer-events:auto;position:absolute;}
/* A/B、选择/开始 已拆分为独立分组：容器不定位，各按钮相对 controls 绝对定位 */
/* transform 会成为绝对定位子元素的坐标系，必须一并清除，否则按钮坐标全错 */
#player.pad-custom #controls > #ab, #player.pad-custom #controls > #mid{
  position:static;pointer-events:none;transform:none;}
#player.pad-custom #ab > .padg, #player.pad-custom #mid > .midg{pointer-events:auto;position:absolute;}
#player.pad-custom #screenWrap{position:absolute;inset:0;}
/* 竖屏：底部有虚拟按键，画面区域避开按键带并整体上移（不再垂直居中）。
   按键区现在是三行（L/R + A/B + 选择/开始），留出的高度比原来多一点 */
@media (orientation: portrait){
  #player.pad-custom #screenWrap{top:56px;bottom:27%;}
}
#player.pad-drag #dpad, #player.pad-drag #pillSelect, #player.pad-drag #pillStart,
#player.pad-drag #btnA, #player.pad-drag #btnB, #player.pad-drag #btnL, #player.pad-drag #btnR,
#player.pad-drag #abBoth{
  outline:2px dashed #ff3b3b;outline-offset:4px;cursor:move;}

/* ===== 虚拟手柄设置面板 ===== */
#padBody{overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px;}
.prow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.plabel{font-size:13px;font-weight:600;color:#ddd;flex:0 0 auto;min-width:56px;white-space:nowrap;}
.pval{font-size:12px;color:var(--dim);min-width:34px;text-align:right;}
.swatch{width:26px;height:26px;border-radius:50%;border:2px solid #444;cursor:pointer;flex:0 0 auto;}
.swatch.on{border-color:#fff;}
.swatch.txt{width:auto;padding:0 10px;border-radius:999px;display:flex;align-items:center;
  font-size:11px;color:#ccc;background:var(--btn-bg);height:26px;}
#padColor{width:32px;height:28px;padding:0;border:1px solid #333;background:none;cursor:pointer;}
#padMoveBtn.on{border-color:var(--red);color:#fff;}

/* ===== 游戏倍速面板 ===== */
#speedBody{padding:12px 14px;display:flex;flex-direction:column;gap:10px;}
#speedList{display:flex;flex-wrap:wrap;gap:8px;}
.sopt{padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--btn-bg);color:#ddd;
  font-size:13px;cursor:pointer;}
.sopt.on{background:var(--red);border-color:var(--red);color:#fff;}

/* ===== 模拟核心面板 ===== */
#coreBody{padding:12px 14px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;}
#coreList{display:flex;flex-direction:column;gap:8px;}
#coreList .sopt{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:10px 14px;}
#coreList .cmeta{font-family:inherit;}
#coreList .sopt.on .cmeta{color:#ffdddd;}

/* ===== 崩溃建议横幅（wasm 异常时提示重开，用户可选择忽略） ===== */
#crashBar{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:40;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  max-width:min(520px,92%);padding:10px 14px;border-radius:12px;
  background:#3a0d0d;border:1px solid #b33;color:#ffd9d9;font-size:13px;line-height:1.4;
  box-shadow:0 8px 32px #000c;}
#crashBar[hidden]{display:none;}
#crashBar .pbtn{flex:0 0 auto;}

/* ===== 声音设置面板 ===== */
#sndBody{padding:12px 14px;display:flex;flex-direction:column;gap:12px;}
#sndToggle.on{border-color:var(--red);color:var(--red2);}
#sndRow{display:flex;align-items:center;gap:10px;}
.sndLbl{font-size:13px;color:var(--dim);flex:0 0 auto;}
#volRange{flex:1;accent-color:var(--red);min-width:0;}
#volPct{font-size:12px;color:var(--txt);width:38px;text-align:right;flex:0 0 auto;}

/* ===== 弹出菜单遮罩：压暗主页、突出菜单，点空白处关闭 ===== */
#menuMask{position:fixed;inset:0;z-index:55;background:#0009;backdrop-filter:blur(2px);}
#menuMask[hidden]{display:none;}
/* ===== 主题切换 ===== */
#themeBtn{margin-left:auto;flex:0 0 auto;}
#settingsBtn{margin-left:0;flex:0 0 auto;}
#themeMenu{position:fixed;top:54px;right:72px;z-index:60;display:flex;flex-direction:column;gap:2px;
  background:var(--box-bg);border:1px solid var(--line);border-radius:12px;padding:6px;min-width:132px;
  box-shadow:0 12px 48px #000e;}
#themeMenu[hidden]{display:none;}
/* ===== 主页设置菜单（mGBA 核心选项） ===== */
#settingsMenu{position:fixed;top:54px;right:12px;z-index:60;display:flex;flex-direction:column;gap:2px;
  background:var(--box-bg);border:1px solid var(--line);border-radius:12px;padding:6px;min-width:230px;
  max-height:calc(100vh - 80px);overflow-y:auto;box-shadow:0 12px 48px #000e;}
#settingsMenu[hidden]{display:none;}
.stitle{font-size:12px;color:var(--dim);padding:6px 10px 4px;}
.sgroup{font-size:11px;color:var(--red2);font-weight:700;letter-spacing:1px;padding:8px 10px 2px;
  border-top:1px solid var(--line);margin-top:4px;}
.sgroup:first-of-type{border-top:none;margin-top:0;}
.pitem{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:none;background:none;color:var(--txt);
  font-size:13px;border-radius:8px;cursor:pointer;text-align:left;}
.pitem:hover{background:var(--btn-bg);}
.pitem.on{background:var(--btn-bg);box-shadow:inset 0 0 0 1px var(--red);}
.pitem.on .pname{color:var(--red2);font-weight:700;}
.pname{font-weight:600;}
.pdesc{font-size:11px;color:var(--dim);line-height:1.4;}
.titem{display:flex;align-items:center;gap:8px;padding:8px 10px;border:none;background:none;color:var(--txt);
  font-size:13px;border-radius:8px;cursor:pointer;text-align:left;}
.titem:hover{background:var(--btn-bg);}
.titem.on{color:var(--red2);font-weight:600;}
.tdot{width:14px;height:14px;border-radius:50%;border:1px solid #0006;flex:0 0 auto;}
.titem[data-t=""] .tdot{background:#e60012;}
.titem[data-t="blue"] .tdot{background:#2f81f7;}
.titem[data-t="green"] .tdot{background:#1fae62;}
.titem[data-t="purple"] .tdot{background:#8b5cf6;}
.titem[data-t="orange"] .tdot{background:#f08c1e;}