/* World Chess site styles. Tokens follow the World Chess Table board: lapis, gold, wood, red and green armies. */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:rgba(255,255,255,.94); --soft:#F3F5F7; --ink:#18202C; --muted:#566173; --line:#C9D0D8;
  --lapis:#2B4E9B; --lapis-tint:rgba(43,78,155,.13); --gold:#B07F22; --alert:#B0362B; --ok:#2D6A3B; --army:#FFF1D0;
  --sq-l:#E8D2A6; --sq-d:#A97A4F; --sq-a:#E4C995; --sq-b:#D2B077; --frame:#7A5130; --wood:#DEBF8B; --grid:#111111; --off:#D6DADF; --off-line:#C3C9D0;
  --ivory:#B5352B; --ivory-ink:#FFF4E6; --ebony:#2D6A3B; --ebony-ink:#F0F7EA; --ivory-edge:#6B1A13; --ebony-edge:#143A20; --badge-ink:#2A241E;
  --veil:rgba(255,255,255,.92);
  --f-display:'Alegreya', Georgia, 'Times New Roman', serif;
  --f-ui:'Alegreya Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  color-scheme:light;
}
/* The site is white (light) everywhere; dark colours apply only where a page sets data-theme="dark". */
:root[data-theme="dark"]{
  --bg:#10141A; --surface:#181E27; --surface-2:rgba(24,30,39,.88); --ink:#E6E9EF; --muted:#98A2B3; --line:#2C3542;
  --lapis:#8AA9EC; --lapis-tint:rgba(138,169,236,.18); --gold:#D9A946; --alert:#E66B5F; --ok:#6FBF83;
  --sq-l:#CDB083; --sq-d:#85593A; --sq-a:#C7A472; --sq-b:#B48F5C; --frame:#4A2E18; --wood:#C29C64; --grid:#0B0B0B; --off:#1F2630; --off-line:#2A3340;
  --ivory:#C2433A; --ebony:#367A47; --ivory-edge:#4E120D; --ebony-edge:#0D2815; --veil:rgba(16,20,26,.88); color-scheme:dark; }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-ui); font-size:16px; line-height:1.5; min-height:100vh}
a{color:var(--lapis)}
img{max-width:100%}
button, input, select, textarea{font:inherit; color:var(--ink)}
:focus-visible{outline:2px solid var(--lapis); outline-offset:2px}

/* ---------- faded historical backdrop ---------- */
.backdrop{position:fixed; inset:0; z-index:-2; background-size:cover; background-position:center; filter:grayscale(.35) sepia(.25) contrast(.95); opacity:0; transition:opacity .8s ease}
.backdrop.on{opacity:1}
.backdrop-veil{position:fixed; inset:0; z-index:-1; background:linear-gradient(180deg, var(--veil) 0%, var(--veil) 55%, color-mix(in srgb, var(--bg) 96%, transparent) 100%)}
.backdrop-credit{font-size:12px; color:var(--muted)}
.backdrop-credit a{color:inherit}
@media (prefers-reduced-motion: reduce){ .backdrop{transition:none} }

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:20; background:var(--surface-2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.site-head .in{max-width:1240px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:10px 22px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand svg{width:34px; height:34px}
.brand b{font-family:var(--f-display); font-size:23px; letter-spacing:.01em; line-height:1}
.site-nav{display:flex; gap:2px; flex-wrap:wrap}
.site-nav a{font-weight:700; text-decoration:none; color:var(--muted); padding:6px 11px; border-radius:6px}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink); background:var(--lapis-tint)}
.who{margin-left:auto; display:flex; align-items:center; gap:8px}
.who a{text-decoration:none; font-weight:700}

/* ---------- layout ---------- */
.wrap{max-width:1240px; margin:0 auto; padding:24px 16px 56px}
.narrow{max-width:760px}
h1, h2, h3{font-family:var(--f-display); font-weight:700; text-wrap:balance; margin:0}
h1{font-size:clamp(30px, 5vw, 46px); line-height:1.06}
h2{font-size:26px; margin-bottom:8px}
h3{font-size:19px}
.lede{font-size:19px; color:var(--muted); max-width:62ch; margin:12px 0 0}
.lbl{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700}
.muted, .empty{color:var(--muted)}
.empty{font-size:14px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 18px; min-width:0}
.card h3{margin:0 0 8px}
.card h4{font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin:14px 0 6px}
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr))}
.section{margin-top:40px}
.section > header{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px}

/* ---------- controls ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:7px 14px; cursor:pointer; font-weight:600; text-decoration:none; color:var(--ink)}
.btn:hover{border-color:var(--lapis)}
.btn.primary{background:var(--lapis); border-color:var(--lapis); color:var(--surface); font-weight:700}
.btn.danger{color:var(--alert)}
.btn.small{padding:4px 10px; font-size:14px}
.btn[disabled]{opacity:.45; cursor:default}
.field{display:flex; flex-direction:column; gap:4px; margin-bottom:12px}
.field label{font-size:13px; font-weight:700; color:var(--muted)}
input[type=text], input[type=email], input[type=password], select, textarea{background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:8px 10px; width:100%; max-width:100%}
.toggle{display:inline-flex; align-items:center; gap:7px; font-size:15px; cursor:pointer}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex-wrap:wrap}
.seg button{border:0; background:var(--surface); padding:7px 12px; cursor:pointer; font-weight:600; color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--lapis); color:var(--surface)}
.err{color:var(--alert); font-weight:600; min-height:1.4em}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:8px; font-weight:600; z-index:50; max-width:calc(100% - 32px)}

/* ---------- home ---------- */
.hero{padding:36px 0 8px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:32px; align-items:center}
@media (max-width:860px){ .hero{grid-template-columns:minmax(0,1fr)} }
.hero .cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.hero-board{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px}
.hero-board svg{display:block; width:100%; height:auto}
.stats{display:flex; gap:28px; flex-wrap:wrap; margin-top:24px}
.stats div{display:flex; flex-direction:column}
.stats b{font-family:var(--f-display); font-size:32px; line-height:1}
.stats span{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.region-row{display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr))}
.gcard{display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px}
.gcard:hover{border-color:var(--lapis)}
.gcard .n{font-family:var(--f-mono); font-size:12px; color:var(--muted)}
.gcard b{font-family:var(--f-display); font-size:18px}
.gcard small{color:var(--muted); font-size:13px}
.region-title{margin:26px 0 10px; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700; border-bottom:1px solid var(--line); padding-bottom:6px}

/* ---------- lobby ---------- */
.lobby{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:24px; align-items:start}
@media (max-width:900px){ .lobby{grid-template-columns:minmax(0,1fr)} }
.tables{display:flex; flex-direction:column; gap:8px}
.trow{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:10px 14px}
.trow .g{font-weight:700}
.trow .s{color:var(--muted); font-size:14px}
.trow .act{margin-left:auto; display:flex; gap:6px}

/* ---------- game page ---------- */
.play{display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:24px; align-items:start}
@media (max-width:960px){ .play{grid-template-columns:minmax(0,1fr)} }
.gamehead{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-bottom:10px}
.gamehead h2{margin:0}
.gamehead .num{font-family:var(--f-mono); font-size:13px; color:var(--muted)}
.gamehead .origin{color:var(--muted); font-size:14px}
.status{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px}
.pill{display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:14px; padding:5px 11px; border-radius:999px; background:var(--surface); border:1px solid var(--line)}
.pill .sw{width:13px; height:13px; border-radius:50%; border:1.5px solid var(--ink)}
.pill.check{border-color:var(--alert); color:var(--alert)}
.pill.over{border-color:var(--lapis); color:var(--lapis)}
.pill.think{border-color:var(--gold); color:var(--gold)}
.boardbox{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px}
#board{display:block; width:100%; height:auto; max-height:min(80vh, 780px); touch-action:manipulation; user-select:none; -webkit-user-select:none}
#board .hit{cursor:pointer}
.controls{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; align-items:center}
.panel{display:flex; flex-direction:column; gap:14px; min-width:0}
ul.diffs{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px}
ul.notes{margin:0; padding-left:18px; color:var(--muted); font-size:14px}
.prompt{border-color:var(--gold)}
.prompt .row, .row{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.choice{display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 4px}
table.key{width:100%; border-collapse:collapse; font-size:14px}
table.key td{padding:4px 6px 4px 0; vertical-align:middle; border-top:1px solid var(--line)}
table.key tr:first-child td{border-top:0}
table.key td.tok{width:36px}
table.key .local{font-weight:700}
table.key .sculpt{color:var(--muted); font-size:12.5px}
.log{font-family:var(--f-mono); font-size:13px; max-height:240px; overflow:auto; display:grid; grid-template-columns:2.6em 1fr 1fr; gap:2px 8px; font-variant-numeric:tabular-nums}
.opening-name{margin:-2px 0 8px; font-size:13px; font-style:italic; color:var(--muted)}
.log .n{color:var(--muted)}
.hand{display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:38px}
.hand button{background:none; border:1px solid var(--line); border-radius:8px; padding:2px 6px 2px 2px; cursor:pointer; display:inline-flex; align-items:center; gap:3px; font-family:var(--f-mono); font-size:12px}
.hand button.on{border-color:var(--lapis); background:var(--lapis-tint)}
svg.tk{display:block}
.seats{display:flex; flex-direction:column; gap:6px}
.seat{display:flex; align-items:center; gap:10px}
.seat .nm{font-weight:700}
.seat .tm{margin-left:auto; font-size:13px; color:var(--muted)}
.seat.turn .nm::after{content:" · to move"; font-weight:500; color:var(--gold)}
.share{display:flex; gap:6px}
.share input{font-family:var(--f-mono); font-size:13px}

/* ---------- reference pages ---------- */
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 22px}
.chips a{font-size:13px; text-decoration:none; color:var(--ink); border:1px solid var(--line); background:var(--surface); padding:4px 10px; border-radius:999px}
.chips a:hover{border-color:var(--lapis)}
.region{margin:26px 0 10px; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700; border-bottom:1px solid var(--line); padding-bottom:6px}
.rulegrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap:16px}
.rulecard{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 18px; min-width:0; scroll-margin-top:80px}
.rulecard header{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:6px}
.rulecard h3{font-size:21px}
.rulecard .meta{color:var(--muted); font-size:13.5px}
.rulecard .zone{font-family:var(--f-mono); font-size:12px; color:var(--muted)}
.playlink{margin-left:auto; font-size:14px; font-weight:700; text-decoration:none}
.baseline{background:var(--surface); border:1px dashed var(--line); border-radius:10px; padding:14px 18px; max-width:76ch}
.totals{display:flex; flex-wrap:wrap; gap:24px; margin:8px 0 20px}
.totals div{display:flex; flex-direction:column}
.totals b{font-family:var(--f-display); font-size:30px; line-height:1; font-variant-numeric:tabular-nums}
.totals span{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.piecegrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap:14px}
.pc{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px; min-width:0; scroll-margin-top:80px}
.pc .top{display:flex; gap:12px; align-items:center}
.pc .count{margin-left:auto; text-align:right}
.pc .count b{font-family:var(--f-display); font-size:24px; display:block; line-height:1}
.pc .count small{font-size:11px; color:var(--muted)}
.pc ul.uses{margin:10px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; font-size:13.5px}
.pc ul.uses li{display:grid; grid-template-columns:minmax(0,9.5em) minmax(0,1fr); gap:8px; border-top:1px solid var(--line); padding-top:4px}
.pc ul.uses li .g{color:var(--muted)}
.pc .promo{font-size:11px; color:var(--gold); font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.ency{margin:10px 0 0; border-top:1px solid var(--line); padding-top:6px}
.ency summary{cursor:pointer; font-size:14px; font-weight:700; padding:4px 0}
.ency-body{font-size:14.5px; line-height:1.55}
.ency-body p{margin:8px 0 0}
.ency-body ul{margin:6px 0 0; padding-left:18px}
.roster{display:flex; flex-wrap:wrap; gap:6px 10px; margin:0 0 26px; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:10px}
.roster a{display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--ink); padding:6px 8px; border-radius:8px; min-width:0; max-width:100%}
.roster a:hover{background:var(--lapis-tint)}
.roster .pcs{display:flex; flex-wrap:wrap; gap:1px}
.roster .nm{font-size:12px; line-height:1.2; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}

