/* Free spins on Spin the Wheel (main/freespin.php), in twelve languages: the language picker, how it works, where to spin,
   four cards at a glance, numbered steps as cards with their pictures beside them (under them on a phone), the notes, play
   fair, the questions, the rewards, and the FREE SPINS sign with the way to Syphon Vault. Theme tokens only
   (freya.css). -------- */

.fy-fs { display: grid; gap: clamp(2.75rem, 2rem + 2.5vw, 4.5rem); }
/* No part may widen the page: a long word or button in another language wraps inside its part instead */
.fy-fs > * { min-width: 0; }
.fy-fs-sign__text { min-width: 0; max-width: 100%; }
@media (max-width: 519.98px) {
	.fy-fs .fy-btn { white-space: normal; padding-top: .55rem; padding-bottom: .55rem; }
}

/* The language picker (the gemstonero.com lander's menu, in the theme's look): above the guide, on the right */
.fy-fs-langbar { display: flex; justify-content: flex-end; margin: 0 0 clamp(1rem, .8rem + 1vw, 1.75rem); }
.fy-fs-lang { position: relative; }
.fy-fs-lang > summary { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--grad-card), var(--surface); box-shadow: var(--shadow-sm), var(--inner-hi); color: var(--text); font: 600 .92rem/1.2 var(--font-display); cursor: pointer; list-style: none; white-space: nowrap; -webkit-user-select: none; user-select: none; }
.fy-fs-lang > summary::-webkit-details-marker { display: none; }
.fy-fs-lang > summary:hover, .fy-fs-lang[open] > summary { border-color: var(--line-3); }
.fy-fs-lang__label { color: var(--text-3); }
.fy-fs-lang__caret { width: 10px; height: 6px; fill: currentColor; transition: transform var(--t-fast) var(--ease); }
.fy-fs-lang[open] .fy-fs-lang__caret { transform: rotate(180deg); }
.fy-fs-lang__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 248px; max-width: calc(100vw - 32px); max-height: min(70vh, 520px); overflow: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); box-shadow: var(--shadow-lg); }
.fy-fs-lang__menu > li + li { margin-top: 0; }
.fy-fs-lang__menu a { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: var(--r-sm); color: var(--text-2); font: 500 1rem/1.25 var(--font-body); text-decoration: none; }
.fy-fs-lang__menu a:hover, .fy-fs-lang__menu a:focus-visible { background: rgba(167, 126, 255, .16); color: var(--text); }
.fy-fs-lang__menu a:focus-visible { outline-offset: -2px; }
.fy-fs-lang__menu a[aria-current] { color: var(--gold-300); }
.fy-fs-lang__menu a[aria-current]::after { content: ""; margin-left: auto; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold-300); box-shadow: 0 0 6px rgba(255, 196, 63, .6); }
.fy-fs-flag { width: 24px; height: 16px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.fy-fs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (max-width: 519.98px) {
	.fy-fs-lang__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* How it works: four numbered steps, the wheel beside them from 1000 px (under them before) */
.fy-fs-how__body { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 1000px) {
	.fy-fs-how__body { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
}
.fy-fs-how__steps { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; counter-reset: fy-fs-how; }
.fy-fs-how__steps > li + li { margin-top: 0; }
.fy-fs-how__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; --card-pad: clamp(1rem, .85rem + .8vw, 1.4rem); counter-increment: fy-fs-how; }
.fy-fs-how__step .fy-fs-glance__icon { margin: 0; }
.fy-fs-how__text { min-width: 0; }
.fy-page .fy-fs-how__text h3 { display: flex; align-items: center; gap: .6rem; margin: .15rem 0 .35rem; font: 600 1.15rem/1.3 var(--font-display); color: var(--text); }
.fy-fs-how__text h3::before { content: counter(fy-fs-how); display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--grad-gold); box-shadow: var(--glow-gold); color: #3a2304; font: 700 .85rem/1 var(--font-display); }
.fy-fs-how__text p { margin: 0; color: var(--text-2); line-height: 1.6; }
.fy-fs-how__text b { color: var(--text); }
.fy-fs-how__shot { width: 100%; max-width: 640px; justify-self: center; }

/* Where to spin: Syphon Vault (the best way, in the crest's gold) and Syphon Chat in the browser, side by side from 900 px */
.fy-fs-where__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) {
	.fy-fs-where__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
}
.fy-fs-where__card { display: flex; flex-direction: column; gap: .75rem; min-width: 0; --card-pad: clamp(1.2rem, .9rem + 1.2vw, 2rem); }
.fy-fs-where__card--best { border-color: rgba(255, 214, 109, .5); box-shadow: var(--shadow-md), var(--glow-gold), var(--inner-hi); }
.fy-fs-where__card p.fy-fs-where__badge { position: absolute; top: -13px; right: 18px; z-index: 1; display: inline-flex; align-items: center; gap: .35rem; height: 26px; margin: 0; padding: 0 .75rem; border-radius: var(--r-pill); background: var(--grad-gold); box-shadow: var(--glow-gold); color: #3a2304; font: 700 .75rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.fy-fs-where__badge .fy-i { width: 13px; height: 13px; }
.fy-fs-where__head { display: flex; align-items: center; gap: .75rem; }
.fy-fs-where__head .fy-fs-glance__icon { margin: 0; }
.fy-page .fy-fs-where__card h3 { margin: 0; font: 600 1.28rem/1.25 var(--font-display); color: var(--text); }
.fy-fs-where__card p { margin: 0; color: var(--text-2); line-height: 1.65; }
.fy-fs-where__card p.fy-fs-where__action { margin-top: .25rem; }
.fy-fs-where__card .fy-fs-shot { margin-top: auto; padding-top: .5rem; }

/* At a glance */
.fy-fs-glance__list { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.fy-fs-glance__list > li + li { margin-top: 0; }
@media (min-width: 760px) {
	.fy-fs-glance__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
	.fy-fs-glance__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.fy-fs-glance__item { display: flex; flex-direction: column; gap: .5rem; --card-pad: clamp(1.15rem, .9rem + 1vw, 1.6rem); }
.fy-fs-glance__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: .2rem; border-radius: 14px; background: rgba(167, 126, 255, .16); color: var(--violet-300); }
.fy-fs-glance__icon--gold { background: rgba(255, 196, 63, .14); color: var(--gold-300); }
.fy-fs-glance__icon--pink { background: rgba(255, 128, 191, .14); color: #ffa8d5; }
.fy-fs-glance__icon .fy-i { width: 22px; height: 22px; }
.fy-page .fy-fs-glance__item h3 { margin: 0; font: 600 1.15rem/1.3 var(--font-display); color: var(--text); }
.fy-fs-glance__item p { margin: 0; color: var(--text-2); line-height: 1.6; }
.fy-fs-glance__link { color: inherit; text-decoration: none; }
.fy-fs-glance__link:hover, .fy-fs-glance__link:focus-visible { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; }
/* the invite milestones' line at a glance (#milestones): in the crest's gold */
.fy-fs-glance__link--gold { color: var(--gold-300); font-weight: 600; }
.fy-fs-glance__mail { display: flex; align-items: flex-start; gap: .6rem; margin: var(--sp-5) 0 0; color: var(--text-2); }
.fy-fs-glance__mail .fy-i { flex: none; margin-top: .3em; color: var(--gold-300); }
@media (min-width: 760px) {
	.fy-fs-glance__mail { align-items: center; justify-content: center; }
	.fy-fs-glance__mail .fy-i { margin-top: 0; }
}

/* The command, as it is typed */
.fy-fs-cmd, .fy-fs .fs-cmd { display: inline-block; padding: .05em .45em; border-radius: var(--r-xs); background: rgba(167, 126, 255, .16); color: var(--violet-200); font: 600 .92em/1.4 var(--font-mono); white-space: nowrap; }

/* Section heads */
.fy-fs-part > .fy-section-head { max-width: 760px; margin-bottom: var(--sp-6); }
.fy-page .fy-fs-part > .fy-section-head h2 { margin: 0 0 var(--sp-2); font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem); }
.fy-fs-part > .fy-section-head .fy-lede { margin: 0; }

/* The steps: numbered cards; a picture beside its words from 1000 px */
.fy-fs-steps { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; counter-reset: fy-fs-step; }
.fy-fs-steps > li + li { margin-top: 0; }
.fy-fs-step {
	--fs-pad: clamp(1.15rem, .9rem + 1.1vw, 1.85rem);
	position: relative;
	display: grid;
	gap: var(--sp-5);
	padding: var(--fs-pad) var(--fs-pad) var(--fs-pad) calc(var(--fs-pad) + 52px);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--grad-card), var(--surface);
	box-shadow: var(--shadow-md), var(--inner-hi);
	counter-increment: fy-fs-step;
}
.fy-fs-step::before {
	content: counter(fy-fs-step);
	position: absolute;
	left: var(--fs-pad);
	top: calc(var(--fs-pad) - 2px);
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--grad-gold);
	box-shadow: var(--glow-gold);
	color: #3a2304;
	font: 700 1.1rem/1 var(--font-display);
}
.fy-fs-step__text { min-width: 0; }
.fy-page .fy-fs-step__text h3 { margin: .2rem 0 .5rem; font: 600 1.28rem/1.25 var(--font-display); color: var(--text); }
.fy-fs-step__text p { margin: 0 0 .6em; color: var(--text-2); line-height: 1.65; }
.fy-fs-step__text p:last-child { margin-bottom: 0; }
.fy-fs-step__action { margin-top: var(--sp-4) !important; }
@media (min-width: 1000px) {
	.fy-fs-step:not(.fy-fs-step--text) { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: start; gap: var(--sp-6) clamp(1.5rem, 1rem + 2vw, 2.75rem); }
}
@media (max-width: 519.98px) {
	.fy-fs-step { padding-left: var(--fs-pad); padding-top: calc(var(--fs-pad) + 48px); }
}

/* Pictures */
.fy-fs-shot { min-width: 0; margin: 0; }
.fy-fs-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--night-900); box-shadow: var(--shadow-md); }
.fy-fs-shot figcaption { margin-top: .6rem; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.5; text-align: center; }
/* a picture opens its largest file in a new tab, as the home page's Syphon Vault pictures do */
.fy-fs-shot__zoom { display: block; border-radius: var(--r-md); cursor: zoom-in; }
.fy-fs-shot__zoom:focus-visible { outline-offset: 3px; }
.fy-fs-shot--narrow { width: 100%; max-width: 400px; justify-self: center; }
.fy-fs-shot--room { width: 100%; max-width: 300px; justify-self: center; }
/* the wheel's whole page: under its step's words and picture, the step's full width */
.fy-fs-shot--wide { grid-column: 1 / -1; }

