/* VESMAT 8 – webová verze */
:root {
	--b1: #00ffff;   /* barva písma 1 */
	--b2: #0000ff;   /* barva písma 2 */
	--b3: #0000ff;   /* barva tlačítek */
	--bg: #000000;   /* pozadí */
	--rm: #0000ff;   /* rámeček */
	--red: #ff2a2a;
	--green: #00ff00;
	--okc: #19c419;
	--font: "Segoe UI", "Trebuchet MS", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
	--serif: Georgia, "Times New Roman", Times, serif;
	color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--b1); font-family: var(--font); font-size: 17px; -webkit-text-size-adjust: 100%; }
body { overflow: hidden; }
button, input, select { font-family: inherit; font-size: inherit; }
.vh-red { color: var(--red); }
.vh-green { color: var(--green); }
.vh-blue { color: #3d7bff; }
.vh-big { font-size: 1.35em; font-weight: 700; }
.vh-huge { font-size: 2em; font-weight: 800; line-height: 1.15; }
.vh-boot { position: fixed; inset: 0; display: grid; place-items: center; font: 800 clamp(40px, 9vw, 96px)/1 var(--serif); color: #00ff00; letter-spacing: .04em; text-shadow: 0 0 30px rgba(0,255,0,.45); animation: vh-pulse 1.4s ease-in-out infinite; }
.vh-boot.vh-err { font-size: 20px; color: var(--red); animation: none; padding: 20px; text-align: center; }
@keyframes vh-pulse { 50% { opacity: .55; } }

/* ---------- Tlačítka (Tlac) ---------- */
.vh-btn {
	display: inline-flex; align-items: center; justify-content: center; text-align: center;
	min-height: 44px; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--b3) 55%, #fff); border-radius: 10px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--b3) 82%, #fff) 0%, var(--b3) 42%, color-mix(in srgb, var(--b3) 78%, #000) 100%);
	color: var(--b1); font-weight: 700; line-height: 1.15; cursor: pointer; user-select: none;
	box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
	transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.vh-btn { background: var(--b3); border-color: rgba(255,255,255,.35); }
}
.vh-btn:hover:not(:disabled) { filter: brightness(1.18); box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 0 18px color-mix(in srgb, var(--b3) 60%, transparent); }
.vh-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
.vh-btn:focus-visible { outline: 3px solid var(--b1); outline-offset: 2px; }
.vh-btn:disabled { opacity: .42; cursor: default; filter: saturate(.5); }
.vh-btn-main { box-shadow: 0 0 0 2px var(--b1) inset, 0 2px 0 rgba(0,0,0,.45); }
.vh-btn-close, .vh-btn-konec { color: var(--red); }
.vh-green-btn { color: var(--green); }
.vh-btn-wide { width: 100%; }

.vh-input {
	width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px;
	border: 2px solid var(--rm); background: var(--bg); color: var(--b1); font-weight: 700; font-size: 1.05rem;
}
.vh-input:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--b1) 45%, transparent); }
select.vh-input { cursor: pointer; }

