/* --- CSS Styling --- */
        body {
            background-color: #f0f8ff; /* AliceBlue */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            color: #333;
            user-select: none; /* Prevent highlighting text while playing */
        }

        #game-wrapper {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }
        
        /* The Viewport - Fixed Size */
        #game-container {
            width: 600px;
            height: 400px;
            border: 5px solid #228B22; /* ForestGreen */
            position: relative;
            overflow: hidden; /* Only show what's in the viewport */
            background-color: #00BFFF; /* Deep Sky Blue */
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            border-radius: 4px;
        }

        /* The World - Movable Container */
        #world-container {
            position: absolute;
            width: 3000px; /* Big Ocean */
            height: 3000px; /* Big Ocean */
            transition: transform 0.05s linear;
        }

        /* Elements inside the World */
        
        #ocean {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #00BFFF; /* Deep Sky Blue - Set in JS for size */
        }

        /* NEW STARTER LAND */
        #starter-land { 
            width: 100px;
            height: 100px;
            background-color: #228B22; /* ForestGreen */
            position: absolute;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(0,0,0,0.5) inset;
            z-index: 5;
        }

        /* SHOP ISLAND (RESIZED) */
        #island {
            width: 400px; /* INCREASED SIZE to fit shops/pond */
            height: 400px; /* INCREASED SIZE to fit shops/pond */
            background-color: #228B22; /* ForestGreen */
            position: absolute;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(0,0,0,0.5) inset;
            z-index: 5; /* Ensure island is over ocean */
        }
        
        /* NEW POND */
        #pond {
            width: 180px;
            height: 180px;
            background-color: #00AEEF; /* Lighter Blue for pond */
            position: absolute;
            border-radius: 50%;
            top: 50px; /* Position it on the island */
            left: 50px;
            border: 5px solid #1C7B1C; /* Darker green border */
            box-shadow: 0 0 10px rgba(0,0,0,0.3) inset;
            z-index: 6;
        }


        #dock {
            width: 60px;
            height: 120px;
            background-color: #8B4513; /* SaddleBrown */
            position: absolute;
            border-radius: 5px 5px 0 0;
            z-index: 5;
        }

        /* SHOPS */
        #sell-shop, #buy-shop {
            width: 50px;
            height: 50px;
            border-radius: 5px;
            background-color: #f0f0f0;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            z-index: 10;
            border: 2px solid #ccc;
        }
        
        .shop-hint {
            position: absolute;
            bottom: -30px;
            background-color: rgba(0,0,0,0.7);
            color: white;
            padding: 5px;
            border-radius: 3px;
            font-size: 12px;
            white-space: nowrap;
            display: none;
        }

        /* Player and Boat */

        #player {
            width: 30px;
            height: 30px;
            background-color: #FFD700; /* Gold */
            border: 2px solid #DAA520;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 15;
            transition: opacity 0.1s;
        }
        
        /* NEW: Styling for fish image elements */
        .fish-entity {
    /* Base size for very small fish. Size is now dynamic via JS. */
    min-width: 30px; 
    min-height: 30px;
    /* Added styles for image display */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: transform 0.05s linear; /* Keep smooth movement */
}
        #boat {
            width: 60px; /* Default */
            height: 100px; /* Default */
            background-color: #8B4513; /* Default */
            border: 2px solid #654321;
            border-radius: 40px 40px 10px 10px / 50px 50px 5px 5px;
            position: absolute;
            z-index: 7;
            transform-origin: center;
            transition: width 0.3s, height 0.3s, background-color 0.3s;
        }
        
        #lure {
            width: 10px;
            height: 10px;
            background-color: red;
            border: 1px solid black;
            border-radius: 50%;
            position: absolute;
            z-index: 12;
            display: none;
            pointer-events: none;
        }

        /* Directional Arrow */
        #direction-arrow {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 30px;
            color: #FF4500; /* OrangeRed */
            z-index: 50;
            animation: pulse 1s infinite alternate;
            display: none; /* Controlled by JS */
        }

        @keyframes pulse {
            from {
                transform: scale(1);
                opacity: 0.8;
            }
            to {
                transform: scale(1.1);
                opacity: 1;
            }
        }

        /* --- UI and HUD --- */
        .hud-panel {
            background-color: #fff;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #ddd;
            width: 250px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            position: relative;
        }

        .hud-panel h2 {
            margin-top: 0;
            color: #1E90FF; /* DodgerBlue */
            border-bottom: 2px solid #eee;
            padding-bottom: 5px;
        }

        #game-log {
            min-height: 80px;
            max-height: 80px;
            overflow-y: auto;
            border: 1px solid #ccc;
            padding: 5px;
            background-color: #f9f9f9;
            margin-bottom: 15px;
            font-size: 14px;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 100;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: #fefefe;
            padding: 20px;
            border: 1px solid #888;
            border-radius: 8px;
            width: 80%;
            max-width: 400px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .close-button {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close-button:hover,
        .close-button:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        .fish-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px dotted #eee;
        }

        .fish-item:last-child {
            border-bottom: none;
        }

        .fish-item button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
        }

        .fish-item button:hover {
            background-color: #45a049;
        }

        #modal-sell-all-button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 15px;
        }
        
        #modal-sell-all-button:hover {
            background-color: #0056b3;
        }

        #modal-sell-all-button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }


        /* Buy Modal Styling */
        #buy-tabs {
            display: flex;
            margin-bottom: 15px;
        }

        .buy-tab {
            padding: 10px 15px;
            cursor: pointer;
            border: 1px solid #ccc;
            border-bottom: none;
            background-color: #f9f9f9;
            border-radius: 5px 5px 0 0;
            font-weight: bold;
        }

        .buy-tab.active {
            background-color: #fff;
            border: 1px solid #ccc;
            border-bottom: 2px solid #fff;
            transform: translateY(2px);
        }

        #buy-item-display {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 4px;
            min-height: 150px;
        }

        #buy-item-card {
            flex-grow: 1;
            text-align: center;
            padding: 0 10px;
        }

        #buy-item-card h4 {
            margin: 5px 0;
            color: #FF8C00; /* DarkOrange */
        }
        
        #buy-item-card #item-design {
            font-size: 16px;
            color: #555;
            min-height: 20px;
        }

        .nav-button {
            background-color: #ddd;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            border-radius: 4px;
            font-weight: bold;
            font-size: 18px;
            line-height: 1;
        }
        
        .nav-button:hover {
            background-color: #ccc;
        }

        #buy-button {
            width: 100%;
            padding: 12px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
        }

        #buy-button:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
        }

        /* Minimap Styling */
        #minimap-content {
            width: 300px; /* MINIMAP_SIZE */
            height: 300px; /* MINIMAP_SIZE */
            background-color: #00BFFF;
            border: 5px solid #228B22;
            position: relative;
            box-shadow: 0 0 15px rgba(0,0,0,0.5);
        }

        #minimap-content h3 {
            position: absolute;
            top: -30px;
            left: 0;
            color: white;
            background-color: #000;
            padding: 5px 10px;
            border-radius: 3px;
            z-index: 20;
        }

        /* Minimap Elements (Icons) */
        .minimap-icon {
            position: absolute;
            border-radius: 50%;
            box-sizing: border-box; 
            z-index: 10;
        }

        /* Specific Minimap Icon Styles */
        #minimap-ocean {
            width: 100%;
            height: 100%;
            background-color: #00BFFF;
            position: absolute;
        }

        /* Land Masses - Dimensions are 1/10th of world size */
        #starter-land-mini {
            background-color: #228B22; /* ForestGreen */
            width: 10px; /* 100px / 10 */
            height: 10px; /* 100px / 10 */
        }

        #island-mini {
            background-color: #228B22; /* ForestGreen */
            width: 40px; /* 400px / 10 */
            height: 40px; /* 400px / 10 */
            border-radius: 5px; 
        }

        #pond-mini {
            background-color: #00AEEF; /* Lighter Blue for pond */
            border: 1px solid #1C7B1C;
            width: 18px; /* 180 / 10 */
            height: 18px; /* 180 / 10 */
            top: 5px; /* 50 / 10 */
            left: 5px; /* 50 / 10 */
        }

        #dock-mini {
            background-color: #8B4513; /* SaddleBrown */
            width: 6px; /* 60 / 10 */
            height: 12px; /* 120 / 10 */
            border-radius: 0;
        }

        /* Shops */
        #sell-shop-mini, #buy-shop-mini {
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            width: 5px; /* 50 / 10 */
            height: 5px; /* 50 / 10 */
            border-radius: 1px;
        }

        /* Player */
        #minimap-player {
            width: 5px; 
            height: 5px; 
            background-color: #FFD700;
            border: 1px solid #DAA520;
            border-radius: 50%;
            z-index: 20;
        }

/* ADD to fishing.css */

/* --- FISH IMAGE DEFINITIONS (Swap Emojis for Images) --- */

/* Ocean Fish */
.fish-entity.minnow { background-image: url('/fishimages/minnow.png'); }
.fish-entity.bluegill { background-image: url('/fishimages/bluegill.png'); }
.fish-entity.perch { background-image: url('/fishimages/perch.png'); }
.fish-entity.largemouth_bass { background-image: url('/fishimages/largemouth.png'); }
.fish-entity.trophy_bass { background-image: url('/fishimages/trophybass.png'); }
/* Pond Fish */
.fish-entity.guppy { background-image: url('/fishimages/guppy.png'); }
.fish-entity.koi { background-image: url('/fishimages/koi.png'); }
.fish-entity.catfish { background-image: url('/fishimages/catfish.png'); }
.fish-entity.legendary_frog { background-image: url('/fishimages/legfrog.png'); }

/* Trash */
.fish-entity.tire { background-image: url('/fishimages/tire.png/'); } 
.fish-entity.gold_boot { background-image: url('/fishimages/tire.png'); }

/* Styling for the fish image in the inventory modal */
.inventory-fish-icon {
    /* Reuses the fish-entity image definition but overrides size for UI */
    display: inline-block;
    width: 20px; /* Smaller size for UI */
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
}

/* Swimming Visuals */
#player.swimming {
    /* Make the player look a little submerged and smaller */
    opacity: 0.7; 
    transform: scale(0.8);
    transition: all 0.2s ease-out; /* Smooth the visual change */
}

.fish-entity.shark { 
    width: 60px; /* Larger entity to represent a Great White Shark */
    height: 60px;
    /* Using a distinct, easily recognizable image for the shark */
    background-image: url('/fishimages/tire.png'); 
    background-color: transparent;
    transform-origin: center;
}