:root{
  --cream:#FBF6EA;
  --ink:#2B2013;
  --ink-soft:#6B5A44;
  --line:#D8C7A4;
  --amber:#B5601F;
  --amber-light:#D98A3D;
  --soil-dark:#3A2415;
  --safe:#3F6E52;
  --safe-bg:#E3ECE1;
  --danger:#A6362B;
  --danger-bg:#F2E0DB;
  --white-piece:#EFE3C7;
  --white-piece-line:#4A3220;
  --black-piece:#241A10;
  color-scheme: light;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--cream);
  color:var(--ink);
  font-family:"IBM Plex Mono", "SF Mono", Consolas, monospace;
  -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; }
button:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

.wrap{ max-width:640px; margin:0 auto; padding:24px 20px 48px; }

.back-link{ display:inline-block; font-size:12px; color:var(--ink-soft); text-decoration:underline; margin-bottom:14px; }

h1{
  font-family:"Big Shoulders Display", sans-serif;
  text-transform:uppercase; letter-spacing:0.02em;
  font-size:clamp(1.7rem,4vw,2.3rem); font-weight:800;
  margin:0 0 4px; text-wrap:balance;
}
.subtitle{ font-size:12.5px; color:var(--ink-soft); margin:0 0 18px; }

.screen{ display:flex; flex-direction:column; gap:16px; }

.stat-bar{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--ink-soft);
}
.stat-bar b{ color:var(--ink); font-variant-numeric:tabular-nums; }

.progress-track{
  height:6px; border-radius:6px; background:var(--line); overflow:hidden;
}
.progress-fill{
  height:100%; background:var(--amber); border-radius:6px;
  transition: width .3s ease;
}

.prompt-card{
  background:var(--soil-dark); color:var(--cream);
  border-radius:16px; padding:26px 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  box-shadow: 0 4px 18px rgba(58,36,21,0.18);
}
.prompt-hint{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber-light); margin:0; }
.prompt-word{
  font-family:"Big Shoulders Display", sans-serif;
  font-size:clamp(1.8rem,6vw,2.6rem); font-weight:800; margin:0;
  text-transform:uppercase; letter-spacing:0.02em;
}

.slots{
  display:flex; justify-content:center; gap:8px; flex-wrap:wrap;
}
.slot{
  width:42px; height:48px; border-radius:8px;
  border:2px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:"Big Shoulders Display", sans-serif;
  font-size:1.4rem; font-weight:800; color:var(--ink);
}
.slot.filled{ border-color:var(--safe); background:var(--safe-bg); }
.slot.pop{ animation: pop .25s ease; }
@keyframes pop{ 0%{ transform:scale(0.6); } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); } }

.tiles{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  padding:8px 0;
}
.tile{
  width:52px; height:52px; border-radius:10px;
  border:1px solid var(--white-piece-line); background:var(--white-piece);
  font-family:"Big Shoulders Display", sans-serif;
  font-size:1.5rem; font-weight:800; color:var(--white-piece-line);
  cursor:pointer;
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.4), 0 3px 4px rgba(43,32,19,0.25);
  transition: transform .1s ease;
}
.tile:hover{ transform:translateY(-2px); }
.tile:active{ transform:scale(0.94); }
.tile:disabled{ opacity:0; pointer-events:none; }
.tile.wrong{ animation: shake .3s ease; }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); background:var(--danger-bg); }
  75%{ transform:translateX(6px); background:var(--danger-bg); }
}

.actions{ display:flex; justify-content:center; gap:10px; }
.btn{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:8px; padding:10px 18px; cursor:pointer; font-size:13px;
  font-weight:500;
}
.btn.primary{ background:var(--amber); border-color:var(--amber); color:var(--cream); font-weight:600; }
.btn.primary:hover{ background:var(--amber-light); }
.btn:active{ transform:scale(0.97); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }

.overlay{
  position:fixed; inset:0; background:rgba(43,32,19,0.55);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:10;
}
.overlay .panel{
  background:#fff; border-radius:14px; padding:26px 28px;
  max-width:340px; width:100%; text-align:center;
  display:flex; flex-direction:column; gap:14px;
}
.overlay h2{
  font-family:"Big Shoulders Display", sans-serif;
  text-transform:uppercase; letter-spacing:0.02em;
  font-size:1.4rem; font-weight:800; margin:0; color:var(--ink);
}
.overlay p{ font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.6; }

footer{ margin-top:22px; font-size:11px; color:var(--ink-soft); text-align:center; }

[hidden]{ display:none !important; }