[hidden] { display: none !important; }
:root {
  --night: #0d1322;
  --night-2: #141c30;
  --panel: #1a2440;
  --line: #2a3658;
  --text: #e8ecf6;
  --muted: #98a3c0;
  --torch: #ffb547;      /* fakľa – hlavný akcent */
  --diamond: #5fe0e6;    /* diamant – druhý akcent */
  --good: #6be38a;
  --bad: #ff6b6b;
  --gold: #ffd54f;
  --f-display: "Jersey 10", "Courier New", monospace;
  --f-num: "Rubik", "Segoe UI", system-ui, sans-serif;
  --f-body: "Rubik", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  /* odvodené plochy (svetlý režim ich prepíše) */
  --night-3: #141c33;
  --night-4: #0f1628;
  --deep: #070b16;
  --deep-rgb: 5 8 18;
  --field: #0a0f1c;          /* vstupné polia, tmavé boxy */
  --glass-rgb: 10 15 28;     /* polopriehľadné panely */
  --glass: rgb(var(--glass-rgb) / .55);
  --panel-2: #1d2848;
  --on-accent: #1b1203;      /* text na oranžovom tlačidle */
  --art-opacity: 1;
  --hero-tint: #22305a;
  --btn-bg: var(--torch);   /* hlavné tlačidlá a vybrané záložky */
  --btn-ink: #1b1203;
  --btn-ring: rgba(255,181,71,.35);
  --torch-rgb: 255 181 71;
  --gold-rgb: 255 200 61;
  --night-rgb: 13 19 34;
  --night2-rgb: 20 28 48;
  --panel-rgb: 26 36 64;
  color-scheme: dark;
}
/* ---------------------------------------------------------------- SVETLÝ REŽIM
   Rovnaké odtiene ako tmavý (nočná modrá → svetlá modrosivá), len v opačnom jase; akcenty o kúsok tmavšie kvôli čitateľnosti. */
:root[data-theme="light"] {
  --night: #e9eef8;
  --night-2: #dde5f2;
  --night-3: #f4f7fd;
  --night-4: #e6ecf7;
  --deep: #d3dcec;
  --deep-rgb: 205 215 233;
  --panel: #f8faff;
  --panel-2: #ffffff;
  --line: #c2cde2;
  --text: #141c30;
  --muted: #55607c;
  --torch: #6a4be0;        /* svetlý režim: fialová namiesto oranžovej (texty, akcenty) */
  --torch-rgb: 106 75 224;
  --gold-rgb: 124 77 219;
  --diamond: #0a8892;
  --good: #198f43;
  --bad: #d13636;
  --gold: #7c4ddb;         /* svetlý režim: „zlaté“ texty sú fialové (zlatá na svetlom pôsobí ako vybledlá hnedá) */
  --field: #ffffff;
  --glass-rgb: 255 255 255;
  --glass: rgb(var(--glass-rgb) / .72);
  --on-accent: #1b1203;
  --art-opacity: .55;
  --hero-tint: #d3def3;
  --btn-bg: #5145d8;        /* svetlý režim: kráľovská fialová namiesto oranžovej */
  --btn-ink: #ffffff;
  --btn-ring: rgba(81,69,216,.3);
  --night-rgb: 233 238 248;
  --night2-rgb: 221 229 242;
  --panel-rgb: 248 250 255;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--text); font-family: var(--f-body); font-size: 15px; line-height: 1.55; }
a { color: var(--diamond); }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; text-wrap: balance; margin: 0; letter-spacing: .5px; }
.eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--torch); }
.demo { font-family: var(--f-mono); font-size: 11px; color: var(--muted); border: 1px dashed var(--line); padding: 2px 8px; border-radius: 3px; }
:focus-visible { outline: 2px solid var(--diamond); outline-offset: 2px; }

