:root {
  --bg: #12141b;
  --panel: #1f222c;
  --text: #f2f3f5;
  --muted: #9ba1ad;
  --border: #363a47;
  --tile-bg: #1b1e27;
  --start: #3a7bbf;
  --green: #4caf6a;
  --amber: #e9a93c;
  --violet: #8d73d9;
  --wood: #a8743b;
  --wood-dark: #6e4a24;
  --key: #4a4e5a;
  --tile: 48px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; color: var(--text); overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, #1d2130 0%, var(--bg) 60%) fixed, var(--bg);
  font: 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#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; gap: 8px; min-height: 36px; }
.title { font-weight: 800; font-size: 19px; letter-spacing: 0.2px; white-space: nowrap; }
.chip { margin-left: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 99px; padding: 5px 12px;
  font-size: 13px; color: #dfe2e8; white-space: nowrap; }
.sub { text-align: center; font-size: 13px; color: #c7b48e; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 17px; }
.msg { text-align: center; min-height: 20px; 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; }

/* ---------- ladder ---------- */
.ladder { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.lad { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 6px calc(var(--tile) * 0.6); }
.lad::before, .lad::after { content: ''; position: absolute; top: -4px; bottom: -4px; width: 7px; border-radius: 4px;
  background: linear-gradient(90deg, var(--wood-dark), var(--wood) 45%, var(--wood-dark)); box-shadow: 0 2px 8px #0006; }
.lad::before { left: 0; }
.lad::after { right: 0; }
.row { position: relative; display: flex; gap: 7px; }
.row::before { content: ''; position: absolute; left: calc(var(--tile) * -0.6 + 3px); right: calc(var(--tile) * -0.6 + 3px);
  top: 50%; height: 5px; transform: translateY(-50%); border-radius: 3px; background: var(--wood-dark); }
.row.shake { animation: shake 0.35s; }

.tile { position: relative; width: var(--tile); height: var(--tile); border: 2px solid var(--border); border-radius: 8px;
  background: var(--tile-bg); display: flex; align-items: center; justify-content: center; font-weight: 800;
  font-size: calc(var(--tile) * 0.5); text-transform: uppercase; user-select: none; transition: background 0.15s, border-color 0.15s, transform 0.1s; }

.start .tile { background: var(--start); border-color: transparent; }
.done .tile { background: #262a36; border-color: #3c4152; cursor: pointer; }
.done .tile.chg { background: var(--amber); border-color: transparent; color: #1b1405; }
.done:hover .tile { filter: brightness(1.12); }
.active .tile { border-color: #5b6175; color: #8f95a6; cursor: pointer; }
.active .tile.chg { color: var(--text); border-color: var(--amber); background: #3a2f1a; animation: pop 0.12s; }
.active .tile.sel { border-color: #ffd27a; box-shadow: 0 0 0 3px #ffd27a40; transform: translateY(-2px); color: var(--text); }
.empty .tile { background: #161820; border: 2px dashed #2c303c; }
.goal .tile { border: 2px dashed var(--green); color: #bfe8cb; }
.goal .tile.hit { background: #2d5a3b; border-style: solid; color: #fff; }
.goal.win .tile { background: var(--green); border: 2px solid transparent; color: #fff; animation: bounce 0.5s ease both; }
.goal.win .tile:nth-child(2) { animation-delay: 0.06s; }
.goal.win .tile:nth-child(3) { animation-delay: 0.12s; }
.goal.win .tile:nth-child(4) { animation-delay: 0.18s; }
.goal.win .tile:nth-child(5) { animation-delay: 0.24s; }
.goal.shown .tile { background: #2d5a3b; border-style: solid; color: #fff; }
.done.shown .tile { cursor: default; }
.done.shown .tile.chg { background: var(--violet); color: #fff; }

/* ---------- keyboard ---------- */
.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: 42px; 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:active { background: #5d6272; }
.kb button.wide { max-width: 66px; flex: 1.5; font-size: 12px; }

.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; touch-action: manipulation; }
.bar button:disabled { opacity: 0.4; cursor: default; }
.bar button[hidden] { display: none; }
#reveal { color: #f3b1a8; }

.panel { background: var(--panel); border-radius: 10px; padding: 10px 12px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.path { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; font-size: 15px; letter-spacing: 0.5px; }
.path .arr { color: var(--wood); }
.note { font-size: 13.5px; color: #dfe2e8; }

@keyframes pop { 50% { transform: scale(1.08); } }
@keyframes bounce { 0% { transform: scale(1); } 40% { transform: translateY(-8px) scale(1.06); } 100% { transform: none; } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }