canvas { transition: filter .15s, transform .15s; }
canvas.step { animation: map-step .18s ease; }
canvas.bump { animation: map-bump .22s ease; }
canvas.collect { animation: crystal-flash .48s ease; }
canvas.hurt { animation: hurt-flash .36s ease; }
.quest b { transition: transform .2s, color .2s; }
.game { position: relative; overflow: hidden; }
.spark-fx { position: absolute; z-index: 4; left: var(--x); top: var(--y); color: #ffe47a; font-size: 25px; pointer-events: none; text-shadow: 0 0 12px #ffe47a; animation: spark-rise .7s ease-out forwards; }
.modal > div { animation: forest-result .42s cubic-bezier(.2,.9,.25,1.15); }
@keyframes map-step { 50% { transform: scale(.992); filter: brightness(1.08); } }
@keyframes map-bump { 35% { transform: translateX(-6px); } 70% { transform: translateX(5px); } }
@keyframes crystal-flash { 45% { filter: brightness(1.55) saturate(1.3); box-shadow: 0 0 40px rgba(255,228,122,.55); } }
@keyframes hurt-flash { 35% { filter: sepia(1) saturate(4) hue-rotate(300deg); transform: scale(.985); } }
@keyframes spark-rise { to { opacity: 0; transform: translateY(-65px) rotate(90deg) scale(1.5); } }
@keyframes forest-result { from { opacity: 0; transform: translateY(28px) scale(.8); } }
@media (prefers-reduced-motion: reduce) { canvas, .spark-fx, .modal > div { animation: none !important; } }
.controls { display: flex; justify-content: center; align-items: end; gap: 22px; }.actions { display: grid; gap: 7px; margin-bottom: 5px; }.actions button { min-width: 82px; padding: 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; color: #f4e9c6; background: rgba(255,255,255,.08); font-size: 18px; font-weight: 900; cursor: pointer; }.actions span { display: block; margin-top: 2px; font-size: 8px; font-weight: 700; }.actions button:active { transform: scale(.94); }
@media (max-width: 420px) { .controls { gap: 10px; }.actions button { min-width: 67px; } }
.dpad .arrow { display: block; width: 13px; height: 13px; margin: auto; border-top: 3px solid #193126; border-right: 3px solid #193126; }.arrow.up { transform: rotate(-45deg) translate(-2px,2px); }.arrow.right { transform: rotate(45deg) translate(-2px,2px); }.arrow.down { transform: rotate(135deg) translate(-2px,2px); }.arrow.left { transform: rotate(-135deg) translate(-2px,2px); }.actions svg { width: 21px; height: 21px; fill: none; stroke: #f4e9c6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.health-pips { display: flex !important; justify-content: center; gap: 4px; }.health-pips i { width: 13px; height: 11px; background: #f2d26f; clip-path: polygon(50% 100%,0 42%,0 15%,16% 0,38% 0,50% 15%,62% 0,84% 0,100% 15%,100% 42%); }.crystal-count { display: flex !important; justify-content: center; align-items: center; gap: 5px; }.crystal-count i,.crystal-key span { width: 13px; height: 17px; display: inline-block; background: #f2d26f; clip-path: polygon(50% 0,100% 35%,78% 100%,22% 100%,0 35%); }.hero-key span { position: relative; width: 16px; height: 18px; display: block; border-radius: 50% 50% 6px 6px; background: #fff; }.hero-key span::before { content: ""; position: absolute; width: 12px; height: 6px; left: 2px; top: -4px; border-radius: 8px 8px 2px 2px; background: #fff; }.forest-result-icon.win::before { content: ""; width: 25px; height: 32px; display: block; margin: 14px auto; background: #fff; clip-path: polygon(50% 0,100% 35%,78% 100%,22% 100%,0 35%); }.forest-result-icon.lose::before { content: ""; width: 27px; height: 27px; display: block; margin: 15px auto; border: 4px solid #fff; border-radius: 50%; }.forest-result-icon.lose::after { content: ""; position: absolute; width: 18px; height: 30px; left: 29px; top: 10px; border-radius: 50%; background: #9aa9a0; }
.spark-fx { width: 18px; height: 24px; background: #ffe47a; clip-path: polygon(50% 0,100% 35%,78% 100%,22% 100%,0 35%); }