.home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
}

.home-actions .secondary-button {
  min-width: 150px;
  min-height: 52px;
}

.lab-gallery,
.lab-exercise {
  display: grid;
  min-height: 0;
}

.lab-gallery {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
}

.lab-gallery .topbar,
.lab-exercise .topbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.lab-gallery-note {
  margin: 0;
  color: var(--wood);
  font-size: clamp(13px, 2.7vh, 18px);
  text-align: center;
}

.lab-gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.lab-page-switch {
  display: flex;
  gap: 6px;
}

.lab-page-button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2px solid var(--wood);
  border-radius: 50%;
  color: var(--forest);
  background: white;
  font-weight: 800;
}

.lab-page-button.active {
  border-color: var(--forest);
  color: white;
  background: var(--forest);
}

.lab-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(7px, 1.2vw, 15px);
  min-height: 0;
}

.lab-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  padding: 5px;
  border: 2px solid var(--accent, var(--wood));
  border-radius: 19px 23px 18px 21px;
  background: rgba(255, 255, 255, 0.83);
}

.lab-card img {
  width: min(80px, 10vh);
  height: min(80px, 10vh);
  object-fit: contain;
}

.lab-card-title {
  overflow: hidden;
  width: 100%;
  font-size: clamp(12px, 2.9vh, 18px);
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artwork-summary {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--wood);
  font-size: clamp(11px, 2.5vh, 16px);
}

.artwork-summary strong {
  color: var(--forest);
}

.lab-exercise {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 5px;
}

.lab-counter {
  min-width: 55px;
  color: var(--forest);
  font-weight: 800;
  text-align: right;
}

.lab-playground {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 9px;
  border: 2px solid rgba(155, 112, 79, 0.65);
  border-radius: 26px 30px 25px 29px;
  background: rgba(255, 253, 246, 0.73);
  overflow: hidden;
}

.lab-feedback {
  min-height: 28px;
  margin: 0;
  color: var(--wood);
  font-size: clamp(15px, 3.4vh, 21px);
  font-weight: 700;
  text-align: center;
}

.lab-feedback.success {
  color: var(--forest);
}

.lab-choice-row,
.lab-scene-row,
.lab-order-bank,
.lab-sort-bins {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.5vw, 30px);
}

.lab-picture-card,
.lab-scene-card,
.lab-match-target,
.lab-pattern-option,
.memory-card {
  display: grid;
  place-items: center;
  border: 2px solid var(--wood);
  border-radius: 21px 25px 20px 23px;
  background: white;
}

.lab-picture-card {
  width: clamp(95px, 20vh, 155px);
  height: clamp(96px, 24vh, 162px);
}

.lab-picture-card img,
.lab-match-target img,
.memory-card img {
  width: 77%;
  height: 77%;
  object-fit: contain;
}

.lab-picture-card.correct,
.lab-scene-card.correct,
.lab-pattern-option.correct {
  border: 4px solid var(--forest);
  background: #eaf1df;
}

.lab-picture-card.retry,
.lab-scene-card.retry,
.lab-pattern-option.retry {
  border: 4px solid var(--sun);
}

.match-board {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  width: min(690px, 95%);
  height: 100%;
}

.match-source {
  z-index: 1;
  width: clamp(76px, 19vh, 120px);
  height: clamp(76px, 19vh, 120px);
  border: 3px solid var(--river);
  border-radius: 50%;
  color: var(--forest);
  background: white;
  font-size: clamp(43px, 11vh, 76px);
  font-weight: 800;
}

.match-source.selected {
  border-color: var(--sun);
  background: #fff0c9;
}

.match-target-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.lab-match-target {
  width: clamp(116px, 26vw, 200px);
  height: clamp(65px, 18vh, 104px);
}

.lab-match-target .asset-group img {
  width: clamp(32px, 10vh, 57px);
  height: clamp(32px, 10vh, 57px);
}

.match-wire {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lab-placement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  width: min(760px, 100%);
  height: 100%;
}

.lab-drop-basket {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  width: clamp(136px, 33vw, 230px);
  height: clamp(112px, 28vh, 160px);
  border: 3px dashed var(--wood);
  border-radius: 24px 29px 23px 28px;
  background: var(--paper-deep);
}

.lab-drop-basket.ready {
  border-color: var(--sun);
  background: #fff0c9;
}

.lab-drop-basket img,
.lab-drag-token img {
  width: clamp(55px, 15vh, 82px);
  height: clamp(55px, 15vh, 82px);
  object-fit: contain;
  pointer-events: none;
}

.lab-drag-token {
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(80px, 21vh, 112px);
  height: clamp(80px, 21vh, 112px);
  border: 3px solid var(--forest);
  border-radius: 24px;
  background: white;
  touch-action: none;
}

.lab-drag-token.dragging {
  z-index: 10;
  border-color: var(--sun);
}

