/* Copied from JibsyChessWebsite/bots/css/app.css on 19 October 2026, then the joining
   screens added at the end. Keep the tokens in step with that file. */
/* JibsyChessBots on the JibsyChess site.
   Generated from JibsyChessBots/wireframes/index.html (tokens and product CSS),
   then the real board (cm-chessboard) and portraits added at the end.
   Every value comes from a token at :root. */
/* =====================================================================
   Tokens. The product uses only these. Changing one line here restyles
   every screen (CHCA Play rule 11).
   ===================================================================== */
:root{
  color-scheme: light;
  /* JibsyChess brand */
  --navy:#1B2A5C; --navy-2:#24387A; --navy-deep:#121D42;
  --blue:#2E56C9; --blue-dark:#2347A8; --blue-on-navy:#8FAEFF;
  --tint:#EEF2FA; --tint-2:#E3E9F6;
  /* Ink and surfaces */
  --ink:#1B2A5C; --text:#3A4566; --muted:#6A7493;
  --line:#D5DCEB; --line-soft:#E6EBF5;
  --surface:#FFFFFF; --surface-soft:#F6F8FC;
  --on-navy:#FFFFFF; --on-navy-soft:#C9D3EC;
  /* Status */
  --danger:#C8352B; --danger-dark:#A3271F; --danger-tint:#FCEDEC;
  --warn:#8A5A00; --warn-tint:#FBF3E4; --warn-line:#EBD9B5;
  --ok:#1F7A4D; --ok-tint:#E8F4EE;
  /* Board, blue and white */
  --sq-light:#F4F7FD; --sq-dark:#7B93D4; --sq-last:#BFD1F7;
  --sq-check:rgba(200,53,43,.34); --sq-dot:rgba(27,42,92,.24);
  --arrow:rgba(27,42,92,.82);
  /* Review classes */
  --c-brilliant:#1A9C9C; --c-great:#4A7BD1; --c-best:#4F9A3A; --c-excellent:#6AA84F; --c-good:#8BA88A;
  --c-book:#A07D5A; --c-inaccuracy:#D9A21B; --c-mistake:#E0832B; --c-miss:#E5645A; --c-blunder:#C8352B;
  /* Type */
  --font-ui:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --t-label:.78rem; --t-meta:.8125rem; --t-sm:.875rem; --t-base:1rem; --t-lead:1.125rem;
  --t-h3:1.375rem; --t-h2:clamp(1.6rem,5cqi,2.25rem); --t-h1:clamp(2.3rem,8cqi,3.8rem);
  --lh-tight:1.08; --lh-body:1.55;
  /* Space, 4px base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  /* Shape */
  --radius:10px; --radius-sm:6px; --radius-xs:4px; --radius-pill:999px;
  --border-w:1px; --border-w-2:2px;
  --ctl-h-sm:44px; --ctl-h:48px; --ctl-h-lg:56px; --tap-min:44px;
  --e1:0 1px 2px rgba(27,42,92,.06); --e2:0 4px 14px rgba(27,42,92,.08); --e3:0 18px 44px rgba(18,29,66,.22);
  --focus-ring:0 0 0 3px rgba(46,86,201,.40);
  --scrim:rgba(18,29,66,.50);
  /* Layout */
  --maxw:1200px; --maxw-board:560px; --gutter:16px; --nav-h:60px; --phone:390px;
  /* Motion: one fade, never a loop */
  --dur:150ms; --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-ui);font-size:var(--t-base);line-height:var(--lh-body);color:var(--text);background:var(--surface-soft);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
[hidden]{display:none!important}
/* The page is the container the wireframe queries were written for. */
body{container:frame / inline-size;min-height:100vh}

/* =====================================================================
   Product: base
   ===================================================================== */
.app{min-height:70vh;display:flex;flex-direction:column}
.app main{flex:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%}
h1,h2,h3{color:var(--ink);font-weight:800;letter-spacing:-.025em;line-height:var(--lh-tight);margin:0}
h1{font-size:var(--t-h1);letter-spacing:-.03em}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
h4{margin:0;color:var(--ink);font-size:var(--t-base);font-weight:700}
p{margin:0}
a{color:var(--blue);text-underline-offset:2px;cursor:pointer}
.mono{font-family:var(--font-mono)}
.muted{color:var(--muted)}
.sm{font-size:var(--t-sm)}
.meta{font-size:var(--t-meta);color:var(--muted)}
.eyebrow{font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.stack-s{display:flex;flex-direction:column;gap:var(--s2)}
.row{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.card{background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--radius);padding:var(--s4)}
.section{padding:var(--s7) 0}
.section.tint{background:var(--tint)}
.sec-head{margin-bottom:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.sec-head p{max-width:40em;color:var(--text)}
/* Vertical space only: a .page that is also a .wrap keeps its side gutter. */
.page{padding-top:var(--s5);padding-bottom:var(--s7)}
.page-head{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s5)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--danger)} .dot.blue{background:var(--blue)}

/* Buttons */
.btn{min-height:var(--ctl-h-sm);padding:0 var(--s4);border-radius:var(--radius-sm);border:var(--border-w-2) solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font-weight:700;font-size:var(--t-sm);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur) var(--ease)}
.btn.lg{min-height:var(--ctl-h);font-size:var(--t-base);padding:0 var(--s5)}
.btn.block{width:100%}
.btn.primary{background:var(--blue);color:var(--on-navy)} .btn.primary:hover{background:var(--blue-dark)}
.btn.navy{background:var(--navy);color:var(--on-navy)} .btn.navy:hover{background:var(--navy-2)}
.btn.secondary{background:var(--surface);border-color:var(--navy);color:var(--navy)} .btn.secondary:hover{background:var(--tint)}
.btn.quiet{background:transparent;border-color:var(--line);color:var(--text);border-width:var(--border-w)} .btn.quiet:hover{background:var(--surface-soft)}
.btn.danger-o{background:var(--surface);border-color:var(--danger);color:var(--danger-dark)} .btn.danger-o:hover{background:var(--danger-tint)}
.btn.danger{background:var(--danger);color:var(--on-navy)}
.btn.light{background:var(--on-navy);color:var(--navy)} .btn.light:hover{background:var(--tint-2)}
.btn.ghost{border-color:var(--on-navy);color:var(--on-navy);background:transparent}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:0;min-height:var(--tap-min);color:var(--blue);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-size:var(--t-sm)}

/* Forms */
.field{display:flex;flex-direction:column;gap:var(--s1)}
.field label,.lbl{font-size:var(--t-sm);font-weight:700;color:var(--ink)}
.field .help{font-size:var(--t-meta);color:var(--muted)}
.input,.select{min-height:var(--ctl-h);border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);padding:0 var(--s3);background:var(--surface);width:100%}
.input.err{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-tint)}
.err-text{font-size:var(--t-meta);color:var(--danger-dark)}
.grid2{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@container frame (min-width:600px){.grid2{grid-template-columns:1fr 1fr}}
.check{display:flex;gap:var(--s3);align-items:flex-start;min-height:var(--tap-min);font-size:var(--t-sm)}
.check .box{width:22px;height:22px;border:var(--border-w-2) solid var(--navy);border-radius:var(--radius-xs);flex:none;margin-top:1px;background:var(--surface)}
.check .box.on{background:var(--navy);box-shadow:inset 0 0 0 4px var(--surface)}
.seg{display:flex;border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.seg button{flex:1;min-height:var(--ctl-h-sm);border:0;background:transparent;cursor:pointer;font-weight:600;font-size:var(--t-sm);color:var(--text);border-right:var(--border-w) solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--navy);color:var(--on-navy)}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:var(--s2)}
.chip{min-height:var(--ctl-h);border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;padding:var(--s1)}
.chip b{font-family:var(--font-mono);font-weight:600;color:var(--ink)}
.chip span{font-size:var(--t-meta);color:var(--muted)}
.chip.on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:var(--tint)}

