/* The Strategic Gaming Reserve, look B (owner, 2026-10-17): off-white paper, navy ink, light Hanken Grotesk headings,
   Fragment Mono labels. Chips are brass, tChips violet: the two never share a colour. One fixed light look. */
:root {
  --bg: #fdfdfb; --fg: #15254e; --muted: #737c95; --line: #e3e5ea; --card: #f6f7f9; --chipbg: #eff0f3;
  --accent: #15254e; --onaccent: #fdfdfb; --chips: #8a5d0c; --tchips: #4f46a5; --bad: #a3312a; --focus: #2c5fb3;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; --mono: "Fragment Mono", ui-monospace, Menlo, monospace;
  --r: 14px; color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 var(--sans); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line);
  padding-block: calc(14px + env(safe-area-inset-top, 0px)) 14px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.mark b { font: 500 12.5px/1.25 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.seal { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--onaccent); font: 11px/1 var(--mono); }
.right { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-width: 0; }
.bal { font: 13px/1 var(--mono); padding: 9px 12px; border-radius: 999px; background: var(--chipbg); white-space: nowrap; }
.who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.whoid { font: 13px/1 var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }

.body { max-width: 1240px; margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 44px);
  padding-block: clamp(20px, 3vw, 32px) calc(48px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sec { display: grid; gap: 14px; min-width: 0; }
.sechead h2 { margin: 0; font: 400 clamp(20px, 2.4vw, 26px)/1.1 var(--sans); letter-spacing: -0.03em; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.card { background: var(--card); border-radius: var(--r); padding: 16px 18px 18px; min-width: 0; }
.stack { display: grid; gap: 10px; align-content: start; }
.strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lbl, .fact span, label { font: 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.small { margin: 0; font-size: 13px; color: var(--muted); }
input, select { font: 15px/1.2 var(--sans); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; width: 100%; min-width: 0; }

.btn { font: 600 14px/1 var(--sans); padding: 11px 18px; border-radius: 999px; background: var(--accent); color: var(--onaccent); border: 0; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; justify-self: start; }
.btn.line { background: none; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.btn:disabled { opacity: 0.45; cursor: default; }

/* a game */
.game { background: var(--card); border-radius: var(--r); overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.cover { aspect-ratio: 16 / 6; display: grid; place-items: end start; padding: 14px 16px; }
.cover b { font: 600 16px/1.1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.gbody { padding: 16px 18px 18px; display: grid; gap: 14px; align-content: start; }
.ghead { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.gname { font-weight: 500; font-size: 18px; }
.period { font: 12px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fact { background: var(--bg); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; min-width: 0; }
.strip .fact { background: none; padding: 0; }
.fact b { font: 500 16px/1.2 var(--mono); overflow-wrap: anywhere; }
.fact b.prize { color: var(--chips); }
.cur { font: 11.5px/1 var(--mono); padding: 5px 7px; border-radius: 999px; }
.cur.c { color: var(--chips); background: color-mix(in srgb, var(--chips) 14%, transparent); }
.cur.t { color: var(--tchips); background: color-mix(in srgb, var(--tchips) 14%, transparent); }
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.board li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.board .pos { font: 12px/1 var(--mono); color: var(--muted); }
.board .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .sc, .board .pz { font: 13px/1 var(--mono); }
.board .pz { color: var(--chips); }
.board .none { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.foot { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

.activity { list-style: none; margin: 0; padding: 0; display: grid; }
.activity li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.activity .when { color: var(--muted); font-size: 12px; }
.activity .amt { font: 13px/1.4 var(--mono); white-space: nowrap; }

.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; align-items: end; }
.form label { display: grid; gap: 6px; }
.form .btn { justify-self: stretch; text-align: center; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); margin: 0; max-width: min(560px, calc(100% - 32px));
  background: var(--fg); color: var(--bg); padding: 12px 16px; border-radius: 12px; font-size: 14px; }
.toast.bad { background: var(--bad); }
/* cover colours, one per game (by its code) */
.k0 { background: #123b2c; color: #f0e6c8; } .k1 { background: #3b1e3e; color: #f1d7f0; } .k2 { background: #5b2a1e; color: #f3d9b8; }
.k3 { background: #15254e; color: #e6ebf7; } .k4 { background: #3d4a3a; color: #e9efd9; } .k5 { background: #4a3a14; color: #f5e7c0; }
@media (max-width: 520px) { .whoid { display: none; } .top { gap: 10px; } }
/* a cover with the game's picture: the picture fills it, the name sits on a soft shade at the bottom */
.cover { position: relative; overflow: hidden; }
.cover.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cover.pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 16, 34, 0.62), rgba(10, 16, 34, 0) 45%); }
.cover.pic b { position: relative; z-index: 1; color: #fdfdfb; }
.fact.wide { grid-column: 1 / -1; }

/* ---- each section is a row of game cards: three across, scrolling sideways for more */
.sechead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
@media (max-width: 900px) { .track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 560px) { .track { grid-auto-columns: 82%; } }
.gcard { scroll-snap-align: start; display: grid; gap: 10px; align-content: start; text-decoration: none; color: inherit; min-width: 0; }
.gcard .pic { aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; }
.gcard .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.gcard:hover .pic img { transform: scale(1.03); }
.gname { font: 600 14px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.top3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.top3 li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; }
.top3 span:first-child { font: 12px/1.5 var(--mono); color: var(--muted); }
.top3 .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top3 b { font: 500 12px/1.5 var(--mono); }
.top3 .none { color: var(--muted); font-size: 13px; display: block; }
.cnav { display: flex; gap: 8px; }
.arrow { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--chipbg); color: var(--fg); font: 16px/1 var(--sans); cursor: pointer; }

/* ---- featured games: one hero and two beside it, on the page's own white; buttons on the pictures */
.hero { padding-block: clamp(20px, 3vw, 32px) 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.mosaic { max-width: 1240px; margin: 0 auto; display: grid; gap: 16px; grid-template-columns: 1fr 1fr; grid-template-rows: clamp(300px, 38vw, 480px) clamp(180px, 20vw, 260px); }
.tile { position: relative; overflow: hidden; border-radius: var(--r); display: grid; align-items: end; color: #fdfdfb; min-width: 0;
  box-shadow: 0 10px 30px rgba(21, 37, 78, 0.14); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tile:hover img { transform: scale(1.03); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 13, 28, 0.82), rgba(8, 13, 28, 0.25) 45%, rgba(8, 13, 28, 0) 70%); }
.tover { position: relative; z-index: 1; padding: 16px; display: grid; gap: 12px; }
.tname { color: inherit; text-decoration: none; font: 600 15px/1.1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.tile .modes { max-width: 340px; }
.tile:not(.big) .mode { padding: 8px 6px; }
.tile:not(.big) .tover { gap: 8px; padding: 14px; }
.tile .mode { background: rgba(253, 253, 251, 0.94); }
.tile .mode.ranked { background: rgba(253, 253, 251, 0.94); color: var(--fg); }
.tile .mode.ranked span { color: var(--muted); }
.tile.big { grid-column: 1 / -1; }   /* the feature across the top, the other two below it */
.tile.big .tover { padding: clamp(18px, 2.5vw, 28px); gap: 14px; }
.tile.big .tname { font-size: clamp(18px, 2.2vw, 26px); }
.tile.big img { object-position: 50% 22%; }   /* the wide feature keeps the top of its picture (a face, a skyline) in frame */
/* the layout holds (feature on top, two side by side below) down to phone width; only phones stack */
@media (max-width: 900px) { .tile:not(.big) .modes { grid-template-columns: 1fr; gap: 8px; } .mosaic { grid-template-rows: clamp(260px, 42vw, 400px) 210px; } }
@media (max-width: 480px) { .mosaic { grid-template-columns: 1fr; grid-template-rows: 300px 270px 270px; } }   /* tall enough that the text sits below each picture's action */

/* ---- section headings with a count; cards with Ranked / Practice */
.sechead { justify-content: flex-start; }
.sechead .cnav { margin-left: auto; }
.count { font: 12px/1 var(--mono); color: var(--muted); background: var(--chipbg); border-radius: 999px; padding: 5px 8px; }
.gcard { gap: 12px; }
.gcard .pic { display: block; box-shadow: 0 1px 0 var(--line); }
.gname { text-decoration: none; color: inherit; font-size: 15px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode { display: grid; gap: 3px; justify-items: center; padding: 10px 8px; border-radius: 12px; text-decoration: none; color: var(--fg);
  background: var(--chipbg); transition: background 0.15s ease, transform 0.15s ease; }
.mode:hover { transform: translateY(-1px); background: #e6e8ee; }
.mode b { font: 600 12px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }
.mode span { font: 11.5px/1 var(--mono); color: var(--muted); }
.mode.ranked { background: var(--fg); color: var(--bg); }
.mode.ranked span { color: #c9cfe0; }
.mode.ranked:hover { background: #1f3264; }
.modes > .mode:only-child { grid-column: 1 / -1; }
.btn.small { padding: 8px 12px; font-size: 13px; }
.btn.wide { justify-self: stretch; text-align: center; }

/* ---- sign in: a pop-up */
.modal { border: 0; border-radius: 18px; padding: 24px; width: min(400px, calc(100% - 32px)); background: var(--bg); color: var(--fg);
  box-shadow: 0 24px 60px rgba(21, 37, 78, 0.28); }
.modal::backdrop { background: rgba(21, 37, 78, 0.45); backdrop-filter: blur(3px); }
.modal[open] { display: grid; gap: 16px; }
.mhead { display: flex; align-items: center; justify-content: space-between; }
.mhead h2 { margin: 0; font: 400 24px/1.1 var(--sans); letter-spacing: -0.02em; }
.x { border: 0; background: var(--chipbg); color: var(--fg); width: 32px; height: 32px; border-radius: 50%; font: 18px/1 var(--sans); cursor: pointer; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font: 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* the balance as one control: the claim sits inside it */
button.bal { border: 0; color: var(--fg); display: inline-flex; align-items: center; gap: 0; padding: 4px 4px 4px 12px; cursor: default; }
button.bal .claim { margin-left: 10px; padding: 6px 10px; border-radius: 999px; font: 600 12px/1 var(--sans); background: var(--bg); color: var(--muted); }
button.bal.can { cursor: pointer; }
button.bal.can .claim { background: var(--fg); color: var(--bg); }
button.bal:disabled { opacity: 1; }
button.bal[disabled] .claim:empty { display: none; }
button.bal .unit { margin-left: 0.4em; }
@media (max-width: 420px) { .mark b { display: none; } }   /* phones: the seal alone, so the balance and sign-in fit on one line */

/* the chip: AL DUNLAPOLY's own chip (games/al-dunlapoly/index.html, .chip), used for amounts everywhere */
.chip { display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.22em; vertical-align: -0.14em; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15.5' fill='%23c9a35a'/%3E%3Ccircle cx='16' cy='16' r='13.2' fill='none' stroke='%231d4a2c' stroke-width='4.4' stroke-dasharray='4.15 2.76'/%3E%3Ccircle cx='16' cy='16' r='9.6' fill='%231d4a2c'/%3E%3Cpath d='M11.6 22.4V9.6h2.3l4.4 8V9.6h2.1v12.8h-2.3l-4.4-8v8z' fill='%23e9cf8f'/%3E%3C/svg%3E") center / contain no-repeat; }

/* hover never takes a button's text colour away: on the pictures the buttons stay white, a touch brighter */
.tile .mode:hover, .tile .mode.ranked:hover { background: #ffffff; color: var(--fg); }
.mode.ranked:hover { color: var(--bg); }
button.bal .chip { margin-right: 6px; }
.mode .chip, button.bal .chip { width: 1.15em; height: 1.15em; vertical-align: -0.24em; }

/* the mode buttons on one line: RANKED  [chip] 100 tChips */
.mode { grid-auto-flow: column; justify-content: center; align-items: center; gap: 10px; padding: 12px 10px; white-space: nowrap; }
.mode span { font-size: 12px; }
@media (max-width: 520px) { .modes { grid-template-columns: 1fr; } }   /* phones: one button per line, each on one line */
.mode { min-width: 0; }

/* ---- the mode buttons, settled: the mode on the left, its price on the right, room around both */
.modes { gap: 10px; }
.mode { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 46px; padding: 0 16px; border-radius: 12px; }
.mode b { font: 600 13px/1 var(--sans); letter-spacing: 0.08em; }
.mode span { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--mono); }
.mode span .chip { margin: 0; width: 16px; height: 16px; vertical-align: 0; }
.tile .modes { grid-template-columns: repeat(2, minmax(0, 230px)); max-width: none; }
.tile:not(.big) .mode { height: 40px; padding: 0 14px; }
.tile:not(.big) .modes { grid-template-columns: repeat(2, minmax(0, 210px)); }
.modes > .mode:only-child { grid-column: 1 / -1; justify-content: center; gap: 12px; max-width: 460px; }
@media (max-width: 480px) { .modes, .tile .modes, .tile:not(.big) .modes { grid-template-columns: 1fr; } }
/* the game cards are narrow: their two buttons stack, each still on one line */
.gcard .modes { grid-template-columns: 1fr; }
/* last, so it wins: in narrower windows the smaller pictures keep their buttons side by side, made compact (the chip
   alone says the currency there) */
@media (max-width: 900px) { .tile:not(.big) .modes { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tile:not(.big) .mode { height: 38px; padding: 0 10px; gap: 8px; } .tile:not(.big) .mode b { font-size: 11.5px; letter-spacing: 0.06em; }
  .tile:not(.big) .mode span { font-size: 12px; gap: 4px; } .tile:not(.big) .mode .unit { display: none; } }
@media (max-width: 480px) { .tile:not(.big) .modes { grid-template-columns: 1fr 1fr; } }   /* phones too: side by side, compact */

/* ---- the nav, the featured heading and blurbs, the Profile / Stats / About pages */
.nav { display: flex; gap: 4px; margin-left: clamp(8px, 3vw, 32px); }
.nav a { font: 600 12px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--muted); padding: 10px 12px; border-radius: 999px; }
.nav a:hover { color: var(--fg); background: var(--chipbg); }
.nav a[aria-current="page"] { color: var(--fg); background: var(--chipbg); }
.kicker { max-width: 1240px; margin: 0 auto 14px; font: 600 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.blurb { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.4; color: rgba(253, 253, 251, 0.88); }
.tile:not(.big) .blurb { font-size: 13.5px; }
.facts4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.facts4 .fact { background: var(--card); padding: 14px 16px; }
.facts4 .fact b { font-size: 18px; display: inline-flex; align-items: center; gap: 4px; }
.tablewrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td:not(:first-child), .tbl th:not(:first-child) { text-align: right; font-family: var(--mono); }
.prof { display: grid; gap: 16px; }
.about h3 { margin: 0; font: 500 20px/1.2 var(--sans); letter-spacing: -0.01em; }
.about ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; max-width: 72ch; color: var(--fg); line-height: 1.55; }
.about li::marker { color: var(--muted); }

/* ==== one system: one header, one heading style, one left edge ==== */
/* every block on a page shares the same box: 1240 wide at most, the same side gutter */
.hero { max-width: 1240px; margin: 0 auto; padding-block: clamp(20px, 3vw, 32px) 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 14px; }
.mosaic { max-width: none; margin: 0; }
.kicker { display: none; }
/* the header: the mark, the sections, then the balance and sign-in */
.top { flex-wrap: nowrap; position: relative; }
.nav { margin-left: clamp(12px, 3vw, 36px); }
.nav a { font: 500 14px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); padding: 10px 12px; }
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--chipbg); color: var(--fg); cursor: pointer; place-items: center; }
@media (max-width: 760px) {
  .menu-btn { display: grid; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin: 0; flex-direction: column; gap: 2px;
    background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(21, 37, 78, 0.08);
    padding: 8px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); }
  .menu-open .nav { display: flex; }
  .nav a { font-size: 16px; padding: 14px 12px; border-radius: 10px; }
  .top .right { gap: 8px; }
}
@media (max-width: 420px) { .mark b { display: none; } }
/* Ranked and Practice look the same everywhere (owner, 2026-10-19): on the pictures white, on the page light grey */
.mode.ranked { background: var(--chipbg); color: var(--fg); }
.mode.ranked span { color: var(--muted); }
.mode.ranked:hover, .mode:hover { background: #e6e8ee; color: var(--fg); }
.tile .mode, .tile .mode.ranked { background: rgba(253, 253, 251, 0.94); color: var(--fg); }
.tile .mode:hover, .tile .mode.ranked:hover { background: #ffffff; }

/* ==== the mode buttons, final: each as wide as its own words; side by side when they fit, wrapped when they don't.
   Never a fixed width, so no zoom, font size or window width can clip a price. (Overrides the column rules above.) */
.modes, .tile .modes, .tile:not(.big) .modes, .gcard .modes { display: flex; flex-wrap: wrap; gap: 8px; grid-template-columns: none; max-width: none; }
.mode, .tile .mode, .tile:not(.big) .mode { flex: 1 1 auto; min-width: max-content; height: auto; min-height: 40px; padding: 10px 14px; gap: 12px; }
.tile.big .mode { flex: 0 1 auto; min-width: max-content; padding: 12px 16px; }
.tile:not(.big) .mode .unit { display: none; }   /* the smaller pictures: the chip alone stands for the currency */
@media (max-width: 900px) { .tile:not(.big) .mode .unit { display: none; } }
.modes > .mode:only-child { flex-basis: 100%; }

/* ==== the header, defined once for every width (each step drops the least needed thing; nothing ever wraps) ====
   wide (> 900):   mark + name | Games Profile Stats About | balance (with claim) | Sign in
   medium (≤ 900): mark + name | balance | Sign in | menu button (the sections open as a column)
   small (≤ 560):  mark alone  | balance | Sign in | menu
   tiny (≤ 400):   mark alone  | balance (number and claim only) | Sign in | menu */
.top { flex-wrap: nowrap; gap: 12px; min-height: 64px; }
.mark b { white-space: nowrap; }
.right { flex-wrap: nowrap; gap: 8px; margin-left: auto; }
.right > * { flex: none; }
button.bal { white-space: nowrap; }
.menu-btn { flex: none; }
/* the header is the page's title now (no "Featured games" heading; owner, 2026-10-19): bigger at every width */
.top { min-height: 72px; }
.seal { width: 40px; height: 40px; font-size: 13px; }
.mark { gap: 12px; }
.mark b { font-size: 14px; }
.top .btn { font-size: 15px; padding: 12px 20px; }
button.bal { font-size: 14px; padding: 5px 5px 5px 14px; }
button.bal .claim { font-size: 13px; padding: 7px 12px; }
.menu-btn { width: 44px; height: 44px; }
@media (min-width: 901px) {
  .top { min-height: 88px; gap: 16px; }
  .seal { width: 48px; height: 48px; font-size: 16px; }
  .mark b { font-size: 16px; }
  .nav { margin-left: clamp(16px, 3vw, 44px); }
  .nav a { font-size: 16px; padding: 12px 16px; }
}
@media (max-width: 900px) {
  .menu-btn { display: grid; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin: 0; flex-direction: column; gap: 2px;
    background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(21, 37, 78, 0.08);
    padding: 8px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); }
  .menu-open .nav { display: flex; }
  .nav a { font-size: 16px; padding: 14px 12px; border-radius: 10px; }
}
@media (max-width: 560px) { .mark b { display: none; } }
@media (max-width: 400px) { button.bal .unit { display: none; } button.bal .claim:not(:empty) { margin-left: 8px; } .top { gap: 8px; } .right { gap: 6px; } }

/* ==== the mode buttons: ONE rule everywhere ====
   Always side by side, equal widths, filling their row (at most 480 wide). Each card sizes them to ITSELF (container
   queries), not to the window: as a card narrows, first the word "tChips" goes (the chip still says it), then the
   spacing tightens. The checks in the layout script fail if any button's text is ever cut off. */
.tile, .gcard { container-type: inline-size; }
.modes, .tile .modes, .tile:not(.big) .modes, .gcard .modes { display: flex; flex-wrap: nowrap; gap: 8px; max-width: 480px; }
.mode, .tile .mode, .tile.big .mode, .tile:not(.big) .mode { flex: 1 1 0; min-width: 0; min-height: 44px; height: auto; padding: 0 14px; gap: 10px;
  justify-content: space-between; }
.modes > .mode:only-child { justify-content: center; }
.mode .unit, .tile:not(.big) .mode .unit { display: inline; }
@container (max-width: 520px) { .mode .unit, .tile:not(.big) .mode .unit { display: none; } }
@container (max-width: 300px) { .mode, .tile .mode, .tile:not(.big) .mode { padding: 0 10px; gap: 6px; min-height: 40px; } .mode b { font-size: 11.5px; letter-spacing: 0.05em; } }
@container (max-width: 230px) { .mode span .chip { display: none; } }
/* a card's contents can never be wider than the card */
.tile, .gcard { grid-template-columns: minmax(0, 1fr); }
.tover, .modes, .gcard > * { min-width: 0; }
@container (max-width: 260px) { .mode span .chip { display: none; } }

/* Profile: the display name */
.namebox { display: grid; gap: 8px; max-width: 520px; }
.namerow { display: flex; gap: 8px; }
.namerow input { flex: 1 1 auto; }
.namerow .btn { flex: none; }

/* a time trial's card: the circuit's name, and the game's on its own line beneath (owner, 2026-10-19) */
.gname .circ { display: block; margin-top: 4px; font: 12px/1.2 var(--mono); letter-spacing: 0; text-transform: none; color: var(--muted); }

/* the beta line (Free Plays, rule 4.8): one quiet line under the header, the schedule as small figures */
.beta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; text-align: center;
  padding-block: 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--chipbg); font-size: 15px; }
.beta b { font: 600 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; background: var(--fg); color: var(--bg); padding: 5px 8px; border-radius: 999px; }
#promo-form .small { grid-column: 1 / -1; margin: 0; }