.lab-sort {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.sort-instruction {
  margin: 0;
  color: var(--forest);
  font-size: clamp(13px, 3vh, 18px);
  font-weight: 800;
}

.sort-item {
  position: relative;
  z-index: 2;
  width: clamp(62px, 16vh, 94px);
  height: clamp(62px, 16vh, 94px);
  cursor: grab;
  touch-action: none;
}

.sort-item.dragging {
  z-index: 10;
  border-color: var(--sun);
  cursor: grabbing;
}

.sort-item img {
  pointer-events: none;
}

.sort-bin {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  width: clamp(120px, 25vw, 180px);
  min-height: 70px;
  border: 2px dashed var(--wood);
  border-radius: 19px;
  background: var(--paper-deep);
  font-weight: 800;
}

.sort-bin.ready {
  border-color: var(--forest);
  background: #eaf1df;
}

.sort-stored {
  display: grid;
  width: clamp(32px, 8vh, 48px);
  height: clamp(32px, 8vh, 48px);
  place-items: center;
}

.sort-stored img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.lab-order {
  display: grid;
  justify-items: center;
  gap: 13px;
}

.lab-order-track {
  display: flex;
  gap: 9px;
}

.order-slot,
.order-card {
  display: grid;
  width: clamp(57px, 15vh, 90px);
  height: clamp(64px, 17vh, 105px);
  place-items: center;
  border: 2px solid var(--wood);
  border-radius: 16px;
  font-size: clamp(32px, 10vh, 56px);
  font-weight: 800;
}

.order-slot {
  color: var(--wood);
  background: var(--paper-deep);
}

.order-slot.filled {
  border-color: var(--forest);
  color: var(--forest);
  background: white;
}

.order-card {
  color: var(--forest);
  background: white;
}

.lab-pattern {
  display: grid;
  justify-items: center;
  gap: 13px;
}

.pattern-series,
.pattern-options {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.5vw, 21px);
}

.pattern-shape {
  width: clamp(45px, 12vh, 75px);
  height: clamp(45px, 12vh, 75px);
  border-radius: 50%;
}

.pattern-shape.coral {
  background: var(--coral);
}

.pattern-shape.river {
  background: var(--river);
}

.pattern-blank {
  display: grid;
  width: clamp(47px, 12vh, 77px);
  height: clamp(47px, 12vh, 77px);
  place-items: center;
  border: 3px dashed var(--wood);
  border-radius: 50%;
  color: var(--wood);
  font-size: 28px;
}

.lab-pattern-option {
  width: clamp(62px, 16vh, 90px);
  height: clamp(62px, 16vh, 90px);
}

.memory-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 20px);
}

.memory-card {
  width: clamp(86px, 21vw, 140px);
  height: clamp(100px, 27vh, 160px);
}

.memory-back {
  color: var(--forest);
  font-size: 44px;
}

.memory-card.matched {
  border-color: var(--leaf);
  background: #edf4e9;
}

.trace-board {
  position: relative;
  width: min(700px, 97%);
  height: min(210px, 92%);
  touch-action: none;
}

.trace-svg {
  width: 100%;
  height: 100%;
}

.trace-start,
.trace-end {
  font-size: 20px;
  font-weight: 800;
}

.maze-board {
  display: grid;
  grid-template-columns: repeat(5, clamp(45px, 13vh, 75px));
  grid-template-rows: repeat(3, clamp(45px, 13vh, 75px));
  gap: 4px;
}

.maze-cell {
  display: grid;
  place-items: center;
  border: 1px solid rgba(155, 112, 79, 0.24);
  border-radius: 12px;
  background: #fffdf6;
}

.maze-cell.wall {
  border-color: transparent;
  background: #c9d5b8;
}

.maze-cell.visited {
  background: #ecdfac;
}

.maze-cell img {
  width: 84%;
  height: 84%;
  object-fit: contain;
}

.shape-board {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.shape-comparison {
  display: flex;
  align-items: center;
  gap: clamp(30px, 9vw, 90px);
}

.shape-hole,
.shape-piece {
  width: clamp(66px, 18vh, 105px);
  height: clamp(66px, 18vh, 105px);
  clip-path: polygon(50% 8%, 94% 90%, 6% 90%);
}

.shape-hole {
  background: var(--paper-deep);
}

.shape-piece {
  background: var(--coral);
  transition: transform 180ms ease;
}

.shape-actions {
  display: flex;
  gap: 9px;
}

.shape-actions button {
  min-height: 42px;
}

.grid-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 5vw, 48px);
}

.logic-grid {
  display: grid;
  grid-template-columns: repeat(3, clamp(43px, 12vh, 73px));
  grid-template-rows: repeat(3, clamp(43px, 12vh, 73px));
  gap: 4px;
}

.logic-cell {
  display: grid;
  place-items: center;
  border: 1px solid var(--wood);
  border-radius: 10px;
  background: white;
}

.logic-cell.correct {
  border-color: var(--forest);
  background: #e8f0db;
}

.logic-cell img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.grid-arrow {
  color: var(--forest);
  font-size: 33px;
}

.lab-scene-card {
  width: min(41vw, 350px);
  height: min(44vh, 225px);
  padding: 5px;
  overflow: hidden;
}

.lab-scene-card img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  object-fit: cover;
}

