/**
 * PinePixel - Pokemon-style horizontal scroll site stylesheet
 * 
 * Design System:
 * - Colors: Authentic Pokemon type palette (Red/Blue era)
 * - Font: Press Start 2P (pixel font) via Google Fonts
 * - Layout: Horizontal scroll snap (9 routes × 100vw)
 * - Animations: Respect prefers-reduced-motion
 * 
 * Methodology: KISS - each component self-contained, no magic numbers,
 * single source of truth via CSS custom properties.
 */

/* ============================================================================
   DESIGN TOKENS - Single source of truth for all visual values
   ============================================================================ */

:root {
  /* Pokemon Type Colors (authentic Gen 1 palette) */
  --pk-blue:       #3b4cca;  /* Primary UI blue */
  --pk-dark-blue:  #2a3a8f;  /* Darker blue for borders/shadows */
  --pk-light-blue: #7890e8;  /* Light blue accents */
  --pk-red:        #e03030;  /* Red for highlights/errors */
  --pk-dark-red:   #b82020;  /* Dark red */
  --pk-yellow:     #f8d030;  /* Yellow/gold for money/buttons */
  --pk-gold:       #f0c030;  /* Gold for featured items */
  --pk-green:      #50c040;  /* Green for success/HP */
  --pk-grass:      #78c850;  /* Grass type */
  --pk-electric:   #f8d030;  /* Electric type (same as yellow) */
  --pk-psychic:    #f85888;  /* Psychic type */
  --pk-steel:      #b8b8d0;  /* Steel type */
  --pk-fairy:      #f0b8f0;  /* Fairy type */
  --pk-ghost:      #705898;  /* Ghost type */
  --pk-dark:       #705848;  /* Dark type */
  --pk-dragon:     #7038f8;  /* Dragon type */
  --pk-rock:       #b8a038;  /* Rock type */
  --pk-water:      #6890f0;  /* Water type */
  --pk-fire:       #f08030;  /* Fire type */
  --pk-ice:        #98d8d8;  /* Ice type */
  --pk-flying:     #a890f0;  /* Flying type */
  --pk-bug:        #a8b820;  /* Bug type */
  --pk-poison:     #a040a0;  /* Poison type */
  --pk-ground:     #e0c068;  /* Ground type */
  --pk-normal:     #a8a878;  /* Normal type */

  /* Neutral/UI Colors */
  --bg:            #e8f0f8;  /* Page background */
  --bg-dark:       #d0d8e8;  /* Slightly darker background */
  --text:          #182030;  /* Primary text */
  --text-light:    #485060;  /* Secondary text */
  --white:         #ffffff;  /* Pure white */
  --black:         #081018;  /* Pure black */
  --dialogue-bg:   #f8f8f8;  /* Text box background */
  --dialogue-border:#3b4cca; /* Text box border */

  /* Layout */
  --max:           1320px;   /* Max content width (unused in horizontal layout) */
  --route-width:   100vw;    /* Each route = 1 viewport width */
}

/* ============================================================================
   RESET & BASE
   ============================================================================ */

* { box-sizing: border-box }

/* Smooth scroll by default, disabled for reduced motion */
html {
  scroll-behavior: smooth;
  height: 100%;
  overflow: hidden; /* Prevent page-level scroll - only .game-world scrolls */
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* Pixel font stack - Press Start 2P loaded via @font-face below */
  font-family: "Press Start 2P", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  /* Crisp pixel rendering */
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
  height: 100%;
  overflow: hidden; /* Lock body scroll - game-world handles it */
}

/* Press Start 2P - loaded from Google Fonts CDN with font-display:swap */
@font-face {
  font-family: "Press Start 2P";
  src: url("https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2") format("woff2");
  font-display: swap;
}

a { color: inherit; text-decoration: none }

