/* Vyuhh v1.3 */
/* an element marked hidden stays hidden, even if a rule below gives it display:flex */
[hidden]{display:none !important}

:root{
  --sand:#E8DCC0; --indigo:#2C3654; --ink:#241A12;
  --sq-light:#F4F7F2; --sq-dark:#9FB79B; --edge:#5A6E56;
  --brass:#C9A227; --panel:#171A26; --panel2:#1F2433;
  --text:#E7E2D6; --muted:#9A9385; --zone:#D8A03A;   /* warm stone, so a Durg zone reads against the green */
  /* The board is sized by whichever runs out first, width or height, so
     it lands whole on screen without scrolling or fiddling. */
  --gut:66px;      /* padding, rank labels, borders */
  --vchrome:250px; /* vertical space above and below the board */
  --cell:62px;     /* fallback for browsers without min() */
  --cell:min(96px, calc((100vw - var(--gut)) / 9), calc((100vh - var(--vchrome)) / 9));
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
/* "clip" stops sideways overflow like "hidden" does, but without turning the
   page into a scroll container — which is what kept the sticky nav from sticking. */
@supports (overflow:clip){html,body{overflow-x:clip}}
body{
  background:#0F1119;
  color:var(--text);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  min-height:100vh;
  display:block;
  padding:0;
}
.wrap{display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; justify-content:center;
  max-width:1240px; width:100%; margin:0 auto; padding:24px 16px 40px; box-sizing:border-box}
h1{
  font-size:26px; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 2px; font-weight:600; color:var(--sand);
}
.sub{font-size:12.5px; color:var(--muted); letter-spacing:.05em; margin:0 0 16px}

/* ---------- board ---------- */
.boardwrap{background:var(--panel); padding:18px; border-radius:6px;
  border:1px solid #2C3243; box-shadow:0 18px 50px rgba(0,0,0,.55)}
table.board{border-collapse:collapse; user-select:none}
table.board td{padding:0}
.sq{
  width:62px;height:62px;                 /* fallback for old browsers */
  width:var(--cell);height:var(--cell);
  position:relative;cursor:pointer;display:block;border:none;padding:0;
}
.sq.light{background:var(--sq-light)} .sq.dark{background:var(--sq-dark)}
.sq .zone{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--zone);opacity:.28;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(150,110,30,.30)}
.sq .pc{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;
  justify-content:center;pointer-events:none;will-change:transform}
.sq .pc svg{height:56px;height:calc(var(--cell) * .92);width:auto;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.28))}
.sq.sel{outline:3px solid var(--brass);outline-offset:-3px;z-index:3}
.sq .dot{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;background:rgba(30,30,30,.42);pointer-events:none;z-index:2}
.sq .ring{position:absolute;top:3px;right:3px;bottom:3px;left:3px;border:3px solid rgba(178,34,34,.72);border-radius:4px;pointer-events:none;z-index:2}
.sq .mut{position:absolute;top:3px;right:3px;bottom:3px;left:3px;border:3px dashed rgba(140,20,20,.85);border-radius:4px;pointer-events:none;z-index:2}
.sq.lastf,.sq.lastt{box-shadow:inset 0 0 0 3px rgba(201,162,39,.55)}
.sq.chk{box-shadow:inset 0 0 0 4px rgba(200,40,40,.85)}
.lbl{color:#6E8069;font-size:12px;text-align:center;width:62px;width:var(--cell);letter-spacing:.08em}
.rlbl{color:#6E8069;font-size:12px;padding-right:8px;text-align:right}

/* ---------- panel ---------- */
.side{width:330px;max-width:100%;display:flex;flex-direction:column;gap:14px}
.card{background:var(--panel);border:1px solid #2C3243;border-radius:6px;padding:14px 16px}
.turn{display:flex;align-items:center;gap:10px;font-size:15px;letter-spacing:.06em}
.chip{width:15px;height:15px;border-radius:50%;border:1px solid #000}
.chip.W{background:var(--sand)} .chip.B{background:var(--indigo)}
.status{margin-top:8px;font-size:13px;color:var(--muted);line-height:1.5;min-height:19px}
.status.alert{color:#E9A23B}
.status.over{color:var(--brass);font-size:15px}
h2{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin:0 0 9px;font-weight:600}
.log{height:190px;overflow-y:auto;font-family:"SF Mono",Menlo,Consolas,monospace;
  font-size:12px;line-height:1.65;color:#CFC8B8}
.log .mv{display:inline-block;min-width:74px}
.log .num{color:#6E6858}
.log .ev{color:var(--brass);font-size:11px}
.mat{display:flex;justify-content:space-between;font-size:13px;margin-top:4px}
.mat b{color:var(--sand);font-weight:600}
button{
  font-family:inherit;font-size:13px;letter-spacing:.05em;cursor:pointer;
  background:#2A3145;color:var(--text);border:1px solid #3C4459;border-radius:4px;
  padding:9px 14px;transition:background .15s;
}
button:hover{background:#343C54}
button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
button.primary{background:var(--brass);color:#231B06;border-color:var(--brass);font-weight:600}
button.primary:hover{background:#DCB43A}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.qstat{font-size:13px;color:var(--muted);margin-bottom:10px}
.qstat b{color:var(--sand);font-weight:600}
#raniBtn{width:100%;background:#4A3A6B;border-color:#5E4A85}
#raniBtn:hover:not(:disabled){background:#5A4880}
#raniBtn:disabled{opacity:.42;cursor:not-allowed}
#raniBtn:not(:disabled){background:var(--brass);color:#231B06;border-color:var(--brass);font-weight:600}
.qhint{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.45;min-height:16px}
.clocks{display:flex;gap:8px;margin:10px 0 2px}
.clk{flex:1;background:#11141F;border:1px solid #2C3243;border-radius:4px;padding:6px 9px;
  display:flex;flex-direction:column;gap:1px;min-width:0}
.clk span{font-size:10px;letter-spacing:.05em;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clk b{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:16px;color:var(--text);font-weight:500}
.clk.live{border-color:var(--brass);background:#1B1A12}
.clk.live b{color:var(--brass)}
.clk.low b{color:#E05A4A}
.colmain{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:100%}
.strip{box-sizing:border-box;max-width:100%;
  background:var(--panel);border:1px solid #2C3243;border-radius:6px;
  padding:9px 12px;white-space:nowrap;overflow-x:auto;overflow-y:hidden;
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;line-height:1.7;
  color:#CFC8B8;scrollbar-width:thin;flex:1;min-width:0}
.strip::-webkit-scrollbar{height:6px}
.strip::-webkit-scrollbar-thumb{background:#3C4459;border-radius:3px}
.strip .num{color:#6E6858;margin-left:7px}
.strip .num:first-child{margin-left:0}
.strip .sm{cursor:pointer;padding:1px 3px;border-radius:3px}
.strip .sm:hover{background:#2A3145}
.strip .sm.here{background:var(--brass);color:#231B06;font-weight:600}
.strip .tag{color:var(--brass);font-size:11px;margin-left:2px}
.stripbar{display:flex;align-items:stretch;gap:6px;margin-bottom:12px}
.stripnav{flex:0 0 auto;width:30px;padding:0;font-size:11px;
  background:var(--panel);border:1px solid #2C3243;border-radius:6px;
  color:var(--muted);cursor:pointer}
.stripnav:hover:not(:disabled){border-color:#4A5266;color:var(--text)}
.stripnav:disabled{opacity:.35;cursor:default}
.strip .empty{color:#5A6072;letter-spacing:.05em}
.tray{display:flex;align-items:center;gap:1px;min-height:34px;padding:4px 8px;flex-wrap:wrap;
  background:#CBD9C6;border-radius:4px;border:1px solid #AFC2AA}
.tray svg{height:26px;width:auto;opacity:.92}
.tray .adv{margin-left:9px;font-size:13px;color:#3F5B3A;font-weight:700;
  font-family:"SF Mono",Menlo,Consolas,monospace}
.tray .none{font-size:11.5px;color:#77896F;letter-spacing:.06em}
#trayTop{margin-bottom:5px} #trayBot{margin-top:5px}
.sparkwrap{margin-bottom:8px}
.spark{width:100%;height:44px;display:block;background:#11141F;border:1px solid #2C3243;border-radius:4px}
.rnav{display:flex;gap:6px;margin-bottom:9px}
.rnav button{flex:1;padding:5px 0;font-size:14px}
.rlist{max-height:150px;overflow-y:auto;font-family:"SF Mono",Menlo,Consolas,monospace;
  font-size:12px;line-height:1.9;color:#CFC8B8}
.rmv{cursor:pointer;padding:1px 4px;border-radius:3px}
.rmv:hover{background:#2A3145}
.rmv.here{background:var(--brass);color:#231B06;font-weight:600}
.rmv .sym{font-weight:700;margin-left:1px}
.blunder{color:#E0553F} .mistake{color:#E09A3F} .inacc{color:#D7C24A} .good{color:#7BB661}
.rmv.blunder{color:#E0553F} .rmv.mistake{color:#E09A3F} .rmv.inacc{color:#D7C24A}
.rnote{font-size:12px;color:var(--muted);margin-top:9px;min-height:17px;line-height:1.5}
.rtally{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.7}
.rtally span{color:var(--sand)}
.setting{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:12.5px;color:var(--muted);margin-bottom:8px}
.setting select{font-family:inherit;font-size:12.5px;background:#2A3145;color:var(--text);
  border:1px solid #3C4459;border-radius:4px;padding:5px 7px}
.setting select:focus-visible{outline:2px solid var(--brass);outline-offset:1px}

/* ---------- modal ---------- */
.veil{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(8,10,16,.82);display:none;
  align-items:center;justify-content:center;z-index:50;padding:20px}
.veil.on{display:flex}
.modal{background:var(--panel2);border:1px solid #3C4459;border-radius:8px;
  padding:26px 30px;max-width:430px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal h3{margin:0 0 8px;font-size:19px;color:var(--sand);letter-spacing:.05em}
.modal p{margin:0 0 18px;font-size:13.5px;color:var(--muted);line-height:1.6}
.modal p.warn{color:#D8A03A;font-size:12.5px;margin-bottom:16px}
.picks{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.picks.col{flex-direction:column;align-items:stretch}
button.wide{width:100%;padding:12px 16px;font-size:13.5px}
button.back{background:transparent;border-color:#3C4459;color:var(--muted);padding:8px}
button.back:hover{background:#242A3A}
.pick{background:#2A3145;border:1px solid #3C4459;border-radius:6px;padding:10px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;min-width:74px}
.pick:hover{background:#39425C;border-color:var(--brass)}
.pick svg{width:38px;height:auto}
.pick span{font-size:11.5px;letter-spacing:.06em;color:var(--text)}
.pick .cost{font-size:10px;color:#C97B4A;letter-spacing:.04em}
.pick .hue{font-size:10px;color:#8A93A8;letter-spacing:.04em}
.coin{font-size:15px;color:var(--sand);margin:14px 0 20px;min-height:22px}
.help{font-size:12.5px;line-height:1.7;color:var(--muted)}
.help b{color:var(--sand);font-weight:600}
.help hr{border:none;border-top:1px solid #2C3243;margin:10px 0}
details summary{cursor:pointer;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
details[open] summary{margin-bottom:9px}
@media(max-width:820px){
  .wrap{padding:14px 8px 28px}
  .wrap{gap:16px}
  .side{width:100%}
  .boardwrap{padding:10px}
  :root{--gut:52px;
    --cell:min(96px, calc((100vw - var(--gut)) / 9));}
  .rlbl{padding-right:5px;font-size:11px}
}
@media(max-width:560px){
  .wrap{padding:10px 5px 22px}
  .boardwrap{padding:7px}
  :root{--gut:42px;
    --cell:min(96px, calc((100vw - var(--gut)) / 9));}
  h1{font-size:21px}
  .sub{font-size:11.5px}
  .lbl{font-size:10px}
  .rlbl{padding-right:3px;font-size:10px}
  .tray{min-height:30px;padding:3px 5px}
  .tray svg{height:22px}
}

/* ============================ site chrome ============================ */
.nav{position:sticky;top:0;z-index:40;background:rgba(15,17,25,.94);
  border-bottom:1px solid #232838;backdrop-filter:blur(8px)}
.navin{max-width:1240px;margin:0 auto;padding:0 18px;display:flex;align-items:center;gap:8px;height:56px}
.brand{display:flex;align-items:baseline;gap:9px;margin-right:auto;text-decoration:none}
.brand b{font-size:20px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand);font-weight:600}
.brand span{font-size:11px;color:var(--muted);letter-spacing:.08em}
.nav a.lnk{color:var(--muted);text-decoration:none;font-size:13.5px;letter-spacing:.05em;
  padding:7px 12px;border-radius:4px}
.nav a.lnk:hover{color:var(--text);background:#1E2331}
.nav a.lnk.on{color:var(--brass);background:#1E2331}
.page{max-width:900px;margin:0 auto;padding:34px 20px 60px}
.page h2{font-size:22px;color:var(--sand);letter-spacing:.02em;margin:34px 0 10px;
  text-transform:none;font-weight:600}
.page h2:first-child{margin-top:0}
.page h3{font-size:15px;color:var(--sand);margin:22px 0 6px;font-weight:600}
.page p{font-size:14.5px;line-height:1.75;color:#C9C3B6;margin:0 0 14px}
.page ul{font-size:14.5px;line-height:1.8;color:#C9C3B6;padding-left:20px;margin:0 0 14px}
.lead{font-size:16.5px;line-height:1.7;color:var(--text)}
.hero{text-align:center;padding:8px 0 26px}
.hero h1{font-size:30px;margin-bottom:6px}
.cta{display:inline-block;background:var(--brass);color:#231B06;font-weight:600;
  text-decoration:none;padding:11px 22px;border-radius:5px;font-size:14px;letter-spacing:.04em}
.cta:hover{background:#DCB43A}
.cta.ghost{background:transparent;color:var(--text);border:1px solid #3C4459;margin-left:8px}
.cta.ghost:hover{background:#242A3A}

/* piece explainer */
.plist{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.ptab{display:flex;align-items:center;gap:7px;background:#1E2331;border:1px solid #2C3243;
  border-radius:5px;padding:6px 11px 6px 7px;cursor:pointer;font-size:13px;color:var(--text)}
.ptab:hover{border-color:#4A5266}
.ptab.on{border-color:var(--brass);background:#251F10}
.ptab svg{height:26px;width:auto}
.demo{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.demoboard{background:var(--panel);border:1px solid #2C3243;border-radius:6px;padding:10px}
.demoside{flex:1;min-width:230px}
.demoside h3{margin-top:0}
.demoside .val{font-size:12px;color:var(--muted);margin-top:10px}
.demoside .val b{color:var(--brass)}
.dsq{width:34px;height:34px;position:relative;display:block}
.dsq.light{background:var(--sq-light)} .dsq.dark{background:var(--sq-dark)}
.dsq .zone{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--zone);opacity:.22}
.dsq .pc{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}
.dsq .pc svg{height:30px;width:auto}
.dsq .dot{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:rgba(30,30,30,.45)}
table.dboard{border-collapse:collapse}
table.dboard td{padding:0}
.note{background:#1A1E2B;border-left:3px solid var(--brass);border-radius:0 5px 5px 0;
  padding:12px 15px;margin:0 0 16px}
.note p{margin:0;font-size:13.5px}
.foot{border-top:1px solid #232838;margin-top:40px;padding:20px;text-align:center;
  font-size:12px;color:#5A6072}
.foot a{color:var(--muted)}
.foot .ver{color:#4A5266;font-size:11px;letter-spacing:.08em}
@media(max-width:560px){
  .navin{padding:0 10px;gap:2px;height:50px}
  .brand b{font-size:17px}.brand span{display:none}
  .nav a.lnk{font-size:12px;padding:6px 8px}
  .page{padding:24px 14px 44px}
}


/* ============ wide screens: put the trays beside the board ============
   A wide, short window has spare width but no spare height. Moving the
   capture trays to the flanks frees roughly 90px of vertical room, which
   goes straight into a bigger board. */
@media(min-width:1180px){
  :root{--vchrome:192px}
  .wrap{max-width:1560px}
  .boardwrap{display:flex;flex-direction:row;align-items:stretch;gap:9px}
  #board{order:1}
  .tray{flex-direction:column;align-content:flex-start;
    width:58px;min-height:0;padding:6px 4px;gap:2px}
  #trayTop{order:0;margin-bottom:0}
  #trayBot{order:2;margin-top:0}
  .tray svg{height:26px}
  .tray .adv{margin:6px 0 0 0;width:100%;text-align:center}
  .tray .none{writing-mode:vertical-rl;text-orientation:mixed;margin:0 auto;opacity:.7}
  .strip{padding:7px 12px;margin-bottom:9px}
}

/* ---------------- animated walkthroughs on the Learn page ---------------- */
.atabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.atab{background:#1E2331;border:1px solid #2C3243;border-radius:5px;padding:6px 11px;
  cursor:pointer;font-size:12.5px;color:var(--muted)}
.atab:hover{border-color:#4A5266;color:var(--text)}
.atab.on{border-color:var(--brass);background:#251F10;color:var(--sand)}
.anim{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;margin-bottom:8px}
.animboard{background:var(--panel);border:1px solid #2C3243;border-radius:6px;padding:9px}
table.aboard{border-collapse:collapse}
table.aboard td{padding:0}
.asq{width:31px;height:31px;position:relative;display:block}
.asq.light{background:var(--sq-light)} .asq.dark{background:var(--sq-dark)}
.asq .zone{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--zone);opacity:.28}
.asq .pc{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;
  justify-content:center;will-change:transform}
.asq .pc svg{height:28px;width:auto}
.asq.hit{box-shadow:inset 0 0 0 3px var(--brass);z-index:2}
.asq.ban::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:13px;
  margin:-6.5px 0 0 -6.5px;border-radius:50%;background:rgba(200,60,50,.75)}
.animside{flex:1;min-width:250px}
.animsay{font-size:15px;line-height:1.6;color:var(--text);margin:2px 0 16px;min-height:62px}
.animdots{display:flex;gap:6px;margin-bottom:14px}
.animdots .dot{width:8px;height:8px;border-radius:50%;background:#333A4C}
.animdots .dot.on{background:var(--brass)}
.animctl{display:flex;gap:8px}
.animctl button{font-size:12.5px;padding:7px 13px}
@media(max-width:560px){.asq{width:26px;height:26px}.asq .pc svg{height:23px}}

/* ---------------------------- puzzles ---------------------------- */
.pzhead{display:flex;justify-content:space-between;align-items:flex-end;margin:22px 0 12px}
.pzhead h3{margin:3px 0 0;font-size:19px;color:var(--sand)}
.pztag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.pzcount{font-size:12px;color:var(--muted)}
.pzsay{font-size:14.5px;line-height:1.65;color:var(--text);margin:0 0 12px;min-height:48px}
.pzsay.good{color:#8FCB7B}
.pzsay.bad{color:#E09A3F}
#pzturn{margin-bottom:12px}
/* The board gets its own responsive cell size — no sidebar competes for
   width on this page, so it can run larger than the Play board while
   still capping out at a sane maximum on wide screens. */
:root{ --pzcell:min(74px, calc((100vw - 56px) / 9)); }
.pzboard{background:var(--panel);border:1px solid #2C3243;border-radius:6px;
  padding:10px;display:inline-block;margin-bottom:16px}
table.pboard{border-collapse:collapse}
table.pboard td{padding:0}
.psq{width:var(--pzcell);height:var(--pzcell);position:relative;display:block;cursor:pointer}
.psq.light{background:var(--sq-light)} .psq.dark{background:var(--sq-dark)}
.psq .zone{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--zone);opacity:.28}
.psq .pc{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}
.psq .pc svg{height:calc(var(--pzcell) * .9);width:auto}
.psq.sel{outline:3px solid var(--brass);outline-offset:-3px;z-index:3}
.psq .dot{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:rgba(30,30,30,.42);z-index:2}
.psq .ring{position:absolute;top:2px;right:2px;bottom:2px;left:2px;
  border:3px solid rgba(178,34,34,.72);border-radius:4px;z-index:2}
.pzctl{display:flex;gap:8px;margin-bottom:8px}
.pzctl button{font-size:12.5px;padding:8px 14px}
.pzctl button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:480px){:root{ --pzcell:min(74px, calc((100vw - 40px) / 9)); }}

/* puzzle category counts, reusing the .atab look from the Learn page */
.atabs .atab span{color:#6E7688;font-size:10.5px;margin-left:2px}
.atabs .atab.on span{color:#8A7530}

/* ---------------------------- feedback ---------------------------- */
.fbform{max-width:520px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fbrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:12.5px;color:var(--muted);margin-bottom:14px}
.fbrow.col{flex-direction:column;align-items:stretch;gap:6px}
.fbrow select,.fbrow input,.fbrow textarea{
  font-family:inherit;font-size:13px;background:#2A3145;color:var(--text);
  border:1px solid #3C4459;border-radius:4px;padding:8px 9px}
.fbrow textarea{resize:vertical;line-height:1.55;min-height:110px}
.fbrow select:focus-visible,.fbrow input:focus-visible,.fbrow textarea:focus-visible{
  outline:2px solid var(--brass);outline-offset:1px}
.fbctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fbnote{font-size:12.5px;color:var(--muted)}
.fbnote.good{color:#8FCB7B}
.fbnote.bad{color:#E09A3F}
.fbnote.warn{color:#C9A227}

/* ------------------------- puzzle of the day ------------------------- */
.daily{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--panel);border:1px solid #2C3243;border-left:3px solid var(--brass);
  border-radius:6px;padding:13px 16px;margin:18px 0 16px}
.dayleft{display:flex;flex-direction:column;gap:3px}
.daytag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.dayleft b{font-size:15px;color:var(--text);font-weight:600}
.dayright{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.daystat{font-size:12px;color:var(--muted)}
.daystat b{font-size:17px;color:var(--sand);font-weight:600;margin-right:4px}
.dayright button{font-size:12.5px;padding:8px 15px}

/* --------------------- guided first game (tutorial) --------------------- */
.tutbox{background:var(--panel);border:1px solid #2C3243;border-left:3px solid var(--brass);
  border-radius:6px;padding:16px 18px;margin:18px 0 26px}
.tuthead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:10px}
.tuthead h3{margin:3px 0 0;font-size:17px;color:var(--sand)}
.tuttag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.tutstep{font-size:12px;color:var(--muted);white-space:nowrap}
.tutsay{font-size:14.5px;line-height:1.6;color:var(--text);margin:0 0 14px;min-height:62px}
.tutsay.good{color:#8FCB7B}
.tutsay.bad{color:#E09A3F}
:root{ --tcell:min(54px, calc((100vw - 76px) / 9)); }
.tutboard{display:inline-block;background:#11141F;border:1px solid #2C3243;
  border-radius:5px;padding:8px;margin-bottom:14px}
table.tboard{border-collapse:collapse}
table.tboard td{padding:0}
.tsq{width:var(--tcell);height:var(--tcell);position:relative;display:block;cursor:pointer}
.tsq.light{background:var(--sq-light)} .tsq.dark{background:var(--sq-dark)}
.tsq .zone{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--zone);opacity:.28}
.tsq .pc{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}
.tsq .pc svg{height:calc(var(--tcell) * .9);width:auto}
.tsq.sel{outline:3px solid var(--brass);outline-offset:-3px;z-index:3}
.tsq .dot{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:rgba(30,30,30,.42);z-index:2}
.tsq .ring{position:absolute;top:2px;right:2px;bottom:2px;left:2px;
  border:3px solid rgba(178,34,34,.72);border-radius:4px;z-index:2}
.tutctl{display:flex;gap:8px}
.tutctl button{font-size:12.5px;padding:8px 15px}
.tutctl button:disabled{opacity:.4;cursor:not-allowed}
.tutdone{padding:34px 20px;text-align:center;font-size:17px;color:var(--sand);line-height:1.9}
.tutdone a{color:var(--brass)}
@media(max-width:480px){:root{ --tcell:min(54px, calc((100vw - 58px) / 9)); }}

/* ------------------------------- My games ------------------------------- */
.hctl{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 20px}
.hctl button, .hctl label{font-size:12.5px;padding:8px 14px}
.hlist{display:flex;flex-direction:column;gap:10px}
.hcard{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.hinfo{display:flex;flex-direction:column;gap:3px;min-width:200px}
.hinfo b{color:var(--sand);font-size:15px;font-weight:600}
.hinfo span{font-size:12.5px;color:var(--muted)}
.hbtns{display:flex;gap:8px;flex-wrap:wrap}
.hbtns button{font-size:12.5px;padding:7px 12px}
.hempty{color:var(--muted);font-size:14.5px;padding:34px 4px;text-align:center;line-height:1.7}
.hempty a{color:var(--brass)}
.hviewer{margin-top:22px;padding-top:18px;border-top:1px solid #2C3243}
.hviewer .pzhead{margin-top:0}

/* ============================== homepage ============================== */
.hm{max-width:1180px;margin:0 auto;padding:0 20px 20px}
.hm a{color:var(--brass)}
.hm .cta{color:#231B06}
.hm .cta.ghost{color:var(--text)}
.hm-kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:10px}

/* hero */
.hm-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:center;
  padding:56px 0 36px;position:relative}
.hm-hero::before{content:"";position:absolute;inset:-40px -200px auto -200px;height:560px;z-index:-1;
  background:radial-gradient(ellipse at 72% 40%, rgba(201,162,39,.10), transparent 60%),
             radial-gradient(ellipse at 20% 30%, rgba(44,54,84,.45), transparent 62%);pointer-events:none}
.hm-eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:16px}
.hm-title{font-size:64px;line-height:1;letter-spacing:.08em;margin:0;color:var(--sand);font-weight:600;
  text-transform:uppercase}
.hm-deva{display:block;font-size:30px;letter-spacing:.04em;text-transform:none;color:#B7AE99;
  font-weight:400;margin-top:12px;font-family:"Noto Serif Devanagari","Kohinoor Devanagari","Mangal",serif}
.hm-gloss{font-size:13px;color:var(--muted);margin:8px 0 22px;font-style:normal;letter-spacing:.02em}
.hm-tag{font-size:19px;line-height:1.65;color:var(--text);margin:0 0 28px;max-width:34em}
.hm-ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hm-ctas .cta{padding:13px 26px;font-size:15px}
.hm-ctas .cta.ghost{margin-left:0}
.hm-quick{font-size:13.5px;color:var(--muted);margin:18px 0 0}
.hm-quick a{text-decoration:none;border-bottom:1px solid rgba(201,162,39,.35)}
.hm-quick a:hover{border-bottom-color:var(--brass)}
.hm-tourbtn{margin-top:22px;background:transparent;border:1px dashed #3C4459;color:var(--muted);
  font-size:12.5px;padding:7px 14px;border-radius:20px}
.hm-tourbtn:hover{color:var(--sand);border-color:var(--brass);background:#1A1E2B}
.hm-tourbtn span{font-size:9px;margin-right:4px;color:var(--brass)}

/* hero board */
:root{ --hmcell:min(44px, calc((100vw - 64px) / 9.6)); }
.hm-stage{display:flex;flex-direction:column;align-items:center;width:calc(var(--hmcell) * 9.6 + 22px)}
.hm-boardwrap{background:var(--panel);border:1px solid #2C3243;border-radius:8px;padding:12px 14px 8px 8px;
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(201,162,39,.06)}
table.hmb{border-collapse:collapse;user-select:none}
table.hmb td{padding:0}
.hms{width:var(--hmcell);height:var(--hmcell);position:relative;display:block;transition:box-shadow .35s}
.hms.light{background:var(--sq-light)} .hms.dark{background:var(--sq-dark)}
.hms .zone{position:absolute;inset:0;background:var(--zone);opacity:.28}
.hms .pc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.hms .pc svg{height:calc(var(--hmcell) * .9);width:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.hms.lit{box-shadow:inset 0 0 0 3px var(--brass), 0 0 18px rgba(201,162,39,.55);z-index:3}
.hmr{color:#6E8069;font-size:10.5px;padding-right:6px;text-align:right;width:14px}
.hmf{color:#6E8069;font-size:10.5px;text-align:center;padding-top:3px;letter-spacing:.06em}
.hm-caption{font-size:14.5px;line-height:1.6;color:var(--text);text-align:center;margin:18px 4px 12px;min-height:70px;max-width:420px}
.hm-dots{display:flex;gap:8px}
.hm-dots button{width:9px;height:9px;padding:0;border-radius:50%;background:#333A4C;border:none}
.hm-dots button.on{background:var(--brass);width:22px;border-radius:5px}

/* facts strip */
.hm-facts{list-style:none;margin:8px 0 12px;padding:18px 0;display:flex;justify-content:space-around;
  gap:12px;flex-wrap:wrap;border-top:1px solid #232838;border-bottom:1px solid #232838}
.hm-facts li{display:flex;flex-direction:column;align-items:center;min-width:92px}
.hm-facts b{font-size:26px;color:var(--sand);font-weight:600;letter-spacing:.02em}
.hm-facts span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}

/* welcome back */
.hm-back{margin:30px 0 0}
.hm-backin{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  background:linear-gradient(90deg,#1E1A10,#171A26 60%);border:1px solid #3A3220;border-radius:8px;padding:18px 22px}
.hm-backin p{margin:0;font-size:14.5px;color:var(--text);line-height:1.6}
.hm-backin p b{color:var(--sand)}
.hm-backin .hm-kicker{margin-bottom:4px}

/* sections */
.hm-sec{padding:64px 0 8px}
.hm-sechead{max-width:640px;margin-bottom:28px}
.hm-sechead h2{font-size:32px;line-height:1.2;color:var(--sand);text-transform:none;letter-spacing:.01em;
  margin:0 0 10px;font-weight:600}
.hm-sechead p{font-size:15.5px;color:#C9C3B6;line-height:1.7;margin:0}
.hm-grid{display:grid;gap:16px}
.hm-grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hm-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}

.hm-feat{background:var(--panel);border:1px solid #2C3243;border-radius:8px;padding:22px 20px 20px;
  transition:border-color .2s, transform .2s}
.hm-feat:hover{border-color:#4A5266;transform:translateY(-2px)}
.hm-ficon{height:62px;display:flex;align-items:flex-end;gap:4px;margin-bottom:14px}
.hm-ficon svg{height:60px;width:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.hm-ficon2 span{display:flex}
.hm-feat h3{font-size:18px;color:var(--sand);margin:0 0 3px;font-weight:600}
.hm-fsub{font-size:12.5px;color:var(--brass);margin:0 0 12px;letter-spacing:.02em}
.hm-feat p:not(.hm-fsub){font-size:13.8px;line-height:1.7;color:#BDB7A9;margin:0}

.hm-pieces{grid-template-columns:repeat(4,minmax(0,1fr))}
.hm-piece{display:flex;gap:14px;align-items:flex-start;background:#141722;border:1px solid #262B3A;
  border-radius:8px;padding:14px 14px}
.hm-picon{display:flex;gap:1px;flex:0 0 auto;padding-top:2px}
.hm-picon svg{height:42px;width:auto}
.hm-piece b{display:block;font-size:15px;color:var(--sand);margin-bottom:3px}
.hm-piece p{font-size:12.8px;line-height:1.55;color:var(--muted);margin:0}

a.hm-way{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--panel);
  border:1px solid #2C3243;border-radius:8px;padding:20px 20px 18px;transition:border-color .2s,background .2s,transform .2s}
a.hm-way:hover{border-color:var(--brass);background:#1B1F2C;transform:translateY(-2px)}
.hm-wicon{font-size:20px;color:var(--brass);line-height:1;margin-bottom:6px}
a.hm-way b{font-size:16.5px;color:var(--sand);font-weight:600}
a.hm-way span:last-child{font-size:13.5px;line-height:1.6;color:var(--muted)}
a.hm-way-hot{border-color:#5A4A20;background:linear-gradient(160deg,#221D10,var(--panel) 55%)}

.hm-band{margin:72px 0 10px;text-align:center;padding:48px 24px;border-radius:10px;
  background:radial-gradient(ellipse at 50% 0%, rgba(201,162,39,.13), transparent 70%), var(--panel);
  border:1px solid #2C3243}
.hm-band h2{font-size:28px;color:var(--sand);text-transform:none;letter-spacing:.01em;margin:0 0 10px;font-weight:600}
.hm-band p{font-size:15px;color:#C9C3B6;margin:0 0 24px}
.hm-ctas-c{justify-content:center}

@media(max-width:1020px){
  .hm-grid4,.hm-pieces{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-hero{gap:36px}
  .hm-title{font-size:52px}
}
@media(max-width:860px){
  .hm-hero{grid-template-columns:1fr;justify-items:center;text-align:center;padding-top:34px}
  .hm-copy{display:flex;flex-direction:column;align-items:center}
  .hm-tag{margin-left:auto;margin-right:auto}
  .hm-ctas{justify-content:center}
  .hm-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .hm{padding:0 14px 10px}
  .hm-title{font-size:42px}
  .hm-deva{font-size:24px}
  .hm-tag{font-size:16.5px}
  .hm-grid4,.hm-grid3,.hm-pieces{grid-template-columns:1fr}
  .hm-sec{padding-top:48px}
  .hm-sechead h2{font-size:25px}
  .hm-facts li{min-width:30%}
  .hm-band{padding:36px 18px}
  .hm-band h2{font-size:22px}
  /* the nav carries seven links; let it scroll sideways rather than clip */
  .navin{overflow-x:auto;scrollbar-width:none}
  .navin::-webkit-scrollbar{display:none}
  .navin>a{flex:0 0 auto}
}

/* ================================ tour ================================ */
.tour-block{position:fixed;inset:0;z-index:60;background:transparent}
.tour-spot{position:fixed;z-index:61;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(8,10,16,.8), 0 0 0 2px var(--brass), 0 0 30px rgba(201,162,39,.35);
  transition:left .35s ease, top .35s ease, width .35s ease, height .35s ease}
.tour-tip{position:fixed;z-index:62;width:340px;max-width:calc(100vw - 32px);background:var(--panel2);
  border:1px solid #4A5266;border-radius:10px;padding:18px 20px 16px;box-shadow:0 20px 60px rgba(0,0,0,.6);
  transition:left .3s ease, top .3s ease}
.tour-tip.center{left:50%;top:50%;transform:translate(-50%,-50%);width:380px;text-align:center}
.tour-tip.sheet{left:12px;right:12px;bottom:12px;top:auto;width:auto;max-width:none}
.tour-tip h3{margin:0 0 8px;font-size:18px;color:var(--sand)}
.tour-tip p{margin:0 0 16px;font-size:14px;line-height:1.6;color:#C9C3B6}
.tour-count{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:6px}
.tour-btns{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.tour-tip.center .tour-btns{justify-content:center}
.tour-btns button{padding:8px 15px;font-size:13px}
.tour-gap{flex:1}
button.tour-skip{background:transparent;border:none;color:var(--muted);padding:8px 6px;text-decoration:underline;
  text-underline-offset:3px}
button.tour-skip:hover{color:var(--text)}
@media(prefers-reduced-motion:reduce){ .tour-spot,.tour-tip,.hm-feat,a.hm-way,.hms{transition:none} }

/* ---------- Learn: reference tables, English names, Play-page key links ---------- */
.demoside h3 .en{font-weight:400;color:var(--muted);font-size:.8em}
table.keytab{border-collapse:collapse;margin:4px 0 18px;font-size:14px;min-width:260px}
table.keytab th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:6px 16px 6px 0;border-bottom:1px solid #2C3243}
table.keytab td{padding:7px 16px 7px 0;border-bottom:1px solid #1F2433;color:#C9C3B6;vertical-align:top}
table.keytab code{font-family:"SF Mono",Menlo,Consolas,monospace;color:var(--sand);font-size:13.5px;white-space:nowrap}
table.keywide{width:100%}
table.keywide td:first-child{width:130px}
a.stripkey{display:flex;align-items:center;justify-content:center;text-decoration:none;
  background:#2A3145;color:var(--text);border:1px solid #3C4459;border-radius:4px;font-size:13px;font-weight:600}
a.stripkey:hover{border-color:var(--brass);color:var(--brass)}
.matlbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.matlbl a{color:var(--muted);text-transform:none;letter-spacing:0;font-size:11.5px;margin-left:6px}
.matlbl a:hover{color:var(--brass)}
.tutdone .tutmore{display:block;font-size:13px;color:var(--muted);margin-top:12px;line-height:1.6}
@media(max-width:560px){ table.keywide td:first-child{width:96px} }
/* quick-match countdown */
.coin.qcount{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:34px;letter-spacing:.06em;color:var(--brass)}
/* online connection notices under the turn line */
.netnote{margin-top:8px;font-size:12.5px;line-height:1.5;color:#E9A23B;background:#221D10;
  border:1px solid #4A3C18;border-radius:5px;padding:7px 10px}
.netnote.ok{color:#8FCB7B;background:#14201A;border-color:#2A4A33}
.invite{margin:4px 0 16px;font-size:12.5px;color:var(--muted);word-break:break-all;
  background:#141722;border:1px solid #2C3243;border-radius:5px;padding:8px 10px}

/* homepage: the lineage — Chaturanga to Vyuhh */
.hm-lineage{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;position:relative}
.hm-lineage::before{content:"";position:absolute;left:12px;right:12px;top:27px;height:1px;
  background:linear-gradient(90deg,rgba(201,162,39,.55),rgba(201,162,39,.15) 70%,rgba(201,162,39,.7))}
.hm-lineage li{position:relative;background:var(--panel);border:1px solid #2C3243;border-radius:8px;padding:44px 18px 18px}
.hm-lineage li::before{content:"";position:absolute;left:18px;top:21px;width:11px;height:11px;border-radius:50%;
  background:#0F1119;border:2px solid var(--brass)}
.hm-lineage b{display:block;font-size:18px;color:var(--sand);font-weight:600}
.hm-lineage span{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);margin:4px 0 10px}
.hm-lineage p{margin:0;font-size:13.5px;line-height:1.6;color:#BDB7A9}
.hm-lineage li.now{border-color:#5A4A20;background:linear-gradient(160deg,#221D10,var(--panel) 60%)}
.hm-lineage li.now::before{background:var(--brass)}
@media(max-width:860px){
  .hm-lineage{grid-template-columns:1fr;gap:12px}
  .hm-lineage::before{left:24px;right:auto;top:10px;bottom:10px;width:1px;height:auto;
    background:linear-gradient(180deg,rgba(201,162,39,.55),rgba(201,162,39,.7))}
  .hm-lineage li{padding:16px 18px 16px 50px}
  .hm-lineage li::before{left:18px;top:20px}
}
/* Learn: coordinates on the piece-explorer board */
table.dboard td.dlr{color:#6E8069;font-size:10.5px;padding-right:5px;text-align:right}
table.dboard td.dlf{color:#6E8069;font-size:10.5px;text-align:center;padding-top:3px}

/* ============================ accounts & profiles ============================ */
.nav a.lnk.acct{margin-left:6px;border:1px solid #3C4459;color:var(--text);max-width:170px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav a.lnk.acct:hover{border-color:var(--brass)}
.nav a.lnk.acct.on{border-color:var(--brass)}
.pf-loading{color:var(--muted);font-size:14px}
.pf-auth{max-width:460px;margin:0 auto}
.pf-card{background:var(--panel);border:1px solid #2C3243;border-radius:8px;padding:18px 18px 12px;margin:0 0 18px}
.pf-lbl{display:block;font-size:12.5px;letter-spacing:.04em;color:var(--muted);margin:12px 0 6px}
.pf-lbl:first-child{margin-top:0}
.pf-lbl span{color:#6A6558}
.pf-lbl b{color:var(--text);font-weight:600}
.pf-in{box-sizing:border-box;width:100%;font:inherit;font-size:16px;color:var(--text);background:#11141F;
  border:1px solid #3C4459;border-radius:5px;padding:11px 12px;outline:none}
.pf-in:focus{border-color:var(--brass)}
textarea.pf-in{resize:vertical;min-height:58px}
select.pf-in{appearance:auto}
.pf-code{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:24px;letter-spacing:.4em;text-align:center}
.pf-unwrap{display:flex;align-items:center;background:#11141F;border:1px solid #3C4459;border-radius:5px}
.pf-unwrap:focus-within{border-color:var(--brass)}
.pf-unwrap span{padding:0 0 0 12px;color:var(--muted);font-size:16px}
.pf-unwrap .pf-in{border:0;background:transparent;padding-left:3px}
.pf-wide{width:100%;margin-top:14px;padding:12px 14px;font-size:14.5px}
.pf-row{display:flex;gap:8px;margin-top:14px}
.pf-msg{font-size:13px;min-height:18px;margin:8px 0 4px;color:var(--muted)}
.pf-msg.ok{color:#8FC48A}
.pf-msg.err{color:#E9A23B}
.page p.pf-fine,.pf-fine{font-size:12.5px;line-height:1.6;color:var(--muted);margin:6px 0 10px}
.pf-fine a{color:var(--text)}
.pf-link{background:none;border:0;padding:0;color:var(--text);text-decoration:underline;font-size:inherit;letter-spacing:0}
.pf-link:hover{background:none;color:var(--brass)}
.pf-link:disabled{color:var(--muted);text-decoration:none;cursor:default}
.pf-head{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.pf-av{flex:0 0 auto;width:74px;height:74px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:36px;font-weight:600;color:#1A1508;background:hsl(var(--h) 55% 62%)}
.pf-id{flex:1;min-width:200px}
.pf .pf-id h2{margin:2px 0 2px;font-size:26px;word-break:break-all}
.pf-dn{color:var(--text);font-size:15px}
.pf-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted);margin-top:6px}
.page p.pf-bio{margin:10px 0 0;font-size:14px;color:#C9C3B6}
.pf-rating{text-align:right;min-width:130px}
.pf-rating b{display:block;font-size:40px;line-height:1;color:var(--brass);font-weight:600;font-family:"SF Mono",Menlo,Consolas,monospace}
.pf-rating b i{font-style:normal;font-size:20px;color:var(--muted);margin-left:2px}
.pf-rating span{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.page ul.pf-stats,.pf-stats{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:0;margin:22px 0 16px}
.pf-stats li{background:var(--panel);border:1px solid #2C3243;border-radius:6px;padding:10px 6px;text-align:center}
.pf-stats b{display:block;font-size:22px;color:var(--sand);font-weight:600}
.pf-stats span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pf-stats .w b{color:#8FC48A} .pf-stats .l b{color:#E07A6A}
.pf-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.pf-actions .cta{padding:9px 18px}
.pf-actions .pf-msg{margin:0}
.pf-spark{background:var(--panel);border:1px solid #2C3243;border-radius:6px;padding:10px 12px;margin-bottom:6px}
.pf-sparkhd{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-bottom:4px}
.pf-spark svg{display:block;width:100%;height:70px}
.page h3.pf-h3{font-size:15px;margin:26px 0 10px}
.pf-tablewrap{overflow-x:auto}
.pf-games{width:100%;border-collapse:collapse;font-size:13.5px}
.pf-games td{padding:9px 8px;border-bottom:1px solid #232838;color:#C9C3B6;white-space:nowrap}
.pf-games a{color:var(--text)}
.pf-games .pf-how{white-space:normal;min-width:120px}
.pf-num{text-align:right}
.pf-muted{color:var(--muted)}
.pf-res{display:inline-block;min-width:44px;text-align:center;border-radius:4px;padding:2px 6px;font-size:12px;font-weight:600}
.pf-res.w{background:#24381F;color:#9AD493} .pf-res.l{background:#3D2320;color:#EC9383} .pf-res.d{background:#2A2E3C;color:#C9C3B6}
.pf-side{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;border:1px solid #000;vertical-align:-1px}
.pf-side.W{background:var(--sand)} .pf-side.B{background:#5B6A9A}
.pf-delta{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12.5px}
.pf-delta.up{color:#8FC48A} .pf-delta.down{color:#E07A6A}
.pf-foot{margin-top:34px;border-top:1px solid #232838;padding-top:16px}
/* Signing out is the ordinary thing people come here to do, so it's a
   real button; deleting the account is the rare, irreversible one, so it
   stays a quiet line of text until it's deliberately opened. The global
   `details summary` rule shouts in uppercase with wide tracking, which
   is wrong here — it made "delete my account" read as the loudest thing
   on the page — so it's turned off for this one. */
.pf-signout{margin:2px 0 18px;font-size:13px;padding:8px 18px}
.pf-danger{margin-top:10px;font-size:13px;color:var(--muted)}
.pf-danger summary{cursor:pointer;color:var(--muted);font-size:12.5px;
  text-transform:none;letter-spacing:0;font-weight:400;text-decoration:underline}
.pf-danger summary:hover{color:#E07A6A}
.pf-danger[open] summary{color:#E07A6A;text-decoration:none}
.pf-danger p{font-size:13px}
.pf-del{margin-top:10px;background:#5A2420;border-color:#7A302A}
.pf-del:hover:not(:disabled){background:#6E2C27}
.pf-del:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:560px){
  .pf-rating{text-align:left;min-width:0;width:100%}
  .pf-stats{grid-template-columns:repeat(3,1fr)}
  .pf-games .pf-tc,.pf-games .pf-when{display:none}
  .nav a.lnk.acct{max-width:120px}
}

/* players in an online game */
.players{display:flex;flex-direction:column;gap:3px;margin-top:10px;font-size:13px}
.players .pl{display:flex;align-items:center;gap:7px;min-width:0}
.players .pl a{color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.players .pl a:hover{color:var(--brass)}
.players .pl .rt{color:var(--muted);font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px}
.players .pl .you{color:var(--muted);font-size:11px;letter-spacing:.06em}
.players .pl .dl{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px}
.players .pl .dl.up{color:#8FC48A} .players .pl .dl.down{color:#E07A6A}

/* ====================== quick chat (online games) ======================
   Set phrases only — no free typing, so there's nothing to moderate and
   nothing that can be used to abuse or pressure an opponent. */
.chat{margin-top:12px;border-top:1px solid #232838;padding-top:10px}
.chatlog{display:flex;flex-direction:column;gap:5px;max-height:132px;overflow-y:auto;margin-bottom:8px}
.chatlog:empty{display:none}
.chatmsg{font-size:12.5px;line-height:1.45;padding:5px 9px;border-radius:9px;max-width:88%;
  word-break:break-word;animation:chatIn .18s ease-out}
.chatmsg.mine{align-self:flex-end;background:#232A3B;color:var(--text)}
.chatmsg.theirs{align-self:flex-start;background:#1B2030;color:var(--text);border:1px solid #2C3243}
.chatmsg .who{display:block;font-size:10.5px;letter-spacing:.05em;color:var(--muted);margin-bottom:1px}
@keyframes chatIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.chatrow{display:flex;gap:7px}
.chatrow button{font-size:12px;padding:7px 12px}
.chatsay{flex:1}
.chatmute.on{color:#E9A23B;border-color:#4A3C18}
.chatpicks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chatpicks button{font-size:13.5px;padding:9px 15px}
.chatnote{font-size:12px;color:var(--muted);text-align:center;margin-top:12px}
@media(max-width:760px){
  /* on phones the account link sits right after the brand, where it can be seen without scrolling the nav */
  .navin .brand{order:-2}
  .nav a.lnk.acct{order:-1;margin-left:0;margin-right:4px}
}

/* ============================ leaderboard ============================ */
.lb-head{margin-bottom:16px}
.lb-tools{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.lb-tools #lbSearch{flex:1;min-width:160px}
.lb-tools #lbCountry{width:auto;min-width:150px}
.lb-table thead th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:0 8px 8px;font-weight:600;border-bottom:1px solid #2C3243}
.lb-table td{vertical-align:middle}
.lb-rank{width:34px;font-family:"SF Mono",Menlo,Consolas,monospace;color:var(--muted)}
.lb-medal{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;font-weight:700;font-size:12px;color:#231B06}
.lb-medal.m1{background:#E3BD3A} .lb-medal.m2{background:#C7CBD1} .lb-medal.m3{background:#C48A4A}
tr.lb-me{background:#1E2331}
.lb-me .you,.you{color:var(--brass);font-size:10.5px;letter-spacing:.05em;margin-left:4px}
.lb-chips{display:flex;flex-wrap:wrap;gap:7px}
.lb-chip{display:inline-block;background:var(--panel);border:1px solid #2C3243;border-radius:20px;
  padding:6px 13px;font-size:13px;color:var(--text);text-decoration:none}
.lb-chip:hover{border-color:var(--brass)}
.lb-chip.lb-me{border-color:var(--brass)}
@media(max-width:560px){
  .lb-tools #lbCountry{width:100%}
}