/*! (c) 2026 taproute.io. All rights reserved. Doodle Checkers is proprietary: no licence to copy, host, modify or reuse. https://doodlecheckers.com/terms.html */
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)) + 56px) !important; height: 44px; }
#emotes { bottom: calc(max(.5rem, env(safe-area-inset-bottom)) + 52px) !important; }
@media (max-width: 400px) { .subrow button { padding-inline: .25rem !important; } .subrow button [data-ic], .subrow button img.di { margin-right: .15em; } #menu #legal { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; } #menu #legal .lb { display: none; } }
.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; } }
#friend { background: radial-gradient(ellipse 54% 60% at 50% 46%, rgba(70,48,130,.34) 0%, rgba(58,40,110,.42) 60%, rgba(40,28,84,.60) 100%); backdrop-filter: blur(2.5px) saturate(1.05); -webkit-backdrop-filter: blur(2.5px) saturate(1.05); }
#friend > div:not(.parade) { background: rgba(255,253,243,.95); border: 2.5px solid #4e4868; border-radius: 1.6rem; box-shadow: 4px 5px 0 #4e4868; padding: 1.2rem 1.4rem 1rem; width: calc(100% - 1.4rem); max-width: 28rem; }
#menu::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 54% 60% at 50% 46%, rgba(70,48,130,.34) 0%, rgba(58,40,110,.42) 60%, rgba(40,28,84,.60) 100%); backdrop-filter: blur(2.5px) saturate(1.05); -webkit-backdrop-filter: blur(2.5px) saturate(1.05); }
#menu.gfull::before { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--gb) + 4px), transparent calc(100% - var(--gb) + 28px)); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--gb) + 4px), transparent calc(100% - var(--gb) + 28px)); }
#menu.gside::before { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--gb) - 150px), transparent calc(100% - var(--gb) + 30px)), linear-gradient(to right, transparent calc(var(--gl) - 40px), #000 var(--gl), #000 var(--gr), transparent calc(var(--gr) + 40px)); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--gb) - 150px), transparent calc(100% - var(--gb) + 30px)), linear-gradient(to right, transparent calc(var(--gl) - 40px), #000 var(--gl), #000 var(--gr), transparent calc(var(--gr) + 40px)); -webkit-mask-composite: source-over; mask-composite: add; }
#groundTap { position: fixed; left: 0; right: 0; bottom: 0; height: var(--gb, 0px); z-index: 1; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#menu.inwiz #groundTap { display: none; }
#menu > .relative { pointer-events: none; } #menu > .relative > * { pointer-events: auto; }
#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) } }
.parade .walker.back { animation-direction: reverse; } .parade .walker.back img { scale: -1 1; }
.parade .walker.flip img { animation: hopW .55s ease-in-out infinite, flipW 5.2s ease-in-out infinite; }
.parade .walker.trip img { animation: tripW 6.4s ease-in-out infinite; }
.parade .walker.dance img { animation: danceW 4.6s ease-in-out infinite; }
.parade .walker.leap img { animation: leapW 3.8s cubic-bezier(.3,.6,.4,1) infinite; }
.parade .walker.dizzy img { animation: hopW .55s ease-in-out infinite, dizzyW 7s linear infinite; }
@keyframes flipW { 0%,78% { rotate: 0deg } 90% { rotate: -360deg; translate: 0 -38px } 100% { rotate: -360deg; translate: 0 0 } }
@keyframes tripW { 0%,8%,16%,24%,32%,40% { transform: translateY(0) rotate(-3deg) } 4%,12%,20%,28%,36% { transform: translateY(-12px) rotate(3deg) } 46% { transform: translateY(0) rotate(78deg) scale(1.05,.92) } 58% { transform: translateY(0) rotate(84deg) } 64% { transform: translateY(-6px) rotate(20deg) } 70%,100% { transform: translateY(0) rotate(-3deg) } }
@keyframes danceW { 0%,50%,100% { transform: translateY(0) rotate(0) } 56% { transform: translateY(-8px) rotate(-14deg) scale(1.06,.94) } 62% { transform: translateY(0) rotate(14deg) } 68% { transform: translateY(-8px) rotate(-14deg) } 74% { transform: translateY(0) rotate(14deg) scale(.94,1.06) } 80% { transform: translateY(-10px) rotate(0) } 5%,15%,25%,35%,45% { transform: translateY(-10px) } 10%,20%,30%,40% { transform: translateY(0) } }
@keyframes leapW { 0%,60%,100% { transform: translateY(0) scale(1,1) } 64% { transform: translateY(0) scale(1.15,.8) } 76% { transform: translateY(-58px) scale(.92,1.1) rotate(-8deg) } 88% { transform: translateY(0) scale(1.18,.78) } 94% { transform: translateY(0) scale(.96,1.04) } 10%,30%,50% { transform: translateY(-12px) } 20%,40% { transform: translateY(0) } }
@keyframes dizzyW { 0%,70% { rotate: 0deg } 85% { rotate: 720deg } 100% { rotate: 720deg } }
html.calm .parade .walker { animation: walkX calc(var(--dur) * 1.5) linear var(--delay) infinite !important; }
html.calm .parade .walker.back { animation-direction: reverse !important; }
html.calm .parade .walker img { animation: hopSoft .7s ease-in-out infinite !important; rotate: none; translate: none; }
@keyframes hopSoft { 0%,100% { transform: translateY(0) rotate(-2deg) } 50% { transform: translateY(-9px) rotate(2deg) } }
.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) { .play-btn { 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; } }
.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; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .3rem 0; }
#shuffle img.di { margin: 0 !important; } #shuffle small { font-family: var(--ui); font-weight: 800; font-size: .78rem; line-height: 1; color: #2a2438; }
.subrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; max-width: 30rem; margin: 1.3rem auto 0; }
.subrow .wide { grid-column: 1 / -1; }
.subrow button { display: flex; align-items: center; justify-content: center; white-space: nowrap; min-height: 3.3rem; font-size: 1.35rem; padding: .55rem .8rem; 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); }
#wzNav:has(#start:not(.hidden)) #wzNext { background: #fff !important; }
#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; }
.dd-sum { list-style: none; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dd-sum.l { justify-content: flex-start; } .dd-sum::-webkit-details-marker { display: none; }
.dd-sum::after { content: ''; flex: none; width: .5em; height: .5em; border-right: 3px solid #4e4868; border-bottom: 3px solid #4e4868; border-radius: 1px; transform: translateY(-.15em) rotate(45deg); transition: transform .2s; }
details[open] > .dd-sum::after { transform: translateY(.12em) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .dd-sum::after { transition: none; } }
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: 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; }
@media (min-width: 641px) { #gear { top: auto; bottom: max(.5rem, env(safe-area-inset-bottom)); } #tray { top: auto; bottom: calc(max(.5rem, env(safe-area-inset-bottom)) + 54px); transform-origin: 0 100%; } }
body:has(#friend:not(.hidden), #me:not(.hidden), #over:not(.hidden), #dvRoom:not([hidden]), #menu.inwiz) :is(#gear, #tray) { display: none !important; }
@media (max-width: 640px) {
#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; }
#frParade, #menu .wz[data-step="0"] > .pill { display: none; }
#menu > div:not(#groundTap) { padding-top: max(1.2rem, env(safe-area-inset-top)); padding-bottom: calc(3.4rem + env(safe-area-inset-bottom)); }
#menu.inwiz > div:not(#groundTap) { padding-bottom: 8.5rem; }
#menu #title { font-size: 3.1rem; } #menu.inwiz #title { font-size: 2.1rem; }
.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 { font-size: clamp(1rem, 4.4vw, 1.2rem); padding: .7rem .4rem; min-height: 62px; }
#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 { position: absolute; top: .5rem; left: 50%; transform: translateX(-50%); gap: .55rem; } #wzDots i { width: 11px; height: 11px; border-width: 2px; }
#wzBack { padding-inline: .8rem; }
#wzNav:has(#wzNext:not(.hidden)):has(#start:not(.hidden)) :is(#wzBack, #wzNext) { font-size: 1.25rem; padding-inline: .6rem; } #wzNav:has(#wzNext:not(.hidden)):has(#start:not(.hidden)) #start { font-size: 1.6rem; padding-inline: .5rem; }
#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"] :is(.mt-3.text-xl, #brave > summary) { 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; } }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3.5px solid #2a2438; outline-offset: 3px; }
html.calm *, html.calm *::before, html.calm *::after { animation: none !important; }
input::placeholder, ::placeholder { color: #6b6580; opacity: 1; }
#lvlDesc { min-height: 1.75rem; line-height: 1.25; } #wxNote { min-height: 1.5rem; line-height: 1.25; } #wxRow { min-height: 44px; margin-top: .3rem; }
#menu #legal { position: fixed; left: 0; right: 0; bottom: max(.35rem, env(safe-area-inset-bottom)); z-index: 4; width: max-content; max-width: calc(100% - 1rem); margin: 0 auto; padding: .1rem .8rem; font-size: 12px; line-height: 1.3; color: #f1ecdc; opacity: .85; background: rgba(42,36,56,.55); border: 0; border-radius: 999px; box-shadow: none; }
#menu.inwiz #legal { display: none; }
@media (max-height: 760px) { #menu #legal { position: static; margin-top: 1rem; } }
#legal a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 .55rem; margin: 0 -.2rem; }
@media (max-width: 640px) { #menu #legal { white-space: nowrap; padding-top: 0; padding-bottom: 0; } #menu #legal .lb, #menu #legal .arr { display: none; } }
@media (min-width: 641px) and (max-width: 1100px) { #menu #legal .lb, #menu #legal .arr { display: none; } #menu #legal { left: 3.6rem; right: 3.6rem; } }
#frShowCode { max-width: 100%; }
#wPanel { color: #2a2438; text-align: left; }
#wPanel.wpop { position: absolute; right: 8px; bottom: 56px; z-index: 35; width: min(330px, calc(100vw - 16px)); padding: .7rem .8rem; }
#friend:has(#frHome.hidden) #frNameBox, #friend.fromLink #frCreate, #friend.fromLink #frOr, #friend.fromLink #frCode { display: none; }
#friend.fromLink #frJoin { margin-top: .75rem; padding: .75rem 3rem; font-size: 2.25rem; background: #8be28b; }
#wSet .dcw-sws { justify-content: flex-start; }
#wBadge { position: absolute; top: max(.25rem, env(safe-area-inset-top)); left: 6px; z-index: 31; white-space: nowrap; pointer-events: none; }
#wMsg .wcard { max-width: 30rem; }
@media (max-width: 640px) { #wBadge { top: auto; bottom: max(.5rem, env(safe-area-inset-bottom)); left: auto; right: 8px; height: 40px; } }
#menu, #friend { overflow-x: hidden; }
@media (max-width: 640px) {
body:has(#friend:not(.hidden), #me:not(.hidden), #over:not(.hidden), #dvRoom:not([hidden]), #menu.inwiz) :is(#acct, #gems) { display: none !important; }
#menu > div:not(#groundTap) { padding-top: max(3.4rem, calc(env(safe-area-inset-top) + 2.4rem)); padding-bottom: 3.4rem; }
#menu.inwiz > div:not(#groundTap) { padding-top: max(1.2rem, env(safe-area-inset-top)); }
#lvlDesc { min-height: 3rem; }
#menu.inwiz #title { font-size: min(2.1rem, 8.2vw); }
}