* { box-sizing: border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#0b1020;
  color:#e8ecff;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.app{
  width:min(520px, 100%);
  background:#111a33;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.top h1{ margin:0 0 6px; font-size:22px; }
.status{ margin:0 0 14px; opacity:.9; }

.board{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

.cell{
  aspect-ratio: 1 / 1;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:#0f1730;
  color:#e8ecff;
  font-size:44px;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease;
}

.cell:hover{ transform: translateY(-1px); background:#121d3a; }
.cell:disabled{ cursor:not-allowed; opacity:.85; }

.panel{
  margin-top:14px;
  display:grid;
  gap:12px;
}

.score{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  opacity:.95;
}

.score span{ opacity:.8; margin-right:6px; }

.actions{
  display:flex;
  gap:10px;
}

.actions button{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:#0f1730;
  color:#e8ecff;
  cursor:pointer;
}

.actions button:hover{ background:#121d3a; }

.footer{
  margin-top:20px;
  text-align:center;
  font-size:14px;
  opacity:0.7;
}

.footer a{
  color:#e8ecff;
  text-decoration:none;
}

.footer a:hover{
  text-decoration:underline;
}