/* Herna Hi-Score (ukázkový web): vektorový arkádový automat z roku 1983 a herní automaty 90. let.
   Černá obrazovka, svítící čáry, obrysové písmo. */
:root {
  --bg: #02030a; --ink: #e8fff1; --muted: #8fb3a0; --green: #49ff8a; --cyan: #4ff3ff; --yellow: #ffe14a;
  --red: #ff3b4e; --orange: #ff9a2e; --line: rgba(79, 243, 255, .45);
  --fd: "Chakra Petch", "Arial Black", sans-serif; --fp: "VT323", ui-monospace, monospace; --fb: "Chakra Petch", system-ui, sans-serif;
  --wrap: min(1180px, 100% - 32px);
  color-scheme: dark;
}
* { box-sizing: border-box }
html { overflow-x: clip; background: var(--bg) }
body { margin: 0; min-height: 100svh; overflow-x: clip; background: radial-gradient(ellipse at 50% 30%, #0b1422 0%, var(--bg) 70%); color: var(--ink); font: 18px/1.6 var(--fb) }
/* CRT řádky přes celou obrazovku */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .22) 2px 3px) }
body.calm::after { opacity: .35 } /* kontaktní stránka: méně řádků, lepší čitelnost */
a { color: inherit }
img { display: block; max-width: 100% }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px }
.wrap { width: var(--wrap); margin-inline: auto }
h1, h2, h3 { font-family: var(--fd); font-weight: 700; text-transform: uppercase; line-height: 1; margin: 0; letter-spacing: .04em }
.px { font-family: var(--fp); font-size: 1.3em; line-height: 1; letter-spacing: .04em }
.glow { text-shadow: 0 0 6px currentColor, 0 0 18px currentColor }
/* Obrysové „vektorové“ písmo */
.c-g { --c: var(--green); color: var(--green) } .c-y { --c: var(--yellow); color: var(--yellow) } .c-r { --c: var(--red); color: var(--red) } .c-c { --c: var(--cyan); color: var(--cyan) } .c-o { --c: var(--orange); color: var(--orange) }
.vec { color: transparent; -webkit-text-stroke: 2px var(--c, var(--cyan)); filter: drop-shadow(0 0 6px var(--c, var(--cyan))) }
.blink { animation: blink 1.1s steps(1) infinite }
@keyframes blink { 50% { opacity: 0 } }

/* Horní lišta skóre */
.scorebar { font: 22px/1 var(--fp); letter-spacing: .06em; padding: 12px 0; border-bottom: 1px solid var(--line) }
.scorebar .wrap { display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: center }
.scorebar .logo { text-decoration: none; font: 700 18px/1 var(--fd); letter-spacing: .14em; color: var(--yellow); margin-right: auto; display: flex; gap: 10px; align-items: center }
.scorebar .logo svg { width: 26px; height: 26px }
.scorebar span b { color: var(--red); font-weight: 400 }
.scorebar nav { display: flex; flex-wrap: wrap; gap: 4px }
.scorebar nav a { text-decoration: none; padding: 4px 10px; border: 1px solid transparent; color: var(--cyan) }
.scorebar nav a:hover { border-color: var(--cyan) }
.scorebar nav a[aria-current] { color: var(--bg); background: var(--cyan); box-shadow: 0 0 12px var(--cyan) }

/* HUD rámeček s rohy */
.hud { position: relative; padding: 18px }
.hud::before, .hud::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--c, var(--cyan)); filter: drop-shadow(0 0 4px var(--c, var(--cyan))) }
.hud::before { top: 0; left: 0; border-right: 0; border-bottom: 0 }
.hud::after { bottom: 0; right: 0; border-left: 0; border-top: 0 }

.btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; font: 700 20px/1 var(--fd); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--bg); background: var(--yellow); border: 0; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--yellow), 0 0 26px var(--yellow); cursor: pointer }
.btn:hover { background: #fff }
.btn.ghost { background: transparent; color: var(--cyan); box-shadow: inset 0 0 0 2px var(--cyan), 0 0 14px rgba(79, 243, 255, .4) }

.section-title { display: flex; align-items: center; gap: 16px; margin: clamp(56px, 9vw, 96px) 0 24px }
.section-title h2 { font-size: clamp(28px, 4.4vw, 46px) }
.section-title::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--line), transparent) }
.kicker { font: 22px/1 var(--fp); letter-spacing: .1em; color: var(--green); margin: 0 }

