/* Discovery Glade: large picture choices and a calm, readable play surface. */

.discovery {
  display: grid;
  grid-template-columns: minmax(120px, 20%) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(8px, 2vmin, 22px);
  padding: calc(var(--btn) + var(--gutter) * 1.1) var(--gutter) var(--gutter);
  overflow: hidden;
}

.discovery > :not(.scene-backdrop):not(.home):not(.mute) { position: relative; z-index: 1; }
.discovery.discovery-size-mode { height: 100%; grid-template-columns: 1fr; grid-template-rows: 1fr; }
.discovery-size-mode .discovery-guide { display: none; }
.discovery-size-mode .discovery-main { width: min(100%, 1040px); justify-self: center; }

.discovery-guide {
  display: grid;
  place-items: center;
  min-width: 0;
  pointer-events: none;
}
.discovery-guide .char { --char-size: min(20vw, 46vh); }

.discovery-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
}

.discovery-picker-shell {
  width: min(100%, 860px);
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(8px, 1.5vmin, 14px);
}

.discovery-picker {
  width: min(100%, 860px);
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  align-items: center;
  gap: clamp(12px, 2.5vmin, 28px);
}

.discovery-mission-card,
.discovery-choice,
.discovery-piece,
.discovery-target,
.discovery-round-button,
.discovery-finish-button,
.discovery-undo-button,
.discovery-catalog-nav-button,
.discovery-keepsake-button,
.discovery-result-button {
  appearance: none;
  color: var(--ink);
  border: var(--outline) solid var(--ink);
  background: rgba(255, 253, 248, .96);
  box-shadow: var(--shadow-warm);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
}

