/* app.css — 「낚시왕」 화면.
   모바일 세로 화면이 기준. 데스크톱에서는 가운데 폭을 잡아 폰처럼 보여준다.

   ⚠️이 게임은 다크 한 벌로 간다(새벽 물가의 어둠이 이 게임의 세계다).
      라이트 테마를 따로 두지 않는 대신 배경·글자색을 전부 명시한다 — 어느 host 위에 얹혀도 안 깨지게.
   ⚠️색은 토큰(:root)으로만 쓴다. 금색은 '기록·값어치', 초록은 '좋은 조황', 빨강은 '위험'.
      이 세 가지 의미를 섞어 쓰면 화면이 무슨 말을 하는지 알 수 없게 된다.
   ⚠️시간대 색감은 배경 이미지 위에 [data-part] 오버레이 한 겹으로 만든다 —
      새벽·한낮·해질녘·밤을 이미지 네 장이 아니라 한 장으로 덮기 위한 장치다. */

:root {
  --bg: #0b0e14;
  --bg2: #0f131b;
  --panel: #161b26;
  --panel2: #1c2331;
  --line: #242c3a;
  --line2: #1d2431;
  --ink: #eef1f7;
  --sub: #9aa3b5;
  --sub2: #6b7488;
  --gold: #f5c451;
  --gold2: #ffdc8a;
  --green: #4ade80;
  --blue: #5b8cff;
  --red: #ff6b6b;
  --safearea: env(safe-area-inset-bottom, 0px);
  --glow: 0 8px 30px -12px rgba(245, 196, 81, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: "Apple SD Gothic Neo", Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", system-ui, sans-serif;
  font-size: 15px; line-height: 1.6; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}
#app { max-width: 460px; margin: 0 auto; height: 100%; background: var(--bg); position: relative; overflow: hidden; }
@media (min-width: 470px) { #app { box-shadow: 0 0 0 1px var(--line), 0 0 80px -20px rgba(0,0,0,.9); } }

.num { font-variant-numeric: tabular-nums; }
.tx2 { color: var(--sub); } .tx3 { color: var(--sub2); }
.fs12 { font-size: 12px; } .fs13 { font-size: 13px; } .fs14 { font-size: 14px; } .fs17 { font-size: 17px; }
.mt4{margin-top:4px}.mt6{margin-top:6px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}
.mb4{margin-bottom:4px}.mb6{margin-bottom:6px}.mb10{margin-bottom:10px}
.pad { height: 30px; }
.empty { text-align: center; color: var(--sub2); font-size: 13.5px; padding: 28px 14px; line-height: 1.85; }
b { font-weight: 700; }

/* ── 뼈대 ── */
.top {
  height: 54px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 16px; background: rgba(11,14,20,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); position: relative; z-index: 5; flex: none;
}
.top .l { display: flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 900; letter-spacing: -.05em; }
.top .r { display: flex; align-items: center; gap: 2px; }
.ico { width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; border-radius: 11px; }
.ico:active { background: var(--panel2); }
.ico svg { width: 22px; height: 22px; fill: none; stroke: var(--sub); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.body { height: calc(100% - 54px); display: flex; flex-direction: column; }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tabbar {
  display: flex; border-top: 1px solid var(--line); background: rgba(11,14,20,.94); backdrop-filter: blur(12px);
  padding-bottom: var(--safearea); flex: none;
}
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 8px; color: var(--sub2); cursor: pointer; }
.tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab span { font-size: 10.5px; font-weight: 700; letter-spacing: -.02em; }
.tab.on { color: var(--gold); }

.sec { padding: 16px 16px 0; }
.sec .h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
/* 섹션 제목 — 랜딩의 '초록 눈썹 + 굵은 제목' 구성을 목록 화면에 맞게 줄인 형태.
   한글에 자간을 벌린 대문자 라벨은 안 어울려서, 초록은 앞의 짧은 막대로만 남긴다. */
.sec .h .t {
  font-size: 14.5px; font-weight: 800; letter-spacing: -.03em; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.sec .h .t::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--green); flex: none; }
.sec .h .more { font-size: 12.5px; color: var(--sub2); cursor: pointer; font-weight: 600; }
.sec .h .more.acc { color: var(--gold); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.card.tight { padding: 4px 0; }

.kv2 { display: flex; flex-wrap: wrap; }
.kv2 > div { width: 50%; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 16px; }
.kv2 > div span { color: var(--sub2); font-size: 12.5px; flex: none; }
.kv2 > div b { font-size: 13.5px; font-weight: 700; text-align: right; }
.card:not(.tight) .kv2 { margin: 0 -16px; }

.row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--line2); }
.card.tight > .row:first-child { border-top: 0; }
.row .nm { flex: 1; min-width: 0; }
.row .nm b { font-size: 14.5px; font-weight: 700; }
.row .ra { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.row.own { opacity: .55; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--line2); }
.card.tight > .setrow:first-child { border-top: 0; }
.setrow b { font-size: 14.5px; }

