/* ============================== */
/* Hairpin Apex - Unified Stylesheet */
/* 低延迟高频交易解决方案 */
/* ============================== */

/* ============================== */
/* Font Configuration - Local Priority */
/* 字体配置 - 本地优先 */
/* ============================== */

/* Terminus - Priority for ALL non-CJK characters */
/* 用于所有非中文字符，包括ASCII艺术和代码 */
@font-face {
    font-family: 'Terminus';
    src: url('/assets/fonts/terminus-webfont.woff2') format('woff2'),
         url('/assets/fonts/terminus-webfont.woff') format('woff'),
         url('/assets/fonts/Terminus.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Ensure text shows immediately */
    /* Extended unicode range for all non-CJK characters */
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+0250-02AF,
                   U+02B0-02FF, U+0300-036F, U+0370-03FF, U+0400-04FF,
                   U+0500-052F, U+1E00-1EFF, U+2000-206F, U+2070-209F,
                   U+20A0-20CF, U+2100-214F, U+2150-218F, U+2190-21FF,
                   U+2200-22FF, U+2300-23FF, U+2400-243F, U+2440-245F,
                   U+2460-24FF, U+2500-257F, U+2580-259F, U+25A0-25FF,
                   U+2600-26FF, U+2700-27BF;
}

/* WenQuanYi Bitmap Song - Chinese characters only */
/* 文泉驿点阵宋体 - 仅用于中文字符 */
@font-face {
    font-family: 'WenQuanYi Bitmap Song';
    src: url('/assets/fonts/WenQuanYi.Bitmap.Song.14px.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    /* CJK unicode ranges */
    unicode-range: U+4E00-9FFF, U+3400-4DBF, U+20000-2A6DF, U+2E80-2EFF,
                   U+3000-303F, U+31C0-31EF, U+F900-FAFF;
}

/* CDN Fallback - Only loads if local fonts fail */
/* CDN备用方案 - 仅在本地字体加载失败时使用 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@400&display=swap');

/* ============================== */
/* CSS Variables - Amber Theme */
/* CSS变量 - 琥珀主题 */
/* ============================== */

:root {
    /* Amber Theme Colors */
    --main-color: #fda93c;           /* Primary amber color */
    --main-color-40: #fda93c66;      /* 40% opacity variant */
    --main-color-20: #fda93c33;      /* 20% opacity variant */
    --bg-color: 179, 105, 21;       /* Background RGB values */
    --bg-opacity: 0.15;              /* Background opacity */
    --selection: #946612;            /* Text selection color */

    /* Other colors */
    --warning-color: rgb(240, 86, 86);
    --info-color: #ffffff;

    /* Visual Effects */
    --noise-opacity: 0.65;           /* Noise overlay opacity */
    --grunge-overlay-opacity: 0.9;   /* Grunge effect opacity */
    --tab-background-blur: 4px;      /* Blur radius for tab background */

    /* Base font size */
    font-size: 10px;
}

/* ============================== */
/* Base Styles */
/* ============================== */

html {
    background: black;
    overflow-x: hidden;  /* Prevent horizontal scroll */
}

body {
    color: var(--main-color);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50%, rgba(var(--bg-color), 0.2) 250%),
        rgba(var(--bg-color), var(--bg-opacity));

    margin: 0;
    height: 100vh;
    width: 100vw;

    overflow-y: auto;
    scroll-behavior: smooth;

    /* Font stack with local priority */
    /* Terminus handles non-CJK, WenQuanYi handles CJK automatically via unicode-range */
    font-family:
        'Terminus',                       /* Priority for non-CJK */
        'WenQuanYi Bitmap Song',         /* Chinese characters */
        '文泉驿点阵宋体',                 /* Chinese name fallback */
        'Noto Sans Mono',                 /* CDN fallback */
        Consolas,                         /* Windows monospace */
        Monaco,                           /* macOS monospace */
        SimSun,                           /* Windows Chinese fallback */
        '宋体',                           /* Generic Chinese Song */
        'Courier New',                    /* Universal monospace */
        monospace;                        /* Final fallback */

    /* Disable font smoothing for pixel-perfect bitmap fonts */
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
    text-rendering: optimizeLegibility;
}

/* ============================== */
/* Visual Overlays */
/* 视觉叠加层 */
/* ============================== */

#noise-overlay,
#grunge-overlay {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    pointer-events: none;  /* Allow clicks to pass through */
    z-index: 10;
}

