/*
 * Game Pulse look: hearthstone (r12). The look contract is docs/pilot/game-pulse-r12-design.md: token values for
 * [data-game="hearthstone"] and .is-game-hearthstone, then the game's own ornaments, all scoped to this game.
 *
 * Our own drawing of the game's interface language, in CSS only: the inn's carved wood and stone frames with gold
 * rims, blue-to-purple magic on whatever is chosen or glowing, mana crystals, rarity gems and class colours. No game
 * art beyond the bundled official icons (assets/official/hearthstone, with their notices); the fan-site notice stays.
 *
 * Font: Fraunces (weights 700 and 900, latin subset), SIL Open Font License 1.1 (assets/fonts/hearthstone/OFL.txt),
 * copyright 2020 The Fraunces Project Authors; from the @fontsource/fraunces npm package, version 5.3.0. An open,
 * soft, heavy old-style serif standing in for the game's own title face, which is commercial and not bundled. Body
 * text stays in the system stack.
 */

@font-face {
	font-family: "GP Fraunces";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/hearthstone/fraunces-latin-900-normal.woff2") format("woff2");
}

@font-face {
	font-family: "GP Fraunces";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/hearthstone/fraunces-latin-700-normal.woff2") format("woff2");
}

/* A Georgia fallback sized to Fraunces, so the swap does not shift the layout. */
@font-face {
	font-family: "GP Fraunces Fallback";
	src: local("Georgia");
	size-adjust: 104%;
	ascent-override: 95%;
	descent-override: 25%;
	line-gap-override: 0%;
}

