/* css/style.css | v2.0  (full file) */
:root{
  --bg:#111;
  --tile:#000;
  --tile-border:#ccc;
  --good:#46b33e;
  --meh:#b38e20;
  --bad:#b3463e;
  --btn:#932bd9;  
  --locked:#132d45;  
  --btn-hover:#ad4ced;
  --btn-text:#fff8e1;
  --sec:#b38e20;            /* NEW: yellow button */
  --sec-hover:#8c6e18;
  --active-glow:#da9a20;
  --palette-bg:#132d45;
  --grid-gap:4px;
  --max-w:460px;
  font-family:system-ui,apple-system,Segoe UI,Roboto;
}
*{box-sizing:border-box;margin:0;padding:0}

h3 {
	color: var(--meh);
	text-transform: uppercase;
}

/* prevent drag / selection --------------------------------------- */
.logo,img,svg{
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;
}
.controls button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}

/* layout ---------------------------------------------------------- */
body{background:var(--bg);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:clamp(16px,4vh,48px) 4vw;overflow-x:hidden}
#app{width:100%;max-width:var(--max-w)}
.logo{display:block;width:100%;max-width:var(--max-w);height:auto;margin:0 auto 16px}

/* board ----------------------------------------------------------- */
.board{display:grid;gap:var(--grid-gap);width:100%;touch-action:none}
.row{display:grid;gap:var(--grid-gap)}
.row.active .cell{border-color:var(--active-glow);box-shadow:0 0 0 2px var(--active-glow) inset}
.row.inactive .cell:not(.good):not(.meh):not(.bad){background:var(--locked);border-color:var(--locked);color:transparent}
.cell,.palette-btn{width:100%;aspect-ratio:1/1;border:2px solid var(--tile-border);background:var(--tile);border-radius:6px;font-size:clamp(20px,6vw,42px);display:flex;align-items:center;justify-content:center;user-select:none}
.cell.good{background:var(--good)}.cell.meh{background:var(--meh)}.cell.bad{background:var(--bad)}

/* palette --------------------------------------------------------- */
.palette{display:flex;gap:var(--grid-gap);margin:12px auto;padding:6px;background:var(--palette-bg);border-radius:8px;justify-content:center}
.palette-btn{cursor:pointer}

/* buttons --------------------------------------------------------- */
.btn, .btn-sec{background:var(--btn);color:var(--btn-text);border:none;padding:12px 24px;font-weight:700;border-radius:6px;text-transform:uppercase;letter-spacing:.5px;transition:.15s;cursor:pointer}
.btn:disabled{opacity:.5;cursor:default}
.btn:not(:disabled):hover{background:var(--btn-hover)}
.btn-sec{background:var(--sec);color:var(--btn-text)}
.btn-sec:hover{background:var(--sec-hover)}
.controls{display:flex;justify-content:center;gap:var(--grid-gap);margin:12px 0;flex-wrap:wrap}
.controls .btn.half{flex:1 1 calc(50% - var(--grid-gap))}
.hidden{display:none}

/* modal ----------------------------------------------------------- */
.modal{position:fixed;inset:0;background:rgba(12, 0, 21, 0.88);display:flex;align-items:center;justify-content:center}
.modal-box{background:#000;color:var(--btn-text);border: 3px double var(--meh);padding:24px;border-radius:10px;max-width:0px;min-width: 400px;text-align:center}
.modal-box h3{margin-bottom:12px;font-size:1.4em}
.modal-box p{margin-bottom:8px}
.modal-box button{margin-top:12px}

/* misc ------------------------------------------------------------ */
.timer{margin-top:8px;font-size:24px;opacity:.9;text-align:center; color: #FFF;}
#instructions{background:var(--tile);border-radius:8px;padding:20px;margin-top:12px; color:var(--btn-text); text-align: center;}
#instructions ul {list-style: none; margin: 10px auto 0px auto;}
.toggle-inst{display:block;margin:20px auto 0;text-align:center;text-decoration:underline;cursor:pointer; color:var(--meh); text-decoration: none;}
.textarea-lg{font-size:16px}

/* current-streak display ----------------------------------------- */
.streak{
  margin-top:4px;
  font-size:20px;
  opacity:.9;
  text-align:center;
  color:#FFF;        /* white so it’s visible on the dark BG */
}

/* mobile ≤600 ----------------------------------------------------- */
@media (max-width:600px){
  :root{--max-w:320px}
  .cell,.palette-btn{font-size:clamp(14px,4vw,28px)}
}

/* mobile wide‑tile ≤480 ------------------------------------------ */
@media (max-width:480px){
  :root{--max-w:320px;--cell-h:44px;--grid-gap:2px}
  .cell,.palette-btn{aspect-ratio:auto;height:var(--cell-h);font-size:clamp(18px,6vw,32px)}
  .row{grid-auto-rows:var(--cell-h)}
  .palette{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)}
}