/* 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. The site's own components and
   tokens only (css/loki.css, css/DESIGN.md); gold stays for the rewards. Loaded by main/head_styles.php for this page. */

.lk-fs { display: grid; gap: clamp(44px, 32px + 2.4vw, 72px); }
/* No part may widen the page: a long word or button in another language wraps inside its part instead */
.lk-fs > * { min-width: 0; }
.lk-fs .lk-btn { max-width: 100%; }
@media (max-width: 519.98px) {
  .lk-fs .lk-btn { white-space: normal; padding-top: 9px; padding-bottom: 9px; text-align: center; }
}

/* The language picker (the gemstonero.com lander's menu, in the site's look): above the guide, on the right */
.lk-fs-langbar { display: flex; justify-content: flex-end; margin: 0 0 clamp(16px, 12px + 1vw, 28px); }
.lk-fs-lang { position: relative; }
.lk-fs-lang > summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--lk-line-2); border-radius: var(--lk-radius-sm); background: rgba(21, 16, 39, .85);
  color: var(--lk-text); font: 600 14.5px/1.2 var(--lk-font); cursor: pointer; list-style: none; white-space: nowrap;
  -webkit-user-select: none; user-select: none; transition: border-color .15s;
}
.lk-fs-lang > summary::-webkit-details-marker { display: none; }
.lk-fs-lang > summary:hover, .lk-fs-lang[open] > summary { border-color: var(--lk-line-strong); }
.lk-fs-lang__label { color: var(--lk-text-3); }
.lk-fs-lang__caret { width: 10px; height: 6px; fill: currentColor; transition: transform .2s var(--lk-ease); }
.lk-fs-lang[open] .lk-fs-lang__caret { transform: rotate(180deg); }
.lk-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(--lk-line-2); border-radius: var(--lk-radius); background: var(--lk-surface-2); box-shadow: var(--lk-shadow-lg);
}
.lk-fs-lang__menu a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--lk-radius-xs);
  color: var(--lk-text-2) !important; font: 500 15px/1.25 var(--lk-font); text-decoration: none;
}
.lk-fs-lang__menu a:hover, .lk-fs-lang__menu a:focus-visible { background: rgba(176, 140, 255, .12); color: #fff !important; }
.lk-fs-lang__menu a[aria-current] { color: var(--lk-purple-200) !important; }
.lk-fs-lang__menu a[aria-current]::after { content: ''; margin-left: auto; width: 7px; height: 7px; transform: rotate(45deg); background: var(--lk-purple-400); box-shadow: 0 0 8px rgba(183, 125, 255, .7); }
.lk-fs-flag { width: 24px; height: 16px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.lk-fs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (max-width: 519.98px) {
  .lk-fs-lang__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Section heads: the eyebrow, the title and the lead */
.lk-fs-head { max-width: 780px; margin: 0 0 24px; }
.lk-fs-head .lk-eyebrow { margin: 0 0 10px; }
.lk-fs-head h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
.lk-fs-lead { margin: 0; color: var(--lk-text-2); font-size: var(--lk-fs-lg); line-height: 1.6; }
.lk-fs b { color: #fff; }

/* The command, as it is typed */
.lk-fs .fs-cmd {
  display: inline-block; padding: .05em .45em; border-radius: var(--lk-radius-xs); background: rgba(161, 53, 255, .16);
  color: var(--lk-purple-200); font: 600 .92em/1.4 ui-monospace, 'Cascadia Code', Consolas, monospace; white-space: nowrap;
}

/* How it works: four numbered steps, the wheel beside them from 1000 px (under them before); without the wheel's picture
   the steps two by two */
.lk-fs-how__body { display: grid; gap: 24px; align-items: center; }
@media (min-width: 1000px) {
  .lk-fs-how__body--shot { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(24px, 16px + 2vw, 44px); }
  .lk-fs-how__body:not(.lk-fs-how__body--shot) .lk-fs-how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lk-fs-how__steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: lk-fs-how; }
.lk-fs-how__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: clamp(16px, 13px + .8vw, 22px); counter-increment: lk-fs-how; }
.lk-fs-how__text { min-width: 0; }
.lk-fs-how__text h3 { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; font-size: 1.2rem; }
.lk-fs-how__text h3::before {
  content: counter(lk-fs-how); display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px;
  background: var(--lk-grad-brand); color: #fff; font: 800 14px/1 var(--lk-font-display);
}
.lk-fs-how__text p { margin: 0; color: var(--lk-text-2); line-height: 1.6; }
.lk-fs-how__shot { width: 100%; max-width: 640px; justify-self: center; }

/* Where to spin: Syphon Vault (the best way, with the site's glow) and Syphon Chat in the browser, side by side from 900 px */
.lk-fs-where__grid { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .lk-fs-where__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
.lk-fs-where__card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: clamp(20px, 15px + 1.2vw, 30px); }
.lk-fs-where__badge {
  position: absolute; top: -13px; right: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 26px; margin: 0;
  padding: 0 12px; border-radius: var(--lk-radius-pill); background: var(--lk-grad-brand); box-shadow: 0 6px 18px rgba(124, 58, 237, .45);
  color: #fff; font: 700 12px/1 var(--lk-font); letter-spacing: .1em; text-transform: uppercase;
}
.lk-fs-where__badge i { font-size: 11px; }
.lk-fs-where__head { display: flex; align-items: center; gap: 12px; }
.lk-fs-where__card h3 { margin: 0; font-size: var(--lk-fs-xl); }
.lk-fs-where__card p { margin: 0; color: var(--lk-text-2); line-height: 1.65; }
.lk-fs-where__card p.lk-fs-where__action { margin-top: 4px; }
.lk-fs-where__card .lk-fs-shot { margin-top: auto; padding-top: 8px; }
.lk-fs-where__card a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: rgba(201, 163, 255, .5); }

/* At a glance */
.lk-fs-glance__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) {
  .lk-fs-glance__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .lk-fs-glance__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lk-fs-glance__item { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 14px + 1vw, 24px); }
.lk-fs-glance__item .lk-icon-tile { margin-bottom: 4px; }
.lk-fs-glance__item h3 { margin: 0; font-size: 1.2rem; }
.lk-fs-glance__item p { margin: 0; color: var(--lk-text-2); line-height: 1.6; }
.lk-fs-glance__link { color: inherit !important; text-decoration: none; }
.lk-fs-glance__link:hover, .lk-fs-glance__link:focus-visible { color: var(--lk-purple-200) !important; text-decoration: underline; text-underline-offset: 3px; }
/* the invite milestones' line at a glance (#milestones): a reward, in gold */
.lk-fs-glance__link--gold { color: var(--lk-gold-300) !important; font-weight: 600; }
.lk-fs-glance__link--gold:hover, .lk-fs-glance__link--gold:focus-visible { color: var(--lk-gold-300) !important; }
.lk-fs-glance__mail { display: flex; align-items: flex-start; gap: 10px; margin: 24px 0 0; color: var(--lk-text-2); }
.lk-fs-glance__mail i { flex: none; margin-top: .35em; color: var(--lk-gold-400); }
@media (min-width: 760px) {
  .lk-fs-glance__mail { align-items: center; justify-content: center; }
  .lk-fs-glance__mail i { margin-top: 0; }
}

/* The steps: numbered cards (the site's number tile, as .lk-steps); a picture beside its words from 1000 px */
.lk-fs-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: lk-fs-step; }
.lk-fs-step {
  --fs-pad: clamp(18px, 14px + 1.1vw, 28px);
  position: relative; display: grid; gap: 24px; min-width: 0;
  padding: var(--fs-pad) var(--fs-pad) var(--fs-pad) calc(var(--fs-pad) + 54px);
  border: 1px solid var(--lk-line); border-radius: var(--lk-radius-lg); background: var(--lk-grad-surface); box-shadow: var(--lk-shadow);
  counter-increment: lk-fs-step;
}
.lk-fs-step::before {
  content: counter(lk-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: 11px;
  background: var(--lk-grad-brand); box-shadow: 0 6px 18px rgba(124, 58, 237, .4), inset 0 1px 0 rgba(255, 255, 255, .22);
  color: #fff; font: 800 18px/1 var(--lk-font-display);
}
.lk-fs-step__text { min-width: 0; }
.lk-fs-step__text h3 { margin: 3px 0 8px; font-size: 1.3rem; }
.lk-fs-step__text p { margin: 0 0 .6em; color: var(--lk-text-2); line-height: 1.65; }
.lk-fs-step__text p:last-child { margin-bottom: 0; }
.lk-fs-step__text p.lk-fs-step__action { margin-top: 16px; }
@media (min-width: 1000px) {
  .lk-fs-step:not(.lk-fs-step--text) { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: start; gap: 28px clamp(24px, 16px + 2vw, 44px); }
}
@media (max-width: 519.98px) {
  .lk-fs-step { padding-left: var(--fs-pad); padding-top: calc(var(--fs-pad) + 50px); }
}

/* Pictures */
.lk-fs-shot { min-width: 0; margin: 0; }
.lk-fs-shot img {
  display: block; width: 100%; height: auto; border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--lk-radius);
  background: var(--lk-bg); box-shadow: 0 0 0 1px rgba(161, 53, 255, .14), var(--lk-shadow);
}
.lk-fs-shot figcaption { margin-top: 10px; color: var(--lk-text-3); font-size: var(--lk-fs-sm); line-height: 1.5; text-align: center; }
/* a picture opens its largest file in a new tab, where its small words are easier to read */
.lk-fs-shot__zoom { display: block; border-radius: var(--lk-radius); cursor: zoom-in; }
.lk-fs-shot--narrow { width: 100%; max-width: 400px; justify-self: center; }
.lk-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 */
.lk-fs-shot--wide { grid-column: 1 / -1; }
.lk-fs-shots { display: grid; gap: 16px; min-width: 0; align-content: start; }

