/* zjxjlyx.cn — light retro handheld */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --gb:#8bac0f;--gb2:#9bbc0f;--gb-d:#306230;--gb-dd:#0f380f;
  --cream:#f6f3ea;--paper:#eef6dc;--bg:#faf8f2;--bg2:#fff;
  --ink:#1a2e1a;--mute:#5a6b52;--line:#d4dfc4;
  --shadow:0 8px 28px rgba(48,98,48,.12);
}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans SC",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.shell{max-width:1140px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* nav */
.nav-wrap{
  position:fixed;top:0;left:0;right:0;z-index:500;
  background:var(--bg2);border-bottom:4px solid var(--gb-d);
  box-shadow:0 4px 0 var(--gb),0 8px 24px rgba(48,98,48,.08);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1140px;margin:0 auto;padding:10px clamp(16px,4vw,40px);
}
.nav-brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:.95rem}
.nav-logo{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;background:var(--paper);
  border:3px solid var(--gb-d);box-shadow:3px 3px 0 var(--gb);
}
.nav-logo img{width:30px;height:30px;image-rendering:auto}
.nav-links{display:flex;align-items:center;gap:clamp(4px,1.5vw,8px)}
.nav-links a{
  font-size:.82rem;color:var(--mute);font-weight:700;padding:8px 14px;
  border:2px solid transparent;transition:.2s;
}
.nav-links a:not(.nav-dl):hover{color:var(--ink);border-color:var(--line);background:var(--paper)}
.nav-dl{
  background:var(--gb);color:var(--gb-dd);padding:10px 20px;font-weight:900;font-size:.82rem;
  border:3px solid var(--gb-dd);box-shadow:4px 4px 0 var(--gb-d);margin-left:8px;transition:.15s;
}
.nav-dl:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--gb-d)}
.nav-pixel{height:6px;background:repeating-linear-gradient(90deg,var(--gb) 0,var(--gb) 8px,var(--gb-d) 8px,var(--gb-d) 16px)}

/* hero */
.hero{
  position:relative;padding:calc(68px + 72px) 0 64px;
  background:linear-gradient(180deg,var(--cream) 0%,var(--bg) 100%);overflow:hidden;
}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(139,172,15,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(139,172,15,.05) 1px,transparent 1px);
  background-size:24px 24px;
}
.hero-dot{
  position:absolute;right:8%;top:18%;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,172,15,.15),transparent 70%);
}
.hero-layout{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,56px);align-items:center;
}
.save-tag{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.14em;
  color:var(--gb-d);background:var(--paper);padding:6px 14px;margin-bottom:18px;
  border:2px solid var(--gb-d);box-shadow:3px 3px 0 var(--gb);
}
.hero h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:900;line-height:1.08;margin-bottom:18px}
.hero h1 .line2{
  display:block;font-size:.38em;font-weight:600;color:var(--mute);margin-top:10px;line-height:1.5;
}
.hero-lead{font-size:1.05rem;color:var(--mute);line-height:1.8;margin-bottom:28px;max-width:480px}
.btn-pixel{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gb);color:var(--gb-dd);padding:14px 32px;
  font-weight:900;font-size:.95rem;border:3px solid var(--gb-dd);
  box-shadow:5px 5px 0 var(--gb-d);transition:.15s;
}
.btn-pixel:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--gb-d)}
.hero-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.hero-chips span{
  font-size:.82rem;font-weight:700;padding:6px 16px;color:var(--gb-d);
  background:var(--bg2);border:2px solid var(--line);
  box-shadow:2px 2px 0 var(--gb);
}

