:root {
  --ink: #30254d;
  --paper: #fffaf0;
  --plum: #7452b8;
  --shadow: #39295e;
  --star: #ffd84d;
  --star-stroke: #a86100;
  --chrome-fill: #fffaf0;
  --world: #3f7fd0;
  --world-soft: #d5e5f8;
  --control: 56px;
  --edge-top: max(10px, env(safe-area-inset-top));
  --edge-right: max(10px, env(safe-area-inset-right));
  --edge-bottom: max(10px, env(safe-area-inset-bottom));
  --edge-left: max(10px, env(safe-area-inset-left));
  --spring: cubic-bezier(.2, .9, .25, 1.2);
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  color: var(--ink);
  background: #fbe3c4;
}

body[data-world="toys"] { --world: #3f7fd0; --world-soft: #d5e5f8; --chrome-fill: #fffaf0; background: #fbe3c4; }
body[data-world="forest"] { --world: #6aa84f; --world-soft: #dcefcf; --chrome-fill: #f7fbef; background: #2f6b4f; }
body[data-world="kitchen"] { --world: #e85d4a; --world-soft: #fde3dc; --chrome-fill: #ffffff; background: #e4f1f8; }
body[data-world="music"] { --world: #6b3fa0; --world-soft: #e6dbf6; --chrome-fill: #fbf7ff; background: #27306a; }

* { box-sizing: border-box; }

html,
body,
#game-shell {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }

button,
a { font: inherit; }

[hidden] { display: none !important; }

#game-shell { position: relative; min-height: 100dvh; isolation: isolate; }

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: manipulation;
}

/* Task panel: one short line in the cupboard's language with a drawn goal icon and pair dots. */
.task-panel {
  position: fixed;
  z-index: 20;
  top: var(--edge-top);
  left: 50%;
  display: grid;
  grid-template-columns: auto auto;
  justify-items: center;
  column-gap: 10px;
  row-gap: 4px;
  width: max-content;
  max-width: calc(100vw - 2 * (3 * var(--control) + 24px + 22px));
  padding: 8px 18px 10px 12px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: var(--chrome-fill);
  box-shadow: 0 5px 0 var(--shadow), 0 10px 22px rgba(31, 24, 51, .18);
  transform: translateX(-50%);
}

.task-title {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--plum);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .01em;
  white-space: nowrap;
}

.task-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }

/* MIX only: a small sticker with the language this cupboard speaks. */
.task-panel:has(.lang-badge:not([hidden])) { padding-right: 40px; }
.lang-badge {
  position: absolute;
  top: -9px;
  right: -9px;
  min-width: 44px;
  height: 28px;
  padding: 0 8px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: var(--star);
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  line-height: 23px;
  letter-spacing: .06em;
  text-align: center;
  box-shadow: 0 3px 0 var(--shadow);
  transform: rotate(6deg);
  pointer-events: none;
}

.task-icon { flex: 0 0 auto; width: 38px; height: 38px; }
.task-icon .cab { fill: var(--world-soft); stroke: var(--ink); stroke-width: 1.8; }
.task-icon .seam { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.task-icon .eye { fill: var(--ink); }
.task-icon .knob { fill: #e2b33c; stroke: var(--ink); stroke-width: .8; }

.task-text {
  margin: 0;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.15;
  text-wrap: balance;
}

.pair-dots {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pair-dots li { width: 22px; height: 22px; }
.pair-dots svg { width: 100%; height: 100%; display: block; }
.pair-dots circle { fill: var(--paper); stroke: var(--ink); stroke-width: 2.2; }
.pair-dots .found circle { fill: var(--plum); }
.pair-dots path { fill: none; stroke: var(--paper); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pair-dots .found { animation: dot-fill 260ms var(--spring) both; }

@keyframes dot-fill { from { transform: scale(.6); } to { transform: scale(1); } }

/* Top-right chrome: repeat, sound, fullscreen. */
.top-actions {
  position: fixed;
  z-index: 30;
  top: var(--edge-top);
  right: var(--edge-right);
  display: flex;
  gap: 12px;
}

.icon-control,
.strip-button,
.big-control {
  display: inline-grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--chrome-fill);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--shadow), 0 8px 18px rgba(31, 24, 51, .18);
  cursor: pointer;
  touch-action: manipulation;
  text-decoration: none;
  transition: transform 200ms var(--spring), box-shadow 200ms var(--spring);
}

.icon-control { width: var(--control); height: var(--control); padding: 0; }

.icon-control svg,
.big-control svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-control:active,
.strip-button:active,
.big-control:active {
  transform: scale(.94);
  box-shadow: 0 2px 0 var(--shadow);
  transition-duration: 80ms;
}

.icon-control:focus-visible,
.strip-button:focus-visible,
.big-control:focus-visible,
.door-button:focus-visible {
  outline: 4px solid var(--paper);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--plum);
}

#sound-button .sound-off { display: none; }
#sound-button[aria-pressed="false"] .sound-on { display: none; }
#sound-button[aria-pressed="false"] .sound-off { display: block; }

/* Transparent hit areas exactly over the 3D doors. */
#door-controls { position: fixed; z-index: 10; inset: 0; pointer-events: none; }

.door-button {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.door-button[aria-disabled="true"] { cursor: default; }

/* World strip: four drawn mini cupboards. */
.level-strip {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: var(--edge-bottom);
  display: flex;
  gap: 12px;
  transform: translateX(-50%);
}

.strip-button {
  position: relative;
  width: 60px;
  height: 60px;
  padding: 0;
  background: var(--paper);
}

.strip-button[data-world="toys"] { --tile: #d5e5f8; --tile-ink: #3f7fd0; }
.strip-button[data-world="forest"] { --tile: #dcefcf; --tile-ink: #4f8a3a; }
.strip-button[data-world="kitchen"] { --tile: #fde3dc; --tile-ink: #d8604a; }
.strip-button[data-world="music"] { --tile: #e6dbf6; --tile-ink: #6b3fa0; }

.strip-button { background: var(--tile); }

.strip-icon {
  width: 36px;
  height: 36px;
  fill: var(--paper);
  stroke: var(--tile-ink);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.strip-button[aria-current="true"] {
  transform: translateY(-6px);
  border-color: var(--plum);
  box-shadow: 0 9px 0 var(--shadow), 0 14px 24px rgba(31, 24, 51, .26);
}

.strip-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  fill: var(--star);
  stroke: var(--star-stroke);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* Celebration: platform grammar. */
.celebration {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 90px 16px 130px;
  pointer-events: none;
}

.celebration-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(440px, 100%);
  padding: 18px 20px 22px;
  border: 3px solid var(--ink);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 0 7px 0 var(--shadow), 0 20px 44px rgba(31, 24, 51, .3);
  pointer-events: auto;
  animation: card-in 360ms var(--spring) both;
}

@keyframes card-in { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }

.celebration-star {
  width: 104px;
  height: 104px;
  fill: var(--star);
  stroke: var(--star-stroke);
  stroke-width: 1.3;
  stroke-linejoin: round;
  animation: star-in 520ms var(--spring) 80ms both;
}

@keyframes star-in { from { transform: scale(.4) rotate(-18deg); } to { transform: scale(1) rotate(0); } }

.celebration h2 { margin: 0 0 6px; font-size: 30px; font-weight: 950; line-height: 1.1; }

.celebration-actions { display: flex; justify-content: center; gap: 12px; }

.big-control {
  grid-auto-flow: row;
  gap: 2px;
  min-width: 96px;
  min-height: 76px;
  padding: 6px 10px;
  font-size: 17px;
  font-weight: 900;
}

.big-control.primary { background: var(--star); }

/* WebGL fallback. */
.error-panel {
  position: fixed;
  z-index: 50;
  top: 50%;
  left: 50%;
  width: min(90vw, 420px);
  padding: 28px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
  text-align: center;
  transform: translate(-50%, -50%);
}

.error-panel strong,
.error-panel span { display: block; font-size: 18px; font-weight: 800; }
.error-panel strong { margin-bottom: 8px; font-size: 24px; }

@media (max-width: 699px) {
  /* Below the top row and right of the platform corner (home badge and language toggle). */
  .task-panel {
    top: calc(var(--edge-top) + 48px + 12px);
    left: calc(var(--tokenville-corner-right, 96px) + 8px);
    right: var(--edge-right);
    width: auto;
    max-width: none;
    padding: 6px 12px 8px 10px;
    transform: none;
  }
  .task-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .task-icon { width: 32px; height: 32px; }
  .task-text { font-size: 19px; }
  .pair-dots li { width: 20px; height: 20px; }
}

@media (max-width: 640px) {
  :root { --control: 48px; }
  .icon-control svg { width: 24px; height: 24px; }
  .strip-button { width: 56px; height: 56px; }
  .strip-icon { width: 32px; height: 32px; }
  .big-control { min-width: 88px; font-size: 16px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .task-panel { padding: 4px 12px 6px 8px; row-gap: 2px; }
  .task-title { display: none; }
  .level-strip { left: auto; right: var(--edge-right); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}