/* === MAIN.CSS === */
/* =========================================
   1. CORE VARIABLES & RESET
   ========================================= */
:root {
    --main-color: #33ff00;
    --bg-color: #050505;
    --panel-bg: #0a0a0a;
    --panel-text: #33ff00;
    --header-bg: #000000;
    --success-color: #ffd700;
    --warning-color: #ff3333;

    /* CRT Variables */
    --glow-strength: 0.6;
    --scanline-opacity: 0.3;
    --blur-amount: 0.5px;
    --flicker-strength: 0.03;
    --jitter-x: 0px;
    --jitter-y: 0px;
    --vignette-opacity: 0;
    --aberration-offset: 0px;
    --rolling-bar-opacity: 0;
    --rolling-bar-speed: 8s;
    --vis-lines-pct: 100%;
    --vis-lines-count: 100;
    --ui-font-size: 14px;

    /* Geometry */
    --view-height: 100%;

    /* Typography */
    --cjk-stack: "Noto Sans JP", "Noto Sans SC", "Noto Sans KR", "Microsoft YaHei", "Meiryo", "Malgun Gothic", sans-serif;
    --font-family: 'VT323', monospace;
    --font-size: 28px;
    --letter-spacing: 1px;
    --line-height: 1.5;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh;
    left: 0 !important;
    top: 0 !important;
    position: relative;
    overflow-x: hidden;
}

body {
    background-color: var(--bg-color);
    color: var(--main-color);
    font-family: var(--font-family), var(--cjk-stack);
    display: flex;
    flex-direction: column;
}

/* =========================================
   2. SCROLLBARS
   ========================================= */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--bg-color);
}

*::-webkit-scrollbar-corner {
    background: var(--bg-color);
}

*::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 4px;
    opacity: 0.5;
    border: 1px solid var(--bg-color);
}

*::-webkit-scrollbar-thumb:hover {
    background: #fff;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--main-color) var(--bg-color);
}

/* =========================================
   3. ACCESSIBILITY & PHOTOSENSITIVITY / EPILEPSY SAFE
   ========================================= */

/* Screen Reader Only Utility */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Skip to Content Link (Visually hidden until focused via Tab) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 10px;
    background: var(--panel-bg, #000);
    color: var(--main-color, #00FF41);
    border: 2px solid var(--main-color, #00FF41);
    padding: 8px 14px;
    font-family: var(--font-family), monospace;
    font-size: 14px;
    font-weight: bold;
    z-index: 99999;
    text-decoration: none;
    transition: top 0.15s ease-out;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 10px;
    outline: 2px solid #FFFFFF !important;
    outline-offset: 2px;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.6);
}

/* Clear, High-Visibility Keyboard Focus Rings */
:focus-visible {
    outline: 2px solid var(--main-color, #00FF41) !important;
    outline-offset: 2px !important;
}

/* Photosensitivity & Epilepsy Safe Mode */
html.epilepsy-safe-mode *,
body.epilepsy-safe-mode * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}

html.epilepsy-safe-mode #editor-container,
body.epilepsy-safe-mode #editor-container {
    animation: none !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
}

html.epilepsy-safe-mode #rolling-bar,
body.epilepsy-safe-mode #rolling-bar {
    display: none !important;
    opacity: 0 !important;
}

html.epilepsy-safe-mode .blink,
body.epilepsy-safe-mode .blink {
    animation: none !important;
    opacity: 1 !important;
}



/* Windows High Contrast / Forced Colors Mode Support */
@media (forced-colors: active) {
    button, select, input, textarea, .nav-btn, .deck-btn {
        border: 1px solid ButtonText !important;
        forced-color-adjust: auto;
    }
    :focus-visible {
        outline: 2px solid Highlight !important;
    }
}

.deck-epilepsy-btn {
    background: var(--bg-color);
    border: 1px solid var(--main-color);
    color: var(--main-color);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    padding: 0 6px;
    height: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
    margin-right: 6px;
}

.deck-epilepsy-btn:hover {
    background: var(--main-color);
    color: var(--bg-color);
    box-shadow: 0 0 5px var(--main-color);
}

.deck-epilepsy-btn.active {
    background: #00E5FF;
    border-color: #00E5FF;
    color: #000000;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}

/* === ACHIEVEMENTS SYSTEM STYLES === */
.achievement-card {
    transition: all 0.2s ease;
    border-radius: 4px;
    padding: 7px 9px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--panel-text, inherit);
    box-sizing: border-box;
}
.achievement-card.unlocked {
    border: 1px solid var(--main-color, #00FF41);
    background: color-mix(in srgb, var(--main-color, #00FF41) 12%, var(--panel-bg, transparent));
}
.achievement-card.locked {
    border: 1px dashed color-mix(in srgb, var(--panel-text, currentColor) 25%, transparent);
    background: color-mix(in srgb, var(--panel-text, currentColor) 6%, var(--panel-bg, transparent));
    opacity: 0.75;
}
.achievement-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--bg-color, #000) 50%, transparent);
}
.achievement-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    background: var(--panel-bg, #0A0A0A);
    border: 1.5px solid var(--main-color, #00FF41);
    color: var(--panel-text, var(--main-color, #00FF41));
    padding: 10px 14px;
    font-family: inherit;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 10px var(--main-color, #00FF41);
    max-width: 340px;
    border-radius: 4px;
    animation: fadeInToast 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInToast {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}