/* Skip link for keyboard accessibility */
.skip-link {
  position: fixed;
  left: 14px;
  top: -60px;
  background: var(--pk-blue);
  color: var(--white);
  padding: 8px 12px;
  z-index: 10000;
  font-family: inherit;
  font-size: 10px;
}
.skip-link:focus { top: 14px }

/* ============================================================================
   GAME UI - Top HUD (trainer card, money) + Bottom MENU button
   ============================================================================ */

/* Fixed overlay, pointer-events:none on container, auto on children */
.game-ui {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  pointer-events: none;
}
.ui-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 16px;
  pointer-events: auto;
}
.ui-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 12px 16px;
  pointer-events: auto;
}

/* Trainer Card - top left */
.player-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 3px solid var(--pk-blue);
  border-radius: 4px;
  padding: 8px 12px;
  box-shadow: 4px 4px 0 var(--pk-dark-blue); /* Classic Pokemon drop shadow */
}
.trainer-sprite {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(2px 2px 0 var(--pk-dark-blue));
}
.trainer-info { display: flex; flex-direction: column }
.trainer-name { font-size: 10px; font-weight: 700; color: var(--pk-blue); letter-spacing: 1px }
.trainer-loc { font-size: 8px; color: var(--text-light) }
.badges { display: flex; gap: 4px; margin-left: 8px; padding-left: 8px; border-left: 2px solid var(--pk-blue) }
.badge { font-size: 14px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.2)) }

/* Money Display - top right */
.money-display {
  background: var(--white);
  border: 3px solid var(--pk-yellow);
  border-radius: 4px;
  padding: 8px 16px;
  box-shadow: 4px 4px 0 var(--pk-gold);
  font-weight: 700;
  color: var(--pk-dark-blue);
}
.money-icon { color: var(--pk-yellow); margin-right: 4px }

/* MENU Button - bottom center */
.menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--pk-blue);
  color: var(--white);
  border: 3px solid var(--pk-dark-blue);
  border-radius: 4px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--pk-dark-blue);
  transition: transform .1s;
}
.menu-btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--pk-dark-blue) }
.menu-btn-icon { font-size: 14px }

/* ============================================================================
   POKE MENU - Slide-out navigation panel (right side)
   ============================================================================ */

.poke-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8,16,24,.9);
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: opacity .3s, visibility .3s, transform .3s cubic-bezier(.22,.7,.27,1);
}
.poke-menu.open { opacity: 1; visibility: visible; transform: translateX(0); }

.poke-menu-inner {
  width: min(480px, 95vw);
  height: 100%;
  background: var(--white);
  border-left: 4px solid var(--pk-blue);
  box-shadow: -8px 0 0 var(--pk-dark-blue);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  overflow: auto;
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--pk-blue);
}
.menu-header h2 { font-size: 14px; color: var(--pk-blue); letter-spacing: 2px }
.menu-close { background: none; border: none; font-size: 24px; color: var(--pk-blue); cursor: pointer; line-height: 1; padding: 4px }

.menu-options { display: flex; flex-direction: column; gap: 8px; flex: 1 }
.menu-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg);
  border: 2px solid var(--bg-dark);
  border-radius: 4px;
  transition: all .15s;
}
.menu-option:hover { border-color: var(--pk-blue); background: var(--white); transform: translateX(4px); }
.option-icon { font-size: 20px; min-width: 36px; text-align: center }
.option-label { font-size: 10px; font-weight: 700; color: var(--pk-blue); flex: 1 }
.option-desc { font-size: 8px; color: var(--text-light) }

.menu-footer { padding-top: 16px; border-top: 3px solid var(--pk-blue) }
.contact-info { display: flex; flex-direction: column; gap: 8px; font-size: 8px; color: var(--text-light) }

