:root {
    --bg: #0d1720;
    --panel: #162331;
    --panel-2: #1f3343;
    --line: #315067;
    --text: #f5fbff;
    --muted: #9db4c5;
    --water: #1e8bb2;
    --water-dark: #0e5578;
    --accent: #7dd3fc;
    --gold: #facc15;
    --good: #34d399;
    --bad: #fb7185;
    --uncommon: #22c55e;
    --rare: #38bdf8;
    --epic: #c084fc;
    --legendary: #facc15;
    --mythical: #ff3b3b;
    --eternal: #f97316;
    --tokens: #c084fc;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #071017;
    overscroll-behavior: none;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top, #1d4f63 0, transparent 420px),
        linear-gradient(145deg, #071017, var(--bg));
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    overscroll-behavior: none;
}

body.fish-room-active {
    overflow-x: hidden;
}

button,
input,
select {
    font: inherit;
}

button {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 0 12px;
    background: var(--panel-2);
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
}

button:hover {
    border-color: var(--accent);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

input,
select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 0 10px;
    background: #0b141c;
    color: var(--text);
}

label {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 800;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

.hub-back-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin: 14px 0 0 16px;
    padding: 0 12px;
    border: 1px solid rgba(125, 211, 252, 0.45);
    border-radius: 999px;
    background: rgba(7, 16, 23, 0.8);
    color: var(--accent);
    text-decoration: none;
    font-weight: 800;
}

.lobby {
    width: min(1100px, calc(100% - 36px));
    margin: 0 auto;
    padding: 34px 0 70px;
}

.title-block h1 {
    margin-bottom: 8px;
    font-size: clamp(2.4rem, 8vw, 5rem);
    letter-spacing: 0;
}

.title-block p {
    max-width: 720px;
    color: var(--muted);
    font-size: 1.05rem;
}

.lobby-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.signed-in-account {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid rgba(74, 222, 128, 0.4);
    background: rgba(20, 83, 45, 0.18);
}

.signed-in-account[hidden],
#accountForm[hidden] {
    display: none;
}

.signed-in-account span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.signed-in-account strong {
    color: #86efac;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.signed-in-account button {
    justify-self: start;
    border-color: rgba(251, 113, 133, 0.5);
    color: #fecdd3;
}

.panel,
.sidebar,
.pond-toolbar,
.minigame {
    border: 1px solid var(--line);
    background: rgba(22, 35, 49, 0.93);
}

.panel,
.sidebar {
    padding: 16px;
}

.button-row,
.chat-controls,
.section-header {
    display: flex;
    gap: 8px;
}

.pond-log-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pond-log-heading h2 {
    margin: 0;
}

.pond-log-heading label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
    white-space: nowrap;
}

.pond-log-heading input {
    width: 15px;
    height: 15px;
    margin: 0;
}

.button-row button,
.chat-controls input {
    flex: 1;
}

.hint,
.muted {
    color: var(--muted);
    font-size: 0.86rem;
}

.collapsed {
    display: none !important;
}

.room-list,
.players-list,
.shop-list,
.inventory-list {
    display: grid;
    gap: 10px;
}

.room-card {
    display: grid;
    gap: 4px;
    width: 100%;
    min-height: 58px;
    text-align: left;
}

.game {
    display: grid;
    grid-template-columns: minmax(252px, 1fr) 865px minmax(275px, 1fr);
    gap: 14px;
    align-items: start;
    width: 100%;
    min-width: 1448px;
    padding: 14px;
}

.mobile-game-nav {
    display: none;
}

.sidebar {
    position: sticky;
    top: 14px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: calc(100vh - 28px);
    overflow: auto;
}

.stat-card h2 {
    margin-bottom: 4px;
    color: var(--accent);
}

.sidebar-settings-button {
    width: 100%;
    min-height: 38px;
    border-color: rgba(125, 211, 252, 0.42);
    background: rgba(125, 211, 252, 0.08);
}

.sidebar-section-title {
    margin: 0 0 -10px;
    font-size: 1.05rem;
}

.gear-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar-brand h1 {
    margin: 0;
    color: #ffffff;
    font-size: 2rem;
    line-height: 1;
}

.sidebar-brand p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid rgba(250, 204, 21, 0.45);
    border-radius: 7px;
    background: rgba(250, 204, 21, 0.08);
}

.wallet strong {
    color: var(--gold);
    font-size: 1.6rem;
}

.gear-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.gear-summary div {
    position: relative;
    display: grid;
    gap: 4px;
    min-height: 78px;
    place-items: center;
    overflow: hidden;
    border-radius: 7px;
}

.gear-summary div::before {
    content: "";
    width: 32px;
    height: 26px;
    border: 1px solid rgba(125,211,252,0.35);
    border-radius: 7px;
    background:
        radial-gradient(circle at 70% 35%, rgba(250,204,21,0.38), transparent 9px),
        linear-gradient(135deg, rgba(125,211,252,0.22), rgba(15,27,37,0.98));
}

.gear-summary div:nth-child(1)::before {
    background:
        linear-gradient(110deg, transparent 42%, #a16207 43% 55%, transparent 56%),
        radial-gradient(circle at 50% 70%, rgba(125,211,252,0.3), transparent 12px),
        #0f1b25;
}

.gear-summary div:nth-child(2)::before {
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 0 8px, #d6dee5 9px 12px, transparent 13px),
        #0f1b25;
}

.gear-summary div:nth-child(3)::before {
    background:
        repeating-linear-gradient(90deg, #e0f2fe 0 2px, transparent 3px 8px),
        #0f1b25;
}

.leaderboard-picker {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.leaderboard-picker label {
    width: min(320px, 100%);
}

.leaderboard-single {
    padding: 12px;
    border: 1px solid var(--line);
    background:
        linear-gradient(135deg, rgba(125, 211, 252, 0.08), rgba(250, 204, 21, 0.05)),
        #0f1b25;
}

.leaderboard-single h3 {
    margin-bottom: 12px;
    color: var(--accent);
    font-size: 1.3rem;
}

.leaderboard-single ol {
    display: grid;
    gap: 5px;
    margin: 0;
    padding-left: 22px;
}

.leaderboard-single li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(49, 80, 103, 0.45);
    color: var(--muted);
    font-size: 1.08rem;
}

.leaderboard-single li > span {
    color: var(--text);
    font-size: 1.16rem;
    font-weight: 800;
}

.leaderboard-single li b {
    color: var(--text);
    font-size: 1.28rem;
}

.leaderboard-single small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.gear-summary div {
    padding: 10px;
    border: 1px solid var(--line);
    text-align: center;
    background: #0f1b25;
}

.player-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    padding: 6px 7px;
    border: 1px solid var(--line);
    background: #0f1b25;
}

.player-row > span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.player-row div {
    display: grid;
}

.player-row small {
    color: var(--muted);
    font-size: 0.7rem;
}

.pond-column {
    display: grid;
    gap: 12px;
}

.center-view-host,
.fishing-area-view {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.center-primary-view[hidden] {
    display: none !important;
}

.center-view-panel {
    width: 100%;
    max-height: 720px;
    min-height: 520px;
    margin: 0;
    overflow: auto;
    box-shadow: none;
}

.center-view-panel > .book-header [data-close-modal] {
    display: none;
}

.pond-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
}

.pond-toolbar h1 {
    margin-bottom: 4px;
}

.pond-toolbar p {
    margin: 0;
    color: var(--muted);
}

.pond-menu-bar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 0 2px;
}

.fishers-heading {
    display: flex;
    align-items: center;
    gap: 6px;
}

.achievements-modal {
    width: min(1280px, 100%);
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 1100px) {
    .achievements-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.achievement-card {
    position: relative;
    display: grid;
    align-content: start;
    min-height: 190px;
    overflow: hidden;
    padding: 13px;
    border: 1px solid rgba(74, 222, 128, 0.65);
    border-radius: 6px;
    background: #0f1b25;
    box-shadow: inset 0 0 24px rgba(74, 222, 128, 0.06);
}

.achievement-card.locked {
    border-color: #52616c;
    color: #9ca9b3;
    background: #111a21;
    filter: saturate(0.35);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.25);
}

.achievement-card.new-achievement {
    border-color: rgba(250, 204, 21, 0.62);
    box-shadow:
        inset 0 0 0 1px rgba(250, 204, 21, 0.16),
        0 0 9px rgba(250, 204, 21, 0.1);
}

.achievement-card.new-achievement::after {
    content: "";
    position: absolute;
    left: 7px;
    bottom: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #facc15;
    box-shadow: 0 0 6px rgba(250, 204, 21, 0.72);
}

.achievement-number {
    position: relative;
    z-index: 2;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 900;
}

.achievement-card h3,
.achievement-card p,
.achievement-card .achievement-reward,
.achievement-card button,
.achievement-claimed {
    position: relative;
    z-index: 2;
}

.achievement-card h3 {
    margin: 8px 0 4px;
    font-size: 1rem;
}

.achievement-card p {
    min-height: 42px;
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 0.86rem;
}

.achievement-trophy {
    position: absolute;
    right: 17px;
    bottom: 28px;
    width: 58px;
    height: 52px;
    border: 8px solid currentColor;
    border-top: 0;
    border-radius: 0 0 24px 24px;
    color: rgba(250, 204, 21, 0.08);
    transform: rotate(-8deg);
}

.achievement-trophy::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 42px;
    width: 9px;
    height: 22px;
    background: currentColor;
    box-shadow: -12px 22px 0 5px currentColor;
}

.achievement-trophy::after {
    content: "";
    position: absolute;
    inset: 7px -20px auto;
    height: 24px;
    border: 6px solid currentColor;
    border-radius: 0 0 18px 18px;
}

.achievement-reward {
    display: block;
    margin-top: auto;
    font-size: 0.76rem;
    font-weight: 900;
}

.reward-coins {
    color: var(--gold);
}

.reward-feature {
    color: #d8b4fe;
    text-shadow: 0 0 8px rgba(192, 132, 252, 0.72);
}

.achievement-luck-note {
    display: block;
    margin-top: 3px;
    font-size: 0.66rem;
    font-weight: 700;
    color: #7dd3fc;
    opacity: 0.85;
}

.achievement-card button {
    justify-self: start;
    min-height: 30px;
    margin-top: 9px;
    padding: 4px 12px;
}

.achievement-claimed {
    margin-top: 9px;
    color: #86efac;
    font-size: 0.72rem;
    font-weight: 900;
}

.achievement-notice {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: 10px;
    padding: 9px 12px;
    border: 1px solid rgba(251, 113, 133, 0.5);
    background: #321720;
    color: #fecdd3;
    font-weight: 800;
}

.achievement-notice.good {
    border-color: rgba(74, 222, 128, 0.5);
    background: #112b20;
    color: #bbf7d0;
}

.achievement-toast {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 100;
    display: grid;
    min-width: min(380px, calc(100vw - 28px));
    padding: 11px 16px;
    border: 1px solid rgba(74, 222, 128, 0.72);
    border-radius: 6px;
    background: #0b1814;
    color: #dcfce7;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
    opacity: 0;
    transform: translate(-50%, -14px);
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
}

.achievement-toast[hidden] {
    display: none;
}

.achievement-toast.show {
    pointer-events: auto;
}

.achievement-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.achievement-toast span {
    color: #a7f3d0;
    font-size: 0.78rem;
}

.pets-placeholder {
    min-height: 180px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--line);
    color: var(--muted);
}

.pond-menu-bar button {
    position: relative;
    min-height: 48px;
    border-color: rgba(125, 211, 252, 0.3);
    background: rgba(15, 27, 37, 0.92);
    font-size: 1.02rem;
}

.pond-menu-bar #achievementsButton.has-new-achievements::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #facc15;
    box-shadow: 0 0 7px rgba(250, 204, 21, 0.72);
    transform: translateY(-50%);
}

.pond-menu-bar #catalogButton.has-new-catalog::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-radius: 50%;
    background: #facc15;
    box-shadow: 0 0 7px rgba(250, 204, 21, 0.72);
    vertical-align: 1px;
}

.phone-call-panel {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) repeat(2, minmax(120px, 0.65fr)) minmax(160px, 0.8fr);
    gap: 10px;
    align-items: stretch;
    padding: 12px;
    border: 1px solid rgba(125, 211, 252, 0.54);
    border-radius: 7px;
    background: #102631;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.phone-call-panel[hidden] {
    display: none;
}

.phone-call-panel > div {
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 4px 8px;
}

.phone-call-panel > div span {
    color: #7dd3fc;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.phone-call-panel > div strong {
    overflow-wrap: anywhere;
    font-size: 1.05rem;
}

.phone-call-panel > div small {
    color: var(--muted);
    font-size: 0.72rem;
}

.phone-call-panel #phoneCallTimer {
    color: #e0f2fe;
    font-size: 0.94rem;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
}

.phone-call-panel button {
    min-height: 54px;
    font-size: 0.92rem;
    font-weight: 900;
}

#pickUpCallButton {
    border-color: rgba(74, 222, 128, 0.68);
    background: #175635;
    color: #dcfce7;
}

#hangUpCallButton {
    border-color: rgba(251, 113, 133, 0.68);
    background: #5e1d2b;
    color: #ffe4e6;
}

#ignoreAllCallsButton {
    border-color: rgba(148, 163, 184, 0.52);
    background: #283541;
    color: #e2e8f0;
}

.select-hint {
    display: block;
    min-height: 1.15em;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.25;
}

.audio-settings {
    display: grid;
    gap: 7px;
}

.audio-control {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    font-size: 0.74rem;
}

.audio-control-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 5px;
    align-items: center;
}

.audio-control-row input[type="range"] {
    appearance: none;
    width: 100%;
    min-width: 0;
    height: 16px;
    margin: 0;
    padding: 0;
    background: transparent;
}

.audio-control-row input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: #315067;
}

.audio-control-row input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: 2px solid #dff6ff;
    border-radius: 50%;
    background: var(--accent);
}

.audio-control-row input[type="range"]::-moz-range-track {
    height: 4px;
    border: 0;
    border-radius: 2px;
    background: #315067;
}

.audio-control-row input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: 2px solid #dff6ff;
    border-radius: 50%;
    background: var(--accent);
}

.audio-control-row button {
    min-height: 28px;
    padding: 0 5px;
    font-size: 0.68rem;
}

.audio-control-row button.muted {
    border-color: rgba(251, 113, 133, 0.55);
    color: #fecdd3;
    background: rgba(251, 113, 133, 0.12);
}

.settings-modal {
    width: min(620px, 100%);
}

.settings-group {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    background: rgba(7, 16, 23, 0.42);
}

.settings-group + .settings-group {
    margin-top: 12px;
}

.settings-group h3 {
    margin: 0;
    color: #dff6ff;
    font-size: 0.9rem;
}

.settings-modal .audio-settings {
    gap: 12px;
}

.settings-modal .audio-control {
    grid-template-columns: 76px minmax(0, 1fr);
    font-size: 0.82rem;
}

.settings-modal .audio-control-row {
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 10px;
}

.player-color-setting {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.color-swatches {
    display: grid;
    grid-template-columns: repeat(8, 32px);
    justify-content: end;
    gap: 7px;
}

.color-swatch {
    position: relative;
    width: 32px;
    min-height: 32px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: var(--swatch-color);
    box-shadow:
        inset 0 0 0 3px rgba(7, 16, 23, 0.28),
        0 2px 6px rgba(0, 0, 0, 0.3);
}

.color-swatch:hover {
    border-color: #ffffff;
    transform: translateY(-1px);
}

.color-swatch.selected {
    border-color: #ffffff;
    box-shadow:
        inset 0 0 0 3px rgba(7, 16, 23, 0.2),
        0 0 0 3px rgba(56, 189, 248, 0.5),
        0 3px 9px rgba(0, 0, 0, 0.38);
}

.color-swatch.selected::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(45deg) translate(-2px, -2px);
}

.color-swatch:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.settings-checkbox {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(125, 211, 252, 0.2);
    background: rgba(125, 211, 252, 0.05);
    cursor: pointer;
}

.settings-checkbox input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #38bdf8;
}

.settings-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.reward-reveal-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.settings-checkbox.locked {
    cursor: not-allowed;
    opacity: 0.5;
}

.economy-modal {
    width: min(720px, 100%);
}

.economy-preview {
    display: flex;
    min-height: 130px;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    background: rgba(7, 16, 23, 0.5);
}

.economy-preview > div:last-child {
    display: grid;
    flex: 1;
    gap: 6px;
}

.reforge-locks {
    margin: 0 0 14px;
    padding: 10px;
    border: 1px solid var(--line);
}

.reforge-locks legend {
    padding: 0 6px;
    color: var(--muted);
    font-weight: 800;
}

#reforgeLockedBuffs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#reforgeLockedBuffs label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(125, 211, 252, 0.18);
    background: rgba(125, 211, 252, 0.05);
    cursor: pointer;
}

#reforgeLockedBuffs input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #facc15;
}

#reforgeLockedBuffs label:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.5;
}

.economy-preview .equipment-icon {
    width: 74px;
    height: 74px;
    flex: 0 0 74px;
    font-size: 2rem;
}

.economy-preview .pet-icon {
    flex: 0 0 auto;
    transform: scale(1.15);
}

.training-buff-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.training-buff-comparison > span {
    display: grid;
    align-content: start;
    gap: 5px;
    padding: 9px;
    border: 1px solid rgba(125, 211, 252, 0.18);
    background: rgba(125, 211, 252, 0.05);
}

.training-session-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.training-session-grid button {
    display: grid;
    min-height: 58px;
    place-content: center;
    gap: 3px;
}

.training-session-grid button span {
    color: var(--gold);
    font-size: 0.78rem;
}

.training-session-grid button small {
    color: var(--muted);
    font-size: 0.7rem;
}

.pet-level-progress {
    display: grid;
    gap: 4px;
    width: 100%;
    margin: 3px 0;
}

.pet-level-progress > small {
    color: var(--muted);
    font-size: 0.7rem;
}

.pet-rename-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.reward-opening-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0 18px 16px;
}

.reward-opening-actions #rewardTrashButton {
    border-color: rgba(251, 113, 133, 0.55);
    color: #fecdd3;
    background: rgba(127, 29, 50, 0.54);
}

.reward-opening-actions #rewardTrashButton.confirm-trash {
    border-color: #fb7185;
    background: #7f1d32;
    box-shadow: 0 0 14px rgba(251, 113, 133, 0.25);
}

.reward-opening-actions .reward-take-button {
    min-width: 132px;
    border-color: rgba(74, 222, 128, 0.72);
    color: #ecfdf5;
    background: #15803d;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.18);
}

.reward-opening-actions .reward-take-button:hover:not(:disabled) {
    background: #16a34a;
}

.gear-select-wrap {
    position: relative;
    display: block;
}

.gear-select-wrap::after {
    content: "\25BC";
    position: absolute;
    right: 12px;
    top: 50%;
    color: var(--muted);
    font-size: 0.68rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.gear-select-wrap select {
    padding-right: 34px;
    color: transparent;
}

.gear-select-wrap option {
    color: #e8f2f7;
    background: #10202b;
}

.gear-selected-label {
    position: absolute;
    left: 12px;
    right: 34px;
    top: 50%;
    overflow: hidden;
    color: #e8f2f7;
    font-weight: 700;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateY(-50%);
}

.bait-control {
    margin-bottom: 0;
}

.bait-control .gear-select-wrap select {
    border-radius: 7px 7px 0 0;
}

.quick-buy-bait {
    width: 100%;
    min-height: 32px;
    margin: 0 0 12px;
    border-top: 0;
    border-color: #29404e;
    border-radius: 0 0 7px 7px;
    background: #121f28;
    color: #b8cbd5;
    font-size: 0.78rem;
    font-weight: 800;
}

.quick-buy-bait:hover:not(:disabled) {
    border-color: #3d5d70;
    background: #182b36;
    color: #d8e6ed;
}

.streak-display {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--line);
    background: rgba(7, 16, 23, 0.72);
}

.streak-display span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.streak-display span small {
    display: block;
    margin-top: 2px;
    color: #fde68a;
    font-size: 0.68rem;
    line-height: 1.2;
    text-transform: none;
}

.streak-display span small + small {
    color: var(--muted);
    font-size: 0.64rem;
}

.streak-display strong {
    display: grid;
    place-items: center;
    width: 38px;
    height: 34px;
    border: 1px solid rgba(250, 204, 21, 0.36);
    background: #17212a;
    color: #fde68a;
    font-size: 1.12rem;
}

