/* =========================================================
   terminal-theme.css — "ALDERUN ARCHIVE" restricted terminal
   1960s mainframe / secret-organization CRT look, reskinning
   MudBlazor's stable class names + CSS custom properties.
   ========================================================= */

:root {
    --term-bg: #050a06;
    --term-bg-panel: #0a120c;
    --term-bg-raised: #0e1a11;
    --term-green: #35ff6a;
    --term-green-dim: #1d9e45;
    --term-green-faint: rgba(53, 255, 106, 0.25);
    --term-amber: #ffb000;
    --term-red: #ff4d4d;
    --term-font: 'VT323', 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
}

/* Tryb bursztynowy (/terminal/setting, patrz js/terminalSettings.js) — cały motyw idzie przez
   te trzy zmienne, więc podmiana tutaj wystarcza, żeby przefarbować całą appkę bez dotykania
   pozostałych ~300 reguł niżej. --term-red celowo NIE podmieniany — czerwień restrykcji/błędów
   musi zostać odróżnialna od poświaty terminala niezależnie od wybranego koloru. */
html.term-amber-mode {
    --term-green: #ffb000;
    --term-green-dim: #a06400;
    --term-green-faint: rgba(255, 176, 0, 0.25);
}

html, body {
    background-color: var(--term-bg) !important;
    color: var(--term-green) !important;
    font-family: var(--term-font) !important;
}

* {
    font-family: var(--term-font) !important;
}

/* ---- CRT scanline / flicker overlay ---- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0.12) 1px,
        rgba(0, 0, 0, 0) 2px
    );
    mix-blend-mode: multiply;
    animation: term-flicker 6s infinite;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
}

@keyframes term-flicker {
    0%, 96%, 100% { opacity: 1; }
    97% { opacity: 0.85; }
    98% { opacity: 1; }
    99% { opacity: 0.9; }
}

/* ---- Blinking cursor utility ---- */
.term-cursor::after {
    content: "\2588";
    margin-left: 0.15em;
    animation: term-blink 1s steps(1) infinite;
    color: var(--term-green);
}

@keyframes term-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ---- Archiwum gazety: miganie "_" podczas udawanego przeszukiwania kartoteki ---- */
.term-loading-underscore {
    animation: term-loading-blink 0.5s steps(1) infinite;
}

@keyframes term-loading-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ---- Declassified corner stamp ---- */
.term-stamp {
    position: absolute;
    top: 0.6em;
    right: 0.6em;
    border: 2px solid var(--term-red);
    color: var(--term-red);
    padding: 0.15em 0.5em;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.12em;
    transform: rotate(6deg);
    opacity: 0.75;
    pointer-events: none;
}

/* ---- Reusable "possessed terminal" glitch effect ----
   Add class="glitch-page" to any page's outer wrapper to turn it on there. */
.glitch-page {
    position: relative;
    animation: glitch-shake 4s steps(1, end) infinite;
}

@keyframes glitch-shake {
    0%, 84%, 100% { transform: translate(0, 0) rotate(0deg); filter: none; }
    85%   { transform: translate(-12px, 6px) rotate(-2deg); filter: hue-rotate(60deg) saturate(4) contrast(1.6); }
    86.5% { transform: translate(10px, -8px) rotate(2deg); filter: hue-rotate(-50deg) contrast(2); }
    88%   { transform: translate(-9px, 7px) rotate(-1.5deg); filter: invert(0.2) hue-rotate(30deg); }
    89.5% { transform: translate(11px, -5px) rotate(1.5deg); filter: contrast(2.2) saturate(3); }
    91%   { transform: translate(-6px, 4px) rotate(-1deg); filter: hue-rotate(-20deg); }
    92.5% { transform: translate(4px, -3px) rotate(0.5deg); filter: invert(1) brightness(0.3); }
    94%   { transform: translate(-2px, 1px); filter: none; }
    95%   { transform: translate(0, 0); filter: none; }
}

.glitch-page::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    background: rgba(53, 255, 106, 0.6);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    animation: glitch-tear 4s steps(1, end) infinite;
}

@keyframes glitch-tear {
    0%, 84.5%, 100% { opacity: 0; top: 0; }
    85.2% { opacity: 0.9; top: 18%; }
    85.5% { opacity: 0; }
    87.5% { opacity: 0.8; top: 55%; }
    87.8% { opacity: 0; }
    90.5% { opacity: 0.7; top: 33%; }
    90.8% { opacity: 0; }
}

