/* 자동 생성 — scripts/skin/strip-visual-css.mjs. 손수정 금지.
   레거시 스타일에서 시각 속성을 전부 제거한 구조 전용 베이스. 새 비주얼은 potshelf.css. */
:root { --ratio: 5 / 7; --gap: 0.6vw; --card-w: min(9.2vw, 64px); --radius: clamp(4px, 1.3vw, 8px); --banner-h: 64px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
body { display: flex; flex-direction: column; image-rendering: pixelated; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#topbar, #bottombar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
#topbar { justify-content: space-between; padding-top: calc(env(safe-area-inset-top) + 6px); }
#topbar .stats { flex: 1 1 auto; justify-content: space-between; }
#stockbar { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; min-height: calc(var(--real-card-w, 44px) * 7 / 5 + 4px); padding: 2px 10px 0; gap: 8px; }
.foundations { display: flex; align-items: center; flex-wrap: nowrap; gap: 1px; height: calc(var(--real-card-w, 44px) * 7 / 5); }
.found-slot { position: relative; flex: 0 0 auto; width: var(--real-card-w, 44px) !important; min-width: var(--real-card-w, 44px); max-width: var(--real-card-w, 44px); height: calc(var(--real-card-w, 44px) * 7 / 5) !important; min-height: calc(var(--real-card-w, 44px) * 7 / 5); max-height: calc(var(--real-card-w, 44px) * 7 / 5); aspect-ratio: 5 / 7; box-sizing: border-box; }
.found-slot.filled { overflow: hidden; }
.found-slot.char-edge { overflow: visible; z-index: 4; }
.found-slot.char-tracing { overflow: visible; z-index: 5; }
.found-slot.char-tracing::before { display: none !important; }
.found-slot.char-edge::before { display:none; }
.char-neon-trace { position:absolute; z-index:7; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px); overflow:visible; pointer-events:none; }
.char-neon-trace rect { animation:charMarch var(--trace-duration,2.4s) linear 1 forwards, charNeonGlow var(--trace-duration,2.4s) ease-in-out 1 forwards; }
.found-slot.char-match-2::before { animation: charEdgeSweep 1.45s cubic-bezier(.2,.8,.2,1) 1; }
.found-slot.char-match-3::before { animation: charEdgeSweep 1.9s cubic-bezier(.2,.8,.2,1) 1; }
.found-slot.char-match-4::before { animation: charEdgeSweep 2.35s cubic-bezier(.2,.8,.2,1) 2; }
.found-slot.char-confirm-neon::before { animation: charEdgeConfirm 2.4s linear 1; opacity:1; }
.found-slot.char-match-2,
.found-slot.char-match-3,
.found-slot.char-match-4 { animation: charEdgePulse 1.2s ease-in-out 2; }
@keyframes charEdgeSweep {
  0% { opacity:0; transform:rotate(0deg) scale(.96); }
  10% { opacity:1; }
  55% { opacity:1; transform:rotate(220deg) scale(1.06); }
  82% { opacity:1; transform:rotate(330deg) scale(1.02); }
  100% { opacity:0; transform:rotate(360deg) scale(1); }
}
@keyframes charEdgeConfirm {
  0% { opacity:0; transform:rotate(0deg) scale(.96); }
  12% { opacity:1; }
  82% { opacity:1; transform:rotate(360deg) scale(1.04); }
  100% { opacity:0; transform:rotate(450deg) scale(1); }
}
@keyframes charMarch {
  from { opacity:0; }
  10% { opacity:1; }
  86% { opacity:1; }
  to { opacity:0; }
}
@keyframes charNeonGlow {
  0%,100% { }
  18% { }
  48% { }
  72% { }
}
@keyframes charEdgePulse {
  0%,100% { }
  35% { }
  60% { }
}
.found-king { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: contain; max-width: calc(100% - 4px); max-height: calc(100% - 4px); image-rendering: pixelated; transform-origin: 50% 92%; }
.found-suit { position: absolute; top: 1px; left: 2px; font-size: clamp(8px, 2.6vw, 11px); font-weight: 800; line-height: 1; }
.found-king.d-sway { animation: dSway 1.1s ease-in-out; }
.found-king.d-jump { animation: dJump 0.9s ease-out; }
.found-king.d-spin { animation: dSpin 1.0s ease-in-out; }
.found-king.d-shake { animation: dShake 0.7s ease-in-out; }
.found-king.d-wobble { animation: dWobble 1.4s ease-in-out; }
.found-king.d-pop { animation: dPop 0.85s cubic-bezier(.2,.8,.3,1.4); }
.found-king.d-tilt { animation: dTilt 1.2s ease-in-out; }
.found-king.d-flip { animation: dFlip 0.9s ease-in-out; }
@keyframes dTilt {
  0%,100% { transform: rotate(0deg) translateY(0); }
  30% { transform: rotate(-22deg) translateY(-6%); }
  55% { transform: rotate(-22deg) translateY(-6%); }
  80% { transform: rotate(18deg) translateY(-4%); }
}
@keyframes dFlip {
  0%,100% { transform: scaleX(1) rotate(0deg); }
  35% { transform: scaleX(-1) rotate(6deg); }
  70% { transform: scaleX(1) rotate(-6deg); }
}
@keyframes dSway {
  0%,100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg) translateY(-8%); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(15deg) translateY(-8%); }
}
@keyframes dJump {
  0%,100% { transform: translateY(0) scaleY(1); }
  15% { transform: translateY(2%) scaleY(0.85); }
  45% { transform: translateY(-40%) scaleY(1.12); }
  70% { transform: translateY(0) scaleY(0.92); }
  85% { transform: translateY(-15%) scaleY(1.04); }
}
@keyframes dSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes dShake {
  0%,100% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(-18%) rotate(-6deg); }
  40% { transform: translateX(18%) rotate(6deg); }
  60% { transform: translateX(-12%) rotate(-4deg); }
  80% { transform: translateX(12%) rotate(4deg); }
}
@keyframes dWobble {
  0%,100% { transform: rotate(0deg); }
  20% { transform: rotate(-10deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(4deg); }
}
@keyframes dPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.3, 0.8); }
  60% { transform: scale(0.9, 1.15) translateY(-12%); }
  100% { transform: scale(1, 1) translateY(0); }
}
.found-slot.bonus-glow-add { animation: bonusGlowAdd 1.4s ease-out; }
.found-slot.bonus-glow-mult { animation: bonusGlowMult 1.9s ease-out; }
@keyframes bonusGlowAdd {
  0% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.08) rotate(-4deg); }
  40% { transform: scale(1.05) rotate(3deg); }
  65% { transform: scale(1.02) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes bonusGlowMult {
  0% { transform: scale(1) rotate(0deg) translateY(0); }
  15% { transform: scale(1.16) rotate(-6deg) translateY(-6%); }
  30% { transform: scale(1.13) rotate(6deg) translateY(0); }
  50% { transform: scale(1.1) rotate(-4deg) translateY(-3%); }
  75% { transform: scale(1.05) rotate(2deg) translateY(0); }
  100% { transform: scale(1) rotate(0deg) translateY(0); }
}
.bonus-reason-tag { position: fixed; transform: translate(-50%, -50%); font-weight: 900; font-size: 13px; white-space: nowrap; padding: 3px 10px; pointer-events: none; z-index: 249; max-width: calc(100vw - 16px); overflow-wrap: anywhere; text-align: center; }
.bonus-reason-tag.mode-add { animation: bonusReasonPop 1.5s cubic-bezier(.2,.9,.3,1) forwards; }
.bonus-reason-tag.mode-mult { font-size: 15px; animation: bonusReasonPop 1.5s cubic-bezier(.2,.9,.3,1) forwards; }
.bonus-reason-tag.mode-gold { font-size: 18px; animation: bonusReasonPopGold 1.8s cubic-bezier(.2,1.4,.3,1) forwards; }
.bonus-reason-tag.match-tier-2,
.bonus-reason-tag.match-tier-3,
.bonus-reason-tag.match-tier-4 { font-size:14px; animation: matchTagPop 2.7s cubic-bezier(.2,1.3,.3,1) forwards; }
.bonus-reason-tag.match-tier-3 { font-size:16px; animation-duration:3.1s; }
.bonus-reason-tag.match-tier-4 { font-size:18px; animation-duration:3.5s; }
.bonus-reason-tag.set-reward-text { font-size:16px; animation:setRewardTextPop 1.3s cubic-bezier(.2,1.3,.3,1) forwards; }
.bonus-reason-tag.set-reward-gold { font-size:19px; animation:setRewardGoldPop 2.1s cubic-bezier(.2,1.35,.3,1) forwards; }
.bonus-reason-tag.match-gold-tier-3 { font-size:21px; }
.bonus-reason-tag.match-gold-tier-4 { font-size:24px; }
@keyframes setRewardTextPop {
  0% { opacity:0; transform:translate(-50%,10px) scale(.45); }
  16% { opacity:1; transform:translate(-50%,-6px) scale(1.16); }
  78% { opacity:1; transform:translate(-50%,-16px) scale(1); }
  100% { opacity:0; transform:translate(-50%,-32px) scale(.94); }
}
@keyframes setRewardGoldPop {
  0% { opacity:0; transform:translate(-50%,10px) scale(.4) rotate(-5deg); }
  14% { opacity:1; transform:translate(-50%,-8px) scale(1.25) rotate(4deg); }
  42% { transform:translate(-50%,-18px) scale(1.05) rotate(-2deg); }
  82% { opacity:1; transform:translate(-50%,-30px) scale(1); }
  100% { opacity:0; transform:translate(-50%,-62px) scale(.9); }
}
@keyframes matchTagPop {
  0% { opacity:0; transform:translate(-50%,8px) scale(.45) rotate(-5deg); }
  15% { opacity:1; transform:translate(-50%,-8px) scale(1.18) rotate(3deg); }
  32% { transform:translate(-50%,-12px) scale(1) rotate(-1deg); }
  82% { opacity:1; transform:translate(-50%,-25px) scale(1.03); }
  100% { opacity:0; transform:translate(-50%,-48px) scale(.92); }
}
@keyframes bonusReasonPop {
  0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  10% { transform: translate(-50%, -68%) scale(1.05); opacity: 1; }
  85% { transform: translate(-50%, -78%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -100%) scale(.95); opacity: 0; }
}
@keyframes bonusReasonPopGold {
  0% { transform: translate(-50%, -50%) scale(.4) rotate(0deg); opacity: 0; }
  12% { transform: translate(-50%, -85%) scale(1.25) rotate(-6deg); opacity: 1; }
  28% { transform: translate(-50%, -90%) scale(1.1) rotate(5deg); opacity: 1; }
  45% { transform: translate(-50%, -95%) scale(1.15) rotate(-3deg); opacity: 1; }
  85% { transform: translate(-50%, -105%) scale(1.1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -130%) scale(.95) rotate(0deg); opacity: 0; }
}
.icon-btn { width: clamp(38px, 11.2vw, 46px); height: clamp(38px, 11.2vw, 46px); display: flex; align-items: center; justify-content: center; padding: 0; font-size: clamp(16px, 4.6vw, 20px); line-height: 1; cursor: pointer; }
.icon-btn:active { transform: scale(0.94); }
.stats { display: flex; gap: clamp(8px, 4vw, 22px); }
.stat { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.combo-stat { flex-direction: row; align-items: center; gap: 5px; }
.stat .label { font-size: 10px; opacity: 0.7; }
.stat span:last-child { font-size: clamp(14px, 4vw, 18px); font-weight: 700; }
#shotOverlay { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; }
#shotOverlay .shot-img { max-width: 90%; max-height: 64%; -webkit-touch-callout: default; }
#shotOverlay .shot-hint { font-size: 15px; text-align: center; }
#shotOverlay .diff { width: auto; min-width: 160px; }
.combo-stat #combo, .combo-stat #homePoints, .combo-stat #castleCoinVal, .combo-stat #missionsPoints { transition: color .2s, text-shadow .9s ease-out; }
.combo-stat.on .label { opacity: 0.95; }
#combo, #homePoints, #castleCoinVal, #missionsPoints { display: inline-block; transform-origin: center; font-size: clamp(24px, 7vw, 32px); font-weight: 800; }
#combo.combo-bump { animation: comboBump 0.4s cubic-bezier(.2,1.6,.4,1); }
@keyframes comboBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.5); }
  100% { transform: scale(1); }
}
#score { display: inline-block; transform-origin: center; }
#score.score-bump { animation: scoreBump 0.42s cubic-bezier(.2,1.6,.4,1); }
@keyframes scoreBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.45); }
  100% { transform: scale(1); }
}
#board { flex: 1 1 auto; position: relative; display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--gap); padding: 8px var(--gap) 0; align-content: start; min-height: 0; touch-action: none; }
.dialog.game-select-dialog { position: relative; }
.gs-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.gs-close:active { transform: scale(0.9); }
.gs-carousel { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 10px; }
.gs-card-wrap { position: relative; width: 148px; height: 200px; }
.gs-card { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; animation: gsCardIn 0.3s cubic-bezier(.2,1.4,.4,1); }
@keyframes gsCardIn {
  0% { transform: scale(0.8) rotate(-4deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.gs-card-icon { width: 92px; height: 92px; image-rendering: pixelated; object-fit: contain; }
.gs-card-icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.gs-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; }
.gs-dot { width: 7px; height: 7px; }
.card-ghost { position: fixed; z-index: 100; pointer-events: none; transform: rotate(2deg); }
.card-ghost .card { transition: none; }
.column { position: relative; }
.column.empty-target::before { content: ""; position: absolute; inset: 0; }
.column.drop-ok::after { content: ""; position: absolute; inset: -3px; pointer-events: none; }
.column.hint-dst::after { content: ""; position: absolute; inset: -3px; pointer-events: none; animation: pulse 0.8s ease-in-out infinite; }
.card.hint-src { animation: pulse 0.8s ease-in-out infinite; }
.card.hint-dst-card { animation: pulse 0.8s ease-in-out infinite; z-index: 40; }
@keyframes pulse {
  0%,100% { }
  50% { }
}
.combo-tag { position: fixed; transform: translate(-50%, -50%); font-weight: 900; font-size: calc(14px + var(--tier, 1) * 4px); pointer-events: none; z-index: 250; white-space: nowrap; animation: comboPop 1.15s cubic-bezier(.2, 1.7, .35, 1) forwards; }
@keyframes comboPop {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(-14deg); opacity: 0; }
  22% { transform: translate(-50%, -55%) scale(1.3) rotate(7deg); opacity: 1; }
  50% { transform: translate(-50%, -78%) scale(1) rotate(-3deg); opacity: 1; }
  100% { transform: translate(-50%, -165%) scale(.92) rotate(2deg); opacity: 0; }
}
.coin-fly { position: fixed; width: 24px; height: 24px; z-index: 260; pointer-events: none; image-rendering: pixelated; transition: transform 0.6s cubic-bezier(.25,.6,.3,1), opacity 0.55s ease-in 0.05s; }
.card { position: absolute; left: 0; width: 100%; aspect-ratio: var(--ratio); transition: top 0.1s cubic-bezier(.15,.85,.25,1), transform 0.08s cubic-bezier(.15,.85,.25,1), box-shadow 0.1s ease, filter 0.2s ease; will-change: top, transform; container-type: inline-size; }
.card .face { position: absolute; inset: 0; font-weight: 800; }
.card .corner { position: absolute; top: 2%; left: 8%; display: flex; flex-direction: column; align-items: center; line-height: 0.7; }
.card .corner .r { font-weight: 900; font-size: calc(var(--real-card-w, 46px) * 0.48); line-height: 1; margin-top: -0.14em; }
.card .corner .r.r-ten { display: inline-block; transform: scaleX(0.82); transform-origin: left center; }
.card .big { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 92cqw; line-height: 1; opacity: 0.92; }
.card .big.art { inset: 46% 8% 7% 8%; opacity: 1; }
.card .big.art.rank-center { inset: 46% 4% 6% 4%; opacity: 1; }
.card .big.art.rank-center .rc-txt { font-weight: 900; font-size: 78cqw; line-height: 1; }
.card .big.art.rank-center .rc-txt.rc-tight { transform: scaleX(0.85); }
.card .big.art .pix { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; }
.card.goldwrap { animation: goldwrapPulse 1.1s ease-in-out infinite; cursor: pointer; }
.goldwrap-face { display: flex; align-items: center; justify-content: center; }
.goldwrap-face .coin-ico { width: 54cqw; height: 54cqw; }
@keyframes goldwrapPulse {
  0%, 100% { }
  50% { }
}
.stock.stock-attn { animation: stockPulse 0.65s ease-in-out 3; }
@keyframes stockPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}
.card.facecard .pix { transform-origin: 50% 100%; }
.card .back-art { transform-origin: 50% 50%; }
.card.c-j .pix { animation: jackHop 5s ease-in-out infinite; }
@keyframes jackHop {
  0%, 78%, 100% { transform: translateY(0) rotate(0deg); }
  84% { transform: translateY(-13%) rotate(-6deg); }
  89% { transform: translateY(0) rotate(0deg); }
  93% { transform: translateY(-7%) rotate(5deg); }
  97% { transform: translateY(0) rotate(0deg); }
}
.card.c-q .pix { animation: queenSway 6.5s ease-in-out infinite; }
@keyframes queenSway {
  0%, 76%, 100% { transform: rotate(0deg); }
  84% { transform: rotate(6deg) translateY(1%); }
  92% { transform: rotate(-6deg) translateY(1%); }
  100% { transform: rotate(0deg); }
}
.card.c-k .pix { animation: kingNod 8s ease-in-out infinite; }
@keyframes kingNod {
  0%, 80%, 100% { transform: scale(1) translateY(0) rotate(0deg); }
  87% { transform: scale(1.06) translateY(-3%) rotate(0deg); }
  94% { transform: scale(1) translateY(3%) rotate(1.5deg); }
}
.card .back-art.live { animation: spiderWiggle 4.5s ease-in-out infinite; }
@keyframes spiderWiggle {
  0%, 72%, 100% { transform: translateY(0) rotate(0deg); }
  78% { transform: rotate(-5deg); }
  83% { transform: rotate(5deg); }
  88% { transform: translateY(-10%) rotate(-3deg); }
  94% { transform: translateY(0) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .card.c-j .pix, .card.c-q .pix, .card.c-k .pix, .card .back-art.live { animation: none; }
}
.card.down .face { display: none; }
#loadingScreen { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; transition: opacity 0.4s ease; }
#loadingScreen.hide { opacity: 0; pointer-events: none; }
#loadingScreen::before { content: ""; position: absolute; inset: 0; z-index: 2; opacity: 1; transition: opacity 0.45s ease; pointer-events: none; }
#loadingScreen.pattern-ready::before { opacity: 0; }
#loadingSpider { position: relative; z-index: 1; width: 46%; max-width: 320px; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; opacity: 0; }
#loadingSpider.ready { animation: loadingSpiderIn 0.5s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes loadingSpiderIn {
  0% { opacity: 0; transform: scale(0.7) rotate(-6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.card .back-art { position: absolute; left: 12%; width: 76%; top: 3%; height: 94%; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }
.card.movable { cursor: pointer; }
.card.shake { animation: noShake 0.34s ease-in-out; z-index: 56; }
@keyframes noShake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  10% { transform: translateX(-11%) rotate(-4deg); }
  22% { transform: translateX(9%) rotate(3.5deg); }
  34% { transform: translateX(-9%) rotate(-3.5deg); }
  46% { transform: translateX(7%) rotate(3deg); }
  58% { transform: translateX(-6%) rotate(-2.5deg); }
  70% { transform: translateX(4%) rotate(1.5deg); }
  82% { transform: translateX(-2%) rotate(-0.8deg); }
}
.card.land { animation: landSquash 0.3s cubic-bezier(.2,.8,.3,1); z-index: 50; }
@keyframes landSquash {
  0% { transform: scale(1.16, 0.82); }
  45% { transform: scale(0.95, 1.07); }
  75% { transform: scale(1.03, 0.98); }
  100% { transform: scale(1, 1); }
}
.card.pop { animation: cardPop 0.42s cubic-bezier(.2,.9,.3,1.5); z-index: 58; }
@keyframes cardPop {
  0% { transform: scale(1); }
  38% { transform: scale(var(--pop-s, 1.3)); }
  100% { transform: scale(1); }
}
.px-spark { position: fixed; width: 3px; height: 3px; transform: translate(-50%, -50%); pointer-events: none; z-index: 122; image-rendering: pixelated; animation: pxBurst var(--dur, 0.9s) cubic-bezier(.15,.7,.5,1) forwards; }
@keyframes pxBurst {
  0% { transform: translate(-50%, -50%); opacity: 1; }
  60% { transform: translate(calc(-50% + var(--mx, 0px)), calc(-50% + var(--my, 0px))); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))); opacity: 0; }
}
.px-pop { position: fixed; width: 4px; height: 4px; transform: translate(-50%, -50%); pointer-events: none; z-index: 123; image-rendering: pixelated; animation: pxPopFade 0.28s steps(3) forwards; }
@keyframes pxPopFade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.charge-glow { position: fixed; width: 40px; height: 40px; transform: translate(-50%, -50%) scale(0.4); opacity: 0.85; pointer-events: none; z-index: 100; animation: chargeGlow 0.72s ease-out forwards; }
@keyframes chargeGlow {
  to { transform: translate(-50%, -50%) scale(var(--cg, 5)); opacity: 0; }
}
.screen-flash { position: fixed; inset: 0; opacity: 0; pointer-events: none; z-index: 105; animation: screenFlash 0.32s ease-out forwards; }
@keyframes screenFlash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
#sunOrbit { position: fixed; top: 0; left: 0; width: 17vmin; height: 17vmin; z-index: 1; pointer-events: none; animation: sunArc 60s linear infinite; }
#skyclouds { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden; }
.skycloud { position: absolute; image-rendering: pixelated; }
#scene { position: fixed; left: 0; width: 100%; image-rendering: pixelated; z-index: 2; pointer-events: none; transform-origin: 50% 100%; }
.scene-grow-layer { position: fixed; z-index: 3; pointer-events: none; }
.scene-obj-clip { position: absolute; overflow: hidden; transform-origin: 50% 100%; opacity: 0; transform: translateY(35%) scale(0.75); animation: sceneObjIn 0.42s cubic-bezier(.2,.9,.35,1.15) forwards; }
.scene-obj-clip img { position: absolute; image-rendering: pixelated; }
@keyframes sceneObjIn {
  0% { opacity: 0; transform: translateY(35%) scale(0.75); }
  65% { opacity: 1; transform: translateY(-4%) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sunArc {
  0% { transform: translate(115vw, 66vh); }
  10% { transform: translate(86vw, 40vh); }
  28% { transform: translate(64vw, 22vh); }
  50% { transform: translate(42vw, 5vh); }
  72% { transform: translate(20vw, 22vh); }
  90% { transform: translate(-6vw, 40vh); }
  100% { transform: translate(-32vw, 66vh); }
}
#sun { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; transform-origin: 50% 50%; }
#topbar, #stockbar, #board, #bottombar { position: relative; z-index: 5; }
#sun.s-bounce, .cel-motion-host.s-bounce { animation: sunBounce 0.9s ease-in-out; }
#sun.s-spin, .cel-motion-host.s-spin { animation: sunSpin 1.0s ease-in-out; }
#sun.s-wobble, .cel-motion-host.s-wobble { animation: sunWobble 1.0s ease-in-out; }
#sun.s-jump, .cel-motion-host.s-jump { animation: sunJump 0.8s ease-out; }
#sun.s-pop, .cel-motion-host.s-pop { animation: sunPop 0.7s cubic-bezier(.2,.8,.3,1.45); }
#sun.s-sparkle, .cel-motion-host.s-sparkle { animation: sunSparkle 0.85s ease-in-out; }
@keyframes sunSparkle {
  0%,100% { transform: scale(1); }
  40% { transform: scale(1.12); }
}
.sparkle { position: fixed; width: 9px; height: 9px; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); transform: translate(-50%, -50%) scale(0); pointer-events: none; z-index: 4; animation: sparkleTwinkle 0.7s ease-out forwards; }
@keyframes sparkleTwinkle {
  0% { transform: translate(-50%,-50%) scale(0) rotate(0deg); opacity: 0; }
  45% { transform: translate(-50%,-50%) scale(1.2) rotate(45deg); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(0.2) rotate(90deg); opacity: 0; }
}
#rainLayer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.raindrop { position: absolute; top: -6%; width: 2px; height: 16px; animation-name: raindropFall; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes raindropFall {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translateY(112vh); opacity: 0.6; }
}
@keyframes sunBounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-22%); }
}
@keyframes sunSpin {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
@keyframes sunWobble {
  0%,100% { transform: rotate(0); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}
@keyframes sunJump {
  0%,100% { transform: translateY(0) scaleY(1); }
  30% { transform: translateY(-30%) scaleY(1.1); }
  60% { transform: translateY(0) scaleY(0.9); }
  80% { transform: translateY(-12%); }
}
@keyframes sunPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.win-stage { position: fixed; inset: 0; z-index: 108; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.win-spot { position: absolute; left: 50%; top: 50%; width: 80vw; height: 80vw; max-width: 520px; max-height: 520px; transform: translate(-50%, -50%); animation: winSpot 1.6s ease-in-out infinite; }
@keyframes winSpot {
  0%,100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.win-char { position: relative; width: 42vw; max-width: 230px; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; transform-origin: 50% 90%; animation: winDance 0.62s ease-in-out infinite; }
.win-buddy { position: absolute; width: 20vw; max-width: 110px; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; bottom: 14%; transform-origin: 50% 90%; animation: winHop 0.5s ease-in-out infinite; }
.win-buddy.rnd { bottom: auto; right: auto; width: 15vw; max-width: 84px; animation-duration: .46s; animation-delay: calc(var(--d, 0) * 1ms); }
.win-buddy.rnd:nth-child(3n) { animation-duration: .54s; }
.win-buddy.rnd:nth-child(2n) { animation-duration: .5s; }
.win-buddy.d1 { left: 4%; bottom: 20%; animation-delay: 0s; }
.win-buddy.d2 { right: 4%; bottom: 20%; animation-delay: .12s; animation-duration: .46s; }
.win-buddy.d3 { left: 20%; bottom: 6%; animation-delay: .25s; animation-duration: .54s; }
.win-buddy.d4 { right: 20%; bottom: 6%; animation-delay: .37s; animation-duration: .5s; }
@keyframes winDance {
  0%,100% { transform: translateY(0) rotate(-7deg) scale(1); }
  25% { transform: translateY(-9%) rotate(0deg) scale(1.06); }
  50% { transform: translateY(0) rotate(7deg) scale(1); }
  75% { transform: translateY(-9%) rotate(0deg) scale(1.06); }
}
@keyframes winHop {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-22%) rotate(6deg); }
}
.win-dialog { position: relative; }
.win-pop { position: absolute; width: 12%; max-width: 50px; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; pointer-events: none; z-index: 3; animation: winPopHop 0.5s ease-in-out infinite; }
@keyframes winPopHop {
  0%,100% { transform: translate(-50%, -50%) rotate(-6deg); }
  50% { transform: translate(-50%, -64%) rotate(6deg); }
}
.win-bubble { position: absolute; transform: translate(-50%, 0); padding: 2px 7px; font-size: 11px; font-weight: 700; white-space: nowrap; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; z-index: 6; pointer-events: none; animation: winBubblePop 0.45s ease-out both; }
.win-bubble::after { content: ""; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); }
@keyframes winBubblePop {
  from { opacity: 0; transform: translate(-50%, 8px) scale(0.6); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.win-fw { width: 15%; max-width: 56px; image-rendering: pixelated; pointer-events: none; z-index: 4; animation: fwTwinkle 1.1s ease-in-out infinite; }
@keyframes fwTwinkle {
  0%,100% { transform: scale(0.85) rotate(0deg); opacity: 0.8; }
  50% { transform: scale(1.12) rotate(22deg); opacity: 1; }
}
.win-stage.bow .win-char { animation: winBow 0.8s ease-out forwards; }
@keyframes winBow {
  0% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(8%) rotate(0) scaleY(0.9); }
  100% { transform: translateY(0) rotate(0) scale(1.1); }
}
.deal-spark { position: fixed; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; image-rendering: pixelated; pointer-events: none; z-index: 70; animation: dealSpark 0.36s steps(3) forwards; }
@keyframes dealSpark {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}
.confetti { position: fixed; width: 8px; height: 12px; pointer-events: none; z-index: 121; animation: confettiPop 2.8s cubic-bezier(.25,.7,.5,1) forwards; }
@keyframes confettiPop {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  35% { opacity: 1; transform: translate(calc(var(--cx, 0px) * 0.5), var(--up, -60vh)) rotate(calc(var(--rot, 360deg) * 0.5)); }
  100% { opacity: 0; transform: translate(var(--cx, 0px), 16vh) rotate(var(--rot, 360deg)); }
}
.impact-ripple { position: fixed; width: 14px; height: 14px; transform: translate(-50%, -50%) scale(0.3); opacity: 0.9; pointer-events: none; z-index: 95; animation: ripple 0.44s ease-out forwards; }
@keyframes ripple {
  to { transform: translate(-50%, -50%) scale(5); opacity: 0; }
}
.card.fly-complete { position: fixed; z-index: 120; pointer-events: none; transition: transform 0.55s cubic-bezier(.4,.1,.2,1), opacity 0.55s ease; }
.card.complete-fly { transition: top 0.35s ease, left 0.35s ease, opacity 0.35s ease; opacity: 0; }
.right { display: flex; align-items: center; gap: 8px; }
.stock { position: relative; flex: 0 0 auto; cursor: pointer; }
.stock.empty { width: var(--real-card-w, 44px); aspect-ratio: var(--ratio); height: auto; cursor: default; }
.stock:active:not(.empty) { transform: scale(0.95); }
.mini-back { position: absolute; top: 0; width: var(--real-card-w, 44px); aspect-ratio: var(--ratio); overflow: hidden; }
.mini-back .mini-spider { position: absolute; inset: 0; margin: auto; width: 60%; height: 60%; object-fit: contain; image-rendering: pixelated; transition: opacity 0.15s ease; }
.fly-card { position: fixed; z-index: 200; pointer-events: none; will-change: transform; overflow: hidden; }
.fly-card img { position: absolute; inset: 0; margin: auto; width: 60%; height: 60%; object-fit: contain; image-rendering: pixelated; }
#bottombar { flex-direction: column; gap: 4px; padding-bottom: 4px; transform: translateY(0); opacity: 1; pointer-events: auto; }
#bottombar.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.hint { position: absolute; left: 10px; right: 10px; bottom: 100%; margin-bottom: 3px; font-size: clamp(11px, 3.2vw, 14px); opacity: 0.9; text-align: center; pointer-events: none; }
.tutorial-box { position: fixed; left: 50%; bottom: calc(112px + var(--banner-h, 0px)); transform: translateX(-50%) translateY(16px); width: min(88vw, 380px); padding: 16px 18px; z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; }
.tutorial-box.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.tutorial-text { margin: 0 0 12px; font-size: 15px; line-height: 1.5; text-align: center; }
.tutorial-btns { display: flex; gap: 8px; }
.tutorial-btns .diff { flex: 1; margin: 0; }
.tutorial-btns .diff.hide { display: none; }
.tutorial-highlight { position: relative; z-index: 45; animation: tutorialPulse 1s ease-in-out infinite; }
@keyframes tutorialPulse {
  0%, 100% { }
  50% { }
}
.actions { display: flex; justify-content: space-around; align-items: stretch; gap: 8px; width: 100%; max-width: 460px; }
.act { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; cursor: pointer; }
.act:active { transform: scale(0.95); }
.act:disabled { opacity: 0.38; }
.act .ico { font-size: clamp(18px, 5.4vw, 24px); line-height: 1; display: flex; align-items: center; justify-content: center; }
.act .lbl { font-size: clamp(10px, 3vw, 13px); font-weight: 600; }
.ico-img { width: clamp(26px, 7.6vw, 31px); height: clamp(26px, 7.6vw, 31px); object-fit: contain; image-rendering: pixelated; }
.gift-ico { width: 1.15em; height: 1.15em; object-fit: contain; image-rendering: pixelated; vertical-align: -0.18em; }
.coin-ico { width: 1.25em; height: 1.25em; object-fit: contain; image-rendering: pixelated; vertical-align: -0.2em; }
#comboLabel .coin-ico, #homeCoinLabel .coin-ico, #castleCoinIco .coin-ico, #missionsCoinIco .coin-ico { width: clamp(24px, 7vw, 32px); height: clamp(24px, 7vw, 32px); display: block; }
.wp-total .coin-ico { width: 1.05em; height: 1.05em; vertical-align: -0.1em; }
.dialog.gacha h1 .gift-ico { width: 1em; height: 1em; }
.h1-ico { width: 1em; height: 1em; object-fit: contain; image-rendering: pixelated; vertical-align: -0.15em; }
.act .badge { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 50; padding-bottom: var(--banner-h, 0px); }
.overlay.show { display: flex; }
.dialog { padding: 26px 22px; width: min(86vw, 360px); text-align: center; max-height: calc(90vh - var(--banner-h, 0px)); overflow-y: auto; }
.dialog h1 { margin: 0 0 8px; font-size: clamp(20px, 5.4vw, 26px); display: inline-block; padding: 5px 20px; }
.dialog .sub { margin: 0 0 18px; opacity: 0.75; font-size: 14px; }
.diff { display: block; width: 100%; margin: 8px 0 0; padding: 14px; font-size: 17px; font-weight: 700; cursor: pointer; }
.diff:active { transform: scale(0.97); }
.diff:disabled { opacity: 0.55; cursor: default; }
.diff:disabled:active { transform: none; }
.diff.double { animation: doublePulse 1.4s ease-in-out infinite; }
.diff.double:active { transform: scale(0.97); animation: none; }
@keyframes doublePulse {
  0%, 100% { }
  50% { }
}
@keyframes ctaPopIn {
  0% { transform: scale(0.3); opacity: 0; }
  55% { transform: scale(1.15); opacity: 1; }
  75% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}
.diff.double.cta-pop { animation: ctaPopIn 0.45s cubic-bezier(.34,1.56,.64,1) both, doublePulse 1.4s ease-in-out infinite 0.45s; }
.diff.prize:active { transform: scale(0.97); }
@keyframes giftCardSpotlight {
  0%, 100% { }
  50% { }
}
.store-card-daily.gift-spotlight { animation: giftCardSpotlight 1s ease-in-out 3; }
.diff.gift { animation: doublePulse 1.4s ease-in-out infinite; }
.diff.gift:active { transform: scale(0.97); animation: none; }
.diff.gift.gift-countdown { animation: none; cursor: default; font-size: 0.92em; }
#missionCompleteOverlay, #restartOverlay, #giftRemindOverlay, #adOfferOverlay, #rateOverlay { z-index: 145; }
#overOverlay { z-index: 120; }
#winOverlay.win { z-index: 120; pointer-events: none; }
#winOverlay.win .win-dialog { pointer-events: auto; }
.win-backdrop-tap { position: absolute; inset: 0; pointer-events: auto; }
.win-dialog { animation: winPop .5s cubic-bezier(.18,1.55,.4,1) both; overflow: visible; }
@keyframes winPop {
  0% { transform: scale(.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.win-troupe, .over-troupe { display: flex; justify-content: center; align-items: flex-end; gap: 6px; min-height: 60px; margin-bottom: 6px; }
.troupe-char { width: 46px; height: 58px; object-fit: contain; object-position: bottom; image-rendering: pixelated; transform-origin: 50% 100%; }
.troupe-dance { animation: troupeDance 0.6s ease-in-out infinite; }
@keyframes troupeDance {
  0%,100% { transform: translateY(0) rotate(-9deg) scale(1); }
  50% { transform: translateY(-22%) rotate(9deg) scale(1.05); }
}
.troupe-droop { animation: troupeDroop 1.8s ease-in-out infinite; }
@keyframes troupeDroop {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(4px) rotate(3deg); }
}
.win-dialog h1 { font-size: clamp(26px, 7.5vw, 38px); }
.win-sub { margin: 4px 0 16px; font-size: 14px; font-weight: 600; }
.win-stats { display: flex; justify-content: center; gap: 8px; margin: 0 0 18px; }
.win-stats .ws { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; min-width: 62px; }
.win-stats .ws span { font-size: 11px; font-weight: 700; }
.win-stats .ws b { font-size: clamp(16px, 5vw, 22px); }
.win-close-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; font-size: 16px; line-height: 1; cursor: pointer; z-index: 1; }
.win-close-x:active { transform: scale(0.94); }
.win-dialog .diff.win-primary { margin-top: 14px; }
.win-share-card { display: flex; align-items: center; justify-content: center; gap: 6px; width: auto; margin: 10px auto 0; padding: 8px 18px; font-size: 13px; font-weight: 700; cursor: pointer; }
.win-share-card:active { transform: scale(0.96); }
.win-share-card .wsc-ico { font-size: 15px; display: inline-flex; align-items: center; }
.win-share-card .wsc-ico img { width: 16px; height: 16px; image-rendering: pixelated; object-fit: contain; }
.mission-bar.claimable { animation: missionClaimPulse 1.1s ease-in-out infinite, missionClaimGlow 1.1s ease-in-out infinite, missionClaimWiggle 2.4s ease-in-out infinite; }
@keyframes missionClaimGlow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@keyframes missionClaimWiggle {
  0%, 92%, 100% { rotate: 0deg; }
  94% { rotate: -1.5deg; }
  96% { rotate: 1.5deg; }
  98% { rotate: -1deg; }
}
.dialog.over { position: relative; overflow: visible; }
.over-face { position: relative; width: 88px; height: 88px; margin: 0 auto 6px; }
.over-face img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; animation: overBob 1.6s ease-in-out infinite; transform-origin: 50% 80%; }
.over-tear { position: absolute; left: 62%; top: 46%; font-size: 16px; animation: overTear 1.8s ease-in infinite; }
@keyframes overBob {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(4px) rotate(4deg); }
}
@keyframes overTear {
  0% { opacity: 0; transform: translateY(-2px) scale(0.7); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(16px) scale(1); }
}
.dialog.settings { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; display: flex; flex-direction: column; align-items: stretch; padding: max(18px, env(safe-area-inset-top)) 18px calc(24px + var(--banner-h, 0px)); overflow-y: auto; text-align: left; }
.dialog.settings > *:not(.gacha-back):not(h1) { width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
.dialog.settings h1 { align-self: center; width: auto; text-align: center; margin-bottom: 18px; display: inline-block; padding: 5px 20px; }
.row { margin: 14px 0 6px; }
.row-label { font-size: 13px; opacity: 0.8; font-weight: 600; }
.seg { display: flex; gap: 6px; }
.seg-btn { flex: 1 1 0; padding: 10px 4px; font-size: 14px; font-weight: 600; cursor: pointer; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; font-size: 15px; }
.toggle-row input { width: 20px; height: 20px; }
.lang-select { width: 100%; padding: 11px 12px; font-size: 15px; font-weight: 600; -webkit-appearance: none; appearance: none; }
.set-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.set-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 76px; padding: 10px 4px; font-size: 13px; font-weight: 700; text-align: center; line-height: 1.25; cursor: pointer; }
.set-tile:active { transform: scale(0.95); }
.set-ico { font-size: 25px; line-height: 1; }
.set-section-h { grid-column: 1 / -1; font-weight: 800; display: inline-block; padding: 3px 10px; font-size: 12.5px; margin: 6px 0 -2px; justify-self: start; }
.set-section-h:first-child { margin-top: 0; }
.set-tile-cell { display: contents; }
body.no-video-ads #gachaFreeSpin, body.no-video-ads #winDouble, body.no-video-ads #overContinue, body.no-video-ads #adOfferOverlay { display: none !important; }
body.no-iap #storeIapRow, body.no-iap #storeSpecialHeader,
body.no-iap #storeHotHeader, body.no-iap #storeHotCard, body.no-iap #storeFeaturedCard,
body.no-iap #storePackageHeader, body.no-iap #storePackageCard { display: none !important; }
.set-tile-dim { opacity: 0.55; }
body.home-active #topbar, body.home-active #stockbar, body.home-active #board, body.home-active #bottombar, body.home-active #adspace { visibility: hidden; pointer-events: none; }
.audio-mute-all { width: 100%; margin-bottom: 6px; min-height: 56px; flex-direction: row; gap: 10px; }
.audio-mute-all .set-ico { font-size: 20px; }
.vol-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; }
.vol-ico { font-size: 18px; width: 22px; text-align: center; flex-shrink: 0; }
.vol-label { width: 52px; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.vol-slider { flex: 1 1 auto; height: 8px; appearance: none; -webkit-appearance: none; }
.vol-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; cursor: pointer; }
.vol-slider::-moz-range-thumb { width: 20px; height: 20px; cursor: pointer; }
.dialog.gacha { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; display: flex; flex-direction: column; align-items: center; padding: max(18px, env(safe-area-inset-top)) 14px calc(20px + var(--banner-h, 0px) + var(--home-nav-h, 76px)); overflow-y: auto; text-align: center; image-rendering: pixelated; }
.gacha-cat-h { font-size: 17px; }
.gacha-cell span { font-size: 13px; }
.gacha-back { position: absolute; top: calc(env(safe-area-inset-top) + 6px); left: 10px; z-index: 2; }
.dialog.gacha h1 { display: inline-block; padding: 5px 20px; margin: 2px 0 6px; }
.gacha-points { font-size: 16px; margin: 2px 0 12px; }
.gacha-random-hint { font-size: 12px; margin: 0 auto 6px; max-width: 320px; line-height: 1.35; }
.gacha-select-count { display: inline-block; font-weight: 900; font-size: 15px; padding: 3px 14px; margin: 0 0 8px; }
.missions-currency-wrap { position: absolute; top: calc(env(safe-area-inset-top) + 6px); right: 10px; z-index: 3; display: flex; flex-direction: row; align-items: center; gap: 6px; }
.missions-currency { margin: 0; }
.gacha-points b { font-size: 18px; padding: 2px 12px; }
.mission-bar { padding: 8px 12px; margin: 0 0 12px; font-size: 13px; text-align: left; }
.mission-bar .m-title { font-weight: 800; margin-bottom: 3px; }
.mission-bar .m-track { height: 8px; margin-top: 5px; overflow: hidden; }
.mission-bar .m-fill { height: 100%; transition: width 0.3s ease; }
.mission-bar.claimable { cursor: pointer; animation: missionClaimPulse 1.1s ease-in-out infinite; }
.mission-bar.claimable .m-claim-cta { font-weight: 800; }
.mission-bar.claimable:active { transform: scale(0.97); }
.reward-gold { font-weight: 800; padding: 1px 7px; display: inline-flex; align-items: center; gap: 3px; }
.reward-gold .coin-ico { width: 1em; height: 1em; vertical-align: -0.15em; }
#storePrizeBtn .reward-gold { padding: 0; }
.mission-section-h { font-weight: 800; display: inline-block; padding: 3px 10px; font-size: 13px; margin: 10px 0 6px; }
.mission-section-h:first-child { margin-top: 2px; }
.m-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.m-row-main { flex: 1 1 auto; min-width: 0; }
.m-row-title { font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.m-row-progress { font-size: 13px; opacity: 0.8; margin-top: 2px; }
.m-row.claimed .m-row-title { opacity: 0.55; }
.m-row-claim { flex: 0 0 auto; font-weight: 800; font-size: 12px; padding: 7px 12px; animation: missionClaimPulse 1.1s ease-in-out infinite; }
.m-row-claim:active { transform: scale(0.95); }
.m-row-done { flex: 0 0 auto; font-size: 15px; }
@keyframes missionClaimPulse {
  0%, 100% { }
  50% { }
}
.dialog.gacha #gachaDraw, .dialog.gacha #gachaClose { width: 100%; max-width: 360px; }
#gachaDraw:disabled { opacity: 0.5; }
.gacha-result { min-height: 0; margin: 6px 0; width: 100%; flex-shrink: 0; }
.gacha-result:not(:empty) { min-height: 72px; margin: 10px 0; }
.gacha-win-img { width: 60px; height: 60px; image-rendering: pixelated; object-fit: contain; display: block; margin: 0 auto 4px; animation: gachaWinPop .5s cubic-bezier(.2,1.7,.4,1); }
@keyframes gachaWinPop {
  0% { transform: scale(.2); }
  100% { transform: scale(1); }
}
.gacha-grid { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 12px 0 16px; width: 100%; }
.gacha-cat { width: 100%; max-width: 380px; margin: 2px 0 10px; }
.gacha-cat-h { font-size: 16px; display: inline-block; padding: 3px 12px; text-align: left; margin: 8px 2px 8px; }
.gacha-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gacha-cell { padding: 10px 4px; min-height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.gacha-cell img { width: 48px; height: 48px; image-rendering: pixelated; object-fit: contain; }
.gacha-cell span { font-size: 13px; }
.gacha-cell.locked { cursor: pointer; }
.gacha-cell.locked span { opacity: 0.75; }
.gacha-cell.owned { position: relative; cursor: pointer; }
.set-toggle { font-size: 10px; font-weight: 700; padding: 3px 9px; margin-top: 1px; cursor: pointer; }
.set-toggle:active { transform: scale(0.92); }
.char-runs { font-size: 9.5px; opacity: 0.7; margin-top: -2px; }
.gacha-cell.set-off span { opacity: 0.5; }
.gacha-pop { animation: gachaBigPop .6s cubic-bezier(.2,1.8,.4,1) !important; }
@keyframes gachaBigPop {
  0% { transform: scale(.3) rotate(-14deg); }
  55% { transform: scale(1.35) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
.gacha-got { font-size: 16px; font-weight: 800; display: inline-block; padding: 4px 16px; margin-top: 4px; animation: gachaGot .5s ease-out; }
@keyframes gachaGot {
  from { opacity: 0; transform: translateY(8px) scale(.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.gacha-redraw { margin-top: 10px; width: 100%; animation: gachaGot .5s ease-out; }
.reveal-overlay { z-index: 60; overflow: hidden; }
.dialog.reveal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 18px 22px calc(24px + var(--banner-h, 0px)); overflow-y: auto; z-index: 1; }
.reveal-stage { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); width: min(70vw, 340px); height: min(70vw, 340px); display: flex; align-items: center; justify-content: center; z-index: 1; }
.reveal-glow { position: absolute; inset: 0; margin: auto; z-index: 0; pointer-events: none; animation: revealGlowPulse 2.6s ease-in-out infinite; }
@keyframes revealGlowPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.12); opacity: 1; }
}
.reveal-parallax { position: absolute; inset: -16%; z-index: 0; pointer-events: none; overflow: hidden; transition: transform 0.06s linear; }
.reveal-fx { position: absolute; inset: -25%; z-index: 0; pointer-events: none; }
.reveal-spark { position: absolute; width: 10px; height: 10px; clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%); animation: revealSparkTwinkle 1.6s ease-in-out infinite; }
.reveal-spark.s1 { top: 18%; left: 16%; width: 14px; height: 14px; animation-delay: 0s; }
.reveal-spark.s2 { top: 28%; left: 78%; width: 9px; height: 9px; animation-delay: 0.3s; }
.reveal-spark.s3 { top: 62%; left: 10%; width: 8px; height: 8px; animation-delay: 0.6s; }
.reveal-spark.s4 { top: 68%; left: 84%; width: 12px; height: 12px; animation-delay: 0.9s; }
.reveal-spark.s5 { top: 10%; left: 52%; width: 7px; height: 7px; animation-delay: 1.1s; }
.reveal-spark.s6 { top: 78%; left: 46%; width: 10px; height: 10px; animation-delay: 0.45s; }
@keyframes revealSparkTwinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.6) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(25deg); }
}
.reveal-img { position: relative; z-index: 1; width: min(24vw, 108px); height: min(24vw, 108px); image-rendering: pixelated; object-fit: contain; }
.reveal-info { display: flex; flex-direction: column; align-items: center; width: 100%; z-index: 1; }
.reveal-got { font-size: 18px; font-weight: 800; display: inline-block; padding: 6px 20px; margin: 0 0 26px; text-align: center; animation: gachaGot .5s ease-out; min-height: 1.4em; }
.reveal-again, .reveal-close { width: min(320px, 100%); }
.char-buy-btn { width: min(320px, 100%); }
.buy-lock-ico { width: 1.1em; height: 1.1em; vertical-align: -0.2em; image-rendering: pixelated; margin-right: 2px; }
@keyframes charBuyBtnRise {
  from { transform: translateY(70px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.char-buy-btn.rise { animation: charBuyBtnRise 0.45s cubic-bezier(.2,.8,.3,1); }
.home-overlay { flex-direction: column; align-items: stretch; justify-content: space-between; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.home-overlay.home-overlay-leaving { opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.home-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; }
.home-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 6px; pointer-events: none; }
.home-logo { font-size: clamp(22px, 7vw, 34px); font-weight: 800; }
.home-logo-sub { font-size: clamp(13px, 4vw, 19px); font-weight: 700; margin-top: 2px; opacity: 0.92; }
@keyframes homeSpiderBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
body:not(.home-active) .home-nav { display: none; }
.home-nav.home-nav-leaving { display: grid !important; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
body:has(#settingsOverlay.show, #parentalSubOverlay.show, #communitySubOverlay.show, #langSubOverlay.show,
  #orientSubOverlay.show, #audioSubOverlay.show, #creditsOverlay.show, #howOverlay.show,
  #charDetailOverlay.show, #charBuyOverlay.show, #gachaRevealOverlay.show, #rankOverlay.show,
  .god-panel.show) .home-nav { display: none; }
.home-nav { position: fixed; left: 0; right: 0; bottom: var(--banner-h, 0px); z-index: 150; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 6px 10px; }
.home-nav-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; padding: 8px 2px; cursor: pointer; opacity: 0.88; transition: transform 0.08s ease, opacity 0.08s ease; }
.nav-badge-dot { position: absolute; top: 4px; right: 22%; width: 9px; height: 9px; display: none; }
.home-nav-btn.has-badge .nav-badge-dot { display: block; }
.home-nav-btn.has-badge .home-nav-ico { animation: navBellShake 1.8s ease-in-out infinite; }
@keyframes navBellShake {
  0%, 80%, 100% { transform: rotate(0deg); }
  82% { transform: rotate(-14deg); }
  84% { transform: rotate(12deg); }
  86% { transform: rotate(-10deg); }
  88% { transform: rotate(8deg); }
  90% { transform: rotate(-4deg); }
  92% { transform: rotate(0deg); }
}
.home-nav-btn:active { transform: scale(0.88); opacity: 1; }
.home-nav-ico { font-size: 22px; line-height: 1; position: relative; transition: transform 0.22s cubic-bezier(.34,1.56,.64,1); }
.home-nav-ico img, .home-nav-play-ico img { transition: transform 0.08s ease; }
body:has(#gachaOverlay.show) #navCollection .home-nav-ico,
body:has(#missionsOverlay.show) #navMissions .home-nav-ico,
body:has(#villageDecorOverlay.show) #navStats .home-nav-ico, 
body:has(#statsOverlay.show) #navStats .home-nav-ico,
body:has(#storeOverlay.show) #navStore .home-nav-ico { transform: translateY(-11px) rotate(-10deg) scale(1.18); }
body:has(#missionsOverlay.show) #navMissions.has-badge .home-nav-ico,
body:has(#storeOverlay.show) #navStore.has-badge .home-nav-ico { animation: none; }
body:has(#gachaOverlay.show) #navCollection .home-nav-ico::before,
body:has(#missionsOverlay.show) #navMissions .home-nav-ico::before,
body:has(#villageDecorOverlay.show) #navStats .home-nav-ico::before, 
body:has(#statsOverlay.show) #navStats .home-nav-ico::before,
body:has(#storeOverlay.show) #navStore .home-nav-ico::before { content: ""; position: absolute; inset: -7px; z-index: -1; }
.home-nav-play { opacity: 1; }
.home-nav-play:active { transform: scale(0.9); }
.home-nav-play-ico-wrap { position: relative; display: inline-block; transition: transform 0.22s cubic-bezier(.34,1.56,.64,1); }
body:has(#gameSelectOverlay.show) #navPlay .home-nav-play-ico-wrap { transform: translateY(-11px) rotate(-10deg) scale(1.18); }
body:has(#gameSelectOverlay.show) #navPlay .home-nav-play-ico-wrap::before { content: ""; position: absolute; inset: -7px; z-index: -1; }
.home-nav-play-ico { width: clamp(30px, 9vw, 40px); image-rendering: pixelated; animation: homeSpiderBob 2.2s ease-in-out infinite; }
#statsOverlay.show { z-index: 60; }
.stats-donuts { display: flex; gap: 12px; width: 100%; max-width: 380px; margin: 6px 0 4px; }
.stats-donut-card { flex: 1; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stats-donut { width: 76px; height: 76px; position: relative; display: flex; align-items: center; justify-content: center; }
.stats-donut::before { content: ""; position: absolute; inset: 10px; }
.stats-donut span { position: relative; z-index: 1; font-size: 12px; font-weight: 800; text-align: center; line-height: 1.3; }
.sd-label { font-size: 12px; opacity: 0.75; }
.stats-grid { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 380px; margin-top: 6px; }
.stats-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.stats-row .sr-label { font-size: 13.5px; opacity: 0.85; }
.stats-row .sr-value { font-size: 15px; font-weight: 800; padding: 2px 10px; }
.stats-highlights { display: flex; gap: 10px; width: 100%; max-width: 380px; margin: 4px 0 8px; }
.stats-hi-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; }
.stats-hi-card .shi-ico { font-size: 20px; line-height: 1; }
.stats-hi-card .shi-val { font-size: 16px; font-weight: 900; padding: 1px 10px; display: inline-block; }
.stats-hi-card .shi-label { font-size: 10px; opacity: 0.8; text-align: center; line-height: 1.2; }
.stats-detail-h { width: 100%; max-width: 380px; font-size: 11.5px; font-weight: 800; margin: 4px 0 2px; }
.stats-grid-compact { gap: 4px; }
.stats-grid-compact .stats-row { padding: 7px 14px; }
.stats-grid-compact .sr-label { font-size: 12px; opacity: 0.75; }
.stats-grid-compact .sr-value { font-size: 12.5px; font-weight: 700; padding: 1px 9px; }
.dialog.gacha.castle-dialog { padding: 0; overflow: hidden; }
.castle-room { position: absolute; inset: 0; overflow: hidden; }
.castle-room { --roomSkew: 45deg; --apex: 0%; --marginX: 0%; }
.castle-ramp-plank { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1; }
.castle-shelf { position: absolute; right: 5%; top: 45%; width: 20%; max-width: 80px; padding: 10px 0 8px; cursor: pointer; transform: skewY(var(--roomSkew)); transition: transform 0.15s; z-index: 1; }
.castle-shelf:hover { transform: skewY(var(--roomSkew)) translateY(-2px); }
.castle-shelf:active { transform: skewY(var(--roomSkew)) scale(0.97); }
.castle-shelf::before { content: ""; position: absolute; top: 0; left: -6%; right: -6%; height: 10px; }
.castle-shelf::after { content: ""; position: absolute; bottom: 0; left: -3%; right: -3%; height: 8px; }
.castle-shelf-tier { position: relative; overflow: hidden; padding: 6% 5%; display: flex; gap: 3%; justify-content: center; align-items: flex-end; margin-bottom: 8%; }
.castle-trinket { position: relative; width: 20%; max-width: 22px; image-rendering: pixelated; object-fit: contain; transform: skewY(calc(-1 * var(--roomSkew))); }
.castle-side-table { position: absolute; left: 20%; top: 56%; width: 15%; max-width: 56px; aspect-ratio: 1; z-index: 1; }
.castle-side-table img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.castle-hint { position: absolute; right: 8%; top: 50%; font-size: 10px; font-weight: 800; padding: 3px 8px; animation: castleHintBob 1.8s ease-in-out infinite; pointer-events: none; z-index: 2; }
@keyframes castleHintBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.castle-room h1.castle-plaque { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); margin: 0; z-index: 3; white-space: nowrap; transition: opacity 0.15s; }
.castle-hud-right { position: absolute; top: calc(env(safe-area-inset-top) + 6px); right: 10px; z-index: 3; display: flex; flex-direction: row; align-items: center; gap: 6px; }
.castle-share-btn { position: absolute; top: calc(env(safe-area-inset-top) + 6px); left: 10px; z-index: 3; }
.castle-deco-cats, .castle-deco-marker, .castle-deco-bar { display: none; }
.castle-room.deco-mode .castle-plaque { display: none; }
.castle-room.deco-mode .castle-deco-cats,
.castle-room.deco-mode .castle-deco-marker,
.castle-room.deco-mode .castle-deco-bar { display: flex; }
.castle-deco-cats { position: absolute; bottom: calc(58px + var(--banner-h, 0px) + var(--home-nav-h, 76px)); left: 0; right: 0; z-index: 5; justify-content: center; gap: 2.5%; padding: 0 4%; }
.castle-deco-cat { width: 15%; max-width: 52px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; }
.castle-deco-cat .cdc-ico { width: 72%; height: 72%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.castle-deco-cat .cdc-name { display: none; }
.castle-deco-marker { position: fixed; z-index: 5; align-items: center; justify-content: center; font-size: 26px; pointer-events: none; animation: castleMarkerBob 0.9s ease-in-out infinite; transition: left 0.2s ease, top 0.2s ease; }
@keyframes castleMarkerBob {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 6px)); }
}
.castle-deco-bar { position: absolute; left: 0; right: 0; z-index: 5; bottom: calc(10px + var(--banner-h, 0px) + var(--home-nav-h, 76px)); align-items: center; justify-content: center; gap: 10px; }
.castle-deco-name { font-size: 12.5px; font-weight: 800; max-width: 34vw; text-align: center; line-height: 1.2; }
.castle-deco-select { font-weight: 800; font-size: 13px; padding: 9px 20px; cursor: pointer; white-space: nowrap; }
.castle-deco-select:active { transform: scale(0.97); }
.castle-deco-select:disabled { opacity: 0.5; cursor: default; }
.castle-deco-select.equipped:disabled { opacity: 1; }
.castle-deco-panel { display:none; position:absolute; z-index:6; left:8px; right:8px; bottom:calc(8px + var(--banner-h,0px) + var(--home-nav-h,76px)); padding:8px; }
.castle-room.deco-mode .castle-deco-panel { display:block; }
.castle-room.deco-mode > .castle-deco-cats,
.castle-room.deco-mode > .castle-deco-bar,
.castle-room.deco-mode > .castle-deco-marker { display:none; }
.castle-deco-panel .castle-deco-cats { position:static; display:flex; justify-content:center; gap:5px; padding:0 0 7px; }
.castle-deco-panel .castle-deco-cat { width:42px; height:34px; aspect-ratio:auto; }
.castle-deco-panel .castle-deco-cat .cdc-ico { width:25px; height:25px; }
.castle-deco-tray { display:flex; gap:7px; overflow-x:auto; overflow-y:hidden; padding:2px 2px 7px; scrollbar-width:none; scroll-snap-type:x proximity; }
.castle-deco-tray::-webkit-scrollbar { display:none; }
.castle-deco-card { position:relative; flex:0 0 78px; min-width:0; height:70px; padding:4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; scroll-snap-align:center; }
.castle-deco-card img { width:56px; height:45px; object-fit:contain; image-rendering:pixelated; }
.castle-deco-card span { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; font-weight:800; }
.castle-deco-card.previewing { transform:translateY(-1px); }
.castle-deco-card.equipped::after { content:"✓"; position:absolute; margin: -48px 0 0 54px; width:17px; height:17px; font-size:11px; line-height:17px; font-weight:900; }
.castle-deco-panel .castle-deco-bar { position:static; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 2px 0; }
.castle-deco-copy { min-width:0; flex:1; text-align:left; }
.castle-deco-panel .castle-deco-name { max-width:none; font-size:12px; text-align:left; }
.castle-deco-note { margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; font-weight:700; }
.castle-deco-panel .castle-deco-select { flex:0 0 auto; padding:9px 13px; font-size:11px; }
@media (max-height:700px) {
  .castle-deco-card { height:61px; }
  .castle-deco-card img { height:36px; }
  .castle-deco-panel { padding:6px; }
  .castle-deco-panel .castle-deco-cats { padding-bottom:4px; }
}
.room-studio { display:none; position:absolute; inset:0; z-index:20; box-sizing:border-box; padding:max(8px,env(safe-area-inset-top)) 8px calc(8px + var(--banner-h,0px) + var(--home-nav-h,76px)); flex-direction:column; gap:7px; overflow:hidden; }
.castle-room.studio-mode .room-studio { display:flex; }
.castle-room.studio-mode > .castle-ramp-plank,
.castle-room.studio-mode > .castle-shelf,
.castle-room.studio-mode > .castle-hint,
.castle-room.studio-mode > .castle-side-table,
.castle-room.studio-mode > .castle-plaque,
.castle-room.studio-mode > .castle-share-btn,
.castle-room.studio-mode > .castle-hud-right,
.castle-room.studio-mode > .castle-deco-panel { display:none!important; }
.rs-header { flex:0 0 auto; min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 3px; }
.rs-heading { min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.rs-heading strong { font-size:15px; font-weight:950; }
.rs-heading span { margin-top:3px; font-size:9px; font-weight:800; }
.rs-header-actions { display:flex; align-items:center; gap:5px; }
.rs-coin { padding:6px 8px; font-size:10px; font-weight:950; }
.rs-round-btn { width:31px; height:31px; padding:0; font-size:14px; font-weight:950; }
.rs-stage { position:relative; flex:1 1 auto; min-height:235px; overflow:hidden; isolation:isolate; }
.rs-wall,.rs-floor { position:absolute; inset:0; }
.rs-wall-left { clip-path:polygon(0 8%,50% 0,50% 56%,0 43%); }
.rs-wall-right { clip-path:polygon(50% 0,100% 8%,100% 43%,50% 56%); }
.rs-floor { clip-path:polygon(0 43%,50% 56%,100% 43%,100% 100%,0 100%); }
.rs-floor::before,.rs-floor::after { content:""; position:absolute; left:49.7%; top:55%; width:2px; height:50%; transform-origin:top; }
.rs-floor::before { transform:rotate(61deg); }
.rs-floor::after { transform:rotate(-61deg); }
.rs-placed-items { position:absolute; inset:0; z-index:5; }
.rs-placed-item { position:absolute; display:block; padding:0; transform:translate(-50%,-100%) scaleX(var(--rs-flip,1)); transform-origin:50% 100%; touch-action:none; user-select:none; cursor:grab; image-rendering:pixelated; }
.rs-placed-item:active { cursor:grabbing; }
.rs-empty { position:absolute; z-index:4; left:50%; top:68%; transform:translate(-50%,-50%); width:min(78%,300px); padding:10px 13px; display:flex; flex-direction:column; align-items:center; text-align:center; pointer-events:none; }
.rs-empty b { font-size:11px; }
.rs-empty span { margin-top:3px; font-size:8px; }
.rs-empty.hidden { display:none; }
.rs-workbench { flex:0 0 auto; min-height:153px; padding:7px; }
.rs-category-strip { display:flex; gap:5px; overflow-x:auto; padding:0 0 6px; scrollbar-width:none; }
.rs-category-strip::-webkit-scrollbar,.rs-item-strip::-webkit-scrollbar { display:none; }
.rs-category-btn { flex:0 0 auto; padding:6px 10px; font-size:9px; font-weight:900; }
.rs-item-strip { min-height:61px; display:flex; gap:7px; overflow-x:auto; padding:1px 1px 7px; scrollbar-width:none; }
.rs-item-card { position:relative; flex:0 0 86px; height:59px; padding:3px; display:flex; align-items:center; gap:3px; }
.rs-item-card img { width:48px; height:48px; object-fit:contain; image-rendering:pixelated; }
.rs-item-card span { flex:1; overflow:hidden; font-size:8px; line-height:1.15; font-weight:900; }
.rs-item-card em { position:absolute; right:3px; top:3px; padding:1px 3px; font-size:8px; font-style:normal; font-weight:900; }
.rs-item-card.locked { opacity:.55; }
.rs-item-card:not(.locked):active { transform:translateY(1px); }
.vd-theme-card { flex-direction:column; height:auto; min-height:70px; padding:6px 4px; gap:2px; }
.vd-theme-card img { width:34px; height:34px; }
.vd-theme-card span { flex:none; text-align:center; }
.vd-theme-progress { font-size:7px; opacity:.65; font-weight:800; }
.vd-theme-action { justify-content:center; }
.vd-theme-action span { flex:none; text-align:center; font-size:9px; }
.rs-edit-row { min-height:42px; padding-top:5px; display:flex; align-items:center; gap:6px; }
.rs-edit-copy { min-width:90px; flex:1; display:flex; flex-direction:column; line-height:1.12; }
.rs-edit-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:950; }
.rs-edit-copy span { margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; font-weight:750; }
.rs-edit-actions { display:flex; gap:3px; }
.rs-edit-actions button { width:29px; height:29px; padding:0; font-size:15px; font-weight:950; }
.rs-edit-actions button.danger { box-shadow-color:#ac5b54; }
.rs-edit-actions button:disabled { opacity:.28; }
.rs-reset-btn { flex:0 0 auto; padding:8px 10px; font-size:9px; font-weight:950; }
@media (max-width:700px) {
  .rs-edit-copy { display:none; }
  .rs-edit-row { justify-content:space-between; }
  .rs-edit-actions button { width:31px; }
  .rs-reset-btn { padding-inline:8px; }
}
@media (max-height:700px) {
  .room-studio { gap:5px; }
  .rs-stage { min-height:185px; }
  .rs-workbench { min-height:142px; padding:5px; }
  .rs-item-card { height:51px; }
  .rs-item-card img { width:42px; height:42px; }
  .rs-edit-row { min-height:36px; }
  .rs-empty { top:66%; }
}
.village-decor-room .room-studio { display: flex; }
.vd-stage { position: relative; overflow: hidden; flex: 0 0 auto; width: min(100%, calc((100dvh - 300px) * 128 / 120)); aspect-ratio: 128 / 120; min-height: 0; margin-inline: auto; }
.vd-sky { position: absolute; inset: 0; }
.vd-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.vd-home-layer { position: fixed; inset: auto; left: 0; width: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.vd-home-item { cursor: default; }
.store-desc { opacity: 0.75; font-size: 14px; text-align: left; margin: 4px 0 14px; line-height: 1.4; }
.store-dialog .store-sec-h { width: 100%; max-width: 380px; font-size: 14px; text-align: left; margin: 16px 2px 8px; }
.store-dialog .store-sec-h:first-of-type { margin-top: 2px; }
.store-card { width: 100%; max-width: 380px; padding: 14px; margin: 0 0 12px; text-align: left; position: relative; }
.store-card-badge { position: absolute; top: -10px; left: 12px; font-size: 11px; font-weight: 800; padding: 3px 8px; }
.store-card-art { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.store-card-art img { width: 60px; height: 60px; image-rendering: pixelated; object-fit: contain; }
.store-card-art-emoji { font-size: 40px; text-align: center; line-height: 1; }
.store-card-art .card-scene-zzz { top: -6px; font-size: 16px; }
.store-gift-idle { animation: giftIdleWiggle 1.4s ease-in-out infinite; }
@keyframes giftIdleWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}
.prize-draw-backdrop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease, background 0.2s ease; pointer-events: none; }
.prize-draw-backdrop.show { opacity: 1; }
.prize-draw-big { width: 42vw; max-width: 220px; image-rendering: pixelated; image-rendering: crisp-edges; transform: scale(0.55); transition: transform 0.3s cubic-bezier(.2, .8, .3, 1); }
.prize-draw-backdrop.show .prize-draw-big { transform: scale(1); }
.store-card-hot .store-card-art img { animation: hotArtPulse 1.6s ease-in-out infinite; }
@keyframes hotArtPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.store-card-hot .store-card-badge { animation: missionClaimPulse 1s ease-in-out infinite; }
.store-card-title { font-size: 15px; font-weight: 800; text-align: center; margin-bottom: 4px; }
.store-card-desc { opacity: 0.75; font-size: 14px; line-height: 1.4; margin: 0 0 10px; text-align: center; }
.store-card-contents { display: flex; justify-content: center; gap: 8px; margin: 0 0 10px; }
.store-card-contents img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; padding: 4px; }
.store-flockbox { position: relative; height: 86px; margin: 0 0 10px; overflow: hidden; }
.store-flockbox img { position: absolute; bottom: 8px; image-rendering: pixelated; width: 38px; height: 38px; object-fit: contain; }
.store-flockbox .fb-duck { animation: flockParade 8s linear infinite -2.2s, flockBob .5s ease-in-out infinite; }
.store-flockbox .fb-dkl1 { width: 26px; height: 26px; bottom: 10px; animation: flockParade 8s linear infinite -1.6s, flockBob .45s ease-in-out infinite -0.1s; }
.store-flockbox .fb-dkl2 { width: 26px; height: 26px; bottom: 10px; animation: duckWander 8s linear infinite .4s backwards, flockBob .4s ease-in-out infinite -0.15s; }
.store-flockbox .fb-dkl3 { width: 26px; height: 26px; bottom: 10px; animation: flockParade 8s linear infinite -0.9s, flockBob .45s ease-in-out infinite -0.35s; }
.store-flockbox .fb-chick { width: 30px; height: 30px; animation: chickWander 6.5s ease-in-out infinite; }
.store-chickbox { height: 50px; }
@keyframes flockParade {
  0% { }
  100% { }
}
@keyframes duckWander {
  0% { }
  25% { }
  50% { }
  75% { }
  100% { }
}
@keyframes flockBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes chickWander {
  0% { transform: scaleX(1) translateY(0); }
  44% { transform: scaleX(1) translateY(-2px); }
  50% { transform: scaleX(-1) translateY(0); }
  94% { transform: scaleX(-1) translateY(-2px); }
  100% { transform: scaleX(1) translateY(0); }
}
.btn-badge-wrap { position: relative; }
.store-btn-badge { top: -3px; right: 8px; display: none; }
.store-btn-badge.show { display: block; }
.store-pkg-scene { position: relative; height: 86px; margin: 0 0 10px; overflow: hidden; }
.store-pkg-scene .pkg-bg { position: absolute; left: 30%; top: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; opacity: 0.85; }
.store-pkg-scene .pkg-char { position: absolute; left: 70%; margin-left: -20px; bottom: 8px; width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; z-index: 1; }
.store-pkg-scene .card-scene-zzz { top: 22%; }
.store-pkg-scene .pkg-duo { position: absolute; bottom: 10px; width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; animation: flockBob .6s ease-in-out infinite; }
.store-pkg-scene .pkg-duo-0 { left: 26%; margin-left: -23px; }
.store-pkg-scene .pkg-duo-1 { left: 74%; margin-left: -23px; animation-delay: -0.3s; }
.wishlist-banner { padding: 10px 12px; margin: 4px 0 14px; text-align: center; }
.wl-text { display: inline-block; padding: 3px 12px; font-weight: 800; font-size: 13.5px; margin-bottom: 8px; }
.wl-icons { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.wl-icons img { width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; opacity: 0.85; }
.dg-countdown { margin: 0 0 10px; padding: 6px 10px; text-align: center; font-size: 13px; }
.store-card-buy { display: block; margin: 0 auto; font-weight: 800; padding: 8px 18px; font-size: 14px; cursor: pointer; min-width: 120px; }
.store-card-buy:active { transform: scale(0.97); }
.store-card-buy:disabled { opacity: 0.55; }
.store-card-buy s { opacity: 0.6; margin-right: 6px; font-weight: 600; font-size: 11.5px; }
.store-card-buy-wide { display: block; width: 100%; }
.store-daily-double { margin-top: 6px; padding: 5px 14px; font-size: 12px; min-width: 0; opacity: 0.92; }
.store-price-num { font-size: 1.3em; }
.store-featured { padding-bottom: 8px; }
.store-feat-row { display: flex; gap: 10px; justify-content: space-between; }
.store-feat-item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.store-feat-item img { width: 48px; height: 48px; image-rendering: pixelated; object-fit: contain; animation: featBounce 1.8s ease-in-out infinite; }
.store-feat-item:nth-child(2) img { animation-delay: 0.3s; }
.store-feat-item:nth-child(3) img { animation-delay: 0.6s; }
@keyframes featBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.store-feat-item .card-scene-zzz { top: -14px; font-size: 15px; }
.store-feat-buy { font-weight: 800; padding: 4px 10px; font-size: 11.5px; cursor: pointer; }
.store-feat-buy:disabled { opacity: 0.55; }
.store-card.store-featured .store-sec-h { margin: 10px 2px 0; }
.rank-dialog .how-body { opacity: 0.75; margin-top: 10px; }
.char-detail-overlay { padding: 0; }
.char-detail-fixed-back { position: absolute; top: max(12px, env(safe-area-inset-top)); z-index: 5; left: 12px; }
.char-detail-hscroll { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.char-detail-hscroll::-webkit-scrollbar { display: none; }
.cd-slot { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; overflow: hidden; }
.cd-slot-cur { overflow: visible; }
.cd-slot-peek { display: flex; align-items: flex-start; justify-content: center; padding: 92px 0 0; }
.cd-slot-peek .char-detail-wrap { width: min(84vw, 340px); margin: 0 auto; }
.cd-slot-peek .char-detail-bio { display: none; }
.char-detail-scroll { height: 100%; overflow-y: auto; padding: 92px 0 calc(88px + var(--banner-h, 0px)); }
.char-detail-wrap { width: min(84vw, 340px); margin: 0 auto; }
.char-detail { position: relative; width: 100%; padding: 18px; perspective: 700px; }
.char-detail-fixed-buy { position: absolute; left: 50%; bottom: calc(14px + var(--banner-h, 0px)); transform: translateX(-50%); width: min(84vw, 340px); margin: 0; z-index: 5; }
.char-fav-btn { font-size: 18px; }
.char-detail-stage { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 54px; }
.char-detail-parallax { position: absolute; inset: -22%; z-index: 0; pointer-events: none; transition: transform 0.06s linear; }
.char-detail-name { position: absolute; top: 10px; left: 10px; z-index: 1; font-size: 14px; font-weight: 800; padding: 6px 12px; }
.char-detail-img { position: relative; z-index: 1; width: 46%; max-width: 130px; image-rendering: pixelated; object-fit: contain; animation: charDetailPop .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes charDetailPop {
  0% { transform: scale(.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes charDetailIdle {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4%) scale(1.015); }
}
.char-detail-img.char-detail-img-joker-trick { width: 36%; }
.char-detail-buy { margin: 0; width: 100%; }
.char-detail-bio { margin: 10px 0 0; padding: 12px 16px; font-size: 13px; line-height: 1.55; text-align: center; }
.char-detail-bio-lg { padding: 18px 18px; font-size: 19px; line-height: 1.65; }
.char-detail-nav { position: absolute; top: 50%; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; z-index: 4; pointer-events: none; }
.char-nav-btn { pointer-events: auto; }
.char-detail-nav-mid { display: flex; align-items: center; gap: 6px; pointer-events: auto; }
#charDetailNext .ico-img, #charBuyNext .ico-img, #castleArrRight .ico-img, #gsNext .ico-img { transform: scaleX(-1); }
.win-points { font-size: 15px; font-weight: 800; margin: -6px 0 12px; }
.win-points.revealing { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 96px; }
.wp-rows { display: flex; flex-direction: column; gap: 5px; width: min(252px, 76vw); }
.wp-row { display: flex; align-items: center; gap: 8px; padding: 5px 13px; opacity: 0; transform: translateY(8px) scale(.8); transform-origin: 50% 50%; }
.wp-row.show { opacity: 1; transform: none; }
.wp-row .wp-ico { font-size: 16px; line-height: 1; }
.wp-row .wp-lbl { font-size: 13px; font-weight: 800; flex: 1; text-align: left; }
.wp-row .wp-val { font-size: 18px; font-weight: 900; }
.wp-row.wp-pump { animation: wpPump .42s cubic-bezier(.18,1.7,.4,1); }
@keyframes wpPump {
  0% { transform: scale(1.5); }
  58% { transform: scale(.93); }
  100% { transform: scale(1); }
}
.wp-total { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; opacity: 0; transform: scale(.6); transition: opacity .18s ease, transform .18s ease; }
.wp-total.show { opacity: 1; transform: none; }
.wp-total .wp-total-num { font-size: clamp(32px, 11vw, 50px); font-weight: 900; line-height: 1; }
.wp-total .wp-total-suffix { font-size: 16px; font-weight: 800; }
.wp-total .gift-ico { width: 1.35em; height: 1.35em; vertical-align: -0.28em; }
.wp-total.wp-boom { animation: wpBoom .62s cubic-bezier(.2,1.8,.35,1); }
@keyframes wpBoom {
  0% { transform: scale(2.05); }
  44% { transform: scale(.86); }
  70% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.win-dialog.shake { animation: winShake .62s cubic-bezier(.36,.07,.19,.97); }
@keyframes winShake {
  0%,100% { transform: translate(0,0) rotate(0); }
  10% { transform: translate(-8px,4px) rotate(-1.5deg); }
  22% { transform: translate(9px,-5px) rotate(1.5deg); }
  36% { transform: translate(-7px,5px) rotate(-1deg); }
  52% { transform: translate(7px,-4px) rotate(1deg); }
  68% { transform: translate(-5px,3px) rotate(-.6deg); }
  84% { transform: translate(4px,-2px) rotate(.4deg); }
}
.wp-flash { position: fixed; inset: 0; z-index: 99; pointer-events: none; animation: wpFlash .42s ease-out forwards; }
@keyframes wpFlash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}
.wp-spark { position: fixed; width: 8px; height: 8px; z-index: 100; pointer-events: none; animation: wpSpark .55s ease-out forwards; }
@keyframes wpSpark {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}
.diff-note { font-size: 14px; opacity: 0.78; margin: 7px 2px 0; line-height: 1.45; }
.dialog.how { position: relative; }
.how-emoji { font-size: 64px; line-height: 1; margin: 6px 0 8px; }
.rate-emoji { font-size: 56px; line-height: 1; margin: 6px 0 8px; }
.remind-emoji { font-size: 56px; line-height: 1; margin: 6px 0 8px; }
.how-img { width: 100%; image-rendering: pixelated; margin: 0 0 10px; display: block; }
.how-body { font-size: 15px; line-height: 1.5; opacity: 0.92; min-height: 4.2em; margin: 6px 0 12px; }
.credits-dialog { overflow-y: auto; max-height: 82vh; }
.credits-mascot { width: 72px; height: 72px; image-rendering: pixelated; object-fit: contain; margin: 4px auto 2px; display: block; }
.credits-titlecard { text-align: center; font-weight: 800; opacity: 0.85; font-size: 13px; margin: 2px 0 14px; line-height: 1.5; white-space: pre-line; }
.credits-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; text-align: left; }
.credits-section-h { font-size: 13px; display: inline-block; padding: 3px 10px; margin: 10px 0 2px; opacity: 1; }
.credits-section-h:first-child { margin-top: 0; }
.credits-entry { padding: 8px 10px; font-size: 12.5px; line-height: 1.45; opacity: 0.85; }
.credits-entry b { opacity: 1; }
.build-row { display: flex; align-items: center; gap: 8px; opacity: 0.75; font-size: 12px; margin: -4px 0 12px; }
.build-copy-btn { font-size: 13px; padding: 3px 8px; cursor: pointer; line-height: 1.4; }
.build-copy-btn:active { transform: scale(0.92); }
.build-update-btn { font-size: 11.5px; font-weight: 700; padding: 3px 10px; cursor: pointer; line-height: 1.6; margin-left: auto; }
.build-update-btn:active { transform: scale(0.94); }
.build-update-btn:disabled { opacity: 0.6; cursor: default; }
.settings-update-tile { position: relative; }
.settings-update-tile small { margin-left: auto; font-size: 11px; font-weight: 700; white-space: nowrap; }
.how-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.how-dots .dot { width: 7px; height: 7px; }
.how-nav { display: flex; gap: 8px; }
.how-nav .diff { margin-top: 0; }
.how-close { position: absolute; top: 10px; right: 12px; font-size: 18px; opacity: 0.7; cursor: pointer; }
@media (orientation: landscape) {
  :root { --card-w: min(7vw, 70px); }
}
.god-fab { position: fixed; left: 10px; bottom: calc(var(--home-nav-h, 76px) + var(--banner-h, 0px) + 8px); width: 44px; height: 44px; font-size: 21px; line-height: 1; z-index: 140; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.god-fab:active { transform: scale(0.92); }
.god-panel { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 141; padding: max(54px, calc(env(safe-area-inset-top) + 44px)) 16px calc(28px + var(--banner-h, 0px) + var(--home-nav-h, 76px)); display: none; flex-direction: column; gap: 8px; overflow-y: auto; }
.god-panel.show { display: flex; }
.god-panel > *:not(.gacha-back) { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; }
.god-title { font-weight: 800; font-size: 15px; text-align: center; margin: 6px auto 2px; }
.god-panel button { padding: 12px 12px; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.god-panel button:active { transform: scale(0.97); }
.god-panel .god-close { text-align: center; }
.god-toast { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); padding: 10px 18px; font-weight: 800; font-size: 14px; z-index: 200; pointer-events: none; animation: godToast 1.4s ease forwards; }
@keyframes godToast {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  15%,75% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}
.sponsor-toast { position: fixed; left: 50%; bottom: 14%; transform: translateX(-50%) translateY(10px); max-width: 86vw; text-align: center; padding: 10px 16px; font-weight: 700; font-size: 13px; line-height: 1.35; z-index: 300; pointer-events: none; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; }
.sponsor-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.rank-pill { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-weight: 800; font-size: 12.5px; padding: 4px 10px; margin: 2px 0 6px; }
.rate-banner { display: flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; width: 100%; font-weight: 800; font-size: 13px; padding: 8px 10px; margin: 6px 0; position: relative; }
.win-rate-banner { margin: 4px 0 10px; }
.rate-thumb { padding: 4px 10px; font-size: 14px; cursor: pointer; }
.rate-close { position: absolute; right: 6px; top: 6px; opacity: 0.6; font-size: 12px; cursor: pointer; padding: 2px 4px; }
#village { position: fixed; z-index: 3; pointer-events: none; overflow: visible; }
body.room-active #village { z-index: 55; }
.villager { position: absolute; bottom: 0; width: 8.6vw; aspect-ratio: 11 / 14; transform-origin: 50% 100%; }
.villager.cat { width: 8.6vw; aspect-ratio: 11 / 11; }
.villager.room-dup-hidden { display: none !important; }
.villager.room-off-hidden { display: none !important; }
.villager-fly { position: fixed; z-index: 130; pointer-events: none; object-fit: contain; image-rendering: pixelated; transform-origin: 50% 50%; }
.villager-fly.hop { animation: villagerHop .8s both; }
@keyframes villagerHop {
  0% { transform: translate(0,0) scale(1); animation-timing-function: ease-out; }
  32% { transform: translate(calc(var(--dx) * 0.34), -46px) scale(calc((1 + var(--s)) / 2)); animation-timing-function: ease-in; }
  100% { transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
}
.vflip { width: 100%; height: 100%; transform-origin: 50% 100%; }
.villager .vsprite { width: 100%; height: 100%; object-fit: contain; object-position: bottom; image-rendering: pixelated; transform-origin: 50% 100%; }
.villager[data-kind="frog"] .vsprite { animation: idleFrogHop 1.7s ease-in-out infinite; }
@keyframes idleFrogHop {
  0%, 55%, 100% { transform: translateY(0) scaleY(1); }
  62% { transform: translateY(2%) scaleY(0.86); }
  74% { transform: translateY(-28%) scaleY(1.08); }
  86% { transform: translateY(0) scaleY(0.92); }
}
.villager[data-kind="rabbit"] .vsprite { animation: idleRabbitHop 2.1s ease-in-out infinite; }
@keyframes idleRabbitHop {
  0%, 60%, 100% { transform: translateY(0) rotate(0deg); }
  68% { transform: translateY(-16%) rotate(-4deg); }
  78% { transform: translateY(0) rotate(3deg); }
}
.villager[data-kind="dino"] .vsprite { animation: idleDinoStomp 2.4s ease-in-out infinite; }
@keyframes idleDinoStomp {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4%) rotate(-2deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-4%) rotate(2deg); }
}
.villager[data-kind="bear"] .vsprite { animation: idleBearSway 2.8s ease-in-out infinite; }
@keyframes idleBearSway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
.villager[data-kind="chick"] .vsprite { animation: idleChickPeck 1.9s ease-in-out infinite; }
@keyframes idleChickPeck {
  0%, 40%, 100% { transform: translateY(0) rotate(0deg); }
  48% { transform: translateY(6%) rotate(-8deg); }
  56% { transform: translateY(0) rotate(0deg); }
}
.villager[data-kind="robot"] .vsprite { animation: idleRobotTwitch 2.6s steps(1) infinite; }
@keyframes idleRobotTwitch {
  0%, 92%, 100% { transform: translateY(0); }
  94% { transform: translateY(-3%); }
  96% { transform: translateY(0); }
  98% { transform: translateY(-2%); }
}
.villager.walking .vsprite { animation: vBob 0.34s ease-in-out infinite; }
@keyframes vBob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10%); }
}
.villager.grabbed .vsprite { animation: vGrab 0.3s ease-in-out infinite; }
@keyframes vGrab {
  0%,100% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
}
.villager.dancing .vsprite { animation: vDance 0.5s ease-in-out infinite; }
.villager.juggling .vsprite { animation: vJuggle 0.55s ease-in-out infinite; }
@keyframes vJuggle {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-6%) rotate(4deg); }
}
.vjuggle { position: absolute; left: 50%; bottom: 90%; width: 70%; height: 45%; transform: translateX(-50%); pointer-events: none; z-index: 3; }
.jball { position: absolute; left: 50%; top: 60%; width: 3.9vw; aspect-ratio: 1; margin-left: -1.95vw; image-rendering: pixelated; animation: jbob 0.55s ease-in-out infinite; }
.jb0 { --jx: -140%; }
.jb1 { --jx: -70%; animation-delay: -0.11s; }
.jb2 { --jx: 0%; animation-delay: -0.22s; }
.jb3 { --jx: 70%; animation-delay: -0.33s; }
.jb4 { --jx: 140%; animation-delay: -0.44s; }
@keyframes jbob {
  0%,100% { transform: translate(var(--jx), 20%); }
  50% { transform: translate(var(--jx), -120%); }
}
.villager.unicycling .vsprite { animation: vUnicycle 0.6s ease-in-out infinite; transform-origin: bottom center; }
@keyframes vUnicycle {
  0%,100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
.vunicycle { position: absolute; left: 50%; bottom: -8%; width: 22%; transform: translateX(-50%); pointer-events: none; z-index: 0; }
.vunicycle-img { width: 100%; image-rendering: pixelated; display: block; animation: vUnicycleSpin 0.5s linear infinite; transform-origin: 50% 82%; }
@keyframes vUnicycleSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.villager.platespinning .vsprite { animation: vPlateBal 0.7s ease-in-out infinite; }
@keyframes vPlateBal {
  0%,100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
.vplate { position: absolute; left: 50%; bottom: 82%; width: 60%; transform: translateX(-50%); pointer-events: none; z-index: 3; text-align: center; }
.vplate-stick { width: 14%; image-rendering: pixelated; display: block; margin: 0 auto; }
.vplate-disc { width: 100%; image-rendering: pixelated; display: block; margin-top: -18%; animation: vPlateSpin 0.28s linear infinite; }
@keyframes vPlateSpin {
  0%,100% { transform: scaleX(1); }
  50% { transform: scaleX(0.2); }
}
@keyframes vDance {
  0%,100% { transform: rotate(-10deg) translateY(0); }
  25% { transform: rotate(0deg) translateY(-14%); }
  50% { transform: rotate(10deg) translateY(0); }
  75% { transform: rotate(0deg) translateY(-14%); }
}
.villager.stumble .vsprite { animation: vStumble 0.85s ease-in-out; }
@keyframes vStumble {
  0% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(-18deg) translateY(4%); }
  50% { transform: rotate(35deg) translateY(10%); }
  75% { transform: rotate(-8deg) translateY(2%); }
  100% { transform: rotate(0deg) translateY(0); }
}
.villager.sneaking .vsprite { animation: vSneak 0.5s ease-in-out infinite; transform-origin: bottom center; }
@keyframes vSneak {
  0%,100% { transform: scaleY(0.88) translateY(2%); }
  50% { transform: scaleY(0.94) translateY(0); }
}
.villager.sledding .vsprite { animation: vSled 0.3s ease-in-out infinite; transform-origin: center; }
@keyframes vSled {
  0%,100% { transform: rotate(78deg) translateY(28%); }
  50% { transform: rotate(82deg) translateY(30%); }
}
.villager.on-roof { transform: translateY(-58%); transition: transform .4s ease; }
.villager.punching .vsprite { animation: vPunch 0.28s ease-in-out 3; }
@keyframes vPunch {
  0%,100% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(8%) rotate(-8deg); }
}
.villager.sleeping .vsprite { transform: none; }
.villager.toGate { animation: villagerToGate 1.1s ease-in forwards; }
@keyframes villagerToGate {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  55% { transform: translate(0, 4%) scale(0.7); opacity: 1; }
  100% { transform: translate(0, 8%) scale(0.34); opacity: 0; }
}
.vbubble { position: absolute; left: 50%; bottom: 102%; transform: translateX(-50%) scale(0); font-size: 10px; font-weight: 800; white-space: nowrap; padding: 3px 7px; transform-origin: 50% 120%; opacity: 0; transition: transform .2s cubic-bezier(.2,1.4,.4,1), opacity .2s; }
.vbubble::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); }
.vbubble.show { transform: translateX(-50%) scale(1); opacity: 1; }
.landing-emoji { position: fixed; transform: translate(-50%, -100%); font-size: clamp(18px, 5vw, 26px); pointer-events: none; z-index: 265; animation: landingEmojiPop 1.4s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes landingEmojiPop {
  0% { transform: translate(-50%, -100%) scale(.4); opacity: 0; }
  15% { transform: translate(-50%, -130%) scale(1.15); opacity: 1; }
  75% { transform: translate(-50%, -145%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -170%) scale(.9); opacity: 0; }
}
.vzzz { position: absolute; left: 82%; bottom: 68%; display: flex; align-items: flex-end; gap: 1px; opacity: 0; pointer-events: none; }
.vzzz .zpix { image-rendering: pixelated; display: block; }
.vzzz .z0 { width: 5px; }
.vzzz .z1 { width: 7px; }
.vzzz .z2 { width: 9px; }
.vzzz.show { opacity: 1; animation: vZzz 1.8s ease-in-out infinite; }
body.home-active .vzzz { display: none; }
.villager.cat.catsleep { width: 8.6vw; aspect-ratio: 11 / 11; }
.villager.vdog { width: 6.8vw; }
.villager .vchute { position: absolute; left: 50%; bottom: 92%; width: 135%; transform: translateX(-50%); image-rendering: pixelated; pointer-events: none; z-index: 2; }
.villager .vflame { position: absolute; left: 84%; top: 4%; width: 78%; height: 78%; image-rendering: pixelated; pointer-events: none; transform-origin: left center; animation: vFlame 1.3s cubic-bezier(.2,.7,.3,1) forwards; z-index: 3; }
@keyframes vFlame {
  0% { transform: scaleX(.2) scaleY(.6); opacity: 0; }
  18% { transform: scaleX(1.5) scaleY(1.12); opacity: 1; }
  55% { transform: scaleX(1.85) scaleY(1); opacity: 1; }
  100% { transform: scaleX(2.2) scaleY(.8); opacity: 0; }
}
.villager .vflame.f-b { top: 16%; width: 62%; height: 62%; animation-duration: 1.15s; }
.villager .vflame.f-c { top: -6%; width: 56%; height: 56%; animation-duration: 1.0s; }
.villager .vdizzy { position: absolute; left: 50%; bottom: 86%; width: 75%; transform: translateX(-50%); image-rendering: pixelated; pointer-events: none; animation: dizzySpin 0.9s linear infinite; }
@keyframes dizzySpin {
  to { transform: translateX(-50%) rotate(360deg); }
}
.villager.dizzy .vflip { transform: rotate(74deg); transform-origin: 50% 80%; animation: dizzyWobble 0.7s ease-in-out infinite; }
@keyframes dizzyWobble {
  0%, 100% { transform: rotate(68deg); }
  50% { transform: rotate(82deg); }
}
#lampGlow { position: fixed; transform: translate(-50%, -50%); image-rendering: pixelated; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .5s ease; }
#lampGlow.lit { opacity: 1; animation: lampFlicker 4.6s ease-in-out infinite; }
@keyframes lampFlicker {
  0%, 87%, 93%, 100% { opacity: 1; }
  90% { opacity: .5; }
}
#fountainSpray { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 2; }
.spray-drop { position: absolute; left: 0; bottom: 0; width: 4px; height: 4px; margin-left: -2px; opacity: 0; animation: sprayDrop 1.1s ease-in infinite; }
.spray-drop.sd0 { animation-delay: 0s; }
.spray-drop.sd1 { left: -5px; animation-delay: .35s; }
.spray-drop.sd2 { left: 5px; animation-delay: .7s; }
@keyframes sprayDrop {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  55% { transform: translateY(-14px); opacity: 1; }
  100% { transform: translateY(6px); opacity: 0; }
}
.card-lamp-glow { position: absolute; left: 50%; top: 22%; width: 12%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; transition: opacity .15s; }
.card-fountain-spray { position: absolute; left: 50%; top: 30%; width: 0; height: 0; pointer-events: none; }
.card-fountain-spray .spray-drop { width: 6px; height: 6px; margin-left: -3px; }
.vcoin { position: fixed; width: 6px; image-rendering: pixelated; pointer-events: none; z-index: 4; }
#chimneySmoke { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .5s ease; }
#chimneySmoke.lit { opacity: 1; }
.chimney-puff { position: absolute; left: 0; bottom: 0; width: 22px; transform: translateX(-50%); image-rendering: pixelated; animation: chimneyPuff 1.7s ease-out forwards; }
@keyframes chimneyPuff {
  0% { transform: translate(-50%, 0) scale(.5); opacity: 0; }
  20% { opacity: .85; }
  100% { transform: translate(-50%, -160%) scale(1.4); opacity: 0; }
}
.villager .vsmoke { position: absolute; left: 82%; top: 6%; width: 55%; image-rendering: pixelated; pointer-events: none; z-index: 3; animation: vSmoke 0.95s ease-out forwards; }
@keyframes vSmoke {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  25% { opacity: .9; }
  100% { transform: translateY(-70%) scale(1.3); opacity: 0; }
}
.villager.straining .vsprite { animation: vStrain 0.22s ease-in-out infinite; }
@keyframes vStrain {
  0%,100% { transform: scale(1,1) translateX(0); }
  50% { transform: scale(1.05,0.96) translateX(1%); }
}
.villager.petting .vsprite { animation: vPet 0.65s ease-in-out; }
@keyframes vPet {
  0%,100% { transform: rotate(0deg) translateY(0); }
  40% { transform: rotate(-6deg) translateY(4%); }
  70% { transform: rotate(2deg) translateY(0); }
}
.villager .vtelescope { position: absolute; left: 78%; top: -18%; width: 62%; image-rendering: pixelated; pointer-events: none; z-index: 3; transform-origin: 20% 90%; animation: vScope 2.4s ease-in-out infinite; }
@keyframes vScope {
  0%,100% { transform: rotate(-3deg); }
  50% { transform: rotate(4deg); }
}
.villager.on-navyroof { transform: translateY(-92%); transition: transform .45s ease; }
.villager .vpebble { position: absolute; left: 68%; top: 14%; width: 24%; image-rendering: pixelated; pointer-events: none; z-index: 3; animation: vPebbleBob 0.9s ease-in-out infinite; }
@keyframes vPebbleBob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12%); }
}
.villager.looking-around .vsprite { animation: vLook 0.5s ease-in-out infinite; }
@keyframes vLook {
  0%,100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}
.villager.toe-tap .vsprite { animation: vToeTap 0.3s ease-in-out 4; }
@keyframes vToeTap {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8%); }
}
.villager.sorting .vsprite { animation: vSort 0.4s ease-in-out 3; }
@keyframes vSort {
  0%,100% { transform: rotate(0deg); }
  50% { transform: rotate(-6deg); }
}
.villager.snap-flip .vsprite { animation: vSnapFlip 0.5s ease-in-out; }
@keyframes vSnapFlip {
  0%,100% { transform: scale(1); }
  40% { transform: scale(1.12) rotate(-4deg); }
  60% { transform: scale(1.12) rotate(4deg); }
}
.villager.casting .vsprite { animation: vCast 0.3s ease-in-out 2; }
@keyframes vCast {
  0%,100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.08) rotate(6deg); }
}
.villager.tossing .vsprite { animation: vToss 0.35s ease-in-out infinite; }
@keyframes vToss {
  0%,100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
.villager[data-kind="dino"].walking .vsprite { animation: vTiptoe 0.4s ease-in-out infinite; }
@keyframes vTiptoe {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6%); }
}
.villager.winding .vsprite { animation: vWind 0.35s linear infinite; }
@keyframes vWind {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.villager.kicking .vsprite { animation: vKick 0.5s ease-out; }
@keyframes vKick {
  0%,100% { transform: rotate(0deg) translateX(0); }
  40% { transform: rotate(-18deg) translateX(6%); }
  70% { transform: rotate(10deg) translateX(-3%); }
}
.villager.kicking.wobble-end .vsprite { animation: vWobbleEnd 0.6s ease-in-out; }
@keyframes vWobbleEnd {
  0%,100% { transform: rotate(0deg); }
  30% { transform: rotate(-12deg); }
  60% { transform: rotate(8deg); }
}
.cm-toss { animation: vToss 0.35s ease-in-out infinite; }
.cm-kick { animation: vKick 0.5s ease-out infinite; }
.cm-look { animation: vLook 0.5s ease-in-out infinite; }
.cm-sneak { animation: vSneak 0.5s ease-in-out infinite; }
.cm-sled { animation: vSled 0.3s ease-in-out infinite; }
.cm-punch { animation: vPunch 0.28s ease-in-out infinite; }
.cm-cast { animation: vCast 0.3s ease-in-out infinite; }
.cm-wind { animation: vWind 0.35s linear infinite; }
.cm-toetap { animation: vToeTap 0.3s ease-in-out infinite; }
.cm-sort { animation: vSort 0.4s ease-in-out infinite; }
.cm-snap { animation: vSnapFlip 0.5s ease-in-out infinite; }
.cm-stumble { animation: vStumble 0.85s ease-in-out infinite; }
.cm-strain { animation: vStrain 0.22s ease-in-out infinite; }
.cm-pet { animation: vPet 0.65s ease-in-out infinite; }
.cm-juggle { animation: vJuggle 0.55s ease-in-out infinite; }
.cm-unicycle-bob { animation: vUnicycle 0.6s ease-in-out infinite; transform-origin: bottom center; }
.cm-plate-bob { animation: vPlateBal 0.7s ease-in-out infinite; }
.card-scene-bg { position: absolute; right: 8%; bottom: 6%; width: 30%; max-width: 64px; image-rendering: pixelated; opacity: .55; pointer-events: none; z-index: 0; }
.card-scene-bg.frog-pond-bg { opacity: 0; transition: opacity .3s; }
.card-scene-char { position: absolute; left: 10%; bottom: 8%; width: 34%; max-width: 72px; image-rendering: pixelated; pointer-events: none; z-index: 1; }
.card-scene-zzz { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); font-size: 20px; z-index: 2; animation: cardZzzFloat 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes cardZzzFloat {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: .5; }
  50% { transform: translateX(-50%) translateY(-8px); opacity: 1; }
}
.card-trick-juggle { position: absolute; left: 50%; top: 4%; width: 50%; height: 26%; transform: translateX(-50%); pointer-events: none; z-index: 2; }
.card-jball { position: absolute; left: 50%; top: 50%; width: 11%; aspect-ratio: 1; margin-left: -5.5%; image-rendering: pixelated; animation: cardJbob 0.55s ease-in-out infinite; }
.card-jb0 { --jx: -140%; }
.card-jb1 { --jx: -70%; animation-delay: -0.11s; }
.card-jb2 { --jx: 0%; animation-delay: -0.22s; }
.card-jb3 { --jx: 70%; animation-delay: -0.33s; }
.card-jb4 { --jx: 140%; animation-delay: -0.44s; }
@keyframes cardJbob {
  0%,100% { transform: translate(var(--jx), 20%); }
  50% { transform: translate(var(--jx), -120%); }
}
.card-trick-unicycle { position: absolute; left: 50%; bottom: 4%; width: 24%; transform: translateX(-50%); pointer-events: none; z-index: 0; display: flex; flex-direction: column; align-items: center; }
.card-unicycle-seat { width: 100%; image-rendering: pixelated; display: block; }
.card-unicycle-wheel { width: 100%; image-rendering: pixelated; display: block; animation: vUnicycleSpin 0.5s linear infinite; transform-origin: 50% 50%; }
.char-detail-img.char-detail-img-unicycle-trick { width: 30%; margin-top: -20%; }
.card-trick-plate { position: absolute; left: 50%; top: 2%; width: 34%; transform: translateX(-50%); pointer-events: none; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.card-plate-disc { width: 100%; image-rendering: pixelated; display: block; animation: vPlateSpin 0.28s linear infinite; }
.card-plate-stick { width: 14%; image-rendering: pixelated; display: block; margin-top: -10%; }
.card-scene-bubble { position: absolute; left: 50%; top: 8%; transform: translateX(-50%) scale(0); font-size: 22px; z-index: 3; transition: transform .2s cubic-bezier(.2,1.4,.4,1); pointer-events: none; }
.card-scene-bubble.show { transform: translateX(-50%) scale(1); }
.card-scene-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .3s; }
.card-scene-rain.show { opacity: 1; }
.card-scene-rain i { position: absolute; top: -10%; width: 2px; height: 14px; transform: rotate(16deg); animation: cardRainFall 0.6s linear infinite; }
@keyframes cardRainFall {
  from { transform: translate(0, -10%) rotate(16deg); }
  to { transform: translate(-48%, 220%) rotate(16deg); }
}
.card-scene-visitor { position: absolute; bottom: 6%; width: 26%; max-width: 56px; image-rendering: pixelated; z-index: 1; pointer-events: none; opacity: 0; }
.card-scene-visitor.walk-in { animation: visitorWalkIn 1.1s ease-out forwards; }
.card-scene-visitor.walk-out { animation: visitorWalkOut 0.9s ease-in forwards; }
@keyframes visitorWalkIn {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes visitorWalkOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-60px); }
}
.partner-badges { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; z-index: 4; flex-wrap: wrap; justify-content: flex-end; max-width: 60%; }
.partner-badge { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; padding: 3px; cursor: pointer; }
.fxheart { position: fixed; width: 26px; image-rendering: pixelated; pointer-events: none; z-index: 4; animation: fxHeart 1.6s ease-out forwards; }
@keyframes fxHeart {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.4); }
  22% { opacity: 1; transform: translate(-50%, -60%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(0.95); }
}
.villager.hugging .vsprite { animation: hugBob 0.5s ease-in-out infinite alternate; }
@keyframes hugBob {
  from { transform: translateY(0) scale(1, 1); }
  to { transform: translateY(-2px) scale(1.06, 0.94); }
}
@keyframes vZzz {
  0% { opacity: 0; transform: translate(0, 4px) scale(0.7); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate(8px, -10px) scale(1.1); }
}
.god-entry { position: fixed; left: 6px; bottom: 6px; z-index: 142; padding: 5px 8px; font-size: 11px; font-weight: 800; cursor: pointer; }
.god-entry:active { transform: scale(0.94); }
.found-slot.gacha-active { overflow: visible; z-index: 8; }
.found-king.gacha-spin { animation: gachaSpin .12s linear infinite; }
@keyframes gachaSpin {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-9%) scale(1.07); }
}
.found-king.gacha-win { animation: gachaWin .6s cubic-bezier(.2,1.7,.4,1); }
@keyframes gachaWin {
  0% { transform: scale(.5); }
  55% { transform: scale(1.5); }
  100% { transform: scale(1); }
}
.gacha-badge { position: fixed; transform: translate(-50%, 0); z-index: 135; font-size: 13px; font-weight: 900; white-space: nowrap; padding: 4px 12px; pointer-events: none; animation: gachaBadge 1.5s ease forwards; }
@keyframes gachaBadge {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.5); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  30% { transform: translate(-50%, 0) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -10px) scale(1); }
}
.god-spawn { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.god-spawn button { text-align: center; padding: 8px 0; font-size: 13px; }
.god-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
#adspace { flex: 0 0 60px; height: 60px; width: 100%; position: relative; z-index: 5; overflow: hidden; }
.auto-btn { position: absolute; left: 50%; bottom: 100%; margin-bottom: 16px; transform: translateX(-50%) translateY(16px); z-index: 30; padding: 10px 22px; font-size: clamp(13px, 4vw, 16px); font-weight: 800; opacity: 0; pointer-events: none; cursor: pointer; transition: opacity .25s ease, transform .25s cubic-bezier(.2,1.4,.4,1); }
.auto-btn.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); animation: autoPulse 1.4s ease-in-out infinite; }
@keyframes autoPulse {
  0%,100% { }
  50% { }
}
.auto-btn:active { transform: translateX(-50%) scale(0.95); }
@media (orientation: landscape) and (max-height: 560px) {
  #topbar { padding: 1px 10px; }
  .stat .label { font-size: 8px; }
  .stat span:last-child { font-size: 13px; }
  .icon-btn { width: clamp(28px, 7vh, 38px); height: clamp(28px, 7vh, 38px); font-size: clamp(14px, 4.4vh, 18px); display: flex; align-items: center; justify-content: center; padding: 0; }
  .ico-img { width: clamp(20px, 5.8vh, 30px); height: clamp(20px, 5.8vh, 30px); }
  #topbar, #stockbar, #board, #adspace { margin-left: 68px; }
  #bottombar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 30; width: 68px; flex-direction: column; justify-content: center; align-items: center; padding: 6px 4px; }
  .actions { flex-direction: column; width: 100%; gap: 6px; max-width: none; }
  #stockbar { min-height: calc(var(--real-card-w, 34px) * 7 / 5); padding: 1px 8px 0; }
  #board { grid-template-columns: repeat(10, minmax(0, 12.5vh)); justify-content: center; padding-top: 3px; }
  .act { width: 100%; padding: 5px 2px; }
  .act .ico { font-size: clamp(14px, 4vh, 18px); }
  .act .lbl { font-size: clamp(7.5px, 2vh, 10px); }
  #adspace { flex: 0 0 34px; height: 34px; }
  .hint { position: fixed; left: 76px; right: 10px; top: 4px; bottom: auto; margin-bottom: 0; }
  .god-fab { left: auto; right: 10px; bottom: calc(10px + var(--banner-h, 0px)); }
}
.mission-complete-dialog { text-align: center; }
.mc-badge { font-size: 46px; animation: mcBadgePop .5s cubic-bezier(.3,1.5,.4,1); margin-bottom: 4px; }
@keyframes mcBadgePop {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.mc-reward { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 26px; font-weight: 800; margin: 10px 0 18px; }
.mc-reward img { width: 28px; height: 28px; }