@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&display=swap');

:root {
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --pad: 12px;
}
html, body { margin: 0; height: 100%; overflow: hidden; background: #8fd3ff; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; font-family: "Baloo 2", "Trebuchet MS", system-ui, sans-serif; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: none; }
#ui button { pointer-events: auto; }

/* ---------- chunky toy buttons ---------- */
.btn {
  width: 64px; height: 64px; border-radius: 50%; border: 4px solid #fff;
  background: #ffffffee; font-size: 30px; line-height: 1; padding: 0; margin: 0;
  display: grid; place-items: center; cursor: pointer; position: relative;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22), 0 8px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.08s, box-shadow 0.08s, opacity 0.25s;
  touch-action: none;
}
.btn:active, .btn.holding { transform: translateY(4px) scale(0.95); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.2); }
.btn.big { width: 86px; height: 86px; font-size: 42px; }
.btn.huge { width: 128px; height: 128px; font-size: 64px; }
.btn.small { width: 48px; height: 48px; font-size: 24px; opacity: 0.7; }
.btn svg { width: 70%; height: 70%; }
.btn .ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); pointer-events: none; }
.btn .ring circle { fill: none; stroke: #ff3b30; stroke-width: 4; stroke-dasharray: 107; stroke-dashoffset: 107; }

/* ---------- panels appear with a bounce ---------- */
#hud, .panel, #drive, #trackhud { opacity: 0; transform: scale(0.9); transition: opacity 0.2s, transform 0.25s cubic-bezier(.3,1.6,.5,1); }
#hud.on, .panel.on, #drive.on, #trackhud.on { opacity: 1; transform: none; }
#hud:not(.on) button, .panel:not(.on) button, #drive:not(.on) button, #trackhud:not(.on) button { pointer-events: none !important; }

#hud .build { position: absolute; right: calc(var(--pad) + var(--safe-r)); bottom: calc(var(--pad) + var(--safe-b)); background: #ffd83b; border-color: #fff4b8; }
#hud .track { position: absolute; left: calc(var(--pad) + var(--safe-l)); bottom: calc(var(--pad) + var(--safe-b)); background: #d9f5c8; }
#hud .places { position: absolute; left: calc(var(--pad) + var(--safe-l)); top: calc(var(--pad) + var(--safe-t)); background: #c8ecff; }
#hud .daynight { position: absolute; left: calc(var(--pad) + 76px + var(--safe-l)); top: calc(var(--pad) + var(--safe-t)); background: #2a3a7a; border-color: #8fa4ff; }
#hud .book { position: absolute; right: calc(var(--pad) + 60px + var(--safe-r)); top: calc(var(--pad) + var(--safe-t)); width: 54px; height: 54px; font-size: 26px; background: #fff3c4; }
#hud .gear { position: absolute; right: calc(var(--pad) + var(--safe-r)); top: calc(var(--pad) + var(--safe-t)); }

#places { position: absolute; left: calc(var(--pad) + var(--safe-l)); top: calc(var(--pad) + 80px + var(--safe-t)); display: flex; flex-wrap: wrap; gap: 10px; max-width: 360px; }
#places .btn { background: #fff; }

#sel { position: absolute; left: 50%; bottom: calc(var(--pad) + var(--safe-b)); transform-origin: bottom center; translate: -50% 0; display: flex; gap: 18px; align-items: flex-end; }
#sel .go { background: #4cd964; border-color: #c9ffd3; animation: pulse 1.2s ease-in-out infinite; }
#sel .go.rocket { background: #ff5e3a; border-color: #ffd0c4; }
#sel .edit { background: #ffe9a8; }
#sel .bin { background: #ffd6d6; }
@keyframes pulse { 50% { scale: 1.08; } }

#drive .exit { position: absolute; left: calc(var(--pad) + var(--safe-l)); top: calc(var(--pad) + var(--safe-t)); background: #ff6b6b; border-color: #ffd0d0; }
#drive .actions { position: absolute; right: calc(var(--pad) + var(--safe-r)); bottom: calc(var(--pad) + var(--safe-b)); display: flex; flex-direction: column-reverse; gap: 12px; }
#drive .actions .btn { width: 76px; height: 76px; font-size: 38px; background: #fff; }

#trackhud .exit { position: absolute; left: calc(var(--pad) + var(--safe-l)); top: calc(var(--pad) + var(--safe-t)); background: #4cd964; border-color: #c9ffd3; }
#trackhud .hint { position: absolute; left: 50%; bottom: 18%; width: 160px; height: 60px; translate: -50% 0; }
#trackhud .finger { position: absolute; font-size: 46px; animation: draw 2.4s ease-in-out infinite; filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)); }
#trackhud.on .hint { animation: fadeHint 6s forwards; }
@keyframes draw { 0% { left: 0; top: 0; opacity: 0; } 15% { opacity: 1; } 50% { left: 110px; top: 10px; } 85% { opacity: 1; } 100% { left: 110px; top: -30px; opacity: 0; } }
@keyframes fadeHint { 80% { opacity: 1; } 100% { opacity: 0; } }

#settings { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; background: #ffffffd0; padding: 18px; border-radius: 28px; max-width: 360px; }
#settings .credits { width: 100%; text-align: center; font-size: 12px; color: #456; }

/* ---------- start screen ---------- */
#start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: radial-gradient(ellipse at center, rgba(255,255,255,0.15), rgba(40,90,160,0.45)); transition: opacity 0.5s; }
#start:not(.on) { opacity: 0; }
#start:not(.on) button { pointer-events: none !important; }
#start .title { font-size: clamp(40px, 11vw, 96px); font-weight: 800; letter-spacing: 2px; white-space: nowrap; }
#start .title span { display: inline-block; color: #fff; -webkit-text-stroke: 3px rgba(0,0,0,0.25); text-shadow: 0 6px 0 rgba(0,0,0,0.25); animation: bob 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.08s); }
#start .title span:nth-child(5n+1) { color: #e3262a; }
#start .title span:nth-child(5n+2) { color: #ffd83b; }
#start .title span:nth-child(5n+3) { color: #1b7bd8; }
#start .title span:nth-child(5n+4) { color: #2eb84b; }
#start .title span:nth-child(5n+5) { color: #ff8a18; }
#start .play { background: #4cd964; border-color: #c9ffd3; animation: pulse 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-3deg); } }

/* ---------- builder ---------- */
#builder { position: absolute; inset: 0; display: none; }
#builder.open { display: block; }
#builder .b-types, #builder .b-work { display: none; position: absolute; inset: 0; }
#builder.types .b-types { display: grid; }
#builder.work .b-work { display: block; }
#builder img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.b-types { background: linear-gradient(#bfe3ff, #e8f6ff); grid-template-columns: repeat(3, 1fr); gap: 14px; padding: calc(70px + var(--safe-t)) calc(20px + var(--safe-r)) calc(16px + var(--safe-b)) calc(20px + var(--safe-l)); box-sizing: border-box; pointer-events: auto !important; }
.b-type { border: 5px solid #fff; border-radius: 26px; background: #ffffffb0; padding: 6px; box-shadow: 0 6px 0 rgba(0,0,0,.15); transition: transform .1s; min-height: 0; }
.b-type:active { transform: scale(0.94); }
.b-close { position: absolute; left: calc(var(--pad) + var(--safe-l)); top: calc(10px + var(--safe-t)); width: 52px; height: 52px; font-size: 24px; }

.b-back { position: absolute; left: calc(var(--pad) + var(--safe-l)); top: calc(10px + var(--safe-t)); width: 56px; height: 56px; font-size: 26px; }
.b-dice { position: absolute; right: calc(var(--pad) + var(--safe-r)); top: calc(10px + var(--safe-t)); width: 56px; height: 56px; font-size: 28px; background: #fff3c4; }
.b-sections { position: absolute; left: calc(var(--pad) + var(--safe-l)); top: calc(76px + var(--safe-t)); bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.b-sec { width: 58px; height: 58px; border-radius: 16px; border: 4px solid #fff; background: #ffffffc8; padding: 2px; box-shadow: 0 4px 0 rgba(0,0,0,.15); flex: 0 0 auto; }
.b-sec.on { border-color: #ffd83b; background: #fff8d8; transform: scale(1.08); }
.b-variants { position: absolute; left: 50%; translate: -50% 0; bottom: calc(10px + var(--safe-b)); display: flex; gap: 10px; }
.b-var { width: 76px; height: 76px; border-radius: 20px; border: 4px solid #fff; background: #ffffffc8; padding: 3px; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.b-var.on { border-color: #ffd83b; background: #fff8d8; transform: translateY(-6px); }
.b-colors { position: absolute; right: calc(var(--pad) + var(--safe-r)); top: calc(76px + var(--safe-t)); display: grid; grid-template-columns: repeat(2, 36px); gap: 7px; }
.b-col { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.2); padding: 0; }
.b-col.on { transform: scale(1.25); border-color: #333; }
.b-build { position: absolute; right: calc(var(--pad) + 90px + var(--safe-r)); bottom: calc(10px + var(--safe-b)); width: 84px; height: 84px; font-size: 42px; background: #4cd964; border-color: #c9ffd3; animation: pulse 1.2s ease-in-out infinite; }

@media (orientation: portrait) {
  .b-types { grid-template-columns: repeat(2, 1fr); }
  .b-sections { flex-direction: row; left: calc(80px + var(--safe-l)); top: calc(10px + var(--safe-t)); bottom: auto; right: 80px; flex-wrap: wrap; }
  .b-variants { bottom: calc(120px + var(--safe-b)); flex-wrap: wrap; justify-content: center; width: 94vw; }
  .b-colors { top: auto; right: auto; left: 50%; translate: -50% 0; bottom: calc(14px + var(--safe-b)); grid-template-columns: repeat(7, 36px); }
  .b-build { right: calc(var(--pad) + var(--safe-r)); bottom: calc(210px + var(--safe-b)); }
  .b-dice { top: calc(10px + var(--safe-t)); }
}
@media (max-height: 380px) {
  .b-sec { width: 50px; height: 50px; }
  .b-var { width: 66px; height: 66px; }
}

/* soft dreamy haze over the world (same feel as the title screen, gentler) */
#haze { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255, 250, 240, 0.10) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(60, 110, 170, 0.22) 100%); mix-blend-mode: normal; transition: opacity 2s; }

/* sticker book */
#stickers { position: absolute; inset: 12px; background: #fffaf0f2; border-radius: 28px; border: 5px solid #fff; box-shadow: 0 8px 30px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; }
#stickers .sb-head { display: flex; align-items: center; gap: 16px; padding: 10px 14px; }
#stickers .sb-gold { font-size: 26px; }
#stickers .sb-body { pointer-events: auto; overflow-y: auto; padding: 0 14px 14px; touch-action: pan-y; }
#stickers .sb-title { font-size: 30px; margin: 8px 0 4px; }
#stickers .sb-grid { display: grid; grid-template-columns: repeat(auto-fill, 58px); gap: 8px; }
#stickers .sb-item { width: 58px; height: 58px; border-radius: 16px; border: 3px dashed #ccc; background: #eee; font-size: 30px; opacity: .5; }
#stickers .sb-item.found { border: 3px solid #ffd83b; background: #fff; opacity: 1; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.sticker-fly { position: absolute; left: 50%; top: 40%; font-size: 72px; pointer-events: none; animation: stickerFly 2.4s ease-in-out forwards; filter: drop-shadow(0 6px 6px rgba(0,0,0,.3)); }
@keyframes stickerFly { 0% { transform: translate(-50%, -50%) scale(0.2) rotate(-20deg); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.3) rotate(8deg); opacity: 1; } 55% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; } 100% { transform: translate(calc(50vw - 120px), -45vh) scale(0.3); opacity: 0; } }