:root {
  --bg: #061521;
  --bg-2: #0a2030;
  --panel: rgba(10, 31, 45, .9);
  --panel-2: #0d293a;
  --line: rgba(160, 205, 214, .14);
  --muted: #89a6af;
  --text: #f1f4eb;
  --gold: #f0bb62;
  --gold-2: #ffd994;
  --teal: #32c7b4;
  --danger: #ee7b72;
  --shadow: 0 24px 70px rgba(0, 0, 0, .36);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); overscroll-behavior-y: none; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--text); background: radial-gradient(circle at 15% -10%, #16495a 0, transparent 34%), radial-gradient(circle at 90% 0, #362c26 0, transparent 26%), var(--bg); font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; font-size: 16px; -webkit-text-size-adjust: 100%; }
button { font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.cloud-login-screen { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; overflow-y: auto; padding: 24px; background: linear-gradient(rgba(3,16,25,.72),rgba(3,16,25,.92)),url("./assets/moonlit-lake.webp") center/cover no-repeat; backdrop-filter: blur(9px); transition: opacity .25s ease,visibility .25s ease; }
.cloud-login-screen.hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.cloud-login-card { width: min(440px,100%); padding: 34px; background: radial-gradient(circle at 90% 0,rgba(240,187,98,.14),transparent 32%),linear-gradient(150deg,rgba(15,52,68,.97),rgba(5,22,34,.98)); border: 1px solid rgba(240,187,98,.3); border-radius: 24px; box-shadow: 0 30px 100px rgba(0,0,0,.68); }
.cloud-login-mark { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 20px; color: #10232b; background: linear-gradient(145deg,var(--gold-2),#bd8031); border-radius: 19px 7px 19px 7px; font-family: serif; font-size: 2rem; font-weight: 900; }
.cloud-login-card h1 { margin-bottom: 10px; }
.cloud-login-card > p:not(.eyebrow) { color: #a7bdc2; font-size: .84rem; line-height: 1.75; }
.cloud-login-form { display: grid; gap: 8px; margin-top: 22px; }
.cloud-login-form label { margin-top: 5px; color: var(--muted); font-size: .74rem; }
.cloud-login-form input { width: 100%; height: 46px; padding: 0 14px; color: var(--text); background: rgba(0,0,0,.23); border: 1px solid var(--line); border-radius: 11px; outline: 0; font: inherit; }
.cloud-login-form input:focus { border-color: rgba(240,187,98,.58); box-shadow: 0 0 0 3px rgba(240,187,98,.09); }
.cloud-login-form > small { margin: 4px 0 2px; color: var(--muted); font-size: .68rem; }
.cloud-login-error { min-height: 20px; color: var(--danger); font-size: .74rem; }
.app-shell { width: min(1440px, 100%); min-height: 100vh; margin: 0 auto; padding: 0 28px 42px; }
.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0; color: var(--text); background: none; border: 0; text-align: left; cursor: pointer; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; color: #08202a; background: linear-gradient(145deg, var(--gold-2), #b77d31); border-radius: 14px 5px 14px 5px; font-family: serif; font-size: 1.45rem; font-weight: 900; box-shadow: 0 8px 24px rgba(240, 187, 98, .2); }
.brand strong { display: block; font-family: "STKaiti", "KaiTi", serif; font-size: 1.3rem; letter-spacing: .12em; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: .66rem; letter-spacing: .2em; }
.top-stats { display: flex; gap: 10px; }
.cloud-status { min-width: 125px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; color: var(--muted); background: rgba(7,24,35,.72); border: 1px solid var(--line); border-radius: 14px; font-size: .7rem; }
.cloud-status i { width: 7px; height: 7px; background: var(--danger); border-radius: 50%; box-shadow: 0 0 8px rgba(238,123,114,.4); }
.cloud-status.online i { background: var(--teal); box-shadow: 0 0 8px rgba(50,199,180,.55); }
.stat-pill { min-width: 145px; height: 46px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 9px; padding: 0 15px; color: var(--muted); background: rgba(7, 24, 35, .72); border: 1px solid var(--line); border-radius: 14px; font-size: .82rem; }
.stat-pill strong { color: var(--text); font-size: 1rem; font-variant-numeric: tabular-nums; }
.stat-pill i { width: 22px; height: 22px; display: grid; place-items: center; color: #51360f; background: var(--gold); border-radius: 50%; font-style: normal; font-size: .65rem; font-weight: 900; }
.stat-pill.compact { min-width: 110px; grid-template-columns: 1fr auto; }
.game-nav { height: 68px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.nav-item { position: relative; min-width: 112px; padding: 10px 16px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 12px; cursor: pointer; transition: .2s ease; }
.nav-item span { margin-right: 7px; color: #6e9ba6; font-size: 1.05rem; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.035); }
.nav-item.active { color: var(--gold-2); background: rgba(240, 187, 98, .1); border-color: rgba(240, 187, 98, .23); }
.nav-item.active span { color: var(--gold); }
.nav-item b { position: absolute; top: 2px; right: 5px; min-width: 19px; height: 19px; padding: 0 5px; line-height: 19px; color: #09222b; background: var(--gold); border-radius: 10px; font-size: .68rem; }
.tab-panel { display: none; animation: fadeUp .28s ease; }
.tab-panel.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
.panel-card { background: linear-gradient(155deg, rgba(15, 45, 61, .92), rgba(7, 25, 37, .94)); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.fishing-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; }
.lake-card { padding: 20px; }
.lake-heading, .card-title-row, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.eyebrow { margin: 0 0 5px; color: var(--gold); font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-family: "STKaiti", "KaiTi", serif; font-size: clamp(1.8rem, 3vw, 2.65rem); font-weight: 800; letter-spacing: .05em; }
h2 { margin-bottom: 0; font-size: 1.08rem; }
.ghost-btn, .text-btn { color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.ghost-btn { padding: 9px 13px; border: 1px solid var(--line); border-radius: 11px; }
.ghost-btn:hover, .text-btn:hover { color: var(--gold-2); }
.ghost-btn span { margin-left: 7px; }
.water-canvas { position: relative; min-height: 490px; margin-top: 17px; overflow: hidden; background: #0c3345 url("./assets/moonlit-lake.webp") center/cover no-repeat; border: 1px solid rgba(213, 232, 228, .18); border-radius: 16px; isolation: isolate; }
.water-canvas::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(2, 13, 22, .04) 0%, rgba(4, 31, 43, .08) 48%, rgba(2, 19, 29, .68) 100%); }
.water-canvas::after { content: ""; position: absolute; left: 50%; bottom: 27%; width: 260px; height: 72px; transform: translateX(-50%); border: 1px solid rgba(139, 230, 226, .38); border-radius: 50%; box-shadow: 0 0 0 18px rgba(92, 207, 201, .06), 0 0 0 42px rgba(92, 207, 201, .035); animation: ripple 3.5s ease-out infinite; pointer-events: none; }
@keyframes ripple { 0% { opacity: .1; transform: translateX(-50%) scale(.65); } 45% { opacity: .7; } 100% { opacity: 0; transform: translateX(-50%) scale(1.25); } }
.mist { position: absolute; inset: 40% -5% auto; height: 90px; background: linear-gradient(90deg, transparent, rgba(218,237,230,.09), transparent); filter: blur(18px); }
.water-status { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; gap: 10px; }
.water-status span { padding: 7px 10px; color: #d8ece8; background: rgba(2, 15, 24, .58); border: 1px solid rgba(255,255,255,.11); border-radius: 9px; backdrop-filter: blur(8px); font-size: .76rem; }
.cast-zone { position: absolute; inset: 0; display: grid; place-items: center; }
.cast-button { position: relative; z-index: 2; width: 142px; height: 142px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #32220c; background: radial-gradient(circle at 35% 25%, #ffe4a9, var(--gold) 52%, #b27629 100%); border: 8px solid rgba(255, 226, 169, .16); border-radius: 50%; background-clip: padding-box; box-shadow: 0 12px 55px rgba(0,0,0,.5), 0 0 0 1px rgba(255,222,154,.55) inset; cursor: pointer; transition: transform .18s ease, filter .18s ease; }
.cast-button:hover:not(:disabled) { transform: scale(1.055); filter: brightness(1.08); }
.cast-button:active:not(:disabled) { transform: scale(.98); }
.cast-button:disabled { color: #9cb0b4; background: rgba(6, 28, 38, .85); border-color: rgba(158, 197, 201, .08); box-shadow: 0 10px 40px rgba(0,0,0,.35); cursor: not-allowed; }
.cast-icon { height: 32px; font-size: 2rem; line-height: 1; }
.cast-button strong { font-size: 1.3rem; }
.cast-button small { margin-top: 4px; font-size: .68rem; opacity: .72; }
.bobber { position: absolute; left: 65%; top: 58%; width: 14px; height: 28px; z-index: 1; background: linear-gradient(#e6574b 0 43%, #f4ede2 43%); border-radius: 9px; box-shadow: 0 7px 18px rgba(0,0,0,.4); animation: bob 2.2s ease-in-out infinite; }
.bobber span { position: absolute; left: 50%; top: -38px; width: 1px; height: 40px; background: rgba(220, 232, 229, .55); }
@keyframes bob { 50% { transform: translateY(6px) rotate(3deg); } }
.water-nameplate { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; justify-content: space-between; gap: 12px; color: #dce9e5; font-size: .78rem; }
.water-nameplate strong { color: var(--gold-2); }
.cooldown-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; margin-top: 15px; padding: 11px 13px; background: rgba(0,0,0,.16); border: 1px solid var(--line); border-radius: 13px; }
.cooldown-copy { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.cooldown-copy > span { width: 28px; height: 28px; display: grid; place-items: center; color: #062326; background: var(--teal); border-radius: 50%; font-size: .78rem; font-weight: 900; }
.cooldown-copy strong, .cooldown-copy small { display: block; }
.cooldown-copy strong { font-size: .83rem; }
.cooldown-copy small { margin-top: 2px; color: var(--muted); font-size: .7rem; }
.cooldown-progress { height: 5px; overflow: hidden; background: #05151f; border-radius: 5px; }
.cooldown-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--teal), #99ede4); border-radius: inherit; transition: width 1s linear; }
.cooldown-time { min-width: 58px; color: var(--teal); text-align: right; font-size: .86rem; font-variant-numeric: tabular-nums; }
.side-stack { display: flex; flex-direction: column; gap: 18px; }
.rod-mini, .recent-card { padding: 19px; }
.level-seal { width: 42px; height: 42px; display: grid; place-items: center; color: var(--gold-2); border: 1px solid rgba(240,187,98,.35); border-radius: 50%; font-family: serif; font-weight: 900; }
.rod-art { position: relative; height: 128px; margin: 10px 0 4px; overflow: hidden; }
.rod-line { position: absolute; width: 205px; height: 7px; left: 45px; top: 54px; transform: rotate(-33deg); background: linear-gradient(90deg, #5b3a22, #e4c477 28%, #8bdad1); border-radius: 8px; box-shadow: 0 0 20px rgba(139,218,209,.14); }
.rod-handle { position: absolute; width: 65px; height: 15px; left: 17px; bottom: 31px; transform: rotate(-33deg); background: linear-gradient(#362217, #835932); border: 2px solid #bd8954; border-radius: 5px; }
.rarity-odds { display: flex; justify-content: space-between; margin: 5px 0 15px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.rarity-odds strong { color: var(--gold-2); }
.primary-btn, .secondary-btn { min-height: 42px; padding: 0 17px; border-radius: 11px; font-weight: 800; cursor: pointer; transition: .18s ease; }
.primary-btn { color: #34230b; background: linear-gradient(135deg, var(--gold-2), #ce8c3c); border: 0; box-shadow: 0 8px 20px rgba(222, 161, 72, .13); }
.primary-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.primary-btn:disabled { color: #6f7d7f; background: #263c46; box-shadow: none; cursor: not-allowed; }
.secondary-btn { color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.wide { width: 100%; }
.recent-card { flex: 1; min-height: 242px; }
.text-btn { padding: 4px; font-size: .76rem; }
.recent-list { margin-top: 12px; }
.recent-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.065); }
.recent-item:last-child { border-bottom: 0; }
.recent-icon { width: 34px; height: 34px; display: grid; place-items: center; background: rgba(255,255,255,.045); border-radius: 9px; }
.recent-item strong, .recent-item small { display: block; }
.recent-item strong { font-size: .78rem; }
.recent-item small { margin-top: 2px; color: var(--muted); font-size: .67rem; }
.recent-value { color: var(--gold-2); font-size: .73rem; }
.empty-mini { padding: 25px 5px; color: var(--muted); text-align: center; font-size: .8rem; }
.section-heading { min-height: 104px; padding: 7px 2px 16px; }
.section-heading p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); }
.summary-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.summary-item { padding: 15px 17px; background: rgba(13, 41, 58, .75); border: 1px solid var(--line); border-radius: 14px; }
.summary-item span, .summary-item strong { display: block; }
.summary-item span { color: var(--muted); font-size: .76rem; }
.summary-item strong { margin-top: 4px; color: var(--gold-2); font-size: 1.15rem; }
.fish-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.fish-card { position: relative; overflow: hidden; padding: 17px; background: linear-gradient(150deg, rgba(16,49,66,.92), rgba(7,25,37,.96)); border: 1px solid var(--rarity-color, var(--line)); border-radius: 16px; }
.fish-card::after { content: ""; position: absolute; width: 100px; height: 100px; right: -48px; top: -48px; background: var(--rarity-color, transparent); border-radius: 50%; opacity: .08; filter: blur(3px); }
.fish-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.fish-emoji { width: 52px; height: 52px; display: grid; place-items: center; background: rgba(255,255,255,.04); border-radius: 14px; font-size: 2rem; }
.rarity-badge { display: inline-flex; padding: 4px 8px; color: var(--rarity-color, var(--text)); background: color-mix(in srgb, var(--rarity-color, #fff) 10%, transparent); border: 1px solid color-mix(in srgb, var(--rarity-color, #fff) 32%, transparent); border-radius: 20px; font-size: .68rem; font-weight: 800; }
.fish-card h3 { margin: 15px 0 4px; font-size: 1rem; }
.fish-card > p { margin: 0; color: var(--muted); font-size: .72rem; }
.fish-meta { display: flex; justify-content: space-between; margin: 13px 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fish-meta span { color: var(--muted); font-size: .7rem; }
.fish-meta strong { display: block; margin-top: 2px; color: var(--text); font-size: .78rem; }
.fish-actions { display: flex; gap: 8px; }
.fish-actions button { flex: 1; min-height: 36px; padding: 0 8px; border-radius: 9px; font-size: .72rem; }
.empty-state { grid-column: 1 / -1; min-height: 280px; display: grid; place-items: center; padding: 35px; color: var(--muted); background: rgba(10,31,45,.65); border: 1px dashed rgba(160,205,214,.2); border-radius: 18px; text-align: center; }
.empty-state span { display: block; margin-bottom: 10px; font-size: 2.3rem; }
.capacity, .season-tag { padding: 9px 13px; color: var(--gold-2); background: rgba(240,187,98,.08); border: 1px solid rgba(240,187,98,.2); border-radius: 12px; font-size: .78rem; }
.showcase-pond { position: relative; min-height: 300px; overflow: hidden; margin-bottom: 16px; background: radial-gradient(ellipse at center, rgba(47,179,173,.22), transparent 45%), linear-gradient(145deg, #0e4253, #071e2c); border: 1px solid rgba(109,213,208,.2); border-radius: 23px; box-shadow: inset 0 -40px 80px rgba(0,0,0,.22); }
.showcase-pond::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(ellipse at 30% 40%, transparent 0 45px, rgba(143,223,216,.07) 48px, transparent 51px); }
.pond-fish { position: absolute; inset: 0; }
.pond-swimmer { position: absolute; width: 80px; height: 45px; display: grid; place-items: center; color: var(--rarity-color); filter: drop-shadow(0 8px 8px rgba(0,0,0,.28)); font-size: 2.3rem; animation: swim var(--speed) ease-in-out infinite alternate; animation-delay: var(--delay); }
@keyframes swim { from { transform: translateX(-18px) rotate(-4deg); } to { transform: translateX(28px) rotate(5deg); } }
.compact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gear-layout { display: grid; grid-template-columns: 1.35fr .85fr; gap: 16px; }
.gear-main, .probability-card { padding: 22px; }
.gear-visual { min-height: 150px; display: flex; align-items: center; gap: 22px; padding: 20px; background: radial-gradient(circle at 15% 50%, rgba(240,187,98,.14), transparent 30%), rgba(0,0,0,.12); border: 1px solid var(--line); border-radius: 16px; }
.gear-visual > span { width: 94px; height: 94px; display: grid; place-items: center; color: var(--gold-2); border: 1px solid rgba(240,187,98,.35); border-radius: 50%; font-family: "KaiTi", serif; font-size: 2.8rem; box-shadow: 0 0 0 8px rgba(240,187,98,.04); }
.gear-visual p, .gear-visual small { color: var(--muted); }
.gear-visual p { margin-bottom: 6px; font-size: .77rem; }
.gear-visual h2 { margin-bottom: 6px; font-size: 1.45rem; }
.gear-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 15px 0; }
.gear-stat { padding: 13px; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 11px; }
.gear-stat span, .gear-stat strong { display: block; }
.gear-stat span { color: var(--muted); font-size: .7rem; }
.gear-stat strong { margin-top: 4px; font-size: .9rem; }
.upgrade-box { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px; background: rgba(240,187,98,.06); border: 1px solid rgba(240,187,98,.16); border-radius: 14px; }
.upgrade-box p { margin: 0; color: var(--muted); font-size: .75rem; }
.upgrade-box strong { display: block; margin-top: 4px; color: var(--gold-2); }
.probability-list { margin-top: 17px; }
.prob-row { display: grid; grid-template-columns: 44px 1fr 58px; align-items: center; gap: 10px; margin: 11px 0; }
.prob-row span { font-size: .72rem; }
.prob-bar { height: 6px; overflow: hidden; background: rgba(255,255,255,.06); border-radius: 6px; }
.prob-bar i { display: block; height: 100%; min-width: 1px; background: var(--rarity-color); border-radius: inherit; }
.prob-row strong { text-align: right; font-size: .72rem; font-variant-numeric: tabular-nums; }
.rod-path { display: grid; grid-template-columns: repeat(10, minmax(86px, 1fr)); gap: 8px; margin-top: 16px; overflow-x: auto; padding-bottom: 7px; }
.rod-step { min-height: 104px; padding: 12px; color: var(--muted); background: rgba(8,28,40,.8); border: 1px solid var(--line); border-radius: 13px; }
.rod-step.current { color: var(--text); border-color: rgba(240,187,98,.5); background: rgba(240,187,98,.08); }
.rod-step.unlocked .step-num { color: #07282c; background: var(--teal); }
.step-num { width: 25px; height: 25px; display: grid; place-items: center; margin-bottom: 10px; background: #173746; border-radius: 50%; font-size: .65rem; font-weight: 900; }
.rod-step strong, .rod-step small { display: block; }
.rod-step strong { font-size: .73rem; }
.rod-step small { margin-top: 5px; font-size: .62rem; }
.water-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.water-card { position: relative; min-height: 245px; overflow: hidden; padding: 20px; background: linear-gradient(160deg, var(--water-a), var(--water-b)); border: 1px solid rgba(255,255,255,.12); border-radius: 19px; box-shadow: var(--shadow); }
.water-card::before { content: ""; position: absolute; width: 220px; height: 220px; right: -85px; bottom: -110px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,255,255,.025), 0 0 0 65px rgba(255,255,255,.018); }
.water-card.locked { filter: saturate(.45); }
.water-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.water-symbol { font-size: 1.85rem; }
.water-card h2 { margin-top: 33px; font-family: "KaiTi", serif; font-size: 1.55rem; }
.water-card > p { min-height: 42px; color: rgba(233,245,242,.65); font-size: .75rem; }
.water-specials { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.water-specials span { padding: 4px 7px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.09); border-radius: 7px; font-size: .65rem; }
.water-card button { min-height: 38px; padding: 0 13px; color: #f2eadb; background: rgba(2,15,23,.46); border: 1px solid rgba(255,255,255,.18); border-radius: 9px; font-size: .76rem; font-weight: 800; cursor: pointer; }
.water-card button:disabled { color: rgba(255,255,255,.42); cursor: not-allowed; }
.water-card.selected { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(240,187,98,.14), var(--shadow); }
.ranking-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 17px; }
.podium { min-height: 405px; display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 40px 20px 0; background: radial-gradient(circle at 50% 25%, rgba(240,187,98,.13), transparent 36%), rgba(8,28,40,.72); border: 1px solid var(--line); border-radius: 20px; }
.podium-item { width: 30%; text-align: center; }
.podium-avatar { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 10px; background: #123747; border: 2px solid var(--medal); border-radius: 50%; font-size: 1.7rem; }
.podium-item strong, .podium-item small { display: block; }
.podium-item strong { font-size: .82rem; }
.podium-item small { margin: 4px 0 10px; color: var(--gold-2); font-size: .7rem; }
.podium-base { height: var(--height); display: grid; place-items: start center; padding-top: 15px; color: var(--medal); background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); border-bottom: 0; border-radius: 13px 13px 0 0; font-family: serif; font-size: 1.7rem; font-weight: 900; }
.rank-list { padding: 12px 18px; }
.rank-row { display: grid; grid-template-columns: 44px 42px 1fr auto; align-items: center; gap: 12px; min-height: 62px; border-bottom: 1px solid var(--line); }
.rank-row:last-child { border-bottom: 0; }
.rank-row.player { margin: 5px -7px; padding: 0 7px; background: rgba(240,187,98,.07); border: 1px solid rgba(240,187,98,.22); border-radius: 11px; }
.rank-num { color: var(--muted); text-align: center; font-weight: 900; }
.rank-avatar { width: 36px; height: 36px; display: grid; place-items: center; background: #123747; border-radius: 10px; }
.rank-name strong, .rank-name small { display: block; }
.rank-name strong { font-size: .82rem; }
.rank-name small { margin-top: 2px; color: var(--muted); font-size: .66rem; }
.rank-score { color: var(--gold-2); font-size: .82rem; font-variant-numeric: tabular-nums; }
.catch-modal { position: fixed; inset: 0; z-index: 30; display: none; place-items: center; padding: 20px; }
.catch-modal.open { display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(1, 8, 14, .76); backdrop-filter: blur(8px); }
.catch-card { position: relative; width: min(430px, 100%); overflow: hidden; padding: 28px; text-align: center; background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--rarity-color) 20%, transparent), transparent 36%), linear-gradient(150deg, #123a4c, #071c2a 75%); border: 1px solid var(--rarity-color); border-radius: 24px; box-shadow: 0 30px 100px rgba(0,0,0,.65), 0 0 55px color-mix(in srgb, var(--rarity-color) 18%, transparent); animation: catchIn .32s cubic-bezier(.2,.9,.25,1.18); }
@keyframes catchIn { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.modal-close { position: absolute; top: 13px; right: 13px; z-index: 2; width: 34px; height: 34px; color: var(--muted); background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.catch-rays { position: absolute; left: 50%; top: 118px; width: 200px; height: 200px; transform: translate(-50%,-50%); background: repeating-conic-gradient(from 0deg, transparent 0 15deg, color-mix(in srgb, var(--rarity-color) 12%, transparent) 15deg 25deg); border-radius: 50%; animation: spin 12s linear infinite; }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(1turn); } }
.catch-fish-icon { position: relative; margin: 26px auto 12px; font-size: 5rem; filter: drop-shadow(0 16px 18px rgba(0,0,0,.34)); }
.catch-card h2 { position: relative; margin: 12px 0 5px; font-family: "KaiTi", serif; font-size: 2rem; }
.catch-card > p:not(.eyebrow) { color: var(--muted); }
.catch-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.catch-stats div { padding: 12px; background: rgba(0,0,0,.16); border: 1px solid var(--line); border-radius: 12px; }
.catch-stats span, .catch-stats strong { display: block; }
.catch-stats span { color: var(--muted); font-size: .72rem; }
.catch-stats strong { margin-top: 4px; color: var(--gold-2); }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.catch-card > small { display: block; margin-top: 13px; color: var(--muted); }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 25px; max-width: calc(100% - 32px); padding: 12px 17px; color: #13231f; background: #d6efe8; border-radius: 12px; box-shadow: 0 16px 45px rgba(0,0,0,.35); opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: .22s ease; font-size: .82rem; font-weight: 800; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 扩展经济、限时水域与九档品质 */
.gold-pill i { color: #5d3a00; background: linear-gradient(145deg, #fff2a6, #f0ad2f); box-shadow: 0 0 14px rgba(255, 207, 74, .28); }
.cooldown-badge { min-width: 92px; padding: 7px 10px; color: var(--muted); background: rgba(50,199,180,.06); border: 1px solid rgba(50,199,180,.18); border-radius: 10px; text-align: center; }
.cooldown-badge span, .cooldown-badge b { display: block; }
.cooldown-badge span { font-size: .62rem; }
.cooldown-badge b { margin-top: 2px; color: var(--teal); font-size: .73rem; font-variant-numeric: tabular-nums; }
.rarity-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 17px; padding: 12px; background: rgba(8, 28, 40, .66); border: 1px solid var(--line); border-radius: 14px; }
.rarity-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; color: var(--rarity-color); background: rgba(255,255,255,.025); border: 1px solid color-mix(in srgb, var(--rarity-color) 32%, transparent); border-radius: 20px; font-size: .7rem; font-weight: 800; }
.rarity-chip i { width: 7px; height: 7px; background: var(--rarity-color); border-radius: 50%; box-shadow: 0 0 8px var(--rarity-color); }
.access-badge { max-width: 185px; padding: 5px 8px; color: rgba(244,250,248,.84); background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; text-align: right; font-size: .65rem; }
.water-card { display: flex; flex-direction: column; }
.water-card > p { flex: 1; line-height: 1.65; }
.water-card-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.water-card-foot small { color: rgba(239,247,244,.55); font-size: .66rem; }
.water-card-foot button { flex-shrink: 0; }
.silver-water { border-color: rgba(255, 185, 96, .22); }
.special-water { min-height: 315px; border-color: rgba(195, 146, 255, .34); box-shadow: 0 24px 70px rgba(0,0,0,.36), inset 0 0 45px rgba(163, 112, 255, .06); }
.special-water::after { content: "✦"; position: absolute; right: 22px; top: 54px; color: rgba(255,255,255,.18); font-size: 2rem; text-shadow: -48px 35px rgba(255,255,255,.08), -92px -25px rgba(255,255,255,.09); }
.special-water .access-badge { color: #f4deff; border-color: rgba(218, 177, 255, .28); background: rgba(73, 25, 111, .24); }
.water-canvas[data-realm="special"] { box-shadow: inset 0 0 65px rgba(170, 106, 255, .14), 0 12px 35px rgba(0,0,0,.22); }

.rarity-text { color: var(--rarity-color); }
.prismatic.rarity-text,
.rarity-badge.prismatic,
.rarity-chip.prismatic { color: transparent !important; background-image: linear-gradient(90deg, #ff6484, #ffca55, #69e8c1, #65b9ff, #b983ff, #ff6484); background-size: 240% 100%; background-clip: text; -webkit-background-clip: text; animation: prismFlow 3.6s linear infinite; }
.rarity-badge.prismatic,
.rarity-chip.prismatic { border-color: rgba(255,255,255,.55); box-shadow: 0 0 15px rgba(141,196,255,.17); }
.rarity-chip.prismatic i,
.prob-row.prismatic .prob-bar i { background: linear-gradient(90deg, #ff6484, #ffca55, #69e8c1, #65b9ff, #b983ff); box-shadow: 0 0 10px #9fd7ff; }
.fish-card.prismatic { border-color: transparent; background: linear-gradient(150deg, rgba(16,49,66,.96), rgba(7,25,37,.98)) padding-box, linear-gradient(120deg, #ff6484, #ffca55, #69e8c1, #65b9ff, #b983ff, #ff6484) border-box; background-size: auto, 260% 260%; animation: prismBorder 4.4s linear infinite; box-shadow: 0 0 28px rgba(123, 198, 255, .14); }
.catch-card.prismatic { border-color: transparent; background: radial-gradient(circle at 50% 34%, rgba(143, 207, 255, .2), transparent 38%) padding-box, linear-gradient(150deg, #123a4c, #071c2a 75%) padding-box, conic-gradient(from 0deg, #ff6484, #ffca55, #69e8c1, #65b9ff, #b983ff, #ff6484) border-box; box-shadow: 0 30px 100px rgba(0,0,0,.65), 0 0 65px rgba(119,196,255,.26); }
.pond-swimmer.prismatic { filter: drop-shadow(0 0 9px #8fd5ff) drop-shadow(0 9px 8px rgba(0,0,0,.3)); }
@keyframes prismFlow { to { background-position: -240% 0; } }
@keyframes prismBorder { to { background-position: 0 0, -260% -260%; } }

/* 人物成长、锦鲤融合与鱼饵商店 */
.nav-item { min-width: 96px; padding-inline: 13px; }
.stamina-pill strong { color: #8ce8dc; }
.water-status { flex-wrap: wrap; align-items: flex-start; }
.water-status .bait-status { margin-left: auto; color: var(--muted); }
.water-status .bait-status.active { color: #ffe1a8; border-color: rgba(240,187,98,.34); box-shadow: 0 0 18px rgba(240,187,98,.1); }
.summary-item small { display: block; margin-top: 5px; color: var(--muted); font-size: .66rem; }
.koi-mark { display: inline-flex; margin-left: 7px; padding: 2px 6px; color: #ffd1ec; background: rgba(255,120,200,.12); border: 1px solid rgba(255,120,200,.28); border-radius: 9px; font-size: .58rem; font-style: normal; vertical-align: middle; }
.rod-path { grid-template-columns: repeat(20, minmax(94px, 1fr)); }
.backpack-layout, .profile-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.backpack-card, .koi-forge-card, .profile-card, .attributes-card { padding: 22px; }
.bait-list { display: grid; gap: 9px; margin-top: 17px; }
.bait-row { display: grid; grid-template-columns: 42px 1fr auto auto; align-items: center; gap: 10px; padding: 11px; background: rgba(255,255,255,.025); border: 1px solid color-mix(in srgb, var(--rarity-color) 24%, var(--line)); border-radius: 12px; }
.bait-icon { width: 40px; height: 40px; display: grid; place-items: center; background: rgba(255,255,255,.04); border-radius: 10px; font-size: 1.3rem; }
.bait-row strong, .bait-row small { display: block; }
.bait-row strong { font-size: .8rem; }
.bait-row small { margin-top: 3px; color: var(--muted); font-size: .67rem; }
.bait-count { color: var(--gold-2); font-size: .78rem; font-weight: 800; }
.bait-row button { min-height: 34px; padding-inline: 12px; font-size: .7rem; }
.koi-forge-card > p { margin: 14px 0; color: var(--muted); font-size: .78rem; line-height: 1.65; }
.blessing-seal { width: 38px; height: 38px; display: grid; place-items: center; color: #281928; background: linear-gradient(145deg,#ffd65a,#ff78c8); border-radius: 50%; font-weight: 900; }
.koi-chip-list { min-height: 116px; display: flex; align-content: flex-start; flex-wrap: wrap; gap: 7px; padding: 13px; background: rgba(0,0,0,.13); border: 1px solid var(--line); border-radius: 13px; }
.koi-chip-list span { height: 29px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; color: #ffd5ec; background: rgba(255,120,200,.08); border: 1px solid rgba(255,120,200,.2); border-radius: 14px; font-size: .68rem; }
.koi-chip-list small { color: var(--muted); }
.forge-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 8px; }
.forge-action span, #koi-forge > small { color: var(--muted); font-size: .7rem; }
.profile-identity { display: flex; align-items: center; gap: 15px; }
.profile-avatar { width: 72px; height: 72px; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%,#38697c,#102e40); border: 1px solid rgba(255,255,255,.13); border-radius: 22px; font-size: 2rem; box-shadow: 0 12px 28px rgba(0,0,0,.25); }
.profile-identity h2 { margin-bottom: 4px; font-family: "KaiTi",serif; font-size: 1.65rem; }
.profile-identity small { color: var(--gold-2); }
.cloud-account-box { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 20px 0; padding: 13px 14px; background: rgba(50,199,180,.055); border: 1px solid rgba(50,199,180,.17); border-radius: 12px; }
.cloud-account-box span, .cloud-account-box strong, .cloud-account-box small { display: block; }
.cloud-account-box span { color: var(--muted); font-size: .69rem; }
.cloud-account-box strong { margin: 3px 0; color: var(--gold-2); font-size: .94rem; }
.cloud-account-box small { color: var(--muted); font-size: .65rem; }
.xp-panel { padding: 15px; background: rgba(0,0,0,.14); border: 1px solid var(--line); border-radius: 13px; }
.xp-panel > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: .73rem; }
.xp-panel strong { color: var(--gold-2); font-variant-numeric: tabular-nums; }
.xp-bar { height: 10px; overflow: hidden; margin: 10px 0 8px; background: #061822; border-radius: 8px; }
.xp-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#32c7b4,#f0bb62); border-radius: inherit; box-shadow: 0 0 12px rgba(50,199,180,.28); transition: width .35s ease; }
.xp-panel small { color: var(--muted); font-size: .66rem; }
.level-cap, .shop-balance { padding: 9px 13px; color: var(--teal); background: rgba(50,199,180,.07); border: 1px solid rgba(50,199,180,.2); border-radius: 12px; font-size: .76rem; }
.shop-balance strong { margin-left: 5px; color: var(--gold-2); }
.attribute-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 18px 0; }
.attribute-grid > div { padding: 17px 13px; background: linear-gradient(145deg,rgba(50,199,180,.07),rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: 13px; }
.attribute-grid span, .attribute-grid strong, .attribute-grid small { display: block; }
.attribute-grid span { color: var(--muted); font-size: .7rem; }
.attribute-grid strong { margin: 5px 0; color: var(--gold-2); font-size: 1.25rem; }
.attribute-grid small { color: var(--muted); font-size: .62rem; }
.attributes-card .card-title-row > span { color: #ffafd9; font-size: .72rem; }
.blessing-summary { padding: 14px; color: var(--muted); background: rgba(255,120,200,.06); border: 1px solid rgba(255,120,200,.16); border-radius: 13px; font-size: .72rem; }
.blessing-summary strong { display: block; margin-top: 5px; color: #ffd0e9; }
.growth-guide { display: grid; grid-template-columns: auto repeat(3,1fr); align-items: center; gap: 18px; margin-top: 16px; padding: 20px 22px; }
.growth-guide h2 { white-space: nowrap; }
.growth-guide div { padding-left: 18px; border-left: 1px solid var(--line); }
.growth-guide span, .growth-guide strong { display: block; }
.growth-guide span { color: var(--muted); font-size: .68rem; }
.growth-guide strong { margin-top: 5px; font-size: .76rem; }
.shop-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.shop-card { position: relative; overflow: hidden; padding: 23px; border-color: color-mix(in srgb,var(--rarity-color) 38%,var(--line)); }
.shop-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -70px; top: -70px; background: var(--rarity-color); border-radius: 50%; opacity: .07; filter: blur(5px); }
.shop-rarity { display: flex; align-items: center; justify-content: space-between; }
.shop-rarity > span { font-size: 2.1rem; }
.shop-rarity b { color: var(--rarity-color); font-size: .72rem; }
.shop-card h2 { margin-top: 25px; font-family: "KaiTi",serif; font-size: 1.35rem; }
.shop-card > p { min-height: 40px; margin: 8px 0 16px; color: var(--muted); font-size: .78rem; }
.shop-duration { padding: 11px; color: var(--muted); background: rgba(0,0,0,.14); border: 1px solid var(--line); border-radius: 10px; font-size: .72rem; }
.shop-duration strong { float: right; color: var(--text); }
.shop-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.shop-foot small, .shop-foot strong { display: block; }
.shop-foot small { color: var(--muted); font-size: .65rem; }
.shop-foot strong { margin-top: 3px; color: var(--gold-2); }
.owned-bait { display: block; margin-top: 12px; color: var(--muted); font-size: .66rem; }
.catch-stats { grid-template-columns: repeat(3,1fr); }
.beast-forge-card { grid-column: 1 / -1; padding: 22px; }
.beast-forge-card > p { margin: 14px 0; color: var(--muted); font-size: .78rem; line-height: 1.65; }
.beast-seal { width: 46px; height: 38px; display: grid; place-items: center; color: #2c2104; background: linear-gradient(145deg,#fff0a1,#e4a52f); border-radius: 20px; font-size: .72rem; font-weight: 900; }
.beast-chip-list span { color: #ffe5a6; background: rgba(255,214,90,.08); border-color: rgba(255,214,90,.22); }
.beast-mark, .hidden-mark { display: inline-flex; margin-left: 7px; padding: 2px 6px; border-radius: 9px; font-size: .58rem; font-style: normal; vertical-align: middle; }
.beast-mark { color: #ffe295; background: rgba(255,214,90,.1); border: 1px solid rgba(255,214,90,.3); }
.hidden-mark { color: #dff7ff; background: rgba(194,237,255,.1); border: 1px solid rgba(194,237,255,.34); box-shadow: 0 0 12px rgba(194,237,255,.14); }
.fish-card.hidden-catch { box-shadow: 0 0 32px rgba(190,235,255,.22), inset 0 0 24px rgba(220,247,255,.05); }
.fish-card.hidden-catch .fish-emoji { text-shadow: 0 0 16px #dff7ff; animation: snowPulse 2.4s ease-in-out infinite; }
.water-specials .beast-special { color: #ffe19a; border-color: rgba(255,214,90,.22); }
.water-specials .snow-special { color: #d9f4ff; border-color: rgba(194,237,255,.24); }
@keyframes snowPulse { 50% { transform: scale(1.08) rotate(8deg); filter: brightness(1.2); } }

/* 隐藏游戏管理后台 */
.admin-modal { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: 20px; }
.admin-modal.open { display: grid; }
.admin-card { position: relative; z-index: 1; width: min(860px,100%); max-height: min(88vh,900px); overflow-y: auto; padding: 28px; background: radial-gradient(circle at 90% 0,rgba(240,187,98,.11),transparent 30%),linear-gradient(150deg,#123a4c,#071c2a 75%); border: 1px solid rgba(240,187,98,.3); border-radius: 23px; box-shadow: 0 30px 100px rgba(0,0,0,.7); }
.admin-view[hidden] { display: none; }
.admin-view > p:not(.eyebrow), .admin-note { margin: 9px 0 18px; color: var(--muted); font-size: .8rem; }
.admin-login-form { display: grid; gap: 10px; margin-top: 22px; }
.admin-login-form label, .admin-field-grid label { color: var(--muted); font-size: .72rem; }
.admin-login-form input, .admin-field-grid input { width: 100%; height: 43px; margin-top: 7px; padding: 0 12px; color: var(--text); background: rgba(0,0,0,.2); border: 1px solid var(--line); border-radius: 10px; outline: 0; }
.admin-login-form input:focus, .admin-field-grid input:focus { border-color: rgba(240,187,98,.55); box-shadow: 0 0 0 3px rgba(240,187,98,.08); }
#admin-login-error { min-height: 18px; color: var(--danger); font-size: .72rem; }
.admin-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.admin-badge { padding: 7px 10px; color: #1f1706; background: linear-gradient(135deg,var(--gold-2),#ce8c3c); border-radius: 9px; font-size: .66rem; font-weight: 900; letter-spacing: .12em; }
.admin-player-picker { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 13px; padding: 13px 14px; color: var(--muted); background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 13px; font-size: .74rem; }
.admin-player-picker select { width: 100%; height: 42px; padding: 0 11px; color: var(--text); background: #0a2635; border: 1px solid rgba(240,187,98,.24); border-radius: 9px; outline: 0; }
.admin-currency-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.admin-currency-grid article { padding: 15px; background: rgba(240,187,98,.055); border: 1px solid rgba(240,187,98,.16); border-radius: 13px; }
.admin-currency-grid span, .admin-currency-grid strong { display: block; }
.admin-currency-grid span { color: var(--muted); font-size: .7rem; }
.admin-currency-grid strong { margin: 4px 0 11px; color: var(--gold-2); font-size: 1.2rem; }
.admin-currency-grid article div { display: flex; gap: 7px; }
.admin-currency-grid button { min-height: 32px; padding: 0 10px; color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: .68rem; }
.admin-field-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.admin-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0; padding: 14px; background: rgba(50,199,180,.055); border: 1px solid rgba(50,199,180,.17); border-radius: 13px; cursor: pointer; }
.admin-toggle span strong, .admin-toggle span small { display: block; }
.admin-toggle span strong { font-size: .82rem; }
.admin-toggle span small { margin-top: 4px; color: var(--muted); font-size: .68rem; }
.admin-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.admin-toggle i { position: relative; width: 45px; height: 25px; flex: 0 0 auto; background: #183643; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; }
.admin-toggle i::after { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; background: #819ba2; border-radius: 50%; transition: .2s ease; }
.admin-toggle input:checked + i { background: rgba(50,199,180,.3); border-color: rgba(82,231,211,.5); }
.admin-toggle input:checked + i::after { left: 23px; background: #76e3d4; box-shadow: 0 0 12px rgba(118,227,212,.45); }
.admin-toggle input:focus-visible + i { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.admin-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.danger-btn { width: 100%; min-height: 40px; margin-top: 14px; color: #ffc4bf; background: rgba(238,123,114,.08); border: 1px solid rgba(238,123,114,.28); border-radius: 10px; cursor: pointer; font-size: .74rem; font-weight: 800; }
.admin-catalog-manager { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(240,187,98,.2); }
.admin-catalog-pickers, .admin-catalog-fields { display: grid; gap: 12px; }
.admin-catalog-pickers { grid-template-columns: .8fr 1.2fr; }
.admin-catalog-fields { grid-template-columns: 1.2fr 1fr .65fr; margin-top: 12px; }
.admin-catalog-pickers label, .admin-catalog-fields label { color: var(--muted); font-size: .72rem; }
.admin-catalog-pickers select, .admin-catalog-fields select, .admin-catalog-fields input { width: 100%; height: 43px; margin-top: 7px; padding: 0 12px; color: var(--text); background: #0a2635; border: 1px solid var(--line); border-radius: 10px; outline: 0; }
.admin-catalog-pickers select:focus, .admin-catalog-fields select:focus, .admin-catalog-fields input:focus { border-color: rgba(240,187,98,.55); box-shadow: 0 0 0 3px rgba(240,187,98,.08); }
.catalog-toggle { margin-bottom: 12px; }
.admin-new-fish { margin-bottom: 10px; }
.admin-fish-status { display: block; min-height: 18px; margin-top: 10px; color: var(--teal); font-size: .7rem; }

@media (max-width: 1050px) {
  .cloud-status { display: none; }
  .fishing-layout, .gear-layout, .ranking-layout, .profile-layout { grid-template-columns: 1fr; }
  .side-stack { display: grid; grid-template-columns: 1fr 1fr; }
  .water-canvas { min-height: 440px; }
  .fish-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
  .app-shell { padding: env(safe-area-inset-top) 14px calc(92px + env(safe-area-inset-bottom)); }
  .topbar { height: 74px; }
  .top-stats .stat-pill.compact { display: none; }
  .stat-pill { min-width: 132px; }
  .game-nav { position: fixed; z-index: 20; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); height: 68px; justify-content: space-around; padding: 6px; background: rgba(7,25,37,.96); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 15px 50px rgba(0,0,0,.5); backdrop-filter: blur(13px); }
  .nav-item { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; font-size: .66rem; }
  .nav-item span { margin: 0; }
  .nav-item b { right: 12%; }
  .fishing-layout { padding-top: 9px; }
  .lake-card { padding: 14px; }
  .lake-heading h1 { font-size: 1.75rem; }
  .water-canvas { min-height: 430px; }
  .side-stack { grid-template-columns: 1fr; }
  .rod-mini { display: none; }
  .cooldown-card { grid-template-columns: 1fr auto; }
  .cooldown-progress { grid-column: 1 / -1; grid-row: 2; }
  .fish-grid, .compact-grid, .water-grid, .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .gear-stats, .summary-strip { grid-template-columns: 1fr; }
  .backpack-layout { grid-template-columns: 1fr; }
  .growth-guide { grid-template-columns: 1fr; }
  .growth-guide div { padding: 12px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .section-heading { align-items: flex-end; }
  .special-water { min-height: 280px; }
}
@media (max-width: 520px) {
  .cloud-login-screen { padding: 12px; }
  .cloud-login-card { padding: 27px 20px; }
  .cloud-account-box { align-items: stretch; flex-direction: column; }
  .brand small { display: none; }
  .brand strong { font-size: 1.08rem; }
  .brand-mark { width: 39px; height: 39px; }
  .stat-pill { min-width: 118px; height: 42px; padding: 0 11px; }
  .water-canvas { min-height: 390px; }
  .water-status { flex-direction: column; right: auto; align-items: flex-start; }
  .water-nameplate { flex-direction: column; }
  .fish-grid, .compact-grid, .water-grid, .shop-grid { grid-template-columns: 1fr; }
  .fish-card { display: grid; grid-template-columns: 62px 1fr; column-gap: 12px; }
  .fish-card-top { grid-row: 1 / span 3; }
  .fish-card h3 { margin-top: 2px; }
  .fish-meta, .fish-actions { grid-column: 1 / -1; }
  .gear-visual { align-items: flex-start; flex-direction: column; }
  .upgrade-box { align-items: stretch; flex-direction: column; }
  .podium { min-height: 360px; padding-inline: 8px; }
  .podium-avatar { width: 52px; height: 52px; }
  .rank-row { grid-template-columns: 28px 36px 1fr auto; gap: 7px; }
  .catch-card { padding: 24px 17px; }
  .cooldown-badge { min-width: 82px; }
  .attribute-grid { grid-template-columns: 1fr; }
  .bait-row { grid-template-columns: 38px 1fr auto; }
  .bait-row button { grid-column: 1 / -1; }
  .catch-stats { grid-template-columns: repeat(3,1fr); gap: 6px; }
  .catch-stats div { padding-inline: 6px; }
  .admin-card { padding: 23px 15px; }
  .admin-field-grid { grid-template-columns: repeat(2,1fr); }
  .admin-currency-grid, .admin-actions { grid-template-columns: 1fr; }
  .admin-player-picker { grid-template-columns: 1fr; }
  .admin-catalog-pickers, .admin-catalog-fields { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .top-stats { gap: 4px; }
  .top-stats .stat-pill { min-width: 70px; grid-template-columns: auto auto; padding: 0 7px; }
  .top-stats .stat-pill > span { display: none; }
  .brand { gap: 7px; }
  .brand strong { font-size: .98rem; }
}

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