/* Voidscape: The Chronicle (/world). Extends landing.css; same tokens, same voice.
   Pixel-art sprites (items, avatars) render pixelated at integer scales only.
   Painted UI art (assets/world/, skill icons) scales smoothly. */

.chronicle {
	--faint: #aaa2b5;
	background-image:
		radial-gradient(1100px 640px at 50% 320px, var(--void-2) 0%, var(--void) 62%),
		radial-gradient(900px 700px at 50% 1400px, rgba(67, 39, 101, .18) 0%, transparent 70%);
}

.skip-link {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 100;
	transform: translateY(-160%);
	border: 1px solid var(--line-strong);
	border-radius: 7px;
	background: var(--void-2);
	color: var(--text);
	padding: 9px 13px;
}

.skip-link:focus { transform: translateY(0); }

/* ---- ambient void embers ---- */
.void-embers { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

.ember { position: absolute; opacity: .12; filter: blur(1px); }
.ember-a { width: 46px; left: 7%; top: 34%; animation: ember-float 14s ease-in-out infinite; }
.ember-b { width: 74px; right: 5%; top: 62%; animation: ember-float 18s ease-in-out -6s infinite reverse; }

@keyframes ember-float {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(-46px) scale(1.06); }
}

/* ---- sprite scaling helpers ----
   Pixel sprites are sized to real integer multiples of their source pixels
   (world.js sets width/height from naturalWidth x data-px). Never scale a
   sprite with transform inside a layout: the paint bleeds out of the box. */
.px { image-rendering: pixelated; }
.art-icon { width: 28px; height: 28px; object-fit: contain; }

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* landing.css references `rise` but never defines it; the Chronicle supplies it,
   so every entrance it names (hero, pulse, live-line, feed rows) actually plays. */
@keyframes rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ======================= hero ======================= */
.chronicle-hero { padding-bottom: 18px; }

.chronicle-status {
	width: fit-content;
	max-width: min(680px, 100%);
	margin: 20px auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(18, 13, 29, .82);
	padding: 7px 13px;
	font-size: 12px;
	color: var(--muted);
}

.status-rune { width: 8px; height: 8px; border-radius: 50%; background: var(--purple-hi); box-shadow: 0 0 9px var(--purple); }
.chronicle-status.is-live { border-color: rgba(92, 194, 141, .32); }
.chronicle-status.is-live .status-rune { background: var(--live); box-shadow: 0 0 9px var(--live); }
.chronicle-status.is-preview { border-color: rgba(201, 164, 91, .45); color: var(--gold-hi); }
.chronicle-status.is-preview .status-rune { background: var(--gold-hi); box-shadow: 0 0 9px var(--gold); }
.chronicle-status.is-fiction { border-color: rgba(143, 85, 223, .58); color: #d6c2f3; }
.chronicle-status.is-fiction .status-rune { background: var(--purple-hi); box-shadow: 0 0 13px var(--purple-hi); }
.chronicle-status.is-stale, .chronicle-status.is-error { border-color: rgba(207, 83, 83, .45); color: #e8a598; }
.chronicle-status.is-stale .status-rune, .chronicle-status.is-error .status-rune { background: #cf5353; box-shadow: 0 0 9px #cf5353; }

.live-line {
	margin: 26px auto 0;
	max-width: 680px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--panel);
	padding: 12px 20px;
	min-height: 47px;
	animation: rise .5s ease-out .24s backwards;
}

.live-line-rune {
	color: var(--purple-hi);
	text-shadow: 0 0 10px var(--purple);
	animation: rune-pulse 2.6s ease-in-out infinite;
	flex: 0 0 auto;
}

@keyframes rune-pulse {
	0%, 100% { opacity: .55; }
	50% { opacity: 1; }
}

.live-line-text {
	font-size: 15px;
	color: var(--text);
	transition: opacity .35s ease, transform .35s ease;
}

.fiction-notice {
	position: relative;
	z-index: 1;
	width: min(920px, calc(100% - 56px));
	margin: 18px auto 8px;
	display: grid;
	grid-template-columns: 112px 1fr;
	align-items: center;
	gap: 26px;
	overflow: hidden;
	border: 1px solid rgba(143, 85, 223, .42);
	border-radius: 10px;
	background:
		linear-gradient(102deg, rgba(74, 38, 113, .36), rgba(18, 13, 29, .95) 42%, rgba(30, 19, 45, .92)),
		radial-gradient(circle at 12% 50%, rgba(201, 164, 91, .18), transparent 34%);
	box-shadow: 0 22px 70px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .035);
	padding: 22px 30px 22px 22px;
}

.fiction-notice[hidden] { display: none; }

.fiction-notice::after {
	content: "FICTIONAL PRELAUNCH VISION";
	position: absolute;
	right: -20px;
	top: 16px;
	transform: rotate(3deg);
	border-block: 1px solid rgba(201, 164, 91, .25);
	padding: 3px 26px;
	font-family: var(--display);
	font-size: 9px;
	letter-spacing: .16em;
	color: rgba(201, 164, 91, .54);
}

.fiction-notice-mark {
	width: 100%;
	max-height: 92px;
	object-fit: contain;
	filter: drop-shadow(0 0 22px rgba(143, 85, 223, .48));
}

.fiction-notice-eyebrow, .privacy-callout-eyebrow {
	margin: 0 0 5px;
	font-family: var(--display);
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--gold-hi);
}

