Horny Jail WIKI - Вклад [ru]

MediaWiki:Common.js

2026-08-25T20:29:40Z

MaintenanceScript: Do not strip TabberNeue tab styles inside #orb-content

/* MediaWiki:Common.js — Orbitalis Wiki
* This code runs on every wiki page.
* Paste this into MediaWiki:Common.js on the wiki (requires admin rights).
*
* Parallax space background that follows the mouse cursor,
* matching the in-game lobby style.
*/
(function () {
"use strict";

// Only activate on the main page (or everywhere — your choice)
var parallaxBg = document.getElementById("orbitalis-parallax-bg");
if (!parallaxBg) return; // no parallax container on this page

var nebulaEl = document.getElementById("parallax-nebula");
var starsSmallEl = document.getElementById("parallax-stars-small");
var starsBigEl = document.getElementById("parallax-stars-big");

// Disable parallax on diff/comparison and old revision pages
var params = new URLSearchParams(window.location.search);
if (
params.has("diff") ||
params.has("oldid") ||
params.get("action") === "historysubmit"
) {
var hideEls = [
parallaxBg,
nebulaEl,
starsSmallEl,
starsBigEl,
document.getElementById("orbitalis-vignette"),
];
for (var h = 0; h < hideEls.length; h++) {
if (hideEls[h]) hideEls[h].style.display = "none";
}
// Restore opaque background so diff/old revision is readable
document.body.style.background = "#060608";
var contentEl = document.getElementById("content");
if (contentEl) {
contentEl.style.background = "#14141a";
}
return;
}

// ---- Apply styles to the parallax elements ----------------------------
// We do it from JS because MediaWiki strips complex inline styles

// Background container
parallaxBg.style.cssText =
"position:fixed;top:0;left:0;width:100%;height:100%;z-index:-10;pointer-events:none;overflow:hidden;background:#060608;";

// Shared layer base
var layerBase =
"position:fixed;top:-50px;left:-50px;width:calc(100% + 100px);height:calc(100% + 100px);pointer-events:none;";

// Nebula
if (nebulaEl) {
nebulaEl.style.cssText =
layerBase +
"background:" +
"radial-gradient(ellipse at 70% 40%, rgba(30,50,80,0.4) 0%, transparent 50%)," +
"radial-gradient(ellipse at 85% 60%, rgba(50,30,60,0.3) 0%, transparent 45%)," +
"radial-gradient(ellipse at 60% 70%, rgba(20,40,70,0.35) 0%, transparent 55%);" +
"opacity:0.7;z-index:-9;";
}

// Small stars
if (starsSmallEl) {
starsSmallEl.style.cssText =
layerBase +
"background-image:" +
"radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8), transparent)," +
"radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.6), transparent)," +
"radial-gradient(1px 1px at 40% 10%, rgba(255,255,255,0.7), transparent)," +
"radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,0.5), transparent)," +
"radial-gradient(1px 1px at 70% 25%, rgba(255,255,255,0.8), transparent)," +
"radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,0.6), transparent)," +
"radial-gradient(1px 1px at 15% 60%, rgba(255,255,255,0.7), transparent)," +
"radial-gradient(1px 1px at 30% 75%, rgba(255,255,255,0.5), transparent)," +
"radial-gradient(1px 1px at 45% 85%, rgba(255,255,255,0.8), transparent)," +
"radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.6), transparent)," +
"radial-gradient(1px 1px at 75% 90%, rgba(255,255,255,0.7), transparent)," +
"radial-gradient(1px 1px at 90% 15%, rgba(255,255,255,0.5), transparent)," +
"radial-gradient(1px 1px at 5% 40%, rgba(255,255,255,0.6), transparent)," +
"radial-gradient(1px 1px at 20% 95%, rgba(255,255,255,0.7), transparent)," +
"radial-gradient(1px 1px at 35% 50%, rgba(255,255,255,0.5), transparent)," +
"radial-gradient(1px 1px at 50% 30%, rgba(255,255,255,0.8), transparent)," +
"radial-gradient(1px 1px at 65% 5%, rgba(255,255,255,0.6), transparent)," +
"radial-gradient(1px 1px at 80% 65%, rgba(255,255,255,0.7), transparent)," +
"radial-gradient(1px 1px at 95% 80%, rgba(255,255,255,0.5), transparent)," +
"radial-gradient(1px 1px at 12% 88%, rgba(255,255,255,0.6), transparent);" +
"background-size:200px 200px;opacity:0.8;z-index:-8;";
}

// Big stars
if (starsBigEl) {
starsBigEl.style.cssText =
layerBase +
"background-image:" +
"radial-gradient(2px 2px at 8% 15%, rgba(200,220,255,0.9), transparent)," +
"radial-gradient(2px 2px at 22% 42%, rgba(255,240,220,0.8), transparent)," +
"radial-gradient(2px 2px at 38% 8%, rgba(220,255,255,0.7), transparent)," +
"radial-gradient(2px 2px at 52% 68%, rgba(255,255,220,0.8), transparent)," +
"radial-gradient(2px 2px at 68% 32%, rgba(200,200,255,0.9), transparent)," +
"radial-gradient(2px 2px at 82% 78%, rgba(255,220,200,0.7), transparent)," +
"radial-gradient(2px 2px at 18% 55%, rgba(220,255,220,0.8), transparent)," +
"radial-gradient(2px 2px at 48% 92%, rgba(255,200,255,0.7), transparent)," +
"radial-gradient(2px 2px at 72% 18%, rgba(200,255,255,0.8), transparent)," +
"radial-gradient(2px 2px at 92% 45%, rgba(255,255,200,0.7), transparent);" +
"background-size:300px 300px;opacity:0.6;z-index:-7;";
}

// Vignette overlay
var vignetteEl = document.getElementById("orbitalis-vignette");
if (vignetteEl) {
vignetteEl.style.cssText =
"position:fixed;top:0;left:0;width:100%;height:100%;z-index:-6;pointer-events:none;" +
"background:radial-gradient(ellipse at center, rgba(6,6,8,0) 30%, rgba(6,6,8,0.6) 70%, #060608 100%);";
}

// ---- Override MediaWiki default backgrounds ----------------------------
document.body.style.background = "transparent";

var ids = ["mw-page-base", "mw-head-base"];
for (var i = 0; i < ids.length; i++) {
var el = document.getElementById(ids[i]);
if (el) el.style.background = "none";
}

var content = document.getElementById("content");
if (content) {
content.style.background = "none";
content.style.border = "none";
}

var bodyContent = document.getElementById("bodyContent");
if (bodyContent) {
bodyContent.style.position = "relative";
}

// ---- Mouse-tracking parallax animation --------------------------------
var targetX = 0,
targetY = 0;
var currentX = 0,
currentY = 0;

document.addEventListener("mousemove", function (e) {
var w = window.innerWidth || document.documentElement.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight;
targetX = (e.clientX / w - 0.5) * 2;
targetY = (e.clientY / h - 0.5) * 2;
});

function animate() {
currentX += (targetX - currentX) * 0.06;
currentY += (targetY - currentY) * 0.06;

if (nebulaEl) {
nebulaEl.style.left = currentX * 12 - 50 + "px";
nebulaEl.style.top = currentY * 12 - 50 + "px";
}
if (starsSmallEl) {
starsSmallEl.style.left = currentX * 25 - 50 + "px";
starsSmallEl.style.top = currentY * 25 - 50 + "px";
}
if (starsBigEl) {
starsBigEl.style.left = currentX * 40 - 50 + "px";
starsBigEl.style.top = currentY * 40 - 50 + "px";
}

requestAnimationFrame(animate);
}

animate();
})();