/* ---------- credits ---------- */
.credits{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:14px}
.credit{background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column}
.credit .thumb{aspect-ratio:16/10; background:var(--off) center/cover no-repeat}
.credit .body{padding:10px 14px 14px; font-size:14px}
.credit .body b{display:block; font-family:var(--f-display); font-size:16px}

footer.site-foot{border-top:1px solid var(--line); background:var(--surface-2)}
footer.site-foot .in{max-width:1240px; margin:0 auto; padding:16px; display:flex; gap:8px 20px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
footer.site-foot a{color:inherit}

@media (max-width:640px){
  .site-head .in{gap:6px 12px; padding:8px 16px}
  .brand b{font-size:20px}
  /* signed in, the account buttons wrap onto their own lines instead of pushing the page sideways */
  .who{order:2; flex-wrap:wrap; min-width:0; max-width:100%; gap:6px}
  .site-nav{order:3; width:100%}
  .site-nav a{padding:5px 9px}
  .wrap{padding-top:16px}
}

/* ---------- trainer page ---------- */
.tr-top{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px}
@media (max-width:860px){ .tr-top{grid-template-columns:minmax(0,1fr)} }
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; background:var(--muted)}
.dot.on{background:var(--ok)}
.tr-scroll{overflow-x:auto; padding:8px 10px}
.tr-table{width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; min-width:720px}
.tr-table th{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); text-align:left; padding:8px 8px; border-bottom:1px solid var(--line); font-weight:700}
.tr-table td{padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:middle}
.tr-table tr.reg td{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; padding-top:16px}
.tr-table tbody tr[data-v]{cursor:pointer}
.tr-table tbody tr[data-v]:hover td{background:var(--lapis-tint)}
.tr-table .num{text-align:right; white-space:nowrap}
.res{display:flex; height:10px; width:120px; border-radius:3px; overflow:hidden; background:var(--off)}
.res i{display:block; height:100%}
.tr-feed{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px}
.tr-feed li{display:grid; grid-template-columns:8.5em minmax(0,1fr); gap:10px; border-bottom:1px solid var(--line); padding-bottom:6px}
.tr-feed .when{color:var(--muted); font-size:13px}
.tag{display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:1px 7px; border-radius:999px; border:1px solid var(--line); margin-right:6px}
.tag.champion{border-color:var(--ok); color:var(--ok)}
.tag.error{border-color:var(--alert); color:var(--alert)}
.pipe{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px}
@media (max-width:860px){ .pipe{grid-template-columns:minmax(0,1fr)} }
.pipe .card.now{border-color:var(--lapis); box-shadow:inset 0 0 0 1px var(--lapis)}
.pipe .when{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:700}
.pipe ul{margin:8px 0 0; padding-left:18px; font-size:14px}
.chart svg{display:block; width:100%; height:auto}
.legend{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--muted); margin-top:6px}
.legend i{display:inline-block; width:14px; height:3px; vertical-align:middle; margin-right:6px}

/* ---------- training wheels ---------- */
.btn.coach{gap:8px}
.btn.coach.on{border-color:var(--gold); background:color-mix(in srgb, var(--gold) 12%, var(--surface))}
.card.focus{border-color:var(--gold)}
.focus-head{display:flex; align-items:center; gap:10px}
ul.diffs li.hl{background:color-mix(in srgb, var(--gold) 18%, transparent); border-radius:6px; outline:1px solid var(--gold); padding:2px 6px; margin-left:-6px; font-weight:600}

/* ---------- end of game ---------- */
.boardbox{position:relative}
.endbanner{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--bg) 55%, transparent); border-radius:10px; z-index:5; padding:16px}
.endcard{background:var(--surface); border:2px solid var(--line); border-radius:14px; padding:22px 26px; text-align:center; max-width:420px; box-shadow:0 10px 40px rgba(0,0,0,.25)}
.endbanner.win .endcard{border-color:var(--gold)}
.endbanner.lose .endcard{border-color:var(--alert)}
.endword{font-family:var(--f-display); font-size:44px; font-weight:700; line-height:1.05}
.endbanner.win .endword{color:var(--gold)}
.endbanner.lose .endword{color:var(--alert)}
@media (prefers-reduced-motion: no-preference){ .endcard{animation:pop .35s ease-out} @keyframes pop{from{transform:scale(.85); opacity:0} to{transform:none; opacity:1}} }

