*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;background:#f8f9fa;overflow:hidden;height:100dvh}
body.page{overflow:auto;background:linear-gradient(to bottom,#f3fbff,#f8f9fa)}

/* Optional: reduced motion for low-end devices */
.reduced-motion *{
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* 基础动画 */
@keyframes fadeIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes floatReal{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-3px) rotate(0.6deg)}100%{transform:translateY(0) rotate(0deg)}}
@keyframes floatSoft{0%{transform:translateY(0)}30%{transform:translateY(-1px)}100%{transform:translateY(0)}}
@keyframes rodCast{0%{transform:rotate(calc(var(--rodBase, 0deg) + 0deg))}45%{transform:rotate(calc(var(--rodBase, 0deg) - 32deg))}100%{transform:rotate(calc(var(--rodBase, 0deg) + 0deg))}}
@keyframes rodPull{0%{transform:rotate(calc(var(--rodBase, 0deg) + 0deg))}50%{transform:rotate(calc(var(--rodBase, 0deg) + 10deg))}100%{transform:rotate(calc(var(--rodBase, 0deg) + 0deg))}}
@keyframes rodYank{
  0%{transform:rotate(calc(var(--rodBase, 0deg) + 0deg)) translateY(0)}
  35%{transform:rotate(calc(var(--rodBase, 0deg) + 18deg)) translateY(-10px)}
  70%{transform:rotate(calc(var(--rodBase, 0deg) + 12deg)) translateY(-6px)}
  100%{transform:rotate(calc(var(--rodBase, 0deg) + 0deg)) translateY(0)}
}
@keyframes hookSplash{0%{transform:translateY(-80px);opacity:1}100%{transform:translateY(0);opacity:0}}
@keyframes waveSmall{0%{transform:scale(.2);opacity:.7}100%{transform:scale(1.4);opacity:0}}
@keyframes waterMove{0%{background-position-x:0}100%{background-position-x:200px}}
@keyframes fishShadow{0%{left:-10%}100%{left:110%}}
@keyframes bitePull{0%{transform:translateY(0)}50%{transform:translateY(6px)}100%{transform:translateY(0)}}
@keyframes coinFly{
  0%{opacity:1;transform:translateY(0) scale(1);text-shadow:0 0 10px #ffd966}
  50%{transform:translateY(-50px) scale(1.3);text-shadow:0 0 20px #fffc44}
  100%{opacity:0;transform:translateY(-90px) scale(1)}
}
@keyframes coinPulse{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes flyIn{
  0%{transform:translate(-50%,-50%) scale(.85) rotate(-10deg);opacity:.0}
  15%{opacity:1}
  100%{transform:translate(-50%,-50%) scale(.55) rotate(8deg);opacity:0}
}
@keyframes iconFishSwim{0%{transform:translateY(0)}50%{transform:translateY(-3px)}100%{transform:translateY(0)}}
@keyframes plantMove{0%{transform:rotate(0deg)}50%{transform:rotate(1.5deg)}100%{transform:rotate(0deg)}}
@keyframes btnPulse{0%{box-shadow:0 0 0 0 rgba(68,180,204,.3)}70%{box-shadow:0 0 0 10px rgba(68,180,204,0)}100%{box-shadow:0 0 0 0 rgba(68,180,204,0)}}
@keyframes cloudMove{0%{transform:translateX(0)} 100%{transform:translateX(35px)}}
@keyframes skyDrift{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
@keyframes sunDrift{0%{transform:translateY(0) translateX(0)}50%{transform:translateY(-3px) translateX(-2px)}100%{transform:translateY(0) translateX(0)}}
@keyframes npcFloat{0%{transform:translateY(0)}50%{transform:translateY(-3px)}100%{transform:translateY(0)}}
@keyframes rainDrop{0%{transform:translateY(-10px);opacity:.6}100%{transform:translateY(60px);opacity:0}}
@keyframes lightning{0%{opacity:0.1}50%{opacity:1}100%{opacity:0.1}}
@keyframes nightFade{0%{background:rgba(0,0,0,0)}100%{background:rgba(0,0,0,0.60)}}
@keyframes torchShine{0%{box-shadow:0 0 20px 10px rgba(255,240,100,0.4)}100%{box-shadow:0 0 30px 15px rgba(255,240,100,0.6)}}
@keyframes bubbleFloat{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-40px);opacity:0}}
@keyframes surprisePop{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}

/* 年龄层风格 */
.style-kid{--main:#44bbee;--sub:#ff8cb4;--btn:#44bbee;--txt:#333}
.style-young{--main:#55a3c9;--sub:#ff7b9c;--btn:#55a3c9;--txt:#222}
.style-old{--main:#6b8b9e;--sub:#e29778;--btn:#6b8b9e;--txt:#111}

/* 主容器 */
.game{width:100vw;height:100dvh;display:flex;flex-direction:column;perspective:1000px}
.fadeIn{animation:fadeIn .35s ease-out}
.game-pond{background:linear-gradient(to bottom,#edf7f2 0%,#daf2e4 40%,#c7edd6 100%)}
.game-lake{background:linear-gradient(to bottom,#e8f4fc 0%,#d4ecff 40%,#bfe2ff 100%)}
.game-sea{background:linear-gradient(to bottom,#f0f9ff 0%,#d6f3ff 40%,#bcedff 100%)}

/* 天空覆盖层 */
.sky{position:absolute;left:0;top:0;width:100%;height:45%;z-index:1}
.cloud{position:absolute;width:50px;height:26px;background:rgba(255,255,255,0.85);border-radius:13px;animation:cloudMove 35s linear infinite}
.cloud1{top:26%;left:12%}
.cloud2{top:30%;right:18%}
.sun{position:absolute;top:24%;right:12%;width:38px;height:38px;background:#ffd966;border-radius:50%}
.moon{position:absolute;top:24%;right:12%;width:30px;height:30px;background:#f0f0f0;border-radius:50%;display:none}
.night .moon{
  box-shadow:
    0 0 24px rgba(220,235,255,.22),
    0 0 80px rgba(220,235,255,.10);
}
.sun{animation:sunDrift 22s ease-in-out infinite}
.moon{animation:sunDrift 26s ease-in-out infinite}
.cloud{animation-timing-function:linear; animation-duration: 92s}
.cloud1,.cloud2{animation-name: cloudMove, skyDrift; animation-duration: 92s, 18s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite;}
.fog{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:0;
  background:
    radial-gradient(900px 320px at 40% 40%, rgba(255,255,255,.40), transparent 70%),
    radial-gradient(900px 320px at 70% 55%, rgba(255,255,255,.34), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.22));
  transition: opacity .6s ease;
}
.fog.on{opacity:.78}
.snow{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  display:none;
}
.snowflake{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  box-shadow:0 0 6px rgba(255,255,255,.25);
  opacity:.0;
  animation: snowFall 3.2s linear infinite;
}
@keyframes snowFall{
  0%{transform:translateY(-20px) translateX(0); opacity:0}
  10%{opacity:.75}
  100%{transform:translateY(240px) translateX(18px); opacity:0}
}
.nightMask{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0);
  display:none;
  z-index:50;
  pointer-events:none;
}
.nightMask::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 50% 10%, rgba(20,35,55,.10), rgba(0,0,0,.42) 55%, rgba(0,0,0,.56) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.34));
  opacity:0;
}
.night .nightMask{display:block}
.night .nightMask::before{opacity:1; transition:opacity .6s ease}
.rain{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:3}
.raindrop{position:absolute;width:2px;height:12px;background:rgba(68,180,204,.4);border-radius:1px;animation:rainDrop .6s linear infinite}
.lightning{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,0);display:none;z-index:4}
.lightning.active{display:block;animation:lightning 0.3s infinite}

/* 顶部 */
.top{padding:12px 16px;display:flex;justify-content:space-between;color:var(--txt);font-size:14px;background:rgba(255,255,255,.6);border-radius:14px;margin:10px;box-shadow:0 2px 8px rgba(0,0,0,.06);position:relative;z-index:10}
.top .item{display:flex;align-items:center;gap:6px;cursor:pointer}
.top a.item{text-decoration:none;color:inherit}

/* Bag page */
.pageWrap{min-height:100dvh;padding:14px 12px 22px}
.pageHead{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.pageTitle{
  font-weight:800;
  font-size:16px;
  color:#223;
}
.pageSub{font-size:12px;color:#667}
.card{
  background:rgba(255,255,255,.85);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
}
.bagSummary{padding:12px 12px 10px}
.bagSummary .row{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 10px;border-radius:999px;
  background:rgba(85,163,201,.12);
  color:#245; font-size:12px;
}
.pill b{color:#123}
.bagList{margin-top:10px}
.bagRow{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;
  border-top:1px solid rgba(0,0,0,.05);
}
.bagRow:first-child{border-top:none}
.bagL{display:flex;align-items:center;gap:10px;min-width:0}
.bagL img{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.7);padding:4px}
.bagNm{font-weight:700;color:#223;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.bagMeta{font-size:12px;color:#667;margin-top:2px}
.bagR{display:flex;align-items:center;gap:8px}
.miniBtn{
  border:none;border-radius:12px;
  padding:8px 10px;
  font-weight:800;font-size:12px;
  background:rgba(255,255,255,.9);
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  cursor:pointer;
}
.miniBtn.primary{background:var(--btn, #55a3c9);color:#fff}
.miniBtn.danger{background:rgba(255,123,156,.16);color:#823}
.miniBtn:active{transform:scale(.98)}

/* 日历天气 */
.calendar{position:absolute;top:65px;left:10px;z-index:10;background:rgba(255,255,255,.6);padding:6px 10px;border-radius:10px;font-size:12px}

/* Role badge */
.roleBadge{
  position:absolute;
  top: 65px;
  right: 10px;
  z-index: 10;
  background: rgba(255,255,255,.60);
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  display:flex;
  align-items:center;
  gap:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.roleBadge .roleIcon{font-size:16px}
.roleBadge .roleName{color:#444}

/* 钓场 */
.areaBox{
  padding:6px;
  background:rgba(255,255,255,.42);
  border-radius:14px;
  margin:0;
  display:flex;
  gap:6px;
  position:absolute;
  left:10px;
  right:10px;
  top: 104px;
  z-index:10;
  backdrop-filter: blur(6px);
}
.area{flex:1;padding:8px 0;border-radius:12px;border:none;background:rgba(255,255,255,.72);color:#444;font-size:12px;transition:all .2s;cursor:pointer}
.area.on{background:var(--btn);color:#fff;transform:scale(1.02);box-shadow:0 3px 10px rgba(68,180,204,.3)}
@media (max-width: 420px){
  .areaBox{top:100px}
  .area{padding:7px 0}
}

/* 场景 */
.scene{flex:1;position:relative;overflow:hidden;transform-style:preserve-3d;padding-top:52px}

/* Floating "Area/Upgrade" button (keeps top clean) */
.fabArea{
  position:absolute;
  left: 10px;
  bottom: 96px;
  z-index: 80;
  border:none;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  font-size: 13px;
  color: #123;
  background: rgba(255,255,255,.78);
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  cursor:pointer;
}
.fabArea:active{transform:scale(.98)}
@media (max-width: 420px){
  .fabArea{bottom: 92px; padding: 9px 11px}
}

/* Area menu list */
.areaList{margin-top:10px}
.areaRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  background:#f8f9fa;
  margin-top:10px;
  border:1px solid rgba(0,0,0,.04);
}
.areaRow:first-child{margin-top:0}
.areaRow .l{min-width:0}
.areaRow .nm{font-weight:900;color:#223}
.areaRow .sub{font-size:12px;color:#667;margin-top:3px;line-height:1.35}
.areaRow .tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(85,163,201,.12);
  color:#245;
  white-space:nowrap;
}
.areaRow.locked .tag{background:rgba(255,123,156,.14);color:#823}
.areaRow.on{outline:2px solid rgba(85,163,201,.35)}

/* 水域 */
.water{position:absolute;left:0;top:45%;width:100%;height:55%}
.water-pond{background:linear-gradient(to bottom,#c7edd6 0%,#a8e7c9 50%,#88e0bb 100%)}
.water-lake{background:linear-gradient(to bottom,#bfe2ff 0%,#9cd5ff 50%,#79cbff 100%)}
.water-sea{background:linear-gradient(to bottom,#bcedff 0%,#94e0ff 50%,#6bd6ff 100%)}
.waterLine{position:absolute;left:0;top:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='50'%3E%3Cpath fill='rgba(255,255,255,0.25)' d='M0,25 Q85,12 170,25 T340,25'/%3E%3C/svg%3E");animation:waterMove 12s linear infinite}

/* 气泡 */
.bubble{position:absolute;width:6px;height:6px;background:rgba(255,255,255,0.6);border-radius:50%;animation:bubbleFloat 4s infinite}

/* 场景装饰 */
.scene-decor{position:absolute;z-index:5;transform-style:preserve-3d}
.plant{animation:plantMove 4s infinite ease-in-out}
.pond-grass{width:22px;height:36px;background:#88d19c;border-radius:10px;bottom:28%;left:15%;transform:translateZ(10px)}
.pond-flower{width:12px;height:12px;background:#ffafcc;border-radius:50%;bottom:31%;left:25%;transform:translateZ(18px)}
.lake-lotus{width:16px;height:20px;background:#ff8cb4;border-radius:8px;bottom:24%;left:24%;transform:translateZ(22px)}
.sea-coral{width:26px;height:40px;background:#ff9eb8;border-radius:13px;bottom:24%;left:16%;transform:translateZ(18px)}
.sea-shell{width:16px;height:10px;background:#f9e0b8;border-radius:5px;bottom:22%;left:30%;transform:translateZ(6px)}

/* 鱼影 */
.fishShadow{position:absolute;background:rgba(100,150,180,.12);border-radius:50%;filter:blur(2px)}
.fs-pond-1{width:18px;height:7px;top:64%;animation:fishShadow 18s linear infinite}
.fs-pond-2{width:24px;height:9px;top:74%;animation:fishShadow 22s linear infinite}
.fs-lake-1{width:30px;height:11px;top:66%;animation:fishShadow 20s linear infinite}
.fs-lake-2{width:38px;height:14px;top:77%;animation:fishShadow 25s linear infinite}
.fs-sea-1{width:48px;height:17px;top:61%;animation:fishShadow 24s linear infinite}
.fs-sea-2{width:64px;height:23px;top:73%;animation:fishShadow 30s linear infinite}

/* 鱼竿 */
.rodBox{
  position:absolute;
  left:49.3%;
  bottom:12px;
  --rodBase:-5deg;
  transform:rotate(var(--rodBase));
  transform-origin:bottom center;
  z-index:60;
  transform-style:preserve-3d;
}
.rod{position:relative;width:7px;height:210px;transform:translateZ(30px)}
.rod .seg{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:7px;
  border-radius:999px;
  background:linear-gradient(to top,#8b6f4e 0%,#a0826a 20%,#c2a487 40%,#d4b89a 70%,#e6ccad 90%,#f2e2d2 100%);
  box-shadow:0 0 8px rgba(0,0,0,.08);
}
.rod .seg1{bottom:0;height:86px;transform:translateX(-50%) rotate(0deg);transform-origin:50% 100%}
.rod .seg2{bottom:78px;height:72px;width:6px;transform:translateX(-50%) rotate(0deg);transform-origin:50% 100%}
.rod .seg3{bottom:142px;height:70px;width:5px;transform:translateX(-50%) rotate(0deg);transform-origin:50% 100%}
.rodTip{
  position:absolute;
  left:50%;
  top:0;
  width:10px;
  height:10px;
  transform: translate(-50%,-50%);
  opacity:0;
  pointer-events:none;
}
.rod::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:45px;background:linear-gradient(to top,var(--btn, #55a3c9),#bde4ff);border-radius:1px;box-shadow:0 0 6px var(--btn, #55a3c9);}
.rod::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:14px;height:22px;background:linear-gradient(to top,#6d553c,#8b6f4e);border-radius:7px;box-shadow:0 0 6px rgba(0,0,0,.15);}
.rodCast{animation:rodCast .65s ease-out}
.rodPull{animation:rodPull .3s infinite alternate}
.rodYank{animation:rodYank .36s ease-out}
/* Bend feel: segment rotations */
.rodBox.rodPull .seg2{transform:translateX(-50%) rotate(7deg)}
.rodBox.rodPull .seg3{transform:translateX(-50%) rotate(14deg)}
.rodBox.rodCast .seg2{transform:translateX(-50%) rotate(-6deg)}
.rodBox.rodCast .seg3{transform:translateX(-50%) rotate(-10deg)}
.rodBox.rodYank .seg2{transform:translateX(-50%) rotate(10deg)}
.rodBox.rodYank .seg3{transform:translateX(-50%) rotate(20deg)}

/* 手电筒 */
.torch{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);width:10px;height:10px;background:#ff0;border-radius:50%;display:none;z-index:55;animation:torchShine 1.5s infinite alternate}

/* 鱼钩 / 鱼漂 */
.hook{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:15px;opacity:0;z-index:50;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.12))}
.hookAct{animation:hookSplash .45s ease-out forwards}
.hookGhost{
  position:absolute;
  left:0;top:0;
  font-size:14px;
  transform:translate(-50%,-50%);
  opacity:0;
  pointer-events:none;
  z-index:47;
  filter: blur(.45px) drop-shadow(0 6px 10px rgba(0,0,0,.10));
}
.float{position:absolute;left:50%;top:43%;transform:translateX(-50%);width:7px;height:28px;display:none;z-index:45}
.floatBody{
  width:100%;
  height:100%;
  /* top = above water (color), bottom = underwater (lighter) */
  background:linear-gradient(to bottom,var(--sub) 48%, rgba(255,255,255,.92) 48%);
  border-radius:4px;
  box-shadow:0 0 5px rgba(0,0,0,.09);
  transform:translateZ(10px);
}
.floatShow{display:block;animation:floatReal 2.2s ease-in-out infinite}
.floatSoft{animation:floatSoft 3s infinite ease-in-out!important}
.floatBite{animation:bitePull .2s infinite alternate!important}
.floatYank{animation: floatYank .36s ease-out!important}
@keyframes floatYank{
  0%{transform:translateX(-50%) translateY(0)}
  40%{transform:translateX(-50%) translateY(-7px)}
  100%{transform:translateX(-50%) translateY(0)}
}
.wave{position:absolute;left:50%;top:45%;transform:translateX(-50%);width:26px;height:26px;border:2px solid rgba(255,255,255,.5);border-radius:50%;opacity:0;z-index:40}
.waveAct{animation:waveSmall .7s ease-out forwards}

/* Fishing line (rod tip -> float) */
.lineSvg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:59; /* under rod (60), above most */
  pointer-events:none;
}
.lineSvg path{
  fill:none;
  stroke: rgba(30,45,55,.30);
  stroke-width: .7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.lineSvg #linePathUnder{
  stroke: rgba(255,255,255,.26);
  stroke-width: .85;
  filter: blur(.15px);
}
.game.style-old .lineSvg #linePathUnder{stroke: rgba(255,255,255,.22)}
.night .lineSvg #linePathUnder{stroke: rgba(255,255,255,.18)}

/* Hook bubbles + faint fish shadow near hook */
@keyframes hookBubbleUp{
  0%{transform:translate(-50%,-50%) scale(.65);opacity:0}
  12%{opacity:.55}
  100%{transform:translate(calc(-50% + var(--dx, 0px)), calc(-50% - var(--dy, 36px))) scale(1.05);opacity:0}
}
.hook.struggle{
  animation: hookStruggle .22s infinite alternate;
}
@keyframes hookStruggle{
  0%{transform:translate(-50%,-50%) rotate(-6deg)}
  100%{transform:translate(-50%,-50%) rotate(8deg)}
}
.hookBubble{
  position:absolute;
  left:0;top:0;
  width:7px;height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.22);
  pointer-events:none;
  z-index:44;
  animation:hookBubbleUp 1.6s ease-out forwards;
  filter: blur(.1px);
}
.hookShadowNear{
  position:absolute;
  left:0;top:0;
  width:26px;height:10px;
  border-radius:999px;
  background:rgba(60,90,110,.10);
  filter: blur(2px);
  pointer-events:none;
  z-index:43;
  opacity:0;
  transition:opacity .3s ease;
}
.hookShadowNear.on{opacity:1}

/* Extra faint fish(s) near hook: appear/disappear softly */
.hookFishNear{
  position:absolute;
  left:0;top:0;
  width:34px;height:12px;
  border-radius:999px;
  background:rgba(60,90,110,.08);
  filter: blur(2.4px);
  pointer-events:none;
  z-index:42;
  opacity:0;
}

/* Tiny bait clump near hook */
.baitDot{
  position:absolute;
  left:0;top:0;
  width:6px;height:6px;
  border-radius:50%;
  background:rgba(255,230,170,.55);
  box-shadow:0 0 10px rgba(255,230,170,.20);
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:45;
  filter: blur(.25px);
}

/* Surface struggle preview (fish breaks near surface) */
.surfaceFish{
  position:absolute;
  left:0;top:0;
  width:28px;height:28px;
  border-radius:12px;
  background:rgba(255,255,255,.60);
  padding:4px;
  pointer-events:none;
  z-index:46;
  opacity:0;
  filter: blur(.35px) drop-shadow(0 8px 12px rgba(0,0,0,.08));
}
.surfaceFish img{width:100%;height:100%}
.game.style-kid .lineSvg path{stroke: rgba(30,45,55,.34)}
.game.style-old .lineSvg path{stroke: rgba(30,45,55,.46)}
.night .lineSvg path{stroke: rgba(255,255,255,.22)}

/* Cast splash at float (reference-like) */
.splash2{
  position:absolute;
  left:50%;
  top:45%;
  width: 52px;
  height: 22px;
  transform: translateX(-50%) scale(.6);
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,.12), transparent 70%);
  opacity: 0;
  z-index: 44;
  pointer-events:none;
}
.splash2.on{animation: splash2 .55s ease-out forwards}
@keyframes splash2{
  0%{opacity:0; transform:translateX(-50%) translateY(-6px) scale(.5)}
  35%{opacity:1}
  100%{opacity:0; transform:translateX(-50%) translateY(0) scale(1.6)}
}

/* Night fishing spotlight (float area bright, others dark) */
.spotlight{
  position:fixed;
  left:50%;
  top:45%;
  width: 280px;
  height: 280px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  pointer-events:none;
  z-index: 60; /* above nightMask (50) */
  opacity: 0;
  /* intensity via --sp (0.6~1.0) */
  background:
    radial-gradient(
      closest-side,
      rgba(255,255,255, calc(0.26 * var(--sp, .82))),
      rgba(255,255,255, calc(0.10 * var(--sp, .82))) 32%,
      rgba(255,255,255, calc(0.02 * var(--sp, .82))) 58%,
      rgba(0,0,0,0) 72%
    );
  mix-blend-mode: screen;
  filter: blur(.2px);
}
.spotlight.on{opacity:1}
.spotlight::after{
  /* water reflection ellipse */
  content:"";
  position:absolute;
  left:50%;
  top:58%;
  width: 240px;
  height: 120px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: radial-gradient(
    closest-side,
    rgba(255,255,255, calc(0.18 * var(--sp, .82))),
    rgba(255,255,255, calc(0.06 * var(--sp, .82))) 42%,
    rgba(0,0,0,0) 72%
  );
  opacity:.8;
}
.night .spotlight{mix-blend-mode: screen}

/* Bobber a bit brighter when torch/spotlight is on */
.night .floatShow .floatBody{box-shadow:0 0 10px rgba(255,255,255,.10), 0 0 18px rgba(255,240,160,.08)}

/* 提示 */
.tip{position:absolute;left:50%;top:22%;transform:translateX(-50%);color:var(--txt);font-size:15px;text-shadow:0 1px 2px rgba(255,255,255,.7);text-align:center;z-index:30}
.fishTip{position:absolute;left:50%;top:28%;transform:translateX(-50%);color:var(--main);font-size:16px;font-weight:bold;display:none;z-index:35}
.fishTip.show{display:block}
.surpriseTip{position:absolute;left:50%;top:32%;transform:translateX(-50%);color:#ff9500;font-size:14px;display:none;z-index:35}
.surpriseTip.show{display:block}

/* 仓库 */
.storage{position:absolute;right:10px;top:120px;bottom:140px;width:76px;background:rgba(255,255,255,.65);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;z-index:20;transform:translateZ(20px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.fishItem{display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(255,255,255,.85);border-radius:8px;padding:6px 4px}
.fishIcon{width:26px;height:26px;display:block;animation:iconFishSwim 1.4s infinite ease-in-out}
.fishText{color:#555;font-size:11px;line-height:1.1;text-align:center;white-space:pre-line}

/* 按钮 */
.btnGroup{display:flex;gap:14px;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));background:rgba(255,255,255,.5);border-radius:18px;margin:0 10px 10px;position:relative;z-index:10}
.btn{flex:1;padding:14px 0;border:none;border-radius:30px;font-size:16px;font-weight:bold;transition:all .2s;box-shadow:0 4px 10px rgba(0,0,0,.06);cursor:pointer}
.btn:active{transform:scale(.96) translateY(2px);opacity:.95}
.btnCast{background:var(--btn);color:#fff;animation:btnPulse 2s infinite}
.btnPull{background:var(--sub);color:#fff;display:none}
.btnPull.show{display:block}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* Fight HUD (tiny progress bar near buttons) */
.fightHud{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 11;
  display:none;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
}
.fightHud.on{display:flex}
.fightTxt{font-size:12px;color:rgba(255,255,255,.92);font-weight:900;letter-spacing:.5px;white-space:nowrap}
.fightBar{
  flex:1;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.20);
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.fightBar i{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(85,163,201,.88), rgba(255,123,156,.88));
  box-shadow:0 0 18px rgba(255,240,160,.10);
  transition: width .12s linear;
}
.night .fightHud{background: rgba(0,0,0,.22)}

/* 金币 */
.coinFly{position:absolute;left:50%;top:42%;transform:translateX(-50%);color:#ffd966;font-size:22px;font-weight:bold;z-index:100;animation:coinFly 1.1s forwards}
.coinPulse{animation:coinPulse .4s ease-out}

/* Fish fly to storage */
.flyFish{
  position:absolute;
  left:0;
  top:0;
  width:34px;
  height:34px;
  z-index:90;
  pointer-events:none;
  transform:translate(-50%,-50%);
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.10));
}
.flyFish img{
  width:100%;
  height:100%;
  border-radius:10px;
  background:rgba(255,255,255,.82);
  padding:5px;
}
.flyFish.done{animation: flyIn .35s ease-out forwards}

/* 弹窗 */
.mask{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,20,40,.25);z-index:999;display:flex;align-items:center;justify-content:center}
.panel{background:#fff;border-radius:20px;width:86%;max-width:340px;padding:22px;box-shadow:0 8px 24px rgba(0,0,0,.08);animation:fadeIn .5s forwards;position:relative}
.panel{max-height:calc(86vh - env(safe-area-inset-bottom));overflow:auto}
.panel h2{color:#222;margin-bottom:12px}
.panel p{color:#555;line-height:1.6;margin-bottom:8px}
.panel .btnOk{width:100%;padding:13px 0;background:var(--btn, #55a3c9);color:#fff;border:none;border-radius:16px;margin-top:16px;font-size:15px;font-weight:bold;display:block!important;cursor:pointer}

/* 年龄选择 */
.ageGrid{display:flex;gap:10px;margin:16px 0}
.ageItem{flex:1;background:#f8f9fa;border-radius:14px;padding:12px 8px;text-align:center;cursor:pointer}
.ageItem.active{background:#e6f9ff;border:2px solid var(--btn)}
.ageIcon{font-size:32px;margin-bottom:6px}
.ageText{font-size:12px;color:#444}

/* 角色选择 */
.roleGrid{display:flex;gap:10px;margin:16px 0}
.roleItem{flex:1;background:#f8f9fa;border-radius:14px;padding:12px 8px;text-align:center;cursor:pointer}
.roleItem.active{background:#e6f9ff;border:2px solid var(--btn)}
.roleIcon{font-size:32px;margin-bottom:6px}
.roleText{font-size:12px;color:#444}

/* 商店/交易 */
.shopItem{background:#f8f9fa;border-radius:10px;padding:10px 12px;margin:8px 0;cursor:pointer}
.shopTitle{font-size:13px;font-weight:bold}
.shopDesc{font-size:11px;color:#666;margin-top:2px}

/* Sys settings rows */
.sysRow{margin:10px 0;color:#333;font-size:14px}
.sysRow input{transform:scale(1.05);margin-right:8px}

/* Tooltip (desktop hover) */
.tooltip{
  position:fixed;
  left:0;
  top:0;
  z-index: 1200;
  background: rgba(17,24,39,.92);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  max-width: min(320px, calc(100vw - 20px));
  pointer-events:none;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease;
}
.tooltip.on{opacity:1; transform: translateY(0)}
.tooltip .t{font-weight:800}
.tooltip .m{opacity:.72}

/* Market (player exchange mock) */
.marketSec{margin-top:10px}
.marketH{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 8px 0}
.marketH .ttl{font-size:13px;font-weight:900;color:#222}
.marketH .tag{font-size:11px;color:#666}
.orderRow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f8f9fa;border-radius:12px;padding:10px 10px;margin:8px 0}
.orderRow .l{display:flex;align-items:center;gap:8px;min-width:0}
.orderRow img{width:18px;height:18px}
.orderRow .nm{font-size:13px;font-weight:800;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.orderRow .sub{font-size:11px;color:#666}
.orderRow .r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.orderRow input{width:92px;padding:8px 8px;border-radius:10px;border:1px solid rgba(0,0,0,.08);background:#fff;color:#111}
.orderRow button{padding:8px 10px;border-radius:10px;border:1px solid rgba(0,0,0,.10);background:rgba(68,180,204,.14);cursor:pointer}
.orderRow button.sell{background:rgba(255,123,156,.14)}

/* NPC */
.npc{
  position:absolute;
  font-size:16px;
  z-index:15;
  opacity:.9;
  animation:npcFloat 2.8s infinite ease-in-out;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
}