/* The welcome spin (#welcome): its two ways in side by side from 900 px, the checklist with its ticks, the one-time line */
.lk-fs-routes { display: grid; gap: 16px; margin-bottom: 16px; }
@media (min-width: 900px) {
  .lk-fs-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lk-fs-route { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: clamp(18px, 14px + 1.1vw, 28px); }
.lk-fs-route h3 { margin: 0; font-size: var(--lk-fs-xl); }
.lk-fs-route p { margin: 0; color: var(--lk-text-2); line-height: 1.65; }
.lk-fs-route a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: rgba(201, 163, 255, .5); }
.lk-fs-route .lk-fs-shot { margin-top: auto; padding-top: 8px; }
.lk-fs-route p.lk-fs-route__path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--lk-purple-200); font: 600 14px/1.4 var(--lk-font); letter-spacing: .02em; }
.lk-fs-route__path i { color: var(--lk-purple-400); }
.lk-fs-route__sep { color: var(--lk-text-3); }
.lk-fs-checklist { margin: .2em 0 .6em; padding: 0; list-style: none; color: var(--lk-text-2); line-height: 1.65; }
.lk-fs-checklist li { position: relative; padding-left: 30px; }
.lk-fs-checklist li + li { margin-top: .5em; }
.lk-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(135deg, #10b981, #34d399); color: #04261a; font: 800 12px/1 var(--lk-font);
}
.lk-fs-step__text p.lk-fs-once {
  display: flex; gap: 10px; align-items: flex-start; margin: .2em 0 .8em; padding: 12px 14px;
  border: 1px solid rgba(251, 191, 36, .38); border-radius: var(--lk-radius); background: var(--lk-warning-bg); color: var(--lk-text); font-weight: 600;
}
.lk-fs-once i { flex: none; margin-top: .3em; color: var(--lk-warning); }

