/* ========================================================================== Pokemon Browser Game — app shell styles Mobile-first. Fixed header/footer, scrollable content, touch-sized controls. On wider viewports the shell stays phone-width and centers, so the game reads as "an app" rather than a stretched website. ========================================================================== */ :root { --color-bg: #e5e8e8; --color-surface: #f2f3f4; --color-surface-banner: #eaeded; --color-panel: #f8f9f9; --color-primary: #e3350d; --color-primary-dark: #b8280a; --color-accent: #3b6ce0; --color-activity-accent: #3498db; --color-link-hover: #1abc9c; --color-heading: #2c3e50; --color-text: #34495e; --color-text-muted: #6b7c8f; --color-border: #d5d8dc; --color-border-light: #abb2b9; --color-danger: #d92d20; --color-success: #1a7f37; --color-warning: #f1c40f; /* Low-alpha tints derived from --color-primary/--color-danger, used for hover/active nav highlights and error banners — kept as their own variables (rather than hardcoded hex) so the 3 themes below can each supply a tint that actually reads against their own --color-surface, instead of every theme inheriting the light theme's pale pink. */ --color-primary-tint: #feecec; --color-danger-tint: #fdecea; --header-height: 56px; --footer-height: 68px; --sidebar-width: 200px; --radius: 8px; /* Smaller radius for content nested one level inside an outer container card (.app-header-group/.app-sidebar-left/.app-sidebar-right/.app-main all use --radius; .card and the party/box grid cells living inside one of those use this instead) — matches the reference mockup's two-tier 8px/6px rounding rather than one radius everywhere. */ --radius-sm: 6px; --shell-max-width: 1600px; } /* Dark and Fire Red themes — selected via the sidebar's Theme switcher (assets/js/app.js persists the choice to localStorage as data-theme on ; includes/layout_header.php applies it before first paint via an inline head script, so there's no flash of the light theme). Every other rule in this file already reads color through the --color-* variables above, so overriding them here is enough to reskin the whole app — only a few rules elsewhere used a hardcoded hex instead of a variable (nav hover/active, .form-error, .item-count) and those were changed to reference --color-primary-tint/--color-danger-tint or a theme-neutral fixed color so they don't go pale-pink-on-black. --color-surface (outer header/sidebar/main card), --color-surface-banner (sidebar-group-title banners, one shade lighter/more saturated) and --color-panel (nested .card sections within .app-main) are 3 distinct depth layers, not 3 names for the same grey — matching the reference mockup's --bg-header/--bg-menu-header/--bg-panel exactly. */ :root[data-theme="dark"] { --color-bg: #0a0a0a; --color-surface: #1a1a1a; --color-surface-banner: #242424; --color-panel: #181818; --color-primary: #e3350d; --color-primary-dark: #ff6b4a; --color-accent: #6d93ff; --color-activity-accent: #888888; --color-link-hover: #ffffff; --color-heading: #ffffff; --color-text: #cccccc; --color-text-muted: #888888; --color-border: #333333; --color-border-light: #444444; --color-danger: #ff6b6b; --color-success: #3ddc73; --color-warning: #f1c40f; --color-primary-tint: rgba(227, 53, 13, 0.18); --color-danger-tint: rgba(255, 107, 107, 0.18); } /* Fire Red is the boldest of the 3 — the reference mockup paints the outer header/sidebar/main cards themselves a deep red (not just a red accent on a neutral dark card like the other two themes), with an even darker red banner shade for group-titles/the stats ribbon. */ :root[data-theme="fire"] { --color-bg: #0a0a0a; --color-surface: #b30000; --color-surface-banner: #800000; --color-panel: #1a1515; --color-primary: #ff6600; --color-primary-dark: #ff9999; --color-accent: #ff9999; --color-activity-accent: #ff6600; --color-link-hover: #ff9999; --color-heading: #ffffff; --color-text: #dddddd; --color-text-muted: #cc9999; --color-border: #590000; --color-border-light: #ff4d4d; --color-danger: #ff4d4d; --color-success: #3ddc73; --color-warning: #f1c40f; --color-primary-tint: rgba(255, 102, 0, 0.18); --color-danger-tint: rgba(255, 77, 77, 0.18); } /* PokeLegacy — the warm amber/cream palette from login.php/register.php's "bento grid" design (assets/css/auth.css), offered here as a 4th selectable theme for the logged-in app too. Light like the default theme (white/cream surfaces, dark text) rather than dark like Fire Red/Dark, so --color-bg is the cream (not black) and --color-surface is white, matching those pages' actual colors 1:1 instead of just borrowing the accent hue. */ :root[data-theme="legacy"] { --color-bg: #fffbeb; --color-surface: #ffffff; --color-surface-banner: #fef3c7; --color-panel: #fffbeb; --color-primary: #fbbf24; --color-primary-dark: #f59e0b; --color-accent: #78350f; --color-activity-accent: #b45309; --color-link-hover: #f59e0b; --color-heading: #78350f; --color-text: #44403c; --color-text-muted: #6b7280; --color-border: #fef3c7; --color-border-light: #fde68a; --color-danger: #dc2626; --color-success: #16a34a; --color-warning: #f1c40f; --color-primary-tint: rgba(251, 191, 36, 0.16); --color-danger-tint: rgba(220, 38, 38, 0.12); } /* "Fresh" — the visual refresh built for the public homepage (2026-07-22), offered here as a 5th selectable theme for the logged-in app instead of replacing the existing default outright. A real Pokemon red/gold pairing (unrelated blue accent swapped for a legible gold-amber that works as both text AND a fill/border color — see every var(--color-accent) consumer across this file) plus a warm neutral background instead of the default theme's cold grey-blue. Deliberately reversible: switching back to any other theme (including "Light", the pre-refresh default) instantly reverts everything, nothing is deleted — see settings.php's Theme card. */ :root[data-theme="refresh"] { --color-bg: #f7f4ee; --color-surface: #ffffff; --color-surface-banner: #fff1d6; --color-panel: #fbf9f5; --color-primary: #ee1c25; --color-primary-dark: #b3121a; --color-accent: #c98a00; --color-activity-accent: #c98a00; --color-link-hover: #ee1c25; --color-heading: #1f2a44; --color-text: #3c4657; --color-text-muted: #6b7280; --color-border: #e7e2d8; --color-border-light: #d8d0bd; --color-danger: #d92d20; --color-success: #1a7f37; --color-warning: #f1c40f; --color-primary-tint: rgba(238, 28, 37, 0.08); --color-danger-tint: #fdecea; } /* Display font, "Fresh" theme only (assets/js/app.js sets [data-theme] on , same mechanism the other 4 themes use) — the logged-in app's .section-title stays "Noto Sans" for every other theme. Loaded via includes/layout_header.php's (same Google Fonts link the public pages use); text-transform/letter-spacing left alone (still uppercase + tracked like every other theme's section titles) so only the typeface itself changes, not the whole heading treatment. */ :root[data-theme="refresh"] .section-title { font-family: 'Baloo 2', 'Noto Sans', sans-serif; font-weight: 700; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; } /* .app-shell below is horizontally centered (max-width + margin:0 auto) within the full window width — on a desktop browser with a classic (non-overlay) scrollbar, a page whose content fits the viewport (no scrollbar) has ~15-17px more width to center within than a page whose content needs one, so navigating between a short page and a tall page visibly shifts the whole centered shell sideways (reported: map.php, which usually needs to scroll, to battle.php, which usually doesn't). Reserving the scrollbar's gutter unconditionally — whether or not this particular page actually needs to scroll — keeps the available width identical across every page, so nothing shifts. overflow-y: scroll (rather than the newer scrollbar-gutter: stable) since it needs to work on every browser this project already targets, not just recent ones. */ html { overflow-y: scroll; } body { font-family: "Noto Sans", sans-serif; font-size: 16px; color: var(--color-text); background: var(--color-bg); -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; } a { color: var(--color-accent); transition: color 0.2s ease; } a:hover { color: var(--color-link-hover); } /* Desktop-only 80% zoom — the player found the site "much cleaner" at 80% browser zoom, so this reproduces that directly for every visitor rather than a per-element font-size/icon-size chase (which can't reach every padding/gap the way real zoom does, and stacks badly with it). `zoom` actually reflows the subtree at the smaller scale (unlike `transform: scale()`, which just visually shrinks the box without updating layout or JS's getBoundingClientRect() reads — that would desync assets/js/app.js's tooltip positioning math), so this is the same mechanism as manually zooming, just applied automatically. Scoped to desktop only — mobile already has its own carefully-tuned separate sizing via the max-width:768px breakpoints throughout this file and shouldn't get any smaller. */ @media (min-width: 769px) { body { zoom: 0.8; } } /* ---------------------------------------------------------------------- */ /* App shell */ /* ---------------------------------------------------------------------- */ /* .has-sidebar (set on .app-shell by layout_header.php) marks the pages that actually render the sidebar/bottom nav — auth pages (login/register) and the pre-starter shell reuse plain .app-shell/.app-main (no flex, no padding) without a nav, so they must NOT get pulled into this layout. */ .app-shell { max-width: var(--shell-max-width); margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--color-bg); } .app-shell.has-sidebar { display: flex; flex-direction: column; gap: 20px; padding: 20px 15px; } /* The left sidebar / main content / right sidebar row — a genuine flexbox row (not the old position:fixed-sidebar + margin-offset-content hack), so the 3 columns lay out exactly like the reference mockup: same document flow, same "sidebar height stretches to match main" default flex behavior, no manual margin math to keep in sync with --sidebar-width. */ .app-content-row { display: flex; flex: 1; gap: 20px; min-height: 0; } /* Groups the logo, Stats/Headlines tabs, and Quick Actions into one cohesive bar (same "one bordered container" language as .app-sidebar-left/.app-sidebar-right below) — includes/layout_header.php wraps all three in this div. The 3 sections are divided by a border-left between them (see .header-box below) rather than each being its own separately-boxed card; overflow:hidden keeps the top accent gradient (::before) and each section's content from poking past the rounded corners. */ .app-header-group { position: relative; display: flex; flex-direction: column; gap: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); overflow: hidden; color: var(--color-heading); } /* Thin brand-gradient accent along the header's top edge — the single "this app has a personality" touch on an otherwise neutral shell. overflow:hidden on the parent clips it to the outer radius. */ .app-header-group::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); } /* The only child of .app-header-group now (no more stats ribbon below it), so it doesn't need its own border-bottom divider. Three sections side by side: Logo / Stats+Headlines tabs / Quick Actions — see includes/ layout_header.php's header-box-logo/-stats/-links. Each is divided from the next by a border-left rather than being its own separately-boxed card, so the header reads as one cohesive bar instead of 3 nested boxes. */ .app-header { display: flex; align-items: stretch; gap: 0; padding: 15px 8px; z-index: 10; } .header-box { padding-left: 22px; padding-right: 22px; } .header-box + .header-box { border-left: 1px solid var(--color-border); } .header-box-logo { flex: 0 0 240px; display: flex; align-items: center; justify-content: center; min-width: 0; } .app-header-logo { display: flex; align-items: center; justify-content: center; min-width: 0; width: 100%; } .app-header-logo img { height: 176px; width: auto; max-width: 100%; object-fit: contain; } .header-box-stats { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-top: 10px; padding-bottom: 10px; gap: 8px; } /* Grid instead of flex so .header-tabs can sit truly centered in the row (grid-column 2 of 3, justify-self:center) while .header-tab-badges stays pinned to the right (grid-column 3, justify-self:end) independent of each group's own width — a plain flex row can't do "one group centered, the other pinned to an edge" without one pushing the other off-center. */ .header-tab-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; } /* Segmented pill control rather than an underlined-tab look — the active tab gets its own filled pill (matching .theme-btn.active's language elsewhere) instead of just a bottom border, which reads as more of a deliberate switch and less like an afterthought row of text links. */ .header-tabs { grid-column: 2; justify-self: center; display: flex; gap: 2px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; padding: 3px; } .header-tab { display: flex; align-items: center; gap: 6px; background: none; border: none; border-radius: 999px; padding: 5px 14px; font-size: 0.85rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .header-tab:hover { color: var(--color-heading); } .header-tab.active { color: var(--color-primary-dark); background: var(--color-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } .header-tab-badges { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .header-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 700; color: var(--color-text-muted); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; padding: 3px 9px; white-space: nowrap; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; } a.header-badge:hover { border-color: var(--color-primary); color: var(--color-primary-dark); } .header-badge-admin { color: var(--color-primary-dark); } /* Currency-flavored accents (2026-07-22, player feedback: the badges were all the same flat grey pill regardless of what they represented) — low- alpha tinted background + a matching border, text color left alone (still var(--color-text-muted) from the base rule) so contrast stays safe across all 5 themes rather than hardcoding a text color that might only work against a light surface. */ .header-badge-silver { background: rgba(148, 163, 184, 0.14); border-color: rgba(148, 163, 184, 0.55); } .header-badge-gold { background: rgba(234, 179, 8, 0.14); border-color: rgba(234, 179, 8, 0.55); } .header-badge-mail { background: var(--color-primary-tint); border-color: var(--color-primary); } .header-badge-daynight { background: rgba(129, 140, 248, 0.12); border-color: rgba(129, 140, 248, 0.45); } #header-clock { font-variant-numeric: tabular-nums; } /* Reserves the real time's width up front (2026-07-27 perf pass) — the server-rendered placeholder is "--:--:--" (assets/js/app.js replaces it on load), and a hyphen is narrower than a tabular digit in this font even though tabular-nums above already keeps digits equal-width to each other. Without this, swapping the placeholder for a real time widens the pill by ~15-20px, which (in the Modern header's auto-sized badge grid, see .header-modern-badge-grid below) slides every badge after it sideways one frame after paint. */ #header-clock-text { display: inline-block; min-width: 8ch; text-align: center; } .header-tab-panel[hidden] { display: none; } /* Both tabs share one floor height (tall enough for 7 Headlines rows, the most either tab needs) so switching tabs never changes the header's height. Both are flex columns with justify-content:center, so a shorter block of content (e.g. fewer than 7 real headlines) sits vertically in the middle of the box instead of stuck at the top — this centers the BLOCK as a whole, not each row's own text (see .global-activity-item below, which stays left-aligned so every row starts at the same position). */ .header-tab-panel { min-height: 225px; display: flex; flex-direction: column; justify-content: center; } .header-tab-panel[data-header-panel="headlines"] .global-activity-list, .header-tab-panel[data-header-panel="headlines"] .global-activity-empty { flex: 1; /* No scrollbar — 7 rows are sized to fit within the shared min-height above; the list just grows to fit them instead of clipping/scrolling. */ overflow-y: visible; } /* Headlines rows read a little cramped at the base .global-activity-item size (shared with activity_log.php's full page and pvp.php's History card, which stay untouched) — scoped up slightly just for this panel. Deliberately NOT centered — every row's icon/text starts at the same left position regardless of how long its text is. */ .header-tab-panel[data-header-panel="headlines"] .global-activity-item { font-size: 0.82rem; padding: 4px 0; } .header-tab-panel[data-header-panel="headlines"] .global-activity-time { font-size: 0.75rem; } /* Bars (left) and the Silver/Gold/Messages/Status table (right) split the row 50/50 and center as a group, rather than stacking. */ .header-stats-row { display: flex; align-items: center; justify-content: center; gap: 16px; } .header-stat-bars { flex: 0 0 50%; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; } .header-stat-bar-label { display: flex; justify-content: space-between; font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted); } .header-stat-bar-label span:first-child { display: inline-flex; align-items: center; gap: 5px; } .header-stat-bar-label .ui-icon { height: 1em; width: 1em; } .header-stat-bar-track { height: 8px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; } .header-stat-bar-fill { height: 100%; border-radius: 999px; background: var(--color-accent); transition: width 0.4s ease; } .header-stat-bar-fill--hp { background: var(--color-success); } .header-stat-bar-fill--dex { background: var(--color-primary); } /* 2x2 grid of clickable stat chips, replacing what used to be a plain — same 4 destinations (Silver/Gold/Messages/Status), but each reads as a small tile with its own icon rather than a spreadsheet row. */ .header-stat-chips { flex: 0 0 50%; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .header-stat-chip { display: flex; align-items: center; gap: 8px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 10px; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; } .header-stat-chip:hover { border-color: var(--color-primary); transform: translateY(-1px); } .header-stat-chip-icon { flex: 0 0 auto; width: 20px; height: 20px; object-fit: contain; display: inline-flex; align-items: center; justify-content: center; } .header-stat-chip-icon .ui-icon { height: 20px; width: 20px; } .header-stat-chip-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; } .header-stat-chip-value { font-size: 0.9rem; font-weight: 700; color: var(--color-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-stat-chip-label { font-size: 0.7rem; color: var(--color-text-muted); } .header-more-headlines { align-self: flex-end; font-size: 0.8rem; font-weight: 700; color: var(--color-primary-dark); text-decoration: none; margin-top: 4px; } /* Inside .header-modern-ticker's flex ROW (unlike the Classic layout's Headlines panel above, a flex COLUMN, where this already sits alone on its own line) this is a shrinkable flex child by default — at mobile widths it was being squeezed narrow enough that "More →" wrapped onto two lines. */ .header-modern-ticker .header-more-headlines { flex-shrink: 0; white-space: nowrap; align-self: center; } .header-more-headlines:hover { text-decoration: underline; } .header-box-links { flex: 0 0 300px; min-width: 0; padding-top: 10px; padding-bottom: 10px; display: flex; flex-direction: column; } .header-box-links h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-heading); } .header-box-links h3 .ui-icon { height: 1em; width: 1em; } /* Icon-first "app launcher" tiles rather than a 2-column list of bordered text buttons — the same destinations, but the icon carries the row now (label shrinks underneath) so the box reads as inviting shortcuts rather than a cramped spreadsheet of links. 5 columns keeps the box roughly the same height as the Stats column next to it. */ .quick-links-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; flex: 1; } .quick-link-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 2px; text-decoration: none; color: var(--color-text); text-align: center; transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .quick-link-icon { display: inline-flex; } .quick-link-icon .ui-icon, .quick-link-icon .nav-icon-img, .quick-link-icon .nav-avatar-icon { width: 22px; height: 22px; } .quick-link-label { font-size: 0.66rem; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .quick-link-tile:hover { transform: translateY(-2px); border-color: var(--color-primary); color: var(--color-primary-dark); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); } /* ---------------------------------------------------------------------- */ /* Modern header (admin-selectable alternative — Admin > Game Settings > */ /* Layout > "Use Modern Header Layout", see includes/layout_header.php's */ /* $useModernHeader). One compact row: brand, an always-visible Live */ /* ticker (instead of the Classic layout's Stats/Headlines tab switch), */ /* then a mini Active Party grid paired with the currency/clock/admin */ /* badges. Shares .app-header/.header-badge/.currency-icon/.ui-icon/ */ /* .global-activity-time with the Classic rules above rather than */ /* redefining them. */ /* ---------------------------------------------------------------------- */ .app-header--modern { display: flex; flex-direction: column; gap: 10px; width: 100%; /* No left padding (2026-07-22) — .app-header-group and .app-content-row start at the exact same x (both direct children of .app-shell), but .app-sidebar-left/.app-main sit flush against .app-content-row's own edge with no extra inset before them. Padding here would offset .header-modern-row's grid columns (below) from that shared start point, undoing the alignment the grid is for. .header-modern-brand gets its own left padding instead, for breathing room that doesn't move the actual column boundary. */ padding: 18px 24px 18px 0; } /* Real 2-column grid (2026-07-22, player request), matching .app-content-row's own sidebar/main split exactly rather than approximating it with padding on a single flex row. Column 1 is var(--sidebar-width) — the SAME variable .app-sidebar-left itself uses, so the logo column's right edge is always exactly the sidebar's right edge, not just visually close. Column 2 (.header-modern-content) picks up everything the logo column doesn't need, and its own left edge lands exactly on .app-main's left edge for the same reason. A padding-based approach was tried first and rejected: it moved the ROW's start point, but the logo's own rendered width still ate into where the ticker visually began, so the ticker itself never actually lined up with .app-main — only the row's outer edge did. */ .header-modern-row { display: grid; grid-template-columns: var(--sidebar-width) 1fr; align-items: center; gap: 20px; } .header-modern-brand { display: flex; align-items: center; padding-left: 24px; } .header-modern-content { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; min-width: 0; } /* Real logo size (2026-07-16, was 42px — read as an icon, not a logo), roughly matching the Classic layout's own 88px .app-header-logo img so the two layouts carry the same brand presence. */ .header-modern-brand img { height: 76px; width: auto; max-width: 220px; object-fit: contain; } /* Mini Active Party (left) and the currency/time badges (right) as a single matched pair of small "tables" — both grids are 3 columns wide so a full 6-Pokemon party (2 rows of 3) and the 5-6 badges (also 2 rows of 3) line up at the same height, divided by one rule instead of reading as two unrelated clusters. */ .header-modern-side { display: flex; align-items: center; gap: 18px; } .header-modern-side > * + * { border-left: 1px solid var(--color-border); padding-left: 18px; } .header-modern-badge-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; } /* Scoped bump over the base .header-badge (shared with the Classic layout, left untouched there) — matches the bigger logo/party sizing here without resizing Classic's own currency/clock/admin badges. */ .header-modern-badge-grid .header-badge { justify-content: center; font-size: 0.88rem; padding: 5px 11px; } .header-modern-badge-grid .currency-icon { width: 18px; height: 18px; } /* Mini Active Party grid — replaces what used to be a Quick Actions button row in this spot (removed 2026-07-16: every destination it linked to is already reachable from the sidebars/mobile bottom bar, so it wasn't worth the space next to something more useful). Each slot is a real sprite + level + a slim HP bar, using the same lightweight per-Pokemon query as the Classic layout's aggregate Team HP bar (see header_party_snapshot() in includes/header_stats.php) rather than the heavier full-Pokemon pipeline index.php's own Active Party card uses. */ .header-modern-party { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; } .header-modern-party-slot { display: flex; align-items: center; gap: 6px; background: var(--color-bg); border: 1px solid var(--color-border); /* Primary-type accent (includes/layout_header.php sets --type-accent inline via pokemon_type_color()) — same idea as .party-mini-card's top accent, a left bar here instead since these slots are wide and short rather than tall, 2026-07-22 player feedback that the header's own party slots read as an afterthought next to everything else. */ border-left: 3px solid var(--type-accent, var(--color-border)); border-radius: var(--radius-sm); padding: 5px 12px 5px 8px; text-decoration: none; color: var(--color-text); transition: border-color 0.15s ease, transform 0.15s ease; } .header-modern-party-slot:hover { border-color: var(--color-primary); transform: translateY(-1px); } .header-modern-party-sprite { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; flex: 0 0 auto; } .header-modern-party-info { display: flex; flex-direction: column; gap: 4px; min-width: 46px; } .header-modern-party-level { font-size: 0.7rem; font-weight: 700; color: var(--color-text-muted); line-height: 1; } .header-modern-party-hp-track { width: 100%; height: 5px; background: var(--color-surface); border-radius: 999px; overflow: hidden; } .header-modern-party-hp-fill { height: 100%; background: var(--color-success); } .header-modern-party-hp-fill--warning { background: var(--color-warning); } .header-modern-party-hp-fill--danger { background: var(--color-danger); } /* Sits between the logo and the party/badges panel in .header-modern-row now (moved 2026-07-16, previously a full-width block below the row) — flex:1 1 auto + min-width:0 lets it both claim the row's remaining space and actually shrink, so its own overflow-y scroll (not the row) is what handles a long Headlines list. */ .header-modern-ticker { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 auto; min-width: 0; background: var(--color-bg); border: 1px solid var(--color-border); /* A thin accent instead of the same flat grey border every other box here uses — was previously the single largest, plainest element in the header (2026-07-22 feedback); this and the shrunk max-height below give it a bit less visual dominance without hiding anything. */ border-left: 3px solid var(--color-activity-accent); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 0.85rem; } .header-modern-ticker-label { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding-top: 2px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.03em; } /* Row by row (one Headline per line), same as the Classic layout's Headlines tab — NOT the left-to-right scrolling ticker this briefly became. Height-capped and vertically scrollable so a long list doesn't balloon the header; the default thin scrollbar (see this file's ::-webkit-scrollbar rules near the top) is left visible rather than hidden, since a vertical scrollbar is a familiar, expected affordance here (unlike a horizontal one). Capped taller than before (92px, up from 76px) to match the row's now-bigger overall height. */ .header-modern-ticker-track { flex: 1 1 auto; min-width: 0; max-height: 78px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; } .header-modern-ticker-item { flex: 0 0 auto; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text-muted); } .header-modern-ticker-item .global-activity-time { color: var(--color-activity-accent); font-variant-numeric: tabular-nums; margin-right: 2px; } @media (max-width: 768px) { /* No sidebar exists on mobile (.app-content-row itself stacks to a single column here), so the desktop 2-column grid has nothing left to align with — collapse back to a single stacked column. */ /* The desktop padding is deliberately asymmetric (`18px 24px 18px 0`): there, the logo grid column supplies the left inset. On mobile that column is gone, so the ticker/party/badges started flush against the left edge with a 24px gap only on the right — the header read as shoved to the left (player-reported 2026-09-20). Symmetric padding here instead. */ .app-header--modern { padding: 14px; } .header-modern-row { display: flex; flex-direction: column; align-items: stretch; } /* The collapse strip above the header (.app-header-mobile-toggle) already shows the logo on mobile, so this in-header copy made the same logo appear twice, one above the other (player-reported 2026-09-20 — easy to miss before the 2026-09-19 design pass gave dark themes a light plate behind it). The toggle's copy is the one that stays: it's the tap target that collapses/expands the header. Classic header's own logo box (.header-box-logo) is hidden for the same reason. */ .header-modern-brand, .header-box-logo { display: none; } .header-modern-brand img { height: 56px; } .header-modern-content { flex-direction: column; align-items: stretch; } .header-modern-ticker { width: 100%; } /* The party/badges divider reads as a rule between two side-by-side columns at desktop widths; stacked on mobile, a left border no longer makes sense — swap it for a top border between the two rows instead. */ .header-modern-side { flex-direction: column; align-items: stretch; } .header-modern-side > * + * { border-left: none; border-top: 1px solid var(--color-border); padding-left: 0; padding-top: 10px; } /* Wrapping flex rows rather than a 3-column grid (2026-09-20): a grid left-aligns whatever is left over on its last row, so a 5-Pokemon party (or 5 badges) read as "stuck to the left" of the header on a phone (player-reported). Flex keeps the same 3-up sizing but centers the leftover row. The explicit flex-basis + min-width:0 below carry over the old minmax(0, 1fr) "grid blowout" fix (same problem .pc-box-grid's own comment documents elsewhere in this file): a track that won't shrink below its content's min-content width made the 3rd column of fixed-size party-slot/badge content overflow its card at ~320-360px and get silently clipped by .card's overflow:hidden. */ .header-modern-party, .header-modern-badge-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .header-modern-party > *, .header-modern-badge-grid > * { flex: 0 1 calc((100% - 16px) / 3); min-width: 0; } /* The slot itself must also be allowed to shrink (a flex child's default min-width:auto would otherwise re-introduce the same overflow one level down) and its fixed-size children shrunk to actually fit a minmax(0,1fr) column at these widths. */ .header-modern-party-slot { min-width: 0; padding: 5px 6px; gap: 4px; } .header-modern-party-sprite { width: 30px; height: 30px; } .header-modern-party-info { min-width: 0; flex: 1 1 auto; } .header-modern-badge-grid .header-badge { padding: 5px 6px; font-size: 0.78rem; } } /* Mobile-only bar that replaces the full header (the 3 header-box columns) with a single collapsible strip — desktop never shows this at all (see .app-header above, which stays visible unconditionally on desktop widths). Hidden by default here; .app-header itself is what actually gets hidden/shown on mobile, driven by the .header-collapsed class assets/js/app.js toggles on .app-header-group when this button is clicked. */ .app-header-mobile-toggle { display: none; width: 100%; align-items: center; justify-content: space-between; gap: 8px; background: none; border: none; padding: 10px 16px; cursor: pointer; color: var(--color-heading); } .app-header-mobile-toggle-logo { height: 48px; width: auto; max-width: 220px; object-fit: contain; } .app-header-mobile-toggle-caret { font-size: 0.9rem; opacity: 0.8; transition: transform 0.2s ease; } .app-header-group.header-collapsed .app-header-mobile-toggle-caret { transform: rotate(180deg); } /* Reusable standalone version of the same icon (empty states, etc.) */ .pokeball-icon { display: inline-block; width: 1em; height: 1em; border-radius: 50%; background: radial-gradient(circle at center, #fff 0 16%, #1c1c1e 16% 22%, transparent 22%), linear-gradient(to bottom, #e3350d 0 47%, #1c1c1e 47% 53%, #fff 53% 100%); border: 2px solid #1c1c1e; vertical-align: middle; } /* Bill's PC — the red storage-system console from the games, drawn in CSS (same technique as .pokeball-icon above) rather than hotlinked, since PokeAPI's item sprite set only covers bag items and has no PC/console sprite to pull from. */ .pc-icon { display: inline-block; width: 1em; height: 1em; position: relative; vertical-align: middle; background: #1c1c1e; border-radius: 1px; } .pc-icon::before { content: ""; position: absolute; top: 0; left: 6%; right: 6%; height: 70%; background: #e3350d; border: 2px solid #1c1c1e; border-radius: 2px; box-sizing: border-box; } .pc-icon::after { content: ""; position: absolute; top: 16%; left: 20%; right: 20%; height: 34%; background: #1c1c1e; border-radius: 1px; box-shadow: inset 0 0 0 1px #6be675; } /* activity_log.php's full list (and any other standalone reuse of .global-activity-list, e.g. pvp.php's History card) — .global-activity-list defaults to display:none since the header's own Headlines tab panel (includes/layout_header.php) sets display:block inline itself rather than via a class, so this modifier is what makes it visible everywhere else. Also unlike the header's tab panel, this one isn't height-clamped — the page itself scrolls. Compound selector (not just .activity-log-page-list) deliberately, so this always wins over .global-activity-list's own display:none below regardless of which one ends up later in the file — two single-class selectors of equal specificity silently depend on source order, and .global-activity-list's base rule being the one that happened to come later here is exactly what made this list invisible on activity_log.php despite real rows existing in the markup (2026-07-14). */ .global-activity-list.activity-log-page-list { display: block; max-height: none; } .global-activity-text a { color: inherit; font-weight: 700; text-decoration: none; } .global-activity-text a:hover { text-decoration: underline; } .global-activity-empty { display: none; width: 100%; margin: 2px 0 0; font-size: 0.85rem; } .global-activity-list { display: none; width: 100%; list-style: none; margin: 4px 0 0; padding: 0 5px 0 0; flex: 1 1 auto; min-width: 0; overflow-y: auto; } .global-activity-item { display: flex; align-items: center; gap: 4px; padding: 2px 0; font-size: 0.6875rem; line-height: 1.2; white-space: nowrap; overflow: hidden; } .global-activity-time { flex: 0 0 auto; color: var(--color-activity-accent); font-variant-numeric: tabular-nums; font-size: 0.625rem; } .global-activity-glyph { flex: 0 0 auto; } .global-activity-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .currency-icon { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; image-rendering: pixelated; } /* Generic inline replacement for what used to be a raw Unicode emoji (see includes/sanitize.php's ui_icon()) — em-sized so it scales with whatever font-size it's dropped into (button, heading, badge, ...) rather than a fixed pixel size like .currency-icon above, which only ever appears in one spot at one size. */ .ui-icon { height: 1.1em; width: 1.1em; object-fit: contain; vertical-align: -0.2em; image-rendering: pixelated; } /* Cosmetics Shop's equipped Username Flair (2026-07-27) — a real Pokemon item icon (see includes/cosmetics.php's username_flair_icon_url()) shown next to a username on profile.php and the players.php rank list. Bumped up from .ui-icon's own 1.1em default — this is meant to read as a deliberate cosmetic flourish, not a small UI glyph like the rest of that class's uses. */ .username-flair-icon { height: 1.3em; width: 1.3em; vertical-align: -0.25em; margin-right: 2px; } /* Same "one bordered container" card treatment as .app-header-group/the two sidebars, rather than a plain unstyled content area — order:0 keeps it visually between the two sidebars in .app-content-row regardless of where it falls in the DOM (see .app-sidebar-left's own comment). */ .app-main { order: 0; flex: 1; min-width: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); padding: 20px; } .app-main h2 { margin-top: 0; color: var(--color-heading); } /* ---------------------------------------------------------------------- */ /* Bottom nav (mobile only, flat/ungrouped) vs. the two categorized */ /* sidebars (desktop only, see .app-sidebar-left/.app-sidebar-right */ /* below) — three separate elements now, all built from the same */ /* $navOrder/$allNavItems in includes/layout_footer.php. */ /* ---------------------------------------------------------------------- */ .app-footer { position: fixed; top: auto; bottom: 0; left: 0; width: 100%; height: var(--footer-height); display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08); z-index: 100; } .app-footer .nav-item, .app-sidebar-left .nav-item, .app-sidebar-right .nav-item, .mobile-nav-more-grid .nav-item { flex: 0 0 auto; width: auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 10px 14px; border-radius: var(--radius); font-size: 0.92rem; font-weight: 400; color: var(--color-text-muted); text-decoration: none; background: none; border: none; min-height: 44px; cursor: pointer; font-family: inherit; } .app-footer .nav-item:hover, .app-sidebar-left .nav-item:hover, .app-sidebar-right .nav-item:hover { background: var(--color-primary-tint); color: var(--color-primary); } .app-footer .nav-item.active, .app-sidebar-left .nav-item.active, .app-sidebar-right .nav-item.active { background: var(--color-primary-tint); color: var(--color-primary); font-weight: 700; } /* Desktop sidebars only (not the mobile footer bar, which keeps its own centered icon-over-label pill look): rows read as a divided list rather than a stack of rounded pills, with a small hover/active slide-right — same visual language as .sidebar-group-title's banner below. Same selector specificity as the shared .app-footer/.app-sidebar-* rule above (two classes each), so source order alone decides the winner — this must stay after it to actually override border-radius/transition per side. */ .app-sidebar-left .nav-item, .app-sidebar-right .nav-item { border-radius: 0; border-left: 3px solid transparent; border-bottom: 1px solid var(--color-border); color: var(--color-text); transition: background-color 0.2s ease, color 0.2s ease, border-left-color 0.2s ease; } .app-sidebar-left .sidebar-group:last-child .nav-item:last-child, .app-sidebar-right .sidebar-group:last-child .nav-item:last-child { border-bottom: none; } .app-sidebar-left .nav-item:hover, .app-sidebar-left .nav-item.active, .app-sidebar-right .nav-item:hover, .app-sidebar-right .nav-item.active { /* --region-accent — set inline per .sidebar-group wrapper (see sidebar_group_style() in includes/layout_footer.php): Explore gets a dynamic per-region color (region_accent_colors()), every other group gets its own fixed color (nav_group_accent_colors()), both in includes/sanitize.php. A group with neither falls back to the normal theme accent. */ border-left-color: var(--region-accent, var(--color-primary)); } /* Visual hierarchy for the ~30-item combined sidebar list (2026-07-22, player feedback: it reads as a flat wall of same-weight text) — a player's own pinned 5 (same set the mobile bar already prioritizes, see nav_class()'s $primaryKeys param in layout_footer.php) get full-contrast bold text; everything else steps down to a quieter muted weight so the handful of things actually used every session stand out without hiding or removing any of the rest. */ .app-sidebar-left .nav-item:not(.nav-item-primary), .app-sidebar-right .nav-item:not(.nav-item-primary) { color: var(--color-text-muted); font-weight: 500; } .app-sidebar-left .nav-item.nav-item-primary, .app-sidebar-right .nav-item.nav-item-primary { color: var(--color-heading); font-weight: 700; } .app-footer .nav-item .icon, .app-sidebar-left .nav-item .icon, .app-sidebar-right .nav-item .icon { font-size: 1.2rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; height: 1.25em; flex: 0 0 auto; } /* Both sidebars (desktop only) — categorized destinations grouped under a heading per includes/nav_items.php's NAV_LEFT_SIDEBAR_GROUPS/ NAV_RIGHT_SIDEBAR_GROUPS. Hidden by default; mobile keeps every item in the single flat .app-footer bottom bar instead (hidden from desktop below so the two don't both show at once). */ .app-sidebar-left, .app-sidebar-right { display: none; } /* Desktop-only site footer (includes/layout_footer.php) — hidden by default since mobile's bottom nav bar (.app-footer) already owns that screen real estate, same convention as the sidebars above. The "Install App!" column (.site-footer-col-new below) now lives INSIDE this footer's normal column grid rather than as its own always-visible row (2026-07-21: moved next to the Info column, under a "New" heading, at the player's request) — that also means it's desktop-only-visible again, same as Game/Community/Info. A logged-in mobile player still installs via Chrome's own address-bar/menu install affordance; a logged-out visitor on any device still sees the button via .public-footer below, which (unlike this footer) has no bottom nav bar to fall back to and so was never hidden on mobile in the first place. */ .site-footer { display: none; } @media (min-width: 769px) { .app-footer { display: none; } /* Safety net only — the trigger button lives inside .app-footer above (already hidden here), so this sheet has no way to open on desktop in normal use. Guards just the edge case of it being left open on a resize down from mobile. */ .mobile-nav-more-overlay { display: none; } .site-footer { display: block; } /* Normal flex children of .app-content-row now (not position:fixed) — matches the reference mockup exactly: a real 3-column flex row, so the sidebar's own height/scroll is whatever the row's tallest column naturally is, rather than independently pinned/scrolled against the viewport. .app-sidebar-left renders after .app-main in the DOM (see includes/layout_footer.php) since the page's own content has to sit inside
, between layout_header.php and layout_footer.php) — the order values below put it back on the visual left regardless. */ .app-sidebar-left, .app-sidebar-right { display: flex; flex-direction: column; gap: 0; width: var(--sidebar-width); flex-shrink: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); padding: 20px 12px; overflow: hidden; } .app-sidebar-left { order: -1; } .app-sidebar-right { order: 1; } /* Per the .sidebar-group-icon comment below: on desktop the one group heading icon is enough context for the whole section, so individual row icons are redundant clutter — hide them here (desktop only; the mobile .app-footer bar is untouched and keeps every item's icon). */ .app-sidebar-left .nav-item .icon, .app-sidebar-right .nav-item .icon { display: none; } } /* Desktop-only site footer (includes/layout_footer.php) — same "bordered surface card" language as .app-header-group/.app-sidebar-left above (border + radius + shadow), sitting as its own row below .app-content-row in .app-shell.has-sidebar's flex column (picks up that parent's 20px gap automatically, no margin needed here). Informational links only (About/Rules/Privacy, Forum/Dev Reports, Changelog/Rankings/ Activity Log) — none of this duplicates the reorderable player nav in the sidebars/mobile bar above, so it stays out of nav_items.php entirely. */ .site-footer { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); padding: 20px 24px; color: var(--color-heading); } .site-footer-columns { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; } .site-footer-col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 160px; text-align: center; } .site-footer-col-title { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-heading); margin-bottom: 4px; } .site-footer-col a { font-size: 0.85rem; color: var(--color-text-muted); } .site-footer-col a:hover { color: var(--color-link-hover); } .site-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: 0.78rem; color: var(--color-text-muted); text-align: center; } /* "Install App!" PWA button — a normal .site-footer-col like Game/ Community/Info, sitting right next to the Info column (see includes/layout_footer.php / includes/public_layout_footer.php), just with a button in place of that column's usual list of links. Shown via assets/js/pwa-install.js only once the browser actually fires beforeinstallprompt (Firefox/Safari, an already-installed Chrome, and a page already running in standalone/installed display mode never do, so this stays hidden there rather than offering a button that does nothing or nothing-to-do). */ .pwa-install-btn { display: none; width: auto; gap: 8px; } .pwa-install-btn img { width: 20px; height: 20px; } /* index.php's homepage banner for the PWA-install Master Ball reward — a distinct accent border/background so it reads as a promo, not just another info card, matching the "really visible" ask it was built for. */ .pwa-reward-banner { border: 1px solid var(--color-accent); background: rgba(59, 108, 224, 0.08); } /* index.php's "Follow Us" section — same auto-fit card-grid convention as .info-grid/.admin-hub-grid, just narrower cells since each card is only an icon badge + one word. */ .social-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .social-link-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; color: inherit; transition: border-color 0.15s ease; } .social-link-card:hover { border-color: var(--color-accent); } .social-link-mono { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; color: #fff; font-weight: 700; font-size: 0.85rem; } .social-link-mono-discord { background: #5865f2; } .social-link-mono-instagram { background: radial-gradient(circle at 30% 110%, #fdf497, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .social-link-mono-facebook { background: #1877f2; } .social-link-mono-tiktok { background: #010101; } .sidebar-group { display: flex; flex-direction: column; gap: 0; margin-bottom: 12px; } /* Bleeds flush to the sidebar's own edges (the sidebar's 12px side padding is cancelled with a matching negative margin) so each group reads as a shaded banner spanning the full sidebar width, like a menu section header, rather than an indented label floating over the plain sidebar background. */ .sidebar-group-title { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-heading); /* --region-tint — set inline per .sidebar-group wrapper, same source as --region-accent above (see includes/layout_footer.php's sidebar_group_style()). */ background: var(--region-tint, var(--color-surface-banner)); border-bottom: 1px solid var(--color-border); margin: 0 -12px 4px; padding: 8px 14px; } /* The one icon per desktop sidebar group heading (includes/nav_items.php's nav_group_icon_img()) — individual nav-item rows below it are text-only on desktop now; the mobile bottom bar (.app-footer) is untouched and still shows .nav-icon-img per item. */ .sidebar-group-icon { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; flex: 0 0 auto; } /* Theme switcher (settings.php) — sets data-theme on and persists it via localStorage (see assets/js/app.js); .theme-btn.active marks whichever theme is currently applied, kept in sync on click and on page load. */ .theme-switcher { display: flex; flex-wrap: wrap; gap: 8px; } .theme-switcher .theme-btn { flex: 1 1 100px; } .theme-btn { background: var(--color-panel); border: 1px solid var(--color-border); color: var(--color-text-muted); padding: 8px 6px; cursor: pointer; font-size: 0.7rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.03em; border-radius: 6px; transition: transform 0.1s ease, background-color 0.2s ease, color 0.2s ease; } .theme-btn:hover { color: var(--color-text); } .theme-btn.active { background: var(--color-primary-tint); border-color: var(--color-primary); color: var(--color-primary); } .nav-icon-img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; } .nav-avatar-icon { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; } /* ---------------------------------------------------------------------- */ /* Cards / layout helpers */ /* ---------------------------------------------------------------------- */ .card { position: relative; overflow: hidden; background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 16px; } .stack { display: flex; flex-direction: column; gap: 12px; } /* Lets a hover tooltip (.poke-tooltip) escape the card's own overflow:hidden clipping (needed to round off the top accent bar) — used on any card containing .poke-hoverable rows. */ .overflow-visible { overflow: visible; } .text-muted { color: var(--color-text-muted); } /* ---------------------------------------------------------------------- */ /* Buttons */ /* ---------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: var(--radius); border: none; font-size: 1rem; font-weight: 600; cursor: pointer; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); transition: transform 0.05s ease, opacity 0.15s ease; width: 100%; text-decoration: none; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); } .btn-link { background: none; border: none; color: var(--color-accent); width: auto; min-height: auto; padding: 4px; font-weight: 600; } .form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .form-field label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); } .form-field input { min-height: 44px; padding: 0 14px; font-size: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); } .form-field input:focus { outline: none; border-color: var(--color-accent); } .form-error { background: var(--color-danger-tint); color: var(--color-danger); border-radius: var(--radius); padding: 10px 14px; font-size: 0.9rem; margin-bottom: 16px; display: none; } .form-error.visible { display: block; } /* Shared toast notifications (assets/js/app.js's window.showToast()) — bottom-right on desktop, top of the screen on mobile so it doesn't sit under a thumb or the bottom nav bar. */ .toast-container { position: fixed; z-index: 1000; bottom: 20px; right: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; } .toast { pointer-events: auto; cursor: pointer; max-width: 320px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-left: 4px solid var(--color-success); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); padding: 12px 16px; font-size: 0.88rem; font-weight: 600; line-height: 1.35; opacity: 0; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease; } .toast.visible { opacity: 1; transform: translateY(0); } .toast.toast-error { border-left-color: var(--color-danger); } @media (max-width: 768px) { .toast-container { top: 12px; bottom: auto; right: 12px; left: 12px; align-items: stretch; } .toast { max-width: none; transform: translateY(-12px); } .toast.visible { transform: translateY(0); } } /* Centered blocking alert (assets/js/app.js's window.showCenterAlerts()) — used for things worth actually stopping the player for, like an evolution notice, rather than a corner toast that's easy to miss. */ .center-alert-overlay { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.2s ease; padding: 20px; } .center-alert-overlay.visible { opacity: 1; } .center-alert-box { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); padding: 24px; max-width: 340px; width: 100%; text-align: center; display: flex; flex-direction: column; gap: 16px; } .center-alert-box p { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.4; } /* Wider variant for the mid-battle move-learn popup (battle.php's #pending-move-picker) — needs room for a 4-move stat comparison table, unlike .center-alert-box's plain one-line message + OK button shape. */ .pending-move-box { max-width: 480px; text-align: left; } .pending-move-compare { display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; } .pending-move-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; background: var(--color-bg); border: 1px solid var(--color-border); } .pending-move-row.pending-move-new { border-color: #e6a817; background: rgba(230, 168, 23, 0.1); } .pending-move-row .move-name { font-weight: 700; flex: 1 1 auto; min-width: 0; } .pending-move-row .move-stat-line { display: flex; gap: 10px; color: var(--color-text-muted); flex: 0 0 auto; font-size: 0.78rem; } /* ========================================================================== Evolution/hatch popup (assets/js/app.js's window.showEvolutionPopup() — builds its own DOM via document.createElement, no page markup needed, so these classes are all it needs to style) — a full-screen blocking scene shown whenever an action reports an evolution or an egg hatching, whether from a battle win, a mid-battle KO against a trainer with more roster left, a Rare Candy, an Evolution Stone, or the playtime heartbeat ticking an egg's hatch progress to completion from any page. Same fixed-overlay convention as .center-alert-overlay above, but built as its own dedicated overlay rather than reused through that helper: this needs a real animated scene (accelerating sprite flash, scale pulse, screen-shake, white-flash reveal), not a one-line message + OK button. z-index sits above .center-alert-overlay (1100) and .stats-popover (1150, battle.css) since this is the single most "stop everything" moment any of those callers can show. ========================================================================== */ .evolution-popup-overlay { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.2s ease; padding: 20px; } .evolution-popup-overlay.visible { opacity: 1; } .evolution-scene { position: relative; width: 100%; max-width: 360px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 18px; } @keyframes evolution-screen-shake { 0% { transform: translate(0, 0); } 20% { transform: translate(-4px, 4px); } 40% { transform: translate(4px, -4px); } 60% { transform: translate(-4px, -4px); } 80% { transform: translate(4px, 4px); } 100% { transform: translate(0, 0); } } .evolution-scene.shake { animation: evolution-screen-shake 0.4s ease-in-out infinite; } .evolution-status-text { margin: 0; font-size: 1.05rem; font-weight: 700; text-align: center; line-height: 1.4; min-height: 28px; } .evolution-display-window { position: relative; width: 100%; height: 200px; background: radial-gradient(circle, var(--color-primary-tint) 0%, var(--color-bg) 72%); border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; } .evolution-sprite-wrapper { position: relative; width: 140px; height: 140px; transition: transform 0.15s ease-in-out; } .evolution-sprite { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.05s linear; } .evolution-sprite.active { opacity: 1; } /* Pure white flashing silhouette — the classic games' own evolution effect — applied regardless of theme (unlike everything else on this card, deliberately NOT theme-tokenized: the point is stark white against whatever backdrop). */ .evolution-scene.evolving .evolution-sprite { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.85)); } .evolution-scene.pulse-up .evolution-sprite-wrapper { transform: scale(1.25); } .evolution-scene.pulse-down .evolution-sprite-wrapper { transform: scale(0.75); } .evolution-flash-overlay { position: absolute; inset: 0; background-color: #ffffff; opacity: 0; pointer-events: none; z-index: 3; } .evolution-flash-overlay.trigger { opacity: 1; transition: opacity 0.05s ease-out; } .evolution-flash-overlay.fade-out { opacity: 0; transition: opacity 0.8s ease-in; } .evolution-action-btn { min-width: 140px; } @media (max-width: 480px) { .evolution-scene { padding: 18px; gap: 14px; } .evolution-display-window { height: 160px; } .evolution-sprite-wrapper { width: 110px; height: 110px; } .evolution-status-text { font-size: 0.92rem; } } /* ---------------------------------------------------------------------- */ /* Starter picker */ /* ---------------------------------------------------------------------- */ .starter-card { display: flex; gap: 12px; align-items: center; } .starter-sprite { width: 72px; height: 72px; object-fit: contain; flex: 0 0 auto; background: var(--color-bg); border-radius: var(--radius); } .starter-info { flex: 1 1 auto; min-width: 0; } /* ---------------------------------------------------------------------- */ /* Bag / party */ /* ---------------------------------------------------------------------- */ .bag-pokemon-row, .bag-item-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border); } .bag-pokemon-row:last-child, .bag-item-row:last-child { border-bottom: none; } .bag-pokemon-sprite { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; } .bag-pokemon-row .btn { flex: 0 0 auto; width: auto; min-height: 36px; padding: 0 16px; font-size: 0.85rem; } .bag-pokemon-info, .bag-item-info { flex: 1 1 auto; min-width: 0; } .bag-item-actions { display: flex; gap: 6px; align-items: center; } /* Party reordering (pc.php + assets/js/pc.js) — press-and-drag the handle, works with both mouse and touch via the Pointer Events API. */ /* CSS-drawn grip (3 bars via box-shadow) instead of a Unicode "hamburger" glyph — same "abstract UI chrome gets a CSS shape, not emoji/item art" rule .pokeball-icon/.pc-icon already follow for nav chrome. */ .party-drag-handle { flex: 0 0 auto; cursor: grab; width: 16px; height: 12px; padding: 4px 6px; touch-action: none; user-select: none; display: flex; align-items: center; justify-content: center; } .party-drag-handle::before { content: ""; display: block; width: 14px; height: 2px; background: var(--color-text-muted); box-shadow: 0 -4px 0 var(--color-text-muted), 0 4px 0 var(--color-text-muted); } .party-row-dragging { opacity: 0.4; } .party-row-drop-target { outline: 2px dashed var(--color-primary, #4a90d9); outline-offset: -2px; border-radius: 8px; } .bag-item-actions select { min-height: 36px; border-radius: var(--radius); border: 1px solid var(--color-border); padding: 0 8px; } .item-icon { width: 32px; height: 32px; object-fit: contain; flex: 0 0 auto; image-rendering: pixelated; } /* ---------------------------------------------------------------------- */ /* PC Box storage grid (pc.php) — an actual 5x5-per-page grid rather than */ /* the .bag-pokemon-row list Party still uses; blank cells pad out a */ /* partial last page so the "storage box" shape stays 5x5 regardless. */ /* assets/js/pc.js rebuilds #pc-box-grid's contents wholesale on every */ /* search/filter/page change, so nothing here depends on static markup. */ /* ---------------------------------------------------------------------- */ .pc-box-filters { display: flex; gap: 8px; flex-wrap: wrap; } .pc-box-filter-input { flex: 1 1 120px; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.85rem; background: var(--color-surface); color: var(--color-text); } .pc-box-filter-checkbox { display: flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 4px; font-size: 0.85rem; white-space: nowrap; cursor: pointer; } .pc-box-grid { display: grid; /* minmax(0, 1fr) instead of a bare 1fr — a plain 1fr track still won't shrink below its content's min-content width (a CSS Grid default), so a cell with a long, unbroken label (achievements.php's names run longer than Bag/Box item names) could force the whole grid wider than the viewport on mobile despite .pc-box-name's own text-overflow ellipsis. minmax(0, ...) is a no-op wherever content already fits. */ grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .pc-box-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; background: rgba(128, 128, 128, 0.05); border: 1px dashed var(--color-border-light); border-radius: var(--radius-sm); padding: 6px 2px; min-height: 92px; } .pc-box-cell-empty { background: transparent; border-style: dashed; opacity: 0.35; } .pc-box-sprite { width: 40px; height: 40px; object-fit: contain; } .pc-box-name { font-size: 0.66rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .pc-box-level { font-size: 0.6rem; } .pc-box-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 2px; } /* Bigger than the base .btn-icon (22px) — scoped to the PC Box grid's action row only, so achievements/marketplace/bag/profile's own .btn-icon uses are unaffected. .party-mini-actions below gets the same override for the Party tab's cards. Comfortably fits .pc-box-cell's grid column at normal widths; the mobile media query further down shrinks it again so 4 icons still wrap 2x2 without crowding a narrow phone-width cell. */ .pc-box-actions .btn-icon { width: 30px; height: 30px; font-size: 0.95rem; } /* Shop grid (shop.php) reuses .pc-box-grid/.pc-box-cell/.pc-box-sprite/ .pc-box-name/.pc-box-actions directly, same component as the Bag/PC Box — only the price line and the locked-cell treatment are shop-specific. */ .shop-cell-price { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 0.64rem; font-weight: 700; } .shop-cell-price-old { font-size: 0.58rem; font-weight: 400; color: var(--color-text-muted); text-decoration: line-through; } /* A level/egg-slot/weekly-limit-locked item stays visible (so the full category is still browsable) but reads as unavailable at a glance — same dimmed treatment as .achievement-locked below, applied to the whole cell rather than just the sprite since the price/name are equally "not available right now" here. The actual reason is one tap away via the info popover (assets/js/shop.js's data-lock-reason). */ .pc-box-cell-locked { opacity: 0.55; filter: grayscale(0.5); } /* Highlights the one "you are here" tile in an overview picker grid — e.g. gym.php's League Progress grid (2026-07-22, player request: "follow the same approach as legacy_starters" — that page's picker grid doesn't need this since only one line is ever pursuable and it gets its own full chain card instead; gym.php's grid shows all 8 badges + Elite Four + Champion at once, so the currently-challengeable one needs to stand out from the completed/locked ones around it). A solid accent border + tinted background, distinct from .pc-box-cell-locked's dimmed treatment below. */ .pc-box-cell-current { border: 1px solid var(--region-accent, var(--color-primary)); background: var(--region-tint, var(--color-primary-tint)); } /* A real (non-.btn-icon) button inside a grid cell's action row — shrunk down from .btn's normal full-width/44px-tall page-button sizing to actually fit a ~110px+ cell alongside the sprite/name/status above it. */ .pc-box-actions .btn { width: auto; min-height: 30px; padding: 0 12px; font-size: 0.72rem; } /* Buy quantity popup, anchored next to whichever cell's Buy button opened it (assets/js/shop.js) instead of sitting in normal page flow at the bottom — a player reported having to scroll all the way down to the old static card after clicking Buy on a cell near the top of a long category. Same "fixed position, faded in/out, positioned via JS" shape as .item-info-popover above, just wide enough to hold a real form (quantity input + Buy/Cancel) rather than a couple lines of text — .card's own position:relative/overflow:hidden/margin-bottom are overridden here since this cascades after .card in the stylesheet. */ .shop-buy-popover { position: fixed; top: 0; left: 0; z-index: 1150; width: 240px; max-width: calc(100vw - 16px); margin: 0; overflow: visible; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transition: opacity 0.15s ease; } .shop-buy-popover.visible { opacity: 1; visibility: visible; } /* Achievements grid (achievements.php) reuses .pc-box-grid/.pc-box-cell/ .pc-box-sprite directly — each achievement's icon is a real sprite image (achievement_icon_url(), same item_icon_url()/currency_icon_url() lookup Bag/Shop/PC already use), not the raw achievements.icon emoji column. A locked achievement is dimmed/grayscaled rather than removed, so the full 25-item shape stays visible as a checklist regardless of progress. */ .achievement-locked { opacity: 0.45; filter: grayscale(1); } /* Section header for each condition_type group, inline within the same grid (not a separate list) — grid-column: 1/-1 spans the full row so it reads as a divider rather than squeezing into a single 1fr cell. A real