/* Pixelmon shared visual system — crisp, tactile and deliberately low-fi. */
:root {
  --px-bg: #11121d;
  --px-panel: #20243a;
  --px-panel-2: #292f4b;
  --px-cream: #fff4d2;
  --px-ink: #171827;
  --px-line: #0b0c14;
  --px-muted: #a8b0cb;
  --px-yellow: #ffd541;
  --px-cyan: #52d9e8;
  --px-pink: #ff5d7d;
  --px-green: #77dc67;
  --px-shadow: 6px 6px 0 var(--px-line);
}

html { scroll-behavior: smooth; }
body.pixel-page {
  min-height: 100%;
  color: #f7f1df;
  font-family: "Courier New", "Lucida Console", monospace;
  font-weight: 700;
  -webkit-font-smoothing: none;
  background-color: var(--px-bg);
  background-image:
    linear-gradient(rgba(82,217,232,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82,217,232,.035) 1px, transparent 1px),
    radial-gradient(circle at 15% 8%, #293153 0, transparent 28%),
    radial-gradient(circle at 90% 80%, #33233e 0, transparent 30%);
  background-size: 24px 24px, 24px 24px, auto, auto;
}

body.pixel-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: .16;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 4px);
  mix-blend-mode: multiply;
}

.pixel-page button,
.pixel-page a { -webkit-tap-highlight-color: transparent; }

.pixel-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 20px 0 64px; }

.pixel-nav {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 22px !important;
  padding: 10px 12px !important;
  color: #fff !important;
  background: #191c2c !important;
  border: 3px solid var(--px-line) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--px-line) !important;
  flex-wrap: wrap;
}

.pixel-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: 8px;
  color: #fff;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 #5e315b;
}