.touch-count-board,
.size-order-board,
.shadow-fit-board,
.share-board,
.story-order-board,
.word-build-board,
.rhythm-board,
.pattern-drop-board {
  display: grid;
  justify-items: center;
  gap: clamp(7px, 2vh, 16px);
}

.touch-count-items,
.size-slot-row,
.size-token-row,
.shadow-hole-row,
.rabbit-row,
.story-slot-row,
.story-card-row,
.letter-options,
.word-slot-row,
.word-token-row,
.rhythm-syllables,
.pattern-drop-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 19px);
}

.count-fruit {
  position: relative;
  display: grid;
  width: clamp(62px, 16vh, 98px);
  height: clamp(62px, 16vh, 98px);
  place-items: center;
  border: 2px solid var(--wood);
  border-radius: 20px;
  background: white;
}

.count-fruit img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.count-fruit.touched {
  border-color: var(--forest);
  background: #eaf1df;
}

.count-fruit span {
  position: absolute;
  right: 6px;
  bottom: 3px;
  color: var(--forest);
  font-weight: 800;
}

.touch-total,
.rhythm-count {
  color: var(--forest);
  font-size: clamp(24px, 7vh, 43px);
}

.compare-card {
  width: clamp(140px, 31vw, 225px);
  height: clamp(120px, 31vh, 190px);
}

.compare-card .asset-group img {
  width: clamp(35px, 9vh, 58px);
  height: clamp(35px, 9vh, 58px);
}

.odd-card {
  width: clamp(74px, 18vw, 130px);
  height: clamp(82px, 23vh, 145px);
}

.size-slot,
.shadow-hole,
.rabbit-recipient,
.spatial-target,
.story-slot,
.word-slot,
.pattern-drop-hole {
  display: grid;
  place-items: center;
  border: 2px dashed var(--wood);
  border-radius: 17px;
  background: var(--paper-deep);
}

[data-lab-target].ready {
  border-color: var(--forest);
  background: #eaf1df;
}

.size-slot {
  grid-template-rows: minmax(0, 1fr) auto;
  width: clamp(74px, 17vw, 112px);
  height: clamp(76px, 23vh, 120px);
  padding: 5px;
}

.size-slot-label {
  color: var(--wood);
  font-size: clamp(10px, 2.4vh, 14px);
  white-space: nowrap;
}

.size-placeholder {
  color: var(--wood);
  font-size: 26px;
}

.size-token,
.shadow-token,
.share-token,
.spatial-token,
.story-drag-card,
.word-token,
.pattern-drop-token {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 2px solid var(--forest);
  border-radius: 17px;
  background: white;
  cursor: grab;
  touch-action: none;
}

.size-token.dragging,
.shadow-token.dragging,
.share-token.dragging,
.spatial-token.dragging,
.story-drag-card.dragging,
.word-token.dragging,
.pattern-drop-token.dragging {
  z-index: 10;
  border-color: var(--sun);
  cursor: grabbing;
}

.size-token *,
.shadow-token *,
.share-token *,
.spatial-token *,
.story-drag-card *,
.word-token *,
.pattern-drop-token * {
  pointer-events: none;
}

.size-token {
  width: clamp(63px, 15vh, 85px);
  height: clamp(63px, 15vh, 85px);
}

.size-shape {
  display: block;
  border-radius: 50%;
  background: var(--river);
}

.size-shape.size-0 {
  width: 25px;
  height: 25px;
}

.size-shape.size-1 {
  width: 42px;
  height: 42px;
}

.size-shape.size-2 {
  width: 57px;
  height: 57px;
}

.shadow-hole,
.shadow-token {
  width: clamp(68px, 17vh, 98px);
  height: clamp(68px, 17vh, 98px);
}

.geometry-shape {
  display: block;
  width: clamp(42px, 11vh, 67px);
  height: clamp(42px, 11vh, 67px);
  background: #d4ccb9;
}

.geometry-shape.circle {
  border-radius: 50%;
}

.geometry-shape.triangle {
  clip-path: polygon(50% 4%, 96% 94%, 4% 94%);
}

.geometry-shape.square {
  border-radius: 5px;
}

.shadow-token .geometry-shape,
.shadow-hole.filled .geometry-shape {
  background: var(--coral);
}

.rabbit-recipient {
  grid-template-rows: minmax(0, 1fr) auto;
  width: clamp(81px, 20vw, 120px);
  height: clamp(100px, 27vh, 152px);
  padding: 6px;
}

.rabbit-recipient > img {
  width: clamp(44px, 12vh, 75px);
  height: clamp(44px, 12vh, 75px);
  object-fit: contain;
}

.rabbit-plate {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--wood);
}

.rabbit-plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.share-token,
.spatial-token {
  width: clamp(59px, 15vh, 84px);
  height: clamp(59px, 15vh, 84px);
}

.share-token img,
.spatial-token img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.spatial-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 12vw, 130px);
}