/* ── 버튼 ── */
.btn {
  display: block; width: 100%; border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
  border-radius: 14px; padding: 13px; font-size: 14.5px; font-weight: 800; font-family: inherit;
  cursor: pointer; letter-spacing: -.02em; transition: transform .08s, filter .12s;
}
.btn:active { transform: scale(.985); }
.btn.pri {
  background: linear-gradient(180deg, var(--gold2), var(--gold)); border-color: var(--gold);
  color: #241a02; box-shadow: var(--glow);
}
.btn.big { padding: 17px; font-size: 16.5px; border-radius: 16px; }
.btn.sm { padding: 11px; font-size: 13.5px; }
.btn.xs { width: auto; padding: 8px 13px; font-size: 12.5px; border-radius: 10px; }
.btn.off { opacity: .35; pointer-events: none; box-shadow: none; }
.btn.danger { background: transparent; color: var(--red); border-color: rgba(255,107,107,.34); box-shadow: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* 켜고 끄는 스위치 */
.sw { width: 50px; height: 30px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); position: relative; cursor: pointer; flex: none; padding: 0; }
.sw i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--sub2); transition: left .18s, background .18s; }
.sw.on { background: rgba(245,196,81,.2); border-color: var(--gold); }
.sw.on i { left: 25px; background: var(--gold); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  background: var(--panel); color: var(--sub); border: 1px solid var(--line); cursor: pointer;
}
.chip.on { background: rgba(245,196,81,.14); border-color: var(--gold); color: var(--gold); }
.tag {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2.5px 9px; border-radius: 8px;
  background: var(--panel2); color: var(--sub2); border: 1px solid var(--line); vertical-align: 1px;
}
.tag.acc { color: var(--gold); border-color: rgba(245,196,81,.4); background: rgba(245,196,81,.1); }
.tag.gold { color: var(--gold); border-color: rgba(245,196,81,.4); background: rgba(245,196,81,.1); }
.tag.up { color: var(--green); border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.1); }
.tag.dn { color: var(--red); border-color: rgba(255,107,107,.4); background: rgba(255,107,107,.1); }
.dn { color: var(--red); }

/* ── 히어로: 배경 + 캐릭터 두 장을 겹친다 ── */
.hero { position: relative; height: 320px; overflow: hidden; background: var(--bg); }
.hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .me {
  position: absolute; inset: 22px 0 0; width: 100%; height: calc(100% - 22px);
  object-fit: contain; object-position: center bottom; z-index: 2;
  filter: drop-shadow(0 12px 34px rgba(0,0,0,.75));
}
/* 인물 뒤로 금색 후광 — 랜딩의 히어로 글로우를 게임 안으로 가져온 것 */
.hero::after {
  content: ""; position: absolute; left: 50%; bottom: 4%; width: 74%; height: 62%;
  transform: translateX(-50%); z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(245,196,81,.22), transparent 68%);
}
.hero .veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, var(--bg) 1%, rgba(11,14,20,.72) 22%, transparent 56%);
}
.hero .hero-top { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 4; display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  background: rgba(11,14,20,.62); color: var(--ink); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px);
}
.hero .bub {
  position: absolute; left: 16px; bottom: 14px; z-index: 4; max-width: 78%;
  background: rgba(11,14,20,.66); border: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(10px);
  padding: 10px 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.7; color: var(--ink);
}
.hero .bub b { color: var(--gold); }

