/* USTA tournament pages: one document for the bracket and every group. Color sets the tone; every meaning has a second channel. */
:root {
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --paper:#f4f5f7; --paper-2:#eceef2; --plane:#fff; --plane-2:#f7f8fa; --line:#d9dde5; --line-2:#b3bac6; --line-3:#8a919e;
  --ink:#1c2130; --ink-2:#5d6575; --navy:#1b2150; --blue:#34489a; --link:#2a4a9e;
  --stone-w:#f6f4ee; --stone-w-edge:#c7c2b6; --stone-b:#2b2a28; --stone-b-edge:#111; --stone-b-ink:#f6f4ee;
  /* 0.1.0.9: the header takes the shade of ustak.org's own header (.main-header); a match winner is green */
  --header:#eaf4f7; --win:#2e7d32; --win-bg:#e4f2e5;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r1:4px; --r2:8px; --r3:12px;
  --e1: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(28,33,48,.06), 0 10px 24px -14px rgba(28,33,48,.28);
  --e2: 0 2px 6px -2px rgba(28,33,48,.18), 0 14px 28px -16px rgba(28,33,48,.32);
  --e3: 0 12px 28px -12px rgba(28,33,48,.3), 0 2px 6px rgba(28,33,48,.08);
  --inset: inset 0 2px 4px rgba(28,33,48,.12);
  --lift: translateY(-1px);
  --f-xs:12.5px; --f-s:13.5px; --f-m:15px; --f-l:17px; --f-xl:20px; --f-xxl:26px;
  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M0 .5H44M.5 0V44' stroke='rgba(27,33,80,.08)'/%3E%3Cpath d='M0-3.5 3.5 0 0 3.5-3.5 0Z' fill='rgba(27,33,80,.12)'/%3E%3C/svg%3E");
}

