/* Look: Grain
   Feel: soft colour under film grain. Cream paper cards, cobalt-to-violet glass panels with a hairline
         white edge, big blurry colour blooms and marbled bands behind, a fine sand drifting over everything.
         Bright, warm and toy-like without being loud
   Use it for: games and playful apps, landing pages that should feel like the thing they sell,
               anything where colour and texture carry the mood
   From: an iPhone card game, October 2026 (its shipped look, then its landing page)
   Differs: warm cream page, cream paper cards with a tan edge, deep navy ink for text, cobalt tint with a
            violet second tint, glass panels as a cobalt-to-violet gradient (.gr-glass), rounded heavy type
            for titles, fully round pill buttons that wear the panel gradient. Grain: one fixed layer of
            noise over the page (.gr-grain) at 16% in overlay. Blooms: blurred radial colour (.gr-bloom).
            Light only: the game's backgrounds are always bright, so there is no dark theme.
   Themes: light only
   Fonts: the system rounded font. Nothing to load.
   Native: Paper #FFFDF8 to #F4EEE2, paper edge #E2D8C6 1.5 pt, ink #1F2A66, hearts #EE4430, spades #1F2A66,
           four-colour diamonds #F58A1F and clubs #1FA866. Panel #2E62EE to #6A4AE0 top-leading to
           bottom-trailing, a white 22% light from the top corner, white 30% edge 1.5 pt, shadow #1A1F5C 28%
           radius 14 y 8. Grain tile 128 px premultiplied noise, 16% overlay full screen, 50% overlay on panels,
           28% multiply on cards. Type: system rounded, heavy and black. */
:root{
  --bg:#F7EFE3; --card:#FFFDF8; --sum:#F4EEE2;
  --fill:rgba(31,42,102,.08); --fill2:rgba(31,42,102,.05);
  --sep:rgba(31,42,102,.14);
  --label:#1F2A66; --label2:rgba(31,42,102,.68); --label3:rgba(31,42,102,.42);
  --tint:#2E62EE; --tint2:#6A4AE0; --tintsoft:rgba(46,98,238,.10); --tintline:rgba(46,98,238,.3); --tintglow:rgba(46,98,238,.22);
  --gr-panel:linear-gradient(135deg,#2E62EE,#6A4AE0);
  --gr-edge:#E2D8C6;
  --gr-heart:#EE4430; --gr-spade:#1F2A66; --gr-diamond:#F58A1F; --gr-club:#1FA866;
  --gr-gold:#FFC83A; --gr-orange:#FF8A2E;
  --shadow:0 1px 2px rgba(26,31,92,.06),0 8px 24px rgba(26,31,92,.10);
  --r-card:24px; --r-box:18px; --r-btn:25px; --r-field:16px;
  --font:ui-rounded,-apple-system,BlinkMacSystemFont,"SF Pro Rounded",system-ui,sans-serif;
  --font-title:var(--font);
}
/* Light only: the look has no dark theme, so a dark preference still gets the cream page. */
:root[data-theme="dark"]{
  --bg:#F7EFE3; --card:#FFFDF8; --sum:#F4EEE2;
  --fill:rgba(31,42,102,.08); --fill2:rgba(31,42,102,.05);
  --sep:rgba(31,42,102,.14);
  --label:#1F2A66; --label2:rgba(31,42,102,.68); --label3:rgba(31,42,102,.42);
  --tint:#2E62EE; --tint2:#6A4AE0; --tintsoft:rgba(46,98,238,.10); --tintline:rgba(46,98,238,.3); --tintglow:rgba(46,98,238,.22);
  --shadow:0 1px 2px rgba(26,31,92,.06),0 8px 24px rgba(26,31,92,.10);
  color-scheme:light;
}

/* Cards are cream paper with a tan edge, like the game's card faces. */
.card{box-shadow:0 0 0 1.5px var(--gr-edge),var(--shadow)}

/* Main buttons are glass panels: the cobalt-to-violet gradient, a light from the top corner, a white hairline. */
.btn.primary{background:radial-gradient(120% 140% at 15% 0%,rgba(255,255,255,.22),transparent 60%),var(--gr-panel);
  color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3),0 8px 22px rgba(26,31,92,.28)}

/* Pieces only this look has. */
.gr-glass{background:radial-gradient(120% 140% at 15% 0%,rgba(255,255,255,.22),transparent 60%),var(--gr-panel);
  color:#fff;border-radius:var(--r-card);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3),0 8px 28px rgba(26,31,92,.28)}
.gr-bloom{position:absolute;border-radius:50%;filter:blur(60px);opacity:.75;pointer-events:none}
.gr-grain{position:fixed;inset:-64px;pointer-events:none;z-index:2147483000;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grDrift 40s linear infinite}
@keyframes grDrift{to{transform:translate(64px,38px)}}
@media (prefers-reduced-motion: reduce){.gr-grain{animation:none}}