/* ---- Server online status + info ---- */
/* Queries /api/status.php on the same wiki host — which sends a UDP BYOND
* topic to localhost:41060 and returns JSON { players, map_name, chaos_level, ... }.
* No proxy needed: wiki and game server share the same machine.
*/
(function () {
"use strict";
var elOnline = document.getElementById("orb-online");
var elMap = document.getElementById("orb-map-val");
var elST = document.getElementById("orb-st-val");
if (!elOnline) return;

var STATUS_URL = "/api/status.json";
var REFRESH_MS = 30000;

function update() {
fetch(STATUS_URL)
.then(function (r) {
console.log("[Orbitalis Status] HTTP", r.status, r.url);
if (!r.ok) throw new Error("HTTP " + r.status);
return r.json();
})
.then(function (data) {
console.log("[Orbitalis Status] Data:", data);
var count = parseInt(data.players, 10);
if (isNaN(count)) throw new Error("bad data: players=" + data.players);

elOnline.textContent = count + " онлайн";
elOnline.style.color =
count > 0 ? "rgba(100,220,180,0.75)" : "rgba(100,220,180,0.35)";
elOnline.style.textShadow =
count > 0 ? "0 0 15px rgba(100,220,180,0.2)" : "none";

if (elMap && data.map_name) {
elMap.textContent = data.map_name;
elMap.style.color = "rgba(255,255,255,0.55)";
}
if (elST && data.chaos_level) {
elST.textContent = data.chaos_level;
elST.style.color = "rgba(255,255,255,0.55)";
}
})
.catch(function (err) {
console.error("[Orbitalis Status] Fetch failed:", err);
elOnline.textContent = "оффлайн";
elOnline.style.color = "rgba(255,120,120,0.5)";
elOnline.style.textShadow = "none";
if (elMap) elMap.textContent = "—";
if (elST) elST.textContent = "—";
});
}

update();
setInterval(update, REFRESH_MS);
})();

/* ---- Main page: interactive engine ---- */
/* All visual styling is in Common.css (CSS-first approach).
JS handles: nuclear strip for <a> tags, click handlers.
Safe to re-run on Citizen DOM updates. */
(function () {
"use strict";

function run() {
var orb = document.getElementById("orb-content");
if (!orb) return;

/* Nuclear strip: clear Citizen-applied backgrounds on <a> tags only */
var links = orb.querySelectorAll("a");
for (var i = 0; i < links.length; i++) {
var a = links[i];
if (a.classList.contains("tabber__tab") || a.closest(".tabber__header")) {
continue;
}
a.style.setProperty("background", "none", "important");
a.style.setProperty("background-color", "transparent", "important");
a.style.setProperty("background-image", "none", "important");
a.style.setProperty("box-shadow", "none", "important");
a.style.setProperty("border", "none", "important");
a.style.setProperty("padding", "0", "important");
a.style.setProperty("text-decoration", "none", "important");
}

/* Connect button — byond:// link */
var addr = document.getElementById("orb-addr");
if (addr && !addr._orbClick) {
addr._orbClick = true;
addr.addEventListener("click", function () {
window.location.href = "byond://45.141.208.222:41060";
});
}

/* Make entire card area clickable */
var cardIds = [
"orb-card-1",
"orb-card-2",
"orb-card-3",
"orb-card-4",
"orb-card-5",
"orb-card-6",
"orb-card-7",
"orb-card-8",
];
for (var j = 0; j < cardIds.length; j++) {
var card = document.getElementById(cardIds[j]);
if (card && !card._orbClick) {
card._orbClick = true;
(function (c) {
var link = c.querySelector("a");
if (link) {
c.addEventListener("click", function (ev) {
if (
ev.target.tagName !== "A" &&
(!ev.target.parentNode || ev.target.parentNode.tagName !== "A")
) {
link.click();
}
});
}
})(card);
}
}
}

/* Hook into multiple events — retry for Citizen's late DOM updates */
if (typeof mw !== "undefined" && mw.hook) {
mw.hook("wikipage.content").add(run);
}
document.addEventListener("DOMContentLoaded", run);
window.addEventListener("load", function () {
setTimeout(run, 50);
setTimeout(run, 500);
});
})();