/* base */
*, ::before, ::after { box-sizing:border-box }
body { margin:0; font:400 var(--f-m)/1.45 var(--font); color:var(--ink); background:var(--paper) }
h1, h2, h3, h4, h5 { margin:0; color:var(--navy); font-weight:600; line-height:1.2 }
h2 { font-size:var(--f-xl); margin-bottom:var(--s3) }
a { color:var(--link) }
button { font:inherit }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px }
.wrap { max-width:1160px; margin:0 auto; padding:0 var(--s5) }
.vh, .skip:not(:focus) { position:absolute;width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.skip { position:absolute; left:var(--s4); top:var(--s3);padding:var(--s2) var(--s3); font-weight:600; color:var(--navy); text-decoration:none; background:var(--plane); border-radius:var(--r2) }
.fine, .caption { font-size:var(--f-xs); color:var(--ink-2) }
.caption { margin:-4px 0 var(--s4) }
.num { text-align:right; font-variant-numeric:tabular-nums }
.tag { margin-left:var(--s2); padding:0 7px; font-size:var(--f-xs); color:var(--ink-2); background:var(--plane-2); border:1px solid var(--line); border-radius:999px; white-space:nowrap }
.dagger { font-weight:600 }
.dot { margin:0 2px; color:var(--ink-2) }
.from { font-style:italic; color:var(--ink-2) }
/* raised planes */
.card, .pcard, .tile[data-group], .info { background:var(--plane); border:1px solid var(--line); border-radius:var(--r2); box-shadow:var(--e1) }
.tile[data-group], .info { transition:box-shadow .16s, transform .16s }
.tile[data-group]:hover, .tile[data-group]:focus-visible, .info:hover, .info:focus-visible { box-shadow:var(--e2); transform:var(--lift) }

/* header: the logo alone, in the shade of ustak.org's own header (0.1.0.9: the title moved below, as on the rest of the site) */
.site { background:var(--header); border-bottom:3px solid var(--navy) }
.site .wrap { display:flex; align-items:center; padding-top:var(--s3); padding-bottom:var(--s3) }
.logo img { display:block; height:44px; width:auto }

/* main: the title and the information link first, then the status line */
main { padding-top:var(--s5) }
main > section + section, .col-main > section + section { margin-top:var(--s7) }
/* 0.1.1.21: the seed list's columns (.cols), and the list on its own, sit among the sections */
main > :is(section, .cols, #roster) + :is(section, .cols, #roster) { margin-top:var(--s7) }
.title { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4); margin-bottom:var(--s5) }
.title-text { flex:1 1 16em; min-width:0 }
.title h1 { font-size:var(--f-xxl) }
.sub { margin:2px 0 0; font-size:var(--f-s); color:var(--ink-2) }
.info { margin-left:auto; padding:var(--s2) var(--s3); font-size:var(--f-s); font-weight:600; color:var(--navy); text-decoration:none }
.status { margin:0 0 var(--s6); padding-left:var(--s4); border-left:3px solid var(--navy); font-size:var(--f-l) }
/* the label says what the line is; the word carries it, the fill and outline only echo it */
.state { display:inline-block; margin-right:var(--s2); padding:1px 10px; font-size:var(--f-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; vertical-align:2px; color:var(--navy); background:var(--plane); border:1px solid var(--navy); border-radius:999px }
.state[data-state=finished] { color:#fff; background:var(--navy) }
.state[data-state=upcoming] { border-style:dashed }

/* folds: JS toggles .open; without JS all are open. The body bleeds 12px sideways so shadows are not cut off */
.fold { display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease }
.fold-body { min-height:0; margin:0 -12px; padding:0 12px; overflow:hidden; visibility:hidden; transition:visibility 0s .28s }
.fold.open { grid-template-rows:1fr }
.fold.open .fold-body { visibility:visible; transition-delay:0s }
html:not(.js) .fold { grid-template-rows:1fr }
html:not(.js) .fold-body { visibility:visible }

/* group tiles: pressed in when open, a diamond pointer below; they and the open panel sit on the board (.plane) */
#groups .tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:var(--s3) }
.tile[data-group] { position:relative; display:grid; grid-template-columns:1fr auto; gap:2px var(--s2); min-height:44px; padding:var(--s3) var(--s4); text-align:left; color:var(--ink); cursor:pointer }
.tile-name { font-weight:600 }
.tile-meta, .tile-state { grid-column:1; font-size:var(--f-xs); color:var(--ink-2) }
.chev { grid-column:2; grid-row:1 / span 3; align-self:center; color:var(--ink-2) }
.tile[data-group][aria-expanded=true] { background:var(--plane-2); box-shadow:var(--inset); transform:none }
.tile[aria-expanded=true] .chev { transform:rotate(90deg) }
.tile[aria-expanded=true]::after { content:""; position:absolute; left:calc(50% - 4px); bottom:-9px; width:8px; height:8px; background:var(--plane); border:1px solid var(--line); transform:rotate(45deg) }
/* the fold clips at its edge, so the panel keeps a little room below it for its shadow */
.group .panel { margin:10px 0 var(--s3); padding:var(--s4) var(--s5) var(--s5); background:var(--plane); border:1px solid var(--line); border-radius:var(--r3); box-shadow:var(--e3) }
.group h3 { margin-bottom:var(--s3); font-size:var(--f-l) }

/* standings */
.standings { width:100%; table-layout:fixed; border-collapse:collapse; font-variant-numeric:tabular-nums }
.standings th { padding:var(--s2); font-size:var(--f-s); font-weight:600; letter-spacing:.04em; text-align:left; text-transform:uppercase; color:var(--ink-2); border-bottom:2px solid var(--line) }
.standings th.num { text-align:right }
.standings td { padding:var(--s2); border-bottom:1px solid var(--line); vertical-align:middle }
.standings .place { font-weight:600; white-space:nowrap }
/* a fixed table sizes its columns from the header row; the name takes the rest */
.standings th:first-child { width:64px }
.standings th:nth-child(3) { width:80px }
.standings th:nth-child(4) { width:76px }
.eq { font-weight:400; color:var(--ink-2) }
.hostrow td { padding:0; border:0 }

/* names, marks, flags */
.pname, .gname { display:inline-flex; align-items:center; gap:6px; max-width:100%; min-width:0; margin:-4px 0; padding:4px 2px; text-align:left; color:var(--ink); background:none; border:0; cursor:pointer }
.pname:hover .nm { text-decoration:underline; text-underline-offset:3px }
.gname { font-style:italic; color:var(--ink-2); text-decoration:underline dotted }
.flag { flex:none; width:20px; height:auto }
/* the 4px keeps the selected underline inside the clip */
.nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-bottom:4px; margin-bottom:-4px }
/* the rating never shrinks: a long name is cut short first. Its number, as a link (to the ratings
   page), is dotted-underlined, so it reads as one without relying on color */
.pn { display:inline-flex; align-items:center; gap:4px; max-width:100%; min-width:0 }
.rt { flex:none; color:var(--ink-2); font-weight:400; font-variant-numeric:tabular-nums }
.rt a { color:inherit; text-decoration:underline dotted; text-underline-offset:3px }
.rt a:hover { color:var(--link); text-decoration-style:solid }
.mark { display:inline-block; width:.9em; color:var(--ink-2); visibility:hidden }
.win .mark { visibility:visible }
.win .nm, .is-sel .nm { font-weight:700 }
.is-sel .nm { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px }
/* silent for screen readers; older browsers keep the first */
.is-sel::before { content:"\25B8"; content:"\25B8" / ""; color:var(--ink-2) }
html:not(.js) .pname, html:not(.js) .gname { pointer-events:none; cursor:default }

/* the board: recessed, with its grid. The group stage (.plane) and the bracket (.board-wrap) both sit on one */
.plane, .board-wrap { padding:var(--s4); background:var(--paper-2) var(--grid); border-radius:var(--r3); box-shadow:var(--inset), 0 0 0 1px var(--line) }
/* bracket: raised cards, connectors beneath */
.scroll { overflow-x:auto; scroll-snap-type:x proximity }
.board-wrap { display:inline-block; min-width:100%; vertical-align:top }
/* 0.1.1.22: a board of matches longer than two games reaches past the page's edges on a wide
   window, evenly on both sides, up to 1400px, so the names fit beside the games */
@media (min-width:1220px) {
  #bracket .scroll.wide { margin-inline:calc((min(100vw - 64px, 1400px) - 100%) / -2) }
}
/* 236px: four rounds fit inside the page width */
.board { display:grid; --gap:40px; --col:max(236px, calc(140px + var(--tiles, 2) * 30px)); grid-template-columns:repeat(var(--rounds), minmax(var(--col), 1fr)); grid-template-rows:auto repeat(var(--size), 1fr); column-gap:var(--gap); min-width:calc(var(--rounds) * var(--col) + (var(--rounds) - 1) * var(--gap)) }
/* 0.1.0.9: round names on a raised plate with a navy edge (a tester: "a bit insubstantial") */
.rh { grid-row:1; margin:0 0 var(--s3); padding:var(--s2) var(--s3); font-size:var(--f-m); font-weight:700; letter-spacing:.06em; text-align:center; text-transform:uppercase; color:var(--navy); background:var(--plane); border:1px solid var(--line); border-bottom:3px solid var(--navy); border-radius:var(--r2); box-shadow:var(--e1); scroll-snap-align:start }
.slot { position:relative; display:flex; flex-direction:column; justify-content:center; min-width:0; padding:var(--s2) 0 }
.slot.top::after, .slot.bottom::after { content:""; position:absolute; right:calc(var(--gap) / -2); width:calc(var(--gap) / 2); border:0 solid var(--line-2); border-right-width:2px }
.slot.top::after { top:50%; bottom:0; border-top-width:2px }
.slot.bottom::after { top:0; bottom:50%; border-bottom-width:2px }
.slot.fed::before { content:""; position:absolute; left:calc(var(--gap) / -2); top:50%; width:calc(var(--gap) / 2); border-top:2px solid var(--line-2) }
/* the rows carry the card's vertical padding, so a winner's shading reaches the card's edges */
.card { padding:0 var(--s3) }
.card .prow { display:flex; align-items:center; gap:var(--s2); min-height:48px; padding:var(--s1) 0 }
.card .prow + .prow { border-top:1px solid var(--line) }
.card .pname, .card .gname, .card .from { flex:1 1 auto; min-width:0 }
.prow .tiles, .m .tiles { display:inline-flex; flex:none; align-items:center; gap:4px }
.score { display:inline-grid; flex:none; place-items:center; min-width:26px; height:26px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r1) }
/* 0.1.0.9: the match winner is green (a tester: black already means a game played as black); the
   ▸ and the bold name stay, so it reads without the color too */
.card .prow.win { margin:0 calc(-1 * var(--s3)); padding:var(--s1) var(--s3); background:var(--win-bg) }
.card .prow.win:first-child { border-radius:calc(var(--r2) - 1px) calc(var(--r2) - 1px) 0 0 }
.card .prow.win:last-child { border-radius:0 0 calc(var(--r2) - 1px) calc(var(--r2) - 1px) }
.card .win .mark { color:var(--win) }
.win .score { color:#fff; background:var(--win); border-color:var(--win) }
.cap { margin:0; padding:var(--s1) 0 var(--s2); font-size:var(--f-xs); color:var(--ink-2); border-top:1px solid var(--line) }
.key { margin-top:var(--s4); font-size:var(--f-s); color:var(--ink-2) }
.key summary { font-weight:600; color:var(--ink) }

/* stones: the only black and white on the page */
.tile.w, .tile.b, .tile.empty { position:relative; display:inline-grid; flex:none; place-items:center; width:26px; height:26px; font:700 13px/1 var(--font); text-decoration:none; border:1px solid; border-radius:var(--r1); box-shadow:inset 0 1px 0 rgba(255,255,255,.35) }
.tile.w { color:var(--ink); background:var(--stone-w); border-color:var(--stone-w-edge) }
.tile.b { color:var(--stone-b-ink); background:var(--stone-b); border-color:var(--stone-b-edge); box-shadow:inset 0 1px 0 rgba(255,255,255,.1) }
.tile.empty { background:transparent; border:1px dotted var(--line-3); box-shadow:none }
/* hit areas reach half-way across the gap, never onto a neighbor */
a.tile::before { content:""; position:absolute; inset:-7px -2px }
a.tile.blitz::before { inset:-2px }
.tile.blitz { width:20px; height:20px; margin:0 5px; border-radius:3px; transform:rotate(45deg) }
.tile.blitz > span { font-size:11px; transform:rotate(-45deg) }
.blitz-lbl { margin:0 2px 0 var(--s1); font-size:var(--f-xs); color:var(--ink-2) }
/* 0.1.0.7: a match card row is three items: the games, the match score, then the blitz tiebreak.
   More room and a faint line set them apart; the lines are flex items, not overlays, so a group that
   wraps on a phone keeps its line in front of it */
.prow .res { display:inline-flex; flex:none; align-items:center; gap:var(--s2) }
.prow .res > .tiles::after, .prow .bz::before { content:""; flex:none; width:1px; height:20px; background:var(--line) }
.prow .res > .tiles::after { margin-left:var(--s1) }
.prow .bz::before { margin-right:var(--s1) }
.prow .bz .blitz-lbl { margin-left:0 }

/* player card */
.pcard { padding:var(--s3) var(--s4) }
.host .pcard { margin:var(--s2) 0 var(--s4) }
.pc-head { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s1) var(--s3) }
.pc-head h4 { display:flex; flex:1 1 auto; align-items:center; gap:6px; min-width:0; font-size:var(--f-l) }
.pc-lead { order:1; width:100%; margin:0; font-size:var(--f-s); color:var(--ink-2) }
.pc-close { margin-left:auto; padding:var(--s1) var(--s3); font-size:var(--f-s); color:var(--ink-2); background:none; border:1px solid var(--line); border-radius:999px; cursor:pointer }
html:not(.js) .pc-close { display:none }
.pc-sec { margin:var(--s4) 0 var(--s1); font-size:var(--f-s); text-transform:uppercase; color:var(--ink-2) }
.mlist { margin:0; padding:0; list-style:none }
.m { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s1) var(--s3); padding:var(--s2) 0; border-top:1px solid var(--line) }
.m-round { flex:none; min-width:5.5em; font-size:var(--f-s); color:var(--ink-2) }
.m-vs { flex:1 1 10em; min-width:0 }
#players { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:var(--s4) }
#players h2 { grid-column:1 / -1; margin:0 }
html.js #players { display:none }
@media (min-width:720px) { .slot-fold { display:none } }

