/* ==========================================================================
   GoodTimes presentation - public page
   ========================================================================== */
/* fontul găzduit pe server (Roboto Slab, licență Apache 2.0): două grosimi acoperă tot textul */
@font-face { font-family: 'Roboto Slab'; src: url(../fonts/roboto-slab-400.woff2) format('woff2'); font-weight: 100 550; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto Slab'; src: url(../fonts/roboto-slab-700.woff2) format('woff2'); font-weight: 551 900; font-style: normal; font-display: swap; }

:root {
	--bg: #110b08;
	--paper: #241912;
	--paper-hi: #33241a;
	--ink: #e8dac2;
	--ink-soft: #c2ad8f;
	--muted: #8f7a62;
	--gold: #d6a656;
	--gold-hi: #f6dc9c;
	--gold-dim: #7a5d33;
	--red: #c0392b;
	--red-deep: #6d1b14;
	--green: #9fe08a;
	--line: rgba(214, 166, 86, .28);
	--side-w: 272px;
	--col-w: 820px;
	--top-h: 58px;
	--f-title: 'Roboto Slab', Georgia, serif;
	--f-body: 'Roboto Slab', Georgia, serif;
	--f-ui: system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 12px); }
body {
	margin: 0; background: var(--bg); color: var(--ink);
	font: 400 16.5px/1.7 var(--f-body);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--gold-hi); }
p { margin: 0 0 .9em; }
strong { color: var(--gold-hi); font-weight: 600; }
mark { background: none; color: #ff8a5c; font-weight: 600; }
button { font: inherit; }

/* ---------------------------------------------------------------- backdrop */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.backdrop-img {
	position: absolute; inset: -20px; background: center/cover no-repeat;
	filter: blur(3px) saturate(.75) brightness(.42); transition: opacity 1.2s ease;
}
.backdrop-img.next { opacity: 0; }
.backdrop::after {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(ellipse at 60% 40%, transparent 0, rgba(17, 11, 8, .55) 55%, rgba(17, 11, 8, .92) 100%);
}
.embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* ---------------------------------------------------------------- sidebar */
.side {
	position: fixed; z-index: 30; top: 0; left: 0; bottom: 0; width: var(--side-w);
	display: flex; flex-direction: column;
	background: linear-gradient(90deg, rgba(14, 9, 6, .97), rgba(22, 15, 10, .95)), url(../img/paper.webp);
	border-right: 1px solid var(--line);
	box-shadow: 6px 0 30px rgba(0, 0, 0, .5);
}
.side-logo { display: block; padding: 22px 26px 14px; text-align: center; text-decoration: none; }
.side-logo img { max-height: 74px; width: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .7)); }
.side-logo span { font: 700 26px/1.1 var(--f-title); color: var(--gold); letter-spacing: .04em; }
.side-search {
	display: flex; align-items: center; gap: 8px; margin: 4px 18px 10px; padding: 0 12px; height: 38px;
	border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .35);
}
.side-search svg { width: 16px; fill: var(--muted); flex: none; }
.side-search input {
	width: 100%; border: 0; background: none; color: var(--ink); outline: none;
	font: 500 13px var(--f-title); letter-spacing: .06em;
}
.side-search input::placeholder { color: var(--muted); text-transform: uppercase; }
.side-search:focus-within { border-color: var(--gold-dim); }