/* ---------- hlavička ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: rgb(var(--night-rgb) / .92); }
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: rgb(var(--night-rgb) / .97); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 18px; padding-block: 12px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 27px; color: var(--text); text-decoration: none; white-space: nowrap; }
.logo .block { width: 26px; height: 26px; image-rendering: pixelated; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0 0 0 auto; padding: 0; flex-wrap: wrap; }
.nav ul a { color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 4px; font-size: 14px; }
.nav ul a:hover { color: var(--text); background: var(--panel); }
.btn { font-family: var(--f-display); font-size: 20px; line-height: 1.1; border: 0; cursor: pointer; padding: 10px 18px; border-radius: 4px; color: var(--btn-ink); background: var(--btn-bg);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 0 0 1px var(--btn-ring); transition: transform .12s; text-decoration: none; display: inline-block; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.btn.ghost { background: transparent; color: var(--text); box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 760px) { .nav ul { display: none; } .nav .btn.ghost { margin-left: auto; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .wrap { position: relative; padding-block: 64px 210px; display: grid; grid-template-columns: 1.25fr .9fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(52px, 9.5vw, 104px); line-height: .9; }
.hero h1 span { color: var(--torch); display: block; }
.hero p.lead { color: var(--muted); max-width: 52ch; font-size: 17px; margin: 18px 0 26px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ip { display: flex; align-items: center; gap: 10px; background: rgb(var(--night2-rgb) / .85); border: 1px solid var(--line); border-radius: 4px; padding: 8px 8px 8px 14px; font-family: var(--f-mono); }
.ip button { font-family: var(--f-mono); font-size: 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: 6px 10px; cursor: pointer; }
.status { background: rgb(var(--night2-rgb) / .88); border: 1px solid var(--line); border-radius: 6px; padding: 20px; display: grid; gap: 14px; min-width: 0; }
.status .row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(107,227,138,.12); color: var(--good); }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(107,227,138,.6); animation: ping 1.8s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(107,227,138,0); } 100% { box-shadow: 0 0 0 0 rgba(107,227,138,0); } }
.heads { display: flex; gap: 6px; flex-wrap: wrap; }
.head { width: 34px; height: 34px; border-radius: 3px; image-rendering: pixelated; box-shadow: 0 0 0 1px var(--line); }
.num { font-family: var(--f-num); font-weight: 600; font-size: 28px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.k { color: var(--muted); font-size: 13px; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; padding-block: 40px 200px; } }

/* ---------- pásy a sekcie ---------- */
section { padding-block: 64px; }
section.alt { background: var(--night-2); border-block: 1px solid var(--line); }
.head2 { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.head2 h2 { font-size: clamp(36px, 5.4vw, 52px); margin-top: 6px; line-height: 1; }
.head2 p { color: var(--muted); margin: 6px 0 0; max-width: 60ch; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; display: grid; gap: 6px; min-width: 0; }
.tile .num { font-size: 26px; }
.tile .trend { font-family: var(--f-mono); font-size: 12px; color: var(--good); }
.tile .trend.down { color: var(--bad); }
.tile canvas { width: 100%; height: 38px; display: block; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .tiles { grid-template-columns: 1fr; } }

/* registrácia */
.reg { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.steps { display: grid; gap: 14px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.step b { font-family: var(--f-display); font-size: 30px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; color: var(--torch); }
.step h3 { font-size: 24px; margin-bottom: 2px; }
.step p { margin: 0; color: var(--muted); }
code { font-family: var(--f-mono); background: var(--field); border: 1px solid var(--line); padding: 1px 6px; border-radius: 3px; color: var(--diamond); font-size: 13px; }
form.card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 22px; display: grid; gap: 14px; }
label { font-size: 13px; color: var(--muted); display: grid; gap: 6px; }
input { font-family: var(--f-mono); font-size: 15px; color: var(--text); background: var(--field); border: 1px solid var(--line); border-radius: 4px; padding: 11px 12px; width: 100%; }
input:focus { border-color: var(--diamond); outline: none; }
.code-boxes { display: flex; gap: 8px; }
.code-boxes input { text-align: center; font-size: 22px; padding: 10px 0; text-transform: uppercase; }
.msg { font-size: 13px; min-height: 20px; }
.msg.err { color: var(--bad); } .msg.ok { color: var(--good); }
@media (max-width: 820px) { .reg { grid-template-columns: 1fr; } }

/* profil */
.profile { display: grid; grid-template-columns: 300px 1fr; gap: 18px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 20px; min-width: 0; }
.who { display: grid; justify-items: center; gap: 10px; text-align: center; }
.who canvas { width: 96px; height: 96px; image-rendering: pixelated; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); }
.title-badge { display: inline-block; white-space: nowrap; font-family: var(--f-display); font-size: 17px; line-height: 1.1; padding: 3px 9px; border-radius: 3px; background: linear-gradient(90deg, #00e5ff, #2979ff); color: #04111f; }
.title-badge.sql { background: linear-gradient(90deg, #4fc1ff, #c792ea); }
.skills { display: grid; gap: 12px; }
.skill { display: grid; grid-template-columns: 120px 1fr 52px; gap: 12px; align-items: center; font-size: 14px; }
.bar { height: 12px; background: var(--field); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--torch) 0 10px, #e89a2b 10px 12px); width: 0; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.bar.cyan i { background: repeating-linear-gradient(90deg, var(--diamond) 0 10px, #3cbcc2 10px 12px); }
.skill span:last-child { font-family: var(--f-mono); text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 860px) { .profile, .grid2 { grid-template-columns: 1fr; } .skill { grid-template-columns: 100px 1fr 46px; } }

/* tabuľky */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px; border-bottom: 1px solid rgba(42,54,88,.55); font-variant-numeric: tabular-nums; }
.tbl td.r, .tbl th.r { text-align: right; }
.scroll { overflow-x: auto; }
.tag { font-family: var(--f-mono); font-size: 11px; padding: 2px 7px; border-radius: 3px; }
.tag.ok { background: rgba(107,227,138,.14); color: var(--good); } .tag.warn { background: rgb(var(--torch-rgb) / .16); color: var(--torch); } .tag.bad { background: rgba(255,107,107,.15); color: var(--bad); }

/* kasíno */
.casino { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.wheel-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.chip { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-num); font-weight: 600; font-size: 15px; color: #fff; box-shadow: inset 0 0 0 3px rgba(255,255,255,.18); }
.chip.r { background: #c62828; } .chip.b { background: #1d1f27; box-shadow: inset 0 0 0 3px rgba(255,255,255,.25); } .chip.g { background: #2e7d32; }
.chip.new { animation: pop .6s ease-out; }
@keyframes pop { from { transform: scale(.3) rotate(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.jackpot { font-family: var(--f-num); font-weight: 600; font-size: clamp(32px, 6vw, 52px); color: var(--gold); text-shadow: 0 0 22px rgb(var(--gold-rgb) / .35); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .casino { grid-template-columns: 1fr; } }

/* mapa */
.mapbox { position: relative; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--field); }
#map { display: block; width: 100%; height: 360px; image-rendering: pixelated; }
.mapbox .legend { position: absolute; left: 12px; bottom: 12px; background: rgb(var(--night-rgb) / .85); border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; font-size: 12px; color: var(--muted); }
.akad { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 760px) { .akad { grid-template-columns: 1fr; } }

footer { border-top: 1px solid var(--line); padding-block: 28px; color: var(--muted); font-size: 13px; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ---------- web 0.1 – doplnky ---------- */
.pill.off { background: rgba(255,107,107,.12); color: var(--bad); }
.pill.off i { background: var(--bad); animation: none; }
.pill.wait { background: rgb(var(--torch-rgb) / .14); color: var(--torch); }
.pill.wait i { background: var(--torch); }
.soon { font-family: var(--f-mono); font-size: 11px; color: var(--torch); border: 1px dashed rgb(var(--torch-rgb) / .5); padding: 2px 8px; border-radius: 3px; }
.empty { color: var(--muted); font-size: 14px; padding: 8px 0; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.list li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.list li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li .r { margin-left: auto; font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.list .rank { font-family: var(--f-num); font-weight: 600; width: 26px; color: var(--torch); }
.head.sm { width: 26px; height: 26px; }
img.head { background: var(--field); }
.mayor-star { color: var(--gold); }
.afk { opacity: .5; }
.delta-plus { color: var(--good); } .delta-minus { color: var(--bad); }
.flash-up { animation: flashUp 1.2s ease-out; } .flash-down { animation: flashDown 1.2s ease-out; }
@keyframes flashUp { 0% { color: #fff; text-shadow: 0 0 18px var(--good); } 100% { text-shadow: none; } }
@keyframes flashDown { 0% { color: #fff; text-shadow: 0 0 18px var(--bad); } 100% { text-shadow: none; } }
.who img.big { width: 96px; height: 96px; image-rendering: pixelated; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); }
.facts { display: grid; gap: 10px; }
.fact { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(42,54,88,.55); padding-bottom: 8px; font-size: 14px; }
.fact span:last-child { font-family: var(--f-mono); font-variant-numeric: tabular-nums; text-align: right; }
.locked { display: grid; gap: 12px; justify-items: start; }
.user-menu { display: flex; gap: 8px; align-items: center; }
.toast { position: fixed; right: 16px; bottom: 16px; z-index: 20; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--torch); border-radius: 4px; padding: 12px 16px; max-width: min(360px, calc(100vw - 32px)); box-shadow: 0 10px 30px rgba(0,0,0,.4); font-size: 14px; transform: translateY(20px); opacity: 0; transition: .25s; pointer-events: none; }
.toast.show { transform: none; opacity: 1; }
.toast.good { border-left-color: var(--good); } .toast.bad { border-left-color: var(--bad); }
.btn[disabled] { opacity: .6; cursor: wait; }
@media (max-width: 520px) {
  .nav { flex-wrap: wrap; gap: 10px; }
  .logo { font-size: 22px; }
  .logo .block { width: 22px; height: 22px; }
  .nav .btn { padding: 7px 10px; font-size: 17px; }
  .user-menu { margin-left: auto; }
}
section { scroll-margin-top: 64px; }

.akad-card { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; text-align: left; color: inherit; font: inherit; cursor: pointer; transition: transform .15s, border-color .2s, box-shadow .2s; }
.akad-card:hover { transform: translateY(-2px); border-color: #4fc1ff; box-shadow: 0 10px 30px rgba(79,193,255,.15); }
.akad-card.net:hover { border-color: #00e5ff; box-shadow: 0 10px 30px rgba(0,229,255,.15); }
.akad-ico { font-size: 34px; width: 64px; height: 64px; display: grid; place-items: center; flex: none; }
.akad-ico img { width: 64px; height: 64px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); transition: transform .25s; }
.akad-card:hover .akad-ico img { transform: rotate(-8deg) scale(1.06); }
.akad-txt { display: grid; gap: 4px; }
.akad-t { font-family: var(--f-display); font-size: 30px; line-height: 1; }
@media (max-width: 520px) { .akad-card { grid-template-columns: 44px 1fr; } .akad-card .btn { grid-column: 1 / -1; justify-self: start; } }

/* ---------- prechody medzi stránkami (View Transitions – Chrome/Edge) ---------- */
@view-transition { navigation: auto; }
header.top { view-transition-name: topbar; }
::view-transition-old(root) { animation: vtOut .34s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vtIn .55s cubic-bezier(0,0,.2,1) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px) scale(.985); filter: blur(10px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px) scale(1.01); filter: blur(12px); } }
/* návrat späť = opačný smer */
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vtOutBack; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vtInBack; }
@keyframes vtOutBack { to { opacity: 0; transform: translateY(8px) scale(.985); filter: blur(10px); } }
@keyframes vtInBack { from { opacity: 0; transform: translateY(-14px) scale(1.01); filter: blur(12px); } }
/* prechody v rámci stránky (čítanie lekcie ↔ cesta) */
::view-transition-old(main-view) { animation: vtOut .2s ease both; }
::view-transition-new(main-view) { animation: vtIn .35s ease both; }

/* ---------- objavenie pri skrolovaní a tlačidlá ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .55s; pointer-events: none; }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(1px) scale(.97); }
.card, .tile, .side-card { transition: transform .2s, border-color .2s, box-shadow .2s; }
.tile:hover { transform: translateY(-2px); border-color: #3a4a78; }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.45); animation: ripple .6s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

.logo img.block { width: 44px; height: 44px; image-rendering: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); margin-block: -8px; transition: transform .4s cubic-bezier(.2,.9,.3,1.3); }
.logo:hover img.block { transform: rotate(-12deg) scale(1.08); }
@media (max-width: 760px) { .logo img.block { width: 34px; height: 34px; margin-block: -4px; } }

/* ticker, dnes v meste, nick v hlavičke */
.ticker { position: relative; overflow: hidden; background: var(--field); border-bottom: 1px solid var(--line); height: 30px; display: flex; align-items: center; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--field), transparent); } .ticker::after { right: 0; background: linear-gradient(-90deg, var(--field), transparent); }
.ticker-track { display: inline-flex; white-space: nowrap; animation: tick 40s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ti { font-size: 13px; color: var(--muted); padding: 0 26px; border-right: 1px solid var(--line); }
@keyframes tick { to { transform: translateX(-50%); } }
.today { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 760px) { .today { grid-template-columns: 1fr; } }
.big-clock { font-family: var(--f-display); font-size: 54px; line-height: 1; color: var(--torch); text-shadow: 0 0 18px rgb(var(--torch-rgb) / .35); letter-spacing: 2px; }
.nick-btn { display: inline-flex; align-items: center; gap: 8px; }
.nav-head { width: 20px; height: 20px; image-rendering: pixelated; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* hero: text vľavo, stav servera vpravo – na širokých obrazovkách roztiahnuté k okrajom, nech vynikne mesto a obloha */
.hero .wrap { max-width: 1480px; grid-template-columns: minmax(0, 640px) minmax(0, 380px); justify-content: space-between; }
.hero .status { justify-self: end; width: 100%; max-width: 380px; }
/* čitateľnosť textu na dennej oblohe */
.hero p.lead { color: #eef2fb; text-shadow: 0 1px 2px rgb(var(--deep-rgb) / .9), 0 0 14px rgb(var(--deep-rgb) / .55); }
.hero .eyebrow { text-shadow: 0 1px 2px rgb(var(--deep-rgb) / .9), 0 0 10px rgb(var(--deep-rgb) / .6); }
.hero h1 { text-shadow: 0 3px 0 rgb(var(--deep-rgb) / .55), 0 0 22px rgb(var(--deep-rgb) / .35); }
.hero .status { background: rgb(var(--night-rgb) / .9); }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero .status { justify-self: stretch; max-width: none; } }

/* ---------- závoj pri načítaní: obsah sa odmaže, keď sú dáta aj fonty ---------- */
body > main, body > section:not(.hero), .ac-hero .wrap, .hero .status { transition: filter .55s ease, opacity .55s ease, transform .55s ease; }
.is-loading body > main, .is-loading body > section:not(.hero), .is-loading .ac-hero .wrap, .is-loading .hero .status { filter: blur(10px); opacity: .2; transform: scale(.992); }

/* ---------- skladanie kariet z kociek ---------- */
.kb-pre { opacity: 0; transform: translateX(-46px); }
.kb-pre[data-dir="r"] { transform: translateX(46px); }
.kb-pre.kb-in { opacity: 1; transform: none; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.9,.25,1.05); }
.kb-blocks { position: absolute; inset: 0; z-index: 6; display: grid; pointer-events: none; border-radius: inherit; overflow: hidden; contain: strict; }
.kb-blocks i { display: block; will-change: transform, opacity; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset -2px -2px 0 rgba(0,0,0,.28), inset 2px 2px 0 rgba(255,255,255,.06); animation: kbOut .34s cubic-bezier(.5,0,.75,0) forwards; }
@keyframes kbOut { to { opacity: 0; transform: scale(.35) rotate(10deg); } }
.kb-ch { display: inline-block; opacity: 0; animation: kbCh .34s cubic-bezier(.2,.9,.3,1.2) forwards; }
@keyframes kbCh { from { opacity: 0; transform: translateY(10px) scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .is-loading body > main, .is-loading body > section:not(.hero) { filter: none; opacity: 1; transform: none; } .kb-pre { opacity: 1; transform: none; } }
.hero .wrap { padding-inline: clamp(20px, 4.5vw, 72px); }

/* ---------- ilustrácie sekcií ---------- */
body > section:not(.hero) { position: relative; overflow: hidden; }
body > section > .wrap { position: relative; z-index: 1; }
.sec-art { position: absolute; z-index: 0; pointer-events: none; top: 50%; right: max(8px, calc((100vw - 1120px) / 2 - 200px)); width: min(46vw, 560px);
  opacity: .085; transform: translateY(calc(-50% + var(--py, 0px))); display: flex; align-items: center; gap: 4%;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 55% 50%, #000 45%, transparent 78%); mask-image: radial-gradient(ellipse 70% 70% at 55% 50%, #000 45%, transparent 78%); }
.sec-art img { image-rendering: auto; width: 100%; height: auto; display: block; }
.art-kasino { opacity: .11; filter: drop-shadow(0 0 18px rgba(255,64,129,.6)); }
.art-kasino img:first-child { width: 58%; } .art-kasino img:last-child { width: 38%; }
.spin-slow { animation: spinSlow 90s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
/* striedavo vpravo / vľavo: mesto ▶, registrácia ◀, profil ▶, kasíno ◀, akadémie ▶, mapa ◀ */
.art-registracia, .art-kasino, .art-mapa { right: auto; left: max(8px, calc((100vw - 1120px) / 2 - 200px)); }
@media (max-width: 760px) { .sec-art { width: 90vw; opacity: .06; right: -20vw; } }
@media (prefers-reduced-motion: reduce) { .spin-slow { animation: none; } }

/* ---------- novinky ---------- */
.news { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.news-item { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; display: grid; gap: 8px; align-content: start; position: relative; }
.news-item.first { border-color: var(--torch); box-shadow: 0 0 0 1px rgb(var(--torch-rgb) / .25), 0 10px 30px rgb(var(--torch-rgb) / .08); }
.news-item h3 { font-size: 24px; line-height: 1.05; }
.news-item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.news-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.ntag { font-family: var(--f-mono); font-size: 11px; padding: 2px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: .05em; }
.ntag.novinka { background: rgba(107,227,138,.15); color: var(--good); } .ntag.oprava { background: rgba(79,193,255,.15); color: #4fc1ff; }
.ntag.event { background: rgba(255,64,129,.15); color: #ff4081; } .ntag.web { background: rgb(var(--torch-rgb) / .15); color: var(--torch); }
.news-new { position: absolute; top: -9px; right: 12px; background: var(--torch); color: #1a1000; font-family: var(--f-display); font-size: 15px; padding: 1px 8px; border-radius: 3px; }

/* ---------- mini ruleta ---------- */
.mini-roul { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; margin-top: 6px; }
@media (max-width: 520px) { .mini-roul { grid-template-columns: 1fr; justify-items: center; } }
.mr-box { position: relative; width: 220px; height: 220px; }
#miniWheel { width: 220px; height: 220px; cursor: grab; touch-action: none; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
#miniWheel:active { cursor: grabbing; }
.mr-hint { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; transition: opacity .4s; }

/* ---------- smoliari ---------- */
.losers { margin-top: 18px; }
.loser { display: grid; grid-template-columns: 34px 30px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed rgba(42,54,88,.8); }
.loser:last-child { border-bottom: 0; }
.loser .place { font-family: var(--f-display); font-size: 28px; text-align: center; }
.loser .who b { display: block; font-size: 15px; } .loser .who span { font-size: 12.5px; color: var(--muted); }
.loser .lost { font-family: var(--f-num); font-weight: 600; color: var(--bad); font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; }
.loser.first .place { animation: wobble 2.4s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.loser .who { text-align: left; min-width: 0; }
.casino-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.rou-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.nav-auth { display: flex; gap: 8px; }
.nav-auth[hidden] { display: none !important; }
@media (max-width: 520px) { .nav-auth .btn { padding: 7px 10px; font-size: 17px; } }
/* profil – ilustrácia viac do voľného miesta vpravo */
.art-profil { width: min(40vw, 480px); right: max(-30px, calc((100vw - 1120px) / 2 - 300px)); opacity: .1; top: 40px; transform: translateY(var(--py, 0px)); }
@media (max-width: 760px) { .art-profil { width: 90vw; opacity: .06; right: -20vw; } }
/* bublina cez celý web */
.kb-notice { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(8,12,22,.35); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); opacity: 0; transition: opacity .3s, backdrop-filter .3s, -webkit-backdrop-filter .3s; }
.kb-notice.show { opacity: 1; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.kb-notice-in { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 6px; text-align: center; min-width: min(340px, 100%); padding: 26px 34px 30px; border-radius: 10px;
  background: linear-gradient(180deg, var(--panel-2), var(--night-3)); border: 1px solid var(--line); border-top: 3px solid var(--torch); box-shadow: 0 30px 80px rgba(0,0,0,.55); transform: scale(.85) translateY(10px); transition: transform .35s cubic-bezier(.2,1.5,.4,1); }
.kb-notice.show .kb-notice-in { transform: none; }
.kb-n-icon { font-size: 44px; line-height: 1; animation: kbWave 1s ease-in-out 2; transform-origin: 70% 80%; }
@keyframes kbWave { 25% { transform: rotate(18deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(14deg); } }
.kb-notice-in b { font-family: var(--f-display); font-weight: 400; font-size: 30px; }
.kb-notice-in span { color: var(--muted); font-size: 14px; }
.kb-n-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--torch); transform-origin: left; animation: kbBar linear forwards; }
@keyframes kbBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* ilustrácie v pozadí podstránok (8 %) */
.page-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .08; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(24px, 5vw, 140px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 26%, transparent 42% 58%, #000 74%); mask-image: linear-gradient(90deg, #000 0 26%, transparent 42% 58%, #000 74%); }
.page-bg img { image-rendering: auto; width: auto; }
.page-bg img:first-child { height: min(62vh, 560px); transform: translateY(14%); }
.page-bg img:last-child { height: min(40vh, 380px); transform: translateY(-18%) rotate(-6deg); }
.prof-main { position: relative; z-index: 1; }
@media (max-width: 760px) { .page-bg { opacity: .05; } }
/* okno s kódom z hry (prihlásenie po 3 zlých heslách) */
.kb-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(8,12,22,.4); opacity: 0; transition: opacity .28s, backdrop-filter .28s, -webkit-backdrop-filter .28s; }
.kb-modal.show { opacity: 1; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.kb-modal-in { position: relative; width: min(420px, 100%); display: grid; gap: 10px; padding: 26px 26px 22px; border-radius: 10px; background: linear-gradient(180deg, var(--panel-2), var(--night-3));
  border: 1px solid var(--line); border-top: 3px solid var(--torch); box-shadow: 0 30px 80px rgba(0,0,0,.55); transform: scale(.9) translateY(10px); transition: transform .32s cubic-bezier(.2,1.5,.4,1); }
.kb-modal.show .kb-modal-in { transform: none; }
.kb-modal-in h3 { font-size: 30px; text-align: center; }
.kb-m-icon { font-size: 42px; text-align: center; line-height: 1; }
.kb-m-text { margin: 0; text-align: center; color: var(--text); font-size: 14px; }
.kb-m-timer { text-align: center; font-variant-numeric: tabular-nums; }
.kb-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--field); color: var(--muted); font-size: 15px; cursor: pointer; transition: color .15s, border-color .15s, transform .15s; }
.kb-x:hover { color: var(--bad); border-color: var(--bad); transform: rotate(90deg); }
.kb-modal-in .code-boxes input { width: 100%; }
/* mapa – upútavka na hlavnej */
.map-teaser { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 24px 28px; }
.mt-ico { font-size: 54px; }
.mt-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted); }
.mt-list b { color: var(--text); }
.mt-stat { display: grid; justify-items: center; text-align: center; }
.mt-stat b { font-family: var(--f-num); font-size: 44px; color: var(--good); line-height: 1.1; }
@media (max-width: 700px) { .map-teaser { grid-template-columns: 1fr; text-align: left; } .mt-ico { display: none; } }
/* rebríčky profesií na hlavnej + odkazy na profily hráčov */
a.plink { color: inherit; text-decoration: none; } a.plink:hover { color: var(--diamond); text-decoration: underline; text-underline-offset: 3px; }
.ptop-card { margin-top: 16px; display: grid; gap: 14px; }
.ptop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ptop-col { background: var(--night-4); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); border-top: 3px solid var(--c); border-radius: 6px; padding: 12px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.ptop-col h4 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 22px; color: color-mix(in srgb, var(--c) 75%, var(--text)); }
.ptop-col .medal { width: 22px; text-align: center; }
.ptop-col .lv { color: var(--c) !important; }
@media (max-width: 900px) { .ptop { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ptop { grid-template-columns: 1fr; } }
/* rebríčky profesií – rovnomerné riadky (meno sa skráti, level má pevný stĺpec) */
.ptop-col .list li { display: grid; grid-template-columns: 22px 24px minmax(0, 1fr) 58px; gap: 8px; align-items: center; height: 30px; }
.ptop-col .list li .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptop-col .list li .lv { margin-left: 0; text-align: right; white-space: nowrap; }
.ptop-col .list li.empty { display: block; height: auto; }
/* rebríček levelu profilu – celá šírka nad profesiami */
.ptop-col.lvl { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; column-gap: 18px; }
.ptop-col.lvl .list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; }
@media (max-width: 700px) { .ptop-col.lvl { grid-template-columns: 1fr; } .ptop-col.lvl .list { grid-template-columns: 1fr; } }

/* ---------- grafika 1.3: ikony z obrázkov ---------- */
.gi { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.28em; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.big-art { display: block; width: 120px; height: 120px; margin: 0 auto 4px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.55)); animation: bigArt 3.4s ease-in-out infinite; }
@keyframes bigArt { 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .big-art { animation: none; } }
.lock-over .big-art { width: 92px; height: 92px; margin-bottom: 0; }
.hr-msg .big-art { width: 150px; height: 150px; }

/* ---------- veľké logo vedľa nadpisu (hlavná stránka) ---------- */
.hero-main { display: flex; align-items: center; gap: clamp(28px, 3.2vw, 56px); min-width: 0; }
.hero-txt { min-width: 0; max-width: 640px; }
.hero-logo { flex: none; display: block; width: clamp(150px, 13vw, 240px); aspect-ratio: 1; perspective: 900px;
  animation: heroLogoIn .9s cubic-bezier(.2,.9,.3,1.2) both, heroLogoFloat 6s ease-in-out .9s infinite; }
.hl-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .95s cubic-bezier(.3,.9,.25,1.05); }
.hl-in img { display: block; width: 100%; height: 100%; image-rendering: auto; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 0 6px rgb(var(--torch-rgb) / .12)) drop-shadow(0 5px 8px rgba(0,0,0,.28)); }
/* lesk: svetlý pruh prejde len po tvare loga */
.hl-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-mask: url(/gfx/logo-512.webp) center / contain no-repeat; mask: url(/gfx/logo-512.webp) center / contain no-repeat;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.55) 46%, rgba(255,246,214,.95) 50%, rgba(255,255,255,.55) 54%, transparent 62%) no-repeat;
  background-size: 300% 100%; background-position: 120% 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-logo:hover .hl-in { transform: rotateY(360deg) scale(1.06); }
  .hero-logo:hover .hl-shine { animation: hlShine .9s ease-out .38s both; }
}
@keyframes hlShine { 0% { opacity: 1; background-position: 120% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -20% 0; } }
@keyframes heroLogoIn { from { opacity: 0; transform: scale(.6) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes heroLogoFloat { 50% { transform: translateY(-8px) rotate(2deg); } }
.is-loading .hero-logo { animation-play-state: paused; }
@media (min-width: 1100px) { .hero .wrap { grid-template-columns: minmax(0, 940px) minmax(0, 380px); } }
@media (max-width: 1099px) { .hero-main { flex-direction: column; align-items: flex-start; gap: 18px; } .hero-logo { width: 110px; } }
@media (max-width: 760px) { .hero-logo { width: 88px; } }
@media (prefers-reduced-motion: reduce) { .hero-logo { animation: none; } }

/* ---------- tituly ako obrázkové štítky (web 1.4) ---------- */
.title-badge.timg { background: none !important; padding: 0; border-radius: 0; line-height: 0; vertical-align: middle; }
.title-badge.timg img { display: block; height: 1.95em; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); user-select: none; -webkit-user-drag: none; }
.list .title-badge.timg img, .ptop-col .title-badge.timg img { height: 1.65em; }
/* úvod hlavnej stránky na celú šírku: logo + nadpis vľavo, bublina so stavom servera vpravo (decentný okraj) */
.hero .wrap { max-width: none; padding-inline: clamp(20px, max(6.5vw, calc(6.5vw + (100vw - 1366px) * .15)), 400px); }
/* okno „Najprv sa prihlás“ (odhlásený klikol na Firmy a pod.) */
.kb-need .kb-modal-in { width: min(390px, 100%); text-align: center; }
.kb-need .kb-m-text b { color: var(--torch); }
.kb-need .kb-m-text.k { color: var(--muted); }
.kb-need .btn { justify-self: center; min-width: 140px; margin-top: 6px; }
/* ---------------------------------------------------------------- prepínač svetlý / tmavý režim */
.theme-btn { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--torch); cursor: pointer; display: grid; place-items: center; padding: 0; transition: border-color .2s, transform .2s, background .2s; }
.theme-btn + .nav-auth, .theme-btn + .user-menu { margin-left: 4px; }
.theme-btn:hover { border-color: var(--torch); transform: rotate(-12deg) scale(1.06); }
.theme-btn:focus-visible { outline: 2px solid var(--diamond); outline-offset: 2px; }
.theme-btn .tb-ic { display: grid; place-items: center; animation: tbIn .45s cubic-bezier(.2, 1.4, .4, 1); }
.theme-btn svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 2; }
.theme-btn svg path[d^="M20"] { stroke: none; }
@keyframes tbIn { from { transform: rotate(-90deg) scale(.4); opacity: 0; } }
.nav ul + .theme-btn { margin-left: 14px; }
:root.theme-vt header.top { view-transition-name: none; }
:root.theme-vt::view-transition-old(root), :root.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
:root.theme-vt::view-transition-old(root) { z-index: 1; }
:root.theme-vt::view-transition-new(root) { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .theme-btn .tb-ic { animation: none; } }
/* obrázky v pozadí sekcií sú kreslené do noci – vo svetlom režime jemnejšie */
:root[data-theme="light"] .sec-art img, :root[data-theme="light"] .page-bg img { opacity: var(--art-opacity); }
/* tmavé „ostrovy“ aj vo svetlom režime: automat, ruletový stôl, úvod akadémie a panely mapy sú kreslené do noci */
:root[data-theme="light"] :is(.ac-hero, .jp-row, .cabinet, .table-col, .jp-card, .mp-panel, .btip, .bpop) {
  --night: #0d1322; --night-2: #141c30; --night-3: #141c33; --night-4: #0f1628; --deep: #070b16; --deep-rgb: 5 8 18;
  --panel: #1a2440; --panel-2: #1d2848; --line: #2a3658; --text: #e8ecf6; --muted: #98a3c0;
  --torch: #ffb547; --diamond: #5fe0e6; --good: #6be38a; --bad: #ff6b6b; --gold: #ffd54f;
  --field: #0a0f1c; --glass-rgb: 10 15 28; --glass: rgb(10 15 28 / .55); --night-rgb: 13 19 34; --night2-rgb: 20 28 48; --panel-rgb: 26 36 64;
  --btn-bg: #ffb547; --btn-ink: #1b1203; --btn-ring: rgba(255,181,71,.35); --torch-rgb: 255 181 71; --gold-rgb: 255 200 61;
  color-scheme: dark; color: var(--text);
}
/* názvy vzácností (legenda) – svetlé farby sú na svetlom pozadí neviditeľné */
:root[data-theme="light"] .tleg-i.t1 .tleg-h { color: #8a6fd6; }
:root[data-theme="light"] .tleg-i.t2 .tleg-h { color: #5a6884; }
:root[data-theme="light"] .tleg-i.t3 .tleg-h { color: #6a3fd0; }
:root[data-theme="light"] .tleg-i.t4 .tleg-h { color: #0a8892; }
:root[data-theme="light"] .ptop-col .lv { color: color-mix(in srgb, var(--c) 65%, var(--text)) !important; }
/* ---------------------------------------------------------------- web 1.6.1: ikony hlavnej stránky, meniaci sa text, druhá lišta */
.tile .k .hi { width: 26px; height: 26px; vertical-align: -8px; margin-right: 6px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); transition: transform .25s; }
.tile:hover .k .hi { transform: scale(1.15) rotate(-6deg); }
h3 .hh { width: 36px; height: 36px; vertical-align: -9px; margin-right: 8px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.mt-ico { font-size: 0; }
.mt-ico img { width: 112px; height: 112px; display: block; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); animation: mtFloat 6s ease-in-out infinite; }
@keyframes mtFloat { 50% { transform: translateY(-6px) rotate(-3deg); } }
.hero-tag { min-height: 1.6em; }
.hero-tag span { display: inline-block; transition: opacity .45s ease, transform .45s ease, filter .45s ease; }
.hero-tag.out span { opacity: 0; transform: translateY(-8px); filter: blur(3px); }
.hero-tag.pre span { opacity: 0; transform: translateY(8px); filter: blur(3px); transition: none; }
/* druhá lišta: „Vedel si, že…“ – ide opačným smerom, pomalšie a jemnejšie */
.ticker2 { height: 48px; background: var(--night-2); border-block: 1px solid var(--line); }
.ticker2::before { display: none; }
.ticker2::after { background: linear-gradient(-90deg, var(--night-2), transparent); }
.ticker2 .ticker-track { animation-name: tickR; margin-left: 200px; } /* prvá správa začína hneď za nápisom vľavo */
@media (max-width: 760px) { .ticker2 .ticker-track { margin-left: 0; } }
.ticker2 .ti { font-size: 14px; color: var(--text); border-right: 0; padding: 0 34px 0 0; }
.ticker2 .ti::before { content: "✦"; color: var(--torch); margin-right: 12px; }
.t2-lbl { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; padding: 0 46px 0 16px; font-family: var(--f-display); font-size: 21px; color: var(--torch); pointer-events: none; white-space: nowrap; background: linear-gradient(90deg, var(--night-2) calc(100% - 46px), transparent); }
@keyframes tickR { from { transform: translateX(-50%); } to { transform: none; } }
#novinky { padding-top: 48px; }
@media (max-width: 760px) { .t2-lbl { display: none; } .ticker2::before { display: block; } }
@media (prefers-reduced-motion: reduce) { .hero-tag span { transition: none; } .mt-ico img { animation: none; } }
/* svetlý režim: oranžové/hnedé farby rebríčkov (level profilu, Kopáč) → fialové */
:root[data-theme="light"] .ptop-col[data-k="_level"] { --c: #6a4be0 !important; }
:root[data-theme="light"] .ptop-col[data-k="kopac"] { --c: #9b6bf0 !important; }
:root[data-theme="light"] .plevel .pl-bar i { background: linear-gradient(90deg, #6a4be0, #0a8892); }
/* úvod: text nad nadpisom v jemnej zaoblenej „pilulke“ – čitateľný na dennej aj nočnej oblohe */
.hero .hero-tag { display: inline-flex; align-items: center; padding: 4px 13px; margin-bottom: 14px; border-radius: 999px; border: 1px solid rgb(var(--torch-rgb) / .28);
  background: rgb(5 8 18 / .26); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: none; text-shadow: none; opacity: .92; }
/* svetlý režim: obloha je kreslená podľa herného času (často tmavá) → text úvodu ostáva svetlý s tmavým tieňom, „Craft“ fialový */
:root[data-theme="light"] .hero-txt { --text: #f4f6fc; --muted: #d3daea; --deep-rgb: 5 8 18; color: var(--text); }
:root[data-theme="light"] .hero .hero-tag { color: #c2b4f5; border-color: rgba(190,170,255,.32); }
:root[data-theme="light"] .hero h1 span { color: #8a6dff; }
:root[data-theme="light"] .hero-txt .ip { --text: #141c30; --muted: #55607c; --deep-rgb: 205 215 233; color: var(--text); }
/* tlačidlo a pole s IP adresou rovnako vysoké (symetria) */
.hero .cta { align-items: stretch; }
.hero .cta > .btn, .hero .cta > .ip { min-height: 50px; box-sizing: border-box; display: inline-flex; align-items: center; }
.hero .cta > .btn { padding-block: 0; min-height: 48px; margin-block: 1px; } /* +1 px obrys tlačidla zvonka = presne 50 px ako pole s IP */
.hero .cta > .ip { padding-block: 0; }
.hero .hero-tag { white-space: nowrap; overflow: hidden; transition: width .6s cubic-bezier(.65, 0, .35, 1); }
@media (prefers-reduced-motion: reduce) { .hero .hero-tag { transition: none; } }
:root[data-theme="light"] .news-new { color: #fff; }
/* hlavička: pri prejdení kurzorom rámik v akcentovej farbe (tmavý = oranžový, svetlý = fialový), text ostáva čitateľný */
.nav ul a { border: 1px solid transparent; transition: border-color .15s, background .15s, color .15s; }
.nav ul a:hover, .nav ul a:focus-visible { border-color: var(--torch); color: var(--text); background: rgb(var(--torch-rgb) / .08); outline: none; }
/* ---------------------------------------------------------------- rozbaľovacie menu v hlavičke (šípka) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav-more { position: relative; margin-left: 2px; }
.nm-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--torch); cursor: pointer; display: grid; place-items: center; padding: 0; transition: border-color .2s, transform .2s, box-shadow .2s; }
.nm-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.nav-more.open .nm-btn, .nm-btn:hover, .nm-btn:focus-visible { border-color: var(--torch); box-shadow: 0 0 0 4px rgb(var(--torch-rgb) / .14), 0 0 16px rgb(var(--torch-rgb) / .3); outline: none; }
.nav-more.open .nm-btn svg { transform: rotate(180deg); }
.nm-panel { position: absolute; top: calc(100% + 14px); right: -12px; min-width: 270px; padding: 8px; display: grid; gap: 4px; border-radius: 14px; z-index: 30;
  background: color-mix(in srgb, var(--panel) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgb(var(--torch-rgb) / .35); box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 0 1px rgb(var(--torch-rgb) / .08) inset;
  transform-origin: calc(100% - 30px) -8px; transform: translateY(-10px) scale(.86) rotateX(-18deg); opacity: 0; visibility: hidden; filter: blur(4px);
  clip-path: inset(0 0 100% 0 round 14px);
  transition: transform .5s cubic-bezier(.22, 1.3, .36, 1), opacity .3s ease, filter .35s ease, clip-path .5s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .5s; }
.nm-panel::before { content: ""; position: absolute; top: -7px; right: 24px; width: 12px; height: 12px; transform: rotate(45deg); background: inherit; border-left: 1px solid rgb(var(--torch-rgb) / .35); border-top: 1px solid rgb(var(--torch-rgb) / .35); }
.nm-panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgb(var(--torch-rgb) / .16) 50%, transparent 70%); background-size: 250% 100%; background-position: 120% 0; }
.nav-more.open .nm-panel { transform: none; opacity: 1; visibility: visible; filter: none; clip-path: inset(-20px -20px -20px -20px round 14px); transition-delay: 0s; }
.nav-more.open .nm-panel::after { animation: nmSheen 1s ease .15s both; }
@keyframes nmSheen { to { background-position: -120% 0; } }
.nm-panel a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text); border: 1px solid transparent;
  opacity: 0; transform: translateX(14px); transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1.3, .36, 1), background .15s, border-color .15s; transition-delay: 0s; }
.nav-more.open .nm-panel a { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i) * .06s), calc(.12s + var(--i) * .06s), 0s, 0s; }
.nm-panel a:hover, .nm-panel a:focus-visible { background: rgb(var(--torch-rgb) / .1); border-color: rgb(var(--torch-rgb) / .45); outline: none; }
.nm-panel a b { display: block; font-size: 14.5px; }
.nm-panel a i { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.nm-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: rgb(var(--torch-rgb) / .12); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.nm-panel a:hover .nm-ic { transform: scale(1.12) rotate(-8deg); }
.nav .theme-btn { margin-left: 4px; }
@media (max-width: 760px) { .nav-more { display: none; } }
@media (prefers-reduced-motion: reduce) { .nm-panel, .nm-panel a, .nm-btn svg { transition: none !important; } .nav-more.open .nm-panel::after { animation: none; } }
/* hlavička: širšia, odkazy v jednom riadku (nič sa nezalamuje) */
header.top .wrap.nav { max-width: 1360px; }
.nav ul { flex-wrap: nowrap; }
.nav ul a { white-space: nowrap; }
.nav .logo { white-space: nowrap; flex: none; }
@media (max-width: 1280px) { .nav { gap: 12px; } .nav ul { gap: 2px; } .nav ul a { padding: 6px 8px; font-size: 13.5px; } }
@media (max-width: 1080px) { .nav .logo { font-size: 0; gap: 0; } .nav .logo img { margin: 0; } }
@media (max-width: 960px) { .nav ul, .nav-more { display: none; } .nav .nav-auth, .nav .user-menu { margin-left: auto; } .nav .logo { font-size: 22px; gap: 10px; } }
/* odkazy + šípka vycentrované medzi logom a Prihlásiť */
@media (min-width: 961px) { .nav ul { margin-left: auto; } .nav .nav-more { margin-right: auto; } }
/* odchod späť históriou – okamžitá odozva po kliknutí na krížik / Späť */
html.kb-leaving body > main { opacity: .55; transition: opacity .12s ease; }
/* 1.9.5 – obrázky namiesto emoji */
.nm-ic .gi { width: 28px; height: 28px; vertical-align: middle; }
.t2-lbl .gi { width: 20px; height: 20px; vertical-align: -5px; }
.btn .gi { width: 1.3em; height: 1.3em; vertical-align: -.3em; }

/* 1.10 – zvonček s oznamami */
.bell-w { position: relative; flex: none; }
.bell-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--torch); cursor: pointer; display: grid; place-items: center; padding: 0; transition: border-color .2s, transform .2s; }
.bell-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bell-btn:hover { border-color: var(--torch); }
.bell-btn:focus-visible { outline: 2px solid var(--diamond); outline-offset: 2px; }
.bell-btn[aria-expanded="true"] { border-color: var(--torch); }
.bell-btn.ring svg { animation: bellRing .9s ease; transform-origin: 50% 15%; }
@keyframes bellRing { 0%,100% { transform: rotate(0) } 15% { transform: rotate(16deg) } 30% { transform: rotate(-14deg) } 45% { transform: rotate(10deg) } 60% { transform: rotate(-6deg) } 75% { transform: rotate(3deg) } }
.bell-n { position: absolute; top: -5px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #e5484d; color: #fff; font: 700 11px/19px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--night); }
.bell-p { position: absolute; right: -8px; top: calc(100% + 10px); width: min(380px, calc(100vw - 24px)); max-height: min(520px, 75vh); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgb(0 0 0 / .45); z-index: 60; overflow: hidden; }
.bell-p[hidden] { display: none; }
.bell-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bell-h b { font-size: 15px; }
.bell-h span { display: flex; gap: 10px; align-items: center; }
.bell-h button, .bell-h a { background: none; border: 0; padding: 0; color: var(--diamond); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: none; }
.bell-h button:hover, .bell-h a:hover { text-decoration: underline; }
.bell-l { overflow-y: auto; overscroll-behavior: contain; }
.bell-i { display: flex; gap: 11px; align-items: flex-start; padding: 11px 14px; color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); position: relative; }
.bell-i:last-child { border-bottom: 0; }
.bell-i:hover, .bell-i:focus-visible { background: color-mix(in srgb, var(--torch) 9%, transparent); outline: none; }
.bell-i img { flex: none; width: 34px; height: 34px; object-fit: contain; }
.bell-i span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bell-i b { font-size: 13.5px; line-height: 1.3; }
.bell-i b em { font-style: normal; color: var(--muted); font-weight: 600; }
.bell-i i { font-style: normal; font-size: 12.5px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.bell-i small { font-size: 11.5px; color: var(--muted); opacity: .8; }
.bell-i.new { background: color-mix(in srgb, var(--torch) 6%, transparent); }
.bell-i.new::before { content: ""; position: absolute; left: 5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--torch); }
.bell-e { padding: 28px 18px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; }
.bell-e img { opacity: .85; }
.bell-e span { font-size: 12.5px; }
.user-menu .bell-w + .theme-btn, .user-menu .theme-btn + .bell-w { margin-left: 0; }
.nav > .bell-w { margin-left: -10px; }            /* na úvode: rovnaká medzera 8 px ako medzi tlačidlami */
.nav > .bell-w + .theme-btn { margin-left: -10px; }
.bell-p { opacity: 0; transform: translateY(-8px) scale(.96); transform-origin: calc(100% - 26px) 0; transition: opacity .18s ease, transform .2s cubic-bezier(.2, .9, .3, 1.2); pointer-events: none; }
.bell-p.open { opacity: 1; transform: none; pointer-events: auto; }
.bell-p.open .bell-i { animation: bellItem .28s ease both; }
.bell-p.open .bell-i:nth-child(2) { animation-delay: .03s } .bell-p.open .bell-i:nth-child(3) { animation-delay: .06s } .bell-p.open .bell-i:nth-child(4) { animation-delay: .09s } .bell-p.open .bell-i:nth-child(n+5) { animation-delay: .12s }
@keyframes bellItem { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .bell-p { transition: opacity .12s; transform: none; } .bell-p.open .bell-i { animation: none; } }
@media (max-width: 560px) { .bell-p { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; transform-origin: 50% 0; } }
@media (prefers-reduced-motion: reduce) { .bell-btn.ring svg { animation: none; } }

/* 1.10 – 3D skin hráča */
.skin3d { position: relative; width: var(--w); height: var(--h); max-width: 100%; touch-action: pan-y; }
.skin3d canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; filter: drop-shadow(0 16px 16px rgb(0 0 0 / .45)); }
.skin3d canvas:active { cursor: grabbing; }
.skin3d-off, .skin3d-on { font: 600 11px/1 var(--f-body); color: var(--muted); background: color-mix(in srgb, var(--panel) 85%, transparent); border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; cursor: pointer; }
.skin3d-off { position: absolute; right: 0; bottom: 0; opacity: 0; transition: opacity .2s; }
.skin3d:hover .skin3d-off, .skin3d-off:focus-visible { opacity: 1; }
@media (hover: none) { .skin3d-off { opacity: .8; } }
.skin3d-off:hover, .skin3d-on:hover { color: var(--text); border-color: var(--torch); }
.skin3d-on { margin-top: 6px; }