:root{--bg:#ffffff;--fg:#111111;--muted:#666666;--tile:#e6e6e6;--tile-fg:#111111;--center:#f0901f;--center-fg:#111111;--accent:#111111;--card:#f4f4f4;--font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--radius:6px;--w:92px;--good:#2a8a3c;--bad:#c62828}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 var(--font);min-height:100vh}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.8}
nav{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;padding:.6rem 1rem;border-bottom:1px solid var(--card);position:sticky;top:0;z-index:12;background:var(--bg)}
nav a{text-decoration:none}
nav a:hover{text-decoration:none;opacity:.75}
.brand{font-weight:700;font-size:1.3rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem}
nav a{white-space:nowrap}
.muted{color:var(--muted)}
.brand .mark{width:1.15em;height:1.15em;image-rendering:pixelated}
.themes{margin-left:auto;position:relative}
.themes summary{cursor:pointer;color:var(--muted);list-style:none;padding:.3rem .6rem;border:1px solid var(--muted);border-radius:var(--radius);white-space:nowrap}
.themes div{position:absolute;right:0;top:110%;background:var(--card);border-radius:var(--radius);display:flex;flex-direction:column;min-width:9rem;z-index:1;box-shadow:0 2px 8px #0004}
.themes a{padding:.4rem .8rem;text-decoration:none;color:var(--fg)}
.themes a.current{font-weight:700}
main{max-width:64rem;margin:0 auto;padding:1rem}
.card{background:var(--card);border-radius:var(--radius);padding:1rem}
h2,h3{margin:.2rem 0 .6rem;font-size:1.1rem}
button,.button{font:inherit;background:var(--accent);color:var(--bg);border:0;border-radius:var(--radius);padding:.6rem 1rem;min-height:48px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
button:hover,.button:hover{filter:brightness(1.15)}
input{font:inherit;padding:.5rem;border:1px solid var(--muted);border-radius:var(--radius);background:var(--bg);color:var(--fg);width:100%;max-width:20rem}
label{display:block;margin:.5rem 0}
fieldset{border:1px solid var(--muted);border-radius:var(--radius);margin:1rem 0}
.error{color:var(--bad);margin:.5rem 0 0}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
.game{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;align-items:flex-start}
.board{display:flex;flex-direction:column;align-items:center;width:100%;max-width:22rem}
.found{flex:1;min-width:15rem;max-width:26rem}
.code{letter-spacing:.25em;color:var(--muted);margin:0}
.msg{height:1.5rem;margin:0;font-weight:700}
.msg.ok{color:var(--good)}
.msg.bad{color:var(--bad)}
.word{font-size:1.8rem;min-height:2.6rem;margin:.2rem 0;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--accent);min-width:12rem;text-align:center;border-radius:var(--radius) var(--radius) 0 0}
.ring{display:grid;grid-template-columns:repeat(6,calc(var(--w)/2));grid-auto-rows:calc(var(--w)*.2887);margin:.5rem 0}
.ring button{grid-column:span 2;grid-row:span 4;width:var(--w);height:calc(var(--w)*1.1547);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--tile);color:var(--tile-fg);font-size:1.8rem;font-weight:700;padding:0;border-radius:0;transform:scale(.92);text-transform:uppercase;justify-content:center}
.ring button:active{transform:scale(.84)}
.ring .center{background:var(--center);color:var(--center-fg)}
.ring button:nth-child(1){grid-area:4/3/span 4/span 2}
.ring button:nth-child(2){grid-area:1/2/span 4/span 2}
.ring button:nth-child(3){grid-area:1/4/span 4/span 2}
.ring button:nth-child(4){grid-area:4/1/span 4/span 2}
.ring button:nth-child(5){grid-area:4/5/span 4/span 2}
.ring button:nth-child(6){grid-area:7/2/span 4/span 2}
.ring button:nth-child(7){grid-area:7/4/span 4/span 2}
.controls{display:flex;gap:.5rem;margin:.5rem 0}
#score{margin:.6rem 0 .3rem;text-align:center}
.bar{width:100%;height:.6rem;background:var(--tile);border-radius:1rem;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);transition:width .3s}
.finish{display:flex;align-items:center;gap:1rem;margin-top:.8rem}
#timer{font-variant-numeric:tabular-nums;color:var(--muted)}
#found,.words{list-style:none;padding:0;margin:0;columns:2;column-gap:1rem}
#found li,.words li{padding:.15rem 0;border-bottom:1px solid var(--bg);break-inside:avoid;text-transform:capitalize}
.latest{text-transform:capitalize}
.pangram{font-weight:700;color:var(--accent)}
/* the classic board: two columns, letter ring and pills on the left, rank strip and word panel on the right */
.classic{display:grid;grid-template-columns:24rem 22rem;gap:1rem 4rem;justify-content:center;align-items:start;padding-top:1rem}
.classic .board{max-width:24rem;justify-self:center}
.panel{display:flex;flex-direction:column;gap:1.2rem}
.note{position:relative;height:2.6rem;margin:0;text-align:center}
#msg{display:inline-block;height:auto;background:var(--fg);color:var(--bg);padding:.35rem .9rem;border-radius:999px;font-size:.9rem;opacity:0;transition:opacity .25s}
#msg.show{opacity:1}
.plus{position:absolute;left:50%;top:0;margin-left:2.6rem;color:var(--center);font-weight:700;font-style:normal;font-size:1.1rem;animation:rise 1s ease-out forwards;pointer-events:none;text-shadow:0 0 2px var(--fg)}
@keyframes rise{to{transform:translateY(-2rem);opacity:0}}
.classic .word{border:0;min-height:3rem;font-size:2.2rem;letter-spacing:.06em;font-weight:700;display:flex;justify-content:center;align-items:center;min-width:0;width:100%}
.classic .word span.center{color:var(--center)}
.classic .word::after{content:"";width:2px;height:1.1em;margin-left:2px;background:var(--fg);animation:blink 1s steps(2) infinite}
.classic .word:empty::after{display:none}
@keyframes blink{50%{opacity:0}}
.classic .ring button:active{transform:scale(.9)}
.classic .controls{gap:.8rem;align-items:center}
.pill{background:var(--bg);color:var(--fg);border:1px solid var(--fg);border-radius:999px;min-height:44px;padding:.5rem 1.4rem;font-size:.95rem}
.pill:hover{filter:none;background:var(--card)}
.pill.round{width:44px;padding:0;justify-content:center}
.rank{position:relative}
.rank summary{list-style:none;display:flex;align-items:center;gap:.8rem;cursor:pointer;padding:.3rem 0}
.rank summary::-webkit-details-marker{display:none}
.dots{display:flex;justify-content:space-between;align-items:center;flex:1;position:relative}
.dots::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--tile)}
.dots i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--tile);font-style:normal;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background .3s}
.dots i:last-child{background:var(--bg);border:1px solid var(--fg)}
.dots i.past{background:var(--center)}
.dots i.now{width:1.7rem;height:1.7rem;background:var(--center);border:0}
.ladder{position:absolute;left:0;right:0;top:100%;z-index:2;list-style:none;margin:.2rem 0 0;padding:.6rem .9rem;border:1px solid var(--tile);border-radius:8px;background:var(--bg);box-shadow:0 4px 14px #0002;font-size:.9rem}
.ladder li{display:flex;justify-content:space-between;padding:.15rem 0}
.wordbox{border:1px solid var(--muted);border-radius:8px;padding:1rem;min-height:14rem}
.wordbox summary{list-style:none;font-weight:700;pointer-events:none;margin-bottom:.6rem}
.wordbox summary::-webkit-details-marker{display:none}
.latest{display:none}
#found:empty+.empty{display:block}
.empty{display:none;margin:0}
.end{display:flex;gap:.4rem;align-items:center;justify-content:flex-end;font-size:.85rem;margin:0}
.end button{background:none;border:0;color:var(--muted);min-height:0;padding:0;font-size:inherit;font-weight:700}
.end button:hover{filter:none;color:var(--fg)}
@media (max-width:640px){.puzzle{display:none}}
@media (max-width:760px){.classic{grid-template-columns:1fr;gap:.6rem;padding-top:.2rem}.panel{display:contents}.rank{order:-2}.wordbox{order:-1}.end{order:1}
.wordbox{min-height:0;padding:.5rem .8rem}.wordbox summary{pointer-events:auto;cursor:pointer;margin:0;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wordbox summary::after{content:"\25BE";float:right;color:var(--muted)}
.wordbox:not([open]) .head{display:none}.wordbox:not([open]) .latest{display:inline}.wordbox:not([open]) .latest:empty::before{content:"Nothing yet";color:var(--muted);text-transform:none}.wordbox[open] summary{font-weight:700;margin-bottom:.4rem}.wordbox #found{margin-top:.2rem}.wordbox:not([open]) .empty{display:none}}
.summary .big{font-size:1.4rem;margin:.3rem 0}
.reveal{margin:1rem 0}
.reveal summary{cursor:pointer;color:var(--accent);margin-bottom:.5rem}
table{border-collapse:collapse;width:100%;margin-bottom:1.5rem;font-size:.9rem}
th,td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--bg);white-space:nowrap}
.admin{overflow-x:auto}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:.8rem}
.filters input{width:auto;max-width:9rem}
.top summary{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;cursor:pointer;padding:.5rem 0;border-bottom:1px solid var(--bg)}
.top summary a{letter-spacing:.15em}
.top table{margin:.5rem 0 1rem}
main .card+.card{margin-top:1rem}
#toasts{position:fixed;top:calc(var(--navh, 4rem) + .6rem);right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:16;pointer-events:none}
.toast{display:flex;gap:.7rem;align-items:center;background:var(--card);color:var(--fg);border:2px solid var(--accent);border-radius:var(--radius);padding:.5rem .9rem;min-width:15rem;box-shadow:0 4px 14px #0005;animation:slide .3s ease-out;transition:opacity .4s,transform .4s}
.toast.gone{opacity:0;transform:translateX(2rem)}
.toast small{display:block;font-variant:small-caps;color:var(--muted);letter-spacing:.08em;line-height:1}
.toast b{display:block}
.toast span{font-size:.85rem;color:var(--muted)}
@keyframes slide{from{transform:translateX(3rem);opacity:0}}
.cup{position:relative;width:28px;height:32px;flex:none}
.cup::before{content:"";position:absolute;left:4px;top:0;width:20px;height:17px;border-radius:3px 3px 11px 11px;background:linear-gradient(#ffe68a,#d4a53c 70%,#b8892c);box-shadow:-5px 3px 0 -2px #d4a53c,5px 3px 0 -2px #d4a53c}
.cup::after{content:"";position:absolute;left:11px;top:17px;width:6px;height:8px;background:#c9982f;box-shadow:0 8px 0 5px #b8892c}
.hall{background:#7a1428 repeating-linear-gradient(45deg,#0000 0 9px,#ffffff08 9px 10px);border:6px solid #d4a53c;box-shadow:inset 0 0 0 3px #7a5a12,inset 0 0 60px #000a;padding:1rem 1.5rem 2rem;color:#f3e2c7;border-radius:4px}
.hall header{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:1rem}
.hall h2{margin:0;font-size:1.5rem;color:#f3e2c7;text-align:center}
.hall h2 span{display:block;font-weight:400;font-size:.9rem;color:#d4a53c}
.column{width:1.6rem;height:4.5rem;background:repeating-linear-gradient(90deg,#f3e2c7 0 4px,#cdb891 4px 8px);border:3px solid #b8892c;border-top-width:8px;border-bottom-width:8px;border-radius:3px}
.room{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:8rem;row-gap:1.6rem;padding:1rem 0}
.room::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:6rem;transform:translateX(-50%);background:linear-gradient(90deg,#d4a53c 0 6px,#a8102e 6px calc(100% - 6px),#d4a53c calc(100% - 6px));box-shadow:0 0 30px #000a}
.alcove{display:flex;flex-direction:column;align-items:center}
.alcove:nth-child(odd){justify-self:end}
.alcove:nth-child(even){justify-self:start}
.niche{width:9.5rem;height:9.5rem;border-radius:4.75rem 4.75rem 0 0;background:radial-gradient(circle at 50% 30%,#5a0e20,#26040f 70%);border:4px solid #d4a53c;border-bottom:6px solid #b8892c;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.2rem}
.cup{width:3.2rem;height:3rem;stroke-width:1}
.cup.gold{fill:#d4a53c;stroke:#6a4a0a}
.cup.gray{fill:#3a3a3a;stroke:#141414}
.cup.black{fill:none;stroke:#000}
.stand{width:2.8rem;height:2.6rem;background:repeating-linear-gradient(90deg,#f3e2c7 0 4px,#cdb891 4px 8px);border:3px solid #b8892c;border-top-width:6px;border-radius:3px 3px 0 0}
.plaque{width:9.5rem;background:linear-gradient(#e9c25a,#d4a53c);color:#2a1a08;padding:.35rem .4rem;font-size:.8rem;text-align:center;box-shadow:inset 0 0 0 2px #b8892c,0 3px 6px #0006;min-height:3.6rem}
.plaque b{display:block;font-size:.9rem}
.plaque small{display:block;color:#5a4010;margin-top:.2rem}
.gray .plaque{background:linear-gradient(#5a5a5a,#3a3a3a);color:#ddd;box-shadow:inset 0 0 0 2px #222}
.black .plaque{background:#111;color:#555;box-shadow:inset 0 0 0 2px #000;font-size:1.6rem;font-weight:700}
@media (max-width:640px){.room{grid-template-columns:1fr;column-gap:0}.room::before{display:none}.alcove{justify-self:center!important}}
.acct dl.facts{display:flex;flex-wrap:wrap;gap:1.5rem;margin:.6rem 0}
.facts dt{font-size:.8rem;color:var(--muted)}
.facts dd{margin:0;font-size:1.6rem;font-weight:700}
.accent{background:var(--center);color:#111}
.accent:hover{filter:brightness(1.08)}
.ghost{background:var(--bg);color:var(--fg);border:1px solid var(--fg)}
.ghost:hover{filter:none;background:var(--card)}
.pangram-hit{position:fixed;left:50%;top:40%;z-index:10;pointer-events:none;font:800 clamp(1.5rem,5.5vw,3rem)/1 var(--font);letter-spacing:.04em;color:var(--center);background:#111e;padding:.5rem 1.4rem .6rem;border-radius:999px;box-shadow:0 10px 40px #0006;animation:pang 1.7s ease-out forwards}
@keyframes pang{0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-4deg)}16%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(1deg)}28%{transform:translate(-50%,-50%) scale(1) rotate(0)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-72%) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.pangram-hit{animation:none;opacity:1;transform:translate(-50%,-50%)}}
/* touch arrows are drawn triangles, so they sit dead center in their buttons whatever the font */
.pad button{justify-content:center}.pad button::before{content:"";width:40%;height:40%;background:currentColor;clip-path:polygon(50% 8%,100% 92%,0 92%)}
.pad [data-k=right]::before{transform:rotate(90deg)}.pad [data-k=down]::before{transform:rotate(180deg)}.pad [data-k=left]::before{transform:rotate(-90deg)}
/* phones: a tap never waits to see if it is a double tap zoom, a long press on the board opens no copy menu or selection, and hover looks do not stick after a tap */
html{touch-action:manipulation;-webkit-tap-highlight-color:#0000}
.game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media (hover:none){button:hover,.button:hover{filter:none}.pill:hover,.ghost:hover{background:var(--bg)}}
/* tap the timer to hide it, it keeps running; reaching foxy sends a pixel fox hopping under the rank name */
#timer{cursor:pointer;-webkit-user-select:none;user-select:none}
#timer::after{content:"Hide";margin-left:.45em;font-size:.75em;opacity:.55}
.notimer #timer{font-size:0}.notimer #timer::after{content:"Show timer";font-size:.85rem;margin:0}
.foxy-host{position:relative}
.foxy{position:absolute;left:50%;top:100%;width:26px;height:26px;margin-left:-13px;image-rendering:pixelated;pointer-events:none;z-index:6;animation:foxy 1.5s ease-in-out forwards}
@keyframes foxy{0%{transform:translate(-44px,0);opacity:0}12%{opacity:1}30%{transform:translate(-16px,-20px)}48%{transform:translate(8px,0)}66%{transform:translate(26px,-12px)}84%{transform:translate(44px,0);opacity:1}100%{transform:translate(44px,0);opacity:0}}
@media (prefers-reduced-motion:reduce){.foxy{animation:none}}
[hidden]{display:none!important}
/* a ranked run carries a daily or random badge, every other run says unranked */
.badge{display:inline-block;margin-left:.3rem;padding:.1rem .55rem;border:0;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.02em;line-height:1.5;vertical-align:middle;white-space:nowrap;text-transform:uppercase}
.badge.daily{background:var(--center);color:#111}
.badge.ranked{background:var(--fg);color:var(--bg)}
.badge.unranked{background:var(--tile);color:var(--muted)}
.pills{display:flex;justify-content:center;gap:.4rem;margin:.1rem 0 .3rem}
.pills .badge{margin:0}
/* idle: the board goes soft behind a prompt and the timer stops until the player comes back */
#nap{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0009;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.naprow{background:var(--bg);color:var(--fg);border-radius:14px;padding:1.4rem 1.6rem;text-align:center;max-width:22rem;box-shadow:0 10px 40px #0008}
.naprow b{display:block;font-size:1.2rem;margin-bottom:.3rem}
.naprow p{margin:0 0 1rem}
/* leaderboard controls: search, filters, sortable headers and paging */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.6rem 0 1rem}
.filters input[name=q]{max-width:16rem;flex:1 1 12rem}
.filters select{font:inherit;padding:.45rem;border:1px solid var(--muted);border-radius:var(--radius);background:var(--bg);color:var(--fg)}
.filters button{min-height:0;padding:.45rem 1.1rem;font-size:.9rem}
th a.sort{text-decoration:none;color:inherit;white-space:nowrap}
th a.sort.on{color:var(--center)}
td.code a,.hidden-code{letter-spacing:.18em;font-weight:700}
.hidden-code{color:var(--muted);cursor:help}
.pager{display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;margin:.2rem 0 0}
/* the ghost panel: a chosen run replayed beside you, plus anyone else on this seed right now */
#ghosts,#onpuzzle{position:fixed;top:calc(var(--navh, 4rem) + 1rem);z-index:8;width:13rem;max-height:52vh;overflow:auto;border-radius:12px;padding:.6rem .7rem}
#ghosts{left:max(1.5rem, calc(50vw - 46rem));background:var(--card);box-shadow:0 6px 24px #0003}
/* the roll of everyone on this puzzle reads as a list, not as cards, so it never looks like the ghost */
#onpuzzle{right:max(1.5rem, calc(50vw - 46rem));background:var(--bg);border:2px solid var(--card);box-shadow:none}
#ghosts h3,#onpuzzle h3{margin:0 0 .4rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.prow{display:grid;grid-template-columns:1fr auto auto;gap:.1rem .5rem;align-items:baseline;padding:.25rem 0;border-top:1px solid var(--card);font-size:.85rem}
.prow:first-child{border-top:0}
.prow .pwho{display:flex;align-items:center;gap:.3rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .pn{font-weight:800;color:var(--center)}
.prow .muted{grid-column:2 / span 2;font-size:.75rem}
.prow.live .pwho{color:var(--fg)}
.gcard{display:flex;flex-direction:column;gap:.1rem;padding:.4rem .5rem;border-radius:8px;background:var(--bg);margin-bottom:.4rem;font-size:.85rem}
.gcard b{font-size:.9rem}
.gcard .gnum{font-weight:700;color:var(--center)}
.gcard .pan{color:var(--center);font-weight:700}
.gcard.paused{opacity:.65}
.gcard .pill{align-self:flex-start;background:var(--muted);color:var(--bg);border-radius:999px;padding:0 .4rem;font-size:.7rem;font-weight:700}
@media (max-width:900px){
  /* on a narrow screen the boxes belong under the board, not above the bar */
  body{display:flex;flex-direction:column;min-height:100vh}
  nav{order:-3}.notebar{order:-2}main{order:-1}
  #ghosts,#onpuzzle{order:1;position:static;width:auto;max-height:none;margin:.6rem auto;max-width:40rem;width:calc(100% - 1.4rem)}
}
dialog#race{border:0;border-radius:14px;padding:1.2rem;max-width:22rem;width:92%;background:var(--bg);color:var(--fg);box-shadow:0 12px 40px #0006}
dialog#race::backdrop{background:#0008}
dialog#race h3{margin:0 0 .6rem}
dialog#race select{width:100%;font:inherit;padding:.3rem;border:1px solid var(--muted);border-radius:var(--radius);background:var(--bg);color:var(--fg);margin:.5rem 0}
tr.pick{cursor:pointer}
tr.pick:hover{background:var(--card)}
/* pangram mode: five dots for the five puzzles of a set */
.dots5{display:flex;gap:.5rem;justify-content:center;margin:.2rem 0 .4rem}
.dots5 i{width:.7rem;height:.7rem;border-radius:50%;background:var(--tile);border:2px solid var(--tile)}
.dots5 i.now{border-color:var(--center)}
.dots5 i.done{background:var(--center);border-color:var(--center)}
.pangram .word{min-height:3rem}
/* the short your stats panel, grey on a phone so it reads as its own block */
.you .facts{gap:1.2rem}
.you .facts dd{font-size:1.3rem}
.mine summary{cursor:pointer;color:var(--muted);margin:.4rem 0}
@media (max-width:640px){.you{background:#ececec;color:#111}.you dt,.mine summary{color:#555}}
@media (max-width:700px){
  .filters{gap:.4rem}.filters input[name=q],.filters select,.filters button{flex:1 1 100%;max-width:none}
  table.top{display:block}
  table.top tr:first-child{display:none}
  table.top tr{display:block;border:1px solid var(--tile);border-radius:10px;padding:.5rem .7rem;margin-bottom:.6rem}
  table.top td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.12rem 0;white-space:normal;font-size:.95rem}
  table.top td::before{content:attr(data-label);color:var(--muted);font-size:.8rem;align-self:center}
  table.top td.code{font-size:1.15rem;font-weight:700}
  .pager{gap:.6rem}
}
/* a run in progress blinks, and a row opens the players on that puzzle */
.dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:#2fae5a;vertical-align:middle;animation:blip 1.4s ease-in-out infinite}
.dot.paused{background:#d7452e;animation-duration:2.4s}
@keyframes blip{50%{opacity:.25}}
tr.detail td{padding:0}
.expand{padding:.6rem .8rem;background:var(--card);border-radius:10px;margin:.2rem 0 .6rem}
.pline{display:flex;flex-wrap:wrap;gap:.2rem .9rem;align-items:center;padding:.35rem 0;border-top:1px solid var(--bg)}
.pline .pname{font-weight:700;min-width:8rem;display:flex;align-items:center;gap:.35rem}
.expand .actions{margin:.6rem 0 .2rem}
.expand button.link{background:none;border:0;color:var(--accent);min-height:0;padding:0;font-size:.85rem;font-weight:700;cursor:pointer}
.button.small,.expand .actions .button,.expand .actions button{min-height:0;padding:.35rem .8rem;font-size:.85rem}
.wordlist{flex:1 1 100%;list-style:none;margin:.3rem 0 0;padding:0;columns:4;column-gap:1rem;font-size:.9rem}
@media (max-width:640px){.wordlist{columns:2}.pline{gap:.15rem .6rem}.pline .pname{min-width:100%}#ghosts{left:auto}}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}
/* the two boards are tabs, not links, and a set name is a scrollable row of puzzles */
.tabs{display:flex;gap:.4rem;margin:.3rem 0 .9rem;flex-wrap:wrap}
.tab{padding:.45rem 1.1rem;border-radius:999px;color:var(--muted);background:var(--card);font-weight:700;font-size:.9rem}
.tab.on{background:var(--center);color:#111}
.tab:hover{opacity:1;filter:brightness(1.05)}
.setname{max-width:16rem;overflow-x:auto;white-space:nowrap}
.setname::-webkit-scrollbar{height:4px}
td.code b{color:var(--center)}
/* voting: a word waiting on the admin goes pale, and the run says what is pending */
li.voted{opacity:.45;text-decoration:line-through;cursor:help}
[data-vote] li{cursor:pointer}
.suggest{display:flex;gap:.4rem;margin:.6rem 0 .2rem}
.suggest input{flex:1 1 auto;max-width:14rem}
.chip{display:inline-block;margin:.2rem 0 0;padding:.15rem .6rem;border-radius:999px;background:var(--center);color:#111;font-size:.78rem;font-weight:700}
.decide{display:flex;gap:.4rem}
.decide form{margin:0}
/* voting keeps to one quiet line and only opens up when asked */
.votebar{display:flex;gap:.6rem;align-items:center;margin:.5rem 0 0;font-size:.78rem;color:var(--muted)}
.votebar button{background:none;border:0;color:var(--muted);font:inherit;padding:0;min-height:0;cursor:pointer}
.votebar button:hover{color:var(--fg);filter:none}
#pendingchip{color:var(--center);font-weight:700}
.suggest{display:flex;gap:.4rem;align-items:center;margin:.4rem 0 0;font-size:.8rem;flex-wrap:wrap}
.suggest input{flex:0 1 11rem;font-size:.8rem;padding:.25rem .4rem}
.suggest button{min-height:0;padding:.25rem .7rem;font-size:.8rem}
.suggest .hint{color:var(--muted)}
#found.voting li,.words.voting li{cursor:pointer}
#found.voting li:hover,.words.voting li:hover{color:var(--bad)}
/* the boxes beside the board can be tucked away and called back */
.tuck{float:right;background:none;border:0;color:var(--muted);font-size:1rem;line-height:1;min-height:0;padding:0 0 0 .4rem;cursor:pointer}
#ghosts.tucked,#onpuzzle.tucked{display:none}
#tucked{position:fixed;right:.6rem;bottom:.6rem;z-index:9;display:flex;gap:.4rem;margin:0}
#tucked button{min-height:0;padding:.25rem .7rem;font-size:.75rem;border-radius:999px;background:var(--card);color:var(--muted);border:0}
@media (max-width:640px){
  nav{gap:.45rem .7rem;padding:.5rem .7rem;font-size:.92rem}
  .brand{font-size:1.05rem}
  .themes{margin-left:auto}
  .themes summary{padding:.25rem .55rem;font-size:.85rem}
  main{padding:.7rem}
  .card{padding:.8rem}
  h2,h3{font-size:1.05rem}
  .card table:not(.top){display:block;overflow-x:auto;white-space:nowrap}
  .who{display:none}
  .votebar,.suggest{justify-content:center;flex-wrap:wrap}
  .actions{gap:.4rem}
  .actions button,.actions .button{flex:1 1 auto;justify-content:center}
  .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem .6rem;margin:.5rem 0}
  .facts dd{font-size:1.15rem}
  .facts dt{font-size:.72rem}
  table.top td.setname{max-width:62%;overflow-x:auto}
}
.notebar{margin:0;padding:.5rem 1rem;background:var(--center);color:#111;font-size:.9rem;text-align:center}