/* ============================================================================
   SKIN.CSS (b167) - the portal's own look, after the in-game mod's: square edges,
   a condensed display face on the headings, slanted accent blocks, hairline
   accents. Adam: "capture the sharper corner styling of the beamng mod in the
   portal app everywhere except the commander play table ... im tired of the
   rounded pill design" / "be comprehensive in your redesign ... give it some
   more style ... not just pure AI classic style."
   Scoped under body.menus like menus.css: the play board (no .menus) is untouched.
   No filter / backdrop-filter / will-change (the flicker kill-list, b90).
   ========================================================================== */

body.menus {
  --display: "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", "DIN Alternate", "Roboto Condensed", system-ui, -apple-system, Arial, sans-serif;
  --ink: #041416;                       /* text on the accent */
  --slant: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  --cut: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  --hair: color-mix(in srgb, var(--accent) 55%, transparent);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 14px),
    radial-gradient(1100px 500px at 88% -12%, rgba(54, 194, 206, 0.07), transparent 60%),
    radial-gradient(900px 520px at -10% 8%, rgba(206, 106, 58, 0.04), transparent 60%),
    radial-gradient(1300px 800px at 50% 115%, rgba(22, 25, 34, 0.9), transparent 70%),
    var(--bg);
}

/* ---------- square: one rule over every older radius; the round things stay round ---------- */
body.menus *, body.menus *::before, body.menus *::after { border-radius: 0 !important; }
body.menus :is(.avatar, .avatar img, .avatar--sm, .dot, .pip, .mpip, .ci-pip, .tdot, .chartlegend__dot, .cpick__btn, .userchip__av,
  .userchip__av img, .bvote__face, .bmpmod img, .pwho__av, .dcmsg__av, .avataform__pic, .avamenu__sum, .bmpnow__state i, .podium__av,
  .podium__av img, .medal, .pregame-cmdr__av, .herolv__av, .seattoken__crown, .drvcard .avatar, .podium__drv .avatar) { border-radius: 50% !important; }

/* ---------- type: a condensed display face on the headings ---------- */
body.menus h1.page, body.menus h2, body.menus .brand, body.menus .lvl__num, body.menus .herolv__n, body.menus .rec__num,
body.menus .podium__num, body.menus .rank__name, body.menus .statsec > summary .eyebrow, body.menus .card > .eyebrow:first-child {
  font-family: var(--display); font-stretch: 88%;
}
body.menus h1.page {
  position: relative; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 800; font-size: clamp(24px, 4vw, 32px);
  padding-left: 16px;
}
body.menus h1.page::before {                       /* the slanted block before every page title */
  content: ""; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 6px; background: var(--accent); transform: skewX(-16deg);
}
/* eyebrows over a page title: the mod's slanted accent label */
body.menus .wrap > .eyebrow:first-child, body.menus .wrap > p.eyebrow:first-of-type, body.menus .eyebrow:has(+ h1.page) {
  display: inline-block; padding: 2px 12px; margin-bottom: 8px; color: var(--ink); background: var(--accent);
  clip-path: var(--slant); letter-spacing: 0.18em; font-weight: 900;
}
body.menus .wrap > .eyebrow:first-child a, body.menus .wrap > p.eyebrow:first-of-type a, body.menus .eyebrow:has(+ h1.page) a { color: var(--ink); }
/* eyebrows heading a card or a section: a skewed tick */
body.menus .card .eyebrow, body.menus .statsec > summary .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.16em;
}
body.menus .card .eyebrow::before, body.menus .statsec > summary .eyebrow::before {
  content: ""; flex: 0 0 auto; width: 4px; height: 12px; background: var(--accent); transform: skewX(-16deg);
}
body.menus .sub { font-size: 14.5px; }

/* ---------- top bar ---------- */
body.menus .topbar { border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(54, 194, 206, 0.08), 0 10px 30px rgba(0, 0, 0, 0.35); }
body.menus .topbar::after {                        /* an accent hairline under the bar, strongest on the left */
  content: ""; display: block; height: 1px; background: linear-gradient(90deg, var(--accent), transparent 55%); opacity: 0.55;
}
body.menus .brand { letter-spacing: 0.14em; font-weight: 900; font-size: 16px; text-transform: uppercase; }
body.menus .buildstamp { font-family: var(--mono, monospace); letter-spacing: 0.04em; }
body.menus .nav a { font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; padding: 7px 10px; }
body.menus .nav a:hover { background: rgba(54, 194, 206, 0.09); }
body.menus .nav a.active { color: var(--text); background: linear-gradient(180deg, rgba(54, 194, 206, 0.0), rgba(54, 194, 206, 0.14)); }
body.menus .nav a.active::after { left: 0; right: 0; height: 2px; background: var(--accent); }

/* ---------- panels: straight boxes with an accent corner ---------- */
body.menus .card {
  position: relative;
  background:
    linear-gradient(225deg, var(--hair) 0 7px, transparent 7px) top right / 16px 16px no-repeat,
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 10px 26px rgba(0, 0, 0, 0.32);
}
body.menus .card::before {                         /* a short accent line along the top edge */
  content: ""; position: absolute; left: -1px; top: -1px; width: 48px; height: 2px; background: var(--accent); opacity: 0.8;
  pointer-events: none;
}
body.menus details.statsec { position: relative; }
body.menus details.statsec::before { content: ""; position: absolute; left: -1px; top: -1px; width: 48px; height: 2px; background: var(--accent); opacity: 0.8; }
body.menus .empty { border-style: dashed; }

/* ---------- buttons: square, set in caps; the main ones with a cut corner ---------- */
body.menus .btn { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 12.5px; }
body.menus .btn.small { font-size: 11.5px; letter-spacing: 0.07em; }
body.menus .btn--primary, body.menus .bigcta {
  clip-path: var(--cut); padding-right: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 96%, #fff), color-mix(in srgb, var(--accent) 80%, #04222a));
  text-shadow: none; color: var(--ink);
}
body.menus .btn--primary.small { padding-right: 12px; }
body.menus .btn--ghost:hover, body.menus .btn:not(.btn--primary):hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
body.menus .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- tags and chips: square, a coloured left edge ---------- */
body.menus .tag {
  border-left: 2px solid var(--accent); padding-left: 7px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800; font-size: 11px;
}
body.menus .tag--gold { border-left-color: var(--gold); }

/* ---------- tabs: an underline drawn in from the left ---------- */
body.menus .tabs { border-bottom: 1px solid var(--border); gap: 2px; }
body.menus .tab { position: relative; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; font-size: 12px; }
body.menus .tab.is-active { color: var(--text); background: linear-gradient(180deg, transparent, rgba(54, 194, 206, 0.12)); }
body.menus .tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent);
  transform-origin: left; animation: skin-draw 0.28s cubic-bezier(.16, .84, .24, 1) backwards;
}
@keyframes skin-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- forms: square wells, an accent rule on focus ---------- */
body.menus input[type="text"], body.menus input[type="number"], body.menus input[type="password"], body.menus input[type="search"],
body.menus input[type="email"], body.menus select, body.menus textarea {
  background-color: rgba(8, 10, 14, 0.55); border: 1px solid var(--border); border-bottom-color: color-mix(in srgb, var(--border) 60%, #fff 8%);
}
body.menus input:focus, body.menus select:focus, body.menus textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border)); box-shadow: inset 0 -2px 0 var(--accent);
}
body.menus .fld { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 800; }

/* ---------- tables: caps headers, an accent edge on the row under the pointer ---------- */
body.menus .wins-table th { font-family: var(--display); font-stretch: 88%; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; }
body.menus .wins-table tbody tr { transition: background 0.12s; }
body.menus .wins-table tbody tr:hover { background: linear-gradient(90deg, rgba(54, 194, 206, 0.10), transparent 70%); box-shadow: inset 2px 0 0 var(--accent); }

/* ---------- banners: a thick edge, no bubble ---------- */
body.menus .banner { border-left: 4px solid var(--accent); }
body.menus .banner--gold { border-left-color: var(--gold); }

