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

   Colours: mexican-train-circle/theme/tokens.ts (design-prompt section 4).
   Bunco's pink role becomes ivory as a fill (always dark #3a0a0a text on it,
   never white) and salmon as text (#ffb3a1); mint stays mint, and gold stays
   gold. No slate, aqua, coral, pink or purple anywhere. Contrast on the
   crimson #4a0b0c: text about 14.7:1, muted2 about 8.2:1, gold about 10:1,
   salmon text about 9.6:1.

   Dominoes are drawn as the app draws them (theme/Domino.tsx): an ivory face
   shading #fbf5e8 to #ece2cc, black pips #1c1410, a dark centre line #3b2a20
   and a small brass spinner #d4a640. The pip black and the brass are used
   only inside a drawn domino. */
:root{
  --bg:#4a0b0c; --soft:#f3e4e0; --muted:#e0c9c3; --muted2:#cdb0a9;
  --pink:#f6ecd6; --pink-soft:#ffb3a1; --mint:#3fd6a0;
  --canvas:#200405;
}
/* the icon's gold glow at the upper right, and a soft lighter red at the lower left */
body::before{background:radial-gradient(circle,rgba(245,196,81,.26),transparent 65%)}
body::after{background:radial-gradient(circle,rgba(138,28,28,.32),rgba(255,179,161,.06) 45%,transparent 68%)}
.price{background:linear-gradient(160deg,rgba(245,196,81,.2),rgba(255,179,161,.08))}
.plan{background:rgba(32,4,5,.55)}
.tag-pink{background:rgba(255,179,161,.16);color:#ffe0d6;border-color:rgba(255,224,214,.5)}

/* One domino: an <svg viewBox="0 0 200 100"> laid on its side */
.mt-domino{display:block;height:auto;filter:drop-shadow(0 12px 16px rgba(0,0,0,.45))}

/* Hero: an example round as the scorekeeper enters it (the design's own Round 9
   sample), where the other app pages have a phone. Words, numbers and one drawn
   domino: no screenshot of an unreleased screen. */
.mt-round{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)}
.mt-round-top{display:flex;align-items:center;gap:18px}
.mt-round-top .mt-domino{width:120px;flex-shrink:0;transform:rotate(-4deg)}
@media (max-width:400px){.mt-round-top{gap:14px}.mt-round-top .mt-domino{width:88px}}
.mt-round-head{display:flex;flex-direction:column;gap:4px}
.mt-round-head h2{font-size:30px}
.mt-round-head .sub{color:var(--muted);font-size:17px}
.mt-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.mt-rows li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:19px;color:var(--soft)}
.mt-rows li:last-child{border-bottom:0}
.mt-rows li b{font-family:var(--head);font-weight:800;color:var(--text)}
.mt-rows li strong{font-family:var(--head);font-weight:800;font-size:26px;color:var(--text);white-space:nowrap}
.mt-out{display:inline-flex;align-items:center;padding:4px 12px;border-radius:12px;background:#f6ecd6;color:#3a0a0a;font-family:var(--head);font-weight:800;font-size:17px;box-shadow:0 3px 0 #b89a64}

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

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