.spatial-map {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.spatial-target {
  width: clamp(87px, 20vw, 120px);
  height: clamp(44px, 13vh, 66px);
  color: var(--wood);
  font-weight: 800;
}

.spatial-target img,
.spatial-house img {
  width: clamp(40px, 11vh, 64px);
  height: clamp(40px, 11vh, 64px);
  object-fit: contain;
}

.spatial-house {
  display: grid;
  place-items: center;
}

.story-slot,
.story-drag-card {
  width: clamp(114px, 25vw, 210px);
  height: clamp(73px, 20vh, 127px);
  overflow: hidden;
}

.story-slot img,
.story-drag-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-arrow {
  color: var(--forest);
  font-size: 26px;
  font-weight: 800;
}

.letter-start-board {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(17px, 6vw, 65px);
}

.letter-prompt {
  color: var(--forest);
  font-size: clamp(60px, 20vh, 118px);
}

.letter-card {
  display: grid;
  justify-items: center;
  width: clamp(76px, 17vw, 130px);
  min-height: clamp(92px, 25vh, 157px);
  padding: 7px;
  border: 2px solid var(--wood);
  border-radius: 19px;
  background: white;
  font-weight: 800;
}

.letter-card.correct {
  border-color: var(--forest);
  background: #eaf1df;
}

.letter-card img {
  width: clamp(52px, 15vh, 85px);
  height: clamp(52px, 15vh, 85px);
  object-fit: contain;
}

.word-build-board {
  grid-template-columns: auto auto;
  align-items: center;
}

.word-model {
  display: grid;
  grid-row: 1 / 3;
  justify-items: center;
  padding-right: clamp(12px, 5vw, 48px);
  color: var(--forest);
  font-size: 24px;
}

.word-model img {
  width: clamp(72px, 19vh, 115px);
  height: clamp(72px, 19vh, 115px);
  object-fit: contain;
}

.word-slot,
.word-token {
  width: clamp(61px, 17vh, 95px);
  height: clamp(61px, 17vh, 95px);
  color: var(--forest);
  font-size: clamp(32px, 10vh, 58px);
  font-weight: 800;
}

.rhythm-word {
  display: flex;
  align-items: center;
  gap: 15px;
}

.rhythm-word img {
  width: clamp(58px, 15vh, 88px);
  height: clamp(58px, 15vh, 88px);
  object-fit: contain;
}

.rhythm-syllable {
  display: grid;
  width: clamp(41px, 11vh, 64px);
  height: clamp(41px, 11vh, 64px);
  place-items: center;
  border: 2px solid var(--wood);
  border-radius: 50%;
  background: white;
  font-size: clamp(20px, 6vh, 33px);
  font-weight: 800;
}

.rhythm-syllable.active {
  border-color: var(--forest);
  color: white;
  background: var(--forest);
}

.rhythm-drum {
  min-width: 115px;
  min-height: 54px;
  border: 2px solid var(--coral);
  border-radius: 28px;
  color: white;
  background: var(--coral);
  font-size: 21px;
  font-weight: 800;
}

.pattern-drop-hole {
  width: clamp(52px, 14vh, 82px);
  height: clamp(52px, 14vh, 82px);
  color: var(--wood);
  font-size: 29px;
}

.pattern-drop-token {
  width: clamp(65px, 17vh, 95px);
  height: clamp(65px, 17vh, 95px);
}

.paint-board,
.sticker-board,
.balance-board,
.sortable-board,
.mix-board,
.gravity-board,
.slope-board {
  display: grid;
  justify-items: center;
  gap: clamp(7px, 2vh, 15px);
}

.activity-instruction {
  margin: 0;
  color: var(--forest);
  font-size: clamp(12px, 3vh, 19px);
  font-weight: 800;
  text-align: center;
}

.paint-palette,
.sticker-slots,
.puzzle-frame,
.puzzle-bank,
.peek-door-row,
.balance-pans,
.balance-controls,
.mirror-options,
.mix-colors,
.gravity-controls,
.slope-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.3vw, 23px);
}

.paint-shape {
  width: clamp(92px, 26vh, 151px);
  height: clamp(92px, 26vh, 151px);
  border: 3px solid var(--wood);
  border-radius: 50%;
  background: white;
}

.paint-shape.filled {
  border-color: var(--coral);
  background: var(--coral);
}

.paint-pot,
.mix-color {
  width: clamp(46px, 12vh, 68px);
  height: clamp(46px, 12vh, 68px);
  border: 3px solid transparent;
  border-radius: 50%;
}

.paint-pot {
  position: relative;
  margin-bottom: 18px;
  appearance: none;
}

.paint-color-name {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  color: var(--forest);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transform: translateX(-50%);
}

.paint-pot.coral,
.mix-color.coral,
.stack-block.coral {
  background: var(--coral);
}

.paint-pot.river,
.mix-color.river,
.stack-block.river {
  background: var(--river);
}

.paint-pot.sun,
.mix-color.sun,
.stack-block.sun {
  background: var(--sun);
}

.paint-pot.active,
.mix-color.selected {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(49, 92, 80, 0.14);
}

.sticker-slot {
  display: grid;
  width: clamp(74px, 19vh, 115px);
  height: clamp(74px, 19vh, 115px);
  place-items: center;
  border: 2px dashed var(--wood);
  border-radius: 20px;
  color: var(--wood);
  background: var(--paper-deep);
  font-size: 32px;
}

