/* Reflective glass over the existing night sky. Art, data and behavior stay intact. */
:root {
  --bg: #08090b;
  --panel: #141d20;
  --panel-deep: #0c1417;
  --ink: #f4f3ef;
  --muted: #c2d5d0;
  --line: rgba(255, 249, 232, .13);
  --teal: #77e8cd;
  --blue: #a7d7ed;
  --glass: rgba(8, 17, 20, .42);
  --glass-inner: rgba(255, 255, 255, .025);
  --glass-border: rgba(213, 242, 238, .22);
  --glass-edge: rgba(244, 255, 253, .46);
  --glass-reflection: linear-gradient(128deg, rgba(255,255,255,.12), rgba(255,255,255,.025) 26%, transparent 44%, rgba(255,255,255,.012) 72%, rgba(197,244,233,.045));
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 1px 0 0 rgba(255,255,255,.055), 0 20px 48px rgba(0,0,0,.25);
}

/* Ambient light is behind the glass, not a wash over text or illustrations. */
.journey-night {
  background:
    radial-gradient(ellipse 640px 540px at 4% 31%,rgba(47,169,146,.16),transparent 78%),
    radial-gradient(ellipse 670px 600px at 95% 68%,rgba(210,159,49,.13),transparent 78%),
    radial-gradient(ellipse 1000px 500px at 50% 8%,rgba(47,133,153,.08),transparent 76%);
}
.journey-night::before, .journey-night::after {
  content: "";
  position: absolute;
  width: min(760px,84vw);
  height: min(620px,76vh);
  pointer-events: none;
  background: radial-gradient(ellipse,rgba(71,208,168,.14),transparent 70%);
  opacity: .7;
  animation: glass-light-drift 22s ease-in-out infinite alternate;
}
.journey-night::before { left: -12vw; top: 12vh; }
.journey-night::after {
  right: -12vw; top: 45vh;
  background: radial-gradient(ellipse,rgba(242,189,67,.12),transparent 70%);
  animation-delay: -11s;
  animation-direction: alternate-reverse;
}
@keyframes glass-light-drift {
  from { transform: translate3d(0,0,0) scale(1); opacity: .5; }
  to { transform: translate3d(30px,-42px,0) scale(1.12); opacity: .9; }
}
.page-hidden .journey-night::before, .page-hidden .journey-night::after { animation-play-state: paused; }
.effects-off .journey-night::before, .effects-off .journey-night::after { animation: none; opacity: .5; }