/* ---------- the stats' records and the level cards: a slanted top accent ---------- */
body.menus .rec::before { left: 0; right: auto; width: 64px; height: 3px; opacity: 1; background: var(--accent); transform: skewX(-24deg); transform-origin: left; }
body.menus .lvl { position: relative; }
body.menus .lvl::before { content: ""; position: absolute; left: -1px; top: -1px; width: 40px; height: 3px; background: var(--accent); }
body.menus .lvl--magic::before { background: #b58cff; }
body.menus .lvl--beam::before { background: var(--accent-2, #ce6a3a); }
body.menus .lvl__bar, body.menus .herolv__bar, body.menus .statbar { overflow: hidden; }
body.menus .lvl__bar span, body.menus .herolv__bar i, body.menus .statbar__fill {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 4px, transparent 4px 9px),
              linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, #000), var(--accent));
}
body.menus .lvl--magic .lvl__bar span, body.menus .herolv__it--magic .herolv__bar i {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 4px, transparent 4px 9px), linear-gradient(90deg, #5b3fa0, #b58cff);
}
body.menus .lvl--beam .lvl__bar span, body.menus .herolv__it--beam .herolv__bar i {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 4px, transparent 4px 9px), linear-gradient(90deg, #7a3a1c, var(--accent-2, #ce6a3a));
}
body.menus .lvl--overall .lvl__bar span, body.menus .herolv__it--overall .herolv__bar i {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0 4px, transparent 4px 9px), linear-gradient(90deg, #8a6a1e, var(--gold));
}

/* ---------- motion: calm, compositor-only; respect the OS setting ---------- */
@media (prefers-reduced-motion: reduce) {
  body.menus *, body.menus *::before, body.menus *::after { animation: none !important; transition: none !important; }
}

/* ============================== b168: pass 2 - the pages ============================== */
/* page heads: a hatch block off the top-right of the content column (decoration only) */
body.menus .wrap { position: relative; }
body.menus h1.page::after {
  content: ""; position: absolute; right: 0; top: -6px; width: min(38%, 340px); height: 64px; pointer-events: none; opacity: 0.55;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent) 0 2px, transparent 2px 10px);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%);
}
/* a section label standing on its own in the page (GAMES, RECENT EVENTS...): the skewed tick */
body.menus .wrap > .eyebrow:not(:first-child):not(:has(+ h1.page)), body.menus .row > .eyebrow, body.menus .row > p.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.16em; font-family: var(--display); font-stretch: 88%;
}
body.menus .wrap > .eyebrow:not(:first-child):not(:has(+ h1.page))::before, body.menus .row > .eyebrow::before, body.menus .row > p.eyebrow::before {
  content: ""; width: 4px; height: 12px; background: var(--accent); transform: skewX(-16deg);
}

/* list rows (saved games, the roster, sessions): an accent edge and a little push on hover */
body.menus :is(.saved, .cmdrrow, .seatlist > a, .rosterrow) { transition: border-color 0.12s, background 0.12s, transform 0.12s; }
body.menus :is(.saved, .cmdrrow):hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); box-shadow: inset 3px 0 0 var(--accent); }
body.menus a.card:hover, body.menus a.saved:hover { transform: translateX(2px); }
body.menus a.card { transition: transform 0.12s, border-color 0.12s; }
body.menus a.card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }

/* the level / count chips (Lv 3, the roster's tallies, the session's numbers): stamped, square */
body.menus .tag, body.menus .chip { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35); }

/* the podium: bevelled step tops, a sheen down the face */
body.menus .podium__step { clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px); border-width: 0;
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--podium-c) 70%, transparent); }
body.menus .podium__num { font-family: var(--display); font-stretch: 88%; font-size: 36px; }

/* the night's highlight tiles and the record cards: square tiles with a top accent */
body.menus .nighthi__it { position: relative; border: 1px solid var(--border); background: rgba(8, 10, 14, 0.35); }
body.menus .nighthi__it::before { content: ""; position: absolute; left: -1px; top: -1px; width: 28px; height: 2px; background: var(--gold); }
body.menus .nighthi__l, body.menus .rec__lbl { font-family: var(--display); font-stretch: 88%; letter-spacing: 0.12em; }

/* scrollbars and selection */
body.menus ::-webkit-scrollbar { width: 10px; height: 10px; }
body.menus ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
body.menus ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 35%, var(--surface-2)); }
body.menus * { scrollbar-color: color-mix(in srgb, var(--accent) 35%, var(--surface-2)) transparent; scrollbar-width: thin; }
body.menus ::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); color: #fff; }

/* details / disclosure: a square chevron */
body.menus details > summary { cursor: pointer; }
body.menus details.statsec > summary::after { content: "+"; margin-left: auto; font-family: var(--display); font-weight: 900; color: var(--accent); }
body.menus details.statsec[open] > summary::after { content: "–"; }

/* the sign-in pages (b168: they carry body.menus.authpage now) */
body.authpage .login-card {
  position: relative; border: 1px solid var(--border); padding: 30px 30px 24px;
  background: linear-gradient(225deg, var(--hair) 0 9px, transparent 9px) top right / 20px 20px no-repeat, linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
body.authpage .login-card::before { content: ""; position: absolute; left: -1px; top: -1px; width: 72px; height: 3px; background: var(--accent); }
body.authpage .login-card .brand { display: block; font-family: var(--display); font-stretch: 88%; font-size: 19px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 900; }
body.authpage .login-card .btn { font-size: 14px; letter-spacing: 0.1em; }
body.authpage .login-shell::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.6;
  background: repeating-linear-gradient(135deg, rgba(54, 194, 206, 0.05) 0 2px, transparent 2px 16px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 25%, #000 75%); mask-image: radial-gradient(circle at 50% 50%, transparent 25%, #000 75%);
}

/* b171: the session page's driver cards in full rows (4 = 2 x 2, 6 = 3 x 2, 8 = 4 x 2) */
body.menus .drvcards--fit { grid-template-columns: repeat(var(--drv-cols, 3), minmax(0, 1fr)); }
@media (max-width: 900px) { body.menus .drvcards--fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { body.menus .drvcards--fit { grid-template-columns: 1fr; } }

/* ---------- b170: the homepage hub - the intro, three ways in, the wire, results beside fresh badges ---------- */
body.menus .hub__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; align-items: stretch; margin-top: 6px; }
body.menus .hub__intro { border: 1px solid var(--border); border-left: 4px solid var(--accent); background: var(--surface); padding: 18px 20px; }
body.menus .hub__lede { margin: 6px 0 0; font-size: 17px; line-height: 1.45; color: var(--text); white-space: pre-line; }
body.menus .hub__modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.menus .hubmode { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-height: 120px; padding: 14px 16px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-decoration: none; position: relative;
  clip-path: var(--cut); transition: border-color .15s, transform .15s; }
body.menus .hubmode::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 48%; background: var(--accent); }
body.menus .hubmode--cmdr::before { background: var(--gold); }
body.menus .hubmode--draft::before { background: #b07cf0; }
body.menus .hubmode:hover { border-color: var(--accent); transform: translateY(-2px); }
body.menus .hubmode__e { font-size: 26px; line-height: 1; margin-bottom: auto; }
body.menus .hubmode b { font-family: var(--display); font-stretch: 88%; text-transform: uppercase; letter-spacing: .04em; font-size: 20px; }
body.menus .hubmode span:last-child { color: var(--muted); font-size: 13px; }
/* b171: a tile's picture (Customize > Homepage) - cover-cropped, faded into the tile's colour behind the words */
body.menus .hubmode--img { min-height: 180px; background-color: var(--surface-2); background-size: cover, cover; background-position: center, center;
  background-image: linear-gradient(to top, rgba(10,12,16,.96) 10%, rgba(10,12,16,.7) 40%, rgba(10,12,16,0) 78%), linear-gradient(var(--img-dim), var(--img-dim)), var(--tile-img);
  background-image: linear-gradient(to top, var(--surface-2) 10%, color-mix(in srgb, var(--surface-2) 72%, transparent) 40%, transparent 78%), linear-gradient(var(--img-dim), var(--img-dim)), var(--tile-img); }
body.menus .hubmode--img .hubmode__e { visibility: hidden; }
body.menus .hubmode--img b, body.menus .hubmode--img span:last-child { text-shadow: 0 1px 3px rgba(0,0,0,.8); }
body.menus .hubmode--img span:last-child { color: var(--text); opacity: .85; }
body.menus .hub__hero--modes, body.menus .hub__hero--intro { grid-template-columns: 1fr; }
body.menus .hub__cols--one { grid-template-columns: 1fr; }
body.menus .custchecks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
body.menus .custtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.menus .custtile .custrow { flex-direction: column; align-items: stretch; gap: 4px; }
body.menus .custtile .custrow__lbl { flex-basis: auto; }
body.menus .custtile input[type=file] { max-width: 100%; }
@media (max-width: 700px) { body.menus .custtiles { grid-template-columns: 1fr; } }
body.menus .custtile__pic { height: 110px; margin-bottom: 8px; border: 1px solid var(--border); background: var(--surface-2) center / cover no-repeat;
  display: flex; align-items: center; justify-content: center; }
body.menus .hub__news { display: grid; grid-template-columns: repeat(var(--news-cols, 4), minmax(0, 1fr)); gap: 10px; }   /* b171: the count picks the columns - full rows */
body.menus .hubnews { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); text-decoration: none; }
body.menus .hubnews:hover { border-color: var(--gold); }
body.menus .hubnews__e { font-size: 22px; line-height: 1.1; }
body.menus .hubnews__body { display: flex; flex-direction: column; min-width: 0; }
body.menus .hubnews__big { font-family: var(--display); font-stretch: 88%; font-size: 20px; color: var(--accent); overflow-wrap: anywhere; }
body.menus .hubnews__say { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--muted-2); }
body.menus .hubnews__sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
body.menus .hub__cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; }
body.menus .hub__badges { padding: 6px 0; }
body.menus .hubbadge { display: flex; gap: 12px; align-items: center; padding: 9px 14px; color: var(--text);
  border-bottom: 1px solid var(--border); }
