:root{
  --bg:#fafaf7; --panel:#ffffff; --ink:#1a1a1a; --ink-soft:#5c5c58; --ink-faint:#8b8a85;
  --border:#d3d1c7; --accent:#1d6f5a; --accent-soft:#e5f0ec;
  --correct:#61a45a; --present:#a89336; --absent:#787c7e;
  --key-bg:#e2e1dc; --ad-bg:#f5ded4; --ad-border:#e0a888; --ad-ink:#7a3b1c; --radius:10px;
  --toast-bg:#1a1a1a; --toast-text:#fafaf7;
}
:root[data-theme="dark"]{
  --bg:#121213; --panel:#1c1c1e; --ink:#e8e8e6; --ink-soft:#a8a6a3; --ink-faint:#7a7876;
  --border:#3a3a3c; --accent:#4fae8c; --accent-soft:#1d3830;
  --correct:#538d4e; --present:#a89337; --absent:#3a3a3c;
  --key-bg:#3a3a3c; --ad-bg:#3d2a20; --ad-border:#6b4530; --ad-ink:#e0a888; --radius:10px;
  --toast-bg:#e8e8e6; --toast-text:#121213;
}
*{box-sizing:border-box;}
a,a:visited{color:var(--accent);}
a:hover{color:var(--accent);opacity:0.85;}
html{touch-action:manipulation;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  transition:background-color .15s ease,color .15s ease;}

header.site{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--border);background:var(--panel);}
.menu-btn{background:var(--key-bg);border:none;padding:0;flex:0 0 auto;border-radius:9px;
  width:32px;height:32px;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:4px;cursor:pointer;transition:background-color .12s ease;}
.menu-btn:active{background:var(--border);}
.menu-btn span{display:block;width:18px;height:2px;background:var(--ink);border-radius:1px;}
.header-icons{display:flex;gap:6px;flex:0 0 auto;}
.icon-btn{background:var(--key-bg);border:none;padding:0;border-radius:9px;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);cursor:pointer;transition:background-color .12s ease;}
.icon-btn:hover{color:var(--accent);}
.icon-btn:active{background:var(--border);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:7px;
  font-family:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
  font-weight:800;font-size:19px;letter-spacing:0;text-decoration:none;color:var(--ink);}
.logo-text span{color:var(--accent);}
.logo-tile{width:20px;height:20px;border-radius:5px;background:var(--correct);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.2);}
.logo-tile svg{width:12px;height:12px;}

/* Daily page only: logo + date stack together, still centered as one block */
header.site-with-date{padding-top:8px;padding-bottom:8px;}
.site-with-date .logo-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;}
.site-with-date .logo-wrap .logo{position:static;transform:none;display:inline-flex;}
.header-date{font-size:11px;color:var(--ink-faint);margin:2px 0 0;white-space:nowrap;}
nav.site-nav{display:none;flex-direction:column;background:var(--panel);
  border-bottom:1px solid var(--border);position:sticky;top:57px;z-index:19;}
nav.site-nav.open{display:flex;}
nav.site-nav a{padding:13px 16px;border-top:1px solid var(--border);color:var(--ink);
  text-decoration:none;font-size:14px;}
nav.site-nav a:first-child{border-top:none;}
nav.site-nav .nav-htp-btn{width:100%;text-align:left;background:none;border:none;
  padding:13px 16px;border-top:1px solid var(--border);color:var(--ink);
  font-size:14px;font-family:inherit;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;}
nav.site-nav .nav-htp-btn span{color:var(--ink-faint);font-size:13px;}

.ad{background:var(--ad-bg);border:1px dashed var(--ad-border);color:var(--ad-ink);
  display:flex;align-items:center;justify-content:center;font-size:11px;text-align:center;
  border-radius:6px;margin:10px auto;overflow:hidden;line-height:1.4;}
.ad-leaderboard{max-width:728px;height:90px;}
.ad-infeed{max-width:680px;height:100px;margin:16px auto;}
.ad-mobile-anchor{position:fixed;left:0;right:0;bottom:0;height:50px;z-index:30;border-radius:0;border-width:1px 0 0 0;}
@media (min-width:641px){ .ad-mobile-anchor{display:none;} }

main{max-width:680px;margin:0 auto;padding:0 12px;}
main.game-hero{padding-top:8px;padding-bottom:4px;padding-left:6px;padding-right:6px;}
.board-col{display:flex;flex-direction:column;align-items:center;padding-top:8px;position:relative;}
.status-line{font-size:12px;color:var(--ink-soft);margin:6px 0 14px;text-align:center;}

.install-banner{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:50;max-width:460px;margin:0 auto;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:12px 14px;display:flex;align-items:center;gap:10px;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
}
.install-banner-icon{
  flex:0 0 auto;width:36px;height:36px;border-radius:9px;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
}
.install-banner-text{flex:1;font-size:13px;color:var(--ink);line-height:1.4;}
.install-banner-btn{background:var(--accent);color:#fff;border:none;border-radius:8px;
  padding:8px 14px;font-size:13px;cursor:pointer;flex:0 0 auto;white-space:nowrap;}