.streak-display.active {
    border-color: rgba(250, 204, 21, 0.52);
    box-shadow: 0 0 18px rgba(250, 204, 21, 0.12);
}

.cast-button {
    position: relative;
    display: grid;
    place-items: center;
    width: min(440px, 100%);
    min-height: 72px;
    margin: -2px auto 0;
    border-color: rgba(125, 211, 252, 0.7);
    background:
        radial-gradient(circle at 50% 0, rgba(250,204,21,0.24), transparent 38px),
        linear-gradient(135deg, #173142, #0f1b25);
    color: #fef3c7;
    font-size: 1.24rem;
    box-shadow: 0 12px 26px rgba(0,0,0,0.24);
}

.cast-button-label {
    pointer-events: none;
}

.cast-button[data-cast-state="idle"] {
    border-color: rgba(74, 222, 128, 0.72);
    background: linear-gradient(135deg, #17603d, #123325);
    color: #dcfce7;
}

.cast-button[data-cast-state="waiting"] {
    border-color: rgba(251, 113, 133, 0.76);
    background: linear-gradient(135deg, #7f1d32, #3c1720);
    color: #ffe4e6;
}

.cast-button[data-cast-state="bite"] {
    border-color: rgba(96, 165, 250, 0.82);
    background: linear-gradient(135deg, #1d4f91, #172f53);
    color: #dbeafe;
}

.cast-button[data-cast-state="clutch"] {
    border-color: rgba(250, 204, 21, 0.9);
    background: linear-gradient(135deg, #b45309, #78350f);
    color: #fef9c3;
    animation: clutch-pulse 0.9s ease-in-out infinite;
}

@keyframes clutch-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.55);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(250, 204, 21, 0);
    }
}

.zone-bar {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--line);
    border-bottom: none;
    background: #10222d;
}

.zone-label-wrap {
    display: grid;
    flex: 1;
    align-content: center;
    justify-items: center;
    gap: 1px;
    padding: 8px 6px;
    text-align: center;
}

.zone-name {
    font-size: 1.02rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #f8fafc;
}

.zone-progress {
    color: var(--muted);
    font-size: 0.72rem;
}

.zone-arrow {
    position: relative;
    width: 48px;
    min-height: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
}

.zone-arrow:first-child {
    border-right: 1px solid var(--line);
}

.zone-arrow:last-child {
    border-left: 1px solid var(--line);
}

.zone-arrow:hover:not(.zone-arrow-locked) {
    background: rgba(125, 211, 252, 0.14);
}

.zone-arrow-locked {
    cursor: not-allowed;
    color: rgba(226, 232, 240, 0.4);
}

.zone-arrow-locked::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 220px;
    padding: 6px 10px;
    border: 1px solid rgba(125, 211, 252, 0.54);
    border-radius: 6px;
    background: #0b1a22;
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 20;
}

.zone-arrow-locked:hover::after,
.zone-arrow-locked:focus-visible::after {
    opacity: 1;
}

.pond-scene {
    position: relative;
    min-height: 480px;
    aspect-ratio: 14 / 5;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #10222d;
    contain: layout paint;
    margin-top: -12px;
}

.zone-image-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: repeating-linear-gradient(135deg, #142a35, #142a35 18px, #10222d 18px, #10222d 36px);
    color: var(--muted);
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.zone-image-placeholder[hidden] {
    display: none;
}

.pond-backgrounds,
.pond-background {
    position: absolute;
    inset: 0;
}

.pond-backgrounds {
    z-index: 0;
    pointer-events: none;
}

.pond-background {
    opacity: 0;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    will-change: opacity;
}

.pond-scene.day-cycle-ready .pond-background {
    transition: opacity 10s linear;
}

.pond-background.active {
    opacity: 1;
}

.pond-background-morning {
    background-image: url("assets/backgrounds/beach-morning.png");
}

.pond-background-day {
    background-image: url("assets/backgrounds/beach-day.png");
}

.pond-background-evening {
    background-image: url("assets/backgrounds/beach-evening.png");
}

.pond-background-night {
    background-image: url("assets/backgrounds/beach-night.png");
}

.pond-clock {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 14;
    min-width: 92px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 6px;
    background: rgba(7, 16, 23, 0.72);
    color: #f8fafc;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    text-align: center;
    pointer-events: none;
}

.pond-streak-display {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 14;
    display: grid;
    gap: 1px;
    min-width: 92px;
    padding: 7px 10px;
    border: 1px solid rgba(250, 204, 21, 0.42);
    border-radius: 6px;
    background: rgba(7, 16, 23, 0.72);
    color: #f8fafc;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24);
    text-align: center;
}

.pond-streak-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
}

.pond-streak-label {
    color: var(--muted);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pond-streak-display strong {
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
    font-weight: 900;
    color: #facc15;
}

.pond-streak-display small {
    font-variant-numeric: tabular-nums;
    font-size: 0.68rem;
    font-weight: 800;
    color: #86efac;
}

.boss-announcement {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 16;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid rgba(248, 113, 113, 0.65);
    border-radius: 6px;
    background: rgba(7, 16, 23, 0.82);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.35);
    transform: translateX(-50%);
    text-align: center;
}

.boss-announcement[hidden] {
    display: none;
}

.boss-announcement-text {
    color: #f87171;
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.55);
    animation: boss-announcement-pulse 900ms ease-in-out infinite alternate;
}

.boss-announcement-timer {
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    font-weight: 800;
    color: #fca5a5;
    text-align: center;
}

@keyframes boss-announcement-pulse {
    from { filter: brightness(0.92); }
    to { filter: brightness(1.3); }
}

.boss-join-button {
    padding: 4px 14px;
    border: 1px solid rgba(248, 113, 113, 0.7);
    border-radius: 999px;
    background: #7f1d1d;
    color: #fee2e2;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
}

.boss-join-button:disabled {
    opacity: 0.6;
    cursor: default;
}

.boss-arrived-popup {
    position: absolute;
    top: 40%;
    left: 50%;
    z-index: 20;
    padding: 10px 22px;
    border: 1px solid rgba(248, 113, 113, 0.75);
    border-radius: 8px;
    background: rgba(7, 16, 23, 0.88);
    color: #fecaca;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-shadow: 0 0 12px rgba(248, 113, 113, 0.7);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.9);
    transition: opacity 220ms ease, transform 220ms ease;
}

.boss-arrived-popup[hidden] {
    display: none;
}

.boss-arrived-popup.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.boss-card {
    position: absolute;
    top: 54px;
    left: 50%;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid rgba(248, 113, 113, 0.55);
    border-radius: 8px;
    background: rgba(7, 16, 23, 0.82);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.35);
    transform: translateX(-50%);
}

.boss-card[hidden] {
    display: none;
}

.boss-image {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
}

.boss-info {
    display: grid;
    gap: 3px;
    min-width: 160px;
}

.boss-name {
    color: #fecaca;
    font-size: 0.88rem;
    font-weight: 900;
    text-align: center;
}

.boss-health-bar {
    position: relative;
    width: 100%;
    height: 10px;
    border: 1px solid rgba(248, 113, 113, 0.5);
    border-radius: 999px;
    background: rgba(127, 29, 29, 0.4);
}

.boss-health-fill {
    height: 100%;
    width: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #dc2626, #f87171);
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.7);
    transition: width 180ms ease;
}

.minigame-track-wrap {
    position: relative;
}

.boss-damage-floaters {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 0;
    pointer-events: none;
}

.boss-damage-floater {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    font-size: 0.86rem;
    font-weight: 900;
    color: #f87171;
    text-shadow: 0 0 6px rgba(220, 38, 38, 0.7);
    white-space: nowrap;
    animation: boss-damage-float 900ms ease-out forwards;
}

.boss-damage-floater.boss-damage-tier-2 {
    color: #fde047;
    font-size: 0.96rem;
    text-shadow: 0 0 6px rgba(250, 204, 21, 0.7);
}

.boss-damage-floater.boss-damage-tier-3 {
    color: #d8b4fe;
    font-size: 1.08rem;
    text-shadow: 0 0 8px rgba(192, 132, 252, 0.8);
}

@keyframes boss-damage-float {
    from {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -24px);
    }
}

.boss-timer {
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fca5a5;
    text-align: center;
}

.catch-needle.frozen {
    background: #38bdf8;
    box-shadow: 0 0 14px #38bdf8;
}

.pond-scene::before {
    display: none;
}

.pond-scene::after {
    display: none;
}

.sky {
    position: absolute;
    inset: 0 0 42% 0;
    display: none;
    background:
        radial-gradient(circle at 82% 24%, #fff7ad 0 36px, transparent 38px),
        linear-gradient(#83d7f2, #c9f1fd);
}

.cloud {
    position: absolute;
    display: block;
    width: 92px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    box-shadow:
        22px -10px 0 rgba(255,255,255,0.72),
        48px 2px 0 rgba(255,255,255,0.64);
}

.cloud-one {
    left: 8%;
    top: 18%;
}

.cloud-two {
    left: 42%;
    top: 12%;
    transform: scale(0.72);
}

.cloud-three {
    right: 14%;
    top: 30%;
    transform: scale(0.86);
}

.water {
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: none;
}

.water::before {
    display: none;
}

.water::after {
    display: none;
}

.sky::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 48px;
    opacity: 0.45;
    background:
        radial-gradient(ellipse at 18% 100%, #5fa15d 0 70px, transparent 71px),
        radial-gradient(ellipse at 58% 100%, #4d8f57 0 92px, transparent 93px),
        radial-gradient(ellipse at 88% 100%, #6aaa67 0 64px, transparent 65px);
}

.ripples {
    display: none;
}

.fish-shadow {
    position: absolute;
    width: 58px;
    height: 18px;
    border-radius: 60% 45% 45% 60%;
    background: rgba(5, 40, 55, 0.28);
    z-index: 1;
    will-change: transform;
}

.fish-shadow::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 3px;
    border-left: 13px solid rgba(5, 40, 55, 0.28);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.fish-shadow-one {
    left: 28%;
    top: 58%;
    animation: swim-one 11s ease-in-out infinite;
}

.fish-shadow-two {
    left: 62%;
    top: 69%;
    width: 42px;
    animation: swim-two 8s ease-in-out infinite;
}

.fish-shadow-three {
    left: 44%;
    top: 78%;
    width: 72px;
    animation: swim-three 13s ease-in-out infinite;
}

@keyframes swim-one {
    50% { transform: translateX(120px) translateY(20px); }
}

@keyframes swim-two {
    50% { transform: translateX(-90px) translateY(-12px) scaleX(-1); }
}

@keyframes swim-three {
    50% { transform: translateX(150px) translateY(-28px); }
}

@keyframes ripple-shift {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

.shore {
    position: absolute;
    bottom: -36px;
    width: 42%;
    height: 44%;
    border-radius: 50%;
    display: none;
    background: #5fa15d;
    z-index: 3;
}

.shore::before {
    content: "";
    position: absolute;
    inset: 18% 18% auto;
    height: 24px;
    opacity: 0.75;
    background:
        radial-gradient(circle at 10% 100%, #14532d 0 9px, transparent 10px),
        radial-gradient(circle at 26% 72%, #166534 0 7px, transparent 8px),
        radial-gradient(circle at 70% 92%, #14532d 0 8px, transparent 9px),
        radial-gradient(circle at 86% 68%, #166534 0 7px, transparent 8px);
}

.shore::after {
    content: "";
    position: absolute;
    inset: auto 24% 34% auto;
    width: 52px;
    height: 28px;
    border-radius: 50%;
    opacity: 0.45;
    background: radial-gradient(ellipse, #334155 0 20px, transparent 21px);
}

.shore-left {
    left: -18%;
}

.shore-right {
    right: -20%;
}

.waiting-bite-visual {
    position: absolute;
    left: 50%;
    top: 43%;
    display: grid;
    justify-items: center;
    gap: 6px;
    opacity: 0;
    transform: translate(-50%, -10px);
    transition: opacity 0.2s ease, transform 0.3s ease;
    z-index: 5;
    will-change: transform;
}

.waiting-bite-visual span {
    display: none;
}

.waiting-bite-visual b {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(7, 16, 23, 0.72);
    color: #e0f2fe;
    font-size: 0.78rem;
}

.line-cast .waiting-bite-visual {
    opacity: 1;
}

.line-cast .waiting-bite-visual {
    transform: translate(-50%, 0);
}

.cast-bobber {
    position: absolute;
    left: 50%;
    top: 52%;
    z-index: 7;
    width: 28px;
    height: 35px;
    opacity: 0;
    transform: translate(-50%, -18px);
    transition: opacity 0.2s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
    filter: drop-shadow(0 5px 4px rgba(4, 20, 31, 0.35));
}

.cast-bobber::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 0;
    width: 4px;
    height: 13px;
    border-radius: 4px 4px 0 0;
    background: #f8fafc;
}

.cast-bobber span {
    position: absolute;
    left: 4px;
    top: 10px;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.88);
    border-radius: 50%;
    background: linear-gradient(#ef4444 0 50%, #f8fafc 51%);
}

.cast-ripple {
    position: absolute;
    left: 50%;
    top: calc(52% + 25px);
    z-index: 6;
    width: 48px;
    height: 9px;
    border: 2px solid rgba(224, 242, 254, 0.62);
    border-radius: 50%;
    opacity: 0;
    transform: translateX(-50%) scaleY(0.42);
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.line-cast .cast-ripple {
    opacity: 1;
}

.line-cast .cast-bobber {
    opacity: 1;
    transform: translate(-50%, 0);
    animation: bobber-float 1.8s ease-in-out infinite;
}

.line-cast.bite-active .cast-bobber {
    animation: bobber-bite 0.48s ease-in-out infinite;
}

@keyframes bobber-float {
    50% { transform: translate(-50%, 4px) rotate(2deg); }
}

@keyframes bobber-bite {
    0%, 100% { transform: translate(-50%, 2px) rotate(-3deg); }
    45% { transform: translate(-50%, 15px) rotate(5deg); }
}

.pond-players {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
}

.pond-catch-effects {
    position: absolute;
    inset: 0;
    z-index: 13;
    overflow: hidden;
    pointer-events: none;
}

.pond-catch-effect {
    position: absolute;
    max-width: 170px;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.95),
        0 0 5px rgba(0, 0, 0, 0.85);
    white-space: nowrap;
    transform: translateX(-50%);
    animation: pond-catch-float 2.1s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes pond-catch-float {
    0% {
        opacity: 0;
        transform: translate(-50%, 8px) scale(0.94);
    }
    12% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
    72% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -42px) scale(1);
    }
}

.pond-player {
    position: absolute;
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 76px;
    transform: translateZ(0);
    animation: idle-roam 5s ease-in-out infinite;
}

.pet-icon.pond-equipped-pet {
    position: absolute;
    right: -3px;
    bottom: 17px;
    width: 34px;
    height: 34px;
    grid-row: auto;
    z-index: 3;
    object-fit: contain;
    transform: translateX(50%);
    animation: pond-pet-float 2.2s ease-in-out infinite;
}

.pond-equipped-pet.shiny-pond-pet {
    filter:
        drop-shadow(0 0 3px rgba(255, 255, 255, 0.98))
        drop-shadow(0 0 7px rgba(197, 108, 240, 0.82));
}

@keyframes pond-pet-float {
    50% {
        transform: translate(50%, -4px) rotate(3deg);
    }
}

.pond-player span {
    position: relative;
    width: 30px;
    height: 44px;
    border-radius: 999px 999px 6px 6px;
    background: var(--player-color);
    box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.pond-player span::before {
    content: "";
    position: absolute;
    left: 5px;
    top: -17px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffd8a8;
}

.pond-player span::after {
    content: "";
    position: absolute;
    right: -32px;
    top: 10px;
    width: 40px;
    height: 3px;
    background: #4b2d18;
    transform: rotate(-28deg);
    transform-origin: left center;
}

.pond-player b {
    max-width: 84px;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(7, 16, 23, 0.72);
    font-size: 0.74rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pond-player em {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: 140px;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 10px;
    background: rgba(255,255,255,0.9);
    color: #0f172a;
    font-size: 0.74rem;
    font-style: normal;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    z-index: 10;
    transform: translateX(-50%);
}

.pond-player em::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.9);
    transform: translateX(-50%) rotate(45deg);
}

.pond-player.casting span::after {
    animation: cast-arm 0.8s ease-in-out infinite;
}

.pond-player.hooked span {
    animation: hooked-tug 0.45s ease-in-out infinite;
}

.pond-player.caught span {
    animation: catch-hop 0.7s ease-out 2;
}

@keyframes idle-roam {
    50% { transform: translate3d(8px, -3px, 0); }
}

@keyframes cast-arm {
    50% { transform: rotate(-52deg); }
}

@keyframes hooked-tug {
    50% { transform: translate3d(-3px, 1px, 0) rotate(-2deg); }
}

@keyframes catch-hop {
    50% { transform: translate3d(0, -12px, 0); }
}

@keyframes cast-pulse {
    50% { transform: scale(1.12); opacity: 0.72; }
}

.bite-marker {
    position: absolute;
    left: calc(56% + 20px);
    top: 52%;
    display: none;
    color: var(--gold);
    font-size: 3rem;
    font-weight: 900;
    z-index: 6;
}

.bite-marker.show {
    display: block;
    animation: pop 0.5s ease infinite alternate;
}

@keyframes pop {
    to { transform: translateY(-10px) scale(1.08); }
}

.minigame {
    display: grid;
    gap: 12px;
    padding: 14px;
    transition:
        opacity 160ms ease,
        filter 160ms ease;
}

.minigame.inactive {
    opacity: 0.48;
    filter: grayscale(0.9);
}

.minigame.inactive .green-zone,
.minigame.inactive .gold-zone,
.minigame.inactive .perfect-zone,
.minigame.inactive .egg-zone,
.minigame.inactive .crate-zone,
.minigame.inactive .reward-overlap-zone {
    opacity: 0;
}

.minigame.inactive .catch-needle {
    left: 50% !important;
    opacity: 0.35;
    box-shadow: none;
}

.minigame-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.minigame-header.centered {
    justify-content: center;
    text-align: center;
}

.cast-control-row {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 440px)
        minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.cast-control-row > span:last-child {
    display: none;
}

.cast-control-row .cast-button {
    width: 100%;
    margin: 0;
}

.storage-access-button {
    width: 100%;
    min-height: 72px;
    border-color: rgba(125, 211, 252, 0.42);
    background: #142936;
    color: #dff6ff;
    font-size: 1.04rem;
    font-weight: 900;
}

.storage-access-button:hover {
    background: #1a3545;
}

.no-bait-warning {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    color: #f87171;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    pointer-events: none;
}

.no-bait-warning[hidden] {
    display: none;
}

.minigame-track {
    position: relative;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(251,113,133,0.3), rgba(125,211,252,0.18), rgba(251,113,133,0.3)),
        #071017;
}

.green-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 6px, transparent 6px 12px),
        rgba(52, 211, 153, 0.78);
    box-shadow: 0 0 18px rgba(52, 211, 153, 0.45);
}

.gold-zone {
    position: absolute;
    top: 2px;
    bottom: 2px;
    z-index: 2;
    border: 1px solid #fff1a8;
    background: linear-gradient(90deg, #b77908, #fde047, #fff7b2, #d69e0c);
    box-shadow:
        0 0 8px rgba(250, 204, 21, 0.9),
        inset 0 0 3px rgba(255, 255, 255, 0.75);
}

.perfect-zone {
    position: absolute;
    top: 1px;
    bottom: 1px;
    z-index: 3;
    background: #7e22ce;
    box-shadow:
        0 0 4px #9333ea,
        0 0 8px rgba(88, 28, 135, 0.95);
}

.egg-zone {
    position: absolute;
    top: 7px;
    bottom: 7px;
    z-index: 2;
    border: 1px solid currentColor;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,0.38) 0 3px, transparent 3px 6px),
        rgba(192, 132, 252, 0.6);
    box-shadow:
        0 0 7px currentColor,
        inset 0 0 5px rgba(255,255,255,0.35);
}

.egg-zone::after {
    content: "BASKET";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.56rem;
    font-weight: 900;
    text-shadow: 0 1px 2px #000;
}

.crate-zone {
    position: absolute;
    top: 7px;
    bottom: 7px;
    z-index: 3;
    min-width: 4px;
    border: 2px solid #4d2d16;
    border-radius: 3px;
    background:
        repeating-linear-gradient(
            135deg,
            #d59a42 0 6px,
            #8f5525 6px 12px
        );
    box-shadow:
        inset 0 0 0 2px rgba(255, 230, 158, 0.45),
        0 0 8px rgba(213, 154, 66, 0.8);
}

.crate-zone::after {
    content: "CRATE";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff4d2;
    font-size: 0.56rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 2px #251106;
}

.reward-overlap-zone {
    position: absolute;
    top: 5px;
    bottom: 5px;
    z-index: 5;
    min-width: 4px;
    border: 1px solid #fff2b5;
    border-radius: 3px;
    background:
        repeating-linear-gradient(
            135deg,
            #8b5cf6 0 5px,
            #c48838 5px 10px
        );
    box-shadow:
        0 0 9px rgba(245, 209, 112, 0.85),
        inset 0 0 4px rgba(255, 255, 255, 0.5);
}

.reward-overlap-zone::after {
    content: "BASKET + CRATE";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    font-size: 0.54rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 2px #1f102f;
}

.perfect-gold-text {
    color: #d8b4fe;
    font-weight: 900;
    text-shadow:
        0 0 4px #a855f7,
        0 0 9px rgba(192, 132, 252, 0.85);
    animation: perfect-gold-shine 900ms ease-in-out infinite alternate;
}

@keyframes perfect-gold-shine {
    from { color: #c084fc; }
    to { color: #f3e8ff; }
}

.gold-zone-bonus {
    color: #fde047;
    font-weight: 900;
    text-shadow: 0 0 7px rgba(250, 204, 21, 0.62);
}

.pond-log-gold-upgrade {
    color: #fde047;
    font-weight: 800;
    text-shadow: 0 0 5px rgba(250, 204, 21, 0.45);
}

.gold-zone-hit {
    color: #fef08a;
    font-weight: 900;
}

.result-banner.gold-zone-result {
    border-color: rgba(250, 204, 21, 0.82);
    background: rgba(113, 63, 18, 0.36);
    box-shadow:
        inset 0 0 0 1px rgba(254, 240, 138, 0.2),
        0 0 18px rgba(250, 204, 21, 0.28);
    animation: gold-result-pulse 420ms ease-out 2;
}

.pond-scene.gold-zone-catch::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background:
        linear-gradient(
            115deg,
            transparent 38%,
            rgba(254, 240, 138, 0.32) 49%,
            rgba(250, 204, 21, 0.16) 53%,
            transparent 64%
        );
    animation: gold-catch-flash 700ms ease-out forwards;
}

@keyframes gold-result-pulse {
    50% {
        transform: scale(1.01);
    }
}

@keyframes gold-catch-flash {
    from {
        opacity: 0;
        transform: translateX(-35%);
    }

    28% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translateX(35%);
    }
}

.catch-needle {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    width: 2px;
    background: #fff;
    box-shadow: 0 0 12px #fff;
    left: 0;
    transform: translateX(-50%);
    will-change: left;
}

.result-banner {
    min-height: 38px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: rgba(251, 113, 133, 0.12);
    color: #fecdd3;
}

.result-banner:empty {
    display: none;
}


.result-banner.success {
    background: rgba(52, 211, 153, 0.12);
    color: #bbf7d0;
}

.bait-notice {
    padding: 9px 12px;
    border: 1px solid rgba(250, 204, 21, 0.52);
    background: rgba(113, 63, 18, 0.34);
    color: #fde68a;
    font-size: 0.84rem;
    font-weight: 800;
}

.inventory-list.scrollable-inventory {
    max-height: 680px;
    overflow-y: auto;
    padding-right: 6px;
}

.storage-modal {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(1240px, calc(100vw - 28px));
    height: min(820px, calc(100dvh - 28px));
    max-height: none;
    overflow: hidden;
}

.storage-modal-shell {
    z-index: 80;
}

.storage-modal-header {
    min-height: 52px;
    margin-bottom: 10px;
}

.storage-modal-header > div:first-child {
    display: grid;
    gap: 4px;
}

.storage-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    margin-bottom: 10px;
    padding: 9px;
    border: 1px solid rgba(125, 211, 252, 0.18);
    background: rgba(7, 16, 23, 0.42);
}

.keep-net-toolbar {
    flex-direction: column;
    align-items: stretch;
}

.keep-net-toolbar .keep-net-type-filters {
    flex: 0 0 auto;
    margin: 0;
}

.keep-net-action-divider {
    height: 0;
    margin: 2px 0;
    background: none;
}

.storage-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(152px, 184px);
    align-content: start;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
}

.storage-grid > .muted {
    grid-column: 1 / -1;
    align-self: center;
    justify-self: center;
}

.storage-grid .fish-card {
    container-type: inline-size;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(18px, 1fr) auto;
    gap: 4px 7px;
    min-width: 0;
    min-height: 0;
    padding: 8px;
    overflow: hidden;
    align-content: start;
    align-items: start;
}

.storage-grid .fish-card > .fish-icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 42px;
    height: 34px;
}

.storage-grid .fish-card > strong,
.storage-grid .fish-card > span,
.storage-grid .fish-card > small {
    grid-column: 2;
    min-width: 0;
    overflow-wrap: anywhere;
}

.storage-grid .fish-card > strong {
    font-size: 0.82rem;
    line-height: 1.15;
}

.storage-grid .fish-card > span,
.storage-grid .fish-card > small,
.storage-grid .fish-card > b {
    font-size: 0.72rem;
    line-height: 1.2;
}

.storage-grid .fish-card > b {
    grid-column: 1 / -1;
    align-self: end;
}

.storage-grid .fish-actions {
    grid-column: 1 / -1;
    align-self: end;
    gap: 3px;
    justify-content: stretch;
    width: 100%;
}

.storage-grid .fish-actions button {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 32px;
    padding: 3px clamp(2px, 2cqi, 5px);
    font-size: clamp(0.58rem, 5.5cqi, 0.76rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
    white-space: normal;
}

.storage-grid .fish-actions .fish-lock-button {
    flex: 0 0 32px;
}

.storage-grid .crate-card > strong,
.storage-grid .crate-card > span,
.storage-grid .crate-card > small,
.storage-grid .crate-card > b {
    grid-column: 1 / -1;
}

.storage-pagination {
    justify-content: center;
    margin: 10px 0 0;
}

.storage-pagination span {
    min-width: 110px;
    color: var(--muted);
    font-weight: 800;
    text-align: center;
}

* {
    scrollbar-color: #4c7892 #0b151d;
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: #0b151d;
}

*::-webkit-scrollbar-thumb {
    border: 2px solid #0b151d;
    border-radius: 4px;
    background: #4c7892;
}

*::-webkit-scrollbar-thumb:hover {
    background: #6697b3;
}


.keep-net-actions {
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: flex-end;
}

.keep-net-actions button {
    flex: 0 1 auto;
}

.keep-net-actions .bulk-action-pair > button:not(.bulk-action-lock) {
    min-height: 40px;
    padding: 0 11px;
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
}

.bulk-action-pair {
    display: inline-flex;
    align-items: stretch;
}

.bulk-action-pair > button {
    border-radius: 0 5px 5px 0;
}

.bulk-action-pair > .bulk-action-lock {
    width: 34px;
    min-width: 34px;
    min-height: 40px;
    border-right-width: 0;
    border-radius: 5px 0 0 5px;
}

#sellAllButton {
    border-radius: 0;
}

.bulk-action-pair > .bulk-settings-button {
    width: 30px;
    min-width: 30px;
    padding: 0;
    border-left-width: 0;
    border-radius: 0 5px 5px 0;
    color: var(--accent);
    font-size: 0.95rem;
}

.bulk-action-pair > .bulk-settings-button[hidden] {
    display: none !important;
}

.bulk-action-pair:has(.bulk-settings-button[hidden]) > #sellAllButton {
    border-radius: 0 5px 5px 0;
}

