:root { --ink: #3b2a1a; --orange: #ff8a3d; --gold: #ffc62e; --red: #ff4d4d; --blue: #4aa3ff; --font: var(--kp-font, 'KekeFont', system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif); --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: #f2e3c8; color: #fff; font-family: var(--font); font-synthesis: none; user-select: none; -webkit-user-select: none; touch-action: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; background: none; touch-action: none; }
[hidden] { display: none !important; }
i { display: inline-block; flex: none; font-style: normal; }
svg { display: block; width: 100%; height: 100%; }
.sdot { border-radius: 50%; vertical-align: middle; border: 2px solid rgba(60, 30, 10, .35); }
#vig { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0; background: radial-gradient(ellipse at 50% 46%, rgba(255, 0, 0, 0) 45%, rgba(220, 20, 20, .75) 100%); animation: vp 1s ease-in-out infinite alternate; }
@keyframes vp { from { filter: brightness(.7); } to { filter: brightness(1.15); } }
#flashR { position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: 0; }
#flashR.hit { background: radial-gradient(circle, rgba(255, 60, 60, .0), rgba(255, 30, 30, .6)); animation: fl .6s ease-out 1; }
#flashR.near { background: radial-gradient(circle, rgba(255, 255, 255, 0) 50%, rgba(255, 220, 90, .55)); animation: fl .5s ease-out 1; }
@keyframes fl { 0% { opacity: 1 } 100% { opacity: 0 } }
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#hud > * { position: absolute; }
.ic-btn { pointer-events: auto; width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: rgba(60, 35, 15, .55); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
#btnPause { left: 12px; top: calc(var(--safe-t) + 10px); }
.pill { display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px; background: rgba(60, 35, 15, .6); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); font-weight: 700; font-size: 20px; text-shadow: 0 2px 0 rgba(40, 20, 5, .5); min-height: 36px; }
.pill i { width: 24px; height: 24px; color: var(--gold); }
.stagechip { left: 64px; top: calc(var(--safe-t) + 10px); flex-direction: column; align-items: flex-start; gap: 0; padding: 3px 12px; line-height: 1.05; min-height: 44px; justify-content: center; }
.stagechip small { font-size: 12px; font-weight: 500; opacity: .85; }
.stagechip b { font-size: 16px; }
#chipGoal { right: 96px; top: calc(var(--safe-t) + 14px); }
#chipTime { right: 12px; top: calc(var(--safe-t) + 14px); }
#chipTime i { color: #ffe9a8; } #chipTime.low { background: rgba(190, 30, 30, .75); animation: vp .5s ease-in-out infinite alternate; }
#strikes { right: 14px; top: calc(var(--safe-t) + 58px); display: flex; gap: 5px; }
#strikes i { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: rgba(60, 35, 15, .5); color: rgba(255, 255, 255, .25); }
#strikes i.on { background: var(--red); color: #fff; box-shadow: 0 0 0 2px #fff; }
#gauges { left: 10px; top: calc(var(--safe-t) + 66px); display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 16px; background: rgba(60, 35, 15, .45); }
#gauges.glow { box-shadow: 0 0 0 3px var(--gold), 0 0 20px var(--gold); }
.g { display: flex; align-items: center; gap: 6px; width: 104px; }
.g i { width: 22px; height: 22px; color: var(--c); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
.g span { flex: 1; height: 12px; border-radius: 99px; background: rgba(0, 0, 0, .4); overflow: hidden; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
.g u { display: block; height: 100%; width: 0; background: var(--c); border-radius: 99px; text-decoration: none; }
.g.hot i { animation: hotp .55s ease-in-out infinite alternate; }
.g.hot span { box-shadow: inset 0 0 0 1.5px var(--red); }
@keyframes hotp { from { transform: scale(1); } to { transform: scale(1.25); } }
#snackRow { left: 12px; bottom: calc(var(--safe-b) + 20px); display: flex; gap: 8px; padding: 6px 10px; border-radius: 99px; background: rgba(60, 35, 15, .5); }
.sl { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; opacity: .5; }
.sl.cur { opacity: 1; background: rgba(255, 255, 255, .28); box-shadow: 0 0 0 2px #fff; }
.sl.gone { opacity: .15; filter: grayscale(1); }
.sl u { position: absolute; left: 4px; right: 4px; bottom: -3px; height: 4px; background: var(--gold); border-radius: 3px; transform-origin: left; text-decoration: none; }
.sl u { right: auto; }
.mainbtn { pointer-events: auto; right: 14px; bottom: calc(var(--safe-b) + 30px); width: 136px; height: 136px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb36b, #ff8a3d 60%, #e5601a); box-shadow: 0 8px 0 #a8420c, 0 12px 20px rgba(0, 0, 0, .35), inset 0 0 0 4px rgba(255, 255, 255, .35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; transition: transform .08s, filter .15s; }
.mainbtn .mi { width: 64px; height: 64px; filter: drop-shadow(0 3px 0 rgba(120, 40, 0, .5)); }
.mainbtn .ml { font-size: 20px; font-weight: 700; text-shadow: 0 2px 0 rgba(120, 40, 0, .5); }
.mainbtn.study { filter: saturate(.55) brightness(.92); background: radial-gradient(circle at 35% 30%, #8fc6ff, #4aa3ff 60%, #2b6fc8); box-shadow: 0 8px 0 #1c4f93, 0 12px 20px rgba(0, 0, 0, .35), inset 0 0 0 4px rgba(255, 255, 255, .35); filter: none; }
.mainbtn.down { transform: translateY(6px); box-shadow: 0 2px 0 #a8420c, 0 4px 12px rgba(0, 0, 0, .35), inset 0 0 0 4px rgba(255, 255, 255, .5); }
.mainbtn.tell { animation: tellp .45s ease-in-out infinite alternate; }
@keyframes tellp { from { box-shadow: 0 8px 0 #a8420c, 0 0 0 6px rgba(255, 60, 60, .0), inset 0 0 0 4px rgba(255, 255, 255, .35); } to { box-shadow: 0 8px 0 #a8420c, 0 0 0 14px rgba(255, 60, 60, .7), inset 0 0 0 4px rgba(255, 255, 255, .35); } }
.mainbtn.ans { background: radial-gradient(circle at 35% 30%, #9ae9a0, #3fc460 60%, #1e8f3e); box-shadow: 0 8px 0 #146a2c, 0 0 0 10px rgba(255, 255, 255, .5), inset 0 0 0 4px rgba(255, 255, 255, .35); animation: ansp .4s ease-in-out infinite alternate; }
@keyframes ansp { from { transform: scale(1); } to { transform: scale(1.07); } }
.mainbtn.pulse { animation: ansp .5s ease-in-out infinite alternate; }
.mainbtn.empty { filter: grayscale(1) brightness(.8); }
.side-btn { pointer-events: auto; width: 58px; height: 58px; padding: 14px; border-radius: 50%; background: rgba(60, 35, 15, .6); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3); bottom: calc(var(--safe-b) + 40px); right: 154px; width: 54px; height: 54px; padding: 12px; }
.side-btn.bribe { right: auto; left: 16px; background: conic-gradient(var(--gold) calc(var(--p, 1) * 360deg), rgba(60, 35, 15, .6) 0); padding: 0; display: grid; place-items: center; width: 64px; height: 64px; }
.side-btn.bribe svg { width: 34px; height: 34px; color: #fff; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
#tAlert, #kAlert { transform: translate(-50%, -100%); width: 46px; height: 46px; padding: 8px; border-radius: 50%; background: #fff; color: var(--red); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); display: none; z-index: 3; }
#tAlert.on, #kAlert:not([hidden]) { display: block; }
#tAlert.tell { background: var(--red); color: #fff; animation: ansp .3s ease-in-out infinite alternate; }
#tAlert.look { color: var(--red); } #tAlert.ask { background: var(--gold); color: #5a2a00; width: 52px; height: 52px; animation: ansp .4s ease-in-out infinite alternate; }
#tAlert.doze { color: #4a7bd0; } #tAlert.fake { color: #888; }
#kAlert { color: var(--red); }
#hand { right: 70px; bottom: calc(var(--safe-b) + 56px); width: 64px; height: 64px; color: #fff; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
#hand svg { stroke: #3b2a1a; stroke-width: 1.2; }
#hand.off { display: none; }
#hand.press { animation: hpress 1.6s ease-in-out infinite; }
#hand.lift { animation: hlift 1.4s ease-in-out infinite; }
#hand.tap { animation: htap 1s ease-in-out infinite; }
@keyframes hpress { 0%, 15% { transform: translateY(24px) scale(1); } 30%, 85% { transform: translateY(8px) scale(.9); } 100% { transform: translateY(24px) scale(1); } }
@keyframes hlift { 0%, 30% { transform: translateY(8px) scale(.9); } 55%, 100% { transform: translateY(34px) scale(1); } }
@keyframes htap { 0%, 100% { transform: translateY(22px); } 40% { transform: translateY(6px) scale(.9); } }
#onb { position: fixed; left: 12px; right: 12px; bottom: calc(var(--safe-b) + 186px); z-index: 20; padding: 12px 14px; border-radius: 20px; background: rgba(255, 250, 238, .96); color: var(--ink); box-shadow: 0 6px 0 rgba(120, 70, 20, .35), 0 12px 24px rgba(0, 0, 0, .25); pointer-events: auto; }
#onbDots { display: flex; gap: 6px; justify-content: center; margin-bottom: 6px; }
#onbDots u { width: 10px; height: 10px; border-radius: 50%; background: rgba(120, 70, 20, .25); text-decoration: none; }
#onbDots u.on { background: var(--orange); }
#onbText { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; text-align: center; word-break: keep-all; }
.onbrow { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.kbtn { padding: 8px 18px; border-radius: 99px; background: var(--orange); color: #fff; font-weight: 700; font-size: 16px; box-shadow: 0 3px 0 #a8420c; pointer-events: auto; }
.kbtn.ghost { background: rgba(60, 35, 15, .15); color: var(--ink); box-shadow: none; font-weight: 500; font-size: 14px; }
#pops { position: fixed; inset: 0; pointer-events: none; z-index: 11; overflow: hidden; }
.pop { position: absolute; transform: translate(-50%, -50%); font-weight: 700; font-size: 26px; white-space: nowrap; color: #fff; -webkit-text-stroke: 5px #3b2a1a; paint-order: stroke fill; animation: popup 1.05s ease-out forwards; }
.pop.gold { color: var(--gold); } .pop.red { color: #ff7a7a; } .pop.dim { font-size: 18px; color: #e8e0d0; }
.pop.growl::before { content: ''; display: block; width: 30px; height: 30px; border-radius: 50%; border: 4px solid #ff8aa0; }
@keyframes popup { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -10px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(1); } }
#banner { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 13; pointer-events: none; text-align: center; opacity: 0; width: 92vw; }
#banner.on { opacity: 1; animation: ban .3s ease-out; }
@keyframes ban { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
#banner b { display: block; font-size: 48px; font-weight: 700; color: #fff; -webkit-text-stroke: 8px #3b2a1a; paint-order: stroke fill; line-height: 1.1; }
#banner small { display: block; margin-top: 6px; font-size: 24px; font-weight: 700; -webkit-text-stroke: 5px #3b2a1a; paint-order: stroke fill; }
#banner.warn b { color: #ff6a6a; } #banner.near b, #banner.clear b { color: var(--gold); }
#card { position: fixed; inset: 0; z-index: 14; display: grid; place-items: center; background: rgba(60, 35, 15, .35); pointer-events: none; }
#card .cc { text-align: center; padding: 18px 30px; border-radius: 26px; background: rgba(255, 250, 238, .97); color: var(--ink); box-shadow: 0 8px 0 rgba(120, 70, 20, .4); animation: ban .35s ease-out; min-width: 230px; }
#card small { font-size: 16px; font-weight: 700; color: var(--orange); } #card h2 { margin: 2px 0; font-size: 34px; } #card em { font-style: normal; font-size: 20px; opacity: .7; }
#card .goal { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 6px; font-size: 32px; font-weight: 700; } #card .gi { width: 36px; height: 36px; color: var(--orange); }
#card .snacks { display: flex; gap: 6px; justify-content: center; }
#intro { position: fixed; inset: 0; z-index: 30; background: linear-gradient(180deg, rgba(40, 20, 5, .25), rgba(40, 20, 5, .7)); display: flex; align-items: flex-end; justify-content: center; }
#introTap { position: absolute; inset: 0; width: 100%; height: 100%; }
#introText { position: relative; z-index: 2; pointer-events: none; margin: 0 16px calc(var(--safe-b) + 60px); padding: 18px; border-radius: 22px; background: rgba(255, 250, 238, .97); color: var(--ink); text-align: center; font-size: 24px; line-height: 1.35; word-break: keep-all; box-shadow: 0 8px 0 rgba(120, 70, 20, .4); max-width: 420px; }
#introText.in { animation: ban .35s ease-out; }
#introText b { display: block; } .dots { display: flex; gap: 8px; justify-content: center; margin-top: 10px; } .dots u { width: 10px; height: 10px; border-radius: 50%; background: rgba(120, 70, 20, .25); text-decoration: none; } .dots u.on { background: var(--orange); }
#intro .skip { position: absolute; top: calc(var(--safe-t) + 12px); right: 12px; z-index: 3; }
.sheet-wrap { position: fixed; inset: 0; z-index: 40; background: rgba(40, 20, 5, .6); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: min(100%, 460px); max-height: 86vh; overflow: auto; background: #fff6e6; color: var(--ink); border-radius: 24px 24px 0 0; padding: 14px 14px calc(var(--safe-b) + 18px); touch-action: pan-y; }
.sheet-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .sheet-h b { font-size: 24px; flex: 1; }
.sheet-h .ic-btn { background: rgba(120, 70, 20, .2); color: var(--ink); box-shadow: none; }
.bank { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 20px; } .bank i { width: 24px; height: 24px; color: #b8772b; }
h3 { margin: 12px 0 6px; font-size: 18px; color: #b8772b; }
.row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; margin-bottom: 8px; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 rgba(120, 70, 20, .2); text-align: left; color: var(--ink); touch-action: pan-y; }
.row.lock { opacity: .5; }
.row .no { width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-size: 18px; }
.row .mid { flex: 1; display: flex; flex-direction: column; } .row strong { font-size: 18px; } .row em { font-style: normal; font-size: 14px; opacity: .7; } .row .sn { display: flex; gap: 3px; margin-top: 2px; }
.row .st { display: flex; gap: 2px; } .row .st i { width: 24px; height: 24px; color: rgba(120, 70, 20, .25); } .row .st i.on { color: var(--gold); } .row .st i.lk { color: #888; }
.up { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 rgba(120, 70, 20, .2); }
.up .ui { width: 44px; height: 44px; padding: 8px; border-radius: 14px; background: var(--orange); color: #fff; } .up .mid { flex: 1; display: flex; flex-direction: column; gap: 4px; } .up strong { font-size: 18px; }
.pips { display: flex; gap: 4px; } .pips u { width: 22px; height: 8px; border-radius: 4px; background: rgba(120, 70, 20, .2); text-decoration: none; } .pips u.on { background: var(--orange); }
.buy { display: flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 99px; background: var(--orange); color: #fff; font-weight: 700; font-size: 18px; box-shadow: 0 3px 0 #a8420c; touch-action: manipulation; } .buy i { width: 20px; height: 20px; } .buy.no, .buy:disabled { background: #b9a890; box-shadow: none; }
.dgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.dx { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; background: #fff; text-align: center; } .dx b { font-size: 14px; } .dx small { font-size: 13px; opacity: .7; display: flex; align-items: center; gap: 3px; } .dx small .mi { width: 14px; height: 14px; } .dx.unk { opacity: .45; filter: grayscale(1); } .dx.t { min-height: 54px; justify-content: center; }
.grade { display: inline-flex; align-items: center; gap: 8px; padding: 2px 14px; border-radius: 99px; background: rgba(255, 255, 255, .15); } .grade small { font-size: 14px; opacity: .85; } .grade b { font-size: 34px; color: var(--gold); }
.grade.gF b { color: #ff7a7a; }

#kcam { left: 12px; bottom: calc(var(--safe-b) + 72px); width: 156px; height: 156px; border-radius: 18px; box-shadow: 0 0 0 4px #fff, 0 4px 0 4px rgba(60, 35, 15, .45); background: transparent; pointer-events: none; }
#kcam.hot { box-shadow: 0 0 0 4px var(--red), 0 0 18px var(--red); }
#over { background: rgba(40, 20, 5, .6) !important; }
#pause { background: rgba(40, 20, 5, .5); }
#menu .kk-logo span:nth-child(2) { font-size: 42px; margin-top: 6px; }
#introText { width: calc(100% - 32px); overflow-wrap: anywhere; }
#hand { right: 34px; bottom: calc(var(--safe-b) + 18px); }
#kbadge { transform: translate(-50%, -100%); width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #2dadb7, 0 4px 0 3px rgba(0,0,0,.3); overflow: hidden; pointer-events: none; animation: kb 1.2s ease-in-out infinite alternate; }
#kbadge img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes kb { from { margin-top: 0; } to { margin-top: -6px; } }

/* 미션 */
#mname { left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 112px); padding: 4px 14px; border-radius: 99px; background: rgba(255,255,255,.95); color: var(--ink); font-weight: 700; font-size: 18px; box-shadow: 0 3px 0 rgba(0,0,0,.25); display: none; z-index: 4; white-space: nowrap; }
#mname.on { display: flex; align-items: center; gap: 6px; } #mname i { width: 22px; height: 22px; color: var(--orange); }
#mname small { font-size: 15px; font-weight: 500; opacity: .75; }
#mlayer { inset: 0; pointer-events: none; z-index: 6; }
#mlayer > * { position: absolute; pointer-events: auto; }
.mchip { width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 32px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 5px 0 rgba(0,0,0,.3), 0 0 0 4px var(--gold); animation: ansp .5s ease-in-out infinite alternate; touch-action: manipulation; }
.mchip.done { background: #6fd06f; color: #fff; animation: none; opacity: .5; }
.mduck { left: 50%; top: 52%; width: 150px; height: 150px; margin: -75px 0 0 -75px; color: var(--gold); filter: drop-shadow(0 4px 0 rgba(60,30,0,.6)); animation: duckp .7s ease-in infinite; pointer-events: none !important; }
@keyframes duckp { 0% { transform: translateY(-30px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }
.mshh { left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; background: conic-gradient(#6fc7ff calc(var(--p, 0) * 360deg), rgba(255,255,255,.5) 0); display: grid; place-items: center; pointer-events: none !important; }
.mshh i { width: 88px; height: 88px; padding: 14px; border-radius: 50%; background: #fff; color: #3b7bd0; }
.mrbar { left: 50%; top: 46%; width: 280px; height: 22px; margin-left: -140px; border-radius: 99px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 3px rgba(60,35,15,.5); pointer-events: none !important; }
.mrbar u { position: absolute; top: -6px; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; border: 5px solid var(--gold); background: rgba(255,255,255,.7); text-decoration: none; }
.mrbar u.hit { background: #6fd06f; border-color: #3aa83a; }
.mrbar b { position: absolute; top: -10px; width: 6px; height: 42px; background: var(--red); border-radius: 3px; margin-left: -3px; }
.mbag { left: 14%; top: 58%; width: 76px; height: 76px; margin: -38px 0 0 -38px; padding: 12px; border-radius: 22px; background: #fff; color: var(--orange); box-shadow: 0 5px 0 rgba(0,0,0,.3); touch-action: none; animation: ansp .5s ease-in-out infinite alternate; }
.mdrawer { left: 82%; top: 58%; width: 96px; height: 76px; margin: -38px 0 0 -48px; border-radius: 14px; border: 5px dashed var(--gold); background: rgba(255,255,255,.35); color: #fff; display: grid; place-items: center; pointer-events: none !important; }
.mdrawer i { width: 44px; height: 44px; }
#mintro { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(40,20,5,.55); }
#mintro .cc { width: min(86vw, 340px); padding: 18px; border-radius: 24px; background: #fffaee; color: var(--ink); text-align: center; box-shadow: 0 8px 0 rgba(120,70,20,.4); }
#mintro .big { width: 84px; height: 84px; margin: 0 auto 6px; padding: 16px; border-radius: 50%; background: var(--orange); color: #fff; }
#mintro h2 { margin: 4px 0; font-size: 26px; } #mintro p { margin: 6px 0 10px; font-size: 18px; font-weight: 500; line-height: 1.35; word-break: keep-all; }
#mintro .demo { position: relative; height: 84px; margin: 4px 0 8px; } #mintro .demo svg { position: absolute; width: 54px; height: 54px; left: 50%; margin-left: -27px; top: 14px; color: #fff; stroke: #3b2a1a; stroke-width: 1.2; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
#mintro .demo.tap svg { animation: htap 1s ease-in-out infinite; } #mintro .demo.swipe svg { animation: hswipe 1.1s ease-in-out infinite; } #mintro .demo.drag svg { animation: hdrag 1.4s ease-in-out infinite; } #mintro .demo.still svg { animation: none; opacity: .55; }
@keyframes hswipe { 0% { transform: translateY(-20px); } 70%, 100% { transform: translateY(40px); } }
@keyframes hdrag { 0% { transform: translateX(-80px); } 70%, 100% { transform: translateX(80px); } }
#sweat { position: fixed; z-index: 5; width: 26px; height: 34px; transform: translate(-50%, -50%); display: none; pointer-events: none; }
#sweat.on { display: block; animation: sweatd .9s ease-in infinite; } #sweat svg { fill: #8fd8ff; stroke: #1b5f8c; stroke-width: 1.5; }
@keyframes sweatd { 0% { opacity: 0; margin-top: -8px; } 30% { opacity: 1; } 100% { opacity: 0; margin-top: 18px; } }
#cloud { position: fixed; z-index: 5; width: 96px; height: 60px; transform: translate(-50%, -100%); display: none; pointer-events: none; color: #5a5f78; }
#cloud.on { display: block; animation: ansp .9s ease-in-out infinite alternate; }
#cloud svg { filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); } #cloud .rain { position: absolute; left: 20px; top: 52px; width: 56px; height: 40px; background: repeating-linear-gradient(100deg, #8fd8ff 0 3px, transparent 3px 11px); mask: linear-gradient(#000, transparent); -webkit-mask: linear-gradient(#000, transparent); animation: rain .5s linear infinite; }
@keyframes rain { from { background-position: 0 0; } to { background-position: -6px 14px; } }
.mstat { display: flex; gap: 4px; }
.titlebadge { display: inline-block; padding: 4px 14px; border-radius: 99px; background: var(--gold); color: #5a2a00; font-weight: 700; font-size: 18px; margin: 4px 0; }