.froggy-game { text-align: center; max-width: 580px; margin: 0 auto; }
.game-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.game-toolbar button, #game-hold { font-size: .9rem; }
.game-status { min-height: 3.5em; margin: 1rem 0 .5rem; font-size: .95rem; }
.pond { width: min(100%, 350px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(7, 1fr); margin: 0 auto; touch-action: none; user-select: none; }
.pond button { position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%; aspect-ratio: 1; border: 0; border-radius: 0; padding: 0; background: url('../img/frog/leaf.gif') 0 0 / 300% 100% no-repeat; image-rendering: pixelated; }
.pond button[data-frame="1"] { background-position-x: 50%; }
.pond button[data-frame="2"] { background-position-x: 100%; }
.pond button[data-safe="true"] { background-image: url('../img/frog/stable.gif'); background-position-x: 0; }
.pond button:hover:enabled { outline: 1px dotted #324f39; outline-offset: -2px; }
.pond button:focus-visible { outline: 3px solid #813742; outline-offset: -3px; z-index: 2; }
.pond button[data-occupant="frog"]::after, .pond button[data-occupant="splash"]::after { content: ''; position: absolute; inset: 0; background: url('../img/frog/froggy.gif') center / contain no-repeat; pointer-events: none; }
.pond button[data-occupant="splash"]::after { background-image: url('../img/frog/dive.gif'); }
.game-controls { display: grid; grid-template-columns: repeat(3, 60px); gap: .45rem; justify-content: center; margin: 1rem auto; }
.game-controls button { display: flex; flex-direction: column; align-items: center; padding: .3rem; background: #d5edc7; border-color: #719063; line-height: 1.3; font-size: 1.25rem; }
.game-controls span { font-size: .75rem; }
.game-controls button:disabled { opacity: .55; }
.move-up { grid-column: 2; }
.move-left { grid-column: 1; grid-row: 2; }
.move-down { grid-column: 2; grid-row: 2; }
.move-right { grid-column: 3; grid-row: 2; }
.game-position { margin: .65rem 0 1.2rem; font-size: .85rem; color: var(--muted); }
.game-help { text-align: left; font-size: .88rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.game-help p { margin-bottom: .7rem; }
@media print { .froggy-game { display: none; } }