/*
 * Pokémon Next UI foundation.
 * One reversible, last-loaded layer for the new visual contract.  Legacy
 * revision files remain untouched until each surface reaches visual parity.
 */

html[data-ui-revision="pokemon-next"] {
  --pk-font: "Onest", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pk-ink: #102f46;
  --pk-ink-soft: #45687c;
  --pk-line: rgba(31, 104, 140, .22);
  --pk-surface: rgba(247, 253, 255, .94);
  --pk-surface-strong: #f8fdff;
  --pk-surface-dark: rgba(10, 39, 58, .9);
  --pk-blue: #168fc2;
  --pk-blue-deep: #0873a5;
  --pk-red: #e83e4f;
  --pk-gold: #f1bd3f;
  --pk-success: #2aa873;
  --pk-danger: #d94a59;
  --pk-radius-sm: 8px;
  --pk-radius-md: 12px;
  --pk-radius-lg: 18px;
  --pk-hit: 44px;
  --pk-safe-top: env(safe-area-inset-top, 0px);
  --pk-safe-right: env(safe-area-inset-right, 0px);
  --pk-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pk-safe-left: env(safe-area-inset-left, 0px);
  --pk-z-world: 0;
  --pk-z-hud: 100;
  --pk-z-window: 1000;
  --pk-z-modal: 2000;
  --pk-z-toast: 3000;
  font-family: var(--pk-font);
}

html[data-ui-revision="pokemon-next"] body,
html[data-ui-revision="pokemon-next"] button,
html[data-ui-revision="pokemon-next"] input,
html[data-ui-revision="pokemon-next"] textarea,
html[data-ui-revision="pokemon-next"] select {
  font-family: var(--pk-font);
}

html[data-ui-revision="pokemon-next"] :where(button, input, textarea, select, a, [role="button"]):focus-visible {
  outline: 3px solid rgba(61, 190, 239, .78);
  outline-offset: 3px;
}

/* High-resolution raster family: team, bag, Pokédex and trainer club. */
html[data-ui-revision="pokemon-next"] .pokemon-nav-art {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 2px 3px rgba(5, 28, 48, .22));
  pointer-events: none;
}

html[data-ui-revision="pokemon-next"] .pokemon-nav-art--team { background-image: url('/assets/v8/ui/nav-team.png'); }
html[data-ui-revision="pokemon-next"] .pokemon-nav-art--bag { background-image: url('/assets/v8/ui/nav-bag.png'); }
html[data-ui-revision="pokemon-next"] .pokemon-nav-art--pokedex { background-image: url('/assets/v8/ui/nav-pokedex.png'); }
html[data-ui-revision="pokemon-next"] .pokemon-nav-art--club { background-image: url('/assets/v8/ui/nav-club.png'); }
html[data-ui-revision="pokemon-next"] .pokemon-nav-art--chat { background-image: url('/assets/v8/ui/nav-pokedex.png'); }
html[data-ui-revision="pokemon-next"] .pokemon-nav-art--quests { background-image: url('/assets/v2.9.11/items/oak-parcel.png'); }
html[data-ui-revision="pokemon-next"] .pokemon-nav-art--menu { background-image: url('/assets/v4.8/items/research-medal.png'); }

html[data-ui-revision="pokemon-next"] .progression-raster-icon,
html[data-ui-revision="pokemon-next"] .progression-icon.pokemon-nav-art {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 44px;
  filter: drop-shadow(0 3px 5px rgba(7, 36, 54, .18));
}

html[data-ui-revision="pokemon-next"] .progression-hero-icon .progression-raster-icon,
html[data-ui-revision="pokemon-next"] .factions-hero-v2761 > span > .progression-icon {
  width: 62px;
  height: 62px;
}

/* Global dock: one compact trainer-device surface, not five floating cards. */
html[data-ui-revision="pokemon-next"] .desktop-dock,
html[data-ui-revision="pokemon-next"] .mobile-dock {
  border: 1px solid rgba(117, 207, 239, .42);
  background:
    linear-gradient(180deg, rgba(21, 67, 91, .94), rgba(8, 39, 59, .96)),
    var(--pk-surface-dark);
  box-shadow: 0 14px 34px rgba(0, 24, 42, .28), inset 0 1px 0 rgba(255,255,255,.16);
  color: #eefaff;
}

html[data-ui-revision="pokemon-next"] .desktop-dock::before,
html[data-ui-revision="pokemon-next"] .mobile-dock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 2px solid rgba(232, 62, 79, .8);
  pointer-events: none;
}

html[data-ui-revision="pokemon-next"] .desktop-dock > button,
html[data-ui-revision="pokemon-next"] .mobile-dock > button {
  min-width: var(--pk-hit);
  min-height: var(--pk-hit);
  color: inherit;
  border-radius: var(--pk-radius-md);
  -webkit-tap-highlight-color: transparent;
}

