/* Canonical Wondermaths artwork, copied from the shared assets/ui library.
   Keep the shell's responsive geometry and accessible button names. */
.play-button, .icon-button, .panel-button, .demo-skip {
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--ui-normal) center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 4px 4px rgba(70,43,21,.24));
  font-size: 0;
}
.play-button::before { content: none; }
.icon-button .ui-icon { display: none; }
.play-button:active, .icon-button:active, .panel-button:active, .demo-skip:active {
  background-image: var(--ui-pressed);
  box-shadow: none;
}
.play-button:disabled, .icon-button:disabled, .panel-button:disabled, .demo-skip:disabled {
  background-image: var(--ui-disabled);
}
#play-button, #resume-button {
  --ui-normal: url('assets/ui/button-play-normal.webp');
  --ui-pressed: url('assets/ui/button-play-pressed.webp');
  --ui-disabled: url('assets/ui/button-play-disabled.webp');
}
#home-button, #exit-button, #reward-home-button, #final-home-button {
  --ui-normal: url('assets/ui/button-home-normal.webp');
  --ui-pressed: url('assets/ui/button-home-pressed.webp');
  --ui-disabled: url('assets/ui/button-home-disabled.webp');
}
#restart-button, #replay-button, #final-replay-button {
  --ui-normal: url('assets/ui/button-replay-normal.webp');
  --ui-pressed: url('assets/ui/button-replay-pressed.webp');
  --ui-disabled: url('assets/ui/button-replay-disabled.webp');
}
#next-button, #demo-skip {
  --ui-normal: url('assets/ui/button-next-normal.webp');
  --ui-pressed: url('assets/ui/button-next-pressed.webp');
  --ui-disabled: url('assets/ui/button-next-disabled.webp');
}
#sound-button, [data-sound-toggle] {
  --ui-normal: url('assets/ui/button-volume-normal.webp');
  --ui-pressed: url('assets/ui/button-volume-pressed.webp');
  --ui-disabled: url('assets/ui/button-volume-disabled.webp');
}
#sound-button[aria-label="Turn on all sound"], [data-sound-toggle][aria-label="Turn on all sound"] {
  --ui-normal: url('assets/ui/button-mute-normal.webp');
  --ui-pressed: url('assets/ui/button-mute-pressed.webp');
  --ui-disabled: url('assets/ui/button-mute-disabled.webp');
}
.panel-button { width: 72px; height: 72px; min-width: 72px; min-height: 72px; }
.demo-skip { width: 58px; height: 58px; }

/* A quiet sand-colored play surface, with one wooden edge. */
.board {
  align-self: center;
  width: 100%;
  height: 100%;
  max-height: 520px;
  padding: 22px;
  border: 3px solid #bd915f;
  border-radius: 36px;
  background: linear-gradient(165deg, #fffaf0, #f9ecd2);
  box-shadow: inset 0 2px 0 #fffdf7, 0 8px 0 rgba(145,97,49,.16), 0 16px 28px rgba(79,52,24,.15);
  grid-template-rows: minmax(100px,1fr) auto;
  gap: 18px;
}
.board::before, .board::after { content: none; }
.parade-scene {
  border-radius: 28px;
  background: radial-gradient(ellipse 48% 12% at 50% 67%, rgba(207,168,101,.18), transparent 100%);
}
.answers-zone {
  padding: 16px 12px;
  border-radius: 26px;
  background: rgba(225,198,150,.22);
  box-shadow: inset 0 1px 0 rgba(162,121,66,.12);
}
.answer-card {
  border: 2px solid #c5a070;
  border-radius: 23px;
  background: #fffdf5;
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 #dfc7a1, 0 6px 9px rgba(92,61,28,.1);
}
.answer-card.selected {
  border-color: #d5a033;
  background: #fff4cf;
  box-shadow: 0 0 0 3px #f2c141, 0 5px 0 #dfc7a1;
}
@media (orientation: portrait) {
  .board {
    max-height: 480px;
    padding: 13px;
    border-width: 2px;
    border-radius: 29px;
    gap: 10px;
    grid-template-rows: minmax(80px,1fr) auto;
  }
  .answers-zone { padding: 12px 8px; border-radius: 22px; gap: 8px; }
  .answer-card { border-width: 2px; border-radius: 19px; }
}
@media (max-width: 370px) and (max-height: 680px) and (orientation: portrait) {
  .board { padding: 10px; gap: 7px; }
  .answers-zone { padding: 10px 6px; }
}

/* A responsive parchment contour keeps its tail aimed at Ori. Unlike the
   bitmap frame, it has no transparent gutters competing with the content. */
.speech {
  isolation: isolate;
  border: 3px solid #bc864e;
  border-radius: 28px 32px 27px 30px;
  background: #fff8e6;
  box-shadow: inset 0 2px 0 #fffdf4, 0 5px 12px rgba(80,50,25,.18);
  padding: 16px;
  gap: 8px;
  min-height: 98px;
}
.speech > span { position: relative; z-index: 1; }
.speech::before { content: none; }
.speech::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 22px;
  height: 22px;
  left: calc(50% - 11px);
  top: calc(100% - 9px);
  bottom: auto;
  border: 0;
  border-right: 3px solid #bc864e;
  border-bottom: 3px solid #bc864e;
  border-radius: 0 0 6px 0;
  background: #fff8e6;
  transform: rotate(45deg);
  pointer-events: none;
}
.guide-zone:has(.guide-button.speaking) .speech {
  box-shadow: inset 0 2px 0 #fffdf4, 0 0 14px rgba(242,193,65,.6);
}

