:root {
  --bg: #ffffff; --fg: #1a1a1b; --muted: #5b6068; --border: #c4c8ce; --key: #d3d6da;
  --correct: #2e7d32; --present: #8a6100; --absent: #5c6370; --on-color: #ffffff;
}
:root[data-theme="dark"] {
  --bg: #121213; --fg: #f2f2f2; --muted: #a6abb3; --border: #4a4d52; --key: #4f535a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  touch-action: manipulation; overscroll-behavior: none;
}
#app {
  display: flex; flex-direction: column; max-width: 500px; margin: 0 auto;
  min-height: 100vh; min-height: 100dvh; height: 100dvh;
  padding: 0 8px env(safe-area-inset-bottom);
}
.bar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding: 4px 0; }
.bar h1 { margin: 0; font-size: 1.25rem; letter-spacing: .05em; }
.bar-right { display: flex; }
.icon-btn { background: none; border: 0; color: inherit; font-size: 1.4rem; min-width: 44px; min-height: 44px; cursor: pointer; }
button:focus-visible { outline: 3px solid #2f6fed; outline-offset: 2px; }
main { flex: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: center; min-height: 0; padding: 8px 0; position: relative; }
.toast {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 5;
  background: var(--fg); color: var(--bg); padding: 8px 14px; border-radius: 6px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .15s; max-width: 90%; text-align: center;
}
.toast.show { opacity: 1; }
.board { display: grid; grid-template-rows: repeat(6, 1fr); gap: 5px; width: min(100%, 330px, 42dvh * 5 / 6 * 1.2); flex: 0 1 auto; margin: auto; }
.row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.tile {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); font-size: clamp(1.4rem, 7dvh, 2rem); font-weight: 700; text-transform: none;
}
.tile[data-filled="true"] { border-color: var(--muted); }
.tile[data-state] { color: var(--on-color); border-color: transparent; animation: flip .5s ease both; animation-delay: calc(var(--i) * 120ms); }
.tile[data-state="correct"] { background: var(--correct); }
.tile[data-state="present"] { background: var(--present); }
.tile[data-state="absent"] { background: var(--absent); }
.row.shake { animation: shake .4s; }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.keyboard { width: 100%; display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.krow { display: flex; justify-content: center; gap: 4px; }
.key {
  flex: 1 1 0; min-width: 0; height: 52px; border: 0; border-radius: 4px; background: var(--key); color: var(--fg);
  font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; padding: 0; user-select: none;
}
.key.wide { flex: 1.6 1 0; font-size: .75rem; }
.key[data-state] { color: var(--on-color); }
.key[data-state="correct"] { background: var(--correct); }
.key[data-state="present"] { background: var(--present); }
.key[data-state="absent"] { background: var(--absent); }
dialog { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; max-width: min(92vw, 460px); max-height: 85dvh; width: 100%; }
dialog::backdrop { background: rgba(0, 0, 0, .55); }
dialog h2 { margin-top: 0; text-align: center; }
dialog pre { white-space: pre-wrap; font-size: .75rem; max-height: 22dvh; overflow: auto; background: color-mix(in srgb, var(--fg) 8%, transparent); padding: 8px; }
.dlg-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.dlg-actions button { min-height: 44px; padding: 0 18px; font: inherit; font-weight: 700; border-radius: 6px; border: 1px solid var(--border); background: var(--key); color: var(--fg); cursor: pointer; }
.stat-grid { display: flex; justify-content: space-around; text-align: center; }
.stat-grid b { display: block; font-size: 1.6rem; }
.stat-grid span { font-size: .7rem; color: var(--muted); }
.dist { margin-top: 12px; }
.dist-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: .85rem; }
.dist-bar { background: var(--absent); color: var(--on-color); min-width: 1.5rem; padding: 0 6px; text-align: right; font-weight: 700; }
.dist-bar.hl { background: var(--correct); }
.result-msg { text-align: center; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .tile[data-state], .row.shake { animation: none; }
  .toast { transition: none; }
}
@media (max-height: 560px) { .key { height: 40px; } }