@import url("https://fonts.googleapis.com/css2?family=Tektur:wght@500;700;900&family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;600&display=swap");
/* Game-menu look: salmon red on near-black, cyan for focus, yellow for quest accents. Own design, no game assets. */
:root{--bg:#07080b;--panel:rgba(255,95,86,.05);--panelS:#0e0c10;--line:rgba(255,95,86,.35);--line2:rgba(255,95,86,.16);
 --red:#ff5f56;--redD:#b8352f;--cyan:#5ef6ff;--y:#f3e600;--text:#f1e8e4;--muted:#9a8f8c;--mono:"JetBrains Mono",ui-monospace,monospace;--head:Tektur,"Exo 2",sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 Inter,system-ui,sans-serif;
 background-image:radial-gradient(1200px 600px at 85% -10%,rgba(255,95,86,.12),transparent 60%),radial-gradient(900px 500px at -10% 30%,rgba(94,246,255,.06),transparent 60%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
a{color:var(--cyan)}
::selection{background:var(--cyan);color:#000}

.top{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(7,8,11,.9);position:sticky;top:0;z-index:10;backdrop-filter:blur(6px)}
.top::after{content:"NC//2077 · ЗВ'ЯЗОК: СТАБІЛЬНИЙ";margin-left:auto;font:400 11px var(--mono);color:var(--muted);letter-spacing:.12em}
.brand{font:900 17px var(--head);color:var(--red);text-decoration:none;text-transform:uppercase;letter-spacing:.08em}
.brand small{font:400 12px var(--mono);text-transform:none;letter-spacing:0;color:var(--muted);margin-left:10px}

main{max-width:980px;margin:0 auto;padding:0 16px}
article>.kicker{display:inline-flex;gap:8px;align-items:center;margin:44px 0 0;color:var(--cyan);font:400 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(94,246,255,.45);padding:6px 12px;background:rgba(94,246,255,.06)}
article>.kicker::before{content:"";width:7px;height:7px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
h1{position:relative;font:900 clamp(46px,10vw,110px)/.92 var(--head);text-transform:uppercase;margin:16px 0 22px;color:var(--red);
 text-shadow:-3px 0 0 rgba(94,246,255,.7),3px 0 0 rgba(255,0,60,.55),0 0 28px rgba(255,95,86,.45)}
h1::after{content:"ОНОВЛЕННЯ_2.5 // ПАТЧ-НОТАТКИ + ДАНІ ГРИ";display:block;margin-top:12px;font:400 12px var(--mono);letter-spacing:.2em;color:var(--muted);text-shadow:none}
.lead{font-size:18px;max-width:740px;color:#e6d9d4;padding:14px 18px;background:var(--panel);border:1px solid var(--line2);border-left:3px solid var(--red)}

.toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;margin:30px 0 8px;counter-reset:toc}
.toc a{counter-increment:toc;display:flex;gap:10px;align-items:center;background:var(--panelS);border:1px solid var(--line2);color:var(--text);text-decoration:none;padding:10px 12px;font:700 13px var(--head);text-transform:uppercase;letter-spacing:.06em;
 clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);transition:.15s}
.toc a::before{content:counter(toc,decimal-leading-zero);font:400 11px var(--mono);color:var(--red)}
.toc a:hover,.toc a:focus{border-color:var(--cyan);color:var(--cyan);background:rgba(94,246,255,.07);outline:none}
.toc a:hover::before{color:var(--cyan)}

article{counter-reset:sec}
section{margin-top:72px;scroll-margin-top:70px;counter-increment:sec}
h2{position:relative;font:900 clamp(24px,4.2vw,38px)/1.1 var(--head);text-transform:uppercase;margin:0 0 18px;padding-bottom:10px;color:var(--text);border-bottom:1px solid var(--line)}
h2::before{content:"//" counter(sec,decimal-leading-zero) " ";color:var(--red);font:400 .5em var(--mono);vertical-align:middle;letter-spacing:.1em}
h2::after{content:"";position:absolute;left:0;bottom:-1px;width:120px;height:3px;background:var(--red);box-shadow:0 0 12px var(--red)}
h3{font:700 20px/1.25 var(--head);color:var(--y);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.02em}
h3 .en{color:var(--muted);font:400 12px var(--mono);margin-left:8px;text-transform:none;letter-spacing:.05em}

.card{position:relative;background:linear-gradient(180deg,rgba(255,95,86,.07),rgba(255,95,86,.02));border:1px solid var(--line);padding:8px 22px 18px;margin:18px 0;
 clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.card::before{content:"КВЕСТ";position:absolute;top:0;right:30px;font:400 10px var(--mono);letter-spacing:.2em;color:#000;background:var(--red);padding:2px 8px}
.card b{color:var(--red);font-weight:600}

table{width:100%;border-collapse:collapse;font-size:15px;background:var(--panelS);border:1px solid var(--line2)}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
th{font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#000;background:var(--red)}
td:first-child{color:var(--text);font-weight:600}
tbody tr:hover td{background:rgba(94,246,255,.06);color:var(--cyan)}
td b{color:var(--y)}
code{font-family:var(--mono);background:#000;color:var(--cyan);padding:1px 6px;border:1px solid rgba(94,246,255,.3)}
.todo{font:400 13px var(--mono);color:var(--cyan);border:1px dashed rgba(94,246,255,.45);padding:10px 12px;background:rgba(94,246,255,.04)}
.todo::before{content:"> ";}
.guess{font:400 11px var(--mono);color:#000;background:var(--y);padding:1px 6px;margin-left:4px;letter-spacing:.05em;text-transform:uppercase}
.src{color:var(--muted);font:400 12px/1.6 var(--mono)}
p.src{border-top:1px solid var(--line2);padding-top:10px}

.spoiler{position:relative;margin:10px 0 0;border:1px solid var(--line2);padding:2px 12px}
.spoiler-body{filter:blur(7px);user-select:none}
.spoiler.open .spoiler-body{filter:none;user-select:auto}
.spoiler-btn{position:absolute;inset:0;margin:auto;height:max-content;width:max-content;max-width:calc(100% - 16px);background:#000;color:var(--cyan);border:1px solid var(--cyan);padding:9px 16px;font:700 13px var(--head);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;box-shadow:0 0 16px rgba(94,246,255,.35)}
.spoiler-btn::before{content:"⚠ "}
.spoiler-btn:hover{background:var(--cyan);color:#000}
.spoiler.open .spoiler-btn{display:none}
ul{padding-left:0;list-style:none} li{margin:8px 0;padding-left:22px;position:relative}
li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;background:var(--red);clip-path:polygon(0 0,100% 50%,0 100%)}

.foot{max-width:980px;margin:80px auto 0;padding:24px 16px 32px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
.foot p:first-child{font-family:var(--mono);font-size:12px}
@media (max-width:560px){.top::after{display:none}.brand small{display:none}table{font-size:14px}th,td{padding:8px}.card{padding:8px 14px 14px}.card::before{right:24px}}
@media (prefers-reduced-motion:no-preference){h1{animation:flick 6s infinite}
 @keyframes flick{0%,96%,100%{opacity:1}97%{opacity:.55;transform:translateX(2px)}98%{opacity:1;transform:none}}}

/* ── «Всі разом» (owner 25.10): hero = cyberspace, content = neon menus, places (tarot, glamdocs) = world map ── */
html,body{overflow-x:clip}
article{position:relative}
/* cyberspace hero: wireframe floor, white-blue glow */
article::before{content:"";position:absolute;left:-30vw;right:-30vw;top:150px;height:440px;z-index:-1;pointer-events:none;
 background:linear-gradient(rgba(159,212,255,.32) 1px,transparent 1px) 0 0/60px 60px,linear-gradient(90deg,rgba(159,212,255,.32) 1px,transparent 1px) 0 0/60px 60px;
 transform:perspective(500px) rotateX(70deg);transform-origin:top;-webkit-mask-image:linear-gradient(transparent,#000 30%,transparent 95%);mask-image:linear-gradient(transparent,#000 30%,transparent 95%)}
article::after{content:"";position:absolute;left:-30vw;right:-30vw;top:-60px;height:640px;z-index:-2;pointer-events:none;
 background:radial-gradient(800px 420px at 50% 20%,rgba(120,170,255,.22),transparent 70%),
 linear-gradient(90deg,transparent 0 18%,rgba(159,212,255,.08) 18% 18.12%,transparent 18.12% 82%,rgba(180,140,255,.08) 82% 82.12%,transparent 82.12%)}
h1{color:#f2f8ff;text-shadow:0 0 6px #fff,0 0 22px #9fd4ff,0 0 60px rgba(120,170,255,.8),-3px 0 0 rgba(255,95,86,.55)}
h1::after{color:#9fd4ff}
.lead{background:rgba(4,8,18,.75);border-color:rgba(159,212,255,.18);border-left-color:#9fd4ff}

/* world-map sections */
#tarot,#glam{--mc:#4ed6e6;--my:#ffd23f;position:relative;padding:22px 20px 20px;border:1px solid rgba(78,214,230,.38);
 background-color:#081217;background-image:
  repeating-radial-gradient(circle at 85% 15%,transparent 0 34px,rgba(78,214,230,.08) 34px 35px),
  linear-gradient(rgba(78,214,230,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(78,214,230,.07) 1px,transparent 1px),
  linear-gradient(115deg,transparent 0 58%,rgba(78,214,230,.16) 58% 58.4%,transparent 58.4%);background-size:auto,64px 64px,64px 64px,auto}
#tarot::before,#glam::before{content:"МАПА СВІТУ · ШАР «ТАРО»";position:absolute;top:-1px;right:16px;transform:translateY(-50%);background:#081217;border:1px solid rgba(78,214,230,.38);
 color:var(--mc);font:400 10px var(--mono);letter-spacing:.2em;padding:3px 8px}
#glam::before{content:"МАПА СВІТУ · ШАР «ГЛАМАР»"}
#tarot h2,#glam h2{border-bottom-color:rgba(78,214,230,.38)}
#tarot h2::after,#glam h2::after{background:var(--my);box-shadow:0 0 12px var(--my)}
#tarot h2::before,#glam h2::before{content:"";display:inline-block;width:20px;height:26px;margin-right:12px;vertical-align:-3px;background:var(--my);clip-path:polygon(50% 100%,0 35%,0 0,100% 0,100% 35%);filter:drop-shadow(0 0 6px rgba(255,210,63,.6))}
#tarot table,#glam table{background:rgba(12,30,38,.85);border-color:rgba(78,214,230,.3)}
#tarot th,#glam th{background:rgba(78,214,230,.14);color:var(--mc)}
#tarot td,#glam td{border-bottom-color:rgba(78,214,230,.14)}
#tarot tbody tr:hover td,#glam tbody tr:hover td{background:rgba(255,210,63,.08);color:var(--my)}
#tarot .todo{color:var(--my);border-color:rgba(255,210,63,.5);background:rgba(255,210,63,.04)}
@media (max-width:560px){#tarot,#glam{padding:20px 12px 14px;margin-left:-4px;margin-right:-4px}}