/* ---------- Busy ---------- */
.vh-busy { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .2s; background: linear-gradient(90deg, transparent, var(--b1), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: vh-busy 1s linear infinite; }
.vh-busy.on { opacity: 1; }
@keyframes vh-busy { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* ---------- Přihlášení ---------- */
.vh-login-wrap { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; overflow: auto; background: #000 center/cover no-repeat; }
.vh-login-wrap::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.25), rgba(0,0,0,.8)); }
.vh-login { position: relative; width: min(440px, 100%); padding: 26px 24px 22px; border-radius: 18px; background: rgba(0,0,0,.78); border: 3px solid var(--rm); box-shadow: 0 0 40px color-mix(in srgb, var(--rm) 50%, transparent); backdrop-filter: blur(4px); }
.vh-title { margin: 0 0 14px; text-align: center; font: 800 clamp(40px, 9vw, 64px)/1 var(--serif); color: #00ff00; text-decoration: underline; text-underline-offset: 8px; text-shadow: 0 0 22px rgba(0,255,0,.35); }
.vh-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.vh-tab { flex: 1; opacity: .6; }
.vh-tab.on { opacity: 1; box-shadow: 0 0 0 2px var(--b1) inset; }
.vh-hint { margin: 6px 0 10px; color: #cfe; font-size: .92rem; line-height: 1.4; }
.vh-field { display: block; margin: 10px 0; }
.vh-field > span { display: block; margin-bottom: 4px; color: var(--b1); font-weight: 700; font-size: .95rem; }
.vh-check { display: flex; align-items: center; gap: 8px; margin: 12px 0 16px; font-size: .9rem; color: #cfe; cursor: pointer; }
.vh-check input { width: 20px; height: 20px; }
.vh-login .vh-only-new { display: none; }
.vh-login.is-new .vh-only-new { display: block; }
.vh-login.is-new .vh-only-open { display: none; }
.vh-login-more { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }
.vh-btn-host { flex: 1 1 auto; color: #fff; }
.vh-linkbtn { background: none; border: 0; color: #9ff; text-decoration: underline; cursor: pointer; font-size: .95rem; padding: 6px 4px; }
.vh-login-konec { margin-top: 14px; display: flex; justify-content: center; }
.vh-login-konec .vh-btn { min-width: 160px; }
.vh-fs { position: absolute; top: 8px; right: 10px; z-index: 6; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.45); color: var(--b1); font-size: 22px; line-height: 1; cursor: pointer; }
.vh-fs:hover { background: rgba(255,255,255,.12); }
.vh-login-wrap > .vh-fs { position: fixed; }
.vh-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vh-right .vh-btn-small { min-height: 34px; font-size: clamp(12px, 1.05vw, 15px) !important; padding: 4px 6px; font-family: var(--font) !important; }

/* ---------- Hlavní okno ---------- */
.vh-main-screen { position: fixed; inset: 0; display: flex; flex-direction: column; background: #000; }
.vh-top { position: relative; flex: 0 0 auto; padding: 8px 56px 4px; text-align: center; font: 700 clamp(20px, 2.4vw, 32px)/1.2 var(--serif); color: var(--b1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(200px, 270px) 1fr minmax(230px, 300px); gap: 0; }
.vh-left, .vh-right { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; overflow-y: auto; }
.vh-left .vh-btn, .vh-right > .vh-btn { width: 100%; font-size: clamp(15px, 1.5vw, 21px); font-family: var(--serif); }
.vh-logo { display: block; text-align: center; font: 800 clamp(24px, 2.6vw, 34px)/1.3 var(--serif); color: #00ff00; text-decoration: underline; text-underline-offset: 5px; margin: 2px 0 4px; }
.vh-lbl { color: var(--b2); font-weight: 800; text-align: center; margin-top: 8px; font-size: clamp(14px, 1.3vw, 19px); }
.vh-val { color: var(--b1); font-weight: 700; text-align: center; font: 700 clamp(16px, 1.55vw, 22px)/1.3 var(--serif); min-height: 1.3em; }
.vh-val.vh-link { background: none; border: 0; cursor: pointer; padding: 0; color: var(--b1); text-decoration: underline dotted; text-underline-offset: 4px; }
.vh-okc { color: var(--okc); }
.vh-chc { color: var(--red); }
.vh-btn-konec { margin-top: auto; }
.vh-center { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.vh-canvas { position: absolute; inset: 8px; background: #000 center/cover no-repeat; border-radius: 12px; }
.vh-btn-let { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: #00ff00; font-size: 1.15rem; padding: 10px 22px; animation: vh-glow 1.4s ease-in-out infinite; }
@keyframes vh-glow { 50% { box-shadow: 0 0 26px #00ff00; } }
.vh-tema { color: var(--b1); font-size: .95rem; text-align: center; padding: 6px 2px 2px; border-top: 1px solid color-mix(in srgb, var(--b2) 60%, transparent); margin-top: 4px; }
.vh-sady { display: flex; flex-direction: column; gap: 2px; }
.vh-sada { display: flex; align-items: flex-start; gap: 8px; padding: 6px 6px; border-radius: 8px; color: var(--b2); font-weight: 700; cursor: pointer; line-height: 1.25; font-size: clamp(14px, 1.2vw, 18px); }
.vh-sada:hover { background: rgba(255,255,255,.06); }
.vh-sada input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--b3); }
.vh-sada.done { opacity: .5; cursor: default; }
.vh-stars { position: relative; z-index: 3; background: #000; flex: 0 0 auto; display: grid; grid-template-columns: repeat(40, 1fr); padding: 4px 6px 8px; font: 700 clamp(14px, 2vw, 28px)/1 var(--serif); text-align: center; }
.vh-stars span { color: #777; transition: color .3s, text-shadow .3s; }
.vh-stars span.plus { color: var(--green); text-shadow: 0 0 8px rgba(0,255,0,.6); }
.vh-stars span.minus { color: var(--red); }

/* ---------- Modální okna ---------- */
.vh-modal-back { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 12px; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .15s ease; overflow: auto; }
.vh-modal-back.in { opacity: 1; }
.vh-modal-back.out { opacity: 0; }
.vh-modal-back.full { padding: 0; background: #000; }
.vh-modal { position: relative; max-width: 100%; background: var(--bg); color: var(--b1); border: 8px solid var(--rm); border-radius: 16px; padding: 18px; box-shadow: 0 0 40px color-mix(in srgb, var(--rm) 45%, transparent), 0 20px 60px rgba(0,0,0,.6); transform: scale(.97); transition: transform .15s ease; }
.vh-modal-back.in .vh-modal { transform: none; }
.vh-modal-back.full .vh-modal { width: 100%; min-height: 100%; border-radius: 0; }
.vh-modal h2 { margin: 0 0 12px; color: var(--b1); font: 800 1.6rem/1.2 var(--serif); text-align: center; }
.vh-msg { width: min(760px, 100%); background: #eef0f3; color: #111; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.vh-msg-text { font-size: 1.25rem; font-weight: 600; line-height: 1.45; padding: 4px 6px 12px; }
.vh-msg-err .vh-msg-text, .vh-msg-chyba .vh-msg-text { color: #e00000; font-size: 1.8rem; font-weight: 800; }
.vh-msg-err .vh-msg-text .vh-big { color: #e00000; }
.vh-msg-warn .vh-msg-text { color: #c00; font-size: 1.45rem; }
.vh-msg-ok .vh-msg-text { color: #087a08; font-size: 1.45rem; text-align: center; }
.vh-msg .vh-green { color: #0a9a0a; }
.vh-msg .vh-red { color: #e00000; }
.vh-msg .vh-blue { color: #1d4ed8; }
.vh-msg-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.vh-msg .vh-btn { --b1: #fff; --b3: #2b4fd8; min-width: 120px; }
.vh-prompt .vh-input { --rm: #2b4fd8; --bg: #fff; --b1: #111; margin: 6px 0; }
.vh-imgbox { width: auto; max-width: 96vw; text-align: center; }
.vh-imgbox img { max-width: min(92vw, 1000px); max-height: 78vh; display: block; margin: 0 auto; border-radius: 6px; background: #fff; }

/* ---------- Otázka (Dialog + PanelA + DolniPanel) ---------- */
.vh-dialog { width: min(900px, 100%); min-height: min(620px, 92vh); display: flex; flex-direction: column; padding: 14px 16px 10px; }
.vh-dialog.flash-ok { animation: vh-flash .5s ease; }
@keyframes vh-flash { 0% { box-shadow: 0 0 0 0 rgba(0,255,0,.9), 0 0 60px rgba(0,255,0,.8); border-color: #00ff00; } 100% { } }
.vh-zadani { flex: 1 1 auto; display: flex; align-items: flex-start; justify-content: center; gap: 16px; color: var(--b2); font: 700 24px/1.35 var(--serif); text-align: center; overflow: auto; padding: 8px 4px; min-height: 180px; }
.vh-zadani.vlevo { text-align: left; justify-content: flex-start; }
.vh-zadani-text { min-width: 0; overflow-wrap: anywhere; }
.vh-zadani-img { max-width: 45%; max-height: 330px; border-radius: 6px; background: #fff; }
.vh-zadani font[size="1"] { font-size: 11px; }
.vh-zadani font[size="2"] { font-size: 13px; }
.vh-zadani font[size="3"] { font-size: 16px; }
.vh-zadani font[size="4"], .vh-popis font[size="4"], .vh-za font[size="4"] { font-size: 19px; }
.vh-zadani font[size="5"], .vh-popis font[size="5"], .vh-za font[size="5"] { font-size: 24px; }
.vh-zadani font[size="6"], .vh-popis font[size="6"], .vh-za font[size="6"] { font-size: 32px; }
.vh-zadani font[size="7"], .vh-popis font[size="7"], .vh-za font[size="7"] { font-size: 44px; }
.vh-zadani li { display: list-item; margin-left: 1.2em; }
.vh-answer { flex: 0 0 auto; display: grid; grid-template-columns: 1fr minmax(160px, 1fr) 1fr; align-items: center; gap: 10px; padding: 14px 0; }
.vh-popis { color: var(--b2); font: 700 24px/1.25 var(--serif); text-align: right; overflow-wrap: anywhere; }
.vh-za { color: var(--b2); font: 700 22px/1.25 var(--serif); text-align: left; overflow-wrap: anywhere; }
.vh-odpoved { width: 100%; min-height: 56px; padding: 6px 10px; border: 0; border-bottom: 3px solid var(--b1); border-radius: 8px 8px 0 0; background: color-mix(in srgb, var(--b1) 8%, var(--bg)); color: var(--b1); font: 700 30px/1 var(--serif); text-align: center; }
.vh-odpoved:focus { outline: none; box-shadow: 0 6px 16px -8px var(--b1); }
.vh-dolni { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(40px, auto); align-items: center; gap: 4px 10px; border-top: 1px solid color-mix(in srgb, var(--rm) 70%, transparent); padding-top: 8px; font: 700 24px/1.1 var(--serif); text-align: center; }
.vh-d-ch { color: var(--red); }
.vh-d-ok { color: var(--green); }
.vh-d-stars { color: var(--green); letter-spacing: .05em; }
.vh-d-cas { color: var(--b1); font-variant-numeric: tabular-nums; }
.vh-d-pok { font-size: 15px; text-align: left; color: var(--red); }
.vh-d-pok.green { color: var(--green); }
.vh-d-obr, .vh-d-zavri { background: none; border: 0; cursor: pointer; font: 700 24px/1.1 var(--serif); color: var(--red); padding: 6px; border-radius: 8px; }
.vh-d-obr:hover, .vh-d-zavri:hover { background: rgba(255,255,255,.08); }
.vh-d-send { font-size: 17px; min-height: 40px; }

/* ---------- Výběr adresáře ---------- */
.vh-vyber { width: min(820px, 100%); max-height: 92vh; display: flex; flex-direction: column; }
.vh-vyber-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; overflow: auto; padding: 4px; }
.vh-choice { justify-content: flex-start; text-align: left; font-family: var(--serif); }
.vh-choice.vh-back { opacity: .8; }

/* ---------- Let (HraOkno + PanelHra) ---------- */
.vh-flight { display: flex; align-items: stretch; justify-content: center; gap: 12px; padding: 10px !important; border-width: 0 !important; background: #000 !important; }
.vh-flight-stage { position: relative; flex: 0 1 auto; height: calc(100vh - 20px); aspect-ratio: 1 / 1; max-width: calc(100vw - 340px); border: 8px solid var(--rm); border-radius: 12px; overflow: hidden; background: #000; }
.vh-flight-canvas { display: block; width: 100%; height: 100%; image-rendering: auto; touch-action: none; }
.vh-flight-start { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; background: radial-gradient(circle, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
.vh-flight-start span { padding: 14px 26px; border-radius: 14px; background: rgba(0,0,0,.65); border: 2px solid #00ff00; color: #00ff00; font: 700 clamp(18px, 3vw, 30px)/1.3 var(--serif); text-align: center; animation: vh-glow 1.4s ease-in-out infinite; }
.vh-ppanel { flex: 0 0 300px; display: flex; flex-direction: column; gap: 4px; border: 8px solid var(--rm); border-radius: 12px; padding: 6px; background: var(--bg); overflow: auto; }
.vh-prow { border: 2px solid var(--rm); border-radius: 8px; padding: 4px 8px; text-align: center; }
.vh-pl { color: var(--b1); font-weight: 700; font-size: 15px; }
.vh-pv { color: var(--b2); font: 700 20px/1.25 var(--serif); min-height: 1.25em; }
.vh-pvesmat { margin-top: auto; background: none; border: 0; color: var(--red); font: 800 24px/1.2 var(--serif); padding: 8px; cursor: pointer; }
.vh-pvesmat.run { color: #00ff00; }
.vh-pad { position: fixed; right: 14px; bottom: 14px; z-index: 5; display: none; grid-template-columns: repeat(3, 72px); grid-auto-rows: 64px; gap: 6px; padding: 8px; border-radius: 16px; background: rgba(10,10,30,.75); border: 2px solid var(--rm); backdrop-filter: blur(3px); }
.vh-pad.on { display: grid; }
.vh-padb { border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: var(--b3); color: var(--b1); font-weight: 800; font-size: 20px; touch-action: none; user-select: none; -webkit-user-select: none; }
.vh-padb:active { filter: brightness(1.35); }
.vh-padb.start { color: #00ff00; font-size: 15px; }
.vh-padb.zavri { color: var(--red); font-size: 15px; }

/* ---------- Výzkumné centrum (SektorOkno) ---------- */
.vh-sektor { display: flex; flex-direction: column; gap: 6px; padding: 10px !important; overflow: auto; height: 100vh; }
.vh-horni { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; padding: 6px; border: 4px solid var(--rm); border-radius: 12px; align-items: stretch; }
.vh-horni .vh-btn { font-size: 15px; padding: 4px 6px; }
.vh-sval { display: grid; place-items: center; text-align: center; font-weight: 800; font-size: 15px; line-height: 1.2; }
.vh-sval.green { color: var(--green); }
.vh-slink { background: none; border: 0; color: var(--b1); font: 800 17px/1.2 var(--serif); cursor: pointer; border-radius: 8px; padding: 4px; }
.vh-slink:hover { background: rgba(255,255,255,.08); }
.vh-slink.red { color: var(--red); }
.vh-zarizeni { display: flex; flex-direction: column; gap: 6px; }
.vh-zrow { display: grid; grid-template-columns: 70px 1.2fr repeat(5, 1fr) 1.1fr 1fr 1fr 1fr 1fr; gap: 6px; align-items: center; padding: 4px 6px; border: 1px solid var(--rm); border-radius: 10px; color: var(--b2); }
.vh-zimg img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; display: block; }
.vh-zname { text-align: center; font-weight: 800; color: var(--b2); line-height: 1.15; }
.vh-zc { text-align: center; font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--b2); }
.vh-zrow .vh-btn { font-size: 14px; padding: 4px 6px; }

/* ---------- Velín (Vyzkum) ---------- */
.vh-velin { display: grid; grid-template-rows: auto 1fr; gap: 8px; padding: 10px !important; height: 100vh; overflow: auto; }
.vh-velin-top { border: 3px solid var(--rm); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.vh-nahore { display: grid; grid-template-columns: 1fr 1fr 140px; gap: 8px; }
.vh-velin-sel { color: var(--b2); font-family: var(--serif); font-size: 19px; }
.vh-velin-items { display: flex; flex-direction: column; gap: 4px; }
.vh-prow2 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; align-items: center; border: 1px solid var(--rm); border-radius: 10px; padding: 4px 6px; color: var(--b2); }
.vh-pname { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 19px; color: var(--b2); cursor: help; }
.vh-pname img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; }
.vh-pz { text-align: center; font-weight: 800; font-size: 19px; color: var(--b2); }
.vh-prow2 .vh-btn:hover:not(:disabled) { color: var(--green); }
.vh-velin-info { border: 3px solid var(--rm); border-radius: 12px; padding: 12px 16px; color: var(--b1); font-size: 18px; line-height: 1.5; overflow: auto; min-height: 220px; }

/* ---------- Informace ---------- */
.vh-infomenu { width: min(500px, 100%); display: grid; gap: 8px; background: var(--rm); }
.vh-infomenu .vh-btn { font-family: var(--serif); font-size: 21px; min-height: 50px; }
.vh-informace { width: min(1000px, 100%); }
.vh-info-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vh-info-tbl { width: 100%; border-collapse: collapse; font: 700 20px/1.6 var(--serif); }
.vh-info-tbl th { color: var(--b2); text-align: right; padding-right: 12px; font-weight: 700; width: 50%; }
.vh-info-tbl td { color: var(--b1); }
.vh-planety { display: flex; flex-direction: column; gap: 10px; background: #000 !important; height: 100vh; overflow: auto; }
.vh-pl-nazev { color: #00ff00 !important; font-size: clamp(26px, 4vw, 40px) !important; margin: 0 !important; }
.vh-pl-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.vh-pl-nav .vh-btn { min-width: 90px; }
.vh-pl-arrow { font: 800 24px/1 var(--serif) !important; min-width: 64px !important; }
.vh-pl-body { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; padding: 6px; }
.vh-pl-body img { max-width: min(100%, 900px); max-height: 70vh; border-radius: 8px; }
.vh-pl-body.both img { max-width: min(48%, 700px); }
.vh-pl-text { max-width: 760px; color: var(--b1); font: 20px/1.5 var(--serif); }
.vh-oprogramu { width: min(800px, 100%); text-align: center; }
.vh-oprogramu p { font-size: 1.1rem; line-height: 1.5; color: var(--b1); }
.vh-oprogramu .vh-podpis { font-style: italic; }
.vh-hodnosti { width: min(820px, 100%); }
.vh-hcols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.vh-hcol { display: flex; flex-direction: column; gap: 4px; }
.vh-hod { color: var(--b1); font: 700 19px/1.4 var(--serif); }
.vh-hod.hide { visibility: hidden; }
.vh-hod.cur { color: #00ff00; text-shadow: 0 0 10px rgba(0,255,0,.5); }

/* ---------- Nastavení ---------- */
.vh-nastaveni { width: min(600px, 100%); }
.vh-barvy { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.vh-barva { width: min(480px, 100%); }
.vh-barva-row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; margin: 8px 0; font-weight: 700; }
.vh-barva-row input[type=range] { width: 100%; }
.vh-barva-row input[type=color] { width: 100%; height: 40px; border: 0; background: none; }
.vh-barva-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.vh-barva-btns .vh-btn { width: 100%; }
.vh-barva-prev { height: 30px; border-radius: 8px; margin: 4px 0 8px; border: 1px solid rgba(255,255,255,.4); }

/* ---------- Mobil / tablet ---------- */
@media (max-width: 980px) {
	body { overflow: auto; }
	.vh-main-screen { position: static; min-height: 100%; }
	.vh-body { display: flex; flex-direction: column; }
	.vh-left { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; order: 2; align-items: center; }
	.vh-left .vh-span2 { grid-column: 1 / -1; }
	.vh-left .vh-lbl { margin: 0; text-align: right; }
	.vh-left .vh-val { text-align: left; }
	.vh-left .vh-val.vh-span2 { text-align: center; }
	.vh-center { order: 1; height: 34vh; overflow: hidden; }
	.vh-left .vh-val.vh-c { text-align: center; }
	.vh-right { order: 3; }
	.vh-stars { position: sticky; bottom: 0; background: #000; font-size: 15px; }
	.vh-horni { grid-template-columns: repeat(4, 1fr); }
	.vh-zrow { grid-template-columns: 60px 1fr 1fr 1fr; }
	.vh-zrow > :nth-child(n+3) { font-size: 13px; }
	.vh-zimg img { width: 50px; height: 50px; }
	.vh-flight { flex-direction: column; align-items: center; overflow: auto; }
	.vh-flight-stage { height: auto; width: min(100%, 70vh); max-width: 100%; }
	.vh-ppanel { flex: 0 0 auto; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); }
	.vh-pvesmat { grid-column: 1 / -1; }
	.vh-pad { grid-template-columns: repeat(3, 64px); grid-auto-rows: 56px; }
	.vh-info-cols, .vh-hcols { grid-template-columns: 1fr; }
	.vh-nahore { grid-template-columns: 1fr; }
	.vh-prow2 { grid-template-columns: 1fr 90px 1fr; }
	.vh-pname { font-size: 15px; }
	.vh-pname img { width: 40px; height: 40px; }
	.vh-pl-body.both img { max-width: 100%; }
}
@media (max-width: 600px) {
	.vh-dialog { padding: 10px; }
	.vh-zadani { font-size: 19px; }
	.vh-answer { grid-template-columns: 1fr; }
	.vh-popis, .vh-za { text-align: center; font-size: 19px; }
	.vh-dolni { font-size: 19px; grid-template-columns: repeat(4, 1fr); }
	.vh-d-pok { grid-column: 1 / -1; text-align: center; }
	.vh-msg-err .vh-msg-text, .vh-msg-chyba .vh-msg-text { font-size: 1.35rem; }
	.vh-zrow { grid-template-columns: 50px 1fr 1fr; }
	.vh-barvy { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Let – ovládání nakláněním */
.vh-padb.tilt { font-size: 13px; }
.vh-padb.tilt.on { background: #0a8a2a; color: #fff; }
.vh-tilt-ind { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 4px 12px; border-radius: 14px; background: rgba(0,0,0,.6); color: #0f0; font: 600 13px/1.3 var(--font); pointer-events: none; display: none; }
.vh-tilt-ind.on { display: block; }
/* mobil na šířku: plátno přes celou výšku, panel úzký */
@media (max-height: 560px) and (orientation: landscape) {
	.vh-flight { flex-direction: row !important; align-items: stretch !important; padding: 4px !important; gap: 6px; height: 100vh; min-height: 0 !important; overflow: hidden !important; }
	.vh-flight-stage { height: calc(100vh - 8px) !important; width: auto !important; max-width: 60vw !important; border-width: 4px; }
	.vh-ppanel { flex: 1 1 auto !important; width: auto !important; display: grid !important; grid-template-columns: 1fr 1fr; align-content: start; border-width: 4px; padding: 3px; gap: 2px; overflow: hidden; }
	.vh-pad { background: rgba(10,10,30,.55); }
	.vh-prow { padding: 1px 4px; border-width: 1px; }
	.vh-pl { font-size: 11px; }
	.vh-pv { font-size: 14px; }
	.vh-pvesmat { font-size: 16px; padding: 2px; grid-column: 1 / -1; justify-self: start; }
	.vh-pad { grid-template-columns: repeat(3, 54px); grid-auto-rows: 46px; right: 6px; bottom: 6px; }
	.vh-padb { font-size: 16px; }
	.vh-main-screen .vh-stars { font-size: 12px; }
}

/* Školní počítač */
.vh-heslo-skryte { -webkit-text-security: disc; text-security: disc; }
.vh-check-skolni { margin-top: 10px; padding: 6px 10px; border: 1px dashed rgba(255,255,255,.35); border-radius: 8px; font-size: .9em; }
.vh-login.is-skolni .vh-check-skolni { border-color: #ffb000; color: #ffd36b; background: rgba(255,176,0,.08); }

/* ---------- Okno otázky: panel, zlomky, volby, klávesnice ---------- */
.vh-dialog.vel-velke { width: min(1300px, 100%); min-height: min(820px, 96vh); }
.vh-dialog.vel-cela { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; }
.vh-q-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 22px; font: 600 14px/1.3 var(--sans, system-ui); color: var(--b1); }
.vh-q-info { opacity: .85; overflow-wrap: anywhere; }
.vh-q-panelchk { margin-left: auto; cursor: pointer; white-space: nowrap; user-select: none; font-size: 14px; opacity: .85; }
.vh-q-panelchk input { vertical-align: middle; }
.vh-q-panel { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 10px; margin: 6px 0; border: 1px solid color-mix(in srgb, var(--rm) 70%, transparent); border-radius: 10px; background: rgba(255,255,255,.04); font: 14px/1.3 var(--sans, system-ui); color: var(--b1); }
.vh-qp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.vh-qp-lab { font-weight: 700; margin-right: 2px; }
.vh-qp-btn { background: transparent; color: var(--b1); border: 1px solid color-mix(in srgb, var(--b1) 50%, transparent); border-radius: 7px; padding: 3px 9px; cursor: pointer; font: inherit; min-height: 30px; }
.vh-qp-btn.on { background: var(--b1); color: var(--bg); }
.vh-qp-zoom { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.vh-qp-cb { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
.vh-q-obsah { --qz: 1; zoom: var(--qz); flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; touch-action: pan-x pan-y; }
.vh-zadani.s-obr { flex-wrap: wrap; }
.vh-zadani.s-obr .vh-zadani-img { max-width: min(48%, 520px); max-height: 42vh; cursor: zoom-in; object-fit: contain; }
.vel-velke .vh-zadani.s-obr .vh-zadani-img, .vel-cela .vh-zadani.s-obr .vh-zadani-img { max-height: 55vh; max-width: 55%; }
.vh-vstup-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.vh-vstup { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vh-vstup > .vh-odpoved { width: 100%; }
.vh-zl-wrap { display: flex; align-items: center; gap: 8px; }
.vh-zlomek { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 150px; }
.vh-zl-cara { height: 3px; border-radius: 2px; background: var(--b1); }
.vh-odpoved.vh-zl { min-height: 46px; font-size: 26px; padding: 4px 8px; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--b1) 45%, transparent); }
.vh-odpoved.vh-zl:focus { border-color: var(--b1); }
.vh-odpoved.vh-zl-cel { width: 70px; }
.vh-odpoved.vh-podm { min-height: 40px; font-size: 22px; max-width: 220px; }
.vh-odpoved::placeholder { color: color-mix(in srgb, var(--b1) 40%, transparent); font-size: .6em; font-weight: 400; }
.vh-nahled { min-height: 1.4em; color: var(--b1); font: 700 22px/1.3 var(--serif); text-align: center; visibility: hidden; }
.vh-volby { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 4px 0 10px; }
.vh-volby:empty { display: none; }
.vh-volby-lab { width: 100%; text-align: center; color: var(--b1); font-weight: 700; }
.vh-volba { min-width: 64px; min-height: 52px; padding: 6px 14px; border-radius: 12px; border: 2px solid var(--b1); background: transparent; color: var(--b1); font: 700 26px/1 var(--serif); cursor: pointer; transition: transform .08s, background .15s; }
.vh-volba:hover { background: color-mix(in srgb, var(--b1) 15%, transparent); }
.vh-volba:active { transform: scale(.96); }
.vh-volba.on { background: var(--b1); color: var(--bg); box-shadow: inset 0 3px 8px rgba(0,0,0,.45); }
.vh-volba-zadna { font: 600 16px/1.2 var(--sans, system-ui); }
.vh-volba-send { min-height: 52px; }
.vh-keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px 0; max-width: 420px; width: 100%; margin: 0 auto; }
.vh-key { min-height: 50px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--b1) 50%, transparent); background: color-mix(in srgb, var(--b1) 10%, var(--bg)); color: var(--b1); font: 700 24px/1 var(--sans, system-ui); touch-action: manipulation; }
.vh-key:active, .vh-key.down { background: color-mix(in srgb, var(--b1) 35%, var(--bg)); }
.vh-key.ok { background: var(--green); color: #000; border-color: var(--green); }
.vh-key.abc { font-size: 16px; }
.vh-nast-okno { margin: 10px 0; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--rm) 70%, transparent); border-radius: 10px; }
.vh-nast-okno summary { cursor: pointer; font-weight: 700; color: var(--b1); }
.vh-nast-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2px 12px; }
.vh-check-small { font-size: .9em; }
@media (max-width: 600px) {
	.vh-q-panel { font-size: 13px; }
	.vh-zadani.s-obr .vh-zadani-img { max-width: 100%; max-height: 34vh; }
	.vh-volba { min-width: 56px; min-height: 48px; font-size: 22px; }
	.vh-dialog { min-height: auto; }
}

/* ---------- Školy, učitel ---------- */
.vh-skola-nab { border: 1px dashed var(--b1); border-radius: 10px; padding: 8px 10px; margin: 4px 0 8px; color: var(--b1); font-size: .95em; }
.vh-skola-nab:empty { display: none; }
.vh-skola-nab p { margin: 0 0 6px; }
.vh-skola-nab.vybrano { border-style: solid; }
.vh-login-skola { max-width: 520px; }
.vh-login-skola h2 { color: var(--b1); margin: 0 0 6px; font-size: 1.2rem; text-align: center; }
.vh-nast-skola { margin: 10px 0; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--rm) 70%, transparent); border-radius: 10px; color: var(--b1); }
.vh-btn-ucitel { background: linear-gradient(180deg, #116d2e, #0b4a1f) !important; border-color: #2fd36a !important; color: #d9ffe6 !important; }
.vh-ucitel { width: 100%; height: 100%; max-width: none; max-height: none; display: flex; flex-direction: column; padding: 12px 16px; border-radius: 0; font: 15px/1.4 var(--sans, system-ui); color: var(--b1); }
.vh-u-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vh-u-head h2 { margin: 0; font-size: 1.3rem; }
.vh-u-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--rm) 70%, transparent); padding-bottom: 8px; }
.vh-u-body { flex: 1 1 auto; overflow: auto; min-height: 0; }
.vh-u-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.vh-u-sel { width: auto; min-width: 140px; max-width: 100%; }
.vh-u-info { opacity: .85; font-size: .92em; }
.vh-u-num { width: 70px; display: inline-block; }
.vh-u-scroll { overflow: auto; max-width: 100%; }
.vh-ut { border-collapse: collapse; width: 100%; font-size: 14px; }
.vh-ut th, .vh-ut td { border-bottom: 1px solid color-mix(in srgb, var(--rm) 50%, transparent); padding: 6px 8px; text-align: left; vertical-align: middle; }
.vh-ut th { position: sticky; top: 0; background: var(--bg); font-weight: 700; white-space: nowrap; }
.vh-ut td.num, .vh-ut th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vh-ut td.small { font-size: 12px; opacity: .8; }
.vh-ut tfoot td { font-weight: 700; border-top: 2px solid var(--rm); }
.vh-ut tr.zakazano td { opacity: .55; }
.vh-ut tr.ceka td { background: rgba(255, 176, 0, .08); }
.vh-ut-stat td.vse { background: rgba(40, 200, 90, .25); color: #b8ffcf; font-weight: 700; }
.vh-ut-stat td.cast { background: rgba(255, 200, 0, .18); }
.vh-ut-stat td.nic { opacity: .45; }
.vh-okc { color: var(--green); } .vh-chc { color: var(--red); } .vh-letc { opacity: .8; }
.vh-u-akce { background: var(--bg); color: var(--b1); border: 1px solid var(--rm); border-radius: 6px; padding: 3px 6px; }
.vh-u-radek { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--rm) 40%, transparent); }
.vh-u-radek > span { flex: 1 1 220px; }
.vh-u-vysledky { max-height: 50vh; overflow: auto; margin: 8px 0; }
.vh-u-sec { margin: 0 0 18px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--rm) 60%, transparent); border-radius: 10px; }
.vh-u-sec h3 { margin: 0 0 6px; font-size: 1.05rem; }
.vh-u-btns { white-space: nowrap; }
.vh-u-btns .vh-btn { margin: 2px; }
.vh-u-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 14px; align-items: end; margin: 6px 0 10px; }
.vh-grid-wrap { max-height: 60vh; border: 1px solid color-mix(in srgb, var(--rm) 60%, transparent); border-radius: 8px; }
.vh-grid { border-collapse: collapse; width: 100%; min-width: 820px; }
.vh-grid th { position: sticky; top: 0; z-index: 1; background: var(--bg); padding: 5px 6px; text-align: left; border-bottom: 1px solid var(--rm); }
.vh-grid td { border: 1px solid color-mix(in srgb, var(--rm) 40%, transparent); padding: 0; vertical-align: top; }
.vh-grid td.n { width: 34px; text-align: right; padding: 6px; opacity: .7; }
.vh-grid textarea { width: 100%; min-height: 34px; border: 0; background: transparent; color: var(--b1); font: 13px/1.35 Consolas, monospace; padding: 5px 6px; resize: vertical; }
.vh-grid textarea:focus { outline: 2px solid var(--b1); outline-offset: -2px; background: rgba(255,255,255,.05); }
.vh-grid tr.navic td { background: rgba(255, 60, 60, .15); }
@media (max-width: 700px) { .vh-ucitel { padding: 8px; } .vh-ut { font-size: 13px; } .vh-ut th, .vh-ut td { padding: 4px 5px; } }

/* =========================================================
 * Témata vzhledu: kokpit (kovová palubní deska, jantarové displeje)
 * a hologram (skleněné panely, světelné hrany). Původní vzhled = bez data-tema.
 * ======================================================= */
html[data-tema="kokpit"] {
	--b1: #ffb547; --b2: #ffd894; --b3: #353c48; --bg: #12161c; --rm: #e8921c;
	--red: #ff5a4a; --green: #8cff6a;
	--font: "Chakra Petch", "Segoe UI", system-ui, sans-serif; --serif: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
	--panel: linear-gradient(180deg, #1d232c 0%, #141920 100%);
	--chamfer: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
html[data-tema="hologram"] {
	--b1: #8af8ff; --b2: #c3a6ff; --b3: #0e2f52; --bg: #050b18; --rm: #3fd8ff;
	--red: #ff6b8b; --green: #6dffb4;
	--font: "Oxanium", "Segoe UI", system-ui, sans-serif; --serif: "Oxanium", "Segoe UI", system-ui, sans-serif;
	--panel: rgba(10, 32, 64, .55);
}
html[data-tema] body, html[data-tema] .vh-main-screen { background: var(--bg); }

/* --- kokpit --- */
html[data-tema="kokpit"] .vh-main-screen { background: radial-gradient(ellipse at 50% 0%, #1c232d 0%, #0b0e12 70%); }
html[data-tema="kokpit"] .vh-left, html[data-tema="kokpit"] .vh-right {
	background: var(--panel); border-right: 2px solid #2a313b; box-shadow: inset -1px 0 0 #000, inset 0 0 0 1px rgba(255,181,71,.06);
	background-image: radial-gradient(circle at 8px 8px, #5a6270 1.5px, transparent 2px), radial-gradient(circle at calc(100% - 8px) 8px, #5a6270 1.5px, transparent 2px), var(--panel);
}
html[data-tema="kokpit"] .vh-right { border-right: 0; border-left: 2px solid #2a313b; }
html[data-tema="kokpit"] .vh-btn {
	clip-path: var(--chamfer); border-radius: 0; border: 0; color: var(--b1); letter-spacing: .03em;
	background: linear-gradient(180deg, #4b5463 0%, #333a46 48%, #262c35 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,181,71,.35);
	text-shadow: 0 0 8px rgba(255,170,40,.45);
}
html[data-tema="kokpit"] .vh-btn:hover:not(:disabled) { filter: brightness(1.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,181,71,.8), 0 0 14px rgba(255,160,30,.35); }
html[data-tema="kokpit"] .vh-btn-main, html[data-tema="kokpit"] .vh-tab.on { background: linear-gradient(180deg, #ffc25c 0%, #e8921c 100%); color: #1a1206; text-shadow: none; }
html[data-tema="kokpit"] .vh-modal {
	border: 0; border-radius: 0; clip-path: var(--chamfer); padding: 22px;
	background: repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 6px, transparent 6px 12px), var(--panel);
	box-shadow: inset 0 0 0 2px var(--rm), inset 0 0 0 5px #0b0e12, inset 0 0 0 6px rgba(255,181,71,.25);
}
html[data-tema="kokpit"] .vh-modal-back.full .vh-modal { clip-path: none; }
html[data-tema="kokpit"] .vh-modal h2, html[data-tema="kokpit"] .vh-logo { font-family: var(--serif); letter-spacing: .06em; text-transform: uppercase; color: var(--b1); text-shadow: 0 0 12px rgba(255,170,40,.5); }
html[data-tema="kokpit"] .vh-logo { text-decoration: none; border-bottom: 2px solid var(--rm); }
html[data-tema="kokpit"] .vh-canvas { border-radius: 0; box-shadow: inset 0 0 0 2px #2a313b, 0 0 0 4px #0b0e12, 0 0 0 6px rgba(255,181,71,.3); }
html[data-tema="kokpit"] .vh-stars { background: #0b0e12; border-top: 2px solid #2a313b; }
html[data-tema="kokpit"] .vh-stars span.plus { color: #8cff6a; text-shadow: 0 0 8px rgba(140,255,106,.7); }
html[data-tema="kokpit"] .vh-input, html[data-tema="kokpit"] .vh-odpoved { background: #0a0d11; color: #ffd894; border: 1px solid #5a4220; border-radius: 4px; font-family: var(--font); }
html[data-tema="kokpit"] .vh-login { border: 0; border-radius: 0; clip-path: var(--chamfer); background: var(--panel); box-shadow: inset 0 0 0 2px var(--rm); }

/* --- hologram --- */
html[data-tema="hologram"] .vh-main-screen { background: radial-gradient(ellipse at 30% 20%, #0c2347 0%, #050b18 60%); }
html[data-tema="hologram"] .vh-main-screen::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; background: repeating-linear-gradient(0deg, rgba(138,248,255,.035) 0 1px, transparent 1px 3px); }
html[data-tema="hologram"] .vh-left, html[data-tema="hologram"] .vh-right { background: linear-gradient(180deg, rgba(14,40,80,.35), rgba(5,11,24,.2)); border-right: 1px solid rgba(63,216,255,.35); }
html[data-tema="hologram"] .vh-right { border-right: 0; border-left: 1px solid rgba(63,216,255,.35); }
html[data-tema="hologram"] .vh-btn {
	border-radius: 6px; border: 1px solid rgba(63,216,255,.65); color: var(--b1);
	background: linear-gradient(180deg, rgba(63,216,255,.16), rgba(63,216,255,.04));
	box-shadow: 0 0 10px rgba(63,216,255,.18), inset 0 0 12px rgba(63,216,255,.08); text-shadow: 0 0 6px rgba(138,248,255,.6);
}
html[data-tema="hologram"] .vh-btn:hover:not(:disabled) { background: linear-gradient(180deg, rgba(63,216,255,.32), rgba(177,140,255,.12)); box-shadow: 0 0 18px rgba(63,216,255,.45); filter: none; }
html[data-tema="hologram"] .vh-btn-main, html[data-tema="hologram"] .vh-tab.on { background: linear-gradient(90deg, rgba(63,216,255,.55), rgba(177,140,255,.45)); color: #f2feff; }
html[data-tema="hologram"] .vh-modal {
	border: 1px solid rgba(63,216,255,.7); border-radius: 14px; background: rgba(6, 18, 40, .78);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 0 0 1px rgba(177,140,255,.25), 0 0 30px rgba(63,216,255,.28), inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-tema="hologram"] .vh-modal::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #3fd8ff, #c3a6ff, transparent); }
html[data-tema="hologram"] .vh-modal h2, html[data-tema="hologram"] .vh-logo { font-family: var(--serif); letter-spacing: .08em; color: var(--b1); text-shadow: 0 0 14px rgba(63,216,255,.7); }
html[data-tema="hologram"] .vh-logo { text-decoration: none; }
html[data-tema="hologram"] .vh-canvas { border-radius: 16px; box-shadow: 0 0 0 1px rgba(63,216,255,.5), 0 0 30px rgba(63,216,255,.25); }
html[data-tema="hologram"] .vh-stars { background: transparent; }
html[data-tema="hologram"] .vh-input, html[data-tema="hologram"] .vh-odpoved { background: rgba(5, 15, 35, .8); color: var(--b1); border: 1px solid rgba(63,216,255,.5); font-family: var(--font); }
html[data-tema="hologram"] .vh-login { border: 1px solid rgba(63,216,255,.7); background: rgba(6,18,40,.8); box-shadow: 0 0 30px rgba(63,216,255,.3); }

/* zprávy v nových tématech tmavé jako ostatní okna */
html[data-tema] .vh-msg { background: var(--bg); color: var(--b1); box-shadow: inset 0 0 0 2px var(--rm), 0 20px 60px rgba(0,0,0,.6); }
html[data-tema] .vh-msg .vh-btn { --b1: inherit; }
html[data-tema] .vh-msg .vh-green { color: var(--green); }
html[data-tema] .vh-msg .vh-red { color: var(--red); }
html[data-tema] .vh-msg .vh-blue { color: var(--b2); }
html[data-tema] .vh-zadani, html[data-tema] .vh-popis, html[data-tema] .vh-za { color: var(--b2); }
@media (prefers-reduced-motion: reduce) { html[data-tema="hologram"] .vh-main-screen::after { display: none; } }

/* rozestavěné zařízení ve výzkumném centru */
.vh-zimg { position: relative; }
.vh-zimg .vh-zstavi { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; border-radius: inherit; pointer-events: none; }
.vh-zimg.stavi .vh-zstavi { display: block; }

/* Nastavení – vzhled */
.vh-vz-row { margin: 8px 0; }
.vh-vz-lab { font-weight: 700; margin-bottom: 4px; }
.vh-vz-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.vh-vz-full .vh-input { width: 100%; }
.vh-vz-opt { min-height: 36px; padding: 4px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--b1) 45%, transparent); background: transparent; color: var(--b1); cursor: pointer; font: inherit; font-size: .9em; }
.vh-vz-opt.on { background: var(--b1); color: var(--bg); border-color: var(--b1); }
.vh-vz-ikona { padding: 4px; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.vh-vz-ikona img { width: 40px; height: 40px; object-fit: contain; display: block; background: #000; border-radius: 6px; }
.vh-vz-velin img { width: 56px; height: 56px; }
.vh-vz-ikona.on img { box-shadow: 0 0 0 2px var(--bg); }

/* ---------- Rádce ---------- */
.vh-radce { position: fixed; z-index: 160; left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(52px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: flex-end; gap: 8px; max-width: min(460px, calc(100vw - 24px)); animation: vh-radce-in .35s ease both; }
.vh-radce-ikona { flex: 0 0 64px; width: 64px; height: 64px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); animation: vh-radce-vznas 3s ease-in-out infinite; }
.vh-radce-ikona svg { width: 100%; height: 100%; display: block; }
.vh-radce-bublina { position: relative; background: #f5f8fc; color: #142033; border-radius: 14px 14px 14px 4px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45); font: 15px/1.4 var(--font); }
.vh-radce.varovani .vh-radce-bublina { background: #fff3d6; box-shadow: 0 0 0 2px #ff9d1a, 0 10px 30px rgba(0,0,0,.45); }
.vh-radce-jmeno { font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #3a63e0; margin-bottom: 2px; }
.vh-radce.varovani .vh-radce-jmeno { color: #b35a00; }
.vh-radce-text ul { margin: 4px 0 0; padding-left: 18px; }
.vh-radce-btns { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.vh-radce-btns .vh-btn { --b1: #fff; --b3: #2b4fd8; min-height: 34px; }
.vh-radce-vyp { color: #5d6a7a !important; font-size: 13px; }
@keyframes vh-radce-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes vh-radce-vznas { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .vh-radce, .vh-radce-ikona { animation: none; } }
@media (max-width: 760px) { .vh-radce { bottom: auto; top: calc(58px + env(safe-area-inset-top, 0px)); align-items: flex-start; } .vh-radce-ikona { flex-basis: 44px; width: 44px; height: 44px; } .vh-radce-bublina { font-size: 14px; border-radius: 4px 14px 14px 14px; } }

/* =========================================================
 * Ústředí SOVV (verze 2.0) – vlastní filmový vzhled nezávislý na barvách hráče
 * ======================================================= */
.vh-joule { grid-column: 1 / -1; color: #ffd08a; font-size: 15px; }
.vh-btn-ustredi { color: #ffd08a; }
.sv-screen { height: 100%; overflow: auto; background: #040914; color: #e6f4ff; font-family: Oxanium, "Segoe UI", system-ui, sans-serif; }
.sv-wrap { position: relative; min-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 42%, #0c2240 0%, #061226 45%, #040914 100%); }
.sv-stars { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1px 1px at 12% 18%, #fff8, transparent), radial-gradient(1px 1px at 72% 12%, #fff6, transparent), radial-gradient(1.5px 1.5px at 38% 72%, #9beaff88, transparent), radial-gradient(1px 1px at 88% 64%, #fff7, transparent), radial-gradient(1px 1px at 55% 38%, #fff5, transparent), radial-gradient(1.5px 1.5px at 22% 88%, #ffd59a77, transparent), radial-gradient(1px 1px at 94% 30%, #fff6, transparent); background-size: 420px 420px; }
.sv-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#3fd8ff0d 1px, transparent 1px), linear-gradient(90deg, #3fd8ff0d 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 45%, #000 30%, transparent 75%); }
.sv-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 24px; border-bottom: 1px solid #3fd8ff22; }
.sv-brand { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; }
.sv-title { font: 700 21px/1.1 "Chakra Petch", Oxanium, sans-serif; letter-spacing: .14em; }
.sv-title span { color: #3fd8ff; }
.sv-sub { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8fb3d6; }
.sv-headr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sv-kredity { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #ffb54714; border: 1px solid #ffb54766; }
.sv-kredity b { font-size: 18px; color: #ffd08a; }
.sv-kredity span { font-size: 13px; color: #c9a46a; }
.sv-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid #3fd8ff55; background: #3fd8ff12; color: #cdefff; font: 600 14px Oxanium, sans-serif; cursor: pointer; }
.sv-chip:hover { background: #3fd8ff26; }
.sv-chip:focus-visible, .sv-exp:focus-visible, .sv-typ:focus-visible, .sv-volba:focus-visible, .sv-btn-amber:focus-visible { outline: 3px solid #ffb547; outline-offset: 2px; }
.sv-chip-konec { color: #ff9aa6; border-color: #ff5a6e66; background: #ff5a6e12; }
.sv-chip-rek { color: #ffd08a; border-color: #ffb54766; background: #ffb54712; }
.sv-head .vh-fs { position: static; }
.sv-user { display: flex; align-items: center; gap: 9px; padding: 3px 12px 3px 3px; border-radius: 999px; background: #0b1a33; border: 1px solid #3fd8ff33; color: #e6f4ff; cursor: pointer; font-family: inherit; }
.sv-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #3fd8ff, #7b6bff); color: #040914; font-weight: 700; }
.sv-uname { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; font-size: 14px; }
.sv-uname small { font-size: 12px; color: #8fb3d6; }
.sv-main { position: relative; display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) minmax(260px, 350px); gap: 20px; padding: 18px 24px; align-items: start; }
.sv-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sv-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: #0a1730cc; border: 1px solid #3fd8ff22; }
.sv-card-hod { background: linear-gradient(160deg, #0f2a4d, #0a1730); border-color: #3fd8ff33; }
.sv-card-mini { padding: 10px 16px; }
.sv-lbl { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8fb3d6; }
.sv-muted { color: #8fb3d6; font-size: 13px; }
.sv-strong { font-weight: 600; font-size: 15px; }
.sv-hodrow { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font-family: inherit; }
.sv-hnazev { font: 700 21px/1.15 "Chakra Petch", Oxanium, sans-serif; }
.sv-btn-amber { min-height: 46px; padding: 0 18px; border-radius: 10px; border: 0; background: #ffb547; color: #1b1205; font: 700 15px Oxanium, sans-serif; cursor: pointer; }
.sv-btn-amber:disabled { opacity: .5; cursor: default; }
.sv-card-hod .sv-btn-amber { opacity: .6; }
.sv-card-hod .sv-btn-amber.ready { opacity: 1; box-shadow: 0 0 0 0 #ffb54799; animation: sv-ready 1.8s ease-out infinite; }
@keyframes sv-ready { to { box-shadow: 0 0 0 14px #ffb54700; } }
.sv-bar { height: 8px; border-radius: 4px; background: #1d3a63; overflow: hidden; }
.sv-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3fd8ff, #7b6bff); transition: width .4s; }
.sv-center { position: relative; display: grid; place-items: center; min-height: 480px; perspective: 900px; }
.sv-globe { width: min(100%, 560px); height: auto; aspect-ratio: 1; position: relative; z-index: 1; }
.sv-orbit { position: absolute; left: 50%; top: 50%; width: min(118%, 640px); aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(74deg) rotateZ(-18deg); border-radius: 50%; border: 1px dashed #3fd8ff55; z-index: 2; pointer-events: none; }
.sv-orbit-spin { position: absolute; inset: 0; animation: sv-spin 18s linear infinite; }
.sv-orbit-spin i { position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #8b7bff; box-shadow: 0 0 14px #8b7bff; }
@keyframes sv-spin { to { transform: rotate(360deg); } }
.sv-globe-info { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 6px 14px; border-radius: 999px; background: #061226cc; border: 1px solid #3fd8ff22; font-size: 13px; color: #8fb3d6; white-space: nowrap; }
.sv-globe-info b { color: #6ee69a; }
.sv-typy { display: flex; flex-direction: column; gap: 8px; }
.sv-typ { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid #3fd8ff22; background: #0f2a4d; color: #e6f4ff; text-align: left; cursor: pointer; font-family: inherit; color: #3fd8ff; }
.sv-typ svg { grid-row: span 2; }
.sv-typ .sv-strong { color: #e6f4ff; }
.sv-typ:hover { border-color: #3fd8ff88; background: #133461; }
.sv-dock { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; padding: 14px 24px 20px; border-top: 1px solid #3fd8ff22; background: linear-gradient(#04091400, #040914ee 40%); }
.sv-exp { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: 14px; border: 1px solid currentColor; background: linear-gradient(160deg, #0f1c36, #070d1d); text-align: left; cursor: pointer; font-family: inherit; transition: transform .2s, box-shadow .2s; border-color: color-mix(in srgb, currentColor 40%, transparent); }
.sv-exp:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -12px currentColor; }
.sv-exp.aktivni { border-color: currentColor; box-shadow: 0 0 22px -6px currentColor; background: linear-gradient(160deg, #1b1846, #0b0d26); }
.sv-exp.zam { border-style: dashed; opacity: .75; }
.sv-exp-n { font: 700 15px/1.2 "Chakra Petch", Oxanium, sans-serif; color: #e6f4ff; }
.sv-exp-s { font-size: 12px; color: color-mix(in srgb, currentColor 70%, #fff); }
.sv-toast { position: fixed; left: 50%; top: 18px; z-index: 10000; max-width: min(520px, calc(100% - 32px)); padding: 12px 18px; border-radius: 12px; background: #0f2a4df2; border: 1px solid #ffb547aa; color: #ffe6bf; font: 600 15px/1.35 Oxanium, sans-serif; box-shadow: 0 12px 40px #000a; transform: translate(-50%, -20px); opacity: 0; transition: transform .3s, opacity .3s; pointer-events: none; }
.sv-toast.in { transform: translate(-50%, 0); opacity: 1; }

/* modální okna SOVV */
.sv-modal { width: min(1100px, 100%); background: linear-gradient(170deg, #0c2240, #061226 60%); color: #e6f4ff; border: 1px solid #3fd8ff55; border-radius: 18px; font-family: Oxanium, system-ui, sans-serif; box-shadow: 0 0 60px #3fd8ff22, 0 20px 60px #000c; }
.sv-modal h2 { margin: 0; font: 700 22px/1.2 "Chakra Petch", Oxanium, sans-serif; color: #e6f4ff; text-align: left; letter-spacing: .04em; }
.sv-modal h3 { margin: 18px 0 10px; font: 700 16px "Chakra Petch", Oxanium, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #cdefff; }
.sv-modal p { line-height: 1.45; }
.sv-mhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.sv-mhead h2 { flex: 1 1 auto; }
.sv-x { width: 44px; height: 44px; border-radius: 10px; border: 1px solid #3fd8ff44; background: transparent; color: #cdefff; font-size: 26px; line-height: 1; cursor: pointer; }
.sv-tabs { display: flex; gap: 6px; }
.sv-tab { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid #3fd8ff44; background: transparent; color: #cdefff; font: 600 14px Oxanium, sans-serif; cursor: pointer; }
.sv-tab.on { background: #3fd8ff; color: #040914; border-color: #3fd8ff; }
.sv-pobsah { max-height: min(70vh, 720px); overflow: auto; padding-right: 4px; }
.sv-hodnosti { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.sv-hod { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 14px; text-align: center; background: #061226aa; border: 1px solid #3fd8ff1a; color: #3d5677; }
.sv-hod b { color: #e6f4ff; font-size: 14px; line-height: 1.2; }
.sv-hod.hot { color: #6ee69a; border-color: #6ee69a55; }
.sv-hod.ted { color: #ffb547; border-color: #ffb547; background: #ffb5471a; }
.sv-hod.zam { opacity: .55; }
.sv-exhod { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.sv-exh { gap: 4px; }
.sv-stitky { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.sv-stitek { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; background: #0a1730; border: 1px solid #3fd8ff22; text-align: center; font-size: 14px; }
.sv-stitek.zam { opacity: .7; }
.sv-medaile { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.sv-med { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: #0a1730; border: 1px solid #ffb54755; color: #ffb547; }
.sv-med b { color: #e6f4ff; }
.sv-med.zam { color: #5a6d88; border-style: dashed; border-color: #3fd8ff33; opacity: .65; }
.sv-vyber { width: min(640px, 100%); }
.sv-volby { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; max-height: 60vh; overflow: auto; margin-top: 10px; }
.sv-volba { min-height: 48px; padding: 8px 12px; border-radius: 10px; border: 1px solid #3fd8ff33; background: #0f2a4d; color: #e6f4ff; font: 600 14px Oxanium, sans-serif; text-align: left; cursor: pointer; }
.sv-volba:hover { border-color: #3fd8ff; }
.sv-smena { width: min(620px, 100%); display: flex; flex-direction: column; gap: 12px; }
.sv-smena-stav { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: #8fb3d6; }
.sv-smena-stav b { color: #e6f4ff; }
.sv-smena-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sv-smena-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #8fb3d6; }
.sv-input { min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid #3fd8ff55; background: #061226; color: #e6f4ff; font: 600 15px Oxanium, sans-serif; width: 100%; }
.sv-smena-nahled { font-size: 18px; color: #ffd08a; min-height: 26px; }
.sv-obchod { border-top: 1px solid #3fd8ff22; padding-top: 6px; }
@media (max-width: 560px) { .sv-smena-form { grid-template-columns: 1fr; } }

/* minihry */
.sv-hra { width: 100%; min-height: 100%; border-radius: 0; border: 0; display: flex; flex-direction: column; padding: 14px 18px; background: radial-gradient(ellipse 70% 60% at 50% 55%, #0c2240, #040914 75%); }
.sv-hra-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-bottom: 12px; border-bottom: 1px solid #3fd8ff22; }
.sv-hra-nazev { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; flex: 1 1 auto; color: #3fd8ff; }
.sv-hra-nazev b { font: 700 20px "Chakra Petch", Oxanium, sans-serif; color: #e6f4ff; }
.sv-hra-skore { font: 700 20px "Chakra Petch", Oxanium, sans-serif; display: flex; gap: 14px; }
.sv-ok { color: #6ee69a; } .sv-ch { color: #ff8a98; }
.sv-hra-plocha { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 16px 0; }
.sv-pex { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 980px; width: 100%; margin: 0 auto; }
.sv-karta { position: relative; min-height: 130px; border-radius: 14px; border: 1px solid #3fd8ff55; background: linear-gradient(160deg, #13305a, #0a1730); color: #e6f4ff; cursor: pointer; font: 600 18px/1.3 Oxanium, sans-serif; perspective: 600px; padding: 0; overflow: hidden; }
.sv-karta-rub, .sv-karta-lic { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; transition: opacity .25s, transform .3s; backface-visibility: hidden; }
.sv-karta-lic { opacity: 0; transform: rotateY(90deg); background: #0f2a4d; }
.sv-karta.a .sv-karta-lic { color: #ffd08a; font-size: 22px; font-family: "Chakra Petch", Oxanium, sans-serif; }
.sv-karta.otoc .sv-karta-lic { opacity: 1; transform: none; }
.sv-karta.otoc .sv-karta-rub { opacity: 0; transform: rotateY(-90deg); }
.sv-karta.hotovo { border-color: #6ee69a; box-shadow: 0 0 18px #6ee69a55; }
.sv-karta.hotovo .sv-karta-lic { background: #0d3a2c; }
.sv-karta.spatne { border-color: #ff5a6e; animation: sv-shake .4s; }
@keyframes sv-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.sv-spojovacka { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; width: 100%; margin: 0 auto; }
.sv-spoj-l, .sv-spoj-p { display: flex; flex-direction: column; gap: 10px; }
.sv-spoj { min-height: 64px; padding: 10px 14px; border-radius: 12px; border: 1px solid #3fd8ff44; background: #0f2a4d; color: #e6f4ff; font: 600 17px/1.3 Oxanium, sans-serif; cursor: pointer; text-align: left; }
.sv-spoj.odp { text-align: center; color: #ffd08a; font-family: "Chakra Petch", Oxanium, sans-serif; font-size: 20px; }
.sv-spoj.vyb { border-color: #ffb547; box-shadow: 0 0 0 2px #ffb547 inset; }
.sv-spoj.hotovo { opacity: .85; cursor: default; }
.sv-spoj.spatne { border-color: #ff5a6e; animation: sv-shake .4s; }
.sv-letajici { display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; }
.sv-let-otazka { align-self: center; max-width: 760px; padding: 16px 28px; border-radius: 18px; background: #0a1730e6; border: 1px solid #3fd8ff55; text-align: center; font: 700 26px/1.3 "Chakra Petch", Oxanium, sans-serif; box-shadow: 0 0 50px #3fd8ff22; }
.sv-let-otazka small { display: block; font: 500 13px Oxanium, sans-serif; color: #8fb3d6; }
.sv-let-arena { position: relative; flex: 1 1 auto; min-height: 380px; }
.sv-bublina { position: absolute; display: grid; place-items: center; min-width: 110px; min-height: 110px; padding: 10px; border-radius: 50%; border: 2px solid #3fd8ff88; background: radial-gradient(circle at 35% 30%, #3fd8ff44, #0a1730 70%); color: #e6f4ff; font: 700 22px "Chakra Petch", Oxanium, sans-serif; cursor: pointer; animation: sv-fly 7s ease-in-out infinite alternate; }
.sv-bublina:hover { border-color: #ffb547; box-shadow: 0 0 30px #ffb54766; }
.sv-bublina.ok { border-color: #6ee69a; background: radial-gradient(circle, #6ee69a55, #0a1730 70%); box-shadow: 0 0 40px #6ee69a88; animation-play-state: paused; }
.sv-bublina.spatne { border-color: #ff5a6e; background: radial-gradient(circle, #ff5a6e44, #0a1730 70%); opacity: .6; animation-play-state: paused; }
@keyframes sv-fly { 0% { transform: translate(0, 0); } 33% { transform: translate(40px, -40px); } 66% { transform: translate(-30px, 30px); } 100% { transform: translate(20px, 60px); } }
.sv-serazeni { display: flex; flex-direction: column; gap: 12px; max-width: 760px; width: 100%; margin: 0 auto; }
.sv-serad { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: sv; }
.sv-serad-pol { display: grid; grid-template-columns: 34px 1fr auto 48px 48px; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #0f2a4d; border: 1px solid #3fd8ff33; counter-increment: sv; font-size: 17px; }
.sv-serad-pol::before { content: counter(sv) "."; color: #8fb3d6; font-weight: 700; }
.sv-serad-pol.ok { border-color: #6ee69a; } .sv-serad-pol.spatne { border-color: #ff5a6e; }
.sv-serad-v { color: #ffd08a; font-family: "Chakra Petch", Oxanium, sans-serif; }
.sv-sip { min-height: 44px; border-radius: 10px; border: 1px solid #3fd8ff44; background: #0a1730; color: #cdefff; cursor: pointer; }
.sv-sip:disabled { opacity: .3; cursor: default; }
@media (max-width: 1100px) {
	.sv-main { grid-template-columns: 1fr 1fr; }
	.sv-center { grid-column: 1 / -1; order: -1; min-height: 340px; }
	.sv-globe { width: min(100%, 420px); }
}
@media (max-width: 700px) {
	.sv-head { padding: 12px 14px; }
	.sv-main { grid-template-columns: 1fr; padding: 12px 14px; gap: 14px; }
	.sv-center { min-height: 0; }
	.sv-globe { width: min(78vw, 320px); }
	.sv-orbit { display: none; }
	.sv-dock { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 14px 18px; }
	.sv-headr { width: 100%; }
	.sv-uname { display: none; }
	.sv-pex { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.sv-karta { min-height: 96px; font-size: 14px; }
	.sv-spojovacka { gap: 10px; }
	.sv-spoj { font-size: 14px; min-height: 56px; padding: 8px; }
	.sv-bublina { min-width: 84px; min-height: 84px; font-size: 18px; }
	.sv-let-otazka { font-size: 20px; padding: 12px 16px; }
	.sv-serad-pol { grid-template-columns: 28px 1fr 44px 44px; }
	.sv-serad-v { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .sv-orbit-spin, .sv-bublina, .sv-card-hod .sv-btn-amber.ready { animation: none; } }

/* editor a zobrazení matematiky */
.vh-m-fr { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 .12em; line-height: 1.1; }
.vh-m-fr > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 .15em; }
.vh-m-fr > span:last-child { padding: 0 .15em; }
.vh-m-sq { white-space: nowrap; }
.vh-m-sq > span { border-top: 1.5px solid currentColor; padding: 0 .1em; margin-left: -.05em; }
.vh-m-ix { font-size: .6em; margin-right: -.35em; vertical-align: .9em; }
.vh-mat { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.vh-mat-bar { display: flex; flex-wrap: wrap; gap: 4px; }
.vh-mat-btn { min-width: 44px; min-height: 40px; padding: 0 8px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--b1) 45%, transparent); background: rgba(255,255,255,.05); color: var(--b1); font: 600 17px var(--sans, system-ui); cursor: pointer; }
.vh-mat-nahled { min-height: 40px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.06); font-size: 20px; }
.sv-modal-back { place-items: safe center; }
@media (max-width: 700px) {
	.sv-wrap { display: flex; flex-direction: column; }
	.sv-head { order: 1; } .sv-dock { order: 2; border-top: 0; border-bottom: 1px solid #3fd8ff22; background: none; } .sv-main { order: 3; }
	.sv-headr .sv-chip { min-height: 40px; padding: 0 10px; font-size: 13px; }
}

/* Školy 2.0: hledání sad, týmy, úkoly, kanál školy */
.vh-vyber-hledat { margin: 0 0 10px; }
.vh-choice-sada { flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; }
.vh-choice-sada small { font-weight: 400; font-size: 13px; opacity: .85; }
.vh-vyber-zdroje { flex-wrap: wrap; }
.vh-u-badge { padding: 1px 6px; border-radius: 6px; border: 1px solid currentColor; }
.vh-u-cleni { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.vh-u-clen { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--b1) 40%, transparent); font-size: 14px; }
.vh-u-x { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: var(--b1); cursor: pointer; font-size: 16px; line-height: 1; }
.vh-u-nasept { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow: auto; }
.vh-u-nas { text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--b1) 30%, transparent); background: rgba(255,255,255,.04); color: var(--b1); cursor: pointer; font: inherit; }
.vh-u-nas:hover { background: rgba(255,255,255,.1); }
.vh-u-ukol textarea.vh-input { min-height: 80px; font-weight: 400; }
.sv-kanal { gap: 8px; max-height: 520px; overflow: auto; }
.sv-ukol, .sv-zprava { display: flex; flex-direction: column; gap: 5px; padding: 11px 12px; border-radius: 12px; background: #0f2a4d; border: 1px solid #ffb54755; }
.sv-ukol.hot { border-color: #6ee69a55; opacity: .8; }
.sv-ukol.po { border-color: #ff5a6e99; }
.sv-zprava { border-color: #3fd8ff33; background: #0f2a4d99; }
.sv-ukol-h { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.sv-ukol-typ { color: #ffd08a; font-weight: 700; letter-spacing: .06em; }
.sv-ukol.hot .sv-ukol-typ { color: #6ee69a; }
.sv-zprava .sv-ukol-typ { color: #9beaff; }
.sv-ukol-do { color: #ffb3bd; }
.sv-zprava .sv-ukol-do { color: #8fb3d6; }
.sv-ukol-text { font-size: 14px; white-space: pre-line; }
.sv-ukol-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sv-btn-mini { min-height: 40px; padding: 0 14px; font-size: 14px; }
.vh-btn.vh-choice-sada { flex-direction: column; align-items: flex-start; justify-content: center; }
.vh-choice-sada b, .vh-choice-sada small { display: block; }

/* =========================================================
 * Expedice Oceán (2.2)
 * ======================================================= */
.oc-screen { height: 100%; overflow: auto; background: #01121a; color: #e4fbff; font-family: Oxanium, "Segoe UI", system-ui, sans-serif; }
.oc-wrap { position: relative; min-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; background: linear-gradient(180deg, #0a5a6e 0%, #053a4d 22%, #022536 55%, #010d16 100%); }
.oc-kaustika { position: absolute; inset: -20%; pointer-events: none; opacity: .2; mix-blend-mode: screen; background: radial-gradient(ellipse 60px 22px at 20% 30%, #7ff3e6, transparent), radial-gradient(ellipse 80px 26px at 60% 20%, #7ff3e6, transparent), radial-gradient(ellipse 50px 18px at 80% 45%, #7ff3e6, transparent), radial-gradient(ellipse 70px 20px at 35% 55%, #7ff3e6, transparent); background-size: 360px 260px; animation: oc-drift 14s linear infinite; }
@keyframes oc-drift { to { background-position: 360px 130px; } }
.oc-bubliny span { position: absolute; bottom: -20px; border-radius: 50%; border: 1px solid #bff9ff88; background: radial-gradient(circle at 30% 30%, #ffffff55, transparent 60%); animation: oc-rise linear infinite; pointer-events: none; }
@keyframes oc-rise { to { transform: translate(30px, -110vh); opacity: 0; } }
.oc-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 22px; }
.oc-titul { display: flex; flex-direction: column; flex: 1 1 220px; }
.oc-h1 { font: 700 24px/1.1 "Chakra Petch", Oxanium, sans-serif; letter-spacing: .08em; }
.oc-sub { font-size: 13px; color: #8fe1e0; }
.oc-suroviny { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.oc-sur { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 12px; border-radius: 12px; background: #01121acc; border: 1px solid #7ff3e633; color: #7ff3e6; }
.oc-sur b { color: #e4fbff; font-size: 16px; }
.oc-sur-o2 > div { display: flex; flex-direction: column; gap: 3px; }
.oc-mini-bar { display: block; width: 90px; height: 5px; border-radius: 3px; background: #0b3c48; overflow: hidden; }
.oc-mini-bar i { display: block; height: 100%; background: linear-gradient(90deg, #22d3c5, #bffbff); }
.oc-head .vh-fs { position: static; }
.oc-main { position: relative; display: grid; grid-template-columns: minmax(270px, 340px) minmax(0, 1fr) minmax(280px, 380px); gap: 18px; padding: 8px 22px 22px; align-items: start; }
.oc-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.oc-card { display: flex; flex-direction: column; gap: 10px; padding: 15px; border-radius: 16px; background: #01121ad9; border: 1px solid #7ff3e633; }
.oc-lbl { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8fe1e0; }
.oc-muted { color: #8fe1e0; font-size: 13px; margin: 0; line-height: 1.4; }
.oc-ponor-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; border-radius: 14px; border: 0; background: linear-gradient(135deg, #22d3c5, #1a9fd6); color: #01121a; font: 700 20px Oxanium, sans-serif; cursor: pointer; box-shadow: 0 10px 30px -10px #22d3c5; }
.oc-ponor-btn small { font-size: 13px; font-weight: 600; opacity: .8; }
.oc-ponor-btn:disabled { background: #0b3c48; color: #6aa7ad; box-shadow: none; cursor: default; }
.oc-ponor-btn:focus-visible, .oc-koupit:focus-visible { outline: 3px solid #ffb547; outline-offset: 2px; }
.oc-doplnit { display: flex; flex-direction: column; gap: 8px; }
.oc-doplnit-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.oc-doplnit-btns .sv-chip { min-height: 40px; padding: 0 10px; font-size: 13px; color: #c6fff8; border-color: #7ff3e655; background: #7ff3e612; }
.oc-vylepseni, .oc-stanice { display: flex; flex-direction: column; gap: 8px; }
.oc-vyl, .oc-st { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: #032230; border: 1px solid #7ff3e622; color: #7ff3e6; }
.oc-st.stoji { border-color: #6effc855; }
.oc-st.zam { opacity: .55; }
.oc-vyl-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oc-vyl-t b { color: #e4fbff; font-size: 14px; }
.oc-dilky { display: flex; gap: 3px; }
.oc-dilky i { width: 18px; height: 5px; border-radius: 3px; background: #0b3c48; }
.oc-dilky i.on { background: #22d3c5; }
.oc-koupit { min-width: 84px; min-height: 44px; padding: 0 8px; border-radius: 10px; border: 1px solid #ffb54755; background: #ffb54712; color: #c9a46a; font: 700 13px Oxanium, sans-serif; cursor: pointer; }
.oc-koupit.lze { color: #ffd08a; border-color: #ffb547aa; }
.oc-koupit:disabled { opacity: .5; cursor: default; }
.oc-scena { position: relative; min-height: 520px; border-radius: 22px; overflow: hidden; }
.oc-paprsek { position: absolute; top: -10%; width: 110px; height: 85%; background: linear-gradient(#9ff7ff22, transparent); transform: skewX(-14deg); filter: blur(6px); pointer-events: none; }
.oc-ponorka { position: absolute; left: 50%; top: 42%; width: min(320px, 70%); transform: translate(-50%, -50%); animation: oc-bob 4s ease-in-out infinite; filter: drop-shadow(0 18px 30px #000a); }
.oc-ponorka svg { width: 100%; height: auto; display: block; }
@keyframes oc-bob { 50% { transform: translate(-50%, calc(-50% - 10px)) rotate(-1.5deg); } }
.oc-hloubkomer { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.oc-zona { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 10px; background: #01121acc; border: 1px dashed #7ff3e633; font-size: 12px; color: #5fa9ad; }
.oc-zona b { color: #8fe1e0; font-family: "Chakra Petch", Oxanium, sans-serif; }
.oc-zona.ok { border-style: solid; border-color: #22d3c588; color: #c6fff8; }
.oc-zona.ok b { color: #fff; }
.oc-lab { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; max-height: 360px; overflow: auto; }
.oc-mikrob { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 12px; background: #032230; border: 1px solid #7ff3e633; font-size: 11px; text-align: center; line-height: 1.2; }
.oc-mikrob small { color: #8fe1e0; }
.oc-mikrob.nez { border-style: dashed; color: #5fa9ad; }
/* ponor */
.oc-dive { width: 100%; height: 100%; min-height: 100%; padding: 0; border: 0; border-radius: 0; background: #01121a; position: relative; }
.oc-dive-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.oc-dive-hud { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; pointer-events: none; font-family: Oxanium, sans-serif; color: #e4fbff; }
.oc-dive-hud > div { display: flex; flex-direction: column; padding: 6px 12px; border-radius: 10px; background: #01121acc; border: 1px solid #7ff3e633; }
.oc-dive-hud small { font-size: 11px; color: #8fe1e0; text-transform: uppercase; letter-spacing: .08em; }
.oc-dive-hud b { font: 700 18px "Chakra Petch", Oxanium, sans-serif; }
.oc-dive-hud span { font-size: 12px; color: #8fe1e0; }
.oc-dive-mik { display: flex; gap: 2px; flex: 1 1 auto; }
.oc-dive-hud .sv-chip { pointer-events: auto; margin-left: auto; }
.oc-dive-tip { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: #01121acc; color: #8fe1e0; font: 13px Oxanium, sans-serif; text-align: center; max-width: calc(100% - 24px); pointer-events: none; }
.sv-exp-ocean.aktivni { background: linear-gradient(160deg, #06363f, #031a22); }
@media (max-width: 1100px) {
	.oc-main { grid-template-columns: 1fr 1fr; }
	.oc-scena { grid-column: 1 / -1; order: -1; min-height: 340px; }
}
@media (max-width: 700px) {
	.oc-head { padding: 12px 14px; }
	.oc-main { grid-template-columns: 1fr; padding: 6px 14px 18px; }
	.oc-scena { min-height: 340px; }
	.oc-ponorka { top: 30%; width: 62%; }
	.oc-hloubkomer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.oc-mini-bar { width: 60px; }
}
@media (prefers-reduced-motion: reduce) { .oc-kaustika, .oc-bubliny span, .oc-ponorka { animation: none; } }

/* =========================================================
 * Sidequesty (2.3)
 * ======================================================= */
.sv-hledat { margin: 4px 0 8px; }
.sv-volba-sada { display: flex; flex-direction: column; gap: 2px; }
.sv-volba-sada small { font-weight: 400; color: #8fb3d6; font-size: 12px; }
.sv-side { gap: 8px; }
.sv-side-q { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid #3fd8ff22; background: #0f2a4d; color: #ffb547; text-align: left; cursor: pointer; font-family: inherit; }
.sv-side-q:hover { border-color: #3fd8ff88; }
.sv-side-q.poplach { color: #ff8a98; border-color: #ff5a6e88; background: linear-gradient(160deg, #3a0d18, #1a0710); animation: hqAlertSv 1.6s ease-in-out infinite; }
@keyframes hqAlertSv { 50% { box-shadow: 0 0 0 1px #ff5a6e, 0 0 22px #ff5a6e55; } }
.sv-side-t { display: flex; flex-direction: column; gap: 1px; }
.sv-side-t b { color: #e6f4ff; font-size: 15px; }
.sv-side-t small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8fb3d6; }
/* krtci */
.sv-krtci { background: radial-gradient(ellipse at 50% 30%, #1e4a2a, #0b1d10 75%); }
.sv-krtci-ukol { text-align: center; font-size: 17px; max-width: 760px; margin: 0 auto 12px; }
.sv-zahrada { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 3vw, 28px); max-width: 720px; width: 100%; margin: 0 auto; }
.sv-dira { position: relative; aspect-ratio: 1.3; border-radius: 50%; background: radial-gradient(ellipse at 50% 70%, #1a0f07 40%, #3b2412 62%, #5fd06833 64%, transparent 72%); overflow: hidden; }
.sv-krtek { position: absolute; left: 18%; right: 18%; bottom: -85%; height: 85%; border: 0; border-radius: 48% 48% 30% 30%; background: radial-gradient(circle at 40% 30%, #b08661, #6b4a2e 70%); box-shadow: inset 0 -8px 0 #4a3020; cursor: pointer; transition: bottom .18s ease-out; display: grid; place-items: center; }
.sv-krtek::before, .sv-krtek::after { content: ""; position: absolute; top: 24%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #111; }
.sv-krtek::before { left: 32%; } .sv-krtek::after { right: 32%; }
.sv-krtek.nahore { bottom: 8%; }
.sv-krtek-c { margin-top: 30%; padding: 2px 8px; border-radius: 8px; background: #fff6dc; color: #2a1a0c; font: 700 clamp(16px, 3vw, 24px) "Chakra Petch", Oxanium, sans-serif; }
.sv-krtek.trefa { box-shadow: 0 0 0 4px #6ee69a, inset 0 -8px 0 #4a3020; }
.sv-krtek.vedle { box-shadow: 0 0 0 4px #ff5a6e, inset 0 -8px 0 #4a3020; }
/* kybernetický útok v okně otázky */
.sv-kyber-okno { box-shadow: 0 0 0 3px #ff5a6e, 0 0 40px #ff5a6e88 !important; animation: hqAlertSv 1.6s ease-in-out infinite; }
.sv-porty { display: inline-flex; gap: 3px; vertical-align: middle; }
.sv-porty i { width: 14px; height: 14px; border-radius: 3px; border: 2px solid #ff5a6e; background: #ff5a6e33; }
.sv-porty i.zav { border-color: #19c419; background: #19c419; }
/* meteorický déšť */
.sv-hra-meteory { background: radial-gradient(ellipse at 50% 10%, #1b1846, #050616 75%); }
.sv-nebe { position: relative; flex: 1 1 auto; min-height: 420px; overflow: hidden; }
.sv-meteor { position: absolute; top: 0; display: grid; place-items: center; width: 108px; height: 96px; border: 0; border-radius: 46% 54% 50% 50%; background: radial-gradient(circle at 35% 30%, #a08872, #4c3a2c 70%); color: #fff; font: 700 20px "Chakra Petch", Oxanium, sans-serif; cursor: pointer; box-shadow: 0 -18px 30px -6px #ff8a3d99, inset -6px -8px 0 #3a2a1e; will-change: transform; }
.sv-meteor span { transform-origin: center; }
.sv-meteor.ok { background: radial-gradient(circle, #6ee69a, #1d5a35 75%); box-shadow: 0 0 40px #6ee69a; }
.sv-meteor.spatne { background: radial-gradient(circle, #ff5a6e, #5a1d26 75%); }
.sv-hra-vzorky { background: linear-gradient(180deg, #053a4d, #010d16); }
.sv-hra-vzorky .sv-karta-rub { background: radial-gradient(circle, #0b3c48, #021a24 75%); }
.oc-vzorky-btn { margin-top: 4px; color: #c6fff8; border-color: #7ff3e655; background: #7ff3e612; }
.sv-ch-ucitel { border-color: #8b7bff88; }
.sv-ch-ucitel .sv-ukol-typ { color: #b8b0ff; }
@media (max-width: 700px) { .sv-meteor { width: 78px; height: 70px; font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .sv-side-q.poplach, .sv-kyber-okno { animation: none; } }

/* =========================================================
 * Další expedice (Póly, Džungle, CERN, Stroj času, Podloží)
 * ======================================================= */
.ex-screen { height: 100%; overflow: auto; background: #050812; color: #eef4ff; font-family: Oxanium, "Segoe UI", system-ui, sans-serif; }
.ex-wrap { --ex: #8b7bff; --ex-bg: linear-gradient(180deg, #121a33, #050812); position: relative; min-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--ex-bg); overflow: hidden; }
.ex-wrap::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(900px 420px at 50% -10%, color-mix(in srgb, var(--ex) 28%, transparent), transparent 70%); }
.ex-wrap.ex-poly { --ex-bg: linear-gradient(180deg, #0d2a4a 0%, #071629 45%, #030a17 100%); }
.ex-wrap.ex-dzungle { --ex-bg: linear-gradient(180deg, #123d22 0%, #08261a 50%, #03130c 100%); }
.ex-wrap.ex-cern { --ex-bg: linear-gradient(180deg, #2a1608 0%, #120a06 50%, #05060c 100%); }
.ex-wrap.ex-minulost { --ex-bg: linear-gradient(180deg, #3a1f2a 0%, #1f1222 50%, #0c0710 100%); }
.ex-wrap.ex-budoucnost { --ex-bg: linear-gradient(180deg, #2a0838 0%, #120424 50%, #06020f 100%); }
.ex-wrap.ex-podlozi { --ex-bg: linear-gradient(180deg, #3a2a1e 0%, #1e1611 50%, #0b0806 100%); }
.ex-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 22px; }
.ex-head .vh-fs { position: static; }
.ex-titul { display: flex; flex-direction: column; flex: 1 1 220px; min-width: 0; }
.ex-h1 { font: 700 24px/1.1 "Chakra Petch", Oxanium, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 0 22px var(--ex); }
.ex-sub { font-size: 13px; color: color-mix(in srgb, var(--ex) 60%, #fff); }
.ex-suroviny { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ex-sur { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 12px; border-radius: 12px; background: #0008; border: 1px solid color-mix(in srgb, var(--ex) 35%, transparent); color: var(--ex); }
.ex-sur > div { display: flex; flex-direction: column; line-height: 1.1; }
.ex-sur b { color: #fff; font-size: 16px; }
.ex-sur small { font-size: 10px; color: color-mix(in srgb, var(--ex) 55%, #fff); }
.ex-mini-bar { display: block; width: 90px; height: 5px; margin-top: 3px; border-radius: 3px; background: #ffffff1a; overflow: hidden; }
.ex-mini-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ex), #fff); }
.ex-main { position: relative; display: grid; grid-template-columns: minmax(270px, 340px) minmax(0, 1fr) minmax(280px, 380px); gap: 18px; padding: 8px 22px 22px; align-items: start; }
.ex-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ex-card { display: flex; flex-direction: column; gap: 10px; padding: 15px; border-radius: 16px; background: #000a; border: 1px solid color-mix(in srgb, var(--ex) 25%, transparent); backdrop-filter: blur(6px); }
.ex-lbl { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--ex) 70%, #fff); }
.ex-muted { color: #b9c4d8; font-size: 13px; margin: 0; line-height: 1.4; }
.ex-start-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; border-radius: 14px; border: 0; background: linear-gradient(135deg, var(--ex), color-mix(in srgb, var(--ex) 55%, #fff)); color: #060912; font: 700 20px Oxanium, sans-serif; cursor: pointer; box-shadow: 0 10px 30px -10px var(--ex); }
.ex-start-btn small { font-size: 13px; font-weight: 600; opacity: .8; }
.ex-start-btn:disabled { background: #ffffff14; color: #8090a8; box-shadow: none; cursor: default; }
.ex-start-btn:focus-visible, .ex-koupit:focus-visible, .ex-karta:focus-visible, .ex-bunka:focus-visible { outline: 3px solid #ffb547; outline-offset: 2px; }
.ex-doplnit { display: flex; flex-direction: column; gap: 8px; }
.ex-doplnit-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-doplnit-btns .sv-chip { min-height: 40px; padding: 0 10px; font-size: 13px; }
.ex-vylepseni { display: flex; flex-direction: column; gap: 8px; }
.ex-vyl { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: #ffffff08; border: 1px solid #ffffff14; color: var(--ex); }
.ex-vyl-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ex-vyl-t b { color: #fff; font-size: 14px; }
.ex-dilky { display: flex; gap: 3px; }
.ex-dilky i { width: 18px; height: 5px; border-radius: 3px; background: #ffffff1a; }
.ex-dilky i.on { background: var(--ex); box-shadow: 0 0 6px var(--ex); }
.ex-koupit { min-width: 84px; min-height: 44px; padding: 0 8px; border-radius: 10px; border: 1px solid #ffb54755; background: #ffb54712; color: #c9a46a; font: 700 12px Oxanium, sans-serif; cursor: pointer; }
.ex-koupit.lze { color: #ffd08a; border-color: #ffb547aa; }
.ex-koupit:disabled { opacity: .5; cursor: default; }
.ex-scena { position: relative; min-height: 520px; border-radius: 22px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ex) 30%, transparent); box-shadow: 0 30px 80px -30px var(--ex), inset 0 0 80px #0008; }
.ex-scena-svg, .ex-scena-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ex-hodnost { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 14px; background: #000b; border: 1px solid color-mix(in srgb, var(--ex) 40%, transparent); backdrop-filter: blur(6px); }
.ex-hodnost small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--ex) 70%, #fff); }
.ex-hodnost b { font: 700 22px "Chakra Petch", Oxanium, sans-serif; color: #fff; }
.ex-hodnost span { font-size: 13px; color: #b9c4d8; }
.ex-sbirka { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.ex-obj { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 12px; background: #ffffff08; border: 1px solid #ffffff1c; font-size: 11px; text-align: center; line-height: 1.2; }
.ex-obj small { color: #b9c4d8; }
.ex-obj.nez { border-style: dashed; color: #8090a8; }
.ex-obj.zam { opacity: .55; }
/* animace scén */
.ex-aurora { animation: ex-aur 9s ease-in-out infinite alternate; transform-origin: center; }
@keyframes ex-aur { to { transform: translateX(-30px) scaleY(1.15); opacity: .7; } }
.ex-bob { animation: ex-bob 3.5s ease-in-out infinite; }
@keyframes ex-bob { 50% { transform: translateY(-6px); } }

.ex-sway { animation: ex-sway 6s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes ex-sway { to { transform: skewX(1.5deg); } }
.ex-flow { stroke-dasharray: 18 12; animation: ex-flow 3s linear infinite; }
@keyframes ex-flow { to { stroke-dashoffset: -60; } }
.ex-blink { animation: ex-blink 1.2s steps(2) infinite; }
@keyframes ex-blink { 50% { opacity: .15; } }
.ex-blink-many polygon { animation: ex-tw 2.4s ease-in-out infinite; }
@keyframes ex-tw { 50% { opacity: .25; } }
.ex-beam { animation: ex-flow 1.2s linear infinite; }
.ex-beam2 { animation: ex-flow 1.6s linear infinite reverse; }
.ex-burst { animation: ex-blink 2.4s ease-in-out infinite; }
.ex-pulse { animation: ex-pulse 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ex-pulse { 50% { transform: scale(1.08); opacity: .8; } }
.ex-spin { animation: ex-spin 18s linear infinite; }
.ex-spin-r { animation: ex-spin 6s linear infinite reverse; }
@keyframes ex-spin { to { transform: rotate(360deg); } }
.ex-capsule { offset-path: path("M-20 280C150 220 450 340 620 250"); animation: ex-cap 5s linear infinite; }
@keyframes ex-cap { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.ex-grid { animation: ex-blink 4s ease-in-out infinite; }
.ex-drill { animation: ex-flow 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ex-scena-svg * { animation: none !important; } }
.sv-exp.aktivni:not(.sv-exp-vesmir):not(.sv-exp-ocean) { background: linear-gradient(160deg, color-mix(in srgb, currentColor 22%, #0a0f1e), #060a14); }
/* minihra – společný rámec */
.ex-hra { width: 100%; height: 100%; min-height: 100%; padding: 0; border: 0; border-radius: 0; background: #050812; position: relative; overflow: hidden; }
.ex-stage { position: absolute; inset: 0; }
.ex-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.ex-hud { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; pointer-events: none; color: #fff; z-index: 3; }
.ex-hud > div { display: flex; flex-direction: column; padding: 6px 12px; border-radius: 10px; background: #000c; border: 1px solid color-mix(in srgb, var(--ex) 40%, transparent); }
.ex-hud small { font-size: 11px; color: color-mix(in srgb, var(--ex) 70%, #fff); text-transform: uppercase; letter-spacing: .08em; }
.ex-hud b { font: 700 18px "Chakra Petch", Oxanium, sans-serif; }
.ex-hud-obj { display: flex; gap: 2px; flex: 1 1 auto; }
.ex-hud .sv-chip { pointer-events: auto; margin-left: auto; background: #000c; color: #fff; border-color: color-mix(in srgb, var(--ex) 50%, transparent); }
.ex-tip { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: #000c; color: #fff; font: 13px Oxanium, sans-serif; text-align: center; max-width: calc(100% - 24px); pointer-events: none; z-index: 3; transition: opacity .6s; border: 1px solid color-mix(in srgb, var(--ex) 40%, transparent); }
.ex-tip.pryc { opacity: 0; }
.ex-tip-runner { bottom: auto; top: 72px; }
.ex-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2; }
.ex-flash.on { animation: ex-flash .35s ease-out; }
@keyframes ex-flash { from { opacity: .45; } to { opacity: 0; } }
/* minulost */
.ex-epocha { position: absolute; inset: 0; background-size: cover; background-position: center bottom; }
.ex-ep-1 { background: linear-gradient(180deg, #6fa8d6 0%, #cfe3f0 55%, #6d8a4a 56%, #3f5a2a 100%); }
.ex-ep-1::after { content: ""; position: absolute; left: 0; right: 0; bottom: 44%; height: 30%; background: no-repeat center bottom / auto 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160'%3E%3Cpath fill='%23585e6e' d='M40 160V60h20V40h14v20h20V40h14v20h20v100zM150 160V20h12V0h16v20h12v140zM230 160V70h18V50h14v20h18V50h14v20h18v90z'/%3E%3Cpath fill='%23c33' d='M163 0l14 6-14 6z'/%3E%3C/svg%3E"); }
.ex-ep-2 { background: linear-gradient(180deg, #f0b866 0%, #ffe3a8 55%, #d9a55a 56%, #b07a3a 100%); }
.ex-ep-2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 44%; height: 30%; background: no-repeat center bottom / auto 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160'%3E%3Cpath fill='%23a8743a' d='M10 160L90 40l80 120zM180 160l50-70 50 70z'/%3E%3Cg fill='%23efe0c0'%3E%3Crect x='290' y='70' width='100' height='12'/%3E%3Crect x='296' y='82' width='10' height='70'/%3E%3Crect x='322' y='82' width='10' height='70'/%3E%3Crect x='348' y='82' width='10' height='70'/%3E%3Crect x='374' y='82' width='10' height='70'/%3E%3Crect x='290' y='150' width='100' height='10'/%3E%3Cpath d='M290 70l50-24 50 24z'/%3E%3C/g%3E%3C/svg%3E"); }
.ex-ep-3 { background: linear-gradient(180deg, #8fb8c8 0%, #dfeef0 55%, #8a8a6a 56%, #4a4a3a 100%); }
.ex-ep-3::after { content: ""; position: absolute; left: 0; right: 0; bottom: 44%; height: 34%; background: no-repeat center bottom / auto 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160'%3E%3Cpath fill='%23706a5e' d='M0 160L70 40l60 50 50-70 80 90 60-40 80 90z'/%3E%3Cpath fill='%23201a14' d='M150 160c0-40 40-40 40 0z'/%3E%3Cpath fill='%23ff8a3d' d='M170 150c-6-10 0-16 2-22 4 8 8 12 4 22z'/%3E%3C/svg%3E"); }
.ex-epocha-h { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); padding: 6px 18px; border-radius: 999px; background: #2a1640d9; color: #ffcf4a; font: 700 18px "Chakra Petch", Oxanium, sans-serif; letter-spacing: .08em; z-index: 1; white-space: nowrap; }
.ex-karty { position: absolute; left: 0; right: 0; top: 120px; bottom: 60px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 12px; padding: 0 16px; z-index: 1; }
.ex-karta { min-height: 56px; min-width: 120px; padding: 8px 16px; border-radius: 12px; border: 2px solid #8a5a2a; background: linear-gradient(160deg, #fff6dc, #ecd6a6); color: #3a220e; font: 700 16px Oxanium, sans-serif; cursor: pointer; box-shadow: 0 8px 18px -8px #000a; animation: ex-in .35s backwards; transition: transform .15s; }
.ex-karta:hover { transform: rotate(0) scale(1.05) !important; }
.ex-karta.ok { background: linear-gradient(160deg, #d6ffe0, #8fe0a8); border-color: #2a8a4a; color: #0b3a1a; opacity: .7; }
.ex-karta.ok::before { content: "✓ "; }
.ex-karta.spatne { animation: ex-shake .4s; border-color: #c33; }
@keyframes ex-in { from { opacity: 0; transform: scale(.6); } }
@keyframes ex-shake { 25% { translate: -8px 0; } 75% { translate: 8px 0; } }
/* podloží */
.ex-dul-wrap { position: absolute; inset: 70px 10px 10px; display: grid; place-items: center; }
.ex-hra.ex-podlozi { background: radial-gradient(ellipse at 50% 0%, #3a2a1e, #0b0806 70%); }
.ex-dul { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(11, minmax(0, 1fr)); gap: 2px; width: min(100%, calc((100dvh - 100px) * 9 / 11)); aspect-ratio: 9 / 11; padding: 2px; border-radius: 10px; background: #1a120d; box-shadow: 0 20px 60px -20px #000; }
.ex-bunka { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 0; border-radius: 4px; background: var(--b, #8b5a3c); background-image: radial-gradient(circle at 30% 30%, #ffffff18 2px, transparent 3px), radial-gradient(circle at 70% 65%, #00000030 2px, transparent 3px); background-size: 14px 14px; display: grid; place-items: center; padding: 0; cursor: default; color: #fff; font: 700 12px Oxanium, sans-serif; }
.ex-bunka span { opacity: .75; text-shadow: 0 1px 2px #000; }
.ex-bunka.povrch { background: linear-gradient(#5fd068 0 30%, #5a8a3a 30%); }
.ex-bunka.lze { cursor: pointer; box-shadow: inset 0 0 0 2px #ffcf4a99; }
.ex-bunka.lze:hover { box-shadow: inset 0 0 0 3px #ffcf4a; filter: brightness(1.15); }
.ex-bunka.kop:not(.povrch) { background: #120c09; box-shadow: inset 0 0 10px #000; }
.ex-bunka.trpyt::after { content: ""; position: absolute; width: 30%; height: 30%; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: ex-tw 1.4s ease-in-out infinite; }
.ex-bunka.spatne { animation: ex-shake .35s; }
.ex-bunka svg { position: absolute; inset: 10%; width: 80%; height: 80%; }
@media (max-width: 1100px) {
	.ex-main { grid-template-columns: 1fr 1fr; }
	.ex-scena { grid-column: 1 / -1; order: -1; min-height: 320px; }
}
@media (max-width: 700px) {
	.ex-head { padding: 12px 14px; }
	.ex-main { grid-template-columns: 1fr; padding: 6px 14px 18px; }
	.ex-scena { min-height: 280px; }
	.ex-mini-bar { width: 60px; }
	.ex-karta { min-width: 100px; font-size: 14px; min-height: 48px; padding: 6px 10px; }
	.ex-karty { gap: 8px; top: 112px; }
	.ex-hud > div { padding: 4px 8px; }
	.ex-hud b { font-size: 15px; }
	.ex-hodnost { left: 10px; right: 10px; bottom: 10px; padding: 8px 12px; }
	.ex-hodnost b { font-size: 17px; }
	.ex-epocha-h { top: 64px; font-size: 15px; }
}