/* ============================================================
   图形钓鱼 · 样式（v1.0.0）
   纯 CSS/SVG 绘制的海面场景，无外部图片
   ============================================================ */

.fg-refresh {
  appearance: none; cursor: pointer; font-family: inherit;
  padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  transition: all .18s;
}
.fg-refresh:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---------------- 舞台 ---------------- */
.fg-stage {
  position: relative;
  height: 380px;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 16px;
  cursor: pointer;
  background: linear-gradient(180deg, #0b1a2b 0%, #10283f 45%, #0d3a52 70%, #0a2b3d 100%);
  border: 1px solid var(--line);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.fg-stage[data-state="bite"] { cursor: crosshair; }

/* 天空 */
.fg-sky { position: absolute; inset: 0 0 55% 0; }
.fg-sun {
  position: absolute; right: 12%; top: 14%;
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle, #ffe9a8 0%, #fbbf24 45%, rgba(251,191,36,0) 72%);
  box-shadow: 0 0 50px 18px rgba(251,191,36,.22);
  animation: fgSunPulse 6s ease-in-out infinite;
}
@keyframes fgSunPulse {
  0%, 100% { transform: scale(1); opacity: .92; }
  50%      { transform: scale(1.06); opacity: 1; }
}
.fg-cloud {
  position: absolute;
  height: 12px; border-radius: 12px;
  background: rgba(255,255,255,.12);
  filter: blur(3px);
}
.fg-cloud.c1 { width: 70px; top: 22%; left: -80px; animation: fgCloud 38s linear infinite; }
.fg-cloud.c2 { width: 48px; top: 34%; left: -60px; animation: fgCloud 52s linear infinite 6s; }
.fg-cloud.c3 { width: 88px; top: 12%; left: -100px; animation: fgCloud 64s linear infinite 14s; }
@keyframes fgCloud {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 200px)); }
}
.fg-birds {
  position: absolute; left: 22%; top: 20%;
  font-size: 13px; opacity: .5;
  animation: fgBirds 9s ease-in-out infinite;
}
@keyframes fgBirds {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(18px, -7px); }
}

/* 远山 */
.fg-mountains {
  position: absolute; left: 0; right: 0; bottom: 55%;
  width: 100%; height: 90px; opacity: .9;
}

/* ---------------- 水面 ---------------- */
.fg-water {
  position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(180deg,
    rgba(56,189,248,.10) 0%,
    rgba(14,116,144,.28) 30%,
    rgba(8,47,73,.55) 100%);
  overflow: hidden;
}
.fg-waves {
  position: absolute; left: 0; right: 0; top: 0;
  width: 200%; height: 70px;
  animation: fgWave 7s ease-in-out infinite;
}
@keyframes fgWave {
  0%, 100% { transform: translateX(0) translateY(0); }
  50%      { transform: translateX(-6%) translateY(4px); }
}
.fg-shimmer {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    100deg,
    transparent 0px, transparent 28px,
    rgba(255,255,255,.05) 28px, rgba(255,255,255,.05) 32px,
    transparent 32px, transparent 70px);
  animation: fgShimmer 4.5s linear infinite;
}
@keyframes fgShimmer {
  from { transform: translateX(0); }
  to   { transform: translateX(70px); }
}

/* 气泡 */
.fg-bubbles { position: absolute; inset: 0; }
.fg-bubbles span {
  position: absolute; bottom: -12px;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  animation: fgBubble linear infinite;
}
.fg-bubbles span:nth-child(1) { left: 12%; animation-duration: 9s;  animation-delay: 0s; }
.fg-bubbles span:nth-child(2) { left: 28%; animation-duration: 12s; animation-delay: 2s; width: 3px; height: 3px; }
.fg-bubbles span:nth-child(3) { left: 45%; animation-duration: 10s; animation-delay: 4s; }
.fg-bubbles span:nth-child(4) { left: 63%; animation-duration: 13s; animation-delay: 1s; width: 4px; height: 4px; }
.fg-bubbles span:nth-child(5) { left: 78%; animation-duration: 11s; animation-delay: 3s; }
.fg-bubbles span:nth-child(6) { left: 90%; animation-duration: 14s; animation-delay: 5s; width: 3px; height: 3px; }
@keyframes fgBubble {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  15%  { opacity: .8; }
  90%  { opacity: .5; }
  100% { transform: translateY(-190px) scale(1.1); opacity: 0; }
}

