/* Game pages (full-screen shell), the coins page and the Car Race garage. Plain CSS on top of style.css; colours follow the site's .dark class. */
:root {
  --gf-bg: #fff8ee; --gf-bar: #ffffffe6; --gf-line: #ecd9bd; --gf-ink: #2b2118; --gf-muted: #7a6a58; --gf-card: #ffffff; --gf-pri: #c2410c; --gf-pri-ink: #fff; --gf-soft: #fff1dc;
}
.dark {
  --gf-bg: #12100d; --gf-bar: #1b1712e6; --gf-line: #3a3126; --gf-ink: #f3ece2; --gf-muted: #b4a592; --gf-card: #1d1913; --gf-pri: #fb923c; --gf-pri-ink: #1a1208; --gf-soft: #2a2218;
}

/* ---------- full-screen game shell ---------- */
.gf-body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--gf-bg); color: var(--gf-ink); }
.gf-bar { display: flex; align-items: center; gap: .35rem; min-height: 46px; padding: .3rem max(.6rem, env(safe-area-inset-left)); background: var(--gf-bar); border-bottom: 1px solid var(--gf-line); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 20; opacity: .78; transition: opacity .15s; }
.gf-bar:hover, .gf-bar:focus-within { opacity: 1; }
.gf-title { flex: 1; min-width: 0; margin: 0 .25rem; font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .2rem .65rem; border: 1px solid var(--gf-line); border-radius: .7rem; background: var(--gf-card); color: var(--gf-ink); font: inherit; font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.gf-btn:hover { border-color: var(--gf-pri); }
.gf-btn[hidden] { display: none; }
.gf-coins span:last-child { font-variant-numeric: tabular-nums; font-weight: 800; }
@media (max-width: 640px) { .gf-lab { display: none; } .gf-coins .gf-lab { display: none; } .gf-btn { padding: .2rem .55rem; } }
.gf-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: .6rem max(.6rem, env(safe-area-inset-left)) max(.8rem, env(safe-area-inset-bottom)); }
.gf-main > #gm, .gf-main > #sd, .gf-main > #cb { width: 100%; max-width: 70rem; margin-inline: auto; }
.gf-flash { width: 100%; max-width: 40rem; margin-bottom: .5rem; padding: .5rem .8rem; border-radius: .7rem; background: var(--gf-soft); border: 1px solid var(--gf-line); font-size: .9rem; }
.gm-grid { display: block; }
/* the play column takes the height that is left, whatever the shape of the canvas (--ar = width / height, set by game-focus.js) */
.gf-main .gm-col { --gf-chrome: 215px; width: min(100%, calc((100dvh - var(--gf-chrome)) * var(--ar, 1))); min-width: 16rem; margin-inline: auto; }
@media (pointer: fine) { .gf-main .gm-col { --gf-chrome: 175px; } }
@media (orientation: landscape) and (max-height: 520px) { .gf-main .gm-col { --gf-chrome: 130px; } }
.gf-main .gm-stats, .gf-main .sd-stats, .gf-main .gm-stage, .gf-main .sd-board, .gf-main .sd-pad, .gf-main .gm-touch { max-width: none; }
.gf-main .gm-stage-wide.is-tall { max-width: none; }
.gf-main .gm-stats > div { padding-block: .3rem; }
.gf-main .gm-v { font-size: 1.05rem; }

/* side panel: the page's own data-gf-side block, slid in from the right */
#gf-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 40; }
#gf-scrim[hidden] { display: none; }
.gf-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(26rem, 94vw); max-width: none; overflow-y: auto; padding: .8rem 1rem 1.5rem; background: var(--gf-bg); border-left: 1px solid var(--gf-line); box-shadow: -12px 0 30px -12px rgba(0, 0, 0, .5); transform: translateX(105%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
.gf-panel.is-open { transform: none; visibility: visible; transition: transform .2s ease; }
.gf-panel > * + * { margin-top: 1rem; }
.gf-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .2rem; }
.gf-drawer-links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--gf-line); font-size: .9rem; }
.gf-drawer-links a { color: var(--gf-pri); font-weight: 600; }

