/* Pevo-specific corrections; the shared beach shell also serves Buno. */
.game { padding-top: max(10px, env(safe-area-inset-top)); }
.board { grid-template-rows: auto minmax(0,1fr) auto auto auto; }
.prompt { font-size: clamp(17px,1.8vw,24px); }
.object-group { gap: 4px; max-width: 198px; padding: 8px; }
.shell-tap { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 16px; background: transparent; cursor: pointer; }
.shell-tap:active { transform: scale(.94); }
.shell-tap.counted { background: #f2c14150; box-shadow: inset 0 0 0 2px #c98f5a; }
.shell-object { width: 52px; height: 52px; pointer-events: none; }
.object-group.revealed { border-color: #c49b30; background: #f9e5a8; }
.missing-parts,.missing-total { display: flex; justify-content: center; align-items: center; gap: 10px; }
.missing-total .object-group { max-width: 360px; }
.missing-group { width: 120px; }
.math-stage[data-puzzle="missing"] { flex-direction: column; gap: 12px; }
.change-arrow { display: flex; flex-direction: column; align-items: center; font-size: 34px; }
.change-arrow span { font-size: 38px; }
.feedback { position: static; transform: none; min-width: 0; min-height: 30px; padding: 2px 5px; border: 0; background: transparent; box-shadow: none; font-size: 20px; opacity: 0; }
.feedback.show { animation: none; opacity: 1; }
.answer-card:active { transform: translateY(2px) scale(.96); }
.answer-card.selected::after { content: '•'; display: block; position: absolute; bottom: -12px; left: 0; right: 0; font-size: 20px; color: #8a552c; }
body[data-state="demo"] .confirm-btn { pointer-events: none; }
body[data-state="menu"] .game *,body[data-state="level-complete"] .game *,body[data-state="game-complete"] .game * { animation-play-state: paused !important; }
.panel-actions .wood-btn { flex-shrink: 0; }
.level-menu { gap: 9px; }
@media (orientation: landscape) {
  .play-grid { align-items: center; }
  .board { height: min(100%,610px); }
}
@media (max-width:760px),(orientation:portrait) {
  .board { padding-bottom: 62px; grid-template-rows: auto minmax(0,1fr) auto auto auto; }
  .answers,.submit-row { padding-right: 0; }
  .answer-card { position: relative; width: 58px; height: 58px; min-width: 58px; min-height: 58px; }
  .object-group { min-width: 102px; max-width: 162px; padding: 5px; gap: 2px; }
  .shell-tap { flex-basis: 48px; width: 48px; height: 48px; }
  .shell-object { width: 48px; height: 48px; }
  .missing-group { min-width: 90px; width: 100px; }
  .missing-parts,.missing-total { gap: 7px; }
  .missing-total .object-group { max-width: 222px; }
  .math-stage[data-puzzle="missing"] { gap: 6px; }
  .math-sign { font-size: 30px; }
  .change-arrow { font-size: 25px; }
  .change-arrow span { font-size: 27px; }
  .group-label { min-height: 22px; font-size: 24px; }
  .feedback { font-size: 16px; min-height: 23px; }
  .panel-actions { gap: 10px; }
  .panel-actions .wood-btn { width: 56px; height: 56px; }
  .menu-level { flex: 0 0 48px; width: 48px; height: 48px; font-size: 23px; }
  .highfive { max-height: 29vh; }
  .skip-demo { bottom: 66px; }
}
@media (max-height:700px) and (orientation:portrait) {
  .game-content { grid-template-rows: 96px minmax(0,1fr); }
  .board { padding: 7px 7px 52px; gap: 3px; grid-template-rows: minmax(0,1fr) auto auto auto; }
  .prompt { display: none; }
  .answers { min-height: 60px; }
  .submit-row { min-height: 56px; }
  .object-group { min-height: 60px; padding: 3px; }
  .missing-total .object-group { max-width: 264px; }
  .missing-parts .object-group { max-width: 126px; }
  .math-stage[data-puzzle="missing"] .shell-tap { flex-basis: 48px; }
  .feedback { min-height: 21px; font-size: 15px; }
  .panel { padding: 14px 10px; }
  .panel h2 { font-size: 27px; }
  .panel p { font-size: 16px; }
  .skip-demo { bottom: 55px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .hint { animation: none !important; }
}
/* Four child-earned stars; feather markers show the five levels. */
.progress-dot { display:block; width:32px; height:32px; border:0; border-radius:0; background: url('../assets/rewards/ui-reward-star-empty.webp') center/contain no-repeat; box-shadow:none; }
.progress-dot.done { background: url('../assets/rewards/ui-reward-star.webp') center/contain no-repeat; box-shadow:none; }
.level-node,.level-node.current { position:relative; width:38px; height:42px; border:0; border-radius:0; background:none; box-shadow:none; opacity:1; }
.level-node img { width:34px; height:40px; filter:grayscale(1); opacity:.45; }
.level-node.done img,.level-node.current img { filter:none; opacity:1; }
.level-node.current { outline:2px solid #b27c39; outline-offset:2px; border-radius:12px; }
.level-node b { position:absolute; right:0; bottom:0; background:#fff8e6; color:#69442b; border-radius:50%; width:18px; height:18px; text-align:center; font:700 13px/18px sans-serif; }
@media (max-width:760px),(orientation:portrait) {
 .progress-dot { width:25px; height:25px; }
 .level-node,.level-node.current { width:30px; height:32px; }
 .level-node img { width:26px; height:31px; }
 .level-node b { width:15px; height:15px; font-size:11px; line-height:15px; }
}