/* Notices */
.notice{border-radius:var(--radius-sm);padding:var(--s3) var(--s4);font-size:var(--t-sm);border:var(--border-w) solid var(--line);background:var(--surface-soft);display:flex;flex-direction:column;gap:var(--s1)}
.notice .t{font-weight:700;color:var(--ink)}
.notice.tint{background:var(--tint);border-color:var(--tint-2)}
.notice.warn{background:var(--warn-tint);border-color:var(--warn-line);color:var(--warn)} .notice.warn .t{color:var(--warn)}
.notice.bad{background:var(--danger-tint);border-color:var(--danger);color:var(--danger-dark)} .notice.bad .t{color:var(--danger-dark)}
.notice.ok{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)} .notice.ok .t{color:var(--ok)}

/* Tables */
.tscroll{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
table.t th{background:var(--navy);color:var(--on-navy);text-transform:uppercase;font-size:var(--t-meta);letter-spacing:.06em;font-weight:600;text-align:left;padding:0 var(--s3);height:38px;white-space:nowrap}
table.t td{padding:0 var(--s3);height:var(--tap-min);border-bottom:var(--border-w) solid var(--line-soft);white-space:nowrap}
table.t td.n,table.t th.n{text-align:right;font-family:var(--font-mono)}
table.t tr.click{cursor:pointer} table.t tr.click:hover td{background:var(--tint)}
.res-w{color:var(--blue);font-weight:700} .res-l{color:var(--danger-dark);font-weight:700} .res-d{color:var(--text);font-weight:700}

/* Placeholders (no imagery in wireframes) */
.ph{background:var(--tint-2);color:var(--muted);display:grid;place-items:center;text-align:center;font-size:var(--t-meta);font-weight:600;border-radius:var(--radius-sm);border:var(--border-w) dashed var(--line);aspect-ratio:4/5;padding:var(--s2)}
.ph.sq{aspect-ratio:1}
.av{width:44px;height:44px;flex:none;border-radius:var(--radius-sm);display:grid;place-items:center;font-weight:800;font-size:var(--t-sm);background:var(--tint-2);color:var(--navy);border:var(--border-w) dashed var(--line)}
.av.me{background:var(--navy);color:var(--on-navy);border:0}
.av.round{border-radius:50%}
.av.lg{width:64px;height:64px;font-size:var(--t-lead)}
.av.sm{width:32px;height:32px;font-size:var(--t-meta)}

/* =====================================================================
   Product: top bar, bottom bar, footer
   ===================================================================== */
.tb{background:var(--navy);color:var(--on-navy)}
.tb-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);height:60px;display:flex;align-items:center;gap:var(--s5)}
.lockup{display:inline-flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--on-navy);cursor:pointer;min-height:var(--tap-min)}
.lockup svg{width:22px;height:26px;flex:none}
.lockup .lk{font-size:1.25rem;letter-spacing:-.02em;line-height:1}
.lockup .lk b{font-weight:800}
.lockup .lk span{font-weight:500}
.lockup.on-light{color:var(--navy)} .lockup.on-light .lk span{color:var(--blue)}
.tb-nav{display:none;gap:var(--s5)}
.tb-nav a{color:var(--on-navy);text-decoration:none;font-weight:600;opacity:.85;font-size:var(--t-sm);min-height:var(--tap-min);display:inline-flex;align-items:center}
.tb-nav a.on{opacity:1;box-shadow:inset 0 -2px 0 var(--on-navy)}
.tb-act{margin-left:auto;display:flex;gap:var(--s3);align-items:center}
.tb-act a{color:var(--on-navy);font-weight:600;font-size:var(--t-sm);text-decoration:none;min-height:var(--tap-min);display:inline-flex;align-items:center}
.tb-act .btn{min-height:var(--tap-min);padding:0 var(--s3)}
/* In a game the top bar still works: a game in progress is kept on the tab and comes back on return. */
@container frame (min-width:900px){.tb-nav{display:flex}}
.bb{position:sticky;bottom:0;background:var(--surface);border-top:var(--border-w) solid var(--line);height:var(--nav-h);display:grid;grid-template-columns:repeat(4,1fr);z-index:5}
.bb a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--t-meta);color:var(--muted);text-decoration:none;cursor:pointer}
.bb a.on{background:var(--tint);color:var(--navy);font-weight:700}
.bb svg{width:20px;height:20px}
@container frame (min-width:900px){.bb{display:none}}
.foot{background:var(--navy);color:var(--on-navy-soft);font-size:var(--t-sm)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between;padding-top:var(--s5);padding-bottom:var(--s5)}
.foot a{color:var(--on-navy);margin-right:var(--s4);display:inline-flex;align-items:center;min-height:var(--tap-min)}

/* =====================================================================
   Product: homepage
   ===================================================================== */
.hero{background:var(--navy);color:var(--on-navy)}
.hero .wrap{padding-top:var(--s7);padding-bottom:var(--s7);display:flex;flex-direction:column;gap:var(--s4)}
.hero h1{color:var(--on-navy);max-width:12ch}
.hero .lede{font-size:var(--t-lead);color:var(--on-navy-soft);max-width:34em}
.hero .eyebrow{color:var(--on-navy-soft)}
.places{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--t-sm);font-weight:600;color:var(--on-navy);background:var(--navy-2);border-radius:var(--radius-pill);padding:var(--s2) var(--s3);align-self:flex-start}
.places .mono{font-weight:600}
.places.warn{background:var(--warn-tint);color:var(--warn)}
.places .dot{background:var(--blue-on-navy)} .places.warn .dot{background:var(--warn)}
.wl .row{flex-wrap:wrap}
.wl .input{flex:1 1 14em;max-width:24em}
.hero .wl .meta{color:var(--on-navy-soft)} .hero .wl a{color:var(--on-navy)}
.wait{display:flex;gap:var(--s2);flex-wrap:wrap;max-width:520px}
.wait .input{flex:1;min-width:200px}
.bots{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@container frame (min-width:600px){.bots{grid-template-columns:repeat(2,1fr)}}
@container frame (min-width:900px){.bots{grid-template-columns:repeat(3,1fr)}}
.bots.four{grid-template-columns:1fr}
@container frame (min-width:600px){.bots.four{grid-template-columns:repeat(2,1fr)}}
@container frame (min-width:900px){.bots.four{grid-template-columns:repeat(4,1fr)}}
.bot{display:flex;flex-direction:column;gap:var(--s3);background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--radius);padding:var(--s4)}
.bot .who{display:flex;flex-direction:column;gap:2px}
.bot h3{font-size:var(--t-lead);letter-spacing:-.01em}
.bot .rate{font-family:var(--font-mono);color:var(--ink);font-weight:600;font-size:var(--t-sm)}
.bot .btn{margin-top:auto}
.tag{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--t-meta);font-weight:700;color:var(--navy);background:var(--tint);border-radius:var(--radius-pill);padding:2px var(--s2);align-self:flex-start}
.steps4{display:grid;grid-template-columns:1fr;gap:var(--s4);counter-reset:st}
@container frame (min-width:900px){.steps4{grid-template-columns:repeat(4,1fr)}}
.steps4 .card{display:flex;flex-direction:column;gap:var(--s2)}
.steps4 .n{font-family:var(--font-mono);font-weight:600;color:var(--blue);font-size:var(--t-lead)}
.price{display:grid;grid-template-columns:1fr;gap:var(--s5);border:var(--border-w-2) solid var(--navy);border-radius:var(--radius);padding:var(--s5);background:var(--surface)}
@container frame (min-width:900px){.price{grid-template-columns:1fr 1fr}}
.price .amt{font-size:var(--t-h2);font-weight:800;color:var(--ink);letter-spacing:-.02em}
.price .amt span{font-size:var(--t-base);font-weight:500;color:var(--muted);letter-spacing:0}
.price ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:var(--s2)}
.faq{display:flex;flex-direction:column;border-top:var(--border-w-2) solid var(--navy)}
.faq div{padding:var(--s4) 0;border-bottom:var(--border-w) solid var(--line)}
.faq dt{font-weight:800;color:var(--ink);font-size:var(--t-lead)}
.faq dd{margin:var(--s1) 0 0;max-width:46em}
.toolbar{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s4)}
.toolbar .input{max-width:320px}
.toolbar .select{max-width:200px}
.fchips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.fchips button{min-height:var(--tap-min);border-radius:var(--radius-pill);border:var(--border-w) solid var(--line);background:var(--surface);padding:0 var(--s3);font-size:var(--t-sm);font-weight:600;cursor:pointer}
.fchips button.on{background:var(--navy);color:var(--on-navy);border-color:var(--navy)}

