/* ════════════════════════════════════════════════════════════════
   Baghchaal — theme styles
   Dark jungle-premium: deep green-black, tiger amber, goat jade.
   ════════════════════════════════════════════════════════════════ */

:root {
	--bg: #0c110d;
	--bg-soft: #10160f;
	--panel: #151d14;
	--panel-2: #1a2418;
	--line: rgba(246, 207, 93, 0.10);
	--line-soft: rgba(255, 255, 255, 0.07);
	--text: #eef4ec;
	--muted: #a5b8a6;
	--amber: #f2b21d;
	--amber-2: #f6cf5d;
	--amber-deep: #cd7c11;
	--jade: #4fae8d;
	--jade-2: #7ed0b2;
	--radius: 18px;
	--radius-sm: 12px;
	--font-display: "Fraunces", Georgia, serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
	--wrap: 1160px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
	background:
		radial-gradient(1100px 500px at 85% -100px, rgba(242, 178, 29, 0.06), transparent 60%),
		radial-gradient(900px 500px at -100px 30%, rgba(79, 174, 141, 0.05), transparent 60%),
		var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--amber-2); text-decoration: none; }
a:hover { color: var(--amber); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }

/* ── Buttons & links ────────────────────────────────────────── */
.btn {
	display: inline-flex; align-items: center; gap: 8px;
	border: 0; border-radius: 999px; cursor: pointer;
	padding: 14px 26px; font-family: var(--font-body);
	font-size: 15px; font-weight: 700; white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-sm { padding: 9px 18px; font-size: 13px; }
.btn-primary {
	background: linear-gradient(180deg, var(--amber-2), var(--amber-deep));
	color: #2b1d02;
	box-shadow: 0 10px 26px rgba(242, 178, 29, 0.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(242, 178, 29, 0.36); color: #2b1d02; }
.btn-goat {
	background: linear-gradient(180deg, var(--jade-2), #2e8767);
	color: #06231a;
	box-shadow: 0 10px 26px rgba(79, 174, 141, 0.25);
}
.btn-ghost {
	background: rgba(255, 255, 255, 0.05);
	color: var(--text);
	border: 1px solid var(--line-soft);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); transform: translateY(-2px); }
.text-link { font-weight: 700; font-size: 14px; }

.eyebrow {
	display: inline-block;
	color: var(--amber-2);
	font-size: 12px; font-weight: 800;
	letter-spacing: 0.16em; text-transform: uppercase;
	margin-bottom: 14px;
}

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
	position: sticky; top: 0; z-index: 60;
	background: rgba(12, 17, 13, 0.96);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line-soft); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.site-header-inner { display: flex; align-items: center; gap: 26px; min-height: 74px; }

.site-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.site-brand-mark { flex: 0 0 auto; }
.site-brand-mark img { display: block; width: 56px; height: 56px; object-fit: contain; }
.site-brand-name { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 900; color: var(--text); line-height: 1.1; }
.site-brand-tag { display: block; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }

.site-nav { margin-left: auto; }
.site-menu { display: flex; list-style: none; gap: 4px; }
.site-menu a {
	display: block; padding: 9px 14px; border-radius: 10px;
	color: var(--muted); font-size: 14px; font-weight: 600;
}
.site-menu a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.site-menu .current-menu-item > a, .site-menu .current_page_item > a { color: var(--amber-2); }

.site-header-actions { display: flex; align-items: center; gap: 12px; }

/* Language toggle (EN / नेपाली) */
.lang-switch {
	display: inline-flex; align-items: center; gap: 2px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid var(--line-soft);
	border-radius: 999px;
	padding: 3px;
}
.lang-switch a {
	display: block; padding: 5px 12px; border-radius: 999px;
	color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1.2;
	transition: background 0.15s ease, color 0.15s ease;
}
.lang-switch a:hover { color: var(--text); }
.lang-switch a.is-active { background: linear-gradient(180deg, var(--amber-2), var(--amber-deep)); color: #2b1d02; }

/* Nepali locale: Devanagari-capable fonts, slightly relaxed rhythm */
html[lang^="ne"] body { font-family: "Noto Sans Devanagari", var(--font-body); }
html[lang^="ne"] h1, html[lang^="ne"] h2, html[lang^="ne"] h3, html[lang^="ne"] h4,
html[lang^="ne"] .site-brand-name, html[lang^="ne"] .footer-brand-row strong {
	font-family: "Noto Sans Devanagari", var(--font-display);
	letter-spacing: 0;
}
/* Devanagari stacks vowel signs and the reph well above Latin cap-height, so
   the tight Latin heading rhythm chops the top marks (ि ी ै and र्). Give
   every Nepali heading real line-box headroom — this is the whole fix. */
html[lang^="ne"] h1, html[lang^="ne"] h2, html[lang^="ne"] h3, html[lang^="ne"] h4 { line-height: 1.5; }
html[lang^="ne"] .hero h1 { line-height: 1.42; }
html[lang^="ne"] .eyebrow { letter-spacing: 0.06em; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; }

.mobile-nav { border-top: 1px solid var(--line-soft); background: var(--bg-soft); }
.mobile-menu { list-style: none; padding: 12px 24px 18px; }
.mobile-menu a { display: block; padding: 12px 4px; color: var(--text); font-weight: 600; border-bottom: 1px solid var(--line-soft); }

/* ── Hero ───────────────────────────────────────────────────── */
.hero { padding: clamp(60px, 9vw, 120px) 0 clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.hero h1 { font-size: clamp(42px, 6vw, 76px); font-weight: 900; }
.hero h1 .accent {
	background: linear-gradient(120deg, var(--amber-2), var(--amber-deep));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); max-width: 56ch; margin-top: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-note { color: var(--muted); font-size: 13px; margin-top: 16px; }

.hero-board { display: grid; place-items: center; }
.hero-board-svg {
	width: min(100%, 460px);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
	animation: board-float 7s ease-in-out infinite;
}
@keyframes board-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Shared board SVG (wooden ChiyaPasal style — frame drawn inside the SVG) */
.bg-board { display: block; border-radius: 24px; }

/* ── Scene images (AI-generated photo slots) ────────────────── */
.scene { margin: 0; }
.scene img, .scene-placeholder {
	display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
	border-radius: var(--radius); border: 1px solid var(--line);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}
.scene-placeholder {
	display: grid; place-items: center;
	background:
		radial-gradient(400px 200px at 30% 20%, rgba(242, 178, 29, 0.10), transparent 70%),
		radial-gradient(400px 220px at 75% 80%, rgba(79, 174, 141, 0.10), transparent 70%),
		linear-gradient(150deg, var(--panel-2), var(--panel));
}
.scene-placeholder span { font-size: 44px; opacity: 0.6; }
.scene figcaption { color: var(--muted); font-size: 13px; margin-top: 10px; text-align: center; }
.scene-tall img, .scene-tall .scene-placeholder { aspect-ratio: 4 / 3; }
.scene-tall { margin: 34px 0; }
.scene-card { margin: -8px 0 16px; }
.scene-card img, .scene-card .scene-placeholder { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); box-shadow: none; }
.scene-card figcaption { display: none; }

.gallery-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

/* ── ChiyaPasal callout band ────────────────────────────────── */
.cp-callout {
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	background: linear-gradient(135deg, rgba(242, 178, 29, 0.08), rgba(79, 174, 141, 0.07)), var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 32px;
	margin-top: 44px;
}
.cp-callout h3 { font-size: 21px; margin-bottom: 6px; }
.cp-callout p { color: var(--muted); font-size: 14.5px; max-width: 62ch; }

/* ── Fact strip ─────────────────────────────────────────────── */
.fact-strip { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.02); }
.fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 26px 24px; }
.fact { text-align: center; }
.fact strong { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 900; color: var(--amber-2); }
.fact span { color: var(--muted); font-size: 13px; font-weight: 600; }

/* ── Sections ───────────────────────────────────────────────── */
.section { padding: clamp(44px, 5.5vw, 72px) 0; }
.section-alt { background: rgba(255, 255, 255, 0.02); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.section-head { max-width: 720px; margin-bottom: clamp(30px, 4vw, 50px); }
.section-head h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 900; }
.section-head p { color: var(--muted); margin-top: 12px; font-size: 17px; }
.section-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; max-width: none; }
.section-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* ── Duo cards (tigers / goats) ─────────────────────────────── */
.duo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.duo-card {
	position: relative; overflow: hidden;
	background: var(--panel); border: 1px solid var(--line-soft);
	border-radius: var(--radius); padding: 30px;
}
.duo-card::before {
	content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 4px;
}
.duo-tiger::before { background: linear-gradient(90deg, var(--amber-2), var(--amber-deep)); }
.duo-goat::before { background: linear-gradient(90deg, var(--jade-2), #2e8767); }
.duo-icon { font-size: 40px; line-height: 1; margin-bottom: 16px; }
.duo-card h3 { font-size: 24px; margin-bottom: 10px; }
.duo-card p { color: var(--muted); font-size: 15px; margin-bottom: 14px; }

/* ── Steps ──────────────────────────────────────────────────── */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; list-style: none; counter-reset: none; }
.steps-grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 26px; }
.step-num {
	display: inline-grid; place-items: center;
	width: 40px; height: 40px; border-radius: 12px;
	background: rgba(242, 178, 29, 0.12); color: var(--amber-2);
	font-family: var(--font-display); font-size: 19px; font-weight: 900;
	margin-bottom: 14px;
}
.step-card h3 { font-size: 19px; margin-bottom: 8px; }
.step-card p { color: var(--muted); font-size: 14px; }

/* ── Play cards ─────────────────────────────────────────────── */
.play-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.play-card {
	background: linear-gradient(160deg, var(--panel-2), var(--panel));
	border: 1px solid var(--line);
	border-radius: var(--radius); padding: 34px;
	box-shadow: var(--shadow);
}
.play-card h3 { font-size: 26px; margin-bottom: 12px; }
.play-card p { color: var(--muted); margin-bottom: 22px; }
.play-card-online { border-color: rgba(79, 174, 141, 0.28); }

/* ── Heritage band ──────────────────────────────────────────── */
.heritage-band {
	background:
		radial-gradient(800px 300px at 50% 0, rgba(242, 178, 29, 0.07), transparent 70%),
		var(--bg-soft);
	border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
	padding: clamp(60px, 8vw, 100px) 0;
}
.heritage-inner { max-width: 820px; text-align: center; }
.heritage-band blockquote p {
	font-family: var(--font-display);
	font-size: clamp(22px, 3vw, 32px); font-weight: 500; font-style: italic;
	color: var(--amber-2); line-height: 1.4;
}
.heritage-text { color: var(--muted); margin: 26px auto 30px; max-width: 62ch; }

/* ── News ───────────────────────────────────────────────────── */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.news-grid-index { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.news-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 26px; transition: transform 0.15s ease, border-color 0.15s ease; }
.news-card:hover { transform: translateY(-3px); border-color: var(--line); }
.news-card time { color: var(--amber-2); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.news-card h3 { font-size: 20px; margin: 10px 0; }
.news-card h3 a { color: var(--text); }
.news-card h3 a:hover { color: var(--amber-2); }
.news-card p { color: var(--muted); font-size: 14px; margin-bottom: 10px; }

/* ── Final CTA ──────────────────────────────────────────────── */
.final-cta { padding: clamp(28px, 4vw, 56px) 0 clamp(36px, 5vw, 64px); }
.final-cta-inner {
	text-align: center;
	background: linear-gradient(160deg, var(--panel-2), var(--panel));
	border: 1px solid var(--line);
	border-radius: 26px;
	padding: clamp(40px, 6vw, 70px);
	box-shadow: var(--shadow);
}
.final-cta h2 { font-size: clamp(26px, 3.6vw, 42px); font-weight: 900; margin-bottom: 28px; }
.final-cta .hero-actions { justify-content: center; margin-top: 0; }

/* ── Page hero (inner pages) ────────────────────────────────── */
.page-hero {
	padding: clamp(50px, 7vw, 90px) 0 clamp(20px, 3vw, 40px);
	border-bottom: 1px solid var(--line-soft);
	background: radial-gradient(700px 260px at 20% 0, rgba(242, 178, 29, 0.05), transparent 70%);
}
.page-hero h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 900; }
.page-hero .lede { margin-top: 14px; }
.page-hero-compact { padding-bottom: 16px; }