html[data-ui-revision="pokemon-next"] .desktop-dock > button > span,
html[data-ui-revision="pokemon-next"] .mobile-dock > button > span {
  display: grid;
  place-items: center;
  overflow: visible;
}

html[data-ui-revision="pokemon-next"] .desktop-dock .pokemon-nav-art { width: 42px; height: 42px; }
html[data-ui-revision="pokemon-next"] .mobile-dock .pokemon-nav-art { width: 34px; height: 34px; }
html[data-ui-revision="pokemon-next"] .desktop-dock button:hover,
html[data-ui-revision="pokemon-next"] .desktop-dock button[aria-pressed="true"],
html[data-ui-revision="pokemon-next"] .mobile-dock button[aria-pressed="true"] {
  background: rgba(94, 196, 232, .16);
}

/* Fix the old 761–800 px hybrid: exactly one navigation family. */
@media (min-width: 761px) {
  html[data-ui-revision="pokemon-next"] .mobile-dock { display: none !important; }
  html[data-ui-revision="pokemon-next"] .desktop-dock { display: flex; }
}

@media (max-width: 760px) {
  html[data-ui-revision="pokemon-next"] .desktop-dock { display: none !important; }
  html[data-ui-revision="pokemon-next"] .mobile-dock {
    display: grid;
    padding-bottom: max(6px, var(--pk-safe-bottom));
  }
}

/* Trainer progression and clubs reuse real Pokémon objects instead of runes. */
html[data-ui-revision="pokemon-next"] :where(.progression-window-v2761, .factions-window-v2761) {
  color: var(--pk-ink);
}

html[data-ui-revision="pokemon-next"] :where(.progression-hero-v2761, .factions-hero-v2761) {
  background:
    linear-gradient(105deg, rgba(247, 253, 255, .97), rgba(227, 246, 252, .91)),
    url('/assets/v4.1/ui/pokedex-expedition-bg.png') center / cover;
  border-color: var(--pk-line);
  border-radius: var(--pk-radius-lg);
}

html[data-ui-revision="pokemon-next"] :where(.progression-hero-v2761, .factions-hero-v2761) h2 {
  color: var(--pk-ink);
}

html[data-ui-revision="pokemon-next"] :where(.progression-hero-v2761, .factions-hero-v2761) p {
  color: var(--pk-muted);
}

html[data-ui-revision="pokemon-next"] :where(.progression-hero-v2761, .factions-hero-v2761) > strong {
  color: var(--pk-ink);
  border-color: color-mix(in srgb, var(--pk-blue) 26%, var(--pk-line));
  background: rgba(255, 255, 255, .76);
}

html[data-ui-revision="pokemon-next"] :where(.talent-branch-v2761, .mastery-card-v2761, .faction-card-v2761) {
  border-radius: var(--pk-radius-md);
  border-color: var(--pk-line);
  box-shadow: 0 9px 22px rgba(13, 62, 88, .08);
}

html[data-ui-revision="pokemon-next"] .clan-module-grid-v2761 article > i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-style: normal;
}

html[data-ui-revision="pokemon-next"] .clan-module-grid-v2761 .progression-icon {
  width: 44px;
  height: 44px;
}

html[data-ui-revision="pokemon-next"] :where(.pokemon-type-badge, .combat-skill-tag.is-type) img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

html[data-ui-revision="pokemon-next"] .combat-type-icon-v8 {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

html[data-ui-revision="pokemon-next"] :where(.quest-type-graphic-v61, .quest-reward-icon-v61, .quest-target-raster img, .interaction-fallback-badge img, .creature-placeholder img) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

html[data-ui-revision="pokemon-next"] .interaction-fallback-badge {
  display: grid;
  place-items: center;
  overflow: visible;
}

html[data-ui-revision="pokemon-next"] .interaction-fallback-badge img {
  filter: drop-shadow(0 4px 7px rgba(8, 35, 52, .22));
}

/* Pokémon-world raster language: no platform emoji or fantasy glyphs in
   authored interface surfaces. */
html[data-ui-revision="pokemon-next"] :where(
  .starter-stat-art-v8,
  .mechanics-card-art-v8,
  .starter-reveal-ball-v8,
  .reward-celebration-burst-art-v8,
  .referral-invite-avatar img,
  .referral-gem-mark img,
  .profile-v80-lead-emoji.is-placeholder img
) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

html[data-ui-revision="pokemon-next"] .starter-stat-art-v8 {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  overflow: visible;
}

html[data-ui-revision="pokemon-next"] .starter-stat-art-v8 img,
html[data-ui-revision="pokemon-next"] .mechanics-card-art-v8 {
  filter: drop-shadow(0 2px 4px rgba(7, 41, 62, .2));
}

html[data-ui-revision="pokemon-next"] .mechanics-card > header > i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: visible;
  background: color-mix(in srgb, var(--pk-sky) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pk-sky) 28%, transparent);
  border-radius: var(--pk-radius-sm);
}

