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

/* Start Menu & Map Select */
#startMenu, #mapSelect {
    width: 300px;
    background:white;
    border:1px solid black;
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    z-index:1000;
    padding:40px 30px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

#startMenu h1, #mapSelect h1 {
    color:black;
    margin-bottom:30px;
    font-size:28px;
}

.button {
    margin:10px 0;
    cursor:pointer;
    padding:12px 32px;
    font-size:16px;
    background:white;
    color:black;
    border:1px solid black;
    width:150px;
}

.button:hover {
    background:white;
}

.button:active {
    transform:scale(0.98);
}

/* Hidden class */
.hidden { display:none !important; }

/* Map View */
#map-view {
    width:100vw;
    height:100vh;
    background:#87CEEB;
    position:relative;
    display:block;
    display:flex;
    align-items:center;
    justify-content:center;
    color:black;
    font-size:24px;
}

#map-view::after {
    content:'Click to Cast Your Line';
}

/* Back Button */
.back-button {
    position: fixed;
    top: 20px;
    left: 20px;
    padding: 12px 24px;
    font-size: 16px;
    background: white;
    color: black;
    border: 1px solid black;
    cursor: pointer;
    z-index: 1001;
}

/* Power Bar */
/* Removed - no longer needed */

/* Underwater View */
#underwater-view {
    width:100vw;
    height:100vh;
    background:#004080;
    position:relative;
    display:block;
    color:white;
    text-align:center;
    overflow:hidden;
}

/* Fishing Canvas */
#fishing-canvas {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
}

/* Tension Bar */
#tension-bar-container {
    display:none;
}

#tension-bar-fill {
    height:100%;
    width:0%;
    background:red;
    transition:width 0.1s;
}

#tension-text {
    display:none;
}

#drag-text {
    display:none;
}

#status-message {
    display:none;
}

/* Desktop Info Panel */
#desktop-info-panel {
    position:fixed;
    top:20px;
    right:20px;
    width:280px;
    background:white;
    border:1px solid black;
    padding:20px;
    color:black;
    z-index:50;
    display:none;
}

#desktop-info-panel label {
    display:block;
    font-size:12px;
    margin-top:15px;
    margin-bottom:8px;
    color:black;
}

#desktop-info-panel label:first-child {
    margin-top:0;
}

#panel-tension-bar-container {
    width:100%;
    height:25px;
    border:1px solid black;
    background:white;
    margin-bottom:8px;
}

#panel-tension-bar-fill {
    height:100%;
    width:0%;
    background:gray;
}

#panel-drag-text {
    font-size:18px;
    color:black;
    padding:8px;
    background:white;
    border:1px solid black;
    text-align:center;
}

#panel-distance-text {
    font-size:18px;
    color:black;
    padding:8px;
    background:white;
    border:1px solid black;
    text-align:center;
}

/* Center Alert Messages */
#center-alert {
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-size:32px;
    color:black;
    text-align:center;
    z-index:200;
    display:none;
    min-width:400px;
    line-height:1.5;
}

#center-alert.show {
    display:block;
}

/* Show desktop panel on larger screens */
@media (min-width: 769px) {
    #desktop-info-panel {
        display:block;
    }
}

/* Set Hook Button */
#setHookButton {
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    z-index:100;
    padding:15px 30px;
    font-size:18px;
    display:block;
    cursor:pointer;
    background:white;
    color:black;
    border:1px solid black;
}

#setHookButton:hover {
    background:white;
}

#reelButton {
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    z-index:100;
    padding:15px 30px;
    font-size:18px;
    display:block;
    cursor:pointer;
    background:white;
    color:black;
    border:1px solid black;
}

#reelButton:hover {
    background:white;
}

#reelButton:active {
    transform:translateX(-50%) scale(0.95);
}

/* Mobile Controls */
#mobile-controls {
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    display:none;
    gap:10px;
    z-index:100;
    width:90%;
    max-width:400px;
}

.mobile-btn {
    flex:1;
    padding:15px 20px;
    font-size:16px;
    color:black;
    background:white;
    border:1px solid black;
    cursor:pointer;
}

.mobile-btn:active {
    transform:scale(0.95);
}

.mobile-btn:hover {
    background:white;
}

.mobile-reel-btn {
    background:white;
    flex:1.5;
}

.mobile-reel-btn:hover {
    background:white;
}

/* Mobile Catch Button */
#mobile-catch-btn {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    display:none;
    padding:20px 40px;
    font-size:20px;
    color:black;
    background:white;
    border:1px solid black;
    cursor:pointer;
    z-index:101;
}

#mobile-catch-btn:active {
    transform:translate(-50%, -50%) scale(0.95);
}

/* Show mobile catch button only on mobile and when fish is close */
@media (max-width: 768px) {
    #mobile-catch-btn.show-catch {
        display:block;
    }
}

/* Settings Page */
#settingsPage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

#settingsBox {
    background: white;
    border: 2px solid black;
    padding: 40px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

#settingsBox h1 {
    text-align: center;
    margin-bottom: 30px;
    color: black;
    font-size: 28px;
}

#settingsContent {
    margin-bottom: 30px;
}

.setting-item {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
}

.setting-item label {
    font-weight: bold;
    margin-bottom: 5px;
    color: black;
    font-size: 14px;
}

.setting-item input[type="text"] {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    font-family: monospace;
    background: #f9f9f9;
}

.setting-item small {
    color: #666;
    font-size: 12px;
    margin-top: 3px;
}

#settingsBox .button {
    width: 100%;
    margin: 10px 0;
}

/* Show mobile controls only on mobile/tablet devices */
@media (max-width: 768px) {
    #mobile-controls {
        display:flex;
    }
}

.panel-fish-info {
    display:none;
}