/* JMComic网页版 - 二次元蓝紫渐变·像素复古街机风格 */
:root{
  --arcade-blue:#6C5CE7;
  --arcade-purple:#A29BFE;
  --arcade-yellow:#FDCB6E;
  --arcade-pink:#FF7675;
  --arcade-deep:#2D3436;
  --arcade-darker:#1A1A2E;
  --arcade-deep-purple:#16213E;
  --arcade-neon-cyan:#00F5FF;
  --arcade-neon-green:#55EFC4;
  --arcade-cream:#DFE6E9;
  --font-pixel:'Press Start 2P','Pixel Emulator','VT323','Courier New',monospace;
  --pixel-shadow:4px 4px 0 rgba(108,92,231,0.5);
  --neon-glow:0 0 10px var(--arcade-purple),0 0 20px var(--arcade-blue),0 0 30px rgba(108,92,231,0.6);
  --pixel-border:4px solid var(--arcade-purple);
}
*{box-sizing:border-box;margin:0;padding:0;image-rendering:pixelated;image-rendering:-moz-crisp-edges}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-pixel);
  background:var(--arcade-darker);
  color:var(--arcade-cream);
  min-height:100vh;line-height:1.8;
  position:relative;overflow-x:hidden;
  font-size:12px;
}
/* CRT扫描线效果 */
body::before{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.08) 0px,
    rgba(0,0,0,0.08) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity:0.5;
}
/* CRT轻微闪烁+暗角 */
body::after{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:
    radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,0.45) 100%),
    radial-gradient(circle at 50% 50%,rgba(108,92,231,0.05) 0%,transparent 70%);
  animation:crtFlicker 8s infinite;
}
@keyframes crtFlicker{
  0%,100%{opacity:1}
  48%{opacity:0.97}
  50%{opacity:1}
  52%{opacity:0.96}
}
/* 深底渐变背景 */
.bg-layer{
  position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(ellipse at 20% 15%,rgba(108,92,231,0.22) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 85%,rgba(162,155,254,0.2) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 50%,rgba(255,118,117,0.08) 0%,transparent 60%),
    linear-gradient(180deg,var(--arcade-darker) 0%,var(--arcade-deep-purple) 40%,var(--arcade-deep) 100%);
}
/* 像素网格背景 */
.pixel-grid{
  position:fixed;inset:0;z-index:-2;opacity:0.12;
  background-image:
    linear-gradient(var(--arcade-purple) 1px,transparent 1px),
    linear-gradient(90deg,var(--arcade-blue) 1px,transparent 1px);
  background-size:24px 24px;
}
.container{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* ========== 漂浮像素元素 ========== */
.pixel-star{
  position:fixed;width:12px;height:12px;z-index:0;pointer-events:none;
  background:var(--arcade-yellow);
  box-shadow:
    0 -4px 0 var(--arcade-yellow),
    0 4px 0 var(--arcade-yellow),
    -4px 0 0 var(--arcade-yellow),
    4px 0 0 var(--arcade-yellow),
    0 0 12px rgba(253,203,110,0.8);
  animation:pixelFloat linear infinite;
  opacity:0.85;
}
.pixel-star.s2{background:var(--arcade-pink);box-shadow:0 -4px 0 var(--arcade-pink),0 4px 0 var(--arcade-pink),-4px 0 0 var(--arcade-pink),4px 0 0 var(--arcade-pink),0 0 12px rgba(255,118,117,0.7)}
.pixel-star.s3{background:var(--arcade-neon-cyan);box-shadow:0 -4px 0 var(--arcade-neon-cyan),0 4px 0 var(--arcade-neon-cyan),-4px 0 0 var(--arcade-neon-cyan),4px 0 0 var(--arcade-neon-cyan),0 0 12px rgba(0,245,255,0.7)}
.pixel-heart{
  position:fixed;width:8px;height:8px;z-index:0;pointer-events:none;
  background:var(--arcade-pink);
  box-shadow:
    -8px 0 0 var(--arcade-pink),8px 0 0 var(--arcade-pink),
    -16px 8px 0 var(--arcade-pink),-8px 8px 0 var(--arcade-pink),0 8px 0 var(--arcade-pink),8px 8px 0 var(--arcade-pink),16px 8px 0 var(--arcade-pink),
    -8px 16px 0 var(--arcade-pink),0 16px 0 var(--arcade-pink),8px 16px 0 var(--arcade-pink),
    0 24px 0 var(--arcade-pink),
    0 0 16px rgba(255,118,117,0.8);
  animation:pixelFloat 14s linear infinite;
  opacity:0.75;
}
.pixel-coin{
  position:fixed;width:16px;height:16px;z-index:0;pointer-events:none;
  background:var(--arcade-yellow);border-radius:50%;
  box-shadow:
    inset 0 0 0 4px rgba(253,203,110,0.6),
    0 0 16px rgba(253,203,110,0.9),
    0 4px 0 rgba(200,140,40,0.8);
  animation:coinSpin 3s linear infinite,pixelFloat 18s linear infinite;
  opacity:0.8;
}
@keyframes pixelFloat{
  0%{transform:translateY(-50px) translateX(0) rotate(0);opacity:0}
  10%{opacity:0.85}
  90%{opacity:0.85}
  100%{transform:translateY(110vh) translateX(40px) rotate(360deg);opacity:0}
}
@keyframes coinSpin{
  0%{transform:scaleX(1)}
  25%{transform:scaleX(0.2)}
  50%{transform:scaleX(1)}
  75%{transform:scaleX(0.2)}
  100%{transform:scaleX(1)}
}

/* ========== 像素边框组件 ========== */
.pixel-box{
  position:relative;
  border:4px solid var(--arcade-purple);
  background:linear-gradient(180deg,rgba(26,26,46,0.92),rgba(22,33,62,0.88));
  box-shadow:
    0 0 0 4px var(--arcade-darker),
    0 0 0 8px var(--arcade-blue),
    8px 8px 0 rgba(0,0,0,0.4),
    0 0 30px rgba(108,92,231,0.3);
}
.pixel-box::before,.pixel-box::after{
  content:'';position:absolute;width:16px;height:16px;background:var(--arcade-yellow);
  box-shadow:0 0 12px rgba(253,203,110,0.9);
}
.pixel-box::before{top:-8px;left:-8px}
.pixel-box::after{bottom:-8px;right:-8px}

/* ========== Header ========== */
.jm-header{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(180deg,rgba(26,26,46,0.97) 0%,rgba(22,33,62,0.94) 100%);
  border-bottom:4px solid var(--arcade-blue);
  box-shadow:0 4px 0 var(--arcade-purple),0 8px 20px rgba(0,0,0,0.5);
  backdrop-filter:blur(8px);
}
.jm-header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}

