/* ============================================================
   VOID // COMMON_LAWS (共通設定)
   ============================================================ */

:root {
    --accent: #00f2ff;       /* メインのネオンカラー */
    --accent-sub: #8800ff;   /* サブ（紫など） */
    --bg: #030303;           /* 宇宙の深淵（背景色） */
    --h-height: 70px;        /* ヘッダーの高さ */
    --text-dim: #bbb;        /* 控えめな文字色 */
}

/* 全ページ共通のリセット */
body, html {
    margin: 0; padding: 0;
    background-color: var(--bg);
    color: #fff;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    width: 100%; height: 100%;
}

/* --- VOID 憲法：絶対視認性の掟 --- */

/* 1. 全方位・背景プロテクター */
.hud-panel {
    /* 背景が明るすぎても暗すぎても、ここで一定の「暗度」を確保するお */
    background: rgba(0, 0, 0, 0.75) !important; 
    /* 背景のノイズをボカして殺す */
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    
    border: 1px solid rgba(0, 242, 255, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

/* 2. 文字の色耐性（レジスタンス・テキスト） */
.resilient-text {
    /* ベースは白だお */
    color: #ffffff !important;
    
    /* 🚀 ここが色耐性の正体：何重もの黒い影で、文字の縁を「物理的」に守るぜ */
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.9),  /* 下への影 */
        0 0 15px rgba(0, 0, 0, 0.8),   /* 周囲への広がり */
        -1px -1px 0 rgba(0, 0, 0, 1),   /* 左上のフチ */
         1px  1px 0 rgba(0, 0, 0, 1);  /* 右下のフチ */
         
    /* 読みやすさのための文字間隔 */
    letter-spacing: 0.1em;
}

/* 強調したい文字用：シアンの光彩を加えるぜ */
.resilient-accent {
    @extend .resilient-text;
    color: var(--accent) !important;
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 1);
}

/* 共通HUDヘッダー */
.hud-header {
    width: 100%; height: var(--h-height); padding: 0 25px; box-sizing: border-box;
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid rgba(0, 242, 255, 0.2);
    border-left: 1px solid rgba(0, 242, 255, 0.2);
    font-size: 0.6rem; letter-spacing: 4px;
    z-index: 2000; position: fixed; top: 0;
    background: rgba(3,3,3,0.9); backdrop-filter: blur(10px);
}

.login-btn {
    color: var(--accent); text-decoration: none; padding: 6px 14px;
    border-top: 1px solid var(--accent); border-left: 1px solid var(--accent);
    font-size: 0.5rem; letter-spacing: 2px;
}