/* Bot page */
.bp{display:grid;grid-template-columns:1fr;gap:var(--s5)}
@container frame (min-width:900px){.bp{grid-template-columns:280px minmax(0,1fr);gap:var(--s6)}}
.bp-face .ph{max-width:220px}
@container frame (min-width:900px){.bp-face .ph{max-width:none}}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
.facts div{border-top:var(--border-w-2) solid var(--navy);padding-top:var(--s2)}
.facts dt{font-size:var(--t-meta);color:var(--muted);font-weight:600}
.facts dd{margin:0;font-weight:700;color:var(--ink)}
.bar-ph{display:inline-block;height:12px;border-radius:var(--radius-xs);background:var(--tint-2);vertical-align:middle}

.badge{position:absolute;z-index:4;top:-14%;right:-14%;width:52%;aspect-ratio:1;filter:drop-shadow(0 1px 1px rgba(18,29,66,.35))}
.badge svg{width:100%;height:100%;display:block}
.arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible}

/* Game layout */
.gm{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);padding:var(--s4) 0 var(--s6)}
@container frame (min-width:900px){.gm{grid-template-columns:minmax(0,var(--maxw-board)) minmax(300px,1fr);gap:var(--s5);align-items:start;padding-top:var(--s5)}}
.bwrap{position:relative}
.pbar{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;min-height:60px}
.pbar .nm{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.pbar .nm b{color:var(--ink);font-size:var(--t-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar .nm .sub{display:flex;gap:var(--s2);font-size:var(--t-meta);color:var(--muted);align-items:center;min-height:18px}
/* Crazyhouse pockets (play.js), between the name and the clock: yours are buttons. */
.pocket{display:flex;gap:var(--s1);align-items:center;flex:none}
.pocket:empty{display:none}
.pc{position:relative;width:36px;height:36px;padding:0;border:var(--border-w) solid var(--line);border-radius:var(--radius-xs);background:var(--surface);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pc svg{width:30px;height:30px}
.pc b{position:absolute;right:2px;bottom:1px;font-family:var(--font-mono);font-size:var(--t-label);font-weight:600;color:var(--ink);line-height:1}
.pc.on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:var(--tint)}
.pc:disabled{cursor:default;background:var(--surface-soft)}
.pc-none{font-size:var(--t-meta);color:var(--muted);white-space:nowrap}
/* Secret Queens: the pawn you pick before your first move. */
.sq-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1)}
.sq-pick .btn{padding:0 var(--s2)}
.pn-sq{margin:0}
.pbar .rt{font-family:var(--font-mono);color:var(--muted);font-weight:500}
.clock{font-family:var(--font-mono);font-size:1.5rem;font-weight:600;padding:0 var(--s3);height:var(--ctl-h);display:inline-flex;align-items:center;justify-content:flex-end;min-width:104px;border-radius:var(--radius-sm);background:var(--surface);border:var(--border-w) solid var(--line);color:var(--ink)}
.clock.on{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.clock.low{background:var(--danger-tint);border:var(--border-w-2) solid var(--danger);color:var(--danger-dark)}
.clock.flag{background:var(--danger);border-color:var(--danger);color:var(--on-navy)}
.gctl{display:flex;gap:var(--s2);margin-top:var(--s3)}
.gctl .btn{flex:1}
.side{display:flex;flex-direction:column;gap:var(--s3)}
.moves{font-family:var(--font-mono);font-size:var(--t-sm);display:grid;grid-template-columns:3.2ch 1fr 1fr;gap:2px var(--s2);max-height:280px;overflow:auto;align-items:center}
.moves .n{color:var(--muted)}
.moves .m{padding:2px var(--s1);border-radius:var(--radius-xs);display:inline-flex;align-items:center;gap:var(--s1);min-height:var(--tap-min);cursor:pointer}
.moves .m.on{background:var(--navy);color:var(--on-navy)}
.moves .m svg{width:16px;height:16px;flex:none}
.status{font-size:var(--t-sm);color:var(--text)}

/* Pop-ups over the board */
.scrim{position:absolute;inset:0;background:var(--scrim);z-index:10}
.pop{position:absolute;z-index:11;left:4%;right:4%;top:7%;background:var(--surface);border-radius:var(--radius);box-shadow:var(--e3);padding:var(--s5) var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s4);animation:fade var(--dur) var(--ease) 1 both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.pop .x{position:absolute;top:var(--s1);right:var(--s1);min-width:var(--tap-min);min-height:var(--tap-min);border:0;background:none;color:var(--muted);font-size:var(--t-sm);font-weight:600;cursor:pointer;text-decoration:underline}
.pop h2{text-align:center}
.pop .how{text-align:center;color:var(--muted);margin-top:calc(-1 * var(--s3))}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s3);align-items:center}
.vs .p{display:flex;flex-direction:column;align-items:center;gap:var(--s1);text-align:center;font-size:var(--t-sm);font-weight:700;color:var(--ink)}
.vs .w{font-size:var(--t-meta);color:var(--blue);font-weight:700;display:inline-flex;align-items:center;gap:var(--s1);min-height:18px}
.vs .sc{font-family:var(--font-mono);font-size:var(--t-h3);color:var(--ink);font-weight:600}
.pop .links{display:flex;justify-content:center;gap:var(--s4);flex-wrap:wrap}
.pop .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}