/* The celebration frame's pale center keeps teaching text readable. */
#reward-overlay .panel, #final-overlay .panel {
  border: 0;
  border-radius: 45px;
  background: url('assets/ui/ui-panel-celebration.webp') center / 112% 128% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 16px 24px rgba(35,22,12,.3));
  padding: 76px 36px 40px;
}
#final-overlay .panel::before { content: none; }
#menu-overlay .panel {
  border: 0;
  background: url('assets/ui/ui-panel-pause.webp') center / 117% 116% no-repeat;
  box-shadow: none;
  padding: 82px 34px 42px;
  filter: drop-shadow(0 16px 24px rgba(35,22,12,.3));
}
#menu-overlay .panel h2, #menu-overlay .panel p {
  color: #3d291b;
  text-shadow: 0 1px 1px #ffe5b2;
}
.overlay-sound { right: 26px; top: 23px; }
@media (orientation: portrait) {
  .speech { padding: 12px 13px; min-height: 80px; }
  .speech::after {
    left: -13px;
    top: calc(50% - 11px);
    bottom: auto;
    border-right: 0;
    border-left: 3px solid #bc864e;
    border-radius: 0 0 0 6px;
  }
  #menu-overlay .panel { padding: 76px 17px 38px; }
  #reward-overlay .panel, #final-overlay .panel { padding: 76px 24px 35px; }
  .panel-button { width: 64px; height: 64px; min-width: 64px; min-height: 64px; }
  .overlay-sound { right: 21px; top: 20px; }
  .level-menu-grid { grid-template-columns: repeat(5,minmax(48px,60px)); gap: 2px; }
  .level-pick { min-width: 48px; }
}
@media (max-width: 370px) and (max-height: 680px) and (orientation: portrait) {
  .speech { min-height: 72px; padding: 10px 12px; gap: 6px; }
}

/* Deluxe: a sunlit sand tray with large, grounded teaching objects. */
.board {
  background: radial-gradient(ellipse at 26% 0, #fffdf7, transparent 68%),
    linear-gradient(155deg, #fcf3df, #f4dfb9);
  border-color: #bc935f;
  box-shadow: inset 0 2px 0 #fffdf7, inset 0 -5px 0 rgba(179,133,72,.12),
    0 7px 0 rgba(132,87,39,.17), 0 18px 32px rgba(79,52,24,.18);
}
.parade-scene {
  padding-bottom: 32px;
  background: radial-gradient(ellipse 64% 13% at 50% 64%, rgba(180,133,65,.14), transparent);
}
.duckling { height: clamp(96px,12vw,158px); cursor: pointer; }
.duckling img { filter: drop-shadow(0 8px 5px rgba(99,65,26,.19)); }
.answers-zone {
  background: linear-gradient(#f2e2c4, #edd7b1);
  box-shadow: inset 0 2px 3px rgba(139,94,43,.12), 0 1px 0 #fff9eb;
}
.answer-card { transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.count-label {
  position: absolute;
  z-index: 4;
  bottom: -22px;
  left: calc(50% - 15px);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #c7a16a;
  background: #fff9e9;
  color: #553b22;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 3px 5px rgba(91,57,25,.13);
  pointer-events: none;
}
.answer-proven .count-label { background: #ffe9a5; border-color: #d0a04a; }
.answer-proven .answer-card.selected::after {
  content: '✓'; position: absolute; right: -8px; top: -8px;
  width: 26px; height: 26px; display: grid; place-items: center;
  color: #5f4527; background: #f6d67d; border: 2px solid #fff9e9;
  border-radius: 50%; font-size: 18px;
}
.parade-direction { position: absolute; left: 9px; bottom: 0; width: 70px; height: 28px; }
.parade-direction svg { width: 100%; height: 100%; fill: #d8b575; stroke: #8e6a39; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hidden-clue {
  padding: 0;
  cursor: pointer;
  align-self: center;
  height: 60px;
  border: 0;
  border-bottom: 3px solid #c4a16a;
  border-radius: 85% 60% 25% 22%;
  background: linear-gradient(150deg, #ead5a4 10%, #d1ad72 90%);
  box-shadow: inset 0 3px 0 #f5e6c2, 0 6px 6px rgba(113,80,35,.15);
}
.hidden-clue::after { content: ''; left: 16%; bottom: -9px; width: 11px; height: 6px; border-radius: 50%; background: #d89843; box-shadow: 18px 0 0 #d89843; transform: none; }
.hidden-clue.revealed::before { bottom: 26px; }
.board[data-mode="ordinal"] .answer-grid { display: flex; }
.board[data-mode="ordinal"] .ordinal-prompt { font-family: 'Trebuchet MS',sans-serif; letter-spacing: 2px; }
@media (orientation: portrait) {
  .parade-scene { padding-bottom: 28px; gap: 8px; }
  .duckling { height: 88px; }
  .count-label { width: 26px; height: 26px; left: calc(50% - 13px); bottom: -19px; font-size: 16px; }
  .hidden-clue { height: 48px; }
  .parade-direction { width: 58px; height: 22px; left: 4px; bottom: 0; }
}
@media (max-width: 370px) and (max-height: 680px) and (orientation: portrait) {
  .duckling { height: 74px; }
}