/* ============================================================
   css/fishing.css - 清水河钓鱼小游戏 V2
   ============================================================ */

/* ---------- 钓鱼场景 ---------- */
.gb-modal.fg-modal .gb-modal-card {
    max-width: 820px;
    width: 96vw;
    height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.gb-modal.fg-modal .gb-modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background: linear-gradient(180deg, #e8f5f8 0%, #d2edf4 60%, #bfe3f0 100%);
    position: relative;
}

/* ============================================================
   场景根：所有配色 / 鱼竿长度 由 JS 写入 CSS 变量
   水面高度统一 40%，钓点差异靠 --sky / --w / 装饰层体现
   ============================================================ */
.fg-scene {
    flex: 1 1 auto;
    min-height: 240px;
    position: relative;
    overflow: hidden;
    width: 100%;
    --rs: 1;                                        /* 竿长缩放（窄屏） */
    --rl: calc(var(--rod-len, 148px) * var(--rs));
    background: linear-gradient(180deg, var(--sky1, #eef9fd) 0%, var(--sky2, #d2ecf7) 100%);
}

/* ---------- 远景（天空 / 远山 / 树 / 桥 / 芦苇） ---------- */
.fg-far {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40%;
    height: 60%;
    z-index: 1;
    pointer-events: none;
}
.fg-far svg { width: 100%; height: 100%; display: block; }

/* 昼夜切换：太阳/月亮/星星 */
.fg-d-day, .fg-d-night { transition: opacity 0.9s ease; }
.fg-d-night { opacity: 0; }
.fg-scene[data-time="night"] .fg-d-day,
.fg-scene[data-time="deepNight"] .fg-d-day { opacity: 0; }
.fg-scene[data-time="night"] .fg-d-night,
.fg-scene[data-time="deepNight"] .fg-d-night { opacity: 1; }
/* 清晨 / 傍晚：太阳低垂 */
.fg-d-day { transform-box: fill-box; transform-origin: center; transition: transform 1s ease, opacity 0.9s ease; }
.fg-scene[data-time="dawn"] .fg-d-day { transform: translate(-46px, 74px); }
.fg-scene[data-time="dusk"] .fg-d-day { transform: translate(28px, 96px); }
/* 阴雨天云更多更低 */
.fg-scene[data-weather="cloudy"] .fg-d-cloud,
.fg-scene[data-weather="rain"] .fg-d-cloud,
.fg-scene[data-weather="thunder"] .fg-d-cloud { transform: translateY(18px); opacity: 0.85; }
/* 夜里云压暗，别抢星空 */
.fg-d-cloud { transition: opacity 0.9s ease; }
.fg-scene[data-time="night"] .fg-d-cloud,
.fg-scene[data-time="deepNight"] .fg-d-cloud { opacity: 0.20; }
.fg-scene[data-time="dusk"] .fg-d-cloud,
.fg-scene[data-time="dawn"] .fg-d-cloud { opacity: 0.55; }

/* ---------- 水面 ---------- */
.fg-water {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(180deg, var(--w1, #c6ebf7) 0%, var(--w2, #7fc2dd) 100%);
    z-index: 3;
    overflow: hidden;
    transition: background 0.6s ease;
}
.fg-water::before,
.fg-water::after {
    content: '';
    position: absolute;
    left: -10%;
    width: 120%;
    height: 9px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.30) 0 22px, transparent 22px 52px);
    border-radius: 50%;
    filter: blur(1.4px);
}
.fg-water::before { top: 16%; animation: fg-wave 3.4s linear infinite; }
.fg-water::after { top: 48%; opacity: 0.55; animation: fg-wave 4.6s linear infinite reverse; }

@keyframes fg-wave {
    0% { transform: translateX(0); }
    100% { transform: translateX(-46px); }
}

/* ---------- 水面装饰（浮萍 / 卵石 / 倒影 / 气泡） ---------- */
.fg-waterdeco {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    z-index: 4;
    pointer-events: none;
}
.fg-waterdeco svg { width: 100%; height: 100%; display: block; }
.fg-d-bubble circle { animation: fg-bubble 4.5s ease-in-out infinite; }
.fg-d-bubble circle:nth-child(2n) { animation-duration: 6s; animation-delay: 1.2s; }
.fg-d-bubble circle:nth-child(3n) { animation-duration: 5.2s; animation-delay: 0.6s; }
@keyframes fg-bubble {
    0%, 100% { transform: translateY(0); opacity: 0.28; }
    50% { transform: translateY(-9px); opacity: 0.6; }
}
/* 柳叶轻摆 */
.fg-d-branches path { animation: fg-sway 5.5s ease-in-out infinite; transform-origin: top center; }
.fg-d-branches path:nth-child(2n) { animation-duration: 7s; }
.fg-d-branches path:nth-child(3n) { animation-duration: 6.2s; animation-delay: -1.4s; }
@keyframes fg-sway {
    0%, 100% { transform: rotate(-1.6deg); }
    50% { transform: rotate(1.8deg); }
}
/* 芦苇轻摆 */
.fg-d-reed path { animation: fg-sway 4.6s ease-in-out infinite; }
.fg-d-reed path:nth-child(2n) { animation-duration: 5.8s; animation-delay: -0.8s; }
/* 水下的鱼影（缓缓横游） */
.fg-d-swim { animation: fg-swim 30s linear infinite; }
.fg-d-swim path { fill: var(--fish-c, rgba(44,92,116,0.26)); }
.fg-d-swim.s1 { animation-duration: 39s; animation-delay: -12s; }
.fg-d-swim.s2 { animation-duration: 47s; animation-delay: -27s; }
@keyframes fg-swim {
    0% { transform: translateX(-90px); }
    100% { transform: translateX(890px); }
}
/* 倒影随水波轻晃 */
.fg-d-shadow path { animation: fg-sway 6.5s ease-in-out infinite; transform-origin: top center; }
.fg-d-shadow path:nth-child(2) { animation-duration: 8s; animation-delay: -2s; }

/* ---------- 天气特效 ---------- */
.fg-weather {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
}
.fg-wx-rain {
    position: absolute;
    inset: -25% -12%;
    background-image: repeating-linear-gradient(102deg,
        rgba(196,226,246,0.55) 0 1.4px, transparent 1.4px 13px);
    animation: fg-rainfall 0.6s linear infinite;
    opacity: 0.62;
}
.fg-wx-rain.fg-wx-heavy {
    background-image: repeating-linear-gradient(100deg,
        rgba(186,220,244,0.68) 0 2px, transparent 2px 9px);
    animation-duration: 0.42s;
    opacity: 0.8;
}
@keyframes fg-rainfall {
    0% { transform: translate3d(0, -14%, 0); }
    100% { transform: translate3d(-7%, 14%, 0); }
}
.fg-wx-snow {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2.6px 2.6px at 24px 36px, #fff, transparent),
        radial-gradient(2px 2px at 118px 96px, #fff, transparent),
        radial-gradient(3px 3px at 76px 168px, #fff, transparent),
        radial-gradient(2.2px 2.2px at 186px 52px, #fff, transparent),
        radial-gradient(2px 2px at 152px 214px, #fff, transparent);
    background-size: 220px 260px;
    animation: fg-snowfall 7s linear infinite;
    opacity: 0.9;
}
@keyframes fg-snowfall {
    0% { background-position: 0 -60px; }
    100% { background-position: 46px 260px; }
}
.fg-wx-cloudy {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(196,208,220,0.42) 0%, rgba(200,212,222,0.12) 58%, transparent 100%);
}
.fg-wx-bolt {
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    animation: fg-bolt 7s ease-in-out infinite;
}
@keyframes fg-bolt {
    0%, 91%, 100% { opacity: 0; }
    92% { opacity: 0.5; }
    93% { opacity: 0.04; }
    94% { opacity: 0.36; }
    95.5% { opacity: 0; }
}

/* ---------- 时间色调（夜钓会整体压暗） ---------- */
.fg-tint {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    transition: background 0.8s ease;
}
.fg-scene[data-time="dawn"] .fg-tint {
    background: linear-gradient(180deg, rgba(255,178,120,0.30) 0%, rgba(255,214,170,0.12) 55%, rgba(255,200,150,0.04) 100%);
}
.fg-scene[data-time="dusk"] .fg-tint {
    background: linear-gradient(180deg, rgba(255,142,88,0.32) 0%, rgba(186,118,168,0.20) 58%, rgba(86,76,138,0.16) 100%);
}
.fg-scene[data-time="night"] .fg-tint,
.fg-scene[data-time="deepNight"] .fg-tint {
    background: linear-gradient(180deg, rgba(26,42,78,0.50) 0%, rgba(16,30,60,0.62) 100%);
    mix-blend-mode: multiply;
}

/* ---------- 场景信息牌 ---------- */
.fg-sceneinfo {
    position: absolute;
    left: 12px;
    top: 10px;
    z-index: 12;
    padding: 6px 11px 6px 9px;
    border-radius: 12px;
    border-left: 3px solid var(--accent, #5fa8c8);
    background: rgba(255,255,255,0.78);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
    font-size: 0.72rem;
    line-height: 1.45;
    color: #4a3b32;
    pointer-events: none;
    max-width: 44%;
}
/* ★★ HUD 出场时，信息牌**让到左下角** —— 这是「部分分辨率下天气信息被挡」的正解。
   ----------------------------------------------------------------------
   症状：窄视口下顶部居中的 HUD 压住左上角的钓点/天气信息牌。
   实测重叠比（占信息牌面积）：
     场景 820px → 0%   532px → 13%   452px → 58%
     386px → 95%       347px → 97%（几乎整块被盖住）
   HUD 里的块是**定宽/长文案**的（.fg-fight max-width 360px、咬钩提示文案约 300px），
   而信息牌宽度随「钓点名 / 天气·时段 / 水情文案」变化 ——
   所以**任何固定断点都堵不住**（换个长钓点名就又漏）。
   正解是让两条带子**彻底分开**：HUD 有内容 → 信息牌走左下角；HUD 清空
   （装备/图鉴/帮助界面）→ 回左上角。左右两侧都没有别的元素，
   鱼漂在 30%+ 竿长的位置，狗宝在 left:30% / bottom:40%，与左下角互不重叠。
   开关由 JS 的 paintHud() 打在 .fg-scene 的 `fg-hud-on` 上 ——
   ★ 所有写 #fg-hud 的地方都必须走 paintHud()，漏一处就会「HUD 出来了、信息牌没让位」。 */
.fg-scene.fg-hud-on .fg-sceneinfo {
    top: auto;
    bottom: 10px;
}
.fg-si-row b { font-size: 0.84rem; }
.fg-si-sub { color: #6b7a86; }
.fg-si-mood { color: #9a8a7a; font-size: 0.66rem; }

/* ---------- 狗宝（站在岸边，脚在水线附近） ---------- */
.fg-dog {
    position: absolute;
    left: 30%;
    bottom: 40%;
    transform: translateX(-50%);
    width: 72px;
    height: 72px;
    z-index: 9;
}
/* 脚下的岸边阴影，让狗宝"站住"而不是浮着 */
.fg-dog::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 54px;
    height: 12px;
    margin-left: -27px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(58,78,68,0.30) 0%, rgba(58,78,68,0.10) 55%, transparent 76%);
    z-index: -1;
    pointer-events: none;
}
.fg-dog .dog-holder { transform-origin: bottom center; }

/* ---------- 鱼竿（真实画出来，随鱼竿类型变形态） ---------- */
.fg-rig {
    position: absolute;
    left: calc(30% + 44px);
    bottom: calc(40% + 26px);
    width: var(--rl);
    height: 8px;
    transform-origin: 0 50%;
    transform: rotate(-28deg);
    z-index: 8;
    transition: width 0.3s ease, height 0.3s ease;
}
.fg-pole {
    position: absolute;
    inset: 0;
    border-radius: 5px 2px 2px 5px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.04) 42%, rgba(0,0,0,0.16) 72%, rgba(0,0,0,0.30) 100%),
        linear-gradient(90deg, var(--rod-grip, #5d3a22) 0 20%, var(--rod-body, #bb8452) 20% 64%, var(--rod-body2, #8a5a2f) 100%);
    clip-path: polygon(0 0, 100% 36%, 100% 64%, 0 100%);
    box-shadow: 0 2px 5px rgba(0,0,0,0.18);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* 握把缠绳 */
.fg-pole::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 21%;
    height: 100%;
    transform: translateY(-50%);
    border-radius: 5px 2px 2px 5px;
    background: repeating-linear-gradient(90deg,
        var(--rod-grip, #5d3a22) 0 5px, rgba(0,0,0,0.22) 5px 7px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
/* 导环线 */
.fg-pole::after {
    content: '';
    position: absolute;
    left: 23%;
    right: 8%;
    top: 50%;
    height: 2.5px;
    transform: translateY(-50%);
    border-radius: 2px;
    background: repeating-linear-gradient(90deg,
        var(--rod-ring, #e6d5b0) 0 3px, transparent 3px 30px);
    opacity: 0.9;
}
/* 竹节 */
.fg-scene[data-rod-shape="bamboo"] .fg-pole {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.04) 42%, rgba(0,0,0,0.14) 72%, rgba(0,0,0,0.24) 100%),
        repeating-linear-gradient(90deg, transparent 0 24px, rgba(96,74,22,0.42) 24px 27px),
        linear-gradient(90deg, var(--rod-grip, #5d4a22) 0 20%, var(--rod-body, #dcc768) 20% 64%, var(--rod-body2, #9d8837) 100%);
}
/* 碳素：更细 */
.fg-scene[data-rod-shape="carbon"] .fg-rig { height: 6px; }
.fg-scene[data-rod-shape="carbon"] .fg-pole::after { height: 2px; opacity: 0.95; }
/* 河猎：更粗壮 */
.fg-scene[data-rod-shape="hunter"] .fg-rig { height: 9.5px; }
/* 星月：发光 */
.fg-pole.glow {
    box-shadow: 0 0 10px rgba(246,211,101,0.7), 0 0 22px rgba(160,120,255,0.45), 0 2px 5px rgba(0,0,0,0.2);
}
.fg-pole.glow::after { animation: fg-glow-a 2.6s ease-in-out infinite; }
@keyframes fg-glow-a {
    0%, 100% { opacity: 0.7; filter: drop-shadow(0 0 2px rgba(246,211,101,0.8)); }
    50% { opacity: 1; filter: drop-shadow(0 0 6px rgba(246,211,101,1)); }
}
/* 搏鱼时竿身吃力弯曲抖动 */
.fg-rig.fighting { animation: fg-rod-bend 0.26s ease-in-out infinite; }
@keyframes fg-rod-bend {
    0%, 100% { transform: rotate(-28deg) translateY(0); }
    50% { transform: rotate(-26.5deg) translateY(1px); }
}

/* ---------- 鱼线（竿梢 → 水面） ---------- */
.fg-line {
    position: absolute;
    left: var(--tip-x, 50%);
    bottom: calc(40% + 20px);
    width: 1.6px;
    height: 0;
    opacity: 0;
    background: linear-gradient(180deg, var(--line-c, rgba(255,255,255,0.75)), rgba(255,255,255,0.35));
    transform: translateX(-50%);
    z-index: 7;
    transition: height 0.5s cubic-bezier(.32,.62,.35,1), opacity 0.3s ease;
    /* 淡色鱼线在浅水面上会"消失"，两侧各加一条极淡的深色描边来提可见度 */
    box-shadow: 1px 0 0 rgba(52,74,84,0.30), -1px 0 0 rgba(52,74,84,0.30);
}
.fg-line.cast,
.fg-line.waiting,
.fg-line.nibble,
.fg-line.fighting {
    height: calc(6px + var(--rl) * 0.4695);
    opacity: 1;
}

/* ---------- 水下线组（漂 → 钩） ---------- */
.fg-linesub {
    position: absolute;
    left: var(--tip-x, 50%);
    bottom: calc(40% - 33px);
    width: 1.2px;
    height: 26px;
    opacity: 0;
    background: linear-gradient(180deg, var(--line-c, rgba(255,255,255,0.75)), rgba(255,255,255,0.18));
    transform: translateX(-50%);
    z-index: 6;
    transition: opacity 0.4s ease;
}
.fg-linesub.waiting,
.fg-linesub.nibble { opacity: 0.5; }
.fg-linesub.fighting { opacity: 0.75; animation: fg-shake 0.18s linear infinite; }

/* ---------- 钩上的鱼饵（随饵料变形变色） ---------- */
.fg-lure {
    position: absolute;
    left: var(--tip-x, 50%);
    bottom: calc(40% - 46px);
    width: 20px;
    height: 20px;
    margin-left: -10px;
    opacity: 0;
    transform: scale(0.5);
    z-index: 6;
    transition: opacity 0.35s ease, transform 0.35s ease;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.fg-lure.waiting,
.fg-lure.nibble,
.fg-lure.fighting { opacity: 0.95; transform: scale(1); }
.fg-lure.fighting { animation: fg-shake 0.18s linear infinite; }
.fg-lure[data-shape="glow"] { filter: drop-shadow(0 0 6px var(--bait-c, #b6a1f7)); }
.fg-lure[data-shape="glow"].waiting { animation: fg-lure-pulse 1.9s ease-in-out infinite; }
@keyframes fg-lure-pulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.16); opacity: 1; }
}

/* ---------- 鱼漂 ---------- */
.fg-float {
    position: absolute;
    left: var(--tip-x, 50%);
    bottom: calc(40% - 7.5px);
    width: 15px;
    height: 15px;
    margin-left: -7.5px;
    opacity: 0;
    transform: scale(0.6);
    border-radius: 50% 50% 45% 45%;
    background: linear-gradient(180deg, var(--float-c2, #fff) 0 46%, var(--float-c, #d94f4f) 46% 100%);
    border: 1.5px solid rgba(0,0,0,0.16);
    box-shadow: 0 2px 6px rgba(0,0,0,0.20), inset 0 -3px 4px rgba(0,0,0,0.12);
    z-index: 10;
    transition: opacity 0.28s ease, transform 0.28s ease;
}
/* 漂尾（露出水面的细杆） */
.fg-float::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 3px;
    height: 13px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: repeating-linear-gradient(180deg,
        var(--float-tip, #f2dcae) 0 4px, var(--float-c, #d94f4f) 4px 8px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* 漂脚（水下的短柄） */
.fg-float::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 2.5px;
    height: 9px;
    margin-left: -1.25px;
    border-radius: 0 0 2px 2px;
    background: rgba(90,90,90,0.75);
}
.fg-float.cast { opacity: 1; transform: scale(1); }
.fg-float.waiting { opacity: 1; transform: scale(1); animation: fg-bob 2.2s ease-in-out infinite; }
.fg-float.nibble { opacity: 1; transform: scale(1); animation: fg-nibble 0.34s ease-in-out infinite; }
.fg-float.fighting { opacity: 1; transform: scale(1); animation: fg-shake 0.16s linear infinite; }
.fg-float.idle { opacity: 0; transform: scale(0.6); }

@keyframes fg-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}
@keyframes fg-nibble {
    0%, 100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-6px) rotate(-9deg); }
    75% { transform: translateY(6px) rotate(9deg); }
}
@keyframes fg-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* HUD */
.fg-hud {
    position: absolute;
    left: 0;
    right: 0;
    top: 12px;
    text-align: center;
    z-index: 10;
    pointer-events: none;
}
.fg-tip {
    display: inline-block;
    background: rgba(255,255,255,0.92);
    color: #4a3b32;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.92rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    pointer-events: auto;
}
.fg-tip.warn { background: #fff3cd; color: #8a5a00; }
.fg-tip.bite-hint { background: #ffecd1; color: #b45c00; font-weight: bold; animation: fg-pulse 0.7s ease-in-out infinite; }
@keyframes fg-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
    50% { transform: scale(1.05); box-shadow: 0 4px 14px rgba(255, 154, 162, 0.35); }
}
.fg-tip-sub {
    text-align: center;
    font-size: 0.78rem;
    color: #7a6a5a;
    padding: 4px 0 2px;
}

/* 状态栏 + 帮助 */
.fg-statusbar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.92);
    border-radius: 14px;
    padding: 8px 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.fg-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.fg-stat span { font-size: 0.68rem; color: #9a8a7a; }
.fg-stat b { font-size: 0.88rem; color: #4a7a8c; }
.fg-exp {
    flex: 1;
    justify-content: center;
}
.fg-expbar {
    height: 8px;
    background: #e7ded6;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 2px;
}
.fg-expbar > div {
    height: 100%;
    background: linear-gradient(90deg, #a8dcd0, #7fbcd8);
    transition: width 0.3s ease;
}
.fg-help-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--pink);
    background: #fff;
    color: var(--pink-deep);
    font-weight: bold;
    cursor: pointer;
    flex-shrink: 0;
}

/* 帮助面板 */
.fg-help {
    background: rgba(255,255,255,0.96);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    max-height: 44vh;
    overflow-y: auto;
}
.fg-help-title {
    font-size: 1.1rem;
    color: var(--pink-deep);
    text-align: center;
    margin-bottom: 10px;
}
.fg-help-step {
    font-size: 0.9rem;
    color: #4a3b32;
    line-height: 1.55;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.fg-help-tip {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fff9e6;
    border-radius: 10px;
    font-size: 0.82rem;
    color: #8a6a3a;
    line-height: 1.5;
}

/* 咬钩闪光 */
.fg-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 200, 120, 0.0) 0%, rgba(255, 200, 120, 0.0) 100%);
    pointer-events: none;
    z-index: 9;
    transition: background 0.1s ease;
}
.fg-flash.show {
    animation: fg-flash 0.35s ease-out;
}
@keyframes fg-flash {
    0% { background: radial-gradient(circle, rgba(255, 200, 120, 0.45) 0%, rgba(255, 200, 120, 0) 70%); }
    100% { background: radial-gradient(circle, rgba(255, 200, 120, 0) 0%, rgba(255, 200, 120, 0) 100%); }
}

/* ---------- 装备色卡 ---------- */
.fg-sw {
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 10px;
    border-radius: 3px;
    vertical-align: middle;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.fg-sw-rod { border: 1px solid #e6d5b0; }
.fg-sw-bait { width: 12px; height: 12px; border-radius: 50%; }
.fg-sw-spot { width: 16px; height: 14px; border-radius: 4px; }

/* ---------- 当前组合预览条 ---------- */
.fg-combo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 7px 10px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(240,250,253,0.9));
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.fg-combo-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #4a3b32;
    background: rgba(255,255,255,0.85);
    border-radius: 14px;
    padding: 3px 9px 3px 6px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.fg-combo em {
    font-style: normal;
    color: #b3a396;
    font-size: 0.8rem;
}

/* 装备面板 */
.fg-controls {
    padding: 12px 16px 18px;
    background: rgba(255,255,255,0.96);
    border-top: 1px solid rgba(0,0,0,0.06);
    z-index: 20;
    flex: 0 0 auto;
    max-height: 48%;
    overflow-y: auto;
}
.fg-setup {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.fg-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.fg-field label {
    font-size: 0.78rem;
    color: #7a6a5a;
    display: flex;
    align-items: center;
    gap: 5px;
}
.fg-field select {
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid #d6c9bd;
    background: #fff;
    font-size: 0.88rem;
    color: #4a3b32;
}
.fg-field small {
    font-size: 0.7rem;
    color: #9a8a7a;
    min-height: 1em;
}
/* 鱼竿可去钓点提示：更小、更浅，避免抢主说明的视线 */
.fg-field small.fg-rodspots {
    font-size: 0.66rem;
    color: #b3a396;
    line-height: 1.35;
}
.fg-cast:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* 抛竿 / 图鉴 并排，省出一行场景高度 */
.fg-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.fg-actions .gb-btn {
    flex: 1 1 0;
    margin: 0 !important;
    padding: 12px 6px;
    font-size: 1rem;
    min-width: 0;
}

/* 搏鱼 */
.fg-fight {
    background: rgba(255,255,255,0.95);
    border-radius: 14px;
    padding: 12px 14px 8px;
    margin: 0 auto;
    max-width: 360px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.fg-fishbar {
    position: relative;
    height: 18px;
    border-radius: 9px;
    overflow: hidden;
    margin-bottom: 10px;
    background: linear-gradient(180deg, #cfe9f5 0%, #93c2d9 44%, #5d8ba6 46%, #3a637d 100%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.18);
}
/* 右侧岸边（终点） */
.fg-fishbar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    background: linear-gradient(90deg, rgba(150,120,80,0.05), rgba(150,120,80,0.65));
}
.fg-fish {
    position: absolute;
    left: 0;
    top: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    transition: left 0.08s linear;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.28));
}
.fg-fish span {
    display: block;
    animation: fg-fish-wiggle 0.42s ease-in-out infinite;
}
@keyframes fg-fish-wiggle {
    0%, 100% { transform: scaleX(-1) rotate(-7deg); }
    50% { transform: scaleX(-1) rotate(7deg); }
}
/* 搏鱼标题：目标鱼 + 性格 */
.fg-fight-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.fg-fight-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: #4a3b32;
}
.fg-fight-beh {
    font-size: 0.66rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: #eef4f8;
    color: #4a7a8c;
    white-space: nowrap;
}
.fg-fight-beh.heavy,
.fg-fight-beh.surge { background: #fff2e0; color: #b4682f; }
.fg-fight-beh.violent,
.fg-fight-beh.king { background: #ffeded; color: #c0392b; }
.fg-tensionbar {
    height: 10px;
    background: #e7ded6;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 6px;
}
.fg-tension {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #6ee7b7, #fbbf24);
    transition: width 0.05s linear;
}
.fg-tension.warn { background: #fbbf24; }
.fg-tension.danger { background: #f87171; }
.fg-fight-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: #9a8a7a;
    margin: -6px 0 4px;
    padding: 0 2px;
}
.fg-fight-hint {
    font-size: 0.78rem;
    color: #7a6a5a;
    text-align: center;
}
.fg-reel {
    width: 100%;
    padding: 14px;
    font-size: 1.05rem;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.fg-reel.active {
    background: #4a7a8c;
    transform: scale(0.98);
}

/* 结果 —— 与 .fg-fight 同款纸底卡片。
   根因：结算文字原来直接叠在场景上、没有底色。白天背景亮（亮度 234~245）还能看，
   但夜间 .fg-tint 用 multiply 把整场景压到亮度 ~140，深绿/深棕字对比度只剩 1.33~1.71
   （WCAG AA 正文要求 >= 4.5），「参考价约 xx 金币」几乎看不见。
   加同款纸底后所有时段对比度都 >= 5.9。 */
.fg-result-card {
    width: fit-content;
    max-width: min(92%, 360px);
    margin: 0 auto;
    padding: 12px 18px 11px;
    border-radius: 14px;
    background: rgba(255,255,255,0.94);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.fg-result-card.bad { background: rgba(255,247,242,0.94); }
.fg-result {
    font-size: 1.1rem;
    color: #4a3b32;
    margin-bottom: 4px;
}
.fg-result.ok { color: #1f6b4d; font-weight: bold; }
.fg-result-sub { font-size: 0.85rem; color: #5c4a38; }

/* 按钮组 */
.fg-controls .gb-btn {
    margin-top: 6px;
}
.fg-controls .gb-btn + .gb-btn {
    margin-left: 8px;
}

/* 图鉴 */
.fg-pedia {
    max-height: 42vh;
    overflow-y: auto;
    background: rgba(255,255,255,0.95);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.fg-pedia-head {
    font-weight: bold;
    color: #4a7a8c;
    margin-bottom: 8px;
    text-align: center;
}
.fg-pedia-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.08);
    font-size: 0.9rem;
    color: #4a3b32;
}
.fg-pedia-row small {
    font-size: 0.72rem;
    color: #8a7a6a;
    text-align: right;
}
.fg-pedia-row.locked {
    color: #aaa;
}

/* 小伙伴钓鱼 */
.fg-npc {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0,0,0,0.1);
}
.fg-npc-head {
    font-size: 0.82rem;
    color: #7a6a5a;
    margin-bottom: 6px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    cursor: pointer;
    user-select: none;
}
.fg-npc-head .fg-npc-caret {
    margin-left: auto;
    font-size: 0.7rem;
    color: #b0a090;
    transition: transform 0.25s ease;
}
.fg-npc.collapsed .fg-npc-list { display: none; }
.fg-npc.collapsed .fg-npc-caret { transform: rotate(-90deg); }
.fg-npc.collapsed .fg-npc-head { margin-bottom: 0; }
.fg-npc-head small {
    font-size: 0.68rem;
    color: #b0a090;
    font-weight: normal;
}
.fg-npc-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fg-npc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.82);
    border-radius: 10px;
    padding: 6px 8px;
}
.fg-npc-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fg-npc-info b { font-size: 0.88rem; color: #4a3b32; }
.fg-npc-info small { font-size: 0.7rem; color: #8a7a6a; }
.fg-npc-actions { display: flex; gap: 6px; }
.fg-npc-actions .gb-btn.small {
    padding: 5px 10px;
    font-size: 0.74rem;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(255, 154, 162, 0.25);
}
.fg-npc-actions .gb-btn.small.ghost { border-color: #e5d3c4; box-shadow: none; }
.fg-npc-actions .gb-btn.small:disabled { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 560px) {
    .fg-scene { --rs: 0.74; }
    .fg-sceneinfo { max-width: 62%; font-size: 0.66rem; padding: 5px 9px 5px 8px; }
    .fg-si-row b { font-size: 0.78rem; }
    .fg-dog { width: 62px; height: 62px; }
}

@media (max-width: 480px) {
    .fg-setup { grid-template-columns: 1fr; }
    .fg-scene { --rs: 0.64; }
    .fg-dog { width: 58px; height: 58px; }
    .fg-combo { gap: 5px; padding: 6px 8px; }
    .fg-combo-item { font-size: 0.7rem; padding: 2px 7px 2px 5px; }
    .fg-float { width: 13px; height: 13px; margin-left: -6.5px; margin-bottom: -6.5px; }
}