.hm-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.lives{font-weight:800}
.scene{background:var(--sky);border:4px solid var(--bark);border-radius:16px;margin:14px 0;overflow:hidden}
.scene svg{display:block;width:100%;height:auto}
.scene.shake{animation:shake .5s}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(4px,-2px)}}
.meteor{transition:transform .6s cubic-bezier(.3,1.4,.6,1)}
.boom{transform-box:view-box;transform-origin:92px 122px;transform:scale(0);opacity:0}
.boom.go{animation:boom 1.5s ease-out forwards}
@keyframes boom{0%{transform:scale(0);opacity:1}25%{transform:scale(1.25);opacity:1}70%{transform:scale(1);opacity:1}100%{transform:scale(1.1);opacity:0}}
.fossil{opacity:0;transition:opacity .6s}
.fossil.show{opacity:1}

.hint{font-size:1.05rem;margin:4px 0 12px}
/* slots shrink so long words fit on one line on a phone */
.word{--len:8;--slot:clamp(18px,calc((min(100vw,900px) - 40px) / var(--len) - 4px),44px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:10px 0 18px}
.slot{width:var(--slot);height:calc(var(--slot) * 1.25);border-bottom:5px solid var(--on-bg-soft);
  font-family:var(--font-display);font-size:calc(var(--slot) * .75);display:grid;place-items:center;color:var(--on-bg)}

.hm-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0}
.hm-level{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:56px;padding:6px 4px;
  border:3px solid var(--bark);border-radius:12px;background:var(--card);font-family:var(--font-display);font-size:.95rem;color:var(--ink)}
.hm-level.on{background:var(--leaf)}
.hm-stars{font-size:.75rem;letter-spacing:1px}
.hm-hint{min-height:var(--tap);padding:6px 14px;border:3px solid var(--bark);border-radius:12px;background:#FFE27A;
  font-weight:800;color:var(--ink);box-shadow:3px 3px 0 var(--bark)}
.hm-hint small{font-weight:600}
.hm-hint:disabled{opacity:.5;box-shadow:none;cursor:default}
.slot.gap{border:0;width:14px}
.keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}
.key{height:var(--tap);border:3px solid var(--bark);border-radius:10px;background:var(--card);
  font-family:var(--font-display);font-size:1.05rem;color:var(--ink)}
.key.hit{background:var(--leaf)} .key.miss{background:#d9c7a3;color:#8a7457}
.key:disabled{cursor:default}
.result{text-align:center;margin-top:18px}
.result h3{font-size:1.6rem;color:var(--on-bg-title)}
.result p{margin:6px 0 14px;font-size:1.1rem}