/* Review */
.coach{display:flex;gap:var(--s3);align-items:flex-start}
.bubble{position:relative;background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--radius);padding:var(--s3) var(--s4);font-size:var(--t-sm);flex:1;color:var(--ink)}
.bubble::before{content:"";position:absolute;left:-7px;top:16px;width:12px;height:12px;background:var(--surface);border-left:var(--border-w) solid var(--line);border-bottom:var(--border-w) solid var(--line);transform:rotate(45deg)}
.bubble .cls{display:flex;align-items:center;gap:var(--s2);font-weight:800;margin-bottom:var(--s1)}
.bubble .cls svg{width:22px;height:22px}
.graph{border-radius:var(--radius-xs);overflow:hidden;cursor:pointer;display:block;width:100%;height:72px}
.acc{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.acc .p{display:flex;flex-direction:column;align-items:center;gap:var(--s1);padding:var(--s3);border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.acc .nm{font-size:var(--t-sm);font-weight:700;color:var(--ink);text-align:center}
.acc .big{font-family:var(--font-mono);font-size:1.9rem;font-weight:600;color:var(--ink);line-height:1.1}
.acc .lab{font-size:var(--t-meta);color:var(--muted)}
.acc .gr{font-size:var(--t-meta);color:var(--text)}
.acc .gr b{font-family:var(--font-mono);color:var(--ink)}
table.cnt{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
table.cnt td{height:36px;border-bottom:var(--border-w) solid var(--line-soft)}
table.cnt td.c{font-family:var(--font-mono);font-weight:600;width:56px;text-align:center}
table.cnt td.c.z{color:var(--line)}
table.cnt .kk{display:flex;align-items:center;gap:var(--s2);font-weight:600;color:var(--ink)}
table.cnt .kk svg{width:20px;height:20px;flex:none}
.phases{display:grid;grid-template-columns:auto 1fr 1fr;gap:var(--s1) var(--s3);font-size:var(--t-sm);align-items:center}
.phases .h{font-size:var(--t-meta);color:var(--muted);font-weight:600}
.phases .v{font-family:var(--font-mono);font-weight:600;color:var(--ink);text-align:center}
.phases .v.na{font-family:var(--font-ui);font-weight:500;color:var(--muted);font-size:var(--t-meta)}
.progress{height:8px;border-radius:var(--radius-pill);background:var(--tint-2);overflow:hidden}
.progress span{display:block;height:100%;background:var(--blue)}
.skel{background:var(--tint-2);border-radius:var(--radius-xs);height:14px}
.rv-board{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--s2)}
.evalbar{position:relative;background:var(--navy);border-radius:var(--radius-xs);overflow:hidden}
.evalbar i{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-top:var(--border-w) solid var(--line)}
.ev{font-family:var(--font-mono);font-size:var(--t-meta);font-weight:600;color:var(--muted);margin-left:auto}
.navbtns{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.navbtns .btn{padding:0}
.keym{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);font-size:var(--t-sm);min-height:var(--tap-min)}
.sw{width:56px;height:var(--tap-min);background:none;position:relative;flex:none;border:0;cursor:pointer;padding:0}
.sw::before{content:"";position:absolute;left:4px;right:4px;top:9px;height:26px;border-radius:13px;background:var(--line)}
.sw::after{content:"";position:absolute;top:12px;left:7px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:var(--e1)}
.sw.on::before{background:var(--blue)} .sw.on::after{left:29px}
/* =====================================================================
   Added for the real site: portraits, the real board, small helpers.
   ===================================================================== */
.portrait{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:var(--radius-sm);background:var(--tint-2)}
.av img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:inherit;display:block}
.av.has-img{border:0;overflow:hidden}
.lockup .lk .ps{color:var(--blue-on-navy)}
.foot a:not(.lockup){text-decoration:none}
.crumb{font-size:var(--t-sm);font-weight:600;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap-min)}
.crumb:hover{color:var(--blue)}

/* The board: cm-chessboard with the cburnett pieces, in the brand blue and white. */
.cm-chessboard.jcb .board .square.white{fill:var(--sq-light)}
.cm-chessboard.jcb .board .square.black{fill:var(--sq-dark)}
.cm-chessboard.jcb .board .border{fill:var(--sq-dark);stroke-width:0}
.cm-chessboard.jcb .coordinates .coordinate{font-family:var(--font-mono);font-size:7px;font-weight:600}
.cm-chessboard.jcb .coordinates .coordinate.white{fill:var(--sq-dark)}
.cm-chessboard.jcb .coordinates .coordinate.black{fill:var(--sq-light)}
.cm-chessboard .markers .marker.jcb-last{fill:var(--sq-last);opacity:.9}
.cm-chessboard .markers .marker.jcb-check{fill:var(--danger);opacity:.34}
.cm-chessboard .markers .marker.marker-dot,.cm-chessboard .markers .marker.marker-bevel{fill:var(--navy);opacity:.5}
.cm-chessboard .markers .marker.jcb-sel{fill:var(--blue);opacity:.42}
.boardbox{position:relative;width:100%;aspect-ratio:1;max-height:calc(100vh - 210px);max-width:calc(100vh - 210px)}
.boardbox > .cmb{position:absolute;inset:0}
.boardbox .badge{width:6.5%;aspect-ratio:1;top:auto;right:auto}
.boardbox .arrows{z-index:5}

/* Portrait cards on the showcase: a fixed, smaller picture, not the full card width. */
.bot .portrait{width:100%;max-width:200px;aspect-ratio:1/1;align-self:center}
/* A bot with no portrait yet: its initials on navy, the same box as a portrait. */
.portrait.mono{display:grid;place-items:center;background:var(--navy);color:var(--on-navy);font-family:var(--font-ui);font-weight:800;font-size:clamp(40px,9vw,64px);letter-spacing:.02em}
.bot .rate-note{font-size:var(--t-meta);color:var(--muted);line-height:1.4}
.facts .rate-note{grid-column:1/-1;margin-top:calc(-1 * var(--s1))}

/* The walk-through: the eval number sits above its bar, and the move arrows are plain buttons. */
.rv-board{grid-template-columns:52px minmax(0,1fr);align-items:stretch}
#evalslot{display:flex;min-height:0}
.evalcol{display:flex;flex-direction:column;align-items:center;gap:var(--s1);width:100%;min-height:0}
.evalcol .evnum{font-family:var(--font-mono);font-size:var(--t-meta);font-weight:600;color:var(--ink);line-height:1.2;white-space:nowrap}
.evalcol .evalbar{flex:1;width:22px;min-height:0}
.navbtns{grid-template-columns:var(--tap-min) minmax(0,1fr) minmax(0,1fr) var(--tap-min)}
.navbtns .btn{min-width:0;padding:0 var(--s2)}
.navbtns .btn.arrow{padding:0}
.btn.arrow svg{width:20px;height:20px;display:block}
.bubble .cls + p{margin:0}
#coachslot{flex:1;min-width:0;display:flex}
#coachslot .bubble{flex:1;min-width:0}

.bp-face .portrait{max-width:220px;width:100%}

.page-head{text-align:left;width:100%}

/* The bot portrait is centred on its column, so it does not sit alone on the left of a phone. */
.bp-face{display:flex;justify-content:center}
@container frame (min-width:900px){.bp-face{justify-content:flex-start}}
.cm-chessboard .markers .marker.jcb-pre{fill:var(--danger);opacity:.3}