/* 游动的小鱼 */
.fg-fish-swim { position: absolute; inset: 0; pointer-events: none; }
.fg-fish-swim span {
  position: absolute; font-size: 15px; opacity: .28;
  animation: fgSwim linear infinite;
}
.fg-fish-swim span:nth-child(1) { top: 30%; animation-duration: 18s; animation-delay: 0s; }
.fg-fish-swim span:nth-child(2) { top: 55%; animation-duration: 24s; animation-delay: 5s; font-size: 12px; }
.fg-fish-swim span:nth-child(3) { top: 72%; animation-duration: 21s; animation-delay: 10s; }
@keyframes fgSwim {
  from { transform: translateX(-40px) scaleX(1); }
  49%  { transform: translateX(105vw) scaleX(1); }
  50%  { transform: translateX(105vw) scaleX(-1); }
  to   { transform: translateX(-40px) scaleX(-1); }
}

/* ---------------- 浮漂 ---------------- */
.fg-bobber {
  position: absolute;
  left: 50%; top: 30%;
  width: 12px; height: 52px;
  transform: translate(-50%, 0);
  opacity: 0; pointer-events: none;
  z-index: 4;
}
.fg-bobber.fly {
  opacity: 1;
  animation: fgCastFly .7s cubic-bezier(.3,.9,.4,1) both;
}
@keyframes fgCastFly {
  0%   { transform: translate(-50%, -160px) scale(.6); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}
.fg-bobber.on {
  opacity: 1;
  animation: fgFloat 2.6s ease-in-out infinite;
}
@keyframes fgFloat {
  0%, 100% { transform: translate(-50%, 0) rotate(0deg); }
  50%      { transform: translate(-50%, 5px) rotate(1.5deg); }
}
.fg-bobber.bite {
  animation: fgBobBite .38s ease-in-out infinite;
}
@keyframes fgBobBite {
  0%, 100% { transform: translate(-50%, 4px) scaleY(1); }
  50%      { transform: translate(-50%, -7px) scaleY(1.06); }
}
.fg-bob-top {
  width: 12px; height: 22px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #ef4444 0%, #ef4444 55%, #f8fafc 55%, #f8fafc 100%);
  box-shadow: 0 2px 8px rgba(239,68,68,.35);
}
.fg-bob-body {
  width: 8px; height: 24px; margin: 0 auto;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #e2e8f0, #94a3b8);
}
.fg-bob-line {
  position: absolute; left: 50%; top: 46px;
  width: 1px; height: 60px;
  background: linear-gradient(180deg, rgba(226,232,240,.55), transparent);
  transform: translateX(-50%);
}

/* 涟漪 */
.fg-ripple {
  position: absolute; left: 50%; top: calc(30% + 46px);
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(148, 233, 255, .8);
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0; pointer-events: none; z-index: 3;
}
.fg-ripple.on { animation: fgRippleOut 1.1s ease-out; }
@keyframes fgRippleOut {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(7); opacity: 0; }
}

/* 咬钩标记 */
.fg-bite-mark {
  position: absolute; left: 50%; top: 16%;
  transform: translateX(-50%) scale(0);
  font-size: 40px; font-weight: 900;
  color: #ff4444;
  text-shadow: 0 0 20px rgba(255,68,68,.8), 0 0 40px rgba(255,68,68,.5);
  opacity: 0; pointer-events: none; z-index: 6;
}
.fg-stage[data-state="bite"] .fg-bite-mark {
  animation: fgBiteMark .5s cubic-bezier(.3,1.6,.5,1) infinite;
}
@keyframes fgBiteMark {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(-6deg); opacity: 1; }
  50%      { transform: translateX(-50%) scale(1.22) rotate(6deg); opacity: .85; }
}