/* 像素精灵球Logo */
.jm-logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.jm-pokeball{
  width:56px;height:56px;position:relative;flex-shrink:0;
  animation:pokeBob 2.4s ease-in-out infinite;
}
@keyframes pokeBob{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-4px) rotate(4deg)}
}
.jm-pokeball::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:
    linear-gradient(180deg,var(--arcade-pink) 0%,var(--arcade-pink) 48%,var(--arcade-cream) 48%,var(--arcade-cream) 52%,var(--arcade-deep) 52%,var(--arcade-deep) 100%);
  border:4px solid var(--arcade-deep);
  box-shadow:
    inset 6px -6px 0 rgba(0,0,0,0.2),
    inset -4px 4px 0 rgba(255,255,255,0.2),
    0 0 20px rgba(255,118,117,0.5);
}
.jm-pokeball::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:20px;height:20px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%,#fff,var(--arcade-cream) 60%,#b0b0b0);
  border:4px solid var(--arcade-deep);
  box-shadow:0 0 0 2px var(--arcade-cream);
}
.jm-pokeball .jm-letters{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:2;font-family:var(--font-pixel);font-weight:900;
  font-size:9px;color:var(--arcade-blue);
  text-shadow:1px 1px 0 var(--arcade-yellow),-1px -1px 0 var(--arcade-purple);
  letter-spacing:-1px;
}
.jm-logo-text{display:flex;flex-direction:column;gap:2px}
.jm-brand{
  font-family:var(--font-pixel);font-size:18px;font-weight:900;
  background:linear-gradient(180deg,var(--arcade-yellow) 0%,var(--arcade-pink) 50%,var(--arcade-purple) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
  letter-spacing:1px;
  filter:drop-shadow(2px 2px 0 var(--arcade-blue));
}
.jm-tagline{
  font-family:var(--font-pixel);font-size:8px;color:var(--arcade-neon-cyan);
  letter-spacing:2px;
  animation:taglineGlow 2s ease-in-out infinite alternate;
}
@keyframes taglineGlow{
  from{text-shadow:0 0 4px var(--arcade-neon-cyan)}
  to{text-shadow:0 0 12px var(--arcade-neon-cyan),0 0 20px rgba(0,245,255,0.5)}
}
.jm-user-btns{display:flex;gap:10px;align-items:center}

/* 街机摇杆+按键装饰 */
.arcade-deco{
  display:flex;gap:8px;align-items:center;margin-right:10px;
}
.arcade-joystick{
  width:28px;height:28px;position:relative;
  animation:joystickWiggle 3s ease-in-out infinite;
}
@keyframes joystickWiggle{
  0%,100%{transform:rotate(-10deg)}
  50%{transform:rotate(10deg)}
}
.arcade-joystick::before{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:20px;height:10px;border-radius:4px;background:var(--arcade-deep);
  border:2px solid var(--arcade-purple);
}
.arcade-joystick::after{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:10px;height:18px;border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--arcade-neon-cyan),var(--arcade-blue));
  border:2px solid var(--arcade-deep);
  box-shadow:0 0 10px rgba(0,245,255,0.6);
}
.arcade-btns{display:flex;gap:4px}
.arcade-btn{
  width:14px;height:14px;border-radius:50%;border:2px solid var(--arcade-deep);
  box-shadow:0 2px 0 rgba(0,0,0,0.5),inset 1px 1px 0 rgba(255,255,255,0.4);
  animation:btnPress 2s ease-in-out infinite;
}
.arcade-btn.r{background:var(--arcade-pink);animation-delay:0s}
.arcade-btn.y{background:var(--arcade-yellow);animation-delay:0.3s}
.arcade-btn.g{background:var(--arcade-neon-green);animation-delay:0.6s}
.arcade-btn.b{background:var(--arcade-blue);animation-delay:0.9s}
@keyframes btnPress{
  0%,100%{transform:translateY(0);box-shadow:0 2px 0 rgba(0,0,0,0.5),inset 1px 1px 0 rgba(255,255,255,0.4)}
  40%{transform:translateY(2px);box-shadow:0 0 0 rgba(0,0,0,0.5),inset 1px 1px 0 rgba(255,255,255,0.4)}
  50%{transform:translateY(0);box-shadow:0 2px 0 rgba(0,0,0,0.5),inset 1px 1px 0 rgba(255,255,255,0.4)}
}
.jm-btn-login,.jm-btn-vip{
  padding:10px 18px;border:none;cursor:pointer;
  font-family:var(--font-pixel);font-size:10px;font-weight:700;
  text-decoration:none;letter-spacing:1px;
  transition:all .15s;
  position:relative;
}
.jm-btn-login{
  color:var(--arcade-yellow);
  background:var(--arcade-darker);
  border:3px solid var(--arcade-purple);
  box-shadow:4px 4px 0 var(--arcade-blue);
}
.jm-btn-login:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--arcade-blue);
  color:var(--arcade-neon-cyan);
  border-color:var(--arcade-neon-cyan);
}
.jm-btn-vip{
  color:var(--arcade-deep);
  background:linear-gradient(180deg,var(--arcade-yellow) 0%,#F39C12 100%);
  border:3px solid var(--arcade-pink);
  box-shadow:4px 4px 0 var(--arcade-purple),0 0 16px rgba(253,203,110,0.5);
  animation:vipPulse 1.5s ease-in-out infinite;
}
@keyframes vipPulse{
  0%,100%{box-shadow:4px 4px 0 var(--arcade-purple),0 0 16px rgba(253,203,110,0.5)}
  50%{box-shadow:4px 4px 0 var(--arcade-purple),0 0 28px rgba(253,203,110,0.9)}
}
.jm-btn-vip:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--arcade-purple)}

/* ========== Nav ========== */
.jm-nav{
  background:linear-gradient(90deg,
    rgba(108,92,231,0.3) 0%,
    rgba(162,155,254,0.45) 50%,
    rgba(108,92,231,0.3) 100%);
  border-top:3px dashed var(--arcade-purple);
  border-bottom:3px dashed var(--arcade-purple);
  position:relative;
}
.jm-nav::before,.jm-nav::after{
  content:'▣';position:absolute;top:50%;transform:translateY(-50%);
  color:var(--arcade-yellow);font-size:14px;
  animation:blink 1s step-end infinite;
}
.jm-nav::before{left:2%}
.jm-nav::after{right:2%}
@keyframes blink{50%{opacity:0.2}}
.jm-nav ul{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:0}
.jm-nav a{
  display:block;padding:14px 22px;color:var(--arcade-cream);
  text-decoration:none;font-family:var(--font-pixel);font-size:10px;
  font-weight:700;letter-spacing:1px;
  transition:all .15s;position:relative;
}
.jm-nav a::before{
  content:'▶';position:absolute;left:4px;top:50%;transform:translateY(-50%) scale(0);
  color:var(--arcade-yellow);font-size:8px;transition:all .15s;opacity:0;
}
.jm-nav a.active,.jm-nav a:hover{
  color:var(--arcade-yellow);
  background:rgba(26,26,46,0.5);
  text-shadow:0 0 10px var(--arcade-yellow);
}
.jm-nav a.active::before,.jm-nav a:hover::before{opacity:1;left:8px;transform:translateY(-50%) scale(1)}
.jm-nav a.active::after{
  content:'';position:absolute;bottom:0;left:15%;right:15%;height:3px;
  background:linear-gradient(90deg,transparent,var(--arcade-yellow),var(--arcade-pink),var(--arcade-yellow),transparent);
}

