:root {
  --black: #050505;
  --white: #fff;
  --blue: #5fdbfd;
  --cyan: #bdf4ff;
  --pink: #ff4bb5;
  --yellow: #f9c62c;
  --red: #c80707;
  --mint: #80eed3;
  --green: #00e3b5;
  --ink: #131313;
  --muted: #555;
  --font-pixel: "Press Start 2P", monospace;
  --font-sans: "IBM Plex Sans KR", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--white); overflow-x: hidden; }
a { color: inherit; }

.tcg-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 84px; padding: 0 28px 0 18px;
  background: #000; color: #fff;
}
.tcg-logo { display: grid; place-items: center; width: 128px; text-decoration: none; transform: rotate(-5deg); }
.tcg-logo span { color: #ffde35; font-size: 2rem; font-weight: 900; line-height: .8; text-shadow: 3px 3px 0 #2358d8, -2px -2px 0 #2358d8; }
.tcg-logo small { margin-top: 4px; padding: 3px 5px; background: #d71920; font-size: .48rem; font-weight: 900; }
.tcg-nav nav { display: flex; align-items: center; gap: 34px; font-weight: 900; letter-spacing: .04em; }
.tcg-nav nav a { text-decoration: none; color: #fff; font-size: .95rem; }
.tcg-nav nav a:hover { color: var(--cyan); }

.tcg-hero {
  position: relative; min-height: 720px; overflow: hidden;
  background: radial-gradient(circle at 52% 38%, rgba(255,255,255,.12), transparent 0 25%, rgba(0,0,0,.1) 48%, #000 80%), #000;
  color: #fff;
}
.hero-art { position: absolute; inset: 0; max-width: 1120px; margin: 0 auto; opacity: .86; left: 0; right: 0; }
.hero-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 48%, rgba(95,219,253,.34), transparent 22%), radial-gradient(circle at 58% 38%, rgba(249,198,44,.26), transparent 24%), linear-gradient(110deg, transparent 10%, rgba(0,227,181,.22), transparent 58%); filter: saturate(1.25); }
.energy-ribbon { position: absolute; left: 25%; top: 4%; width: 55%; height: 90%; border-radius: 50%; border: 38px solid transparent; mix-blend-mode: screen; opacity: .72; }
.ribbon-a { border-left-color: #ff7b00; border-top-color: #ff4bb5; transform: rotate(20deg); }
.ribbon-b { border-right-color: #00e3b5; border-bottom-color: #5fdbfd; transform: rotate(-18deg) scale(.85); }
.ribbon-c { border-top-color: #f9c62c; border-left-color: #7b5cff; transform: rotate(68deg) scale(.72); }
.agent-sigil { position: absolute; left: 48%; top: 20%; width: 210px; height: 260px; border-radius: 45% 45% 38% 38%; background: linear-gradient(135deg, rgba(255,80,80,.48), rgba(255,255,255,.1)); filter: blur(1px); transform: rotate(-12deg); }
.motion-toggle { position: absolute; right: 22px; top: 92px; z-index: 4; display: flex; gap: 10px; align-items: center; color: #fff; font-size: 1rem; }
.motion-toggle span { width: 15px; height: 15px; border: 1px solid #fff; border-radius: 50%; }
.hero-content { position: relative; z-index: 3; width: min(620px, 42vw); margin-left: 9.5%; padding: 160px 0 0; }
.mega-label { margin: 0 0 12px; color: var(--cyan); font-family: var(--font-pixel); font-size: .78rem; line-height: 1.6; text-shadow: 0 0 14px var(--blue); }
h1 { margin: 0; font-size: clamp(3rem, 4.65vw, 5.55rem); line-height: .86; font-weight: 900; font-style: italic; letter-spacing: -.06em; text-transform: uppercase; text-shadow: 0 5px 0 #0a4e8a, 0 0 18px #5fdbfd; }
h1 span { color: var(--cyan); }
.hero-subtitle { max-width: 480px; margin: 24px 0; color: rgba(255,255,255,.88); font-size: 1.1rem; line-height: 1.6; }
.hero-actions { display: grid; gap: 12px; width: fit-content; }
.tcg-button, .black-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: 255px; min-height: 46px; padding: 0 22px; border: 0; text-decoration: none; font-weight: 900; font-style: italic; letter-spacing: .04em; white-space: nowrap; box-shadow: 0 10px 22px rgba(0,0,0,.28); transition: transform .18s ease, filter .18s ease; }
.tcg-button:hover, .black-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.tcg-button.primary, .tcg-button.secondary { background: #eaffff; color: #000; border: 2px solid #41d8ff; border-bottom-color: #ff30a8; border-radius: 999px; }
.tcg-button.light { background: #fff; color: #000; }
.black-button { background: #000; color: #fff; min-width: 208px; }
.hero-video-shell { position: absolute; z-index: 3; right: 8.5%; top: 150px; width: min(620px, 33vw); transform: perspective(900px) rotateY(-10deg) rotateZ(2deg); transform-style: preserve-3d; }
.video-frame { position: relative; overflow: hidden; border-radius: 22px; border: 5px solid #111; background: #101010; box-shadow: 0 28px 60px rgba(0,0,0,.55); }
.video-frame::before { content: ""; position: absolute; inset: -2px; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 3px rgba(255,255,255,.16), inset 0 0 38px rgba(95,219,253,.18); }
.video-topbar, .video-caption-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; color: #fff; font-family: var(--font-pixel); font-size: .58rem; letter-spacing: .02em; }
.video-topbar { background: #050505; border-bottom: 2px solid #2a2a2a; }
.video-topbar b { color: #ff4b4b; text-shadow: 0 0 10px #ff4b4b; }
.video-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(180deg, #8ee8ff 0 45%, #80eed3 46% 64%, #5fa84c 65%); }
.hero-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: #000; }
.hero-video:not([src]) { display: none; }
.video-pixel-scene { position: absolute; inset: 0; image-rendering: pixelated; background-image: linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 22px 22px; }
.pixel-player { position: absolute; left: 45%; top: 50%; width: 34px; height: 42px; background: #ffeb4d; border: 5px solid #111; box-shadow: 0 -18px 0 -5px #2a55d8, 22px 5px 0 -9px #111; }
.pixel-path { position: absolute; background: #f4eba7; border: 3px solid rgba(0,0,0,.25); }
.path-one { left: 0; right: 0; top: 62%; height: 52px; }
.path-two { left: 51%; top: 34%; width: 58px; bottom: 0; }
.pixel-grass { position: absolute; width: 80px; height: 54px; background: repeating-linear-gradient(90deg, #00a65a 0 10px, #00e3b5 10px 18px); border: 4px solid rgba(0,0,0,.2); }
.grass-one { left: 8%; top: 48%; } .grass-two { right: 10%; top: 35%; }
.play-chip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; border: 4px solid #fff; background: rgba(0,0,0,.64); color: #fff; font-size: 2rem; cursor: pointer; box-shadow: 0 0 26px rgba(95,219,253,.75); }
.video-caption-row { background: linear-gradient(90deg, #f9c62c, #ff4bb5); color: #111; }
.video-caption-row span { font-family: var(--font-sans); font-size: .95rem; font-weight: 900; }
.card-frame { height: 100%; padding: 10px; border-radius: 12px; background: linear-gradient(135deg, #fff4bd, #f7ab52 45%, #fff2a6); color: #111; box-shadow: 0 22px 40px rgba(0,0,0,.48); border: 5px solid #f6de78; }
.card-header, .card-attack { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; font-weight: 900; }
.card-art { position: relative; height: 150px; margin: 9px 0; overflow: hidden; border: 3px solid #111; background: conic-gradient(from 30deg, #5fdbfd, #ff4bb5, #f9c62c, #80eed3, #5fdbfd); }
.pixel-agent { position: absolute; inset: 35px 44px; border: 5px solid #111; background: #00e3b5; box-shadow: 28px 25px 0 #5fdbfd, -18px 44px 0 #f9c62c; }
.card-ability { padding: 8px; border-radius: 8px; background: rgba(255,255,255,.7); font-size: .62rem; line-height: 1.35; }
.card-ability p { margin: 4px 0 0; }
.hero-caption { position: absolute; z-index: 4; left: 0; right: 0; bottom: 14px; text-align: center; color: #fff; font-size: 1.15rem; font-weight: 900; }
.hero-arrow { position: absolute; z-index: 4; bottom: 0; width: 56px; height: 56px; border: 0; background: var(--cyan); color: #000; font-size: 3rem; cursor: pointer; }
.hero-arrow.prev { left: 0; } .hero-arrow.next { right: 0; }

.news-section { position: relative; padding: 64px min(20vw, 380px) 78px; background: #fff; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.section-title-row h2 { margin: 0; font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 900; font-style: italic; letter-spacing: -.04em; }
.section-title-row a { font-weight: 900; font-style: italic; text-decoration: none; }
.news-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.news-card { background: #fff; box-shadow: 0 9px 18px rgba(0,0,0,.22); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.news-art { position: relative; height: 255px; overflow: hidden; }
.yellow-art { background: radial-gradient(circle at 25% 35%, #fff 0 14%, transparent 15%), conic-gradient(from 45deg, #f9c62c, #fff, #ff7373, #f9c62c); }
.pink-art { background: linear-gradient(135deg, #f7a6d9, #f9c62c, #fff); }
.card-video-art { border-bottom: 4px solid #111; background: #111; }
.card-video-art::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 18px 18px; mix-blend-mode: screen; }
.news-card-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.trainer-bust { position: absolute; left: 70px; top: 35px; width: 132px; height: 132px; border-radius: 50%; background: #fff; border: 8px solid rgba(0,0,0,.18); }
.small-card, .floating-card { position: absolute; right: 80px; top: 28px; width: 136px; height: 190px; border: 6px solid #111; background: linear-gradient(135deg, #5fdbfd, #f9c62c); transform: rotate(8deg); }
.floating-card { right: 180px; top: 18px; transform: rotate(15deg); background: linear-gradient(135deg, #fff36b, #fff, #ff5fd6); }
.news-body { padding: 24px 32px 30px; text-align: center; }
.news-body h3 { margin: 0 0 20px; font-size: 1.42rem; line-height: 1.35; }
.carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 36px; }
.carousel-dots span { width: 11px; height: 11px; border-radius: 50%; background: #000; } .carousel-dots .active { background: var(--yellow); border: 2px solid #000; }


.how-section, .register-band { padding: 72px 14%; }
.how-section { background: #111; color: #fff; }
.how-section h2, .register-band h2 { margin: 0 0 24px; font-size: clamp(2.5rem, 4vw, 4.8rem); font-style: italic; }
.how-copy { max-width: 980px; margin: -8px 0 28px; color: rgba(255,255,255,.78); font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.75; }
.how-section ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.how-section li { padding: 24px; background: #222; border-top: 5px solid var(--cyan); } .how-section b { display: block; font-size: 1.7rem; margin-bottom: 10px; }
.register-band { display: grid; grid-template-columns: .9fr 1fr; gap: 32px; align-items: center; background: linear-gradient(135deg, #fff, #eaffff); }
.register-band p { font-size: 1.15rem; line-height: 1.6; }
.luma-panel { display: grid; place-items: center; min-height: 300px; padding: 28px; border: 3px dashed #111; background: #fff; text-align: center; }
.luma-panel span { font-size: 3rem; } .luma-panel strong { font-size: 1.6rem; }
.tcg-footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px 14%; background: #000; color: #fff; }

.tcg-card, .holo-card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; transform-style: preserve-3d; transition: transform .22s ease, box-shadow .22s ease; }
.tcg-card:is(:hover,.is-active), .holo-card:is(:hover,.is-active) { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px); box-shadow: 0 24px 52px rgba(0,0,0,.26); }
.holo-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.95), transparent 0 18%, rgba(95,219,253,.34) 28%, rgba(249,198,44,.28) 46%, rgba(255,75,181,.25) 62%, transparent 78%), repeating-linear-gradient(115deg, transparent 0 8px, rgba(255,255,255,.2) 9px 10px); mix-blend-mode: screen; transition: opacity .2s ease; }
.holo-card:is(:hover,.is-active)::after { opacity: .78; }

@media (max-width: 1100px) {
  .tcg-nav nav { gap: 14px; font-size: .85rem; }
  .hero-content { margin-left: 6%; width: 45vw; }
  .hero-video-shell { right: 3%; width: min(500px, 40vw); }
  .news-section { padding-inline: 8%; }
  .register-band { grid-template-columns: 1fr; padding-inline: 8%; }
}
@media (max-width: 900px) {
  .tcg-nav { height: 72px; padding: 0 14px; }
  .tcg-nav nav { display: none; }
  .tcg-logo { width: 92px; }
  .tcg-logo span { font-size: 1.45rem; }
  .tcg-hero { min-height: 950px; }
  .hero-content { width: auto; max-width: 390px; margin-left: 0; padding: 58px 22px 0; }
  .mega-label { max-width: 280px; font-size: .62rem; }
  h1 { font-size: clamp(2.7rem, 11.8vw, 3.55rem); line-height: .92; letter-spacing: -.045em; }
  .hero-subtitle { max-width: 330px; margin: 18px 0; font-size: .98rem; }
  .tcg-button, .black-button { min-width: 230px; }
  .hero-video-shell { left: 22px; right: 22px; top: 455px; width: auto; transform: none; }
  .energy-ribbon { left: 24%; width: 45%; border-width: 20px; }
  .ribbon-c { transform: rotate(68deg) scale(.54); }
  .agent-sigil { left: 44%; width: 170px; height: 220px; }
  .video-topbar, .video-caption-row { padding: 9px 11px; font-size: .46rem; }
  .video-caption-row span { font-size: .76rem; }
  .play-chip { width: 62px; height: 62px; font-size: 1.45rem; }
  .motion-toggle { display: none; }
  .hero-arrow { width: 44px; height: 44px; font-size: 2.2rem; }
  .news-cards, .how-section ol { grid-template-columns: 1fr; }
  .news-section, .how-section, .register-band { padding: 46px 22px; }
  .section-title-row { align-items: flex-start; flex-direction: column; }
  .tcg-footer { flex-direction: column; padding: 24px 22px; }
}

@media (max-width: 480px) {
  .tcg-hero { min-height: 760px; }
  .hero-video-shell { top: 455px; }
  .energy-ribbon { left: 24%; width: 44%; border-width: 18px; }
  .ribbon-a { transform: rotate(20deg) scale(.84); }
  .ribbon-c { transform: rotate(68deg) scale(.42); }
  .agent-sigil { left: 47%; width: 126px; height: 170px; }
}

.battle-dialog {
  position: relative;
  max-width: 540px;
  margin: 22px 0 16px;
  padding: 16px 20px 18px;
  border: 4px solid #111;
  border-radius: 3px;
  background: #fffdf0;
  color: #111;
  box-shadow: inset 0 0 0 4px #d8d0b0, 8px 8px 0 rgba(0,0,0,.28);
  font-family: var(--font-pixel);
  font-size: .62rem;
  line-height: 1.75;
}
.battle-dialog p { margin: 0; }
.battle-dialog span { float: right; animation: cursor-blink 1s steps(2,end) infinite; }
.battle-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px;
  width: min(430px, 100%);
  padding: 10px;
  border: 4px solid #111;
  background: #f8f8f8;
  box-shadow: 8px 8px 0 rgba(0,0,0,.24);
}
.battle-menu a {
  position: relative;
  padding: 11px 12px 10px 28px;
  background: #fff;
  color: #111;
  border: 2px solid #111;
  text-decoration: none;
  font-family: var(--font-pixel);
  font-size: .58rem;
  line-height: 1;
}
.battle-menu a:hover { background: var(--yellow); transform: translate(-2px, -2px); }
.battle-menu a:hover::before { content: "▶"; position: absolute; left: 8px; top: 9px; }
@keyframes cursor-blink { 50% { opacity: .25; } }

.gameboy-frame {
  border-radius: 28px 28px 36px 36px;
  border: 9px solid #1c252b;
  background: #2a3338;
  box-shadow: 0 28px 0 #0d1114, 0 36px 60px rgba(0,0,0,.62);
}
.gameboy-frame::after {
  content: "POWER";
  position: absolute;
  left: 18px;
  bottom: 12px;
  z-index: 4;
  color: #ff4b4b;
  font-family: var(--font-pixel);
  font-size: .48rem;
  text-shadow: 0 0 8px #ff4b4b;
}
.gameboy-screen {
  border: 12px solid #6b756e;
  border-radius: 8px;
  background-color: #9bbc0f;
  background-blend-mode: multiply;
  filter: saturate(.9) contrast(.95);
}
.gameboy-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 4px), radial-gradient(circle at 50% 35%, transparent 0 42%, rgba(0,0,0,.18));
  mix-blend-mode: multiply;
}
.gameboy-frame .video-caption-row { border-top: 4px solid #1c252b; }

.pokedex-card { border: 4px solid #111; border-radius: 10px; overflow: hidden; }
.type-strip { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; background: #c8f7a7; border-bottom: 4px solid #111; font-family: var(--font-pixel); font-size: .56rem; }
.type-strip span { padding: 4px 8px; background: #65d65d; border: 2px solid #111; }
.type-strip.psychic { background: #ffd1f0; }
.type-strip.psychic span { background: #ff72cb; }
.move-line { margin: -10px 0 16px; color: #555; font-weight: 800; }

.command-list { grid-template-columns: repeat(4, 1fr) !important; }
.command-list li { border: 4px solid #fff; border-top-color: var(--cyan); box-shadow: 8px 8px 0 rgba(255,255,255,.08); }

@media (max-width: 900px) {
  .battle-dialog { max-width: 340px; padding: 12px 14px; font-size: .5rem; line-height: 1.65; }
  .battle-menu { width: min(340px, calc(100vw - 44px)); grid-template-columns: repeat(2, 1fr); }
  .battle-menu a { font-size: .5rem; padding: 10px 8px 9px 25px; }
  .command-list { grid-template-columns: 1fr !important; }
  .route-node { min-width: 74px; min-height: 54px; font-size: .45rem; }
}
@media (max-width: 480px) {
  .battle-dialog { margin-top: 16px; }
  .gameboy-frame { border-width: 6px; border-radius: 18px 18px 24px 24px; }
  .gameboy-screen { border-width: 7px; }
  .gameboy-frame::after { display: none; }
}
@media (max-width: 900px) {
  .hero-caption { left: 52px; right: 52px; bottom: 8px; font-size: .78rem; line-height: 1.25; white-space: normal; }
}
@media (max-width: 480px) {
  .hero-caption { font-size: .68rem; }
}

.flavor-line { margin: -7px 0 17px; color: #111; font-weight: 900; font-style: italic; }
@media (max-width: 900px) { .flavor-line { font-size: .9rem; } }

body { background: #fff8df; }
.tcg-nav { border-bottom: 4px solid #d71920; box-shadow: 0 4px 0 #fff, 0 8px 0 #111; }
.tcg-nav nav a, .tcg-logo small { font-family: var(--font-pixel); }
.tcg-nav nav a { font-size: .62rem; }
.tcg-hero { background: radial-gradient(circle at 50% 42%, rgba(155,188,15,.15), transparent 0 30%, rgba(0,0,0,.2) 54%, #050505 82%), #050505; }
.mega-label { color: #d8ffcf; }
h1 { font-family: var(--font-sans); text-shadow: 0 4px 0 #1d4f94, 0 0 14px #8ee8ff; }
.battle-dialog, .battle-menu, .news-card, .luma-panel { image-rendering: pixelated; }
.battle-dialog { border-radius: 0; background: #fff8df; box-shadow: inset 0 0 0 4px #c5b97c, 7px 7px 0 #111; }
.battle-menu { border-radius: 0; box-shadow: 7px 7px 0 #111; }
.battle-menu a { border-radius: 0; }

.gameboy-frame {
  padding: 18px 42px 42px 42px;
  border: 0;
  border-radius: 28px 28px 54px 54px;
  background: linear-gradient(145deg, #6330a5 0%, #4a2488 50%, #2b155c 100%);
  box-shadow: inset 0 0 0 5px #8f70d8, inset 0 0 0 10px #241040, 0 30px 0 #160b28, 0 46px 70px rgba(0,0,0,.7);
}
.gameboy-frame::before {
  content: "GAME BOY ADVANCE";
  position: absolute;
  left: 42px;
  right: 42px;
  bottom: 15px;
  z-index: 5;
  color: #d8d0ff;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: .48rem;
  letter-spacing: .08em;
}
.gameboy-frame::after {
  content: "A";
  left: auto;
  right: 18px;
  bottom: 56px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d83f87;
  color: #fff;
  font-size: .48rem;
  box-shadow: -34px 16px 0 #d83f87;
}
.gameboy-screen { border: 10px solid #1b1b22; border-radius: 5px; }
.video-topbar { margin: 0 0 8px; border: 3px solid #1b1b22; background: #0c0b14; }
.video-caption-row { border: 3px solid #1b1b22; border-top: 0; }

.news-section { background: #fff8df; padding-inline: 14%; }
.section-kicker { margin: 0 0 8px; color: #d71920; font-family: var(--font-pixel); font-size: .65rem; }
.section-copy { max-width: 520px; margin: 12px 0 0; color: #333; font-size: 1.05rem; line-height: 1.55; font-weight: 800; }
.news-layout { display: grid; grid-template-columns: minmax(240px, .68fr) 1.32fr; gap: 28px; align-items: stretch; }
.trainer-note { padding: 24px; border: 5px solid #111; background: #fff; box-shadow: 9px 9px 0 #111; }
.trainer-note span { display: inline-block; margin-bottom: 14px; padding: 5px 8px; border: 2px solid #111; background: #ffdf49; font-family: var(--font-pixel); font-size: .55rem; }
.trainer-note strong { display: block; font-size: 1.7rem; line-height: 1.12; font-weight: 900; }
.trainer-note p { color: #444; line-height: 1.55; font-weight: 700; }
.news-cards { align-items: stretch; }
.pokedex-card { background: #fff; box-shadow: 9px 9px 0 #111; }
.news-body h3 { font-family: var(--font-sans); font-weight: 900; }
.flavor-line { font-family: var(--font-pixel); font-size: .58rem; line-height: 1.55; }
.black-button { border: 3px solid #111; box-shadow: 5px 5px 0 #999; font-family: var(--font-pixel); font-size: .56rem; }
.how-section { background: #121212; border-top: 6px solid #d71920; border-bottom: 6px solid #d71920; }
.command-list li { background: #202020; }

@media (max-width: 1100px) {
  .news-section { padding-inline: 8%; }
  .news-layout { grid-template-columns: 1fr; }
  .trainer-note { max-width: none; }
}
@media (max-width: 900px) {
  .gameboy-frame { padding: 12px 22px 32px; border-radius: 20px 20px 38px 38px; }
  .gameboy-frame::before { left: 20px; right: 20px; bottom: 9px; font-size: .36rem; }
  .gameboy-frame::after { right: 8px; bottom: 40px; width: 20px; height: 20px; box-shadow: -24px 10px 0 #d83f87; font-size: .36rem; }
  .trainer-note strong { font-size: 1.35rem; }
  .section-copy { font-size: .98rem; }
}
@media (max-width: 480px) {
  .gameboy-frame { padding: 10px 17px 28px; }
  .video-topbar { margin-bottom: 5px; }
  .section-kicker, .trainer-note span, .black-button, .flavor-line { font-size: .48rem; }
}
@media (max-width: 900px) {
  .tcg-hero { min-height: 1020px; }
  .floating-card { top: 30px; right: 120px; width: 118px; height: 166px; }
}
@media (max-width: 480px) {
  .tcg-hero { min-height: 800px; }
  .floating-card { top: 38px; right: 92px; width: 112px; height: 156px; }
}

.hero-video-shell { width: min(720px, 38vw); top: 112px; }
.gameboy-frame {
  aspect-ratio: 800 / 600;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.gameboy-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/gba-frame.svg") center / contain no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 30px 34px rgba(0,0,0,.62));
}
.gameboy-frame::after { display: none; }
.gameboy-frame .video-topbar {
  position: absolute;
  left: 30.5%;
  top: 26.5%;
  width: 39%;
  height: 26px;
  z-index: 3;
  margin: 0;
  padding: 5px 8px;
  border: 0;
  background: rgba(0,0,0,.82);
  font-size: .42rem;
}
.gameboy-frame .video-topbar b { font-size: .42rem; }
.gameboy-screen {
  position: absolute;
  left: 30.25%;
  top: 32%;
  z-index: 2;
  width: 39.5%;
  aspect-ratio: 316 / 220;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 3px #111, inset 0 0 0 6px rgba(255,255,255,.15);
}
.gameboy-frame .video-caption-row {
  position: absolute;
  left: 30.25%;
  top: 68.6%;
  z-index: 3;
  width: 39.5%;
  height: 28px;
  padding: 6px 8px;
  border: 0;
  font-size: .42rem;
}
.gameboy-frame .video-caption-row span { font-size: .58rem; }
.gameboy-frame .play-chip { width: 54px; height: 54px; font-size: 1.45rem; }

@media (max-width: 1100px) {
  .hero-video-shell { width: min(620px, 43vw); top: 145px; }
}
@media (max-width: 900px) {
  .hero-video-shell { top: 490px; }
  .gameboy-frame .video-topbar { height: 22px; padding: 4px 6px; font-size: .32rem; }
  .gameboy-frame .video-topbar b { font-size: .32rem; }
  .gameboy-frame .video-caption-row { height: 24px; padding: 5px 6px; font-size: .32rem; }
  .gameboy-frame .video-caption-row span { font-size: .46rem; }
  .gameboy-frame .play-chip { width: 46px; height: 46px; font-size: 1.2rem; }
}
@media (max-width: 480px) {
  .hero-video-shell { top: 472px; left: 2px; right: 2px; }
}
.hero-video-shell::after,
.hero-video-shell.holo-card::after,
.gameboy-frame.holo-card::after { display: none !important; opacity: 0 !important; }
.gameboy-frame::before { box-shadow: none !important; border-radius: 0 !important; }
.gameboy-frame { overflow: visible; }

.hero-video-shell { right: 3.5%; top: 94px; width: min(900px, 48vw); }
.gameboy-frame .video-topbar { left: 28.5%; top: 25.2%; width: 43%; height: 30px; font-size: .48rem; }
.gameboy-frame .video-topbar b { font-size: .48rem; }
.gameboy-screen { left: 28.5%; top: 31%; width: 43%; aspect-ratio: 4 / 3; }
.gameboy-frame .video-caption-row { left: 28.5%; top: 71.8%; width: 43%; height: 32px; font-size: .48rem; }
.gameboy-frame .video-caption-row span { font-size: .62rem; }
.gameboy-frame .play-chip { width: 64px; height: 64px; }
@media (max-width: 1100px) {
  .hero-video-shell { right: 2%; top: 130px; width: min(760px, 48vw); }
}
@media (max-width: 900px) {
  .hero-video-shell { top: 490px; left: 0; right: 0; width: min(760px, 100vw); margin-inline: auto; }
  .gameboy-frame .video-topbar { height: 24px; font-size: .36rem; }
  .gameboy-frame .video-topbar b { font-size: .36rem; }
  .gameboy-frame .video-caption-row { height: 25px; font-size: .34rem; }
  .gameboy-frame .video-caption-row span { font-size: .48rem; }
}
@media (max-width: 480px) {
  .hero-video-shell { top: 468px; left: -18px; right: -18px; width: calc(100vw + 36px); }
  .gameboy-frame .video-topbar { height: 19px; padding: 3px 5px; }
  .gameboy-frame .video-caption-row { height: 20px; padding: 4px 5px; }
  .gameboy-frame .play-chip { width: 42px; height: 42px; }
}
.tcg-hero { min-height: 820px; }
@media (max-width: 900px) { .tcg-hero { min-height: 1120px; } }
@media (max-width: 480px) {
  .tcg-hero { min-height: 830px; }
  .hero-video-shell { left: 0; right: 0; width: 100vw; }
}

.battle-menu {
  position: relative;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 34px;
  width: min(545px, 100%);
  padding: 20px 26px 18px;
  border: 4px solid #111;
  outline: 5px solid #fff;
  background: #fff7ff;
  box-shadow: 8px 8px 0 #111;
}
.battle-menu::before,
.battle-menu::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(45deg, #111 0 25%, transparent 25% 75%, #111 75%),
    linear-gradient(-45deg, #111 0 25%, transparent 25% 75%, #111 75%);
  background-size: 13px 13px;
}
.battle-menu::before { left: -7px; top: -7px; }
.battle-menu::after { right: -7px; bottom: -7px; }
.battle-menu a {
  border: 0;
  background: transparent;
  min-height: 58px;
  padding: 14px 10px 10px 48px;
  font-family: var(--font-pixel);
  font-size: clamp(.82rem, 1.55vw, 1.45rem);
  letter-spacing: .04em;
  text-decoration: none;
  color: #111;
  transition: none;
}
.battle-menu a:hover,
.battle-menu a.selected { background: transparent; transform: none; }
.battle-menu a.selected::before,
.battle-menu a:hover::before {
  content: "▶";
  position: absolute;
  left: 8px;
  top: 13px;
  font-size: .92em;
  animation: cursor-blink 1s steps(2,end) infinite;
}
@media (max-width: 900px) {
  .battle-menu { width: min(360px, calc(100vw - 44px)); gap: 0 14px; padding: 14px 16px 12px; }
  .battle-menu a { min-height: 42px; padding: 10px 4px 8px 32px; font-size: .72rem; }
  .battle-menu a.selected::before,
  .battle-menu a:hover::before { left: 5px; top: 9px; }
}
@media (max-width: 480px) {
  .battle-menu { width: calc(100vw - 44px); gap: 0 8px; }
  .battle-menu a { font-size: .62rem; padding-left: 25px; }
}

.battle-dialog {
  display: flex;
  align-items: center;
  min-height: 136px;
  max-width: 620px;
  padding: 28px 38px;
  border: 0;
  outline: 0;
  background: #fff7ff;
  color: #1a1018;
  box-shadow: none;
}
.battle-dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 7px solid #1a1018;
  box-shadow: inset 0 0 0 8px #fff7ff, inset 0 0 0 13px #1a1018;
  pointer-events: none;
}
.battle-dialog::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-top: 5px solid #1a1018;
  border-bottom: 5px solid #1a1018;
  pointer-events: none;
}
.battle-shout {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-pixel);
  font-size: clamp(1.35rem, 2.45vw, 2.35rem);
  line-height: 1.35;
  letter-spacing: .04em;
  white-space: nowrap;
}
.battle-shout::first-letter { margin-right: .02em; }
@media (max-width: 900px) {
  .battle-dialog { min-height: 96px; max-width: 360px; padding: 20px 22px; }
  .battle-dialog::before { border-width: 5px; box-shadow: inset 0 0 0 5px #fff7ff, inset 0 0 0 9px #1a1018; }
  .battle-dialog::after { inset: 7px; border-top-width: 3px; border-bottom-width: 3px; }
  .battle-shout { font-size: clamp(.95rem, 5vw, 1.4rem); }
}
@media (max-width: 480px) {
  .battle-dialog { min-height: 74px; padding: 16px 18px; }
  .battle-shout { font-size: .9rem; }
}
:root { --battle-panel-width: 545px; }
.battle-dialog,
.battle-menu {
  width: min(var(--battle-panel-width), 100%);
  max-width: none;
}
@media (max-width: 900px) {
  :root { --battle-panel-width: 360px; }
  .battle-dialog,
  .battle-menu { width: min(var(--battle-panel-width), calc(100vw - 44px)); max-width: none; }
}
@media (max-width: 480px) {
  .battle-dialog,
  .battle-menu { width: calc(100vw - 44px); }
}

.battle-status {
  position: absolute;
  z-index: 2;
  width: 360px;
  padding: 18px 22px 20px;
  color: #21171f;
  font-family: var(--font-pixel);
  background: #fff7ff;
  border-bottom: 6px solid #21171f;
  border-left: 6px solid #21171f;
  box-shadow: 8px 8px 0 rgba(0,0,0,.22);
}
.battle-status::after {
  content: "";
  position: absolute;
  right: -44px;
  bottom: -6px;
  border-left: 44px solid #21171f;
  border-top: 28px solid transparent;
}
.battle-status strong { display: inline-block; font-size: 1.04rem; letter-spacing: .04em; }
.battle-status span { margin-left: 18px; font-size: .82rem; }
.battle-status em { display: block; margin-top: 8px; text-align: right; font-style: normal; font-size: 1rem; }
.hp-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.hp-row b { font-size: .72rem; }
.hp-row i {
  position: relative;
  display: block;
  flex: 1;
  height: 13px;
  border: 4px solid #21171f;
  background: #fff;
}
.hp-row i::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--hp);
  background: #57b65f;
}
.enemy-status { left: 7.5%; top: 120px; transform: scale(.78); transform-origin: left top; opacity: .92; }
.player-status { right: 8%; bottom: 122px; transform: scale(.82); transform-origin: right bottom; opacity: .94; }
.player-sprite {
  position: absolute;
  z-index: 2;
  left: 20%;
  bottom: 125px;
  width: 112px;
  height: 126px;
  image-rendering: pixelated;
  background:
    linear-gradient(#111 0 0) 42px 0 / 28px 18px no-repeat,
    linear-gradient(#ffb45b 0 0) 28px 16px / 66px 72px no-repeat,
    linear-gradient(#dc6a39 0 0) 18px 55px / 28px 58px no-repeat,
    linear-gradient(#dc6a39 0 0) 76px 54px / 26px 55px no-repeat,
    linear-gradient(#fff 0 0) 42px 36px / 20px 28px no-repeat,
    linear-gradient(#fff 0 0) 74px 61px / 18px 20px no-repeat,
    linear-gradient(#111 0 0) 22px 110px / 78px 14px no-repeat;
  filter: drop-shadow(8px 8px 0 rgba(0,0,0,.35));
  opacity: .82;
}
.player-sprite::before {
  content: "";
  position: absolute;
  left: 0;
  top: 72px;
  width: 24px;
  height: 32px;
  background: #111;
}
.player-sprite::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 18px;
  width: 20px;
  height: 20px;
  background: #111;
}
@media (min-width: 901px) {
  .hero-content { padding-top: 188px; }
  .battle-dialog, .battle-menu { position: relative; z-index: 4; }
}
@media (max-width: 1200px) {
  .enemy-status { transform: scale(.66); }
  .player-status { transform: scale(.68); right: 4%; }
  .player-sprite { left: 15%; transform: scale(.78); transform-origin: left bottom; }
}
@media (max-width: 900px) {
  .battle-status, .player-sprite { display: none; }
}

@media (min-width: 901px) {
  .tcg-hero { min-height: 1040px; }
  .motion-toggle { top: 22px; }
  .enemy-status { left: 7%; top: 118px; transform: scale(.86); transform-origin: left top; }
  .hero-video-shell {
    right: 4.5%;
    top: 104px;
    width: min(780px, 42vw);
    transform: perspective(1000px) rotateY(-6deg) rotateZ(1deg);
    transform-origin: center center;
  }
  .player-sprite { left: 13%; bottom: 170px; transform: scale(1.08); transform-origin: left bottom; opacity: .9; }
  .player-status { right: 6.5%; bottom: 118px; transform: scale(.92); transform-origin: right bottom; }
  .hero-content { padding-top: 278px; }
  .battle-dialog, .battle-menu { margin-left: 0; }
  .hero-caption { bottom: 22px; }
}
@media (min-width: 901px) and (max-width: 1350px) {
  .hero-video-shell { right: 2.5%; top: 130px; width: min(650px, 43vw); }
  .enemy-status { transform: scale(.72); }
  .player-status { transform: scale(.76); right: 3.5%; bottom: 126px; }
  .player-sprite { left: 12%; bottom: 160px; transform: scale(.86); }
  .hero-content { padding-top: 286px; }
}

/* Visual Ralph composition: the GBA becomes the enemy-side sprite, with the
   Harness HP panel attached to the same upper-right battle cluster. */
.player-run-video-shell {
  position: absolute;
  z-index: 4;
  left: 4.2%;
  bottom: 66px;
  width: min(650px, 44vw);
  filter: drop-shadow(18px 24px 26px rgba(0,0,0,.62));
}
.player-run-video-frame {
  position: relative;
  padding: 12px;
  border: 7px solid #1a1018;
  background: #fff7ff;
  box-shadow: inset 0 0 0 6px #fff7ff, inset 0 0 0 12px #1a1018;
}
.player-run-video-frame .video-topbar {
  margin: 0;
  border: 0;
  border-bottom: 5px solid #1a1018;
  background: #0c0b14;
}
.player-run-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050505;
  border: 0;
}
.player-run-screen .hero-video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.player-run-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
}

@media (min-width: 901px) {
  .tcg-hero { min-height: 900px; }
  .enemy-status { display: none; }
  .hero-content {
    width: min(850px, 46vw);
    margin-left: 4.2%;
    padding-top: 182px;
  }
  .battle-dialog,
  .battle-menu {
    display: none;
  }
  .hero-video-shell {
    right: 2.5%;
    top: 132px;
    width: min(820px, 47vw);
    transform: perspective(1000px) rotateY(-5deg) rotateZ(1deg);
  }
  .enemy-harness-status {
    display: block;
    right: 4.3%;
    top: 74px;
    bottom: auto;
    z-index: 5;
    transform: scale(.82);
    transform-origin: right top;
  }
  .enemy-harness-status::after {
    right: auto;
    left: -44px;
    border-left: 0;
    border-right: 44px solid #21171f;
    border-top: 28px solid transparent;
  }
  .player-sprite {
    left: auto;
    right: 13%;
    top: 336px;
    bottom: auto;
    transform: scale(.7);
    opacity: .18;
  }
}

@media (min-width: 901px) and (max-width: 1350px) {
  .hero-content { width: min(620px, 44vw); padding-top: 188px; }
  .hero-video-shell { top: 158px; width: min(680px, 47vw); }
  .enemy-harness-status { right: 3.5%; top: 92px; transform: scale(.68); }
  .player-run-video-shell { width: min(560px, 46vw); bottom: 90px; }
}

@media (max-width: 900px) {
  .player-run-video-shell {
    left: 22px;
    right: 22px;
    bottom: 62px;
    width: auto;
  }
  .player-run-video-frame { padding: 8px; border-width: 5px; box-shadow: inset 0 0 0 4px #fff7ff, inset 0 0 0 8px #1a1018; }
  .player-run-video-frame .video-topbar { padding: 8px 10px; font-size: .42rem; }
  .tcg-hero { min-height: 1240px; }
}

@media (max-width: 480px) {
  .player-run-video-shell { left: 14px; right: 14px; bottom: 48px; }
  .player-run-video-frame .video-topbar { padding: 6px 8px; font-size: .34rem; }
  .tcg-hero { min-height: 940px; }
}

/* Preserve the Pokémon Red battle staging across desktop and mobile. */
@media (min-width: 901px) {
  .battle-dialog,
  .battle-menu {
    display: flex;
  }
  .battle-menu { display: grid; }
  .battle-dialog {
    min-height: 92px;
    width: min(500px, 100%);
    padding: 20px 26px;
    margin-top: 28px;
  }
  .battle-shout {
    font-size: clamp(1.05rem, 1.55vw, 1.55rem);
  }
  .battle-menu {
    width: min(500px, 100%);
    padding: 14px 20px 12px;
    gap: 0 22px;
  }
  .battle-menu a {
    min-height: 46px;
    padding: 11px 8px 8px 38px;
    font-size: clamp(.7rem, 1.05vw, 1rem);
  }
  .battle-menu a.selected::before,
  .battle-menu a:hover::before {
    left: 7px;
    top: 10px;
  }
  .player-run-video-shell {
    width: min(500px, 31vw);
    left: 4.2%;
    bottom: 70px;
  }
}

@media (min-width: 901px) and (max-width: 1350px) {
  .battle-dialog,
  .battle-menu { width: min(420px, 100%); }
  .battle-dialog { min-height: 80px; padding: 16px 20px; margin-top: 20px; }
  .battle-shout { font-size: clamp(.88rem, 1.25vw, 1.18rem); }
  .battle-menu { padding: 12px 16px 10px; gap: 0 12px; }
  .battle-menu a { min-height: 38px; padding: 9px 4px 7px 30px; font-size: .66rem; }
  .player-run-video-shell { width: min(420px, 33vw); bottom: 82px; }
}

@media (max-width: 900px) {
  .tcg-hero {
    min-height: 860px;
  }
  .hero-content {
    position: relative;
    z-index: 5;
    width: 58vw;
    max-width: 390px;
    padding: 54px 0 0 18px;
    margin-left: 0;
  }
  h1 {
    font-size: clamp(2rem, 9.2vw, 3.1rem);
    line-height: .9;
  }
  .mega-label { font-size: .52rem; }
  .battle-dialog,
  .battle-menu {
    display: flex;
    width: min(310px, 58vw);
  }
  .battle-menu { display: grid; }
  .battle-dialog {
    min-height: 68px;
    margin-top: 18px;
    padding: 13px 16px;
  }
  .battle-shout {
    font-size: clamp(.66rem, 2.6vw, .9rem);
    white-space: normal;
  }
  .battle-menu {
    padding: 10px 12px 8px;
    gap: 0 8px;
  }
  .battle-menu a {
    min-height: 32px;
    padding: 8px 2px 6px 24px;
    font-size: clamp(.48rem, 2.15vw, .62rem);
  }
  .battle-menu a.selected::before,
  .battle-menu a:hover::before {
    left: 3px;
    top: 7px;
  }
  .hero-video-shell {
    left: auto;
    right: -5vw;
    top: 142px;
    width: 62vw;
    margin: 0;
    transform: perspective(900px) rotateY(-6deg) rotateZ(1deg);
  }
  .enemy-harness-status {
    display: block;
    right: 10px;
    top: 96px;
    width: 280px;
    transform: scale(.54);
    transform-origin: right top;
  }
  .enemy-harness-status::after {
    right: auto;
    left: -44px;
    border-left: 0;
    border-right: 44px solid #21171f;
    border-top: 28px solid transparent;
  }
  .player-run-video-shell {
    left: 18px;
    right: auto;
    bottom: 80px;
    width: min(360px, 54vw);
  }
  .player-run-video-frame .video-topbar {
    padding: 6px 8px;
    font-size: .32rem;
  }
  .player-run-video-frame { padding: 7px; }
  .hero-caption {
    bottom: 18px;
    left: 18px;
    right: 18px;
  }
}

@media (max-width: 480px) {
  .tcg-hero { min-height: 760px; }
  .hero-content {
    width: 57vw;
    padding-top: 42px;
    padding-left: 14px;
  }
  .mega-label { max-width: 210px; font-size: .43rem; }
  h1 { font-size: clamp(1.7rem, 8.7vw, 2.25rem); }
  .battle-dialog,
  .battle-menu { width: min(235px, 57vw); }
  .battle-dialog { min-height: 52px; padding: 10px 12px; margin-top: 12px; }
  .battle-dialog::before { border-width: 4px; box-shadow: inset 0 0 0 4px #fff7ff, inset 0 0 0 7px #1a1018; }
  .battle-dialog::after { inset: 6px; border-top-width: 2px; border-bottom-width: 2px; }
  .battle-shout { font-size: .52rem; }
  .battle-menu { padding: 8px 9px 6px; gap: 0 4px; outline-width: 3px; }
  .battle-menu a { min-height: 27px; padding: 7px 0 5px 18px; font-size: .42rem; }
  .battle-menu a.selected::before,
  .battle-menu a:hover::before { left: 1px; top: 6px; }
  .hero-video-shell {
    right: -12vw;
    top: 118px;
    width: 70vw;
  }
  .enemy-harness-status {
    right: 4px;
    top: 82px;
    transform: scale(.42);
  }
  .player-run-video-shell {
    left: 14px;
    bottom: 72px;
    width: min(250px, 55vw);
  }
  .player-run-video-frame { padding: 5px; border-width: 4px; }
  .player-run-video-frame .video-topbar { padding: 4px 5px; font-size: .25rem; border-bottom-width: 3px; }
  .player-run-screen .play-chip,
  .gameboy-frame .play-chip { width: 32px; height: 32px; font-size: .9rem; }
}

/* Final balance pass: keep command UI readable and make Harness the smaller player-side screen. */
@media (min-width: 901px) {
  .battle-dialog,
  .battle-menu { z-index: 7; }
  .player-run-video-shell {
    z-index: 5;
    width: min(430px, 28vw);
    bottom: 54px;
  }
}

@media (min-width: 901px) and (max-width: 1350px) {
  .player-run-video-shell { width: min(360px, 30vw); bottom: 62px; }
}

@media (max-width: 900px) {
  .hero-video-shell {
    right: -7vw;
    top: 174px;
    width: 58vw;
  }
  .enemy-harness-status {
    right: -4px;
    top: 96px;
    width: 330px;
    transform: scale(.52);
  }
  .player-run-video-shell {
    width: min(300px, 48vw);
    bottom: 70px;
  }
}

@media (max-width: 480px) {
  .hero-video-shell {
    right: -10vw;
    top: 198px;
    width: 64vw;
  }
  .enemy-harness-status {
    right: -8px;
    top: 84px;
    width: 330px;
    transform: scale(.48);
  }
  .player-run-video-shell {
    width: min(220px, 50vw);
    bottom: 64px;
  }
}

/* Mobile-specific battle silhouette: make the enemy GBA readable instead of cropped. */
@media (max-width: 900px) {
  .hero-video-shell {
    right: 6px;
    top: 238px;
    width: 46vw;
    transform: perspective(900px) rotateY(-4deg) rotateZ(1deg);
  }
  .enemy-harness-status {
    right: 4px;
    top: 86px;
    width: 420px;
    transform: scale(.42);
  }
}

@media (max-width: 480px) {
  .hero-video-shell {
    right: 4px;
    top: 266px;
    width: 48vw;
  }
  .enemy-harness-status {
    right: 2px;
    top: 84px;
    width: 420px;
    transform: scale(.38);
  }
}

/* Visual Ralph correction: Harness is the player-side foreground subject, so it
   should read larger than the enemy GBA. The Red battle panels sit to its right. */
@media (min-width: 901px) {
  .hero-content {
    position: static;
    z-index: auto;
    width: auto;
    margin-left: 0;
    padding-top: 0;
  }
  .hero-content .mega-label,
  .hero-content h1 {
    position: absolute;
    left: 4.2%;
    z-index: 6;
  }
  .hero-content .mega-label { top: 190px; }
  .hero-content h1 { top: 226px; width: min(850px, 48vw); }

  .player-run-video-shell {
    left: 4.2%;
    bottom: 76px;
    width: min(660px, 36vw);
    z-index: 6;
    transform: perspective(900px) rotateY(5deg) rotateZ(-1deg);
    transform-origin: left bottom;
  }
  .battle-dialog,
  .battle-menu {
    position: absolute;
    left: min(760px, 43vw);
    z-index: 7;
    width: min(560px, 30vw);
    margin: 0;
  }
  .battle-dialog {
    bottom: 304px;
    min-height: 94px;
    padding: 20px 28px;
  }
  .battle-menu {
    bottom: 102px;
    min-height: 176px;
    padding: 18px 24px 14px;
  }
  .battle-shout { font-size: clamp(1rem, 1.45vw, 1.6rem); }
  .battle-menu a {
    min-height: 58px;
    font-size: clamp(.74rem, 1.04vw, 1.08rem);
  }
  .hero-video-shell {
    right: 2.5%;
    top: 142px;
    width: min(760px, 42vw);
    z-index: 4;
  }
  .enemy-harness-status { z-index: 5; }
}

@media (min-width: 901px) and (max-width: 1350px) {
  .hero-content .mega-label { top: 190px; }
  .hero-content h1 { top: 224px; width: min(560px, 42vw); }
  .player-run-video-shell {
    width: min(500px, 37vw);
    bottom: 84px;
  }
  .battle-dialog,
  .battle-menu {
    left: min(560px, 42vw);
    width: min(420px, 32vw);
  }
  .battle-dialog { bottom: 292px; min-height: 82px; padding: 16px 20px; }
  .battle-menu { bottom: 106px; min-height: 160px; padding: 14px 16px 10px; }
  .battle-shout { font-size: .96rem; }
  .battle-menu a { min-height: 50px; font-size: .7rem; }
}

@media (max-width: 900px) {
  .tcg-hero { min-height: 900px; }
  .hero-content {
    position: static;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
  }
  .hero-content .mega-label,
  .hero-content h1 {
    position: absolute;
    left: 18px;
    z-index: 6;
  }
  .hero-content .mega-label { top: 118px; }
  .hero-content h1 { top: 148px; width: 58vw; }
  .player-run-video-shell {
    left: 16px;
    bottom: 72px;
    width: min(430px, 58vw);
    z-index: 6;
    transform: perspective(820px) rotateY(4deg) rotateZ(-1deg);
    transform-origin: left bottom;
  }
  .battle-dialog,
  .battle-menu {
    position: absolute;
    left: calc(16px + min(430px, 58vw) + 10px);
    right: 10px;
    z-index: 7;
    width: auto;
    margin: 0;
  }
  .battle-dialog {
    bottom: 250px;
    min-height: 62px;
    padding: 12px 13px;
  }
  .battle-menu {
    bottom: 96px;
    min-height: 132px;
    padding: 10px 10px 8px;
    gap: 0 6px;
  }
  .battle-shout { font-size: clamp(.48rem, 2.4vw, .72rem); }
  .battle-menu a {
    min-height: 40px;
    padding-left: 18px;
    font-size: clamp(.38rem, 1.9vw, .54rem);
  }
  .hero-video-shell {
    right: 2px;
    top: 238px;
    width: 44vw;
    z-index: 4;
  }
}

@media (max-width: 480px) {
  .tcg-hero { min-height: 790px; }
  .hero-content .mega-label { top: 118px; left: 16px; }
  .hero-content h1 { top: 148px; left: 16px; width: 60vw; }
  .player-run-video-shell {
    left: 14px;
    bottom: 68px;
    width: 54vw;
  }
  .battle-dialog,
  .battle-menu {
    left: calc(14px + 54vw + 8px);
    right: 6px;
  }
  .battle-dialog { bottom: 222px; min-height: 52px; padding: 9px 8px; }
  .battle-menu { bottom: 86px; min-height: 116px; padding: 8px 7px 6px; }
  .battle-shout { font-size: clamp(.34rem, 2.05vw, .48rem); }
  .battle-menu a { min-height: 34px; padding-left: 12px; font-size: clamp(.28rem, 1.65vw, .4rem); }
  .battle-menu a.selected::before,
  .battle-menu a:hover::before { left: 0; top: 6px; }
  .hero-video-shell {
    top: 268px;
    width: 46vw;
  }
}

/* Keep the right-side battle panels inside narrow mobile viewports. */
@media (max-width: 900px) {
  .player-run-video-shell {
    width: 42vw !important;
  }
  .battle-dialog,
  .battle-menu {
    left: 47vw !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 480px) {
  .player-run-video-shell {
    width: 42vw !important;
  }
  .battle-dialog,
  .battle-menu {
    left: 47vw !important;
    right: 6px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Narrow-phone fit: panels remain to the right of Harness, but use compact GB UI widths. */
@media (max-width: 480px) {
  .battle-dialog,
  .battle-menu {
    left: auto !important;
    right: 6px !important;
    width: 146px !important;
    max-width: 146px !important;
  }
  .battle-dialog { bottom: 222px; }
  .battle-menu { bottom: 86px; }
  .battle-shout { font-size: .36rem; }
  .battle-menu { grid-template-columns: 1fr 1fr; gap: 0 2px; }
  .battle-menu a { min-height: 34px; padding-left: 11px; font-size: .31rem; }
}

/* Visual Ralph placement pass: enemy GBA anchors at the top-right; its HARNESS
   status plate is attached to the GBA's upper-left edge. The player summon
   dialog tilts above the foreground Harness video. */
@media (min-width: 901px) {
  .hero-video-shell {
    top: 54px !important;
    right: 2.2% !important;
    width: min(800px, 43vw) !important;
    z-index: 5 !important;
    transform: perspective(1000px) rotateY(-5deg) rotateZ(1deg) !important;
    transform-origin: top right !important;
  }
  .enemy-harness-status {
    top: 92px !important;
    right: min(650px, 34vw) !important;
    z-index: 8 !important;
    transform: scale(.78) rotate(-1deg) !important;
    transform-origin: right top !important;
  }
  .player-run-video-shell {
    left: 4.2% !important;
    bottom: 76px !important;
    width: min(660px, 36vw) !important;
    z-index: 6 !important;
  }
  .battle-dialog {
    left: 5.2% !important;
    bottom: 454px !important;
    width: min(610px, 34vw) !important;
    z-index: 9 !important;
    transform: rotate(-2.5deg) skewX(-1deg) !important;
    transform-origin: left bottom !important;
  }
  .battle-menu {
    left: min(760px, 43vw) !important;
    bottom: 116px !important;
    width: min(520px, 28vw) !important;
    z-index: 7 !important;
  }
}

@media (min-width: 901px) and (max-width: 1350px) {
  .hero-video-shell {
    top: 72px !important;
    width: min(650px, 43vw) !important;
  }
  .enemy-harness-status {
    top: 104px !important;
    right: min(520px, 34vw) !important;
    transform: scale(.64) rotate(-1deg) !important;
  }
  .player-run-video-shell {
    width: min(520px, 38vw) !important;
    bottom: 82px !important;
  }
  .battle-dialog {
    bottom: 382px !important;
    width: min(470px, 36vw) !important;
  }
  .battle-menu {
    left: min(575px, 43vw) !important;
    width: min(390px, 31vw) !important;
  }
}

@media (max-width: 900px) {
  .tcg-hero { min-height: 900px; }
  .hero-video-shell {
    top: 86px !important;
    right: -4vw !important;
    width: 58vw !important;
    z-index: 5 !important;
    transform: perspective(900px) rotateY(-5deg) rotateZ(1deg) !important;
    transform-origin: top right !important;
  }
  .enemy-harness-status {
    top: 102px !important;
    right: 40vw !important;
    width: 330px !important;
    z-index: 8 !important;
    transform: scale(.45) rotate(-1deg) !important;
    transform-origin: right top !important;
  }
  .player-run-video-shell {
    left: 16px !important;
    bottom: 68px !important;
    width: 56vw !important;
    z-index: 6 !important;
  }
  .battle-dialog {
    left: 18px !important;
    right: auto !important;
    bottom: 260px !important;
    width: 62vw !important;
    max-width: 62vw !important;
    z-index: 9 !important;
    transform: rotate(-2.5deg) skewX(-1deg) !important;
    transform-origin: left bottom !important;
  }
  .battle-menu {
    left: auto !important;
    right: 8px !important;
    bottom: 92px !important;
    width: 38vw !important;
    max-width: 38vw !important;
    z-index: 7 !important;
  }
}

@media (max-width: 480px) {
  .tcg-hero { min-height: 790px; }
  .hero-video-shell {
    top: 82px !important;
    right: -8vw !important;
    width: 64vw !important;
  }
  .enemy-harness-status {
    top: 92px !important;
    right: 42vw !important;
    width: 330px !important;
    transform: scale(.34) rotate(-1deg) !important;
  }
  .player-run-video-shell {
    left: 14px !important;
    bottom: 62px !important;
    width: 56vw !important;
  }
  .battle-dialog {
    left: 16px !important;
    bottom: 228px !important;
    width: 58vw !important;
    max-width: 58vw !important;
    min-height: 48px !important;
  }
  .battle-shout { font-size: .48rem !important; }
  .battle-menu {
    right: 6px !important;
    bottom: 80px !important;
    width: 34vw !important;
    max-width: 34vw !important;
  }
}

/* Compact the mobile HARNESS status so it reads as a small HP plate attached to
   the enemy GBA instead of a tall battle-card block. */
@media (max-width: 900px) {
  .enemy-harness-status {
    top: 122px !important;
    right: 46vw !important;
    width: 190px !important;
    height: 58px !important;
    padding: 8px 10px !important;
    overflow: visible !important;
    transform: none !important;
    box-shadow: 5px 5px 0 rgba(0,0,0,.35) !important;
  }
  .enemy-harness-status::after { display: none !important; }
  .enemy-harness-status strong { font-size: .58rem !important; }
  .enemy-harness-status span { margin-left: 7px !important; font-size: .48rem !important; }
  .enemy-harness-status .hp-row { margin-top: 5px !important; gap: 4px !important; }
  .enemy-harness-status .hp-row b { font-size: .42rem !important; }
  .enemy-harness-status .hp-row i { height: 8px !important; border-width: 2px !important; }
  .enemy-harness-status em { margin-top: 3px !important; font-size: .54rem !important; }
}

@media (max-width: 480px) {
  .enemy-harness-status {
    top: 126px !important;
    right: 46vw !important;
    width: 154px !important;
    height: 50px !important;
    padding: 7px 8px !important;
  }
  .enemy-harness-status strong { font-size: .46rem !important; }
  .enemy-harness-status span { margin-left: 5px !important; font-size: .38rem !important; }
  .enemy-harness-status .hp-row b { font-size: .34rem !important; }
  .enemy-harness-status .hp-row i { height: 7px !important; }
  .enemy-harness-status em { font-size: .44rem !important; }
}

/* Mobile repair pass: stop inheriting the accumulated desktop absolute offsets.
   Treat the phone hero as a compact version of the desktop battle stage. */
@media (max-width: 900px) {
  .tcg-hero {
    min-height: 860px !important;
    overflow: hidden !important;
  }
  .hero-content {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .hero-content .mega-label,
  .hero-content h1 {
    position: absolute !important;
    left: 18px !important;
    z-index: 7 !important;
  }
  .hero-content .mega-label {
    top: 110px !important;
    max-width: 260px !important;
    font-size: .5rem !important;
  }
  .hero-content h1 {
    top: 142px !important;
    width: 330px !important;
    font-size: 3rem !important;
    line-height: .88 !important;
  }
  .hero-video-shell {
    top: 118px !important;
    right: -24px !important;
    left: auto !important;
    width: 360px !important;
    margin: 0 !important;
    z-index: 4 !important;
    transform: perspective(900px) rotateY(-5deg) rotateZ(1deg) scale(.9) !important;
    transform-origin: top right !important;
  }
  .enemy-harness-status {
    display: block !important;
    top: 134px !important;
    right: 228px !important;
    left: auto !important;
    width: 178px !important;
    height: 58px !important;
    padding: 8px 10px !important;
    z-index: 8 !important;
    transform: rotate(-1deg) !important;
    transform-origin: right top !important;
    overflow: visible !important;
    box-shadow: 5px 5px 0 rgba(0,0,0,.35) !important;
  }
  .enemy-harness-status::after { display: none !important; }
  .enemy-harness-status strong { font-size: .54rem !important; }
  .enemy-harness-status span { margin-left: 6px !important; font-size: .42rem !important; }
  .enemy-harness-status .hp-row { margin-top: 5px !important; gap: 4px !important; }
  .enemy-harness-status .hp-row b { font-size: .36rem !important; }
  .enemy-harness-status .hp-row i { height: 8px !important; border-width: 2px !important; }
  .enemy-harness-status em { margin-top: 3px !important; font-size: .5rem !important; }
  .player-run-video-shell {
    left: 16px !important;
    right: auto !important;
    bottom: 74px !important;
    width: 300px !important;
    z-index: 6 !important;
    transform: perspective(820px) rotateY(4deg) rotateZ(-1deg) !important;
    transform-origin: left bottom !important;
  }
  .battle-dialog {
    left: 22px !important;
    right: auto !important;
    bottom: 278px !important;
    width: 305px !important;
    max-width: 305px !important;
    min-height: 62px !important;
    padding: 12px 14px !important;
    z-index: 9 !important;
    transform: rotate(-2.5deg) skewX(-1deg) !important;
    transform-origin: left bottom !important;
  }
  .battle-shout {
    font-size: .72rem !important;
    white-space: nowrap !important;
  }
  .battle-menu {
    left: auto !important;
    right: 10px !important;
    bottom: 86px !important;
    width: 154px !important;
    max-width: 154px !important;
    min-height: 130px !important;
    padding: 9px 8px 7px !important;
    z-index: 7 !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 2px !important;
    transform: none !important;
  }
  .battle-menu a {
    min-height: 38px !important;
    padding: 8px 0 5px 13px !important;
    font-size: .34rem !important;
  }
  .battle-menu a.selected::before,
  .battle-menu a:hover::before {
    left: 0 !important;
    top: 7px !important;
  }
  .hero-caption {
    bottom: 18px !important;
    left: 18px !important;
    right: 18px !important;
    z-index: 9 !important;
  }
}

@media (max-width: 480px) {
  .tcg-hero { min-height: 790px !important; }
  .hero-content .mega-label { top: 104px !important; left: 16px !important; font-size: .44rem !important; }
  .hero-content h1 { top: 134px !important; left: 16px !important; width: 260px !important; font-size: 2.34rem !important; }
  .hero-video-shell {
    top: 110px !important;
    right: -30px !important;
    width: 300px !important;
    transform: perspective(900px) rotateY(-5deg) rotateZ(1deg) scale(.82) !important;
  }
  .enemy-harness-status {
    top: 122px !important;
    right: 188px !important;
    width: 154px !important;
    height: 50px !important;
    padding: 7px 8px !important;
  }
  .enemy-harness-status strong { font-size: .45rem !important; }
  .enemy-harness-status span { margin-left: 5px !important; font-size: .34rem !important; }
  .enemy-harness-status .hp-row b { font-size: .3rem !important; }
  .enemy-harness-status .hp-row i { height: 7px !important; }
  .enemy-harness-status em { font-size: .4rem !important; }
  .player-run-video-shell {
    left: 14px !important;
    bottom: 66px !important;
    width: 250px !important;
  }
  .battle-dialog {
    left: 18px !important;
    bottom: 236px !important;
    width: 250px !important;
    max-width: 250px !important;
    min-height: 54px !important;
    padding: 10px 12px !important;
  }
  .battle-shout { font-size: .56rem !important; }
  .battle-menu {
    right: 8px !important;
    bottom: 78px !important;
    width: 126px !important;
    max-width: 126px !important;
    min-height: 112px !important;
    padding: 7px 6px 5px !important;
  }
  .battle-menu a {
    min-height: 32px !important;
    padding-left: 10px !important;
    font-size: .28rem !important;
  }
}

/* Mobile verdict fix: preserve desktop hierarchy by keeping the title readable;
   the enemy cluster stays top-right but starts below the title block. */
@media (max-width: 900px) {
  .hero-video-shell {
    top: 178px !important;
    right: -34px !important;
    width: 350px !important;
  }
  .enemy-harness-status {
    top: 190px !important;
    right: 220px !important;
  }
}

@media (max-width: 480px) {
  .hero-content h1 {
    width: 250px !important;
    font-size: 2.22rem !important;
  }
  .hero-video-shell {
    top: 178px !important;
    right: -42px !important;
    width: 292px !important;
    transform: perspective(900px) rotateY(-5deg) rotateZ(1deg) scale(.82) !important;
  }
  .enemy-harness-status {
    top: 188px !important;
    right: 178px !important;
  }
}

@media (max-width: 480px) {
  .enemy-harness-status {
    top: 204px !important;
    right: 58px !important;
    width: 146px !important;
    z-index: 8 !important;
  }
}

@media (max-width: 480px) {
  .enemy-harness-status {
    top: 176px !important;
    right: -4px !important;
    width: 142px !important;
  }
}

@media (max-width: 900px) {
  .enemy-harness-status {
    top: 176px !important;
    right: -4px !important;
    width: 142px !important;
  }
}

@media (max-width: 900px) {
  .enemy-harness-status {
    top: 168px !important;
    right: 88px !important;
    width: 142px !important;
  }
}

/* Final battle semantics: enemy label is POKEMON; player-side gets its own
   HARNESS HP plate. Command choices stretch farther toward the right edge. */
.player-harness-status {
  display: none;
}

@media (min-width: 901px) {
  .enemy-harness-status strong::first-letter,
  .player-harness-status strong::first-letter { letter-spacing: .04em; }
  .player-harness-status {
    display: block !important;
    left: 4.8% !important;
    right: auto !important;
    bottom: 410px !important;
    width: 360px !important;
    height: auto !important;
    z-index: 8 !important;
    padding: 14px 18px 16px !important;
    transform: rotate(-1.5deg) scale(.82) !important;
    transform-origin: left bottom !important;
    box-shadow: 7px 7px 0 rgba(0,0,0,.28) !important;
  }
  .player-harness-status::after {
    right: -44px !important;
    left: auto !important;
    display: block !important;
    border-left: 44px solid #21171f !important;
    border-right: 0 !important;
    border-top: 28px solid transparent !important;
  }
  .battle-dialog {
    bottom: 334px !important;
  }
  .battle-menu {
    left: min(720px, 40vw) !important;
    right: 2.4% !important;
    width: auto !important;
    max-width: none !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 7vw !important;
  }
}

@media (min-width: 901px) and (max-width: 1350px) {
  .player-harness-status {
    bottom: 360px !important;
    width: 320px !important;
    transform: rotate(-1.5deg) scale(.7) !important;
  }
  .battle-dialog { bottom: 306px !important; }
  .battle-menu {
    left: min(525px, 39vw) !important;
    right: 2.2% !important;
    column-gap: 5vw !important;
  }
}

@media (max-width: 900px) {
  .player-harness-status {
    display: block !important;
    left: 18px !important;
    right: auto !important;
    bottom: 316px !important;
    width: 178px !important;
    height: 58px !important;
    padding: 8px 10px !important;
    z-index: 8 !important;
    transform: rotate(-1.5deg) !important;
    transform-origin: left bottom !important;
    overflow: visible !important;
    box-shadow: 5px 5px 0 rgba(0,0,0,.35) !important;
  }
  .player-harness-status::after { display: none !important; }
  .player-harness-status strong { font-size: .54rem !important; }
  .player-harness-status span { margin-left: 6px !important; font-size: .42rem !important; }
  .player-harness-status .hp-row { margin-top: 5px !important; gap: 4px !important; }
  .player-harness-status .hp-row b { font-size: .36rem !important; }
  .player-harness-status .hp-row i { height: 8px !important; border-width: 2px !important; }
  .player-harness-status em { margin-top: 3px !important; font-size: .5rem !important; }
  .battle-dialog { bottom: 250px !important; }
  .battle-menu {
    left: 48vw !important;
    right: 4px !important;
    width: auto !important;
    max-width: none !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 8px !important;
  }
}

@media (max-width: 480px) {
  .player-harness-status {
    left: 16px !important;
    bottom: 270px !important;
    width: 154px !important;
    height: 50px !important;
    padding: 7px 8px !important;
  }
  .player-harness-status strong { font-size: .45rem !important; }
  .player-harness-status span { margin-left: 5px !important; font-size: .34rem !important; }
  .player-harness-status .hp-row b { font-size: .3rem !important; }
  .player-harness-status .hp-row i { height: 7px !important; }
  .player-harness-status em { font-size: .4rem !important; }
  .battle-dialog { bottom: 214px !important; }
  .battle-menu {
    left: 48vw !important;
    right: 4px !important;
    bottom: 78px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 112px !important;
  }
  .battle-menu a { font-size: .3rem !important; }
}

/* Original Pokémon command feel: narrow vertical 1-column command box.
   Player-side stack order is now: Go! dialog -> HARNESS HP -> Harness video. */
@media (min-width: 901px) {
  .battle-dialog {
    left: 4.9% !important;
    bottom: 472px !important;
    width: min(570px, 32vw) !important;
    max-width: none !important;
    z-index: 10 !important;
  }
  .player-harness-status {
    left: 4.8% !important;
    bottom: 392px !important;
    z-index: 9 !important;
  }
  .battle-menu {
    left: auto !important;
    right: 3.2% !important;
    bottom: 100px !important;
    width: min(245px, 14vw) !important;
    max-width: 245px !important;
    min-height: 244px !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(48px, auto) !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    padding: 18px 18px 14px !important;
  }
  .battle-menu a {
    min-height: 50px !important;
    padding: 12px 8px 9px 42px !important;
    font-size: clamp(.58rem, .78vw, .78rem) !important;
  }
  .battle-menu a.selected::before,
  .battle-menu a:hover::before {
    left: 8px !important;
    top: 12px !important;
  }
}

@media (min-width: 901px) and (max-width: 1350px) {
  .battle-dialog {
    bottom: 418px !important;
    width: min(440px, 34vw) !important;
  }
  .player-harness-status {
    bottom: 348px !important;
  }
  .battle-menu {
    right: 2.5% !important;
    width: min(210px, 16vw) !important;
    max-width: 210px !important;
    min-height: 220px !important;
    padding: 15px 14px 12px !important;
  }
  .battle-menu a {
    min-height: 45px !important;
    padding-left: 34px !important;
    font-size: .58rem !important;
  }
}

@media (max-width: 900px) {
  .battle-dialog {
    left: 18px !important;
    bottom: 336px !important;
    width: 285px !important;
    max-width: 285px !important;
    z-index: 10 !important;
  }
  .player-harness-status {
    left: 18px !important;
    bottom: 274px !important;
    z-index: 9 !important;
  }
  .battle-menu {
    left: auto !important;
    right: 8px !important;
    bottom: 72px !important;
    width: 118px !important;
    max-width: 118px !important;
    min-height: 210px !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(42px, auto) !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    padding: 10px 8px 8px !important;
  }
  .battle-menu a {
    min-height: 42px !important;
    padding: 9px 2px 7px 20px !important;
    font-size: .34rem !important;
  }
  .battle-menu a.selected::before,
  .battle-menu a:hover::before {
    left: 2px !important;
    top: 8px !important;
  }
}

@media (max-width: 480px) {
  .battle-dialog {
    left: 16px !important;
    bottom: 296px !important;
    width: 245px !important;
    max-width: 245px !important;
  }
  .player-harness-status {
    left: 16px !important;
    bottom: 238px !important;
  }
  .battle-menu {
    right: 6px !important;
    bottom: 58px !important;
    width: 100px !important;
    max-width: 100px !important;
    min-height: 184px !important;
    padding: 8px 6px 6px !important;
  }
  .battle-menu a {
    min-height: 36px !important;
    padding: 8px 0 6px 15px !important;
    font-size: .27rem !important;
  }
  .battle-menu a.selected::before,
  .battle-menu a:hover::before {
    left: 0 !important;
    top: 7px !important;
  }
}

/* Keep the vertical command menu inside the visible phone viewport even when
   decorative enemy art widens the scrollable hero canvas. */
@media (max-width: 900px) {
  .battle-menu {
    left: calc(100vw - 132px) !important;
    right: auto !important;
    width: 118px !important;
    max-width: 118px !important;
  }
}

@media (max-width: 480px) {
  .battle-menu {
    left: calc(100vw - 112px) !important;
    right: auto !important;
    width: 100px !important;
    max-width: 100px !important;
  }
}

@media (max-width: 480px) {
  .battle-menu {
    left: 184px !important;
    right: auto !important;
    width: 100px !important;
    max-width: 100px !important;
  }
}

@media (max-width: 900px) {
  .battle-menu {
    left: 184px !important;
    right: auto !important;
    width: 108px !important;
    max-width: 108px !important;
  }
}

@media (max-width: 900px) {
  .battle-menu {
    left: 274px !important;
    width: 104px !important;
    max-width: 104px !important;
  }
}

/* Requested polish: lighter hero stage, ULWmon logo sizing, and command menu
   attached directly to the player-side Harness video. */
.tcg-logo { width: 172px; }
.tcg-logo span {
  font-size: 1.72rem;
  letter-spacing: -.08em;
  white-space: nowrap;
}

.tcg-hero {
  background:
    radial-gradient(circle at 53% 43%, rgba(95,219,253,.28), transparent 0 24%, rgba(255,255,255,.7) 48%, rgba(255,248,223,.96) 78%),
    linear-gradient(115deg, #ffffff 0%, #fff8df 48%, #edfaff 100%) !important;
  color: #111 !important;
}
.tcg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 34%, rgba(255,255,255,.8), transparent 0 24%),
    linear-gradient(90deg, rgba(0,0,0,.04), transparent 26%, rgba(0,0,0,.05));
  mix-blend-mode: multiply;
  opacity: .62;
}
.hero-art { opacity: .58; mix-blend-mode: multiply; }
.motion-toggle,
.hero-caption { color: #111 !important; text-shadow: 0 2px 0 rgba(255,255,255,.78); }
.mega-label { color: #176b56 !important; text-shadow: 0 0 10px rgba(95,219,253,.8), 0 2px 0 #fff !important; }
h1 { text-shadow: 0 4px 0 #77bef9, 0 0 14px rgba(95,219,253,.72), 0 2px 0 #fff !important; }

@media (min-width: 901px) {
  .battle-menu {
    left: calc(4.2% + min(660px, 36vw) + 14px) !important;
    right: auto !important;
    bottom: 76px !important;
    width: min(245px, 14vw) !important;
    max-width: 245px !important;
    z-index: 8 !important;
  }
}

@media (min-width: 901px) and (max-width: 1350px) {
  .battle-menu {
    left: calc(4.2% + min(520px, 38vw) + 12px) !important;
    right: auto !important;
    bottom: 82px !important;
    width: min(210px, 16vw) !important;
  }
}

@media (max-width: 900px) {
  .tcg-logo { width: 128px; }
  .tcg-logo span { font-size: 1.2rem; }
  .battle-menu {
    left: calc(16px + 300px + 8px) !important;
    right: auto !important;
    bottom: 74px !important;
    width: 108px !important;
    max-width: 108px !important;
  }
}

@media (max-width: 480px) {
  .tcg-logo { width: 116px; }
  .tcg-logo span { font-size: 1.06rem; }
  .battle-menu {
    left: calc(14px + 250px + 8px) !important;
    right: auto !important;
    bottom: 66px !important;
    width: 104px !important;
    max-width: 104px !important;
  }
}

/* Remove hero title/kicker from the battle stage and keep the player HP panel
   outside the video artwork so it never covers the Harness screen. */
.hero-content .mega-label,
.hero-content h1 {
  display: none !important;
}

@media (min-width: 901px) {
  .player-harness-status {
    left: 4.4% !important;
    bottom: 520px !important;
    transform: rotate(-1.5deg) scale(.82) !important;
  }
  .battle-dialog {
    bottom: 444px !important;
  }
}

@media (min-width: 901px) and (max-width: 1350px) {
  .player-harness-status {
    bottom: 438px !important;
  }
  .battle-dialog {
    bottom: 372px !important;
  }
}

@media (max-width: 900px) {
  .player-harness-status {
    left: 18px !important;
    bottom: 346px !important;
  }
  .battle-dialog {
    bottom: 284px !important;
  }
}

@media (max-width: 480px) {
  .player-harness-status {
    left: 16px !important;
    bottom: 298px !important;
  }
  .battle-dialog {
    bottom: 242px !important;
  }
}

/* Mobile top-gap fix: with the title removed, the enemy GBA can start directly
   under the header instead of leaving an empty hero band. */
@media (max-width: 900px) {
  .tcg-hero {
    min-height: 760px !important;
  }
  .hero-video-shell {
    top: 10px !important;
    right: -34px !important;
    width: 350px !important;
    z-index: 5 !important;
  }
  .enemy-harness-status {
    top: 22px !important;
    right: 88px !important;
    width: 142px !important;
    z-index: 8 !important;
  }
}

@media (max-width: 480px) {
  .tcg-hero {
    min-height: 700px !important;
  }
  .hero-video-shell {
    top: 6px !important;
    right: -42px !important;
    width: 292px !important;
  }
  .enemy-harness-status {
    top: 18px !important;
    right: 88px !important;
    width: 142px !important;
  }
}

/* Mobile hard reset: a clean compact battle stage, not a cropped desktop spill. */
@media (max-width: 480px) {
  .tcg-hero {
    min-height: 700px !important;
    overflow: hidden !important;
  }
  .motion-toggle { display: none !important; }
  .hero-art { opacity: .46 !important; }

  .hero-video-shell {
    top: 6px !important;
    right: 0 !important;
    left: auto !important;
    width: 250px !important;
    margin: 0 !important;
    z-index: 5 !important;
    transform: perspective(900px) rotateY(-4deg) rotateZ(1deg) !important;
    transform-origin: top right !important;
  }
  .enemy-harness-status {
    top: 18px !important;
    right: 142px !important;
    left: auto !important;
    width: 142px !important;
    height: 48px !important;
    padding: 6px 8px !important;
    z-index: 8 !important;
    transform: rotate(-1deg) !important;
  }

  .player-run-video-shell {
    left: 14px !important;
    right: auto !important;
    bottom: 62px !important;
    width: 230px !important;
    z-index: 6 !important;
    transform: perspective(820px) rotateY(3deg) rotateZ(-1deg) !important;
    transform-origin: left bottom !important;
  }

  .battle-dialog {
    left: 16px !important;
    right: auto !important;
    bottom: 260px !important;
    width: 230px !important;
    max-width: 230px !important;
    min-height: 52px !important;
    padding: 9px 11px !important;
    z-index: 10 !important;
    transform: rotate(-2.4deg) skewX(-1deg) !important;
  }
  .battle-shout {
    font-size: .52rem !important;
    white-space: nowrap !important;
  }

  .player-harness-status {
    left: 16px !important;
    right: auto !important;
    bottom: 202px !important;
    width: 154px !important;
    height: 48px !important;
    padding: 6px 8px !important;
    z-index: 9 !important;
    transform: rotate(-1.2deg) !important;
  }

  .battle-menu {
    left: 252px !important;
    right: auto !important;
    bottom: 62px !important;
    width: 122px !important;
    max-width: 122px !important;
    min-height: 178px !important;
    padding: 8px 7px 6px !important;
    z-index: 8 !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(34px, auto) !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    transform: none !important;
  }
  .battle-menu a {
    min-height: 34px !important;
    padding: 7px 0 5px 15px !important;
    font-size: .28rem !important;
  }
  .battle-menu a.selected::before,
  .battle-menu a:hover::before {
    left: 0 !important;
    top: 6px !important;
  }

  .hero-caption {
    bottom: 10px !important;
    left: 58px !important;
    right: 10px !important;
    font-size: .62rem !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 480px) {
  .hero-video-shell {
    top: 4px !important;
    right: 8px !important;
    width: 210px !important;
    transform: perspective(900px) rotateY(-3deg) rotateZ(1deg) !important;
  }
  .enemy-harness-status {
    top: 14px !important;
    right: 142px !important;
    width: 134px !important;
  }
}

@media (max-width: 480px) {
  .hero-video-shell {
    right: 72px !important;
    width: 210px !important;
  }
  .enemy-harness-status {
    right: 206px !important;
  }
}

@media (max-width: 480px) {
  .hero-video-shell {
    transform: translateX(-82px) perspective(900px) rotateY(-3deg) rotateZ(1deg) !important;
  }
  .enemy-harness-status {
    transform: translateX(-82px) rotate(-1deg) !important;
  }
}

@media (max-width: 900px) {
  .hero-video-shell {
    transform: translateX(-82px) perspective(900px) rotateY(-3deg) rotateZ(1deg) !important;
  }
  .enemy-harness-status {
    transform: translateX(-82px) rotate(-1deg) !important;
  }
}

/* Mobile final model: top-down battle layout. Desktop keeps perspective;
   phone stacks battle pieces in readable order from the header downward. */
@media (max-width: 900px) {
  .tcg-hero {
    min-height: 880px !important;
    overflow: hidden !important;
  }
  .hero-art {
    opacity: .34 !important;
    mix-blend-mode: multiply !important;
  }

  .hero-video-shell {
    top: 10px !important;
    left: 50% !important;
    right: auto !important;
    width: 330px !important;
    margin: 0 !important;
    z-index: 5 !important;
    transform: translateX(-50%) !important;
    transform-origin: top center !important;
  }
  .enemy-harness-status {
    top: 14px !important;
    left: 18px !important;
    right: auto !important;
    width: 172px !important;
    height: 56px !important;
    padding: 8px 10px !important;
    z-index: 8 !important;
    transform: rotate(-1deg) !important;
  }

  .battle-dialog {
    top: 285px !important;
    bottom: auto !important;
    left: 18px !important;
    right: auto !important;
    width: calc(100vw - 36px) !important;
    max-width: none !important;
    min-height: 58px !important;
    padding: 11px 14px !important;
    z-index: 9 !important;
    transform: rotate(-1.5deg) !important;
  }
  .battle-shout {
    font-size: .72rem !important;
    white-space: nowrap !important;
  }

  .player-harness-status {
    top: 360px !important;
    bottom: auto !important;
    left: 18px !important;
    right: auto !important;
    width: 190px !important;
    height: 58px !important;
    padding: 8px 10px !important;
    z-index: 8 !important;
    transform: rotate(-1deg) !important;
  }

  .player-run-video-shell {
    top: 438px !important;
    bottom: auto !important;
    left: 18px !important;
    right: auto !important;
    width: calc(100vw - 154px) !important;
    z-index: 6 !important;
    transform: none !important;
  }

  .battle-menu {
    top: 438px !important;
    bottom: auto !important;
    left: calc(100vw - 124px) !important;
    right: auto !important;
    width: 106px !important;
    max-width: 106px !important;
    min-height: 204px !important;
    z-index: 8 !important;
    transform: none !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(42px, auto) !important;
    padding: 10px 7px 8px !important;
  }
  .battle-menu a {
    min-height: 42px !important;
    padding: 9px 0 7px 16px !important;
    font-size: .32rem !important;
  }
  .battle-menu a.selected::before,
  .battle-menu a:hover::before {
    left: 0 !important;
    top: 8px !important;
  }

  .hero-caption {
    bottom: 12px !important;
    left: 52px !important;
    right: 12px !important;
    font-size: .65rem !important;
  }
}

@media (max-width: 480px) {
  .tcg-hero { min-height: 820px !important; }
  .hero-video-shell {
    top: 8px !important;
    left: 50% !important;
    width: 300px !important;
    transform: translateX(-50%) !important;
  }
  .enemy-harness-status {
    top: 12px !important;
    left: 16px !important;
    width: 154px !important;
    height: 50px !important;
    padding: 7px 8px !important;
  }
  .battle-dialog {
    top: 260px !important;
    left: 16px !important;
    width: calc(100vw - 32px) !important;
    min-height: 54px !important;
  }
  .battle-shout { font-size: .58rem !important; }
  .player-harness-status {
    top: 326px !important;
    left: 16px !important;
    width: 154px !important;
    height: 50px !important;
    padding: 7px 8px !important;
  }
  .player-run-video-shell {
    top: 392px !important;
    left: 16px !important;
    width: calc(100vw - 142px) !important;
  }
  .battle-menu {
    top: 392px !important;
    left: calc(100vw - 116px) !important;
    width: 100px !important;
    max-width: 100px !important;
    min-height: 184px !important;
    padding: 8px 6px 6px !important;
  }
  .battle-menu a {
    min-height: 36px !important;
    padding-left: 14px !important;
    font-size: .27rem !important;
  }
}

@media (max-width: 900px) {
  .battle-dialog {
    width: 340px !important;
    max-width: 340px !important;
    overflow: visible !important;
  }
  .battle-menu {
    transform: translateX(-118px) !important;
  }
}

@media (max-width: 480px) {
  .battle-dialog {
    left: 16px !important;
    width: 338px !important;
    max-width: 338px !important;
  }
  .battle-menu {
    width: 104px !important;
    max-width: 104px !important;
    transform: translateX(-118px) !important;
  }
}

/* Mobile sketch layout: top GBA cluster, lower-left harness stack, command card
   directly to the right of the lower video. This intentionally overrides all
   earlier mobile perspective attempts. */
@media (max-width: 900px) {
  .tcg-hero {
    min-height: 820px !important;
    overflow: hidden !important;
  }
  .hero-art {
    opacity: .22 !important;
    mix-blend-mode: multiply !important;
  }

  .hero-video-shell {
    top: 14px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 300px !important;
    margin: 0 !important;
    z-index: 5 !important;
    transform: translateX(-50%) !important;
    transform-origin: top center !important;
  }
  .enemy-harness-status {
    top: 18px !important;
    left: calc(50% - 138px) !important;
    right: auto !important;
    bottom: auto !important;
    width: 170px !important;
    height: 54px !important;
    padding: 7px 10px !important;
    z-index: 8 !important;
    transform: rotate(-1deg) !important;
    transform-origin: left top !important;
  }

  .battle-dialog {
    top: 318px !important;
    left: 18px !important;
    right: auto !important;
    bottom: auto !important;
    width: 240px !important;
    max-width: 240px !important;
    min-height: 54px !important;
    padding: 10px 12px !important;
    z-index: 10 !important;
    transform: rotate(-1.5deg) !important;
    transform-origin: left top !important;
  }
  .battle-shout {
    font-size: .58rem !important;
    white-space: nowrap !important;
  }

  .player-harness-status {
    top: 390px !important;
    left: 18px !important;
    right: auto !important;
    bottom: auto !important;
    width: 170px !important;
    height: 54px !important;
    padding: 7px 10px !important;
    z-index: 9 !important;
    transform: rotate(-1deg) !important;
    transform-origin: left top !important;
  }

  .player-run-video-shell {
    top: 456px !important;
    left: 18px !important;
    right: auto !important;
    bottom: auto !important;
    width: 235px !important;
    z-index: 6 !important;
    transform: none !important;
    transform-origin: left top !important;
  }

  .battle-menu {
    top: 456px !important;
    left: 268px !important;
    right: auto !important;
    bottom: auto !important;
    width: 104px !important;
    max-width: 104px !important;
    min-height: 184px !important;
    padding: 8px 7px 6px !important;
    z-index: 8 !important;
    transform: none !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(36px, auto) !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
  }
  .battle-menu a {
    min-height: 36px !important;
    padding: 8px 0 6px 15px !important;
    font-size: .28rem !important;
  }
  .battle-menu a.selected::before,
  .battle-menu a:hover::before {
    left: 0 !important;
    top: 7px !important;
  }

  .hero-caption {
    bottom: 10px !important;
    left: 52px !important;
    right: 10px !important;
    font-size: .62rem !important;
    line-height: 1.25 !important;
    z-index: 9 !important;
  }
}

@media (max-width: 480px) {
  .tcg-hero { min-height: 790px !important; }
  .hero-video-shell {
    top: 12px !important;
    left: 50% !important;
    width: 284px !important;
    transform: translateX(-50%) !important;
  }
  .enemy-harness-status {
    top: 16px !important;
    left: 56px !important;
    width: 154px !important;
    height: 50px !important;
    padding: 7px 8px !important;
  }
  .battle-dialog {
    top: 300px !important;
    left: 16px !important;
    width: 236px !important;
    max-width: 236px !important;
  }
  .battle-shout { font-size: .54rem !important; }
  .player-harness-status {
    top: 368px !important;
    left: 16px !important;
    width: 154px !important;
    height: 50px !important;
    padding: 7px 8px !important;
  }
  .player-run-video-shell {
    top: 430px !important;
    left: 16px !important;
    width: 232px !important;
  }
  .battle-menu {
    top: 430px !important;
    left: 264px !important;
    width: 104px !important;
    max-width: 104px !important;
    min-height: 184px !important;
  }
}

/* Mobile diagonal-axis layout: preserve the desktop battle composition by
   aligning player-side UI at lower-left and enemy GBA at upper-right. */
@media (max-width: 900px) {
  .tcg-hero {
    min-height: 760px !important;
    overflow: hidden !important;
  }
  .hero-art {
    opacity: .28 !important;
    mix-blend-mode: multiply !important;
  }

  .hero-video-shell {
    top: 18px !important;
    left: auto !important;
    right: 10px !important;
    bottom: auto !important;
    width: 265px !important;
    margin: 0 !important;
    z-index: 5 !important;
    transform: rotate(1deg) !important;
    transform-origin: top right !important;
  }
  .enemy-harness-status {
    top: 24px !important;
    left: auto !important;
    right: 178px !important;
    bottom: auto !important;
    width: 158px !important;
    height: 52px !important;
    padding: 7px 9px !important;
    z-index: 8 !important;
    transform: rotate(-1deg) !important;
    transform-origin: right top !important;
  }

  .player-run-video-shell {
    top: auto !important;
    left: 16px !important;
    right: auto !important;
    bottom: 74px !important;
    width: 228px !important;
    z-index: 6 !important;
    transform: rotate(-1deg) !important;
    transform-origin: left bottom !important;
  }
  .battle-menu {
    top: auto !important;
    left: 258px !important;
    right: auto !important;
    bottom: 74px !important;
    width: 106px !important;
    max-width: 106px !important;
    min-height: 184px !important;
    padding: 8px 7px 6px !important;
    z-index: 8 !important;
    transform: rotate(.8deg) !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(36px, auto) !important;
  }
  .battle-menu a {
    min-height: 36px !important;
    padding: 8px 0 6px 15px !important;
    font-size: .28rem !important;
  }
  .battle-menu a.selected::before,
  .battle-menu a:hover::before { left: 0 !important; top: 7px !important; }

  .player-harness-status {
    top: auto !important;
    left: 18px !important;
    right: auto !important;
    bottom: 290px !important;
    width: 160px !important;
    height: 52px !important;
    padding: 7px 9px !important;
    z-index: 9 !important;
    transform: rotate(-1deg) !important;
  }
  .battle-dialog {
    top: auto !important;
    left: 18px !important;
    right: auto !important;
    bottom: 350px !important;
    width: 292px !important;
    max-width: 292px !important;
    min-height: 54px !important;
    padding: 10px 12px !important;
    z-index: 10 !important;
    transform: rotate(-2deg) !important;
  }
  .battle-shout { font-size: .58rem !important; white-space: nowrap !important; }
  .hero-caption { bottom: 12px !important; left: 54px !important; right: 10px !important; font-size: .62rem !important; }
}

@media (max-width: 480px) {
  .tcg-hero { min-height: 720px !important; }
  .hero-video-shell {
    top: 12px !important;
    right: 6px !important;
    width: 245px !important;
  }
  .enemy-harness-status {
    top: 18px !important;
    right: 164px !important;
    width: 146px !important;
    height: 48px !important;
    padding: 6px 8px !important;
  }
  .player-run-video-shell {
    left: 14px !important;
    bottom: 64px !important;
    width: 224px !important;
  }
  .battle-menu {
    left: 252px !important;
    bottom: 64px !important;
    width: 106px !important;
    max-width: 106px !important;
    min-height: 180px !important;
  }
  .player-harness-status {
    left: 16px !important;
    bottom: 268px !important;
    width: 154px !important;
    height: 50px !important;
    padding: 7px 8px !important;
  }
  .battle-dialog {
    left: 16px !important;
    bottom: 326px !important;
    width: 286px !important;
    max-width: 286px !important;
  }
  .battle-shout { font-size: .56rem !important; }
}

@media (max-width: 480px) {
  .hero-video-shell {
    right: 24px !important;
    width: 210px !important;
  }
  .enemy-harness-status {
    right: 152px !important;
    width: 142px !important;
  }
}

/* Clean hero stage: remove decorative background components and tighten mobile
   diagonal spacing between enemy and player clusters. */
.tcg-hero {
  background: #fff !important;
  color: #111 !important;
}
.tcg-hero::after,
.hero-art,
.energy-ribbon,
.agent-sigil {
  display: none !important;
  opacity: 0 !important;
}

@media (max-width: 900px) {
  .tcg-hero {
    min-height: 650px !important;
    background: #fff !important;
  }
  .hero-video-shell {
    top: 8px !important;
  }
  .enemy-harness-status {
    top: 14px !important;
  }
  .battle-dialog {
    bottom: 274px !important;
  }
  .player-harness-status {
    bottom: 216px !important;
  }
  .player-run-video-shell {
    bottom: 46px !important;
  }
  .battle-menu {
    bottom: 46px !important;
  }
  .hero-caption { bottom: 8px !important; }
}

@media (max-width: 480px) {
  .tcg-hero {
    min-height: 620px !important;
  }
  .hero-video-shell {
    top: 6px !important;
  }
  .enemy-harness-status {
    top: 12px !important;
  }
  .battle-dialog {
    bottom: 252px !important;
  }
  .player-harness-status {
    bottom: 196px !important;
  }
  .player-run-video-shell {
    bottom: 42px !important;
  }
  .battle-menu {
    bottom: 42px !important;
  }
}

/* FINAL MOBILE LAYOUT RESET — single coordinate system.
   Axis: lower-left player cluster -> upper-right enemy cluster. */
@media (max-width: 900px) {
  .tcg-hero {
    position: relative !important;
    min-height: 650px !important;
    background: #fff !important;
    overflow: hidden !important;
  }
  .tcg-hero::after,
  .hero-art,
  .energy-ribbon,
  .agent-sigil {
    display: none !important;
  }

  .hero-video-shell {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: 245px !important;
    margin: 0 !important;
    z-index: 5 !important;
    transform: rotate(1deg) !important;
    transform-origin: top right !important;
  }
  .enemy-harness-status {
    position: absolute !important;
    top: 14px !important;
    right: 164px !important;
    left: auto !important;
    bottom: auto !important;
    width: 150px !important;
    height: 50px !important;
    padding: 7px 8px !important;
    z-index: 8 !important;
    transform: rotate(-1deg) !important;
  }

  .battle-dialog {
    position: absolute !important;
    top: 250px !important;
    left: 16px !important;
    right: auto !important;
    bottom: auto !important;
    width: 286px !important;
    max-width: 286px !important;
    min-height: 52px !important;
    padding: 10px 12px !important;
    z-index: 10 !important;
    transform: rotate(-2deg) !important;
  }
  .battle-shout {
    font-size: .56rem !important;
    white-space: nowrap !important;
  }
  .player-harness-status {
    position: absolute !important;
    top: 314px !important;
    left: 16px !important;
    right: auto !important;
    bottom: auto !important;
    width: 154px !important;
    height: 50px !important;
    padding: 7px 8px !important;
    z-index: 9 !important;
    transform: rotate(-1deg) !important;
  }
  .player-run-video-shell {
    position: absolute !important;
    top: 376px !important;
    left: 16px !important;
    right: auto !important;
    bottom: auto !important;
    width: 224px !important;
    z-index: 6 !important;
    transform: rotate(-1deg) !important;
  }
  .battle-menu {
    position: absolute !important;
    top: 376px !important;
    left: 252px !important;
    right: auto !important;
    bottom: auto !important;
    width: 106px !important;
    max-width: 106px !important;
    min-height: 180px !important;
    padding: 8px 7px 6px !important;
    z-index: 8 !important;
    transform: rotate(.8deg) !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(36px, auto) !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
  }
  .battle-menu a {
    min-height: 36px !important;
    padding: 8px 0 6px 15px !important;
    font-size: .28rem !important;
  }
  .battle-menu a.selected::before,
  .battle-menu a:hover::before {
    left: 0 !important;
    top: 7px !important;
  }
  .hero-caption {
    bottom: 10px !important;
    left: 52px !important;
    right: 10px !important;
    font-size: .62rem !important;
    line-height: 1.25 !important;
  }
}

/* Mobile readability fix: command menu text must be legible. */
@media (max-width: 900px) {
  .battle-menu {
    left: 246px !important;
    width: 128px !important;
    max-width: 128px !important;
    min-height: 184px !important;
    padding: 10px 8px 8px !important;
  }
  .battle-menu a {
    min-height: 38px !important;
    padding: 9px 0 7px 20px !important;
    font-size: .42rem !important;
    line-height: 1.15 !important;
  }
  .battle-menu a.selected::before,
  .battle-menu a:hover::before {
    left: 2px !important;
    top: 8px !important;
    font-size: .9em !important;
  }
}

/* Mobile-only unified GBA battle screen: make the GBA span the phone width and
   composite both battle videos inside the single GBA screen area. Desktop and
   tablet/desktop compositions above 900px are intentionally untouched. */
@media (max-width: 900px) {
  .tcg-hero {
    min-height: 640px !important;
    overflow: hidden !important;
  }

  .hero-video-shell {
    position: absolute !important;
    top: 10px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 5 !important;
    transform: none !important;
  }

  .gameboy-frame {
    width: 100% !important;
    aspect-ratio: 800 / 600 !important;
  }

  .gameboy-frame .video-topbar,
  .gameboy-frame .video-caption-row,
  .gameboy-frame .play-chip,
  .player-run-video-frame .video-topbar,
  .player-run-video-frame .play-chip,
  .enemy-harness-status,
  .player-harness-status,
  .battle-dialog,
  .battle-menu {
    display: none !important;
  }

  .gameboy-screen {
    left: 24.6% !important;
    top: 28.7% !important;
    width: 50.8% !important;
    aspect-ratio: 316 / 220 !important;
    overflow: hidden !important;
    background: #050505 !important;
    box-shadow: inset 0 0 0 2px #111, inset 0 0 0 4px rgba(255,255,255,.12) !important;
  }

  .gameboy-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(5,5,5,.9) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  }

  .gameboy-screen .hero-video {
    inset: 0 auto 0 0 !important;
    width: 50% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 54% 50% !important;
  }

  .player-run-video-shell {
    position: absolute !important;
    left: calc(24.6% + 25.4%) !important;
    top: calc(10px + 21.525vw) !important;
    right: auto !important;
    bottom: auto !important;
    width: 25.4% !important;
    aspect-ratio: 158 / 220 !important;
    z-index: 7 !important;
    margin: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .player-run-video-frame {
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .player-run-screen {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    background: #050505 !important;
  }

  .player-run-screen .hero-video {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
  }

  .player-run-screen::after {
    z-index: 3 !important;
  }

  .hero-caption {
    bottom: 12px !important;
    left: 16px !important;
    right: 16px !important;
    z-index: 9 !important;
  }
}

@media (max-width: 480px) {
  .tcg-hero {
    min-height: 560px !important;
  }

  .hero-video-shell {
    top: 8px !important;
  }

  .player-run-video-shell {
    top: calc(8px + 21.525vw) !important;
  }

  .hero-caption {
    font-size: .6rem !important;
    line-height: 1.25 !important;
  }
}

/* Desktop-only battle tension pass: keep layout geometry intact, but use
   opposing light/shadow directions, speed lines, and impact glows to make the
   two video panels read as rivals facing off. */
@media (min-width: 901px) {
  .tcg-hero::before,
  .tcg-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 2;
  }

  .tcg-hero::before {
    inset: 84px 0 0;
    background:
      linear-gradient(112deg, transparent 0 39%, rgba(255,75,181,.24) 44%, rgba(255,255,255,.08) 47%, rgba(95,219,253,.26) 50%, transparent 56% 100%),
      radial-gradient(ellipse at 24% 73%, rgba(255,75,181,.30), transparent 0 23%, transparent 38%),
      radial-gradient(ellipse at 78% 38%, rgba(95,219,253,.34), transparent 0 24%, transparent 40%);
    mix-blend-mode: screen;
  }

  .tcg-hero::after {
    left: 50%;
    top: 126px;
    width: 2px;
    height: 640px;
    transform: rotate(18deg);
    transform-origin: top center;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.9) 18%, rgba(249,198,44,.9) 50%, rgba(255,75,181,.8) 78%, transparent);
    box-shadow: 0 0 18px rgba(255,255,255,.72), 0 0 36px rgba(95,219,253,.48), 0 0 64px rgba(255,75,181,.38);
    opacity: .78;
  }

  .hero-video-shell,
  .player-run-video-shell {
    isolation: isolate;
  }

  .hero-video-shell {
    filter: drop-shadow(-26px 30px 0 rgba(255,75,181,.22)) drop-shadow(-46px 46px 42px rgba(0,0,0,.72));
  }

  .player-run-video-shell {
    filter: drop-shadow(26px -14px 0 rgba(95,219,253,.22)) drop-shadow(42px 38px 34px rgba(0,0,0,.68));
  }

  .hero-video-shell::before,
  .player-run-video-shell::before {
    content: "";
    position: absolute;
    inset: -28px;
    pointer-events: none;
    z-index: -1;
    opacity: .9;
    filter: blur(.2px);
  }

  .hero-video-shell::before {
    background:
      linear-gradient(242deg, transparent 0 31%, rgba(255,255,255,.62) 32%, transparent 34% 44%, rgba(95,219,253,.38) 45%, transparent 47% 100%),
      radial-gradient(ellipse at 18% 56%, rgba(95,219,253,.40), transparent 57%);
    clip-path: polygon(0 0, 100% 18%, 100% 100%, 14% 84%);
  }

  .player-run-video-shell::before {
    background:
      linear-gradient(62deg, transparent 0 30%, rgba(255,255,255,.58) 31%, transparent 33% 43%, rgba(255,75,181,.42) 44%, transparent 46% 100%),
      radial-gradient(ellipse at 82% 44%, rgba(255,75,181,.42), transparent 56%);
    clip-path: polygon(0 0, 88% 16%, 100% 100%, 0 82%);
  }

  .gameboy-frame {
    box-shadow:
      -14px 14px 0 rgba(95,219,253,.20),
      -30px 34px 0 rgba(255,75,181,.16),
      0 30px 70px rgba(0,0,0,.72),
      inset 0 0 0 3px rgba(255,255,255,.18) !important;
  }

  .player-run-video-frame {
    box-shadow:
      14px -12px 0 rgba(255,75,181,.20),
      28px -22px 0 rgba(95,219,253,.15),
      30px 32px 54px rgba(0,0,0,.70),
      inset 0 0 0 6px #fff7ff,
      inset 0 0 0 12px #1a1018 !important;
  }

  .gameboy-screen::after,
  .player-run-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
  }

  .gameboy-screen::after {
    background:
      linear-gradient(238deg, transparent 0 41%, rgba(255,255,255,.45) 42%, transparent 44% 100%),
      radial-gradient(circle at 10% 74%, rgba(255,75,181,.40), transparent 28%);
  }

  .player-run-screen::before {
    background:
      linear-gradient(58deg, transparent 0 40%, rgba(255,255,255,.42) 41%, transparent 43% 100%),
      radial-gradient(circle at 90% 24%, rgba(95,219,253,.42), transparent 28%);
  }
}

/* Desktop final confrontation: replace graphic speed-line/box shadows with
   optical ground shadows and a clear event thesis. */
.event-catchphrase {
  display: none;
}

@media (min-width: 901px) {
  .event-catchphrase {
    display: block !important;
    position: absolute;
    left: 4.5%;
    bottom: 535px;
    z-index: 11;
    margin: 0;
    padding: 10px 14px 9px;
    color: #111;
    background: rgba(255, 255, 255, .86);
    border: 4px solid #1a1018;
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
    font-family: var(--font-pixel);
    font-size: clamp(.68rem, .9vw, .98rem);
    line-height: 1.45;
    transform: rotate(-1.2deg);
  }

  /* Swap player-side HP and summon dialog positions. */
  .player-harness-status {
    left: 4.5% !important;
    bottom: 458px !important;
    z-index: 10 !important;
    transform: rotate(-1.2deg) scale(.82) !important;
  }
  .battle-dialog {
    left: 4.9% !important;
    bottom: 386px !important;
    z-index: 10 !important;
    transform: rotate(-2deg) !important;
  }

  /* Remove the previous battle-line overlays. */
  .tcg-hero::before,
  .tcg-hero::after,
  .hero-video-shell::before,
  .player-run-video-shell::before,
  .gameboy-screen::after,
  .player-run-screen::before {
    display: none !important;
    opacity: 0 !important;
    content: none !important;
  }

  .hero-video-shell,
  .player-run-video-shell {
    filter: none !important;
  }

  .gameboy-frame,
  .player-run-video-frame {
    box-shadow: none !important;
  }

  /* Optical 3D: soft ellipses on the floor, like characters standing under
     a key light. These shadows express distance and confrontation without
     comic impact effects. */
  .hero-video-shell::after,
  .player-run-video-shell::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.34) 0 18%, rgba(0,0,0,.20) 38%, transparent 72%);
    filter: blur(10px);
    opacity: .8 !important;
    mix-blend-mode: multiply;
  }

  .hero-video-shell::after {
    left: 8%;
    right: 4%;
    bottom: -34px;
    height: 72px;
    transform: perspective(500px) rotateX(62deg) rotateZ(-3deg);
  }

  .player-run-video-shell::after {
    left: -2%;
    right: 2%;
    bottom: -30px;
    height: 78px;
    transform: perspective(500px) rotateX(62deg) rotateZ(2deg);
  }

  .gameboy-frame {
    filter: drop-shadow(0 18px 20px rgba(0,0,0,.26)) !important;
  }
  .player-run-video-frame {
    box-shadow:
      0 18px 26px rgba(0,0,0,.28),
      inset 0 0 0 6px #fff7ff,
      inset 0 0 0 12px #1a1018 !important;
  }
}

@media (min-width: 901px) and (max-width: 1350px) {
  .event-catchphrase {
    bottom: 470px;
    font-size: .68rem;
  }
  .player-harness-status {
    bottom: 406px !important;
  }
  .battle-dialog {
    bottom: 344px !important;
  }
}

/* Remove event catchphrase and lift the summon dialog near the header. */
.event-catchphrase {
  display: none !important;
}

@media (min-width: 901px) {
  .battle-dialog {
    top: 108px !important;
    bottom: auto !important;
    left: 4.8% !important;
    z-index: 12 !important;
  }
  .player-harness-status {
    bottom: 458px !important;
    z-index: 10 !important;
  }
}

@media (min-width: 901px) and (max-width: 1350px) {
  .battle-dialog {
    top: 106px !important;
    bottom: auto !important;
  }
}

.mobile-harness-callout {
  display: none;
}

@media (max-width: 900px) {
  .mobile-harness-callout {
    display: block;
    position: relative;
    z-index: 5;
    width: 100vw;
    padding: 12px 28px 0;
    margin-top: 8px;
    overflow: visible;
    background: transparent;
  }

  .mobile-harness-callout p {
    position: relative;
    margin: 0 auto;
    width: min(100%, 318px);
    min-height: 104px;
    padding: 24px 24px 22px;
    border: 4px solid #202020;
    border-radius: 3px;
    background: #f8f8f8;
    color: #202020;
    box-shadow:
      0 0 0 4px #f8f8f8,
      0 0 0 8px #202020,
      inset 0 0 0 3px #d9d9d9;
    font-family: var(--font-sans);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.75;
    word-break: keep-all;
  }

  .mobile-harness-callout p::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 2px solid #202020;
    pointer-events: none;
  }

  .mobile-harness-callout span {
    position: absolute;
    right: 24px;
    bottom: 13px;
    font-size: .55rem;
    animation: cursor-blink 1s steps(2,end) infinite;
  }
}

/* HP panel tails point toward their corresponding video panels. */
@media (min-width: 901px) {
  .enemy-harness-status::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: auto !important;
    right: 34px !important;
    bottom: -28px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 30px solid transparent !important;
    border-right: 0 !important;
    border-top: 28px solid #21171f !important;
    border-bottom: 0 !important;
    transform: skewX(-18deg) !important;
  }
  .player-harness-status::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: 34px !important;
    right: auto !important;
    bottom: -28px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 0 !important;
    border-right: 30px solid transparent !important;
    border-top: 28px solid #21171f !important;
    border-bottom: 0 !important;
    transform: skewX(18deg) !important;
  }
}

@media (max-width: 900px) {
  .news-section { overflow: hidden; }
  .news-layout,
  .news-cards,
  .trainer-note,
  .news-card { min-width: 0; width: 100%; max-width: 100%; }
  .trainer-note { box-shadow: 6px 6px 0 #111; }
  .news-card { box-shadow: 6px 6px 0 #111; }
  .news-body { padding: 20px 18px 24px; }
}

@media (max-width: 480px) {
  .news-section { padding-inline: 16px; }
  .news-layout { gap: 22px; }
  .trainer-note { padding: 20px 18px; }
  .news-art { height: 225px; }
  .news-body h3 { font-size: 1.22rem; }
  .move-line { font-size: .9rem; line-height: 1.45; }
}

@media (max-width: 480px) {
  .news-layout,
  .news-cards,
  .trainer-note,
  .news-card {
    width: calc(100vw - 48px);
    max-width: calc(100vw - 48px);
  }
  .news-card,
  .trainer-note { margin-inline: auto; }
  .black-button { min-width: 0; width: 100%; }
}

@media (max-width: 480px) {
  .news-layout,
  .news-cards,
  .trainer-note,
  .news-card {
    width: 100%;
    max-width: 342px;
  }
  .section-title-row,
  .section-copy { max-width: 342px; }
  .trainer-note strong,
  .news-body h3,
  .move-line,
  .flavor-line { overflow-wrap: anywhere; }
}

.news-body { text-align: left; }
.news-body h3 {
  margin-bottom: 12px;
  font-style: normal;
  letter-spacing: -.02em;
}
.move-line,
.flavor-line {
  margin: 0;
  color: #202020;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.55;
}
.move-line { font-size: .98rem; }
.flavor-line { margin-top: 10px; color: #4a4a4a; font-size: .92rem; }

@media (max-width: 480px) {
  .news-body { padding: 18px 16px 22px; }
  .news-body h3 { font-size: 1.18rem; line-height: 1.25; }
  .move-line { font-size: .86rem; }
  .flavor-line { font-size: .82rem; }
}