/* ====== ตกปลา ลุ้นของรางวัล — สไตล์การ์ตูนสดใส ====== */
:root{
  --blue1:#4fc3f7; --blue2:#1e88e5; --deep:#0d47a1;
  --gold:#ffd54f; --gold2:#ffb300; --pink:#ff7eb3;
  --green:#66bb6a; --ink:#0b2545; --white:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  font-family:"Baloo 2","Trebuchet MS","Segoe UI",sans-serif;
  background:#0d47a1;color:var(--ink);
  position:relative;
  user-select:none;-webkit-user-select:none;
}

/* ---------- ฉากพื้นหลัง ---------- */
.sky{position:fixed;inset:0;height:48%;
  background:linear-gradient(180deg,#7fd6ff 0%,#bff0ff 60%,#e6faff 100%);z-index:0}
.sun{position:fixed;top:6%;right:12%;width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle,#fff6c9,#ffe066 60%,#ffcb33);
  box-shadow:0 0 40px #ffe06688;z-index:1;animation:sunpulse 4s ease-in-out infinite}
@keyframes sunpulse{50%{transform:scale(1.08)}}
.cloud{position:fixed;background:#fff;border-radius:50px;opacity:.9;z-index:1;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.05))}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud1{top:9%;left:-120px;width:90px;height:30px;animation:drift 26s linear infinite}
.cloud2{top:20%;left:-160px;width:70px;height:24px;animation:drift 34s linear infinite 4s}
.cloud1::before{width:40px;height:40px;top:-18px;left:14px}
.cloud1::after{width:30px;height:30px;top:-12px;left:46px}
.cloud2::before{width:32px;height:32px;top:-14px;left:12px}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(120vw)}}

.water{position:fixed;left:0;right:0;bottom:0;height:58%;z-index:0;
  background:linear-gradient(180deg,#39b5f0 0%,#1e88e5 45%,#0d47a1 100%);
  overflow:hidden}
.water::before{content:"";position:absolute;top:-6px;left:0;right:0;height:14px;
  background:repeating-linear-gradient(90deg,#bff0ff 0 18px,#7fd6ff 18px 36px);
  border-radius:50%;animation:wave 3s linear infinite;opacity:.6}
@keyframes wave{to{transform:translateX(-36px)}}
.shimmer{position:absolute;inset:0;
  background:radial-gradient(circle at 30% 30%,#ffffff55,transparent 40%),
             radial-gradient(circle at 70% 60%,#ffffff33,transparent 35%);
  animation:shimmer 5s ease-in-out infinite;mix-blend-mode:screen}
@keyframes shimmer{50%{opacity:.4;transform:translateY(8px)}}
.bubbles span{position:absolute;bottom:-20px;background:#ffffff66;border-radius:50%;
  animation:rise linear infinite}
@keyframes rise{to{transform:translateY(-100vh);opacity:0}}

/* ---------- เลย์เอาต์เกม ---------- */
.game{position:relative;z-index:5;height:100dvh;max-width:480px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;padding:18px}
.screen{display:none;width:100%;text-align:center;animation:fadeIn .45s ease both}
.screen.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

h1,h2{line-height:1.25}
.headline{font-size:clamp(26px,8vw,40px);color:#fff;font-weight:800;
  text-shadow:0 3px 0 #1565c0,0 6px 12px rgba(0,0,0,.25);margin:14px 0 6px;
  display:inline-block;transform-origin:center bottom;
  animation:titleFloat 2.8s ease-in-out infinite, titleHue 6s linear infinite}
@keyframes titleFloat{
  0%,100%{transform:translateY(0) rotate(-1.5deg) scale(1)}
  50%{transform:translateY(-10px) rotate(1.5deg) scale(1.05)}}
@keyframes titleHue{50%{text-shadow:0 3px 0 #00897b,0 6px 16px rgba(0,0,0,.3),0 0 24px #ffe06699}}
.subtitle{color:#fff;font-size:15px;opacity:.95;margin-bottom:22px;
  text-shadow:0 1px 4px rgba(0,0,0,.25)}
/* การ์ตูนเด็กช้อนปลา (หน้าเลือกจุด) */
.spot-hero{width:160px;height:auto;display:block;margin:0 auto 6px;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.22));
  animation:heroBob 2.6s ease-in-out infinite}
@keyframes heroBob{0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-8px) rotate(1deg)}}
.net-fish{transform-box:fill-box;transform-origin:center;
  animation:fishWig .7s ease-in-out infinite}
@keyframes fishWig{0%,100%{transform:rotate(10deg)}50%{transform:rotate(-12deg)}}
.hb{animation:hbUp 1.8s ease-in infinite}
.hb2{animation-duration:2.3s;animation-delay:.6s}
@keyframes hbUp{0%{transform:translateY(0);opacity:.0}
  20%{opacity:.7}100%{transform:translateY(-22px);opacity:0}}

.step-title{font-size:clamp(20px,6vw,28px);color:#fff;font-weight:800;margin:10px 0;
  text-shadow:0 2px 0 #1565c0,0 4px 10px rgba(0,0,0,.25)}
.step-hint{color:#eaf7ff;font-size:14px;margin-bottom:18px;text-shadow:0 1px 3px rgba(0,0,0,.2)}
.fire{animation:firepulse .6s ease-in-out infinite}
@keyframes firepulse{50%{transform:scale(1.06);filter:brightness(1.2)}}

/* badge มุมจอ */
.badge{position:absolute;top:-4px;left:-2px;width:48px;height:48px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#5ec8ff,#1e88e5);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;
  border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.3);z-index:6}

/* ---------- หน้า Landing: ฉากประกอบจาก BG + สไปรต์ ---------- */
/* ซ่อนพื้นหลังตกแต่งเดิมตอนอยู่หน้า Landing กันเส้นขอบฟ้าซ้อนกับการ์ดฉาก */
body:has(#screen-landing.active) .sky,
body:has(#screen-landing.active) .sun,
body:has(#screen-landing.active) .cloud,
body:has(#screen-landing.active) .water,
body:has(#screen-fish.active) .sky,
body:has(#screen-fish.active) .sun,
body:has(#screen-fish.active) .cloud,
body:has(#screen-fish.active) .water,
body:has(#screen-reward.active) .sky,
body:has(#screen-reward.active) .sun,
body:has(#screen-reward.active) .cloud,
body:has(#screen-reward.active) .water{display:none}
body:has(#screen-landing.active),
body:has(#screen-fish.active),
body:has(#screen-reward.active){
  background:linear-gradient(180deg,#6cc5f7 0%,#3aa0e8 30%,#11539e 56%,#062c5e 100%)}
/* หน้าเต็มกรอบ: ปลดระยะขอบ/จัดกึ่งกลางของ .game แล้วให้ section เต็มความสูง */
.game:has(#screen-landing.active),
.game:has(#screen-fish.active),
.game:has(#screen-reward.active){display:block;padding:0;max-width:none}
#screen-landing,#screen-fish,#screen-reward{height:100dvh}

/* แคนวาสมินิเกมตกปลา */
#screen-fish{position:relative;width:100%;overflow:hidden}
#fishCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:pointer}
.fish-hud{position:absolute;left:0;right:0;bottom:28px;text-align:center;z-index:5;pointer-events:none;padding:0 10px;
  transition:opacity .4s ease, transform .4s ease}
.fish-hud.hud-hide{opacity:0;transform:translateY(24px)}
.fish-howto{display:inline-flex;gap:8px;background:rgba(8,40,80,.66);padding:10px;border-radius:20px;
  border:2px solid rgba(255,255,255,.4);box-shadow:0 6px 18px rgba(0,0,0,.35);
  animation:howtoPulse 1.8s ease-in-out infinite}
@keyframes howtoPulse{50%{transform:scale(1.035)}}
.ht-step{display:flex;flex-direction:column;justify-content:center;min-width:92px;
  background:rgba(255,255,255,.14);border-radius:14px;padding:8px 10px;
  color:#eaf6ff;font-size:12.5px;font-weight:700;line-height:1.3}
.ht-step b{display:block;font-size:15px;font-weight:800;color:#ffe066;margin-bottom:2px;white-space:nowrap}

/* ---------- หน้า 3: สรุปรางวัล ---------- */
#screen-reward{position:relative;width:100%;overflow:hidden}
.reward-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reward-wrap{position:relative;z-index:2;height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:18px}
.ribbon{position:relative;display:inline-block;
  background:linear-gradient(180deg,#3a6be0,#1f49b8);color:#fff;font-weight:800;
  font-size:clamp(22px,6vw,30px);padding:11px 38px;border-radius:12px;border:3px solid #8ab0f5;
  text-shadow:0 2px 2px rgba(0,0,0,.4);box-shadow:0 7px 16px rgba(0,0,0,.35);z-index:4;margin-bottom:-22px;
  animation:ribbonPop .5s cubic-bezier(.2,1.5,.5,1) both}
@keyframes ribbonPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.ribbon::before,.ribbon::after{content:"";position:absolute;bottom:-12px;width:0;height:0;
  border:14px solid transparent;border-top-color:#163a93;z-index:-1}
.ribbon::before{left:8px;transform:rotate(22deg)}
.ribbon::after{right:8px;transform:rotate(-22deg)}
.reward-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;
  border:none;background:rgba(0,0,0,.12);color:#6f5f3f;font-size:17px;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;z-index:3}
.reward-close:active{transform:scale(.9)}
.reward-card2{background:linear-gradient(180deg,#fffdf4,#f5ead0);border:3px solid #ffffff;
  border-radius:28px;box-shadow:0 18px 44px rgba(0,0,0,.45);padding:36px 22px 22px;
  width:90%;max-width:340px;text-align:center;position:relative;
  animation:cardPop .55s cubic-bezier(.2,1.4,.5,1) both}
@keyframes cardPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.reward-bag{width:56%;max-width:190px;height:auto;display:block;margin:4px auto 6px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.2));animation:bagBob 2.4s ease-in-out infinite}
@keyframes bagBob{50%{transform:translateY(-6px)}}
.reward-nowin{font-size:clamp(70px,22vw,96px);line-height:1;margin:2px auto 4px;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.25));animation:bagBob 2.4s ease-in-out infinite}
.reward-sub{color:#2f5a96;font-size:clamp(17px,5vw,21px);font-weight:700}
.reward-amount.nowin{font-size:clamp(26px,8vw,38px);color:#e23b3b;-webkit-text-stroke:2px #fff}
.reward-amount{font-size:clamp(42px,14vw,66px);font-weight:900;color:#ff8c1a;line-height:1.05;margin:2px 0 4px;
  -webkit-text-stroke:3px #fff;paint-order:stroke fill;
  filter:drop-shadow(0 3px 1px rgba(180,80,0,.5))}
.bonus-badge{display:inline-block;background:#eafaf0;color:#1d7a4a;border:1.5px solid #aee3c4;
  font-weight:800;font-size:14px;padding:6px 16px;border-radius:999px;margin:4px 0 2px}
.bonus-badge b{color:#0f8a3c;font-size:17px}
.reward-q{color:#39507a;font-size:clamp(15px,4.4vw,17px);font-weight:800;margin:2px 0 12px}
.shell-div{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 14px}
.btn-collect{margin-top:10px;width:100%;background:#fff;border:2px solid #ddc88e;color:#9a7320;
  font-weight:800;font-size:clamp(15px,4.4vw,17px);border-radius:14px;padding:11px;cursor:pointer;
  transition:transform .1s,background .15s}
.btn-collect:active{transform:scale(.98);background:#fdf3d8}
.shell-div i{height:2px;width:64px;background:#e2cfa0;border-radius:2px;display:inline-block}
.shell-div span{font-size:18px}
.btn-gold2{display:block;width:100%;background:linear-gradient(180deg,#ffd64f,#f3a51e);color:#fff;
  font-weight:800;font-size:clamp(18px,5vw,22px);border:none;border-radius:16px;padding:14px;cursor:pointer;
  box-shadow:0 6px 0 #c87f0e,0 11px 18px rgba(0,0,0,.25);text-shadow:0 2px 2px rgba(0,0,0,.28);
  transition:transform .1s,box-shadow .1s}
.btn-gold2:active{transform:translateY(4px);box-shadow:0 2px 0 #c87f0e}
.btn-replay2{margin-top:12px;background:none;border:none;color:#2a5aa8;font-weight:700;font-size:14px;
  cursor:pointer;text-decoration:underline}
.reward-stat{margin-top:8px;color:#9a8a62;font-size:12px}
.fish-count{position:absolute;top:14px;right:14px;z-index:4;background:rgba(8,40,80,.55);color:#fff;
  padding:6px 14px;border-radius:999px;font-weight:800;font-size:15px;box-shadow:0 3px 8px rgba(0,0,0,.2)}

.scene{position:relative;width:100%;height:100%;max-width:560px;margin:0 auto;
  border-radius:0;overflow:hidden;box-shadow:none}
.bg-full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  animation:bgBreathe 9s ease-in-out infinite}
@keyframes bgBreathe{50%{transform:scale(1.03)}}
.scene > img{position:absolute}

/* ชื่อเกม: ลอยขึ้นลง */
.title-el{left:8%;top:5%;width:84%;z-index:6;pointer-events:none;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.3));
  transform-origin:50% 50%;animation:floatTitle 3.2s ease-in-out infinite}
@keyframes floatTitle{0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-10px) scale(1.03)}}

/* เด็ก + เรือ (ภาพเดียว): โคลงเคลงเหมือนลอยน้ำ */
.crew-el{left:20%;top:41%;width:60%;z-index:4;pointer-events:none;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.28));
  transform-origin:50% 78%;animation:crewBob 3.6s ease-in-out infinite}
@keyframes crewBob{0%,100%{transform:translateY(-3px) rotate(-1.2deg)}
  50%{transform:translateY(7px) rotate(1.2deg)}}

/* ปลาว่ายน้ำ */
.fish{z-index:3;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.fishA{top:65%;width:18%;animation:swimLR 11s linear infinite}
.fishB{top:69%;width:19%;animation:swimRL 14s linear infinite 1s}
.fishC{top:79%;width:14%;animation:swimLR 8s  linear infinite 2s}
.fishD{top:75%;width:17%;animation:swimRL 12s linear infinite 3s}
.shark{top:71%;width:32%;animation:swimLR 18s linear infinite 1.5s}

/* หีบสมบัติทองที่พื้นทราย */
.gold-el{left:35%;top:83%;width:30%;z-index:3;pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)) drop-shadow(0 0 12px rgba(255,213,79,.55));
  transform-origin:50% 100%;animation:goldGlow 2.8s ease-in-out infinite}
@keyframes goldGlow{50%{transform:translateY(-4px) scale(1.03);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)) drop-shadow(0 0 20px rgba(255,213,79,.85))}}
/* สไปรต์หันซ้ายตามต้นฉบับ → ว่ายไปขวาให้พลิก scaleX(-1) */
@keyframes swimLR{0%{left:-24%;transform:scaleX(-1)}100%{left:108%;transform:scaleX(-1)}}
@keyframes swimRL{0%{left:108%;transform:scaleX(1)}100%{left:-24%;transform:scaleX(1)}}

/* เหรียญทองลอย ๆ (หน้าแรก) */
.scene-coins{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.coin{position:absolute;animation:coinDrift ease-in-out infinite}
.coin i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fff6c4,#ffd24a 46%,#e6a51e 78%,#b9831c);
  border:1.5px solid #f3c14a;color:#9a6612;font-weight:900;font-style:normal;
  box-shadow:0 0 7px rgba(255,210,80,.6),inset 0 -2px 3px rgba(150,90,10,.5),inset 0 2px 2px #fff7cf;
  animation:coinSpin ease-in-out infinite}
.coin i::after{content:"฿"}
@keyframes coinDrift{0%{transform:translate(0,0)}25%{transform:translate(34px,-7px)}
  50%{transform:translate(0,-12px)}75%{transform:translate(-34px,-7px)}100%{transform:translate(0,0)}}
@keyframes coinSpin{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.22)}}

/* ฟองอากาศในฉาก */
.scene-bubbles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.scene-bubbles span{position:absolute;bottom:-24px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffffffcc,#ffffff22);
  animation:bubUp linear infinite}
@keyframes bubUp{0%{transform:translateY(0);opacity:.0}
  15%{opacity:.8}100%{transform:translateY(-62vh);opacity:0}}

/* ปุ่มเริ่มเล่น */
.start-btn{position:absolute;left:28%;top:70%;width:44%;background:none;border:none;padding:0;
  cursor:pointer;z-index:7;animation:btnFloat 1.8s ease-in-out infinite}
.start-btn img{width:100%;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.start-btn::after{content:"";position:absolute;inset:-6% -3%;border-radius:999px;
  border:3px solid #fff;opacity:0;animation:btnRing 1.8s ease-out infinite}
.start-btn:active{transform:scale(.95)}
@keyframes btnFloat{50%{transform:translateY(-5px) scale(1.04)}}
@keyframes btnRing{0%{transform:scale(.92);opacity:0}45%{opacity:.7}
  100%{transform:scale(1.12);opacity:0}}

/* ---------- ฉากเรือ landing (เวอร์ชันอีโมจิ สำรอง) ---------- */
.boat-scene{position:relative;height:210px;margin:6px auto 0;max-width:300px}
.kids{font-size:54px;position:absolute;left:50%;top:38px;transform:translateX(-50%);
  z-index:3;animation:bobv 2.4s ease-in-out infinite}
.boat{font-size:96px;position:absolute;left:50%;top:78px;transform:translateX(-50%);
  z-index:2;animation:bobv 2.4s ease-in-out infinite}
@keyframes bobv{50%{transform:translateX(-50%) translateY(-8px) rotate(-2deg)}}
.swim-fish{position:absolute;font-size:30px;opacity:.9}
.f1{top:150px;left:6%;animation:swim 6s linear infinite}
.f2{top:178px;left:30%;animation:swim 8s linear infinite 1s}
.f3{top:165px;left:60%;animation:swim 7s linear infinite 2s}
@keyframes swim{from{transform:translateX(-30px) scaleX(1)}
  49%{transform:translateX(110px) scaleX(1)}50%{transform:translateX(110px) scaleX(-1)}
  to{transform:translateX(-30px) scaleX(-1)}}
.treasure-glow{position:absolute;bottom:0;left:50%;width:80px;height:80px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,#ffe066aa,transparent 65%);
  animation:glowpulse 2.6s ease-in-out infinite}
@keyframes glowpulse{50%{opacity:.4;transform:translateX(-50%) scale(1.3)}}

/* ---------- ปุ่ม ---------- */
.btn{border:none;cursor:pointer;font-family:inherit;font-weight:800;
  padding:15px 26px;border-radius:999px;font-size:17px;color:#fff;
  transition:transform .12s,box-shadow .12s;display:inline-block;margin:6px auto}
.btn:active{transform:scale(.94)}
.btn-primary{background:linear-gradient(180deg,#ff9a3d,#ff6f00);
  box-shadow:0 6px 0 #c43e00,0 10px 18px rgba(0,0,0,.25)}
.btn-primary:active{box-shadow:0 2px 0 #c43e00}
.btn-gold{background:linear-gradient(180deg,#ffe066,#ffb300);color:#5a3d00;
  box-shadow:0 6px 0 #c98800,0 10px 18px rgba(0,0,0,.25);font-size:19px}
.btn-gold:active{box-shadow:0 2px 0 #c98800}
.btn-ghost{background:rgba(255,255,255,.18);color:#fff;border:2px solid rgba(255,255,255,.6);
  box-shadow:0 3px 8px rgba(0,0,0,.15);font-size:15px;padding:12px 20px}
.big-tap{font-size:20px;padding:18px 34px;margin-top:18px}
.pulse{animation:btnpulse 1.6s ease-in-out infinite}
@keyframes btnpulse{50%{transform:scale(1.06)}}

/* ---------- STEP1 จุดตกปลา ---------- */
.spots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.spot{position:relative;aspect-ratio:1/1;border-radius:22px;cursor:pointer;
  background:radial-gradient(circle at 50% 38%,#5ec8ff,#1565c0);
  border:3px solid #ffffffcc;box-shadow:0 6px 14px rgba(0,0,0,.25),inset 0 -6px 12px #0d47a155;
  display:flex;align-items:center;justify-content:center;font-size:34px;
  transition:transform .15s}
.spot::after{content:"❓";filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.spot .ripple{position:absolute;inset:0;border-radius:22px;border:3px solid #fff;
  opacity:0}
.spot:hover{transform:translateY(-4px) scale(1.04)}
.spot:hover .ripple{animation:ripple 1s ease-out infinite}
@keyframes ripple{from{transform:scale(.7);opacity:.8}to{transform:scale(1.25);opacity:0}}
.spot .spotbub{position:absolute;width:8px;height:8px;background:#ffffffaa;border-radius:50%;
  bottom:10px;opacity:0}
.spot:hover .spotbub{animation:spotrise 1.2s linear infinite}
@keyframes spotrise{0%{opacity:.9;transform:translateY(0)}100%{opacity:0;transform:translateY(-46px)}}
.spot.picked{transform:scale(1.08);border-color:var(--gold);
  box-shadow:0 0 0 4px var(--gold),0 8px 20px rgba(0,0,0,.3)}

/* ---------- STEP2 เหวี่ยงเบ็ด ---------- */
.cast-scene{position:relative;height:200px;margin:10px auto;max-width:280px}
.rod{font-size:80px;position:absolute;left:8%;top:0;transform-origin:bottom left;
  animation:cast 1.1s ease-in-out}
@keyframes cast{0%{transform:rotate(-30deg)}40%{transform:rotate(20deg)}100%{transform:rotate(6deg)}}
.float-bob{position:absolute;right:18%;top:120px;font-size:26px;opacity:0;
  animation:dropin .5s ease .5s forwards,bobv 1.5s ease-in-out 1s infinite}
@keyframes dropin{from{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:translateY(0)}}
.splash{position:absolute;right:14%;top:130px;width:60px;height:30px;opacity:0}
.splash.go{animation:splashfx .6s ease .5s}
@keyframes splashfx{0%{opacity:0;transform:scale(.2)}40%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
.splash::before{content:"💧💧💧";font-size:20px}
.progress{height:20px;background:rgba(255,255,255,.25);border-radius:999px;overflow:hidden;
  max-width:300px;margin:8px auto;border:2px solid #ffffffaa}
.progress-bar{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#ffe066,#ff9a3d);transition:width .2s linear}

/* ---------- STEP3 ปลากัด ---------- */
.bite-scene{position:relative;height:200px;display:flex;align-items:center;justify-content:center}
.splash-big{font-size:40px;position:absolute;top:20px;animation:shake .25s linear infinite}
.float-shake{font-size:40px;animation:shake .15s linear infinite}
@keyframes shake{0%,100%{transform:translateX(-4px) rotate(-6deg)}50%{transform:translateX(4px) rotate(6deg)}}
.peek-fish{font-size:46px;position:absolute;bottom:18px;animation:peek 1s ease-in-out infinite}
@keyframes peek{0%,100%{transform:translateY(20px);opacity:.5}50%{transform:translateY(-6px);opacity:1}}

/* ---------- STEP4 ลุ้นผล ---------- */
.mystery-box{font-size:120px;animation:spinbox 1s ease-in-out infinite}
@keyframes spinbox{0%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(12deg) scale(1.12)}100%{transform:rotate(-12deg) scale(1)}}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9}
.flash.go{animation:flashfx .5s ease}
@keyframes flashfx{0%{opacity:0}50%{opacity:.85}100%{opacity:0}}
.drumdots{margin-top:16px;display:flex;gap:10px;justify-content:center}
.drumdots span{width:14px;height:14px;border-radius:50%;background:#fff;
  animation:bounce .6s ease-in-out infinite}
.drumdots span:nth-child(2){animation-delay:.15s}
.drumdots span:nth-child(3){animation-delay:.3s}
@keyframes bounce{50%{transform:translateY(-12px);opacity:.6}}

/* ---------- STEP5 รางวัล ---------- */
.reward-card{max-width:300px;margin:0 auto 16px;padding:26px 20px;border-radius:28px;
  background:linear-gradient(160deg,#ffffff,#eaf6ff);
  box-shadow:0 14px 34px rgba(0,0,0,.35);position:relative;overflow:hidden;
  animation:pop .6s cubic-bezier(.2,1.4,.5,1) both}
.reward-card::before{content:"";position:absolute;top:-60%;left:-30%;width:160%;height:80%;
  background:linear-gradient(180deg,#ffffffaa,transparent);transform:rotate(8deg);
  animation:sweep 2.5s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-60%) rotate(8deg)}100%{transform:translateX(60%) rotate(8deg)}}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.reward-icon{font-size:84px;animation:bobv 2s ease-in-out infinite;position:relative;z-index:2}
.reward-title{font-size:22px;font-weight:800;color:#1e88e5;margin-top:4px}
.reward-name{font-size:30px;font-weight:800;color:#ff6f00;margin:4px 0 10px;position:relative;z-index:2}
.reward-rarity{display:inline-block;padding:5px 16px;border-radius:999px;color:#fff;
  font-weight:800;font-size:13px;letter-spacing:1px}
.rar-common{background:#78909c}.rar-credit{background:#43a047}
.rar-special{background:#8e24aa}.rar-secret{background:#1e88e5}
.rar-jackpot{background:linear-gradient(90deg,#ff8f00,#ffd54f);color:#5a3d00}
.lucky-text{color:#fff;font-weight:700;font-size:16px;margin-bottom:14px;
  text-shadow:0 2px 6px rgba(0,0,0,.3)}
.reward-actions{display:flex;flex-direction:column;align-items:center;gap:4px}
.stat{margin-top:14px;color:#eaf7ff;font-size:13px;opacity:.85}

/* ---------- เอฟเฟกต์ canvas ---------- */
#fx{position:fixed;inset:0;z-index:50;pointer-events:none}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(40px);
  background:rgba(0,0,0,.82);color:#fff;padding:12px 22px;border-radius:999px;
  font-weight:700;font-size:14px;z-index:80;opacity:0;transition:.3s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-height:640px){
  .boat-scene{height:150px}.boat{font-size:74px}.kids{font-size:42px}
  .mystery-box{font-size:90px}.reward-icon{font-size:64px}
}