/* ============================================
   LetFish - style.css
   Modern game UI: rounded box, glow, gradient
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #e8f4ff;
    min-height: 100vh;
}

/* ============================================
   AUTH PAGES (login/register)
   ============================================ */

.auth-body {
    background-image: url('/assets/ui/Background_login.png');
     background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* tukar dari fixed ke scroll */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

.auth-container {
    width: 100%;
    max-width: 420px;
}

.auth-box {
    background: rgba(13, 35, 60, 0.85);
    border: 1px solid rgba(100, 200, 255, 0.25);
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: 0 0 40px rgba(40, 180, 255, 0.25), 0 10px 30px rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
}

.auth-title {
    text-align: center;
    font-size: 32px;
    color: #6fe3ff;
    text-shadow: 0 0 15px rgba(111, 227, 255, 0.7);
    margin-bottom: 4px;
}

.auth-subtitle {
    text-align: center;
    color: #a8c8de;
    margin-bottom: 24px;
    font-size: 14px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-form label {
    font-size: 13px;
    color: #8fd6f0;
    margin-top: 10px;
    font-weight: 600;
}

.auth-form input {
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid rgba(100, 200, 255, 0.3);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: 0.2s;
}

.auth-form input:focus {
    border-color: #6fe3ff;
    box-shadow: 0 0 10px rgba(111, 227, 255, 0.4);
}

.auth-switch {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: #a8c8de;
}

.auth-switch a {
    color: #6fe3ff;
    text-decoration: none;
    font-weight: 600;
}

.auth-switch a:hover {
    text-decoration: underline;
}

.alert {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 14px;
}

.alert-error {
    background: rgba(255, 70, 70, 0.15);
    border: 1px solid rgba(255, 70, 70, 0.4);
    color: #ff9b9b;
}

.alert-success {
    background: rgba(70, 255, 130, 0.15);
    border: 1px solid rgba(70, 255, 130, 0.4);
    color: #9bffc1;
}

/* ============================================
   BUTTONS (shared)
   ============================================ */

.btn {
    border: none;
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: linear-gradient(135deg, #18c4e8, #0a7fb3);
    color: #fff;
    box-shadow: 0 0 18px rgba(24, 196, 232, 0.5);
}

.btn-primary:hover {
    box-shadow: 0 0 26px rgba(24, 196, 232, 0.8);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(100, 200, 255, 0.3);
    color: #cfeeff;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.15);
}

.btn-danger {
    background: linear-gradient(135deg, #e84d4d, #a82424);
    color: #fff;
}

/* Auto Cast button */
.btn-auto {
    background: rgba(255, 200, 0, 0.12);
    border: 1px solid rgba(255, 200, 0, 0.4);
    color: #ffd966;
}

.btn-auto:hover {
    background: rgba(255, 200, 0, 0.2);
}

.btn-auto-active {
    background: linear-gradient(135deg, #c8a000, #7a6000) !important;
    border-color: #ffd966 !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(255, 200, 0, 0.5);
    animation: autoPulse 2s infinite;
}

@keyframes autoPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 200, 0, 0.4); }
    50% { box-shadow: 0 0 22px rgba(255, 200, 0, 0.8); }
}

/* Inventory count badge in button */
#inv-count-badge {
    font-size: 11px;
    opacity: 0.8;
    margin-left: 4px;
}

/* Logout button in topbar */
.topbar-logout {
    margin-left: auto;
    flex-shrink: 0;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #e84d4d, #a82424);
    color: #fff !important;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(232, 77, 77, 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
}

.topbar-logout:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(232, 77, 77, 0.55);
}

.btn-big {
    font-size: 18px;
    padding: 16px 28px;
    width: 100%;
}

/* ============================================
   GAME PAGE LAYOUT
   ============================================ */

.game-body {
    background: linear-gradient(160deg, #06182e 0%, #0a3854 50%, #0a5d6e 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---- TOP BAR ---- */
.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: rgba(8, 22, 40, 0.85);
    border-bottom: 1px solid rgba(100, 200, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    flex-wrap: nowrap;
    overflow: hidden;
}

.topbar-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 16px;
    background: rgba(255,255,255,0.06);
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(100, 200, 255, 0.2);
}

.topbar-icon {
    font-size: 18px;
}

.topbar-xp-wrap {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.xp-bar-bg {
    width: 100%;
    height: 14px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(100, 200, 255, 0.25);
}

.xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6fe3ff, #18c4e8);
    box-shadow: 0 0 10px rgba(111, 227, 255, 0.8);
    transition: width 0.4s ease;
    border-radius: 10px;
}

.xp-text {
    font-size: 11px;
    color: #9bd4ec;
}

.topbar-username {
    font-weight: 600;
    font-size: 14px;
    color: #bfe9ff;
    margin-left: auto;
}

/* ---- MAIN GRID ---- */
.game-main {
    flex: 1;
    display: grid;
    grid-template-columns: 260px 1fr 300px;
    gap: 20px;
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    align-items: stretch;
}

.panel {
    background: rgba(10, 28, 48, 0.7);
    border: 1px solid rgba(100, 200, 255, 0.18);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 0 25px rgba(10, 60, 90, 0.4);
    height: 100%;
}

.panel-title {
    font-size: 15px;
    color: #6fe3ff;
    margin-bottom: 16px;
    text-shadow: 0 0 8px rgba(111, 227, 255, 0.5);
}

/* ---- LEFT PANEL: PLAYER ---- */
.panel-left {
    display: flex;
    flex-direction: column;
}

.player-card {
    text-align: center;
}

.avatar-wrap {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 10px auto;
    cursor: pointer;
    border-radius: 50%;
}

.player-avatar {
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #18c4e8;
    box-shadow: 0 0 1px rgba(24, 196, 232, 0.6);
    background: rgba(255,255,255,0.05);
}

.avatar-edit-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.avatar-wrap:hover .avatar-edit-overlay {
    opacity: 1;
}

.player-name {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 8px;
    color: #fff;
}

.player-info {
    font-size: 13px;
    color: #a8d4ec;
    margin-bottom: 4px;
}

/* ---- Equipped rod mini-card dalam player panel ---- */
.equipped-rod-card {
    margin-top: 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(100, 200, 255, 0.18);
    border-radius: 14px;
    padding: 14px;
}

.equipped-rod-img {
    width: 100%;
    height: 110px;
    object-fit: contain;
    margin-bottom: 8px;
}

.equipped-rod-name {
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}

.equipped-rod-stats {
    font-size: 12px;
    color: #9bd4ec;
    margin-top: 4px;
}

/* ---- Accessory slots (ring/necklace/bracelet/glove) - 1/4 saiz rod card ---- */
.accessory-slots-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.accessory-slot {
    position: relative;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(100, 200, 255, 0.15);
    border-radius: 12px;
    min-height: 64px;
    padding: 10px 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
}

.accessory-slot.has-item {
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(74, 222, 128, 0.05);
}

.accessory-slot-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}

.accessory-slot-empty {
    font-size: 26px;
    opacity: 0.35;
}

.accessory-slot-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.4;
    font-size: 11px;
    font-weight: 700;
    color: #4ade80;
}

.accessory-slot:not(.has-item) .accessory-slot-stats {
    color: #6b7280;
}

/* ---- Accessory SET bonus effect (4/4 set sama) - warna & jenis effect ditetapkan admin ---- */
.accessory-slots-wrap.set-glow,
.accessory-slots-wrap.set-pulse,
.accessory-slots-wrap.set-rainbow {
    padding: 8px;
    border-radius: 14px;
}

