/* ══════════════════════════════════════════════════════════
   app/gamebox.css — 掌机外壳
   由原 assets/app.css 第 716–1025 行拆出；七个文件按 index.html 里的顺序加载，层叠顺序与原来一致
   ══════════════════════════════════════════════════════════ */
/* ══ 掌机外壳 ══ */
.game-modal{position:fixed;inset:0;z-index:8000;display:none;align-items:center;justify-content:center;padding:16px;}
.game-modal.active{display:flex;animation:gmFadeIn .35s cubic-bezier(.16,1,.3,1);}
/* 掌机打开期间背景静止（gamebox.js 加 body.gm-bg-off），省掉每帧重算整屏模糊 */
body.gm-bg-off #dashboard-root,body.gm-bg-off #fest-deco-layer,body.gm-bg-off #sakura-canvas,
body.gm-bg-off #theme-bg,body.gm-bg-off #theme-fg,body.gm-bg-off #cursor-fx{visibility:hidden}
.game-modal-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(99,102,241,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(232,80,122,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 10%, rgba(56,189,248,.12) 0%, transparent 45%),
    rgba(6,4,20,.20);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
}
body.theme-light .game-modal-bg{
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,183,197,.35) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(220,100,140,.2) 0%, transparent 55%),
    rgba(255,235,245,.45);
  backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
}
/* ── 浅色主题掌机样式（粉色系） ── */
body.theme-light .gameboy-shell{
  background:linear-gradient(175deg,#ffd6e8 0%,#fcc8df 35%,#f9bcd5 70%,#f5b0cc 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 0 0 2px rgba(220,80,130,.15),
             0 40px 100px rgba(200,60,110,.22),0 12px 32px rgba(220,80,130,.18),
             inset 0 1px 0 rgba(255,255,255,.85),inset 0 -4px 0 rgba(180,40,90,.12);
}
/* 顶部扫光线改成粉色渐变 */
body.theme-light .gb-scanline{
  background:linear-gradient(90deg,transparent,rgba(240,80,140,.5) 25%,rgba(255,140,190,.8) 50%,rgba(220,80,160,.6) 75%,transparent);
}
body.theme-light .gb-topbar{border-bottom-color:rgba(200,60,110,.12);}
body.theme-light .gb-power-label{color:rgba(160,40,80,.35);}
/* 顶部操作按钮 */
body.theme-light .gb-btn-lb  {background:linear-gradient(135deg,#e8507a,#c0305a);box-shadow:0 3px 10px rgba(220,60,100,.35),inset 0 1px 0 rgba(255,255,255,.3);}
body.theme-light .gb-btn-help{background:linear-gradient(135deg,#f472b6,#db2777);box-shadow:0 3px 10px rgba(219,39,119,.35),inset 0 1px 0 rgba(255,255,255,.3);}
body.theme-light .gb-btn-close{background:linear-gradient(135deg,#fb7185,#e11d48);box-shadow:0 3px 10px rgba(225,29,72,.35),inset 0 1px 0 rgba(255,255,255,.3);}
/* 分数栏 */
body.theme-light .gb-scorebar{background:rgba(255,255,255,.45);border-color:rgba(220,80,130,.15);box-shadow:inset 0 2px 8px rgba(200,60,110,.06);}
body.theme-light .gb-score-cell+.gb-score-cell{border-left-color:rgba(220,80,130,.1);}
body.theme-light .gb-score-label{color:rgba(160,40,80,.45);}
body.theme-light .gb-score-val{color:#8b1a3a;}
body.theme-light .gb-score-val.gold{background:linear-gradient(135deg,#d97706,#b45309);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
body.theme-light .gb-score-val.cyan{background:linear-gradient(135deg,#0284c7,#0369a1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
/* 难度按钮 */
body.theme-light .gb-diff-row{border-bottom-color:rgba(220,80,130,.1);}
body.theme-light .gb-diff-label{color:rgba(160,40,80,.5);}
body.theme-light .gb-diff-btn{border-color:rgba(220,80,130,.15);background:rgba(255,255,255,.35);color:rgba(140,40,70,.5);}
body.theme-light .gb-diff-btn:hover{background:rgba(220,80,130,.12);color:#b0204a;}
body.theme-light .gb-diff-btn.active{background:linear-gradient(135deg,rgba(220,80,130,.2),rgba(200,50,100,.14));border-color:rgba(220,80,130,.45);color:#8b1a3a;box-shadow:0 0 10px rgba(220,80,130,.15);}
/* 屏幕边框 */
body.theme-light .gb-screen-outer{background:rgba(160,40,80,.18);border-color:rgba(180,50,90,.25);box-shadow:inset 0 6px 20px rgba(160,40,80,.15),inset 0 0 0 1px rgba(160,40,80,.12);}
/* 开始遮罩 */
body.theme-light .game-overlay{background:linear-gradient(160deg,rgba(255,235,245,.95),rgba(255,220,238,.92));}
body.theme-light .game-overlay-title{background:linear-gradient(135deg,#8b1a3a,#e8507a,#c0305a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
body.theme-light .game-overlay-sub{color:rgba(160,40,80,.5);}
body.theme-light .game-start-btn{background:linear-gradient(135deg,rgba(220,80,130,.82),rgba(200,50,100,.75));border-color:rgba(220,80,130,.55);color:#fff;}
body.theme-light .game-start-btn:hover{background:linear-gradient(135deg,rgba(232,80,122,.95),rgba(200,50,100,.9));box-shadow:0 0 24px rgba(220,80,130,.4);}
/* 品牌字 */
body.theme-light .gb-brand{
  background:linear-gradient(90deg,#c0305a,#e8507a,#f472b6,#e8507a,#c0305a);
  background-size:200% auto;-webkit-background-clip:text;opacity:1;
}
/* D-Pad */
body.theme-light .gb-dpad-arm{background:rgba(200,60,110,.1);border-color:rgba(200,60,110,.18);}
body.theme-light .gb-dpad-center{background:radial-gradient(circle,rgba(220,80,130,.18),rgba(180,40,90,.1));border-color:rgba(220,80,130,.28);}
body.theme-light .gb-dpad-btn{
  background:linear-gradient(135deg,rgba(240,180,210,.8),rgba(220,140,180,.75));
  border-color:rgba(200,60,110,.3);color:rgba(130,30,60,.7);
  box-shadow:0 3px 8px rgba(180,40,90,.2),inset 0 1px 0 rgba(255,255,255,.5);
}
body.theme-light .gb-dpad-btn:hover{background:linear-gradient(135deg,rgba(240,100,150,.4),rgba(220,80,130,.35));border-color:rgba(220,80,130,.5);color:#8b1a3a;}
body.theme-light .gb-dpad-btn.pressed,body.theme-light .gb-dpad-btn:active{
  background:linear-gradient(135deg,rgba(220,80,130,.5),rgba(200,50,100,.45));
  border-color:rgba(220,80,130,.7);color:#fff;
  box-shadow:0 1px 4px rgba(180,40,90,.3),inset 0 2px 4px rgba(160,30,70,.2),0 0 10px rgba(220,80,130,.25);
}
/* SELECT / START 小按钮 */
body.theme-light .gb-mini-btn-inner{background:rgba(200,60,110,.15);border-color:rgba(200,60,110,.22);}
body.theme-light .gb-mini-btn:active .gb-mini-btn-inner{background:rgba(220,80,130,.35);}
body.theme-light .gb-mini-label{color:rgba(160,40,80,.4);}
/* A/B 大按钮 */
body.theme-light .gb-btn-b{background:linear-gradient(135deg,#f472b6,#db2777);box-shadow:0 6px 16px rgba(219,39,119,.45),0 2px 4px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.35);}
body.theme-light .gb-btn-a{background:linear-gradient(135deg,#e8507a,#c0305a);box-shadow:0 6px 16px rgba(220,80,122,.45),0 2px 4px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.35);}
body.theme-light .gb-ab-label{color:rgba(160,40,80,.45);}
/* 系统按钮 */
body.theme-light .gb-resize-hint{color:rgba(180,50,90,.2);}
/* 缩放手柄 */
body.theme-light .gb-resize-handle::before,
body.theme-light .gb-resize-handle::after{background:rgba(200,60,110,.35);}

/* ── 白天模式：主内容区 ── */
body.theme-light .time-display{background:linear-gradient(180deg,#2d0f38 20%,#c0305a 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px rgba(192,48,90,.15));}
body.theme-light .city-name{color:var(--pink-deep);}
body.theme-light .gmt-badge{background:rgba(180,60,100,.06);border-color:rgba(180,60,100,.15);color:var(--text-sub);}
body.theme-light .date-display{color:var(--text-sub);}
body.theme-light .progress-label{color:var(--text-dim);}
body.theme-light .greeting-badge{background:linear-gradient(135deg,rgba(255,183,197,.25),rgba(232,80,122,.12));border-color:rgba(220,80,120,.25);color:var(--pink-deep);}
body.theme-light .tz-card:hover{background:rgba(220,80,120,.08);border-color:rgba(220,80,120,.25);}
body.theme-light .tz-name{color:var(--text-main);}
body.theme-light .tz-offset{color:var(--text-sub);}
body.theme-light .tz-time{color:#1d4ed8;}
/* 番茄钟 */
body.theme-light .ring-bg{stroke:rgba(0,0,0,.08);}
body.theme-light .pomo-display{color:var(--text-main);}
body.theme-light .pomo-mode{color:var(--text-sub);}
body.theme-light .session-dot{background:rgba(0,0,0,.08);}
body.theme-light .btn-pomo{background:linear-gradient(135deg,rgba(220,80,120,.15),rgba(180,40,80,.1));border-color:rgba(220,80,120,.3);color:var(--pink-deep);}
body.theme-light .btn-pomo:hover{background:linear-gradient(135deg,rgba(220,80,120,.25),rgba(180,40,80,.18));}
body.theme-light .btn-ghost{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08);color:var(--text-sub);}
body.theme-light .btn-ghost:hover{background:rgba(0,0,0,.08);color:var(--text-main);}
/* 秒表 */
body.theme-light .lap-item{border-color:rgba(0,0,0,.06);color:var(--text-sub);}
/* 卡片通用 */

.gameboy-shell{
  /* 初始尺寸，JS 可覆盖 */
  width:440px;
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 32px);
  min-width:300px;
  min-height:480px;
  position:relative;z-index:1;
  background:linear-gradient(175deg,#1a0e42 0%,#110c2e 35%,#160924 70%,#0e0720 100%);
  border-radius:28px 28px 52px 52px;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 0 0 2px rgba(99,102,241,.12),
             0 40px 100px rgba(0,0,0,.85),0 12px 32px rgba(99,102,241,.15),
             inset 0 1px 0 rgba(255,255,255,.1),inset 0 -4px 0 rgba(0,0,0,.5);
  display:flex;flex-direction:column;overflow:hidden;
}
/* 右下角自定义缩放手柄 */
.gb-resize-handle{
  position:absolute;bottom:0;right:0;
  width:28px;height:28px;cursor:nwse-resize;z-index:10;
  display:flex;align-items:flex-end;justify-content:flex-end;padding:5px;
}
.gb-resize-handle::before,.gb-resize-handle::after{content:'';position:absolute;background:rgba(139,92,246,.4);border-radius:1px;}
.gb-resize-handle::before{bottom:8px;right:4px;width:14px;height:1.5px;}
.gb-resize-handle::after{bottom:4px;right:8px;width:1.5px;height:14px;}
/* 右下角拖拽提示 */
.gb-resize-hint{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  font-size:.52rem;letter-spacing:.08em;
  color:rgba(255,255,255,.12);
  pointer-events:none;user-select:none;white-space:nowrap;
}

.gameboy-shell::after{content:'';pointer-events:none;position:absolute;inset:0;border-radius:28px 28px 52px 52px;background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 40%,transparent 60%,rgba(0,0,0,.15) 100%);}
.gb-scanline{height:2px;border-radius:28px 28px 0 0;flex-shrink:0;background:linear-gradient(90deg,transparent 0%,rgba(99,102,241,.6) 20%,rgba(167,139,250,.9) 40%,rgba(232,80,122,.7) 60%,rgba(56,189,248,.5) 80%,transparent 100%);animation:scanPulse 4s ease-in-out infinite;}
@keyframes scanPulse{0%,100%{opacity:.6;}50%{opacity:1;}}
.gb-topbar{display:flex;align-items:center;gap:10px;padding:12px 16px 8px;flex-shrink:0;}
.gb-indicator-group{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.gb-indicator{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#6ee7b7,#10b981);box-shadow:0 0 6px #10b981,0 0 12px rgba(16,185,129,.4);animation:gbBlink 2.5s ease-in-out infinite;}
@keyframes gbBlink{0%,100%{opacity:1;box-shadow:0 0 6px #10b981,0 0 12px rgba(16,185,129,.4);}50%{opacity:.45;box-shadow:0 0 3px #10b981;}}
.gb-power-label{font-size:.52rem;letter-spacing:2px;color:rgba(255,255,255,.25);text-transform:uppercase;}
.gb-title{font-size:.78rem;font-weight:800;letter-spacing:3px;background:linear-gradient(90deg,#c7d2fe,#a5b4fc,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;flex:1;text-align:center;}
.gb-topbar-btns{display:flex;gap:5px;}
.gb-topbar-btn{width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:transform .12s,filter .12s,box-shadow .12s;flex-shrink:0;font-weight:700;}
.gb-topbar-btn:active{transform:scale(.84)!important;}
.gb-btn-lb{background:linear-gradient(135deg,#7c3aed,#5b21b6);box-shadow:0 3px 10px rgba(124,58,237,.45),inset 0 1px 0 rgba(255,255,255,.2);color:#ede9fe;}
.gb-btn-help{background:linear-gradient(135deg,#0284c7,#0369a1);box-shadow:0 3px 10px rgba(2,132,199,.45),inset 0 1px 0 rgba(255,255,255,.2);color:#e0f2fe;}
.gb-btn-close{background:linear-gradient(135deg,#dc2626,#991b1b);box-shadow:0 3px 10px rgba(220,38,38,.45),inset 0 1px 0 rgba(255,255,255,.2);color:#fee2e2;}
.gb-topbar-btn:hover{filter:brightness(1.18);transform:translateY(-1px);}

/* 分数栏 */
.gb-scorebar{display:flex;align-items:stretch;margin:0 14px 8px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;flex-shrink:0;box-shadow:inset 0 2px 8px rgba(0,0,0,.3);}
.gb-score-cell{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px 4px;gap:3px;position:relative;}
.gb-score-cell+.gb-score-cell{border-left:1px solid rgba(255,255,255,.05);}
.gb-score-cell::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 100%);}
.gb-score-label{font-size:.56rem;letter-spacing:2.5px;color:rgba(255,255,255,.3);text-transform:uppercase;position:relative;}
.gb-score-val{font-family:var(--font-display);font-size:1.15rem;font-weight:800;color:#fff;letter-spacing:1px;position:relative;}
.gb-score-val.gold{background:linear-gradient(135deg,#fde68a,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.gb-score-val.cyan{background:linear-gradient(135deg,#7dd3fc,#38bdf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}

/* 难度行 */
.gb-diff-row{display:flex;align-items:center;gap:6px;padding:0 14px 8px;flex-shrink:0;}
.gb-diff-label{font-size:.65rem;color:rgba(255,255,255,.3);letter-spacing:1.5px;margin-right:2px;}
.gb-diff-btn{padding:5px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:rgba(255,255,255,.4);font-size:.7rem;font-family:var(--font-body);cursor:pointer;transition:all .15s;letter-spacing:.5px;}
.gb-diff-btn:hover{background:rgba(99,102,241,.12);color:rgba(199,210,254,.8);}
.gb-diff-btn.active{background:linear-gradient(135deg,rgba(99,102,241,.22),rgba(139,92,246,.16));border-color:rgba(99,102,241,.5);color:#c7d2fe;font-weight:600;box-shadow:0 0 10px rgba(99,102,241,.2);}

/* 屏幕外框 */
.gb-screen-outer{margin:0 14px;flex-shrink:0;background:rgba(0,0,0,.6);border:2px solid rgba(255,255,255,.07);border-radius:18px;padding:8px;box-shadow:inset 0 6px 20px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.5),0 2px 0 rgba(255,255,255,.04);}
.gb-screen-inner{border-radius:12px;overflow:hidden;position:relative;box-shadow:inset 0 2px 8px rgba(0,0,0,.8);}
#game-canvas{display:block;background:#04081a;image-rendering:pixelated;width:100%;height:auto;}

/* Overlay */
.game-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(4,6,22,.9),rgba(14,6,30,.88));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:opacity .25s;}
.game-overlay.hidden{opacity:0;pointer-events:none;}
.game-overlay-icon{font-size:3rem;animation:floatIcon 3.5s ease-in-out infinite;filter:drop-shadow(0 0 16px rgba(167,139,250,.5));}
@keyframes floatIcon{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-10px) rotate(3deg);}}
.game-overlay-title{font-size:1.25rem;font-weight:800;letter-spacing:2px;text-align:center;background:linear-gradient(135deg,#e0e7ff,#c7d2fe,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.game-overlay-sub{font-size:.73rem;color:rgba(199,210,254,.5);letter-spacing:2px;text-align:center;}
.game-start-btn{background:linear-gradient(135deg,rgba(99,102,241,.3),rgba(139,92,246,.22));border:1px solid rgba(99,102,241,.5);color:#e0e7ff;padding:11px 34px;border-radius:50px;cursor:pointer;font-size:.88rem;font-family:var(--font-body);letter-spacing:3px;transition:var(--transition);margin-top:6px;}
.game-start-btn:hover{background:linear-gradient(135deg,rgba(99,102,241,.48),rgba(139,92,246,.38));box-shadow:0 0 24px rgba(99,102,241,.4);transform:translateY(-2px);}
.game-start-btn:active{transform:scale(.96);}

/* 品牌 */
.gb-brand{text-align:center;padding:7px 0 3px;flex-shrink:0;font-family:'Georgia',serif;font-size:.85rem;background:linear-gradient(90deg,#818cf8,#c084fc,#f472b6,#818cf8);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:3px;animation:brandShimmer 5s linear infinite;}
@keyframes brandShimmer{to{background-position:200% center;}}

/* 控制区 */
.gb-controls{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 22px;flex-shrink:0;}
.gb-dpad{position:relative;width:104px;height:104px;flex-shrink:0;}
.gb-dpad-arm{position:absolute;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);}
.gb-dpad-arm-h{left:0;right:0;top:50%;transform:translateY(-50%);height:36px;border-radius:4px;}
.gb-dpad-arm-v{top:0;bottom:0;left:50%;transform:translateX(-50%);width:36px;border-radius:4px;}
.gb-dpad-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;background:radial-gradient(circle,rgba(99,102,241,.2),rgba(0,0,0,.3));border-radius:50%;border:1px solid rgba(99,102,241,.2);}
.gb-dpad-btn{position:absolute;width:32px;height:32px;background:linear-gradient(135deg,rgba(40,30,80,.9),rgba(20,15,50,.9));border:1px solid rgba(99,102,241,.2);border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.68rem;color:rgba(199,210,254,.5);transition:background .1s,transform .08s,box-shadow .1s,border-color .1s;user-select:none;-webkit-user-select:none;box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);}
.gb-dpad-btn:hover{background:linear-gradient(135deg,rgba(99,102,241,.3),rgba(60,40,120,.9));border-color:rgba(99,102,241,.4);color:rgba(199,210,254,.9);}
.gb-dpad-btn.pressed,.gb-dpad-btn:active{background:linear-gradient(135deg,rgba(99,102,241,.45),rgba(79,70,229,.4));border-color:rgba(99,102,241,.7);color:#c7d2fe;box-shadow:0 1px 4px rgba(0,0,0,.5),inset 0 2px 4px rgba(0,0,0,.4),0 0 10px rgba(99,102,241,.3);transform:scale(.88);}
.gb-dpad-up{top:2px;left:50%;transform:translateX(-50%);}
.gb-dpad-down{bottom:2px;left:50%;transform:translateX(-50%);}
.gb-dpad-left{left:2px;top:50%;transform:translateY(-50%);}
.gb-dpad-right{right:2px;top:50%;transform:translateY(-50%);}
.gb-dpad-up.pressed,.gb-dpad-up:active{transform:translateX(-50%) scale(.88)!important;}
.gb-dpad-down.pressed,.gb-dpad-down:active{transform:translateX(-50%) scale(.88)!important;}
.gb-dpad-left.pressed,.gb-dpad-left:active{transform:translateY(-50%) scale(.88)!important;}
.gb-dpad-right.pressed,.gb-dpad-right:active{transform:translateY(-50%) scale(.88)!important;}
.gb-center-btns{display:flex;flex-direction:column;align-items:center;gap:8px;}
.gb-mini-btn{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;}
.gb-mini-btn-inner{width:38px;height:8px;border-radius:4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);transition:background .12s;}
.gb-mini-btn:active .gb-mini-btn-inner{background:rgba(99,102,241,.3);}
.gb-mini-label{font-size:.5rem;letter-spacing:1.5px;color:rgba(255,255,255,.2);}
.gb-ab{display:flex;flex-direction:column;gap:4px;align-items:center;flex-shrink:0;}
.gb-ab-row{display:flex;gap:12px;align-items:flex-end;}
.gb-ab-item{display:flex;flex-direction:column;align-items:center;gap:3px;}
.gb-ab-btn{width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:900;font-family:'Arial',sans-serif;transition:transform .1s,box-shadow .1s,filter .1s;user-select:none;-webkit-user-select:none;position:relative;}
.gb-ab-btn::before{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.25) 0%,transparent 50%);pointer-events:none;}
.gb-ab-btn.pressed,.gb-ab-btn:active{transform:scale(.82);filter:brightness(.82);box-shadow:none!important;}
.gb-btn-b{background:linear-gradient(135deg,#3b82f6,#1d4ed8);box-shadow:0 6px 16px rgba(59,130,246,.55),0 2px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.25);color:#eff6ff;}
.gb-btn-a{background:linear-gradient(135deg,#ef4444,#b91c1c);box-shadow:0 6px 16px rgba(239,68,68,.55),0 2px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.25);color:#fef2f2;}
.gb-ab-label{font-size:.56rem;letter-spacing:1px;color:rgba(255,255,255,.3);}

/* 排行榜 */
.lb-panel{position:absolute;top:38px;right:0;width:290px;background:linear-gradient(160deg,rgba(10,6,32,0.98),rgba(22,10,50,0.98));border:1px solid rgba(139,92,246,.22);border-radius:18px;padding:14px;box-shadow:0 24px 60px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);transition:all .2s cubic-bezier(.16,1,.3,1);z-index:200;max-height:480px;display:flex;flex-direction:column;}
/* 难度tab */
.lb-diff-tabs{display:flex;gap:4px;margin-bottom:8px;flex-shrink:0;}
.lb-dt{flex:1;padding:4px 0;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:rgba(255,255,255,.45);cursor:pointer;font-size:.68rem;font-family:inherit;transition:.15s;}
.lb-dt:hover{background:rgba(139,92,246,.12);color:#c4b5fd;}
.lb-dt.active{background:linear-gradient(135deg,rgba(99,102,241,.25),rgba(139,92,246,.18));border-color:rgba(139,92,246,.45);color:#c4b5fd;font-weight:600;}
.lb-panel.show{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.lb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-shrink:0;}
.lb-game-label{font-size:.75rem;font-weight:700;color:#a78bfa;letter-spacing:1px;}
.lb-close-btn{width:20px;height:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.4);border-radius:50%;cursor:pointer;font-size:.62rem;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.lb-close-btn:hover{background:rgba(248,113,113,.2);color:#f87171;}
.lb-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:3px;scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.2) transparent;padding-right:2px;}
.lb-empty{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.25);font-size:.73rem;padding:20px 0;flex:1;}
.lb-row{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:10px;font-size:.73rem;transition:background .12s;border:1px solid transparent;}
.lb-row:hover{background:rgba(255,255,255,.04);}
.lb-row.rank-1{background:linear-gradient(135deg,rgba(252,211,77,.1),rgba(245,158,11,.07));border-color:rgba(252,211,77,.2);box-shadow:inset 0 1px 0 rgba(252,211,77,.08);}
.lb-row.rank-2{background:linear-gradient(135deg,rgba(203,213,225,.08),rgba(148,163,184,.05));border-color:rgba(203,213,225,.15);}
.lb-row.rank-3{background:linear-gradient(135deg,rgba(251,146,60,.09),rgba(234,88,12,.06));border-color:rgba(251,146,60,.18);}
.lb-row.me{box-shadow:0 0 0 1.5px rgba(139,92,246,.4);background:rgba(139,92,246,.06);}
.lb-rank{width:24px;text-align:center;flex-shrink:0;font-size:.8rem;}
.lb-name{flex:1;color:rgba(255,255,255,.78);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-name.me-tag{color:#a78bfa;font-weight:700;}
.lb-score{color:#fcd34d;font-family:var(--font-display);font-size:.72rem;flex-shrink:0;min-width:40px;text-align:right;font-weight:700;}
.lb-date{color:rgba(255,255,255,.2);font-size:.58rem;flex-shrink:0;min-width:28px;text-align:right;}
.lb-my-rank{margin-top:8px;padding:7px 10px;border-radius:10px;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.2);display:none;align-items:center;justify-content:space-between;font-size:.7rem;color:rgba(255,255,255,.65);flex-shrink:0;}
.lb-my-rank.show{display:flex;}
.lb-name-input-wrap{margin-top:8px;flex-shrink:0;display:none;flex-direction:column;gap:7px;}
.lb-name-input-wrap.show{display:flex;animation:calFadeIn .18s ease;}
.lb-name-input{width:100%;padding:7px 11px;border-radius:9px;border:1px solid rgba(139,92,246,.3);background:rgba(255,255,255,.05);color:#fff;font-size:.78rem;font-family:var(--font-body);outline:none;transition:border-color .15s;}
.lb-name-input:focus{border-color:#a78bfa;box-shadow:0 0 0 3px rgba(139,92,246,.1);}
.lb-name-actions{display:flex;gap:6px;}
.lb-name-submit{flex:1;padding:7px;border-radius:9px;background:linear-gradient(135deg,rgba(139,92,246,.3),rgba(109,40,217,.2));border:1px solid rgba(139,92,246,.4);color:#ede9fe;font-size:.73rem;font-family:var(--font-body);cursor:pointer;transition:all .15s;}
.lb-name-submit:hover{background:linear-gradient(135deg,rgba(139,92,246,.45),rgba(109,40,217,.35));}
.lb-name-skip{padding:7px 11px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.35);font-size:.73rem;font-family:var(--font-body);cursor:pointer;}

/* 帮助 */
.help-panel{position:absolute;top:38px;right:0;width:240px;background:linear-gradient(160deg,rgba(8,10,32,0.98),rgba(16,8,40,0.98));border:1px solid rgba(56,189,248,.2);border-radius:16px;padding:13px;box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);transition:all .2s cubic-bezier(.16,1,.3,1);z-index:200;}
.help-panel.show{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.help-title{font-size:.7rem;letter-spacing:2.5px;color:#38bdf8;margin-bottom:9px;font-weight:700;}
.help-row{display:flex;align-items:center;gap:8px;padding:3.5px 0;font-size:.7rem;}
.help-key{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:5px;padding:2px 7px;font-family:var(--font-display);font-size:.63rem;color:rgba(255,255,255,.65);flex-shrink:0;min-width:72px;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.3);}
.help-desc{color:rgba(255,255,255,.45);}
.help-sep{width:100%;height:1px;background:rgba(255,255,255,.05);margin:5px 0;}
.gb-floating-area{position:relative;}

/* 响应式 */
@media(max-width:480px){
  .gameboy-shell{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;min-width:unset;}
  .gb-resize-handle{display:none;}
  .gb-ab-btn{width:40px;height:40px;}
  .gb-controls{padding:10px 14px 18px;}
  .gb-screen-outer{margin:0 10px;}
  .gb-scorebar,.gb-diff-row{margin-left:10px;margin-right:10px;}
}

/* ── 触屏设备：隐藏 D-Pad 十字装饰背景，只保留方向按钮 ── */
.touch-device .gb-dpad-arm,
.touch-device .gb-dpad-center{display:none;}
.touch-device .gb-dpad{width:120px;height:120px;}
.touch-device .gb-dpad-btn{
  width:40px;height:40px;
  background:rgba(99,102,241,.18) !important;
  border:1px solid rgba(99,102,241,.3) !important;
  border-radius:14px !important;
  font-size:.9rem !important;
}
/* 触屏时 A/B 按钮也放大 */
.touch-device .gb-ab-btn{width:52px;height:52px;font-size:1rem;}
/* 触屏时游戏 modal 撑满屏幕，减少内边距 */
@media(max-width:600px){
  .touch-device .game-modal{padding:8px;}
  .touch-device .gameboy-shell{border-radius:16px !important;}
}

/* ══ 蜘蛛牌：独立整页（和五子棋、围棋一样铺满窗口，不套掌机外壳）══
   gamebox.js 打开蜘蛛牌时给 #game-modal 加 .sp-page；牌桌尺寸由 spider.js 的 spResize 按剩余空间算 */
#game-modal.sp-page{padding:0;z-index:10800}
#game-modal.sp-page .game-modal-bg{backdrop-filter:none;-webkit-backdrop-filter:none;background:#070515}
#game-modal.sp-page .gameboy-shell{width:100vw!important;max-width:none!important;height:100vh;height:100dvh;max-height:none;
  min-width:0;min-height:0;border-radius:0!important;box-shadow:none;animation:none}
#game-modal.sp-page .gameboy-shell::before,#game-modal.sp-page .gameboy-shell::after{display:none}
#game-modal.sp-page .gb-scanline,#game-modal.sp-page .gb-indicator-group,#game-modal.sp-page .gb-brand,
#game-modal.sp-page .gb-resize-hint,#game-modal.sp-page .gb-resize-handle,#game-modal.sp-page .gb-screw,
#game-modal.sp-page .gb-controls{display:none!important}
#game-modal.sp-page .gb-topbar{padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}
#game-modal.sp-page .gb-topbar-btn{width:36px;height:36px;font-size:.9rem}
#game-modal.sp-page .gb-scorebar,#game-modal.sp-page .gb-diff-row{margin-left:max(16px,env(safe-area-inset-left));margin-right:max(16px,env(safe-area-inset-right))}
#game-modal.sp-page .gb-diff-row{padding-left:0;padding-right:0}
#game-modal.sp-page .gb-screen-outer{flex:1;min-height:0;display:flex;flex-direction:column;padding:0;border:0;border-radius:14px;
  margin:0 max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
#game-modal.sp-page .gb-screen-inner{flex:1;min-height:0;display:flex;flex-direction:column;background:#04081a}
#game-modal.sp-page .gb-screen-inner::after{display:none}
#game-modal.sp-page #game-canvas{flex:none;margin:auto}
@media(max-width:600px){
  #game-modal.sp-page .gb-topbar{padding-left:12px;padding-right:12px}
  #game-modal.sp-page .gb-scorebar,#game-modal.sp-page .gb-diff-row{margin-left:10px;margin-right:10px}
  #game-modal.sp-page .gb-screen-outer{margin:0 0 env(safe-area-inset-bottom);border-radius:0}
}