body.menus .hubbadge:last-child { border-bottom: 0; }
body.menus .hubbadge:hover { background: var(--surface-2); }
body.menus .hubbadge__e { font-size: 22px; width: 28px; text-align: center; }
body.menus .hubbadge__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
body.menus .hubbadge__xp { color: var(--gold); white-space: nowrap; }
body.menus .hubbadge__e, body.menus .hubbadge__nm, body.menus .hubbadge__at { color: inherit; text-decoration: none; }
body.menus .hubbadge__nm { font-weight: 700; }
body.menus .hubbadge__nm:hover, body.menus .hubbadge__at:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 900px) {
  body.menus .hub__hero, body.menus .hub__cols { grid-template-columns: 1fr; }
  body.menus .hub__news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  body.menus .hub__modes { grid-template-columns: 1fr; }
  body.menus .hubmode { min-height: 0; flex-direction: row; align-items: center; gap: 12px; }
  body.menus .hubmode__e { margin-bottom: 0; }
  body.menus .hubmode--img { min-height: 96px; align-items: flex-end; }
  body.menus .hubmode--img .hubmode__e { display: none; }
  body.menus .hub__news { grid-template-columns: 1fr; }
}

/* ---------- b172: the deck page - the art head, the table stats, the decklist open ---------- */
body.menus .deckhead { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 18px 20px; margin-top: 4px; border: 1px solid var(--border); background-color: var(--surface); }
body.menus .deckhead--art { min-height: 168px; background-repeat: no-repeat; background-size: auto, cover; background-position: center, right 30%;
  background-image: linear-gradient(90deg, rgba(22,25,34,1) 28%, rgba(22,25,34,.78) 52%, rgba(22,25,34,.15) 100%), linear-gradient(var(--img-dim), var(--img-dim)), var(--deck-art);
  background-image: linear-gradient(90deg, var(--surface) 28%, color-mix(in srgb, var(--surface) 78%, transparent) 52%, color-mix(in srgb, var(--surface) 15%, transparent) 100%), linear-gradient(var(--img-dim), var(--img-dim)), var(--deck-art); }
body.menus .deckhead__body { min-width: 0; max-width: 680px; }
body.menus .deckhead--art .sub, body.menus .deckhead--art h1.page { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
body.menus .deckhead__pips { margin-left: 6px; display: inline-flex; gap: 3px; vertical-align: middle; }
body.menus .deckhead__credit { position: absolute; right: 10px; top: 6px; font-size: 10.5px; color: rgba(255,255,255,.55); text-shadow: 0 1px 2px #000; }
body.menus .deckhead__btns { position: relative; z-index: 1; }
body.menus .dstats { display: flex; flex-wrap: wrap; gap: 10px; }   /* b174: flex, so a short last row stretches across - no empty slots */
body.menus .dstats > * { flex: 1 1 190px; min-width: 0; }
body.menus .dstat, body.menus .dfoe { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); text-decoration: none; position: relative; }
body.menus .dstat__k { font-family: var(--display); font-stretch: 88%; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--muted); }
body.menus .dstat__v { font-family: var(--display); font-stretch: 88%; font-size: 21px; color: var(--accent); line-height: 1.15; }
body.menus .dstat__s { font-size: 12px; color: var(--muted); }
body.menus .dfoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 12px; }
body.menus .dfoe { border-left: 3px solid var(--accent); }
body.menus .dfoe b { font-size: 16px; }
body.menus .dfoe--n { border-left-color: var(--danger); }
body.menus .deckcards--page { margin: 12px 0 0; padding: 0; border: 0; background: none; }
@media (max-width: 560px) {
  body.menus .deckhead--art { background-position: center, 70% 30%; }
  body.menus .dstats > * { flex-basis: calc(50% - 5px); }
}

/* ---------- b172: the landing pages - the newest session big, start tiles, session cards, picture cards ---------- */
body.menus .land { margin-top: 18px; }
body.menus .land__eyebrow { margin: 0 0 10px; }
body.menus .land__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
body.menus .land__side { display: flex; flex-direction: column; gap: 10px; }
body.menus .sessfeat { position: relative; height: 100%; padding: 16px 18px; border: 1px solid var(--border); border-top: 2px solid var(--accent);
  background-color: var(--surface); background-repeat: no-repeat; }
body.menus .sessfeat--img { background-size: auto, auto, 62% auto; background-position: center, center, right top;
  background-image: linear-gradient(90deg, rgba(22,25,34,1) 38%, rgba(22,25,34,.72) 62%, rgba(22,25,34,.3) 100%),
                    linear-gradient(0deg, rgba(22,25,34,1) 42%, rgba(22,25,34,0) 75%), linear-gradient(var(--img-dim), var(--img-dim)), var(--img);
  background-image: linear-gradient(90deg, var(--surface) 38%, color-mix(in srgb, var(--surface) 72%, transparent) 62%, color-mix(in srgb, var(--surface) 30%, transparent) 100%),
                    linear-gradient(0deg, var(--surface) 42%, transparent 75%), linear-gradient(var(--img-dim), var(--img-dim)), var(--img); }
