html, body { height: 100%; margin: 0; overflow: hidden; }
body {
font-family: var(--ui); font-weight: 600;
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);
}
:root { --ui: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.marker { font-family: 'Permanent Marker', 'Comic Sans MS', cursive; }
input.marker, #frShowCode { font-family: var(--ui); font-weight: 800; }
.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 2.6s ease-in-out infinite; } @keyframes playPulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.035) } } .play-btn:active { animation: none; transform: scale(.96); }
.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; } }
#menu:not(.inwiz) #vsLine { display: none; }
.duel { display: flex; align-items: flex-end; justify-content: center; gap: .6rem; margin-top: 1rem; min-height: 104px; }
.duel img { height: 100px; width: auto; filter: drop-shadow(0 4px 0 rgba(78,72,104,.35)); transform-origin: 50% 100%; animation: duelA 2.4s ease-in-out 1.1s infinite; }
.duel img:last-child { transform: scaleX(-1); animation-name: duelB; animation-delay: 1.9s; }
.duel b { font-size: 2rem; color: #b07cff; text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff; padding-bottom: .8rem; }
@keyframes duelA { 0%,60%,100% { transform: none } 72% { transform: translateY(-9px) rotate(-3deg) scale(.98,1.04) } 84% { transform: translateY(0) scale(1.03,.97) } }
@keyframes duelB { 0%,60%,100% { transform: scaleX(-1) } 72% { transform: scaleX(-1) translateY(-9px) rotate(-3deg) scale(.98,1.04) } 84% { transform: scaleX(-1) translateY(0) scale(1.03,.97) } }
@keyframes rise { 0% { transform: translateY(18px) scale(.94); opacity: 0 } 100% { transform: none; opacity: 1 } }
@keyframes drop { 0% { transform: translateY(-26px); opacity: 0 } 100% { transform: none; opacity: 1 } }
#menu:not(.inwiz) #title { animation: drop .5s cubic-bezier(.3,1.4,.5,1) both; }
#menu:not(.inwiz) .duel img { transition: none; }
#menu .wz[data-step="0"] { animation: none; }
#menu .wz[data-step="0"] .duel { animation: rise .45s cubic-bezier(.3,1.5,.5,1) .25s both; }
#menu .wz[data-step="0"] .playrow { animation: rise .45s cubic-bezier(.3,1.5,.5,1) .5s both; }
#menu .wz[data-step="0"] .subrow { animation: rise .4s ease-out .75s both; }
#menu #legal { animation: rise .4s ease-out 1s both; }
.duel.roll img { animation: popA .4s cubic-bezier(.3,1.6,.5,1) both; } .duel.roll img:last-child { animation-name: popB; }
@keyframes popA { 0% { transform: scale(.6) rotate(-6deg); opacity: 0 } 100% { transform: none; opacity: 1 } }
@keyframes popB { 0% { transform: scaleX(-1) scale(.6) rotate(6deg); opacity: 0 } 100% { transform: scaleX(-1); opacity: 1 } }
.playrow { display: flex; align-items: stretch; justify-content: center; gap: .6rem; margin-top: 1rem; }
#quick { display: flex; flex-direction: column; align-items: center; padding: .7rem 3rem; line-height: 1.05; min-width: min(78vw, 22rem); }
#quick .pl { font-size: 3rem; } #quick small { font-family: var(--ui); font-weight: 700; font-size: 1.05rem; opacity: .7; }
#shuffle { width: 3.6rem; font-size: 1.8rem; }
.subrow { display: flex; gap: .7rem; justify-content: center; margin-top: 1.3rem; flex-wrap: wrap; }
.subrow button { font-size: 1.35rem; padding: .55rem 1.1rem; box-shadow: 2px 3px 0 #4e4868; }
@media (prefers-reduced-motion: reduce) { .duel img, .duel.roll img, #menu #title, #menu .wz[data-step="0"] > *, #menu #legal { animation: none !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; }
body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
.doodle-btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
#gear { display: none; } #tray { display: contents; }
@media (max-width: 640px) {
#gear { display: flex; position: absolute; top: max(.5rem, env(safe-area-inset-top)); left: max(.5rem, env(safe-area-inset-left)); width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; }
body.setopen #gear { background: #ffd23f; }
#tray { display: none; position: absolute; z-index: 40; top: calc(max(.5rem, env(safe-area-inset-top)) + 54px); left: max(.5rem, env(safe-area-inset-left)); flex-direction: column; gap: .35rem; padding: .5rem; background: #fffdf3; border: 2.5px solid #4e4868; border-radius: 1.2rem; box-shadow: 4px 5px 0 #4e4868; animation: swapIn .25s cubic-bezier(.3,1.6,.5,1) both; transform-origin: 0 0; }
body.setopen #tray { display: flex; }
#tray > button { position: static !important; display: flex !important; align-items: center; justify-content: flex-start; gap: .65rem; width: 100% !important; min-width: 11rem; height: 48px !important; padding: 0 .9rem; box-shadow: none; border-width: 2px; font-size: 1.35rem; }
#tray > button::after { content: attr(data-l); font-family: var(--ui); font-weight: 700; font-size: 1.2rem; color: #2a2438; }
#track { top: calc(max(.5rem, env(safe-area-inset-top)) + 58px); bottom: auto !important; left: .6rem; transform: none; font-size: 1rem; max-width: calc(100vw - 80px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255,253,243,.92); border: 2px solid #4e4868; border-radius: 999px; padding: .1rem .8rem; }
#leave { left: max(.5rem, env(safe-area-inset-left)) !important; }
#hint, #leave, #emoteBtn { min-height: 48px; }
#menu { background: rgba(255,251,234,.5); }
.parade, #parade, #menu .wz[data-step="0"] > .pill:not(#howto), #menu.inwiz #vsLine { display: none; }
#menu > div:not(#parade) { padding-top: max(1.2rem, env(safe-area-inset-top)); padding-bottom: 2rem; }
#menu.inwiz > div:not(#parade) { padding-bottom: 7.5rem; }
#menu #title { font-size: 3.1rem; } #menu.inwiz #title { font-size: 2.1rem; }
#menu #vsLine { font-size: 1.05rem; max-width: 100%; margin-top: .7rem; padding: .1rem .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#howto { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 .4rem !important; margin-top: .8rem; font-size: 1.1rem; line-height: 1.25; }
#menu { background: rgba(255,251,234,.82); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.duel { margin-top: 1.4rem; } .duel img { height: 92px; }
#quick { flex: 1; min-width: 0; padding: .8rem .5rem; } #quick .pl { font-size: 2.6rem; }
.subrow { margin-top: 1.1rem; gap: .6rem; } .subrow button { flex: 1; white-space: nowrap; font-size: 1.2rem; padding: .7rem .4rem; min-height: 48px; }
#menu #legal { background: none; border: 0; box-shadow: none; font-size: .72rem; opacity: .6; margin-top: 1.4rem; padding: 0; }
#wzNav { position: fixed; left: 0; right: 0; bottom: 0; margin: 0 !important; gap: .6rem; padding: 1.4rem max(.9rem, env(safe-area-inset-right)) calc(.8rem + env(safe-area-inset-bottom)) max(.9rem, env(safe-area-inset-left)); background: linear-gradient(rgba(255,251,234,0), rgba(255,251,234,.96) 38%); z-index: 3; }
#wzNav.hidden { display: none; }
#wzBack, #wzNext, #start { min-height: 54px; white-space: nowrap; font-size: 1.45rem; padding: .5rem 1rem; }
#wzNext, #start { flex: 1; } #start { font-size: 1.9rem; }
#wzDots { display: none; }
#menu .step { font-size: 1.3rem; }
#name { width: 100%; font-size: 1.6rem; }
.lvl { padding: .4rem .8rem; font-size: 1.25rem; min-height: 46px; }
#menu .wz[data-step="3"] .mt-3.text-xl { font-size: 1.05rem; margin-top: .6rem; }
#menu .wz[data-step="3"] .flex-wrap { gap: .5rem; }
#menu .wz[data-step="3"] .panel { padding-left: .8rem; padding-right: .8rem; }
}
@keyframes meIn { 0% { transform: scale(.82) translateY(30px); opacity: 0 } 60% { transform: scale(1.03) translateY(-4px); opacity: 1 } 100% { transform: none } }
@keyframes meRise { 0% { transform: translateY(22px) scale(.96); opacity: 0 } 100% { transform: none; opacity: 1 } }
@keyframes meBadge { 0% { transform: scale(0) rotate(-20deg) } 70% { transform: scale(1.18) rotate(6deg) } 100% { transform: scale(1) rotate(0) } }
@keyframes meHop { 0%,100% { transform: translateY(0) } 40% { transform: translateY(-9px) rotate(-5deg) } 70% { transform: translateY(0) rotate(4deg) } }
@keyframes meWave { 0%,100% { transform: rotate(-8deg) translateY(0) } 50% { transform: rotate(8deg) translateY(-8px) } }
@keyframes meFly { 0% { transform: translate(0,0) scale(.4) rotate(0); opacity: 0 } 15% { opacity: 1 } 100% { transform: translate(var(--dx),-70vh) scale(1.2) rotate(var(--rt)); opacity: 0 } }
#me:not(.hidden) > div { animation: meIn .5s cubic-bezier(.2,.9,.3,1.2) both; }
#meBody > .me-r { animation: meRise .45s cubic-bezier(.2,.9,.3,1.1) both; }
.me-badge { animation: meBadge .5s cubic-bezier(.2,.9,.3,1.3) both; }
.me-hop { animation: meHop 1.8s ease-in-out infinite; }
.me-wave { display: inline-block; animation: meWave 1.6s ease-in-out infinite; }
.me-confetti { position: fixed; bottom: 12vh; z-index: 60; pointer-events: none; font-size: 28px; animation: meFly 1.6s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { #me > div, #meBody > .me-r, .me-badge, .me-hop, .me-wave, .me-confetti { animation: none !important; } }
#menu.inwiz #vsLine { display: none !important; }