/* ══════════════════════════════════════════════════════════
   arcade.css — 单机小游戏：掌机外壳 / 排行榜 / 按键指引 / 挑战码
   在 app.css 之后加载，覆盖原来的扁平样式
   ══════════════════════════════════════════════════════════ */

/* ══════════ 机身 ══════════ */
.gameboy-shell{
  --gb-face:#241a3e; --gb-face-2:#1a1230; --gb-edge:rgba(255,255,255,.1); --gb-accent:#a98bff;
  background:
    radial-gradient(120% 70% at 50% -10%,rgba(169,139,255,.16),transparent 60%),
    linear-gradient(176deg,#2a1f4a 0%,#1d1536 38%,#180f2c 72%,#120c22 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),0 0 0 2px rgba(169,139,255,.1),
    0 44px 110px -30px rgba(0,0,0,.9),0 12px 34px -12px rgba(120,80,220,.28),
    inset 0 2px 0 rgba(255,255,255,.14),inset 0 -6px 0 rgba(0,0,0,.55),
    inset 3px 0 6px -3px rgba(255,255,255,.07),inset -3px 0 6px -3px rgba(0,0,0,.5);
}
/* 机身塑料质感：极淡噪点，避免大面积渐变出现色带 */
.gameboy-shell::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}
.gameboy-shell > *{position:relative;z-index:1}
/* 机身螺丝 + 喇叭孔 */
.gb-screw{position:absolute;width:9px;height:9px;border-radius:50%;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.22),rgba(0,0,0,.5) 70%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.6)}
.gb-screw::after{content:'';position:absolute;inset:2.5px;border-radius:1px;background:rgba(0,0,0,.42);transform:rotate(38deg)}
.gb-screw.s1{top:12px;left:12px}.gb-screw.s2{top:12px;right:12px}
.gb-screw.s3{bottom:16px;left:16px}.gb-screw.s4{bottom:16px;right:16px}
@media (max-width:480px){.gb-screw{display:none}}
/* 手机上没有缩放手柄，提示也别占位 */
@media (max-width:768px),(pointer:coarse){.gb-resize-hint{display:none}}