/* ===== Úvod ===== */
.hero { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding-top: clamp(36px, 7vw, 80px) }
.hero h1 { font-size: clamp(44px, 7.6vw, 104px); line-height: .95; margin: 16px 0 24px }
.hero h1 span { display: block }
.hero .lead { font-size: clamp(18px, 1.9vw, 22px); color: #cfe8db; margin: 0 0 30px; max-width: 32em }
.cta { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center }
.mailplain { font: 26px/1.1 var(--fp); color: var(--cyan); overflow-wrap: anywhere }
.ident { --c: var(--cyan); margin: 0 }
.art { display: block; width: 100%; height: auto; fill: none; stroke-width: 3; stroke-linejoin: round }
.art .c-line { stroke: var(--cyan); filter: drop-shadow(0 0 4px var(--cyan)) }
.art .c-scr { stroke: var(--green); fill: rgba(73, 255, 138, .06) }
.art .c-ship { stroke: var(--yellow); filter: drop-shadow(0 0 5px var(--yellow)) }
.art .c-dot { stroke: var(--ink); fill: var(--ink) }
.art .c-btn { stroke: var(--red); fill: rgba(255, 59, 78, .3) } .art .c-btn.y { stroke: var(--yellow); fill: rgba(255, 225, 74, .3) }
.art .c-coin { stroke: var(--orange) }
.ident .scan { position: relative; overflow: hidden; background: #0a2a2f }
.ident .scan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(79, 243, 255, .35) 50%, transparent 60%) 0 0 / 100% 200%; animation: sweep 3.2s linear infinite; mix-blend-mode: screen }
.ident figcaption { font: 22px/1.2 var(--fp); color: var(--green); margin-top: 10px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap }
@keyframes sweep { from { background-position: 0 100% } to { background-position: 0 -100% } }

