:root{
  --bg:#FBFAF6; --bg2:#F3F0E7; --card:#FFFFFF; --card2:#F7F5EE;
  --ink:#17251F; --ink2:#43534B; --muted:#75827A;
  --line:#E3DFD2; --line2:#CFC9B8;
  --brand:#0C6B58; --brand-d:#084C3F; --brand-soft:#E2EFEA;
  --gold:#A87C14; --gold-soft:#F7ECD2;
  --green:#4E8A44; --green-d:#3E7036;
  --yellow:#C6A62B; --yellow-d:#A98E1F;
  --grey:#7A7F7C; --grey-soft:#E9E9E6;
  --tile-empty:#FFFFFF; --tile-border:#CFCFC8; --tile-border-on:#8E948E;
  --shadow:0 1px 2px rgba(23,37,31,.05),0 12px 32px -12px rgba(23,37,31,.14);
  --shadow-lg:0 2px 4px rgba(23,37,31,.06),0 24px 48px -16px rgba(23,37,31,.20);
  --r-lg:20px; --r-md:14px; --r-sm:10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#101613; --bg2:#151B18; --card:#1A211D; --card2:#202823;
    --ink:#EEF2EC; --ink2:#B9C4BC; --muted:#8B9890;
    --line:#2B352F; --line2:#39463E;
    --brand:#3DB894; --brand-d:#5CC7A6; --brand-soft:#17352B;
    --gold:#D9AE4A; --gold-soft:#33290F;
    --green:#5FA653; --green-d:#6FB863;
    --yellow:#D3B63E; --yellow-d:#E0C653;
    --grey:#8A918C; --grey-soft:#262D29;
    --tile-empty:#1A211D; --tile-border:#3A443E; --tile-border-on:#5B6A60;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.5);
    --shadow-lg:0 2px 4px rgba(0,0,0,.35),0 24px 48px -16px rgba(0,0,0,.6);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
h1,h2,h3,.serif{font-family:"Newsreader",Georgia,serif;letter-spacing:-.01em}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:10px 22px;padding:10px 0 12px;flex-wrap:wrap}
.logo{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink);text-decoration:none;flex:none;min-width:0}
.logo-img{display:block;height:56px;width:auto;flex:none;background:transparent}
.logo-tagline{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink2);white-space:nowrap;line-height:1.3;text-align:center}
.footer-tagline{font-weight:700;color:var(--ink);margin:0 0 12px}
nav.main{margin-left:auto;display:flex;align-items:stretch;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--shadow)}
nav.main a{display:flex;align-items:center;gap:7px;color:var(--ink2);text-decoration:none;font-size:14.5px;font-weight:700;padding:8px 15px;border-radius:999px;white-space:nowrap;line-height:1.2}
nav.main a svg{width:16px;height:16px;flex:none}
nav.main a:hover{background:var(--card2);color:var(--ink)}
nav.main a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(max-width:860px){
  .topbar-in{gap:8px 14px;padding:8px 0 10px}
  .logo-img{height:48px}
  nav.main{order:3;flex:1 1 100%;margin-left:0;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;border-radius:16px;padding:5px}
  nav.main a{flex-direction:column;justify-content:center;gap:4px;padding:7px 2px 6px;font-size:11.5px;font-weight:700;border-radius:11px;text-align:center;letter-spacing:-.01em}
  nav.main a svg{width:19px;height:19px}
}
@media(max-width:420px){
  .logo-img{height:48px}
  .logo-tagline{font-size:9px;letter-spacing:.05em}
  nav.main a{font-size:11px;padding:7px 1px 6px}
}
.hero{padding:40px 0 4px}
.hero h1{font-size:clamp(32px,5.2vw,52px);line-height:1.05;margin:0 0 12px;font-weight:600;max-width:16em}
.hero h1 em{font-style:italic;color:var(--brand)}
.hero p.lede{font-size:clamp(16px,2vw,19px);color:var(--ink2);max-width:44em;margin:0 0 16px}
.promise{display:flex;flex-wrap:wrap;gap:8px}
.promise span{font-size:12.5px;font-weight:700;color:var(--brand-d);background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 25%,transparent);padding:5px 11px;border-radius:999px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0 26px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em}
.stat small{color:var(--muted);font-weight:600;font-size:12.5px}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px}
.card h2{margin:0 0 6px;font-size:26px;font-weight:600}
.card h3{margin:0 0 6px;font-size:19px;font-weight:600}
.sub{color:var(--ink2);font-size:14.5px;margin:0 0 16px}
section{margin:0 0 26px;scroll-margin-top:84px}
.grid2{display:grid;grid-template-columns:1.12fr .88fr;gap:20px;align-items:start}
.grid2-eq{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:900px){.grid2,.grid2-eq{grid-template-columns:1fr}}
.kicker{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);margin:0 0 8px}
.board{display:flex;flex-direction:column;gap:6px;align-items:center;margin:8px 0 14px}
.brow{display:flex;gap:6px}
.tile{width:56px;height:56px;border:2px solid var(--tile-border);background:var(--tile-empty);border-radius:8px;display:grid;place-items:center;font-size:26px;font-weight:800;text-transform:uppercase;user-select:none;transition:background .15s,border-color .15s;color:var(--ink);cursor:pointer;padding:0;font-family:inherit}
.tile.filled{border-color:var(--tile-border-on)}
.tile.active-row{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 35%,transparent)}
.tile.s0{background:var(--grey);border-color:var(--grey);color:#fff}
.tile.s1{background:var(--yellow);border-color:var(--yellow-d);color:#fff}
.tile.s2{background:var(--green);border-color:var(--green-d);color:#fff}
.tile.pop{animation:pop .18s ease}
@keyframes pop{50%{transform:scale(1.1)}}
.tile.flip{animation:flip .35s ease}
@keyframes flip{50%{transform:rotateX(88deg)}}
@media(max-width:420px){.tile{width:50px;height:50px;font-size:23px}}
@media (prefers-reduced-motion: reduce){.tile.pop,.tile.flip{animation:none}html{scroll-behavior:auto}}
.board-help{font-size:13.5px;color:var(--muted);text-align:center;margin:0 0 14px}
.board-help b{color:var(--ink2)}
.btn{border:1px solid var(--line2);background:var(--card);color:var(--ink);font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px;transition:background .15s,transform .1s}
.btn:hover{background:var(--card2)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-d)}
.btn.small{padding:6px 12px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btnrow{display:flex;flex-wrap:wrap;gap:8px}
.switch{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer}
.switch input{appearance:none;width:42px;height:24px;border-radius:999px;background:var(--grey-soft);border:1px solid var(--line2);position:relative;cursor:pointer;transition:background .15s;margin:0;flex:none;padding:0}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.switch input:checked{background:var(--brand)}
.switch input:checked::after{left:20px}
.kb{margin-top:16px;margin-bottom:8px;padding-bottom:env(safe-area-inset-bottom);display:flex;flex-direction:column;gap:5px;align-items:center}
.kbrow{display:flex;gap:5px;justify-content:center}
.key{min-width:34px;height:46px;padding:0 6px;border:0;border-radius:6px;background:var(--grey-soft);color:var(--ink);font-weight:700;font-size:13px;text-transform:uppercase}
.key.wide{min-width:56px;font-size:11px}
.key.s2{background:var(--green);color:#fff}.key.s1{background:var(--yellow);color:#fff}.key.s0{background:var(--grey);color:#fff}
@media(max-width:420px){.key{min-width:29px;height:42px;padding:0 4px}.key.wide{min-width:48px}}
.sugg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.sugg{grid-template-columns:1fr}}
.sugg-card{border-radius:var(--r-md);padding:18px;border:1px solid var(--line)}
.sugg-card.likely{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 30%,transparent)}
.sugg-card.burner{background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 35%,transparent)}
.sugg-card .tag{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin:0 0 6px}
.sugg-card.likely .tag{color:var(--brand-d)} .sugg-card.burner .tag{color:var(--gold)}
.sugg-word{font-size:32px;font-weight:800;letter-spacing:.12em;line-height:1;margin:0 0 8px}
.sugg-word[data-word="1"]{cursor:pointer}
.sugg-word[data-word="1"]:hover{text-decoration:underline;text-underline-offset:5px}
.sugg-score{display:inline-block;font-size:12.5px;font-weight:800;color:var(--gold);background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);border-radius:999px;padding:3px 10px;margin:0 0 9px;cursor:pointer}
.sugg-score[hidden]{display:none}
.sugg-card.likely .sugg-score{color:var(--brand-d);background:color-mix(in srgb,var(--brand) 12%,transparent);border-color:color-mix(in srgb,var(--brand) 30%,transparent)}
.sugg-why{font-size:13.5px;color:var(--ink2);margin:0}
.count-big{font-size:15px;color:var(--ink2);margin:0 0 14px}
.count-big b{font-size:22px;color:var(--ink)}
.elim{height:8px;background:var(--grey-soft);border-radius:99px;overflow:hidden;margin:0 0 16px}
.elim i{display:block;height:100%;background:var(--brand);width:0;transition:width .4s}
.hintmodes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.hintmodes label{border:1px solid var(--line2);border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:600;cursor:pointer;background:var(--card)}
.hintmodes input{accent-color:var(--brand);margin-right:5px}
.hintmodes label:has(input:checked){background:var(--brand);color:#fff;border-color:var(--brand)}
.firstletter{font-size:15px;background:var(--card2);border:1px dashed var(--line2);border-radius:var(--r-sm);padding:10px 14px;margin:0 0 14px;display:none}
.defbox{margin-top:14px;border-top:1px solid var(--line);padding-top:14px;font-size:14.5px;display:none}
.defbox b{letter-spacing:.08em}
.defbox .bd-letter{display:inline-block;border:1px solid var(--line2);border-radius:6px;padding:1px 6px;margin:2px 1px;font-weight:700;font-size:13px;background:var(--card2)}
.defbox .bd-letter small{color:var(--gold);font-weight:800;margin-left:3px}
.defbox p{margin:4px 0;color:var(--ink2)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--line2);background:var(--card);border-radius:8px;padding:7px 11px;font-weight:700;font-size:14px;letter-spacing:.1em;color:var(--ink);font-family:inherit;cursor:pointer}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip small{color:var(--gold);font-weight:800;margin-left:7px;letter-spacing:0;background:var(--gold-soft);border-radius:999px;padding:1px 7px;font-size:12px;white-space:nowrap}
.chip.answer{border-color:color-mix(in srgb,var(--brand) 45%,transparent);background:var(--brand-soft)}
.mini-results{font-size:13.5px;color:var(--muted);margin:0 0 10px;font-weight:600}
label.flabel{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin:0 0 6px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);font-weight:700;font-size:14px;padding:11px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:all .25s;z-index:99;box-shadow:var(--shadow-lg);max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.howlist{margin:0;padding-left:20px;color:var(--ink2);font-size:15px}
.howlist li{margin-bottom:9px}
.howlist b{color:var(--ink)}
footer{border-top:1px solid var(--line);padding:28px 0 calc(40px + env(safe-area-inset-bottom));color:var(--muted);font-size:13.5px;position:relative;clear:both}
footer p{margin:0 0 8px;max-width:62em}
details.faq{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:14px 18px;margin-bottom:10px}
details.faq summary{font-weight:700;cursor:pointer;font-size:15.5px}
details.faq p{color:var(--ink2);margin:8px 0 2px;font-size:14.5px}
.hidden{display:none !important}
.guide-steps{margin:0;padding-left:20px;color:var(--ink2);font-size:15px}
.guide-steps li{margin-bottom:9px}
.guide-steps b{color:var(--ink)}
.colour-key{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}
.colour-key div{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink2)}
.colour-key b{color:var(--ink)}
.swatch{flex:none;width:22px;height:22px;border-radius:6px;margin-top:1px}
.swatch.g{background:var(--green)} .swatch.y{background:var(--yellow)} .swatch.x{background:var(--grey)}
.example-box{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;margin-top:16px}
.example-box p{margin:0 0 10px;font-size:14.5px;color:var(--ink2)}
.example-box p:last-child{margin-bottom:0}
.example-box b{color:var(--ink)}
.exrow{display:flex;gap:5px;margin:0 0 12px}
.extile{width:36px;height:36px;border-radius:7px;display:grid;place-items:center;font-size:18px;font-weight:800;color:#fff;text-transform:uppercase}
.extile.g{background:var(--green)} .extile.y{background:var(--yellow)} .extile.x{background:var(--grey)}
.field{margin:0 0 12px}
.field input,.field select{width:100%;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-size:15px;font-weight:600}
.field input:focus,.field select:focus,.guessrow input:focus{outline:2px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:1px;border-color:var(--brand)}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.formgrid{grid-template-columns:1fr}}
.groupcode{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);border-radius:var(--r-md);padding:12px 14px;margin:0 0 14px}
.groupcode b{font-size:21px;letter-spacing:.14em;color:var(--brand-d)}
.groupcode span{font-size:13px;font-weight:700;color:var(--ink2)}
.divider{border:0;border-top:1px solid var(--line);margin:18px 0}
.lbrow{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}
.lbrow:last-child{border-bottom:0}
.rank{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:var(--grey-soft);color:var(--ink2)}
.rank.r1{background:var(--gold-soft);color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.rank.r2{background:var(--card2);color:var(--ink);border:1px solid var(--line2)}
.rank.r3{background:var(--gold-soft);color:var(--gold)}
.lbname{font-weight:800;line-height:1.25}
.lbsub{color:var(--muted);font-size:12.5px;font-weight:600}
.lbpts{margin-left:auto;text-align:right;flex:none}
.lbpts b{font-size:19px}
.recent{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.recent p{margin:0 0 6px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.recent div{font-size:13.5px;color:var(--ink2);padding:3px 0}
.playboard{display:flex;flex-direction:column;gap:5px;align-items:center;margin:12px 0}
.ptile{width:44px;height:44px;border:2px solid var(--tile-border);background:var(--tile-empty);border-radius:7px;display:grid;place-items:center;font-size:21px;font-weight:800;text-transform:uppercase;color:var(--ink)}
.ptile.filled{border-color:var(--tile-border-on)}
.ptile.s0{background:var(--grey);border-color:var(--grey);color:#fff}
.ptile.s1{background:var(--yellow);border-color:var(--yellow-d);color:#fff}
.ptile.s2{background:var(--green);border-color:var(--green-d);color:#fff}
@media(max-width:420px){.ptile{width:40px;height:40px;font-size:19px}}
.guessrow{display:flex;gap:8px;max-width:340px;margin:0 auto}
.guessrow input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;text-align:center}
.gamemsg{text-align:center;font-size:14.5px;color:var(--ink2);margin:12px 0 0;min-height:22px}
.gamemsg b{color:var(--ink)}
.timer{font-size:46px;font-weight:800;letter-spacing:.02em;line-height:1;font-variant-numeric:tabular-nums;margin:4px 0 6px}
.racemeta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.racemeta span{font-size:12.5px;font-weight:700;color:var(--ink2);background:var(--card2);border:1px solid var(--line);padding:5px 11px;border-radius:999px}
.racebar{height:10px;background:var(--grey-soft);border-radius:99px;overflow:hidden;margin:0 0 16px}
.racebar i{display:block;height:100%;background:var(--green);width:0;transition:width .35s}
.score-note{font-size:13px;color:var(--muted);margin:12px 0 0}
.sync-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink2);background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;margin:0 0 14px}
.sync-dot{width:9px;height:9px;border-radius:50%;background:var(--yellow);flex:none}
.sync-dot.on{background:var(--green)}
.view-toggle{display:inline-flex;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:3px;margin:0 0 14px}
.view-toggle button{border:0;background:transparent;color:var(--ink2);font-weight:800;font-size:13px;padding:7px 16px;border-radius:999px}
.view-toggle button.active{background:var(--brand);color:#fff}
.setup-card{border:1px dashed var(--line2);background:var(--card2)}
.setup-card ol{margin:0 0 12px;padding-left:20px;color:var(--ink2);font-size:14.5px}
.setup-card ol li{margin-bottom:10px}
.setup-card ol b,.setup-card p b{color:var(--ink)}
.setup-card code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1px 6px;word-break:break-all}
.setup-code{display:block;white-space:pre-wrap;word-break:break-word;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.6;color:var(--ink2);margin:0 0 12px}
.joinrow{display:flex;gap:8px;flex-wrap:wrap}
.joinrow input{flex:1;min-width:160px;text-transform:uppercase;letter-spacing:.08em}

/* --- Quordle solver --- */
.q-entry{display:flex;gap:8px;max-width:420px}
.q-entry input{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.2em;text-align:center}
.q-entry input:focus{outline:2px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:1px;border-color:var(--brand)}
.q-meta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.q-meta span{font-size:12.5px;font-weight:700;color:var(--ink2);background:var(--card2);border:1px solid var(--line);padding:5px 11px;border-radius:999px}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 20px}
@media(max-width:760px){.q-grid{grid-template-columns:1fr}}
.q-board-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:18px}
.q-board-card.is-solved{border-color:color-mix(in srgb,var(--green) 55%,transparent);background:color-mix(in srgb,var(--brand-soft) 45%,var(--card))}
.q-board-head{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.q-board-head h3{margin:0;font-size:19px}
.q-count{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--brand-d);background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 25%,transparent);padding:4px 10px;border-radius:999px;white-space:nowrap}
.q-count.bad{color:#fff;background:var(--grey);border-color:var(--grey)}
.q-count.done{color:#fff;background:var(--green);border-color:var(--green-d)}
.q-rows{display:flex;flex-direction:column;gap:5px;align-items:center;min-height:54px}
.q-row{display:flex;gap:5px}
.qtile{width:42px;height:42px;border:2px solid var(--tile-border);background:var(--tile-empty);border-radius:7px;display:grid;place-items:center;font-size:20px;font-weight:800;text-transform:uppercase;color:var(--ink);cursor:pointer;padding:0;font-family:inherit}
.qtile.s0{background:var(--grey);border-color:var(--grey);color:#fff}
.qtile.s1{background:var(--yellow);border-color:var(--yellow-d);color:#fff}
.qtile.s2{background:var(--green);border-color:var(--green-d);color:#fff}
.qtile.empty{cursor:default;opacity:.55}
@media(max-width:420px){.qtile{width:38px;height:38px;font-size:18px}}
.q-empty-note{text-align:center;color:var(--muted);font-size:13.5px;padding:14px 6px;margin:0}
.q-board-foot{border-top:1px solid var(--line);margin-top:14px;padding-top:12px;font-size:14px;color:var(--ink2)}
.q-board-foot b{color:var(--ink);letter-spacing:.08em}
.q-perboard{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media(max-width:620px){.q-perboard{grid-template-columns:1fr}}
.q-perboard div{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14px;color:var(--ink2)}
.q-perboard b{color:var(--ink);letter-spacing:.08em}
.q-new-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;text-decoration:none;color:var(--ink);background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 32%,transparent);border-radius:14px;padding:15px 18px;margin:0 0 20px}
.q-new-banner b{font-size:16px}
.q-new-banner span{color:var(--ink2);font-size:14px;font-weight:600}
.q-new-banner .btn{margin-left:auto}

/* --- Play Quordle (the game) --- */
.qp-modes{display:inline-flex;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:3px}
.qp-modes button{border:0;background:transparent;color:var(--ink2);font-weight:800;font-size:13.5px;padding:8px 18px;border-radius:999px}
.qp-modes button.active{background:var(--brand);color:#fff}
.qp-meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.qp-meta span{font-size:12.5px;font-weight:700;color:var(--ink2);background:var(--card2);border:1px solid var(--line);padding:5px 11px;border-radius:999px}
.qp-meta span b{color:var(--ink)}
.qp-boards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 18px}
@media(max-width:560px){.qp-boards{gap:10px}}
.qp-board{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:14px}
.qp-board.is-solved{border-color:color-mix(in srgb,var(--green) 55%,transparent)}
.qp-board-head{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.qp-board-head h3{margin:0;font-size:17px}
.qp-badge{margin-left:auto;font-size:11.5px;font-weight:800;letter-spacing:.05em;padding:4px 10px;border-radius:999px;background:var(--grey-soft);color:var(--ink2);white-space:nowrap}
.qp-badge.done{color:#fff;background:var(--green)}
.qp-rows{display:flex;flex-direction:column;gap:4px}
.qp-row{display:flex;gap:4px}
.qp-tile{flex:1;min-width:0;aspect-ratio:1/1;border:2px solid var(--tile-border);background:var(--tile-empty);border-radius:6px;display:grid;place-items:center;font-size:clamp(13px,3.4vw,20px);font-weight:800;text-transform:uppercase;color:var(--ink)}
.qp-tile.filled{border-color:var(--tile-border-on)}
.qp-tile.current{border-color:color-mix(in srgb,var(--brand) 55%,var(--tile-border))}
.qp-tile.s0{background:var(--grey);border-color:var(--grey);color:#fff}
.qp-tile.s1{background:var(--yellow);border-color:var(--yellow-d);color:#fff}
.qp-tile.s2{background:var(--green);border-color:var(--green-d);color:#fff}
.qp-tile.flip{animation:flip .35s ease}
.qp-row.shake{animation:shake .3s ease}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@media (prefers-reduced-motion: reduce){.qp-tile.flip,.qp-row.shake{animation:none}}
.qp-msg{text-align:center;font-size:15px;color:var(--ink2);margin:0 0 6px;min-height:24px}
.qp-msg b{color:var(--ink)}
.qp-end{border:1px solid color-mix(in srgb,var(--brand) 32%,transparent);background:var(--brand-soft);border-radius:var(--r-md);padding:16px 18px;margin:0 0 18px;text-align:center}
.qp-end h3{margin:0 0 6px;font-size:22px}
.qp-end p{margin:0 0 12px;color:var(--ink2);font-size:14.5px}
.qp-end .answers{font-weight:800;letter-spacing:.1em;color:var(--ink)}
.qp-kb{margin-top:6px;display:flex;flex-direction:column;gap:5px;align-items:center}
.qp-key{min-width:38px;height:52px;padding:2px 4px 3px;border:0;border-radius:6px;background:var(--grey-soft);color:var(--ink);font-weight:800;font-size:14px;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.qp-key.wide{min-width:62px;font-size:11px}
.qp-dots{display:flex;gap:3px}
.qp-dots i{width:7px;height:7px;border-radius:50%;background:var(--tile-border);display:block}
.qp-dots i.s2{background:var(--green)} .qp-dots i.s1{background:var(--yellow)} .qp-dots i.s0{background:var(--grey)}
@media(max-width:420px){.qp-key{min-width:31px;height:48px;padding:0 3px}.qp-key.wide{min-width:52px}.qp-dots i{width:6px;height:6px}}

/* --- Wordscapes (letter-wheel crossword) --- */
.ws-band{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:14px;padding:16px 18px;margin:0 0 18px;color:#fff;background:linear-gradient(120deg,#1E5B43,#3E8E5F)}
.ws-band .ws-level{margin:0;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;opacity:.85}
.ws-band h2{margin:0;font-size:28px;color:#fff}
.ws-coins{margin-left:auto;text-align:right;font-size:13px;font-weight:700;opacity:.95}
.ws-coins b{display:block;font-size:24px;letter-spacing:.01em}
.ws-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ws-meta span{font-size:12.5px;font-weight:700;color:var(--ink2);background:var(--card2);border:1px solid var(--line);padding:5px 11px;border-radius:999px}
.ws-meta span b{color:var(--ink)}
.ws-grid-wrap{display:flex;justify-content:center;margin:6px 0 4px}
.ws-grid{display:grid;gap:6px}
.ws-cell{aspect-ratio:1/1;border-radius:9px;display:grid;place-items:center;font-weight:800;text-transform:uppercase;background:var(--card2);border:1.5px solid var(--line2);color:transparent;font-size:clamp(15px,4.4vw,24px);line-height:1}
.ws-cell.known{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 45%,transparent);color:var(--ink)}
.ws-cell.hinted{background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 45%,transparent);color:var(--gold)}
.ws-cell.fresh{animation:pop .25s ease}
.ws-blank{background:transparent;border:0}
.ws-preview{min-height:40px;display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:var(--brand-d);margin:8px 0 2px;text-indent:.32em}
.ws-preview small{font-size:13px;letter-spacing:.02em;color:var(--muted);font-weight:600;text-transform:none;text-indent:0}
.ws-wheel-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 6px}
.ws-round{flex:none;width:58px;height:58px;border-radius:50%;border:1px solid var(--line2);background:var(--card2);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.ws-round svg{width:22px;height:22px}
.ws-round small{font-size:10px;color:var(--gold);font-weight:800}
.ws-round:disabled{opacity:.45;cursor:not-allowed}
.ws-wheel-wrap{position:relative;width:min(300px,72vw);aspect-ratio:1/1;flex:none}
.ws-wheel{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 42%,var(--card) 0%,var(--card2) 78%);border:1px solid var(--line);box-shadow:var(--shadow);touch-action:none}
.ws-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.ws-lines polyline{fill:none;stroke:var(--brand);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:.35}
.ws-letter{position:absolute;z-index:2;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--card);border:2px solid var(--line2);display:grid;place-items:center;font-size:24px;font-weight:800;text-transform:uppercase;color:var(--ink);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;padding:0;font-family:inherit}
.ws-letter.sel{background:var(--brand);border-color:var(--brand-d);color:#fff}
@media(max-width:420px){.ws-letter{width:50px;height:50px;margin:-25px 0 0 -25px;font-size:21px}.ws-round{width:50px;height:50px}}
.ws-bonus{margin:14px 0 0;border-top:1px solid var(--line);padding-top:12px}
.ws-bonus p{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ws-end{border:1px solid color-mix(in srgb,var(--brand) 32%,transparent);background:var(--brand-soft);border-radius:var(--r-md);padding:16px 18px;margin:0 0 18px;text-align:center}
.ws-end h3{margin:0 0 6px;font-size:22px}
.ws-end p{margin:0 0 12px;color:var(--ink2);font-size:14.5px}
.ws-levels{display:flex;flex-wrap:wrap;gap:8px}
.ws-levels button{border:1px solid var(--line2);background:var(--card);color:var(--ink2);font-weight:700;font-size:13.5px;padding:8px 13px;border-radius:999px}
.ws-levels button.active{background:var(--brand);border-color:var(--brand);color:#fff}
.ws-levels button.done{border-color:color-mix(in srgb,var(--green) 55%,transparent);color:var(--brand-d)}
.ws-levels button.active.done{background:var(--brand);color:#fff}
.ws-levels button:disabled{opacity:.45;cursor:not-allowed}
.ws-shake{animation:shake .3s ease}
@media (prefers-reduced-motion: reduce){.ws-cell.fresh,.ws-shake{animation:none}}
/* Wordscapes game + leaderboard rail: board sits on the right of the game
   on wide screens and stacks underneath it on narrow ones. */
.ws-layout{display:grid;grid-template-columns:minmax(0,1fr) 308px;gap:20px;align-items:start;margin:0 0 20px}
.ws-main{min-width:0}
.ws-lb{position:sticky;top:84px}
@media(max-width:980px){.ws-layout{grid-template-columns:1fr}.ws-lb{position:static}}
.ws-lb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ws-lb-row{display:flex;align-items:center;gap:10px;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:13.5px}
.ws-lb-row.you{border-color:color-mix(in srgb,var(--brand) 55%,transparent);background:var(--brand-soft)}
.ws-lb-rank{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--grey-soft);color:var(--ink2)}
.ws-lb-rank.r1{background:var(--gold);color:#241C05}
.ws-lb-rank.r2{background:#C9CFD1;color:#1C2226}
.ws-lb-rank.r3{background:#C08A5A;color:#2A1A0C}
.ws-lb-name{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-lb-row.you .ws-lb-name{color:var(--brand-d)}
.ws-lb-score{margin-left:auto;text-align:right;color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap}
.ws-lb-score b{color:var(--ink);font-size:13.5px}
.ws-lb-you{margin:12px 0 0;font-size:13px;color:var(--ink2);border-top:1px solid var(--line);padding-top:10px}
.ws-lb-you b{color:var(--ink)}
.ws-lb-tag{display:inline-block;margin-left:7px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--grey-soft);color:var(--muted);vertical-align:middle;white-space:nowrap}
.ws-lb-tag.fin{background:var(--brand);color:#fff}
#wsWheelRow.locked{opacity:.45}


/* --- The Hive (Spelling Bee) --- */
.bee-current{min-height:52px;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);margin:6px 0 2px;text-indent:.3em;word-break:break-all;text-align:center}
.bee-current small{font-size:14px;letter-spacing:.02em;color:var(--muted);font-weight:600;text-transform:none;text-indent:0}
.bee-current .bc-center{color:var(--gold)}
.bee-hive{position:relative;width:min(320px,100%);aspect-ratio:1/1;margin:10px auto 4px}
.bee-hex{position:absolute;width:31%;aspect-ratio:1/.92;transform:translate(-50%,-50%);clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);border:0;display:grid;place-items:center;font-size:clamp(22px,6vw,30px);font-weight:800;text-transform:uppercase;background:var(--card2);color:var(--ink);padding:0;font-family:inherit;transition:filter .12s}
.bee-hex:hover{filter:brightness(1.06)}
.bee-hex.center{background:linear-gradient(145deg,#F2C94C,#D9A514);color:#241C05;z-index:2}
.bee-msg{text-align:center;font-size:15px;color:var(--ink2);margin:10px 0 4px;min-height:24px}
.bee-msg b{color:var(--ink)}
.bee-progress{height:10px;background:var(--grey-soft);border-radius:99px;overflow:hidden;margin:0 0 14px}
.bee-progress i{display:block;height:100%;background:var(--gold);width:0;transition:width .35s}
.bee-ranks{display:flex;flex-direction:column;gap:4px;margin:0 0 6px}
.bee-rank-row{display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:9px;font-size:14px;color:var(--muted);border:1px solid transparent}
.bee-rank-row b{color:var(--ink2);font-weight:700}
.bee-rank-row span{margin-left:auto;font-weight:700;font-size:13px;white-space:nowrap}
.bee-rank-row.current{background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 40%,transparent);color:var(--ink)}
.bee-rank-row.current b{color:var(--ink)}
.bee-rank-row.done{color:var(--ink2)}
.bee-finder-inputs{display:grid;grid-template-columns:1fr 2fr;gap:12px}
@media(max-width:560px){.bee-finder-inputs{grid-template-columns:1fr}}
.bee-finder-inputs input{text-transform:uppercase;letter-spacing:.35em;text-align:center;font-size:19px}
.chip.pangram{border-color:color-mix(in srgb,var(--gold) 55%,transparent);background:var(--gold-soft)}
.bee-shake{animation:shake .3s ease}
@media (prefers-reduced-motion: reduce){.bee-shake{animation:none}}
/* --- Separate pages --- */
.page{display:none}
.page.active{display:block;animation:pageIn .22s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.page.active{animation:none}}
nav.main a.active{background:var(--brand);color:#fff;font-weight:800;box-shadow:0 1px 3px color-mix(in srgb,var(--brand) 45%,transparent)}
nav.main a.active:hover{background:var(--brand-d);color:#fff}
.page-head{padding:34px 0 18px}
.page-head h1{font-size:clamp(30px,4.6vw,44px);line-height:1.08;margin:0 0 8px;font-weight:600}
.page-head h1 em{font-style:italic;color:var(--brand)}
.page-head p{color:var(--ink2);font-size:17px;max-width:42em;margin:0}
.page-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.page-tabs a{flex:1;min-width:120px;text-align:center;text-decoration:none;color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 10px;font-weight:800;font-size:14px}
.page-tabs a small{display:block;font-weight:600;color:var(--muted);font-size:12px;margin-top:2px}
.page-tabs a.active{border-color:var(--brand);color:var(--brand-d);background:var(--brand-soft)}
.quick-links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 0}
@media(max-width:720px){.quick-links{grid-template-columns:1fr}}
.quick-links a{text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.quick-links a b{display:block;font-size:16px;margin-bottom:3px}
.quick-links a span{color:var(--muted);font-size:13.5px;font-weight:600}
.quick-links a:hover{border-color:var(--brand)}
/* --- Games hub --- */
.games-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.games-filters button{border:1px solid var(--line2);background:var(--card);color:var(--ink2);font-weight:800;font-size:13.5px;padding:8px 15px;border-radius:999px}
.games-filters button.active{background:var(--brand);border-color:var(--brand);color:#fff}
.games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.games-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.games-grid{grid-template-columns:1fr}}
.game-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:9px}
#gamesGrid .is-off{display:none}
.game-tiles{display:flex;gap:4px;flex-wrap:wrap}
.gtile{flex:none;width:30px;height:30px;border-radius:6px;display:grid;place-items:center;font-size:15px;font-weight:800;color:#fff;text-transform:uppercase;background:var(--grey)}
.gtile.g{background:var(--green)} .gtile.y{background:var(--yellow)} .gtile.b{background:var(--brand)}
.game-card h3{margin:0;font-size:20px}
.game-card p{margin:0;color:var(--ink2);font-size:14.5px;flex:1}
.game-meta{display:flex;flex-wrap:wrap;gap:6px}
.game-meta span{font-size:12px;font-weight:700;color:var(--muted);background:var(--card2);border:1px solid var(--line);padding:4px 9px;border-radius:999px}
.badge{align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.badge.live{background:var(--brand-soft);color:var(--brand-d);border:1px solid color-mix(in srgb,var(--brand) 30%,transparent)}
.badge.soon{background:var(--gold-soft);color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}
.game-card .btn,.game-card a.btn{text-align:center;text-decoration:none}
.game-card.is-soon{opacity:.92}
.slot-card{border:1.5px dashed var(--line2);background:var(--card2);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:9px}
.slot-card h3{margin:0;font-size:20px}
.slot-card p{margin:0;color:var(--ink2);font-size:14.5px}
/* --- Multiplayer hub --- */
.mp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 20px}
@media(max-width:800px){.mp-grid{grid-template-columns:1fr}}
.mp-grid a{text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow);display:block}
.mp-grid a:hover{border-color:var(--brand)}
.mp-grid a b{display:block;font-size:18px;margin:0 0 4px;font-family:"Newsreader",Georgia,serif}
.mp-grid a span{color:var(--muted);font-size:14px;font-weight:600;line-height:1.5;display:block}
.mp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:800px){.mp-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.mp-steps{grid-template-columns:1fr}}
.mp-step{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:14px}
.mp-step b{display:block;margin:0 0 4px}
.mp-step p{margin:0;color:var(--ink2);font-size:14px}
.seo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:900px){.seo-grid{grid-template-columns:1fr}}
.seo-list{margin:0;padding-left:20px;color:var(--ink2);font-size:15px}
.seo-list li{margin-bottom:9px}
.seo-list b{color:var(--ink)}
.pattern-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 4px}
@media(max-width:620px){.pattern-list{grid-template-columns:1fr}}
.pattern-item{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14px;color:var(--ink2)}
.pattern-item b{color:var(--ink);letter-spacing:.14em}
.seo-links{display:flex;flex-wrap:wrap;gap:6px 14px;font-weight:700;margin:0 0 8px}
.seo-links a{color:var(--ink);text-decoration:none}
.seo-links a:hover{color:var(--brand)}
.ws-solve-row{display:flex;gap:8px;max-width:440px}
.ws-solve-row input{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.2em;text-align:center}
.ws-solve-row input:focus{outline:2px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:1px;border-color:var(--brand)}
/* --- Crawlable pages directory, sitemap & robots data --- */
.crawl-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
@media(max-width:720px){.crawl-grid{grid-template-columns:1fr}}
.crawl-card{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:15px 16px}
.crawl-card h3{margin:0 0 4px;font-size:18px}
.crawl-card h3 a{color:var(--ink);text-decoration:none}
.crawl-card h3 a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:4px}
.crawl-card p{margin:0 0 8px;color:var(--ink2);font-size:14px}
.clean-url{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:700;color:var(--brand-d);background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 25%,transparent);border-radius:8px;padding:3px 9px;word-break:break-all;text-decoration:none}
.clean-url:hover{text-decoration:underline;text-underline-offset:3px}
.codebox{display:block;white-space:pre;overflow-x:auto;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.65;color:var(--ink2);margin:0 0 12px;max-width:100%}
.url-list{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:10px}
.url-list li{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--ink2)}
.url-list li b{color:var(--ink);display:block;font-size:15px;margin-bottom:2px}
.url-list li b a{color:var(--ink);text-decoration:none}
.url-list li b a:hover{color:var(--brand)}
/* --- Mobile fit: no page may be wider than the phone ---
   Guards that cost nothing at any width first, then the phone layout.
   Desktop rules above are untouched; everything size-changing here is
   scoped to narrow viewports. */
img,video,canvas{max-width:100%}
.ws-grid{max-width:100%}
.ws-grid-wrap,.ws-main,.q-board-card,.qp-board{min-width:0}
.ws-lb-name,.lbname{min-width:0}
/* Grid items must be allowed to shrink below their content's minimum
   width. Without this, one wide child (the Solver keyboard, a tile
   board) forces its whole grid column — and with it the card and the
   page — wider than the phone, shoving everything off the right edge
   while the flex header above stays put. min-width:0 changes nothing
   where content already fits, desktop included. */
.grid2>*,.grid2-eq>*,.seo-grid>*,.q-grid>*,.qp-boards>*,.games-grid>*,.mp-grid>*,.mp-steps>*,.quick-links>*,.pattern-list>*,.formgrid>*,.bee-finder-inputs>*,.ws-layout>*,.sugg>*,.stats>*,.page{min-width:0}
@media(max-width:640px){
  .card{padding:20px 16px}
  .q-board-card{padding:16px 14px}
  .qp-board{padding:12px 10px}
  /* Wordscapes: the old row (Shuffle + wheel + Hint) was wider than a
     phone card, so the wheel and the Hint button were cropped on the
     right. On phones the wheel takes its own full-width row and the
     Shuffle / Hint buttons sit side by side underneath it, all well
     inside the card. */
  .ws-wheel-row{flex-wrap:wrap;gap:12px;max-width:100%}
  .ws-wheel-wrap{order:-1;width:min(300px,100%);margin:0 auto}
  .ws-round{width:56px;height:56px}
  .ws-preview{flex-wrap:wrap;max-width:100%}
  /* Leaderboard rows: name + Sample tag + score no longer squeeze onto
     one line and truncate — the score wraps to its own line under the
     name, so every row reads in full. */
  .ws-lb-row{flex-wrap:wrap;row-gap:2px}
  .ws-lb-score{flex:1 1 100%;margin-left:34px;text-align:left}
  .ws-solve-row{flex-wrap:wrap;max-width:100%}
  .ws-solve-row .btn{flex:1 1 auto}
  /* On-screen keyboards (Solver + Play Quordle) stretch or shrink to
     the card width instead of overflowing it. */
  .kbrow{width:100%;max-width:480px;margin:0 auto}
  .key,.qp-key{flex:1 1 0;min-width:0}
  .key.wide,.qp-key.wide{flex:1.7 1 0;min-width:0}
  /* The 5-tile solver board shrinks to fit very narrow phones. */
  .brow{max-width:100%}
  .tile{width:min(50px,calc((100vw - 104px)/5));height:min(50px,calc((100vw - 104px)/5));font-size:clamp(18px,6vw,23px)}
}
/* --- Play Wordle: full-screen game page ---
   While this page is active the site header and footer are hidden and
   the game fills the viewport exactly: board centred in the space
   between a slim game bar and the on-screen keyboard, no scrolling. */
body.pw-active{overflow:hidden}
body.pw-active .topbar,body.pw-active footer{display:none !important}
body.pw-active main.wrap{max-width:none;padding:0}
.pw{--pwt:min(60px,calc((100vh - 424px)/6),calc((100vw - 44px)/5));--pwt:min(60px,calc((100dvh - 424px)/6),calc((100vw - 44px)/5));display:flex;flex-direction:column;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;overflow:hidden;background:var(--bg)}
.pw-top{flex:none;display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line)}
.pw-back{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;font-weight:800;font-size:14px;border:1px solid var(--line2);background:var(--card);border-radius:999px;padding:7px 13px;white-space:nowrap}
.pw-back:hover{border-color:var(--brand);color:var(--brand)}
.pw-brand{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.pw-brand b{font-size:16.5px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.pw-brand b em{font-style:normal;color:var(--brand)}
.pw-brand h1.pw-h1{font-family:inherit;font-size:16.5px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;margin:0;line-height:1.1}
.pw-brand h1.pw-h1 em{font-style:normal;color:var(--brand)}
.pw-brand small{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.pw-modes{margin-left:auto;display:inline-flex;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:3px;flex:none}
.pw-modes button{border:0;background:transparent;color:var(--ink2);font-weight:800;font-size:13px;padding:7px 14px;border-radius:999px;font-family:inherit;cursor:pointer}
.pw-modes button.active{background:var(--brand);color:#fff}
.pw-sub{flex:none;display:flex;justify-content:space-between;gap:10px;padding:7px 16px 0;font-size:12.5px;font-weight:700;color:var(--muted)}
.pw-sub b{color:var(--ink)}
.pw-msg{flex:none;text-align:center;font-size:14.5px;color:var(--ink2);margin:0;padding:5px 14px 1px;min-height:27px}
.pw-msg b{color:var(--ink)}
.pw-boardwrap{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:6px 10px}
.pw-board{display:flex;flex-direction:column;gap:5px}
.pw-row{display:flex;gap:5px}
.pw-row.shake{animation:pwshake .3s ease}
@keyframes pwshake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.pw-tile{width:var(--pwt);height:var(--pwt);border:2px solid var(--tile-border);background:var(--tile-empty);border-radius:7px;display:grid;place-items:center;font-size:calc(var(--pwt)*.46);font-weight:800;text-transform:uppercase;color:var(--ink)}
.pw-tile.filled{border-color:var(--tile-border-on)}
.pw-tile.current{border-color:color-mix(in srgb,var(--brand) 55%,var(--tile-border))}
.pw-tile.s0{background:var(--grey);border-color:var(--grey);color:#fff}
.pw-tile.s1{background:var(--yellow);border-color:var(--yellow-d);color:#fff}
.pw-tile.s2{background:var(--green);border-color:var(--green-d);color:#fff}
.pw-tile.flip{animation:flip .35s ease}
.pw-tile.pop{animation:pop .16s ease}
@media (prefers-reduced-motion: reduce){.pw-tile.flip,.pw-tile.pop,.pw-row.shake{animation:none}}
.pw-end{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(330px,calc(100vw - 40px));background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:22px 20px;text-align:center;z-index:5}
.pw-end h3{margin:0 0 6px;font-size:24px}
.pw-end p{margin:0 0 8px;color:var(--ink2);font-size:14.5px}
.pw-end .answers{font-weight:800;letter-spacing:.12em;color:var(--ink)}
.pw-end .pw-stats{font-size:13px;font-weight:700;color:var(--muted);margin:0 0 14px}
.pw-kb{flex:none;width:100%;max-width:520px;margin:0 auto;padding:4px 8px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px;background:var(--bg);position:relative;z-index:2}
.pw-krow{display:flex;gap:5px;justify-content:center;width:100%}
.pw-key{flex:1 1 0;min-width:0;height:56px;padding:0 3px;border:0;border-radius:6px;background:var(--grey-soft);color:var(--ink);font-weight:800;font-size:15px;text-transform:uppercase;font-family:inherit;cursor:pointer}
.pw-key.wide{flex:1.6 1 0;font-size:12px;letter-spacing:.04em}
.pw-key.s2{background:var(--green);color:#fff}
.pw-key.s1{background:var(--yellow);color:#fff}
.pw-key.s0{background:var(--grey);color:#fff}
@media(max-width:380px){.pw-brand small{display:none}.pw-modes button{padding:7px 10px}.pw-back span{display:none}.pw-back{padding:7px 11px}}
/* --- Theme picker (header) --- */
.theme-pick{margin-left:auto;display:flex;align-items:center;gap:7px;flex:none}
.theme-pick label{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.theme-pick select{font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);background:var(--card);border:1px solid var(--line2);border-radius:999px;padding:7px 10px;cursor:pointer;max-width:170px}
@media(max-width:420px){.theme-pick label{display:none}.theme-pick select{max-width:138px;padding:6px 8px;font-size:12.5px}}
/* --- Caramel theme (selectable in the Theme picker; Auto is the default) ---
   Off-white cream surfaces, warm brown ink, buttons, accents and borders.
   The Wordle tile colours keep their usual green / yellow / grey values,
   which stay clearly readable on the Caramel surfaces. */
html[data-theme="cream"]{color-scheme:light;
  --bg:#FAF3E3; --bg2:#F4EBD7; --card:#FDF8EE; --card2:#F7EFDC;
  --ink:#5C3D2E; --ink2:#6B4226; --muted:#9A7B63;
  --line:#E7D6BA; --line2:#C9AE85;
  --brand:#8A5A33; --brand-d:#6B4226; --brand-soft:#F1E3C8;
  --gold:#9C6B1E; --gold-soft:#F5E7C6;
  --green:#4E8A44; --green-d:#3E7036;
  --yellow:#BE9A22; --yellow-d:#A98E1F;
  --grey:#7A7268; --grey-soft:#EFE4CC;
  --tile-empty:#FFFDF6; --tile-border:#D8C096; --tile-border-on:#8A5A33;
  --shadow:0 1px 2px rgba(92,61,46,.06),0 12px 32px -12px rgba(92,61,46,.18);
  --shadow-lg:0 2px 4px rgba(92,61,46,.08),0 24px 48px -16px rgba(92,61,46,.24);
}
/* --- Ocean theme (selectable in the Theme picker) ---
   Pale aqua surfaces, deep teal ink, headings, buttons and accents.
   The Wordle tile colours keep their usual green / yellow / grey values,
   which stay clearly readable on the Ocean surfaces. */
html[data-theme="ocean"]{color-scheme:light;
  --bg:#EFFAF7; --bg2:#DFF3EE; --card:#FFFFFF; --card2:#E6F4F0;
  --ink:#134E4A; --ink2:#1D5C56; --muted:#5F7F7A;
  --line:#C8E6DE; --line2:#9CCFC4;
  --brand:#0F766E; --brand-d:#115E59; --brand-soft:#D7F0E9;
  --gold:#A87C14; --gold-soft:#F7ECD2;
  --green:#4E8A44; --green-d:#3E7036;
  --yellow:#C6A62B; --yellow-d:#A98E1F;
  --grey:#6E7B78; --grey-soft:#DDEBE7;
  --tile-empty:#FFFFFF; --tile-border:#A9CFC7; --tile-border-on:#0F766E;
  --shadow:0 1px 2px rgba(19,78,74,.06),0 12px 32px -12px rgba(19,78,74,.16);
  --shadow-lg:0 2px 4px rgba(19,78,74,.08),0 24px 48px -16px rgba(19,78,74,.22);
}
/* --- Full-screen Solver (opt-in from the Solver page) ---
   Same board, keyboard and results card as the normal view — no solver
   logic changes. While active the site header, footer and the rest of
   the Solver page are hidden and the board + on-screen keyboard fit the
   viewport exactly, like Play Wordle. The results card becomes a
   collapsible sheet toggled by the Results button in the slim bar. */
.sfs-bar{display:none}
body.sfs-active{overflow:hidden}
body.sfs-active .topbar,body.sfs-active footer{display:none !important}
body.sfs-active main.wrap{max-width:none;padding:0}
body.sfs-active #page-solver>*:not(#solver){display:none}
body.sfs-active #solver{--sft:min(56px,calc((100vh - 412px)/6),calc((100vw - 64px)/5));--sft:min(56px,calc((100dvh - 412px)/6),calc((100vw - 64px)/5));display:flex;flex-direction:column;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;overflow:hidden;background:var(--bg);margin:0;gap:0}
body.sfs-active .sfs-bar{flex:none;display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line)}
.sfs-back{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:800;font-size:14px;border:1px solid var(--line2);background:var(--card);border-radius:999px;padding:7px 13px;white-space:nowrap;font-family:inherit;cursor:pointer}
.sfs-back:hover{border-color:var(--brand);color:var(--brand)}
.sfs-brand{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.sfs-brand b{font-size:16.5px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.sfs-brand b em{font-style:normal;color:var(--brand)}
.sfs-brand small{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.sfs-results-btn{margin-left:auto;flex:none;border:0;background:var(--brand);color:#fff;font-weight:800;font-size:13.5px;padding:8px 16px;border-radius:999px;font-family:inherit;cursor:pointer}
.sfs-results-btn:hover{background:var(--brand-d)}
body.sfs-active #boardCard{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;border:0;border-radius:0;box-shadow:none;background:transparent;padding:10px 12px calc(18px + env(safe-area-inset-bottom));overflow:hidden}
body.sfs-active #boardCard .kicker,body.sfs-active #boardCard h2,body.sfs-active #boardCard .sub,body.sfs-active #boardCard .board-help{display:none}
body.sfs-active #boardCard .board{margin:auto 0}
body.sfs-active #boardCard .tile{width:var(--sft);height:var(--sft);font-size:calc(var(--sft)*.46)}
body.sfs-active #boardCard .kb{flex:none;width:100%;max-width:480px;margin-top:14px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
body.sfs-active #boardCard .btnrow{flex:none}
body.sfs-active #boardCard .kbrow{width:100%}
body.sfs-active #boardCard .key{flex:1 1 0;min-width:0;height:48px}
body.sfs-active #boardCard .key.wide{flex:1.7 1 0}
body.sfs-active #btnSolverFs{display:none}
body.sfs-active #resultsCard{position:fixed;left:0;right:0;bottom:0;top:auto;height:min(66vh,640px);height:min(66dvh,640px);z-index:70;overflow-y:auto;border-radius:20px 20px 0 0;border-bottom:0;box-shadow:var(--shadow-lg);transform:translateY(103%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
body.sfs-active.sfs-results-open #resultsCard{transform:none;visibility:visible;transition:transform .25s ease}
@media (prefers-reduced-motion: reduce){body.sfs-active #resultsCard{transition:none}}
@media(max-width:380px){.sfs-brand small{display:none}.sfs-back span{display:none}.sfs-back{padding:7px 11px}}
/* --- Full-screen Wordscapes (opt-in from the Wordscapes page) ---
   Same game card, grid, wheel and buttons as the normal view — no game
   logic changes. While active the site header, footer and the rest of
   the Wordscapes page are hidden and the grid, wheel, Shuffle / Hint
   and Clear word / Try this word controls fit the phone viewport
   exactly, like the full-screen Solver. The level band and meta row
   stay visible (level, theme, coins, words found), and the leaderboard
   becomes a collapsible Progress sheet. Sizing is driven by --wsc /
   --wsr (the current level's grid columns / rows), which render() sets
   on the game card, so every level — from the 3x3 Forest grid to the
   6-row Garden grid — fits with no scrolling and no cropping. */
.wsfs-bar{display:none}
.wsfs-user{display:none}
body.wsfs-active{overflow:hidden}
body.wsfs-active .topbar,body.wsfs-active footer{display:none !important}
body.wsfs-active main.wrap{max-width:none;padding:0}
body.wsfs-active #page-wordscapes>*:not(.ws-layout){display:none}
body.wsfs-active .ws-layout{display:block;margin:0}
body.wsfs-active #wsGameCard{--wscell:min(40px,max(18px,calc((100vh - 560px - (var(--wsr,3) - 1)*6px)/var(--wsr,3))),calc((100vw - 64px)/var(--wsc,3)));--wscell:min(40px,max(18px,calc((100dvh - 560px - (var(--wsr,3) - 1)*6px)/var(--wsr,3))),calc((100vw - 64px)/var(--wsc,3)));--gridh:calc(var(--wscell)*var(--wsr,3) + (var(--wsr,3) - 1)*6px);--wheel:min(238px,calc(100vw - 132px),max(108px,calc(100vh - 402px - var(--gridh))));--wheel:min(238px,calc(100vw - 132px),max(108px,calc(100dvh - 402px - var(--gridh))));--wl:min(52px,calc(var(--wheel)*.21));display:flex;flex-direction:column;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;overflow:hidden;background:var(--bg);border:0;border-radius:0;box-shadow:none;margin:0;padding:0 10px calc(10px + env(safe-area-inset-bottom))}
body.wsfs-active .wsfs-bar{flex:none;display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);margin:0 0 6px}
/* Compact username strip inside full screen: the page-top username card
   is hidden in this mode, so the name is entered here instead.
   Play IS locked without a name in full screen, exactly like the
   normal view — the wheel, Shuffle, Hint and word entry stay locked
   until a 2+ character name is entered in this strip and Start is
   tapped. It hides itself once a name is saved, so it costs no space
   during play. */
body.wsfs-active:not(.ws-started) .wsfs-user{flex:none;display:flex;align-items:center;gap:8px;margin:0 0 6px;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:5px 5px 5px 10px}
.wsfs-user span{flex:none;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.wsfs-user input{flex:1;min-width:0;padding:7px 9px;border:1px solid var(--line2);border-radius:8px;background:var(--card);color:var(--ink);font-size:14px;font-weight:600}
.wsfs-user input:focus{outline:2px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:1px;border-color:var(--brand)}
.wsfs-user .btn{flex:none}
/* --- Wordscapes username gate: a blocking prompt over the game card ---
   Shown whenever no valid username has been entered yet (body has no
   .ws-started class), in the normal view and in full screen alike. It
   covers the whole game card, so no part of the grid, wheel or controls
   can be reached by tapping around it, and it has no close, skip or
   play-without-name control: the only way past it is a username of 2+
   characters and Start. render() toggles body.ws-started, which hides
   it. Because the name is kept in memory only, reloading brings the
   gate straight back. */
#wsGameCard{position:relative}
.ws-gate{display:none}
body:not(.ws-started) .ws-gate{display:flex;position:absolute;inset:0;z-index:30;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:28px 22px;background:var(--card);border-radius:inherit}
.ws-gate h3{margin:0;font-size:24px}
.ws-gate p{margin:0;color:var(--ink2);font-size:14.5px;max-width:34em}
.ws-gate-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;max-width:420px}
.ws-gate-row input{flex:1;min-width:180px;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-size:15px;font-weight:600}
.ws-gate-row input:focus{outline:2px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:1px;border-color:var(--brand)}
.ws-gate .ws-gate-note{font-size:13px;color:var(--muted);font-weight:600}
/* In full screen the slim bar (Exit / Progress) stays above the gate so
   the player can still leave full screen — leaving never unlocks play,
   because the normal view is blocked by this same prompt. */
body.wsfs-active:not(.ws-started) .wsfs-bar{position:relative;z-index:31}
body.wsfs-active .ws-band{flex:none;padding:6px 11px;margin:0 0 6px;border-radius:12px}
body.wsfs-active .ws-band h2{font-size:18px}
body.wsfs-active .ws-band .ws-level{font-size:11px}
body.wsfs-active .ws-coins{font-size:12px}
body.wsfs-active .ws-coins b{font-size:18px}
body.wsfs-active .ws-meta{flex:none;flex-wrap:nowrap;margin:0 0 2px;gap:6px}
body.wsfs-active .ws-meta span{padding:3px 9px;font-size:12px;white-space:nowrap}
body.wsfs-active #wsWheelLetters{display:none}
body.wsfs-active .ws-grid-wrap{flex:none;margin:0}
body.wsfs-active .ws-grid{width:calc(var(--wscell)*var(--wsc,3) + (var(--wsc,3) - 1)*6px) !important}
body.wsfs-active .ws-cell{font-size:calc(var(--wscell)*.52)}
body.wsfs-active #wsMsg{flex:none;font-size:12.5px;min-height:18px;margin:2px 0 0}
body.wsfs-active .ws-preview{flex:none;min-height:28px;font-size:20px;margin:2px 0 0}
body.wsfs-active .ws-end{flex:none;margin:6px 0 2px;padding:12px 14px}
body.wsfs-active .ws-wheel-row{display:grid;grid-template-columns:50px minmax(0,1fr) 50px;align-items:center;justify-items:center;flex:1;min-height:0;gap:4px;margin:0;width:100%}
body.wsfs-active .ws-wheel-wrap{order:0;width:var(--wheel);margin:0}
body.wsfs-active .ws-round{width:48px;height:48px}
body.wsfs-active .ws-letter{width:var(--wl);height:var(--wl);margin:calc(var(--wl)/-2) 0 0 calc(var(--wl)/-2);font-size:calc(var(--wl)*.43)}
body.wsfs-active #wsWheelActions{flex:none;display:flex;gap:6px;margin-top:4px;width:100%}
body.wsfs-active #wsWheelActions .btn{flex:1 1 0;min-width:0;padding:8px 3px;font-size:13px;white-space:nowrap}
body.wsfs-active #btnWsFs{display:none}
body.wsfs-active .ws-bonus{display:none}
body.wsfs-active .ws-lb{position:fixed;left:0;right:0;bottom:0;top:auto;height:min(72vh,660px);height:min(72dvh,660px);z-index:70;overflow-y:auto;border-radius:20px 20px 0 0;border-bottom:0;box-shadow:var(--shadow-lg);transform:translateY(103%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;margin:0}
body.wsfs-active.wsfs-progress-open .ws-lb{transform:none;visibility:visible;transition:transform .25s ease}
@media (prefers-reduced-motion: reduce){body.wsfs-active .ws-lb{transition:none}}
@media(max-width:380px){body.wsfs-active .wsfs-bar .sfs-brand small{display:none}body.wsfs-active .wsfs-bar .sfs-back span{display:none}body.wsfs-active .wsfs-bar .sfs-back{padding:7px 11px}body.wsfs-active .ws-wheel-row{grid-template-columns:46px minmax(0,1fr) 46px}body.wsfs-active .ws-round{width:44px;height:44px}.wsfs-user span{display:none}}