/* ===== HOME PAGE - PAGE-LOCAL LAYOUT ===== */
/* DOCS: AI Resources/Core Resources/Code Documentation/page_templates/home/css/page.md */

/* ----- THE MOTD ROW: THE STATISTICS STRIP ----- */
.Top_Panel_Box.Home_Statistics_Panel { table-layout: fixed; padding-left: 0; background: linear-gradient(180deg, hsl(from var(--Color_Surface_Alt) h calc(s + 12) calc(l + 8)) 0%, var(--Color_Surface_Alt) 100%); }
.Home_Statistics_Panel .Motd { width: auto; }
.Home_Statistics_Panel .Top_Panel_Cog_Cell { width: 76px; padding-left: 0; }
.Home_Figures { display: grid; grid-template-columns: repeat(8, calc((100% - 154px) / 7)); align-items: stretch; }
.Home_Statistic { grid-column: span 2; min-width: 0; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; }
.Home_Statistic::after { content: "\00B7"; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); color: var(--Color_Text_Soft); font-size: 22px; line-height: 0; }
.Home_Statistic:last-child::after { display: none; }
.Home_Statistic_Head { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.Home_Statistic_Label { letter-spacing: 0.11em; color: var(--Color_Accent_Strong); }
.Home_Statistic_Sub_Label { letter-spacing: 0.11em; color: var(--Color_Text_Mid); }
.Home_Statistic_Value { line-height: 18px; color: var(--Color_Main); }
.Home_Statistic_Subs { display: flex; flex-direction: column; justify-content: center; text-align: right; line-height: 1.35; color: var(--Color_Text_Soft); }
.Home_Statistic_Sub_Value { color: var(--Color_Text); }
.Home_Statistic_Value, .Home_Statistic_Sub_Value { --Ticker_Turn: 500ms; transition: color 0.3s ease; }
.Home_Statistic_Value.Is_Rolling, .Home_Statistic_Sub_Value.Is_Rolling { color: var(--Color_Positive); transition: color 0.08s ease; }

/* ----- THE TUTORIAL ANCHOR SLOT: THE EVENT TRACKER ----- */
.Home_Event_Anchor
	{
		position: relative;
		border-top: 0;
		border-left: 0;
		border-right: 0;
		border-radius: 0;
		--Event_Banner_Scale: 0.4426;
		--Event_Banner_Width: calc(393px * var(--Event_Banner_Scale));
		--Event_Banner_Edge: 10px;
		--Event_Strip_Banner_Width: 120px;
		--Event_Strip_Badge_Height: 44px;
	}

/* ----- THE BEAM AND ITS BANNERS: THREE PIECES IN PSD PAINT ORDER ----- */
.Home_Event_Frame { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 2; pointer-events: none; }
.Home_Event_Beam { position: absolute; top: -1px; left: 0; width: 100%; height: auto; }
.Home_Event_Banner { position: absolute; top: calc(-1px - 8px * var(--Event_Banner_Scale)); width: var(--Event_Banner_Width); height: auto; }
.Home_Event_Banner_Left { left: var(--Event_Banner_Edge); }
.Home_Event_Banner_Right { right: var(--Event_Banner_Edge); }
.Home_Event_Content { padding-left: calc(var(--Event_Banner_Edge) + var(--Event_Banner_Width) + 20px); padding-right: calc(var(--Event_Banner_Edge) + var(--Event_Banner_Width) + 20px); padding-top: 35px; }
.Home_Event_Head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.Home_Event_Head > :not(.Home_Event_Icon, .Home_Event_Icons) { grid-column: 2; }
.Home_Event_Head > .Home_Event_Icons { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.Home_Event_Head:has(.Home_Event_Icons) { cursor: pointer; }
.Home_Event_Blurb { max-width: 720px; }

/* ----- THE SALE AND BOOST STRIP: AN ICON ROW THAT ROLLS OUT ----- */
.Home_Event_Icons { display: flex; align-items: center; gap: 16px; color: var(--Color_Text_Mid); }
.Home_Event_Icons:focus-visible { color: var(--Color_Main); }
.Home_Event_Icon_Slot { display: flex; }
.Home_Event_Strip_Badge { height: var(--Event_Strip_Badge_Height); width: auto; }
.Home_Event_Strip_Banner { width: var(--Event_Strip_Banner_Width); height: auto; }
.Home_Event_Strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.Home_Event_Strip_Item { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.Home_Event_Strip_Timer { font-size: var(--Font_Text_Tiny); color: var(--Color_Text_Soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.Home_Event_Strip_Item .Home_Event_Strip_Timer { font-variant-numeric: tabular-nums; }
.Home_Event_Strip_Item .Home_Event_Strip_Timer svg { --Glyph_Size: 14px; display: inline-block; width: var(--Glyph_Size); height: var(--Glyph_Size); vertical-align: calc(0.5cap - var(--Glyph_Size) / 2); margin-right: 4px; }
.Home_Event_Icon { grid-row: 1 / span 2; width: 40px; height: 40px; margin-right: 12px; object-fit: contain; }

/* ===== THE CARD HAND ===== */
.Card_Hand
	{
		position: relative;
		height: calc(328px * var(--Hand_Scale, 1));
		--Card_Turn_Perspective: 1400px;
		--Card_Turn: 0.6s;
		--Card_Travel: 0.4s;
		--Card_Deal_Journey: 0.7s;
		--Card_Deal_Clear: 14px;
		--Card_Deal_Lift: 60px;
		--Card_Deal_Forward: 1.25;
		--Card_Inspect_Scale: 1.45;
		--Card_Inspect_Lift: 20px;
		--Card_Inspect: 0.35s;
		--Card_Inspect_Return: 0.25s;
		--Card_Reshuffle_Gather: 0.5s;
		--Card_Reshuffle_Stagger: 0.06s;
		--Card_Thickness: 3px;
		--Card_Edge_Color: #d9c9a6;
		--Card_Gilt: #c9a14a;
		--Card_Back_Word_Gilt: linear-gradient(180deg, #faecc8 0%, #ecd08a 36%, #c9a14a 52%, #e8c76e 68%, #fbeccb 100%);
		--Card_Deal_Arrow: #5fcc74;
		--Card_Name_Room: 148px;
		--Hand_Scale: 1.057;
		--Hand_Step: 90px;
		--Hand_Shift: 0px;
		--Card_Taper: 0.94;
		--Hand_Line_Card_Fraction: 0.8;
		--Card_Foil_Stock_Ground: hsl(222 13% 10%);
		--Card_Foil_Stock_Plate: hsl(222 13% 15%);
		--Card_Foil_Stock_Border: #666c78;
		--Card_Foil_Stock_Edge: #4b505b;
		--Card_Foil_Stock_Text: #e3e6ec;
		--Card_Foil_Stock_Text_Soft: #8d939e;
		--Card_Foil_Stock_Main: #4ea8ff;
		--Card_Foil_Stock_Accent_Strong: #ECD06A;
		--Card_Foil_Stock_On_Accent: #ffffff;
		--Card_Foil_Stock_Shadow: hsl(220 60% 2%);
		--Card_Foil_Light_Color: #ffffff;
		--Card_Foil_Tint_1: #45e0c0;
		--Card_Foil_Tint_2: #8fe9ff;
		--Card_Foil_Tint_3: #6f8bff;
		--Card_Foil_Tint_4: #a58bff;
		--Card_Foil_Tint_5: #ffd36b;
		--Card_Foil_Opacity: 1;
		--Card_Foil_Crack_Base: 0.35;
		--Card_Foil_Glint_Color: #ffffff;
		--Card_Foil_Glint_Cycle: 4.4s;
		--Card_Foil_Glint_Stagger: 1.3s;
		--Card_Foil_Sheet_Width: 600px;
		--Card_Foil_Sheet_Height: 800px;
		--Card_Foil_Cut_Step_X: 36px;
		--Card_Foil_Cut_Step_Y: 47px;
		--Card_Plate_Top: hsl(262 38% 27%);
		--Card_Plate_Bottom: hsl(262 45% 11%);
		--Card_Plate_Glow_Color: var(--Card_Foil_Tint_4);
		--Card_Plate_Glow_Opacity: 0.67;
		--Card_Plate_Glow_Reach: 12px;
	}
.Sylesti_Card
	{
		position: absolute;
		left: calc(50% + (var(--Hand_Shift) * var(--Hand_Scale, 1)) + (var(--Card_Slot, 0) * var(--Hand_Step) * var(--Hand_Scale, 1)));
		top: calc(50% + var(--Card_Drop, 0px));
		width: var(--Card_Width, calc(232px * var(--Card_Scale, 1)));
		height: var(--Card_Height, calc(324px * var(--Card_Scale, 1)));
		cursor: pointer;
		touch-action: manipulation;
		transform: translate(-50%, -50%);
		transform-origin: 0 0;
		transform-style: flat;
		transition: transform 0.26s ease, box-shadow 0.26s ease;
		--Card_Type_Scale: var(--Card_Scale, 1);
		--Card_Type_Zoom: 1;
	}
.Sylesti_Card.Card_Inspected { --Card_Type_Scale: var(--Hand_Scale, 1); --Card_Type_Zoom: calc(var(--Card_Scale, 1) / var(--Hand_Scale, 1)); }
.Sylesti_Card_Face
	{
		position: absolute;
		inset: -2px;
		--Card_Face_Edge: var(--Color_Secondary_Deep);
		border: 2px solid transparent;
		border-radius: 7px;
		background: linear-gradient(var(--Color_Div_3), var(--Color_Div_3)) padding-box, linear-gradient(var(--Card_Face_Edge), var(--Card_Face_Edge)) border-box;
		overflow: hidden;
		transition: box-shadow 0.26s ease;
	}
.Card_Turning { transform-style: preserve-3d; }
.Card_Turning .Sylesti_Card_Face { backface-visibility: hidden; }
.Sylesti_Card_Face_Back { transform: rotateY(180deg) translateZ(calc(var(--Card_Thickness) * var(--Hand_Scale, 1))); visibility: hidden; }
.Card_Turning .Sylesti_Card_Face_Back { visibility: visible; }
.Card_Face_Down .Sylesti_Card_Face_Front { visibility: hidden; }
.Card_Face_Down .Sylesti_Card_Face_Back { visibility: visible; }
.Sylesti_Card_Edge
	{
		position: absolute;
		top: 6px;
		bottom: 6px;
		left: 50%;
		width: calc(var(--Card_Thickness) * var(--Hand_Scale, 1));
		margin-left: calc(var(--Card_Thickness) * var(--Hand_Scale, 1) / -2);
		background: var(--Card_Edge_Color);
		backface-visibility: hidden;
		visibility: hidden;
	}
.Sylesti_Card_Edge_Left { transform: rotateY(-90deg) translateZ(calc((var(--Card_Width, 232px) + 4px) / 2)) translateX(calc(var(--Card_Thickness) * var(--Hand_Scale, 1) / -2)); }
.Sylesti_Card_Edge_Right { transform: rotateY(90deg) translateZ(calc((var(--Card_Width, 232px) + 4px) / 2)) translateX(calc(var(--Card_Thickness) * var(--Hand_Scale, 1) / 2)); }
.Card_Turning .Sylesti_Card_Edge { visibility: visible; }
.Sylesti_Card_Face_Front { display: flex; flex-direction: column; padding: calc(14px * var(--Card_Scale, 1)); outline: 1px solid var(--Color_Accent_Strong); outline-offset: calc(-6px * var(--Card_Scale, 1)); }
.Sylesti_Card_Frame { position: absolute; left: calc(8px * var(--Card_Scale, 1)); right: calc(8px * var(--Card_Scale, 1)); height: calc(13px * var(--Card_Scale, 1)); pointer-events: none; }
.Sylesti_Card_Frame_Top { top: calc(8px * var(--Card_Scale, 1)); }
.Sylesti_Card_Frame_Bottom { bottom: calc(8px * var(--Card_Scale, 1)); }
.Sylesti_Card_Frame::before, .Sylesti_Card_Frame::after { content: ""; position: absolute; top: 0; box-sizing: border-box; width: calc(13px * var(--Card_Scale, 1)); height: 100%; border: 2px solid var(--Color_Accent_Strong); }
.Sylesti_Card_Frame::before { left: 0; border-right: 0; }
.Sylesti_Card_Frame::after { right: 0; border-left: 0; }
.Sylesti_Card_Frame_Top::before, .Sylesti_Card_Frame_Top::after { border-bottom: 0; }
.Sylesti_Card_Frame_Bottom::before, .Sylesti_Card_Frame_Bottom::after { border-top: 0; }
.Sylesti_Card_Art { position: relative; flex: 1 1 auto; min-height: 0; border: 2px solid var(--Color_Border); border-radius: 50% 50% 6px 6px / 26% 26% 6px 6px; background: radial-gradient(ellipse at 50% 35%, var(--Color_Div_2), var(--Color_Div_3) 85%); overflow: hidden; }
.Sylesti_Card_Art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.Sylesti_Card_Ribbon { position: absolute; top: 0; left: 5%; width: 90%; box-sizing: border-box; padding: 2px; background: var(--Color_Accent_Strong); transform: translateY(calc(-50% - 1px)); clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%); }
.Sylesti_Card_Ribbon_Inner { display: block; padding: calc(3px * var(--Card_Scale, 1)) calc(14px * var(--Card_Scale, 1)) calc(5px * var(--Card_Scale, 1)); background: var(--Color_Main); text-align: center; clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%); }
.Sylesti_Card_Name { display: block; font-family: var(--Font_Header); font-size: calc(round(13px * var(--Card_Type_Scale, 1) * var(--Card_Name_Fit, 1), 1px) * var(--Card_Type_Zoom, 1)); font-weight: bold; color: var(--Color_On_Accent); line-height: calc(round(16px * var(--Card_Type_Scale, 1), 2px) * var(--Card_Type_Zoom, 1)); white-space: nowrap; }
.Sylesti_Card_Marks { position: absolute; top: calc(22px * var(--Card_Scale, 1)); left: calc(22px * var(--Card_Scale, 1)); right: calc(22px * var(--Card_Scale, 1)); height: 0; pointer-events: none; }
.Sylesti_Card_Marks::before, .Sylesti_Card_Marks::after { content: ""; position: absolute; top: 0; width: calc(8px * var(--Card_Scale, 1)); height: calc(8px * var(--Card_Scale, 1)); background: var(--Color_Accent_Strong); transform: translate(-50%, -50%) rotate(45deg); }
.Sylesti_Card_Marks::before { left: 0; }
.Sylesti_Card_Marks::after { left: 100%; }
.Sylesti_Card_Origin { position: relative; display: flex; flex-direction: column; flex: 0 0 auto; box-sizing: border-box; height: calc(64px * var(--Card_Scale, 1)); padding: calc(22px * var(--Card_Scale, 1)) calc(2px * var(--Card_Scale, 1)) calc(9px * var(--Card_Scale, 1)); }
.Sylesti_Card_Origin_Head { display: flex; align-items: center; justify-content: space-between; }
.Sylesti_Card_Origin_Set { display: flex; flex-direction: column; align-items: center; flex: none; gap: calc(1px * var(--Card_Scale, 1)); margin-left: calc(8px * var(--Card_Scale, 1)); }
.Sylesti_Card_Badge { width: calc(22px * var(--Card_Scale, 1)); height: calc(22px * var(--Card_Scale, 1)); object-fit: contain; }
.Sylesti_Card_Year { font-family: var(--Font_Header); font-size: calc(round(8px * var(--Card_Type_Scale, 1), 1px) * var(--Card_Type_Zoom, 1)); line-height: calc(round(10px * var(--Card_Type_Scale, 1), 1px) * var(--Card_Type_Zoom, 1)); letter-spacing: 0.11em; color: var(--Color_Accent_Strong); }
.Sylesti_Card_Origin_Text { display: flex; flex-direction: column; gap: calc(2px * var(--Card_Scale, 1)); flex: 1 1 auto; min-width: 0; }
.Sylesti_Card_Event { font-family: var(--Font_Header); font-size: calc(round(12.5px * var(--Card_Type_Scale, 1), 1px) * var(--Card_Type_Zoom, 1)); font-weight: 600; color: var(--Color_Accent_Strong); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.Sylesti_Card_Sub_Event { font-family: var(--Font_Header); font-size: calc(round(8px * var(--Card_Type_Scale, 1), 1px) * var(--Card_Type_Zoom, 1)); line-height: calc(round(10px * var(--Card_Type_Scale, 1), 1px) * var(--Card_Type_Zoom, 1)); letter-spacing: 0.11em; text-transform: uppercase; color: var(--Color_Main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.Sylesti_Card_Figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 0 0 auto; padding: calc(5px * var(--Card_Scale, 1)) calc(4px * var(--Card_Scale, 1)) calc(6px * var(--Card_Scale, 1)); background: var(--Color_Div_2); border: 1px solid var(--Color_Border); border-radius: 4px; }
.Sylesti_Card_Figure { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.Sylesti_Card_Figure_Label { font-family: var(--Font_Header); font-size: calc(round(8px * var(--Card_Type_Scale, 1), 1px) * var(--Card_Type_Zoom, 1)); letter-spacing: 0.11em; text-transform: uppercase; color: var(--Color_Accent_Strong); white-space: nowrap; }
.Sylesti_Card_Figure_Value { display: flex; align-items: center; gap: calc(3px * var(--Card_Scale, 1)); font-size: calc(round(12px * var(--Card_Type_Scale, 1), 1px) * var(--Card_Type_Zoom, 1)); font-weight: bold; color: var(--Color_Main); font-variant-numeric: tabular-nums; white-space: nowrap; }
.Sylesti_Card_Figure_Soft { font-weight: normal; font-style: italic; color: var(--Color_Text_Soft); }
.Sylesti_Card_Coin { width: calc(11px * var(--Card_Scale, 1)); height: calc(11px * var(--Card_Scale, 1)); object-fit: contain; }
.Sylesti_Card_Discovered { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-auto-flow: column; column-gap: calc(8px * var(--Card_Scale, 1)); margin-top: calc(11px * var(--Card_Scale, 1)); padding: 0 calc(2px * var(--Card_Scale, 1)); }
.Sylesti_Card_Discovered_Label, .Sylesti_Card_Theme_ID_Label { font-family: var(--Font_Header); font-size: calc(round(8px * var(--Card_Type_Scale, 1), 1px) * var(--Card_Type_Zoom, 1)); line-height: calc(round(10px * var(--Card_Type_Scale, 1), 1px) * var(--Card_Type_Zoom, 1)); letter-spacing: 0.11em; text-transform: uppercase; color: var(--Color_Accent_Strong); white-space: nowrap; }
.Sylesti_Card_Discovered_Name, .Sylesti_Card_Theme_ID { font-size: calc(round(9.5px * var(--Card_Type_Scale, 1), 1px) * var(--Card_Type_Zoom, 1)); line-height: calc(round(12px * var(--Card_Type_Scale, 1), 1px) * var(--Card_Type_Zoom, 1)); font-weight: bold; color: var(--Color_Main); font-variant-numeric: tabular-nums; white-space: nowrap; }
.Sylesti_Card_Discovered_Name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.Sylesti_Card_Theme_ID_Label, .Sylesti_Card_Theme_ID { text-align: right; }
.Sylesti_Card_Codex_Link { --Card_Codex_Glyph: calc(round(13px * var(--Card_Type_Scale, 1), 1px) * var(--Card_Type_Zoom, 1)); display: none; position: relative; width: var(--Card_Codex_Glyph); height: 0; margin-right: calc(2px * var(--Card_Scale, 1)); vertical-align: middle; color: inherit; }
.Sylesti_Card_Codex_Link svg { position: absolute; top: 0; left: 0; width: var(--Card_Codex_Glyph); height: var(--Card_Codex_Glyph); transform: translateY(-57%); fill: currentColor; opacity: 0.5; transition: opacity 0.15s ease; }
.Card_Inspected .Sylesti_Card_Codex_Link { display: inline-block; }
@starting-style { .Card_Inspected .Sylesti_Card_Codex_Link svg { opacity: 0; } }
.Sylesti_Card_Codex_Link:hover, .Sylesti_Card_Codex_Link:focus-visible { color: inherit; }
.Sylesti_Card_Codex_Link:hover svg, .Sylesti_Card_Codex_Link:focus-visible svg { opacity: 1; }
.Sylesti_Card_Chase .Sylesti_Card_Face_Front { --Color_Div_3: var(--Card_Foil_Stock_Ground); --Color_Div_2: var(--Card_Foil_Stock_Plate); --Color_Border: var(--Card_Foil_Stock_Border); --Color_Secondary_Deep: var(--Card_Foil_Stock_Edge); --Color_Text: var(--Card_Foil_Stock_Text); --Color_Text_Soft: var(--Card_Foil_Stock_Text_Soft); --Color_Main: var(--Card_Foil_Stock_Main); --Color_Accent_Strong: var(--Card_Foil_Stock_Accent_Strong); --Color_On_Accent: var(--Card_Foil_Stock_On_Accent); --Color_Shadow: var(--Card_Foil_Stock_Shadow); color: var(--Card_Foil_Stock_Text); }
.Sylesti_Card_Chase { --Card_Foil_Light_X: calc(0.5 + var(--Card_Slot, 0) * 0.08); --Card_Foil_Light_Y: 0.64; }
.Sylesti_Card_Chase .Sylesti_Card_Foil { position: absolute; inset: 0; pointer-events: none; opacity: var(--Card_Foil_Opacity); }
.Sylesti_Card_Chase .Sylesti_Card_Face_Front::before, .Sylesti_Card_Chase .Sylesti_Card_Foil::before
	{
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background-image: radial-gradient(circle at calc(var(--Card_Foil_Light_X) * 100%) calc(var(--Card_Foil_Light_Y) * 100%), var(--Card_Foil_Light_Color) 0%, transparent 30%), linear-gradient(118deg, var(--Card_Foil_Tint_1) 0%, var(--Card_Foil_Tint_2) 22%, var(--Card_Foil_Tint_3) 40%, var(--Card_Foil_Tint_4) 56%, var(--Card_Foil_Tint_2) 68%, var(--Card_Foil_Tint_5) 82%);
		background-repeat: no-repeat;
		background-size: 100% 100%, 140% 140%;
		background-position: 0 0, calc((1 - var(--Card_Foil_Light_X)) * 100%) calc((1 - var(--Card_Foil_Light_Y)) * 100%);
	}
.Sylesti_Card_Chase :is(.Sylesti_Card_Face_Front, .Sylesti_Card_Foil)::before, .Sylesti_Card_Chase .Sylesti_Card_Foil_Glint
	{
		mask-mode: luminance;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: calc(var(--Card_Foil_Sheet_Width) * var(--Card_Scale, 1)) calc(var(--Card_Foil_Sheet_Height) * var(--Card_Scale, 1));
		mask-size: calc(var(--Card_Foil_Sheet_Width) * var(--Card_Scale, 1)) calc(var(--Card_Foil_Sheet_Height) * var(--Card_Scale, 1));
		-webkit-mask-position: calc(-1 * var(--Card_Foil_Seed, 0) * var(--Card_Foil_Cut_Step_X) * var(--Card_Scale, 1)) calc(-1 * var(--Card_Foil_Seed, 0) * var(--Card_Foil_Cut_Step_Y) * var(--Card_Scale, 1));
		mask-position: calc(-1 * var(--Card_Foil_Seed, 0) * var(--Card_Foil_Cut_Step_X) * var(--Card_Scale, 1)) calc(-1 * var(--Card_Foil_Seed, 0) * var(--Card_Foil_Cut_Step_Y) * var(--Card_Scale, 1));
	}
.Sylesti_Card_Chase .Sylesti_Card_Face_Front::before { -webkit-mask-image: url('/assets/images/home/Card_Foil_Bands.webp'); mask-image: url('/assets/images/home/Card_Foil_Bands.webp'); }
.Sylesti_Card_Chase .Sylesti_Card_Foil::before, .Sylesti_Card_Chase .Sylesti_Card_Foil_Glint { -webkit-mask-image: url('/assets/images/home/Card_Foil_Cracks.webp'); mask-image: url('/assets/images/home/Card_Foil_Cracks.webp'); }
.Sylesti_Card_Chase .Sylesti_Card_Foil::before { opacity: var(--Card_Foil_Crack_Base); }
.Sylesti_Card_Chase .Sylesti_Card_Foil_Glint { position: absolute; inset: 0; opacity: 0.01; background-repeat: no-repeat; animation: Card_Foil_Glint var(--Card_Foil_Glint_Cycle) ease-in-out infinite; }
.Sylesti_Card_Chase .Sylesti_Card_Foil_Glint:nth-child(1) { background-image: radial-gradient(ellipse 34% 26% at 22% 26%, var(--Card_Foil_Glint_Color) 0%, var(--Card_Foil_Tint_2) 40%, transparent 100%); animation-delay: calc(-1 * var(--Card_Foil_Seed, 0) * var(--Card_Foil_Glint_Stagger)); }
.Sylesti_Card_Chase .Sylesti_Card_Foil_Glint:nth-child(2) { background-image: radial-gradient(ellipse 30% 32% at 80% 30%, var(--Card_Foil_Glint_Color) 0%, var(--Card_Foil_Tint_2) 40%, transparent 100%); animation-delay: calc(-1 * var(--Card_Foil_Seed, 0) * var(--Card_Foil_Glint_Stagger) - var(--Card_Foil_Glint_Cycle) / 4); }
.Sylesti_Card_Chase .Sylesti_Card_Foil_Glint:nth-child(3) { background-image: radial-gradient(ellipse 36% 24% at 72% 70%, var(--Card_Foil_Glint_Color) 0%, var(--Card_Foil_Tint_2) 40%, transparent 100%); animation-delay: calc(-1 * var(--Card_Foil_Seed, 0) * var(--Card_Foil_Glint_Stagger) - var(--Card_Foil_Glint_Cycle) / 2); }
.Sylesti_Card_Chase .Sylesti_Card_Foil_Glint:nth-child(4) { background-image: radial-gradient(ellipse 30% 30% at 26% 64%, var(--Card_Foil_Glint_Color) 0%, var(--Card_Foil_Tint_2) 40%, transparent 100%); animation-delay: calc(-1 * var(--Card_Foil_Seed, 0) * var(--Card_Foil_Glint_Stagger) - var(--Card_Foil_Glint_Cycle) * 3 / 4); }
@keyframes Card_Foil_Glint { 0%, 50%, 100% { opacity: 0.01; } 25% { opacity: 1; } }
.Card_Hand:has(.Card_Face_Down, .Card_Turning) { perspective: var(--Card_Turn_Perspective); }
.Card_Hand_Moving .Sylesti_Card_Foil_Glint { animation-play-state: paused; }
@supports not (mask-mode: luminance) { .Sylesti_Card_Chase .Sylesti_Card_Foil, .Sylesti_Card_Chase .Sylesti_Card_Face_Front::before { display: none; } }
.Sylesti_Card_Chase .Sylesti_Card_Figures { position: relative; }
.Sylesti_Card_Chase :is(.Sylesti_Card_Origin_Text, .Sylesti_Card_Year) { text-shadow: 0 0 calc(2px * var(--Card_Scale, 1)) var(--Card_Foil_Stock_Ground), 0 0 calc(3px * var(--Card_Scale, 1)) var(--Card_Foil_Stock_Ground), 0 0 calc(5px * var(--Card_Scale, 1)) var(--Card_Foil_Stock_Ground); }
.Sylesti_Card_Chase .Sylesti_Card_Ribbon_Inner { background: linear-gradient(115deg, hsl(from var(--Card_Foil_Tint_2) h s l / 0) 8%, hsl(from var(--Card_Foil_Tint_2) h s l / 0.24) 30%, hsl(from var(--Card_Foil_Tint_4) h s l / 0.24) 50%, hsl(from var(--Card_Foil_Tint_5) h s l / 0.2) 70%, hsl(from var(--Card_Foil_Tint_5) h s l / 0) 92%), linear-gradient(180deg, var(--Card_Plate_Top), var(--Card_Plate_Bottom)); }
.Sylesti_Card_Chase .Sylesti_Card_Name { text-shadow: 0 0 calc(2px * var(--Card_Scale, 1)) var(--Card_Plate_Bottom), 0 calc(1px * var(--Card_Scale, 1)) calc(2px * var(--Card_Scale, 1)) hsl(0 0% 0% / 0.85); }
.Sylesti_Card_Chase .Sylesti_Card_Origin { --Card_Plate_Height: calc(round(16px * var(--Card_Type_Scale, 1), 2px) * var(--Card_Type_Zoom, 1) + 8px * var(--Card_Scale, 1) + 4px); --Card_Plate_Glow_Gap: calc(var(--Card_Plate_Glow_Reach) * var(--Card_Scale, 1)); }
.Sylesti_Card_Chase .Sylesti_Card_Origin::before
	{
		content: "";
		position: absolute;
		left: calc(5% - var(--Card_Plate_Glow_Gap));
		width: calc(90% + 2 * var(--Card_Plate_Glow_Gap));
		top: calc(var(--Card_Plate_Height) / -2 - 1px - var(--Card_Plate_Glow_Gap));
		height: calc(var(--Card_Plate_Height) + 2 * var(--Card_Plate_Glow_Gap));
		background: var(--Card_Plate_Glow_Color);
		opacity: var(--Card_Plate_Glow_Opacity);
		-webkit-mask: url('/assets/images/home/Card_Plate_Glow.svg') 0 0 / 100% 100% no-repeat;
		mask: url('/assets/images/home/Card_Plate_Glow.svg') 0 0 / 100% 100% no-repeat;
		pointer-events: none;
	}
.Sylesti_Card_Chase .Sylesti_Card_Origin_Head { position: relative; }
.Sylesti_Card_Face_Front::after { content: ""; position: absolute; inset: 0; background: transparent; pointer-events: none; transition: background 0.26s ease; }
.Card_Fanned .Sylesti_Card_Face_Front::after { background: hsl(from var(--Color_Shadow) h s l / 0.08); }
.Card_Fanned:focus-visible .Sylesti_Card_Face_Front::after { background: transparent; }
.Card_Fanned:focus-visible { transform: translate(-50%, -50%) translateY(-14px); }
.Sylesti_Card:focus-visible .Sylesti_Card_Face_Front { --Card_Face_Edge: var(--Color_Main); }
.Card_Deal, .Sylesti_Card_Face_Back { --Card_Back_Ground: hsl(from var(--Color_Main) h s calc(l * 0.22)); --Card_Back_Gilt: var(--Card_Gilt); --Card_Back_Paint: radial-gradient(circle at 50% 44%, hsl(from var(--Color_Main) h s calc(l * 0.55)) 0%, var(--Card_Back_Ground) 70%); --Card_Back_Line: hsl(from var(--Color_Main) h s 62% / 0.48); --Card_Back_Node: hsl(from var(--Card_Back_Gilt) h s l / 0.9); border: 2px solid var(--Card_Back_Gilt); border-radius: 7px; overflow: hidden; background: var(--Card_Back_Paint); }
.Sylesti_Card_Face_Back { border-color: transparent; background: var(--Card_Back_Paint) padding-box, linear-gradient(var(--Card_Back_Gilt), var(--Card_Back_Gilt)) border-box; }
.Card_Deal { transform-style: flat; overflow: visible; }
.Card_Deal .Sylesti_Card_Back_Inner { overflow: hidden; border-radius: 5px; }
.Sylesti_Card_Back_Inner { position: absolute; inset: 0; box-shadow: inset 0 0 0 calc(5px * var(--Card_Scale, 1)) var(--Card_Back_Ground), inset 0 0 0 calc(6px * var(--Card_Scale, 1)) var(--Card_Back_Gilt); }
.Sylesti_Card_Back_Inner::before, .Sylesti_Card_Back_Inner::after { content: ""; position: absolute; z-index: -1; inset: calc(13px * var(--Card_Scale, 1)); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; }
.Sylesti_Card_Back_Inner::before { -webkit-mask-image: url('/assets/images/home/Card_Back_Pattern_Brackets_Double_Lit.svg'); mask-image: url('/assets/images/home/Card_Back_Pattern_Brackets_Double_Lit.svg'); background: radial-gradient(ellipse farthest-corner at 50% 50%, hsl(from var(--Card_Back_Line) h s l / calc(alpha * 0.35)) 18%, var(--Card_Back_Line) 72%); }
.Sylesti_Card_Back_Inner::after { -webkit-mask-image: url('/assets/images/home/Card_Back_Pattern_Brackets_Double_Lit_Nodes.svg'); mask-image: url('/assets/images/home/Card_Back_Pattern_Brackets_Double_Lit_Nodes.svg'); background: var(--Card_Back_Node); }
.Sylesti_Card_Back_Roundel { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 53%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, hsl(from var(--Color_Main) h s calc(l * 0.4)), var(--Card_Back_Ground)); box-shadow: 0 0 0 2px var(--Card_Back_Gilt), 0 0 0 5px var(--Card_Back_Ground), 0 0 0 6px hsl(from var(--Card_Back_Gilt) h s l / 0.5), 0 6px 18px hsl(from var(--Color_Shadow) h s l / 0.7); }
.Sylesti_Card_Back_Emblem { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; }
.Sylesti_Card_Back_Word { position: absolute; left: 50%; white-space: nowrap; font-size: round(17px * var(--Card_Scale, 1), 1px); letter-spacing: 0.24em; text-transform: uppercase; }
.Sylesti_Card_Back_Word_Top { top: 24%; translate: -50% -50%; }
.Sylesti_Card_Back_Word_Bottom { bottom: 24%; translate: -50% 50%; font-size: round(16px * var(--Card_Scale, 1), 1px); }
.Sylesti_Card_Back_Word_Text { position: relative; display: inline-block; margin-right: -0.24em; background: var(--Card_Back_Word_Gilt); -webkit-background-clip: text; background-clip: text; color: transparent; }
.Sylesti_Card_Back_Word_Text::before { content: attr(data-text); position: absolute; left: 0; top: 0; z-index: -1; color: hsl(from var(--Color_Shadow) h s l / 0.85); text-shadow: 0 1px 3px hsl(from var(--Color_Shadow) h s l / 0.9); -webkit-text-stroke: calc(1px * var(--Card_Scale, 1)) hsl(from var(--Color_Shadow) h s l / 0.85); }
.Card_Deal::before, .Card_Deal::after
	{
		content: "";
		position: absolute;
		z-index: 1;
		top: calc(23px * var(--Card_Scale, 1) - 2px);
		right: calc(-25px * var(--Card_Scale, 1) - 2px);
		width: calc(80px * var(--Card_Scale, 1));
		height: calc(42px * var(--Card_Scale, 1));
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}
.Card_Deal::before { -webkit-mask-image: url('/assets/images/home/Card_Draw_Arrow_Keyline.svg'); mask-image: url('/assets/images/home/Card_Draw_Arrow_Keyline.svg'); background-color: hsl(from var(--Color_Shadow) h s l / 0.9); }
.Card_Deal::after { -webkit-mask-image: url('/assets/images/home/Card_Draw_Arrow.svg'); mask-image: url('/assets/images/home/Card_Draw_Arrow.svg'); background-color: var(--Card_Deal_Arrow); transition: background-color 0.2s ease, opacity 0.2s ease; pointer-events: auto; }
.Card_Deal_Under::before, .Card_Deal_Under::after { opacity: 0; }
.Card_Reshuffle { transform-style: flat; pointer-events: none; transition: transform 0.26s ease, opacity 0.3s ease; }
@starting-style { .Card_Reshuffle { opacity: 0; } }
.Card_Reshuffle::before, .Card_Reshuffle::after
	{
		content: "";
		position: absolute;
		z-index: 1;
		top: calc(4px * var(--Card_Scale, 1) - 2px);
		right: calc(-80px * var(--Card_Scale, 1) - 2px);
		width: calc(80px * var(--Card_Scale, 1));
		height: calc(64px * var(--Card_Scale, 1));
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
.Card_Reshuffle::before { -webkit-mask-image: url('/assets/images/home/Card_Reshuffle_Arrow_Keyline.svg'); mask-image: url('/assets/images/home/Card_Reshuffle_Arrow_Keyline.svg'); background-color: hsl(from var(--Color_Shadow) h s l / 0.9); }
.Card_Reshuffle::after { -webkit-mask-image: url('/assets/images/home/Card_Reshuffle_Arrow.svg'); mask-image: url('/assets/images/home/Card_Reshuffle_Arrow.svg'); background-color: var(--Card_Deal_Arrow); transition: background-color 0.2s ease; pointer-events: auto; }
.Card_Reshuffle:focus-visible { outline: none; }
.Card_Reshuffle:focus-visible::after { background-color: hsl(from var(--Card_Deal_Arrow) h calc(s + 28) calc(l + 3)); }
.Card_Fanned[data-hand-last]:focus-visible ~ .Card_Reshuffle { transform: translate(-50%, -50%) translateY(-14px); }
.Card_Hand_Moving .Card_Reshuffle { opacity: 0; transition-duration: 0s; }
@media (hover: hover)
	{
		.Sylesti_Card:hover .Sylesti_Card_Face_Front { --Card_Face_Edge: var(--Color_Main); }
		.Card_Fanned:hover .Sylesti_Card_Face_Front::after { background: transparent; }
		.Card_Fanned:hover { transform: translate(-50%, -50%) translateY(-14px); }
		.Card_Deal:hover::after { background-color: hsl(from var(--Card_Deal_Arrow) h calc(s + 28) calc(l + 3)); }
		.Card_Fanned[data-hand-last]:hover ~ .Card_Reshuffle { transform: translate(-50%, -50%) translateY(-14px); }
		.Card_Reshuffle:hover::after { background-color: hsl(from var(--Card_Deal_Arrow) h calc(s + 28) calc(l + 3)); }
	}
@media (prefers-reduced-motion: reduce)
	{
		.Sylesti_Card, .Sylesti_Card_Face { transition: none; }
		.Sylesti_Card_Chase .Sylesti_Card_Foil::before { opacity: 1; }
		.Sylesti_Card_Chase .Sylesti_Card_Foil_Glint { display: none; }
	}

/* ----- PAGE CONTENT ----- */
.Home_Page { --Board_Title_Ink: #352815; }
.Home_Page .Card_Hand { top: calc(19px - 164px * (var(--Hand_Scale, 1) - 1)); }

/* ----- THE SHOWCASE SURFACE ----- */
.Home_Showcase
	{
		position: relative;
		isolation: isolate;
		box-sizing: border-box;
		--Showcase_Side_Overhang: 30px;
		margin-inline: calc(-1 * var(--Showcase_Side_Overhang));
		padding: 54px 40px 12px;
		aspect-ratio: 2236 / 954;
	}
.Home_Showcase_Art
	{
		position: absolute;
		inset: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		pointer-events: none;
		filter: drop-shadow(0 6px 16px hsl(from var(--Color_Shadow) h s l / 0.45));
	}
.Home_Showcase .Home_Showcase_Head { margin-bottom: 12px; font-size: calc(34px + var(--Font_Header_Offset)); text-align: center; color: var(--Board_Title_Ink); }
.Home_Showcase .Home_Showcase_Caption { position: absolute; left: 0; right: 0; bottom: 7px; margin: 0; font-family: var(--Font_Body); font-size: 12px; font-style: italic; line-height: 1.2; text-align: center; color: var(--Color_Text_Mid); }
.Home_Page .Card_Hand .Sylesti_Card_Face, .Home_Page .Card_Hand .Card_Deal { box-shadow: 0 3px 9px hsl(from var(--Color_Shadow) h s l / 0.55); }
.Home_Page .Card_Hand .Card_Deal_Under { box-shadow: none; }
.Home_Page .Card_Hand .Card_Front .Sylesti_Card_Face_Front { box-shadow: 0 8px 20px hsl(from var(--Color_Shadow) h s l / 0.6); }
.Home_Page .Card_Hand .Card_Inspected .Sylesti_Card_Face_Front { box-shadow: 0 16px 40px hsl(from var(--Color_Shadow) h s l / 0.65); }
.Home_Page .Card_Hand .Card_Face_Down, .Home_Page .Card_Hand .Card_Turning { border-radius: 7px; box-shadow: 0 3px 9px 2px hsl(from var(--Color_Shadow) h s l / 0.55); }
.Home_Page .Card_Hand .Card_Face_Down .Sylesti_Card_Face, .Home_Page .Card_Hand .Card_Turning .Sylesti_Card_Face { box-shadow: none; }

/* ----- THE HEADER BOARDS ----- */
.Home_Page .Home_Header_Board
	{
		position: relative;
		isolation: isolate;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		--Header_Board_Width: 1178px;
		align-self: stretch;
		margin-inline: calc((100% - var(--Header_Board_Width)) / 2);
		padding-top: calc(var(--Header_Board_Width) * 0.01733);
		aspect-ratio: 2276 / 241;
	}
.Home_Page .Home_Header_Board:has(+ #Div_Home_About) { margin-block: -14px 14px; }
.Home_Page .Home_Header_Board_Art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 6px 16px hsl(from var(--Color_Shadow) h s l / 0.45)); }
.Home_Page .Home_Header_Board_Title { font-size: calc(34px + var(--Font_Header_Offset)); line-height: 1cap; color: var(--Board_Title_Ink); }

/* ----- THE INTRODUCTION BOX ----- */
.Home_Page .Home_About_Feature { max-width: 470px; }
.Home_Page .Home_About_Feature > :first-child { flex: none; }

/* ----- NEWS ----- */
.Home_Page .Home_News_Row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; align-items: center; margin-block: 10px; }
.Home_Page .Home_News_Row > * { grid-row: 1; grid-column: 2; }
.Home_Page .Home_News_Arrow { width: 30px; height: calc(100% / 3); margin: 0; border-radius: 0; color: var(--Color_Accent_Strong); }
.Home_Page .Home_News_Arrow svg { width: 100%; height: 100%; }
.Home_Page .Home_News_Arrow:hover { color: var(--Color_Main); background: none; }
.Home_Page .Home_News_Arrow.Off { color: var(--Color_Text_Soft); }
.Home_Page .Home_News_Arrow_Previous { grid-column: 1; justify-self: start; }
.Home_Page .Home_News_Arrow_Next { grid-column: 3; justify-self: end; }

.Home_Page .Home_News_Card { display: flex; flex-direction: column; cursor: pointer; }

.Home_Page .Home_News_Rail { overflow-x: auto; overflow-y: hidden; contain: inline-size; scroll-snap-type: x proximity; scrollbar-width: none; }
.Home_Page .Home_News_Rail::-webkit-scrollbar { display: none; }
.Home_Page .Home_News_Track { display: flex; align-items: stretch; }
.Home_Page .Home_News_Track > .Home_News_Card { box-sizing: border-box; flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; }

.Home_Page .Home_News_Card_Empty { cursor: default; }
.Home_Page .Home_News_Card:hover { border-color: var(--Color_Secondary_Deep); }
.Home_Page .Home_News_Card_Empty:hover { border-color: var(--Color_Border); }
.Home_Page .Home_News_Reader { min-height: 220px; }

/* ----- THE LEAF CORNERS: ON ANY Div_3 THAT HOLDS THEM ----- */
.Home_Page .Div_3:has(> .Home_Leaf_Corners) { position: relative; isolation: isolate; }
.Home_Leaf_Corners { position: absolute; inset: 0; z-index: 1; pointer-events: none; --Leaf_Corner_Scale: 1; }
.Home_Leaf_Corner { position: absolute; height: auto; }
.Home_Leaf_Corner_Top_Left, .Home_Leaf_Corner_Top_Right { top: 0; width: round(calc(13.81% * var(--Leaf_Corner_Scale)), 1px); }
.Home_Leaf_Corner_Bottom_Left, .Home_Leaf_Corner_Bottom_Right { bottom: 0; width: round(calc(13.48% * var(--Leaf_Corner_Scale)), 1px); }
.Home_Leaf_Corner_Top_Left { left: 0; transform: translate(round(calc(-19.18% - 2px), 1px), round(calc(-18.72% - 2px), 1px)); }
.Home_Leaf_Corner_Top_Right { right: 0; transform: translate(round(calc(19.18% + 2px), 1px), round(calc(-18.72% - 2px), 1px)) scaleX(-1); }
.Home_Leaf_Corner_Bottom_Left { left: 0; transform: translate(round(calc(-14.13% - 2px), 1px), round(calc(20.59% + 2px), 1px)); }
.Home_Leaf_Corner_Bottom_Right { right: 0; transform: translate(round(calc(14.13% + 2px), 1px), round(calc(20.59% + 2px), 1px)) scaleX(-1); }