/* Farkle Circle pages: slate, gold and coral.
   Load AFTER styles.css, on Farkle Circle's pages only. Every class is the
   site's own (styles.css) except the product page's few fk- pieces below;
   otherwise this file only swaps Bunco's colours for Farkle's.

   Colours: farkle-circle/theme/tokens.ts. Bunco's pink role becomes coral,
   mint stays mint, and gold stays gold. Coral TEXT is always #ffa982, never
   the #ff8552 fill. */
:root{
  --bg:#13303b; --soft:#e4edef; --muted:#c8d8dc; --muted2:#afc4ca;
  --pink:#ff8552; --pink-soft:#ffa982; --mint:#3fd6a0;
  --canvas:#081a20;
}
/* the icon's gold glow at the upper right, and a soft coral and teal light */
body::before{background:radial-gradient(circle,rgba(245,196,81,.26),transparent 65%)}
body::after{background:radial-gradient(circle,rgba(79,195,214,.22),rgba(255,133,82,.08) 45%,transparent 68%)}
.price{background:linear-gradient(160deg,rgba(245,196,81,.2),rgba(255,133,82,.08))}
.plan{background:rgba(8,26,32,.55)}
.tag-pink{background:rgba(255,133,82,.16);color:#ffd8c5;border-color:rgba(255,169,130,.5)}
.phone img{background:#0e2731}

/* Farkle's screenshots are Android's 2:1 (the Google Play set, 780 x 1560),
   so its phone frames are 2:1 too, never cropped */
.phone img{aspect-ratio:1/2}

/* Keeping score: each card leads with the app's own button, as the
   Scorekeeper draws it (gold Bank on its lip, coral Farkle, glass the rest) */
.fk-score .feature{gap:12px}
.fk-btn{align-self:flex-start;display:inline-flex;align-items:center;min-height:56px;padding:12px 22px;margin-bottom:6px;border-radius:18px;font-family:var(--head);font-weight:800;font-size:24px;line-height:1.1;letter-spacing:-.01em;max-width:100%;white-space:normal}
.fk-gold{background:var(--gold-grad);color:var(--ink);box-shadow:0 5px 0 var(--lip)}
.fk-coral{background:#ff8552;color:#2d1205;box-shadow:0 5px 0 #a3431c}
.fk-glass{background:rgba(255,255,255,.08);color:var(--text);border:1px solid rgba(255,255,255,.2)}
.fk-fine{margin-top:18px}
@media (max-width:400px){.fk-btn{font-size:21px;padding:11px 18px}}

/* "Take a look first" */
.fk-look{padding:26px;gap:16px}
.fk-look .ico{flex-shrink:0}
.fk-look h2{font-size:30px}
.fk-look p{font-size:19px;color:var(--soft)}
.fk-look strong{color:var(--text)}
.fk-look>div{display:flex;flex-direction:column;gap:10px}