/* ---------- 河童仔 ---------- */
.kp-stage { position: fixed; right: 10px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 60; width: 132px; pointer-events: none;
  transform: translateY(calc(100% + 120px)); transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.kp-stage.on { transform: none; }
.kp { display: block; width: 132px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; --open: 0; --w: 1; }
.kp-svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 10px rgba(40, 70, 20, .25)); }
.kp-bubble { position: absolute; right: 8px; bottom: calc(100% - 4px); width: max-content; max-width: min(80vw, 330px); pointer-events: auto;
  background: #FFFDF0; color: #3B1E0E; border: 3px solid #3B1E0E; border-radius: 18px; padding: 10px 14px; box-shadow: 0 6px 0 rgba(59, 30, 14, .15);
  animation: kp-pop .3s cubic-bezier(.34,1.56,.64,1); }
.kp-bubble::after { content: ""; position: absolute; right: 44px; bottom: -11px; width: 16px; height: 16px; background: #FFFDF0; border: 3px solid #3B1E0E; border-top: 0; border-left: 0; transform: rotate(45deg); }
.kp-bubble b { display: block; font-size: 20px; line-height: 1.9; }
.kp-bubble span { display: block; font-size: 13px; color: #6B5B45; font-weight: 700; }
.kp-bubble .kp-kana { font-size: 15px; letter-spacing: .04em; color: #8A7A62; }
.kp-bubble .kp-kana i { font-style: normal; border-radius: 6px; transition: background .08s; }
.kp-bubble .kp-kana i.on { background: #8BCF5A; color: #1F3A12; }
@keyframes kp-pop { from { transform: scale(.6) translateY(10px); opacity: 0; } }

/* 部件 */
.kp-svg * { transform-box: view-box; }
.kp-water { opacity: 0; transition: opacity .3s; }
.kp-cheeks, .kp-eyes-happy, .kp-eyes-squint { opacity: 0; }
.kp[data-face="happy"] .kp-eyes-dot, .kp[data-face="squint"] .kp-eyes-dot { opacity: 0; }
.kp[data-face="happy"] .kp-eyes-happy, .kp[data-face="happy"] .kp-cheeks, .kp[data-face="squint"] .kp-eyes-squint, .kp[data-face="squint"] .kp-cheeks { opacity: 1; }
.kp.blink .kp-eyes-dot { transform: scaleY(.1); transform-origin: 100px 90px; }
.kp-mouth { transform-origin: 100px 112px; transform: scale(var(--w), var(--open)); transition: transform .07s; }
.kp-lower { transform-origin: 100px 112px; transform: translateY(calc(var(--open) * 14px)) scaleX(var(--w)); transition: transform .07s; }
.kp-upper { transform-origin: 100px 112px; transform: translateY(calc(var(--open) * -2px)) scaleX(var(--w)); transition: transform .07s; }
.kp-armL { transform-origin: 74px 146px; transition: transform .25s; }
.kp-armR { transform-origin: 126px 146px; transition: transform .25s; }
.kp-all { transform-origin: 100px 205px; }
.kp-head { transform-origin: 100px 140px; }

/* 動作 */
.kp[data-move="dance"] .kp-all { animation: kp-dance .5s ease-in-out 6 alternate; }
.kp[data-move="dance"] .kp-armL { animation: kp-armup-l .5s ease-in-out 6 alternate; }
.kp[data-move="dance"] .kp-armR { animation: kp-armdown-r .5s ease-in-out 6 alternate; }
@keyframes kp-dance { from { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(0) translateY(-14px); } to { transform: rotate(9deg) translateY(0); } }
@keyframes kp-armup-l { from { transform: rotate(62deg); } to { transform: rotate(10deg); } }
@keyframes kp-armdown-r { from { transform: rotate(-10deg); } to { transform: rotate(-62deg); } }

.kp[data-move="wave"] .kp-armR { animation: kp-wave .35s ease-in-out 8 alternate; }
.kp[data-move="wave"] .kp-head { animation: kp-tilt 1.4s ease-in-out 2; }
@keyframes kp-wave { from { transform: rotate(-42deg); } to { transform: rotate(-70deg); } }
@keyframes kp-tilt { 50% { transform: rotate(-6deg); } }

.kp[data-move="splash"] .kp-water { opacity: 1; }
.kp[data-move="splash"] .kp-feet { opacity: 0; }
.kp[data-move="splash"] .kp-all { animation: kp-bob .6s ease-in-out 7 alternate; }
.kp[data-move="splash"] .kp-armL { transform: rotate(65deg); }
.kp[data-move="splash"] .kp-armR { transform: rotate(-65deg); }
.kp[data-move="splash"] .kp-drops { animation: kp-drops .6s ease-out 7; transform-origin: 100px 190px; }
@keyframes kp-bob { from { transform: translateY(14px); } to { transform: translateY(2px); } }
@keyframes kp-drops { from { transform: scale(.6); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1.25) translateY(-8px); opacity: 0; } }

.kp[data-move="cheer"] .kp-armL { transform: rotate(60deg); }
.kp[data-move="cheer"] .kp-armR { transform: rotate(-60deg); }
.kp[data-move="cheer"] .kp-all { animation: kp-jump .55s cubic-bezier(.3,.7,.4,1) 5; }
.kp[data-move="hop"] .kp-all { animation: kp-jump .5s cubic-bezier(.3,.7,.4,1) 6; }
.kp[data-move="hop"] .kp-armL { animation: kp-flap .25s ease-in-out 12 alternate; }
.kp[data-move="hop"] .kp-armR { animation: kp-flap-r .25s ease-in-out 12 alternate; }
@keyframes kp-jump { 0%, 100% { transform: translateY(0) scale(1.06, .94); } 15% { transform: translateY(0) scale(1); } 50% { transform: translateY(-26px) scale(.97, 1.04); } 85% { transform: translateY(0) scale(1); } }
@keyframes kp-flap { from { transform: rotate(0deg); } to { transform: rotate(45deg); } }
@keyframes kp-flap-r { from { transform: rotate(0deg); } to { transform: rotate(-45deg); } }

.kp[data-move="talk"] .kp-head { animation: kp-nod .9s ease-in-out infinite; }
.kp[data-move="talk"] .kp-armL { animation: kp-gest-l 1.1s ease-in-out infinite alternate; }
.kp[data-move="talk"] .kp-armR { animation: kp-gest-r 1.4s ease-in-out infinite alternate; }
@keyframes kp-gest-l { from { transform: rotate(4deg); } to { transform: rotate(32deg); } }
@keyframes kp-gest-r { from { transform: rotate(-2deg); } to { transform: rotate(-22deg); } }
@keyframes kp-nod { 50% { transform: rotate(2.5deg) translateY(1px); } }
.kp-plate { transform-origin: 100px 40px; }
.kp[data-move="talk"] .kp-plate, .kp[data-move="cheer"] .kp-plate { animation: kp-shine 1.2s ease-in-out infinite; }
@keyframes kp-shine { 50% { filter: brightness(1.12); } }

/* 頂部按鈕 */
.kp-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; background: none; cursor: pointer; animation: kp-peek 4s ease-in-out infinite; }
.kp-btn svg { width: 44px; height: 44px; display: block; }
@keyframes kp-peek { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-10deg) translateY(-2px); } 95% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .kp *, .kp-btn { animation: none !important; } }

