/* Windsor Hub games. Tile colors carry text labels too (aria-label) so color is never the only signal. */
.whg{--whg-ink:#1f2a2e;--whg-mute:#5d686d;--whg-line:#d5dadc;--whg-card:#fff;--whg-soft:#f4f1ea;
  --whg-c:#4E9A62;--whg-p:#E2B33C;--whg-a:#9AA3A8;--whg-acc:#2f5d50;
  --whg-l1:#F4C64E;--whg-l2:#9CC98A;--whg-l3:#7FB8D3;--whg-l4:#B48CC8;
  font-family:Figtree,system-ui,sans-serif;color:var(--whg-ink);margin:1.5rem 0}
.whg-wrap{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-items:start}
.whg-card{background:var(--whg-card);border:1px solid var(--whg-line);border-radius:14px;padding:1.1rem 1rem 1.25rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.whg-head{margin-bottom:.5rem}
.whg-title{font-family:Bitter,Georgia,serif;font-size:1.35rem;line-height:1.2;margin:0}
.whg-sub,.whg-help,.whg-streak{color:var(--whg-mute);font-size:.92rem;margin:.25rem 0 0}
.whg-help{margin:.25rem 0 .75rem}
.whg-live{min-height:1.4em;margin:.25rem 0;font-weight:600;font-size:.95rem;text-align:center}
.whg-loading{color:var(--whg-mute);font-style:italic}
.whg-result{font-family:Bitter,Georgia,serif;font-size:1.1rem;font-weight:600;margin:.75rem 0 .2rem}
.whg-foot{text-align:center}
.whg-foot .whg-btn{margin-top:.6rem}

/* buttons */
.whg-btn{font:inherit;font-weight:600;font-size:.95rem;border-radius:999px;border:2px solid var(--whg-acc);background:var(--whg-acc);color:#fff;padding:.5rem 1.1rem;cursor:pointer;min-height:44px}
.whg-btn--ghost{background:transparent;color:var(--whg-acc)}
.whg-btn:disabled{opacity:.45;cursor:default}
.whg-btn:focus-visible,.whg-key:focus-visible,.whg-ctile:focus-visible,.whg-board:focus-visible,.whg-cluelist li:focus-visible{outline:3px solid #1d6fb8;outline-offset:2px}
.whg-ctrl{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;margin-top:.9rem}
.whg-mistakes{flex-basis:100%;text-align:center;margin:.2rem 0 0;color:var(--whg-mute);font-size:.92rem;letter-spacing:.05em}

/* word game */
.whg-board{display:grid;gap:6px;width:min(100%,300px);margin:0 auto;border-radius:6px}
.whg-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.whg-tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:2px solid var(--whg-line);border-radius:4px;font-weight:700;font-size:1.6rem;text-transform:uppercase;background:#fff}
.whg-tile--filled{border-color:#8a9396}
.whg-tile.whg-c,.whg-key.whg-c{background:var(--whg-c);border-color:var(--whg-c);color:#fff}
.whg-tile.whg-p,.whg-key.whg-p{background:var(--whg-p);border-color:var(--whg-p);color:#1f2a2e}
.whg-tile.whg-a,.whg-key.whg-a{background:var(--whg-a);border-color:var(--whg-a);color:#fff}
.whg-kb{margin-top:1rem;display:grid;gap:6px;touch-action:manipulation}
.whg-kbrow{display:flex;gap:5px;justify-content:center}
.whg-key{font:inherit;font-weight:700;font-size:.95rem;flex:1 1 0;max-width:42px;min-height:50px;padding:0;border:0;border-radius:6px;background:#e3e6e7;color:var(--whg-ink);cursor:pointer}
.whg-key--wide{max-width:66px;flex-grow:1.5;font-size:.8rem}

/* four corners */
.whg-solved{display:grid;gap:8px;margin-bottom:8px}
.whg-group{border-radius:8px;padding:.6rem .7rem;text-align:center;color:#1f2a2e}
.whg-group strong{display:block;text-transform:uppercase;letter-spacing:.03em;font-size:.95rem}
.whg-group span{font-size:.92rem}
.whg-lv1{background:var(--whg-l1)}.whg-lv2{background:var(--whg-l2)}.whg-lv3{background:var(--whg-l3)}.whg-lv4{background:var(--whg-l4)}
.whg-cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.whg-ctile{font:inherit;font-weight:700;font-size:clamp(.7rem,3vw,.85rem);text-transform:uppercase;min-height:64px;padding:.25rem .15rem;border:0;border-radius:8px;background:#ece8de;color:var(--whg-ink);cursor:pointer;overflow-wrap:normal;word-break:normal;hyphens:none;line-height:1.15}
.whg-ctile--long{font-size:clamp(.56rem,2.4vw,.72rem);letter-spacing:-.01em}
.whg-ctile.whg-on{background:#3d4a4f;color:#fff}

/* mini crossword */
.whg-cluebar{background:#e6f0ec;border-radius:8px;padding:.55rem .7rem;font-weight:600;min-height:2.6em;margin:0 0 .6rem}
.whg-xgrid{display:grid;width:min(100%,300px);margin:0 auto;border:2px solid var(--whg-ink)}
.whg-x{position:relative;aspect-ratio:1;border:1px solid #9aa3a8;background:#fff}
.whg-xblock{background:var(--whg-ink)}
.whg-xnum{position:absolute;top:2px;left:4px;font-size:.68rem;font-weight:600;pointer-events:none;color:var(--whg-ink)}
.whg-x input{all:unset;box-sizing:border-box;width:100%;height:100%;text-align:center;font-weight:700;font-size:1.55rem;text-transform:uppercase;caret-color:transparent;cursor:pointer;padding-top:.3rem}
.whg-xword{background:#d7ebf5}
.whg-xat{background:#f7dc6f}
.whg-xwrong input{color:#b3261e;text-decoration:line-through}
.whg-xdone{background:#e3f1e6}
.whg-clues{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.whg-cluelist h3{font-family:Bitter,Georgia,serif;font-size:1rem;margin:0 0 .35rem}
.whg-cluelist ol{list-style:none;margin:0;padding:0;font-size:.92rem}
.whg-cluelist li{padding:.3rem .4rem;border-radius:6px;cursor:pointer}
.whg-cluelist li.whg-cur{background:#d7ebf5}
.whg-soon{color:var(--whg-mute)}

@keyframes whg-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.whg-shake{animation:whg-shake .4s}
@media (prefers-reduced-motion:reduce){.whg-shake{animation:none}}
@media (max-width:420px){.whg-clues{grid-template-columns:1fr}.whg-key{min-height:46px}}