/* the information sheet (0.1.0.10): a raised plane that starts open and folds on its heading */
.about { padding:0 var(--s5); background:var(--plane); border:1px solid var(--line); border-radius:var(--r2); box-shadow:var(--e1) }
.about > summary { display:flex; align-items:center; gap:var(--s3); margin:0 calc(-1 * var(--s5)); padding:var(--s3) var(--s5); list-style:none; cursor:pointer }
.about > summary::-webkit-details-marker { display:none }
.about > summary h2 { flex:1 1 auto; margin:0 }
.about > summary .chev { color:var(--ink-2); transition:transform .16s }
.about[open] > summary .chev { transform:rotate(90deg) }
.about[open] > summary { border-bottom:1px solid var(--line) }
.about-body { max-width:62em; padding:var(--s4) 0 var(--s5) }
.about-body h3 { margin:var(--s5) 0 var(--s2); font-size:var(--f-l) }
.about-body h4 { margin:var(--s4) 0 var(--s1); font-size:var(--f-m) }
.about-body p { margin:0 0 var(--s3) }
.about-body .lead { font-size:var(--f-l) }
.about-body ul { margin:0 0 var(--s3); padding-left:1.4em }
.about-body ul ul { margin:var(--s1) 0 0 }
.about-body li { margin:var(--s1) 0 }
.about-body .note { color:var(--ink-2) }