.fiction-notice h2 {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(20px, 2.6vw, 28px);
	font-weight: 400;
	color: var(--text);
}

.fiction-notice p:last-child {
	margin: 8px 0 0;
	max-width: 690px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--muted);
}

.fiction-notice strong { color: #d5c2ee; font-weight: 600; }

.fiction-countdown { color: var(--gold-hi); font-weight: 600; white-space: nowrap; }

/* ---- since your last reading ---- */
.since-strip { max-width: 1160px; margin: 12px auto 0; padding: 0 28px; position: relative; z-index: 1; }
.since-strip[hidden] { display: none; }

.since-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	border: 1px solid rgba(201, 164, 91, .32);
	border-radius: 10px;
	background:
		linear-gradient(90deg, rgba(201, 164, 91, .08), transparent 40%),
		var(--panel);
	padding: 10px 16px;
	font-size: 13px;
	color: var(--muted);
	animation: rise .5s ease-out .1s backwards;
}

.since-label {
	font-family: var(--display);
	font-size: 13px;
	color: var(--gold-hi);
	letter-spacing: .04em;
}

.since-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.since-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.since-chip img { width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated; }
.since-chip b { color: var(--gold-hi); font-weight: 600; font-variant-numeric: tabular-nums; }

.since-dismiss {
	margin-left: auto;
	border: 0;
	background: transparent;
	color: var(--faint);
	font: 500 12.5px var(--body);
	cursor: pointer;
	padding: 4px 6px;
}

.since-dismiss:hover, .since-dismiss:focus-visible { color: var(--text); outline: none; text-decoration: underline; text-underline-offset: 3px; }

.live-line-text.is-swapping { opacity: 0; transform: translateY(5px); }
.live-line-text strong { color: var(--gold-hi); font-weight: 600; }
.live-line-text em { color: var(--purple-hi); font-style: normal; }

/* ======================= world pulse ======================= */
.pulse { max-width: 1160px; margin: 8px auto 0; padding: 0 28px; position: relative; z-index: 1; }

.pulse-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
	animation: rise .5s ease-out .3s backwards;
}

.pulse-tile {
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel);
	padding: 16px 12px 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	transition: border-color .2s ease, transform .2s ease;
}

.pulse-tile:hover { border-color: var(--line-strong); transform: translateY(-2px); }

/* Every tile gets the same optical stage. The art itself stays at crisp integer
   multiples: coins 52x38, bones 80x56, crest 55x62, sword 68x68. */
.pulse-icon {
	width: 82px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pulse-art { display: block; flex: 0 0 auto; }

.pulse-chicken {
	width: 42px;
	height: 72px;
	object-fit: contain;
	image-rendering: pixelated;
	filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .52));
}