/* Translucency is on surfaces, never opacity/filter on their content. */
.site-header {
  background: linear-gradient(110deg,rgba(170,242,225,.055),transparent 46%,rgba(250,220,122,.035)),rgba(7,13,16,.58);
  border-bottom-color: var(--glass-border);
  box-shadow: inset 0 1px 0 #ffffff0b,0 8px 30px #0004;
}
.site-footer { background: linear-gradient(130deg,#71ddbd08,transparent 48%,#ecc26407),rgba(7,13,16,.5); border-color: var(--line); }
.portal-sidebar, .portal-main .section, .portal-main .signal-bar,
.portal-account, .dex-panel, .rail-card, .portal-main .player-search {
  background: var(--glass-reflection),var(--glass);
  border-color: var(--glass-border);
  border-top-color: var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .portal-sidebar, .portal-main .section, .portal-main .signal-bar,
  .portal-account, .dex-panel, .rail-card {
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
    backdrop-filter: blur(14px) saturate(1.12);
  }
}
.portal-sidebar { scrollbar-color: #65605a transparent; }
.portal-account .account-drawer { background: none; }
.portal-account .drawer-head, .portal-account .account-tabs,
.registration-steps, .trainer-progress, .dex-counter, .nature-table-wrap,
.sidebar-heading, .sidebar-note { border-color: var(--line); }
.rail-title { background: linear-gradient(110deg,#aaf4dc12,transparent 72%,#f2d17609); border-color: var(--line); }
.rail-play {
  background: linear-gradient(180deg,#090a0c05 15%,#08191ede 55%,#0a151790 100%),url("/assets/journey-world-r1.webp") 87% top/auto 275px no-repeat;
  border-color: var(--glass-border);
  border-top-color: var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.rail-play > p:last-child, .rail-shortcut small, .rail-disclaimer,
.sidebar-heading > span, .menu-group h2, .sidebar-note p,
.portal-pagebar p, .portal-language { color: var(--muted); }
.portal-pagebar p > span { color: #77736b; }
.portal-pagebar strong { color: var(--ink); }
.nav-icon { color: #8ee5cc; }
.menu-group > a[data-portal-link="conta"] .nav-icon { color: #9fdaef; }
.menu-group > a[data-portal-link="pokedex"] .nav-icon { color: #ffb49f; }
.menu-group > a[data-portal-link="natures"] .nav-icon { color: #d2b5ff; }
.menu-group > a[data-portal-link="rankings"] .nav-icon,
.menu-group > a[data-portal-link="download"] .nav-icon, .sidebar-home .nav-icon { color: #ffe084; }
.sidebar-heading > span { color: #95e6ce; }
.menu-group h2 { color: #a0c6bc; }
.portal-sidebar .nav-menu > a, .menu-group > a, .header-actions > a { color: #deddd8; }
.portal-sidebar .nav-menu > a:hover, .menu-group > a:hover,
.rail-link:hover, .rail-shortcut:hover { background: linear-gradient(110deg,#91ebcc14,#ffffff04); color: #f1fffa; }
.portal-sidebar .nav-menu > a[aria-current="page"], .menu-group > a[aria-current="page"] {
  background: linear-gradient(110deg,rgba(232,195,104,.2),rgba(232,195,104,.045));
  box-shadow: inset 3px 0 var(--yellow),inset 0 1px 0 #ffefbd26,0 0 22px #eac44e08;
  color: #ffe08b;
}
.header-actions .nav-download { color: var(--yellow); }
.header-actions .button, .button--ghost, .button--outline,
.dex-pagination button, .dex-message button, .starter-card button,
.world-map button, .world-map select, .world-map-dialog-head button {
  background: linear-gradient(135deg,#effff41c,#ffffff03 48%,#c4efdf08),rgba(14,25,28,.32);
  border-color: rgba(255,249,232,.24);
  color: #ede9df;
  box-shadow: inset 0 1px 0 #ffffff20,0 4px 14px #0002;
}
.header-actions .header-logout { color: #ffe08b; }
.header-actions .button:hover, .button--ghost:hover, .button--outline:hover,
.dex-pagination button:hover:not(:disabled), .dex-message button:hover,
.starter-card button:hover, .world-map button:hover, .world-map-dialog-head button:hover {
  background: linear-gradient(130deg,#e5c47818,#e5c47805),#1b1b1c;
  border-color: #d4b875;
  color: #ffe5a4;
}
.button--primary, .account-primary { color: #191710; }
.button--primary {
  background: linear-gradient(125deg,#fff096,#ffdf5e 44%,#ffd345);
  box-shadow: inset 0 1px 0 #fff8,0 4px 0 #b49335,0 0 22px #f3cd5719;
}
.button--primary:hover { box-shadow: inset 0 1px 0 #fffb,0 4px 0 #b49335,0 0 30px #f3cd5733; }

/* Inner surfaces share the same neutral material, without nested blur. */
.maintenance-notice, .ecosystem-card, .podium-card, .ranking-board,
.dex-controls, .dex-tabs, .nature-signature, .nature-explainer,
.trainer-profile, .team-member, .starter-card, .journey-account-form .character-sex label,
.profile-loading, .profile-empty, .profile-character, .dex-message {
  background: linear-gradient(128deg,#ffffff0a,transparent 65%,#c4f5df03),var(--glass-inner);
  border-color: var(--glass-border);
}
.portal-main .closing-cta { background: linear-gradient(130deg,#b8964716,transparent 65%),var(--glass); border-color: var(--glass-border); }
.dex-card { background: linear-gradient(145deg,#ffffff0d,transparent 65%),rgba(10,19,22,.2); border-color: var(--glass-border); }
.dex-card:hover { border-color: var(--dex-accent); }
.dex-tabs a { color: var(--muted); }
.dex-tabs a:not([aria-current]):hover { background: #ffffff09; color: var(--ink); }
.dex-tabs a[aria-current="page"] { color: #1b1912; }
.dex-eyebrow { color: #87e7d0!important; }
.dex-heading p, .dex-counter span, .dex-number, .dex-results-head,
.dex-pagination span, .dex-footnote, .dex-message, .dex-image-missing,
.nature-explainer p, .nature-signature > span, .nature-legacy p { color: var(--muted); }
.dex-text-button { color: #87e7d0; }
.dex-text-button:disabled { color: #8d8c87; }
.nature-table th { background: #ffffff06; color: #d5d2ca; }
.nature-table td { border-color: var(--line); color: #d5d2ca; }
.nature-table tr:nth-child(even) td { background: #ffffff03; }
.nature-table tbody tr:hover td { background: #ffffff08; }
.nature-legacy { background: #b39bd00a; border-color: #b39bd02e; }
/* Keep type badges, nature gains/losses and the XP meter's meaningful colors. */
.dex-type { background: color-mix(in srgb,var(--dex-accent) 14%,#17181a); border-color: color-mix(in srgb,var(--dex-accent) 32%,#28292b); }
.dex-portrait::after { background: #0005; }
.trainer-stage { background: radial-gradient(ellipse at 50% 65%,#ab94581f,transparent 67%),#ffffff02; border-color: var(--line); }
.trainer-portrait { background: radial-gradient(ellipse at 50% 98%,#e0c68c20,transparent 56%); border-bottom-color: #b4a078; }
.profile-eyebrow { color: #87e7d0; }
.profile-account, .profile-picker, .trainer-stats dt, .trainer-progress-heading,
.trainer-progress > p, .profile-save-note, .team-level, .profile-image-missing,
.team-empty-label, .world-map-heading p, .world-map-note { color: var(--muted); }
.profile-status { color: #c8c7c1; background: #ffffff04; border-color: var(--glass-border); }
.profile-status.is-online { color: #91ecd0; border-color: #347466; }
.team-count { color: #d2cabe; border-color: var(--glass-border); }
.team-position { color: #9a9891; }
.team-member.is-empty { background: transparent; border-color: #ffffff19; }
.team-empty-mark { color: #716b5e; }
.team-portrait { background: radial-gradient(ellipse,#e5d2a20c,transparent 66%); }
.starter-card.selected, .journey-account-form .character-sex label:has(:checked) { background: #ebc56b0b; border-color: #ffe169; }
.starter-card.selected button { background: #ffdf64; border-color: #ffdf64; color: #191710; }
.registration-steps li { color: #aaa79f; }
.registration-steps li[aria-current=step] { color: #ffde60; }
.journey-account-form p, .journey-account-form small, .registration-success p,
[data-registration-review] { color: var(--muted); }
.journey-account-form label { color: var(--ink); }
.portal-account .drawer-notice, [data-starter-selection] { background: #e5c4780a; border-color: #e5c47836; }

/* Inputs stay dark and opaque enough to read through autofill and reflections. */
.journey-account-form input:not([type=radio]), .dex-controls input, .dex-controls select,
.profile-picker select, .ranking-filters select, .searchbox input, .demo-form select,
.portal-account .demo-form input {
  background: rgba(7,15,18,.62);
  color: var(--ink);
  border-color: rgba(255,249,232,.27);
}
.dex-controls label { color: #dfddd6; }
.dex-controls input::placeholder, .journey-account-form input::placeholder { color: #94928b; }
.journey-account-form input:focus { outline-color: #e4ce95; border-color: #e4ce95; }
.journey-account-form input:user-invalid { border-color: #ff9292; }
.journey-account-form input:-webkit-autofill { -webkit-text-fill-color:#f4f3ef; box-shadow:0 0 0 1000px #17181b inset; caret-color:#f4f3ef; }
.password-toggle { color: #c8c4b8; }
.password-toggle:hover { color: #ffe5a4; background: #ffffff0a; }
.password-toggle:focus-visible, .dex-panel :is(a,button,input,select):focus-visible,
.world-map button:focus-visible, .world-map select:focus-visible, .world-map canvas:focus-visible { outline-color: #e4ce95; }
select option { background: #191a1d; color: #f4f3ef; }

.world-map, .world-map-dialog { background: #090a0d; border-color: var(--glass-border); }
.world-map-viewport { background: #090a0d; }
.world-map-toolbar, .world-map-dialog-head { background: linear-gradient(110deg,#b2f6e013,transparent 65%,#e8c85a08),rgba(11,22,25,.72); border-color: var(--line); }
.world-map-help { background: #111215; color: var(--muted); border-color: var(--line); }
.world-map label { color: #d2cfc5; }
.toast { background: #191a1df5; border-color: #bfa56b6b; }

@media(max-width:820px) {
  /* A mobile drawer covers content: favor legibility over transparency here. */
  .portal-sidebar { background: var(--glass-reflection),rgba(15,16,18,.96); }
  .sidebar-backdrop:not([hidden]) { background: #000b; }
  .sidebar-close, .nav-toggle { background: #222326; color: #f4f3ef; border-color: var(--glass-border); }
}
@media(prefers-reduced-transparency:reduce) {
  .journey-night { background: none; }
  .journey-night::before, .journey-night::after { content: none; animation: none; }
  .site-header, .site-footer, .portal-sidebar, .portal-main .section,
  .portal-main .signal-bar, .portal-account, .dex-panel, .rail-card,
  .portal-main .player-search {
    background: #141517;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media(forced-colors:active) {
  .journey-night { background: none; }
  .journey-night::before, .journey-night::after { content: none; animation: none; }
  .site-header, .site-footer, .portal-sidebar, .portal-main .section,
  .portal-main .signal-bar, .portal-account, .dex-panel, .rail-card {
    background: Canvas; border-color: CanvasText; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media(prefers-reduced-motion:reduce) {
  .journey-night::before, .journey-night::after { animation: none; opacity: .6; }
}