:root {
    color-scheme: dark;
    --night: #120404;
    --blood: #b3191c;
    --blood-dark: #6e0a0c;
    --cream: #f3e6c4;
    --paper: #eee2c4;
    --ink: #2a2118;
    --ink-soft: #5a4a38;
    --stamp: #c21d1d;
    --mono: "Courier Prime", "Courier New", monospace;
    --display: "Oswald", "Arial Narrow", Impact, sans-serif;
    --pixel: "VT323", "Courier New", monospace;
    --serif: "Playfair Display", Georgia, serif;
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    /* teletext */
    --tt-black: #000;
    --tt-red: #ff2a2a;
    --tt-green: #22ff22;
    --tt-yellow: #ffff22;
    --tt-blue: #2a2aff;
    --tt-magenta: #ff22ff;
    --tt-cyan: #22ffff;
    --tt-white: #fff;

    /* NER */
    --ner-blue: #0b3d91;
    --ner-deep: #04173f;
    --ner-yellow: #ffd200;
    --ner-gold: #b8912a;
    --ner-red: #ce2939;
    --ner-green: #477050;

    /* NVVH */
    --nvvh-green: #2f4a3a;
    --nvvh-red: #a3171a;

    /* Középkor */
    --med-parchment: #efe3c8;
    --med-ink: #332517;
    --med-brown: #5b3d26;
    --med-red: #8c1d18;
    --med-gold: #b08a3e;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
    background-color: var(--night);
    color: var(--cream);
    font-family: var(--mono);
    line-height: 1.5;
    overflow-x: hidden;
}

[hidden] { display: none !important; }

/* =================================================================
   Backgrounds — all five live in the DOM and cross-fade on switch
   ================================================================= */

.bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility 0s linear .6s;
}

.app[data-era=szoc] .bg-szoc,
.app[data-era=rv] .bg-rv,
.app[data-era=ner] .bg-ner,
.app[data-era=nvvh] .bg-nvvh,
.app[data-era=med] .bg-med {
    opacity: 1;
    visibility: visible;
    transition: opacity .6s ease, visibility 0s;
}

/* ---- Szocializmus: rotating rays, glowing star, film grain ---- */