body.menus .sessfeat--empty { display: flex; flex-direction: column; gap: 6px; justify-content: center; min-height: 160px; }
body.menus .sessfeat__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; position: relative; }
body.menus .sessfeat__id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.menus .sessfeat__lbl { align-self: flex-start; font-family: var(--display); font-stretch: 88%; font-weight: 900; text-transform: uppercase;
  letter-spacing: .18em; font-size: 11px; padding: 3px 12px; background: var(--accent); color: #062224; clip-path: var(--slant); }
body.menus .sessfeat__lbl--live { background: var(--gold); color: #2b2205; }
body.menus .sessfeat__lbl--live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; vertical-align: 1px;
  border-radius: 50% !important; background: #2b2205; }
body.menus .sessfeat__name { font-family: var(--display); font-stretch: 88%; font-size: 26px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; color: var(--text); text-decoration: none; line-height: 1.1; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
body.menus .sessfeat__name:hover { color: var(--accent); }
body.menus .sessfeat__meta { font-size: 13px; color: var(--muted); }
body.menus .sessfeat__who { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; position: relative; }
body.menus .whochip { font-size: 12px; padding: 2px 8px; border: 1px solid var(--border); background: rgba(0,0,0,.25); color: var(--muted-2); }
body.menus .sessfeat__lead { font-size: 12.5px; color: var(--gold); margin-left: 4px; }
body.menus .sessgames { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; position: relative; }
body.menus .sessgame { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px; color: var(--text); text-decoration: none;
  background: rgba(0,0,0,.22); border-left: 2px solid transparent; transition: border-color .15s, background-color .15s; }
body.menus .sessgame__img { flex: 0 0 auto; width: 44px; height: 30px; background: var(--surface-2) center / cover no-repeat; border: 1px solid var(--border); }
body.menus .sessgame__nm { font-weight: 700; font-size: 14px; }
body.menus .sessfeat__more { display: inline-block; margin-top: 8px; position: relative; }
body.menus .sessnew { gap: 8px; align-items: center; flex-wrap: wrap; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--border); position: relative; }
body.menus .starttile { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 14px 16px;
  border: 1px solid var(--border); background: var(--surface); position: relative; }
body.menus .starttile::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--accent); opacity: .7; }
body.menus .starttile--one::before { background: var(--gold); }
body.menus .starttile--browse::before { background: #b07cf0; }
body.menus .starttile__hd { display: flex; gap: 12px; align-items: flex-start; }
body.menus .starttile__ic { font-size: 24px; line-height: 1; }
body.menus .starttile__hd b { display: block; font-family: var(--display); font-stretch: 88%; text-transform: uppercase; letter-spacing: .05em; font-size: 16px; }
body.menus .starttile__hd span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
body.menus .starttile .addrow { flex-wrap: wrap; }
body.menus .starttile .addrow input { min-width: 0; flex: 1 1 100%; }
body.menus .starttile .addrow .btn { flex: 1 1 auto; }
body.menus .starttiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 12px; }
body.menus .oneoffcard { margin-top: 12px; }
body.menus .sesscards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }   /* b174: 4 / 2 / 1 wide - the 8 shown */
@media (max-width: 900px) { body.menus .sesscards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* always fill their rows */
@media (max-width: 480px) { body.menus .sesscards { grid-template-columns: minmax(0, 1fr); } }
body.menus .sesscard { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 118px; padding: 12px 14px; position: relative;
  border: 1px solid var(--border); background-color: var(--surface-2); color: var(--text); text-decoration: none; background-repeat: no-repeat; }

body.menus .sesscard__date { font-family: var(--display); font-stretch: 88%; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; color: var(--accent); }
body.menus .sesscard__name { font-size: 15px; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
body.menus .sesscard__meta { font-size: 12px; color: var(--muted); }
body.menus .sesscard__lead { font-size: 12px; color: var(--gold); }
body.menus .pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }   /* b174: 3 / 2 / 1 wide - the 12 shown */
@media (max-width: 900px) { body.menus .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* always fill their rows */
@media (max-width: 600px) { body.menus .pcards { grid-template-columns: minmax(0, 1fr); } }
body.menus .pcard { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 196px; padding: 12px 14px;
  border: 1px solid var(--border); background-color: var(--surface-2); background-repeat: no-repeat; }
body.menus .pcard, body.menus .sesscard { overflow: hidden; isolation: isolate; }
body.menus .pcard--img::before, body.menus .sesscard--img::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(var(--img-dim), var(--img-dim)), var(--img) center 35% / cover no-repeat; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
body.menus .pcard--img::after, body.menus .sesscard--img::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(31,35,47,1) 34%, rgba(31,35,47,.6) 62%, rgba(31,35,47,.12) 100%);
  background: linear-gradient(0deg, var(--surface-2) 34%, color-mix(in srgb, var(--surface-2) 60%, transparent) 62%, color-mix(in srgb, var(--surface-2) 12%, transparent) 100%); }
body.menus .sesscard--img::after { background: linear-gradient(0deg, rgba(31,35,47,1) 30%, rgba(31,35,47,.55) 70%, rgba(31,35,47,.2) 100%);
  background: linear-gradient(0deg, var(--surface-2) 30%, color-mix(in srgb, var(--surface-2) 55%, transparent) 70%, color-mix(in srgb, var(--surface-2) 20%, transparent) 100%); }
body.menus .pcard__link { position: absolute; inset: 0; z-index: 1; }
body.menus .pcard:not(.pcard--img) { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 10px, transparent 10px 20px); }
body.menus .pcard:not(.pcard--img)::after { content: attr(data-ico); position: absolute; right: 14px; top: 38px; font-size: 64px; line-height: 1; opacity: .09; pointer-events: none; }
body.menus .pcard__top, body.menus .pcard__body { position: relative; z-index: 2; pointer-events: none; }
body.menus .pcard__top { display: flex; flex-wrap: wrap; gap: 6px; padding-right: 34px; }
body.menus .pcard__body { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
body.menus .pcard__name { font-size: 16px; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
body.menus .pcard__meta { font-size: 12.5px; color: var(--muted); }
body.menus .pcard__sess { pointer-events: auto; color: var(--muted-2); }
body.menus .pcard__win { margin-top: 4px; }
body.menus .pcard__del { position: absolute; top: 8px; right: 8px; z-index: 3; margin: 0; }
body.menus .pcard__del .btn { padding: 3px 8px; background: rgba(0,0,0,.45); }
body.menus .gtable__game { white-space: normal; }
body.menus .gcell { display: flex; align-items: center; gap: 10px; }
body.menus .gcell__txt { min-width: 0; }
body.menus .gcell .gthumb { margin-right: 0; flex: 0 0 auto; }
body.menus .gthumb { display: inline-block; width: 46px; height: 32px; margin-right: 10px; vertical-align: middle; border: 1px solid var(--border);
  background: var(--surface-2) center 30% / cover no-repeat; }
body.menus .gthumb--none { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 6px, transparent 6px 12px); }
@media (max-width: 900px) {
  body.menus .land__grid { grid-template-columns: 1fr; }
  body.menus .land__side { flex-direction: row; flex-wrap: wrap; }
  body.menus .land__side .starttile { flex: 1 1 240px; }
  body.menus .starttiles { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body.menus .sessfeat__name { font-size: 21px; }
  body.menus .sessfeat--img { background-size: auto, auto, 100% auto; }
  body.menus .gthumb { width: 34px; height: 24px; margin-right: 6px; }
}
@media (hover: hover) {
  body.menus .pcard__del { opacity: 0; transition: opacity .15s; }
  body.menus .pcard:hover .pcard__del, body.menus .pcard__del:focus-within { opacity: 1; }
}

/* ============================== b172: motion - a little flair, nothing crazy ==============================
   Adam: "add some light animations on hovers and taps and whatnot, some cool text draw in, i want a little more flair but nothing too
   crazy. not like lodestone level of flair." Transform / opacity / clip-path only (cheap on the iPad), entrances fill backwards so a
   page is never stuck half-drawn, hover only where there is a pointer that hovers (no sticky hovers on the iPad), a press on taps.
   Off with prefers-reduced-motion (above) or Customize > Site > Animations (body.nomotion). The Commander play table has no
   body.menus - none of this reaches it. */
@keyframes gnPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes gnSheen { from { transform: translateX(-130%) skewX(-20deg); } to { transform: translateX(230%) skewX(-20deg); } }

@media (prefers-reduced-motion: no-preference) {
  /* b175, Adam: "fullscreen flicker ... when you go to home or roster" - his video: every page load blanked the content (the sections
     started at opacity 0 and rose in), so each click flashed dark. Nothing on the page fades in on arrival any more; the movement is
     the small things below, the hovers and the presses. */
  /* b176: and nothing else on arrival either (Adam: still flickers on some pages) - only Tonight's pulse, hovers and presses move */
  body.menus:not(.nomotion) .sessfeat__lbl--live::before { animation: gnPulse 1.6s ease-in-out infinite; }

  /* hovers - only with a pointer that hovers */
  @media (hover: hover) {
    body.menus:not(.nomotion) :is(.pcard, .sesscard, .hubnews, .hubmode, .dstat, .dfoe, a.statcard, .starttile, .sessgame, .whochip) {
      transition: transform .18s cubic-bezier(.2,.7,.2,1), border-color .18s, background-color .18s, box-shadow .18s; }
    body.menus:not(.nomotion) :is(.pcard, .sesscard, .hubnews, .dstat, .dfoe, a.statcard):hover {
      transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 12px 26px -16px rgba(0,0,0,.9); }
    body.menus:not(.nomotion) :is(.pcard--img, .sesscard--img):hover::before { transform: scale(1.06); }
    body.menus:not(.nomotion) .sessgame:hover { border-left-color: var(--accent); background-color: rgba(0,0,0,.34); transform: translateX(3px); }
    body.menus:not(.nomotion) .starttile:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
    body.menus:not(.nomotion) .gthumb { transition: transform .2s ease; }
    body.menus:not(.nomotion) tr:hover .gthumb { transform: scale(1.12); }
    body.menus:not(.nomotion) .hubbadge__e { transition: transform .2s ease; display: inline-block; }
    body.menus:not(.nomotion) .hubbadge:hover .hubbadge__e { transform: scale(1.18) rotate(-6deg); }
    /* the main buttons: a sheen runs across */
    body.menus:not(.nomotion) :is(.btn--primary, .bigcta) { position: relative; overflow: hidden; }
    body.menus:not(.nomotion) :is(.btn--primary, .bigcta)::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-130%) skewX(-20deg); }
    body.menus:not(.nomotion) :is(.btn--primary, .bigcta):hover::after { animation: gnSheen .7s ease-out; }
    /* links underline from the left */
    body.menus:not(.nomotion) .nav a { background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat;
      background-position: 0 100%; background-size: 0% 2px; transition: background-size .25s ease, color .15s; }
    body.menus:not(.nomotion) .nav a:hover { background-size: 100% 2px; }
  }
  /* taps: a press (iOS needs the touchstart listener in skin.js for :active) */
  body.menus:not(.nomotion) :is(.btn, .bigcta, .tab, .fchip) { transition: transform .1s ease, border-color .15s, background-color .15s, color .15s; }
  body.menus:not(.nomotion) :is(.btn, .bigcta, .tab, .fchip):active { transform: scale(.96); }
  body.menus:not(.nomotion) :is(.pcard, .sesscard, .hubnews, .hubmode, .dstat, .dfoe, a.statcard, .sessgame):active { transform: translateY(1px) scale(.985); transition-duration: .08s; }
}
/* Customize > Site > Animations off */
body.menus.nomotion *, body.menus.nomotion *::before, body.menus.nomotion *::after { animation: none !important; transition: none !important; }