/* Scrim behind menu */
.menu-scrim {
  position: fixed;
  inset: 0;
  background: rgba(8,16,24,.7);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.menu-scrim:not([hidden]) { opacity: 1; visibility: visible; }

/* ============================================================================
   ROUTE INDICATOR - Top-left HUD showing current route
   ============================================================================ */

.route-indicator {
  position: fixed;
  top: 100px;
  left: 16px;
  z-index: 80;
  background: var(--white);
  border: 3px solid var(--pk-blue);
  border-radius: 4px;
  padding: 8px 12px;
  box-shadow: 4px 4px 0 var(--pk-dark-blue);
  font-size: 9px;
  font-weight: 700;
  color: var(--pk-blue);
  white-space: nowrap;
}
.route-divider { color: var(--pk-yellow); margin: 0 8px }
.route-location { color: var(--text); text-transform: uppercase }

/* ============================================================================
   GAME WORLD - Horizontal scroll container (9 routes)
   ============================================================================ */

.game-world {
  display: flex;
  flex-direction: row;
  width: max-content;        /* Wider than viewport = scrollable */
  height: 100vh;
  overflow-x: auto;          /* Horizontal scroll only */
  overflow-y: hidden;        /* No vertical scroll */
  scroll-snap-type: x mandatory;  /* Snap to each route */
  scroll-padding: 0 16px;    /* Padding for snap alignment */
  -webkit-overflow-scrolling: touch;  /* iOS momentum scrolling */
  will-change: transform;    /* Hint for browser optimization */
}

/* Each route = 1 viewport width, snap-aligned */
.route {
  flex: 0 0 var(--route-width);
  width: var(--route-width);
  min-width: var(--route-width);
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* Parallax background layers */
.route-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden }
.bg-layer { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: repeat }
.bg-layer.sky { background: linear-gradient(180deg, #a8d0e8 0%, #78b8e8 50%, #50a0d8 100%) }
/* Trees layer - animated slow parallax */
.bg-layer.trees {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath fill='%2350a848' d='M32 4L12 28h40L32 4zM32 24L12 48h40L32 24z'/%3E%3C/svg%3E");
  opacity: .15;
  animation: scrollBg 60s linear infinite;
}
/* Grass layer - faster parallax, bottom only */
.bg-layer.grass {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2348a038' d='M16 2L6 14h20L16 2zM16 18L6 30h20L16 18z'/%3E%3C/svg%3E");
  bottom: 0;
  height: 40%;
  opacity: .2;
  animation: scrollBg 30s linear infinite reverse;
}
@keyframes scrollBg { from { background-position-x: 0 } to { background-position-x: 1000px } }

/* Route content area - centered, stacked */
.route-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  gap: 20px;
}

/* Right edge arrow indicator (continue →) */
.route-edge { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 10; padding: 0 20px; pointer-events: none }
.edge-arrow { font-size: 20px; color: var(--pk-blue); animation: edgePulse 1.5s ease-in-out infinite; filter: drop-shadow(2px 2px 0 var(--white)) }
@keyframes edgePulse { 0%,100% { transform: translateX(0) } 50% { transform: translateX(8px) } }
@media (prefers-reduced-motion: reduce) { .edge-arrow { animation: none } }

/* ============================================================================
   TEXT BOX - Classic Pokemon dialogue box
   ============================================================================ */

.text-box {
  width: 100%;
  max-width: 600px;
  background: var(--dialogue-bg);
  border: 4px solid var(--dialogue-border);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--pk-dark-blue), inset 2px 2px 0 var(--white);
  position: relative;
  overflow: hidden;
}
.text-box-inner { padding: 16px 20px; min-height: 100px }
.dialogue { margin: 0 0 8px; font-size: 11px; line-height: 1.8; color: var(--text); white-space: pre-wrap }
.dialogue:last-child { margin-bottom: 0 }
.speaker { color: var(--pk-blue); font-weight: 700 }
.highlight { color: var(--pk-red); font-weight: 700 }
.move-name { color: var(--pk-blue); font-weight: 700 }
.sub { font-size: 9px; color: var(--text-light); opacity: .8 }

/* Blinking arrow at bottom of text box */
.text-box-arrow {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 14px;
  color: var(--pk-blue);
  animation: arrowBlink 1s ease-in-out infinite;
}
@keyframes arrowBlink { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
@media (prefers-reduced-motion: reduce) { .text-box-arrow { animation: none } }

/* ============================================================================
   OVERWORLD SPRITE - Large pixel art image
   ============================================================================ */

.overworld-sprite { width: 100%; max-width: 500px; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.2)) }
.overworld-sprite img { width: 100%; height: auto; image-rendering: pixelated }

