/* Games: the full leaderboard (/games/leaderboard/) and the coin history (/games/coins/). Classes start
   with gw-. The coins card (.gb-coins and its parts) and .gb-ic live here too. Phone first; a container
   query adds the tablet table and the desktop side column. Bump ?v= in both templates. */
/* the dark dotted coins card (templates/games/_coins_card.html) and the stroke icons */
.gb-coins { position: relative; display: grid; gap: 12px; padding: 16px 18px; border-radius: var(--r); color: #fff; min-width: 0;
  background: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.5px) 0 0 / 14px 14px, linear-gradient(145deg, #2f3a8f, #1a2150 75%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 14px 24px -14px #232f9e; }
.gb-coins form { margin: 0; }
.gb-coins :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gb-bal { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gb-bal .gm-dot { width: 40px; height: 40px; }
.gb-bal-t { display: grid; min-width: 0; }
.gb-lab { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.gb-amt { font: 800 36px/1 var(--display); letter-spacing: -.02em; color: #fff; }
.gb-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--sun); color: #4a3800; font: 700 14px var(--ui); cursor: pointer; white-space: nowrap; }
.gb-btn:hover { text-decoration: none; opacity: .9; }
.gb-msg { margin: 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.gb-msg b { color: #fff; }
.gb-cd { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.gb-cd .gb-msg { flex: 1 1 150px; }
.gb-digits { display: flex; align-items: center; gap: 6px; font: 600 22px var(--mono); color: #fff; font-variant-numeric: tabular-nums; }
.gb-digits .d { display: inline-grid; place-items: center; min-width: 46px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.gb-digits i { font-style: normal; opacity: .7; }

.gb-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.gp { container-type: inline-size; }
.gw-lay { display: grid; gap: 14px; }
.gw-main, .gw-side { display: contents; }
.gw-hero { order: 1; } .gw-tabs { order: 2; } .gw-filt, .gw-fx { order: 3; }
.gw-panel, .gw-led, .gw-main > .gw-card { order: 4; } .gw-lfoot { order: 5; } .gw-yr { order: 6; } .gw-earn { order: 7; }
.gp :focus-visible { outline: 2px solid var(--grape); outline-offset: 2px; }

/* the dark dotted heading card, like the coins card on the board */
.gw-hero { padding: 6px 18px 18px; border-radius: var(--r); color: #fff;
  background: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.5px) 0 0 / 14px 14px, linear-gradient(145deg, #2f3a8f, #1a2150 75%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 14px 24px -14px #232f9e; }
.gw-hero :focus-visible { outline-color: #fff; }
.gw-hero h1 { color: #fff; font-size: clamp(28px, 5vw, 40px); font-weight: 800; }
.gw-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: -4px; padding: 0 4px; font-weight: 700; color: #fff; }
.gw-back .gb-ic { width: 18px; height: 18px; }
.gw-back:hover { text-decoration: none; opacity: .85; }
.gw-wk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 0; color: rgba(255, 255, 255, .9); }
.gw-wk b { color: #fff; }
.gw-rs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.gw-rs .gb-ic { width: 16px; height: 16px; }
.gw-wkc { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); font: 600 12px var(--mono); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gw-per { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 2px; margin-top: 14px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.gw-per a { display: grid; place-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; color: rgba(255, 255, 255, .85); font: 600 13px var(--ui); white-space: nowrap; }
.gw-per a:hover { color: #fff; text-decoration: none; }
.gw-per a[aria-current] { background: #fff; color: #1a2150; }
.gb-coins.flat { margin-top: 6px; padding: 6px 0 0; background: none; box-shadow: none; }

/* chips: the game tabs and the coin filters. A row that scrolls on phone, wraps from tablet. */
.gw-tabs, .gw-filt { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 16px; margin: 0 -16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 34px), transparent); }
.gw-tabs::-webkit-scrollbar, .gw-filt::-webkit-scrollbar { display: none; }
.gw-tabs a, .gw-filt a { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--sunk); color: var(--txt-2); font: 600 13px var(--ui); white-space: nowrap; }
.gw-tabs a { padding-left: 12px; }
.gw-tabs a:hover, .gw-filt a:hover { color: var(--txt-hi); text-decoration: none; }
.gw-tabs a[aria-current], .gw-filt a[aria-current] { background: color-mix(in srgb, var(--tang) 14%, var(--card)); color: var(--txt-hi); box-shadow: inset 0 0 0 1.5px var(--tang); }
:root[data-theme="dark"] :is(.gw-tabs, .gw-filt) a[aria-current] { background: color-mix(in srgb, var(--tang) 18%, var(--card)); box-shadow: inset 0 0 0 1.5px var(--tang-ink); }
.gw-tabs a[aria-current] .gb-ic { color: var(--tang-ink); }
.gw-filt a:nth-child(3) { margin-right: 10px; } /* a gap between the kinds and the sources */

/* the panel heading and the table */
.gw-panel { display: grid; gap: 14px; min-width: 0; align-content: start; }
.gw-ph { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gw-ph h2 { font-size: 19px; font-weight: 800; }
.gw-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--txt-2); }
.gw-ph small { font: 500 11.5px var(--mono); color: var(--txt-3); white-space: nowrap; }
.gw-tbl { min-width: 0; overflow: hidden; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.gw-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.gw-th, .gw-r { display: grid; grid-template-columns: 34px 32px minmax(0, 1fr) 44px 64px; gap: 8px; align-items: center; padding: 0 10px 0 14px; }
.gw-th { min-height: 36px; background: var(--sunk); font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }
.gw-th .pl { grid-column: 2 / 4; } .gw-th .r { text-align: right; }
.gw-r { min-height: 52px; }
.gw-r + .gw-r { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.gw-r .rk { font: 700 14px var(--mono); color: var(--txt-2); }
.gw-r .rk.eq { font-weight: 500; color: var(--txt-3); }
.gw-r .av { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); font: 700 12px var(--display); color: var(--txt-2); }
.gw-r .u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--txt-hi); }
.gw-r .p { text-align: right; font: 600 13px var(--mono); color: var(--ok); white-space: nowrap; }
.gw-r .p.pts { color: var(--txt-hi); }
.gw-r.t1 { box-shadow: inset 4px 0 0 #ffd23f; background: color-mix(in srgb, #ffd23f 13%, var(--card)); }
.gw-r.t2 { box-shadow: inset 4px 0 0 #aeb6c9; background: color-mix(in srgb, #aeb6c9 14%, var(--card)); }
.gw-r.t3 { box-shadow: inset 4px 0 0 #e0a46c; background: color-mix(in srgb, #e0a46c 14%, var(--card)); }
.gw-r.t1 .rk { color: #8a6a00; } .gw-r.t2 .rk { color: var(--txt-hi); } .gw-r.t3 .rk { color: #a8561a; }
:root[data-theme="dark"] .gw-r.t1 .rk { color: #ffd23f; } :root[data-theme="dark"] .gw-r.t3 .rk { color: #f0b27a; }
.gw-r.mine { box-shadow: inset 4px 0 0 var(--tang); background: color-mix(in srgb, var(--tang) 10%, var(--card)); }
.gw-r.mine .u { font-weight: 800; }
.gw-r.mine .av { background: color-mix(in srgb, var(--tang) 16%, var(--card)); color: var(--tang-ink); }
.tr { justify-self: start; display: inline-flex; align-items: center; gap: 3px; font: 600 11px var(--mono); color: var(--txt-3); }
.tr.up { color: var(--ok); }
.tr .tri { width: 9px; height: 9px; fill: currentColor; }
.tr .dash { width: 8px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.tr.nw { padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--tang) 14%, var(--card)); color: var(--tang-ink); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; }

/* empty and guest cards */
.gw-card { background: var(--card); border-radius: var(--r); padding: 18px; box-shadow: 0 1px 2px var(--shadow); min-width: 0; }
:root[data-theme="dark"] .gw-card { box-shadow: inset 0 0 0 1px var(--line); }
.gw-empty { display: grid; justify-items: center; gap: 6px; padding: 34px 18px; text-align: center; }
.gw-empty .gb-ic { width: 44px; height: 44px; color: var(--txt-3); }
.gw-empty p { margin: 0; max-width: 30ch; color: var(--txt-2); }
.gw-empty p b { display: block; font: 800 16px var(--display); color: var(--txt-hi); }
.gw-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 10px; padding: 0 28px; border-radius: 999px; background: var(--txt-hi); color: var(--on-hi); font: 700 14px var(--ui); }
.gw-btn:hover { text-decoration: none; opacity: .9; }

/* your rank: a dark bar stuck to the bottom on phone and tablet, a side card on desktop */
.gw-yr { position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin: 0 -16px; padding: 10px 16px; min-height: 68px; color: #fff;
  background: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.5px) 0 0 / 14px 14px, linear-gradient(145deg, #2f3a8f, #1a2150 75%); box-shadow: 0 -10px 20px -10px rgba(35, 47, 158, .6); }
@media (max-width: 860px) { .gw-yr { bottom: calc(65px + env(safe-area-inset-bottom)); } }
.gw-yr :focus-visible { outline-color: #fff; }
.gw-yrk { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 6px; border-radius: 14px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); font: 700 20px var(--mono); color: #fff; }
.gw-yr.off .gw-yrk, .gw-yr.empty .gw-yrk { color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .1); }
.gw-yb { display: grid; gap: 1px; min-width: 0; }
.gw-yv { font: 800 15px/1.25 var(--display); color: #fff; } .gw-yv .neg { color: #ff8796; } /* the rank card is dark in both themes */
.gw-gap { font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, .85); }
.gw-prog { display: none; }
.gw-yr .gb-btn { width: auto; min-height: 44px; padding: 0 18px; }
.gw-yr.guest { grid-template-columns: minmax(0, 1fr) auto; }
@container (max-width: 899px) { .gw-yr.empty { display: none; } }

/* how scoring works */
.gw-fx { padding: 0 14px; border-radius: var(--r2); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--txt-2); }
.gw-fx summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 700; color: var(--txt-hi); }
.gw-fx summary::-webkit-details-marker { display: none; }
.gw-fx summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.gw-fx[open] summary::after { transform: rotate(-135deg) translate(-2px, -1px); }
.gw-fx div { display: grid; gap: 6px; padding: 0 0 12px; max-width: 62ch; }
.gw-fx p { margin: 0; }

/* coin history: the week strip, each tile with a coloured top edge */

/* the ledger: a table grouped by day, with a coloured edge for each source */
.s-grant, .s-bonus { --sc: #ffd23f; --si: #8a6a00; }
.s-trivia { --sc: #3644d6; --si: #3644d6; }
.s-crossword { --sc: #b88a00; --si: #8a6a00; }
.s-color { --sc: #e23a63; --si: #c2214a; }
.s-lucky9 { --sc: #0e857c; --si: #0b6f66; }
:root[data-theme="dark"] :is(.s-grant, .s-bonus, .s-crossword) { --si: #ffd23f; }
:root[data-theme="dark"] .s-trivia { --si: #9ba4ff; }
:root[data-theme="dark"] .s-color { --si: #ff7f9d; }
:root[data-theme="dark"] .s-lucky9 { --si: #3fe0d0; }
.lic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--sc, var(--txt-3)) 18%, var(--card)); color: var(--si, var(--txt-2)); }
.gw-led { min-width: 0; overflow: hidden; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.gw-lth { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; min-height: 36px; padding: 0 14px 0 18px; background: var(--sunk); font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }
.gw-lth .c-t, .gw-lth .c-b { display: none; }
.gw-dh { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 9px 14px 9px 18px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--sunk) 55%, var(--card)); font: 800 15px var(--display); color: var(--txt-hi); }
.gw-dd { font: 500 11.5px var(--mono); color: var(--txt-3); }
.gw-dh b { margin-left: auto; font: 600 12px var(--mono); }
.gw-dh .pos, .lga.pos { color: var(--ok); } .gw-dh .neg, .lga.neg { color: var(--danger); }
.gw-lrw { list-style: none; margin: 0; padding: 0; display: grid; }
.gw-lg { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 60px; padding: 8px 14px 8px 18px; box-shadow: inset 4px 0 0 var(--sc, var(--txt-3)); }
.gw-lg + .gw-lg { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.lgt { display: grid; gap: 1px; min-width: 0; }
.lgt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--txt-hi); }
.lgt small { font-size: 12.5px; color: var(--txt-2); }
.lgm, .lgb { display: none; }
.lga { text-align: right; font: 700 15px var(--mono); white-space: nowrap; }
.gw-lfoot { display: grid; justify-items: center; gap: 0; padding: 4px 0; }
.gw-lfoot p { margin: 0; font: 500 12px var(--mono); color: var(--txt-3); }

/* how to earn */
.gw-earn { display: grid; gap: 12px; min-width: 0; }
.gw-earn h2 { font-size: 19px; font-weight: 800; }
.gw-el { list-style: none; margin: 0; padding: 0; display: grid; overflow: hidden; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.gw-el li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px 12px 20px; box-shadow: inset 4px 0 0 var(--sc); }
.gw-el li + li { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.gw-el h3 { font-size: 15px; font-weight: 800; }
.gw-el li:has(h3 a) { position: relative; } .gw-el li:has(h3 a):hover { background: var(--sunk); }
.gw-el h3 a { color: inherit; } .gw-el h3 a::after { content: ""; position: absolute; inset: 0; } /* the whole row opens the game */
.gw-el h3 a:hover { text-decoration: underline; }
.gw-el p { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--txt-2); }
.gw-el > li > b { display: grid; justify-items: end; font: 800 18px/1.1 var(--display); color: var(--txt-hi); text-align: right; white-space: nowrap; }
.gw-el > li > b small { font: 500 10.5px var(--mono); letter-spacing: .04em; color: var(--txt-3); }
.gw-fair { padding: 2px 0 2px 12px; border-left: 3px solid var(--sun); font-size: 12.5px; }
.gw-fair b { color: var(--txt-hi); }

/* tablet: chips wrap, the tables get their full columns */
@container (min-width: 560px) {
  .gw-hero { padding: 8px 26px 22px; }
  .gw-tabs, .gw-filt { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .gw-th, .gw-r { grid-template-columns: 64px 40px minmax(0, 1fr) 90px 130px; gap: 14px; padding: 0 18px; }
  .gw-r { min-height: 58px; }
  .gw-r .av { width: 36px; height: 36px; font-size: 13px; }
  .gw-r .u { font-size: 15px; } .gw-r .p { font-size: 14px; } .tr { font-size: 12px; } .tr .tri { width: 10px; height: 10px; }
  .gw-lth, .gw-lg { grid-template-columns: 44px minmax(0, 1fr) 84px 80px 84px; gap: 14px; padding-left: 18px; padding-right: 18px; }
  .gw-lth span:first-child { grid-column: 1 / 3; }
  .gw-lth .c-t, .gw-lth .c-b { display: block; }
  .gw-lth .c-a, .gw-lth .c-b { text-align: right; }
  .gw-lg { min-height: 64px; }
  .lgt small { display: none; }
  .lgm, .lgb { display: block; font: 500 12.5px var(--mono); color: var(--txt-2); }
  .lgb { text-align: right; }
  .lic { width: 44px; height: 44px; }
  .gw-dh { padding-left: 18px; padding-right: 18px; }
}
/* desktop: wide table left, side column right */
@container (min-width: 900px) {
  .gw-lay { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
  .gw-main { display: grid; gap: 16px; min-width: 0; align-content: start; }
  .gw-side { display: grid; gap: 14px; min-width: 0; position: sticky; top: 20px; }
  .gw-side .gw-yr { order: 0; }
  .gw-coins-pg .gw-side { position: static; }
  .gw-th, .gw-r { grid-template-columns: 70px 40px minmax(0, 1fr) 90px 120px; }
  .gw-yr { position: static; margin: 0; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px; min-height: 0; border-radius: var(--r);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 24px -14px #232f9e; }
  .gw-yrk { min-width: 64px; height: 64px; border-radius: 18px; font-size: 30px; }
  .gw-yv { font-size: 18px; }
  .gw-prog { display: block; grid-column: 1 / -1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .18); overflow: hidden; }
  .gw-prog i { display: block; height: 100%; background: var(--sun); }
  .gw-yr .gb-btn { grid-column: 1 / -1; width: 100%; }
}