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

:root{
  --bg:#000;
  --surface:#0d0d0d;
  --surface2:#161616;
  --surface3:#1f1f1f;
  --border:#2a2a2a;
  --text:#f0ece8;
  --muted:#666;
  --c1:#F07A80;
  --c2:#FCC082;
  --c3:#81A2D4;
  --c4:#B7A8E9;
  --c5:#9FCC9B;
  --c6:#F4B8E4;
  --c7:#7FD4D4;
  --c8:#E8D57A;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  min-height:100vh;
  overscroll-behavior:none;
}

button{cursor:pointer;font-family:inherit;}

.screen{display:none;min-height:100vh;}
.screen.active{display:flex;}
.hidden{display:none!important;}

/* START SCREEN */
#startScreen{
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:32px 24px;
}

.game-title{
  font-size:3rem;
  font-weight:900;
  letter-spacing:-1px;
  text-align:center;
}

.tagline{
  color:var(--muted);
  font-size:0.9rem;
  text-align:center;
  margin-bottom:8px;
}

.menu-divider{
  width:min(280px,80vw);
  height:1px;
  background:var(--border);
  margin:4px 0;
}

.primary-btn{
  width:min(280px,80vw);
  padding:15px;
  border:none;
  border-radius:10px;
  background:var(--surface2);
  color:var(--text);
  font-size:1rem;
  font-weight:600;
  transition:background 0.15s;
  text-align:left;
  padding-left:18px;
}
.primary-btn:hover{background:var(--surface3);}

#difficultyPanel{
  width:min(280px,80vw);
  display:flex;
  flex-direction:column;
  gap:8px;
}

#difficultyPanel h3{
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--muted);
  text-align:center;
  padding-top:4px;
}

.difficulty-btn{
  width:100%;
  padding:13px 16px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text);
  font-size:0.95rem;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:border-color 0.15s, background 0.15s;
}
.difficulty-btn:hover{background:var(--surface2);border-color:#444;}

.diff-meta{
  font-size:0.72rem;
  color:var(--muted);
  font-weight:400;
}

/* HOW TO PLAY */
#howToPlayScreen{
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:16px;
  padding:32px 24px;
}

#howToPlayScreen h2{font-size:1.8rem;font-weight:800;}

.rules{
  max-width:340px;
  width:100%;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.rules li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  line-height:1.5;
  font-size:0.93rem;
}

.rule-num{
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--surface2);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.72rem;
  font-weight:700;
  flex-shrink:0;
  margin-top:2px;
}

.back-btn{
  width:min(280px,80vw);
  padding:14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface2);
  color:var(--text);
  font-size:1rem;
  font-weight:600;
  margin-top:8px;
}
.back-btn:hover{background:var(--surface3);}

/* STATS */
#statsScreen{
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:16px;
  padding:32px 24px;
}

#statsScreen h2{font-size:1.8rem;font-weight:800;}

.stats-grid{
  width:min(300px,90vw);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  text-align:center;
}

.stat-card span{
  display:block;
  font-size:0.7rem;
  color:var(--muted);
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.stat-card strong{font-size:1.6rem;font-weight:800;}

/* GAME SCREEN */
#gameScreen{
  flex-direction:column;
  align-items:center;
  gap: 14px;
  padding:14px;
  padding-bottom:28px;
}

.game-header{
  width:100%;
  max-width:480px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.home-btn{
  background:var(--surface2);
  color:var(--text);
  border:none;
  padding:9px 14px;
  border-radius:8px;
  font-size:0.85rem;
  font-weight:600;
}
.home-btn:hover{background:var(--surface3);}

#puzzleId{
  font-size:0.8rem;
  color:var(--muted);
  font-weight:600;
  letter-spacing:1px;
}

#progress{
  font-size:0.85rem;
  font-weight:600;
  color:var(--muted);
  min-width:40px;
  text-align:right;
}

#grid{
  display:grid;
  border:2px solid var(--border);
  touch-action:none;
  user-select:none;
  width:min(calc(100vw - 28px), 480px);
}

.cell{
  width:100%;
  aspect-ratio:1;
  border:1px solid var(--border);
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:800;
  font-size:clamp(0.55rem, 3.5vw, 1.1rem);
  cursor:pointer;
  transition:background 0.08s;
}

.cell.preview{outline:2px dashed rgba(255,255,255,0.5);outline-offset:-3px;}
.cell.selected-region{box-shadow:inset 0 0 0 3px rgba(255,255,255,0.8);}
.cell.hint-outline{outline:2px dashed #9FCC9B;outline-offset:-3px;}
.cell.check-correct{box-shadow:inset 0 0 0 3px #9FCC9B;}
.cell.check-wrong{box-shadow:inset 0 0 0 3px #F07A80;}

.region-1{background:var(--c1);color:#000;}
.region-2{background:var(--c2);color:#000;}
.region-3{background:var(--c3);color:#000;}
.region-4{background:var(--c4);color:#000;}
.region-5{background:var(--c5);color:#000;}
.region-6{background:var(--c6);color:#000;}
.region-7{background:var(--c7);color:#000;}
.region-8{background:var(--c8);color:#000;}

/* CONTROLS */
.controls{
  width:100%;
  max-width:480px;
  display:flex;
  gap:8px;
}

.controls button{
  flex:1;
  padding:14px 8px;
  border:none;
  border-radius:10px;
  font-size:0.9rem;
  font-weight:700;
  transition:opacity 0.15s;
}
.controls button:disabled{opacity:0.3;cursor:default;}

#restartBtn{background:var(--surface3);color:var(--text);}
#eraseBtn{background:#3d1010;color:#F07A80;}
#nextBtn{background:#0f2050;color:#81A2D4;}
#hintBtn{background:#1a2e1a;color:#9FCC9B;}
#hintBtn:disabled{opacity:0.3;cursor:default;}
#checkBtn{background:#2a1a2a;color:#B7A8E9;}

#message{
  min-height:28px;
  text-align:center;
  font-weight:700;
  font-size:1rem;
}

/* SUCCESS OVERLAY */
#successOverlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.88);
  z-index:100;
  justify-content:center;
  align-items:center;
}
#successOverlay.show{display:flex;}

.success-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:36px 28px;
  text-align:center;
  max-width:300px;
  width:90vw;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.success-emoji{font-size:2.5rem;}
.success-box h2{font-size:1.5rem;font-weight:800;}
.success-box p{color:var(--muted);font-size:0.88rem;}

.success-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}

.success-actions button{
  padding:13px;
  border-radius:8px;
  border:none;
  font-size:0.95rem;
  font-weight:700;
  cursor:pointer;
}

#playNextBtn{background:var(--surface3);color:var(--text);}
#backHomeBtn{background:transparent;border:1px solid var(--border)!important;color:var(--muted);}

@media(max-width:420px){
  .game-title{font-size:2.2rem;}
  .controls button{padding:12px 4px;font-size:0.82rem;}
}