// Переключение вкладок и классов "chaos-*".
mw.hook("wikipage.content").add(function ($root) {
$root.find(".hj-chaos-container").each(function () {
var $container = $(this);
var $buttons = $container.find(".hj-chaos-tab-button");
var $blocks = $container.find(".hj-chaos-block");

if (!$buttons.length || !$blocks.length) return;

var CHAOS_CLASSES = "chaos-overview chaos-calm chaos-medium chaos-high";

function activate(key, $btn) {
// активная кнопка
$buttons.removeClass("active");
$btn.addClass("active");

// активный блок
$blocks.removeClass("active").hide();
$blocks
.filter('[data-chaos="' + key + '"]')
.addClass("active")
.show();

// класс на контейнере для раскраски рамок/фона
$container.removeClass(CHAOS_CLASSES).addClass("chaos-" + key);
}

// Инициализация
var $activeBtn = $buttons.filter(".active").first();
if ($activeBtn.length) {
activate($activeBtn.data("chaos"), $activeBtn);
} else {
var $first = $buttons.first();
activate($first.data("chaos"), $first);
}

// Клики
$buttons.off("click.hjChaos").on("click.hjChaos", function () {
var $btn = $(this);
activate($btn.data("chaos"), $btn);
});
});
});

/* ---- Orbitalis custom TOC ---- */
/* Activates when the page contains <div id="orb-toc"></div> (or class="orb-toc").
Creates #orb-toc-sidebar directly in document.body so position:fixed
is never broken by skin containers with transform/will-change. */
(function () {
"use strict";

function initOrbToc() {
// Already built?
if (document.getElementById("orb-toc-sidebar")) return;

// Don't show in editor or other non-view actions
if (document.body.classList.contains("action-edit") ||
document.body.classList.contains("action-submit") ||
document.body.classList.contains("action-history")) return;

// Look for the opt-in marker
var marker =
document.getElementById("orb-toc") || document.querySelector(".orb-toc");
if (!marker) return;

// Find content root
var root =
document.querySelector(".mw-parser-output") ||
document.getElementById("mw-content-text") ||
document.getElementById("bodyContent");
if (!root) return;

// Scan ALL heading levels (h1 through h4)
var headings = root.querySelectorAll("h1, h2, h3, h4");
if (!headings.length) return;

var items = [];
for (var i = 0; i < headings.length; i++) {
var h = headings[i];

// Citizen skin: heading text in .mw-headline span
var headline = h.querySelector(".mw-headline");
var text = headline
? headline.textContent
: h.textContent
.replace(/\[\s*править[^\]]*\]/gi, "")
.replace(/\[edit[^\]]*\]/gi, "")
.trim();
if (!text) continue;

var id = headline ? headline.id : h.id;
if (!id) {
id = "orb-h-" + i;
if (headline) headline.id = id;
else h.id = id;
}

var tag = h.tagName.toLowerCase();
items.push({ id: id, text: text, tag: tag, el: h });
}

if (items.length < 2) return;

// --- Create sidebar in document.body ---
var sidebar = document.createElement("nav");
sidebar.id = "orb-toc-sidebar";
sidebar.setAttribute("aria-label", "Table of Contents");

var head = document.createElement("div");
head.className = "orb-toc-head";
head.textContent =
"\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435";
sidebar.appendChild(head);

var ul = document.createElement("ul");
for (var j = 0; j < items.length; j++) {
var item = items[j];
var li = document.createElement("li");
li.className = "orb-toc-" + item.tag;
li.setAttribute("data-target", item.id);

var a = document.createElement("a");
a.href = "#" + item.id;
a.textContent = item.text;

(function (targetId) {
a.addEventListener("click", function (e) {
var target = document.getElementById(targetId);
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: "smooth", block: "start" });
history.replaceState(null, "", "#" + targetId);
}
});
})(item.id);

li.appendChild(a);
ul.appendChild(li);
}
sidebar.appendChild(ul);

// Append to body - outside any Citizen container
document.body.appendChild(sidebar);

// --- Scroll spy ---
var allLi = ul.querySelectorAll("li");
var headingEls = [];
for (var k = 0; k < items.length; k++) {
headingEls.push(items[k].el);
}

var ticking = false;
function onScroll() {
if (ticking) return;
ticking = true;
requestAnimationFrame(function () {
ticking = false;
var current = -1;
for (var s = 0; s < headingEls.length; s++) {
if (headingEls[s].getBoundingClientRect().top <= 120) {
current = s;
}
}
for (var t = 0; t < allLi.length; t++) {
if (t === current) {
allLi[t].classList.add("orb-toc-active");
} else {
allLi[t].classList.remove("orb-toc-active");
}
}
});
}

window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
}

