/* Real Wondermaths props on the beach, without an application-style board. */
.board {
  align-self: stretch;
  height: 100%;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  grid-template-rows: minmax(130px,1fr) auto;
  gap: 10px;
}
.board::before, .board::after { content: none; }
.parade-scene {
  align-self: stretch;
  align-items: flex-end;
  padding: 24px 0 48px;
  border-radius: 0;
  background: none;
}
.duckling { height: clamp(120px,15vw,190px); }
.hidden-clue { align-self: flex-end; }
.duckling::before {
  content: '';
  position: absolute;
  inset: -12px -18px -10px;
  background: radial-gradient(ellipse closest-side, rgba(59,89,111,.34) 0%, rgba(69,103,120,.18) 70%, transparent 100%);
  pointer-events: none;
}
.duckling::after {
  content: '';
  position: absolute;
  left: -5%; bottom: -4px;
  width: 110%; height: 13px;
  border-radius: 50%;
  background: rgba(53,69,76,.27);
  filter: blur(4px);
  pointer-events: none;
}
.duckling img {
  position: absolute;
  z-index: 1;
  width: 140%; height: 130%; left: -20%; top: -15%;
  max-width: none;
  filter: drop-shadow(1.5px 0 0 #fff9e9) drop-shadow(-1.5px 0 0 #fff9e9)
    drop-shadow(0 1.5px 0 #fff9e9) drop-shadow(0 -1.5px 0 #fff9e9)
    drop-shadow(0 5px 4px rgba(45,63,73,.4));
}
.answers-zone {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: auto 80px;
  justify-items: center;
  gap: 2px;
  padding: 0 0 12px;
  background: none;
  box-shadow: none;
}
.answer-grid {
  width: 100%;
  height: clamp(158px,18vw,225px);
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: center;
  justify-items: center;
  gap: 0;
  padding: 0 15% 12px;
  background: url('assets/ui-beach-answer-tray.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 7px rgba(85,52,22,.2));
}
.answer-card, .answer-card:has(.small-pips) {
  width: clamp(92px,10vw,126px);
  height: clamp(92px,10vw,126px);
  display: block;
  padding: 0;
  border: 0;
  border-radius: 22%;
  background: none;
  box-shadow: none;
  transform: translateY(-4px);
}
.answer-card:last-child:nth-child(odd) { grid-column: auto; }
.library-die {
  position: absolute;
  width: 137%;
  height: 137%;
  max-width: none;
  left: -20%;
  top: -20%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 5px 3px rgba(81,48,18,.28));
}
.answer-card.selected {
  background: none;
  border: 0;
  box-shadow: 0 0 0 4px #fff5d2, 0 0 0 7px #eabb48;
  transform: translateY(-10px) rotate(-3deg);
}
.answer-card.selected .library-die { filter: drop-shadow(0 5px 3px rgba(81,48,18,.28)) brightness(1.08); }
.answer-card:active { transform: translateY(0) scale(.96); }
.die-value {
  position: absolute; z-index: 2; right: -8px; bottom: -8px;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 2px solid #be9652; border-radius: 50%;
  background: #fff6da; color: #51371e; font-size: 22px; font-weight: 900;
  box-shadow: 0 3px 5px rgba(71,43,20,.15);
}
.board[data-mode="ordinal"] .answer-grid {
  display: flex;
  justify-content: center;
  padding: 0;
  height: 100px;
  background: none;
  filter: none;
}
.board[data-mode="ordinal"] .ordinal-prompt {
  padding: 12px 24px;
  border-radius: 28px;
  background: rgba(255,246,222,.85);
  box-shadow: 0 3px 12px rgba(91,58,23,.12);
}
.parade-direction { bottom: 6px; }
.guide-zone:has(.bodi-help.active) > .speech,
.guide-zone:has(.bodi-help.active) > .guide-button { display: none; }
.guide-zone .bodi-help {
  position: relative; inset: auto; width: 100%; min-height: 0;
  padding: 12px; flex-direction: column; gap: 8px;
  border-width: 2px; border-radius: 24px;
  font-size: 18px; text-align: center;
}
.guide-zone .bodi-help img { position: static; width: 120px; max-height: 140px; }
@media (orientation: portrait) {
  .guide-zone .bodi-help { height: 100%; flex-direction: row; padding: 6px 12px; font-size: 16px; text-align: left; }
  .guide-zone .bodi-help img { width: 76px; max-height: 100%; flex-shrink: 0; }
}
/* Dako is the adult: reserve a larger side area rather than scaling over answers. */
@media (orientation: landscape) and (min-width: 901px) {
  .game-layout { grid-template-columns: minmax(150px,18%) minmax(440px,1fr) minmax(240px,26%); }
  .hero-zone img { width: 100%; max-width: 380px; max-height: 65vh; }
}
@media (orientation: portrait) {
  .game-layout { grid-template-rows: 120px minmax(0,1fr) 68px; }
  .board { grid-template-rows: minmax(110px,1fr) auto; gap: 0; }
  .parade-scene { padding: 14px 0 38px; gap: 8px; }
  .duckling { height: 110px; }
  .answers-zone { grid-template-rows: auto 64px; gap: 6px; padding: 0; }
  .answer-grid { height: clamp(132px,36vw,160px); padding: 0 13% 9px; }
  .answer-card { width: clamp(76px,19.5vw,118px); height: clamp(76px,19.5vw,118px); }
  .board[data-mode="ordinal"] .answer-grid { height: 60px; }
  .die-value { width: 26px; height: 26px; font-size: 18px; bottom: -6px; right: -5px; }
  .answer-card.selected { transform: translateY(-9px) rotate(-3deg); box-shadow: 0 0 0 3px #fff5d2, 0 0 0 5px #eabb48; }
  .hero-zone img {
    width: clamp(132px,38vw,164px);
    height: clamp(132px,38vw,164px);
    max-height: none;
    right: 0;
    bottom: -2px;
  }
}
@media (max-width: 370px) and (max-height: 680px) and (orientation: portrait) {
  .game-layout { grid-template-rows: 94px minmax(0,1fr) 60px; }
  .duckling { height: 92px; }
  .answer-grid { height: 130px; }
  .answers-zone { grid-template-rows: auto 58px; }
}