/* the seed list (0.1.1.13): down the right from 1100px (0.1.1.14; the left before), above everything
   else below that. The heading sits above a raised box, as a section's heading above its board, so
   the box starts level with the board beside it; Now and Change show only once page.js has filled
   them (.live) */
#roster { margin-bottom:var(--s6) }
main > #roster { margin-bottom:0 }
.roster-box { padding:var(--s1) var(--s3) var(--s3); background:var(--plane); border:1px solid var(--line); border-radius:var(--r3); box-shadow:var(--e1) }
.roster > summary { display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s3); list-style:none; cursor:pointer }
.roster > summary::-webkit-details-marker { display:none }
.roster > summary h2 { margin:0 }
.roster .count { flex:1 1 auto; font-size:var(--f-xs); color:var(--ink-2) }
.roster .count::before { content:"(" } .roster .count::after { content:")" }
.roster > summary .chev { color:var(--ink-2); transition:transform .16s }
.roster[open] > summary .chev { transform:rotate(90deg) }
.seeds { width:100%; border-collapse:collapse; font-size:var(--f-s); font-variant-numeric:tabular-nums }
.seeds th { padding:var(--s1) var(--s1) var(--s1); font-size:var(--f-xs); font-weight:600; text-align:left; color:var(--ink-2); border-bottom:2px solid var(--line) }
.seeds th.num { text-align:right }
.seeds abbr { text-decoration:none }
.seeds td { padding:3px var(--s1); border-bottom:1px solid var(--paper-2); white-space:nowrap; vertical-align:middle }
.seeds tr:last-child td { border-bottom:0 }
.seeds .seed, .seeds .grp { color:var(--ink-2) }
.seeds .seed { width:2em }
.seeds .who { max-width:0; width:100%; overflow:hidden }
.rname { display:inline-flex; align-items:center; gap:5px; max-width:100%; min-width:0; padding:2px 0; text-align:left; color:var(--ink); background:none; border:0; cursor:pointer; vertical-align:middle }
.rname .flag { width:16px }
.rname:hover .nm { text-decoration:underline; text-underline-offset:3px }
html:not(.js) .rname { pointer-events:none; cursor:default }
.seeds .tag { margin-left:var(--s1); padding:0 5px; font-size:11px }
.seeds td a { color:inherit; text-decoration:underline dotted; text-underline-offset:3px }
.seeds td a:hover { color:var(--link); text-decoration-style:solid }
.seeds .chg { font-size:var(--f-xs); font-weight:600 }
.seeds .chg[data-move=up] { color:var(--win) }
.seeds .chg[data-move=down] { color:#8a3b12 }
.seeds .chg[data-move=same], .seeds .chg[data-move=none] { color:var(--ink-2); font-weight:400 }
.roster:not(.live) .now { display:none }
.roster-note { margin:var(--s2) 0 0 }
.live-note::before { content:" " }
@media (min-width:1100px) {
  /* the list comes first in the page (so it is above everything on a phone) but stands on the right */
  /* 0.1.1.17: as wide as its names, written out in full (300px, names cut short, before) */
  .cols { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--s6); align-items:start }
  .col-main { grid-column:1; grid-row:1 }
  #roster { grid-column:2; grid-row:1; margin-bottom:0 }
  /* on its own (no groups), as wide as its names */
  main > #roster { width:max-content; max-width:100% }
  .seeds .who { max-width:none; width:auto; overflow:visible }
  .seeds .nm { overflow:visible; text-overflow:clip }
  /* only the table sets the list's width: the note below it wraps to the table, never widens it
     (in 0.1.1.17 its one long line made the list take most of the page) */
  .roster-note { width:0; min-width:100% }
}