// Run on multiple hooks for skin compat
if (typeof mw !== "undefined" && mw.hook) {
mw.hook("wikipage.content").add(initOrbToc);
}
document.addEventListener("DOMContentLoaded", initOrbToc);
window.addEventListener("load", function () {
setTimeout(initOrbToc, 150);
});
})();

MediaWiki:Common.css

2026-08-25T20:29:39Z

MaintenanceScript: Do not strip TabberNeue tab padding inside #orb-content

@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap");

body {
font-family: "Comfortaa", cursive, sans-serif;
}

/* ================== СИСТЕМА ХАОСА: ТАБЫ И БЛОКИ ================== */

/* Контейнер */
.hj-chaos-container {
margin-bottom: 1.5em;
}

/* Ряд вкладок */
.hj-chaos-tabs {
display: flex;
border-radius: 6px 6px 0 0;
overflow: hidden;
}

/* Кнопки-вкладки как большие карточки */
.hj-chaos-tab-button {
flex: 1 1 0;
padding: 10px 14px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
background: #191919;
border: none;
position: relative;
}
.hj-chaos-tab-button:last-child {
border-right: none;
}

/* Заголовок/подзаголовок кнопки */
.hj-chaos-tab-title {
font-weight: bold;
font-size: 1em;
}
.hj-chaos-tab-desc {
font-size: 0.85em;
opacity: 0.9;
}

/* Базовые цвета вкладок (не активные) */
.hj-chaos-tab-button[data-chaos="overview"] {
background: #222833;
}
.hj-chaos-tab-button[data-chaos="calm"] {
background: #1e2b20;
}
.hj-chaos-tab-button[data-chaos="medium"] {
background: #2b2615;
}
.hj-chaos-tab-button[data-chaos="high"] {
background: #2b1818;
}
.hj-chaos-tab-button[data-chaos="storytellers"] {
background: #1f1c28;
}

/* Активные цвета (фон) */
.hj-chaos-tab-button.active[data-chaos="overview"] {
background: #2f3b4d;
}
.hj-chaos-tab-button.active[data-chaos="calm"] {
background: #234526;
}
.hj-chaos-tab-button.active[data-chaos="medium"] {
background: #5c4716;
}
.hj-chaos-tab-button.active[data-chaos="high"] {
background: #5c1f1f;
}
.hj-chaos-tab-button.active[data-chaos="storytellers"] {
background: #2a2238;
}

/* Глобальный ресет рамок у активной вкладки,
чтобы режимные правила не конфликтовали */
.hj-chaos-tab-button.active {
border: none;
border-bottom: none;
margin-bottom: 0;
}

/* Блок контента — без верхней границы, только бока + низ */
.hj-chaos-block {
display: none;
padding: 16px 18px;
border-style: solid;
border-width: 0 3px 3px; /* top=0, left/right/bottom=3px */
border-color: transparent;
border-radius: 0 0 6px 6px;
background: #111;
}
.hj-chaos-block.active {
display: block;
}

/* ------------------------------------------------------------------
OVERVIEW (СИНИЙ)
------------------------------------------------------------------ */

.hj-chaos-container.chaos-overview .hj-chaos-tabs {
border-bottom: none;
}

/* рамка вокруг активной вкладки */
.hj-chaos-container.chaos-overview
.hj-chaos-tab-button.active[data-chaos="overview"] {
border: 3px solid #4b6284;
border-bottom: none;
border-radius: 6px 6px 0 0;
margin-bottom: -3px; /* вкладка нависает над блоком */
z-index: 2;
}

/* рамка и фон блока */
.hj-chaos-container.chaos-overview .hj-chaos-block[data-chaos="overview"] {
border-color: #4b6284;
background: #2f3b4d;
}

/* нижняя линия у НЕактивных вкладок */
.hj-chaos-container.chaos-overview .hj-chaos-tab-button:not(.active) {
border-bottom: 3px solid #4b6284;
}

/* ------------------------------------------------------------------
CALM (ЗЕЛЁНЫЙ)
------------------------------------------------------------------ */

.hj-chaos-container.chaos-calm .hj-chaos-tabs {
border-bottom: none;
}

.hj-chaos-container.chaos-calm .hj-chaos-tab-button.active[data-chaos="calm"] {
border: 3px solid #3f7a47;
border-bottom: none;
border-radius: 6px 6px 0 0;
margin-bottom: -3px;
z-index: 2;
}

.hj-chaos-container.chaos-calm .hj-chaos-block[data-chaos="calm"] {
border-color: #3f7a47;
background: #234526;
}

.hj-chaos-container.chaos-calm .hj-chaos-tab-button:not(.active) {
border-bottom: 3px solid #3f7a47;
}

/* ------------------------------------------------------------------
MEDIUM (ЖЁЛТО-КОРИЧНЕВЫЙ)
------------------------------------------------------------------ */

.hj-chaos-container.chaos-medium .hj-chaos-tabs {
border-bottom: none;
}

.hj-chaos-container.chaos-medium
.hj-chaos-tab-button.active[data-chaos="medium"] {
border: 3px solid #c9982b;
border-bottom: none;
border-radius: 6px 6px 0 0;
margin-bottom: -3px;
z-index: 2;
}

.hj-chaos-container.chaos-medium .hj-chaos-block[data-chaos="medium"] {
border-color: #c9982b;
background: #5c4716;
}

.hj-chaos-container.chaos-medium .hj-chaos-tab-button:not(.active) {
border-bottom: 3px solid #c9982b;
}

/* ------------------------------------------------------------------
HIGH (КРАСНЫЙ)
------------------------------------------------------------------ */