/* 行程表小河童 */
.list { position: relative; }
.kp-buddy { position: absolute; left: 0; top: 0; width: 46px; z-index: 3; cursor: pointer; transition: transform .6s cubic-bezier(.45,.05,.35,1); will-change: transform; }
.kp-mini { width: 46px; pointer-events: none; animation: kp-idle 2.4s ease-in-out infinite; }
.kp-mini .kp-svg { filter: drop-shadow(0 3px 4px rgba(40,70,20,.25)); }
.kp-mini.jumping { animation: kp-arc .6s cubic-bezier(.3,.7,.4,1); }
.kp-mini.jumping .kp-armL { transform: rotate(55deg); } .kp-mini.jumping .kp-armR { transform: rotate(-55deg); }
@keyframes kp-idle { 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes kp-arc { 0% { transform: scale(1.1, .85); } 30% { transform: translateY(-34px) scale(.95, 1.08) rotate(-8deg); } 75% { transform: translateY(-10px) rotate(6deg); } 90% { transform: scale(1.12, .86); } 100% { transform: none; } }

/* 完成：抽獎中獎效果 */
.kp-party { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 50% 45%, #FFF6B8 0%, #FFD84D 35%, #F6A623 70%, #D9761A 100%); animation: kp-fadein .25s ease-out; }
.kp-party.bye { animation: kp-fadeout .5s ease-in forwards; }
.kp-rays { position: absolute; left: 50%; top: 45%; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax;
  background: repeating-conic-gradient(rgba(255,255,255,.38) 0 10deg, rgba(255,255,255,0) 10deg 20deg); animation: kp-spin 6s linear infinite; }
.kp-glow { position: absolute; left: 50%; top: 45%; width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 70%); animation: kp-pulse 1s ease-in-out infinite alternate; }
.kp-confetti i { position: absolute; top: -6vh; width: 10px; height: 16px; background: var(--c); border-radius: 2px; animation: kp-fall linear infinite; }
.kp-confetti i.coin { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF3A0, #F2B90C 60%, #B88200); box-shadow: inset 0 0 0 2px #B88200; }
.kp-confetti i.star { width: 20px; height: 20px; border-radius: 0; background: var(--c); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.kp-win { position: relative; text-align: center; animation: kp-zoom .7s cubic-bezier(.34,1.56,.64,1); }
.kp-bighead { width: min(68vw, 340px); margin: 0 auto; pointer-events: none; animation: kp-wiggle .45s ease-in-out .7s 5 alternate; }
.kp-bighead .kp-svg { filter: drop-shadow(0 14px 20px rgba(120,60,0,.35)); }
.kp-win-t { font-size: clamp(34px, 9vw, 56px); font-weight: 800; color: #fff; -webkit-text-stroke: 2px #3B1E0E; text-shadow: 0 5px 0 #3B1E0E; margin-top: 4px; letter-spacing: .02em; }
.kp-win-s { display: inline-block; margin-top: 10px; padding: 6px 16px; border-radius: 999px; background: #3B1E0E; color: #FFF4A6; font-weight: 800; font-size: 16px; max-width: 86vw; }
.kp-win-j { margin-top: 8px; color: #3B1E0E; font-weight: 800; font-size: 18px; }
@keyframes kp-spin { to { transform: rotate(360deg); } }
@keyframes kp-pulse { to { transform: scale(1.15); opacity: .8; } }
@keyframes kp-fall { 0% { transform: translateY(0) rotate(var(--r)); } 100% { transform: translateY(112vh) rotate(calc(var(--r) + 720deg)); } }
@keyframes kp-zoom { from { transform: scale(.2) rotate(-12deg); opacity: 0; } }
@keyframes kp-wiggle { from { transform: rotate(-5deg); } to { transform: rotate(5deg) scale(1.04); } }
@keyframes kp-fadein { from { opacity: 0; } }
@keyframes kp-fadeout { to { opacity: 0; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .kp-rays, .kp-confetti, .kp-buddy { animation: none !important; transition: none !important; } }
.kp-bighead .kp-svg { overflow: hidden; }
.kp-bighead .kp-arm, .kp-bighead .kp-feet, .kp-bighead .kp-water, .kp-bighead .kp-bodyshape, .kp-bighead .kp-belly, .kp-bighead .kp-shell { display: none; }

/* ---------- 場景 ---------- */
.kp-shell { display: inline; }
.kp-eyes-sleep, .kp-eyes-angry { opacity: 0; }
.kp[data-face="sleep"] .kp-eyes-dot, .kp[data-face="angry"] .kp-eyes-dot { opacity: 0; }
.kp[data-face="sleep"] .kp-eyes-sleep, .kp[data-face="sleep"] .kp-cheeks, .kp[data-face="angry"] .kp-eyes-angry { opacity: 1; }
.kp.no-feet .kp-feet { opacity: 0; }
.kp[data-move="scene"] .kp-armL { transform: rotate(var(--aL)); }
.kp[data-move="scene"] .kp-armR { transform: rotate(var(--aR)); }
.kp-bubble { cursor: pointer; }
.kp-bubble .kp-tap { display: block; margin-top: 4px; font-size: 11px; color: #9A8B70; font-weight: 700; }

.kp[data-anim="sway"] .kp-all { animation: kp-sway 1.2s ease-in-out infinite alternate; }
.kp[data-anim="munch"] .kp-lower { animation: kp-munch .32s ease-in-out infinite alternate; }
.kp[data-anim="munch"] .kp-all { animation: kp-sway 1s ease-in-out infinite alternate; }
.kp[data-anim="tilt"] .kp-head { animation: kp-tilt2 1.4s ease-in-out infinite alternate; }
.kp[data-anim="shake"] .kp-all { animation: kp-shake .18s linear infinite alternate; }
.kp[data-anim="breathe"] .kp-all { animation: kp-breathe 2.4s ease-in-out infinite; }
.kp[data-anim="breathe"] .kp-head { transform: rotate(-8deg); }
.kp[data-anim="sink"] .kp-all { animation: kp-sink 2s ease-in-out infinite alternate; }
.kp[data-anim="peek"] .kp-all { animation: kp-peek2 2.2s ease-in-out infinite; }
.kp[data-anim="jump"] .kp-all { animation: kp-jump .55s cubic-bezier(.3,.7,.4,1) infinite; }
.kp[data-anim="popup"] .kp-all { animation: kp-popup 1.1s cubic-bezier(.3,.7,.4,1) infinite; }
.kp[data-anim="run"] .kp-all { animation: kp-run .28s ease-in-out infinite alternate; }
.kp[data-anim="run"] .kp-armL { animation: kp-swingL .28s ease-in-out infinite alternate; }
.kp[data-anim="run"] .kp-armR { animation: kp-swingR .28s ease-in-out infinite alternate; }
.kp[data-anim="pump"] .kp-armL { animation: kp-pumpL .45s ease-in-out infinite alternate; }
.kp[data-anim="pump"] .kp-armR { animation: kp-pumpR .45s ease-in-out infinite alternate; }
.kp[data-anim="nod"] .kp-head { animation: kp-nod 1.2s ease-in-out infinite; }
@keyframes kp-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes kp-munch { from { transform: translateY(0); } to { transform: translateY(9px); } }
@keyframes kp-tilt2 { from { transform: rotate(0); } to { transform: rotate(-12deg); } }
@keyframes kp-shake { from { transform: translateX(-3px); } to { transform: translateX(3px); } }
@keyframes kp-breathe { 50% { transform: scale(1.03, .97); } }
@keyframes kp-sink { from { transform: translateY(30px); } to { transform: translateY(22px); } }
@keyframes kp-peek2 { 0%, 100% { transform: translateX(26px) rotate(-12deg); } 50% { transform: translateX(34px) rotate(-6deg); } }
@keyframes kp-popup { 0% { transform: translateY(40px); } 45% { transform: translateY(-12px); } 70%, 100% { transform: translateY(0); } }
@keyframes kp-run { from { transform: rotate(8deg) translateY(0); } to { transform: rotate(8deg) translateY(-8px); } }
@keyframes kp-swingL { from { transform: rotate(45deg); } to { transform: rotate(-15deg); } }
@keyframes kp-swingR { from { transform: rotate(15deg); } to { transform: rotate(-45deg); } }
@keyframes kp-pumpL { from { transform: rotate(0); } to { transform: rotate(62deg); } }
@keyframes kp-pumpR { from { transform: rotate(-62deg); } to { transform: rotate(0); } }

/* 道具動畫 */
.kp-svg .fx { transform-box: fill-box; transform-origin: center; }
.fx-float { animation: fx-float 2s ease-in-out infinite; }
.fx-twinkle { animation: fx-twinkle 1.1s ease-in-out infinite alternate; }
.fx-munch { animation: fx-munch .32s ease-in-out infinite alternate; }
.fx-pulse { animation: fx-pulse .6s ease-in-out infinite alternate; }
.fx-bob { animation: fx-bob .9s ease-in-out infinite alternate; }
.fx-tears { animation: fx-tears .25s linear infinite alternate; transform-origin: top; }
.fx-fly { animation: fx-fly 1s ease-out infinite; }
.fx-zzz { animation: fx-zzz 2.2s ease-in-out infinite; }
.fx-steam { animation: fx-steam 2.2s ease-in-out infinite; }
.fx-rain { animation: fx-rain .9s linear infinite; }
.fx-speed { animation: fx-speed .45s linear infinite; }
.fx-flip { animation: fx-flip .7s ease-in-out infinite alternate; }
.fx-flash { animation: fx-flash 1.3s ease-out infinite; }
.fx-spin { animation: kp-spin 8s linear infinite; }
.fx-burst { animation: fx-burst 1.2s ease-out infinite; }
.fx-b0 { --bx: -40px; --by: -50px; } .fx-b1 { --bx: 20px; --by: -60px; } .fx-b2 { --bx: 50px; --by: -20px; } .fx-b3 { --bx: -10px; --by: -70px; }
.fx-b4 { --bx: 40px; --by: -55px; } .fx-b5 { --bx: -30px; --by: -30px; } .fx-b6 { --bx: 60px; --by: -40px; }
@keyframes fx-float { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-18px); opacity: 0; } }
@keyframes fx-twinkle { from { transform: scale(.55) rotate(0); opacity: .6; } to { transform: scale(1.15) rotate(30deg); opacity: 1; } }
@keyframes fx-munch { from { transform: translateY(0) rotate(0); } to { transform: translateY(4px) rotate(4deg); } }
@keyframes fx-pulse { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes fx-bob { from { transform: translateY(-4px) rotate(-6deg); } to { transform: translateY(4px) rotate(6deg); } }
@keyframes fx-tears { from { transform: scaleY(.92); } to { transform: scaleY(1.06); } }
@keyframes fx-fly { 0% { transform: translate(0, 0) scale(.6); opacity: 1; } 100% { transform: translate(0, -20px) scale(1); opacity: 0; } }
@keyframes fx-zzz { 0% { transform: translate(0, 8px) scale(.7); opacity: 0; } 40% { opacity: 1; } 100% { transform: translate(10px, -14px) scale(1.1); opacity: 0; } }
@keyframes fx-steam { 0% { transform: translateY(10px); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-16px) scaleX(-1); opacity: 0; } }
@keyframes fx-rain { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(190px); opacity: .6; } }
@keyframes fx-speed { from { transform: translateX(14px); opacity: 0; } 40% { opacity: 1; } to { transform: translateX(-16px); opacity: 0; } }
@keyframes fx-flip { from { transform: translateY(0) rotate(0); } to { transform: translateY(-22px) rotate(180deg); } }
@keyframes fx-flash { 0% { transform: scale(.2); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes fx-burst { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--bx), var(--by)) rotate(240deg); opacity: 0; } }
.kp-stage.tall .kp-bubble { bottom: calc(100% + 44px); }