/* Grunge texture overlay */
#grunge-overlay {
    background: linear-gradient(45deg, transparent 30%, rgba(var(--bg-color), 0.1) 100%);
    mix-blend-mode: color-dodge;
    opacity: var(--grunge-overlay-opacity);
}

/* Animated noise effect */
@keyframes noise {
    0%, 100% { opacity: 0.5; }
    25% { opacity: 0.6; }
    50% { opacity: 0.4; }
    75% { opacity: 0.55; }
}

#noise-overlay {
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(var(--bg-color), 0.03) 2px,
            rgba(var(--bg-color), 0.03) 4px
        );
    opacity: var(--noise-opacity);
    animation: noise 2s steps(4) infinite;
}

/* ============================== */
/* Typography & Common Elements */
/* ============================== */

::selection {
    background-color: var(--selection);
}

a {
    color: var(--main-color);
    text-decoration: underline;
}

a:hover {
    background-color: var(--main-color);
    cursor: pointer;
    color: rgba(24, 45, 75, 0.616);
    transition: box-shadow 0.1s, background-color 0s, color 0s;
    text-decoration: none;
}

/* Reset margins and font weights */
pre, p, li, h1, h2, h3, h4, td {
    margin: 0;
    font-weight: normal;
}

/* Section headers */
h2 {
    background: linear-gradient(90deg, transparent -15%, rgba(var(--bg-color), 0.3) 65%);
    outline: 1px solid var(--main-color);
    margin-bottom: 0.5em;
    padding-left: 0.25em;
    font-size: 1em;
}

h4 {
    font-size: 1em;
}

p em {
    opacity: 0.7;
}

/* ============================== */
/* Main Canvas Container */
/* 主容器 */
/* ============================== */

#canvas {
    font-size: 1.75em;  /* 17.5px - standard content size */
    padding: 1.8em;
}

/* ============================== */
/* ASCII Title Styling */
/* ASCII标题样式 */
/* ============================== */

#title {
    font-size: 1.3em;  /* Relative to canvas = ~23px (balanced hierarchy) */
    font-family: 'Terminus', 'Courier New', monospace !important;
    -webkit-user-select: none;
    user-select: none;
    margin-bottom: 1em;
    /* Ensure ASCII art uses bitmap font without smoothing */
    -webkit-font-smoothing: none;
    font-smooth: never;
}

#sub-title {
    font-size: 1em;
    opacity: 0.8;
}

/* ============================== */
/* Navigation Tabs */
/* 导航标签 */
/* ============================== */

nav ul {
    list-style-type: none;
    display: flex;
    padding: 0;
    gap: 2.5em;
}

nav ul li a {
    padding: 0.2em 0.3em;
    line-height: 1.2;  /* Consistent height across languages */
    display: inline-block;
    white-space: nowrap;
}

.tab-active {
    background-color: var(--main-color);
    color: rgba(24, 45, 75, 0.616);
    text-decoration: none;
}

/* ============================== */
/* Content Sections */
/* 内容区块 */
/* ============================== */

.tabs {
    border: solid var(--main-color);
    padding: 1.5em;
    backdrop-filter: blur(var(--tab-background-blur));
    background: linear-gradient(45deg, rgba(var(--bg-color), 0.05) 70%, rgba(var(--bg-color), 0.2) 110%);
    margin-top: 1em;
}

/* Grid System */
.grid-row,
.grid {
    display: flex;
    gap: 1em;
}

.grid {
    flex-direction: column;
}

.grid-row-box {
    padding: 0.5em;
    width: 100%;
    border: 1px dotted var(--main-color);
}

/* Content Styling */
#intro-content p,
#business-content p {
    margin-bottom: 0.75em;
    line-height: 1.6;
    text-align: justify;
}

/* Hyphenation for English and German - elegant word breaking on narrow screens */
:lang(en) p,
:lang(de) p {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-wrap: break-word;       /* Fallback for older browsers */
    overflow-wrap: break-word;   /* Modern standard */
}