/* ============================== b173: image pools ==============================
   Adam: "i want to make pools of images that are appropriate for different types of boxes ... i just want some more images and
   movement." A box given a picture by its pool (Customize > Images) carries .gimg + .gimg--box|black|none, the picture and its
   strength as --gimg / --gimg-a (inline), and one child, <span class="gimg__pic">: the picture is that span's ::before (cover,
   opacity = strength), the fade its ::after - into the box's own colour (--gimg-bg, from --gimg-dir), to black, or none. The box
   isolates and the span sits at z-index -1, so the picture is under the box's content and its own ::before / ::after decorations
   stay as they were. A page head's picture (.gimg-head) is a span inside .wrap behind the title area, faded out with a mask.
   A box without a picture is untouched. Motion: transform / opacity only, inside the motion rules. */
body.menus .gimg { position: relative; isolation: isolate; --gimg-bg: var(--surface-2); --gimg-dir: 0deg; --gimg-pos: center 35%;
  --gimg-s: 20%; --gimg-m: 60%; --gimg-mp: 55%; --gimg-e: 12%; }   /* the fade: solid to s, m% at mp, e% left at the far end */
body.menus .gimg__pic { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
body.menus .gimg__pic::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--img-dim), var(--img-dim)), var(--gimg) var(--gimg-pos) / cover no-repeat;
  opacity: var(--gimg-a, 1); }
body.menus .gimg__pic::after { content: ""; position: absolute; inset: 0; }
body.menus .gimg--box > .gimg__pic::after {
  background: linear-gradient(var(--gimg-dir), var(--gimg-bg) var(--gimg-s), transparent 100%);
  background: linear-gradient(var(--gimg-dir), var(--gimg-bg) var(--gimg-s), color-mix(in srgb, var(--gimg-bg) var(--gimg-m), transparent) var(--gimg-mp),
                              color-mix(in srgb, var(--gimg-bg) var(--gimg-e), transparent) 100%); }