.side-nav { flex: 1; overflow-y: auto; padding: 4px 10px 16px; scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent; }
.nav-group + .nav-group { margin-top: 4px; }
.nav-cat {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 10px 10px 8px; border: 0; background: none; cursor: pointer;
	color: var(--gold); font: 700 12px var(--f-title); letter-spacing: .14em; text-transform: uppercase; text-align: left;
}
.nav-cat i { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-top: -4px; }
.nav-group:not(.open) .nav-cat i { transform: rotate(-45deg); margin-top: 0; }
.nav-group ul { list-style: none; margin: 0; padding: 0 0 4px; }
.nav-group:not(.open) ul { display: none; }
.side-nav a {
	display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 12px; border-radius: 6px;
	color: var(--ink-soft); text-decoration: none; font-size: 16px; line-height: 1.25;
	border-left: 2px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.side-nav a:hover { color: var(--ink); background: rgba(214, 166, 86, .07); }
.side-nav a.active { color: var(--gold-hi); background: linear-gradient(90deg, rgba(214, 166, 86, .16), transparent); border-left-color: var(--gold); }
.nav-seal {
	flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px;
	background: var(--red-deep); color: #f3c9a0; font: 600 12px/1 serif; box-shadow: inset 0 0 0 1px rgba(255, 180, 120, .25);
}
.side-nav a.active .nav-seal { background: var(--red); color: #fff3df; }
.nav-empty { padding: 10px 14px; color: var(--muted); font-style: italic; }
.side-cta { padding: 14px 18px 20px; display: grid; gap: 8px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- top bar */
.topbar {
	position: fixed; z-index: 25; top: 0; right: 0; left: var(--side-w); height: var(--top-h);
	display: flex; align-items: center; justify-content: space-between; padding: 0 22px;
	background: linear-gradient(180deg, rgba(14, 9, 6, .85), rgba(14, 9, 6, 0));
	pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.top-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.top-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .45); }
.top-icon svg { width: 20px; fill: var(--ink-soft); }
.top-icon:hover svg { fill: var(--gold-hi); }
.menu-btn { display: none; }

.lang { position: relative; }
.lang-btn {
	display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; cursor: pointer;
	border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .45); color: var(--ink);
	font: 600 13px var(--f-title); letter-spacing: .08em;
}
.lang img, .lang-menu img { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.lang-menu {
	position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; padding: 6px;
	background: #1a120c; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
	display: none;
}
.lang.open .lang-menu { display: block; }
.lang-menu a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; color: var(--ink-soft); text-decoration: none; font-size: 16px; border-radius: 6px; }
.lang-menu a:hover, .lang-menu a.active { background: rgba(214, 166, 86, .1); color: var(--gold-hi); }

/* ---------------------------------------------------------------- content column */
.col {
	position: relative; z-index: 2; margin-left: var(--side-w); padding: 0 24px;
}
.col::before {
	/* panoul central: fundal închis, curat, cu margini drepte și o linie aurie discretă pe laterale */
	content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%;
	width: min(100%, calc(var(--col-w) + 96px)); transform: translateX(-50%); /* exact cât poza de început (.hero) */
	background: linear-gradient(180deg, rgba(20, 14, 10, .96), rgba(13, 9, 7, .97));
	border-left: 1px solid rgba(214, 163, 90, .28); border-right: 1px solid rgba(214, 163, 90, .28);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 90px rgba(0, 0, 0, .85);
}
.sec { max-width: var(--col-w); margin: 0 auto; padding: 46px 0 26px; }
.sec + .sec { border-top: 0; }
.blk + .blk { margin-top: 30px; }

/* reveal on scroll (only when JS runs) */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- ornaments */
.orn { display: flex; align-items: center; justify-content: center; gap: 10px; }
.orn i { flex: 1; max-width: 160px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.orn i:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.orn b { width: 9px; height: 9px; border: 1.5px solid var(--gold); transform: rotate(45deg); position: relative; }
.orn b::after { content: ''; position: absolute; inset: 2px; background: var(--red); }
.orn-divider { margin: 10px 0; }

/* ---------------------------------------------------------------- scene (in-game background + layers) */
.scene {
	/* a fixed aspect ratio: layers (in % of the height) keep their place and size on any screen */
	position: relative; aspect-ratio: 16 / 10; margin: 0 -20px; isolation: isolate;
	/* the mask already hides layers past the sides; clip them so they add no page-wide horizontal scroll */
	overflow-x: clip;
	/* margini laterale estompate fin; partea de jos se topește în cardul de text */
	-webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, #000 78%, transparent);
	-webkit-mask-composite: source-in;
	mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, #000 78%, transparent);
	mask-composite: intersect;
}
.scene-lg { aspect-ratio: 4 / 3; }
.scene-sm { aspect-ratio: 2 / 1; }
.scene-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.scene-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tone-painted .scene-bg img { filter: blur(2.6px) saturate(.6) brightness(.46) sepia(.38) contrast(1.08); transform: scale(1.04); }
.tone-dark .scene-bg img { filter: blur(2px) saturate(.6) brightness(.38); transform: scale(1.03); }
.scene-bg::after {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(ellipse 80% 75% at 50% 40%, transparent 30%, rgba(17, 11, 8, .55) 100%),
		linear-gradient(180deg, rgba(17, 11, 8, .25), transparent 25%, transparent 62%, rgba(20, 13, 9, .92) 100%);
}
.scene-layer { position: absolute; display: flex; align-items: flex-end; justify-content: center; transform-origin: 50% 100%; pointer-events: none; }
.scene-layer img { height: 100%; width: auto; max-width: none; display: block; }
.layer-figure img { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); }
.layer-glow img { filter: drop-shadow(0 0 16px rgba(255, 190, 90, .45)) drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); }
/* drop-shadow follows the alpha: windows with transparent parts (side buttons) get no box around them */
.layer-window img { filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .75)); }

