:root{
  --bg:#ffffff;
  --ink:#111111;
  --muted:#5a5a5a;

  --tile:#f2f2e8;
  --tileBorder:#e3e3d6;
  --tileSel:#d8d8c8;

  --y:#f6df7a;
  --g:#a8c86a;
  --b:#b9c9f3;
  --p:#b98ad0;

  --btn:#ffffff;
  --btnBorder:#2b2b2b;

  --shadow: 0 6px 20px rgba(0,0,0,.06);
  --font: ui-rounded, "SF Pro Rounded", "Avenir Next Rounded", "Nunito",
          system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); }
.wrap{ max-width:980px; margin:0 auto; padding:18px 16px 26px; }

.header{ display:flex; flex-direction:column; align-items:center; gap:10px; }
h1{ margin:10px 0 0; text-align:center; font-size:34px; font-weight:950; letter-spacing:.2px; }

.stats{
  width:min(720px,100%);
  border:1px solid #e8e8e8;
  border-radius:999px;
  padding:10px 12px;
  background:#fafafa;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  font-size:13px;
  font-weight:900;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  color:var(--muted);
}

.controls{
  width:min(720px,100%);
  margin: 12px auto 12px;
  border:1px solid #e8e8e8;
  border-radius:18px;
  padding:12px 12px;
  background:#fafafa;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.controlRow{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.controlTitle{ font-weight:950; }
.controlValue{ font-weight:950; color:var(--muted); }
.controlHint{ font-weight:850; color:var(--muted); }
input[type="range"]{ width: min(520px, 100%); accent-color:#222; }

.board{ width:min(720px,100%); margin:0 auto; display:grid; gap:12px; }

.solvedArea{ display:grid; gap:10px; }
.solvedBar{
  border-radius:16px;
  padding:14px;
  text-align:center;
  box-shadow:var(--shadow);
}
.solvedBar .cat{ font-weight:950; font-size:16px; text-transform:uppercase; margin-bottom:6px; }
.solvedBar .words{ font-weight:850; font-size:14px; }

.grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
.tile{
  user-select:none;
  background:var(--tile);
  border:1px solid var(--tileBorder);
  border-radius:16px;
  padding:20px 10px;
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:950;
  letter-spacing:.4px;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow: 0 2px 14px rgba(0,0,0,.04);
  -webkit-tap-highlight-color: transparent;
}
.tile.sel{
  background:var(--tileSel);
  border-color:#cfcfbf;
  outline:3px solid rgba(0,0,0,.14);
  transform: translateY(-1px);
}

.mistakesRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--muted);
  font-weight:850;
}
.dots{ display:flex; gap:10px; }
.dot{ width:14px; height:14px; border-radius:999px; background:#d2d2d2; }
.dot.on{ background:#555555; }

.btnRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.btn{
  border-radius:999px;
  padding:14px 18px;
  font-weight:950;
  background:var(--btn);
  border:2px solid var(--btnBorder);
  cursor:pointer;
  min-width:150px;
}
.btn:disabled{ opacity:.45; cursor:not-allowed; }

.toastWrap{ min-height:26px; display:flex; align-items:center; justify-content:center; }
.toast{
  opacity:0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
  background:#f7f7f7;
  border:1px solid #e7e7e7;
  border-radius:999px;
  padding:8px 12px;
  font-weight:950;
  color:#2b2b2b;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.toast.show{ opacity:1; transform: translateY(0); }

.footerMini{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-weight:850;
  font-size:13px;
}
.miniBtnRow{ display:flex; gap:10px; flex-wrap:wrap; }
.miniBtn{
  border-radius:999px;
  padding:10px 12px;
  font-weight:950;
  background:#f7f7f7;
  border:1px solid #e5e5e5;
  cursor:pointer;
}
.danger{ border-color:#c74242; color:#c74242; }