html[data-ui-revision="pokemon-next"] .mechanics-card-art-v8 {
  width: 38px;
  height: 38px;
}

html[data-ui-revision="pokemon-next"] :where(.referral-invite-avatar, .referral-gem-mark) {
  display: grid;
  place-items: center;
  overflow: visible;
}

html[data-ui-revision="pokemon-next"] .referral-invite-avatar img { width: 34px; height: 34px; }
html[data-ui-revision="pokemon-next"] .referral-gem-mark img { width: 44px; height: 44px; }

html[data-ui-revision="pokemon-next"] .profile-v80-lead-emoji.is-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

html[data-ui-revision="pokemon-next"] .profile-v80-lead-emoji.is-placeholder img {
  max-width: 92px;
  max-height: 92px;
}

html[data-ui-revision="pokemon-next"] .profile-shiny-mark {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 194, 62, .58);
  border-radius: 999px;
  background: rgba(255, 224, 128, .22);
  color: #7b5310;
  font-size: 10px;
  font-style: normal;
  letter-spacing: .08em;
  vertical-align: middle;
}

html[data-ui-revision="pokemon-next"] .starter-reveal-ball-v8 {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 5px;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(9, 37, 56, .25));
}

html[data-ui-revision="pokemon-next"] .reward-celebration-burst-art-v8,
html[data-ui-revision="pokemon-next"] .reward-celebration-burst .item-icon {
  width: 82px;
  height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(8, 38, 58, .28));
}

html[data-ui-revision="pokemon-next"] .chat-pack-tab > span,
html[data-ui-revision="pokemon-next"] .chat-pack-locked > span {
  display: grid;
  place-items: center;
  overflow: visible;
}

html[data-ui-revision="pokemon-next"] .chat-pack-tab > span img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

html[data-ui-revision="pokemon-next"] .chat-pack-locked > span img {
  display: block;
  width: 82px;
  height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(8, 38, 58, .22));
}

html[data-ui-revision="pokemon-next"] .chat-pack-lock {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(17, 62, 84, .12);
  color: var(--pk-ink-muted);
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .07em;
}

/* A single mobile contract: readable type, safe insets and 44 px actions. */
@media (max-width: 760px) {
  html[data-ui-revision="pokemon-next"] :where(.quest-widget, .side-panel, .chat-window, .battle-window, .starter-experience, .lab-games__window) {
    font-size: max(12px, 1rem);
  }

  html[data-ui-revision="pokemon-next"] :where(
    .quest-widget-collapse,
    .quest-hud-journal-v68,
    .quest-mode-tabs-v57 button,
    .quest-status-tabs-v57 button,
    .profile-v80 button,
    .inventory-v52 button,
    .dex-type-filter button,
    .pokemon-detail button,
    .battle-quick-item,
    .battle-utility-button,
    .battle-capture-cancel
  ) {
    min-width: var(--pk-hit);
    min-height: var(--pk-hit);
  }

  html[data-ui-revision="pokemon-next"] .starter-experience {
    margin:
      max(6px, var(--pk-safe-top))
      max(6px, var(--pk-safe-right))
      max(6px, var(--pk-safe-bottom))
      max(6px, var(--pk-safe-left));
    max-height: calc(100dvh - max(6px, var(--pk-safe-top)) - max(6px, var(--pk-safe-bottom)));
  }

  html[data-ui-revision="pokemon-next"] :where(.lab-games, .quarry-root, .pursuit-root) {
    padding-top: var(--pk-safe-top);
    padding-right: var(--pk-safe-right);
    padding-bottom: var(--pk-safe-bottom);
    padding-left: var(--pk-safe-left);
  }

  html[data-ui-revision="pokemon-next"] :where(.lab-games__header, .quarry-header, .pursuit-header) {
    padding-top: max(8px, var(--pk-safe-top));
  }
}

/* World interaction must never select page text or flash a browser highlight. */
html[data-ui-revision="pokemon-next"] :where(
  .game-screen canvas,
  .movement-zone,
  .joystick,
  .interaction-card,
  .desktop-dock,
  .mobile-dock,
  .battle-screen,
  .lab-games,
  .quarry-root,
  .pursuit-root
) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui-revision="pokemon-next"] *,
  html[data-ui-revision="pokemon-next"] *::before,
  html[data-ui-revision="pokemon-next"] *::after {
    scroll-behavior: auto !important;
  }
}