body.menus .gimg--black > .gimg__pic::after {
  background: linear-gradient(var(--gimg-dir), #000 var(--gimg-s), rgba(0,0,0,.15) 100%);
  background: linear-gradient(var(--gimg-dir), #000 var(--gimg-s), color-mix(in srgb, #000 var(--gimg-m), transparent) var(--gimg-mp),
                              color-mix(in srgb, #000 var(--gimg-e), transparent) 100%); }
body.menus .gimg--none > .gimg__pic::after { content: none; }
/* the cards' accent corner (a background layer, under the picture) drawn again on top */
body.menus .card.gimg::after { content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px; pointer-events: none;
  background: linear-gradient(225deg, var(--hair) 0 7px, transparent 7px); }

/* the boxes: the colour the fade runs into, from the text's side, as strong as the box's words need; a stand-in card fades
   exactly like its siblings with a picture of their own (.pcard--img, .sesscard--img, .hubmode--img, .deckhead--art) */
body.menus :is(.hub__intro, .hubnews, .rec3, .sessfeat, .deckhead).gimg { --gimg-bg: var(--surface); }
body.menus :is(.hub__intro, .hubnews, .rec3, .lvl, .deckhead).gimg { --gimg-dir: 90deg; --gimg-pos: right 35%; }
body.menus .hubmode.gimg { min-height: 180px; --gimg-s: 10%; --gimg-m: 72%; --gimg-mp: 40%; --gimg-e: 0%; }
body.menus .hubmode.gimg .hubmode__e { visibility: hidden; }
body.menus .hubmode.gimg b, body.menus .hubmode.gimg span:last-child { text-shadow: 0 1px 3px rgba(0,0,0,.8); }
body.menus .hubmode.gimg span:last-child { color: var(--text); opacity: .85; }
body.menus .hub__intro.gimg { --gimg-s: 26%; --gimg-m: 76%; --gimg-mp: 60%; --gimg-e: 40%; }
body.menus .hubnews.gimg { --gimg-s: 22%; --gimg-m: 72%; --gimg-mp: 56%; --gimg-e: 34%; }
body.menus .rec3.gimg, body.menus .lvl.gimg { --gimg-s: 22%; --gimg-m: 66%; --gimg-mp: 55%; --gimg-e: 20%; }
body.menus :is(.hub__intro, .hubnews, .rec3).gimg :is(.hub__lede, .hubnews__body, .rec3__line, .rec3__sub), body.menus .lvl.gimg .lvl__title {
  text-shadow: 0 1px 3px rgba(0,0,0,.55); }
body.menus .hubnews.gimg .hubnews__e { text-shadow: 0 1px 4px rgba(0,0,0,.5); }
body.menus .pcard.gimg { --gimg-s: 34%; --gimg-m: 60%; --gimg-mp: 62%; --gimg-e: 12%; }
body.menus .sesscard.gimg { --gimg-s: 30%; --gimg-m: 55%; --gimg-mp: 70%; --gimg-e: 20%; }
body.menus .pcard.gimg::after { content: none; }                 /* (the faded mode icon gives way to the picture) */
body.menus .pcard.gimg .pcard__name, body.menus .sesscard.gimg .sesscard__name { text-shadow: 0 1px 3px rgba(0,0,0,.7); }
body.menus .deckhead.gimg { min-height: 150px; --gimg-s: 28%; --gimg-m: 78%; --gimg-mp: 52%; --gimg-e: 15%; --gimg-pos: right 30%; }
body.menus .deckhead.gimg h1.page, body.menus .deckhead.gimg .sub { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* the latest-session card: the picture in its top right, faded left and down (as .sessfeat--img) */
body.menus .sessfeat.gimg > .gimg__pic { left: 38%; bottom: auto; height: min(100%, 300px); }
body.menus .sessfeat.gimg--box > .gimg__pic::after {
  background: linear-gradient(90deg, var(--surface) 0%, transparent 100%), linear-gradient(0deg, var(--surface) 0%, transparent 70%);
  background: linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 70%, transparent) 40%, color-mix(in srgb, var(--surface) 30%, transparent) 100%),
              linear-gradient(0deg, var(--surface) 0%, transparent 70%); }
body.menus .sessfeat.gimg--black > .gimg__pic::after {
  background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.6) 40%, rgba(0,0,0,.25) 100%), linear-gradient(0deg, var(--surface) 0%, transparent 70%); }
body.menus .gthumb.gimg { background-image: none; --gimg-s: 0%; --gimg-m: 30%; --gimg-mp: 45%; --gimg-e: 0%; }

/* a page head's picture: behind the title area, from under the top bar, soft on every side but the top; Side = the right of it,
   or across */
body.menus .wrap:has(> .gimg-head) { isolation: isolate; }
body.menus .wrap:has(> .gimg-head) h1.page { text-shadow: 0 1px 4px rgba(0,0,0,.55); }
body.menus .gimg-head { position: absolute; top: -22px; right: 0; width: min(74%, 820px); height: 240px; z-index: -1; pointer-events: none;
  --gimg-pos: center 30%; }
body.menus .gimg-head--full { left: 0; width: auto; }
body.menus .gimg-head:is(.gimg--box, .gimg--black) > .gimg__pic {     /* (wider than the column: a vignette, no edge shows) */
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0, #000 38%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 100% at 50% 0, #000 38%, transparent 100%); }
body.menus .gimg-head--full:is(.gimg--box, .gimg--black) > .gimg__pic {
  -webkit-mask-image: radial-gradient(ellipse 50% 112% at 50% 0, #000 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 112% at 50% 0, #000 50%, transparent 100%); }
@media (max-width: 1080px) {                                              /* (the column is the screen: bleed off its right) */
  body.menus .gimg-head:is(.gimg--box, .gimg--black) > .gimg__pic {
    -webkit-mask-image: radial-gradient(ellipse 85% 100% at 100% 0, #000 30%, transparent 100%);
            mask-image: radial-gradient(ellipse 85% 100% at 100% 0, #000 30%, transparent 100%); }
  body.menus .gimg-head--full:is(.gimg--box, .gimg--black) > .gimg__pic {
    -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 35%, transparent 100%); }
}
body.menus .gimg-head.gimg--box > .gimg__pic::after { content: none; }
body.menus .gimg-head--full.gimg--box > .gimg__pic::after { content: "";
  background: linear-gradient(90deg, rgba(13,15,20,.75), rgba(13,15,20,.3) 45%, transparent 70%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 75%, transparent), color-mix(in srgb, var(--bg) 30%, transparent) 45%, transparent 70%); }
body.menus .gimg-head.gimg--black > .gimg__pic::after { background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.4) 45%, transparent 85%); }
body.menus .gimg-head[data-pool="profile.hero"] { height: 280px; }
@media (max-width: 560px) {
  body.menus .gimg-head { width: 100%; height: 200px; }
  body.menus :is(.hubnews, .rec3, .lvl).gimg { --gimg-pos: center 35%; }
  body.menus .sessfeat.gimg > .gimg__pic { left: 0; height: 200px; }
  body.menus .deckhead.gimg > .gimg__pic { left: 0; }
  body.menus .hubmode.gimg { min-height: 96px; align-items: flex-end; }      /* (as a tile's own picture, .hubmode--img) */
  body.menus .hubmode.gimg .hubmode__e { display: none; }
}

/* Customize > Images: the upload, the library, the pools */
body.menus .custup__row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
body.menus .custup__row input[type=file] { flex: 1 1 220px; min-width: 0; max-width: 100%; }
body.menus .custup__pool { display: inline-flex; gap: 8px; align-items: center; }
body.menus .imglib { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
body.menus .imgcard { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border); background: var(--surface-2); min-width: 0; }
body.menus .imgcard__pic { aspect-ratio: 16 / 9; border: 1px solid var(--border); background: var(--surface) center / cover no-repeat; }
body.menus .imgcard__title { width: 100%; }
body.menus .imgcard__chips { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
body.menus .imgcard__chips .tag { font-size: 10px; }
body.menus .imgcard__pools > summary { color: var(--accent); }
body.menus .imgcard__pools[open] { padding-bottom: 4px; border-bottom: 1px dashed var(--border); }
body.menus .imgcard__sec { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
body.menus .imgcard__sk { font-family: var(--display); font-stretch: 88%; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; color: var(--muted); }
body.menus .imgcard__sec label { display: flex; gap: 6px; align-items: center; line-height: 1.3; }
body.menus .imgcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }
body.menus .custpools { margin-top: 10px; }
body.menus .custrow.custpool { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "pv id" "pv set"; gap: 4px 12px;
  align-items: start; margin: 0; padding: 9px 0; border-top: 1px solid var(--border); }
body.menus .custpool:first-child { border-top: 0; }
body.menus .custpool__pv { grid-area: pv; position: relative; height: 62px; border: 1px solid var(--border); background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; --gimg-dir: 90deg; --gimg-pos: center; overflow: hidden; }
body.menus .custpool__pv.custpool__pv--full { --gimg-dir: 180deg; }
body.menus .custpool__from { position: absolute; left: 4px; bottom: 2px; font-size: 10px; color: var(--muted-2); text-shadow: 0 1px 2px #000; }
body.menus .custpool__id { grid-area: id; display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; min-width: 0; line-height: 1.35; }
body.menus .custpool__id b { font-size: 13.5px; }
body.menus .custpool__n { font-size: 12px; color: var(--gold); }
body.menus .custpool--empty .custpool__n { color: var(--muted); }
body.menus .custpool__where { flex: 1 1 100%; font-size: 12px; }
body.menus .custpool__chain { flex: 1 1 100%; color: var(--muted); font-size: 11.5px; }
body.menus .custpool__set { grid-area: set; display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; }
body.menus .custpool__f { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.menus .custpool__f[hidden] { display: none; }
body.menus .custpool__f > span { font-family: var(--display); font-stretch: 88%; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; color: var(--muted); }
body.menus .custpool__f select, body.menus .custpool__f input { width: auto; max-width: 10.5em; height: 30px; min-height: 30px; padding: 2px 8px;
  font-size: 12.5px; line-height: 1.2; }
body.menus .custpool__f--n input { width: 5.6em; }
body.menus .imgcard__title { height: 32px; min-height: 32px; padding: 4px 8px; font-size: 13px; }
@media (max-width: 640px) {
  body.menus .custpool__f select, body.menus .custpool__f input, body.menus .imgcard__title { font-size: 16px; height: 36px; min-height: 36px; }
}
@media (max-width: 560px) {
  body.menus .custrow.custpool { grid-template-columns: 1fr; grid-template-areas: "id" "pv" "set"; }
  body.menus .custpool__pv { height: 56px; }
  body.menus .custpool__set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
  body.menus .custpool__f select, body.menus .custpool__f input, body.menus .custpool__f--n input { width: 100%; max-width: none; }
  body.menus .imglib { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* motion: the pictures fade in, a link box's grows a touch under the pointer. b175, Adam: "fullscreen flicker past my browser window when
   you go to home or roster" - nothing behind a mask moves any more (a page head's slow zoom-and-drift and the zoom-in on arrival went:
   Firefox on Windows re-masks a moving layer every frame); a fade is all the pictures do on arrival */
@media (prefers-reduced-motion: no-preference) {
  body.menus:not(.nomotion) .gimg__pic::before { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  body.menus:not(.nomotion) .gimg-head > .gimg__pic::before { transition: none; }
  @media (hover: hover) {
    body.menus:not(.nomotion) :is(a.gimg, .pcard.gimg):hover > .gimg__pic::before { transform: scale(1.06); }
  }
}

/* b173 (the review): a finished Limited event's results are read-only (the route answers 409 until it's reopened) */
body.menus #rounds.is-finished :is(.mstep, .mres) { pointer-events: none; opacity: .4; }

/* ---------- b174: a column's heading (the draft page's rounds and its standings) - one style, one height, so the columns line up ---------- */
body.menus .colhead, body.menus .round .colhead { font-size: 12px; line-height: 16px; height: 16px; text-transform: uppercase; letter-spacing: .16em; color: var(--accent);
  margin: 0 0 10px; font-weight: 700; }
body.menus .colhead { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-stretch: 88%; }
body.menus .colhead::before { content: ""; flex: 0 0 auto; width: 4px; height: 12px; background: var(--accent); transform: skewX(-16deg); }

/* ---------- b174: the latest session's night in numbers, and its new-game strip on the card's bottom edge ---------- */
body.menus .sessfeat:not(.sessfeat--empty) { display: flex; flex-direction: column; }
body.menus .sessfeat__new { margin-top: auto; }
body.menus .sessstats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; position: relative; }
body.menus .sessstat { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; text-decoration: none;
  color: var(--text); background: rgba(0,0,0,.28); border: 1px solid var(--border); border-top: 2px solid var(--accent-dim, var(--border)); }
body.menus .sessstat:hover { border-color: var(--accent); }
body.menus .sessstat__l { font-family: var(--display); font-stretch: 88%; text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; color: var(--muted); }
body.menus .sessstat__v { font-family: var(--display); font-stretch: 88%; font-size: 21px; color: var(--accent); line-height: 1.15; }
body.menus .sessstat__s { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { body.menus .sessstat { flex-basis: calc(50% - 4px); } }
body.menus .sessfeat__more { align-self: flex-start; }

/* ---------- b176: every picture behind a box a touch darker (Adam: "turn down the brightness on all the picture gradient backgrounds maybe
   10-15%") - a dark layer right over the picture, not a filter (filters flicker); the homepage results: the mode on a bar down the left,
   the event's picture behind, one height each ---------- */
body.menus { --img-dim: rgba(0, 0, 0, .14); }
body.menus .evcard { position: relative; overflow: hidden; isolation: isolate; flex-wrap: nowrap; gap: 14px; height: 76px; padding: 0 16px 0 0;
  border-radius: 0; background-color: var(--surface); }
body.menus .evcard--img::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(22,25,34,1) 30%, rgba(22,25,34,.78) 58%, rgba(22,25,34,.35) 100%),
              linear-gradient(var(--img-dim), var(--img-dim)), var(--img) right 30% / 60% auto no-repeat;
  background: linear-gradient(90deg, var(--surface) 30%, color-mix(in srgb, var(--surface) 78%, transparent) 58%, color-mix(in srgb, var(--surface) 35%, transparent) 100%),
              linear-gradient(var(--img-dim), var(--img-dim)), var(--img) right 30% / 60% auto no-repeat; }
body.menus .evbar { flex: 0 0 26px; align-self: stretch; display: flex; align-items: center; justify-content: center; background: var(--accent); }
body.menus .evbar > span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--display); font-stretch: 88%; font-weight: 900;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #062224; white-space: nowrap; line-height: 1; }
body.menus .evcard--draft .evbar { background: #9b85f5; }
body.menus .evcard--draft .evbar > span { color: #1a1238; }
body.menus .evcard--cmdr .evbar { background: #d68cf5; }
body.menus .evcard--cmdr .evbar > span { color: #2a1033; }
body.menus .evcard__main { flex: 1 1 auto; min-width: 0; }
body.menus .evcard__head { flex-wrap: nowrap; min-width: 0; }
body.menus .evcard__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
body.menus .evcard__res { flex: 0 1 auto; min-width: 0; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.menus .evcard__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
body.menus .evcard .iconrow { flex: 0 0 auto; }
@media (max-width: 520px) { body.menus .evcard .iconrow { display: none; } }
/* b176: a Commander night's stats - the landing card's tiles, a flex row whose last row stretches (no empty slots) */
body.menus .cnight__grid { display: flex; flex-wrap: wrap; gap: 8px; }
body.menus .cnight__grid > .sessstat { flex: 1 1 170px; }
/* b177: the start tiles' forms have no bar of their own - closed they're not there, the tile's button folds them out (and closes them) */
body.menus :is(#draftNewBox, #beamNewBox, #oneoffBox) > summary { display: none; }
body.menus :is(#draftNewBox, #beamNewBox, #oneoffBox):not([open]) { display: none; }
body.menus :is(#draftNewBox, #beamNewBox, #oneoffBox)[open] { border-top: 2px solid var(--gold); }
body.menus .oneoffcard:has(> :is(#draftNewBox, #beamNewBox, #oneoffBox):not([open])) { display: none; }

/* ---------- b177: the player picker (a new Commander session's card, the New game dialog) ---------- */
body.menus .pickp { position: relative; display: flex; flex-direction: column; gap: 12px; }
body.menus .pickp--inline { margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-left: 3px solid var(--gold); background: rgba(0,0,0,.3); }
body.menus .pickp__hd { display: flex; flex-direction: column; gap: 2px; }
body.menus .pickp__hd b { font-family: var(--display); font-stretch: 88%; text-transform: uppercase; letter-spacing: .06em; font-size: 18px; }
body.menus .pickp__grid { display: flex; flex-wrap: wrap; gap: 8px; }
body.menus .pickp__p { position: relative; flex: 0 1 auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-weight: 700; }
body.menus .pickp__p:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
body.menus .pickp__p.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
body.menus .pickp__av { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 50% !important; background: var(--surface); font-size: 13px; color: var(--muted-2); }
body.menus .pickp__av img { width: 100%; height: 100%; object-fit: cover; }
body.menus .pickp__seat:empty { display: none; }
body.menus .pickp__seat { min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #062224; font-family: var(--display); font-weight: 900; font-size: 12px; }
body.menus .pickp__new { display: flex; gap: 8px; max-width: 420px; }
body.menus .pickp__new input { flex: 1 1 auto; min-width: 0; }
body.menus .pickp__ft { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
body.menus .pickp__go:disabled { opacity: .55; cursor: default; }
body.menus dialog.pickdlg { width: min(720px, calc(100vw - 32px)); padding: 18px; border: 1px solid var(--border); border-top: 2px solid var(--accent);
  background: var(--surface); color: var(--text); }
body.menus dialog.pickdlg::backdrop { background: rgba(0, 0, 0, .65); }

/* ---------- b177: the BeamNG stats - by event type, superlatives, wins by type, favourite cars ---------- */
body.menus .bkinds { display: flex; flex-wrap: wrap; gap: 10px; }
body.menus .bkind { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border);
  border-top: 3px solid var(--accent); background: var(--surface-2); }
body.menus .bkind--infection { border-top-color: #7bd389; } body.menus .bkind--sumo, body.menus .bkind--derby { border-top-color: #f08a5d; }
body.menus .bkind--downhill, body.menus .bkind--jump { border-top-color: #f5c84b; } body.menus .bkind--cops { border-top-color: #6ea8ff; }
body.menus .bkind--ctf, body.menus .bkind--jugger { border-top-color: #d68cf5; } body.menus .bkind--flood { border-top-color: #4fc3f7; }
body.menus .bkind__hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--text); text-decoration: none; }
body.menus .bkind__hd b { font-family: var(--display); font-stretch: 88%; text-transform: uppercase; letter-spacing: .05em; font-size: 17px; }
body.menus .bkind__hd span { font-size: 12px; color: var(--muted); }
body.menus .bkind__king { display: flex; align-items: baseline; gap: 8px; color: var(--text); text-decoration: none; }
body.menus .bkind__king b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.menus .bkind__n { font-family: var(--display); font-stretch: 88%; font-size: 22px; color: var(--accent); }
body.menus .bkind__k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
body.menus .bkind__rate { font-size: 13px; }
body.menus .bkwins { width: 100%; border-collapse: collapse; font-size: 14px; }
body.menus .bkwins th, body.menus .bkwins td { padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
body.menus .bkwins th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
body.menus .bkwins .num { text-align: center; font-variant-numeric: tabular-nums; }
body.menus .bcars { display: flex; flex-wrap: wrap; gap: 8px; }
body.menus .bcar { padding: 4px 10px; border: 1px solid var(--border); background: var(--surface-2); font-size: 13px; }

/* b179: the games browser (/games) - each row's mode in the results bar's colour */
body.menus .gmode { display: inline-block; padding: 1px 6px; font-family: var(--display); font-weight: 800; font-size: 10px; letter-spacing: .06em;
  background: var(--accent); color: #062224; }
body.menus .gmode--draft { background: #9b85f5; color: #1a1238; }
body.menus .gmode--cmdr { background: #d68cf5; color: #2a1033; }
body.menus .gtally .is-on { font-weight: 800; }

/* b180: the ranks page's story - the XP by source, night by night */
body.menus .xpsrc__bar { display: flex; height: 14px; background: var(--surface-2); overflow: hidden; }
body.menus .xpsrc__seg { display: block; height: 100%; min-width: 2px; }
body.menus .xpsrc__seg.is-off, body.menus .xpsrc__key.is-off { opacity: .3; }
body.menus .xpsrc__keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
body.menus .xpsrc__key { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; background: none; border: 0; color: inherit; font: inherit;
  font-size: 13px; cursor: pointer; }
body.menus .xpsrc__key i { width: 10px; height: 10px; flex: 0 0 10px; }
body.menus .xpsrc__key.is-on b { text-decoration: underline; }
body.menus .xpday { border: 1px solid var(--border); background: var(--surface); margin-bottom: 6px; }
body.menus .xpday__hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 12px; cursor: pointer; list-style: none; }
body.menus .xpday__hd::-webkit-details-marker { display: none; }
body.menus .xpday__date { font-family: var(--display); font-weight: 800; letter-spacing: .02em; }
body.menus .xpday__xp { margin-left: auto; color: var(--gold, #f5c542); font-weight: 700; white-space: nowrap; }
body.menus .xpup { font-size: 12px; padding: 1px 7px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); font-weight: 700; }
body.menus .xpup--rank { background: color-mix(in srgb, #f5c542 26%, transparent); color: #f5c542; }
body.menus .xpday__items { border-top: 1px solid var(--border); padding: 4px 12px 8px; }
body.menus .xpit { display: flex; align-items: center; gap: 10px; padding: 5px 0; min-width: 0; }
body.menus .xpit + .xpit { border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
body.menus .xpit__ic { flex: 0 0 22px; text-align: center; text-decoration: none; }
body.menus .xpit__body { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.menus .xpit__xp { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--gold, #f5c542); }
body.menus .xpolder > summary { list-style: none; margin: 4px 0 8px; display: inline-block; }
body.menus .xpolder > summary::-webkit-details-marker { display: none; }
body.menus .xpit[hidden], body.menus .xpday[hidden] { display: none; }
body.menus .xphalf { flex: 0 0 auto; font-size: 11px; color: var(--muted); border: 1px solid var(--border); padding: 0 5px; white-space: nowrap; }

/* ===================================================================================================================================
   b182: the mobile pass (Adam: "please do a deep mobile pass with screenshots of every page in the app ... make sure it works on thinner
   mobile screens and looks great everywhere"). Shot at 320 / 390 px on the real data; tools: tests/test_b182_mobile.py.
   =================================================================================================================================== */
/* grid and flex children never push their track wider than the screen (1fr = minmax(auto, 1fr): a long nowrap line widened it) */
body.menus .card, body.menus .wrap > div { min-width: 0; }
body.menus :is(.cols, .hub__cols, .drvcards, .custtiles, .setup-2col, .nightgrid, .beamsum-grid, .refcols, .sesscards, .pcards, .dstats, .statgrid) > * { min-width: 0; }
body.menus .hub__cols--one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { body.menus .hub__hero, body.menus .hub__cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 880px) { body.menus .cols, body.menus .cols--even { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { body.menus .custtiles { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { body.menus .drvcards--fit { grid-template-columns: minmax(0, 1fr); } }
body.menus .drvcard__nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.menus .drvcard__car { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* card / section headings: block, the tick inline - a long "· 66 events that count" wraps like text, not into a squeezed column */
body.menus .card .eyebrow, body.menus .statsec > summary .eyebrow, body.menus .wrap > .eyebrow:not(:first-child):not(:has(+ h1.page)):not(p:first-of-type),
body.menus .row > .eyebrow, body.menus .row > p.eyebrow { display: block; }
body.menus .card .eyebrow::before, body.menus .statsec > summary .eyebrow::before,
body.menus .wrap > .eyebrow:not(:first-child):not(:has(+ h1.page))::before, body.menus .row > .eyebrow::before, body.menus .row > p.eyebrow::before {
  display: inline-block; vertical-align: -1px; margin-right: 8px; }
body.menus .eyebrow .muted { letter-spacing: 0.04em; }
body.menus .statsec > summary { min-width: 0; }
body.menus .statsec > summary .eyebrow { flex: 0 1 auto; min-width: 0; }

/* page titles: a long word breaks instead of running off the side */
body.menus h1.page { overflow-wrap: break-word; }

/* the phone tables (skin.js): a row is a card - the main cell on top, the rest label + value */
body.menus .rt-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
body.menus .rt-wrap > table { min-width: 100%; }
body.menus .rt-wrap > table.wins-table { width: 100%; }
body.menus .wins-table td.num, body.menus .wins-table th.num { white-space: nowrap; }
body.menus table.rt, body.menus table.rt tbody { display: block; width: 100%; }
body.menus table.rt thead { display: none; }
body.menus table.rt tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
body.menus table.rt tr[hidden] { display: none; }
body.menus table.rt td { display: block; padding: 0; border: 0; text-align: left !important; white-space: normal; min-width: 0; max-width: 100%;
  font-size: 13px; }
body.menus table.rt td.rt-main { flex: 1 1 100%; font-size: 14.5px; }
body.menus table.rt td:not(.rt-main)[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; margin-bottom: 1px;
  font-family: var(--display); font-stretch: 88%; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); }
body.menus table.rt td:empty, body.menus table.rt td.gtable__del:not(:has(*)) { display: none; }
body.menus table.rt .gtable__sess { max-width: none; }
body.menus table.rt .gcell { align-items: center; }

/* the stats heatmap: short column names on a phone */
body.menus .hm-s { display: none; }
@media (max-width: 480px) { body.menus .hm-l { display: none; } body.menus .hm-s { display: inline; } }
body.menus .heatmap__cell { min-width: 0; }

/* the homepage results: the name gives way to the winner chip, the meta line ellipsizes */
body.menus .evcard__head > :first-child { min-width: 0; }
body.menus .evcard__head > :not(:first-child) { flex: 0 0 auto; }
body.menus .evcard__meta, body.menus .evcard__sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* in-game: a grid row's name box flexes */
body.menus .ig-gridrow { flex-wrap: wrap; min-width: 0; flex: 1 1 260px; }
body.menus .ig-gridname { flex: 1 1 9em; min-width: 0; width: auto; max-width: 100%; }

/* the draft match card: names over the score on a phone */
body.menus .match:not(.bye) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
@media (max-width: 480px) {
  body.menus .match:not(.bye) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "l r" "s s" "x x" "n n"; row-gap: 8px; }
  body.menus .match:not(.bye) > .side:not(.right) { grid-area: l; }
  body.menus .match:not(.bye) > .side.right { grid-area: r; }
  body.menus .match:not(.bye) > .mscore { grid-area: s; justify-content: center; }
  body.menus .match:not(.bye) > .mresult { grid-area: x; }
  body.menus .match:not(.bye) > .mnote { grid-area: n; }
}

/* the cube / planar / scheme card grids: two a row on a phone */
@media (max-width: 480px) {
  body.menus .cmdr-arts--full, body.menus .cmdr-arts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.menus .cubetop { flex-direction: column-reverse; align-items: flex-start !important; gap: 4px; }
}

/* phones */
@media (max-width: 640px) {
  body.menus .wrap > .row, body.menus .wrap > .row > .row { flex-wrap: wrap; }
  body.menus .btn { white-space: normal; max-width: 100%; }
  body.menus .wrap img { max-width: 100%; }
  body.menus .wrap input:not([type=checkbox]):not([type=radio]), body.menus .wrap select, body.menus .wrap textarea { max-width: 100%; }
  body.menus .rosrow .saved__title { white-space: normal; overflow-wrap: anywhere; }
  body.menus .dstats > * { flex-basis: 130px; }
  body.menus .bcar { white-space: normal; }
  body.menus .profopts { margin-left: auto; }
  body.menus.authpage .login-card { padding: 24px 18px 20px; max-width: 100%; }
}
@media (max-width: 400px) {
  body.menus h1.page { font-size: 22px; }
  body.menus .wrap { padding-left: 14px; padding-right: 14px; }
}
body.menus .evcard__res { max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.menus.authpage .login-shell { grid-template-columns: minmax(0, 1fr); }
body.menus.authpage .login-card { width: 100%; max-width: 380px; justify-self: center; }
body.menus .bcar { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { body.menus .drvcard__car { white-space: normal; } }
@media (max-width: 400px) { body.menus.authpage .login-card .brand { font-size: 15.5px; letter-spacing: 0.04em; } }
/* b182: a heading inside a <summary> stays on the summary's line (the arrow, the heading, its count) */
body.menus summary .eyebrow, body.menus .card summary .eyebrow { display: inline; }
body.menus .statsec > summary { flex-wrap: wrap; row-gap: 2px; }
body.menus .statsec > summary .eyebrow { flex: 0 0 auto; display: inline-block; }
body.menus .eyebrow { overflow-wrap: anywhere; }
body.menus table td.num, body.menus table th.num { white-space: nowrap; }
body.menus .statsec > summary .eyebrow { flex: 0 1 auto; max-width: 100%; }
body.menus .bkind { min-width: 0; }
body.menus .bkind__hd { flex-wrap: wrap; }