/**
 * Orienteering Game - Main Stylesheet
 * Meadow Sprite theme
 *
 * Architecture:
 * - tokens/   : Design tokens
 * - components/: UI components
 * - layouts/  : Layout positioning
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Nunito:wght@600;700;800&display=swap');

@import './tokens/_index.css';
@import './components/_index.css';
@import './layouts/_index.css';

body {
    margin: 0;
    overflow: hidden;
    font-family: var(--font-sans);
    user-select: none;
    -webkit-font-smoothing: antialiased;
    color: var(--text-dark);
}

canvas#mapCanvas {
    width: 100%;
    height: 100%;
}

.desktop-only {
    display: block;
}

body.is-mobile .desktop-only {
    display: none !important;
}

#compass {
    width: 100px;
    height: 100px;
    border: 5px solid var(--ac-wood-dark);
    border-radius: 50%;
    background: var(--ac-cream);
    display: none;
    justify-content: center;
    align-items: center;
    color: var(--ac-text);
    font-weight: var(--font-extrabold);
    font-size: 24px;
    box-shadow: var(--shadow-ac-bubble);
}

#compass-needle {
    position: absolute;
    width: 8px;
    height: 86%;
    background: linear-gradient(to bottom, #ef4444 50%, var(--ac-text) 50%);
    border-radius: 4px;
    transform: rotate(0deg);
}

#control-desc-container {
    width: auto;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--ac-cream);
    border: 3px solid var(--ac-wood-dark);
    border-radius: 16px;
    padding: 6px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: black;
    z-index: 200;
    pointer-events: none;
    display: none;
    box-shadow: var(--shadow-ac-panel);
}

#mini-control-list {
    background: var(--ac-cream);
    border: 2px solid var(--ac-border);
    border-radius: 14px;
    padding: 4px;
    font-size: 11px;
    font-family: Arial, sans-serif;
    color: black;
    z-index: 100;
    display: none;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: var(--shadow-ac-bubble);
}

#minimap-container {
    width: 280px;
    height: 280px;
    border: 4px solid var(--ac-wood-dark);
    border-radius: 24px;
    background: var(--ac-cream);
    overflow: hidden;
    box-shadow: var(--shadow-ac-panel);
    transition:
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}