.pulse-orbit {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(94, 194, 131, .16);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(94, 194, 131, .12), transparent 62%);
}

/* mini-gold.png is cropped through the coin's right rim. The complete medal
   source contains an intact medallion; this window hides only its ribbon. */
.gold-medallion {
	position: relative;
	display: block;
	width: 65px;
	height: 64px;
	overflow: hidden;
	flex: 0 0 auto;
}

.gold-medallion img {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 65px;
	height: 110px;
	max-width: none;
	max-height: none;
}

.pulse-tile strong.is-ticking { animation: count-bloom .9s ease-out; }

@keyframes count-bloom {
	0% { text-shadow: 0 0 28px rgba(226, 192, 130, .95); }
	100% { text-shadow: 0 0 20px rgba(143, 85, 223, .4); }
}

.pulse-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--live);
	box-shadow: 0 0 12px var(--live);
	animation: rune-pulse 2.2s ease-in-out infinite;
}

.pulse-tile strong {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 20px rgba(143, 85, 223, .4);
}

.is-gold { color: var(--gold-hi); text-shadow: 0 0 20px rgba(201, 164, 91, .45); }

.pulse-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--faint);
}

/* ======================= shared section chrome ======================= */
.section { max-width: 1160px; margin: 74px auto 0; padding: 0 28px; position: relative; z-index: 1; }

.section-head { text-align: center; margin-bottom: 30px; }

.section-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--purple-hi);
}

.section-title {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.1;
	margin-top: 8px;
	text-shadow: 0 4px 28px rgba(143, 85, 223, .35);
}

.section-divider { display: block; margin: 14px auto 0; width: min(306px, 70%); opacity: .85; }

.section-sub { margin: 12px auto 0; max-width: 52ch; color: var(--muted); font-size: 15px; }

/* ======================= happening now ======================= */
.feed-grid {
	display: grid;
	grid-template-columns: 1.55fr .9fr;
	gap: 22px;
	align-items: start;
}

.feed-panel {
	position: relative;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel);
	padding: 18px;
}

.feed-showcase {
	position: relative;
	margin: 0 auto 14px;
	max-width: 440px;
}

.feed-showcase-art { display: block; width: 100%; }

.feed-showcase-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 13%;
	font-size: clamp(11px, 1.6vw, 14.5px);
	font-weight: 600;
	color: #d8cfc0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
	white-space: nowrap;
}

.feed-showcase-sentence { display: block; overflow: hidden; text-overflow: ellipsis; }

.feed-showcase-text .who { color: var(--gold-hi); }
.feed-showcase-text .whom { color: #e37a6a; }

.feed-list { list-style: none; display: flex; flex-direction: column; }

.feed-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 8px;
	border-top: 1px solid rgba(143, 85, 223, .12);
	font-size: 14.5px;
	color: var(--muted);
	animation: rise .4s ease-out backwards;
}

.feed-list li:first-child { border-top: 0; }

/* A single optical stage keeps skill crests, medals, and 1x item sprites on the
   same centerline without scaling the item's deliberately crisp pixels. */
.feed-list .feed-icon {
	flex: 0 0 52px;
	width: 52px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.feed-icon img, .feed-icon canvas { max-width: 42px; max-height: 42px; object-fit: contain; }
.feed-icon .px { max-width: none; max-height: none; }

.feed-icon .gold-medallion { width: 49px; height: 48px; }
.feed-icon .gold-medallion img { transform: scale(.75); transform-origin: left bottom; }

.feed-list li.is-new {
	box-shadow: inset 3px 0 0 var(--gold-hi);
	border-radius: 6px;
	animation: feed-arrive 1.8s ease-out;
}

@keyframes feed-arrive {
	from { background: rgba(201, 164, 91, .16); }
	to { background: transparent; }
}

.feed-copy { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
.feed-text { flex: 1; min-width: 0; color: var(--text); }
.feed-text strong { color: var(--text); font-weight: 600; }
.feed-text em { color: var(--purple-hi); font-style: normal; }
.feed-list li.feed-pk { background: linear-gradient(90deg, rgba(207, 83, 83, .1), transparent 70%); border-radius: 6px; }
.feed-list li.feed-pk .feed-text { color: #e8a598; }
.feed-list li.feed-max .feed-text { color: var(--gold-hi); }

.feed-time { flex: 0 0 auto; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }

.feed-waiting { justify-content: center; color: var(--faint); font-style: italic; }

/* ---- almanac ---- */
.almanac {
	position: sticky;
	top: 24px;
	text-align: center;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel);
	padding: 0 22px 22px;
	margin-top: 56px;
}

.almanac-portal {
	width: 152px;
	margin: -58px auto 2px;
	display: block;
	cursor: pointer;
	filter: drop-shadow(0 0 26px rgba(143, 85, 223, .5));
	animation: portal-breathe 7s ease-in-out infinite;
}

.almanac-portal.is-flaring { animation: portal-flare .9s ease-out; }

@keyframes portal-flare {
	0% { filter: drop-shadow(0 0 52px rgba(178, 140, 242, .95)); transform: scale(1.05); }
	100% { filter: drop-shadow(0 0 22px rgba(143, 85, 223, .4)); transform: scale(1); }
}

@keyframes portal-breathe {
	0%, 100% { filter: drop-shadow(0 0 18px rgba(143, 85, 223, .35)); }
	50% { filter: drop-shadow(0 0 34px rgba(143, 85, 223, .65)); }
}

.almanac-eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--purple-hi);
}

.almanac-fact {
	margin-top: 12px;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--text);
	min-height: 106px;
	transition: opacity .3s ease;
}

.almanac-fact.is-swapping { opacity: 0; }

.almanac-fact strong { color: var(--gold-hi); font-weight: 600; }

.almanac-source { margin-top: 8px; font-size: 12px; color: var(--faint); min-height: 18px; }

.almanac-btn { margin-top: 14px; }

/* ======================= the monument ======================= */
.skill-rail {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
	max-width: 880px;
	margin: 0 auto 34px;
}

.skill-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--panel);
	color: var(--muted);
	font-family: var(--body);
	font-size: 12.5px;
	font-weight: 600;
	padding: 6px 12px 6px 8px;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.skill-tab img { width: 20px; height: 20px; object-fit: contain; }

.skill-tab:hover { color: var(--text); border-color: var(--line-strong); }

.skill-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(143, 85, 223, .25); }

.skill-tab.is-active {
	color: var(--text);
	border-color: var(--line-strong);
	box-shadow: 0 0 14px rgba(143, 85, 223, .3), inset 0 0 12px rgba(143, 85, 223, .12);
}

/* ---- podium ---- */
.podium {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 210px));
	justify-content: center;
	align-items: flex-end;
	gap: clamp(26px, 6vw, 84px);
	margin-top: 68px; /* air for the floating crowns above rank 1 */
	min-height: 300px;
	position: relative;
	z-index: 1;
}

.pod { display: flex; min-width: 0; flex-direction: column; align-items: center; position: relative; text-align: center; }
.pod-rank-1 { grid-column: 2; grid-row: 1; padding-bottom: 40px; }
.pod-rank-2 { grid-column: 1; grid-row: 1; padding-bottom: 22px; }
.pod-rank-3 { grid-column: 3; grid-row: 1; padding-bottom: 10px; }

.pod-figure {
	display: flex;
	min-width: 0;
	width: max-content;
	max-width: 100%;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.pod-number {
	position: absolute;
	top: -16px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: var(--void-2);
	font-family: var(--display);
	font-size: 19px;
	color: var(--gold-hi);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .6);
}

.pod-crown { position: absolute; top: -46px; left: 50%; width: 52px; transform: translateX(-50%); animation: crown-float 4.5s ease-in-out infinite; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }

.pod-1 .pod-crown { width: 60px; top: -56px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(226, 192, 130, .45)); }

@keyframes crown-float {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, -6px); }
}

/* Sprites stand on a fixed stage; world.js sets their width/height to exact
   integer multiples of the source pixels so nothing ever renders mushy. */
.pod-stage { height: 208px; display: flex; align-items: flex-end; justify-content: center; }

.pod-avatar { display: block; image-rendering: pixelated; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .65)); }

.pod-rank-1 .pod-avatar { filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .65)) drop-shadow(0 0 26px rgba(143, 85, 223, .45)); }

.pod { animation: pod-rise .5s ease-out backwards; transition: transform .18s ease; }

.pod:hover { transform: translateY(-6px); }

.pod:hover .pod-avatar {
	filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .65)) drop-shadow(0 0 24px rgba(143, 85, 223, .6));
}
.pod-rank-1 { animation-delay: .08s; }
.pod-rank-3 { animation-delay: .16s; }

@keyframes pod-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

.pod-shield { width: 40px; margin-top: -18px; position: relative; z-index: 2; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .7)); }

.pod-name {
	font-family: var(--display);
	font-size: 21px;
	margin-top: 8px;
	color: var(--text);
	text-shadow: 0 2px 14px rgba(143, 85, 223, .55);
	white-space: nowrap;
}

.pod-rank-1 .pod-name { font-size: 25px; color: var(--gold-hi); text-shadow: 0 2px 16px rgba(201, 164, 91, .55); }

.pod-name .honorific { color: var(--purple-hi); font-size: .72em; }
.pod-name .epithet { color: var(--muted); font-size: .72em; }

.pod-honorific { display: block; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--purple-hi); margin-top: 2px; }

.pod-stat { margin-top: 4px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pod-stat b { color: var(--text); font-weight: 600; }

.podium-base {
	display: block;
	margin: -30px auto 0;
	width: min(620px, 92%);
	position: relative;
	z-index: 0;
}

/* ---- the board ---- */
.board-scroll-cue { display: none; margin: 30px auto -22px; text-align: center; color: var(--faint); font-size: 12px; }
.board-wrap { max-width: 780px; margin: 34px auto 0; overflow-x: auto; border-radius: 8px; }
.board-wrap:focus-visible { outline: 2px solid var(--purple-hi); outline-offset: 4px; }

.board { width: 100%; min-width: 620px; border-collapse: collapse; }
.board caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.board th {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--faint);
	text-align: left;
	padding: 0 14px 10px;
}

.board th.c-rank { width: 64px; }
.board th.c-lvl, .board td.c-lvl { text-align: center; width: 90px; }
.board th.c-xp, .board td.c-xp { text-align: right; width: 150px; }

.board td {
	padding: 11px 14px;
	border-top: 1px solid rgba(143, 85, 223, .12);
	font-size: 15px;
	color: var(--muted);
	background: linear-gradient(180deg, rgba(21, 16, 34, .5), rgba(11, 8, 18, .35));
}

.board tr:hover td { background: linear-gradient(180deg, rgba(143, 85, 223, .12), rgba(11, 8, 18, .35)); }

.board td.c-rank {
	font-family: var(--display);
	font-size: 19px;
	color: var(--purple-hi);
	text-shadow: 0 0 12px rgba(143, 85, 223, .4);
}

.board-player { display: flex; align-items: center; gap: 11px; }
.board tbody tr { animation: rise .35s ease-out backwards; }
.board-name { color: var(--text); font-weight: 600; }
.board-name .honorific { color: var(--purple-hi); font-weight: 600; }
.board-name .epithet { color: var(--muted); font-weight: 400; }
.board td.c-lvl { color: var(--text); font-variant-numeric: tabular-nums; }
.board td.c-xp { font-variant-numeric: tabular-nums; }
.board td.c-xp b { color: var(--gold-hi); font-weight: 600; }
.board-empty { text-align: center; color: var(--faint); font-style: italic; }
.monument-empty, .section-empty { grid-column: 1 / -1; margin: auto; padding: 38px 20px; color: var(--faint); text-align: center; }

.privacy-callout {
	position: relative;
	margin: 26px auto 0;
	max-width: 760px;
	display: grid;
	grid-template-columns: 88px 1fr;
	align-items: center;
	gap: 22px;
	border-block: 1px solid rgba(143, 85, 223, .3);
	background: linear-gradient(90deg, transparent, rgba(143, 85, 223, .1) 18%, rgba(143, 85, 223, .06) 82%, transparent);
	padding: 18px 24px;
}

.privacy-callout-art {
	width: 88px;
	height: 88px;
	object-fit: contain;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .38));
}

.privacy-callout h3 {
	margin: 0;
	font-family: var(--display);
	font-size: 21px;
	font-weight: 400;
	color: var(--text);
}

.privacy-callout > div > p:last-child {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--faint);
}

.privacy-callout code {
	font-family: var(--display);
	font-size: 14px;
	color: var(--purple-hi);
	background: rgba(143, 85, 223, .12);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 2px 8px;
}

.privacy-callout > div > p:not([class]) {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--faint);
}

.privacy-commands {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.privacy-commands p {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	border: 1px solid rgba(143, 85, 223, .2);
	border-radius: 7px;
	background: rgba(8, 6, 14, .3);
	padding: 8px 10px;
}

.privacy-commands strong { color: var(--text); font-size: 12px; }
.privacy-commands code { white-space: nowrap; }
.privacy-callout p.privacy-note { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--faint); }

/* ======================= etched in the void ======================= */
.records-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.record-card {
	position: relative;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel);
	padding: 22px 20px 20px;
	text-align: center;
	overflow: hidden;
	transition: border-color .2s ease, transform .2s ease;
}

.record-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }

.record-card::before,
.record-card::after {
	content: "";
	position: absolute;
	width: 54px;
	height: 52px;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: .55;
	pointer-events: none;
}

.record-card::before { top: -2px; left: -2px; background-image: url("assets/world/corner-tl.png"); }
.record-card::after { right: -2px; bottom: -2px; background-image: url("assets/world/corner-br.png"); background-position: bottom right; }

.record-card { animation: rise .45s ease-out backwards; }

.record-art-wrap { height: 96px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.record-art { display: block; max-width: 132px; max-height: 96px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)); }
.record-art.px { max-width: none; max-height: none; }

.record-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--purple-hi);
}

.record-holder {
	font-family: var(--display);
	font-size: 24px;
	margin-top: 6px;
	color: var(--text);
	text-shadow: 0 2px 14px rgba(143, 85, 223, .5);
}

.record-holder .honorific { color: var(--purple-hi); font-size: .68em; }
.record-holder .epithet { color: var(--muted); font-size: .68em; }

.record-value { margin-top: 4px; font-size: 14px; color: var(--muted); }
.record-value b { color: var(--gold-hi); font-weight: 600; }

.record-detail { margin-top: 7px; min-height: 38px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.record-date { margin-top: 10px; font-size: 11.5px; letter-spacing: .04em; color: var(--faint); }
.record-fresh {
	position: absolute;
	top: 14px;
	right: 0;
	padding: 3px 12px 3px 14px;
	font-family: var(--display);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold-hi);
	background: linear-gradient(90deg, rgba(201, 164, 91, .26), rgba(201, 164, 91, .08));
	border: 1px solid rgba(201, 164, 91, .42);
	border-right: 0;
	border-radius: 5px 0 0 5px;
	animation: fresh-glint 5s ease-in-out infinite;
}

@keyframes fresh-glint {
	0%, 100% { box-shadow: 0 0 0 rgba(226, 192, 130, 0); }
	50% { box-shadow: 0 0 14px rgba(226, 192, 130, .35); }
}

.record-card.is-unclaimed { background: linear-gradient(180deg, rgba(23, 18, 35, .72), rgba(12, 9, 20, .72)); }
.record-card.is-unclaimed .record-art { opacity: .42; filter: grayscale(.65); }
.record-card.is-unclaimed .record-holder { color: var(--faint); text-shadow: none; }

/* ======================= the coin ledger ======================= */
.economy-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 22px;
	align-items: stretch;
}

.economy-hero, .economy-hoard { min-width: 0; }

.economy-hero {
	border: 1px solid rgba(201, 164, 91, .35);
	border-radius: 10px;
	background:
		radial-gradient(420px 260px at 50% 110%, rgba(201, 164, 91, .14) 0%, transparent 70%),
		var(--panel);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 34px 24px;
	gap: 8px;
}

.economy-coins { margin-bottom: 16px; }

.economy-total {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(34px, 4.4vw, 52px);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.economy-sub { margin-top: 10px; font-size: 13.5px; color: var(--muted); max-width: min(34ch, 100%); }

.economy-hoard {
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel);
	padding: 22px 24px;
}

.hoard-eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--purple-hi);
	margin-bottom: 14px;
}

.hoard-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }

.hoard-list li { display: flex; min-width: 0; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(143, 85, 223, .12); }
.hoard-list li:last-child { padding-bottom: 0; border-bottom: 0; }

.hoard-rank { flex: 0 0 20px; font-family: var(--display); color: var(--purple-hi); text-align: center; }
.hoard-sprite { flex: 0 0 40px; width: 40px; height: 34px; object-fit: contain; image-rendering: pixelated; }

.hoard-meta { display: block; flex: 1; min-width: 0; }
.hoard-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--text); font-weight: 600; }

.hoard-bar {
	display: block;
	margin-top: 5px;
	height: 7px;
	border-radius: 4px;
	background: rgba(143, 85, 223, .12);
	overflow: hidden;
}

.hoard-bar i {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--gold) 0%, var(--gold-hi) 100%);
	box-shadow: 0 0 10px rgba(201, 164, 91, .5);
	transform-origin: left;
	transition: transform 1.2s cubic-bezier(.22, .8, .3, 1);
}

.hoard-count { flex: 0 0 auto; font-size: 13.5px; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.hoard-empty { color: var(--faint); font-style: italic; }

/* ======================= wilderness watch ======================= */
#wilderness {
	border-radius: 12px;
	background:
		radial-gradient(720px 300px at 50% 0%, rgba(207, 83, 83, .07) 0%, transparent 70%);
	padding-top: 8px;
}

.wild-banner { display: block; margin: 0 auto; width: min(720px, 100%); filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .5)); }

.wild-grid {
	display: grid;
	grid-template-columns: 1fr 1.5fr 1fr;
	gap: 22px;
	margin-top: 30px;
	align-items: start;
}

.wild-crest { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }

.wild-crest img { width: 128px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)); animation: skull-pulse 3.6s ease-in-out infinite; }

@keyframes skull-pulse {
	0%, 100% { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)); }
	50% { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 24px rgba(207, 83, 83, .5)); }
}

.wild-crest strong {
	font-family: var(--display);
	font-size: 34px;
	line-height: 1;
	color: #e8a598;
	text-shadow: 0 0 18px rgba(207, 83, 83, .5);
	margin-top: 6px;
}

.wild-feed { min-width: 0; border: 1px solid rgba(207, 83, 83, .25); border-radius: 10px; background: var(--panel); padding: 18px 20px; }

.wild-list { list-style: none; display: flex; flex-direction: column; }

.wild-list li {
	padding: 10px 4px;
	border-top: 1px solid rgba(207, 83, 83, .14);
	font-size: 14.5px;
	color: var(--muted);
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.wild-list li:first-child { border-top: 0; }
.wild-list li:hover { background: linear-gradient(90deg, rgba(207, 83, 83, .08), transparent 75%); }
.wild-level { color: var(--faint); font-size: 12.5px; }
.wild-killer { color: var(--text); font-weight: 600; }
.wild-victim { color: #e8a598; font-weight: 600; }
.wild-versus { color: var(--faint); }
.wild-time { margin-left: auto; font-size: 12px; color: var(--faint); }
.wild-empty { justify-content: center; color: var(--faint); font-style: italic; text-align: center; }

.wild-deadliest { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }

.wild-badge { width: 190px; }

.wild-name {
	font-family: var(--display);
	font-size: 26px;
	color: var(--text);
	text-shadow: 0 2px 14px rgba(207, 83, 83, .45);
}

.wild-name .honorific { color: var(--purple-hi); font-size: .7em; }
.wild-name .epithet { display: block; color: var(--muted); font-size: .58em; margin-top: 4px; }

/* ======================= footer ======================= */
.footer-note { font-size: 12.5px; color: var(--faint); text-align: center; flex: 1; }

/* ======================= responsive ======================= */
/* Short viewports (landscape phones, in-app browsers with heavy chrome):
   compact the hero so the ledger reaches the first fold. */
@media (max-height: 760px) {
	.chronicle-hero { padding-top: 10px; padding-bottom: 10px; }
	.hero-title { font-size: clamp(40px, 5.6vw, 60px); }
	.chronicle-status { margin-top: 12px; }
	.live-line { margin-top: 14px; }
	.fiction-notice { margin-top: 12px; }
}

@media (max-width: 700px) {
	.board-scroll-cue { display: block; }
}

@media (max-width: 980px) {
	.pulse-grid { grid-template-columns: repeat(3, 1fr); }
	.feed-grid { grid-template-columns: 1fr; }
	.almanac { position: static; margin-top: 66px; }
	.records-grid { grid-template-columns: repeat(2, 1fr); }
	.economy-grid { grid-template-columns: minmax(0, 1fr); }
	.wild-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

@media (max-width: 600px) {
	.fiction-notice { width: calc(100% - 36px); grid-template-columns: 72px 1fr; gap: 16px; padding: 20px 18px; }
	.fiction-notice::after { display: none; }
	.pulse-grid { grid-template-columns: repeat(2, 1fr); }
	.records-grid { grid-template-columns: 1fr; }
	.section { margin-top: 58px; }
	.skill-rail { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; max-width: none; margin-inline: -28px; padding: 4px 28px 14px; scroll-snap-type: x proximity; scrollbar-width: thin; }
	.skill-tab { flex: 0 0 auto; scroll-snap-align: start; }
	.podium { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 54px; min-height: 200px; }
	.pod-stage { height: 108px; }
	.pod-crown { width: 44px; top: -38px; }
	.pod-rank-1 .pod-crown { width: 50px; top: -46px; }
	.pod-name { font-size: 17px; }
	.pod-name .epithet { display: none; }
	.pod-rank-1 .pod-name { font-size: 20px; }
	.pod-stat { max-width: 110px; font-size: 11px; line-height: 1.35; }
	.podium-base { margin-top: -20px; }
	.feed-showcase-text { font-size: 10.5px; }
	.feed-copy { align-items: flex-start; flex-direction: column; gap: 3px; }
	.feed-time { margin-left: 0; }
	.board-scroll-cue { display: block; }
	.board td { padding: 9px 10px; font-size: 14px; }
	.board th, .board td { white-space: nowrap; }
	.privacy-callout { grid-template-columns: 64px 1fr; gap: 14px; padding-inline: 10px; }
	.privacy-callout-art { width: 64px; height: 64px; }
	.privacy-commands { grid-template-columns: 1fr; }
	.wild-list li { flex-wrap: wrap; }
	.wild-time { flex: 0 0 100%; margin-left: 0; }
}

@media (max-width: 420px) {
	.chronicle .nav { padding-inline: 16px; }
	.chronicle .nav-side { gap: 8px; }
	.chronicle .launch-chip { display: none; }
	.chronicle .nav-brand img { width: 132px; }
	.chronicle-status { border-radius: 9px; text-align: left; }
	.fiction-notice { grid-template-columns: 1fr; text-align: center; }
	.fiction-notice-mark { width: 72px; margin: auto; }
	.pulse, .section { padding-inline: 18px; }
	.skill-rail { margin-inline: -18px; padding-inline: 18px; }
	.feed-panel, .wild-feed { padding-inline: 13px; }
	.feed-showcase-text { font-size: 9px; }
	.pod-name { max-width: 94px; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
	.pod-rank-1 .pod-name { font-size: 17px; }
	.pod-stat { max-width: 92px; font-size: 10px; }
	.privacy-callout { grid-template-columns: 1fr; text-align: center; }
	.privacy-callout-art { margin: auto; }
	.wild-banner { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.ember, .live-line-rune, .pulse-dot, .almanac-portal, .pod-crown { animation: none; }
	.pulse-grid, .live-line, .feed-list li { animation: none; }
	*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}