/* ============================================
PLAYZORIE — Design tokens
Palette: Ink Violet / Warm Paper / Arcade Gold / Coral / Sky
Type: Fredoka (display) + Inter (body) + JetBrains Mono (data/scores)
Signature: arcade-ticket cards with perforated edge notches
NOTE: font loading is NOT done via @import here — @import in CSS is
render-blocking and delays first paint. Every page instead preconnects
to Google Fonts and loads the stylesheet via a
in , with font-display:swap baked into that stylesheet's URL so
text renders immediately in a fallback font while webfonts load.
============================================ */
:root{
--ink: #191330;
--ink-soft: #2A2247;
--paper: #F6F1E6;
--paper-card: #FFFFFF;
--gold: #FFC94A;
--coral: #FF5D5D;
--sky: #7EC8E3;
--muted: #8B84A6;
--line: #E4DCCB;
--radius-lg: 20px;
--radius-md: 14px;
--radius-sm: 8px;
--shadow-card: 0 6px 0 var(--ink), 0 8px 18px rgba(25,19,48,0.18);
--shadow-card-hover: 0 4px 0 var(--ink), 0 6px 14px rgba(25,19,48,0.22);
--font-display: 'Fredoka', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin:0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
line-height: 1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; margin:0 0 .4em; line-height:1.15; }
p{ margin:0 0 1em; color: var(--ink-soft); }
button, input{ font-family: inherit; }
.container{ max-width: 1240px; margin: 0 auto; padding: 0 24px; }
:focus-visible{ outline: 3px solid var(--coral); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
*{ animation: none !important; transition: none !important; }
}
/* ---------- AD SLOTS ----------
Clearly marked placeholders for the site owner's own ad units
(Google AdSense, direct sponsorships, etc). Swap the placeholder
content for your ad network's