/* Ambient "it's watching you" vignette — breathes continuously, tightens sharply during the shake burst */
.glitch-page::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.6) 100%);
    animation: glitch-watch 5s ease-in-out infinite;
}

@keyframes glitch-watch {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.75; }
    68% { opacity: 1; }
    72% { opacity: 0.35; }
    76% { opacity: 0.5; }
}

/* Occasional full blackout: "this subject does not wish to be read" */
.glitch-404-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    background: var(--term-bg);
    color: var(--term-green);
    opacity: 0;
    pointer-events: none;
    animation: glitch-404-flash 30s steps(1, end) infinite;
}

.glitch-404-code {
    font-size: 3em;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-shadow: 0 0 12px var(--term-green);
}

.glitch-404-msg {
    font-size: 1.1em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.glitch-404-sub {
    font-size: 0.8em;
    opacity: 0.7;
    font-style: italic;
}

@keyframes glitch-404-flash {
    0%, 87.9%, 100% { opacity: 0; }
    88% { opacity: 1; }
    98% { opacity: 1; }
    98.3% { opacity: 0; }
}

/* ---- "Voynich" ornamental effect (Manuskrypt Yannovica, patrz VoynichEffect.razor) ----
   Sepia/parchment accent instead of green phosphor, alchemical glyphs drifting in the corners,
   slow "breathing" glow — deliberately calm/eerie, NOT violent like glitch-page above. */
.voynich-page {
    position: relative;
    padding: 1.6em 1.8em;
    border: 1px solid rgba(196, 154, 74, 0.5);
    outline: 1px solid rgba(196, 154, 74, 0.18);
    outline-offset: 6px;
    background: radial-gradient(ellipse at 50% 15%, rgba(196, 154, 74, 0.08), transparent 70%);
    animation: voynich-breathe 6s ease-in-out infinite;
}

@keyframes voynich-breathe {
    0%, 100% { box-shadow: 0 0 0 rgba(196, 154, 74, 0) inset; }
    50% { box-shadow: 0 0 28px rgba(196, 154, 74, 0.16) inset; }
}

.voynich-glyph-corner {
    position: absolute;
    font-size: 1.5em;
    color: rgba(196, 154, 74, 0.4);
    text-shadow: 0 0 8px rgba(196, 154, 74, 0.3);
    pointer-events: none;
    animation: voynich-drift 9s ease-in-out infinite;
}
.voynich-glyph-corner.tl { top: 0.35em; left: 0.35em; }
.voynich-glyph-corner.tr { top: 0.35em; right: 0.35em; animation-delay: -2.25s; }
.voynich-glyph-corner.bl { bottom: 0.35em; left: 0.35em; animation-delay: -4.5s; }
.voynich-glyph-corner.br { bottom: 0.35em; right: 0.35em; animation-delay: -6.75s; }

@keyframes voynich-drift {
    0%, 100% { opacity: 0.3; transform: rotate(0deg) scale(1); }
    50% { opacity: 0.6; transform: rotate(8deg) scale(1.08); }
}

/* ---- "Archive" effect (tag Kanka "Artykuł_Poza_Wymiarowy", patrz ArchiveEffect.razor) ----
   Trzeci, odrębny wariant obok glitch-page (cyfrowa korupcja) i voynich-page (starożytny
   manuskrypt): to prawdziwy filtr sepii na TREŚCI artykułu (nie tylko kolorowa ramka), plus
   delikatne linie skanu — ma wyglądać jak ktoś odczytał bardzo stary, zdegradowany zapis, a nie
   jak coś magicznego/zepsutego. Sepia celowo tylko na treści (.wiki-entry/.wiki-page-title/
   .wiki-infobox), nie na całym .archive-page — przyciski/linki nawigacyjne appki mają zostać
   w pełni czytelne i klikalne, tylko sam artykuł ma wyglądać na wyblakły. */
.archive-page {
    position: relative;
    padding: 1.6em 1.8em;
    border: 1px solid rgba(180, 140, 90, 0.5);
    outline: 1px dashed rgba(180, 140, 90, 0.25);
    outline-offset: 6px;
    background: radial-gradient(ellipse at 50% 10%, rgba(120, 90, 50, 0.10), transparent 75%);
}

.archive-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg,
        rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 1px,
        transparent 1px, transparent 3px);
    mix-blend-mode: multiply;
    opacity: 0.35;
}

