/* Chess — dark green board room. Tokens mirror chessclock.limpampo.com so the two sites feel related. */
@font-face{font-family:"Barlow Condensed";font-weight:500;font-display:swap;src:url(/s/fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(/s/fonts/barlow-600.woff2) format("woff2")}
:root{
  --bg:#0f1312;
  --panel:#161c1a;
  --panel-2:#1d2421;
  --line:#2c3431;
  --ink:#e4ebe2;
  --ink-dim:#8a978f;
  --amber:#f0a43a;
  --red:#d9473f;
  --green:#5fbf84;
  --sq-light:#d8dfd0;
  --sq-dark:#6c8878;
  --hl:rgba(240,164,58,.46);
  --digits:"Barlow Condensed","Avenir Next Condensed","Arial Narrow",system-ui,sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;background:var(--bg)}
[hidden]{display:none!important}
body{
  margin:0;min-height:100%;background:transparent;color:var(--ink);font:15px/1.45 var(--ui);
  padding-block:max(12px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  -webkit-tap-highlight-color:transparent;
}
a{color:var(--amber)}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--ink);
}
.btn:hover{border-color:#3d4844}
.btn:disabled{opacity:.4;cursor:default}
.btn.primary{background:var(--ink);color:#0b100e;border-color:var(--ink);font-weight:600}
.btn.danger:hover{border-color:var(--red);color:#ff8d86}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- landing ---------- */
.home{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:28px;padding-top:4vh}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:44px;height:44px}
.brand h1{margin:0;font:600 40px/1 var(--digits);letter-spacing:.01em}
.lead{margin:0;color:var(--ink-dim);max-width:46ch}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:18px}
.card h2{margin:0;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim);font-weight:600}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.presets button{
  height:52px;border-radius:10px;border:1px solid var(--line);background:var(--bg);
  font:500 24px var(--digits);font-variant-numeric:tabular-nums;
}
.presets button.on{background:var(--ink);color:#0b100e;border-color:var(--ink)}
.custom{display:flex;align-items:flex-end;gap:10px}
.custom label{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-dim)}
.custom input{width:100%;height:46px;border-radius:10px;border:1px solid var(--line);background:var(--bg);padding:0 12px;font:500 22px var(--digits)}
.custom .plus{font:500 26px var(--digits);padding-bottom:8px;color:var(--ink-dim)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:10px;border:1px solid var(--line);background:var(--bg)}
.seg button.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.seg i{width:16px;height:16px;border-radius:50%;border:1px solid #55615b;display:inline-block}
.seg .w i{background:#f2f5ee}.seg .b i{background:#141a18}.seg .r i{background:linear-gradient(90deg,#f2f5ee 50%,#141a18 50%)}
.err{margin:0;color:#ff8d86;font-size:14px}
.recent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.recent a{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none;background:var(--bg)}
.recent a:hover{border-color:#3d4844}
.recent .tc{font:500 20px var(--digits);font-variant-numeric:tabular-nums}
.recent .meta{color:var(--ink-dim);font-size:13px;align-self:center}
.foot{color:var(--ink-dim);font-size:12px;line-height:1.5}

/* ---------- game ---------- */
.game{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:1080px;margin:0 auto}
.boardcol{display:flex;flex-direction:column;gap:8px;width:min(100%,calc(100dvh - 210px));min-width:min(100%,280px);margin-inline:auto}
.pbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px}
.who{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;background:#46514b;flex:none}
.dot.on{background:var(--green)}
.name{font-weight:600}
.tag{font-size:12px;color:var(--ink-dim);letter-spacing:.06em;text-transform:uppercase}
.cap{display:flex;align-items:center;min-height:18px;color:var(--ink-dim);font-size:13px}
.cap img{width:16px;height:16px;margin-right:-6px}
.cap span{margin-left:12px}
.clk{
  min-width:92px;text-align:center;padding:2px 12px;border-radius:8px;background:var(--panel-2);color:var(--ink-dim);
  font:600 34px/1.15 var(--digits);font-variant-numeric:tabular-nums;
}
.clk.run{background:var(--ink);color:#0b100e}
.clk.low{color:var(--amber)}
.clk.run.low{background:var(--amber);color:#0b100e}
.clk.flag{background:var(--red);color:#0b100e}
.board-wrap{position:relative;width:100%;aspect-ratio:1}
.board{position:absolute;inset:0;display:grid;grid-template:repeat(8,1fr)/repeat(8,1fr);border-radius:6px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.sq{position:relative;display:flex;align-items:center;justify-content:center}
.sq.l{background:var(--sq-light)}.sq.d{background:var(--sq-dark)}
.sq.last::before{content:"";position:absolute;inset:0;background:var(--hl)}
.sq.sel::before{content:"";position:absolute;inset:0;background:rgba(240,164,58,.62)}
.sq.chk::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(217,71,63,.95) 0,rgba(217,71,63,.55) 45%,rgba(217,71,63,0) 75%)}
.sq .pc{position:relative;width:100%;height:100%;pointer-events:none;z-index:1}
.sq.drag .pc{opacity:.25}
.sq .hint{position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(15,19,18,.28);z-index:2;pointer-events:none}
.sq .hint.take{width:92%;height:92%;background:none;border:5px solid rgba(15,19,18,.28)}
.sq .co{position:absolute;font:600 11px/1 var(--ui);pointer-events:none;z-index:2;opacity:.85}
.sq.l .co{color:var(--sq-dark)}.sq.d .co{color:var(--sq-light)}
.sq .co.f{right:4%;bottom:3%}.sq .co.r{left:4%;top:4%}
.ghost{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-50%)}
.promo{position:absolute;z-index:20;width:12.5%;background:var(--ink);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden}
.promo button{border:0;background:none;padding:0;aspect-ratio:1;width:100%}
.promo button:hover{background:#c9d3c1}
.promo img{width:100%;height:100%;display:block}
.banner{position:absolute;inset:auto 0 0 0;z-index:15;padding:10px 12px;background:rgba(7,9,8,.88);text-align:center;font-weight:600}
.conn{padding:8px 12px;border-radius:8px;background:#3a2c14;color:var(--amber);font-size:14px}

.side{display:flex;flex-direction:column;gap:12px;min-width:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.status{font-size:18px;font-weight:600}
.status small{display:block;font-weight:400;color:var(--ink-dim);font-size:14px;margin-top:2px}
.status.end{color:var(--ink)}
.hint-text{margin:0;color:var(--ink-dim);font-size:14px}
.linkrow{display:flex;gap:8px}
.linkrow input{flex:1;min-width:0;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--bg);padding:0 12px;font-size:14px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row .btn{flex:1;min-width:0}
.moves{max-height:190px;overflow:auto;display:grid;grid-template-columns:36px 1fr 1fr;gap:2px 4px;font-variant-numeric:tabular-nums;align-content:start;min-height:44px}
.moves .n{color:var(--ink-dim);padding:3px 0}
.moves button{border:0;background:none;text-align:left;padding:3px 8px;border-radius:6px;font-size:15px}
.moves button:hover{background:var(--panel-2)}
.moves button.cur{background:var(--ink);color:#0b100e}
.nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.nav .btn{padding:0}
.chat{display:flex;flex-direction:column;gap:8px}
.log{max-height:140px;overflow:auto;display:flex;flex-direction:column;gap:3px;font-size:14px;word-break:break-word}
.log b{font-weight:600}
.log .w b{color:#fff}.log .b b{color:var(--amber)}
.chat form{display:flex;gap:8px}
.chat input{flex:1;min-width:0;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--bg);padding:0 12px}
.watchers{color:var(--ink-dim);font-size:13px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1080px;margin:0 auto 10px}
.top a.logo{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font:600 22px var(--digits)}
.top img{width:26px;height:26px}
.sound{min-height:36px;padding:0 10px;font-size:13px}

@media (min-width:900px){
  .game{grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:24px}
  .boardcol{width:min(100%,calc(100dvh - 130px));margin-inline:0}
  .side{position:sticky;top:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* captured black pieces: light outline so they stay visible on the dark bar */
.cap img[src*="/pieces/b"]{filter:drop-shadow(1px 0 0 #e8e6e1) drop-shadow(-1px 0 0 #e8e6e1) drop-shadow(0 1px 0 #e8e6e1) drop-shadow(0 -1px 0 #e8e6e1)}

/* ---------- draughts & nardy ---------- */
.disc{border-radius:50%;box-sizing:border-box;container-type:size}
.disc.w{background:radial-gradient(circle at 35% 30%,#fffdf6 0,#efe9d8 55%,#cfc7b0 100%);box-shadow:0 2px 3px rgba(0,0,0,.45),inset 0 0 0 2px #b9b19a}
.disc.b{background:radial-gradient(circle at 35% 30%,#4a4f4d 0,#1c201f 60%,#0c0f0e 100%);box-shadow:0 2px 3px rgba(0,0,0,.55),inset 0 0 0 2px #7f8a84}
.disc.k{position:relative}
.disc.k::after{content:"♛";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:150%;line-height:1;color:#d9a02b;text-shadow:0 0 2px rgba(0,0,0,.5)}
.disc.w.k::after{color:#a56d12}
.sq .disc{position:relative;z-index:1;width:84%;height:84%;pointer-events:none}
.disc.k::after{font-size:52cqw}
.sq .disc.taken{opacity:.35}
.sq .disc.lifted{opacity:.25}
.sq .disc.must{box-shadow:0 2px 3px rgba(0,0,0,.45),0 0 0 3px rgba(240,164,58,.85)}
.sq.sel::before{content:"";position:absolute;inset:0;background:rgba(240,164,58,.62)}
.ghost.disc{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-50%)}
i.mini{display:inline-block;width:15px;height:15px;border-radius:50%;margin-right:-5px;vertical-align:middle}
i.mini.w{background:#efe9d8;box-shadow:inset 0 0 0 1.5px #a59d86}
i.mini.b{background:#1c201f;box-shadow:inset 0 0 0 1.5px #aab4ae}
.cap .off{margin:0}
.moves.wide{grid-template-columns:44px 1fr}
.moves.wide button{font-size:14px}

body[data-kind=nardy] .boardcol{width:100%}
@media (min-width:900px){body[data-kind=nardy] .boardcol{width:100%}}
.board.nd{display:block;touch-action:manipulation}
body[data-kind=nardy] .board-wrap{aspect-ratio:1240/740}
.board.nd svg{display:block;width:100%;height:100%;touch-action:manipulation}
.board.nd .pt.a{fill:#3b5044}
.board.nd .pt.b{fill:#4f6a5b}
.board.nd .pt.dest{fill:#a7803c}
.board.nd .pt.last{stroke:#f0a43a;stroke-width:3}
.board.nd .ptn{fill:#8a978f;font:600 16px var(--ui);pointer-events:none}
.board.nd .ch{pointer-events:none}
.board.nd .ch.w{fill:#f1eee4;stroke:#a59d86;stroke-width:3}
.board.nd .ch.b{fill:#1b1f1e;stroke:#8d9993;stroke-width:3}
.board.nd .ch.sel{stroke:#f0a43a;stroke-width:6}
.board.nd .dot-hint{fill:rgba(240,164,58,.75);pointer-events:none}
.board.nd .tray{fill:#2a362f}
.board.nd .tray.dest{fill:#a7803c}
.board.nd .traytxt{fill:#8a978f;font:600 18px var(--ui);pointer-events:none;letter-spacing:.08em}
.board.nd .hit.mv{cursor:pointer}
.dice{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;color:var(--ink-dim)}
.dice-who{margin-left:8px;font-size:13px}
.die{width:44px;height:44px;border-radius:9px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:6px;gap:1px}
.die.w{background:#f1eee4;color:#161c1a}
.die.b{background:#262c2a;color:#e8e6e1;box-shadow:inset 0 0 0 2px #7f8a84}
.die i{border-radius:50%;margin:auto;width:70%;height:70%}
.die i.on{background:currentColor}
.die.used{opacity:.3}

.board.nd .field{fill:#222d28}
.board.nd .midbar{fill:#0f1513;stroke:#33413a;stroke-width:2}
.cap .cnt{margin-left:12px;font-weight:600;color:var(--ink)}

/* names, guest chat, open games */
.pname{color:var(--ink-dim);font-size:13px}
.pname::before{content:"· "}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink-dim);font-size:13px}
.chat-head #myname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn.small{min-height:32px;padding:0 10px;font-size:13px;flex:none}
.log .g b{color:#8ec1e8}
.check{display:flex;align-items:center;gap:10px;color:var(--ink-dim);font-size:14px}
.check input{width:20px;height:20px;accent-color:#e4ebe2}
.open-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.open-list a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none;background:var(--bg)}
.open-list a:hover{border-color:#3d4844}
.open-list .gk{font-weight:600}
.open-list .tc{font:500 20px var(--digits);font-variant-numeric:tabular-nums;color:var(--ink-dim)}
.open-list .who2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.open-list .who2 small{display:block;color:var(--ink-dim);font-size:12px}
.open-list .go{font-size:13px;padding:4px 10px;border-radius:8px;border:1px solid var(--line);color:var(--ink)}
.open-list .go.play{background:var(--ink);color:#0b100e;border-color:var(--ink);font-weight:600}
.empty{margin:0;color:var(--ink-dim);font-size:14px}
.board.nd .off{pointer-events:none}
.board.nd .off.w{fill:#f1eee4;stroke:#a59d86;stroke-width:2}
.board.nd .off.b{fill:#1b1f1e;stroke:#8d9993;stroke-width:2}
.hintbar{padding:9px 12px;border-radius:8px;background:#3a2c14;color:var(--amber);font-size:14px;line-height:1.35}
.odds{display:flex;flex-direction:column;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.odds-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px}
.odds-top #odds-text{font-weight:600}
.odds-top #odds-pips{color:var(--ink-dim)}
.odds-meter{height:8px;border-radius:4px;background:#46231f;overflow:hidden}
.odds-meter i{display:block;height:100%;width:50%;background:var(--green);transition:width .3s}

/* ---------- chess for three ---------- */
.tribars{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tribars .clk{font-size:26px;min-width:72px;padding:2px 8px}
.pbar.gone{opacity:.45}
.pbar.turn .name{color:var(--amber)}
i.sw{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none}
i.sw.w{background:#f1eee4}
i.sw.b{background:#1b1f1e;box-shadow:inset 0 0 0 1px #8d9993}
i.sw.r{background:#e0524a}
.board.tri{display:block;touch-action:manipulation;background:#161c1a}
.board.tri svg{display:block;width:100%;height:100%}
.board.tri .c{stroke:#1b2421;stroke-width:1;cursor:pointer}
.board.tri .c.l{fill:#d8dfd0}
.board.tri .c.d{fill:#6c8878}
.board.tri .c.l.last{fill:#e3d08f}
.board.tri .c.d.last{fill:#b3a45f}
.board.tri .c.sel{fill:#f0a43a}
.board.tri .c.chk{fill:#d9473f}
.board.tri .pc{pointer-events:none}
.board.tri .ring{fill:none;stroke:rgba(15,19,18,.5);stroke-width:4;pointer-events:none}
.board.tri .dot{fill:rgba(15,19,18,.38);pointer-events:none}
.board.tri .can{fill:#f0a43a;pointer-events:none}
.board.tri .seam{stroke:#0f1312;stroke-width:3;pointer-events:none}
.board.tri .midl{stroke:rgba(15,19,18,.55);stroke-width:1.5;pointer-events:none}
.board.tri .lab{font:600 22px var(--ui);pointer-events:none}
.board.tri .lab.w{fill:#e8e6e1}
.board.tri .lab.b{fill:#9aa5b1}
.board.tri .lab.r{fill:#e0524a}
.promo3{position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;background:var(--ink);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.55);overflow:hidden}
.promo3 button{border:0;background:none;padding:6px;width:64px;height:64px}
.promo3 button:hover{background:#c9d3c1}
.promo3 img{width:100%;height:100%;display:block}
.moves.chips{display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start}
.moves.chips .mv{border:0;border-left:3px solid var(--line);background:var(--bg);padding:3px 8px;border-radius:6px;font-size:14px}
.moves.chips .mv.w{border-left-color:#f1eee4}
.moves.chips .mv.b{border-left-color:#7d8a83}
.moves.chips .mv.r{border-left-color:#e0524a}
.moves.chips .mv.cur{background:var(--ink);color:#0b100e}
.outchip{font-size:12px;color:var(--ink-dim);padding:3px 8px;border:1px dashed var(--line);border-radius:6px}
.seg .red i{background:#e0524a}
.rules summary{cursor:pointer;font-weight:600}
.rules ul{margin:8px 0 0;padding-left:18px;color:var(--ink-dim);font-size:14px;display:flex;flex-direction:column;gap:6px}
.blocknote{padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink-dim);font-size:13px;line-height:1.35}
.moves .n i.mini{margin:0 0 0 4px}
.board.tri .rim{fill:none;stroke:#0f1312;stroke-width:5;pointer-events:none}
body[data-kind=chess3] .board-wrap{aspect-ratio:760/680}
body[data-kind=chess3] .boardcol{width:min(100%,calc((100dvh - 250px) * 1.1))}
@media (min-width:900px){body[data-kind=chess3] .boardcol{width:min(100%,calc((100dvh - 170px) * 1.1));margin-inline:0}}
#kinds{grid-template-columns:repeat(2,1fr)}

/* ---------- yahtzee ---------- */
.yzgame .boardcol.yz{width:100%;margin-inline:0}
.yzplay{display:flex;flex-direction:column;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.yzdice{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ydie{position:relative;width:62px;height:62px;border-radius:12px;border:0;background:#f1eee4;color:#161c1a;padding:9px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:1px;box-shadow:0 3px 0 #b9b19a;transition:transform .12s}
.ydie i{border-radius:50%;margin:auto;width:72%;height:72%}
.ydie i.on{background:currentColor}
.ydie.empty{background:var(--panel-2);color:var(--ink-dim);box-shadow:none;font:600 26px var(--digits);display:flex;align-items:center;justify-content:center}
.ydie:not(.fixed){cursor:pointer}
.ydie:not(.fixed):hover{transform:translateY(-2px)}
.ydie.kept{box-shadow:0 3px 0 #b9b19a,0 0 0 3px rgba(95,191,132,.7)}
.ydie.held{transform:translateY(-8px);box-shadow:0 8px 0 #b9b19a,0 0 0 3px var(--amber)}
.ydie.fresh{animation:tumble .5s ease-out}
@keyframes tumble{0%{transform:translateY(-16px) rotate(-40deg);opacity:.2}60%{transform:translateY(2px) rotate(12deg)}100%{transform:none;opacity:1}}
.yzctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.yzctl #rollinfo{color:var(--ink-dim);font-size:14px}
.yzplay .hint-text{text-align:center;min-height:20px}
.sheetwrap{margin-top:12px;overflow-x:auto}
.sheet{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sheet th,.sheet td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:center}
.sheet th[scope=row]{text-align:left;font-weight:500}
.sheet th small{display:block;color:var(--ink-dim);font-size:11px;font-weight:400}
.sheet thead th{background:var(--panel-2);font-weight:600}
.sheet thead th.turn{box-shadow:inset 0 -3px 0 var(--amber)}
.sheet thead th .pn{margin-left:6px}
.sheet thead th small{display:inline;margin-left:6px;text-transform:uppercase;letter-spacing:.06em}
.sheet td.done{font:600 20px var(--digits);font-variant-numeric:tabular-nums}
.sheet td.zero{color:var(--ink-dim)}
.sheet td.sum{color:var(--ink-dim);font-variant-numeric:tabular-nums}
.sheet tr.sub th,.sheet tr.sub td{background:rgba(255,255,255,.02)}
.sheet tr.grand th,.sheet tr.grand td{font:600 22px var(--digits);color:var(--ink);border-bottom:0}
.sheet button.opt{min-width:52px;min-height:34px;border-radius:8px;border:1px dashed var(--amber);background:rgba(240,164,58,.1);color:var(--amber);font:600 18px var(--digits)}
.sheet button.opt:hover{background:var(--amber);color:#0b100e}
.yzlog{max-height:200px;overflow:auto;font-size:14px;display:flex;flex-direction:column;gap:3px}
.yzlog i.sw{margin-right:2px}
@media (min-width:900px){.yzgame{grid-template-columns:minmax(0,1fr) 360px}}
.formblock{display:flex;flex-direction:column;gap:18px}

/* yahtzee: several players */
.players{color:var(--ink-dim);font-size:14px;line-height:1.8}
.players select{height:40px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 10px;font:500 20px var(--digits)}
.lobbybox{margin-bottom:12px}
.lobbytitle{margin:0;font-size:18px}
.seatlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.seatlist li{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.seatlist li small{margin-left:auto;color:var(--ink-dim);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.seatlist li small + small{margin-left:6px}
.ranking{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ranking li{font-size:15px}
.ranking li.win{font-weight:600;color:var(--green)}
.ydie.sel{transform:translateY(-8px);box-shadow:0 8px 0 #b9b19a,0 0 0 3px var(--amber)}
.ydie.sel::after{content:"↻";position:absolute;right:-6px;top:-10px;width:22px;height:22px;border-radius:50%;background:var(--amber);color:#0b100e;font:700 15px/22px var(--ui);text-align:center}
.sheet th.gone,.sheet td.gone{opacity:.45}
.sheet th[scope=row]{position:sticky;left:0;background:var(--panel);z-index:1;min-width:130px}
.sheet thead th:first-child{position:sticky;left:0;z-index:2}
.sheet thead th.p{min-width:96px}
.yzlog .outline{color:var(--ink-dim)}
i.sw.p1{background:#e0524a}i.sw.p2{background:#4f8fe0}i.sw.p3{background:#5fbf84}i.sw.p4{background:#f0a43a}i.sw.p5{background:#b57be0}
i.sw.p6{background:#3cc4c4}i.sw.p7{background:#e07bb5}i.sw.p8{background:#a3c43c}i.sw.p9{background:#8a8f99}i.sw.p10{background:#c98a5a}

/* nickname dialog */
.nickmodal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,8,7,.78)}
.nickcard{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 60px rgba(0,0,0,.6)}
.nickcard h2{margin:0;font-size:20px}
.nickhint{margin:0;color:var(--ink-dim);font-size:14px}
.nickrow{display:flex;gap:8px}
.nickrow input{flex:1;min-width:0;height:46px;border-radius:10px;border:1px solid var(--line);background:var(--bg);padding:0 12px;font-size:17px}
.nickdice{padding:0 14px;font-size:20px}
.nickerr{margin:0;color:#ff8d86;font-size:14px}
.nickbtns{display:flex;gap:8px;justify-content:flex-end}
.nicktoast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:90;max-width:min(520px,calc(100% - 32px));padding:10px 14px;border-radius:10px;background:#3a2c14;color:var(--amber);font-size:14px}
.nickline{margin:0;color:var(--ink-dim);font-size:14px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.nickline b{color:var(--ink)}
.linkbtn{background:none;border:0;padding:0;color:var(--amber);text-decoration:underline;font-size:inherit}
.nickfixed{color:var(--ink-dim);font-size:12px;text-align:right}

/* chat: a seated player's name is shown in the colour of his pieces; guests (class g) stay plain */
.log .w b,.log .b b,.log .r b,.log .p1 b,.log .p2 b,.log .p3 b,.log .p4 b,.log .p5 b,.log .p6 b,.log .p7 b,.log .p8 b,.log .p9 b,.log .p10 b{display:inline-block;padding:0 8px;border-radius:999px;color:#0b100e;line-height:1.5}
.log .w b{background:#f1eee4}
.log .b b{background:#1b1f1e;color:#e8e6e1;box-shadow:inset 0 0 0 1px #8d9993}
.log .r b{background:#e0524a}
.log .p1 b{background:#e0524a}.log .p2 b{background:#4f8fe0}.log .p3 b{background:#5fbf84}.log .p4 b{background:#f0a43a}.log .p5 b{background:#b57be0}
.log .p6 b{background:#3cc4c4}.log .p7 b{background:#e07bb5}.log .p8 b{background:#a3c43c}.log .p9 b{background:#8a8f99}.log .p10 b{background:#c98a5a}
.log .g b{color:#8ec1e8}

/* language switcher */
.langsel{height:36px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);padding:0 8px;font-size:13px}
#langbar{display:block}
#langbar .langsel{width:100%;margin-top:6px}
/* home page: nickname and language live in a card beside the main column (above it on narrow screens) */
.homegrid{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.profile{order:-1;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.profile h2{margin:0;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim);font-weight:600}
.langrow{display:block;color:var(--ink-dim);font-size:14px}
@media (min-width:900px){
  .homegrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px) minmax(0,1fr);gap:28px;align-items:start}
  .homegrid .home{grid-column:2;margin:0}
  .profile{order:0;grid-column:3;grid-row:1;position:sticky;top:16px;width:230px;margin-top:4vh}
}

/* frosted, semi-transparent blocks: the page (and the click wave behind it) shows through, blurred.
   Buttons, fields, list entries and the boards stay solid. */
:root{--glass:rgba(22,28,26,.52);--glass-strong:rgba(22,28,26,.72);--glass-edge:rgba(255,255,255,.09)}
.card,.panel,.profile,.yzplay,.odds,.blocknote,.sheet{
  background:var(--glass);border-color:var(--glass-edge);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 30px rgba(0,0,0,.18);
}
.sheet{background:var(--glass-strong)}
.sheet thead th{background:rgba(29,36,33,.82)}
.sheet th[scope=row]{background:rgba(22,28,26,.9)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.panel,.profile,.yzplay,.odds,.blocknote,.sheet{background:var(--panel)}
}
/* controls inside the glass are always opaque */
.moves button{background:var(--bg)}
.moves button:hover{background:var(--panel-2)}
.moves button.cur{background:var(--ink)}
.sheet button.opt{background:#3a2c14}
.sheet button.opt:hover{background:var(--amber)}

/* whose turn it is: tinted band, amber edge and a pulsing dot in front of the name */
.pbar{padding-inline:8px;margin-inline:-8px;border-radius:12px;transition:background .25s,box-shadow .25s}
.pbar.turn{background:rgba(240,164,58,.16);box-shadow:inset 3px 0 0 var(--amber)}
.pbar.turn .who::before{content:'';flex:none;width:9px;height:9px;border-radius:50%;background:var(--amber);animation:turnpulse 1.4s ease-in-out infinite}
@keyframes turnpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.pbar.turn .who::before{animation:none}}
.tribars .pbar{margin-inline:0}

/* background click wave (wave.js): a damped ripple of big tiles over the whole screen, drawn on a canvas */
.wavefield{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
@media (prefers-reduced-motion:reduce){.wavefield{display:none}}

/* feedback form */
#fb-form{display:flex;flex-direction:column;gap:10px}
#fb-form textarea,#fb-form input{width:100%;border-radius:10px;border:1px solid var(--line);background:var(--bg);padding:10px 12px;font:inherit;color:var(--ink)}
#fb-form textarea{resize:vertical;min-height:92px}
#fb-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fbok{margin:0;color:var(--green);font-size:14px}