/* Permanent dark theme, full-height shell, restrained decorative code. */
html:has(body.fantasy-store){min-height:100%;background:#050f18;color-scheme:dark}
body.fantasy-store{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:#050f18;color-scheme:dark}
body.fantasy-store>.site-header{flex-shrink:0}
body.fantasy-store>main{flex:1 0 auto}
body.fantasy-store>.fs-layout{align-items:start}
body.fantasy-store>.site-footer{flex-shrink:0;margin-top:auto;width:100%;background:#06121c;box-shadow:0 -8px 35px #02091244;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.fantasy-store .site-footer__inner{justify-content:space-between;min-height:35px;gap:24px}
.fantasy-store .fs-footer-copy{margin-left:auto;max-width:none;text-align:right}
.fantasy-store .fs-footer-social{display:flex;margin-left:auto}
.fantasy-store::before{background:linear-gradient(90deg,#04101922,#04101966 16%,#04101999 50%,#04101966 84%,#04101922),url('../images/fantasy/essence-clean-bg.webp') center top/cover no-repeat;opacity:.7}
.fs-hero{border-color:#31566b;box-shadow:inset 0 0 50px #01091033,0 8px 30px #0003;isolation:isolate}
.fs-hero::before{background:linear-gradient(90deg,#030e1ade,#0516247a 47%,#07192518 80%);z-index:1}
.fs-hero::after{height:1px;background:linear-gradient(90deg,#46728822,#5dafca,#46728822);box-shadow:0 0 10px #41a3c144;z-index:3;animation:fs-hero-edge 4.8s ease-in-out infinite}
.fs-panel{background:linear-gradient(135deg,#0a1c28f2,#06121cef);border-color:#274453;box-shadow:inset 0 1px 0 #d2e8f704,0 5px 22px #0002}
.fs-category{padding-left:11px;position:relative;border-radius:3px;transition:background .2s,border-color .2s}
.fs-category.is-active{background:linear-gradient(100deg,#0c4778,#102c43);box-shadow:inset 2px 0 #5dc9ed,inset 0 0 12px #326fa515}
.fs-category-copy{padding:1px 0}.fs-category-copy small{color:#9bb4c6}
.fs-category-count{border-color:#365367;background:#0b2133}
.fs-card{border-color:#2c4c60;background:linear-gradient(140deg,#0e2331,#07131e)}
.fs-card:hover{border-color:#70b7cc;box-shadow:0 9px 26px #0005,0 0 14px #55aac515}
.fs-studio-link{border-color:#315061;background:linear-gradient(115deg,#102939,#071620)}
.fs-studio-link--utx{background:linear-gradient(115deg,#172639,#071620)}
.fs-studio-link::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#91dbff09 47%,transparent 65%);transform:translateX(-110%);pointer-events:none}
.fs-studio-link:hover::after{transform:translateX(110%);transition:transform .8s}
.fs-code-atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;mask-image:linear-gradient(90deg,#000,transparent 19%,transparent 81%,#000)}
.fs-code-glyph{position:absolute;font:400 14px 'JetBrains Mono',monospace;letter-spacing:1px;color:#79cde5;opacity:0;text-shadow:0 0 12px #14a9eb;will-change:transform,opacity;animation:fs-code-drift 18s linear infinite}
.fs-code-glyph:nth-child(1){left:3%;top:84%;animation-delay:-3s}.fs-code-glyph:nth-child(2){left:9%;top:67%;animation-delay:-12s}.fs-code-glyph:nth-child(3){left:5%;top:40%;animation-delay:-8s}.fs-code-glyph:nth-child(4){left:12%;top:96%;animation-delay:-1s}.fs-code-glyph:nth-child(5){right:3%;top:90%;animation-delay:-10s}.fs-code-glyph:nth-child(6){right:10%;top:65%;animation-delay:-5s}.fs-code-glyph:nth-child(7){right:6%;top:43%;animation-delay:-15s}.fs-code-glyph:nth-child(8){right:13%;top:98%;animation-delay:-6s}
@keyframes fs-code-drift{0%{transform:translate3d(0,30px,0);opacity:0}18%,65%{opacity:.17}100%{transform:translate3d(12px,-170px,0);opacity:0}}
.fs-code-strip{position:absolute;bottom:14px;left:30px;z-index:2;display:flex;align-items:center;gap:8px;max-width:calc(100% - 190px);overflow:visible;white-space:nowrap;opacity:.7;pointer-events:none;color:#8cbccc;font:9px/1.4 'JetBrains Mono',monospace;letter-spacing:.2px;padding:3px 0}
.fs-code-strip .fs-code-prompt{color:#50c5ec;flex:none}
.fs-code-strip code{display:inline-block;overflow:hidden;white-space:nowrap;width:auto;max-width:0;vertical-align:bottom;animation:fs-code-type 4s steps(52,end) forwards}
.fs-code-strip code b{font-weight:400;color:#bbb2ec}
.fs-code-strip code i{font-style:normal;color:#7ebead}
.fs-code-caret{height:11px;width:4px;background:#5bc1db;animation:fs-caret .8s step-end infinite;opacity:0;flex:none;margin-left:2px}
@keyframes fs-code-type{from{max-width:0}to{max-width:360px}}
@keyframes fs-caret{50%{opacity:1}}

/* Hero ambient layers */
.fs-hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.fs-hero-fx__glow,.fs-hero-fx__stars,.fs-hero-fx__mist,.fs-hero-fx__embers{position:absolute;inset:0}
.fs-hero-fx__glow{
  background:
    radial-gradient(ellipse 42% 48% at 78% 18%,rgba(210,235,255,.22),transparent 70%),
    radial-gradient(ellipse 28% 34% at 92% 12%,rgba(255,248,220,.16),transparent 68%),
    radial-gradient(ellipse 55% 40% at 70% 70%,rgba(20,110,180,.12),transparent 75%);
  animation:fs-hero-moon 9s ease-in-out infinite;
}
.fs-hero-fx__stars{
  opacity:.55;
  background-image:
    radial-gradient(circle at 62% 14%,#fff 0 1px,transparent 2px),
    radial-gradient(circle at 71% 8%,#c9ecff 0 1.2px,transparent 2.4px),
    radial-gradient(circle at 84% 22%,#fff 0 .8px,transparent 1.8px),
    radial-gradient(circle at 91% 11%,#9ad8ff 0 1px,transparent 2px),
    radial-gradient(circle at 76% 28%,#fff 0 .7px,transparent 1.6px),
    radial-gradient(circle at 68% 34%,#dff6ff 0 1px,transparent 2px),
    radial-gradient(circle at 88% 36%,#fff 0 .9px,transparent 2px),
    radial-gradient(circle at 95% 26%,#b7e7ff 0 1.1px,transparent 2.2px);
  animation:fs-hero-twinkle 5.5s ease-in-out infinite;
}
.fs-hero-fx__mist{
  opacity:.35;
  background:
    linear-gradient(100deg,transparent 35%,rgba(120,190,230,.08) 52%,transparent 68%),
    radial-gradient(ellipse 60% 28% at 75% 88%,rgba(70,150,210,.18),transparent 70%);
  background-size:220% 100%,100% 100%;
  animation:fs-hero-mist 18s linear infinite;
  mix-blend-mode:screen;
}
.fs-hero-fx__embers{
  opacity:.4;
  background-image:
    radial-gradient(circle,rgba(120,210,255,.9) 0 1px,transparent 2px),
    radial-gradient(circle,rgba(255,255,255,.7) 0 1px,transparent 2px),
    radial-gradient(circle,rgba(70,180,255,.75) 0 1.2px,transparent 2.4px);
  background-size:180px 180px,260px 220px,320px 280px;
  background-position:70% 40%,85% 55%,78% 70%;
  animation:fs-hero-embers 22s linear infinite;
  mix-blend-mode:screen;
  mask-image:linear-gradient(90deg,transparent 38%,#000 58%);
}
.fs-hero-copy,.fs-code-strip,.fs-game-mark,.fs-hero-signature{position:relative;z-index:2}
.fs-game-mark,.fs-hero-signature{position:absolute}
@keyframes fs-hero-moon{0%,100%{opacity:.85;filter:brightness(.95)}50%{opacity:1;filter:brightness(1.18)}}
@keyframes fs-hero-twinkle{0%,100%{opacity:.35}40%{opacity:.7}70%{opacity:.45}}
@keyframes fs-hero-mist{0%{background-position:0 0,0 0}100%{background-position:120% 0,0 0}}
@keyframes fs-hero-embers{0%{background-position:70% 55%,88% 70%,76% 80%;opacity:.25}50%{opacity:.55}100%{background-position:74% 28%,82% 40%,90% 48%;opacity:.3}}
@keyframes fs-hero-edge{0%,100%{opacity:.55;box-shadow:0 0 8px #41a3c133}50%{opacity:1;box-shadow:0 0 16px #5ec8ff66}}
.fs-motion-paused .fs-hero-fx__glow,
.fs-motion-paused .fs-hero-fx__stars,
.fs-motion-paused .fs-hero-fx__mist,
.fs-motion-paused .fs-hero-fx__embers,
.fs-page-hidden .fs-hero-fx__glow,
.fs-page-hidden .fs-hero-fx__stars,
.fs-page-hidden .fs-hero-fx__mist,
.fs-page-hidden .fs-hero-fx__embers{animation-play-state:paused!important}
.fs-motion-toggle{width:100%;margin-top:10px;padding:9px 8px;border:1px solid #29475b;border-radius:5px;background:#0b2131;color:#bad6e6;cursor:pointer;font-size:11px;text-align:left}
.fs-motion-toggle:hover{border-color:#5fa8c4;color:#fff}
.fs-motion-paused .fs-code-glyph,.fs-motion-paused .fs-code-strip code,.fs-motion-paused .fs-code-caret,.fs-motion-paused .fs-hero::after,.fs-page-hidden .fs-code-glyph,.fs-page-hidden .fs-code-strip code,.fs-page-hidden .fs-code-caret,.fs-page-hidden .fs-hero::after{animation-play-state:paused!important}
.fs-motion-paused .fs-code-strip code{animation:none;max-width:360px}.fs-motion-paused .fs-code-caret{animation:none;opacity:0}
.fs-motion-paused .fs-studio-link:hover::after{transition:none;transform:translateX(-110%)}
@media(min-width:1600px){.fs-code-strip{left:30px}}
@media(max-width:1159px){.fs-code-strip{left:25px;bottom:12px}}
@media(max-width:900px){.fs-code-atmosphere{display:none}.fantasy-store .fs-footer-social{display:flex;margin-left:0}.fantasy-store .fs-footer-copy{margin-left:0;text-align:left}}
@media(max-width:620px){.fs-code-strip{display:none}.fs-hero-fx{opacity:.65}.fantasy-store .site-footer__inner{gap:16px}.fantasy-store .fs-footer-copy{width:100%}}
@media(prefers-reduced-motion:reduce){.fs-code-atmosphere{display:none}.fs-code-strip code{animation:none;max-width:360px}.fs-code-caret{display:none}.fs-studio-link::after{display:none}.fs-hero-fx__glow,.fs-hero-fx__stars,.fs-hero-fx__mist,.fs-hero-fx__embers,.fs-hero::after{animation:none!important}}


/* Account and language header panel */
.fantasy-store .header-menu__panel{min-width:278px;padding:10px;background:linear-gradient(145deg,#081927f7,#06111cf5);border-color:#2a536c}
.fs-account-card{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;padding:8px 8px 10px;margin-bottom:6px;border-bottom:1px solid #18364a}
.fs-account-avatar{width:42px;height:42px;display:grid;place-items:center;border:1px solid #23618a;border-radius:7px;background:linear-gradient(145deg,#0d2c45,#071823);color:#32bdff;box-shadow:inset 0 0 16px #009dff24}
.fs-account-avatar svg{width:24px;height:24px}
.fs-account-card strong{display:block;font-size:13px;line-height:1.2;color:#f4f8ff}
.fs-account-card span{display:block;margin-top:3px;font-size:11px;line-height:1.35;color:#9fbed6}
.header-menu__link.fs-account-disabled{opacity:.58;cursor:not-allowed;color:#91aabc}
.header-menu__link--split{border-radius:5px;background:#0c2131;border:1px solid #203f55;margin:5px 0 8px}
.fs-lang-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:0 0 2px;padding:0;list-style:none}
.fs-lang-grid .lang-switcher__opt{padding:7px 0;text-align:center;border:1px solid #1c3b51;border-radius:5px;background:#071925}
.fs-lang-grid .lang-switcher__opt.is-selected{border-color:#1baeff;background:#0d3a61;color:#fff;box-shadow:0 0 10px #00a6ff22}

/* Account, motion and footer polish */
.fantasy-store {
  --fs-bg-x: 0px;
  --fs-bg-y: 0px;
}

.fantasy-store::before {
  transform: translate3d(var(--fs-bg-x), var(--fs-bg-y), 0) scale(1.045);
  transform-origin: 50% 20%;
  will-change: transform, filter;
}

.fantasy-store::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .34;
  background:
    radial-gradient(circle at 12% 18%, rgba(140, 216, 255, .7) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, .42) 0 1px, transparent 2px),
    radial-gradient(circle at 41% 70%, rgba(32, 169, 255, .45) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 79%, rgba(255, 255, 255, .34) 0 1px, transparent 2px),
    linear-gradient(115deg, transparent 0 34%, rgba(94, 190, 255, .08) 45%, transparent 57% 100%);
  background-size: 360px 360px, 520px 520px, 430px 430px, 620px 620px, 180% 180%;
  animation: fs-particle-drift 38s linear infinite, fs-light-sweep 16s ease-in-out infinite;
  mix-blend-mode: screen;
}

.fantasy-store .fs-code-atmosphere {
  perspective: 1000px;
}

.fantasy-store .fs-code-atmosphere::before {
  content: "";
  position: fixed;
  inset: 11vh 0 auto 0;
  height: 42vh;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(40, 176, 255, .18), transparent),
    repeating-linear-gradient(90deg, transparent 0 76px, rgba(56, 192, 255, .09) 77px 78px, transparent 79px 148px);
  opacity: .13;
  transform: rotateX(62deg) translateY(4vh);
  filter: blur(.2px);
  animation: fs-grid-depth 14s ease-in-out infinite;
}

.fantasy-store .btn-header-menu {
  border-radius: 50%;
  width: 37px;
  height: 37px;
  padding: 0;
  background: radial-gradient(circle at 50% 22%, rgba(97, 202, 255, .28), rgba(4, 24, 38, .96) 70%);
}

.fantasy-store .btn-header-menu:hover,
.fantasy-store .btn-header-menu[aria-expanded="true"] {
  box-shadow: 0 0 0 1px rgba(101, 203, 255, .65), 0 0 22px rgba(0, 145, 255, .28);
}

.fantasy-store .fs-user-icon {
  width: 19px;
  height: 19px;
}

.fantasy-store .fs-user-icon path,
.fantasy-store .fs-account-avatar path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fantasy-store .fs-icon--discord {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.fantasy-store .fs-footer-logo .fs-brand-symbol {
  width: 26px;
  height: 26px;
}

.fantasy-store .fs-footer-logo .fs-brand-name {
  font-size: 16px;
  letter-spacing: -.55px;
}

.fantasy-store .fs-footer-logo .fs-brand-tag {
  font-size: 6px;
  letter-spacing: .85px;
}

.fantasy-store .fs-footer-social {
  display: none !important;
}

.fantasy-store .fs-free-filter {
  margin-top: 11px;
  padding: 10px 10px 9px;
  border: 1px solid rgba(35, 118, 167, .5);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(4, 23, 37, .82), rgba(3, 39, 63, .68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.fantasy-store .fs-free-filter label {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: #eef8ff;
  cursor: pointer;
}

.fantasy-store .fs-free-filter input {
  appearance: none;
  position: relative;
  width: 34px;
  height: 18px;
  margin: 0;
  border: 1px solid rgba(114, 184, 225, .44);
  border-radius: 999px;
  background: rgba(6, 22, 35, .95);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .32);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.fantasy-store .fs-free-filter input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #88bedf;
  box-shadow: 0 0 8px rgba(0, 179, 255, .35);
  transition: transform .18s ease, background .18s ease;
}

.fantasy-store .fs-free-filter input:checked {
  border-color: rgba(0, 179, 255, .95);
  background: linear-gradient(135deg, #0272d6, #02b4ff);
  box-shadow: 0 0 16px rgba(0, 166, 255, .24);
}

.fantasy-store .fs-free-filter input:checked::before {
  transform: translateX(15px);
  background: #fff;
}

.fantasy-store .fs-free-filter p {
  margin: 5px 0 0 44px;
  color: #89adca;
  font-size: 10px;
  line-height: 1.35;
}

.fantasy-store .fs-license-panel {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(0, 174, 255, .25);
  border-radius: 8px;
  background: rgba(0, 18, 32, .62);
  color: #9fbfda;
  font-size: 11px;
  line-height: 1.35;
}

.fantasy-store .fs-license-panel strong {
  color: #f3fbff;
  font-size: 12px;
}

.fantasy-store .fs-account-primary {
  border-color: rgba(0, 168, 255, .55);
  background: linear-gradient(135deg, rgba(0, 118, 255, .3), rgba(0, 197, 255, .15));
  color: #effbff;
}

.fantasy-store .fs-help-welcome {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(1, 10, 18, .58);
  backdrop-filter: blur(3px);
  animation: fs-help-fade .28s ease both;
}

.fantasy-store .fs-help-popover {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 1;
  display: block;
  width: min(360px, calc(100vw - 36px));
  border: 1px solid #23465c;
  border-radius: 10px;
  background: linear-gradient(120deg, #102738, #07131d);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5), 0 0 40px rgba(0, 145, 255, .18);
  overflow: hidden;
  animation: fs-help-rise .45s cubic-bezier(.2, .8, .2, 1) both;
}

.fantasy-store .fs-help-popover__link {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 148px;
  padding: 20px 44px 20px 118px;
  text-decoration: none;
  color: #d8edff;
}

.fantasy-store .fs-help-popover__link img {
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 118px;
  height: 168px;
  object-fit: cover;
  object-position: center;
  mask-image: linear-gradient(90deg, #000 65%, transparent);
  z-index: -1;
  align-self: auto;
}

.fantasy-store .fs-help-popover__link strong {
  display: block;
  margin: 0 0 7px;
  color: #d7edff;
  font-size: 15px;
}

.fantasy-store .fs-help-popover__link p {
  margin: 0 0 10px;
  color: #abc3d9;
  font-size: 12px;
  line-height: 1.5;
}

.fantasy-store .fs-help-popover__link > span > span,
.fantasy-store .fs-help-popover__cta {
  display: block;
  color: #32baff;
  font-size: 11px;
  font-weight: 600;
}

.fantasy-store .fs-help-popover__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  margin: 0;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(124, 199, 239, .35);
  border-radius: 50%;
  background: rgba(2, 18, 30, .78);
  color: #dff5ff;
  cursor: pointer;
}

.fantasy-store .fs-help-popover__close:hover {
  border-color: #3c87ad;
}

.fantasy-store .fs-help-popover:has(.fs-help-popover__link:hover) {
  border-color: #3c87ad;
}

@keyframes fs-particle-drift {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 50%; }
  100% { background-position: 360px -360px, -520px 520px, 430px -430px, -620px 620px, 100% 50%; }
}

@keyframes fs-light-sweep {
  0%, 100% { filter: brightness(.95); }
  50% { filter: brightness(1.18); }
}

@keyframes fs-grid-depth {
  0%, 100% { transform: rotateX(62deg) translateY(4vh) translateZ(0); opacity: .08; }
  50% { transform: rotateX(66deg) translateY(0) translateZ(28px); opacity: .18; }
}

@keyframes fs-help-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fs-help-rise {
  from { transform: translateY(28px) scale(.94); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .fantasy-store::before {
    animation: fs-bg-depth 22s ease-in-out infinite;
  }
}

@keyframes fs-bg-depth {
  0%, 100% { filter: brightness(.92) saturate(1.06); }
  50% { filter: brightness(1.03) saturate(1.18); }
}

.fantasy-store.fs-motion-paused::before,
.fantasy-store.fs-motion-paused::after,
.fantasy-store.fs-motion-paused .fs-code-atmosphere::before {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .fantasy-store::before,
  .fantasy-store::after,
  .fantasy-store .fs-code-atmosphere::before,
  .fantasy-store .fs-help-welcome,
  .fantasy-store .fs-help-popover {
    animation: none !important;
  }
}

@media (max-width: 720px) {
  .fantasy-store .fs-help-popover__link {
    min-height: 132px;
    padding: 18px 40px 18px 102px;
  }

  .fantasy-store .fs-help-popover__link img {
    width: 100px;
    height: 146px;
  }
}