/* 시간대 — 배경 한 장을 네 가지 시간으로 만든다 */
.tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; }
[data-part="dawn"] .bg { filter: saturate(.9) brightness(.8); }
[data-part="dawn"] .tint { background: linear-gradient(to top, #ffb98a 0%, #9fb6d8 55%, #5b6d96 100%); opacity: .4; }
[data-part="day"] .bg { filter: brightness(.86); }
[data-part="day"] .tint { background: #b9d4e6; opacity: .1; }
[data-part="dusk"] .bg { filter: saturate(1.1) brightness(.82); }
[data-part="dusk"] .tint { background: linear-gradient(to top, #ff7a3d 0%, #ff9d5c 38%, #5b4f8c 100%); opacity: .44; }
[data-part="night"] .bg { filter: saturate(.5) brightness(.36); }
[data-part="night"] .tint { background: linear-gradient(to top, #0b1225 0%, #101a33 60%, #16233f 100%); opacity: .62; }
[data-part="night"] .me { filter: brightness(.7) saturate(.85) drop-shadow(0 12px 34px rgba(0,0,0,.8)); }
[data-part="dusk"] .me { filter: brightness(.9) saturate(1.05) drop-shadow(0 12px 34px rgba(0,0,0,.8)); }

/* ── 체력 ── */
.apbar { position: relative; height: 28px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; margin-bottom: 10px; }
.apfill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(74,222,128,.3), rgba(74,222,128,.5)); transition: width .4s; }
.aptx { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--ink); }

/* ── 환경 카드 ── */
.envcard .eh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.envcard .eh b { font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.sunbar { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 11px; color: var(--sub2); }
.sunline { flex: 1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #46527a, var(--gold), #ff7a3d); position: relative; }
.sunline i { position: absolute; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); transform: translateX(-50%); }
.envnote { margin-top: 13px; font-size: 12.5px; color: var(--sub); line-height: 1.75; background: var(--bg2); border: 1px solid var(--line2); border-radius: 12px; padding: 11px 13px; }

.keeprow { display: flex; gap: 5px; flex-wrap: wrap; padding: 13px 16px 4px; }
.kchip { font-size: 11.5px; font-weight: 700; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 4px 9px; }
.card.tight .btn.sm { margin: 9px 16px 13px; width: calc(100% - 32px); }
.keeplist { max-height: 44vh; overflow-y: auto; margin: 0 -18px; }

/* ── 스탯 바 ── */
.sb { display: flex; align-items: center; gap: 10px; padding: 7px 16px; }
.sb > span { font-size: 12px; color: var(--sub2); width: 30px; flex: none; }
.sb > b { font-size: 12.5px; width: 26px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.sbb { flex: 1; height: 7px; border-radius: 4px; background: var(--bg2); overflow: hidden; }
.sbb i { display: block; height: 100%; border-radius: 4px; transition: width .35s; }
.strow { display: flex; align-items: center; gap: 8px; padding-right: 14px; }
.strow .sb { flex: 1; }

/* ── 포인트 ── */
.spot { padding: 0; overflow: hidden; }
.spot.on { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(245,196,81,.3), var(--glow); }
.spot.lock { opacity: .5; }
.spimg { position: relative; height: 120px; }
.spimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lockbadge { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11,14,20,.62); color: var(--ink); font-weight: 800; font-size: 14px; }
.spbody { padding: 13px 15px 15px; }
.spname { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.spname b { font-size: 16.5px; font-weight: 900; letter-spacing: -.04em; }
.spmeta { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--sub); }
.nearbox { padding: 16px; }

/* ── 도감 ── */
.dexgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dexcell {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 4px 10px; text-align: center; cursor: pointer;
}
.dexcell .de { font-size: 25px; line-height: 1.2; }
.dexcell .dnm { font-size: 11.5px; font-weight: 700; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.dexcell .dm { font-size: 10.5px; color: var(--sub2); font-variant-numeric: tabular-nums; }
.dexcell.un { opacity: .35; }
.dexcell.un .de { filter: grayscale(1); }
.rdot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; }

/* ── 내 정보 ── */
.mecard { display: flex; gap: 14px; align-items: center; }
.mecard .face { width: 64px; height: 64px; border-radius: 18px; object-fit: cover; object-position: center 16%; background: var(--panel2); border: 1px solid var(--line); flex: none; }
.lvbar { height: 6px; border-radius: 3px; background: var(--bg2); overflow: hidden; margin: 8px 0 4px; }
.lvbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold2)); }

/* ── 랭킹 ── */
.seasonbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; }
.seasonbar b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.seasonbar .ra { text-align: right; }
.seasonbar .ra b { color: var(--gold); }
.rankrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line2); }
.rankrow:first-child { border-top: 0; }
.rankrow .rk { width: 22px; text-align: center; font-weight: 900; font-size: 14px; color: var(--sub2); flex: none; font-variant-numeric: tabular-nums; }
.rankrow .rk.top { color: var(--gold); }
.rankrow .nm { flex: 1; min-width: 0; }
.rankrow .nm b { font-size: 14.5px; }
.rankrow > b { color: var(--gold); font-size: 14px; }
.rankrow.me { background: rgba(245,196,81,.07); }
.rankme { padding: 12px 16px; border-top: 1px solid var(--line2); font-size: 12.5px; color: var(--sub2); text-align: center; }