.accessory-slots-wrap.set-glow .accessory-slot.has-item,
.accessory-slots-wrap.set-pulse .accessory-slot.has-item,
.accessory-slots-wrap.set-rainbow .accessory-slot.has-item {
    border-color: var(--set-glow-color, #a855f7);
}

.accessory-slots-wrap.set-glow {
    box-shadow: 0 0 14px var(--set-glow-color, #a855f7), inset 0 0 10px color-mix(in srgb, var(--set-glow-color, #a855f7) 25%, transparent);
}

.accessory-slots-wrap.set-pulse {
    animation: acc-set-pulse 1.6s ease-in-out infinite;
}
@keyframes acc-set-pulse {
    0%, 100% { box-shadow: 0 0 6px var(--set-glow-color, #a855f7); }
    50%      { box-shadow: 0 0 22px var(--set-glow-color, #a855f7); }
}

.accessory-slots-wrap.set-rainbow {
    animation: acc-set-rainbow 4s linear infinite;
}
@keyframes acc-set-rainbow {
    0%   { box-shadow: 0 0 16px #ff0000; }
    17%  { box-shadow: 0 0 16px #ff9900; }
    34%  { box-shadow: 0 0 16px #ffee00; }
    50%  { box-shadow: 0 0 16px #33ff00; }
    67%  { box-shadow: 0 0 16px #00c3ff; }
    84%  { box-shadow: 0 0 16px #7000ff; }
    100% { box-shadow: 0 0 16px #ff0000; }
}

/* ---- Custom tooltip (hover) untuk gear kecik - rod card & accessory slot ---- */
.has-tooltip {
    position: relative;
    cursor: help;
}

.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    background: rgba(5, 14, 25, 0.98);
    border: 1px solid rgba(100, 200, 255, 0.35);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    white-space: pre-line;
    color: #e8f4ff;
    width: max-content;
    max-width: 200px;
    text-align: left;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 50;
}

.has-tooltip::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(100, 200, 255, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 50;
}

.has-tooltip:hover::after,
.has-tooltip:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.has-tooltip:hover::before,
.has-tooltip:focus::before {
    opacity: 1;
    visibility: visible;
}

/* accessory slot tooltip kecik - center dia atas grid, elak overflow tepi panel */
.accessory-slot.has-tooltip::after {
    left: auto;
    right: -10px;
    transform: translateX(0) translateY(4px);
}
.accessory-slot.has-tooltip:hover::after {
    transform: translateX(0) translateY(0);
}
.accessory-slot.has-tooltip::before {
    left: auto;
    right: 10px;
    transform: translateX(0);
}

/* ---- Total Weight / Total Mutation card (sama style dengan total-luck-card) ---- */
.total-wm-card {
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.35);
}
#total-mutation-card {
    background: rgba(192, 132, 252, 0.12);
    border-color: rgba(192, 132, 252, 0.35);
}

/* ---- MIDDLE PANEL: FISHING AREA ---- */
.panel-middle {
    display: flex;
    flex-direction: column;
}

.fishing-area {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #1a5a7a 0%, #0a3550 100%);
    margin-bottom: 16px;
    border: 1px solid rgba(100, 200, 255, 0.2);
    flex-shrink: 0;
    cursor: pointer;
}

.fishing-scene-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cast-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(10, 30, 50, 0.85);
    padding: 14px 22px;
    border-radius: 14px;
    border: 1px solid rgba(100, 200, 255, 0.4);
    font-weight: 700;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.05); }
}

.minigame-wrap {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.minigame-label {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #fff;
    text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

.minigame-bar-bg {
    width: 100%;
    height: 22px;
    background: rgba(0,0,0,0.4);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.3);
}

.minigame-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ffd24d, #ff7a18);
    box-shadow: 0 0 14px rgba(255, 180, 50, 0.8);
    transition: width 0.1s linear;
}

.minigame-tap-btn {
    appearance: none;
    -webkit-appearance: none;
    margin-top: 14px;
    padding: 18px 48px;
    font-family: inherit;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fff;
    background: linear-gradient(135deg, #ffb347, #ff6a1a 60%, #e8460a);
    border: none;
    outline: none;
    border-radius: 999px;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.25) inset,
        0 6px 0 rgba(150, 50, 0, 0.5),
        0 0 26px rgba(255, 122, 24, 0.7);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.minigame-tap-btn:hover {
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.3) inset,
        0 6px 0 rgba(150, 50, 0, 0.5),
        0 0 36px rgba(255, 150, 50, 0.9);
}

.minigame-tap-btn:active {
    transform: translateY(4px) scale(0.95);
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.25) inset,
        0 2px 0 rgba(150, 50, 0, 0.5),
        0 0 20px rgba(255, 122, 24, 0.6);
}

.minigame-tap-btn.tap-pulse {
    animation: tapPulse 0.15s ease;
}

@keyframes tapPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.fish-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background: rgba(15, 35, 55, 0.95);
    border: 2px solid #6fe3ff;
    border-radius: 16px;
    padding: 16px 24px;
    text-align: center;
    box-shadow: 0 0 30px rgba(111, 227, 255, 0.7);
    z-index: 10;
}

.fish-popup.show-effect {
    animation: fishPopupEffect 0.6s ease forwards;
}

@keyframes fishPopupEffect {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    65% { transform: translate(-48%, -50%) scale(1.1); }
    80% { transform: translate(-52%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.fish-popup-img {
    width: 100px;
    height: 140px;
    object-fit: contain;
    margin-bottom: 8px;
}

.fish-popup-name {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
}

.fish-popup-rarity {
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
}

.action-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.action-buttons .btn-big {
    grid-column: 1 / -1;
}

.action-buttons .btn-secondary,
.action-buttons .btn-danger {
    white-space: nowrap;
    padding: 12px 10px;
    font-size: 13px;
}

.game-message {
    margin-top: 10px;
    font-size: 13px;
    color: #ffd24d;
    min-height: 18px;
    text-align: center;
    font-weight: 600;
}

/* ============================================
   GANTI .inventory-preview DAN .inv-item SEDIA ADA
   dalam style.css kau dengan versi ni (versi 3 - VERTICAL card,
   gambar besar di atas, teks di bawah - macam modal inventory penuh).
   ============================================ */

/* ---- RIGHT PANEL: INVENTORY PREVIEW ---- */
.inventory-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-items: stretch;   /* tukar dari 'start' ke 'stretch' */
}

.empty-text {
    font-size: 13px;
    color: #8fb8cc;
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px 0;
}

.inv-item {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    border: 1px solid rgba(100, 200, 255, 0.15);
    transition: transform 0.15s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.inv-item:hover {
    transform: translateY(-3px);
}

.inv-item-img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.inv-item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 62px; /* reserve space so semua card sekata walau mutation ada/tiada */
    justify-content: flex-start;
}

.inv-item-name {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    min-height: 28px; /* reserve 2 baris walau nama pendek */
}

.inv-item-rarity {
    font-size: 10px;
    font-weight: 700;
    margin-top: 2px;
}

.inv-item-mutation {
    font-size: 10px;
    font-weight: 700;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-item-weight {
    font-size: 11px;
    color: #9bd4ec;
    font-weight: 600;
    margin-top: auto;
    padding-top: 4px;
}

/* ---- RARITY COLORS ---- */
.rarity-common .inv-item-rarity, .fish-popup-rarity.rarity-common { color: #b8c4cc; }
.rarity-uncommon .inv-item-rarity, .fish-popup-rarity.rarity-uncommon { color: #4dff7a; }
.rarity-rare .inv-item-rarity, .fish-popup-rarity.rarity-rare { color: #4da8ff; }
.rarity-epic .inv-item-rarity, .fish-popup-rarity.rarity-epic { color: #c44dff; }
.rarity-legendary .inv-item-rarity, .fish-popup-rarity.rarity-legendary { color: #ffd24d; }
.rarity-mythic .inv-item-rarity, .fish-popup-rarity.rarity-mythic { color: #ff4d6a; }
.rarity-secret .inv-item-rarity, .fish-popup-rarity.rarity-secret {
    color: #fff;
    background: linear-gradient(90deg, #ff4d4d, #ffe14d, #4dff88, #4dd2ff, #b84dff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rarity-common { border-color: rgba(184, 196, 204, 0.3) !important; }
.rarity-uncommon { border-color: rgba(77, 255, 122, 0.3) !important; }
.rarity-rare { border-color: rgba(77, 168, 255, 0.3) !important; }
.rarity-epic { border-color: rgba(196, 77, 255, 0.3) !important; }
.rarity-legendary { border-color: rgba(255, 210, 77, 0.5) !important; box-shadow: 0 0 14px rgba(255, 210, 77, 0.3); }
.rarity-mythic { border-color: rgba(255, 77, 106, 0.6) !important; box-shadow: 0 0 16px rgba(255, 77, 106, 0.4); }
.rarity-secret { border-color: rgba(255,255,255,0.7) !important; box-shadow: 0 0 22px rgba(255,255,255,0.5), 0 0 40px rgba(184, 77, 255, 0.4); animation: secretGlow 1.6s infinite alternate; }

@keyframes secretGlow {
    0% { box-shadow: 0 0 16px rgba(255,77,106,0.5); }
    50% { box-shadow: 0 0 22px rgba(77,210,255,0.6); }
    100% { box-shadow: 0 0 16px rgba(184,77,255,0.6); }
}

/* ---- BITE REACTION ---- */
.bite-flash {
    animation: bitePulse 0.35s infinite alternate;
    color: #ffd24d;
    font-weight: 800;
    font-size: 1.1em;
}
@keyframes bitePulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.12); }
}

/* ---- TOTAL LUCK + SIDE BUTTONS ---- */
.total-luck-card {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(77, 255, 122, 0.12);
    border: 1px solid rgba(77, 255, 122, 0.35);
    border-radius: 10px;
    font-weight: 700;
    text-align: center;
    font-size: 0.92em;
}

.player-side-buttons {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}
.player-side-buttons .btn-small {
    flex: 1;
    font-size: 0.82em;
    padding: 8px 6px;
}

/* ---- PARTY MODAL ---- */
.party-code-label { font-size: 0.85em; opacity: 0.8; margin-bottom: 4px; }
.party-code {
    font-size: 1.8em;
    font-weight: 800;
    letter-spacing: 4px;
    text-align: center;
    padding: 10px;
    background: rgba(77, 168, 255, 0.12);
    border: 1px dashed rgba(77, 168, 255, 0.5);
    border-radius: 10px;
    margin-bottom: 10px;
}
.party-active-text { font-weight: 700; margin-bottom: 10px; }
.party-hint { opacity: 0.8; font-size: 0.9em; margin-bottom: 10px; }
.party-divider { border-color: rgba(255,255,255,0.15); margin: 14px 0; }
.party-join-row { display: flex; gap: 8px; }
.party-join-row input {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.3);
    color: #fff;
    text-transform: uppercase;
}


/* ============================================
   MODAL (Inventory / Shop)
   ============================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

.modal-box {
    background: rgba(12, 32, 54, 0.97);
    border: 1px solid rgba(100, 200, 255, 0.3);
    border-radius: 20px;
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(24, 196, 232, 0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(100, 200, 255, 0.2);
}

.modal-header h2 {
    font-size: 18px;
    color: #6fe3ff;
}

.modal-close {
    background: none;
    border: none;
    color: #cfeeff;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

.modal-body {
    padding: 18px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.btn-sm {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 9px;
}

/* Inventory full list - grid kad menegak (gambar besar gaya kad) */
#inventory-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 14px;
}

.inv-list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 10px;
    border: 1px solid rgba(100, 200, 255, 0.15);
    transition: transform 0.15s;
}

.inv-list-item:hover {
    transform: translateY(-3px);
}

.inv-card-img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 8px;
}

.inv-card-name {
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-card-rarity {
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

.rarity-common .inv-card-rarity { color: #b8c4cc; }
.rarity-uncommon .inv-card-rarity { color: #4dff7a; }
.rarity-rare .inv-card-rarity { color: #4da8ff; }
.rarity-epic .inv-card-rarity { color: #c44dff; }
.rarity-legendary .inv-card-rarity { color: #ffd24d; }
.rarity-mythic .inv-card-rarity { color: #ff4d6a; }
.rarity-secret .inv-card-rarity { color: #fff; }

.inv-card-value {
    font-size: 12px;
    color: #ffd24d;
    font-weight: 700;
    margin-top: 2px;
    margin-bottom: 8px;
}

.inv-list-item .sell-one-btn {
    width: 100%;
    padding: 8px;
    font-size: 12px;
}

/* Shop list item */
.shop-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 14px;
    border: 1px solid rgba(100, 200, 255, 0.15);
}

.shop-item img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    flex-shrink: 0;
}

.shop-item-info {
    flex: 1;
}

.shop-item-name {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
}

.shop-item-stats {
    font-size: 12px;
    color: #9bd4ec;
    margin-top: 2px;
}

.shop-item-price {
    font-size: 13px;
    color: #ffd24d;
    font-weight: 700;
    margin-top: 4px;
}

.shop-item-harbor {
    font-size: 11px;
    color: #7dd3fc;
    font-weight: 600;
    margin-top: 3px;
    opacity: 0.9;
}

.craft-req-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.craft-req {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 5px 10px 5px 6px;
    font-size: 12px;
    font-weight: 600;
}

.craft-req-list img.craft-req-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.craft-req-icon-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.craft-req-text {
    white-space: nowrap;
}

.craft-req-ok {
    color: #4ade80;
    border-color: rgba(74,222,128,0.35);
}

.craft-req-bad {
    color: #f87171;
    border-color: rgba(248,113,113,0.35);
}

.boost-active-wrap {
    background: rgba(168,85,247,0.1);
    border: 1px solid rgba(168,85,247,0.35);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
.boost-active-title {
    font-size: 12px;
    font-weight: 700;
    color: #c4b5fd;
    margin-bottom: 6px;
}
.boost-active-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    padding: 4px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.boost-active-item:first-of-type { border-top: none; }
.boost-active-name { color: #e9d5ff; font-weight: 600; }
.boost-active-stats { color: #a78bfa; }
.boost-active-timer { color: #34d399; font-weight: 700; min-width: 60px; text-align: right; }
.boost-qty {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    margin-left: 4px;
}

/* ============================================
   ROD INDEX (koleksi rod - gelap kalau belum dimiliki)
   ============================================ */

.modal-box-wide {
    max-width: 760px;
}

#rod-index-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.rod-index-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 12px;
    border: 1px solid rgba(100, 200, 255, 0.15);
    transition: transform 0.15s;
}

.rod-index-card:hover {
    transform: translateY(-3px);
}

.rod-index-card.owned {
    border-color: rgba(77, 255, 122, 0.35);
    background: rgba(77, 255, 122, 0.05);
}

.rod-index-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.rod-index-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

/* Rod belum dimiliki - gambar digelapkan & grayscale */
.rod-index-card.locked .rod-index-img {
    filter: brightness(0.25) grayscale(0.6);
    opacity: 0.85;
}

/* Rod dah dimiliki - gambar cerah & normal */
.rod-index-card.owned .rod-index-img {
    filter: none;
    opacity: 1;
}

.rod-index-name {
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}

.rod-index-card.locked .rod-index-name {
    color: #6a8fa3;
}

.rod-index-stats {
    font-size: 11px;
    color: #9bd4ec;
    margin-top: 2px;
}

.rod-index-source {
    font-size: 11px;
    color: #ffd24d;
    font-weight: 700;
    margin-top: 6px;
}

.rod-index-status {
    font-size: 11px;
    font-weight: 700;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
}

.rod-index-status.owned-tag {
    background: rgba(77, 255, 122, 0.15);
    color: #4dff7a;
}

.rod-index-status.locked-tag {
    background: rgba(255,255,255,0.08);
    color: #8fb8cc;
}

.rod-index-equip-btn {
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    font-size: 12px;
}

/* ============================================
   QUEST SYSTEM
   ============================================ */

#btn-quest {
    position: relative;
}

.quest-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    background: #ff4d4d;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 0 8px rgba(255, 77, 77, 0.7);
}

.quest-tabs {
    display: flex;
    gap: 8px;
    padding: 14px 22px 0;
}

.quest-tab {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(100, 200, 255, 0.2);
    color: #a8d4ec;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s;
}

.quest-tab:hover {
    background: rgba(255,255,255,0.12);
}

.quest-tab.active {
    background: linear-gradient(135deg, #18c4e8, #0a7fb3);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 14px rgba(24, 196, 232, 0.4);
}

.accessory-tabs {
    display: flex;
    gap: 8px;
    padding: 14px 22px 0;
}

.accessory-tab {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(100, 200, 255, 0.2);
    color: #a8d4ec;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s;
}

.accessory-tab:hover {
    background: rgba(255,255,255,0.12);
}

.accessory-tab.active {
    background: linear-gradient(135deg, #18c4e8, #0a7fb3);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 14px rgba(24, 196, 232, 0.4);
}

.quest-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 14px;
    border: 1px solid rgba(100, 200, 255, 0.15);
}

.quest-item.completed {
    border-color: rgba(77, 255, 122, 0.4);
    background: rgba(77, 255, 122, 0.06);
}

.quest-icon {
    font-size: 26px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    flex-shrink: 0;
}

.quest-info {
    flex: 1;
    min-width: 0;
}

.quest-title {
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}

.quest-desc {
    font-size: 12px;
    color: #9bd4ec;
    margin-top: 2px;
}

.quest-progress-bar-bg {
    width: 100%;
    height: 10px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid rgba(100, 200, 255, 0.15);
}

.quest-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6fe3ff, #18c4e8);
    transition: width 0.3s ease;
}

.quest-item.completed .quest-progress-bar-fill {
    background: linear-gradient(90deg, #4dff7a, #1fbf52);
}

.quest-progress-text {
    font-size: 11px;
    color: #8fb8cc;
    margin-top: 4px;
}

.quest-reward-line {
    font-size: 12px;
    color: #ffd24d;
    font-weight: 700;
    margin-top: 6px;
}

.quest-claim-btn {
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: 13px;
}

.quest-claim-btn.claimed {
    background: rgba(255,255,255,0.06);
    color: #8fb8cc;
    box-shadow: none;
    cursor: default;
}

.hidden {
    display: none !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 900px) {
    .game-main {
        grid-template-columns: 1fr;
    }
    .panel {
        height: auto;
    }
    .action-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
    .topbar-username {
        margin-left: 0;
        width: 100%;
        order: 10;
    }
}

@media (max-width: 480px) {
    .auth-box {
        padding: 26px 20px;
    }
    .fishing-area {
        height: 260px;
    }
    .avatar-wrap {
        width: 70px;
        height: 70px;
    }
    .player-avatar {
        width: 70px;
        height: 70px;
    }
    .frame-image-overlay {
        inset: -6px; /* scale down proportional dari -8px (untuk 90px) ke saiz 70px */
    }
    
     /* ⬇ TAMBAHAN BARU — kemaskan rod & minigame kat skrin kecil */
    #rod-overlay {
        width: 110px;
        height: 120px;
        right: 4%;
        bottom: 6%;
    }

    .minigame-wrap {
        bottom: 8px;
        width: 94%;
    }

    .minigame-label {
        font-size: 11px;
        margin-bottom: 4px;
        line-height: 1.3;
    }

    .minigame-bar-bg {
        height: 14px;
        border-width: 1.5px;
    }

    .minigame-tap-btn {
        margin-top: 8px;
        padding: 12px 30px;
        font-size: 16px;
    }

    .cast-indicator {
        padding: 8px 14px;
        font-size: 12px;
    }

    .game-message {
        font-size: 12px;
        margin-top: 6px;
    }
    
     .luck-hud {
        padding: 6px 12px;
    }
    .weather-badge {
        font-size: 10px;
        padding: 3px 9px;
        margin-bottom: 4px;
    }
    .luck-label { font-size: 9px; }
    .luck-val { font-size: 16px; }
    .luck-sub { font-size: 9px; }

    .pr-timer {
        top: 6px;
        right: 8px;
        padding: 3px 9px;
        font-size: 11px;
    }

    .fish-popup {
        padding: 8px 14px;
        max-width: 80%;
    }
    .fish-popup-img {
        width: 60px;
        height: 84px;
        margin-bottom: 4px;
    }
    .fish-popup-name { font-size: 12px; }
    .fish-popup-rarity { font-size: 10px; }
    #fish-popup-extra-pr span { font-size: 10px !important; }

    .cast-indicator {
        padding: 6px 12px;
        font-size: 11px;
    }

    .minigame-wrap { bottom: 6px; width: 92%; }
    .minigame-label { font-size: 10px; margin-bottom: 3px; }
    .minigame-bar-bg { height: 12px; }
    .minigame-tap-btn { margin-top: 6px; padding: 10px 24px; font-size: 14px; }

    /* Pastikan semua overlay content memang terkurung dalam sea box, tak melimpah */
    .pr-sea { overflow: hidden; }
    .pr-sea .sea-center,
    .pr-sea .fish-popup,
    .pr-sea .cast-indicator,
    .pr-sea .minigame-wrap,
    .pr-sea .pr-timer {
        max-width: 100%;
    }

}
/* ============================================
   WEATHER SYSTEM — CSS Themes & Effects
   ============================================ */

/* Smooth transition untuk semua perubahan cuaca */
body,
.topbar,
.panel,
.modal-box,
.equipped-rod-card,
.total-luck-card,
.fishing-area {
    transition: background 2s ease, border-color 1.5s ease, box-shadow 1.5s ease, filter 1.5s ease;
}

/* ============================================
   ☀️ SUNNY — default, tiada perubahan
   ============================================ */
body.weather-sunny {
    background: linear-gradient(160deg, #06182e 0%, #0a3854 50%, #0a5d6e 100%);
    filter: none;
}

/* ============================================
   🌧️ RAIN — kelabu biru, dingin, kabus
   ============================================ */
body.weather-rain {
    background: linear-gradient(135deg, #0d1117 0%, #1a2332 40%, #1e2d3d 100%) !important;
    filter: saturate(0.72) brightness(0.96);
}
body.weather-rain .topbar {
    background: rgba(18, 25, 38, 0.97) !important;
    border-bottom-color: rgba(125, 211, 252, 0.25) !important;
}
body.weather-rain .panel {
    background: rgba(16, 24, 38, 0.88) !important;
    border-color: rgba(125, 211, 252, 0.2) !important;
}
body.weather-rain .panel-title {
    color: #7dd3fc !important;
    text-shadow: 0 0 10px rgba(125, 211, 252, 0.4) !important;
}
body.weather-rain .btn-primary {
    background: linear-gradient(135deg, #0369a1, #0ea5e9) !important;
    box-shadow: 0 0 16px rgba(14, 165, 233, 0.4) !important;
}
body.weather-rain .xp-bar-fill {
    background: linear-gradient(90deg, #0ea5e9, #7dd3fc) !important;
}
body.weather-rain .modal-box {
    background: rgba(13, 20, 32, 0.97) !important;
    border-color: rgba(125, 211, 252, 0.25) !important;
}
body.weather-rain .fishing-area {
    background: linear-gradient(180deg, #1a3a50 0%, #0d2438 100%) !important;
    border-color: rgba(125, 211, 252, 0.25) !important;
}

/* ============================================
   ⛈️ THUNDERSTORM — ungu gelap, elektrik
   ============================================ */
body.weather-thunderstorm {
    background: linear-gradient(135deg, #0c0819 0%, #180c2e 40%, #110920 100%) !important;
    filter: saturate(0.78) brightness(0.88);
}
body.weather-thunderstorm .topbar {
    background: rgba(14, 7, 28, 0.97) !important;
    border-bottom-color: rgba(167, 139, 250, 0.35) !important;
    box-shadow: 0 2px 20px rgba(139, 92, 246, 0.18) !important;
}
body.weather-thunderstorm .panel {
    background: rgba(16, 8, 32, 0.90) !important;
    border-color: rgba(167, 139, 250, 0.25) !important;
    box-shadow: 0 4px 24px rgba(109, 40, 217, 0.15) !important;
}
body.weather-thunderstorm .panel-title {
    color: #c4b5fd !important;
    text-shadow: 0 0 14px rgba(167, 139, 250, 0.65) !important;
}
body.weather-thunderstorm .btn-primary {
    background: linear-gradient(135deg, #5b21b6, #8b5cf6) !important;
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.45) !important;
}
body.weather-thunderstorm .xp-bar-fill {
    background: linear-gradient(90deg, #7c3aed, #c4b5fd) !important;
}
body.weather-thunderstorm .modal-box {
    background: rgba(10, 5, 22, 0.97) !important;
    border-color: rgba(167, 139, 250, 0.3) !important;
}
body.weather-thunderstorm .fishing-area {
    background: linear-gradient(180deg, #1a0c30 0%, #0e0720 100%) !important;
    border-color: rgba(167, 139, 250, 0.3) !important;
}

/* ============================================
   🌬️ WINDY — hijau teal, segar
   ============================================ */
body.weather-windy {
    background: linear-gradient(135deg, #061412 0%, #0d2420 40%, #0a1e1a 100%) !important;
    filter: saturate(0.85);
}
body.weather-windy .topbar {
    background: rgba(6, 18, 16, 0.97) !important;
    border-bottom-color: rgba(110, 231, 183, 0.3) !important;
}
body.weather-windy .panel {
    background: rgba(8, 20, 18, 0.88) !important;
    border-color: rgba(110, 231, 183, 0.2) !important;
}
body.weather-windy .panel-title {
    color: #6ee7b7 !important;
    text-shadow: 0 0 10px rgba(110, 231, 183, 0.45) !important;
}
body.weather-windy .btn-primary {
    background: linear-gradient(135deg, #065f46, #10b981) !important;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.4) !important;
}
body.weather-windy .xp-bar-fill {
    background: linear-gradient(90deg, #059669, #6ee7b7) !important;
}
body.weather-windy .modal-box {
    background: rgba(5, 15, 14, 0.97) !important;
    border-color: rgba(110, 231, 183, 0.25) !important;
}
body.weather-windy .fishing-area {
    background: linear-gradient(180deg, #0d2e28 0%, #071a16 100%) !important;
    border-color: rgba(110, 231, 183, 0.25) !important;
}

/* ============================================
   🌑 BLOOD MOON — merah darah, dramatik
   ============================================ */
body.weather-bloodmoon {
    background: linear-gradient(135deg, #100404 0%, #220808 40%, #2c0a0a 100%) !important;
    filter: saturate(1.1) brightness(0.84);
}
body.weather-bloodmoon .topbar {
    background: rgba(22, 4, 4, 0.97) !important;
    border-bottom-color: rgba(248, 113, 113, 0.4) !important;
    box-shadow: 0 2px 30px rgba(220, 38, 38, 0.22) !important;
}
body.weather-bloodmoon .panel {
    background: rgba(24, 5, 5, 0.90) !important;
    border-color: rgba(248, 113, 113, 0.25) !important;
    box-shadow: 0 4px 30px rgba(185, 28, 28, 0.2) !important;
}
body.weather-bloodmoon .panel-title {
    color: #fca5a5 !important;
    text-shadow: 0 0 16px rgba(248, 113, 113, 0.7) !important;
}
body.weather-bloodmoon .btn-primary {
    background: linear-gradient(135deg, #991b1b, #ef4444) !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.45) !important;
}
body.weather-bloodmoon .btn-auto {
    border-color: rgba(248, 113, 113, 0.5) !important;
    color: #fca5a5 !important;
}
body.weather-bloodmoon .xp-bar-fill {
    background: linear-gradient(90deg, #dc2626, #f87171) !important;
}
body.weather-bloodmoon .modal-box {
    background: rgba(16, 3, 3, 0.97) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}
body.weather-bloodmoon .fishing-area {
    background: linear-gradient(180deg, #2c0808 0%, #160404 100%) !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
}
body.weather-bloodmoon .total-luck-card {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
}
/* Bulan kat fishing area */
body.weather-bloodmoon .fishing-area::after {
    content: '🌑';
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: 52px;
    filter: drop-shadow(0 0 18px rgba(220, 38, 38, 0.9));
    animation: bloodmoonPulse 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}
@keyframes bloodmoonPulse {
    0%, 100% { filter: drop-shadow(0 0 18px rgba(220, 38, 38, 0.85)); }
    50%       { filter: drop-shadow(0 0 36px rgba(220, 38, 38, 1.0)) brightness(1.15); }
}

/* ============================================
   🌌 COSMIC STORM — ungu kosmik, bintang
   ============================================ */
body.weather-cosmicstorm {
    background: linear-gradient(135deg, #040410 0%, #0b0620 40%, #060416 100%) !important;
    filter: brightness(0.88);
}
body.weather-cosmicstorm .topbar {
    background: rgba(4, 2, 16, 0.97) !important;
    border-bottom-color: rgba(232, 121, 249, 0.4) !important;
    box-shadow: 0 2px 30px rgba(168, 85, 247, 0.22) !important;
    position: relative;
    overflow: hidden;
}
/* Aurora line kat bawah topbar */
body.weather-cosmicstorm .topbar::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e879f9, #818cf8, #38bdf8, transparent);
    background-size: 200% 100%;
    animation: auroraLine 4s linear infinite;
}
@keyframes auroraLine {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}
body.weather-cosmicstorm .panel {
    background: rgba(7, 3, 20, 0.92) !important;
    border-color: rgba(232, 121, 249, 0.22) !important;
    box-shadow: 0 4px 28px rgba(139, 92, 246, 0.18) !important;
}
body.weather-cosmicstorm .panel-title {
    color: #e879f9 !important;
    text-shadow: 0 0 18px rgba(232, 121, 249, 0.7) !important;
}
body.weather-cosmicstorm .btn-primary {
    background: linear-gradient(135deg, #6b21a8, #d946ef) !important;
    box-shadow: 0 0 22px rgba(217, 70, 239, 0.5) !important;
}
body.weather-cosmicstorm .btn-auto {
    border-color: rgba(232, 121, 249, 0.5) !important;
    color: #e879f9 !important;
}
body.weather-cosmicstorm .xp-bar-fill {
    background: linear-gradient(90deg, #7c3aed, #e879f9, #38bdf8) !important;
    background-size: 200% 100% !important;
    animation: cosmicXp 3s linear infinite !important;
}
@keyframes cosmicXp {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}
body.weather-cosmicstorm .modal-box {
    background: rgba(4, 2, 14, 0.97) !important;
    border-color: rgba(232, 121, 249, 0.3) !important;
}
body.weather-cosmicstorm .fishing-area {
    background: linear-gradient(180deg, #12063a 0%, #07031e 100%) !important;
    border-color: rgba(232, 121, 249, 0.28) !important;
}
body.weather-cosmicstorm .total-luck-card {
    background: rgba(88, 28, 135, 0.2) !important;
    border-color: rgba(232, 121, 249, 0.4) !important;
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.25) !important;
}
body.weather-cosmicstorm .player-name {
    background: linear-gradient(135deg, #e879f9, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   Canvas weather overlay (pointer events off)
   ============================================ */
#weather-canvas {
    touch-action: none !important;
}
/* ============================================
   SHOWCASE MODAL (pilih 4 ikan untuk flex kat Leaderboard)
   ============================================ */
.showcase-hint {
    padding: 0 22px 14px;
    font-size: 13px;
    color: #9bd4ec;
}

.showcase-slots-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 0 22px 18px;
}

.showcase-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    aspect-ratio: unset;        /* buang aspect-ratio supaya height konsisten */
    height: 180px;              /* height tetap untuk semua slot */
    background: rgba(255,255,255,0.05);
    border: 2px dashed rgba(100, 200, 255, 0.3);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    padding: 8px 6px 6px;
    text-align: center;
    overflow: hidden;
}

.showcase-slot:hover {
    background: rgba(255,255,255,0.08);
}

.showcase-slot.active {
    border-style: solid;
    border-color: #6fe3ff;
    box-shadow: 0 0 16px rgba(111, 227, 255, 0.4);
}

.showcase-slot.filled {
    border-style: solid;
}

.showcase-slot-empty {
    font-size: 28px;
    color: #6fe3ff;
    opacity: 0.5;
}

.showcase-slot-label {
    font-size: 11px;
    color: #9bd4ec;
}

.showcase-slot-img {
    width: 60px;               /* fixed width, bukan % */
    height: 90px;              /* fixed height */
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.showcase-slot-name {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}

.showcase-slot-clear {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.85);
    color: #fff;
    border: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.inv-list-item.in-showcase {
    border-color: rgba(111, 227, 255, 0.6) !important;
    box-shadow: 0 0 12px rgba(111, 227, 255, 0.3);
}

.inv-card-showcase-tag {
    font-size: 11px;
    font-weight: 700;
    color: #6fe3ff;
    margin-top: 2px;
}

.showcase-pick-btn {
    width: 100%;
    padding: 8px;
    font-size: 12px;
    margin-top: 6px;
}

/* ============================================
   LEADERBOARD PAGE
   ============================================ */
.lb-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 18px;
    margin: 10px 0 26px;
    flex-wrap: wrap;
}

.lb-podium-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.2s;
}

.lb-podium-card:hover {
    transform: translateY(-4px);
}

.lb-podium-avatar-wrap {
    position: relative;
    border-radius: 50%;
}

.lb-podium-avatar {
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(100, 200, 255, 0.4);
    background: #0c2036;
}

.lb-rank-1 .lb-podium-avatar { width: 100px; height: 100px; border-color: #ffd24d; box-shadow: 0 0 24px rgba(255,210,77,0.5); }
.lb-rank-2 .lb-podium-avatar { width: 80px; height: 80px; border-color: #c9d6e3; }
.lb-rank-3 .lb-podium-avatar { width: 80px; height: 80px; border-color: #d98a4f; }

.lb-rank-badge {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    background: #0c2036;
    border: 2px solid #ffd24d;
    color: #ffd24d;
    font-weight: 800;
    font-size: 13px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-rank-2 .lb-rank-badge { border-color: #c9d6e3; color: #c9d6e3; }
.lb-rank-3 .lb-rank-badge { border-color: #d98a4f; color: #d98a4f; }

.lb-podium-name { font-weight: 700; font-size: 14px; color: #fff; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-podium-score { font-size: 13px; font-weight: 700; }

.lb-list-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(100,200,255,0.12);
    cursor: pointer;
    transition: background 0.15s;
}

.lb-list-row:hover { background: rgba(255,255,255,0.08); }

.lb-list-rank {
    width: 26px;
    text-align: center;
    font-weight: 700;
    color: #9bd4ec;
    flex-shrink: 0;
}

.lb-list-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #0c2036;
    border: 1px solid rgba(100,200,255,0.25);
}

.lb-list-name {
    flex: 1;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-list-score {
    font-weight: 700;
    flex-shrink: 0;
}

.lb-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.lb-tab {
    padding: 9px 18px;
    border-radius: 20px;
    border: 1px solid rgba(100,200,255,0.25);
    background: rgba(255,255,255,0.04);
    color: #9bd4ec;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.lb-tab.active {
    background: rgba(111, 227, 255, 0.18);
    border-color: #6fe3ff;
    color: #6fe3ff;
}

/* ---- Player Profile Popup ---- */
.lb-profile-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding-bottom: 8px;
}

.lb-profile-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(100,200,255,0.4);
    background: #0c2036;
}

.lb-profile-name { font-size: 19px; font-weight: 800; color: #fff; }
.lb-profile-level { font-size: 13px; color: #9bd4ec; }

.lb-profile-stats-row {
    display: flex;
    gap: 16px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.lb-profile-stat {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(100,200,255,0.15);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 12px;
    text-align: center;
    min-width: 80px;
}

.lb-profile-stat strong { display: block; font-size: 15px; margin-top: 2px; }

.lb-profile-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #6fe3ff;
    margin: 18px 0 10px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lb-profile-equip-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.lb-profile-equip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 70px;
    text-align: center;
}

.lb-profile-equip-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 4px;
}

.lb-profile-equip-item span {
    font-size: 10px;
    color: #9bd4ec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.lb-showcase-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    align-items: stretch;
}

.lb-showcase-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 8px;
    height: 100%;
}

.lb-showcase-item img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.lb-showcase-item span {
    font-size: 10px;
    font-weight: 700;
    max-width: 100%;
}

.lb-showcase-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    min-height: 25px;
    color: #fff;
}

.lb-showcase-mutation {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 13px;
}

.lb-showcase-weight {
    white-space: nowrap;
    margin-top: auto;
    padding-top: 2px;
}

.lb-showcase-empty {
    aspect-ratio: 2 / 3;
    border: 1.5px dashed rgba(100,200,255,0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(155, 212, 236, 0.4);
    font-size: 11px;
    height: 100%;
}

/* ============================================
   FISH LOCK SYSTEM
   ============================================ */
.inv-list-item.inv-locked {
    border-color: rgba(251, 191, 36, 0.55) !important;
    background: rgba(251, 191, 36, 0.06) !important;
}

.btn-locked-active {
    background: rgba(251, 191, 36, 0.25);
    border: 1px solid rgba(251, 191, 36, 0.6);
    color: #fbbf24;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-locked-active:hover {
    background: rgba(251, 191, 36, 0.4);
}

/* ============================================================
   style_weight_mutation_patch.css
   LetFish — Weight & Mutation UI Styles

   ADD THIS to the bottom of style_minigame.css (or style.css).
   ============================================================ */

/* ============================================================
   MUTATION CARD GLOWS — applied to .inv-list-item & .inv-item
   (box-shadow is also set inline from JS for flexibility,
   but these classes work as CSS-only fallback / extra layer)
   ============================================================ */

.mutation-wild      { /* no extra glow — base rarity glow only */ }

.mutation-sunforged {
    border-color: rgba(255, 210, 77, 0.75) !important;
    box-shadow:   0 0 14px rgba(255, 210, 77, 0.55) !important;
}

.mutation-prism {
    border-color: rgba(167, 139, 250, 0.75) !important;
    box-shadow:   0 0 18px rgba(167, 139, 250, 0.60) !important;
}

.mutation-abyssal {
    border-color: rgba(56, 189, 248, 0.80) !important;
    box-shadow:   0 0 20px rgba(56, 189, 248, 0.65) !important;
}

.mutation-celestial {
    border-color: rgba(240, 230, 140, 0.85) !important;
    box-shadow:   0 0 22px rgba(240, 230, 140, 0.70) !important;
}

.mutation-eternal {
    border-color: rgba(232, 121, 249, 0.90) !important;
    box-shadow:   0 0 26px rgba(232, 121, 249, 0.80),
                  0 0 50px rgba(232, 121, 249, 0.20) !important;
    animation:    eternalPulse 2.5s ease-in-out infinite;
}

@keyframes eternalPulse {
    0%, 100% { box-shadow: 0 0 22px rgba(232, 121, 249, 0.7),  0 0 40px rgba(232, 121, 249, 0.15); }
    50%       { box-shadow: 0 0 34px rgba(232, 121, 249, 1.0),  0 0 70px rgba(232, 121, 249, 0.35); }
}

.mutation-genesis {
    border-color: rgba(74, 222, 128, 0.90) !important;
    box-shadow:   0 0 28px rgba(74, 222, 128, 0.85),
                  0 0 60px rgba(74, 222, 128, 0.25) !important;
    animation:    genesisPulse 2s ease-in-out infinite;
}

@keyframes genesisPulse {
    0%, 100% { box-shadow: 0 0 24px rgba(74, 222, 128, 0.80), 0 0 50px rgba(74, 222, 128, 0.20); }
    50%       { box-shadow: 0 0 40px rgba(74, 222, 128, 1.00), 0 0 90px rgba(74, 222, 128, 0.45); }
}

.mutation-voidborn {
    border-color: rgba(255, 255, 255, 1.0) !important;
    box-shadow:   0 0 36px rgba(255, 255, 255, 1.0),
                  0 0 80px rgba(255, 255, 255, 0.50),
                  0 0 140px rgba(200, 200, 255, 0.25) !important;
    animation:    voidbornPulse 1.5s ease-in-out infinite;
}

@keyframes voidbornPulse {
    0%, 100% {
        box-shadow: 0 0 30px rgba(255,255,255,0.9), 0 0 70px rgba(255,255,255,0.4), 0 0 120px rgba(180,180,255,0.2);
        border-color: rgba(255,255,255,0.9) !important;
    }
    50% {
        box-shadow: 0 0 50px rgba(255,255,255,1.0), 0 0 110px rgba(255,255,255,0.65), 0 0 200px rgba(200,200,255,0.40);
        border-color: rgba(255,255,255,1.0) !important;
    }
}

/* ============================================================
   MUTATION LABEL in inventory cards
   ============================================================ */
.inv-card-mutation {
    font-size:   11px;
    font-weight: 700;
    margin-top:  2px;
    letter-spacing: 0.3px;
}

.inv-item-mutation {
    font-size:   10px;
    font-weight: 700;
    margin-top:  2px;
}

/* ============================================================
   WEIGHT DISPLAY in inventory cards
   ============================================================ */
.inv-card-weight {
    font-size:   11px;
    color:       #9bd4ec;
    font-weight: 600;
    margin-top:  2px;
}

/* ============================================================
   FISH POPUP — weight & mutation sub-line
   ============================================================ */
.fish-popup-extra {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
    margin-top:     8px;
}

.fish-popup-mutation {
    font-size:   13px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.fish-popup-weight {
    font-size:  12px;
    color:      #9bd4ec;
    font-weight: 600;
}

/* ============================================================
   SELL BUTTON — already shows $value from JS, no extra CSS needed
   ============================================================ */

/* ============================================================
   VOIDBORN special text shimmer (optional flex on name)
   ============================================================ */
.mutation-voidborn .inv-card-name,
.mutation-voidborn .inv-item-name {
    background: linear-gradient(90deg, #fff, #b8c4ff, #c0f0ff, #fff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    animation: voidbornText 3s linear infinite;
}

@keyframes voidbornText {
    0%   { background-position: 0%   50%; }
    100% { background-position: 300% 50%; }
}

/* ============================================================
   GENESIS shimmer on name
   ============================================================ */
.mutation-genesis .inv-card-name,
.mutation-genesis .inv-item-name {
    background: linear-gradient(90deg, #4ade80, #22d3ee, #a78bfa, #4ade80);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    animation: genesisText 3.5s linear infinite;
}

@keyframes genesisText {
    0%   { background-position: 0%   50%; }
    100% { background-position: 300% 50%; }
}

/* ============================================================
   PRISM shimmer on name
   ============================================================ */
.mutation-prism .inv-card-name {
    background: linear-gradient(90deg, #ff4d4d, #ffd24d, #4dff88, #4dd2ff, #b84dff, #ff4d4d);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    animation: prismText 4s linear infinite;
}

@keyframes prismText {
    0%   { background-position: 0%   50%; }
    100% { background-position: 300% 50%; }
}


.showcase-slot-weight {
    font-size: 9px;
    color: #9bd4ec;
    font-weight: 600;
    line-height: 1.2;
}
.showcase-slot-mutation {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
}


/* ============================================
   SHOWCASE - Inventory Pick List (compact grid)
   ============================================ */
#showcase-inventory-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.showcase-pick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(100,200,255,0.15);
    border-radius: 12px;
    padding: 10px 8px;
    transition: transform 0.15s;
}

.showcase-pick-card:hover {
    transform: translateY(-2px);
}

.showcase-pick-card.in-showcase {
    border-color: rgba(111,227,255,0.6) !important;
    background: rgba(111,227,255,0.06);
}

.showcase-pick-img {
    width: 52px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.showcase-pick-info {
    width: 100%;
}

.showcase-pick-name {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.showcase-pick-rarity {
    font-size: 10px;
    font-weight: 700;
    margin-top: 1px;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.showcase-pick-weight {
    font-size: 10px;
    color: #9bd4ec;
    margin-top: 2px;
}

.showcase-pick-mutation {
    font-size: 10px;
    font-weight: 700;
    margin-top: 2px;
}

.showcase-pick-slot-tag {
    font-size: 10px;
    color: #6fe3ff;
    font-weight: 700;
    margin-top: 2px;
}

.showcase-pick-btn {
    width: 100%;
    padding: 7px 6px;
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}


.btn-discord {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background: #5865F2;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-discord:hover { background: #4752c4; }

/* ============================================ */
/* Discord Activity: loading state untuk auth    */
/* buttons semasa tunggu discordSdk.ready() atau */
/* RPC round-trip (authorize/openExternalLink).  */
/* ============================================ */
.btn-discord.is-loading,
.btn-google.is-loading {
    opacity: 0.75;
    cursor: wait;
    pointer-events: none;
}
.btn-auth-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: middle;
    animation: btn-auth-spin 0.7s linear infinite;
}
.btn-google .btn-auth-spinner {
    border-color: rgba(0,0,0,0.2);
    border-top-color: #4285F4;
}
@keyframes btn-auth-spin {
    to { transform: rotate(360deg); }
}

.auth-divider {
    text-align: center;
    color: #6b8fa8;
    margin: 16px 0;
    font-size: 13px;
    position: relative;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 42%;
    height: 1px;
    background: #1e3a5f;
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }

/* ============================================
   ROD OVERLAY — gambar rod player masa fishing
   ============================================ */
#rod-overlay {
    position: absolute;
    width: 203px;
    height: 220px;
    object-fit: contain;
    right: 6%;
    bottom: 12%;
    transform-origin: bottom right;
    transform: rotate(-6deg) translateY(0px);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

#rod-overlay.visible {
    opacity: 1;
}

@keyframes rodBiteJolt {
    0%   { transform: rotate(-6deg) translateY(0px); }
    30%  { transform: rotate(-21deg) translateY(8px); }
    60%  { transform: rotate(1deg) translateY(-4px); }
    100% { transform: rotate(-6deg) translateY(0px); }
}

#rod-overlay.rod-bite-jolt {
    animation: rodBiteJolt 0.3s ease;
}

@keyframes rodIdleFloat {
    0%, 100% { transform: rotate(-6deg) translateY(0px); }
    50%       { transform: rotate(-3deg) translateY(-3px); }
}

#rod-overlay.rod-waiting {
    animation: rodIdleFloat 2.2s ease-in-out infinite;
}


/* ============================================
   FIX: Elak long-press select/copy/save gambar
   kat fishing area (rod, sea, fish popup)
   ============================================ */
.fishing-area img,
.fishing-area,
#minigame-tap-btn,
.fish-popup {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;   /* iOS: matikan popup "Save Image/Copy" */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    touch-action: manipulation;     /* elak double-tap zoom / delay */
}

/* ============================================
   FIX: Fish popup tercut kat skrin kecik (mobile)
   ============================================ */
@media (max-width: 480px) {
    .fish-popup {
        max-width: 80%;
        padding: 12px 16px;
    }
    .fish-popup-img {
        width: 70px;
        height: 98px;
    }
    .fish-popup-name {
        font-size: 13px;
    }
    .fish-popup-rarity {
        font-size: 11px;
    }
}

/* FLOATING MAP BUTTON */
#map-float-btn {
    position: fixed;
    top: 140px;
    left: 20px;
    width: 64px;
    height: 64px;
    z-index: 150;
    cursor: grab;
    animation: mapFloat 2.6s ease-in-out infinite;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));
    touch-action: none;
}
#map-float-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}
#map-float-btn.dragging {
    cursor: grabbing;
    animation: none;
}
@keyframes mapFloat {
    0%, 100% { transform: translateY(0px) rotate(-3deg); }
    50%       { transform: translateY(-10px) rotate(3deg); }
}

/* MAP SELECT LIST ITEM */
.map-select-item {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(100,200,255,0.2);
    cursor: pointer;
    position: relative;
    transition: transform 0.15s;
}
.map-select-item:hover { transform: translateY(-3px); }
.map-select-item img {
    width: 100%;
    height: 110px;
    object-fit: cover;
}
.map-select-item .map-select-label {
    position: absolute;
    top: 10px;
    left: 14px;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.map-select-item .map-select-bottom {
    background: rgba(10,20,35,0.9);
    padding: 10px 14px;
    text-align: center;
    font-weight: 700;
}
.map-select-item.locked img { filter: brightness(0.4) grayscale(0.5); }
.map-select-item.current { border-color: #4ade80; box-shadow: 0 0 14px rgba(74,222,128,0.4); }
.map-select-bottom.locked-price { color: #ffd24d; }
.map-select-bottom.current-tag { color: #4ade80; }
.map-select-bottom.go-tag { color: #6fe3ff; }
.map-select-bottom .map-select-harbor {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #7dd3fc;
    margin-top: 3px;
    opacity: 0.9;
}

/* MAP TRANSITION OVERLAY */
#map-transition-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}
#map-transition-overlay.hidden { display: none; }
.map-transition-inner {
    text-align: center;
    width: 320px;
}
#map-transition-boat {
    width: 160px;
    margin-bottom: 18px;
    animation: boatFloat 2.2s ease-in-out infinite;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,0.6));
}
@keyframes boatFloat {
    0%, 100% { transform: translateY(0px) rotate(-2deg); }
    50%       { transform: translateY(-14px) rotate(2deg); }
}
#map-transition-text {
    color: #9bd4ec;
    font-weight: 700;
    margin-bottom: 14px;
}
.map-transition-bar-bg {
    width: 100%;
    height: 16px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(100,200,255,0.25);
}
.map-transition-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6fe3ff, #18c4e8);
    transition: width 1s linear;
}
#map-transition-timer {
    margin-top: 10px;
    color: #ffd24d;
    font-weight: 800;
    font-size: 18px;
}

/* Base avatar frame wrap */
.avatar-frame-wrap {
    position: relative;
    display: inline-block;
    border-radius: 50%;
}

/* CSS frame styles */
.frame-solid { border: var(--frame-width, 4px) solid var(--frame-color, #6fe3ff); border-radius: 50%; }
.frame-glow {
    border: var(--frame-width, 4px) solid var(--frame-color, #6fe3ff);
    border-radius: 50%;
    box-shadow: 0 0 18px var(--frame-color, #6fe3ff), 0 0 30px var(--frame-color, #6fe3ff);
}
.frame-gradient {
    border: var(--frame-width, 4px) solid transparent;
    border-radius: 50%;
    background: linear-gradient(#0c2036,#0c2036) padding-box,
                var(--frame-color, linear-gradient(135deg,#ff4d4d,#4dd2ff)) border-box;
}
.frame-pulse {
    border: var(--frame-width, 4px) solid var(--frame-color, #f87171);
    border-radius: 50%;
    animation: framePulse 1.8s ease-in-out infinite;
}
@keyframes framePulse {
    0%,100% { box-shadow: 0 0 10px var(--frame-color, #f87171); }
    50%      { box-shadow: 0 0 26px var(--frame-color, #f87171); }
}
.frame-rainbow {
    border-radius: 50%;
    border: var(--frame-width, 4px) solid transparent;
    background: linear-gradient(#0c2036,#0c2036) padding-box,
                linear-gradient(90deg,#ff4d4d,#ffe14d,#4dff88,#4dd2ff,#b84dff,#ff4d4d) border-box;
    background-size: 300% 100%, 300% 100%;
    animation: frameRainbow 3s linear infinite;
}
@keyframes frameRainbow {
    0% { background-position: 0% 0%, 0% 0%; }
    100% { background-position: 0% 0%, 300% 0%; }
}

/* Image-type frame - overlay PNG di atas avatar */
.frame-image-overlay {
    position: absolute;
    inset: -8px; /* laraskan ikut saiz PNG frame kau */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* ---- Avatar Frame Shop Grid ---- */
#frame-shop-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.frame-shop-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 16px 12px;
    border: 1px solid rgba(100, 200, 255, 0.15);
}

.frame-shop-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    margin-bottom: 10px;
    position: relative;
}

.frame-shop-name {
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    margin-bottom: 4px;
}

.frame-shop-price {
    font-size: 12px;
    color: #ffd24d;
    font-weight: 700;
    margin-bottom: 10px;
}

.frame-shop-card .btn {
    width: 100%;
    padding: 8px;
    font-size: 12px;
}

/* ============================================
   BAG MODAL - paste snippet ni ke dalam style.css
   ============================================ */

.bag-tabs {
    display: flex;
    gap: 8px;
    padding: 14px 22px 0;
}

.bag-tab {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(100, 200, 255, 0.2);
    color: #a8d4ec;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s;
}

.bag-tab:hover { background: rgba(255,255,255,0.12); }

.bag-tab.active {
    background: linear-gradient(135deg, #18c4e8, #0a7fb3);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 14px rgba(24, 196, 232, 0.4);
}

.bag-subtabs {
    display: flex;
    gap: 6px;
    padding: 10px 22px 0;
}

.bag-subtab {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(100, 200, 255, 0.15);
    color: #8fb8cc;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.bag-subtab.active {
    background: rgba(111, 227, 255, 0.18);
    border-color: #6fe3ff;
    color: #6fe3ff;
}

.bag-item-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px 0;
    font-size: 13px;
    color: #9bd4ec;
}

.bag-item-info .btn-sm {
    width: auto;
}

#modal-bag #bag-content-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

#modal-bag #bag-content-list .inv-list-item {
    width: 200px !important;
    max-width: 200px !important;
    flex: 0 0 200px !important;
}

#modal-bag #bag-content-list .shop-item {
    width: 100% !important;
    flex: 0 0 100% !important;
}

.bag-card {
    cursor: grab;
    transition: opacity 0.15s, transform 0.15s;
}
.bag-card:active { cursor: grabbing; }
.bag-card.bag-dragging { opacity: 0.35; transform: scale(0.98); }

.bag-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.bag-card-actions .btn { width: auto; padding: 8px 12px; font-size: 12px; }
.bag-sell-btn, .bag-sell-boost-btn { color: #7dffb0 !important; }
.bag-del-btn, .bag-del-boost-btn { padding: 8px 10px !important; }

#promo-float-btn {
    position: fixed; right: 18px; bottom: 100px; width: 56px; height: 56px;
    border-radius: 50%; background: radial-gradient(circle, rgba(255,210,77,0.25), rgba(168,85,247,0.15));
    border: 2px solid rgba(255,210,77,0.5); display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 150; box-shadow: 0 0 18px rgba(255,210,77,0.4);
    animation: promoFloat 2.4s ease-in-out infinite;
}
#promo-float-btn img { width: 32px; height: 32px; }
@keyframes promoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background: #fff;
    color: #3c4043;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-google:hover { background: #f8f9fa; }

.player-avatar.has-frame {
    border-color: transparent;
    box-shadow: none;
}