.pixel-brand::before {
  content: "";
  width: 18px;
  height: 18px;
  background: linear-gradient(#ff5d7d 0 42%, #111 42% 58%, #fff4d2 58%);
  border: 2px solid #090a10;
  box-shadow: inset 3px -3px 0 rgba(0,0,0,.28);
}

.pixel-nav .link,
.pixel-nav a,
.pixel-nav button {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px !important;
  color: var(--px-muted) !important;
  background: #24283e !important;
  border: 2px solid #080910 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 #080910;
  text-decoration: none !important;
  font: 700 12px/1.2 "Courier New", "Microsoft YaHei", monospace !important;
}

.pixel-nav .link:hover,
.pixel-nav a:hover,
.pixel-nav button:hover { color: #fff !important; transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #080910; }
.pixel-nav .on { color: var(--px-ink) !important; background: var(--px-yellow) !important; }
.pixel-nav .spacer { margin-left: auto; }
.pixel-nav #wallet { color: var(--px-cyan); font-size: 11px; }
.pixel-nav .x-social { color: var(--px-cyan) !important; white-space: nowrap; }

.pixel-kicker {
  display: inline-block;
  margin: 0 0 8px;
  color: var(--px-cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
}

.pixel-title {
  margin: 0;
  color: #fff9e8;
  font-size: clamp(26px, 5vw, 52px);
  line-height: .98;
  letter-spacing: -2px;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 #632f60;
}

.pixel-subtitle { max-width: 670px; margin: 12px 0 0; color: var(--px-muted); font-size: 13px; }
.pixel-chip { display:inline-flex; padding: 3px 7px; color: var(--px-ink); background: var(--px-cyan); border: 2px solid var(--px-line); font-size: 10px; font-weight: 900; }

/* Mint page */
.mint-page .wrap { max-width: none; margin: 0; padding: 0; }
.mint-page .hero-copy { max-width: 1180px; margin: 0 auto 26px; padding: 24px 0 0; }
.mint-page {
  background-color: #080c19;
  background-image:
    linear-gradient(rgba(65,210,196,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65,210,196,.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, #1c2944 0, #0b1020 46%, #060913 100%);
  background-size: 16px 16px, 16px 16px, auto;
}
.mint-page .pixel-shell { position: relative; max-width: 1440px; }
.mint-page .pixel-shell::before,
.mint-page .pixel-shell::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 42px;
  pointer-events: none;
  opacity: .7;
  background: repeating-linear-gradient(90deg,#141b2d 0 8px,#070a12 8px 13px,#313a52 13px 16px);
  border: 2px solid #05070c;
}
.mint-page .pixel-shell::before { left: 14px; }
.mint-page .pixel-shell::after { right: 14px; }
.mint-page .hero-copy { position: relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); min-height:300px; padding:0; overflow:hidden; background:#0f1628; border:3px solid #05070d; box-shadow:8px 8px 0 #05070d; }
.mint-page .hero-copy::after { content:"0101 // ONLINE // 110010"; position:absolute; z-index:5; top:12px; right:18px; color:#84efda; font-size:9px; letter-spacing:2px; }
.mint-page .hero-message { position:relative; z-index:3; padding:46px 34px 34px; background:linear-gradient(90deg,#10172a 0 86%,transparent); }
.mint-page .hero-message::before { content:""; position:absolute; left:16px; top:50px; bottom:38px; width:5px; background:linear-gradient(#ffba3d 0 24%,#54d6d0 24% 72%,#ea5b75 72%); box-shadow:2px 0 0 #05070d; }
.mint-page .hero-metrics { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.mint-page .hero-metrics span { padding:5px 8px; color:#b9c6de; background:#161f34; border:2px solid #05070d; box-shadow:2px 2px 0 #05070d; font-size:9px; letter-spacing:1px; }
.mint-page .lab-skyline { position:relative; min-height:300px; overflow:hidden; background:linear-gradient(#285ba4 0 22%,#328bc1 22% 48%,#6acbb6 48% 62%,#111b30 62%); border-left:4px solid #05070d; }
.mint-page .lab-skyline::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 0 49%,rgba(255,255,255,.08) 50%,transparent 51%),linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px); background-size:14px 14px; }
.mint-page .sky-stars { position:absolute; inset:18px 12px auto 12px; height:92px; background:radial-gradient(circle,#d3fff1 0 2px,transparent 3px) 10px 14px/57px 44px,radial-gradient(circle,#fff5bd 0 1px,transparent 2px) 3px 0/41px 31px; }
.mint-page .sky-building { position:absolute; bottom:84px; background:#17233b; border:3px solid #080b14; box-shadow:inset -7px 0 0 #0d1526; }
.mint-page .sky-building::before { content:""; position:absolute; left:8px; right:8px; top:12px; height:42%; background:repeating-linear-gradient(0deg,#46d4c8 0 3px,transparent 3px 10px); opacity:.55; }
.mint-page .sky-building.b1 { left:8%; width:62px; height:95px; }
.mint-page .sky-building.b2 { left:34%; width:80px; height:145px; }
.mint-page .sky-building.b3 { right:8%; width:105px; height:112px; }
.mint-page .sky-stack { position:absolute; bottom:84px; width:22px; background:#121d32; border:3px solid #080b14; }
.mint-page .sky-stack::after { content:""; position:absolute; left:-8px; right:-8px; top:-8px; height:8px; background:#263654; border:2px solid #080b14; }
.mint-page .sky-stack.s1 { left:25%; height:118px; }.mint-page .sky-stack.s2 { right:34%; height:138px; }
.mint-page .sky-deck { position:absolute; left:0; right:0; bottom:0; height:86px; display:flex; justify-content:center; gap:12px; padding:13px; background:repeating-linear-gradient(0deg,#18233a 0 8px,#111a2c 8px 12px); border-top:5px solid #060912; }
.mint-page .sky-deck i { width:56px; height:66px; background:linear-gradient(#232d47 0 18%,#8edbd2 18% 72%,#1a2032 72%); border:3px solid #060912; box-shadow:inset 0 0 0 3px #52627b; }
.mint-page .sky-monitor { position:absolute; right:14px; bottom:14px; width:88px; padding:8px; color:#61e3db; background:#0d1525; border:3px solid #05070d; box-shadow:3px 3px 0 #05070d; font-size:8px; }
.mint-page .sky-monitor b,.mint-page .sky-monitor span { display:block; }
.mint-page .lead {
  max-width: 1180px;
  margin: 0 auto 28px;
  padding: 16px 18px;
  color: #c7cce0;
  background: #1b1f32;
  border: 3px solid var(--px-line);
  border-left: 8px solid #57d9d0;
  box-shadow: var(--px-shadow);
  font-size: 12px;
}
.mint-page .lab-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(300px, 380px) minmax(250px, 1fr);
  gap: 18px;
  align-items: center;
  max-width: 1240px;
  margin: 28px auto 34px;
  padding: 38px 24px 42px;
  background:
    linear-gradient(90deg, transparent 49%, rgba(85,217,208,.12) 50%, transparent 51%),
    repeating-linear-gradient(0deg,#11192b 0 5px,#0b1120 5px 9px);
  border: 4px solid #05070d;
  box-shadow: 10px 10px 0 #05070d, inset 0 0 0 4px #26314b;
}
.mint-page .lab-grid::before { content:""; position:absolute; inset:18px; pointer-events:none; border:2px dashed #2d8f8a; opacity:.45; }
.mint-page .lab-grid::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.36; background:linear-gradient(90deg,transparent 9%,#57d7c9 9% 9.3%,transparent 9.3% 91%,#8e4fa5 91% 91.3%,transparent 91.3%),repeating-linear-gradient(90deg,transparent 0 62px,rgba(76,212,194,.45) 62px 64px,transparent 64px 93px); clip-path:polygon(0 17%,28% 17%,28% 8%,72% 8%,72% 17%,100% 17%,100% 84%,70% 84%,70% 94%,30% 94%,30% 84%,0 84%); }
.mint-page .lab-core { position:relative; z-index:1; }
.mint-page .station-code { margin:0 0 10px; color:#9ba8c5; font-size:10px; letter-spacing:2px; }
.mint-page .specimen-rack { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(92px,1fr)); gap:18px 14px; align-items:start; }
.mint-page .specimen-rack .specimen-pod:nth-child(even) { transform:translateY(38px); }
.mint-page .specimen-pod { position:relative; min-height:184px; padding:8px 7px 34px; overflow:hidden; background:linear-gradient(180deg,#1e3350,#13293f 72%,#0a111e 72%); border:4px solid #05070d; box-shadow:inset 0 0 0 3px #40516a,5px 5px 0 #05070d; }
.mint-page .specimen-pod::before { content:""; position:absolute; inset:8px 7px 27px; background:linear-gradient(90deg,rgba(255,255,255,.12),transparent 34%),linear-gradient(180deg,rgba(83,226,211,.12),rgba(67,255,196,.03)); border:2px solid #55a6a7; }
.mint-page .specimen-pod::after { content:""; position:absolute; left:7px; right:7px; bottom:7px; height:9px; background:repeating-linear-gradient(90deg,#53d8c5 0 3px,transparent 3px 7px); opacity:.7; }
.mint-page .specimen-pod img { position:relative; z-index:1; width:100%; height:134px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 5px 0 rgba(0,0,0,.5)); }
.mint-page .specimen-pod .pod-id { position:absolute; z-index:2; left:9px; top:8px; color:#9ff5dd; font-size:8px; letter-spacing:1px; }
.mint-page .specimen-pod .pod-meta { position:absolute; z-index:2; left:9px; right:8px; bottom:17px; overflow:hidden; color:#9facbf; font-size:7px; letter-spacing:.5px; white-space:nowrap; text-overflow:ellipsis; }
.mint-page .specimen-pod.fire { box-shadow:inset 0 0 0 3px #6b3c38,5px 5px 0 #05070d; }
.mint-page .specimen-pod.grass { box-shadow:inset 0 0 0 3px #39684d,5px 5px 0 #05070d; }
.mint-page .lead b { color: var(--px-yellow); }
.mint-page .machines { position: relative; padding: 26px 16px 34px; }
.mint-page .machines::before {
  content: "MINT STATION 01";
  position: absolute;
  left: calc(50% - 220px);
  top: 0;
  color: #6d7593;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
}
.mint-page .cabinet,
.mint-page .sign,
.mint-page .dome,
.mint-page .body,
.mint-page .plate,
.mint-page .coinslot,
.mint-page .tray,
.mint-page .stockbar { border-radius: 0 !important; }
.mint-page .cabinet { box-shadow: inset -8px -8px 0 rgba(0,0,0,.24), inset 8px 8px 0 rgba(255,255,255,.15), 10px 10px 0 #090a10 !important; }
.mint-page .sign .t { font-size: 18px; text-shadow: 2px 2px 0 rgba(255,255,255,.4); }
.mint-page .knob { width:66px !important; height:66px !important; border-radius: 0 !important; transform: rotate(45deg); box-shadow: 5px 5px 0 rgba(0,0,0,.38) !important; }
.mint-page .knob:hover:not(:disabled) { transform: rotate(45deg) translate(-2px,-2px); }
.mint-page .knob.spin { transform: rotate(405deg) !important; }
.mint-page .knob .slot { width:42px !important; height:11px !important; transform: translate(-50%,-50%) rotate(-45deg); border-radius: 0; }
.mint-page .mname { color: #fff; font-size: 18px; text-shadow: 2px 2px 0 #412a4f; }
.mint-page .walletmints,
.mint-page .tier,
.mint-page .cap,
.mint-page .reveal-banner,
.mint-page .note,
.mint-page .reveal,
.mint-page .cap button { border-radius: 0 !important; box-shadow: 4px 4px 0 var(--px-line); }
.mint-page .tiers { max-width: 950px; margin: 30px auto 14px; justify-content: center; }
.mint-page .tier { flex: 1 1 180px; max-width: 230px; background: var(--px-panel); border: 3px solid var(--px-line); }
.mint-page .dot { border-radius: 0; box-shadow: 2px 2px 0 #090a10; }
.mint-page .reveal-banner,
.mint-page h2.sec,
.mint-page .bag,
.mint-page .note { max-width: 950px; margin-left: auto; margin-right: auto; }
.mint-page .reveal-banner { background: #1c2033; border: 3px solid var(--px-line); }
.mint-page .cap { background: var(--px-panel); border-width: 3px; transition: transform .15s; }
.mint-page .cap:hover { transform: translateY(-3px); }
.mint-page .cap .egg { border-radius: 0; transform: rotate(45deg); box-shadow: 5px 5px 0 rgba(0,0,0,.3); }
.mint-page .cap.locked .egg { transform: rotate(45deg); }
.mint-page .cap .capsule-frame { position:relative; width:92px; height:112px; display:flex; align-items:center; justify-content:center; background:linear-gradient(90deg,rgba(255,255,255,.14),transparent 36%),#173449; border:3px solid #080a10; box-shadow:inset 0 0 0 3px var(--c),4px 4px 0 #080a10; }
.mint-page .cap .capsule-frame::after { content:""; position:absolute; inset:6px; border:1px solid rgba(151,255,235,.55); }
.mint-page .cap .capsule-frame img { position:relative; z-index:1; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.mint-page .pb { overflow:hidden; background:#b8ddec; }
.mint-page .pb .top { opacity:1; z-index:3; }
.mint-page .pb .btn,.mint-page .pb .leaf { z-index:4; }
.mint-page h2.sec { color: #fff; font-size: 20px; }
.mint-page h2.sec::before { content: "// "; color: var(--px-pink); }
.mint-page .note { background: rgba(18,20,33,.8); }

/* Battle page */
.battle-page { display: block !important; padding: 0 !important; }
.battle-page #app { width: min(100% - 32px, 1000px) !important; margin: 0 auto; padding: 20px 0 64px; }
.battle-page .battle-intro { margin: 24px 0 22px; }
.battle-page #setup {
  padding: 18px !important;
  color: var(--px-ink);
  background: var(--px-cream) !important;
  border: 4px solid var(--px-line) !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0 var(--px-line), inset 0 -8px 0 #e4d8b6 !important;
}
.battle-page #setup h1 { display: none; }
.battle-page #setup .sub { color: #6f6658; border-bottom: 2px dashed #9f947c; padding-bottom: 12px; }
.battle-page .bar { padding: 8px; background: #e8ddbd; border: 2px solid var(--px-line); }
.battle-page .tab,
.battle-page .pick button,
.battle-page #go,
.battle-page .cbtn {
  border: 3px solid var(--px-line) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--px-line);
  transition: transform .1s, box-shadow .1s;
}
.battle-page .tab:hover,
.battle-page .pick button:hover,
.battle-page #go:hover,
.battle-page .cbtn:hover:not(:disabled) { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--px-line); }
.battle-page .tab.on,
.battle-page .pick button.on { background: var(--px-yellow) !important; }
.battle-page .slot { position: relative; overflow: hidden; border: 3px solid var(--px-line) !important; border-radius: 0 !important; box-shadow: 4px 4px 0 #9e9277; }
.battle-page .slot::after { content: "READY"; position: absolute; right: -22px; bottom: 8px; padding: 2px 24px; color:#fff; background:#252b42; transform: rotate(-45deg); font-size:9px; font-weight:900; }
.battle-page .mv { border-radius: 0 !important; }
.battle-page .mv.on { background: #dff0bd !important; border-color: var(--px-line) !important; }
.battle-page #go { background: var(--px-pink) !important; color: #fff; letter-spacing: 2px; text-transform: uppercase; }

.battle-page .stage { border: 4px solid var(--px-line) !important; border-radius: 0 !important; box-shadow: 8px 8px 0 var(--px-line); }
.battle-page .stage::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 0 5px rgba(255,255,255,.17); }
.battle-page .hud { border: 3px solid var(--px-line) !important; border-radius: 0 !important; box-shadow: 5px 5px 0 rgba(0,0,0,.55) !important; }
.battle-page .hpbar,
.battle-page .hpfill,
.battle-page .hplabel,
.battle-page .badge,
.battle-page .type,
.battle-page .turnpill { border-radius: 0 !important; }
.battle-page .ball { border-radius: 0 !important; transform: rotate(45deg); }
.battle-page .cmd { border: 4px solid var(--px-line) !important; border-top: 0 !important; border-radius: 0 !important; box-shadow: 8px 8px 0 var(--px-line); }
.battle-page .msg { background: var(--px-cream); }
.battle-page .panel { background: #dad1b4; }
.battle-page #over { margin-top: 16px; color: var(--px-ink); background: var(--px-cream); border: 4px solid var(--px-line); box-shadow: 6px 6px 0 var(--px-line); }

@media (max-width: 700px) {
  .pixel-shell, .battle-page #app { width: min(100% - 20px, 1000px) !important; }
  .pixel-nav { align-items: stretch !important; }
  .pixel-nav .pixel-brand { width: 100%; margin-bottom: 3px; }
  .pixel-nav .spacer { display: none; }
  .pixel-nav #wallet { width: 100%; order: 4; }
  .battle-page .pixel-nav #walletChip { width: 100%; order: 5; }
  .battle-page .pixel-nav .x-social { order: 6; margin-left: auto; }
  .battle-page .pixel-nav #connectBtn { order: 7; }
  .pixel-title { letter-spacing: -1px; }
  .mint-page .hero-copy { padding: 16px 10px 0; }
  .mint-page .hero-copy { display:grid; grid-template-columns:1fr; padding:0; }
  .mint-page .hero-message { padding:42px 24px 28px; }
  .mint-page .lab-skyline { min-height:220px; border-left:0; border-top:4px solid #05070d; }
  .mint-page .lead { margin-left: 10px; margin-right: 10px; }
  .mint-page .machines::before { left: 12px; }
  .mint-page .tiers, .mint-page .reveal-banner, .mint-page h2.sec, .mint-page .bag, .mint-page .note { margin-left: 10px; margin-right: 10px; }
  .mint-page .cabinet { max-width: 350px; }
  .mint-page .lab-grid { grid-template-columns:1fr; padding:24px 12px; }
  .mint-page .specimen-rack { grid-template-columns:repeat(3,1fr); order:2; }
  .mint-page .specimen-rack .specimen-pod:nth-child(even) { transform:none; }
  .mint-page .lab-core { order:1; }
  .mint-page .specimen-rack#specimenRight { order:3; }
  .mint-page .specimen-pod { min-height:118px; }
  .mint-page .specimen-pod img { height:86px; }
  .mint-page .pixel-shell::before,.mint-page .pixel-shell::after { display:none; }
  .mint-page .dome { height: 188px; }
  .mint-page .pb { width: 35px; height: 35px; }
  .battle-page .slots { grid-template-columns: 1fr; }
  .battle-page .stage { aspect-ratio: 3 / 4 !important; }
  .battle-page .slotimg.enemy { top: 19%; right: 1%; width: 50%; }
  .battle-page .slotimg.mine { bottom: 16%; left: 0; width: 56%; }
  .battle-page .hud.enemy { top: 4%; left: 2%; }
  .battle-page .hud.mine { bottom: 15%; right: 2%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}