/* The notes: good to know (the site's info blue), the rules (its purple) */
.lk-fs-note { margin-top: 24px; padding: clamp(18px, 14px + 1vw, 24px); border: 1px solid rgba(143, 180, 255, .3); border-radius: var(--lk-radius-lg); background: var(--lk-info-bg); }
.lk-fs-note--rules { border-color: rgba(183, 125, 255, .35); background: rgba(161, 53, 255, .09); }
.lk-fs-note h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.2rem; }
.lk-fs-note h3 i { color: var(--lk-blue-400); font-size: .9em; }
.lk-fs-note--rules h3 i { color: var(--lk-purple-300); }
.lk-fs-note ul { margin: 0; padding-left: 1.4em; list-style: none; color: var(--lk-text-2); line-height: 1.65; }
.lk-fs-note li { position: relative; }
.lk-fs-note li + li { margin-top: .45em; }
.lk-fs-note li::before {
  content: ''; position: absolute; left: -1.1em; top: .55em; width: .55em; height: .55em; background: var(--lk-blue-400);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.lk-fs-note--rules li::before { background: var(--lk-purple-300); }

/* Play fair: the owner's word, in the site's danger rose, hard to miss */
.lk-fs-fair {
  display: grid; gap: 16px; padding: clamp(22px, 16px + 2vw, 40px); border: 1px solid rgba(251, 113, 133, .5); border-radius: var(--lk-radius-lg);
  background: radial-gradient(70% 100% at 0 0, rgba(251, 113, 133, .16), rgba(251, 113, 133, 0) 70%), var(--lk-grad-surface);
  box-shadow: var(--lk-shadow), 0 20px 44px -26px rgba(251, 113, 133, .55);
}
@media (min-width: 760px) {
  .lk-fs-fair { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(20px, 16px + 1.5vw, 36px); align-items: start; }
}
.lk-fs-fair__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: var(--lk-danger-bg); border: 1px solid rgba(251, 113, 133, .35); color: var(--lk-danger); font-size: 26px; }
.lk-fs-fair__body { min-width: 0; }
.lk-fs-fair h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
.lk-fs-fair__lead { margin: 0; color: var(--lk-text); font-size: 1.1rem; font-weight: 600; line-height: 1.55; }
.lk-fs-fair__list { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.lk-fs-fair__list li { position: relative; padding-left: 1.6em; color: var(--lk-text-2); line-height: 1.6; }
.lk-fs-fair__list li::before {
  content: ''; position: absolute; left: .2em; top: .45em; width: .65em; height: .65em; background: var(--lk-danger);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* The questions: the site's accordion */
.lk-fs-faq__list summary { font-family: var(--lk-font-display); font-size: 1.08rem; line-height: 1.35; }
.lk-fs-faq__list .lk-accordion__body p { margin: 0; }
.lk-fs-faq__list .lk-accordion__body a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: rgba(201, 163, 255, .5); }

/* The FREE SPINS sign and the way to Syphon Vault */
.lk-fs-sign { display: grid; justify-items: center; gap: 24px; padding: clamp(24px, 16px + 2vw, 40px); text-align: center; }
.lk-fs-sign__art { width: 170px; max-width: 46vw; }
.lk-fs-sign__art img { border: 0; box-shadow: none; background: none; }
.lk-fs-sign__text { min-width: 0; max-width: 100%; }
.lk-fs-sign__text h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
.lk-fs-gold { background: var(--lk-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.lk-fs-sign__text p { margin: 0 auto; max-width: 56ch; color: var(--lk-text-2); }
.lk-fs-sign__text p.lk-fs-sign__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: none; margin-top: 24px; }
@media (min-width: 760px) {
  .lk-fs-sign { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: clamp(24px, 16px + 2vw, 44px); text-align: left; }
  .lk-fs-sign__text p { margin: 0; }
  .lk-fs-sign__text p.lk-fs-sign__actions { justify-content: flex-start; margin-top: 24px; }
}
@media (max-width: 519.98px) {
  .lk-fs-sign__actions .lk-btn { width: 100%; }
}
@media (forced-colors: active) {
  .lk-fs-step::before, .lk-fs-note li::before, .lk-fs-fair__list li::before, .lk-fs-checklist li::before, .lk-fs-how__text h3::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 --loki): 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. 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. */
.lk-fs-rewards__tier { --fs-tier: var(--lk-text-3); --fs-glow: transparent; }
.lk-fs-rewards__tier + .lk-fs-rewards__tier { margin-top: 36px; }
.lk-fs-rewards__tier--legendary { --fs-tier: var(--lk-gold-400); --fs-glow: rgba(246, 196, 83, .42); }
.lk-fs-rewards__tier--epic { --fs-tier: var(--lk-purple-400); --fs-glow: rgba(183, 125, 255, .42); }
.lk-fs-rewards__tier--rare { --fs-tier: var(--lk-blue-400); --fs-glow: rgba(143, 180, 255, .38); }
.lk-fs-rewards__tier--uncommon { --fs-tier: var(--lk-success); }
.lk-fs-rewards__head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px !important;
  color: color-mix(in srgb, var(--fs-tier) 85%, #fff) !important; font: 700 13px/1.2 var(--lk-font) !important;
  letter-spacing: .14em; text-transform: uppercase;
}
.lk-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); }
.lk-fs-rewards__gem {
  flex: none; width: 12px; height: 12px; 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));
}
.lk-fs-rewards__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.lk-fs-reward {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; margin: 0;
  padding: 18px 10px 14px; border: 1px solid color-mix(in srgb, var(--fs-tier) 26%, rgba(176, 140, 255, .14)); border-radius: var(--lk-radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fs-tier) 11%, transparent), transparent 58%), var(--lk-grad-surface);
  box-shadow: var(--lk-shadow); text-align: center;
}
.lk-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); }
.lk-fs-reward__pic { display: grid; place-items: center; flex: none; width: 80px; height: 80px; }
.lk-fs-reward__pic img { display: block; width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 0 8px var(--fs-glow)); }
.lk-fs-reward__pic--none { border: 1px dashed color-mix(in srgb, var(--fs-tier) 45%, transparent); border-radius: var(--lk-radius-sm); background: rgba(11, 8, 23, .5); color: color-mix(in srgb, var(--fs-tier) 70%, var(--lk-text-3)); font-size: 28px; }
.lk-fs-reward__name { max-width: 100%; color: #fff; font: 700 14.5px/1.3 var(--lk-font-display); overflow-wrap: break-word; }
.lk-fs-reward__qty {
  position: absolute; top: 9px; right: 8px; padding: 1px 7px;
  border-color: color-mix(in srgb, var(--fs-tier) 42%, transparent) !important;
  background: color-mix(in srgb, var(--fs-tier) 12%, var(--lk-bg)) !important;
  color: color-mix(in srgb, var(--fs-tier) 70%, #fff) !important; font-size: 11px;
}
/* the large gold cards of the legendary rewards */
.lk-fs-rewards__list--top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 1000px) {
  .lk-fs-rewards__list--top { grid-template-columns: repeat(3, minmax(0, 300px)); }
}
.lk-fs-rewards__list--top .lk-fs-reward {
  gap: 12px; padding: 26px 12px 20px; border-color: rgba(246, 196, 83, .42); border-radius: var(--lk-radius-lg);
  background: radial-gradient(90% 70% at 50% 36%, rgba(246, 196, 83, .2), rgba(246, 196, 83, 0) 70%), var(--lk-grad-surface);
  box-shadow: var(--lk-shadow), 0 10px 32px rgba(224, 165, 38, .22);
}
.lk-fs-rewards__list--top .lk-fs-reward::after { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(246, 196, 83, .16); border-radius: calc(var(--lk-radius-lg) - 5px); pointer-events: none; }
.lk-fs-rewards__list--top .lk-fs-reward::before { left: 20%; right: 20%; height: 4px; }
.lk-fs-rewards__list--top .lk-fs-reward__pic, .lk-fs-rewards__list--top .lk-fs-reward__pic img { width: 112px; height: 112px; }
.lk-fs-rewards__list--top .lk-fs-reward__name { font-size: 1.12rem; background: var(--lk-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.lk-fs-rewards__list--top .lk-fs-reward__qty { top: 13px; right: 13px; }
@media (max-width: 519.98px) {
  .lk-fs-rewards__list { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
  .lk-fs-reward { gap: 6px; padding: 14px 6px 11px; }
  .lk-fs-reward__pic, .lk-fs-reward__pic img { width: 56px; height: 56px; }
  .lk-fs-reward__name { font-size: 12.5px; }
  .lk-fs-reward__qty { top: 5px; right: 5px; padding: 0 5px; font-size: 10px; }
  .lk-fs-rewards__list--top { gap: 10px; }
  .lk-fs-rewards__list--top .lk-fs-reward { gap: 8px; padding: 22px 6px 14px; }
  .lk-fs-rewards__list--top .lk-fs-reward__pic, .lk-fs-rewards__list--top .lk-fs-reward__pic img { width: 80px; height: 80px; }
  .lk-fs-rewards__list--top .lk-fs-reward__name { font-size: 14px; }
  .lk-fs-rewards__list--top .lk-fs-reward__qty { top: 7px; right: 7px; }
}
@media (forced-colors: active) {
  .lk-fs-rewards__gem, .lk-fs-reward::before { forced-color-adjust: none; }
}