/* ── Rules page ─────────────────────────────────────────────── */
.rules-layout { display: grid; gap: clamp(36px, 5vw, 60px); }
.rules-block h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 18px; }
.rules-block > p { color: var(--muted); max-width: 76ch; margin-bottom: 12px; }
.rules-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; align-items: center; }
.rules-split p { color: var(--muted); margin-bottom: 12px; }
.rules-board { width: 100%; }
.rule-list { list-style: none; display: grid; gap: 12px; }
.rule-list li {
	background: var(--panel); border: 1px solid var(--line-soft);
	border-radius: var(--radius-sm); padding: 14px 18px;
	color: var(--muted); font-size: 15px;
}
.rule-list-compact li { padding: 10px 14px; font-size: 13px; }
.rules-note {
	display: flex; align-items: baseline; gap: 10px;
	margin-top: 18px; padding: 14px 18px;
	background: rgba(242, 178, 29, 0.07);
	border: 1px solid rgba(242, 178, 29, 0.22);
	border-radius: var(--radius-sm);
	color: #e8d9b0; font-size: 14.5px; font-weight: 600;
}
.rules-note .ic { flex-shrink: 0; align-self: center; }

/* ── Strategy page ──────────────────────────────────────────── */
.strategy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.strategy-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 28px; }
.strategy-card h3 { font-size: 20px; margin-bottom: 10px; color: var(--amber-2); }
.strategy-card p { color: var(--muted); font-size: 14.5px; }