/* footer */
.foot { margin-top:var(--s8); padding-top:var(--s5); padding-bottom:var(--s7); border-top:1px solid var(--line) }

/* phones: the bracket reads top to bottom */
@media (max-width:719.98px) {
  main > section + section, .col-main > section + section, main > :is(section, .cols, #roster) + :is(section, .cols, #roster) { margin-top:var(--s6) }
  .board { display:block; min-width:0 }
  .plane, .board-wrap { padding:var(--s3) }
  .rh { display:block; margin:var(--s4) 0 var(--s2); text-align:left }
  .slot::before, .slot::after, .board-fold { display:none }
  .card .prow { flex-wrap:wrap }
  /* a group that wraps under a long name stays at the right, under the other row's */
  .card .prow .res, .card .prow .bz { margin-left:auto }
}
/* 40px touch targets */
@media (max-width:719.98px), (pointer:coarse) {
  .pname, .gname { min-height:40px; margin:0 }
  .pc-close, .info { display:inline-flex; align-items:center; min-height:40px }
  .key summary { padding:10px 0 }
}
@media (max-width:479.98px) {
  .wrap { padding-left:var(--s4); padding-right:var(--s4) }
  .logo img { height:36px }
  .title h1 { font-size:var(--f-xl) }
  .info { flex-basis:100%; justify-content:center; margin-left:0; text-align:center }
  .tile.w, .tile.b, .tile.empty { width:30px; height:30px }
  .tile.blitz { width:24px; height:24px }
  .prow .tiles, .m .tiles { gap:6px }
  a.tile::before { inset:-7px -3px }
  .standings th, .standings td { padding:var(--s2) var(--s1) }
  .standings th { font-size:var(--f-xs); letter-spacing:0 }
  .standings th:first-child { width:48px }
  .standings th:nth-child(3) { width:60px }
  .standings th:nth-child(4) { width:58px }
  .group .panel { padding:var(--s3) }
  /* stacked tiles: a pointer would aim at the next tile */
  .tile[aria-expanded=true]::after { display:none }
}

/* motion and print */
/* page.js sets .boot until the first address is applied, so a link to another group does not animate the open one shut */
html.boot *, html.boot ::before, html.boot ::after { transition:none !important }
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth } }
@media (prefers-reduced-motion:reduce) { :root { --lift:none } *, ::before, ::after { transition:none !important } }
@media print {
  .fold { grid-template-rows:1fr }
  .fold-body { visibility:visible }
  html.js #players { display:grid }
  .skip, .pc-close, .info, .slot::before, .slot::after, .board-fold { display:none }
  .board { display:block; min-width:0 }
  .scroll { overflow:visible }
  .site, .plane, .board-wrap, .card, .pcard, .tile[data-group], .group .panel, .rh { background:none; box-shadow:none }
}