/* ========== Hero ========== */
.jm-hero{
  padding:80px 0 60px;text-align:center;position:relative;overflow:hidden;
}
.jm-hero-content{position:relative;z-index:2}
.jm-hero-badge{
  display:inline-block;padding:8px 22px;margin-bottom:26px;
  background:var(--arcade-darker);
  border:3px solid var(--arcade-neon-green);
  color:var(--arcade-neon-green);
  font-family:var(--font-pixel);font-size:9px;letter-spacing:2px;font-weight:700;
  position:relative;
  box-shadow:0 0 20px rgba(85,239,196,0.4),4px 4px 0 var(--arcade-blue);
  animation:badgeSkew 4s ease-in-out infinite;
}
@keyframes badgeSkew{
  0%,100%{transform:skewX(0)}
  25%{transform:skewX(-2deg)}
  75%{transform:skewX(2deg)}
}
.jm-hero-badge::before,.jm-hero-badge::after{
  content:'★';position:absolute;top:50%;transform:translateY(-50%);
  color:var(--arcade-yellow);font-size:10px;
}
.jm-hero-badge::before{left:8px}
.jm-hero-badge::after{right:8px}

/* 血条/能量条UI */
.hp-bars{
  display:flex;justify-content:center;gap:20px;margin-bottom:22px;flex-wrap:wrap;
}
.hp-bar{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-pixel);font-size:8px;color:var(--arcade-cream);
}
.hp-bar .label{color:var(--arcade-yellow)}
.hp-track{
  width:120px;height:14px;background:var(--arcade-deep);
  border:3px solid var(--arcade-purple);
  position:relative;overflow:hidden;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.5);
}
.hp-fill{
  height:100%;position:relative;
  background:linear-gradient(90deg,var(--arcade-pink),var(--arcade-yellow));
  background-size:200% 100%;
  animation:hpShine 2s linear infinite;
}
.hp-fill.p1{width:95%}
.hp-fill.p2{width:88%;background:linear-gradient(90deg,var(--arcade-neon-green),var(--arcade-neon-cyan))}
.hp-fill.p3{width:99%;background:linear-gradient(90deg,var(--arcade-purple),var(--arcade-blue))}
@keyframes hpShine{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
.hp-fill::after{
  content:'';position:absolute;top:2px;left:4px;right:4px;height:3px;
  background:rgba(255,255,255,0.4);border-radius:2px;
}

.jm-hero-title{
  font-family:var(--font-pixel);font-size:clamp(28px,5vw,54px);
  line-height:1.4;margin-bottom:16px;font-weight:900;letter-spacing:2px;
}
.jm-hero-title .t1{
  display:block;
  background:linear-gradient(180deg,
    var(--arcade-yellow) 0%,
    var(--arcade-pink) 35%,
    var(--arcade-purple) 70%,
    var(--arcade-blue) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(4px 4px 0 var(--arcade-darker)) drop-shadow(0 0 24px rgba(162,155,254,0.6));
  animation:titleGlow 3s ease-in-out infinite;
}
@keyframes titleGlow{
  0%,100%{filter:drop-shadow(4px 4px 0 var(--arcade-darker)) drop-shadow(0 0 24px rgba(162,155,254,0.6))}
  50%{filter:drop-shadow(4px 4px 0 var(--arcade-darker)) drop-shadow(0 0 40px rgba(253,203,110,0.8))}
}
.jm-hero-title .t2{
  display:block;margin-top:10px;
  font-size:0.32em;letter-spacing:4px;color:var(--arcade-neon-cyan);
  font-weight:700;
}
.jm-hero-title .t2 em{
  font-style:normal;font-size:1.6em;
  background:linear-gradient(135deg,var(--arcade-yellow),var(--arcade-pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding:0 4px;
}
.jm-hero-sub{
  font-size:11px;color:#b8b8d0;margin-bottom:32px;
  letter-spacing:1px;line-height:2;
  font-family:var(--font-pixel);
}
.jm-hero-btns{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.jm-btn{
  padding:14px 30px;border:none;cursor:pointer;
  font-family:var(--font-pixel);font-size:11px;font-weight:900;
  text-decoration:none;letter-spacing:1px;
  transition:all .15s;position:relative;display:inline-block;
}
.jm-btn-primary{
  color:var(--arcade-deep);
  background:linear-gradient(180deg,var(--arcade-yellow) 0%,#F39C12 100%);
  border:4px solid var(--arcade-pink);
  box-shadow:
    6px 6px 0 var(--arcade-purple),
    inset 2px 2px 0 rgba(255,255,255,0.5),
    inset -2px -2px 0 rgba(0,0,0,0.2),
    0 0 24px rgba(253,203,110,0.5);
}
.jm-btn-primary::before{
  content:'';position:absolute;top:4px;left:4px;right:4px;height:3px;
  background:rgba(255,255,255,0.5);
}
.jm-btn-primary:hover{
  transform:translate(3px,3px);
  box-shadow:
    3px 3px 0 var(--arcade-purple),
    inset 2px 2px 0 rgba(255,255,255,0.5),
    inset -2px -2px 0 rgba(0,0,0,0.2),
    0 0 32px rgba(253,203,110,0.8);
}
.jm-btn-ghost{
  color:var(--arcade-neon-cyan);
  background:transparent;
  border:4px solid var(--arcade-blue);
  box-shadow:
    6px 6px 0 var(--arcade-purple),
    0 0 16px rgba(108,92,231,0.4);
}
.jm-btn-ghost:hover{
  transform:translate(3px,3px);color:var(--arcade-yellow);border-color:var(--arcade-pink);
  box-shadow:3px 3px 0 var(--arcade-purple),0 0 24px rgba(255,118,117,0.5);
}

/* ========== Stats ========== */
.jm-stats{
  padding:44px 0;
  border-top:4px solid var(--arcade-blue);
  border-bottom:4px solid var(--arcade-blue);
  background:
    linear-gradient(90deg,
      rgba(26,26,46,0.9),
      rgba(22,33,62,0.95),
      rgba(108,92,231,0.18),
      rgba(22,33,62,0.95),
      rgba(26,26,46,0.9));
  position:relative;
}
.jm-stats::before,.jm-stats::after{
  content:'◀ INSERT COIN ▶';position:absolute;left:50%;transform:translateX(-50%);
  color:var(--arcade-yellow);font-family:var(--font-pixel);font-size:9px;
  letter-spacing:4px;animation:blink 1.2s step-end infinite;
}
.jm-stats::before{top:12px}
.jm-stats::after{bottom:12px;animation-delay:0.6s}
.jm-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.jm-stat{
  text-align:center;padding:22px 12px;
  background:linear-gradient(180deg,rgba(22,33,62,0.95),rgba(26,26,46,0.9));
  border:3px solid var(--arcade-purple);
  position:relative;
  box-shadow:4px 4px 0 var(--arcade-darker);
}
.jm-stat::before,.jm-stat::after{
  content:'';position:absolute;width:10px;height:10px;background:var(--arcade-yellow);
}
.jm-stat::before{top:-5px;left:-5px}
.jm-stat::after{bottom:-5px;right:-5px}
.jm-stat-num{
  font-family:var(--font-pixel);font-size:28px;font-weight:900;letter-spacing:1px;
  background:linear-gradient(180deg,var(--arcade-yellow),var(--arcade-pink),var(--arcade-purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(2px 2px 0 var(--arcade-blue));
}
.jm-stat-label{
  color:var(--arcade-neon-cyan);font-family:var(--font-pixel);
  font-size:8px;margin-top:8px;letter-spacing:1px;font-weight:700;
}

/* ========== Section 通用 ========== */
.jm-section{padding:70px 0;position:relative}
.jm-section-head{text-align:center;margin-bottom:44px;position:relative}
.jm-section-head::before{
  content:'◆ ◆ ◆  PLAYER READY  ◆ ◆ ◆';
  color:var(--arcade-purple);font-family:var(--font-pixel);
  font-size:9px;letter-spacing:4px;display:block;margin-bottom:12px;opacity:0.8;
}
.jm-section-head::after{
  content:'══════════════════ 8-BIT COMIC ARCADE ══════════════════';
  color:var(--arcade-yellow);font-family:var(--font-pixel);
  font-size:8px;letter-spacing:2px;display:block;margin-top:16px;opacity:0.7;
}
.jm-section-title{
  font-family:var(--font-pixel);font-size:clamp(20px,3.2vw,30px);
  font-weight:900;margin-bottom:10px;letter-spacing:2px;
  color:var(--arcade-cream);
}
.jm-section-title span{
  background:linear-gradient(135deg,var(--arcade-yellow),var(--arcade-pink),var(--arcade-purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(2px 2px 0 var(--arcade-blue));
  position:relative;padding-bottom:4px;
}
.jm-section-title span::before,.jm-section-title span::after{
  content:'';position:absolute;bottom:0;width:25%;height:3px;
  background:linear-gradient(90deg,transparent,var(--arcade-purple));
}
.jm-section-title span::before{left:0}
.jm-section-title span::after{right:0;background:linear-gradient(90deg,var(--arcade-purple),transparent)}
.jm-section-sub{
  color:#a0a0c0;font-family:var(--font-pixel);font-size:10px;
  letter-spacing:1px;line-height:2;
}

/* ========== 漫画卡片网格 ========== */
.jm-comic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.jm-comic-card{
  background:linear-gradient(180deg,rgba(22,33,62,0.95),rgba(26,26,46,0.92));
  border:3px solid var(--arcade-purple);
  overflow:hidden;cursor:pointer;transition:all .2s;
  position:relative;
  box-shadow:5px 5px 0 var(--arcade-darker);
}
.jm-comic-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;z-index:3;
  background:linear-gradient(90deg,var(--arcade-pink),var(--arcade-yellow),var(--arcade-purple),var(--arcade-neon-cyan),var(--arcade-pink));
  background-size:300% 100%;animation:rainbowLine 3s linear infinite;
}
@keyframes rainbowLine{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}
.jm-comic-card:hover{
  transform:translate(-3px,-3px);
  border-color:var(--arcade-yellow);
  box-shadow:8px 8px 0 var(--arcade-blue),0 0 30px rgba(162,155,254,0.5);
  z-index:5;
}
.jm-comic-thumb{
  height:150px;position:relative;display:flex;align-items:center;justify-content:center;
  font-size:52px;
  background:
    linear-gradient(135deg,rgba(108,92,231,0.3),rgba(255,118,117,0.2)),
    repeating-linear-gradient(45deg,transparent 0,transparent 12px,rgba(162,155,254,0.08) 12px,rgba(162,155,254,0.08) 13px),
    linear-gradient(180deg,var(--arcade-deep-purple),var(--arcade-darker));
  border-bottom:3px dashed var(--arcade-purple);
  overflow:hidden;
}
.jm-comic-thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.3) 100%);
}
.jm-comic-tag{
  position:absolute;top:12px;left:12px;z-index:4;
  padding:4px 10px;
  background:var(--arcade-pink);
  color:var(--arcade-deep);
  font-family:var(--font-pixel);font-size:8px;font-weight:900;letter-spacing:0.5px;
  border:2px solid var(--arcade-deep);
  box-shadow:3px 3px 0 var(--arcade-darker),0 0 10px rgba(255,118,117,0.7);
}
.jm-comic-tag.hot{background:var(--arcade-yellow)}
.jm-comic-tag.new{background:var(--arcade-neon-green)}
.jm-comic-tag.exclusive{background:linear-gradient(135deg,var(--arcade-purple),var(--arcade-blue))}
.jm-comic-tag.exclusive{color:#fff}
.jm-comic-body{padding:12px 14px 16px;position:relative}
.jm-comic-body::before{
  content:'';position:absolute;top:8px;right:10px;width:8px;height:8px;
  background:var(--arcade-neon-green);
  box-shadow:0 -3px 0 var(--arcade-neon-green),0 3px 0 var(--arcade-neon-green),-3px 0 0 var(--arcade-neon-green),3px 0 0 var(--arcade-neon-green);
  opacity:0.6;
}
.jm-comic-title{
  font-family:var(--font-pixel);font-size:10px;font-weight:700;
  color:var(--arcade-cream);line-height:1.6;margin-bottom:10px;
  letter-spacing:0.3px;
  min-height:32px;
}
.jm-comic-meta{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-pixel);font-size:8px;
}
.jm-comic-meta .views{color:var(--arcade-neon-cyan);font-weight:700}
.jm-comic-meta .hd{
  color:var(--arcade-yellow);
  border:2px solid var(--arcade-yellow);padding:2px 6px;
  font-weight:900;
  box-shadow:0 0 8px rgba(253,203,110,0.5);
}

/* ========== Features ========== */
.jm-features{
  background:linear-gradient(180deg,transparent,rgba(108,92,231,0.12) 50%,transparent);
}
.jm-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.jm-feat{
  padding:30px 22px 26px;
  background:linear-gradient(180deg,rgba(22,33,62,0.95),rgba(26,26,46,0.9));
  border:3px solid var(--arcade-purple);
  text-align:center;transition:all .25s;position:relative;overflow:hidden;
  box-shadow:5px 5px 0 var(--arcade-darker);
}
.jm-feat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--arcade-blue),var(--arcade-purple),var(--arcade-pink),var(--arcade-yellow));
}
.jm-feat::after{
  content:'';position:absolute;inset:0;opacity:0;transition:.3s;
  background:radial-gradient(circle at 50% 0%,rgba(162,155,254,0.2),transparent 60%);
}
.jm-feat:hover{
  transform:translateY(-5px);
  border-color:var(--arcade-yellow);
  box-shadow:8px 8px 0 var(--arcade-blue),0 0 30px rgba(253,203,110,0.3);
}
.jm-feat:hover::after{opacity:1}
.jm-feat-icon{
  font-size:42px;margin-bottom:14px;display:inline-block;position:relative;z-index:2;
  filter:drop-shadow(0 0 16px rgba(162,155,254,0.7));
  animation:iconBounce 2.5s ease-in-out infinite;
}
@keyframes iconBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.jm-feat-title{
  font-family:var(--font-pixel);font-size:13px;font-weight:900;
  margin-bottom:10px;letter-spacing:1px;
  background:linear-gradient(135deg,var(--arcade-yellow),var(--arcade-pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(1px 1px 0 var(--arcade-blue));
  position:relative;z-index:2;
}
.jm-feat-desc{
  color:#a0a0c0;font-family:var(--font-pixel);font-size:9px;
  line-height:2;position:relative;z-index:2;
}

/* ========== 会员价格 ========== */
.jm-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.jm-price-card{
  background:linear-gradient(180deg,rgba(22,33,62,0.96),rgba(26,26,46,0.92));
  border:3px solid var(--arcade-purple);
  padding:30px 22px;text-align:center;transition:all .25s;position:relative;overflow:hidden;
  box-shadow:5px 5px 0 var(--arcade-darker);
}
.jm-price-card::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(162,155,254,0.15),transparent);
  transition:left .8s;
}
.jm-price-card:hover{
  transform:translateY(-4px);
  border-color:var(--arcade-neon-cyan);
  box-shadow:7px 7px 0 var(--arcade-blue),0 0 28px rgba(0,245,255,0.3);
}
.jm-price-card:hover::before{left:100%}
.jm-price-card.featured{
  transform:scale(1.04);
  border:4px solid transparent;
  background:
    linear-gradient(var(--arcade-deep-purple),var(--arcade-darker)) padding-box,
    linear-gradient(135deg,var(--arcade-yellow),var(--arcade-pink),var(--arcade-purple),var(--arcade-blue),var(--arcade-neon-cyan)) border-box;
  box-shadow:0 0 32px rgba(253,203,110,0.4);
}
.jm-price-card.featured:hover{transform:scale(1.04) translateY(-4px)}
.jm-price-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  padding:6px 20px;
  background:linear-gradient(135deg,var(--arcade-yellow),var(--arcade-pink));
  color:var(--arcade-deep);font-family:var(--font-pixel);font-size:9px;
  font-weight:900;letter-spacing:1px;
  border:3px solid var(--arcade-deep);
  box-shadow:0 0 16px rgba(253,203,110,0.7);
  z-index:2;
}
.jm-price-name{
  font-family:var(--font-pixel);font-size:13px;font-weight:900;
  margin-bottom:18px;letter-spacing:1.5px;
  color:var(--arcade-neon-cyan);
}
.jm-price-card.featured .jm-price-name{
  background:linear-gradient(135deg,var(--arcade-yellow),var(--arcade-pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.jm-price-num{
  font-family:var(--font-pixel);font-size:40px;font-weight:900;margin-bottom:6px;
  background:linear-gradient(180deg,var(--arcade-yellow),var(--arcade-pink),var(--arcade-purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(2px 2px 0 var(--arcade-blue));
  letter-spacing:1px;
}
.jm-price-num small{
  font-size:12px;color:#a0a0c0;-webkit-text-fill-color:#a0a0c0;background:none;
  margin-left:2px;font-weight:700;font-family:var(--font-pixel);
}
.jm-price-desc{
  color:var(--arcade-yellow);font-family:var(--font-pixel);font-size:9px;
  margin-bottom:20px;letter-spacing:0.5px;font-weight:700;opacity:0.9;
}
.jm-price-list{list-style:none;text-align:left;margin-bottom:24px}
.jm-price-list li{
  padding:8px 0 8px 24px;color:#c0c0d8;font-family:var(--font-pixel);font-size:9px;
  border-bottom:2px dashed rgba(108,92,231,0.3);position:relative;line-height:1.6;
}
.jm-price-list li::before{
  content:'';position:absolute;left:6px;top:11px;
  width:8px;height:8px;background:var(--arcade-neon-green);
  box-shadow:0 -2px 0 var(--arcade-neon-green),0 2px 0 var(--arcade-neon-green),-2px 0 0 var(--arcade-neon-green),2px 0 0 var(--arcade-neon-green);
}
.jm-price-list li:last-child{border-bottom:none}
.jm-price-btn{
  display:block;width:100%;padding:12px;text-align:center;text-decoration:none;
  font-family:var(--font-pixel);font-size:10px;font-weight:900;letter-spacing:1px;
  color:var(--arcade-deep);
  background:linear-gradient(180deg,var(--arcade-yellow),#F39C12);
  border:3px solid var(--arcade-pink);
  box-shadow:4px 4px 0 var(--arcade-purple);
  transition:all .15s;position:relative;
}
.jm-price-btn:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--arcade-purple),0 0 20px rgba(253,203,110,0.6);
}
.jm-price-card.featured .jm-price-btn{
  border-color:var(--arcade-purple);
  background:linear-gradient(180deg,var(--arcade-pink),var(--arcade-purple));
  color:#fff;
}

/* ========== Timeline ========== */
.jm-timeline{max-width:820px;margin:0 auto;position:relative;padding:18px 0}
.jm-timeline::before{
  content:'';position:absolute;left:110px;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--arcade-blue),var(--arcade-purple),var(--arcade-yellow),var(--arcade-pink),var(--arcade-purple),var(--arcade-blue));
  box-shadow:0 0 12px rgba(108,92,231,0.6);
}
.jm-tl-item{position:relative;padding:0 0 28px 170px}
.jm-tl-year{
  position:absolute;left:0;top:0;width:92px;text-align:center;padding:10px 6px;
  background:var(--arcade-darker);
  color:var(--arcade-yellow);
  border:3px solid var(--arcade-blue);
  font-family:var(--font-pixel);font-weight:900;letter-spacing:1px;font-size:10px;
  box-shadow:4px 4px 0 var(--arcade-purple);
}
.jm-tl-year::after{
  content:'';position:absolute;right:-82px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;
  background:var(--arcade-yellow);
  border:3px solid var(--arcade-deep);
  box-shadow:0 0 0 3px var(--arcade-purple),0 0 16px rgba(253,203,110,0.8);
}
.jm-tl-title{
  font-family:var(--font-pixel);font-size:12px;font-weight:900;
  margin-bottom:6px;letter-spacing:1px;color:var(--arcade-neon-cyan);
}
.jm-tl-desc{color:#a0a0c0;font-family:var(--font-pixel);font-size:9px;line-height:1.9}

/* ========== Rank List ========== */
.jm-rank-list{display:flex;flex-direction:column;gap:14px;max-width:980px;margin:0 auto}
.jm-rank-item{
  display:grid;grid-template-columns:68px 1fr auto;gap:18px;align-items:center;
  padding:16px 24px;
  background:linear-gradient(90deg,rgba(26,26,46,0.92),rgba(22,33,62,0.9));
  border:3px solid var(--arcade-purple);
  transition:all .2s;position:relative;
  box-shadow:4px 4px 0 var(--arcade-darker);
}
.jm-rank-item::before{
  content:'';position:absolute;top:0;bottom:0;left:0;width:4px;
  background:linear-gradient(180deg,var(--arcade-blue),var(--arcade-purple),var(--arcade-pink));
}
.jm-rank-item:hover{
  transform:translateX(6px);
  border-color:var(--arcade-yellow);
  box-shadow:6px 6px 0 var(--arcade-blue),0 0 22px rgba(253,203,110,0.3);
}
.jm-rank-num{
  font-family:var(--font-pixel);font-weight:900;font-size:30px;text-align:center;
  background:linear-gradient(180deg,var(--arcade-blue),var(--arcade-purple),var(--arcade-pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(2px 2px 0 var(--arcade-darker));
  letter-spacing:1px;
}
.jm-rank-item:nth-child(1) .jm-rank-num{
  font-size:36px;
  background:linear-gradient(180deg,var(--arcade-yellow),#F39C12,var(--arcade-pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.jm-rank-title{
  font-family:var(--font-pixel);font-size:12px;font-weight:700;
  margin-bottom:5px;letter-spacing:0.5px;color:var(--arcade-cream);
}
.jm-rank-meta{
  color:#8888a8;font-family:var(--font-pixel);font-size:8px;
  letter-spacing:1px;font-weight:700;
}
.jm-rank-score{
  text-align:center;padding-left:18px;
  border-left:3px dashed rgba(108,92,231,0.4);
}
.jm-rank-score .num{
  font-size:24px;font-weight:900;letter-spacing:1px;
  font-family:var(--font-pixel);
  background:linear-gradient(135deg,var(--arcade-yellow),var(--arcade-pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.jm-rank-score .label{
  color:#8888a8;font-size:8px;margin-top:-3px;
  letter-spacing:1px;font-family:var(--font-pixel);font-weight:700;
}

/* ========== News ========== */
.jm-news-list{display:flex;flex-direction:column;gap:20px;max-width:980px;margin:0 auto}
.jm-news-item{
  display:grid;grid-template-columns:96px 1fr;gap:20px;
  padding:22px 26px;
  background:linear-gradient(135deg,rgba(26,26,46,0.92),rgba(22,33,62,0.88));
  border:3px solid var(--arcade-purple);
  transition:all .2s;position:relative;
  box-shadow:4px 4px 0 var(--arcade-darker);
}
.jm-news-item::after{
  content:'';position:absolute;top:10px;right:10px;width:8px;height:8px;
  background:var(--arcade-yellow);
  box-shadow:0 -3px 0 var(--arcade-yellow),0 3px 0 var(--arcade-yellow),-3px 0 0 var(--arcade-yellow),3px 0 0 var(--arcade-yellow);
  opacity:0.6;
}
.jm-news-item:hover{
  transform:translateY(-3px);
  border-color:var(--arcade-neon-cyan);
  box-shadow:6px 6px 0 var(--arcade-blue),0 0 24px rgba(0,245,255,0.3);
}
.jm-news-date{
  text-align:center;padding:12px 8px;
  background:var(--arcade-darker);
  border:3px solid var(--arcade-blue);
}
.jm-news-date .day{
  font-size:26px;font-weight:900;display:block;line-height:1;
  font-family:var(--font-pixel);
  background:linear-gradient(180deg,var(--arcade-yellow),var(--arcade-pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(1px 1px 0 var(--arcade-blue));
}
.jm-news-date .month{
  color:var(--arcade-neon-cyan);font-size:9px;
  margin-top:6px;letter-spacing:1px;font-weight:700;display:block;
  font-family:var(--font-pixel);
}
.jm-news-title{
  font-family:var(--font-pixel);font-size:13px;font-weight:900;
  margin-bottom:8px;letter-spacing:1px;color:var(--arcade-cream);
}
.jm-news-excerpt{
  color:#a0a0c0;font-family:var(--font-pixel);font-size:9px;
  line-height:2;margin-bottom:10px;
}
.jm-news-tags{display:flex;flex-wrap:wrap;gap:8px}
.jm-news-tags span{
  padding:3px 10px;font-family:var(--font-pixel);font-size:8px;
  letter-spacing:0.5px;font-weight:700;
  background:rgba(108,92,231,0.2);color:var(--arcade-neon-cyan);
  border:2px solid var(--arcade-purple);
}

/* ========== CTA ========== */
.jm-cta{
  padding:68px 0;text-align:center;position:relative;overflow:hidden;
  border-top:4px solid var(--arcade-pink);
  border-bottom:4px solid var(--arcade-pink);
  background:
    radial-gradient(ellipse at 25% 30%,rgba(255,118,117,0.2),transparent 50%),
    radial-gradient(ellipse at 75% 70%,rgba(108,92,231,0.28),transparent 50%),
    linear-gradient(135deg,rgba(26,26,46,0.97),rgba(22,33,62,0.96));
}
.jm-cta::before{
  content:'◄◄ GAME START · CONTINUE? · YES / NO ►►';
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  color:var(--arcade-yellow);font-family:var(--font-pixel);
  font-size:9px;letter-spacing:3px;opacity:0.75;
  animation:blink 1.4s step-end infinite;
}
.jm-cta h2{
  font-family:var(--font-pixel);font-size:clamp(22px,3.8vw,34px);
  font-weight:900;margin-bottom:12px;letter-spacing:2px;
  color:var(--arcade-cream);position:relative;
}
.jm-cta .h2-x{
  background:linear-gradient(135deg,var(--arcade-yellow),var(--arcade-pink),var(--arcade-purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding:0 4px;letter-spacing:1px;
  filter:drop-shadow(2px 2px 0 var(--arcade-blue));
}
.jm-cta p{
  color:#b0b0d0;margin-bottom:28px;font-family:var(--font-pixel);
  font-size:10px;letter-spacing:1px;line-height:2;position:relative;
}

/* ========== Contact ========== */
.jm-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.jm-contact-info,.jm-contact-form{
  padding:26px;
  background:linear-gradient(160deg,rgba(22,33,62,0.94),rgba(26,26,46,0.92));
  border:3px solid var(--arcade-purple);
  position:relative;
  box-shadow:5px 5px 0 var(--arcade-darker);
}
.jm-contact-info::before,.jm-contact-form::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--arcade-pink),var(--arcade-yellow),var(--arcade-purple),var(--arcade-blue));
}
.jm-contact-info h3{
  font-family:var(--font-pixel);font-size:15px;font-weight:900;
  margin-bottom:14px;letter-spacing:1.5px;
  background:linear-gradient(135deg,var(--arcade-yellow),var(--arcade-pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(1px 1px 0 var(--arcade-blue));
}
.jm-contact-info p{
  color:#a0a0c0;font-family:var(--font-pixel);font-size:9px;
  line-height:2;margin-bottom:20px;
}
.jm-contact-line{
  display:flex;gap:12px;align-items:center;padding:12px 0;
  border-bottom:2px dashed rgba(108,92,231,0.35);
}
.jm-contact-line:last-child{border-bottom:none}
.jm-contact-line .ico{
  font-size:22px;
  filter:drop-shadow(0 0 8px rgba(162,155,254,0.8));
}
.jm-contact-line .label{
  color:var(--arcade-neon-cyan);font-size:8px;margin-bottom:4px;
  letter-spacing:1.5px;font-weight:700;font-family:var(--font-pixel);
}
.jm-contact-line .val{
  color:var(--arcade-cream);font-size:11px;font-weight:700;
  font-family:var(--font-pixel);
}
.jm-form-group{margin-bottom:16px}
.jm-form-group label{
  display:block;color:var(--arcade-yellow);font-size:9px;margin-bottom:6px;
  letter-spacing:1.5px;font-weight:900;font-family:var(--font-pixel);
}
.jm-form-group label::before{content:'▣ ';color:var(--arcade-pink);font-size:9px}
.jm-form-group input,.jm-form-group select,.jm-form-group textarea{
  width:100%;padding:10px 12px;
  background:rgba(26,26,46,0.8);
  border:3px solid var(--arcade-purple);
  color:var(--arcade-cream);font-size:10px;font-family:var(--font-pixel);
  transition:all .15s;outline:none;letter-spacing:0.5px;
}
.jm-form-group input:focus,.jm-form-group select:focus,.jm-form-group textarea:focus{
  border-color:var(--arcade-yellow);
  background:rgba(26,26,46,0.95);
  box-shadow:0 0 0 3px rgba(253,203,110,0.2),inset 0 0 10px rgba(108,92,231,0.2);
}
.jm-form-group textarea{min-height:96px;resize:vertical;line-height:1.8}
.jm-form-submit{
  width:100%;padding:12px;border:3px solid var(--arcade-pink);cursor:pointer;
  background:linear-gradient(180deg,var(--arcade-yellow),#F39C12);
  color:var(--arcade-deep);font-weight:900;letter-spacing:2px;font-size:11px;
  font-family:var(--font-pixel);transition:all .15s;position:relative;
  box-shadow:5px 5px 0 var(--arcade-purple);
}
.jm-form-submit::before{
  content:'';position:absolute;top:3px;left:3px;right:3px;height:3px;
  background:rgba(255,255,255,0.45);
}
.jm-form-submit:hover{
  transform:translate(2px,2px);
  box-shadow:3px 3px 0 var(--arcade-purple),0 0 24px rgba(253,203,110,0.7);
}

/* ========== FAQ ========== */
.jm-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1020px;margin:0 auto}
.jm-faq-item{
  padding:20px;
  background:linear-gradient(160deg,rgba(26,26,46,0.92),rgba(22,33,62,0.88));
  border:3px solid var(--arcade-purple);
  transition:all .2s;
  box-shadow:4px 4px 0 var(--arcade-darker);
}
.jm-faq-item:hover{
  border-color:var(--arcade-neon-green);
  box-shadow:5px 5px 0 var(--arcade-blue);
}
.jm-faq-q{
  font-family:var(--font-pixel);font-size:11px;font-weight:900;
  margin-bottom:8px;letter-spacing:0.5px;color:var(--arcade-yellow);
}
.jm-faq-q::before{content:'Q. ';color:var(--arcade-pink);font-size:12px;letter-spacing:0}
.jm-faq-a{
  color:#a0a0c0;font-family:var(--font-pixel);font-size:9px;line-height:2;
}

/* ========== Tabs ========== */
.jm-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px}
.jm-tab{
  padding:8px 18px;font-family:var(--font-pixel);font-size:9px;
  font-weight:900;letter-spacing:1px;
  border:3px solid var(--arcade-purple);background:rgba(26,26,46,0.6);
  color:var(--arcade-cream);cursor:pointer;transition:all .15s;
}
.jm-tab:hover{
  border-color:var(--arcade-neon-cyan);color:var(--arcade-neon-cyan);
  background:rgba(26,26,46,0.8);
}
.jm-tab.active{
  background:linear-gradient(180deg,var(--arcade-yellow),#F39C12);
  color:var(--arcade-deep);border-color:var(--arcade-pink);
  box-shadow:4px 4px 0 var(--arcade-purple),0 0 18px rgba(253,203,110,0.5);
}

/* ========== Page Banner ========== */
.jm-page-banner{
  padding:62px 0 46px;text-align:center;position:relative;
  border-bottom:4px solid var(--arcade-purple);
  background:
    radial-gradient(ellipse at 30% 25%,rgba(108,92,231,0.28),transparent 55%),
    radial-gradient(ellipse at 70% 75%,rgba(255,118,117,0.22),transparent 50%),
    linear-gradient(180deg,rgba(22,33,62,0.95),var(--arcade-darker));
  overflow:hidden;
}
.jm-page-banner::before{
  content:'▣ ◆ ◆ ◆  STAGE SELECT  ◆ ◆ ◆ ▣';
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  color:var(--arcade-purple);font-family:var(--font-pixel);
  font-size:9px;letter-spacing:3px;opacity:0.7;
}
.jm-page-banner h1{
  font-family:var(--font-pixel);font-size:clamp(24px,4.2vw,40px);
  font-weight:900;margin-bottom:10px;letter-spacing:3px;position:relative;
  background:linear-gradient(180deg,var(--arcade-yellow) 0%,var(--arcade-pink) 50%,var(--arcade-purple) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(3px 3px 0 var(--arcade-darker)) drop-shadow(0 0 22px rgba(162,155,254,0.6));
}
.jm-page-banner p{
  color:#a8a8c8;font-family:var(--font-pixel);font-size:10px;
  letter-spacing:1.5px;margin-bottom:14px;line-height:2;position:relative;
}
.jm-breadcrumb{
  font-size:9px;color:var(--arcade-neon-cyan);
  letter-spacing:1px;position:relative;font-weight:700;font-family:var(--font-pixel);
}
.jm-breadcrumb a{color:var(--arcade-neon-cyan);text-decoration:none;
  border-bottom:2px dotted rgba(0,245,255,0.4);
}
.jm-breadcrumb a:hover{color:var(--arcade-yellow)}

/* ========== About ========== */
.jm-about{display:grid;grid-template-columns:260px 1fr;gap:38px;align-items:center;max-width:1080px;margin:0 auto}
.jm-about-visual{
  width:100%;aspect-ratio:1;position:relative;
}
.jm-console{
  position:absolute;inset:0;
  background:
    linear-gradient(135deg,var(--arcade-purple),var(--arcade-blue));
  border:6px solid var(--arcade-deep);
  border-radius:16px;
  box-shadow:
    inset 6px 6px 0 rgba(255,255,255,0.25),
    inset -6px -6px 0 rgba(0,0,0,0.3),
    0 12px 40px rgba(108,92,231,0.5),
    0 0 40px rgba(162,155,254,0.3);
  animation:consoleFloat 4s ease-in-out infinite;
}
@keyframes consoleFloat{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-8px) rotate(1deg)}
}
.jm-console::before{
  content:'';position:absolute;top:14%;left:10%;right:10%;height:48%;
  background:linear-gradient(180deg,var(--arcade-darker),var(--arcade-deep-purple));
  border:4px solid var(--arcade-deep);
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.6);
}
.jm-console::after{
  content:'JM\nCOMIC';position:absolute;top:28%;left:50%;
  transform:translate(-50%,-50%);text-align:center;white-space:pre;
  font-family:var(--font-pixel);font-weight:900;font-size:20px;
  line-height:1.4;
  background:linear-gradient(180deg,var(--arcade-yellow),var(--arcade-pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(2px 2px 0 var(--arcade-blue));
  animation:screenOn 2.5s ease-in-out infinite;
}
@keyframes screenOn{
  0%,90%,100%{opacity:1}
  92%{opacity:0.3}
  94%{opacity:1}
  96%{opacity:0.5}
  98%{opacity:1}
}
.jm-console-knobs{
  position:absolute;bottom:12%;left:8%;right:8%;height:22%;
  display:flex;justify-content:space-between;align-items:center;
}
.jm-dpad{
  width:60px;height:60px;position:relative;
}
.jm-dpad::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:20px;height:60px;background:var(--arcade-deep);border-radius:4px;
  border:3px solid rgba(0,0,0,0.5);
}
.jm-dpad::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60px;height:20px;background:var(--arcade-deep);border-radius:4px;
  border:3px solid rgba(0,0,0,0.5);
}
.jm-c-btns{display:flex;gap:10px}
.jm-c-btn{
  width:30px;height:30px;border-radius:50%;
  background:var(--arcade-pink);border:3px solid var(--arcade-deep);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,0.3),0 4px 0 rgba(0,0,0,0.4);
}
.jm-c-btn.b{background:var(--arcade-yellow)}
.jm-c-btn.a{background:var(--arcade-neon-green)}
.jm-about-text h2{
  font-family:var(--font-pixel);font-size:22px;font-weight:900;
  margin-bottom:14px;letter-spacing:2px;color:var(--arcade-cream);
}
.jm-about-text .about-x{
  background:linear-gradient(135deg,var(--arcade-yellow),var(--arcade-pink),var(--arcade-purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(1px 1px 0 var(--arcade-blue));
  letter-spacing:1px;
}
.jm-about-text p{
  color:#a8a8c8;font-family:var(--font-pixel);font-size:10px;
  line-height:2;margin-bottom:10px;
}
.jm-about-list{list-style:none;margin-top:14px}
.jm-about-list li{
  padding:7px 0 7px 26px;color:var(--arcade-cream);font-family:var(--font-pixel);
  font-size:10px;border-bottom:2px dashed rgba(108,92,231,0.3);position:relative;
}
.jm-about-list li::before{
  content:'';position:absolute;left:6px;top:11px;
  width:8px;height:8px;background:var(--arcade-yellow);
  box-shadow:0 -2px 0 var(--arcade-yellow),0 2px 0 var(--arcade-yellow),-2px 0 0 var(--arcade-yellow),2px 0 0 var(--arcade-yellow);
}

/* ========== Footer ========== */
.jm-footer{padding:52px 0 0;margin-top:36px;position:relative;
  border-top:4px solid var(--arcade-blue);
  background:
    linear-gradient(180deg,transparent,rgba(108,92,231,0.18),rgba(26,26,46,0.95));
}
.jm-footer::before{
  content:'═══════════ GAME OVER · THANKS FOR PLAYING · INSERT COIN TO CONTINUE ═══════════';
  position:absolute;top:16px;left:0;right:0;text-align:center;
  color:var(--arcade-yellow);font-family:var(--font-pixel);
  letter-spacing:3px;font-size:8px;opacity:0.75;
}
.jm-footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;
  padding-top:20px;position:relative;
}
.jm-footer-brand .jm-brand{font-size:16px;margin-bottom:10px;display:block}
.jm-footer-brand p{
  color:#8888a8;font-family:var(--font-pixel);font-size:9px;line-height:2;
}
.jm-footer-col h4{
  font-family:var(--font-pixel);font-size:11px;font-weight:900;
  margin-bottom:14px;letter-spacing:1.5px;color:var(--arcade-neon-cyan);
  border-bottom:3px solid var(--arcade-purple);padding-bottom:6px;display:inline-block;
}
.jm-footer-col ul{list-style:none}
.jm-footer-col li{
  padding:4px 0;color:#8888a8;font-family:var(--font-pixel);font-size:9px;
  transition:all .15s;font-weight:700;letter-spacing:0.5px;
}
.jm-footer-col li:hover{
  color:var(--arcade-yellow);padding-left:5px;
  text-shadow:0 0 8px rgba(253,203,110,0.6);
}
.jm-footer-col a{color:inherit;text-decoration:none}
.jm-footer-bottom{
  margin-top:38px;padding:18px 0;text-align:center;
  border-top:3px dashed rgba(108,92,231,0.4);
  color:#787898;font-family:var(--font-pixel);font-size:8px;
  letter-spacing:1.5px;font-weight:700;line-height:2;
}

/* ========== Responsive ========== */
@media(max-width:900px){
  .jm-stats-grid{grid-template-columns:repeat(2,1fr)}
  .jm-comic-grid{grid-template-columns:repeat(2,1fr)}
  .jm-features-grid{grid-template-columns:1fr}
  .jm-pricing{grid-template-columns:1fr;max-width:430px;margin:0 auto}
  .jm-price-card.featured{transform:scale(1)}
  .jm-price-card.featured:hover{transform:scale(1) translateY(-4px)}
  .jm-contact-grid{grid-template-columns:1fr}
  .jm-faq-grid{grid-template-columns:1fr}
  .jm-about{grid-template-columns:1fr}
  .jm-about-visual{max-width:240px;margin:0 auto}
  .jm-timeline::before{left:48px}
  .jm-tl-item{padding-left:88px}
  .jm-tl-year{width:76px;font-size:9px}
  .jm-tl-year::after{right:-64px;width:14px;height:14px}
  .jm-footer-grid{grid-template-columns:1fr 1fr}
  .arcade-deco{display:none}
}
@media(max-width:560px){
  .jm-comic-grid{grid-template-columns:1fr}
  .jm-stats-grid{grid-template-columns:1fr 1fr}
  .jm-footer-grid{grid-template-columns:1fr}
  .jm-rank-item{grid-template-columns:52px 1fr;gap:10px}
  .jm-rank-score{display:none}
  .jm-nav ul{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
  .jm-nav a{white-space:nowrap;padding:12px 14px;font-size:9px}
  .jm-nav::before,.jm-nav::after{display:none}
  .jm-user-btns{gap:6px}
  .jm-btn-login,.jm-btn-vip{padding:8px 12px;font-size:8px}
  .jm-header-inner{padding:10px 0}
  .jm-pokeball{width:44px;height:44px}
  .jm-brand{font-size:14px}
  .jm-tagline{font-size:7px}
}