.sticker-slot.filled {
  border-color: var(--forest);
  background: #eaf1df;
}

.sticker-slot img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.dot-connect-board {
  position: relative;
  width: min(500px, 80vw);
  height: 130px;
}

.dot-connect-wire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.dot-point {
  position: absolute;
  top: 50%;
  display: grid;
  width: clamp(54px, 15vh, 79px);
  height: clamp(54px, 15vh, 79px);
  place-items: center;
  border: 3px solid var(--wood);
  border-radius: 50%;
  color: var(--forest);
  background: white;
  font-size: 29px;
  font-weight: 800;
  transform: translate(-50%, -50%);
}

.dot-point.connected {
  border-color: var(--forest);
  background: #eaf1df;
}

.puzzle-frame {
  gap: 1px;
}

.puzzle-board {
  display: grid;
  grid-template-columns: auto auto;
  align-items: start;
  justify-items: center;
  gap: 9px clamp(17px, 6vw, 57px);
}

.puzzle-instruction {
  grid-column: 1 / -1;
}

.puzzle-section {
  display: grid;
  justify-items: center;
  gap: 7px;
}

.puzzle-section-label,
.puzzle-complete {
  color: var(--forest);
  font-size: clamp(12px, 2.8vh, 17px);
  white-space: nowrap;
}

.puzzle-hole {
  display: grid;
  width: clamp(72px, 17vh, 97px);
  height: clamp(90px, 22vh, 121px);
  place-items: center;
  border: 2px dashed var(--wood);
  background: var(--paper-deep);
}

.puzzle-hole:first-child {
  border-radius: 17px 0 0 17px;
}

.puzzle-hole:last-child {
  border-radius: 0 17px 17px 0;
}

.puzzle-piece-color {
  display: block;
  width: clamp(58px, 14vh, 78px);
  height: clamp(76px, 18vh, 101px);
}

.puzzle-piece-color.left {
  border-radius: 11px 0 0 11px;
  background: var(--river);
}

.puzzle-piece-color.right {
  border-radius: 0 11px 11px 0;
  background: var(--coral);
}

.puzzle-guide {
  opacity: 0.3;
}

.puzzle-token,
.stack-token {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 2px solid var(--forest);
  border-radius: 15px;
  background: white;
  cursor: grab;
  touch-action: none;
}

.puzzle-token {
  width: clamp(65px, 16vh, 91px);
  height: clamp(81px, 20vh, 111px);
}

.puzzle-token *,
.stack-token * {
  pointer-events: none;
}

.puzzle-token.dragging,
.stack-token.dragging {
  z-index: 10;
  border-color: var(--sun);
}

.stack-board {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: clamp(38px, 12vw, 105px);
}

.stack-tower {
  display: grid;
  gap: 3px;
}

.stack-slot {
  display: grid;
  width: clamp(110px, 27vw, 165px);
  height: clamp(38px, 11vh, 57px);
  place-items: center;
  border: 2px dashed var(--wood);
  border-radius: 12px;
  color: var(--wood);
  background: var(--paper-deep);
}

.stack-block {
  display: block;
  width: clamp(91px, 22vw, 137px);
  height: clamp(27px, 8vh, 42px);
  border-radius: 8px;
}

.stack-token {
  width: clamp(104px, 25vw, 155px);
  height: clamp(45px, 12vh, 65px);
}

.peek-door {
  display: grid;
  width: clamp(90px, 22vw, 153px);
  height: clamp(113px, 31vh, 181px);
  place-items: center;
  border: 2px solid var(--wood);
  border-radius: 22px;
  background: #ead7af;
}

.peek-door.opened {
  border-color: var(--forest);
  background: white;
}

.peek-door img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.door-handle {
  color: var(--wood);
  font-size: 45px;
  font-weight: 800;
}

.length-board {
  display: grid;
  gap: clamp(5px, 1.8vh, 12px);
  width: min(455px, 78vw);
}

.length-board .activity-instruction {
  white-space: nowrap;
}

.length-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 10px;
  color: var(--forest);
  font-weight: 800;
}

.length-bar {
  height: clamp(24px, 7vh, 35px);
  border-radius: 15px;
}

.length-bar.target {
  width: 157px;
  background: var(--wood);
}

.length-bar.current {
  background: var(--river);
}

.length-slider {
  width: 100%;
  height: 44px;
  accent-color: var(--forest);
}

.length-direction {
  justify-self: center;
  color: var(--forest);
  font-size: clamp(13px, 3vh, 18px);
}

.length-slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: -7px;
  color: var(--wood);
  font-size: 12px;
  font-weight: 700;
}

.balance-pan {
  display: grid;
  width: clamp(130px, 30vw, 190px);
  min-height: clamp(105px, 27vh, 148px);
  justify-items: center;
  align-content: center;
  gap: 5px;
  border: 2px solid var(--wood);
  border-radius: 20px;
  background: white;
}

.balance-pan .asset-group img {
  width: clamp(31px, 8vh, 46px);
  height: clamp(31px, 8vh, 46px);
}

