:root{--font-latin:"Fredoka Variable", system-ui, sans-serif;--font-ku:"Vazirmatn Variable", "Fredoka Variable", sans-serif}*{box-sizing:border-box}html,body,#root{overscroll-behavior:none;touch-action:none;width:100%;height:100%;margin:0;overflow:hidden}canvas{cursor:grab}canvas.looking{cursor:grabbing}body{font-family:var(--font-latin);color:var(--shadow);background:linear-gradient(to bottom, var(--sky) 0%, var(--peach) 78%, var(--warmWhite) 100%);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}.badge-row{top:max(16px, env(safe-area-inset-top));left:max(16px, env(safe-area-inset-left));pointer-events:none;align-items:center;gap:8px;display:flex;position:fixed}.badge{background:color-mix(in srgb, var(--warmWhite) 88%, transparent);box-shadow:0 2px 0 color-mix(in srgb, var(--sandstone) 70%, transparent), 0 8px 22px color-mix(in srgb, var(--shadow) 22%, transparent);pointer-events:none;border-radius:999px;align-items:center;gap:10px;padding:8px 16px 8px 14px;display:flex}.badge-title{letter-spacing:.01em;color:var(--terracotta);font-size:18px;font-weight:600}.badge-sep{background:var(--yellow);border-radius:50%;width:6px;height:6px}.badge-ku{font-family:var(--font-ku);color:var(--olive);font-size:16px;font-weight:600}@media (width<=520px){.badge{gap:8px;padding:6px 12px 6px 11px}.badge-title{font-size:16px}.badge-ku{font-size:14px}}.touch-zone{touch-action:none;width:55%;position:fixed;top:0;bottom:0;left:0}.joy-base{left:max(28px, env(safe-area-inset-left));top:calc(100% - 190px - env(safe-area-inset-bottom));background:color-mix(in srgb, var(--warmWhite) 30%, transparent);width:140px;height:140px;box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--warmWhite) 70%, transparent);opacity:.55;pointer-events:none;border-radius:50%;transition:opacity .2s ease-out;position:fixed}.joy-base.active{opacity:1;transition:none}.joy-knob{background:var(--warmWhite);width:64px;height:64px;box-shadow:0 3px 0 var(--sandstone), 0 8px 18px color-mix(in srgb, var(--shadow) 30%, transparent);border-radius:50%;position:absolute;top:38px;left:38px}.hop-button{right:max(28px, env(safe-area-inset-right));bottom:calc(56px + env(safe-area-inset-bottom));width:92px;height:92px;font-family:var(--font-latin);color:var(--shadow);background:var(--yellow);box-shadow:0 4px 0 color-mix(in srgb, var(--terracotta) 80%, var(--yellow)), 0 10px 22px color-mix(in srgb, var(--shadow) 28%, transparent);touch-action:none;-webkit-tap-highlight-color:transparent;border:0;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:0;font-size:15px;font-weight:600;display:flex;position:fixed}.hop-button:active{box-shadow:0 1px 0 color-mix(in srgb, var(--terracotta) 80%, var(--yellow)), 0 6px 14px color-mix(in srgb, var(--shadow) 28%, transparent);transform:translateY(3px)}.hints{color:var(--shadow);background:color-mix(in srgb, var(--warmWhite) 80%, transparent);box-shadow:0 6px 18px color-mix(in srgb, var(--shadow) 18%, transparent);pointer-events:none;border-radius:999px;align-items:center;gap:6px;padding:7px 14px;font-size:14px;font-weight:500;display:flex;position:fixed;bottom:22px;left:50%;transform:translate(-50%)}.hints kbd{min-width:24px;font-family:var(--font-latin);text-align:center;color:var(--shadow);background:var(--warmWhite);box-shadow:0 2px 0 var(--sandstone);border-radius:7px;padding:2px 6px;font-size:12px;font-weight:600}.hints-dot{background:var(--yellow);border-radius:50%;width:5px;height:5px;margin:0 4px}.veil{z-index:20;pointer-events:none;background:linear-gradient(to bottom, var(--sky) 0%, var(--peach) 78%, var(--warmWhite) 100%);transition:opacity 1.6s cubic-bezier(.45,0,.2,1) .1s;position:fixed;inset:0}.veil.lifted{opacity:0}