@import url('theme.css');
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
html { scroll-behavior:smooth; }
body { overflow-x:hidden; }

/* ---------- nagłówek ---------- */
.site-header { position:absolute; z-index:5; top:0; left:50%; transform:translateX(-50%); width:min(1180px,calc(100% - 32px)); display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
.logo { display:inline-flex; align-items:center; gap:10px; color:var(--glow-strong); text-decoration:none; font-family:var(--font-head); font-size:24px; font-weight:700; text-shadow:0 0 18px var(--glow-soft); }
.logo .holo-text { text-shadow:none; }
.logo-icon { width:30px; height:30px; color:var(--cap-red); filter:drop-shadow(0 0 6px rgba(200,16,46,.6)); }
nav { display:flex; align-items:center; gap:6px; }
.nav-link { color:var(--ink-muted); text-decoration:none; font-weight:600; font-size:14px; padding:10px 12px; border-radius:6px; }
.nav-link:hover { color:var(--ink-light); background:rgba(255,255,255,.04); }
.welcome-user { color:var(--ink-muted); font-size:14px; margin-right:6px; }

/* ---------- hero ---------- */
.hero { position:relative; overflow:hidden; min-height:720px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px; padding:130px max(16px,calc((100vw - 1180px)/2)) 80px; background:var(--tex-scan), radial-gradient(ellipse 50% 60% at 75% 50%, rgba(155,108,255,.16), transparent 70%), linear-gradient(160deg,#0f1218,#171b22 60%,#1d1410); border-bottom:1px solid var(--hall-300); }
.hero .aurora { height:60%; opacity:.26; }
.hero-copy { max-width:640px; position:relative; z-index:2; }
h1 { font-size:clamp(40px,5.4vw,66px); line-height:1.02; color:var(--glow-strong); margin:14px 0 22px; text-shadow:0 0 30px var(--glow-soft); }
h1 .holo-text { text-shadow:none; }
.hero-text { font-size:17px; line-height:1.7; color:var(--ink-muted); max-width:600px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 26px; }
.hero-stats { list-style:none; display:flex; gap:12px; padding:0; margin:0 0 20px; flex-wrap:wrap; }
.hero-stats li { display:flex; flex-direction:column; padding:10px 16px; border:1px solid var(--hall-300); border-radius:8px; background:rgba(12,14,18,.6); min-width:96px; }
.hero-stats strong { font-family:var(--font-head); font-size:24px; color:var(--rune-gold); }
.hero-stats span { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); }
.guardian-note { font-size:12.5px; color:var(--ink-dim); font-family:var(--font-mono); }

.hero-scene { position:relative; z-index:2; height:500px; display:grid; place-items:center; }
.portal { position:relative; width:min(420px,90%); aspect-ratio:1; display:grid; place-items:center; }
.portal-glow { position:absolute; inset:8%; border-radius:50%; background:radial-gradient(circle, rgba(255,180,90,.35), rgba(155,108,255,.22) 45%, rgba(79,227,214,.08) 65%, transparent 72%); filter:blur(6px); animation:pulse 5s ease-in-out infinite; }
.portal::before { content:""; position:absolute; inset:4%; border-radius:50%; border:2px solid transparent; background:var(--holo) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; box-shadow:0 0 60px rgba(155,108,255,.35); opacity:.8; }
.portal-runes { position:absolute; inset:0; width:100%; height:100%; animation:spin 70s linear infinite reverse; }
.portal-runes text { font:600 9px var(--font-mono); letter-spacing:2px; fill:var(--rune-gold); opacity:.75; }
.portal-hero { position:relative; width:62%; height:auto; filter:drop-shadow(0 18px 30px rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(255,180,90,.25)); }
.float-chip { position:absolute; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; font:500 12px var(--font-mono); color:var(--mana); background:rgba(12,14,18,.82); border:1px solid rgba(124,247,255,.35); border-radius:6px; box-shadow:0 0 20px rgba(79,227,214,.12); backdrop-filter:blur(4px); animation:chip-float 6s ease-in-out infinite; }
.chip-a { top:12%; left:0; }
.chip-b { top:30%; right:-2%; color:var(--rune-gold); border-color:rgba(255,215,122,.4); animation-delay:-2s; }
.chip-c { bottom:12%; left:6%; color:var(--aurora-pink); border-color:rgba(255,106,213,.4); animation-delay:-4s; }
@keyframes chip-float { 50% { transform:translateY(-10px); } }
.scene-lamp { position:absolute; top:0; right:18%; width:140px; height:8px; border-radius:4px; background:linear-gradient(90deg,transparent,#fff7e0,transparent); box-shadow:0 0 40px 10px rgba(255,247,224,.25); }

/* ---------- sekcje wspólne ---------- */
.section-head { max-width:720px; margin:0 auto 36px; text-align:center; }
.section-head p:last-child { color:var(--ink-muted); line-height:1.65; }
h2 { color:var(--ink-light); font-size:36px; margin:10px 0 18px; }

/* ---------- rozmówki ---------- */
.dictionary-section { position:relative; padding:90px max(16px,calc((100vw - 1080px)/2)); background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(155,108,255,.10), transparent 70%); }
.dictionary { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.dictionary li { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:16px 18px; border:1px solid var(--hall-300); border-radius:10px; background:linear-gradient(180deg,var(--hall-700),#12151b); transition:transform .2s, border-color .2s, box-shadow .2s; }
.dictionary li:hover { transform:translateY(-3px); border-color:var(--aurora-violet); box-shadow:0 10px 30px rgba(155,108,255,.18); }
.dict-magic { font-family:var(--font-head); font-weight:700; color:var(--rune-gold); }
.dict-tech { font-family:var(--font-mono); font-size:13px; color:var(--mana); }
.dict-link { height:2px; background:linear-gradient(90deg,var(--rune-gold),var(--aurora-violet),var(--mana)); background-size:200% 100%; border-radius:2px; animation:holo-shift 3s linear infinite alternate; }
.dictionary p { grid-column:1 / -1; margin:2px 0 0; color:var(--ink-muted); font-size:14px; line-height:1.5; }

/* ---------- kroki ---------- */
.steps-section { padding:90px max(16px,calc((100vw - 1080px)/2)); text-align:center; }
.steps { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; text-align:left; }
.steps::before { content:""; position:absolute; top:46px; left:8%; right:8%; height:2px; background:repeating-linear-gradient(90deg,var(--circuit) 0 10px,transparent 10px 18px); z-index:0; }
.step { padding:30px 24px 26px; z-index:1; transition:transform .2s, box-shadow .2s; }
.step:hover { transform:translateY(-4px); box-shadow:var(--shadow), 0 0 30px var(--glow-soft); }
.step-number { font-family:var(--font-mono); color:var(--rust-light); font-size:12px; letter-spacing:.14em; }
.step-glyph { float:right; display:grid; place-items:center; width:44px; height:44px; font-size:22px; border-radius:50%; background:var(--hall-900); border:1px solid var(--aurora-violet); box-shadow:0 0 16px rgba(155,108,255,.35); }
.steps h3 { color:var(--glow-strong); margin:12px 0 8px; font-size:19px; }
.steps p { color:var(--ink-muted); line-height:1.6; margin:0; }

/* ---------- klany ---------- */
.clans-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; align-items:start; padding:80px max(16px,calc((100vw - 1080px)/2)); background:var(--tex-rivets) 0 0/18px 18px, var(--hall-700); border-top:1px solid var(--hall-300); border-bottom:1px solid var(--hall-300); }
.clans-intro { position:sticky; top:30px; }
.clans-intro h2 { margin-bottom:12px; } .clans-intro p { color:var(--ink-muted); line-height:1.6; margin-bottom:22px; }
.clan-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.clan-grid li { --clan:var(--glow); position:relative; overflow:hidden; display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; padding:14px; border:1px solid var(--hall-300); border-left:3px solid var(--clan); border-radius:8px; background:var(--hall-900); transition:transform .2s, border-color .2s, box-shadow .2s; }
/* Kolory klanów w CSS, nie w atrybutach style: CSP serwera blokuje style inline. */
.clan-grid li:nth-child(1) { --clan:#ffd77a; }
.clan-grid li:nth-child(2) { --clan:#9b6cff; }
.clan-grid li:nth-child(3) { --clan:#ff8a4c; }
.clan-grid li:nth-child(4) { --clan:#4fe3d6; }
.clan-grid li:nth-child(5) { --clan:#ff6ad5; }
.clan-grid li:nth-child(6) { --clan:#5aa9ff; }
.clan-grid li:nth-child(7) { --clan:#7fd1a0; }
.clan-grid li:nth-child(8) { --clan:#ff4d5e; }
.clan-grid li:nth-child(9) { --clan:#a8b8ff; }
.clan-grid li:nth-child(10) { --clan:#ffb45a; }
.clan-grid li::after { content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--clan) 35%, transparent), transparent 70%); opacity:.5; transition:opacity .2s; }
.clan-grid li:hover { transform:translateX(3px); border-color:var(--clan); box-shadow:0 0 22px color-mix(in srgb, var(--clan) 25%, transparent); }
.clan-grid li:hover::after { opacity:1; }
.clan-grid .icon { grid-row:1 / span 2; width:40px; height:40px; padding:8px; border-radius:50%; color:var(--clan); background:color-mix(in srgb, var(--clan) 12%, transparent); border:1px solid color-mix(in srgb, var(--clan) 45%, transparent); }
.clan-grid strong { font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-light); }
.clan-grid span { font-size:13px; color:var(--ink-muted); }

/* ---------- oś czasu ---------- */
.lore-section-landing { padding:90px max(16px,calc((100vw - 1080px)/2)); }
.timeline { list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative; }
.timeline::before { content:""; position:absolute; top:22px; left:22px; right:22px; height:2px; background:linear-gradient(90deg,var(--rune-gold),var(--aurora-violet),var(--aurora-cyan),var(--aurora-pink)); opacity:.6; }
.timeline li { position:relative; }
.tl-mark { position:relative; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; font:700 15px var(--font-head); color:var(--hall-900); background:var(--rune-gold); box-shadow:0 0 0 5px var(--hall-900), 0 0 22px rgba(255,215,122,.45); }
.timeline li:nth-child(2) .tl-mark { background:var(--aurora-violet); box-shadow:0 0 0 5px var(--hall-900), 0 0 22px rgba(155,108,255,.5); }
.timeline li:nth-child(3) .tl-mark { background:var(--aurora-cyan); box-shadow:0 0 0 5px var(--hall-900), 0 0 22px rgba(79,227,214,.5); }
.timeline li:nth-child(4) .tl-mark { background:var(--aurora-pink); box-shadow:0 0 0 5px var(--hall-900), 0 0 22px rgba(255,106,213,.5); }
.timeline h3 { color:var(--glow-strong); font-size:19px; margin:18px 0 8px; }
.timeline p { margin:0; color:var(--ink-muted); line-height:1.7; font-size:14.5px; }

/* ---------- bezpieczeństwo ---------- */
.safety-section { display:grid; grid-template-columns:120px 1fr; gap:34px; align-items:center; width:min(1000px,calc(100% - 32px)); margin:0 auto 90px; padding:36px 40px; }
.safety-mark { position:relative; display:grid; place-items:center; width:110px; height:110px; border-radius:50%; color:var(--cap-red); background:radial-gradient(circle, rgba(255,180,90,.15), transparent 70%); }
.safety-mark .icon { width:52px; height:52px; filter:drop-shadow(0 0 8px rgba(200,16,46,.5)); }
.safety-section h2 { margin:6px 0 10px; font-size:28px; }
.safety-section p { color:var(--ink-muted); line-height:1.65; margin:0; }
.help-lines { list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:18px 0 0; }
.help-lines li { display:flex; align-items:center; gap:10px; padding:8px 14px; border:1px solid rgba(127,209,160,.4); border-radius:8px; background:rgba(127,209,160,.06); }
.help-lines strong { font-family:var(--font-head); font-size:20px; color:var(--ok); }
.help-lines span { font-size:13px; color:var(--ink-muted); }

footer { display:flex; justify-content:space-between; gap:12px; padding:26px max(16px,calc((100vw - 1080px)/2)); border-top:1px solid var(--hall-300); color:var(--ink-dim); font-family:var(--font-mono); font-size:12px; }
.footer-motto { display:inline-flex; align-items:center; gap:8px; }

@media (prefers-reduced-motion: reduce) { .portal-glow, .portal-runes, .float-chip, .dict-link { animation:none; } }

@media(max-width:960px){ .dictionary{grid-template-columns:repeat(2,1fr)} .timeline{grid-template-columns:repeat(2,1fr)} .timeline::before{display:none} }
@media(max-width:860px){ .site-header{padding:16px 0} .logo{font-size:20px} .nav-link{display:none} .hero{grid-template-columns:1fr; padding-top:110px; min-height:0} .hero-scene{height:380px} .float-chip{font-size:11px} .steps,.clans-section{grid-template-columns:1fr} .steps::before{display:none} .clans-intro{position:static} .clan-grid{grid-template-columns:1fr} .safety-section{grid-template-columns:1fr; text-align:center; padding:28px 20px} .safety-mark{margin:0 auto} .help-lines{justify-content:center} .steps-section,.lore-section-landing,.dictionary-section{padding-top:60px; padding-bottom:60px} footer{display:block; text-align:center} footer span{display:flex; justify-content:center; margin:6px} .welcome-user{display:none} h2{font-size:28px} }
@media(max-width:560px){ .dictionary,.timeline{grid-template-columns:1fr} .chip-b{right:0} }