.balance-equals,
.empty-pan {
  color: var(--forest);
  font-size: 29px;
}

.balance-control,
.gravity-move,
.slope-control {
  display: grid;
  width: clamp(49px, 13vh, 67px);
  height: clamp(44px, 12vh, 62px);
  place-items: center;
  border: 2px solid var(--wood);
  border-radius: 17px;
  color: var(--forest);
  background: white;
  font-size: 27px;
  font-weight: 800;
}

.balance-control.plus,
.slope-control.active {
  border-color: var(--forest);
  background: #eaf1df;
}

.mirror-board {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: clamp(16px, 5vw, 45px);
}

.mirror-sample {
  display: grid;
  justify-items: center;
  color: var(--forest);
}

.mirror-sample span,
.mirror-option {
  font-size: clamp(54px, 16vh, 93px);
}

.mirror-divider {
  width: 6px;
  height: clamp(115px, 33vh, 180px);
  border-radius: 5px;
  background: #a4c7d4;
}

.mirror-option {
  width: clamp(78px, 18vw, 121px);
  height: clamp(87px, 24vh, 133px);
  border: 2px solid var(--wood);
  border-radius: 20px;
  color: var(--forest);
  background: white;
}

.mirror-option.correct {
  border-color: var(--forest);
  background: #eaf1df;
}

.seek-grid {
  display: grid;
  grid-template-columns: repeat(3, clamp(58px, 16vh, 96px));
  grid-template-rows: repeat(3, clamp(50px, 14vh, 82px));
  gap: 5px;
}

.seek-item {
  display: grid;
  place-items: center;
  border: 2px solid var(--wood);
  border-radius: 14px;
  background: white;
}

.seek-item.correct {
  border-color: var(--forest);
  background: #eaf1df;
}

.seek-item img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.sortable-board p {
  margin: 0;
  color: var(--wood);
  font-weight: 700;
}

.sortable-track {
  display: flex;
  gap: clamp(10px, 2vw, 22px);
  touch-action: none;
}

.sortable-card {
  display: grid;
  width: clamp(80px, 22vh, 133px);
  height: clamp(92px, 25vh, 149px);
  place-items: center;
  border: 3px solid var(--wood);
  border-radius: 21px;
  color: var(--forest);
  background: white;
  font-size: clamp(45px, 14vh, 83px);
  font-weight: 800;
  cursor: grab;
  touch-action: none;
}

.sortable-card.correct {
  border-color: var(--forest);
  background: #eaf1df;
}

.sortable-card-ghost {
  border-color: var(--sun);
  opacity: 0.48;
}

.mix-preview {
  display: grid;
  width: clamp(95px, 25vh, 140px);
  height: clamp(95px, 25vh, 140px);
  place-items: center;
  border: 3px dashed var(--wood);
  border-radius: 50%;
  color: var(--wood);
  background: white;
  font-size: 27px;
  font-weight: 800;
}

.mix-preview.mixed {
  border-color: #e7883c;
  color: white;
  background: #e7883c;
  font-size: 19px;
}

.gravity-stage,
.slope-stage {
  position: relative;
  width: clamp(260px, 58vw, 450px);
  height: clamp(117px, 32vh, 175px);
  overflow: hidden;
  border: 2px solid rgba(155, 112, 79, 0.38);
  border-radius: 18px;
  background: #fffdf6;
}

.gravity-fruit {
  position: absolute;
  z-index: 1;
  top: 5px;
  left: 50%;
  width: 46px;
  height: 46px;
  transform: translateX(-50%);
}

.gravity-fruit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gravity-fruit.caught {
  animation: gravity-fall 650ms ease-in forwards;
}

@keyframes gravity-fall {
  from { top: 5px; }
  to { top: calc(100% - 61px); }
}

.gravity-guide-line {
  position: absolute;
  top: 50px;
  bottom: 38px;
  left: 50%;
  border-left: 2px dashed rgba(155, 112, 79, 0.4);
}

.gravity-basket {
  position: absolute;
  z-index: 2;
  bottom: 5px;
  display: grid;
  grid-template-rows: 8px 1fr;
  width: 80px;
  height: 43px;
  transform: translateX(-50%);
}

.gravity-basket-rim {
  width: 100%;
  height: 8px;
  border-radius: 6px;
  background: var(--wood);
}

.gravity-basket-body {
  margin: 0 6px;
  border: 4px solid var(--wood);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  background: rgba(233, 185, 79, 0.2);
}

.gravity-drop-button,
.slope-roll-button {
  min-width: 103px;
  min-height: 44px;
  border: 2px solid var(--forest);
  border-radius: 18px;
  color: white;
  background: var(--forest);
  font-weight: 800;
}

.slope-ramp {
  position: absolute;
  top: 55%;
  left: 14%;
  width: 70%;
  height: 11px;
  border-radius: 8px;
  background: var(--wood);
  transition: transform 160ms ease;
}

.slope-ramp.left {
  transform: rotate(-13deg);
}

.slope-ramp.right {
  transform: rotate(13deg);
}

