:root{
  --bg:#f6f7fb; --panel:#ffffff; --text:#0f172a; --muted:#64748b;
  --border:#e5e7eb; --grid:#e9edf3; --accent:#2563eb; --success:#16a34a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* layout */
.container{max-width:960px;margin:0 auto;padding:20px}
.header{text-align:center;padding:32px 20px 12px}
.header h1{margin:0;font-weight:800;letter-spacing:.2px;font-size:40px}
.sub{margin:6px 0 0;color:var(--muted)}

/* cards/panels */
.panel{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;
  padding:16px;margin:16px 0
}
.panel-title{margin:0 0 10px;font-size:18px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

input,button{font:inherit}
input{
  width:100%;background:#fff;color:var(--text);
  border:1px solid var(--border);border-radius:10px;padding:10px 12px
}
button{
  appearance:none;border:1px solid var(--border);background:#fff;color:var(--text);
  padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:600
}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.hint{color:var(--muted);font-size:12px;margin-top:8px}

/* board */
.board-wrap{position:relative;margin:24px auto 32px;max-width:720px}
.banner{
  position:sticky;top:10px;z-index:5;text-align:center;
  background:linear-gradient(90deg,var(--accent),var(--success));color:#fff;
  font-weight:800;padding:10px 12px;border-radius:12px;letter-spacing:1.5px
}
.hidden{display:none}

.board{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  background:var(--grid);padding:10px;border-radius:16px;
  box-shadow:inset 0 10px 30px rgba(0,0,0,.06);
  min-height: 240px; /* so area is visible while JS builds */
}
.cell{
  background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px;
  min-height:92px;display:flex;align-items:center;justify-content:center;
  text-align:center;cursor:pointer;user-select:none;font-size:14px;line-height:1.2;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease
}
.cell:hover{transform:translateY(-1px)}
.cell.checked{background:var(--success);color:#fff;border-color:var(--success)}

.board-counters{
  display:flex;justify-content:center;gap:24px;
  color:var(--muted);font-size:14px;margin:12px 0 0
}
.board-counters strong{color:var(--text)}

/* share results */
.share-row{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  margin:10px 0
}
.opt{display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.share-input{min-width:220px}

/* footer */
.footer{text-align:center;color:var(--muted);padding:24px 20px 40px}

/* mobile */
@media (max-width:640px){
  .container{padding:14px}
  .header h1{font-size:28px}
  .panel{padding:12px;border-radius:14px}
  .board-wrap{max-width:100%}
  .board{gap:6px;padding:8px;border-radius:12px}
  .cell{min-height:64px;padding:10px;font-size:13px;border-radius:12px}
  .board-counters{gap:16px;font-size:13px}
}
@media print{
  button,.panel:nth-last-of-type(1),.banner{display:none!important}
  .cell{height:2in}
}