/* 顶栏（排行榜 / 帮助面板从这里弹出，必须盖在分数条和屏幕之上） */
.gb-topbar{padding:14px 16px 10px;z-index:6}
.gb-indicator{box-shadow:0 0 7px #10b981,0 0 16px rgba(16,185,129,.45)}
.gb-title{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.82rem;letter-spacing:2.5px}
.gb-title-ico{display:inline-grid;place-items:center;width:22px;height:22px;flex:none}
.gb-title-ico svg{width:100%;height:100%;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.gb-title-ico:empty{display:none}
.gb-topbar-btn{width:30px;height:30px;border-radius:11px;display:grid;place-items:center}
.gb-topbar-btn svg.ico{width:15px;height:15px}
.gb-btn-lb{background:linear-gradient(140deg,#8b5cf6,#5b21b6);box-shadow:0 4px 12px -4px rgba(139,92,246,.9),inset 0 1px 0 rgba(255,255,255,.28)}
.gb-btn-help{background:linear-gradient(140deg,#38bdf8,#0369a1);box-shadow:0 4px 12px -4px rgba(56,189,248,.9),inset 0 1px 0 rgba(255,255,255,.28)}
.gb-btn-close{background:linear-gradient(140deg,#fb7185,#9f1239);box-shadow:0 4px 12px -4px rgba(251,113,133,.9),inset 0 1px 0 rgba(255,255,255,.28)}

/* 分数条 */
.gb-scorebar{margin:0 14px 9px;border-radius:15px;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.32));
  box-shadow:inset 0 2px 10px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.05),0 1px 0 rgba(255,255,255,.05)}
.gb-score-label{display:inline-flex;align-items:center;gap:4px;font-size:.54rem}
.gb-score-label svg.ico{width:11px;height:11px;opacity:.75}
.gb-score-cell:nth-child(1) .gb-score-label svg{color:#fcd34d}
.gb-score-cell:nth-child(2) .gb-score-label svg{color:#f7a8c8}
.gb-score-cell:nth-child(3) .gb-score-label svg{color:#7dd3fc}
.gb-score-val{font-variant-numeric:tabular-nums;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.gb-score-val.bump{animation:gbBump .38s cubic-bezier(.34,1.56,.64,1)}
@keyframes gbBump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}

/* 难度分段控件 */
.gb-diff-row{gap:8px;padding:0 14px 10px}
.gb-diff-label{font-size:.6rem;letter-spacing:2px}
.gb-diff-seg{display:flex;gap:3px;padding:3px;border-radius:12px;flex:1;
  background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.gb-diff-btn{flex:1;padding:5px 0;border-radius:9px;border:0;background:none;box-shadow:none;
  color:rgba(255,255,255,.42);font-size:.7rem;letter-spacing:1px;transition:color .15s,background .2s}
.gb-diff-btn:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.7)}
.gb-diff-btn.active{color:#fff;font-weight:700;box-shadow:0 4px 12px -6px rgba(139,92,246,.9);
  background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
#diff-easy.active{background:linear-gradient(135deg,#34d399,#0f9d76);box-shadow:0 4px 12px -6px rgba(52,211,153,.9)}
#diff-hard.active{background:linear-gradient(135deg,#fb7185,#be123c);box-shadow:0 4px 12px -6px rgba(251,113,133,.9)}

/* 屏幕：内嵌玻璃 + 顶部反光 */
.gb-screen-outer{border-radius:20px;padding:9px;border:0;
  background:linear-gradient(180deg,#0a0716,#120c22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 8px 22px rgba(0,0,0,.8),0 2px 0 rgba(255,255,255,.07)}
.gb-screen-inner{border-radius:13px;box-shadow:inset 0 2px 10px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.6)}
.gb-screen-inner::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;border-radius:inherit;
  background:linear-gradient(150deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.03) 18%,transparent 42%);
  mix-blend-mode:screen}
.gb-screen-inner:fullscreen::after{display:none}

/* 开始遮罩 */
.game-overlay{background:radial-gradient(90% 70% at 50% 40%,rgba(28,16,58,.86),rgba(6,4,18,.94));backdrop-filter:blur(2px)}
.game-overlay-icon{width:74px;height:74px;font-size:3rem;display:grid;place-items:center}
.game-overlay-icon svg{width:100%;height:100%;filter:drop-shadow(0 8px 20px rgba(0,0,0,.6))}
.game-start-btn{background:linear-gradient(135deg,#a98bff,#6d28d9);border:0;color:#fff;font-weight:700;letter-spacing:2px;
  box-shadow:0 12px 26px -12px rgba(139,92,246,.95),inset 0 1px 0 rgba(255,255,255,.3)}
.game-start-btn:hover{background:linear-gradient(135deg,#b9a0ff,#7c3aed);box-shadow:0 16px 34px -14px rgba(139,92,246,1)}

/* 品牌条 */
.gb-brand{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 0 4px;font-family:'Georgia',serif;
  font-size:.72rem;letter-spacing:3px}
.gb-brand-mark{width:15px;height:15px;flex:none;-webkit-text-fill-color:initial}
.gb-brand span{background:linear-gradient(90deg,#a5b4fc,#e9c789,#f7a8c8,#a5b4fc);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:brandShimmer 6s linear infinite}

/* 十字键：一体化面板 */
.gb-dpad-arm{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border-color:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 6px rgba(0,0,0,.45)}
.gb-dpad-center{background:radial-gradient(circle at 40% 35%,rgba(169,139,255,.3),rgba(0,0,0,.45));
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.gb-dpad-btn{background:linear-gradient(180deg,rgba(72,56,124,.92),rgba(34,25,64,.92));border-color:rgba(169,139,255,.24);
  color:rgba(226,220,255,.75);box-shadow:0 3px 8px -2px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14)}
.gb-dpad-btn:hover{background:linear-gradient(180deg,rgba(120,92,200,.95),rgba(58,42,110,.95));color:#fff}
.gb-dpad-btn.pressed,.gb-dpad-btn:active{background:linear-gradient(180deg,rgba(139,92,246,.75),rgba(88,60,180,.7));
  box-shadow:inset 0 3px 8px rgba(0,0,0,.6),0 0 14px -2px rgba(139,92,246,.7);color:#fff}

/* A / B 键 */
.gb-ab-btn{width:48px;height:48px;font-size:1rem}
.gb-btn-b{background:radial-gradient(circle at 34% 28%,#7cc0ff,#2563eb 60%,#1740a8);
  box-shadow:0 8px 18px -6px rgba(37,99,235,.85),0 2px 4px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 6px rgba(0,0,0,.35)}
.gb-btn-a{background:radial-gradient(circle at 34% 28%,#ff9aa8,#e11d48 60%,#9f1239);
  box-shadow:0 8px 18px -6px rgba(225,29,72,.85),0 2px 4px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 6px rgba(0,0,0,.35)}
.gb-ab-label{font-size:.54rem;letter-spacing:1.5px;color:rgba(255,255,255,.35)}
.gb-mini-btn-inner{width:40px;height:9px;border-radius:5px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 5px rgba(0,0,0,.45);transform:rotate(-8deg)}
.gb-mini-btn:active .gb-mini-btn-inner{background:linear-gradient(180deg,rgba(169,139,255,.5),rgba(139,92,246,.35))}

/* ══════════ 排行榜面板 ══════════ */
.lb-panel{width:300px;border-radius:20px;padding:13px;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(170deg,rgba(26,18,48,.99),rgba(14,9,28,.99));
  box-shadow:0 30px 70px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.lb-head{gap:8px}
.lb-game-label{display:inline-flex;align-items:center;gap:6px;color:#e9c789;font-size:.78rem}
.lb-game-label svg.ico{width:15px;height:15px}
.lb-close-btn{width:24px;height:24px;border-radius:8px;border:0;background:rgba(255,255,255,.06);display:grid;place-items:center}
.lb-close-btn svg.ico{width:12px;height:12px}
.lb-diff-tabs{gap:3px;padding:3px;border-radius:11px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.lb-dt{display:inline-flex;align-items:center;justify-content:center;gap:4px;border:0;background:none;border-radius:8px;padding:5px 0;font-size:.68rem}
.lb-dot{width:6px;height:6px;border-radius:50%;flex:none;background:currentColor;opacity:.85}
.lb-dot.d-easy{background:#34d399}.lb-dot.d-normal{background:#fbbf24}.lb-dot.d-hard{background:#fb7185}
.lb-dt.active{background:rgba(255,255,255,.1);color:#fff;font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.lb-row{gap:8px;padding:6px 9px;border-radius:11px}
.lb-rank{width:22px;height:22px;display:grid;place-items:center;border-radius:8px;font-size:.66rem;font-weight:800;
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.lb-row.rank-1 .lb-rank{background:linear-gradient(140deg,#fde68a,#f59e0b);color:#4a2c00;box-shadow:0 3px 10px -4px rgba(245,158,11,.9)}
.lb-row.rank-2 .lb-rank{background:linear-gradient(140deg,#e5e7eb,#94a3b8);color:#1f2937}
.lb-row.rank-3 .lb-rank{background:linear-gradient(140deg,#fdba74,#c2410c);color:#3b1604}
.lb-score{color:#fcd34d;font-variant-numeric:tabular-nums}
.lb-diff-tag{display:inline-flex;align-items:center;gap:3px;margin-left:5px;font-size:.56rem;opacity:.6}
.lb-diff-tag i{width:5px;height:5px;border-radius:50%}
.lb-my-rank{border-radius:11px;background:rgba(169,139,255,.12);border-color:rgba(169,139,255,.24)}
.lb-my-rank span{display:inline-flex;align-items:center;gap:5px}
.lb-my-rank svg.ico{width:13px;height:13px;opacity:.8}
.lb-empty{flex-direction:column;gap:6px}
.lb-empty svg.ico{width:26px;height:26px;opacity:.3}
.lb-name-input{border-radius:10px}
.lb-name-submit{border:0;background:linear-gradient(135deg,#a98bff,#6d28d9);color:#fff;font-weight:700;border-radius:10px}
.lb-name-skip{border-radius:10px}

/* ══════════ 按键指引 ══════════ */
.help-panel{width:252px;border-radius:18px;padding:14px;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(170deg,rgba(18,16,42,.99),rgba(10,8,24,.99));
  box-shadow:0 26px 60px -22px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.help-title{display:flex;align-items:center;gap:6px;color:#7dd3fc;letter-spacing:2px;margin-bottom:10px}
.help-title svg.ico{width:14px;height:14px}
.help-row{gap:9px;padding:4px 0;align-items:center}
.help-keys{display:flex;flex-wrap:wrap;gap:3px;flex:none;min-width:84px}
.help-kbd{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:5px;
  font-family:var(--font-display);font-size:.6rem;font-weight:700;color:rgba(255,255,255,.82);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 0 rgba(0,0,0,.45)}
.help-kbd.wide{font-size:.56rem;letter-spacing:.5px}
.help-plus{color:rgba(255,255,255,.28);font-size:.58rem;align-self:center}
.help-desc{color:rgba(255,255,255,.55);font-size:.7rem;line-height:1.4}
.help-sep{background:rgba(255,255,255,.07);margin:7px 0}
.help-note .help-keys{min-width:84px}
.help-note .help-kbd{background:rgba(169,139,255,.14);box-shadow:inset 0 0 0 1px rgba(169,139,255,.28);color:#c9b8ff;font-family:var(--font-body)}

/* ══════════ 挑战码弹窗 ══════════ */
.challenge-shell{width:376px;border-radius:24px;padding:24px 22px;gap:14px;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(168deg,rgba(24,16,48,.99),rgba(12,8,26,.99));
  box-shadow:0 40px 90px -30px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.08)}
.ch-head{display:flex;flex-direction:column;align-items:center;gap:8px}
.ch-ico{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(169,139,255,.25),rgba(109,40,217,.18));box-shadow:inset 0 0 0 1px rgba(169,139,255,.32)}
.ch-ico svg.ico{width:26px;height:26px;color:#c9b8ff}
.challenge-title{font-size:1.02rem;font-weight:800;letter-spacing:1px;color:#ede9fe}
.challenge-game-name{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:.78rem;color:rgba(255,255,255,.55)}
.challenge-game-name b{color:#fcd34d;font-family:var(--font-display);font-variant-numeric:tabular-nums}
.ch-code-wrap{display:flex;gap:8px;align-items:stretch}
.challenge-code{flex:1;border-radius:14px;padding:16px 10px;font-size:1.6rem;letter-spacing:8px;text-indent:8px;font-weight:800;
  color:#c9b8ff;background:rgba(169,139,255,.1);border:1px dashed rgba(169,139,255,.4)}
.ch-copy{width:52px;border:0;border-radius:14px;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(135deg,#a98bff,#6d28d9);color:#fff;box-shadow:0 10px 22px -12px rgba(139,92,246,.95)}
.ch-copy svg.ico{width:18px;height:18px}
.ch-copy:active{transform:scale(.95)}
.challenge-desc{font-size:.76rem;line-height:1.7;color:rgba(255,255,255,.45)}
.challenge-input{border-radius:14px;padding:14px;font-size:1.3rem;letter-spacing:9px;text-indent:9px;font-weight:800;
  background:rgba(0,0,0,.35);border-color:rgba(169,139,255,.3)}
.challenge-input:focus{border-color:#a98bff;box-shadow:0 0 0 4px rgba(169,139,255,.14)}
.challenge-result{display:flex;align-items:center;gap:8px;text-align:left;border-radius:14px;padding:12px;font-size:.82rem;line-height:1.5}
.challenge-result svg.ico{width:18px;height:18px;flex:none}
.challenge-result.win{background:rgba(93,224,166,.12);color:#6ee7b7;box-shadow:inset 0 0 0 1px rgba(93,224,166,.28)}
.challenge-result.lose{background:rgba(251,113,133,.12);color:#fda4af;box-shadow:inset 0 0 0 1px rgba(251,113,133,.28)}
.challenge-result.tie{background:rgba(251,191,36,.12);color:#fcd34d;box-shadow:inset 0 0 0 1px rgba(251,191,36,.28)}
.challenge-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:14px;font-weight:700;border:0}
.challenge-btn svg.ico{width:15px;height:15px}
.challenge-btn-primary{background:linear-gradient(135deg,#a98bff,#6d28d9);color:#fff;box-shadow:0 12px 26px -14px rgba(139,92,246,.95)}
.challenge-btn-primary:hover{filter:brightness(1.08);background:linear-gradient(135deg,#a98bff,#6d28d9)}
.challenge-btn-ghost{background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.challenge-btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}

/* ══════════ 浅色主题 ══════════ */
body.theme-light .gameboy-shell{
  background:radial-gradient(120% 70% at 50% -10%,rgba(255,183,210,.4),transparent 60%),
    linear-gradient(176deg,#fff3f9 0%,#ffe6f1 40%,#f6dcec 75%,#efd2e6 100%);
  box-shadow:0 0 0 1px rgba(160,90,130,.16),0 34px 80px -28px rgba(120,50,90,.4),
    inset 0 2px 0 rgba(255,255,255,.9),inset 0 -6px 0 rgba(160,90,130,.16)}
body.theme-light .gb-title{-webkit-text-fill-color:initial;background:none;color:#8b1e52}
body.theme-light .gb-scorebar{background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.5));
  box-shadow:inset 0 0 0 1px rgba(160,90,130,.14),0 1px 0 rgba(255,255,255,.8)}
body.theme-light .gb-score-label{color:rgba(90,40,70,.55)}
body.theme-light .gb-score-val{color:#3d1030}
body.theme-light .gb-diff-seg{background:rgba(160,90,130,.1);box-shadow:inset 0 0 0 1px rgba(160,90,130,.12)}
body.theme-light .gb-diff-btn{color:rgba(90,40,70,.55)}
body.theme-light .gb-diff-btn.active{color:#fff}
body.theme-light .gb-diff-label{color:rgba(90,40,70,.5)}
body.theme-light .gb-screen-outer{background:linear-gradient(180deg,#e7d2e2,#f6e6ef);
  box-shadow:inset 0 0 0 1px rgba(160,90,130,.18),inset 0 6px 16px rgba(120,50,90,.22),0 2px 0 rgba(255,255,255,.7)}
body.theme-light .gb-dpad-arm{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(245,225,238,.9));border-color:rgba(160,90,130,.16)}
body.theme-light .gb-dpad-btn{background:linear-gradient(180deg,#fff,#f3dfeb);border-color:rgba(160,90,130,.2);color:#8b1e52}
body.theme-light .gb-ab-label,body.theme-light .gb-mini-label,body.theme-light .gb-power-label{color:rgba(90,40,70,.45)}
body.theme-light .gb-resize-hint{color:rgba(90,40,70,.25)}
body.theme-light .lb-panel,body.theme-light .help-panel,body.theme-light .challenge-shell{
  background:linear-gradient(170deg,#fffafd,#fdeef6);border-color:rgba(160,90,130,.2);color:#3d1030;
  box-shadow:0 26px 60px -24px rgba(120,50,90,.4),inset 0 1px 0 #fff}
body.theme-light .help-desc,body.theme-light .challenge-desc{color:rgba(90,40,70,.6)}
body.theme-light .help-kbd{background:linear-gradient(180deg,#fff,#f0dfea);color:#5b2444;box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(160,90,130,.3)}
body.theme-light .help-title{color:#0e7490}
body.theme-light .lb-name,body.theme-light .lb-my-rank{color:#3d1030}
body.theme-light .lb-rank{background:rgba(160,90,130,.1);color:rgba(90,40,70,.6)}
body.theme-light .lb-dt{color:rgba(90,40,70,.55)}
body.theme-light .lb-dt.active{background:rgba(160,90,130,.14);color:#8b1e52}
body.theme-light .lb-score{color:#b45309}
body.theme-light .challenge-title{color:#3d1030}
body.theme-light .challenge-code{color:#6d28d9;background:rgba(169,139,255,.12)}
body.theme-light .challenge-input{background:#fff;color:#3d1030}

@media (prefers-reduced-motion:reduce){
  .gb-brand span,.gb-score-val.bump{animation:none}
}