.bg-szoc { background: radial-gradient(ellipse at 50% 30%, #4a0b0b 0%, #250606 45%, var(--night) 80%); }

.rays {
    position: absolute;
    left: 50%;
    top: 32%;
    width: 220vmax;
    height: 220vmax;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(from 0deg, rgba(214, 38, 38, .32) 0deg 6deg, transparent 6deg 12deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 22%, transparent 48%);
    mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 22%, transparent 48%);
    animation: spin 160s linear infinite;
}

.star {
    position: absolute;
    left: 50%;
    top: 32%;
    width: min(62vmin, 520px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    clip-path: polygon(50% 0%, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.5%, 50% 69.1%, 20.6% 90.5%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%);
    background:
        linear-gradient(115deg, rgba(255, 255, 255, .22) 0 50%, rgba(0, 0, 0, .18) 50% 100%),
        linear-gradient(180deg, #e3302f, #8e0d10);
    opacity: .5;
    animation: glow 6s ease-in-out infinite;
}

.grain {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
        var(--noise);
    opacity: .5;
    mix-blend-mode: overlay;
}

@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes glow {
    0%, 100% { opacity: .42; }
    50% { opacity: .6; }
}

/* ---- Rendszerváltás: teletext mosaic, colour bars, CRT ---- */

.bg-rv { background: radial-gradient(ellipse at 50% 40%, #0c0c1c 0%, #000 75%); }

.tt-bars {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 10px;
    background: linear-gradient(90deg,
        var(--tt-white) 0 14.28%, var(--tt-yellow) 0 28.57%, var(--tt-cyan) 0 42.85%, var(--tt-green) 0 57.14%,
        var(--tt-magenta) 0 71.42%, var(--tt-red) 0 85.71%, var(--tt-blue) 0 100%);
    opacity: .85;
}

.tt-mosaic {
    /* chunky teletext "sixel" blocks drifting at the edges */
    position: absolute;
    inset: -40px;
    background-image:
        linear-gradient(90deg, var(--tt-blue) 0 24px, transparent 24px 96px),
        linear-gradient(180deg, var(--tt-magenta) 0 16px, transparent 16px 80px),
        linear-gradient(90deg, var(--tt-cyan) 0 16px, transparent 16px 112px),
        linear-gradient(180deg, var(--tt-green) 0 24px, transparent 24px 144px);
    background-size: 96px 80px, 96px 80px, 112px 144px, 112px 144px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
    opacity: .28;
    image-rendering: pixelated;
    animation: mosaic 18s steps(12) infinite;
}

@keyframes mosaic { to { transform: translateY(80px); } }

.crt {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .45) 0 2px, transparent 2px 4px),
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .75) 100%);
    animation: flicker 4s steps(2) infinite;
}

@keyframes flicker { 50% { opacity: .92; } }

/* ---- NER: blue poster, EU stars, national ribbon, stadium ---- */

.bg-ner { background: radial-gradient(ellipse at 50% 20%, #1857c4 0%, var(--ner-blue) 40%, var(--ner-deep) 100%); }

.eu-stars {
    position: absolute;
    right: -6vmin;
    top: -6vmin;
    width: min(56vmin, 460px);
    fill: var(--ner-yellow);
    opacity: .22;
    animation: spin-plain 120s linear infinite;
}

@keyframes spin-plain { to { transform: rotate(360deg); } }

.slogans {
    position: absolute;
    inset: 12% -20% auto;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.4rem, 8vw, 5.5rem);
    line-height: 1.15;
    white-space: nowrap;
    color: #fff;
    opacity: .06;
    transform: rotate(-6deg);
}

.slogans p { margin: 0; animation: drift 60s linear infinite alternate; }
.slogans p:nth-child(2) { animation-direction: alternate-reverse; animation-duration: 75s; }

@keyframes drift { from { transform: translateX(-12%); } to { transform: translateX(8%); } }

.ribbon {
    position: absolute;
    left: -10%;
    right: -10%;
    top: 62%;
    height: 54px;
    background: linear-gradient(180deg, var(--ner-red) 0 33.3%, #fff 0 66.6%, var(--ner-green) 0);
    transform: rotate(-7deg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    opacity: .5;
    animation: wave 9s ease-in-out infinite;
}

@keyframes wave { 50% { transform: rotate(-5deg) translateY(10px); } }

.stadium {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 22vh;
    fill: var(--ner-deep);
    stroke: var(--ner-deep);
    opacity: .9;
}

/* ---- 2026–: NVVH protocol, seal, redactions ---- */

.bg-nvvh { background: radial-gradient(ellipse at 50% 25%, #26352d 0%, #142019 50%, var(--night) 100%); }

.nvvh-bars {
    position: absolute;
    inset: -12%;
    background: repeating-linear-gradient(-8deg, rgba(10, 14, 11, .55) 0 16px, transparent 16px 120px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 30%, transparent 70%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, transparent 30%, transparent 70%, #000 100%);
    opacity: .4;
}

.nvvh-seal {
    position: absolute;
    left: 50%;
    top: 30%;
    width: min(72vmin, 560px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(-18deg);
    border: 3px double rgba(243, 230, 196, .17);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(3rem, 12vmin, 7rem);
    letter-spacing: .16em;
    color: rgba(243, 230, 196, .1);
}

.nvvh-seal::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(243, 230, 196, .13);
    border-radius: 50%;
}

.nvvh-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(194, 29, 29, .55), transparent);
    animation: nvvh-scan 9s linear infinite;
}

@keyframes nvvh-scan {
    from { top: -4%; }
    to { top: 104%; }
}

/* ---- Középkor: scriptorium, illuminated initial, ruled parchment ---- */

.bg-med { background: radial-gradient(ellipse at 50% 25%, #38281a 0%, #1c140e 55%, var(--night) 100%); }

.med-halo {
    position: absolute;
    left: 50%;
    top: 28%;
    width: min(90vmin, 760px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(176, 138, 62, .22), rgba(176, 138, 62, .06) 55%, transparent 70%);
    filter: blur(2px);
}

.med-initial {
    position: absolute;
    left: 50%;
    top: 28%;
    transform: translate(-50%, -50%);
    font-family: var(--serif);
    font-size: min(52vmin, 460px);
    line-height: 1;
    color: rgba(176, 138, 62, .1);
}

.med-lines {
    position: absolute;
    inset: 6% -10%;
    background: repeating-linear-gradient(180deg, rgba(239, 227, 200, .07) 0 2px, transparent 2px 44px);
    transform: rotate(-2deg);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
    mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
}

/* =================================================================
   Era tabs (time machine)
   ================================================================= */

.tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 10px 16px;
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.tabs-inner {
    display: flex;
    gap: 8px;
    justify-content: center;
    max-width: 1080px;
    margin: 0 auto;
}

.tab {
    flex: 1 1 0;
    min-width: 0;
    max-width: 230px;
    display: grid;
    gap: 0;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 4px;
    background: rgba(255, 255, 255, .04);
    color: var(--cream);
    text-align: center;
    transition: background .2s, border-color .2s, color .2s;
}

.tab:hover { background: rgba(255, 255, 255, .1); }
.tab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.tab-years { font-family: var(--display); font-size: clamp(1rem, 4vw, 1.25rem); letter-spacing: .04em; }
.tab-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tab.active[data-era-tab=szoc] { background: var(--blood); border-color: #e3302f; color: var(--cream); }
.tab.active[data-era-tab=rv] { background: var(--tt-yellow); border-color: var(--tt-yellow); color: #000; font-family: var(--pixel); }
.tab.active[data-era-tab=rv] .tab-years { font-family: var(--pixel); font-size: clamp(1.2rem, 5vw, 1.55rem); }
.tab.active[data-era-tab=ner] { background: #fff; border-color: var(--ner-yellow); color: var(--ner-blue); box-shadow: inset 0 -4px 0 var(--ner-yellow); }
.tab.active[data-era-tab=nvvh] { background: #f2efe6; border-color: var(--nvvh-red); color: #1c241f; box-shadow: inset 0 -4px 0 var(--nvvh-red); }
.tab.active[data-era-tab=med] { background: var(--med-parchment); border-color: var(--med-red); color: var(--med-ink); box-shadow: inset 0 -4px 0 var(--med-red); }

/* =================================================================
   Shared layout (socialist look is the default)
   ================================================================= */

.wrap {
    width: min(720px, 100% - 32px);
    margin: 0 auto;
    padding: clamp(28px, 6vh, 60px) 0 40px;
}

.era { animation: era-in .45s ease both; }
@keyframes era-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero { text-align: center; margin-bottom: 28px; }

.kicker {
    margin: 0 0 8px;
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .75;
}

h1 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.1rem, 7.5vw, 4rem);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-shadow: 0 3px 0 var(--blood-dark), 0 0 40px rgba(227, 48, 47, .5);
}

.lede { margin: 14px auto 0; max-width: 34em; font-size: 1.05rem; }

.sheet {
    position: relative;
    color: var(--ink);
    background:
        radial-gradient(ellipse at center, transparent 55%, rgba(120, 85, 40, .22) 100%),
        var(--noise),
        repeating-linear-gradient(180deg, transparent 0 31px, rgba(90, 70, 50, .12) 31px 32px),
        var(--paper);
    padding: 28px clamp(18px, 5vw, 36px);
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 18px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
}

.sheet h2 {
    margin: 0 0 18px;
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.sheet h2 small { font-family: var(--mono); font-size: .8rem; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }

.form { transform: rotate(-.5deg); }

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 22px;
}

.grid .wide { grid-column: 1 / -1; }

label span {
    display: block;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-soft);
}

input, select {
    width: 100%;
    font: inherit;
    font-size: 1.05rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 2px dotted var(--ink-soft);
    padding: 6px 2px;
    border-radius: 0;
    outline: none;
}

select { cursor: pointer; }
select option { background: var(--paper); color: var(--ink); }

input:focus, select:focus { border-bottom: 2px solid var(--blood); }
input::placeholder { color: rgba(90, 74, 56, .55); }

button { font: inherit; cursor: pointer; }

.go {
    display: block;
    width: 100%;
    margin-top: 26px;
    padding: 14px 18px;
    border: 0;
    border-radius: 3px;
    background: linear-gradient(180deg, #d22a2a, var(--blood));
    color: var(--cream);
    font-family: var(--display);
    font-size: 1.3rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 4px 0 var(--blood-dark), 0 8px 18px rgba(0, 0, 0, .35);
    transition: transform .08s, box-shadow .08s;
}

.go:hover { filter: brightness(1.08); }
.go:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--blood-dark), 0 4px 10px rgba(0, 0, 0, .35); }
.go:focus-visible, .ghost:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }

/* ---------- Result card (dossier) ---------- */

.dossier, .card {
    margin-top: 34px;
    transform: rotate(.7deg);
    animation: slide-in .55s cubic-bezier(.2, .9, .3, 1.2) both;
    overflow: hidden;
}

.dossier::before {
    /* paper clip */
    content: "";
    position: absolute;
    top: -6px;
    left: 32px;
    width: 18px;
    height: 54px;
    border: 3px solid #8b8f96;
    border-radius: 10px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .35);
}

@keyframes slide-in {
    from { opacity: 0; transform: translateY(60px) rotate(-4deg); }
    to { opacity: 1; transform: translateY(0) rotate(.7deg); }
}

.stamp {
    position: absolute;
    top: 22px;
    right: 14px;
    padding: 4px 12px;
    border: 4px double var(--stamp);
    color: var(--stamp);
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(.9rem, 3.4vw, 1.25rem);
    text-transform: uppercase;
    letter-spacing: .08em;
    transform: rotate(-12deg);
    opacity: .82;
    mix-blend-mode: multiply;
    animation: stamp .35s .9s ease-in both;
}

@keyframes stamp {
    from { opacity: 0; transform: rotate(-12deg) scale(2.6); }
    to { opacity: .82; transform: rotate(-12deg) scale(1); }
}

.file-no { margin: 0 0 18px 34px; font-size: .82rem; color: var(--ink-soft); padding-right: 150px; }
.card .file-no { margin-left: 0; }

.label {
    margin: 0;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-soft);
}

.sheet .codename {
    margin: 2px 0 22px;
    font-family: var(--mono);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    /* shrink to fit long names on narrow screens */
    font-size: min(3.1rem, calc((min(720px, 100vw - 32px) - 72px) / var(--n) / .62));
    line-height: 1.2;
    color: #1d1610;
}

.typed {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    width: 0;
    border-right: .08em solid var(--blood);
    animation: type 1.1s .35s steps(var(--n)) forwards, caret .7s step-end 6;
}

@keyframes type { to { width: calc(var(--n) * 1ch + .1em); } }
@keyframes caret { 50% { border-color: transparent; } }

/* Case names wrap instead of typing (they can be long). */
.sheet .casename {
    margin: 4px 0 22px;
    font-size: clamp(1.6rem, 6.5vw, 2.7rem);
    line-height: 1.15;
    text-transform: none;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    animation: case-in .6s .3s ease both;
}

@keyframes case-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }

dl {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: 8px 16px;
    margin: 0;
    border-top: 1px dashed rgba(42, 33, 24, .4);
    padding-top: 16px;
}

dt {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-soft);
    padding-top: 3px;
}

dd { margin: 0; }

.actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

.ghost {
    flex: 1 1 140px;
    padding: 10px 14px;
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 3px;
    font-family: var(--display);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.ghost:hover { background: var(--ink); color: var(--paper); }

/* ---------- Event strip ---------- */

.events { margin-top: 40px; }

.events h2 {
    margin: 0 0 12px;
    font-family: var(--display);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    opacity: .85;
}

.events ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.events li {
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 3px;
    background: rgba(0, 0, 0, .35);
    font-size: .85rem;
}

.ev-year { font-weight: 700; margin-right: 4px; }

footer {
    margin-top: 36px;
    font-size: .82rem;
    text-align: center;
    opacity: .7;
}

/* =================================================================
   Rendszerváltás theme — teletext page + photocopied company record
   ================================================================= */

.era-rv { font-family: var(--pixel); font-size: 1.2rem; }

.era-rv .hero { text-align: left; }

.tt-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    font-family: var(--pixel);
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    color: var(--tt-white);
    background: var(--tt-blue);
    padding: 0 8px;
}

.tt-header span:first-child { color: var(--tt-yellow); }
.tt-header span:last-child { color: var(--tt-cyan); white-space: nowrap; }

.era-rv h1 {
    font-family: var(--pixel);
    font-weight: 400;
    font-size: clamp(2.6rem, 11vw, 5.2rem);
    line-height: .95;
    letter-spacing: 0;
    text-shadow: none;
    color: var(--tt-yellow);
}

.era-rv h1 span { display: inline-block; }
.era-rv h1 span:last-child { color: #000; background: var(--tt-cyan); padding: 0 .15em; margin-top: .08em; }

.era-rv .lede { margin-left: 0; color: var(--tt-white); font-size: 1.3rem; line-height: 1.25; }

.era-rv .form {
    transform: none;
    background: #000;
    color: var(--tt-white);
    border: 3px solid var(--tt-cyan);
    border-radius: 0;
    box-shadow: 0 0 0 3px #000, 0 0 30px rgba(34, 255, 255, .25);
}

.era-rv .form h2 { font-family: var(--pixel); font-size: 1.7rem; font-weight: 400; color: var(--tt-green); letter-spacing: .04em; }
.era-rv .form h2 small { font-family: var(--pixel); font-size: 1.1rem; color: var(--tt-cyan); }
.era-rv label span { font-family: var(--pixel); font-size: 1.1rem; letter-spacing: .06em; color: var(--tt-cyan); }

.era-rv input, .era-rv select {
    font-family: var(--pixel);
    font-size: 1.35rem;
    color: var(--tt-yellow);
    border-bottom: 2px dashed var(--tt-magenta);
}

.era-rv input::placeholder { color: rgba(255, 255, 255, .35); }
.era-rv input:focus, .era-rv select:focus { border-bottom: 2px solid var(--tt-yellow); }
.era-rv select option { background: #000; color: var(--tt-yellow); }

.era-rv .go {
    border-radius: 0;
    background: var(--tt-yellow);
    color: #000;
    font-family: var(--pixel);
    font-size: 1.8rem;
    letter-spacing: .06em;
    box-shadow: 6px 6px 0 var(--tt-magenta);
}

.era-rv .go:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--tt-magenta); }

/* photocopied company record */
.card-rv {
    font-family: var(--mono);
    font-size: 1rem;
    color: #151515;
    background:
        linear-gradient(90deg, transparent 0 8%, rgba(0, 0, 0, .06) 8.2% 8.6%, transparent 8.8% 71%, rgba(0, 0, 0, .05) 71.2% 71.5%, transparent 71.7%),
        radial-gradient(ellipse at 100% 0%, rgba(0, 0, 0, .25), transparent 40%),
        var(--noise),
        #e6e6e1;
}

.card-rv .stamp {
    color: #1d3fbf;
    border-color: #1d3fbf;
}
.card-rv .casename { font-family: var(--mono); font-weight: 700; }
.card-rv dt, .card-rv .label, .card-rv .file-no { color: #444; }
.card-rv .ghost { border-color: #151515; color: #151515; }

.era-rv .events h2 { font-family: var(--pixel); font-size: 1.4rem; color: var(--tt-green); letter-spacing: .06em; }
.era-rv .events li { border: 0; border-radius: 0; background: var(--tt-blue); color: var(--tt-white); font-size: 1.15rem; }
.era-rv .events li:nth-child(3n+2) { background: var(--tt-magenta); color: #000; }
.era-rv .events li:nth-child(3n) { background: var(--tt-green); color: #000; }
.era-rv .ev-year { color: var(--tt-yellow); }
.era-rv .events li:nth-child(3n+2) .ev-year, .era-rv .events li:nth-child(3n) .ev-year { color: #000; }

.era-rv footer { font-size: 1.05rem; color: var(--tt-white); padding-bottom: 40px; }

.ticker {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    overflow: hidden;
    background: var(--tt-red);
    color: var(--tt-yellow);
    font-family: var(--pixel);
    font-size: 1.3rem;
    line-height: 1.6;
    white-space: nowrap;
}

.ticker-track { display: inline-block; animation: ticker 40s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* =================================================================
   NER theme — blue poster + official procurement notice
   ================================================================= */

.era-ner .kicker { color: var(--ner-yellow); opacity: 1; font-family: var(--display); letter-spacing: .14em; }

.era-ner h1 {
    color: #fff;
    text-shadow: 0 4px 0 rgba(0, 0, 0, .25);
    letter-spacing: .01em;
}

.era-ner h1 mark {
    display: inline;
    background: var(--ner-yellow);
    color: var(--ner-blue);
    padding: 0 .12em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-shadow: none;
}

.era-ner .lede { color: #fff; font-family: var(--serif); font-size: 1.15rem; }

.era-ner .form {
    transform: none;
    background: #fff;
    border-radius: 6px;
    border-top: 10px solid var(--ner-blue);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
    color: #1b2433;
}

.era-ner .form h2 { color: var(--ner-blue); font-weight: 700; }
.era-ner .form h2 small { color: #5c6b82; }
.era-ner label span { color: #5c6b82; font-family: var(--display); letter-spacing: .08em; }

.era-ner input, .era-ner select {
    font-family: system-ui, "Segoe UI", sans-serif;
    border: 1px solid #b8c4d6;
    border-radius: 4px;
    padding: 8px 10px;
    color: #1b2433;
    background: #f5f8fc;
}

.era-ner input:focus, .era-ner select:focus { border: 1px solid var(--ner-blue); box-shadow: 0 0 0 3px rgba(11, 61, 145, .2); }
.era-ner input::placeholder { color: #8a97ab; }
.era-ner select option { background: #fff; color: #1b2433; }

.era-ner .go {
    background: var(--ner-yellow);
    color: var(--ner-blue);
    font-weight: 700;
    border-radius: 6px;
    box-shadow: 0 4px 0 #b39300, 0 10px 22px rgba(0, 0, 0, .3);
}

.era-ner .go:active { box-shadow: 0 1px 0 #b39300, 0 4px 10px rgba(0, 0, 0, .3); }

/* official procurement notice */
.card-ner {
    background:
        linear-gradient(180deg, var(--ner-red) 0 6px, #fff 6px 12px, var(--ner-green) 12px 18px, transparent 18px),
        radial-gradient(ellipse at center, transparent 60%, rgba(184, 145, 42, .12) 100%),
        #fffdf6;
    color: #1b2433;
    padding-top: 40px;
    border: 1px solid #d9cfae;
    outline: 3px double #d9cfae;
    outline-offset: -10px;
    transform: rotate(-.4deg);
}

.card-ner .stamp {
    --stamp: var(--ner-gold);
    top: 34px;
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    border: 4px double var(--ner-gold);
    color: var(--ner-gold);
    font-size: 1.05rem;
    background: radial-gradient(circle, rgba(255, 210, 0, .18), transparent 70%);
    mix-blend-mode: normal;
}

.card-ner .casename { font-family: var(--serif); font-weight: 700; color: var(--ner-blue); }
.card-ner .file-no, .card-ner dt, .card-ner .label { color: #5c6b82; }
.card-ner dl { border-top: 1px solid #d9cfae; }
.card-ner .ghost { color: var(--ner-blue); border-color: var(--ner-blue); border-radius: 6px; }
.card-ner .ghost:hover { background: var(--ner-blue); color: #fff; }

.era-ner .events h2 { color: #fff; }
.era-ner .events li { background: rgba(255, 255, 255, .92); color: var(--ner-blue); border: 0; border-left: 4px solid var(--ner-yellow); }
.era-ner footer { color: #fff; }

/* =================================================================
   2026– theme — NVVH protocol
   ================================================================= */

.era-nvvh .kicker { color: #e8dfc6; font-family: var(--display); letter-spacing: .12em; opacity: 1; }

.era-nvvh h1 { color: #f1ecdb; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }

.era-nvvh h1 mark {
    display: inline-block;
    background: var(--nvvh-red);
    color: #f7f2e3;
    padding: 0 .12em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-shadow: none;
}

.era-nvvh .lede { color: #e6dfcd; }

.era-nvvh .form {
    transform: none;
    background:
        linear-gradient(90deg, rgba(47, 74, 58, .08) 0 2px, transparent 2px),
        #f7f4ec;
    background-size: 32px 100%, auto;
    border-top: 8px solid var(--nvvh-green);
    color: #1c241f;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .5);
}

.era-nvvh .form h2 { color: var(--nvvh-green); }
.era-nvvh .form h2 small { color: #5a625a; }
.era-nvvh label span { color: #5a625a; }

.era-nvvh input, .era-nvvh select { color: #1c241f; border-bottom: 2px solid #b9b5a6; }
.era-nvvh input::placeholder { color: rgba(90, 98, 90, .55); }
.era-nvvh input:focus, .era-nvvh select:focus { border-bottom: 2px solid var(--nvvh-red); }
.era-nvvh select option { background: #f7f4ec; color: #1c241f; }

.era-nvvh .go {
    background: linear-gradient(180deg, #3c5a47, var(--nvvh-green));
    box-shadow: 0 4px 0 #1d2f24, 0 8px 18px rgba(0, 0, 0, .35);
}

.era-nvvh .go:active { box-shadow: 0 1px 0 #1d2f24, 0 4px 10px rgba(0, 0, 0, .35); }

/* NVVH protocol */
.card-nvvh {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(163, 23, 26, .08), transparent 45%),
        repeating-linear-gradient(180deg, transparent 0 31px, rgba(47, 74, 58, .09) 31px 32px),
        #f7f4ec;
    color: #1c241f;
    border: 1px solid #c9c4b3;
    outline: 3px double #c9c4b3;
    outline-offset: -10px;
    transform: rotate(-.3deg);
}

.card-nvvh .stamp {
    --stamp: var(--nvvh-red);
    border: 4px double var(--nvvh-red);
    color: var(--nvvh-red);
    letter-spacing: .12em;
}

.card-nvvh .file-no, .card-nvvh dt, .card-nvvh .label { color: #5a625a; }
.card-nvvh .casename { font-family: var(--serif); color: var(--nvvh-green); }
.card-nvvh dl { border-top: 1px dashed #9aa294; }
.card-nvvh .ghost { color: var(--nvvh-green); border-color: var(--nvvh-green); }
.card-nvvh .ghost:hover { background: var(--nvvh-green); color: #f7f2e3; }

.era-nvvh .events h2 { color: #e8dfc6; }
.era-nvvh .events li { background: rgba(247, 244, 236, .94); color: #1c241f; border: 0; border-left: 4px solid var(--nvvh-red); }
.era-nvvh footer { color: #e8dfc6; }

/* =================================================================
   Középkor theme — chronicle and wax seal
   ================================================================= */

.era-med { font-family: Georgia, "Times New Roman", serif; }
.era-med .kicker { color: #d9c49a; font-family: var(--display); letter-spacing: .16em; opacity: 1; }

.era-med h1 {
    color: #f0e4c8;
    font-family: var(--serif);
    text-transform: none;
    letter-spacing: 0;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}

.era-med h1 mark {
    display: inline-block;
    background: var(--med-red);
    color: #f7edd5;
    padding: 0 .12em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-shadow: none;
}

.era-med .lede { color: #e3d5b6; }

.era-med .form {
    transform: none;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(176, 138, 62, .12), transparent 55%),
        var(--med-parchment);
    border-top: 8px solid var(--med-brown);
    color: var(--med-ink);
    box-shadow: 0 20px 46px rgba(0, 0, 0, .5);
}

.era-med .form h2 { color: var(--med-brown); font-family: var(--serif); font-weight: 700; }
.era-med .form h2 small { color: #6b5135; font-family: var(--mono); }
.era-med label span { color: #6b5135; }

.era-med input, .era-med select {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--med-ink);
    border-bottom: 2px solid #b9a582;
}

.era-med input::placeholder { color: rgba(107, 81, 53, .55); }
.era-med input:focus, .era-med select:focus { border-bottom: 2px solid var(--med-red); }
.era-med select option { background: var(--med-parchment); color: var(--med-ink); }

.era-med .go {
    background: linear-gradient(180deg, #a52620, var(--med-red));
    color: #f7edd5;
    font-family: var(--serif);
    letter-spacing: .08em;
    box-shadow: 0 4px 0 #5e100d, 0 8px 18px rgba(0, 0, 0, .35);
}

.era-med .go:active { box-shadow: 0 1px 0 #5e100d, 0 4px 10px rgba(0, 0, 0, .35); }

/* medieval chronicle card */
.card-med {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(140, 29, 24, .07), transparent 45%),
        var(--med-parchment);
    color: var(--med-ink);
    border: 1px solid #c3ab84;
    outline: 3px double #c3ab84;
    outline-offset: -10px;
    transform: rotate(-.3deg);
}

.card-med .stamp {
    --stamp: var(--med-red);
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 4px double var(--med-red);
    border-radius: 50%;
    color: var(--med-red);
    font-size: .95rem;
    letter-spacing: .06em;
    background: radial-gradient(circle, rgba(140, 29, 24, .1), transparent 70%);
    mix-blend-mode: normal;
}

.card-med .file-no, .card-med dt, .card-med .label { color: #6b5135; }
.card-med .casename { font-family: var(--serif); color: var(--med-brown); }
.card-med .casename::first-letter { font-size: 1.8em; line-height: .9; color: var(--med-red); font-weight: 700; }
.card-med dl { border-top: 1px dashed #b9a582; }
.card-med .ghost { color: var(--med-brown); border-color: var(--med-brown); }
.card-med .ghost:hover { background: var(--med-brown); color: var(--med-parchment); }

.era-med .events h2 { color: #e3d5b6; }
.era-med .events li { background: rgba(239, 227, 200, .94); color: var(--med-ink); border: 0; border-left: 4px solid var(--med-red); }
.era-med footer { color: #e3d5b6; }

/* =================================================================
   Boot screen + error bar
   ================================================================= */

.boot {
    min-height: 100vh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 16px;
    text-align: center;
    padding: 16px;
}

.boot-star {
    width: 84px;
    aspect-ratio: 1;
    clip-path: polygon(50% 0%, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.5%, 50% 69.1%, 20.6% 90.5%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%);
    background: linear-gradient(180deg, #e3302f, #8e0d10);
    animation: glow 1.6s ease-in-out infinite;
}

.boot p { margin: 0; }

.boot-brand {
    font-family: var(--display);
    font-size: clamp(1.2rem, 4vw, 1.8rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cream);
}

.boot-bar {
    width: min(260px, 70vw);
    height: 6px;
    background: rgba(243, 230, 196, .15);
    border-radius: 3px;
    overflow: hidden;
}

.boot-bar span {
    display: block;
    height: 100%;
    width: var(--blazor-load-percentage, 0%);
    background: var(--cream);
    transition: width .2s;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    padding: 12px 16px;
    background: var(--cream);
    color: var(--ink);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .4);
}

#blazor-error-ui .reload { color: var(--blood); margin-left: 8px; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 10px; }

/* =================================================================
   Responsive & motion
   ================================================================= */

@media (max-width: 760px) {
    .tabs-inner {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 2px;
    }

    .tabs-inner::-webkit-scrollbar { display: none; }
    .tab { flex: 1 0 92px; max-width: none; scroll-snap-align: center; }
}

@media (max-width: 560px) {
    .grid { grid-template-columns: 1fr; }
    dl { grid-template-columns: 1fr; gap: 2px; }
    dd { margin-bottom: 10px; }
    .file-no { padding-right: 0; margin-top: 64px; }
    .card-ner .file-no { margin-top: 96px; }
    .form, .dossier, .card { transform: none; }
    .tabs { padding: 8px; }
    .tabs-inner { gap: 6px; }
    .tab { padding: 6px 4px; }
    .tab-years { font-size: clamp(.85rem, 3.2vw, 1rem); }
    .tab-label { font-size: .55rem; letter-spacing: .04em; }
    .card-nvvh .file-no { margin-top: 72px; }
    .card-med .file-no { margin-top: 96px; }
    .tt-header { flex-wrap: wrap; }
    @keyframes slide-in {
        from { opacity: 0; transform: translateY(40px); }
        to { opacity: 1; transform: none; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .rays, .star, .boot-star, .tt-mosaic, .crt, .eu-stars, .slogans p, .ribbon, .ticker-track, .nvvh-scan { animation: none; }
    .era, .dossier, .card, .stamp, .casename { animation: none; }
    .bg { transition: none; }
    .typed { animation: none; width: auto; border-right: 0; }
}