/* css\style.css */

/* 深色 (預設) 與 淺色模式背景及文字適應 */
html:not(.dark) body {
    background: #F8FAFC;
    color: #0F172A;
}

/* 淺色模式下星空背景隱藏或降透明度 */
html:not(.dark) #starfield {
    opacity: 0.15;
}

/* 淺色模式下 Glass Panel 配色調整 */
html:not(.dark) .glass-panel {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(203, 213, 225, 0.8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

html:not(.dark) .glass-panel-hover:hover {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
}

/* 淺色模式下的標題與內文文字顏色修正 */
html:not(.dark) .text-white {
    color: #0F172A !important;
}

html:not(.dark) .text-qiz-muted {
    color: #475569 !important;
}

html:not(.dark) .text-qiz-text {
    color: #1E293B !important;
}

html:not(.dark) header {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

/* 自訂字型類別 */
body {
    font-family: 'Noto Sans TC', sans-serif;
    background: linear-gradient(135deg, #0B1220 0%, #1a0f3a 35%, #0f2a47 70%, #0B1220 100%);
    background-attachment: fixed;
    color: #E6E6E6;
    overflow-x: hidden;
}

.font-tech {
    font-family: 'Rajdhani', sans-serif;
}

/* Ambient Glow & Glassmorphism */
.glass-panel {
    background: rgba(17, 28, 48, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(46, 117, 182, 0.25);
}

.glass-panel-hover {
    transition: all 0.3s ease;
}

.glass-panel-hover:hover {
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 0 25px rgba(46, 117, 182, 0.25);
    transform: translateY(-2px);
}

.text-glow {
    text-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
}

.gold-glow {
    text-shadow: 0 0 12px rgba(191, 143, 0, 0.5);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #080D1A;
}
::-webkit-scrollbar-thumb {
    background: #1F3864;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #2E75B6;
}

/* Hide elements during route transition */
.page-section {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.page-section.active {
    display: block;
    opacity: 1;
}

/* 全站基礎字體微調 */
html {
    font-size: 18px;
}

body {
    line-height: 1.6;
}

.text-xs {
    font-size: 0.875rem !important;
}

.text-sm {
    font-size: 1rem !important;
}

.text-base {
    font-size: 1.125rem !important;
}