.bulk-action-pair > .bulk-action-lock:disabled + button {
    border-left-color: rgba(255, 255, 255, 0.08);
}

.bulk-action-lock .lock-icon {
    margin-top: 8px;
}

.keep-net-filter-row {
    display: block;
}

.keep-net-type-filters {
    width: auto;
    max-width: 100%;
    margin: 0 0 10px;
}

.keep-net-type-filters label[hidden],
.catalog-count-summary[hidden] {
    display: none !important;
}

.sell-all-settings-group[hidden] {
    display: none !important;
}

.keep-net-filter-row .rarity-checkboxes {
    gap: 4px 7px;
    padding: 6px 8px 7px;
}

.keep-net-filter-row .rarity-checkboxes legend,
.keep-net-filter-row .rarity-checkboxes label {
    font-size: 0.64rem;
}

.keep-net-filter-row .rarity-checkboxes input {
    width: 12px;
    height: 12px;
}

.new-fish-badge {
    display: inline-grid;
    place-items: center;
    min-height: 24px;
    margin-right: 7px;
    padding: 2px 7px;
    border: 1px solid rgba(250, 204, 21, 0.68);
    border-radius: 5px;
    background: rgba(250, 204, 21, 0.14);
    color: #fef08a !important;
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
    vertical-align: middle;
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.18);
}

.inventory-panel {
    padding: 14px;
}

.section-header {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.section-header h2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.section-disclosure {
    display: inline-grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    min-height: 26px;
    padding: 0;
    border-color: rgba(125, 211, 252, 0.3);
    background: rgba(125, 211, 252, 0.07);
    color: var(--accent);
    font-size: 0.9rem;
    line-height: 1;
}

.section-disclosure:hover {
    background: rgba(125, 211, 252, 0.14);
}

.fish-card,
.shop-item,
.catalog-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    background: #0f1b25;
}

.shop-item {
    position: relative;
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 86px;
    overflow: hidden;
}

.shop-item > span {
    grid-column: 2;
    align-self: start;
}

.shop-item > b {
    grid-column: 2;
    justify-self: center;
    text-align: center;
}

.shop-item > button {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(150px, 100%);
}

.shop-item::before {
    content: "";
    width: 42px;
    height: 42px;
    border: 1px solid rgba(125, 211, 252, 0.35);
    border-radius: 8px;
    background:
        radial-gradient(circle at 60% 35%, rgba(250,204,21,0.35), transparent 16px),
        linear-gradient(145deg, rgba(125,211,252,0.18), rgba(15,27,37,0.95));
}

.shop-item.bait-item::before {
    background:
        radial-gradient(circle at 50% 52%, rgba(250,204,21,0.5), transparent 12px),
        linear-gradient(145deg, rgba(34,197,94,0.2), rgba(15,27,37,0.95));
}

.shop-item.lure-item::before {
    background:
        linear-gradient(135deg, transparent 30%, rgba(125,211,252,0.55) 31% 44%, transparent 45%),
        radial-gradient(circle at 70% 28%, rgba(255,255,255,0.6), transparent 8px),
        #0f1b25;
}

.shop-item.upgrade-item::before {
    background:
        linear-gradient(90deg, transparent 42%, rgba(250,204,21,0.8) 43% 57%, transparent 58%),
        radial-gradient(circle at 50% 70%, rgba(125,211,252,0.35), transparent 13px),
        #0f1b25;
}

.upgrade-item .prestige-detail {
    display: grid;
    grid-column: 1 / -1;
    gap: 4px;
    width: 100%;
    margin-top: 0;
    padding-top: 7px;
    border-top: 1px solid rgba(125, 211, 252, 0.16);
}

.upgrade-item .prestige-detail span {
    display: block;
}

.upgrade-item > button {
    min-width: 96px;
}

.shop-item span,
.fish-card strong {
    min-width: 0;
}

.shop-item small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-weight: 600;
    line-height: 1.3;
}

.fish-actions {
    display: flex;
    gap: 6px;
    justify-content: end;
}

.fish-actions button {
    min-height: 30px;
    padding: 0 8px;
    font-size: 0.78rem;
}

.fish-actions button:disabled {
    border-color: rgba(148, 163, 184, 0.18);
    color: #64748b;
    background: rgba(30, 41, 59, 0.55);
    cursor: not-allowed;
    opacity: 0.65;
}

.fish-lock-button {
    position: relative;
    width: 32px;
    padding: 0;
}

.lock-icon {
    position: relative;
    display: block;
    width: 14px;
    height: 10px;
    margin: 8px auto 0;
    border: 2px solid currentColor;
    border-radius: 2px;
}

.lock-icon::before {
    content: "";
    position: absolute;
    left: 1px;
    top: -9px;
    width: 6px;
    height: 7px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
}

.fish-lock-button:not(.locked) .lock-icon::before {
    left: 7px;
    top: -10px;
    transform: rotate(28deg);
    transform-origin: 1px 7px;
}

.fish-lock-button.locked {
    border-color: rgba(250, 204, 21, 0.55);
    color: #fde68a;
    background: rgba(113, 63, 18, 0.42);
}

.crate-card {
    background:
        linear-gradient(135deg, rgba(250,204,21,0.12), rgba(15,27,37,0.96));
}

.fish-card span,
.catalog-card span {
    color: var(--muted);
}

.catalog-list,
.catalog-grid {
    display: grid;
    gap: 8px;
}

.catalog-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.catalog-card {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 100px;
    align-content: start;
    align-items: center;
    padding: 6px;
    gap: 5px;
    border-radius: 7px;
    font-size: 0.68em;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.04), transparent),
        #0f1b25;
}

.catalog-card .fish-icon {
    width: 36px;
}

.catalog-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.catalog-card strong {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.15;
    font-size: 0.94em;
}

.catalog-card span {
    white-space: nowrap;
    font-size: 0.88em;
}

.catalog-card small {
    color: var(--muted);
    line-height: 1.25;
    font-size: 0.86em;
}

.fish-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px;
    background: rgba(7, 16, 23, 0.45);
    overflow: hidden;
    flex: 0 0 auto;
    contain: paint;
}

.fish-icon-image {
    width: 82%;
    height: 82%;
    object-fit: contain;
    filter:
        drop-shadow(0 0 2px var(--fish-icon-glow, rgba(255, 255, 255, 0.38)))
        drop-shadow(0 0 5px var(--fish-icon-glow-soft, rgba(255, 255, 255, 0.16)));
}

.fish-icon.rarity-common {
    --fish-icon-glow: rgba(255, 255, 255, 0.38);
    --fish-icon-glow-soft: rgba(255, 255, 255, 0.16);
}

.fish-icon.rarity-uncommon {
    --fish-icon-glow: rgba(74, 222, 128, 0.48);
    --fish-icon-glow-soft: rgba(74, 222, 128, 0.2);
}

.fish-icon.rarity-rare {
    --fish-icon-glow: rgba(96, 165, 250, 0.54);
    --fish-icon-glow-soft: rgba(96, 165, 250, 0.22);
}

.fish-icon.rarity-epic {
    --fish-icon-glow: rgba(192, 132, 252, 0.56);
    --fish-icon-glow-soft: rgba(192, 132, 252, 0.24);
}

.fish-icon.rarity-legendary {
    --fish-icon-glow: rgba(250, 204, 21, 0.58);
    --fish-icon-glow-soft: rgba(250, 204, 21, 0.26);
}

.fish-icon.rarity-mythical {
    --fish-icon-glow: rgba(248, 113, 113, 0.62);
    --fish-icon-glow-soft: rgba(239, 68, 68, 0.28);
}

.fish-icon.rarity-eternal {
    --fish-icon-glow: rgba(251, 146, 60, 0.66);
    --fish-icon-glow-soft: rgba(250, 204, 21, 0.3);
}

.fish-icon span {
    position: relative;
    width: 27px;
    height: 15px;
    border-radius: 60% 45% 45% 60%;
    background:
        linear-gradient(90deg, hsl(var(--fish-hue), 72%, 58%), hsl(var(--fish-accent), 82%, 64%));
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.17);
}

.fish-icon span::before {
    content: "";
    position: absolute;
    right: -4px;
    top: 2px;
    border-right: 8px solid hsl(var(--fish-accent), 82%, 64%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.fish-icon span::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 4px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #061018;
}

/* 1: Round Panfish - small, plump, simple round body */
.fish-shape-1 span {
    width: 21px;
    height: 19px;
    border-radius: 50%;
}

.fish-shape-1 span::before {
    right: -7px;
    top: 5px;
    border-right-width: 9px;
    border-top-width: 5px;
    border-bottom-width: 5px;
}

/* 2: Baitfish/Minnow - slim, streamlined, small forked tail */
.fish-shape-2 span {
    width: 30px;
    height: 11px;
    border-radius: 65% 35% 45% 55%;
}

.fish-shape-2 span::before {
    right: -6px;
    top: 0;
    border-right-width: 6px;
    border-top-width: 5px;
    border-bottom-width: 0;
}

.fish-shape-2 span::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 6px;
    border-right: 6px solid hsl(var(--fish-accent), 82%, 64%);
    border-bottom: 5px solid transparent;
    border-top: 0;
    background: none;
    border-radius: 0;
    width: auto;
    height: auto;
}

/* 3: Chubby Panfish - wide rounded body, fan tail */
.fish-shape-3 span {
    width: 25px;
    height: 21px;
    border-radius: 55% 45% 50% 50%;
}

.fish-shape-3 span::before {
    right: -9px;
    top: 3px;
    border-right-width: 11px;
    border-top-width: 8px;
    border-bottom-width: 8px;
}

/* 4: Darter - angled quick-swimming body with a side fin */
.fish-shape-4 span {
    width: 26px;
    height: 12px;
    border-radius: 55% 45% 40% 60%;
    transform: rotate(-14deg);
}

.fish-shape-4 span::after {
    left: 9px;
    top: 2px;
    width: 3px;
    height: 8px;
    border-radius: 2px;
    background: hsl(var(--fish-accent), 78%, 62%);
    box-shadow: none;
}

/* 5: Eel/Serpent - long sinuous body tapering to a point, no fork */
.fish-shape-5 span {
    width: 40px;
    height: 6px;
    border-radius: 50% 20% 50% 20% / 90% 90% 90% 90%;
    transform: rotate(-5deg);
}

.fish-shape-5 span::before {
    content: none;
}

.fish-shape-5::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 14px;
    width: 12px;
    height: 4px;
    border-radius: 50%;
    background: hsl(var(--fish-hue), 72%, 58%);
    transform: rotate(18deg);
}

.fish-shape-5::after {
    content: "";
    position: absolute;
    left: 30px;
    top: 15px;
    width: 12px;
    height: 4px;
    border-radius: 50%;
    background: hsl(var(--fish-accent), 82%, 64%);
    transform: rotate(-18deg);
}

/* 6: Ray/Manta - wide flat wings with a thin whip tail */
.fish-shape-6 span {
    width: 30px;
    height: 20px;
    border-radius: 50%;
    clip-path: polygon(50% 10%, 100% 55%, 68% 48%, 60% 90%, 50% 60%, 40% 90%, 32% 48%, 0 55%);
}

.fish-shape-6 span::before {
    content: "";
    position: absolute;
    right: -6px;
    top: 9px;
    width: 8px;
    height: 2px;
    background: hsl(var(--fish-hue), 60%, 42%);
    border: 0;
    transform: rotate(4deg);
}

.fish-shape-6 span::after {
    left: 13px;
    top: 6px;
}

/* 7: Crab/Crustacean - round shell body with claws and legs, not fish-shaped */
.fish-shape-7 span {
    width: 20px;
    height: 14px;
    border-radius: 50% 50% 40% 40%;
}

.fish-shape-7 span::before {
    content: "";
    position: absolute;
    right: -5px;
    top: -1px;
    width: 8px;
    height: 8px;
    border-radius: 50% 50% 50% 0;
    border: 3px solid hsl(var(--fish-accent), 82%, 64%);
    background: transparent;
}

.fish-shape-7 span::after {
    left: -3px;
    top: -1px;
    width: 8px;
    height: 8px;
    border-radius: 50% 50% 0 50%;
    border: 3px solid hsl(var(--fish-accent), 82%, 64%);
    background: transparent;
    box-shadow:
        2px 13px 0 -3px #061018,
        7px 13px 0 -3px #061018,
        12px 13px 0 -3px #061018;
}

/* 8: Flatfish/Flounder - wide flat body, both eyes on the top side */
.fish-shape-8 span {
    width: 32px;
    height: 10px;
    border-radius: 50%;
}

