/* ================================================
   掌机小精灵 - GBA掌机拟物风格
   经典Game Boy绿色单色屏幕 + 紫色GBA机身
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }

:root{
  /* GBA机身色 */
  --gba-body:#5c3d78;
  --gba-body-dark:#4a2f63;
  --gba-body-light:#7c5aa0;
  --gba-body-shadow:#3a2350;
  /* GB屏幕绿色四色 */
  --gb-dk:#0f380f;
  --gb-md:#306230;
  --gb-lt:#8bac0f;
  --gb-br:#9bbc0f;
  /* 按键色 */
  --dpad:#1a1a2e;
  --dpad-hi:#2d2d4a;
  --ab-a:#c0392b;
  --ab-b:#8e44ad;
  --ss-btn:#2c1640;
  --ss-label:#d4b8e8;
  /* L/R肩键 */
  --lr:#8e74a8;
  --lr-dark:#5c3d78;
}

html,body{
  width:100%;min-height:100%;
  background:linear-gradient(135deg,#1a0a28 0%,#2d1845 40%,#1a0a28 100%);
  font-family:"VT323","Courier New",Consolas,monospace;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  padding-bottom:20px;
}
body{
  display:flex;justify-content:center;align-items:flex-start;
  padding:0 0 80px 0;
}

/* ===== 开机画面 ===== */
.gba-boot{
  position:fixed;inset:0;z-index:9999;
  background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;
  transition:opacity .5s;
}
.gba-boot.hide{opacity:0;pointer-events:none;}
.boot-nintendo{
  font-family:"Press Start 2P",monospace;
  color:#9bbc0f;font-size:14px;letter-spacing:2px;
  animation:bootBlink 1s steps(2) infinite;
}
.boot-gba{
  font-family:"Press Start 2P",monospace;
  color:#9bbc0f;font-size:18px;letter-spacing:1px;
  border:2px solid #9bbc0f;padding:16px 24px;
}
.boot-press{
  font-family:"Press Start 2P",monospace;
  color:#8bac0f;font-size:10px;margin-top:20px;
  animation:bootBlink .8s steps(2) infinite;
}
@keyframes bootBlink{
  0%,49%{opacity:1}50%,100%{opacity:0}
}

/* ===== GBA掌机主体 ===== */
.gba-device{
  position:relative;
  width:100%;max-width:420px;
  margin:0 auto;
  padding:0;
  display:none;
}
.gba-device.show{display:block;}

/* L/R肩键 */
.gba-shoulder{
  position:absolute;top:0;
  width:80px;height:18px;
  background:linear-gradient(180deg,#a088b8 0%,#6b4a8a 60%,#4a2f63 100%);
  border-radius:8px 8px 0 0;
  z-index:1;
  text-align:center;
  font-family:"Press Start 2P",monospace;
  font-size:8px;color:#2c1640;
  line-height:18px;font-weight:700;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.15),0 -2px 4px rgba(0,0,0,.3);
}
.gba-l{left:20px;transform:rotate(-2deg);transform-origin:bottom right;}
.gba-r{right:20px;transform:rotate(2deg);transform-origin:bottom left;}

/* 机身 */
.gba-body{
  position:relative;
  margin-top:14px;
  background:linear-gradient(180deg,#7c5aa0 0%,#6b4a8a 8%,#5c3d78 50%,#4a2f63 100%);
  border-radius:20px 20px 40px 20px / 20px 20px 60px 20px;
  padding:18px 18px 24px 18px;
  box-shadow:
    0 0 0 2px #3a2350,
    0 8px 0 #3a2350,
    0 12px 30px rgba(0,0,0,.6),
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 0 -2px 4px rgba(0,0,0,.2);
}

/* 顶部品牌条 */
.gba-topbar{
  display:flex;align-items:center;gap:8px;
  margin-bottom:12px;
  padding:0 4px;
}
.gba-power-dot{
  width:8px;height:8px;border-radius:50%;
  background:#e74c3c;
  box-shadow:0 0 6px #e74c3c,0 0 12px rgba(231,76,60,.5);
  animation:powerLed 2s ease-in-out infinite;
}
@keyframes powerLed{
  0%,100%{opacity:1}50%{opacity:.6}
}
.gba-power-label{
  font-family:"Press Start 2P",monospace;
  font-size:7px;color:#d4b8e8;letter-spacing:1px;
}
.gba-brand{
  margin-left:auto;
  font-family:"Press Start 2P",monospace;
  font-size:7px;color:#d4b8e8;letter-spacing:.5px;
  opacity:.7;
}

/* ===== 屏幕外框 ===== */
.gba-screen-frame{
  background:linear-gradient(180deg,#2c1640 0%,#1a0a28 100%);
  border-radius:8px 8px 40px 8px;
  padding:14px 14px 24px 14px;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.6),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 1px 0 rgba(255,255,255,.15);
  position:relative;
}
/* 屏幕品牌文字 */
.gba-screen-frame::before{
  content:"COLOR";
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  font-family:"Press Start 2P",monospace;
  font-size:6px;color:#8e74a8;letter-spacing:2px;
}

/* ===== 屏幕本体 ===== */
.gba-screen{
  position:relative;
  width:100%;
  background:var(--gb-dk);
  border-radius:4px;
  overflow:hidden;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.8),
    inset 0 0 8px rgba(155,188,15,.1);
  aspect-ratio:10/13.5;
  max-height:52vh;
  min-height:300px;
}
.gba-screen > *{
  position:absolute;inset:0;
}
/* 扫描线 */
.gba-scanlines{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.15) 0px,
    rgba(0,0,0,.15) 1px,
    transparent 1px,
    transparent 3px
  );
}
/* 屏幕反光 */
.gba-glare{
  position:absolute;top:0;left:0;right:0;height:40%;
  background:linear-gradient(180deg,rgba(155,188,15,.08) 0%,transparent 100%);
  z-index:4;pointer-events:none;
}
/* 屏幕内容（可滚动） */
.gba-screen-content{
  position:relative;z-index:1;
  height:100%;
  overflow-y:auto;overflow-x:hidden;
  padding:0;
  color:var(--gb-br);
  font-family:"VT323","Courier New",monospace;
  font-size:16px;line-height:1.4;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.gba-screen-content::-webkit-scrollbar{display:none;}

/* ===== 屏幕内容：跑马灯 ===== */
.screen-ticker{
  position:sticky;top:0;z-index:10;
  background:var(--gb-md);
  border-bottom:2px solid var(--gb-lt);
  padding:6px 0;
  overflow:hidden;
  height:28px;
}
.ticker-inner{
  display:flex;flex-direction:column;
  animation:tickerScroll 12s linear infinite;
  white-space:nowrap;
}
.ticker-inner span{
  font-family:"VT323",monospace;
  font-size:14px;color:var(--gb-dk);
  padding:2px 12px;
  font-weight:700;
  height:20px;line-height:20px;
}
@keyframes tickerScroll{
  0%{transform:translateY(0)}
  20%{transform:translateY(0)}
  25%{transform:translateY(-20px)}
  45%{transform:translateY(-20px)}
  50%{transform:translateY(-40px)}
  70%{transform:translateY(-40px)}
  75%{transform:translateY(-60px)}
  95%{transform:translateY(-60px)}
  100%{transform:translateY(-80px)}
}

/* ===== 面板通用 ===== */
.screen-panel{
  display:none;
  padding:12px;
}
.screen-panel.active{display:block;}
.screen-bottom-space{height:20px;}

.panel-head{
  font-family:"Press Start 2P",monospace;
  font-size:11px;color:var(--gb-dk);
  background:var(--gb-lt);
  padding:8px 10px;
  margin-bottom:10px;
  border:2px solid var(--gb-br);
  text-align:center;
  letter-spacing:1px;
}

/* ===== 首页面板 ===== */
.home-hero{
  text-align:center;
  padding:10px 0 14px;
}
.hero-logo-frame{
  width:80px;height:80px;margin:0 auto 8px;
  border:3px solid var(--gb-br);
  padding:4px;background:var(--gb-dk);
  box-shadow:0 0 0 2px var(--gb-md);
}
.hero-logo{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;}
.hero-title{
  font-family:"Press Start 2P",monospace;
  font-size:20px;color:var(--gb-br);
  letter-spacing:2px;
  text-shadow:2px 2px 0 var(--gb-md);
  margin-bottom:6px;
}
.hero-sub{
  font-family:"Press Start 2P",monospace;
  font-size:7px;color:var(--gb-lt);
  letter-spacing:1px;margin-bottom:8px;
}
.hero-slogan{
  font-size:16px;color:var(--gb-lt);
  padding:4px 8px;
  border-top:1px dashed var(--gb-md);
  border-bottom:1px dashed var(--gb-md);
}

/* 下载按钮（像素风） */
.gba-dl-btns{
  display:flex;flex-direction:row;gap:6px;
  margin:12px 0;
}
.gba-dl{
  display:flex;align-items:center;gap:6px;
  text-decoration:none;
  padding:8px 8px;
  border:3px solid var(--gb-br);
  background:var(--gb-dk);
  color:var(--gb-br);
  font-family:"VT323",monospace;
  box-shadow:4px 4px 0 var(--gb-md);
  transition:transform .05s,box-shadow .05s;
  flex:1;min-width:0;
}
.gba-dl:active{
  transform:translate(3px,3px);
  box-shadow:1px 1px 0 var(--gb-md);
}
.dl-arrow{
  font-size:16px;font-weight:700;
  animation:dlBlink .8s steps(2) infinite;
  flex-shrink:0;
}
@keyframes dlBlink{0%,49%{opacity:1}50%,100%{opacity:.3}}
.dl-text{display:flex;flex-direction:column;flex:1;min-width:0;}
.dl-text b{font-size:15px;line-height:1.1;white-space:nowrap;}
.dl-text small{font-size:11px;color:var(--gb-lt);white-space:nowrap;}
.dl-android{border-color:var(--gb-br);}
.dl-ios{border-color:var(--gb-lt);}

/* 数据条 */
.gba-stats{
  display:flex;align-items:center;justify-content:space-between;
  border:2px solid var(--gb-lt);
  padding:8px 6px;margin:12px 0;
  background:rgba(139,172,15,.08);
}
.stat-cell{
  flex:1;display:flex;flex-direction:column;align-items:center;
}
.stat-cell b{
  font-family:"Press Start 2P",monospace;
  font-size:11px;color:var(--gb-br);
}
.stat-cell small{
  font-size:13px;color:var(--gb-lt);margin-top:2px;
}
.stat-split{
  width:2px;height:28px;background:var(--gb-md);
}

/* 区块标题 */
.gba-section{margin:14px 0;}
.sec-title{
  font-family:"Press Start 2P",monospace;
  font-size:10px;color:var(--gb-br);
  background:var(--gb-md);
  padding:6px 8px;margin-bottom:8px;
  border-left:4px solid var(--gb-br);
}
.gba-text{
  font-size:16px;color:var(--gb-lt);
  margin-bottom:8px;
  text-indent:2em;
  line-height:1.5;
}

/* 截图 */
.gba-shots{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
}
.gba-shots img{
  width:100%;aspect-ratio:1;object-fit:cover;
  border:2px solid var(--gb-md);
  image-rendering:pixelated;
}

/* 特色标签 */
.gba-features{
  display:flex;flex-wrap:wrap;gap:6px;
}
.feat-tag{
  font-family:"Press Start 2P",monospace;
  font-size:8px;color:var(--gb-dk);
  background:var(--gb-lt);
  padding:5px 8px;
  border:2px solid var(--gb-br);
}

/* ===== 资讯面板 ===== */
.gba-banner{
  display:flex;align-items:center;gap:8px;
  border:2px solid var(--gb-br);
  background:var(--gb-md);
  padding:8px 10px;margin-bottom:10px;
  cursor:pointer;
}
.bn-icon{
  width:24px;height:24px;
  background:var(--gb-br);color:var(--gb-dk);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:18px;
  animation:bnBlink .6s steps(2) infinite;
  flex-shrink:0;
}
@keyframes bnBlink{0%,49%{opacity:1}50%,100%{opacity:.4}}
.bn-text{flex:1;display:flex;flex-direction:column;}
.bn-text b{font-size:16px;color:var(--gb-dk);}
.bn-text small{font-size:14px;color:var(--gb-br);}
.bn-arrow{color:var(--gb-dk);font-size:16px;font-weight:700;}

/* 开服表 */
.gba-table{
  border:2px solid var(--gb-lt);
  margin-bottom:10px;
}
.tbl-head{
  display:grid;grid-template-columns:1.3fr 1.5fr .8fr 1.2fr;
  background:var(--gb-md);
  font-family:"Press Start 2P",monospace;
  font-size:7px;color:var(--gb-dk);
  padding:6px 4px;text-align:center;
  border-bottom:2px solid var(--gb-lt);
}
.tbl-row{
  display:grid;grid-template-columns:1.3fr 1.5fr .8fr 1.2fr;
  font-size:14px;color:var(--gb-lt);
  padding:6px 4px;text-align:center;
  border-bottom:1px dashed var(--gb-md);
  align-items:center;
}
.tbl-row:last-child{border-bottom:none;}
.tbl-row .srv-badge{
  background:var(--gb-br);color:var(--gb-dk);
  padding:1px 4px;font-weight:700;font-size:13px;
}
.tbl-row .srv-open{color:var(--gb-br);font-weight:700;}
.tbl-row .srv-soon{color:var(--gb-lt);}

/* 文章 */
.gba-article{
  display:flex;gap:8px;
  border:2px solid var(--gb-md);
  padding:8px;margin-bottom:6px;
  cursor:pointer;
  transition:background .1s;
}
.gba-article:active{background:rgba(139,172,15,.15);}
.art-icon{
  width:32px;height:32px;flex-shrink:0;
  background:var(--gb-lt);color:var(--gb-dk);
  display:flex;align-items:center;justify-content:center;
  font-family:"Press Start 2P",monospace;
  font-size:10px;font-weight:700;
  border:2px solid var(--gb-br);
}
.art-icon.new{background:var(--gb-br);animation:bnBlink .8s steps(2) infinite;}
.art-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.art-body b{
  font-size:15px;color:var(--gb-br);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.art-body small{font-size:12px;color:var(--gb-lt);}

.gba-cta{
  text-align:center;
  border:2px dashed var(--gb-lt);
  padding:8px;margin:10px 0;
  font-size:14px;color:var(--gb-lt);
  cursor:pointer;
}
.gba-cta:active{background:var(--gb-md);}

/* ===== 礼包面板 ===== */
.gba-gift{
  border:3px solid var(--gb-br);
  background:rgba(155,188,15,.1);
  padding:8px;margin-bottom:10px;
  cursor:pointer;
  position:relative;
}
.gba-gift.hot{border-color:var(--gb-br);background:rgba(155,188,15,.18);}
.gift-top{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:6px;
}
.gift-tag{
  font-family:"Press Start 2P",monospace;
  font-size:7px;background:var(--gb-br);color:var(--gb-dk);
  padding:3px 6px;
}
.gift-tag.blue{background:var(--gb-lt);}
.gift-cd{
  font-size:13px;color:var(--gb-lt);
  font-family:"Press Start 2P",monospace;font-size:7px;
}
.gift-code{
  font-family:"Press Start 2P",monospace;
  font-size:14px;color:var(--gb-br);
  background:var(--gb-dk);
  padding:8px;text-align:center;
  border:2px solid var(--gb-md);
  margin-bottom:6px;
  letter-spacing:2px;
}
.gift-desc{font-size:15px;color:var(--gb-lt);margin-bottom:4px;}
.gift-exp{font-size:12px;color:var(--gb-lt);opacity:.8;}

.gift-divider{
  text-align:center;
  font-family:"Press Start 2P",monospace;
  font-size:8px;color:var(--gb-lt);
  margin:12px 0 8px;
  letter-spacing:1px;
}

.gba-gift-line{
  font-size:15px;color:var(--gb-lt);
  padding:6px 8px;margin-bottom:4px;
  border-bottom:1px dashed var(--gb-md);
  cursor:pointer;
  word-break:break-all;
}
.gba-gift-line b{
  color:var(--gb-br);
  font-family:"Press Start 2P",monospace;
  font-size:11px;margin-right:6px;
}
.gba-gift-line:active{background:var(--gb-md);}
.gift-note{
  font-family:"Press Start 2P",monospace;
  font-size:8px;color:var(--gb-br);
  text-align:center;margin:10px 0;
  animation:bnBlink .6s steps(2) infinite;
}

.gba-vip{
  border:2px solid var(--gb-lt);
  padding:10px;font-size:14px;color:var(--gb-lt);
  margin-bottom:8px;
}
.gba-vip > div{margin-bottom:6px;}
.vip-tag{
  display:inline-block;
  background:var(--gb-br);color:var(--gb-dk);
  font-size:12px;padding:1px 6px;margin-right:6px;font-weight:700;
}
.vip-tip{
  text-align:center;margin-top:8px;
  font-size:13px;color:var(--gb-br);
  border-top:1px dashed var(--gb-md);
  padding-top:6px;
}

/* ===== 攻略面板 ===== */
.gba-tools{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  margin-bottom:12px;
}
.tool-cell{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  text-decoration:none;color:var(--gb-lt);
  border:2px solid var(--gb-md);
  padding:8px 4px;
  background:rgba(48,98,48,.3);
}
.tool-cell:active{background:var(--gb-md);}
.tool-ic{
  width:28px;height:28px;
  background:var(--gb-lt);color:var(--gb-dk);
  display:flex;align-items:center;justify-content:center;
  font-family:"Press Start 2P",monospace;
  font-size:10px;font-weight:700;
  border:2px solid var(--gb-br);
  border-radius:50%;
}
.tool-cell small{font-size:12px;color:var(--gb-lt);}

.video-wrap{
  position:relative;width:100%;
  padding-bottom:75%;
  margin:10px 0;
  border:2px solid var(--gb-md);
  overflow:hidden;
}
.video-wrap iframe{
  position:absolute;inset:0;width:100%;height:100%;
  filter:sepia(1) hue-rotate(60deg) saturate(3) grayscale(.5);
  /* 让视频变成绿色调 */
}

/* ===== 社区面板 ===== */
.gba-links{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin-bottom:14px;
}
.gba-link-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  text-decoration:none;
  border:2px solid var(--gb-lt);
  padding:12px 8px;
  background:rgba(139,172,15,.1);
  color:var(--gb-lt);
  cursor:pointer;
}
.gba-link-btn:active{background:var(--gb-md);}
.lb-ic{
  width:36px;height:36px;
  background:var(--gb-br);color:var(--gb-dk);
  display:flex;align-items:center;justify-content:center;
  font-family:"Press Start 2P",monospace;
  font-size:12px;font-weight:700;
  border:2px solid var(--gb-br);
  margin-bottom:2px;
}
.gba-link-btn b{font-size:16px;color:var(--gb-br);}
.gba-link-btn small{font-size:12px;color:var(--gb-lt);}
.gba-copy{
  text-align:center;font-size:13px;color:var(--gb-lt);
  padding:12px;border-top:1px dashed var(--gb-md);
  line-height:1.8;
}
.gba-copy a{text-decoration:none;}

/* ===== 主区域（手机端：屏幕在上，按键在下方绝对定位） ===== */
.gba-main-area{
  position:relative;
  padding-bottom:150px;/* 为下方按键留空间 */
}

/* 左侧控制组容器 - 手机端不定位，让子元素各自绝对定位 */
.gba-left-ctrl{
  position:static;
  z-index:5;
}
/* 十字键 - 手机端绝对定位到左下角 */
.gba-dpad{
  position:absolute;
  bottom:10px;left:8px;
  width:110px;height:110px;
}
/* 右侧控制组（AB键）- 手机端绝对定位到右下角 */
.gba-right-ctrl{
  position:absolute;
  bottom:20px;right:8px;
  z-index:5;
}

/* 十字键各方向按钮 */
.dpad-btn{
  position:absolute;
  background:linear-gradient(180deg,#3a3a5c 0%,#1a1a2e 50%,#0d0d1a 100%);
  border:2px solid #0d0d1a;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.2),
    inset 0 -2px 2px rgba(0,0,0,.5),
    2px 2px 0 rgba(0,0,0,.4);
  cursor:pointer;
  padding:0;
}
.dpad-btn:active{
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.6),
    inset 0 -1px 1px rgba(255,255,255,.1);
  transform:translate(1px,1px);
}
.dpad-up{
  top:0;left:33px;
  width:44px;height:38px;
  border-radius:6px 6px 0 0;
}
.dpad-up::before{
  content:"▲";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  color:#6b6b8c;font-size:10px;
}
.dpad-down{
  bottom:0;left:33px;
  width:44px;height:38px;
  border-radius:0 0 6px 6px;
}
.dpad-down::before{
  content:"▼";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  color:#6b6b8c;font-size:10px;
}
.dpad-left{
  top:33px;left:0;
  width:38px;height:44px;
  border-radius:6px 0 0 6px;
}
.dpad-left::before{
  content:"◀";position:absolute;left:6px;top:50%;transform:translateY(-50%);
  color:#6b6b8c;font-size:10px;
}
.dpad-right{
  top:33px;right:0;
  width:38px;height:44px;
  border-radius:0 6px 6px 0;
}
.dpad-right::before{
  content:"▶";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:#6b6b8c;font-size:10px;
}
.dpad-center{
  top:33px;left:33px;
  width:44px;height:44px;
  background:linear-gradient(180deg,#2a2a42 0%,#151526 100%);
  border:2px solid #0d0d1a;
  box-shadow:inset 0 0 8px rgba(0,0,0,.6);
  border-radius:0;
  cursor:default;
}

/* 中间 SELECT START - 手机端独立绝对定位到屏幕下方中间（十字键和AB键之间） */
.gba-mid-btns{
  position:absolute;
  bottom:78px;
  left:50%;
  transform:translateX(-50%);
  display:flex;gap:10px;
  z-index:5;
}
.gba-ss-btn{
  background:linear-gradient(180deg,#3a2350 0%,#1a0a28 100%);
  border:2px solid #1a0a28;
  border-radius:12px;
  padding:6px 10px;
  font-family:"Press Start 2P",monospace;
  font-size:6px;color:var(--ss-label);
  letter-spacing:1px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),1px 1px 0 rgba(0,0,0,.3);
  writing-mode:horizontal-tb;
}
.gba-ss-btn:active{
  transform:translate(1px,1px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4);
}

/* A/B按钮 */
.gba-ab{
  position:relative;
  width:120px;height:80px;
}
.ab-btn{
  position:absolute;
  width:46px;height:46px;border-radius:50%;
  border:3px solid #5c1a2a;
  cursor:pointer;
  font-family:"Press Start 2P",monospace;
  font-size:13px;font-weight:700;color:#fff;
  text-shadow:1px 1px 2px rgba(0,0,0,.5);
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.3),
    inset 0 3px 0 rgba(255,255,255,.25),
    3px 4px 0 rgba(0,0,0,.4);
  transition:transform .05s,box-shadow .05s;
}
.ab-btn:active{
  transform:translate(2px,3px);
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.3),
    inset 0 2px 4px rgba(0,0,0,.4),
    1px 1px 0 rgba(0,0,0,.4);
}
.ab-a{
  background:radial-gradient(circle at 35% 35%,#e74c3c 0%,#c0392b 50%,#922b21 100%);
  top:0;right:0;
}
.ab-b{
  background:radial-gradient(circle at 35% 35%,#9b59b6 0%,#8e44ad 50%,#6c3483 100%);
  bottom:0;left:10px;
}

/* 扬声器孔（右下） */
.gba-speaker{
  position:absolute;bottom:28px;right:24px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:3px;
  transform:rotate(-25deg);
  width:60px;
}
.gba-speaker span{
  width:6px;height:6px;border-radius:50%;
  background:#2c1640;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}

/* ===== 客服球 ===== */
.gba-svc{
  position:fixed;bottom:16px;right:16px;
  z-index:500;
  width:44px;height:44px;
  background:var(--gb-dk);
  border:3px solid var(--gb-br);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:3px 3px 0 var(--gb-md),0 0 12px rgba(155,188,15,.3);
  text-decoration:none;
  animation:none;
}
.gba-svc,
.gba-svc *{
  animation:none !important;
  -webkit-animation:none !important;
  transition:none !important;
}
.svc-ic{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
}
.svc-ic img{width:22px;height:22px;}
.svc-badge{
  position:absolute;top:-4px;right:-4px;
  width:18px;height:18px;
  background:#e74c3c;color:#fff;
  font-family:"Press Start 2P",monospace;
  font-size:8px;font-weight:700;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--gb-br);
}

/* ===== 弹窗 ===== */
.gba-popup{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.8);
  display:none;
  align-items:center;justify-content:center;
  padding:20px;
}
.gba-popup.show{display:flex;}
.pop-inner{
  position:relative;
  background:var(--gb-dk);
  border:4px solid var(--gb-br);
  padding:20px;
  max-width:300px;width:100%;
  text-align:center;
  box-shadow:8px 8px 0 var(--gb-md);
}
.pop-close{
  position:absolute;top:-12px;right:-12px;
  width:32px;height:32px;
  background:var(--gb-br);color:var(--gb-dk);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;
  text-decoration:none;
  border:3px solid var(--gb-dk);
}
.pop-inner h3{
  font-family:"Press Start 2P",monospace;
  font-size:12px;color:var(--gb-br);
  margin-bottom:12px;
}
.pop-inner img{
  width:100%;max-width:200px;height:auto;
  border:2px solid var(--gb-md);
  margin-bottom:8px;
}
.pop-inner p{
  font-size:14px;color:var(--gb-lt);margin:4px 0;
}
.pop-tip{color:var(--gb-br) !important;}

/* ===== 桌面端：横版GBA经典布局（左十字键 | 中屏幕 | 右AB键，SELECT/START在左偏下上下两排平放靠屏幕） ===== */
@media(min-width:900px){
  body{
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:20px;
  }
  .gba-device{
    max-width:900px;
    width:100%;
  }
  .gba-body{
    border-radius:16px 16px 16px 80px / 16px 16px 16px 100px;
    padding:22px 55px 50px 24px;
    display:flex;
    flex-direction:column;
    min-height:500px;
    position:relative;
  }
  .gba-topbar{margin-bottom:14px;padding:0 8px;}

  /* 主区域三栏网格 */
  .gba-main-area{
    display:grid;
    grid-template-columns:140px 1fr 110px;
    align-items:stretch;
    gap:0;
    padding-bottom:0;
    margin-top:0;
    min-height:390px;
  }

  /* 左侧：十字键在上，SELECT/START在偏下平行排列 */
  .gba-left-ctrl{
    grid-column:1;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding-top:30px;
  }
  .gba-dpad{
    position:relative;
    width:92px;height:92px;
    margin:0 auto;
  }
  .gba-dpad .dpad-up{top:0;left:28px;width:36px;height:32px;border-radius:5px 5px 0 0;}
  .gba-dpad .dpad-up::before{font-size:9px;top:5px;}
  .gba-dpad .dpad-down{bottom:0;left:28px;width:36px;height:32px;border-radius:0 0 5px 5px;}
  .gba-dpad .dpad-down::before{font-size:9px;bottom:5px;}
  .gba-dpad .dpad-left{top:28px;left:0;width:32px;height:36px;border-radius:5px 0 0 5px;}
  .gba-dpad .dpad-left::before{font-size:9px;left:5px;}
  .gba-dpad .dpad-right{top:28px;right:0;width:32px;height:36px;border-radius:0 5px 5px 0;}
  .gba-dpad .dpad-right::before{font-size:9px;right:5px;}
  .gba-dpad .dpad-center{top:28px;left:28px;width:36px;height:36px;}

  /* SELECT/START在左侧靠近屏幕，上下两排水平平放 */
  .gba-mid-btns{
    position:absolute;
    bottom:60px;
    left:auto;
    right:0;
    transform:none;
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:0;
    align-items:center;
  }
  .gba-mid-btns .gba-ss-btn{
    transform:none;
    border-radius:20px;
    padding:5px 14px;
    font-size:7px;
    min-width:56px;
    writing-mode:horizontal-tb;
    letter-spacing:1px;
  }

  /* 中间：屏幕 */
  .gba-screen-frame{
    grid-column:2;
    margin:0 16px;
    border-radius:8px 8px 8px 36px;
    padding:14px 14px 24px 14px;
    display:flex;
    flex-direction:column;
    position:relative;
  }
  .gba-screen-frame::before{
    content:"COLOR";
    position:absolute;
    bottom:8px;
    left:50%;
    transform:translateX(-50%);
    font-family:"Press Start 2P",monospace;
    font-size:6px;
    color:#8e74a8;
    letter-spacing:2px;
  }
  .gba-screen{
    aspect-ratio:3/2;
    min-height:0;
    max-height:380px;
    flex:1;
  }

  /* 右侧：AB键，GBA经典斜向错位排列（A在右上，B在左下） */
  .gba-right-ctrl{
    grid-column:3;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding-top:30px;
  }
  .gba-ab{
    position:relative;
    transform:rotate(-25deg);
    margin:0;
    width:80px;
    height:70px;
  }
  .ab-btn{
    width:36px;
    height:36px;
    font-size:11px;
  }
  .ab-a{
    top:0;
    right:0;
    background:radial-gradient(circle at 35% 35%,#e74c3c 0%,#c0392b 50%,#922b21 100%);
  }
  .ab-b{
    bottom:0;
    left:0;
    background:radial-gradient(circle at 35% 35%,#9b59b6 0%,#8e44ad 50%,#6c3483 100%);
  }

  /* 扬声器在机身底部右侧 */
  .gba-speaker{
    position:absolute;
    bottom:28px;
    right:60px;
    left:auto;
    transform:rotate(-25deg);
    gap:4px;
    width:auto;
    display:grid;
    grid-template-columns:repeat(6,1fr);
  }
  .gba-speaker span{
    width:5px;
    height:5px;
    border-radius:50%;
  }

  /* 肩键 */
  .gba-shoulder{
    width:140px;
    height:22px;
    border-radius:12px 12px 0 0;
    line-height:22px;
    font-size:9px;
  }
  .gba-l{left:40px;}
  .gba-r{right:40px;}

  /* POWER灯位置 */
  .gba-power-dot{width:8px;height:8px;}
  .gba-power-label{font-size:7px;}
  .gba-brand{font-size:7px;}
}

/* 小屏手机适配 */
@media(max-width:360px){
  .gba-body{padding:14px 12px 20px 12px;}
  .gba-screen-frame{padding:10px 10px 22px 10px;}
  .gba-screen{min-height:260px;aspect-ratio:10/14;}
  .gba-dpad{width:95px;height:95px;}
  .dpad-up,.dpad-down{width:37px;height:32px;left:29px;}
  .dpad-left,.dpad-right{width:32px;height:37px;top:29px;}
  .dpad-center{width:37px;height:37px;top:29px;left:29px;}
  .ab-btn{width:42px;height:42px;font-size:12px;}
  .ab-a{top:4px;}
  .ab-b{bottom:4px;}
  .gba-ab{width:100px;height:80px;}
  .gba-stats .stat-cell b{font-size:9px;}
  .hero-title{font-size:16px;}
}

/* 极高屏幕（减少屏幕高度） */
@media(max-height:700px) and (max-width:899px){
  .gba-screen{min-height:220px;max-height:48vh;}
  .gba-dpad{width:90px;height:90px;}
  .dpad-up,.dpad-down{width:35px;height:30px;left:27px;}
  .dpad-left,.dpad-right{width:30px;height:35px;top:27px;}
  .dpad-center{width:35px;height:35px;top:27px;left:27px;}
  .ab-btn{width:40px;height:40px;}
}