* { box-sizing: border-box; }
html { margin: 0; scroll-behavior: smooth; }
body { margin: 0; background: var(--tf-bg); color: var(--tf-text); font: 400 16px/1.55 var(--tf-font); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
button:focus-visible, a:focus-visible { outline: var(--tf-focus-ring); outline-offset: 5px; }
button:disabled { cursor: default; }
svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.collection-label, .parent-link { font-size: .86rem; color: var(--tf-muted); }
.parent-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
@media (max-width:360px) {
  .tf-header .tf-header-inner { gap: 6px; }
  .tf-header .tf-header-actions { gap: 4px; }
}
.collection { width: min(1120px, calc(100% - 64px)); margin: 0 auto; }
.collection-intro { padding: 54px 0 38px; }
.eyebrow { margin: 0 0 10px; color: var(--tf-accent-text); font-size: .76rem; font-weight: 650; letter-spacing: .095em; text-transform: uppercase; }
.collection-intro h1 { margin: 0; max-width: 800px; font-size: clamp(2.25rem, 4.3vw, 4.1rem); line-height: 1.12; letter-spacing: -.045em; font-weight: 650; }
.collection-intro h1 span { color: var(--tf-muted); }
.collection-intro > p:last-child { margin: 22px 0 0; color: var(--tf-muted); font-size: 1.03rem; }
.game-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.game-tile { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; min-height: 240px; position: relative; overflow: hidden; border: 1px solid var(--tf-border); border-radius: 24px; text-decoration: none; background: var(--tf-surface); transition: transform .25s ease, border-color .25s ease; }
.tile-art { width: 100%; height: 210px; padding: 18px; }
.tile-copy { padding: 25px 26px 25px 6px; }
.tile-category { display: block; color: var(--tf-muted); font-size: .7rem; line-height: 1.5; margin-bottom: 10px; }
.tile-copy h2 { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.65rem); line-height: 1.2; letter-spacing: -.025em; font-weight: 650; }
.tile-copy p { color: var(--tf-muted); font-size: .88rem; margin: 12px 0 17px; }
.tile-action { display: inline-flex; gap: 12px; align-items: center; font-weight: 650; color: var(--tf-accent-text); font-size: .93rem; }
.tile-action span { font-size: 1.2rem; transition: transform .2s; }
@media (hover:hover) { .game-tile:hover { transform: translateY(-4px); border-color: var(--tf-control-border); } .game-tile:hover .tile-action span { transform: translate(2px,-2px); } }
.parent-note { margin: 48px 0 38px; padding: 28px 0 0; border-top: 1px solid var(--tf-border); display: grid; grid-template-columns: .78fr 1.6fr; column-gap: 30px; }
.parent-note-title { display: flex; align-items: baseline; gap: 12px; }
.parent-note-title > span { color: var(--tf-accent-text); font-size: 1.4rem; }
.parent-note h2 { margin: 0; font-size: 1.3rem; font-weight: 650; letter-spacing: -.025em; }
.parent-note p { margin: 0; color: var(--tf-muted); font-size: .92rem; }
.parent-note .parent-note-small { grid-column: 2; margin-top: 10px; color: var(--tf-subtle); font-size: .79rem; }
.collection-footer { max-width: 1120px; width: calc(100% - 64px); margin: 0 auto; padding: 0 0 26px; display: flex; justify-content: space-between; color: var(--tf-subtle); font-size: .73rem; }
body.playing { overflow: hidden; overscroll-behavior: none; }
.play-view { --play-bg: #070d1a; --play-soft: #182b37; position: fixed; inset: 0; z-index: 10; isolation: isolate; display: flex; flex-direction: column; align-items: stretch; height: 100%; height: 100dvh; min-height: 0; background: var(--play-bg); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; overscroll-behavior: none; padding: max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(15px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); }
/* The shared canvas stays behind every target. Dialogs inherit the adult theme. */
.play-atmosphere { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.play-view > :is(.play-topline, .play-heading, .game-content, .game-progress) {
  position: relative; z-index: 1;
  --tf-text: #f5e7d6; --tf-muted: #b7c3c9; --tf-subtle: #91a3ad;
  --tf-border: #3a4a56; --tf-surface: #14232d; --tf-surface-raised: #213641;
  --tf-accent-text: #ffb64f; --tf-link: #a9d9ee; --tf-control-border: #738894;
  --tf-on-accent: #17212a; --tf-success: #a5d7b3; --tf-color-scheme: dark;
  --tf-focus-ring: 3px solid var(--tf-link);
  --play-progress: #b5d7a5; --play-success-badge: #a5d7b3; --play-on-success: #172b3a;
  --play-hover: rgb(245 231 214 / 5%); --play-orbit: rgb(245 231 214 / 5%);
  --play-paper: #f5e7d6; --play-paper-edge: #d5d9d1; --play-request-edge: transparent;
  --memory-back: #253e50; --memory-ink: #f0cd87; --memory-edge: #657c8b; --memory-shadow: #0d202d;
  --memory-face: #f6eedc; --memory-face-edge: #efe4c9; --memory-found: #e7efda;
  --memory-found-edge: #aad1b4; --memory-found-shadow: #6c9a81; --memory-hint: #f3ce84;
  --xylo-rail: #557285; --xylo-shadow: #152d40;
  color: var(--tf-text); color-scheme: dark;
}
.play-view[data-scene-appearance=light] > :is(.play-topline, .play-heading, .game-content, .game-progress) {
  --tf-text: #172b3a; --tf-muted: #526472; --tf-subtle: #5d6c77;
  --tf-border: #c7c9bf; --tf-surface: #fffdf8; --tf-surface-raised: #eee8dc;
  --tf-accent-text: #895314; --tf-link: #236179; --tf-control-border: #7b837f;
  --tf-success: #2f6b4d; --tf-color-scheme: light;
  --play-progress: #4e7554; --play-success-badge: #356d4e; --play-on-success: #fffdf8;
  --play-hover: rgb(23 43 58 / 5%); --play-orbit: rgb(145 189 209 / 13%);
  --play-paper: #fffdf8; --play-paper-edge: #c8cabc; --play-request-edge: #c8cabc;
  --memory-back: #dce8e5; --memory-ink: #446b69; --memory-edge: #829f97; --memory-shadow: #b4c8c0;
  --memory-face: #fffdf8; --memory-face-edge: #b8b3a5; --memory-found: #e2ebd7;
  --memory-found-edge: #759772; --memory-found-shadow: #8ba488; --memory-hint: #895314;
  --xylo-rail: #c2b39c; --xylo-shadow: #a99c88;
  color-scheme: light;
}
.play-heading { flex: 0 0 auto; text-align: center; padding: 8px 42px 12px; pointer-events: none; }
.play-view { --parent-copy-width: 132px; }
.play-view.has-levels { --parent-copy-width: 150px; }
.play-topline { position: relative; flex: 0 0 58px; display: flex; align-items: center; justify-content: center; }
.play-brand { position: absolute; margin: 0; font-size: .8rem; color: var(--tf-subtle); letter-spacing: -.02em; font-weight: 650; }
.play-topline.has-parent-note .play-brand { visibility: hidden; }
.parent-access-note { position: absolute; left: calc(var(--parent-copy-width) + 14px); margin: 0; width: min(280px,calc(100% - var(--parent-copy-width) - 14px)); color: var(--tf-muted); text-align: left; font-size: .75rem; line-height: 1.35; pointer-events: none; }
.parent-access-note kbd { font: inherit; font-weight: 600; }
.play-heading h1 { margin: 0; font-weight: 600; font-size: clamp(1.45rem, 3vw, 2.4rem); letter-spacing: -.035em; line-height: 1.15; }
.play-heading > p:last-child { margin: 8px 0 0; color: var(--tf-muted); font-size: .93rem; line-height: 1.35; min-height: 1.35em; }
.game-content { flex: 1 1 auto; min-height: 0; width: min(1050px,100%); margin: 0 auto; display: flex; align-items: stretch; justify-content: center; touch-action: none; }
.game-content:focus { outline: none; }
.game-scene { width: 100%; height: 100%; min-height: 0; }
.game-progress { flex: 0 0 24px; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.progress-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tf-border); transition: background .3s; }
.progress-dot.is-done { background: var(--play-progress); }
.choice-button, .action-button { border: 0; padding: 0; color: var(--tf-text); background: transparent; touch-action: manipulation; }
.parent-trigger { position: absolute; top: calc(-1 * max(18px,env(safe-area-inset-top))); left: calc(-1 * max(18px,env(safe-area-inset-left))); z-index: 3; width: calc(var(--parent-copy-width) + max(18px,env(safe-area-inset-left))); height: calc(58px + max(18px,env(safe-area-inset-top))); padding: max(18px,env(safe-area-inset-top)) 8px 0 max(18px,env(safe-area-inset-left)); border: 0; background: transparent; touch-action: none; text-align: left; color: var(--tf-muted); }
.parent-trigger-name, .parent-trigger-action { display: block; line-height: 1.4; }
.parent-trigger-name { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.parent-trigger-action { font-size: .73rem; font-weight: 400; white-space: nowrap; }
.parent-trigger::after { content: ''; display: block; width: 72px; height: 2px; margin-top: 4px; background: var(--tf-muted); opacity: 0; transform: scaleX(0); transform-origin: left; }
.parent-trigger.is-holding::after { animation: parent-hold 2s linear both; }
.parent-trigger:focus-visible { outline-offset: -6px; }
@keyframes parent-hold { from { opacity: .7; transform: scaleX(0); } to { opacity: .7; transform: scaleX(1); } }
.play-view.is-paused .play-topline { visibility: hidden; }
body.reduce-motion .parent-trigger.is-holding::after { opacity: .7; transform: scaleX(1); }
.game-content.is-idle-hint { animation: idle-invitation .65s ease; }
@keyframes idle-invitation { 50% { transform: translateY(-3px); } }
.parent-panel, .finish-panel { color: var(--tf-text); background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: 24px; box-shadow: var(--tf-shadow); padding: 30px; width: min(520px,calc(100% - 28px)); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; }
dialog::backdrop { background: var(--tf-backdrop); }
.panel-heading { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.panel-heading h2, .finish-panel h2 { margin: 0; font-size: 2rem; line-height: 1.15; letter-spacing: -.035em; }
.panel-heading .eyebrow { font-size: .7rem; }
.panel-close { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--tf-border); border-radius: 50%; background: transparent; color: var(--tf-muted); font-size: 1.8rem; line-height: 1; }
.panel-game-name { margin: 15px 0 10px; color: var(--tf-muted); font-size: .9rem; }
.panel-settings { display: grid; gap: 0; margin: 8px 0 20px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--tf-border); font-size: .92rem; }
.setting-row strong { font-weight: 600; }
.setting-row small { display: block; color: var(--tf-muted); font-size: .74rem; margin-top: 4px; line-height: 1.4; }
.setting-row input { flex: 0 0 auto; width: 23px; height: 23px; accent-color: var(--tf-accent); }
.setting-select { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 14px; margin-top: 16px; font-size: .88rem; }
.setting-select select { width: 100%; min-width: 0; background: var(--tf-surface-raised); color: var(--tf-text); border: 1px solid var(--tf-control-border); padding: 10px 12px; border-radius: 8px; }
#level-row { margin-top: 0; margin-bottom: 4px; padding-bottom: 15px; border-bottom: 1px solid var(--tf-border); }
.panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.panel-actions .tf-button { justify-content: center; font-size: .83rem; }
#parent-resume, #parent-home { grid-column: 1 / -1; }
.panel-hint { font-size: .73rem; color: var(--tf-subtle); line-height: 1.5; margin: 20px 0 0; }
.finish-panel { text-align: center; padding: 28px 34px 26px; width: min(460px,calc(100% - 28px)); }
.finish-art { width: 115px; height: 115px; margin: 0 auto 15px; }
.finish-panel > p:not(.eyebrow) { color: var(--tf-muted); }
.finish-panel .tf-button { display: flex; justify-content: center; margin: 12px auto 0; }
.finish-panel .tf-button--link { font-size: .83rem; }
@media (max-width:760px) {
  .tf-header-inner { grid-template-columns: 1fr auto; gap: 12px; }
  .collection-label { display: none; }
  .collection { width: calc(100% - 36px); }
  .collection-intro { padding: 22px 0 20px; }
  .collection-intro .eyebrow { margin-bottom: 6px; font-size: .68rem; }
  .collection-intro h1 { font-size: clamp(1.75rem,6.8vw,2.7rem); }
  .collection-intro > p:last-child { margin-top: 12px; font-size: .86rem; }
  .game-picker { gap: 10px; grid-template-columns: 1fr; }
  .game-tile { min-height: 124px; grid-template-columns: 32% 1fr; border-radius: 18px; }
  .tile-art { height: 112px; padding: 10px; }
  .tile-copy { padding: 12px 14px 12px 2px; }
  .tile-copy h2 { font-size: 1.12rem; }
  .tile-copy p { font-size: .78rem; margin: 5px 0 4px; }
  .tile-category { font-size: .64rem; line-height: 1.35; margin-bottom: 4px; }
  .tile-action { gap: 8px; font-size: .8rem; }
  .tile-action span { font-size: 1rem; }
  .parent-note { grid-template-columns: 1fr; gap: 14px; margin: 34px 0; }
  .parent-note .parent-note-small { grid-column: 1; margin: 0; }
  .collection-footer { width: calc(100% - 36px); gap: 12px; flex-direction: column; }
  .play-view { padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .parent-trigger { top: calc(-1 * max(12px,env(safe-area-inset-top))); left: calc(-1 * max(12px,env(safe-area-inset-left))); width: calc(var(--parent-copy-width) + max(12px,env(safe-area-inset-left))); height: calc(58px + max(12px,env(safe-area-inset-top))); padding-top: max(12px,env(safe-area-inset-top)); padding-left: max(12px,env(safe-area-inset-left)); }
  .play-heading { padding: 8px 20px 10px; }
  .play-heading h1 { font-size: clamp(1.35rem,5.4vw,1.9rem); }
  .play-heading > p:last-child { font-size: .81rem; }
  .parent-panel { padding: 22px; }
}
@media (max-height:520px) and (orientation:landscape) {
  .play-view { padding-top: max(6px,env(safe-area-inset-top)); padding-bottom: max(6px,env(safe-area-inset-bottom)); }
  .play-topline { flex-basis: 44px; }
  .parent-trigger { top: calc(-1 * max(6px,env(safe-area-inset-top))); height: calc(44px + max(6px,env(safe-area-inset-top))); padding-top: max(6px,env(safe-area-inset-top)); }
  .parent-access-note { width: calc(100% - var(--parent-copy-width) - 14px); font-size: .7rem; }
  .play-heading { padding: 0 60px 5px; }
  .play-brand { display: none; }
  .play-heading h1 { font-size: 1.4rem; }
  .play-heading > p:last-child { margin-top: 3px; font-size: .75rem; }
  .game-progress { margin-top: 5px; flex-basis: 15px; }
}
@media (max-width:480px) {
  .play-brand { right: 0; }
  .setting-select { grid-template-columns: 1fr; gap: 6px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
/* Two quiet, illustrated scenes; all play controls remain native buttons. */
.colors-scene {
  width: min(100%, 900px);
  min-height: 0;
  flex: 1;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--tf-text, #f5e7d6);
}
.colors-object-area {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 100px;
  max-height: 270px;
  display: grid;
  place-items: center;
}
.colors-orbit {
  position: absolute;
  width: min(52vw, 235px);
  aspect-ratio: 1;
  max-height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--play-orbit) 30%, transparent 72%);
}
.colors-object {
  width: clamp(106px, 18vw, 190px);
  aspect-ratio: 1;
  position: relative;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 12px 16px rgb(0 0 0 / 10%));
  transition: opacity 200ms, transform 240ms;
}

.colors-object svg,
.colors-basket-art svg,
.fruit-piece svg { display: block; width: 100%; height: 100%; }
.colors-transfer {
  position: absolute;
  bottom: 0;
  left: calc(50% - 12px);
  color: var(--tf-muted, #b7c3c9);
  font-size: 28px;
  line-height: 1;
  opacity: .6;
}
.colors-baskets {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: clamp(10px, 3vw, 30px);
  padding-top: 8px;
}
.colors-basket {
  position: relative;
  min-width: 0;
  width: clamp(72px, 18vw, 150px);
  min-height: 100px;
  flex: 0 1 150px;
  padding: 5px 7px 12px;
  border: 2px solid transparent;
  border-radius: 24px;
  background: transparent;
  color: var(--tf-text, #f5e7d6);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 180ms, border-color 180ms;
}
.colors-basket-art { display: block; width: 100%; aspect-ratio: 1; }
.colors-label { display: block; font-size: 15px; font-weight: 700; }
.colors-key {
  position: absolute;
  top: 5px;
  left: 8px;
  font-size: 12px;
  color: var(--tf-muted, #b7c3c9);
}
.colors-check {
  position: absolute;
  top: 20%;
  right: 0;
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--play-success-badge);
  color: var(--play-on-success);
  font-size: 25px;
  font-weight: 700;
}

.colors-basket:focus-visible { outline: 3px solid var(--tf-link, #a9d9ee); outline-offset: 4px; }
.colors-basket.colors-hint { border-color: var(--basket-color); }
.colors-basket.colors-again { background: var(--play-hover); }
.colors-basket.colors-chosen .colors-check { display: grid; }
.colors-basket:disabled { opacity: 1; cursor: default; }
.colors-success .colors-object { opacity: .45; transform: translateY(8px) scale(.92); }
.colors-reduced .colors-object { transition: none; }
.colors-reduced.colors-success .colors-object { transform: none; }

.colors-feedback {
  min-height: 2.6em;
  max-width: 100%;
  margin: 8px 0 0;
  padding-inline: 8px;
  font-size: clamp(12px, 2vw, 15px);
  line-height: 1.3;
  text-align: center;
  color: var(--tf-muted, #b7c3c9);
}

.fruit-piece { min-width: 0; aspect-ratio: 1; align-self: center; }

@media (hover: hover) {
  .colors-basket:hover:not(:disabled) { background: var(--play-hover); }


}
@media (max-width: 600px) and (min-height: 501px) {
  .colors-object-area { max-height: 250px; }
  .colors-object { width: clamp(136px, 34vw, 185px); }
  .colors-baskets { gap: 4px; }
  .colors-basket { padding-inline: 2px; border-radius: 18px; }
  .colors-label { font-size: 12px; }
  .colors-key { display: none; }

}
@media (max-height: 500px) {
  .colors-scene { flex-direction: row; flex-wrap: wrap; column-gap: 20px; align-content: center; row-gap: 12px; }
  .colors-object-area { flex: 0 0 110px; height: 140px; min-height: 80px; }
  .colors-object { width: 110px; }
  .colors-transfer { bottom: auto; left: auto; right: -10px; transform: rotate(-90deg); }
  .colors-baskets { flex: 1; width: auto; gap: 5px; padding: 0; }
  .colors-basket { padding: 3px; min-height: 90px; flex-basis: 106px; }
  .colors-basket-art { max-height: 103px; }
  .colors-label { font-size: 12px; }
  .colors-feedback { flex: 0 0 100%; margin: 0; min-height: 1.3em; }

}
@media (prefers-reduced-motion: reduce) {

.colors-object,
.colors-basket { transition: none; }
  .colors-success .colors-object { transform: none; }
}

.memory-board {
  --memory-columns: 2;
  display: grid;
  grid-template-columns: repeat(var(--memory-columns), minmax(0, 1fr));
  gap: clamp(10px, 2.5vw, 24px);
  width: min(100%, calc(var(--memory-columns) * 168px));
  margin: auto;
  padding: 8px;
}
.memory-card {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 2px solid var(--memory-edge);
  border-radius: clamp(15px, 3vw, 28px);
  background: var(--memory-back);
  color: var(--memory-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 180ms, border-color 180ms, transform 180ms;
  box-shadow: 0 5px 0 var(--memory-shadow);
}
.memory-back, .memory-face {
  grid-area: 1 / 1;
  width: 82%;
  pointer-events: none;
}
.memory-back { width: 47%; }
.memory-back svg, .memory-face svg { display: block; width: 100%; height: auto; }
.memory-face, .memory-match { visibility: hidden; }
.memory-card.memory-up { background: var(--memory-face); border-color: var(--memory-face-edge); color: #183247; }
.memory-up .memory-back { visibility: hidden; }
.memory-up .memory-face { visibility: visible; }
.memory-card.memory-found { border-color: var(--memory-found-edge); background: var(--memory-found); box-shadow: 0 4px 0 var(--memory-found-shadow); }
.memory-match {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: clamp(20px, 4vw, 28px);
  height: clamp(20px, 4vw, 28px);
  border-radius: 50%;
  background: #234E40;
  color: #FFFFFF;
  font-size: clamp(13px, 2vw, 18px);
  line-height: 1;
}
.memory-found .memory-match { visibility: visible; }
.memory-card.memory-hint { border-color: var(--memory-hint); transform: translateY(-4px); }
.memory-card:focus-visible, .xylo-key:focus-visible {
  outline: 3px solid var(--tf-link, #C1DEEE);
  outline-offset: 5px;
}
.memory-card[aria-disabled="true"] { cursor: default; }
body[data-game="xylophone"] .game-progress { display: none; }
.xylo-board {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 16px);
  width: min(100%, 980px);
  height: min(100%, clamp(300px, 58svh, 520px));
  margin: auto;
  padding: 14px 8px 20px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.xylo-board::before, .xylo-board::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  height: 18px;
  border-radius: 8px;
  background: var(--xylo-rail);
}
.xylo-board::before { top: 30%; }
.xylo-board::after { bottom: 30%; }
.xylo-key {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  min-width: 44px;
  height: var(--xylo-height);
  padding: clamp(10px, 1.8vw, 22px) 2px;
  border: 2px solid rgb(255 255 255 / 30%);
  border-radius: clamp(16px, 3vw, 28px);
  background: var(--xylo-color);
  color: #183247;
  box-shadow: 0 7px 0 var(--xylo-shadow), inset 0 -5px 0 rgb(0 0 0 / 9%);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 130ms, box-shadow 130ms;
}
.xylo-pin { width: 7px; height: 7px; border-radius: 50%; background: rgb(24 50 71 / 50%); }
.xylo-picture { display: block; width: 88%; max-width: 100px; pointer-events: none; transform-origin: 50% 75%; }
.xylo-picture svg { display: block; width: 100%; height: auto; }
.xylo-note { font: 700 clamp(20px, 2.2vw, 29px)/1 var(--tf-font, system-ui, sans-serif); pointer-events: none; }
.xylo-shortcut {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgb(24 50 71 / 45%);
  border-bottom-width: 3px;
  border-radius: 6px;
  background: rgb(255 255 255 / 22%);
  color: #183247;
  font: 650 13px/1 var(--tf-font-mono, ui-monospace, monospace);
  pointer-events: none;
}
.xylo-key.xylo-playing { transform: translateY(5px); border-color: #fff6e5; box-shadow: 0 2px 0 var(--xylo-shadow), inset 0 -3px 0 rgb(0 0 0 / 10%); }
.xylo-key.xylo-hint { transform: translateY(-5px); }
.memory-reduced .memory-card, .xylo-reduced .xylo-key { transition: none; }
.memory-reduced .memory-hint, .xylo-reduced .xylo-key.xylo-hint,
.xylo-reduced .xylo-key.xylo-playing { transform: none; }
@media (max-width: 380px) {
  .memory-board { gap: 9px; padding: 6px; }
}
@media (max-width: 480px) and (min-height: 600px) {
  .memory-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, calc((100svh - 220px) / var(--memory-columns) * 2));
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .memory-board { width: min(100%, calc(var(--memory-columns) * 100px)); gap: 12px; }
  .xylo-board { height: min(100%, 285px); width: min(100%, 760px); padding-block: 8px 14px; gap: 8px; }
  .xylo-key { padding-block: 8px; border-radius: 16px; }
  .xylo-picture { width: 70%; max-width: 58px; }
  .xylo-note { font-size: 20px; }
  .xylo-shortcut { width: 23px; height: 23px; font-size: 12px; }
}
/* Portrait phones turn the instrument so all eight notes remain easy to touch. */
@media (max-width: 600px) and (orientation: portrait) {
  body[data-game="xylophone"] .play-heading { padding: 4px 0 8px; }
  body[data-game="xylophone"] .play-heading > p:last-child { margin-top: 5px; font-size: .75rem; }
  .xylo-board {
    flex-direction: column;
    width: min(100%, 430px);
    height: min(100%, 640px);
    gap: clamp(5px, 1svh, 8px);
    padding: 4px 0 10px;
  }
  .xylo-board::before, .xylo-board::after {
    top: 0;
    bottom: 0;
    right: auto;
    width: 15px;
    height: auto;
  }
  .xylo-board::before { left: 29%; }
  .xylo-board::after { left: 68%; }
  .xylo-key {
    display: grid;
    grid-template-columns: 7px minmax(28px, 42px) 1fr 26px 7px;
    gap: clamp(6px, 2.5vw, 12px);
    width: var(--xylo-height);
    min-height: 44px;
    height: auto;
    padding: 4px clamp(8px, 3.4vw, 18px);
    border-radius: 15px;
    box-shadow: 0 4px 0 var(--xylo-shadow), inset 0 -3px 0 rgb(0 0 0 / 9%);
  }
  .xylo-picture { width: 100%; max-width: 42px; max-height: 100%; }
  .xylo-picture svg { max-height: 42px; }
  .xylo-note { font-size: clamp(21px, 6vw, 26px); }
  .xylo-key.xylo-playing { transform: translateY(3px); box-shadow: 0 1px 0 var(--xylo-shadow), inset 0 -2px 0 rgb(0 0 0 / 10%); }
  .xylo-key.xylo-hint { transform: translateY(-3px); }
}
@media (max-width: 600px) and (max-height: 620px) and (orientation: portrait) {
  body[data-game="xylophone"] .play-heading h1 { font-size: 1.35rem; }
  .xylo-board { gap: 5px; }
  .xylo-key { grid-template-columns: 7px 28px 1fr 24px 7px; padding-block: 2px; }
  .xylo-picture { max-width: 28px; }
  .xylo-picture svg { max-height: 28px; }
  .xylo-shortcut { width: 24px; height: 24px; font-size: 12px; }
  .xylo-note { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .memory-card, .xylo-key { transition: none; }
  .memory-card.memory-hint, .xylo-key.xylo-hint, .xylo-key.xylo-playing { transform: none; }
}
@media (forced-colors: active) {
  .memory-card, .xylo-key { border: 2px solid ButtonText; }
  .memory-up, .memory-found, .xylo-playing { outline: 3px solid Highlight; outline-offset: -6px; }
  .memory-back, .memory-match { forced-color-adjust: none; }
  .xylo-shortcut { border-color: ButtonText; color: ButtonText; }
}

/* A delivered object remains tucked behind the front edge of its own basket. */
.colors-basket-art { position: relative; }
.colors-collection { position: absolute; inset: 0; pointer-events: none; }
.colors-collected { position: absolute; width: 35%; aspect-ratio: 1; left: 33%; top: 9%; filter: drop-shadow(0 1px 1px rgb(12 23 32 / 70%)); }
.colors-collected[data-slot="1"] { left: 14%; top: 3%; }
.colors-collected[data-slot="2"] { left: 52%; top: 3%; }
.colors-collected[data-slot="3"] { left: 6%; top: -9%; }
.colors-collected[data-slot="4"] { left: 33%; top: -16%; }
.colors-collected[data-slot="5"] { left: 61%; top: -9%; }
.colors-pending { visibility: hidden; }
.colors-basket-front { position: absolute; inset: 0; pointer-events: none; }
.colors-basket-front svg > path:first-child { display: none; }
.colors-success .colors-object { opacity: 0; transform: none; transition: none; }
.colors-flight { position: fixed; display: block; z-index: 4; pointer-events: none; transform-origin: top left; }
.colors-flight svg { width: 100%; height: 100%; display: block; }
.colors-basket.colors-filled { border-color: var(--basket-color); }

.colors-object { transition: none; }
.colors-object:focus-visible { outline: 3px solid var(--tf-link); outline-offset: 6px; }
.colors-object.colors-looking { outline: 3px solid var(--object-color); outline-offset: 6px; }
.colors-object.colors-dragging { z-index: 5; cursor: grabbing; filter: drop-shadow(0 15px 14px rgb(0 0 0 / 22%)); }
.colors-object svg { pointer-events: none; }
.colors-object:disabled { cursor: default; }
.colors-basket.colors-drop-target { border-color: var(--basket-color); background: var(--play-soft); }
.colors-basket.colors-again { border-style: dashed; border-color: var(--basket-color); }
.colors-basket.colors-hint { border-style: solid; }

/* Counting follows one path: fill the plate, then offer the snack to Fox. */
.counting-scene {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  align-items: center; width: min(100%, 900px); min-height: 0; margin-inline: auto;
}
.counting-table {
  display: grid; grid-template-columns: minmax(0, 390px) 60px 210px;
  align-items: center; justify-content: center; gap: 20px; width: 100%;
}
.counting-friend { grid-column: 3; grid-row: 1; position: relative; text-align: center; }
.counting-request {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; width: fit-content; min-width: 124px; min-height: 118px; margin: 0 auto -7px;
  padding: 14px 20px 18px; border: 2px solid var(--play-request-edge); border-radius: 28px 28px 7px 28px;
  background: var(--play-paper); color: #172b3a;
}
.counting-target { display: block; line-height: .95; }
.counting-target strong { display: block; font-size: 76px; font-weight: 750; letter-spacing: -.045em; }
.counting-dots { display: grid; grid-template-columns: repeat(var(--counting-columns), 12px); gap: 7px; }
.counting-dots[hidden] { display: none; }
.counting-dots span { width: 12px; height: 12px; border-radius: 50%; background: #172b3a; }
.counting-feed {
  display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0;
  border: 0; border-radius: 28px; background: transparent; color: var(--tf-text);
  font: inherit; cursor: pointer; touch-action: manipulation;
}
.counting-animal-wrap { display: block; position: relative; width: 190px; max-width: 100%; }
.counting-animal { display: block; width: 100%; aspect-ratio: 1; transform-origin: 50% 75%; }
.counting-feed-label {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 10px 20px; border: 2px solid var(--tf-control-border); border-radius: 25px;
  color: var(--tf-text); background: var(--play-soft); font-size: 15px; font-weight: 700; line-height: 1.2;
}
.counting-feed-label > span { font-size: 21px; }
.counting-can-serve .counting-feed-label { background: var(--tf-accent); border-color: var(--tf-accent); color: var(--tf-on-accent); }
.counting-feed:focus-visible { outline: 3px solid var(--tf-link); outline-offset: 5px; }
.counting-feed:disabled { cursor: default; }
.counting-serve-cue {
  display: block; min-height: 1.5em; margin-top: 7px; font-size: 13px; color: var(--tf-accent-text);
  visibility: hidden;
}
.counting-can-serve .counting-serve-cue { visibility: visible; }
.counting-serve-path { grid-column: 2; grid-row: 1; width: 60px; height: 44px; color: var(--tf-subtle); }
.counting-can-serve .counting-serve-path { color: var(--tf-accent-text); }
.counting-serving { grid-column: 1; grid-row: 1; width: 100%; min-width: 0; text-align: center; }
.counting-plate {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 195px; padding: 22px 16px; border: 8px solid var(--play-paper-edge); border-radius: 46%;
  background: var(--play-paper); box-shadow: inset 0 0 0 3px rgb(23 43 58 / 7%), 0 12px 20px rgb(0 0 0 / 7%);
  cursor: pointer;
}
.counting-plate-hint { display: block; margin-top: 12px; color: var(--tf-muted); font-size: 13px; line-height: 1.35; }
.counting-portions, .counting-extras {
  display: grid; grid-template-columns: repeat(var(--counting-columns), 56px); gap: 8px; max-width: 100%; justify-content: center;
}
.counting-free-portions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; }
.counting-slot {
  position: relative; display: block; width: 56px; height: 56px; flex: 0 0 56px;
  min-width: 44px; min-height: 44px; padding: 3px; margin: 0;
  border: 2px solid transparent; border-radius: 16px; background: transparent; color: #344c50;
  cursor: pointer; touch-action: manipulation; line-height: 1;
}
.counting-slot:focus-visible { outline: 3px solid #367889; outline-offset: 2px; }
.counting-slot:disabled { cursor: default; }
.counting-level-1 .counting-portions { grid-template-columns: repeat(var(--counting-columns), 76px); }
.counting-level-1 .counting-portions > .counting-slot { width: 76px; height: 76px; }
.counting-slot-art { display: block; width: 100%; height: 100%; pointer-events: none; }
.counting-slot-art svg { display: block; width: 100%; height: 100%; }
.counting-empty { border: 2px dashed #a0aaa0; background: rgb(23 43 58 / 3%); }
.counting-empty .counting-slot-art { opacity: .24; }
.counting-slot-plus, .counting-slot-marker {
  position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; font: 650 21px/1 var(--tf-font); pointer-events: none;
}
.counting-slot-plus { background: #547a61; color: #fffdf8; }
.counting-slot-marker { right: -2px; bottom: -2px; width: 18px; height: 18px; font-size: 17px; background: #e1e4d9; color: #59645a; }
.counting-empty .counting-slot-marker { display: none; }
.counting-too-few .counting-empty { border-color: #9a7037; background: #efe0bf; }
.counting-too-few .counting-empty .counting-slot-plus { background: #9a7037; }
.counting-too-many .counting-extra { border: 2px dashed #9a7037; }
.counting-too-many .counting-extra .counting-slot-marker { background: #705141; color: #fff6e6; }
.counting-success .counting-slot-art { opacity: 0; }
.counting-success .counting-slot-marker, .counting-success .counting-open-add { visibility: hidden; }
.counting-success .counting-plate { border-color: #91c8a3; }
.counting-success .counting-plate-hint, .counting-success .counting-serve-path { visibility: hidden; }
.counting-flying { position: absolute; display: block; z-index: 2; pointer-events: none; }
.counting-flying svg { width: 100%; height: 100%; }
.counting-received { position: absolute; left: 8%; right: 8%; bottom: -3%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 0; padding: 2px 6px; border-radius: 50%; }
.counting-delivered .counting-received { background: var(--play-paper); border: 3px solid var(--play-paper-edge); min-height: 33px; }
.counting-received > span { display: block; width: 24px; height: 24px; margin-inline: -2px; }
.counting-thanks { position: absolute; opacity: 0; top: 11%; right: -3%; color: #ec9b9b; font-size: 32px; }
.counting-delivered .counting-thanks { opacity: 1; }
.counting-feedback { min-height: 2.6em; max-width: 100%; margin: 16px 0 0; padding-inline: 8px; color: var(--tf-muted); font-size: 14px; line-height: 1.3; text-align: center; }
.counting-slot.counting-hint { outline: 3px solid #9a7037; outline-offset: 4px; }
.counting-feed.counting-hint .counting-feed-label { outline: 3px solid var(--tf-accent-text); outline-offset: 4px; }
@media (hover: hover) {
  .counting-slot:hover:not(:disabled) { background: rgb(23 43 58 / 8%); }
  .counting-feed:hover:not(:disabled) .counting-feed-label { border-color: var(--tf-accent); }
}
@media (max-width: 600px) and (min-height: 501px) {
  .counting-table { grid-template-columns: 1fr; gap: 10px; width: min(100%, 350px); }
  .counting-friend { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; justify-items: center; align-items: center; width: 100%; }
  .counting-request { grid-column: 1; grid-row: 1; min-width: 112px; min-height: 116px; margin: 0; padding: 12px 14px 16px; border-radius: 25px 25px 7px 25px; }
  .counting-target strong { font-size: 70px; }
  .counting-feed { grid-column: 2; grid-row: 1; width: 132px; }
  .counting-animal-wrap { width: 115px; }
  .counting-feed-label { min-height: 44px; padding: 8px 13px; font-size: 13px; gap: 8px; }
  .counting-serve-cue { grid-column: 2; grid-row: 2; font-size: 11px; margin-top: 4px; }
  .counting-serve-path { grid-column: 1; grid-row: 2; height: 26px; width: 46px; margin: -5px 19% -3px auto; transform: rotate(-54deg); }
  .counting-serving { grid-column: 1; grid-row: 3; }
  .counting-plate { min-height: 158px; border-width: 6px; border-radius: 39%; padding: 18px 10px; gap: 8px; }
  .counting-portions, .counting-extras { grid-template-columns: repeat(var(--counting-columns), 48px); gap: 7px; }
  .counting-slot { width: 48px; height: 48px; flex-basis: 48px; }
  .counting-level-1 .counting-portions { grid-template-columns: repeat(var(--counting-columns), 64px); }
  .counting-level-1 .counting-portions > .counting-slot { width: 64px; height: 64px; }
  .counting-plate-hint { font-size: 12px; margin-top: 9px; }
  .counting-feedback { margin-top: 9px; font-size: 12px; }
  .counting-received > span { width: 17px; height: 17px; }
  .counting-delivered .counting-received { min-height: 22px; border-width: 2px; padding: 1px; }
  .counting-thanks { font-size: 23px; }
}
@media (max-width: 360px) and (min-height: 501px), (max-height: 650px) and (min-height: 501px) and (max-width: 600px) {
  .counting-table { gap: 5px; }
  .counting-request { min-width: 108px; min-height: 103px; padding: 9px 13px 13px; gap: 7px; }
  .counting-target strong { font-size: 62px; }
  .counting-feed { width: 124px; }
  .counting-animal-wrap { width: 85px; }
  .counting-serve-cue { margin-top: 3px; }
  .counting-serve-path { height: 20px; width: 37px; margin-block: -2px; }
  .counting-plate { min-height: 126px; padding: 12px 8px; gap: 6px; border-radius: 35%; }
  .counting-portions, .counting-extras { grid-template-columns: repeat(var(--counting-columns), 44px); gap: 6px; }
  .counting-slot { width: 44px; height: 44px; flex-basis: 44px; padding: 2px; border-radius: 13px; }
  .counting-level-1 .counting-portions { grid-template-columns: repeat(var(--counting-columns), 60px); }
  .counting-level-1 .counting-portions > .counting-slot { width: 60px; height: 60px; }
  .counting-plate-hint { margin-top: 7px; font-size: 11px; }
  .counting-feedback { margin-top: 6px; font-size: 11.5px; }
}
@media (max-height: 500px) {
  .counting-table { grid-template-columns: minmax(0, 310px) 44px 185px; gap: 12px; }
  .counting-friend { display: grid; grid-template-columns: 74px 105px; align-items: center; gap: 5px; }
  .counting-request { grid-column: 1; grid-row: 1; min-width: 74px; min-height: 86px; padding: 9px 6px; margin: 0; gap: 7px; border-radius: 19px 19px 5px 19px; }
  .counting-target strong { font-size: 54px; }
  .counting-dots { grid-template-columns: repeat(var(--counting-columns), 8px); gap: 4px; }
  .counting-dots span { width: 8px; height: 8px; }
  .counting-feed { grid-column: 2; grid-row: 1; width: 105px; }
  .counting-animal-wrap { width: 78px; }
  .counting-feed-label { min-height: 44px; padding: 7px 10px; gap: 6px; font-size: 12px; }
  .counting-serve-cue { grid-column: 1 / -1; font-size: 11px; margin-top: 0; }
  .counting-serve-path { width: 44px; }
  .counting-plate { min-height: 114px; padding: 10px 7px; border-width: 5px; border-radius: 33%; gap: 6px; }
  .counting-portions, .counting-extras { grid-template-columns: repeat(var(--counting-columns), 44px); gap: 5px; }
  .counting-slot { width: 44px; height: 44px; flex-basis: 44px; padding: 2px; border-radius: 12px; }
  .counting-level-1 .counting-portions { grid-template-columns: repeat(var(--counting-columns), 52px); }
  .counting-level-1 .counting-portions > .counting-slot { width: 52px; height: 52px; }
  .counting-plate-hint { font-size: 11px; margin-top: 6px; }
  .counting-feedback { min-height: 1.3em; margin-top: 6px; font-size: 11px; }
  .counting-received > span { width: 16px; height: 16px; }
  .counting-delivered .counting-received { min-height: 20px; border-width: 2px; padding: 1px; }
  .counting-thanks { font-size: 23px; }
}

/* Instructions are attached to the gesture, never a blocking lesson. */
.gesture-guide { position: absolute; left: 0; top: 0; width: 48px; height: 54px; z-index: 4; pointer-events: none; filter: drop-shadow(0 3px 5px rgb(0 0 0 / 18%)); }
.gesture-guide svg { width: 100%; height: 100%; }
.play-view.is-paused *, .play-view.is-paused *::before, .play-view.is-paused *::after { animation-play-state: paused !important; }
.music-sound-notice { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; margin: 0 0 22px; border-top: 1px solid var(--tf-border); border-bottom: 1px solid var(--tf-border); color: var(--tf-muted); }
.music-sound-notice p { margin: 0; font-size: .9rem; }
.music-sound-notice strong { color: var(--tf-text); }
.music-sound-notice .tf-button { flex: 0 0 auto; }
.tile-sound-state { display: block; width: fit-content; font-size: .78rem; color: var(--tf-accent-text); margin-bottom: 12px; }
.finish-panel { width: min(590px,calc(100% - 28px)); padding: 25px; }
.finish-celebration { display: flex; align-items: center; justify-content: center; gap: 15px; text-align: left; }
.finish-celebration .finish-art { width: 64px; height: 64px; flex: 0 0 64px; margin: 0; }
.finish-celebration h2 { font-size: 1.8rem; }
.finish-panel > p { margin: 12px 0 22px; font-size: .91rem; }
.finish-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.finish-choice { min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 14px 10px; gap: 14px; border-radius: 20px; border: 2px solid var(--tf-control-border); background: var(--tf-surface-raised); color: var(--tf-text); font-size: 1rem; font-weight: 650; line-height: 1.3; }
.finish-choice-replay { border-color: var(--tf-accent); }
.finish-choice-image { display: block; position: relative; width: min(100%,175px); height: 122px; }
#finish-replay-preview { display: block; height: 100%; width: 100%; }
.finish-choice .finish-replay-arrow { position: absolute; bottom: 0; right: 0; height: 62px; width: 62px; padding: 8px; border-radius: 50%; color: var(--tf-on-accent); background: var(--tf-accent); }
.finish-catalogue-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.finish-catalogue-preview > span { min-width: 0; min-height: 0; border-radius: 10px; background: var(--tf-surface); padding: 2px; }
@media (hover:hover) { .finish-choice:hover { background: var(--tf-surface); } }
@media (max-width:480px) {
  .music-sound-notice { align-items: flex-start; flex-direction: column; gap: 8px; }
  .finish-panel { padding: 20px 16px; }
  .finish-celebration { gap: 10px; }
  .finish-celebration h2 { font-size: 1.35rem; }
  .finish-celebration .finish-art { width: 46px; height: 46px; flex-basis: 46px; }
  .finish-choices { gap: 10px; }
  .finish-choice { font-size: .88rem; padding: 10px 7px; gap: 10px; }
  .finish-choice-image { height: 92px; }
  .finish-choice .finish-replay-arrow { width: 48px; height: 48px; padding: 6px; }
}
@media (max-height:500px) and (orientation:landscape) {
  .finish-panel { padding: 16px 22px; }
  .finish-celebration .finish-art { width: 44px; height: 44px; flex-basis: 44px; }
  .finish-celebration h2 { font-size: 1.4rem; }
  .finish-panel > p { margin: 7px 0 12px; font-size: .83rem; }
  .finish-choice { padding: 8px; gap: 6px; }
  .finish-choice-image { height: 84px; }
}