/* Tactile controls with the existing leaf and turtle artwork. */
button.primary,.btn.primary,button.soft,.btn.soft,button.ghost,.btn.ghost{position:relative;border-radius:12px;border:1px solid #70886a;box-shadow:0 3px 0 #102b20;min-height:44px;padding:11px 18px;line-height:1.35;isolation:isolate;overflow:hidden;transition:background-color .16s,box-shadow .16s,transform .16s;font-weight:750}
button.primary,.btn.primary{background:#d2dfad;color:#20392a;border-color:#a9bd89;border-bottom-color:#8ca16f;box-shadow:0 3px 0 #708554}
button.primary::after,.btn.primary::after{content:'';position:absolute;right:4px;bottom:-5px;width:49px;height:46px;background:url('turtle.svg') center/contain no-repeat;opacity:.11;pointer-events:none;z-index:-1;transform:rotate(-12deg)}
button.soft,.btn.soft{background:#355a42;color:#eff1dd;border-color:#67815c}button.ghost,.btn.ghost{background:#203f30;color:#dce8ce;border-color:#4c7055;box-shadow:0 2px 0 #112a20}
button.primary:hover:not(:disabled),.btn.primary:hover{background:#e0e9c3;transform:translateY(-1px);box-shadow:0 4px 0 #708554}button.soft:hover:not(:disabled){background:#416a4c;box-shadow:0 4px 0 #102b20}button.primary:active:not(:disabled),button.soft:active:not(:disabled),button.ghost:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #102b20}
button:disabled{box-shadow:none;transform:none;cursor:not-allowed}
button.invite-button{padding-left:44px}.invite-button::before{content:'';position:absolute;left:13px;top:50%;width:23px;height:23px;transform:translateY(-50%);background:url('leaf.svg') center/contain no-repeat;pointer-events:none}
/* Dimensions must win over generic button, nav and mobile padding rules. */
button.help-button,button.arrow-button,button.help-close,button.sound-toggle,.sitebar .navright button.sound-toggle{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;min-width:40px;max-width:40px;min-height:40px;max-height:40px;aspect-ratio:1;padding:0!important;border-radius:50%!important;line-height:1;border:1px solid #809b70;box-shadow:0 3px 0 #102b20;font-size:19px;background:#34573e;color:#f2e5b9;vertical-align:middle;overflow:hidden}
button.help-close{font-size:25px;float:none}button.arrow-button{background:#d2dfad;color:#20392a;border-color:#a9bd89}button.help-button::after,button.arrow-button::after,button.help-close::after,button.sound-toggle::after{display:none}
.cardfoot{align-items:center;column-gap:10px;row-gap:12px}.cardfoot>span{line-height:1.4}.footer .help-button{flex-shrink:0}
.game-help-dialog{position:fixed;padding:34px;scrollbar-gutter:stable;border-radius:22px}.game-help-dialog>form:first-child{position:absolute;right:18px;top:18px;margin:0}.game-help-dialog>.label{display:block;padding-right:44px;line-height:1.5;letter-spacing:.08em}.game-help-dialog h2{padding-right:40px;margin:12px 0 18px;line-height:1.15}.game-help-dialog>p{margin:0 0 28px;line-height:1.7}.game-help-dialog .guide-steps{margin:0;padding:0}.guide-steps li{gap:18px;margin:0;padding:22px 0;border-bottom:1px solid #81946c33}.guide-steps li:first-child{padding-top:0}.guide-steps li:last-child{border-bottom:0}.guide-steps li>span{box-sizing:border-box;flex:0 0 40px;width:40px;height:40px;min-width:40px;border-radius:50%;line-height:1}.guide-steps li>div{min-width:0;padding-top:2px}.guide-steps h3{font-size:1.12rem;line-height:1.35;margin:0 0 10px}.guide-steps p{line-height:1.7;margin:0}.game-help-dialog .notice{margin:12px 0 24px}.game-help-dialog>form:last-child{margin-top:22px}.onboarding .guide-steps{margin:30px 0}.onboarding .help-game-list{gap:12px;margin-top:20px}.onboarding .buttonrow{margin:24px 0 36px;gap:12px}
.pond-invite{display:flex;align-items:center;gap:20px;border:1px solid #527751;background:#1b392a;border-radius:18px;padding:20px 24px;margin:22px 0 10px}.pond-emblem{display:grid;place-items:center;flex:0 0 70px;width:70px;height:70px;border:1px dashed #849765;border-radius:50%;background:#294d36}.pond-emblem img{width:62px;height:62px}.pond-invite>div{flex:1;min-width:0}.pond-invite .label{font-size:.65rem;letter-spacing:.1em;color:#bace9e}.pond-invite h2{margin:5px 0 6px;font-size:1.25rem;letter-spacing:0;color:#f4edce}.pond-invite p{font-size:.88rem;line-height:1.5;margin:0;color:#baccb3}.pond-invite>button{flex-shrink:0}
.pond-dialog{width:min(460px,calc(100vw - 28px));max-height:92dvh;overflow:auto;box-sizing:border-box;border:1px solid #91a878;border-radius:24px;padding:28px;background:#183b2b;color:#eef1d9;box-shadow:0 24px 90px #0008}.pond-dialog::backdrop{background:#071b12cf;backdrop-filter:blur(4px)}.pond-close{position:absolute;top:16px;right:16px}.pond-dialog>.label{display:block;padding-right:32px;font-size:.62rem;letter-spacing:.08em;line-height:1.7}.pond-dialog h2{font-size:2rem;margin:10px 40px 12px 0;color:#f3e4b7}.pond-description{font-size:.9rem;line-height:1.6;margin-bottom:18px;color:#cddcc0}.pond-scoreboard{display:flex;justify-content:space-between;gap:16px;padding:12px 0;color:#c1d3b6}.pond-scoreboard b{font-size:1.4rem;color:#f0d99e;margin-right:4px;font-variant-numeric:tabular-nums}.pond-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px;border-radius:18px;background:#112e28;border:1px solid #365c46}
button.pond-pad{display:grid;place-items:center;box-sizing:border-box;aspect-ratio:1;width:100%;height:auto;min-width:0;min-height:0;padding:0;border-radius:50%;border:2px solid #527446;background:#355837;box-shadow:0 4px 0 #0b211a;opacity:1;position:relative;overflow:visible;transition:background .12s}.pond-pad::before{content:'';position:absolute;inset:12%;border:1px solid #80a76355;border-radius:50%;pointer-events:none}.pond-pad img{width:94%;height:94%;position:absolute;inset:3%;object-fit:contain;pointer-events:none}.pond-pad:disabled{cursor:default}.pond-pad.has-turtle{background:#78965a;border-color:#d1dca2}.pond-pad.has-turtle img{animation:pond-peek .16s ease-out}.pond-pad:hover:not(:disabled){transform:none;border-color:#bad39b}.pond-pad:active:not(:disabled){transform:translateY(2px)}
#pond-message{min-height:3em;line-height:1.5;font-size:.9rem;margin:18px 0 10px;color:#e2e9cb}.pond-note{display:block;line-height:1.5;margin-top:16px;color:#a9c0a2;font-size:.72rem}
@keyframes pond-peek{from{transform:translateY(8px);opacity:.4}to{transform:translateY(0);opacity:1}}
@media(max-width:660px){.pond-invite{flex-wrap:wrap;gap:14px;padding:18px}.pond-emblem{flex-basis:54px;width:54px;height:54px}.pond-emblem img{width:49px;height:49px}.pond-invite>button{width:100%}.game-help-dialog{padding:26px 22px}.game-help-dialog>form:first-child{right:14px;top:14px}.guide-steps li{gap:14px;padding:20px 0}.guide-steps h3{font-size:1.05rem}.guide-steps p{font-size:.94rem}.pond-dialog{padding:24px 20px}.pond-board{padding:14px;gap:12px}.cardfoot>span{flex-basis:100%}.cardfoot{justify-content:flex-end}.cardfoot .help-button{margin-right:auto}}
@media(prefers-reduced-motion:reduce){.pond-pad.has-turtle img{animation:none}button.primary,button.soft,button.ghost{transition:none}}

/* Persistent sound state; keep the control circular and the label outside. */
.sound-control{display:inline-flex;align-items:center;gap:7px;flex-shrink:0}
.sound-control .sound-state{font-size:11px;line-height:1.2;font-weight:700;white-space:nowrap;color:#dce8ce}
.sound-control .sound-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sitebar .navright .sound-control button.sound-on{background:#c8dda2;color:#243f2c;border-color:#a7c385}
.sitebar .navright .sound-control button.sound-off{background:#3c4036;color:#e5c9b0;border-color:#8c7b63}
.sound-control:has(.sound-off) .sound-state{color:#d4bfa9}
@media(max-width:660px){.sound-control{gap:4px;flex-direction:column}.sound-control .sound-state{font-size:10px}}