/* The welcome spin (#welcome): its two ways in side by side from 900 px, a step's two pictures one under the other, the
   checklist with its ticks, and the one-time line in the crest's gold */
.fy-fs-routes { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-4); }
@media (min-width: 900px) {
	.fy-fs-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fy-fs-route { display: flex; flex-direction: column; gap: .6rem; min-width: 0; --card-pad: clamp(1.15rem, .9rem + 1.1vw, 1.85rem); }
.fy-page .fy-fs-route h3 { margin: 0; font: 600 1.28rem/1.25 var(--font-display); color: var(--text); }
.fy-fs-route p { margin: 0; color: var(--text-2); line-height: 1.65; }
.fy-fs-route b { color: var(--text); }
.fy-fs-route .fy-fs-shot { margin-top: auto; padding-top: .5rem; }
.fy-fs-route p.fy-fs-route__path { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; color: var(--violet-200); font: 600 .9rem/1.4 var(--font-display); letter-spacing: .02em; }
.fy-fs-route__path .fy-i { color: var(--gold-300); }
.fy-fs-route__sep { color: var(--text-3); }
.fy-fs-shots { display: grid; gap: var(--sp-4); min-width: 0; align-content: start; }
.fy-fs-checklist { margin: .2em 0 .6em; padding: 0; list-style: none; color: var(--text-2); line-height: 1.65; }
.fy-fs-checklist li { position: relative; padding-left: 30px; }
.fy-fs-checklist li + li { margin-top: .5em; }
.fy-fs-checklist li::before { content: "\2713"; position: absolute; left: 0; top: .2em; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg, #5be39b, #2fbf72); color: #fff; font: 700 12px/1 var(--font-display); }
.fy-fs-checklist b { color: var(--text); }
.fy-fs-step__text p.fy-fs-once { display: flex; gap: .6rem; align-items: flex-start; margin: .2em 0 .8em; padding: .75rem .9rem; border: 1px solid rgba(255, 214, 109, .4); border-radius: var(--r-md); background: rgba(255, 196, 63, .08); color: var(--text); font-weight: 600; }
.fy-fs-once .fy-i { flex: none; margin-top: .3em; color: var(--gold-300); }
@media (forced-colors: active) {
	.fy-fs-checklist li::before { forced-color-adjust: none; }
}

/* The notes */
.fy-fs-note { margin-top: var(--sp-5); padding: clamp(1.15rem, .9rem + 1vw, 1.6rem); border: 1px solid rgba(167, 126, 255, .3); border-radius: var(--r-lg); background: rgba(140, 87, 248, .08); }
.fy-fs-note--rules { border-color: rgba(255, 214, 109, .3); background: rgba(255, 196, 63, .06); }
.fy-page .fy-fs-note h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; font: 600 1.15rem/1.3 var(--font-display); color: var(--text); }
.fy-fs-note h3 .fy-i { color: var(--violet-300); }
.fy-fs-note--rules h3 .fy-i { color: var(--gold-300); }
.fy-fs-note ul { margin: 0; padding-left: 1.4em; list-style: none; color: var(--text-2); line-height: 1.65; }
.fy-fs-note li { position: relative; }
.fy-fs-note li + li { margin-top: .45em; }
.fy-fs-note li::before {
	content: "";
	position: absolute;
	left: -1.1em;
	top: .55em;
	width: .55em;
	height: .55em;
	background: var(--violet-300);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.fy-fs-note--rules li::before { background: var(--gold-300); }

/* Play fair: the owner's word, in the theme's rose, hard to miss */
.fy-fs-fair { display: grid; gap: var(--sp-4); padding: clamp(1.4rem, 1rem + 2vw, 2.5rem); border: 1px solid rgba(255, 128, 152, .55); border-radius: var(--r-lg); background: radial-gradient(70% 100% at 0 0, rgba(240, 74, 105, .2), rgba(240, 74, 105, 0) 70%), var(--grad-card), var(--surface); box-shadow: var(--shadow-md), 0 20px 44px -26px rgba(240, 74, 105, .6), var(--inner-hi); }
@media (min-width: 760px) {
	.fy-fs-fair { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); align-items: start; }
}
.fy-fs-fair__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: rgba(240, 74, 105, .16); color: var(--rose-300); }
.fy-fs-fair__icon .fy-i { width: 28px; height: 28px; }
.fy-fs-fair__body { min-width: 0; }
.fy-page .fy-fs-fair h2 { margin: 0 0 .6rem; font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem); }
.fy-fs-fair__lead { margin: 0; color: var(--text); font-size: 1.1rem; font-weight: 600; line-height: 1.55; }
.fy-fs-fair__list { display: grid; gap: .6rem; margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.fy-fs-fair__list > li + li { margin-top: 0; }
.fy-fs-fair__list li { position: relative; padding-left: 1.6em; color: var(--text-2); line-height: 1.6; }
.fy-fs-fair__list li::before { content: ""; position: absolute; left: .2em; top: .45em; width: .65em; height: .65em; background: var(--rose-300); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* The questions: each opens on its own (<details>) */
.fy-fs-faq__list { display: grid; gap: .65rem; }
.fy-fs-faq__item { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--grad-card), var(--surface); box-shadow: var(--shadow-sm), var(--inner-hi); }
.fy-fs-faq__item > summary { display: flex; align-items: center; gap: .9rem; min-height: 52px; padding: .9rem clamp(1rem, .85rem + .8vw, 1.4rem); cursor: pointer; list-style: none; color: var(--text); font: 600 1.08rem/1.35 var(--font-display); }
.fy-fs-faq__item > summary::-webkit-details-marker { display: none; }
.fy-fs-faq__item > summary .fy-i { flex: none; margin-left: auto; color: var(--violet-300); transition: transform var(--t-fast) var(--ease); }
.fy-fs-faq__item[open] > summary .fy-i { transform: rotate(180deg); }
.fy-fs-faq__a { padding: 0 clamp(1rem, .85rem + .8vw, 1.4rem) 1.1rem; color: var(--text-2); line-height: 1.65; }
.fy-fs-faq__a p { margin: 0; }
.fy-fs-faq__a b { color: var(--text); }

/* The FREE SPINS sign and the way to Syphon Vault */
.fy-fs-sign { display: grid; justify-items: center; gap: var(--sp-5); text-align: center; --card-pad: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.fy-fs-sign__art { width: 170px; max-width: 46vw; }
.fy-fs-sign__art img { border: 0; box-shadow: none; background: none; }
.fy-page .fy-fs-sign__text h2 { margin: 0 0 .5rem; font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem); }
.fy-fs-sign__text p { margin: 0 auto; max-width: 56ch; color: var(--text-2); }
.fy-fs-sign__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: var(--sp-5) !important; }
@media (min-width: 760px) {
	.fy-fs-sign { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); text-align: left; }
	.fy-fs-sign__text p { margin: 0; }
	.fy-fs-sign__actions { justify-content: flex-start; }
}
@media (max-width: 519.98px) {
	.fy-fs-sign__actions .fy-btn { width: 100%; }
}
@media (forced-colors: active) {
	.fy-fs-step::before, .fy-fs-note li::before { forced-color-adjust: none; }
}