#contact-content p {
    margin-bottom: 0.5em;
    display: block;  /* Each contact item on its own line */
}

#contact-content strong {
    display: inline-block;
}

/* Language-specific label widths */
:lang(zh) #contact-content strong,
:lang(zh-tw) #contact-content strong {
    width: 3.5em;
}

:lang(en) #contact-content strong,
:lang(de) #contact-content strong {
    width: 4.5em;
}

/* Business Items */
.business-item {
    margin-bottom: 1.2em;
    border-left: 2px solid var(--main-color-40);
    padding-left: 1em;
}

.business-item h3 {
    color: var(--main-color);
    margin-bottom: 0.3em;
    font-size: 1.05em;  /* Proportional to 17.5px base */
    font-weight: bold;
}


.business-item p {
    opacity: 0.9;
}

/* Thanks Section - Tabular alignment */
.thanks-item {
    margin-bottom: 0.6em;
    font-size: 0.95em;
    font-family: inherit;  /* Use monospace for better alignment */
}

.thanks-item span {
    display: inline-block;
    vertical-align: top;
}

.thanks-item .thanks-category {
    font-weight: bold;  /* Bold category text */
}

/* Language-specific category widths for better spacing */
:lang(zh) .thanks-item .thanks-category {
    width: 7em;  /* Simplified Chinese needs less space */
}

:lang(zh-tw) .thanks-item .thanks-category {
    width: 7em;  /* Traditional Chinese needs less space */
}

:lang(en) .thanks-item .thanks-category {
    width: 10em;  /* English needs medium space */
}

:lang(de) .thanks-item .thanks-category {
    width: 11em;  /* German needs more space */
}

.thanks-item .thanks-name {
    width: 7em;  /* Fixed width for name */
}

.thanks-item .thanks-author {
    width: 10em;  /* Fixed width for author */
}

.thanks-item .thanks-license {
    width: auto;  /* Auto width for license */
}

/* ============================== */
/* Animations */
/* 动画效果 */
/* ============================== */

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fade-in 0.5s ease-out;
}

/* ============================== */
/* Bitmap Font Optimization */
/* 点阵字体优化 */
/* ============================== */

/* Force pixel-aligned rendering for all text */
* {
    -webkit-font-smoothing: none !important;
    -moz-osx-font-smoothing: auto !important;
    font-smooth: never !important;
}

/* Remove media query overrides - let unicode-range handle font switching */
/* Fonts will automatically switch based on character type */

/* Code blocks always use Terminus */
pre, code, .code-block {
    font-family:
        'Terminus',
        Consolas,
        Monaco,
        'Courier New',
        monospace;
    /* Inherit size from parent - no forced sizing */
}

/* ============================== */
/* Responsive Design */
/* 响应式设计 */
/* ============================== */

/* Mobile breakpoint */
@media screen and (max-width: 45em) {
    /* Stack navigation tabs vertically */
    nav ul {
        flex-direction: column;
        gap: 0.5em;
        align-items: flex-start;
    }

    .grid-row {
        flex-direction: column;
        margin-right: 1em;
    }

    /* Stack thanks items on mobile */
    .thanks-item span {
        display: block;
        width: auto;
        margin-bottom: 0.2em;
    }

    .thanks-item .thanks-category {
        width: auto;  /* Auto width on mobile */
        margin-bottom: 0.3em;
    }

    .thanks-item {
        margin-bottom: 1em;
    }
}

/* Title scaling for narrow screens */
/* Uses vw unit for responsive scaling, following reference implementation */
@media screen and (max-width: 1050px) {
    #title {
        font-size: 2.3vw;  /* Scale with viewport width */
        margin-bottom: 2em;
    }
    #canvas {
        padding: 0.5em;
    }
    .tabs {
        padding: 0.75em;
    }
}

/* ============================== */
/* CRT Effect (Optional) */
/* CRT效果（可选） */
/* ============================== */

@keyframes crt-flicker {
    0%, 100% { opacity: 0.98; }
    50% { opacity: 0.95; }
}

.crt-effect {
    animation: crt-flicker 0.15s infinite;
    text-shadow: 0.06rem 0 0.6rem var(--main-color-20), -0.125rem 0 0.6rem var(--main-color-40);
}

/* Scanlines effect */
.crt-effect::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}