/* ============================================================================
   WARP POINTS - Quick navigation icons (Route 1)
   ============================================================================ */

.warp-points { display: flex; gap: 16px; margin-top: 8px }
.warp-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px;
  background: var(--white);
  border: 3px solid var(--pk-blue);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--pk-dark-blue);
  transition: all .15s;
  cursor: pointer;
}
.warp-point:hover { transform: translateY(-4px); box-shadow: 5px 5px 0 var(--pk-dark-blue); }
.warp-sprite { font-size: 28px }
.warp-point::after { content: attr(data-tooltip); font-size: 7px; color: var(--text-light); white-space: nowrap }

/* ============================================================================
   MOVE LIST - Route 2 (Approach) - 4 moves in grid
   ============================================================================ */

.move-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; max-width: 600px; width: 100% }
.move-item { display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--white); border: 2px solid var(--pk-blue); border-radius: 4px }
.move-pp { font-size: 8px; color: var(--pk-blue); background: var(--pk-yellow); padding: 2px 6px; border-radius: 2px }
.move-type { font-size: 7px; font-weight: 700; padding: 2px 6px; border-radius: 2px; background: var(--bg-dark); text-transform: uppercase }

/* ============================================================================
   POKEMON SUMMARY - Route 3 (Smart Home) - Stats + moves
   ============================================================================ */

