:root {
  --bg: #faf8f2;
  --board-bg: #d8d2c4;
  --cell-bg: #ffffff;
  --wall: #3d3a33;
  --tile: #f5e7c8;
  --tile-border: #d9c48f;
  --ink: #2b2820;
  --muted: #8a8574;
  --green: #4a9d5f;
  --green-soft: #ddefdf;
  --rose: #d05a5a;
  --rose-soft: #f7dede;
  --gold: #d9a520;
  --gold-soft: #f7ecc9;
  --blue-soft: #dceaf7;
  --invalid: #fbe3e3;
  --invalid-ink: #b43a3a;
}
/* touch-action on EVERY element: iOS double-tap zoom can slip past a body-level hint */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* plain height:100%, on purpose: on iOS this leaves a little natural scroll
   slack under the collapsing toolbar, and a real user scroll is also what
   heals Chrome iOS's draws-under-the-toolbar bug (see memory notes). Do not
   "fix" this to svh/fixed/snap-to-top — that removes the heal gesture. */
html, body { height: 100%; overscroll-behavior: none; }
body { touch-action: manipulation; }
body.locked { overflow: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}
header {
  width: 100%;
  max-width: 520px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
}
header h1 { font-size: 1.25rem; letter-spacing: .5px; font-weight: 800; }
header h1 span { color: var(--green); }
.home {
  border: none;
  background: none;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px 0 0;
  vertical-align: baseline;
}
.home:hover { color: var(--ink); }
.hbtns { display: flex; gap: 8px; align-items: center; }
.hbtns button {
  border: 1.5px solid #cfc9b8;
  background: #fff;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.hbtns button:hover { background: #f2eee2; }
.subbar {
  width: 100%;
  max-width: 520px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 18px 8px;
  font-size: .85rem;
  color: var(--muted);
}
#parInfo { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.nav { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
#dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 0 10px;
}
.dotrow { display: flex; gap: 5px; align-items: center; }
.dotlabel {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--muted);
  width: 24px;
  text-align: right;
  text-transform: uppercase;
}
.dot {
  width: 21px; height: 21px;
  border-radius: 50%;
  border: none;
  background: #e2dccb;
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.dot.next { background: var(--gold); }
.dot.done.under, .dot.done.even { background: var(--green); }
.dot.done.over { background: var(--rose); }
.dot.cur { outline: 2.5px solid #4a90d9; outline-offset: 1px; }
.dot.locked { opacity: .35; cursor: default; }
#scorecard { font-size: .72rem; font-weight: 600; color: var(--muted); }

#board {
  display: grid;
  gap: 4px;
  background: var(--board-bg);
  padding: 6px;
  border-radius: 12px;
  touch-action: manipulation;
}
.cell {
  position: relative;
  width: var(--cs);
  height: var(--cs);
  background: var(--cell-bg);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cs) * .52);
  font-weight: 800;
  cursor: pointer;
  color: var(--ink);
}
.cell.wall { background: var(--wall); cursor: default; border-radius: 4px; }
.cell.start { box-shadow: inset 0 0 0 3px var(--green); background: var(--green-soft); }
.cell.end { box-shadow: inset 0 0 0 3px var(--rose); background: var(--rose-soft); }
.cell.way { box-shadow: inset 0 0 0 3px var(--gold); background: var(--gold-soft); }
.cell.slot { background: var(--blue-soft); }
.cell.start.slot { background: #cfe8d4; }
.cell.end.slot { background: #f0d2d2; }
.cell.way.slot { background: #efe1b4; }
.cell.sel { outline: 3px solid #4a90d9; outline-offset: -3px; z-index: 2; }
.cell.filled {
  background: var(--tile);
  box-shadow: inset 0 0 0 1.5px var(--tile-border), 0 1.5px 0 rgba(0,0,0,.12);
  font-family: Georgia, "Times New Roman", serif;
}
.cell.filled.start { box-shadow: inset 0 0 0 3px var(--green), 0 1.5px 0 rgba(0,0,0,.12); }
.cell.filled.end { box-shadow: inset 0 0 0 3px var(--rose), 0 1.5px 0 rgba(0,0,0,.12); }
.cell.filled.way { box-shadow: inset 0 0 0 3px var(--gold), 0 1.5px 0 rgba(0,0,0,.12); }
.cell.bad { background: var(--invalid); color: var(--invalid-ink); }
.cell.pre .glyph { color: #6f6a58; }
.cell .tag {
  position: absolute;
  top: 1px;
  left: 4px;
  font-size: calc(var(--cs) * .19);
  font-weight: 800;
  letter-spacing: .3px;
}
.cell.start .tag { color: var(--green); }
.cell.end .tag { color: var(--rose); }
.cell.way .tag { color: var(--gold); }
.cell.pop .glyph { animation: pop .12s ease-out; display:block; }
@keyframes pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cell.pop .glyph { animation: none; } }

#hint {
  max-width: 520px;
  padding: 6px 16px 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}
#hint:empty { display: none; }
#checks {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  justify-content: center;
  align-items: center;
  padding: 10px 14px 4px;
  font-size: .8rem;
  min-height: 34px;
}
#checks .chk { color: var(--muted); font-weight: 600; }
#checks .chk.ok { color: var(--green); }
#checks .chk.err { color: var(--invalid-ink); }
#checks .mark { display: inline-block; width: 1.2em; text-align: center; }
/* the modal .nextDaily styling must not leak into the checks-row countdown */
#checks .nextDaily { margin: 0; font-size: inherit; font-weight: 600; }
.lbshare { display: flex; justify-content: center; padding: 8px 0 2px; }
#checks #btnRowShare, .lbshare #btnRowShare {
  border: 1.5px solid #cfc9b8;
  background: #fff;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
#checks #btnRowShare:hover { background: #f2eee2; }

#kb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 6px 18px;
  width: 100%;
  max-width: 520px;
}
.krow { display: flex; justify-content: center; gap: 5px; }
.key {
  flex: 1 1 0;
  min-width: 0;
  max-width: 46px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: #e4dfd2;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.key:active { background: #cfc8b4; }
.key.used { background: var(--green); color: #fff; }
.key.wide { flex: 1.5 1 0; max-width: 66px; font-size: 1.15rem; }
#checks #btnSubmit {
  border: none;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  padding: 6px 20px;
  cursor: pointer;
}
#checks #btnSubmit:hover { background: #3f8a52; }

/* short viewports (phones): tighten the fixed UI so the board gets more room */
@media (max-height: 740px) {
  header { padding: 8px 16px 4px; }
  header h1 { font-size: 1.1rem; }
  .subbar { padding-bottom: 4px; }
  #dots { padding-bottom: 6px; gap: 4px; }
  #checks { padding: 6px 14px 2px; min-height: 28px; }
  #kb { padding: 6px 6px 10px; gap: 5px; }
  .key { height: 46px; }
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(30,28,20,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 16px;
}
#helpOverlay, #resetOverlay { z-index: 20; }
#introOverlay { background: var(--bg); }
.intro {
  padding: 20px 26px;
  max-width: 340px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.introTitle { font-size: 1.9rem; font-weight: 900; letter-spacing: .5px; }
.introTitle span { color: var(--green); }
.introSub { color: var(--muted); font-size: .95rem; margin-bottom: 14px; }
.bigbtn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 15px 12px;
  border: 1.5px solid #cfc9b8;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  color: var(--ink);
}
.bigbtn:hover { background: #f2eee2; }
.bigbtn .big { font-size: 1.05rem; font-weight: 800; }
.bigbtn .small { font-size: .76rem; color: var(--muted); font-weight: 600; }
.bigbtn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.bigbtn.primary:hover { background: #3f8a52; }
.bigbtn.primary .small { color: rgba(255,255,255,.85); }
.introHome {
  margin-top: 8px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}
.introHome:hover { color: var(--ink); }
.iabNudge {
  background: var(--gold-soft);
  border: 1.5px solid var(--gold);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .78rem;
  line-height: 1.45;
  text-align: left;
  color: var(--ink);
}
.iabNudge button {
  display: block;
  margin: 6px 0 0 auto;
  border: none;
  background: none;
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.introAbout { font-size: .7rem; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.introVersion { font-size: .68rem; color: var(--muted); opacity: .7; }
.overlay.hidden { display: none; }
.modal {
  background: #fff;
  border-radius: 14px;
  padding: 24px 22px;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.modal h2 { margin-bottom: 10px; font-size: 1.3rem; }
.modal p, .modal li { font-size: .92rem; line-height: 1.45; color: #4a463a; margin-bottom: 8px; }
.modal ul { padding-left: 20px; margin-bottom: 10px; }
.eg { display: flex; gap: 3px; justify-content: center; margin: 8px 0 4px; }
.eg2 { display: grid; grid-template-columns: repeat(6, 28px); }
.egc { transition: opacity .18s ease-out, transform .18s ease-out; }
.egc b { font: inherit; transition: opacity .18s ease-out; }
.egc.hide { opacity: 0; transform: scale(.6); }
/* START/END target cells stay on screen while animating — only their letter hides */
.egc.s.hide, .egc.e.hide { opacity: 1; transform: none; }
.egc.s.hide b, .egc.e.hide b { opacity: 0; }
.egc {
  width: 28px; height: 28px; border-radius: 5px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1.5px var(--tile-border), 0 1.5px 0 rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, "Times New Roman", serif; font-weight: bold; font-size: .95rem; color: var(--ink);
}
.egc.s { box-shadow: inset 0 0 0 3px var(--green), 0 1.5px 0 rgba(0,0,0,.12); background: var(--green-soft); }
.egc.e { box-shadow: inset 0 0 0 3px var(--rose), 0 1.5px 0 rgba(0,0,0,.12); background: var(--rose-soft); }
.modal .egCap { text-align: center; font-size: .8rem; color: var(--muted); }
.modal .swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 2px; vertical-align: -1px;
}
.modal .btnrow { display: flex; gap: 10px; margin-top: 14px; }
.modal button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  background: #eee9dc;
  color: var(--ink);
}
.modal .btnrow a {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  background: #eee9dc;
  color: var(--ink);
}
.modal .btnrow a[hidden] { display: none; }
.modal button.primary { background: var(--green); color: #fff; }
.modal button.warn { background: var(--rose-soft); color: var(--invalid-ink); }
.modal button.danger { background: var(--rose); color: #fff; }
#winStats { font-size: 1.05rem; font-weight: 700; margin: 8px 0 2px; }
#winWords { font-size: .85rem; color: var(--muted); margin-bottom: 4px; }
#winExtra { margin-top: 10px; }
.statline { font-size: .9rem; font-weight: 700; margin-bottom: 8px; }
/* fixed row height: emoji labels (🦅🐦) have a taller line box than "E"/"+1",
   so letting content size the row made the distribution bars unevenly spaced */
.statrow { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; height: 18px; }
.statlbl {
  width: 46px; height: 100%; font-size: .78rem; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
  line-height: 1; display: flex; align-items: center; justify-content: flex-end;
}
.statbar { flex: 1; height: 14px; background: #f0ece0; border-radius: 4px; overflow: hidden; display: flex; }
.statbar div { height: 100%; border-radius: 4px; min-width: 2px; }
.statbar .live { background: var(--green); }
.statbar .arch { background: #b7d8bd; }
.statlegend { font-size: .68rem; color: var(--muted); font-weight: 700; margin-top: 6px; }
.statlegend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.statlegend .swl { background: var(--green); }
.statlegend .swa { background: #b7d8bd; margin-left: 8px; }
.statn .an { font-style: normal; color: #9dbfa4; font-weight: 700; margin-left: 2px; font-size: .7rem; }
.statn { width: 22px; line-height: 1; font-size: .78rem; font-weight: 700; color: var(--muted); }
.nextDaily { margin-top: 10px; font-size: .85rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.syncInfo { font-size: .82rem; color: var(--muted); line-height: 1.4; margin-bottom: 4px; }
#statsBody .statline { margin-top: 4px; }
.favtitle { margin-top: 14px; }
.favwords { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.favword {
  background: #f0ece0;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: .78rem;
  font-weight: 800;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}
.favword b { color: var(--muted); font-weight: 700; margin-left: 4px; font-family: -apple-system, sans-serif; }

/* the big menu buttons are now real links (separate pages); render like buttons */
a.bigbtn, a.home { text-decoration: none; }

/* ---------- archive calendar ---------- */
.hbtn-link { text-decoration: none; }
.calnav {
  width: 100%; max-width: 380px; display: flex; align-items: center;
  justify-content: space-between; padding: 10px 6px 6px;
}
.calnav span { font-weight: 800; font-size: 1.05rem; }
.calnav button {
  border: 1.5px solid #cfc9b8; background: #fff; border-radius: 10px;
  width: 40px; height: 36px; font-size: 1.2rem; font-weight: 800;
  color: var(--ink); cursor: pointer;
}
.calnav button:disabled { opacity: .3; cursor: default; }
.cal {
  width: 100%; max-width: 380px; display: grid;
  grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 4px 6px;
}
.calhead { text-align: center; font-size: .68rem; font-weight: 800; color: var(--muted); padding: 4px 0; }
.calcell {
  aspect-ratio: 1; border-radius: 9px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  text-decoration: none; font-size: .8rem; color: var(--muted);
}
.calcell b { font-size: .8rem; font-weight: 800; line-height: 1; }
.calcell i { font-style: normal; font-size: .68rem; font-weight: 800; line-height: 1; }
.calcell.dim { color: #cfc9b8; }
.calcell.blank { visibility: hidden; }
.calcell.done { background: var(--green); color: #fff; box-shadow: 0 1.5px 0 rgba(0,0,0,.12); }
.calcell.play { background: var(--gold-soft); color: var(--ink); box-shadow: inset 0 0 0 2px var(--gold); }
.calcell.play i { color: var(--gold); }
.calcell.today { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2.5px #4a90d9; }
.calcell.today i { color: #4a90d9; }
.caltally { padding: 12px; font-size: .82rem; font-weight: 700; color: var(--muted); }

/* ---------- daily leaderboard panel ---------- */
.lb { width: 100%; max-width: 420px; padding: 6px 16px 10px; }
.lbhead { font-size: .78rem; font-weight: 800; color: var(--muted); padding: 4px 0 6px; text-align: center; }
.lbempty { font-size: .8rem; color: var(--muted); text-align: center; padding: 4px 0; }
.lbrow {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 10px;
  background: #fff; border: 1.5px solid #e6e1d3; border-radius: 8px; margin-bottom: 4px;
  font-size: .85rem;
}
.lbrow .lbrank { font-weight: 800; color: var(--muted); min-width: 18px; }
.lbrow .lbname { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.lbrow .lbscore { font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.lbrow .lbletters { font-size: .78rem; color: var(--muted); }
.lbme { text-align: center; font-size: .8rem; font-weight: 700; color: var(--ink); padding: 6px 0 2px; }
.lbme a { color: var(--green); }
#aliasIn {
  flex: 2; min-width: 120px; border: 1.5px solid #cfc9b8; border-radius: 8px;
  padding: 8px 10px; font-size: .85rem; font-family: inherit;
}

/* alias gets its own row under Copy code / Unlink */
#syncBtns { flex-wrap: wrap; }
.aliasrow { display: flex; gap: 10px; flex-basis: 100%; margin-top: 8px; }
.aliasrow button { flex: 0 0 auto; padding: 8px 16px; }
.lbstats { padding: 0; max-width: none; }

.lbpage { max-width: 420px; padding-top: 2px; }

.lbrow .lbname.lbanon { color: var(--muted); font-weight: 600; font-style: italic; }

/* ---------- solution viewer ---------- */
.lbrow.lbview { cursor: pointer; }
.lbrow .lbeye { font-size: .72rem; opacity: .55; }
.solmodal { max-width: 380px; width: 100%; }
/* the viewer IS the game board, scaled down: same .cell classes apply */
.solgrid {
  display: grid; gap: 4px; background: var(--board-bg); padding: 6px;
  border-radius: 12px; margin: 10px auto 4px; width: max-content;
}
.solgrid .cell { cursor: default; }