/* ============================================================ GALOR — pocket field journal design system GBC-era pixel UI, 4-color palette, 4 swappable themes. Single stylesheet for index / identify / submit / tickets. ============================================================ */ /* -- 1. PALETTES ---------------------------------------------- MOSS (default) · PAPER · DUSK · SIGNAL Switch via [data-palette] on . Each palette is exactly 4 LCD colors + 3 shell colors + a small set of accent colors used for type badges, status, and research sections. ------------------------------------------------------------ */ :root, html[data-palette="moss"] { --gb-bg: #0f380f; --gb-dark: #306230; --gb-mid: #8bac0f; --gb-light: #9bbc0f; --shell: #d8c8a8; --shell-dk: #7a6a4a; --shell-lt: #f0e6cf; --shell-shadow: #3a2f1c; --type-birds: #4a7ec5; --type-mammals: #b78a51; --type-insects: #d97e2f; --type-plants: #4f9b56; --type-fungi: #b85aa3; --type-reptiles-amphibians: #4d9690; --type-fish: #5b8bbf; --type-uncategorized: #8a8a8a; --status-caught: #2c8c3c; --status-seen: #1c3d72; --status-heard: #8c2d8c; --status-wishlist: #c97a1c; --warn: #b22e2e; --accent: #c97a1c; --bg-page: #181612; } html[data-palette="paper"] { --gb-bg: #3a2a18; --gb-dark: #7a5a38; --gb-mid: #d8b888; --gb-light: #f5ecd6; --shell: #c8b898; --shell-dk: #7a6a4a; --shell-lt: #e8dcc0; --shell-shadow: #3a2f1c; --type-birds: #2f5a8a; --type-mammals: #8a5a28; --type-insects: #b85a14; --type-plants: #2f7a3a; --type-fungi: #7a2f6a; --type-reptiles-amphibians: #2f6a64; --type-fish: #3a5a7a; --type-uncategorized: #5a4a3a; --status-caught: #2f7a3a; --status-seen: #2f5a8a; --status-heard: #7a2f6a; --status-wishlist: #b85a14; --warn: #8a1a1a; --accent: #b85a14; --bg-page: #2a2218; } html[data-palette="dusk"] { --gb-bg: #0a1428; --gb-dark: #1a3858; --gb-mid: #5878a8; --gb-light: #a0b8d8; --shell: #3a4458; --shell-dk: #1a2030; --shell-lt: #5a6478; --shell-shadow: #0a0e18; --type-birds: #88c0ff; --type-mammals: #d8a878; --type-insects: #f0a058; --type-plants: #78d090; --type-fungi: #d888c8; --type-reptiles-amphibians: #78d0c8; --type-fish: #88a8e0; --type-uncategorized: #a8b0c0; --status-caught: #5ed080; --status-seen: #88c0ff; --status-heard: #d888c8; --status-wishlist: #f0a058; --warn: #ff7878; --accent: #f0a058; --bg-page: #050a14; } html[data-palette="signal"] { --gb-bg: #000000; --gb-dark: #3a2400; --gb-mid: #a86800; --gb-light: #ffb030; --shell: #1a1a1a; --shell-dk: #000000; --shell-lt: #3a3a3a; --shell-shadow: #000000; --type-birds: #ffb030; --type-mammals: #ffb030; --type-insects: #ffb030; --type-plants: #ffb030; --type-fungi: #ffb030; --type-reptiles-amphibians: #ffb030; --type-fish: #ffb030; --type-uncategorized: #a86800; --status-caught: #ffb030; --status-seen: #a86800; --status-heard: #ffb030; --status-wishlist: #ffb030; --warn: #ff5030; --accent: #ffb030; --bg-page: #000000; } /* -- 2. RESET / BASE ----------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-page); color: var(--gb-bg); font-family: "VT323", ui-monospace, monospace; font-size: 18px; line-height: 1.25; -webkit-font-smoothing: none; font-smooth: never; image-rendering: pixelated; overscroll-behavior: none; } body { min-height: 100vh; min-height: 100dvh; background: radial-gradient(circle at 30% 0%, var(--shell-shadow) 0%, var(--bg-page) 80%); padding: 12px; } /* Pixel font where it counts; VT323 for body prose. */ button, .pixel, .strip h1, .region, .mode-tab, .chip, .filter, .card-num, .card-name, .type, .status, .counter, .about-btn, .entry-head .num, .entry-head .name, .entry-head .close, .entry-table dt, .research-section h4, .entry-section-title, .entry-flavor::before, .cry-panel .label, .timeline .when, .nav-btn, .boot strong, .fab, .phen-cell, .toast, .pill-btn, .submit, .open-btn, .log-btn, .refresh-btn, .nav-link, .back, .candidate-name, .candidate-num, .quality, .ticket-id, .ticket-title, .ticket-status, .ticket-pri, .ticket-kind, .tweak-btn, .tweak-panel, .tweak-panel button { font-family: "Press Start 2P", ui-monospace, monospace; letter-spacing: 0.5px; } button { font-size: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } input, textarea, select { font-family: "VT323", ui-monospace, monospace; font-size: 18px; letter-spacing: 0.5px; color: var(--gb-bg); } a { color: var(--gb-bg); } a:hover { color: var(--gb-dark); } /* -- 3. DEVICE SHELL ------------------------------------------ Outer .shell .bezel .lcd is shared across all four pages. On desktop: handheld plastic shell + dark bezel + LCD inside. On mobile: shell collapses, LCD goes edge-to-edge. ------------------------------------------------------------ */ .shell { max-width: 1180px; margin: 0 auto; background: var(--shell); border: 2px solid #000; border-radius: 14px 14px 60px 14px; box-shadow: inset 0 4px 0 var(--shell-lt), inset 0 -8px 0 var(--shell-dk), 0 12px 30px rgba(0, 0, 0, 0.7); padding: 14px 14px 18px; position: relative; } @media (min-width: 700px) { .shell { padding: 18px 22px 22px; border-radius: 18px 18px 60px 18px; } } /* Decorative LED on the shell (desktop only) */ .shell::before { content: ""; position: absolute; top: 14px; left: 18px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ff8888 0%, #c01818 60%, #4a0808 100%); box-shadow: inset 0 -1px 0 #000, 0 0 4px rgba(255, 80, 80, 0.5); display: none; } .shell::after { content: "♦ GALOR POCKET ♦"; position: absolute; top: 16px; left: 36px; font-family: "Press Start 2P", monospace; font-size: 7px; letter-spacing: 1.5px; color: var(--shell-dk); opacity: 0.7; display: none; } @media (min-width: 700px) { .shell::before, .shell::after { display: block; } } /* Bezel: dark recessed frame */ .bezel { background: #232018; border: 2px solid #000; border-radius: 6px 6px 28px 6px; padding: 4px; box-shadow: inset 0 2px 0 #4a443a, inset 0 -2px 0 #000; } /* LCD: the actual screen. On desktop the LCD is a viewport-sized window: strip + controls stay pinned, the dex grid scrolls inside main. On mobile the LCD fills the device shell and the page scrolls. */ .lcd { background: var(--gb-light); border: 1px solid #000; position: relative; overflow: hidden; border-radius: 1px; display: flex; flex-direction: column; } @media (min-width: 700px) { .shell:not(.modal-shell) > .bezel > .lcd { height: min(720px, calc(100vh - 220px)); min-height: 480px; } .shell:not(.modal-shell) > .bezel > .lcd > main { overflow-y: auto; flex: 1; min-height: 0; } } /* Scanline overlay (subtle, on by default; togglable) */ .lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 200; background-image: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.06) 2px, rgba(0, 0, 0, 0.06) 3px ); mix-blend-mode: multiply; } html[data-scanlines="off"] .lcd::after { display: none; } /* Mobile / narrow: drop the shell entirely. */ @media (max-width: 700px) { body { padding: 0; background: #181612; } .shell { border-radius: 0; padding: 0; box-shadow: none; background: #232018; min-height: 100vh; min-height: 100dvh; border: none; display: flex; flex-direction: column; } .shell::before, .shell::after { display: none !important; } .bezel { border-radius: 0; border: none; padding: 0; box-shadow: none; flex: 1; display: flex; background: var(--gb-light); } .lcd { flex: 1; border: none; border-radius: 0; width: 100%; } } /* ============================================================ 4. TOP STRIP — header chrome on every page ============================================================ */ .strip { background: var(--gb-bg); color: var(--gb-light); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; border-bottom: 2px solid #000; } @media (min-width: 700px) { .strip { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 18px; } } .strip h1 { margin: 0; font-family: "Press Start 2P", monospace; font-size: 14px; letter-spacing: 1.5px; line-height: 1; color: var(--gb-light); text-shadow: 1px 1px 0 #000; } @media (min-width: 700px) { .strip h1 { font-size: 16px; letter-spacing: 2px; } } .region { font-family: "Press Start 2P", monospace; font-size: 8px; letter-spacing: 1.5px; color: var(--gb-light); opacity: 0.85; text-transform: uppercase; } @media (min-width: 700px) { .region { font-size: 10px; } } .region .zip { background: var(--gb-mid); color: var(--gb-bg); padding: 3px 6px; margin-left: 4px; } /* ============================================================ 5. CONTROLS — search, mode tabs, chips ============================================================ */ .controls { background: var(--gb-light); padding: 10px 12px; border-bottom: 2px solid var(--gb-bg); display: flex; flex-direction: column; gap: 8px; } @media (min-width: 700px) { .controls { padding: 12px 18px; } } input[type="search"], input[type="text"], input[type="email"], textarea, select { width: 100%; background: var(--gb-light); border: 2px solid var(--gb-bg); padding: 8px 10px; font-family: "VT323", monospace; font-size: 18px; color: var(--gb-bg); -webkit-appearance: none; appearance: none; border-radius: 0; } input[type="search"]:focus, input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus { outline: none; background: var(--shell-lt); box-shadow: 0 0 0 2px var(--gb-mid); } input[type="search"]::placeholder, input[type="text"]::placeholder, input[type="email"]::placeholder, textarea::placeholder { color: var(--gb-dark); opacity: 0.6; } .mode-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .mode-tab { background: var(--gb-light); border: 2px solid var(--gb-bg); color: var(--gb-bg); font-size: 9px; letter-spacing: 1px; min-height: 40px; padding: 9px 6px; text-transform: uppercase; } .mode-tab:active { background: var(--gb-mid); } .mode-tab[aria-pressed="true"] { background: var(--gb-bg); color: var(--gb-light); box-shadow: inset 0 0 0 2px var(--gb-mid); } @media (min-width: 700px) { .mode-tab { min-height: 32px; padding: 7px 8px; font-size: 8px; } } .chips { display: flex; flex-wrap: wrap; gap: 4px; } .chip { background: var(--gb-light); border: 2px solid var(--gb-bg); color: var(--gb-bg); font-size: 8px; letter-spacing: 1px; padding: 8px 10px; text-transform: uppercase; min-height: 36px; } .chip:active { background: var(--gb-mid); } .chip[aria-pressed="true"] { background: var(--gb-bg); color: var(--gb-light); box-shadow: inset 0 0 0 2px var(--gb-mid); } @media (min-width: 700px) { .chip { min-height: 28px; padding: 6px 8px; font-size: 8px; } } /* ============================================================ 6. GRID + CARDS — main DEX list ============================================================ */ main { padding: 12px; flex: 1; } @media (min-width: 700px) { main { padding: 16px 18px; } } .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 600px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } } @media (min-width: 900px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .card { background: var(--gb-light); border: 2px solid var(--gb-bg); padding: 8px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; text-align: left; color: inherit; font: inherit; box-shadow: 2px 2px 0 0 var(--gb-bg); transition: transform 0.08s; } .card:hover, .card:focus-visible { background: var(--gb-mid); outline: none; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 var(--gb-bg); } .card:active { transform: translate(1px, 1px); box-shadow: 0 0 0 0 var(--gb-bg); } .card.wishlist { opacity: 0.5; } .card.wishlist .sprite { background: var(--gb-mid); } .card-num { font-size: 8px; color: var(--gb-dark); letter-spacing: 1px; } .sprite { aspect-ratio: 1 / 1; background: var(--gb-mid); border: 2px solid var(--gb-bg); display: grid; place-items: center; font-size: 28px; image-rendering: pixelated; overflow: hidden; position: relative; } .sprite img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; display: block; } .sprite img.pixel-art { object-fit: contain; image-rendering: pixelated; padding: 4px; } .card-name { font-size: 9px; letter-spacing: 0.5px; line-height: 1.4; text-transform: uppercase; color: var(--gb-bg); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 26px; } .card-sci { font-family: "VT323", monospace; font-size: 14px; font-style: italic; color: var(--gb-dark); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .nearby-meta { font-family: "VT323", monospace; font-size: 14px; color: var(--gb-dark); line-height: 1.1; min-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ 7. TYPE BADGE + STATUS GLYPH ============================================================ */ .type { font-size: 7px; letter-spacing: 1px; padding: 4px 6px; background: var(--type-uncategorized); color: #fff; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); border: 1px solid #000; } .type[data-c="birds"] { background: var(--type-birds); } .type[data-c="mammals"] { background: var(--type-mammals); } .type[data-c="insects"] { background: var(--type-insects); } .type[data-c="plants"] { background: var(--type-plants); } .type[data-c="fungi"] { background: var(--type-fungi); } .type[data-c="reptiles-amphibians"] { background: var(--type-reptiles-amphibians); } .type[data-c="fish"] { background: var(--type-fish); } .status { font-size: 7px; letter-spacing: 1px; padding: 4px 6px; background: var(--status-wishlist); color: #fff; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); border: 1px solid #000; } .status[data-s="caught"] { background: var(--status-caught); } .status[data-s="seen-not-photographed"] { background: var(--status-seen); } .status[data-s="heard-not-seen"] { background: var(--status-heard); } .status[data-s="wishlist"] { background: var(--status-wishlist); } /* ============================================================ 8. FOOTER COUNTERS + ABOUT ============================================================ */ .counters { background: var(--gb-bg); color: var(--gb-light); border-top: 2px solid #000; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; font-size: 8px; letter-spacing: 1.5px; } @media (min-width: 700px) { .counters { font-size: 10px; gap: 24px; padding: 12px 18px; } } .counter strong { color: var(--gb-light); } .attribution { background: var(--gb-light); border-top: 2px solid var(--gb-bg); padding: 4px 8px; text-align: right; } .about-btn { background: transparent; border: 0; color: var(--gb-dark); font-size: 7px; letter-spacing: 1.2px; padding: 6px 8px; min-height: 28px; } .about-btn:hover { color: var(--gb-bg); } /* ============================================================ 9. FAB BUTTONS — floating action quick links ============================================================ */ .fab { position: fixed; right: calc(env(safe-area-inset-right) + 16px); bottom: calc(env(safe-area-inset-bottom) + 16px); width: 52px; height: 52px; border-radius: 50%; background: var(--gb-bg); border: 2px solid var(--gb-light); color: var(--gb-light); font-size: 22px; line-height: 1; display: grid; place-items: center; text-decoration: none; box-shadow: 0 4px 0 #000, inset 0 0 0 2px var(--gb-bg); z-index: 50; -webkit-tap-highlight-color: transparent; } .fab:active { transform: translateY(2px); box-shadow: 0 2px 0 #000, inset 0 0 0 2px var(--gb-bg); } .fab-tickets { right: calc(env(safe-area-inset-right) + 144px); font-size: 12px; } .fab-identify { right: calc(env(safe-area-inset-right) + 80px); font-size: 11px; } /* ============================================================ 10. LOADING / EMPTY / BOOT ============================================================ */ .boot { padding: 40px 16px; text-align: center; font-family: "VT323", monospace; font-size: 18px; color: var(--gb-dark); } .boot strong { font-family: "Press Start 2P", monospace; font-size: 10px; color: var(--gb-bg); display: block; margin-bottom: 8px; letter-spacing: 1.5px; } .empty { text-align: center; padding: 60px 16px; color: var(--gb-dark); font-family: "VT323", monospace; font-size: 20px; } /* ============================================================ 11. ABOUT MODAL ============================================================ */ .about-bg { position: fixed; inset: 0; background: rgba(15, 56, 15, 0.6); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.18s; } .about-bg[data-open="true"] { opacity: 1; pointer-events: auto; } .about-modal { position: fixed; inset: 0; z-index: 201; overflow-y: auto; transform: translateY(100%); transition: transform 0.22s; display: flex; flex-direction: column; padding: 12px; background: var(--bg-page); } .about-modal[data-open="true"] { transform: translateY(0); } @media (min-width: 700px) { .about-modal { inset: auto; top: 5vh; left: 50%; transform: translate(-50%, 100vh); width: 92vw; max-width: 640px; max-height: 90vh; border-radius: 0; padding: 12px; } .about-modal[data-open="true"] { transform: translate(-50%, 0); } } .about-card { background: var(--gb-light); border: 2px solid var(--gb-bg); box-shadow: inset 0 0 0 2px var(--gb-light), inset 0 0 0 4px var(--gb-bg); padding: 18px 16px; font-family: "VT323", monospace; font-size: 18px; line-height: 1.4; color: var(--gb-bg); } .about-card h2 { margin: 0 0 10px; font-family: "Press Start 2P", monospace; font-size: 12px; letter-spacing: 1.5px; color: var(--gb-bg); text-transform: uppercase; } .about-card h3 { margin: 14px 0 4px; font-family: "Press Start 2P", monospace; font-size: 9px; letter-spacing: 1px; color: var(--gb-dark); text-transform: uppercase; } .about-card a { color: var(--gb-bg); text-decoration: underline; } .about-card .close { background: var(--gb-bg); color: var(--gb-light); border: 2px solid var(--gb-bg); font-family: "Press Start 2P", monospace; font-size: 9px; letter-spacing: 1px; padding: 10px 14px; min-height: 44px; margin-top: 16px; box-shadow: 2px 2px 0 0 #000; } .about-card .close:active { transform: translate(1px, 1px); box-shadow: 0 0 0 0 #000; } /* ============================================================ 12. DETAIL MODAL — species entry rendered inside the LCD The modal nodes are relocated by chrome.js into the primary .lcd, so position:absolute scopes them to the device screen. It slides up from the bottom of the LCD viewport on open. ============================================================ */ .modal-bg { position: absolute; inset: 0; background: rgba(15, 56, 15, 0.7); z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.18s; } .modal-bg[data-open="true"] { opacity: 1; pointer-events: auto; } .modal { position: absolute; inset: 0; z-index: 101; overflow-y: auto; background: var(--gb-light); transform: translateY(100%); transition: transform 0.22s ease-out; display: flex; flex-direction: column; padding: 0; } .modal[data-open="true"] { transform: translateY(0); } .modal .shell { max-width: none !important; margin: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; } .modal .shell::before, .modal .shell::after { display: none !important; } .modal .bezel { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; } .modal .bezel::before, .modal .bezel::after { display: none !important; } .modal .lcd { flex: 1; overflow-y: auto; background: var(--gb-light); border: none; border-radius: 0; height: auto !important; min-height: 0 !important; } .modal .lcd::after { display: none; } .entry-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--gb-bg); color: var(--gb-light); border-bottom: 2px solid #000; flex-shrink: 0; } .entry-head .num { font-size: 10px; color: var(--gb-light); text-shadow: 1px 1px 0 #000; letter-spacing: 1.5px; } .entry-head .name { flex: 1; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gb-light); text-shadow: 1px 1px 0 #000; line-height: 1.3; } @media (min-width: 700px) { .entry-head .num { font-size: 12px; } .entry-head .name { font-size: 12px; } } .entry-head .close { background: var(--gb-light); border: 2px solid var(--gb-light); color: var(--gb-bg); font-size: 9px; padding: 10px 12px; min-height: 40px; letter-spacing: 1px; box-shadow: 2px 2px 0 0 #000; } .entry-head .close:active { transform: translate(1px, 1px); box-shadow: 0 0 0 0 #000; } @media (min-width: 700px) { .entry-head .close { min-height: 30px; padding: 6px 10px; font-size: 8px; } } .entry-body { padding: 14px 12px 12px; } @media (min-width: 700px) { .entry-body { padding: 18px; } } .entry-top { display: flex; flex-direction: column; gap: 12px; } @media (min-width: 600px) { .entry-top { flex-direction: row; gap: 16px; } } .entry-sprite { aspect-ratio: 1 / 1; width: 100%; background: var(--gb-mid); background-image: radial-gradient(ellipse at 50% 130%, var(--gb-dark) 0%, transparent 50%), repeating-linear-gradient(0deg, transparent 0 6px, rgba(0,0,0,0.05) 6px 7px); border: 2px solid var(--gb-bg); display: grid; place-items: center; font-size: 64px; image-rendering: pixelated; overflow: hidden; } .entry-sprite img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; } .entry-sprite img.pixel-art { object-fit: contain; image-rendering: pixelated; padding: 8px; filter: drop-shadow(2px 2px 0 var(--gb-bg)); } @media (min-width: 600px) { .entry-sprite { width: 200px; flex-shrink: 0; } } .entry-data { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .entry-sci { font-family: "VT323", monospace; font-size: 16px; font-style: italic; color: var(--gb-dark); } .entry-pills { display: flex; flex-wrap: wrap; gap: 4px; } .entry-table { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; font-family: "VT323", monospace; font-size: 16px; color: var(--gb-bg); } .entry-table dt { font-family: "Press Start 2P", monospace; font-size: 7px; letter-spacing: 1px; color: var(--gb-dark); text-transform: uppercase; padding-top: 3px; } .entry-table dd { margin: 0; } .entry-table a { color: var(--gb-bg); text-decoration: underline; } .cry-panel { margin-top: 8px; padding: 8px; background: var(--gb-light); border: 2px solid var(--gb-bg); font-family: "VT323", monospace; font-size: 16px; color: var(--gb-bg); display: flex; flex-direction: column; gap: 6px; } .cry-panel .label { display: block; font-family: "Press Start 2P", monospace; font-size: 8px; color: var(--gb-bg); letter-spacing: 1px; margin: 0; } .cry-panel audio { width: 100%; max-width: 320px; display: block; margin-bottom: 5px; } .cry-panel a { color: var(--gb-bg); text-decoration: underline; } .cry-credit { font-family: "VT323", monospace; font-size: 14px; color: var(--gb-dark); line-height: 1.3; } .photo-attribution { margin-top: 8px; font-family: "VT323", monospace; font-size: 13px; line-height: 1.3; color: var(--gb-dark); word-break: break-word; } .photo-attribution a { color: var(--gb-bg); text-decoration: underline; } /* ============================================================ 13. RESEARCH SECTIONS ============================================================ */ .research { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } .research-section { background: var(--gb-light); border: 2px solid var(--gb-bg); padding: 10px 12px; font-family: "VT323", monospace; font-size: 16px; line-height: 1.35; color: var(--gb-bg); } .research-section h4 { margin: 0 0 6px; font-family: "Press Start 2P", monospace; font-size: 8px; letter-spacing: 1.5px; color: var(--gb-bg); text-transform: uppercase; } .research-section ul { margin: 4px 0 0; padding-left: 18px; } .research-section li { margin-bottom: 2px; } .research-section .field-mark { background: var(--gb-mid); border-left: 4px solid var(--gb-bg); padding: 6px 10px; margin-top: 4px; color: var(--gb-bg); } .research-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 600px) { .research-grid { grid-template-columns: 1fr 1fr; } } /* WHEN — phenology calendar band */ .research-phenology .phen-band { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin-bottom: 8px; } .phen-cell { aspect-ratio: 1 / 1.4; display: flex; align-items: center; justify-content: center; font-family: "Press Start 2P", monospace; font-size: 7px; border: 1px solid var(--gb-bg); } .phen-cell span { line-height: 1; } .phen-0 { background: var(--gb-light); color: var(--gb-dark); opacity: 0.6; } .phen-1 { background: var(--gb-mid); color: var(--gb-bg); } .phen-2 { background: var(--gb-bg); color: var(--gb-light); box-shadow: inset 0 0 0 2px var(--gb-mid); } .phen-now { outline: 2px solid #000; outline-offset: 1px; } /* WHERE TO LOOK — emphasis section */ .research-where { background: var(--gb-mid); border: 2px solid var(--gb-bg); box-shadow: 2px 2px 0 0 var(--gb-bg); } .research-where h4 { color: var(--gb-bg); } /* STATUS HERE — invasive/native */ .research-invasive[data-code="invasive"], .research-invasive[data-code="noxious"] { background: var(--gb-light); border-color: var(--warn); box-shadow: inset 0 0 0 2px var(--warn); } .research-invasive[data-code="invasive"] h4, .research-invasive[data-code="noxious"] h4 { color: var(--warn); } .research-invasive[data-code="introduced"], .research-invasive[data-code="naturalized"] { background: var(--gb-light); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); } .research-invasive[data-code="native"], .research-invasive[data-code="endemic"] { background: var(--gb-mid); border-color: var(--gb-bg); } .research-toxicity[data-edibility="toxic"], .research-toxicity[data-edibility="deadly"] { background: var(--gb-light); border-color: var(--warn); box-shadow: inset 0 0 0 2px var(--warn); } .research-toxicity[data-edibility="toxic"] h4, .research-toxicity[data-edibility="deadly"] h4 { color: var(--warn); } .research-toxicity[data-edibility="edible"] { background: var(--gb-mid); border-color: var(--gb-bg); } .research-fun-fact { background: var(--gb-mid); border: 2px dashed var(--gb-bg); color: var(--gb-bg); } .research-fun-fact h4 { color: var(--gb-bg); } .research-source { font-family: "Press Start 2P", monospace; font-size: 7px; letter-spacing: 1px; color: var(--gb-dark); text-align: right; padding: 4px 8px; } /* ============================================================ 14. ENTRY FLAVOR + TIMELINE + NAV ============================================================ */ .entry-flavor { margin-top: 14px; padding: 10px 12px; background: var(--gb-light); border: 2px solid var(--gb-bg); font-family: "VT323", monospace; font-size: 17px; line-height: 1.35; color: var(--gb-bg); } .entry-flavor::before { content: "▼ DEX ENTRY"; display: block; font-family: "Press Start 2P", monospace; font-size: 8px; letter-spacing: 1.5px; color: var(--gb-bg); margin-bottom: 6px; } .entry-section-title { font-family: "Press Start 2P", monospace; font-size: 9px; letter-spacing: 1.5px; color: var(--gb-bg); margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--gb-bg); text-transform: uppercase; } .timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .timeline li { background: var(--gb-light); border: 2px solid var(--gb-bg); padding: 8px 10px; font-family: "VT323", monospace; font-size: 16px; } .timeline .when { font-family: "Press Start 2P", monospace; font-size: 8px; color: var(--gb-bg); letter-spacing: 1px; margin-bottom: 4px; } .timeline .body { color: var(--gb-bg); } .nav-row { display: flex; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--gb-bg); } .nav-btn { flex: 1; background: var(--gb-light); border: 2px solid var(--gb-bg); color: var(--gb-bg); font-size: 9px; padding: 10px 8px; letter-spacing: 1px; box-shadow: 2px 2px 0 0 var(--gb-bg); } .nav-btn:hover:not(:disabled) { background: var(--gb-mid); } .nav-btn:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 0 0 0 0 var(--gb-bg); } .nav-btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; } .nav-btn.next { text-align: right; } /* ============================================================ 15. HANDHELD CONTROLS — proper D-pad + A/B cluster + START/SELECT Mirrors the prototype: D-pad LEFT, AB-cluster RIGHT (rotated -22°) on the upper row; SELECT + START pills (rotated -16°) centered on the row below. Decorative + wired on desktop; hidden on mobile in favor of the in-screen floating START button. ============================================================ */ .device-controls, .device-footer { display: none; } @media (min-width: 700px) { .shell:not(.modal-shell) > .device-controls { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px; gap: 12px; } .shell:not(.modal-shell) > .device-footer { display: flex; gap: 16px; justify-content: center; margin-top: -4px; padding-bottom: 6px; } } .dpad { position: relative; width: 72px; height: 72px; flex-shrink: 0; } .dpad-btn { position: absolute; background: #2a2520; border: 2px solid #000; color: #f0e6cf; font-family: "Press Start 2P", monospace; font-size: 8px; display: grid; place-items: center; box-shadow: inset 0 2px 0 #5a4f40, inset 0 -2px 0 #000; cursor: pointer; -webkit-appearance: none; appearance: none; } .dpad-btn:active { box-shadow: inset 0 -2px 0 #5a4f40, inset 0 2px 0 #000; } .dpad-btn.up { left: 24px; top: 0; width: 24px; height: 24px; border-bottom: none; } .dpad-btn.down { left: 24px; bottom: 0; width: 24px; height: 24px; border-top: none; } .dpad-btn.left { left: 0; top: 24px; width: 24px; height: 24px; border-right: none; } .dpad-btn.right { right: 0; top: 24px; width: 24px; height: 24px; border-left: none; } .dpad-btn.center { left: 24px; top: 24px; width: 24px; height: 24px; cursor: default; pointer-events: none; } .ab-cluster { display: flex; gap: 8px; transform: rotate(-22deg); } .ab-btn { width: 38px; height: 38px; border-radius: 50%; background: #6a2828; border: 2px solid #000; color: #fff; font-family: "Press Start 2P", monospace; font-size: 14px; box-shadow: inset 0 3px 0 #a05050, inset 0 -3px 0 #3a1414, 0 2px 0 #000; display: grid; place-items: center; cursor: pointer; } .ab-btn:active { box-shadow: inset 0 -3px 0 #a05050, inset 0 3px 0 #3a1414; transform: translateY(1px); } .ss-cluster { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 14px; } .ss-btn { background: #2a2520; border: 2px solid #000; color: #f0e6cf; padding: 5px 16px; border-radius: 8px; font-family: "Press Start 2P", monospace; font-size: 7px; letter-spacing: 1.5px; box-shadow: inset 0 2px 0 #5a4f40, inset 0 -2px 0 #000; transform: rotate(-16deg); cursor: pointer; } .ss-btn:active { box-shadow: inset 0 -2px 0 #5a4f40, inset 0 2px 0 #000; } /* Legacy decorative dpad inside the shell HTML — chrome.js mounts a new full-fidelity .device-controls instead, so hide the old one. */ .shell > .dpad, .dpad.legacy { display: none !important; } /* ============================================================ 16. IDENTIFY PAGE ============================================================ */ .header { padding: 10px 14px; background: var(--gb-bg); color: var(--gb-light); display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #000; } .header h1 { margin: 0; font-family: "Press Start 2P", monospace; font-size: 14px; letter-spacing: 1.5px; text-shadow: 1px 1px 0 #000; } .back { background: var(--gb-light); color: var(--gb-bg); border: 2px solid var(--gb-light); font-size: 9px; letter-spacing: 1px; padding: 8px 12px; min-height: 36px; text-decoration: none; display: inline-block; box-shadow: 2px 2px 0 0 #000; } .back:active { transform: translate(1px, 1px); box-shadow: 0 0 0 0 #000; color: var(--gb-bg); } .file-zone { background: var(--gb-light); border: 3px dashed var(--gb-bg); padding: 28px 16px; text-align: center; cursor: pointer; margin: 12px; } .file-zone:active { background: var(--gb-mid); } .file-zone .hint { font-family: "VT323", monospace; font-size: 17px; color: var(--gb-dark); margin-top: 8px; } .photo-preview { margin: 12px; background: var(--gb-bg); border: 2px solid var(--gb-bg); box-shadow: inset 0 0 0 2px var(--gb-light); padding: 4px; } .photo-preview img { width: 100%; display: block; filter: contrast(1.05) saturate(0.85); } .token-row { margin: 12px; display: flex; flex-direction: column; gap: 4px; } .token-row label { font-family: "Press Start 2P", monospace; font-size: 8px; letter-spacing: 1px; color: var(--gb-dark); text-transform: uppercase; } .pill-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; } .pill-btn { background: var(--gb-light); border: 2px solid var(--gb-bg); color: var(--gb-bg); font-size: 8px; letter-spacing: 1px; padding: 8px 10px; text-transform: uppercase; min-height: 36px; } .pill-btn:active, .pill-btn[aria-pressed="true"] { background: var(--gb-bg); color: var(--gb-light); box-shadow: inset 0 0 0 2px var(--gb-mid); } .submit-bar { padding: 12px; background: var(--gb-mid); border-top: 2px solid var(--gb-bg); display: flex; gap: 8px; } .submit, .open-btn { flex: 1; background: var(--gb-bg); border: 2px solid var(--gb-bg); color: var(--gb-light); font-size: 10px; letter-spacing: 1.5px; padding: 12px 8px; text-transform: uppercase; min-height: 44px; box-shadow: 2px 2px 0 0 #000; } .submit:active, .open-btn:active { transform: translate(1px, 1px); box-shadow: 0 0 0 0 #000; } .submit[disabled] { opacity: 0.4; cursor: not-allowed; box-shadow: none; } .hint { font-family: "VT323", monospace; font-size: 14px; color: var(--gb-dark); padding: 0 12px 12px; } .candidate { background: var(--gb-light); border: 2px solid var(--gb-bg); margin: 8px 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .candidate.in-dex { background: var(--gb-mid); } .candidate-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .candidate-name { font-family: "Press Start 2P", monospace; font-size: 10px; letter-spacing: 0.5px; color: var(--gb-bg); } .candidate-sci { font-family: "VT323", monospace; font-size: 14px; font-style: italic; color: var(--gb-dark); } .candidate-meta { font-family: "VT323", monospace; font-size: 14px; color: var(--gb-bg); } .conf-bar { height: 8px; background: var(--gb-light); border: 1px solid var(--gb-bg); } .conf-fill { height: 100%; background: var(--gb-bg); background-image: repeating-linear-gradient(-45deg, var(--gb-bg) 0 3px, var(--gb-dark) 3px 6px); } .candidate-actions { display: flex; gap: 6px; flex-wrap: wrap; } .log-btn { background: var(--gb-light); border: 2px solid var(--gb-bg); color: var(--gb-bg); font-size: 8px; letter-spacing: 1px; padding: 6px 10px; text-transform: uppercase; min-height: 32px; } .log-btn.in-dex { background: var(--gb-bg); color: var(--gb-light); } .features { font-family: "VT323", monospace; font-size: 14px; color: var(--gb-dark); } .quality { font-family: "Press Start 2P", monospace; font-size: 7px; letter-spacing: 1px; color: var(--gb-dark); padding: 4px 8px; text-transform: uppercase; } .spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--gb-bg); border-top-color: transparent; animation: spin 0.6s linear infinite; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ 17. SUBMIT PAGE — small overrides ============================================================ */ .pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; } .extras { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; } .more { background: transparent; border: 0; color: var(--gb-bg); font-family: "Press Start 2P", monospace; font-size: 8px; letter-spacing: 1px; padding: 6px 0; text-transform: uppercase; text-align: left; } /* ============================================================ 18. TICKETS PAGE ============================================================ */ .filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px; background: var(--gb-light); border-bottom: 2px solid var(--gb-bg); } .filter { background: var(--gb-light); border: 2px solid var(--gb-bg); color: var(--gb-bg); font-size: 7px; letter-spacing: 1px; padding: 6px 8px; text-transform: uppercase; min-height: 32px; } .filter:active, .filter[aria-pressed="true"] { background: var(--gb-bg); color: var(--gb-light); } .refresh-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--gb-light); border-bottom: 2px solid var(--gb-bg); font-family: "VT323", monospace; font-size: 14px; color: var(--gb-dark); } .refresh-btn { background: var(--gb-bg); border: 2px solid var(--gb-bg); color: var(--gb-light); font-size: 8px; letter-spacing: 1px; padding: 6px 10px; text-transform: uppercase; min-height: 32px; } .last-checked { flex: 1; } .summary { padding: 8px 12px; font-family: "VT323", monospace; font-size: 14px; color: var(--gb-dark); border-bottom: 2px solid var(--gb-bg); background: var(--gb-light); } .summary strong { color: var(--gb-bg); font-family: "Press Start 2P", monospace; font-size: 9px; } .nav-link { font-family: "Press Start 2P", monospace; font-size: 8px; letter-spacing: 1px; color: var(--gb-light); text-decoration: underline; text-transform: uppercase; } .strip .back { background: var(--gb-light); color: var(--gb-bg); } .ticket-list { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .ticket-row { background: var(--gb-light); border: 2px solid var(--gb-bg); padding: 8px 10px; } .ticket-id { font-family: "Press Start 2P", monospace; font-size: 7px; color: var(--gb-dark); } .ticket-status, .ticket-pri, .ticket-kind { font-family: "Press Start 2P", monospace; font-size: 6px; letter-spacing: 1px; padding: 2px 4px; border: 1px solid #000; background: var(--gb-mid); color: var(--gb-bg); text-transform: uppercase; } .ticket-status.s-pending { background: var(--accent); color: #fff; } .ticket-status.s-claimed, .ticket-status.s-in_progress { background: var(--status-seen); color: #fff; } .ticket-status.s-pr_opened { background: var(--type-fungi); color: #fff; } .ticket-status.s-merged { background: var(--status-caught); color: #fff; } .ticket-status.s-failed { background: var(--warn); color: #fff; } .ticket-pri.p-urgent { background: var(--warn); color: #fff; } .ticket-pri.p-high { background: var(--accent); color: #fff; } .ticket-pri.p-low { opacity: 0.6; } .ticket-kind { background: var(--gb-bg); color: var(--gb-light); } .ticket-title { font-family: "Press Start 2P", monospace; font-size: 9px; line-height: 1.5; letter-spacing: 0.5px; margin: 6px 0; } .ticket-body { font-family: "VT323", monospace; font-size: 14px; color: var(--gb-bg); } /* ============================================================ 18b. FORM CHROME — h2, fieldset, legend used by identify.html / submit.html ============================================================ */ .lcd h2 { margin: 16px 12px 6px; font-family: "Press Start 2P", monospace; font-size: 10px; letter-spacing: 1.5px; color: var(--gb-bg); text-transform: uppercase; } @media (min-width: 700px) { .lcd h2 { margin: 18px 18px 8px; font-size: 11px; } } .lcd fieldset { border: none; margin: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; } @media (min-width: 700px) { .lcd fieldset { padding: 8px 18px; } } .lcd legend { font-family: "Press Start 2P", monospace; font-size: 8px; letter-spacing: 1px; color: var(--gb-dark); text-transform: uppercase; padding: 0; margin-bottom: 2px; } .lcd code { font-family: "VT323", monospace; font-size: 14px; background: var(--gb-mid); padding: 1px 4px; color: var(--gb-bg); border: 1px solid var(--gb-bg); } .hidden { display: none !important; } /* ============================================================ 19. TOAST ============================================================ */ .toast { position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--gb-bg); color: var(--gb-light); padding: 10px 14px; font-size: 9px; letter-spacing: 1px; border: 2px solid var(--gb-light); z-index: 300; text-align: center; opacity: 0; transition: opacity 0.18s, transform 0.18s; pointer-events: none; text-transform: uppercase; } .toast[data-show="true"], .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.err { background: var(--warn); color: #fff; border-color: #fff; } .toast.ok { background: var(--status-caught); color: #fff; border-color: #fff; } /* ============================================================ 20. TWEAKS PANEL — palette / scanline switcher ============================================================ */ .tweak-btn { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); width: 40px; height: 40px; border-radius: 50%; background: var(--gb-bg); border: 2px solid var(--gb-light); color: var(--gb-light); font-family: "Press Start 2P", monospace; font-size: 12px; display: grid; place-items: center; z-index: 60; box-shadow: 0 3px 0 #000; cursor: pointer; } .tweak-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 #000; } .tweak-panel { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 50px); background: var(--gb-light); border: 2px solid var(--gb-bg); box-shadow: inset 0 0 0 2px var(--gb-light), inset 0 0 0 4px var(--gb-bg), 4px 4px 0 #000; padding: 8px; display: none; flex-direction: column; gap: 6px; z-index: 60; min-width: 160px; } .tweak-panel[data-open="true"] { display: flex; } .tweak-panel .group { display: flex; flex-direction: column; gap: 4px; } .tweak-panel .group-label { font-family: "Press Start 2P", monospace; font-size: 7px; letter-spacing: 1.5px; color: var(--gb-dark); text-transform: uppercase; } .tweak-panel button { background: var(--gb-light); border: 2px solid var(--gb-bg); color: var(--gb-bg); font-size: 8px; letter-spacing: 1px; padding: 6px 8px; text-align: left; text-transform: uppercase; } .tweak-panel button[aria-pressed="true"] { background: var(--gb-bg); color: var(--gb-light); } .tweak-panel .palette-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; } /* ============================================================ 21. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .lcd::after { display: none; } } /* ============================================================ 22. SCROLLBARS — pixel-style ============================================================ */ .lcd ::-webkit-scrollbar, .modal::-webkit-scrollbar, .about-modal::-webkit-scrollbar { width: 8px; height: 8px; } .lcd ::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb, .about-modal::-webkit-scrollbar-thumb { background: var(--gb-bg); border: 1px solid var(--gb-mid); } .lcd ::-webkit-scrollbar-track, .modal::-webkit-scrollbar-track, .about-modal::-webkit-scrollbar-track { background: var(--gb-mid); } /* Focus ring */ :focus-visible { outline: 2px solid var(--gb-bg); outline-offset: 2px; } /* ============================================================ 33. SPECIES DETAIL — TAB BAR + ACTION BAR Matches the prototype's ENTRY / ID / LOG / PHOTO tabs and the bottom action bar with PREV / LOG SIGHTING / NEXT. ============================================================ */ .tabbar { display: flex; border-top: 2px solid var(--gb-bg); border-bottom: 2px solid var(--gb-bg); background: var(--gb-mid); flex-shrink: 0; } .tabbar .tab { flex: 1; background: transparent; border: 0; border-right: 2px solid var(--gb-bg); padding: 8px 4px; font-family: "Press Start 2P", monospace; font-size: 8px; letter-spacing: 1px; color: var(--gb-bg); min-height: 32px; cursor: pointer; text-transform: uppercase; } .tabbar .tab:last-child { border-right: 0; } .tabbar .tab.on { background: var(--gb-bg); color: var(--gb-light); } .detail-body { padding: 10px 12px; flex: 1; min-height: 0; } .detail-body .tab-pane[hidden] { display: none; } .detail-body .tab-pane.on { display: block; } .action-bar { padding: 8px 10px; background: var(--gb-mid); border-top: 2px solid var(--gb-bg); display: flex; gap: 6px; justify-content: space-between; flex-shrink: 0; } .action-bar .action-btn { background: var(--gb-light); border: 2px solid var(--gb-bg); color: var(--gb-bg); padding: 7px 10px; font-family: "Press Start 2P", monospace; font-size: 8px; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; cursor: pointer; } .action-bar .action-btn[disabled] { opacity: 0.35; cursor: not-allowed; } .action-bar .action-btn:active:not([disabled]) { transform: translate(1px, 1px); } .action-bar .action-btn.primary { background: var(--gb-bg); color: var(--gb-light); border-color: var(--gb-light); box-shadow: inset 0 0 0 1px var(--gb-bg); flex: 1; justify-content: center; } .action-bar .btn-glyph { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--gb-light); color: var(--gb-bg); font-size: 8px; border: 1px solid var(--gb-bg); } .action-bar .action-btn.primary .btn-glyph { background: var(--gb-light); color: var(--gb-bg); } /* Photo pane frame */ .photo-frame { border: 2px solid var(--gb-bg); background: var(--gb-bg); box-shadow: inset 0 0 0 2px var(--gb-light); padding: 4px; margin-bottom: 8px; } .photo-frame img { width: 100%; display: block; filter: contrast(1.05) saturate(0.95); } /* ============================================================ 23. STATUS GLYPHS ON CARDS Top-right corner pictograph that mirrors the species status: ● caught (logged) ○ spotted (seen-not-photographed) ♪ heard (heard-not-seen) ? target (wishlist) Uses :has() so we don't have to touch the card render JS. ============================================================ */ .card { position: relative; } .card .status-glyph, .card::after { position: absolute; top: 6px; right: 6px; font-family: "Press Start 2P", monospace; font-size: 12px; line-height: 1; width: 18px; height: 18px; display: grid; place-items: center; background: var(--gb-light); border: 1px solid var(--gb-bg); color: var(--gb-bg); text-shadow: 1px 1px 0 var(--gb-light); z-index: 2; } .card:has(.status[data-s="caught"])::after { content: "●"; background: var(--status-caught); color: #fff; border-color: #000; } .card:has(.status[data-s="seen-not-photographed"])::after { content: "○"; background: var(--status-seen); color: #fff; border-color: #000; } .card:has(.status[data-s="heard-not-seen"])::after { content: "♪"; background: var(--status-heard); color: #fff; border-color: #000; } .card:has(.status[data-s="wishlist"])::after { content: "?"; background: var(--gb-light); color: var(--gb-bg); } /* Logged tile gets the mid-color background per GALOR spec */ .card:has(.status[data-s="caught"]) { background: var(--gb-mid); } /* ============================================================ 24. SPRITE STAGE — bob + grass + drop shadow on detail ============================================================ */ .entry-sprite { position: relative; cursor: pointer; } .entry-sprite .sprite-stage { position: absolute; inset: 0; display: grid; place-items: center; background: var(--gb-mid); background-image: radial-gradient(ellipse at 50% 130%, var(--gb-dark) 0%, transparent 50%), repeating-linear-gradient(0deg, transparent 0 6px, rgba(0,0,0,0.05) 6px 7px); overflow: hidden; } .entry-sprite .sprite-grass { position: absolute; bottom: 0; left: 0; right: 0; height: 14px; background-image: radial-gradient(circle at 12% 100%, var(--gb-dark) 0 3px, transparent 4px), radial-gradient(circle at 30% 100%, var(--gb-dark) 0 4px, transparent 5px), radial-gradient(circle at 50% 100%, var(--gb-dark) 0 3px, transparent 4px), radial-gradient(circle at 72% 100%, var(--gb-dark) 0 4px, transparent 5px), radial-gradient(circle at 90% 100%, var(--gb-dark) 0 3px, transparent 4px); opacity: 0.8; pointer-events: none; z-index: 1; } .entry-sprite img.pixel-art { position: relative; z-index: 2; filter: drop-shadow(2px 2px 0 var(--gb-bg)); animation: spriteBob 800ms steps(2, end) infinite; } @keyframes spriteBob { 0%, 50% { transform: translateY(0); } 50.01%, 100% { transform: translateY(-3px); } } .entry-sprite .flip-hint { position: absolute; bottom: 0; left: 0; right: 0; background: var(--gb-bg); color: var(--gb-light); text-align: center; font-family: "Press Start 2P", monospace; font-size: 6px; letter-spacing: 1.5px; padding: 3px 0; z-index: 3; pointer-events: none; } .entry-sprite[data-photo="on"] .sprite-stage { display: none; } .entry-sprite[data-photo="on"] .photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; filter: contrast(1.05) saturate(0.9); z-index: 2; } .entry-sprite .photo-img { display: none; } .entry-sprite[data-photo="on"] .photo-img { display: block; } @media (prefers-reduced-motion: reduce) { .entry-sprite img.pixel-art { animation: none; } } /* ============================================================ 25. CALL BUTTON — pixel button with animated 5-bar waveform Replaces the native