.archive-page .wiki-entry,
.archive-page .wiki-page-title,
.archive-page .wiki-infobox {
    filter: sepia(0.75) contrast(0.92) brightness(0.88) saturate(0.85);
}

.archive-stamp {
    position: absolute;
    top: 0.5em;
    right: 0.6em;
    font-family: var(--term-font);
    font-size: 0.7em;
    letter-spacing: 0.15em;
    color: rgba(180, 140, 90, 0.6);
    border: 1px solid rgba(180, 140, 90, 0.45);
    padding: 0.15em 0.5em;
    transform: rotate(-4deg);
    text-transform: uppercase;
    pointer-events: none;
    z-index: 1;
}

/* ---- Hidden cipher hint (Alan Yannovic, pod jego infoboksem) ----
   Trigger icon deliberately low-opacity/small so it reads as "easy to miss" rather than a
   normal UI control — the opposite of the visible banner used for _isTerminalHintEntity. */
.cipher-hint-trigger {
    opacity: 0.22 !important;
    transition: opacity 0.2s ease;
}
.cipher-hint-trigger:hover,
.cipher-hint-trigger:focus-visible {
    opacity: 0.8 !important;
}

.wiki-infobox-cipher-hint {
    text-align: right;
    margin-top: 0.3em;
}

/* Świadomie W NORMALNYM PRZEPŁYWIE dokumentu, nie position:absolute — .wiki-article (wiki.css)
   ma overflow:hidden jako clearfix pod float:right infoboksa, więc position:absolute tutaj
   przycinałoby popup zamiast pozwolić stronie urosnąć pod nim (dokładnie ten bug: strona się nie
   rozciągała po rozwinięciu). W normalnym flow popup po prostu odpycha resztę infoboksa w dół. */
.cipher-hint-popup {
    width: 100%;
    margin-top: 0.4em;
    background-color: var(--term-bg-raised) !important;
    border: 1px solid var(--term-green-faint) !important;
}

/* ---- Zablokowana poszlaka śledztwa (/sledztwa/{code}) ----
   Wizualny język 1:1 z zaredagowanym węzłem na /graph (isRedacted: przerywana czerwona ramka,
   "???"), tylko jako zwykły blok HTML zamiast canvas vis-network. */
.investigation-redacted {
    padding: 0.9em 1em;
    border: 2px dashed var(--term-red);
    color: var(--term-red);
    text-align: center;
    font-family: var(--term-font);
    letter-spacing: 0.15em;
    opacity: 0.85;
    border-radius: 2px;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--term-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--term-green-dim);
    border: 1px solid var(--term-bg);
}

/* =========================================================
   MudBlazor structural reskin
   ========================================================= */

.mud-appbar {
    background-color: var(--term-bg-panel) !important;
    border-bottom: 1px solid var(--term-green-faint) !important;
    box-shadow: 0 0 12px rgba(53, 255, 106, 0.15) !important;
}

.mud-drawer {
    background-color: var(--term-bg-panel) !important;
    border-right: 1px solid var(--term-green-faint) !important;
}

.mud-nav-link .mud-nav-link-text,
.mud-typography {
    letter-spacing: 0.02em;
}

.mud-nav-link.mud-nav-link-active {
    background-color: var(--term-green-faint) !important;
    border-left: 3px solid var(--term-green) !important;
}

.mud-paper,
.mud-card {
    background-color: var(--term-bg-raised) !important;
    border: 1px solid var(--term-green-faint) !important;
    border-radius: 2px !important;
    box-shadow: 0 0 10px rgba(53, 255, 106, 0.08) !important;
}