.fish-shape-8 span::before {
    right: -3px;
    top: 1px;
    border-right-width: 4px;
    border-top-width: 4px;
    border-bottom-width: 4px;
}

.fish-shape-8 span::after {
    left: 9px;
    top: -2px;
    box-shadow: 4px 0 0 0 #061018;
}

/* 9: Marlin/Pike - long predator with a pointed bill and tall sail fin */
.fish-shape-9 span {
    width: 32px;
    height: 8px;
    border-radius: 40% 20% 30% 60%;
}

.fish-shape-9 span::before {
    right: -8px;
    top: 0;
    border-right-width: 7px;
    border-top-width: 4px;
    border-bottom-width: 4px;
}

.fish-shape-9::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 15px;
    width: 9px;
    height: 3px;
    background: hsl(var(--fish-accent), 82%, 64%);
}

.fish-shape-9::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 6px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 12px solid hsl(var(--fish-accent), 78%, 58%);
    opacity: 0.85;
}

/* 10: Fancy-finned (betta/gourami) - plump body, huge flowing fan tail */
.fish-shape-10 span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.fish-shape-10 span::before {
    right: -16px;
    top: -2px;
    border-right-width: 17px;
    border-top-width: 11px;
    border-bottom-width: 11px;
    opacity: 0.82;
}

/* 11: Catfish - flat-headed body with two whisker barbels */
.fish-shape-11 span {
    width: 28px;
    height: 15px;
    border-radius: 30% 60% 55% 40%;
}

.fish-shape-11 span::after {
    left: -5px;
    top: 3px;
    width: 9px;
    height: 1px;
    border-radius: 0;
    background: hsl(var(--fish-accent), 78%, 62%);
    box-shadow:
        1px 5px 0 0 hsl(var(--fish-accent), 78%, 62%);
}

/* 12: Armored/Ancient (sturgeon/coelacanth) - ridged plated back */
.fish-shape-12 span {
    width: 33px;
    height: 13px;
    border-radius: 40% 45% 45% 40%;
    box-shadow:
        inset 0 -4px 0 rgba(0, 0, 0, 0.17),
        inset -11px 4px 0 -3px rgba(255,255,255,0.4),
        inset -4px 4px 0 -3px rgba(255,255,255,0.4),
        inset 3px 4px 0 -3px rgba(255,255,255,0.4),
        inset 10px 4px 0 -3px rgba(255,255,255,0.4);
}

/* 13: Koi/Carp - round-snouted body, barbels, elegant fan tail */
.fish-shape-13 span {
    width: 27px;
    height: 17px;
    border-radius: 62% 38% 50% 50%;
}

.fish-shape-13 span::before {
    right: -10px;
    top: 2px;
    border-right-width: 12px;
    border-top-width: 7px;
    border-bottom-width: 7px;
}

.fish-shape-13 span::after {
    left: -2px;
    top: 6px;
    width: 4px;
    height: 1px;
    border-radius: 0;
    background: hsl(var(--fish-accent), 78%, 62%);
    box-shadow: none;
}

/* 14: Classic Torpedo Fish (tuna/salmon/trout) - the flagship silhouette */
.fish-shape-14 span {
    width: 33px;
    height: 13px;
    border-radius: 60% 40% 45% 55%;
}

.fish-shape-14 span::before {
    content: "";
    position: absolute;
    right: -10px;
    top: 1px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid hsl(var(--fish-accent), 82%, 64%);
    clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%);
}

.fish-shape-14::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 6px;
    width: 8px;
    height: 9px;
    background: hsl(var(--fish-accent), 78%, 60%);
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

/* 15: Pufferfish - round spiky ball */
.fish-shape-15 span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    clip-path: polygon(50% 0, 59% 17%, 75% 5%, 76% 25%, 96% 22%, 82% 40%, 100% 50%, 81% 59%, 95% 78%, 74% 74%, 74% 96%, 58% 81%, 48% 100%, 40% 81%, 20% 95%, 24% 74%, 2% 75%, 18% 57%, 0 48%, 18% 39%, 5% 21%, 26% 25%, 26% 5%, 42% 18%);
}

.fish-shape-15 span::before {
    right: -6px;
    top: 8px;
    border-right-width: 7px;
    border-top-width: 4px;
    border-bottom-width: 4px;
}

/* 16: Seahorse - curved upright body with a curled tail and head crest */
.fish-shape-16 span {
    width: 11px;
    height: 19px;
    border-radius: 65% 55% 40% 60%;
}

.fish-shape-16 span::before {
    content: "";
    position: absolute;
    right: -5px;
    top: 1px;
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-bottom: 2px solid transparent;
    border-left: 5px solid hsl(var(--fish-accent), 82%, 64%);
}

.fish-shape-16 span::after {
    left: 2px;
    top: 2px;
}

.fish-shape-16::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 19px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 3px solid hsl(var(--fish-accent), 82%, 64%);
    border-top-color: transparent;
    border-right-color: transparent;
    background: transparent;
}

/* 17: Anglerfish - bulbous body, toothy jaw, glowing lure on a stalk */
.fish-shape-17 span {
    width: 26px;
    height: 17px;
    border-radius: 30% 60% 50% 45%;
    clip-path: polygon(0 0, 100% 0, 100% 65%, 88% 78%, 78% 65%, 68% 78%, 58% 65%, 48% 78%, 38% 65%, 28% 78%, 18% 65%, 8% 78%, 0 65%);
}

.fish-shape-17::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 5px;
    width: 2px;
    height: 8px;
    background: hsl(var(--fish-accent), 82%, 64%);
}

.fish-shape-17::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fef08a;
    box-shadow: 0 0 6px 1px #facc15;
}

/* 18: Shark - sleek torpedo body with a tall dorsal fin */
.fish-shape-18 span {
    width: 34px;
    height: 11px;
    border-radius: 68% 30% 40% 60%;
}

.fish-shape-18 span::before {
    right: -8px;
    top: 1px;
    border-right-width: 9px;
    border-top-width: 5px;
    border-bottom-width: 5px;
}

.fish-shape-18::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 6px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid hsl(var(--fish-accent), 78%, 58%);
}

/* 19: Kraken/Squid - teardrop mantle with dangling curled tentacles */
.fish-shape-19 span {
    width: 19px;
    height: 17px;
    border-radius: 60% 60% 30% 30%;
}

.fish-shape-19 span::before {
    content: none;
}

.fish-shape-19 span::after {
    left: 2px;
    top: 12px;
    width: 2px;
    height: 9px;
    border-radius: 0 0 2px 2px;
    background: hsl(var(--fish-accent), 78%, 60%);
    box-shadow:
        4px 1px 0 0 hsl(var(--fish-accent), 78%, 60%),
        8px 0 0 0 hsl(var(--fish-accent), 78%, 60%),
        12px 2px 0 0 hsl(var(--fish-accent), 78%, 60%);
}

/* 20: Flying Fish - slim body with wide triangular wing-fins */
.fish-shape-20 span {
    width: 26px;
    height: 9px;
    border-radius: 60% 40% 45% 55%;
}

.fish-shape-20 span::before {
    right: -6px;
    top: 0;
    border-right-width: 6px;
    border-top-width: 4px;
    border-bottom-width: 4px;
}

.fish-shape-20::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 8px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 12px solid hsla(var(--fish-accent), 82%, 68%, 0.8);
}

.fish-shape-20::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 16px;
    width: 0;
    height: 0;
    border-bottom: 7px solid transparent;
    border-top: 0 solid transparent;
    border-left: 12px solid hsla(var(--fish-accent), 82%, 68%, 0.8);
}

/* 21: Jellyfish - translucent drifting dome with trailing tentacle strands */
.fish-shape-21 span {
    width: 20px;
    height: 13px;
    border-radius: 50% 50% 15% 15%;
    opacity: 0.85;
}

.fish-shape-21 span::before {
    content: none;
}

.fish-shape-21 span::after {
    left: 2px;
    top: 9px;
    width: 1px;
    height: 10px;
    border-radius: 0;
    background: hsla(var(--fish-accent), 78%, 70%, 0.85);
    box-shadow:
        5px 1px 0 0 hsla(var(--fish-accent), 78%, 70%, 0.85),
        10px -1px 0 0 hsla(var(--fish-accent), 78%, 70%, 0.85),
        15px 2px 0 0 hsla(var(--fish-accent), 78%, 70%, 0.85);
}

/* 22: Starfish - flat five-pointed echinoderm, no tail or eye */
.fish-shape-22 span {
    width: 24px;
    height: 24px;
    border-radius: 20%;
    clip-path: polygon(50% 0%, 63% 35%, 100% 38%, 72% 60%, 82% 96%, 50% 75%, 18% 96%, 28% 60%, 0% 38%, 37% 35%);
}

.fish-shape-22 span::before {
    content: none;
}

.fish-shape-22 span::after {
    content: none;
}

/* 23: Octopus - bulbous head with wide splayed curling arms */
.fish-shape-23 span {
    width: 19px;
    height: 16px;
    border-radius: 60% 60% 40% 40%;
}

.fish-shape-23 span::before {
    content: none;
}

.fish-shape-23 span::after {
    left: 1px;
    top: 12px;
    width: 2px;
    height: 7px;
    border-radius: 0 0 3px 3px;
    background: hsl(var(--fish-accent), 78%, 60%);
    box-shadow:
        5px 1px 0 0 hsl(var(--fish-accent), 78%, 60%),
        10px 0 0 0 hsl(var(--fish-accent), 78%, 60%),
        15px 1px 0 0 hsl(var(--fish-accent), 78%, 60%);
}

/* 24: Turtle - domed shell with a peeking head and small flippers */
.fish-shape-24 span {
    width: 24px;
    height: 17px;
    border-radius: 55%;
    box-shadow:
        inset 0 -4px 0 rgba(0, 0, 0, 0.17),
        inset 6px 4px 0 -3px rgba(255,255,255,0.25),
        inset -2px 4px 0 -3px rgba(255,255,255,0.25),
        inset -10px 4px 0 -3px rgba(255,255,255,0.25);
}

.fish-shape-24 span::before {
    content: none;
}

.fish-shape-24 span::after {
    left: -3px;
    top: 6px;
    width: 6px;
    height: 5px;
    border-radius: 50%;
    background: hsl(var(--fish-accent), 78%, 60%);
    box-shadow:
        1px 8px 0 -1px hsl(var(--fish-accent), 78%, 60%),
        18px 8px 0 -1px hsl(var(--fish-accent), 78%, 60%);
}

/* 25: Snail/Shell-dweller - spiral shell with a small body peeking out */
.fish-shape-25 span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background:
        conic-gradient(from 90deg, hsl(var(--fish-hue), 72%, 58%) 0 25%, hsl(var(--fish-accent), 82%, 64%) 25% 50%, hsl(var(--fish-hue), 72%, 58%) 50% 75%, hsl(var(--fish-accent), 82%, 64%) 75% 100%);
}

.fish-shape-25 span::before {
    right: -3px;
    bottom: -1px;
    top: auto;
    width: 8px;
    height: 6px;
    border-radius: 50%;
    background: hsl(var(--fish-accent), 78%, 62%);
    border: 0;
}

.fish-shape-25 span::after {
    right: 1px;
    left: auto;
    bottom: 1px;
    top: auto;
}

/* 26: Lionfish - venomous body with dramatic radiating spike fins */
.fish-shape-26 span {
    width: 21px;
    height: 14px;
    border-radius: 50% 40% 45% 55%;
}

.fish-shape-26 span::before {
    right: -6px;
    top: 1px;
    border-right-width: 7px;
    border-top-width: 4px;
    border-bottom-width: 4px;
}

.fish-shape-26::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 5px;
    width: 0;
    height: 0;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-bottom: 9px solid hsla(var(--fish-accent), 82%, 68%, 0.8);
    box-shadow:
        5px 0 0 -1px hsla(var(--fish-accent), 82%, 68%, 0.8),
        10px 1px 0 -1px hsla(var(--fish-accent), 82%, 68%, 0.8);
}

.fish-shape-26::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 19px;
    width: 0;
    height: 0;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-top: 8px solid hsla(var(--fish-accent), 82%, 68%, 0.8);
    box-shadow:
        5px 0 0 -1px hsla(var(--fish-accent), 82%, 68%, 0.8),
        10px -1px 0 -1px hsla(var(--fish-accent), 82%, 68%, 0.8);
}

/* 27: Goby/Blenny - stubby flat-headed bottom-dweller with a big fan pectoral fin */
.fish-shape-27 span {
    width: 18px;
    height: 12px;
    border-radius: 15% 60% 55% 45%;
}

.fish-shape-27 span::before {
    right: -4px;
    top: 2px;
    border-right-width: 4px;
    border-top-width: 4px;
    border-bottom-width: 4px;
}

.fish-shape-27 span::after {
    left: -2px;
    top: 5px;
    width: 7px;
    height: 5px;
    border-radius: 0 70% 40% 0;
    background: hsla(var(--fish-accent), 78%, 62%, 0.85);
    box-shadow: none;
}

/* 28: Sculpin - oversized spiny head tapering to a slim body with a wide fan fin */
.fish-shape-28 span {
    width: 26px;
    height: 13px;
    border-radius: 65% 15% 20% 55%;
}

.fish-shape-28 span::before {
    right: -3px;
    top: 4px;
    border-right-width: 3px;
    border-top-width: 3px;
    border-bottom-width: 3px;
}

.fish-shape-28 span::after {
    left: 2px;
    top: -2px;
    width: 6px;
    height: 6px;
    border-radius: 0 60% 60% 60%;
    background: hsla(var(--fish-accent), 78%, 62%, 0.85);
    box-shadow: none;
}

.fish-rarity-rare span,
.fish-rarity-epic span,
.fish-rarity-legendary span,
.fish-rarity-mythical span,
.fish-rarity-eternal span {
    box-shadow:
        inset 0 -4px 0 rgba(0, 0, 0, 0.2),
        0 0 7px hsla(var(--fish-accent), 90%, 68%, 0.5);
}

.fish-rarity-epic,
.fish-rarity-legendary,
.fish-rarity-mythical,
.fish-rarity-eternal {
    border-color: hsla(var(--fish-accent), 88%, 70%, 0.48);
}

.fish-rarity-legendary span::after,
.fish-rarity-mythical span::after,
.fish-rarity-eternal span::after {
    width: 4px;
    height: 4px;
    background: #fff;
    box-shadow: 0 0 5px #fff;
}

.fish-rarity-mythical span {
    outline: 1px solid rgba(248, 113, 113, 0.5);
}

.fish-rarity-eternal span {
    outline: 1px solid rgba(251, 191, 36, 0.72);
    filter: saturate(1.3) brightness(1.12);
}

