/* Euchre Circle pages: royal navy, gold and card red.
   Load AFTER styles.css, on Euchre Circle's pages only. Every class is the
   site's own (styles.css); this file only swaps Bunco's colours for
   Euchre's and adds the cards.

   Colours: euchre-circle/design/euchre-handoff/README.md and the app's
   theme/tokens.ts. Bunco's pink role becomes card red, mint stays mint, and
   gold stays gold. Contrast on the navy #0f1c4d: text 14.7:1, muted2 8.2:1,
   gold 10.0:1, red text #ff8a8a 7.2:1. Red TEXT is always #ff8a8a, never the
   #ff5a5f fill.

   Cards: ivory jacks and the gold lattice back, drawn as the app draws them
   (theme/PlayingCard.tsx): the jack of spades with the jack of clubs, a J
   over one big pip, the corner index top left and turned round bottom right.
   Only jacks, and never a joker. */
:root{
  --bg:#0f1c4d; --soft:#e6e9f2; --muted:#c5cde6; --muted2:#aab4d6;
  --pink:#ff5a5f; --pink-soft:#ff8a8a; --mint:#3fd6a0;
  --red:#ff5a5f; --red-text:#ff8a8a; --red-pale:#ffc4c4; --red-ink:#2a0508; --red-lip:#8f1a20;
  --canvas:#060c24;
}
/* the icon's gold glow at the upper right, and a soft lighter blue */
body::before{background:radial-gradient(circle,rgba(245,196,81,.28),transparent 65%)}
body::after{background:radial-gradient(circle,rgba(95,140,240,.24),rgba(255,90,95,.08) 45%,transparent 68%)}
.price{background:linear-gradient(160deg,rgba(245,196,81,.2),rgba(255,90,95,.08))}
.plan{background:rgba(6,12,36,.55)}
.tag-pink{background:rgba(255,90,95,.16);color:var(--red-pale);border-color:rgba(255,138,138,.5)}
.phone img{background:#0a1438}

/* one card: an <svg viewBox="1 1 58 82"> holding a <use> of the cards drawn once at the top of the page */
.eu-card{display:block;flex-shrink:0;aspect-ratio:58/82;height:auto;overflow:visible;filter:drop-shadow(0 12px 16px rgba(0,0,0,.45))}

/* hero: the icon's three cards in its gold ring, where Bunco's page has a phone */
.eu-art{position:relative;width:86%;max-width:400px;aspect-ratio:1;justify-self:center}
.eu-art::before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(95,140,240,.45),transparent 70%)}
.eu-ring{position:absolute;inset:4%;border-radius:50%;border:3px solid rgba(245,196,81,.9);box-shadow:0 0 34px rgba(245,196,81,.4),inset 0 0 34px rgba(245,196,81,.22)}
.eu-art .eu-card{position:absolute;transform:rotate(var(--r));animation:euFloat 7s ease-in-out infinite}
/* as in the icon, the jack of spades covers all of the jack of clubs but its corner */
.eu-art .c-back{left:15%;top:28%;width:33%;--r:-13deg;animation-delay:-2.4s}
.eu-art .c-clubs{left:31%;top:19%;width:35%;--r:-5deg;animation-delay:-4.6s}
.eu-art .c-spades{left:40%;top:24%;width:39%;--r:7deg}
@keyframes euFloat{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-10px) rotate(var(--r))}}

/* how a hand is scored: the Scorekeeper's own buttons, one card each */
.eu-hands{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.eu-btn{align-self:flex-start;display:inline-flex;align-items:baseline;gap:10px;min-height:56px;padding:12px 22px;border-radius:18px;font-family:var(--head);font-weight:800;font-size:24px;line-height:1.1;letter-spacing:-.01em;white-space:nowrap}
.eu-btn small{font-family:var(--body);font-size:17px;font-weight:800;letter-spacing:0;opacity:.85}
.eu-gold{background:var(--gold-grad);color:var(--ink);box-shadow:0 5px 0 var(--lip);font-size:30px;padding:10px 30px}
.eu-glass{background:rgba(255,255,255,.08);color:var(--text);border:1px solid rgba(255,255,255,.2)}
.eu-red{background:var(--red);color:var(--red-ink);box-shadow:0 5px 0 var(--red-lip)}
.eu-outline{background:rgba(255,90,95,.12);color:var(--red-pale);border:2px solid var(--red)}
.eu-quiet{min-height:0;padding:6px 2px;font-family:var(--body);font-size:19px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.eu-hand{gap:12px}
.eu-hand .eu-btn{margin-bottom:6px}

/* a round: the Hand card (the jack over the hand count and its pips), then what happens next */
.eu-round{margin-top:14px;padding:26px;display:flex;flex-direction:column;gap:22px}
.eu-round-top{display:flex;flex-direction:column;gap:22px}
.eu-round h3{font-size:30px}
.eu-round .sub{color:var(--muted);font-size:18px;margin-top:8px}
.eu-handcard{align-self:flex-start;display:flex;align-items:center;gap:18px;padding:16px 22px 16px 18px;border-radius:24px;background:rgba(10,20,56,.7);border:1px solid rgba(255,255,255,.14)}
.eu-handcard .eu-card{width:52px;animation:euBob 5s ease-in-out infinite}
.eu-handcard .k{font-size:15px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2)}
.eu-handcard .n{font-family:var(--head);font-weight:800;font-size:28px;letter-spacing:-.02em;line-height:1.1}
.eu-handcard .n b{color:var(--gold)}
.eu-pips{display:flex;gap:6px;margin-top:8px}
.eu-pips i{width:11px;height:11px;border-radius:50%;border:2px solid rgba(245,196,81,.55)}
.eu-pips i.on{background:var(--gold);border-color:var(--gold)}
@keyframes euBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(-4deg)}}
.eu-outcomes .amt{color:var(--gold);font-size:34px}
.eu-outcomes .what b{color:var(--text)}

/* house rules */
.eu-rules{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.eu-rule{gap:8px}
.eu-rule h3{font-size:22px}
.eu-rule .tag{align-self:flex-start;font-size:14px;padding:4px 12px}
.eu-rule.yours{border-style:dashed;border-color:rgba(245,196,81,.45);background:rgba(245,196,81,.07)}

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

/* narrow phones: the longest button ("Thrown in — no score") and the Hand card still fit at 320px */
.eu-btn{max-width:100%;flex-wrap:wrap;white-space:normal}
.eu-btn small{white-space:nowrap}
@media (max-width:400px){
  .eu-btn{font-size:21px;padding:11px 18px}
  .eu-gold{font-size:27px;padding:9px 26px}
  .eu-quiet{font-size:18px;padding:6px 2px}
  .eu-round{padding:22px 20px}
  .eu-handcard{gap:12px;padding:12px 16px 12px 14px}
  .eu-handcard .eu-card{width:40px}
  .eu-handcard .n{font-size:24px}
  .eu-pips{gap:5px}
  .eu-pips i{width:10px;height:10px}
}

@media (min-width:860px){
  .eu-art{max-width:420px}
  .eu-round{padding:30px 34px}
  .eu-round-top{flex-direction:row;align-items:center;justify-content:space-between;gap:30px}
  .eu-round-top>div:first-child{max-width:34em}
  .eu-handcard{align-self:center;flex-shrink:0}
  .eu-look{flex-direction:row;align-items:flex-start;gap:22px;padding:30px 34px}
}