/*
 * OceanOnline Game Engine
 * Copyright (c) 2025 Jay Blankenship. All rights reserved.
 * 
 * This software is proprietary and confidential. Unauthorized copying,
 * distribution, modification, or use of this software is strictly prohibited
 * except for normal consumer gameplay as intended.
 * 
 * Company registration: Pending
 * For licensing inquiries, contact: jayblankenship@outlook.com
 */

/* Default Compass Theme */
.compass-face {
    background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(240,240,240,0.8) 100%);
    border: 4px solid #2c3e50;
    box-shadow: 
        0 0 20px rgba(0,0,0,0.3),
        inset 0 0 20px rgba(0,0,0,0.1);
}

/* Direction markers */
.direction {
    position: absolute;
    font-size: 2rem;
    font-weight: bold;
    color: #2c3e50;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
    border: 2px solid #2c3e50;
}

.direction.north {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #e74c3c;
    color: white;
    border-color: #c0392b;
}

.direction.north.active {
    transform: translateX(-50%) scale(1.2);
}

.direction.east {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.direction.east.active {
    transform: translateY(-50%) scale(1.2);
}

.direction.south {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.direction.south.active {
    transform: translateX(-50%) scale(1.2);
}

.direction.west {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.direction.west.active {
    transform: translateY(-50%) scale(1.2);
}

/* Compass needle */
.needle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.needle {
    position: absolute;
    top: calc(50% - 60px);
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 120px;
    background: linear-gradient(to bottom, #e74c3c 0%, #e74c3c 50%, #2c3e50 50%, #2c3e50 100%);
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    transform-origin: center 60px;
}

.needle::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 16px solid #e74c3c;
}

.needle::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 16px solid #2c3e50;
}

/* Center dot with bubble level functionality */
.needle-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(
        calc(-50% + var(--bubble-x, 0px)), 
        calc(-50% + var(--bubble-y, 0px))
    );
    width: 20px;
    height: 20px;
    background: #34495e;
    border-radius: 50%;
    border: 4px solid #ecf0f1;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    transition: transform 0.2s ease-out;
}

/* Bubble level active state - add subtle glow when leveling */
.needle-container.bubble-active::after {
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.6), 0 0 10px rgba(0,0,0,0.3);
    border-color: rgba(52, 152, 219, 0.8);
}

/* Degree display */
.degree-display {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(44, 62, 80, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 1.2rem;
    font-weight: bold;
    min-width: 80px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Compass markings */
.compass-face::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border-radius: 50%;
    border: 2px solid rgba(44, 62, 80, 0.2);
}

/* Tick marks for degrees */
.compass-face::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, transparent 2deg,
        rgba(44, 62, 80, 0.3) 2deg, rgba(44, 62, 80, 0.3) 3deg,
        transparent 3deg, transparent 12deg,
        rgba(44, 62, 80, 0.3) 12deg, rgba(44, 62, 80, 0.3) 13deg,
        transparent 13deg, transparent 22deg,
        rgba(44, 62, 80, 0.3) 22deg, rgba(44, 62, 80, 0.3) 23deg,
        transparent 23deg, transparent 32deg,
        rgba(44, 62, 80, 0.3) 32deg, rgba(44, 62, 80, 0.3) 33deg,
        transparent 33deg, transparent 42deg,
        rgba(44, 62, 80, 0.3) 42deg, rgba(44, 62, 80, 0.3) 43deg,
        transparent 43deg, transparent 52deg,
        rgba(44, 62, 80, 0.3) 52deg, rgba(44, 62, 80, 0.3) 53deg,
        transparent 53deg, transparent 62deg,
        rgba(44, 62, 80, 0.3) 62deg, rgba(44, 62, 80, 0.3) 63deg,
        transparent 63deg, transparent 72deg,
        rgba(44, 62, 80, 0.3) 72deg, rgba(44, 62, 80, 0.3) 73deg,
        transparent 73deg, transparent 82deg,
        rgba(44, 62, 80, 0.3) 82deg, rgba(44, 62, 80, 0.3) 83deg,
        transparent 83deg, transparent 92deg,
        rgba(44, 62, 80, 0.3) 92deg, rgba(44, 62, 80, 0.3) 93deg,
        transparent 93deg, transparent 360deg
    );
}