.hj-chaos-container.chaos-high .hj-chaos-tabs {
border-bottom: none;
}

.hj-chaos-container.chaos-high .hj-chaos-tab-button.active[data-chaos="high"] {
border: 3px solid #c33a3a;
border-bottom: none;
border-radius: 6px 6px 0 0;
margin-bottom: -3px;
z-index: 2;
}

.hj-chaos-container.chaos-high .hj-chaos-block[data-chaos="high"] {
border-color: #c33a3a;
background: #5c1f1f;
}

.hj-chaos-container.chaos-high .hj-chaos-tab-button:not(.active) {
border-bottom: 3px solid #c33a3a;
}

/* ------------------------------------------------------------------
STORYTELLERS (ФИОЛЕТОВЫЙ)
------------------------------------------------------------------ */

.hj-chaos-container.chaos-storytellers .hj-chaos-tabs {
border-bottom: none;
}

.hj-chaos-container.chaos-storytellers
.hj-chaos-tab-button.active[data-chaos="storytellers"] {
border: 3px solid #6b5a8a;
border-bottom: none;
border-radius: 6px 6px 0 0;
margin-bottom: -3px;
z-index: 2;
}

.hj-chaos-container.chaos-storytellers
.hj-chaos-block[data-chaos="storytellers"] {
border-color: #6b5a8a;
background: #2a2238;
}

.hj-chaos-container.chaos-storytellers .hj-chaos-tab-button:not(.active) {
border-bottom: 3px solid #6b5a8a;
}

/* --- Шахматный макет для рассказчиков --- */
.hj-storyteller-row {
display: flex;
gap: 16px;
margin-bottom: 20px;
align-items: stretch;
}
.hj-storyteller-row.reverse {
flex-direction: row-reverse;
}

.hj-storyteller-card {
flex: 3;
padding: 18px 20px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.3);
}
.hj-storyteller-card h3 {
margin: 0 0 4px 0;
font-size: 1.3em;
}
.hj-storyteller-card .hj-st-subtitle {
font-size: 0.9em;
opacity: 0.7;
margin-bottom: 10px;
}
.hj-storyteller-card .hj-st-quote {
font-style: italic;
opacity: 0.8;
margin-bottom: 12px;
font-size: 0.95em;
}

.hj-storyteller-art {
flex: 2;
border-radius: 10px;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.08);
min-height: 280px;
position: relative;
}
/* Nuke every MW wrapper inside the art block */
.hj-storyteller-art *:not(img) {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
float: none !important;
overflow: hidden !important;
position: static !important;
pointer-events: none;
}
.hj-storyteller-art .thumbcaption,
.hj-storyteller-art .magnify {
display: none !important;
height: 0 !important;
}
.hj-storyteller-art img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
border: none !important;
border-radius: 0;
background: transparent !important;
}

/* Блоки параметров внутри карточки рассказчика */
.hj-st-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 12px;
}
.hj-st-stat {
padding: 8px 10px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
font-size: 0.9em;
}
.hj-st-stat b {
display: block;
font-size: 0.85em;
opacity: 0.6;
margin-bottom: 2px;
}

/* Полноширинные блоки деталей */
.hj-st-details {
margin-top: 12px;
padding: 12px 14px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.hj-st-details h4 {
margin: 0 0 6px 0;
font-size: 0.95em;
}
.hj-st-details ul {
margin: 4px 0 0 1.2em;
}
.hj-st-details li {
margin-bottom: 3px;
}

/* Мобилки */
@media (max-width: 800px) {
.hj-storyteller-row,
.hj-storyteller-row.reverse {
flex-direction: column;
}
.hj-storyteller-art {
min-height: 200px;
max-height: 300px;
}
.hj-st-stats {
grid-template-columns: 1fr;
}
}

/* ------------------------------------------------------------------ */

/* Оформление самих карточек */
.hj-rule-card {
padding: 14px 16px;
border-radius: 8px;
border: 1px solid #00000055;
background: rgba(
0,
0,
0,
0.22
); /* дефолтный фон, потом JS его подкрашивает */
box-shadow:
inset 0 1px 0 #ffffff10,
0 0 0 1px #00000022;
}

/* Заголовок внутри блока */
.hj-chaos-block h2 {
margin-top: 0;
}

/* Карточки сеткой */
.hj-rule-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 8px;
}
@media (max-width: 980px) {
.hj-rule-cards {
grid-template-columns: 1fr;
}
}

.hj-rule-card h3,
.hj-rule-card h4 {
margin: 0 0 0.4em 0;
}
.hj-rule-card p {
margin: 0 0 0.6em 0;
}
.hj-rule-card ul {
margin: 0.4em 0 0 1.2em;
}

/* Архив (как было) */
.hj-legacy {
margin-top: 20px;
padding: 0;
background: transparent;
border: 0;
}
.hj-legacy .wikitable {
background: #111;
color: inherit;
}

/* Убираем серый фон у всех миниатюр и одиночных картинок */
.thumbinner,
.thumb {
background: none !important;
border: none !important;
}

.inline-img {
background: none !important;
vertical-align: middle;
}

/* ===== Base dark theme overrides ===== */
html {
background: #060608 !important;
}

body {
background: transparent !important;
}

#mw-page-base {
background: none !important;
}

#mw-head-base {
background: none !important;
border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#content {
background: none !important;
border: none !important;
color: rgba(255, 255, 255, 0.8);
}

#bodyContent {
position: relative;
/* No z-index here — avoids creating a stacking context
that traps the parallax layers inside it */
}

