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

   Colours: pinochle-circle/theme/tokens.ts (design-prompt section 4). Bunco's
   pink role becomes lime, mint stays mint, and gold stays gold. The ground is
   the felt green #1e2c0a, with the deeper #0e1605 behind it. Lime TEXT is
   always #cfe68a, never the #b9d65a fill, and the fill always has dark
   #1a2606 text on it, never white. Lime has the same lightness as gold, so it
   is only for the big moments (the SET! flash, the bid mark), never a second
   kind of button. No pink, plum or violet anywhere. Contrast on the felt
   green #1e2c0a: text 13.4:1, muted2 8.8:1, gold 9.1:1, lime text 10.8:1. */
:root{
  --bg:#1e2c0a; --soft:#eef1e2; --muted:#d9dfc6; --muted2:#c3cca8;
  --pink:#b9d65a; --pink-soft:#cfe68a; --mint:#3fd6a0;
  --canvas:#0e1605;
}
/* the icon's gold glow at the upper right, and a soft moss green at the lower left */
body::before{background:radial-gradient(circle,rgba(245,196,81,.26),transparent 65%)}
body::after{background:radial-gradient(circle,rgba(90,125,28,.3),rgba(185,214,90,.08) 45%,transparent 68%)}
.price{background:linear-gradient(160deg,rgba(245,196,81,.2),rgba(185,214,90,.1))}
.plan{background:rgba(14,22,5,.55)}
.tag-pink{background:rgba(185,214,90,.16);color:#e8f4c4;border-color:rgba(207,230,138,.5)}

/* Hero: an example hand as the app adds it up (the design's own Hand 3
   sample, screen 53), where the other app pages have a phone. It is words and
   numbers only: no screenshot of an unreleased screen. */
.pi-sheet{padding:24px;display:flex;flex-direction:column;gap:14px;max-width:420px;width:100%;justify-self:center;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));box-shadow:0 30px 60px rgba(0,0,0,.45)}
.pi-sheet-head{display:flex;flex-direction:column;gap:4px}
.pi-sheet-head h2{font-size:30px}
.pi-sheet-head .sub{color:var(--muted);font-size:17px}
.pi-bidline{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:18px;color:var(--muted)}
.pi-bidline b{color:var(--text);font-family:var(--head);font-weight:800;margin-left:6px}
.pi-team{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.pi-team b{flex:1 1 auto;min-width:0;font-family:var(--head);font-weight:800;font-size:22px}
.pi-team .tot{flex-shrink:0;font-family:var(--head);font-weight:800;font-size:40px;color:var(--gold);letter-spacing:-.02em;line-height:1}
.pi-mark{display:inline-block;margin-left:2px;padding:2px 10px;border-radius:999px;background:#b9d65a;color:#1a2606;font-family:var(--body);font-size:16px;font-weight:800;vertical-align:3px}
.pi-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pi-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:18px;color:var(--soft)}
.pi-rows li:last-child{border-bottom:0}
.pi-rows li span{color:var(--muted)}
.pi-rows li strong{font-family:var(--head);font-weight:800;color:var(--text);white-space:nowrap}
.pi-made{font-size:18px;font-weight:800;color:var(--pink-soft)}
.pi-totals{font-size:17px;color:var(--muted)}
.pi-sheet .fine{margin-top:2px}

/* Keeping score: each card leads with the app's own button or line, as the
   Scorekeeper draws it (gold Score Hand, the lime SET! flash, glass the rest) */
.pi-score .feature{gap:12px}
.pi-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}
.pi-gold{background:var(--gold-grad);color:var(--ink);box-shadow:0 5px 0 var(--lip)}
.pi-lime{background:#b9d65a;color:#1a2606;box-shadow:0 5px 0 #5e7a16;letter-spacing:.02em}
.pi-glass{background:rgba(255,255,255,.08);color:var(--text);border:1px solid rgba(255,255,255,.2)}
.pi-fine{margin-top:18px}
@media (max-width:400px){.pi-btn{font-size:21px;padding:11px 18px}}

/* The deck and the numbers */
.pi-game .meta{font-size:17px;font-weight:800;color:var(--pink-soft)}

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