.fish-motif-opal span {
    background:
        radial-gradient(circle at 28% 32%, #f0abfc 0 3px, transparent 4px),
        radial-gradient(circle at 60% 70%, #67e8f9 0 3px, transparent 4px),
        linear-gradient(110deg, #e0f2fe, #c4b5fd 42%, #5eead4 72%, #fbcfe8);
}

.fish-motif-crystal span {
    background:
        linear-gradient(135deg, transparent 0 22%, rgba(255,255,255,0.78) 23% 29%, transparent 30%),
        linear-gradient(100deg, #38bdf8, #a78bfa 48%, #67e8f9);
    clip-path: polygon(0 50%, 18% 12%, 69% 4%, 100% 48%, 73% 92%, 22% 86%);
}

.fish-motif-gold span {
    background:
        repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,0.35) 7px 8px),
        linear-gradient(100deg, #f59e0b, #fef08a 52%, #d97706);
}

.fish-motif-moon span {
    background:
        radial-gradient(circle at 68% 28%, #f8fafc 0 3px, transparent 4px),
        linear-gradient(100deg, #312e81, #818cf8 48%, #0f172a);
}

.fish-motif-ember span {
    background:
        radial-gradient(ellipse at 35% 75%, #fde68a 0 3px, transparent 4px),
        linear-gradient(100deg, #7f1d1d, #f97316 52%, #facc15);
}

.fish-motif-storm span {
    background:
        linear-gradient(125deg, transparent 0 35%, #fef08a 36% 43%, transparent 44%),
        linear-gradient(100deg, #1e3a8a, #38bdf8 54%, #475569);
}

.fish-motif-spectral span {
    opacity: 0.82;
    background:
        radial-gradient(circle at 55% 48%, rgba(255,255,255,0.75) 0 3px, transparent 4px),
        linear-gradient(100deg, rgba(226,232,240,0.62), #a78bfa 50%, rgba(34,211,238,0.52));
}

.fish-motif-celestial span {
    background:
        radial-gradient(circle at 30% 30%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 62% 68%, #fef08a 0 1px, transparent 2px),
        linear-gradient(100deg, #312e81, #7c3aed 52%, #f59e0b);
}

.fish-motif-eternal span {
    background:
        repeating-linear-gradient(120deg, transparent 0 6px, rgba(255,255,255,0.5) 7px 8px),
        linear-gradient(100deg, #dc2626, #f97316 42%, #facc15 70%, #fff7ed);
    box-shadow:
        inset 0 -4px 0 rgba(127,29,29,0.25),
        0 0 10px rgba(251,146,60,0.75);
}

.fish-motif-botanical span {
    background:
        radial-gradient(ellipse at 38% 45%, #bef264 0 3px, transparent 4px),
        linear-gradient(100deg, #14532d, #4ade80 55%, #84cc16);
}

.fish-stripe-1 span {
    background:
        repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,255,255,0.35) 5px 8px),
        linear-gradient(90deg, hsl(var(--fish-hue), 72%, 58%), hsl(var(--fish-accent), 82%, 64%));
}

.fish-stripe-2 span {
    background:
        radial-gradient(circle at 60% 45%, rgba(255,255,255,0.45) 0 3px, transparent 4px),
        linear-gradient(90deg, hsl(var(--fish-hue), 72%, 58%), hsl(var(--fish-accent), 82%, 64%));
}

.fish-stripe-3 span {
    background:
        repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,0.3) 0 1.5px, transparent 2px 6px),
        linear-gradient(90deg, hsl(var(--fish-hue), 72%, 58%), hsl(var(--fish-accent), 82%, 64%));
}

.mystery-fish {
    color: var(--muted);
    font-weight: 900;
}

.result-banner .fish-icon {
    display: inline-grid;
    margin-right: 8px;
    vertical-align: middle;
}

.catalog-card.undiscovered strong {
    color: var(--muted);
    letter-spacing: 0.08em;
}

.catalog-card.discovered {
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.08);
}

.catalog-card.new-catalog-entry {
    position: relative;
    border-color: rgba(250, 204, 21, 0.62);
    box-shadow:
        inset 0 0 0 1px rgba(250, 204, 21, 0.16),
        0 0 9px rgba(250, 204, 21, 0.1);
}

.catalog-card.new-catalog-entry::after {
    content: "";
    position: absolute;
    left: 7px;
    bottom: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #facc15;
    box-shadow: 0 0 6px rgba(250, 204, 21, 0.72);
}

.catalog-card.shiny-cataloged {
    position: relative;
    border: 2px solid transparent;
    background:
        linear-gradient(#0f1b25, #0f1b25) padding-box,
        linear-gradient(90deg, #ff5f6d, #ffc371, #7bed9f, #70a1ff, #c56cf0, #ff5f6d) border-box;
    background-size: 240% 100%;
    animation: shiny-flow 2.4s linear infinite;
}

.catalog-card.evolved-fish {
    border-color: rgba(250, 204, 21, 0.7);
    background:
        radial-gradient(circle at 85% 15%, rgba(254, 240, 138, 0.22), transparent 34%),
        linear-gradient(145deg, rgba(146, 100, 8, 0.48), rgba(48, 34, 8, 0.92));
    box-shadow:
        inset 0 0 18px rgba(250, 204, 21, 0.13),
        0 0 8px rgba(250, 204, 21, 0.12);
}

.catalog-card.evolved-fish.shiny-cataloged {
    border: 2px solid transparent;
    background:
        linear-gradient(145deg, rgba(146, 100, 8, 0.72), rgba(48, 34, 8, 0.96)) padding-box,
        linear-gradient(90deg, #ff5f6d, #ffc371, #7bed9f, #70a1ff, #c56cf0, #ff5f6d) border-box;
    background-size: 100% 100%, 240% 100%;
}

.evolve-fish-button {
    width: 100%;
    min-height: 25px;
    padding: 4px 5px;
    border-color: rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.72);
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.15;
}

.evolve-fish-button:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.evolve-fish-button.evolution-ready {
    border-color: rgba(250, 204, 21, 0.72);
    background: rgba(113, 63, 18, 0.52);
    color: #fde68a;
    font-weight: 900;
    text-shadow: 0 0 7px rgba(250, 204, 21, 0.75);
    animation: evolution-gold-shine 900ms ease-in-out infinite alternate;
}

.evolved-label {
    color: #fde68a;
    font-weight: 900;
    text-shadow:
        0 0 4px #f59e0b,
        0 0 9px rgba(250, 204, 21, 0.7);
    animation: evolution-gold-shine 900ms ease-in-out infinite alternate;
}

@keyframes evolution-gold-shine {
    from { color: #facc15; }
    to { color: #fff7ae; }
}

.catalog-copy em {
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 900;
}

.catalog-count-summary {
    position: relative;
    display: inline-flex;
    margin-top: 6px;
    color: var(--accent);
    font-weight: 900;
}

.catalog-progress-summaries {
    display: grid;
    justify-items: start;
}

.catalog-count-summary.evolved-count-summary {
    color: #fde68a;
    text-shadow:
        0 0 4px #f59e0b,
        0 0 9px rgba(250, 204, 21, 0.7);
    animation: evolution-gold-shine 900ms ease-in-out infinite alternate;
}

.catalog-count-summary.evolved-count-summary .catalog-count-breakdown {
    text-shadow: none;
    animation: none;
}

.catalog-count-breakdown {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 3;
    display: none;
    min-width: 280px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #071017;
    color: var(--text);
    box-shadow: 0 16px 36px rgba(0,0,0,0.36);
}

.catalog-count-breakdown div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    white-space: nowrap;
}

.catalog-count-breakdown div + div {
    margin-top: 5px;
}

.catalog-count-breakdown strong {
    min-width: 82px;
}

.catalog-count-summary:hover .catalog-count-breakdown,
.catalog-count-summary:focus .catalog-count-breakdown,
.catalog-count-summary:focus-within .catalog-count-breakdown {
    display: block;
}

.catalog-filters {
    display: flex;
    gap: 8px;
    align-items: end;
}

.catalog-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    white-space: nowrap;
}

.catalog-toggle input {
    width: 15px;
    height: 15px;
    margin: 0;
}

.catalog-search-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 12px;
}

.catalog-search {
    position: relative;
    z-index: 2;
    grid-template-columns: auto minmax(160px, 300px);
    align-items: center;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    margin: 0;
}

.catalog-search input {
    min-width: 0;
}

.catalog-search-row .compact-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.rarity-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 9px;
    min-width: 0;
    margin: 0;
    padding: 7px 9px 8px;
    border: 1px solid var(--line);
}

.rarity-checkboxes legend {
    padding: 0 4px;
    color: var(--muted);
    font-size: 0.7rem;
}

.rarity-checkboxes label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 0.7rem;
    white-space: nowrap;
}

.rarity-checkboxes input {
    width: 14px;
    height: 14px;
    margin: 0;
}

.catalog-rarity-checkboxes {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    width: max-content;
    max-width: none;
    padding-right: 16px;
    column-gap: 12px;
}

.catalog-rarity-checkboxes label,
.catalog-zone-checkboxes label {
    font-size: 0.62rem;
}

.catalog-count-summary {
    font-size: 0.76rem;
}

.rarity-common {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.45);
}

.rarity-uncommon {
    color: var(--uncommon) !important;
    border-color: var(--uncommon);
}

.rarity-rare {
    color: var(--rare) !important;
    border-color: var(--rare);
}

.rarity-epic {
    color: var(--epic) !important;
    border-color: var(--epic);
}

.rarity-legendary {
    color: var(--legendary) !important;
    border-color: var(--legendary);
}

.rarity-mythical {
    color: var(--mythical) !important;
    border-color: var(--mythical);
    text-shadow: 0 0 10px rgba(255, 59, 59, 0.7);
}

.rarity-eternal {
    background: linear-gradient(90deg, #f97316, #facc15, #fff7ad, #f97316);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    border-color: #facc15;
    -webkit-text-stroke: 0.15px rgba(255, 247, 173, 0.5);
    text-shadow:
        0 0 2px rgba(250, 204, 21, 0.58),
        0 1px 1px rgba(124, 45, 18, 0.45);
    animation: shiny-flow 2.8s linear infinite;
}

.shiny-text {
    background:
        linear-gradient(90deg, #ff5f6d, #ffc371, #7bed9f, #70a1ff, #c56cf0, #ff5f6d);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: shiny-flow 2.4s linear infinite;
}

.shiny-card {
    box-shadow: 0 0 18px rgba(255,255,255,0.18);
}

.perfect-fish-text {
    color: #fff !important;
    font-style: normal;
    font-weight: 900;
    text-shadow:
        0 0 2px #fff,
        0 0 7px rgba(226, 232, 240, 0.95),
        0 0 13px rgba(148, 163, 184, 0.72);
    animation: perfect-fish-shine 1.45s ease-in-out infinite alternate;
}

.perfect-card {
    box-shadow:
        inset 0 0 12px rgba(255, 255, 255, 0.14),
        0 0 13px rgba(226, 232, 240, 0.24);
}

.catalog-perfect-pillars {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    pointer-events: none;
}

.catalog-perfect-pillars::before,
.catalog-perfect-pillars::after {
    content: "";
    position: absolute;
    top: 14%;
    bottom: 14%;
    width: 4px;
    border-radius: 4px;
    background:
        linear-gradient(180deg, transparent, #fff 18%, #cbd5e1 50%, #fff 82%, transparent);
    box-shadow:
        0 0 4px #fff,
        0 0 10px rgba(226, 232, 240, 0.92);
    animation: perfect-pillar-sparkle 1.6s ease-in-out infinite alternate;
}

.catalog-perfect-pillars::before {
    left: 2px;
}

.catalog-perfect-pillars::after {
    right: 2px;
    animation-delay: -0.8s;
}

.foil-text {
    color: #72ddff !important;
    font-style: normal;
    font-weight: 800;
    text-shadow:
        0 0 3px rgba(186, 230, 253, 0.95),
        0 0 8px rgba(14, 165, 233, 0.72);
    animation: foil-sparkle 1.35s ease-in-out infinite alternate;
}

.foil-card {
    box-shadow:
        inset 0 0 12px rgba(56, 189, 248, 0.14),
        0 0 10px rgba(14, 165, 233, 0.16);
}

.pet-hatch-text,
.pet-egg-text {
    font-weight: 900;
}

.pet-hatch-text {
    color: #f0abfc;
    text-shadow: 0 0 6px rgba(217, 70, 239, 0.55);
}

.pet-egg-text {
    color: #a7f3d0;
    text-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

@keyframes foil-sparkle {
    from {
        filter: brightness(0.9);
        text-shadow:
            0 0 2px rgba(186, 230, 253, 0.7),
            0 0 5px rgba(14, 165, 233, 0.45);
    }
    to {
        filter: brightness(1.25);
        text-shadow:
            0 0 4px rgba(255, 255, 255, 0.95),
            0 0 11px rgba(14, 165, 233, 0.85);
    }
}

@keyframes perfect-fish-shine {
    from {
        filter: brightness(0.92);
    }
    to {
        filter: brightness(1.25);
    }
}

@keyframes perfect-pillar-sparkle {
    from {
        opacity: 0.5;
        transform: scaleY(0.92);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes shiny-flow {
    to { background-position: 240% 0; }
}

.shop-list h3 {
    margin: 12px 0 0;
    color: var(--accent);
    font-size: 0.9rem;
}

.shop-complete-message {
    display: grid;
    min-height: 92px;
    place-items: center;
    padding: 16px;
    border: 1px dashed rgba(52, 211, 153, 0.42);
    background: rgba(52, 211, 153, 0.07);
    color: #bbf7d0;
    font-weight: 900;
    text-align: center;
}

.shop-bulk-control {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px;
    border: 1px solid var(--line);
    background: #071017;
}

.chat-log,
.activity-log {
    height: 150px;
    min-height: 150px;
    max-height: 150px;
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--line);
    background: #0b141c;
}

.chat-log {
    overflow-x: hidden;
}

.chat-entry {
    display: grid;
    min-width: 0;
    gap: 2px;
    margin-bottom: 9px;
}

.chat-entry > div {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.chat-entry time {
    color: var(--muted);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
}

.chat-system-entry {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    padding: 5px 7px;
    border-left: 2px solid rgba(125, 211, 252, 0.45);
    background: rgba(125, 211, 252, 0.06);
    font-size: 0.78rem;
    font-style: italic;
}

.chat-entry span,
.activity-entry {
    color: #d8edf8;
    line-height: 1.35;
}

.chat-entry span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.activity-entry {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin-bottom: 8px;
    font-size: 0.78rem;
}

.activity-time {
    color: var(--muted);
    font-size: 0.64rem;
    white-space: nowrap;
}

.activity-message {
    min-width: 0;
    overflow-wrap: anywhere;
}

.activity-pond-streak-broken .activity-message {
    color: #f87171;
    font-weight: 900;
}

.menu-buttons {
    display: grid;
    gap: 0;
}

.menu-buttons button {
    width: 100%;
    min-height: 56px;
    border-radius: 0;
    font-size: 1.08rem;
}

.view-menu-section {
    margin: -16px -16px 0;
}

.menu-buttons button + button {
    border-top-width: 0;
}

.menu-buttons button.active {
    border-color: var(--accent);
    background: #24516a;
    box-shadow: inset 4px 0 0 var(--accent);
    color: #ffffff;
}

.menu-buttons #equipmentButton,
.menu-buttons #petsButton {
    position: relative;
}

.menu-buttons #equipmentButton.has-new-equipment::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-radius: 50%;
    background: #facc15;
    box-shadow: 0 0 7px rgba(250, 204, 21, 0.72);
    vertical-align: 1px;
}

.equipment-full-label,
.result-banner .equipment-full-status {
    color: #fb7185;
    font-weight: 900;
}

.equipment-full-label {
    margin-left: 4px;
}

.menu-buttons #petsButton.has-new-pet::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-radius: 50%;
    background: #facc15;
    box-shadow: 0 0 7px rgba(250, 204, 21, 0.72);
    vertical-align: 1px;
}

.modal-shell[hidden] {
    display: none;
}

.modal-shell {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 18px;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 10, 16, 0.72);
    backdrop-filter: blur(4px);
}

.book-modal {
    position: relative;
    width: min(980px, 100%);
    max-height: min(820px, calc(100vh - 36px));
    overflow: auto;
    padding: 18px;
    border: 1px solid rgba(250, 204, 21, 0.34);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(250,204,21,0.06), transparent 50%, rgba(125,211,252,0.06)),
        #10202b;
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.48);
}

.reward-opening-shell {
    z-index: 100;
}

#sellAllSettingsModal {
    z-index: 90;
}

.reward-opening-modal {
    position: relative;
    width: min(900px, 100%);
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, 0.5);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(35, 65, 79, 0.95), rgba(8, 18, 25, 0.98));
    box-shadow:
        0 28px 100px rgba(0, 0, 0, 0.72),
        inset 0 1px rgba(255, 255, 255, 0.08);
}

.reward-opening-modal > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(125, 211, 252, 0.22);
    background: rgba(3, 10, 16, 0.42);
}

.reward-opening-modal > header span {
    display: block;
    color: #7dd3fc;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.reward-opening-modal > header h2 {
    margin: 3px 0 0;
    font-size: 1.35rem;
}

.reward-opening-modal > header button {
    min-width: 74px;
}

.reward-reel-window {
    position: relative;
    height: 252px;
    overflow: hidden;
    border-block: 1px solid rgba(255, 255, 255, 0.06);
    background:
        linear-gradient(90deg, rgba(2, 8, 12, 0.94), transparent 16%, transparent 84%, rgba(2, 8, 12, 0.94)),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 8px, transparent 8px 16px),
        #09141c;
}

.reward-reel-window::before,
.reward-reel-window::after {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    width: 17%;
    pointer-events: none;
}

.reward-reel-window::before {
    left: 0;
    background: linear-gradient(90deg, #071017, transparent);
}

.reward-reel-window::after {
    right: 0;
    background: linear-gradient(-90deg, #071017, transparent);
}

.reward-reel-marker {
    position: absolute;
    z-index: 6;
    inset: 0 auto 0 50%;
    width: 2px;
    transform: translateX(-1px);
    background: linear-gradient(180deg, #facc15 0 16px, transparent 16px calc(100% - 16px), #facc15 calc(100% - 16px));
    filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.9));
    pointer-events: none;
}

.reward-reel-track {
    position: absolute;
    top: 26px;
    left: 0;
    display: flex;
    gap: 10px;
    width: max-content;
    will-change: transform;
}

.reward-reel-card {
    display: grid;
    grid-template-rows: 84px minmax(38px, auto) 20px 18px;
    place-items: center;
    width: 170px;
    height: 200px;
    flex: 0 0 170px;
    padding: 14px 10px 10px;
    overflow: hidden;
    border: 2px solid rgba(226, 232, 240, 0.34);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 55%),
        #132530;
    box-shadow: inset 0 -4px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.reward-reel-card.rarity-uncommon { border-color: rgba(74, 222, 128, 0.64); }
.reward-reel-card.rarity-rare { border-color: rgba(96, 165, 250, 0.72); }
.reward-reel-card.rarity-epic { border-color: rgba(192, 132, 252, 0.76); }
.reward-reel-card.rarity-legendary { border-color: rgba(250, 204, 21, 0.8); }
.reward-reel-card.rarity-mythical { border-color: rgba(248, 113, 113, 0.86); }
.reward-reel-card.rarity-eternal { border-color: rgba(251, 146, 60, 0.92); }

.reward-reel-card.shiny-pet {
    border: 2px solid transparent;
    background:
        linear-gradient(#132530, #132530) padding-box,
        linear-gradient(90deg, #ff5f6d, #ffc371, #7bed9f, #70a1ff, #c56cf0, #ff5f6d) border-box;
    background-size: 100% 100%, 240% 100%;
    animation: shiny-flow 2.4s linear infinite;
}

.reward-reel-card strong {
    align-self: center;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
    line-height: 1.15;
}

.reward-reel-card > span,
.reward-reel-card > small {
    font-size: 0.74rem;
}

.reward-reel-card .equipment-icon {
    width: 66px;
    height: 66px;
    font-size: 2rem;
}

.reward-reel-card .pet-icon {
    transform: scale(1.18);
}

.reward-reel-card.reward-reel-pet {
    grid-template-rows: 82px minmax(48px, auto);
    align-content: start;
}

.reward-reel-card.reward-reel-pet strong {
    transform: translateY(-5px);
}

.reward-opening-shell.settled .reward-reel-winner {
    animation: reward-winner-pulse 1.1s ease-in-out infinite alternate;
}

.reward-opening-result {
    display: flex;
    min-height: 96px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 18px;
    color: #94a3b8;
    text-align: center;
}

.reward-opening-result.revealed {
    flex-wrap: wrap;
    color: #e2e8f0;
}

.reward-opening-result > strong {
    width: 100%;
    color: #f8fafc;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.reward-opening-result > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reward-opening-result .equipment-icon {
    width: 38px;
    height: 38px;
}

.reward-opening-result .pet-icon {
    transform: scale(0.78);
    margin: -10px;
}

.reward-opening-extra {
    padding-left: 12px;
    border-left: 1px solid rgba(148, 163, 184, 0.28);
    font-size: 0.84rem;
}

@keyframes reward-winner-pulse {
    from {
        box-shadow: inset 0 -4px rgba(0, 0, 0, 0.2), 0 0 8px rgba(250, 204, 21, 0.26);
    }
    to {
        box-shadow: inset 0 -4px rgba(0, 0, 0, 0.2), 0 0 24px rgba(250, 204, 21, 0.72);
    }
}

@media (max-width: 620px) {
    .training-buff-comparison,
    .training-session-grid {
        grid-template-columns: 1fr;
    }

    .pet-rename-row {
        grid-template-columns: 1fr;
    }

    .reward-opening-shell {
        padding: 10px;
    }

    .reward-reel-window {
        height: 224px;
    }

    .reward-reel-track {
        top: 22px;
    }

    .reward-reel-card {
        grid-template-rows: 72px minmax(34px, auto) 18px 16px;
        width: 146px;
        height: 180px;
        flex-basis: 146px;
        padding-inline: 8px;
    }

    .reward-opening-result {
        min-height: 112px;
    }

    .reward-opening-extra {
        width: 100%;
        padding: 4px 0 0;
        border: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reward-reel-track {
        transition-duration: 1.2s !important;
    }

    .reward-opening-shell.settled .reward-reel-winner {
        animation: none;
        box-shadow: 0 0 18px rgba(250, 204, 21, 0.58);
    }
}

.compact-book {
    width: min(720px, 100%);
}

.shop-modal {
    width: min(1120px, 100%);
}

.equipment-modal {
    width: min(1180px, 100%);
}

.shop-tabs {
    display: block;
}

.shop-category-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 12px;
}

.shop-category-tabs button {
    width: 100%;
    min-width: 0;
    height: 58px;
    min-height: 58px;
    padding: 8px 12px;
    border-color: rgba(125, 211, 252, 0.34);
    border-radius: 0;
    background: #132936;
    font-size: 1.05rem;
}

.shop-category-tabs button + button {
    border-left-width: 0;
}

.shop-category-tabs button.active {
    border-color: var(--accent);
    background: #24516a;
    box-shadow:
        inset 0 0 0 2px rgba(125, 211, 252, 0.2),
        0 5px 14px rgba(0, 0, 0, 0.24);
}

.shop-tabs .shop-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    align-content: start;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    background: rgba(7, 16, 23, 0.42);
}

.shop-tabs .shop-list[hidden] {
    display: none !important;
}

.shop-tabs .shop-list > h3,
.shop-tabs .shop-list > .shop-bulk-control,
.shop-tabs .shop-list > .shop-complete-message {
    grid-column: 1 / -1;
}

#baitShop {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

#baitShop .bait-item {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px;
    min-height: 0;
    padding: 7px;
}

#baitShop .bait-item::before {
    width: 32px;
    height: 32px;
}

#baitShop .bait-item strong {
    font-size: 0.74rem;
    line-height: 1.15;
}

#baitShop .bait-item small {
    font-size: 0.61rem;
    line-height: 1.2;
}

#baitShop .bait-item > b {
    font-size: 0.68rem;
}

#baitShop .bait-item > button {
    width: min(108px, 100%);
    min-height: 32px;
    padding: 0 7px;
    font-size: 0.7rem;
}

.shop-notice {
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 10px 12px;
    border: 1px solid rgba(251, 113, 133, 0.45);
    background: rgba(251, 113, 133, 0.12);
    color: #fecdd3;
    font-weight: 800;
}

.shop-notice.good {
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(52, 211, 153, 0.12);
    color: #bbf7d0;
}

.aquarium-modal {
    width: min(1120px, 100%);
}

.aquarium-owner-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.aquarium-owner-header h2 {
    margin: 0;
}

.aquarium-fish-summary {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 92px;
    padding: 6px 11px;
    border: 1px solid rgba(125, 211, 252, 0.34);
    border-radius: 7px;
    background: rgba(15, 27, 37, 0.88);
    color: var(--text);
    cursor: default;
}