.mud-button-root {
    border-radius: 2px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mud-button-filled.mud-button-filled-primary {
    background-color: var(--term-green) !important;
    color: #04140a !important;
    box-shadow: 0 0 10px rgba(53, 255, 106, 0.5) !important;
}

.mud-button-outlined.mud-button-outlined-primary,
.mud-button-text.mud-button-text-primary {
    color: var(--term-green) !important;
    border-color: var(--term-green-dim) !important;
}

.mud-chip {
    border-radius: 2px !important;
    border: 1px solid var(--term-green-faint);
    background-color: transparent !important;
    color: var(--term-green) !important;
}

.mud-table {
    background-color: var(--term-bg-raised) !important;
}

.mud-table-container,
.mud-table-root {
    border: 1px solid var(--term-green-faint) !important;
}

.mud-table-row:hover {
    background-color: var(--term-green-faint) !important;
}

.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--term-green-dim) !important;
    border-radius: 2px !important;
}

.mud-input-outlined.mud-shrink .mud-input-outlined-border,
.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--term-green) !important;
}

.mud-input-label,
.mud-input-slot,
.mud-input-root input {
    color: var(--term-green) !important;
}

.mud-dialog {
    background-color: var(--term-bg-raised) !important;
    border: 1px solid var(--term-green-faint) !important;
}

.mud-dialog-title {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.mud-tabs-toolbar {
    background-color: var(--term-bg-panel) !important;
    border-bottom: 1px solid var(--term-green-faint) !important;
}

.mud-tab {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mud-tab.mud-tab-active {
    color: var(--term-green) !important;
}

.mud-divider {
    border-color: var(--term-green-faint) !important;
}

.mud-alert {
    border-radius: 2px !important;
    border: 1px solid currentColor;
}

.mud-snackbar {
    border-radius: 2px !important;
    font-family: var(--term-font) !important;
}

/* Efekt "odkryto powiązanie" (dwa_konce_locked) — złoty, pulsujący akcent zamiast zwykłego
   zielonego snackbara, ten sam kolor co easter-egg .golden-search, żeby czuć się jak nagroda
   za połączenie dwóch tropów, nie jak zwykły komunikat systemowy. */
@keyframes term-reveal-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(212, 175, 55, 0.5); }
    50% { box-shadow: 0 0 16px rgba(212, 175, 55, 0.9); }
}

.term-reveal-toast {
    background-color: #2a2210 !important;
    border: 1px solid #d4af37 !important;
    color: #d4af37 !important;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(212, 175, 55, 0.7);
    animation: term-reveal-pulse 1.6s ease-in-out infinite;
}

.term-reveal-toast .mud-snackbar-content-message,
.term-reveal-toast .mud-icon-root {
    color: #d4af37 !important;
}

/* Easter egg /pucpuahapvu: chwilę po przyjęciu zaproszenia terminal "gaśnie" jak stary
   monitor CRT — jasny błysk, kolaps do poziomej linii, potem do punktu — i zostaje czarny,
   dopóki appka sama nie wyloguje (patrz DeepStateEntry.razor). Dwie warstwy: stały czarny spód
   (zostaje na zawsze po zakończeniu animacji) + animowany błysk nad nim (znika, odsłaniając
   czerń). */
.crt-shutdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 30000;
    background: #000;
}

.crt-shutdown-flash {
    position: fixed;
    inset: 0;
    z-index: 30001;
    background: var(--term-green, #35ff6a);
    animation: crtShutdownFlash 0.9s ease-in forwards;
}

/* Easter egg: journal "podręcznik glifów" (journals:183302) — komentarze pod jego Entry
   renderują się jako karuzela, jedna "kartka" na raz, zamiast ciągłej listy (patrz
   EntityDetails.razor, _isGlyphHandbookEntity). @key na stronie wymusza nowy węzeł DOM przy
   każdej zmianie indeksu, więc animacja poniżej odpala się na każde prev/next, nie tylko raz. */
.glyph-carousel-page {
    animation: glyphPageIn 0.35s ease-out;
}

@keyframes glyphPageIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.glyph-carousel-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2em;
    margin-top: 1.2em;
    padding-top: 0.8em;
    border-top: 1px solid var(--term-green-faint);
}

@keyframes crtShutdownFlash {
    0%   { transform: scaleY(1) scaleX(1); opacity: 0; }
    12%  { transform: scaleY(1) scaleX(1); opacity: 0.9; background: #fff; }
    45%  { transform: scaleY(0.02) scaleX(1); opacity: 0.9; background: var(--term-green, #35ff6a); }
    75%  { transform: scaleY(0.008) scaleX(0.12); opacity: 0.9; }
    100% { transform: scaleY(0.001) scaleX(0.001); opacity: 0; }
}