/* PixelPulse site-wide design layer: pixel-casino skin for every page (loaded after the base styles) */
:root { --ui: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif; --px: 'PressStart2P', 'Courier New', monospace; --ink: #120c1e; --line: #2e2e63; --p1: #1b1b3d; --p2: #12122a; }
html { scroll-behavior: smooth; }
body { font-family: var(--ui) !important; letter-spacing: .1px; }
::selection { background: #ff3d81; color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #4b3a8a #0a0a18; }
::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: #0a0a18; } ::-webkit-scrollbar-thumb { background: #4b3a8a; border: 2px solid #0a0a18; } ::-webkit-scrollbar-thumb:hover { background: #ff3d81; }
:focus-visible { outline: 3px solid #2de2e6; outline-offset: 2px; }

/* ---------- section entrance + titles ---------- */
.section, #support, #oracleFeedSection { animation: siteIn .4s steps(6); }
@keyframes siteIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.section-title, .oracle-page h2, .betting-title, .how-title, .pricing-title, .modal-title, .tradehub-banner-title {
  font-family: var(--px) !important; font-weight: normal !important; font-size: 15px !important; line-height: 1.5 !important; letter-spacing: 1px; color: #fff !important;
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(255, 61, 129, .35); border-left: 0 !important; padding-left: 0 !important; }
.section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 22px !important; }
.section-title::before { content: ''; width: 14px; height: 14px; flex: none; background: #ffd23f; box-shadow: 4px 4px 0 #ff3d81, inset -3px -3px 0 #e09a1a; transform: rotate(45deg); }
.section-title::after { content: ''; height: 4px; flex: 1; background: repeating-linear-gradient(90deg, #4b3a8a 0 8px, transparent 8px 14px); }

/* ---------- panels / cards (class based + legacy inline panels) ---------- */
.market-card, .betting-card, .balance-card, .how-card, .module-card, .trust-item, .game-card, .your-bets, .bet-item, .wallet-container, .pricing-option, .subscription-modal, .footer-badge,
[style*="background: #1a1a1a"], [style*="background:#1a1a1a"], [style*="background: #1f1f1f"], [style*="background:#1f1f1f"], [style*="background: #0d0d0d"], [style*="background:#0d0d0d"], [style*="background: #141414"], [style*="background: #181818"] {
  background: linear-gradient(180deg, rgba(27, 27, 61, .96), rgba(16, 16, 40, .97)) !important; border: 3px solid var(--ink) !important; border-radius: 0 !important;
  box-shadow: 0 0 0 2px var(--line), 4px 6px 0 #05050f !important; }
.market-card, .betting-card, .how-card, .module-card, .game-card { transition: transform .12s steps(3), box-shadow .12s !important; }
.market-card:hover, .betting-card:hover, .how-card:hover, .module-card:hover, .game-card:hover { transform: translateY(-4px) !important; box-shadow: 0 0 0 2px #ff3d81, 4px 10px 0 #05050f, 0 0 28px rgba(255, 61, 129, .3) !important; border-color: var(--ink) !important; }
.market-title, .betting-title { font-family: var(--ui) !important; font-size: 16px !important; font-weight: 700 !important; text-shadow: none !important; }

/* inputs: one consistent pixel field everywhere (arcade has its own) */
:where(.section, #support, .modal, .modal-content) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea):not([class*="pp-"]):not([class*="pl-"]),
[style*="background: #2f2f2f"], [style*="background:#2f2f2f"], .search-input, .bet-input {
  background: #07071a !important; color: #fff !important; border: 3px solid var(--ink) !important; border-radius: 0 !important; box-shadow: inset 0 0 0 2px var(--line); font-family: var(--ui); font-weight: 600; outline: none; }
:where(.section, #support, .modal) :where(input, select, textarea):not([class*="pp-"]):not([class*="pl-"]):focus { box-shadow: inset 0 0 0 2px #2de2e6; }
.search-container .search-input { border: 0 !important; box-shadow: none !important; background: transparent !important; }
.search-container { background: #07071a !important; border: 3px solid var(--ink) !important; border-radius: 0 !important; box-shadow: 0 0 0 2px var(--line); }

/* buttons */
.btn { font-family: var(--ui) !important; font-weight: 700 !important; letter-spacing: .8px; text-transform: uppercase; border-radius: 0 !important; font-size: 14px; }
.btn-primary { font-size: 14px; }
button:not([class*="pp-"]):not([class*="pl-"]):not(.btn):not(.theme-toggle):not(.sound-toggle):not(.close-game-btn):not([class*="arcade"]):not([class*="plinko"]) { font-family: var(--ui); }

/* tabs / pills used around Oracle + Trade Hub */
[class*="tab-btn"], [class*="subtab"], .oracle-tab, .cat-btn, [class*="filter-btn"], [class*="pill"]:not(.pp-pill) { border-radius: 0 !important; font-family: var(--ui); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }

/* modals */
.modal { background: rgba(5, 3, 18, .82) !important; backdrop-filter: blur(4px); }
.modal-content { background: linear-gradient(180deg, #1b1b3d, #10102a) !important; border: 4px solid var(--ink) !important; border-radius: 0 !important; box-shadow: 0 0 0 3px var(--line), 0 0 0 7px var(--ink), 0 0 70px rgba(138, 92, 255, .35) !important; animation: siteIn .25s steps(5); }
.modal-header { background: linear-gradient(90deg, rgba(255, 61, 129, .18), transparent) !important; border-bottom: 3px dashed #2e2e63 !important; }
.close-btn:hover { color: #ff3d81 !important; }

/* tables */
table { border-collapse: separate; border-spacing: 0 4px; } th { font-family: var(--px); font-size: 9px; font-weight: normal; letter-spacing: 1px; color: #9aa0c8; text-transform: uppercase; }
tbody tr td { background: rgba(27, 27, 61, .6); } tbody tr:hover td { background: rgba(255, 61, 129, .12); }

/* ---------- navbar polish ---------- */
.navbar { padding-top: 10px !important; padding-bottom: 10px !important; }
.nav-links a { font-family: var(--ui); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; font-size: 13px !important; position: relative; padding: 6px 0 !important; font-weight: 700 !important; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: #ff3d81; transform: scaleX(0); transform-origin: left; transition: transform .15s steps(4); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { box-shadow: none !important; } .nav-links a.active::after { transform: scaleX(1); background: #ffd23f; }

/* ---------- HOME HERO ---------- */
.hero { position: relative; }
.hero-content { max-width: 880px !important; padding-top: 96px !important; }
.hero-tagline { font-family: var(--px) !important; font-size: 10px !important; letter-spacing: 3px !important; color: #2de2e6 !important; text-shadow: 0 0 16px rgba(45, 226, 230, .6); line-height: 1.8; }
.hero-title { font-family: var(--px) !important; font-weight: normal !important; font-size: clamp(24px, 5.6vw, 54px) !important; line-height: 1.25 !important; letter-spacing: 2px !important;
  background: linear-gradient(180deg, #ffffff 0%, #ffe680 40%, #ff8a2b 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent;
  filter: drop-shadow(5px 5px 0 #000) drop-shadow(0 0 26px rgba(255, 138, 43, .55)); text-shadow: none !important; }
.hero-description { font-size: 18px !important; color: #d6d9f5 !important; max-width: 720px; margin-left: auto; margin-right: auto; }
.hero-buttons .btn { padding: 16px 26px !important; font-size: 15px !important; }
.hero-trust-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.hero-trust-item { font: 700 12px var(--ui) !important; letter-spacing: .6px; text-transform: uppercase; padding: 8px 12px !important; background: rgba(10, 8, 34, .78) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; box-shadow: 0 0 0 1px var(--line), 3px 3px 0 #05050f; }
.hero-stats { gap: 18px !important; }
.hero-stat { min-width: 138px; padding: 14px 12px !important; background: linear-gradient(180deg, rgba(27, 27, 61, .92), rgba(14, 14, 36, .95)); border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--line), 4px 5px 0 #05050f; }
.hero-stat-num { font-family: var(--px) !important; font-size: 20px !important; color: #ffd23f !important; text-shadow: 3px 3px 0 #000; }
.hero-stat-label { font-weight: 600; color: #9aa0c8 !important; }
.hero-floaters { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-floaters img { position: absolute; image-rendering: pixelated; opacity: .9; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .4)); animation: heroFloat 3.6s steps(6) infinite alternate; }
@keyframes heroFloat { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-18px) rotate(6deg); } }
@media (max-width: 800px) { .hero-floaters img { display: none; } }

/* promo strip becomes a scrolling neon ticker */
.promo-strip { background: linear-gradient(90deg, #2a0a3d, #3a0f4f, #2a0a3d) !important; border-top: 3px solid #ff3d81 !important; border-bottom: 3px solid #2de2e6 !important; padding: 0 !important; overflow: hidden; white-space: nowrap !important; font-family: var(--ui); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.promo-strip .ps-track { display: flex; width: max-content; animation: psMarq 60s linear infinite; } .promo-strip:hover .ps-track { animation-play-state: paused; }
.promo-strip .ps-track > span { display: inline-block; padding: 12px 40px 12px 0; white-space: nowrap; }
.promo-strip span span { color: #ffd23f; }
@keyframes psMarq { to { transform: translateX(-50%); } }

.how-it-works { background: linear-gradient(180deg, #0a0820, #120d33) !important; border-top: 3px solid var(--ink) !important; }
.how-card { text-align: left !important; }
.trust-bar { background: #0a0820 !important; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.site-footer { background: #07061a !important; border-top: 4px solid transparent !important; border-image: linear-gradient(90deg, #ff3d81, #ffd23f, #2de2e6, #8a5cff) 1; }
.footer-col h4 { font-family: var(--px); font-size: 10px; font-weight: normal; color: #ffd23f; letter-spacing: 1px; }
.footer-badge { padding: 6px 10px !important; }

/* arcade fonts follow the site */
.pp-game, #ppLobby { font-family: var(--ui) !important; }

.info-banner { background: #0c0c22 !important; border: 3px solid var(--ink) !important; border-left: 8px solid #ffd23f !important; border-radius: 0 !important; box-shadow: 0 0 0 2px var(--line), 4px 5px 0 #05050f; color: #cfd3f5 !important; font-size: 14px; }
.info-banner strong { color: #ffd23f !important; }
.stat-card, .trade-stat, [class*="stat-box"] { border-radius: 0 !important; }

/* Trade Hub banners: tiny pixel-art images, scaled crisp */
.tradehub-banner { image-rendering: pixelated; background-size: cover; border: 3px solid var(--ink) !important; border-radius: 0 !important; box-shadow: 0 0 0 2px var(--line), 4px 5px 0 #05050f; height: 150px !important; }
.tradehub-banner.active { box-shadow: 0 0 0 3px #ffd23f, 4px 5px 0 #05050f, 0 0 26px rgba(255, 210, 63, .4); }
.tradehub-banner-title { text-shadow: 3px 3px 0 #000 !important; }
.tradehub-banner-sub { font-weight: 600; text-shadow: 2px 2px 0 #000; }
body.day-mode .hero-tagline { color: #ffffff !important; text-shadow: 2px 2px 0 #1a1040 !important; }
#gold-transfer { width: 100%; margin-left: auto; margin-right: auto; }

.geo-banner { position: sticky; top: 0; z-index: 10000; padding: 10px 16px; text-align: center; font: 600 13px var(--ui); color: #fff; background: #7d1426; border-bottom: 3px solid #120c1e; }
.ref-modal { position: fixed; inset: 0; z-index: 10080; display: flex; align-items: center; justify-content: center; background: rgba(5, 3, 18, .85); padding: 16px; }
.ref-in { position: relative; width: 100%; max-width: 460px; padding: 22px; background: linear-gradient(180deg, #1b1b3d, #10102a); border: 4px solid #120c1e; box-shadow: 0 0 0 3px #2e2e63, 0 0 60px rgba(138, 92, 255, .4); }
.ref-in h3 { margin: 0 0 10px; font: 13px var(--px); color: #ffd23f; text-shadow: 3px 3px 0 #000; } .ref-in p { color: #cfd3f5; font-size: 14px; line-height: 1.5; margin: 0 0 14px; } .ref-in small { display: block; margin-top: 12px; color: #7a80a8; font-size: 11px; }
.ref-x { position: absolute; right: 10px; top: 6px; background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; }
.ref-link { display: flex; gap: 8px; } .ref-link input { flex: 1; min-width: 0; padding: 11px; font: 600 12px var(--ui); color: #fff; background: #07071a; border: 3px solid #120c1e; box-shadow: inset 0 0 0 2px #2e2e63; }
.ref-link button, .ref-share a { padding: 11px 14px; font: 800 12px var(--ui); letter-spacing: .5px; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer; color: #1a0f00; background: linear-gradient(180deg, #ffe680, #ffd23f); border: 3px solid #120c1e; box-shadow: 0 4px 0 #6b4400; }
.ref-share { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; } .ref-share a { color: #fff; background: linear-gradient(180deg, #8a6cff, #5b3fd0); box-shadow: 0 4px 0 #2a1a6a; }

.hero-fine { margin: 14px auto 0; max-width: 560px; font-size: 12px; color: #b7bce0; text-shadow: 1px 1px 0 #000; }
body.day-mode .hero-fine { color: #fff; }

/* no gap between the trust strip and the footer (the page background used to peek through) */
.site-footer { margin-top: 0 !important; }
.trust-section { background: linear-gradient(180deg, #0a0820, #0d0a28) !important; }