.slope-ball {
  position: absolute;
  top: 20%;
  left: 47%;
  color: var(--coral);
  font-size: 36px;
  line-height: 1;
}

.slope-ball.rolling {
  animation: slope-roll-right 780ms ease-in forwards;
}

@keyframes slope-roll-right {
  from { top: 20%; left: 47%; transform: rotate(0deg); }
  to { top: 63%; left: 82%; transform: rotate(360deg); }
}

.slope-house {
  position: absolute;
  right: 5px;
  bottom: 1px;
  width: 55px;
  height: 55px;
}

.slope-house img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shape-sort-board,
.five-frame-board,
.missing-number-board,
.between-board,
.color-collect-board,
.length-compare-board,
.tower-match-board,
.rain-gear-board,
.float-sink-board,
.water-level-board {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(5px, 1.7vh, 12px);
  max-width: 100%;
  max-height: 100%;
}

.shape-sort-token,
.shape-sort-bin,
.between-token,
.number-option,
.rain-option,
.float-option {
  display: grid;
  place-items: center;
  border: 2px solid var(--wood);
  border-radius: 18px;
  background: white;
}

.shape-sort-token {
  width: 65px;
  height: 58px;
  touch-action: none;
}

.shape-sort-bins,
.missing-series,
.missing-options,
.between-track,
.color-collect-track,
.tower-pair,
.tower-controls,
.rain-options,
.float-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 18px);
}

.shape-sort-bin {
  position: relative;
  width: 106px;
  height: 76px;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 5px;
  border-style: dashed;
  color: var(--forest);
}

.shape-sort-token .geometry-shape,
.shape-sort-bin .geometry-shape {
  width: 35px;
  height: 35px;
}

.shape-sort-bin.filled,
.shape-sort-bin.ready,
.between-slot.filled,
.between-slot.ready {
  border-color: var(--forest);
  background: #eaf1df;
}

.shape-sort-check {
  position: absolute;
  top: 4px;
  right: 8px;
  color: var(--forest);
  font-weight: 800;
}

.frame-target {
  color: var(--forest);
  font-size: clamp(35px, 9vh, 64px);
  line-height: 1;
}

.five-frame-track {
  display: flex;
  overflow: hidden;
  border: 3px solid var(--wood);
  border-radius: 12px;
}

.frame-cell {
  width: clamp(48px, 8vw, 68px);
  height: clamp(48px, 10vh, 68px);
  border: 0;
  border-right: 2px solid var(--wood);
  color: #dacfb9;
  background: white;
  font-size: 35px;
}

.frame-cell:last-child {
  border-right: 0;
}

.frame-cell.filled {
  color: var(--coral);
  background: #fff0ec;
}

.number-sequence-card,
.number-option {
  width: clamp(54px, 11vh, 80px);
  height: clamp(54px, 11vh, 80px);
  font-size: clamp(31px, 8vh, 49px);
  font-weight: 800;
}

.number-sequence-card {
  display: grid;
  place-items: center;
  color: var(--forest);
  border: 2px solid rgba(155, 112, 79, 0.4);
  border-radius: 15px;
  background: white;
}

.number-sequence-card.missing {
  border: 3px dashed var(--sun);
  color: var(--wood);
}

.number-sequence-card.filled,
.number-option.correct,
.length-choice.correct,
.rain-option.correct,
.float-option.correct {
  border-color: var(--forest);
  background: #eaf1df;
}

.sequence-arrow,
.tower-equals {
  color: var(--wood);
  font-size: 26px;
  font-weight: 800;
}

.between-track {
  gap: clamp(4px, 1.2vw, 11px);
}

.between-animal,
.between-slot,
.between-token {
  width: clamp(48px, 8vw, 75px);
  height: clamp(53px, 12vh, 78px);
}

.between-slot {
  display: grid;
  place-items: center;
  border: 2px dashed var(--wood);
  border-radius: 14px;
  color: var(--wood);
  font-size: 28px;
}

.between-animal img,
.between-slot img,
.between-token img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.between-token {
  width: 58px;
  height: 58px;
  touch-action: none;
}

.collect-color {
  width: clamp(47px, 8vw, 74px);
  height: clamp(47px, 8vw, 74px);
  border: 3px solid transparent;
  border-radius: 50%;
  color: white;
  font-size: 30px;
  font-weight: 800;
}

.collect-color.coral { background: var(--coral); }
.collect-color.river { background: var(--river); }
.collect-color.sun { background: var(--sun); }

.collect-color.collected {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(49, 92, 80, 0.18);
}

.length-choice-list {
  display: grid;
  justify-items: start;
  gap: 15px;
}

.length-choice {
  display: grid;
  width: min(310px, 65vw);
  min-height: 60px;
  align-items: center;
  justify-items: start;
  padding: 9px 12px;
  border: 2px solid var(--wood);
  border-radius: 16px;
  background: white;
}

.compare-measure {
  max-width: 100%;
  height: 25px;
  border-radius: 14px;
}

.compare-measure.long { background: var(--river); }
.compare-measure.short { background: var(--coral); }

.tower-column {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--forest);
  font-size: 14px;
}