/* ---------------- 鱼获弹出 ---------------- */
.fg-catch {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none; z-index: 8;
}
.fg-catch-in {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 34px;
  border-radius: 16px;
  background: rgba(8, 16, 26, .88);
  border: 2px solid var(--rc, var(--line));
  box-shadow: 0 0 40px var(--rg, rgba(0,0,0,.4)), 0 16px 40px rgba(0,0,0,.5);
  animation: fgCatchPop .5s cubic-bezier(.3,1.5,.5,1) both;
  transition: opacity .35s, transform .35s;
}
.fg-catch-in.fade { opacity: 0; transform: translateY(-16px) scale(.94); }
@keyframes fgCatchPop {
  0%   { opacity: 0; transform: scale(.5) translateY(30px); }
  60%  { transform: scale(1.06) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}
.fg-catch-emoji { font-size: 44px; line-height: 1; animation: fgEmojiBob 1.4s ease-in-out infinite; }
@keyframes fgEmojiBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-6px) rotate(4deg); }
}
.fg-catch-name { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: .5px; }
.fg-catch-rar { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.fg-catch-price { font-size: 14px; color: #4ade80; font-weight: 700; }
.fg-catch-in.escaped { border-color: rgba(148,163,184,.5); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.fg-catch-in.escaped .fg-catch-name { color: #cbd5e1; font-size: 16px; }
.fg-catch-in.empty { border-color: rgba(148,163,184,.35); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.fg-catch-in.empty .fg-catch-name { color: #94a3b8; font-size: 16px; }

/* ---------------- 操作区 ---------------- */
.fg-controls {
  position: absolute; left: 0; right: 0; bottom: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 7;
}
.fg-tip {
  font-size: 13px; color: rgba(226,232,240,.9);
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
  min-height: 18px;
  transition: color .2s;
}
.fg-stage[data-state="bite"] .fg-tip { color: #ff6b6b; font-weight: 700; }
.fg-cast-btn {
  appearance: none; cursor: pointer; font-family: inherit;
  padding: 13px 34px; border-radius: 99px;
  font-size: 15px; font-weight: 800; letter-spacing: .5px;
  border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 28%, #000),
    color-mix(in srgb, var(--accent) 14%, #000));
  color: var(--accent);
  box-shadow: 0 6px 22px rgba(0,0,0,.4);
  transition: transform .15s, box-shadow .2s;
}
.fg-cast-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.5); }
.fg-cast-btn:active:not(:disabled) { transform: scale(.95); }
.fg-cast-btn:disabled { cursor: default; opacity: .82; }
.fg-stage[data-state="bite"] .fg-cast-btn {
  border-color: #ff4444;
  background: linear-gradient(135deg, rgba(255,68,68,.4), rgba(255,68,68,.2));
  color: #ff8080;
  animation: fgBtnPulse .5s ease-in-out infinite;
}
@keyframes fgBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,68,68,.45); }
  50%      { box-shadow: 0 0 0 12px rgba(255,68,68,0); }
}
.fg-hint { font-size: 11px; color: rgba(148,163,184,.7); }

/* ---------------- 本次成果 ---------------- */
.fg-session {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.fg-sess-item {
  padding: 13px 15px; border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 55%, #000);
  border: 1px solid var(--line);
}
.fg-sess-item span { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }
.fg-sess-item b { font-size: 19px; color: var(--accent); }

/* ---------------- 两列布局 ---------------- */
.fg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.fg-cols .gcard { margin-top: 0; }

/* 渔获记录 */
.fg-log { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.fg-log-empty { color: var(--muted); font-size: 13px; padding: 16px 0; text-align: center; }
.fg-log-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; border-radius: 9px;
  background: color-mix(in srgb, var(--bg) 55%, #000);
  border-left: 3px solid var(--rc, var(--line));
  font-size: 13px;
  animation: fgLogIn .35s ease both;
}
@keyframes fgLogIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
.fg-li-name { flex: 1 1 auto; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-li-rar { font-size: 11px; color: var(--muted); flex: 0 0 auto; }
.fg-li-price { font-size: 12.5px; color: #4ade80; font-weight: 700; flex: 0 0 auto; }

/* ---------------- 数据区 ---------------- */
.fg-loading, .fg-nologin {
  padding: 24px 10px; text-align: center;
  color: var(--muted); font-size: 13.5px; line-height: 1.9;
}
.fg-nologin a { color: var(--accent); }

.fg-stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.fg-stat {
  padding: 12px 14px; border-radius: 11px;
  background: color-mix(in srgb, var(--bg) 55%, #000);
  border: 1px solid var(--line);
}
.fg-stat span { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }
.fg-stat b { display: block; font-size: 18px; color: var(--accent); }
.fg-stat b small { font-size: 12px; color: var(--muted); }
.fg-stat i { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 3px; }

.fg-rarity-list { display: flex; flex-direction: column; gap: 8px; }
.fg-rar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.fg-rar-name { flex: 0 0 96px; font-weight: 600; white-space: nowrap; }
.fg-rar-track {
  flex: 1 1 auto; height: 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  overflow: hidden;
}
.fg-rar-track i { display: block; height: 100%; border-radius: 3px; transition: width .7s ease; }
.fg-rar-cnt { flex: 0 0 auto; font-size: 11px; color: var(--muted); min-width: 58px; text-align: right; }

/* ---------------- 移动端 ---------------- */
@media (max-width: 700px) {
  .fg-stage { height: 320px; }
  .fg-cols { grid-template-columns: 1fr; }
  .fg-session { grid-template-columns: repeat(2, 1fr); }
  .fg-catch-name { font-size: 17px; }
  .fg-cast-btn { padding: 12px 28px; font-size: 14px; }
  .fg-rar-name { flex: 0 0 82px; font-size: 11.5px; }
}