/* Frontend styles for the Wordle Codebreaker app.
   Contains layout, tile styling, controls and simple responsive rules.
   Keep this file concise — structural and theme-related variables live
   in the :root block below. */
:root{
  --bg: #0f1724;
  --card: #0b1220;
  --text: #e6eef8;
  --muted: #9fb0c8;
  --gray: #6b7280;
  --green: #16a34a;
  --yellow: #f59e0b;
}

*{box-sizing:border-box}
body{
  background: linear-gradient(180deg,var(--bg),#071024);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  margin:0; padding:24px; min-height:100vh; display:flex; align-items:center; justify-content:center;
}
.container{
  width:100%; max-width:720px; background:var(--card); padding:24px; border-radius:12px; box-shadow:0 8px 30px rgba(2,6,23,0.6);
}


.page-layout{
  max-width:1200px;
  margin:80px auto;
  display:flex;
  gap:2rem;
  align-items:stretch;
  padding:0 18px;
}
.solver-panel{ flex:2 }
#aboutSolver{ flex:1 }
.container h1{margin:0 0 8px 0}
.instructions{color:var(--muted); margin:0 0 18px 0}

#history{display:flex; flex-direction:column; gap:12px; margin-bottom:18px}
.guess-row{display:flex; align-items:center; gap:12px}
.word-label{width:110px; color:var(--muted); font-weight:600}
.tiles{display:flex; gap:8px}

.tile{
  width:50px; height:50px; display:flex; align-items:center; justify-content:center; border-radius:6px; font-weight:800; font-size:18px; cursor:pointer; user-select:none; margin:4px; box-shadow:0 1px 0 rgba(0,0,0,0.2); transition:transform .08s ease, box-shadow .08s ease;
}
.tile:hover{ transform:scale(1.04); box-shadow:0 4px 14px rgba(0,0,0,0.25); }
.tile.gray{ background:#787c7e; color:#ffffff; }
.tile.yellow{ background:#c9b458; color:#ffffff; }
.tile.green{ background:#6aaa64; color:#ffffff; }

.letter{  display:none }

.controls{display:flex; align-items:center; gap:16px}
#nextGuessBtn{background:#0ea5a3; color:#021017; padding:10px 14px; border-radius:8px; border:none; cursor:pointer; font-weight:700}
#status{margin:0; color:var(--muted)}

#correctGuessBox{ display:none; align-items:center; gap:8px; margin-left:8px }
#correctGuessBox span{ color:var(--muted); font-size:13px }
#correctGuessBox button{ background:transparent; border-radius:6px; padding:6px 8px; border:none; cursor:pointer; font-weight:700 }
#correctGuessBox #correctYesBtn{ background:#16a34a; color:#fff }
#correctGuessBox #correctNoBtn{ background:#6b7280; color:#fff }


#resetBtn{background:#ef4444;color:white;padding:8px 12px;border-radius:8px;border:none;cursor:pointer;font-weight:700}


.guess-number{ font-weight:800; margin-right:10px; color: #cbd5e1 }


#candidatesBox{ margin-top:16px; background:rgba(255,255,255,0.03); padding:12px; border-radius:8px; box-shadow:0 6px 18px rgba(2,6,23,0.6); }
#candidatesBox h3{ margin:0 0 6px 0; font-size:14px; color:var(--text); font-weight:700 }
.candidate-list{ font-size:13px; color:var(--muted); margin:0 }





#statusDetail{ margin-top:8px; color:var(--muted); font-size:13px }


.tile.celebrate{ animation: popGreen 0.3s ease-out; }
@keyframes popGreen{
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}


#nextGuessBtn.btn-disabled,
#nextGuessBtn:disabled{
  opacity:0.65; cursor:default; pointer-events:none;
}


#aboutSolver{ margin-top:0; background:rgba(255,255,255,0.02); padding:12px; border-radius:8px; font-size:13px; color:var(--muted) }
#aboutSolver h3{ margin:0 0 6px 0; color:var(--text); font-size:15px }




.divider{
  width:1px;
  background:rgba(255,255,255,0.06);
  align-self:stretch;
  border-radius:1px;
}

@media (max-width:540px){
  .word-label{display:none}
}

@media (max-width:900px){
  .page-layout{ flex-direction:column; margin:24px auto }
  #aboutSolver{ margin-top:18px }
  .divider{ display:none }
}