/* Possible rewards (main/freespin_rewards.php and img/freespin/rewards/, made from the wheel's pools by
   make_rewards_section.py): each tier under the wheel's word for it and in its colour, the rarest first, as the wheel's own
   list; a card per reward with its picture, its name, and its amount in the corner as on the wheel's own cards. The
   legendary rewards are the large gold cards in the theme's storybook frame. A picture shows at 80px (56px on a phone), on
   a large card at 112px (80px): the script's PIC_SIZES says the same, change both together. */
.fy-fs-rewards__tier { --fs-tier: var(--text-3); --fs-glow: transparent; }
.fy-fs-rewards__tier + .fy-fs-rewards__tier { margin-top: var(--sp-8); }
.fy-fs-rewards__tier--legendary { --fs-tier: var(--gold-300); --fs-glow: rgba(255, 196, 63, .42); }
.fy-fs-rewards__tier--epic { --fs-tier: var(--violet-300); --fs-glow: rgba(167, 126, 255, .42); }
.fy-fs-rewards__tier--rare { --fs-tier: var(--sky-400); --fs-glow: rgba(109, 176, 255, .38); }
.fy-fs-rewards__tier--uncommon { --fs-tier: var(--mint-400); }
.fy-page .fy-fs-rewards__head {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin: 0 0 var(--sp-4);
	color: color-mix(in srgb, var(--fs-tier) 85%, #fff);
	font: 700 .84rem/1.2 var(--font-display);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.fy-fs-rewards__head::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--fs-tier) 50%, transparent), transparent); }
