:root{
  --bg:#0b0d10;
  --fg:#e7e9ee;
  --muted:#9aa3b2;
  --tile:#1a1f2a;
  --tileBorder:#2a3242;
  --btn:#161b24;
  --btnBorder:#2a3242;

  --absent:#3a3f4b;
  --present:#b59f3b;
  --correct:#538d4e;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--fg);
}
.wrap{max-width:1100px; margin:0 auto; padding:18px 14px 28px;}
.top{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:flex-end;}
h1{margin:0; font-size:24px; letter-spacing:0.5px}
.sub{color:var(--muted); font-size:13px}
.left{display:flex; flex-direction:column; gap:6px}
.right{display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end}
.label{color:var(--muted); font-size:13px}
.dateInput, .sel{
  background:var(--btn); color:var(--fg);
  border:1px solid var(--btnBorder); border-radius:10px;
  padding:7px 10px;
}
.btn{
  background:var(--btn); color:var(--fg);
  border:1px solid var(--btnBorder); border-radius:10px;
  padding:8px 10px; cursor:pointer;
}
.btn.active{outline:2px solid var(--present)}
.toast{margin:12px 0 8px; min-height:18px; font-weight:700}

main{display:flex; flex-direction:column; gap:14px}

.card{
  border:1px solid var(--btnBorder); border-radius:14px;
  padding:12px; background: rgba(22,27,36,0.35);
}
.cardInner{
  border:1px solid var(--btnBorder); border-radius:14px;
  padding:12px; background: rgba(22,27,36,0.25);
}
.cardTitle{font-weight:900; margin-bottom:6px}
.cardTitleSm{font-weight:900; margin-bottom:6px; font-size:14px}

.playRow{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px}
.guessInput{
  background:#0f131a; color:var(--fg);
  border:1px solid var(--btnBorder); border-radius:10px;
  padding:10px 12px; font-weight:900; letter-spacing:1px;
  text-transform:uppercase;
  min-width: 220px;
}

.grid{display:grid; grid-template-rows:repeat(6,1fr); gap:8px; padding: 10px 0 6px;}
.rowGrid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px;}
.tile{
  height:56px; display:flex; align-items:center; justify-content:center;
  background:var(--tile); border:1px solid var(--tileBorder); border-radius:12px;
  font-size:26px; font-weight:800; text-transform:uppercase; user-select:none;
}
.tile.absent{background:var(--absent); border-color:transparent}
.tile.present{background:var(--present); border-color:transparent}
.tile.correct{background:var(--correct); border-color:transparent}

.controls{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px}
.toggle{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px}

.cols2{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px;
}
@media (max-width: 980px){ .cols2{grid-template-columns:1fr;} }
.cols3{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;
}
@media (max-width: 980px){ .cols3{grid-template-columns:1fr;} }

.box{
  margin-top:8px; border:1px solid var(--btnBorder); border-radius:12px;
  padding:10px; background:#0f131a; max-height:320px; overflow:auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:13px; white-space:pre;
}
.foot{margin-top:14px}