/* ===== Parallax layers (structure only — visuals applied via JS) ===== */
#orbitalis-parallax-bg,
.orb-parallax-layer,
#orbitalis-vignette {
/* These divs are inserted via mainpage wikitext.
JS in Common.js applies the actual styles.
In case JS hasn't loaded yet, hide them to avoid layout issues. */
display: block;
height: 0;
overflow: hidden;
pointer-events: none;
}

/* ===== Wiki content link colours for dark theme ===== */
#content a,
#content a:visited {
color: rgba(130, 170, 255, 0.85);
}

#content a:hover {
color: rgba(170, 200, 255, 1);
}

/* ===== Main page: override Citizen skin link styles ===== */
/* CSS fallback — JS engine in Common.js also handles this via DOM */
/* TabberNeue tabs are <a class="tabber__tab">; keep their padding. */
#orb-content a:not(.tabber__tab),
#orb-content a:not(.tabber__tab):link,
#orb-content a:not(.tabber__tab):visited,
#orb-content a:not(.tabber__tab):hover,
#orb-content a:not(.tabber__tab):active,
#orb-content a:not(.tabber__tab):focus {
background: none !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: none !important;
border-bottom: none !important;
padding: 0 !important;
text-decoration: none !important;
outline: none !important;
}

#orb-content small {
display: block;
margin-top: 3px;
}
#orb-content .tabber__tab {
padding: 0.5em 0.75em !important;
outline: none !important;
text-decoration: none !important;
}
#orb-content .tabber__tab[aria-selected="true"] {
color: var(--color-progressive, #36c) !important;
}

[id^="orb-card-"] {
transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}

/* ===== Main page: Orbitalis visual design (CSS-first) ===== */

/* Description block */
#orb-desc {
border-left: 2px solid rgba(91, 141, 239, 0.2) !important;
}

/* Section titles */
#orb-title-docs {
color: rgba(91, 141, 239, 0.8) !important;
text-shadow: 0 0 25px rgba(91, 141, 239, 0.2) !important;
}
#orb-title-play {
color: rgba(180, 130, 255, 0.8) !important;
text-shadow: 0 0 25px rgba(180, 130, 255, 0.2) !important;
}
/* Decorative underline bars */
#orb-title-docs::after,
#orb-title-play::after {
content: "";
display: block;
width: 40px;
height: 1px;
margin-top: 10px;
}
#orb-title-docs::after {
background: rgba(91, 141, 239, 0.35);
box-shadow: 0 0 12px rgba(91, 141, 239, 0.12);
}
#orb-title-play::after {
background: rgba(180, 130, 255, 0.35);
box-shadow: 0 0 12px rgba(180, 130, 255, 0.12);
}

/* Doc cards — blue accent */
#orb-card-1 {
border-left: 2px solid rgba(91, 141, 239, 0.3) !important;
background: linear-gradient(
90deg,
rgba(91, 141, 239, 0.04) 0%,
transparent 70%
) !important;
border-radius: 0 4px 4px 0 !important;
cursor: pointer;
}
#orb-card-2 {
border-left: 2px solid rgba(91, 141, 239, 0.25) !important;
background: linear-gradient(
90deg,
rgba(91, 141, 239, 0.032) 0%,
transparent 70%
) !important;
border-radius: 0 4px 4px 0 !important;
cursor: pointer;
}
#orb-card-3 {
border-left: 2px solid rgba(91, 141, 239, 0.2) !important;
background: linear-gradient(
90deg,
rgba(91, 141, 239, 0.024) 0%,
transparent 70%
) !important;
border-radius: 0 4px 4px 0 !important;
cursor: pointer;
}
#orb-card-4 {
border-left: 2px solid rgba(91, 141, 239, 0.15) !important;
background: linear-gradient(
90deg,
rgba(91, 141, 239, 0.016) 0%,
transparent 70%
) !important;
border-radius: 0 4px 4px 0 !important;
cursor: pointer;
}

/* Play cards — purple accent */
#orb-card-5 {
border-left: 2px solid rgba(180, 130, 255, 0.3) !important;
background: linear-gradient(
90deg,
rgba(180, 130, 255, 0.04) 0%,
transparent 70%
) !important;
border-radius: 0 4px 4px 0 !important;
cursor: pointer;
}
#orb-card-6 {
border-left: 2px solid rgba(180, 130, 255, 0.25) !important;
background: linear-gradient(
90deg,
rgba(180, 130, 255, 0.032) 0%,
transparent 70%
) !important;
border-radius: 0 4px 4px 0 !important;
cursor: pointer;
}
#orb-card-7 {
border-left: 2px solid rgba(180, 130, 255, 0.2) !important;
background: linear-gradient(
90deg,
rgba(180, 130, 255, 0.024) 0%,
transparent 70%
) !important;
border-radius: 0 4px 4px 0 !important;
cursor: pointer;
}
#orb-card-8 {
border-left: 2px solid rgba(180, 130, 255, 0.15) !important;
background: linear-gradient(
90deg,
rgba(180, 130, 255, 0.016) 0%,
transparent 70%
) !important;
border-radius: 0 4px 4px 0 !important;
cursor: pointer;
}