.install-banner-close{background:none;border:none;font-size:20px;line-height:1;color:var(--ink-faint);
  cursor:pointer;flex:0 0 auto;padding:0 2px;}

/* Ezoic's floating consent-reopen button (#ezPrivacyCenter) is hidden on
   mobile, where it's persistently obtrusive on small screens. The same
   function it calls is also available via a "Privacy settings" link in the
   footer, so consent can still be withdrawn/changed - just not via a
   permanent floating overlay. !important is required since Ezoic sets its
   own display via an inline style attribute, which would otherwise win. */
@media (max-width: 640px){
  #ezPrivacyCenter{display:none !important;}
}

.toast{
  position:absolute;top:-4px;left:50%;transform:translate(-50%,-8px);
  background:var(--toast-bg);color:var(--toast-text);font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:8px;white-space:nowrap;z-index:10;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
}
.toast.show{opacity:1;transform:translate(-50%,0);}


.htp-row{display:grid;grid-template-columns:repeat(5,32px);gap:5px;margin:10px 0 6px;}
.htp-tile{width:32px;height:32px;border:2px solid var(--border);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:16px;border-radius:4px;text-transform:uppercase;
  background:var(--panel);color:var(--ink);}
.htp-tile.correct{background:var(--correct);border-color:var(--correct);color:#fff;}
.htp-tile.present{background:var(--present);border-color:var(--present);color:#fff;}
.htp-tile.absent{background:var(--absent);border-color:var(--absent);color:#fff;}
.htp-explain{font-size:13px;color:var(--ink-soft);margin:0 0 14px;}
.htp-divider{border:none;border-top:1px solid var(--border);margin:14px 0;}

#board{display:grid;grid-template-rows:repeat(6,1fr);gap:5px;margin-bottom:14px;}
.row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;}
.tile{
  width:clamp(48px,17vw,64px);height:clamp(48px,17vw,64px);
  border:2px solid var(--border);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:clamp(20px,6.5vw,28px);border-radius:6px;
  text-transform:uppercase;background:var(--panel);color:var(--ink);
}
.tile.correct{background:var(--correct);border-color:var(--correct);color:#fff;}
.tile.present{background:var(--present);border-color:var(--present);color:#fff;}
.tile.absent{background:var(--absent);border-color:var(--absent);color:#fff;}

@keyframes tileFlip{
  0%{transform:rotateX(0deg);}
  50%{transform:rotateX(90deg);}
  100%{transform:rotateX(0deg);}
}
.tile.flip{animation:tileFlip .5s ease;}
@media (prefers-reduced-motion: reduce){ .tile.flip{animation:none;} }

@keyframes tileBounce{
  0%,20%{transform:translateY(0);}
  40%{transform:translateY(-14px);}
  60%{transform:translateY(0);}
  80%{transform:translateY(-6px);}
  100%{transform:translateY(0);}
}
.tile.bounce{animation:tileBounce .6s ease both;}
@media (prefers-reduced-motion: reduce){ .tile.bounce{animation:none;} }

@keyframes shake{
  10%,90%{transform:translateX(-2px);}
  20%,80%{transform:translateX(4px);}
  30%,50%,70%{transform:translateX(-8px);}
  40%,60%{transform:translateX(8px);}
}
.row.shake{animation:shake 0.35s;}
@media (prefers-reduced-motion: reduce){ .row.shake{animation:none;} }

#keyboard{display:flex;flex-direction:column;gap:6px;width:100%;max-width:460px;}
.krow{display:flex;justify-content:center;gap:5px;}
.key{background:var(--key-bg);border:none;border-radius:6px;padding:0;height:46px;flex:1;
  font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink);min-width:0;}
.key.wide{flex:1.6;font-size:10px;}
.key.correct{background:var(--correct);color:#fff;}
.key.present{background:var(--present);color:#fff;}
.key.absent{background:var(--absent);color:#fff;}

.actions{display:flex;gap:10px;justify-content:center;margin:10px 0 4px;font-size:12px;}
.actions button{background:none;border:1px solid var(--border);border-radius:8px;padding:6px 12px;
  color:var(--ink-soft);cursor:pointer;}

.breadcrumb{max-width:680px;margin:10px auto 0;padding:0 16px;font-size:12px;color:var(--ink-faint);}
.breadcrumb a{color:var(--ink-soft);text-decoration:none;}
.breadcrumb a:hover{color:var(--accent);}

.content-block{max-width:680px;margin:20px auto;padding:14px 16px;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius);}
.content-block h1,.content-block h3{margin:0 0 6px;font-size:16px;}
.content-block p{margin:0 0 8px;font-size:13px;color:var(--ink-soft);line-height:1.55;}
.content-block-faq-item{margin-bottom:14px;}
.content-block-faq-item:last-child{margin-bottom:0;}

.archive-list{max-width:680px;margin:20px auto;padding:0 12px;display:grid;
  grid-template-columns:1fr 1fr;gap:10px;}
.archive-list a{display:block;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px;font-size:12px;color:var(--ink);text-decoration:none;}
.archive-list a span{display:block;color:var(--ink-faint);font-size:11px;margin-top:4px;}