* { box-sizing: border-box; }
:root {
  --ink:#20242a;
  --muted:#68717d;
  --paper:#fffdf8;
  --panel:#f4f0e8;
  --line:#c9c1b3;
  --accent:#315c4c;
  --accent2:#d6a84f;
  --wrong:#b64d46;
  --right:#3d795c;
}
body {
  margin:0; background:#e9e4da; color:var(--ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.app { max-width:1100px; margin:0 auto; padding:28px 22px 34px; }
.hero { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; }
h1 { font-family:Georgia,serif; font-size:clamp(38px,6vw,64px); line-height:.9; margin:0 0 10px; letter-spacing:-2px; }
.hero p { margin:0; color:var(--muted); font-size:16px; }
.controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.controls label { color:var(--muted); font-weight:650; }
select, button {
  border:1px solid var(--line); border-radius:8px; padding:10px 13px;
  background:white; font:inherit; cursor:pointer;
}
button:hover:not(:disabled) { transform:translateY(-1px); }
.secondary { background:var(--panel); }
.game { display:grid; grid-template-columns:minmax(300px,560px) 1fr; gap:30px; align-items:start; }
.board-wrap { background:var(--paper); padding:18px; border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 25px #0000000b; }
.status { min-height:24px; font-weight:700; color:var(--accent); margin-bottom:10px; }
.status.error { color:var(--wrong); }
.status.success { color:var(--right); }
.grid { display:grid; width:min(100%,520px); aspect-ratio:1; margin:auto; background:#15181b; gap:1px; border:2px solid #15181b; }
.cell { position:relative; background:#fffdf8; min-width:0; }
.cell.block { background:#15181b; }
.cell input {
  width:100%; height:100%; border:0; outline:0; padding:15% 3% 0;
  background:transparent; text-align:center; font-weight:800; font-size:clamp(16px,3.4vw,29px);
  text-transform:uppercase; color:var(--ink); caret-color:var(--accent);
}
.cell input:focus { box-shadow:inset 0 0 0 3px var(--accent2); }
.cell .number { position:absolute; top:2px; left:3px; font-size:clamp(8px,1.5vw,12px); font-weight:700; color:#4b5258; pointer-events:none; }
.cell.correct { background:#e6f2e9; }
.cell.incorrect { background:#f9dfdc; }
.check { width:100%; margin-top:14px; background:var(--accent); color:white; border-color:var(--accent); font-weight:750; }
.check:disabled { opacity:.45; cursor:not-allowed; }
.clues { display:grid; grid-template-columns:1fr; gap:18px; }
.clues section { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
h2 { font-family:Georgia,serif; margin:0 0 10px; font-size:25px; }
ol { margin:0; padding:0; list-style:none; }
.clue-list { margin:0; }
li { padding:5px 4px; cursor:pointer; line-height:1.35; border-radius:6px; }
li:hover { background:#eee9df; }
li.active { background:#e7dfce; font-weight:700; }
footer { display:flex; justify-content:space-between; gap:15px; color:var(--muted); font-size:13px; padding:16px 2px 0; }
@media (max-width:780px) {
  .hero { align-items:start; flex-direction:column; }
  .game { grid-template-columns:1fr; }
  .clues { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) {
  .app { padding:18px 10px 25px; }
  .board-wrap { padding:10px; }
  .clues { grid-template-columns:1fr; }
  .cell input { padding-top:18%; }
}

.daily-badge {
  display:inline-flex;
  align-items:center;
  padding:10px 13px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
  color:var(--accent);
  font-weight:750;
}

.share {
  width:100%;
  margin-top:10px;
  background:var(--accent2);
  color:var(--ink);
  border-color:var(--accent2);
  font-weight:750;
}
.share[hidden] { display:none; }