/* Card hover — blue docs */
#orb-card-1:hover,
#orb-card-2:hover,
#orb-card-3:hover,
#orb-card-4:hover {
background: linear-gradient(
90deg,
rgba(91, 141, 239, 0.08) 0%,
rgba(91, 141, 239, 0.02) 60%,
transparent 100%
) !important;
border-left-color: rgba(91, 141, 239, 0.6) !important;
box-shadow:
inset 3px 0 20px -4px rgba(91, 141, 239, 0.15),
0 0 25px rgba(91, 141, 239, 0.04) !important;
}
/* Card hover — purple play */
#orb-card-5:hover,
#orb-card-6:hover,
#orb-card-7:hover,
#orb-card-8:hover {
background: linear-gradient(
90deg,
rgba(180, 130, 255, 0.08) 0%,
rgba(180, 130, 255, 0.02) 60%,
transparent 100%
) !important;
border-left-color: rgba(180, 130, 255, 0.6) !important;
box-shadow:
inset 3px 0 20px -4px rgba(180, 130, 255, 0.15),
0 0 25px rgba(180, 130, 255, 0.04) !important;
}

/* Server block */
#orb-server {
border-left: 2px solid rgba(100, 220, 180, 0.3) !important;
border-radius: 0 4px 4px 0 !important;
}
#orb-online {
color: rgba(100, 220, 180, 0.55);
text-shadow: 0 0 15px rgba(100, 220, 180, 0.15);
}

/* Buttons */
#orb-addr {
border: 1px solid rgba(100, 220, 180, 0.25) !important;
border-radius: 4px !important;
background: rgba(100, 220, 180, 0.06) !important;
color: rgba(100, 220, 180, 0.7) !important;
cursor: pointer !important;
}
#orb-addr:hover {
background: rgba(100, 220, 180, 0.12) !important;
border-color: rgba(100, 220, 180, 0.4) !important;
}
#orb-btn-proxy {
border: 1px solid rgba(100, 220, 180, 0.2) !important;
border-radius: 4px !important;
background: rgba(100, 220, 180, 0.04) !important;
}
#orb-btn-proxy:hover {
background: rgba(100, 220, 180, 0.1) !important;
border-color: rgba(100, 220, 180, 0.35) !important;
}
#orb-btn-byond {
border: 1px solid rgba(255, 255, 255, 0.05) !important;
border-radius: 4px !important;
background: rgba(255, 255, 255, 0.015) !important;
}

/* Footer */
#orb-footer {
border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* ===== Heading styles ===== */
#content h1,
#content h2,
#content h3,
#content h4 {
color: rgba(255, 255, 255, 0.85);
border-bottom-color: rgba(255, 255, 255, 0.1);
}

#firstHeading {
color: rgba(255, 255, 255, 0.9);
}

/* ===== Navigation / sidebar dark overrides ===== */
#mw-panel .portal h3 {
color: rgba(255, 255, 255, 0.5) !important;
}

#mw-panel .portal .body a {
color: rgba(200, 200, 200, 0.7) !important;
}

#mw-panel .portal .body a:hover {
color: rgba(255, 255, 255, 0.95) !important;
}

/* ===== Top navigation bar ===== */
#mw-head a {
color: rgba(200, 200, 200, 0.7) !important;
}

#mw-head a:hover {
color: rgba(255, 255, 255, 0.95) !important;
}

/* ===== Page action tabs (Edit, View source, History, etc.) ===== */
/* Vector skin */
.vector-menu-tabs li a,
.vector-menu-tabs li a:visited,
#p-views li a,
#p-cactions li a,
#p-namespaces li a {
color: rgba(200, 200, 200, 0.7) !important;
}

.vector-menu-tabs li a:hover,
#p-views li a:hover,
#p-cactions li a:hover,
#p-namespaces li a:hover {
color: rgba(255, 255, 255, 0.95) !important;
}

.vector-menu-tabs li.selected a,
#p-views li.selected a,
#p-namespaces li.selected a {
color: rgba(255, 255, 255, 0.9) !important;
}

/* Vector tab underline/border */
.vector-menu-tabs li {
background: none !important;
}

.vector-menu-tabs li.selected {
background: none !important;
border-bottom-color: rgba(140, 180, 255, 0.6) !important;
}

/* Citizen skin page actions */
.citizen-header,
.citizen-page-header {
background: transparent !important;
}

.page-actions a,
.page-actions button,
.citizen-page-heading__actions a,
.citizen-page-heading__actions button {
color: rgba(200, 200, 200, 0.7) !important;
}

.page-actions a:hover,
.page-actions button:hover,
.citizen-page-heading__actions a:hover,
.citizen-page-heading__actions button:hover {
color: rgba(255, 255, 255, 0.95) !important;
}

/* ===== Section edit links [edit] ===== */
.mw-editsection,
.mw-editsection a,
.mw-editsection-bracket {
color: rgba(140, 180, 255, 0.5) !important;
}

.mw-editsection a:hover {
color: rgba(180, 210, 255, 0.9) !important;
}