/* gameboy unit */
.gb-unit{display:flex;justify-content:center}
.gb-case{
  position:relative;width:min(100%,420px);
  background:linear-gradient(145deg,#c8b8e8,#a898d0);
  border-radius:20px 20px 48px 20px;padding:22px 22px 48px;
  border:4px solid #8878b8;box-shadow:8px 12px 0 #6a5a98,var(--shadow);
}
.gb-screen{
  position:relative;background:var(--gb-d);border:5px solid var(--gb-dd);
  border-radius:6px;padding:14px;overflow:hidden;
  box-shadow:inset 0 0 24px rgba(0,0,0,.35);
}
.gb-screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 1px,transparent 1px,transparent 3px);
}
.lcd-line{position:absolute;left:14px;right:14px;height:2px;background:rgba(155,188,15,.25);z-index:2}
.lcd-line--1{top:38%}
.lcd-line--2{top:68%}
.lcd-shot{position:absolute;overflow:hidden;border:2px solid var(--gb2);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.lcd-shot img{width:100%;height:100%;object-fit:cover}
.lcd-main{width:78%;aspect-ratio:16/10;top:10%;left:11%;z-index:3}
.lcd-sub{width:34%;aspect-ratio:4/3;z-index:4}
.lcd-sub-a{bottom:8%;left:6%;transform:rotate(-6deg)}
.lcd-sub-b{bottom:10%;right:6%;transform:rotate(5deg)}
.lcd-ball{
  position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;z-index:5;
  background:linear-gradient(180deg,#e3350d 46%,#fff 46%,#fff 54%,#2c72b8 54%);
  border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.gb-screen{height:clamp(220px,32vw,280px)}
.gb-dpad{
  position:absolute;left:28px;bottom:18px;width:52px;height:52px;
  background:var(--gb-dd);border-radius:6px;opacity:.85;
  box-shadow:inset 0 0 0 3px #2a1a4a;
}
.gb-dpad span{position:absolute;background:#4a3a6a}
.gb-dpad span:nth-child(1){width:16px;height:4px;top:50%;left:50%;transform:translate(-50%,-50%)}
.gb-dpad span:nth-child(2){width:4px;height:16px;top:50%;left:50%;transform:translate(-50%,-50%)}
.gb-dpad span:nth-child(3){width:8px;height:8px;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);background:#6a5a8a}
.gb-btns{position:absolute;right:32px;bottom:22px;display:flex;gap:16px}
.gb-btns i{
  display:block;width:22px;height:22px;border-radius:50%;
  background:#c87088;border:3px solid #984860;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);
}
.gb-btns i:last-child{transform:translateY(-6px)}

/* slash bands */
.slash-band{height:clamp(40px,5vw,56px);position:relative;z-index:3;margin-top:-1px}
.slash-band--in{background:var(--bg2);clip-path:polygon(0 0,100% 0,100% 28%,0 100%)}
.slash-band--flip{background:var(--bg);clip-path:polygon(0 28%,100% 0,100% 100%,0 100%)}
.slash-band--y{background:linear-gradient(90deg,var(--paper),#e8f5c8,var(--paper));clip-path:polygon(0 0,100% 0,100% 35%,0 100%)}

.slash-sec{position:relative;padding:clamp(64px,9vh,96px) 0;background:var(--bg2)}
.slash-sec--alt{background:var(--bg)}
.slash-sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(125deg,transparent,transparent 32px,rgba(139,172,15,.04) 32px,rgba(139,172,15,.04) 33px);
}

.sec-hd{margin-bottom:40px;position:relative;z-index:1}
.sec-hd span{font-size:.72rem;font-weight:800;color:var(--gb-d);letter-spacing:.14em}
.sec-hd h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:900;margin-top:6px}
.sec-hd p{color:var(--mute);font-size:.88rem;margin-top:8px}
.sec-hd--bar{
  background:var(--gb);padding:18px 24px;border:3px solid var(--gb-dd);
  box-shadow:5px 5px 0 var(--gb-d);max-width:420px;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 100%,0 100%);
}

/* chapters */
.ch-track{display:grid;gap:20px;position:relative;z-index:1}
.ch-card{
  display:grid;grid-template-columns:64px 1fr 200px;gap:20px;align-items:center;
  background:var(--bg2);border:2px solid var(--line);padding:22px;
  box-shadow:var(--shadow);clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  border-left:5px solid var(--gb);
}
.ch-card--flip{grid-template-columns:200px 1fr 64px;border-left:none;border-right:5px solid var(--gb-d)}
.ch-card--flip .ch-no{order:3;text-align:right}
.ch-card--flip .ch-body{order:2}
.ch-card--flip .ch-img{order:1}
.ch-no{font-size:2rem;font-weight:900;color:var(--gb);line-height:1;opacity:.7}
.ch-body h3{font-size:1rem;font-weight:800;margin-bottom:8px}
.ch-body p{font-size:.86rem;color:var(--mute);line-height:1.65}
.ch-img{overflow:hidden;border:2px solid var(--gb-d);box-shadow:3px 3px 0 var(--gb)}
.ch-img img{aspect-ratio:16/10;object-fit:cover;width:100%}

/* gameplay */
.pix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative;z-index:1}
.pix-card{
  background:var(--bg2);border:2px solid var(--line);padding:22px;
  box-shadow:3px 3px 0 var(--gb);transition:.25s;
  clip-path:polygon(0 8px,8px 0,100% 0,100% 100%,0 100%);
}
.pix-card:hover{transform:translateY(-4px);box-shadow:5px 8px 0 var(--gb-d)}
.pix-ico{
  display:inline-block;font-size:.7rem;font-weight:900;color:#fff;background:var(--gb-d);
  padding:4px 10px;margin-bottom:12px;border:2px solid var(--gb-dd);
}
.pix-card h3{font-size:.92rem;font-weight:800;margin-bottom:8px}
.pix-card p{font-size:.8rem;color:var(--mute);line-height:1.55}

.type-break{
  padding:clamp(56px,8vh,80px) 0;text-align:center;position:relative;z-index:1;
  background:linear-gradient(135deg,var(--paper),var(--bg2),var(--cream));
}
.type-break h2{font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:900}
.type-break p{color:var(--mute);font-size:.9rem;margin-top:8px}

/* voices */
.voice-col{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;position:relative;z-index:1}
.voice-card{
  background:var(--bg2);border:2px solid var(--line);padding:22px;
  box-shadow:var(--shadow);border-left:5px solid var(--gb-d);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
}
.voice-card:nth-child(even){border-left-color:var(--gb)}
.voice-time{display:block;font-size:.68rem;color:#8a9a82;margin-bottom:10px;font-variant-numeric:tabular-nums}
.voice-card p{font-size:.86rem;color:var(--mute);line-height:1.7;margin-bottom:14px}
.voice-card .who{display:flex;align-items:center;gap:10px}
.voice-card .av{
  width:32px;height:32px;background:var(--gb-d);color:var(--gb2);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.72rem;
  border:2px solid var(--gb-dd);
}
.voice-card .name{font-weight:700;font-size:.82rem}
.voice-card .meta{font-size:.7rem;color:#8a9a82}

/* download */
.dl-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;position:relative;z-index:1}
.dl-left .logo-sm{width:56px;height:56px;border:2px solid var(--gb-d);box-shadow:3px 3px 0 var(--gb);margin-bottom:16px}
.dl-left h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:900;margin-bottom:10px}
.dl-left .desc{color:var(--mute);font-size:.92rem;line-height:1.75;margin-bottom:20px}
.dl-list{list-style:none;display:grid;gap:10px}
.dl-list li{display:flex;align-items:flex-start;gap:10px;font-size:.84rem;color:var(--mute)}
.dl-list li::before{content:"▸";color:var(--gb-d);font-weight:900;flex-shrink:0}
.dl-right{
  background:var(--bg2);border:3px solid var(--gb-d);padding:clamp(28px,4vw,40px);
  text-align:center;box-shadow:6px 8px 0 var(--gb),var(--shadow);
  clip-path:polygon(6% 0,100% 0,100% 100%,0 92%);
}
.dl-right::before{
  content:"";display:block;height:5px;margin:-28px -28px 24px;
  background:repeating-linear-gradient(90deg,var(--gb-d),var(--gb-d) 12px,var(--gb) 12px,var(--gb) 24px);
}
.dl-right .game-name{font-size:1.1rem;font-weight:900;margin-bottom:4px}
.dl-right .corp{font-size:.75rem;color:var(--mute);margin-bottom:24px}
.dl-btns{display:grid;gap:12px}
.btn-dl{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 24px;font-weight:800;font-size:.95rem;transition:.2s;border:3px solid;
}
.btn-dl svg{width:22px;height:22px;flex-shrink:0}
.btn-android{background:var(--gb-dd);color:var(--gb2);border-color:var(--gb-dd);box-shadow:4px 4px 0 var(--gb-d)}
.btn-android:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--gb-d)}
.btn-ios{background:var(--bg2);color:var(--ink);border-color:var(--line);box-shadow:4px 4px 0 var(--gb)}
.btn-ios:hover{border-color:var(--gb-d);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--gb-d)}
.dl-note{margin-top:16px;font-size:.72rem;color:#8a9a82}

.codes{padding-top:clamp(48px,8vh,72px)}
.codes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px;position:relative;z-index:1}
.code-card{background:var(--bg2);border:2px solid var(--line);padding:16px;box-shadow:3px 3px 0 var(--gb);clip-path:polygon(0 8px,8px 0,100% 0,100% 100%,0 100%)}
.code-copy{display:block;width:100%;font-family:var(--mono);font-size:1rem;font-weight:900;padding:10px;background:var(--gb-dd);color:var(--gb2);border:3px solid var(--gb-d);cursor:pointer;box-shadow:3px 3px 0 var(--gb-d);margin-bottom:10px;transition:.15s}
.code-copy:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--gb-d)}.code-copy.copied{background:var(--r);color:#fff;border-color:#9a2408}
.code-card p{font-size:.8rem;color:var(--mute);line-height:1.55}
.code-vip{background:var(--paper);border:3px solid var(--gb-d);padding:20px;box-shadow:4px 4px 0 var(--gb);position:relative;z-index:1}
.code-vip-tag{display:inline-block;font-size:.68rem;font-weight:900;color:var(--gb-dd);background:var(--gb);padding:4px 10px;border:2px solid var(--gb-d);margin-bottom:10px}
.code-vip h3{font-size:1rem;font-weight:900;margin-bottom:8px}
.code-vip p{font-size:.86rem;color:var(--mute);line-height:1.7;margin-bottom:14px}
.code-vip-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 24px;background:var(--gb-dd);color:var(--gb2);font-weight:900;font-size:.88rem;
  border:3px solid var(--gb-d);box-shadow:4px 4px 0 var(--gb-d);transition:.15s;
}
.code-vip-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--gb-d)}

.ft{padding:32px 0;text-align:center;font-size:.72rem;color:var(--mute);line-height:1.9;background:var(--paper);border-top:3px solid var(--gb)}
.ft a{color:var(--gb-d);font-weight:600}

[data-r]{opacity:0;transform:translateY(20px);transition:.65s ease}
[data-r].on{opacity:1;transform:none}

@media(max-width:900px){
  .hero-layout,.dl-split,.pix-grid,.voice-col,.ch-card,.ch-card--flip{grid-template-columns:1fr}
  .hero{padding:calc(68px + 48px) 0 48px}
  .ch-card--flip .ch-no,.ch-card--flip .ch-body,.ch-card--flip .ch-img{order:unset}
  .ch-card--flip{border-right:none;border-left:5px solid var(--gb-d)}
  .ch-img{max-width:100%}
  .gb-case{width:100%}
  .nav-links a:not(.nav-dl){display:none}
  .nav-dl{margin-left:0;padding:9px 16px;font-size:.78rem}
  .dl-right::before{margin:-20px -20px 20px}
  .codes-grid{grid-template-columns:1fr}
  .code-vip-btn{width:100%;padding:12px 16px;font-size:.82rem}
}