/* ===========================
   CSS Custom Properties
   =========================== */
:root {
    --bg:       #050505;
    --surface:  rgba(255, 255, 255, 0.03);
    --border:   rgba(0, 255, 255, 0.15);
    --cyan:     #00ffff;
    --magenta:  #ff00ff;
    --yellow:   #ffff00;
    --text:     #e0e0e0;
    --text-dim: #555;
    --mono:     'Courier New', Courier, monospace;
    --glow-sm:  0 0 6px rgba(0, 255, 255, 0.4);
    --glow-md:  0 0 14px rgba(0, 255, 255, 0.35);
    --header-h: 56px;
    --ease:     0.18s ease;
    --ps:       4px; /* pixel step size for staircase corners */

    /* ナビリンクのワイプ色 — ここを変えるだけで全体に反映 */
    --nav-hover-bg:  var(--cyan);     /* ホバー時の背景 */
    --nav-active-bg: var(--yellow);  /* 現在のページの背景 */
    --nav-press-bg:  var(--magenta);   /* クリック押下中の背景 */
    --nav-fg:        var(--bg);       /* ワイプ後のテキスト色 */
}

/* ===========================
   Reset & Base
   =========================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background: transparent;
    color: var(--text);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.7;
    min-height: 100vh;
    position: relative;
}

a       { color: var(--cyan); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--magenta); }

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.25);
}

h1:focus { outline: none; }

code { color: var(--magenta); font-family: var(--mono); }
pre  { background: var(--surface); border: 1px solid var(--border); padding: 1rem; overflow-x: auto; }

/* ===========================
   Layout
   =========================== */
.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    padding-top: calc(var(--header-h) + 12px + 16px); /* header height + top margin + gap */
    padding-bottom: 3rem;
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ===========================
   Hero section
   =========================== */
.hero {
    padding: 2rem 0 4rem;
}
.hero__tag {
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    color: var(--magenta);
    margin-bottom: 1rem;
}
.hero__title {
    font-size: clamp(2rem, 6vw, 4rem);
    letter-spacing: 0.15em;
    color: var(--cyan);
    text-shadow: var(--glow-md);
    margin-bottom: 1rem;
}
.hero__sub {
    font-size: 0.85rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
}

/* ===========================
   Scan-line overlay
   =========================== */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(0, 0, 0, 0.05) 3px,
        rgba(0, 0, 0, 0.05) 4px
    );
    z-index: 9999;
}

/* ===========================
   Glitch boot effect
   =========================== */

/* 単語（非スペース文字の連続）をまとめ、word-level の折り返しを保持 */
.glitch-word {
    white-space: nowrap;
}

/* 各文字を inline-block span に包み、元文字を transparent で幅確保 */
.glitch-char {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    color: transparent;
    white-space: pre; /* inline-block 内のスペースが折りたたまれるのを防ぐ */
}

/* ::before でグリッチ文字をオーバーレイ（レイアウトに影響しない） */
.glitch-char::before {
    content: attr(data-g);
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    white-space: pre;
}

.glitch-char.noise::before { color: #0f0; }
.glitch-char.block::before { color: var(--gc); }
/* スペースは通常テキストフロー（行末で折りたたまれる） */
.glitch-char.space { display: inline; }

/* 復元済み: 元の文字色を表示し、オーバーレイを消す */
.glitch-char.done         { color: inherit; }
.glitch-char.done::before { content: none; }

/* ===========================
   Blazor system UI
   =========================== */
#blazor-error-ui {
    background: #1a0000;
    border-top: 1px solid #ff0040;
    color: #ff6060;
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: 0.5rem 1.25rem;
    z-index: 10000;
    font-size: 0.8rem;
    font-family: var(--mono);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.4rem; }

.blazor-error-boundary {
    background: #1a0000;
    border: 1px solid #ff0040;
    color: #ff6060;
    padding: 1rem;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem; height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}
.loading-progress circle {
    fill: none;
    stroke: #333;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--cyan);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    text-align: center;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: var(--text-dim);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }