/* ============================================================ Solkemon Retro-Pixel Theme ---------------------------------------------------------------- GameBoy / Pokemon Gen 4-5 inspired skin for the screen overlay. Activation: (gated below — remove the class on to instantly disable the theme). Rollback: also remove the in screen.html. Targets: - Top navbar + nav pills + dropdowns - Right-side panel (.card) + wild-encounter alert/pokemon-card - D-pad (.dpad-btn) - Support / chat-toggle pills inside .mmorpg-chat-container - World Chat panel (#chat-log-panel) - Raid Boss widget (#raid-widget) - Token Rush / Global Events widget (#ge-widget) Untouched (intentionally): - #map / #game-canvas / pixel-art world - .ds-modal-* (modals already redesigned) - JS logic, IDs, onclick handlers ============================================================ */ body.retro { /* ── Palette ───────────────────────────────────────────── */ --rp-cream: #f8e8c0; /* GB menu background */ --rp-cream-dark: #e6d29a; /* shadow on cream */ --rp-cream-hi: #fff6d8; /* highlight on cream */ --rp-ink: #1a1a3a; /* chunky border / text */ --rp-ink-soft: #2a2a4a; --rp-blue: #2548d0; /* Pokemon blue accent */ --rp-blue-dark: #16307a; --rp-red: #e63946; /* Pokemon red */ --rp-red-dark: #9a1f29; --rp-yellow: #fbbf24; --rp-yellow-dark: #b97f0a; --rp-green: #4ade80; /* HP / good */ --rp-green-dark: #166534; --rp-purple: #6d28d9; /* ── Typography ────────────────────────────────────────── */ --rp-font-pixel: 'Press Start 2P', 'Courier New', monospace; --rp-font-body: 'VT323', 'Courier New', monospace; /* ── Effects ───────────────────────────────────────────── */ --rp-shadow-chunky: 0 4px 0 0 var(--rp-ink); --rp-shadow-chunky-sm: 0 2px 0 0 var(--rp-ink); } /* Pixel-rendered images everywhere inside the game UI */ body.retro .navbar img, body.retro .card img, body.retro #raid-widget img { image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; } /* ============================================================ 1. NAVBAR ============================================================ */ body.retro .navbar { background: linear-gradient(180deg, #161634 0%, #0e0e26 100%) !important; border-bottom: 4px solid var(--rp-ink) !important; box-shadow: inset 0 -2px 0 0 #2a2a4a, 0 4px 0 0 #000 !important; padding: 0 14px !important; } body.retro .navbar img { filter: drop-shadow(2px 2px 0 #000) !important; } /* Nav pills — chunky pixel buttons */ body.retro .nav-pill, body.retro .dropdown-btn { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; font-weight: 400 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; background: var(--rp-cream) !important; color: var(--rp-ink) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 7px 10px !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 var(--rp-cream-hi), 2px 2px 0 0 var(--rp-ink) !important; transition: transform .05s, box-shadow .05s !important; text-shadow: none !important; } body.retro .nav-pill:hover, body.retro .dropdown-btn:hover { background: var(--rp-yellow) !important; color: var(--rp-ink) !important; transform: translateY(0) !important; } body.retro .nav-pill:active, body.retro .dropdown-btn:active { transform: translate(2px, 2px) !important; box-shadow: inset -1px -1px 0 0 var(--rp-cream-dark), inset 1px 1px 0 0 var(--rp-cream-hi), 0 0 0 0 var(--rp-ink) !important; } /* Battle Pass pill — keep it visually special (purple) */ body.retro .nav-pill[style*="4c1d95"], body.retro .nav-pill[style*="5b21b6"] { background: var(--rp-purple) !important; color: var(--rp-cream-hi) !important; border-color: var(--rp-ink) !important; } /* "0 online" / "MC: $4K" pills — hand-styled spans/buttons get pixel chip look */ body.retro #ca-btn { font-family: var(--rp-font-pixel) !important; font-size: 8px !important; background: var(--rp-ink) !important; color: var(--rp-yellow) !important; border: 2px solid var(--rp-yellow) !important; border-radius: 0 !important; padding: 5px 8px !important; box-shadow: 2px 2px 0 0 #000 !important; } body.retro #ca-btn span { font-family: var(--rp-font-body) !important; font-size: 13px !important; } /* Dropdown panel — chunky pixel menu */ body.retro .dropdown-content { background: var(--rp-cream) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 var(--rp-cream-hi), 4px 4px 0 0 #000 !important; padding: 4px !important; } body.retro .dropdown-content li a, body.retro .dropdown-content li button { font-family: var(--rp-font-body) !important; font-size: 16px !important; color: var(--rp-ink) !important; background: transparent !important; border-radius: 0 !important; padding: 6px 10px !important; margin: 1px !important; border: 2px solid transparent !important; text-transform: none !important; } body.retro .dropdown-content li a:hover, body.retro .dropdown-content li button:hover { background: var(--rp-blue) !important; color: var(--rp-cream-hi) !important; border-color: var(--rp-ink) !important; } /* ============================================================ 2. RIGHT PANEL (.card / #rightPanelCard) ============================================================ */ body.retro .card { background: var(--rp-cream) !important; border: 4px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -3px -3px 0 0 var(--rp-cream-dark), inset 3px 3px 0 0 var(--rp-cream-hi), 4px 4px 0 0 #000 !important; padding: 4px !important; } /* Inner alert/encounter region (mint green block) */ body.retro .card-info { background: var(--rp-cream-hi) !important; border: 3px solid var(--rp-ink) !important; box-shadow: inset 0 0 0 1px var(--rp-cream-dark) !important; border-radius: 0 !important; } /* Wild encounter intro message */ body.retro #message { font-family: var(--rp-font-body) !important; font-size: 20px !important; color: var(--rp-ink) !important; line-height: 1.15 !important; letter-spacing: 0.5px !important; } /* Pokemon name + level / HP labels */ body.retro #p_name { font-family: var(--rp-font-pixel) !important; font-size: 11px !important; color: var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin: 2px 0 !important; } body.retro .poke-info p { font-family: var(--rp-font-body) !important; font-size: 17px !important; color: var(--rp-ink) !important; font-weight: 400 !important; letter-spacing: 0.5px !important; } body.retro .poke-info #level, body.retro .poke-info #HP { color: var(--rp-blue-dark) !important; font-weight: 700 !important; } /* Fight button — classic Pokemon menu button */ body.retro #fight-btn, body.retro .pokemon-card .px-btn { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; background: var(--rp-red) !important; color: #fff !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 8px 16px !important; text-transform: uppercase !important; letter-spacing: 1px !important; box-shadow: inset -2px -2px 0 0 var(--rp-red-dark), inset 2px 2px 0 0 #ff7a85, 3px 3px 0 0 var(--rp-ink) !important; text-shadow: 1px 1px 0 var(--rp-red-dark) !important; cursor: pointer !important; transition: transform .05s, box-shadow .05s !important; } body.retro #fight-btn:hover, body.retro .pokemon-card .px-btn:hover { background: #ff5564 !important; } body.retro #fight-btn:active, body.retro .pokemon-card .px-btn:active { transform: translate(3px, 3px) !important; box-shadow: inset -1px -1px 0 0 var(--rp-red-dark), inset 1px 1px 0 0 #ff7a85, 0 0 0 0 var(--rp-ink) !important; } /* ============================================================ 3. D-PAD ============================================================ */ body.retro #directions > div { background: var(--rp-cream) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 var(--rp-cream-hi) !important; padding: 8px !important; } body.retro a.dpad-btn { border-radius: 0 !important; background: var(--rp-ink) !important; border: 2px solid var(--rp-ink) !important; box-shadow: inset -2px -2px 0 0 #000, inset 2px 2px 0 0 #4a4a7a, 2px 2px 0 0 #000 !important; transition: transform .05s, box-shadow .05s !important; width: 42px !important; height: 42px !important; } body.retro a.dpad-btn.dpad-main { background: var(--rp-ink) !important; } body.retro a.dpad-btn.dpad-diag { background: var(--rp-ink-soft) !important; opacity: 0.85 !important; width: 42px !important; height: 42px !important; } /* Even gap + grid for d-pad rows so all buttons line up exactly */ body.retro #directions .row { gap: 6px !important; margin-bottom: 6px !important; } body.retro #directions .row:last-child { margin-bottom: 0 !important; } body.retro a.dpad-btn:hover { transform: none !important; background: var(--rp-blue) !important; } body.retro a.dpad-btn:active { transform: translate(2px, 2px) !important; box-shadow: inset -1px -1px 0 0 #000, inset 1px 1px 0 0 #4a4a7a, 0 0 0 0 #000 !important; background: var(--rp-blue-dark) !important; } /* Center player avatar — pixel frame */ body.retro #dirsprite { background: var(--rp-cream-hi) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -1px -1px 0 0 var(--rp-cream-dark), inset 1px 1px 0 0 #fff !important; } body.retro #dirsprite img { image-rendering: pixelated !important; } /* ============================================================ 4. SUPPORT BUTTON / CHAT TOGGLE INSIDE PANEL ============================================================ */ body.retro .mmorpg-chat-container .support-btn, body.retro .mmorpg-chat-container #supportBtn { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: var(--rp-blue) !important; color: #fff !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 8px 12px !important; box-shadow: inset -2px -2px 0 0 var(--rp-blue-dark), inset 2px 2px 0 0 #6a8aff, 2px 2px 0 0 var(--rp-ink) !important; text-shadow: 1px 1px 0 var(--rp-blue-dark) !important; } body.retro .mmorpg-chat-container .support-btn:active, body.retro .mmorpg-chat-container #supportBtn:active { transform: translate(2px, 2px) !important; box-shadow: inset -1px -1px 0 0 var(--rp-blue-dark), inset 1px 1px 0 0 #6a8aff, 0 0 0 0 var(--rp-ink) !important; } body.retro .mmorpg-chat-container .chat-toggle-btn { background: var(--rp-yellow) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; color: var(--rp-ink) !important; box-shadow: inset -2px -2px 0 0 var(--rp-yellow-dark), inset 2px 2px 0 0 #ffe082, 2px 2px 0 0 var(--rp-ink) !important; } body.retro .mmorpg-chat-input { background: var(--rp-cream-hi) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: 2px 2px 0 0 var(--rp-ink) !important; } body.retro .mmorpg-chat-input input { font-family: var(--rp-font-body) !important; font-size: 17px !important; color: var(--rp-ink) !important; background: transparent !important; } body.retro .mmorpg-chat-input input::placeholder { color: var(--rp-ink-soft) !important; opacity: 0.6 !important; } /* Fishing button — keep blue but pixel-ify */ body.retro #fishing-btn { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; background: linear-gradient(180deg, #5ab4ed 0%, #0288d1 100%) !important; box-shadow: inset -2px -2px 0 0 #01579b, inset 2px 2px 0 0 #80d4ff, 2px 2px 0 0 var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 1px !important; } /* ============================================================ 5. WORLD CHAT PANEL (#chat-log-panel) ============================================================ */ body.retro #chat-log-panel { background: var(--rp-cream) !important; border: 4px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 var(--rp-cream-hi), 4px 4px 0 0 #000 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.retro #chat-log-header { background: var(--rp-ink) !important; border-bottom: 3px solid var(--rp-ink) !important; padding: 6px 10px !important; } body.retro #chat-log-header-title { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; color: var(--rp-yellow) !important; letter-spacing: 1px !important; text-shadow: 1px 1px 0 #000 !important; } body.retro #chat-log-toggle-icon { color: var(--rp-cream-hi) !important; font-size: 12px !important; } body.retro #chat-log-messages { background: var(--rp-cream-hi) !important; } body.retro .chat-log-entry { font-family: var(--rp-font-body) !important; font-size: 16px !important; color: var(--rp-ink) !important; border-bottom: 1px dashed var(--rp-cream-dark) !important; line-height: 1.25 !important; } body.retro .chat-log-name { color: var(--rp-blue-dark) !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 13px !important; font-family: var(--rp-font-pixel) !important; letter-spacing: 0.5px !important; } body.retro .chat-log-time { color: var(--rp-ink-soft) !important; opacity: 0.6 !important; font-family: var(--rp-font-body) !important; font-size: 13px !important; } body.retro .chat-log-empty { font-family: var(--rp-font-body) !important; font-size: 16px !important; color: var(--rp-ink-soft) !important; } body.retro #chat-log-input-row { background: var(--rp-ink) !important; border-top: 3px solid var(--rp-ink) !important; padding: 6px !important; } body.retro #chat-log-input { font-family: var(--rp-font-body) !important; font-size: 16px !important; color: var(--rp-ink) !important; background: var(--rp-cream-hi) !important; border: 2px solid var(--rp-cream) !important; border-radius: 0 !important; padding: 4px 6px !important; } body.retro #chat-log-input::placeholder { color: var(--rp-ink-soft) !important; opacity: 0.55 !important; } body.retro #chat-log-send { background: var(--rp-red) !important; color: #fff !important; border: 2px solid var(--rp-cream-hi) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-red-dark), inset 2px 2px 0 0 #ff7a85 !important; font-size: 14px !important; padding: 4px 10px !important; } body.retro #chat-log-send:hover { background: #ff5564 !important; } /* ── 5.2 Mobile bottom-sheet (chat / raid / event tabs) ───── Default sheet is rgba(10,8,20,0.97) which combined with retro .chat-log-entry { color: rp-ink } makes text invisible. Re-skin the entire sheet to retro cream so text stays legible. */ body.retro #mob-sheet { background: var(--rp-cream) !important; border-top: 4px solid var(--rp-ink) !important; border-radius: 14px 14px 0 0 !important; box-shadow: 0 -6px 0 0 var(--rp-ink) !important; } body.retro #mob-sheet-handle { background: var(--rp-ink) !important; opacity: 0.35 !important; } body.retro #mob-sheet-tabs { background: var(--rp-cream-hi) !important; border-bottom: 3px solid var(--rp-ink) !important; } body.retro .mob-tab { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; color: var(--rp-ink-soft) !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; padding: 12px 0 !important; } body.retro .mob-tab.active { color: var(--rp-ink) !important; background: var(--rp-yellow) !important; border-bottom: 3px solid var(--rp-ink) !important; } body.retro #mob-pane-chat, body.retro #mob-pane-raid, body.retro #mob-pane-event { background: var(--rp-cream) !important; color: var(--rp-ink) !important; } body.retro #mob-pane-chat .chat-log-entry { font-size: 14px !important; color: var(--rp-ink) !important; border-bottom: 1px dashed var(--rp-cream-dark) !important; padding: 6px 0 !important; } body.retro #mob-pane-chat .chat-log-name { color: var(--rp-blue-dark) !important; } body.retro #mob-pane-chat .chat-log-empty { color: var(--rp-ink-soft) !important; } body.retro #mob-chat-input-row { background: var(--rp-cream-hi) !important; border-top: 3px solid var(--rp-ink) !important; } body.retro #mob-chat-input { font-family: var(--rp-font-body) !important; font-size: 16px !important; background: #fff !important; color: var(--rp-ink) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; } body.retro #mob-chat-input::placeholder { color: var(--rp-ink-soft) !important; opacity: 0.55 !important; } body.retro #mob-chat-send { background: var(--rp-red) !important; color: #fff !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-red-dark), inset 2px 2px 0 0 #ff7a85 !important; font-family: var(--rp-font-pixel) !important; font-size: 12px !important; padding: 6px 14px !important; } /* ── 5.3 Mobile FAB icons (left side bottom) — pixel chips ── */ body.retro .mob-fab { background: var(--rp-cream) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; color: var(--rp-ink) !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 var(--rp-cream-hi), 3px 3px 0 0 #000 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.retro .mob-fab.has-badge::after { border-color: var(--rp-cream) !important; } /* ============================================================ 6. RAID BOSS WIDGET (#raid-widget) ============================================================ */ body.retro #raid-widget { background: var(--rp-cream) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 var(--rp-cream-hi), 3px 3px 0 0 #000 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.retro #raid-widget-title { font-family: var(--rp-font-pixel) !important; font-size: 7px !important; color: var(--rp-red) !important; text-shadow: 1px 1px 0 var(--rp-ink) !important; letter-spacing: 0.5px !important; } body.retro #raid-widget-name { font-family: var(--rp-font-pixel) !important; font-size: 8px !important; color: var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; } body.retro #raid-widget-hp-bar { background: var(--rp-ink) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; height: 10px !important; padding: 1px !important; box-sizing: content-box !important; } body.retro #raid-widget-hp-fill { background: var(--rp-red) !important; border-radius: 0 !important; box-shadow: inset 0 -2px 0 0 var(--rp-red-dark), inset 0 2px 0 0 #ff7a85 !important; } body.retro #raid-widget-hp-text, body.retro #raid-widget-attackers { font-family: var(--rp-font-body) !important; font-size: 14px !important; color: var(--rp-ink) !important; } body.retro #raid-widget-collapse-btn { color: var(--rp-ink) !important; font-weight: 700 !important; } /* ============================================================ 7. TOKEN RUSH / GLOBAL EVENTS WIDGET (#ge-widget) ============================================================ */ body.retro #ge-widget { background: var(--rp-cream) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 var(--rp-cream-hi), 3px 3px 0 0 #000 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 8px 10px !important; } body.retro #ge-widget-name { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; color: var(--rp-yellow-dark) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } body.retro #ge-widget-timer { font-family: var(--rp-font-body) !important; font-size: 14px !important; color: var(--rp-ink) !important; font-weight: 700 !important; } body.retro #ge-widget-desc { font-family: var(--rp-font-body) !important; font-size: 14px !important; color: var(--rp-ink-soft) !important; } body.retro #ge-widget-dot { background: var(--rp-yellow) !important; border: 1px solid var(--rp-ink) !important; border-radius: 0 !important; } body.retro #ge-widget-collapse-btn { color: var(--rp-ink) !important; } /* ============================================================ 8. MOBILE TWEAKS (≤767px) ============================================================ */ @media (max-width: 767px) { /* Smaller pixel font on tiny screens — Press Start 2P at >10px wraps */ body.retro .nav-pill, body.retro .dropdown-btn { font-size: 8px !important; padding: 6px 8px !important; } body.retro #message { font-size: 17px !important; } body.retro #p_name { font-size: 10px !important; } body.retro .poke-info p { font-size: 15px !important; } body.retro #fight-btn { font-size: 9px !important; padding: 7px 12px !important; } /* Mobile FAB bar — pixel-ify the floating buttons */ body.retro .mob-fab { background: var(--rp-cream) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; color: var(--rp-ink) !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 var(--rp-cream-hi), 2px 2px 0 0 #000 !important; } } /* ============================================================ 9. TINY HOUSEKEEPING ============================================================ */ /* Make sure heading-style spans (online count, MC) get the chip look, even when set via inline styles in the markup. */ body.retro .navbar [style*="background:#"][style*="border-radius"]:not(.nav-pill):not(.dropdown-btn) { border-radius: 0 !important; border: 2px solid var(--rp-ink) !important; box-shadow: 2px 2px 0 0 #000 !important; } /* Disable any blur — pixel art looks bad through blur */ body.retro .navbar, body.retro .card, body.retro #chat-log-panel, body.retro #raid-widget, body.retro #ge-widget, body.retro .mmorpg-chat-input { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ============================================================ 10. MODALS (.ds-modal-* + #wild-battle-modal) ---------------------------------------------------------------- Unifies all modal chrome with the GB/Pokemon retro look. Targets: - SolOrb Shop, Profile, Gyms (use .ds-modal-* in screen.html) - Wild Battle modal (#wild-battle-modal) — restyles outer panel, HP cards, move buttons, action buttons (Attack/Catch/Run), SolOrb chips, stat row, battle log. Backdrop: lighter tint + blur instead of dark dim sheet. All overrides scoped to body.retro — pure overlay, removing the class rolls the look back to the dark/purple design-system. ============================================================ */ /* ── 10.1 Backdrop: very light overlay (no blur — avoids dim compositing) ── */ body.retro .ds-modal-backdrop { background: rgba(0, 0, 0, 0.02) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* SolOrb Shop / Profile / Gyms — same “clean” overlay as Evolution (no dim blur sheet) */ body.retro #pokeball-shop-modal.ds-modal-backdrop, body.retro #profile-modal.ds-modal-backdrop, body.retro #gyms-modal.ds-modal-backdrop { background: rgba(0, 0, 0, 0.02) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── 10.2 Modal card: cream pixel chunky panel ────────────── */ body.retro .ds-modal-card { background: var(--rp-cream) !important; border: 4px solid var(--rp-ink) !important; border-radius: 4px !important; box-shadow: inset -3px -3px 0 0 var(--rp-cream-dark), inset 3px 3px 0 0 var(--rp-cream-hi) !important; color: var(--rp-ink) !important; overflow: hidden !important; } /* ── 10.3 Modal header: ink band w/ pixel title ───────────── */ body.retro .ds-modal-header { background: linear-gradient(180deg, var(--rp-ink-soft) 0%, var(--rp-ink) 100%) !important; border-bottom: 3px solid var(--rp-ink) !important; box-shadow: inset 0 -2px 0 0 #000 !important; color: var(--rp-cream-hi) !important; padding: 10px 14px !important; } body.retro .ds-modal-title { font-family: var(--rp-font-pixel) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 1px !important; color: var(--rp-yellow) !important; text-shadow: 2px 2px 0 #000 !important; text-transform: uppercase !important; line-height: 1.2 !important; margin: 0 !important; } /* Header subtitle (e.g. "Buy SolOrbs with Tokens") */ body.retro .ds-modal-header .ds-body--small { font-family: var(--rp-font-body) !important; font-size: 15px !important; color: var(--rp-cream-hi) !important; opacity: 0.85 !important; letter-spacing: 0.5px !important; } /* ── 10.4 Modal body: cream surface, GB-screen feel ───────── */ body.retro .ds-modal-body { background: var(--rp-cream) !important; color: var(--rp-ink) !important; box-shadow: inset 0 0 0 2px var(--rp-cream-dark) !important; padding: 14px !important; } /* Footer (when present) — cream darker chip */ body.retro .ds-modal-footer { background: var(--rp-cream-dark) !important; border-top: 3px solid var(--rp-ink) !important; padding: 10px 14px !important; } /* ── 10.5 Close button (X) — pixel red chip ───────────────── */ body.retro .ds-btn--ghost-light.ds-btn--icon, body.retro .ds-modal-header .ds-btn--icon { font-family: var(--rp-font-pixel) !important; font-size: 12px !important; background: var(--rp-red) !important; color: #fff !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; padding: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-red-dark), inset 2px 2px 0 0 #ff7a85, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-red-dark) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.retro .ds-btn--ghost-light.ds-btn--icon:hover, body.retro .ds-modal-header .ds-btn--icon:hover { background: #ff5564 !important; color: #fff !important; } body.retro .ds-btn--ghost-light.ds-btn--icon:active, body.retro .ds-modal-header .ds-btn--icon:active { transform: translate(2px, 2px) !important; box-shadow: inset -1px -1px 0 0 var(--rp-red-dark), inset 1px 1px 0 0 #ff7a85, 0 0 0 0 #000 !important; } /* ── 10.6 Buttons inside modals — pixel chips ─────────────── */ body.retro .ds-modal-card .ds-btn, body.retro #wild-battle-modal .ds-btn { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; font-weight: 400 !important; letter-spacing: 1px !important; text-transform: uppercase !important; border-radius: 0 !important; border: 2px solid var(--rp-ink) !important; transition: transform .05s, box-shadow .05s !important; } body.retro .ds-modal-card .ds-btn:active:not(:disabled), body.retro #wild-battle-modal .ds-btn:active:not(:disabled) { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* Primary (brand) — blue pixel chip */ body.retro .ds-modal-card .ds-btn--primary, body.retro #wild-battle-modal .ds-btn--primary { background: var(--rp-blue) !important; color: #fff !important; box-shadow: inset -2px -2px 0 0 var(--rp-blue-dark), inset 2px 2px 0 0 #6a8aff, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-blue-dark) !important; } /* Accent (success/green) — green pixel chip */ body.retro .ds-modal-card .ds-btn--accent, body.retro #wild-battle-modal .ds-btn--accent { background: var(--rp-green) !important; color: var(--rp-ink) !important; box-shadow: inset -2px -2px 0 0 var(--rp-green-dark), inset 2px 2px 0 0 #b6f5c8, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 #b6f5c8 !important; } /* Danger — red pixel chip */ body.retro .ds-modal-card .ds-btn--danger, body.retro #wild-battle-modal .ds-btn--danger { background: var(--rp-red) !important; color: #fff !important; box-shadow: inset -2px -2px 0 0 var(--rp-red-dark), inset 2px 2px 0 0 #ff7a85, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-red-dark) !important; } /* Ghost — cream pixel chip */ body.retro .ds-modal-card .ds-btn--ghost, body.retro #wild-battle-modal .ds-btn--ghost { background: var(--rp-cream) !important; color: var(--rp-ink) !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 var(--rp-cream-hi), 2px 2px 0 0 #000 !important; } /* Ghost-light (in body, not header) — yellow pixel chip */ body.retro .ds-modal-body .ds-btn--ghost-light:not(.ds-btn--icon), body.retro #wild-battle-modal .ds-btn--ghost-light:not(.ds-btn--icon) { background: var(--rp-yellow) !important; color: var(--rp-ink) !important; border-color: var(--rp-ink) !important; box-shadow: inset -2px -2px 0 0 var(--rp-yellow-dark), inset 2px 2px 0 0 #ffe082, 2px 2px 0 0 #000 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── 10.7 Inputs / number fields inside modals ────────────── */ body.retro .ds-modal-body input[type="text"], body.retro .ds-modal-body input[type="number"], body.retro .ds-modal-body input[type="email"], body.retro .ds-modal-body input:not([type]), body.retro .ds-modal-body textarea, body.retro .ds-modal-body select { font-family: var(--rp-font-body) !important; font-size: 17px !important; color: var(--rp-ink) !important; background: var(--rp-cream-hi) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 4px 8px !important; box-shadow: inset 1px 1px 0 0 var(--rp-cream-dark) !important; } body.retro .ds-modal-body input[type="number"] { text-align: center !important; font-weight: 700 !important; } /* ── 10.8 Inner cards / surfaces inside body ──────────────── */ body.retro .ds-modal-body .ds-card { background: var(--rp-cream-hi) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 2px 2px 0 0 #000 !important; color: var(--rp-ink) !important; } body.retro .ds-modal-body .ds-card.ds-card--muted { background: var(--rp-cream) !important; } /* Headings inside modal cards */ body.retro .ds-modal-body .ds-h3, body.retro .ds-modal-body .ds-h4 { font-family: var(--rp-font-pixel) !important; font-size: 11px !important; font-weight: 400 !important; color: var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; line-height: 1.3 !important; } body.retro .ds-modal-body .ds-body, body.retro .ds-modal-body .ds-body--small { font-family: var(--rp-font-body) !important; font-size: 16px !important; color: var(--rp-ink) !important; } body.retro .ds-modal-body .ds-text-muted { color: var(--rp-ink-soft) !important; opacity: 0.75 !important; } /* Stat tiles inside modals */ body.retro .ds-modal-body .ds-stat { background: var(--rp-cream-hi) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -1px -1px 0 0 var(--rp-cream-dark), inset 1px 1px 0 0 #fff, 2px 2px 0 0 #000 !important; } body.retro .ds-modal-body .ds-stat__value { font-family: var(--rp-font-pixel) !important; font-size: 13px !important; color: var(--rp-ink) !important; } body.retro .ds-modal-body .ds-stat__label { font-family: var(--rp-font-body) !important; font-size: 13px !important; color: var(--rp-ink-soft) !important; text-transform: uppercase !important; } body.retro .ds-modal-body .ds-stat--dark { background: var(--rp-ink) !important; border-color: var(--rp-yellow) !important; } body.retro .ds-modal-body .ds-stat--dark .ds-stat__value { color: var(--rp-yellow) !important; } body.retro .ds-modal-body .ds-stat--dark .ds-stat__label { color: var(--rp-cream-hi) !important; opacity: 0.8 !important; } /* Badges inside modals — pixel chip */ body.retro .ds-modal-body .ds-badge { border-radius: 0 !important; border: 2px solid var(--rp-ink) !important; font-family: var(--rp-font-pixel) !important; font-size: 9px !important; background: var(--rp-cream) !important; color: var(--rp-ink) !important; box-shadow: 1px 1px 0 0 #000 !important; padding: 3px 6px !important; } /* ============================================================ 11. WILD BATTLE MODAL (#wild-battle-modal) ---------------------------------------------------------------- The arena keeps its sky/ground sprites. We restyle only the surrounding panel, HP cards, log, action row, moves and items. Inline styles in screen.html / battle-system.js are aggressive, so most rules use !important on specific selectors. ============================================================ */ /* ── 11.1 Backdrop dim — dark sheet + blur to hide game UI bleed ── */ body.retro #wild-battle-modal { background: rgba(0, 0, 0, 0.02) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── 11.2 Outer container — cream pixel chunky panel ──────── */ body.retro #wb-container { background: var(--rp-cream) !important; border: 4px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -3px -3px 0 0 var(--rp-cream-dark), inset 3px 3px 0 0 var(--rp-cream-hi), 4px 4px 0 0 #000 !important; font-family: var(--rp-font-body) !important; } /* ── 11.3 HP cards (wild + player) — GB-style pixel labels ─ */ body.retro #wb-wild-hpcard, body.retro #wb-player-hpcard { background: var(--rp-cream) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -1px -1px 0 0 var(--rp-cream-dark), inset 1px 1px 0 0 #fff, 2px 2px 0 0 #000 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: var(--rp-ink) !important; } body.retro #wb-wild-hpcard #wb-wild-name-badge, body.retro #wb-player-hpcard #wb-player-name-badge { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; color: var(--rp-ink) !important; text-shadow: none !important; letter-spacing: 0.5px !important; } body.retro #wb-wild-hpcard #wb-wild-level-badge, body.retro #wb-player-hpcard #wb-player-level-badge { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; color: var(--rp-blue-dark) !important; } body.retro #wb-wild-hpcard span, body.retro #wb-player-hpcard span { color: var(--rp-ink) !important; } /* HP track — solid ink frame, segmented green/red fill */ body.retro #wb-wild-hpcard > div > div, body.retro #wb-player-hpcard > div > div { background: var(--rp-ink) !important; border-radius: 0 !important; height: 8px !important; border: 1px solid var(--rp-ink) !important; box-shadow: inset 0 0 0 1px var(--rp-cream) !important; } body.retro .battle-hp-bar { border-radius: 0 !important; box-shadow: inset 0 -2px 0 0 rgba(0,0,0,0.35), inset 0 1px 0 0 rgba(255,255,255,0.5) !important; } body.retro .battle-hp-bar.high { background: var(--rp-green) !important; } body.retro .battle-hp-bar.medium { background: var(--rp-yellow) !important; } body.retro .battle-hp-bar.low { background: var(--rp-red) !important; } /* ── 11.4 Battle log — cream GB text screen ──────────────── */ body.retro #wb-log { background: var(--rp-cream-hi) !important; border-top: 3px solid var(--rp-ink) !important; color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 16px !important; line-height: 1.3 !important; padding: 8px 12px !important; box-shadow: inset 0 0 0 2px var(--rp-cream-dark) !important; } /* ── 11.5 Bottom panel container ─────────────────────────── */ body.retro #wb-container > div:last-child { background: var(--rp-cream) !important; border-top: 3px solid var(--rp-ink) !important; color: var(--rp-ink) !important; } /* ── 11.6 Stat row chips (ATK/DEF/SPD/vs ATK) ────────────── */ body.retro #wb-stat-row span { background: var(--rp-cream-hi) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 14px !important; font-weight: 700 !important; padding: 3px 7px !important; box-shadow: 2px 2px 0 0 #000 !important; letter-spacing: 0.5px !important; } /* ── 11.7 "Moves" label and player move buttons ──────────── */ body.retro #wild-battle-modal div[style*="text-transform:uppercase"][style*="Moves"], body.retro #wb-player-moves { color: var(--rp-ink) !important; } /* The Moves heading lives in a sibling div — bump it via attribute partial match */ body.retro #wild-battle-modal > #wb-container > div:last-child > div > div:first-child { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; color: var(--rp-ink) !important; text-shadow: none !important; } /* Player move buttons — cream pixel chips with type badge color */ body.retro #wb-player-moves .player-move { background: var(--rp-cream-hi) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 14px !important; font-weight: 700 !important; padding: 6px 6px !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 2px 2px 0 0 #000 !important; transition: transform .05s, box-shadow .05s !important; text-transform: capitalize !important; } body.retro #wb-player-moves .player-move:hover { background: var(--rp-yellow) !important; transform: none !important; filter: none !important; } body.retro #wb-player-moves .player-move.selected { background: var(--rp-yellow) !important; outline: 3px solid var(--rp-ink) !important; outline-offset: -3px !important; transform: none !important; } body.retro #wb-player-moves .player-move:active { transform: translate(2px, 2px) !important; box-shadow: inset -1px -1px 0 0 var(--rp-cream-dark), inset 1px 1px 0 0 #fff, 0 0 0 0 #000 !important; } body.retro #wb-player-moves .player-move > span { color: var(--rp-ink) !important; text-shadow: none !important; font-family: var(--rp-font-body) !important; } /* Move name — VT323 reads cleanly at large size, Press Start 2P at 9px was crammed and hard to parse. Same goes for weight: 700 was heavy. */ body.retro #wb-player-moves .player-move > span:first-child { font-family: var(--rp-font-body) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.05 !important; margin-bottom: 1px !important; letter-spacing: 0.5px !important; } body.retro #wb-player-moves .player-move > span:nth-child(2) { /* The TYPE badge (FIRE / DRAGON etc.) — pixel font but tighter, no text-shadow because that's what made it look "stamped" / heavy. */ font-family: var(--rp-font-pixel) !important; font-size: 7px !important; font-weight: 400 !important; text-shadow: none !important; letter-spacing: 1px !important; opacity: 0.85 !important; } body.retro #wb-player-moves .player-move .pp-count { font-family: var(--rp-font-body) !important; font-size: 14px !important; font-weight: 400 !important; opacity: 0.75 !important; } body.retro #wb-player-moves .player-move { font-weight: 400 !important; } /* ── 11.8 Action buttons (Attack / Catch / Run) — overrides the base ds-btn rules above with bigger chip + size ── */ body.retro #wb-attack, body.retro #wb-catch, body.retro #wb-run, body.retro #wb-escape { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; border-radius: 0 !important; border: 3px solid var(--rp-ink) !important; padding: 10px 8px !important; min-height: 40px !important; text-transform: uppercase !important; letter-spacing: 1px !important; transition: transform .05s, box-shadow .05s !important; } body.retro #wb-attack { background: var(--rp-red) !important; color: #fff !important; box-shadow: inset -2px -2px 0 0 var(--rp-red-dark), inset 2px 2px 0 0 #ff7a85, 3px 3px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-red-dark) !important; } body.retro #wb-catch { background: var(--rp-blue) !important; color: #fff !important; box-shadow: inset -2px -2px 0 0 var(--rp-blue-dark), inset 2px 2px 0 0 #6a8aff, 3px 3px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-blue-dark) !important; } body.retro #wb-run, body.retro #wb-escape { background: var(--rp-yellow) !important; color: var(--rp-ink) !important; box-shadow: inset -2px -2px 0 0 var(--rp-yellow-dark), inset 2px 2px 0 0 #ffe082, 3px 3px 0 0 #000 !important; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.retro #wb-attack:active:not(:disabled), body.retro #wb-catch:active:not(:disabled), body.retro #wb-run:active:not(:disabled), body.retro #wb-escape:active:not(:disabled) { transform: translate(3px, 3px) !important; box-shadow: 0 0 0 0 #000 !important; } /* ── 11.9 SolOrbs section ────────────────────────────────── */ body.retro #wb-items { background: var(--rp-cream-hi) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 2px 2px 0 0 #000 !important; padding: 8px 10px !important; } body.retro #wb-items > div:first-child { /* "🎒 SolOrbs" label */ font-family: var(--rp-font-pixel) !important; font-size: 10px !important; color: var(--rp-ink) !important; text-shadow: none !important; letter-spacing: 1px !important; } body.retro #wb-items-list .wb-ball { background: var(--rp-cream) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 var(--rp-cream-hi), 2px 2px 0 0 #000 !important; padding: 6px 10px !important; transition: transform .05s, box-shadow .05s !important; } body.retro #wb-items-list .wb-ball:hover { background: var(--rp-yellow) !important; } body.retro #wb-items-list .wb-ball:active { transform: translate(2px, 2px) !important; box-shadow: inset -1px -1px 0 0 var(--rp-cream-dark), inset 1px 1px 0 0 var(--rp-cream-hi), 0 0 0 0 #000 !important; } /* Selected pokeball — clearly visible without hover. Uses a yellow fill + thick red border + chunky red drop-shadow so the player can always tell which ball is armed. */ body.retro #wb-items-list .wb-ball.is-selected { background: var(--rp-yellow) !important; border: 3px solid var(--rp-red) !important; box-shadow: inset -2px -2px 0 0 var(--rp-yellow-dark), inset 2px 2px 0 0 var(--rp-cream-hi), 3px 3px 0 0 var(--rp-red-dark), 0 0 0 1px var(--rp-ink) !important; transform: translate(-1px, -1px) !important; } body.retro #wb-items-list .wb-ball.is-selected span, body.retro #wb-items-list .wb-ball.is-selected span span { color: var(--rp-ink) !important; } body.retro #wb-items-list .wb-ball span { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 14px !important; font-weight: 700 !important; text-shadow: none !important; } body.retro #wb-items-list .wb-ball span span { /* The quantity number */ color: var(--rp-blue-dark) !important; font-size: 15px !important; } body.retro #wb-items-list .wb-ball img { image-rendering: pixelated !important; } /* ============================================================ 12. MODAL MOBILE TWEAKS (≤767px) ============================================================ */ @media (max-width: 767px) { /* Slightly smaller pixel title on mobile */ body.retro .ds-modal-title { font-size: 11px !important; letter-spacing: 0.5px !important; } body.retro .ds-modal-header .ds-body--small { font-size: 13px !important; } body.retro .ds-modal-body .ds-h3, body.retro .ds-modal-body .ds-h4 { font-size: 10px !important; } body.retro .ds-modal-card .ds-btn, body.retro #wild-battle-modal .ds-btn { font-size: 9px !important; padding: 8px 10px !important; } /* Modal card fills more of the screen */ body.retro .ds-modal-card { max-width: 100% !important; max-height: 100dvh !important; height: 100dvh !important; border-radius: 0 !important; border-width: 0 !important; box-shadow: none !important; } /* Wild battle modal — tighter chips */ body.retro #wb-attack, body.retro #wb-catch, body.retro #wb-run, body.retro #wb-escape { font-size: 9px !important; padding: 9px 4px !important; letter-spacing: 0.5px !important; } body.retro #wb-player-moves .player-move > span:first-child { font-size: 16px !important; } body.retro #wb-player-moves .player-move > span:nth-child(2) { font-size: 6px !important; } body.retro #wb-player-moves .player-move .pp-count { font-size: 12px !important; } body.retro #wb-stat-row span { font-size: 12px !important; padding: 2px 5px !important; } body.retro #wb-log { font-size: 14px !important; } body.retro #wb-items-list .wb-ball span { font-size: 12px !important; } } /* ============================================================ 13. PvP BATTLES MODAL (#pvp-modal) ---------------------------------------------------------------- The original modal uses a blue gradient panel with rounded "tabs" + green refresh button. Replace the chrome with a cream chunky panel + ink header band + pixel chip tabs/buttons. Scoped to body.retro so toggling out of retro restores the blue. ============================================================ */ /* ── 13.1 Backdrop: clean transparent overlay ─────────────── */ body.retro #pvp-modal { background: rgba(0, 0, 0, 0.02) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── 13.2 Outer card: cream pixel chunky panel ────────────── */ body.retro #pvp-modal > div { background: var(--rp-cream) !important; border: 4px solid var(--rp-ink) !important; border-radius: 4px !important; box-shadow: inset -3px -3px 0 0 var(--rp-cream-dark), inset 3px 3px 0 0 var(--rp-cream-hi), 4px 4px 0 0 #000 !important; color: var(--rp-ink) !important; padding: 0 !important; overflow: hidden !important; } /* ── 13.3 Header band: ink with pixel title ───────────────── */ body.retro #pvp-modal > div > div:first-child { background: linear-gradient(180deg, var(--rp-ink-soft) 0%, var(--rp-ink) 100%) !important; border-bottom: 3px solid var(--rp-ink) !important; box-shadow: inset 0 -2px 0 0 #000 !important; padding: 10px 14px !important; margin: 0 !important; } body.retro #pvp-modal h2 { font-family: var(--rp-font-pixel) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 1px !important; color: var(--rp-yellow) !important; text-shadow: 2px 2px 0 #000 !important; text-transform: uppercase !important; line-height: 1.2 !important; margin: 0 !important; } /* Close (X) button — pixel red chip */ body.retro #pvp-close-btn { font-family: var(--rp-font-pixel) !important; font-size: 14px !important; background: var(--rp-red) !important; color: #fff !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; width: 32px !important; height: 32px !important; padding: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-red-dark), inset 2px 2px 0 0 #ff7a85, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-red-dark) !important; } body.retro #pvp-close-btn:hover { background: #ff5564 !important; } body.retro #pvp-close-btn:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* ── 13.4 Tabs row + chip-styled tab buttons ──────────────── */ body.retro #pvp-modal .pvp-tabs-row { background: var(--rp-cream) !important; border-bottom: 3px solid var(--rp-ink) !important; padding: 12px 14px 0 !important; margin: 0 !important; gap: 8px !important; } body.retro #pvp-modal .pvp-tab-btn { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: var(--rp-cream) !important; color: var(--rp-ink) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 8px 12px !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 var(--rp-cream-hi), 2px 2px 0 0 var(--rp-ink) !important; text-shadow: none !important; transition: transform .05s, box-shadow .05s !important; cursor: pointer !important; } body.retro #pvp-modal .pvp-tab-btn:hover { background: var(--rp-yellow) !important; } body.retro #pvp-modal .pvp-tab-btn.active { background: var(--rp-yellow) !important; color: var(--rp-ink) !important; box-shadow: inset -2px -2px 0 0 var(--rp-yellow-dark), inset 2px 2px 0 0 #ffe082, 2px 2px 0 0 var(--rp-ink) !important; } /* ── 13.5 Tab content area: cream surface ────────────────── */ body.retro #pvp-rooms-tab, body.retro #pvp-create-tab { background: var(--rp-cream) !important; color: var(--rp-ink) !important; padding: 14px !important; } /* Empty state / "No available rooms" / status text */ body.retro #pvp-rooms-list > div, body.retro #pvp-rooms-list p { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; } /* Room card overrides — they're inline-styled with rgba(255,255,255,0.1) */ body.retro #pvp-rooms-list > div[style*="rgba(255,255,255"], body.retro #pvp-rooms-list > div[style*="rgba(76, 175"] { background: var(--rp-cream-hi) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 2px 2px 0 0 #000 !important; } body.retro #pvp-rooms-list h4 { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; color: var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } body.retro #pvp-rooms-list span { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 14px !important; } /* "Waiting..." status badge */ body.retro #pvp-rooms-list span[style*="rgba(76, 175"] { background: var(--rp-yellow) !important; color: var(--rp-ink) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; font-family: var(--rp-font-pixel) !important; font-size: 9px !important; text-transform: uppercase !important; box-shadow: 2px 2px 0 0 #000 !important; } /* ── 13.6 Refresh Rooms button — green pixel chunky ───────── */ body.retro #pvp-refresh-rooms { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: var(--rp-green) !important; color: var(--rp-ink) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 10px 14px !important; box-shadow: inset -2px -2px 0 0 var(--rp-green-dark), inset 2px 2px 0 0 #b6f5c8, 3px 3px 0 0 #000 !important; text-shadow: 1px 1px 0 #b6f5c8 !important; transition: transform .05s, box-shadow .05s !important; } body.retro #pvp-refresh-rooms:hover { background: #6deb9a !important; } body.retro #pvp-refresh-rooms:active { transform: translate(3px, 3px) !important; box-shadow: 0 0 0 0 #000 !important; } /* ── 13.7 Create Room button + Join Battle buttons ────────── */ body.retro #pvp-create-room-btn { font-family: var(--rp-font-pixel) !important; font-size: 11px !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: var(--rp-blue) !important; color: #fff !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 12px 14px !important; box-shadow: inset -2px -2px 0 0 var(--rp-blue-dark), inset 2px 2px 0 0 #6a8aff, 3px 3px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-blue-dark) !important; } body.retro #pvp-create-room-btn:active:not(:disabled) { transform: translate(3px, 3px) !important; box-shadow: 0 0 0 0 #000 !important; } body.retro #pvp-create-room-btn:disabled { opacity: 0.6 !important; } body.retro .pvp-join-btn { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: var(--rp-green) !important; color: var(--rp-ink) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 8px 14px !important; box-shadow: inset -2px -2px 0 0 var(--rp-green-dark), inset 2px 2px 0 0 #b6f5c8, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 #b6f5c8 !important; } body.retro .pvp-join-btn:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* ── 13.8 Active Solkemon panel + status panel ────────────── */ body.retro #pvp-create-room-info, body.retro #pvp-room-status { background: var(--rp-cream-hi) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 2px 2px 0 0 #000 !important; color: var(--rp-ink) !important; } body.retro #pvp-create-room-info h3, body.retro #pvp-create-room-info h4 { font-family: var(--rp-font-pixel) !important; font-size: 11px !important; color: var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; } body.retro #pvp-create-room-info p, body.retro #pvp-active-pokemon p, body.retro #pvp-room-status p { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 16px !important; } /* ============================================================ 14. TRADE / MARKETPLACE MODAL (#trade-modal) ---------------------------------------------------------------- Modal is built in JS (trade-modal.js → createModal()). It uses inline styles with a blue header gradient + beige body. We override those with retro pixel chunky chrome scoped to body.retro. The inner card is the only direct child of #trade-modal so we target it via the > div selector. ============================================================ */ /* ── 14.1 Backdrop: clean transparent overlay ─────────────── */ body.retro #trade-modal { background: rgba(0, 0, 0, 0.02) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── 14.2 Outer card: cream pixel chunky panel ────────────── */ body.retro #trade-modal > div { background: var(--rp-cream) !important; border: 4px solid var(--rp-ink) !important; border-radius: 4px !important; box-shadow: inset -3px -3px 0 0 var(--rp-cream-dark), inset 3px 3px 0 0 var(--rp-cream-hi), 4px 4px 0 0 #000 !important; color: var(--rp-ink) !important; } /* ── 14.3 Header: ink band w/ pixel title (override blue grad) ── */ body.retro #trade-modal > div > div:first-child { background: linear-gradient(180deg, var(--rp-ink-soft) 0%, var(--rp-ink) 100%) !important; border-bottom: 3px solid var(--rp-ink) !important; box-shadow: inset 0 -2px 0 0 #000 !important; color: var(--rp-cream-hi) !important; padding: 10px 14px !important; } body.retro #trade-modal > div > div:first-child h2 { font-family: var(--rp-font-pixel) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 1px !important; color: var(--rp-yellow) !important; text-shadow: 2px 2px 0 #000 !important; text-transform: uppercase !important; } /* "5% commission" pill in header */ body.retro #trade-modal > div > div:first-child > div > span { background: var(--rp-cream-hi) !important; color: var(--rp-ink) !important; border: 2px solid var(--rp-yellow) !important; border-radius: 0 !important; font-family: var(--rp-font-pixel) !important; font-size: 8px !important; letter-spacing: 0.5px !important; box-shadow: 2px 2px 0 0 #000 !important; } /* Close X button */ body.retro #trade-close { font-family: var(--rp-font-pixel) !important; font-size: 12px !important; background: var(--rp-red) !important; color: #fff !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; width: 32px !important; height: 32px !important; padding: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-red-dark), inset 2px 2px 0 0 #ff7a85, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-red-dark) !important; } body.retro #trade-close:hover { background: #ff5564 !important; } body.retro #trade-close:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* ── 14.4 Tabs row (the second top div with the trade-tab buttons) ── */ body.retro #trade-modal > div > div:nth-child(2) { background: var(--rp-cream) !important; border-bottom: 3px solid var(--rp-ink) !important; padding: 8px 8px 0 !important; gap: 6px !important; } body.retro #trade-modal .trade-tab { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; background: var(--rp-cream) !important; color: var(--rp-ink) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 8px 6px !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 var(--rp-cream-hi), 2px 2px 0 0 var(--rp-ink) !important; margin: 0 4px 6px 0 !important; border-bottom-width: 2px !important; transition: transform .05s, box-shadow .05s !important; cursor: pointer !important; } body.retro #trade-modal .trade-tab:hover { background: var(--rp-yellow) !important; } body.retro #trade-modal .trade-tab.active, body.retro #trade-modal .trade-tab[style*="rgba(74,144,226,0.1)"] { background: var(--rp-yellow) !important; color: var(--rp-ink) !important; box-shadow: inset -2px -2px 0 0 var(--rp-yellow-dark), inset 2px 2px 0 0 #ffe082, 2px 2px 0 0 var(--rp-ink) !important; } /* ── 14.5 Body / content area ────────────────────────────── */ body.retro #trade-content { background: var(--rp-cream) !important; color: var(--rp-ink) !important; box-shadow: inset 0 0 0 2px var(--rp-cream-dark) !important; padding: 14px !important; } body.retro #trade-content h3, body.retro #trade-content h4 { font-family: var(--rp-font-pixel) !important; font-size: 11px !important; color: var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; } body.retro #trade-content p, body.retro #trade-content div, body.retro #trade-content span, body.retro #trade-content label, body.retro #trade-content strong, body.retro #trade-content em { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; } /* Listing / sell / row cards (white inline-styled inner cards) */ body.retro #trade-content > div > div[style*="background:white"], body.retro #trade-content div[style*="background:white"] { background: var(--rp-cream-hi) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 2px 2px 0 0 #000 !important; color: var(--rp-ink) !important; } /* Info / warning panels — keep them readable */ body.retro #trade-content div[style*="#fff8e1"], body.retro #trade-content div[style*="#f0f7ff"], body.retro #trade-content div[style*="#f0fff4"], body.retro #trade-content div[style*="#fff3f3"], body.retro #trade-content div[style*="#f9f9f9"] { background: var(--rp-cream-hi) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; color: var(--rp-ink) !important; } /* Inputs / selects in trade body */ body.retro #trade-content input, body.retro #trade-content textarea, body.retro #trade-content select { font-family: var(--rp-font-body) !important; font-size: 16px !important; color: var(--rp-ink) !important; background: var(--rp-cream-hi) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 6px 10px !important; box-shadow: inset 1px 1px 0 0 var(--rp-cream-dark) !important; } /* Buttons inside trade body — pixel chunky */ body.retro #trade-content button { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; border-radius: 0 !important; border: 2px solid var(--rp-ink) !important; padding: 8px 12px !important; transition: transform .05s, box-shadow .05s !important; } body.retro #trade-content button:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* Buy Now / List for Sale (green-ish) */ body.retro #trade-content button[style*="#27ae60"], body.retro #trade-content button[style*="#229954"] { background: var(--rp-green) !important; color: var(--rp-ink) !important; box-shadow: inset -2px -2px 0 0 var(--rp-green-dark), inset 2px 2px 0 0 #b6f5c8, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 #b6f5c8 !important; } /* Blue submit buttons (Find / List / Send) */ body.retro #trade-content button[style*="#4a90e2"], body.retro #trade-content button[style*="#357abd"] { background: var(--rp-blue) !important; color: #fff !important; box-shadow: inset -2px -2px 0 0 var(--rp-blue-dark), inset 2px 2px 0 0 #6a8aff, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-blue-dark) !important; } /* Cancel / Decline (red) */ body.retro #trade-content button[style*="#e74c3c"] { background: var(--rp-red) !important; color: #fff !important; box-shadow: inset -2px -2px 0 0 var(--rp-red-dark), inset 2px 2px 0 0 #ff7a85, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-red-dark) !important; } /* hr separators in swap tab */ body.retro #trade-content hr { border: none !important; border-top: 2px dashed var(--rp-ink) !important; margin: 16px 0 !important; } /* Status badges (active/sold/cancelled/pending) */ body.retro #trade-content > div > div span[style*="border-radius:20px"] { border-radius: 0 !important; border: 2px solid var(--rp-ink) !important; font-family: var(--rp-font-pixel) !important; font-size: 8px !important; background: var(--rp-cream) !important; color: var(--rp-ink) !important; box-shadow: 1px 1px 0 0 #000 !important; } /* ── 14.6 Trade modal showConfirm sub-dialog ─────────────── */ /* Created via document.body.appendChild(overlay) — overlays are inline-styled, so we target by structure. We can't target by id (the overlay has no stable id), but it's the LAST child overlay with z-index:999999. Use a high-specificity descendant rule. */ body.retro div[style*="z-index:999999"][style*="display:flex"] > div { background: var(--rp-cream) !important; border: 4px solid var(--rp-ink) !important; border-radius: 4px !important; box-shadow: inset -3px -3px 0 0 var(--rp-cream-dark), inset 3px 3px 0 0 var(--rp-cream-hi), 4px 4px 0 0 #000 !important; color: var(--rp-ink) !important; overflow: hidden !important; } /* Sub-dialog header band */ body.retro div[style*="z-index:999999"] > div > div:first-child { background: linear-gradient(180deg, var(--rp-ink-soft) 0%, var(--rp-ink) 100%) !important; border-bottom: 3px solid var(--rp-ink) !important; color: var(--rp-cream-hi) !important; padding: 10px 14px !important; } body.retro div[style*="z-index:999999"] > div > div:first-child h3 { font-family: var(--rp-font-pixel) !important; font-size: 12px !important; color: var(--rp-yellow) !important; text-shadow: 2px 2px 0 #000 !important; text-transform: uppercase !important; letter-spacing: 1px !important; } body.retro div[style*="z-index:999999"] > div > div:nth-child(2) { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 16px !important; } body.retro div[style*="z-index:999999"] #td-cancel, body.retro div[style*="z-index:999999"] #td-confirm { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; border-radius: 0 !important; border: 2px solid var(--rp-ink) !important; padding: 9px 14px !important; transition: transform .05s, box-shadow .05s !important; } body.retro div[style*="z-index:999999"] #td-cancel { background: var(--rp-cream) !important; color: var(--rp-ink) !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 var(--rp-cream-hi), 2px 2px 0 0 #000 !important; } body.retro div[style*="z-index:999999"] #td-confirm { background: var(--rp-blue) !important; color: #fff !important; box-shadow: inset -2px -2px 0 0 var(--rp-blue-dark), inset 2px 2px 0 0 #6a8aff, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-blue-dark) !important; } body.retro div[style*="z-index:999999"] #td-cancel:active, body.retro div[style*="z-index:999999"] #td-confirm:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* ============================================================ 15. AUCTION MODAL (#auction-modal) ---------------------------------------------------------------- Built in JS (auction.js → buildModal()). Original uses dark navy gradient + indigo accents. Override with retro cream. ============================================================ */ /* ── 15.1 Backdrop: clean transparent overlay ─────────────── */ body.retro #auction-modal { background: rgba(0, 0, 0, 0.02) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── 15.2 Outer card: cream pixel chunky panel ────────────── */ body.retro #auction-modal > div { background: var(--rp-cream) !important; border: 4px solid var(--rp-ink) !important; border-radius: 4px !important; box-shadow: inset -3px -3px 0 0 var(--rp-cream-dark), inset 3px 3px 0 0 var(--rp-cream-hi), 4px 4px 0 0 #000 !important; color: var(--rp-ink) !important; } /* ── 15.3 Header (first child div with the title row) ─────── */ body.retro #auction-modal > div > div:first-child { background: linear-gradient(180deg, var(--rp-ink-soft) 0%, var(--rp-ink) 100%) !important; border-bottom: 3px solid var(--rp-ink) !important; box-shadow: inset 0 -2px 0 0 #000 !important; padding: 10px 14px !important; } /* Title text "🏷️ Solkemon Auction" */ body.retro #auction-modal > div > div:first-child > div > div:first-child { font-family: var(--rp-font-pixel) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 1px !important; color: var(--rp-yellow) !important; text-shadow: 2px 2px 0 #000 !important; text-transform: uppercase !important; } /* Subtitle "Buy & sell..." */ body.retro #auction-modal > div > div:first-child > div > div:nth-child(2) { font-family: var(--rp-font-body) !important; font-size: 14px !important; color: var(--rp-cream-hi) !important; opacity: 0.85 !important; } /* Close X button (inline-styled) */ body.retro #auction-modal > div > div:first-child button { font-family: var(--rp-font-pixel) !important; font-size: 12px !important; background: var(--rp-red) !important; color: #fff !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; width: 32px !important; height: 32px !important; box-shadow: inset -2px -2px 0 0 var(--rp-red-dark), inset 2px 2px 0 0 #ff7a85, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-red-dark) !important; } body.retro #auction-modal > div > div:first-child button:hover { background: #ff5564 !important; color: #fff !important; } body.retro #auction-modal > div > div:first-child button:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* ── 15.4 Tabs (second child div with the 3 tab buttons) ──── */ body.retro #auction-modal > div > div:nth-child(2) { background: var(--rp-cream) !important; border-bottom: 3px solid var(--rp-ink) !important; padding: 12px 14px !important; gap: 8px !important; } body.retro #auction-modal [id^="auction-tab-"] { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; background: var(--rp-cream) !important; color: var(--rp-ink) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 8px !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 var(--rp-cream-hi), 2px 2px 0 0 var(--rp-ink) !important; transition: transform .05s, box-shadow .05s !important; } body.retro #auction-modal [id^="auction-tab-"]:hover { background: var(--rp-yellow) !important; } /* JS sets background:rgba(99,102,241,0.3) on active tab — match by attr */ body.retro #auction-modal [id^="auction-tab-"][style*="rgba(99,102,241,0.3)"] { background: var(--rp-yellow) !important; color: var(--rp-ink) !important; border-color: var(--rp-ink) !important; box-shadow: inset -2px -2px 0 0 var(--rp-yellow-dark), inset 2px 2px 0 0 #ffe082, 2px 2px 0 0 var(--rp-ink) !important; } /* ── 15.5 Body / content (#auction-body) ─────────────────── */ body.retro #auction-body { background: var(--rp-cream) !important; color: var(--rp-ink) !important; box-shadow: inset 0 0 0 2px var(--rp-cream-dark) !important; padding: 14px !important; } body.retro #auction-body * { color: var(--rp-ink) !important; } body.retro #auction-body label { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; color: var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } /* Auction listing cards (rgba dark cards) */ body.retro #auction-body > div[style*="rgba(255,255,255,0.05)"] { background: var(--rp-cream-hi) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 2px 2px 0 0 #000 !important; } /* Solkemon picker tiles (sell tab) */ body.retro #auction-poke-grid > div { background: var(--rp-cream-hi) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -1px -1px 0 0 var(--rp-cream-dark), inset 1px 1px 0 0 #fff, 2px 2px 0 0 #000 !important; } body.retro #auction-poke-grid > div.selected, body.retro #auction-poke-grid > div[style*="border-color: rgb(99, 102, 241)"] { background: var(--rp-yellow) !important; border-color: var(--rp-red) !important; box-shadow: inset -1px -1px 0 0 var(--rp-yellow-dark), inset 1px 1px 0 0 #ffe082, 3px 3px 0 0 var(--rp-red-dark) !important; } /* Inputs / selects */ body.retro #auction-body input, body.retro #auction-body select { font-family: var(--rp-font-body) !important; font-size: 16px !important; color: var(--rp-ink) !important; background: var(--rp-cream-hi) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 6px 10px !important; box-shadow: inset 1px 1px 0 0 var(--rp-cream-dark) !important; } /* Buttons in auction body — pixel chunky */ body.retro #auction-body button { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; border-radius: 0 !important; border: 2px solid var(--rp-ink) !important; padding: 8px 14px !important; transition: transform .05s, box-shadow .05s !important; } /* "Place Bid" / "List for Auction" — purple/blue gradient → blue chip */ body.retro #auction-body button[style*="#6366f1"], body.retro #auction-body button[style*="#a855f7"] { background: var(--rp-blue) !important; color: #fff !important; box-shadow: inset -2px -2px 0 0 var(--rp-blue-dark), inset 2px 2px 0 0 #6a8aff, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-blue-dark) !important; } /* Cancel buttons (red-ish) */ body.retro #auction-body button[style*="rgba(239,68,68"] { background: var(--rp-red) !important; color: #fff !important; box-shadow: inset -2px -2px 0 0 var(--rp-red-dark), inset 2px 2px 0 0 #ff7a85, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-red-dark) !important; } body.retro #auction-body button:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* Status / level / bidder pill spans */ body.retro #auction-body span[style*="border-radius:6px"], body.retro #auction-body span[style*="border-radius:8px"] { border-radius: 0 !important; border: 2px solid var(--rp-ink) !important; font-family: var(--rp-font-pixel) !important; font-size: 8px !important; background: var(--rp-cream) !important; color: var(--rp-ink) !important; padding: 3px 6px !important; } /* Empty-state icons + text */ body.retro #auction-body > div[style*="text-align:center"] { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 16px !important; } /* ── 15.6 Bid sub-modal (#auction-bid-modal) ─────────────── */ body.retro #auction-bid-modal { background: rgba(0, 0, 0, 0.02) !important; } body.retro #auction-bid-modal > div { background: var(--rp-cream) !important; border: 4px solid var(--rp-ink) !important; border-radius: 4px !important; box-shadow: inset -3px -3px 0 0 var(--rp-cream-dark), inset 3px 3px 0 0 var(--rp-cream-hi), 4px 4px 0 0 #000 !important; color: var(--rp-ink) !important; } body.retro #auction-bid-modal * { color: var(--rp-ink) !important; } body.retro #auction-bid-modal #bid-input { font-family: var(--rp-font-body) !important; font-size: 17px !important; color: var(--rp-ink) !important; background: var(--rp-cream-hi) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; } body.retro #auction-bid-modal button { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; border-radius: 0 !important; border: 2px solid var(--rp-ink) !important; padding: 10px !important; } body.retro #auction-bid-modal #bid-confirm-btn { background: var(--rp-blue) !important; color: #fff !important; box-shadow: inset -2px -2px 0 0 var(--rp-blue-dark), inset 2px 2px 0 0 #6a8aff, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-blue-dark) !important; } /* ============================================================ 16. PVP / TRADE / AUCTION — MOBILE TWEAKS ============================================================ */ @media (max-width: 767px) { body.retro #pvp-modal h2, body.retro #trade-modal > div > div:first-child h2, body.retro #auction-modal > div > div:first-child > div > div:first-child { font-size: 11px !important; letter-spacing: 0.5px !important; } body.retro #pvp-modal .pvp-tab-btn, body.retro #trade-modal .trade-tab, body.retro #auction-modal [id^="auction-tab-"] { font-size: 8px !important; padding: 7px 6px !important; } body.retro #pvp-refresh-rooms, body.retro #pvp-create-room-btn { font-size: 9px !important; padding: 9px 10px !important; } } /* ============================================================ 16. SHOWCONFIRM SUB-DIALOG (.td-confirm-overlay) ---------------------------------------------------------------- Class-based override (more reliable than attribute selectors). Used for: List for Sale, Trade Offer, Auction Bid confirms. ============================================================ */ body.retro .td-confirm-overlay { background: rgba(0, 0, 0, 0.45) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.retro .td-confirm-overlay .td-confirm-card { background: var(--rp-cream) !important; border: 4px solid var(--rp-ink) !important; border-radius: 4px !important; box-shadow: inset -3px -3px 0 0 var(--rp-cream-dark), inset 3px 3px 0 0 var(--rp-cream-hi), 4px 4px 0 0 #000 !important; color: var(--rp-ink) !important; overflow: hidden !important; } body.retro .td-confirm-overlay .td-confirm-header { background: linear-gradient(180deg, var(--rp-ink-soft) 0%, var(--rp-ink) 100%) !important; border-bottom: 3px solid var(--rp-ink) !important; color: var(--rp-cream-hi) !important; padding: 12px 16px !important; } body.retro .td-confirm-overlay .td-confirm-header h3 { font-family: var(--rp-font-pixel) !important; font-size: 12px !important; font-weight: 400 !important; color: var(--rp-yellow) !important; text-shadow: 2px 2px 0 #000 !important; text-transform: uppercase !important; letter-spacing: 1px !important; } body.retro .td-confirm-overlay .td-confirm-body { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 16px !important; padding: 16px 18px !important; } /* Inner price/info card — neutral cream, not green-tinted */ body.retro .td-confirm-overlay .td-confirm-body > div[style*="background:#f0fff4"], body.retro .td-confirm-overlay .td-confirm-body > div[style*="background: #f0fff4"] { background: var(--rp-cream-hi) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), 2px 2px 0 0 #000 !important; padding: 12px !important; } body.retro .td-confirm-overlay .td-confirm-body span, body.retro .td-confirm-overlay .td-confirm-body strong, body.retro .td-confirm-overlay .td-confirm-body p { font-family: var(--rp-font-body) !important; color: var(--rp-ink) !important; } body.retro .td-confirm-overlay .td-confirm-body span[style*="color:#27ae60"], body.retro .td-confirm-overlay .td-confirm-body div[style*="color:#27ae60"] { color: var(--rp-green-dark, #2c7a3d) !important; font-weight: 700 !important; } body.retro .td-confirm-overlay .td-confirm-body span[style*="color:#e74c3c"] { color: var(--rp-red) !important; font-weight: 700 !important; } body.retro .td-confirm-overlay .td-confirm-actions { background: var(--rp-cream) !important; padding: 12px 16px !important; border-top: 2px dashed var(--rp-ink) !important; } body.retro .td-confirm-overlay #td-cancel, body.retro .td-confirm-overlay #td-confirm { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; border-radius: 0 !important; border: 2px solid var(--rp-ink) !important; padding: 9px 14px !important; transition: transform .05s, box-shadow .05s !important; } body.retro .td-confirm-overlay #td-cancel { background: var(--rp-cream) !important; color: var(--rp-ink) !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 var(--rp-cream-hi), 2px 2px 0 0 #000 !important; } body.retro .td-confirm-overlay #td-confirm { background: var(--rp-blue) !important; color: #fff !important; box-shadow: inset -2px -2px 0 0 var(--rp-blue-dark), inset 2px 2px 0 0 #6a8aff, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-blue-dark) !important; } body.retro .td-confirm-overlay #td-cancel:active, body.retro .td-confirm-overlay #td-confirm:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* ============================================================ 17. TRADE USERNAME AUTOCOMPLETE (#swap-username-dropdown) ============================================================ */ body.retro #swap-username-dropdown { background: var(--rp-cream) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 var(--rp-cream-hi), 3px 3px 0 0 #000 !important; padding: 2px !important; } body.retro #swap-username-dropdown .swap-suggestion-item { font-family: var(--rp-font-body) !important; font-size: 14px !important; color: var(--rp-ink) !important; border-bottom: 1px dashed var(--rp-ink-soft) !important; padding: 9px 10px !important; background: var(--rp-cream) !important; } body.retro #swap-username-dropdown .swap-suggestion-item:hover { background: var(--rp-yellow) !important; color: var(--rp-ink) !important; } body.retro #swap-username-dropdown .swap-suggestion-item:last-child { border-bottom: none !important; } /* ============================================================ 18. RAID BOSS MODAL (#raid-overlay / #raid-modal) ============================================================ */ body.retro #raid-overlay { background: rgba(0, 0, 0, 0.5) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.retro #raid-modal { background: var(--rp-cream) !important; border: 4px solid var(--rp-ink) !important; border-radius: 4px !important; box-shadow: inset -3px -3px 0 0 var(--rp-cream-dark), inset 3px 3px 0 0 var(--rp-cream-hi), 4px 4px 0 0 #000 !important; color: var(--rp-ink) !important; } /* Header section — first child of modal */ body.retro #raid-modal > div:first-child { background: linear-gradient(180deg, var(--rp-ink-soft) 0%, var(--rp-ink) 100%) !important; border-bottom: 3px solid var(--rp-ink) !important; box-shadow: inset 0 -2px 0 0 #000 !important; } /* All text inside header (except close button) goes light cream */ body.retro #raid-modal > div:first-child div { color: var(--rp-cream-hi) !important; } /* "World Raid Boss" tagline — yellow pixel */ body.retro #raid-modal > div:first-child div[style*="color:#f87171"] { font-family: var(--rp-font-pixel) !important; color: var(--rp-yellow) !important; text-shadow: 1px 1px 0 #000 !important; font-size: 9px !important; letter-spacing: 1px !important; } /* Boss name big title */ body.retro #raid-modal > div:first-child div[style*="font-size:22px"] { font-family: var(--rp-font-pixel) !important; font-size: 16px !important; font-weight: 400 !important; color: var(--rp-yellow) !important; text-shadow: 2px 2px 0 #000 !important; text-transform: uppercase !important; letter-spacing: 1px !important; } /* Lvl + attackers subline */ body.retro #raid-modal > div:first-child div[style*="font-size:11px"] { font-family: var(--rp-font-body) !important; font-size: 14px !important; color: var(--rp-cream-hi) !important; opacity: 0.85 !important; } /* HP labels */ body.retro #raid-modal > div:first-child div[style*="font-size:11px"][style*="color:#475569"] { font-family: var(--rp-font-body) !important; font-size: 13px !important; color: var(--rp-cream-hi) !important; opacity: 0.9 !important; } /* HP value text inside header */ body.retro #raid-modal > div:first-child span[style*="color:#f87171"] { color: var(--rp-yellow) !important; font-weight: 700 !important; } /* HP wrap */ body.retro #raid-modal .raid-hp-wrap { background: var(--rp-ink) !important; border: 2px solid var(--rp-cream-hi) !important; border-radius: 0 !important; height: 18px !important; } body.retro #raid-modal .raid-hp-fill { background: var(--rp-red) !important; border-radius: 0 !important; box-shadow: inset 0 -2px 0 0 var(--rp-red-dark), inset 0 2px 0 0 #ff7a85 !important; } body.retro #raid-modal .raid-hp-text { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; color: var(--rp-cream-hi) !important; text-shadow: 1px 1px 0 #000 !important; } /* Close button (×) */ body.retro #raid-modal .raid-close-btn { background: var(--rp-red) !important; color: #fff !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; width: 32px !important; height: 32px !important; font-family: var(--rp-font-pixel) !important; font-size: 11px !important; box-shadow: inset -2px -2px 0 0 var(--rp-red-dark), inset 2px 2px 0 0 #ff7a85, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-red-dark) !important; } body.retro #raid-modal .raid-close-btn:hover { background: #ff5564 !important; } body.retro #raid-modal .raid-close-btn:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* Attack & Claim buttons */ body.retro #raid-modal #raid-attack-btn { background: var(--rp-red) !important; color: #fff !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; font-family: var(--rp-font-pixel) !important; font-size: 12px !important; letter-spacing: 1px !important; padding: 12px !important; box-shadow: inset -3px -3px 0 0 var(--rp-red-dark), inset 3px 3px 0 0 #ff7a85, 3px 3px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-red-dark) !important; transition: transform .05s, box-shadow .05s !important; } body.retro #raid-modal #raid-attack-btn:active:not(:disabled) { transform: translate(3px, 3px) !important; box-shadow: 0 0 0 0 #000 !important; } body.retro #raid-modal #raid-claim-btn { background: var(--rp-yellow) !important; color: var(--rp-ink) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; font-family: var(--rp-font-pixel) !important; font-size: 12px !important; letter-spacing: 1px !important; padding: 12px !important; box-shadow: inset -3px -3px 0 0 var(--rp-yellow-dark), inset 3px 3px 0 0 #ffe88c, 3px 3px 0 0 #000 !important; } body.retro #raid-modal #raid-claim-btn:active:not(:disabled) { transform: translate(3px, 3px) !important; box-shadow: 0 0 0 0 #000 !important; } /* Body sections (rewards / top attackers / log) — content wrappers */ body.retro #raid-modal > div:not(:first-child) { color: var(--rp-ink) !important; } /* Section headings (uppercase letterspaced) */ body.retro #raid-modal div[style*="text-transform:uppercase"][style*="letter-spacing"] { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; color: var(--rp-ink) !important; letter-spacing: 1px !important; } /* Rewards info card */ body.retro #raid-modal div[style*="background:rgba(245,158,11,0.07)"] { background: var(--rp-cream-hi) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), 2px 2px 0 0 #000 !important; padding: 10px 12px !important; margin: 10px 14px !important; } body.retro #raid-modal div[style*="background:rgba(245,158,11,0.07)"] div[style*="color:#94a3b8"], body.retro #raid-modal div[style*="background:rgba(245,158,11,0.07)"] div[style*="color:#475569"] { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 13px !important; } body.retro #raid-modal div[style*="background:rgba(245,158,11,0.07)"] div[style*="color:#e2e8f0"], body.retro #raid-modal div[style*="background:rgba(245,158,11,0.07)"] div[style*="color:#a855f7"] { color: var(--rp-blue) !important; font-family: var(--rp-font-body) !important; font-size: 13px !important; font-weight: 700 !important; } /* Battle log + top attackers items */ body.retro #raid-modal .raid-log-item { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 13px !important; border-bottom: 1px dashed var(--rp-ink-soft) !important; } body.retro #raid-modal .raid-log-item .dmg { color: var(--rp-red) !important; font-weight: 700 !important; } body.retro #raid-modal .raid-log-item span[style*="color:#334155"], body.retro #raid-modal .raid-log-item span[style*="color:#7c3aed"] { color: var(--rp-ink-soft) !important; } body.retro #raid-modal #raid-top-attackers > div { border-bottom: 1px dashed var(--rp-ink-soft) !important; color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 13px !important; } body.retro #raid-modal #raid-top-attackers span[style*="color:#e2e8f0"] { color: var(--rp-ink) !important; } body.retro #raid-modal #raid-top-attackers span[style*="color:#f87171"] { color: var(--rp-red) !important; } body.retro #raid-modal #raid-respawn-countdown { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 14px !important; font-weight: 700 !important; } /* Empty-state placeholders inside raid modal */ body.retro #raid-modal div[style*="color:#1e293b"] { color: var(--rp-ink-soft) !important; font-family: var(--rp-font-body) !important; } /* ============================================================ 19. RAID WIDGET — make sure it doesn't overflow viewport ============================================================ */ body.retro #raid-widget { max-width: calc(100vw - 28px) !important; box-sizing: border-box !important; overflow: hidden !important; } /* ============================================================ 20. RAID RESULT MODAL (#raid-result-overlay) "Bonus Pokemon you got" reward popup ============================================================ */ body.retro #raid-result-overlay { background: rgba(0, 0, 0, 0.5) !important; } body.retro #raid-result-overlay > div { background: var(--rp-cream) !important; border: 4px solid var(--rp-ink) !important; border-radius: 4px !important; box-shadow: inset -3px -3px 0 0 var(--rp-cream-dark), inset 3px 3px 0 0 var(--rp-cream-hi), 4px 4px 0 0 #000 !important; color: var(--rp-ink) !important; } /* "TOP DAMAGER!" / "Raid Complete!" title */ body.retro #raid-result-overlay > div > div[style*="font-size:20px"] { font-family: var(--rp-font-pixel) !important; font-size: 14px !important; color: var(--rp-yellow-dark) !important; text-shadow: 1px 1px 0 var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 1px !important; } body.retro #raid-result-overlay > div > div[style*="font-size:18px"] { font-family: var(--rp-font-pixel) !important; font-size: 13px !important; color: var(--rp-red) !important; text-shadow: 1px 1px 0 var(--rp-ink) !important; } body.retro #raid-result-overlay > div > div[style*="font-size:12px"] { font-family: var(--rp-font-body) !important; font-size: 13px !important; color: var(--rp-ink-soft) !important; } /* XP / Pokemon info chips */ body.retro #raid-result-overlay div[style*="border-radius:12px"] { background: var(--rp-cream-hi) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), 2px 2px 0 0 #000 !important; padding: 10px 12px !important; } body.retro #raid-result-overlay div[style*="border-radius:12px"] > div[style*="color:#64748b"] { color: var(--rp-ink) !important; font-family: var(--rp-font-pixel) !important; font-size: 8px !important; letter-spacing: 1px !important; margin-bottom: 4px !important; } body.retro #raid-result-overlay div[style*="border-radius:12px"] > div[style*="color:#fbbf24"] { color: var(--rp-yellow-dark) !important; font-family: var(--rp-font-pixel) !important; font-size: 14px !important; text-shadow: 1px 1px 0 var(--rp-ink) !important; } /* Bonus Pokemon card */ body.retro #raid-result-overlay div[style*="border-radius:16px"] { background: var(--rp-cream-hi) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 3px 3px 0 0 #000 !important; padding: 12px !important; } body.retro #raid-result-overlay div[style*="border-radius:16px"] > div[style*="font-size:16px"] { font-family: var(--rp-font-pixel) !important; font-size: 12px !important; color: var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 1px !important; } body.retro #raid-result-overlay div[style*="border-radius:16px"] > div[style*="font-size:12px"] { font-family: var(--rp-font-body) !important; font-size: 13px !important; color: var(--rp-ink-soft) !important; } /* Awesome! / Close button */ body.retro #raid-result-overlay > div > button { background: var(--rp-blue) !important; color: #fff !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; font-family: var(--rp-font-pixel) !important; font-size: 12px !important; letter-spacing: 1px !important; padding: 12px !important; box-shadow: inset -3px -3px 0 0 var(--rp-blue-dark), inset 3px 3px 0 0 #6a8aff, 3px 3px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-blue-dark) !important; } body.retro #raid-result-overlay > div > button:active { transform: translate(3px, 3px) !important; box-shadow: 0 0 0 0 #000 !important; } /* ============================================================ 21. EVOLUTION INCUBATORS MODAL (#incubators-modal) ---------------------------------------------------------------- Original modal is a green gradient panel with 6 slot cards, "Start Evolution" buttons, balance line, and a "How it works" collapsible. We override the chrome with cream chunky pixel panels and pixel buttons, scoped to body.retro. ============================================================ */ /* ── 21.1 Backdrop ─────────────────────────────────────────── */ /* Match the other gameplay modals: no dark dim, no blur. The earlier rgba(0,0,0,0.5) backdrop made the incubator screen feel different from Shop / PvP / Trade which all sit on a transparent overlay. */ body.retro #incubators-modal { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── 21.2 Outer card: cream chunky panel ──────────────────── */ body.retro #incubators-modal > div { background: var(--rp-cream) !important; border: 4px solid var(--rp-ink) !important; border-radius: 4px !important; box-shadow: inset -3px -3px 0 0 var(--rp-cream-dark), inset 3px 3px 0 0 var(--rp-cream-hi), 4px 4px 0 0 #000 !important; color: var(--rp-ink) !important; padding: 0 !important; overflow: hidden !important; } /* Inner scroll wrapper padding */ body.retro #incubators-modal > div > div { padding-left: 14px !important; padding-right: 14px !important; } /* ── 21.3 Header band ──────────────────────────────────────── */ body.retro #incubators-modal > div > div:first-child { background: linear-gradient(180deg, var(--rp-ink-soft) 0%, var(--rp-ink) 100%) !important; border-bottom: 3px solid var(--rp-ink) !important; box-shadow: inset 0 -2px 0 0 #000 !important; padding: 12px 14px !important; margin: 0 !important; } body.retro #incubators-modal h2 { font-family: var(--rp-font-pixel) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 1px !important; color: var(--rp-yellow) !important; text-shadow: 2px 2px 0 #000 !important; text-transform: uppercase !important; line-height: 1.2 !important; margin: 0 !important; } body.retro #incubator-token-balance { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; color: var(--rp-cream) !important; letter-spacing: 0.5px !important; text-shadow: 1px 1px 0 #000 !important; margin-top: 6px !important; } body.retro #incubator-balance-amount { color: var(--rp-yellow) !important; } /* Close X button — red pixel */ body.retro #incubators-close-btn { font-family: var(--rp-font-pixel) !important; font-size: 14px !important; background: var(--rp-red) !important; color: #fff !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; width: 32px !important; height: 32px !important; padding: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-red-dark), inset 2px 2px 0 0 #ff7a85, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-red-dark) !important; } body.retro #incubators-close-btn:hover { background: #ff5564 !important; } body.retro #incubators-close-btn:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* ── 21.4 "How it works" info panel ───────────────────────── */ body.retro #incubators-modal > div > div > div[style*="rgba(255,255,255,0.1)"]:nth-of-type(1) { background: var(--rp-cream-hi) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 2px 2px 0 0 #000 !important; color: var(--rp-ink) !important; margin-top: 14px !important; margin-bottom: 16px !important; } body.retro #incubators-modal h3 { font-family: var(--rp-font-pixel) !important; font-size: 11px !important; color: var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; margin: 0 !important; } body.retro #incubator-info-list { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 16px !important; line-height: 1.5 !important; } body.retro #incubator-info-list li { color: var(--rp-ink) !important; } body.retro #incubators-modal .toggle-icon { color: var(--rp-ink) !important; font-family: var(--rp-font-pixel) !important; font-size: 12px !important; } /* ── 21.5 Slot cards (6 grid) ──────────────────────────────── */ body.retro #incubators-modal .incubator-slot { background: var(--rp-cream-hi) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 3px 3px 0 0 #000 !important; color: var(--rp-ink) !important; } body.retro #incubators-modal .incubator-slot > div { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; } body.retro #incubators-modal .incubator-slot > div[style*="font-weight: bold"] { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; color: var(--rp-ink) !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; } /* Empty egg placeholder box */ body.retro #incubators-modal .incubator-slot div[style*="dashed"] { background: var(--rp-cream) !important; border: 3px dashed var(--rp-ink) !important; border-radius: 0 !important; } /* Pokemon image holder */ body.retro #incubators-modal .incubator-slot div[style*="rgba(255,255,255,0.08)"] { background: var(--rp-cream) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset 0 0 0 2px var(--rp-cream-hi) !important; } /* Timer text */ body.retro #incubators-modal [data-timer] { font-family: var(--rp-font-pixel) !important; font-size: 13px !important; color: var(--rp-yellow-dark) !important; text-shadow: 1px 1px 0 var(--rp-ink) !important; } /* "Not your Solkemon" inline note */ body.retro #incubators-modal .incubator-slot div[style*="rgba(255,255,255,0.2)"] { background: var(--rp-cream) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; color: var(--rp-ink-soft) !important; font-family: var(--rp-font-body) !important; font-size: 14px !important; } /* ── 21.6 Buttons inside slots and selector ───────────────── */ /* Start Evolution button — green pixel chunky */ body.retro #incubators-modal .incubator-slot button[onclick*="showSolkemonSelector"] { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: var(--rp-green) !important; color: var(--rp-ink) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 8px 12px !important; box-shadow: inset -2px -2px 0 0 var(--rp-green-dark), inset 2px 2px 0 0 #b6f5c8, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 #b6f5c8 !important; cursor: pointer !important; } body.retro #incubators-modal .incubator-slot button[onclick*="showSolkemonSelector"]:hover { background: #6deb9a !important; } body.retro #incubators-modal .incubator-slot button[onclick*="showSolkemonSelector"]:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* Complete button — yellow pixel */ body.retro #incubators-modal button[data-complete-btn] { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: var(--rp-yellow) !important; color: var(--rp-ink) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 8px 12px !important; box-shadow: inset -2px -2px 0 0 var(--rp-yellow-dark), inset 2px 2px 0 0 #ffe082, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 #ffe082 !important; } body.retro #incubators-modal button[data-complete-btn]:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* "Force Complete (Stuck?)" — red pixel */ body.retro #incubators-modal .incubator-slot button[onclick*="forceCompleteEvolution"] { font-family: var(--rp-font-pixel) !important; font-size: 8px !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: var(--rp-red) !important; color: #fff !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 6px 10px !important; box-shadow: inset -2px -2px 0 0 var(--rp-red-dark), inset 2px 2px 0 0 #ff7a85, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-red-dark) !important; } /* ── 21.7 Solkemon selector section ───────────────────────── */ body.retro #incubator-select-section { background: var(--rp-cream-hi) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 3px 3px 0 0 #000 !important; color: var(--rp-ink) !important; margin-bottom: 14px !important; } body.retro #incubator-select-section h3 { color: var(--rp-ink) !important; } body.retro #incubator-pokemon-list > div { background: var(--rp-cream) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 2px 2px 0 0 #000 !important; color: var(--rp-ink) !important; } body.retro #incubator-pokemon-list > div > div { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 14px !important; } body.retro #incubator-pokemon-list > div > div[style*="font-weight: bold"] { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } /* "Evolve to ..." button — blue/purple → pixel blue */ body.retro #incubator-pokemon-list button { font-family: var(--rp-font-pixel) !important; font-size: 8px !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: var(--rp-blue) !important; color: #fff !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 8px 10px !important; box-shadow: inset -2px -2px 0 0 var(--rp-blue-dark), inset 2px 2px 0 0 #6a8aff, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-blue-dark) !important; } body.retro #incubator-pokemon-list button:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* "Cannot evolve" pill */ body.retro #incubator-pokemon-list > div > div[style*="rgba(255,255,255,0.1)"] { background: var(--rp-cream-dark) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; color: var(--rp-ink-soft) !important; } /* Loading state */ body.retro #incubators-loading { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 16px !important; } body.retro #incubators-loading p { color: var(--rp-ink) !important; } /* Empty grid placeholder text */ body.retro #incubators-grid > div[style*="grid-column"] { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 16px !important; } /* ============================================================ 22. EGG LAB MODAL (#egglab-modal) ---------------------------------------------------------------- Built dynamically by egg-lab.js. Original is a dark navy gradient panel with neon green accents. Override the outer shell, header, info card, cost banner, pokemon list rows and action buttons with cream/pixel chrome. ============================================================ */ /* ── 22.1 Backdrop ─────────────────────────────────────────── */ body.retro #egglab-modal { background: rgba(0, 0, 0, 0.5) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── 22.2 Outer card ──────────────────────────────────────── */ body.retro #egglab-modal > div { background: var(--rp-cream) !important; border: 4px solid var(--rp-ink) !important; border-radius: 4px !important; box-shadow: inset -3px -3px 0 0 var(--rp-cream-dark), inset 3px 3px 0 0 var(--rp-cream-hi), 4px 4px 0 0 #000 !important; color: var(--rp-ink) !important; overflow: hidden !important; } /* ── 22.3 Header band ──────────────────────────────────────── */ body.retro #egglab-modal > div > div:first-child { background: linear-gradient(180deg, var(--rp-ink-soft) 0%, var(--rp-ink) 100%) !important; border-bottom: 3px solid var(--rp-ink) !important; box-shadow: inset 0 -2px 0 0 #000 !important; padding: 12px 14px !important; } /* "Egg Lab" title */ body.retro #egglab-modal > div > div:first-child > div > div:first-child { font-family: var(--rp-font-pixel) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 1px !important; color: var(--rp-yellow) !important; text-shadow: 2px 2px 0 #000 !important; text-transform: uppercase !important; } /* "Leave a Solkemon → get an egg in 30 min" subtitle */ body.retro #egglab-modal > div > div:first-child > div > div:nth-child(2) { font-family: var(--rp-font-pixel) !important; font-size: 8px !important; color: var(--rp-cream) !important; letter-spacing: 0.5px !important; text-shadow: 1px 1px 0 #000 !important; margin-top: 6px !important; } /* Close X button */ body.retro #egglab-modal > div > div:first-child button { font-family: var(--rp-font-pixel) !important; font-size: 12px !important; background: var(--rp-red) !important; color: #fff !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; width: 32px !important; height: 32px !important; box-shadow: inset -2px -2px 0 0 var(--rp-red-dark), inset 2px 2px 0 0 #ff7a85, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-red-dark) !important; } body.retro #egglab-modal > div > div:first-child button:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* ── 22.4 Body / scroll container ─────────────────────────── */ body.retro #egglab-body { background: var(--rp-cream) !important; color: var(--rp-ink) !important; padding: 14px 14px 18px !important; } /* ── 22.5 "How it works" info card (drop-off view) ────────── */ body.retro #egglab-body > div > div[style*="rgba(52,211,153,0.08)"] { background: var(--rp-cream-hi) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 2px 2px 0 0 #000 !important; color: var(--rp-ink) !important; } body.retro #egglab-body div[style*="rgba(52,211,153,0.08)"] > div:first-child { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; color: var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 1px !important; } body.retro #egglab-body div[style*="rgba(52,211,153,0.08)"] ul, body.retro #egglab-body div[style*="rgba(52,211,153,0.08)"] li { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 16px !important; line-height: 1.5 !important; } body.retro #egglab-body div[style*="rgba(52,211,153,0.08)"] strong { color: var(--rp-red) !important; font-family: var(--rp-font-pixel) !important; font-size: 11px !important; } /* ── 22.6 Cost banner (Lab Fee) ───────────────────────────── */ body.retro #egglab-body div[style*="rgba(251,191,36,0.08)"] { background: var(--rp-yellow) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-yellow-dark), inset 2px 2px 0 0 #ffe082, 2px 2px 0 0 #000 !important; color: var(--rp-ink) !important; } body.retro #egglab-body div[style*="rgba(251,191,36,0.08)"] div { color: var(--rp-ink) !important; } body.retro #egglab-body div[style*="rgba(251,191,36,0.08)"] div[style*="color:#fbbf24"][style*="font-weight:700"] { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; color: var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; } body.retro #egglab-body div[style*="rgba(251,191,36,0.08)"] div[style*="color:#64748b"] { font-family: var(--rp-font-body) !important; font-size: 14px !important; color: var(--rp-ink-soft) !important; } body.retro #egglab-body div[style*="rgba(251,191,36,0.08)"] div[style*="font-weight:900"] { font-family: var(--rp-font-pixel) !important; font-size: 12px !important; color: var(--rp-ink) !important; text-shadow: 1px 1px 0 var(--rp-cream-hi) !important; } /* ── 22.7 "Choose a Solkemon to leave" label ──────────────── */ body.retro #egglab-body div[style*="text-transform:uppercase"][style*="color:#64748b"] { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; color: var(--rp-ink) !important; letter-spacing: 1px !important; margin-bottom: 12px !important; } /* ── 22.8 Pokemon list rows (drop-off candidates) ─────────── */ body.retro #egglab-poke-list > div { background: var(--rp-cream-hi) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 2px 2px 0 0 #000 !important; color: var(--rp-ink) !important; } body.retro #egglab-poke-list > div > div { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; } body.retro #egglab-poke-list > div > div > div:first-child { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; color: var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } body.retro #egglab-poke-list > div > div > div:nth-child(2) { font-family: var(--rp-font-body) !important; font-size: 14px !important; color: var(--rp-ink-soft) !important; } /* "→ Lab" / "In Lab" pill on right */ body.retro #egglab-poke-list > div > div[style*="color:#34d399"] { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; color: var(--rp-green-dark) !important; background: var(--rp-green) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 6px 8px !important; box-shadow: 2px 2px 0 0 #000 !important; letter-spacing: 0.5px !important; } /* ── 22.9 Incubating / progress bar view ──────────────────── */ body.retro #egglab-body div[style*="rgba(255,255,255,0.08)"][style*="border-radius:99px"] { background: var(--rp-cream-dark) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; } body.retro #egglab-progress-bar { background: var(--rp-green) !important; border-right: 2px solid var(--rp-ink) !important; border-radius: 0 !important; } body.retro #egglab-timer { font-family: var(--rp-font-pixel) !important; font-size: 11px !important; color: var(--rp-green-dark) !important; letter-spacing: 0.5px !important; } body.retro #egglab-body div[style*="font-weight:800"][style*="color:#f1f5f9"] { font-family: var(--rp-font-pixel) !important; color: var(--rp-ink) !important; } body.retro #egglab-body div[style*="color:#64748b"]:not([style*="text-transform"]), body.retro #egglab-body div[style*="color:#94a3b8"] { color: var(--rp-ink-soft) !important; font-family: var(--rp-font-body) !important; } /* "Your egg is ready!" / "Egg Hatched!" titles */ body.retro #egglab-body div[style*="color:#34d399"][style*="font-weight:800"], body.retro #egglab-body div[style*="color:#fbbf24"][style*="font-weight:900"] { font-family: var(--rp-font-pixel) !important; font-size: 13px !important; color: var(--rp-yellow-dark) !important; text-shadow: 1px 1px 0 var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 1px !important; } /* "💡 You can close this window" tip card */ body.retro #egglab-body div[style*="rgba(255,255,255,0.04)"] { background: var(--rp-cream-hi) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), 2px 2px 0 0 #000 !important; color: var(--rp-ink-soft) !important; font-family: var(--rp-font-body) !important; font-size: 14px !important; } /* ── 22.10 Action buttons (Hatch / Incubate Another) ──────── */ body.retro #egglab-body button[onclick*="_egglabCollect"], body.retro #egglab-body button[onclick*="loadEggLab"] { font-family: var(--rp-font-pixel) !important; font-size: 11px !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: var(--rp-green) !important; color: var(--rp-ink) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 12px !important; box-shadow: inset -2px -2px 0 0 var(--rp-green-dark), inset 2px 2px 0 0 #b6f5c8, 3px 3px 0 0 #000 !important; text-shadow: 1px 1px 0 #b6f5c8 !important; } body.retro #egglab-body button[onclick*="_egglabCollect"]:active, body.retro #egglab-body button[onclick*="loadEggLab"]:active { transform: translate(3px, 3px) !important; box-shadow: 0 0 0 0 #000 !important; } /* ── 22.11 Drop-off confirmation overlay ──────────────────── */ body.retro #egglab-confirm-overlay { background: rgba(0, 0, 0, 0.5) !important; } body.retro #egglab-confirm-overlay > div { background: var(--rp-cream) !important; border: 4px solid var(--rp-ink) !important; border-radius: 4px !important; box-shadow: inset -3px -3px 0 0 var(--rp-cream-dark), inset 3px 3px 0 0 var(--rp-cream-hi), 4px 4px 0 0 #000 !important; color: var(--rp-ink) !important; } body.retro #egglab-confirm-overlay > div > div:first-child { font-family: var(--rp-font-pixel) !important; font-size: 11px !important; color: var(--rp-ink) !important; letter-spacing: 1px !important; } body.retro #egglab-confirm-overlay > div > div[style*="font-weight:800"] { font-family: var(--rp-font-pixel) !important; font-size: 12px !important; color: var(--rp-ink) !important; text-transform: uppercase !important; } body.retro #egglab-confirm-overlay > div > div[style*="color:#64748b"] { color: var(--rp-ink-soft) !important; font-family: var(--rp-font-body) !important; font-size: 14px !important; } body.retro #egglab-confirm-overlay > div > div[style*="rgba(251,191,36,0.1)"] { background: var(--rp-yellow) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-yellow-dark), inset 2px 2px 0 0 #ffe082, 2px 2px 0 0 #000 !important; } body.retro #egglab-confirm-overlay > div > div[style*="rgba(251,191,36,0.1)"] > div:first-child { color: var(--rp-ink) !important; font-family: var(--rp-font-pixel) !important; font-size: 9px !important; text-transform: uppercase !important; } body.retro #egglab-confirm-overlay > div > div[style*="rgba(251,191,36,0.1)"] > div:nth-child(2) { font-family: var(--rp-font-pixel) !important; font-size: 13px !important; color: var(--rp-ink) !important; } /* Cancel button */ body.retro #egglab-confirm-overlay button:not(#egglab-confirm-btn) { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: var(--rp-cream-hi) !important; color: var(--rp-ink) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 2px 2px 0 0 #000 !important; text-shadow: none !important; } /* Pay & Incubate button */ body.retro #egglab-confirm-btn { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: var(--rp-green) !important; color: var(--rp-ink) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-green-dark), inset 2px 2px 0 0 #b6f5c8, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 #b6f5c8 !important; } body.retro #egglab-confirm-btn:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* ============================================================ 23. SOLKEMON GUIDE MODAL (#guide-modal) ---------------------------------------------------------------- Original: blue gradient header, white panels with sidebar nav and live tables. Override outer panel, header, sidebar links, content sections, and tables with cream/pixel chrome. ============================================================ */ /* ── 23.1 Backdrop ─────────────────────────────────────────── */ body.retro #guide-modal { background: rgba(0, 0, 0, 0.5) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── 23.2 Outer card ──────────────────────────────────────── */ body.retro #guide-modal > div { background: var(--rp-cream) !important; border: 4px solid var(--rp-ink) !important; border-radius: 4px !important; box-shadow: inset -3px -3px 0 0 var(--rp-cream-dark), inset 3px 3px 0 0 var(--rp-cream-hi), 4px 4px 0 0 #000 !important; color: var(--rp-ink) !important; overflow: hidden !important; } /* ── 23.3 Header band (was blue gradient) ─────────────────── */ body.retro #guide-modal > div > div:first-child { background: linear-gradient(180deg, var(--rp-ink-soft) 0%, var(--rp-ink) 100%) !important; border-bottom: 3px solid var(--rp-ink) !important; box-shadow: inset 0 -2px 0 0 #000 !important; padding: 12px 14px !important; } body.retro #guide-modal h3 { font-family: var(--rp-font-pixel) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 1px !important; color: var(--rp-yellow) !important; text-shadow: 2px 2px 0 #000 !important; text-transform: uppercase !important; margin: 0 !important; } /* Close button — red pixel chip */ body.retro #guide-close { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: var(--rp-red) !important; color: #fff !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; padding: 8px 12px !important; box-shadow: inset -2px -2px 0 0 var(--rp-red-dark), inset 2px 2px 0 0 #ff7a85, 2px 2px 0 0 #000 !important; text-shadow: 1px 1px 0 var(--rp-red-dark) !important; } body.retro #guide-close:active { transform: translate(2px, 2px) !important; box-shadow: 0 0 0 0 #000 !important; } /* ── 23.4 Scroll body ─────────────────────────────────────── */ body.retro #guide-scroll { background: var(--rp-cream) !important; color: var(--rp-ink) !important; padding: 14px !important; } /* ── 23.5 Sidebar nav ─────────────────────────────────────── */ body.retro #guide-modal nav { background: var(--rp-cream-hi) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 3px 3px 0 0 #000 !important; } body.retro #guide-modal nav h4 { font-family: var(--rp-font-pixel) !important; font-size: 11px !important; color: var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin: 0 0 12px 0 !important; padding-bottom: 8px !important; border-bottom: 2px solid var(--rp-ink) !important; } body.retro #guide-modal .guide-link { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; background: var(--rp-cream) !important; color: var(--rp-ink) !important; border: 2px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 2px 2px 0 0 #000 !important; text-decoration: none !important; padding: 8px 10px !important; display: block !important; line-height: 1.3 !important; } body.retro #guide-modal .guide-link:hover { background: var(--rp-yellow) !important; } body.retro #guide-modal nav ul { gap: 6px !important; } /* ── 23.6 Content sections (white panels with tables) ─────── */ body.retro #guide-modal section { background: var(--rp-cream-hi) !important; border: 3px solid var(--rp-ink) !important; border-radius: 0 !important; box-shadow: inset -2px -2px 0 0 var(--rp-cream-dark), inset 2px 2px 0 0 #fff, 3px 3px 0 0 #000 !important; color: var(--rp-ink) !important; padding: 14px !important; } body.retro #guide-modal section h4 { font-family: var(--rp-font-pixel) !important; font-size: 12px !important; color: var(--rp-yellow-dark) !important; text-shadow: 1px 1px 0 var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin: 0 0 10px 0 !important; padding-bottom: 8px !important; border-bottom: 2px solid var(--rp-ink) !important; } body.retro #guide-modal section h5 { font-family: var(--rp-font-pixel) !important; font-size: 10px !important; color: var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; margin: 12px 0 6px 0 !important; } body.retro #guide-modal section p, body.retro #guide-modal section ol, body.retro #guide-modal section li { color: var(--rp-ink) !important; font-family: var(--rp-font-body) !important; font-size: 16px !important; line-height: 1.5 !important; } /* ── 23.7 Tables inside Guide ─────────────────────────────── */ body.retro #guide-modal table { border-collapse: collapse !important; border: 3px solid var(--rp-ink) !important; background: var(--rp-cream) !important; box-shadow: 2px 2px 0 0 #000 !important; } body.retro #guide-modal table thead tr { background: var(--rp-yellow) !important; } body.retro #guide-modal table th { font-family: var(--rp-font-pixel) !important; font-size: 9px !important; color: var(--rp-ink) !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; border: 2px solid var(--rp-ink) !important; padding: 8px !important; text-align: left !important; } body.retro #guide-modal table td { font-family: var(--rp-font-body) !important; font-size: 15px !important; color: var(--rp-ink) !important; border: 2px solid var(--rp-ink) !important; padding: 6px 8px !important; background: var(--rp-cream-hi) !important; } body.retro #guide-modal table tr:nth-child(even) td { background: var(--rp-cream) !important; } /* "Note: chances are shown..." caption inside catch section */ body.retro #guide-modal section p[style*="color:#64748b"] { color: var(--rp-ink-soft) !important; font-family: var(--rp-font-body) !important; font-size: 14px !important; }