/* ── 시작 ── */
.introwrap { height: 100%; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 26px 20px; background: var(--bg); }
.introbox { width: 100%; max-width: 400px; }
.introbox h2 { font-size: 27px; font-weight: 900; letter-spacing: -.055em; margin: 8px 0 5px; line-height: 1.2; }
.inp {
  width: 100%; margin-top: 14px; padding: 15px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 14px; outline: none;
}
.inp:focus { border-color: var(--gold); }
.inp::placeholder { color: var(--sub2); }
.introwrap.story { background: radial-gradient(ellipse at 50% 22%, #131b2b 0%, var(--bg) 62%); }
.st { font-size: 16px; line-height: 2; margin: 15px 0; animation: fadeUp .6s both; }
.st:nth-child(3) { animation-delay: .35s; } .st:nth-child(4) { animation-delay: .7s; }
.st:nth-child(5) { animation-delay: 1.05s; } .st:nth-child(6) { animation-delay: 1.4s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* ── 토스트 · 시트 ── */
#toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 14px);
  background: var(--panel2); border: 1px solid var(--line); color: var(--ink);
  font-size: 13.5px; font-weight: 700; padding: 12px 19px; border-radius: 13px;
  z-index: 900; opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
  max-width: 86%; text-align: center; box-shadow: 0 12px 34px -14px rgba(0,0,0,.9);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
.sheetwrap { position: fixed; inset: 0; z-index: 800; }
.sheetbg { position: absolute; inset: 0; background: rgba(4,6,10,.68); opacity: 0; transition: opacity .24s; }
.sheetwrap.on .sheetbg { opacity: 1; }
.sheet {
  position: absolute; left: 50%; bottom: 0; width: 100%; max-width: 460px; transform: translate(-50%, 100%);
  background: var(--panel); border-top: 1px solid var(--line); border-radius: 22px 22px 0 0;
  padding: 22px 18px calc(22px + var(--safearea));
  transition: transform .28s cubic-bezier(.2,.9,.25,1); max-height: 86vh; overflow-y: auto;
}
.sheetwrap.on .sheet { transform: translate(-50%, 0); }
.sh-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sh-h b { font-size: 19px; font-weight: 900; letter-spacing: -.045em; }

/* ════════ 낚시 화면 ════════ */
.fishbody { display: flex; flex-direction: column; }
.fishscene { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--bg); }
.fishscene .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fishscene .water {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44%; z-index: 2;
  background: linear-gradient(to bottom, rgba(8,16,30,.12), rgba(6,12,24,.58));
}
#fx { position: absolute; inset: 0; z-index: 3; }
.fishui {
  flex: none; background: var(--panel); border-top: 1px solid var(--line);
  padding: 15px 16px calc(15px + var(--safearea)); position: relative; z-index: 6;
}

.rod-idle, .rod-cast { position: absolute; right: 16%; top: 26%; font-size: 42px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.7)); }
.rod-cast { animation: rodSwing .45s ease-out; }
@keyframes rodSwing { from { transform: rotate(-38deg) translateX(-14px); } to { transform: none; } }

.ready .rtop { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 13px; flex-wrap: wrap; }
.baitrow { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.bchip {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
  border-radius: 13px; padding: 9px 12px; cursor: pointer; font-family: inherit;
}
.bchip .be { font-size: 19px; }
.bchip .bn { font-size: 11.5px; font-weight: 800; }
.bchip .bq { font-size: 10px; color: var(--sub2); font-variant-numeric: tabular-nums; }
.bchip.on { border-color: var(--gold); background: rgba(245,196,81,.12); }
.bchip.off { opacity: .34; }

/* 캐스팅 */
.powbar { position: relative; height: 46px; border-radius: 13px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; }
.ptarget { position: absolute; top: 0; bottom: 0; background: rgba(74,222,128,.24); border-left: 2px solid var(--green); border-right: 2px solid var(--green); }
.pmark { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--gold); border-radius: 2px; box-shadow: 0 0 14px var(--gold); }