.pokemon-summary {
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border: 3px solid var(--pk-blue);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--pk-dark-blue);
  overflow: hidden;
}
.pkmn-header { display: flex; justify-content: space-between; align-items: center; background: var(--pk-blue); color: var(--white); padding: 8px 12px; font-size: 10px }
.pkmn-level { background: var(--pk-dark-blue); padding: 2px 8px; border-radius: 4px }
.pkmn-stats { padding: 12px }
.stat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 9px }
.stat-label { min-width: 40px; color: var(--text-light) }
.stat-bar { flex: 1; height: 6px; background: var(--bg-dark); border-radius: 2px; overflow: hidden }
.stat-fill { height: 100%; width: var(--val,0); border-radius: 2px; transition: width .5s ease-out }
.stat-fill.hp { background: linear-gradient(90deg, var(--pk-red), #f87878) }
.stat-fill.atk { background: linear-gradient(90deg, var(--pk-red), #f8a060) }
.stat-fill.def { background: linear-gradient(90deg, var(--pk-steel), #d8d8e8) }
.stat-fill.spa { background: linear-gradient(90deg, var(--pk-psychic), #f8a8d0) }
.stat-val { min-width: 45px; text-align: right; color: var(--pk-blue); font-weight: 700 }
.pkmn-moves { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px }
.move { font-size: 7px; background: var(--bg); border: 2px solid var(--pk-blue); border-radius: 4px; padding: 4px 8px; color: var(--pk-blue) }

/* ============================================================================
   BATTLE SCENE - Route 4 (Wi-Fi) - Enemy vs Player HP bars
   ============================================================================ */

.battle-scene { display: flex; align-items: flex-end; justify-content: center; gap: 40px; margin: 20px 0; perspective: 500px }
.enemy-side, .player-side { display: flex; flex-direction: column; align-items: center; gap: 8px }
.enemy-sprite, .player-sprite { font-size: 64px; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.2)) }
.enemy-info, .player-info-battle { text-align: center; width: 160px }
.enemy-name, .player-name-battle { display: block; font-size: 9px; font-weight: 700; color: var(--pk-blue); margin-bottom: 4px }
.enemy-hp-bar, .player-hp-bar { height: 6px; background: var(--bg-dark); border-radius: 2px; overflow: hidden; border: 2px solid var(--pk-blue) }
.enemy-hp-fill { height: 100%; background: linear-gradient(90deg, var(--pk-red), #f87878); border-radius: 2px; transition: width .5s }
.player-hp-fill { height: 100%; background: linear-gradient(90deg, var(--pk-green), #78e878); border-radius: 2px; transition: width .5s }
.vs-marker { font-size: 14px; font-weight: 700; color: var(--pk-red); text-shadow: 2px 2px 0 var(--white); animation: vsPulse 1s ease-in-out infinite }
@keyframes vsPulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.1) } }
@media (prefers-reduced-motion: reduce) { .vs-marker { animation: none } }

/* ============================================================================
   TERMINAL BATTLE - Route 5 (Computers) - Typewriter lines
   ============================================================================ */

.terminal-battle {
  width: 100%;
  max-width: 480px;
  background: var(--black);
  border: 3px solid var(--pk-green);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--pk-grass);
  overflow: hidden;
  font-family: ui-monospace, monospace;
  font-size: 10px;
}
.terminal-header { background: var(--pk-green); color: var(--black); padding: 8px 12px; font-weight: 700; letter-spacing: 1px }
.terminal-lines { padding: 12px; display: flex; flex-direction: column; gap: 4px; color: var(--pk-green) }
/* Staggered reveal animation */
.line { opacity: 0; animation: lineReveal .3s ease-out forwards }
.line:nth-child(1) { animation-delay: 0s }
.line:nth-child(2) { animation-delay: .2s }
.line:nth-child(3) { animation-delay: .4s }
.line:nth-child(4) { animation-delay: .6s }
.line:nth-child(5) { animation-delay: .8s }
.line:nth-child(6) { animation-delay: 1s }
@keyframes lineReveal { from { opacity: 0; transform: translateX(-10px) } to { opacity: 1; transform: translateX(0) } }
.success { color: var(--pk-yellow) !important; font-weight: 700 }
@media (prefers-reduced-motion: reduce) { .line { animation: none; opacity: 1 } }

/* ============================================================================
   TYPE BADGES - Pokemon type pills (used across routes)
   ============================================================================ */

.type-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 16px }
.type-badge { font-size: 7px; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .5px; box-shadow: 2px 2px 0 rgba(0,0,0,.2) }
/* Each type uses authentic Pokemon color */
.type-normal { background: var(--pk-normal); color: var(--black) }
.type-fire { background: var(--pk-fire); color: var(--white) }
.type-water { background: var(--pk-water); color: var(--white) }
.type-electric { background: var(--pk-electric); color: var(--black) }
.type-grass { background: var(--pk-grass); color: var(--white) }
.type-ice { background: var(--pk-ice); color: var(--black) }
.type-fighting { background: var(--pk-dark); color: var(--white) }
.type-poison { background: var(--pk-poison); color: var(--white) }
.type-ground { background: var(--pk-ground); color: var(--black) }
.type-flying { background: var(--pk-flying); color: var(--white) }
.type-psychic { background: var(--pk-psychic); color: var(--white) }
.type-bug { background: var(--pk-bug); color: var(--white) }
.type-rock { background: var(--pk-rock); color: var(--white) }
.type-ghost { background: var(--pk-ghost); color: var(--white) }
.type-dragon { background: var(--pk-dragon); color: var(--white) }
.type-dark { background: var(--pk-dark); color: var(--white) }
.type-steel { background: var(--pk-steel); color: var(--black) }
.type-fairy { background: var(--pk-fairy); color: var(--black) }

/* ============================================================================
   MART - Route 6 (Pricing) - 3 items grid
   ============================================================================ */

.mart-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; max-width: 800px; width: 100% }
.mart-item {
  background: var(--white);
  border: 3px solid var(--pk-blue);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--pk-dark-blue);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: all .15s;
}
.mart-item:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--pk-dark-blue); }
.mart-item.featured { border-color: var(--pk-yellow); box-shadow: 4px 4px 0 var(--pk-gold); }
.mart-item.featured:hover { box-shadow: 6px 6px 0 var(--pk-gold); }
.item-sprite { font-size: 36px }
.item-name { font-size: 10px; font-weight: 700; color: var(--pk-blue); text-align: center; margin: 0 }
.item-desc { font-size: 8px; color: var(--text-light); text-align: center; margin: 0; line-height: 1.4 }
.item-price { font-size: 14px; font-weight: 700; color: var(--pk-red); background: var(--pk-yellow); padding: 4px 12px; border-radius: 4px; border: 2px solid var(--pk-gold) }
.plus { font-size: 10px; color: var(--pk-dark-blue) }
.item-recommended { font-size: 7px; background: var(--pk-red); color: var(--white); padding: 2px 8px; border-radius: 20px; font-weight: 700 }
.btn-mart {
  display: inline-block;
  background: var(--pk-blue);
  color: var(--white);
  border: 2px solid var(--pk-dark-blue);
  border-radius: 4px;
  padding: 8px 20px;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--pk-dark-blue);
  transition: all .1s;
}
.btn-mart:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--pk-dark-blue); }