/* ---------- clocks and ranks ---------- */
.clock{margin-left:auto; font-family:var(--f-mono); font-size:18px; font-variant-numeric:tabular-nums; padding:3px 9px; border-radius:6px; border:1px solid var(--line); background:var(--bg); min-width:5.2em; text-align:center}
.clock.run{border-color:var(--lapis); background:var(--lapis-tint); font-weight:500}
.clock.low{color:var(--alert); border-color:var(--alert)}
.rank{font-size:12px; color:var(--gold); font-weight:700; white-space:nowrap}
/* ---------- game history ---------- */
.card.hist{padding:0; margin:0 0 8px}
.card.hist summary{cursor:pointer; padding:10px 14px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline}
.card.hist summary .g{font-weight:700}
.card.hist summary .s{color:var(--muted); font-size:14px}
.card.hist pre.moves{margin:0 14px 8px; padding:10px; background:var(--bg); border:1px solid var(--line); border-radius:6px; font-family:var(--f-mono); font-size:13px; white-space:pre-wrap; max-height:340px; overflow:auto}
.card.hist .hist-act{margin:0 14px 12px}
a.toast.link{text-decoration:none; cursor:pointer; color:var(--bg)}
a.toast.link:hover{text-decoration:underline}
.social{color:var(--muted); margin-top:-6px}
.social details{display:inline-block} .social summary{cursor:pointer; display:inline}
label.toggle.small{font-size:14px}
.live{display:inline-block; background:#D3252B; color:#fff; font-weight:700; font-size:11px; letter-spacing:.08em; padding:1px 6px; border-radius:4px; vertical-align:2px}
.streams{margin-top:-4px}
#panel{display:flex; flex-direction:column; gap:14px; min-width:0}
/* ---------- 3D view ---------- */
#board[hidden], #board3d[hidden]{display:none !important}
#board3d{width:100%; border-radius:6px; overflow:hidden}
/* ---------- admin text editing ---------- */
.te-bar{position:fixed; right:14px; bottom:14px; z-index:60; display:flex; gap:8px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:8px; box-shadow:0 4px 18px rgba(0,0,0,.18); max-width:calc(100vw - 28px); flex-wrap:wrap}
.te-title{display:flex; gap:6px; align-items:center; font-size:13px} .te-title input{width:min(320px, 60vw)}
body.editing-text [data-t]{outline:1px dashed var(--gold); outline-offset:2px; cursor:text}
body.editing-text [data-t]:hover{background:rgba(226,180,75,.12)}
body.editing-text [data-t]:focus{outline:2px solid var(--lapis); background:rgba(47,107,216,.06)}
.toast.bad{background:var(--alert)}
/* ---------- admin ---------- */
.admin .admin-tabs{display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--line); margin:0 0 18px}
.admin .admin-tabs a{padding:8px 12px; text-decoration:none; color:var(--ink); font-weight:600; border-bottom:3px solid transparent}
.admin .admin-tabs a[aria-current="page"]{border-color:var(--lapis); color:var(--lapis)}
.admin .badge{display:inline-block; min-width:1.4em; background:var(--alert); color:#fff; border-radius:999px; font-size:11px; text-align:center; padding:0 5px}
.admin .badge:empty{display:none}
.admin .stat-row{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; margin-bottom:16px}
.admin .stat{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px 12px; display:flex; flex-direction:column}
.admin .stat .k{font-size:13px; color:var(--muted)} .admin .stat b{font-size:26px} .admin .stat .sub{font-size:12px; color:var(--muted)}
.admin .tasks{list-style:none; padding:0; margin:0 0 10px}
.admin .tasks li{display:flex; gap:8px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--line)}
.admin .tasks li label{flex:1; min-width:0; display:flex; gap:8px; align-items:flex-start; cursor:pointer}
.admin .tasks .tx{min-width:0; overflow-wrap:anywhere}
.admin .tasks li input{margin-top:4px}
.admin .tasks li.done .tx{text-decoration:line-through; color:var(--muted)}
.admin .tasks .area{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gold); white-space:nowrap}
.btn.ghost{border-color:transparent; background:transparent}
.admin .admin-filter{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; align-items:center}
.admin .admin-filter input[type=search]{min-width:min(280px, 100%)}
.admin .table-wrap{overflow-x:auto; margin-bottom:16px}
.admin-table{width:100%; border-collapse:collapse; font-size:14px; background:var(--surface)}
.admin-table th, .admin-table td{padding:7px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle}
.admin-table th{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.admin-table .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.admin-table .up{color:var(--ok)} .admin-table .down{color:var(--alert)}
.admin .spark{color:var(--lapis); vertical-align:middle}
.pill.gold{border-color:var(--gold); color:var(--gold)} .pill.red{border-color:var(--alert); color:var(--alert)}
.admin .pill{font-size:11px; padding:1px 8px}
.admin .row.wrap{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0}
.admin .card.report{margin-bottom:10px}
.admin .rr-item{padding:10px 0; border-bottom:1px solid var(--line)} .admin .rr-item:last-child{border-bottom:0}
.admin .rr-item p{margin:4px 0}
.admin .rr-cols{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.admin .rr-cols > div{background:var(--paper, transparent); border:1px solid var(--line); border-radius:6px; padding:6px 10px}
.admin .rr-cols .k{font-size:12px; color:var(--muted); font-weight:600}
.admin .rr-note{width:100%; box-sizing:border-box; font:inherit; font-size:14px}
@media (max-width:640px){ .admin .rr-cols{grid-template-columns:1fr} }
/* admin → Players (the CRM): charts are plain inline SVG in the site's colours */
.admin .crm-chart{width:100%; height:auto; display:block; margin:6px 0 10px; font-family:var(--f-ui)}
.admin .crm-chart .bar{fill:var(--lapis)} .admin .crm-chart .bar2{fill:var(--gold)}
.admin .crm-chart .lab{font-size:14px; fill:var(--ink)} .admin .crm-chart .val{font-size:14px; font-weight:700; fill:var(--ink)} .admin .crm-chart .sub{font-weight:400; fill:var(--muted)}
.admin .crm-chart .ax{font-size:11px; fill:var(--muted)} .admin .crm-chart .grid{stroke:var(--line); stroke-width:1}
.admin .crm-chart g:hover .bar, .admin .crm-chart g:hover .bar2{opacity:.8}
.admin .crm-legend{font-size:13px; color:var(--muted); display:flex; gap:6px; align-items:center; margin:0 0 8px}
.admin .crm-legend .sw{display:inline-block; width:12px; height:12px; border-radius:3px; margin-left:8px} .admin .crm-legend .sw.bar{background:var(--lapis)} .admin .crm-legend .sw.bar2{background:var(--gold)}
.admin .crm-players th .sort{all:unset; cursor:pointer; text-transform:inherit; letter-spacing:inherit} .admin .crm-players th .sort:focus-visible{outline:2px solid var(--lapis)}
.admin .crm-players th:has(.sort[aria-sort=ascending])::after{content:' ▲'; font-size:10px} .admin .crm-players th:has(.sort[aria-sort=descending])::after{content:' ▼'; font-size:10px}
.admin .crm-players td{font-size:13px}
.admin .crm-cohort td.heat{background:color-mix(in srgb, var(--lapis) calc(var(--h) * 45%), var(--surface))}
.admin .crm-timeline{list-style:none; padding:0; margin:8px 0; max-height:480px; overflow:auto; font-size:14px}
.admin .crm-timeline li{padding:5px 0; border-bottom:1px dotted var(--line)} .admin .crm-timeline time{color:var(--muted); font-variant-numeric:tabular-nums; display:inline-block; min-width:11.5em}
.admin .crm-findings li{margin:6px 0}
#s-players .admin-filter select{width:auto; max-width:100%} #s-players .crm-more{margin:-6px 0 16px}
.admin .crm-period label{font-size:14px; color:var(--muted)}
.pill.ok{border-color:var(--ok); color:var(--ok)}
.chatlog{list-style:none; padding:0; margin:6px 0; font-size:14px; max-height:300px; overflow:auto}
.chatlog li{padding:3px 0; border-bottom:1px dotted var(--line)} .chatlog li.hl{background:rgba(176,54,43,.08)}
.admin .text-item{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:8px}
.admin .text-item.changed{border-left:4px solid var(--gold)}
.admin .text-item .meta{font-size:12px; color:var(--muted); display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.admin .text-item .ed{padding:6px 4px; border-radius:4px; min-height:1.4em}
.admin .text-item .ed:focus{outline:2px solid var(--lapis); background:var(--bg)}
.admin .text-item .orig{font-size:13px; color:var(--muted); padding:4px 0}
/* ---------- chat, reports, dialogs ---------- */
.card.chat .chat-list{list-style:none; margin:0 0 8px; padding:6px 8px; max-height:240px; overflow-y:auto; background:var(--bg); border:1px solid var(--line); border-radius:6px; font-size:14px}
.card.chat .chat-list li{padding:3px 0; overflow-wrap:anywhere}
.card.chat .chat-list li.me b{color:var(--lapis)}
.card.chat .chat-foot{font-size:12px; color:var(--muted); margin:6px 0 0}
.card.chat .badge, .badge.n{display:inline-block; min-width:1.4em; background:var(--alert); color:#fff; border-radius:999px; font-size:11px; text-align:center; padding:0 5px; vertical-align:2px}
.linkish{background:none; border:0; padding:0; color:var(--lapis); text-decoration:underline; cursor:pointer; font:inherit}
.linkish.report{font-size:12px; color:var(--muted); margin-left:4px}
.wc-dialog{border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); max-width:min(520px, calc(100vw - 32px)); padding:20px 22px}
.wc-dialog::backdrop{background:rgba(10,14,20,.5)}
.wc-dialog h2{margin-top:0}
.wc-dialog .rules-list{padding-left:20px} .wc-dialog .rules-list li{margin:6px 0}
.wc-dialog textarea, .wc-dialog select{width:100%}
.wc-dialog .row{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
#chatBox:empty, #embedBox:empty{display:none}
#specBox:empty{display:none} .card.chat.spec summary{cursor:pointer; list-style:none} .card.chat.spec summary::-webkit-details-marker{display:none} .card.chat.spec summary h3{display:inline} .card.chat.spec summary h3::after{content:' ▾'; color:var(--muted); font-size:.8em}
/* ---------- board skins ---------- */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skin-pick select{font:inherit; font-weight:600; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); max-width:220px}

/* the chess clock card: a wooden case with two brass-rimmed faces; the running face lights up */
.chessclock{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px; background:linear-gradient(180deg,#8a5a34,#5e3b20); border:1px solid #3e2614; box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.chessclock .cface{display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border-radius:10px; background:#f6efe0; border:3px solid #b8913f; box-shadow:inset 0 2px 6px rgba(0,0,0,.18); transition:box-shadow .2s, background .2s}
.chessclock .cface .lbl{color:#6b5636}
.chessclock .ctime{font-family:var(--f-mono); font-size:26px; font-variant-numeric:tabular-nums; color:#231a10; letter-spacing:.02em}
.chessclock .cface:has(.ctime.run){background:#fffaf0; box-shadow:0 0 0 3px rgba(255,214,120,.55), inset 0 2px 6px rgba(0,0,0,.12)}
.chessclock .ctime.low{color:#b3261e}
.chessclock .ctime.byo{color:#7a1f8a}
.chessclock .ctime.byo.run{animation:byo-pulse 1s steps(2) infinite}
@keyframes byo-pulse{50%{opacity:.72}}
@media (prefers-reduced-motion: reduce){.chessclock .ctime.byo.run{animation:none}}
.chessclock .cper{font-size:11px; color:#6b5636; min-height:1.2em; font-variant-numeric:tabular-nums}
.chessclock .ctc{grid-column:1 / -1; text-align:center; font-size:12px; color:#f3e3c4}

/* notifications side bar (game requests, matches found, the current search) */
.bell{position:relative}
.bell .badge{position:absolute; top:-6px; right:-6px; background:var(--alert); color:#fff; border-radius:999px; font-size:11px; padding:1px 6px; line-height:16px}
.bell .searching{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); margin-left:6px; animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.bell .searching{animation:none}}
.notebar{position:fixed; top:64px; right:12px; width:330px; max-width:calc(100% - 24px); max-height:calc(100vh - 80px); overflow:auto; z-index:40;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.18); padding:10px 12px}
.notebar .notes-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.notebar .note{border-top:1px solid var(--line); padding:9px 0; font-size:14px}
.notebar .note.hot b:first-child{color:var(--lapis)}
.notebar .row{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* the lobby */
.activity{margin:-6px 0 18px; color:var(--muted)}
.activity b{color:var(--ink)}
.surprise{display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; text-align:left; padding:12px 14px; border:2px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer; color:var(--ink); font:inherit}
.surprise b{font-size:18px; font-family:var(--f-display)}
.surprise span{font-size:13px; color:var(--muted)}
.surprise[aria-pressed="true"]{border-color:var(--lapis); background:var(--lapis-tint)}
.catchips{display:flex; flex-wrap:wrap; gap:6px}
.catchip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:14px; cursor:pointer; background:var(--surface)}
.catchip:has(input:checked){border-color:var(--lapis); background:var(--lapis-tint)}
.catchip small{color:var(--ok); font-size:12px}
.dim{opacity:.55}
.tcgroup{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:6px}
.tcgroup > .muted{width:110px}
#gamePick{margin-top:8px}
#gamePick summary{cursor:pointer; color:var(--lapis); font-weight:600}
.gl-cat{display:flex; flex-wrap:wrap; gap:4px 14px; margin:8px 0}
.gl-cat b{width:100%; font-size:13px; color:var(--muted)}
.btn.big{font-size:18px; padding:10px 32px}
.search-live{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; border-radius:8px; background:var(--lapis-tint)}
.dotlive{width:10px; height:10px; border-radius:50%; background:var(--ok); animation:pulse 1.4s infinite}
@media (prefers-reduced-motion:reduce){.dotlive{animation:none}}
.wait-box{border-top:1px solid var(--line); padding-top:8px; margin-top:8px}
.wait-box .row{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.friend{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 0; border-top:1px solid var(--line)}
.friend:first-child{border-top:0}
.friend .act{margin-left:auto; display:flex; gap:6px}
.pingform{width:100%; background:var(--bg); border-radius:8px; padding:8px 10px; margin-top:6px}
.pingform .row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:4px 0}
.pingform label{font-size:13px}
.cattable{width:100%; border-collapse:collapse; font-size:14px}
.cattable th, .cattable td{padding:5px 6px; border-top:1px solid var(--line); text-align:right}
.cattable th:first-child, .cattable td:first-child{text-align:left}
.cattable th{color:var(--muted); font-weight:600; border-top:0}
#customBox summary{cursor:pointer}
.small{font-size:13px}
@media (max-width:520px){ .tcgroup > .muted{width:100%} }
.intro-shade{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:60; display:flex; align-items:center; justify-content:center; padding:16px}
.intro{max-width:520px; width:100%; max-height:90vh; overflow:auto}
.intro .row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.hero-board #hero3d{border-radius:8px; overflow:hidden}
.hero-board #hero3d canvas{display:block; width:100%}
.tb-pop{position:fixed; left:50%; top:30%; transform:translateX(-50%); z-index:55; box-shadow:0 12px 36px rgba(0,0,0,.28); border:2px solid var(--lapis); max-width:calc(100% - 32px); text-align:center}
.tb-pop .row{display:flex; justify-content:center; gap:8px; margin-top:10px}
.check-pop{position:absolute; left:50%; top:44%; pointer-events:none; transform:translateX(-50%); z-index:20; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--alert); color:#fff; padding:10px 22px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.3); cursor:pointer; text-align:center; transition:opacity .4s}
.check-pop b{font-family:var(--f-display); font-size:24px; letter-spacing:.02em}
.check-pop.fade{opacity:0}
@media (prefers-reduced-motion:reduce){.check-pop{transition:none}}
.wc-dialog-fallback{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:70; max-width:calc(100% - 32px); max-height:90vh; overflow:auto; box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
/* phones: the board zooms in on an 8×8 game (board.js setZoom) */
#board .zlab{opacity:0; transition:opacity .6s}
#board.zoomed .zlab{opacity:1}
#board.zoomed .coords{opacity:0}
#board .marks{transition:opacity 1.1s ease, stroke .4s}
#board.zoom-intro .marks path, #board.zoom-intro .marks line, #board.zoom-intro .marks rect{stroke:var(--gold) !important; stroke-width:4 !important; opacity:1 !important}
#board.zoomed .marks:not(.keep){opacity:0}
@media (max-width:700px){
  .play .wrap, main.wrap:has(.play){padding-left:6px; padding-right:6px}
  .play .boardbox{padding:2px; border-radius:8px}
  .play{gap:12px}
}
/* below the board: whose move it is, and (on phones) the cards needed right now */
.under{margin-top:8px}
.under:empty{display:none}
.under .card{margin-top:8px}
.turncue{padding:8px 12px; border-radius:8px; text-align:center; font-weight:600; color:var(--muted); background:var(--surface); border:1px solid var(--line)}
.turncue.mine{color:#fff; background:var(--lapis); border-color:var(--lapis); font-size:20px; font-family:var(--f-display); letter-spacing:.01em}
.turncue.mine.check{background:var(--alert); border-color:var(--alert)}
@media (prefers-reduced-motion: no-preference){ .turncue.fresh{animation:cuepulse 1.2s ease-out 2} @keyframes cuepulse{0%{transform:scale(1); box-shadow:0 0 0 0 rgba(62,111,216,.6)} 40%{transform:scale(1.03); box-shadow:0 0 0 10px rgba(62,111,216,0)} 100%{transform:scale(1)}} }
/* phones: the menus scroll away with the page, leaving the screen to the board and what's below it */
@media (max-width:700px){
  .site-head{position:relative}
  .notebar{top:8px}
  .turncue{padding:6px 10px}
  .turncue.mine{font-size:18px}
  .under .card{padding:10px 12px}
}
.focus-head .movediag{margin-left:auto; border:1px solid var(--line); border-radius:4px; flex:none}
/* compact piece card and coach (so both fit under the board on a phone) */
.card.focus{padding:8px 12px}
.card.focus .focus-head{gap:10px; align-items:center}
.card.focus .lbl{font-size:11px}
.card.focus .fdesc{font-size:14px; line-height:1.35}
.under .coach-card{padding:8px 12px}
.under .coach-card h3{font-size:16px; margin:0 0 4px}
.under .coach-card .row{margin-top:0}
.under .coach-card p, .under .coach-card ul{margin:4px 0; font-size:14px}
.under .coach-card h4{margin:6px 0 2px; font-size:13px}
.coach-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.coach-row h3{margin:0}
.under .coach-note{display:none}
/* board editor and puzzles */
.pal-row{display:flex; align-items:center; gap:8px; margin:6px 0; flex-wrap:wrap}
.pal-row > .lbl{width:64px; flex:none}
.pal{display:flex; flex-wrap:wrap; gap:4px}
.pal button{border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:2px; cursor:pointer; line-height:0; min-width:36px; min-height:36px; font-size:20px}
.pal button[aria-pressed="true"]{border-color:var(--lapis); box-shadow:0 0 0 2px var(--lapis); background:var(--lapis-tint)}
.wrapbtns{display:flex; flex-wrap:wrap; gap:6px}
.btn.disabled{opacity:.5}
.hand-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:8px 0}
.hand-row > .lbl{width:100%}
.hand-row button{border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:2px 6px; display:inline-flex; align-items:center; gap:2px; cursor:pointer}
.hand-row button.on{border-color:var(--lapis); box-shadow:0 0 0 2px var(--lapis)}
.hand-ed{display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:6px; padding:2px 4px; background:var(--surface)}
.pzlog{font-family:"IBM Plex Mono", monospace; font-size:14px; line-height:1.7}
#pzList .admin-filter select{width:auto; max-width:100%}
/* puzzles list: tabs, the world map of regions, and a grid of cards with each puzzle's starting board */
.pz-tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin:22px 0 18px; overflow-x:auto; scrollbar-width:none}
.pz-tabs [role=tab]{border:0; background:none; padding:10px 14px 9px; font-weight:700; font-size:16px; color:var(--muted); border-bottom:3px solid transparent; margin-bottom:-1px; cursor:pointer; white-space:nowrap; border-radius:6px 6px 0 0}
.pz-tabs [role=tab]:hover{color:var(--ink); background:var(--lapis-tint)}
.pz-tabs [role=tab][aria-selected=true]{color:var(--ink); border-bottom-color:var(--lapis)}
.pz-tabs [role=tab]:focus-visible{outline-offset:-2px}
.pz-tabn:not(:empty){font-weight:500; font-size:13px; color:var(--muted); margin-left:6px; background:var(--soft); border-radius:999px; padding:1px 7px}
.pz-intro{margin:0 0 14px; max-width:70ch}
.pz-mapcard{padding:14px 16px 12px; margin-bottom:6px}
.pz-map .worldmap{max-width:860px; margin:0 auto}
.wm-all .wm-pick{fill:var(--lapis); stroke:var(--surface); stroke-width:.6; stroke-linejoin:round; cursor:pointer; transition:fill-opacity .15s}
.wm-all .wm-pick:hover{fill-opacity:.8}
.wm-all .wm-empty{fill:var(--off-line); cursor:default}
.pz-map.has-sel .wm-pick:not(.wm-on):not(.wm-empty){fill-opacity:.32}
.pz-map.has-sel .wm-pick:not(.wm-on):hover{fill-opacity:.55}
.wm-pin{cursor:pointer}
.wm-pin circle{fill:var(--surface); stroke:var(--lapis); stroke-width:.9}
.wm-pin text{font:700 5.4px var(--f-ui); fill:var(--lapis); pointer-events:none}
.wm-pin.wm-on circle{fill:var(--lapis)}
.wm-pin.wm-on text{fill:var(--surface)}
.pz-regions{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; justify-content:center}
.pz-rchip{display:inline-flex; align-items:baseline; gap:6px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:5px 12px; cursor:pointer; font-size:14px}
.pz-rchip small{color:var(--muted); font-size:12px}
.pz-rchip:hover{border-color:var(--lapis)}
.pz-rchip[aria-pressed=true]{background:var(--lapis); border-color:var(--lapis); color:var(--surface)}
.pz-rchip[aria-pressed=true] small{color:inherit; opacity:.85}
.pz-group{scroll-margin-top:calc(var(--head-h, 64px) + 12px)}
.pz-ghead{display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; margin:26px 0 12px; padding-top:16px; border-top:1px solid var(--line)}
.pz-group:first-child .pz-ghead{border-top:0; padding-top:4px}
.pz-gmap{width:96px; flex:none}
.pz-ghead h2{font-size:20px; margin:0; color:var(--ink); font-family:var(--f-ui); text-transform:uppercase; letter-spacing:.05em}
.pz-ghead h2 .gcount{color:var(--ok); text-transform:none; letter-spacing:0; font-size:13px; margin-left:6px; font-weight:700}
.pz-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(212px, 1fr)); gap:14px}
.pz-grid > .empty{grid-column:1 / -1}
.pzcard{position:relative; display:flex; flex-direction:column; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:10px; transition:border-color .15s, box-shadow .15s}
.pzcard:hover{border-color:var(--lapis); box-shadow:0 2px 10px rgba(16,24,40,.08)}
.pzc-link{display:flex; flex-direction:column; flex:1; color:inherit; text-decoration:none; border-radius:9px}
.pzc-link:focus-visible{outline:2px solid var(--lapis); outline-offset:2px}
.pzc-board{display:flex; justify-content:center; align-items:center; padding:14px 12px; background:var(--soft); border-radius:9px 9px 0 0; border-bottom:1px solid var(--line); overflow:hidden}
/* the board scales from its own viewBox (height:auto), so it never spills out of the card in any browser */
.pzc-board svg{display:block; width:72%; max-width:190px; height:auto; max-height:190px}
.pzc-body{display:flex; flex-direction:column; gap:2px; flex:1; padding:10px 12px 12px}
.pzc-title{font-family:var(--f-display); font-weight:700; font-size:18px; line-height:1.2; color:var(--ink)}
.pzc-meta{font-size:13px; color:var(--muted)}
.pzc-game{font-weight:700; color:var(--ink)}
.pzc-teaser{font-size:14px; line-height:1.4; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pzc-goal{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-top:auto; padding-top:8px; font-size:14px; font-weight:700; color:var(--lapis)}
.pzc-level{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700}
.pzc-tick{position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; background:var(--ok); color:#fff; display:grid; place-items:center; font-weight:700; font-size:16px; box-shadow:0 0 0 2px var(--surface)}
.pzc-tried{position:absolute; top:8px; right:8px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:1px 8px}
.pzc-act{display:flex; gap:6px; padding:0 12px 12px}
.pz-soon{max-width:640px}
.pz-soon h2{font-size:22px}
@media (max-width:560px){
  .pz-tabs [role=tab]{padding:9px 10px 8px; font-size:15px}
  .pz-mapcard{padding:10px 10px 10px}
  .pz-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
  .pzc-board{padding:8px 6px}
  .pzc-board svg{width:86%}
  .pzc-body{padding:8px 9px 10px}
  .pzc-title{font-size:16px}
  .pzc-meta, .pzc-teaser{font-size:12.5px}
  .pzc-goal{font-size:13px; flex-direction:column; gap:0}
  .pz-gmap{width:72px}
  .pz-ghead h2{font-size:17px}
}
/* home page: white, a large board with Play in the middle, then three cards */
body.home{background:#fff}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body.home{background:var(--bg)} }
:root[data-theme="dark"] body.home{background:var(--bg)}
.home-hero{position:relative; display:flex; justify-content:center; align-items:center; padding:24px 16px 8px}
.home-hero img{display:block; width:100%; max-width:860px; height:auto; max-height:82vh; object-fit:contain}
.home-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:28px; padding:16px 54px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.35); letter-spacing:.02em}
.home-play:hover{transform:translate(-50%,-50%) scale(1.04)}
.home-cards{display:flex; flex-direction:column; gap:22px; max-width:960px; padding-top:16px}
.home-card h1{margin:0 0 6px; font-size:44px}
.home-card h2{margin:0 0 6px}
.home-card .stats{margin:14px 0}
.discover-card{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:20px; align-items:center; color:inherit; text-decoration:none; overflow:hidden}
.discover-card img{width:100%; height:100%; object-fit:cover; border-radius:8px; display:block}
.discover-card:hover{border-color:var(--lapis)}
.discover-card .btn{margin-top:8px}
@media (max-width:700px){ .discover-card{grid-template-columns:minmax(0,1fr)} .home-card h1{font-size:34px} .home-play{font-size:22px; padding:12px 38px} }
.icon-matrix{display:grid; grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); gap:10px 8px; margin-top:10px}
.icon-matrix a{display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; color:var(--ink); font-size:12px; text-align:center; line-height:1.2; padding:4px; border-radius:8px}
.icon-matrix a:hover{background:var(--lapis-tint)}
.icon-matrix svg{width:52px; height:52px}
.disc-nav{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px}
.disc-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:12px; margin-bottom:18px}
.disc-game h4{margin:2px 0; font-size:20px; font-family:var(--f-display)}
.disc-game .links{margin:6px 0 0}
.disc-game h4{text-transform:none; letter-spacing:0; color:var(--ink)}
/* home: all white (page, header and cards), in the light theme */
:root:not([data-theme="dark"]) body.home .site-head, :root:not([data-theme="dark"]) body.home .site-foot{background:#fff}
:root:not([data-theme="dark"]) body.home .card{background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.06)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body.home .site-head, :root:not([data-theme="light"]) body.home .site-foot, :root:not([data-theme="light"]) body.home .card{background:var(--surface)} }

/* the white theme: cards stand off the page with a hairline and a soft shadow */
.card{background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04)}
.site-head{background:rgba(255,255,255,.96)}
footer.site-foot{background:#fff}
.pingform, .search-live{background:var(--soft)}
/* the Play page: intro, the two ways to play side by side, every game, then wide cards */
.play-intro h1{margin:0 0 4px}
.play-intro .lede{margin:0 0 8px}
.play-intro .activity{margin:0}
.play-duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start}
@media (max-width:820px){ .play-duo{grid-template-columns:minmax(0,1fr)} }
.duo h2{margin:0 0 10px}
.btn.wide{width:100%; justify-content:center; text-align:center}
.btn.big.wide{font-size:20px; padding:12px 18px}
#playBtns{display:flex; flex-direction:column; gap:8px}
.duo .summary{margin:8px 0 4px; font-size:14px; color:var(--muted)}
details.settings{border-top:1px solid var(--line); margin-top:6px; padding-top:6px}
details.settings > summary{cursor:pointer; font-weight:600; color:var(--lapis); padding:4px 0}
details.settings[open] > summary{margin-bottom:6px}
details.settings .field{margin:8px 0}
.custom-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px; border-top:1px solid var(--line); margin-top:12px; padding-top:10px}
.custom-row select{flex:1 1 140px; min-width:0}
.gg{margin:10px 0 14px; display:grid; grid-template-columns:200px 1fr; gap:18px; align-items:start; padding-top:14px; border-top:1px solid var(--soft)}
.gg:first-child{border-top:0; padding-top:4px}
.gg-map{padding-top:4px}
.worldmap{display:block; width:100%; height:auto}
.wm-land{fill:var(--off)}
.wm-region{fill:var(--lapis); stroke:var(--lapis); stroke-width:1.6; stroke-linejoin:round}
@media (max-width:640px){ .gg{grid-template-columns:92px 1fr; gap:6px 12px; align-items:center} .gg-body{display:contents} .gg h3{margin:0; font-size:18px} .gg-map{padding:0} .gg-list, .gg-rule{grid-column:1 / -1} .rc-fig{max-width:none} }
.gg h3{font-size:20px; margin:0 0 8px; color:var(--ink); font-family:var(--f-ui); text-transform:uppercase; letter-spacing:.05em}
.gg h3 .gcount{color:var(--ok); text-transform:none; letter-spacing:0; font-size:13px; margin-left:6px}
.gg-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:8px}
.gchip{display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 10px; cursor:pointer; color:var(--ink)}
.gchip:hover{border-color:var(--lapis); background:var(--lapis-tint)}
.gchip b{font-family:var(--f-display); font-size:16px}
.gchip small{color:var(--muted); font-size:12px}
.card.wide h2{margin:0 0 10px}
.widegrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:8px}
.widegrid > .empty, .widegrid > p{grid-column:1 / -1}
.widegrid .friend{border-top:0; border:1px solid var(--line); border-radius:8px; padding:8px 10px}
.duo .err:empty{display:none}
.duo{padding-bottom:14px}
.duo-icon{display:block; width:78px; height:78px; margin:2px auto 12px}
.duo h2{text-align:center}
/* admin site text: explicit save */
.text-item .te-save{display:none;gap:6px;margin-top:6px}
.text-item.dirty .te-save{display:flex}
.text-item.dirty{border-color:var(--gold, #C9A227);box-shadow:0 0 0 2px rgba(201,162,39,.25)}
#tSaveAll{position:sticky;top:8px;z-index:3}
/* puzzles: the author's description */
.pzdesc{display:block; margin-top:6px; color:var(--ink); font-size:15px; line-height:1.45; max-width:62ch}
.trow .pzdesc{flex-basis:100%; max-width:none; margin-top:2px; font-size:14px; color:var(--muted)}
/* tournaments and teams */
.formgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:0 16px}
label.check{display:flex; align-items:center; gap:8px; font-weight:600; color:var(--ink); font-size:15px; cursor:pointer}
.tstatus{display:flex; flex-direction:column; gap:10px; margin-bottom:14px}
.tablescroll{overflow-x:auto}
table.standings{border-collapse:collapse; width:100%; font-size:14px}
table.standings th{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); text-align:left; padding:6px 8px; border-bottom:1px solid var(--line)}
table.standings td{padding:7px 8px; border-bottom:1px solid var(--soft)}
table.standings td small{display:block; font-size:11px; color:var(--muted)}
table.standings tr.me td{background:var(--lapis-tint)}
table.standings tr.out td{opacity:.55}
ul.pairings, ul.members{list-style:none; padding:0; margin:0 0 6px; display:flex; flex-direction:column; gap:6px}
ul.members li{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.tm-duo{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:14px; margin-bottom:14px}
.tstatus > :empty{display:none}
.champion{font-size:16px}
/* Training Wheels guides */
.lnhero{display:flex; align-items:center; gap:18px; flex-wrap:wrap; text-decoration:none; color:var(--ink); margin:8px 0 18px; border-color:var(--lapis)}
.lnhero:hover{box-shadow:0 0 0 3px var(--lapis-tint)}
.lnhero-t{flex:1 1 320px; display:flex; flex-direction:column; gap:4px}
.lnhero-t b{font-family:var(--f-display); font-size:22px}
.lnhero-t span{color:var(--muted)}
#lnCard h2{margin:4px 0 8px}
.lntext{font-size:16px; line-height:1.55}
.lntext ul{padding-left:18px; margin:8px 0}
.lntext li{margin:4px 0}
.lntext svg{vertical-align:middle}
#lnCue{margin-top:12px}
.lnsteps{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.lnstep{width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-weight:700; cursor:pointer; font-size:13px}
.lnstep.seen{border-color:var(--lapis); color:var(--lapis)}
.lnstep.on{background:var(--lapis); color:#fff; border-color:var(--lapis)}
a.gchip{text-decoration:none; color:var(--ink)}
.learnline{margin:4px 0 0; font-size:15px}
/* badges */
.medal{display:block}
.medal .m-off .wm-region{fill:#9AA2AB}
.medal .m-off .wm-land{fill:#E3E6EA}
.medal.on .m-world .wm-land{fill:var(--lapis)}
.bboard{display:grid; grid-template-columns:minmax(120px,1.4fr) repeat(4, minmax(60px,1fr)); gap:6px 8px; align-items:center}
.bhead{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); text-align:center; font-weight:700}
.brow-name{font-weight:600; font-size:14px}
.bcell{display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center}
.bcell small{font-size:11px; color:var(--muted); line-height:1.3}
.bcell:not(.on) .medal{opacity:.75}
.bpuzzles{display:flex; flex-wrap:wrap; gap:14px}
.bpuzzles .bcell{width:96px}
.badge-pop{text-align:center; max-width:460px}
.badge-pop-list{display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin:10px 0 16px}
.badge-pop-list > div{display:flex; flex-direction:column; align-items:center; gap:4px; max-width:180px}
.badge-pop-list .medal{animation:medal-in .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes medal-in{from{transform:scale(.2) rotate(-25deg); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion: reduce){ .badge-pop-list .medal{animation:none} }
@media (max-width:560px){ .bboard{grid-template-columns:84px repeat(4, 1fr); gap:4px} .bboard .medal{width:40px; height:40px} .brow-name{font-size:12px} }
/* the World Chess Tour: passport stamps, the after-game card, My World Tour and the certificate (js/tour.js) */
.bsec{margin:0 0 6px; font-size:18px}
.bsec-note{margin:0 0 10px}
.bsec + .muted{margin-top:0}
.passport{display:flex; flex-wrap:wrap; gap:10px 14px; padding:14px 12px; margin:0 0 14px; border-radius:10px; background:#FBF7EE; border:1px solid #E7DCC6;
  background-image:repeating-linear-gradient(0deg, transparent 0 23px, rgba(176,127,34,.07) 23px 24px)}
.pstamp{display:flex; flex-direction:column; align-items:center; gap:2px; width:78px; text-align:center}
.pstamp small{font-size:11px; line-height:1.25; color:var(--muted)}
.pstamp.on small{color:var(--ink); font-weight:600}
.stamp{display:block; overflow:visible}
.bexplore{display:flex; flex-wrap:wrap; gap:12px 14px; margin:0 0 14px}
.bexplore .bcell{width:92px}
.bexplore .bcell:not(.on) .medal{opacity:.75}
.bsec ~ .bsec{margin-top:6px}
.endbanner.has-tour{overflow-y:auto; align-items:safe center}
.endbanner.has-tour .endcard{max-width:460px}
.tourbox:empty{display:none}
.tourbox{margin-top:14px; text-align:left}
.tourcard{position:relative; border:1px solid #E2D3B0; background:#FBF7EE; border-radius:12px; padding:12px 14px;
  --ink:#2A241E; --muted:#6B6256; --surface:#FFFFFF; --soft:#F3EEE3; --line:#DCCFB4; --lapis:#2B4E9B; color:var(--ink)}
.tourcard a{color:var(--lapis)}
.tourcard.light{display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; padding:9px 34px 9px 12px; font-size:14px; background:var(--soft); border-color:var(--line)}
.tc-head{display:flex; align-items:center; justify-content:space-between; margin:-2px 0 4px}
.tc-kicker{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold)}
.tc-x{border:0; background:none; font-size:20px; line-height:1; padding:2px 6px; cursor:pointer; color:var(--muted); border-radius:6px}
.tc-x:hover{background:rgba(0,0,0,.06); color:var(--ink)}
.tourcard.light .tc-x{position:absolute; top:5px; right:4px}
.tc-line{margin:0; font-size:16px; line-height:1.35}
.tc-line b{font-family:var(--f-display); font-size:19px}
.tc-sub{margin:2px 0 0; color:var(--muted); font-size:14px}
.tc-passport{display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:4px; margin:8px 0 10px; justify-items:center}
.tc-stamp{display:inline-flex; width:100%; max-width:46px}
.tc-stamp .stamp{width:100%; height:auto}
.tv-passport .tc-stamp{max-width:64px} .cert-stamps .tc-stamp{max-width:50px}
.tc-stamp:not(.on){opacity:.75}
.tc-next{display:flex; align-items:center; gap:10px 12px; justify-content:space-between; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:9px 10px}
.tc-next-text{display:flex; flex-direction:column; min-width:0}
.tc-next-text b{font-size:15px}
.tc-next-text small{color:var(--muted); font-size:13px; line-height:1.3}
.tc-next .btn{flex:none}
.tc-more{display:inline-block; margin-top:8px; font-size:14px; font-weight:600}
.tourcard.light .tc-more{margin:0}
.tourline{font-size:15px}
.tourline a{font-weight:600}
/* My World Tour */
.tourview{display:flex; flex-direction:column; gap:16px}
.tv-top{display:grid; grid-template-columns:minmax(0, 320px) minmax(0, 1fr); gap:18px; align-items:start}
.tv-map{max-width:760px}
.tv-big{font-family:var(--f-display); font-size:24px; font-weight:700; line-height:1.15; margin:0}
.tv-sum > p{margin:2px 0 0}
.tv-medals{display:flex; gap:14px; margin:10px 0}
.tv-medals .bcell{width:104px}
.tv-next{padding:0; border:0; background:none}
.tv-map .worldmap{display:block; width:100%; height:auto}
.tv-map .wm-all .wm-pick{fill:var(--ok)}
.tv-map .wm-all .wm-empty{fill:var(--off); cursor:default}
.tv-map .wm-pin circle{stroke:var(--ok)} .tv-map .wm-pin text{fill:var(--ok)}
.tv-passport{padding:12px; border-radius:10px; background:#FBF7EE; border:1px solid #E7DCC6; gap:6px 10px; margin:0}
.tv-regions{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap:10px}
.tv-region{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--surface); transition:box-shadow .3s}
.tv-region.flash{box-shadow:0 0 0 3px var(--lapis-tint)}
.tv-stamp{flex:none}
.tv-body{flex:1; min-width:0}
.tv-name{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.tv-name b{font-size:15px}
.tv-count{font-variant-numeric:tabular-nums; color:var(--muted); font-size:13px; font-weight:700}
.tv-bar{height:6px; border-radius:99px; background:var(--soft); overflow:hidden; margin:5px 0 8px}
.tv-bar span{display:block; height:100%; border-radius:99px}
.tv-left{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.tv-left > .muted{width:100%}
.tv-game{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:2px 3px 2px 10px; font-size:13px; background:var(--surface)}
.tv-game .btn.small{padding:2px 9px; font-size:12px; border-radius:999px}
.tv-done{margin:0; color:var(--ok); font-weight:700}
.tv-played{margin-top:6px; color:var(--muted); display:flex; flex-wrap:wrap; gap:2px 10px}
.tv-played span::before{content:"✓ "; color:var(--ok)}
.tv-rule{margin:0}
.tv-cert-teaser{display:flex; gap:16px; align-items:center; padding:12px 14px; border-radius:12px; border:2px solid var(--gold); background:linear-gradient(135deg, #FFF9E8, #FBF2DA)}
.tv-cert-teaser p{margin:2px 0 8px}
@media (max-width:640px){ .tv-top{grid-template-columns:minmax(0,1fr)} .pstamp{width:64px} .pstamp .stamp{width:54px; height:54px} .tv-passport .stamp{width:44px; height:44px} }
/* the certificate */
.cert-shade{overflow-y:auto; align-items:safe center}
.certificate{background:#FFFCF3; border-radius:6px; max-width:620px; width:100%; padding:14px; box-shadow:0 20px 60px rgba(0,0,0,.35)}
.cert-inner{border:3px double var(--gold); outline:1px solid var(--gold); outline-offset:-10px; padding:28px 26px 22px; text-align:center;
  background:radial-gradient(circle at 50% 30%, rgba(247,231,174,.45), transparent 60%)}
.cert-medal{display:flex; justify-content:center; margin-bottom:6px}
.cert-kicker{margin:0; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:800}
.certificate h2{font-size:clamp(22px, 5vw, 32px); margin:2px 0 12px; color:#2A241E}
.cert-small{margin:0; font-style:italic; color:var(--muted); font-family:var(--f-display)}
.cert-name{margin:2px 0 10px; font-family:var(--f-display); font-size:clamp(26px, 7vw, 40px); font-weight:700; color:var(--lapis); border-bottom:1px solid var(--line); display:inline-block; padding:0 18px 2px}
.cert-for{margin:0 auto 10px; max-width:440px; font-family:var(--f-display); font-size:17px}
.cert-stamps{justify-content:center; margin:6px 0}
.cert-date{margin:6px 0 0; font-weight:600; color:var(--muted)}
.cert-actions{justify-content:center; margin-top:12px}
@media print{
  body.printing-cert > *:not(.cert-shade){display:none !important}
  body.printing-cert .cert-shade{position:static; background:none; padding:0}
  body.printing-cert .certificate{box-shadow:none; max-width:none}
  body.printing-cert .cert-actions{display:none}
}
@media (max-width:560px){
  .endbanner.has-tour{position:fixed; inset:0; z-index:40; border-radius:0; padding:12px; background:color-mix(in srgb, var(--bg) 94%, transparent)}
  .endbanner.has-tour .endword{font-size:34px}
  .bexplore .bcell{width:76px} .bexplore .medal{width:46px; height:46px}
  .tc-next{flex-wrap:wrap}
  .cert-inner{padding:20px 12px 16px}
}
/* text in cards runs the full width of the card */
.card .lede, .card p, .card .pzdesc{max-width:none}
/* home page = play page: hero, the two ways to play, then World Chess, the pieces and the games */
.home-hero{padding:20px 16px 0}
.home-play-area{padding-top:18px}
.home-play-area > section, .home-play-area > .play-duo{margin-top:22px}
.home-play-area > .play-duo:first-child{margin-top:0}
.home-lines{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 18px; margin:12px 2px 0}
.home-lines p{margin:0}
.wc-card{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:24px; align-items:center}
.wc-card h1{margin:0 0 6px; font-size:44px}
.wc-card .lede{margin-top:4px}
.wc-img img{width:100%; height:auto; display:block; border-radius:8px}
.wc-img:hover img{box-shadow:0 0 0 3px var(--lapis-tint)}
@media (max-width:760px){ .wc-card{grid-template-columns:minmax(0,1fr)} .wc-img{order:-1} .wc-card h1{font-size:34px} }
/* Discover: a game's rule card opens under its region */
.gg-rule:not(:empty){margin-top:12px}
.gg-rule .rulecard{border:1px solid var(--lapis); border-radius:10px; padding:16px 18px; background:var(--surface)}
.gchip[aria-expanded="true"]{border-color:var(--lapis); background:var(--lapis); color:#fff}
.gchip[aria-expanded="true"] small{color:#E4EAF6}
.roster:has(.icon-matrix){display:block}
/* the two play cards: same height, contents centred in a comfortable column */
.play-duo{align-items:stretch}
.duo{display:flex; flex-direction:column; align-items:center; text-align:center}
.duo > *{width:100%; max-width:440px}
.duo .settings, .duo .field, .duo .custom-row, .duo #searching{text-align:left}
.duo .btn.big.wide{width:100%}
.duo .custom-row{margin-top:auto}
.duo #playBtns{justify-content:center}
.tm-invited{border-color:var(--lapis); margin-bottom:14px; display:flex; flex-direction:column; gap:8px} .tm-invite{margin-bottom:14px}
.share .btn{white-space:nowrap}
/* profile icons */
.avatar{display:inline-block; vertical-align:middle; flex:none}
.who-name{display:inline-flex; align-items:center; gap:6px}
.who-av:empty{display:none}
#pName{display:flex; align-items:center; gap:12px}
.av-picker{display:flex; flex-direction:column; gap:10px}
.av-side{align-self:flex-start}
.av-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(48px,1fr)); gap:6px}
.av-grid button{border:2px solid transparent; background:none; border-radius:50%; padding:2px; cursor:pointer; display:flex; justify-content:center}
.av-grid button:hover{border-color:var(--line)}
.av-grid button[aria-checked="true"]{border-color:var(--lapis); box-shadow:0 0 0 3px var(--lapis-tint)}
/* simuls: every board at once */
.sm-boards{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px; margin-top:14px}
.sm-board{display:flex; flex-direction:column; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:8px; text-decoration:none; color:var(--ink)}
.sm-board svg{width:100%; height:auto; display:block}
.sm-board:hover{border-color:var(--lapis)}
.sm-board.waiting{border:2px solid var(--gold); box-shadow:0 0 0 3px rgba(176,127,34,.18)}
.sm-board.done{opacity:.6}
.sm-cap{display:flex; justify-content:space-between; gap:6px; align-items:baseline; font-size:14px}
.btn.big{font-size:18px; padding:12px 22px}
.simul-bar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0}
.tstatus > a.btn, .tstatus > div > .btn{align-self:flex-start}
/* admin chat flags */
.cflag{flex-wrap:wrap}
.cflag.sev3{border-left:4px solid var(--alert)}
.cflag.sev2{border-left:4px solid var(--gold)}
.cf-body{flex-basis:100%; margin:4px 0 0; padding:8px 12px; background:var(--soft); border-radius:6px; font-size:14px; white-space:pre-wrap; word-break:break-word}
/* messages */
.msg-layout{display:grid; grid-template-columns:minmax(240px,320px) minmax(0,1fr); gap:16px; align-items:start; margin-top:10px}
@media (max-width:760px){ .msg-layout{grid-template-columns:minmax(0,1fr)} }
.msg-convo{display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px; text-decoration:none; color:var(--ink); margin-top:4px}
.msg-convo:hover, .msg-convo.on{background:var(--lapis-tint)}
.msg-c{flex:1; min-width:0; display:flex; flex-direction:column}
.msg-c small{color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.msg-av:empty{display:none}
.msg-head{display:flex; align-items:center; gap:10px; padding-bottom:8px; border-bottom:1px solid var(--soft)}
.msg-body{max-height:55vh; min-height:200px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:12px 2px}
.msg{display:flex; flex-direction:column; max-width:78%}
.msg.mine{align-self:flex-end; align-items:flex-end}
.msg-bubble{padding:8px 12px; border-radius:14px; background:var(--soft); white-space:pre-wrap; word-break:break-word}
.msg.mine .msg-bubble{background:var(--lapis); color:#fff}
.msg small{font-size:11px; margin-top:2px}
.linkbtn{background:none; border:0; padding:0; color:var(--muted); text-decoration:underline; cursor:pointer; font:inherit}
#msgForm textarea{width:100%; resize:vertical}
.msg-guide{margin-top:8px}
.msgbtn{position:relative}
.msgbtn .badge{position:absolute; top:-6px; right:-6px; background:var(--alert); color:#fff; border-radius:999px; font-size:10px; padding:1px 5px}
.tm-chat{margin-bottom:14px}
.tm-chat .msg-body{max-height:40vh; min-height:120px}
#tcForm textarea{width:100%; resize:vertical}
/* game page, wide screens: the game's story, rules and piece key under the board */
.below-board{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-top:16px; align-items:start}
.below-board .about-hist{grid-column:1 / -1}
.below-board .about-hist p{font-size:16px; line-height:1.6}
@media (max-width:1180px){ .below-board{grid-template-columns:minmax(0,1fr)} }
/* community guidelines */
.guidelines .card{margin-top:16px}
.guidelines .card h2{margin:0 0 8px; font-size:24px}
.guidelines .card p, .guidelines .card li{font-size:16px; line-height:1.6}
.guidelines .card ul{padding-left:20px; margin:8px 0}
.guidelines .card li{margin:6px 0}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* home: leaderboards */
.lb-chips{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 12px; align-items:stretch}
.lbchip[aria-pressed="true"]{border-color:var(--lapis); background:var(--lapis); color:#fff}
.lbchip[aria-pressed="true"] small{color:#E4EAF6}
#lbOther{min-width:180px; max-width:260px}
.lbrow{flex-wrap:nowrap}
.lbn{width:22px; text-align:right; font-weight:700; color:var(--muted)}
.lb-av:empty{display:none}
.lbrow .act{margin-left:auto}
/* home: the hero photo stays put while the rest of the page scrolls up over it, fading as it goes */
body.home main{position:relative}
.home-hero{position:sticky; top:var(--head-h, 58px); z-index:0; will-change:opacity}
.home-play-area{position:relative; z-index:1; background:var(--bg); border-radius:18px 18px 0 0; box-shadow:0 -14px 30px -18px rgba(24,32,44,.28); margin-top:8px; padding-bottom:24px}
@media (max-width:700px){ .home-play-area{border-radius:14px 14px 0 0} }
/* two-step sign-in */
#twostepCard .qr{max-width:200px; margin:6px 0 4px}
#twostepCard .qr svg{width:100%; height:auto; display:block}
#twostepCard ol{padding-left:20px; margin:8px 0 4px}
.recovery{margin-top:10px; padding:12px; border:1px solid var(--gold); border-radius:8px; background:var(--soft)}
.recovery pre{font-family:var(--f-mono, 'IBM Plex Mono', monospace); font-size:15px; line-height:1.7; margin:8px 0; columns:2}

/* ---------- game analysis ---------- */
.an-nav{gap:6px; align-items:center; margin-top:8px}
.an-nav .btn{min-width:44px}
.an-seats{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.an-seat{border:1px solid var(--line); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; min-width:0}
.an-seat.mine{border-color:var(--lapis); box-shadow:inset 0 0 0 1px var(--lapis)}
.an-acc{font-family:var(--f-display); font-size:28px; font-weight:700; line-height:1.1}
.an-kind.inaccuracy{color:#9A6B12} .an-kind.mistake{color:#C2561C} .an-kind.blunder{color:var(--alert)}
.an-graph{width:100%; height:110px; display:block; cursor:pointer; background:var(--soft); border-radius:8px}
.an-area{fill:var(--lapis-tint)} .an-line{fill:none; stroke:var(--lapis); stroke-width:1.6; vector-effect:non-scaling-stroke}
.an-mid{stroke:var(--line); stroke-dasharray:3 3; vector-effect:non-scaling-stroke} .an-cur{stroke:var(--gold); stroke-width:2; vector-effect:non-scaling-stroke}
.an-dot.inaccuracy{fill:#C8961E} .an-dot.mistake{fill:#D9692A} .an-dot.blunder{fill:var(--alert)}
.an-moves{display:flex; flex-direction:column; max-height:420px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:6px}
.an-turn{display:grid; grid-template-columns:42px 1fr 1fr; align-items:center; gap:4px; font-family:var(--f-mono); font-size:14px}
.an-mv{text-align:left; border:0; background:none; padding:3px 6px; border-radius:6px; cursor:pointer; font-family:inherit}
.an-mv:hover{background:var(--soft)} .an-mv.on{background:var(--lapis-tint); font-weight:500}
.an-mv b{margin-left:2px} .an-mv.inaccuracy b{color:#9A6B12} .an-mv.mistake b{color:#C2561C} .an-mv.blunder b{color:var(--alert)}
.an-prog{height:8px; background:var(--soft); border-radius:4px; overflow:hidden} .an-prog div{height:100%; width:0; background:var(--lapis); transition:width .2s}
@media (max-width:520px){ .an-seats{grid-template-columns:1fr} }

/* ---------- insights ---------- */
.ins-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:14px 0}
.ins-kpi{border:1px solid var(--line); border-radius:10px; padding:12px 14px}
.ins-kpi b{display:block; font-family:var(--f-display); font-size:30px; line-height:1.1}
.ins-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:16px}
.ins-rows{display:flex; flex-direction:column; gap:7px}
.ins-row{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) 118px; gap:10px; align-items:center; font-size:15px}
.ins-row .ins-lbl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ins-wide{grid-column:1 / -1}
#insDays{max-width:220px}
.ins-bar{display:flex; height:14px; border-radius:4px; overflow:hidden; background:var(--soft)}
.ins-bar i{display:block; height:100%} .ins-bar .w{background:var(--ok)} .ins-bar .d{background:#A7AFBA} .ins-bar .l{background:var(--alert)}
.ins-row .num{font-family:var(--f-mono); font-size:13px; text-align:right; color:var(--muted); white-space:nowrap}
.ins-key{display:flex; gap:14px; font-size:13px; color:var(--muted); margin:4px 0 10px} .ins-key i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:-1px}
@media (max-width:520px){ .ins-row{grid-template-columns:minmax(0,1fr) 110px} .ins-row .ins-bar{grid-column:1 / -1; order:3} }

/* rule cards: the starting position beside the rules */
.rc-cols{display:flex; flex-wrap:wrap; gap:14px 22px; align-items:flex-start}
.rc-fig{flex:1 1 240px; max-width:380px; margin:12px 0 0}
.rc-fig figcaption{font-size:13px; color:var(--muted); margin-top:4px; text-align:center}
.rc-board{display:block; width:100%; height:auto; max-height:420px}
.rc-text{flex:2 1 320px; min-width:0}

/* ---------- the chess room: the game page as a table in a lamp-lit study (room.js) ---------- */
body.room{--bg:#100B07; --surface:rgba(32,23,16,.86); --surface-2:rgba(20,14,9,.8); --soft:rgba(255,236,205,.06); --ink:#EEE3D0; --muted:#B9A98E; --line:rgba(236,205,160,.17);
  --lapis:#9DB8F0; --lapis-tint:rgba(157,184,240,.18); --gold:#E2B45C; --veil:rgba(16,11,7,.6); --off:rgba(255,236,205,.05); background:#0D0906}
body.room::before{content:""; position:fixed; inset:-40px; z-index:-2; background:#0D0906 url(/img/room/study.jpg) center 30% / cover no-repeat; filter:blur(5px) saturate(1.05) brightness(.9)}
body.room::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 55% 50% at 42% 42%, rgba(255,188,105,.10), transparent 70%), radial-gradient(ellipse at 45% 45%, transparent 30%, rgba(0,0,0,.74) 100%)}
body.room .backdrop, body.room .backdrop-veil, body.room .site-foot{display:none}
body.room .site-head{background:rgba(14,10,7,.7); border-bottom-color:rgba(236,205,160,.1)}
body.room .card{background:var(--surface); box-shadow:none; border-color:var(--line)}
body.room .btn{background:rgba(255,236,205,.06); border-color:var(--line); color:var(--ink)}
body.room .btn.primary{background:#B8862F; border-color:#B8862F; color:#1A1209}
body.room select, body.room input[type=text]{background:rgba(0,0,0,.25); border-color:var(--line); color:var(--ink)}
body.room .turncue{background:rgba(20,14,9,.7); border-color:var(--line)}
/* the board as a table top: rosewood, polished */
body.room .boardbox{border:0; border-radius:16px; padding:clamp(12px, 2vw, 28px);
  background:repeating-linear-gradient(93deg, rgba(0,0,0,.07) 0 2px, transparent 2px 7px, rgba(255,210,160,.035) 7px 9px, transparent 9px 15px),
             linear-gradient(160deg, #8C4A24 0%, #6A2F14 35%, #7E3E1C 60%, #57250F 100%);
  box-shadow:0 34px 80px rgba(0,0,0,.7), 0 6px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,214,170,.28), inset 0 -2px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.35);
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
body.room .boardbox.is3d{background:none; box-shadow:none; padding:0; border-radius:0}
.boardbox.opening{transform:scale(.8); transform-origin:50% 0}
.flysheet{position:absolute; overflow:visible; pointer-events:none; z-index:2}
#board.hide-pcs g.bpc{visibility:hidden}
/* the drawer, sliding out from under the table's near edge */
.drawer2d{position:absolute; top:calc(100% - 2px); z-index:-1; overflow:hidden; pointer-events:none}
.drawer2d .drawer{position:absolute; inset:0; transform:translateY(-100%); transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.drawer2d.open .drawer{transform:translateY(0)}
.drawer2d.closing .drawer{transform:translateY(-100%); transition:transform .45s cubic-bezier(.6,0,.8,.4)}
.drawer2d .felt{position:absolute; left:4%; right:4%; top:0; bottom:20%; background:radial-gradient(ellipse at 50% 30%, #23603A, #12391F); box-shadow:inset 0 8px 16px rgba(0,0,0,.6), inset 0 0 0 4px #5E2A12}
.drawer2d .front{position:absolute; left:0; right:0; bottom:0; height:20%; border-radius:0 0 6px 6px; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 8px), linear-gradient(180deg, #7A3A1A, #55230E); box-shadow:0 14px 24px rgba(0,0,0,.6)}
.drawer2d .pull{width:14%; height:46%; border:3px solid #D9AA4C; border-top:0; border-radius:0 0 50% 50% / 0 0 80% 80%; box-shadow:0 2px 3px rgba(0,0,0,.5)}
.side-toggle{display:none}
body.room .panel .below-board{grid-template-columns:minmax(0,1fr); margin-top:0; gap:10px}
body.room .card.foldable > h3{cursor:pointer; user-select:none; display:flex; align-items:center; gap:8px}
body.room .card.foldable > h3::after{content:""; margin-left:auto; width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s}
body.room .card.foldable.shut > h3{margin:0}
body.room .card.foldable.shut > h3::after{transform:rotate(-45deg)}
body.room .card.foldable.shut > :not(h3){display:none !important}
body.room .panel .card{padding:12px 14px}
body.room .panel .card h3{font-size:17px}
body.room .tools .controls{margin-top:0}
body.room .tools .controls .btn{padding:6px 10px; font-size:14px}
@media (min-width:961px){
  body.room{overflow:hidden; height:100vh}
  body.room main.wrap{max-width:none; padding:0; height:calc(100vh - var(--headH, 64px))}
  body.room .play{grid-template-columns:minmax(0,1fr) 380px; grid-template-rows:minmax(0,1fr); gap:0; height:100%; align-items:stretch; transition:grid-template-columns .25s ease}
  body.room.side-off .play{grid-template-columns:minmax(0,1fr) 0px}
  body.room .stage{position:relative; height:100%; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px 24px}
  body.room .gamehead{position:absolute; top:14px; right:40px; z-index:2; display:block; text-align:right; pointer-events:none; opacity:.3; margin:0; max-width:44%}
  body.room .gamehead h2{font-family:var(--f-display); font-size:clamp(30px, 3.4vw, 56px); line-height:1.02; color:#F4DDB2; letter-spacing:.01em}
  body.room .gamehead .num, body.room .gamehead .origin{display:block; color:#E8D3AE}
  body.room .status{position:absolute; top:12px; left:20px; z-index:3; margin:0; max-width:50%}
  body.room .boardbox{position:relative; z-index:1; flex:none}
  body.room .boardbox #board{width:100%; height:100%; max-height:none}
  body.room .boardbox.is3d{flex:1 1 auto; width:100%}
  body.room .under{width:min(560px, 90%); margin-top:8px; position:relative; z-index:2}
  body.room .panel{height:100%; overflow:auto; padding:14px 14px 30px; background:rgba(10,7,4,.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-left:1px solid var(--line); gap:10px; min-width:0}
  body.room.side-off .panel{padding:0; border:0; overflow:hidden}
  body.room .side-toggle{display:flex; align-items:center; justify-content:center; position:absolute; right:0; top:50%; transform:translateY(-50%); width:22px; height:72px; padding:0;
    border-radius:9px 0 0 9px; border:1px solid var(--line); border-right:0; background:rgba(20,14,9,.8); color:var(--ink); cursor:pointer; z-index:4; font-size:18px}
  body.room .side-toggle span::before{content:"›"}
  body.room.side-off .side-toggle span::before{content:"‹"}
}
@media (prefers-reduced-motion: reduce){ body.room .boardbox, .drawer2d .drawer, body.room .play{transition:none} }
body.room .boardbox.is3d #board3d{height:100%}
body.room .stage:has(.boardbox.opening) .under{opacity:0; transition:opacity .2s}
/* the room's 2D board reads more quietly: softer squares and lines, so the pieces stand out */
body.room #board{--sq-l:#D6C19C; --sq-d:#AE8E6A; --sq-a:#D2BB92; --sq-b:#C3A780; --wood:#C9AC80; --grid:rgba(30,20,10,.6); --off:rgba(60,40,20,.25)}
body.room #board .marks{opacity:.5}
body.room #board .zlab{fill:#EAD9BB}
@media (min-width:961px){ body.room .under{min-height:48px} body.room .under:empty{display:block} }
/* the board-texture and 3D-pieces pickers carry a visible label in the room's Table settings */
body.room .tools .skin-pick{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap}
body.room .tools .skin-pick .sr{position:static; width:auto; height:auto; clip:auto; overflow:visible; font-size:13px; color:var(--muted)}
.room-switch{margin-left:auto}
body.room .room-switch{margin-left:4px; opacity:.75} body.room .room-switch:hover{opacity:1}
/* computer-opponents page */
.engines-page .tr-scroll{padding:0}
.eng-table td{vertical-align:top}
.eng-table .num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.eng-table tr.ours td{color:var(--muted)} .eng-table tr.ours td a{color:inherit}
.eng-table details{margin-top:4px; font-size:13px} .eng-table details summary{cursor:pointer; color:var(--muted)}
.eng-table details ul{margin:6px 0 0; padding-left:18px} .eng-table details li{margin:3px 0}
.eng-steps li{margin:8px 0}
/* Account → Linked accounts */
.grid .linkscard{grid-column:1/-1}
.linkplat{border-top:1px solid var(--line); padding:12px 0 4px}
.linkplat h4{margin:0 0 8px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.linkplat .cats{display:flex; flex-wrap:wrap; gap:8px 12px}
.linkplat .cats .field{margin:0; width:8.5em}
.linkplat .cats input{width:100%}
.linkplat .field.user{max-width:16em}
.linkplat .row{margin-top:8px; align-items:center}

/* ---------- launch readiness: account safety, legal pages ---------- */
.verify-banner{background:var(--army); color:var(--badge-ink); border-bottom:1px solid var(--line); font-size:15px}
.verify-banner .in{max-width:1180px; margin:0 auto; padding:8px 16px}
.verify-banner a{color:inherit; font-weight:700}
.draft-note, .admin-banner{background:var(--army); color:var(--badge-ink); border:2px solid var(--gold); border-radius:8px; padding:10px 14px; margin:12px 0}
.admin-banner{border-color:var(--alert)}
.admin-banner a{color:inherit; font-weight:700}
.ok-note{color:var(--ok); font-weight:600}
.ok-text{color:var(--ok); font-weight:700}
.confirm-box{border:2px solid var(--alert); border-radius:8px; padding:10px 14px; margin-top:10px}
.btn.danger{border-color:var(--alert)}
.legal .card h2{font-size:22px}
.legal code{font-family:var(--f-mono); font-size:14px}
.launch-list{margin:0; padding-left:20px}
.launch-list li{margin:6px 0}

/* ---------- installable app: the "Install app" button (public/js/pwa.js) ---------- */
.install-app{position:fixed; left:12px; bottom:12px; z-index:30; display:flex; gap:4px; padding:4px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); box-shadow:0 2px 10px rgba(0,0,0,.12)}
.install-app .btn{margin:0}
@media print{.install-app{display:none}}
/* the offline page */
.offline-card{max-width:640px; margin:24px auto}
.offline-card .row{flex-wrap:wrap}

/* ---------- inviting friends to a table (public/js/invite.js, the invite page /i/<token>) ---------- */
dialog.sheet{border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); padding:0; width:min(560px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto}
dialog.sheet::backdrop{background:rgba(10,14,20,.5)}
.sheet-in{padding:16px 18px 20px}
.sheet-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; position:sticky; top:0; background:var(--surface); padding:6px 0; z-index:1}
.sheet-head h2{margin:0; font-size:24px}
.sheet .toggle{display:flex; margin:6px 0}
.sheet .tb-note{margin:0 0 6px 26px}
.sheet .invite-card{border:0; padding:0}
@media (max-width:560px){
  dialog.sheet{width:100vw; max-width:100vw; max-height:100dvh; height:100dvh; margin:0; border-radius:0; border:0}
  .sheet-in{padding:12px 16px 24px}
}
.invite-card h4{margin:14px 0 6px; font-size:15px}
.seatline{font-weight:700; margin:0 0 10px}
.inv-link{display:flex; gap:6px; margin-bottom:8px}
.inv-link input{font-family:var(--f-mono); font-size:13px; min-width:0; flex:1; user-select:all; -webkit-user-select:all}
.inv-link .btn{flex:none}
.inv-btns{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:6px; margin-bottom:10px}
.inv-btns .btn{min-height:42px}
.inv-qr{text-align:center; margin:4px 0 10px}
.inv-qr svg{width:min(240px, 70vw); height:auto; border:1px solid var(--line); border-radius:8px; background:#fff}
.inv-to{margin:6px 0 4px}
.inv-to .err{min-height:0}
.inv-friend{display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:7px 0; border-top:1px solid var(--line)}
.inv-friend .btn{margin-left:auto}
.invite-card .share{display:flex; margin-top:8px; flex-wrap:nowrap; gap:6px}
.inv-friends .share input, .inv-sendrow input{flex:1; min-width:0; font-family:var(--f-ui); font-size:16px}
.inv-friends .share .btn, .inv-sendrow .btn{flex:none}
.inv-send{margin:10px 0}
.inv-send summary{cursor:pointer; font-weight:700}
.inv-sendrow{display:flex; gap:6px; margin-top:6px}
.inv-foot{margin:12px 0 0}
#inviteBox .invite-card{margin-bottom:12px; border-color:var(--lapis)}
/* the invite page */
.invite-wrap{max-width:640px}
.inv-card{padding:18px 20px 20px}
.inv-card h1{margin:4px 0 12px}
.inv-from{display:flex; align-items:center; gap:10px; margin:0; font-size:17px; font-weight:600}
.inv-from .avatar{flex:none}
.inv-board{display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--line); background:var(--soft)}
.inv-about{margin:12px 0 8px; font-size:17px}
.inv-facts{list-style:none; padding:0; margin:0 0 12px; display:flex; flex-wrap:wrap; gap:6px}
.inv-facts li{border:1px solid var(--line); border-radius:999px; padding:3px 12px; font-size:14px; font-weight:600}
.inv-seats{list-style:none; padding:0; margin:0 0 8px; display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:6px}
.inv-seats li{border:1px solid var(--line); border-radius:8px; padding:6px 10px}
.inv-seats li.free{border-style:dashed}
.inv-seats .lbl{display:block}
.inv-act{display:flex; flex-direction:column; gap:8px; margin:12px 0 4px}
.inv-act .btn.big.wide{min-height:56px}
.inv-act p{margin:0}
.inv-state{font-size:18px; font-weight:700}
.inv-learn{margin:14px 0 0}
@media (max-width:560px){ .inv-card{padding:14px} .invite-wrap{padding-top:12px} }
/* ---------- sharing a game: the result card's button, the share dialog (public/js/share.js), the public replay page ---------- */
.endshare{margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.btn.share-btn{border-color:var(--gold); color:var(--gold); font-weight:700}
.btn.share-btn::before{content:"↗"; font-weight:700}
.btn.share-btn:hover{background:color-mix(in srgb, var(--gold) 10%, var(--surface))}
.wc-dialog.share-dialog{max-width:min(980px, calc(100vw - 24px)); width:980px; max-height:calc(100vh - 24px); padding:16px 18px; background-color:var(--bg); background-image:linear-gradient(var(--surface), var(--surface))}   /* opaque, also over the chess room */
.share-dialog .sh-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.share-dialog .sh-head h2{margin:0}
.share-dialog .sh-body{display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:18px; align-items:start}
.share-dialog fieldset{border:0; padding:0; margin:0 0 12px; min-width:0}
.share-dialog legend{padding:0; margin-bottom:5px}
.share-dialog .sh-what{display:flex; flex-direction:column; gap:6px}
.share-dialog .sh-what .toggle{align-items:flex-start; border:1px solid var(--line); border-radius:8px; padding:7px 10px}
.share-dialog .sh-what .toggle:has(input:checked){border-color:var(--lapis); background:var(--lapis-tint)}
.share-dialog .sh-what input{margin-top:5px}
.share-dialog #shOppBox, .share-dialog #shUpBox{margin:0 0 12px; font-size:14px}
.share-dialog textarea{font:inherit; font-size:15px; resize:vertical}
.share-dialog .sh-board3d{width:100%; border-radius:8px; overflow:hidden; background:var(--soft); margin-bottom:8px}
.share-dialog .sh-cams{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px}
.share-dialog .sh-out img, .share-dialog .sh-out video{display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:8px; background:var(--soft)}
.share-dialog .sh-out:empty{display:none}
.share-dialog .sh-progress{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px}
.share-dialog .sh-progress progress{flex:1 1 160px; height:10px; accent-color:var(--lapis)}
.share-dialog .sh-progress p{flex-basis:100%; margin:0}
.share-dialog .sh-acts{margin:4px 0 10px}
.share-dialog .sh-links{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:6px}
@media (max-width:760px){
  .wc-dialog.share-dialog{padding:12px; width:auto}
  .share-dialog .sh-body{grid-template-columns:minmax(0, 1fr); gap:10px}
}
.replay-page .rp-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px}
.replay-page .rp-nav{display:flex; gap:4px}
.replay-page .rp-nav .btn{min-width:40px}
.replay-page #rpRange{flex:1 1 180px; accent-color:var(--lapis)}
.replay-page .rp-view{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.replay-page #rpCams{display:inline-flex; flex-wrap:wrap; gap:6px}
.replay-page .rp-cta .btn{margin:0 6px 6px 0}
.replay-page .rp-result{margin:10px 0 0}
.replay-page .log .linkish{text-decoration:none; color:var(--ink); text-align:left; font-family:var(--f-mono); font-size:13px; border-radius:4px; padding:0 3px}
.replay-page .log .linkish:hover{background:var(--lapis-tint)}
.replay-page .log .linkish.on{background:var(--lapis); color:var(--surface)}
.replay-page #board3d canvas{border-radius:8px}