:root{--bg:#ffffff;--fg:#111111;--muted:#666666;--tile:#e6e6e6;--tile-fg:#111111;--centre:#f0901f;--centre-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)}
nav{display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;border-bottom:1px solid var(--card)}
.brand{font-weight:700;font-size:1.3rem;text-decoration:none}
.muted{color:var(--muted)}
.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}
.hive{display:grid;grid-template-columns:repeat(6,calc(var(--w)/2));grid-auto-rows:calc(var(--w)*.2887);margin:.5rem 0}
.hive 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}
.hive button:active{transform:scale(.84)}
.hive .centre{background:var(--centre);color:var(--centre-fg)}
.hive button:nth-child(1){grid-area:4/3/span 4/span 2}
.hive button:nth-child(2){grid-area:1/2/span 4/span 2}
.hive button:nth-child(3){grid-area:1/4/span 4/span 2}
.hive button:nth-child(4){grid-area:4/1/span 4/span 2}
.hive button:nth-child(5){grid-area:4/5/span 4/span 2}
.hive button:nth-child(6){grid-area:7/2/span 4/span 2}
.hive 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}
.pangram{font-weight:700;color:var(--accent)}
/* the classic board: two columns, hive 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(--centre);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.centre{color:var(--centre)}
.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 .hive 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(--centre)}
.dots i.now{width:1.7rem;height:1.7rem;background:var(--centre);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;text-decoration:underline}
.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)}.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:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9;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.grey{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}
.grey .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}}
.made{position:fixed;right:.6rem;bottom:.4rem;font-size:.72rem;color:#888;opacity:.7;pointer-events:none;z-index:5;font-family:var(--font)}
[data-theme=rope] .made{display:none}
@media (max-width:640px){.made{position:static;display:block;text-align:right;padding:.3rem .6rem}}
.acct dl.facts{display:flex;flex-wrap:wrap;gap:1.5rem;margin:.6rem 0}
.facts dt{font-size:.8rem;color:var(--muted);text-transform:lowercase}
.facts dd{margin:0;font-size:1.6rem;font-weight:700}
.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:.1em;text-transform:uppercase;color:var(--centre);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%)}}
.notebar{margin:0;padding:.5rem 1rem;background:var(--centre);color:#111;font-size:.9rem;text-align:center}