/* Паровозик-Радуга. The child's screens have no text; only the grown-ups' corner uses words. */

@property --k {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  --bar: 64px;
  --train: 140px;
  --wood: #e9c48f;
  --wood-dark: #a8743f;
  --ink: #5a3415;
  --sky: #9fd6f0;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sky);
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
#app { position: fixed; inset: 0; overflow: hidden; }
button { font: inherit; }

/* ---------------------------------------------------------------- loader */
#boot {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#bfe6f7, #9fd6f0);
}
.boot-dots { display: flex; gap: 14px; }
.boot-dots i { width: 22px; height: 22px; border-radius: 50%; animation: bounce 0.9s ease-in-out infinite; }
.boot-dots i:nth-child(1) { background: #e5322b; }
.boot-dots i:nth-child(2) { background: #fbd21e; animation-delay: 0.12s; }
.boot-dots i:nth-child(3) { background: #2a63de; animation-delay: 0.24s; }
.boot-dots i:nth-child(4) { background: #33a23a; animation-delay: 0.36s; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

/* ---------------------------------------------------------------- station */
.scene { position: absolute; inset: 0; overflow: hidden; background: #d8d8d8; }
.bg-color, .bg-grey { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.stage { position: absolute; left: 0; right: 0; z-index: 3; }
.fx { position: absolute; inset: 0; z-index: 8; pointer-events: none; }

.rails {
  position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
  bottom: calc(var(--train) * 0.02); height: calc(var(--train) * 0.15);
  background:
    linear-gradient(#9a9a9a, #9a9a9a) 0 22% / 100% 3px no-repeat,
    linear-gradient(#9a9a9a, #9a9a9a) 0 70% / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, #8b5a2f 0 10px, transparent 10px 30px),
    linear-gradient(transparent 30%, rgba(196, 150, 96, 0.85) 30% 85%, transparent 85%);
}
.train { position: absolute; left: 0; right: 0; bottom: calc(var(--train) * 0.08); z-index: 4; pointer-events: none; }
.car { position: absolute; bottom: 0; pointer-events: auto; }
.car .pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); }
.wagon .body { z-index: 2; }
/* passengers and cargo sit inside the box: their lower part is cut at the front wall's top edge (~52% up the car) */
.wagon .rider { position: absolute; z-index: 3; width: 74%; left: 13%; bottom: 30%; clip-path: inset(0 0 31% 0);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2)); }
.wagon .cargo { position: absolute; z-index: 3; width: 44%; height: auto; inset: auto; bottom: 36%; clip-path: inset(0 0 34% 0); }
.wagon.hover, .wagon.lifted { filter: brightness(1.15); }
.train.moving .car { animation: chug 0.32s ease-in-out infinite; }
.train.moving .car:nth-child(2n) { animation-delay: 0.16s; }
@keyframes chug { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.smoke { position: absolute; top: 2%; right: 22%; width: 1px; height: 1px; }
.smoke i { position: absolute; width: 26px; height: 26px; margin: -13px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); }

/* ---------------------------------------------------------------- top bar */
.bar {
  position: absolute; top: 0; left: 0; right: 0; height: var(--bar); z-index: 12; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  padding-top: env(safe-area-inset-top);
}
.bar > * { pointer-events: auto; }
.btn {
  width: calc(var(--bar) * 0.84); height: calc(var(--bar) * 0.84); flex: none; border: none; border-radius: 50%;
  padding: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #fbe3bd, var(--wood) 55%, var(--wood-dark));
  box-shadow: 0 4px 0 #7b4f2c, 0 6px 10px rgba(0, 0, 0, 0.25);
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #7b4f2c, 0 2px 6px rgba(0, 0, 0, 0.25); }
.btn svg { width: 58%; height: 58%; }
.btn.album { background: none; box-shadow: none; }
.btn.album img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3)); }
.btn.gear {
  width: calc(var(--bar) * 0.46); height: calc(var(--bar) * 0.46); opacity: 0.5; position: relative;
  background: rgba(255, 255, 255, 0.45); box-shadow: none; color: #555;
}
.btn.gear svg { width: 70%; height: 70%; }
.btn.gear i {
  position: absolute; inset: -5px; border-radius: 50%; opacity: 0;
  background: conic-gradient(#ff8a00 var(--k), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
}
.btn.gear.hold { opacity: 1; }
.btn.gear.hold i { opacity: 1; animation: hold 3s linear forwards; }
@keyframes hold { from { --k: 0deg; } to { --k: 360deg; } }
.drops { flex: 1; display: flex; justify-content: center; gap: 8px; }
.drop {
  width: calc(var(--bar) * 0.32); height: calc(var(--bar) * 0.42); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: rgba(255, 255, 255, 0.5); border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.drop.full { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.7), var(--c) 45%); border-color: #fff; }

/* ---------------------------------------------------------------- things */
.thing { position: absolute; will-change: transform; z-index: 3; }
.thing.prop { z-index: 2; }
.thing.prop.front { z-index: 4; }
.thing .pic {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 7px 6px rgba(0, 0, 0, 0.28));
}
.thing.touchable { cursor: pointer; }
.thing.dragging { z-index: 9; transition: none; }
.thing.lifted { z-index: 9; animation: lifted 0.9s ease-in-out infinite; }
@keyframes lifted { 0%, 100% { transform: translateY(-8px) scale(1.08); } 50% { transform: translateY(-14px) scale(1.1); } }
.thing.glow .pic { animation: glow 1s ease-in-out infinite; }
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #fff7a0) drop-shadow(0 7px 6px rgba(0, 0, 0, 0.28)); }
  50% { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 22px #ffe95a) drop-shadow(0 7px 6px rgba(0, 0, 0, 0.28)); }
}
.thing .pic.grey { filter: grayscale(1) brightness(1.1) contrast(0.8) drop-shadow(0 0 2px #fff) drop-shadow(0 7px 6px rgba(0, 0, 0, 0.28)); }
.thing .pic.reveal { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 7px 6px rgba(0, 0, 0, 0.28)); }
.thing.shadow .pic { filter: brightness(0) opacity(0.42); }
.thing.hole .pic { filter: brightness(0) opacity(0.55); }
.thing.hole.hover .pic, .zone.hover, .slot.hover, .thing.hover .pic { outline: none; }
.thing.hole.hover { transform: scale(1.08); }
.zone { position: absolute; z-index: 1; border-radius: 24px; }
.zone.hover { background: rgba(255, 255, 255, 0.28); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6) inset; }
.slot {
  position: absolute; z-index: 2; border: 4px dashed rgba(255, 255, 255, 0.95); border-radius: 30%;
  background: rgba(255, 255, 255, 0.25); animation: breathe 1.4s ease-in-out infinite;
}
.slot.round { border-radius: 50%; }
.slot.hover { background: rgba(255, 255, 255, 0.55); }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.rope { position: absolute; z-index: 1; border-radius: 3px; background: #8b5a2f; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); }
.pin {
  position: absolute; left: 50%; top: -6%; width: 12%; height: 22%; margin-left: -6%; border-radius: 4px; z-index: 3;
  background: linear-gradient(90deg, #c98e4f, #e9c48f, #c98e4f); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
.string { position: absolute; z-index: 1; border-radius: 3px; background: #6b4a2b; }
.listen { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; }
.listen::before, .listen::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 6px solid rgba(255, 255, 255, 0.9);
  animation: listen 1.6s ease-out infinite;
}
.listen::after { animation-delay: 0.8s; }
@keyframes listen { from { transform: scale(0.7); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.counted {
  position: absolute; left: 50%; top: -4%; width: 26%; height: 26%; margin-left: -13%; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.fill {
  position: absolute; left: 13%; right: 13%; top: 14%; height: 22%; border-radius: 50%; opacity: 0; z-index: 1;
  transition: opacity 0.4s; box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.15);
}
.fill.on { opacity: 1; }
.spark { position: absolute; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 6px rgba(255, 255, 255, 0.9); }
.blot { position: absolute; width: 120px; height: 120px; border-radius: 50%; }

/* ---------------------------------------------------------------- hand, wake */
.hand-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.hand { position: absolute; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }
.wake {
  position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(159, 214, 240, 0.75));
}
.wake-loco { width: min(64vw, 46vh); animation: breathe 1.6s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.3)); }

/* ---------------------------------------------------------------- map */
.map { position: absolute; inset: 0; z-index: 15; background: #8ecf6a; overflow: hidden; }
.map-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.track { position: absolute; inset: 0; width: 100%; height: 100%; }
.track path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.track .bed { stroke: #e2c28f; }
.track .sleepers { stroke: #8b5a2f; stroke-dasharray: 5 9; stroke-linecap: butt; }
.track .rail { stroke: #7d7d7d; }
.medal {
  position: absolute; border-radius: 50%; background-size: cover; background-position: center;
  border: 5px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.medal.grey { filter: grayscale(1) brightness(1.05) contrast(0.85); }
.medal.next { animation: breathe 1s ease-in-out infinite; border-color: #ffe95a; }
.map-loco { position: absolute; z-index: 3; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.35)); }

/* ---------------------------------------------------------------- album */
.album-view {
  position: absolute; inset: 0; z-index: 25; overflow-y: auto; touch-action: pan-y;
  background: radial-gradient(circle at 20% 10%, #fff8e6, #f5dfb5);
}
.album-view .back { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 10px; z-index: 2; width: 66px; height: 66px; }
.pages {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(26vw, 120px), 1fr)); gap: 12px;
  padding: 88px 14px 24px;
}
.slot-st { aspect-ratio: 1; border-radius: 50%; border: 4px dashed rgba(139, 90, 47, 0.28); position: relative; }
.slot-st .sticker { position: absolute; inset: -6px; }
.sticker .pic {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(0 4px 5px rgba(0, 0, 0, 0.3));
}
.sticker-show { position: absolute; inset: 0; z-index: 26; background: rgba(255, 255, 255, 0.35); pointer-events: none; }
.sticker.big { position: absolute; }

/* ---------------------------------------------------------------- grown-ups */
.grown {
  position: absolute; inset: 0; z-index: 40; background: rgba(30, 30, 40, 0.55);
  align-items: center; justify-content: center; touch-action: pan-y;
}
.grown-box {
  background: #fff; color: #222; border-radius: 18px; width: calc(100% - 24px); max-width: 600px;
  max-height: calc(100% - 24px); overflow-y: auto; padding: 14px 16px 18px; font-size: 15px; line-height: 1.35;
  -webkit-user-select: text; user-select: text;
}
.grown-head { display: flex; align-items: center; justify-content: space-between; }
.grown h2 { margin: 4px 0 8px; font-size: 22px; }
.grown h3 { margin: 16px 0 4px; font-size: 18px; }
.grown-close { border: none; background: #eee; border-radius: 50%; width: 40px; height: 40px; font-size: 18px; cursor: pointer; }
.grown-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { border: 2px solid #ccc; background: #f6f6f6; border-radius: 999px; padding: 8px 14px; font-size: 15px; cursor: pointer; }
.pill.on { border-color: #2a9d4b; background: #e6f6ea; }
.pill.danger { margin-top: 12px; border-color: #d55; color: #b22; background: #fff3f3; }
.grown-note { color: #666; font-size: 13px; margin: 6px 0; }
.knows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.know { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #ccc; flex: none; }
.kname { min-width: 96px; font-weight: 600; }
.kstate { font-size: 13px; padding: 2px 8px; border-radius: 999px; background: #eee; color: #555; }
.kstate.known, .chip.known { background: #d9f2df; color: #1d6b33; }
.kstate.learning, .chip.learning { background: #fff2c2; color: #7a5a00; }
.kconf { font-size: 13px; color: #a5501a; }
.kwords { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 13px; padding: 2px 8px; border-radius: 999px; background: #eee; color: #777; }