/* ===== Dropdown menus / portlets (More, Tools, etc.) ===== */
.vector-menu-content,
.vector-menu-content ul,
#p-cactions .vector-menu-content,
.mw-portlet .mw-portlet-body {
background: #14141a !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}

.vector-menu-content li a,
.mw-portlet .mw-portlet-body a {
color: rgba(200, 200, 200, 0.7) !important;
}

.vector-menu-content li a:hover,
.mw-portlet .mw-portlet-body a:hover {
color: rgba(255, 255, 255, 0.95) !important;
background: rgba(255, 255, 255, 0.06) !important;
}

/* ===== Citizen skin sidebar ===== */
.citizen-drawer,
.citizen-drawer__content,
.citizen-menu__card {
background: #14141a !important;
color: rgba(255, 255, 255, 0.7) !important;
}

.citizen-menu__card a {
color: rgba(200, 200, 200, 0.7) !important;
}

.citizen-menu__card a:hover {
color: rgba(255, 255, 255, 0.95) !important;
}

/* Citizen top header bar */
.citizen-header__logo,
.citizen-header__inner {
color: rgba(255, 255, 255, 0.7) !important;
}

/* ===== Notifications / user menu ===== */
#pt-notifications-alert a,
#pt-notifications-notice a,
#p-personal li a,
.mw-header-notifications a {
color: rgba(200, 200, 200, 0.7) !important;
}

#p-personal li a:hover,
.mw-header-notifications a:hover {
color: rgba(255, 255, 255, 0.95) !important;
}

/* ===== Edit page / form elements ===== */
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
select {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
color: rgba(255, 255, 255, 0.85) !important;
}

/* Edit toolbar */
.oo-ui-toolbar-bar {
background: #14141a !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}

.oo-ui-toolbar-bar .oo-ui-buttonElement-button {
color: rgba(200, 200, 200, 0.7) !important;
}

/* ===== Diff / special pages ===== */
.diff-context {
background: rgba(255, 255, 255, 0.03) !important;
color: rgba(255, 255, 255, 0.7) !important;
}

.diff-addedline {
background: rgba(50, 120, 50, 0.15) !important;
}

.diff-deletedline {
background: rgba(120, 50, 50, 0.15) !important;
}

/* ===== Tables (wikitable) ===== */
.wikitable {
background: rgba(255, 255, 255, 0.03) !important;
color: rgba(255, 255, 255, 0.8) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
}

.wikitable th {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
color: rgba(255, 255, 255, 0.85) !important;
}

.wikitable td {
border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ===== Infobox / messagebox ===== */
.mbox-small,
.ambox,
.tmbox,
.ombox,
.cmbox,
.fmbox {
background: rgba(255, 255, 255, 0.04) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: rgba(255, 255, 255, 0.7) !important;
}

/* ===== Search box ===== */
#simpleSearch {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
}

#searchInput {
color: rgba(255, 255, 255, 0.8) !important;
}

/* ===== Footer ===== */
#footer {
color: rgba(255, 255, 255, 0.3);
border-top-color: rgba(255, 255, 255, 0.08) !important;
}

#footer a {
color: rgba(140, 180, 255, 0.6) !important;
}

/* ===== Category links ===== */
#catlinks {
background: rgba(255, 255, 255, 0.03) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ===== Table of Contents (native fallback) ===== */
#toc,
.toc {
background: rgba(255, 255, 255, 0.04) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ===== Orbitalis custom TOC ===== */
/* Opt-in: add <div id="orb-toc"></div> to page wikitext to activate.
JS creates #orb-toc-sidebar in document.body (outside any skin container). */

/* Hide the marker div */
#orb-toc {
display: none !important;
}

/* The actual sidebar (appended to body by JS) */
#orb-toc-sidebar {
position: fixed;
left: 0;
top: 56px;
width: 220px;
max-height: calc(100vh - 72px);
overflow-y: auto;
overflow-x: hidden;
z-index: 200;
background: transparent;
border-right: none;
padding: 20px 12px 20px 16px;
pointer-events: auto;
font-family: "Comfortaa", sans-serif;
font-size: 0.82em;
line-height: 1.45;
transition: opacity 0.3s ease;
}

/* Title */
#orb-toc-sidebar .orb-toc-head {
display: block;
text-align: center;
color: rgba(255, 255, 255, 0.85);
font-size: 0.72em;
font-weight: 600;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#orb-toc-sidebar .orb-toc-head::before {
display: none;
}

/* List reset */
#orb-toc-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}

/* All items */
#orb-toc-sidebar li {
margin: 0;
padding: 0;
}

#orb-toc-sidebar li a {
display: block;
padding: 5px 0 5px 12px;
color: rgba(255, 255, 255, 0.45);
text-decoration: none !important;
transition:
color 0.2s,
background 0.2s;
background: none !important;
box-shadow: none !important;
}

#orb-toc-sidebar li a:hover {
color: rgba(255, 255, 255, 0.92);
background: rgba(91, 141, 239, 0.04) !important;
}

/* Active section (works for all heading levels) */
#orb-toc-sidebar li.orb-toc-active > a {
color: rgba(140, 180, 255, 0.95);
background: rgba(91, 141, 239, 0.06) !important;
}

/* h2 (sub-section under h1) */
#orb-toc-sidebar li.orb-toc-h2 a {
padding-left: 12px;
}

/* h3 indent */
#orb-toc-sidebar li.orb-toc-h3 a {
padding-left: 24px;
font-size: 0.92em;
color: rgba(255, 255, 255, 0.35);
}

#orb-toc-sidebar li.orb-toc-h3.orb-toc-active > a {
color: rgba(140, 180, 255, 0.95);
}

/* h4 indent */
#orb-toc-sidebar li.orb-toc-h4 a {
padding-left: 36px;
font-size: 0.85em;
color: rgba(255, 255, 255, 0.28);
}

#orb-toc-sidebar li.orb-toc-h4.orb-toc-active > a {
color: rgba(140, 180, 255, 0.95);
}

/* Custom scrollbar */
#orb-toc-sidebar::-webkit-scrollbar {
width: 3px;
}
#orb-toc-sidebar::-webkit-scrollbar-track {
background: transparent;
}
#orb-toc-sidebar::-webkit-scrollbar-thumb {
background: rgba(91, 141, 239, 0.15);
border-radius: 2px;
}

/* Mobile: hide fixed sidebar */
@media (max-width: 1100px) {
#orb-toc-sidebar {
display: none !important;
}
}