.fy-fs-rewards__gem {
	flex: none;
	width: .75rem;
	height: .75rem;
	background: var(--fs-tier);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	filter: drop-shadow(0 0 6px var(--fs-glow));
}
.fy-fs-rewards__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.fy-fs-reward {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	min-width: 0;
	margin: 0;
	padding: 1.15rem .6rem .9rem;
	border: 1px solid color-mix(in srgb, var(--fs-tier) 26%, var(--line));
	border-radius: var(--r-md);
	background: linear-gradient(180deg, color-mix(in srgb, var(--fs-tier) 11%, transparent), transparent 58%), var(--grad-card), var(--surface);
	box-shadow: var(--shadow-md), var(--inner-hi);
	text-align: center;
}
.fy-fs-reward::before { content: ""; position: absolute; top: -1px; left: 26%; right: 26%; height: 3px; border-radius: 0 0 3px 3px; background: var(--fs-tier); box-shadow: 0 0 10px var(--fs-glow); }
.fy-fs-reward__pic { display: grid; place-items: center; flex: none; width: 80px; height: 80px; }
.fy-fs-reward__pic img { display: block; width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 0 8px var(--fs-glow)); }
.fy-fs-reward__pic--none { border: 1px dashed color-mix(in srgb, var(--fs-tier) 45%, transparent); border-radius: var(--r-sm); background: var(--surface-sunken); color: color-mix(in srgb, var(--fs-tier) 70%, var(--text-4)); }
.fy-fs-reward__pic--none .fy-i { width: 30px; height: 30px; }
.fy-fs-reward__name { max-width: 100%; color: var(--text); font: 600 .9rem/1.3 var(--font-display); overflow-wrap: break-word; }
.fy-fs-reward__qty {
	position: absolute;
	top: .55rem;
	right: .5rem;
	padding: .1rem .45rem;
	border-color: color-mix(in srgb, var(--fs-tier) 42%, transparent);
	background: color-mix(in srgb, var(--fs-tier) 12%, var(--night-900));
	color: color-mix(in srgb, var(--fs-tier) 70%, #fff);
	font-size: .7rem;
}
/* the large gold cards, in the theme's storybook frame (as .fy-card--framed) */
.fy-fs-rewards__list--top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
@media (min-width: 1000px) {
	.fy-fs-rewards__list--top { grid-template-columns: repeat(3, minmax(0, 300px)); }
}
.fy-fs-rewards__list--top .fy-fs-reward {
	gap: .75rem;
	padding: 1.6rem .75rem 1.25rem;
	border-color: rgba(255, 214, 109, .42);
	border-radius: var(--r-lg);
	background: radial-gradient(90% 70% at 50% 36%, rgba(255, 196, 63, .2), rgba(255, 196, 63, 0) 70%), var(--grad-card), var(--surface);
	box-shadow: var(--shadow-md), var(--glow-gold), var(--inner-hi);
}
.fy-fs-rewards__list--top .fy-fs-reward::after {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid rgba(255, 214, 109, .16);
	border-radius: calc(var(--r-lg) - 5px);
	pointer-events: none;
}
.fy-fs-rewards__list--top .fy-fs-reward::before { left: 20%; right: 20%; height: 4px; }
.fy-fs-rewards__list--top .fy-fs-reward__pic, .fy-fs-rewards__list--top .fy-fs-reward__pic img { width: 112px; height: 112px; }
.fy-fs-rewards__list--top .fy-fs-reward__name { font-size: 1.12rem; background: var(--grad-text-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fy-fs-rewards__list--top .fy-fs-reward__qty { top: .8rem; right: .8rem; }
@media (max-width: 519.98px) {
	.fy-fs-rewards__list { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .6rem; }
	.fy-fs-reward { gap: .4rem; padding: .9rem .4rem .7rem; }
	.fy-fs-reward__pic, .fy-fs-reward__pic img { width: 56px; height: 56px; }
	.fy-fs-reward__name { font-size: .78rem; }
	.fy-fs-reward__qty { top: .35rem; right: .3rem; padding: .05rem .35rem; font-size: .64rem; }
	.fy-fs-rewards__list--top { gap: .6rem; }
	.fy-fs-rewards__list--top .fy-fs-reward { gap: .5rem; padding: 1.4rem .4rem .85rem; }
	.fy-fs-rewards__list--top .fy-fs-reward__pic, .fy-fs-rewards__list--top .fy-fs-reward__pic img { width: 80px; height: 80px; }
	.fy-fs-rewards__list--top .fy-fs-reward__name { font-size: .88rem; }
	.fy-fs-rewards__list--top .fy-fs-reward__qty { top: .45rem; right: .45rem; }
}
@media (forced-colors: active) {
	.fy-fs-rewards__gem, .fy-fs-reward::before { forced-color-adjust: none; }
}