.discovery-mission-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-width: 112px;
  min-height: 112px;
  padding: 12%;
  border-radius: 34px;
}
.discovery-mission-card[data-family="shape"] { background: color-mix(in srgb, var(--mint) 76%, white); }
.discovery-mission-card[data-family="sort"] { background: color-mix(in srgb, var(--sky) 76%, white); }
.discovery-mission-card[data-family="quantity"] { background: color-mix(in srgb, var(--peach) 76%, white); }
.discovery-catalog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vmin, 16px);
  min-height: 68px;
}
.discovery-catalog-nav-button {
  display: grid;
  place-items: center;
  width: clamp(64px, 9vmin, 74px);
  height: clamp(64px, 9vmin, 74px);
  padding: 11px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--lemon) 78%, white);
}
.discovery-catalog-nav-button svg { width: 100%; height: 100%; }
.discovery-catalog-previous svg { transform: rotate(180deg); }
.discovery-catalog-dots { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 74px; }
.discovery-catalog-dots span {
  width: 13px;
  height: 13px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: rgba(255,253,248,.85);
}
.discovery-catalog-dots .is-current { background: #9b78c8; transform: scale(1.2); }
.discovery-keepsake-button {
  position: relative;
  width: clamp(68px, 10vmin, 82px);
  height: clamp(68px, 10vmin, 82px);
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(#dff4ff 0 58%, #c7eab8 59% 100%);
}
.discovery-owned-build { position: absolute; inset: 0; overflow: hidden; }
.discovery-owned-build > .discovery-scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 400%;
  height: 400%;
  transform: scale(.25);
  transform-origin: top left;
}
.discovery-keepsake-heart {
  position: absolute;
  z-index: 8;
  right: 3px;
  bottom: 3px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 4px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  color: #a84972;
  background: #fff4f8;
}
.discovery-keepsake-heart svg { width: 100%; height: 100%; }
.discovery-mission-card svg,
.discovery-mission-card .discovery-approved-pair,
.discovery-mission-card .discovery-approved-character { width: 100%; height: 100%; }

.discovery-mission {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(230px, .78fr);
  grid-template-rows: 1fr;
  gap: clamp(10px, 2vmin, 24px);
  align-items: center;
}

.discovery-topbar {
  position: absolute;
  right: calc(var(--btn) + var(--gutter) + 8px);
  top: 0;
  z-index: 12;
  display: flex;
  gap: 10px;
}

.discovery-round-button {
  display: grid;
  place-items: center;
  width: clamp(64px, 9vmin, 82px);
  height: clamp(64px, 9vmin, 82px);
  padding: 10px;
  border-radius: 50%;
}
.discovery-change { background: var(--mint); }
.discovery-demo { background: var(--lemon); }
.discovery-round-button svg,
.discovery-round-button img { width: 100%; height: 100%; object-fit: contain; }

.discovery-world {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 64vh);
  aspect-ratio: 1;
  min-width: 250px;
  min-height: 250px;
  justify-self: center;
  padding: clamp(12px, 2vmin, 22px);
  border: var(--outline) solid var(--ink);
  border-radius: clamp(26px, 4vmin, 42px);
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.86) 0 8%, transparent 9%),
    linear-gradient(#dff4ff 0 58%, #c7eab8 59% 100%);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.discovery-scene { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.discovery-size-scene { display: block; width: 100%; height: 100%; overflow: visible; }
.discovery-choice.discovery-size-choice { position: relative; padding: 2px; overflow: hidden; }
.discovery-size-choice[aria-pressed="true"] { border-color: #9162b2; box-shadow: 0 0 0 5px #ffe38a, var(--shadow-warm); background: #fff8dc; }
.discovery-size-tried { position: absolute; right: 7px; top: 7px; width: 12px; height: 12px; border: 2px solid #487b55; border-radius: 50%; background: #a7dfb0; }
.discovery-scene-drop { position: absolute; inset: 10%; border-radius: 28px; pointer-events: none; }
.discovery-landmark { width: 70%; height: 70%; display: grid; place-items: center; }
.discovery-landmark > svg { width: 100%; height: 100%; }

.discovery-landmark--house {
  position: relative;
  width: 58%; height: 58%; margin-top: 18%;
  background: #f4b875; border: 7px solid #754f36; border-radius: 14px;
}
.house-roof { position: absolute; left: -17%; right: -17%; top: -45%; height: 52%; background: #ff9eae; border: 7px solid #754f36; clip-path: polygon(50% 0,100% 100%,0 100%); }
.house-hole { width: 34%; aspect-ratio: 1; border-radius: 50%; background: rgba(81,63,55,.32); border: 7px solid #754f36; }
.discovery-landmark--kite { width: 65%; filter: drop-shadow(0 8px 0 rgba(81,63,55,.15)); }
.discovery-kite { width: 58%; height: 76%; filter: drop-shadow(0 8px 0 rgba(81,63,55,.14)); }
.discovery-landmark--slope { position: relative; width: 78%; height: 58%; border-bottom: 18px solid #87bb73; transform: rotate(13deg); }
.discovery-landmark--slope span { position: absolute; left: 5%; right: 4%; bottom: 0; height: 42%; border-radius: 70% 70% 0 0; background: #bfe6a9; border: 6px solid #4c7f64; }
.discovery-landmark--tree span { width: 55%; height: 70%; display: block; border-radius: 50% 50% 42% 42%; background: #9fdb9d; border: 7px solid #4c7f64; box-shadow: 0 48px 0 -23px #a96f45; }
.discovery-landmark--glade { display: flex; align-items: end; justify-content: center; gap: 8%; }
.discovery-landmark--glade span { width: 22%; height: 38%; border-radius: 50% 50% 18px 18px; background: #f5c0d4; border: 6px solid #8d5570; }

/* Each mission gets a concrete picture context so the spoken cue points to
   something a young child can actually see. */
.discovery-toy-bridge {
  position: relative;
  width: 88%;
  height: 64%;
  margin-top: 14%;
}
.bridge-bank {
  position: absolute;
  bottom: 0;
  width: 25%;
  height: 34%;
  background: #86bd72;
  border: 6px solid #4c7f64;
  border-bottom: 0;
  border-radius: 60% 60% 0 0;
}
.bridge-bank--left { left: -5%; }
.bridge-bank--right { right: -5%; }
.bridge-tower {
  position: absolute;
  bottom: 30%;
  width: 13%;
  height: 48%;
  background: #f1bc78;
  border: 6px solid #805838;
  border-radius: 10px 10px 3px 3px;
}
.bridge-tower::before {
  content: "";
  position: absolute;
  left: -7px;
  right: -7px;
  top: -20%;
  height: 25%;
  background: #e78c74;
  border: 6px solid #805838;
  border-radius: 8px 8px 2px 2px;
}
.bridge-tower--left { left: 10%; }
.bridge-tower--right { right: 10%; }
.bridge-deck {
  position: absolute;
  top: 42%;
  width: 30%;
  height: 17%;
  background: #e7b067;
  border: 6px solid #805838;
  box-shadow: inset 0 -8px rgba(151, 91, 45, .13);
}
.bridge-deck--left { left: 14%; border-radius: 8px 0 0 8px; }
.bridge-deck--right { right: 14%; border-radius: 0 8px 8px 0; }
.bridge-open-gap {
  position: absolute;
  z-index: 2;
  left: 40%;
  top: 42%;
  width: 20%;
  height: 17%;
  background: rgba(255, 253, 248, .88);
  border: 6px dashed #76568d;
  border-radius: 5px;
  box-shadow: 0 0 0 5px rgba(255, 227, 138, .38);
}

.discovery-rainbow {
  position: relative;
  width: 76%;
  height: 62%;
  margin-top: 18%;
  border: 18px solid #e98bab;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}
.discovery-rainbow::before,
.discovery-rainbow::after,
.discovery-rainbow > span:first-child {
  content: "";
  position: absolute;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}
.discovery-rainbow::before { inset: 12px; border: 15px solid #f3c85f; border-bottom: 0; }
.discovery-rainbow::after { inset: 35px; border: 14px solid #74bca0; border-bottom: 0; }

.discovery-build-base {
  position: relative;
  width: 82%;
  height: 58%;
  align-self: end;
}
.discovery-build-base--tower::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 5%;
  height: 17%;
  background: #a9d29b;
  border: 6px solid #4c7f64;
  border-radius: 50% 50% 8px 8px;
}
.discovery-build-base--tower > span {
  position: absolute;
  left: 38%;
  bottom: 18%;
  width: 24%;
  height: 13%;
  background: rgba(255, 253, 248, .45);
  border: 5px dashed rgba(117, 79, 54, .6);
  border-radius: 5px;
}
.discovery-build-base--boat::before {
  content: "";
  position: absolute;
  left: 1%;
  bottom: 17%;
  width: 18%;
  height: 9%;
  background: repeating-linear-gradient(90deg, #d9a06e 0 30%, #bd7c4d 30% 36%);
  border: 6px solid #754f36;
  border-radius: 8px;
}
.discovery-build-base--boat .water-line {
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 19%;
  height: 8px;
  border-radius: 50%;
  background: #65a9cc;
  box-shadow: 24px 11px 0 -2px #80c6df, -22px 11px 0 -2px #80c6df;
}
.discovery-build-base--garden > span {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 9%;
  height: 34%;
  background: #a8734d;
  border: 6px solid #754f36;
  border-radius: 50% 50% 16px 16px;
  box-shadow: inset 0 13px #d9aa72;
}

.discovery-roll-scene {
  position: relative;
  width: 88%;
  height: 67%;
  align-self: end;
}
.discovery-roll-scene--hill .roll-ground,
.discovery-roll-scene--log .roll-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2%;
  height: 64%;
  background: #a8dc91;
  border: 7px solid #4c7f64;
  border-bottom: 0;
  border-radius: 70% 70% 0 0;
  transform: rotate(7deg);
}
.discovery-roll-scene--ramp .roll-board {
  position: absolute;
  left: 9%;
  right: 13%;
  top: 28%;
  height: 16%;
  background: #dfa969;
  border: 6px solid #754f36;
  border-radius: 9px;
  transform: rotate(18deg);
}
.discovery-roll-scene--ramp .roll-block {
  position: absolute;
  right: 14%;
  bottom: 13%;
  width: 22%;
  height: 31%;
  background: #d99b68;
  border: 6px solid #754f36;
  border-radius: 7px;
}
.discovery-roll-scene--log .roll-log {
  position: absolute;
  z-index: 2;
  right: 2%;
  top: 4%;
  width: 34%;
  height: 25%;
  background: #b77a4c;
  border: 6px solid #754f36;
  border-radius: 44%;
  transform: rotate(-8deg);
}
.discovery-roll-scene--log .roll-log::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 8%;
  height: 84%;
  aspect-ratio: 1;
  border: 5px solid #754f36;
  border-radius: 50%;
  background: #d69a66;
}

.discovery-table-scene {
  position: relative;
  width: 80%;
  height: 58%;
  align-self: end;
}
.discovery-table-scene > span:first-child {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 14%;
  height: 42%;
  background: #f6d78e;
  border: 6px solid #805838;
  border-radius: 18px 18px 6px 6px;
  box-shadow: inset 0 12px rgba(255,255,255,.45);
}
.discovery-table-scene--picnic > span:first-child {
  background-color: #f4b8c7;
  background-image: linear-gradient(90deg, transparent 46%, rgba(255,255,255,.7) 46% 54%, transparent 54%), linear-gradient(transparent 42%, rgba(255,255,255,.7) 42% 56%, transparent 56%);
  background-size: 34px 34px;
}
.discovery-table-scene--leaf > svg {
  position: absolute;
  z-index: 2;
  width: 26%;
  top: 23%;
}
.discovery-table-scene--leaf > svg:nth-of-type(1) { left: 21%; transform: rotate(-18deg); }
.discovery-table-scene--leaf > svg:nth-of-type(2) { right: 21%; transform: rotate(18deg); }
.discovery-table-scene--sewing .thread-spool {
  left: 22%;
  right: auto;
  bottom: 29%;
  width: 27%;
  height: 31%;
  border-radius: 8px;
  background: repeating-linear-gradient(#82b4dd 0 8px, #f4d6ef 8px 16px);
}
.discovery-table-scene--sewing .thread-line {
  left: 42%;
  right: 9%;
  bottom: 24%;
  height: 35%;
  border: 0;
  border-bottom: 7px solid #8c5d98;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.discovery-pattern-object {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 7px solid #755d4e;
  filter: drop-shadow(0 8px 0 rgba(81,63,55,.14));
}
.discovery-pattern-object > span { position: absolute; inset: 0; }
.discovery-pattern-object--coat {
  width: 62%;
  height: 68%;
  background: #ffe8b0;
  clip-path: polygon(29% 4%, 42% 12%, 58% 12%, 71% 4%, 96% 27%, 78% 44%, 70% 34%, 72% 96%, 28% 96%, 30% 34%, 22% 44%, 4% 27%);
}
.pattern-object-spots {
  background: radial-gradient(circle, #c77ac2 0 8%, transparent 9%) 0 0 / 32% 35%;
}
.discovery-pattern-object--scarf {
  width: 72%;
  height: 35%;
  background: #d9f4e2;
  border-radius: 22px 8px 8px 22px;
  transform: rotate(-7deg);
}
.discovery-pattern-object--scarf::after {
  content: "";
  position: absolute;
  right: -2%;
  top: 8%;
  bottom: 8%;
  width: 14%;
  border-left: 4px dashed #4c7f64;
}
.pattern-object-stripes {
  background: repeating-linear-gradient(90deg, transparent 0 13%, #70a4dc 13% 23%);
}
.discovery-pattern-object--blanket {
  width: 72%;
  height: 58%;
  border-radius: 14px;
  background: #f5ddff;
}
.pattern-object-waves {
  background: radial-gradient(50% 38% at 25% 38%, transparent 58%, #c77ac2 60% 70%, transparent 72%) 0 0 / 48px 42px;
}

.discovery-shadow { width: 58%; opacity: .34; filter: grayscale(1) brightness(.42); }
.discovery-shadow svg { width: 100%; height: 100%; }
.discovery-scene-friends { display: flex; width: 82%; justify-content: space-evenly; }
.discovery-scene-friends > * { width: 42%; height: 100%; object-fit: contain; }
.discovery-scene-character { width: 58%; height: 74%; display: grid; place-items: center; }
.discovery-scene-character--tiny { width: 38%; height: 52%; align-self: end; margin-bottom: 9%; }
.discovery-scene-character img { width: 100%; height: 100%; object-fit: contain; }
.discovery-scene-berries { display: flex; align-items: center; justify-content: center; width: 78%; }
.discovery-scene-berries svg { width: 34%; margin-inline: -2%; }

.discovery-count-context {
  position: absolute;
  inset: 7%;
  pointer-events: none;
}
.discovery-count-context--pots {
  display: flex;
  align-items: end;
  justify-content: space-around;
}
.discovery-count-context--pots > span {
  width: 25%;
  height: 23%;
  background: #d58d67;
  border: 6px solid #7a513a;
  border-radius: 8px 8px 22px 22px;
}
.discovery-count-context--sky {
  border-radius: 24px;
  background: linear-gradient(#675a9b, #8a7ab4 68%, transparent 69%);
}
.count-moon {
  position: absolute;
  right: 8%;
  top: 7%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe9a3;
  box-shadow: -11px 5px 0 #675a9b;
}
.discovery-count-context--cloud > span {
  position: absolute;
  left: 17%;
  right: 17%;
  top: 8%;
  height: 26%;
  border-radius: 50px;
  background: #eef8ff;
  border: 6px solid #7a95ad;
  box-shadow: -28px 13px 0 -7px #eef8ff, 28px 13px 0 -7px #eef8ff;
}
.discovery-share-scene {
  position: absolute;
  inset: 7% 4% 4%;
  display: flex;
  align-items: end;
  justify-content: space-between;
}
.discovery-share-scene > .discovery-approved-character {
  position: relative;
  z-index: 2;
  width: 43%;
  height: 78%;
  object-fit: contain;
}
.discovery-share-scene .share-table {
  position: absolute;
  z-index: 1;
  left: 28%;
  right: 28%;
  bottom: 8%;
  height: 30%;
  border: 6px solid #805838;
  border-radius: 50% 50% 11px 11px;
  background: #f4cf8d;
}
.discovery-share-scene .share-table--tea::before,
.discovery-share-scene .share-table--tea::after {
  content: "";
  position: absolute;
  top: -23%;
  width: 30%;
  aspect-ratio: 1;
  border: 4px solid #76568d;
  border-radius: 50%;
  background: #fff4f8;
}
.discovery-share-scene .share-table--tea::before { left: 7%; }
.discovery-share-scene .share-table--tea::after { right: 7%; }
.discovery-share-scene .share-table--leaf > svg {
  width: 74%;
  height: 74%;
  margin: 10% 13%;
}

.discovery-approved-character {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.discovery-approved-pair {
  display: flex;
  align-items: end;
  justify-content: center;
}
.discovery-approved-pair .discovery-approved-character { width: 58%; margin-inline: -8%; }
.discovery-position-diagram {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.discovery-position-arch {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 24%;
  height: 54%;
  border: 10px solid #9b78c8;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}
.discovery-position-diagram .discovery-approved-character {
  position: absolute;
  width: 45%;
  height: 45%;
}
.discovery-position--on .discovery-approved-character { left: 28%; top: -2%; }
.discovery-position--under .discovery-approved-character { left: 28%; bottom: 0; }
.discovery-position--beside .discovery-approved-character { right: -2%; bottom: 3%; }

.discovery-consequence {
  position: absolute;
  width: 34%;
  right: 5%;
  bottom: 7%;
  filter: drop-shadow(0 8px 0 rgba(81,63,55,.16));
  animation: discovery-arrive 520ms var(--ease-overshoot);
}
.discovery-consequence--fit {
  right: auto;
  bottom: auto;
  z-index: 4;
  animation: discovery-fit 520ms var(--ease-overshoot);
}
.discovery-mission[data-variation="bridge-gap"] .discovery-consequence--fit { width: 19%; left: 40.5%; top: 39%; }
.discovery-mission[data-variation="bird-window"] .discovery-consequence--fit { width: 22%; left: 39%; top: 47%; }
.discovery-mission[data-variation="kite-patch"] .discovery-consequence--fit { width: 23%; left: 38.5%; top: 24%; }

.discovery-position-result {
  z-index: 4;
  width: 31%;
  height: 39%;
  right: auto;
  bottom: auto;
}
.discovery-position-result .discovery-approved-character { width: 100%; height: 100%; }
.discovery-position-result[data-scene="rainbow"][data-position="under"] { left: 34%; top: 56%; }
.discovery-position-result[data-scene="rainbow"][data-position="on"] { left: 34%; top: 0; }
.discovery-position-result[data-scene="rainbow"][data-position="beside"] { right: 1%; top: 51%; }
.discovery-position-result[data-scene="bridge"][data-position="on"] { left: 35%; top: 11%; }
.discovery-position-result[data-scene="bridge"][data-position="under"] { left: 35%; top: 58%; }
.discovery-position-result[data-scene="bridge"][data-position="beside"] { right: 1%; top: 50%; }
.discovery-position-result[data-scene="tree"][data-position="beside"] { right: 1%; top: 50%; }
.discovery-position-result[data-scene="tree"][data-position="on"] { left: 34%; top: 0; }
.discovery-position-result[data-scene="tree"][data-position="under"] { left: 34%; top: 57%; }

.discovery-fit-hole {
  position: absolute;
  width: 42%;
  left: 29%;
  bottom: 8%;
  opacity: .33;
  filter: grayscale(1) brightness(.5);
}
.discovery-mission[data-variation="bridge-gap"] .discovery-fit-hole { width: 19%; left: 40.5%; bottom: 34%; }
.discovery-mission[data-variation="bird-window"] .discovery-fit-hole { width: 22%; left: 39%; bottom: 31%; }
.discovery-mission[data-variation="kite-patch"] .discovery-fit-hole { width: 23%; left: 38.5%; top: 24%; bottom: auto; opacity: 1; filter: none; z-index: 3; }
.discovery-mission[data-variation="kite-patch"] .discovery-fit-hole path { fill: rgba(255, 253, 248, .94); stroke: #76568d; stroke-dasharray: 8 6; }
.discovery-consequence[data-motion="roll"] { animation: discovery-roll 900ms ease-out both; }
.discovery-consequence[data-motion="slide"] { animation: discovery-slide 800ms ease-out both; }
.discovery-consequence[data-motion="tip"] { animation: discovery-tip 720ms ease-out both; }
.discovery-consequence[data-motion="stop"] { animation: discovery-stop 620ms ease-out both; }
.discovery-observations { position: absolute; inset: 6%; pointer-events: none; }
.discovery-observation {
  position: absolute;
  z-index: 4;
  left: calc(4% + var(--i) * 31%);
  bottom: 3%;
  width: 27%;
  filter: drop-shadow(0 7px 0 rgba(81,63,55,.15));
}
.discovery-observation svg { width: 100%; height: auto; }
.discovery-observation[data-motion="roll"] { animation: discovery-roll 900ms ease-out both; }
.discovery-observation[data-motion="slide"] { animation: discovery-slide 800ms ease-out both; }
.discovery-observation[data-motion="tip"] { animation: discovery-tip 720ms ease-out both; }
.discovery-observation[data-motion="stop"] { animation: discovery-stop 620ms ease-out both; }

.discovery-activity {
  min-width: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding-top: clamp(72px, 11vmin, 96px);
}
.discovery-build-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: clamp(68px, 9vmin, 82px);
}
.discovery-finish-button,
.discovery-undo-button,
.discovery-launch-button {
  display: grid;
  place-items: center;
  width: clamp(68px, 9vmin, 82px);
  height: clamp(68px, 9vmin, 82px);
  padding: 7px;
  border-radius: 50%;
  animation: discovery-arrive 420ms var(--ease-overshoot);
}
.discovery-finish-button { background: color-mix(in srgb, var(--mint) 76%, white); }
.discovery-undo-button { background: color-mix(in srgb, var(--lemon) 78%, white); padding: 13px; }
.discovery-launch-button { background: color-mix(in srgb, var(--sky) 80%, white); padding: 8px; }
.discovery-finish-button svg,
.discovery-undo-button svg,
.discovery-launch-button svg { width: 100%; height: 100%; }
.discovery-launch-button:disabled { opacity: .72; cursor: default; }

.discovery-launch-splash {
  position: absolute;
  z-index: 6;
  left: 23%;
  right: 13%;
  bottom: 12%;
  height: 16%;
  pointer-events: none;
  border-bottom: 7px solid rgba(75,145,183,.78);
  border-radius: 50%;
  animation: discovery-launch-water 1400ms ease-out both;
}
.discovery-launch-splash::before,
.discovery-launch-splash::after {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 38%;
  height: 13px;
  border-bottom: 5px solid rgba(75,145,183,.55);
  border-radius: 50%;
}
.discovery-launch-splash::before { left: 7%; }
.discovery-launch-splash::after { right: 4%; }
.discovery-world.is-launch-rest .water-line { box-shadow: 0 5px 0 rgba(75,145,183,.35); }
@keyframes discovery-launch-water {
  0% { opacity: 0; transform: scaleX(.3); }
  26% { opacity: 1; transform: scaleX(.72); }
  72% { opacity: .86; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.06); }
}
.discovery-choice:disabled {
  opacity: .48;
  filter: saturate(.55);
  box-shadow: none;
  cursor: default;
}

.discovery-options,
.discovery-piece-tray {
  display: grid;
  grid-template-columns: repeat(3, minmax(76px, 1fr));
  gap: clamp(10px, 1.8vmin, 18px);
  width: 100%;
  max-width: 430px;
}

.discovery-choice,
.discovery-piece {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 76px;
  min-height: 76px;
  aspect-ratio: 1;
  padding: 8px;
  border-radius: 27px;
}
.discovery-choice svg,
.discovery-piece svg,
.discovery-choice .discovery-approved-character,
.discovery-piece .discovery-approved-character,
.discovery-choice .discovery-position-diagram,
.discovery-piece .discovery-position-diagram { width: 100%; height: 100%; pointer-events: none; }
.discovery-piece.is-selected { outline: 8px solid rgba(255, 227, 138, .75); transform: scale(1.06); }
.discovery-piece.is-dragging,
.discovery-choice.is-dragging { position: relative; z-index: 50; opacity: .92; box-shadow: 0 16px 24px rgba(81,63,55,.25); pointer-events: none; }
.discovery-piece.is-placed { min-width: 52px; min-height: 52px; width: 58px; height: 58px; border-width: 3px; padding: 4px; }

.discovery-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(104px, 1fr));
  gap: clamp(12px, 2vmin, 22px);
  margin-top: clamp(12px, 2vmin, 22px);
  width: 100%;
  max-width: 430px;
}
.discovery-target {
  position: relative;
  display: grid;
  grid-template-columns: minmax(64px, 1fr);
  place-items: center;
  min-height: 118px;
  padding: 8px;
  border-radius: 30px;
  border-style: dashed;
  background: rgba(255,253,248,.88);
}
.discovery-target > svg,
.discovery-target > .discovery-approved-character { width: 74px; height: 74px; pointer-events: none; }
.discovery-target-pocket { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 14px; pointer-events: none; }
.discovery-target-pocket .discovery-piece { pointer-events: auto; }
.discovery-placed-picture { width: 36px; height: 36px; }
.discovery-placed-picture svg { width: 100%; height: 100%; }

.discovery-built {
  position: absolute;
  left: 27%; right: 27%; bottom: 11%;
  display: flex; flex-direction: column-reverse; align-items: center;
}
.discovery-built span { display: block; width: 66%; height: 52px; margin-top: -20px; animation: discovery-arrive 420ms var(--ease-overshoot); }
.discovery-built svg { width: 100%; height: 100%; }
:is(.discovery-mission, .discovery-result-picture, .discovery-owned-build)[data-variation="tower"] .discovery-built [data-part="block"] { width: 78%; }
:is(.discovery-mission, .discovery-result-picture, .discovery-owned-build)[data-variation="tower"] .discovery-built [data-part="round"] { width: 62%; }
:is(.discovery-mission, .discovery-result-picture, .discovery-owned-build)[data-variation="tower"] .discovery-built [data-part="roof"] { width: 72%; }

:is(.discovery-mission, .discovery-result-picture, .discovery-owned-build)[data-variation="boat"] .discovery-built {
  left: 16%; right: 16%; bottom: 12%; height: 66%; display: block;
}
:is(.discovery-mission, .discovery-result-picture, .discovery-owned-build)[data-variation="boat"] .discovery-built span { position: absolute; margin: 0; }
:is(.discovery-mission, .discovery-result-picture, .discovery-owned-build)[data-variation="boat"] .discovery-built [data-part="hull"] {
  z-index: 2; left: calc(8% + var(--n) * 2%); bottom: calc(var(--n) * 3px); width: 84%; height: 35%;
}
:is(.discovery-mission, .discovery-result-picture, .discovery-owned-build)[data-variation="boat"] .discovery-built [data-part="sail"] {
  z-index: 1; left: calc(25% + var(--n) * 7%); bottom: calc(15% + var(--n) * 2px); width: 55%; height: 68%;
}
:is(.discovery-mission, .discovery-result-picture, .discovery-owned-build)[data-variation="boat"] .discovery-built [data-part="window"] {
  z-index: 3; left: calc(26% + var(--n) * 14%); bottom: calc(8% + var(--n) * 2px); width: 18%; height: 18%;
}
:is(.discovery-mission, .discovery-result-picture, .discovery-owned-build)[data-variation="garden"] .discovery-built {
  left: 16%; right: 16%; bottom: 17%; height: 50%; display: flex; flex-flow: row wrap; align-content: end; justify-content: center;
}
:is(.discovery-mission, .discovery-result-picture, .discovery-owned-build)[data-variation="garden"] .discovery-built span {
  width: 30%; height: 48%; margin: -7% -2% 0; transform: rotate(calc((var(--i) - 2) * 4deg));
}

.discovery-count-slots { position: relative; z-index: 2; width: 88%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(8px, 2vmin, 18px); }
.discovery-count-slots > span { width: clamp(64px, 11vmin, 98px); aspect-ratio: 1; border: 5px dashed rgba(81,63,55,.32); border-radius: 50%; display: grid; place-items: center; }
.discovery-count-slots > span.is-filled { border-color: transparent; animation: discovery-arrive 420ms var(--ease-overshoot); }
.discovery-count-slots svg { width: 100%; height: 100%; }

.discovery-pattern-line { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1vmin, 10px); width: 96%; }
.discovery-pattern-line svg { width: clamp(44px, 8vmin, 74px); }
.pattern-question { display: grid; place-items: center; width: clamp(58px, 9vmin, 80px); aspect-ratio: 1; border: 6px dashed #76568d; border-radius: 22px; color: #76568d; font: 900 clamp(34px, 7vmin, 58px)/1 system-ui; }
.discovery-more-start,
.discovery-one-dot { width: 35%; }
.discovery-one-more { color: #76568d; font: 900 clamp(48px, 9vmin, 80px)/1 system-ui; }
.discovery-more-start { position: absolute; left: 8%; }
.discovery-one-dot { position: absolute; right: 8%; }

.discovery-result { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(250px, 1fr) auto; align-items: center; gap: clamp(16px, 3vmin, 34px); }
.discovery-result-picture { width: min(62vh, 58vw); aspect-ratio: 1; border-radius: 36px; border: var(--outline) solid var(--ink); background: rgba(255,253,248,.9); box-shadow: var(--shadow-lift); overflow: hidden; }
.discovery-result-picture .discovery-scene { padding: 6%; }
.discovery-result-actions { display: flex; flex-direction: column; gap: 18px; }
.discovery-result-button { display: grid; place-items: center; width: clamp(92px, 14vmin, 126px); height: clamp(92px, 14vmin, 126px); border-radius: 32px; padding: 13px; }
.discovery-replay { background: var(--lemon); }
.discovery-another { background: var(--mint); }
.discovery-result-button svg { width: 100%; height: 100%; }

.discovery-demo-hand {
  position: fixed;
  z-index: 999;
  width: clamp(64px, 10vmin, 92px);
  height: clamp(64px, 10vmin, 92px);
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 6px 4px rgba(81,63,55,.2));
}

@keyframes discovery-arrive { from { transform: translateY(18px) scale(.65); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes discovery-fit { from { transform: translateY(-18px) scale(.72); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes discovery-roll { from { transform: translate(-180%, -80%) rotate(0); } to { transform: translate(0,0) rotate(540deg); } }
@keyframes discovery-slide { from { transform: translate(-150%, -45%); } to { transform: translate(0,0); } }
@keyframes discovery-tip { 0% { transform: translate(-120%,-55%) rotate(0); } 75% { transform: translate(0,0) rotate(70deg); } 100% { transform: translate(0,0) rotate(58deg); } }
@keyframes discovery-stop { from { transform: translate(-70%,-22%); } to { transform: translate(0,0); } }

@media (orientation: portrait) {
  .discovery {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(88px, 16vh) minmax(0, 1fr);
    padding-top: calc(var(--btn) + var(--gutter) * 1.1);
  }
  .discovery-guide .char { --char-size: min(38vw, 17vh); }
  .discovery-picker-shell { width: min(96vw, 520px); }
  .discovery-picker { grid-template-columns: repeat(3, minmax(86px, 1fr)); gap: 10px; }
  .discovery-mission-card { min-width: 86px; min-height: 86px; border-radius: 26px; }
  .discovery-mission { grid-template-columns: 1fr; grid-template-rows: minmax(250px, 1fr) auto; }
  .discovery-size-mode .discovery-mission { height: auto; grid-template-rows: auto auto; }
  .discovery-world { width: min(88vw, 46vh); min-width: 238px; min-height: 238px; }
  .discovery-activity { padding: 0 72px 0 0; width: min(92vw, 520px); box-sizing: border-box; }
  .discovery-options, .discovery-piece-tray { max-width: 390px; }
  .discovery-choice, .discovery-piece { min-width: 72px; min-height: 72px; }
  .discovery-piece-tray { grid-template-columns: repeat(4, minmax(64px, 1fr)); }
  .discovery-piece-tray .discovery-piece { min-width: 64px; min-height: 64px; padding: 5px; border-radius: 22px; }
  .discovery-topbar { top: auto; bottom: 0; right: 0; flex-direction: column; }
  .discovery-round-button { width: 64px; height: 64px; }
  .discovery-result { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .discovery-result-picture { width: min(88vw, 48vh); }
  .discovery-result-actions { flex-direction: row; }
}

@media (max-height: 470px) and (orientation: landscape) {
  .discovery { padding-top: var(--gutter); }
  .discovery-guide .char { --char-size: min(18vw, 42vh); }
  .discovery-world { width: min(78vh, 48vw); min-width: 230px; min-height: 230px; }
  .discovery-mission { grid-template-columns: minmax(230px, 1fr) minmax(250px, .95fr); }
  .discovery-choice, .discovery-piece { min-width: 68px; min-height: 68px; border-radius: 22px; }
  .discovery-piece-tray { grid-template-columns: repeat(4, minmax(64px, 1fr)); }
  .discovery-piece-tray .discovery-piece { min-width: 64px; min-height: 64px; padding: 5px; }
  .discovery-target { min-height: 100px; }
  .discovery-round-button { width: 64px; height: 64px; }
  .discovery-result-picture { width: min(80vh, 50vw); }
}

@media (prefers-reduced-motion: reduce) {
  .discovery-consequence,
  .discovery-observation,
  .discovery-finish-button,
  .discovery-undo-button,
  .discovery-launch-button,
  .discovery-launch-splash,
  .discovery-catalog-nav-button,
  .discovery-keepsake-button,
  .discovery-built span,
  .discovery-count-slots > span.is-filled { animation: none; }
}
html.reduced-motion .discovery-consequence,
html.reduced-motion .discovery-observation,
html.reduced-motion .discovery-finish-button,
html.reduced-motion .discovery-undo-button,
html.reduced-motion .discovery-launch-button,
html.reduced-motion .discovery-launch-splash,
html.reduced-motion .discovery-catalog-nav-button,
html.reduced-motion .discovery-keepsake-button,
html.reduced-motion .discovery-built span,
html.reduced-motion .discovery-count-slots > span.is-filled { animation: none; }