body{--bg:#dff3fb;--fg:#1a1a1a;--muted:#5a6a4a;--tile:#a5e04a;--accent:#3f9a3a;--card:#eef8d8;--radius:8px;--good:#3f9a3a;--bad:#e5443a}
.game{flex-direction:column;align-items:center;gap:.6rem}
main{max-width:none}
#hop{display:block;width:100%;max-width:calc((100vh - 9rem)*16/9*.7);margin:0 auto;aspect-ratio:16/9;background:#7ec8f0;image-rendering:pixelated;image-rendering:crisp-edges;border:4px solid #1a1a1a;border-radius:4px}
.hud{display:flex;flex-direction:column;align-items:center;gap:.3rem;width:100%;max-width:768px}
.letters{display:flex;gap:.6rem;margin:.2rem 0;font-size:1.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.letters span{padding:0 .1rem}
.letters .centre{text-decoration:underline 4px #f7d23e;text-underline-offset:.3rem;color:#3f9a3a}
.hud .bar{max-width:22rem}
.row{display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;margin:.3rem 0}
.row form{display:flex;align-items:center;gap:.6rem;margin:0}
.hint{text-align:center;margin:0;font-size:.85rem;max-width:40rem}
.found{width:100%;max-width:768px}
.touch{display:none;width:100%;max-width:768px;justify-content:space-between;align-items:center;touch-action:none;user-select:none}
.pad{display:flex;gap:6px}
.pad button,.jump{min-height:0;padding:0;width:64px;height:64px;font-size:1.3rem;justify-content:center}
.jump{width:96px;border-radius:50%;font-size:1rem}
@media (pointer:coarse){.touch{display:flex}.hint{display:none}}
@media (pointer:coarse){.made{left:50%;right:auto;transform:translateX(-50%)}}