/* coin notes under a finished game */
.gm-coins { display: block; margin-top: .25rem; font-weight: 700; color: #facc15; }

/* ---------- coins page ---------- */
.cn-pill { display: inline-block; min-width: 1.6rem; padding: 0 .45rem; border-radius: 999px; background: var(--gf-soft); color: var(--gf-pri); font-size: .75rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.cn-card { padding: 1rem 1.1rem; border: 1px solid var(--gf-line); border-radius: 1rem; background: var(--gf-card); }
.cn-hero { display: grid; gap: 1rem; margin-top: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.cn-bal { font-size: 2.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--gf-pri); }
.cn-sub { color: var(--gf-muted); font-size: .88rem; }
.cn-h { margin: 2rem 0 .7rem; font-size: 1.25rem; font-weight: 800; }
.cn-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.cn-item { display: flex; flex-direction: column; gap: .35rem; padding: .8rem; border: 1px solid var(--gf-line); border-radius: .9rem; background: var(--gf-card); }
.cn-item b { font-size: .95rem; }
.cn-item small { color: var(--gf-muted); }
.cn-price { font-weight: 800; color: var(--gf-pri); }
.cn-own { color: #16a34a; font-weight: 700; font-size: .85rem; }
.cn-buy { margin-top: auto; }
.cn-sw { display: inline-block; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--gf-line); vertical-align: middle; }
.cn-sw.rainbow { background: conic-gradient(red, orange, yellow, green, cyan, blue, violet, red); }
.cn-badge { display: flex; gap: .7rem; align-items: center; padding: .7rem; border: 1px solid var(--gf-line); border-radius: .9rem; background: var(--gf-card); }
.cn-badge .ic { flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; font-size: 1.5rem; border: 3px solid #b45309; background: var(--gf-soft); }
.cn-badge.silver .ic { border-color: #94a3b8; } .cn-badge.gold .ic { border-color: #eab308; } .cn-badge.platinum .ic { border-color: #38bdf8; box-shadow: 0 0 10px #38bdf8aa; }
.cn-badge.locked { opacity: .55; filter: grayscale(.9); }
.cn-badge b { display: block; font-size: .92rem; }
.cn-badge small { color: var(--gf-muted); font-size: .78rem; }
.cn-ledger { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cn-ledger td { padding: .4rem .3rem; border-bottom: 1px solid var(--gf-line); }
.cn-ledger td:last-child { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.cn-plus { color: #16a34a; } .cn-minus { color: #dc2626; }
.cn-earn { display: grid; gap: .45rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.cn-earn li { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.cn-earn li span:last-child { color: var(--gf-pri); font-weight: 700; text-align: right; }

/* ---------- Car Race garage (inside the dark game stage) ---------- */
.gr { position: absolute; inset: 0; z-index: 3; overflow-y: auto; padding: .9rem .8rem 1rem; background: rgba(12, 9, 5, .94); color: #f5ead8; text-align: left; }
.gr[hidden] { display: none; }
.gr h2 { margin: 0 0 .5rem; font-size: 1.3rem; font-weight: 800; color: #fcd34d; }
.gr h3 { margin: .85rem 0 .35rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #c9b79a; }
.gr-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.gr-top { display: flex; align-items: center; gap: .8rem; }
.gr-prev { flex: none; width: 74px; height: 92px; border-radius: .7rem; background: #2a2118; border: 1px solid #4a3a28; }
.gr-chip { position: relative; display: inline-flex; align-items: center; gap: .35rem; min-height: 38px; padding: .3rem .7rem; border: 1px solid #5b4932; border-radius: .7rem; background: #2a2118; color: #f5ead8; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.gr-chip.is-on { border-color: #fbbf24; background: #4a3512; box-shadow: 0 0 0 1px #fbbf24 inset; }
.gr-chip.is-lock { opacity: .85; }
.gr-chip small { font-weight: 800; color: #fcd34d; }
.gr-sw { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid #5b4932; cursor: pointer; position: relative; }
.gr-sw.is-on { border-color: #fff; box-shadow: 0 0 0 2px #fbbf24; }
.gr-sw.is-lock::after { content: "🔒"; position: absolute; right: -4px; bottom: -6px; font-size: .75rem; }
.gr-sw.rainbow { background: conic-gradient(red, orange, yellow, green, cyan, blue, violet, red); }
.gr-note { margin: .5rem 0 0; font-size: .8rem; color: #d9c7a8; min-height: 1.2em; }
.gr-foot { position: sticky; bottom: -1rem; display: flex; gap: .5rem; align-items: center; justify-content: space-between; margin: 1rem -.8rem -1rem; padding: .7rem .8rem; background: linear-gradient(transparent, rgba(12, 9, 5, .98) 30%); }
.gr-coins { font-weight: 800; color: #fcd34d; }
.gr-sum { margin: .2rem 0 0; font-size: .85rem; color: #e8d9bd; }

/* replaces inline styles (the site's policy allows none) */
.cn-mt { margin-top: 1.2rem; } .cn-mt2 { margin-top: .4rem; } .cn-lead { margin: .3rem 0 .8rem; } .cn-note { margin: .7rem 0 0; }
.cn-big { font-size: 1.2rem; font-weight: 800; margin: .2rem 0; }
.cn-grid-wide { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.cn-h3 { font-size: 1.05rem; }
.gm-stage { position: relative; }
.cn-sw.p-saffron { background: #f59e0b; } .cn-sw.p-sky { background: #38bdf8; } .cn-sw.p-leaf { background: #22c55e; } .cn-sw.p-ruby { background: #e11d48; }
.cn-sw.p-violet { background: #8b5cf6; } .cn-sw.p-pink { background: #ec4899; } .cn-sw.p-teal { background: #14b8a6; } .cn-sw.p-midnight { background: #1e293b; }
.cn-sw.p-ivory { background: #f8fafc; } .cn-sw.p-chrome { background: #cbd5e1; } .cn-sw.p-gold { background: #facc15; }
.cn-sw.p-rainbow { background: conic-gradient(red, orange, yellow, green, cyan, blue, violet, red); }