@charset "UTF-8";

/* ==========================================================================
   マジックパンクTRPG マップツール デザインシステム
   ========================================================================== */

:root {
    /* Colors (Character Sheet Heritage) */
    --c-bg-dark: #0a0a0c;
    --c-bg-main: #121214;
    --c-text-main: #e0e0e3;
    --c-text-muted: #888890;

    --c-accent-cyan: #07aee5;
    --c-accent-purple: #9d46ff;
    --c-neon-cyan: #00f3ff;

    /* Glassmorphism */
    --c-bg-glass: rgba(18, 18, 20, 0.75);
    --c-border-glass: rgba(255, 255, 255, 0.12);
    --blur-glass: blur(12px) saturate(180%);

    /* Grid & Borders */
    --c-border-grid: rgba(7, 174, 229, 0.3);
    --shadow-glow: 0 0 10px rgba(7, 174, 229, 0.2);

    /* Fonts */
    --font-head: 'Barlow Semi Condensed', sans-serif;
    --font-body: 'Noto Sans JP', sans-serif;
}

/* Glassmorphism Utilities */
.glass-panel {
    background: var(--c-bg-glass);
    backdrop-filter: var(--blur-glass);
    -webkit-backdrop-filter: var(--blur-glass);
    border: 1px solid var(--c-border-glass);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-btn {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    border: 1px solid var(--c-border-glass);
    color: var(--c-text-main);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.glass-btn:hover {
    background: rgba(7, 174, 229, 0.2);
    border-color: var(--c-accent-cyan);
    box-shadow: 0 0 15px rgba(7, 174, 229, 0.3);
    color: #fff;
}

.glass-btn.active {
    background: rgba(7, 174, 229, 0.3);
    border-color: var(--c-accent-cyan);
    color: var(--c-neon-cyan);
    box-shadow: inset 0 0 10px rgba(7, 174, 229, 0.2), 0 0 15px rgba(7, 174, 229, 0.3);
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
    background: var(--c-accent-cyan);
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(7, 174, 229, 0.3);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--c-neon-cyan);
}

/* Base Headings */
h3 {
    font-family: var(--font-head);
    color: var(--c-accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

h3::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1.2em;
    background: var(--c-accent-cyan);
    box-shadow: 0 0 8px var(--c-accent-cyan);
}