.tower-stack {
  display: grid;
  width: 63px;
  height: 99px;
  align-content: end;
  gap: 2px;
  padding: 2px 3px;
  border-bottom: 3px solid var(--wood);
}

.tower-unit {
  width: 55px;
  height: 20px;
  border: 1px dashed rgba(155, 112, 79, 0.3);
  border-radius: 4px;
}

.tower-unit.filled {
  border: 1px solid var(--sun);
  background: var(--sun);
}

.tower-unit.filled:nth-child(2n) {
  border-color: var(--coral);
  background: var(--coral);
}

.rain-gear-board {
  grid-template-columns: auto auto;
  gap: clamp(18px, 6vw, 60px);
}

.rain-weather {
  display: grid;
  justify-items: center;
  color: var(--forest);
}

.rain-weather img {
  width: 93px;
  height: 75px;
  object-fit: contain;
}

.rain-lines {
  color: var(--river);
  font-size: 27px;
}

.rain-option {
  width: clamp(84px, 15vw, 112px);
  height: clamp(100px, 23vh, 134px);
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 7px;
  color: var(--forest);
}

.rain-option img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.water-tank,
.level-cup {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--wood);
  border-top: 0;
  border-radius: 0 0 19px 19px;
  background: rgba(255, 255, 255, 0.78);
}

.water-tank {
  width: clamp(200px, 47vw, 290px);
  height: clamp(79px, 19vh, 126px);
}

.water-surface,
.level-water {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(62, 140, 165, 0.44);
}

.water-surface { height: 63%; }

.floating-ball,
.sinking-stone {
  position: absolute;
  z-index: 1;
  font-size: 34px;
  line-height: 1;
}

.floating-ball {
  top: 22%;
  left: 24%;
  color: var(--coral);
}

.sinking-stone {
  top: 4%;
  right: 23%;
  color: #756e63;
  animation: stone-sink 650ms ease-in forwards;
}

@keyframes stone-sink {
  from { top: 4%; }
  to { top: 68%; }
}

.float-option {
  width: 105px;
  min-height: 51px;
  grid-template-columns: auto auto;
  gap: 7px;
  font-size: 24px;
}

.float-option.ball { color: var(--coral); }
.float-option.stone { color: #756e63; }
.float-option span { color: var(--forest); font-size: 15px; font-weight: 800; }

.level-cup {
  width: 115px;
  height: clamp(91px, 22vh, 145px);
}

.level-water { transition: height 120ms ease; }

.level-target {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 72%;
  left: 0;
  border-top: 3px dashed var(--coral);
}

.water-direction {
  color: var(--forest);
  font-size: 15px;
}

.water-controls {
  display: flex;
  align-items: center;
  gap: 9px;
}

.water-adjust {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 2px solid var(--forest);
  border-radius: 12px;
  color: var(--forest);
  background: white;
  font-size: 23px;
  font-weight: 800;
}

.water-adjust.plus {
  color: white;
  background: var(--forest);
}

.water-slider {
  width: min(245px, 50vw);
  accent-color: var(--river);
}

.water-slider-labels {
  display: flex;
  width: min(335px, 70vw);
  justify-content: space-between;
  color: var(--wood);
  font-size: 13px;
}

@media (max-height: 420px) {
  .home-actions .secondary-button {
    min-height: 48px;
  }

  .lab-gallery,
  .lab-exercise {
    gap: 4px;
  }

  .lab-gallery-note {
    font-size: 12px;
  }

  .lab-page-button {
    width: 26px;
    height: 26px;
  }

  .lab-card img {
    width: 40px;
    height: 40px;
  }

  .lab-grid {
    gap: 7px;
  }

  .lab-feedback {
    min-height: 23px;
    font-size: 15px;
  }

  .rabbit-recipient {
    height: 92px;
  }

  .rabbit-plate {
    width: 26px;
    height: 26px;
  }

  .rhythm-board {
    gap: 5px;
  }

  .rhythm-count {
    font-size: 23px;
  }

  .puzzle-hole {
    height: 76px;
  }

  .puzzle-token {
    height: 70px;
  }

  .puzzle-piece-color {
    height: 58px;
  }

  .gravity-stage,
  .slope-stage {
    height: 117px;
  }

  .paint-board {
    gap: 5px;
  }

  .length-board {
    gap: 4px;
  }

  .shape-sort-board,
  .five-frame-board,
  .missing-number-board,
  .between-board,
  .color-collect-board,
  .tower-match-board,
  .float-sink-board,
  .water-level-board {
    gap: 4px;
  }

  .tower-stack {
    height: 83px;
  }

  .tower-unit {
    height: 16px;
  }

  .tower-column {
    font-size: 12px;
  }

  .level-cup {
    height: 82px;
  }

  .water-slider-labels {
    font-size: 11px;
  }
}

@media (min-height: 600px) and (min-width: 840px) {
  .lab-gallery,
  .lab-exercise {
    gap: 13px;
  }

  .lab-card {
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 14px;
  }

  .lab-card img {
    width: 106px;
    height: 106px;
  }

  .lab-playground {
    padding: 22px;
  }
}