@font-face {
  font-family:Nunito;
  src:url(/static/fonts/nunito.ttf) format("truetype");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}
/* Avika's playroom: original illustration, quiet surfaces, generous controls. */
:root {
  --paper:#f7f5ee;
  --ink:#304b44;
  --muted:#68766c;
  --green:#365e50;
  --line:#dcded2;
  --peach:#f1ded0;
  --font-title:Nunito,'DejaVu Sans',sans-serif;
  --font-sans:Nunito,'DejaVu Sans',sans-serif;
  --font-mono:var(--font-sans);
  --font-display:var(--font-title);
  --font-retro:var(--font-title);
  color-scheme:light;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.5 var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
a {
  color:inherit;
  text-decoration:none;
}
button,input,select {
  font:inherit;
}
button,a,input,select {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:default;
  opacity:.65;
}
img {
  max-width:100%;
  display:block;
}
h1,h2,h3,p {
  margin:0;
}
h1,h2,h3 {
  font-family:var(--font-title);
  line-height:1.13;
  letter-spacing:-.035em;
}
h1 {
  font-size:clamp(30px,3.5vw,46px);
  font-weight:700;
}
h2 {
  font-size:32px;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #9b683d;
  outline-offset:5px;
}
button:active:not(:disabled),.primary-button:active {
  transform:translateY(1px);
}
[hidden],.d-none {
  display:none!important;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  background:var(--green);
  color:white;
  padding:12px;
  z-index:100;
}
.skip-link:focus {
  top:10px;
}
.console-header {
  max-width:1320px;
  margin:auto;
  min-height:100px;
  padding:20px 44px;
  display:flex;
  align-items:center;
  gap:40px;
  border-bottom:1px solid var(--line);
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font:bold 28px/1 var(--font-title);
  letter-spacing:-1px;
}
.brand-small {
  display:block;
  font:700 9px/1.6 var(--font-sans);
  letter-spacing:4px;
  padding-left:3px;
  margin-top:5px;
}
.home-nav {
  margin-left:auto;
  font-size:14px;
  font-weight:650;
}
.quiet-button,.primary-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:11px 21px;
  border-radius:14px;
  font-weight:650;
  font-size:14px;
  border:1px solid var(--line);
  transition:background .18s,transform .18s;
}
.quiet-button {
  background:transparent;
  color:var(--ink);
}
.quiet-button:hover {
  background:#eeeee3;
}
.primary-button {
  background:var(--green);
  border-color:var(--green);
  color:#fffdf4;
  box-shadow:0 3px 0 #284c3e;
}
.primary-button:hover {
  background:#294b3f;
}
.primary-button span {
  margin-left:12px;
}
.parent-trigger {
  font-size:12px;
  border:0;
}
.console-main {
  max-width:1320px;
  margin:auto;
  padding:38px 44px 0;
}
.welcome-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:0 0 30px;
}
.eyebrow {
  font-size:10px;
  font-weight:750;
  letter-spacing:2px;
  color:var(--muted);
  margin-bottom:12px;
}
.welcome-stamp {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.feature-grid {
  display:grid;
  grid-template-columns:minmax(0,1.95fr) minmax(0,1fr);
  gap:22px;
}
.village-feature {
  position:relative;
  min-height:390px;
  background:#dfebe2;
  overflow:hidden;
  border-radius:25px;
  isolation:isolate;
}
.village-art {
  position:absolute;
  right:-9%;
  bottom:0;
  height:100%;
  width:87%;
  object-fit:cover;
  object-position:50% 50%;
  z-index:-2;
}
.village-feature:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#e0ebe2 8%,#e0ebe2ed 31%,#e0ebe200 66%);
}
.feature-copy {
  padding:36px;
  max-width:390px;
}
.small-pill {
  display:inline-block;
  padding:6px 10px;
  background:#fffaf099;
  border:1px solid #ffffff80;
  border-radius:7px;
  font-size:9px;
  letter-spacing:1.4px;
  font-weight:750;
}
.feature-copy h2 {
  font-size:clamp(30px,3.4vw,47px);
  margin:22px 0 14px;
  letter-spacing:-1.8px;
}
.feature-copy p {
  font-size:14px;
  margin-bottom:23px;
  color:#526c5e;
}
.scene-caption {
  position:absolute;
  bottom:19px;
  right:24px;
  font-size:8px;
  letter-spacing:1.7px;
  font-weight:750;
  color:#fff9e7;
}
.kido-feature {
  border-radius:25px;
  background:#efe4d9;
  padding:24px 28px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.kido-feature-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.tiny-star {
  color:#9b7956;
  font-size:23px;
}
.book-preview {
  height:145px;
  position:relative;
  margin:7px 0 15px;
}
.mini-card {
  position:absolute;
  top:0;
  left:calc(50% - 56px);
  width:113px;
  height:145px;
  border-radius:13px;
  background:#fffbf2;
  border:5px solid #fffbf2;
  box-shadow:0 7px 12px #95765d16;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.mini-card img {
  width:95px;
  height:99px;
}
.mini-card span {
  font:bold 18px var(--font-title);
  margin:0 0 7px;
}
.mini-card.behind {
  transform:rotate(-18deg) translate(-43px,-1px);
  background:#e0e7dc;
}
.mini-card.front {
  transform:rotate(12deg) translate(27px,0);
}
.kido-feature h2 {
  font-size:29px;
}
.kido-feature p {
  font-size:12px;
  color:#796e60;
  margin:9px 0 16px;
}
.text-link {
  font-size:13px;
  font-weight:750;
  display:flex;
  justify-content:space-between;
  border-top:1px solid #d9cdc0;
  padding-top:12px;
}
.recent-game {
  margin-top:22px;
  padding:15px 22px;
  border:1px solid var(--line);
  border-radius:17px;
  display:flex;
  align-items:center;
  gap:16px;
  background:#ffffff60;
}
.recent-icon {
  font-size:27px;
}
.recent-game small {
  display:block;
  font-size:8px;
  letter-spacing:1.5px;
  color:var(--muted);
  margin-bottom:3px;
}
.recent-game strong {
  font-size:14px;
}
.recent-action {
  margin-left:auto;
  font-size:12px;
  font-weight:650;
}
.library {
  margin-top:46px;
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:16px;
  margin-bottom:23px;
}
.section-heading .eyebrow {
  margin-bottom:7px;
}
.count-label {
  font-size:12px;
  color:var(--muted);
}
.shelf-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:25px;
}
.shelf-tabs {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.shelf-tab {
  min-height:48px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#667369;
  font-size:13px;
  padding:10px 21px;
  font-weight:650;
}
.shelf-tab:hover {
  background:#eeeee3;
}
.shelf-tab.active {
  background:var(--green);
  color:#fffdf4;
}
.search-box {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 14px;
  min-height:48px;
  background:#ffffff60;
}
.search-box span {
  font-size:24px;
}
.search-box input {
  border:0;
  background:transparent;
  width:145px;
  color:var(--ink);
  font-size:12px;
  min-height:44px;
}
.game-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:27px 20px;
}
.game-tile {
  min-width:0;
  display:block;
  border-radius:18px;
}
.tile-art {
  height:180px;
  border-radius:18px;
  background:var(--tile-bg);
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.tile-art>img {
  height:145px;
  width:145px;
  object-fit:contain;
  position:relative;
  margin-top:18px;
  transition:transform .2s;
}
.game-tile[data-game-id="kid_city_adventure"] .tile-art>img {
  width:100%;
  height:100%;
  margin:0;
  object-fit:cover;
}
.art-orbit {
  position:absolute;
  width:135px;
  height:135px;
  border-radius:50%;
  background:#ffffff40;
  right:15px;
  top:32px;
  z-index:-1;
}
.tile-category {
  position:absolute;
  top:12px;
  left:14px;
  font-size:9px;
  font-weight:650;
  color:#5c6b62;
  z-index:1;
}
.tile-play {
  position:absolute;
  bottom:12px;
  right:12px;
  border-radius:50%;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  background:#fffaf099;
  color:var(--green);
}
.game-tile:hover .tile-art>img {
  transform:translateY(-4px) rotate(-3deg);
}
.tile-copy {
  padding:14px 3px 0;
}
.tile-copy h3 {
  font-size:17px;
  letter-spacing:-.4px;
  line-height:1.3;
}
.tile-copy p {
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
  margin-top:6px;
}
.play-note {
  margin-top:50px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:28px 0;
  display:flex;
  align-items:center;
  gap:22px;
}
.play-note h2 {
  font-size:23px;
}
.play-note p {
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
}
.play-note>a {
  margin-left:auto;
  white-space:nowrap;
}
.console-footer {
  max-width:1320px;
  margin:0 auto;
  padding:28px 44px;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#778174;
}
.empty-state {
  text-align:center;
  padding:40px;
}
.empty-state img {
  margin:auto;
}
.empty-state p {
  margin:14px 0;
}
.parent-dialog {
  border:1px solid var(--line);
  border-radius:24px;
  padding:35px;
  max-width:540px;
  width:calc(100% - 32px);
  color:var(--ink);
  background:var(--paper);
  box-shadow:0 25px 90px #253c3b30;
}
.parent-dialog::backdrop {
  background:#203c3b70;
  backdrop-filter:blur(5px);
}
.dialog-close {
  float:right;
  margin:-15px -15px 10px 12px;
}
.parent-dialog h2 {
  clear:both;
  margin:20px 0;
}
.parent-dialog p {
  font-size:14px;
  margin-bottom:16px;
}
.parent-dialog label {
  font-size:14px;
}
.gate-row {
  display:flex;
  gap:12px;
  margin-top:10px;
}
.gate-row input {
  width:90px;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px;
  background:white;
}
.setting-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  gap:20px;
}
.setting-row small {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:5px;
}
.setting-row input {
  width:26px;
  height:26px;
  accent-color:var(--green);
}
.parent-dialog .settings-note {
  font-size:12px;
  color:var(--muted);
  margin:20px 0;
}
.parent-dialog #settingsStatus {
  margin-top:16px;
}
/* Shared legacy-game shell. Game worlds keep their own canvas styles. */
.game-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:20px;
}
.game-heading h1 {
  font-size:26px;
  margin-top:6px;
}
.game-heading .eyebrow {
  margin:0;
}
.game-actions {
  display:flex;
  gap:8px;
}
.game-actions .quiet-button {
  padding:9px 14px;
  font-size:12px;
}
.game-cabinet {
  border:1px solid #d0d8ca;
  border-radius:24px;
  overflow:hidden;
  background:#e6eade;
  box-shadow:0 12px 40px #365e500a;
}
.game-hud {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:66px;
  padding:10px 20px;
  background:#edf0e5;
}
.hud-scores {
  display:flex;
  gap:24px;
  font-size:12px;
  color:var(--muted);
}
.hud-scores strong {
  margin-left:7px;
  color:var(--ink);
  font-size:19px;
}
.arcade-canvas-stage {
  position:relative;
  width:100%;
  height:clamp(520px,70vh,800px);
  background:#dfebdf;
  overflow:hidden;
}
.game-world {
  width:100%;
  height:100%;
}
.game-world>canvas {
  display:block;
}
.game-overlay {
  position:absolute;
  inset:0;
  z-index:20;
  background:#edf1e7ed;
  display:grid;
  place-items:center;
  padding:22px;
  overflow:auto;
}
.start-panel {
  max-width:520px;
  text-align:center;
  margin:auto;
}
.start-panel>img {
  width:150px;
  height:145px;
  object-fit:contain;
  margin:0 auto 14px;
}
.start-panel h2 {
  font-size:35px;
  margin-bottom:15px;
}
.start-panel p {
  font-size:15px;
  color:var(--muted);
  max-width:390px;
  margin:0 auto 20px;
}
.start-panel .control-tip {
  font-size:12px;
  padding:14px;
  border:1px solid #d6dfd1;
  border-radius:12px;
  background:#ffffff66;
}
.start-panel .primary-button {
  min-width:190px;
}
.overlay-actions {
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:270px;
  margin:auto;
}
.result-score {
  font-size:42px;
  font-weight:750;
  margin:12px 0;
}
.touch-bar {
  padding:12px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  background:#edf0e5;
}
.touch-btn {
  background:#fffaf0;
  min-height:52px;
  min-width:52px;
  border-radius:12px;
  border:1px solid #cad3c3;
  color:var(--ink);
  font-weight:650;
  touch-action:none;
}
.game-caption {
  font-size:12px;
  text-align:center;
  color:var(--muted);
  margin-top:16px;
}
.game-cabinet:fullscreen {
  border:0;
  border-radius:0;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
}
.game-cabinet:fullscreen .arcade-canvas-stage {
  flex:1;
  min-height:0;
  height:auto;
}
.game-cabinet:fullscreen .touch-bar {
  flex-shrink:0;
}
.game-error {
  color:#82433d;
  padding:12px;
}
/* Kido discovery book */
.kido-page {
  max-width:1050px;
  margin:0 auto;
}
.kido-heading {
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:26px;
}
.kido-heading>img {
  width:65px;
  height:65px;
}
.kido-heading h1 {
  font-size:36px;
}
.kido-heading p {
  color:var(--muted);
  font-size:14px;
  margin-top:8px;
}
.kido-toolbar {
  margin-left:auto;
  display:flex;
  gap:8px;
}
.kido-book {
  border:1px solid #e1dacc;
  border-radius:26px;
  background:#fffdf6;
  box-shadow:0 14px 45px #8e7b5908;
  overflow:hidden;
  min-height:480px;
}
.kido-book-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:17px 26px;
  background:#f0eadf;
  border-bottom:1px solid #e6dfd2;
  gap:12px;
  font-size:12px;
  color:#796f60;
}
.kido-book-top strong {
  color:#574f45;
}
.kido-setup {
  padding:30px;
}
.kido-intro {
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:24px;
}
.kido-intro img {
  width:80px;
  height:80px;
}
.kido-intro h2 {
  font-size:29px;
}
.kido-intro p {
  font-size:14px;
  color:var(--muted);
  margin-top:7px;
}
.deck-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:13px;
}
.deck-button {
  border:2px solid transparent;
  border-radius:17px;
  background:var(--deck-bg,#edf0e5);
  padding:15px 8px 17px;
  color:var(--ink);
  text-align:center;
}
.deck-button img {
  width:100px;
  height:100px;
  margin:auto;
}
.deck-button strong {
  display:block;
  font-size:15px;
}
.deck-button small {
  display:block;
  font-size:10px;
  margin-top:5px;
  color:#667066;
}
.deck-button[aria-pressed=true] {
  border-color:#456b56;
  box-shadow:0 0 0 3px #d9e6d3;
}
.setup-label {
  font-size:11px;
  letter-spacing:1.1px;
  font-weight:750;
  margin:28px 0 14px;
  color:var(--muted);
  text-transform:uppercase;
}
.mode-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.mode-button {
  border:1px solid #e0dfd1;
  background:#faf8f1;
  border-radius:13px;
  text-align:left;
  padding:15px;
  color:var(--ink);
}
.mode-button strong {
  font-size:14px;
  display:block;
}
.mode-button small {
  font-size:11px;
  display:block;
  margin-top:5px;
  color:#72776b;
}
.mode-button[aria-pressed=true] {
  border:2px solid #456b56;
  background:#eaf0e4;
  padding:14px;
}
.setup-bottom {
  margin-top:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
}
.setup-bottom p {
  font-size:12px;
  color:var(--muted);
  max-width:330px;
}
.resume-note {
  background:#eaf0e4;
  border:1px solid #d5dfcc;
  border-radius:13px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px;
  font-size:13px;
}
.kido-round {
  padding:25px 30px 30px;
  text-align:center;
}
.round-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  gap:12px;
}
.round-dots {
  display:flex;
  gap:8px;
}
.round-dot {
  width:12px;
  height:12px;
  border-radius:50%;
  background:#e8e4d8;
}
.round-dot.done {
  background:#7da18a;
}
.round-dot.current {
  background:#e5b977;
  box-shadow:0 0 0 3px #f3e9d6;
}
.kido-round h2 {
  font-size:30px;
}
.round-instruction {
  font-size:13px;
  color:var(--muted);
  margin:8px 0 19px;
}
.answer-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  max-width:770px;
  margin:22px auto;
}
.answer-card {
  background:#f4f0e6;
  border:2px solid transparent;
  border-radius:20px;
  padding:14px;
  color:var(--ink);
  min-height:190px;
  transition:transform .15s,background .15s;
}
.answer-card img {
  width:150px;
  height:150px;
  margin:auto;
}
.answer-card .card-word {
  font:bold 22px var(--font-title);
  display:block;
  margin:8px 0;
}
.answer-card:hover:not(:disabled) {
  background:#eaf0e5;
  transform:translateY(-3px);
}
.answer-card.correct {
  background:#e6eee0;
  border-color:#73976e;
  opacity:1;
}
.answer-card.try-again {
  border-color:#c79e66;
  background:#fbf0dd;
}
.solo-card {
  max-width:310px;
  min-height:235px;
  margin:20px auto;
  background:#f1ecdf;
  border-radius:20px;
  padding:18px;
}
.solo-card img {
  width:185px;
  height:185px;
  margin:auto;
}
.solo-word {
  font:bold 29px var(--font-title);
  margin:7px 0;
}
.feedback {
  min-height:31px;
  font-size:15px;
  color:#45644d;
  margin:15px auto;
  max-width:640px;
}
.round-actions {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}
.round-actions .quiet-button,.round-actions .primary-button {
  min-width:130px;
}
.kido-status {
  font-size:11px;
  color:var(--muted);
  margin:14px 0;
  min-height:17px;
  text-align:center;
}
.kido-finish {
  text-align:center;
  padding:40px 25px;
}
.kido-finish>img {
  width:110px;
  height:110px;
  margin:0 auto 15px;
}
.kido-finish h2 {
  font-size:35px;
}
.kido-finish p {
  margin:14px auto 24px;
  color:var(--muted);
  max-width:440px;
}
.discovery-strip {
  display:flex;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
  margin:25px 0;
}
.discovery-sticker {
  border:1px solid #e6ddcb;
  border-radius:14px;
  background:#f6f0e3;
  padding:8px;
  width:80px;
}
.discovery-sticker img {
  width:60px;
  height:60px;
}
.discovery-sticker span {
  display:block;
  font-size:11px;
  margin-top:4px;
}
.kido-pause {
  text-align:center;
  padding:80px 20px;
}
.kido-pause p {
  margin:15px 0 25px;
  color:var(--muted);
}
@media(min-width:1450px) {
  .console-main {
    padding-top:48px;
  }
  .village-feature {
    min-height:420px;
  }
  .kido-feature {
    padding:28px 32px;
  }
  .book-preview {
    height:160px;
    margin-top:12px;
  }
  .feature-copy {
    padding:42px;
  }
  .tile-art {
    height:195px;
  }
}
@media(max-width:1000px) {
  .console-header {
    padding:20px 28px;
  }
  .console-main {
    padding:28px 28px 0;
  }
  .console-footer {
    padding:25px 28px;
  }
  .welcome-stamp {
    display:none;
  }
  .feature-grid {
    grid-template-columns:1.6fr 1fr;
    gap:16px;
  }
  .feature-copy {
    padding:25px;
  }
  .feature-copy h2 {
    font-size:37px;
  }
  .village-feature {
    min-height:360px;
  }
  .kido-feature {
    padding:20px;
  }
  .kido-feature h2 {
    font-size:26px;
  }
  .book-preview {
    height:130px;
  }
  .mini-card {
    height:128px;
    width:100px;
  }
  .mini-card img {
    height:85px;
  }
  .game-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .play-note h2 {
    font-size:20px;
  }
  .play-note>a {
    font-size:11px;
    padding:10px;
  }
  .kido-heading h1 {
    font-size:30px;
  }
}
@media(max-width:700px) {
  .console-header {
    min-height:80px;
    padding:14px 20px;
    gap:12px;
  }
  .brand {
    font-size:24px;
  }
  .brand img {
    width:36px;
    height:36px;
  }
  .home-nav {
    display:none;
  }
  .parent-trigger {
    margin-left:auto;
    padding:10px 4px;
  }
  .console-main {
    padding:25px 18px 0;
  }
  .welcome-line {
    margin-bottom:22px;
  }
  .welcome-line h1 {
    font-size:30px;
    max-width:310px;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.7px;
  }
  .feature-grid {
    grid-template-columns:1fr;
  }
  .village-feature {
    min-height:340px;
  }
  .feature-copy {
    padding:27px;
  }
  .feature-copy h2 {
    font-size:37px;
    max-width:280px;
  }
  .feature-copy p {
    font-size:12px;
  }
  .village-art {
    right:-19%;
    width:100%;
  }
  .feature-copy .primary-button {
    font-size:12px;
  }
  .kido-feature {
    min-height:180px;
    display:block;
    padding:22px;
  }
  .kido-feature-top {
    max-width:55%;
  }
  .kido-feature h2 {
    font-size:25px;
    margin-top:15px;
  }
  .kido-feature p {
    font-size:11px;
    max-width:53%;
    margin:9px 0;
  }
  .book-preview {
    position:absolute;
    right:12px;
    top:40px;
    width:145px;
    height:130px;
  }
  .mini-card {
    width:90px;
    height:117px;
    left:calc(50% - 45px);
  }
  .mini-card img {
    width:77px;
    height:77px;
  }
  .mini-card.behind {
    transform:rotate(-15deg) translate(-19px,0);
  }
  .mini-card.front {
    transform:rotate(12deg) translate(12px,0);
  }
  .kido-feature .text-link {
    max-width:53%;
    border:0;
    padding-top:7px;
  }
  .tiny-star {
    display:none;
  }
  .library {
    margin-top:32px;
  }
  .section-heading h2 {
    font-size:29px;
  }
  .count-label {
    font-size:10px;
  }
  .shelf-controls {
    flex-direction:column;
    align-items:stretch;
    gap:13px;
  }
  .shelf-tabs {
    gap:3px;
    justify-content:space-between;
  }
  .shelf-tab {
    font-size:12px;
    padding:9px 13px;
  }
  .search-box input {
    width:100%;
  }
  .game-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 12px;
  }
  .tile-art {
    height:155px;
    border-radius:15px;
  }
  .tile-art>img {
    height:122px;
    width:122px;
    margin-top:19px;
  }
  .tile-category {
    font-size:8px;
    left:11px;
  }
  .tile-copy h3 {
    font-size:15px;
  }
  .tile-copy p {
    font-size:10px;
  }
  .tile-play {
    width:26px;
    height:26px;
    bottom:9px;
    right:9px;
  }
  .art-orbit {
    width:110px;
    height:110px;
  }
  .play-note {
    padding:23px 0;
    gap:14px;
    flex-wrap:wrap;
  }
  .play-note>img {
    width:42px;
    height:42px;
  }
  .play-note>div {
    flex:1;
  }
  .play-note h2 {
    font-size:20px;
  }
  .play-note>a {
    margin:3px 0 0 55px;
  }
  .console-footer {
    padding:23px 20px;
    font-size:9px;
    gap:20px;
  }
  .console-footer span:last-child {
    display:none;
  }
  .recent-game {
    padding:13px;
  }
  .recent-action {
    font-size:10px;
  }
  .game-heading {
    flex-wrap:wrap;
  }
  .game-heading h1 {
    font-size:23px;
  }
  .game-actions {
    width:100%;
    justify-content:space-between;
  }
  .game-actions .quiet-button {
    flex:1;
    padding:9px;
  }
  .game-hud {
    padding:10px 14px;
  }
  .hud-scores {
    gap:12px;
    font-size:10px;
  }
  .hud-scores strong {
    font-size:16px;
  }
  .arcade-canvas-stage {
    height:62vh;
    min-height:440px;
  }
  .start-panel>img {
    height:100px;
    width:105px;
  }
  .start-panel h2 {
    font-size:27px;
  }
  .start-panel p {
    font-size:13px;
  }
  .game-overlay {
    padding:18px;
  }
  .start-panel .control-tip {
    font-size:11px;
    padding:10px;
  }
  .touch-bar {
    gap:7px;
  }
  .touch-btn {
    min-width:48px;
  }
  .kido-heading {
    flex-wrap:wrap;
    gap:12px;
  }
  .kido-heading>img {
    width:48px;
    height:48px;
  }
  .kido-heading h1 {
    font-size:27px;
  }
  .kido-heading p {
    font-size:11px;
  }
  .kido-toolbar {
    width:100%;
    margin:0;
    justify-content:space-between;
  }
  .kido-toolbar button {
    flex:1;
  }
  .kido-setup {
    padding:20px 16px;
  }
  .kido-intro {
    gap:12px;
  }
  .kido-intro h2 {
    font-size:25px;
  }
  .kido-intro p {
    font-size:12px;
  }
  .kido-intro img {
    width:58px;
    height:58px;
  }
  .deck-grid {
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .deck-button img {
    width:78px;
    height:78px;
  }
  .deck-button {
    padding:10px;
  }
  .deck-button strong {
    font-size:14px;
  }
  .mode-grid {
    grid-template-columns:1fr;
  }
  .mode-button {
    padding:13px 15px;
  }
  .mode-button[aria-pressed=true] {
    padding:12px 14px;
  }
  .setup-bottom {
    flex-direction:column;
    align-items:stretch;
    text-align:center;
  }
  .setup-bottom p {
    max-width:none;
  }
  .kido-book-top {
    padding:14px;
    font-size:10px;
  }
  .kido-round {
    padding:20px 12px;
  }
  .kido-round h2 {
    font-size:25px;
  }
  .answer-grid {
    gap:8px;
  }
  .answer-card {
    padding:8px 3px;
    min-height:140px;
    border-radius:14px;
  }
  .answer-card img {
    width:90px;
    height:100px;
  }
  .answer-card .card-word {
    font-size:18px;
  }
  .round-topline {
    margin-bottom:20px;
  }
  .round-topline .quiet-button {
    padding:9px 11px;
    font-size:12px;
  }
  .round-dots {
    gap:6px;
  }
  .round-dot {
    width:10px;
    height:10px;
  }
  .feedback {
    font-size:13px;
  }
  .resume-note {
    flex-direction:column;
  }
  .kido-finish h2 {
    font-size:29px;
  }
  .parent-dialog {
    padding:25px;
  }
  .gate-row {
    flex-wrap:wrap;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .game-tile:hover .tile-art>img {
    transform:none;
  }
}
.reduce-motion *,.reduce-motion *:before,.reduce-motion *:after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important;
}
.reduce-motion .game-tile:hover .tile-art>img {
  transform:none;
}
@media(min-width:701px) {
  .mode-grid {
    grid-template-columns:repeat(2,1fr);
  }
}
/* The Little Scoop Shop: an accessible DOM game with a tactile illustrated counter. */
.cream-page {
  max-width:1100px;
  margin:auto;
}
.cream-mode-bar {
  display:flex;
  gap:8px;
  align-items:center;
  margin:0 0 20px;
}
.cream-mode-bar>.quiet-button {
  margin-left:auto;
}
.cream-shop {
  border:1px solid #e2d6c4;
  border-radius:26px;
  overflow:hidden;
  background:#f5efe1;
}
.shop-awning {
  height:43px;
  background:repeating-linear-gradient(90deg,#de9c96 0 65px,#f9efd7 65px 130px);
  border-bottom:8px solid #b986731a;
  clip-path:polygon(0 0,100% 0,100% 85%,98% 100%,94% 85%,90% 100%,86% 85%,82% 100%,78% 85%,74% 100%,70% 85%,66% 100%,62% 85%,58% 100%,54% 85%,50% 100%,46% 85%,42% 100%,38% 85%,34% 100%,30% 85%,26% 100%,22% 85%,18% 100%,14% 85%,10% 100%,6% 85%,2% 100%,0 85%);
}
.cream-scene {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:25px;
  padding:27px 50px 25px;
  background:radial-gradient(ellipse at 22% 55%,#fff8e9 0 28%,transparent 29%),#f0e8d7;
}
.cone-workspace {
  display:flex;
  align-items:center;
  flex-direction:column;
}
.shop-label {
  font-size:9px;
  font-weight:800;
  letter-spacing:1.7px;
  color:#806e58;
}
.cone-display {
  height:280px;
  display:flex;
  flex-direction:column;
  justify-content:end;
  align-items:center;
  position:relative;
  width:220px;
  isolation:isolate;
}
.cone-display:after {
  content:'';
  position:absolute;
  width:118px;
  height:13px;
  bottom:-6px;
  border-radius:50%;
  background:#826d5414;
  z-index:-1;
}
.waffle-cone {
  width:103px;
  height:122px;
  background:repeating-linear-gradient(42deg,transparent 0 17px,#b17d5138 18px 21px,transparent 22px 35px),repeating-linear-gradient(-42deg,#e6ba7e 0 17px,#b17d5138 18px 21px,#e6ba7e 22px 35px);
  clip-path:polygon(0 0,100% 0,50% 100%);
  border-top:6px solid #cf9f63;
  border-radius:4px;
  flex-shrink:0;
}
.scoop-stack {
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  position:relative;
  margin-bottom:-8px;
  z-index:1;
}
.ice-scoop {
  width:116px;
  height:65px;
  background:radial-gradient(ellipse at 32% 22%,#ffffff4d 0 13%,transparent 14%),var(--scoop);
  border-radius:55% 55% 35% 35%;
  box-shadow:inset -7px -8px 0 #3b272411,0 3px 2px #78594b16;
  margin-top:-15px;
  position:relative;
}
.ice-scoop:before {
  content:'';
  position:absolute;
  bottom:-3px;
  left:10px;
  right:10px;
  height:18px;
  border-radius:50%;
  background:var(--scoop);
}
.empty-cone-hint {
  font-size:11px;
  color:#8b7a67;
  margin-bottom:30px;
  max-width:100px;
  text-align:center;
}
.cone-topping {
  position:absolute;
  top:-27px;
  left:43px;
  z-index:5;
}
.cone-topping.cherry {
  width:29px;
  height:28px;
  border-radius:50%;
  background:#c87277;
  box-shadow:inset -4px -3px 0 #a85b671f;
}
.cone-topping.cherry:before {
  content:'';
  position:absolute;
  left:15px;
  top:-16px;
  width:17px;
  height:20px;
  border-left:4px solid #6d8b62;
  border-radius:70% 0 0 0;
  transform:rotate(28deg);
}
.cone-topping.sprinkles {
  top:-7px;
  left:21px;
  width:75px;
  height:38px;
  background:repeating-linear-gradient(125deg,transparent 0 13px,#fcf1c1 14px 18px,transparent 19px 28px);
  border-radius:50%;
  transform:rotate(-12deg);
}
.cone-tools {
  display:flex;
  gap:8px;
  margin-top:20px;
}
.cone-tools .quiet-button {
  min-height:48px;
  font-size:12px;
  padding:8px 15px;
}
.customer-panel {
  padding:14px 0;
  max-width:360px;
  align-self:center;
}
.customer-intro {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.customer-intro img {
  width:80px;
  height:80px;
}
.customer-intro h2 {
  font-size:25px;
}
.customer-intro .eyebrow {
  font-size:8px;
  margin-bottom:7px;
}
.order-ticket {
  background:#fffaf0;
  padding:18px 24px;
  border-radius:13px;
  box-shadow:0 5px 10px #9a7e5908;
  border-bottom:3px dashed #e6d8bf;
}
.ticket-note {
  font-size:11px;
  color:#8c7a64;
  margin:8px 0;
}
.order-ticket ol {
  margin:12px 0;
  padding-left:18px;
  font-size:14px;
  font-weight:650;
}
.order-ticket li {
  padding:5px 0 5px 6px;
}
.flavour-dot {
  display:inline-block;
  width:15px;
  height:15px;
  border:1px solid #89735b20;
  border-radius:50%;
  margin-right:10px;
  vertical-align:middle;
}
.order-ticket>p:last-child {
  font-size:12px;
  color:#796858;
  margin-top:10px;
}
.patient-note {
  font-size:11px;
  color:#7e8168;
  margin:15px 0 0;
}
.creative-flower {
  width:85px;
  height:85px;
  margin-bottom:12px;
}
.customer-panel>h2 {
  font-size:33px;
}
.customer-panel>p:not(.eyebrow):not(.patient-note) {
  font-size:13px;
  color:#82725f;
  line-height:1.8;
  margin-top:15px;
}
.ingredient-counter {
  padding:23px 35px;
  background:#fff9ec;
  border-top:1px solid #e7dbc5;
}
.counter-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:17px;
}
.counter-heading h2 {
  font-size:23px;
}
.counter-heading span {
  font-size:11px;
  color:var(--muted);
}
.flavour-tray {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.flavour-button {
  border:1px solid #e5daca;
  border-radius:15px;
  background:#f8f1e4;
  padding:12px 5px;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:12px;
}
.flavour-button:hover:not(:disabled) {
  background:#eee7d7;
  border-color:#b6b59a;
}
.flavour-sample {
  width:62px;
  height:43px;
  border-radius:60% 60% 40% 40%;
  background:radial-gradient(ellipse at 30% 20%,#ffffff66 0 15%,transparent 16%),var(--scoop);
  box-shadow:inset -4px -4px 0 #00000008;
}
.topping-row {
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:18px;
}
.topping-row>span {
  font-size:12px;
  font-weight:700;
}
.topping-row>div {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.topping-button {
  min-height:48px;
  border:1px solid #e4d9c6;
  border-radius:12px;
  background:transparent;
  padding:10px 15px;
  color:var(--ink);
  font-size:12px;
}
.topping-button[aria-pressed=true] {
  background:#e4ecdc;
  border-color:#718b6c;
}
.serve-bar {
  padding:20px 35px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:#edf0e2;
}
.serve-bar p {
  font-size:13px;
  max-width:550px;
}
.serve-bar button {
  white-space:nowrap;
}
.recipe-shelf {
  margin:38px 0;
}
.recipe-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
}
.recipe-card {
  border-radius:18px;
  background:#eee9dd;
  border:1px solid #e1dacc;
  padding:15px;
  text-align:center;
  overflow:hidden;
}
.mini-cone {
  transform:scale(.58);
  transform-origin:center bottom;
  margin:-100px auto 5px;
}
.recipe-card>p {
  font-weight:750;
  font-size:14px;
  margin:15px 0 5px;
}
.recipe-card>small {
  font-size:11px;
  color:var(--muted);
  display:block;
}
@media(max-width:700px) {
  .cream-mode-bar {
    gap:4px;
    flex-wrap:wrap;
  }
  .cream-mode-bar>.quiet-button {
    font-size:11px;
    padding:8px 11px;
  }
  .cream-mode-bar .shelf-tab {
    font-size:11px;
    padding:9px 11px;
  }
  .cream-scene {
    padding:20px 14px;
    gap:12px;
    grid-template-columns:1fr 1fr;
  }
  .cone-display {
    width:145px;
    height:253px;
  }
  .ice-scoop {
    width:96px;
    height:57px;
  }
  .waffle-cone {
    width:88px;
    height:105px;
  }
  .cone-topping {
    left:34px;
  }
  .cone-topping.sprinkles {
    left:13px;
    width:65px;
  }
  .shop-label {
    font-size:7px;
    letter-spacing:1px;
  }
  .cone-tools {
    gap:5px;
  }
  .cone-tools .quiet-button {
    font-size:10px;
    padding:8px;
  }
  .customer-intro {
    flex-direction:column;
    align-items:start;
    gap:6px;
  }
  .customer-intro img {
    width:55px;
    height:55px;
  }
  .customer-intro h2 {
    font-size:20px;
  }
  .customer-intro .eyebrow {
    font-size:7px;
  }
  .customer-panel {
    padding:5px 0;
    min-width:0;
  }
  .order-ticket {
    padding:12px;
  }
  .order-ticket ol {
    font-size:11px;
    padding-left:12px;
  }
  .order-ticket li {
    padding-left:0;
  }
  .flavour-dot {
    width:10px;
    height:10px;
    margin-right:5px;
  }
  .order-ticket>p:last-child,.ticket-note {
    font-size:10px;
  }
  .patient-note {
    font-size:10px;
  }
  .ingredient-counter {
    padding:18px 12px;
  }
  .flavour-tray {
    gap:6px;
  }
  .flavour-button {
    font-size:8px;
    padding:9px 2px;
    border-radius:11px;
  }
  .flavour-sample {
    width:42px;
    height:32px;
  }
  .counter-heading h2 {
    font-size:21px;
  }
  .topping-row {
    gap:8px;
    align-items:start;
    flex-direction:column;
  }
  .topping-row>div {
    width:100%;
    gap:6px;
  }
  .topping-button {
    flex:1;
    padding:9px;
    font-size:11px;
  }
  .serve-bar {
    padding:18px;
    flex-direction:column;
    gap:16px;
    align-items:stretch;
  }
  .serve-bar p {
    font-size:12px;
    min-height:36px;
  }
  .customer-panel>h2 {
    font-size:25px;
  }
  .customer-panel>p:not(.eyebrow):not(.patient-note) {
    font-size:11px;
  }
  .creative-flower {
    width:60px;
    height:60px;
  }
  .recipe-grid {
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .recipe-card {
    padding:10px;
  }
  .mini-cone {
    margin-top:-95px;
    width:120px;
  }
  .cream-page .kido-heading>div:not(.kido-toolbar) {
    flex:1;
  }
}
/* Keep the kitchen and its ingredients visible together on a tablet. */
.focused-play .console-header {
  min-height:76px;
  padding-top:10px;
  padding-bottom:10px;
}
.focused-play .console-main {
  padding-top:22px;
}
.focused-play .kido-heading {
  margin-bottom:20px;
}
@media(min-width:701px) {
  .cream-shop {
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);
  }
  .shop-awning,.serve-bar {
    grid-column:1 / -1;
  }
  .cream-scene {
    padding:24px 20px;
    gap:18px;
  }
  .ingredient-counter {
    padding:24px 18px;
    border-top:0;
    border-left:1px solid #e7dbc5;
  }
  .flavour-tray {
    grid-template-columns:repeat(3,1fr);
    gap:9px;
  }
  .flavour-button {
    font-size:11px;
    padding:10px 4px;
  }
  .flavour-sample {
    width:53px;
    height:36px;
  }
  .topping-row {
    flex-direction:column;
    align-items:start;
    gap:9px;
    margin-top:22px;
  }
  .topping-row>div {
    gap:5px;
  }
  .topping-button {
    padding:9px 10px;
    font-size:11px;
  }
  .customer-intro {
    flex-direction:column;
    align-items:start;
    gap:3px;
  }
  .customer-intro img {
    width:62px;
    height:62px;
  }
  .customer-intro h2 {
    font-size:23px;
  }
  .order-ticket {
    padding:16px;
  }
  .order-ticket ol {
    font-size:13px;
  }
  .cone-display {
    width:170px;
    height:260px;
  }
}
@media(min-width:701px) and (max-width:950px) {
  .cream-shop {
    grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr);
  }
  .cream-scene {
    padding:20px 12px;
    gap:10px;
  }
  .cone-display {
    width:135px;
  }
  .customer-intro h2 {
    font-size:20px;
  }
  .order-ticket {
    padding:12px;
  }
  .order-ticket ol {
    font-size:11px;
  }
  .flavour-button {
    font-size:10px;
  }
  .flavour-sample {
    width:45px;
    height:33px;
  }
  .counter-heading span {
    display:none;
  }
}
@media(max-width:700px) {
  .focused-play .console-header {
    min-height:65px;
    padding-top:7px;
    padding-bottom:7px;
  }
  .focused-play .console-main {
    padding-top:16px;
  }
  .focused-play .kido-heading {
    margin-bottom:15px;
  }
  .focused-play .kido-heading .eyebrow {
    margin-bottom:7px;
  }
  .focused-play .kido-heading h1 {
    font-size:25px;
  }
  .cream-mode-bar {
    margin-bottom:14px;
  }
  .shop-awning {
    height:30px;
  }
  .cream-scene {
    padding:15px 12px;
  }
  .cone-display {
    height:205px;
    width:135px;
  }
  .ice-scoop {
    height:49px;
    width:91px;
    margin-top:-13px;
  }
  .waffle-cone {
    height:95px;
    width:83px;
  }
  .cone-tools {
    margin-top:12px;
  }
  .flavour-button {
    font-size:10px;
  }
  .customer-intro {
    margin-bottom:9px;
  }
  .customer-intro img {
    width:43px;
    height:43px;
  }
  .ingredient-counter {
    padding:16px 12px;
  }
  .counter-heading {
    margin-bottom:12px;
  }
  .topping-row {
    margin-top:13px;
  }
  .serve-bar {
    padding:15px;
    gap:12px;
  }
}
@media(max-width:380px) {
  .cream-scene {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .cone-display {
    max-width:100%;
  }
  .cone-tools {
    flex-wrap:wrap;
    justify-content:center;
  }
  .flavour-tray {
    grid-template-columns:repeat(3,1fr);
  }
  .flavour-button {
    font-size:11px;
  }
  .cream-mode-bar .shelf-tab {
    padding:9px;
  }
  .cream-mode-bar>.quiet-button {
    padding:8px;
  }
}