.aquarium-fish-summary > span {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.aquarium-fish-summary > span strong {
    color: #bae6fd;
    font-size: 1.45rem;
    line-height: 1;
}

.aquarium-fish-summary > span span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.aquarium-fish-breakdown {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 20;
    display: none;
    width: max-content;
    min-width: 190px;
    max-width: 300px;
    max-height: 260px;
    overflow: auto;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #071017;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}

.aquarium-fish-breakdown .aquarium-breakdown-title {
    display: block;
    margin-bottom: 5px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: 0.78rem;
}

.aquarium-fish-breakdown div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 3px 0;
}

.aquarium-fish-summary:hover .aquarium-fish-breakdown,
.aquarium-fish-summary:focus .aquarium-fish-breakdown,
.aquarium-fish-summary:focus-within .aquarium-fish-breakdown {
    display: block;
}

.aquarium-viewer {
    position: relative;
}

.aquarium-cycle {
    position: absolute;
    top: 50%;
    z-index: 12;
    display: grid;
    place-items: center;
    width: 42px;
    min-height: 58px;
    padding: 0;
    border-color: rgba(255, 255, 255, 0.48);
    color: #fff;
    background: rgba(7, 16, 23, 0.72);
    font-size: 2rem;
    line-height: 1;
    transform: translateY(-50%);
}

.aquarium-cycle-previous {
    left: 12px;
}

.aquarium-cycle-next {
    right: 12px;
}

.aquarium-cycle:disabled {
    display: none;
}

.aquarium-tank {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border: 8px solid #10202b;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.22), transparent 28%),
        repeating-radial-gradient(circle at 40% 20%, transparent 0 30px, rgba(255,255,255,0.12) 31px 33px),
        linear-gradient(180deg, #31b8d8, #0e5578);
    box-shadow: inset 0 0 48px rgba(4, 30, 49, 0.28);
    contain: layout paint;
}

.aquarium-tank::before,
.aquarium-tank::after {
    content: "";
    position: absolute;
    left: -2%;
    width: 104%;
    pointer-events: none;
}

.aquarium-tank::before {
    bottom: 0;
    z-index: 1;
    height: 78px;
    background:
        radial-gradient(circle at 12% 55%, rgba(254,240,138,0.8) 0 3px, transparent 4px),
        radial-gradient(circle at 66% 72%, rgba(146,64,14,0.24) 0 4px, transparent 5px),
        linear-gradient(#e7b45c, #9a5d2f);
    clip-path: polygon(0 34%, 7% 20%, 15% 31%, 24% 13%, 34% 28%, 43% 16%, 53% 34%, 63% 14%, 72% 27%, 81% 11%, 91% 30%, 100% 18%, 100% 100%, 0 100%);
}

.aquarium-tank::after {
    bottom: -5px;
    z-index: 3;
    height: 48px;
    opacity: 0.72;
    background:
        radial-gradient(ellipse at 18% 60%, #d89a48 0 12px, transparent 13px),
        radial-gradient(ellipse at 74% 70%, #bd7b3c 0 15px, transparent 16px),
        linear-gradient(#d6a252, #88502d);
    clip-path: polygon(0 43%, 9% 25%, 19% 40%, 31% 18%, 42% 44%, 55% 22%, 67% 38%, 78% 16%, 89% 41%, 100% 23%, 100% 100%, 0 100%);
}

.aquarium-empty {
    position: absolute;
    inset: 42% 20px auto;
    padding: 12px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(7, 16, 23, 0.54);
    z-index: 5;
}

.aquarium-fish {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    will-change: transform;
    z-index: 4;
}

.aquarium-fish .fish-icon {
    border: 0;
    background: transparent;
}

.aquarium-fish.shiny-aquarium-fish .fish-icon {
    position: relative;
    z-index: 1;
    filter:
        drop-shadow(0 0 4px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 8px rgba(197, 108, 240, 0.72));
}

.aquarium-fish.shiny-aquarium-fish::after {
    content: "";
    position: absolute;
    inset: -11px;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff5f6d, #ffc371, #7bed9f, #70a1ff, #c56cf0, #ff5f6d);
    filter: blur(7px);
    opacity: 0.8;
    animation: shiny-rainbow-glow-spin 3s linear infinite;
}

.aquarium-fish.foil-aquarium-fish .fish-icon {
    filter:
        drop-shadow(0 0 4px rgba(125, 211, 252, 0.95))
        drop-shadow(0 0 8px rgba(14, 165, 233, 0.65));
}

.aquarium-fish.shiny-aquarium-fish.foil-aquarium-fish .fish-icon {
    filter:
        drop-shadow(0 0 4px rgba(255, 255, 255, 0.95))
        drop-shadow(0 0 7px rgba(197, 108, 240, 0.68))
        drop-shadow(0 0 10px rgba(14, 165, 233, 0.65));
}

.aquarium-fish.perfect-aquarium-fish .fish-icon {
    filter:
        drop-shadow(0 0 4px #fff)
        drop-shadow(0 0 9px rgba(226, 232, 240, 0.88));
}

.aquarium-fish.perfect-aquarium-fish::before {
    content: "";
    position: absolute;
    inset: -7px;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 42%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 88% 34%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 70% 88%, #e2e8f0 0 1px, transparent 2px);
    animation: aquarium-shiny-sparkle 1.25s ease-in-out infinite alternate;
}

@keyframes aquarium-shiny-sparkle {
    from { opacity: 0.35; }
    to { opacity: 1; }
}

@keyframes shiny-rainbow-glow-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.aquarium-decoration {
    position: absolute;
    min-width: 116px;
    min-height: 96px;
    display: grid;
    place-items: end center;
    color: rgba(255,255,255,0.76);
    font-size: 0.62rem;
    text-align: center;
    transform: translateX(-50%);
    z-index: 2;
}

.aquarium-decoration span {
    display: none;
}

.aquarium-decoration::before {
    content: "";
    display: block;
    width: 108px;
    height: 82px;
    margin: 0 auto 4px;
    border-radius: 8px;
    background: linear-gradient(145deg, #f472b6, #fb7185);
    filter: saturate(1.12) drop-shadow(0 8px 7px rgba(4, 17, 26, 0.3));
}

.aquarium-shop-item::before {
    content: "";
    display: block;
    width: 44px;
    height: 34px;
    margin: 0 auto 4px;
    border-radius: 8px;
    background: linear-gradient(145deg, #f472b6, #fb7185);
}

.decor-castle::before,
.decor-preview-castle::before {
    border-radius: 4px 4px 8px 8px;
    background:
        radial-gradient(circle at 50% 72%, #0f172a 0 7%, transparent 8%),
        radial-gradient(circle at 24% 45%, #dbeafe 0 4%, transparent 5%),
        radial-gradient(circle at 76% 45%, #dbeafe 0 4%, transparent 5%),
        repeating-linear-gradient(90deg, transparent 0 8%, rgba(15,23,42,0.35) 9% 11%, transparent 12% 20%),
        linear-gradient(90deg, #cbd5e1 0 18%, transparent 18% 28%, #cbd5e1 28% 45%, transparent 45% 55%, #cbd5e1 55% 72%, transparent 72% 82%, #cbd5e1 82%),
        linear-gradient(#94a3b8, #334155);
    border: 3px solid #475569;
    clip-path: polygon(0 14%, 12% 14%, 12% 0, 25% 0, 25% 14%, 39% 14%, 39% 0, 52% 0, 52% 14%, 66% 14%, 66% 0, 79% 0, 79% 14%, 100% 14%, 100% 100%, 0 100%);
}

.decor-treasure::before,
.decor-preview-treasure::before {
    background:
        radial-gradient(circle at 50% 58%, #fde68a 0 6%, transparent 7%),
        linear-gradient(90deg, transparent 45%, #facc15 46% 54%, transparent 55%),
        linear-gradient(#b45309 0 55%, #78350f 56%);
    border: 3px solid #451a03;
    border-radius: 42% 42% 8px 8px;
    box-shadow: inset 0 8px 0 #facc15, inset 0 -4px 0 rgba(0,0,0,0.22), 0 0 12px rgba(250,204,21,0.24);
}

.decor-wood::before,
.decor-preview-wood::before {
    border-radius: 999px 40% 999px 40%;
    background:
        repeating-linear-gradient(20deg, transparent 0 8px, rgba(254,215,170,0.22) 9px 11px),
        radial-gradient(circle at 18% 50%, #fed7aa 0 9%, transparent 10%),
        linear-gradient(135deg, #92400e, #451a03);
}

.decor-bubbles::before,
.decor-preview-bubbles::before {
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 70%, rgba(255,255,255,0.8) 0 5px, transparent 6px),
        radial-gradient(circle at 60% 45%, rgba(255,255,255,0.65) 0 7px, transparent 8px),
        radial-gradient(circle at 42% 22%, rgba(255,255,255,0.55) 0 4px, transparent 5px);
}

.decor-blueCoral::before,
.decor-preview-blueCoral::before {
    border-radius: 60% 40% 20% 20%;
    background:
        radial-gradient(circle at 30% 36%, #bfdbfe 0 10%, transparent 11%),
        radial-gradient(circle at 68% 24%, #38bdf8 0 9%, transparent 10%),
        radial-gradient(circle at 48% 58%, #60a5fa 0 12%, transparent 13%),
        linear-gradient(90deg, transparent 42%, #1d4ed8 43% 57%, transparent 58%),
        linear-gradient(135deg, #38bdf8, #1d4ed8);
    clip-path: polygon(8% 100%, 15% 55%, 3% 35%, 18% 28%, 29% 50%, 37% 7%, 52% 0, 55% 45%, 72% 18%, 84% 25%, 73% 58%, 94% 44%, 100% 60%, 83% 76%, 91% 100%);
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.42);
}

.decor-shell::before,
.decor-preview-shell::before {
    border-radius: 50% 50% 12px 12px;
    background:
        radial-gradient(circle at 50% 76%, #fff7ed 0 8%, transparent 9%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.32) 0 5px, transparent 6px 10px),
        linear-gradient(135deg, #f9a8d4, #fde68a);
}

.decor-rock::before,
.decor-preview-rock::before {
    border-radius: 45% 55% 35% 45%;
    background:
        radial-gradient(circle at 66% 34%, #f97316 0 9%, transparent 10%),
        radial-gradient(circle at 38% 62%, #ef4444 0 7%, transparent 8%),
        linear-gradient(135deg, #475569, #111827);
}

.decor-anchor::before,
.decor-preview-anchor::before {
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 11%, transparent 0 7%, #dbe4ec 8% 14%, transparent 15%),
        linear-gradient(63deg, transparent 0 42%, #94a3b8 43% 50%, transparent 51%) 15% 74% / 42% 28% no-repeat,
        linear-gradient(-63deg, transparent 0 42%, #94a3b8 43% 50%, transparent 51%) 85% 74% / 42% 28% no-repeat,
        linear-gradient(90deg, transparent 45%, #cbd5e1 46% 54%, transparent 55%),
        linear-gradient(0deg, transparent 57%, #cbd5e1 58% 66%, transparent 67%);
    border-bottom: 7px solid #64748b;
    clip-path: polygon(34% 0, 66% 0, 66% 16%, 57% 16%, 57% 40%, 86% 40%, 86% 50%, 65% 50%, 72% 69%, 100% 54%, 91% 92%, 58% 100%, 42% 100%, 9% 92%, 0 54%, 28% 69%, 35% 50%, 14% 50%, 14% 40%, 43% 40%, 43% 16%, 34% 16%);
    filter: drop-shadow(0 7px 2px rgba(15,23,42,0.4));
}

.decor-sign::before,
.decor-preview-sign::before {
    border-radius: 4px;
    background:
        linear-gradient(0deg, transparent 38%, rgba(254,240,138,0.58) 39% 52%, transparent 53%),
        linear-gradient(90deg, transparent 45%, #78350f 46% 54%, transparent 55%),
        linear-gradient(#a16207, #713f12);
}

.decor-plant::before,
.decor-preview-plant::before {
    border-radius: 60% 40% 20% 20%;
    background:
        radial-gradient(ellipse at 28% 66%, #16a34a 0 12%, transparent 13%),
        radial-gradient(ellipse at 52% 46%, #22c55e 0 16%, transparent 17%),
        radial-gradient(ellipse at 76% 68%, #15803d 0 12%, transparent 13%),
        linear-gradient(135deg, #22c55e, #0f766e);
    clip-path: polygon(4% 100%, 12% 42%, 25% 18%, 32% 67%, 47% 4%, 58% 60%, 77% 24%, 72% 72%, 96% 45%, 88% 100%);
}

.decor-coral::before,
.decor-preview-coral::before {
    border-radius: 60% 40% 20% 20%;
    background:
        radial-gradient(circle at 30% 36%, #f9a8d4 0 10%, transparent 11%),
        radial-gradient(circle at 68% 24%, #fb7185 0 9%, transparent 10%),
        radial-gradient(circle at 48% 58%, #f472b6 0 12%, transparent 13%),
        linear-gradient(90deg, transparent 42%, #be185d 43% 57%, transparent 58%),
        linear-gradient(135deg, #fb7185, #f472b6);
    clip-path: polygon(8% 100%, 15% 55%, 3% 35%, 18% 28%, 29% 50%, 37% 7%, 52% 0, 55% 45%, 72% 18%, 84% 25%, 73% 58%, 94% 44%, 100% 60%, 83% 76%, 91% 100%);
}

.decor-sand::before,
.decor-preview-sand::before {
    border-radius: 50% 50% 12px 12px;
    background:
        radial-gradient(circle at 25% 55%, #fef3c7 0 5%, transparent 6%),
        radial-gradient(circle at 54% 28%, #fde68a 0 4%, transparent 5%),
        radial-gradient(circle at 74% 64%, #facc15 0 4%, transparent 5%),
        linear-gradient(145deg, #fbbf24, #a16207);
}

.decor-light::before,
.decor-preview-light::before {
    border-radius: 50% 50% 12px 12px;
    background:
        radial-gradient(circle at 50% 34%, #fef3c7 0 22%, #fde68a 23% 34%, transparent 35%),
        radial-gradient(circle at 48% 22%, transparent 0 18%, #e5e7eb 19% 25%, transparent 26%),
        linear-gradient(90deg, transparent 44%, #94a3b8 45% 55%, transparent 56%);
    box-shadow: 0 0 22px rgba(250, 204, 21, 0.42);
}

.decor-crystal::before,
.decor-preview-crystal::before {
    background:
        linear-gradient(135deg, transparent 0 23%, rgba(255,255,255,0.62) 24% 27%, transparent 28%),
        radial-gradient(ellipse at 50% 70%, #22d3ee 0 18%, transparent 19%),
        linear-gradient(120deg, #38bdf8 0 35%, #a78bfa 36% 62%, #67e8f9 63%);
    clip-path: polygon(48% 0, 68% 28%, 91% 18%, 82% 77%, 100% 100%, 0 100%, 18% 61%, 23% 20%);
    box-shadow: 0 0 22px rgba(125, 211, 252, 0.58);
}

.decor-crystalReef::before,
.decor-preview-crystalReef::before {
    border-radius: 70% 8% 70% 18%;
    background:
        linear-gradient(45deg, transparent 0 28%, rgba(255,255,255,0.75) 29% 34%, transparent 35%),
        radial-gradient(ellipse at 64% 32%, #e0f2fe 0 7%, transparent 8%),
        linear-gradient(135deg, #22d3ee 0 35%, #818cf8 36% 68%, #0e7490 69%);
    clip-path: polygon(5% 84%, 28% 55%, 18% 16%, 49% 39%, 76% 0, 69% 48%, 100% 55%, 67% 70%, 54% 100%, 38% 72%);
    transform: rotate(-8deg);
    box-shadow: 0 0 28px rgba(34, 211, 238, 0.62);
}

.decor-moonLantern::before,
.decor-preview-moonLantern::before {
    border-radius: 50% 50% 18px 18px;
    background:
        radial-gradient(circle at 62% 34%, #0f1b25 0 15%, transparent 16%),
        radial-gradient(circle at 50% 38%, #fef3c7 0 30%, #fde68a 31% 42%, transparent 43%),
        linear-gradient(90deg, transparent 42%, #94a3b8 43% 57%, transparent 58%);
    border: 4px solid #64748b;
    clip-path: polygon(34% 0, 66% 0, 66% 10%, 78% 20%, 88% 100%, 12% 100%, 22% 20%, 34% 10%);
    box-shadow: 0 0 34px rgba(253, 230, 138, 0.72);
}

.decor-bridge::before,
.decor-preview-bridge::before {
    border: 5px solid #64748b;
    border-bottom: 0;
    border-radius: 55% 55% 8px 8px;
    background:
        radial-gradient(ellipse at 50% 100%, transparent 0 34%, #334155 35% 42%, transparent 43%),
        repeating-linear-gradient(90deg, #94a3b8 0 14%, #475569 15% 18%);
    clip-path: polygon(0 35%, 15% 20%, 35% 8%, 50% 4%, 65% 8%, 85% 20%, 100% 35%, 100% 100%, 70% 100%, 65% 62%, 50% 50%, 35% 62%, 30% 100%, 0 100%);
}

.decor-anemone::before,
.decor-preview-anemone::before {
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 18% 30%, #f0abfc 0 7%, transparent 8%),
        radial-gradient(ellipse at 38% 16%, #fb7185 0 8%, transparent 9%),
        radial-gradient(ellipse at 60% 25%, #c084fc 0 9%, transparent 10%),
        radial-gradient(ellipse at 82% 18%, #f9a8d4 0 7%, transparent 8%),
        radial-gradient(circle at 50% 70%, #be185d 0 23%, transparent 24%);
    filter: drop-shadow(0 0 12px rgba(244,114,182,0.5));
}

.decor-bell::before,
.decor-preview-bell::before {
    border-radius: 50% 50% 16% 16%;
    background:
        radial-gradient(circle at 50% 96%, #422006 0 8%, transparent 9%),
        linear-gradient(100deg, #78350f, #facc15 46%, #a16207);
    border-bottom: 8px solid #713f12;
    clip-path: polygon(42% 0, 58% 0, 61% 12%, 73% 24%, 91% 86%, 100% 93%, 0 93%, 9% 86%, 27% 24%, 39% 12%);
}

.decor-pagoda::before,
.decor-preview-pagoda::before {
    background:
        linear-gradient(90deg, transparent 42%, #fef3c7 43% 57%, transparent 58%),
        linear-gradient(0deg, #7f1d1d 0 12%, transparent 13% 35%, #dc2626 36% 43%, transparent 44% 68%, #f87171 69% 76%, transparent 77%);
    clip-path: polygon(4% 100%, 4% 91%, 22% 91%, 25% 77%, 8% 77%, 0 68%, 34% 68%, 38% 44%, 18% 44%, 9% 35%, 42% 35%, 46% 13%, 37% 13%, 50% 0, 63% 13%, 54% 13%, 58% 35%, 91% 35%, 82% 44%, 62% 44%, 66% 68%, 100% 68%, 92% 77%, 75% 77%, 78% 91%, 96% 91%, 96% 100%);
}

.decor-wheel::before,
.decor-preview-wheel::before {
    border: 9px solid #92400e;
    border-radius: 50%;
    background:
        linear-gradient(0deg, transparent 46%, #d97706 47% 53%, transparent 54%),
        linear-gradient(90deg, transparent 46%, #d97706 47% 53%, transparent 54%),
        linear-gradient(45deg, transparent 46%, #d97706 47% 53%, transparent 54%),
        linear-gradient(-45deg, transparent 46%, #d97706 47% 53%, transparent 54%);
    box-shadow: inset 0 0 0 7px #451a03;
}

.decor-conch::before,
.decor-preview-conch::before {
    border-radius: 72% 28% 60% 35%;
    background:
        repeating-radial-gradient(circle at 68% 48%, transparent 0 7px, rgba(190,24,93,0.35) 8px 10px),
        linear-gradient(130deg, #fff7ed, #f9a8d4 55%, #be185d);
    clip-path: polygon(0 65%, 18% 47%, 31% 6%, 70% 0, 100% 26%, 90% 73%, 55% 100%, 22% 91%);
}

.decor-jellyLamp::before,
.decor-preview-jellyLamp::before {
    border-radius: 50% 50% 34% 34%;
    background:
        linear-gradient(90deg, transparent 12%, rgba(255,255,255,0.5) 13% 17%, transparent 18% 36%, rgba(255,255,255,0.4) 37% 41%, transparent 42% 62%, rgba(255,255,255,0.5) 63% 67%, transparent 68%),
        radial-gradient(ellipse at 50% 34%, #e0f2fe 0 28%, #67e8f9 29% 44%, transparent 45%);
    filter: drop-shadow(0 0 16px rgba(103,232,249,0.68));
}

.decor-dragon::before,
.decor-preview-dragon::before {
    background:
        radial-gradient(circle at 67% 25%, #fef08a 0 3%, transparent 4%),
        linear-gradient(120deg, #14532d, #22c55e 52%, #166534);
    clip-path: polygon(3% 100%, 18% 70%, 8% 43%, 29% 52%, 39% 28%, 58% 38%, 69% 6%, 93% 0, 83% 22%, 100% 37%, 79% 43%, 71% 70%, 91% 100%, 57% 86%, 34% 100%);
}

.decor-rainbowReef::before,
.decor-preview-rainbowReef::before {
    background:
        radial-gradient(circle at 25% 35%, #f472b6 0 10%, transparent 11%),
        radial-gradient(circle at 55% 18%, #facc15 0 11%, transparent 12%),
        radial-gradient(circle at 76% 43%, #38bdf8 0 12%, transparent 13%),
        linear-gradient(110deg, #ef4444, #f59e0b 24%, #22c55e 48%, #3b82f6 72%, #a855f7);
    clip-path: polygon(5% 100%, 12% 48%, 27% 18%, 36% 63%, 49% 0, 61% 58%, 77% 22%, 72% 69%, 96% 42%, 88% 100%);
    filter: drop-shadow(0 0 12px rgba(192,132,252,0.48));
}

.decor-bottle::before,
.decor-preview-bottle::before {
    border: 4px solid rgba(186,230,253,0.72);
    border-radius: 18% 18% 30% 30%;
    background:
        radial-gradient(ellipse at 35% 75%, #4ade80 0 14%, transparent 15%),
        radial-gradient(ellipse at 66% 68%, #22c55e 0 17%, transparent 18%),
        linear-gradient(180deg, transparent 0 58%, rgba(14,116,144,0.36) 59%);
    clip-path: polygon(38% 0, 62% 0, 62% 20%, 73% 31%, 83% 100%, 17% 100%, 27% 31%, 38% 20%);
}

.decor-tablet::before,
.decor-preview-tablet::before {
    border: 5px solid #475569;
    border-radius: 48% 48% 8px 8px;
    background:
        linear-gradient(90deg, transparent 22%, #93c5fd 23% 27%, transparent 28% 47%, #93c5fd 48% 53%, transparent 54% 73%, #93c5fd 74% 78%, transparent 79%),
        repeating-linear-gradient(0deg, #64748b 0 12px, #334155 13px 16px);
    box-shadow: 0 0 14px rgba(147,197,253,0.3);
}

.decor-comet::before,
.decor-preview-comet::before {
    background:
        linear-gradient(145deg, transparent 0 34%, rgba(255,255,255,0.72) 35% 39%, transparent 40%),
        linear-gradient(120deg, #fde68a, #fb7185 42%, #a78bfa 72%, #22d3ee);
    clip-path: polygon(50% 0, 63% 27%, 100% 18%, 74% 48%, 93% 76%, 62% 68%, 48% 100%, 37% 69%, 4% 82%, 26% 51%, 0 28%, 38% 29%);
    filter: drop-shadow(0 0 18px rgba(251,191,36,0.66));
}

.decor-observatory::before,
.decor-preview-observatory::before {
    border-radius: 52% 52% 12% 12%;
    background:
        radial-gradient(circle at 50% 35%, transparent 0 25%, #e0f2fe 26% 31%, transparent 32%),
        linear-gradient(90deg, transparent 44%, #94a3b8 45% 55%, transparent 56%),
        linear-gradient(#38bdf8 0 48%, #334155 49%);
    border: 4px solid #64748b;
}

.decor-throne::before,
.decor-preview-throne::before {
    background:
        radial-gradient(circle at 20% 25%, #f9a8d4 0 8%, transparent 9%),
        radial-gradient(circle at 80% 25%, #fb7185 0 8%, transparent 9%),
        linear-gradient(120deg, #be185d, #fb7185 48%, #f9a8d4);
    clip-path: polygon(8% 100%, 8% 45%, 0 32%, 18% 22%, 31% 42%, 38% 0, 50% 28%, 62% 0, 69% 42%, 82% 22%, 100% 32%, 92% 45%, 92% 100%, 70% 100%, 67% 70%, 33% 70%, 30% 100%);
}

.decor-fountain::before,
.decor-preview-fountain::before {
    border-radius: 50% 50% 14% 14%;
    background:
        radial-gradient(ellipse at 50% 70%, #f8fafc 0 12%, transparent 13%),
        radial-gradient(ellipse at 50% 45%, transparent 0 21%, #67e8f9 22% 27%, transparent 28%),
        linear-gradient(90deg, transparent 46%, #f8fafc 47% 53%, transparent 54%);
    border-bottom: 10px solid #cbd5e1;
    filter: drop-shadow(0 0 12px rgba(103,232,249,0.52));
}

.decor-telescope::before,
.decor-preview-telescope::before {
    border-radius: 10px 50% 50% 10px;
    background:
        linear-gradient(90deg, #334155 0 15%, #facc15 16% 22%, #64748b 23% 72%, #93c5fd 73%);
    clip-path: polygon(4% 28%, 79% 10%, 100% 23%, 90% 50%, 100% 77%, 79% 90%, 4% 72%, 20% 56%, 20% 44%);
    transform: rotate(-16deg);
}

.decor-gate::before,
.decor-preview-gate::before {
    border: 8px solid #a78bfa;
    border-bottom: 0;
    border-radius: 50% 50% 0 0;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(34,211,238,0.75), rgba(76,29,149,0.42) 48%, transparent 49%);
    box-shadow: 0 0 22px rgba(167,139,250,0.64);
}

.decor-monument::before,
.decor-preview-monument::before {
    background:
        radial-gradient(circle at 67% 24%, #fef3c7 0 3%, transparent 4%),
        linear-gradient(120deg, #475569, #94a3b8 52%, #334155);
    clip-path: polygon(10% 100%, 17% 72%, 8% 50%, 28% 57%, 39% 29%, 59% 39%, 73% 4%, 94% 0, 83% 25%, 100% 42%, 78% 46%, 70% 73%, 89% 100%);
    filter: drop-shadow(0 8px 3px rgba(15,23,42,0.46));
}

.aquarium-shop-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 10px;
}

.aquarium-shop-item {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) minmax(88px, auto);
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    background: #0f1b25;
}

.aquarium-shop-item button {
    min-width: 88px;
    padding: 0 10px;
    white-space: nowrap;
}

.token-text {
    color: var(--tokens);
    font-weight: 900;
}

.aquarium-shop-item::before {
    margin: 0;
    width: 58px;
    height: 46px;
}

.aquarium-shop-item small {
    display: block;
    color: var(--muted);
}

.help-modal {
    width: min(1120px, 100%);
    max-width: 1120px;
}

.help-search {
    grid-template-columns: auto minmax(260px, 520px);
    align-items: center;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 12px;
}

.help-search input {
    min-width: 0;
}

.help-empty {
    margin: 18px 0 6px;
    padding: 18px;
    border: 1px dashed var(--line);
    color: var(--muted);
    text-align: center;
}

.help-grid article[hidden],
.help-empty[hidden] {
    display: none;
}

.help-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.help-grid article {
    display: grid;
    gap: 5px;
    min-height: 86px;
    padding: 12px;
    border: 1px solid var(--line);
    background:
        radial-gradient(circle at 100% 0, rgba(56,189,248,0.14), transparent 42px),
        #0f1b25;
}

.help-grid strong {
    color: var(--accent);
}

.help-grid span {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.35;
}

.equipment-slots {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.inventory-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.aquarium-list-controls {
    grid-template-columns: minmax(190px, 1.35fr) minmax(150px, 1fr);
}

.aquarium-sort-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 0;
    align-items: end;
}

.aquarium-sort-control label {
    margin: 0;
}

.aquarium-sort-control select {
    min-height: 42px;
    border-radius: 7px 0 0 7px;
}

.aquarium-order-button {
    width: 36px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-left-width: 0;
    border-radius: 0 7px 7px 0;
    font-size: 1.05rem;
}

.aquarium-order-button.reversed {
    border-color: rgba(250, 204, 21, 0.55);
    color: #fde68a;
    background: rgba(113, 63, 18, 0.42);
}

.equipment-slot,
.equipment-cell {
    position: relative;
    display: grid;
    gap: 6px;
    min-height: 112px;
    padding: 10px;
    border: 1px solid var(--line);
    background: #0f1b25;
}

.equipment-slot {
    gap: 4px;
    min-height: 94px;
    padding: 7px;
}

.equipment-slot > span {
    font-size: 0.66rem;
}

.equipment-slot > strong {
    font-size: 0.76rem;
    line-height: 1.15;
}

.equipment-slot > small {
    font-size: 0.64rem;
    line-height: 1.18;
}

.delete-equipment {
    position: absolute;
    right: -1px;
    bottom: -1px;
    top: auto;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    min-height: 32px !important;
    padding: 0;
    border-radius: 0;
    border-color: rgba(251, 113, 133, 0.5);
    color: #fecdd3;
    background: rgba(127, 29, 29, 0.55);
}

.equipment-lock-button {
    position: absolute;
    right: auto;
    bottom: -1px;
    left: -1px;
    z-index: 3;
    width: 32px;
    height: 32px;
    min-height: 32px !important;
    border-radius: 0;
}

.equipment-slot span,
.equipment-cell span,
.equipment-slot small,
.equipment-cell small {
    color: var(--muted);
}

.equipment-slot strong,
.equipment-cell strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.equipment-slot button,
.equipment-cell button {
    align-self: end;
    min-height: 30px;
    padding: 0 8px;
    font-size: 0.78rem;
}

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: minmax(132px, 152px);
    align-content: start;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}

.equipment-cell {
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    min-height: 132px;
    gap: 4px;
    padding: 8px 8px 36px;
}

.equipment-cell-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.equipment-cell-header > .equipment-icon {
    flex: 0 0 auto;
}

.equipment-cell-header > strong {
    min-width: 0;
    padding-right: 14px;
    font-size: 0.76rem;
    line-height: 1.16;
}

.buff-list {
    display: grid;
    align-content: start;
    gap: 3px;
    min-width: 0;
}

.buff-list span {
    display: block;
    min-width: 0;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.equipment-cell > .buff-list {
    margin-bottom: 2px;
}

.equipment-cell > .buff-list span {
    font-size: 0.64rem;
    line-height: 1.14;
}

.equip-equipment-button {
    position: absolute;
    right: -1px;
    bottom: -1px;
    left: 30px;
    width: auto;
    min-height: 32px;
    border-radius: 0;
}

.equipment-cell:has(.delete-equipment) .equip-equipment-button {
    right: 31px;
}

.equipment-cell.empty-slot {
    place-items: center;
    color: var(--muted);
    opacity: 0.6;
}

.equipment-cell.locked-slot {
    place-items: center;
    border-style: dashed;
    color: #64748b;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(30, 41, 59, 0.72) 0 8px,
            rgba(15, 27, 37, 0.92) 8px 16px
        );
    text-align: center;
}

.equipment-cell.locked-slot small {
    max-width: 120px;
    line-height: 1.3;
}

.equipment-cell.new-equipment {
    border-color: rgba(250, 204, 21, 0.62);
    box-shadow:
        inset 0 0 0 1px rgba(250, 204, 21, 0.16),
        0 0 9px rgba(250, 204, 21, 0.1);
}

.equipment-cell.new-equipment::after {
    content: "";
    position: absolute;
    right: 7px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #facc15;
    box-shadow: 0 0 6px rgba(250, 204, 21, 0.72);
}

.equipment-cell.new-equipment .equipment-lock-button {
    right: 57px;
}

.equipment-cell.equipped-item {
    outline: 0;
    box-shadow:
        inset 0 0 0 2px #67e8f9,
        inset 0 0 0 3px rgba(103, 232, 249, 0.18),
        0 0 14px rgba(34, 211, 238, 0.2);
}

.equipment-cell.equipped-item::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 10;
    border: 2px solid #67e8f9;
    pointer-events: none;
}

.equipment-bulk-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px;
}

.equipment-modal > .book-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
}

.equipment-header-controls {
    grid-template-columns: repeat(2, 126px);
    gap: 6px;
    margin: 0;
}

.equipment-overclock-row {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.equipment-overclock-row button {
    pointer-events: auto;
}

.equipment-overclock-row button {
    padding: 6px 22px;
    border: 1px solid rgba(96, 165, 250, 0.55);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(15, 27, 37, 0.9));
    color: #dbeafe;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.equipment-overclock-row button:disabled {
    opacity: 0.55;
    cursor: default;
}

.overclocked-tag {
    grid-column: 1 / -1;
    font-style: normal;
    font-weight: 900;
    font-size: 0.72rem;
    text-align: center;
    background: linear-gradient(90deg, #38bdf8, #818cf8, #38bdf8);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
    animation: overclocked-shine 2.2s linear infinite;
}

@keyframes overclocked-shine {
    from { background-position: 0% 50%; }
    to { background-position: 220% 50%; }
}

.overclock-merge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    font-size: 0.8rem;
}

.overclock-merge-row button {
    padding: 6px 16px;
    border-radius: 6px;
    font-weight: 800;
}

.overclock-part-selected {
    outline: 2px solid #60a5fa;
    outline-offset: -2px;
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.45);
}

.overclock-warning {
    color: #fca5a5;
    font-weight: 800;
}

.overclock-warning strong {
    color: #fecaca;
    text-shadow: 0 0 6px rgba(248, 113, 113, 0.5);
}

@media (min-width: 761px) {
    .overclock-modal {
        min-height: 640px;
    }

    #overclockPartsGrid {
        min-height: 312px;
    }
}

.equipment-header-controls label {
    margin: 0;
    font-size: 0.68rem;
}

.equipment-header-controls select,
.equipment-search-group input,
.bulk-delete-group select {
    min-height: 34px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 0.76rem;
}

.equipment-search-group #reforgeButton,
.bulk-delete-group #bulkDeleteEquipmentButton {
    min-height: 34px;
    padding: 0 9px;
    font-size: 0.74rem;
}

.equipment-search-group {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
}

.equipment-search-group #reforgeButton {
    border-radius: 7px;
}

.equipment-search-group #equipmentSearch {
    width: min(310px, 36vw);
    min-width: 190px;
    border-radius: 7px;
}

.equipment-search-empty {
    grid-column: 1 / -1;
    padding: 24px;
    border: 1px dashed var(--line);
    border-radius: 6px;
    color: var(--muted);
    text-align: center;
}

.bulk-delete-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin-left: auto;
}

.bulk-delete-group select {
    width: min(210px, 42vw);
    border-radius: 7px 0 0 7px;
}

.bulk-delete-group #bulkDeleteEquipmentButton {
    border-left-width: 0;
    border-radius: 0 7px 7px 0;
}

.equipment-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, 0.35);
    border-radius: 50%;
    color: var(--accent);
    font-weight: 900;
}

.equipment-icon-image {
    display: block;
    width: 90%;
    height: 90%;
    object-fit: contain;
}

:is(
    .equipment-cell,
    .reward-reel-equipment,
    .reward-opening-result
) .equipment-icon {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

:is(
    .equipment-cell,
    .reward-reel-equipment,
    .reward-opening-result
) .equipment-icon-image {
    width: 100%;
    height: 100%;
    filter:
        drop-shadow(0 0 2px var(--equipment-icon-glow, rgba(255, 255, 255, 0.34)))
        drop-shadow(0 0 5px var(--equipment-icon-glow-soft, rgba(255, 255, 255, 0.16)));
}

:is(
    .equipment-cell,
    .reward-reel-equipment,
    .reward-opening-result
) .equipment-icon-image[src$="/trousers.png"] {
    width: 82%;
    height: 82%;
    transform: translateY(-8px);
}

:is(
    .equipment-cell,
    .reward-reel-equipment,
    .reward-opening-result
) .equipment-icon-image[src$="/shirt.png"] {
    width: 108%;
    height: 108%;
}

.equipment-cell .equipment-icon-image[src$="/ring.png"] {
    width: 88%;
    height: 88%;
    transform: translateY(-4px);
}

.equipment-cell .equipment-icon-image[src$="/pendant.png"] {
    transform: translateY(-4px);
}

:is(.equipment-cell, .reward-reel-equipment).rarity-common,
.reward-opening-result[data-equipment-rarity="Common"] {
    --equipment-icon-glow: rgba(255, 255, 255, 0.38);
    --equipment-icon-glow-soft: rgba(255, 255, 255, 0.16);
}

:is(.equipment-cell, .reward-reel-equipment).rarity-uncommon,
.reward-opening-result[data-equipment-rarity="Uncommon"] {
    --equipment-icon-glow: rgba(74, 222, 128, 0.48);
    --equipment-icon-glow-soft: rgba(74, 222, 128, 0.2);
}

:is(.equipment-cell, .reward-reel-equipment).rarity-rare,
.reward-opening-result[data-equipment-rarity="Rare"] {
    --equipment-icon-glow: rgba(96, 165, 250, 0.54);
    --equipment-icon-glow-soft: rgba(96, 165, 250, 0.22);
}

:is(.equipment-cell, .reward-reel-equipment).rarity-epic,
.reward-opening-result[data-equipment-rarity="Epic"] {
    --equipment-icon-glow: rgba(192, 132, 252, 0.56);
    --equipment-icon-glow-soft: rgba(192, 132, 252, 0.24);
}

:is(.equipment-cell, .reward-reel-equipment).rarity-legendary,
.reward-opening-result[data-equipment-rarity="Legendary"] {
    --equipment-icon-glow: rgba(250, 204, 21, 0.58);
    --equipment-icon-glow-soft: rgba(250, 204, 21, 0.26);
}

:is(.equipment-cell, .reward-reel-equipment).rarity-mythical,
.reward-opening-result[data-equipment-rarity="Mythical"] {
    --equipment-icon-glow: rgba(248, 113, 113, 0.62);
    --equipment-icon-glow-soft: rgba(239, 68, 68, 0.28);
}

:is(.equipment-cell, .reward-reel-equipment).rarity-eternal,
.reward-opening-result[data-equipment-rarity="Eternal"] {
    --equipment-icon-glow: rgba(251, 146, 60, 0.66);
    --equipment-icon-glow-soft: rgba(250, 204, 21, 0.3);
}

.pets-modal {
    width: min(1040px, 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pets-modal > .book-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.pet-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}

.pet-header-actions button {
    min-height: 42px;
    padding: 0 13px;
    font-size: 0.88rem;
    font-weight: 900;
}

.pets-modal > .book-header > button:last-child {
    justify-self: end;
}

.pet-title-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.pet-title-line h2 {
    margin: 0;
}

.pet-title-line > .muted {
    font-size: 0.76rem;
    white-space: nowrap;
}

.pet-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.75fr);
    gap: 10px;
    margin-bottom: 10px;
}

.pet-equipped {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 62px;
    margin: 0;
    padding: 7px 9px;
    border: 1px solid rgba(192, 132, 252, 0.4);
    background: rgba(88, 28, 135, 0.16);
}

.pet-overview.merge-mode-active .pet-equipped {
    min-height: 0;
}

.pet-equipped > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.pet-equipped > .pet-icon {
    grid-row: auto;
}

.pet-equipped strong,
.pet-equipped small {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.pet-equipped > button {
    align-self: center;
    min-width: 88px;
}

.pet-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: center;
    align-content: center;
    margin: 0;
    padding: 7px 9px;
    border: 1px solid rgba(125, 211, 252, 0.28);
    background: rgba(14, 85, 120, 0.12);
}

.pet-sort-control,
.pet-search-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    margin: 0;
    font-size: 0.78rem;
}

.pet-search-control {
    grid-template-columns: minmax(0, 1fr);
}

.pet-search-control input {
    width: 100%;
    min-width: 0;
}

.pet-inventory {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(180px, 195px);
    align-content: start;
    gap: 8px;
    max-height: 590px;
    padding: 2px 6px 2px 2px;
    overflow: hidden;
    min-height: 0;
}

.pet-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
    gap: 3px 6px;
    align-content: stretch;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 8px;
    border: 1px solid var(--line);
    background: #0f1b25;
}

.inventory-pagination {
    flex: 0 0 auto;
    justify-content: center;
    margin-top: 8px;
}

.inventory-pagination span {
    min-width: 104px;
    text-align: center;
}

.pet-card > strong,
.pet-card > span,
.pet-card > small,
.pet-card > .pet-xp {
    grid-column: 2;
}

.pet-card > .pet-actions {
    grid-column: 1 / -1;
    align-self: end;
    margin-top: 3px;
}

.pet-card > strong {
    font-size: 0.76rem;
    line-height: 1.15;
}

.pet-card > span,
.pet-card > small {
    font-size: 0.68rem;
    line-height: 1.15;
}

.pet-card > .buff-list {
    grid-column: 1 / -1;
    align-self: start;
    width: 100%;
    padding-top: 3px;
    border-top: 1px solid rgba(157, 180, 197, 0.16);
}

.pet-card > .buff-list span {
    font-size: 0.68rem;
    line-height: 1.15;
}

.keep-net-count {
    margin-left: 6px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.pet-actions {
    display: grid;
    grid-template-columns: 34px repeat(2, minmax(0, 1fr));
    gap: 4px;
    align-items: center;
    width: 100%;
    margin-top: 4px;
}

.pet-lock-button {
    width: 34px;
    min-width: 34px;
    padding: 5px;
}

.pet-card.shiny-pet {
    border: 2px solid transparent;
    background:
        linear-gradient(#0f1b25, #0f1b25) padding-box,
        linear-gradient(90deg, #ff5f6d, #ffc371, #7bed9f, #70a1ff, #c56cf0, #ff5f6d) border-box;
    background-size: 100% 100%, 240% 100%;
    animation: shiny-flow 2.4s linear infinite;
}

.pet-card.equipped-pet {
    box-shadow:
        inset 0 0 0 2px rgba(52, 211, 153, 0.58),
        0 0 9px rgba(52, 211, 153, 0.18);
}

.pet-icon {
    position: relative;
    grid-row: 1 / span 4;
    width: 48px;
    height: 48px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
    user-select: none;
}

.pet-icon::before,
.pet-icon::after {
    display: none;
}

.pet-shape-1,
.pet-shape-2,
.pet-shape-3,
.pet-shape-4,
.pet-shape-5 {
    border-radius: 0;
}

.pet-xp {
    height: 7px;
    overflow: hidden;
    border-radius: 3px;
    background: #071017;
}

.pet-xp i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #22d3ee);
}

.pet-actions button {
    min-width: 0;
    min-height: 30px;
    padding: 3px;
    overflow: hidden;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pet-actions .pet-lock-button {
    width: 34px;
}

.pet-merge-mode-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid rgba(192, 132, 252, 0.38);
    background: rgba(88, 28, 135, 0.14);
}

.pet-merge-mode-bar[hidden] {
    display: none;
}

.pet-merge-mode-bar label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.pet-merge-mode-bar label select {
    width: min(190px, 100%);
}

.pet-merge-mode-bar button {
    min-width: 96px;
}

.auto-merge-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(96, 165, 250, 0.38);
    background: rgba(30, 58, 138, 0.14);
    font-size: 0.78rem;
}

.auto-merge-panel[hidden] {
    display: none;
}

.auto-merge-label {
    font-weight: 900;
    color: #bfdbfe;
}

.auto-merge-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.auto-merge-checkboxes label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 0.76rem;
}

.auto-merge-checkboxes input {
    width: 14px;
    height: 14px;
    margin: 0;
}

.pet-actions .pet-select-button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 32px;
}

.pet-card.merge-mode-card {
    transition:
        border-color 120ms ease,
        opacity 120ms ease,
        box-shadow 120ms ease;
}

.pet-card.merge-ineligible {
    opacity: 0.48;
}

.pet-card.merge-selectable {
    border-color: rgba(125, 211, 252, 0.42);
}

.pet-card.merge-selected {
    border-color: #c084fc;
    box-shadow:
        inset 0 0 0 2px rgba(192, 132, 252, 0.72),
        0 0 10px rgba(192, 132, 252, 0.24);
}

.pet-card.new-pet {
    border-color: rgba(250, 204, 21, 0.7);
    outline: 2px solid rgba(250, 204, 21, 0.68);
    outline-offset: -2px;
    box-shadow:
        inset 0 0 0 1px rgba(250, 204, 21, 0.16),
        0 0 10px rgba(250, 204, 21, 0.14);
}

.pet-card.new-pet::after {
    content: "";
    position: absolute;
    right: 7px;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #facc15;
    box-shadow: 0 0 7px rgba(250, 204, 21, 0.78);
}

.pet-merge-result {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid rgba(250, 204, 21, 0.48);
    background:
        linear-gradient(110deg, rgba(250, 204, 21, 0.12), rgba(192, 132, 252, 0.12)),
        #0f1b25;
}

.pet-merge-result[hidden] {
    display: none;
}

.pet-merge-result > div {
    display: grid;
    gap: 3px;
}

.pet-merge-result > .pet-icon {
    grid-row: auto;
}

.pet-merge-result > div > span,
.pet-merge-result small {
    color: var(--muted);
}

.stats-launch {
    padding: 0;
    border: 0;
    background: transparent;
}

.stats-launch button {
    display: grid;
    width: 100%;
    gap: 2px;
    padding: 10px 12px;
    border-color: rgba(125, 211, 252, 0.34);
    text-align: left;
    background:
        linear-gradient(110deg, rgba(14, 165, 233, 0.16), rgba(139, 92, 246, 0.12)),
        #10202b;
}

.stats-launch strong {
    color: #bae6fd;
}

.stats-launch span {
    color: var(--muted);
    font-size: 0.72rem;
}

.stats-modal {
    width: min(1040px, 100%);
}

.stats-hero {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.stats-hero > div {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid rgba(125, 211, 252, 0.25);
    background: rgba(7, 16, 23, 0.56);
}

.stats-hero span,
.stat-tile span {
    color: var(--muted);
    font-size: 0.76rem;
}

.stats-hero strong {
    color: #facc15;
    font-size: 1.25rem;
}

.stats-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.stats-columns h3 {
    margin: 0 0 8px;
    color: var(--accent);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.stat-tile {
    display: grid;
    gap: 5px;
    min-height: 74px;
    padding: 10px;
    border: 1px solid var(--line);
    background: #0f1b25;
}

.stat-tile strong {
    color: #f8fafc;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .stats-hero,
    .stats-columns {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .phone-call-panel {
        grid-template-columns: 1fr 1fr;
    }

    .phone-call-panel > div {
        grid-column: 1 / -1;
        text-align: center;
    }

    .phone-call-panel button {
        min-width: 0;
        padding: 8px;
    }
}

@media (max-width: 440px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

.book-header,
.book-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.book-header h2,
.book-header p {
    margin: 0;
}

.book-header p {
    margin-top: 4px;
    color: var(--muted);
}

.book-controls {
    margin: 14px 0 0;
}

@media (min-width: 901px) {
    .catalog-modal {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        height: min(820px, calc(100vh - 36px));
        overflow: hidden;
        padding: 12px;
    }

    .catalog-modal .book-header {
        align-items: flex-start;
        margin-bottom: 8px;
    }

    .catalog-modal .book-header > button:last-child {
        align-self: flex-start;
    }

    .catalog-modal .catalog-grid {
        grid-template-rows: repeat(4, minmax(0, 1fr));
        min-height: 0;
        gap: 6px;
    }

    .catalog-modal .catalog-card {
        min-height: 0;
        padding: 6px;
        gap: 6px;
        overflow: hidden;
    }

    .catalog-modal .catalog-copy {
        gap: 2px;
    }

    .catalog-modal .catalog-card strong {
        font-size: 0.7rem;
    }

    .catalog-modal .catalog-card span,
    .catalog-modal .catalog-card small,
    .catalog-modal .catalog-copy em {
        font-size: 0.6rem;
    }

    .catalog-modal .catalog-card small {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .catalog-modal .fish-icon {
        width: 32px;
        height: 26px;
    }

    .catalog-modal .evolve-fish-button {
        min-height: 24px;
        padding: 3px 5px;
        font-size: 0.72rem;
    }

    .catalog-modal .book-controls {
        margin-top: 8px;
        margin-bottom: 0;
    }
}

.aquarium-list .fish-card {
    background:
        linear-gradient(90deg, rgba(30, 139, 178, 0.18), rgba(15, 27, 37, 0.95));
}

@media (max-width: 760px) {
    .game {
        grid-template-columns: 230px minmax(460px, 1fr);
    }

    .right-sidebar {
        position: static;
        grid-column: 1 / -1;
        max-height: none;
    }
}

@media (max-width: 760px) {
    .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .help-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pet-inventory {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .equipment-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    #baitShop {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aquarium-owner-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .catalog-filters {
        flex-wrap: wrap;
    }

    .catalog-rarity-checkboxes {
        display: flex;
        width: auto;
        max-width: 100%;
    }

    .cast-control-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cast-control-row > span:last-child {
        display: none;
    }

    .achievements-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body {
        overflow-x: hidden;
    }

    .lobby-grid {
        display: block;
    }

    .game {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 8px;
    }

    .pond-column {
        order: 1;
        min-width: 0;
    }

    .left-sidebar {
        order: 2;
    }

    .right-sidebar {
        order: 3;
    }

    .panel,
    .sidebar,
    .pond-column {
        margin-bottom: 12px;
    }

    .sidebar {
        position: static;
        width: 100%;
        max-height: none;
    }

    .pond-toolbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px;
    }

    .pond-toolbar > div:first-child {
        width: 100%;
    }

    .streak-display {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) 42px;
    }

    .pond-menu-bar {
        gap: 6px;
        padding: 0;
    }

    .pond-menu-bar button {
        min-width: 0;
        padding: 0 7px;
        font-size: 0.9rem;
    }

    .pond-scene {
        min-height: 350px;
        background-position: center;
    }

    .pond-player {
        width: 64px;
    }

    .pond-player em {
        max-width: 112px;
        font-size: 0.68rem;
    }

    .cast-button {
        width: 100%;
    }

    .section-header,
    .button-row {
        flex-wrap: wrap;
    }

    .fish-card {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
    }

    .fish-card .fish-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .fish-card > span,
    .fish-card > small,
    .fish-card > b {
        grid-column: 2;
    }

    .fish-card .fish-actions button {
        flex: 1;
    }

    .shop-item {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .shop-item button,
    .shop-item > b {
        grid-column: 2;
        justify-self: stretch;
    }

    .aquarium-shop-item {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .aquarium-shop-item button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .aquarium-tank {
        min-height: 360px;
    }

    .modal-shell {
        padding: 8px;
    }

    .book-modal {
        max-height: calc(100vh - 16px);
        padding: 12px;
    }

    .book-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .chat-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .shop-tabs,
    .equipment-slots,
    .inventory-controls {
        grid-template-columns: 1fr;
    }

    .equipment-bulk-controls {
        flex-wrap: wrap;
    }

    .equipment-search-group {
        flex: 1 1 100%;
    }

    .equipment-search-group #equipmentSearch {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    .bulk-delete-group {
        flex: 1 1 100%;
    }

    .bulk-delete-group select {
        flex: 1;
        width: auto;
    }

    #reforgeLockedBuffs {
        grid-template-columns: 1fr;
    }

    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .help-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 460px) {
    .catalog-search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .catalog-search {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .help-search {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .player-color-setting {
        grid-template-columns: 1fr;
    }

    .color-swatches {
        grid-template-columns: repeat(4, 32px);
        justify-content: start;
    }

    .pond-menu-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .achievements-grid {
        grid-template-columns: 1fr;
    }

    .hub-back-link {
        margin-left: 8px;
    }

    .lobby {
        width: calc(100% - 16px);
        padding-top: 22px;
    }

    .pond-scene {
        min-height: 300px;
    }

    .zone-arrow {
        width: 36px;
        font-size: 0.88rem;
    }

    .zone-name {
        font-size: 0.88rem;
    }

    .pond-player {
        width: 56px;
    }

    .pond-player b {
        max-width: 62px;
        font-size: 0.66rem;
    }

    .pond-player em {
        max-width: 92px;
    }

    .catalog-grid {
        gap: 6px;
    }

    .pet-inventory {
        grid-template-columns: 1fr;
    }

    .equipment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pet-equipped {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .pet-equipped > button {
        grid-column: 1 / -1;
    }

    .catalog-card {
        min-height: 112px;
        padding: 7px;
        gap: 6px;
    }

    .catalog-card .fish-icon {
        width: 40px;
    }

    .catalog-count-breakdown {
        min-width: min(280px, calc(100vw - 42px));
    }

    .audio-control-row {
        grid-template-columns: minmax(0, 1fr) 52px;
    }
}

@media (min-width: 761px) {
    .game {
        grid-template-columns: minmax(252px, 1fr) 865px minmax(275px, 1fr);
        width: 100%;
        min-width: 1448px;
        zoom: var(--desktop-game-scale, 1);
    }

    .left-sidebar,
    .right-sidebar {
        position: sticky;
        grid-column: auto;
        max-height: calc(var(--desktop-layout-height, 100vh) - 28px);
    }

    .left-sidebar {
        font-size: 0.9rem;
    }

    .right-sidebar {
        font-size: 0.92rem;
    }

    .sidebar h2,
    .sidebar-section-title {
        font-size: 1.04rem;
    }

    .left-sidebar button,
    .left-sidebar input,
    .left-sidebar select {
        font-size: 0.86rem;
    }

    .left-sidebar .wallet strong {
        font-size: 1.4rem;
    }

    .left-sidebar .gear-summary {
        gap: 5px;
        font-size: 0.8rem;
    }

    .right-sidebar .menu-buttons button {
        font-size: 1.02rem;
    }

    .equipment-modal.center-view-panel {
        display: flex;
        flex-direction: column;
        height: min(
            720px,
            calc(var(--desktop-layout-height, 100vh) - 28px)
        );
        max-height: min(
            720px,
            calc(var(--desktop-layout-height, 100vh) - 28px)
        );
        min-height: 0;
        overflow: hidden;
    }

    .equipment-modal.center-view-panel .equipment-grid {
        flex: 1 1 auto;
        min-height: 0;
        align-content: start;
        overflow-x: hidden;
        overflow-y: hidden;
        padding-right: 6px;
    }

    .pets-modal.center-view-panel {
        height: min(
            720px,
            calc(var(--desktop-layout-height, 100vh) - 28px)
        );
        max-height: min(
            720px,
            calc(var(--desktop-layout-height, 100vh) - 28px)
        );
        min-height: 0;
        overflow: hidden;
    }

    .pets-modal.center-view-panel .pet-inventory {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        align-content: start;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .pond-scene {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 14 / 5;
    }
}

@media (max-width: 760px) {
    body.fish-room-active {
        width: 100%;
        height: 100dvh;
        overflow: hidden;
    }

    .fish-room-active .game {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: block;
        min-width: 0;
        height: 100dvh;
        padding: 0;
        overflow: hidden;
        background: #071017;
    }

    .mobile-game-nav {
        position: fixed;
        inset: 0 0 auto;
        z-index: 80;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
        height: 50px;
        padding: 4px;
        border-bottom: 1px solid var(--line);
        background: #071017;
    }

    .mobile-game-nav button {
        min-width: 0;
        min-height: 40px;
        padding: 0 3px;
        font-size: 0.72rem;
    }

    .mobile-game-nav button.active {
        border-color: var(--accent);
        background: #173142;
    }

    .fish-room-active .pond-scene {
        position: fixed;
        inset: 50px 0 174px;
        z-index: 2;
        width: 100%;
        min-height: 0;
        height: auto;
        margin: 0;
        border-inline: 0;
    }

    .fish-room-active .center-view-panel {
        position: fixed;
        inset: 50px 0 174px;
        z-index: 60;
        width: 100%;
        max-height: none;
        min-height: 0;
        overflow: auto;
        border-radius: 0;
    }

    .fish-room-active .pond-background {
        background-size: contain;
    }

    .fish-room-active .cast-control-row {
        position: fixed;
        right: 8px;
        bottom: 82px;
        left: 8px;
        z-index: 70;
        display: grid;
        grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
        margin: 0;
    }

    .fish-room-active .cast-button {
        min-height: 58px;
        font-size: 1.1rem;
    }

    .fish-room-active .minigame {
        position: fixed;
        right: 8px;
        bottom: 6px;
        left: 8px;
        z-index: 70;
        min-height: 70px;
        margin: 0;
        padding: 8px;
    }

    .fish-room-active .minigame-header {
        margin-bottom: 5px;
    }

    .fish-room-active .left-sidebar,
    .fish-room-active .right-sidebar,
    .fish-room-active .pond-toolbar,
    .fish-room-active .pond-menu-bar,
    .fish-room-active .fishing-area-view > .inventory-panel {
        display: none;
    }

    .fish-room-active .left-sidebar,
    .fish-room-active .right-sidebar {
        position: fixed;
        inset: 50px 0 174px;
        z-index: 60;
        width: 100%;
        max-height: none;
        margin: 0;
        overflow: auto;
        border-radius: 0;
        background: #101d28;
    }

    .fish-room-active .game[data-mobile-view="left"] .left-sidebar,
    .fish-room-active .game[data-mobile-view="right"] .right-sidebar {
        display: flex;
    }

    .fish-room-active .game[data-mobile-view="top"] .pond-menu-bar {
        position: fixed;
        right: 8px;
        left: 8px;
        z-index: 60;
        display: grid;
        background: #101d28;
    }

    .fish-room-active .game[data-mobile-view="top"] .pond-menu-bar {
        top: 58px;
    }

    .fish-room-active .game[data-mobile-view="storage"] .pond-column {
        position: fixed;
        inset: 50px 0 174px;
        z-index: 60;
        display: block;
        overflow: auto;
        padding: 8px;
        background: #071017;
    }

    .fish-room-active .game[data-mobile-view="storage"] .pond-column > * {
        display: none;
    }

    .fish-room-active .game[data-mobile-view="storage"] .pond-column > .center-view-host {
        display: grid;
    }

    .fish-room-active .game[data-mobile-view="storage"] .center-view-host > * {
        display: none !important;
    }

    .fish-room-active .game[data-mobile-view="storage"] .fishing-area-view {
        display: grid !important;
    }

    .fish-room-active .game[data-mobile-view="storage"] .fishing-area-view > * {
        display: none;
    }

    .fish-room-active .game[data-mobile-view="storage"] .fishing-area-view > .inventory-panel,
    .fish-room-active .game[data-mobile-view="storage"] .fishing-area-view > .cast-control-row,
    .fish-room-active .game[data-mobile-view="storage"] .fishing-area-view > .minigame {
        display: grid;
    }

    .fish-room-active .result-banner,
    .fish-room-active .bait-notice {
        position: fixed;
        right: 10px;
        bottom: 160px;
        left: 10px;
        z-index: 75;
        max-height: 76px;
        overflow: auto;
    }
}

@media (max-width: 760px) {
    .pet-overview {
        grid-template-columns: 1fr;
    }

    .pet-merge-mode-bar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px;
    }

    .pet-merge-mode-bar label {
        grid-column: 1 / -1;
    }

    .pet-merge-availability {
        grid-column: 1 / -1;
    }

}

@media (max-width: 460px) {
    .pet-toolbar {
        grid-template-columns: 1fr;
    }

    .equipment-grid {
        grid-template-columns: 1fr;
    }

    .pet-toolbar > .muted,
    .pet-toolbar > button {
        grid-column: 1;
    }
}

#catalogModal > .book-modal {
    width: min(980px, calc(100vw - 24px));
    max-width: none;
    height: min(880px, calc(100dvh - 24px));
}

#leaderboardModal > .book-modal,
#statsModal > .book-modal,
#achievementsModal > .book-modal,
#helpModal > .book-modal {
    width: min(1240px, calc(100vw - 24px));
    max-width: none;
    height: min(880px, calc(100dvh - 24px));
    max-height: none;
    overflow: auto;
}

@media (max-width: 760px) {
    .equipment-modal > .book-header {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .equipment-modal > .book-header > .equipment-header-controls {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }

    .equipment-modal > .book-header > button:last-child {
        grid-column: 2;
        grid-row: 1;
    }

    .equipment-header-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fish-room-active .cast-control-row {
        grid-template-columns:
            minmax(76px, 0.72fr)
            minmax(124px, 1.35fr)
            minmax(76px, 0.72fr);
        gap: 5px;
    }

    .fish-room-active .storage-access-button {
        min-height: 58px;
        padding: 5px;
        font-size: 0.9rem;
    }

    .storage-modal-shell {
        padding: 6px;
    }

    .storage-modal {
        width: 100%;
        height: calc(100dvh - 12px);
        padding: 10px;
    }

    .storage-modal-header,
    .storage-toolbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .storage-toolbar {
        max-height: 150px;
        overflow-y: auto;
    }

    .keep-net-actions {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 3px;
    }

    .storage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: minmax(150px, 184px);
        align-content: start;
        overflow-x: hidden;
        overflow-y: auto;
        padding-right: 4px;
    }

    .storage-grid .fish-actions {
        flex-wrap: wrap;
    }
}