/* ============================================================================
   GUILD BOARD - Route 7 (Business) - 4 quest buttons
   ============================================================================ */

.guild-board { display: flex; flex-direction: column; gap: 10px; max-width: 400px; width: 100% }
.guild-quest {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--white);
  border: 3px solid var(--pk-blue);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--pk-dark-blue);
  /* Buttons, not links - JS handles modal open */
}
.quest-icon { font-size: 24px }
.quest-name { flex: 1; font-size: 10px; font-weight: 700; color: var(--pk-blue) }
.quest-reward { font-size: 10px; color: var(--pk-yellow); font-weight: 700 }

/* ============================================================================
   QUEST FORM - Route 8 (Contact) - Styled form
   ============================================================================ */

.quest-form { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 16px }
.form-party { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.party-slot { display: flex; flex-direction: column; gap: 6px }
.party-slot.full { grid-column: 1 / -1 }
.party-slot label { font-size: 8px; font-weight: 700; color: var(--pk-blue); text-transform: uppercase; letter-spacing: .5px }
.party-slot input, .party-slot select, .party-slot textarea {
  padding: 10px 12px;
  background: var(--white);
  border: 2px solid var(--pk-blue);
  border-radius: 4px;
  font-family: inherit;
  font-size: 10px;
  color: var(--text);
  box-shadow: inset 2px 2px 0 var(--bg-dark);
  transition: border-color .15s;
}
.party-slot input:focus, .party-slot select:focus, .party-slot textarea:focus { outline: none; border-color: var(--pk-yellow); box-shadow: inset 2px 2px 0 var(--pk-yellow); }
.party-slot textarea { resize: vertical; min-height: 80px }
.consent { display: flex; align-items: flex-start; gap: 8px; font-size: 8px; color: var(--text); cursor: pointer; line-height: 1.5 }
.consent input { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; accent-color: var(--pk-blue); border: 2px solid var(--pk-blue); border-radius: 2px }
.btn-quest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--pk-yellow);
  color: var(--black);
  border: 3px solid var(--pk-gold);
  border-radius: 4px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--pk-gold);
  transition: all .1s;
}
.btn-quest:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--pk-gold); }
.btn-arrow { font-size: 14px }
.form-status { margin: 0; font-size: 9px; min-height: 1.4em; text-align: center }
.form-status.success { color: var(--pk-green) }
.form-status.error { color: var(--pk-red) }

/* ============================================================================
   POKEDEX - Route 9 (FAQ) - Collapsible entries
   ============================================================================ */