/* ---------------------------------------------------------------- text card (under a scene) */
.tcard {
	position: relative; padding: 36px 52px 32px;
	background: linear-gradient(180deg, rgba(30, 21, 15, .96), rgba(19, 13, 10, .97));
	border: 1px solid rgba(214, 163, 90, .24); border-radius: 6px;
	box-shadow: inset 0 1px 0 rgba(255, 220, 160, .07), 0 14px 36px rgba(0, 0, 0, .5);
}
/* cardul de text stă sub imagine, nu peste ea (imaginea se estompează jos în fundal) */
.blk-scene + .blk-card { position: relative; z-index: 3; margin-top: 18px; }
.tcard-title {
	display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; padding-bottom: 14px;
	font: 700 26px/1.25 var(--f-title); color: #f0c97a;
	background: linear-gradient(90deg, rgba(214, 166, 86, .85), rgba(214, 166, 86, .15)) 0 100%/100% 1px no-repeat;
}
.tcard-kicker { font: 700 24px/1 var(--f-title); color: #e2533c; text-shadow: 0 0 14px rgba(255, 70, 30, .55); }
.tcard-text { color: #e7c58c; font-size: 16.5px; line-height: 1.75; }
.tcard-text p { margin: 0 0 .7em; }
.tcard-text p:last-child { margin-bottom: 0; }
.tcard-text strong { color: #fff4dc; font-weight: 600; }
.tcard.align-center .tcard-text { text-align: center; }
.tcard-points { margin-top: 16px; }
.tcard-points li { color: #dcb985; }
.tcard-items { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(214, 166, 86, .28); }
.bigslot {
	display: grid; place-items: center; min-width: 46px; min-height: 46px; padding: 5px;
	background: radial-gradient(ellipse at 50% 30%, rgba(214, 163, 90, .12), rgba(0, 0, 0, .35) 75%);
	border: 1px solid rgba(214, 163, 90, .3); border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
	transition: transform .15s, border-color .15s, box-shadow .15s;
}
/* .it (item link style) must not override the slot layout: the icon sits in the centre */
.bigslot.it, .slot.it, .stage-item.it, .card-item.it { display: grid; place-items: center; gap: 0; }
/* icons 1.5x; tall ones (2-3 cells) keep their proportions, capped in height */
.bigslot.it img { width: 36px; height: auto; max-height: 78px; object-fit: contain; }
.bigslot:hover, .bigslot:focus { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .45), 0 0 12px rgba(214, 163, 90, .25); }
/* ++advantage++ and !!restriction!! in texts */
.good { color: #93d46c; }
.bad { color: #ff6d58; }

/* ---------------------------------------------------------------- heading */
.heading { display: flex; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.heading h2 {
	margin: 0; font: 700 clamp(26px, 3.4vw, 38px)/1.15 var(--f-title); letter-spacing: .03em;
	background: linear-gradient(180deg, var(--gold-hi) 20%, var(--gold) 60%, #9c6d2c);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7));
}
.orn-title { flex: 1; max-width: 170px; gap: 6px; }
.orn-title i { max-width: none; }
.orn-title.flip i { background: linear-gradient(90deg, var(--gold), transparent); }
.orn-title:not(.flip) i { background: linear-gradient(90deg, transparent, var(--gold)); }
.heading-sub { max-width: 680px; margin: 12px auto 0; text-align: center; color: var(--ink-soft); font-size: 19px; font-style: italic; }

/* ---------------------------------------------------------------- plates (text panels) */
.plate {
	position: relative; padding: 34px 46px 28px;
	background: linear-gradient(180deg, rgba(30, 21, 15, .96), rgba(19, 13, 10, .97));
	border: 1px solid rgba(214, 163, 90, .24); border-radius: 6px;
	box-shadow: inset 0 1px 0 rgba(255, 220, 160, .07), 0 14px 36px rgba(0, 0, 0, .5);
}
.plate p:last-child { margin-bottom: 0; }
.plate-title { margin: 0 0 12px; font: 700 22px/1.25 var(--f-title); color: var(--gold-hi); letter-spacing: .02em; }
.kicker {
	display: inline-block; margin-right: 8px; padding: 2px 8px 1px; vertical-align: 3px;
	background: var(--red-deep); color: #ffd9b0; font: 700 12px/1.5 var(--f-title); letter-spacing: .12em; text-transform: uppercase;
	box-shadow: inset 0 0 0 1px rgba(255, 170, 110, .3);
}
.points { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.points li { position: relative; padding-left: 24px; color: var(--ink-soft); }
.points li::before {
	content: ''; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px;
	background: var(--red); transform: rotate(45deg); box-shadow: 0 0 0 2px rgba(214, 166, 86, .35);
}
.points strong { margin-right: 6px; }
.points strong::after { content: ' -'; color: var(--muted); font-weight: 400; }
.points li strong:only-child::after { content: ''; }

/* ---------------------------------------------------------------- images */
figure { margin: 0; }
.img-vignette img {
	-webkit-mask: radial-gradient(ellipse closest-side, #000 62%, transparent 100%); mask: radial-gradient(ellipse closest-side, #000 62%, transparent 100%);
}
.img-brush img { -webkit-mask: url(../img/brush-mask.png) center/100% 100% no-repeat; mask: url(../img/brush-mask.png) center/100% 100% no-repeat; }
.img-frame img { border: 1px solid var(--gold-dim); outline: 1px solid rgba(214, 166, 86, .25); outline-offset: 4px; box-shadow: 0 14px 34px rgba(0, 0, 0, .7); }
.img-plain img, .img-frame img, .img-brush img, .img-vignette img { display: block; width: auto; max-width: 100%; margin: 0 auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); }
/* a tall, narrow screenshot must not grow to the full column width */
.feature-img img, .tab-panel figure img { max-height: 520px; object-fit: contain; }
.feature.image-top .feature-img img { max-height: 600px; }

/* ---------------------------------------------------------------- feature */
.feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: center; }
.feature.image-right { grid-template-columns: 1fr 1.15fr; }
.feature.image-right .feature-img { order: 2; }
.feature.image-top, .feature.no-image { grid-template-columns: 1fr; }
.feature.image-top .feature-img { max-width: 820px; margin: 0 auto; }
.feature.image-top .feature-body { margin-top: -30px; }
.feature.no-image .feature-body { max-width: 780px; margin: 0 auto; }

/* ---------------------------------------------------------------- items, slots, chips */
.it { display: inline-flex; align-items: center; gap: 6px; cursor: help; color: var(--gold-hi); white-space: nowrap; outline: none; }
.it img { width: 24px; height: auto; max-height: 48px; image-rendering: auto; vertical-align: middle; }
.it > span { border-bottom: 1px dotted var(--gold-dim); }
.it:hover > span, .it:focus > span { color: #fff; border-bottom-color: var(--gold); }
.it-missing { color: var(--muted); }

.slots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.slots-inline { justify-content: flex-start; margin-top: 16px; }
.slot, .stage-item, .card-item {
	display: grid; place-items: center; width: 44px; min-height: 44px; padding: 4px;
	background: linear-gradient(145deg, #1a120c, #0d0805); border: 1px solid #4b3a26;
	box-shadow: inset 0 0 0 1px #000, inset 0 0 10px rgba(0, 0, 0, .8); border-radius: 8px; transition: border-color .15s, transform .15s;
}
.slot.it img, .stage-item.it img, .card-item.it img { width: 32px; height: auto; max-height: 64px; object-fit: contain; }
.slot:hover, .slot:focus { border-color: var(--gold); transform: translateY(-1px); }
.slot-wrap { position: relative; }
.slot-wrap em { position: absolute; right: 3px; bottom: 1px; font: 600 12px var(--f-body); color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; font-style: normal; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
	display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px 5px 8px;
	border: 1px solid #5a4329; border-radius: 30px; background: rgba(10, 6, 4, .55);
}
.chip .it > span { border: 0; color: var(--ink); }
.chip em { color: var(--muted); font-style: normal; }
.chip:hover { border-color: var(--gold-dim); background: rgba(214, 166, 86, .08); }

.item-list { display: grid; gap: 8px; max-width: 760px; margin: 0 auto; }
.item-row { display: flex; gap: 14px; align-items: center; padding: 10px 14px; background: rgba(0, 0, 0, .28); border-left: 2px solid var(--gold-dim); }
.item-row b { display: block; color: var(--gold-hi); font-weight: 600; }
.item-row span { color: var(--ink-soft); font-size: 16px; }

.sub-title { margin: 0 0 14px; text-align: center; font: 700 15px var(--f-title); color: var(--gold); letter-spacing: .16em; text-transform: uppercase; }
.note { margin: 14px auto 0; max-width: 700px; text-align: center; color: var(--muted); font-style: italic; font-size: 16px; }

/* ---------------------------------------------------------------- stages */
.stages { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 0; position: relative; }
.stage {
	position: relative; padding: 20px 10px 16px; text-align: center;
	background: linear-gradient(180deg, rgba(255, 220, 160, .07), rgba(0, 0, 0, .3));
	border: 1px solid #4b3a26; border-left-width: 0;
}
.stage:first-child { border-left-width: 1px; }
.stage:not(:last-child)::after {
	content: ''; position: absolute; z-index: 1; right: -9px; top: 38px; width: 16px; height: 16px;
	background: var(--paper); border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); transform: rotate(45deg);
}
.stage-icon { display: grid; place-items: center; min-height: 52px; }
.stage-icon img { max-height: 64px; width: auto; }
.stage-num { font: 700 26px var(--f-title); color: var(--gold); }
.stage b { display: block; margin-top: 8px; font: 700 15px var(--f-title); color: var(--gold-hi); letter-spacing: .06em; text-transform: uppercase; }
.stage span { color: var(--ink-soft); font-size: 15px; }

/* ---------------------------------------------------------------- table */
.table-wrap { overflow-x: auto; }
.gt-table { width: 100%; border-collapse: collapse; font-size: 16px; background: rgba(0, 0, 0, .3); }
.gt-table th {
	padding: 10px 12px; font: 700 12px var(--f-title); letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
	background: linear-gradient(180deg, rgba(214, 166, 86, .16), rgba(214, 166, 86, .05)); border-bottom: 1px solid var(--gold-dim);
}
.gt-table td { padding: 8px 12px; border-bottom: 1px solid rgba(214, 166, 86, .12); color: var(--ink-soft); vertical-align: middle; }
.gt-table tr:hover td { background: rgba(214, 166, 86, .05); }
.a-left { text-align: left; } .a-center { text-align: center; } .a-right { text-align: right; }
/* "10× [item]" and short values stay on one line */
.gt-table td.a-center, .gt-table td:has(.it) { white-space: nowrap; }

/* ---------------------------------------------------------------- cards */
.cards { display: grid; gap: 14px; }
.cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cards.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card {
	padding: 18px 18px 14px; text-align: center;
	background: linear-gradient(170deg, rgba(255, 220, 160, .06), rgba(0, 0, 0, .35)); border: 1px solid #45341f;
	box-shadow: inset 0 1px 0 rgba(255, 220, 160, .06); transition: border-color .2s, transform .2s;
}
.card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.card-icon { display: grid; place-items: center; margin-bottom: 10px; }
/* image icons (event calendar art is 99x80) show at native size; item icons use .card-item */
.card-icon > img { max-height: 80px; width: auto; }
.card b { display: block; font: 700 15px var(--f-title); color: var(--gold-hi); letter-spacing: .04em; }
.card p { margin: 6px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.45; }

/* ---------------------------------------------------------------- tabs */
.tab-bar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 18px; }
.tab-bar button {
	padding: 6px 16px; cursor: pointer; border: 1px solid #5a4329; border-radius: 8px; background: rgba(0, 0, 0, .35);
	color: var(--ink-soft); font: 600 13px var(--f-title); letter-spacing: .06em;
}
.tab-bar button[aria-selected="true"] { background: linear-gradient(180deg, #7a2a1d, var(--red-deep)); border-color: #b4643c; color: #fff1dc; }
.tab-panel[hidden] { display: none !important; }
.tab-panel.has-img { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; }
/* a wide window reads better above its text */
.tab-panel.has-img.wide { grid-template-columns: 1fr; gap: 16px; }
.tab-panel.wide .tab-text { max-width: 720px; margin: 0 auto; text-align: center; }
.tab-text { color: var(--ink-soft); }

/* ---------------------------------------------------------------- gallery / slider */
/* cut-out figures: no frame, a warm light under the feet, gentle lift on hover */
.figures { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 10px 6px; align-items: end; }
.figures figure { text-align: center; }
.figure-img { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 220px; }
.figure-img::before {
	content: ''; position: absolute; left: 12%; right: 12%; bottom: -6px; height: 26px;
	background: radial-gradient(ellipse closest-side, rgba(255, 170, 80, .28), transparent); filter: blur(2px);
}
.figure-img img { position: relative; max-height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); transition: transform .3s ease; }
.figures figure:hover .figure-img img { transform: translateY(-6px) scale(1.03); }
.figures figcaption { padding-top: 12px; font: 600 14px var(--f-title); color: var(--gold-hi); font-style: normal; letter-spacing: .04em; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.gallery-grid img, .slide img { display: block; width: 100%; border: 1px solid #45341f; }
figcaption { padding: 6px 2px 0; text-align: center; color: var(--muted); font-size: 15px; font-style: italic; }
.slider { position: relative; overflow: hidden; }
.slider-track { display: flex; transition: transform .5s ease; }
.slide { flex: 0 0 100%; }
.slider-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.slider-nav button { width: 34px; height: 34px; cursor: pointer; border: 1px solid #5a4329; background: rgba(0, 0, 0, .4); color: var(--gold); font-size: 22px; line-height: 1; border-radius: 8px; }
.slider-dots { display: flex; gap: 6px; }
.slider-dots button { width: 9px; height: 9px; padding: 0; border: 1px solid var(--gold-dim); background: none; transform: rotate(45deg); font-size: 0; }
.slider-dots button.on { background: var(--gold); }

/* ---------------------------------------------------------------- video */
.vid { border: 1px solid #5a4329; background: #000; box-shadow: 0 14px 40px rgba(0, 0, 0, .7); }
.vid-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px;
	background: linear-gradient(180deg, #4a1d10, #2a0f08); border-bottom: 1px solid #6a3a1f;
	font: 600 13px var(--f-title); letter-spacing: .12em; text-transform: uppercase; color: #f0d6b0;
}
.vid-toggle { padding: 5px 14px; cursor: pointer; border: 1px solid #d0a060; background: none; color: #f6e2c0; font: 600 12px var(--f-title); letter-spacing: .1em; text-transform: uppercase; }
.vid-toggle:hover { background: rgba(214, 166, 86, .15); }
.vid.collapsed .vid-body { display: none; }
.vid video { display: block; width: 100%; }
.yt { position: relative; aspect-ratio: 16/9; background: center/cover; }
.yt button { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(0, 0, 0, .6); color: var(--gold-hi); font-size: 28px; cursor: pointer; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------- text block */
.text-plain { max-width: 760px; margin: 0 auto; color: var(--ink-soft); }
.text-note { max-width: 700px; margin: 0 auto; text-align: center; color: var(--muted); font-style: italic; font-size: 16px; }

/* ---------------------------------------------------------------- hero */
.sec:first-child { padding-top: 0; }
.hero { position: relative; margin: 0 -48px; min-height: min(92vh, 860px); display: grid; align-items: end; overflow: hidden; }
/* background keeps its proportions (so a character can sit on its exact pixels) and covers the hero */
.hero-stage { position: absolute; top: 0; left: 50%; height: 100%; min-width: 100%; transform: translateX(-50%); }
.hero-stage .hero-bg-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-over { position: absolute; }
.hero-over img { display: block; width: 100%; height: auto; }
.hero::after {
	content: ''; position: absolute; inset: 0;
	/* jos se topește exact în culoarea coloanei centrale */
	background: linear-gradient(180deg, rgba(17, 11, 8, .35) 0, rgba(17, 11, 8, .1) 35%, rgba(20, 14, 10, .78) 72%, #140e0b 98%);
}
/* text centrat: o umbră fină în spatele lui, ca să se citească bine peste poză */
.hero:not(.text-left):not(.text-right):not(.has-figure)::after {
	background: radial-gradient(ellipse 46% 42% at 50% 66%, rgba(10, 7, 5, .55), transparent 70%),
		linear-gradient(180deg, rgba(17, 11, 8, .35) 0, rgba(17, 11, 8, .1) 35%, rgba(20, 14, 10, .78) 72%, #140e0b 98%);
}
.hero-in { position: relative; z-index: 2; padding: 120px 48px 40px; text-align: center; }
/* character standing beside the text (like the login screen); feet fade into the page */
.hero-figure { position: absolute; z-index: 1; bottom: 0; right: 0; width: 46%; height: 92%; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.hero-figure img {
	max-height: 100%; width: auto; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6));
	-webkit-mask: linear-gradient(180deg, #000 78%, transparent 99%); mask: linear-gradient(180deg, #000 78%, transparent 99%);
}
.hero.fig-left .hero-figure { right: auto; left: 0; }
.hero.text-left .hero-in, .hero.text-right .hero-in { width: 56%; }
.hero.text-left .hero-in { padding-right: 12px; }
.hero.text-right .hero-in { margin-left: auto; padding-left: 12px; }
.hero.has-figure .hero-in { width: 58%; padding-right: 12px; }
.hero.fig-left.has-figure .hero-in { margin-left: auto; padding-left: 12px; padding-right: 48px; }
/* soft shade behind the text, so it reads on a bright background */
.hero-in::before {
	content: ''; position: absolute; z-index: -1; inset: 18% -6% 0;
	background: radial-gradient(ellipse at 50% 60%, rgba(14, 9, 6, .62), rgba(14, 9, 6, .3) 45%, transparent 72%);
}
.hero-logo { margin: 0 auto; max-width: 520px; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .8)); }
.hero-title {
	margin: 0; font: 700 clamp(44px, 7vw, 86px)/1 var(--f-title); letter-spacing: .02em;
	background: linear-gradient(180deg, #fff1c8 10%, var(--gold) 55%, #8a5a20); -webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(214, 120, 40, .35));
}
.hero-tagline { margin: 12px 0 16px; font: 700 clamp(15px, 1.7vw, 20px) var(--f-title); letter-spacing: .32em; text-transform: uppercase; color: #f3e3c6; text-shadow: 0 2px 8px #000; }
.hero .orn { margin-bottom: 18px; }
.hero-text { max-width: 640px; margin: 0 auto; color: #eadcc4; font-size: 19px; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.hero-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-stats div { min-width: 92px; padding: 9px 10px; background: rgba(10, 6, 4, .65); border: 1px solid var(--line); border-radius: 8px; }
.hero-stats b { display: block; font: 700 26px/1.1 var(--f-title); color: var(--gold-hi); }
.hero-stats span { font-size: 14px; color: var(--ink-soft); letter-spacing: .04em; }
.hero-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.countdown { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.countdown div { width: 70px; padding: 8px 0 6px; background: rgba(10, 6, 4, .7); border: 1px solid var(--gold-dim); }
.countdown b { display: block; font: 700 26px/1 var(--f-title); color: var(--gold-hi); }
.countdown span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }

/* ---------------------------------------------------------------- buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; min-height: 42px;
	font: 700 13px var(--f-title); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-radius: 8px;
	transition: filter .15s, transform .15s, background .15s;
}
.btn-lg { padding: 14px 32px; font-size: 14px; }
.btn-primary { color: #fff3dc; background: linear-gradient(180deg, #b83a22, #7a1d10); border: 1px solid #e0a35a; box-shadow: 0 6px 18px rgba(120, 30, 10, .45), inset 0 1px 0 rgba(255, 200, 150, .3); }
.btn-ghost { color: var(--gold-hi); background: rgba(10, 6, 4, .55); border: 1px solid var(--gold-dim); }
.btn:hover { filter: brightness(1.15); transform: translateY(-1px); }

/* ---------------------------------------------------------------- footer */
.foot { position: relative; max-width: var(--col-w); margin: 0 auto; padding: 50px 0 60px; text-align: center; }
.foot-orn { margin-bottom: 18px; }
.foot-orn { display: flex; align-items: center; justify-content: center; gap: 10px; }
.foot-orn i { flex: 1; max-width: 200px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.foot-orn i:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.foot-orn b { width: 10px; height: 10px; border: 1.5px solid var(--gold); transform: rotate(45deg); }
.foot-text { max-width: 640px; margin: 0 auto; color: var(--ink-soft); font-style: italic; }
.foot-cta { display: flex; justify-content: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.foot-copy { margin-top: 24px; color: var(--muted); font-size: 14px; }

.to-top {
	position: fixed; z-index: 20; right: 22px; bottom: 22px; width: 44px; height: 44px; display: grid; place-items: center;
	background: linear-gradient(180deg, #b83a22, #7a1d10); border: 1px solid var(--gold-dim); border-radius: 50%; cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .3s, transform .15s, filter .15s;
}
.to-top svg { width: 22px; fill: var(--gold-hi); }
.to-top:hover { filter: brightness(1.15); transform: translateY(-2px); }
.to-top.show { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------- item tooltip (game style) */
.tip {
	position: fixed; z-index: 100; max-width: 300px; padding: 10px 12px; pointer-events: none;
	background: rgba(8, 6, 4, .96); border: 1px solid #6e5a3c; box-shadow: 0 0 0 1px #000, 0 10px 30px rgba(0, 0, 0, .7);
	font: 13px/1.45 Tahoma, Verdana, sans-serif; color: #e6dcc6; text-align: center;
}
.tip-head { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tip-head img { width: 32px; height: auto; max-height: 64px; }
.tip-name { color: #f2e1a0; font-weight: 700; font-size: 14px; }
.tip-lvl { color: #e6dcc6; margin-top: 4px; }
.tip-desc { color: #c9b896; margin-top: 6px; }
.tip-bonus { color: var(--green); }
.tip-bonuses { margin-top: 6px; }

/* ---------------------------------------------------------------- preview bar */
.preview-bar { position: fixed; z-index: 200; left: 50%; top: 8px; transform: translateX(-50%); padding: 5px 14px; background: #a61f12; color: #fff; font: 600 12px var(--f-title); letter-spacing: .1em; border-radius: 2px; }
.preview-bar a { color: #ffe3b0; }

/* ---------------------------------------------------------------- responsive */
/* ---------------------------------------------------------------- design v2: spațiu, lizibilitate, ierarhie, meniu */
:root { --ink-soft: #cfbb9b; }
.sec { padding: 78px 0 34px; }
.blk + .blk { margin-top: 34px; }
.heading h2 { font-size: clamp(30px, 3.8vw, 44px); }
.heading-sub { color: #d3c0a0; }
/* titlul cardului: mai mic decât titlul secțiunii; în locul caracterului chinezesc, un romb auriu */
.tcard-title { font-size: 22px; gap: 12px; align-items: center; color: #f0cf8a; }
.tcard-kicker { font-size: 0; text-shadow: none; width: 9px; height: 9px; flex: none; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 0 3px rgba(214, 166, 86, .18); }
/* text: rânduri de lungime confortabilă, aliniate la stânga, contrast mai bun */
.tcard-text, .plate { color: #ecdcbc; }
.tcard-text { font-size: 17px; line-height: 1.75; max-width: 70ch; }
.tcard.align-center .tcard-text { text-align: left; margin: 0; }
.tcard-text strong, .plate strong { color: #fff1d2; }
.points li, .tcard-points li { color: #dcc8a6; }
/* meniul din stânga: fără textura veche, element activ marcat cu o linie aurie */
.side { background: linear-gradient(180deg, #17100c, #0f0a08); }
.nav-cat { font-size: 11px; letter-spacing: .18em; color: #c9a063; padding-top: 14px; }
.side-nav a { font-size: 15px; padding: 7px 10px 7px 12px; }
.nav-seal { background: rgba(214, 166, 86, .1); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(214, 166, 86, .25); }
.side-nav a:hover .nav-seal { color: var(--gold-hi); }
.side-nav a.active { background: rgba(214, 166, 86, .1); border-left-color: var(--gold); }
.side-nav a.active .nav-seal { background: linear-gradient(180deg, #b83a22, #7a1d10); color: #fff3df; box-shadow: none; }
.side-cta { border-top-color: rgba(214, 166, 86, .18); }

/* ---------------------------------------------------------------- bara de sus: bandă discretă care se întunecă la scroll */
.topbar { transition: background .25s, box-shadow .25s, border-color .25s; border-bottom: 1px solid transparent; }
.topbar.scrolled {
	background: rgba(15, 10, 8, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-bottom-color: rgba(214, 166, 86, .16); box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.topbar.scrolled .top-icon, .topbar.scrolled .lang-btn { background: rgba(255, 255, 255, .03); }

/* ---------------------------------------------------------------- hover: carduri și imagini */
.tcard, .plate { transition: border-color .25s, box-shadow .25s; }
.tcard:hover, .plate:hover { border-color: rgba(214, 166, 86, .45); box-shadow: inset 0 1px 0 rgba(255, 220, 160, .08), 0 16px 40px rgba(0, 0, 0, .55), 0 0 22px rgba(214, 166, 86, .08); }
.scene-bg img, .feature-img img { transition: transform .8s ease, filter .8s ease; }
.blk-scene:hover .scene-bg img { transform: scale(1.03); }
.tone-painted .scene-bg img { transform: scale(1.04); }
.blk-scene:hover .tone-painted .scene-bg img { transform: scale(1.07); }
.feature-img { overflow: hidden; border-radius: 8px; }
.feature-img:hover img { transform: scale(1.03); }

/* ---------------------------------------------------------------- puncte cu iconiță (alese în Manager) */
.points li::before { background: var(--gold); box-shadow: 0 0 0 2px rgba(214, 166, 86, .2); width: 7px; height: 7px; }
.points li.has-icon { padding-left: 30px; }
.points li.has-icon::before { display: none; }
.pt-icon { position: absolute; left: 0; top: .32em; width: 18px; height: 18px; fill: var(--gold); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }

/* ---------------------------------------------------------------- evidențieri: auriu = important, verde = sisteme / iteme / avantaje */
strong, .tcard-text strong, .plate strong { color: var(--gold-hi); }
mark { color: var(--gold-hi); }
.it { color: #b6dc96; }
.it > span { border-bottom-color: rgba(182, 220, 150, .4); }
.good { color: #b6dc96; }
.bad { color: #e88a74; }

/* ---------------------------------------------------------------- scenă + card unul lângă altul (Manager: card → Așezare) */
.pair { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: center; }
.pair + .blk, .blk + .pair { margin-top: 34px; }
.pair-left { grid-template-columns: 1fr 1.25fr; }
.pair-left > .blk-scene { order: 2; }
.pair > .blk + .blk, .pair > .blk-scene + .blk-card { margin-top: 0; }
.pair .scene {
	margin: 0; border-radius: 10px; aspect-ratio: 1 / 1;
	-webkit-mask: none; mask: none; box-shadow: 0 14px 36px rgba(0, 0, 0, .5); border: 1px solid rgba(214, 166, 86, .2);
}
.pair .tcard { padding: 28px 30px 26px; }
.pair .tcard-text { max-width: none; }

/* ---------------------------------------------------------------- meniul site-ului (bara de sus) */
/* centrat pe coloana prezentării (bara de sus începe după meniul din stânga, exact ca și coloana) */
.site-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; }
.site-nav a, .side-site a {
	padding: 7px 12px; border-radius: 8px; color: var(--ink-soft); text-decoration: none;
	font: 600 12.5px var(--f-title); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: color .15s, background .15s;
}
.site-nav a:hover { color: var(--gold-hi); background: rgba(214, 166, 86, .08); }
.site-nav a.on { color: var(--gold-hi); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 8px 8px 0 0; }
.site-nav a.sn-cta { margin-left: 6px; color: #fff3dc; background: linear-gradient(180deg, #b83a22, #7a1d10); border: 1px solid #e0a35a; }
.site-nav a.sn-cta:hover { filter: brightness(1.15); }
.side-site { display: none; }

/* ---------------------------------------------------------------- iteme ca medalioane rotunde */
.medals, .tcard-items.medals { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 16px 10px; }
.medal { position: relative; display: flex; flex-direction: column; align-items: center; width: 92px; text-align: center; }
.medal-ring.it {
	display: grid; place-items: center; gap: 0; width: 64px; height: 64px; border-radius: 50%; cursor: help;
	background: radial-gradient(circle at 50% 38%, rgba(214, 163, 90, .2), rgba(14, 9, 6, .9) 68%);
	border: 2px solid rgba(214, 163, 90, .55);
	box-shadow: 0 0 0 4px rgba(14, 9, 6, .8), 0 0 0 5px rgba(214, 163, 90, .25), 0 8px 18px rgba(0, 0, 0, .5);
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.medal-ring.it img { width: 40px; height: auto; max-height: 52px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .7)); }
.medal-ring.it:hover, .medal-ring.it:focus { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(14, 9, 6, .8), 0 0 0 5px rgba(214, 163, 90, .45), 0 0 22px rgba(214, 163, 90, .3); }
.medal-count { position: absolute; top: 44px; left: calc(50% + 18px); font: 700 12px var(--f-body); font-style: normal; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.medal-name { margin-top: 10px; font: 700 10.5px/1.3 var(--f-title); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); }
.medal-info { margin-top: 3px; font-size: 13.5px; line-height: 1.35; color: var(--ink-soft); }
.tcard-items.medals { gap: 16px 8px; }

/* ---------------------------------------------------------------- personaj mare decupat lângă text (Imagine + text → Personaj decupat) */
.feature-img.img-cutout { overflow: visible; border-radius: 0; background: none; border: 0; box-shadow: none; display: flex; justify-content: center; align-items: flex-end; }
.feature-img.img-cutout img {
	width: auto; max-width: 118%; max-height: 560px; margin: -40px -9% -20px; border-radius: 0;
	filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .7)) drop-shadow(0 0 40px rgba(214, 120, 40, .12));
}
.feature-img.img-cutout:hover img { transform: translateY(-4px); }
.feature:has(.img-cutout) .plate { background: none; border-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0; }
.feature:has(.img-cutout) .plate:hover { border-color: transparent; box-shadow: none; }

/* ---------------------------------------------------------------- bonusuri: iconiță + text + valoare verde */
.bonuses { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 8px 22px; max-width: 760px; }
.bonuses.cols-2 { grid-template-columns: 1fr 1fr; }
.bonuses li {
	display: flex; align-items: center; gap: 12px; padding: 9px 14px;
	background: rgba(214, 163, 90, .05); border: 1px solid rgba(214, 163, 90, .14); border-radius: 8px;
}
.bonus-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(214, 163, 90, .1); box-shadow: inset 0 0 0 1px rgba(214, 163, 90, .3); }
.bonus-icon svg { width: 16px; height: 16px; fill: var(--gold); }
.bonus-icon:empty::before { content: ''; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.bonus-label { flex: 1; color: #e6d4b2; line-height: 1.4; }
.bonus-value { flex: none; font: 700 16px var(--f-title); color: #9fe08a; text-shadow: 0 0 10px rgba(120, 220, 100, .25); white-space: nowrap; }

/* ---------------------------------------------------------------- dungeon / boss: scenă lată */
.dungeon {
	position: relative; display: flex; align-items: flex-end; min-height: 360px; margin: 0 -20px; padding: 28px 34px;
	border-radius: 10px; overflow: hidden; isolation: isolate; box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
	border: 1px solid rgba(214, 163, 90, .18);
}
.dungeon.boss-right { justify-content: flex-start; }
.dungeon.boss-left { justify-content: flex-end; }
.dungeon-bg { position: absolute; inset: 0; z-index: -2; }
.dungeon-bg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) brightness(.62); transition: transform .8s ease; }
.dungeon:hover .dungeon-bg img { transform: scale(1.04); }
.dungeon::before { content: ''; position: absolute; inset: 0; z-index: -1; }
.dungeon.boss-left::before { background: linear-gradient(270deg, rgba(12, 8, 6, .85) 0, rgba(12, 8, 6, .2) 55%, transparent), linear-gradient(0deg, rgba(12, 8, 6, .8), transparent 45%); }
.dungeon.boss-right::before { background: linear-gradient(90deg, rgba(12, 8, 6, .85) 0, rgba(12, 8, 6, .2) 55%, transparent), linear-gradient(0deg, rgba(12, 8, 6, .8), transparent 45%); }
.dungeon-boss { position: absolute; bottom: 0; z-index: 0; height: 96%; display: flex; align-items: flex-end; pointer-events: none; }
.dungeon.boss-left .dungeon-boss { left: 2%; }
.dungeon.boss-right .dungeon-boss { right: 2%; }
.dungeon-boss img { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .8)); transition: transform .5s ease; transform-origin: 50% 100%; }
.dungeon:hover .dungeon-boss img { transform: scale(1.03); }
.dungeon-tag { position: relative; z-index: 1; max-width: 52%; }
.dungeon.boss-left .dungeon-tag { text-align: right; }
.dungeon-name { margin: 0; font: 700 28px/1.2 var(--f-title); color: var(--gold-hi); text-shadow: 0 2px 10px #000; }
.dungeon-name small { margin-left: 6px; font: 600 14px var(--f-title); letter-spacing: .06em; color: var(--gold); white-space: nowrap; }
.dungeon-meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; color: #dccaa8; font-size: 15px; }
.dungeon.boss-left .dungeon-meta { justify-content: flex-end; }
.dungeon-meta i { color: var(--gold-dim); font-style: normal; }
.dungeon-text { margin: 10px 0 0; color: #e6d4b2; font-size: 15.5px; text-shadow: 0 1px 6px #000; }
.blk-dungeon + .blk-dungeon { margin-top: 22px; }

/* ---------------------------------------------------------------- bară de progres a citirii + copiază linkul secțiunii */
.read-progress { position: fixed; z-index: 60; top: 0; left: var(--side-w); right: 0; height: 3px; pointer-events: none; }
.read-progress i { display: block; height: 100%; background: linear-gradient(90deg, #7a1d10, var(--gold), var(--gold-hi)); box-shadow: 0 0 10px rgba(214, 166, 86, .55); transform: scaleX(0); transform-origin: 0 50%; }
.heading h2 { position: relative; }
.copy-link {
	position: absolute; top: 50%; right: -42px; transform: translateY(-50%); display: grid; place-items: center;
	width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer;
	border: 1px solid rgba(214, 166, 86, .3); background: rgba(14, 9, 6, .6); color: var(--gold);
	opacity: 0; transition: opacity .2s, color .2s, border-color .2s;
}
.copy-link svg { width: 15px; height: 15px; fill: currentColor; }
.sec:hover .copy-link, .copy-link:focus-visible, .copy-link.copied { opacity: 1; }
.copy-link:hover { color: var(--gold-hi); border-color: var(--gold); }
.copy-link.copied { color: #9fe08a; border-color: rgba(159, 224, 138, .6); }
.copy-link::after {
	content: attr(data-msg); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap;
	padding: 4px 10px; border-radius: 6px; background: #1a120c; border: 1px solid var(--line); color: var(--ink);
	font: 600 12px var(--f-body); letter-spacing: 0; -webkit-text-fill-color: var(--ink); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.copy-link.copied::after { opacity: 1; }

@media (max-width: 1100px) {
	.side { transform: translateX(-100%); transition: transform .3s ease; }
	.side.open { transform: none; }
	.topbar { left: 0; background: linear-gradient(180deg, rgba(14, 9, 6, .95), rgba(14, 9, 6, .7)); pointer-events: auto; }
	.menu-btn {
		display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; cursor: pointer;
		border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .45); color: var(--ink);
		font: 600 13px var(--f-title); letter-spacing: .1em; text-transform: uppercase;
	}
	.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 16px; height: 2px; background: var(--gold); position: relative; }
	.menu-btn span::before, .menu-btn span::after { content: ''; position: absolute; left: 0; }
	.menu-btn span::before { top: -5px; } .menu-btn span::after { top: 5px; }
	.col { margin-left: 0; padding: var(--top-h) 16px 0; }
	.hero { margin: 0 -40px; }
}
@media (max-width: 760px) {
	body { font-size: 17px; }
	.col::before { width: calc(100% + 20px); }
	.sec { padding: 40px 6px 20px; }
	.feature, .feature.image-right, .tab-panel.has-img { grid-template-columns: 1fr; }
	.feature.image-right .feature-img { order: 0; }
	.plate { padding: 24px 22px 20px; }
	.stages { grid-template-columns: 1fr 1fr; }
	.stage { border-left-width: 1px; }
	.stage::after { display: none; }
	.cards.cols-3, .cards.cols-4 { grid-template-columns: 1fr 1fr; }
	.figures { grid-template-columns: repeat(min(var(--n), 3), 1fr); }
	.figure-img { height: 150px; }
	.heading { gap: 8px; }
	.orn-title { max-width: 50px; }
	.hero { margin: 0 -24px; min-height: 80vh; }
	.hero-in, .hero.has-figure .hero-in, .hero.text-left .hero-in, .hero.text-right .hero-in { width: auto; margin-left: 0; padding: 100px 20px 30px; }
	/* on phones the character stands behind the text, faded */
	.hero-figure { width: 100%; height: 70%; opacity: .35; }
	.hero-stats div { min-width: 0; flex: 1 1 40%; }
	.scene { margin: 0 -16px; }
	.blk-scene + .blk-card { margin-top: 12px; }
	.tcard { padding: 26px 22px 24px; }
	.tcard-title { font-size: 21px; gap: 10px; }
	.tcard-kicker { font-size: 20px; }
	.tcard-text { font-size: 15.5px; }
}
@media (max-width: 460px) {
	.cards.cols-2, .cards.cols-3, .cards.cols-4 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.pair, .pair-left { grid-template-columns: 1fr; }
	.pair-left > .blk-scene { order: 0; }
	.pair .scene { aspect-ratio: 16 / 10; }
}

@media (max-width: 1280px) {
	.site-nav a:not(.on):not(.sn-cta):nth-child(n+3) { display: none; }
	.site-nav { gap: 0; }
}
@media (max-width: 1100px) {
	.site-nav { display: none; }
	.side-site { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 14px; border-top: 1px solid rgba(214, 166, 86, .18); }
	.side-site a { padding: 6px 9px; font-size: 11.5px; }
	.side-site a.on { color: var(--gold-hi); background: rgba(214, 166, 86, .1); }
	.side-site a.sn-cta { display: none; }
}
@media (max-width: 760px) {
	.bonuses.cols-2 { grid-template-columns: 1fr; }
	.medal { width: 80px; }
	.medal-ring.it { width: 56px; height: 56px; }
	.medal-ring.it img { width: 34px; }
	.medal-count { top: 38px; }
	.feature-img.img-cutout img { max-height: 380px; margin: 0 auto -10px; max-width: 100%; }
	.dungeon { min-height: 300px; margin: 0 -12px; padding: 18px; }
	.dungeon-boss { height: 82%; opacity: .9; }
	.dungeon-tag { max-width: 70%; }
	.dungeon-name { font-size: 22px; }
}

@media (max-width: 1100px) {
	.read-progress { left: 0; }
}
@media (hover: none) {
	.copy-link { opacity: .8; }
}
@media (max-width: 760px) {
	.copy-link { position: static; display: inline-grid; transform: none; margin-left: 8px; vertical-align: middle; width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js [data-reveal] { opacity: 1; transform: none; transition: none; }
	.embers { display: none; }
}