.unicorn-control { position: relative; display: flex; gap: 2rem; align-items: center; justify-content: space-between; padding: 2rem; margin-top: 3rem; border: 2px dashed var(--pink); background: #fc76b809; }
.unicorn-control .eyebrow { color: var(--pink); margin-bottom: 1rem; line-height: 1.5; }
.unicorn-control p { font-size: 1rem; line-height: 1.6; }
.unicorn-key-hint { display: block; margin-top: .6rem; font-size: .875rem; color: var(--purple); }
.unicorn-buttons { display: grid; gap: .85rem; justify-items: start; }
.unicorn-buttons .button { font-size: .875rem; }
#unicorn-wander { padding: .5rem 0; border: 0; border-bottom: 1px solid #76766c; background: transparent; color: var(--paper); font-size: .875rem; font-weight: 700; min-height: 44px; }
#unicorn-score { color: var(--pink); font-size: .75rem; font-weight: 800; letter-spacing: .05em; }
.unicorn-layer { position: fixed; inset: 0; z-index: 85; pointer-events: none; overflow: hidden; }
.unicorn-layer[hidden] { display: none; }
.unicorn-runner { position: absolute; left: 0; bottom: 90px; width: clamp(170px, 18vw, 245px); aspect-ratio: 1; will-change: transform; }
.unicorn-catch { display: block; width: 100%; height: 100%; position: relative; border: 0; padding: 0; background: transparent; color: var(--ink); pointer-events: auto; cursor: crosshair; animation: unicorn-bounce .58s ease-in-out infinite; }
.unicorn-catch:focus-visible { outline: 3px dashed var(--pink); outline-offset: 0; }
.unicorn-sprite { display: block; width: 100%; height: 100%; background-image: url('assets/unicorn-gallop.e4201f2cd4a0.webp'); background-size: 200% 200%; background-repeat: no-repeat; transform: scaleX(var(--unicorn-facing, 1)); animation: unicorn-gallop .64s steps(1, end) infinite; }
.unicorn-bubble { position: absolute; top: 0; left: 0; max-width: 100%; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: var(--paper); color: var(--ink); padding: .55rem .7rem; font: 800 .75rem/1.2 var(--body); transform: rotate(-5deg); z-index: 2; }
.unicorn-runner::after { content: '✳\FE0E   ✦  ✳\FE0E '; position: absolute; left: 15%; bottom: 9%; color: var(--pink); font-size: 2rem; letter-spacing: .6rem; pointer-events: none; }
.unicorn-layer.is-caught .unicorn-catch, .unicorn-layer.is-caught .unicorn-sprite, .unicorn-layer.is-still .unicorn-catch, .unicorn-layer.is-still .unicorn-sprite, .unicorn-catch:focus-visible .unicorn-sprite { animation-play-state: paused; }
.unicorn-layer.is-caught .unicorn-bubble { background: var(--lime); }
body.unicorn-party .ticker { background: var(--pink); }
body.unicorn-party .unicorn-control { border-style: solid; box-shadow: 8px 8px 0 var(--purple); }
body.unicorn-party .logo span { color: var(--pink); }
@keyframes unicorn-bounce { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes unicorn-gallop {
  0%,100% { background-position: 0 0; clip-path: var(--unicorn-frame-0); }
  25% { background-position: 100% 0; clip-path: var(--unicorn-frame-1); }
  50% { background-position: 0 100%; clip-path: var(--unicorn-frame-2); }
  75% { background-position: 100% 100%; clip-path: var(--unicorn-frame-3); }
}
@media(max-width:760px) {
  .unicorn-control { padding: 1.5rem; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .unicorn-buttons .button { font-size: .875rem; padding: .85rem; min-height: 50px; }
  .unicorn-bubble { font-size: .75rem; }
}
@media(prefers-reduced-motion:reduce) { .unicorn-catch,.unicorn-sprite { animation:none; } .unicorn-sprite { background-position:0 0;clip-path:var(--unicorn-frame-0); } }