.pokedex-list { display: flex; flex-direction: column; gap: 8px; max-width: 500px; width: 100% }
.dex-entry { background: var(--white); border: 3px solid var(--pk-blue); border-radius: 4px; box-shadow: 3px 3px 0 var(--pk-dark-blue); overflow: hidden }
.dex-entry summary { padding: 12px 16px; font-size: 9px; font-weight: 700; color: var(--pk-blue); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center }
.dex-entry summary::-webkit-details-marker { display: none }
.dex-entry summary::after { content: '▼'; font-size: 10px; color: var(--pk-yellow); transition: transform .2s }
.dex-entry[open] summary::after { transform: rotate(180deg) }
.dex-entry p { padding: 0 16px 16px; margin: 0; font-size: 8px; color: var(--text-light); line-height: 1.6 }

/* ============================================================================
   FOOTER - Save slot + links
   ============================================================================ */

.game-footer { position: relative; z-index: 50; background: var(--pk-blue); color: var(--white); padding: 20px 16px; text-align: center }
.footer-save { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 600px; margin: 0 auto }
.save-slot { display: flex; align-items: center; gap: 12px; background: var(--pk-dark-blue); border: 2px solid var(--pk-yellow); border-radius: 4px; padding: 12px 20px }
.save-icon { font-size: 18px }
.save-text { font-size: 10px; font-weight: 700; color: var(--pk-yellow) }
.save-time { font-size: 7px; color: var(--white); opacity: .7 }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; font-size: 8px; opacity: .9 }
.footer-links a:hover { color: var(--pk-yellow) }
.copyright { margin-top: 16px; font-size: 7px; opacity: .6 }

/* ============================================================================
   RESPONSIVE - Mobile adjustments (≤768px, ≤480px)
   ============================================================================ */

@media (max-width: 768px) {
  :root { --route-width: 100vw }
  .game-world { flex-direction: row }
  .route { flex: 0 0 var(--route-width); min-width: var(--route-width); min-height: 100vh }
  .route-content { padding: 16px 12px; gap: 16px }
  .text-box-inner { padding: 12px 16px; min-height: 80px }
  .dialogue { font-size: 10px }
  .overworld-sprite { max-width: 100% }
  .mart-grid { grid-template-columns: 1fr }
  .form-party { grid-template-columns: 1fr }
  .game-ui { display: none } /* Hide HUD on mobile */
  .route-indicator { top: auto; bottom: 80px; left: 50%; transform: translateX(-50%) }
  .trainer-name { font-size: 8px }
  .money-display { font-size: 9px; padding: 6px 12px }
  .menu-btn { font-size: 8px; padding: 10px 16px }
  .poke-menu-inner { padding: 16px 12px }
  .menu-header h2 { font-size: 12px }
  .option-label { font-size: 9px }
  .item-name { font-size: 9px }
  .btn-mart { font-size: 8px }
  .btn-quest { font-size: 9px; padding: 10px 20px }
  .pkmn-stats { padding: 10px }
  .stat-row { font-size: 8px }
}

@media (max-width: 480px) {
  body { font-size: 10px }
  .dialogue { font-size: 9px }
  .trainer-name { font-size: 7px }
  .trainer-sprite { font-size: 22px }
  .badge { font-size: 12px }
  .money-display { font-size: 8px; padding: 4px 10px }
  .text-box { border-width: 3px }
  .text-box-inner { padding: 10px 12px }
  .mart-item { padding: 12px }
  .item-sprite { font-size: 28px }
  .route-edge { padding: 0 12px }
  .edge-arrow { font-size: 16px }
}

/* ============================================================================
   TOUCH DEVICES - Disable hover, enable active states
   ============================================================================ */

