:root{
  --bg: #efe9d6;
  --card: #fffdf6;
  --accent: #2B9EB3;
  --accent-2: #1f6a73;
  --muted: #8b8b8b;
  --btn-bg: linear-gradient(135deg,#222831,#263238);
  --glass: rgba(255,255,255,0.6);
  --shadow: 0 10px 25px rgba(19,35,47,0.15);
  --round: 14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body {
  background: radial-gradient(circle at 10% 10%, #f7f5ea 0%, var(--bg) 40%, #d7cfb8 100%);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #0f1720;
  -webkit-font-smoothing:antialiased;
  text-align:center;
  padding:2.5rem 1rem;
}

/* Header */
h1{
  font-weight:700;
  letter-spacing:0.4px;
  margin-bottom:1.25rem;
  color:var(--accent-2);
  text-shadow: 0 2px 6px rgba(43,158,179,0.12);
}

/* Game area */
.container{
  height:66vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

.game{
  width: min(66vmin, 480px);
  height: min(66vmin, 480px);
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:12px;
  padding:14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(250,247,240,0.9));
  border-radius: 20px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(34,50,60,0.04);
}

/* Boxes (cells) */
.box{
  background: var(--card);
  border-radius:12px;
  border: 2px solid rgba(31,106,115,0.06);
  box-shadow: 0 6px 14px rgba(31,106,115,0.06) inset, 0 6px 20px rgba(19,35,47,0.07);
  font-size: 8.2vmin;
  font-weight:700;
  color: var(--accent-2);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  user-select:none;
  -webkit-user-select:none;
  outline: none;
}

.box:disabled{
  opacity:0.9;
  cursor:default;
  transform: none;
}

.box:hover:not(:disabled){
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(31,106,115,0.12);
}

/* Message container / overlay shown after win */
.msg-container{
  position: fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  gap:1rem;
  background: linear-gradient(0deg, rgba(15,23,32,0.45), rgba(15,23,32,0.45));
  z-index:1200;
}

.msg-container > #msg{
  background: linear-gradient(90deg,#1f6a73,#2b9eb3);
  color:#fff;
  padding:0.8rem 1.2rem;
  border-radius: 12px;
  font-size: clamp(18px, 4vmin, 28px);
  box-shadow: 0 8px 30px rgba(11,22,26,0.4);
}

/* Buttons */
button{
  font-family:inherit;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  outline:none;
}

/* Primary small buttons (Reset / New / Modal choices) */
.btn-primary, #reset-btn, #new-btn, .modal button{
  padding: 0.9rem 1.2rem;
  font-size: 1rem;
  color:#fff;
  border:none;
  border-radius: 10px;
  min-width: 110px;
  background: var(--btn-bg);
  box-shadow: 0 8px 18px rgba(15,18,20,0.28);
  letter-spacing: 0.2px;
}

#reset-btn, #new-btn{
  margin: 0.9rem 0.45rem;
}

/* Hover / active */
.btn-primary:hover, #reset-btn:hover, #new-btn:hover, .modal button:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(15,18,20,0.32);
  opacity:0.98;
}

.btn-primary:active, #reset-btn:active, #new-btn:active, .modal button:active{
  transform: translateY(0);
}

/* Modal */
.modal{
  position: fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background: rgba(4,11,14,0.45);
  z-index:2000;
  padding: 1rem;
}

.modal-content{
  background: linear-gradient(180deg, #ffffff, #fbfbf8);
  padding:1.5rem 1.75rem;
  border-radius:16px;
  box-shadow: 0 20px 40px rgba(6,18,25,0.28);
  text-align:center;
  max-width:360px;
  width:100%;
  border: 1px solid rgba(31,106,115,0.06);
}

.modal-content h2{
  color:var(--accent-2);
  margin-bottom:0.9rem;
  font-size:1.2rem;
}

/* make modal buttons same style as reset/new */
.modal button{
  margin: 0 0.45rem;
}

/* Responsive tweaks */
@media (max-width:520px){
  .game{gap:8px;padding:10px}
  .box{font-size: 12vw}
  .modal-content{padding:1rem}
  .btn-primary, #reset-btn, #new-btn{min-width:90px;padding:0.7rem 0.85rem}
}

/* utility */
.hide{display:none}