* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1a20; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Helvetica Neue", sans-serif; color: #fff; touch-action: none; user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

#hud { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; z-index: 5; }
.stats { display: flex; gap: 8px; }
.stat { display: flex; align-items: center; gap: 6px; background: rgba(10, 20, 26, .55); backdrop-filter: blur(6px); padding: 6px 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,.15); }
.stat b { font-size: clamp(15px, 2.2vw, 19px); }
.stat small { opacity: .7; font-size: 12px; }
.ico { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.ico.coin { background: radial-gradient(circle at 35% 35%, #fff3b0, #f0b400 55%, #9a6a00); }
.ico.fishico { background: radial-gradient(circle at 35% 35%, #c8f0ff, #3aa0d0 60%, #1a5a80); }
.btns { display: flex; gap: 8px; pointer-events: auto; }
.btns button { background: rgba(10, 20, 26, .6); color: #fff; border: 1px solid rgba(255,255,255,.25); padding: 7px 14px; border-radius: 18px; font-size: 14px; backdrop-filter: blur(6px); }

#hint { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); font-size: clamp(12px, 1.8vw, 15px); background: rgba(0,0,0,.4); padding: 6px 14px; border-radius: 14px; white-space: nowrap; pointer-events: none; z-index: 4; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
#hint:empty { display: none; }

#bitePrompt { position: fixed; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(.8); font-size: clamp(24px, 5vw, 44px); font-weight: 800; color: #fff; text-shadow: 0 0 18px #ff4a1a, 0 2px 4px #000; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 6; white-space: nowrap; }
#bitePrompt.show { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: pulse .35s infinite alternate; }
@keyframes pulse { to { transform: translate(-50%, -50%) scale(1.08); } }

.panelHud { position: fixed; left: 50%; bottom: calc(60px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(460px, 86vw); background: rgba(8, 16, 22, .6); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 10px 14px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 5; }
.panelHud.show { opacity: 1; }
.label { font-size: 12px; opacity: .8; margin: 4px 0 3px; }
.bar { position: relative; height: 14px; background: rgba(255,255,255,.12); border-radius: 7px; overflow: hidden; }
.bar > div { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; }
#powerFill { background: linear-gradient(90deg, #4caf50, #ffeb3b 60%, #ff5722); width: 0; }
.tick { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.6); }
.bar.tension .zone { left: 20%; width: 65%; background: rgba(76, 175, 80, .28); border-radius: 0; }
#tensionFill { width: 40%; transition: background .2s; }
#tensionFill.safe { background: linear-gradient(90deg, #66bb6a, #a5d66a); }
#tensionFill.danger { background: linear-gradient(90deg, #ff9800, #f4433a); }
#tensionFill.slack { background: #90a4ae; }
#progressFill { background: linear-gradient(90deg, #29b6f6, #80deea); width: 0; }
#reelMsg { text-align: center; font-weight: 700; font-size: 15px; margin-bottom: 2px; }

#actionBtn { position: fixed; right: calc(16px + env(safe-area-inset-right)); bottom: calc(110px + env(safe-area-inset-bottom)); width: 92px; height: 92px; border-radius: 50%; border: 3px solid rgba(255,255,255,.7); background: radial-gradient(circle at 40% 35%, rgba(70,150,190,.9), rgba(20,60,90,.9)); color: #fff; font-size: 15px; font-weight: 700; z-index: 6; box-shadow: 0 4px 16px rgba(0,0,0,.4); touch-action: none; }
#actionBtn.urgent { background: radial-gradient(circle at 40% 35%, #ff7a4a, #c62a10); animation: btnp .3s infinite alternate; }
#actionBtn.hidden { display: none; }
@keyframes btnp { to { transform: scale(1.1); } }
@media (pointer: fine) and (min-width: 900px) { #actionBtn { width: 80px; height: 80px; font-size: 14px; } }

#toast { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); background: rgba(0,0,0,.65); padding: 10px 20px; border-radius: 20px; font-size: 16px; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 7; white-space: nowrap; }
#toast.show { opacity: 1; }


/* ---------- v2 ---------- */
#bobMark { position: fixed; left: -7px; top: -22px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid rgba(255,255,255,.85); filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); pointer-events: none; opacity: 0; z-index: 3; transition: opacity .2s; }
#bobMark.show { opacity: 1; }
#bobMark.alert { border-top-color: #ff4a1a; animation: bob .25s infinite alternate; }
@keyframes bob { to { margin-top: 6px; } }

.stat.lvl { gap: 8px; }
.lv { font-size: 13px; } .lv b { font-size: 17px; }
.xpbar { width: 70px; height: 6px; background: rgba(255,255,255,.18); border-radius: 3px; overflow: hidden; display: inline-block; }
.xpbar u { display: block; height: 100%; background: linear-gradient(90deg, #8fe388, #3fc3ff); width: 0; transition: width .4s; }
#coinChip.pop { animation: pop .45s; }
@keyframes pop { 40% { transform: scale(1.18); background: rgba(255,200,40,.45); } }
#gearInfo { position: fixed; top: calc(58px + env(safe-area-inset-top)); left: 12px; font-size: 12px; opacity: .85; text-shadow: 0 1px 3px #000; pointer-events: none; z-index: 5; }

#menu { position: fixed; left: calc(10px + env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 6; }
#menu button { position: relative; width: 58px; min-height: 50px; border-radius: 14px; border: 1px solid rgba(255,255,255,.25); background: rgba(10,20,26,.6); backdrop-filter: blur(6px); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; }
#menu button b { font-size: 15px; }
#menu button small { font-size: 11px; opacity: .8; }
#menu #netBtn.full { border-color: #ff7043; box-shadow: 0 0 10px rgba(255,112,67,.6); }
#questDot { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: #ff3b30; font-size: 11px; display: none; align-items: center; justify-content: center; padding: 0 4px; font-weight: 700; }
body.busy #menu { opacity: .35; }

#actionBtn { position: fixed; right: calc(16px + env(safe-area-inset-right)); bottom: calc(110px + env(safe-area-inset-bottom)); width: 92px; height: 92px; border-radius: 50%; border: 3px solid rgba(255,255,255,.7); background: radial-gradient(circle at 40% 35%, rgba(70,150,190,.9), rgba(20,60,90,.9)); color: #fff; font-size: 15px; font-weight: 700; z-index: 6; box-shadow: 0 4px 16px rgba(0,0,0,.4); touch-action: none; }
#actionBtn.urgent { background: radial-gradient(circle at 40% 35%, #ff7a4a, #c62a10); animation: btnp .3s infinite alternate; }
#actionBtn.hidden { display: none; }
@keyframes btnp { to { transform: scale(1.1); } }
#modeBtn { position: fixed; right: calc(20px + env(safe-area-inset-right)); bottom: calc(212px + env(safe-area-inset-bottom)); width: 84px; padding: 6px 4px; border-radius: 14px; border: 1px solid rgba(255,255,255,.35); background: rgba(10,20,26,.65); color: #fff; z-index: 6; display: flex; flex-direction: column; align-items: center; }
#modeBtn b { font-size: 15px; } #modeBtn small { font-size: 10px; opacity: .75; }
#modeBtn.lure { border-color: #7fd6ff; background: rgba(20,60,90,.75); }
body.busy #modeBtn { opacity: .35; }

#speedZone { background: rgba(76,175,80,.35); border-radius: 0 !important; }
#speedFill { background: #b0bec5; width: 0; } #speedFill.good { background: linear-gradient(90deg, #66bb6a, #c5e86a); }
#attrFill { background: linear-gradient(90deg, #ffb74d, #ff5252); width: 0; }
#lureMsg { text-align: center; font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.label small { opacity: .7; font-size: 11px; }

#strikeFx { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); font-size: clamp(26px, 6vw, 46px); font-weight: 900; text-shadow: 0 3px 10px rgba(0,0,0,.6); pointer-events: none; opacity: 0; z-index: 7; white-space: nowrap; }
#strikeFx.show { animation: sfx 1.1s ease-out; }
@keyframes sfx { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } }

#toast { position: fixed; left: 50%; top: 20%; transform: translateX(-50%); background: rgba(0,0,0,.7); padding: 10px 18px; border-radius: 20px; font-size: 15px; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 30; max-width: 90vw; text-align: center; white-space: normal; }
#toast.show { opacity: 1; }

#card { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 0 12px calc(14px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .35s cubic-bezier(.2,1.2,.4,1); z-index: 8; pointer-events: none; }
#card.show { transform: none; pointer-events: auto; }
.c-inner { width: min(440px, 100%); background: linear-gradient(160deg, rgba(20,32,40,.93), rgba(10,18,24,.95)); border: 2px solid var(--rc, #ccc); box-shadow: 0 0 30px color-mix(in srgb, var(--rc, #ccc) 45%, transparent); border-radius: 18px; padding: 12px 16px; text-align: center; }
.c-rar { display: inline-block; padding: 2px 12px; border-radius: 10px; background: var(--rc); color: #111; font-weight: 800; font-size: 13px; }
.c-name { font-size: clamp(24px, 5vw, 30px); font-weight: 800; margin: 4px 0 2px; color: var(--rc); text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.c-row { display: flex; justify-content: center; gap: 18px; font-size: 18px; font-weight: 700; }
.c-value { color: #ffd54f; }
.c-tag { margin-top: 3px; color: #a5f3a0; font-size: 14px; min-height: 18px; }
.c-bonus { font-size: 12px; color: #9fd8ff; }
.c-desc { font-size: 12px; opacity: .75; margin: 3px 0 8px; }
.c-btns { display: flex; gap: 8px; justify-content: center; }
.c-btns button { flex: 1; border: 0; color: #fff; font-size: 15px; font-weight: 700; padding: 10px 6px; border-radius: 20px; }
.c-btns .primary { background: linear-gradient(180deg, #4fc3f7, #0288d1); }
.c-btns .gold { background: linear-gradient(180deg, #ffca28, #e08a00); color: #2a1a00; }
.c-btns .ghost { background: rgba(255,255,255,.12); flex: .6; }
.c-btns button:disabled { opacity: .45; }

#panel { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; z-index: 20; padding: 12px; }
#panel.show { display: flex; }
.pbox { width: min(760px, 100%); max-height: 90vh; display: flex; flex-direction: column; background: rgba(14, 24, 30, .97); border: 1px solid rgba(255,255,255,.15); border-radius: 18px; padding: 12px 14px; }
.phead { display: flex; align-items: center; justify-content: space-between; font-size: 20px; font-weight: 800; }
.phead small { font-size: 14px; font-weight: 400; opacity: .85; margin-left: 8px; }
#panelClose { background: none; border: 0; color: #fff; font-size: 22px; padding: 4px 8px; }
#panelTabs { display: flex; gap: 6px; margin: 8px 0 4px; overflow-x: auto; }
#panelTabs button { flex-shrink: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; padding: 6px 14px; border-radius: 16px; font-size: 14px; }
#panelTabs button.on { background: #0288d1; border-color: #4fc3f7; }
#panelBody { overflow-y: auto; touch-action: pan-y; flex: 1; padding: 4px 2px; -webkit-overflow-scrolling: touch; }
#panelFoot:empty { display: none; }
#panelFoot { padding-top: 8px; }
#panelFoot .big { width: 100%; border: 0; padding: 12px; border-radius: 22px; font-size: 16px; font-weight: 700; background: linear-gradient(180deg, #ffca28, #e08a00); color: #2a1a00; }
#panelFoot .big:disabled { opacity: .45; }
.sec { font-size: 13px; opacity: .7; margin: 10px 0 6px; }
.empty { text-align: center; opacity: .7; padding: 30px 0; } .empty.small { padding: 6px; font-size: 13px; }
.list { display: flex; flex-direction: column; gap: 6px; }
.row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-left: 3px solid var(--rc, rgba(255,255,255,.2)); border-radius: 12px; padding: 8px 10px; margin-bottom: 6px; }
.row .thumb { width: 72px; flex-shrink: 0; } .row .thumb img { width: 100%; display: block; }
.row .info { flex: 1; min-width: 0; }
.row .nm { font-weight: 700; font-size: 15px; }
.row .sub { font-size: 12px; opacity: .75; }
.row button { flex-shrink: 0; border: 0; border-radius: 16px; padding: 8px 12px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(255,255,255,.12); }
.row button:disabled { opacity: .5; }
.row .sell { background: linear-gradient(180deg, #ffca28, #e08a00); color: #2a1a00; }
.row .keep.on { background: #5c6bc0; }
.row .buy { background: linear-gradient(180deg, #4fc3f7, #0288d1); display: flex; align-items: center; gap: 4px; }
.row .buy.poor { background: rgba(255,255,255,.12); color: #ffab91; }
.row .claim { background: linear-gradient(180deg, #8fe388, #2e9b3a); animation: btnp .6s infinite alternate; }
.row.locked { opacity: .55; }
.row.quest.claimed { opacity: .5; }
.rtag { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--rc); color: #111; font-weight: 700; vertical-align: 1px; }
.ptag { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: #ffe14a; color: #111; font-weight: 700; }
.stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.st { display: flex; align-items: center; gap: 4px; font-size: 11px; } .st i { font-style: normal; opacity: .75; }
.st em { width: 54px; height: 5px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; } .st em u { display: block; height: 100%; background: #4fc3f7; }
.have { font-size: 12px; color: #9fd8ff; }
.qbar { position: relative; height: 14px; background: rgba(255,255,255,.12); border-radius: 7px; overflow: hidden; margin: 5px 0 3px; }
.qbar u { display: block; height: 100%; background: linear-gradient(90deg, #66bb6a, #a5d66a); }
.qbar span { position: absolute; inset: 0; font-size: 10px; text-align: center; line-height: 14px; }
.reward { font-size: 12px; color: #ffd54f; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.opt { text-align: left; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.15); border-radius: 12px; color: #fff; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.opt b { font-size: 14px; } .opt small { font-size: 11px; opacity: .7; }
.opt.on { border-color: #4fc3f7; background: rgba(2,136,209,.3); }
.dex-legend { display: flex; gap: 12px; font-size: 12px; margin: 2px 0 10px; }
.dex-legend i { font-style: normal; color: var(--rc); }
.dex-legend i::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--rc); margin-right: 4px; }
.dexGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.dex-item { background: rgba(255,255,255,.05); border: 1.5px solid var(--rc); border-radius: 12px; padding: 6px; text-align: center; }
.dex-item img { width: 100%; aspect-ratio: 240/150; object-fit: contain; background: radial-gradient(ellipse at center, rgba(255,255,255,.12), transparent 70%); }
.dex-item.locked img { filter: brightness(0) opacity(.55); }
.dex-item.locked { border-color: rgba(255,255,255,.15); }
.dex-name { font-weight: 700; font-size: 15px; } .dex-rar { font-size: 12px; } .dex-info { font-size: 11px; opacity: .7; margin-top: 2px; }

#start { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(10,20,26,.55), rgba(5,10,14,.88)); transition: opacity .5s; padding: 16px; }
#start.hide { opacity: 0; pointer-events: none; }
.start-box { max-width: 480px; text-align: center; }
.start-box h1 { font-size: clamp(38px, 9vw, 60px); margin: 0; letter-spacing: 8px; text-shadow: 0 4px 20px rgba(0,0,0,.6); }
.sub { opacity: .8; margin: 4px 0 14px; }
.start-box ul { text-align: left; font-size: 13.5px; line-height: 1.65; background: rgba(0,0,0,.35); padding: 10px 14px 10px 28px; border-radius: 12px; }
#startBtn { margin-top: 12px; font-size: 20px; font-weight: 800; padding: 12px 48px; border-radius: 28px; border: 0; color: #fff; background: linear-gradient(180deg, #4fc3f7, #0277bd); box-shadow: 0 4px 20px rgba(2,119,189,.5); }
#startBtn:disabled { opacity: .6; }

@media (max-width: 600px) {
  .panelHud { bottom: calc(52px + env(safe-area-inset-bottom)); width: 92vw; }
  #reelWrap, #lureWrap { bottom: calc(215px + env(safe-area-inset-bottom)); width: 70vw; left: calc(50% + 0px); }
  .row .thumb { width: 56px; }
  .row { flex-wrap: wrap; }
  .c-btns button { font-size: 14px; }
}

#locInfo{position:fixed;left:12px;top:calc(76px + env(safe-area-inset-top));z-index:5;font-size:12px;color:rgba(255,255,255,.75);text-shadow:0 1px 3px #000;pointer-events:none}
.mapGrid{display:grid;grid-template-columns:1fr;gap:10px}
.mapCard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px;text-align:left;color:#e8eef4;cursor:pointer}
.mapCard.on{border-color:#6ec6ff;box-shadow:0 0 0 1px #6ec6ff inset}
.mapCard.locked{opacity:.72}
.mapCard .tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(110,198,255,.2);color:#9fd6ff;margin-bottom:6px}
.mapCard b{font-size:16px}
.mapCard .desc{font-size:12px;opacity:.8;margin:6px 0 8px;line-height:1.4}
.mapCard .meta{font-size:12px;opacity:.7}
.mapCard .act{margin-top:8px}
.mapCard button{pointer-events:auto}

#menu button.gated { opacity: .72; }
#menu button.gated small { display:block; font-size:10px; opacity:.85; font-weight:400; }
#interactBtn {
  position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%);
  z-index: 12; padding: 12px 22px; border-radius: 999px; border: none;
  background: linear-gradient(180deg,#ffe082,#f9a825); color:#2a1a00; font-weight:700;
  font-size: 15px; box-shadow: 0 4px 16px rgba(0,0,0,.35); cursor: pointer;
}
#interactBtn.hidden, #interactHint.hidden { display: none !important; }
#interactHint {
  position: fixed; bottom: 150px; left: 50%; transform: translateX(-50%);
  z-index: 11; padding: 8px 14px; border-radius: 10px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 13px; pointer-events: none;
  text-shadow: 0 1px 2px #000; white-space: nowrap;
}

.mapCard.haskey { border-color: #ffd54f; box-shadow: 0 0 0 1px rgba(255,213,79,.35) inset; }
#dialogue {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.45); padding: 24px;
}
#dialogue.hidden { display: none !important; }
#dialogue .d-box {
  width: min(480px, 100%); background: linear-gradient(180deg,#1e2834,#141a22);
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 18px 20px 16px;
  color: #e8eef4; box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
#dialogue .d-name { font-size: 13px; color: #9aa8b8; margin-bottom: 8px; letter-spacing: .05em; }
#dialogue .d-text { font-size: 16px; line-height: 1.55; min-height: 3.2em; margin-bottom: 14px; }
#dialogue .d-btns { display: flex; gap: 10px; justify-content: flex-end; }
#dialogue button { padding: 10px 16px; border-radius: 10px; border: none; cursor: pointer; font-weight: 600; }
#dialogue button.primary { background: linear-gradient(180deg,#5c6bc0,#3949ab); color: #fff; }
#dialogue button.ghost { background: rgba(255,255,255,.08); color: #cfd8dc; }
#dialogue button.hidden { display: none !important; }
#boatFade {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: #05080c; color: #dce6f0; font-size: 22px; font-weight: 600; letter-spacing: .12em;
  transition: opacity .4s ease;
}
#boatFade.hidden { display: none !important; }
#boatFade.fadeout { opacity: 0; }

/* ---- Virtual joystick (bottom-left; avoids actionBtn right & interactBtn center) ---- */
#joyPad {
  position: fixed;
  left: calc(14px + env(safe-area-inset-left));
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  touch-action: none;
}
#joyPad.hidden { display: none !important; }
#joyBase {
  position: relative;
  width: 112px; height: 112px;
  border-radius: 50%;
  background: rgba(10, 20, 26, .42);
  border: 2px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  touch-action: none;
}
#joyKnob {
  position: absolute;
  left: 50%; top: 50%;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(100,180,220,.85), rgba(20,60,90,.88));
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  pointer-events: none;
  will-change: transform;
}
#joyTurn {
  display: none;
  gap: 10px;
}
#joyTurn button {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(10, 20, 26, .55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  touch-action: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
#joyTurn button:active,
#joyTurn button.held {
  background: rgba(40, 100, 140, .75);
  border-color: rgba(127, 214, 255, .7);
}
@media (pointer: fine) and (min-width: 900px) {
  #joyBase { width: 100px; height: 100px; }
  #joyKnob { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  #joyTurn button { width: 40px; height: 40px; font-size: 18px; }
}
@media (max-width: 400px) {
  #joyBase { width: 100px; height: 100px; }
  #joyKnob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}

/* ---- v3 手机 HUD：侧边菜单收起为一个按钮；摇杆 / 抛竿 / 互动互不遮挡 ---- */
#menu #menuToggle { display: none; }
#interactBtn { bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (pointer: coarse), (max-width: 900px) {
  #menu { top: calc(98px + env(safe-area-inset-top)); transform: none; gap: 6px; }
  #menu #menuToggle { display: flex; width: 72px; min-height: 46px; }
  #menu #menuToggle b { font-size: 14px; white-space: nowrap; }
  #menu #menuToggle small { font-size: 10px; white-space: nowrap; }
  #menu > button:not(#menuToggle) { display: none; }
  #menu.open > button:not(#menuToggle) { display: flex; }
  #menu.open #menuToggle { border-color: #7fd6ff; background: rgba(20,60,90,.8); }
  #menu button { width: 72px; min-height: 44px; }
  #interactHint { display: none !important; } /* 按钮本身已写明「卖鱼给渔夫」等 */
  #interactBtn { padding: 14px 24px; font-size: 16px; max-width: calc(100vw - 280px); min-width: 110px; white-space: nowrap; }
}
/* 竖屏手机：提示条放在摇杆与抛竿按钮之间，可换行，不压到 ⟲⟳ */
@media (pointer: coarse) and (orientation: portrait), (max-width: 600px) {
  #hint { white-space: normal; text-align: center; max-width: calc(100vw - 270px); font-size: 12px; line-height: 1.35; bottom: calc(14px + env(safe-area-inset-bottom)); }
  #interactBtn { bottom: calc(150px + env(safe-area-inset-bottom)); max-width: calc(100vw - 236px); padding: 12px 14px; font-size: 15px; }
}
/* 横屏手机（高度很小）：展开的菜单横向排在顶部，避开左下摇杆 */
@media (orientation: landscape) and (max-height: 500px) {
  #menu { top: calc(98px + env(safe-area-inset-top)); flex-direction: row; flex-wrap: wrap; max-width: calc(100vw - 260px); }
  #menu button { min-height: 44px; }
  #joyPad { bottom: calc(10px + env(safe-area-inset-bottom)); gap: 6px; }
  #joyBase { width: 96px; height: 96px; }
  #joyKnob { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  #joyTurn button { width: 40px; height: 40px; }
  #actionBtn { bottom: calc(40px + env(safe-area-inset-bottom)); width: 84px; height: 84px; }
  #modeBtn { bottom: calc(136px + env(safe-area-inset-bottom)); }
  #interactBtn { bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* ================= v4 ================= */
/* 左上角装备 / 钓点 / 保底信息：深色半透明底，天空背景下也清晰 */
#infoBox { position: fixed; top: calc(58px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); z-index: 5; pointer-events: none;
  background: rgba(8, 16, 22, .66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: 4px 10px; font-size: 12px; line-height: 1.5; color: #fff; max-width: calc(100vw - 20px); }
#infoBox #gearInfo, #infoBox #locInfo { position: static; top: auto; left: auto; opacity: 1; text-shadow: none; color: #fff; font-size: 12px; }
#infoBox #locInfo { color: rgba(255,255,255,.85); }
#pityInfo { font-size: 11px; color: #ffd98a; }
#pityInfo:empty { display: none; }
.pity { background: rgba(255,213,79,.08); border: 1px solid rgba(255,213,79,.3); border-radius: 12px; padding: 8px 10px; margin: 6px 0 4px; font-size: 13px; }
.pity .qbar u { background: linear-gradient(90deg, #ffca28, #ff7043); }
.pity small { display: block; font-size: 11px; opacity: .75; }

/* 静音按钮 */
#hud .btns button { white-space: nowrap; }
#muteBtn { min-width: 40px; padding: 7px 10px !important; font-size: 16px !important; line-height: 1; }

/* 浮漂屏幕标记：圆环 + 箭头，任何距离都标出位置 */
#bobMark { left: 0; top: 0; width: 0; height: 0; border: 0 !important; filter: none; z-index: 3; }
#bobMark::before { content: ""; position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%;
  border: 2.5px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 12px rgba(255,255,255,.6); animation: bobRing 1.4s ease-in-out infinite; }
#bobMark::after { content: ""; position: absolute; left: -8px; top: -38px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid #ffe14a;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
#bobMark.alert { animation: none; }
#bobMark.alert::before { border-color: #ff3b1a; box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 18px #ff3b1a; animation: bobRingAlert .3s ease-in-out infinite alternate; }
#bobMark.alert::after { border-top-color: #ff3b1a; }
@keyframes bobRing { 50% { transform: scale(1.18); opacity: .75; } }
@keyframes bobRingAlert { to { transform: scale(1.35); } }

/* 竖屏手机：提示条利用抛竿按钮下方的空间，变宽为 1 行 */
@media (pointer: coarse) and (orientation: portrait), (max-width: 600px) {
  #hint { left: calc(132px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right)); transform: none; max-width: none; width: auto; padding: 6px 8px;
    white-space: normal; text-align: center; font-size: 12px; line-height: 1.35; bottom: calc(18px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.5); }
}
/* 手机菜单：上移避开信息框；展开后横向网格排在按钮右侧（只占天空，不压名牌 / 浮漂 / 摇杆） */
@media (pointer: coarse), (max-width: 900px) {
  #menu { top: calc(124px + env(safe-area-inset-top)); }
  #menu.open { display: grid; grid-template-columns: 72px repeat(3, 64px); grid-auto-rows: 44px; gap: 6px; }
  #menu.open #menuToggle { grid-row: span 2; min-height: 0; height: 94px; }
  #menu.open > button:not(#menuToggle) { width: 64px; min-height: 0; height: 44px; background: rgba(10,20,26,.82); }
  #menu.open > button b { font-size: 14px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #menu { top: calc(112px + env(safe-area-inset-top)); }
  #menu.open { grid-template-columns: 72px repeat(5, 60px); }
  #menu.open #menuToggle { grid-row: auto; height: 44px; }
}

/* 新手教学 */
#tut { position: fixed; left: 0; right: 0; top: calc(176px + env(safe-area-inset-top)); z-index: 9; display: flex; justify-content: center; pointer-events: none; padding: 0 12px; }
#tut.hidden { display: none; }
.tut-box { width: min(420px, 100%); background: linear-gradient(160deg, rgba(14,40,56,.92), rgba(8,18,26,.94)); border: 1.5px solid #ffd54f; border-radius: 14px;
  padding: 8px 12px 10px; box-shadow: 0 6px 24px rgba(0,0,0,.45), 0 0 18px rgba(255,213,79,.25); animation: tutIn .35s ease both; }
.tut-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #ffd54f; font-weight: 700; }
#tutSkip { pointer-events: auto; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 12px; }
#tutText { font-size: 15px; line-height: 1.45; margin-top: 4px; }
#tutText b { color: #ffe14a; }
@keyframes tutIn { from { opacity: 0; transform: translateY(-10px); } }
.tut-focus { outline: 3px solid #ffd54f !important; outline-offset: 4px; animation: tutGlow 1s ease-in-out infinite alternate !important; }
@keyframes tutGlow { from { box-shadow: 0 0 0 0 rgba(255,213,79,.7), 0 4px 16px rgba(0,0,0,.4); } to { box-shadow: 0 0 0 14px rgba(255,213,79,0), 0 4px 16px rgba(0,0,0,.4); } }
@media (min-width: 900px) { #tut { top: calc(70px + env(safe-area-inset-top)); } }

/* 开始 / 加载画面：水下光束 + 金色鱼群 */
#start { background: radial-gradient(ellipse at 50% -10%, #3fa7c4 0%, #136079 30%, #0a3550 60%, #051a2a 100%); overflow: hidden; padding: 20px; }
#startFx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rays { position: absolute; inset: -10% -20% 0; pointer-events: none; mix-blend-mode: screen; }
.rays i { position: absolute; top: -5%; width: 16%; height: 120%; background: linear-gradient(180deg, rgba(190,240,255,.42), rgba(160,225,255,.12) 45%, rgba(160,225,255,0) 80%);
  transform-origin: 50% 0; filter: blur(6px); animation: ray 7s ease-in-out infinite alternate; }
.rays i:nth-child(1) { left: 18%; transform: rotate(14deg); animation-delay: -1s; }
.rays i:nth-child(2) { left: 34%; width: 9%; transform: rotate(8deg); animation-delay: -3s; opacity: .8; }
.rays i:nth-child(3) { left: 50%; width: 20%; transform: rotate(2deg); animation-delay: -5s; }
.rays i:nth-child(4) { left: 66%; width: 8%; transform: rotate(-6deg); animation-delay: -2s; opacity: .7; }
.rays i:nth-child(5) { left: 78%; width: 13%; transform: rotate(-12deg); animation-delay: -4s; }
@keyframes ray { 0% { opacity: .35; margin-left: -2%; } 100% { opacity: 1; margin-left: 2%; } }
#start .start-box { position: relative; z-index: 2; max-width: 460px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; max-height: 100%; }
#start .badge { font-size: 12px; letter-spacing: .2em; color: rgba(255,255,255,.85); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); padding: 4px 12px; border-radius: 999px; animation: fadeSlideUp .8s ease .2s both; }
#start h1 { font-size: clamp(46px, 13vw, 76px); letter-spacing: .16em; margin: 14px 0 0; padding-left: .16em; color: #fff8e0;
  text-shadow: 0 0 24px rgba(255,200,80,.55), 0 4px 18px rgba(0,0,0,.5); animation: fadeSlideUp .8s ease .4s both; }
#start .sub { color: rgba(255,255,255,.75); font-size: 15px; letter-spacing: .3em; margin: 6px 0 30px; animation: fadeSlideUp .8s ease .6s both; }
#start .author { color: #fff8e0; font-size: 14px; letter-spacing: .18em; margin: -12px 0 18px; text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 0 10px rgba(0,20,40,.45); animation: fadeSlideUp .8s ease .7s both; }
#startBtn { margin-top: 0; min-width: 220px; font-size: 22px; padding: 15px 40px; border-radius: 32px; letter-spacing: .1em;
  background: linear-gradient(180deg, #ffd960, #f0a020); color: #3a2200; box-shadow: 0 6px 26px rgba(255,180,40,.45), inset 0 1px 0 rgba(255,255,255,.6);
  animation: fadeSlideUp .8s ease .8s both; transition: transform .15s; }
#startBtn:not(:disabled):active { transform: scale(.96); }
#startBtn:disabled { background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.12)); color: #fff; box-shadow: none; opacity: 1; }
#startBtn:disabled::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; vertical-align: -1px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#helpToggle { margin-top: 16px; background: none; border: 0; color: rgba(255,255,255,.8); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 6px 10px; animation: fadeSlideUp .8s ease 1s both; }
#helpPanel { margin-top: 6px; width: 100%; overflow-y: auto; touch-action: pan-y; max-height: 46vh; animation: fadeSlideUp .35s ease both; }
#helpPanel[hidden] { display: none; }
#helpPanel ul { margin: 0; background: rgba(0,10,20,.55); }
#replayTut { margin-top: 8px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 16px; padding: 6px 14px; font-size: 13px; }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rays i, #start * { animation: none !important; } }