/* The crab's shore: clear counting groups on warm sand. */
.game[data-scene=groups] .stage{
  position:relative;isolation:isolate;border-color:#dbc58f;border-top-color:#dfb76b;
  background-color:#fbefd4;
  background-image:radial-gradient(ellipse at 95% 5%,#f8ffffb5,transparent 55%),radial-gradient(#b98b4317 .8px,transparent .9px),linear-gradient(170deg,#fff9e9,#f4ddb1);
  background-size:auto,9px 11px,auto;
}
.game[data-scene=groups] .stage h3{font-size:clamp(1.65rem,3vw,2.15rem);color:#604020;margin-top:.1rem}
.scene-landmark--groups{border-color:#dfc693;box-shadow:0 4px 0 #e9d6b1;margin:.8rem 0 .65rem}
.scene-landmark--groups img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;object-position:right center}
.game[data-scene=groups] .mission-view{background:#fff8e8;border-color:#cdae76;color:#70502a;margin-bottom:.35rem}
.stage .beach-question{font-size:1.05rem;line-height:1.5;color:#4b422d;font-weight:650;margin:.5rem 0 .8rem}
.game[data-scene=groups] .group-timer{display:flex;flex-direction:column;align-items:stretch;gap:6px;border:0;border-radius:0;background:none;box-shadow:none;padding:0;margin:0 0 .8rem;color:#705523}
.group-timer::before{content:none}
.group-timer-label{font-size:.8rem;font-weight:750;text-align:right;font-variant-numeric:tabular-nums}
.group-timer-track{display:block;height:11px;padding:2px;border-radius:999px;background:#e6d8b6;box-shadow:inset 0 1px 2px #83672f26;overflow:hidden}
.group-timer-fill{display:block;width:100%;height:100%;border-radius:999px;background:linear-gradient(90deg,#3a9c93,#8cc7ad);transform-origin:left;transition:transform .25s linear,background .2s}
.group-timer.is-urgent .group-timer-fill{background:#cb8648}
.beach-companion{display:flex;flex-direction:column;align-items:center;margin:.25rem 0 1.1rem}
.beach-companion .crab-illustration{width:100%;border:0;background:none;box-shadow:none;margin:0;overflow:visible}
.beach-companion .crab-illustration img{height:125px;width:175px;filter:drop-shadow(0 5px 3px #82603221)}
.game[data-scene=groups] .crab-happy .crab-illustration img{animation:beach-crab-cheer 1.15s ease-in-out both}
@keyframes beach-crab-cheer{0%,100%{transform:translateY(0) rotate(0) scale(1)}15%{transform:translateY(-16px) rotate(-11deg) scale(1.09)}30%{transform:translateY(0) rotate(8deg) scale(1.04)}48%{transform:translateY(-22px) rotate(11deg) scale(1.12)}65%{transform:translateY(0) rotate(-8deg) scale(1.04)}82%{transform:translateY(-12px) rotate(5deg) scale(1.07)}}
.beach-companion .beach-progress{margin:-3px 0 0;max-width:100%;width:304px;padding:12px 12px 10px;background:radial-gradient(ellipse at 50% 20%,#fffbed,#f2dbac);border:1px solid #dbbb81;border-radius:36px 36px 24px 24px;box-shadow:inset 0 2px 0 #fff8e5,0 5px 0 #cda66b38,0 8px 18px #a2783820;text-align:center;color:#775027}
.beach-progress-caption{display:block;color:#715124;font-family:Georgia,serif;font-size:1.02rem;font-weight:700;letter-spacing:-.015em}
.beach-progress-text{display:block;margin-top:7px;font-size:.76rem;font-weight:650;color:#7d6642}
.beach-companion .beach-trade-rule{max-width:23rem;margin:.8rem 0 0;text-align:center;color:#765934;font-size:.88rem;line-height:1.5}
.beach-progress-dots{justify-content:center;gap:7px;margin-top:10px}
.beach-progress-dots .shell-place{position:relative;flex:none;width:44px;height:40px;border:0;border-radius:50%;background:#e3c792;filter:none;opacity:1;box-shadow:inset 0 2px 4px #ae884047,0 1px 0 #fff8dd;transition:background .3s}
.beach-progress-dots .shell-place::after{content:'';position:absolute;inset:4px 3px;background:url('/assets/lighthouse/shell-v2.png') center/contain no-repeat;opacity:.25;filter:sepia(1);transform:scale(.85);transition:opacity .25s,transform .3s}
.beach-progress-dots .shell-place.done{border:0;background:#b9e5bd;box-shadow:inset 0 0 0 2px #4a8656,0 3px 5px #39704738;transform:none}
.beach-progress-dots .shell-place.done::after{opacity:1;filter:drop-shadow(0 2px 1px #b67e3d55);transform:scale(1.16)}
.beach-progress-dots .shell-place.done.is-new::after{animation:collected-shell .55s ease-out both}
@keyframes collected-shell{0%{transform:translateY(-10px) scale(.7);opacity:0}65%{transform:translateY(2px) scale(1.22);opacity:1}100%{transform:translateY(0) scale(1.16);opacity:1}}
.game[data-scene=groups] .group-picture{border:1px solid #ddbf87;border-radius:19px;background:linear-gradient(145deg,#efdaaeaa,#f7eac9b8);padding:12px;margin:.8rem 0 1.15rem;overflow:visible;box-shadow:inset 0 1px #fff9e4,0 3px 0 #e4cda166}
.game[data-scene=groups] .shell-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:9px;align-items:start}
.game[data-scene=groups] .shell-group{display:flex;flex-direction:column;align-items:center;gap:0;max-width:none;min-width:0;padding:8px 6px;border:1px solid #c9a36d;border-radius:13px;background:linear-gradient(155deg,#fff9e7,#f8e8c6);box-shadow:0 3px 0 #cdae7a66}
.shell-bundle{display:grid;grid-template-columns:repeat(5,20px);grid-auto-rows:23px;column-gap:2px;row-gap:3px;width:108px;justify-content:start}
.shell-bundle+.shell-bundle{border-top:1px dashed #d8bf91;padding-top:5px;margin-top:5px}
.game[data-scene=groups] .shell{width:20px;height:23px;background:transparent url('/assets/lighthouse/shell-v2.png') center/contain no-repeat;border-radius:0;filter:drop-shadow(0 1px 0 #b9894755)}
.game[data-scene=groups] .answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:1rem 0 .5rem}
.game[data-scene=groups] .answer{position:relative;isolation:isolate;min-width:0;min-height:61px;padding:12px 10px;border:2px solid #c7a76b;border-bottom-width:3px;border-radius:15px 15px 20px 20px;background:linear-gradient(150deg,#fff5d9,#efd49e);color:#65431e;box-shadow:inset 0 2px 3px #fff9e2,0 3px 0 #bc965c55;font-size:1.3rem;transition:transform .15s,background .15s}
.game[data-scene=groups] .answer::before{content:'';position:absolute;z-index:-1;inset:4px;border-radius:10px 10px 15px 15px;background-image:radial-gradient(#b58b4b55 .7px,transparent 1px),radial-gradient(#fff9e7aa .8px,transparent 1.2px);background-position:0 0,4px 5px;background-size:9px 10px,11px 12px;pointer-events:none}
.game[data-scene=groups] .answer:hover{background:#fff8d6;transform:translateY(-2px)}
.game[data-scene=groups] .answer:focus-visible{outline-color:#1a797b}
.game[data-scene=groups] .answer.answer-correct{background:#b9e5bd;border-color:#397b4b;color:#174b2a;box-shadow:0 3px 0 #397b4b66}
.game[data-scene=groups] .answer.answer-wrong{background:#f6d6c1;border-color:#b96743;color:#74351c}
.game[data-scene=groups] .hint{border-color:#d9c194;color:#6b5430}
.game[data-scene=groups] .stage-actions:empty{display:none}
.beach-celebration{text-align:center;padding:.1rem 0 1rem}
.beach-celebration-art{position:relative;margin:.25rem auto 0;max-width:370px;isolation:isolate}
.beach-celebration-art::before{content:'';position:absolute;z-index:-1;inset:10% -8%;border-radius:50%;background:radial-gradient(ellipse,#fff5c4 0,#ffdf8099 40%,transparent 70%)}
.beach-celebration-art img{display:block;width:100%;height:clamp(220px,32vw,330px);object-fit:contain;filter:drop-shadow(0 12px 6px #9c713326);animation:reward-arrive .75s ease-out both}
.beach-celebration .reward-kicker{text-transform:uppercase;font-size:.75rem;font-weight:850;letter-spacing:.08em;color:#997126;margin:.5rem 0}
.beach-celebration h4{font-family:Georgia,serif;font-size:clamp(1.6rem,4vw,2.2rem);line-height:1.12;margin:.35rem 0;color:#735020}
.beach-celebration>p:not(.reward-kicker){max-width:35rem;margin:.75rem auto 1.3rem;color:#655438}
.reward-sparkle{position:absolute;left:calc(8% + var(--sparkle-index)*10%);top:calc(12% + var(--sparkle-row)*18%);color:#c69123;font-size:clamp(1.2rem,2.5vw,1.7rem);opacity:0;animation:reward-sparkle 1.8s ease-out both;animation-delay:calc(.15s + var(--sparkle-index)*.11s);pointer-events:none}
@keyframes reward-arrive{from{opacity:0;transform:translateY(24px) scale(.88)}to{opacity:1;transform:none}}
@keyframes reward-sparkle{0%{opacity:0;transform:translateY(25px) scale(.4) rotate(0)}40%{opacity:1}100%{opacity:0;transform:translateY(-35px) scale(1.2) rotate(70deg)}}
@media(min-width:1000px){.game[data-scene=groups] .shell-groups{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:390px){.game[data-scene=groups] .stage{padding:20px 14px}.game[data-scene=groups] .shell-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.game[data-scene=groups] .shell-group{padding:7px 3px}.game[data-scene=groups] .group-picture{padding:8px}.shell-bundle{grid-template-columns:repeat(5,18px);width:98px;grid-auto-rows:21px}.game[data-scene=groups] .shell{width:18px;height:21px}.game[data-scene=groups] .answer{min-height:56px}.beach-companion .crab-illustration img{height:110px}.scene-landmark--groups img{height:120px}.beach-progress-dots{gap:5px}.beach-progress-dots .shell-place{width:39px;height:36px}}
@media(prefers-reduced-motion:reduce){.group-timer-fill,.beach-progress-dots .shell-place,.beach-progress-dots .shell-place::after{transition:none}.beach-celebration-art img,.beach-progress-dots .shell-place.done::after,.game[data-scene=groups] .crab-happy .crab-illustration img{animation:none}.reward-sparkle{animation:none;opacity:.6}}