/* ── Where to play / contact ────────────────────────────────── */
.place-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.place-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 28px; }
.place-card h3 { font-size: 20px; margin-bottom: 6px; }
.place-meta { color: var(--amber-2); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.place-card p { color: var(--muted); font-size: 14.5px; margin-bottom: 12px; }
.place-card-online { border-color: rgba(79, 174, 141, 0.3); }
.contact-grid { display: grid; gap: 20px; }

/* ── Play page / game board ─────────────────────────────────── */
.play-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }
.game-panel {
	background: linear-gradient(160deg, var(--panel-2), var(--panel));
	border: 1px solid var(--line); border-radius: 22px;
	padding: 20px; box-shadow: var(--shadow);
}
.game-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.game-toolbar .btn { margin-left: auto; }
.game-choice { display: inline-flex; gap: 6px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px; }
.chip {
	border: 0; border-radius: 999px; cursor: pointer;
	background: transparent; color: var(--muted);
	padding: 8px 16px; font-size: 13px; font-weight: 700;
	font-family: var(--font-body);
	transition: background 0.15s ease, color 0.15s ease;
}
.chip.is-active { background: linear-gradient(180deg, var(--amber-2), var(--amber-deep)); color: #2b1d02; }
.game-board-wrap { display: grid; place-items: center; }
.game-svg { width: 100%; max-width: 560px; filter: drop-shadow(0 26px 54px rgba(0, 0, 0, 0.55)); }
.gs-line { stroke: #47290f; stroke-width: 1.8; stroke-linecap: round; opacity: 0.9; }
.gs-point { fill: #47290f; opacity: 0.55; pointer-events: none; }
.gs-hit { fill: transparent; cursor: pointer; }
.gs-hint { fill: rgba(246, 207, 93, 0.3); stroke: rgba(140, 90, 20, 0.75); stroke-width: 1.6; pointer-events: none; }
/* Piece states — mirrors the ChiyaPasal game room animations */
.gs-piece { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform 0.18s ease, filter 0.18s ease; filter: drop-shadow(0 5px 6px rgba(23, 12, 4, 0.45)); }
.gs-piece image { pointer-events: none; }
.gs-piece.is-selectable { filter: drop-shadow(0 5px 6px rgba(23, 12, 4, 0.45)) drop-shadow(0 0 6px rgba(246, 207, 93, 0.95)); }
.gs-piece.is-selected { transform: scale(1.16) translateY(-2px); filter: drop-shadow(0 8px 10px rgba(23, 12, 4, 0.5)) drop-shadow(0 0 9px #f6cf5d); }
.gs-piece.is-new { animation: gs-pop 0.35s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes gs-pop { from { transform: scale(0.2); } to { transform: scale(1); } }

/* Pulsing capture/placement targets — same rhythm as ChiyaPasal */
.gs-target { transform-box: fill-box; transform-origin: center; animation: gs-target-pulse 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes gs-target-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* Side picker dialog — same design as the ChiyaPasal host picker */
.game-side-backdrop {
	position: fixed; inset: 0; z-index: 90;
	display: grid; place-items: center;
	background: rgba(5, 9, 6, 0.72);
	padding: 20px;
}
.game-side-backdrop[hidden] { display: none; }
.game-side-dialog {
	width: min(100%, 420px);
	background: linear-gradient(180deg, rgba(28, 38, 33, 0.97), rgba(18, 26, 22, 0.97));
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 18px;
	padding: 22px;
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
	animation: gs-dialog-pop 0.5s cubic-bezier(0.2, 1.3, 0.4, 1);
}
@keyframes gs-dialog-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.game-side-dialog h3 { color: #f5faf7; margin: 0 0 2px; font-size: 17px; }
.game-side-dialog p { color: #b9cdc2; font-size: 13px; margin: 4px 0 14px; }
.game-side-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.game-side-card {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	border: 2px solid rgba(255, 255, 255, 0.12); border-radius: 16px;
	background: rgba(255, 255, 255, 0.06);
	padding: 20px 14px; cursor: pointer;
	font-family: var(--font-body);
	transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.game-side-card:hover { border-color: var(--amber); background: rgba(242, 169, 59, 0.1); transform: translateY(-2px); }
.game-side-icon { width: 64px; height: 64px; }
.game-side-icon img { width: 100%; height: 100%; object-fit: contain; }
.game-side-card strong { color: #f5faf7; font-size: 15px; font-weight: 950; }
.game-side-card small { color: #b9cdc2; font-size: 11px; font-weight: 700; text-align: center; line-height: 1.4; }
.game-side-difficulty {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	background: rgba(0, 0, 0, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 14px;
	margin: 12px 0 16px; padding: 14px;
}
.game-side-difficulty-label {
	color: #b9cdc2; font-size: 11px; font-weight: 800;
	letter-spacing: 0.1em; text-transform: uppercase;
}
.game-side-mood { margin: 2px 0 0 !important; min-height: 18px; text-align: center; }
.game-side-mood span { display: none; font-size: 12px; font-weight: 600; }
#bg-picker[data-bglevel="1"] .game-side-mood [data-mood="1"] { display: inline; color: #7fd0b2; }
#bg-picker:not([data-bglevel]) .game-side-mood [data-mood="2"],
#bg-picker[data-bglevel="2"] .game-side-mood [data-mood="2"] { display: inline; color: var(--amber-2, #f6cf5d); }
#bg-picker[data-bglevel="3"] .game-side-mood [data-mood="3"] { display: inline; color: #ff9d8a; }
.game-side-pick-label {
	color: #b9cdc2 !important; font-size: 11px !important; font-weight: 800;
	letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
	margin: 0 0 10px !important;
}
/* The tiger card wears the opponent's mood. */
#bg-picker[data-bglevel="2"] .game-side-card-tiger img {
	filter: saturate(1.15) contrast(1.18) brightness(0.92);
}
#bg-picker[data-bglevel="2"] .game-side-card-tiger { border-color: rgba(242, 178, 29, 0.45); }
#bg-picker[data-bglevel="3"] .game-side-card-tiger img {
	filter: sepia(0.35) saturate(2.2) hue-rotate(-18deg) contrast(1.3) brightness(0.88) drop-shadow(0 0 9px rgba(220, 60, 30, 0.55));
}
#bg-picker[data-bglevel="3"] .game-side-card-tiger {
	border-color: rgba(211, 84, 62, 0.6);
	background: linear-gradient(180deg, rgba(50, 20, 14, 0.45), rgba(255, 255, 255, 0.04));
}
.game-side-icon img { transition: filter 0.3s ease, transform 0.3s ease; }
/* Playing AS the tigers? Then they're not your opponent — no mood tint or caption. */
#bg-picker[data-side="T"] .game-side-card-tiger img { filter: none !important; }
#bg-picker[data-side="T"] .game-side-card-tiger {
	background: rgba(255, 255, 255, 0.06);
}
#bg-picker[data-side="T"] .game-side-mood [data-mood] { display: none !important; }
/* Playing Tigers: the goat card previews the herd you'll hunt. */
.game-side-mood [data-gmood] { display: none; }
#bg-picker[data-side="T"][data-bglevel="1"] .game-side-mood [data-gmood="1"] { display: inline; color: #7fd0b2; }
#bg-picker[data-side="T"][data-bglevel="2"] .game-side-mood [data-gmood="2"],
#bg-picker[data-side="T"]:not([data-bglevel]) .game-side-mood [data-gmood="2"] { display: inline; color: var(--amber-2, #f6cf5d); }
#bg-picker[data-side="T"][data-bglevel="3"] .game-side-mood [data-gmood="3"] { display: inline; color: #ff9d8a; }
#bg-picker[data-side="T"][data-bglevel="1"] .game-side-card-goat img { transform: scaleX(0.82); }
#bg-picker[data-side="T"][data-bglevel="2"] .game-side-card-goat img { transform: scale(1.12); filter: saturate(1.25) brightness(1.06); }
#bg-picker[data-side="T"][data-bglevel="3"] .game-side-card-goat img { transform: scale(1.24); filter: saturate(1.3) brightness(1.08) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); }
/* And when you play Goats, your own herd card stays plain. */
#bg-picker[data-side="G"] .game-side-card-goat img { filter: none; transform: none; }
/* Selected side card — must beat every mood-tint rule, on both cards. */
#bg-picker .game-side-card { position: relative; }
#bg-picker .game-side-card.is-selected {
	border-color: var(--amber, #f2b21d) !important;
	background: rgba(242, 178, 29, 0.14) !important;
	box-shadow: 0 0 0 1px rgba(242, 178, 29, 0.4), 0 10px 26px rgba(0, 0, 0, 0.35) !important;
}
#bg-picker .game-side-card.is-selected::after {
	content: "✓";
	position: absolute; top: 8px; right: 10px;
	display: grid; place-items: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: linear-gradient(180deg, var(--amber-2, #f6cf5d), #d99a12);
	color: #14100a;
	font-size: 13px; font-weight: 900; line-height: 1;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
/* Start game button */
.game-side-start {
	width: 100%;
	justify-content: center;
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 16px;
	font-size: 16px;
	padding: 13px 20px;
}
.game-side-start:disabled { opacity: 0.4; cursor: default; transform: none !important; box-shadow: none !important; }
.game-status-bar {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
	margin-top: 16px; padding: 12px 16px;
	background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line-soft);
	border-radius: var(--radius-sm);
	font-size: 14px; font-weight: 600;
}
.game-counts { color: var(--muted); }

/* Goat trays — waiting and captured goats as real pieces on wooden shelves */
.game-trays { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 10px; }
.game-tray {
	border: 1px solid var(--line);
	border-radius: 14px;
	background: linear-gradient(160deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.18));
	padding: 12px 14px;
}
.game-tray-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.game-tray-title {
	display: inline-flex; align-items: center; gap: 7px;
	color: var(--amber-2); font-size: 11px; font-weight: 800;
	letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.game-tray-title img { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.game-tray-count {
	display: inline-block; min-width: 34px; text-align: center;
	background: rgba(242, 178, 29, 0.14); border: 1px solid rgba(242, 178, 29, 0.3);
	border-radius: 999px; padding: 2px 10px;
	color: var(--amber-2); font-size: 12px; font-weight: 900;
}
.game-tray-count.is-danger { background: rgba(220, 90, 70, 0.12); border-color: rgba(220, 90, 70, 0.35); color: #f0a898; }
.game-tray-count.is-critical { background: rgba(220, 90, 70, 0.28); border-color: rgba(220, 90, 70, 0.65); color: #ffc4b5; animation: gt-throb 1.2s ease-in-out infinite; }
@keyframes gt-throb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.game-tray-shelf {
	display: flex; align-items: center; min-height: 42px;
	background: radial-gradient(120% 160% at 50% 0%, rgba(236, 208, 154, 0.16), rgba(74, 46, 21, 0.28));
	border: 1px solid rgba(246, 207, 93, 0.14);
	border-radius: 10px;
	padding: 8px 10px;
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
}
.game-tray-pieces { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gt-goat { width: 22px; height: 22px; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); animation: gt-in 0.25s ease; }
@keyframes gt-in { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.gt-empty {
	display: inline-flex; align-items: center; gap: 7px;
	background: rgba(79, 174, 141, 0.14);
	border: 1px solid rgba(79, 174, 141, 0.35);
	border-radius: 999px;
	padding: 4px 14px;
	color: var(--jade-2);
	font-size: 11px; font-weight: 800;
	letter-spacing: 0.09em; text-transform: uppercase;
}
.gt-empty::before { content: "✓"; font-size: 12px; }
.gt-slot {
	display: grid; place-items: center;
	width: 27px; height: 27px; border-radius: 50%;
	border: 1.5px dashed rgba(255, 255, 255, 0.22);
	background: rgba(0, 0, 0, 0.18);
	transition: border-color 0.2s ease, background 0.2s ease;
}
.gt-slot.is-taken {
	border-style: solid; border-color: rgba(220, 90, 70, 0.6);
	background: rgba(220, 90, 70, 0.16);
	box-shadow: 0 0 8px rgba(220, 90, 70, 0.35);
	animation: gt-in 0.3s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.gt-slot img { width: 19px; height: 19px; display: block; filter: grayscale(0.55) brightness(0.85); }
@media (max-width: 620px) { .game-trays { grid-template-columns: 1fr; } }

/* ── Win celebration — fireworks + winner card (ChiyaPasal design) ── */
.game-board-wrap { position: relative; }
.game-win-overlay {
	position: absolute; inset: 0; z-index: 5;
	display: grid; place-items: center;
	border-radius: 30px;
	background: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6));
	overflow: hidden;
	animation: gs-win-fade 0.4s ease;
}
@keyframes gs-win-fade { from { opacity: 0; } to { opacity: 1; } }
.game-fireworks { position: absolute; inset: 0; pointer-events: none; }
.game-fw { position: absolute; width: 4px; height: 4px; }
.game-fw::before {
	content: ''; position: absolute; inset: 0; border-radius: 50%;
	box-shadow:
		0 -30px 0 0.5px #ffe066, 15px -26px 0 0.5px #ff8f4d, 26px -15px 0 0.5px #6fe0a8, 30px 0 0 0.5px #8fd0ff,
		26px 15px 0 0.5px #ffb3d1, 15px 26px 0 0.5px #ffe066, 0 30px 0 0.5px #ff8f4d, -15px 26px 0 0.5px #6fe0a8,
		-26px 15px 0 0.5px #8fd0ff, -30px 0 0 0.5px #ffb3d1, -26px -15px 0 0.5px #ffe066, -15px -26px 0 0.5px #ff8f4d;
	animation: gs-burst 1.7s ease-out infinite;
}
.game-fw::after {
	content: ''; position: absolute; left: -3px; top: -3px; width: 10px; height: 10px; border-radius: 50%;
	background: radial-gradient(circle, #fff, rgba(255, 225, 102, 0) 70%);
	animation: gs-flash 1.7s ease-out infinite;
}
@keyframes gs-burst { 0% { transform: scale(0.1) translateY(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: scale(1.05) translateY(10px); opacity: 0; } }
@keyframes gs-flash { 0% { transform: scale(0.2); opacity: 1; } 24% { transform: scale(1.4); opacity: 0.9; } 45%, 100% { transform: scale(0.2); opacity: 0; } }
.game-fw.fw-0 { left: 22%; top: 26%; }
.game-fw.fw-1 { left: 74%; top: 22%; }
.game-fw.fw-2 { left: 50%; top: 16%; }
.game-fw.fw-3 { left: 18%; top: 66%; }
.game-fw.fw-4 { left: 82%; top: 62%; }
.game-fw.fw-5 { left: 36%; top: 78%; }
.game-fw.fw-6 { left: 66%; top: 80%; }
.game-fw.fw-1::before, .game-fw.fw-1::after { animation-delay: 0.22s; }
.game-fw.fw-2::before, .game-fw.fw-2::after { animation-delay: 0.45s; }
.game-fw.fw-3::before, .game-fw.fw-3::after { animation-delay: 0.7s; }
.game-fw.fw-4::before, .game-fw.fw-4::after { animation-delay: 0.95s; }
.game-fw.fw-5::before, .game-fw.fw-5::after { animation-delay: 1.18s; }
.game-fw.fw-6::before, .game-fw.fw-6::after { animation-delay: 1.4s; }
.game-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.game-cf { position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 1px; opacity: 0; animation: gs-confetti 2.6s linear infinite; }
@keyframes gs-confetti { 0% { transform: translateY(-12px) rotate(0deg); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateY(560px) rotate(540deg); opacity: 0; } }
.game-cf.cf-0 { left: 8%; background: #ffd34d; animation-delay: 0s; }
.game-cf.cf-1 { left: 18%; background: #ff7a52; animation-delay: 0.4s; }
.game-cf.cf-2 { left: 28%; background: #6fe0a8; animation-delay: 0.9s; }
.game-cf.cf-3 { left: 40%; background: #8fd0ff; animation-delay: 0.2s; }
.game-cf.cf-4 { left: 52%; background: #ffb3d1; animation-delay: 1.3s; }
.game-cf.cf-5 { left: 63%; background: #ffd34d; animation-delay: 0.6s; }
.game-cf.cf-6 { left: 74%; background: #6fe0a8; animation-delay: 1.1s; }
.game-cf.cf-7 { left: 84%; background: #ff7a52; animation-delay: 0.3s; }
.game-cf.cf-8 { left: 92%; background: #8fd0ff; animation-delay: 1.6s; }
.game-cf:nth-child(n+10) { animation-duration: 3.1s; width: 6px; height: 9px; }
.game-win-card {
	position: relative; z-index: 6;
	display: grid; justify-items: center; gap: 6px;
	width: min(78%, 300px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(28, 38, 33, 0.96), rgba(18, 26, 22, 0.96));
	padding: 20px 22px;
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
	animation: gs-dialog-pop 0.5s cubic-bezier(0.2, 1.3, 0.4, 1);
}
/* The join nudge — shown only to signed-out players, right after a win. */
.game-win-join {
	display: grid; justify-items: center; gap: 3px;
	margin-top: 10px; padding: 10px 14px;
	width: 100%; text-align: center; text-decoration: none;
	border: 1px solid rgba(79, 174, 141, 0.5);
	border-radius: 12px;
	background: rgba(79, 174, 141, 0.12);
	color: var(--jade-2, #7fe0c0);
	font-size: 13px; font-weight: 800;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.game-win-join:hover, .game-win-join:focus-visible { background: rgba(79, 174, 141, 0.2); border-color: rgba(79, 174, 141, 0.8); transform: translateY(-1px); }
.game-win-join em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.4; }
.game-win-saved { margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--jade-2, #7fe0c0); opacity: 0.85; }
.game-win-piece { display: block; width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); animation: gs-win-bounce 1.2s ease-in-out infinite; }
@keyframes gs-win-bounce { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
.game-win-card strong { color: #fff; font-family: var(--font-display); font-size: 24px; font-weight: 950; letter-spacing: 0.01em; }
.game-win-card.tiger strong { color: #ffc46b; }
.game-win-card.goat strong { color: #8af0bd; }
.game-win-card span { color: #c5d6cc; font-size: 12.5px; font-weight: 700; line-height: 1.4; text-align: center; }
.game-win-card .btn { margin-top: 8px; }
.play-aside { display: grid; gap: 20px; }

/* ── Contact form ───────────────────────────────────────────── */
.contact-form-card {
	background: linear-gradient(160deg, var(--panel-2), var(--panel));
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(24px, 4vw, 40px);
	box-shadow: var(--shadow);
	margin-bottom: 34px;
}
.contact-form-card h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 6px; }
.contact-form-sub { color: var(--muted); font-size: 14.5px; margin-bottom: 24px; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form .form-field { display: grid; gap: 7px; margin-bottom: 16px; }
.contact-form label { color: var(--text); font-size: 13px; font-weight: 700; }
.contact-form input, .contact-form textarea {
	width: 100%;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 14.5px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(165, 184, 166, 0.55); }
.contact-form input:focus, .contact-form textarea:focus {
	outline: none;
	border-color: rgba(242, 178, 29, 0.6);
	box-shadow: 0 0 0 3px rgba(242, 178, 29, 0.14);
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.form-row-bottom { align-items: end; }
.form-field-captcha input { max-width: 130px; }
.form-row-bottom .btn { justify-self: end; margin-bottom: 16px; }
.bg-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-notice {
	border-radius: var(--radius-sm);
	padding: 14px 18px;
	margin-bottom: 22px;
	font-size: 14.5px; font-weight: 600;
}
.form-notice.is-success { background: rgba(79, 174, 141, 0.14); border: 1px solid rgba(79, 174, 141, 0.4); color: #9adfc3; }
.form-notice.is-error { background: rgba(220, 90, 70, 0.12); border: 1px solid rgba(220, 90, 70, 0.4); color: #f0a898; }
@media (max-width: 620px) {
	.contact-form .form-row { grid-template-columns: 1fr; gap: 0; }
	.form-row-bottom .btn { justify-self: stretch; }
}

/* ── Comments (chautari talk) ───────────────────────────────── */
.play-main { display: grid; gap: 26px; min-width: 0; align-content: start; }
.play-comments-inline { min-width: 0; }
.comments-area {
	background: linear-gradient(160deg, var(--panel-2), var(--panel));
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(24px, 4vw, 40px);
	box-shadow: var(--shadow);
}
.comments-head h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 6px; }
.comments-head p { color: var(--muted); font-size: 14.5px; margin-bottom: 20px; }
.comments-count { color: var(--amber-2); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; }
.comment-list { list-style: none; display: grid; gap: 14px; margin: 0 0 30px; padding: 0; }
.bg-comment { display: flex; gap: 12px; align-items: flex-start; }
.bg-comment-avatar {
	flex: 0 0 auto; width: 36px; height: 36px;
	padding: 5px; border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, rgba(236, 208, 154, 0.25), rgba(74, 46, 21, 0.45));
	border: 1px solid rgba(246, 207, 93, 0.2);
	object-fit: contain;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}
.bg-comment-body {
	flex: 1; min-width: 0;
	background: rgba(0, 0, 0, 0.24);
	border: 1px solid var(--line-soft);
	border-radius: 4px 14px 14px 14px;
	padding: 12px 16px;
}
.bg-comment-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.bg-comment-meta strong { color: var(--amber-2); font-size: 14px; font-weight: 800; }
.bg-comment-meta time { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.bg-comment-text { color: var(--text); font-size: 14.5px; line-height: 1.55; overflow-wrap: break-word; }
.bg-comment-text p { margin: 0 0 6px; }
.bg-comment-text p:last-child { margin-bottom: 0; }
.bg-comment-pending { color: #f0c98f; font-size: 12px; font-style: italic; margin-bottom: 4px; }
.comment-reply-title { font-size: 20px; margin-bottom: 4px; }
.comment-reply-sub { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.comment-emoji-wrap { margin-top: 8px; }
.comment-emoji-toggle {
	display: inline-flex; align-items: center; gap: 6px;
	border: 1px solid var(--line-soft); cursor: pointer;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 999px;
	padding: 6px 14px;
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 12.5px; font-weight: 700;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.comment-emoji-toggle:hover,
.comment-emoji-toggle[aria-expanded="true"] { background: rgba(242, 178, 29, 0.12); color: var(--amber-2); border-color: rgba(242, 178, 29, 0.35); }
.comment-emojis {
	display: flex; flex-wrap: wrap; gap: 5px;
	background: rgba(0, 0, 0, 0.24);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	margin-top: 8px;
}
.comment-emojis[hidden] { display: none; }
.comment-emoji {
	border: 0; cursor: pointer;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	padding: 4px;
	display: inline-grid; place-items: center;
	transition: background 0.12s ease, transform 0.12s ease;
}
.comment-emoji img { width: 30px; height: 30px; object-fit: contain; display: block; }
.comment-emoji:hover { background: rgba(242, 178, 29, 0.2); transform: scale(1.15); }
.comment-emoji-toggle img { border-radius: 4px; vertical-align: middle; }
/* Image emoticons rendered inside comment text */
.bagh-emote {
	width: 22px; height: 22px;
	object-fit: contain;
	vertical-align: -5px;
	display: inline-block;
	margin: 0 1px;
}
.comment-form .form-submit { margin: 0; }

/* Play button gate over the board */
.game-stage { position: relative; }
.game-start-overlay {
	position: absolute; inset: 0; z-index: 4;
	display: grid; place-items: center;
	background: radial-gradient(circle at 50% 45%, rgba(5, 9, 6, 0.38), rgba(5, 9, 6, 0.62));
	border-radius: 30px;
}
.game-start-overlay[hidden] { display: none; }
.game-start-btn { font-size: 18px; padding: 18px 44px; box-shadow: 0 16px 40px rgba(242, 178, 29, 0.4); }

/* Comments aligned under the board column */
.play-comments-col { min-width: 0; }

/* ── Entry content (posts, default pages) ───────────────────── */
.entry-content h2 { font-size: clamp(24px, 3vw, 32px); margin: 36px 0 14px; }
.entry-content h3 { font-size: 21px; margin: 28px 0 10px; }
.entry-content p { color: var(--muted); margin-bottom: 16px; }
.entry-content ul, .entry-content ol { color: var(--muted); padding-left: 22px; margin-bottom: 16px; }
.entry-content li { margin-bottom: 8px; }
.entry-content strong { color: var(--text); }
.post-nav { margin-top: 40px; }
.pagination { margin-top: 40px; text-align: center; }
.pagination .nav-links { display: inline-flex; gap: 8px; }
.pagination a, .pagination span.current {
	display: inline-block; padding: 10px 16px; border-radius: 10px;
	background: var(--panel); border: 1px solid var(--line-soft);
	color: var(--text); font-weight: 700; font-size: 14px;
}
.pagination span.current { background: var(--amber-deep); color: #2b1d02; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line-soft); background: var(--bg-soft); margin-top: 40px; }
.footer-grid {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 34px; padding: clamp(40px, 6vw, 70px) 24px 30px;
}
.footer-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand-row strong { font-family: var(--font-display); font-size: 20px; font-weight: 900; }
.footer-brand p { color: var(--muted); font-size: 14px; max-width: 34ch; }
.footer-nav h3 { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-2); margin-bottom: 14px; font-family: var(--font-body); }
.footer-nav ul { list-style: none; display: grid; gap: 9px; }
.footer-nav a { color: var(--muted); font-size: 14px; }
.footer-nav a:hover { color: var(--text); }
.footer-social-label {
	margin-top: 20px; margin-bottom: 10px;
	font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--amber-2);
}
.footer-social { list-style: none; display: flex; gap: 10px; padding: 0; }
.footer-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	color: var(--muted);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--line-soft);
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.footer-social a:hover, .footer-social a:focus-visible {
	color: #14100a;
	background: linear-gradient(180deg, var(--amber-2, #f2b21d), #d99a12);
	border-color: transparent;
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(242, 178, 29, 0.28);
}
.footer-bottom {
	border-top: 1px solid var(--line-soft); padding: 20px 24px;
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.footer-bottom p { color: var(--muted); font-size: 13px; }
.footer-made { white-space: nowrap; }
.dmca-badge { display: inline-block; margin-top: 16px; transition: transform 0.2s ease, filter 0.2s ease; }
.dmca-badge:hover { transform: translateY(-2px); filter: brightness(1.1); }
.dmca-badge img { width: 130px; height: auto; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 980px) {
	.hero-grid { grid-template-columns: 1fr; }
	.hero-board { order: -1; }
	.hero-board-svg { width: min(70%, 360px); }
	.play-layout { grid-template-columns: 1fr; }
	.rules-split { grid-template-columns: 1fr; }
	.rules-board { max-width: 320px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	.site-nav { display: none; }
	.nav-toggle { display: flex; }
	.fact-grid { grid-template-columns: repeat(2, 1fr); }
	.site-header-actions .btn { display: none; }
}
@media (max-width: 560px) {
	.footer-grid { grid-template-columns: 1fr; }
	.game-toolbar { justify-content: center; }
	.game-toolbar .btn { margin-left: 0; }
}

/* ════════════════════════════════════════════════════════════════
   Modern realism layer
   Guided by the ui-ux-pro-max design system: 3D & Hyperrealism +
   Flat base (Card & Board Game product profile) — multi-layer
   physical shadows, top-light on every surface, film grain,
   300–400ms motion, reduced-motion respected.
   ════════════════════════════════════════════════════════════════ */

:root {
	/* Physically-layered elevation: contact + ambient + key light */
	--elev-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.22);
	--elev-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.3), 0 20px 44px rgba(0, 0, 0, 0.24);
	--elev-3: 0 2px 4px rgba(0, 0, 0, 0.42), 0 14px 32px rgba(0, 0, 0, 0.36), 0 34px 80px rgba(0, 0, 0, 0.3);
	--top-light: inset 0 1px 0 rgba(255, 255, 255, 0.07);
	--ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.2);
	--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Film grain over the whole canvas — the "shot on real film" feel */
body::before {
	content: "";
	position: fixed; inset: 0; z-index: 100;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.028;
	mix-blend-mode: overlay;
}

/* Surfaces: top-lit, physically shadowed, gently keylined */
.duo-card, .step-card, .play-card, .news-card, .place-card,
.strategy-card, .contact-form-card, .comments-area, .game-panel,
.final-cta-inner, .game-tray, .bg-comment-body, .rule-list li {
	box-shadow: var(--elev-1), var(--top-light);
}
.play-card, .game-panel, .contact-form-card, .comments-area, .final-cta-inner {
	box-shadow: var(--elev-2), var(--top-light);
}

/* Hover physics: lift toward the light, 300ms, shadow blooms */
.duo-card, .step-card, .play-card, .news-card, .place-card, .strategy-card {
	transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth);
}
.duo-card:hover, .step-card:hover, .play-card:hover, .news-card:hover,
.place-card:hover, .strategy-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--elev-3), var(--top-light);
	border-color: rgba(246, 207, 93, 0.22);
}

/* Buttons: glossy, tactile, pressable */
.btn-primary {
	position: relative; overflow: hidden;
	box-shadow:
		0 10px 26px rgba(242, 178, 29, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		inset 0 -2px 0 rgba(122, 81, 6, 0.4);
}
.btn-primary::after {
	content: "";
	position: absolute; top: 0; left: -80%;
	width: 50%; height: 100%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: skewX(-20deg);
	transition: left 0.5s var(--ease-smooth);
}
.btn-primary:hover::after { left: 130%; }
.btn-primary:active, .btn-goat:active, .btn-ghost:active { transform: translateY(1px) scale(0.99); box-shadow: 0 4px 12px rgba(242, 178, 29, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn-goat {
	box-shadow:
		0 10px 26px rgba(79, 174, 141, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		inset 0 -2px 0 rgba(29, 89, 66, 0.45);
}

/* Hero board: true 3D presence (perspective per the style spec) */
.hero-board { perspective: 1000px; }
.hero-board-svg {
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform 0.3s var(--ease-smooth);
}
.hero-board.is-tilting .hero-board-svg { animation: none; }

/* Section headings: gradient ink + a short kiln-gold rule */
.section-head h2 {
	background: linear-gradient(180deg, #f7fbf6, #cfe0d2);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-head h2::after {
	content: "";
	display: block;
	width: 56px; height: 3px;
	margin-top: 14px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--amber-2), var(--amber-deep));
	box-shadow: 0 2px 8px rgba(242, 178, 29, 0.4);
}
.section-head-row h2::after { display: none; }

/* Fact strip: molten-gold numerals */
.fact strong {
	background: linear-gradient(180deg, #ffe9a8, var(--amber), var(--amber-deep));
	-webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 2px 6px rgba(242, 178, 29, 0.25));
}

/* Scroll reveal — one entrance per element, 1-2 per view, spring ease */
.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.55s var(--ease-smooth), transform 0.55s var(--ease-smooth);
	transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Focus visibility (accessibility priority #1 in the design DB) */
:focus-visible {
	outline: 3px solid rgba(242, 178, 29, 0.75);
	outline-offset: 2px;
	border-radius: 4px;
}
.btn:focus-visible, .chip:focus-visible { outline-offset: 3px; }

/* Ambient polish */
::selection { background: rgba(242, 178, 29, 0.85); color: #2b1d02; }
/* Slim amber-on-jungle scrollbars that blend with the theme. */
html { scrollbar-color: rgba(242, 178, 29, 0.45) var(--bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgba(246, 207, 93, 0.55), rgba(205, 124, 17, 0.55));
	border: 2px solid var(--bg);
	border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--amber-2), var(--amber-deep)); }
::-webkit-scrollbar-corner { background: var(--bg); }
.site-header.is-scrolled { border-image: linear-gradient(90deg, transparent, rgba(246, 207, 93, 0.35), transparent) 1; }

/* ── Amplified statement pieces ─────────────────────────────── */

/* Hero board: warm lamp-light halo you can't miss */
.hero-board { position: relative; }
.hero-board::before {
	content: "";
	position: absolute; inset: -14%;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(242, 178, 29, 0.22), rgba(242, 178, 29, 0.07) 55%, transparent 75%);
	animation: hero-halo 5s ease-in-out infinite;
}
@keyframes hero-halo { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
.hero-board-svg { box-shadow: 0 34px 70px rgba(0, 0, 0, 0.6), 0 0 90px rgba(242, 178, 29, 0.14); }

/* Every card gets an amber keyline that lights along the top edge */
.step-card, .news-card, .place-card, .strategy-card, .play-card, .game-tray {
	position: relative;
	background-clip: padding-box;
}
.step-card::before, .news-card::before, .place-card::before,
.strategy-card::before, .play-card::before, .game-tray::before {
	content: "";
	position: absolute; top: -1px; left: 12%; right: 12%; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(246, 207, 93, 0.45), transparent);
	pointer-events: none;
}

/* Navigation: sliding amber underline */
.site-menu a { position: relative; }
.site-menu a::after {
	content: "";
	position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--amber-2), var(--amber-deep));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--ease-smooth);
}
.site-menu a:hover::after, .site-menu .current-menu-item > a::after { transform: scaleX(1); }

/* Fact strip: bigger, divided, luminous */
.fact strong { font-size: clamp(34px, 4vw, 44px); }
.fact + .fact { border-left: 1px solid rgba(246, 207, 93, 0.12); }
@media (max-width: 760px) { .fact + .fact { border-left: 0; } }

/* Alt sections: faint woven texture instead of flat fill */
.section-alt, .heritage-band {
	background-image:
		repeating-linear-gradient(115deg, rgba(246, 207, 93, 0.02) 0 2px, transparent 2px 14px),
		linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));
}

/* Brand mark: warm glow */
.site-brand-mark img { filter: drop-shadow(0 0 12px rgba(242, 178, 29, 0.35)); }

/* Footer: gold hairline on top */
.site-footer { border-top: 0; box-shadow: inset 0 1px 0 rgba(246, 207, 93, 0.16); }

/* ── Icon system: SVG icons + piece medallions (no emoji-as-icons) ── */
.ic { vertical-align: -0.18em; color: var(--amber-2); flex-shrink: 0; }
.piece-medal {
	display: inline-grid; place-items: center;
	width: var(--medal-size, 44px); height: var(--medal-size, 44px);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 32%, #ecd09a 0%, #d3a866 60%, #a97a3c 100%);
	border: 2px solid #4a2e15;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 236, 190, 0.6);
	vertical-align: middle;
}
.piece-medal img { width: 68%; height: 68%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(23, 12, 4, 0.4)); }
.duo-icon { margin-bottom: 16px; }
.head-with-medal, .head-with-icon { display: flex; align-items: center; gap: 12px; }
.head-with-icon .ic { color: var(--amber-2); filter: drop-shadow(0 2px 6px rgba(242, 178, 29, 0.35)); }
.btn-piece { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.notice-piece { width: 20px; height: 20px; object-fit: contain; vertical-align: -0.3em; }
.chip { display: inline-flex; align-items: center; gap: 5px; }
.chip-piece { width: 16px; height: 16px; object-fit: contain; }

/* Play button: the triangle carries weight and matches the label ink */
.btn .ic { color: inherit; }
.btn .ic-play { fill: currentColor; stroke: none; }

/* Sound toggle: just the icon — no box, no background */
.game-sound-toggle {
	width: auto; height: auto;
	border: 0; background: none; box-shadow: none;
	padding: 8px; cursor: pointer;
	border-radius: 50%;
}
.game-sound-toggle:hover { background: none; border: 0; transform: none; }
.game-sound-toggle .ic {
	color: var(--muted);
	transition: color 0.2s var(--ease-smooth), transform 0.2s var(--ease-smooth), filter 0.2s var(--ease-smooth);
}
.game-sound-toggle:hover .ic { color: var(--text); transform: scale(1.15); }
.game-sound-toggle .sound-on-icon { display: none; }
.game-sound-toggle.is-on .sound-on-icon { display: block; }
.game-sound-toggle.is-on .sound-off-icon { display: none; }
.game-sound-toggle.is-on .ic {
	color: var(--amber-2);
	filter: drop-shadow(0 0 7px rgba(242, 178, 29, 0.55));
}
.sound-on-icon, .sound-off-icon { display: grid; place-items: center; }
.step-num-icon { display: inline-grid; place-items: center; }
.step-card .piece-medal { margin-bottom: 14px; }
.comments-count { display: flex; align-items: center; gap: 7px; }
.comment-emoji-toggle .ic { color: inherit; }

/* Scene placeholders: intentional, on-brand — board-line weave + mark */
.scene-placeholder {
	position: relative;
	display: grid; place-items: center;
	background:
		repeating-linear-gradient(0deg, rgba(246, 207, 93, 0.05) 0 1px, transparent 1px 25%),
		repeating-linear-gradient(90deg, rgba(246, 207, 93, 0.05) 0 1px, transparent 1px 25%),
		radial-gradient(90% 120% at 50% 0%, rgba(211, 168, 102, 0.12), transparent 60%),
		linear-gradient(150deg, var(--panel-2), #10160e);
}
.scene-placeholder::after {
	content: "";
	position: absolute; inset: 12px;
	border: 1px dashed rgba(246, 207, 93, 0.18);
	border-radius: 12px;
	pointer-events: none;
}
.scene-placeholder span { display: none; }
.scene-ph-mark {
	width: clamp(56px, 18%, 90px); height: auto;
	opacity: 0.5;
	filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}


/* ── Strategy decks: chapter index + calm reading pane ──────── */
.strategy-deck {
	display: grid;
	grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
	margin-top: 8px;
}

/* The index: pure typography, hairline separators, sliding gold bar */
.deck-index { position: relative; display: flex; flex-direction: column; }
.deck-indicator {
	position: absolute; left: -2px; top: 0;
	width: 2px; height: 40px;
	background: linear-gradient(180deg, var(--amber-2), var(--amber-deep));
	box-shadow: 0 0 10px rgba(242, 178, 29, 0.55);
	border-radius: 2px;
	transition: transform 0.45s var(--ease-smooth), height 0.45s var(--ease-smooth);
}
.deck-item {
	display: flex; align-items: baseline; gap: 16px;
	background: none; border: 0; cursor: pointer;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding: 18px 6px 18px 18px;
	text-align: left;
	opacity: 0.45;
	transition: opacity 0.3s var(--ease-smooth), padding-left 0.3s var(--ease-smooth);
}
.deck-item:last-child { border-bottom: 0; }
.deck-item:hover { opacity: 0.8; }
.deck-item.is-active { opacity: 1; padding-left: 24px; }
.deck-item-num {
	font-family: var(--font-display);
	font-size: 22px; font-weight: 900; line-height: 1;
	color: rgba(238, 244, 236, 0.55);
	transition: color 0.3s var(--ease-smooth);
}
.deck-item.is-active .deck-item-num {
	background: linear-gradient(180deg, #ffe9a8, var(--amber), var(--amber-deep));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.deck-item-title {
	color: var(--text);
	font-family: var(--font-body);
	font-size: 15px; font-weight: 650; line-height: 1.35;
}

/* The pane: views share one grid cell and cross-fade in place */
.deck-pane { display: grid; border-radius: var(--radius); }
.deck-pane:focus-visible { outline: 3px solid rgba(242, 178, 29, 0.5); outline-offset: 8px; }
.deck-view {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
	gap: clamp(24px, 3.5vw, 56px);
	align-items: center;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.45s var(--ease-smooth), transform 0.45s var(--ease-smooth);
	pointer-events: none;
	visibility: hidden;
}
.deck-view.is-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0.1s;
}
.deck-kicker {
	display: flex; align-items: baseline; gap: 12px;
	color: var(--amber-2);
	font-size: 11.5px; font-weight: 800;
	letter-spacing: 0.16em; text-transform: uppercase;
	margin-bottom: 16px;
}
.deck-kicker::before { content: ""; width: 26px; height: 1px; background: var(--amber-deep); align-self: center; }
.deck-kicker-count { color: var(--muted); font-weight: 700; letter-spacing: 0.1em; }
.deck-view h3 {
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 900;
	background: linear-gradient(180deg, #f7fbf6, #cfe0d2);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	margin-bottom: 16px;
	max-width: 18ch;
}
.deck-body { color: var(--muted); font-size: clamp(15px, 1.35vw, 16.5px); line-height: 1.8; max-width: 52ch; }
.deck-view-board { display: grid; place-items: center; }
.deck-board {
	width: min(100%, 300px);
	filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.55));
}
.deck-view.is-active .deck-board { animation: deck-board-in 0.6s var(--ease-spring) 0.12s backwards; }
@keyframes deck-board-in { from { transform: scale(0.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 900px) {
	.strategy-deck { grid-template-columns: 1fr; gap: 8px; }
	.deck-index { flex-direction: row; overflow-x: auto; border-bottom: 1px solid rgba(255, 255, 255, 0.07); scrollbar-width: none; }
	.deck-index::-webkit-scrollbar { display: none; }
	.deck-indicator { display: none; }
	.deck-item { flex: 0 0 auto; border-bottom: 2px solid transparent; padding: 12px 14px; gap: 9px; }
	.deck-item.is-active { border-bottom-color: var(--amber); padding-left: 14px; }
	.deck-item-num { font-size: 17px; }
	.deck-item-title { font-size: 13px; }
	.deck-view { grid-template-columns: 1fr; gap: 18px; padding-top: 22px; }
	.deck-view-board { order: -1; }
	.deck-board { width: min(56%, 230px); }
}

/* ── New players limelight ──────────────────────────────────── */
.limelight { padding: clamp(30px, 4vw, 52px) 0; border-top: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.015); }
.limelight-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.limelight-head h2 { font-size: clamp(20px, 2.4vw, 26px); }
.limelight-head p { color: var(--muted); font-size: 14px; }
.limelight-row { display: flex; flex-wrap: wrap; gap: 12px; }
.limelight-chip {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--panel); border: 1px solid var(--line-soft);
	border-radius: 999px; padding: 8px 18px 8px 9px;
	box-shadow: var(--elev-1), var(--top-light);
}
.limelight-name { color: var(--text); font-size: 14px; font-weight: 700; }
.limelight-when { color: var(--muted); font-size: 12px; }
.limelight-join { border-color: rgba(242, 178, 29, 0.35); color: var(--amber-2); }
.limelight-plus {
	display: inline-grid; place-items: center;
	width: 34px; height: 34px; border-radius: 50%;
	border: 1.5px dashed rgba(242, 178, 29, 0.5);
	color: var(--amber-2); font-size: 19px; font-weight: 800;
}

/* ── Sign-up: social row ────────────────────────────────────── */
.social-signup { margin-top: 28px; border-top: 1px solid var(--line-soft); padding-top: 22px; }
.social-signup-label { color: var(--muted); font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.social-signup-row { display: flex; flex-wrap: wrap; gap: 10px; }
.social-signup .is-disabled { opacity: 0.4; cursor: not-allowed; }
.social-signup-note { color: var(--muted); font-size: 12.5px; margin-top: 14px; }

/* ── Tournaments ────────────────────────────────────────────── */
.section-tight { padding-top: 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.sec-head h2 { font-size: clamp(22px, 2.6vw, 28px); }
.sec-head p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.eyebrow.center { text-align: center; }

.tournament-announce {
	margin: 22px 0 0;
	background: linear-gradient(180deg, rgba(242, 178, 29, 0.14), rgba(242, 178, 29, 0.05));
	border: 1px solid rgba(242, 178, 29, 0.35);
	border-radius: var(--radius-sm);
	padding: 12px 18px;
	color: var(--amber-2);
	font-weight: 700;
	text-align: center;
}

/* The live board */
.live-wrap {
	border: 1px solid rgba(242, 178, 29, 0.22);
	border-radius: var(--radius);
	background: linear-gradient(180deg, var(--panel-2), var(--panel));
	box-shadow: var(--shadow);
	overflow: hidden;
}
.live-top, .live-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 13px 20px;
	background: rgba(0, 0, 0, 0.25);
	font-size: 12px; color: var(--muted);
}
.live-top { border-bottom: 1px solid var(--line-soft); }
.live-foot { border-top: 1px solid var(--line-soft); }
.live-top b, .live-foot b { color: var(--text); }
.live-pill {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(211, 84, 62, 0.18); border: 1px solid rgba(211, 84, 62, 0.5);
	color: #ff9d8a; font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
	text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
.live-dot {
	width: 7px; height: 7px; border-radius: 50%; background: #ff5f45;
	box-shadow: 0 0 0 0 rgba(255, 95, 69, 0.7); animation: live-pulse 1.6s infinite;
}
@keyframes live-pulse {
	70% { box-shadow: 0 0 0 8px rgba(255, 95, 69, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 95, 69, 0); }
}
.live-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.live-grid { display: grid; grid-template-columns: 218px 1fr 218px 232px; }
.player-col { padding: 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.player-col.is-right { border-left: 1px solid var(--line-soft); }
.player-card { text-align: center; }
.player-av { display: block; width: 76px; height: 76px; margin: 0 auto 10px; border-radius: 50%; }
.player-av .bagh-av { border: 2px solid rgba(255, 255, 255, 0.1); box-sizing: border-box; }
.player-card.is-turn .player-av .bagh-av {
	border-color: var(--amber);
	box-shadow: 0 0 0 4px rgba(242, 178, 29, 0.16);
}
.player-name { font-family: var(--font-display); font-size: 19px; color: var(--text); font-weight: 700; }
.player-seed { font-size: 11px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.side-badge {
	display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
	padding: 5px 12px; border-radius: 999px;
	font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.side-badge img { display: block; }
.side-tiger { background: rgba(242, 178, 29, 0.14); border: 1px solid rgba(242, 178, 29, 0.4); color: var(--amber-2); }
.side-goat { background: rgba(79, 174, 141, 0.14); border: 1px solid rgba(79, 174, 141, 0.4); color: var(--jade-2); }
.turn-flag {
	margin-top: 6px; min-height: 16px;
	font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--amber);
}
.turn-flag.is-idle { color: #6f7d70; }
.clock {
	font-variant-numeric: tabular-nums; font-family: var(--font-display); font-size: 26px;
	color: var(--text); text-align: center;
	background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line-soft);
	border-radius: var(--radius-sm); padding: 6px 0;
}
.clock:empty { display: none; }

.board-col { padding: 18px; display: grid; place-items: center; background: radial-gradient(80% 70% at 50% 40%, rgba(242, 178, 29, 0.05), transparent 70%); }
.board-col .game-svg { max-width: 430px; }
.lb-piece { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.55)); }
.lb-last { fill: none; stroke: rgba(246, 207, 93, 0.85); stroke-width: 3; stroke-dasharray: 5 4; }

.tray-note { font-size: 11px; color: #6f7d70; }
.moves { padding: 18px 16px; border-left: 1px solid var(--line-soft); display: flex; flex-direction: column; min-width: 0; }
.moves h4 {
	font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--amber-2); font-family: var(--font-body); font-weight: 800; margin-bottom: 10px;
}
.move-list {
	list-style: none; margin: 0; padding: 0 6px 0 0;
	overflow-y: auto; max-height: 430px; font-size: 13px; font-variant-numeric: tabular-nums;
}
.move-list li { display: grid; grid-template-columns: 26px 18px 1fr; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px; }
.move-list li:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.move-list li.is-last { background: rgba(242, 178, 29, 0.12); border: 1px solid rgba(242, 178, 29, 0.3); }
.move-n { color: #6f7d70; font-size: 11px; }
.move-list img { display: block; }
.move-txt { color: #c3ccbd; }
.move-txt b { color: var(--text); }
.move-cap { color: #ff9d8a; font-weight: 700; }
.moves-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); }
.moves-foot b { color: var(--text); }
.moves-foot .is-cap { color: #ff9d8a; }

/* Next tournament */
.next-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: start; }
.card {
	border: 1px solid var(--line-soft); border-radius: var(--radius);
	background: linear-gradient(180deg, var(--panel-2), var(--panel));
	padding: 24px; box-shadow: var(--elev-1);
}
.card-amber { border-color: rgba(242, 178, 29, 0.28); background: linear-gradient(180deg, rgba(242, 178, 29, 0.08), var(--panel)); }
.card h2 { font-size: clamp(22px, 2.4vw, 30px); }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 18px 0; }
.fact { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.22); padding: 12px 14px; }
.fact span { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #7d8f7e; font-weight: 800; }
.fact b { color: var(--text); font-size: 15px; font-weight: 700; }

.countdown { display: flex; gap: 10px; justify-content: center; margin: 4px 0 18px; }
.cd { background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(242, 178, 29, 0.22); border-radius: 12px; padding: 10px 0; width: 68px; text-align: center; }
.cd b { display: block; font-family: var(--font-display); font-size: 26px; color: var(--amber-2); font-variant-numeric: tabular-nums; }
.cd span { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #7d8f7e; font-weight: 800; }
.reigning { border-top: 1px solid var(--line-soft); padding-top: 16px; }
.reigning .player-av { width: 64px; height: 64px; }

.seats { margin: 14px 0 6px; }
.seats-bar { height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.seats-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--amber), var(--amber-2)); transition: width 0.4s ease; }
.seats-label { display: flex; justify-content: space-between; font-size: 12px; margin-top: 7px; color: var(--muted); }
.seats-label b { color: var(--text); }
.enter-box { margin-top: 14px; }
.enter-btn { width: 100%; justify-content: center; font-size: 15px; padding: 14px; }
.enter-note { font-size: 12px; color: #7d8f7e; text-align: center; margin-top: 10px; }
.enter-note.is-error { color: #ff9d8a; }
.enter-done {
	text-align: center; color: var(--jade-2); font-weight: 700;
	background: rgba(79, 174, 141, 0.1); border: 1px solid rgba(79, 174, 141, 0.35);
	border-radius: var(--radius-sm); padding: 13px 16px; margin: 0;
}
.tournament-champ-line {
	display: flex; align-items: center; gap: 12px; margin-top: 16px;
	border: 1px solid rgba(242, 178, 29, 0.35); border-radius: var(--radius-sm);
	background: rgba(242, 178, 29, 0.08); padding: 12px 16px;
}
.tournament-champ-line span { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #7d8f7e; font-weight: 800; }
.tournament-champ-line b { color: var(--amber-2); font-family: var(--font-display); font-size: 18px; }

/* Entrants wall */
.entrants { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 12px; }
.entrant {
	text-align: center; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.02); padding: 12px 6px 10px;
}
.entrant .bagh-av, .entrant .slot { margin: 0 auto 8px; }
.entrant b { display: block; color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entrant span { font-size: 10px; color: #6f7d70; letter-spacing: 0.06em; text-transform: uppercase; }
.entrant.is-you { border-color: rgba(242, 178, 29, 0.45); background: rgba(242, 178, 29, 0.07); }
.entrant.is-wait { opacity: 0.7; }
.entrant.is-open { border-style: dashed; border-color: rgba(255, 255, 255, 0.12); opacity: 0.6; }
.entrant .slot {
	display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(255, 255, 255, 0.18);
	color: #6f7d70; font-size: 18px;
}

/* Bracket */
.bracket-card { padding: 26px 22px; }
.bracket-scroll { overflow-x: auto; padding-bottom: 6px; }
.bracket { display: grid; gap: 30px; align-items: center; min-width: min-content; }
.round > h4 {
	font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #7d8f7e;
	font-family: var(--font-body); font-weight: 800; text-align: center; margin-bottom: 14px;
}
.matches { display: flex; flex-direction: column; justify-content: space-around; height: 100%; gap: 16px; }
.match { position: relative; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.22); overflow: hidden; }
.match::after { content: ""; position: absolute; right: -30px; top: 50%; width: 30px; height: 1px; background: rgba(255, 255, 255, 0.12); }
.round:last-child .match::after { display: none; }
.match.is-onair { border-color: rgba(211, 84, 62, 0.45); }
.slot-row { display: flex; align-items: center; gap: 9px; padding: 8px 11px; font-size: 13px; }
.slot-row + .slot-row { border-top: 1px solid var(--line-soft); }
.slot-row b { color: #b3bdad; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-row.is-win { background: rgba(242, 178, 29, 0.1); }
.slot-row.is-win b { color: var(--amber-2); }
.slot-row.is-live { background: rgba(211, 84, 62, 0.12); }
.slot-score { font-size: 12px; color: var(--amber-2); }
.champion {
	text-align: center; border: 1px solid rgba(242, 178, 29, 0.4); border-radius: var(--radius);
	background: linear-gradient(180deg, rgba(242, 178, 29, 0.12), rgba(0, 0, 0, 0.2)); padding: 18px 12px;
}
.champion .bagh-av { border: 2px solid var(--amber); box-sizing: border-box; }
.champion b { display: block; color: var(--amber-2); font-family: var(--font-display); margin-top: 8px; }
.champion span { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #7d8f7e; font-weight: 800; }
.champion-empty { display: block; opacity: 0.35; }
.champion-empty .ic { color: var(--amber-2); }

/* Champions wall */
.champs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.champ { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.02); padding: 12px 14px; }
.champ b { display: block; color: var(--text); font-size: 13px; }
.champ span { font-size: 11px; color: #7d8f7e; }

@media (max-width: 1080px) {
	.live-grid { grid-template-columns: 1fr 1fr; }
	.board-col { grid-column: 1 / -1; grid-row: 1; }
	.player-col.is-right { border-left: 0; }
	.moves { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-soft); }
	.move-list { max-height: 220px; }
	.champs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
	.next-grid { grid-template-columns: 1fr; }
	.facts { grid-template-columns: 1fr; }
	.live-grid { grid-template-columns: 1fr; }
	.player-col.is-right { border-top: 1px solid var(--line-soft); }
	.champs { grid-template-columns: 1fr; }
	.countdown { gap: 7px; }
	.cd { width: 60px; }
}

/* ── Leaderboards (Play page sidebar) ───────────────────────── */
.leader-list { list-style: none; counter-reset: leader; display: grid; gap: 8px; margin: 4px 0 12px; }
.leader-list li {
	counter-increment: leader;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: 8px;
	background: rgba(0, 0, 0, 0.22);
	border: 1px solid var(--line-soft);
	border-radius: 10px;
	padding: 8px 12px;
}
.leader-list li::before {
	content: counter(leader, decimal-leading-zero);
	font-family: var(--font-display);
	font-weight: 900; font-size: 15px;
	background: linear-gradient(180deg, #ffe9a8, var(--amber-deep));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.leader-list li:first-child { border-color: rgba(242, 178, 29, 0.4); box-shadow: 0 0 14px rgba(242, 178, 29, 0.12); }
.leader-name { color: var(--text); font-size: 13.5px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-stats { color: var(--amber-2); font-size: 12px; font-weight: 700; white-space: nowrap; }
.leader-when { grid-column: 2 / -1; color: var(--muted); font-size: 11px; }
.leader-empty { color: var(--muted); font-size: 13px; font-style: italic; margin-bottom: 10px; }
.leader-you { display: flex; align-items: center; gap: 7px; color: #9adfc3; font-size: 12.5px; font-weight: 700; margin-top: 4px; }

/* ── Tournament empty state ─────────────────────────────────── */
.tournament-empty {
	position: relative; overflow: hidden;
	display: grid; justify-items: center; text-align: center;
	background: linear-gradient(160deg, var(--panel-2), var(--panel));
	border: 1px solid var(--line);
	border-radius: 26px;
	padding: clamp(44px, 7vw, 90px) clamp(22px, 5vw, 60px);
	box-shadow: var(--elev-2), var(--top-light);
}
.tournament-empty-medal {
	display: grid; place-items: center;
	width: 84px; height: 84px; border-radius: 50%;
	background: radial-gradient(circle at 50% 32%, rgba(246, 207, 93, 0.28), rgba(205, 124, 17, 0.1));
	border: 1px solid rgba(242, 178, 29, 0.4);
	box-shadow: 0 12px 34px rgba(242, 178, 29, 0.18), var(--top-light);
	margin-bottom: 22px;
}
.tournament-empty-medal .ic { color: var(--amber-2); filter: drop-shadow(0 0 10px rgba(242, 178, 29, 0.55)); }
.tournament-empty h2 {
	font-size: clamp(26px, 3.4vw, 40px); font-weight: 900;
	background: linear-gradient(180deg, #f7fbf6, #cfe0d2);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	margin-bottom: 12px;
}
.tournament-empty p { color: var(--muted); font-size: 16px; max-width: 52ch; margin-bottom: 26px; }
.tournament-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; position: relative; z-index: 1; }
.tournament-empty-board {
	position: absolute; right: -70px; bottom: -90px;
	width: 280px; opacity: 0.14;
	transform: rotate(-8deg);
	pointer-events: none;
}

/* ── Tournament champion & announcement ─────────────────────── */
.tournament-champion {
	display: flex; align-items: center; gap: 12px;
	background: linear-gradient(135deg, rgba(242, 178, 29, 0.18), rgba(205, 124, 17, 0.1));
	border: 1px solid rgba(242, 178, 29, 0.45);
	border-radius: var(--radius-sm);
	padding: 14px 20px; margin: 14px 0;
	font-family: var(--font-display);
	font-size: clamp(17px, 2vw, 21px); font-weight: 900;
	color: var(--amber-2);
	box-shadow: 0 8px 24px rgba(242, 178, 29, 0.12), var(--top-light);
}
.tournament-champion .ic { filter: drop-shadow(0 0 8px rgba(242, 178, 29, 0.6)); }
.tournament-announce {
	display: flex; align-items: center; gap: 10px;
	background: rgba(242, 178, 29, 0.07);
	border: 1px dashed rgba(242, 178, 29, 0.4);
	border-radius: var(--radius-sm);
	padding: 12px 18px; margin: 14px 0;
	color: #e8d9b0; font-size: 14.5px; font-weight: 700;
}

/* ── Community photos ───────────────────────────────────────── */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.photo-card {
	margin: 0; overflow: hidden;
	background: var(--panel); border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	box-shadow: var(--elev-1), var(--top-light);
}
.photo-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-card figcaption { padding: 12px 16px; }
.photo-card strong { display: block; color: var(--amber-2); font-size: 14px; }
.photo-card span { color: var(--muted); font-size: 12.5px; }
.consent-field { background: rgba(242, 178, 29, 0.06); border: 1px solid rgba(242, 178, 29, 0.22); border-radius: var(--radius-sm); padding: 14px 16px; }
.consent-label { display: flex !important; gap: 12px; align-items: flex-start; cursor: pointer; font-weight: 600 !important; }
.consent-label input { width: auto !important; margin-top: 3px; accent-color: var(--amber); }
.consent-label span { font-size: 13.5px; color: #e8d9b0; line-height: 1.55; }
.contact-form input[type="file"] { padding: 10px; }
.header-signup { display: inline-flex; }
@media (max-width: 860px) { .header-signup { display: none; } }

/* Header: signed-in member chip */
.header-user { display: flex; align-items: center; gap: 10px; }
.header-user-chip {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(242, 178, 29, 0.1);
	border: 1px solid rgba(242, 178, 29, 0.3);
	border-radius: 999px;
	padding: 6px 14px 6px 8px;
	color: var(--amber-2); font-size: 13px; font-weight: 700;
	transition: background 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth);
}
.header-user-chip:hover { background: rgba(242, 178, 29, 0.18); border-color: rgba(242, 178, 29, 0.5); color: var(--amber-2); }
.header-user-chip img { display: block; }
.header-user-logout { color: var(--muted); font-size: 12px; font-weight: 600; }
.header-user-logout:hover { color: var(--text); }
@media (max-width: 860px) { .header-user { display: none; } }

/* Header: passwordless sign-in dropdown */
.header-signin { position: relative; }
.signin-pop {
	position: absolute; top: calc(100% + 12px); right: 0; z-index: 80;
	width: 290px;
	background: linear-gradient(180deg, rgba(28, 38, 33, 0.98), rgba(18, 26, 22, 0.98));
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 16px;
	padding: 18px;
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
	animation: gs-dialog-pop 0.35s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.signin-pop[hidden] { display: none; }
.signin-pop-title { color: var(--text); font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.signin-pop form { display: grid; gap: 10px; }
.signin-pop input[type="email"] {
	width: 100%;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid var(--line-soft);
	border-radius: 10px;
	padding: 10px 12px;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 14px;
}
.signin-pop input[type="email"]:focus { outline: none; border-color: rgba(242, 178, 29, 0.6); }
.signin-pop-note { color: var(--muted); font-size: 11.5px; margin-top: 10px; line-height: 1.5; }
.signin-google { display: flex; justify-content: center; margin-top: 10px; }
@media (max-width: 860px) { .header-signin { display: none; } }
.mobile-nav-auth { display: flex; gap: 18px; padding: 4px 24px 16px; }
.mobile-nav-auth a { color: var(--amber-2); font-weight: 700; font-size: 14px; }

/* ── Kathmandu Sky: live time-of-day band above the hero ─────────── */
.ktm-sky { position: relative; height: 150px; overflow: hidden; }
.ktm-sky::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
	background: linear-gradient(180deg, rgba(12, 17, 13, 0) 0%, rgba(12, 17, 13, 0.85) 70%, #0c110d 100%);
	z-index: 2;
}
.ktm-ridges svg { position: absolute; left: 0; width: 100%; display: block; }
.ktm-r-far { bottom: 16px; height: 62px; }
.ktm-r-mid { bottom: 5px; height: 54px; }
.ktm-r-near { bottom: -1px; height: 46px; }
.ktm-orb, .ktm-glow { position: absolute; border-radius: 50%; transition: left 60s linear, top 60s linear; }
.ktm-glow { pointer-events: none; transform: translate(-50%, -50%); }
.ktm-orb { transform: translate(-50%, -50%); }
.ktm-caption {
	position: absolute; right: 16px; top: 10px; z-index: 3;
	font-size: 11px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); margin: 0;
}
.ktm-stars, .ktm-clouds { display: none; }
.ktm-stars span { position: absolute; background: #fff; border-radius: 50%; }
.ktm-stars .s1 { width: 1.5px; height: 1.5px; opacity: 0.7; }
.ktm-stars .s2 { width: 2px; height: 2px; opacity: 0.9; box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.4); }
.ktm-stars .s3 { width: 2.6px; height: 2.6px; box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.5); }
.ktm-clouds span { position: absolute; height: 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.35); filter: blur(6px); }

/* Dawn */
.ktm-dawn { background:
	radial-gradient(120% 90% at 20% 100%, rgba(255, 166, 87, 0.55) 0%, rgba(255, 166, 87, 0) 55%),
	linear-gradient(180deg, #12182b 0%, #2d2b48 34%, #6d4360 58%, #b96a4e 78%, #eda05f 96%); }
.ktm-dawn .ktm-glow { width: 190px; height: 190px;
	background: radial-gradient(circle, rgba(255, 205, 130, 0.65) 0%, rgba(255, 160, 80, 0.25) 40%, rgba(255, 160, 80, 0) 70%); }
.ktm-dawn .ktm-orb { width: 30px; height: 30px;
	background: radial-gradient(circle at 42% 38%, #fff3cf, #ffc46e 70%, #f79d4a);
	box-shadow: 0 0 18px 6px rgba(255, 190, 110, 0.8), 0 0 60px 24px rgba(255, 150, 70, 0.35); }
.ktm-dawn .ktm-r-far path { fill: #4a3a55; } .ktm-dawn .ktm-r-far .snow { fill: rgba(255, 200, 160, 0.5); }
.ktm-dawn .ktm-r-mid path { fill: #2c2337; } .ktm-dawn .ktm-r-mid .snow { fill: rgba(255, 170, 120, 0.28); }
.ktm-dawn .ktm-r-near path { fill: #15141d; } .ktm-dawn .ktm-r-near .snow { fill: transparent; }

/* Day */
.ktm-day { background:
	radial-gradient(110% 100% at 66% -20%, rgba(255, 252, 235, 0.5) 0%, rgba(255, 252, 235, 0) 45%),
	linear-gradient(180deg, #2a5478 0%, #40749b 45%, #7ba7bd 80%, #a9c6cf 100%); }
.ktm-day .ktm-glow { width: 170px; height: 170px;
	background: radial-gradient(circle, rgba(255, 252, 230, 0.75) 0%, rgba(255, 250, 220, 0.2) 45%, rgba(255, 250, 220, 0) 70%); }
.ktm-day .ktm-orb { width: 34px; height: 34px;
	background: radial-gradient(circle at 42% 38%, #ffffff, #fff4c8 70%, #ffe9a0);
	box-shadow: 0 0 22px 8px rgba(255, 248, 215, 0.9), 0 0 70px 30px rgba(255, 245, 200, 0.35); }
.ktm-day .ktm-clouds { display: block; }
.ktm-day .ktm-r-far path { fill: #6f93a8; } .ktm-day .ktm-r-far .snow { fill: rgba(255, 255, 255, 0.85); }
.ktm-day .ktm-r-mid path { fill: #43617a; } .ktm-day .ktm-r-mid .snow { fill: rgba(255, 255, 255, 0.55); }
.ktm-day .ktm-r-near path { fill: #1d2b35; } .ktm-day .ktm-r-near .snow { fill: rgba(255, 255, 255, 0.14); }
.ktm-day .ktm-caption { color: rgba(20, 30, 40, 0.6); }

/* Dusk */
.ktm-dusk { background:
	radial-gradient(130% 95% at 76% 100%, rgba(255, 120, 60, 0.6) 0%, rgba(255, 120, 60, 0) 55%),
	linear-gradient(180deg, #171332 0%, #3c2347 40%, #7c3a4a 64%, #c65b3d 84%, #ef8f4f 100%); }
.ktm-dusk .ktm-glow { width: 210px; height: 210px;
	background: radial-gradient(circle, rgba(255, 150, 80, 0.7) 0%, rgba(230, 100, 50, 0.28) 42%, rgba(230, 100, 50, 0) 70%); }
.ktm-dusk .ktm-orb { width: 32px; height: 32px;
	background: radial-gradient(circle at 42% 40%, #ffe0a8, #f2854a 70%, #d95f2f);
	box-shadow: 0 0 20px 8px rgba(255, 140, 70, 0.85), 0 0 70px 28px rgba(240, 110, 50, 0.4); }
.ktm-dusk .ktm-r-far path { fill: #5e3348; } .ktm-dusk .ktm-r-far .snow { fill: rgba(255, 160, 110, 0.55); }
.ktm-dusk .ktm-r-mid path { fill: #341f33; } .ktm-dusk .ktm-r-mid .snow { fill: rgba(255, 130, 90, 0.3); }
.ktm-dusk .ktm-r-near path { fill: #160f18; } .ktm-dusk .ktm-r-near .snow { fill: transparent; }

/* Night */
.ktm-night { background:
	radial-gradient(90% 80% at 24% 0%, rgba(120, 140, 200, 0.18) 0%, rgba(120, 140, 200, 0) 55%),
	linear-gradient(180deg, #030509 0%, #0a1020 46%, #131c33 78%, #1a2440 100%); }
.ktm-night .ktm-glow { width: 130px; height: 130px;
	background: radial-gradient(circle, rgba(225, 232, 255, 0.4) 0%, rgba(225, 232, 255, 0.12) 45%, rgba(225, 232, 255, 0) 70%); }
.ktm-night .ktm-orb { width: 28px; height: 28px;
	background: radial-gradient(circle at 40% 36%, #ffffff, #e7e9e2 55%, #c9cdc4);
	box-shadow: 0 0 14px 4px rgba(235, 240, 255, 0.55), 0 0 44px 16px rgba(220, 230, 255, 0.18); }
.ktm-night .ktm-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
	background:
		radial-gradient(circle at 66% 30%, rgba(150, 158, 148, 0.5) 0 3px, transparent 4px),
		radial-gradient(circle at 38% 60%, rgba(150, 158, 148, 0.45) 0 2.5px, transparent 3.5px),
		radial-gradient(circle at 60% 68%, rgba(150, 158, 148, 0.4) 0 2px, transparent 3px); }
.ktm-night .ktm-stars { display: block; }
.ktm-night .ktm-stars span:nth-child(3n) { animation: ktm-tw 3s ease-in-out infinite; }
.ktm-night .ktm-stars span:nth-child(3n+1) { animation: ktm-tw 4.2s ease-in-out 1.4s infinite; }
@keyframes ktm-tw { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.ktm-night .ktm-r-far path { fill: #1b2233; } .ktm-night .ktm-r-far .snow { fill: rgba(200, 215, 255, 0.3); }
.ktm-night .ktm-r-mid path { fill: #10141f; } .ktm-night .ktm-r-mid .snow { fill: rgba(190, 205, 255, 0.16); }
.ktm-night .ktm-r-near path { fill: #070a10; } .ktm-night .ktm-r-near .snow { fill: transparent; }

@media (max-width: 760px) {
	.ktm-sky { height: 96px; }
	.ktm-caption { font-size: 10px; top: 7px; right: 12px; }
	.ktm-r-far { height: 36px; bottom: 10px; } .ktm-r-mid { height: 38px; bottom: 3px; } .ktm-r-near { height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
	.ktm-stars span { animation: none !important; }
	.ktm-orb, .ktm-glow { transition: none; }
}

/* ── 404: the page the tiger ate ─────────────────────────────────── */
.err-hero {
	position: relative;
	overflow: hidden;
	min-height: 72vh;
	display: grid;
	align-items: center;
	padding: clamp(50px, 9vw, 110px) 0 120px;
	text-align: center;
}
.err-wrap { max-width: 720px; }
.err-hero .eyebrow { letter-spacing: 0.16em; }
.err-code {
	display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 14px);
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(110px, 22vw, 210px);
	line-height: 1;
	color: var(--amber-2, #f6cf5d);
	text-shadow: 0 8px 40px rgba(242, 178, 29, 0.25);
	margin: 10px 0 6px;
	user-select: none;
}
.err-goat {
	background: none; border: 0; padding: 0; cursor: pointer;
	width: clamp(100px, 18vw, 170px); height: clamp(100px, 18vw, 170px);
	animation: err-bob 3s ease-in-out infinite;
}
.err-goat img { width: 100%; height: 100%; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5)); }
.err-goat.is-hop { animation: err-hop 0.55s cubic-bezier(0.3, 1.6, 0.4, 1); }
@keyframes err-bob {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50% { transform: translateY(-10px) rotate(2deg); }
}
@keyframes err-hop {
	0% { transform: translateY(0); }
	35% { transform: translateY(-26px) rotate(-8deg) scale(1.06); }
	70% { transform: translateY(2px) rotate(4deg); }
	100% { transform: translateY(0); }
}
.err-hero h1 { font-size: clamp(26px, 4.5vw, 40px); margin-bottom: 10px; }
.err-joke { max-width: 52ch; margin-left: auto; margin-right: auto; }
.err-hero .hero-actions { justify-content: center; margin-top: 22px; }
.err-hint { color: var(--muted); font-size: 12px; margin-top: 26px; opacity: 0.8; }
.err-tiger {
	position: absolute; bottom: 14px; left: -90px;
	animation: err-prowl 26s linear infinite;
	pointer-events: none;
	opacity: 0.9;
}
.err-tiger img { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5)); animation: err-pad 0.7s ease-in-out infinite; }
@keyframes err-prowl {
	0% { transform: translateX(0) scaleX(1); }
	49% { transform: translateX(calc(100vw + 180px)) scaleX(1); }
	50% { transform: translateX(calc(100vw + 180px)) scaleX(-1); }
	99% { transform: translateX(0) scaleX(-1); }
	100% { transform: translateX(0) scaleX(1); }
}
@keyframes err-pad {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
	.err-goat, .err-tiger, .err-tiger img { animation: none; }
}

/* ── Opponent moods: difficulty dresses the COMPUTER's pieces only ── */
/* Playing Goats: the computer's tigers get fiercer. Easy = untouched cub. */
#baghchal-app[data-bgside="G"][data-bglevel="2"] .gs-tiger image {
	filter: saturate(1.15) contrast(1.18) brightness(0.92);
}
#baghchal-app[data-bgside="G"][data-bglevel="3"] .gs-tiger image {
	filter: sepia(0.35) saturate(2.2) hue-rotate(-18deg) contrast(1.3) brightness(0.88) drop-shadow(0 0 9px rgba(220, 60, 30, 0.55));
}
/* Playing Tigers: the computer's herd changes build. */
#baghchal-app[data-bgside="T"] .gs-goat image {
	transform-box: fill-box;
	transform-origin: center bottom;
}
#baghchal-app[data-bgside="T"][data-bglevel="1"] .gs-goat image {
	transform: scaleX(0.82); /* The Kid — skinny, easy prey. */
}
#baghchal-app[data-bgside="T"][data-bglevel="2"] .gs-goat image {
	transform: scale(1.12); /* The Well-Fed. */
	filter: saturate(1.25) brightness(1.06);
}
#baghchal-app[data-bgside="T"][data-bglevel="3"] .gs-goat image {
	transform: scale(1.24); /* The Prize Goat. */
	filter: saturate(1.3) brightness(1.08) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}

/* ── Avatars: round animal chips ─────────────────────────────────── */
.bagh-av {
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	line-height: 1;
	/* Glossy "physical" chip: top highlight, soft inner shade, drop shadow. */
	box-shadow:
		inset 0 2px 3px rgba(255, 255, 255, 0.35),
		inset 0 -4px 7px rgba(0, 0, 0, 0.22),
		0 2px 5px rgba(0, 0, 0, 0.28);
	flex-shrink: 0;
	vertical-align: middle;
	overflow: hidden;
}
.header-user-av { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
/* Illustrated SVG avatars fill the circular chip edge to edge. */
.bagh-av-art { padding: 0; background: transparent; }
.bagh-av-art svg { display: block; width: 100%; height: 100%; }

/* Profile page */
.profile-wrap { display: grid; gap: 20px; }
.profile-card {
	background: var(--card, #141b15);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-sm, 16px);
	padding: 24px;
}
.profile-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.profile-avatar .bagh-av { box-shadow: inset 0 0 0 2px rgba(246, 207, 93, 0.35), 0 8px 20px rgba(0, 0, 0, 0.4); }
.profile-id { display: grid; gap: 2px; }
.profile-id strong { font-size: 20px; color: var(--text); }
.profile-email { color: var(--muted); font-size: 14px; }
.profile-via { color: var(--amber-2); font-size: 12px; }
.profile-stats { display: flex; gap: 26px; margin-bottom: 18px; }
.profile-stats div { display: grid; }
.profile-stats b { font-size: 24px; color: var(--amber-2); font-family: var(--font-display); }
.profile-stats span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px; margin-top: 14px; }
.avatar-choice {
	background: none; border: 0; padding: 4px; cursor: pointer;
	border-radius: 50%;
	display: grid; place-items: center;
	transition: transform 0.15s ease;
}
.avatar-choice:hover { transform: scale(1.12); }
.avatar-choice.is-current .bagh-av { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 3px var(--amber, #f2b21d); }

/* ── How to Play: launcher card + guided-tour modal ─────────────── */
.howto-launch {
	display: flex; align-items: center; gap: 14px;
	width: 100%;
	background: linear-gradient(135deg, rgba(242, 178, 29, 0.16), rgba(79, 174, 141, 0.10)), linear-gradient(180deg, #18211a, #10160f);
	border: 1px solid rgba(242, 178, 29, 0.4);
	border-radius: var(--radius-sm);
	padding: 16px 18px;
	margin-bottom: 18px;
	cursor: pointer;
	text-align: left;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.howto-launch:hover {
	transform: translateY(-2px);
	border-color: rgba(242, 178, 29, 0.8);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.howto-launch-play {
	position: relative;
	display: grid; place-items: center; flex-shrink: 0;
	width: 50px; height: 50px; border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, #24301f, #10160f 70%);
	border: 1.5px solid rgba(246, 207, 93, 0.55);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 16px rgba(0, 0, 0, 0.4);
}
.howto-launch-play::after {
	content: "";
	position: absolute; inset: -5px;
	border-radius: 50%;
	border: 1.5px solid rgba(246, 207, 93, 0.5);
	animation: howto-halo 2.2s ease-out infinite;
}
@keyframes howto-halo {
	0% { opacity: 0.9; transform: scale(0.86); }
	70%, 100% { opacity: 0; transform: scale(1.28); }
}
.howto-launch-play img { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); transition: transform 0.25s ease; }
.howto-launch:hover .howto-launch-play img { transform: scale(1.12) rotate(-6deg); }
.howto-launch-text { display: grid; gap: 2px; }
.howto-launch-text strong { color: var(--text); font-size: 16px; font-weight: 800; }
.howto-launch-text small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }

.howto-backdrop {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(5, 8, 6, 0.9);
	display: grid; place-items: center;
	padding: 20px;
}
.howto-backdrop[hidden] { display: none; }
body.howto-open { overflow: hidden; }
.howto-dialog {
	position: relative;
	width: min(860px, 100%);
	background: linear-gradient(180deg, rgba(28, 38, 33, 0.99), rgba(15, 21, 17, 0.99));
	border: 1px solid rgba(246, 207, 93, 0.25);
	border-radius: 22px;
	padding: clamp(20px, 4vw, 34px);
	box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7);
	animation: gs-dialog-pop 0.4s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.howto-close {
	position: absolute; top: 14px; right: 16px;
	background: none; border: 0; cursor: pointer;
	color: var(--muted); font-size: 30px; line-height: 1;
}
.howto-close:hover { color: var(--text); }
.howto-eyebrow {
	color: var(--amber-2); font-size: 12px; font-weight: 800;
	letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px;
}
.howto-steps { position: relative; min-height: 330px; }
.howto-step {
	display: none;
	grid-template-columns: minmax(0, 44%) 1fr;
	gap: clamp(18px, 3vw, 32px);
	align-items: center;
}
.howto-step.is-active { display: grid; animation: howto-slide 0.35s ease both; }
@keyframes howto-slide {
	from { opacity: 0; transform: translateX(18px); }
	to { opacity: 1; transform: none; }
}
.howto-copy h3 { font-size: clamp(22px, 3vw, 28px); margin-bottom: 10px; }
.howto-copy p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin-bottom: 10px; }
.howto-step-num {
	display: inline-block;
	color: var(--jade, #4fae8d); font-size: 11.5px; font-weight: 800;
	letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px;
}
.howto-board { width: 100%; height: auto; }
.howto-board-bg { fill: rgba(0, 0, 0, 0.3); stroke: rgba(246, 207, 93, 0.28); }
.howto-board line, .howto-board path[fill='none'] { stroke: rgba(246, 207, 93, 0.45); stroke-width: 2; }
.howto-point { fill: rgba(246, 207, 93, 0.55); }
.howto-piece { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
.howto-ghost { opacity: 0.45; animation: howto-drop 1.6s ease-in-out infinite; }
@keyframes howto-drop {
	0%, 100% { transform: translateY(-6px); opacity: 0.25; }
	50% { transform: translateY(0); opacity: 0.65; }
}
.howto-doomed { animation: howto-fade 1.8s ease-in-out infinite; }
@keyframes howto-fade {
	0%, 40%, 100% { opacity: 1; }
	70% { opacity: 0.25; }
}
.howto-trapped { animation: howto-shake 2s ease-in-out infinite; transform-origin: 40px 40px; }
@keyframes howto-shake {
	0%, 100% { transform: rotate(0); }
	40% { transform: rotate(-6deg); }
	60% { transform: rotate(6deg); }
}
.howto-ring {
	fill: none; stroke: var(--jade, #4fae8d); stroke-width: 3;
	animation: howto-pulse 1.6s ease-out infinite;
	transform-origin: center;
	transform-box: fill-box;
}
.howto-ring-danger { stroke: #e07a5f; }
@keyframes howto-pulse {
	0% { opacity: 1; transform: scale(0.75); }
	100% { opacity: 0; transform: scale(1.5); }
}
.howto-arrow {
	fill: none; stroke: var(--amber-2, #f2b21d); stroke-width: 4;
	stroke-dasharray: 10 8;
	animation: howto-dash 1.2s linear infinite;
}
.howto-arrowhead { fill: var(--amber-2, #f2b21d); }
@keyframes howto-dash {
	to { stroke-dashoffset: -36; }
}
.howto-mock { display: grid; gap: 18px; place-items: center; padding: 20px 0; }
.howto-mock-cards { display: flex; gap: 14px; }
.howto-mock-card {
	display: grid; place-items: center; gap: 6px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--line-soft);
	border-radius: 14px;
	padding: 18px 26px;
	color: var(--text); font-size: 14px;
}
.howto-mock-chips { display: flex; gap: 8px; }
.howto-mock-board { list-style: none; width: 100%; max-width: 260px; display: grid; gap: 8px; margin: 0; }
.howto-mock-board li {
	display: flex; align-items: baseline; gap: 8px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--line-soft);
	border-radius: 10px;
	padding: 9px 14px;
	color: var(--text); font-size: 13.5px;
}
.howto-mock-board li span { color: var(--amber-2); font-weight: 800; }
.howto-mock-board li em { margin-left: auto; color: var(--muted); font-style: normal; }
.howto-nav {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	margin-top: 22px; padding-top: 18px;
	border-top: 1px solid var(--line-soft);
}
.howto-nav .btn:disabled { opacity: 0.35; cursor: default; }
.howto-dots { display: flex; gap: 8px; }
.howto-dot {
	width: 10px; height: 10px; border-radius: 50%;
	border: 0; cursor: pointer; padding: 0;
	background: rgba(255, 255, 255, 0.18);
	transition: transform 0.2s ease, background 0.2s ease;
}
.howto-dot.is-active { background: var(--amber-2, #f2b21d); transform: scale(1.3); }
@media (max-width: 720px) {
	.howto-step { grid-template-columns: 1fr; }
	.howto-visual { max-width: 300px; margin: 0 auto; }
	.howto-steps { min-height: 0; }
}

/* Sign-in dropdown: "or continue with" + icon row */
.signin-pop-or {
	display: flex; align-items: center; gap: 10px;
	color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
	margin: 12px 0 10px;
}
.signin-pop-or::before, .signin-pop-or::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.social-signin-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.social-signin-row .social-icon-btn { width: 40px; height: 40px; }

/* Blocked-comment popup */
body.bagh-note-open { overflow: hidden; }
.bagh-note-backdrop {
	position: fixed; inset: 0; z-index: 300;
	background: rgba(5, 8, 6, 0.82);
	display: none; place-items: center; padding: 20px;
	animation: bg-fade 0.2s ease both;
}
.bagh-note-backdrop.is-open { display: grid; }
@keyframes bg-fade { from { opacity: 0; } to { opacity: 1; } }
.bagh-note {
	width: min(360px, 100%);
	background: linear-gradient(180deg, rgba(30, 41, 34, 0.99), rgba(15, 21, 17, 0.99));
	border: 1px solid rgba(224, 122, 95, 0.4);
	border-radius: 18px;
	padding: 26px 24px 22px;
	text-align: center;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
	animation: gs-dialog-pop 0.35s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.bagh-note-face { display: inline-block; line-height: 0; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); margin-bottom: 8px; }
.bagh-note h3 { font-size: 20px; margin-bottom: 8px; color: var(--text); }
.bagh-note p { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 18px; }

/* Signup page: colorful social icon buttons */
.social-signup-icons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.social-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 50px; height: 50px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--line-soft);
	transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
a.social-icon-btn:hover, a.social-icon-btn:focus-visible {
	transform: translateY(-3px) scale(1.05);
	border-color: rgba(246, 207, 93, 0.5);
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}
.social-icon-btn.is-disabled { opacity: 0.32; filter: saturate(0.4); cursor: not-allowed; }
.social-icon-btn svg { display: block; }

/* Signup page: X sign-up completion card */
.xjoin-card {
	margin-bottom: 28px; padding: 20px;
	border: 1px solid rgba(242, 178, 29, 0.35);
	border-radius: var(--radius-sm);
	background: rgba(242, 178, 29, 0.06);
}
.xjoin-card h2 { font-size: 22px; margin-bottom: 6px; }
.xjoin-note { margin-top: 12px; color: var(--muted); font-size: 12.5px; }
.xjoin-note a { color: var(--amber-2); }

/* Signup page: inline sign-in block */
.signin-block { margin-top: 28px; border-top: 1px solid var(--line-soft); padding-top: 22px; }
.signin-block h3 { font-size: 19px; margin-bottom: 4px; }
.signin-inline { display: flex; gap: 10px; flex-wrap: wrap; }
.signin-inline input[type="email"] {
	flex: 1; min-width: 200px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-sm);
	padding: 11px 14px;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 14px;
}
.signin-inline input[type="email"]:focus { outline: none; border-color: rgba(242, 178, 29, 0.6); }

/* Signup: already-a-member card */
.member-card { display: grid; justify-items: center; text-align: center; }
.member-card .piece-medal { margin-bottom: 14px; }
.member-email { color: var(--amber-2); font-weight: 700; }
.member-stats {
	background: rgba(242, 178, 29, 0.08);
	border: 1px solid rgba(242, 178, 29, 0.25);
	border-radius: 999px;
	padding: 7px 18px;
	color: #e8d9b0; font-size: 13.5px; font-weight: 700;
	margin-bottom: 8px;
}
.member-actions { justify-content: center; margin-top: 16px; }

/* Every animation stands down for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.reveal { opacity: 1; transform: none; }
	html { scroll-behavior: auto; }
}