:root {
  --bg: #121318;
  --panel: #1f2129;
  --text: #f2f3f5;
  --muted: #9ba1ad;
  --border: #3a3d48;
  --green: #4caf6a;
  --yellow: #d6b03a;
  --gray: #3b3e47;
  --key: #4a4e5a;
  --tile: 52px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
#app { height: 100vh; height: 100dvh; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; padding: 8px 10px; gap: 6px; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.top .chip { margin-left: auto; }
.title { font-weight: 800; font-size: 19px; letter-spacing: 0.2px; }
.chip { background: var(--panel); border: 1px solid var(--border); border-radius: 99px; padding: 5px 12px;
  font-size: 13px; color: #dfe2e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.msg { text-align: center; min-height: 22px; font-size: 14px; color: var(--muted); transition: color 0.2s; }
.msg.good { color: var(--green); font-weight: 700; }
.msg.bad { color: #ef6b5b; }
.msg.hint { color: #e8d48a; }

.grid { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.row { display: flex; gap: 6px; }
.row.shake { animation: shake 0.35s; }
.tile { width: var(--tile); height: var(--tile); border: 2px solid var(--border); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: calc(var(--tile) * 0.5);
  text-transform: uppercase; }
.tile.filled { border-color: #6b7080; animation: pop 0.1s; }
.tile.g, .tile.y, .tile.x { border-color: transparent; animation: flip 0.45s ease both; }
.tile.g { background: var(--green); }
.tile.y { background: var(--yellow); }
.tile.x { background: var(--gray); }

.kb { display: flex; flex-direction: column; gap: 6px; user-select: none; }
.kb .r { display: flex; gap: 5px; justify-content: center; }
.kb button { flex: 1; max-width: 44px; height: 44px; border: 0; border-radius: 6px; background: var(--key); color: var(--text);
  font: 700 14px system-ui, sans-serif; text-transform: uppercase; cursor: pointer; padding: 0; touch-action: manipulation; }
.kb button.wide { max-width: 66px; flex: 1.5; font-size: 12px; }
.kb button.g { background: var(--green); }
.kb button.y { background: var(--yellow); }
.kb button.x { background: #2a2c33; color: #777c88; }

.bar { display: flex; gap: 8px; }
.bar button { flex: 1; height: 38px; border: 0; border-radius: 9px; background: var(--panel); color: var(--text);
  font: 600 14px system-ui, sans-serif; cursor: pointer; }
.bar button:disabled { opacity: 0.4; cursor: default; }

.fact { background: var(--panel); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; color: #dfe2e8; text-align: center; }

@keyframes pop { 50% { transform: scale(1.08); } }
@keyframes flip { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }