/* EvrenselKO game guide (guide.html). Builds on styles.css: same variables, nav, footer, buttons, .table and
   .reveal. Every class here is namespaced (g-, toc, shot, anvil) so nothing in styles.css is overridden by accident. */

.g-page [hidden] { display: none !important; }

/* ==== Hero ======================================================================== */

.g-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 64vh;
	display: grid;
	align-items: end;
	padding: 128px 0 56px;
	background:
		radial-gradient(900px 480px at 50% 110%, rgba(231, 181, 94, 0.14), transparent 62%),
		radial-gradient(640px 420px at 6% 20%, rgba(74, 146, 255, 0.11), transparent 60%),
		radial-gradient(640px 420px at 94% 16%, rgba(224, 82, 74, 0.11), transparent 60%),
		linear-gradient(180deg, #05070c 0%, var(--bg) 100%);
}
.g-hero__scene { position: absolute; inset: auto 0 0; width: 100%; height: 72%; z-index: -2; pointer-events: none; }
.g-hero__scene .g-flag { transform-box: fill-box; transform-origin: left center; animation: g-wave 2.6s ease-in-out infinite; }
.g-hero__fog {
	position: absolute;
	inset: auto -20% 0;
	height: 46%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(50% 60% at 30% 70%, rgba(150, 170, 200, 0.08), transparent 70%),
		radial-gradient(40% 50% at 75% 80%, rgba(231, 181, 94, 0.06), transparent 70%);
	animation: g-drift 26s ease-in-out infinite alternate;
}
.g-hero__inner { display: grid; gap: 18px; justify-items: start; }
.g-hero h1 { font: 600 clamp(34px, 6vw, 62px)/1.08 var(--display); letter-spacing: 0.01em; max-width: 14ch; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6); }
.g-hero h1 span { color: var(--gold); }
.g-hero__lead { max-width: 560px; color: var(--muted); font-size: 17px; }
.g-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.g-stats {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(7, 9, 15, 0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.g-stats li { padding: 16px 18px; display: grid; gap: 4px; }
.g-stats li + li { border-left: 1px solid var(--line); }
.g-stats strong { font: 700 clamp(22px, 3vw, 30px)/1 var(--display); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.g-stats span { color: var(--muted); font-size: 13px; }

@keyframes g-wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-6deg) scaleX(0.9); } }
@keyframes g-drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
@keyframes g-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.85); } 50% { opacity: 0.7; transform: scale(1.15); } }

/* ==== Layout + table of contents ================================================== */

.guide {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 48px;
	padding: 64px 0 96px;
}
.guide__body { min-width: 0; display: grid; gap: clamp(72px, 9vw, 112px); }

.toc {
	position: sticky;
	top: 92px;
	align-self: start;
	max-height: calc(100vh - 110px);
	overflow: auto;
	padding: 18px 14px 18px 0;
}
.toc > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font: 600 12px/1 var(--body);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1.6px solid var(--gold);
	border-bottom: 1.6px solid var(--gold);
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}
.toc[open] > summary::after { transform: rotate(-135deg); }
.toc__title { margin: 0 0 12px 14px; font: 600 12px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.toc ol { list-style: none; margin: 0; padding: 0; position: relative; border-left: 1px solid var(--line); }
.toc li a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px 9px 14px;
	color: var(--muted);
	font-size: 14px;
	text-decoration: none;
	border-radius: 0 10px 10px 0;
	transition: color 0.2s ease, background 0.2s ease;
}
.toc li a svg { width: 16px; height: 16px; flex: none; color: var(--faint); transition: color 0.2s ease; }
.toc li a::before {
	content: "";
	position: absolute;
	left: -1px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	border-radius: 2px;
	background: var(--gold);
	transform: scaleY(0);
	transition: transform 0.25s ease;
}
.toc li a:hover { color: var(--text); background: var(--surface); }
.toc li a.is-active { color: var(--text); background: linear-gradient(90deg, rgba(231, 181, 94, 0.1), transparent); }
.toc li a.is-active svg { color: var(--gold); }
.toc li a.is-active::before { transform: scaleY(1); }
.toc__progress { margin: 16px 0 0 14px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.toc__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transition: width 0.2s linear; }

@media (min-width: 961px) {
	.toc > summary { display: none; }
}

/* ==== Section scaffolding ========================================================== */

.g-sec { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.g-sec__head { display: grid; gap: 12px; }
.g-sec__head h2 { font: 600 clamp(26px, 3.6vw, 38px)/1.15 var(--display); }
.g-sec__head p:not(.eyebrow) { color: var(--muted); max-width: 720px; }
.g-sec h3 { font: 600 20px/1.3 var(--display); }
.g-sec p a,
.g-sec li a { color: var(--gold); }
.g-prose { display: grid; gap: 14px; color: var(--muted); max-width: 760px; }
.g-prose b,
.g-prose strong { color: var(--text); font-weight: 600; }
.g-src { color: var(--faint); font-size: 12.5px; }

.g-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--muted); }
.g-list li { position: relative; padding-left: 22px; }
.g-list li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 0.62em;
	width: 7px;
	height: 7px;
	transform: rotate(45deg);
	background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
}
.g-list b { color: var(--text); font-weight: 600; }

.g-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.g-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Hover card, in the style of styles.css .card */
.g-card {
	position: relative;
	padding: 22px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.g-card:hover {
	transform: translateY(-4px);
	border-color: rgba(231, 181, 94, 0.35);
	box-shadow: 0 18px 50px -24px rgba(231, 181, 94, 0.35);
}
.g-card h3 { font: 600 17px/1.3 var(--body); margin-bottom: 6px; }
.g-card p { color: var(--muted); font-size: 14.5px; }
.g-card__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 14px;
	border-radius: 12px;
	color: var(--gold);
	border: 1px solid rgba(231, 181, 94, 0.25);
	background: rgba(231, 181, 94, 0.07);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.g-card__icon svg { width: 22px; height: 22px; }
.g-card:hover .g-card__icon { box-shadow: 0 0 24px 2px rgba(231, 181, 94, 0.25); transform: translateY(-2px) rotate(-4deg); }
.g-card__big { display: block; font: 700 28px/1 var(--display); color: var(--gold-hi); margin-bottom: 8px; font-variant-numeric: tabular-nums; }

/* Callout */
.g-callout {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 18px;
	align-items: start;
	padding: 20px 22px;
	border-radius: var(--radius);
	border: 1px solid rgba(231, 181, 94, 0.28);
	background: linear-gradient(120deg, rgba(231, 181, 94, 0.1), rgba(231, 181, 94, 0.02) 60%);
}
.g-callout > svg { width: 30px; height: 30px; color: var(--gold); }
.g-callout p { color: var(--muted); }
.g-callout b { color: var(--text); }
.g-callout--warn { border-color: rgba(224, 82, 74, 0.35); background: linear-gradient(120deg, rgba(224, 82, 74, 0.12), rgba(224, 82, 74, 0.02) 60%); }
.g-callout--warn > svg { color: #ff9d94; }

/* Collapsible "how we calculate" */
.g-how { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.g-how summary { cursor: pointer; padding: 14px 18px; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.g-how summary::-webkit-details-marker { display: none; }
.g-how summary::after { content: "+"; color: var(--gold); font-size: 20px; line-height: 1; transition: transform 0.25s ease; }
.g-how[open] summary::after { transform: rotate(45deg); }
.g-how > div { padding: 0 18px 18px; color: var(--muted); font-size: 14.5px; display: grid; gap: 10px; }
.g-how code { font-size: 13px; color: var(--gold-hi); }
.g-how b { color: var(--text); font-weight: 600; }

/* ==== Screenshots ================================================================== */

/* guide.js unhides a figure (and its box) only once its image has loaded. */
.shots { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.shots--4 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.shot { margin: 0; display: grid; gap: 8px; }
.shots[hidden],
.shot[hidden] { display: none; }
.shot__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; }
.shot img.is-loaded { opacity: 1; }
.shot figcaption { color: var(--faint); font-size: 13px; }

/* ==== Colony map ================================================================== */

.g-colony { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.g-map { border-radius: var(--radius); border: 1px solid var(--line); background: radial-gradient(closest-side, #121a28, #080b12); overflow: hidden; }
.g-map svg { width: 100%; height: auto; }
.g-map .g-map__pulse { transform-box: fill-box; transform-origin: center; animation: g-pulse 2.4s ease-in-out infinite; }
.g-map .g-flag { transform-box: fill-box; transform-origin: left center; animation: g-wave 2.2s ease-in-out infinite; }
.g-map text { font: 600 13px var(--body); fill: var(--muted); }
.g-map .g-map__title { font: 600 14px var(--display); fill: var(--text); }

/* ==== Monsters ===================================================================== */

.g-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: end;
	padding: 16px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--surface);
}
.g-field { display: grid; gap: 6px; min-width: 0; }
.g-field label,
.g-field__label { font: 600 11.5px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.g-field--grow { flex: 1 1 220px; }
.g-input,
.g-select {
	height: 42px;
	padding: 0 14px;
	border-radius: 10px;
	border: 1px solid var(--line-strong);
	background: rgba(7, 9, 15, 0.6);
	color: var(--text);
	font: 500 15px var(--body);
	width: 100%;
}
.g-input:focus,
.g-select:focus { outline: none; border-color: rgba(231, 181, 94, 0.6); box-shadow: 0 0 0 3px rgba(231, 181, 94, 0.15); }
.g-input--search { padding-left: 38px; background: rgba(7, 9, 15, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E") no-repeat 12px 50% / 18px; }
.g-input--level { width: 92px; }
.g-toggle { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); font-size: 14px; cursor: pointer; user-select: none; }
.g-toggle input { accent-color: var(--gold); width: 16px; height: 16px; margin: 0; }
.g-toggle:has(input:checked) { color: var(--text); border-color: rgba(231, 181, 94, 0.55); background: rgba(231, 181, 94, 0.08); }
.g-count { margin-left: auto; color: var(--faint); font-size: 13px; align-self: center; }

.g-tablewrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); }
.g-table { min-width: 640px; }
.g-caption { caption-side: bottom; padding: 10px 14px; text-align: left; }
.g-table tbody tr:first-child:not(:hover) { background: none; }
.g-table th { white-space: nowrap; padding: 0; }
.g-table th button,
.g-table th > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 12px 14px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}
.g-table th > span { cursor: default; }
.g-table th.num button { justify-content: flex-end; }
.g-table th button::after { content: "↕"; opacity: 0.35; font-size: 11px; }
.g-table th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; color: var(--gold); }
.g-table th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; color: var(--gold); }
.g-table th button:hover { color: var(--text); }
.g-table td { padding: 10px 14px; white-space: nowrap; }
.g-table td.g-name { white-space: normal; }
.g-row { cursor: pointer; }
.g-row.is-open { background: rgba(231, 181, 94, 0.06) !important; }
.g-row__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--text); font: 600 15px var(--body); cursor: pointer; text-align: left; }
.g-row__toggle::before { content: "▸"; color: var(--gold); transition: transform 0.2s ease; display: inline-block; }
.g-row.is-open .g-row__toggle::before { transform: rotate(90deg); }
.g-drops-row td { padding: 4px 14px 16px; white-space: normal; background: rgba(231, 181, 94, 0.03); }
.g-dim { color: var(--faint); }
.g-good { color: var(--ok); }
.g-warn { color: #ffb37a; }

/* Badges + chips */
.g-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; font: 700 12px/1 var(--body); font-variant-numeric: tabular-nums; border: 1px solid var(--line-strong); color: var(--text); white-space: nowrap; }
.g-badge--lv { color: var(--gold-hi); border-color: rgba(231, 181, 94, 0.4); background: rgba(231, 181, 94, 0.08); }
.g-badge--np { color: #1b1206; border-color: transparent; background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); }
.g-badge--count { color: var(--muted); }

.g-drops { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.g-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 4px 12px 4px 4px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
	font-size: 13.5px;
	line-height: 1.25;
	max-width: 100%;
}
.g-chip__name { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.g-chip__pct { color: var(--gold-hi); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-chip--gear { border-color: rgba(231, 181, 94, 0.45); }
.g-chip--group { border-color: rgba(167, 139, 250, 0.5); }
.g-chip--group .g-chip__pct { color: #c4b5fd; }
.g-chip[title] { cursor: help; }

/* Game-style item slot (icons from /img/items/<num>.webp; the img removes itself if the icon is missing) */
.g-slot {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 7px;
	border: 1px solid #3a3020;
	background: radial-gradient(circle at 50% 35%, #2a2418, #0e0c08);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 8px rgba(231, 181, 94, 0.12);
	color: var(--gold);
	overflow: hidden;
}
.g-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-slot svg { width: 18px; height: 18px; opacity: 0.85; }
.g-chip--group .g-slot { color: #c4b5fd; border-color: #2e2648; background: radial-gradient(circle at 50% 35%, #231d38, #0c0a14); }

/* Best picks (three monster cards) */
.g-picks { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.g-mon { padding: 18px; display: grid; gap: 12px; align-content: start; }
.g-mon:hover { transform: translateY(-4px) rotate(-0.4deg); }
.g-mon__top { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.g-mon__top h4 { font: 600 17px/1.25 var(--display); min-width: 0; }
.g-mon__badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* .g-pick prefix: beats .g-card p, which would set the size and colour of every paragraph in the card. */
.g-pick .eyebrow { margin: 0; font-size: 12px; color: var(--gold); }
.g-pick .g-pick__val { font: 700 22px/1 var(--display); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.g-pick p.g-dim { color: var(--faint); font-size: 13px; }
.g-pick .g-drops { gap: 6px; }

/* Ranked bar lists (EXP / coins) */
.g-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: g-rank; }
.g-rank li {
	counter-increment: g-rank;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	gap: 6px 14px;
	align-items: center;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--surface);
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.g-rank li:hover { border-color: rgba(231, 181, 94, 0.35); transform: translateX(4px); }
.g-rank li::before {
	content: counter(g-rank);
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	font: 700 13px/1 var(--body);
	color: var(--muted);
	background: rgba(255, 255, 255, 0.05);
}
.g-rank li:first-child::before { color: #1b1206; background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); }
.g-rank li:nth-child(2)::before { color: #111; background: linear-gradient(180deg, #e8ecf2, #9aa3b2); }
.g-rank li:nth-child(3)::before { color: #1b0e06; background: linear-gradient(180deg, #e4a87a, #9c5a2e); }
.g-rank__name { font-weight: 600; min-width: 0; }
.g-rank__name small { color: var(--faint); font-weight: 500; margin-left: 6px; }
.g-rank__val { font-weight: 700; color: var(--gold-hi); font-variant-numeric: tabular-nums; text-align: right; }
.g-rank__meta { grid-column: 2 / -1; display: grid; gap: 6px; font-size: 12.5px; color: var(--faint); }
.g-bar { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.g-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transition: width 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.is-in .g-bar span,
.g-bar.is-in span { width: var(--w, 0%); }

/* NP cards */
.g-np { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.g-np__card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 24px; }
.g-np__medal { position: relative; width: 84px; height: 84px; }
.g-np__medal svg { width: 100%; height: 100%; }
.g-np__medal::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(231, 181, 94, 0.3); animation: g-pulse 2.8s ease-in-out infinite; }
.g-np__num { font: 700 44px/1 var(--display); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.g-np__num small { font-size: 16px; color: var(--gold); margin-left: 4px; }
.g-np__card h3 { font: 600 19px/1.2 var(--display); margin: 6px 0 4px; }

/* ==== Upgrades ===================================================================== */

/* The anvil sits below the table on every width, so the table gets the whole column. */
.g-upg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.g-rates { min-width: 560px; }
.g-rates td { vertical-align: top; }
.g-rates thead th { vertical-align: bottom; text-transform: none; letter-spacing: 0; font: 600 13px/1.3 var(--body); color: var(--text); }
.g-scroll { display: inline-flex; align-items: center; gap: 8px; }
.g-scroll__icons { display: inline-flex; gap: 4px; flex: none; }
.g-rates th:first-child,
.g-rates td:first-child { font-weight: 600; color: var(--text); }
.g-rate { display: grid; gap: 4px; min-width: 112px; }
.g-rate__val { font-weight: 700; font-variant-numeric: tabular-nums; }
.g-rate .g-bar span { background: linear-gradient(90deg, #8f1f22, var(--karus)); }
.g-rate[data-tier="mid"] .g-bar span { background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); }
.g-rate[data-tier="high"] .g-bar span { background: linear-gradient(90deg, #1f7a4b, var(--ok)); }
.g-rate--none { color: var(--faint); }
.g-upg__class { display: flex; flex-wrap: wrap; gap: 8px; }
html:not(.js) .g-upg__class { display: none; }
.anvil__warn { color: #ff9d94; font-size: 13.5px; }
.g-note { color: var(--faint); font-size: 13px; max-width: 760px; }

/* ==== Premium: Compare table (premium-compare.js; same block as store.css) =========== */

.premium-compare-block { display: grid; gap: 10px; }
.premium-compare-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); }
.premium-compare { min-width: 560px; }
.premium-compare caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.premium-compare tbody tr:first-child:not(:hover) { background: none; }
.premium-compare thead th { text-align: center; white-space: nowrap; vertical-align: bottom; }
.premium-compare__tier img { display: block; width: 28px; height: 28px; margin: 0 auto 6px; }
.premium-compare tbody th { padding: 12px 16px; text-align: left; font: 500 14px/1.35 var(--body); letter-spacing: 0; text-transform: none; color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, 0.045); }
.premium-compare tbody tr:last-child th { border-bottom: 0; }
.premium-compare td.num { text-align: center; white-space: nowrap; }
.premium-compare__note { color: var(--muted); font-size: 13.5px; }
.g-premium-bank { display: grid; gap: 10px; max-width: 760px; }
.g-premium-bank p { color: var(--muted); }

.anvil {
	position: relative;
	display: grid;
	gap: 14px;
	padding: 20px;
	border-radius: var(--radius);
	border: 1px solid rgba(231, 181, 94, 0.25);
	background: radial-gradient(120% 80% at 50% 0%, rgba(231, 181, 94, 0.1), transparent 60%), rgba(255, 255, 255, 0.02);
}
.anvil__art { position: relative; aspect-ratio: 4 / 3; }
.anvil__art svg { width: 100%; height: 100%; overflow: visible; }
.anvil__hammer { transform-box: view-box; transform-origin: 196px 46px; animation: anvil-swing 1.6s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
.anvil__sparks circle,
.anvil__sparks path { opacity: 0; transform-box: fill-box; transform-origin: center; animation: anvil-spark 1.6s ease-out infinite; }
.anvil__sparks .s2 { animation-name: anvil-spark-2; }
.anvil__sparks .s3 { animation-name: anvil-spark-3; }
.anvil__sparks .s4 { animation-name: anvil-spark-4; }
.anvil__glow { animation: anvil-glow 1.6s ease-out infinite; }
/* Raised at 38deg (head up and back), strikes at 0deg, small bounce, then lifts again. */
@keyframes anvil-swing { 0%, 42%, 100% { transform: rotate(38deg); } 58% { transform: rotate(0deg); } 64% { transform: rotate(6deg); } 70% { transform: rotate(0deg); } }
@keyframes anvil-spark { 0%, 57% { opacity: 0; transform: translate(0, 0) scale(0.5); } 60% { opacity: 1; } 85%, 100% { opacity: 0; transform: translate(-34px, -30px) scale(1.2); } }
@keyframes anvil-spark-2 { 0%, 57% { opacity: 0; transform: translate(0, 0) scale(0.5); } 60% { opacity: 1; } 85%, 100% { opacity: 0; transform: translate(30px, -38px) scale(1.1); } }
@keyframes anvil-spark-3 { 0%, 57% { opacity: 0; transform: translate(0, 0) scale(0.5); } 60% { opacity: 1; } 90%, 100% { opacity: 0; transform: translate(-12px, -48px) scale(0.9); } }
@keyframes anvil-spark-4 { 0%, 57% { opacity: 0; transform: translate(0, 0) scale(0.5); } 60% { opacity: 1; } 88%, 100% { opacity: 0; transform: translate(42px, -14px) scale(1); } }
@keyframes anvil-glow { 0%, 56% { opacity: 0; } 60% { opacity: 0.9; } 100% { opacity: 0; } }

.anvil__form { display: grid; gap: 10px; }
.anvil__result {
	min-height: 48px;
	display: grid;
	place-items: center;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid var(--line);
	text-align: center;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--muted);
}
.anvil__result.is-win { color: #d3f5e2; border-color: rgba(76, 208, 138, 0.45); background: rgba(76, 208, 138, 0.08); animation: anvil-pop 0.5s ease; }
.anvil__result.is-fail { color: #ffd6d1; border-color: rgba(224, 82, 74, 0.45); background: rgba(224, 82, 74, 0.08); animation: anvil-shake 0.45s ease; }
.anvil__burst { position: absolute; inset: 0; pointer-events: none; }
.anvil__burst i {
	position: absolute;
	left: 50%;
	top: 52%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gold-hi);
	box-shadow: 0 0 10px 2px rgba(246, 213, 138, 0.8);
	animation: anvil-burst 0.9s ease-out forwards;
}
.anvil__burst.is-fail i { background: #ff7a6b; box-shadow: 0 0 8px 1px rgba(224, 82, 74, 0.7); animation-duration: 0.6s; }
@keyframes anvil-burst { from { transform: translate(-50%, -50%); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); opacity: 0; } }
@keyframes anvil-pop { 0% { transform: scale(0.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes anvil-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.anvil__tally { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: var(--faint); font-size: 12.5px; }

/* Wide: art on the left, form on the right, title across both. */
@media (min-width: 701px) {
	.anvil { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 14px 24px; align-items: center; }
	.anvil > h3 { grid-column: 1 / -1; }
}

/* ==== Store teaser ================================================================= */

.g-store {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	padding: clamp(22px, 4vw, 36px);
	border-radius: 20px;
	border: 1px solid rgba(231, 181, 94, 0.3);
	background:
		radial-gradient(60% 120% at 0% 50%, rgba(231, 181, 94, 0.16), transparent 70%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}
.g-store__gem { width: 96px; height: 96px; filter: drop-shadow(0 10px 30px rgba(231, 181, 94, 0.35)); }
.g-store__gem .g-gem-shine { animation: g-pulse 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.g-store h2 { font: 600 clamp(22px, 3vw, 30px)/1.2 var(--display); margin: 6px 0 8px; }
.g-store p:not(.eyebrow) { color: var(--muted); }

.g-alert { margin: 0; }

/* ==== Responsive =================================================================== */

@media (max-width: 1100px) {
	.g-colony { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
	html { scroll-padding-top: 84px; }
	.guide { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 32px; }
	.toc {
		position: sticky;
		top: 68px;
		z-index: 20;
		max-height: none;
		overflow: visible;
		padding: 14px 16px;
		border-radius: 14px;
		border: 1px solid var(--line);
		background: rgba(7, 9, 15, 0.9);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}
	.toc[open] > nav { margin-top: 12px; max-height: 60vh; overflow: auto; }
	.toc__title { display: none; }
	.g-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-stats li:nth-child(odd) { border-left: 0; }
	.g-stats li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 700px) {
	.g-grid--2,
	.g-np { grid-template-columns: 1fr; }
	.g-store { grid-template-columns: 1fr; justify-items: start; }
	.g-store__gem { width: 72px; height: 72px; }
}

@media (max-width: 560px) {
	.g-hero { min-height: 0; padding: 104px 0 40px; }
	.g-hero__cta .btn { flex: 1 1 auto; justify-content: center; }
	.g-stats li { padding: 12px 14px; }
	.g-table { min-width: 0; }
	.g-table td,
	.g-table th button,
	.g-table th > span { padding-inline: 10px; }
	.g-controls { padding: 12px; }
	.g-count { margin-left: 0; width: 100%; }
	.g-np__card { grid-template-columns: 1fr; justify-items: start; }
	.g-callout { grid-template-columns: 1fr; }
	.g-rates { min-width: 520px; }
	.g-rank li { padding: 10px 12px; gap: 6px 10px; }
	.shots { grid-template-columns: 1fr; }
	.shots--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: the monster table drops "Exp / kill" too (On field is .hide-sm). */
@media (max-width: 430px) {
	.hide-xs { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	/* styles.css already stops every animation and transition; make the end states explicit. */
	.g-hero__fog,
	.g-hero__scene .g-flag,
	.g-map .g-map__pulse,
	.g-map .g-flag,
	.anvil__hammer,
	.anvil__glow,
	.g-np__medal::after,
	.g-store__gem .g-gem-shine { animation: none !important; }
	.anvil__hammer { transform: rotate(20deg); }
	.anvil__sparks circle,
	.anvil__sparks path,
	.anvil__glow { animation: none !important; opacity: 0; }
	.g-bar span { width: var(--w, 0%) !important; }
	.shot img { transition: none; }
}