: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;align-items:baseline;gap:10px;
  padding:14px 16px 10px;background:var(--top-bg);border-bottom:1px solid var(--line);backdrop-filter:blur(6px);}
#top h1{margin:0;font-size:20px;letter-spacing:2px;color:#fff;}
#top h1 b{color:var(--red2);}
#count{font-size:12px;color:var(--dim);}

#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:10px;padding:4px 16px 40px;}
@media (max-width:420px){ #grid{grid-template-columns:repeat(2,1fr);} }
.card{position:relative;text-align:left;padding:12px 12px 10px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);color:var(--txt);cursor:pointer;
  min-height:78px;transition:border-color .15s, transform .06s;}
.card:active{transform:scale(.97);border-color:var(--red);}
.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 18px 6px 0;}
.card .ct{font-size:11px;color:var(--dim);}
.fav{position:absolute;top:6px;right:8px;background:none;border:none;color:#4a4a58;
  font-size:16px;cursor:pointer;padding:2px;line-height:1;}
.fav.on{color:#f7b500;}
.empty{grid-column:1/-1;text-align:center;color:var(--dim);padding:60px 0;font-size:14px;}

/* ===== 播放器 ===== */
#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);}
#ptitle{flex:1;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{width:30px;height:27px;padding:0;position:relative;-webkit-tap-highlight-color:transparent;}
#hideBtn:active{border-color:var(--line);color:inherit;}   /* 关闭点击时闪红边 */
#hideBtn:focus,#hideBtn:focus-visible{outline:none;}
#hideBtn::before{content:"";position:absolute;left:55%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-color:transparent;
  border-width:5px 8px 5px 0;border-right-color:#ddd;}           /* ◀ 收起 */
#hideBtn.collapsed::before{left:45%;border-width:5px 0 5px 8px;border-right-color:transparent;
  border-left-color:#ddd;}                                       /* ▶ 展开 */
#screenWrap{flex:1;min-height:0;position:relative;background:#000;}
#screen{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  image-rendering:pixelated;background:#000;}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#aaa;font-size:14px;background:#000a;}
#loading[hidden]{display:none;}
#padDoneBtn{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]{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));
  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);}
#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;}
.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%);}
.dbtn.down{background:var(--pad-cd,var(--red));border-color:var(--pad-cd,var(--red));}
#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(--pad-c,#1b1b22);color:var(--pad-t2,#bbb);}
.pill.down{background:var(--pad-cd,#3a3a44);color:#fff;}
#ab{display:grid;grid-template-columns:var(--abz) var(--abz);gap:var(--pgap);align-items:center;}
.padg{width:var(--abz);height:var(--abz);}
.rbtn{width:var(--abz);height:var(--abz);border-radius:50%;border:1px solid #500;
  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));}
.rbtn.down{filter:brightness(1.4);}
/* B 键下沉错位放在外层分组上，拖拽虚线框才能和按钮重合 */
#btnB{transform:translateY(calc(14px*var(--ps,1)));}

/* ===== 窄屏（手机竖屏）：缩小虚拟按键基准，避免溢出屏幕 ===== */
@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;}

/* ===== 存档管理面板 / 金手指面板 ===== */
#slotPanel, #cheatPanel, #keysPanel, #padPanel, #speedPanel, #sndPanel{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]{display:none;}
#slotBox, #cheatBox, #keysBox, #padBox, #speedBox, #sndBox{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{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{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:6px;flex:0 0 auto;}
.sacts .pbtn{padding:5px 9px;}

/* ===== 金手指 ===== */
#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，避免遮挡画面）===== */
#player:fullscreen #ptop{position:absolute;z-index:10;left:0;right:0;top:0;
  background:linear-gradient(180deg,#000b,transparent);border:none;}
#player:fullscreen #ptitle{display:none;}
#player:fullscreen #screenWrap{position:absolute;inset:0;}
#player:fullscreen #controls{position:absolute;left:0;right:0;bottom:0;
  background:transparent;}

/* ===== 手机竖屏：播放器顶栏整理（标题独占一行，按钮整齐换行）===== */
@media (max-width: 520px){
  #ptop{gap:6px;}
  #ptitle{flex:0 0 100%;order:-1;font-size:12px;}
  #ptop .pbtn{padding:6px 9px;font-size:11px;}
}

/* ===== 横屏模式（画面占满，手柄悬浮两侧）===== */
#player.landscape #ptop{position:absolute;z-index:10;left:0;right:0;top:0;
  background:linear-gradient(180deg,#000b,transparent);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:.92;}
#player.landscape #ab{position:absolute;
  right:calc(14px + env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom));pointer-events:auto;opacity:.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:.9;}
#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{
  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 #btnB{transform:none;}   /* B 键下沉偏移在调整模式下清除，保证所见即所得 */
#player.pad-custom #ab > .padg, #player.pad-custom #mid > .midg{pointer-events:auto;position:absolute;}
#player.pad-custom #screenWrap{position:absolute;inset:0;}
#player.pad-drag #dpad, #player.pad-drag #pillSelect, #player.pad-drag #pillStart,
#player.pad-drag #btnA, #player.pad-drag #btnB{
  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 42px;}
.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;}

/* ===== 声音设置面板 ===== */
#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;}

/* ===== 主题切换 ===== */
#themeBtn{margin-left:auto;flex:0 0 auto;}
#themeMenu{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:132px;
  box-shadow:0 8px 24px #000a;}
#themeMenu[hidden]{display:none;}
.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;}