/* 기다리기 */
.waitui { text-align: center; padding: 9px 0 5px; min-height: 82px; display: flex; flex-direction: column; justify-content: center; }
.waitui.hot { background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.3); border-radius: 14px; }
.hotmsg { font-size: 34px; font-weight: 900; letter-spacing: -.06em; color: var(--red); text-shadow: 0 0 26px rgba(255,107,107,.6); animation: hotPulse .26s infinite alternate; }
@keyframes hotPulse { from { transform: scale(1); } to { transform: scale(1.1); } }
.bobber { position: absolute; left: 50%; top: 58%; font-size: 27px; transform: translateX(-50%); animation: bob 2.4s ease-in-out infinite; filter: drop-shadow(0 3px 8px rgba(0,0,0,.6)); }
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }
.bobber.nib { animation: nibShake .12s 2 alternate; }
@keyframes nibShake { to { transform: translate(-50%, var(--nib, 4px)); } }
.bobber.down { animation: bobDown .3s forwards; }
@keyframes bobDown { to { transform: translate(-50%, 36px) scale(.7); opacity: .3; } }
.ripple {
  position: absolute; left: 50%; top: 62%; width: 46px; height: 15px; margin-left: -23px;
  border: 2px solid rgba(255,255,255,.32); border-radius: 50%; animation: rip 2.6s ease-out infinite;
}
@keyframes rip { 0% { transform: scale(.4); opacity: .65; } 100% { transform: scale(2.7); opacity: 0; } }

/* 파이팅 */
.fbar, .tbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fbar .lb, .tbar .lb { font-size: 11.5px; color: var(--sub2); width: 48px; flex: none; font-weight: 700; }
.bar { flex: 1; height: 14px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; position: relative; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #35507a, var(--blue)); }
.bar.tens i { background: var(--green); transition: none; }
.bar.tens i.danger { background: var(--red); box-shadow: 0 0 16px rgba(255,107,107,.7); }
.bar.tens i.slackc { background: var(--sub2); }
.bar.tens .safe { position: absolute; top: 0; bottom: 0; background: rgba(74,222,128,.13); border-left: 1px dashed rgba(74,222,128,.5); border-right: 1px dashed rgba(255,107,107,.5); }
.tbar .tv { width: 26px; text-align: right; font-size: 12.5px; font-weight: 800; flex: none; font-variant-numeric: tabular-nums; }
.fmsg { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--sub); margin: 7px 0 11px; min-height: 21px; }
.fmsg.hot { color: var(--red); }
.fmsg.warn { color: var(--gold); }
.btn.hold { user-select: none; touch-action: none; }
.btn.hold.act { filter: brightness(1.12); transform: scale(.985); }
.fightline { position: absolute; inset: 0; }
.fightline .rodtip { position: absolute; right: 18%; top: 18%; font-size: 36px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.7)); }
.fightline .line {
  position: absolute; right: 24%; top: 30%; width: 2px; height: 34%;
  background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.12));
  transform-origin: top center;
}
.fightline .splash { position: absolute; right: 20%; top: 62%; font-size: 32px; animation: splash .7s infinite alternate; }
@keyframes splash { from { transform: translateY(0) scale(1); opacity: .75; } to { transform: translateY(-8px) scale(1.16); opacity: 1; } }

/* 결과 */
.landed { position: absolute; inset: 0; display: grid; place-items: center; }
.landed .lfish { font-size: 100px; animation: pop .55s cubic-bezier(.2,1.5,.4,1) both; filter: drop-shadow(0 14px 30px rgba(0,0,0,.7)); }
.landed.big .lfish { font-size: 132px; animation: popBig .8s cubic-bezier(.2,1.5,.4,1) both; filter: drop-shadow(0 0 44px rgba(245,196,81,.6)); }
@keyframes pop { from { transform: scale(.2) translateY(50px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes popBig { 0% { transform: scale(.1) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.22) rotate(6deg); } 100% { transform: none; opacity: 1; } }
.failmark { position: absolute; inset: 0; display: grid; place-items: center; font-size: 76px; opacity: .8; animation: pop .4s both; }
.resultui { text-align: center; }
.resultui .rname { display: flex; align-items: center; justify-content: center; gap: 8px; }
.resultui .rname b { font-size: 20px; font-weight: 900; letter-spacing: -.045em; }
.resultui .rsize { font-size: 40px; font-weight: 900; letter-spacing: -.06em; line-height: 1.1; margin-top: 3px; }
.resultui.big .rsize { color: var(--gold); text-shadow: 0 0 30px rgba(245,196,81,.5); }
.ribbon { display: inline-block; font-size: 11.5px; font-weight: 900; padding: 4px 13px; border-radius: 999px; margin-bottom: 8px; letter-spacing: .02em; }
.ribbon.new { background: rgba(74,222,128,.16); color: var(--green); border: 1px solid rgba(74,222,128,.45); }
.ribbon.rec { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #241a02; }
.resultui.fail .rname b { color: var(--sub); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}