[data-game="hearthstone"],
.is-game-hearthstone {
	--gp-surface: light-dark(#F6EAC9, #24160D);
	--gp-surface-2: light-dark(#FBF3DF, #2F1E13);
	--gp-surface-sunk: light-dark(#EADAB0, #150C06);
	--gp-ink: light-dark(#38220F, #F3E6C4);
	--gp-ink-muted: light-dark(#654A2E, #CDB88F);
	--gp-ink-strong: light-dark(#1F120A, #FFF4D6);
	--gp-accent: light-dark(#1A5BBF, #6EC1FF);
	--gp-accent-ink: #FFFFFF;
	--gp-accent-2: light-dark(#5B36C2, #B39DFF);
	--gp-title-ink: light-dark(#5A3412, #FFD877);
	--gp-title-shadow: light-dark(0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 0 #000, 0 0 6px rgba(0, 0, 0, 0.7));
	--gp-head-font: "GP Fraunces", "GP Fraunces Fallback", Georgia, "Times New Roman", serif;
	--gp-num-font: "GP Fraunces", "GP Fraunces Fallback", Georgia, serif;
	--gp-frame-border: 3px solid transparent;
	--gp-frame-radius: 18px;
	--gp-frame-shadow:
		inset 0 0 0 1px light-dark(rgba(255, 255, 255, 0.7), rgba(255, 233, 174, 0.12)),
		0 0 0 3px light-dark(#7A4E26, #4A2E1C),
		0 0 0 5px light-dark(#C8902E, #A8711F),
		0 0 0 7px light-dark(#5A3714, #1A0F08),
		0 18px 30px -18px rgba(0, 0, 0, 0.8);
	--gp-frame-image:
		radial-gradient(120% 70% at 50% 0%, light-dark(rgba(255, 255, 255, 0.55), rgba(122, 92, 255, 0.09)), transparent 65%),
		repeating-linear-gradient(91deg, light-dark(rgba(122, 78, 38, 0.035), rgba(255, 220, 160, 0.025)) 0 2px, transparent 2px 11px);
	--gp-tab-bg: linear-gradient(180deg, #4A2E1C, #2B1A10);
	--gp-tab-ink: #EAD8A8;
	--gp-tab-active-bg: radial-gradient(120% 160% at 50% 0%, #7FC4FF 0%, #2A6FE0 50%, #35228F 100%);
	--gp-tab-active-ink: #FFFFFF;
	--gp-tab-shape: none;
	--gp-btn-bg: radial-gradient(120% 160% at 50% 0%, #7FC4FF 0%, #2A6FE0 45%, #2E1F8F 100%);
	--gp-btn-ink: #FFFFFF;
	--gp-btn-border: 2px solid #F2C14E;
	--gp-btn-hover-bg: radial-gradient(120% 160% at 50% 0%, #A8DCFF 0%, #3A82F0 45%, #4430B0 100%);
	--gp-table-head-bg: linear-gradient(180deg, #4A2E1C, #2B1A10);
	--gp-table-head-ink: #FFE9AE;
	--gp-row-alt: light-dark(rgba(122, 78, 38, 0.07), rgba(255, 233, 174, 0.045));
	--gp-row-hover: light-dark(rgba(42, 111, 224, 0.12), rgba(110, 160, 255, 0.14));
	--gp-grid-line: light-dark(rgba(90, 52, 18, 0.18), rgba(255, 233, 174, 0.12));
	--gp-good: light-dark(#1E7A39, #6EE08A);
	--gp-bad: light-dark(#B42318, #FF8A80);
	--gp-warn: light-dark(#9A5B00, #FFC857);
	--gp-pop-bg: linear-gradient(180deg, #2E1D12, #150C06);
	--gp-pop-border: 3px solid #F2C14E;
	--gp-pop-shadow: 0 0 0 2px #6B4423, 0 0 22px rgba(110, 140, 255, 0.45), 0 18px 34px rgba(0, 0, 0, 0.7);
	--gp-hero-bg:
		radial-gradient(40rem 16rem at 50% -5rem, rgba(122, 92, 255, 0.42), transparent 70%),
		radial-gradient(30rem 12rem at 18% 120%, rgba(60, 150, 255, 0.28), transparent 70%),
		radial-gradient(30rem 12rem at 82% 120%, rgba(242, 193, 78, 0.22), transparent 70%),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 3px, transparent 3px 120px),
		repeating-linear-gradient(0deg, rgba(255, 220, 160, 0.04) 0 1px, transparent 1px 6px),
		linear-gradient(180deg, #4F311D, #24150B);

	/* The shared stylesheet's current names, until the r12 core merge reads only the tokens above. */
	--gp-panel-title: var(--gp-title-ink);
	--gp-panel-border: light-dark(#B48A4A, #6B4423);
	--gp-panel-bg: var(--gp-frame-image), var(--gp-surface);
	--gp-panel-shadow: var(--gp-frame-shadow);
	--gp-tabs-bg: #24150B;
	--gp-tabs-ink: #EAD8A8;
	--gp-tabs-active: #FFD877;
	--gp-tabs-rule: #A8711F;
	--gp-hero-title: #FFF1C7;
	--gp-hero-rule: #F2C14E;
	--wp--preset--color--ink: var(--gp-ink);
	--wp--preset--color--muted: var(--gp-ink-muted);
	--wp--preset--color--surface: var(--gp-surface);
	--wp--preset--color--surface-alt: var(--gp-surface-2);
}

/* Class tints for tiles, chips and cards on every Hearthstone page. */
:is([data-game="hearthstone"], .is-game-hearthstone) [data-class] { --gp-hsd-class: #6B4423; }
:is([data-game="hearthstone"], .is-game-hearthstone) [data-class="death-knight"] { --gp-hsd-class: #3E8FB8; }
:is([data-game="hearthstone"], .is-game-hearthstone) [data-class="demon-hunter"] { --gp-hsd-class: #2E8F3A; }
:is([data-game="hearthstone"], .is-game-hearthstone) [data-class="druid"] { --gp-hsd-class: #B8681F; }
:is([data-game="hearthstone"], .is-game-hearthstone) [data-class="hunter"] { --gp-hsd-class: #3F8F2A; }
:is([data-game="hearthstone"], .is-game-hearthstone) [data-class="mage"] { --gp-hsd-class: #2E72C7; }
:is([data-game="hearthstone"], .is-game-hearthstone) [data-class="paladin"] { --gp-hsd-class: #B8942A; }
:is([data-game="hearthstone"], .is-game-hearthstone) [data-class="priest"] { --gp-hsd-class: #8F8A80; }
:is([data-game="hearthstone"], .is-game-hearthstone) [data-class="rogue"] { --gp-hsd-class: #4A4A52; }
:is([data-game="hearthstone"], .is-game-hearthstone) [data-class="shaman"] { --gp-hsd-class: #2440A8; }
:is([data-game="hearthstone"], .is-game-hearthstone) [data-class="warlock"] { --gp-hsd-class: #6A3AA8; }
:is([data-game="hearthstone"], .is-game-hearthstone) [data-class="warrior"] { --gp-hsd-class: #A8352A; }

/* ---- the hero band: inn wood, a gold rim, the title in the heavy serif ---- */

.gp-hero.is-game-hearthstone {
	background: var(--gp-hero-bg);
	border-bottom: 3px solid #F2C14E;
	box-shadow: inset 0 -10px 18px -10px rgba(0, 0, 0, 0.8), 0 3px 0 #5A3714;
}

.gp-hero.is-game-hearthstone .gp-hero__title {
	font-family: var(--gp-head-font);
	font-weight: 900;
	letter-spacing: 0.01em;
	color: #FFF1C7;
	text-shadow: 0 3px 0 #2B1A10, 0 0 2px #000, 0 0 24px rgba(122, 92, 255, 0.55);
}

.gp-hero.is-game-hearthstone .gp-hero__eyebrow {
	font-family: var(--gp-head-font);
	font-weight: 700;
	color: #FFD877;
}

.gp-hero.is-game-hearthstone .gp-hero__facts li {
	border: 1px solid rgba(242, 193, 78, 0.7);
	border-radius: 999px;
	color: #F7E9C4;
	background: rgba(20, 11, 6, 0.55);
	box-shadow: inset 0 1px 0 rgba(255, 233, 174, 0.15);
}

.gp-hero.is-game-hearthstone .gp-hero__icons img {
	border-radius: 50%;
	box-shadow: 0 0 0 2px #1A0F08, 0 0 0 3px #C8902E, 0 4px 8px rgba(0, 0, 0, 0.6);
}

/* ---- section tabs: wooden tabs with gold rims; the open one glows with magic ---- */

.gp-subnav.is-game-hearthstone {
	background: linear-gradient(180deg, #2B1A10, #1A0F08);
	border-bottom: 2px solid #A8711F;
}

.gp-subnav.is-game-hearthstone a {
	font-family: var(--gp-head-font);
	font-weight: 700;
	color: var(--gp-tab-ink);
	border-radius: 10px 10px 0 0;
}

.gp-subnav.is-game-hearthstone a:hover {
	color: #FFF4D6;
	background: rgba(255, 233, 174, 0.08);
}

.gp-subnav.is-game-hearthstone :is(a[aria-current="page"], .is-active > a, a.is-active) {
	color: var(--gp-tab-active-ink);
	background: var(--gp-tab-active-bg);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 14px rgba(110, 160, 255, 0.55);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* ---- panels: a carved frame (wood rim, gold line, dark edge) with the title between two gems ---- */

.is-game-hearthstone .gp-section .gp-panel {
	border: var(--gp-frame-border);
	border-radius: var(--gp-frame-radius);
	background: var(--gp-frame-image), var(--gp-surface);
	box-shadow: var(--gp-frame-shadow);
	color: var(--gp-ink);
}

.is-game-hearthstone .gp-section .gp-panel__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	font-family: var(--gp-head-font);
	font-weight: 900;
	letter-spacing: 0.01em;
	text-align: center;
	color: var(--gp-title-ink);
	text-shadow: var(--gp-title-shadow);
}

.is-game-hearthstone .gp-section .gp-panel__title::before,
.is-game-hearthstone .gp-section .gp-panel__title::after {
	content: "";
	flex: 0 1 4rem;
	height: 0.55rem;
	background:
		linear-gradient(45deg, transparent 38%, #5FB4FF 40%, #3A4FD8 60%, transparent 62%) center / 0.55rem 0.55rem no-repeat,
		linear-gradient(90deg, transparent, light-dark(#A8711F, #F2C14E) 40%, light-dark(#A8711F, #F2C14E) 60%, transparent) center / 100% 2px no-repeat;
}

.is-game-hearthstone .gp-section .gp-panel__title::after {
	transform: scaleX(-1);
}

.is-game-hearthstone .gp-lead,
.is-game-hearthstone .gp-about {
	color: var(--gp-ink);
}

/* ---- filters: a stone groove with gold rims; the chosen segment glows blue to purple like a selected button ---- */

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-seg {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 4px;
	border-radius: 999px;
	background: linear-gradient(180deg, #2A1A10, #140B06);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 0 2px #A8711F, 0 0 0 3px rgba(0, 0, 0, 0.5);
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-seg__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.5rem;
	padding: 0.3rem 1.1rem;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-family: var(--gp-head-font);
	font-weight: 700;
	font-size: 0.95rem;
	color: #E9D7A8;
	background: transparent;
	cursor: pointer;
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-seg__btn:has(img) {
	padding-left: 0.6rem;
}

@media (max-width: 480px) {
	:is([data-game="hearthstone"], .is-game-hearthstone) .gp-seg {
		flex-wrap: nowrap;
		max-width: 100%;
	}

	:is([data-game="hearthstone"], .is-game-hearthstone) .gp-seg__btn {
		padding: 0.3rem 0.65rem;
		font-size: 0.85rem;
		white-space: nowrap;
	}
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-seg__btn[aria-pressed="true"] {
	color: #FFFFFF;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
	background: var(--gp-tab-active-bg);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 12px rgba(110, 160, 255, 0.65);
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-seg__btn:hover {
	color: #FFF4D6;
}

:is([data-game="hearthstone"], .is-game-hearthstone) :is(.gp-seg__btn, .gp-chip, .gp-search input):focus-visible {
	outline: 3px solid #8FD0FF;
	outline-offset: 2px;
}

/* ---- boards and tables:a wooden header row, parchment rows, the top three in gold, silver and bronze coins ---- */

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-table {
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 0 0 2px light-dark(#B48A4A, #6B4423);
	font-variant-numeric: tabular-nums;
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-table thead th {
	font-family: var(--gp-head-font);
	font-weight: 700;
	color: var(--gp-table-head-ink);
	background: var(--gp-table-head-bg);
	border-bottom: 2px solid #A8711F;
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-table tbody tr:nth-child(even) {
	background: var(--gp-row-alt);
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-table tbody tr:hover {
	background: var(--gp-row-hover);
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-table :is(td, th) {
	border-bottom: 1px solid var(--gp-grid-line);
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-rank-cell {
	width: 3.2rem;
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-table tr:is([data-rank="1"], [data-rank="2"], [data-rank="3"]) .gp-hs-rank-cell {
	text-align: center;
	color: #2B1A10;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-table tr:is([data-rank="1"], [data-rank="2"], [data-rank="3"]) .gp-hs-rank-cell::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	z-index: -1;
	width: 1.75rem;
	height: 1.75rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--gp-coin);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.4);
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-table .gp-hs-rank-cell {
	position: relative;
	z-index: 0;
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-table tr[data-rank="1"] .gp-hs-rank-cell { --gp-coin: radial-gradient(circle at 35% 30%, #FFF1C7, #F2C14E 55%, #A8711F); }
:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-table tr[data-rank="2"] .gp-hs-rank-cell { --gp-coin: radial-gradient(circle at 35% 30%, #FFFFFF, #C9CED6 55%, #7D8590); }
:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-table tr[data-rank="3"] .gp-hs-rank-cell { --gp-coin: radial-gradient(circle at 35% 30%, #FFD9B0, #C97B3A 55%, #7A4316); }

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-move.is-up {
	color: var(--gp-good);
	font-weight: 700;
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-move.is-down {
	color: var(--gp-bad);
	font-weight: 700;
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-move.is-held {
	color: var(--gp-ink-muted);
	font-size: 0.6rem;
}

/* ---- season tiles and plates: stone tablets with gold numbers ---- */

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-tile {
	border: 0;
	border-radius: 14px;
	color: #F3E6C4;
	background:
		radial-gradient(90% 60% at 50% 0%, rgba(122, 92, 255, 0.22), transparent 70%),
		linear-gradient(180deg, #3A3530, #1F1B18);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px #6B4423, 0 0 0 3px #A8711F;
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-tile strong {
	font-weight: 900;
	color: #FFD877;
	text-shadow: 0 2px 0 #000;
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-tile span {
	color: #E3D2A6;
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-region__name {
	font-weight: 900;
	color: var(--gp-title-ink);
}

/* ---- news and guide lists in the inn's colours ---- */

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-news__item > a,
.is-game-hearthstone .gp-post-item > a {
	font-family: var(--gp-head-font);
	font-weight: 700;
	color: light-dark(#1A4FA8, #8FD0FF);
}

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-news__item time {
	color: var(--gp-ink-muted);
}

/* ---- charts: lines in magic blue, gold, crimson, green and violet ---- */

:is([data-game="hearthstone"], .is-game-hearthstone) .gp-hs-chart svg {
	border-radius: 10px;
	background: light-dark(rgba(255, 255, 255, 0.45), rgba(0, 0, 0, 0.25));
	box-shadow: inset 0 0 0 1px var(--gp-grid-line);
}

/* ---- the sources line and the about disclosure ---- */

.is-game-hearthstone .gp-sources-line {
	color: var(--gp-ink-muted);
}

.is-game-hearthstone details.gp-about > summary {
	font-family: var(--gp-head-font);
	font-weight: 700;
	color: var(--gp-title-ink);
}

@media (prefers-reduced-motion: reduce) {
	.is-game-hearthstone * {
		scroll-behavior: auto;
	}
}