@media (hover: none) and (pointer: coarse) {
  .menu-option:hover, .warp-point:hover, .mart-item:hover, .guild-quest:hover,
  .move-item:hover, .type-badge:hover, .btn-mart:hover, .btn-quest:hover, .menu-btn:hover {
    transform: none; box-shadow: none;
  }
  .menu-option:active, .warp-point:active, .mart-item:active, .guild-quest:active,
  .btn-mart:active, .btn-quest:active, .menu-btn:active {
    transform: translateY(2px); box-shadow: 1px 1px 0 var(--pk-dark-blue);
  }
}

/* ============================================================================
   QUEST MODAL - Guild Hall service detail popup
   ============================================================================ */

.quest-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.quest-modal:not([hidden]) { opacity: 1; visibility: visible; }

/* Backdrop with blur */
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,16,24,.85);
  backdrop-filter: blur(2px);
  animation: fadeIn .2s ease-out;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .modal-backdrop { animation: none } }

/* Modal window - Pokemon dialogue box style */
.modal-window {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  background: var(--white);
  border: 4px solid var(--pk-blue);
  border-radius: 4px;
  box-shadow: 8px 8px 0 var(--pk-dark-blue), inset 2px 2px 0 var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalPop .2s cubic-bezier(.22,.7,.27,1);
  overflow-y: auto;
}
@keyframes modalPop { from { opacity: 0; transform: scale(.9) } to { opacity: 1; transform: scale(1) } }
@media (prefers-reduced-motion: reduce) { .modal-window { animation: none } }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--pk-blue);
  color: var(--white);
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}
.modal-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: opacity .15s;
}
.modal-close:hover { opacity: .7 }

.modal-content { padding: 16px; max-height: 60vh; overflow-y: auto }

.quest-detail { display: flex; flex-direction: column; gap: 12px }
.quest-description { margin: 0; font-size: 9px; line-height: 1.7; color: var(--text) }
.quest-details { margin: 0; padding-left: 16px; font-size: 8px; line-height: 2; color: var(--text-light) }
.quest-details li { position: relative }
.quest-details li::before { content: '▸'; position: absolute; left: -12px; color: var(--pk-blue); }

/* Type badge in modal */
.quest-type-badge {
  align-self: flex-start;
  font-size: 7px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .5px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.2);
}
.quest-type-badge.type-dragon { background: var(--pk-dragon); color: var(--white) }
.quest-type-badge.type-steel { background: var(--pk-steel); color: var(--black) }
.quest-type-badge.type-ghost { background: var(--pk-ghost); color: var(--white) }
.quest-type-badge.type-fairy { background: var(--pk-fairy); color: var(--black) }

.modal-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 2px solid var(--bg-dark);
  background: var(--bg);
}
.btn-modal-close, .btn-modal-quest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--pk-dark-blue);
  transition: all .1s;
}
.btn-modal-close { background: var(--white); color: var(--text); border: 2px solid var(--pk-blue); flex: 1; }
.btn-modal-close:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--pk-dark-blue); }
.btn-modal-quest { background: var(--pk-yellow); color: var(--black); border: 2px solid var(--pk-gold); flex: 1; text-decoration: none; box-shadow: 2px 2px 0 var(--pk-gold); }
.btn-modal-quest:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--pk-gold); }

body.modal-open { overflow: hidden }

/* ============================================================================
   ACCESSIBILITY - Focus visible styles
   ============================================================================ */

*:focus-visible { outline: 2px solid var(--pk-yellow); outline-offset: 2px; }

/* Explicit focus styles for interactive components */
.text-box:focus-within,
.menu-option:focus-visible,
.warp-point:focus-visible,
.mart-item:focus-visible,
.btn-mart:focus-visible,
.btn-quest:focus-visible,
.party-slot input:focus-visible,
.party-slot select:focus-visible,
.party-slot textarea:focus-visible,
.guild-quest:focus-visible,
.modal-close:focus-visible,
.btn-modal-close:focus-visible,
.btn-modal-quest:focus-visible {
  outline: 2px solid var(--pk-yellow);
  outline-offset: 2px;
}