:root{
  --bg:#f7fafc; --card:#ffffff; --ink:#111827; --muted:#6b7280; --accent:#2563eb;
  --ok:#16a34a; --bad:#ef4444; --border:#e5e7eb; --shadow:0 2px 8px rgba(0,0,0,.06);
}

/* Universal reset-ish */
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink)}

/* Shared containers */
.wrap{max-width:1100px;margin:0 auto;padding:24px}
.lead{color:var(--muted)}

/* Unified Home button */
.home-btn{
  display:inline-block;
  padding:8px 14px;
  background:var(--accent);
  color:#fff !important;
  text-decoration:none !important;
  border-radius:10px;
  font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.home-btn:hover{ transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,.18); }
.home-btn:active{ transform:translateY(0); }

/* Cards & badges */
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}
.badge{border:1px solid var(--border);background:#f8fafc;border-radius:999px;padding:6px 10px;font-weight:600}
.badge strong{font-weight:700}
.muted{color:var(--muted)}

/* Tables / inputs for grids */
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px;background:#fff}
table{width:100%;border-collapse:collapse;text-align:center}
thead th{position:sticky;top:0;background:#f3f4f6;z-index:2}
th,td{padding:8px;border-top:1px solid var(--border)}
tbody th{position:sticky;left:0;background:#f3f4f6;z-index:1}

input.cell{width:64px;height:44px;border:1px solid var(--border);border-radius:10px;text-align:center;font-weight:600;font-size:18px}
input.cell:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.ok{outline:2px solid var(--ok)}
.bad{outline:2px solid var(--bad)}
@media (max-width:640px){
  input.cell{width:56px;height:48px;font-size:18px}
  th,td{padding:6px}
}

/* Utility */
.header-flex{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:16px}

/* Light-only page background */
:root{ color-scheme: light; }
body{ background: linear-gradient(var(--card), var(--bg)); color: var(--ink); }

/* High-contrast marks for Tic-Tac-Toe */
.cell{ color: var(--ink) !important; font-weight:800 !important; text-shadow: 0 1px 0 rgba(255,255,255,.8), 0 0 3px rgba(0,0,0,.35); }