.missions3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }
.mcard { --c: var(--green); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 5%, transparent); padding: 22px }
.mcard svg { width: 64px; height: 64px; stroke: var(--c); fill: none; stroke-width: 2; filter: drop-shadow(0 0 5px var(--c)); margin-bottom: 12px }
.mcard h3 { font-size: 24px; color: var(--c); margin-bottom: 8px }
.mcard p { margin: 0; color: #c5dccf }
.stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }
.stages li { border-left: 3px solid var(--yellow); padding: 4px 0 4px 18px }
.stages .px { color: var(--yellow) }
.stages h3 { font-size: 22px; margin: 6px 0 6px }
.stages p { margin: 0; color: #c5dccf }
.lastmission { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: center; text-decoration: none; --c: var(--orange) }
.lastmission .art { border: 1px solid var(--orange); box-shadow: 0 0 22px rgba(255, 154, 46, .35); background: #000 }
.lastmission h3 { font-size: 32px; color: var(--orange); margin: 6px 0 10px }
.lastmission p { margin: 0 0 12px; color: #c5dccf }
.about { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px }
.about p { margin: 0 0 14px }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 14px 0 0 }
.chips li { font: 20px/1 var(--fp); padding: 6px 10px; border: 1px solid var(--line); color: var(--cyan) }
.continue { text-align: center; padding: clamp(48px, 8vw, 90px) 0 30px }
.continue h2 { font-size: clamp(44px, 8vw, 110px) }
.continue .count { font: clamp(70px, 12vw, 150px)/1 var(--fp); color: var(--red) }
.continue .mail { display: inline-block; font: 600 clamp(20px, 3.4vw, 36px)/1.2 var(--fd); color: var(--cyan); margin: 10px 0 26px; overflow-wrap: anywhere }

footer.credits { border-top: 1px solid var(--line); padding: 22px 0 10px; font: 20px/1.4 var(--fp); color: var(--muted) }
footer.credits .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px }
footer.credits nav { display: flex; flex-wrap: wrap; gap: 6px 18px }
footer.credits a { color: var(--cyan) }

/* ===== Blog (BBS / PHP) ===== */
.bbs-head { padding: 30px 0 10px }
.bbs-head pre { font: clamp(9px, 1.5vw, 15px)/1.15 ui-monospace, monospace; color: var(--green); text-shadow: 0 0 6px var(--green); margin: 0 0 12px; overflow: hidden }
.crumbs { font: 20px/1.3 var(--fp); color: var(--muted); border: 1px dashed var(--line); padding: 6px 12px; margin: 10px 0 24px; overflow-wrap: anywhere }
.crumbs b { color: var(--yellow); font-weight: 400 }
.blog { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start }
.side { display: grid; gap: 18px }
.box { border: 1px solid var(--line) }
.box h2 { font: 700 15px/1 var(--fd); letter-spacing: .2em; color: var(--bg); background: var(--green); padding: 7px 10px }
.box ul { list-style: none; margin: 0; padding: 10px 12px; font: 20px/1.5 var(--fp) }
.box ul a { text-decoration: none; color: var(--cyan) } .box ul a:hover { color: var(--yellow) }
.box ul a::before { content: "> "; color: var(--green) }
.box .inner { padding: 10px 12px; font-size: 15px }
.poll label { display: block; margin: 8px 0 3px; font: 18px/1 var(--fp) }
.poll .bar { height: 10px; border: 1px solid var(--green) }
.poll .bar i { display: block; height: 100%; width: var(--v); background: var(--green); box-shadow: 0 0 8px var(--green) }
.digits { font: 40px/1 var(--fp); color: var(--red); letter-spacing: .1em; text-shadow: 0 0 10px var(--red) }
.postlist { list-style: none; margin: 0; padding: 0 }
.postlist li { border-bottom: 1px dashed rgba(79, 243, 255, .25); padding: 18px 0 }
.postlist .meta { font: 19px/1.2 var(--fp); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 16px }
.postlist .meta .cat { color: var(--orange) }
.postlist h2 { font-size: clamp(24px, 3vw, 32px); margin: 8px 0 8px }
.postlist h2 a { text-decoration: none } .postlist h2 a:hover { color: var(--yellow) }
.postlist p { margin: 0 0 8px; color: #c5dccf }
.postlist .more { font: 20px/1 var(--fp); color: var(--cyan) }
.pager { display: flex; gap: 8px; font: 24px/1 var(--fp); margin-top: 20px }
.pager a, .pager b { padding: 6px 12px; border: 1px solid var(--line); text-decoration: none; color: var(--cyan); font-weight: 400 }
.pager b { background: var(--cyan); color: var(--bg) }

/* Článek */
.article { max-width: 720px; margin: 0 auto; padding-bottom: 30px }
.article h1 { font-size: clamp(38px, 6vw, 66px); margin: 12px 0 14px }
.article .lead { font-size: 21px; color: var(--cyan); margin: 0 0 20px }
.article p, .article li { color: #d9efe3 }
.article h2 { font-size: 28px; color: var(--yellow); margin: 36px 0 10px }
.article ul { padding-left: 0; list-style: none }
.article li { padding-left: 26px; position: relative; margin: 6px 0 }
.article li::before { content: "▶"; position: absolute; left: 0; color: var(--green); font-size: 13px; top: 5px }
.article pre { font: 22px/1.3 var(--fp); color: var(--green); text-shadow: 0 0 6px rgba(73, 255, 138, .6); border: 1px solid var(--green); padding: 16px; overflow-x: auto; margin: 18px 0 }
.article code { font-family: var(--fp); font-size: 1.2em; color: var(--green) }
.article figure { margin: 28px 0 }
.article figure svg { width: 100%; height: auto; stroke: var(--cyan); fill: none; stroke-width: 2; filter: drop-shadow(0 0 5px var(--cyan)) }
.article figcaption { font: 19px/1.3 var(--fp); color: var(--muted) }
.comments { margin-top: 44px }
.comment { border-left: 3px solid var(--c, var(--cyan)); padding: 6px 14px; margin-bottom: 14px }
.comment .px { color: var(--c, var(--cyan)) }
.comment p { margin: 4px 0 0 }
.form { display: grid; gap: 10px; border: 1px dashed var(--line); padding: 16px; margin-top: 18px }
.form input, .form textarea { font: 20px var(--fp); color: var(--green); background: #000; border: 1px solid var(--green); padding: 8px }

/* Poznámka, že jde o ukázkový web */
.concepts { font: 19px/1.6 var(--fp); text-align: center; padding: 16px 16px 30px; color: var(--muted); position: relative; z-index: 51 }
.concepts a { color: var(--cyan); margin: 0 6px }

@media (max-width: 860px) {
  .hero, .about, .lastmission, .blog { grid-template-columns: 1fr }
  .ident { max-width: 340px }
  .missions3, .stages { grid-template-columns: 1fr }
  .scorebar .hide-s { display: none }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }