.flaro-network-bar {
  box-sizing: border-box;
  position: relative;
  z-index: 1100;
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  contain: inline-size;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.2vw, 34px);
  overflow-x: auto;
  padding: 5px max(128px, calc((100% - 1400px) / 2));
  border-bottom: 1px solid #523073;
  color: #f8f3ff;
  background: #080917;
  box-shadow: 0 4px 18px #08051080;
  font: 800 10px/1.15 Arial, Helvetica, sans-serif;
  letter-spacing: .015em;
  scrollbar-width: none;
  white-space: nowrap;
}
.flaro-network-bar::-webkit-scrollbar { display: none; }
.flaro-network-bar > span { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.flaro-network-bar strong { color: #fff; font: inherit; }
.flaro-giant-gamers-link {
  position: absolute;
  right: max(16px, calc((100% - 1660px) / 2));
  color: #9dff32;
  font: 900 10px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
  text-decoration: none;
  text-shadow: 0 0 5px #caff78, 0 0 13px #67ff2eaa;
}
.flaro-giant-gamers-link:hover,
.flaro-giant-gamers-link:focus-visible { color: #ffd36f; text-shadow: 0 0 12px #ffb84f99; }
.flaro-network-clock { color: #5cecff; }
.flaro-status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #32e889;
  box-shadow: 0 0 9px #26e784;
}
.flaro-status-dot.is-waiting { background: #ffc25f; box-shadow: 0 0 9px #ffb441; }
.flaro-status-dot.is-offline { background: #ff6f7d; box-shadow: 0 0 9px #ff5365; }
.has-flaro-network-bar .app-container { height: calc(100svh - 28px); }
.has-flaro-network-bar .page { height: calc(100dvh - 28px); }
@media (max-width: 760px) {
  .flaro-network-bar { justify-content: flex-start; gap: 22px; padding-inline:12px; font-size: 9px; }
  .flaro-network-operational { display: none !important; }
  .flaro-giant-gamers-link { position:static; flex:0 0 auto; font-size:9px; }
}
@media (prefers-reduced-motion: reduce) {
  .flaro-status-dot { box-shadow: none; }
}

/* Shared account dropdown (always rendered as a button from Frame 1, WoW-style). */
.navbar,
.universal-navbar { position: relative; z-index: 4000 !important; overflow: visible !important; }
.account-nav,
.account-nav.has-account-dropdown { position: relative; z-index: 4100; display: flex; align-items: center; justify-content: flex-end; min-width: 230px; overflow: visible; }
.flaro-account-menu { position: relative; margin-left: auto; }
.flaro-account-trigger {
  display: inline-flex; min-height: 44px; align-items: center; gap: 9px; padding: 5px 12px 5px 6px;
  border: 1px solid #62eef196; border-radius: 13px; color: #fff;
  background: linear-gradient(135deg, #172838f2, #24152ef2);
  box-shadow: inset 0 1px #fff3, 0 4px 16px #05030b80, 0 0 18px #4beef029; cursor: pointer;
  font: 800 11.5px/1 "Outfit", Arial, sans-serif; letter-spacing: .025em; white-space: nowrap;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.flaro-account-avatar {
  width: 34px; height: 34px; flex: 0 0 34px; display: inline-grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; box-shadow: none;
}
.flaro-account-avatar img { width: 34px; height: 34px; object-fit: contain; display: block; filter: drop-shadow(0 1px 4px #000a) drop-shadow(0 0 8px #ffb14266); }
.flaro-account-avatar svg { width: 17px; height: 17px; display: block; filter: drop-shadow(0 0 5px #57f2f870); }
.flaro-account-trigger strong { color: #78f8f6; font-weight: 800; }
.flaro-account-trigger i,
.flaro-account-caret { color: #ffd070; font-style: normal; font-size: 12px; flex: 0 0 auto; transition: transform .18s ease; }
.flaro-account-trigger[aria-expanded="true"] i,
.flaro-account-trigger[aria-expanded="true"] .flaro-account-caret { transform: rotate(180deg); }
.flaro-account-trigger:hover,
.flaro-account-trigger:focus-visible { border-color: #fff1c8; box-shadow: inset 0 1px #fff4, 0 0 28px #4beef04d; outline: none; }
.flaro-account-panel {
  position: absolute; z-index: 9999; top: calc(100% + 9px); right: 0; width: 300px; padding: 8px;
  border: 1px solid #70edf0a1; border-radius: 17px;
  background: linear-gradient(150deg, #151020fe, #20152afe 58%, #0e1b24fe);
  box-shadow: inset 0 1px #fff2, 0 18px 42px #020108e6, 0 0 28px #48edf03d;
  backdrop-filter: blur(18px);
}
.flaro-account-panel[hidden],
.flaro-account-panel [hidden] { display: none !important; }
.flaro-account-panel a,
.flaro-account-panel button {
  box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px;
  min-height: 56px; padding: 9px 11px; border: 0; border-radius: 11px; color: #fff;
  background: transparent; text-align: left; text-decoration: none; cursor: pointer;
}
.flaro-account-panel a > span:first-child,
.flaro-account-panel button > span:first-child {
  width: 38px; height: 38px; display: inline-grid; place-items: center;
  border: 0; border-radius: 0; background: transparent;
  color: #6ff5f5; font-size: 16px; text-align: center;
}
.flaro-account-panel a > span:first-child img,
.flaro-account-panel button > span:first-child img {
  width: 36px; height: 36px; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 5px #000a) drop-shadow(0 0 8px #ffb14255);
  transition: transform .18s ease, filter .18s ease;
}
.flaro-account-panel a:hover > span:first-child img,
.flaro-account-panel button:hover > span:first-child img {
  transform: scale(1.08);
  filter: drop-shadow(0 2px 7px #000c) drop-shadow(0 0 12px #ffc86499);
}
.flaro-account-panel a > span:first-child svg,
.flaro-account-panel button > span:first-child svg { width: 16px; height: 16px; display: block; }
.flaro-account-panel strong { display: block; color: #fff; font: 850 12px/1.2 "Outfit", Arial, sans-serif; }
.flaro-account-panel small { display: block; margin-top: 3px; color: #bdb3c4; font: 500 9px/1.25 "Inter", Arial, sans-serif; }
.flaro-account-panel a:hover,
.flaro-account-panel a:focus-visible,
.flaro-account-panel button:hover,
.flaro-account-panel button:focus-visible { background: #65eef013; outline: 1px solid #65eef04c; text-shadow: none; }
@media (max-width: 850px) {
  .account-nav,
  .account-nav.has-account-dropdown { min-width: 0; }
  .flaro-account-trigger > span:nth-child(2) { display: none; }
  .flaro-account-panel { width: min(292px, calc(100vw - 24px)); }
}

@media (max-width: 960px) { .flaro-network-bar { gap: clamp(10px, 1.4vw, 20px); font-size: 9px; } }

/* Private Pokédex links stay out of first paint for guests and hydrate synchronously
   before Frame 1 when the trainer session cookie/cache is present. */
.nav-links a[data-pokedex-link],
.nav-links a[href="pokedex.html"],
.nav-links a[href="/pokedex.html"] { display: none !important; }
html.account-authenticated .nav-links a[data-pokedex-link],
body.account-authenticated .nav-links a[data-pokedex-link],
html.account-authenticated .nav-links a[href="pokedex.html"],
body.account-authenticated .nav-links a[href="pokedex.html"],
html.account-authenticated .nav-links a[href="https://account.flarocity.com/#pokedex"],
body.account-authenticated .nav-links a[href="https://account.flarocity.com/#pokedex"] { display: inline-flex !important; }
.nav-links li:has(> a[data-pokedex-link]),
.nav-links li:has(> a[href="pokedex.html"]),
.nav-links li:has(> a[href="/pokedex.html"]),
.nav-links li:has(> a[href="https://account.flarocity.com/#pokedex"]) { display: none !important; }
html.account-authenticated .nav-links li:has(> a[data-pokedex-link]),
body.account-authenticated .nav-links li:has(> a[data-pokedex-link]),
html.account-authenticated .nav-links li:has(> a[href="pokedex.html"]),
body.account-authenticated .nav-links li:has(> a[href="pokedex.html"]),
html.account-authenticated .nav-links li:has(> a[href="https://account.flarocity.com/#pokedex"]),
body.account-authenticated .nav-links li:has(> a[href="https://account.flarocity.com/#pokedex"]) { display: list-item !important; }
.nav-links li:has(> a[data-pokedex-link]) + .nav-separator,
.nav-links li:has(> a[data-pokedex-link]) + .sep,
.nav-links li:has(> a[href="pokedex.html"]) + .nav-separator,
.nav-links li:has(> a[href="pokedex.html"]) + .sep,
.nav-links li:has(> a[href="/pokedex.html"]) + .nav-separator,
.nav-links li:has(> a[href="/pokedex.html"]) + .sep,
.nav-links li:has(> a[href="https://account.flarocity.com/#pokedex"]) + .nav-separator,
.nav-links li:has(> a[href="https://account.flarocity.com/#pokedex"]) + .sep { display: none !important; }
html.account-authenticated .nav-links li:has(> a[data-pokedex-link]) + .nav-separator,
html.account-authenticated .nav-links li:has(> a[data-pokedex-link]) + .sep,
body.account-authenticated .nav-links li:has(> a[data-pokedex-link]) + .nav-separator,
body.account-authenticated .nav-links li:has(> a[data-pokedex-link]) + .sep,
html.account-authenticated .nav-links li:has(> a[href="pokedex.html"]) + .nav-separator,
html.account-authenticated .nav-links li:has(> a[href="pokedex.html"]) + .sep,
body.account-authenticated .nav-links li:has(> a[href="pokedex.html"]) + .nav-separator,
body.account-authenticated .nav-links li:has(> a[href="pokedex.html"]) + .sep,
html.account-authenticated .nav-links li:has(> a[href="https://account.flarocity.com/#pokedex"]) + .nav-separator,
html.account-authenticated .nav-links li:has(> a[href="https://account.flarocity.com/#pokedex"]) + .sep,
body.account-authenticated .nav-links li:has(> a[href="https://account.flarocity.com/#pokedex"]) + .nav-separator,
body.account-authenticated .nav-links li:has(> a[href="https://account.flarocity.com/#pokedex"]) + .sep { display: list-item !important; }

/* Forged controls v3. These replace the old sliced-image buttons with crisp,
   responsive CSS plates so text remains selectable and never stretches. */
.btn-play-now,
.mascot-reaction-btn,
.page-button,
.card-action-btn,
.btn-dock-ghost,
.explore-menu-btn,
.btn-copy-ip,
.pokedex-gate-action {
  --control-accent: #ffb547;
  --control-accent-rgb: 255, 181, 71;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  overflow: hidden;
  padding: 10px 22px;
  border: 1px solid color-mix(in srgb, var(--control-accent) 82%, white 18%);
  border-image: none;
  border-radius: 13px;
  background:
    linear-gradient(115deg, rgba(var(--control-accent-rgb), .22), transparent 42%),
    linear-gradient(180deg, #2a1b32f2, #110d1af5);
  box-shadow:
    inset 0 1px 0 #ffffff2b,
    inset 0 -1px 0 rgba(var(--control-accent-rgb), .35),
    0 8px 20px #05030a8f,
    0 0 18px rgba(var(--control-accent-rgb), .32);
  color: #fffaf2;
  font: 900 12px/1.05 "Outfit", Arial, sans-serif;
  letter-spacing: .065em;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 2px 5px #050208, 0 0 10px rgba(var(--control-accent-rgb), .35);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-play-now::before,
.mascot-reaction-btn::before,
.page-button::before,
.card-action-btn::before,
.btn-dock-ghost::before,
.explore-menu-btn::before,
.btn-copy-ip::before,
.pokedex-gate-action::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 11px;
  background: linear-gradient(105deg, transparent 10%, #ffffff19 45%, transparent 64%);
  transform: translateX(-115%);
  transition: transform .5s ease;
}
.btn-play-now::after,
.page-button::after,
.btn-dock-ghost::after,
.btn-copy-ip::after,
.pokedex-gate-action::after {
  content: "✦";
  color: var(--control-accent);
  font-size: 10px;
  text-shadow: 0 0 9px var(--control-accent);
}
.page-button.secondary,
.card-store .card-action-btn,
.card-vote .card-action-btn,
.btn-dock-ghost,
.explore-menu-btn {
  --control-accent: #55eaf1;
  --control-accent-rgb: 85, 234, 241;
}
.btn-play-now:hover,
.btn-play-now:focus-visible,
.mascot-reaction-btn:hover,
.mascot-reaction-btn:focus-visible,
.page-button:hover,
.page-button:focus-visible,
.card-action-btn:hover,
.card-action-btn:focus-visible,
.btn-dock-ghost:hover,
.btn-dock-ghost:focus-visible,
.explore-menu-btn:hover,
.explore-menu-btn:focus-visible,
.btn-copy-ip:hover,
.btn-copy-ip:focus-visible,
.pokedex-gate-action:hover,
.pokedex-gate-action:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.1) saturate(1.08);
  border-color: #fff4d7;
  box-shadow: inset 0 1px 0 #ffffff3d, 0 12px 26px #05030aa8, 0 0 30px rgba(var(--control-accent-rgb), .52);
  outline: none;
}
.btn-play-now:hover::before,
.btn-play-now:focus-visible::before,
.page-button:hover::before,
.page-button:focus-visible::before,
.btn-dock-ghost:hover::before,
.btn-dock-ghost:focus-visible::before,
.btn-copy-ip:hover::before,
.btn-copy-ip:focus-visible::before,
.pokedex-gate-action:hover::before,
.pokedex-gate-action:focus-visible::before { transform: translateX(115%); }
.btn-play-now:active,
.page-button:active,
.btn-dock-ghost:active,
.btn-copy-ip:active,
.pokedex-gate-action:active { transform: translateY(1px) scale(.99); }
.page-button:disabled,
button.page-button[disabled] { cursor: not-allowed; filter: grayscale(.7); opacity: .55; }
.card-action-btn { width: 100%; }
.btn-dock-ghost { min-width: 112px; }

@media (max-width: 700px) {
  .btn-play-now, .page-button, .card-action-btn, .btn-dock-ghost,
  .explore-menu-btn, .btn-copy-ip, .pokedex-gate-action {
    min-height: 46px;
    padding: 10px 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-play-now, .page-button, .card-action-btn, .btn-dock-ghost,
  .explore-menu-btn, .btn-copy-ip, .pokedex-gate-action,
  .btn-play-now::before, .page-button::before, .btn-dock-ghost::before,
  .btn-copy-ip::before, .pokedex-gate-action::before { transition: none; }
}