/* The puzzle lives on the beach. Only answer tiles and HUD retain wooden frames. */
.board { background:none;border:0;box-shadow:none;overflow:visible;padding:16px;grid-template-rows:minmax(0,1fr) 84px 72px 24px;gap:6px; }
.board::before { display:none; }
.object-group { position:relative;isolation:isolate;background:transparent;border:0;border-radius:50%;box-shadow:none;padding:14px; }
.object-group::before { content:'';position:absolute;inset:-17% -6%;z-index:-2;pointer-events:none;background:url('assets/prop-beach-seagrass-mat.png.webp') center/100% 100% no-repeat;filter:drop-shadow(0 5px 4px #80501f25); }
/* Plain dark lining removes visual noise directly behind countable objects. */
.object-group::after { content:'';position:absolute;inset:2px;z-index:-1;pointer-events:none;border-radius:50%;background:#153b43;border:2px solid #ad915e; }
.shell-object { filter:drop-shadow(1px 0 0 #fff4dc) drop-shadow(-1px 0 0 #fff4dc) drop-shadow(0 1px 0 #fff4dc) drop-shadow(0 -1px 0 #fff4dc) drop-shadow(0 4px 2px #071c25b3); }
.shell-tap:focus-visible { outline:3px solid #fff4dc;outline-offset:2px;background:#224d57; }
.shell-tap.counted { background:#fff4dc33;box-shadow:inset 0 0 0 2px #fff4dc; }
.math-stage[data-puzzle="count"] { --shell:112px; }
.math-stage[data-puzzle="count"] .object-group { max-width:calc(var(--shell)*3 + 40px); }
.math-stage[data-puzzle="count"] .object-group[aria-label="1 shell"],
.math-stage[data-puzzle="count"] .object-group[aria-label="2 shells"],
.math-stage[data-puzzle="count"] .object-group[aria-label="3 shells"] { --shell:140px; }
.missing-group { background:#fff6dd90;border:2px dashed #9a6b35;border-radius:50%; }
.missing-group::before { opacity:.4; }
.missing-group::after { background:#fff8e6;border:2px dashed #574126; }
.object-group.revealed { background:none;border:0; }
.object-group.revealed::before { filter:drop-shadow(0 0 8px #f8d75a); }
.math-sign,.group-label,.change-arrow { color:#69421f;text-shadow:0 2px 1px #fff0b4; }
.feedback { justify-self:center;align-self:center;width:max-content;max-width:100%;padding:3px 14px;line-height:1.25;border-radius:18px;background:#fff8e6e8;color:#593918;font-weight:800; }
.feedback:not(.show) { background:none; }
.answer-card { filter:drop-shadow(0 5px 4px #76471935); }
.answer-card.with-dots { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:34px;line-height:1; }
.answer-dots { display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:4px;width:32px;height:20px;pointer-events:none; }
.answer-dots i { display:block;flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#153b43; }
/* Selection must not add a dot that could be mistaken for part of the quantity. */
.answer-card.with-dots.selected::after { content:none; }
@media (max-width:599px) {
 .answer-card.with-dots { width:64px;min-width:64px;height:64px;min-height:64px;font-size:22px;gap:2px;padding:0; }
 .answer-dots { width:26px;height:16px;gap:4px; }
 .answer-dots i { flex-basis:6px;width:6px;height:6px; }
}
@media (min-width:761px) and (orientation:landscape) and (max-width:1100px) {
 .math-stage[data-puzzle="count"] { --shell:90px; }
 .math-stage[data-puzzle="count"] .object-group[aria-label="1 shell"],
 .math-stage[data-puzzle="count"] .object-group[aria-label="2 shells"],
 .math-stage[data-puzzle="count"] .object-group[aria-label="3 shells"] { --shell:112px; }
}
@media (max-width:599px) {
 .board { padding:12px;grid-template-rows:minmax(0,1fr) 66px 60px 23px;gap:5px; }
 .object-group { padding:6px; }
 .object-group::before { inset:-17% -6%; }
 .math-stage[data-puzzle="count"] { --shell:76px; }
 .math-stage[data-puzzle="count"] .object-group { max-width:260px; }
 .math-stage[data-puzzle="count"] .object-group[aria-label="1 shell"],
 .math-stage[data-puzzle="count"] .object-group[aria-label="2 shells"] { --shell:100px; }
 .math-stage[data-puzzle="count"] .object-group[aria-label="3 shells"] { --shell:76px; }
 .math-stage[data-puzzle="missing"] .object-group { padding:3px; }
 .feedback { font-size:14px;padding:2px 10px; }
}
@media (max-width:599px) and (max-height:720px) {
 .board { grid-template-rows:minmax(0,1fr) 60px 56px 20px;padding:10px 12px;gap:3px; }
 .math-stage[data-puzzle="count"] { --shell:62px; }
 .math-stage[data-puzzle="count"] .object-group[aria-label="3 shells"] { --shell:62px; }
}
@media (min-width:600px) {
 .math-stage[data-puzzle="sum"] .object-group,.math-stage[data-puzzle="change"] .object-group { max-width:calc(var(--shell)*2 + 36px); }
 .missing-total .object-group { max-width:calc(var(--shell)*6 + 52px); }
}