html, body { height: 100%; margin: 0; overflow: hidden; }
body {
font-family: 'Patrick Hand', 'Comic Sans MS', cursive;
background-color: #fffbea;
background-image:
linear-gradient(90deg, transparent 58px, rgba(230,80,80,.35) 58px, rgba(230,80,80,.35) 60px, transparent 60px),
repeating-linear-gradient(0deg, transparent 0 31px, rgba(90,150,220,.25) 31px 32px);
}
.marker { font-family: 'Permanent Marker', 'Comic Sans MS', cursive; }
.doodle-btn { border: 2.5px solid #4e4868; box-shadow: 3px 3px 0 #4e4868; transition: transform .08s, box-shadow .08s; }
.doodle-btn:hover { transform: translate(-1px,-2px) rotate(-1deg); box-shadow: 4px 5px 0 #4e4868; }
.doodle-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #4e4868; }
.lvl.sel { background: #ffd23f; transform: rotate(-2deg) scale(1.06); }
@keyframes wob { 0%,100% { transform: rotate(-2deg) } 50% { transform: rotate(2deg) } }
.wob { animation: wob 2.4s ease-in-out infinite; }
canvas { touch-action: none; }
#mute, #music, #leave, #hint, #emoteBtn { bottom: max(.5rem, env(safe-area-inset-bottom)); min-width: 44px; min-height: 44px; }
#mute, #music, #emoteBtn { width: 44px; height: 44px; }
#mute { left: max(.5rem, env(safe-area-inset-left)); } #music { left: calc(max(.5rem, env(safe-area-inset-left)) + 52px); }
#hint, #emoteBtn { right: max(.5rem, env(safe-area-inset-right)); }
#leave { left: calc(max(.5rem, env(safe-area-inset-left)) + 104px) !important; height: 44px; }
#emotes { bottom: calc(max(.5rem, env(safe-area-inset-bottom)) + 52px) !important; }
.pick, .lvl, #start, #friendBtn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pick-row { position: relative; display: flex; gap: .65rem; overflow-x: auto; padding: .9rem .6rem .7rem; margin: .1rem 0 0; width: 100%; box-sizing: border-box; max-width: 100%; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #b9a8ff transparent;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }
.pick-row::-webkit-scrollbar { height: 6px; } .pick-row::-webkit-scrollbar-thumb { background: #b9a8ff; border-radius: 6px; }
.pick { flex: 0 0 auto; width: 98px; scroll-snap-align: center; border: 2.5px solid #4e4868; border-radius: 1rem; background: #fff; box-shadow: 3px 3px 0 #4e4868; padding: .3rem .25rem .35rem; cursor: pointer; color: #2a2438; font-size: 15px; line-height: 1.05; transition: transform .12s, box-shadow .12s, background .15s; }
.pick:hover { transform: translate(-1px,-3px) rotate(-1.5deg); box-shadow: 4px 6px 0 #4e4868; }
.pick:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #4e4868; }
.pick.sel { background: #ffd23f; animation: pickPop .5s cubic-bezier(.3,1.6,.5,1) both, wob 2.6s ease-in-out .5s infinite; }
.pick .art { position: relative; height: 70px; display: flex; justify-content: center; align-items: flex-end; margin-bottom: .2rem; }
.pick .art img { height: 68px; width: auto; transform-origin: 50% 100%; }
.pick .art img:first-child { margin-right: -16px; animation: bobA 1.7s ease-in-out infinite; }
.pick .art img:last-child { animation: bobB 1.7s ease-in-out .45s infinite; }
.pick:hover .art img { animation-duration: .55s; }
.pick .emo { font-size: 30px; animation: bobA 1.7s ease-in-out infinite; display: inline-block; }
.pick .emo + .emo { animation-delay: .45s; }
.pick .bthumb { position: relative; width: 74px; height: 74px; margin: 0 auto .25rem; border: 2px solid #4e4868; border-radius: .6rem; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #eee; }
.pick .bthumb img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pick .bthumb::after { content: ''; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.7), transparent); animation: shine 3s ease-in-out infinite; }
.pick .bthumb i { position: absolute; bottom: -18px; font-style: normal; font-size: 17px; animation: floatUp 3.2s ease-in infinite; opacity: 0; }
.pick .bthumb i:nth-of-type(1) { left: 8%; } .pick .bthumb i:nth-of-type(2) { left: 44%; animation-delay: 1.1s; } .pick .bthumb i:nth-of-type(3) { left: 76%; animation-delay: 2.1s; }
.pick.sel .bthumb::after { animation-duration: 1.6s; }
@keyframes bobA { 0%,100% { transform: translateY(0) rotate(-3deg) scale(1,1) } 50% { transform: translateY(-7px) rotate(3deg) scale(.97,1.04) } }
@keyframes bobB { 0%,100% { transform: translateY(-5px) rotate(3deg) scale(.97,1.04) } 50% { transform: translateY(0) rotate(-3deg) scale(1.03,.96) } }
@keyframes shine { 0%, 55% { left: -60% } 100% { left: 130% } }
@keyframes floatUp { 0% { transform: translateY(0) scale(.6); opacity: 0 } 15% { opacity: .95 } 100% { transform: translateY(-86px) scale(1.1) rotate(14deg); opacity: 0 } }
@keyframes pickPop { 0% { transform: scale(.8) rotate(4deg) } 100% { transform: rotate(-2deg) scale(1.06) } }
.swap { animation: swapIn .45s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes swapIn { 0% { transform: scale(.6) rotate(-6deg); opacity: 0 } 100% { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .pick *, .pick, .swap { animation: none !important; } }
@media (max-height: 720px) { #menu h1 { font-size: 2.6rem; } #menu .mt-8 { margin-top: 1rem; } #menu .mt-6 { margin-top: .6rem; } .pick .art { height: 56px; } .pick .art img { height: 54px; } .pick .bthumb { width: 60px; height: 60px; } .pick { width: 86px; } }
#menu { background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0) 35%, rgba(42,36,56,.28) 100%); }
#menu .panel { background: rgba(255,253,243,.9); border: 2.5px solid #4e4868; border-radius: 1.6rem; box-shadow: 4px 5px 0 #4e4868; padding: .7rem .5rem .8rem; backdrop-filter: blur(3px); }
#menu .pill { display: inline-block; background: rgba(255,253,243,.92); border: 2.5px solid #4e4868; border-radius: 999px; padding: .15rem 1.1rem; box-shadow: 3px 3px 0 #4e4868; }
#menu .title-sticker { text-shadow: 3px 3px 0 #fff, -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 0 6px 0 rgba(78,72,104,.35); }
#menu .step { font-size: 1.45rem; color: #2a2438; } #menu .step b { display: inline-block; width: 1.9rem; height: 1.9rem; line-height: 1.9rem; border-radius: 50%; background: #ffd23f; border: 2px solid #4e4868; font-size: 1.1rem; margin-right: .4rem; }
.play-btn { animation: playPulse 1.6s ease-in-out infinite; } @keyframes playPulse { 0%,100% { transform: scale(1) rotate(-1deg) } 50% { transform: scale(1.06) rotate(1deg) } }
#parade { position: fixed; left: 0; right: 0; bottom: 0; height: 130px; pointer-events: none; z-index: 1; overflow: hidden; }
#parade .walker { position: absolute; bottom: 4px; left: 0; will-change: transform; animation: walkX var(--dur) linear var(--delay) infinite; }
#parade .walker img { height: var(--h); width: auto; display: block; transform-origin: 50% 100%; animation: hopW .55s ease-in-out infinite; filter: drop-shadow(0 4px 0 rgba(78,72,104,.35)); }
@keyframes walkX { from { transform: translateX(-160px) } to { transform: translateX(calc(100vw + 160px)) } }
@keyframes hopW { 0%,100% { transform: translateY(0) rotate(-4deg) scale(1.03,.96) } 50% { transform: translateY(-16px) rotate(4deg) scale(.97,1.05) } }
.pick-row { gap: .8rem; } .pick { width: 118px; } .pick .art { height: 88px; } .pick .art img { height: 86px; } .pick .bthumb { width: 92px; height: 92px; } .pick .emo { font-size: 38px; }
@media (prefers-reduced-motion: reduce) { #parade, .play-btn { animation: none !important; } #parade .walker, #parade .walker img { animation: none !important; } }
@media (max-height: 720px) { .pick { width: 96px; } .pick .art { height: 66px; } .pick .art img { height: 64px; } .pick .bthumb { width: 70px; height: 70px; } #parade { height: 90px; } #parade .walker { --h: 58px !important; } }
#wzDots i { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2.5px solid #4e4868; transition: transform .2s, background .2s; } #wzDots i.on { background: #ffd23f; transform: scale(1.35); }
#menu .wz { animation: swapIn .4s cubic-bezier(.3,1.6,.5,1) both; } #menu.inwiz #title { font-size: 2.4rem; } #menu.inwiz #title br { display: none; }
#menu.inwiz #vsLine { font-size: 1.2rem; margin-top: .4rem; }