:root{
  --board-size: min(50vmin, 520px);   
  --gap: clamp(8px, 1.2vmin, 14px);   
  --tile-radius: 16px;

  --bg1:#0f2027; --bg2:#203a43; --bg3:#2c5364;
  --tile1:#ffe259; --tile2:#ffa751;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  min-height:100dvh;
  display:grid;
  place-items:center;        
  background:
    radial-gradient(1200px circle at 50% 20%, rgba(255,255,255,.06), transparent 40%),
    linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3));
  color:#fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Poppins", Arial, sans-serif;
  text-align:center;
}

/* ---------- Layout ---------- */
.container{
  width:100%;
  display:grid;
  place-items:center;
  gap:1rem;
  padding:1rem;
}

.title{
  font-size:clamp(22px, 4vmin, 36px);
  font-weight:800;
  letter-spacing:.5px;
}

.game{
  width:var(--board-size);
  aspect-ratio:1/1;                  
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
  padding:var(--gap);
  box-sizing:content-box;            
  background:rgba(255,255,255,.08);
  border-radius:20px;
  backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ---------- Tiles ---------- */
.box{
  display:grid;
  place-items:center;
  aspect-ratio:1/1;               
  border:none;
  border-radius:var(--tile-radius);
  background:linear-gradient(135deg, var(--tile1), var(--tile2));
  box-shadow:0 6px 15px rgba(0,0,0,.3);
  font-size:clamp(20px, 6vmin, 30px);
  font-weight:800;
  color:#2c2c54;
  cursor:pointer;
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.box:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.box:active{ transform:translateY(0); }

/* ---------- Controls & Messages ---------- */
.controls{
  display:flex;
  gap:.75rem;
  justify-content:center;
}

#reset-btn, #new-btn{
  padding:.75rem 1.5rem;
  font-size:1rem;
  font-weight:700;
  border:none;
  border-radius:2rem;
  cursor:pointer;
  background:linear-gradient(135deg, #11998e, #38ef7d);
  color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition:transform .2s ease, filter .2s ease;
}
#reset-btn:hover, #new-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); }

#msg{
  font-size:clamp(18px, 4vmin, 28px);
  color:#ffe259;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}

.msg-container{
  display:grid;
  place-items:center;
  gap:1.5rem;
}

.hide{ display:none !important; }