/* =====================================================================
   Joining (from the wireframes' "Joining" block), and the account pages.
   ===================================================================== */
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-bottom:var(--s5)}
.stepper div{display:flex;flex-direction:column;gap:var(--s1);font-size:var(--t-meta);font-weight:600;color:var(--muted)}
.stepper div::before{content:"";height:4px;border-radius:var(--radius-pill);background:var(--line)}
.stepper .done{color:var(--navy)} .stepper .done::before{background:var(--navy)}
.stepper .on{color:var(--blue)} .stepper .on::before{background:var(--blue)}
.narrow{max-width:640px}
.code{font-family:var(--font-mono);font-size:1.6rem;font-weight:600;letter-spacing:.08em;color:var(--ink);background:var(--tint);border:var(--border-w) dashed var(--navy);border-radius:var(--radius-sm);padding:var(--s2) var(--s4);display:inline-block}
.prove{display:flex;flex-direction:column;gap:var(--s3)}
.prove .head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.prove .site{font-size:var(--t-meta);color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.ok-word{display:inline-flex;align-items:center;gap:var(--s2);color:var(--ok);font-weight:700;font-size:var(--t-sm)}
ol.howto{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:var(--s1);font-size:var(--t-sm)}
.sumline{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;border-bottom:var(--border-w) solid var(--line-soft);font-size:var(--t-sm)}
.sumline b{font-family:var(--font-mono);color:var(--ink);white-space:nowrap}
.stages{display:flex;flex-direction:column}
.stage-row{display:grid;grid-template-columns:28px 1fr auto;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:var(--border-w) solid var(--line-soft)}
.stage-row .i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-size:var(--t-meta);font-weight:600;border:var(--border-w-2) solid var(--line);color:var(--muted);background:var(--surface)}
.stage-row.done .i{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.stage-row.work .i{border-color:var(--blue);color:var(--blue)}
.stage-row .w{font-size:var(--t-meta);font-weight:700;display:inline-flex;align-items:center;gap:var(--s1);color:var(--muted)}
.stage-row.done .w{color:var(--navy)} .stage-row.work .w{color:var(--blue)}
.stage-row h4{font-size:var(--t-sm)}

/* Real form controls in place of the wireframes' drawn ones. */
.check input[type=checkbox],.radio input[type=radio]{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--navy);cursor:pointer}
.radio{display:flex;gap:var(--s3);align-items:flex-start;min-height:var(--tap-min);font-size:var(--t-sm);cursor:pointer}
.check{cursor:pointer}
.input[type=date]{padding-right:var(--s2)}
/* Crowns (docs/03-GAME-PLAN.md 4), from mockups/game-plan/mock.css "Proposed for the product". */
:root{--crown:#A8740F;--crown-tint:#FBF3E4;--crown-line:#EBD9B5}
.ic-crown{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-2px}
.ic-crown path{fill:var(--crown)}
.crowns{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-weight:600;color:var(--ink);white-space:nowrap}
.crowns.plus{color:var(--ok)} .crowns.minus{color:var(--danger-dark)}
.crownbox{border:var(--border-w) solid var(--crown-line);background:var(--crown-tint);border-radius:var(--radius-sm);padding:var(--s3);display:flex;flex-direction:column;gap:6px;font-size:var(--t-sm);color:var(--ink)}
.crownbox .ln{display:flex;align-items:center;gap:var(--s2)}
.crownbox .ln .crowns{margin-left:auto}
.crownbox .why{font-size:var(--t-meta);color:var(--warn)}
.crownbox.off{background:var(--surface-soft);border-color:var(--line)}
.crownbox.off .why{color:var(--muted)}
.prog{height:10px;border-radius:var(--radius-pill);background:var(--tint-2);overflow:hidden}
.prog span{display:block;height:100%;background:var(--crown)}
.plist{display:flex;flex-direction:column;background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--radius)}
.prow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--s2) var(--s3);min-height:56px;border-top:var(--border-w) solid var(--line-soft)}
.prow:first-child{border-top:0}
.prow.two{grid-template-columns:minmax(0,1fr) auto}
.prow.ranked{grid-template-columns:auto auto minmax(0,1fr) auto}
.prow .nm{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.prow .nm b{color:var(--ink);font-size:var(--t-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .nm span{font-size:var(--t-meta);color:var(--muted)}
.prow.me{background:var(--tint)}
a.prow{text-decoration:none;color:inherit}
.rank{font-family:var(--font-mono);font-weight:600;color:var(--muted);width:2ch;text-align:right;font-size:var(--t-sm)}
.vs .cw{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:var(--t-meta);font-weight:600;min-height:18px}
.vs .cw.plus{color:var(--ok)} .vs .cw.minus{color:var(--danger-dark)} .vs .cw.none{color:var(--muted);font-family:var(--font-ui);font-weight:600}
.vs .cw small{color:var(--muted);font-weight:500;font-size:inherit}
.vs .lost{font-size:var(--t-meta);color:var(--muted);font-weight:700;min-height:18px}
.cases{display:flex;flex-direction:column;gap:var(--s2)}
.case{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px var(--s3);align-items:center;background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--radius);padding:var(--s3)}
.case .pair{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:var(--t-meta);font-weight:700}
.case .who{border-radius:var(--radius-pill);padding:2px 10px;background:var(--navy);color:var(--on-navy)}
.case .who.them{background:var(--tint-2);color:var(--navy)}
.case .verb{color:var(--muted);font-weight:600}
.case .kind{margin-left:auto;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.case .txt{display:flex;flex-direction:column;line-height:1.35}
.case .txt b{color:var(--ink);font-size:var(--t-sm)}
.case .txt span{font-size:var(--t-meta);color:var(--muted)}
.case .fig{font-family:var(--font-mono);font-weight:600;font-size:var(--t-base);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.case .fig.plus{color:var(--ok)} .case .fig.minus{color:var(--danger-dark)} .case .fig.zero{color:var(--ink)}
.case.zero{background:var(--ok-tint);border-color:var(--ok)}
.case.zero .kind{color:var(--ok)}
.cr-big{display:flex;align-items:center;gap:10px}
.cr-big .ic-crown{width:40px;height:40px}
.cr-big b{font-family:var(--font-mono);font-size:2.6rem;font-weight:600;color:var(--ink);line-height:1}
table.t.cr-numbers{font-size:13px}
table.t.cr-numbers th,table.t.cr-numbers td{white-space:normal;padding:6px 8px;height:auto}
table.t.cr-numbers th{text-transform:none;letter-spacing:0}
.cr-numbers td.plus{color:var(--ok)} .cr-numbers td.minus{color:var(--danger-dark)} .cr-numbers td.zero{color:var(--muted)}
/* Portrait frames: crowns earned in all (100 bronze, 500 silver, 1,000 gold). */
:root{--frame-100:#B07A3B;--frame-500:#9AA7BD;--frame-1000:#C99A1C}
.av.frame-100{box-shadow:0 0 0 3px var(--frame-100)} .av.frame-500{box-shadow:0 0 0 3px var(--frame-500)} .av.frame-1000{box-shadow:0 0 0 3px var(--frame-1000)}
.frame-wrap{display:block;width:100%;max-width:210px;border-radius:calc(var(--radius-sm) + 5px);padding:5px;align-self:center}
.frame-wrap.frame-100{background:var(--frame-100)} .frame-wrap.frame-500{background:var(--frame-500)} .frame-wrap.frame-1000{background:linear-gradient(135deg,#E8C25A,var(--frame-1000))}
.frame-wrap .portrait{margin:0}
.tag.spot{background:var(--crown-tint);color:var(--crown);border-color:var(--crown-line)}
/* The story card (public/js/story-card.js): a dialog over the page, the card shown small. */
.story-dlg{position:fixed;inset:0;z-index:1000}
.story-dlg .pop.story-pop{position:absolute;left:50%;transform:translateX(-50%);top:4vh;width:min(360px,calc(100% - 32px));right:auto;max-height:92vh;overflow:auto}
.story-prev{display:flex;justify-content:center}
.story-prev img{width:min(270px,100%);height:auto;border-radius:var(--radius-sm);box-shadow:var(--e2);display:block}
.h2h{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s2);text-align:center}
.h2h .side{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:var(--t-sm);font-weight:700;color:var(--ink)}
.h2h .score{font-family:var(--font-mono);font-size:1.8rem;font-weight:600;color:var(--ink)}
.h2h .score i{font-style:normal;color:var(--muted);padding:0 6px}
.mt-s{margin-top:var(--s2)}
.card .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.prow.bounty-form{grid-template-columns:1fr;gap:var(--s2);padding:var(--s3)}
.prow.bounty-form .row{flex-wrap:wrap}
.prow.bounty-form .select{width:auto;flex:1 1 7em}
.crownbox.bounty{padding:var(--s4);margin-bottom:var(--s4)}
.crownbox.bounty h3{font-size:1.25rem}
.crownbox.bounty .crowns{font-size:1.25rem}
.odds{border-top:var(--border-w) solid var(--line-soft);padding-top:var(--s3)}
.odds-board{display:block;margin:0 auto;width:min(200px,60%);height:auto}
.challenge-bar{display:flex;gap:var(--s3);align-items:center;background:var(--tint);border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);padding:var(--s3) var(--s4);margin-bottom:var(--s4)}
.challenge-bar b{color:var(--ink)}
.story-apps{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.story-apps .btn{color:#fff;border:0}
.story-apps .app-whatsapp{background:#1E8E4E} .story-apps .app-instagram{background:#C1356B}
.story-apps .app-facebook{background:#1660C9} .story-apps .app-x{background:#111}
.btn .ic-share{width:18px;height:18px;flex:none}
.rep-photo{display:block;border-radius:var(--radius-sm);margin-bottom:var(--s1)}
textarea.input{padding:var(--s2) var(--s3);resize:vertical;font:inherit}
.report fieldset{border:0;margin:0;padding:0;min-width:0}
.report summary{cursor:pointer;color:var(--muted)}
.plans{display:grid;grid-template-columns:1fr;gap:var(--s2)}
@container frame (min-width:600px){.plans{grid-template-columns:1fr 1fr}}
.plan{display:flex;gap:var(--s3);align-items:flex-start;border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);padding:var(--s3) var(--s4);background:var(--surface);cursor:pointer;min-height:var(--ctl-h-lg)}
.plan input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--navy);flex:none}
.plan b{display:block;color:var(--ink)}
.plan .mono{color:var(--ink);font-weight:600}
.plan.on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:var(--tint)}
.acct-rows{display:flex;flex-direction:column;gap:var(--s2)}
.acct-row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2)}
@container frame (min-width:600px){.acct-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.list-plain{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:var(--s1);font-size:var(--t-sm)}
.prose{max-width:46em;display:flex;flex-direction:column;gap:var(--s3)}
.prose h2{font-size:var(--t-h3);margin-top:var(--s4)}
.prose ul{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:var(--s1)}
.self-start{align-self:flex-start}
.mt{margin-top:var(--s4)}
.center{text-align:center}
.dev-pre{white-space:pre-wrap;font-family:var(--font-mono);font-size:var(--t-meta);background:var(--surface-soft);border:var(--border-w) solid var(--line-soft);border-radius:var(--radius-xs);padding:var(--s3);margin:0}
.tb-act a.on{box-shadow:inset 0 -2px 0 var(--on-navy)}
.narrow .page-head h1{font-size:var(--t-h2)}
.err-box{outline:var(--border-w-2) solid var(--danger);outline-offset:4px;border-radius:var(--radius-xs)}

/* =====================================================================
   Billing and the admin screen (19 October 2026).
   ===================================================================== */
.confirm{border:var(--border-w) solid var(--danger);background:var(--danger-tint);border-radius:var(--radius-sm);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.confirm h4{color:var(--danger-dark)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.stat{border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
.stat b{font-family:var(--font-mono);font-size:var(--t-h3);font-weight:600;color:var(--ink);line-height:var(--lh-tight)}
.stat span{font-size:var(--t-meta);font-weight:600;color:var(--muted)}
.secret{font-family:var(--font-mono);font-size:var(--t-lead);font-weight:600;letter-spacing:.06em;color:var(--ink);background:var(--tint);border:var(--border-w) dashed var(--navy);border-radius:var(--radius-sm);padding:var(--s2) var(--s4);word-break:break-all}
.keyuri{font-family:var(--font-mono);font-size:var(--t-meta);color:var(--text);word-break:break-all}
.input.code-in{font-family:var(--font-mono);letter-spacing:.2em;max-width:12em}
table.t td.long{white-space:normal;min-width:14em;padding-top:var(--s2);padding-bottom:var(--s2)}

/* The play page (was an inline style block on the showcase's play.html; inline styles are blocked here). */
.crumb-row{margin-bottom:var(--s4)}
.bot-name{font-size:var(--t-h2)}
.opt{font-weight:500;color:var(--muted)}
.boardwrap{position:relative}
.pop-title{text-align:center;font-size:var(--t-h3)}
.pop-meta{text-align:center}
.under{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s3)}
.moves-empty{grid-column:1/-1;color:var(--muted);font-size:var(--t-meta)}

/* The game review (was an inline style block on the showcase's review.html). */
/* The review page's own rules, on top of app.css. Colours and type come from the tokens. */
body.review-page{background:var(--surface)}
#ov{position:absolute;inset:0;pointer-events:none;z-index:4}
#evalslot,#evalslot>.evalbar{height:100%}
.moves{position:relative}
button.m{background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.navbtns .btn{min-width:0;white-space:normal;line-height:1.2;padding:var(--s1);text-align:center}
.navbtns .btn[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.status:empty{display:none}
.status p{font-size:var(--t-sm);color:var(--ink)}
.status b{font-weight:800}
.skel.tall{height:72px}

/* =====================================================================
   The board-and-panel screen (js/arena.js), for the game and the review,
   laid out as chess.com does, in our colours. Always one screen:
   phone    the board, then the panel under it; nothing above the board
   desktop  the board at the window's height, an icon strip on its right,
            then the panel on the right, a drag handle on the board's corner
   focus    (.focus on .gm2) the board and the player bars only, as large
            as fits, the top bar and the panel hidden
   --fit is the largest board that fits; --scale (the handle) shrinks it.
   ===================================================================== */
.gm2{--scale:1;--pbar:44px;--con-h:236px;--strip:0px;--evw:0px;
  --fit:min(calc(100dvh - 2*var(--pbar) - var(--con-h) - 24px), calc(100vw - 2*var(--gutter) - var(--evw)));
  display:flex;flex-direction:column;gap:var(--s2);padding:var(--s2) var(--gutter);max-width:1400px;margin:0 auto;width:100%;min-width:0}
.gm2.has-eval{--evw:30px}
.gm2.zh{--pbar:48px}
/* Phone, Crazyhouse: a full pocket needs the room, so the bars leave out the small portrait. */
.gm2.zh .pbar .av{display:none}
.gm2.zh .pbar .nm{min-width:56px}
.gm2.zh .pc{width:34px;height:34px}
.gm2.zh .pc svg{width:28px;height:28px}
.gm2>*{min-width:0;max-width:100%}
.gm2 .gboard{order:1;margin:0 auto;width:calc(var(--fit) * var(--scale) + var(--evw) + var(--strip))}
.gm2 .console{order:2}
.gm2 .stage{display:flex;align-items:stretch;gap:6px}
.gm2 .boardwrap{position:relative;flex:none;width:calc(var(--fit) * var(--scale))}
.gm2 .boardbox{width:100%;max-width:none;max-height:none;aspect-ratio:1;position:relative}
.gm2 .pbar{min-height:var(--pbar);padding:4px 0;gap:var(--s2)}
.gm2 .pbar .nm b{font-size:var(--t-sm)}
.gm2 .pbar .rt{font-family:var(--font-mono);color:var(--muted);font-weight:500}
.gm2 .clock{height:36px;min-width:84px;font-size:1.15rem}
.gm2 .evalslot{width:24px;flex:none;display:flex}
.gm2 .evalslot .evalcol{width:100%}
.gm2 .evalslot .evalbar{width:24px}
/* The icon strip and the corner handle: desktop only. */
.bside{display:none}
.resize{display:none}
/* The panel. */
.console{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s2) var(--s3);overflow:hidden;position:relative}
.pn-tabs{display:none}
.pn-body{min-height:0;display:flex;flex-direction:column;gap:var(--s1)}
.pn-opening{display:none;font-size:var(--t-meta);color:var(--muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-status{margin:0;font-size:var(--t-meta);color:var(--ink);min-height:18px}
.pn-match{display:none;margin:0;text-align:center}
.gm2 .moves{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--s1);overflow-x:auto;overflow-y:hidden;max-height:none;min-height:40px;width:100%;min-width:0;scrollbar-width:thin}
.gm2 .moves .n{flex:none;color:var(--muted)}
.gm2 .moves .m{flex:none;min-height:34px;padding:2px var(--s2);border-radius:var(--radius-xs)}
.gm2 .moves .m.on{background:var(--navy);color:var(--on-navy)}
.gm2 .moves .moves-empty{grid-column:auto;color:var(--muted);font-size:var(--t-meta)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1)}
.tile{min-height:42px;border:0;border-radius:var(--radius-sm);background:var(--tint);color:var(--navy);display:grid;place-items:center;cursor:pointer}
.tile:hover{background:var(--tint-2)}
.tile[disabled]{opacity:.4;cursor:default}
.tile .ic{width:22px;height:22px}
.pn-foot{display:flex;flex-direction:column;gap:var(--s2)}
.pn-actions{display:flex;align-items:center;gap:var(--s1)}
.pn-act{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap-min);padding:0 var(--s2);border:0;background:none;color:var(--text);font-weight:700;font-size:var(--t-sm);cursor:pointer;border-radius:var(--radius-sm)}
.pn-act:hover{background:var(--surface-soft);color:var(--ink)}
.pn-act .ic{width:20px;height:20px}
.con-sep{flex:1}
.ic-btn{min-width:var(--tap-min);width:var(--tap-min);padding:0;border-color:transparent}
.ic-btn .ic{width:20px;height:20px;display:block}
.ic path,.ic circle{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic-btn[aria-expanded="true"]{background:var(--tint);border-color:var(--line)}
.con-opts{display:flex;flex-direction:column;padding:var(--s2) 0;border-top:var(--border-w) solid var(--line-soft);border-bottom:var(--border-w) solid var(--line-soft)}
.pn-foot .two,.pn-confirm .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.pn-confirm{position:absolute;left:var(--s3);right:var(--s3);bottom:var(--s3);background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--radius);box-shadow:var(--e3);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);text-align:center;animation:fade var(--dur) var(--ease) 1 both;z-index:3}
.pn-facts{margin:0;display:flex;flex-direction:column}
.pn-facts div{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-bottom:var(--border-w) solid var(--line-soft);font-size:var(--t-sm)}
.pn-facts dt{color:var(--muted)}
.pn-facts dd{margin:0;font-weight:700;color:var(--ink);text-align:right}
/* Phone: during a game nothing above the board; options take the moves' place, so it still fits. */
@container frame (max-width:899px){
  .tb-game{display:none}
  .console:has(.con-opts) .pn-body{display:none}
}
/* Desktop: the board at the window's height, the panel on its right. */
@container frame (min-width:900px){
  .gm2.zh{--pbar:52px}
  .gm2.zh .pbar .av{display:grid}
  .gm2.zh .pc{width:42px;height:42px}
  .gm2.zh .pc svg{width:36px;height:36px}
  .gm2{--pbar:52px;--strip:40px;--panel:340px;
    --fit:min(calc(100dvh - 60px - 2*var(--pbar) - 40px), calc(100vw - 2*var(--gutter) - var(--panel) - var(--s5) - var(--evw) - var(--strip) - 12px));
    flex-direction:row;align-items:flex-start;justify-content:center;gap:var(--s5);padding-top:var(--s4)}
  .gm2 .gboard{order:1;margin:0;flex:none}
  .gm2 .console{order:2;width:var(--panel);flex:none;height:calc(var(--fit) * var(--scale) + 2*var(--pbar));min-height:420px;padding:0}
  .pn-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--border-w) solid var(--line)}
  .pn-tab{min-height:var(--tap-min);border:0;background:none;font-weight:700;font-size:var(--t-sm);color:var(--muted);cursor:pointer;box-shadow:inset 0 -2px 0 transparent}
  .pn-tab.on{color:var(--ink);box-shadow:inset 0 -3px 0 var(--blue)}
  .pn-body{flex:1;overflow-y:auto;padding:var(--s2) var(--s3) 0}
  .pn-opening{display:block}
  .pn-status,.pn-sq,.sq-pick{padding:0 var(--s3)}
  .pn-match{display:block;padding:0 var(--s3)}
  .tiles{padding:0 var(--s3)}
  .tile{min-height:46px}
  .con-opts{margin:0 var(--s3)}
  .pn-foot{padding:0 var(--s3) var(--s3)}
  .gm2 .moves{display:grid;grid-template-columns:3.4ch 1fr 1fr;gap:0;overflow:visible;min-height:0;align-content:start}
  .gm2 .moves>*{padding:0 var(--s2);min-height:30px;display:flex;align-items:center}
  .gm2 .moves .n{background:var(--surface-soft)}
  .gm2 .moves .m{min-height:30px;border-radius:0;justify-content:flex-start}
  .gm2 .moves .moves-empty{grid-column:1/-1}
  .gm2 .clock{height:var(--ctl-h);min-width:104px;font-size:1.45rem}
  .bside{display:flex;flex-direction:column;gap:2px;width:var(--strip);flex:none}
  .resize{display:grid;place-items:center;position:absolute;right:-30px;bottom:-4px;width:28px;height:28px;padding:0;border:0;background:none;color:var(--muted);cursor:nwse-resize;touch-action:none;z-index:6;border-radius:var(--radius-xs)}
  .resize:hover,.resize:focus-visible{color:var(--navy);background:var(--tint)}
  .resize .ic{width:18px;height:18px}
}

/* The review's panel, as chess.com lays it out, in our colours. */
.rv-head{display:grid;grid-template-columns:var(--tap-min) 1fr var(--tap-min);align-items:center;min-height:var(--tap-min)}
.rv-title{display:flex;align-items:center;justify-content:center;gap:var(--s2);font-size:var(--t-lead);margin:0;color:var(--ink)}
.rv-title svg{width:22px;height:22px}
.rv-body{gap:var(--s3)}
.rv-body .meta{margin:0}
.rv-tab{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.rv-tab th,.rv-tab td{padding:5px 4px;text-align:center;vertical-align:middle}
.rv-tab tbody th{text-align:left;font-weight:600;color:var(--ink);white-space:nowrap}
.rv-tab thead th{font-size:var(--t-meta);font-weight:700;color:var(--ink)}
.rv-tab thead th>span:last-child{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;margin-inline:auto}
.rv-tab thead .av{margin:0 auto}
.rv-tab td.c{font-family:var(--font-mono);font-weight:700;color:var(--ink);width:64px}
.rv-tab td.c.z{color:var(--line)}
.rv-tab td.ico{width:30px}
.rv-tab td.ico svg{width:22px;height:22px;display:block;margin:0 auto}
.rv-tab .na{font-family:var(--font-ui);font-weight:500;color:var(--muted);font-size:var(--t-meta)}
.rv-tab tbody tr+tr{border-top:var(--border-w) solid var(--line-soft)}
.rv-tab .ph-head th{padding-top:var(--s3);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.accbox{display:inline-block;min-width:64px;padding:6px var(--s2);border-radius:var(--radius-sm);font-family:var(--font-mono);font-weight:700;font-size:1.15rem;background:var(--surface);border:var(--border-w) solid var(--line);color:var(--ink)}
.accbox.dark{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.rv-btns{display:grid;grid-template-columns:auto auto 1fr;gap:var(--s2)}
.rv-btns .next{min-height:var(--ctl-h);font-size:var(--t-base)}
.rv-btns .next svg{width:18px;height:18px}
.rv-graph .graph{height:64px}
.rv-moves .m svg{width:16px;height:16px;flex:none}
.ic-spacer{width:var(--tap-min)}
.gm2 .evalslot .evalcol{display:flex;flex-direction:column;align-items:center;gap:var(--s1);height:100%}
.gm2 .evalslot .evnum{font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--ink)}
.gm2 .evalslot .evalbar{flex:1;width:20px}
/* Phone: the summary table scrolls inside the panel; the graph and tiles stay. */
@container frame (max-width:899px){
  /* The review on a phone: the board keeps most of the height; the panel takes what is left and scrolls inside. */
  .gm2:has(.rv-head){--con-h:290px;height:100dvh}
  .gm2:has(.rv-head) .console{flex:1;min-height:0}
  .gm2:has(.rv-head) .rv-body{flex:1;min-height:0;overflow-y:auto}
  .rv-graph .graph{height:40px}
  .rv-head{min-height:36px}
}
@container frame (min-width:900px){
  .rv-head{padding:0 var(--s2);border-bottom:var(--border-w) solid var(--line)}
  .rv-graph{padding:0 var(--s3)}
  .rv-btns{padding:0 var(--s3)}
  #tilesslot{padding:0 var(--s3) var(--s3)}
  #tilesslot .tiles{padding:0}
}
/* The eval bar runs the board's full height (an older showcase rule fixed #evalslot's height). */
.gm2 #evalslot{height:auto;align-self:stretch;min-height:0}
.gm2 #evalslot>.evalcol{height:100%}
/* Short phones: the walk-through's graph gives way to the coach's words (the eval bar stays). */
@media (max-width:899px) and (max-height:720px){
  .rv-graph{display:none}
}

/* The owner dashboard (my-bot.html) and Your games (games.html). */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tscroll{position:relative} /* keeps .sr inside the scrolling table, not the page */
.grow{flex:1;min-width:0}
.mb-head{align-items:flex-start;gap:var(--s3)}
.mb-head h2{font-size:var(--t-h3)}
.plan .sm{display:block;color:var(--text)}
.linkbox{display:flex;gap:var(--s2)}
.linkbox .input{flex:1;min-width:0;font-size:var(--t-sm)}
.ask{border:var(--border-w) solid var(--line);background:var(--surface-soft);border-radius:var(--radius-sm);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.nudge{display:flex;flex-direction:column;gap:var(--s1)}
.nudge input[type=range]{width:100%;min-height:var(--tap-min);accent-color:var(--blue);margin:0;cursor:pointer}
.lead-n{font-size:var(--t-lead);color:var(--ink);margin:0}

/* Focus mode (js/arena.js): the board and the player bars, nothing else. Esc or the button leaves it. */
.focus-exit{display:none}
body:has(.gm2.focus) .tb{display:none}
.gm2.focus{--con-h:0px;--panel:0px;padding-top:var(--s2)}
.gm2.focus .console{display:none}
.gm2.focus .focus-exit{display:inline-flex;position:fixed;top:var(--s2);right:var(--s2);z-index:7;box-shadow:var(--e1)}
.gm2.focus .gboard{margin:0 auto}
@container frame (min-width:900px){
  .gm2.focus{--fit:min(calc(100dvh - 2*var(--pbar) - 40px), calc(100vw - 2*var(--gutter) - var(--evw) - var(--strip) - 12px))}
}
.focus-exit .ic{width:18px;height:18px}
/* All bots (play.html with no bot, and /bots). */
.dir-tools{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@container frame (min-width:600px){.dir-tools{grid-template-columns:2fr 1fr}}
.dir-h{font-size:var(--t-h3)}

/* Preset portraits (js/avatar.js, drawn from the member's saved choices; never a photo). */
.av.look{background:var(--tint);border:0;overflow:hidden}
.av.look svg,.portrait.look svg{display:block;width:100%;height:100%}
.portrait.look{aspect-ratio:1/1;overflow:hidden;background:var(--tint)}
.portrait.photo{aspect-ratio:1/1;object-position:center}
/* The photo card on the portrait page (public/js/photo-crop.js). */
.ph{margin-top:var(--s5)}
.ph-drop{display:flex;flex-direction:column;align-items:center;gap:var(--s1);padding:var(--s6) var(--s4);border:2px dashed var(--line);border-radius:var(--radius-sm);text-align:center;cursor:pointer;background:var(--tint)}
.ph-drop:hover,.ph-drop.over,.ph-drop:focus-within{border-color:var(--blue);background:var(--tint-2)}
.ph-stage{width:min(280px,100%);aspect-ratio:1/1}
.ph-stage canvas{width:100%;height:100%;display:block;border-radius:var(--radius-sm);cursor:grab;touch-action:none;background:var(--tint-2)}
.ph-stage canvas:active{cursor:grabbing}
.ph .pk-sizes canvas{display:block;border-radius:var(--radius-sm)}
.ph .pk-sizes canvas.round{border-radius:50%}
.ph-saved img{border-radius:var(--radius-sm)}
.bp-face .portrait.look{max-width:220px;align-self:flex-start}
/* Your portrait (avatar.html): the preview beside the controls, as the kit's picker.html. */
.pk{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);align-items:start}
@container frame (min-width:900px){.pk{grid-template-columns:minmax(0,380px) minmax(0,1fr)}.pk-prev{position:sticky;top:var(--s4)}}
.pk-big{aspect-ratio:1/1;max-width:340px;width:100%;border:var(--border-w) solid var(--line-soft);border-radius:var(--radius-sm);overflow:hidden;background:var(--tint)}
.pk-big svg{display:block;width:100%;height:100%}
.pk-who{margin:0;color:var(--ink);font-size:var(--t-h3);font-weight:700;line-height:1.2}
.pk-prev .meta{margin:0}
.pk-sizes{display:flex;gap:var(--s5);align-items:flex-end;flex-wrap:wrap}
.pk-sizes figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--s1)}
.pk-ctl{display:flex;flex-direction:column;gap:var(--s5)}
.pk-group{display:flex;flex-direction:column;gap:var(--s4)}
.pk-group+.pk-group{border-top:var(--border-w) solid var(--line-soft);padding-top:var(--s5)}
.pk-title{margin:0;font-size:var(--t-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pk-toggles{gap:var(--s4)}
.pk-seg{min-width:200px}
.pk-slider output{color:var(--ink);font-weight:600;font-size:var(--t-sm);text-align:right}
.pk-range{position:relative;height:var(--tap-min);max-width:560px}
.pk-track{position:absolute;left:14px;right:14px;top:13px;height:18px;display:flex;border-radius:var(--radius-pill);overflow:hidden;border:var(--border-w) solid var(--line);background:var(--tint)}
.pk-track span{flex:1 1 0}
.pk-track span:first-child,.pk-track span:last-child{flex-grow:.5}
.pk-track.steps{top:19px;height:6px;border:0;background:var(--tint-2)}
.pk-ticks{position:absolute;left:14px;right:14px;top:18px;height:8px;display:flex;justify-content:space-between;pointer-events:none}
.pk-ticks i{width:8px;height:8px;margin:0 -4px;border-radius:50%;background:var(--line)}
.pk-range input[type=range]{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:var(--tap-min);margin:0;background:transparent;cursor:pointer}
.pk-range input[type=range]::-webkit-slider-runnable-track{height:var(--tap-min);background:transparent}
.pk-range input[type=range]::-moz-range-track{height:var(--tap-min);background:transparent}
.pk-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:8px;border-radius:50%;background:var(--thumb,var(--surface));border:3px solid var(--navy);box-sizing:border-box}
.pk-range input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--thumb,var(--surface));border:3px solid var(--navy);box-sizing:border-box}
.pk-range input[type=range]:focus{outline:none;box-shadow:none}
.pk-range input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--focus-ring)}
.pk-range input[type=range]:focus-visible::-moz-range-thumb{box-shadow:var(--focus-ring)}
.pk-switch{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:var(--tap-min);cursor:pointer}
.pk-switch .lbl,.pk-switch .meta{display:block}
.pk-switch input{-webkit-appearance:none;appearance:none;flex:none;width:48px;height:28px;margin:0;border-radius:var(--radius-pill);background:var(--tint-2);border:var(--border-w) solid var(--line);position:relative;cursor:pointer;transition:background-color var(--dur) var(--ease)}
.pk-switch input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);border:var(--border-w) solid var(--line);transition:transform var(--dur) var(--ease)}
.pk-switch input:checked{background:var(--blue);border-color:var(--blue)}
.pk-switch input:checked::after{transform:translateX(20px);border-color:var(--blue)}