@layer properties {
  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
    *,:before,:after,::backdrop {
      --tw-rotate-x:initial;
      --tw-rotate-y:initial;
      --tw-rotate-z:initial;
      --tw-skew-x:initial;
      --tw-skew-y:initial;
      --tw-space-y-reverse:0;
      --tw-divide-y-reverse:0;
      --tw-border-style:solid;
      --tw-gradient-position:initial;
      --tw-gradient-from:#0000;
      --tw-gradient-via:#0000;
      --tw-gradient-to:#0000;
      --tw-gradient-stops:initial;
      --tw-gradient-via-stops:initial;
      --tw-gradient-from-position:0%;
      --tw-gradient-via-position:50%;
      --tw-gradient-to-position:100%;
      --tw-leading:initial;
      --tw-font-weight:initial;
      --tw-tracking:initial;
      --tw-ordinal:initial;
      --tw-slashed-zero:initial;
      --tw-numeric-figure:initial;
      --tw-numeric-spacing:initial;
      --tw-numeric-fraction:initial;
      --tw-shadow:0 0 #0000;
      --tw-shadow-color:initial;
      --tw-shadow-alpha:100%;
      --tw-inset-shadow:0 0 #0000;
      --tw-inset-shadow-color:initial;
      --tw-inset-shadow-alpha:100%;
      --tw-ring-color:initial;
      --tw-ring-shadow:0 0 #0000;
      --tw-inset-ring-color:initial;
      --tw-inset-ring-shadow:0 0 #0000;
      --tw-ring-inset:initial;
      --tw-ring-offset-width:0px;
      --tw-ring-offset-color:#fff;
      --tw-ring-offset-shadow:0 0 #0000;
      --tw-outline-style:solid;
      --tw-blur:initial;
      --tw-brightness:initial;
      --tw-contrast:initial;
      --tw-grayscale:initial;
      --tw-hue-rotate:initial;
      --tw-invert:initial;
      --tw-opacity:initial;
      --tw-saturate:initial;
      --tw-sepia:initial;
      --tw-drop-shadow:initial;
      --tw-drop-shadow-color:initial;
      --tw-drop-shadow-alpha:100%;
      --tw-drop-shadow-size:initial;
      --tw-backdrop-blur:initial;
      --tw-backdrop-brightness:initial;
      --tw-backdrop-contrast:initial;
      --tw-backdrop-grayscale:initial;
      --tw-backdrop-hue-rotate:initial;
      --tw-backdrop-invert:initial;
      --tw-backdrop-opacity:initial;
      --tw-backdrop-saturate:initial;
      --tw-backdrop-sepia:initial;
      --tw-ease:initial
    }

  }

}
@layer theme {
  :root,:host {
    --font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-red-200:#ffcaca;
    --color-red-300:#ffa3a3;
    --color-red-400:#ff6568;
    --color-red-500:#fb2c36;
    --color-red-600:#e40014;
    --color-red-700:#bf000f;
    --color-red-800:#9f0712;
    --color-red-900:#82181a;
    --color-red-950:#460809;
    --color-amber-100:#fef3c6;
    --color-amber-200:#fee685;
    --color-amber-300:#ffd236;
    --color-amber-400:#fcbb00;
    --color-amber-500:#f99c00;
    --color-amber-700:#b75000;
    --color-amber-800:#953d00;
    --color-amber-950:#461901;
    --color-yellow-900:#733e0a;
    --color-green-200:#b9f8cf;
    --color-green-700:#008138;
    --color-green-950:#032e15;
    --color-emerald-200:#a4f4cf;
    --color-emerald-300:#5ee9b5;
    --color-emerald-400:#00d294;
    --color-emerald-500:#00bb7f;
    --color-emerald-700:#007956;
    --color-emerald-900:#004e3b;
    --color-sky-300:#77d4ff;
    --color-purple-300:#d9b3ff;
    --color-purple-400:#c07eff;
    --color-rose-300:#ffa2ae;
    --color-zinc-50:#fafafa;
    --color-zinc-100:#f4f4f5;
    --color-zinc-200:#e4e4e7;
    --color-zinc-300:#d4d4d8;
    --color-zinc-400:#9f9fa9;
    --color-zinc-500:#71717b;
    --color-zinc-600:#52525c;
    --color-zinc-950:#09090b;
    --color-neutral-700:#404040;
    --color-neutral-900:#171717;
    --color-black:#000;
    --color-white:#fff;
    --spacing:.25rem;
    --container-xs:20rem;
    --container-md:28rem;
    --container-xl:36rem;
    --container-2xl:42rem;
    --container-3xl:48rem;
    --container-4xl:56rem;
    --text-xs:.75rem;
    --text-xs--line-height:calc(1 / .75);
    --text-sm:.875rem;
    --text-sm--line-height:calc(1.25 / .875);
    --text-base:1rem;
    --text-base--line-height:calc(1.5 / 1);
    --text-lg:1.125rem;
    --text-lg--line-height:calc(1.75 / 1.125);
    --text-xl:1.25rem;
    --text-xl--line-height:calc(1.75 / 1.25);
    --text-2xl:1.5rem;
    --text-2xl--line-height:calc(2 / 1.5);
    --text-3xl:1.875rem;
    --text-3xl--line-height:calc(2.25 / 1.875);
    --text-4xl:2.25rem;
    --text-4xl--line-height:calc(2.5 / 2.25);
    --text-6xl:3.75rem;
    --text-6xl--line-height:1;
    --font-weight-medium:500;
    --font-weight-semibold:600;
    --font-weight-bold:700;
    --font-weight-black:900;
    --tracking-tight:-.025em;
    --tracking-wide:.025em;
    --tracking-wider:.05em;
    --leading-relaxed:1.625;
    --radius-lg:.5rem;
    --radius-xl:.75rem;
    --radius-2xl:1rem;
    --ease-out:cubic-bezier(0, 0, .2, 1);
    --animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-md:12px;
    --default-transition-duration:.15s;
    --default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);
    --default-font-family:var(--font-work-sans);
    --default-mono-font-family:var(--font-mono);
    --font-work-sans:Arial;
    --font-platypi:Georgia;
    --font-display:var(--font-platypi)
  }
@supports (color:lab(0% 0 0)) {
    :root,:host {
      --color-red-200:lab(86.017% 19.8815 7.75869);
      --color-red-300:lab(76.5514% 36.4219 15.5335);
      --color-red-400:lab(63.7053% 60.7449 31.3109);
      --color-red-500:lab(55.4814% 75.0732 48.8528);
      --color-red-600:lab(48.4493% 77.4328 61.5452);
      --color-red-700:lab(40.4273% 67.2623 53.7441);
      --color-red-800:lab(33.7174% 55.8993 41.0293);
      --color-red-900:lab(28.5139% 44.5539 29.0463);
      --color-red-950:lab(13.003% 29.04 16.7519);
      --color-amber-100:lab(95.916% -1.2165 23.111);
      --color-amber-200:lab(91.7203% -.505269 49.9084);
      --color-amber-300:lab(86.4156% 6.13147 78.3961);
      --color-amber-400:lab(80.1641% 16.6016 99.2089);
      --color-amber-500:lab(72.7183% 31.8672 97.9407);
      --color-amber-700:lab(47.2709% 42.9082 69.2966);
      --color-amber-800:lab(37.8823% 37.1699 52.2718);
      --color-amber-950:lab(15.8111% 20.9107 23.3752);
      --color-yellow-900:lab(32.3865% 21.1274 38.5958);
      --color-green-200:lab(92.4222% -26.4702 12.9427);
      --color-green-700:lab(47.0329% -47.0239 31.4788);
      --color-green-950:lab(15.6845% -20.4225 11.7249);
      --color-emerald-200:lab(90.2247% -31.039 9.47084);
      --color-emerald-300:lab(83.9203% -48.7124 13.8849);
      --color-emerald-400:lab(75.0771% -60.7313 19.4146);
      --color-emerald-500:lab(66.9756% -58.27 19.5419);
      --color-emerald-700:lab(44.4871% -41.0396 11.0361);
      --color-emerald-900:lab(28.8637% -26.9249 5.45986);
      --color-sky-300:lab(80.3307% -20.2945 -31.385);
      --color-purple-300:lab(78.3298% 26.2195 -34.9499);
      --color-purple-400:lab(63.6946% 47.6127 -59.2066);
      --color-rose-300:lab(76.6339% 38.3549 9.68834);
      --color-zinc-50:lab(98.26% 0 0);
      --color-zinc-100:lab(96.1634% .0993013 -.364029);
      --color-zinc-200:lab(90.6853% .399202 -1.45452);
      --color-zinc-300:lab(84.9837% .601262 -2.17985);
      --color-zinc-400:lab(65.6464% 1.53494 -5.42429);
      --color-zinc-500:lab(47.8878% 1.65477 -5.77283);
      --color-zinc-600:lab(35.1166% 1.7821 -6.1173);
      --color-zinc-950:lab(2.51107% .242703 -.886115);
      --color-neutral-700:lab(27.036% 0 0);
      --color-neutral-900:lab(7.78201% -.0000149012 0)
    }

  }

}
@layer base {
  *,:after,:before,::backdrop {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
::file-selector-button {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
html,:host {
    -webkit-text-size-adjust:100%;
    tab-size:4;
    line-height:1.5;
    font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings:var(--default-font-feature-settings,normal);
    font-variation-settings:var(--default-font-variation-settings,normal);
    -webkit-tap-highlight-color:transparent
  }
hr {
    height:0;
    color:inherit;
    border-top-width:1px
  }
abbr:where([title]) {
    -webkit-text-decoration:underline dotted;
    text-decoration:underline dotted
  }
h1,h2,h3,h4,h5,h6 {
    font-size:inherit;
    font-weight:inherit
  }
a {
    color:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    text-decoration:inherit
  }
b,strong {
    font-weight:bolder
  }
code,kbd,samp,pre {
    font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings:var(--default-mono-font-feature-settings,normal);
    font-variation-settings:var(--default-mono-font-variation-settings,normal);
    font-size:1em
  }
small {
    font-size:80%
  }
sub,sup {
    vertical-align:baseline;
    font-size:75%;
    line-height:0;
    position:relative
  }
sub {
    bottom:-.25em
  }
sup {
    top:-.5em
  }
table {
    text-indent:0;
    border-color:inherit;
    border-collapse:collapse
  }
:-moz-focusring:where(:not(iframe)) {
    outline:auto
  }
progress {
    vertical-align:baseline
  }
summary {
    display:list-item
  }
ol,ul,menu {
    list-style:none
  }
img,svg,video,canvas,audio,iframe,embed,object {
    vertical-align:middle;
    display:block
  }
img,video {
    max-width:100%;
    height:auto
  }
button,input,select,optgroup,textarea {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }
::file-selector-button {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }
:where(select:is([multiple],[size])) optgroup {
    font-weight:bolder
  }
:where(select:is([multiple],[size])) optgroup option {
    padding-inline-start:20px
  }
::file-selector-button {
    margin-inline-end:4px
  }
::placeholder {
    opacity:1
  }
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
      color:currentColor
    }
@supports (color:color-mix(in lab, red, red)) {
      ::placeholder {
        color:color-mix(in oklab, currentcolor 50%, transparent)
      }

    }

  }
textarea {
    resize:vertical
  }
::-webkit-search-decoration {
    -webkit-appearance:none
  }
::-webkit-date-and-time-value {
    min-height:1lh;
    text-align:inherit
  }
::-webkit-datetime-edit {
    display:inline-flex
  }
::-webkit-datetime-edit-fields-wrapper {
    padding:0
  }
::-webkit-datetime-edit {
    padding-block:0
  }
::-webkit-datetime-edit-year-field {
    padding-block:0
  }
::-webkit-datetime-edit-month-field {
    padding-block:0
  }
::-webkit-datetime-edit-day-field {
    padding-block:0
  }
::-webkit-datetime-edit-hour-field {
    padding-block:0
  }
::-webkit-datetime-edit-minute-field {
    padding-block:0
  }
::-webkit-datetime-edit-second-field {
    padding-block:0
  }
::-webkit-datetime-edit-millisecond-field {
    padding-block:0
  }
::-webkit-datetime-edit-meridiem-field {
    padding-block:0
  }
::-webkit-calendar-picker-indicator {
    line-height:1
  }
:-moz-ui-invalid {
    box-shadow:none
  }
button,input:where([type=button],[type=reset],[type=submit]) {
    appearance:button
  }
::file-selector-button {
    appearance:button
  }
::-webkit-inner-spin-button {
    height:auto
  }
::-webkit-outer-spin-button {
    height:auto
  }
[hidden]:where(:not([hidden=until-found])) {
    display:none!important
  }

}
@layer components;
@layer utilities {
  .pointer-events-none {
    pointer-events:none
  }
.visible {
    visibility:visible
  }
.sr-only {
    clip-path:inset(50%);
    white-space:nowrap;
    border-width:0;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    position:absolute;
    overflow:hidden
  }
.absolute {
    position:absolute
  }
.fixed {
    position:fixed
  }
.relative {
    position:relative
  }
.static {
    position:static
  }
.sticky {
    position:sticky
  }
.inset-0 {
    inset:0
  }
.inset-y-0 {
    inset-block:0
  }
.top-4 {
    top:calc(var(--spacing) * 4)
  }
.top-\[calc\(var\(--locale-bar-height\)\+var\(--header-height\)\+14px\)\] {
    top:calc(var(--locale-bar-height) + var(--header-height) + 14px)
  }
.right-4 {
    right:calc(var(--spacing) * 4)
  }
.-left-\[9999px\] {
    left:-9999px
  }
.left-0 {
    left:0
  }
.z-10 {
    z-index:10
  }
.z-20 {
    z-index:20
  }
.z-\[100\] {
    z-index:100
  }
.z-\[110\] {
    z-index:110
  }
.z-\[200\] {
    z-index:200
  }
.z-\[1300\] {
    z-index:1300
  }
.z-\[10050\] {
    z-index:10050
  }
.z-\[10060\] {
    z-index:10060
  }
.container {
    width:100%
  }
@media (min-width:40rem) {
    .container {
      max-width:40rem
    }

  }
@media (min-width:48rem) {
    .container {
      max-width:48rem
    }

  }
@media (min-width:64rem) {
    .container {
      max-width:64rem
    }

  }
@media (min-width:80rem) {
    .container {
      max-width:80rem
    }

  }
@media (min-width:96rem) {
    .container {
      max-width:96rem
    }

  }
.mx-auto {
    margin-inline:auto
  }
.my-4 {
    margin-block:calc(var(--spacing) * 4)
  }
.-mt-12 {
    margin-top:calc(var(--spacing) * -12)
  }
.mt-1 {
    margin-top:var(--spacing)
  }
.mt-2 {
    margin-top:calc(var(--spacing) * 2)
  }
.mt-3 {
    margin-top:calc(var(--spacing) * 3)
  }
.mt-4 {
    margin-top:calc(var(--spacing) * 4)
  }
.mt-5 {
    margin-top:calc(var(--spacing) * 5)
  }
.mt-6 {
    margin-top:calc(var(--spacing) * 6)
  }
.mt-8 {
    margin-top:calc(var(--spacing) * 8)
  }
.mb-2 {
    margin-bottom:calc(var(--spacing) * 2)
  }
.mb-3 {
    margin-bottom:calc(var(--spacing) * 3)
  }
.mb-4 {
    margin-bottom:calc(var(--spacing) * 4)
  }
.mb-5 {
    margin-bottom:calc(var(--spacing) * 5)
  }
.mb-6 {
    margin-bottom:calc(var(--spacing) * 6)
  }
.mb-8 {
    margin-bottom:calc(var(--spacing) * 8)
  }
.ml-4 {
    margin-left:calc(var(--spacing) * 4)
  }
.ml-auto {
    margin-left:auto
  }
.block {
    display:block
  }
.flex {
    display:flex
  }
.grid {
    display:grid
  }
.hidden {
    display:none
  }
.inline-block {
    display:inline-block
  }
.inline-flex {
    display:inline-flex
  }
.table {
    display:table
  }
.aspect-\[3\/1\] {
    aspect-ratio:3
  }
.size-4 {
    width:calc(var(--spacing) * 4);
    height:calc(var(--spacing) * 4)
  }
.\!h-auto {
    height:auto!important
  }
.h-2 {
    height:calc(var(--spacing) * 2)
  }
.h-2\.5 {
    height:calc(var(--spacing) * 2.5)
  }
.h-3 {
    height:calc(var(--spacing) * 3)
  }
.h-4 {
    height:calc(var(--spacing) * 4)
  }
.h-12 {
    height:calc(var(--spacing) * 12)
  }
.h-20 {
    height:calc(var(--spacing) * 20)
  }
.h-28 {
    height:calc(var(--spacing) * 28)
  }
.h-full {
    height:100%
  }
.h-px {
    height:1px
  }
.\!max-h-\[74px\] {
    max-height:74px!important
  }
.max-h-\[36rem\] {
    max-height:36rem
  }
.max-h-\[420px\] {
    max-height:420px
  }
.max-h-\[700px\] {
    max-height:700px
  }
.min-h-20 {
    min-height:calc(var(--spacing) * 20)
  }
.min-h-24 {
    min-height:calc(var(--spacing) * 24)
  }
.min-h-28 {
    min-height:calc(var(--spacing) * 28)
  }
.min-h-48 {
    min-height:calc(var(--spacing) * 48)
  }
.min-h-\[65px\] {
    min-height:65px
  }
.min-h-\[calc\(100vh-80px\)\] {
    min-height:calc(100vh - 80px)
  }
.min-h-full {
    min-height:100%
  }
.min-h-screen {
    min-height:100vh
  }
.\!w-\[145px\] {
    width:145px!important
  }
.\!w-\[170px\] {
    width:170px!important
  }
.w-2\.5 {
    width:calc(var(--spacing) * 2.5)
  }
.w-4 {
    width:calc(var(--spacing) * 4)
  }
.w-12 {
    width:calc(var(--spacing) * 12)
  }
.w-20 {
    width:calc(var(--spacing) * 20)
  }
.w-40 {
    width:calc(var(--spacing) * 40)
  }
.w-\[min\(88vw\,320px\)\] {
    width:min(88vw,320px)
  }
.w-\[min\(92vw\,380px\)\] {
    width:min(92vw,380px)
  }
.w-\[min\(92vw\,390px\)\] {
    width:min(92vw,390px)
  }
.w-full {
    width:100%
  }
.w-px {
    width:1px
  }
.\!max-w-\[145px\] {
    max-width:145px!important
  }
.\!max-w-\[170px\] {
    max-width:170px!important
  }
.\!max-w-\[1500px\] {
    max-width:1500px!important
  }
.max-w-2xl {
    max-width:var(--container-2xl)
  }
.max-w-3xl {
    max-width:var(--container-3xl)
  }
.max-w-4xl {
    max-width:var(--container-4xl)
  }
.max-w-40 {
    max-width:calc(var(--spacing) * 40)
  }
.max-w-52 {
    max-width:calc(var(--spacing) * 52)
  }
.max-w-md {
    max-width:var(--container-md)
  }
.max-w-xl {
    max-width:var(--container-xl)
  }
.max-w-xs {
    max-width:var(--container-xs)
  }
.min-w-0 {
    min-width:0
  }
.min-w-24 {
    min-width:calc(var(--spacing) * 24)
  }
.min-w-\[88px\] {
    min-width:88px
  }
.min-w-\[220px\] {
    min-width:220px
  }
.min-w-\[260px\] {
    min-width:260px
  }
.flex-1 {
    flex:1
  }
.shrink-0 {
    flex-shrink:0
  }
.transform {
    transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
  }
.animate-pulse {
    animation:var(--animate-pulse)
  }
.cursor-not-allowed {
    cursor:not-allowed
  }
.cursor-pointer {
    cursor:pointer
  }
.resize {
    resize:both
  }
.list-none {
    list-style-type:none
  }
.grid-cols-2 {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
.grid-cols-\[1fr_auto\] {
    grid-template-columns:1fr auto
  }
.grid-cols-\[5rem_1fr_auto\] {
    grid-template-columns:5rem 1fr auto
  }
.grid-cols-\[48px_1fr_auto\] {
    grid-template-columns:48px 1fr auto
  }
.flex-col {
    flex-direction:column
  }
.flex-wrap {
    flex-wrap:wrap
  }
.place-items-center {
    place-items:center
  }
.items-center {
    align-items:center
  }
.items-end {
    align-items:flex-end
  }
.items-start {
    align-items:flex-start
  }
.items-stretch {
    align-items:stretch
  }
.justify-between {
    justify-content:space-between
  }
.justify-center {
    justify-content:center
  }
.justify-end {
    justify-content:flex-end
  }
.justify-items-end {
    justify-items:end
  }
.gap-1 {
    gap:var(--spacing)
  }
.gap-2 {
    gap:calc(var(--spacing) * 2)
  }
.gap-3 {
    gap:calc(var(--spacing) * 3)
  }
.gap-4 {
    gap:calc(var(--spacing) * 4)
  }
.gap-5 {
    gap:calc(var(--spacing) * 5)
  }
.gap-6 {
    gap:calc(var(--spacing) * 6)
  }
.gap-8 {
    gap:calc(var(--spacing) * 8)
  }
:where(.space-y-1>:not(:last-child)) {
    --tw-space-y-reverse:0;
    margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));
    margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))
  }
:where(.space-y-2>:not(:last-child)) {
    --tw-space-y-reverse:0;
    margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))
  }
:where(.space-y-3>:not(:last-child)) {
    --tw-space-y-reverse:0;
    margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))
  }
:where(.space-y-4>:not(:last-child)) {
    --tw-space-y-reverse:0;
    margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))
  }
:where(.space-y-5>:not(:last-child)) {
    --tw-space-y-reverse:0;
    margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))
  }
:where(.space-y-6>:not(:last-child)) {
    --tw-space-y-reverse:0;
    margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))
  }
:where(.space-y-8>:not(:last-child)) {
    --tw-space-y-reverse:0;
    margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))
  }
:where(.space-y-10>:not(:last-child)) {
    --tw-space-y-reverse:0;
    margin-block-start:calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
    margin-block-end:calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)))
  }
:where(.divide-y>:not(:last-child)) {
    --tw-divide-y-reverse:0;
    border-bottom-style:var(--tw-border-style);
    border-top-style:var(--tw-border-style);
    border-top-width:calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))
  }
:where(.divide-white\/5>:not(:last-child)) {
    border-color:#ffffff0d
  }
@supports (color:color-mix(in lab, red, red)) {
    :where(.divide-white\/5>:not(:last-child)) {
      border-color:color-mix(in oklab, var(--color-white) 5%, transparent)
    }

  }
.justify-self-start {
    justify-self:flex-start
  }
.truncate {
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden
  }
.overflow-auto {
    overflow:auto
  }
.overflow-hidden {
    overflow:hidden
  }
.overflow-visible {
    overflow:visible
  }
.overflow-x-auto {
    overflow-x:auto
  }
.overflow-y-auto {
    overflow-y:auto
  }
.rounded {
    border-radius:.25rem
  }
.rounded-2xl {
    border-radius:var(--radius-2xl)
  }
.rounded-full {
    border-radius:3.40282e38px
  }
.rounded-lg {
    border-radius:var(--radius-lg)
  }
.rounded-xl {
    border-radius:var(--radius-xl)
  }
.border {
    border-style:var(--tw-border-style);
    border-width:1px
  }
.border-t {
    border-top-style:var(--tw-border-style);
    border-top-width:1px
  }
.border-r {
    border-right-style:var(--tw-border-style);
    border-right-width:1px
  }
.border-b {
    border-bottom-style:var(--tw-border-style);
    border-bottom-width:1px
  }
.border-l {
    border-left-style:var(--tw-border-style);
    border-left-width:1px
  }
.\!border-\[var\(--brand\)\] {
    border-color:var(--brand)!important
  }
.\!border-amber-500\/60 {
    border-color:#f99c0099!important
  }
@supports (color:color-mix(in lab, red, red)) {
    .\!border-amber-500\/60 {
      border-color:color-mix(in oklab, var(--color-amber-500) 60%, transparent)!important
    }

  }
.\!border-emerald-500\/50 {
    border-color:#00bb7f80!important
  }
@supports (color:color-mix(in lab, red, red)) {
    .\!border-emerald-500\/50 {
      border-color:color-mix(in oklab, var(--color-emerald-500) 50%, transparent)!important
    }

  }
.\!border-red-500\/40 {
    border-color:#fb2c3666!important
  }
@supports (color:color-mix(in lab, red, red)) {
    .\!border-red-500\/40 {
      border-color:color-mix(in oklab, var(--color-red-500) 40%, transparent)!important
    }

  }
.\!border-red-500\/50 {
    border-color:#fb2c3680!important
  }
@supports (color:color-mix(in lab, red, red)) {
    .\!border-red-500\/50 {
      border-color:color-mix(in oklab, var(--color-red-500) 50%, transparent)!important
    }

  }
.\!border-red-500\/60 {
    border-color:#fb2c3699!important
  }
@supports (color:color-mix(in lab, red, red)) {
    .\!border-red-500\/60 {
      border-color:color-mix(in oklab, var(--color-red-500) 60%, transparent)!important
    }

  }
.\!border-red-600 {
    border-color:var(--color-red-600)!important
  }
.\!border-red-700 {
    border-color:var(--color-red-700)!important
  }
.\!border-red-900 {
    border-color:var(--color-red-900)!important
  }
.border-\[\#5f4b24\] {
    border-color:#5f4b24
  }
.border-\[\#9b742b\] {
    border-color:#9b742b
  }
.border-\[\#d5a93f\]\/25 {
    border-color:#d5a93f40;
    border-color:lab(71.9258% 8.85782 58.4775/.25)
  }
.border-\[rgba\(201\,168\,96\,\.25\)\] {
    border-color:#c9a86040
  }
.border-\[rgba\(201\,168\,96\,0\.22\)\] {
    border-color:#c9a86038
  }
.border-\[var\(--border\)\] {
    border-color:var(--border)
  }
.border-\[var\(--brand\)\],.border-\[var\(--brand\)\]\/25 {
    border-color:var(--brand)
  }
@supports (color:color-mix(in lab, red, red)) {
    .border-\[var\(--brand\)\]\/25 {
      border-color:color-mix(in oklab, var(--brand) 25%, transparent)
    }

  }
.border-amber-700\/40 {
    border-color:#b7500066
  }
@supports (color:color-mix(in lab, red, red)) {
    .border-amber-700\/40 {
      border-color:color-mix(in oklab, var(--color-amber-700) 40%, transparent)
    }

  }
.border-amber-700\/50 {
    border-color:#b7500080
  }
@supports (color:color-mix(in lab, red, red)) {
    .border-amber-700\/50 {
      border-color:color-mix(in oklab, var(--color-amber-700) 50%, transparent)
    }

  }
.border-amber-800 {
    border-color:var(--color-amber-800)
  }
.border-emerald-400\/25 {
    border-color:#00d29440
  }
@supports (color:color-mix(in lab, red, red)) {
    .border-emerald-400\/25 {
      border-color:color-mix(in oklab, var(--color-emerald-400) 25%, transparent)
    }

  }
.border-emerald-500\/30 {
    border-color:#00bb7f4d
  }
@supports (color:color-mix(in lab, red, red)) {
    .border-emerald-500\/30 {
      border-color:color-mix(in oklab, var(--color-emerald-500) 30%, transparent)
    }

  }
.border-emerald-500\/40 {
    border-color:#00bb7f66
  }
@supports (color:color-mix(in lab, red, red)) {
    .border-emerald-500\/40 {
      border-color:color-mix(in oklab, var(--color-emerald-500) 40%, transparent)
    }

  }
.border-emerald-700 {
    border-color:var(--color-emerald-700)
  }
.border-emerald-900 {
    border-color:var(--color-emerald-900)
  }
.border-green-700 {
    border-color:var(--color-green-700)
  }
.border-neutral-700 {
    border-color:var(--color-neutral-700)
  }
.border-purple-400\/20 {
    border-color:#c07eff33
  }
@supports (color:color-mix(in lab, red, red)) {
    .border-purple-400\/20 {
      border-color:color-mix(in oklab, var(--color-purple-400) 20%, transparent)
    }

  }
.border-red-500\/30 {
    border-color:#fb2c364d
  }
@supports (color:color-mix(in lab, red, red)) {
    .border-red-500\/30 {
      border-color:color-mix(in oklab, var(--color-red-500) 30%, transparent)
    }

  }
.border-red-500\/40 {
    border-color:#fb2c3666
  }
@supports (color:color-mix(in lab, red, red)) {
    .border-red-500\/40 {
      border-color:color-mix(in oklab, var(--color-red-500) 40%, transparent)
    }

  }
.border-red-500\/50 {
    border-color:#fb2c3680
  }
@supports (color:color-mix(in lab, red, red)) {
    .border-red-500\/50 {
      border-color:color-mix(in oklab, var(--color-red-500) 50%, transparent)
    }

  }
.border-red-700 {
    border-color:var(--color-red-700)
  }
.border-red-700\/70 {
    border-color:#bf000fb3
  }
@supports (color:color-mix(in lab, red, red)) {
    .border-red-700\/70 {
      border-color:color-mix(in oklab, var(--color-red-700) 70%, transparent)
    }

  }
.border-red-800 {
    border-color:var(--color-red-800)
  }
.border-red-900 {
    border-color:var(--color-red-900)
  }
.border-white\/10 {
    border-color:#ffffff1a
  }
@supports (color:color-mix(in lab, red, red)) {
    .border-white\/10 {
      border-color:color-mix(in oklab, var(--color-white) 10%, transparent)
    }

  }
.border-yellow-900\/60 {
    border-color:#733e0a99
  }
@supports (color:color-mix(in lab, red, red)) {
    .border-yellow-900\/60 {
      border-color:color-mix(in oklab, var(--color-yellow-900) 60%, transparent)
    }

  }
.bg-\[\#08090b\] {
    background-color:#08090b
  }
.bg-\[\#17130d\] {
    background-color:#17130d
  }
.bg-\[\#111114\] {
    background-color:#111114
  }
.bg-\[\#111216\] {
    background-color:#111216
  }
.bg-\[rgba\(12\,12\,13\,0\.92\)\] {
    background-color:#0c0c0deb
  }
.bg-\[rgba\(24\,24\,27\,0\.72\)\] {
    background-color:#18181bb8
  }
.bg-\[rgba\(24\,24\,27\,0\.95\)\] {
    background-color:#18181bf2
  }
.bg-\[rgba\(28\,22\,10\,0\.94\)\] {
    background-color:#1c160af0
  }
.bg-\[rgba\(44\,44\,48\,0\.72\)\] {
    background-color:#2c2c30b8
  }
.bg-\[var\(--brand\)\],.bg-\[var\(--brand\)\]\/5 {
    background-color:var(--brand)
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-\[var\(--brand\)\]\/5 {
      background-color:color-mix(in oklab, var(--brand) 5%, transparent)
    }

  }
.bg-\[var\(--surface-01\)\] {
    background-color:var(--surface-01)
  }
.bg-amber-950\/20 {
    background-color:#46190133
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-amber-950\/20 {
      background-color:color-mix(in oklab, var(--color-amber-950) 20%, transparent)
    }

  }
.bg-amber-950\/30 {
    background-color:#4619014d
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-amber-950\/30 {
      background-color:color-mix(in oklab, var(--color-amber-950) 30%, transparent)
    }

  }
.bg-black {
    background-color:var(--color-black)
  }
.bg-black\/20 {
    background-color:#0003
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-black\/20 {
      background-color:color-mix(in oklab, var(--color-black) 20%, transparent)
    }

  }
.bg-black\/25 {
    background-color:#00000040
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-black\/25 {
      background-color:color-mix(in oklab, var(--color-black) 25%, transparent)
    }

  }
.bg-black\/35 {
    background-color:#00000059
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-black\/35 {
      background-color:color-mix(in oklab, var(--color-black) 35%, transparent)
    }

  }
.bg-black\/40 {
    background-color:#0006
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-black\/40 {
      background-color:color-mix(in oklab, var(--color-black) 40%, transparent)
    }

  }
.bg-black\/60 {
    background-color:#0009
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color:color-mix(in oklab, var(--color-black) 60%, transparent)
    }

  }
.bg-black\/70 {
    background-color:#000000b3
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-black\/70 {
      background-color:color-mix(in oklab, var(--color-black) 70%, transparent)
    }

  }
.bg-black\/75 {
    background-color:#000000bf
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-black\/75 {
      background-color:color-mix(in oklab, var(--color-black) 75%, transparent)
    }

  }
.bg-black\/80 {
    background-color:#000c
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-black\/80 {
      background-color:color-mix(in oklab, var(--color-black) 80%, transparent)
    }

  }
.bg-brand\/10 {
    background-color:var(--brand)
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-brand\/10 {
      background-color:color-mix(in oklab, var(--brand) 10%, transparent)
    }

  }
.bg-emerald-400 {
    background-color:var(--color-emerald-400)
  }
.bg-emerald-500\/10 {
    background-color:#00bb7f1a
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-emerald-500\/10 {
      background-color:color-mix(in oklab, var(--color-emerald-500) 10%, transparent)
    }

  }
.bg-emerald-500\/20 {
    background-color:#00bb7f33
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-emerald-500\/20 {
      background-color:color-mix(in oklab, var(--color-emerald-500) 20%, transparent)
    }

  }
.bg-emerald-500\/70 {
    background-color:#00bb7fb3
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-emerald-500\/70 {
      background-color:color-mix(in oklab, var(--color-emerald-500) 70%, transparent)
    }

  }
.bg-green-950\/60 {
    background-color:#032e1599
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-green-950\/60 {
      background-color:color-mix(in oklab, var(--color-green-950) 60%, transparent)
    }

  }
.bg-neutral-900 {
    background-color:var(--color-neutral-900)
  }
.bg-red-500\/10 {
    background-color:#fb2c361a
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-red-500\/10 {
      background-color:color-mix(in oklab, var(--color-red-500) 10%, transparent)
    }

  }
.bg-red-500\/20 {
    background-color:#fb2c3633
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-red-500\/20 {
      background-color:color-mix(in oklab, var(--color-red-500) 20%, transparent)
    }

  }
.bg-red-700 {
    background-color:var(--color-red-700)
  }
.bg-red-950\/40 {
    background-color:#46080966
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-red-950\/40 {
      background-color:color-mix(in oklab, var(--color-red-950) 40%, transparent)
    }

  }
.bg-red-950\/60 {
    background-color:#46080999
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-red-950\/60 {
      background-color:color-mix(in oklab, var(--color-red-950) 60%, transparent)
    }

  }
.bg-white\/5 {
    background-color:#ffffff0d
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-white\/5 {
      background-color:color-mix(in oklab, var(--color-white) 5%, transparent)
    }

  }
.bg-zinc-500\/20 {
    background-color:#71717b33
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-zinc-500\/20 {
      background-color:color-mix(in oklab, var(--color-zinc-500) 20%, transparent)
    }

  }
.bg-zinc-500\/25 {
    background-color:#71717b40
  }
@supports (color:color-mix(in lab, red, red)) {
    .bg-zinc-500\/25 {
      background-color:color-mix(in oklab, var(--color-zinc-500) 25%, transparent)
    }

  }
.bg-zinc-950 {
    background-color:var(--color-zinc-950)
  }
.bg-gradient-to-br {
    --tw-gradient-position:to bottom right in oklab;
    background-image:linear-gradient(var(--tw-gradient-stops))
  }
.from-emerald-400\/10 {
    --tw-gradient-from:#00d2941a
  }
@supports (color:color-mix(in lab, red, red)) {
    .from-emerald-400\/10 {
      --tw-gradient-from:color-mix(in oklab, var(--color-emerald-400) 10%, transparent)
    }

  }
.from-emerald-400\/10 {
    --tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
  }
.to-zinc-950 {
    --tw-gradient-to:var(--color-zinc-950);
    --tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
  }
.object-contain {
    object-fit:contain
  }
.p-0 {
    padding:0
  }
.p-1 {
    padding:var(--spacing)
  }
.p-2 {
    padding:calc(var(--spacing) * 2)
  }
.p-3 {
    padding:calc(var(--spacing) * 3)
  }
.p-4 {
    padding:calc(var(--spacing) * 4)
  }
.p-5 {
    padding:calc(var(--spacing) * 5)
  }
.p-6 {
    padding:calc(var(--spacing) * 6)
  }
.\!px-0 {
    padding-inline:0!important
  }
.\!px-3 {
    padding-inline:calc(var(--spacing) * 3)!important
  }
.px-2 {
    padding-inline:calc(var(--spacing) * 2)
  }
.px-2\.5 {
    padding-inline:calc(var(--spacing) * 2.5)
  }
.px-3 {
    padding-inline:calc(var(--spacing) * 3)
  }
.px-4 {
    padding-inline:calc(var(--spacing) * 4)
  }
.px-5 {
    padding-inline:calc(var(--spacing) * 5)
  }
.\!py-2 {
    padding-block:calc(var(--spacing) * 2)!important
  }
.py-0\.5 {
    padding-block:calc(var(--spacing) * .5)
  }
.py-1 {
    padding-block:var(--spacing)
  }
.py-2 {
    padding-block:calc(var(--spacing) * 2)
  }
.py-3 {
    padding-block:calc(var(--spacing) * 3)
  }
.py-3\.5 {
    padding-block:calc(var(--spacing) * 3.5)
  }
.py-4 {
    padding-block:calc(var(--spacing) * 4)
  }
.py-6 {
    padding-block:calc(var(--spacing) * 6)
  }
.py-8 {
    padding-block:calc(var(--spacing) * 8)
  }
.py-10 {
    padding-block:calc(var(--spacing) * 10)
  }
.py-12 {
    padding-block:calc(var(--spacing) * 12)
  }
.pt-2 {
    padding-top:calc(var(--spacing) * 2)
  }
.pt-4 {
    padding-top:calc(var(--spacing) * 4)
  }
.pt-6 {
    padding-top:calc(var(--spacing) * 6)
  }
.pt-10 {
    padding-top:calc(var(--spacing) * 10)
  }
.pb-2 {
    padding-bottom:calc(var(--spacing) * 2)
  }
.pb-4 {
    padding-bottom:calc(var(--spacing) * 4)
  }
.pb-10 {
    padding-bottom:calc(var(--spacing) * 10)
  }
.pl-2 {
    padding-left:calc(var(--spacing) * 2)
  }
.text-center {
    text-align:center
  }
.text-left {
    text-align:left
  }
.text-right {
    text-align:right
  }
.font-display {
    font-family:var(--font-platypi)
  }
.font-mono {
    font-family:var(--font-mono)
  }
.\!text-2xl {
    font-size:var(--text-2xl)!important;
    line-height:var(--tw-leading,var(--text-2xl--line-height))!important
  }
.text-2xl {
    font-size:var(--text-2xl);
    line-height:var(--tw-leading,var(--text-2xl--line-height))
  }
.text-3xl {
    font-size:var(--text-3xl);
    line-height:var(--tw-leading,var(--text-3xl--line-height))
  }
.text-6xl {
    font-size:var(--text-6xl);
    line-height:var(--tw-leading,var(--text-6xl--line-height))
  }
.text-lg {
    font-size:var(--text-lg);
    line-height:var(--tw-leading,var(--text-lg--line-height))
  }
.text-sm {
    font-size:var(--text-sm);
    line-height:var(--tw-leading,var(--text-sm--line-height))
  }
.text-xl {
    font-size:var(--text-xl);
    line-height:var(--tw-leading,var(--text-xl--line-height))
  }
.text-xs {
    font-size:var(--text-xs);
    line-height:var(--tw-leading,var(--text-xs--line-height))
  }
.text-\[0\.7rem\] {
    font-size:.7rem
  }
.text-\[0\.65rem\] {
    font-size:.65rem
  }
.text-\[10px\] {
    font-size:10px
  }
.leading-5 {
    --tw-leading:calc(var(--spacing) * 5);
    line-height:calc(var(--spacing) * 5)
  }
.leading-6 {
    --tw-leading:calc(var(--spacing) * 6);
    line-height:calc(var(--spacing) * 6)
  }
.leading-7 {
    --tw-leading:calc(var(--spacing) * 7);
    line-height:calc(var(--spacing) * 7)
  }
.leading-relaxed {
    --tw-leading:var(--leading-relaxed);
    line-height:var(--leading-relaxed)
  }
.font-black {
    --tw-font-weight:var(--font-weight-black);
    font-weight:var(--font-weight-black)
  }
.font-bold {
    --tw-font-weight:var(--font-weight-bold);
    font-weight:var(--font-weight-bold)
  }
.font-medium {
    --tw-font-weight:var(--font-weight-medium);
    font-weight:var(--font-weight-medium)
  }
.font-semibold {
    --tw-font-weight:var(--font-weight-semibold);
    font-weight:var(--font-weight-semibold)
  }
.tracking-\[\.2em\] {
    --tw-tracking:.2em;
    letter-spacing:.2em
  }
.tracking-\[\.16em\] {
    --tw-tracking:.16em;
    letter-spacing:.16em
  }
.tracking-\[\.18em\] {
    --tw-tracking:.18em;
    letter-spacing:.18em
  }
.tracking-\[0\.2em\] {
    --tw-tracking:.2em;
    letter-spacing:.2em
  }
.tracking-\[0\.12em\] {
    --tw-tracking:.12em;
    letter-spacing:.12em
  }
.tracking-\[0\.16em\] {
    --tw-tracking:.16em;
    letter-spacing:.16em
  }
.tracking-\[0\.25em\] {
    --tw-tracking:.25em;
    letter-spacing:.25em
  }
.tracking-\[0\.35em\] {
    --tw-tracking:.35em;
    letter-spacing:.35em
  }
.tracking-wide {
    --tw-tracking:var(--tracking-wide);
    letter-spacing:var(--tracking-wide)
  }
.tracking-wider {
    --tw-tracking:var(--tracking-wider);
    letter-spacing:var(--tracking-wider)
  }
.break-words {
    overflow-wrap:break-word
  }
.whitespace-normal {
    white-space:normal
  }
.whitespace-nowrap {
    white-space:nowrap
  }
.whitespace-pre-wrap {
    white-space:pre-wrap
  }
.\!text-\[var\(--brand\)\] {
    color:var(--brand)!important
  }
.\!text-amber-200 {
    color:var(--color-amber-200)!important
  }
.\!text-emerald-300 {
    color:var(--color-emerald-300)!important
  }
.\!text-red-300 {
    color:var(--color-red-300)!important
  }
.text-\[\#d5a93f\] {
    color:#d5a93f
  }
.text-\[\#e7be5c\] {
    color:#e7be5c
  }
.text-\[\#e8bd59\] {
    color:#e8bd59
  }
.text-\[\#f0cb72\] {
    color:#f0cb72
  }
.text-\[var\(--brand\)\] {
    color:var(--brand)
  }
.text-\[var\(--offline\)\] {
    color:var(--offline)
  }
.text-\[var\(--online\)\] {
    color:var(--online)
  }
.text-\[var\(--text-muted\)\] {
    color:var(--text-muted)
  }
.text-amber-100 {
    color:var(--color-amber-100)
  }
.text-amber-200 {
    color:var(--color-amber-200)
  }
.text-amber-300 {
    color:var(--color-amber-300)
  }
.text-amber-400 {
    color:var(--color-amber-400)
  }
.text-brand {
    color:var(--brand)
  }
.text-emerald-200 {
    color:var(--color-emerald-200)
  }
.text-emerald-300 {
    color:var(--color-emerald-300)
  }
.text-emerald-400 {
    color:var(--color-emerald-400)
  }
.text-foreground {
    color:var(--foreground)
  }
.text-green-200 {
    color:var(--color-green-200)
  }
.text-muted {
    color:var(--muted)
  }
.text-purple-300 {
    color:var(--color-purple-300)
  }
.text-red-200 {
    color:var(--color-red-200)
  }
.text-red-300 {
    color:var(--color-red-300)
  }
.text-red-400 {
    color:var(--color-red-400)
  }
.text-rose-300 {
    color:var(--color-rose-300)
  }
.text-sky-300 {
    color:var(--color-sky-300)
  }
.text-white {
    color:var(--color-white)
  }
.text-white\/70 {
    color:#ffffffb3
  }
@supports (color:color-mix(in lab, red, red)) {
    .text-white\/70 {
      color:color-mix(in oklab, var(--color-white) 70%, transparent)
    }

  }
.text-zinc-50 {
    color:var(--color-zinc-50)
  }
.text-zinc-100 {
    color:var(--color-zinc-100)
  }
.text-zinc-200 {
    color:var(--color-zinc-200)
  }
.text-zinc-300 {
    color:var(--color-zinc-300)
  }
.text-zinc-400 {
    color:var(--color-zinc-400)
  }
.text-zinc-500 {
    color:var(--color-zinc-500)
  }
.text-zinc-600 {
    color:var(--color-zinc-600)
  }
.capitalize {
    text-transform:capitalize
  }
.uppercase {
    text-transform:uppercase
  }
.tabular-nums {
    --tw-numeric-spacing:tabular-nums;
    font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)
  }
.no-underline {
    text-decoration-line:none
  }
.underline {
    text-decoration-line:underline
  }
.antialiased {
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
  }
.accent-\[var\(--brand\)\] {
    accent-color:var(--brand)
  }
.accent-amber-500 {
    accent-color:var(--color-amber-500)
  }
.opacity-0 {
    opacity:0
  }
.opacity-60 {
    opacity:.6
  }
.opacity-70 {
    opacity:.7
  }
.opacity-80 {
    opacity:.8
  }
.shadow-2xl {
    --tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);
    box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }
.shadow-\[0_0_14px_\#34d399\] {
    --tw-shadow:0 0 14px var(--tw-shadow-color,#34d399);
    box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }
.shadow-\[0_18px_60px_rgba\(0\,0\,0\,\.35\)\] {
    --tw-shadow:0 18px 60px var(--tw-shadow-color,#00000059);
    box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }
.shadow-\[0_20px_40px_rgba\(0\,0\,0\,0\.45\)\] {
    --tw-shadow:0 20px 40px var(--tw-shadow-color,#00000073);
    box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }
.ring {
    --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
    box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }
.outline {
    outline-style:var(--tw-outline-style);
    outline-width:1px
  }
.blur {
    --tw-blur:blur(8px);
    filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
  }
.filter {
    filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
  }
.backdrop-blur-\[2px\] {
    --tw-backdrop-blur:blur(2px);
    -webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)
  }
.backdrop-blur-md {
    --tw-backdrop-blur:blur(var(--blur-md));
    -webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)
  }
.transition {
    transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
    transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
    transition-duration:var(--tw-duration,var(--default-transition-duration))
  }
.ease-out {
    --tw-ease:var(--ease-out);
    transition-timing-function:var(--ease-out)
  }
.group-open\:rotate-45:is(:where(.group):is([open],:popover-open,:open) *) {
    rotate:45deg
  }
@media (hover:hover) {
    .group-hover\:bg-brand\/20:is(:where(.group):hover *) {
      background-color:var(--brand)
    }
@supports (color:color-mix(in lab, red, red)) {
      .group-hover\:bg-brand\/20:is(:where(.group):hover *) {
        background-color:color-mix(in oklab, var(--brand) 20%, transparent)
      }

    }

  }
.marker\:content-none ::marker {
    --tw-content:none;
    content:none
  }
.marker\:content-none::marker {
    --tw-content:none;
    content:none
  }
.marker\:content-none ::-webkit-details-marker {
    --tw-content:none;
    content:none
  }
.marker\:content-none::-webkit-details-marker {
    --tw-content:none;
    content:none
  }
.open\:bg-\[var\(--surface-02\)\]:is([open],:popover-open,:open) {
    background-color:var(--surface-02)
  }
@media (hover:hover) {
    .hover\:border-brand\/30:hover {
      border-color:var(--brand)
    }
@supports (color:color-mix(in lab, red, red)) {
      .hover\:border-brand\/30:hover {
        border-color:color-mix(in oklab, var(--brand) 30%, transparent)
      }

    }
.hover\:bg-\[rgba\(24\,24\,27\,0\.82\)\]:hover {
      background-color:#18181bd1
    }
.hover\:bg-white\/5:hover {
      background-color:#ffffff0d
    }
@supports (color:color-mix(in lab, red, red)) {
      .hover\:bg-white\/5:hover {
        background-color:color-mix(in oklab, var(--color-white) 5%, transparent)
      }

    }
.hover\:text-\[var\(--brand\)\]:hover {
      color:var(--brand)
    }
.hover\:underline:hover {
      text-decoration-line:underline
    }

  }
.disabled\:cursor-wait:disabled {
    cursor:wait
  }
.disabled\:opacity-60:disabled {
    opacity:.6
  }
@media (min-width:40rem) {
    .sm\:col-span-2 {
      grid-column:span 2/span 2
    }
.sm\:col-span-3 {
      grid-column:span 3/span 3
    }
.sm\:w-auto {
      width:auto
    }
.sm\:grid-cols-2 {
      grid-template-columns:repeat(2,minmax(0,1fr))
    }
.sm\:grid-cols-3 {
      grid-template-columns:repeat(3,minmax(0,1fr))
    }
.sm\:grid-cols-\[1fr_110px_auto\] {
      grid-template-columns:1fr 110px auto
    }
.sm\:px-6 {
      padding-inline:calc(var(--spacing) * 6)
    }

  }
@media (min-width:48rem) {
    .md\:col-span-2 {
      grid-column:span 2/span 2
    }
.md\:col-span-3 {
      grid-column:span 3/span 3
    }
.md\:-mt-16 {
      margin-top:calc(var(--spacing) * -16)
    }
.md\:hidden {
      display:none
    }
.md\:grid-cols-2 {
      grid-template-columns:repeat(2,minmax(0,1fr))
    }
.md\:grid-cols-3 {
      grid-template-columns:repeat(3,minmax(0,1fr))
    }
.md\:grid-cols-4 {
      grid-template-columns:repeat(4,minmax(0,1fr))
    }
.md\:flex-row {
      flex-direction:row
    }
.md\:items-center {
      align-items:center
    }
.md\:items-end {
      align-items:flex-end
    }
.md\:justify-between {
      justify-content:space-between
    }
.md\:p-8 {
      padding:calc(var(--spacing) * 8)
    }
.md\:py-7 {
      padding-block:calc(var(--spacing) * 7)
    }
.md\:py-14 {
      padding-block:calc(var(--spacing) * 14)
    }
.md\:py-16 {
      padding-block:calc(var(--spacing) * 16)
    }
.md\:\!text-3xl {
      font-size:var(--text-3xl)!important;
      line-height:var(--tw-leading,var(--text-3xl--line-height))!important
    }
.md\:text-base {
      font-size:var(--text-base);
      line-height:var(--tw-leading,var(--text-base--line-height))
    }

  }
@media (min-width:64rem) {
    .lg\:col-span-2 {
      grid-column:span 2/span 2
    }
.lg\:col-span-3 {
      grid-column:span 3/span 3
    }
.lg\:col-span-4 {
      grid-column:span 4/span 4
    }
.lg\:flex {
      display:flex
    }
.lg\:hidden {
      display:none
    }
.lg\:grid-cols-2 {
      grid-template-columns:repeat(2,minmax(0,1fr))
    }
.lg\:grid-cols-3 {
      grid-template-columns:repeat(3,minmax(0,1fr))
    }
.lg\:grid-cols-4 {
      grid-template-columns:repeat(4,minmax(0,1fr))
    }
.lg\:grid-cols-\[1\.1fr_0\.9fr\] {
      grid-template-columns:1.1fr .9fr
    }
.lg\:grid-cols-\[1fr_1fr\] {
      grid-template-columns:1fr 1fr
    }
.lg\:grid-cols-\[2fr_1fr_1\.4fr_auto\] {
      grid-template-columns:2fr 1fr 1.4fr auto
    }
.lg\:grid-cols-\[200px_minmax\(0\,1fr\)\] {
      grid-template-columns:200px minmax(0,1fr)
    }
.lg\:grid-cols-\[minmax\(260px\,1fr\)_minmax\(0\,2fr\)\] {
      grid-template-columns:minmax(260px,1fr) minmax(0,2fr)
    }

  }
@media (min-width:80rem) {
    .xl\:col-span-3 {
      grid-column:span 3/span 3
    }
.xl\:col-span-5 {
      grid-column:span 5/span 5
    }
.xl\:grid-cols-2 {
      grid-template-columns:repeat(2,minmax(0,1fr))
    }
.xl\:grid-cols-3 {
      grid-template-columns:repeat(3,minmax(0,1fr))
    }
.xl\:grid-cols-5 {
      grid-template-columns:repeat(5,minmax(0,1fr))
    }
.xl\:grid-cols-\[0\.85fr_1\.15fr\] {
      grid-template-columns:.85fr 1.15fr
    }

  }

}
.class-showcase {
  background:#08090b;
  border:1px solid #cc9e3a52;
  position:relative;
  overflow:hidden;
  box-shadow:0 24px 70px #00000080
}
.class-showcase__heading {
  background:radial-gradient(circle at 80% 0,#85521121,#0000 42%),linear-gradient(90deg,#0b0b0d,#11100e);
  border-bottom:1px solid #cc9e3a33;
  padding:34px 46px 28px
}
.class-showcase__heading span,.class-showcase__number {
  color:#d5aa4c;
  letter-spacing:.28em;
  font-size:.68rem;
  font-weight:800
}
.class-showcase__heading h2 {
  color:#f4ead5;
  margin:7px 0 5px;
  font-family:Georgia,serif;
  font-size:2.15rem;
  line-height:1.05
}
.class-showcase__heading p {
  color:#98999f;
  margin:0;
  font-size:.88rem
}
.class-showcase__stage {
  background:#101115;
  min-height:580px;
  position:relative;
  overflow:hidden
}
.class-showcase__art {
  object-fit:cover;
  object-position:center;
  width:100%;
  height:100%;
  animation:.5s both class-art-in;
  position:absolute;
  inset:0
}
.class-showcase__shade {
  background:linear-gradient(90deg,#050608fc 0,#050608f0 30%,#05060880 54%,#05060812 78%),linear-gradient(#0000 60%,#05060880);
  position:absolute;
  inset:0
}
.class-showcase__content {
  z-index:1;
  flex-direction:column;
  justify-content:center;
  width:47%;
  min-height:580px;
  padding:42px 48px;
  display:flex;
  position:relative
}
.class-showcase__content h3 {
  color:#f0bc48;
  text-transform:uppercase;
  text-shadow:0 3px 24px #000;
  margin:9px 0 8px;
  font-family:Georgia,serif;
  font-size:3.2rem;
  line-height:1
}
.class-showcase__content>i {
  background:linear-gradient(90deg,#d8a63c,#0000);
  width:62px;
  height:2px;
  margin:10px 0 21px
}
.class-showcase__content>p {
  color:#c6c7cb;
  max-width:520px;
  margin:0 0 28px;
  font-size:.93rem;
  line-height:1.75
}
.class-showcase__content>strong {
  color:#d9c28b;
  letter-spacing:.18em;
  margin-bottom:14px;
  font-size:.68rem
}
.class-showcase__stats {
  gap:11px;
  max-width:430px;
  display:grid
}
.class-showcase__stat {
  color:#c8c8ca;
  grid-template-columns:118px 1fr 30px;
  align-items:center;
  gap:12px;
  font-size:.72rem;
  display:grid
}
.class-showcase__stat>div {
  background:#292a2e;
  height:3px
}
.class-showcase__stat b {
  background:linear-gradient(90deg,#835b18,#f4c24e);
  height:100%;
  display:block;
  box-shadow:0 0 9px #e7ae318c
}
.class-showcase__stat em {
  color:#d8ac4b;
  text-align:right;
  font-style:normal;
  font-weight:800
}
.class-showcase__selector {
  z-index:3;
  background:linear-gradient(#101114,#090a0c);
  border-top:1px solid #cc9e3a3d;
  position:relative
}
.class-showcase__rail {
  scrollbar-width:none;
  gap:7px;
  padding:18px 22px 16px;
  display:flex;
  overflow-x:auto
}
.class-showcase__rail::-webkit-scrollbar {
  display:none
}
.class-showcase__stage-nav {
  z-index:4;
  pointer-events:none;
  position:absolute;
  inset:0
}
.class-showcase__stage-nav button {
  color:#e5b648d1;
  cursor:pointer;
  pointer-events:auto;
  text-shadow:0 1px 8px #000;
  background:0 0;
  border:0;
  place-items:center;
  width:56px;
  padding:0;
  font-family:Georgia,serif;
  font-size:2rem;
  line-height:1;
  transition:width .22s,color .2s,background .22s;
  display:grid;
  position:absolute;
  top:0;
  bottom:0
}
.class-showcase__stage-nav button:first-child {
  background:linear-gradient(90deg,#030406b8,#0304064d 56%,#0000);
  border-right:1px solid #d5a63f1f;
  left:0
}
.class-showcase__stage-nav button:last-child {
  background:linear-gradient(270deg,#030406b8,#0304064d 56%,#0000);
  border-left:1px solid #d5a63f1f;
  right:0
}
.class-showcase__stage-nav button:hover {
  color:#ffe29a;
  width:66px
}
.class-showcase__stage-nav button:first-child:hover {
  background:linear-gradient(90deg,#050608e6,#1e15087a 58%,#0000)
}
.class-showcase__stage-nav button:last-child:hover {
  background:linear-gradient(270deg,#050608e6,#1e15087a 58%,#0000)
}
.class-showcase__stage-nav button:active {
  color:#fff0bd
}
.class-showcase__stage-nav button:focus-visible {
  outline-offset:-3px;
  outline:1px solid #f0c76cbf
}
.class-showcase__choice {
  color:#797b82;
  cursor:pointer;
  background:0 0;
  border:0;
  min-width:104px;
  padding:0 4px
}
.class-showcase__choice>span {
  background:#111217;
  border:1px solid #393a40;
  border-radius:50%;
  width:68px;
  height:68px;
  margin:auto;
  transition:all .2s;
  display:block;
  overflow:hidden
}
.class-showcase__choice img {
  object-fit:cover;
  width:100%;
  height:100%
}
.class-showcase__choice strong {
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:8px;
  font-size:.64rem;
  display:block;
  overflow:hidden
}
.class-showcase__choice:hover>span,.class-showcase__choice.is-active>span {
  border-color:#e0ad3e;
  transform:translateY(-3px);
  box-shadow:0 0 0 3px #18130b,0 0 22px #dc9e1f8c
}
.class-showcase__choice.is-active {
  color:#edc563
}
.class-showcase__stage-nav button:first-child {
  border-right:0
}
.class-showcase__stage-nav button:last-child {
  border-left:0
}
@keyframes class-art-in {
  0% {
    opacity:.35;
    transform:scale(1.025)
  }
to {
    opacity:1;
    transform:scale(1)
  }

}
@media (max-width:820px) {
  .class-showcase__heading {
    padding:26px 24px
  }
.class-showcase__stage,.class-showcase__content {
    min-height:560px
  }
.class-showcase__art {
    object-position:68% center
  }
.class-showcase__shade {
    background:linear-gradient(90deg,#050608f5,#050608bf 62%,#05060840)
  }
.class-showcase__content {
    width:72%;
    padding:30px 28px
  }
.class-showcase__content h3 {
    font-size:2.35rem
  }

}
@media (max-width:520px) {
  .class-showcase__heading h2 {
    font-size:1.75rem
  }
.class-showcase__heading p {
    font-size:.78rem
  }
.class-showcase__stage,.class-showcase__content {
    min-height:600px
  }
.class-showcase__art {
    object-position:70% center
  }
.class-showcase__shade {
    background:linear-gradient(0deg,#050608fa 0,#050608de 55%,#05060838)
  }
.class-showcase__content {
    justify-content:flex-end;
    width:100%;
    padding:30px 42px
  }
.class-showcase__content h3 {
    font-size:2rem
  }
.class-showcase__content>p {
    font-size:.82rem;
    line-height:1.55
  }
.class-showcase__stat {
    grid-template-columns:98px 1fr 26px;
    gap:8px
  }
.class-showcase__rail {
    padding-inline:12px
  }
.class-showcase__stage-nav button {
    width:36px;
    font-size:1.65rem
  }
.class-showcase__stage-nav button:hover {
    width:42px
  }
.class-showcase__choice {
    min-width:88px
  }
.class-showcase__choice>span {
    width:58px;
    height:58px
  }

}
.journey-home-banner {
  isolation:isolate;
  width:100%;
  margin:0 0 14px;
  position:relative;
  overflow:hidden
}
.journey-home-banner img {
  aspect-ratio:3;
  object-fit:cover;
  width:100%;
  height:auto;
  display:block
}
.journey-home-banner__feathers {
  z-index:2;
  pointer-events:none;
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  inset:0;
  overflow:hidden
}
.journey-home-banner__feather {
  opacity:0;
  filter:drop-shadow(0 0 3px #fff9)drop-shadow(0 0 5px #9a70ff70);
  transform-origin:50% 15%;
  width:10px;
  height:38px;
  animation-name:journey-feather-fall;
  animation-duration:8s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-delay:0s;
  display:block;
  position:absolute;
  top:-12%;
  left:0;
  overflow:visible
}
.journey-home-banner__feather svg {
  width:10px;
  height:38px;
  display:block;
  overflow:visible
}
.journey-home-banner__feather:first-child {
  animation-duration:7.4s;
  animation-delay:-1s;
  left:5%
}
.journey-home-banner__feather:nth-child(2) {
  animation-duration:8.8s;
  animation-delay:-5.2s;
  left:10%
}
.journey-home-banner__feather:nth-child(3) {
  animation-duration:6.9s;
  animation-delay:-3.1s;
  left:15%
}
.journey-home-banner__feather:nth-child(4) {
  animation-duration:9.6s;
  animation-delay:-7.5s;
  left:19%
}
.journey-home-banner__feather:nth-child(5) {
  animation-duration:7.8s;
  animation-delay:-4.4s;
  left:23%
}
.journey-home-banner__feather:nth-child(6) {
  animation-duration:10.2s;
  animation-delay:-2.2s;
  left:28%
}
.journey-home-banner__feather:nth-child(7) {
  animation-duration:8.1s;
  animation-delay:-6.6s;
  left:32%
}
.journey-home-banner__feather:nth-child(8) {
  animation-duration:9.1s;
  animation-delay:-.3s;
  left:36%
}
.journey-home-banner__feather:nth-child(9) {
  animation-duration:11s;
  animation-delay:-8.8s;
  left:12%
}
.journey-home-banner__feather:nth-child(10) {
  animation-duration:7.1s;
  animation-delay:-5.9s;
  left:26%
}
@keyframes journey-feather-fall {
  0% {
    opacity:0;
    top:-12%;
    transform:translate(0)rotate(-25deg)
  }
8% {
    opacity:.9
  }
35% {
    top:32%;
    transform:translate(28px)rotate(65deg)
  }
67% {
    top:68%;
    transform:translate(-18px)rotate(150deg)
  }
92% {
    opacity:.75
  }
to {
    opacity:0;
    top:110%;
    transform:translate(22px)rotate(235deg)
  }

}
@media (prefers-reduced-motion:reduce) {
  .journey-home-banner__feathers {
    display:none
  }

}
@media (max-width:700px) {
  .journey-home-banner {
    margin-bottom:10px
  }

}
:root {
  --asset-revision:202608000000;
  --background:#0c0c0d;
  --foreground:#efeff0;
  --surface-01:#18181b;
  --surface-02:#232326;
  --surface-03:#2c2c30;
  --brand:#c9a860;
  --brand-strong:#e4c989;
  --brand-dark:#9a7838;
  --brand-muted:#c9a8601f;
  --online:#e4c989;
  --offline:#76767e;
  --parchment:#e2dccb;
  --parchment-dark:#c8c0ad;
  --muted:#9d9da4;
  --border:#efeff014;
  --locale-bar-height:2.25rem;
  --header-height:5rem;
  --top-chrome-height:calc(var(--locale-bar-height) + var(--header-height))
}
body {
  background-color:var(--background);
  color:var(--foreground);
  min-height:100vh;
  font-family:var(--font-work-sans), Arial, sans-serif;
  text-rendering:optimizelegibility
}
@media (min-width:1001px) {
  .journey-tree__path {
    left:62px
  }
.journey-node__level {
    z-index:6;
    white-space:nowrap;
    text-shadow:0 1px 3px #000,0 0 3px #000;
    background:0 0;
    margin:0;
    padding:0;
    line-height:1;
    position:absolute;
    top:calc(50% - 18px);
    left:105px;
    transform:none
  }
.journey-character-bar {
    grid-template-columns:220px 489px;
    width:743px
  }
.journey-character-list {
    grid-auto-columns:44px;
    grid-auto-flow:column;
    gap:5px;
    width:489px;
    min-width:489px;
    display:grid;
    overflow:visible
  }
.journey-character-list button {
    width:44px;
    min-width:44px;
    height:44px
  }
.journey-node__level {
    top:calc(50% - 18px);
    transform:none
  }
.journey-insignia__lock {
    filter:drop-shadow(0 2px 3px #000);
    background-image:url(../image/padlock-v5.png);
    width:44px;
    height:44px
  }
.journey-reward__lock {
    filter:drop-shadow(0 1px 2px #000);
    background-image:url(../image/padlock-v5.png);
    width:22px;
    height:22px;
    bottom:3px;
    right:-1px
  }

}
a[href],button,select,label[for],[role=button],[role=link],[onclick],input[type=button],input[type=submit],input[type=reset],input[type=checkbox],input[type=radio],summary {
  cursor:pointer!important
}
.site-main {
  background-color:#000;
  background-image:url(../image/site-background-v2.png);
  background-position:top;
  background-repeat:no-repeat;
  background-size:max(100vw,1180px)
}
.site-main:has(>.page-background-anchor) {
  background-image:none
}
.page-background-anchor {
  z-index:0;
  pointer-events:none;
  height:0;
  position:relative
}
.page-background-anchor:before {
  z-index:0;
  content:"";
  background-color:#000;
  background-image:url(../image/site-background-v2.png);
  background-position:top;
  background-repeat:no-repeat;
  background-size:max(100vw,1180px);
  min-height:max(941px,56.28vw);
  position:absolute;
  top:0;
  left:0;
  right:0
}
.home-continuous-bg {
  --home-card-radius:.7rem;
  isolation:isolate;
  background-color:#000;
  background-image:url(../image/site-background-v2.png);
  background-position:top;
  background-repeat:no-repeat;
  background-size:max(100vw,1180px);
  position:relative
}
.home-continuous-bg :is(.news-carousel,.events-card,.castle-spotlight,.badge-hall,.badge-hall__card,.rankings-section__block,.ranking-table,.class-showcase,.card,details) {
  border-radius:var(--home-card-radius)
}
.home-continuous-bg :is(.rankings-section__block,.ranking-table,.class-showcase,.badge-hall,.badge-hall__card,details) {
  overflow:hidden
}
.site-main .section-block:after,.site-main .section-block__bg,.site-main .section-block__overlay {
  display:none
}
html {
  scrollbar-width:auto;
  scrollbar-color:#c9a860 #141210;
  --lightningcss-light:;
  --lightningcss-dark:initial;
  color-scheme:dark;
  background-color:#0c0c0d;
  overflow-x:hidden
}
* {
  scrollbar-width:thin;
  scrollbar-color:#b8924a #141210
}
::-webkit-scrollbar {
  width:14px;
  height:14px
}
::-webkit-scrollbar-track {
  background:linear-gradient(90deg,#c9a86024 0 1px,#0000 1px calc(100% - 1px),#c9a86024 calc(100% - 1px)),linear-gradient(#1a1712 0%,#100e0c 48%,#1a1712 100%);
  border-left:1px solid #c9a86038;
  border-right:1px solid #3c301ca6;
  box-shadow:inset 0 0 10px #000000b8,inset 0 0 1px #e4c9892e
}
::-webkit-scrollbar-thumb {
  background-color:#0000;
  background-image:linear-gradient(90deg,#5038128c 0%,#0000 18% 82%,#50381273 100%),linear-gradient(#f3e0b0 0%,#e4c989 12%,#c9a860 38%,#9a7838 62%,#c9a860 82%,#e8d09a 100%);
  background-position:0 0,0 0;
  background-repeat:repeat,repeat;
  background-size:auto,auto;
  background-attachment:scroll,scroll;
  background-origin:padding-box,padding-box;
  background-clip:padding-box;
  border:2px solid #0000;
  border-radius:999px;
  min-width:42px;
  min-height:42px;
  box-shadow:inset 0 1px #fff8dc8c,inset 0 -1px #4630108c,inset 1px 0 #ffecbe40,inset -1px 0 #3c280c59,0 0 0 1px #5a4018bf,0 0 12px #c9a86047
}
::-webkit-scrollbar-thumb:hover {
  background-color:#0000;
  background-image:linear-gradient(90deg,#5a401859 0%,#0000 18% 82%,#5a40184d 100%),linear-gradient(#fff1c8 0%,#f0d9a0 14%,#e4c989 40%,#c9a860 68%,#e4c989 100%);
  background-position:0 0,0 0;
  background-repeat:repeat,repeat;
  background-size:auto,auto;
  background-attachment:scroll,scroll;
  background-origin:padding-box,padding-box;
  background-clip:padding-box;
  box-shadow:inset 0 1px #fffcebb3,inset 0 -1px #5a401866,0 0 0 1px #785820e6,0 0 16px #e4c98973
}
::-webkit-scrollbar-thumb:active {
  background:linear-gradient(#e4c989 0%,#c9a860 45%,#8a6a2a 100%) padding-box padding-box;
  box-shadow:inset 0 2px 4px #00000059,0 0 0 1px #5a4018d9,0 0 10px #c9a8604d
}
::-webkit-scrollbar-corner {
  background:linear-gradient(135deg,#1a1712,#100e0c);
  border:1px solid #c9a86033
}
::-webkit-scrollbar-button {
  width:0;
  height:0;
  display:none
}
::-webkit-scrollbar-track:horizontal {
  background:linear-gradient(#c9a86024 0 1px,#0000 1px calc(100% - 1px),#c9a86024 calc(100% - 1px)),linear-gradient(90deg,#1a1712 0%,#100e0c 48%,#1a1712 100%);
  border:none;
  border-top:1px solid #c9a86038;
  border-bottom:1px solid #3c301ca6
}
.locale-bar {
  z-index:110;
  height:var(--locale-bar-height);
  border-bottom:1px solid var(--border);
  -webkit-backdrop-filter:blur(10px);
  background:#08080af5;
  position:fixed;
  top:0;
  left:0;
  right:0
}
.locale-bar__inner {
  justify-content:flex-end;
  align-items:center;
  gap:.65rem;
  height:100%;
  display:flex
}
.locale-bar__flags {
  align-items:center;
  gap:.35rem;
  display:flex
}
.locale-bar__flag {
  background:#ffffff0a;
  border:1px solid #0000;
  border-radius:.25rem;
  justify-content:center;
  align-items:center;
  width:2rem;
  height:1.55rem;
  transition:border-color .15s,background .15s,transform .15s;
  display:inline-flex
}
.locale-bar__flag:hover:not(:disabled) {
  background:#c9a86014;
  border-color:#c9a86059
}
.locale-bar__flag--active {
  background:#c9a8601f;
  border-color:#c9a8608c;
  box-shadow:0 0 12px #c9a86026
}
.locale-bar__flag:disabled {
  opacity:.6;
  cursor:wait
}
.locale-bar__icon {
  border-radius:.12rem;
  width:1.35rem;
  height:auto;
  display:block;
  box-shadow:0 0 0 1px #ffffff14
}
.site-header {
  top:var(--locale-bar-height);
  z-index:1000;
  height:var(--header-height);
  border-bottom:1px solid var(--border);
  -webkit-backdrop-filter:blur(12px);
  background:#0c0c0de0;
  position:fixed;
  left:0;
  right:0;
  overflow:hidden;
  box-shadow:0 8px 24px #00000059
}
.site-header--scrolled {
  background:#0c0c0df5;
  box-shadow:0 12px 32px #00000073
}
.site-header__bar {
  white-space:nowrap;
  justify-content:space-between;
  align-items:center;
  height:100%;
  display:flex
}
.site-header__logo {
  flex:1;
  justify-content:center;
  align-items:center;
  min-width:0;
  padding-inline:1rem;
  display:flex
}
.site-header__logo img {
  object-fit:contain;
  width:2.75rem;
  max-width:2.75rem;
  height:2.75rem;
  max-height:2.75rem
}
@media (min-width:768px) {
  .site-header__logo {
    border-right:1px solid var(--border);
    background:#0003;
    flex:none;
    justify-content:flex-start
  }

}
.site-header__nav {
  flex:1;
  justify-content:center;
  align-items:center;
  gap:.25rem;
  display:none
}
@media (min-width:768px) {
  .site-header__nav {
    display:flex
  }

}
.site-header__actions {
  flex-shrink:0;
  align-items:center;
  gap:.75rem;
  padding-inline:.75rem 1rem;
  display:none
}
@media (min-width:768px) {
  .site-header__actions {
    display:flex
  }

}
.site-header__admin {
  border-right:1px solid var(--border);
  align-items:center;
  gap:.3rem;
  margin-right:.15rem;
  padding-right:.55rem;
  display:none
}
@media (min-width:1100px) {
  .site-header__admin {
    display:flex
  }

}
.site-header__admin-link {
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
  padding:.15rem .3rem;
  font-size:.65rem
}
.site-header__user-cluster {
  align-items:center;
  gap:.45rem;
  display:flex
}
.site-header__user-cluster .header-user {
  align-items:flex-start;
  min-width:0
}
.site-header__user-cluster .header-user__row--top {
  justify-content:flex-start;
  width:auto
}
.site-header__user-cluster .header-user__wallet {
  width:auto;
  transform:none
}
@media (min-width:1280px) {
  .site-header__actions {
    margin-left:-3.5rem
  }

}
.site-header__admin-link:hover {
  color:var(--brand-strong)
}
.site-header__mobile-btn {
  width:4rem;
  height:100%;
  color:var(--muted);
  place-items:center;
  display:grid
}
@media (min-width:768px) {
  .site-header__mobile-btn {
    display:none
  }

}
.site-header__mobile-btn--left {
  border-right:1px solid var(--border)
}
.site-header__mobile-btn--right {
  border-left:1px solid var(--border)
}
.site-header__link {
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#d4d4d8;
  border-radius:.25rem;
  padding:.5rem 1rem;
  font-size:.875rem;
  font-weight:500;
  transition:background-color .15s,color .15s
}
.site-header__link:hover {
  color:#fff;
  background:#ffffff0d
}
.site-header__link--active {
  color:var(--brand);
  background:#c9a86026
}
.header-user {
  flex-direction:column;
  align-items:flex-end;
  gap:.22rem;
  min-width:16rem;
  line-height:1.15;
  display:flex
}
.header-user__row {
  justify-content:flex-end;
  align-items:center;
  gap:.55rem;
  width:100%;
  display:flex
}
.header-user__row--top {
  color:#a1a1aa;
  gap:.65rem;
  font-size:.72rem
}
.header-user__welcome strong {
  color:#e4e4e7;
  font-weight:600
}
.header-user__link {
  color:#a1a1aa;
  text-decoration:none
}
.header-user__link:hover {
  color:var(--brand-strong)
}
.header-user__logout-form {
  margin:0;
  display:inline-flex
}
.header-user__logout {
  color:#a1a1aa;
  cursor:pointer;
  background:0 0;
  border:0;
  border-radius:999px;
  place-items:center;
  width:1.75rem;
  height:1.75rem;
  padding:.35rem;
  display:inline-grid
}
.header-user__logout:hover {
  color:#fca5a5;
  background:#ef44441f
}
.header-user__row--coins {
  color:#d4d4d8;
  gap:.45rem;
  font-size:.72rem
}
.header-user__coin-label {
  letter-spacing:.02em
}
.header-user__coin-value {
  color:#fecaca;
  letter-spacing:.02em;
  background:linear-gradient(#7f1d1d 0%,#450a0a 100%);
  border:1px solid #7f1d1dbf;
  justify-content:center;
  align-items:center;
  min-width:3.4rem;
  padding:.12rem .55rem .14rem;
  font-size:.7rem;
  font-weight:700;
  display:inline-flex;
  transform:skew(-12deg);
  box-shadow:inset 0 1px #ffffff14
}
.header-user__coin-value>span {
  transform:skew(12deg)
}
.header-user__row--status {
  color:#a1a1aa;
  gap:.7rem;
  font-size:.68rem
}
.header-user__free {
  color:#f59e0b;
  font-weight:600
}
.header-user__vip {
  color:var(--brand-strong);
  font-weight:600
}
.header-user__date {
  color:#a1a1aa;
  font-variant-numeric:tabular-nums
}
.header-user--mobile {
  border:1px solid var(--border);
  background:#00000047;
  border-radius:.4rem;
  width:100%;
  margin-bottom:.35rem;
  padding:.85rem .9rem
}
.header-user--mobile .header-user {
  align-items:flex-start;
  width:100%;
  min-width:0
}
.header-user--mobile .header-user__row {
  justify-content:flex-start
}
.site-music {
  z-index:90;
  position:fixed;
  bottom:1rem;
  right:1rem
}
.site-music__panel {
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  background:#0c0c0deb;
  border:1px solid #c9a86059;
  border-radius:999px;
  align-items:center;
  gap:.65rem;
  padding:.45rem .55rem .45rem .45rem;
  display:flex;
  box-shadow:0 10px 30px #00000073
}
.site-music--playing .site-music__panel {
  background:#18181bf5;
  border-color:#c9a860bf
}
.site-music-toggle {
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
  background:0 0;
  border:none;
  border-radius:999px;
  align-items:center;
  gap:.5rem;
  padding:.35rem .75rem;
  font-size:.75rem;
  font-weight:600;
  transition:color .2s,background .2s;
  display:inline-flex
}
.site-music-toggle:hover {
  color:var(--brand-strong)
}
.site-music-toggle--on {
  color:var(--brand)
}
.site-music__volume {
  border-left:1px solid #c9a86033;
  align-items:center;
  gap:.45rem;
  padding-left:.65rem;
  padding-right:.55rem;
  display:flex
}
.site-music__volume-icon {
  width:.95rem;
  height:.95rem;
  color:var(--muted);
  place-items:center;
  display:grid
}
.site-music__volume-icon svg {
  width:100%;
  height:100%
}
.site-music__slider {
  appearance:none;
  background:linear-gradient(to right, var(--brand) 0%, var(--brand) var(--volume-percent,40%), #ffffff1f var(--volume-percent,40%), #ffffff1f 100%);
  cursor:pointer;
  border-radius:999px;
  width:6.5rem;
  height:.25rem
}
.site-music__slider::-webkit-slider-thumb {
  appearance:none;
  border:2px solid var(--brand-strong);
  background:#18181b;
  border-radius:50%;
  width:.85rem;
  height:.85rem;
  box-shadow:0 0 0 2px #c9a86026
}
.site-music__slider::-moz-range-thumb {
  border:2px solid var(--brand-strong);
  background:#18181b;
  border-radius:50%;
  width:.85rem;
  height:.85rem;
  box-shadow:0 0 0 2px #c9a86026
}
.site-music__volume-value {
  letter-spacing:.04em;
  min-width:2rem;
  color:var(--muted);
  font-size:.68rem;
  font-weight:600
}
.site-music-toggle__icon {
  place-items:center;
  width:1.15rem;
  height:1.15rem;
  display:grid
}
.site-music-toggle__icon svg {
  width:100%;
  height:100%
}
@media (max-width:767px) {
  .site-music {
    bottom:.75rem;
    right:.75rem
  }
.site-music__panel {
    border-radius:1rem;
    flex-direction:column;
    align-items:stretch;
    gap:.45rem;
    padding:.55rem
  }
.site-music-toggle {
    justify-content:center;
    padding:.45rem .75rem
  }
.site-music-toggle__label {
    display:none
  }
.site-music__volume {
    border-top:1px solid #c9a86033;
    border-left:none;
    padding:.55rem .35rem .15rem
  }
.site-music__slider {
    flex:1;
    width:auto;
    min-width:0
  }

}
.page-with-header {
  padding-top:var(--top-chrome-height)
}
.section-block {
  isolation:isolate;
  --section-hero-height:min(100svh, 920px);
  content-visibility:auto;
  contain-intrinsic-size:auto 720px;
  background-color:#0000;
  position:relative;
  overflow:visible
}
.section-block__bg,.section-block__overlay {
  pointer-events:none;
  position:absolute;
  left:0;
  right:0
}
.section-block:after {
  content:"";
  left:0;
  right:0;
  top:var(--section-hero-height);
  z-index:1;
  background:var(--background);
  pointer-events:none;
  position:absolute;
  bottom:0
}
.section-block__bg {
  height:var(--section-hero-height);
  z-index:0;
  background-position:top;
  background-repeat:no-repeat;
  background-size:cover;
  top:0
}
.section-block__overlay {
  height:var(--section-hero-height);
  z-index:1;
  top:0
}
.section-block__content {
  z-index:2;
  position:relative
}
.section-block--knight .section-block__bg {
  opacity:.62;
  background-image:url(../image/section-knight.png);
  background-position:50% 35%
}
.section-block--knight .section-block__overlay {
  background:radial-gradient(circle at 18% 40%, #c9a86024, transparent 38%), linear-gradient(180deg, #0c0c0d47 0%, #0c0c0dd1 78%, var(--background) 100%)
}
.section-block--characters .section-block__bg {
  opacity:.58;
  background-image:url(../image/section-characters.jpg);
  background-position:50% 45%
}
.section-block--characters .section-block__overlay {
  background:radial-gradient(circle at 50% 20%, #c9a8601a, transparent 45%), linear-gradient(180deg, #0c0c0d59 0%, #0c0c0ddb 78%, var(--background) 100%)
}
.section-block--castle .section-block__bg {
  opacity:.55;
  background-image:url(../image/section-castle-v2.png);
  background-position:50% 40%
}
.section-block--castle .section-block__overlay {
  background:radial-gradient(circle at 72% 35%, #c9a8601f, transparent 42%), linear-gradient(180deg, #0c0c0d52 0%, #0c0c0dd6 78%, var(--background) 100%)
}
.section-block--panel .section-block__bg {
  opacity:.5;
  background-image:url(../image/section-panel.jpg);
  background-position:top
}
.section-block--panel .section-block__overlay {
  background:radial-gradient(circle at 50% 0%, #c9a86014, transparent 40%), linear-gradient(180deg, #0c0c0d73 0%, #0c0c0de6 78%, var(--background) 100%)
}
.section-block--stone,.section-block--panel,.section-block--dark {
  overflow:hidden
}
.section-block--stone:after,.section-block--panel:after,.section-block--dark:after {
  content:none
}
.section-block--stone .section-block__bg,.section-block--stone .section-block__overlay,.section-block--dark .section-block__bg,.section-block--dark .section-block__overlay {
  height:auto;
  top:0;
  bottom:0
}
.section-block--panel .section-block__bg,.section-block--panel .section-block__overlay {
  background-position:top;
  background-repeat:no-repeat;
  background-size:cover;
  height:min(70vh,640px);
  top:0;
  bottom:auto
}
.section-block--stone {
  min-height:12rem
}
.section-block--stone .section-block__bg {
  opacity:.42;
  background-image:url(../image/section-stone.jpg);
  background-position:50%;
  background-size:cover
}
.section-block--stone .section-block__overlay {
  background:linear-gradient(180deg, #0c0c0d80 0%, #0c0c0deb 78%, var(--background) 100%)
}
.section-block--dark .section-block__overlay {
  background:linear-gradient(#101012 0%,#0c0c0d 100%)
}
a {
  text-decoration:none
}
input,button {
  font:inherit
}
.font-display {
  font-family:var(--font-platypi), Georgia, serif
}
.page-shell {
  width:100%;
  max-width:1200px;
  padding-inline:calc(var(--spacing) * 4);
  margin-inline:auto
}
.editor-page {
  width:100%;
  max-width:min(1420px,100%);
  margin-inline:auto;
  padding-inline:1rem
}
@media (min-width:768px) {
  .editor-page {
    padding-inline:1.25rem
  }

}
.content-section {
  position:relative
}
.content-section>* {
  z-index:1;
  position:relative
}
.card {
  border-style:var(--tw-border-style);
  border-width:1px;
  border-color:var(--border);
  padding:calc(var(--spacing) * 6);
  --tw-shadow:0 16px 40px var(--tw-shadow-color,#00000059);
  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-backdrop-blur:blur(2px);
  -webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  background-color:#18181bb8;
  border-radius:.25rem
}
.card-parchment {
  border-style:var(--tw-border-style);
  border-width:1px;
  border-color:#0000001a;
  border-radius:.25rem
}
@supports (color:color-mix(in lab, red, red)) {
  .card-parchment {
    border-color:color-mix(in oklab, var(--color-black) 10%, transparent)
  }

}
.card-parchment {
  background-color:var(--parchment);
  color:#1a1814;
  --tw-shadow:0 16px 40px var(--tw-shadow-color,#00000040);
  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}
.input {
  border-style:var(--tw-border-style);
  border-width:1px;
  border-color:#ffffff1a;
  border-radius:.25rem;
  width:100%
}
@supports (color:color-mix(in lab, red, red)) {
  .input {
    border-color:color-mix(in oklab, var(--color-white) 10%, transparent)
  }

}
.input {
  background-color:var(--surface-02);
  padding-inline:calc(var(--spacing) * 4);
  padding-block:calc(var(--spacing) * 3);
  color:var(--color-white);
  transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
  transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
  transition-duration:var(--tw-duration,var(--default-transition-duration));
  --tw-outline-style:none;
  outline-style:none
}
.input:focus {
  border-color:var(--brand)
}
@supports (color:color-mix(in lab, red, red)) {
  .input:focus {
    border-color:color-mix(in oklab, var(--brand) 50%, transparent)
  }

}
.input:focus {
  --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color:var(--brand)
}
@supports (color:color-mix(in lab, red, red)) {
  .input:focus {
    --tw-ring-color:color-mix(in oklab, var(--brand) 20%, transparent)
  }

}
.input--valid {
  border-color:#00bb7f66
}
@supports (color:color-mix(in lab, red, red)) {
  .input--valid {
    border-color:color-mix(in oklab, var(--color-emerald-500) 40%, transparent)
  }

}
.input--valid:focus {
  border-color:#00bb7f80
}
@supports (color:color-mix(in lab, red, red)) {
  .input--valid:focus {
    border-color:color-mix(in oklab, var(--color-emerald-500) 50%, transparent)
  }

}
.input--valid:focus {
  --tw-ring-color:#00bb7f33
}
@supports (color:color-mix(in lab, red, red)) {
  .input--valid:focus {
    --tw-ring-color:color-mix(in oklab, var(--color-emerald-500) 20%, transparent)
  }

}
.input--invalid {
  border-color:#fb2c3666
}
@supports (color:color-mix(in lab, red, red)) {
  .input--invalid {
    border-color:color-mix(in oklab, var(--color-red-500) 40%, transparent)
  }

}
.input--invalid:focus {
  border-color:#fb2c3680
}
@supports (color:color-mix(in lab, red, red)) {
  .input--invalid:focus {
    border-color:color-mix(in oklab, var(--color-red-500) 50%, transparent)
  }

}
.input--invalid:focus {
  --tw-ring-color:#fb2c3633
}
@supports (color:color-mix(in lab, red, red)) {
  .input--invalid:focus {
    --tw-ring-color:color-mix(in oklab, var(--color-red-500) 20%, transparent)
  }

}
.btn-primary,.btn-secondary,.btn-subtle,.btn-light {
  text-transform:uppercase;
  letter-spacing:.04em;
  cursor:pointer;
  border-radius:.25rem;
  justify-content:center;
  align-items:center;
  font-size:.875rem;
  font-weight:600;
  line-height:1.25rem;
  text-decoration:none;
  transition:background-color .2s,border-color .2s,color .2s;
  display:inline-flex
}
.btn-primary {
  background-color:var(--brand);
  color:#120d04;
  border:1px solid #0000;
  padding:.75rem 1.25rem
}
.btn-primary:hover {
  background-color:var(--brand-strong)
}
.btn-primary:disabled {
  opacity:.6;
  cursor:not-allowed
}
.btn-secondary {
  background-color:var(--brand-muted);
  color:var(--brand);
  border:1px solid #c9a86059;
  padding:.75rem 1.25rem
}
.btn-secondary:hover {
  background-color:#c9a86033;
  border-color:#c9a86099
}
.download-page {
  gap:1.5rem;
  display:grid
}
.download-lead {
  max-width:48rem;
  margin-bottom:.5rem
}
.download-eyebrow,.download-client-card__label {
  color:var(--brand);
  letter-spacing:.2em;
  text-transform:uppercase;
  margin:0 0 .45rem;
  font-size:.72rem;
  font-weight:800
}
.download-lead h2 {
  color:#fff;
  font-family:var(--font-platypi), Georgia, serif;
  margin:0;
  font-size:clamp(1.8rem,4vw,2.75rem);
  line-height:1.12
}
.download-lead>p:last-child {
  color:#b8b8bf;
  max-width:42rem;
  margin:.85rem 0 0;
  line-height:1.7
}
.download-client-card {
  background:linear-gradient(115deg,#c9a86017,#0000 42%),#0f0f11e6;
  border:1px solid #c9a86052;
  border-radius:.4rem;
  grid-template-columns:12rem minmax(0,1fr);
  display:grid;
  position:relative;
  overflow:hidden;
  box-shadow:0 24px 60px #0000006b
}
.download-client-card:before {
  content:"";
  background:linear-gradient(90deg, transparent, var(--brand), transparent);
  height:1px;
  position:absolute;
  inset:0 0 auto
}
.download-client-card__art {
  background:linear-gradient(#0000 62%,#070709b8),url(../image/download-client-elf.png) 50% 25%/cover;
  border-right:1px solid #c9a86033;
  min-height:18rem
}
.download-client-card__content {
  padding:clamp(1.4rem,3vw,2.25rem)
}
.download-client-card__heading {
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  display:flex
}
.download-client-card__heading h3,.download-panel h3 {
  color:#fff;
  font-family:var(--font-platypi), Georgia, serif;
  margin:0;
  font-size:1.4rem
}
.download-client-card__status {
  color:#86efac;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:#22c55e17;
  border:1px solid #4ade8047;
  border-radius:999px;
  flex:none;
  padding:.35rem .7rem;
  font-size:.68rem;
  font-weight:800
}
.download-client-card__body {
  color:#aaaab1;
  margin:.85rem 0 1.35rem;
  line-height:1.65
}
.download-client-meta {
  border-block:1px solid #ffffff14;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;
  display:grid
}
.download-client-meta>div {
  border-right:1px solid #ffffff14;
  padding:1rem
}
.download-client-meta>div:first-child {
  padding-left:0
}
.download-client-meta>div:last-child {
  border-right:0
}
.download-client-meta dt {
  color:#777780;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.66rem;
  font-weight:700
}
.download-client-meta dd {
  color:#e5e5e8;
  margin:.35rem 0 0;
  font-size:.88rem;
  font-weight:700
}
.download-client-card__actions {
  flex-wrap:wrap;
  align-items:stretch;
  gap:.8rem;
  margin-top:1.5rem;
  display:flex
}
.download-main-button {
  box-sizing:border-box;
  color:#ead09a;
  background:linear-gradient(#1f1e1cfa,#0d0d0dfa);
  border:1px solid #c49d53d1;
  border-radius:.3rem;
  grid-template-columns:2rem minmax(0,1fr) auto;
  align-items:center;
  gap:.95rem;
  width:100%;
  min-width:0;
  min-height:5rem;
  padding:.85rem 1rem;
  transition:border-color .18s,filter .18s,transform .18s;
  display:grid;
  box-shadow:inset 0 1px #ffe5a914,0 8px 20px #0000004d
}
.download-main-button:hover {
  filter:brightness(1.1);
  border-color:#e2be73;
  transform:translateY(-1px)
}
.download-main-button--disabled {
  cursor:not-allowed;
  color:#aaaab0;
  box-shadow:none;
  background:linear-gradient(#29292c,#151517);
  border-color:#94949a59
}
.download-main-button--disabled:hover {
  filter:none;
  transform:none
}
.download-main-button__icon {
  color:#cda85f;
  justify-content:center;
  align-items:center;
  width:2rem;
  height:2rem;
  font-size:1.75rem;
  line-height:1;
  display:flex
}
.download-main-button__content {
  min-width:0
}
.download-main-button strong,.download-main-button small {
  display:block
}
.download-main-button strong {
  color:#ead09a;
  letter-spacing:.045em;
  text-transform:uppercase;
  font-family:Georgia,Times New Roman,serif;
  font-size:.9rem;
  line-height:1.2
}
.download-main-button small {
  color:#b8b5ae;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:.3rem;
  font-size:.7rem;
  line-height:1.35;
  overflow:hidden
}
.download-main-button__size {
  color:#ddbd7c;
  white-space:nowrap;
  background:#0505056b;
  border:1px solid #c49d537a;
  border-radius:.35rem;
  justify-content:center;
  align-items:center;
  min-width:4.8rem;
  min-height:2.65rem;
  font-family:Georgia,Times New Roman,serif;
  font-size:.9rem;
  font-weight:700;
  display:inline-flex
}
.download-main-button strong {
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:.86rem
}
.download-main-button small {
  opacity:.72;
  margin-top:.1rem;
  font-size:.68rem;
  line-height:1.3
}
.download-info-grid {
  grid-template-columns:.82fr 1.18fr;
  gap:1.5rem;
  display:grid
}
.download-panel {
  border:1px solid var(--border);
  background:#121214d1;
  border-radius:.35rem;
  padding:1.5rem;
  position:relative;
  overflow:hidden
}
.download-panel__number {
  color:#c9a8601c;
  font-family:var(--font-platypi), Georgia, serif;
  margin:0;
  font-size:4rem;
  font-weight:800;
  line-height:1;
  position:absolute;
  top:.45rem;
  right:.8rem
}
.download-steps {
  counter-reset:download-step;
  gap:.75rem;
  margin:1.2rem 0 0;
  padding:0;
  list-style:none;
  display:grid
}
.download-steps li {
  color:#b8b8bf;
  counter-increment:download-step;
  grid-template-columns:1.75rem 1fr;
  align-items:center;
  gap:.7rem;
  font-size:.88rem;
  line-height:1.45;
  display:grid
}
.download-steps li:before {
  width:1.65rem;
  height:1.65rem;
  color:var(--brand);
  content:counter(download-step);
  border:1px solid #c9a86047;
  border-radius:50%;
  place-items:center;
  font-size:.68rem;
  font-weight:800;
  display:grid
}
.download-requirements {
  margin-top:1.2rem;
  font-size:.78rem
}
.download-requirements>div {
  color:#aaaab1;
  border-bottom:1px solid #ffffff0f;
  grid-template-columns:1fr 1fr 1.25fr;
  gap:.75rem;
  padding:.7rem .5rem;
  display:grid
}
.download-requirements__head {
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.64rem;
  font-weight:800;
  color:#777780!important
}
.download-requirements strong {
  color:#e2e2e5
}
.download-notice {
  background:#c9a86012;
  border:1px solid #c9a86038;
  border-radius:.35rem;
  align-items:center;
  gap:1rem;
  padding:1rem 1.25rem;
  display:flex
}
.download-notice__shield {
  color:var(--brand);
  font-size:1.2rem
}
.download-notice strong {
  color:#e8e1d0;
  font-size:.82rem
}
.download-notice p {
  color:#9999a1;
  margin:.2rem 0 0;
  font-size:.76rem;
  line-height:1.45
}
@media (max-width:820px) {
  .download-client-card,.download-info-grid {
    grid-template-columns:1fr
  }
.download-client-card__art {
    background-position:50% 24%;
    border-bottom:1px solid #c9a86033;
    border-right:0;
    min-height:10rem
  }
.download-client-meta {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
.download-client-meta>div,.download-client-meta>div:first-child {
    padding:.85rem
  }
.download-client-meta>div:nth-child(2) {
    border-right:0
  }
.download-client-meta>div:nth-child(-n+2) {
    border-bottom:1px solid #ffffff14
  }

}
@media (max-width:480px) {
  .download-client-card__heading {
    display:grid
  }
.download-client-card__status {
    justify-self:start
  }
.download-main-button,.download-client-card__actions .btn-secondary {
    width:100%
  }
.download-requirements>div {
    grid-template-columns:.8fr 1fr 1.1fr;
    gap:.35rem;
    padding-inline:0;
    font-size:.68rem
  }

}
.btn-subtle {
  color:#fff;
  text-transform:none;
  letter-spacing:normal;
  background-color:#ffffff0f;
  border:1px solid #ffffff1f;
  padding:.5rem 1rem;
  font-weight:500
}
.btn-subtle:hover {
  background-color:#ffffff1f
}
.btn-light {
  color:#5c4318;
  background-color:#c9a8602e;
  border:1px solid #9a783859;
  padding:.75rem 1.25rem
}
.btn-light:hover {
  background-color:#c9a86047
}
button.btn-primary,button.btn-secondary,button.btn-subtle,button.btn-light {
  appearance:none
}
.btn-compact {
  letter-spacing:.03em;
  padding:.42rem .75rem;
  font-size:.72rem;
  line-height:1.1
}
button.btn-compact.btn-subtle {
  padding:.42rem .7rem
}
.section-title {
  font-family:var(--font-platypi), Georgia, serif;
  font-size:var(--text-3xl);
  line-height:var(--tw-leading,var(--text-3xl--line-height));
  --tw-font-weight:var(--font-weight-semibold);
  font-weight:var(--font-weight-semibold);
  --tw-tracking:var(--tracking-tight);
  letter-spacing:var(--tracking-tight)
}
@media (min-width:48rem) {
  .section-title {
    font-size:var(--text-4xl);
    line-height:var(--tw-leading,var(--text-4xl--line-height))
  }

}
.text-glow {
  text-shadow:0 0 4px #c9a86080,0 0 16px #c9a86047
}
.hero-logo {
  text-align:center;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  display:flex;
  position:relative
}
.hero-logo__effects {
  aspect-ratio:1;
  pointer-events:none;
  width:min(42vw,200px);
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%)
}
.hero-logo__aura {
  background:radial-gradient(circle,#e4c98961 0%,#c9a86024 42%,#0000 72%);
  border-radius:50%;
  animation:3.6s ease-in-out infinite hero-logo-aura;
  position:absolute;
  inset:-18%
}
.hero-logo__ring {
  border:1px solid #e4c98938;
  border-radius:50%;
  animation:4.8s ease-in-out infinite hero-logo-ring;
  position:absolute;
  inset:-6%;
  box-shadow:0 0 18px #c9a86047,inset 0 0 24px #c9a86014
}
.hero-logo__flash {
  opacity:0;
  mix-blend-mode:screen;
  background:radial-gradient(circle,#fff4d2f2 0%,#e4c98973 28%,#0000 62%);
  border-radius:50%;
  animation:5.5s ease-in-out infinite hero-logo-flash;
  position:absolute;
  inset:-10%
}
.hero-logo__shine {
  border-radius:50%;
  position:absolute;
  inset:0;
  overflow:hidden
}
.hero-logo__shine:after {
  content:"";
  background:linear-gradient(105deg,#0000 0%,#ffffff0d 35%,#fff8dcd9 50%,#ffffff14 65%,#0000 100%);
  width:42%;
  height:140%;
  animation:4.2s ease-in-out infinite hero-logo-shine;
  position:absolute;
  top:-20%;
  left:-60%;
  transform:skew(-18deg)
}
.hero-logo__spark {
  opacity:0;
  background:#fff8dc;
  border-radius:50%;
  width:4px;
  height:4px;
  position:absolute;
  box-shadow:0 0 10px #ffecb3f2
}
.hero-logo__spark--1 {
  animation:5.5s ease-in-out infinite hero-logo-spark;
  top:18%;
  right:12%
}
.hero-logo__spark--2 {
  animation:5.5s ease-in-out 1.8s infinite hero-logo-spark;
  bottom:24%;
  left:10%
}
.hero-logo__spark--3 {
  animation:5.5s ease-in-out 3.1s infinite hero-logo-spark;
  top:42%;
  left:6%
}
.hero-logo__img {
  z-index:1;
  object-fit:contain;
  width:min(76vw,520px);
  height:auto;
  animation:3.6s ease-in-out infinite hero-logo-glow;
  position:relative
}
.hero-logo__text {
  z-index:1;
  position:relative
}
.hero-logo__title {
  color:#0000;
  text-shadow:none;
  filter:drop-shadow(0 0 14px #c9a86059);
  background:linear-gradient(90deg,#fff 0%,#f5e6c3 45%,#fff 55%,#e4c989 100%) 0 0/220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:5s ease-in-out infinite hero-logo-title-shimmer
}
@keyframes hero-logo-aura {
  0%,to {
    opacity:.45;
    transform:scale(.96)
  }
50% {
    opacity:.95;
    transform:scale(1.08)
  }

}
@keyframes hero-logo-ring {
  0%,to {
    opacity:.35;
    transform:scale(.98)
  }
50% {
    opacity:.85;
    transform:scale(1.03)
  }

}
@keyframes hero-logo-flash {
  0%,86%,to {
    opacity:0;
    transform:scale(.92)
  }
88% {
    opacity:.95;
    transform:scale(1.02)
  }
89% {
    opacity:.15;
    transform:scale(1)
  }
90% {
    opacity:.7;
    transform:scale(1.01)
  }
92% {
    opacity:0;
    transform:scale(1)
  }

}
@keyframes hero-logo-shine {
  0%,72%,to {
    opacity:0;
    transform:translate(-180%)skew(-18deg)
  }
78% {
    opacity:1
  }
88% {
    opacity:0;
    transform:translate(280%)skew(-18deg)
  }

}
@keyframes hero-logo-glow {
  0%,to {
    filter:drop-shadow(0 0 10px #c9a86059)drop-shadow(0 0 24px #c9a8602e)drop-shadow(0 12px 32px #000000bf)
  }
50% {
    filter:drop-shadow(0 0 22px #e4c989d9)drop-shadow(0 0 42px #c9a86073)drop-shadow(0 12px 32px #000000bf)
  }

}
@keyframes hero-logo-spark {
  0%,84%,to {
    opacity:0;
    transform:scale(.4)
  }
88% {
    opacity:1;
    transform:scale(1.4)
  }
92% {
    opacity:0;
    transform:scale(.6)
  }

}
@keyframes hero-logo-title-shimmer {
  0%,to {
    background-position:100%
  }
50% {
    background-position:0%
  }

}
@media (prefers-reduced-motion:reduce) {
  .hero-logo__aura,.hero-logo__ring,.hero-logo__flash,.hero-logo__shine:after,.hero-logo__spark,.hero-logo__img,.hero-logo__title {
    animation:none
  }
.hero-logo__img {
    filter:drop-shadow(0 0 16px #c9a86073)drop-shadow(0 12px 32px #000000bf)
  }
.hero-logo__title {
    color:#fff;
    filter:none;
    text-shadow:0 0 4px #c9a86080,0 0 16px #c9a86047;
    background:0 0
  }

}
.hero-bg {
  background:radial-gradient(circle at 50% 20%,#c9a86029,#0000 35%),linear-gradient(#151517 0%,#0c0c0d 100%)
}
.hero-section {
  background:#0c0c0d;
  position:relative;
  overflow:hidden
}
.hero-video {
  z-index:0;
  object-fit:cover;
  object-position:center center;
  opacity:.88;
  pointer-events:none;
  background-color:#0c0c0d;
  width:100%;
  height:100%;
  position:absolute;
  inset:0
}
.hero-section__content {
  z-index:2;
  text-align:center;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:24rem;
  padding-top:4rem;
  padding-bottom:4rem;
  display:flex;
  position:relative
}
@media (min-width:768px) {
  .hero-section__content {
    min-height:36rem;
    padding-top:5rem;
    padding-bottom:5rem
  }

}
@media (min-width:1280px) {
  .hero-section__content {
    min-height:40rem
  }

}
.hero-bg-layer {
  z-index:0;
  opacity:.9;
  background-image:url(../image/hero-bg.jpg);
  background-position:top;
  background-repeat:no-repeat;
  background-size:cover;
  position:absolute;
  inset:0
}
.hero-bg-layer--compact {
  opacity:.78;
  background-image:none;
  background-position:50% 30%
}
.hero-overlay {
  z-index:1;
  pointer-events:none;
  background:radial-gradient(circle at 50% 18%,#c9a86024,#0000 42%),linear-gradient(#08080933 0%,#080809b8 100%);
  position:absolute;
  inset:0
}
.hero-overlay--compact {
  background:linear-gradient(90deg,#060608e6 0%,#08080ac2 36%,#09090b61 68%,#09090b3d 100%),linear-gradient(#08080933 0%,#0c0c0d8f 100%)
}
.rankings-section__header {
  flex-direction:column;
  gap:1.25rem;
  display:flex
}
@media (min-width:768px) {
  .rankings-section__header {
    flex-direction:row;
    justify-content:space-between;
    align-items:center
  }

}
.rankings-section__block+.rankings-section__block {
  margin-top:0
}
.rankings-section__label {
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brand-strong);
  margin-bottom:1rem;
  font-size:.78rem;
  font-weight:700
}
.rankings-page__intro .char-search {
  max-width:36rem
}
.ranking-table {
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  background:#18181bd1;
  border-radius:.25rem;
  overflow-x:auto;
  box-shadow:0 16px 40px #00000059
}
.ranking-table__grid {
  border-collapse:collapse;
  table-layout:fixed;
  width:100%;
  min-width:max(100%,30rem);
  font-size:.875rem
}
.hero-energy,.hero-sparks {
  z-index:3;
  pointer-events:none;
  position:absolute;
  inset:0;
  overflow:hidden
}
.hero-effects {
  z-index:1;
  pointer-events:none;
  position:absolute;
  inset:0;
  overflow:hidden
}
.hero-smoke-stack {
  mix-blend-mode:screen;
  filter:saturate(1.08);
  width:760px;
  height:560px;
  position:absolute;
  bottom:-105px;
  left:50%;
  transform:translate(-50%)
}
.hero-smoke {
  --smoke-x0:0px;
  --smoke-x1:0px;
  --smoke-x2:0px;
  --smoke-rotation:0deg;
  --smoke-size:420px;
  --smoke-speed:5.8s;
  --smoke-light:.8;
  --smoke-blur:0px;
  width:var(--smoke-size);
  height:470px;
  margin-left:calc(var(--smoke-size) / -2);
  opacity:0;
  will-change:transform, opacity;
  filter:blur(var(--smoke-blur)) brightness(var(--smoke-light));
  animation:hero-smoke-rise var(--smoke-speed) cubic-bezier(.32, .02, .62, 1) infinite;
  background-position:bottom;
  background-repeat:no-repeat;
  background-size:contain;
  position:absolute;
  bottom:0;
  left:50%
}
.hero-smoke--1 {
  --smoke-x0:-70px;
  --smoke-x1:-105px;
  --smoke-x2:-135px;
  --smoke-rotation:-9deg;
  --smoke-size:470px;
  --smoke-speed:6.6s;
  background-image:url(../image/hero-smoke-wisp-01.png);
  animation-delay:-.3s
}
.hero-smoke--2 {
  --smoke-x0:68px;
  --smoke-x1:102px;
  --smoke-x2:145px;
  --smoke-rotation:10deg;
  --smoke-size:455px;
  --smoke-speed:7.1s;
  --smoke-light:.73;
  background-image:url(../image/hero-smoke-wisp-02.png);
  animation-delay:-1.1s
}
.hero-smoke--3 {
  --smoke-x0:-18px;
  --smoke-x1:25px;
  --smoke-x2:75px;
  --smoke-rotation:4deg;
  --smoke-size:420px;
  --smoke-speed:6.2s;
  --smoke-light:.72;
  --smoke-blur:.25px;
  background-image:url(../image/hero-smoke-wisp-03.png);
  animation-delay:-2s
}
.hero-smoke--4 {
  --smoke-x0:30px;
  --smoke-x1:-20px;
  --smoke-x2:-72px;
  --smoke-rotation:-5deg;
  --smoke-size:560px;
  --smoke-speed:7.5s;
  --smoke-light:.7;
  --smoke-blur:.35px;
  background-image:url(../image/hero-smoke-wisp-04.png);
  animation-delay:-2.9s
}
.hero-smoke--5 {
  --smoke-x0:-105px;
  --smoke-x1:-52px;
  --smoke-x2:2px;
  --smoke-rotation:7deg;
  --smoke-size:405px;
  --smoke-speed:5.7s;
  --smoke-light:.76;
  background-image:url(../image/hero-smoke-wisp-01.png);
  animation-delay:-3.7s
}
.hero-smoke--6 {
  --smoke-x0:108px;
  --smoke-x1:48px;
  --smoke-x2:-8px;
  --smoke-rotation:-8deg;
  --smoke-size:415px;
  --smoke-speed:6.9s;
  --smoke-light:.71;
  background-image:url(../image/hero-smoke-wisp-02.png);
  animation-delay:-4.5s
}
.hero-smoke--7 {
  --smoke-x0:-45px;
  --smoke-x1:-10px;
  --smoke-x2:30px;
  --smoke-rotation:3deg;
  --smoke-size:455px;
  --smoke-speed:8.1s;
  --smoke-light:.63;
  --smoke-blur:.7px;
  background-image:url(../image/hero-smoke-wisp-05.png);
  animation-delay:-5.4s
}
.hero-smoke--8 {
  --smoke-x0:55px;
  --smoke-x1:12px;
  --smoke-x2:-35px;
  --smoke-rotation:-3deg;
  --smoke-size:525px;
  --smoke-speed:7.8s;
  --smoke-light:.6;
  --smoke-blur:1.1px;
  background-image:url(../image/hero-smoke-wisp-02.png);
  animation-delay:-6.2s
}
.hero-smoke--9 {
  --smoke-x0:-145px;
  --smoke-x1:-85px;
  --smoke-x2:-28px;
  --smoke-rotation:11deg;
  --smoke-size:365px;
  --smoke-speed:6.4s;
  --smoke-light:.68;
  --smoke-blur:.5px;
  background-image:url(../image/hero-smoke-wisp-03.png);
  animation-delay:-1.8s
}
.hero-smoke--10 {
  --smoke-x0:145px;
  --smoke-x1:82px;
  --smoke-x2:24px;
  --smoke-rotation:-11deg;
  --smoke-size:430px;
  --smoke-speed:7.3s;
  --smoke-light:.65;
  --smoke-blur:.6px;
  background-image:url(../image/hero-smoke-wisp-05.png);
  animation-delay:-5.8s
}
.hero-embers {
  width:min(1120px,94%);
  height:390px;
  position:absolute;
  bottom:0;
  left:50%;
  overflow:hidden;
  transform:translate(-50%)
}
.hero-embers i {
  left:var(--ember-left);
  width:var(--ember-size);
  height:var(--ember-size);
  opacity:0;
  box-shadow:0 0 calc(var(--ember-size) * 2.5) #ff4a0a;
  animation:hero-ember-rise var(--ember-speed) cubic-bezier(.26, .08, .55, 1) var(--ember-delay) infinite;
  background:radial-gradient(circle,#ffd690 0 18%,#ff7a1a 42%,#df2500 72%,#0000 74%);
  border-radius:50%;
  position:absolute;
  bottom:-12px
}
@keyframes hero-smoke-rise {
  0% {
    opacity:0;
    transform:translate(var(--smoke-x0), 70px) rotate(var(--smoke-rotation)) scale(1.06)
  }
12% {
    opacity:.3
  }
36% {
    opacity:.48
  }
67% {
    opacity:.3;
    transform:translate(var(--smoke-x1), -48px) rotate(0deg) scale(.86)
  }
to {
    opacity:0;
    transform:translate(var(--smoke-x2), -190px) rotate(-4deg) scale(.62)
  }

}
@keyframes hero-ember-rise {
  0% {
    opacity:0;
    transform:translateY(12px)scale(.55)
  }
9% {
    opacity:.92
  }
31% {
    transform:translate3d(var(--ember-x1), -110px, 0) scale(1.05)
  }
57% {
    opacity:.76;
    transform:translate3d(var(--ember-x2), -225px, 0) scale(.84)
  }
78% {
    transform:translate3d(var(--ember-x1), -285px, 0) scale(.67)
  }
to {
    opacity:0;
    transform:translate3d(var(--ember-x2), calc(0px - var(--ember-rise)), 0) scale(.35)
  }

}
.hero-effects-canvas {
  z-index:3;
  pointer-events:none;
  opacity:.96;
  width:100%;
  height:100%;
  display:none;
  position:absolute;
  inset:0
}
.hero-lightning-svg {
  z-index:4;
  pointer-events:none;
  mix-blend-mode:screen;
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  overflow:visible
}
.hero-lightning {
  opacity:0;
  filter:url(#hero-lightning-glow);
  animation:8.6s step-end infinite hero-lightning-flash
}
.hero-lightning--2 {
  animation-duration:10.4s;
  animation-delay:-3.1s
}
.hero-lightning--3 {
  animation-duration:12.2s;
  animation-delay:-6.8s
}
.hero-lightning__glow,.hero-lightning__core,.hero-lightning__branch {
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round
}
.hero-lightning__glow {
  stroke:#3693ff66;
  stroke-width:9px
}
.hero-lightning__core {
  stroke:#f4fbff;
  stroke-width:1.35px
}
.hero-lightning__branch {
  stroke:#caebffe0;
  stroke-width:.72px
}
@keyframes hero-lightning-flash {
  0%,3.4%,to {
    opacity:0
  }
.35% {
    opacity:1
  }
.8% {
    opacity:.16
  }
1.15% {
    opacity:.92
  }
1.75% {
    opacity:.08
  }
2.05% {
    opacity:.58
  }
2.65% {
    opacity:0
  }

}
.hero-energy__flare {
  opacity:.62;
  filter:blur(15px);
  mix-blend-mode:screen;
  background:radial-gradient(ellipse at center, #ff571e94, transparent 36%), conic-gradient(from 210deg at 50% 62%, transparent 0 34%, #ff230885 41%, transparent 49% 64%, #c9000073 72%, transparent 81%);
  border-radius:50%;
  width:46%;
  height:92%;
  animation:4.8s ease-in-out infinite hero-energy-pulse;
  position:absolute;
  top:4%
}
.hero-energy__flare--left {
  left:-22%;
  transform:rotate(-8deg)
}
.hero-energy__flare--right {
  animation-delay:-2.4s;
  right:-22%;
  transform:rotate(8deg)scaleX(-1)
}
.hero-energy__sweep {
  opacity:0;
  filter:blur(9px);
  mix-blend-mode:screen;
  background:linear-gradient(90deg,#0000,#ffecb947,#ff3f187a,#0000);
  width:42%;
  height:170%;
  animation:8.5s ease-in-out infinite hero-energy-sweep;
  position:absolute;
  top:-35%;
  left:-18%;
  transform:rotate(16deg)
}
.hero-sparks i {
  --spark-x:50%;
  --spark-size:5px;
  --spark-delay:0s;
  --spark-duration:7s;
  left:var(--spark-x);
  width:var(--spark-size);
  height:calc(var(--spark-size) * 2.8);
  opacity:0;
  animation:hero-spark-rise var(--spark-duration) linear var(--spark-delay) infinite;
  background:linear-gradient(#fff3bf,#ff9a2e 38%,#d81408 72%,#0000);
  border-radius:50%;
  position:absolute;
  bottom:-8%;
  transform:rotate(18deg);
  box-shadow:0 0 9px #ff9a38,0 0 22px #ff1d08e6
}
.hero-sparks i:first-child {
  --spark-x:5%;
  --spark-size:4px;
  --spark-delay:-1s;
  --spark-duration:8.2s
}
.hero-sparks i:nth-child(2) {
  --spark-x:12%;
  --spark-size:7px;
  --spark-delay:-5.2s;
  --spark-duration:9.4s
}
.hero-sparks i:nth-child(3) {
  --spark-x:19%;
  --spark-size:3px;
  --spark-delay:-3.1s;
  --spark-duration:6.8s
}
.hero-sparks i:nth-child(4) {
  --spark-x:27%;
  --spark-size:6px;
  --spark-delay:-7.4s;
  --spark-duration:10.1s
}
.hero-sparks i:nth-child(5) {
  --spark-x:34%;
  --spark-size:4px;
  --spark-delay:-2.4s;
  --spark-duration:7.7s
}
.hero-sparks i:nth-child(6) {
  --spark-x:41%;
  --spark-size:8px;
  --spark-delay:-6.3s;
  --spark-duration:9.8s
}
.hero-sparks i:nth-child(7) {
  --spark-x:47%;
  --spark-size:3px;
  --spark-delay:-.7s;
  --spark-duration:6.4s
}
.hero-sparks i:nth-child(8) {
  --spark-x:53%;
  --spark-size:6px;
  --spark-delay:-4.6s;
  --spark-duration:8.8s
}
.hero-sparks i:nth-child(9) {
  --spark-x:59%;
  --spark-size:4px;
  --spark-delay:-8s;
  --spark-duration:10.6s
}
.hero-sparks i:nth-child(10) {
  --spark-x:65%;
  --spark-size:8px;
  --spark-delay:-2.8s;
  --spark-duration:8.1s
}
.hero-sparks i:nth-child(11) {
  --spark-x:71%;
  --spark-size:3px;
  --spark-delay:-5.7s;
  --spark-duration:7.1s
}
.hero-sparks i:nth-child(12) {
  --spark-x:77%;
  --spark-size:6px;
  --spark-delay:-1.8s;
  --spark-duration:9.1s
}
.hero-sparks i:nth-child(13) {
  --spark-x:83%;
  --spark-size:4px;
  --spark-delay:-6.9s;
  --spark-duration:8.5s
}
.hero-sparks i:nth-child(14) {
  --spark-x:89%;
  --spark-size:8px;
  --spark-delay:-3.7s;
  --spark-duration:10.3s
}
.hero-sparks i:nth-child(15) {
  --spark-x:94%;
  --spark-size:3px;
  --spark-delay:-7.8s;
  --spark-duration:7.4s
}
.hero-sparks i:nth-child(16) {
  --spark-x:98%;
  --spark-size:6px;
  --spark-delay:-4.1s;
  --spark-duration:9.7s
}
@keyframes hero-energy-pulse {
  0%,to {
    opacity:.38;
    filter:blur(21px)saturate()
  }
48% {
    opacity:.78;
    filter:blur(12px)saturate(1.65)
  }

}
@keyframes hero-energy-sweep {
  0%,18% {
    opacity:0;
    left:-28%
  }
28% {
    opacity:.7
  }
52% {
    opacity:0;
    left:105%
  }
to {
    opacity:0;
    left:105%
  }

}
@keyframes hero-spark-rise {
  0% {
    opacity:0;
    transform:translate(0)rotate(18deg)scale(.55)
  }
9% {
    opacity:.9
  }
46% {
    opacity:.8;
    transform:translate(28px,-48vh)rotate(34deg)scale(1)
  }
78% {
    opacity:.48
  }
to {
    opacity:0;
    transform:translate(-18px,-112vh)rotate(55deg)scale(.3)
  }

}
@media (prefers-reduced-motion:reduce) {
  .hero-energy__flare,.hero-energy__sweep,.hero-sparks i {
    animation:none
  }
.hero-sparks {
    display:none
  }
.hero-smoke,.hero-embers i {
    animation:none
  }
.hero-smoke-stack,.hero-embers {
    display:none
  }

}
.hero-server-status {
  color:#f4dfad;
  text-align:center;
  text-shadow:0 0 14px #daa94366;
  justify-content:center;
  align-items:center;
  gap:.7rem;
  display:flex
}
.hero-server-status p {
  letter-spacing:.055em;
  font-family:Georgia,Times New Roman,serif;
  font-size:clamp(.92rem,1.7vw,1.18rem);
  font-weight:700
}
.hero-server-status__line {
  background:linear-gradient(90deg,#0000,#d6aa4cd9);
  width:clamp(2rem,6vw,5.5rem);
  height:1px;
  box-shadow:0 0 9px #e0af4359
}
.hero-server-status__line:last-child {
  transform:scaleX(-1)
}
.hero-server-status__signal {
  background:#8e1d1d;
  border:1px solid #e0b14b;
  border-radius:50%;
  flex:none;
  width:.48rem;
  height:.48rem;
  animation:1.8s ease-in-out infinite hero-server-status-pulse;
  box-shadow:0 0 0 4px #901f1f21,0 0 12px #e5ae3f73
}
@keyframes hero-server-status-pulse {
  0%,to {
    opacity:.65;
    transform:scale(.88)
  }
50% {
    opacity:1;
    transform:scale(1.08)
  }

}
.header-user__wallet {
  color:#d4d4d8;
  grid-template-columns:max-content max-content;
  justify-content:start;
  align-items:center;
  gap:.12rem 1rem;
  width:100%;
  font-size:.72rem;
  display:grid;
  transform:translate(2.2rem)
}
.header-user__balance {
  white-space:nowrap;
  justify-content:center;
  align-items:center;
  gap:.68rem;
  min-width:0;
  display:flex
}
.header-user__balance:first-child {
  justify-content:flex-start
}
.header-user__balance:nth-child(2) {
  justify-content:flex-end
}
.header-user__wallet .header-user__free,.header-user__wallet .header-user__vip {
  grid-column:1;
  justify-self:center;
  line-height:1
}
.header-user__wallet .header-user__date {
  grid-column:2;
  justify-self:center
}
.webshop__subnav nav button {
  color:inherit;
  font:inherit;
  cursor:pointer;
  background:0 0;
  border:0
}
.webshop-history {
  background:#070709e0;
  border:1px solid #c1913059;
  margin-top:2.5rem
}
.webshop-history__heading {
  background:linear-gradient(90deg,#4a2e0a8c,#0c0c0ef2);
  border-bottom:1px solid #c1913047;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1.4rem 1.6rem;
  display:flex
}
.webshop-history__heading small {
  color:#d8aa4c;
  letter-spacing:.18em;
  font-weight:700
}
.webshop-history__heading h2 {
  color:#fff;
  margin:.25rem 0 0;
  font-family:Georgia,serif;
  font-size:1.8rem
}
.webshop-history__heading>strong {
  color:#d8aa4c
}
.webshop-history__filters {
  background:#0d0e10;
  border-bottom:1px solid #ffffff14;
  flex-wrap:wrap;
  align-items:end;
  gap:12px;
  padding:14px 16px;
  display:flex
}
.webshop-history__filters label {
  color:#98989f;
  text-transform:uppercase;
  letter-spacing:.07em;
  gap:5px;
  font-size:.7rem;
  font-weight:700;
  display:grid
}
.webshop-history__filters input {
  color:#e4e4e6;
  --lightningcss-light:;
  --lightningcss-dark:initial;
  color-scheme:dark;
  background:#17181c;
  border:1px solid #35363b;
  border-radius:3px;
  min-height:38px;
  padding:0 10px
}
.webshop-history__filters button,.webshop-history__load-more {
  color:#eec65f;
  cursor:pointer;
  background:#976b1b1f;
  border:1px solid #8e6a25;
  border-radius:3px;
  min-height:38px;
  padding:0 15px;
  font-weight:800
}
.webshop-history__filters span {
  color:#777981;
  margin-left:auto;
  padding-bottom:9px;
  font-size:.75rem
}
.webshop-history__load-more {
  margin:18px auto;
  display:block
}
.webshop-history__table-wrap {
  overflow-x:auto
}
.webshop-history__table {
  border-collapse:collapse;
  width:100%;
  min-width:760px
}
.webshop-history__table th {
  text-align:left;
  color:#cba85d;
  letter-spacing:.09em;
  text-transform:uppercase;
  background:#151311;
  padding:.85rem 1rem;
  font-size:.72rem
}
.webshop-history__table td {
  color:#c7c7cc;
  border-top:1px solid #ffffff12;
  padding:1rem
}
.webshop-history__table tbody tr:hover {
  background:#c191300f
}
.webshop-history__table td:first-child span {
  color:#d8aa4c;
  font-weight:700
}
.webshop-history__table td:nth-child(2) strong {
  color:#fff;
  display:block
}
.webshop-history__table td:nth-child(2) small {
  color:#74747d;
  margin-top:.2rem;
  display:block
}
.webshop-history__table td b {
  color:#efc65c;
  white-space:nowrap
}
.webshop-history__table td i {
  color:#54d59d;
  white-space:nowrap;
  background:#10704524;
  border:1px solid #1fb37159;
  border-radius:999px;
  padding:.35rem .6rem;
  font-size:.75rem;
  font-style:normal;
  display:inline-flex
}
.webshop-history__empty {
  text-align:center;
  padding:4rem 1rem
}
.webshop-history__empty strong {
  color:#fff;
  font-size:1.1rem
}
.webshop-history__empty p {
  color:#8b8b93;
  margin-top:.4rem
}
.route-loading {
  z-index:2000;
  background:#090a0b;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:1.3rem;
  animation:.16s ease-out both route-loading-in;
  display:flex;
  position:fixed;
  inset:0
}
.route-loading__emblem {
  aspect-ratio:1;
  place-items:center;
  width:clamp(8rem,11vw,10rem);
  display:grid;
  position:relative
}
.route-loading__emblem img {
  z-index:2;
  object-fit:contain;
  filter:drop-shadow(0 0 12px #ddae4347);
  width:78%;
  height:78%;
  animation:1.8s ease-in-out infinite route-loading-emblem;
  position:relative
}
.route-loading__halo,.route-loading__orbit {
  border-radius:50%;
  position:absolute;
  inset:0
}
.route-loading__halo {
  border:1px solid #c9a8603d;
  inset:9%;
  box-shadow:inset 0 0 18px #c9a8601a,0 0 28px #c9a8601f
}
.route-loading__orbit {
  background:conic-gradient(from 0deg, transparent 0 72%, #b5842333 80%, #f7d77b 94%, #fff4c7 98%, transparent 100%);
  filter:drop-shadow(0 0 7px #f1c456bf);
  animation:1.15s linear infinite route-loading-orbit;
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 2px))
}
.route-loading__orbit:after {
  content:"";
  background:#fff2b8;
  border-radius:50%;
  width:7px;
  height:7px;
  position:absolute;
  top:1px;
  left:50%;
  transform:translate(-50%);
  box-shadow:0 0 8px #f8cf65,0 0 18px #f0b733e6
}
.route-loading__label {
  color:#cfaa58;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-size:.68rem;
  font-weight:700;
  animation:1.3s ease-in-out infinite route-loading-label
}
@keyframes route-loading-orbit {
  to {
    transform:rotate(360deg)
  }

}
@keyframes route-loading-emblem {
  0%,to {
    opacity:.88;
    transform:scale(.98)
  }
50% {
    opacity:1;
    transform:scale(1.025)
  }

}
@keyframes route-loading-label {
  0%,to {
    opacity:.38
  }
50% {
    opacity:1
  }

}
@keyframes route-loading-in {
  0% {
    opacity:0
  }
to {
    opacity:1
  }

}
@media (prefers-reduced-motion:reduce) {
  .route-loading,.route-loading__orbit,.route-loading__emblem img,.route-loading__label {
    animation-duration:.01ms;
    animation-iteration-count:1
  }

}
.castle-spotlight {
  isolation:isolate;
  background:linear-gradient(90deg,#040507f5,#08080ab3 48%,#040507f0),url(../image/section-castle-v2.png) 50% 43%/cover;
  border:1px solid #c5973761;
  border-radius:.7rem;
  grid-template-columns:minmax(14rem,.9fr) minmax(18rem,1.25fr) minmax(14rem,.8fr);
  min-height:18rem;
  display:grid;
  position:relative;
  overflow:hidden;
  box-shadow:0 22px 55px #0000008c,inset 0 0 45px #0000008c
}
.castle-spotlight__shade {
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle at 50% 35%,#b77e1c21,#0000 42%);
  position:absolute;
  inset:0
}
.castle-spotlight__intro,.castle-spotlight__owner,.castle-spotlight__schedule {
  flex-direction:column;
  justify-content:center;
  padding:2rem;
  display:flex
}
.castle-spotlight__intro {
  text-align:center;
  border-right:1px solid #c9a8602e;
  align-items:center
}
.castle-spotlight__intro span,.castle-spotlight__schedule>span {
  color:#cfa748;
  letter-spacing:.25em;
  text-transform:uppercase;
  font-size:.65rem;
  font-weight:800
}
.castle-spotlight__intro h2 {
  color:#fff5dd;
  font-family:var(--font-platypi), Georgia, serif;
  text-shadow:0 3px 18px #000c,0 0 18px #cc962a38;
  margin-top:.45rem;
  font-size:clamp(2rem,4vw,3.5rem);
  line-height:1
}
.castle-spotlight__intro i {
  background:linear-gradient(90deg,#0000,#c89a3d,#0000);
  width:7rem;
  height:1px;
  margin-top:1rem;
  box-shadow:0 0 10px #d2a03c73
}
.castle-spotlight__owner {
  flex-direction:row;
  align-items:center;
  gap:1.6rem
}
.castle-spotlight__mark {
  background:#020305d6;
  border:1px solid #d1a64d80;
  flex:none;
  place-items:center;
  width:9rem;
  height:9rem;
  display:grid;
  box-shadow:inset 0 0 25px #cb962b21,0 0 22px #000000a6
}
.castle-spotlight__mark .mad-ranking__guild-mark {
  width:5.8rem;
  height:5.8rem
}
.castle-spotlight__unknown-guild {
  object-fit:cover;
  object-position:center;
  filter:saturate(.9)contrast(1.05)brightness(.82);
  width:100%;
  height:100%
}
.castle-spotlight__mark-fallback {
  color:#c69a47;
  font-family:Georgia,serif;
  font-size:4.5rem;
  line-height:1
}
.castle-spotlight__owner dl {
  gap:1.15rem;
  display:grid
}
.castle-spotlight__owner dt {
  color:#c58a36;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.65rem;
  font-weight:800
}
.castle-spotlight__owner dd {
  color:#fff;
  font-family:var(--font-platypi), Georgia, serif;
  margin-top:.2rem;
  font-size:clamp(1rem,2vw,1.35rem);
  font-weight:700
}
.castle-spotlight__schedule {
  text-align:center;
  border-left:1px solid #c9a8602e;
  align-items:center
}
.castle-spotlight__schedule strong {
  color:#efe1c0;
  margin-top:.4rem;
  font-family:Georgia,serif;
  font-size:1.25rem
}
.castle-spotlight__schedule .castle-spotlight__stage--battle {
  color:#ef6969
}
.castle-spotlight__schedule small {
  color:#aaa4a0;
  margin-top:1.3rem
}
.castle-spotlight__schedule b {
  color:#e6b84f;
  letter-spacing:.08em;
  margin-top:.25rem;
  font-size:1.2rem
}
.castle-spotlight__schedule a {
  color:#f2d792;
  letter-spacing:.09em;
  text-transform:uppercase;
  border:1px solid #d1a64d8c;
  margin-top:1.4rem;
  padding:.65rem 1rem;
  font-size:.72rem;
  font-weight:800;
  transition:background .2s,color .2s,box-shadow .2s
}
.castle-spotlight__schedule a:hover {
  color:#100c05;
  background:#c99d48;
  box-shadow:0 0 18px #d4a34047
}
@media (max-width:860px) {
  .castle-spotlight {
    grid-template-columns:1fr
  }
.castle-spotlight__intro,.castle-spotlight__schedule {
    border:0
  }
.castle-spotlight__intro {
    padding-bottom:.5rem
  }
.castle-spotlight__owner {
    justify-content:center;
    padding-block:1.2rem
  }
.castle-spotlight__schedule {
    padding-top:.5rem
  }

}
@media (max-width:480px) {
  .castle-spotlight__owner {
    text-align:center;
    flex-direction:column
  }
.castle-spotlight__intro,.castle-spotlight__owner,.castle-spotlight__schedule {
    padding-inline:1.1rem
  }

}
.ranking-table--compact {
  overflow-x:hidden
}
.ranking-table--compact .ranking-table__grid {
  min-width:0;
  font-size:.8rem
}
.ranking-table--compact .ranking-table__grid th,.ranking-table--compact .ranking-table__grid td {
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:.75rem .55rem;
  overflow:visible
}
.inv-item-tip__wing,.inv-item-tip__quality--elemental,.inv-item-tip__name.inv-item-tip__quality--elemental {
  color:#ffe100
}
.inv-item-tip__element {
  color:#ff3a24
}
.inv-item-tip__element-target {
  color:#d322ce
}
.inv-item-tip__quality--earring,.inv-item-tip__name.inv-item-tip__quality--earring {
  color:#19ff32
}
.inv-item-tip__earring-title {
  color:#ffe100
}
.inv-item-tip__earring-option {
  color:#19ff32
}
.inv-item-tip__panel .inv-item-tip__stats {
  color:#f4f4f5
}
@media (max-width:480px) {
  .inv-item-tip__panel--socket .inv-item-tip__stats>li {
    white-space:normal;
    overflow-wrap:anywhere
  }

}
.inv-item-tip__panel .inv-item-tip__stats>li {
  white-space:nowrap;
  text-align:center
}
.inv-item-tip__panel .inv-item-tip__stats {
  letter-spacing:-.01em;
  text-align:center;
  gap:0;
  margin-top:.9rem;
  font-size:.7rem;
  line-height:1.2
}
.inv-item-tip__panel .inv-item-tip__ancient-title {
  color:#ffe100
}
.inv-item-tip__panel .inv-item-tip__ancient-effect {
  color:#20ff37
}
.inv-item-tip__panel .inv-item-tip__ancient-option {
  color:#65a9ff
}
.inv-item-tip__panel .inv-item-tip__ancient-disabled {
  color:#686868
}
.inv-item-tip__quality--elemental,.inv-item-tip__name.inv-item-tip__quality--elemental {
  color:#ffe100
}
.ranking-table__grid th:first-child {
  width:11%
}
.ranking-table__grid th:nth-child(2) {
  width:34%
}
.ranking-table__grid th:nth-child(3) {
  width:31%
}
.ranking-table__grid th:nth-child(4) {
  width:24%
}
.ranking-table__grid--guild th:first-child {
  width:11%
}
.ranking-table__grid--guild th:nth-child(2),.ranking-table__grid--guild th:nth-child(3) {
  width:25%
}
.ranking-table__grid--guild th:nth-child(4) {
  width:21%
}
.ranking-table__grid--guild th:nth-child(5) {
  width:18%
}
.ranking-table__grid thead {
  text-align:left;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:#c9a86014
}
.ranking-table__grid th {
  color:var(--brand);
  padding:.85rem 1rem;
  font-size:.72rem;
  font-weight:700
}
.ranking-table__row {
  border-top:1px solid #ffffff0d;
  transition:background-color .2s
}
.ranking-table__row:hover {
  background:#ffffff08
}
.ranking-table__row--top {
  background:linear-gradient(90deg,#c9a8601a,#c9a86005)
}
.ranking-table__row--top:hover {
  background:linear-gradient(90deg,#c9a86024,#c9a8600a)
}
.ranking-table__grid td {
  padding:.85rem 1rem
}
.ranking-table__rank {
  color:var(--brand-strong);
  font-weight:700
}
.ranking-position {
  align-items:center;
  gap:.45rem;
  min-width:3.2rem;
  display:inline-flex
}
.ranking-position__trophy {
  filter:grayscale()brightness(1.4);
  font-size:1.05rem;
  line-height:1
}
.ranking-position--1 .ranking-position__trophy {
  filter:sepia()saturate(5)hue-rotate(355deg)brightness(1.12)
}
.ranking-position--2 .ranking-position__trophy {
  filter:grayscale()brightness(1.65)
}
.ranking-position--3 .ranking-position__trophy {
  filter:sepia()saturate(4)hue-rotate(335deg)brightness(.9)
}
.ranking-table__row--top .ranking-table__rank {
  color:#fff
}
.ranking-table__name {
  color:#fff;
  font-weight:600
}
.ranking-table__name a {
  color:inherit;
  text-decoration:none;
  transition:color .2s
}
.ranking-table__name a:hover {
  color:var(--brand-strong)
}
.ranking-table__muted {
  color:var(--muted)
}
.ranking-table__value {
  color:#d4d4d8
}
.ranking-table__highlight {
  color:var(--brand-strong);
  font-weight:700
}
.ranking-table__empty {
  text-align:center;
  color:var(--muted);
  padding:2rem 1rem
}
.news-carousel {
  border:1px solid var(--border);
  background:#0c0c0db8;
  border-radius:.25rem;
  gap:0;
  display:grid;
  overflow:hidden;
  box-shadow:0 20px 40px #00000059
}
@media (min-width:1024px) {
  .news-carousel {
    grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);
    min-height:420px
  }

}
.news-carousel__featured {
  min-height:320px;
  position:relative;
  overflow:hidden
}
.news-carousel__featured-bg {
  background-color:#0000;
  background-image:radial-gradient(circle at 70% 20%,#c9a8602e,#0000 35%),linear-gradient(135deg,#18181bf2 0%,#0c0c0de0 100%);
  background-position:50%;
  background-repeat:repeat,repeat;
  background-size:cover;
  background-attachment:scroll,scroll;
  background-origin:padding-box,padding-box;
  background-clip:border-box,border-box;
  animation:.35s both news-carousel-image-in;
  position:absolute;
  inset:0
}
@keyframes news-carousel-image-in {
  0% {
    opacity:.72
  }
to {
    opacity:1
  }

}
.news-carousel__featured-bg--image {
  background-color:#18181b
}
.news-carousel__featured-overlay {
  background:linear-gradient(90deg,#080809eb 0%,#0808098c 55%,#08080940 100%);
  position:absolute;
  inset:0
}
.news-carousel__featured-overlay--image {
  background:linear-gradient(#0808090a 28%,#080809d1 100%),linear-gradient(90deg,#080809b8 0%,#0808092e 58%,#0808090a 100%)
}
.news-carousel__featured-content {
  z-index:1;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  height:100%;
  min-height:320px;
  padding:1.5rem 1.5rem 5.5rem;
  display:flex;
  position:relative
}
@media (min-width:640px) {
  .news-carousel__featured-content {
    width:min(72%,42rem);
    min-height:420px;
    padding:2rem 2rem 6rem
  }

}
.news-carousel__category {
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  background:#080809b8;
  border:1px solid #c9a86061;
  border-radius:999px;
  padding:.35rem .65rem;
  font-size:.65rem;
  font-weight:700
}
.news-carousel__title {
  max-width:28ch;
  font-family:var(--font-platypi), Georgia, serif;
  color:#fff;
  text-wrap:balance;
  text-shadow:0 2px 18px #000000e6;
  margin-top:.65rem;
  font-size:clamp(1.65rem,2.6vw,2.25rem);
  font-weight:700;
  line-height:1.08
}
.news-carousel__excerpt {
  color:#e4e4e7;
  text-shadow:0 1px 10px #000000f2;
  max-width:36rem;
  margin-top:.75rem;
  font-size:.875rem;
  line-height:1.5
}
.news-carousel__cta {
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#111;
  background:#fff;
  border-radius:.25rem;
  width:fit-content;
  margin-top:0;
  padding:.75rem 1.15rem;
  font-size:.78rem;
  font-weight:700;
  transition:transform .2s,background-color .2s;
  display:inline-flex;
  position:absolute;
  bottom:1.5rem;
  left:1.5rem
}
.news-carousel__cta:hover {
  background:var(--brand-strong);
  color:#120d04;
  transform:translateY(-1px)
}
.news-carousel__progress {
  background:#ffffff14;
  height:3px;
  position:absolute;
  bottom:0;
  left:0;
  right:0
}
.news-carousel__progress-bar {
  background:linear-gradient(90deg, var(--brand-dark), var(--brand-strong));
  height:100%;
  transition:width 50ms linear;
  display:block
}
.news-carousel__list {
  border-top:1px solid var(--border);
  background:#121214eb;
  flex-direction:column;
  display:flex
}
@media (min-width:1024px) {
  .news-carousel__list {
    border-top:0;
    border-left:1px solid var(--border)
  }

}
.news-carousel__item {
  border:0;
  border-bottom:1px solid var(--border);
  text-align:left;
  cursor:pointer;
  background:0 0;
  flex-direction:column;
  gap:.35rem;
  padding:1rem 1.1rem;
  transition:background-color .2s,border-color .2s;
  display:flex
}
.news-carousel__item:hover {
  background:#ffffff08
}
.news-carousel__item--active {
  box-shadow:inset 3px 0 0 var(--brand);
  background:#c9a8601a
}
.news-carousel__item-title {
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  font-size:.78rem;
  font-weight:700
}
.news-carousel__item-date {
  color:var(--muted);
  font-size:.72rem
}
.news-carousel__all {
  border-top:1px solid var(--border);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#d4d4d8;
  background:#ffffff05;
  justify-content:center;
  align-items:center;
  margin-top:auto;
  padding:1rem;
  font-size:.78rem;
  font-weight:700;
  transition:background-color .2s,color .2s;
  display:flex
}
.news-carousel__all:hover {
  color:var(--brand-strong);
  background:#c9a86014
}
.news-card__image {
  background-position:50%;
  background-size:cover;
  height:180px
}
.news-card__image--empty {
  background:radial-gradient(circle at 70% 35%,#c9a86029,#0000 55%),linear-gradient(135deg,#2c2416f2 0%,#18181beb 100%)
}
.news-detail__hero {
  background-position:50%;
  background-size:cover;
  height:min(42vw,320px)
}
.news-detail__body {
  white-space:pre-wrap
}
.news-empty {
  max-width:720px
}
.char-search {
  flex-wrap:wrap;
  gap:.75rem;
  display:flex
}
.char-search .input {
  flex:240px
}
.char-profile__search {
  justify-content:center;
  padding-top:2rem;
  display:flex
}
.char-search--profile {
  background:#09090ce6;
  border:1px solid #ffffff17;
  border-radius:.45rem;
  flex-wrap:nowrap;
  gap:.35rem;
  width:min(100%,390px);
  padding:.3rem;
  box-shadow:0 10px 30px #0000004d
}
.char-search--profile .input {
  min-width:0;
  height:3.15rem;
  box-shadow:none;
  background:0 0;
  border:0;
  flex-basis:auto;
  padding-inline:1rem;
  font-size:1rem;
  font-weight:600
}
.char-search__icon-button {
  color:#b9bbc3;
  cursor:pointer;
  background:#292a30;
  border:1px solid #ffffff14;
  border-radius:.2rem;
  flex:0 0 3.15rem;
  place-items:center;
  width:3.15rem;
  height:3.15rem;
  transition:border-color .16s,color .16s,background .16s;
  display:grid
}
.char-search__icon-button:hover,.char-search__icon-button:focus-visible {
  color:var(--brand-strong);
  background:#33343b;
  border-color:#c9a86080
}
.char-search__icon-button svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.8px;
  width:1.45rem;
  height:1.45rem
}
.char-not-found {
  align-content:start;
  justify-items:center;
  gap:4.5rem;
  min-height:390px;
  padding-block:2.5rem 6rem;
  display:grid
}
.char-not-found .char-search--profile {
  width:min(100%,500px)
}
.char-not-found__message {
  text-align:center
}
.char-not-found__message h2 {
  font-family:var(--font-platypi), Georgia, serif;
  color:#f5ead7;
  text-shadow:-1px 0 #48b1ff66,1px 0 #ff462e6b;
  font-size:clamp(1.45rem,3vw,2rem)
}
.char-not-found__message p {
  color:#9295a2;
  margin-top:1.25rem;
  font-size:1rem
}
.char-profile {
  gap:1.5rem;
  display:grid
}
@media (min-width:1024px) {
  .char-profile {
    grid-template-columns:320px minmax(0,1fr);
    align-items:start
  }

}
.char-avatar {
  aspect-ratio:1;
  background:radial-gradient(circle at 50% 20%,#c9a8602e,#0000 45%),linear-gradient(#2c2c30f2 0%,#0c0c0dfa 100%);
  border:1px solid #c9a8607a;
  border-radius:8px;
  place-items:center;
  width:min(100%,190px);
  margin:0 auto;
  display:grid;
  position:relative;
  overflow:hidden
}
.char-avatar__label {
  font-family:var(--font-platypi), Georgia, serif;
  color:#ffffffeb;
  text-shadow:0 0 24px #c9a86059;
  font-size:4rem;
  font-weight:700
}
.char-profile__sidebar {
  background:#09090af0;
  border-color:#c9a86029;
  overflow:hidden
}
.char-profile-card {
  text-align:center;
  background:radial-gradient(circle at 50% 24%,#c9a86017,#0000 38%),linear-gradient(#0f0f10f5,#070708fc);
  min-height:430px;
  padding:2rem 1.25rem 1.5rem;
  position:relative
}
.char-profile-card:after {
  content:"";
  background:linear-gradient(90deg,#0000,#c9a86085,#0000);
  height:1px;
  position:absolute;
  inset:auto 15% 0
}
.char-profile-card:before {
  content:"";
  z-index:0;
  background:linear-gradient(90deg,#0000,#a8741f6b 22%,#e0b458c2 46%,#0000 46% 54%,#e0b458c2 54%,#a8741f6b 78%,#0000);
  height:1px;
  position:absolute;
  top:200px;
  left:38px;
  right:38px;
  box-shadow:0 0 6px #cd973752
}
.char-avatar__image {
  object-fit:cover;
  width:100%;
  height:100%
}
.char-profile-card__level {
  z-index:2;
  background:#0b0b0c;
  border:2px solid #8e6d30;
  place-content:center;
  width:66px;
  height:66px;
  margin:-24px auto 0;
  animation:3.2s ease-in-out infinite char-level-aura;
  display:grid;
  position:relative;
  transform:rotate(45deg);
  box-shadow:0 0 0 5px #080809eb,0 8px 22px #0000008c
}
.char-profile-card__level:after {
  content:"";
  border:1px solid #e2b85c33;
  position:absolute;
  inset:-5px;
  box-shadow:0 0 13px #cc973633
}
@keyframes char-level-aura {
  0%,to {
    border-color:#8e6d30;
    box-shadow:0 0 0 5px #080809eb,0 8px 22px #0000008c,0 0 5px #ca9c431f
  }
50% {
    border-color:#d0a552;
    box-shadow:0 0 0 5px #080809eb,0 8px 22px #0000008c,0 0 17px #e0b2566b
  }

}
.char-profile-card__level>span {
  place-items:center;
  display:grid;
  transform:rotate(-45deg)
}
.char-profile-card__level small {
  color:#e8c974;
  font-size:.65rem
}
.char-profile-card__level strong {
  color:#fff;
  margin-top:-2px;
  font-size:1.35rem;
  line-height:1
}
.char-profile-card__identity {
  z-index:1;
  padding-top:1.5rem;
  position:relative
}
.char-profile-card__identity h1 {
  font-family:var(--font-platypi), Georgia, serif;
  color:#fff;
  text-shadow:-1px 0 #4bb2ffb3,1px 0 #ff5336b3,0 2px 12px #e1b56047;
  margin:0;
  font-size:1.8rem
}
.char-profile-card__identity>p {
  isolation:isolate;
  width:fit-content;
  color:var(--brand-strong);
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 0 7px #e4bc657a;
  margin:.25rem auto 1rem;
  font-size:.72rem;
  font-weight:800;
  position:relative
}
.char-profile-card__identity>p span {
  z-index:2;
  position:relative
}
.char-profile-card__identity>p:before,.char-profile-card__identity>p:after {
  content:attr(data-text);
  z-index:1;
  pointer-events:none;
  position:absolute;
  inset:0
}
.char-profile-card__identity>p:before {
  color:#48b1ffad;
  text-shadow:-1px 0 5px #3c9bff47;
  transform:translate(-1.2px)
}
.char-profile-card__identity>p:after {
  color:#ff462ead;
  text-shadow:1px 0 5px #ff412a47;
  transform:translate(1.2px)
}
.char-profile-card__created {
  color:#858799;
  justify-content:center;
  gap:.35rem;
  font-size:.78rem;
  display:flex
}
.char-profile-card__created strong {
  color:#b9bbca
}
.char-profile-card__presence {
  background:#ffffff09;
  border:1px solid #ffffff0f;
  border-radius:999px;
  grid-template-columns:auto minmax(0,1fr);
  width:calc(100% - 1.5rem);
  max-width:310px;
  margin:1.25rem auto 0;
  display:grid;
  overflow:hidden
}
.char-profile-card__status,.char-profile-card__map {
  text-transform:uppercase;
  justify-content:center;
  align-items:center;
  min-width:0;
  padding:.55rem .75rem;
  font-size:.7rem;
  font-weight:800;
  display:flex
}
.char-profile-card__status {
  gap:.42rem
}
.char-profile-card__status i {
  background:currentColor;
  border-radius:50%;
  width:.7rem;
  height:.7rem;
  box-shadow:0 0 10px
}
.char-profile-card__status.is-online {
  color:#2dff87;
  background:#00803a2e
}
.char-profile-card__status.is-offline {
  color:#ff6868;
  background:#80000029
}
.char-profile-card__map {
  color:#77798a;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-transform:none;
  overflow:hidden
}
.char-profile-card .char-avatar__image {
  object-fit:cover;
  object-position:center
}
.char-monthly-badges {
  grid-column:1/-1;
  width:auto!important;
  margin-left:0!important
}
@media (min-width:640px) {
  .news-carousel__cta {
    bottom:2rem;
    left:2rem
  }

}
.news-carousel__pause {
  z-index:2;
  color:#fff;
  cursor:pointer;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  background:#080809b8;
  border:1px solid #c9a8606b;
  border-radius:999px;
  place-items:center;
  width:2.5rem;
  height:2.5rem;
  transition:border-color .2s,background-color .2s,color .2s;
  display:grid;
  position:absolute;
  bottom:1rem;
  right:1rem
}
.news-carousel__pause:hover,.news-carousel__pause:focus-visible,.news-carousel--paused .news-carousel__pause {
  border-color:var(--brand-strong);
  color:var(--brand-strong);
  background:#080809e6
}
.news-carousel__pause svg {
  fill:currentColor;
  width:1rem;
  height:1rem
}
.ranking-placement {
  gap:1rem;
  display:grid
}
.rankings-section__block .ranking-placement--compact {
  min-width:0;
  max-width:100%;
  margin-top:.75rem;
  padding:.9rem;
  overflow:hidden
}
.ranking-placement--compact>div:first-child p {
  display:none
}
.ranking-placement--compact .ranking-placement__form {
  flex-wrap:nowrap;
  gap:.5rem
}
.ranking-placement--compact .ranking-placement__form .input {
  flex-basis:auto;
  min-width:0
}
.ranking-placement--compact .btn-secondary {
  white-space:nowrap;
  padding-inline:.8rem
}
.ranking-placement--compact .ranking-placement__result {
  box-sizing:border-box;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.55rem;
  width:100%;
  min-width:0;
  max-width:100%;
  padding:.7rem;
  overflow:hidden
}
.ranking-placement--compact .ranking-placement__result span:first-of-type {
  display:none
}
.ranking-placement--compact .ranking-placement__result a {
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  overflow:hidden
}
.ranking-placement--compact .ranking-placement__result span:last-child {
  white-space:nowrap;
  justify-self:end
}
.ranking-placement__form {
  flex-wrap:wrap;
  gap:.75rem;
  display:flex
}
.ranking-placement__form .input {
  flex:260px
}
.ranking-placement__result {
  color:#fff;
  background:#c9a86014;
  border:1px solid #c9a8603d;
  grid-template-columns:70px minmax(120px,1.2fr) minmax(140px,1fr) 100px;
  align-items:center;
  gap:1rem;
  padding:.9rem 1rem;
  display:grid
}
.ranking-placement__result strong,.ranking-placement__result a {
  color:var(--brand-strong)
}
.ranking-placement__empty {
  color:var(--muted)
}
@media (max-width:640px) {
  .ranking-placement__result {
    grid-template-columns:55px 1fr
  }

}
.char-avatar__image {
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 0 22px #c9a8602e);
  width:100%;
  height:100%;
  position:absolute;
  inset:0
}
.char-avatar__shade {
  pointer-events:none;
  background:linear-gradient(#0000 58%,#080809b8 100%);
  position:absolute;
  inset:0
}
.char-avatar__level {
  letter-spacing:.08em;
  color:var(--brand-strong);
  z-index:1;
  background:#0c0c0dd1;
  border:1px solid #c9a86059;
  padding:.35rem .8rem;
  font-size:.75rem;
  font-weight:700;
  position:absolute;
  bottom:1rem;
  left:50%;
  transform:translate(-50%)
}
.char-avatar--class-0,.char-avatar--class-1,.char-avatar--class-2 {
  background:radial-gradient(circle at 50% 18%,#7878ff38,#0000 42%),linear-gradient(#181430f2 0%,#0c0c0dfa 100%)
}
.char-avatar--class-16,.char-avatar--class-17,.char-avatar--class-18 {
  background:radial-gradient(circle at 50% 18%,#dc505038,#0000 42%),linear-gradient(#301212f2 0%,#0c0c0dfa 100%)
}
.char-avatar--class-32,.char-avatar--class-33,.char-avatar--class-34 {
  background:radial-gradient(circle at 50% 18%,#78dca038,#0000 42%),linear-gradient(#12281cf2 0%,#0c0c0dfa 100%)
}
.char-avatar--class-48,.char-avatar--class-49 {
  background:radial-gradient(circle at 50% 18%,#c9a8603d,#0000 42%),linear-gradient(#302412f2 0%,#0c0c0dfa 100%)
}
.char-stat-list {
  gap:.65rem;
  display:grid
}
.char-stat-row {
  border-bottom:1px solid #ffffff0f;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding-bottom:.65rem;
  display:flex
}
.char-stat-row__label {
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  font-size:.78rem;
  font-weight:700
}
.char-stat-row__value {
  color:#fff;
  font-size:1rem;
  font-weight:700
}
.char-guild-banner {
  border:1px solid var(--border);
  background-image:url(../image/section-castle.jpg);
  background-position:50%;
  background-size:cover;
  border-radius:.25rem;
  min-height:180px;
  position:relative;
  overflow:hidden
}
.char-guild-banner__overlay {
  background:linear-gradient(90deg,#080809e0 0%,#08080973 100%);
  position:absolute;
  inset:0
}
.char-guild-banner__content {
  z-index:1;
  align-items:center;
  gap:1.25rem;
  padding:1.75rem;
  display:flex;
  position:relative
}
.char-guild-banner__mark {
  width:4.5rem;
  height:4.5rem;
  font-family:var(--font-platypi), Georgia, serif;
  color:var(--brand-strong);
  background:#0c0c0db8;
  border:1px solid #c9a86059;
  place-items:center;
  font-size:2rem;
  font-weight:700;
  display:grid
}
.char-tabs {
  flex-wrap:wrap;
  gap:.5rem;
  display:flex
}
.char-tabs__btn {
  border:1px solid var(--border);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#d4d4d8;
  cursor:pointer;
  background:#18181bb8;
  padding:.75rem 1rem;
  font-size:.78rem;
  font-weight:700;
  transition:background-color .2s,border-color .2s,color .2s
}
.char-tabs__btn:hover,.char-tabs__btn--active {
  color:var(--brand-strong);
  background:#c9a8601f;
  border-color:#c9a86059
}
.char-panel .char-stat-row:last-child {
  border-bottom:0;
  padding-bottom:0
}
.sr-only {
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  position:absolute;
  overflow:hidden
}
.register-wizard__header {
  margin-bottom:1.5rem
}
.register-steps {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;
  margin-bottom:1.5rem;
  display:grid
}
.register-steps__item {
  border:1px solid var(--border);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  background:#ffffff05;
  align-items:center;
  gap:.65rem;
  padding:.75rem;
  font-size:.78rem;
  font-weight:700;
  display:flex
}
.register-steps__item--active {
  color:var(--brand-strong);
  background:#c9a86014;
  border-color:#c9a86059
}
.register-steps__number {
  border:1px solid;
  border-radius:999px;
  place-items:center;
  width:1.75rem;
  height:1.75rem;
  font-size:.75rem;
  display:grid
}
.register-phone-row {
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:.5rem;
  display:grid
}
.register-phone-row__dial {
  border:1px solid var(--border);
  min-width:4.5rem;
  color:var(--brand-strong);
  background:#ffffff08;
  justify-content:center;
  padding:.85rem .75rem;
  font-size:.875rem;
  font-weight:600;
  display:inline-flex
}
.register-channel {
  background:#c9a8600a;
  border:1px solid #c9a86029;
  border-radius:.3rem;
  padding:1rem
}
.register-channel legend {
  color:#e5e5e8;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding-inline:.35rem;
  font-size:.76rem;
  font-weight:700
}
.register-channel>p {
  color:var(--muted);
  margin:0 0 .85rem;
  font-size:.75rem
}
.register-channel__options {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
  display:grid
}
.register-channel__option {
  cursor:pointer;
  background:#0003;
  border:1px solid #ffffff17;
  border-radius:.25rem;
  grid-template-columns:2rem 1fr;
  align-items:center;
  gap:.15rem .65rem;
  padding:.8rem;
  transition:border-color .18s,background .18s;
  display:grid;
  position:relative
}
.register-channel__option--active {
  background:#c9a8601c;
  border-color:#c9a8608c
}
.register-channel__option input {
  opacity:0;
  pointer-events:none;
  position:absolute
}
.register-channel__option>span {
  color:var(--brand);
  text-align:center;
  grid-row:1/3;
  font-size:1.35rem
}
.register-channel__option strong {
  color:#f1f1f2;
  font-size:.8rem
}
.register-channel__option small {
  color:#8f8f97;
  font-size:.68rem;
  line-height:1.35
}
.register-legal {
  border:1px solid var(--border);
  background:#ffffff05;
  padding:1rem
}
.register-legal__item {
  color:var(--muted);
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"check label"".action";
  align-items:center;
  gap:.55rem .75rem;
  font-size:.875rem;
  line-height:1.45;
  display:grid
}
.register-legal__item+.register-legal__item {
  border-top:1px solid #ffffff0f;
  padding-top:.85rem
}
.register-legal__item input[type=checkbox] {
  width:1rem;
  height:1rem;
  accent-color:var(--brand);
  grid-area:check;
  margin:.1rem 0 0
}
.register-legal__label {
  cursor:pointer;
  grid-area:label
}
.register-legal__read {
  letter-spacing:.03em;
  text-transform:uppercase;
  width:100%;
  min-height:2.35rem;
  color:var(--brand-strong);
  cursor:pointer;
  background:#c9a86014;
  border:1px solid #c9a86047;
  border-radius:.25rem;
  grid-area:action;
  justify-content:center;
  align-items:center;
  padding:.55rem .9rem;
  font-size:.78rem;
  font-weight:600;
  line-height:1.2;
  transition:background-color .2s,border-color .2s,color .2s;
  display:inline-flex
}
.register-legal__read:hover {
  color:#fff;
  background:#c9a86024;
  border-color:#c9a86073
}
@media (min-width:640px) {
  .register-legal__item {
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"check label action";
    gap:.75rem 1rem
  }
.register-legal__read {
    white-space:nowrap;
    width:auto;
    min-width:11.5rem;
    max-width:14rem
  }

}
.legal-modal {
  z-index:200;
  place-items:center;
  padding:1rem;
  display:grid;
  position:fixed;
  inset:0
}
.legal-modal__backdrop {
  cursor:pointer;
  background:#000000c7;
  border:0;
  position:absolute;
  inset:0
}
.legal-modal__panel {
  border:1px solid var(--border);
  background:#18181bfa;
  flex-direction:column;
  width:min(100%,48rem);
  max-height:min(88vh,900px);
  display:flex;
  position:relative;
  box-shadow:0 24px 60px #00000073
}
.legal-modal__header {
  border-bottom:1px solid var(--border);
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1rem 1.25rem;
  display:flex
}
.legal-modal__title {
  color:#fff;
  font-size:1.15rem;
  font-weight:700
}
.legal-modal__close {
  color:var(--muted);
  cursor:pointer;
  background:0 0;
  border:0;
  font-size:1.75rem;
  line-height:1
}
.legal-modal__close:hover {
  color:#fff
}
.legal-modal__body {
  padding:1.25rem;
  overflow:auto
}
.legal-modal__footer {
  border-top:1px solid var(--border);
  padding:1rem 1.25rem
}
.mbx-buy-modal {
  z-index:220;
  place-items:center;
  padding:1rem;
  display:grid;
  position:fixed;
  inset:0
}
.mbx-buy-modal__backdrop {
  cursor:pointer;
  background:#000000d1;
  border:0;
  position:absolute;
  inset:0
}
.mbx-buy-modal__panel {
  border:1px solid var(--brand);
  width:min(100%,28rem);
  position:relative
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx-buy-modal__panel {
    border:1px solid color-mix(in srgb, var(--brand) 35%, var(--border))
  }

}
.mbx-buy-modal__panel {
  background:#121214fa;
  box-shadow:0 24px 60px #00000080,inset 0 0 0 1px #ffffff0a
}
.mbx-buy-modal__header {
  border-bottom:1px solid var(--border);
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1rem 1.25rem;
  display:flex
}
.mbx-buy-modal__title {
  color:#fff;
  margin:0;
  font-size:1.05rem;
  font-weight:700
}
.mbx-buy-modal__close {
  color:var(--muted);
  cursor:pointer;
  background:0 0;
  border:0;
  font-size:1.5rem;
  line-height:1
}
.mbx-buy-modal__close:hover:not(:disabled) {
  color:#fff
}
.mbx-buy-modal__close:disabled {
  opacity:.45;
  cursor:not-allowed
}
.mbx-buy-modal__body {
  flex-direction:column;
  gap:1rem;
  padding:1.25rem;
  display:flex
}
.mbx-buy-modal__lead {
  color:#d4d4d8;
  margin:0;
  font-size:.9rem;
  line-height:1.5
}
.mbx-buy-modal__lead strong {
  color:#fdba74
}
.mbx-buy-modal__qty {
  flex-direction:column;
  gap:.5rem;
  display:flex
}
.mbx-buy-modal__qty-label {
  color:#a1a1aa;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.75rem
}
.mbx-buy-modal__stepper {
  border:1px solid var(--border);
  background:#ffffff08;
  border-radius:999px;
  align-self:flex-start;
  align-items:center;
  gap:.75rem;
  padding:.35rem;
  display:inline-flex
}
.mbx-buy-modal__step {
  border:1px solid var(--brand);
  place-items:center;
  width:2.25rem;
  height:2.25rem;
  display:grid
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx-buy-modal__step {
    border:1px solid color-mix(in srgb, var(--brand) 45%, var(--border))
  }

}
.mbx-buy-modal__step {
  color:#fff;
  cursor:pointer;
  background:#ffffff0a;
  border-radius:999px;
  font-size:1.25rem;
  line-height:1
}
.mbx-buy-modal__step:hover:not(:disabled) {
  border-color:var(--brand);
  background:var(--brand)
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx-buy-modal__step:hover:not(:disabled) {
    background:color-mix(in srgb, var(--brand) 18%, transparent)
  }

}
.mbx-buy-modal__step:disabled {
  opacity:.35;
  cursor:not-allowed
}
.mbx-buy-modal__qty-value {
  color:#fff;
  text-align:center;
  min-width:2.5rem;
  font-size:1.35rem;
  font-weight:700
}
.mbx-buy-modal__summary {
  border:1px solid var(--border);
  background:#ffffff05;
  gap:.55rem;
  margin:0;
  padding:.85rem 1rem;
  display:grid
}
.mbx-buy-modal__summary div {
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  display:flex
}
.mbx-buy-modal__summary dt {
  color:#a1a1aa;
  margin:0;
  font-size:.8rem
}
.mbx-buy-modal__summary dd {
  color:#e4e4e7;
  margin:0;
  font-size:.9rem;
  font-weight:600
}
.mbx-buy-modal__total {
  color:#fdba74
}
.mbx-buy-modal__warn {
  color:#fecaca;
  background:#ef444414;
  border:1px solid #ef444459;
  margin:0;
  padding:.65rem .75rem;
  font-size:.82rem;
  line-height:1.45
}
.mbx-buy-modal__footer {
  border-top:1px solid var(--border);
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.65rem;
  margin:0 -1.25rem -1.25rem;
  padding:1rem 1.25rem;
  display:flex
}
.register-success {
  text-align:center;
  padding:2rem
}
.register-success__icon {
  color:#6ee7b7;
  background:#34d3991f;
  border:1px solid #34d39959;
  border-radius:999px;
  place-items:center;
  width:4rem;
  height:4rem;
  margin:0 auto 1rem;
  font-size:1.75rem;
  font-weight:700;
  display:grid
}
.register-success__title {
  color:#fff;
  font-size:1.75rem;
  font-weight:700
}
.register-success__text {
  color:var(--muted);
  margin-top:.85rem;
  line-height:1.65
}
.register-success__box {
  border:1px solid var(--border);
  text-align:left;
  background:#ffffff05;
  margin-top:1.5rem;
  padding:1rem 1.25rem
}
.register-success__box-title {
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brand-strong);
  font-size:.8rem;
  font-weight:700
}
.register-success__list {
  color:var(--muted);
  gap:.5rem;
  margin-top:.75rem;
  line-height:1.55;
  display:grid
}
.register-success__actions {
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
  margin-top:1.75rem;
  display:flex
}
.legal-page {
  padding:1.75rem
}
.legal-document__updated {
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:1.25rem;
  font-size:.8rem
}
.legal-document__intro {
  color:var(--muted);
  gap:.85rem;
  margin-bottom:2rem;
  line-height:1.65;
  display:grid
}
.legal-document__section {
  border-top:1px solid var(--border);
  padding-top:1.5rem
}
.legal-document__section+.legal-document__section {
  margin-top:1.5rem
}
.legal-document__section h2 {
  color:#fff;
  margin-bottom:.85rem;
  font-size:1.15rem;
  font-weight:700
}
.legal-document__section p,.legal-document__subsection p {
  color:var(--muted);
  margin-bottom:.75rem;
  line-height:1.65
}
.legal-document__subsection {
  margin-top:1rem
}
.legal-document__subsection h3 {
  color:var(--brand-strong);
  margin-bottom:.65rem;
  font-size:.95rem;
  font-weight:600
}
.events-section__eyebrow {
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand);
  font-size:.78rem;
  font-weight:700
}
.events-track {
  scroll-snap-type:x mandatory;
  grid-auto-columns:minmax(220px,1fr);
  grid-auto-flow:column;
  gap:1rem;
  padding-bottom:.35rem;
  display:grid;
  overflow-x:auto
}
.events-track--calendar {
  grid-auto-columns:minmax(240px,280px)
}
.events-card {
  scroll-snap-align:start;
  background-color:#121214;
  background-position:50%;
  background-repeat:no-repeat;
  background-size:cover;
  border:1px solid #ffffff14;
  min-height:188px;
  position:relative;
  overflow:hidden
}
.events-card__overlay {
  z-index:1;
  background:linear-gradient(#08080a14 0%,#08080a38 42%,#08080af0 100%);
  position:absolute;
  inset:0
}
.events-card--core .events-card__overlay {
  background:linear-gradient(#08080a0d 0%,#08080a33 40%,#240c34f0 100%)
}
.events-card--invasion .events-card__overlay {
  background:linear-gradient(#08080a0d 0%,#08080a33 40%,#2a1c08f0 100%)
}
.events-card--pvp .events-card__overlay {
  background:linear-gradient(#08080a0d 0%,#08080a33 40%,#08142af0 100%)
}
.events-card--custom .events-card__overlay {
  background:linear-gradient(#08080a0d 0%,#08080a33 40%,#08221cf0 100%)
}
.events-card--special .events-card__overlay {
  background:linear-gradient(#08080a0d 0%,#08080a33 40%,#2a0a0af0 100%)
}
.events-card__badge {
  z-index:2;
  color:#fff;
  background:#0000008c;
  border:1px solid #ffffff1f;
  padding:.35rem .55rem;
  font-size:.78rem;
  font-weight:700;
  position:absolute;
  top:.85rem;
  left:.85rem
}
.events-card__emblem {
  z-index:2;
  position:absolute;
  top:.55rem;
  right:.65rem
}
.events-card__emblem-frame {
  background:#00000073;
  border:1px solid #c9a86073;
  place-items:center;
  width:4.35rem;
  height:4.35rem;
  display:grid;
  overflow:hidden;
  transform:rotate(45deg);
  box-shadow:0 8px 24px #00000059
}
.events-card__emblem-image {
  object-fit:cover;
  width:130%;
  height:130%;
  transform:rotate(-45deg)scale(1.05)
}
.events-card__body {
  z-index:2;
  padding:1rem;
  position:absolute;
  inset:auto 0 0
}
.events-card__title {
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  font-size:.95rem;
  font-weight:700
}
.events-card__countdown {
  letter-spacing:.08em;
  color:var(--muted);
  margin-top:.35rem;
  font-size:.82rem;
  font-weight:600
}
.events-table {
  gap:.75rem;
  display:grid
}
.events-table__row {
  border-top:1px solid var(--border);
  gap:.35rem;
  padding-top:.75rem;
  display:grid
}
@media (min-width:768px) {
  .events-table__row {
    grid-template-columns:96px minmax(0,240px) minmax(0,1fr);
    align-items:start;
    gap:1rem
  }

}
.events-table__row--with-image {
  grid-template-columns:96px minmax(0,1fr)
}
@media (min-width:768px) {
  .events-table__row--with-image {
    grid-template-columns:96px minmax(0,240px) minmax(0,1fr)
  }

}
.events-table__thumb {
  border:1px solid var(--border);
  aspect-ratio:16/10;
  background:#121214;
  overflow:hidden
}
.events-table__thumb img {
  object-fit:cover;
  width:100%;
  height:100%
}
.events-table__name {
  color:#fff;
  font-weight:600
}
.events-table__hint {
  color:var(--muted);
  margin-top:.2rem;
  font-size:.82rem
}
.events-table__schedule {
  color:var(--brand-strong);
  font-size:.86rem;
  line-height:1.55
}
.panel-shell__grid {
  align-items:start;
  gap:1.5rem;
  width:100%;
  display:grid
}
.panel-shell__content {
  width:100%;
  min-width:0
}
@media (min-width:1024px) {
  .panel-shell__grid {
    grid-template-columns:280px minmax(0,1fr);
    align-items:start;
    gap:2rem
  }

}
.panel-sidebar-stack {
  align-self:start;
  gap:.9rem;
  width:100%;
  min-width:0;
  display:grid;
  position:static
}
.panel-sidebar {
  border:1px solid var(--border);
  background:#0c0c0ed1;
  border-radius:.25rem;
  box-shadow:0 16px 40px #00000059
}
@media (max-width:1023px) {
  .panel-sidebar-stack {
    position:static;
    top:auto
  }

}
.panel-sidebar__logout-all {
  background:linear-gradient(145deg,#2a0c0ed1,#0c0c0ee6);
  border:1px solid #ef44443d;
  border-radius:.25rem;
  gap:.45rem;
  padding:1rem;
  display:grid;
  box-shadow:0 16px 40px #00000047
}
.panel-sidebar__logout-all strong {
  color:#f5f5f5;
  font-size:.86rem
}
.panel-sidebar__logout-all span {
  color:#a1a1aa;
  font-size:.75rem;
  line-height:1.45
}
.panel-sidebar__logout-all button {
  color:#fecaca;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  background:#7f1d1d52;
  border:1px solid #ef444473;
  border-radius:.25rem;
  margin-top:.35rem;
  padding:.65rem .75rem;
  font-size:.75rem;
  font-weight:800;
  transition:background-color .2s,border-color .2s
}
.panel-sidebar__logout-all button:hover {
  background:#991b1b80;
  border-color:#f87171cc
}
.panel-sidebar__profile {
  border-bottom:1px solid var(--border);
  background:linear-gradient(#c9a8601f,#0000);
  padding:1.25rem 1rem
}
.panel-sidebar__eyebrow,.panel-shell__eyebrow {
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand);
  font-size:.72rem;
  font-weight:600
}
.panel-sidebar__name {
  color:#fff;
  margin-top:.35rem;
  font-size:1.15rem;
  font-weight:600
}
.panel-sidebar__login {
  color:var(--muted);
  margin-top:.15rem;
  font-size:.82rem
}
.panel-sidebar__nav {
  padding:.75rem .5rem 1rem
}
.panel-sidebar__group+.panel-sidebar__group {
  border-top:1px solid #ffffff0f;
  margin-top:.85rem;
  padding-top:.85rem
}
.panel-sidebar__group-title {
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#c9a860b8;
  padding:0 .65rem .45rem;
  font-size:.68rem;
  font-weight:700
}
.panel-sidebar__link {
  color:#d4d4d8;
  border-radius:.25rem;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  padding:.62rem .75rem;
  font-size:.88rem;
  text-decoration:none;
  transition:background-color .2s,color .2s;
  display:flex
}
.panel-sidebar__link:hover {
  color:#fff;
  background:#ffffff0d
}
.panel-sidebar__link--active {
  color:var(--brand);
  background:#c9a86024
}
.panel-sidebar__badge {
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fca5a5;
  background:#ef44441f;
  border-radius:999px;
  flex-shrink:0;
  padding:.12rem .45rem;
  font-size:.62rem;
  font-weight:700
}
.panel-shell__header {
  margin-bottom:1.5rem
}
.panel-shell__title {
  font-family:var(--font-platypi), Georgia, serif;
  color:#fff;
  margin-top:.35rem;
  font-size:1.85rem;
  font-weight:600
}
.panel-shell__description {
  max-width:48rem;
  color:var(--muted);
  margin-top:.5rem;
  font-size:.95rem;
  line-height:1.6
}
.panel-card__header {
  margin-bottom:1rem
}
.panel-card__title {
  color:#fff;
  font-size:1.1rem;
  font-weight:600
}
.panel-card__subtitle {
  color:var(--muted);
  margin-top:.35rem;
  font-size:.9rem;
  line-height:1.55
}
.panel-note {
  color:#e4e4e7;
  background:#c9a86014;
  border:1px solid #c9a8602e;
  border-radius:.25rem;
  padding:.9rem 1rem;
  font-size:.88rem;
  line-height:1.6
}
.panel-note code {
  color:var(--brand)
}
.panel-alert {
  border-radius:.25rem;
  padding:.75rem .9rem;
  font-size:.88rem
}
.panel-alert--error {
  color:#fecaca;
  background:#ef44441f;
  border:1px solid #ef444459
}
.panel-alert--success {
  color:#bbf7d0;
  background:#22c55e1f;
  border:1px solid #22c55e59
}
.mbx__result-alert {
  z-index:5;
  text-align:center;
  width:min(100% - 1rem,44rem);
  margin:.65rem auto .15rem;
  position:relative;
  box-shadow:0 8px 24px #00000073
}
.mbx__warehouse-alert {
  z-index:5;
  color:#fee2e2;
  background:linear-gradient(135deg,#450a0afa,#140609fa);
  border:1px solid #f87171cc;
  border-radius:.5rem;
  align-items:center;
  gap:.7rem;
  width:min(100% - 1rem,28rem);
  margin:.65rem auto .15rem;
  padding:.65rem .8rem;
  font-size:.82rem;
  line-height:1.35;
  animation:.35s cubic-bezier(.2,1,.3,1) both mbx-warehouse-alert-in;
  display:flex;
  position:relative;
  box-shadow:0 8px 24px #00000080,0 0 18px #ef444440,inset 0 1px #ffffff1f
}
.mbx__warehouse-alert-icon {
  color:#fff;
  background:#ef444447;
  border:1px solid #fecaca;
  border-radius:50%;
  flex:0 0 2rem;
  place-items:center;
  width:2rem;
  height:2rem;
  font-size:1.15rem;
  font-weight:900;
  line-height:1;
  display:grid
}
.mbx__warehouse-alert strong {
  color:#fff;
  letter-spacing:.1em;
  margin-bottom:.1rem;
  font-size:.82rem;
  display:block
}
@keyframes mbx-warehouse-alert-in {
  0% {
    opacity:0;
    transform:translateY(-.6rem)scale(.97)
  }
to {
    opacity:1;
    transform:translateY(0)scale(1)
  }

}
.panel-card {
  background:#0c0c0eb8;
  border:1px solid #c9a86029;
  border-radius:.35rem
}
.inv-slot {
  background:#ffffff05;
  border:1px solid #ffffff14;
  border-radius:.25rem;
  align-items:center;
  gap:.65rem;
  padding:.65rem .75rem;
  display:flex
}
.inv-slot--filled {
  background:#c9a86014;
  border-color:#c9a86059
}
.inv-slot__meta {
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
  margin-bottom:.25rem;
  display:flex
}
.inv-slot__slot {
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#a1a1aa;
  font-size:.72rem
}
.inv-slot__name {
  color:#f4f4f5;
  font-size:.9rem
}
.inv-slot__name--empty {
  color:#71717a
}
.inv-dest {
  background:#00000040;
  border:1px solid #ffffff14;
  border-radius:.4rem;
  flex-direction:column;
  gap:.55rem;
  padding:.7rem .75rem;
  display:flex
}
.inv-dest__label {
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#a1a1aa;
  font-size:.72rem;
  font-weight:600
}
.inv-dest__tabs {
  grid-template-columns:1fr 1fr;
  gap:.35rem;
  display:grid
}
.inv-dest__tab {
  color:#d4d4d8;
  background:#ffffff08;
  border:1px solid #ffffff1a;
  border-radius:.3rem;
  padding:.45rem .5rem;
  font-size:.8rem;
  font-weight:600;
  transition:border-color .15s,background .15s,color .15s
}
.inv-dest__tab:hover {
  color:#f4f4f5;
  border-color:#c9a86059
}
.inv-dest__tab--active {
  color:#fde68a;
  background:#c9a86029;
  border-color:#c9a860b3
}
.inv-dest__equip {
  color:#a1a1aa;
  flex-direction:column;
  gap:.45rem;
  font-size:.72rem;
  display:flex
}
.inv-equip-picker__select {
  cursor:pointer;
  width:100%;
  max-width:16rem;
  padding:.5rem .65rem;
  font-size:.8rem
}
.inv-equip-picker {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.3rem;
  display:grid
}
.inv-equip-picker__btn {
  text-align:left;
  cursor:pointer;
  background:#ffffff08;
  border:1px solid #ffffff1a;
  border-radius:.3rem;
  flex-direction:column;
  align-items:flex-start;
  gap:.1rem;
  min-height:2.1rem;
  padding:.35rem .4rem;
  transition:border-color .15s,background .15s,color .15s;
  display:flex
}
.inv-equip-picker__btn:hover {
  background:#ffffff0d;
  border-color:#c9a86059
}
.inv-equip-picker__btn--active {
  background:#c9a86029;
  border-color:#fbbf24bf;
  box-shadow:inset 0 0 0 1px #fbbf2440
}
.inv-equip-picker__btn--occupied:not(.inv-equip-picker__btn--active) {
  border-color:#c9a86038
}
.inv-equip-picker__label {
  color:#e4e4e7;
  font-size:.72rem;
  font-weight:600;
  line-height:1.15
}
.inv-equip-picker__btn--active .inv-equip-picker__label {
  color:#fde68a
}
.inv-equip-picker__badge {
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#71717a;
  font-size:.55rem;
  font-weight:600
}
.inv-dest__hint {
  color:#71717a;
  margin:0;
  font-size:.72rem
}
.inv-dest__warn {
  color:#fca5a5;
  margin:0;
  font-size:.72rem
}
.inv-grid {
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:.35rem;
  display:grid
}
.inv-grid--inventory {
  background:#0000008c;
  border:0;
  border-radius:.2rem;
  grid-template-rows:repeat(8,34px);
  grid-template-columns:repeat(8,34px);
  gap:2px;
  width:max-content;
  max-width:100%;
  padding:2px;
  display:grid
}
.inv-grid--inventory .inv-grid__cell {
  aspect-ratio:auto;
  background:linear-gradient(#2a2826f2,#161618fa);
  border-color:#ffffff12;
  border-radius:2px;
  width:auto;
  min-width:0;
  height:auto;
  min-height:0
}
.inv-grid--inventory .inv-grid__cell--span,.inv-grid--warehouse .inv-grid__cell--span {
  z-index:1;
  background:#c9a86024;
  border-color:#c9a8608c;
  position:relative;
  overflow:hidden
}
.inv-grid--inventory .inv-grid__item-visual,.inv-grid--warehouse .inv-grid__item-visual {
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
  display:flex;
  position:relative;
  overflow:hidden
}
.inv-grid--inventory .inv-grid__item-visual--btn,.inv-grid--warehouse .inv-grid__item-visual--btn {
  color:inherit;
  cursor:pointer;
  background:0 0;
  border:0;
  margin:0;
  padding:0
}
.inv-grid--inventory .inv-grid__item-visual--btn:focus-visible,.inv-grid--warehouse .inv-grid__item-visual--btn:focus-visible {
  outline-offset:-2px;
  outline:2px solid #fbbf24bf
}
.inv-grid--inventory .inv-grid__cell--inspected,.inv-grid--warehouse .inv-grid__cell--inspected {
  z-index:2;
  background:#fbbf241f;
  box-shadow:inset 0 0 0 2px #fbbf24cc
}
.inv-grid--inventory .inv-grid__remove-form,.inv-grid--warehouse .inv-grid__remove-form {
  z-index:3;
  margin:0;
  padding:0;
  position:absolute;
  top:0;
  right:0
}
.inv-grid--inventory .inv-grid__remove-btn,.inv-grid--warehouse .inv-grid__remove-btn {
  color:#fca5a5;
  cursor:pointer;
  background:#000000b8;
  border:1px solid #ef444473;
  border-radius:.15rem;
  justify-content:center;
  align-items:center;
  width:14px;
  height:14px;
  margin:1px;
  padding:0;
  font-size:.72rem;
  font-weight:700;
  line-height:1;
  display:flex
}
.inv-grid--inventory .inv-grid__remove-btn:hover,.inv-grid--warehouse .inv-grid__remove-btn:hover {
  color:#fff;
  background:#7f1d1dd9;
  border-color:#ef4444bf
}
.inv-grid--inventory .inv-grid__remove-btn:disabled,.inv-grid--warehouse .inv-grid__remove-btn:disabled {
  opacity:.45;
  cursor:not-allowed
}
.inv-grid--inventory .inv-grid__item-form,.inv-grid--inventory .inv-grid__btn--span {
  width:100%;
  height:100%;
  padding:0;
  display:block;
  position:relative
}
.inv-grid--inventory .inv-grid__btn--span {
  justify-content:center;
  align-items:center;
  display:flex;
  overflow:hidden
}
.inv-grid--inventory .inv-grid__icon-fill.item-icon,.inv-grid--inventory .inv-grid__icon-fill,.inv-grid--warehouse .inv-grid__icon-fill.item-icon,.inv-grid--warehouse .inv-grid__icon-fill {
  object-position:center center;
  image-rendering:auto;
  filter:contrast(1.06)saturate(1.08);
  background:0 0;
  border:0;
  border-radius:0;
  flex:none;
  min-width:0;
  min-height:0;
  display:block;
  object-fit:contain!important;
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  max-height:100%!important
}
.inv-grid--inventory .inv-grid__level,.inv-grid--warehouse .inv-grid__level {
  color:#fde68a;
  text-shadow:0 1px 2px #000000e6;
  pointer-events:none;
  padding:0 2px;
  font-size:.55rem;
  font-weight:700;
  line-height:1.1;
  position:absolute;
  bottom:0;
  right:1px;
  display:block!important
}
.inv-grid--inventory .inv-grid__empty {
  font-size:0
}
.inv-bau__vault-frame--inv,.inv-bau__vault-frame--wh {
  width:max-content;
  max-width:100%;
  overflow:visible
}
.inv-grid--warehouse .inv-grid__cell {
  aspect-ratio:auto;
  border-color:#ffffff12;
  border-radius:2px;
  width:auto;
  height:auto
}
.inv-grid--warehouse .inv-grid__empty {
  font-size:0
}
.inv-grid--warehouse .inv-grid__btn {
  gap:.1rem;
  padding:.1rem .15rem
}
.inv-grid--warehouse .inv-grid__name {
  text-align:center;
  color:#fef3c7;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
  padding:0 1px;
  font-size:.58rem;
  font-weight:600;
  line-height:1.15;
  display:block;
  overflow:hidden
}
.inv-grid--warehouse .inv-grid__cell--span .inv-grid__name {
  white-space:normal;
  -webkit-line-clamp:4;
  word-break:break-word;
  -webkit-box-orient:vertical;
  display:-webkit-box
}
.inv-grid__cell {
  aspect-ratio:1;
  background:#00000047;
  border:1px solid #ffffff14;
  border-radius:.2rem;
  overflow:hidden
}
.inv-grid__cell--filled {
  background:#c9a8601f;
  border-color:#c9a86066
}
.inv-grid__cell--covered {
  background:#c9a8600f;
  border-color:#c9a86038
}
.inv-grid__empty {
  color:#52525b;
  justify-content:center;
  align-items:center;
  height:100%;
  font-size:.65rem;
  display:flex
}
.inv-grid__btn {
  color:#fef3c7;
  background:0 0;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:.1rem;
  width:100%;
  height:100%;
  padding:.15rem;
  font-size:.62rem;
  line-height:1.1;
  display:flex
}
.inv-grid__btn span {
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden
}
.item-icon {
  object-fit:contain;
  object-position:center;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
  background:0 0;
  border:1px solid #ffffff14;
  border-radius:.2rem;
  display:block
}
.item-icon--sm {
  width:28px;
  height:28px
}
.item-icon--md {
  width:40px;
  height:40px
}
.item-icon--lg {
  width:56px;
  height:56px
}
.item-icon--empty {
  background:#ffffff0a
}
.inv-slot--filled {
  align-items:center;
  gap:.65rem;
  display:flex
}
.inv-slot__body {
  flex:1;
  min-width:0
}
.inv-catalog-row {
  border-bottom:1px solid #ffffff0d;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:.65rem;
  padding-bottom:.75rem;
  display:flex
}
.inv-catalog-row__info {
  flex:1;
  min-width:140px
}
.inv-picker__cat-field {
  flex-direction:column;
  gap:.3rem;
  display:flex
}
.inv-picker__cat-label {
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#71717a;
  font-size:.68rem;
  font-weight:600
}
.inv-picker__select {
  cursor:pointer;
  width:100%;
  padding:.55rem .75rem;
  font-size:.82rem
}
.inv-picker__class-filter {
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  align-items:center;
  gap:.45rem;
  margin:0;
  display:flex
}
.inv-picker__class-filter-input {
  accent-color:#c9a860;
  cursor:pointer;
  width:.95rem;
  height:.95rem
}
.inv-picker__class-filter-text {
  color:#a1a1aa;
  font-size:.75rem
}
.inv-picker__cats {
  flex-wrap:wrap;
  gap:.4rem;
  display:flex
}
.inv-picker__cat {
  color:#d4d4d8;
  background:#ffffff08;
  border:1px solid #ffffff1a;
  border-radius:999px;
  align-items:center;
  gap:.35rem;
  padding:.35rem .75rem;
  font-size:.75rem;
  transition:border-color .15s,color .15s,background .15s;
  display:inline-flex
}
.inv-picker__cat:hover {
  color:#f4f4f5;
  border-color:#c9a86059
}
.inv-picker__cat--active {
  color:#fde68a;
  background:#c9a86024;
  border-color:#c9a860a6
}
.inv-picker__cat-count {
  color:#a1a1aa;
  background:#00000059;
  border-radius:999px;
  padding:.05rem .4rem;
  font-size:.65rem
}
.inv-picker {
  gap:1rem;
  display:grid
}
@media (min-width:1024px) {
  .inv-picker {
    grid-template-columns:1.35fr .85fr;
    align-items:start
  }

}
.inv-char__side {
  flex-flow:wrap;
  justify-self:start;
  align-items:start;
  gap:.85rem;
  width:max-content;
  max-width:100%;
  display:flex
}
.inv-char__detail-wrap {
  flex:none;
  align-self:start;
  width:20.75rem;
  max-width:100%
}
.inv-char__detail-wrap .inv-bau__compose-inline {
  grid-column:auto;
  width:100%;
  max-height:min(70vh,36rem);
  position:sticky;
  top:.75rem;
  overflow:hidden auto
}
.inv-char__detail-wrap .inv-bau__compose-fields {
  grid-template-columns:1fr 1fr
}
.inv-char__detail-wrap .inv-bau__checks {
  grid-column:1/-1
}
.inv-char__detail-wrap .inv-bau__exc label {
  max-width:100%
}
.inv-char__inspect-list {
  gap:.45rem;
  margin:.15rem 0 0;
  padding:0;
  display:grid
}
.inv-char__inspect-list>div {
  grid-template-columns:5.6rem minmax(0,1fr);
  align-items:start;
  gap:.35rem;
  font-size:.72rem;
  line-height:1.35;
  display:grid
}
.inv-char__inspect-list dt {
  color:#a8a29e;
  margin:0;
  font-weight:600
}
.inv-char__inspect-list dd {
  color:#e7e5e4;
  word-break:break-word;
  margin:0
}
.inv-char__inspect-exc {
  margin:0;
  padding-left:1rem
}
.inv-char__inspect-serial {
  font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:.68rem
}
.inv-item-tip {
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  inset:0
}
.inv-item-tip:hover,.inv-item-tip:focus-within {
  z-index:80
}
.inv-item-tip__panel {
  z-index:90;
  pointer-events:none;
  text-align:left;
  isolation:isolate;
  background:#16140f linear-gradient(#2a2418 0%,#16140f 55%,#0c0c0d 100%);
  border:1px solid #c9a8608c;
  border-radius:.35rem;
  width:max-content;
  max-width:15.5rem;
  padding:.55rem .65rem;
  display:none;
  position:absolute;
  top:0;
  left:calc(100% + .45rem);
  box-shadow:0 0 0 1px #000000a6,0 12px 32px #000000bf
}
.inv-item-tip--left .inv-item-tip__panel {
  left:auto;
  right:calc(100% + .45rem)
}
.inv-item-tip--top .inv-item-tip__panel {
  inset:auto auto calc(100% + .4rem) 50%;
  transform:translate(-50%)
}
.inv-item-tip:hover .inv-item-tip__panel,.inv-item-tip:focus-within .inv-item-tip__panel {
  display:block
}
.inv-item-tip__panel--portal {
  z-index:1000;
  display:block;
  position:fixed
}
.inv-item-tip__name {
  color:#f5e6c8;
  font-size:.78rem;
  font-weight:700;
  line-height:1.25
}
.inv-item-tip__quality {
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-top:.2rem;
  font-size:.68rem;
  font-weight:700
}
.inv-item-tip__quality--common,.inv-item-tip__name.inv-item-tip__quality--common {
  color:#d4d4d8
}
.inv-item-tip__quality--excellent,.inv-item-tip__name.inv-item-tip__quality--excellent,.inv-bau__compose-name.inv-item-tip__quality--excellent {
  color:#86efac
}
.inv-item-tip__quality--ancient,.inv-item-tip__name.inv-item-tip__quality--ancient,.inv-bau__compose-name.inv-item-tip__quality--ancient {
  color:#19ff32
}
.inv-item-tip__quality--wing,.inv-item-tip__name.inv-item-tip__quality--wing,.inv-bau__compose-name.inv-item-tip__quality--wing {
  color:#f5d76e
}
.inv-item-tip__meta {
  color:#a8a29e;
  margin-top:.15rem;
  font-size:.65rem
}
.inv-item-tip__stats {
  color:#e7e5e4;
  gap:.18rem;
  margin:.4rem 0 0;
  padding:0;
  font-size:.68rem;
  line-height:1.3;
  list-style:none;
  display:grid
}
.inv-item-tip__exc {
  gap:.12rem;
  display:grid
}
.inv-item-tip__exc-list {
  gap:.1rem;
  margin:.1rem 0 0;
  padding:0;
  list-style:none;
  display:grid
}
.inv-item-tip__exc-list li {
  color:#e4c989
}
.inv-equip-doll,.inv-equip-doll__overlay,.inv-equip-doll__slot,.inv-grid--inventory,.inv-grid--inventory .inv-grid__cell--filled,.inv-grid--warehouse,.inv-grid--warehouse .inv-grid__cell--filled,.inv-bau__vault-frame--inv,.inv-bau__vault-frame--wh,.inv-char__stage,.inv-char__equip,.inv-bau__vault {
  overflow:visible
}
.inv-equip-doll__slot:hover,.inv-equip-doll__slot:focus-within,.inv-grid--inventory .inv-grid__cell--filled:hover,.inv-grid--inventory .inv-grid__cell--filled:focus-within,.inv-grid--warehouse .inv-grid__cell--filled:hover,.inv-grid--warehouse .inv-grid__cell--filled:focus-within {
  z-index:70
}
.inv-equip-doll__slot .inv-item-tip .inv-equip-doll__item-visual {
  position:absolute;
  inset:0
}
.inv-grid--inventory .inv-item-tip,.inv-grid--warehouse .inv-item-tip {
  z-index:2
}
.inv-grid--inventory .inv-item-tip:hover,.inv-grid--inventory .inv-item-tip:focus-within,.inv-grid--warehouse .inv-item-tip:hover,.inv-grid--warehouse .inv-item-tip:focus-within {
  z-index:80
}
.inv-grid--inventory .inv-item-tip .inv-grid__item-visual,.inv-grid--warehouse .inv-item-tip .inv-grid__item-visual {
  width:100%;
  height:100%
}
@media (max-width:1099px) {
  .inv-char__side {
    flex-direction:column;
    align-items:center;
    width:100%
  }
.inv-char__detail-wrap {
    width:min(100%,22rem)
  }

}
.inv-char__stage,.inv-bau__stage {
  background:linear-gradient(#12110fd1,#08080aeb);
  border:1px solid #c9a86029;
  border-radius:.55rem;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  width:100%;
  padding:1rem 1.1rem 1.15rem;
  display:flex;
  box-shadow:inset 0 1px #ffffff0a
}
.inv-bau__stage {
  flex-flow:wrap;
  justify-content:center;
  align-items:start;
  width:max-content;
  max-width:100%
}
.inv-char__side .inv-bau__vault {
  width:calc(290px + .9rem);
  max-width:100%
}
.inv-bau__stage .inv-bau__vault {
  width:max-content;
  max-width:100%
}
.inv-char__zen {
  color:#a1a1aa;
  flex-direction:column;
  gap:.2rem;
  font-size:.68rem;
  display:flex
}
.inv-char__zen .input {
  width:7.5rem;
  padding:.35rem .5rem;
  font-size:.8rem
}
.inv-char__equip-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.3rem;
  width:calc(290px + .9rem);
  max-width:100%;
  display:grid
}
.inv-equip-doll {
  aspect-ratio:351/250;
  -webkit-user-select:none;
  user-select:none;
  width:min(100%,351px);
  margin-inline:auto;
  line-height:0;
  display:block;
  position:relative;
  overflow:hidden
}
.inv-equip-doll__bg {
  object-fit:fill;
  object-position:center center;
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
  width:100%;
  max-width:none;
  height:100%;
  display:block;
  position:absolute;
  inset:0
}
.inv-equip-doll__overlay {
  pointer-events:none;
  position:absolute;
  inset:0
}
.inv-equip-doll__overlay .inv-equip-doll__slot {
  pointer-events:auto
}
.inv-equip-doll__slot {
  z-index:1;
  border-radius:.15rem;
  justify-content:center;
  align-items:center;
  transition:box-shadow .15s,background .15s;
  display:flex;
  position:absolute;
  overflow:visible
}
.inv-equip-doll__slot--selected {
  z-index:2;
  background:#fbbf2414;
  box-shadow:inset 0 0 0 2px #fbbf24d9
}
.inv-equip-doll__slot--inspected {
  z-index:2;
  background:#fbbf241a;
  box-shadow:inset 0 0 0 2px #fbbf24d9
}
.inv-equip-doll__slot--selectable {
  cursor:pointer
}
.inv-equip-doll__slot--blocked {
  cursor:not-allowed
}
.inv-equip-doll__slot--blocked:not(.inv-equip-doll__slot--filled) {
  opacity:.35
}
.inv-equip-doll__slot--blocked.inv-equip-doll__slot--filled .inv-equip-doll__btn--pick {
  cursor:not-allowed
}
.inv-equip-doll__slot--selectable.inv-equip-doll__slot--filled:hover {
  background:#c9a8601a
}
.inv-equip-doll__item-visual {
  pointer-events:none;
  z-index:1;
  justify-content:center;
  align-items:center;
  display:flex;
  position:absolute;
  inset:0
}
.inv-equip-doll__item-visual--btn {
  color:inherit;
  cursor:pointer;
  pointer-events:auto;
  background:0 0;
  border:0;
  margin:0;
  padding:0
}
.inv-equip-doll__item-visual--btn:focus-visible {
  outline-offset:-2px;
  outline:2px solid #fbbf24bf
}
.inv-equip-doll__remove-form {
  z-index:3;
  margin:0;
  padding:0;
  position:absolute;
  top:0;
  right:0
}
.inv-equip-doll__remove-btn {
  color:#fca5a5;
  cursor:pointer;
  background:#000000b8;
  border:1px solid #ef444473;
  border-radius:.15rem;
  justify-content:center;
  align-items:center;
  width:14px;
  height:14px;
  margin:1px;
  padding:0;
  font-size:.72rem;
  font-weight:700;
  line-height:1;
  display:flex
}
.inv-equip-doll__remove-btn:hover {
  color:#fff;
  background:#7f1d1dd9;
  border-color:#ef4444bf
}
.inv-equip-doll__remove-btn:disabled {
  opacity:.45;
  cursor:not-allowed
}
.inv-equip-doll__btn--pick {
  z-index:0;
  position:absolute;
  inset:0
}
.inv-equip-doll__slot--filled:not(.inv-equip-doll__slot--selected):not(.inv-equip-doll__slot--inspected) {
  box-shadow:none;
  background:0 0
}
.inv-equip-doll__slot--filled:not(.inv-equip-doll__slot--selected):not(.inv-equip-doll__slot--inspected):hover {
  background:#c9a86014;
  box-shadow:inset 0 0 0 1px #c9a86059
}
.inv-equip-doll__form,.inv-equip-doll__btn {
  cursor:pointer;
  background:0 0;
  border:0;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  display:flex;
  position:relative;
  overflow:hidden
}
.inv-equip-doll__btn--item {
  isolation:isolate
}
.inv-equip-doll__btn--pick {
  cursor:pointer
}
.inv-equip-doll__btn--pick:hover {
  background:#ffffff0a
}
.inv-equip-doll__btn--empty {
  pointer-events:none
}
.inv-equip-doll__icon-wrap {
  width:calc(100% * var(--inv-equip-scale,1));
  height:calc(100% * var(--inv-equip-scale,1));
  pointer-events:none;
  justify-content:center;
  align-items:center;
  display:flex;
  overflow:hidden
}
.inv-equip-doll__icon.item-icon,.inv-equip-doll__icon {
  object-position:center center;
  image-rendering:auto;
  pointer-events:none;
  border-radius:0;
  min-width:0;
  min-height:0;
  display:block;
  object-fit:contain!important;
  background:0 0!important;
  border:0!important;
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  max-height:100%!important
}
.item-icon--fill {
  width:100%;
  height:100%
}
.item-icon--plate {
  background:0 0!important;
  border:0!important
}
.inv-equip-doll__level {
  color:#fde68a;
  text-shadow:0 1px 2px #000000d9;
  pointer-events:none;
  font-size:.58rem;
  font-weight:700;
  line-height:1;
  position:absolute;
  bottom:1px;
  right:2px
}
.inv-char__equip {
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  width:100%;
  max-width:351px;
  display:flex
}
.inv-char__equip-slot {
  background:#00000047;
  border:1px solid #ffffff14;
  border-radius:.25rem;
  flex-direction:column;
  align-items:center;
  gap:.15rem;
  min-height:3.35rem;
  padding:.25rem .2rem;
  display:flex
}
.inv-char__equip-slot--filled {
  background:#c9a8601a;
  border-color:#c9a86066
}
.inv-char__equip-form,.inv-char__equip-form button {
  width:100%;
  color:inherit;
  cursor:pointer;
  background:0 0;
  border:0;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  padding:0;
  display:flex
}
.inv-char__equip-empty {
  background:#ffffff08;
  border:1px dashed #ffffff1f;
  border-radius:.2rem;
  width:24px;
  height:24px;
  display:block
}
.inv-char__equip-label {
  text-align:center;
  color:#a1a1aa;
  font-size:.55rem;
  line-height:1.15
}
.inv-char__equip-slot--filled .inv-char__equip-label {
  color:#e8d5a8
}
.inv-bau {
  background:linear-gradient(#1c1a16eb,#0c0c0ef5);
  border:1px solid #c9a8602e;
  border-radius:.55rem;
  flex-direction:column;
  gap:1rem;
  padding:1rem 1.1rem 1.15rem;
  display:flex;
  box-shadow:inset 0 1px #ffffff0a
}
.inv-bau__head {
  border-bottom:1px solid #ffffff12;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:.75rem 1rem;
  padding-bottom:.85rem;
  display:flex
}
.inv-bau__title {
  letter-spacing:.02em;
  color:#f5e6c8;
  margin:0;
  font-size:1.05rem;
  font-weight:650
}
.inv-bau__sub {
  color:#a1a1aa;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;
  margin:.25rem 0 0;
  font-size:.78rem;
  display:flex
}
.inv-bau__badge {
  color:#d4d4d8;
  background:#ffffff0a;
  border:1px solid #ffffff1f;
  border-radius:999px;
  align-items:center;
  padding:.12rem .55rem;
  font-size:.68rem;
  display:inline-flex
}
.inv-bau__badge--warn {
  color:#fecaca;
  background:#f871711f;
  border-color:#f8717173
}
.inv-bau__head-actions {
  flex-wrap:wrap;
  align-items:flex-end;
  gap:.55rem;
  display:flex
}
.inv-bau__head-buttons {
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem;
  display:inline-flex
}
.inv-bau__head-form {
  margin:0;
  display:inline-flex
}
.inv-bau__top-bar {
  top:calc(var(--top-chrome-height) + .35rem);
  z-index:4;
  background:#181612f7;
  border-bottom:1px solid #ffffff12;
  align-items:center;
  gap:.55rem;
  margin-bottom:.55rem;
  padding-block:.45rem .55rem;
  display:grid;
  position:sticky;
  box-shadow:0 6px 14px #00000047
}
.inv-bau__top-bar .inv-bau__head {
  border-bottom:none;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:.35rem .65rem;
  padding-bottom:0;
  display:grid
}
.inv-bau__top-bar .inv-bau__title {
  font-size:.92rem;
  line-height:1.15
}
.inv-bau__top-bar .inv-bau__sub {
  gap:.35rem;
  margin-top:.12rem;
  font-size:.72rem;
  line-height:1.2
}
.inv-bau__top-bar .inv-bau__head-actions {
  flex-flow:row;
  align-items:center;
  gap:.4rem;
  display:flex
}
.inv-bau__top-bar .inv-char__zen {
  white-space:nowrap;
  flex-direction:row;
  align-items:center;
  gap:.35rem;
  font-size:.65rem
}
.inv-bau__top-bar .inv-char__zen .input {
  width:6.25rem;
  padding:.28rem .45rem;
  font-size:.74rem
}
.inv-bau__top-bar .inv-bau__head-buttons {
  gap:.28rem
}
.inv-bau__top-bar .inv-bau__toolbar {
  gap:.35rem
}
.inv-bau__top-bar .inv-item-search__input {
  padding-block:.38rem;
  font-size:.82rem
}
@media (min-width:900px) {
  .inv-char .inv-bau__top-bar {
    grid-template-columns:minmax(0,1fr) auto
  }

}
@media (min-width:1100px) {
  .inv-char .inv-bau__top-bar {
    grid-template-columns:21.5rem minmax(0,1fr)
  }

}
.inv-bau__body {
  align-items:start;
  gap:1rem;
  display:grid
}
@media (min-width:1100px) {
  .inv-bau__body {
    grid-template-columns:21.5rem minmax(0,1fr);
    gap:.85rem
  }
.inv-bau__catalog {
    align-self:start
  }
.inv-bau__catalog-grid-wrap {
    flex:0 auto
  }
.inv-bau__compose {
    flex-shrink:0
  }
.inv-char__side,.inv-bau__stage {
    justify-self:start;
    width:max-content;
    max-width:100%
  }
.inv-char__stage,.inv-bau__stage {
    width:max-content
  }

}
.inv-bau__catalog {
  flex-direction:column;
  gap:.7rem;
  min-width:0;
  display:flex
}
.inv-bau__toolbar {
  flex-direction:column;
  gap:.55rem;
  display:flex
}
.inv-bau__search {
  gap:.4rem;
  display:flex
}
.inv-bau__search .input {
  flex:1;
  min-width:0
}
.inv-item-search {
  width:100%;
  position:relative
}
.inv-item-search__field {
  align-items:center;
  display:flex;
  position:relative
}
.inv-item-search__input {
  color:#f4f4f5;
  background:#00000059;
  border:1px solid #ffffff1a;
  border-radius:.35rem;
  outline:none;
  width:100%;
  padding:.5rem 1.6rem .5rem .65rem;
  font-size:.88rem;
  line-height:1.2;
  transition:border-color .15s,box-shadow .15s
}
.inv-item-search__input::placeholder {
  color:#71717a
}
.inv-item-search__input:focus {
  border-color:#c9a86073;
  box-shadow:0 0 0 2px #c9a8601f
}
.inv-item-search__spinner {
  border:2px solid #c9a86040;
  border-top-color:#c9a860d9;
  border-radius:999px;
  width:.75rem;
  height:.75rem;
  animation:.7s linear infinite inv-item-search-spin;
  position:absolute;
  right:.55rem
}
@keyframes inv-item-search-spin {
  to {
    transform:rotate(360deg)
  }

}
.inv-item-search__suggest {
  z-index:30;
  background:#0e0d0cfa;
  border:1px solid #c9a86038;
  border-radius:.4rem;
  margin:0;
  padding:.25rem;
  list-style:none;
  position:absolute;
  top:calc(100% + .25rem);
  left:0;
  right:0;
  box-shadow:0 10px 28px #00000073
}
.inv-item-search__option {
  text-align:left;
  color:#e4e4e7;
  cursor:pointer;
  background:0 0;
  border:0;
  border-radius:.3rem;
  align-items:center;
  gap:.45rem;
  width:100%;
  padding:.35rem .4rem;
  display:flex
}
.inv-item-search__option:hover,.inv-item-search__option--active {
  background:#c9a8601f
}
.inv-item-search__option-text {
  flex-direction:column;
  gap:.08rem;
  min-width:0;
  display:flex
}
.inv-item-search__option-name {
  color:#f4f4f5;
  font-size:.88rem;
  font-weight:600
}
.inv-item-search__option-meta {
  color:#71717a;
  font-size:.62rem
}
.inv-bau__catalog-grid-wrap {
  background:#00000059;
  border:1px solid #ffffff14;
  border-radius:.4rem;
  padding:.4rem
}
.inv-bau__catalog-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.45rem;
  display:grid
}
@media (min-width:1100px) {
  .inv-bau__catalog-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}
.inv-bau__tile {
  text-align:center;
  color:#d4d4d8;
  background:#ffffff06;
  border:1px solid #ffffff12;
  border-radius:.28rem;
  flex-direction:column;
  align-items:center;
  gap:.28rem;
  padding:.45rem .35rem .4rem;
  transition:border-color .15s,background .15s,transform .15s;
  display:flex
}
.inv-bau__tile:hover {
  background:#c9a86014;
  border-color:#c9a86066
}
.inv-bau__tile--active {
  background:#ffffff06;
  border-color:#c9a860bf;
  box-shadow:inset 0 0 0 1px #c9a86073
}
.inv-bau__tile span {
  -webkit-line-clamp:2;
  color:#e4e4e7;
  -webkit-box-orient:vertical;
  max-width:100%;
  font-size:.8rem;
  font-weight:600;
  line-height:1.2;
  display:-webkit-box;
  overflow:hidden
}
.inv-bau__empty-msg {
  text-align:center;
  color:#71717a;
  margin:0;
  padding:1.5rem .75rem;
  font-size:.85rem
}
.inv-bau__compose {
  background:#00000047;
  border:1px solid #ffffff14;
  border-radius:.4rem;
  padding:.65rem .75rem
}
.inv-bau__compose--open {
  background:#c9a8600f;
  border-color:#c9a86047
}
.inv-bau__compose-hint {
  color:#71717a;
  margin:0;
  font-size:.8rem
}
.inv-bau__compose-inline {
  background:#0000006b;
  border:1px solid #c9a86047;
  border-radius:.4rem;
  grid-column:1/-1;
  padding:.55rem .65rem .65rem
}
.inv-bau__compose-inline__head {
  border-bottom:1px solid #ffffff14;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
  margin-bottom:.45rem;
  padding-bottom:.35rem;
  display:flex
}
.inv-bau__compose-inline__label {
  color:#d4d4d8;
  font-size:.72rem;
  font-weight:600
}
.inv-bau__compose-inline__close {
  color:#d4d4d8;
  cursor:pointer;
  background:#00000059;
  border:1px solid #ffffff1f;
  border-radius:.25rem;
  justify-content:center;
  align-items:center;
  width:1.45rem;
  height:1.45rem;
  font-size:1rem;
  line-height:1;
  display:flex
}
.inv-bau__compose-inline__close:hover {
  color:#fca5a5;
  border-color:#ef444473
}
.inv-bau__compose-form {
  flex-direction:column;
  gap:.55rem;
  display:flex
}
.inv-bau__compose-head {
  border-bottom:1px solid #ffffff14;
  align-items:center;
  gap:.55rem;
  padding-bottom:.45rem;
  display:flex
}
.inv-bau__compose-add {
  flex-shrink:0;
  min-width:auto;
  margin-left:auto
}
.inv-bau__compose-advanced {
  background:#0000002e;
  border:1px solid #ffffff14;
  border-radius:.35rem;
  padding:.35rem .55rem
}
.inv-bau__compose-advanced>summary {
  cursor:pointer;
  color:#a1a1aa;
  -webkit-user-select:none;
  user-select:none;
  font-size:.72rem;
  list-style-position:outside
}
.inv-bau__compose-actions {
  flex-wrap:wrap;
  gap:.35rem;
  margin-top:.35rem;
  display:flex
}
.inv-bau__compose-actions .btn-compact {
  min-width:auto;
  padding:.22rem .5rem;
  font-size:.65rem
}
.inv-bau__compose-advanced[open]>summary {
  color:#d4d4d8;
  margin-bottom:.45rem
}
.inv-bau__compose-advanced .inv-bau__compose-fields {
  margin-top:.35rem
}
.inv-bau__compose-advanced .inv-bau__exc {
  margin-top:.45rem
}
.inv-bau__compose-item {
  align-items:center;
  gap:.65rem;
  display:flex
}
.inv-bau__compose-name {
  color:#f4f4f5;
  font-size:1rem;
  font-weight:600
}
.inv-bau__compose-meta {
  color:#a1a1aa;
  margin-top:.1rem;
  font-size:.72rem
}
.inv-bau__compose-fields {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.45rem;
  display:grid
}
.inv-bau__compose-fields label {
  color:#a1a1aa;
  flex-direction:column;
  gap:.25rem;
  font-size:.68rem;
  display:flex
}
.inv-bau__checks {
  align-items:flex-end;
  color:#d4d4d8!important;
  flex-direction:row!important;
  gap:.75rem!important;
  font-size:.75rem!important
}
.inv-bau__checks span {
  align-items:center;
  gap:.3rem;
  display:inline-flex
}
.inv-bau__exc {
  flex-wrap:wrap;
  gap:.35rem;
  display:flex
}
.inv-bau__exc label {
  color:#d4d4d8;
  border:1px solid #ffffff1a;
  border-radius:.25rem;
  align-items:center;
  gap:.3rem;
  padding:.2rem .45rem;
  font-size:.68rem;
  display:inline-flex
}
@media (max-width:640px) {
  .register-channel__options {
    grid-template-columns:1fr
  }
.inv-bau__compose-fields {
    grid-template-columns:1fr 1fr
  }
.inv-bau__checks {
    grid-column:1/-1
  }

}
.inv-bau__vault-head {
  justify-content:space-between;
  align-items:baseline;
  gap:.75rem;
  margin-bottom:.55rem;
  display:flex
}
.inv-bau__vault-head h3 {
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#e8d5a8;
  margin:0;
  font-size:.85rem;
  font-weight:650
}
.inv-bau__vault-head span {
  color:#a1a1aa;
  font-size:.72rem
}
.inv-bau__vault-frame {
  background:linear-gradient(145deg,#373430e6,#121214f2);
  border:1px solid #b4aa9659;
  border-radius:.35rem;
  padding:.45rem;
  box-shadow:inset 0 0 0 1px #00000073,0 8px 24px #00000059
}
.inv-bau__vault-tip {
  color:#71717a;
  margin:.55rem 0 0;
  font-size:.7rem
}
.editor-leave-modal {
  z-index:80;
  justify-content:center;
  align-items:center;
  padding:1rem;
  display:flex;
  position:fixed;
  inset:0
}
.editor-leave-modal__backdrop {
  cursor:pointer;
  background:#000000b8;
  border:0;
  position:absolute;
  inset:0
}
.editor-leave-modal__panel {
  z-index:1;
  width:min(100%,28rem);
  padding:1.25rem;
  position:relative
}
.editor-leave-modal__warn {
  color:#fbbf24;
  margin:0 0 .85rem;
  font-size:.82rem
}
.editor-leave-modal__actions {
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:1rem;
  display:flex
}
.inv-grid--warehouse {
  background:#0000008c;
  border:0;
  border-radius:.2rem;
  grid-template-rows:repeat(15,34px);
  grid-template-columns:repeat(8,34px);
  gap:2px;
  width:max-content;
  max-width:100%;
  max-height:none;
  padding:2px;
  display:grid;
  overflow:visible
}
.inv-grid--warehouse .inv-grid__cell {
  aspect-ratio:auto;
  background:linear-gradient(#2a2826f2,#161618fa);
  border-color:#ffffff12;
  border-radius:2px;
  width:auto;
  min-width:0;
  height:auto;
  min-height:0
}
.inv-grid--warehouse .inv-grid__cell--span {
  z-index:1;
  background:#c9a86024;
  border-color:#c9a8608c;
  position:relative;
  overflow:hidden
}
.inv-grid--warehouse .inv-grid__item-form,.inv-grid--warehouse .inv-grid__btn--span {
  width:100%;
  height:100%;
  padding:0;
  display:block;
  position:relative
}
.inv-grid--warehouse .inv-grid__btn--span {
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:.1rem;
  display:flex
}
.inv-grid--warehouse .inv-grid__level {
  color:#fde68a;
  text-shadow:0 1px 2px #000000e6;
  pointer-events:none;
  padding:0 2px;
  font-size:.55rem;
  font-weight:700;
  line-height:1.1;
  position:absolute;
  bottom:0;
  right:1px;
  display:block!important
}
.inv-picker--bau {
  grid-template-columns:1fr
}
.inv-picker--bau .inv-picker__grid-wrap {
  padding:.45rem
}
.inv-picker--bau .inv-picker__grid {
  grid-template-columns:repeat(auto-fill,minmax(4.1rem,1fr));
  gap:.3rem
}
.inv-picker--bau .inv-picker__item {
  gap:.2rem;
  padding:.3rem .2rem
}
.inv-picker--bau .inv-picker__item-name {
  -webkit-line-clamp:2;
  font-size:.58rem
}
.inv-picker--bau .inv-picker__detail {
  min-height:0;
  padding:.75rem
}
.inv-picker--bau .inv-picker__empty {
  min-height:5rem;
  font-size:.8rem
}
.inv-picker__grid-wrap {
  background:#00000038;
  border:1px solid #ffffff14;
  border-radius:.35rem;
  padding:.65rem
}
.inv-picker__grid {
  grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));
  gap:.45rem;
  display:grid
}
.inv-picker__item {
  text-align:center;
  background:#ffffff05;
  border:1px solid #ffffff14;
  border-radius:.3rem;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  padding:.45rem .3rem;
  transition:border-color .15s,background .15s;
  display:flex
}
.inv-picker__item:hover {
  background:#c9a86014;
  border-color:#c9a86066
}
.inv-picker__item--active {
  background:#c9a86029;
  border-color:#c9a860bf;
  box-shadow:0 0 0 1px #c9a86040
}
.inv-picker__item-name {
  -webkit-line-clamp:2;
  color:#d4d4d8;
  -webkit-box-orient:vertical;
  max-width:100%;
  font-size:.65rem;
  line-height:1.2;
  display:-webkit-box;
  overflow:hidden
}
.inv-picker__detail {
  background:#00000047;
  border:1px solid #ffffff14;
  border-radius:.35rem;
  min-height:12rem;
  padding:1rem
}
.inv-picker__form {
  flex-direction:column;
  gap:.85rem;
  display:flex
}
.inv-picker__empty {
  text-align:center;
  color:#71717a;
  justify-content:center;
  align-items:center;
  height:100%;
  min-height:10rem;
  padding:1rem;
  font-size:.875rem;
  display:flex
}
.inv-grid__btn {
  gap:.05rem
}
.inv-grid__btn .item-icon:not(.inv-grid__icon-fill) {
  object-position:center center;
  image-rendering:auto;
  background:0 0;
  border:0;
  width:90%;
  height:90%;
  object-fit:contain!important
}
.inv-bau__tile .item-icon {
  object-position:center center;
  image-rendering:auto;
  background:0 0;
  border:0;
  object-fit:contain!important;
  width:22px!important;
  height:22px!important
}
.mbx-sfx-orb {
  right:max(1rem, env(safe-area-inset-right,0px));
  bottom:max(1rem, env(safe-area-inset-bottom,0px));
  z-index:92;
  color:#a8a29e;
  cursor:pointer;
  pointer-events:auto;
  background:radial-gradient(circle at 35% 28%,#e4c98938,#0000 55%),linear-gradient(#241f18fa,#0c0b0afa);
  border:1px solid #c9a8608c;
  border-radius:999px;
  flex-shrink:0;
  place-items:center;
  width:1.95rem;
  height:1.95rem;
  margin:0;
  transition:border-color .2s,color .2s,box-shadow .2s,transform .12s;
  display:grid;
  position:fixed;
  box-shadow:inset 0 1px #ffffff14,inset 0 -4px 8px #00000073,0 4px 12px #00000059
}
.mbx-sfx-orb:hover {
  color:#e8d5a8;
  border-color:#c9a860bf;
  box-shadow:inset 0 1px #ffffff1a,inset 0 -6px 12px #00000073,0 12px 26px #0000008c,0 0 16px #c9a8602e
}
.mbx-sfx-orb:active {
  transform:translateY(1px)scale(.97)
}
.mbx-sfx-orb--on {
  color:#f0d78a;
  border-color:#c9a860b8;
  box-shadow:inset 0 1px #ffffff1a,inset 0 -6px 12px #00000073,0 10px 24px #00000080,0 0 14px #c9a86047
}
.mbx-sfx-orb--off {
  color:#78716c;
  opacity:.9
}
.mbx-sfx-orb__icon {
  place-items:center;
  width:1.05rem;
  height:1.05rem;
  display:grid
}
.mbx-sfx-orb__icon svg {
  width:100%;
  height:100%
}
@media (max-width:640px) {
  .mbx-sfx-orb {
    width:2.15rem;
    height:2.15rem
  }

}
.mbx__hero {
  overflow-anchor:none;
  flex-direction:column;
  align-items:center;
  gap:1.25rem;
  display:flex
}
.mbx-toast-stack {
  z-index:20000;
  pointer-events:none;
  flex-direction:column;
  gap:.45rem;
  width:min(23rem,100vw - 2rem);
  display:flex;
  position:fixed;
  top:1rem;
  left:1rem
}
.mbx-toast {
  color:#f4f4f5;
  background:#0c0c0ef5;
  border:1px solid #ffffff29;
  border-radius:.35rem;
  padding:.72rem .85rem;
  font-size:.82rem;
  line-height:1.4;
  animation:.18s ease-out both mbx-toast-in;
  box-shadow:0 8px 24px #0000008c
}
.mbx-toast--error {
  color:#fecaca;
  background:#300a0ef7;
  border-color:#ef4444a6
}
.mbx-toast--success {
  color:#bbf7d0;
  background:#052814f7;
  border-color:#22c55e94
}
@keyframes mbx-toast-in {
  0% {
    opacity:0;
    transform:translate(-.75rem)
  }

}
.mbx__box-heading {
  text-align:center;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  display:flex
}
.mbx__back-link {
  min-height:2.25rem;
  font:inherit;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#e7d7a5;
  cursor:pointer;
  background:linear-gradient(#382d19d1,#14110ceb);
  border:1px solid #f0d78a73;
  border-radius:.35rem;
  justify-content:center;
  align-items:center;
  padding:.45rem .9rem;
  font-size:.78rem;
  text-decoration:none;
  transition:border-color .16s,color .16s,background .16s,transform .16s;
  display:inline-flex;
  box-shadow:inset 0 0 12px #fbbf240f
}
.mbx__mural-footer {
  justify-content:flex-start;
  width:100%;
  padding:.65rem 0 0;
  display:flex
}
.mbx__mural-footer .mbx__back-link {
  color:#f6dfa0;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:linear-gradient(#4d3614e6,#1c1208f5);
  border-color:#d4a8429e;
  border-radius:.35rem;
  gap:.45rem;
  min-width:7rem;
  min-height:2.5rem;
  padding:.5rem 1rem;
  font-size:.75rem;
  font-weight:700;
  box-shadow:inset 0 1px #ffe69d2e,0 4px 12px #00000061
}
.mbx__mural-footer .mbx__back-link span {
  font-family:Georgia,serif;
  font-size:1.35rem;
  line-height:0;
  transition:transform .16s
}
.mbx__mural-footer .mbx__back-link:hover span {
  transform:translate(-2px)
}
.mbx__back-link:hover {
  color:#fff1b8;
  background:linear-gradient(#4c3a1ae6,#1b150cf5);
  border-color:#fbbf24cc;
  transform:translateY(-1px)
}
.mbx__back-link:focus-visible {
  outline-offset:3px;
  outline:2px solid #facc15
}
.mbx__box-title {
  font-family:var(--font-platypi), Georgia, serif;
  color:#fde68a;
  text-shadow:0 0 12px #fbbf2440;
  margin:0;
  font-size:clamp(1.15rem,3vw,1.45rem);
  font-weight:700
}
.mbx-catalog {
  flex-direction:column;
  gap:1.5rem;
  max-width:56rem;
  margin:0 auto;
  display:flex
}
.mbx-catalog__head {
  text-align:center
}
.mbx-catalog__title {
  font-family:var(--font-platypi), Georgia, serif;
  color:#fde68a;
  margin:0;
  font-size:1.35rem
}
.mbx-catalog__subtitle {
  color:#a8a29e;
  margin:.35rem 0 0;
  font-size:.9rem
}
.mbx-catalog__grid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),27.5rem));
  justify-content:center;
  gap:1.25rem;
  margin:0;
  padding:0;
  list-style:none;
  display:grid
}
.mbx-catalog__card {
  isolation:isolate;
  width:100%;
  min-height:31rem;
  color:inherit;
  font:inherit;
  background:linear-gradient(#191a21fa,#0d0e13fc);
  border:1px solid #c9a86038;
  border-radius:0;
  flex-direction:column;
  align-items:center;
  gap:0;
  padding:0 1.85rem 1.85rem;
  text-decoration:none;
  transition:border-color .2s,transform .15s,box-shadow .2s;
  display:flex;
  position:relative;
  overflow:hidden
}
.mbx-catalog__card:hover {
  border-color:#cf3e30d1;
  transform:translateY(-3px);
  box-shadow:0 18px 38px #00000085,0 0 24px #b4312529
}
.mbx-catalog__card-head {
  text-align:left;
  font-family:var(--font-platypi), Georgia, serif;
  color:#f8f3e8;
  border-bottom:1px solid #ca4132eb;
  align-self:stretch;
  margin:0 -1.85rem 1.25rem;
  padding:1.35rem 1.85rem 1.05rem;
  font-size:1.22rem;
  position:relative
}
.mbx-catalog__card-head:after {
  content:"";
  background:linear-gradient(90deg,#9f271f,#da513f);
  width:34%;
  height:3px;
  position:absolute;
  bottom:-2px;
  left:0;
  box-shadow:0 0 12px #da513f59
}
.mbx-catalog__card--green:hover {
  box-shadow:0 12px 28px #00000073,0 0 18px #22c55e38
}
.mbx-catalog__card--green {
  border-color:#4ade8047
}
.mbx-catalog__card--silver {
  background:linear-gradient(#2a2216eb,#0c0a08f2);
  border-color:#be123c73;
  box-shadow:inset 0 0 0 1px #fecdd30f,0 0 20px #b91c1c24
}
.mbx-catalog__card--silver:hover {
  border-color:#f87171b3;
  box-shadow:0 14px 32px #0000008c,0 0 28px #dc262652,inset 0 0 0 1px #fee2e21a
}
.mbx-catalog__card--silver .mbx-catalog__name {
  color:#fecdd3;
  text-shadow:0 0 18px #dc262666
}
.mbx-catalog__card--silver .mbx-catalog__price {
  color:#fde68a
}
.mbx-catalog__card--silver .mbx-catalog__cta {
  color:#fda4af;
  letter-spacing:.18em
}
.mbx-catalog__cta:disabled {
  opacity:.65;
  cursor:wait
}
.mbx-catalog__art {
  place-items:center;
  width:8.5rem;
  height:8.5rem;
  margin-bottom:.8rem;
  line-height:0;
  display:grid;
  position:relative;
  overflow:visible
}
.mbx-catalog__art img {
  object-fit:contain;
  filter:drop-shadow(0 8px 16px #0000008c);
  width:100%;
  height:100%;
  transition:transform .25s,filter .25s;
  position:relative
}
.mbx-catalog__card:hover .mbx-catalog__art img {
  filter:drop-shadow(0 12px 20px #000000b3);
  transform:scale(1.06)translateY(-2px)
}
.mbx-catalog__meta {
  text-align:left;
  flex-direction:column;
  align-self:stretch;
  align-items:center;
  gap:.65rem;
  display:flex
}
.mbx-catalog__name {
  font-family:var(--font-platypi), Georgia, serif;
  color:#f6e7b8;
  font-weight:700
}
.mbx-catalog__keys {
  color:#d4d4d8;
  background:#0000004d;
  border:1px solid #c9a8604d;
  border-radius:999px;
  align-self:center;
  padding:.22rem .6rem;
  font-size:.78rem
}
.mbx-catalog__desc {
  -webkit-line-clamp:2;
  color:#a8a29e;
  text-align:center;
  -webkit-box-orient:vertical;
  align-self:center;
  max-width:18rem;
  font-size:.78rem;
  line-height:1.35;
  display:-webkit-box;
  overflow:hidden
}
.mbx-catalog__features {
  border-top:1px solid #ffffff12;
  flex-direction:column;
  width:100%;
  display:flex
}
.mbx-catalog__features>span {
  color:#a6aabc;
  border-bottom:1px solid #ffffff12;
  padding:.72rem .15rem .72rem 1.05rem;
  font-size:.82rem;
  line-height:1.55;
  position:relative
}
.mbx-catalog__features>span:before {
  content:"»";
  color:#f1eee7;
  font-weight:700;
  position:absolute;
  left:0
}
.mbx-catalog__footer {
  flex-direction:column;
  align-items:center;
  gap:.7rem;
  width:100%;
  margin-top:auto;
  padding-top:.65rem;
  display:flex
}
.mbx-catalog__price {
  color:#fde68a;
  font-size:.8rem
}
.mbx-catalog__cta {
  color:#fff7ed;
  letter-spacing:.03em;
  text-transform:none;
  clip-path:polygon(0 0,92% 0,100% 100%,8% 100%);
  filter:drop-shadow(0 8px 12px #00000047);
  cursor:pointer;
  background:linear-gradient(135deg,#8e2c24 0%,#bd4939 62%,#d46a54 100%);
  border:0;
  justify-content:center;
  align-items:center;
  min-height:3.05rem;
  padding:.8rem 1.7rem;
  font-family:inherit;
  font-size:.78rem;
  font-weight:600;
  transition:filter .16s,transform .16s,background .16s;
  display:inline-flex;
  position:relative
}
.mbx-catalog__cta:hover:not(:disabled) {
  filter:brightness(1.08)drop-shadow(0 10px 14px #00000057);
  background:linear-gradient(135deg,#a7352a 0%,#d05845 62%,#e27b62 100%);
  transform:translateY(-1px)
}
.mbx-catalog__cta:focus-visible {
  outline-offset:3px;
  outline:2px solid #f7cf71
}
@media (max-width:640px) {
  .mbx-catalog__grid {
    grid-template-columns:1fr
  }
.mbx-catalog__card {
    min-height:0;
    padding-inline:1.25rem
  }
.mbx-catalog__card-head {
    margin-inline:-1.25rem;
    padding-inline:1.25rem
  }

}
.mbx__stats {
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
  display:flex
}
.mbx__stat {
  text-align:center;
  background:#00000059;
  border:1px solid #c9a86040;
  border-radius:.35rem;
  min-width:7rem;
  padding:.65rem 1rem
}
.mbx__stat-label {
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#a1a1aa;
  font-size:.7rem;
  display:block
}
.mbx__stat strong {
  color:#fde68a;
  font-size:1.25rem
}
.mbx__chest-wrap {
  background:0 0;
  flex-direction:column;
  align-items:center;
  width:min(420px,88vw);
  padding:.25rem 0 .65rem;
  display:flex;
  position:relative;
  overflow:visible
}
.mbx__chest-scene {
  background:0 0;
  flex-direction:column;
  align-items:center;
  gap:0;
  width:100%;
  min-height:clamp(320px,52vw,390px);
  padding:.75rem .5rem .35rem;
  display:flex;
  position:relative;
  overflow:visible
}
.mbx__chest-body {
  isolation:isolate;
  z-index:3;
  width:100%;
  position:relative
}
.mbx__chest-body:before {
  content:"";
  z-index:0;
  filter:blur(14px);
  pointer-events:none;
  background:radial-gradient(circle,#a855f724,#0000 66%),radial-gradient(circle at 50% 88%,#fbbf241f,#0000 62%);
  border-radius:50%;
  animation:9s ease-in-out infinite mbx-chest-aura;
  position:absolute;
  inset:18% 10% 22%
}
.mbx__chest-body:after {
  content:"";
  z-index:0;
  filter:blur(12px);
  pointer-events:none;
  background:radial-gradient(#fbbf243d,#0000 74%);
  border-radius:50%;
  width:68%;
  height:12%;
  position:absolute;
  bottom:2%;
  left:50%;
  transform:translate(-50%)
}
.mbx__chest-body--float {
  will-change:transform;
  animation:10s ease-in-out infinite mbx-chest-float
}
.mbx__chest-body--opening {
  animation:none;
  transform:translateY(0)
}
.mbx__chest-actions {
  z-index:5;
  pointer-events:none;
  position:absolute;
  inset:0
}
.mbx__open-btn,.mbx__buy-btn {
  pointer-events:auto
}
.mbx__buy-btn-label {
  z-index:2;
  font-family:var(--font-platypi), Georgia, serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#e4c989eb;
  text-shadow:0 1px 2px #000000e6,0 0 12px #000000bf;
  text-align:center;
  margin-top:.15rem;
  font-size:.72rem;
  font-weight:600;
  line-height:1.2;
  position:relative
}
.mbx__open-btn {
  z-index:5;
  width:auto;
  min-width:0;
  max-width:none;
  box-shadow:none;
  color:#e4c989;
  cursor:pointer;
  background:0 0;
  border:none;
  border-radius:0;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:0;
  margin:0;
  padding:.15rem;
  transition:transform .22s,opacity .22s;
  display:inline-flex;
  position:absolute;
  top:48%;
  left:-46%;
  overflow:visible;
  transform:translateY(-50%)
}
.mbx__open-btn:hover:not(:disabled) {
  transform:translateY(-50%)
}
.mbx__open-btn:hover:not(:disabled) .mbx__open-btn-art:after {
  opacity:1
}
.mbx__open-btn:active:not(:disabled) {
  transform:translateY(-50%)
}
.mbx__open-btn:disabled {
  cursor:not-allowed
}
.mbx__open-btn:disabled:not(.mbx__open-btn--busy) {
  opacity:.45
}
.mbx__open-btn--busy {
  pointer-events:none;
  opacity:1
}
.mbx__open-btn-art {
  isolation:isolate;
  line-height:0;
  display:block;
  position:relative
}
.mbx__open-btn-art:before {
  content:"";
  z-index:0;
  filter:blur(6px);
  pointer-events:none;
  background:radial-gradient(#000000c7 0%,#00000073 45%,#0000 72%);
  border-radius:999px;
  position:absolute;
  inset:32% 6%
}
.mbx__open-btn-art:after {
  content:"";
  z-index:0;
  filter:blur(12px);
  opacity:.7;
  pointer-events:none;
  background:radial-gradient(circle,#fbbf2480,#0000 68%),radial-gradient(circle at 50% 35%,#a855f759,#0000 60%);
  border-radius:50%;
  transition:opacity .22s,transform .22s;
  position:absolute;
  inset:28% 8%
}
.mbx__open-btn-key {
  z-index:1;
  aspect-ratio:1;
  object-fit:contain;
  object-position:center;
  -webkit-user-select:none;
  user-select:none;
  pointer-events:none;
  filter:drop-shadow(0 0 2px #000000f2)drop-shadow(0 0 10px #a855f78c)drop-shadow(0 10px 18px #000000d9)brightness(1.08)contrast(1.06);
  transform-origin:50%;
  background:0 0;
  flex-shrink:0;
  width:clamp(7.5rem,30vw,11.5rem);
  height:auto;
  display:block;
  position:relative;
  transform:none
}
.mbx__open-btn--ready .mbx__open-btn-key {
  animation:1.65s ease-in-out infinite mbx-open-ready-pulse
}
.mbx__open-btn--ready .mbx__open-btn-art:after {
  animation:1.65s ease-in-out infinite mbx-open-ready-aura;
  visibility:visible!important;
  opacity:.78!important
}
.mbx__open-btn--ready .mbx__open-btn-meta {
  animation:1.65s ease-in-out infinite mbx-open-ready-label
}
@keyframes mbx-open-ready-pulse {
  0%,to {
    filter:brightness(1.04)contrast(1.05)drop-shadow(0 0 5px #ffce4661);
    transform:scale(1)
  }
45% {
    filter:brightness(1.3)contrast(1.08)drop-shadow(0 0 9px #ffd656f2)drop-shadow(0 0 18px #b74aff94);
    transform:scale(1.075)
  }

}
@keyframes mbx-open-ready-aura {
  0%,to {
    opacity:.36;
    transform:scale(.82)
  }
45% {
    opacity:.94;
    transform:scale(1.2)
  }

}
@keyframes mbx-open-ready-label {
  0%,to {
    filter:brightness()
  }
45% {
    filter:brightness(1.48)
  }

}
.mbx__open-btn--busy .mbx__open-btn-key,.mbx__open-btn--login .mbx__open-btn-key,.mbx__open-btn--need-keys .mbx__open-btn-key {
  animation:none;
  transform:scale(1)
}
.mbx__open-btn--login .mbx__open-btn-key,.mbx__open-btn--need-keys .mbx__open-btn-key {
  filter:grayscale(.75)brightness(.72)drop-shadow(0 0 2px #000000f2)drop-shadow(0 8px 14px #000000b3)
}
.mbx__open-btn--login .mbx__open-btn-art,.mbx__open-btn--need-keys .mbx__open-btn-art {
  animation:none
}
.mbx__open-btn--login .mbx__open-btn-art:after,.mbx__open-btn--need-keys .mbx__open-btn-art:after {
  opacity:.15
}
.mbx__open-btn--busy .mbx__open-btn-art:after {
  opacity:.9
}
.mbx__open-btn-meta {
  z-index:2;
  pointer-events:none;
  font-family:var(--font-platypi), Georgia, serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#f8e8b4f5;
  text-shadow:0 1px 2px #000000f2,0 0 10px #000000d9,0 0 2px #000;
  white-space:nowrap;
  font-size:.68rem;
  font-weight:600;
  line-height:1.15;
  position:absolute;
  top:46%;
  left:70%;
  transform:translate(-50%,-100%)
}
.mbx__open-btn--login .mbx__open-btn-meta,.mbx__open-btn--need-keys .mbx__open-btn-meta {
  color:#a1a1aae6;
  letter-spacing:.04em;
  text-transform:none;
  font-size:.75rem
}
.mbx__open-btn--busy .mbx__open-btn-meta {
  color:#fbbf24e6
}
.mbx__buy-btn {
  z-index:5;
  isolation:isolate;
  width:clamp(9.5rem,28vw,13rem);
  box-shadow:none;
  color:inherit;
  cursor:pointer;
  background:0 0;
  border:none;
  border-radius:0;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  margin:0;
  padding:0;
  text-decoration:none;
  transition:transform .22s,filter .22s,opacity .22s;
  display:flex;
  position:absolute;
  top:42%;
  right:-52%;
  overflow:visible;
  transform:translateY(-50%)
}
.mbx__buy-btn-aura {
  z-index:0;
  filter:blur(16px);
  pointer-events:none;
  background:radial-gradient(circle at 50% 42%,#a855f76b,#0000 62%),radial-gradient(circle at 50% 78%,#fbbf2447,#0000 70%);
  border-radius:50%;
  animation:none;
  position:absolute;
  inset:-18% -8%
}
.mbx__buy-btn-art {
  z-index:1;
  width:100%;
  line-height:0;
  animation:none;
  display:block;
  position:relative
}
.mbx__buy-btn-relic {
  aspect-ratio:3/2;
  object-fit:contain;
  -webkit-user-select:none;
  user-select:none;
  pointer-events:none;
  filter:drop-shadow(0 0 2px #000000f2)drop-shadow(0 0 14px #a855f773)drop-shadow(0 12px 20px #000000bf)brightness(1.05)contrast(1.05);
  width:100%;
  height:auto;
  display:block
}
.mbx__buy-btn:hover {
  filter:brightness(1.08);
  transform:translateY(calc(-50% - 4px))scale(1.05)
}
.mbx__buy-btn:hover .mbx__buy-btn-aura {
  opacity:1;
  filter:blur(14px)brightness(1.15)
}
.mbx__buy-btn:active {
  transform:translateY(-50%)scale(.98)
}
.mbx__buy-btn--ready .mbx__buy-btn-relic {
  animation:none
}
.mbx__buy-btn--dim {
  pointer-events:none;
  opacity:.42;
  filter:grayscale(.3)brightness(.85)
}
.mbx__buy-btn--dim .mbx__buy-btn-art,.mbx__buy-btn--dim .mbx__buy-btn-relic,.mbx__buy-btn--dim .mbx__buy-btn-aura {
  animation:none
}
.mbx__buy-btn--login {
  filter:grayscale(.4)brightness(.82)
}
.mbx__buy-btn--login .mbx__buy-btn-art,.mbx__buy-btn--login .mbx__buy-btn-relic,.mbx__buy-btn--login .mbx__buy-btn-aura {
  animation:none
}
@keyframes mbx-buy-btn-aura {
  0%,to {
    opacity:.55;
    transform:scale(.96)
  }
50% {
    opacity:.95;
    transform:scale(1.06)
  }

}
@keyframes mbx-buy-btn-float {
  0%,to {
    transform:translateY(0)
  }
50% {
    transform:translateY(-5px)
  }

}
@keyframes mbx-buy-relic-pulse {
  0%,to {
    filter:drop-shadow(0 0 2px #000000f2)drop-shadow(0 0 12px #a855f766)drop-shadow(0 12px 20px #000000bf)brightness(1.05)contrast(1.05)
  }
50% {
    filter:drop-shadow(0 0 2px #000000f2)drop-shadow(0 0 20px #a855f7a6)drop-shadow(0 0 12px #fbbf2459)drop-shadow(0 12px 20px #000000bf)brightness(1.1)contrast(1.06)
  }

}
@media (max-width:767px) {
  .mbx__hero {
    width:100%;
    padding-bottom:calc(8.5rem + env(safe-area-inset-bottom,0px));
    gap:.9rem
  }
.mbx__chest-wrap {
    width:100%;
    max-width:100%;
    padding-bottom:.25rem;
    overflow:visible
  }
.mbx__chest-scene {
    flex-direction:column;
    align-items:center;
    gap:.35rem;
    width:100%;
    max-width:100%;
    min-height:0;
    padding:.35rem 0 0;
    display:flex;
    overflow:visible
  }
.mbx__chest-body {
    width:min(220px,58vw)
  }
.mbx__chest-actions--dock {
    top:auto;
    left:max(.85rem, env(safe-area-inset-left,0px));
    right:max(.85rem, env(safe-area-inset-right,0px));
    bottom:max(.65rem, env(safe-area-inset-bottom,0px));
    z-index:120;
    -webkit-backdrop-filter:blur(10px);
    pointer-events:auto;
    background:#040405fa;
    border:1px solid #6e58306b;
    border-radius:.75rem;
    flex-direction:column;
    align-items:stretch;
    gap:.55rem;
    width:auto;
    margin-top:0;
    padding:.55rem;
    display:flex;
    position:fixed;
    box-shadow:0 -12px 32px #000000b8,0 0 0 1px #00000059
  }
.mbx__chest-actions--dock .mbx__open-btn {
    background:linear-gradient(#221808fc,#080603fc);
    border:1px solid #82642c80;
    border-radius:.55rem;
    flex-direction:row;
    justify-content:center;
    gap:.65rem;
    width:100%;
    min-height:3.35rem;
    padding:.45rem .85rem;
    position:static;
    top:auto;
    left:auto;
    transform:none;
    box-shadow:0 8px 20px #00000094,inset 0 1px #ffffff0a
  }
.mbx__chest-actions--dock .mbx__open-btn:hover:not(:disabled),.mbx__chest-actions--dock .mbx__open-btn:active:not(:disabled) {
    transform:none
  }
.mbx__chest-actions--dock .mbx__open-btn:active:not(:disabled) {
    filter:brightness(1.08)
  }
.mbx__chest-actions--dock .mbx__open-btn-art {
    flex-shrink:0
  }
.mbx__chest-actions--dock .mbx__open-btn-art:before,.mbx__chest-actions--dock .mbx__open-btn-art:after {
    inset:10% 0
  }
.mbx__chest-actions--dock .mbx__open-btn-key {
    width:2.85rem
  }
.mbx__chest-actions--dock .mbx__open-btn-meta {
    white-space:normal;
    text-align:left;
    letter-spacing:.04em;
    text-shadow:0 1px 2px #000000e6,0 0 12px #000000bf;
    max-width:14rem;
    font-size:.88rem;
    position:static;
    top:auto;
    left:auto;
    transform:none
  }
.mbx__chest-actions--dock .mbx__open-btn--login .mbx__open-btn-meta,.mbx__chest-actions--dock .mbx__open-btn--need-keys .mbx__open-btn-meta {
    font-size:.82rem
  }
.mbx__chest-actions--dock .mbx__buy-btn {
    background:linear-gradient(#140e1cfc,#050408fc);
    border:1px solid #5834786b;
    border-radius:.55rem;
    flex-direction:row;
    justify-content:center;
    gap:.55rem;
    width:100%;
    min-height:3.1rem;
    padding:.35rem .75rem;
    position:static;
    top:auto;
    right:auto;
    transform:none;
    box-shadow:0 8px 20px #0000008c,inset 0 1px #ffffff08
  }
.mbx__chest-actions--dock .mbx__buy-btn:hover,.mbx__chest-actions--dock .mbx__buy-btn:active {
    transform:none
  }
.mbx__chest-actions--dock .mbx__buy-btn-aura {
    opacity:.45;
    inset:-8% -4%
  }
.mbx__chest-actions--dock .mbx__buy-btn-art {
    flex-shrink:0;
    width:4.25rem;
    animation:none
  }
.mbx__chest-actions--dock .mbx__buy-btn-relic {
    aspect-ratio:3/2
  }
.mbx__chest-actions--dock .mbx__buy-btn-label {
    letter-spacing:.06em;
    text-align:left;
    margin-top:0;
    font-size:.82rem
  }
.mbx__chest-actions--dock .mbx__buy-btn--dim {
    opacity:.55
  }
.mbx__stats {
    gap:.45rem;
    width:100%
  }
.mbx__stat {
    flex:calc(33.333% - .45rem);
    min-width:0;
    padding:.5rem .45rem
  }
.mbx__stat strong {
    font-size:1rem
  }
.mbx__roulette {
    width:100%;
    margin-top:.15rem
  }
.mbx__track-mask {
    padding:.6rem 0
  }
.mbx__track-fade {
    width:clamp(1.25rem,5vw,2.5rem)
  }

}
@media (prefers-reduced-motion:reduce) {
  .mbx__buy-btn-aura,.mbx__buy-btn-art,.mbx__buy-btn--ready .mbx__buy-btn-relic,.mbx__open-btn--ready .mbx__open-btn-key,.mbx__open-btn--ready .mbx__open-btn-art:after,.mbx__open-btn--ready .mbx__open-btn-meta {
    animation:none!important
  }

}
.mbx--theme-green .mbx__chest-body:before {
  background:radial-gradient(circle at 50% 88%,#fbbf241a,#0000 62%)
}
.mbx--theme-green .mbx__chest-glow {
  opacity:0
}
.mbx--theme-green .mbx__chest-img {
  filter:drop-shadow(0 16px 24px #000000bf)
}
.mbx--theme-green .mbx__buy-btn-aura,.mbx--theme-green .mbx__buy-btn:hover .mbx__buy-btn-aura {
  opacity:0;
  visibility:hidden;
  animation:none
}
.mbx--theme-green .mbx__buy-btn-relic {
  filter:none
}
.mbx--theme-green .mbx__buy-btn--ready .mbx__buy-btn-relic {
  animation:none
}
.mbx--theme-green .mbx__open-btn-key {
  filter:none
}
.mbx--theme-green .mbx__open-btn-art:before,.mbx--theme-green .mbx__open-btn-art:after {
  opacity:0;
  visibility:hidden
}
.mbx--theme-green .mbx__open-btn--ready .mbx__open-btn-key {
  animation:1.65s ease-in-out infinite mbx-open-ready-pulse
}
.mbx--theme-green .mbx__open-btn--busy .mbx__open-btn-key {
  filter:brightness(1.05)contrast(1.05);
  animation:none;
  transform:scale(1)
}
.mbx--theme-green .mbx__open-btn--login .mbx__open-btn-key,.mbx--theme-green .mbx__open-btn--need-keys .mbx__open-btn-key {
  filter:grayscale(.75)brightness(.72);
  animation:none;
  transform:scale(1)
}
.mbx--theme-green .mbx__pointer-gem {
  background:radial-gradient(circle,#fffbebf2,#fbbf248c 38%,#22c55e59 58%,#0000 72%)
}
.mbx--theme-green .mbx__roulette:before {
  background:radial-gradient(circle at 50% 48%,#22c55e80,#0000 64%),radial-gradient(circle at 50% 100%,#fbbf241f,#0000 70%)
}
@keyframes mbx-key-pulse-green {
  0%,to {
    filter:brightness(1.05)contrast(1.05);
    transform:scale(1)
  }
50% {
    filter:brightness(1.1)contrast(1.06);
    transform:scale(1)
  }

}
@keyframes mbx-buy-relic-pulse-green {
  0%,to {
    filter:none;
    transform:scale(1)
  }
50% {
    filter:brightness(1.06);
    transform:scale(1.03)
  }

}
.mbx--theme-purple .mbx__chest-body:before {
  background:radial-gradient(circle at 50% 88%,#c084fc1a,#0000 62%)
}
.mbx--theme-purple .mbx__chest-glow {
  opacity:0
}
.mbx--theme-purple .mbx__chest-img {
  filter:drop-shadow(0 16px 24px #000000bf)
}
.mbx--theme-purple .mbx__buy-btn-aura,.mbx--theme-purple .mbx__buy-btn:hover .mbx__buy-btn-aura {
  opacity:0;
  visibility:hidden;
  animation:none
}
.mbx--theme-purple .mbx__buy-btn-relic {
  filter:none
}
.mbx--theme-purple .mbx__buy-btn--ready .mbx__buy-btn-relic {
  animation:none
}
.mbx--theme-purple .mbx__open-btn-key {
  filter:none
}
.mbx--theme-purple .mbx__open-btn-art:before,.mbx--theme-purple .mbx__open-btn-art:after {
  opacity:0;
  visibility:hidden
}
.mbx--theme-purple .mbx__open-btn--ready .mbx__open-btn-key {
  animation:1.65s ease-in-out infinite mbx-open-ready-pulse
}
.mbx--theme-purple .mbx__open-btn--busy .mbx__open-btn-key {
  filter:brightness(1.05)contrast(1.05);
  animation:none;
  transform:scale(1)
}
.mbx--theme-purple .mbx__open-btn--login .mbx__open-btn-key,.mbx--theme-purple .mbx__open-btn--need-keys .mbx__open-btn-key {
  filter:grayscale(.75)brightness(.72);
  animation:none;
  transform:scale(1)
}
.mbx--theme-silver .mbx__chest-body:before {
  background:radial-gradient(circle at 50% 88%,#f871711a,#0000 62%)
}
.mbx--theme-silver .mbx__chest-glow {
  opacity:0
}
.mbx--theme-silver .mbx__chest-img {
  filter:drop-shadow(0 16px 24px #000000bf)
}
.mbx--theme-silver .mbx__buy-btn-relic,.mbx--theme-silver .mbx__open-btn-key {
  filter:none
}
.mbx--theme-silver .mbx__buy-btn-aura,.mbx--theme-silver .mbx__buy-btn:hover .mbx__buy-btn-aura {
  opacity:0;
  visibility:hidden;
  animation:none
}
.mbx--theme-silver .mbx__buy-btn--ready .mbx__buy-btn-relic {
  animation:none
}
.mbx--theme-silver .mbx__open-btn-art:before,.mbx--theme-silver .mbx__open-btn-art:after {
  opacity:0;
  visibility:hidden
}
.mbx--theme-silver .mbx__open-btn--ready .mbx__open-btn-key {
  animation:1.65s ease-in-out infinite mbx-open-ready-pulse
}
.mbx--theme-silver .mbx__open-btn--busy .mbx__open-btn-key {
  filter:brightness(1.08)contrast(1.08);
  animation:none;
  transform:scale(1)
}
.mbx--theme-silver .mbx__open-btn--login .mbx__open-btn-key,.mbx--theme-silver .mbx__open-btn--need-keys .mbx__open-btn-key {
  filter:grayscale(.8)brightness(.68);
  animation:none;
  transform:scale(1)
}
.mbx--theme-silver .mbx__pointer-gem {
  background:radial-gradient(circle,#fecacaf2,#dc2626b3 36%,#7f1d1d6b 58%,#0000 72%)
}
.mbx--theme-silver .mbx__roulette:before {
  background:radial-gradient(circle at 50% 48%,#dc26262e,#0000 64%),radial-gradient(circle at 50% 100%,#fbbf241a,#0000 70%)
}
.mbx--theme-silver .mbx__stats {
  border-color:#fb718542
}
.mbx--theme-silver .mbx__stat-value {
  color:#ffe4e6
}
.mbx__chest {
  z-index:1;
  width:100%;
  max-width:none;
  height:auto;
  box-shadow:none;
  will-change:auto;
  background:0 0;
  border:none;
  border-radius:0;
  flex-direction:column;
  flex-shrink:0;
  align-items:center;
  gap:0;
  margin-top:0;
  animation:none;
  display:flex;
  position:relative
}
.mbx__chest--closed {
  animation:none
}
.mbx__chest--opening {
  animation:none;
  transform:translateY(0)
}
.mbx__chest-stage {
  z-index:1;
  aspect-ratio:1;
  pointer-events:none;
  background:0 0;
  width:100%;
  position:relative;
  overflow:visible
}
.mbx__chest-img {
  object-fit:contain;
  object-position:center center;
  transform-origin:50%;
  width:100%;
  height:100%;
  box-shadow:none;
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
  image-rendering:auto;
  -webkit-font-smoothing:antialiased;
  background:0 0;
  border:none;
  border-radius:0;
  display:block;
  position:absolute;
  inset:0;
  transform:scale(1.04)
}
.mbx__chest-frame {
  z-index:2;
  filter:drop-shadow(0 12px 24px #0000007a);
  transform-origin:50% 68%
}
.mbx__chest-preload {
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
  position:absolute
}
.mbx__chest--opening .mbx__chest-frame {
  animation:.48s cubic-bezier(.22,.85,.28,1) forwards mbx-chest-single-open
}
.mbx__chest-frame--closed {
  opacity:1;
  z-index:2
}
.mbx__chest-frame--open {
  opacity:0;
  z-index:1;
  transform:scale(.96)
}
.mbx__chest-flash {
  z-index:3;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  background:radial-gradient(circle,#fffbebf2,#fbbf248c 38%,#a855f759 58%,#0000 72%);
  border-radius:50%;
  position:absolute;
  inset:26% 20% 30%
}
.mbx__chest-glow {
  z-index:0;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 48%,#a855f780,#0000 64%),radial-gradient(circle at 50% 62%,#fbbf2473,#0000 68%);
  position:absolute;
  inset:14% 8% 10%
}
.mbx__chest--opening .mbx__chest-frame--closed {
  animation:.7s cubic-bezier(.22,.85,.28,1) forwards mbx-frame-closed-out
}
.mbx__chest--opening .mbx__chest-frame--open {
  animation:.48s cubic-bezier(.22,.85,.28,1) forwards mbx-frame-open-in
}
.mbx__chest--opening .mbx__chest-flash {
  animation:.7s forwards mbx-chest-flash
}
.mbx__chest--opening .mbx__chest-glow {
  animation:.48s forwards mbx-chest-open-glow
}
.mbx__chest--open .mbx__chest-frame--closed,.mbx__chest--spinning .mbx__chest-frame--closed {
  opacity:0;
  visibility:hidden;
  animation:none
}
.mbx__chest--open .mbx__chest-frame--open,.mbx__chest--spinning .mbx__chest-frame--open {
  opacity:1;
  filter:drop-shadow(0 14px 28px #0000008c)drop-shadow(0 0 28px #fbbf2473)drop-shadow(0 0 14px #c9a86059);
  animation:none;
  transform:scale(1)
}
.mbx__chest--open .mbx__chest-glow,.mbx__chest--spinning .mbx__chest-glow {
  opacity:.85;
  animation:none
}
.mbx__chest--open .mbx__chest-flash,.mbx__chest--spinning .mbx__chest-flash {
  opacity:0;
  animation:none
}
.mbx__chest--pulse {
  animation:.55s ease-in-out infinite mbx-chest-bounce
}
.mbx__chest--pulse .mbx__chest-frame--open {
  filter:drop-shadow(0 0 28px #facc15e6)drop-shadow(0 12px 32px #f973168c)
}
.mbx__chest--pulse .mbx__chest-glow {
  background:radial-gradient(circle,#facc158c,#0000 70%);
  animation:.42s ease-in-out infinite mbx-glow-burst
}
.mbx__roulette {
  box-sizing:border-box;
  width:min(100%,1180px);
  margin-top:1rem;
  margin-left:auto;
  margin-right:auto;
  padding:.35rem 0 .15rem;
  position:relative
}
.mbx__pointer {
  z-index:5;
  pointer-events:none;
  filter:drop-shadow(0 0 8px #e4c989a6);
  flex-direction:column;
  align-items:center;
  width:.9rem;
  display:flex;
  position:absolute;
  top:-.05rem;
  left:50%;
  transform:translate(-50%)
}
.mbx__pointer-gem {
  background:linear-gradient(160deg,#f5e6b8,#c9a860 55%,#8a6a2a);
  border:1px solid #fff8dce6;
  border-radius:.1rem;
  width:.55rem;
  height:.55rem;
  transform:rotate(45deg);
  box-shadow:0 0 10px #c9a860b3
}
.mbx__pointer-arrow {
  border-top:.55rem solid #e4c989;
  border-left:.38rem solid #0000;
  border-right:.38rem solid #0000;
  width:0;
  height:0;
  margin-top:-.08rem
}
.mbx__roulette--spinning .mbx__pointer {
  animation:.18s ease-in-out infinite mbx-pointer-tick
}
.mbx__roulette--spinning .mbx__track-center {
  opacity:1;
  box-shadow:0 0 14px #e4c989bf,0 0 28px #c9a86059
}
.mbx__roulette--spinning .mbx__track {
  will-change:transform
}
.mbx__roulette--spinning .mbx__card {
  animation:none
}
.mbx__track-mask {
  direction:ltr;
  background:linear-gradient(#242018eb,#0a0a0cf5),radial-gradient(at 50% 0,#c9a8601f,#0000 60%);
  border:1px solid #c9a8606b;
  border-radius:.85rem;
  padding:.95rem 0;
  position:relative;
  overflow:hidden;
  box-shadow:0 0 0 1px #000000a6,0 16px 40px #00000073,inset 0 1px #e4c9892e,inset 0 0 48px #00000073
}
.mbx__track-fade {
  z-index:4;
  pointer-events:none;
  width:clamp(2rem,6vw,4.5rem);
  position:absolute;
  top:0;
  bottom:0
}
.mbx__track-fade--left {
  background:linear-gradient(90deg,#0a0a0cf5,#0000);
  left:0
}
.mbx__track-fade--right {
  background:linear-gradient(270deg,#0a0a0cf5,#0000);
  right:0
}
.mbx__track-center {
  z-index:3;
  opacity:.95;
  pointer-events:none;
  background:linear-gradient(#fff8dcf2,#e4c989f2 35%,#c9a860e6 70%,#fff8dcd9);
  border:0;
  border-radius:1px;
  width:2px;
  transition:opacity .2s,box-shadow .2s;
  position:absolute;
  top:.35rem;
  bottom:.35rem;
  left:50%;
  transform:translate(-50%);
  box-shadow:0 0 8px #e4c989d9,0 0 18px #c9a86073
}
.mbx__track {
  z-index:1;
  will-change:transform;
  direction:ltr;
  flex-direction:row;
  gap:0;
  width:max-content;
  display:flex;
  position:relative;
  transform:translate(0)
}
.mbx__card,.mbx__prize {
  box-sizing:border-box;
  border:1px solid var(--mbx-color);
  border-radius:.4rem;
  flex-direction:column;
  flex:0 0 132px;
  justify-content:flex-end;
  align-items:center;
  gap:.35rem;
  width:132px;
  min-width:132px;
  max-width:132px;
  min-height:152px;
  margin:0 6px;
  display:flex;
  position:relative
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx__card,.mbx__prize {
    border:1px solid color-mix(in srgb, var(--mbx-color) 55%, transparent)
  }

}
.mbx__card,.mbx__prize {
  background-color:#0000008c;
  background-image:linear-gradient(160deg, var(--mbx-color), #0c0c0ebf 55%), var(--mbx-frame)
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx__card,.mbx__prize {
    background-image:linear-gradient(160deg, color-mix(in srgb, var(--mbx-color) 22%, transparent), #0c0c0ebf 55%), var(--mbx-frame)
  }

}
.mbx__card,.mbx__prize {
  box-shadow:0 0 24px var(--mbx-glow), inset 0 0 18px var(--mbx-color);
  background-position:50%;
  background-size:cover
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx__card,.mbx__prize {
    box-shadow:0 0 24px var(--mbx-glow), inset 0 0 18px color-mix(in srgb, var(--mbx-color) 12%, transparent)
  }

}
.mbx__card,.mbx__prize {
  text-align:center;
  padding:.55rem .5rem .45rem;
  overflow:hidden
}
.mbx__roulette .mbx__card {
  border-width:1.5px;
  border-color:var(--mbx-color);
  border-radius:.55rem;
  flex:0 0 132px;
  gap:.35rem;
  width:132px;
  min-width:132px;
  max-width:132px;
  min-height:158px;
  margin:0 6px
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx__roulette .mbx__card {
    border-color:color-mix(in srgb, var(--mbx-color) 88%, #2a1010)
  }

}
.mbx__roulette .mbx__card {
  background-color:var(--mbx-color)
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx__roulette .mbx__card {
    background-color:color-mix(in srgb, var(--mbx-color) 18%, #08090d)
  }

}
.mbx__roulette .mbx__card {
  background-image:linear-gradient(145deg, var(--mbx-color) 0%, var(--mbx-color) 42%, #05060af0 100%), radial-gradient(circle at 50% 34%, var(--mbx-color), transparent 70%), var(--mbx-frame)
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx__roulette .mbx__card {
    background-image:linear-gradient(145deg, color-mix(in srgb, var(--mbx-color) 48%, transparent) 0%, color-mix(in srgb, var(--mbx-color) 20%, transparent) 42%, #05060af0 100%), radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--mbx-color) 38%, transparent), transparent 70%), var(--mbx-frame)
  }

}
.mbx__roulette .mbx__card {
  box-shadow:0 0 30px var(--mbx-glow), 0 0 10px var(--mbx-color), inset 0 1px 0 #ffffff29, inset 0 0 30px var(--mbx-color);
  background-position:50%;
  background-size:cover;
  padding:.55rem .4rem .4rem
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx__roulette .mbx__card {
    box-shadow:0 0 30px var(--mbx-glow), 0 0 10px color-mix(in srgb, var(--mbx-color) 38%, transparent), inset 0 1px 0 #ffffff29, inset 0 0 30px color-mix(in srgb, var(--mbx-color) 20%, transparent)
  }

}
.mbx__roulette .mbx__card {
  justify-content:center;
  align-items:center
}
.mbx__roulette .mbx__card .mbx-art-slot {
  align-self:center;
  margin:.1rem auto 0
}
.mbx__roulette .mbx__card .mbx-art-slot--lg {
  border-radius:10px;
  width:84px;
  height:84px
}
.mbx__roulette .mbx__card .mbx-art-slot .mbx-art--lg,.mbx__roulette .mbx__card .mbx-art-slot .item-icon {
  object-fit:contain;
  object-position:center;
  width:86%;
  max-width:86%;
  height:86%;
  max-height:86%;
  margin:0
}
.mbx__roulette .mbx__card .mbx-art-slot .mbx-art--wing {
  width:98%;
  max-width:98%;
  height:98%;
  max-height:98%
}
.mbx__roulette .mbx__card .mbx-art-slot .item-icon {
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  background:0 0;
  border:0;
  border-radius:0
}
.mbx__roulette .mbx__card-title {
  color:#fafafa;
  text-shadow:0 1px 6px #000000a6;
  text-align:center;
  white-space:nowrap;
  text-overflow:ellipsis;
  -webkit-line-clamp:unset;
  width:100%;
  font-size:.68rem;
  font-weight:600;
  display:block;
  overflow:hidden
}
@media (max-width:767px) {
  .mbx__roulette .mbx__card {
    flex:0 0 104px;
    gap:.28rem;
    width:104px;
    min-width:104px;
    max-width:104px;
    min-height:130px;
    margin:0 4px;
    padding:.45rem .35rem .35rem
  }
.mbx__roulette .mbx__card .mbx-art-slot--lg {
    width:66px;
    height:66px
  }
.mbx__roulette .mbx__card .mbx-art-slot .mbx-art--lg,.mbx__roulette .mbx__card .mbx-art-slot .item-icon {
    width:84%;
    max-width:84%;
    height:84%;
    max-height:84%
  }
.mbx__roulette .mbx__card .mbx-art-slot .mbx-art--wing {
    width:94%;
    max-width:94%;
    height:94%;
    max-height:94%
  }
.mbx__roulette .mbx__card-title {
    font-size:.66rem;
    line-height:1.2
  }

}
@media (max-width:480px) {
  .mbx__roulette .mbx__card {
    flex:0 0 100px;
    width:100px;
    min-width:100px;
    max-width:100px;
    min-height:126px;
    margin:0 3px
  }
.mbx__roulette .mbx__card .mbx-art-slot--lg {
    width:62px;
    height:62px
  }

}
.mbx__card .item-icon,.mbx__prize .item-icon {
  z-index:1;
  filter:drop-shadow(0 0 10px var(--mbx-glow)) drop-shadow(0 0 4px var(--mbx-color));
  position:relative
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx__card .item-icon,.mbx__prize .item-icon {
    filter:drop-shadow(0 0 10px var(--mbx-glow)) drop-shadow(0 0 4px color-mix(in srgb, var(--mbx-color) 45%, transparent))
  }

}
.mbx__card-title,.mbx__prize-rarity {
  z-index:1;
  position:relative
}
.mbx__card--land {
  outline:none
}
.mbx__roulette .mbx__card--land {
  z-index:2;
  box-shadow:0 0 36px var(--mbx-glow), 0 0 52px var(--mbx-color), 0 0 36px #c9a86047;
  outline:none;
  transform:scale(1.03)
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx__roulette .mbx__card--land {
    box-shadow:0 0 36px var(--mbx-glow), 0 0 52px color-mix(in srgb, var(--mbx-color) 32%, transparent), 0 0 36px #c9a86047
  }

}
.mbx__roulette .mbx__card--land {
  filter:brightness(1.13);
  transition:transform .22s ease-out,box-shadow .22s ease-out,filter .22s ease-out
}
.mbx__roulette.mbx__roulette--spinning .mbx__card--land {
  z-index:auto;
  filter:none;
  box-shadow:0 0 22px var(--mbx-glow), inset 0 1px 0 #ffffff14;
  outline:none;
  transition:none;
  transform:none
}
.mbx__card--legendary,.mbx__prize.mbx__card--legendary {
  box-shadow:0 0 28px var(--mbx-glow), 0 0 48px #fbbf2440;
  animation:2.4s ease-in-out infinite mbx-legendary
}
.mbx__card--epic,.mbx__prize.mbx__card--epic {
  box-shadow:0 0 22px var(--mbx-glow)
}
.mbx__card--common {
  animation:4s ease-in-out infinite mbx-shimmer
}
.mbx__card--uncommon {
  animation:3.5s ease-in-out infinite mbx-shimmer
}
.mbx__card--rare {
  animation:3s ease-in-out infinite mbx-shimmer
}
.mbx__card--epic {
  animation:2.6s ease-in-out infinite mbx-shimmer
}
.mbx__card-title {
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#f4f4f5;
  max-width:100%;
  font-size:.72rem;
  line-height:1.25;
  display:block;
  overflow:hidden
}
.mbx__grid {
  grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));
  gap:.75rem;
  display:grid
}
.mbx__prize {
  width:auto;
  min-width:0;
  max-width:none;
  min-height:168px;
  margin:0;
  padding:.55rem .5rem .45rem
}
.mbx__prize-rarity {
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.65rem
}
.mbx-pool {
  background:linear-gradient(#161412eb,#08080af5),repeating-linear-gradient(0deg,#0000,#0000 11px,#ffffff04 11px 12px);
  border:1px solid #c9a86038;
  border-radius:.2rem;
  margin-top:.5rem;
  padding:1.15rem 1.2rem 1.35rem;
  position:relative;
  box-shadow:inset 0 1px #ffffff0a
}
.mbx-pool:before {
  content:"";
  background:linear-gradient(90deg,#0000,#c9a860a6,#0000);
  height:2px;
  position:absolute;
  top:0;
  left:1.2rem;
  right:1.2rem
}
.mbx-pool__head {
  z-index:5;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  background:linear-gradient(#12100efa,#0c0b0af5);
  border-bottom:1px solid #ffffff0f;
  margin:-1.15rem -1.2rem 1.1rem;
  padding:1rem 1.2rem .85rem;
  position:sticky;
  top:0
}
.mbx-pool__title-row {
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem 1.15rem;
  display:flex
}
.mbx-pool__legend {
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem .85rem;
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  transform:translateY(.35rem)
}
.mbx-pool__legend-item {
  align-items:center;
  gap:.35rem;
  line-height:1;
  display:inline-flex
}
.mbx-pool__legend-swatch {
  background:var(--mbx-color);
  width:.55rem;
  height:.55rem;
  box-shadow:0 0 12px var(--mbx-glow), 0 0 5px var(--mbx-color);
  border-radius:50%
}
.mbx-pool__legend-label {
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mbx-color);
  text-shadow:0 0 14px var(--mbx-glow);
  font-size:.72rem;
  font-weight:600;
  line-height:1
}
.mbx-pool__title {
  font-family:var(--font-platypi), Georgia, serif;
  color:#f5f0e6;
  letter-spacing:.01em;
  margin:0;
  font-size:clamp(1.15rem,2.6vw,1.45rem);
  font-weight:700;
  line-height:1.15
}
.mbx-pool__empty {
  color:#71717a;
  margin:0;
  font-size:.85rem
}
.mbx-pool__tiers {
  flex-direction:column;
  gap:1rem;
  display:flex
}
.mbx-pool__items {
  flex-direction:column;
  align-items:flex-start;
  gap:.3rem;
  margin:0;
  padding:0;
  list-style:none;
  display:flex
}
.mbx-pool__item {
  margin:0;
  padding:0
}
.mbx-pool__name {
  color:var(--mbx-color);
  text-shadow:0 0 17px var(--mbx-glow);
  font-size:.9rem;
  font-weight:600;
  line-height:1.35
}
@media (max-width:640px) {
  .mbx-pool {
    padding:1rem .85rem 1.15rem
  }
.mbx-pool__head {
    margin:-1rem -.85rem 1rem;
    padding:.85rem .85rem .75rem
  }
.mbx-pool__title-row {
    flex-direction:column;
    align-items:flex-start
  }

}
.mbx__win {
  background:linear-gradient(135deg,#78350f8c,#000000b3),radial-gradient(circle at 20% 40%,#fbbf2440,#0000 55%);
  border:1px solid #fbbf24a6;
  border-radius:.45rem;
  align-items:center;
  gap:1rem;
  width:min(100%,520px);
  padding:1rem 1.15rem;
  animation:.55s cubic-bezier(.18,1.2,.35,1) both mbx-win-pop;
  display:flex;
  position:relative;
  overflow:hidden;
  box-shadow:0 0 0 1px #fde04740,0 0 40px #fbbf2459
}
.mbx__win--jackpot {
  animation:.55s cubic-bezier(.18,1.2,.35,1) both mbx-win-pop,.7s ease-in-out 3 mbx-win-glow
}
.mbx__win-label {
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fbbf24;
  font-size:.7rem
}
.mbx__win-name {
  color:#fff7ed;
  text-shadow:0 0 12px #fbbf248c;
  font-size:1.1rem;
  font-weight:700
}
.mbx__win-hint {
  color:#d6d3d1;
  margin-top:.25rem;
  font-size:.8rem
}
.mbx--spinning {
  animation:.18s linear infinite mbx-screen-shake
}
.mbx--celebrate {
  animation:.45s ease-out mbx-screen-pop
}
.mbx__mural {
  background:radial-gradient(115% 90% at 50% -25%,#fbbf241a,#0000 58%),linear-gradient(#1c1810f7,#08080af5);
  border:1px solid #c9a86052;
  border-radius:.45rem;
  padding:.45rem 0 .55rem;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 1px #fbbf2424,inset 0 -1px #00000080,0 8px 22px #0006
}
.mbx__mural-head {
  justify-content:center;
  align-items:center;
  gap:.55rem;
  margin:0 0 .4rem;
  padding:0 .75rem;
  display:flex
}
.mbx__mural-ornament {
  background:linear-gradient(90deg,#0000,#e8c56ad9,#0000);
  width:clamp(1.75rem,6vw,2.5rem);
  height:1px;
  display:block;
  box-shadow:0 0 8px #fbbf2466
}
.mbx__mural-title {
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#f0d78a;
  text-shadow:0 0 12px #fbbf2473;
  margin:0;
  font-size:.7rem;
  font-weight:700
}
.mbx__mural-viewport {
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 5% 95%,#0000 100%);
  mask-image:linear-gradient(90deg,#0000 0%,#000 5% 95%,#0000 100%)
}
.mbx__mural-track {
  will-change:transform;
  width:max-content;
  animation:mbx-mural-marquee var(--mbx-mural-duration,40s) linear infinite;
  display:flex
}
.mbx__mural-strip {
  flex-shrink:0;
  align-items:stretch;
  gap:.45rem;
  margin:0;
  padding:.2rem .3rem;
  list-style:none;
  display:flex
}
.mbx__mural-item {
  box-sizing:border-box;
  border:1px solid var(--mbx-color,#c9a860);
  border-radius:.35rem;
  flex:none;
  align-items:center;
  gap:.45rem;
  width:168px;
  min-width:168px;
  max-width:168px;
  min-height:58px;
  display:flex;
  position:relative
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx__mural-item {
    border:1px solid color-mix(in srgb, var(--mbx-color,#c9a860) 55%, #c9a86059)
  }

}
.mbx__mural-item {
  background-color:#060608b8;
  background-image:linear-gradient(155deg, var(--mbx-color,#71717a), #0a0a0cd1 48%, #040406eb), var(--mbx-frame)
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx__mural-item {
    background-image:linear-gradient(155deg, color-mix(in srgb, var(--mbx-color,#71717a) 28%, transparent), #0a0a0cd1 48%, #040406eb), var(--mbx-frame)
  }

}
.mbx__mural-item {
  box-shadow:0 4px 12px #0006, 0 0 14px var(--mbx-glow,transparent), inset 0 1px 0 #ffffff1a, inset 0 0 0 1px #fbbf2414;
  background-position:50%,50%;
  background-size:cover,cover;
  padding:.35rem .45rem
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx__mural-item {
    box-shadow:0 4px 12px #0006, 0 0 14px color-mix(in srgb, var(--mbx-glow,transparent) 45%, transparent), inset 0 1px 0 #ffffff1a, inset 0 0 0 1px #fbbf2414
  }

}
.mbx__mural-item {
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  overflow:hidden
}
.mbx__mural-item:before {
  content:"";
  border-radius:inherit;
  background:linear-gradient(180deg, #ffffff12, transparent 42%), radial-gradient(80% 70% at 18% 40%, var(--mbx-glow,transparent), transparent 70%);
  position:absolute;
  inset:0
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx__mural-item:before {
    background:linear-gradient(180deg, #ffffff12, transparent 42%), radial-gradient(80% 70% at 18% 40%, color-mix(in srgb, var(--mbx-glow,transparent) 35%, transparent), transparent 70%)
  }

}
.mbx__mural-item:before {
  pointer-events:none;
  z-index:0
}
.mbx__mural-item.mbx__card--epic {
  box-shadow:0 8px 24px #00000080, 0 0 28px var(--mbx-glow), inset 0 1px 0 #ffffff1f, inset 0 0 0 1px #f472b633
}
.mbx__mural-item.mbx__card--legendary {
  box-shadow:0 10px 28px #0000008c, 0 0 30px var(--mbx-glow), 0 0 48px #fbbf2447, inset 0 1px 0 #fde04738, inset 0 0 0 1px #fbbf2438;
  border-color:#fbbf24b3
}
.mbx__mural-icon {
  z-index:1;
  filter:drop-shadow(0 0 8px var(--mbx-glow,#ffffff40));
  flex-shrink:0;
  place-items:center;
  display:grid;
  position:relative
}
.mbx__mural-icon .mbx-art-slot--md,.mbx__mural-icon .mbx-art-slot--lg {
  border-radius:6px;
  width:42px;
  height:42px;
  box-shadow:0 3px 10px #00000080,0 0 0 1px #fbbf241f,inset 0 1px #ffffff14
}
.mbx__mural-meta {
  z-index:1;
  background:linear-gradient(90deg,#00000080 0%,#00000038 70%,#0000 100%);
  border-radius:.25rem;
  flex-direction:column;
  flex:auto;
  justify-content:center;
  gap:.12rem;
  min-width:0;
  padding:.1rem .2rem .1rem 0;
  display:flex;
  position:relative
}
.mbx__mural-prize {
  text-overflow:ellipsis;
  white-space:nowrap;
  letter-spacing:.01em;
  color:#fff8e8;
  text-shadow:0 1px 2px #000000e6,0 0 8px #0000008c;
  max-width:100%;
  font-size:.72rem;
  font-weight:700;
  line-height:1.2;
  display:block;
  overflow:hidden
}
.mbx__mural-qty {
  color:var(--mbx-color,#fbbf24)
}
@supports (color:color-mix(in lab, red, red)) {
  .mbx__mural-qty {
    color:color-mix(in srgb, var(--mbx-color,#fbbf24) 85%, #fff)
  }

}
.mbx__mural-qty {
  font-variant-numeric:tabular-nums
}
.mbx__mural-foot {
  justify-content:space-between;
  align-items:baseline;
  gap:.35rem;
  min-width:0;
  display:flex
}
.mbx__mural-who {
  letter-spacing:.02em;
  color:#e7e5e4;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:auto;
  min-width:0;
  font-size:.62rem;
  font-weight:600;
  overflow:hidden
}
.mbx__mural-time {
  letter-spacing:.03em;
  color:#9a9590;
  flex-shrink:0;
  font-size:.58rem
}
@keyframes mbx-mural-marquee {
  0% {
    transform:translate(0)
  }
to {
    transform:translate(-50%)
  }

}
@media (max-width:480px) {
  .mbx__mural-item {
    width:150px;
    min-width:150px;
    max-width:150px;
    min-height:54px
  }
.mbx__mural-icon .mbx-art-slot--md,.mbx__mural-icon .mbx-art-slot--lg {
    width:38px;
    height:38px
  }

}
@media (prefers-reduced-motion:reduce) {
  .mbx__mural-viewport {
    -webkit-mask-image:none;
    mask-image:none
  }
.mbx__mural-track {
    flex-wrap:wrap;
    justify-content:center;
    gap:.65rem;
    width:100%;
    padding:0 .75rem;
    animation:none
  }
.mbx__mural-strip:last-child {
    display:none
  }

}
@keyframes mbx-pulse {
  0%,to {
    filter:brightness()
  }
50% {
    filter:brightness(1.25)
  }

}
@keyframes mbx-chest-single-open {
  0% {
    filter:drop-shadow(0 6px 12px #0006)drop-shadow(0 0 4px #c9a8601f)brightness();
    transform:scale(1)translateY(0)
  }
35% {
    filter:drop-shadow(0 10px 18px #00000080)drop-shadow(0 0 18px #fbbf2473)brightness(1.15);
    transform:scale(1.04)translateY(-2px)
  }
to {
    filter:drop-shadow(0 10px 18px #00000080)drop-shadow(0 0 16px #fbbf2459)brightness();
    transform:scale(1)translateY(0)
  }

}
@keyframes mbx-frame-closed-out {
  0% {
    opacity:1;
    filter:drop-shadow(0 18px 32px #000000a6)drop-shadow(0 0 10px #c9a8602e)brightness();
    transform:scale(1)translateY(0)
  }
18% {
    opacity:1;
    filter:drop-shadow(0 16px 28px #0009)drop-shadow(0 0 18px #c9a86059)brightness(1.12);
    transform:scale(1.015)translateY(1px)rotate(-.45deg)
  }
32% {
    opacity:1;
    filter:drop-shadow(0 14px 26px #0000008c)drop-shadow(0 0 22px #fbbf2466)brightness(1.2);
    transform:scale(1.02)translateY(-1px)rotate(.35deg)
  }
48% {
    opacity:.55;
    filter:drop-shadow(0 12px 24px #00000073)drop-shadow(0 0 28px #facc1580)brightness(1.35);
    transform:scale(1.03)translateY(-2px)
  }
62% {
    opacity:0;
    filter:brightness(1.5);
    transform:scale(1.04)translateY(-3px)
  }
to {
    opacity:0;
    visibility:hidden;
    transform:scale(1.04)translateY(-3px)
  }

}
@keyframes mbx-frame-open-in {
  0%,28% {
    opacity:0;
    filter:drop-shadow(0 18px 32px #000000a6)brightness(.85);
    transform:scale(.92)translateY(8px)
  }
42% {
    opacity:.35;
    filter:drop-shadow(0 16px 28px #0000008c)drop-shadow(0 0 20px #fbbf2466)brightness(1.05);
    transform:scale(.97)translateY(4px)
  }
58% {
    opacity:.85;
    filter:drop-shadow(0 14px 28px #0000008c)drop-shadow(0 0 32px #facc158c)brightness(1.25);
    transform:scale(1.02)translateY(-1px)
  }
78% {
    opacity:1;
    filter:drop-shadow(0 14px 28px #0000008c)drop-shadow(0 0 28px #fbbf2480)drop-shadow(0 0 14px #c9a86059)brightness(1.1);
    transform:scale(1.01)translateY(0)
  }
to {
    opacity:1;
    filter:drop-shadow(0 14px 28px #0000008c)drop-shadow(0 0 28px #fbbf2473)drop-shadow(0 0 14px #c9a86059)brightness();
    transform:scale(1)translateY(0)
  }

}
@keyframes mbx-chest-flash {
  0%,30% {
    opacity:0;
    transform:scale(.5)
  }
48% {
    opacity:.95;
    transform:scale(1.15)
  }
68% {
    opacity:.55;
    transform:scale(1.35)
  }
to {
    opacity:0;
    transform:scale(1.6)
  }

}
@keyframes mbx-chest-bounce {
  0%,to {
    transform:translateY(0)scale(1)
  }
40% {
    transform:translateY(-10px)scale(1.06)
  }
70% {
    transform:translateY(-4px)scale(1.02)
  }

}
@keyframes mbx-chest-float {
  0%,to {
    transform:translateY(0)
  }
50% {
    transform:translateY(-1px)
  }

}
@keyframes mbx-chest-aura {
  0%,to {
    opacity:.88;
    transform:scale(1)
  }
50% {
    opacity:.96;
    transform:scale(1.01)
  }

}
@keyframes mbx-key-pulse {
  0%,to {
    filter:drop-shadow(0 0 2px #000000f2)drop-shadow(0 0 10px #a855f78c)drop-shadow(0 10px 18px #000000d9)brightness(1.08)contrast(1.06);
    transform:scale(1)
  }
50% {
    filter:drop-shadow(0 0 3px #000000f2)drop-shadow(0 0 18px #a855f7e6)drop-shadow(0 0 14px #fbbf248c)drop-shadow(0 12px 20px #000000d9)brightness(1.2)contrast(1.08);
    transform:scale(1.1)
  }

}
@keyframes mbx-chest-open-glow {
  0%,12% {
    opacity:0;
    transform:scale(.7)
  }
40% {
    opacity:.55;
    transform:scale(1.05)
  }
70% {
    opacity:.95;
    transform:scale(1.18)
  }
to {
    opacity:.85;
    transform:scale(1)
  }

}
@keyframes mbx-glow-burst {
  0%,to {
    opacity:.55;
    filter:brightness();
    transform:scale(1)
  }
50% {
    opacity:1;
    filter:brightness(1.6);
    transform:scale(1.25)
  }

}
@keyframes mbx-btn-shake {
  0%,to {
    transform:translate(0)
  }
25% {
    transform:translate(-2px)scale(1.02)
  }
75% {
    transform:translate(2px)scale(1.02)
  }

}
@keyframes mbx-key-idle {
  0%,to {
    transform:translateY(0)rotate(-2deg)
  }
50% {
    transform:translateY(-4px)rotate(4deg)
  }

}
@keyframes mbx-key-frame-0 {
  0%,20% {
    opacity:1
  }
28%,to {
    opacity:0
  }

}
@keyframes mbx-key-frame-1 {
  0%,18% {
    opacity:0
  }
26%,52% {
    opacity:1
  }
60%,to {
    opacity:0
  }

}
@keyframes mbx-key-frame-2 {
  0%,50% {
    opacity:0
  }
58%,to {
    opacity:1
  }

}
@keyframes mbx-key-unlock-pulse {
  0% {
    filter:brightness();
    transform:scale(1)
  }
18% {
    filter:brightness(1.2);
    transform:scale(1.07)
  }
70% {
    filter:brightness(1.18);
    transform:scale(1.03)
  }
to {
    filter:brightness(1.06);
    opacity:.4;
    transform:scale(1)
  }

}
@keyframes mbx-key-unlock-glow {
  0% {
    opacity:.7;
    transform:scale(1)
  }
30% {
    opacity:1;
    transform:scale(1.12)
  }
to {
    opacity:.15;
    transform:scale(.9)
  }

}
@keyframes mbx-pointer-tick {
  0%,to {
    opacity:1;
    transform:translate(-50%)scaleY(1)
  }
50% {
    opacity:.85;
    transform:translate(-50%)scaleY(.96)
  }

}
@keyframes mbx-win-pop {
  0% {
    opacity:0;
    filter:brightness(1.8);
    transform:scale(.72)translateY(18px)
  }
60% {
    opacity:1;
    filter:brightness(1.15);
    transform:scale(1.06)translateY(-2px)
  }
to {
    opacity:1;
    filter:brightness();
    transform:scale(1)translateY(0)
  }

}
@keyframes mbx-win-glow {
  0%,to {
    box-shadow:0 0 20px #fbbf2459
  }
50% {
    box-shadow:0 0 55px #fde047d9,0 0 90px #f9731673
  }

}
@keyframes mbx-screen-shake {
  0%,to {
    transform:translate(0)
  }
25% {
    transform:translate(-1px,1px)
  }
50% {
    transform:translate(1px,-1px)
  }
75% {
    transform:translate(-1px)
  }

}
@keyframes mbx-screen-pop {
  0% {
    filter:brightness(2.2)saturate(1.4)
  }
to {
    filter:brightness()saturate()
  }

}
@keyframes mbx-legendary {
  0%,to {
    filter:saturate()brightness()
  }
50% {
    filter:saturate(1.25)brightness(1.15)
  }

}
@keyframes mbx-shimmer {
  0%,to {
    box-shadow:0 0 14px var(--mbx-glow)
  }
50% {
    box-shadow:0 0 26px var(--mbx-glow)
  }

}
.mbx {
  position:relative
}
.mbx-fx {
  z-index:80;
  pointer-events:none;
  position:fixed;
  inset:0;
  overflow:hidden
}
.mbx-fx__flash {
  background:radial-gradient(circle at 50% 40%,#fde0478c,#0000 55%);
  animation:.9s ease-out both mbx-fx-flash;
  position:absolute;
  inset:0
}
.mbx-fx__vignette {
  background:radial-gradient(circle,#0000 30%,#0000008c 100%);
  animation:4s ease-out both mbx-fx-fade;
  position:absolute;
  inset:0
}
.mbx-fx__coins {
  position:absolute;
  inset:0
}
.mbx-fx__coin {
  background:radial-gradient(circle at 30% 30%,#fef9c3,#facc15 40%,#d97706 72%,#92400e 100%);
  border-radius:50%;
  animation-name:mbx-coin-fall;
  animation-timing-function:cubic-bezier(.25,.7,.35,1);
  animation-fill-mode:both;
  position:absolute;
  top:-8%;
  box-shadow:inset 0 0 0 2px #78350f73,0 0 10px #facc15a6
}
.mbx-fx__coin:after {
  content:"$";
  color:#92400e;
  opacity:.75;
  place-items:center;
  font-size:.65em;
  font-weight:900;
  display:grid;
  position:absolute;
  inset:0
}
.mbx-fx--legendary .mbx-fx__flash {
  background:radial-gradient(circle at 50% 40%,#fde047b3,#0000 55%)
}
@keyframes mbx-fx-flash {
  0% {
    opacity:1
  }
40% {
    opacity:.75
  }
to {
    opacity:0
  }

}
@keyframes mbx-fx-fade {
  0%,55% {
    opacity:1
  }
to {
    opacity:0
  }

}
@keyframes mbx-coin-fall {
  0% {
    opacity:0;
    transform:translateY(-10vh)rotate(0)scale(.6)
  }
12% {
    opacity:1
  }
to {
    transform:translate3d(var(--mbx-sway,0px), 110vh, 0) rotate(var(--mbx-spin,360deg)) scale(1);
    opacity:.85
  }

}
.mbx-art-slot {
  border-radius:8px;
  flex-shrink:0;
  place-content:center;
  place-items:center;
  display:inline-grid;
  position:relative;
  overflow:hidden;
  box-shadow:0 4px 14px #00000073
}
.mbx-art-slot__bg {
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  z-index:0;
  width:100%;
  height:100%;
  position:absolute;
  inset:0
}
.mbx-art-slot--sm {
  border-radius:6px;
  width:44px;
  height:44px
}
.mbx-art-slot--md {
  width:60px;
  height:60px
}
.mbx-art-slot--lg {
  width:88px;
  height:88px
}
.mbx-art {
  z-index:1;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 0 8px var(--mbx-glow,#ffffff47));
  background:0 0;
  border:0;
  display:block;
  position:relative
}
.mbx-art-slot .mbx-art--sm,.mbx-art-slot .mbx-art--md,.mbx-art-slot .mbx-art--lg,.mbx-art-slot .item-icon {
  object-fit:contain;
  object-position:center;
  width:84%;
  max-width:84%;
  height:84%;
  max-height:84%
}
.mbx-art-slot .mbx-art--wing {
  width:98%;
  max-width:98%;
  height:98%;
  max-height:98%
}
.mbx-art-slot .item-icon {
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  background:0 0;
  border:0;
  border-radius:0
}
.mbx-art--sm {
  width:40px;
  height:40px
}
.mbx-art--md {
  width:52px;
  height:52px
}
.mbx-art--lg {
  width:76px;
  height:76px
}
.mbx-art--float {
  animation:2.8s ease-in-out infinite mbx-art-float
}
.mbx__card--legendary .mbx-art--float,.mbx__prize.mbx__card--legendary .mbx-art--float {
  animation:2.2s ease-in-out infinite mbx-art-float,1.8s ease-in-out infinite mbx-art-sparkle
}
.mbx__card--epic .mbx-art--float,.mbx__prize.mbx__card--epic .mbx-art--float {
  animation:2.4s ease-in-out infinite mbx-art-float
}
@keyframes mbx-art-float {
  0%,to {
    transform:translateY(0)scale(1)
  }
50% {
    transform:translateY(-5px)scale(1.04)
  }

}
@keyframes mbx-art-sparkle {
  0%,to {
    filter:drop-shadow(0 0 8px #fbbf248c)brightness()
  }
50% {
    filter:drop-shadow(0 0 16px #fbbf24f2)brightness(1.12)
  }

}
.admin-accounts-table {
  border-collapse:collapse;
  table-layout:auto;
  width:100%;
  font-size:.875rem
}
.mbx__track--pre-rolling {
  animation:38.4s linear both mbx-pre-roll
}
@keyframes mbx-pre-roll {
  0% {
    transform:translate(0)
  }
to {
    transform:translate(-96000px)
  }

}
@keyframes mbx-catalog-glow {
  50% {
    opacity:.55;
    transform:scale(1.16)
  }

}
.mbx-catalog__art-glow {
  filter:blur(18px);
  background:#a855f738;
  border-radius:50%;
  animation:2.4s ease-in-out infinite mbx-catalog-glow;
  position:absolute;
  inset:18%
}
.mbx-catalog__card--green .mbx-catalog__art-glow {
  background:#22c55e3d
}
.mbx-catalog__card--silver .mbx-catalog__art-glow {
  background:#ef44443d
}
.mbx-catalog__card:before {
  content:"";
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle at 50% 32%,#a855f733,#0000 48%);
  position:absolute;
  inset:0
}
.mbx-catalog__card--green:before {
  background:radial-gradient(circle at 50% 32%,#22c55e33,#0000 48%)
}
.mbx-catalog__card--silver:before {
  background:radial-gradient(circle at 50% 32%,#dc262633,#0000 48%)
}
.admin-accounts-table th,.admin-accounts-table td {
  text-align:left;
  vertical-align:middle;
  white-space:nowrap;
  border-bottom:1px solid #ffffff0f;
  padding:.7rem .65rem
}
.admin-accounts-table th {
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#a1a1aa;
  font-size:.7rem
}
.admin-accounts-table tbody tr:hover {
  background:#ffffff08
}
.admin-accounts-table-wrap {
  background:#151518;
  border:1px solid #ffffff17;
  overflow-x:auto
}
.admin-accounts-page {
  width:100%;
  max-width:min(1440px,100%);
  margin-inline:auto;
  padding-inline:1rem
}
.admin-accounts-card {
  background:#111114
}
.admin-accounts-actions {
  justify-content:flex-end;
  align-items:flex-start;
  gap:.5rem;
  display:flex
}
@media (max-width:1280px) {
  .admin-accounts-actions {
    flex-direction:column;
    align-items:stretch;
    gap:.35rem
  }
.admin-accounts-actions>* {
    width:100%
  }

}
.shop {
  flex-direction:column;
  gap:1.25rem;
  display:flex
}
.shop-hub {
  flex-direction:column;
  gap:1.5rem;
  display:flex
}
.shop-hub--pending {
  background-color:var(--background);
  min-height:28rem
}
.shop-hub__tabs {
  margin-bottom:.25rem
}
.shop-hub__caixa {
  scroll-margin-top:6rem
}
.shop__notice {
  color:var(--muted);
  background:#c9a86014;
  border:1px solid #c9a86047;
  border-radius:.5rem;
  flex-direction:column;
  gap:.35rem;
  padding:.9rem 1.1rem;
  font-size:.9rem;
  line-height:1.45;
  display:flex
}
.shop__notice strong {
  color:var(--brand-strong);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.78rem
}
.shop__balance {
  border:1px solid var(--border);
  color:var(--muted);
  background:#18181bd9;
  border-radius:.5rem;
  flex-wrap:wrap;
  gap:.75rem 1.5rem;
  padding:.75rem 1rem;
  font-size:.9rem;
  display:flex
}
.shop__balance strong {
  color:var(--foreground)
}
.shop__flash {
  border-radius:.45rem;
  margin:0;
  padding:.75rem 1rem;
  font-size:.9rem
}
.shop__flash--ok {
  color:#bbf7d0;
  background:#16653440;
  border:1px solid #4ade8059
}
.shop__flash--err {
  color:#fecaca;
  background:#7f1d1d4d;
  border:1px solid #f8717166
}
@media (max-width:640px) {
  .payment-result-page {
    min-height:520px;
    padding:2rem 1rem 3rem
  }
.payment-result-card {
    padding:2.2rem 1.15rem
  }
.payment-result-card__details {
    grid-template-columns:1fr
  }
.payment-result-card__details>div {
    min-height:auto
  }
.payment-result-card__actions {
    flex-direction:column
  }
.payment-result-card__actions a {
    width:100%
  }

}
.shop__grid {
  grid-template-columns:1fr;
  gap:1.25rem;
  margin-top:.5rem;
  display:grid
}
@media (min-width:768px) {
  .shop__grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.5rem
  }

}
.shop-card {
  text-align:center;
  background:linear-gradient(#1c1c1f 0%,#141416 100%);
  border:1px solid #ffffff0f;
  border-radius:.35rem;
  flex-direction:column;
  align-items:center;
  padding:1.35rem 1.1rem 1.25rem;
  display:flex;
  position:relative;
  overflow:hidden;
  box-shadow:0 16px 40px #0006
}
.shop-card__accent {
  background:linear-gradient(90deg,#c2410c,#ea580c 40%,#f97316);
  height:3px;
  position:absolute;
  top:0;
  left:0;
  right:0
}
.shop-card__badge {
  z-index:2;
  color:#facc15;
  letter-spacing:.02em;
  background:#0c0c0de0;
  border:1px solid #eab30859;
  border-radius:.25rem;
  padding:.2rem .5rem;
  font-size:.72rem;
  font-weight:700;
  position:absolute;
  top:.75rem;
  right:.75rem
}
.shop-card__art {
  aspect-ratio:3/3.4;
  place-items:center;
  width:100%;
  max-width:220px;
  margin:.5rem 0 .35rem;
  display:grid
}
.shop-card__img {
  object-fit:contain;
  filter:drop-shadow(0 10px 24px #0000008c);
  width:100%;
  height:100%
}
.shop-card__name {
  font-family:var(--font-display), serif;
  color:#f4f4f5;
  margin:.25rem 0 0;
  font-size:1.35rem;
  font-weight:700
}
.shop-card__amounts {
  margin-top:.55rem;
  line-height:1.35
}
.shop-card__base,.shop-card__bonus {
  color:#8b8b93;
  margin:0;
  font-size:.86rem
}
.shop-card__total {
  color:#f97316;
  letter-spacing:.01em;
  margin:.35rem 0 0;
  font-size:1.2rem;
  font-weight:800
}
.shop-card__price {
  color:#fafafa;
  margin:.85rem 0 0;
  font-size:1.35rem;
  font-weight:800
}
.shop-card__footer {
  flex-direction:column;
  align-items:center;
  gap:.65rem;
  width:100%;
  margin-top:1rem;
  display:flex
}
.shop-card__gift {
  color:#a1a1aa;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  align-items:center;
  gap:.45rem;
  font-size:.82rem;
  display:inline-flex
}
.shop-card__gift input {
  accent-color:#ea580c;
  width:.95rem;
  height:.95rem
}
.shop-card__gift--muted {
  cursor:default;
  opacity:.75
}
.shop-card__gift-input {
  width:100%;
  max-width:220px;
  color:var(--foreground);
  text-align:center;
  background:#00000059;
  border:1px solid #ffffff1f;
  border-radius:.3rem;
  padding:.45rem .65rem;
  font-size:.85rem
}
.shop-card__gift-input:focus {
  border-color:#f9731673;
  outline:1px solid #f973168c
}
.shop-card__cta {
  color:#fff;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  background:linear-gradient(#f4a989 0%,#e25a4a 42%,#9f1d1d 100%);
  border:0;
  justify-content:center;
  align-items:center;
  min-width:9.5rem;
  padding:.7rem 1.6rem;
  font-size:.92rem;
  font-weight:700;
  text-decoration:none;
  transition:filter .15s,box-shadow .15s,transform .15s;
  display:inline-flex;
  transform:skew(-12deg);
  box-shadow:0 8px 18px #7f1d1d73
}
.shop-card__cta-label {
  display:inline-block;
  transform:skew(12deg)
}
.shop-card__cta:hover:not(:disabled) {
  filter:brightness(1.08);
  box-shadow:0 10px 22px #991b1b8c
}
.shop-card__cta:disabled {
  opacity:.65;
  cursor:not-allowed
}
.shop-card__cta--ghost {
  background:linear-gradient(#52525b 0%,#3f3f46 50%,#27272a 100%);
  box-shadow:0 6px 14px #00000059
}
.shop-card__confirm {
  flex-direction:column;
  align-items:center;
  gap:.65rem;
  width:100%;
  display:flex
}
.shop-card__confirm-text {
  color:#d4d4d8;
  max-width:16rem;
  margin:0;
  font-size:.8rem;
  line-height:1.4
}
.shop-card__confirm-text strong {
  color:#fdba74
}
.shop-card__confirm-actions {
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
  display:flex
}
@media (max-width:767px) {
  :root {
    --locale-bar-height:2.5rem;
    --header-height:3.75rem
  }
body {
    padding-left:env(safe-area-inset-left,0);
    padding-right:env(safe-area-inset-right,0)
  }
.locale-bar {
    padding-top:env(safe-area-inset-top,0);
    height:calc(var(--locale-bar-height) + env(safe-area-inset-top,0))
  }
.locale-bar__flag {
    width:2.75rem;
    min-width:44px;
    height:2.4rem;
    min-height:40px
  }
.locale-bar__icon {
    width:1.55rem
  }
.mbx-sfx-orb {
    width:2.35rem;
    height:2.35rem
  }
.mbx-sfx-orb__icon {
    width:1.15rem;
    height:1.15rem
  }
.site-header {
    top:calc(var(--locale-bar-height) + env(safe-area-inset-top,0))
  }
.site-header__logo img {
    width:2.35rem;
    max-width:2.35rem;
    height:2.35rem;
    max-height:2.35rem
  }
.page-with-header {
    padding-top:calc(var(--top-chrome-height) + env(safe-area-inset-top,0))
  }
.page-shell {
    padding-inline:.85rem
  }
.hero-section__content {
    min-height:min(72svh,28rem);
    padding-top:2.5rem;
    padding-bottom:2.75rem
  }
.mbx-catalog__grid {
    grid-template-columns:1fr;
    gap:.85rem
  }
.mbx-catalog__card {
    min-height:44px;
    padding:.9rem .85rem 1rem
  }
.mbx-buy-modal__step {
    width:2.75rem;
    height:2.75rem
  }
.ranking-table__grid th,.ranking-table__grid td {
    padding:.65rem .55rem
  }
.ranking-table__grid th {
    font-size:.65rem
  }
.shop-hub__tabs .char-tabs__btn {
    flex:1 1 0;
    min-height:44px;
    font-size:.78rem
  }

}
@media (max-width:480px) {
  .mbx__open-btn-meta {
    letter-spacing:.03em;
    font-size:.82rem
  }
.mbx__chest-body {
    width:min(200px,62vw)
  }
.mbx__open-btn,.mbx__buy-btn {
    min-height:3.15rem
  }

}
.cash-editor {
  gap:24px;
  display:grid
}
.webshop-admin-mode {
  border:1px solid #cda85047;
  border-radius:5px;
  flex-wrap:wrap;
  gap:12px;
  padding:14px;
  display:flex
}
.webshop-admin-bundle {
  background:#8259120d;
  border:1px solid #cda85047;
  border-radius:5px;
  gap:12px;
  padding:14px;
  display:grid
}
.webshop-admin-bundle legend {
  color:#d4aa4f;
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:0 7px;
  font-size:.7rem;
  font-weight:900
}
.webshop-admin-bundle>p {
  color:#a1a1aa;
  margin:0;
  font-size:.78rem
}
.webshop-admin-bundle>.btn-subtle {
  justify-self:start
}
.webshop-admin-mode legend,.webshop-admin-duration-config legend {
  color:#d4aa4f;
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:0 7px;
  font-size:.7rem;
  font-weight:900
}
.webshop-admin-mode label {
  color:#ddd;
  cursor:pointer;
  background:#18181b;
  border:1px solid #343238;
  border-radius:4px;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 14px;
  display:flex
}
.webshop-admin-mode label:has(input:checked) {
  color:#f2ca67;
  background:#aa771821;
  border-color:#bd8b2d
}
.webshop-admin-mode input,.webshop-admin-duration-config>label>input[type=checkbox] {
  accent-color:#d6a13c
}
.webshop-admin-duration-config {
  background:#8259120d;
  border:1px solid #cda85047;
  border-radius:5px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  padding:14px;
  display:none
}
.webshop-admin-mode:has(input[value=timed]:checked)+.webshop-admin-duration-config {
  display:grid
}
.webshop-admin-duration-config>label {
  color:#ddd;
  background:#161619;
  border:1px solid #343238;
  border-radius:4px;
  grid-template-columns:18px 1fr;
  align-items:center;
  gap:8px;
  padding:10px;
  display:grid
}
.webshop-admin-duration-config>label>.input {
  grid-column:1/-1
}
@media (max-width:700px) {
  .webshop-admin-duration-config {
    grid-template-columns:1fr
  }

}
.cash-editor__form {
  background:linear-gradient(145deg,#120f0cfa,#080809f7);
  border:1px solid #d2a5484d;
  border-radius:14px;
  grid-template-columns:minmax(280px,.78fr) minmax(420px,1.35fr);
  display:grid;
  overflow:hidden;
  box-shadow:0 22px 65px #0000006b
}
.cash-editor__preview {
  text-align:center;
  background:radial-gradient(circle at 50% 40%,#915d143d,#0000 36%),linear-gradient(#05050633,#050506db),url(../image/section-panel.jpg) 50%/cover;
  border-right:1px solid #d2a5483b;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:620px;
  padding:42px;
  display:flex;
  position:relative;
  overflow:hidden
}
.cash-editor__preview:before {
  content:"";
  pointer-events:none;
  border:1px solid #daae4d38;
  position:absolute;
  inset:18px
}
.cash-editor__glow {
  filter:blur(2px);
  background:radial-gradient(circle,#f6be3a38,#9d54050f 48%,#0000 70%);
  border-radius:50%;
  width:270px;
  height:270px;
  position:absolute
}
.cash-editor__icon {
  z-index:1;
  color:#d9ad54;
  place-items:center;
  width:230px;
  height:230px;
  font:700 64px Georgia,serif;
  display:grid;
  position:relative
}
.cash-editor__icon img {
  filter:drop-shadow(0 14px 18px #000)drop-shadow(0 0 18px #edaf342e);
  object-fit:contain!important;
  width:100%!important;
  height:100%!important
}
.cash-editor__item-name {
  z-index:1;
  color:#f4ead3;
  text-shadow:0 2px 6px #000;
  margin:8px 0 3px;
  font:700 27px Georgia,serif;
  position:relative
}
.cash-editor__item-name--excellent {
  color:#52d47b
}
.cash-editor__item-code {
  z-index:1;
  color:#9a9388;
  font-size:12px;
  position:relative
}
.cash-editor__badges {
  z-index:1;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  min-height:28px;
  margin-top:16px;
  display:flex;
  position:relative
}
.cash-editor__badges span {
  color:#d9b867;
  text-transform:uppercase;
  letter-spacing:.09em;
  background:#090807bd;
  border:1px solid #d5a94761;
  border-radius:99px;
  padding:4px 9px;
  font-size:10px
}
.cash-editor__fields {
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;
  gap:17px;
  padding:34px;
  display:grid
}
.cash-editor__fields>label,.cash-editor__block>label {
  color:#c7a85f;
  letter-spacing:.08em;
  text-transform:uppercase;
  gap:7px;
  font-size:11px;
  font-weight:700;
  display:grid
}
.cash-editor__fields input:not([type=checkbox]),.cash-editor__fields select {
  color:#eee8dc;
  background:#202023;
  border:1px solid #ffffff1f;
  border-radius:5px;
  outline:none;
  width:100%;
  min-height:44px;
  padding:0 12px
}
.cash-editor__fields input:focus,.cash-editor__fields select:focus {
  border-color:#cda850;
  box-shadow:0 0 0 2px #cda8501f
}
.cash-editor__fields small {
  color:#777;
  letter-spacing:0;
  text-transform:none;
  font-size:10px
}
.cash-editor__block--wide,.cash-editor__excellent,.cash-editor__message,.cash-editor__submit {
  grid-column:1/-1
}
.cash-editor__toggles {
  color:#ddd;
  align-items:center;
  gap:20px;
  display:flex
}
.cash-editor__toggles label,.cash-editor__excellent label {
  align-items:center;
  gap:8px;
  font-size:12px;
  display:flex
}
.profile-privacy-account {
  justify-content:space-between;
  align-items:center;
  gap:24px;
  display:flex
}
.profile-privacy-switch {
  color:#fff;
  border:1px solid #ffffff1f;
  border-radius:999px;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  min-width:112px;
  padding:6px 12px 6px 7px;
  transition:all .2s;
  display:inline-flex
}
.profile-privacy-switch__track {
  background:#7d2027;
  border-radius:999px;
  width:48px;
  height:26px;
  position:relative;
  box-shadow:inset 0 0 0 1px #ffffff1f
}
.profile-privacy-switch__track i {
  background:#f5f5f5;
  border-radius:50%;
  width:20px;
  height:20px;
  transition:all .2s;
  position:absolute;
  top:3px;
  left:3px;
  box-shadow:0 2px 7px #0008
}
.profile-privacy-switch.is-public {
  color:#65e897;
  background:#1b743e33;
  border-color:#3f9b64
}
.profile-privacy-switch.is-public .profile-privacy-switch__track {
  background:#2aa85b
}
.profile-privacy-switch.is-public .profile-privacy-switch__track i {
  transform:translate(22px)
}
.profile-privacy-switch.is-private {
  color:#ff777e;
  background:#741b222e;
  border-color:#7b252c
}
.profile-privacy-switch:disabled {
  cursor:not-allowed;
  opacity:.45
}
.profile-privacy-switch strong {
  letter-spacing:.12em;
  font-size:.75rem
}
.profile-privacy-lock {
  color:#e9c86c;
  background:#694c142e;
  border:1px solid #755b24;
  padding:13px 16px
}
.profile-privacy-list {
  gap:10px;
  margin-top:20px;
  display:grid
}
.profile-privacy-row {
  background:#09090b;
  border:1px solid #c9a1452e;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:14px 16px;
  display:flex
}
.profile-privacy-row>div {
  flex-direction:column;
  gap:3px;
  display:flex
}
.profile-privacy-row small {
  color:#94959e
}
.char-profile-privacy {
  background:linear-gradient(110deg,#1a140cf5,#0a0a0cf5);
  border:1px solid #c9a14559;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  min-height:58px;
  padding:10px 13px;
  display:flex
}
.char-profile-privacy>span {
  color:#f0e3c5;
  flex-direction:column;
  gap:3px;
  display:flex
}
.char-profile-privacy small {
  color:#94959e;
  font-size:.7rem
}
@media (max-width:640px) {
  .profile-privacy-account {
    flex-direction:column;
    align-items:flex-start
  }
.profile-privacy-row {
    padding:12px
  }

}
.cash-editor__excellent {
  color:#d3cec4;
  border:1px solid #ffffff17;
  border-radius:7px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:15px;
  display:grid
}
.cash-editor__excellent legend {
  color:#cba753;
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:0 8px;
  font-size:11px;
  font-weight:700
}
.cash-editor__message {
  border:1px solid;
  border-radius:5px;
  padding:12px;
  font-size:13px
}
.cash-editor__message--error {
  color:#faa;
  background:#321416;
  border-color:#883235
}
.cash-editor__message--success {
  color:#83e5ae;
  background:#10271d;
  border-color:#2c6e4b
}
.cash-editor__submit {
  min-height:50px
}
.cash-editor__registered {
  background:#080809e6;
  border:1px solid #d2a54838;
  border-radius:12px;
  padding:24px
}
.cash-editor__registered h2 {
  color:#f4ead8;
  margin:3px 0;
  font:700 25px Georgia,serif
}
.cash-editor__registered p {
  color:#777;
  font-size:12px
}
.cash-editor__list {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:20px;
  display:grid
}
.cash-editor__list article {
  background:#ffffff05;
  border:1px solid #ffffff13;
  grid-template-columns:48px 1fr auto;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:9px;
  display:grid
}
.cash-editor__list article>div {
  min-width:0;
  display:grid
}
.cash-editor__list strong {
  color:#e9e1d3;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  overflow:hidden
}
.cash-editor__list span {
  color:#716d67;
  font-size:10px
}
.cash-editor__list b {
  color:#d7b45d;
  white-space:nowrap;
  font-size:11px
}
@media (max-width:850px) {
  .cash-editor__form {
    grid-template-columns:1fr
  }
.cash-editor__preview {
    border-bottom:1px solid #d2a5483b;
    border-right:0;
    min-height:390px
  }
.cash-editor__fields {
    grid-template-columns:1fr;
    padding:22px
  }
.cash-editor__block--wide,.cash-editor__excellent,.cash-editor__message,.cash-editor__submit {
    grid-column:auto
  }
.cash-editor__list {
    grid-template-columns:1fr
  }

}
.site-footer {
  z-index:2;
  color:#a8acb5;
  background:radial-gradient(circle at 12% 18%,#97181e14,#0000 28rem),#050608;
  border-top:1px solid #8b1b1f52;
  position:relative
}
.payment-result-page {
  place-items:center;
  min-height:590px;
  padding-top:4rem;
  padding-bottom:5rem;
  display:grid
}
.payment-result-card {
  isolation:isolate;
  text-align:center;
  background:linear-gradient(145deg,#19191dfa,#07080bfc);
  border:1px solid #715820;
  width:min(780px,100%);
  padding:clamp(2rem,5vw,4.25rem);
  position:relative;
  overflow:hidden;
  box-shadow:0 28px 90px #000000a6,inset 0 0 0 1px #e6be5b0f
}
.payment-result-card:before,.payment-result-card:after {
  content:"";
  border-color:#bd9034;
  width:80px;
  height:80px;
  position:absolute
}
.payment-result-card:before {
  border-top:2px solid;
  border-left:2px solid;
  top:16px;
  left:16px
}
.payment-result-card:after {
  border-bottom:2px solid;
  border-right:2px solid;
  bottom:16px;
  right:16px
}
.payment-result-card__glow {
  z-index:-1;
  filter:blur(65px);
  background:#2aa95e2e;
  border-radius:50%;
  width:430px;
  height:300px;
  position:absolute;
  top:-100px;
  left:50%;
  transform:translate(-50%)
}
.payment-result-card.is-cancelled .payment-result-card__glow {
  background:#b574192e
}
.payment-result-card__seal {
  color:#8bf0ae;
  background:radial-gradient(circle,#2e96543d,#040d08e6);
  border:2px solid #53d486;
  border-radius:50%;
  place-items:center;
  width:88px;
  height:88px;
  margin:0 auto 1.4rem;
  font-size:2.8rem;
  font-weight:900;
  display:grid;
  box-shadow:0 0 0 9px #3cbe690d,0 0 42px #3bd37038
}
.payment-result-card.is-cancelled .payment-result-card__seal {
  color:#f0c765;
  background:radial-gradient(circle,#9f6a1c40,#100b04eb);
  border-color:#d3a343;
  box-shadow:0 0 0 9px #c28b2b0d,0 0 42px #d39c3a33
}
.payment-result-card__eyebrow {
  color:#dcb65a;
  letter-spacing:.25em;
  text-transform:uppercase;
  margin:0;
  font-size:.68rem;
  font-weight:900
}
.payment-result-card h1 {
  color:#fff3d4;
  text-shadow:0 3px 20px #e5b44724;
  margin:.65rem 0 0;
  font:700 clamp(2rem,5vw,3.25rem)/1.08 Georgia,serif
}
.payment-result-card__lead {
  color:#bfc0c5;
  max-width:610px;
  margin:1rem auto 0;
  font-size:1rem;
  line-height:1.65
}
.payment-result-card__details {
  background:#343127;
  border:1px solid #343127;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin:2.2rem 0 0;
  display:grid
}
.payment-result-card__details>div {
  background:#0d0e11f5;
  min-height:142px;
  padding:1.3rem 1rem
}
.payment-result-card__details span {
  color:#d6ad50;
  margin-bottom:.7rem;
  font:700 1.05rem Georgia,serif;
  display:block
}
.payment-result-card__details p {
  color:#a8a9ae;
  margin:0;
  font-size:.82rem;
  line-height:1.5
}
.payment-result-card__note {
  color:#777981;
  margin:1.25rem 0 0;
  font-size:.78rem
}
.payment-result-card__actions {
  justify-content:center;
  gap:.8rem;
  margin-top:2rem;
  display:flex
}
.payment-result-card__actions a {
  text-align:center;
  min-width:190px;
  text-decoration:none
}
@media (max-width:640px) {
  .payment-result-page {
    min-height:520px;
    padding:2rem 1rem 3rem
  }
.payment-result-card {
    padding:2.2rem 1.15rem
  }
.payment-result-card__details {
    grid-template-columns:1fr
  }
.payment-result-card__details>div {
    min-height:auto
  }
.payment-result-card__actions {
    flex-direction:column
  }
.payment-result-card__actions a {
    width:100%
  }

}
.support-bell {
  color:#8d8f95;
  background:#111216;
  border:1px solid #ffffff1f;
  border-radius:4px;
  flex:0 0 34px;
  place-items:center;
  width:34px;
  height:34px;
  text-decoration:none;
  transition:all .2s;
  display:grid;
  position:relative
}
.support-bell svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.8px;
  width:18px;
  height:18px
}
.support-bell:hover {
  color:#efc45c;
  border-color:#8b651d
}
.support-bell--active {
  color:#ffd56b;
  background:#a96f0c38;
  border-color:#c79228;
  animation:1.8s infinite support-bell-pulse;
  box-shadow:0 0 18px #e2a63047
}
.support-bell span {
  color:#fff;
  background:#c52832;
  border-radius:20px;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 4px;
  font-size:9px;
  font-weight:900;
  display:grid;
  position:absolute;
  top:-8px;
  right:-7px
}
@keyframes support-bell-pulse {
  50% {
    box-shadow:0 0 26px #eeb2317a
  }

}
.support-form {
  gap:13px;
  margin-top:18px;
  display:grid
}
.support-form label {
  color:#b9bbc1;
  gap:6px;
  font-size:.78rem;
  font-weight:700;
  display:grid
}
.support-textarea {
  resize:vertical;
  min-height:120px
}
.support-result {
  border-radius:3px;
  padding:10px 12px;
  font-size:.82rem;
  margin:0!important
}
.support-result--error {
  background:#7f1d1d2e;
  border:1px solid #7f1d1d;
  color:#fca5a5!important
}
.support-result--ok {
  background:#14532d2e;
  border:1px solid #14532d;
  color:#86efac!important
}
.support-limit {
  background:#714f1526;
  border:1px solid #714f15;
  padding:13px;
  color:#eac36b!important;
  margin-top:16px!important
}
.support-created {
  background:linear-gradient(110deg,#6c490d38,#0c0c0ef5);
  border:1px solid #80601f;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  margin-top:18px;
  padding:18px;
  display:grid
}
.support-created>span {
  color:#f3c95f;
  border:1px solid #d6ad4c;
  border-radius:50%;
  place-items:center;
  width:42px;
  height:42px;
  font-size:1.5rem;
  display:grid
}
.support-created strong {
  color:#f3d88e
}
.support-created p {
  color:#a8a8ad;
  margin:.25rem 0 0;
  font-size:.82rem
}
.support-created .btn-primary {
  white-space:nowrap;
  text-decoration:none
}
@media (max-width:700px) {
  .support-created {
    grid-template-columns:auto 1fr
  }
.support-created .btn-primary {
    text-align:center;
    grid-column:1/-1
  }

}
.support-ticket-list {
  gap:10px;
  display:grid
}
.support-ticket-card {
  color:#ddd;
  background:linear-gradient(100deg,#1d1a16f2,#0c0c0ef2);
  border:1px solid #302d27;
  border-left:3px solid #665329;
  border-radius:4px;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:15px 18px;
  text-decoration:none;
  transition:all .2s;
  display:flex
}
.support-ticket-card:hover {
  border-color:#896b2e;
  transform:translateY(-1px)
}
.support-ticket-card--unread {
  border-left-color:#efb937;
  box-shadow:inset 5px 0 18px #da9c1f1a
}
.support-ticket-card>div {
  gap:4px;
  display:grid
}
.support-ticket-card span {
  color:#b08b42;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.67rem;
  font-weight:800
}
.support-ticket-card strong {
  color:#f2f2f2
}
.support-ticket-card small {
  color:#8f9198
}
.support-ticket-card em {
  color:#d8b55e;
  font-size:.72rem;
  font-style:normal;
  font-weight:800
}
.support-ticket-card b {
  color:#fff;
  background:#b62931;
  border-radius:20px;
  justify-self:end;
  padding:3px 7px;
  font-size:.65rem
}
.support-ticket-heading {
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:20px;
  display:flex
}
.support-ticket-heading span {
  color:#c59c44;
  text-transform:uppercase;
  font-size:.7rem;
  font-weight:900
}
.support-ticket-heading h2 {
  color:#f7f0df;
  font:700 1.45rem var(--font-platypi),Georgia,serif;
  margin:5px 0
}
.support-ticket-heading p {
  color:#91939a;
  margin:0
}
.support-ticket-heading em {
  color:#e4b84c;
  font-style:normal;
  font-weight:800
}
.support-thread {
  gap:12px;
  display:grid
}
.support-message {
  background:#151519;
  border:1px solid #302f31;
  border-radius:5px;
  max-width:82%;
  padding:14px 16px
}
.support-message--staff {
  background:linear-gradient(135deg,#65460f40,#151419);
  border-color:#67501d;
  justify-self:end
}
.support-message header {
  justify-content:space-between;
  gap:20px;
  margin-bottom:8px;
  display:flex
}
.support-message header strong {
  color:#e3bc61;
  font-size:.78rem
}
.support-message time {
  color:#777981;
  font-size:.67rem
}
.support-message p {
  white-space:pre-wrap;
  color:#d7d7da;
  margin:0;
  line-height:1.55
}
.support-agent-form {
  grid-template-columns:1fr 210px auto;
  gap:10px;
  margin-top:16px;
  display:grid
}
.support-agent-form .support-result {
  grid-column:1/-1
}
.support-agent {
  color:#c8b077;
  background:#111;
  border:1px solid #38342c;
  border-radius:3px;
  padding:6px 9px;
  font-size:.72rem
}
@media (max-width:700px) {
  .support-ticket-card,.support-ticket-heading {
    flex-direction:column;
    align-items:flex-start
  }
.support-message {
    max-width:94%
  }
.support-agent-form {
    grid-template-columns:1fr
  }
.support-bell {
    flex-basis:31px;
    width:31px;
    height:31px
  }

}
.panel-characters {
  border-color:#cda4414d;
  padding:0;
  overflow:hidden
}
.panel-characters .panel-card__header {
  background:linear-gradient(110deg,#2b1f0eb8,#0c0c0ef2 52%);
  border-bottom:1px solid #cda4413d;
  margin:0;
  padding:1.35rem 1.5rem 1.25rem;
  position:relative
}
.panel-characters__eyebrow {
  color:#d9b557;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:.4rem;
  font-size:.63rem;
  font-weight:800;
  display:block
}
.panel-characters__table-wrap {
  background:#07080ad1;
  overflow-x:auto
}
.panel-characters__table {
  border-collapse:collapse;
  table-layout:fixed;
  width:100%;
  min-width:650px
}
.panel-characters__table th {
  color:#170f04;
  letter-spacing:.09em;
  text-align:left;
  text-transform:uppercase;
  background:linear-gradient(#d5a640,#9b6718);
  border-right:1px solid #5c3c0b42;
  height:45px;
  padding:0 1.1rem;
  font-size:.68rem;
  font-weight:900
}
.panel-characters__table th:first-child {
  width:38%
}
.panel-characters__table th:nth-child(2) {
  width:35%
}
.panel-characters__table th:nth-child(3),.panel-characters__table th:nth-child(4) {
  text-align:center;
  width:13.5%
}
.panel-characters__table tbody tr {
  border-bottom:1px solid #ffffff0e;
  transition:background .15s
}
.panel-characters__table tbody tr:nth-child(2n) {
  background:#ffffff05
}
.panel-characters__table tbody tr:hover {
  background:linear-gradient(90deg,#c18e2321,#ffffff06)
}
.panel-characters__table td {
  color:#d5d6da;
  height:64px;
  padding:.45rem 1.1rem;
  font-size:.82rem
}
.panel-characters__table td:nth-child(3),.panel-characters__table td:nth-child(4) {
  text-align:center
}
.panel-characters__identity {
  color:#f5f0e5;
  align-items:center;
  gap:.85rem;
  text-decoration:none;
  display:flex
}
.panel-characters__identity:hover strong {
  color:#e0b954
}
.panel-characters__avatar {
  color:#d8b354;
  background:#090a0c;
  border:1px solid #dab14866;
  flex:0 0 46px;
  place-items:center;
  width:46px;
  height:46px;
  font-size:.62rem;
  font-weight:900;
  display:grid;
  overflow:hidden;
  box-shadow:0 4px 12px #0009
}
.panel-characters__avatar img {
  object-fit:cover;
  object-position:top center;
  width:100%;
  height:100%
}
.panel-characters__identity strong {
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.9rem;
  transition:color .15s;
  overflow:hidden
}
.panel-characters__character-copy {
  flex-direction:column;
  gap:.2rem;
  min-width:0;
  display:flex
}
.panel-characters__character-copy small {
  color:#8f929a;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.68rem;
  overflow:hidden
}
.panel-characters__guild {
  color:#e9dfc9;
  align-items:center;
  gap:.65rem;
  min-width:0;
  text-decoration:none;
  display:flex
}
.panel-characters__guild .mad-ranking__guild-mark {
  flex-basis:36px;
  width:36px;
  height:36px
}
.panel-characters__guild strong {
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.78rem;
  overflow:hidden
}
.panel-characters__guild:hover strong {
  color:#e0b954
}
.panel-characters__no-guild {
  color:#686b73;
  font-size:.74rem
}
.panel-characters__level,.panel-characters__pk {
  color:#e7c56e;
  background:#bf8a1e17;
  border:1px solid #d3a94340;
  border-radius:999px;
  place-items:center;
  min-width:46px;
  min-height:29px;
  padding:.3rem .65rem;
  font-size:.74rem;
  font-weight:800;
  display:inline-grid
}
.panel-characters__pk {
  color:#c5c6cb;
  background:#ffffff09;
  border-color:#ffffff17;
  min-width:34px
}
.panel-characters__empty {
  color:var(--muted)!important;
  text-align:center!important;
  padding:2.5rem 1rem!important
}
.webshop {
  color:#27282c;
  background:#f5f5f5;
  min-height:70vh
}
.webshop__subnav {
  background:#fff;
  border-bottom:1px solid #d3d3d3;
  box-shadow:0 2px 7px #0000001f
}
.webshop__subnav-inner {
  align-items:center;
  gap:34px;
  min-height:82px;
  display:flex
}
.webshop__subnav-inner>strong {
  color:#b88a29;
  font:900 1.2rem var(--font-platypi),Georgia,serif;
  white-space:nowrap
}
.webshop__subnav nav {
  align-self:stretch;
  align-items:center;
  gap:28px;
  display:flex
}
.webshop__subnav nav span {
  color:#3a3b3e;
  white-space:nowrap;
  font-weight:800;
  position:relative
}
.webshop__subnav nav .is-active:after {
  content:"";
  background:#d26b3e;
  height:3px;
  position:absolute;
  bottom:-31px;
  left:0;
  right:0
}
.webshop__subnav-inner>div {
  gap:18px;
  margin-left:auto;
  display:flex
}
.webshop__subnav a {
  color:#8b8b8e;
  font-size:.78rem;
  text-decoration:none
}
.webshop__body {
  padding-top:48px;
  padding-bottom:70px
}
.webshop__heading {
  border-bottom:1px solid #d2d2d2;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  padding-bottom:25px;
  display:flex
}
.webshop__heading small {
  color:#ae7c22;
  letter-spacing:.18em;
  font-weight:900
}
.webshop__heading h1 {
  font:800 clamp(2.3rem,4vw,3.4rem)/1 var(--font-platypi),Georgia,serif;
  margin:.25rem 0 0
}
.webshop__heading p {
  color:#777;
  margin:.7rem 0 0
}
.webshop__balance {
  color:#fff;
  background:#27282b;
  border-left:3px solid #bd8b2c;
  min-width:165px;
  padding:12px 18px
}
.webshop__balance span {
  color:#b9b9bb;
  text-transform:uppercase;
  font-size:.68rem;
  display:block
}
.webshop__balance strong {
  color:#efc662;
  font-size:1.3rem
}
.webshop__featured {
  border-bottom:1px solid #d2d2d2;
  padding:32px 0 42px
}
.webshop__featured h2,.webshop__products-head h2,.webshop__catalog aside h2 {
  font:700 1.45rem var(--font-platypi),Georgia,serif
}
.webshop__featured-grid {
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:18px;
  margin-top:22px;
  display:grid
}
.webshop__catalog {
  grid-template-columns:215px minmax(0,1fr);
  gap:42px;
  padding-top:38px;
  display:grid
}
.webshop__catalog aside {
  flex-direction:column;
  display:flex
}
.webshop__catalog aside h2 {
  border-bottom:2px solid #302f2d;
  padding-bottom:14px
}
.webshop__catalog aside button {
  color:#56575a;
  text-align:left;
  cursor:pointer;
  background:0 0;
  border:0;
  border-bottom:1px solid #ddd;
  justify-content:space-between;
  padding:12px 8px;
  display:flex
}
.webshop__catalog aside button.is-active,.webshop__catalog aside button:hover {
  color:#ca6339;
  font-weight:800
}
.webshop__catalog aside b {
  color:#999;
  font-size:.68rem
}
.webshop__products-head {
  border-bottom:1px solid #d2d2d2;
  justify-content:space-between;
  align-items:center;
  padding-bottom:13px;
  display:flex
}
.webshop__products-head span {
  color:#888;
  font-size:.75rem
}
.webshop__grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:46px 28px;
  padding-top:34px;
  padding-bottom:28px;
  display:grid
}
.webshop-card button {
  text-align:left;
  cursor:pointer;
  width:100%;
  color:inherit;
  background:0 0;
  border:0
}
.webshop-card__art {
  background:#fff;
  border:1px solid #d2d2d2;
  place-items:center;
  height:158px;
  display:grid;
  position:relative
}
.webshop-card__art .item-icon {
  object-fit:contain;
  width:82%;
  height:82%
}
.webshop-card__tag {
  z-index:2;
  color:#fff;
  background:#bd2f2f;
  margin:8px;
  padding:4px 7px;
  font-size:.58rem;
  font-weight:900;
  position:absolute
}
.webshop-card strong {
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:12px;
  font-size:.82rem;
  display:block;
  overflow:hidden
}
.webshop-card__price {
  color:#d45d35;
  margin-top:7px;
  font-weight:900;
  display:block
}
.webshop-card i {
  color:#fff;
  background:#d35f39;
  border-radius:3px;
  margin-top:9px;
  padding:7px 13px;
  font-size:.72rem;
  font-style:normal;
  display:inline-block
}
.webshop-modal {
  z-index:90;
  place-items:center;
  display:grid;
  position:fixed;
  inset:0
}
.webshop-modal__backdrop {
  background:#000000b8;
  border:0;
  position:absolute;
  inset:0
}
.webshop-modal__panel {
  z-index:1;
  background:#fff;
  grid-template-columns:280px 1fr;
  gap:30px;
  width:min(720px,100% - 28px);
  padding:28px;
  display:grid;
  position:relative;
  box-shadow:0 22px 80px #00000080
}
.webshop-modal__close {
  cursor:pointer;
  background:0 0;
  border:0;
  font-size:1.8rem;
  position:absolute;
  top:8px;
  right:12px
}
.webshop-modal__art {
  background:#f3f3f3;
  border:1px solid #ddd;
  place-items:center;
  min-height:280px;
  display:grid
}
.webshop-modal__art .item-icon {
  object-fit:contain;
  width:85%;
  height:85%
}
.webshop-modal__panel small {
  color:#b6872a;
  font-weight:900
}
.webshop-modal__panel h2 {
  font:800 1.8rem var(--font-platypi),Georgia,serif;
  margin:10px 0
}
.webshop-modal__price {
  color:#d45d35;
  margin:25px 0;
  font-size:1.25rem;
  display:block
}
.webshop-modal form button,.webshop-modal__login {
  color:#fff;
  text-align:center;
  cursor:pointer;
  background:#cf5d38;
  border:0;
  width:100%;
  padding:12px;
  font-weight:800;
  text-decoration:none;
  display:block
}
.webshop-modal__success {
  color:#198754!important
}
.webshop-modal__error {
  color:#c63030!important
}
@media (max-width:1000px) {
  .webshop__featured-grid,.webshop__grid {
    grid-template-columns:repeat(3,1fr)
  }
.webshop__subnav nav {
    display:none
  }

}
.webshop-modal__notice {
  font-weight:700;
  color:#d9ad48!important
}
.webshop-modal__description {
  margin:12px 0 14px;
  line-height:1.55
}
.webshop-modal__details {
  color:#c8c8cc;
  background:#0d0d0f;
  border:1px solid #353128;
  gap:7px;
  margin:0;
  padding:14px 16px 14px 34px;
  font-size:.9rem;
  line-height:1.35;
  display:grid
}
.webshop-modal__details li::marker {
  color:#d0a33e
}
.webshop-modal__options {
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:12px 0 0;
  font-size:.82rem;
  font-weight:800;
  color:#d9ad48!important
}
.webshop-modal__duration {
  background:#ffffff05;
  border:1px solid #3c3931;
  gap:7px;
  margin-top:16px;
  padding:12px;
  display:grid
}
.webshop-modal__duration legend {
  color:#b8a77d;
  letter-spacing:.11em;
  padding:0 7px;
  font-size:.67rem;
  font-weight:900
}
.webshop-modal__duration label {
  color:#ded8cc;
  cursor:pointer;
  border:1px solid #0000;
  grid-template-columns:18px 1fr auto;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:5px 9px;
  display:grid
}
.webshop-modal__duration label:has(input:checked) {
  background:#b5801f1f;
  border-color:#a87c26
}
.webshop-modal__duration input {
  accent-color:#d69f35
}
.webshop-modal__duration strong {
  font-size:.86rem
}
.webshop-modal__duration span {
  color:#efc45c;
  font-size:.84rem;
  font-weight:800
}
.webshop-modal__quantity {
  background:#ffffff05;
  border:1px solid #3c3931;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:6px 14px;
  margin-top:16px;
  padding:12px;
  display:grid
}
.webshop-modal__quantity label {
  color:#b8a77d;
  letter-spacing:.11em;
  font-size:.67rem;
  font-weight:900
}
.webshop-modal__quantity>div {
  grid-template-columns:38px 62px 38px;
  display:grid
}
.webshop-modal__quantity button,.webshop-modal__quantity input {
  color:#f0c353;
  text-align:center;
  background:#151516;
  border:1px solid #655225;
  height:38px;
  font-weight:900
}
.webshop-modal__quantity button {
  cursor:pointer;
  font-size:1.15rem
}
.webshop-modal__quantity button:disabled {
  cursor:default;
  opacity:.35
}
.webshop-modal__quantity input {
  color:#fff;
  appearance:textfield;
  border-left:0;
  border-right:0;
  font-size:.92rem
}
.webshop-modal__quantity input::-webkit-inner-spin-button {
  appearance:none;
  margin:0
}
.webshop-modal__quantity small {
  color:#8d8f95;
  grid-column:1/-1;
  font-size:.72rem
}
.webshop-modal__details+p:not([class]),.webshop-modal__options+p:not([class]) {
  display:none
}
@media (max-width:700px) {
  .webshop__subnav-inner>div {
    display:none
  }
.webshop__body {
    padding-top:28px
  }
.webshop__heading {
    flex-direction:column;
    align-items:flex-start
  }
.webshop__balance {
    width:100%
  }
.webshop__catalog {
    grid-template-columns:1fr
  }
.webshop__catalog aside {
    display:none
  }
.webshop__featured-grid,.webshop__grid {
    grid-template-columns:repeat(2,1fr)
  }
.webshop-modal__panel {
    grid-template-columns:1fr;
    max-height:90vh;
    overflow:auto
  }
.webshop-modal__art {
    min-height:190px
  }

}
.webshop {
  color:#e8e8ea;
  background:radial-gradient(circle at 50% 0,#96691917,#0000 34rem),linear-gradient(#0d0e10 0%,#07080a 100%)
}
.webshop__subnav {
  background:#090a0cfa;
  border-color:#c2973233;
  box-shadow:0 8px 24px #0000006b
}
.webshop__subnav nav span {
  color:#c7c8cc
}
.webshop__subnav nav .is-active {
  color:#e2b64d
}
.webshop__subnav nav .is-active:after {
  background:#b88a29
}
.webshop__subnav a {
  color:#85878d
}
.webshop__subnav a:hover {
  color:#dfb558
}
.webshop__heading,.webshop__featured,.webshop__products-head {
  border-color:#c2973238
}
.webshop__heading h1,.webshop__featured h2,.webshop__products-head h2,.webshop__catalog aside h2 {
  color:#fff1d0
}
.webshop__heading p,.webshop__products-head span {
  color:#92949b
}
.webshop__balance {
  background:linear-gradient(135deg,#24201a,#111216 68%);
  border-color:#c39732;
  box-shadow:inset 0 0 0 1px #d9ac451f,0 10px 24px #0000004d
}
.webshop__catalog aside h2 {
  border-color:#b88a29
}
.webshop__catalog aside button {
  color:#aaacb2;
  border-color:#ffffff13
}
.webshop__catalog aside button.is-active,.webshop__catalog aside button:hover {
  color:#e5b94f
}
.webshop__catalog aside b {
  color:#777a82
}
.webshop-card__art {
  background:radial-gradient(circle,#9a6d1b21,#0000 62%),#0b0c0f;
  border-color:#c2973242;
  box-shadow:inset 0 0 24px #000000b8
}
.webshop-card strong {
  color:#f0f0f2
}
.webshop-card__price {
  color:#e1b348
}
.webshop-card i,.webshop-modal form button,.webshop-modal__login {
  color:#fff5d5;
  background:linear-gradient(#b98a2d,#765112)
}
.webshop-card i {
  color:#fff;
  background:linear-gradient(#ff6a5f 0%,#e43e38 52%,#bd2428 100%);
  transition:transform .16s,filter .16s,box-shadow .16s;
  box-shadow:0 5px 13px #8414193d
}
.webshop-card:hover i {
  filter:brightness(1.1);
  transform:translateY(-1px);
  box-shadow:0 7px 17px #bf232757
}
.webshop-card:hover .webshop-card__art {
  border-color:#e7bc57cc;
  box-shadow:inset 0 0 24px #af7b171a,0 10px 28px #00000080
}
.webshop-modal__panel {
  color:#eeeef0;
  background:#111216;
  border:1px solid #d3a94361
}
.webshop-modal__close {
  color:#d9d9dd
}
.webshop-modal__art {
  background:radial-gradient(circle,#a4741b21,#0000 65%),#090a0d;
  border-color:#c2973247
}
.webshop-modal__panel p {
  color:#96989f
}
.webshop-modal__price {
  color:#e2b64d
}
.webshop-card__art .item-icon,.webshop-modal__art .item-icon {
  object-fit:contain;
  width:auto;
  height:auto
}
.webshop-card__art .item-icon {
  max-width:82%;
  max-height:82%
}
.webshop-modal__art .item-icon {
  max-width:85%;
  max-height:85%
}
.webshop-card__art .item-icon {
  width:64px;
  height:64px
}
.webshop-card--category-31 .webshop-card__art .item-icon,.webshop-card--category-34 .webshop-card__art .item-icon,.webshop-card--category-35 .webshop-card__art .item-icon {
  width:56px;
  height:56px
}
.webshop-card--category-32 .webshop-card__art .item-icon {
  width:90px;
  height:70px
}
.webshop-card--category-37 .webshop-card__art .item-icon {
  width:70px;
  height:70px
}
.webshop-product-image {
  object-fit:contain;
  image-rendering:auto;
  width:120px;
  height:120px;
  display:block
}
.webshop-modal__backdrop {
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  background:#000000db
}
.webshop-modal__panel {
  background:linear-gradient(145deg,#15151a,#090a0d 72%);
  border:1px solid #8b651d;
  border-radius:4px;
  grid-template-columns:255px minmax(0,1fr);
  gap:26px;
  width:min(750px,100% - 32px);
  padding:26px;
  box-shadow:0 28px 90px #000,inset 0 1px #ffe19114
}
.webshop-modal__close {
  color:#b7b8bd;
  transition:color .2s,transform .2s;
  top:12px;
  right:16px
}
.webshop-modal__close:hover {
  color:#f1c65f;
  transform:rotate(90deg)
}
.webshop-modal__art {
  background:radial-gradient(circle,#b582202b,#0000 48%),linear-gradient(#101114,#07080a);
  border:1px solid #55421b;
  min-height:315px;
  position:relative
}
.webshop-modal__art:before,.webshop-modal__art:after {
  content:"";
  border-color:#c49432;
  width:34px;
  height:34px;
  position:absolute
}
.webshop-modal__art:before {
  border-top:2px solid;
  border-left:2px solid;
  top:10px;
  left:10px
}
.webshop-modal__art:after {
  border-bottom:2px solid;
  border-right:2px solid;
  bottom:10px;
  right:10px
}
.webshop-modal__art span {
  color:#9e7b36;
  letter-spacing:.14em;
  font-size:.62rem;
  font-weight:900;
  position:absolute;
  bottom:17px
}
.webshop-modal__content {
  align-self:center
}
.webshop-modal__content>small {
  color:#d4a43d;
  letter-spacing:.08em
}
.webshop-modal__panel h2 {
  color:#fff3d5;
  margin:6px 30px 8px 0;
  font-size:clamp(1.45rem,3vw,1.8rem);
  line-height:1.15
}
.webshop-modal__description {
  color:#aeb0b6!important
}
.webshop-modal__details {
  background:#00000042;
  border-color:#38352d
}
.webshop-modal__total {
  border-top:1px solid #38352d;
  border-bottom:1px solid #38352d;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:18px 0;
  padding:14px 0;
  display:flex
}
.webshop-modal__total span {
  color:#8d8f95;
  letter-spacing:.12em;
  font-size:.69rem;
  font-weight:900
}
.webshop-modal__total strong {
  color:#f0c353;
  font-size:1.25rem
}
.webshop-modal__buy,.webshop-modal__confirmation button {
  color:#fff5d7;
  cursor:pointer;
  background:linear-gradient(#c59331,#76500f);
  border:1px solid #9a7121;
  border-radius:3px;
  min-height:48px;
  padding:11px 17px;
  font-weight:900
}
.webshop-modal__buy {
  width:100%
}
.webshop-modal__confirmation {
  background:#92630f1a;
  border:1px solid #73571f;
  padding:16px
}
.webshop-modal__confirmation>p {
  color:#d2d2d5;
  margin:0 0 14px;
  line-height:1.45
}
.webshop-modal__confirmation>p strong {
  color:#f1c65f;
  margin-bottom:4px;
  display:block
}
.webshop-modal__confirmation>div {
  grid-template-columns:.7fr 1.3fr;
  gap:10px;
  display:grid
}
.webshop-modal__confirmation form {
  margin:0
}
.webshop-modal__confirmation button {
  color:#c8c9cd;
  background:#202126;
  border-color:#3d3e43;
  width:100%
}
.webshop-modal__confirmation button.is-confirm {
  color:#fff6d8;
  background:linear-gradient(#bd8c2c,#704b0e);
  border-color:#a77a22
}
.webshop-modal__confirmation button:disabled {
  cursor:wait;
  opacity:.65
}
.webshop-modal__receipt {
  z-index:8;
  text-align:center;
  background:radial-gradient(circle at 50% 35%,#7e5b182e,#0000 38%),#0d0e11;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:26px 34px;
  display:flex;
  position:absolute;
  inset:0
}
.webshop-modal__receipt-icon {
  color:#f1c65f;
  border:2px solid #d1a43f;
  border-radius:50%;
  place-items:center;
  width:58px;
  height:58px;
  margin-bottom:12px;
  font-size:31px;
  display:grid;
  box-shadow:0 0 28px #d1a43f2e
}
.webshop-modal__receipt small {
  color:#d8a83e;
  letter-spacing:.16em;
  font-weight:900
}
.webshop-modal__receipt h2 {
  color:#f6ead0;
  margin:7px 0 10px;
  font:700 1.65rem Georgia,serif
}
.webshop-modal__receipt p {
  color:#c9c8c5;
  max-width:480px;
  margin:0;
  line-height:1.42
}
.webshop-modal__receipt p strong {
  color:#f0c75e
}
.webshop-modal__receipt-warning {
  font-size:.78rem;
  color:#85868b!important;
  margin-top:8px!important
}
.webshop-modal__receipt>div {
  gap:9px;
  margin-top:17px;
  display:flex
}
.webshop-modal__panel.is-receipt {
  width:min(600px,100% - 32px);
  min-height:360px;
  padding:0;
  display:block
}
.webshop-modal__panel.is-receipt>.webshop-modal__art,.webshop-modal__panel.is-receipt>.webshop-modal__content {
  display:none
}
@media (max-width:640px) {
  .webshop-modal__receipt {
    padding:24px
  }
.webshop-modal__receipt>div {
    flex-direction:column;
    width:100%
  }
.webshop-modal__receipt h2 {
    font-size:1.6rem
  }

}
.webshop-modal__buy:disabled {
  cursor:wait;
  opacity:.65
}
@media (max-width:700px) {
  .webshop-modal__panel {
    grid-template-columns:1fr;
    gap:18px;
    padding:22px
  }
.webshop-modal__art {
    min-height:210px
  }
.webshop-modal__art span {
    bottom:12px
  }
.webshop-modal__confirmation>div {
    grid-template-columns:1fr
  }

}
.webshop-modal {
  padding:58px 12px 12px
}
.webshop-modal__panel {
  overscroll-behavior:contain;
  grid-template-columns:205px minmax(0,1fr);
  gap:18px;
  width:min(680px,100% - 24px);
  max-height:calc(100dvh - 76px);
  padding:18px;
  overflow-y:auto
}
.webshop-modal__art {
  min-height:260px
}
.webshop-modal__art .webshop-product-image {
  width:145px;
  height:145px
}
.webshop-modal__art span {
  font-size:.56rem;
  bottom:12px
}
.webshop-modal__content>small {
  font-size:.7rem
}
.webshop-modal__panel h2 {
  margin:4px 28px 6px 0;
  font-size:clamp(1.25rem,2.5vw,1.55rem)
}
.webshop-modal__description {
  margin:7px 0 10px;
  font-size:.88rem;
  line-height:1.4
}
.webshop-modal__details {
  gap:4px;
  padding:10px 12px 10px 28px;
  font-size:.78rem;
  line-height:1.25
}
.webshop-modal__duration {
  gap:3px;
  margin-top:11px;
  padding:8px
}
.webshop-modal__duration label {
  min-height:31px;
  padding:3px 7px
}
.webshop-modal__duration strong,.webshop-modal__duration span {
  font-size:.76rem
}
.webshop-modal__total {
  margin:11px 0;
  padding:9px 0
}
.webshop-modal__total strong {
  font-size:1.08rem
}
.webshop-modal__confirmation {
  padding:11px
}
.webshop-modal__confirmation>p {
  margin-bottom:9px;
  font-size:.82rem;
  line-height:1.35
}
.webshop-modal__confirmation button,.webshop-modal__buy {
  min-height:40px;
  padding:8px 12px;
  font-size:.82rem
}
@media (max-width:700px) {
  .webshop-modal {
    padding-top:12px
  }
.webshop-modal__panel {
    grid-template-columns:1fr;
    max-height:calc(100dvh - 24px);
    padding:16px
  }
.webshop-modal__art {
    min-height:155px
  }
.webshop-modal__art .webshop-product-image {
    width:110px;
    height:110px
  }

}
.webshop__category-tabs {
  background:linear-gradient(#151411f0,#08090bf7),radial-gradient(circle at 50% 0,#c4932e1a,#0000 55%);
  border:1px solid #c2973233;
  border-radius:4px;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;
  margin-top:30px;
  padding:10px;
  display:grid;
  box-shadow:inset 0 1px #ffffff06,0 14px 32px #0000003d
}
.webshop__category-tabs button {
  color:#c9cbd0;
  text-align:left;
  cursor:pointer;
  background:linear-gradient(135deg,#1e1f22d1,#0d0e11e0);
  border:1px solid #ffffff13;
  border-radius:3px;
  justify-content:space-between;
  align-items:center;
  min-width:0;
  min-height:50px;
  padding:12px 13px 12px 15px;
  font-size:.82rem;
  font-weight:700;
  transition:border-color .18s,color .18s,background .18s,transform .18s,box-shadow .18s;
  display:flex;
  position:relative;
  overflow:hidden
}
.webshop__category-tabs button:before {
  content:"";
  opacity:0;
  background:linear-gradient(#0000,#d4aa4e,#0000);
  width:3px;
  transition:opacity .18s;
  position:absolute;
  inset:0 auto 0 0
}
.webshop__category-tabs button:hover {
  color:#f0d18a;
  background:linear-gradient(135deg,#302a1de6,#111112f0);
  border-color:#cfa6496b;
  transform:translateY(-1px)
}
.webshop__category-tabs button.is-active {
  color:#fff0bb;
  background:linear-gradient(135deg,#704d12d1,#2e1f08e0),radial-gradient(circle at 15%,#ffdc8229,#0000 55%);
  border-color:#dcb14bb8;
  box-shadow:inset 0 1px #ffebb31f,0 5px 16px #00000038
}
.webshop__category-tabs button.is-active:before {
  opacity:1
}
.webshop__category-tabs b {
  color:#858992;
  background:#00000047;
  border:1px solid #ffffff17;
  border-radius:11px;
  place-items:center;
  min-width:25px;
  height:21px;
  margin-left:10px;
  padding:0 6px;
  font-size:.61rem;
  display:grid
}
.webshop__category-tabs button.is-active b {
  color:#ffe19a;
  background:#0000003d;
  border-color:#ffde8b40
}
.webshop__catalog {
  display:block
}
.webshop__products {
  width:100%
}
.webshop-card--category-0 .webshop-card__art .item-icon,.webshop-card--category-15 .webshop-card__art .item-icon,.webshop-card--category-16 .webshop-card__art .item-icon {
  width:58px;
  height:58px
}
@media (max-width:700px) {
  .webshop__category-tabs {
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-left:-4px;
    margin-right:-4px;
    padding:7px
  }
.webshop__category-tabs button {
    min-height:46px;
    padding:10px 11px;
    font-size:.76rem
  }

}
.char-summary-grid {
  gap:1rem;
  display:grid
}
@media (min-width:640px) {
  .char-summary-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}
.char-profile__main .char-summary-grid {
  grid-template-columns:minmax(0,1fr);
  gap:.5rem
}
.char-profile__main .char-summary-card {
  min-height:65px!important;
  padding:.55rem 1rem!important
}
.char-profile__main .char-summary-card__label {
  margin-bottom:.3rem;
  font-size:.65rem
}
.char-profile__main .char-summary-card__value {
  margin-top:0;
  font-size:1.08rem;
  line-height:1.15
}
.char-guild-strip {
  color:#fff;
  background:linear-gradient(90deg,#0b0a09f5,#19130ad1),url(../image/section-castle.jpg) 50% 44%/cover;
  border:1px solid #d3a94857;
  align-items:center;
  gap:1rem;
  min-height:138px;
  padding:.85rem 1rem;
  text-decoration:none;
  transition:border-color .16s,transform .16s,box-shadow .16s;
  display:flex;
  position:relative;
  overflow:hidden;
  box-shadow:inset 3px 0 #b8892e,0 10px 28px #00000047
}
.char-profile__tools {
  align-content:start;
  gap:.75rem;
  display:grid
}
.char-guild-strip:after {
  content:"";
  pointer-events:none;
  background:linear-gradient(110deg,#e1b24717,#0000 48%);
  position:absolute;
  inset:0
}
.char-guild-strip:hover {
  border-color:#ebbe55ad;
  transform:translateY(-1px);
  box-shadow:inset 3px 0 #d7ab4a,0 13px 32px #00000061
}
.char-guild-strip>* {
  z-index:1;
  position:relative
}
.char-guild-strip__emblem {
  flex:0 0 68px;
  place-items:center;
  display:grid
}
.char-guild-strip__emblem .mad-ranking__guild-mark {
  border-color:#e8be5894;
  flex-basis:62px;
  width:62px;
  height:62px;
  padding:3px;
  box-shadow:0 7px 18px #000000b8,0 0 16px #ca9c321f
}
.char-guild-strip__copy {
  flex-direction:column;
  flex:1;
  min-width:0;
  display:flex
}
.char-guild-strip__copy small {
  color:#cda650;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:.15rem;
  font-size:.62rem;
  font-weight:800
}
.char-guild-strip__copy strong {
  color:#fff5db;
  font:700 1.25rem/1.15 var(--font-platypi), Georgia, serif;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden
}
.char-guild-strip__copy>span {
  color:#92939a;
  margin-top:.3rem;
  font-size:.7rem
}
.char-guild-strip__arrow {
  color:#d9ad4b;
  font:300 2rem/1 Arial,sans-serif
}
@media (max-width:1023px) {
  .char-guild-strip {
    min-height:92px
  }

}
@media (min-width:1024px) {
  .char-profile__main {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
    gap:.75rem;
    display:grid
  }
.char-profile__search {
    justify-content:stretch;
    padding-top:0
  }
.char-profile__search .char-search--profile {
    width:100%;
    max-width:none
  }

}
.char-summary-card {
  background:#08090ed1;
  border:1px solid #ffffff0f;
  min-height:112px;
  padding:1.1rem 1.4rem
}
.char-summary-card__label {
  color:#f4f4f5;
  margin-bottom:.75rem;
  font-size:.85rem;
  display:block
}
.char-summary-card__value {
  overflow-wrap:anywhere;
  color:#fff;
  font-size:clamp(1.15rem,2vw,1.45rem);
  font-weight:500;
  display:block
}
.char-public-equipment {
  grid-column:1/-1;
  margin-top:1.5rem;
  overflow:visible
}
.char-public-equipment__title {
  font-family:var(--font-platypi), Georgia, serif;
  color:#fff;
  font-size:1.35rem;
  font-weight:700
}
.char-public-equipment__body {
  color:var(--muted);
  margin-top:.35rem;
  font-size:.85rem
}
.char-public-equipment__doll {
  background:radial-gradient(circle at 50% 48%,#9e70222e,#0000 38%),linear-gradient(#0e0f14f5,#040508f5);
  border-top:1px solid #c9a86042;
  margin-top:1.25rem;
  padding:clamp(1.5rem,4vw,3rem)
}
.char-public-equipment__stage {
  background:radial-gradient(circle at 30%,#90621e21,#0000 36%),linear-gradient(#ffffff06,#fff0),#020306b3;
  border:1px solid #c9a86033;
  border-radius:.75rem;
  grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);
  align-items:stretch;
  gap:clamp(1rem,2.5vw,2rem);
  width:100%;
  min-height:760px;
  margin-inline:auto;
  padding:clamp(.7rem,1.5vw,1.1rem);
  display:grid;
  position:relative;
  overflow:visible;
  box-shadow:inset 0 0 80px #000000d9,0 24px 55px #00000052
}
.char-public-equipment__portrait {
  background:#030407;
  border-radius:.55rem;
  min-height:730px;
  position:relative;
  overflow:hidden
}
.char-public-equipment__portrait:after {
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 55px 18px #000000b8
}
.char-public-equipment__portrait img {
  object-fit:cover;
  object-position:center;
  width:100%;
  height:100%
}
.char-public-equipment__portrait-fallback {
  color:#daad4db3;
  place-items:center;
  min-height:730px;
  font-size:4rem;
  display:grid
}
.char-public-equipment__items {
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-content:center;
  gap:.75rem;
  display:grid
}
.char-public-equipment__items>* {
  order:3;
  grid-column:span 2
}
.char-public-equipment__items>.inv-item-tip {
  width:auto;
  min-width:0;
  height:auto;
  position:relative;
  inset:auto
}
.char-public-equipment__item-card {
  background:radial-gradient(circle,#6b491133,#06070bf0 68%);
  border:1px solid #d6a9486b;
  border-radius:.5rem;
  grid-template-rows:auto 1fr;
  place-items:center;
  min-height:112px;
  padding:.45rem;
  transition:border-color .16s,transform .16s,box-shadow .16s;
  display:grid;
  position:relative;
  overflow:hidden
}
.char-public-equipment__item-card:hover {
  border-color:#edc262e0;
  transform:translateY(-2px);
  box-shadow:0 8px 22px #0000006b
}
.char-public-equipment__item-slot {
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#c9a860;
  justify-self:start;
  font-size:.62rem
}
.char-public-equipment__item-icon {
  place-items:center;
  width:76px;
  height:76px;
  display:grid
}
.char-public-equipment__item-icon .item-icon {
  object-fit:contain;
  filter:drop-shadow(0 5px 7px #000000d1);
  width:88%;
  max-width:100%;
  height:88%;
  max-height:100%
}
:is(.char-public-equipment__items>.inv-item-tip:has(.char-public-equipment__item-card--slot-0),.char-public-equipment__items>.inv-item-tip:has(.char-public-equipment__item-card--slot-1),.char-public-equipment__item-card--empty.char-public-equipment__item-card--slot-0,.char-public-equipment__item-card--empty.char-public-equipment__item-card--slot-1) {
  order:1;
  grid-column:span 3
}
:is(.char-public-equipment__items>.inv-item-tip:has(.char-public-equipment__item-card--slot-7),.char-public-equipment__item-card--empty.char-public-equipment__item-card--slot-7) {
  order:2;
  grid-column:1/-1
}
.char-public-equipment__item-card--slot-0,.char-public-equipment__item-card--slot-1 {
  min-height:238px
}
.char-public-equipment__item-card--slot-7 {
  min-height:250px
}
.char-public-equipment__item-card--slot-0 .char-public-equipment__item-icon,.char-public-equipment__item-card--slot-1 .char-public-equipment__item-icon {
  width:246px;
  height:291px
}
.char-public-equipment__item-card--slot-7 .char-public-equipment__item-icon {
  width:100%;
  height:190px
}
.char-public-equipment__item-card--slot-0 .item-icon,.char-public-equipment__item-card--slot-1 .item-icon {
  object-fit:contain!important;
  object-position:center center!important;
  width:203px!important;
  max-width:203px!important;
  height:240px!important;
  max-height:240px!important
}
.char-public-equipment__item-card--slot-7 .item-icon {
  object-fit:contain!important;
  object-position:center center!important;
  width:94%!important;
  max-width:94%!important;
  height:175px!important;
  max-height:175px!important
}
.char-public-equipment__item-card--empty {
  opacity:.55;
  background:#06070ab8;
  border-style:dashed
}
.char-public-equipment__item-card--system {
  cursor:pointer;
  background:radial-gradient(circle,#5b368024,#06070ad1 68%);
  border-color:#9670be6b
}
.char-public-equipment__item-card--system:hover {
  opacity:1;
  border-color:#c9a860cc
}
.char-public-equipment__system-mark {
  color:#e4c989;
  border:1px solid #c9a8606b;
  align-self:center;
  place-items:center;
  width:2.6rem;
  height:2.6rem;
  font:700 1rem Georgia,serif;
  display:grid;
  transform:rotate(45deg)
}
.char-public-equipment__system-mark:first-letter {
  transform:rotate(-45deg)
}
.char-public-equipment__system-open {
  color:#c9a860;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.62rem
}
.char-system-modal {
  z-index:1200;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  background:#00000038;
  place-items:center;
  padding:1rem;
  display:grid;
  position:fixed;
  inset:0
}
.char-system-modal__panel {
  background:#090909;
  border:3px ridge #4b382a;
  border-radius:0;
  width:min(398px,96vw);
  max-height:90vh;
  padding:4px;
  animation:.14s ease-out char-game-window-open;
  overflow:hidden;
  box-shadow:0 30px 90px #000,inset 0 0 0 2px #160d08,inset 0 0 28px #000
}
@keyframes char-game-window-open {
  0% {
    opacity:0;
    transform:scale(.96)
  }
to {
    opacity:1;
    transform:scale(1)
  }

}
.char-system-modal__panel--artifact {
  width:min(302px,96vw)
}
.char-system-modal__header {
  background:linear-gradient(#721713 0%,#350807 50%,#120403 100%);
  border:2px ridge #4c281b;
  border-radius:16px 16px 9px 9px;
  justify-content:center;
  align-items:center;
  min-height:34px;
  padding:.3rem 2.5rem;
  display:flex;
  position:relative;
  box-shadow:inset 0 0 8px #d44b2b80
}
.char-system-modal__panel--artifact .char-system-modal__header {
  background:linear-gradient(#080808,#020202);
  border-color:#322d27;
  border-radius:12px;
  box-shadow:inset 0 0 7px #000
}
.char-system-modal__header button {
  color:#d9b79a;
  background:#180605;
  border:1px solid #68251c;
  border-radius:4px;
  width:25px;
  height:25px;
  font-size:18px;
  line-height:20px;
  position:absolute;
  top:4px;
  right:6px
}
.char-ability-book {
  scrollbar-color:#c04d32 #160807;
  scrollbar-width:thin;
  background:radial-gradient(circle at 50% 15%,#26100d 0,#090404 38%,#030303 72%);
  border:2px ridge #39271d;
  height:min(500px,90vh - 48px);
  padding:8px 7px 12px;
  overflow-y:auto
}
.char-ability-book::-webkit-scrollbar {
  width:9px
}
.char-ability-book::-webkit-scrollbar-track {
  background:#160807;
  border-left:1px solid #5a2017
}
.char-ability-book::-webkit-scrollbar-thumb {
  background:linear-gradient(90deg,#7d1b12,#db6742,#70150f);
  border:1px solid #f07b51
}
.char-ability-group {
  margin:5px 0 10px
}
.char-ability-group h3 {
  color:#ffe1d6;
  text-shadow:1px 1px #000;
  background:linear-gradient(100deg,#7c1d16 0,#3e0a08 55%,#160403 100%);
  border:1px solid #7f251c;
  border-radius:11px 22px 0 0;
  min-height:27px;
  padding:5px 13px;
  font:700 12px Arial,sans-serif
}
.char-ability-group--blue h3 {
  color:#d9e9ff;
  background:linear-gradient(100deg,#173b79,#0b1e42 60%,#050a17);
  border-color:#244e91
}
.char-ability-group__list {
  gap:3px;
  padding:5px 7px 0;
  display:grid
}
.char-ability-card {
  color:#eee;
  background:linear-gradient(90deg,#3e0c09,#250706 70%,#150302);
  border:1px solid #47110e;
  border-radius:3px 15px 15px 3px;
  grid-template-columns:24px 47px minmax(0,1fr) 20px;
  align-items:center;
  gap:4px;
  min-height:27px;
  padding:2px 8px 2px 3px;
  font:11px Arial,sans-serif;
  display:grid;
  box-shadow:inset 0 1px #7b241b66
}
.char-ability-group--blue .char-ability-card {
  background:linear-gradient(90deg,#102f65,#0b1c3c 70%,#050b18);
  border-color:#17386c;
  box-shadow:inset 0 1px #376bb166
}
.char-ability-card__icon {
  place-items:center;
  width:22px;
  height:22px;
  display:grid;
  position:relative;
  overflow:hidden
}
.char-ability-card__icon img {
  object-fit:fill;
  filter:drop-shadow(0 0 3px #e33);
  width:22px;
  height:29px
}
.char-ability-card strong {
  color:#ffe500;
  font-size:12px
}
.char-ability-card em {
  color:#ffe500;
  text-align:right;
  font-style:normal
}
.char-artifact-view {
  background:radial-gradient(circle at 50% 48%,#0000 0 26%,#211b1866 27% 29%,#0000 30% 38%,#31282277 39% 40%,#0000 41%),radial-gradient(circle at 50% 48%,#161311 0 53%,#070706 54% 68%,#020202 75%);
  border:2px ridge #40372e;
  height:294px;
  position:relative;
  overflow:hidden
}
.char-artifact-view:before {
  content:"";
  background:repeating-conic-gradient(from 0deg at 50% 48%,transparent 0 14deg,#332a251f 15deg 16deg);
  border:2px solid #302821;
  border-radius:4px;
  position:absolute;
  inset:10px;
  box-shadow:inset 0 0 28px #000,0 0 0 2px #0a0908
}
.char-artifact-view:after {
  content:"";
  background:#030303;
  border-radius:0 0 18px 18px;
  height:27px;
  position:absolute;
  top:13px;
  left:58px;
  right:58px;
  box-shadow:0 2px #29231f
}
.char-artifact-board {
  z-index:2;
  height:246px;
  position:relative
}
.char-artifact-hex {
  clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);
  filter:drop-shadow(0 0 1px #6d5d57);
  background:#070707;
  width:30px;
  height:34px;
  position:absolute
}
.char-artifact-hex:after {
  content:"";
  clip-path:inherit;
  background:#020202;
  position:absolute;
  inset:4px
}
.char-artifact-pager {
  z-index:4;
  text-align:center;
  background:#020202;
  border:2px ridge #3b3027;
  border-radius:12px;
  grid-template-columns:25px 82px 25px;
  align-items:center;
  height:24px;
  display:grid;
  position:absolute;
  bottom:5px;
  left:50%;
  transform:translate(-50%)
}
.char-artifact-pager button {
  color:#9c9388;
  background:linear-gradient(#4e4941,#151310);
  border:0;
  height:19px;
  font-size:10px
}
.char-artifact-pager strong {
  color:#ffe500;
  font:700 11px Arial,sans-serif
}
@media (max-width:680px) {
  .char-ability-card {
    grid-template-columns:22px 42px minmax(0,1fr) 16px;
    font-size:10px
  }

}
.char-system-modal {
  background:#00000014;
  padding:0
}
.char-system-modal__panel {
  border:0;
  border-radius:0;
  max-height:none;
  padding:0;
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 28px #000c
}
.char-system-modal__panel--ability {
  background:url(../image/background-v2.png) 0 0/400px 548px no-repeat;
  width:400px;
  height:548px
}
.char-system-modal__panel--artifact {
  background:url(../image/background.png) 0 0/303px 347px no-repeat;
  width:303px;
  height:347px
}
.char-system-modal__header {
  z-index:5;
  height:48px;
  min-height:0;
  box-shadow:none;
  pointer-events:none;
  background:0 0;
  border:0;
  border-radius:0;
  padding:10px 38px 0;
  position:absolute;
  top:0;
  left:0;
  right:0
}
.char-system-modal__panel--artifact .char-system-modal__header {
  height:42px;
  box-shadow:none;
  background:0 0;
  border:0;
  border-radius:0;
  padding-top:13px
}
.char-system-modal__header h2 {
  color:#ffe600;
  text-shadow:1px 1px #000;
  font:700 12px Arial Narrow,Arial,sans-serif
}
.char-system-modal__panel--artifact .char-system-modal__header h2 {
  font-size:14px;
  font-weight:500
}
.char-system-modal__header button {
  opacity:0;
  pointer-events:auto;
  width:25px;
  height:25px;
  position:absolute;
  top:7px;
  right:8px
}
.char-ability-book {
  scrollbar-color:#b94d2e #160807;
  scrollbar-width:thin;
  background:url(../image/intro-bg-v2.png) -7px -49px/400px 548px no-repeat;
  border:0;
  width:386px;
  height:491px;
  padding:8px 0 12px;
  position:absolute;
  top:49px;
  left:7px;
  overflow:hidden auto
}
.char-ability-group {
  width:100%;
  margin:0 0 2px
}
.char-ability-group h3 {
  color:#fff;
  text-shadow:1px 1px #000;
  background:url(../image/titlev2-red.png) 0 10px/367px 25px no-repeat;
  border:0;
  border-radius:0;
  align-items:center;
  width:367px;
  height:40px;
  min-height:40px;
  margin-left:9px;
  padding:10px 0 0 14px;
  font:700 12px Arial Narrow,Arial,sans-serif;
  display:flex
}
.char-ability-group--blue h3 {
  color:#fff;
  background-image:url(../image/titlev2-blue.png);
  border:0
}
.char-ability-group--green h3 {
  color:#fff;
  background-image:url(../image/titlev2-green.png);
  border:0
}
.char-ability-group--purple h3 {
  color:#fff;
  background-image:url(../image/titlev2-purple.png);
  border:0
}
.char-ability-group__list {
  padding:0;
  display:block
}
.char-ability-card {
  color:#ccc;
  width:350px;
  height:26px;
  min-height:26px;
  box-shadow:none;
  background:url(../image/linev2-red.png) 0 0/350px 26px no-repeat;
  border:0;
  border-radius:0;
  grid-template-columns:38px 40px minmax(0,1fr) 22px;
  align-items:center;
  gap:0;
  margin-left:13px;
  padding:0;
  font:11px Arial Narrow,Arial,sans-serif;
  display:grid
}
.char-ability-card--extra {
  grid-template-columns:38px minmax(0,1fr)
}
.char-ability-group--blue .char-ability-card {
  box-shadow:none;
  background:url(../image/linev2-blue.png) 0 0/350px 26px no-repeat;
  border:0
}
.char-ability-group--green .char-ability-card {
  box-shadow:none;
  background:url(../image/linev2-green.png) 0 0/350px 26px no-repeat;
  border:0
}
.char-ability-group--purple .char-ability-card {
  box-shadow:none;
  background:url(../image/linev2-purple.png) 0 0/350px 26px no-repeat;
  border:0
}
.char-ability-card__icon {
  justify-content:center;
  width:38px;
  height:26px;
  display:flex;
  overflow:visible
}
.char-ability-card__icon img {
  object-fit:contain;
  filter:none;
  width:auto;
  max-width:30px;
  height:30px;
  margin-top:-2px
}
.char-ability-group--blue .char-ability-card__icon img {
  filter:none
}
.char-ability-card strong {
  color:gold;
  text-shadow:0 0 5px gold;
  font-size:11px
}
.char-ability-card em {
  color:gold;
  text-align:center;
  font-size:11px
}
.char-ability-card--locked {
  opacity:.42;
  filter:grayscale(.75)
}
.char-ability-card--active {
  opacity:1;
  filter:none
}
.char-ability-card--active strong,.char-ability-card--active em {
  color:#fff000;
  text-shadow:0 0 6px #ffb300
}
.char-artifact-view {
  background:0 0;
  border:0;
  width:303px;
  height:347px;
  position:absolute;
  inset:0
}
.char-artifact-view:before,.char-artifact-view:after {
  display:none
}
.char-system-modal__panel--artifact:has(.char-artifact-view--complete) {
  background-image:url(../image/background-active.png)
}
.char-artifact-board {
  width:303px;
  height:320px;
  position:relative;
  overflow:hidden
}
.char-artifact-item {
  z-index:3;
  line-height:0;
  display:block;
  position:absolute
}
.char-artifact-item img {
  pointer-events:none;
  width:auto;
  max-width:none;
  height:auto;
  display:block
}
.char-artifact-tooltip {
  z-index:10000;
  color:#f2f2f2;
  text-align:center;
  width:210px;
  max-width:calc(100vw - 16px);
  box-shadow:none;
  pointer-events:none;
  background:#000000e6;
  border:1px solid #5f5f5f8c;
  padding:7px 8px 8px;
  font:12px/1.15 Arial,sans-serif;
  position:fixed
}
.char-artifact-tooltip strong,.char-artifact-tooltip span {
  display:block
}
.char-artifact-tooltip strong {
  color:#18f4e5;
  font-weight:400
}
.char-artifact-tooltip__bonus {
  color:#62a9ff
}
.char-artifact-tooltip__requirement {
  color:#f2f2f2;
  margin-top:14px
}
@media (max-width:420px),(max-height:590px) {
  .char-system-modal__panel--ability {
    transform:scale(.88)
  }

}
@media (max-width:340px),(max-height:390px) {
  .char-system-modal__panel--artifact {
    transform:scale(.9)
  }

}
.char-public-equipment__empty-mark {
  background:#c9a86006;
  border:1px solid #c9a86038;
  align-self:center;
  width:2.25rem;
  height:2.25rem;
  transform:rotate(45deg)
}
.char-public-equipment__item-level {
  color:#f4d47d;
  font-size:.72rem;
  position:absolute;
  top:.35rem;
  right:.4rem
}
@media (max-width:680px) {
  .char-public-equipment__doll {
    padding:1rem
  }
.char-public-equipment__stage {
    grid-template-columns:1fr;
    min-height:0
  }
.char-public-equipment__portrait {
    min-height:380px
  }
.char-public-equipment__items {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
.char-public-equipment__items>* {
    order:3;
    grid-column:auto
  }
:is(.char-public-equipment__items>.inv-item-tip:has(.char-public-equipment__item-card--slot-0),.char-public-equipment__items>.inv-item-tip:has(.char-public-equipment__item-card--slot-1),.char-public-equipment__items>.inv-item-tip:has(.char-public-equipment__item-card--slot-7),.char-public-equipment__item-card--empty.char-public-equipment__item-card--slot-0,.char-public-equipment__item-card--empty.char-public-equipment__item-card--slot-1,.char-public-equipment__item-card--empty.char-public-equipment__item-card--slot-7) {
    grid-column:auto
  }
.char-public-equipment__item-card--slot-0,.char-public-equipment__item-card--slot-1,.char-public-equipment__item-card--slot-7 {
    min-height:138px
  }

}
@media (min-width:681px) and (max-width:1023px) {
  .char-public-equipment__stage {
    grid-template-columns:minmax(0,1fr) minmax(390px,1fr)
  }
.char-public-equipment__items {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
.char-public-equipment__items>* {
    order:3;
    grid-column:auto
  }
:is(.char-public-equipment__items>.inv-item-tip:has(.char-public-equipment__item-card--slot-0),.char-public-equipment__items>.inv-item-tip:has(.char-public-equipment__item-card--slot-1),.char-public-equipment__items>.inv-item-tip:has(.char-public-equipment__item-card--slot-7),.char-public-equipment__item-card--empty.char-public-equipment__item-card--slot-0,.char-public-equipment__item-card--empty.char-public-equipment__item-card--slot-1,.char-public-equipment__item-card--empty.char-public-equipment__item-card--slot-7) {
    grid-column:auto
  }

}
.site-footer__grid {
  grid-template-columns:minmax(250px,1.55fr) repeat(4,minmax(130px,1fr));
  gap:clamp(2rem,4vw,5rem);
  padding-block:clamp(3rem,6vw,5rem);
  display:grid
}
.site-footer__brand {
  max-width:360px
}
.site-footer__logo {
  margin-bottom:1.15rem
}
.site-footer__brand>p {
  max-width:34ch;
  font-size:.9rem;
  line-height:1.75
}
.site-footer__socials {
  gap:.65rem;
  margin-top:1.25rem;
  display:flex
}
.site-footer__socials a {
  color:#b9bdc6;
  background:#ffffff09;
  border:1px solid #ffffff17;
  border-radius:.35rem;
  place-items:center;
  width:2.25rem;
  height:2.25rem;
  transition:border-color .16s,color .16s,transform .16s;
  display:grid
}
.site-footer__socials a:hover {
  color:#f25a5e;
  border-color:#d62d32a6;
  transform:translateY(-2px)
}
.site-footer__socials svg {
  fill:currentColor;
  width:1.15rem;
  height:1.15rem
}
.site-footer__column {
  flex-direction:column;
  align-items:flex-start;
  gap:.62rem;
  font-size:.88rem;
  display:flex
}
.site-footer__column h2 {
  color:#f7f7f8;
  font-family:var(--font-display,inherit);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:.55rem;
  font-size:.82rem;
  font-weight:800
}
.site-footer__column a {
  color:#a8acb5;
  transition:color .15s,transform .15s
}
.site-footer__column a:hover {
  color:#f25a5e;
  transform:translate(3px)
}
.site-footer__badges {
  gap:.65rem;
  margin-bottom:.25rem;
  display:flex
}
.site-footer__badges span {
  color:#e7e8eb;
  letter-spacing:-.04em;
  background:linear-gradient(145deg,#14171d,#090a0d);
  border:1px solid #ffffff1a;
  border-radius:.3rem;
  place-items:center;
  width:3rem;
  height:3rem;
  font-weight:900;
  display:grid;
  box-shadow:inset 0 0 18px #ffffff06
}
.site-footer__badges span:last-child {
  color:#dce9ff;
  background:linear-gradient(145deg,#1c3d75,#10254c);
  border-color:#4971bc8c
}
.site-footer__server>p {
  color:#8f939d
}
.site-footer__address {
  overflow-wrap:anywhere
}
.site-footer__bottom {
  color:#9297a1;
  text-align:center;
  border-top:1px solid #ffffff12
}
.site-footer__bottom .page-shell {
  padding-block:1.2rem;
  font-size:.82rem
}
@media (max-width:1050px) {
  .site-footer__grid {
    grid-template-columns:minmax(250px,1.5fr) repeat(2,minmax(150px,1fr))
  }

}
@media (max-width:680px) {
  .site-footer__grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2.4rem 1.5rem
  }
.site-footer__brand,.site-footer__server {
    grid-column:1/-1
  }

}
@media (max-width:420px) {
  .site-footer__grid {
    grid-template-columns:1fr
  }
.site-footer__brand,.site-footer__server {
    grid-column:auto
  }

}
.inv-item-tip__socket {
  color:#ff22d7
}
.inv-item-tip__wing {
  color:#ffe100
}
.inv-item-tip__quality--socket,.inv-item-tip__name.inv-item-tip__quality--socket {
  color:#c36cff
}
.inv-item-tip__spacer {
  height:.3rem;
  min-height:.3rem
}
.inv-item-tip__panel {
  text-align:center;
  background:#000000d1;
  border-color:#5a5a5a7a;
  border-radius:.12rem;
  width:20.75rem;
  max-width:calc(100vw - 1rem);
  padding:.35rem .4rem .45rem;
  font-family:Arial,Helvetica,sans-serif
}
.inv-item-tip__panel--socket {
  width:min(28.5rem,100vw - 1rem);
  min-width:min(28.5rem,100vw - 1rem)
}
.inv-item-tip__panel--socket .inv-item-tip__stats>li {
  white-space:nowrap;
  overflow-wrap:normal
}
@media (max-width:480px) {
  .inv-item-tip__panel--socket .inv-item-tip__stats>li {
    white-space:normal;
    overflow-wrap:anywhere
  }

}
.inv-item-tip__panel .inv-item-tip__name {
  font-size:.75rem;
  line-height:1.2
}
.inv-item-tip__panel .inv-item-tip__stats {
  color:#f4f4f5;
  letter-spacing:-.01em;
  text-align:center;
  gap:0;
  margin-top:.9rem;
  font-size:.7rem;
  line-height:1.2
}
.inv-item-tip__panel .inv-item-tip__stats>li {
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
  max-width:100%
}
.inv-item-tip__panel .inv-item-tip__class {
  color:#f4f4f5;
  background:0 0;
  margin:0 auto;
  padding:0 .35rem;
  font-size:.7rem;
  font-weight:400;
  line-height:1.28
}
.inv-item-tip__panel .inv-item-tip__compact-spacer {
  height:.8rem;
  min-height:.8rem
}
.inv-item-tip__panel .inv-item-tip__serial {
  margin-top:0;
  font-size:.64rem;
  line-height:1.2
}
.inv-item-tip__panel .inv-item-tip__luck,.inv-item-tip__panel .inv-item-tip__option,.inv-item-tip__panel .inv-item-tip__primary,.inv-item-tip__panel .inv-item-tip__excellent {
  color:#65a9ff
}
.badge-hall {
  background:radial-gradient(at 50% -20%,#8f66252e,#0000 48%),linear-gradient(145deg,#080809fa,#181410f0);
  border:1px solid #c9a86059;
  margin-bottom:2rem;
  padding:1.65rem;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 0 40px #c9a8600a,0 20px 45px #00000075
}
.badge-hall:before,.badge-hall:after {
  content:"";
  background:linear-gradient(90deg,#0000,#9f793d);
  width:24%;
  height:1px;
  position:absolute;
  top:22px
}
.badge-hall:before {
  left:3%
}
.badge-hall:after {
  right:3%;
  transform:scaleX(-1)
}
.badge-hall__header {
  text-align:center;
  z-index:1;
  margin-bottom:1.45rem;
  position:relative
}
.badge-hall__header h2 {
  color:#fff1d2;
  text-shadow:0 2px 12px #d3a14d4d;
  margin:0;
  font-family:Georgia,serif;
  font-size:1.9rem
}
.badge-hall__header p {
  color:#b3ada3;
  margin:.45rem 0 0
}
.badge-hall__grid {
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.9rem;
  display:grid
}
.badge-hall__card {
  --tier:#9d6a46;
  border:1px solid var(--tier);
  min-height:330px;
  padding:1.15rem .85rem .95rem
}
@supports (color:color-mix(in lab, red, red)) {
  .badge-hall__card {
    border:1px solid color-mix(in srgb,var(--tier) 58%,transparent)
  }

}
.badge-hall__card {
  background:radial-gradient(circle at 50% 21%,var(--tier),transparent 39%),linear-gradient(180deg,#0d0d10fa,#040507f0)
}
@supports (color:color-mix(in lab, red, red)) {
  .badge-hall__card {
    background:radial-gradient(circle at 50% 21%,color-mix(in srgb,var(--tier) 18%,transparent),transparent 39%),linear-gradient(180deg,#0d0d10fa,#040507f0)
  }

}
.badge-hall__card {
  text-align:center;
  flex-direction:column;
  align-items:center;
  display:flex;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 0 22px #000000a6,0 10px 22px #0000004d
}
.badge-hall__card:before {
  content:"";
  border:1px solid var(--tier);
  position:absolute;
  inset:7px
}
@supports (color:color-mix(in lab, red, red)) {
  .badge-hall__card:before {
    border:1px solid color-mix(in srgb,var(--tier) 19%,transparent)
  }

}
.badge-hall__card:before {
  pointer-events:none
}
.badge-hall__card:after {
  content:"◆";
  color:var(--tier);
  font-size:.55rem;
  position:absolute;
  top:4px;
  left:50%;
  transform:translate(-50%)
}
.badge-hall__card>img {
  object-fit:contain;
  width:128px;
  height:128px;
  filter:drop-shadow(0 0 13px var(--tier)) drop-shadow(0 8px 10px #000)
}
@supports (color:color-mix(in lab, red, red)) {
  .badge-hall__card>img {
    filter:drop-shadow(0 0 13px color-mix(in srgb,var(--tier) 38%,transparent)) drop-shadow(0 8px 10px #000)
  }

}
.badge-hall__card>img {
  transition:transform .2s
}
.badge-hall__card:hover>img {
  transform:translateY(-3px)scale(1.035)
}
.badge-hall__tier {
  flex-direction:column;
  width:100%;
  margin-top:.3rem;
  display:flex
}
.badge-hall__tier strong {
  color:#fff0d2;
  text-shadow:0 0 9px var(--tier);
  font:700 1.16rem Georgia,serif
}
@supports (color:color-mix(in lab, red, red)) {
  .badge-hall__tier strong {
    text-shadow:0 0 9px color-mix(in srgb,var(--tier) 35%,transparent)
  }

}
.badge-hall__tier span {
  color:var(--tier);
  margin-top:.25rem
}
@supports (color:color-mix(in lab, red, red)) {
  .badge-hall__tier span {
    color:color-mix(in srgb,var(--tier) 76%,#ddd)
  }

}
.badge-hall__tier span {
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:.68rem
}
.badge-hall__champion {
  border-top:1px solid var(--tier);
  width:100%;
  margin-top:auto;
  padding:.8rem .25rem 0
}
@supports (color:color-mix(in lab, red, red)) {
  .badge-hall__champion {
    border-top:1px solid color-mix(in srgb,var(--tier) 35%,transparent)
  }

}
.badge-hall__champion {
  text-align:left;
  grid-template-columns:44px 1fr;
  align-items:center;
  display:grid;
  position:relative
}
.badge-hall__portrait {
  border:1px solid var(--tier);
  object-position:top;
  border-radius:50%;
  object-fit:cover!important;
  filter:drop-shadow(0 3px 5px #000)!important;
  width:40px!important;
  height:40px!important
}
.badge-hall__portrait--fallback {
  color:var(--tier);
  background:#0a0a0b;
  place-items:center;
  display:grid
}
.badge-hall__player {
  flex-direction:column;
  min-width:0;
  padding-left:.55rem;
  display:flex;
  position:relative
}
.badge-hall__crown {
  color:var(--tier);
  font-size:.65rem;
  position:absolute;
  top:-3px;
  right:0
}
.badge-hall__champion a {
  color:#fff;
  text-overflow:ellipsis;
  font-size:.95rem;
  font-weight:800;
  overflow:hidden
}
.badge-hall__champion small {
  color:#aaa49b;
  white-space:nowrap;
  text-overflow:ellipsis;
  margin-top:.12rem;
  font-size:.68rem;
  overflow:hidden
}
.badge-hall__champion b {
  border:1px solid var(--tier);
  grid-column:1/-1;
  justify-self:center;
  margin-top:.65rem;
  padding:.3rem .65rem
}
@supports (color:color-mix(in lab, red, red)) {
  .badge-hall__champion b {
    border:1px solid color-mix(in srgb,var(--tier) 50%,transparent)
  }

}
.badge-hall__champion b {
  color:var(--tier);
  border-radius:20px
}
@supports (color:color-mix(in lab, red, red)) {
  .badge-hall__champion b {
    color:color-mix(in srgb,var(--tier) 72%,#fff)
  }

}
.badge-hall__champion b {
  background:var(--tier)
}
@supports (color:color-mix(in lab, red, red)) {
  .badge-hall__champion b {
    background:color-mix(in srgb,var(--tier) 10%,#080808)
  }

}
.badge-hall__champion b {
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.69rem
}
.badge-hall__empty {
  color:#706d68;
  border-top:1px solid #ffffff0f;
  flex-direction:column;
  gap:.35rem;
  width:100%;
  margin-top:auto;
  padding-top:.85rem;
  font-size:.72rem;
  display:flex
}
.badge-hall__empty i {
  color:var(--tier);
  font-size:1rem;
  font-style:normal
}
.badge-hall__card--bronze {
  --tier:#a9673f
}
.badge-hall__card--silver {
  --tier:#aebdce
}
.badge-hall__card--gold {
  --tier:#e1ae35
}
.badge-hall__card--platinum {
  --tier:#58b8df
}
.badge-hall__card--diamond {
  --tier:#7969ff
}
@media (max-width:1000px) {
  .badge-hall__grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}
@media (max-width:560px) {
  .badge-hall__grid {
    grid-template-columns:1fr
  }

}
.mad-ranking {
  color:#f4f4f4;
  grid-template-columns:310px minmax(0,1fr);
  align-items:start;
  gap:28px;
  min-height:720px;
  display:grid
}
.mad-ranking__sidebar {
  align-self:start;
  position:relative;
  top:auto
}
.mad-ranking__sidebar h2 {
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:0 0 24px;
  font-size:1.55rem
}
.mad-ranking__group-title,.mad-ranking__section-button {
  color:#e8e8e8;
  text-transform:uppercase;
  letter-spacing:.04em;
  cursor:pointer;
  background:radial-gradient(circle at 14%,#a0a4ab1f,#0000 29%),linear-gradient(90deg,#191a1cfa,#0c0d0ff2);
  border:1px solid #c5a44d38;
  align-items:center;
  gap:16px;
  width:100%;
  min-height:64px;
  padding:0 20px;
  font-size:1.1rem;
  font-weight:800;
  display:flex
}
.mad-ranking__group-title>span,.mad-ranking__section-button>i {
  color:#f5dc99;
  background:radial-gradient(circle,#3a2a14,#17130d 72%);
  border:1px solid #b98d36;
  border-radius:50%;
  flex:0 0 42px;
  place-items:center;
  width:42px;
  height:42px;
  font-size:.8rem;
  font-style:normal;
  display:grid;
  box-shadow:inset 0 0 14px #daae3e33,0 0 9px #0009
}
.mad-ranking__group-icon img {
  object-fit:contain;
  filter:drop-shadow(0 1px 2px #000)drop-shadow(0 0 3px #ebc15b61);
  width:34px;
  height:34px
}
.mad-ranking__group-icon--gens img {
  width:39px;
  height:25px
}
.mad-ranking__group-title>strong {
  text-align:left;
  flex:1
}
.mad-ranking__group-title>b {
  color:#d3b05b;
  font-size:1.65rem;
  font-weight:400;
  transition:transform .22s
}
.mad-ranking__group-title.is-open>b {
  transform:rotate(90deg)
}
.mad-ranking__group-title.is-open {
  color:#fff;
  background:radial-gradient(circle at 14%,#caa94345,#0000 30%),linear-gradient(90deg,#3d2b14,#15110b);
  border-color:#c5a44d99
}
.mad-ranking__group-title--section {
  margin-top:8px
}
.mad-ranking__menu {
  opacity:0;
  max-height:0;
  padding-left:16px;
  transition:max-height .3s,opacity .2s;
  overflow:hidden
}
.mad-ranking__menu.is-open {
  opacity:1;
  max-height:380px
}
.mad-ranking__menu button {
  color:#aaaeb8;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:.045em;
  background:linear-gradient(90deg,#0b0c0efa,#0b0c0eb8);
  border:0;
  border-bottom:1px solid #ffffff09;
  grid-template-columns:28px 1fr 24px;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:58px;
  padding:0 15px;
  font-weight:800;
  transition:all .18s;
  display:grid
}
.mad-ranking__menu button i {
  color:#f3ead2;
  background:#171717;
  border:1px solid #c79f4147;
  border-radius:50%;
  place-items:center;
  width:32px;
  height:32px;
  font-size:.62rem;
  font-style:normal;
  display:grid;
  box-shadow:inset 0 0 9px #ffffff0a
}
.mad-ranking__menu button i img {
  object-fit:contain;
  filter:drop-shadow(0 1px 2px #000);
  width:27px;
  height:27px
}
.mad-ranking__menu button i.mad-ranking__gens-pair img {
  width:30px;
  height:20px
}
.mad-ranking__menu button b {
  opacity:0;
  color:#e7c06a;
  font-size:1.8rem;
  font-weight:300
}
.mad-ranking__menu button:hover,.mad-ranking__menu button.is-active {
  color:#fff0c8;
  background:linear-gradient(90deg,#3f2d12fa,#17120be6)
}
.mad-ranking__menu button.is-active b {
  opacity:1
}
.mad-ranking__menu button.is-active i {
  color:#10120e;
  background:linear-gradient(145deg,#e3bd55,#a87923);
  border-color:#f0c964;
  box-shadow:0 0 10px #daa9354d
}
.mad-ranking__menu button.is-active i img {
  filter:brightness(.22)sepia()saturate(1.5)
}
.mad-ranking__section-button {
  cursor:pointer;
  margin-top:8px
}
.mad-ranking__section-button.is-active {
  color:#fff;
  background:linear-gradient(90deg,#493318,#17120b);
  border-color:#a98739
}
.mad-ranking__menu--events.is-open {
  max-height:650px;
  overflow:visible
}
.mad-ranking__content {
  min-width:0
}
.mad-ranking__content>h1 {
  color:#fff;
  text-transform:uppercase;
  text-shadow:0 3px 18px #000000bf;
  margin:0 0 10px;
  font:700 clamp(2.4rem,5vw,4.2rem)/1 Georgia,serif
}
.mad-ranking__toolbar {
  background:#08090ab3;
  margin-bottom:18px;
  padding:14px 0 0
}
.mad-ranking__periods {
  gap:8px;
  padding:0 0 14px;
  display:flex
}
.mad-ranking__periods button {
  color:#f0f0f2;
  text-transform:uppercase;
  background:#27292f;
  border:1px solid #ffffff12;
  min-width:100px;
  height:44px;
  padding:0 18px;
  font-weight:900
}
.mad-ranking__periods button.is-active {
  color:#171006;
  background:linear-gradient(#dfbd70,#b98b35);
  border-color:#e0b85d;
  box-shadow:inset 0 1px #ffffff59,0 0 14px #c3943626
}
.mad-ranking__actions {
  display:block
}
.mad-ranking__timer {
  background:#111215;
  border:1px solid #292c31;
  grid-template-columns:24px 1fr;
  align-items:center;
  min-height:36px;
  padding:4px 12px;
  display:grid
}
.mad-ranking__timer>span {
  color:#979ba2;
  font-size:1.15rem
}
.mad-ranking__timer small {
  color:#858993;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.62rem
}
.mad-ranking__actions button {
  color:#ead39b;
  background:linear-gradient(#292218,#1b1711);
  border:1px solid #7e622f;
  font-size:.92rem;
  font-weight:900;
  box-shadow:inset 0 1px #ffffff0a
}
.mad-ranking__actions button:hover {
  color:#fff1c9;
  background:linear-gradient(#3c2e19,#21180d);
  border-color:#c9a454
}
.mad-ranking__actions .mad-ranking__prizes {
  color:#171006;
  background:linear-gradient(#d9b662,#aa7b2b);
  border-color:#b88b34
}
.mad-ranking__actions .mad-ranking__prizes:hover {
  color:#0d0903;
  background:linear-gradient(#edcc7e,#bd8e36);
  border-color:#f0ca70
}
.mad-ranking__notice {
  color:#d0c7b8;
  background:#151515;
  border-left:3px solid #c29a3a;
  margin:8px 0 0;
  padding:12px 16px;
  font-size:.85rem
}
.mad-ranking__online-rules strong {
  color:#f0cf79;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.72rem
}
.mad-ranking__online-rules span:last-child {
  color:#8e929a
}
.mad-ranking__table-wrap {
  background:#070809e0;
  border:1px solid #ffffff0e;
  overflow:hidden;
  box-shadow:0 20px 55px #00000061
}
.mad-ranking__head,.mad-ranking__row {
  grid-template-columns:64px minmax(0,1fr) 190px 145px;
  align-items:center;
  display:grid
}
.mad-ranking__head--online,.mad-ranking__table-wrap--online .mad-ranking__row {
  grid-template-columns:64px minmax(220px,1fr) 110px minmax(210px,.72fr) 130px
}
.mad-ranking__experience {
  white-space:nowrap;
  font-size:.82rem;
  color:#e8c76d!important;
  padding:0 12px!important
}
.mad-ranking__head {
  color:#747985;
  text-transform:uppercase;
  letter-spacing:.06em;
  min-height:50px;
  padding:0;
  font-size:.66rem
}
.mad-ranking__head>span {
  padding:0 12px
}
.mad-ranking__row {
  color:#aeb2bb;
  background:#161719;
  border-top:3px solid #08090a;
  min-height:66px;
  position:relative
}
.mad-ranking__row>* {
  z-index:1;
  position:relative
}
.mad-ranking__row.rank-1 {
  --podium-rgb:224,179,65;
  --podium-edge:#d9ac3b;
  color:#fff;
  background:linear-gradient(90deg,#241805 0%,#4c350b 18%,#302107 64%,#171207 100%)
}
.mad-ranking__row.rank-2 {
  --podium-rgb:196,207,223;
  --podium-edge:#aeb9ca;
  color:#fff;
  background:linear-gradient(90deg,#20242a 0%,#3e454f 18%,#2d323a 64%,#17191d 100%)
}
.mad-ranking__row.rank-3 {
  --podium-rgb:202,111,49;
  --podium-edge:#b9652e;
  color:#fff;
  background:linear-gradient(90deg,#291307 0%,#55280e 18%,#351a0b 64%,#1a100a 100%)
}
.mad-ranking__row.rank-1:before,.mad-ranking__row.rank-2:before,.mad-ranking__row.rank-3:before {
  content:"";
  background:radial-gradient(ellipse at 25% 50%,rgba(var(--podium-rgb),.22),transparent 34%),linear-gradient(115deg,transparent 0 47%,rgba(var(--podium-rgb),.055) 47.2% 47.8%,transparent 48% 54%,rgba(var(--podium-rgb),.04) 54.2% 54.7%,transparent 55%);
  pointer-events:none;
  position:absolute;
  inset:0
}
.mad-ranking__row.rank-1:after,.mad-ranking__row.rank-2:after,.mad-ranking__row.rank-3:after {
  content:"";
  border-left:3px solid var(--podium-edge);
  border-right:1px solid rgba(var(--podium-rgb),.28);
  box-shadow:inset 0 1px rgba(var(--podium-rgb),.18),inset 0 -1px #0009;
  pointer-events:none;
  position:absolute;
  inset:0
}
.mad-ranking__rank {
  border-right:1px solid #ffffff09;
  place-items:center;
  height:100%;
  font-size:.92rem;
  font-weight:900;
  display:grid
}
.rank-1 .mad-ranking__rank,.rank-2 .mad-ranking__rank,.rank-3 .mad-ranking__rank {
  box-sizing:border-box;
  color:#fff;
  place-self:stretch stretch;
  width:auto;
  height:auto;
  margin:0;
  font-size:.78rem;
  line-height:1;
  position:relative
}
.rank-2 .mad-ranking__rank {
  color:#d7dce5
}
.rank-3 .mad-ranking__rank {
  color:#c97839
}
.rank-1 .mad-ranking__rank:before,.rank-2 .mad-ranking__rank:before,.rank-3 .mad-ranking__rank:before {
  content:"";
  z-index:-1;
  background-position:50%;
  background-repeat:no-repeat;
  background-size:contain;
  width:46px;
  height:46px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}
.rank-1 .mad-ranking__rank:before {
  background-image:url(/images/rankings/ranking_frame_1st.png)
}
.rank-2 .mad-ranking__rank:before {
  background-image:url(/images/rankings/ranking_frame_2nd.png)
}
.rank-3 .mad-ranking__rank:before {
  background-image:url(/images/rankings/ranking_frame_3rd.png)
}
.mad-ranking__character {
  min-width:0;
  color:inherit;
  align-items:center;
  gap:14px;
  display:flex
}
.mad-ranking__character>img,.mad-ranking__avatar {
  object-fit:cover;
  object-position:top;
  background:#0b0c0e;
  border:1px solid #e2bc5c66;
  flex:0 0 52px;
  width:52px;
  height:52px
}
.mad-ranking__avatar {
  place-items:center;
  font-size:.7rem;
  display:grid
}
.mad-ranking__character>span:last-child {
  flex-direction:column;
  min-width:0;
  display:flex
}
.mad-ranking__character strong {
  color:#f7f7f7;
  text-overflow:ellipsis;
  font-size:1.05rem;
  overflow:hidden
}
.mad-ranking__character small {
  color:#92969f;
  margin-top:2px;
  font-size:.68rem
}
.mad-ranking__character-name {
  white-space:nowrap;
  align-items:center;
  gap:7px;
  display:flex
}
.mad-ranking__country-flag {
  border-radius:2px;
  box-shadow:0 1px 4px #000000b3;
  object-fit:cover!important;
  vertical-align:middle!important;
  border:1px solid #ffffff52!important;
  flex:0 0 22px!important;
  width:22px!important;
  height:15px!important;
  display:block!important
}
.mad-ranking__country-emoji {
  flex:none;
  font:1rem/1 sans-serif
}
.mad-ranking__vip {
  color:#858b95;
  letter-spacing:.05em;
  background:#15171a;
  border:1px solid #343840;
  border-radius:8px;
  flex:none;
  padding:2px 6px;
  font:800 .52rem/1.1 Arial,sans-serif
}
.mad-ranking__vip.is-gold {
  color:#ffe292;
  background:linear-gradient(#5b400e,#2c1e06);
  border-color:#d6aa3e;
  box-shadow:0 0 7px #e2b2363d
}
.mad-ranking__character-guild-column {
  color:#d4b45f;
  text-align:center;
  flex-direction:column;
  justify-content:center;
  align-self:stretch;
  align-items:center;
  gap:4px;
  min-width:0;
  padding:3px 12px;
  transition:background .18s,color .18s;
  display:flex
}
.mad-ranking__character-guild-column:not(.is-empty):hover {
  color:#ffe397;
  background:#d8a93d17
}
.mad-ranking__character-guild-column .mad-ranking__guild-mark {
  flex-basis:34px;
  width:34px;
  height:34px
}
.mad-ranking__character-guild-column strong {
  max-width:100%;
  color:inherit;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.72rem;
  line-height:1;
  display:block;
  overflow:hidden
}
.mad-ranking__character-guild-column>small {
  color:#666b74;
  font-size:.65rem
}
.mad-ranking__head:not(.mad-ranking__head--guild)>:nth-child(3) {
  text-align:center;
  align-self:stretch;
  place-items:center;
  padding:0;
  display:grid
}
.mad-ranking__head>:last-child {
  text-align:center;
  place-self:stretch stretch;
  place-items:center;
  height:auto;
  padding:0;
  display:grid
}
.mad-ranking__row>b {
  color:#f5f5f5;
  text-align:center;
  align-self:stretch;
  place-items:center;
  padding:0;
  display:grid
}
.mad-ranking__empty {
  color:#898d95;
  text-align:center;
  padding:46px 20px
}
.mad-ranking__head--guild,.mad-ranking__row--guild {
  grid-template-columns:64px minmax(180px,1.25fr) minmax(110px,.8fr) 90px 120px
}
.mad-ranking__row--guild>strong,.mad-ranking__row--guild>span,.mad-ranking__row--guild>b {
  padding:0 14px
}
.mad-ranking__head--guild>:nth-child(4),.mad-ranking__head--guild>:nth-child(5),.mad-ranking__row--guild>:nth-child(4),.mad-ranking__row--guild>:nth-child(5) {
  text-align:center;
  align-self:stretch;
  place-items:center;
  padding:0;
  display:grid
}
.mad-ranking__guild-name {
  color:#fff;
  align-items:center;
  gap:13px;
  font-size:1rem;
  display:flex
}
.mad-ranking__guild-mark {
  width:44px;
  height:44px;
  image-rendering:pixelated;
  background:#090a0c;
  border:1px solid #dab24959;
  flex:0 0 44px;
  grid-template-rows:repeat(8,1fr);
  grid-template-columns:repeat(8,1fr);
  display:grid;
  box-shadow:0 2px 8px #000000b8
}
.mad-ranking__guild-mark i {
  width:100%;
  height:100%;
  display:block
}
.mad-ranking__guild-mlevel {
  color:#fff;
  text-align:center;
  font-weight:900
}
.mad-ranking__gens-score {
  background:#111216;
  border:1px solid #c8a4483d;
  grid-template-columns:auto minmax(100px,1fr) auto;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding:12px 16px;
  display:grid
}
.mad-ranking__gens-score strong {
  color:#f4f4f4;
  align-items:center;
  gap:8px;
  font-size:.9rem;
  display:flex
}
.mad-ranking__gens-score strong img {
  object-fit:contain;
  width:34px;
  height:34px
}
.mad-ranking__gens-score>div {
  background:linear-gradient(90deg,#b72d38,#f05a55);
  border:1px solid #ffffff1f;
  border-radius:10px;
  height:12px;
  overflow:hidden;
  box-shadow:inset 0 1px 4px #000,0 0 8px #be2d372e
}
.mad-ranking__gens-score>div span {
  background:linear-gradient(90deg,#1768b7,#2fa7ed);
  border-right:2px solid #ffffffb3;
  height:100%;
  display:block;
  box-shadow:inset 0 1px #ffffff4d,0 0 9px #2fa7ed6b
}
.mad-ranking__gens-family.is-duprian {
  color:#d5a139
}
.mad-ranking__gens-family.is-vanert {
  color:#b78099
}
.mad-ranking__head--gens,.mad-ranking__row--gens {
  grid-template-columns:64px minmax(180px,1fr) 130px 130px 130px
}
.mad-ranking__gens-family {
  align-items:center;
  gap:10px;
  font-weight:800;
  display:flex
}
.mad-ranking__gens-family img {
  object-fit:contain;
  flex:0 0 34px;
  width:34px;
  height:34px
}
.mad-ranking__gens-title {
  color:#eee3c6;
  font-size:.82rem
}
.mad-ranking__row--gens>b {
  color:#f4c95f
}
.guild-profile__card {
  background:linear-gradient(145deg,#12110ef7,#07080afa 55%);
  border:1px solid #caa64947;
  width:min(100%,980px);
  margin:0 auto;
  padding:24px 28px;
  position:relative;
  overflow:hidden;
  box-shadow:0 24px 70px #0000008c,inset 0 1px #ffe0910a
}
.guild-profile__card:before {
  content:"";
  pointer-events:none;
  background:radial-gradient(circle at 15% 22%,#c3932e1a,#0000 28%);
  position:absolute;
  inset:0
}
.guild-profile__heading {
  text-align:center;
  border-bottom:1px solid #c2973259;
  padding:0 0 17px;
  position:relative
}
.guild-profile__heading>span,.guild-profile__card>h2>span {
  color:#d5ad50;
  letter-spacing:.25em;
  margin-bottom:7px;
  font:800 .66rem/1 Arial,sans-serif;
  display:block
}
.guild-profile__heading h1 {
  color:#fff6df;
  text-shadow:0 3px 18px #000,0 0 22px #cfa43a1f;
  margin:0;
  font:700 clamp(2rem,4vw,2.8rem)/1 Georgia,serif
}
.guild-profile__heading p {
  color:#858995;
  margin:9px 0 0;
  font-size:.82rem
}
.guild-profile__card>h2 {
  color:#fff3d5;
  border-bottom:1px solid #c2973259;
  margin:0;
  padding:0 0 18px;
  font:700 1.65rem/1.2 Georgia,serif;
  position:relative
}
.guild-profile__overview {
  grid-template-columns:220px minmax(0,1fr);
  gap:24px;
  padding:24px 0 28px;
  display:grid;
  position:relative
}
.guild-profile__emblem {
  background:radial-gradient(circle,#c49d391f,#0000 62%),#040507a8;
  border:1px solid #c4993438;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:9px;
  min-height:230px;
  display:flex;
  box-shadow:inset 0 0 35px #000c
}
.guild-profile__emblem>span {
  color:#ad8a3c;
  letter-spacing:.24em;
  font:800 .62rem/1 Arial,sans-serif
}
.guild-profile__emblem>strong {
  color:#f2d98e;
  letter-spacing:.05em;
  font:700 1.35rem/1 Georgia,serif
}
.guild-profile__emblem .mad-ranking__guild-mark {
  background:#050607;
  border:1px solid #e2bd5885;
  flex:none;
  width:150px;
  height:150px;
  padding:6px;
  box-shadow:0 10px 25px #000000c7,0 0 22px #c1942a1a
}
.guild-profile__details {
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:center;
  gap:14px 16px;
  display:grid
}
.guild-profile__field {
  background:linear-gradient(90deg,#2d220e6b,#0e0f12e6 32%);
  border:1px solid #b8944129;
  border-left:3px solid #b68a2d;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  min-height:64px;
  padding:11px 18px;
  display:flex
}
.guild-profile__field--wide {
  grid-column:1/-1
}
.guild-profile__field span {
  color:#9b9da4;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.66rem
}
.guild-profile__field strong {
  color:#fff4d4;
  font-size:1rem;
  font-weight:600
}
.guild-profile__members {
  border:1px solid #ffffff0e;
  margin-top:14px;
  position:relative
}
.guild-profile__member {
  color:#a6aab3;
  background:linear-gradient(90deg,#17181b,#111215);
  border-bottom:2px solid #090a0c;
  border-left:3px solid #34373d;
  grid-template-columns:58px minmax(220px,1fr) 110px minmax(150px,.65fr);
  align-items:center;
  min-height:62px;
  display:grid;
  position:relative;
  overflow:hidden
}
.guild-profile__member.is-master {
  background:linear-gradient(90deg,#4a3208,#2d200a 46%,#171307);
  border-left-color:#e0b341
}
.guild-profile__member.is-assistant {
  background:linear-gradient(90deg,#343a43,#282d34 46%,#17191d);
  border-left-color:#aeb9ca
}
.guild-profile__member.is-battle {
  background:linear-gradient(90deg,#173522,#17291e 46%,#111713);
  border-left-color:#4da76a
}
.guild-profile__member>* {
  padding:0 10px
}
.guild-profile__member a {
  color:#d06a5d;
  text-decoration:none
}
.guild-profile__member strong {
  color:#d6d8dd
}
.guild-profile__member--head {
  color:#c8a95d;
  letter-spacing:.07em;
  text-transform:uppercase;
  background:#0b0c0e;
  min-height:46px;
  font-size:.68rem
}
.guild-profile__member-number {
  color:#d8dce4;
  align-self:stretch;
  place-items:center;
  font-weight:900;
  display:grid
}
.guild-profile__member-character {
  align-self:stretch;
  align-items:center;
  gap:12px;
  min-width:0;
  display:flex;
  color:inherit!important
}
.guild-profile__member-character>img,.guild-profile__member-avatar {
  object-fit:cover;
  object-position:top;
  background:#090a0c;
  border:1px solid #d0a84261;
  flex:0 0 48px;
  width:48px;
  height:48px
}
.guild-profile__member-avatar {
  place-items:center;
  font-size:.65rem;
  display:grid
}
.guild-profile__member-character>span {
  flex-direction:column;
  gap:3px;
  min-width:0;
  display:flex
}
.guild-profile__member-character strong {
  align-items:center;
  gap:7px;
  font-size:.96rem;
  display:flex;
  color:#fff!important
}
.guild-profile__member-character strong img {
  object-fit:cover;
  border:1px solid #ffffff4d;
  border-radius:2px;
  width:21px;
  height:14px
}
.guild-profile__member-character small {
  color:#a8abb3;
  font-size:.67rem
}
.guild-profile__position.is-master {
  color:#ffd875
}
.guild-profile__position.is-assistant {
  color:#a7b8e7
}
.guild-profile__position.is-battle {
  color:#76c18a
}
@media (max-width:760px) {
  .guild-profile__card {
    padding:18px
  }
.guild-profile__overview {
    grid-template-columns:1fr
  }
.guild-profile__emblem {
    min-height:220px
  }
.guild-profile__emblem .mad-ranking__guild-mark {
    width:210px;
    height:210px
  }
.guild-profile__details {
    grid-template-columns:1fr
  }
.guild-profile__field--wide {
    grid-column:auto
  }
.guild-profile__member {
    grid-template-columns:38px 1fr 70px
  }
.guild-profile__member>:nth-child(3),.guild-profile__member>:nth-child(5) {
    display:none
  }

}
@media (max-width:980px) {
  .mad-ranking {
    grid-template-columns:1fr
  }
.mad-ranking__sidebar {
    position:static
  }
.mad-ranking__menu {
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:0;
    display:grid
  }
.mad-ranking__menu.is-open,.mad-ranking__menu--events.is-open {
    max-height:420px
  }
.mad-ranking__content>h1 {
    font-size:2.5rem
  }
.mad-ranking__actions {
    grid-template-columns:1fr 1fr
  }
.mad-ranking__timer {
    grid-column:1/-1
  }

}
@media (max-width:620px) {
  .mad-ranking__menu {
    grid-template-columns:1fr
  }
.mad-ranking__periods {
    overflow-x:auto
  }
.mad-ranking__actions {
    grid-template-columns:1fr
  }
.mad-ranking__timer {
    grid-column:auto
  }
.mad-ranking__head,.mad-ranking__row {
    grid-template-columns:52px minmax(0,1fr) 78px
  }
.mad-ranking__head:not(.mad-ranking__head--guild)>:nth-child(3),.mad-ranking__row:not(.mad-ranking__row--guild)>:nth-child(3) {
    display:none
  }
.mad-ranking__head--online,.mad-ranking__table-wrap--online .mad-ranking__row {
    grid-template-columns:52px minmax(0,1fr) 112px 84px
  }
.mad-ranking__head--online>:nth-child(3),.mad-ranking__table-wrap--online .mad-ranking__row>:nth-child(3),.mad-ranking__character small {
    display:none
  }
.mad-ranking__row>b {
    padding:0
  }
.mad-ranking__experience {
    font-size:.66rem
  }
.mad-ranking__head--guild,.mad-ranking__row--guild {
    grid-template-columns:48px 1fr 90px
  }
.mad-ranking__head--guild>:nth-child(3),.mad-ranking__head--guild>:nth-child(5),.mad-ranking__row--guild>:nth-child(3),.mad-ranking__row--guild>:nth-child(5),.mad-ranking__head--gens>:nth-child(4),.mad-ranking__row--gens>:nth-child(4) {
    display:none
  }
.mad-ranking__head--gens>:nth-child(5),.mad-ranking__row--gens>:nth-child(5) {
    grid-column:3
  }
.mad-ranking__gens-score {
    grid-template-columns:auto 1fr auto;
    padding:10px 8px
  }
.mad-ranking__gens-score strong {
    gap:3px;
    font-size:.7rem
  }
.mad-ranking__gens-score strong img {
    width:27px;
    height:27px
  }

}
.site-header__nav-group {
  align-items:center;
  height:100%;
  display:flex;
  position:relative
}
.site-header__link--dropdown {
  align-items:center;
  gap:.45rem;
  display:flex
}
.site-header__link--dropdown>span {
  color:#cda84f;
  font-size:.72rem;
  transition:transform .16s
}
.site-header__dropdown {
  z-index:130;
  visibility:hidden;
  opacity:0;
  background:#09090afa;
  border:1px solid #c9a8604d;
  width:max-content;
  min-width:13.5rem;
  padding:.4rem;
  transition:opacity .15s,transform .15s,visibility .15s;
  display:grid;
  position:absolute;
  top:calc(100% - 1px);
  left:50%;
  transform:translate(-50%,8px);
  box-shadow:0 18px 38px #0000009e,inset 0 1px #ffffff08
}
.site-header__dropdown:before {
  content:"";
  background:linear-gradient(90deg,#0000,#d2aa50,#0000);
  height:2px;
  position:absolute;
  top:-3px;
  left:1rem;
  right:1rem
}
.site-header__dropdown a {
  color:#aaa9ad;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:.68rem .85rem;
  font-size:.76rem;
  transition:color .14s,background-color .14s,padding-left .14s
}
.site-header__dropdown a:hover,.site-header__dropdown a:focus-visible {
  color:#e3bd65;
  background:linear-gradient(90deg,#c9a86024,#0000);
  outline:none;
  padding-left:1rem
}
.site-header__nav-group--open .site-header__dropdown {
  visibility:visible;
  opacity:1;
  transform:translate(-50%)
}
.site-header__nav-group:hover .site-header__link--dropdown>span,.site-header__nav-group:focus-within .site-header__link--dropdown>span {
  transform:rotate(180deg)
}
.site-header {
  z-index:1000;
  overflow:visible!important
}
.site-header__bar,.site-header__nav,.site-header__nav-group {
  overflow:visible
}
.support-detail {
  width:100%;
  max-width:920px;
  margin-inline:auto
}
.support-area {
  width:100%;
  max-width:980px;
  margin-inline:auto
}
.support-file {
  padding:.65rem
}
.support-form label small {
  color:#85878e;
  margin-top:.35rem;
  font-size:.7rem;
  display:block
}
.support-attachment {
  color:#e0bc66;
  text-align:left;
  cursor:pointer;
  background:#0d0d0f;
  border:1px solid #484039;
  border-radius:4px;
  align-items:center;
  gap:.75rem;
  width:min(100%,360px);
  margin-top:.75rem;
  padding:.55rem;
  display:flex
}
.support-attachment:hover {
  background:#12110e;
  border-color:#a77b2b
}
.support-attachment>img {
  object-fit:cover;
  border:1px solid #322f2a;
  flex:0 0 76px;
  width:76px;
  height:58px
}
.support-attachment__pdf {
  color:#fff;
  background:#a52c30;
  border:1px solid #713536;
  flex:0 0 58px;
  place-items:center;
  width:58px;
  height:58px;
  font-size:.72rem;
  font-weight:900;
  display:grid
}
.support-attachment__info {
  gap:.25rem;
  min-width:0;
  display:grid
}
.support-attachment__info strong {
  color:#e0bc66;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden
}
.support-attachment__info small {
  color:#85878e
}
.support-preview {
  z-index:160;
  place-items:center;
  padding:18px;
  display:grid;
  position:fixed;
  inset:0
}
.support-preview__backdrop {
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  background:#000000e6;
  border:0;
  position:absolute;
  inset:0
}
.support-preview__panel {
  z-index:1;
  background:#0b0c0f;
  border:1px solid #795d26;
  grid-template-rows:auto 1fr;
  width:min(1180px,88vw);
  height:min(820px,86vh);
  display:grid;
  position:relative;
  overflow:hidden;
  box-shadow:0 25px 90px #000
}
.support-preview__panel>header {
  background:#111216;
  border-bottom:1px solid #393126;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:10px 16px;
  display:flex
}
.support-preview__panel>header>div {
  align-items:center;
  gap:12px;
  display:flex
}
.support-preview__panel header strong {
  color:#eed594
}
.support-preview__panel header small {
  color:#85878e
}
.support-preview__panel header a {
  color:#d6ad4c;
  font-size:.75rem;
  text-decoration:none
}
.support-preview__panel header button {
  color:#ccc;
  cursor:pointer;
  background:0 0;
  border:0;
  font-size:1.8rem;
  line-height:1
}
.support-preview__zoom {
  border:1px solid #393126;
  align-items:center;
  gap:5px;
  padding:3px 5px;
  display:flex
}
.support-preview__zoom button {
  color:#e4c36f!important;
  min-width:28px!important;
  font-size:.75rem!important
}
.support-preview__zoom b {
  color:#bbb;
  text-align:center;
  min-width:42px;
  font-size:.7rem
}
.support-preview__content {
  background:#07080a;
  min-height:0;
  padding:12px;
  display:block;
  overflow:auto
}
.support-preview__image-canvas {
  place-items:center;
  min-width:100%;
  min-height:100%;
  display:grid
}
.support-preview__image-canvas img {
  object-fit:contain;
  width:auto;
  max-width:90%;
  height:68vh;
  max-height:calc(100% - 20px)
}
.support-preview__content iframe {
  background:#fff;
  border:0;
  width:100%;
  height:100%
}
@media (max-width:700px) {
  .support-preview {
    padding:4px
  }
.support-preview__panel {
    width:100%;
    height:94vh
  }
.support-preview__panel>header {
    align-items:flex-start
  }
.support-preview__panel>header>div:first-child {
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    min-width:0
  }
.support-preview__panel header a,.support-preview__zoom b {
    display:none
  }
.support-preview__image-canvas img {
    max-width:96%;
    height:65vh
  }

}
.castle-details {
  color:#f5f0e7;
  gap:24px;
  display:grid
}
.castle-details__owner {
  background:linear-gradient(90deg,#040405f5,#150f08e6 55%,#040405f0),url(../image/section-castle-v2.png) 50% 42%/cover;
  border:1px solid #d3a7466b;
  grid-template-columns:150px minmax(220px,1fr) minmax(220px,1fr);
  align-items:center;
  gap:30px;
  min-height:190px;
  padding:24px 34px;
  display:grid;
  position:relative;
  overflow:hidden;
  box-shadow:0 22px 60px #00000061,inset 0 1px #ffe29614
}
.castle-details__owner:after {
  content:"";
  pointer-events:none;
  border:1px solid #ca9a351f;
  position:absolute;
  inset:10px
}
.castle-details__crest {
  z-index:1;
  background:radial-gradient(circle,#86581057,#000000eb 70%);
  border:1px solid #ddb04a94;
  place-items:center;
  width:128px;
  height:128px;
  display:grid;
  position:relative;
  box-shadow:0 0 32px #c78f242e
}
.castle-details__crest canvas {
  image-rendering:pixelated;
  width:86px!important;
  height:86px!important
}
.castle-details__crest-placeholder {
  object-fit:cover;
  object-position:center;
  filter:saturate(.9)contrast(1.05)brightness(.82);
  width:100%;
  height:100%
}
.castle-details__crest>span {
  color:#d5ad55;
  font-size:58px
}
.castle-details__owner>div:not(.castle-details__crest) {
  z-index:1;
  position:relative
}
.castle-details__owner span,.castle-details__status span {
  color:#cba655;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:8px;
  font-size:11px;
  font-weight:800;
  display:block
}
.castle-details__owner h2 {
  font-family:var(--font-display), Georgia, serif;
  text-shadow:0 2px 18px #d5a64647;
  margin:0;
  font-size:clamp(32px,4vw,54px);
  line-height:1
}
.castle-details__owner strong {
  font-family:var(--font-display), Georgia, serif;
  color:#e1c377;
  font-size:25px
}
.castle-details__status {
  border:1px solid var(--border);
  background:#08080af0;
  grid-template-columns:1.3fr 1.2fr .8fr .8fr;
  display:grid
}
.castle-details__status>div {
  border-right:1px solid #ffffff12;
  min-height:92px;
  padding:20px 24px
}
.castle-details__status>div:last-child {
  border-right:0
}
.castle-details__status strong {
  color:#f6f2e9;
  font-size:17px
}
.castle-details__countdown strong {
  color:#e9bc54;
  font-variant-numeric:tabular-nums
}
.castle-details__panel {
  background:#070709e6;
  border:1px solid #c99b3842;
  box-shadow:0 18px 45px #00000042
}
.castle-details__panel>header {
  background:linear-gradient(90deg,#603b0c38,#0000);
  border-bottom:1px solid #c99b3840;
  align-items:center;
  gap:15px;
  padding:18px 24px;
  display:flex
}
.castle-details__panel>header span {
  color:#eac565;
  border:1px solid #a97720;
  place-items:center;
  width:38px;
  height:38px;
  font-size:12px;
  display:grid
}
.castle-details__panel>header h2 {
  font-family:var(--font-display), Georgia, serif;
  margin:0;
  font-size:25px
}
.castle-details__taxes {
  grid-template-columns:repeat(4,1fr);
  margin:0;
  display:grid
}
.castle-details__taxes>div {
  border-right:1px solid #ffffff12;
  padding:22px 24px
}
.castle-details__taxes>div:last-child {
  border-right:0
}
.castle-details__taxes dt {
  color:#9699a3;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px
}
.castle-details__taxes dd {
  color:#e6bf65;
  margin:7px 0 0;
  font-size:20px;
  font-weight:800
}
.castle-details__schedule {
  width:100%
}
.castle-details__schedule>div {
  border-bottom:1px solid #ffffff12;
  grid-template-columns:1.2fr 1fr 1fr;
  align-items:center;
  min-height:58px;
  padding:0 24px;
  display:grid
}
.castle-details__schedule>div:last-child {
  border-bottom:0
}
.castle-details__schedule-head {
  color:#b08c42;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
  font-weight:800;
  min-height:46px!important
}
.castle-details__schedule>div:not(.castle-details__schedule-head).is-active {
  background:linear-gradient(90deg,#8f5b0f57,#3c25081f);
  border-left:3px solid #efbd4f
}
.castle-details__schedule strong {
  color:#ede8df
}
.castle-details__schedule time {
  color:#aeb0b8;
  font-size:13px
}
@media (max-width:850px) {
  .castle-details__owner {
    grid-template-columns:110px 1fr;
    gap:20px;
    padding:22px
  }
.castle-details__crest {
    width:104px;
    height:104px
  }
.castle-details__owner>div:last-child {
    grid-column:2
  }
.castle-details__status,.castle-details__taxes {
    grid-template-columns:repeat(2,1fr)
  }
.castle-details__status>div:nth-child(2),.castle-details__taxes>div:nth-child(2) {
    border-right:0
  }
.castle-details__schedule>div {
    grid-template-columns:1fr;
    gap:5px;
    padding:14px 18px
  }
.castle-details__schedule-head {
    display:none!important
  }

}
@media (max-width:520px) {
  .castle-details__owner {
    text-align:center;
    grid-template-columns:1fr
  }
.castle-details__crest {
    margin:0 auto
  }
.castle-details__owner>div:last-child {
    grid-column:auto
  }
.castle-details__status,.castle-details__taxes {
    grid-template-columns:1fr
  }
.castle-details__status>div,.castle-details__taxes>div {
    border-bottom:1px solid #ffffff12;
    border-right:0
  }

}
.mbx__roulette .mbx__card {
  --mbx-rarity-slot:url(/images/mystery-box/rarity-slots/slot-common-v6-142x233.png);
  isolation:isolate;
  box-sizing:border-box;
  background:var(--mbx-rarity-slot) center / 142px 233px no-repeat;
  width:142px;
  min-width:142px;
  max-width:142px;
  height:233px;
  min-height:233px;
  max-height:233px;
  box-shadow:none;
  border:0;
  border-radius:0;
  flex:0 0 142px;
  gap:0;
  margin:0 1px;
  padding:0;
  animation:none;
  display:block;
  position:relative;
  overflow:hidden;
  transform:none
}
.mbx__roulette .mbx__card--common {
  --mbx-rarity-slot:url(/images/mystery-box/rarity-slots/slot-common-v6-142x233.png)
}
.mbx__roulette .mbx__card--uncommon {
  --mbx-rarity-slot:url(/images/mystery-box/rarity-slots/slot-uncommon-v6-142x233.png)
}
.mbx__roulette .mbx__card--rare {
  --mbx-rarity-slot:url(/images/mystery-box/rarity-slots/slot-rare-v6-142x233.png)
}
.mbx__roulette .mbx__card--epic {
  --mbx-rarity-slot:url(/images/mystery-box/rarity-slots/slot-epic-v6-142x233.png)
}
.mbx__roulette .mbx__card--legendary {
  --mbx-rarity-slot:url(/images/mystery-box/rarity-slots/slot-legendary-v6-142x233.png)
}
.mbx__roulette .mbx__card:before,.mbx__roulette .mbx__card:after {
  content:none
}
.mbx__roulette .mbx__card .mbx-art-slot,.mbx__roulette .mbx__card .mbx-art-slot--lg {
  z-index:1;
  width:72px;
  min-width:72px;
  max-width:72px;
  height:82px;
  min-height:82px;
  max-height:82px;
  box-shadow:none;
  background:0 0;
  border:0;
  border-radius:0;
  margin:0;
  padding:0;
  position:absolute;
  top:57px;
  left:50%;
  overflow:hidden;
  transform:translate(-50%)
}
.mbx__roulette .mbx__card .mbx-art-slot .mbx-art--lg,.mbx__roulette .mbx__card .mbx-art-slot .item-icon,.mbx__roulette .mbx__card .mbx-art-slot .item-icon--wing {
  object-fit:contain;
  object-position:center;
  filter:none;
  background:0 0;
  border:0;
  border-radius:0;
  width:100%;
  max-width:100%;
  height:100%;
  max-height:100%;
  margin:0
}
.mbx__roulette .mbx__card .mbx-art-slot .mbx-art {
  image-rendering:auto;
  -ms-interpolation-mode:bicubic
}
.mbx__roulette .mbx__card .mbx-art-slot .item-icon {
  image-rendering:pixelated;
  image-rendering:crisp-edges
}
.mbx__roulette .mbx__card-title {
  z-index:2;
  color:#fafafa;
  text-align:center;
  text-overflow:clip;
  text-shadow:0 1px 4px #000;
  white-space:normal;
  align-content:center;
  place-items:center;
  width:auto;
  height:29px;
  margin:0;
  font-size:.62rem;
  font-weight:400;
  line-height:1.12;
  display:grid;
  position:absolute;
  bottom:18px;
  left:10px;
  right:10px;
  overflow:hidden
}
.mbx__roulette .mbx__card--land {
  z-index:2;
  box-shadow:none;
  filter:brightness(1.08);
  outline:none;
  transition:filter .22s ease-out;
  transform:none
}
.mbx__roulette.mbx__roulette--spinning .mbx__card--land {
  z-index:auto;
  box-shadow:none;
  filter:none;
  outline:none;
  transition:none;
  transform:none
}
.mbx__roulette .mbx__card,.mbx__roulette .mbx__card--common,.mbx__roulette .mbx__card--uncommon,.mbx__roulette .mbx__card--rare,.mbx__roulette .mbx__card--epic,.mbx__roulette .mbx__card--legendary {
  box-shadow:none;
  animation:none
}
.mbx-info-actions {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  width:min(100%,760px);
  margin:-8px auto 0;
  display:grid
}
.mbx-info-actions__button {
  color:#fff8e6;
  letter-spacing:.01em;
  border:1px solid #ffda748c;
  min-height:58px;
  font-family:Georgia,Times New Roman,serif;
  font-size:clamp(1.05rem,2vw,1.35rem);
  font-weight:700;
  transition:transform .18s,filter .18s,box-shadow .18s;
  box-shadow:inset 0 1px #ffffff29,0 10px 28px #0006
}
.mbx-info-actions__button--prizes {
  background:linear-gradient(135deg,#9b0828,#e3003f 55%,#85001e)
}
.mbx-info-actions__button--attention {
  background:linear-gradient(135deg,#073d9d,#0868ef 55%,#052b78)
}
.mbx-info-actions__button:hover {
  filter:brightness(1.12);
  transform:translateY(-2px);
  box-shadow:inset 0 1px #ffffff38,0 14px 32px #00000085
}
.mbx-info-actions__button:focus-visible,.mbx-info-modal button:focus-visible,.mbx-redemption-support:focus-visible {
  outline-offset:3px;
  outline:2px solid #ffe291
}
.mbx-info-modal {
  z-index:10050;
  place-items:center;
  width:100%;
  min-height:100vh;
  padding:24px;
  display:grid;
  position:absolute;
  left:0
}
.mbx-info-modal__backdrop {
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  background:#000000d1;
  border:0;
  position:fixed;
  inset:0
}
.mbx-info-modal__panel {
  background:linear-gradient(145deg,#1c1511fc,#0a0a0dfc);
  border:1px solid #d4a43bb8;
  width:min(820px,100%);
  position:relative;
  overflow:hidden;
  box-shadow:0 25px 80px #000000bf,0 0 32px #daa52d29
}
.mbx-info-modal__panel--attention {
  width:min(920px,100%)
}
.mbx-info-modal__head {
  background:linear-gradient(90deg,#5b2c07d1,#19110de6);
  border-bottom:1px solid #d4a43b80;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  min-height:68px;
  padding:15px 22px;
  display:flex
}
.mbx-info-modal__head h2 {
  color:#ffe39a;
  margin:0;
  font-family:Georgia,Times New Roman,serif;
  font-size:clamp(1.35rem,3vw,1.9rem)
}
.mbx-info-modal__close {
  color:#fff;
  background:0 0;
  border:0;
  width:42px;
  height:42px;
  font-size:2.25rem;
  line-height:1
}
.mbx-info-modal__content {
  color:#e8dfd2;
  padding:22px
}
.mbx-info-modal__intro {
  color:#cfc3b1;
  margin:0 0 16px
}
.mbx-prize-totals {
  border:1px solid #ffffff1a
}
.mbx-prize-totals__head,.mbx-prize-totals__row {
  grid-template-columns:minmax(0,1fr) 110px;
  align-items:center;
  display:grid
}
.mbx-prize-totals__head {
  color:#ffe39a;
  text-align:center;
  background:#854e1080;
  min-height:48px;
  font-weight:700
}
.mbx-prize-totals__head span,.mbx-prize-totals__row>strong {
  padding:10px 14px
}
.mbx-prize-totals__row {
  background:#ffffff06;
  border-top:1px solid #ffffff14;
  min-height:62px
}
.mbx-prize-totals__row>strong {
  color:#fff;
  border-left:1px solid #ffffff14;
  place-items:center;
  height:100%;
  font-size:1.05rem;
  display:grid
}
.mbx-prize-totals__item {
  align-items:center;
  gap:12px;
  min-width:0;
  padding:6px 14px;
  display:flex
}
.mbx-prize-totals__item>span:last-child {
  overflow-wrap:anywhere
}
.mbx-redemption-steps {
  gap:10px;
  margin:18px 0;
  padding-left:24px;
  display:grid
}
.mbx-redemption-deadline {
  color:#ffe39a;
  background:#e6b6421a;
  border-left:3px solid #e6b642;
  padding:13px 15px;
  font-weight:700
}
.mbx-redemption-choices-button,.mbx-redemption-support {
  color:#fff4d0;
  border:1px solid #e6b64299;
  justify-content:center;
  align-items:center;
  min-height:46px;
  padding:11px 18px;
  font-weight:700;
  text-decoration:none;
  display:inline-flex
}
.mbx-redemption-toolbar {
  flex-wrap:wrap;
  align-items:stretch;
  gap:10px;
  margin-top:16px;
  display:flex
}
.mbx-redemption-choices-button {
  background:#5c360fb8
}
.mbx-redemption-support {
  background:linear-gradient(135deg,#9d201e,#d84b36)
}
.mbx-redemption-choices {
  gap:10px;
  margin-top:14px;
  display:grid
}
.mbx-redemption-choices article {
  background:#ffffff09;
  border:1px solid #ffffff1a;
  padding:14px 16px
}
.mbx-redemption-choices h3,.mbx-redemption-choices p {
  margin:0 0 6px
}
.mbx-redemption-choices h3 {
  color:#f7c95c
}
.mbx-redemption-choices small {
  color:#beb3a5
}
.mbx-redemption-choices h4 {
  color:#ead6a4;
  margin:18px 0 9px;
  font-size:.92rem
}
.mbx-redemption-catalog,.mbx-redemption-option-list {
  margin:0;
  padding:0;
  list-style:none
}
.mbx-redemption-catalog--two-columns {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 10px;
  display:grid
}
.mbx-redemption-catalog li,.mbx-redemption-option-list li {
  background:#00000038;
  border:1px solid #ffffff13;
  padding:8px 10px
}
.mbx-redemption-catalog li {
  justify-content:space-between;
  align-items:center;
  gap:10px;
  display:flex
}
.mbx-redemption-catalog li>small {
  color:#d3aa52;
  flex:none
}
.mbx-redemption-class-legend {
  flex-wrap:wrap;
  gap:7px;
  display:flex
}
.mbx-redemption-class-legend span {
  color:#dfc77f;
  background:#d0a54212;
  border:1px solid #d0a54247;
  padding:5px 9px;
  font-size:.78rem;
  line-height:1.2
}
.mbx-redemption-option-list {
  gap:5px;
  display:grid
}
.mbx-redemption-option-list li:before {
  content:"◆";
  color:#d3aa52;
  margin-right:8px;
  font-size:.65em
}
.mbx-redemption-earring-options {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  display:grid
}
@media (max-width:640px) {
  .mbx-info-actions {
    grid-template-columns:1fr;
    gap:10px
  }
.mbx-info-modal {
    padding:10px
  }
.mbx-info-modal__content {
    padding:16px
  }
.mbx-redemption-catalog--two-columns,.mbx-redemption-earring-options {
    grid-template-columns:1fr
  }
.mbx-prize-totals__head,.mbx-prize-totals__row {
    grid-template-columns:minmax(0,1fr) 76px
  }
.mbx-prize-totals__item {
    gap:7px;
    padding-left:8px
  }

}
.mbx__roulette {
  isolation:isolate;
  padding:1.45rem 1.75rem 1.55rem
}
.mbx__roulette:after {
  content:"";
  z-index:7;
  pointer-events:none;
  background:url(/images/mystery-box/roulette-frame-v1.png?v=1) 50%/100% 100% no-repeat;
  position:absolute;
  inset:0
}
.mbx__roulette .mbx__track-mask {
  box-shadow:none;
  background:0 0;
  border:0;
  border-radius:0
}
.mbx__roulette--spinning .mbx__track-mask {
  box-shadow:none
}
.mbx__roulette .mbx__pointer-gem,.mbx__roulette .mbx__pointer-arrow {
  display:none
}
@media (max-width:640px) {
  .mbx__roulette {
    padding:1rem .75rem 1.1rem
  }

}
.guide-section {
  min-height:70vh
}
.guide-shell {
  grid-template-columns:260px minmax(0,1fr);
  gap:24px;
  padding-top:36px;
  padding-bottom:60px;
  display:grid
}
.guide-sidebar {
  background:#08080aeb;
  border:1px solid #c9a8603d;
  align-self:start;
  position:sticky;
  top:92px;
  box-shadow:0 18px 50px #00000061
}
.guide-sidebar__title {
  color:#f0cf77;
  border-bottom:1px solid #c9a86038;
  align-items:center;
  gap:10px;
  padding:17px 18px;
  font-family:Georgia,serif;
  font-size:1.15rem;
  font-weight:700;
  display:flex
}
.guide-sidebar nav {
  padding:8px;
  display:grid
}
.guide-sidebar nav a {
  color:#bfc0c5;
  border-left:2px solid #0000;
  grid-template-columns:22px minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  min-height:42px;
  padding:9px 10px;
  font-size:.83rem;
  text-decoration:none;
  transition:all .18s;
  display:grid
}
.guide-sidebar nav a:first-child {
  grid-template-columns:minmax(0,1fr)
}
.guide-sidebar nav a:hover,.guide-sidebar nav a.is-active {
  color:#ffe29b;
  background:linear-gradient(90deg,#a56f1633,#0000);
  border-left-color:#d7ad4d
}
.guide-sidebar nav small {
  color:#686a70
}
.guide-main {
  min-width:0
}
.guide-breadcrumb {
  color:#777a82;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
  font-size:.78rem;
  display:flex
}
.guide-breadcrumb a {
  color:#cba85a;
  text-decoration:none
}
.guide-breadcrumb strong {
  color:#d7d8dc;
  font-weight:500
}
.guide-content-panel {
  background:linear-gradient(145deg,#111216f7,#070709fa);
  border:1px solid #c9a86033;
  box-shadow:0 22px 70px #0000006b
}
.guide-home {
  padding:28px
}
.guide-kicker {
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:.72rem;
  font-weight:800;
  color:#d8ae4e!important;
  margin:0 0 7px!important
}
.guide-home>h2 {
  color:#fff;
  margin:0;
  font:700 clamp(1.65rem,3vw,2.35rem) Georgia,serif
}
.guide-home>p {
  color:#aeb0b7;
  max-width:760px
}
.guide-category-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:26px;
  display:grid
}
.guide-category-card {
  color:#fff;
  border:1px solid #ffffff14;
  min-height:230px;
  text-decoration:none;
  position:relative;
  overflow:hidden
}
.guide-category-card__image {
  filter:saturate(.7);
  background-position:50%;
  background-size:cover;
  transition:transform .35s,filter .35s;
  position:absolute;
  inset:0
}
.guide-category-card:after {
  content:"";
  background:linear-gradient(#0505071f,#050507f5 75%);
  position:absolute;
  inset:0
}
.guide-category-card__content {
  z-index:1;
  flex-direction:column;
  justify-content:flex-end;
  height:100%;
  padding:18px;
  display:flex;
  position:relative
}
.guide-category-card__icon {
  color:#f1c55c;
  font-size:1.4rem
}
.guide-category-card strong {
  margin-top:6px;
  font:700 1.05rem Georgia,serif
}
.guide-category-card small {
  color:#b3b4ba;
  margin-top:5px;
  line-height:1.45
}
.guide-category-card em {
  color:#d6ad52;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:10px;
  font-size:.7rem;
  font-style:normal
}
.guide-category-card:hover .guide-category-card__image {
  filter:saturate();
  transform:scale(1.06)
}
.guide-section-hero {
  background-position:50%;
  background-size:cover;
  align-items:flex-end;
  min-height:230px;
  padding:28px;
  display:flex;
  position:relative
}
.guide-section-hero:before {
  content:"";
  background:linear-gradient(90deg,#050507f5,#05050761);
  position:absolute;
  inset:0
}
.guide-section-hero>div {
  z-index:1;
  max-width:650px;
  position:relative
}
.guide-section-hero span {
  color:#efc660;
  font-size:1.5rem
}
.guide-section-hero p {
  color:#d6ad52;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin:5px 0;
  font-size:.7rem
}
.guide-section-hero h2 {
  color:#fff;
  margin:0;
  font:700 2rem Georgia,serif
}
.guide-section-hero small {
  color:#c6c7cc;
  margin-top:8px;
  font-size:.9rem;
  line-height:1.5;
  display:block
}
.guide-topic-grid {
  background:#ffffff0e;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  padding:1px;
  display:grid
}
.guide-topic-card {
  color:#fff;
  background:#101115;
  grid-template-columns:36px minmax(0,1fr) 18px;
  align-items:center;
  gap:10px;
  min-height:86px;
  padding:14px 16px;
  text-decoration:none;
  transition:all .18s;
  display:grid
}
.guide-topic-card>span {
  color:#6c6f78;
  font:700 .75rem Georgia,serif
}
.guide-topic-card div {
  gap:5px;
  display:grid
}
.guide-topic-card strong {
  font-size:.9rem
}
.guide-topic-card small {
  color:#8e9199;
  line-height:1.4
}
.guide-topic-card b {
  color:#cba24c;
  font-size:1.4rem
}
.guide-topic-card:hover {
  background:#17181d
}
.guide-topic-card:hover strong {
  color:#f1cb71
}
.guide-article {
  padding:0 30px 30px;
  overflow:hidden
}
.guide-article__cover {
  background-position:50%;
  background-size:cover;
  height:250px;
  margin:0 -30px 28px;
  position:relative
}
.guide-article__cover:after {
  content:"";
  background:linear-gradient(#08080a26,#101115);
  position:absolute;
  inset:0
}
.guide-article h1 {
  color:#fff;
  margin:0 0 18px;
  font:700 clamp(1.8rem,4vw,2.65rem) Georgia,serif
}
.guide-article>p {
  color:#babcc3;
  max-width:850px;
  line-height:1.75
}
.guide-callout {
  background:#9967161f;
  border-left:3px solid #d3a844;
  margin-top:26px;
  padding:17px 18px
}
.guide-callout strong {
  color:#f1cb72
}
.guide-callout p {
  color:#aaaeb6;
  margin:7px 0 0;
  line-height:1.55
}
.guide-article__nav {
  border-top:1px solid #ffffff14;
  justify-content:space-between;
  gap:12px;
  margin-top:30px;
  padding-top:18px;
  display:flex
}
.guide-article__nav a {
  color:#d7b15a;
  font-size:.82rem;
  text-decoration:none
}
@media (max-width:960px) {
  .guide-shell {
    grid-template-columns:1fr
  }
.guide-sidebar {
    position:static
  }
.guide-sidebar nav {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
.guide-sidebar nav a:first-child {
    grid-column:1/-1
  }
.guide-category-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}
@media (max-width:640px) {
  .guide-shell {
    padding-top:18px
  }
.guide-sidebar nav {
    grid-template-columns:1fr 1fr
  }
.guide-category-grid,.guide-topic-grid {
    grid-template-columns:1fr
  }
.guide-home {
    padding:18px
  }
.guide-section-hero {
    min-height:200px;
    padding:20px
  }
.guide-article {
    padding:0 18px 22px
  }
.guide-article__cover {
    height:190px;
    margin:0 -18px 22px
  }
.guide-article__nav {
    flex-direction:column
  }

}
.journey-shell {
  background:linear-gradient(#121417fa,#07090bfa);
  border:1px solid #c3963773;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 22px 65px #0000008c
}
.journey-character-bar {
  background:linear-gradient(90deg,#1b1f23fa,#0f1314f0);
  border-bottom:1px solid #cc9d3c52;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  padding:16px 20px;
  display:flex
}
.journey-character-current {
  align-items:center;
  gap:12px;
  min-width:225px;
  display:flex
}
.journey-character-current__portrait {
  background:#080b0c;
  border:2px solid #d6aa4c;
  border-radius:50%;
  width:64px;
  height:64px;
  overflow:hidden;
  box-shadow:0 0 0 4px #d6aa4c1a,0 0 24px #d6aa4c38
}
.journey-character-current__portrait img,.journey-character-list img {
  object-fit:cover;
  object-position:center 18%;
  width:100%;
  height:100%
}
.journey-character-current>span:last-child {
  display:grid
}
.journey-character-current small {
  color:#bda66e;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.68rem
}
.journey-character-current strong {
  color:#f6dfa2;
  font:700 1.15rem Georgia,serif
}
.journey-character-current em {
  color:#87cfad;
  font-size:.75rem;
  font-style:normal
}
.journey-character-list {
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  padding:5px;
  display:flex;
  overflow:visible
}
.journey-character-list button {
  color:#aaa;
  cursor:pointer;
  background:#101316;
  border:1px solid #9a896047;
  border-radius:6px;
  grid-template-rows:48px auto;
  gap:4px;
  width:62px;
  padding:4px;
  transition:all .2s;
  display:grid
}
.journey-character-list button:hover,.journey-character-list button.is-active {
  color:#f4d98f;
  border-color:#d2a745;
  transform:translateY(-2px);
  box-shadow:0 0 18px #d6a64133
}
.journey-character-list button img,.journey-character-list button b {
  background:#080a0c;
  border-radius:4px
}
.journey-character-list button span {
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.6rem;
  overflow:hidden
}
.panel-shell:has(.journey-shell) {
  width:auto;
  max-width:none;
  margin-left:max(16px,50vw - 600px);
  margin-right:16px;
  padding-left:16px;
  padding-right:0
}
@media (min-width:1024px) {
  .panel-shell__grid:has(.journey-shell) {
    grid-template-columns:240px minmax(0,1fr);
    gap:14px
  }

}
.journey-board-wrap {
  padding:15px;
  overflow:visible
}
.journey-board {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  min-width:0;
  display:grid
}
.journey-tree {
  --journey-tone:#5a9ce8;
  border:1px solid var(--journey-tone);
  min-height:620px;
  position:relative;
  overflow:hidden
}
@supports (color:color-mix(in lab, red, red)) {
  .journey-tree {
    border:1px solid color-mix(in srgb,var(--journey-tone) 36%,#433a2c)
  }

}
.journey-tree {
  background:radial-gradient(circle at 50% 30%,var(--journey-tone),transparent 45%),linear-gradient(180deg,#10151a,#080b0e)
}
@supports (color:color-mix(in lab, red, red)) {
  .journey-tree {
    background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--journey-tone) 13%,transparent),transparent 45%),linear-gradient(180deg,#10151a,#080b0e)
  }

}
.journey-tree--green {
  --journey-tone:#54c579
}
.journey-tree--red {
  --journey-tone:#db5e58
}
.journey-tree--gold {
  --journey-tone:#e6b73e
}
.journey-tree header {
  z-index:2;
  text-align:center;
  border-bottom:1px solid var(--journey-tone);
  gap:3px;
  padding:13px 8px;
  display:grid;
  position:relative
}
@supports (color:color-mix(in lab, red, red)) {
  .journey-tree header {
    border-bottom:1px solid color-mix(in srgb,var(--journey-tone) 42%,transparent)
  }

}
.journey-tree header {
  background:linear-gradient(#262928e6,#0d0f11eb)
}
.journey-tree header strong {
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--journey-tone);
  font:700 1.05rem Georgia,serif
}
.journey-tree header span {
  color:#bbb;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.66rem
}
.journey-tree__path {
  background:linear-gradient(180deg,var(--journey-tone) 0 72%,#444 72%);
  width:2px;
  box-shadow:0 0 12px var(--journey-tone);
  position:absolute;
  top:92px;
  bottom:48px;
  left:32%
}
@supports (color:color-mix(in lab, red, red)) {
  .journey-tree__path {
    box-shadow:0 0 12px color-mix(in srgb,var(--journey-tone) 75%,transparent)
  }

}
.journey-tree__nodes {
  z-index:2;
  align-content:space-around;
  min-height:548px;
  padding:16px 12px;
  display:grid;
  position:relative
}
.journey-node {
  grid-template-columns:76px 1fr;
  align-items:center;
  min-height:112px;
  display:grid;
  position:relative
}
.journey-node__main {
  justify-items:center;
  gap:3px;
  display:grid
}
.journey-node__level {
  color:#ddd;
  font:700 .68rem Georgia,serif
}
.journey-insignia {
  width:84px;
  height:84px;
  filter:drop-shadow(0 0 13px var(--journey-tone));
  place-items:center;
  transition:all .2s;
  display:grid;
  position:relative
}
@supports (color:color-mix(in lab, red, red)) {
  .journey-insignia {
    filter:drop-shadow(0 0 13px color-mix(in srgb,var(--journey-tone) 40%,transparent))
  }

}
.journey-insignia__art {
  background-position:50%;
  background-repeat:no-repeat;
  background-size:contain;
  position:absolute;
  inset:0
}
.journey-insignia.is-unlocked {
  color:var(--journey-tone)
}
.journey-insignia.is-locked .journey-insignia__art {
  filter:grayscale()brightness(.27);
  opacity:.72
}
.journey-insignia__lock {
  z-index:2;
  color:#8d8d8d;
  background:#070707e6;
  border:1px solid #6f6f6f;
  border-radius:50%;
  place-items:center;
  width:25px;
  height:25px;
  font-size:.65rem;
  display:grid;
  position:absolute;
  box-shadow:0 2px 8px #000
}
.journey-node__connector {
  height:1px;
  color:var(--journey-tone);
  background:currentColor;
  position:absolute;
  left:72px;
  right:calc(100% - 118px);
  box-shadow:0 0 8px
}
.journey-node.is-locked .journey-node__connector {
  color:#3d4143
}
.journey-reward {
  border:1px solid var(--journey-tone);
  grid-template-columns:25px 1fr;
  justify-self:end;
  align-items:center;
  width:112px;
  min-height:48px;
  padding:7px;
  display:grid
}
@supports (color:color-mix(in lab, red, red)) {
  .journey-reward {
    border:1px solid color-mix(in srgb,var(--journey-tone) 44%,#4b463d)
  }

}
.journey-reward {
  color:#baa86f;
  text-align:left;
  background:linear-gradient(135deg,#1e1c18,#0c0e10);
  border-radius:5px
}
.journey-reward span {
  color:var(--journey-tone);
  font-size:1.15rem
}
.journey-reward small {
  font-size:.6rem;
  line-height:1.15
}
.journey-footer {
  color:#afafaf;
  background:#0d1012;
  border-top:1px solid #be91374d;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  display:grid
}
.journey-footer>span {
  color:#e3b74d
}
.journey-footer p {
  text-align:center;
  margin:0;
  font-size:.76rem
}
.journey-footer strong {
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#d7b75e;
  font-size:.68rem
}
@media (max-width:1250px) {
  .journey-board {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}
@media (max-width:760px) {
  .journey-character-bar {
    flex-direction:column;
    align-items:flex-start
  }
.journey-character-list {
    justify-content:flex-start;
    max-width:100%
  }
.journey-board {
    grid-template-columns:1fr
  }
.journey-footer {
    grid-template-columns:auto 1fr
  }
.journey-footer strong {
    display:none
  }

}
.panel-shell:has(.journey-shell) {
  overflow:visible
}
.journey-shell {
  background:linear-gradient(#070a0ce6,#040608f5),radial-gradient(circle at 50% 0,#ac792624,#0000 42%);
  border:1px solid #8b672d;
  border-radius:2px;
  position:relative;
  box-shadow:inset 0 0 0 3px #090b0d,inset 0 0 0 4px #b3843447,0 24px 70px #000000b3
}
.journey-shell:before,.journey-shell:after {
  content:"◆";
  z-index:5;
  color:#d2a64d;
  text-shadow:0 0 12px #d6982d;
  font-size:1.05rem;
  position:absolute;
  top:-11px
}
.journey-shell:before {
  left:-7px
}
.journey-shell:after {
  right:-7px
}
.journey-character-bar {
  background:linear-gradient(#12171afa,#070a0cf5);
  border-bottom:1px solid #765727;
  grid-template-columns:minmax(330px,1fr) auto auto;
  gap:18px;
  min-height:100px;
  padding:12px 22px;
  display:grid;
  box-shadow:inset 0 -5px 18px #0000008c
}
.journey-heading {
  align-content:center;
  gap:4px;
  min-width:0;
  display:grid
}
.journey-heading strong {
  color:#e9c879;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-shadow:0 2px 2px #000,0 0 16px #e1a93e29;
  font:500 clamp(1.55rem,2.5vw,2.45rem) Georgia,serif
}
.journey-heading span {
  color:#8f8a7d;
  font:.76rem/1.4 Georgia,serif
}
.journey-character-current {
  border-right:1px solid #c091373d;
  min-width:220px;
  padding-right:16px
}
.journey-character-current__portrait {
  border:2px solid #d5ab56;
  width:76px;
  height:76px;
  box-shadow:0 0 0 4px #17130c,0 0 24px #efb84380
}
.journey-character-list {
  flex-wrap:nowrap;
  justify-content:flex-start;
  max-width:390px;
  padding:4px;
  overflow:visible
}
.journey-character-list button {
  background:#0b0d0e;
  border-radius:50% 50% 8px 8px;
  grid-template-rows:52px auto;
  width:60px
}
.journey-character-list button img,.journey-character-list button b {
  border-radius:50%
}
.journey-board-wrap {
  padding:14px 16px 16px
}
.journey-board {
  gap:8px
}
.journey-tree {
  background:radial-gradient(ellipse at 38% 32%,var(--journey-tone),transparent 52%), linear-gradient(110deg,#ffffff05,transparent 35%), #080d10;
  border:1px solid #70552d;
  border-radius:2px;
  min-height:670px
}
@supports (color:color-mix(in lab, red, red)) {
  .journey-tree {
    background:radial-gradient(ellipse at 38% 32%,color-mix(in srgb,var(--journey-tone) 14%,transparent),transparent 52%), linear-gradient(110deg,#ffffff05,transparent 35%), #080d10
  }

}
.journey-tree {
  box-shadow:inset 0 0 0 3px #000000bf,inset 0 0 0 4px #c7973f26,inset 0 0 42px #000
}
.journey-tree:before,.journey-tree:after {
  content:"";
  z-index:4;
  opacity:.75;
  border-color:#a37b37;
  width:23px;
  height:23px;
  position:absolute
}
.journey-tree:before {
  border-top:2px solid;
  border-left:2px solid;
  top:5px;
  left:5px
}
.journey-tree:after {
  border-bottom:2px solid;
  border-right:2px solid;
  bottom:5px;
  right:5px
}
.journey-tree header {
  background:linear-gradient(#1f2221ed,#090c0ef2);
  border-bottom:1px solid #6c522c;
  min-height:62px;
  padding:11px 6px;
  box-shadow:inset 0 -1px #dca9471f
}
.journey-tree header strong {
  text-shadow:0 1px #000,0 0 14px var(--journey-tone);
  font-size:clamp(.9rem,1.2vw,1.12rem)
}
@supports (color:color-mix(in lab, red, red)) {
  .journey-tree header strong {
    text-shadow:0 1px #000,0 0 14px color-mix(in srgb,var(--journey-tone) 38%,transparent)
  }

}
.journey-tree header span {
  color:#c2b9a8
}
.journey-tree__path {
  background:linear-gradient(180deg,var(--journey-tone) 0 78%,#6b6b68 78%);
  width:2px;
  box-shadow:0 0 7px var(--journey-tone),0 0 18px var(--journey-tone);
  top:92px;
  bottom:45px;
  left:91px
}
@supports (color:color-mix(in lab, red, red)) {
  .journey-tree__path {
    box-shadow:0 0 7px var(--journey-tone),0 0 18px color-mix(in srgb,var(--journey-tone) 35%,transparent)
  }

}
.journey-tree__nodes {
  grid-template-rows:repeat(5,minmax(0,1fr));
  align-content:stretch;
  min-height:602px;
  padding:10px 8px 12px
}
.journey-node {
  grid-template-columns:104px minmax(0,1fr);
  min-height:0
}
.journey-node__main {
  z-index:3;
  gap:0;
  position:relative
}
.journey-node__level {
  color:#ddd;
  text-shadow:0 1px 3px #000;
  margin-top:-4px;
  font-size:.66rem
}
.journey-insignia {
  width:90px;
  height:90px;
  filter:drop-shadow(0 0 7px #000) drop-shadow(0 0 10px var(--journey-tone))
}
@supports (color:color-mix(in lab, red, red)) {
  .journey-insignia {
    filter:drop-shadow(0 0 7px #000) drop-shadow(0 0 10px color-mix(in srgb,var(--journey-tone) 48%,transparent))
  }

}
.journey-insignia:after {
  content:"";
  border:1px solid var(--journey-tone);
  position:absolute;
  inset:7px
}
@supports (color:color-mix(in lab, red, red)) {
  .journey-insignia:after {
    border:1px solid color-mix(in srgb,var(--journey-tone) 60%,#8b6d39)
  }

}
.journey-insignia:after {
  box-shadow:inset 0 0 13px var(--journey-tone),0 0 9px var(--journey-tone);
  border-radius:50%
}
@supports (color:color-mix(in lab, red, red)) {
  .journey-insignia:after {
    box-shadow:inset 0 0 13px color-mix(in srgb,var(--journey-tone) 52%,transparent),0 0 9px color-mix(in srgb,var(--journey-tone) 55%,transparent)
  }

}
.journey-insignia__art {
  z-index:1
}
.journey-insignia__lock {
  z-index:3
}
.journey-node__connector {
  z-index:1;
  opacity:.9;
  background:0 0;
  border-top:2px solid;
  border-right:2px solid;
  border-radius:0 22px 0 0;
  height:29px;
  left:91px;
  right:42px;
  box-shadow:0 -2px 7px
}
@supports (color:color-mix(in lab, red, red)) {
  .journey-node__connector {
    box-shadow:0 -2px 7px color-mix(in srgb,currentColor 55%,transparent)
  }

}
.journey-node__connector:before {
  content:"◆";
  color:currentColor;
  text-shadow:0 0 8px;
  font-size:.65rem;
  position:absolute;
  top:-9px;
  left:45%
}
.journey-reward {
  z-index:2;
  filter:none;
  background:radial-gradient(circle,#242015,#090b0d 72%);
  border:1px solid #8b692d;
  border-radius:50%;
  justify-self:end;
  place-items:center;
  width:64px;
  height:64px;
  min-height:0;
  padding:3px;
  display:grid;
  position:relative
}
.journey-reward img {
  object-fit:contain;
  filter:sepia(.18)brightness(.72);
  width:54px;
  height:54px
}
.journey-reward small {
  color:#af9b73;
  white-space:nowrap;
  background:#080a0b;
  padding:2px 5px;
  font-size:.52rem;
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%,-5px)
}
.journey-node.is-locked .journey-reward {
  filter:grayscale()brightness(.42);
  opacity:.72
}
.journey-reward.is-available {
  border-color:var(--journey-tone)
}
@supports (color:color-mix(in lab, red, red)) {
  .journey-reward.is-available {
    border-color:color-mix(in srgb,var(--journey-tone) 62%,#b58b3e)
  }

}
.journey-reward.is-available {
  box-shadow:0 0 12px var(--journey-tone)
}
@supports (color:color-mix(in lab, red, red)) {
  .journey-reward.is-available {
    box-shadow:0 0 12px color-mix(in srgb,var(--journey-tone) 35%,transparent)
  }

}
.journey-node:nth-child(4) .journey-reward.is-available {
  background:linear-gradient(#3b2a13,#171009);
  border-radius:3px;
  width:105px;
  height:38px;
  box-shadow:inset 0 0 0 2px #0c0b08,0 0 13px #e5ad3759
}
.journey-node:nth-child(4) .journey-reward.is-available img {
  display:none
}
.journey-node:nth-child(4) .journey-reward.is-available small {
  color:#e7bd5b;
  text-transform:uppercase;
  background:0 0;
  font:700 .63rem Georgia,serif;
  position:static;
  transform:none
}
.journey-node--future {
  opacity:.78
}
.journey-node--future .journey-insignia {
  filter:grayscale()brightness(.35)
}
.journey-footer {
  background:linear-gradient(#111518,#07090b);
  border-top:1px solid #765727;
  min-height:58px;
  box-shadow:inset 0 4px 16px #00000080
}
.journey-footer p {
  color:#a79d89;
  font:500 .8rem Georgia,serif
}
.journey-footer strong {
  color:#d8b666;
  background:#18130c;
  border:1px solid #795b29;
  padding:8px 13px
}
@media (max-width:1360px) {
  .journey-character-bar {
    grid-template-columns:1fr auto
  }
.journey-heading {
    grid-column:1/-1
  }
.journey-character-list {
    max-width:100%
  }

}
@media (max-width:1250px) {
  .journey-board {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
.journey-tree {
    min-height:650px
  }

}
@media (max-width:760px) {
  .journey-character-bar {
    display:flex
  }
.journey-heading strong {
    font-size:1.4rem
  }
.journey-character-current {
    border-right:0
  }
.journey-character-list {
    flex-wrap:wrap
  }
.journey-board {
    grid-template-columns:1fr
  }

}
@media (min-width:1001px) {
  .journey-shell {
    aspect-ratio:1672/941;
    background:#05080a url(/images/journey/journey-frame-approved-v1.png) 50%/100% 100% no-repeat;
    border:0;
    border-radius:0;
    min-height:0;
    overflow:hidden;
    box-shadow:0 24px 80px #000000bf
  }
.journey-shell:before,.journey-shell:after {
    display:none
  }
.journey-character-bar {
    z-index:8;
    clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%);
    background:linear-gradient(#111619fc,#06090bfc);
    border:1px solid #b7843080;
    grid-template-columns:minmax(210px,1fr) auto;
    width:44%;
    min-width:560px;
    min-height:92px;
    padding:8px 12px;
    display:grid;
    position:absolute;
    top:10px;
    right:17px;
    box-shadow:inset 0 0 0 3px #090b0d,inset 0 0 0 4px #c4933938,0 8px 28px #000
  }
.journey-heading {
    display:none
  }
.journey-character-current {
    min-width:0;
    padding-right:10px
  }
.journey-character-current__portrait {
    width:68px;
    height:68px
  }
.journey-character-current strong {
    font-size:1rem
  }
.journey-character-current em {
    font-size:.67rem
  }
.journey-character-list {
    gap:5px;
    max-width:300px
  }
.journey-character-list button {
    grid-template-rows:46px auto;
    width:52px;
    padding:3px
  }
.journey-character-list button span {
    font-size:.52rem
  }
.journey-board-wrap {
    z-index:3;
    opacity:0;
    pointer-events:none;
    padding:0;
    position:absolute;
    inset:13.6% 1.7% 12.1%
  }
.journey-footer {
    opacity:0;
    pointer-events:none;
    height:9%;
    position:absolute;
    inset:auto 1.2% 1.5%
  }
.journey-character-bar {
    grid-template-columns:220px 489px;
    width:743px
  }
.journey-character-list {
    grid-auto-columns:44px;
    grid-auto-flow:column;
    gap:5px;
    width:489px;
    min-width:489px;
    display:grid;
    overflow:visible
  }
.journey-character-list button {
    width:44px;
    min-width:44px;
    height:44px
  }
.journey-tree__path {
    background:linear-gradient(180deg,transparent 0,var(--journey-tone) 5% 79%,#34393b 92%,transparent);
    border-radius:999px;
    width:3px;
    left:91px
  }
@supports (color:color-mix(in lab, red, red)) {
    .journey-tree__path {
      background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--journey-tone) 78%,#fff) 5% 79%,#34393b 92%,transparent)
    }

  }
.journey-tree__path {
    box-shadow:0 0 5px var(--journey-tone),0 0 16px var(--journey-tone)
  }
@supports (color:color-mix(in lab, red, red)) {
    .journey-tree__path {
      box-shadow:0 0 5px var(--journey-tone),0 0 16px color-mix(in srgb,var(--journey-tone) 38%,transparent)
    }

  }
.journey-node__connector {
    opacity:.92;
    height:42px;
    box-shadow:none;
    filter:drop-shadow(0 0 4px);
    background:0 0;
    border:0;
    border-top:2px solid;
    border-radius:50% 50% 0 0;
    left:91px;
    right:42px;
    transform:translateY(-20px)
  }
.journey-node__connector:before {
    content:"◆";
    color:currentColor;
    text-shadow:0 0 8px;
    font-size:.62rem;
    top:-9px;
    left:51%
  }
.journey-node__connector:after {
    content:"";
    opacity:.82;
    border-top:2px solid;
    border-right:2px solid;
    border-radius:0 18px 0 0;
    width:22px;
    height:22px;
    position:absolute;
    top:17px;
    right:-1px
  }
.journey-node.is-locked .journey-node__connector {
    color:#5a6062;
    opacity:.42;
    filter:none
  }
.journey-reward {
    background:radial-gradient(circle at 50% 45%,#302719 0,#111415 64%,#050708 100%);
    width:70px;
    height:70px;
    padding:1px;
    overflow:visible;
    box-shadow:inset 0 0 0 3px #07090a,inset 0 0 13px #daaa482e,0 0 8px #000c
  }
.journey-reward img {
    object-fit:contain;
    object-position:center;
    filter:sepia(.12)brightness(.9)drop-shadow(0 2px 4px #000);
    width:64px;
    height:64px;
    margin:auto;
    display:block;
    transform:none
  }
.journey-node.is-locked .journey-insignia {
    opacity:1;
    filter:grayscale()saturate(0)brightness(.72)contrast(1.08)drop-shadow(0 2px 5px #000)
  }
.journey-node.is-locked .journey-insignia__art {
    opacity:.82
  }
.journey-insignia__lock {
    z-index:5;
    background:linear-gradient(#25292b,#0b0d0e);
    border:1px solid #85898b;
    border-radius:4px;
    width:27px;
    height:23px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-42%);
    box-shadow:0 2px 7px #000,inset 0 0 0 1px #08090a
  }
.journey-insignia__lock:before {
    content:"";
    box-sizing:border-box;
    border:3px solid #85898b;
    border-bottom:0;
    border-radius:9px 9px 0 0;
    width:13px;
    height:15px;
    position:absolute;
    top:-13px;
    left:6px
  }
.journey-insignia__lock:after {
    content:"";
    background:#a7abad;
    border-radius:50% 50% 2px 2px;
    width:5px;
    height:8px;
    position:absolute;
    top:7px;
    left:11px;
    box-shadow:0 0 5px #000
  }
.journey-node--future {
    opacity:1
  }
.journey-node--future .journey-insignia {
    opacity:1;
    filter:grayscale()saturate(0)brightness(.66)contrast(1.1)drop-shadow(0 2px 5px #000)
  }

}
.panel-shell:has(.journey-shell) {
  width:calc(100% - 32px);
  max-width:none;
  margin:0 auto;
  padding-left:0;
  padding-right:0;
  overflow:visible
}
.panel-shell__content:has(.journey-shell)>.panel-shell__header {
  display:none
}
@media (min-width:1001px) {
  .panel-shell__grid:has(.journey-shell) {
    grid-template-columns:240px minmax(0,1fr);
    gap:14px
  }
.journey-shell {
    width:100%;
    max-width:100%;
    margin:0
  }
.journey-character-bar {
    width:42%;
    min-width:0;
    min-height:9.2%;
    top:1.1%;
    right:1.7%
  }
.journey-insignia:after {
    display:none
  }
.journey-shell {
    background-image:url(/images/journey/journey-frame-empty-v2.png)
  }
.journey-board-wrap {
    opacity:1;
    pointer-events:none;
    inset:20.3% 1.75% 12.7%
  }
.journey-board,.journey-tree {
    height:100%;
    min-height:0
  }
.journey-tree {
    box-shadow:none;
    background:0 0;
    border:0;
    overflow:visible
  }
.journey-tree:before,.journey-tree:after,.journey-tree header {
    display:none
  }
.journey-tree__path {
    top:12px;
    bottom:18px
  }
.journey-tree__nodes {
    height:100%;
    min-height:0;
    padding:2px 8px 4px
  }
.journey-footer {
    opacity:1;
    width:240px;
    height:6.5%;
    min-height:0;
    box-shadow:none;
    pointer-events:none;
    background:0 0;
    border:0;
    place-items:center;
    display:grid;
    bottom:2.5%;
    left:auto;
    right:2.7%
  }
.journey-footer>span,.journey-footer p {
    display:none
  }
.journey-footer strong {
    color:#cfaa59;
    text-align:center;
    background:0 0;
    border:0;
    padding:6px 12px;
    font-size:.58rem;
    display:block
  }
.journey-node.is-unlocked .journey-insignia__art {
    filter:grayscale(.2)sepia()saturate(2.45)hue-rotate(352deg)brightness(1.12)contrast(1.08);
    opacity:1
  }
.journey-node.is-unlocked .journey-insignia {
    filter:drop-shadow(0 2px 5px #000)drop-shadow(0 0 7px #e7b842)drop-shadow(0 0 14px #e7b8426b)
  }
.journey-node.is-locked .journey-insignia__art,.journey-node--future .journey-insignia__art {
    filter:grayscale()saturate(0)brightness(.82)contrast(1.08);
    opacity:.9
  }
.journey-reward.is-available {
    border-color:var(--journey-tone)
  }
@supports (color:color-mix(in lab, red, red)) {
    .journey-reward.is-available {
      border-color:color-mix(in srgb,var(--journey-tone) 82%,#f5d68a)
    }

  }
.journey-reward.is-available {
    box-shadow:inset 0 0 0 3px #07090a,inset 0 0 18px var(--journey-tone),0 0 8px var(--journey-tone),0 0 22px var(--journey-tone)
  }
@supports (color:color-mix(in lab, red, red)) {
    .journey-reward.is-available {
      box-shadow:inset 0 0 0 3px #07090a,inset 0 0 18px color-mix(in srgb,var(--journey-tone) 38%,transparent),0 0 8px var(--journey-tone),0 0 22px color-mix(in srgb,var(--journey-tone) 58%,transparent)
    }

  }
.journey-reward.is-available img {
    filter:brightness(1.08) saturate(1.12) drop-shadow(0 2px 4px #000) drop-shadow(0 0 6px var(--journey-tone))
  }
@supports (color:color-mix(in lab, red, red)) {
    .journey-reward.is-available img {
      filter:brightness(1.08) saturate(1.12) drop-shadow(0 2px 4px #000) drop-shadow(0 0 6px color-mix(in srgb,var(--journey-tone) 55%,transparent))
    }

  }
.journey-character-bar {
    clip-path:polygon(2.5% 0,97% 0,100% 50%,97% 100%,2.5% 100%,0 50%);
    background:linear-gradient(90deg,#080c0efa,#0b0f11eb 74%,#05080afa);
    border:0;
    border-radius:0;
    grid-template-columns:minmax(220px,240px) minmax(0,1fr);
    gap:10px;
    width:43.5%;
    height:9.7%;
    min-height:0;
    padding:5px 15px 5px 9px;
    top:1.1%;
    right:1.8%;
    box-shadow:inset 0 1px #e4b95b7a,inset 0 -1px #845b1fb3,0 7px 18px #000000b8
  }
.journey-character-current {
    border-right:1px solid #c6973d52;
    gap:10px;
    min-width:0;
    height:100%;
    padding-right:12px
  }
.journey-character-current__portrait {
    border:2px solid #d9ae4f;
    flex:none;
    width:68px;
    height:68px;
    box-shadow:0 0 0 4px #17130c,0 0 0 5px #d9ae4f80,0 0 22px #efb8437a
  }
.journey-character-current>span:last-child {
    min-width:0
  }
.journey-character-current small {
    letter-spacing:.12em;
    font-size:.62rem
  }
.journey-character-current strong {
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:1.05rem;
    overflow:hidden
  }
.journey-character-current em {
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.62rem;
    overflow:hidden
  }
.journey-character-list {
    grid-auto-columns:minmax(34px,1fr);
    grid-auto-flow:column;
    gap:5px;
    width:100%;
    max-width:none;
    height:100%;
    padding:6px 0;
    display:grid;
    overflow:hidden
  }
.journey-character-list button {
    background:radial-gradient(circle,#1b1d1d,#080a0b 72%);
    border:1px solid #a28b5759;
    border-radius:50%;
    grid-template-rows:minmax(0,1fr);
    width:auto;
    min-width:0;
    height:100%;
    padding:2px;
    display:grid
  }
.journey-character-list button img,.journey-character-list button b {
    object-position:center 16%;
    border-radius:50%;
    width:100%;
    height:100%
  }
.journey-character-list button span {
    display:none
  }
.journey-character-list button:hover,.journey-character-list button.is-active {
    border-color:#e5b84c;
    transform:none;
    box-shadow:0 0 0 2px #171109,0 0 14px #e5b84c8c
  }

}
.journey-back {
  z-index:12;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
  color:#dfbd6b;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:linear-gradient(#302312f5,#110d09fa);
  border:1px solid #80602d;
  justify-content:center;
  align-items:center;
  padding:7px 14px;
  font:700 .62rem Georgia,serif;
  transition:all .18s;
  display:inline-flex;
  position:absolute;
  top:11.2%;
  left:2.2%;
  box-shadow:inset 0 0 0 2px #090a0b,0 0 14px #d29f3b24
}
.journey-back:hover {
  color:#ffe1a0;
  border-color:#d6a94b;
  box-shadow:inset 0 0 0 2px #090a0b,0 0 18px #e0ab3f61
}
@media (min-width:1001px) {
  .panel-shell__grid:has(.journey-shell) {
    display:block
  }
.panel-shell__grid:has(.journey-shell)>.panel-sidebar-stack {
    display:none
  }
.panel-shell__content:has(.journey-shell) {
    width:100%;
    max-width:none;
    margin:0 auto
  }

}
@keyframes journey-energy-run {
  0% {
    opacity:0;
    left:2%;
    transform:translate(-50%,7px)scale(.45)
  }
12% {
    opacity:1
  }
50% {
    transform:translate(-50%,-10px)scale(1)
  }
88% {
    opacity:1
  }
to {
    opacity:0;
    left:88%;
    transform:translate(-50%,7px)scale(.45)
  }

}
@keyframes journey-energy-breathe {
  0%,to {
    opacity:.56
  }
50% {
    opacity:1
  }

}
@media (min-width:1001px) {
  .journey-node__spark {
    z-index:3;
    pointer-events:none;
    background:#fff;
    border-radius:50%;
    width:7px;
    height:7px;
    animation:3.4s ease-in-out infinite journey-energy-run;
    display:block;
    position:absolute;
    top:-3px;
    left:2%;
    box-shadow:0 0 4px #fff,0 0 9px,0 0 18px,0 0 30px
  }
.journey-node:nth-child(2) .journey-node__spark {
    animation-delay:-.85s
  }
.journey-node:nth-child(3) .journey-node__spark {
    animation-delay:-1.7s
  }
.journey-node:nth-child(4) .journey-node__spark {
    animation-delay:-2.55s
  }
.journey-tree__path {
    animation:2.8s ease-in-out infinite journey-energy-breathe
  }
.journey-node.is-locked .journey-node__spark {
    display:none
  }

}
@media (prefers-reduced-motion:reduce) {
  .journey-node__spark,.journey-tree__path {
    animation:none!important
  }

}
@media (min-width:1001px) {
  .panel-shell:has(.journey-shell) {
    width:min(1500px,100% - 56px);
    margin-inline:auto
  }
.journey-node {
    grid-template-columns:108px minmax(0,1fr)
  }
.journey-tree__path {
    width:2px;
    left:94px
  }
.journey-node__connector {
    opacity:.82;
    filter:none;
    background:linear-gradient(90deg,currentColor 0 47%,#ffffffeb 50%,currentColor 53% 100%);
    border:0;
    border-radius:0;
    height:2px;
    left:94px;
    right:42px;
    transform:none;
    box-shadow:0 0 5px
  }
.journey-node__connector:before {
    content:"◆";
    color:currentColor;
    text-shadow:0 0 8px;
    font-size:.68rem;
    top:-8px;
    left:49%
  }
.journey-node__connector:after {
    display:none
  }
.journey-node__spark {
    animation-name:journey-energy-run-straight;
    top:-3px
  }
.journey-node.is-unlocked .journey-insignia__art {
    filter:none;
    opacity:1
  }
.journey-node.is-unlocked .journey-insignia {
    filter:drop-shadow(0 2px 5px #000) drop-shadow(0 0 9px var(--journey-tone))
  }
@supports (color:color-mix(in lab, red, red)) {
    .journey-node.is-unlocked .journey-insignia {
      filter:drop-shadow(0 2px 5px #000) drop-shadow(0 0 9px color-mix(in srgb,var(--journey-tone) 55%,transparent))
    }

  }
.journey-node.is-complete .journey-insignia {
    filter:drop-shadow(0 2px 5px #000)drop-shadow(0 0 7px #e7b842)drop-shadow(0 0 16px #e7b84294)
  }
.journey-node.is-complete .journey-insignia:before {
    content:"";
    z-index:2;
    pointer-events:none;
    border:2px solid #f4ca66;
    border-radius:50%;
    position:absolute;
    inset:5px;
    box-shadow:inset 0 0 10px #f1b92c,0 0 11px #e7ac29
  }
.journey-reward,.journey-reward:disabled {
    opacity:1;
    border:1px solid var(--journey-tone);
    width:78px;
    height:78px;
    padding:0
  }
@supports (color:color-mix(in lab, red, red)) {
    .journey-reward,.journey-reward:disabled {
      border:1px solid color-mix(in srgb,var(--journey-tone) 62%,#a9833f)
    }

  }
.journey-reward,.journey-reward:disabled {
    filter:none;
    background:radial-gradient(circle at 50% 48%,#292419 0,#0c1012 66%,#040607 100%)
  }
.journey-reward img {
    transform-origin:50%;
    object-fit:contain;
    object-position:50% 50%;
    filter:brightness(1.05)saturate(1.08)drop-shadow(0 3px 5px #000);
    width:58px;
    max-width:none;
    height:58px;
    margin:auto;
    display:block;
    transform:none
  }
.journey-node.is-locked .journey-reward {
    opacity:.62;
    filter:grayscale()brightness(.58)
  }
.journey-node:nth-child(4) .journey-reward.is-available,.journey-node:nth-child(4) .journey-reward.is-available:disabled {
    clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);
    background:linear-gradient(#4a3518 0,#21150a 52%,#100c08 100%);
    border:1px solid #c39437;
    border-radius:0;
    width:122px;
    height:40px;
    box-shadow:inset 0 0 0 2px #08090a,inset 0 0 12px #e5b24233,0 0 10px #e5ad3747
  }
.journey-node:nth-child(4) .journey-reward.is-available small {
    letter-spacing:.04em;
    text-shadow:0 1px 2px #000;
    font-size:.67rem
  }
.journey-character-list {
    align-items:center;
    gap:6px;
    display:flex;
    overflow:hidden
  }
.journey-character-list button {
    aspect-ratio:1;
    border-radius:50%;
    flex:0 0 44px;
    width:44px;
    min-width:44px;
    height:44px;
    overflow:hidden
  }
.journey-character-list button img,.journey-character-list button b {
    aspect-ratio:1;
    object-fit:cover;
    border-radius:50%;
    width:100%;
    height:100%;
    display:block
  }

}
@keyframes journey-energy-run-straight {
  0% {
    opacity:0;
    left:2%;
    transform:translate(-50%)scale(.45)
  }
12% {
    opacity:1
  }
50% {
    transform:translate(-50%)scale(1)
  }
88% {
    opacity:1
  }
to {
    opacity:0;
    left:90%;
    transform:translate(-50%)scale(.45)
  }

}
@media (min-width:1001px) {
  .journey-node__main {
    z-index:4;
    justify-self:start;
    justify-items:center;
    width:108px;
    display:grid;
    position:relative
  }
.journey-insignia {
    justify-self:center;
    width:94px;
    height:94px;
    margin:0;
    overflow:visible
  }
.journey-insignia__art {
    -webkit-mask-image:none;
    mask-image:none
  }
.journey-node__connector {
    z-index:1;
    background:linear-gradient(90deg,currentColor,currentColor,currentColor);
    height:2px;
    top:50%;
    left:54px;
    right:37px;
    transform:translateY(-1px)
  }
@supports (color:color-mix(in lab, red, red)) {
    .journey-node__connector {
      background:linear-gradient(90deg,currentColor,color-mix(in srgb,currentColor 72%,#fff),currentColor);
      box-shadow:0 0 4px color-mix(in srgb,currentColor 70%,transparent)
    }

  }
.journey-node__connector:before {
    font-size:.56rem;
    top:-7px;
    left:50%
  }
.journey-reward,.journey-reward:disabled,.journey-node:nth-child(4) .journey-reward.is-available,.journey-node:nth-child(4) .journey-reward.is-available:disabled {
    z-index:4;
    clip-path:none;
    border:1px solid var(--journey-tone);
    grid-template-columns:1fr;
    place-items:center;
    width:74px;
    height:74px;
    min-height:74px;
    padding:0;
    display:grid;
    position:relative
  }
@supports (color:color-mix(in lab, red, red)) {
    .journey-reward,.journey-reward:disabled,.journey-node:nth-child(4) .journey-reward.is-available,.journey-node:nth-child(4) .journey-reward.is-available:disabled {
      border:1px solid color-mix(in srgb,var(--journey-tone) 62%,#a9833f)
    }

  }
.journey-reward,.journey-reward:disabled,.journey-node:nth-child(4) .journey-reward.is-available,.journey-node:nth-child(4) .journey-reward.is-available:disabled {
    filter:none;
    background:radial-gradient(circle at 50% 48%,#292419 0,#0c1012 66%,#040607 100%);
    border-radius:50%
  }
.journey-reward img,.journey-node:nth-child(4) .journey-reward.is-available img {
    object-fit:contain;
    object-position:center;
    filter:brightness(1.05)saturate(1.08)drop-shadow(0 2px 4px #000);
    width:54px;
    max-width:none;
    height:54px;
    margin:0;
    display:block;
    transform:none
  }
.journey-reward small {
    display:none
  }
.journey-node:nth-child(4) .journey-reward.is-available,.journey-node:nth-child(4) .journey-reward.is-available:disabled {
    border-color:#e5b84c;
    box-shadow:inset 0 0 0 3px #07090a,inset 0 0 18px #e5b84c47,0 0 9px #d8a638,0 0 22px #e5b84c85
  }
.journey-character-list {
    grid-auto-columns:minmax(0,1fr);
    grid-auto-flow:column;
    align-items:center;
    gap:5px;
    padding:6px 4px 6px 0;
    display:grid;
    overflow:visible
  }
.journey-character-list button {
    aspect-ratio:1;
    justify-self:center;
    width:min(100%,44px);
    min-width:0;
    height:auto
  }
.journey-character-list button img,.journey-character-list button b {
    aspect-ratio:1;
    object-fit:cover;
    width:100%;
    height:100%
  }
.journey-node.is-unlocked .journey-insignia,.journey-node.is-complete .journey-insignia {
    filter:drop-shadow(0 2px 5px #000)
  }
.journey-node.is-complete .journey-insignia:before {
    display:none
  }
.journey-node.is-locked .journey-insignia,.journey-node--future .journey-insignia {
    opacity:1;
    filter:grayscale()saturate(0)contrast(1.08)drop-shadow(0 2px 5px #000)
  }
.journey-node.is-locked .journey-insignia__art,.journey-node--future .journey-insignia__art {
    opacity:1;
    filter:none
  }
.journey-reward,.journey-reward:disabled,.journey-node:nth-child(4) .journey-reward.is-available,.journey-node:nth-child(4) .journey-reward.is-available:disabled {
    box-shadow:none;
    background:0 0;
    border-color:#0000
  }
.journey-tree__path {
    background:linear-gradient(to bottom,var(--journey-tone) 0 77%,#4b5154 81% 100%);
    width:2px;
    box-shadow:none;
    top:10%;
    bottom:10%;
    left:54px
  }
.journey-node__main {
    align-content:center;
    justify-items:center;
    width:108px;
    height:100%;
    overflow:visible
  }
.journey-insignia {
    width:96px;
    height:96px;
    overflow:visible
  }
.journey-insignia__art {
    background-position:50%;
    background-size:contain;
    inset:0
  }
.journey-node__level {
    margin-top:-7px
  }
.journey-node__connector {
    height:2px;
    color:var(--journey-tone);
    background:linear-gradient(90deg,currentColor 0 49%,currentColor 50% 51%,currentColor 100%);
    top:50%;
    left:54px;
    right:37px;
    transform:translateY(-1px)
  }
@supports (color:color-mix(in lab, red, red)) {
    .journey-node__connector {
      background:linear-gradient(90deg,currentColor 0 49%,color-mix(in srgb,currentColor 58%,#fff) 50%,currentColor 51% 100%)
    }

  }
.journey-node__connector {
    box-shadow:0 0 4px
  }
@supports (color:color-mix(in lab, red, red)) {
    .journey-node__connector {
      box-shadow:0 0 4px color-mix(in srgb,currentColor 62%,transparent)
    }

  }
.journey-node.is-locked .journey-node__connector,.journey-node--future .journey-node__connector {
    color:#4b5154;
    opacity:.76;
    background:#4b5154;
    box-shadow:0 0 3px #5a626640
  }
.journey-node.is-locked .journey-node__connector:before,.journey-node--future .journey-node__connector:before {
    color:#697174;
    text-shadow:none
  }
.journey-reward,.journey-reward:disabled,.journey-node:nth-child(4) .journey-reward.is-available,.journey-node:nth-child(4) .journey-reward.is-available:disabled {
    background:radial-gradient(circle at 50% 43%,#25231e 0,#101316 64%,#060809 100%);
    border:1px solid #7c612f;
    border-radius:50%;
    place-items:center;
    width:76px;
    height:76px;
    min-height:76px;
    padding:0;
    position:relative;
    overflow:visible;
    box-shadow:inset 0 0 0 3px #080a0b,inset 0 0 0 4px #c1923e47,0 2px 8px #000000e6
  }
.journey-reward:after {
    content:"";
    pointer-events:none;
    border:1px solid #b2873957;
    border-radius:50%;
    position:absolute;
    inset:5px
  }
.journey-reward img,.journey-node:nth-child(4) .journey-reward.is-available img {
    object-fit:contain;
    object-position:center;
    filter:brightness(.96)saturate(1.06)drop-shadow(0 3px 5px #000);
    width:60px;
    height:60px;
    margin:0;
    display:block
  }
.journey-node.is-locked .journey-reward,.journey-node--future .journey-reward {
    opacity:.72;
    filter:grayscale()brightness(.58);
    border-color:#565b5e;
    box-shadow:inset 0 0 0 3px #080a0b,inset 0 0 0 4px #73797c2e,0 2px 8px #000
  }
.journey-reward__lock {
    z-index:6;
    background:linear-gradient(#373b3d,#111315);
    border:1px solid #8b8f91;
    border-radius:3px;
    width:15px;
    height:13px;
    position:absolute;
    bottom:4px;
    right:-2px;
    box-shadow:0 2px 5px #000,inset 0 0 0 1px #090a0b;
    display:block!important
  }
.journey-reward__lock:before {
    content:"";
    box-sizing:border-box;
    border:2px solid #8b8f91;
    border-bottom:0;
    border-radius:6px 6px 0 0;
    width:7px;
    height:9px;
    position:absolute;
    top:-8px;
    left:3px
  }
.journey-reward__lock:after {
    content:"";
    background:#b6b9ba;
    border-radius:50% 50% 1px 1px;
    width:3px;
    height:5px;
    position:absolute;
    top:4px;
    left:6px
  }
.journey-insignia__lock {
    filter:drop-shadow(0 2px 3px #000)drop-shadow(0 0 2px #e2e7e9);
    width:54px;
    height:54px;
    box-shadow:none;
    background:url(/images/journey/padlock-v4.png) 50%/contain no-repeat;
    border:0;
    border-radius:0;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
  }
.journey-insignia__lock:before,.journey-insignia__lock:after {
    display:none
  }
.journey-reward img,.journey-node:nth-child(4) .journey-reward.is-available img {
    filter:drop-shadow(0 3px 5px #000);
    width:50px;
    height:50px
  }
.journey-reward.is-available,.journey-node:nth-child(4) .journey-reward.is-available,.journey-node:nth-child(4) .journey-reward.is-available:disabled {
    border-color:#7c612f;
    box-shadow:inset 0 0 0 3px #080a0b,inset 0 0 0 4px #c1923e33,0 2px 8px #000000e6
  }
.journey-reward__lock {
    filter:drop-shadow(0 1px 2px #000)drop-shadow(0 0 1px #e2e7e9);
    width:28px;
    height:28px;
    box-shadow:none;
    background:url(/images/journey/padlock-v4.png) 50%/contain no-repeat;
    border:0;
    border-radius:0;
    bottom:1px;
    right:-4px
  }
.journey-reward__lock:before,.journey-reward__lock:after {
    display:none
  }
.journey-tree__path {
    left:62px
  }
.journey-node__level {
    z-index:6;
    white-space:nowrap;
    text-shadow:0 1px 3px #000,0 0 3px #000;
    background:0 0;
    margin:0;
    padding:0;
    line-height:1;
    position:absolute;
    top:50%;
    left:105px;
    transform:translateY(-50%)
  }
.journey-character-bar {
    grid-template-columns:220px 489px;
    width:743px
  }
.journey-character-list {
    grid-auto-columns:44px;
    grid-auto-flow:column;
    gap:5px;
    width:489px;
    min-width:489px;
    display:grid;
    overflow:visible
  }
.journey-character-list button {
    width:44px;
    min-width:44px;
    height:44px
  }
.journey-node__level {
    top:calc(50% - 18px);
    transform:none
  }
.journey-node.is-locked .journey-insignia,.journey-node--future .journey-insignia {
    filter:none;
    opacity:1
  }
.journey-insignia__lock {
    filter:drop-shadow(0 2px 3px #000);
    background-image:url(../image/padlock-v5.png);
    width:44px;
    height:44px
  }
.journey-reward__lock {
    filter:drop-shadow(0 1px 2px #000);
    background-image:url(../image/padlock-v5.png);
    width:22px;
    height:22px;
    bottom:3px;
    right:-1px
  }

}
@keyframes journey-golden-current {
  0%,12% {
    opacity:0;
    left:-38%
  }
30%,72% {
    opacity:.78
  }
88%,to {
    opacity:0;
    left:98%
  }

}
@media (min-width:1001px) {
  .journey-node__connector {
    color:#d3a433;
    background:linear-gradient(90deg,#976919c2,#d3a433 48%,#976919c2);
    box-shadow:0 0 4px #d3a4336b
  }
.journey-node__spark {
    z-index:3;
    filter:blur(2.5px);
    width:42%;
    height:14px;
    box-shadow:none;
    pointer-events:none;
    background:linear-gradient(90deg,#0000 0,#c2881e1f 14%,#e2ae37ad 43%,#fff3bf 50%,#e2ae37ad 57%,#c2881e1f 86%,#0000 100%);
    border-radius:0;
    animation:3.35s ease-in-out infinite journey-golden-current;
    display:block;
    position:absolute;
    top:-6px;
    left:-38%
  }
.journey-node__spark:after {
    content:"";
    filter:blur(.4px);
    background:linear-gradient(90deg,#0000,#ffe9a0,#0000);
    height:2px;
    position:absolute;
    top:6px;
    left:20%;
    right:20%
  }
.journey-node:nth-child(2) .journey-node__spark {
    animation-delay:-.84s
  }
.journey-node:nth-child(3) .journey-node__spark {
    animation-delay:-1.68s
  }
.journey-node:nth-child(4) .journey-node__spark {
    animation-delay:-2.52s
  }
.journey-node.is-locked .journey-node__connector,.journey-node--future .journey-node__connector {
    color:#4b5154;
    background:#4b5154;
    box-shadow:0 0 3px #5a626640
  }
.journey-node.is-locked .journey-node__spark,.journey-node--future .journey-node__spark {
    display:none
  }

}
@keyframes journey-chest-ready {
  0%,to {
    filter:brightness();
    transform:scale(1);
    box-shadow:inset 0 0 0 3px #080a0b,inset 0 0 0 4px #c1923e33,0 2px 8px #000000e6
  }
50% {
    filter:brightness(1.16);
    transform:scale(1.07);
    box-shadow:inset 0 0 0 3px #080a0b,inset 0 0 0 4px #f5c4576b,0 0 10px #ebb53e7a,0 0 24px #ebb53e47,0 2px 8px #000
  }

}
@media (min-width:1001px) {
  .journey-node.is-unlocked:not(.is-claimed) .journey-reward.is-available {
    transform-origin:50%;
    animation:1.65s ease-in-out infinite journey-chest-ready
  }
.journey-node.is-claimed .journey-reward,.journey-node.is-claimed .journey-reward.is-available {
    filter:none;
    animation:none;
    transform:none;
    box-shadow:inset 0 0 0 3px #080a0b,inset 0 0 0 4px #c1923e2e,0 2px 8px #000000e6
  }
.journey-node.is-claimed .journey-node__spark {
    display:none
  }
.journey-node.is-claimed .journey-node__connector {
    background:#8b7139;
    box-shadow:0 0 2px #b9903738
  }

}
@media (prefers-reduced-motion:reduce) {
  .journey-reward.is-available {
    animation:none!important
  }

}
.journey-reward-modal {
  z-index:10020;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  background:#000000b8;
  place-items:center;
  padding:24px;
  display:grid;
  position:fixed;
  inset:0
}
.journey-reward-modal>section {
  color:#eee4d3;
  background:linear-gradient(145deg,#21170e,#0c0e10 52%,#171008);
  border:1px solid #9b6e24;
  width:min(430px,100vw - 32px);
  padding:27px;
  position:relative;
  box-shadow:inset 0 0 0 2px #070809,0 18px 55px #000,0 0 28px #d29e3133
}
.journey-reward-modal__close {
  color:#f7e8ca;
  cursor:pointer;
  background:0 0;
  border:0;
  font:400 1.65rem/1 Arial;
  position:absolute;
  top:10px;
  right:12px
}
.journey-reward-modal small {
  color:#d8aa4a;
  letter-spacing:.12em;
  text-transform:uppercase;
  font:500 .72rem Arial,sans-serif;
  display:block
}
.journey-reward-modal h2 {
  color:#f5d98f;
  margin:7px 0 18px;
  font:500 1.45rem Georgia,serif
}
.journey-reward-modal__items {
  background:#0406079e;
  border:1px solid #be903642;
  grid-template-columns:76px 1fr;
  align-items:center;
  gap:15px;
  padding:13px;
  display:grid
}
.journey-reward-modal__items img {
  object-fit:contain;
  filter:drop-shadow(0 4px 6px #000);
  width:68px;
  height:68px
}
.journey-reward-modal__items span {
  gap:5px;
  display:grid
}
.journey-reward-modal__items strong {
  color:#f2d281;
  font:500 1rem Arial,sans-serif
}
.journey-reward-modal__items em {
  color:#b9b0a2;
  font:400 .82rem/1.45 Arial,sans-serif
}
.journey-reward-modal__claim {
  color:#ffe3a0;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  background:linear-gradient(#6b4718,#33200d);
  border:1px solid #c28b2d;
  width:100%;
  margin-top:17px;
  padding:12px;
  font:700 .82rem Arial,sans-serif;
  display:block;
  box-shadow:inset 0 1px #ffe09429,0 0 12px #ca912b33
}
.journey-reward-modal__claim:hover {
  background:linear-gradient(#81561d,#42280e);
  box-shadow:inset 0 1px #ffe09433,0 0 18px #e2a93966
}
.journey-toast {
  z-index:10040;
  color:#caffd9;
  background:#08140d;
  border:1px solid;
  width:min(370px,100vw - 40px);
  padding:15px 17px;
  font:500 .82rem/1.45 Arial,sans-serif;
  position:fixed;
  top:20px;
  left:20px;
  box-shadow:0 9px 28px #000000b8
}
.journey-toast.is-error {
  color:#ffd3d6;
  background:#2b0d11;
  border-color:#852b32
}
.journey-toast.is-success {
  color:#c8ffda;
  background:#071f11;
  border-color:#168548
}
@keyframes journey-golden-current-safe {
  0%,10% {
    opacity:0;
    left:0
  }
22%,78% {
    opacity:.72
  }
92%,to {
    opacity:0;
    left:58%
  }

}
@media (min-width:1001px) {
  .journey-node__spark {
    animation-name:journey-golden-current-safe;
    animation-duration:5.9s;
    animation-timing-function:ease-in-out;
    left:0
  }
.journey-node:nth-child(2) .journey-node__spark {
    animation-delay:-1.47s
  }
.journey-node:nth-child(3) .journey-node__spark {
    animation-delay:-2.95s
  }
.journey-node:nth-child(4) .journey-node__spark {
    animation-delay:-4.42s
  }
.journey-node.is-unlocked:not(.is-claimed) .journey-reward.is-available,.journey-reward.is-available {
    filter:none!important;
    animation:none!important;
    transform:none!important
  }
.journey-reward,.journey-reward.is-available,.journey-node:nth-child(4) .journey-reward.is-available,.journey-node:nth-child(4) .journey-reward.is-available:disabled,.journey-node.is-claimed .journey-reward {
    background:radial-gradient(circle at 50% 43%,#25231e 0,#101316 64%,#060809 100%)!important;
    border-color:#7c612f!important;
    box-shadow:inset 0 0 0 3px #080a0b,inset 0 0 0 4px #c1923e33,0 2px 8px #000000e6!important
  }
.journey-reward img {
    filter:drop-shadow(0 3px 5px #000)!important
  }
.journey-node__connector {
    left:86px
  }
.journey-node__connector:before {
    content:none!important;
    display:none!important
  }

}
@keyframes journey-insignia-sun-spin {
  to {
    transform:rotate(360deg)
  }

}
@keyframes journey-insignia-sun-drift {
  0%,to {
    opacity:.5;
    transform:rotate(0)scale(.96)
  }
48% {
    opacity:.92;
    transform:rotate(-14deg)scale(1.08)
  }

}
@media (min-width:1001px) {
  .journey-insignia {
    isolation:isolate
  }
.journey-node.is-unlocked .journey-insignia:before {
    content:"";
    z-index:0;
    background:repeating-conic-gradient(from 4deg,transparent 0 8deg,#ffcd521a 9deg,#ffe594eb 10deg,#e09b233d 12deg,transparent 15deg 23deg);
    filter:blur(.45px)drop-shadow(0 0 4px #ffbb32e6)drop-shadow(0 0 10px #e094186b);
    pointer-events:none;
    border-radius:50%;
    animation:13s linear infinite journey-insignia-sun-spin;
    display:block;
    position:absolute;
    inset:-12px;
    -webkit-mask:radial-gradient(circle,#0000 0 51%,#000 63% 72%,#0000 84%);
    mask:radial-gradient(circle,#0000 0 51%,#000 63% 72%,#0000 84%)
  }
.journey-node.is-unlocked .journey-insignia:after {
    content:"";
    z-index:0;
    background:conic-gradient(from 12deg,transparent 0 6%,#ffd869cc 7%,transparent 10% 22%,#ffbb2a8a 24%,transparent 29% 46%,#ffe79ab8 48%,transparent 52% 68%,#e0941880 71%,transparent 76% 90%,#ffdd76ad 93%,transparent 97%);
    filter:blur(1.2px)drop-shadow(0 0 7px #f5b42db8);
    box-shadow:none;
    pointer-events:none;
    border:0;
    border-radius:50%;
    animation:3.8s ease-in-out infinite journey-insignia-sun-drift;
    display:block;
    position:absolute;
    inset:-8px;
    -webkit-mask:radial-gradient(circle,#0000 0 58%,#000 68%,#0000 82%);
    mask:radial-gradient(circle,#0000 0 58%,#000 68%,#0000 82%)
  }
.journey-insignia__art,.journey-insignia__lock {
    z-index:2
  }

}
@media (prefers-reduced-motion:reduce) {
  .journey-node.is-unlocked .journey-insignia:before,.journey-node.is-unlocked .journey-insignia:after {
    animation:none!important
  }

}
@keyframes journey-insignia-corona-turn {
  to {
    transform:rotate(360deg)scale(1.02)
  }

}
@keyframes journey-insignia-corona-breathe {
  0%,to {
    opacity:.34;
    transform:rotate(8deg)scale(.92)
  }
45% {
    opacity:.72;
    transform:rotate(-5deg)scale(1.07)
  }
72% {
    opacity:.5;
    transform:rotate(-12deg)scale(.98)
  }

}
@media (min-width:1001px) {
  .journey-node.is-unlocked:not(.is-claimed) .journey-insignia:before,.journey-node.is-unlocked:not(.is-claimed) .journey-insignia:after {
    box-shadow:none;
    background:url(/images/journey/solar-corona-preview-v1.png) 50%/contain no-repeat;
    border:0;
    border-radius:0;
    inset:-11px;
    -webkit-mask:none;
    mask:none
  }
.journey-node.is-unlocked:not(.is-claimed) .journey-insignia:before {
    opacity:.9;
    filter:drop-shadow(0 0 5px #ffbe2bb3);
    animation:26s linear infinite journey-insignia-corona-turn
  }
.journey-node.is-unlocked:not(.is-claimed) .journey-insignia:after {
    opacity:.48;
    filter:blur(.55px)drop-shadow(0 0 8px #ffb01f8c);
    animation:5.2s ease-in-out infinite journey-insignia-corona-breathe;
    inset:-8px
  }

}
.journey-node.is-claimed .journey-insignia:before,.journey-node.is-claimed .journey-insignia:after {
  display:none!important
}
@media (min-width:1001px) {
  .journey-shell {
    background-image:url(/images/journey/journey-frame-textless-v3.png)!important
  }
.journey-frame-heading {
    z-index:7;
    pointer-events:none;
    gap:5px;
    width:43%;
    display:grid;
    position:absolute;
    top:2.55%;
    left:3.8%
  }
.journey-frame-heading strong {
    color:#e7c276;
    letter-spacing:.045em;
    text-transform:uppercase;
    text-shadow:0 2px 2px #000,0 0 15px #e2a93c38;
    font:500 clamp(1.45rem,2.3vw,2.5rem) Georgia,serif
  }
.journey-frame-heading span {
    color:#9d927c;
    text-shadow:0 1px 2px #000;
    font:500 clamp(.58rem,.75vw,.8rem) Georgia,serif
  }
.journey-frame-stages {
    z-index:7;
    pointer-events:none;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.7%;
    width:96.6%;
    display:grid;
    position:absolute;
    top:14.25%;
    left:1.7%
  }
.journey-frame-stages strong {
    color:#d9d2c4;
    letter-spacing:.025em;
    text-align:center;
    text-transform:uppercase;
    text-shadow:0 2px 2px #000;
    justify-content:center;
    align-items:center;
    height:38px;
    font:700 clamp(.7rem,1.12vw,1.15rem) Georgia,serif;
    display:flex
  }
.journey-frame-stages strong:nth-child(2) {
    color:#9cc96f
  }
.journey-frame-stages strong:nth-child(3) {
    color:#de735c
  }
.journey-frame-stages strong:nth-child(4) {
    color:#e6bd52
  }
.journey-footer {
    pointer-events:none;
    grid-template-columns:minmax(0,1fr) 240px;
    gap:4%;
    width:auto;
    height:6.9%;
    bottom:2.15%;
    left:2.7%;
    right:2.7%
  }
.journey-footer>span {
    display:none
  }
.journey-footer p {
    color:#a99b83;
    text-align:center;
    text-shadow:0 1px 2px #000;
    margin:0;
    font:500 clamp(.58rem,.82vw,.82rem) Georgia,serif;
    display:block
  }
.journey-footer__back {
    color:#d6b05e;
    letter-spacing:.06em;
    text-align:center;
    text-transform:uppercase;
    pointer-events:auto;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    padding:5px 18px;
    font:700 clamp(.52rem,.7vw,.68rem) Georgia,serif;
    text-decoration:none;
    transition:color .18s,text-shadow .18s;
    display:flex
  }
.journey-footer__back:hover {
    color:#ffe09a;
    text-shadow:0 0 12px #ebb94eb8
  }
.journey-back {
    display:none!important
  }

}
@media (max-width:1000px) {
  .journey-frame-heading,.journey-frame-stages {
    display:none
  }
.journey-footer__back {
    color:#d8b666;
    text-decoration:none
  }

}
@media (min-width:1001px) {
  .journey-footer {
    grid-template-columns:11% minmax(0,1fr) 240px;
    column-gap:3%
  }
.journey-footer p {
    grid-column:auto;
    width:min(58%,860px);
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
  }
.journey-footer__back {
    grid-column:3
  }

}
.mad-ranking__online-rules {
  color:#b8b1a5;
  background:linear-gradient(90deg,#30230d8c,#0f0f10f0);
  border:1px solid #c29a3a4d;
  border-left:3px solid #c29a3a;
  gap:7px;
  margin:0 0 16px;
  padding:16px;
  font-size:.78rem;
  display:grid
}
.mad-ranking__online-rules>strong {
  color:#f0cf79;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.72rem
}
.mad-ranking__prize-grid {
  margin-top:7px
}
.mad-ranking__prize-grid article {
  background:linear-gradient(#423011d1,#120f0af5);
  border:1px solid #d7ae4b75;
  border-top:2px solid #d8ad48;
  grid-template-columns:90px minmax(0,1fr);
  align-items:center;
  min-width:0;
  padding:11px 13px;
  display:grid;
  box-shadow:inset 0 1px #ffe18f14
}
.mad-ranking__prize-grid article strong {
  color:#d4ae55;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.72rem;
  display:block
}
.mad-ranking__prize-grid article span {
  color:#aeb1b8;
  font-size:.71rem;
  line-height:1.55;
  display:block
}
.mad-ranking__prize-lines {
  gap:4px;
  min-width:0;
  display:grid
}
.mad-ranking__prize-lines span {
  background:#00000029;
  border-left:2px solid #d8ad4894;
  padding:3px 8px
}
.mad-ranking__search {
  color:#cbaa61;
  background:linear-gradient(#19191cf7,#090a0cf7);
  border:1px solid #d3ae578c;
  border-radius:4px;
  grid-template-columns:20px minmax(0,1fr);
  align-items:center;
  gap:10px;
  width:min(100%,460px);
  min-height:46px;
  margin:16px 0 14px;
  padding:0 14px;
  display:grid;
  box-shadow:inset 0 1px #ffffff0a,0 8px 24px #0000003d
}
.mad-ranking__search:focus-within {
  border-color:#dfba61;
  box-shadow:0 0 0 2px #dfba6121,inset 0 1px #ffffff0d
}
.mad-ranking__search span {
  color:#dfba61;
  place-items:center;
  display:grid
}
.mad-ranking__search svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.8px;
  width:18px;
  height:18px
}
.mad-ranking__search input {
  color:#f3f3f3;
  width:100%;
  min-width:0;
  font:inherit;
  background:0 0;
  border:0;
  outline:0
}
.mad-ranking__search input::placeholder {
  color:#858991;
  opacity:1
}
@media (max-width:620px) {
  .mad-ranking__prize-grid article {
    grid-template-columns:1fr;
    gap:6px
  }
.mad-ranking__search {
    width:100%
  }

}
.mad-ranking__head--online>:nth-child(4),.mad-ranking__row--online>:nth-child(4) {
  text-align:center;
  place-self:stretch stretch;
  place-items:center;
  width:100%;
  display:grid;
  padding:0!important
}
.mad-ranking__experience {
  white-space:nowrap;
  font-size:.82rem;
  color:#e8c76d!important;
  text-align:center!important;
  place-self:stretch stretch!important;
  place-items:center!important;
  width:100%!important;
  padding:0!important;
  display:grid!important
}
.mad-ranking__presence {
  letter-spacing:.06em;
  text-transform:uppercase;
  background:linear-gradient(#2a2c31db,#111215e6);
  border:1px solid #80848c52;
  border-radius:999px;
  align-items:center;
  gap:6px;
  width:max-content;
  min-height:18px;
  padding:2px 8px 2px 6px;
  font-weight:800;
  line-height:1;
  box-shadow:inset 0 1px #ffffff0a;
  color:#a1a6af!important;
  margin-top:5px!important;
  font-size:.57rem!important;
  display:inline-flex!important
}
.mad-ranking__presence i {
  background:#737780;
  border-radius:50%;
  flex:0 0 6px;
  width:6px;
  height:6px;
  box-shadow:0 0 6px #7377806b
}
.mad-ranking__presence.is-online {
  background:linear-gradient(#14462bb8,#091f14e6);
  border-color:#35dc7a66;
  box-shadow:inset 0 1px #8cffbc14,0 0 8px #35dc7a14;
  color:#55db8d!important
}
.mad-ranking__presence.is-online i {
  background:#35dc7a;
  box-shadow:0 0 8px #35dc7ad9
}
.mad-ranking__presence.is-offline {
  background:linear-gradient(#2b2d32d1,#121316eb);
  border-color:#7e838c4d;
  color:#a1a6af!important
}
.mad-ranking__presence.is-offline i {
  box-shadow:none;
  background:#737780
}
.mad-ranking__character-name .mad-ranking__presence {
  letter-spacing:.05em;
  text-transform:uppercase;
  border-radius:8px;
  flex:none;
  align-items:center;
  gap:4px;
  width:max-content;
  min-height:0;
  padding:2px 6px;
  margin:0!important;
  font:800 .52rem/1.1 Arial,sans-serif!important;
  display:inline-flex!important
}
.mad-ranking__character-name .mad-ranking__presence i {
  flex:0 0 6px;
  width:6px;
  height:6px
}
.mad-ranking__character-name .mad-ranking__presence.is-offline {
  background:linear-gradient(#601f24,#2d0d10);
  border-color:#a94747;
  box-shadow:0 0 7px #cd394333;
  color:#faa!important
}
.mad-ranking__character-name .mad-ranking__presence.is-offline i {
  background:#ef535c;
  box-shadow:0 0 6px #ef535cb8
}
.mad-ranking__ranking-tools {
  grid-template-columns:minmax(230px,1fr) 180px 180px;
  gap:9px;
  padding:0 0 14px;
  display:grid
}
.mad-ranking__countdown {
  background:linear-gradient(#121419,#0b0c0f);
  border:1px solid #2c3037;
  grid-template-columns:30px auto 1fr;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:7px 13px;
  display:grid;
  box-shadow:inset 0 1px #ffffff09
}
.mad-ranking__countdown>span {
  color:#d5aa4c;
  grid-row:1/3;
  font-size:1.45rem
}
.mad-ranking__countdown small {
  color:#737987;
  letter-spacing:.11em;
  align-self:end;
  font-size:.55rem;
  font-weight:800
}
.mad-ranking__countdown strong {
  color:#e9d59d;
  letter-spacing:.045em;
  align-self:start;
  font-size:.77rem
}
.mad-ranking__ranking-tools>button {
  color:#e5e5e7;
  background:linear-gradient(#30333a,#202228);
  border:1px solid #4d5058;
  justify-content:center;
  align-items:center;
  gap:9px;
  font-size:.84rem;
  font-weight:900;
  display:flex
}
.mad-ranking__ranking-tools>button b {
  color:#d8b45e;
  font-size:1.15rem
}
.mad-ranking__ranking-tools>button:hover {
  color:#fff;
  background:linear-gradient(#403724,#252017);
  border-color:#c29a45
}
.mad-ranking__ranking-tools>button.is-prizes {
  color:#171006;
  background:linear-gradient(#e0bd68,#ad7e29);
  border-color:#c49b3e
}
.mad-ranking__ranking-tools>button.is-prizes b {
  color:#171006
}
.mad-ranking-modal {
  z-index:10000;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  background:#000000c2;
  place-items:center;
  padding:24px;
  display:grid;
  position:fixed;
  inset:0
}
.mad-ranking-modal>section {
  background:linear-gradient(#151619,#0d0e10);
  border:1px solid #474039;
  width:min(820px,100%);
  max-height:min(720px,90vh);
  overflow:auto;
  box-shadow:0 22px 70px #000,0 0 0 1px #d2a7451f
}
.mad-ranking-modal header {
  background:#0a0b0d;
  border-bottom:1px solid #292b30;
  justify-content:space-between;
  align-items:center;
  padding:13px 18px;
  display:flex
}
.mad-ranking-modal header h2 {
  color:#d8c89f;
  letter-spacing:.075em;
  text-transform:uppercase;
  margin:0;
  font:800 .9rem/1 Arial,sans-serif
}
.mad-ranking-modal header button {
  color:#c8cbd0;
  background:#292c32;
  border:1px solid #464a52;
  width:40px;
  height:40px;
  font-size:1.7rem
}
.mad-ranking-modal__info {
  gap:18px;
  padding:25px;
  display:grid
}
.mad-ranking-modal__info article {
  border-left:2px solid #b98e34;
  padding-left:14px
}
.mad-ranking-modal__info h3,.mad-ranking-modal__prizes h3 {
  color:#d7c69c;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 8px;
  font-size:.83rem
}
.mad-ranking-modal__info p {
  color:#aeb1b8;
  margin:0;
  font-size:.82rem;
  line-height:1.65
}
.mad-ranking-modal__prizes>div {
  border:1px solid #292c31
}
.mad-ranking-modal__prizes p {
  color:#b8bbc2;
  background:#08090b8c;
  border-bottom:1px solid #292c31;
  grid-template-columns:170px minmax(0,1fr);
  margin:0;
  display:grid
}
.mad-ranking-modal__prizes p:last-child {
  border-bottom:0
}
.mad-ranking-modal__prizes p strong,.mad-ranking-modal__prizes p span {
  padding:13px 18px
}
.mad-ranking-modal__prizes p strong {
  color:#d8b85f;
  border-right:1px solid #292c31
}
.mad-ranking-modal__prizes p span {
  font-weight:700
}
@media (max-width:720px) {
  .mad-ranking__ranking-tools {
    grid-template-columns:1fr 1fr
  }
.mad-ranking__countdown {
    grid-column:1/-1
  }
.mad-ranking__ranking-tools>button {
    min-height:44px
  }
.mad-ranking-modal {
    padding:10px
  }
.mad-ranking-modal__prizes p {
    grid-template-columns:110px 1fr
  }

}
.mad-ranking__ranking-tools>button {
  isolation:isolate;
  letter-spacing:.075em;
  text-transform:uppercase;
  background:linear-gradient(#34363c,#1d1f24 56%,#14161a);
  border-color:#55504a;
  gap:0;
  min-height:50px;
  font-size:.78rem;
  transition:all .2s;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 1px #ffffff1a,inset 0 -2px #0000006b,0 6px 15px #00000042
}
.mad-ranking__ranking-tools>button:before {
  content:"";
  z-index:-1;
  background:linear-gradient(115deg,#0000 20%,#ffffff14 49%,#0000 74%);
  transition:transform .45s;
  position:absolute;
  inset:0;
  transform:translate(-110%)
}
.mad-ranking__ranking-tools>button:after {
  content:"";
  background:linear-gradient(90deg,#0000,#dab25794,#0000);
  height:1px;
  position:absolute;
  bottom:7px;
  left:14px;
  right:14px
}
.mad-ranking__ranking-tools>button:hover {
  filter:brightness(1.08);
  border-color:#d0a94e;
  transform:translateY(-1px)
}
.mad-ranking__ranking-tools>button:hover:before {
  transform:translate(110%)
}
.mad-ranking__ranking-tools>button.is-prizes {
  color:#1d1306;
  text-shadow:0 1px #ffe8a599;
  background:linear-gradient(#edcf7c,#c99838 53%,#8d5d18);
  border-color:#e0bb5c;
  box-shadow:inset 0 1px #fff1b1,inset 0 -2px #4727038c,0 7px 18px #ae74183d
}
.mad-ranking__ranking-tools>button.is-prizes:after {
  background:linear-gradient(90deg,#0000,#4927038c,#0000)
}
.mad-ranking__countdown {
  background:radial-gradient(circle at 12%,#c08f2b1a,#0000 28%),linear-gradient(#14161b,#090a0d);
  border-color:#3c3831;
  position:relative;
  overflow:hidden;
  box-shadow:inset 3px 0 #bd8d32,inset 0 1px #ffffff0a,0 5px 14px #0003
}
.mad-ranking-modal {
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  background:radial-gradient(circle at 50% 30%,#5a411933,#0000 43%),#000000d6
}
.mad-ranking-modal>section {
  background:radial-gradient(circle at 92% 4%,#cc9e3e1c,#0000 34%),linear-gradient(145deg,#17181b,#0b0c0e 68%);
  border-color:#80632e;
  width:min(870px,100%);
  position:relative;
  box-shadow:0 28px 90px #000,0 0 0 1px #e5b9531c,inset 0 1px #ffefbe0f
}
.mad-ranking-modal>section:before {
  content:"";
  pointer-events:none;
  background:linear-gradient(135deg,#0000 49.5%,#be90341f 50%,#0000 50.8%);
  width:210px;
  height:210px;
  position:absolute;
  top:0;
  right:0
}
.mad-ranking-modal header,.mad-ranking-modal__info,.mad-ranking-modal__prizes {
  z-index:1;
  position:relative
}
.mad-ranking-modal header {
  background:linear-gradient(90deg,#090a0c,#12110ef5);
  border-bottom-color:#3e3423;
  min-height:66px;
  padding:13px 18px 13px 25px;
  box-shadow:inset 4px 0 #c29437
}
.mad-ranking-modal header h2 {
  color:#ead8aa;
  letter-spacing:.12em;
  font-size:.98rem
}
.mad-ranking-modal__lead {
  color:#c9b98f!important;
  background:linear-gradient(90deg,#b684241f,#ffffff04)!important;
  border:1px solid #403721!important;
  border-left:3px solid #c49739!important;
  margin:0!important;
  padding:15px 18px!important
}
.mad-ranking-modal__info {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:24px
}
.mad-ranking-modal__info>.mad-ranking-modal__lead {
  grid-column:1/-1
}
.mad-ranking-modal__info article {
  background:linear-gradient(135deg,#27251fad,#0c0d0fc2);
  border:1px solid #292b2f;
  border-left:3px solid #b98e34;
  min-height:118px;
  padding:18px 20px;
  position:relative;
  box-shadow:0 8px 18px #0000002b
}
.mad-ranking-modal__info article:after {
  content:"";
  border-bottom:1px solid #c1943a47;
  border-right:1px solid #c1943a47;
  width:20px;
  height:20px;
  position:absolute;
  bottom:8px;
  right:8px
}
.mad-ranking-modal__prizes {
  padding:24px
}
.mad-ranking-modal__prizes>div {
  border:0;
  gap:10px;
  margin-top:13px;
  display:grid
}
.mad-ranking-modal__prizes p {
  background:linear-gradient(90deg,#2a2b2fbf,#0c0d0fd6);
  grid-template-columns:185px minmax(0,1fr);
  position:relative;
  overflow:hidden;
  box-shadow:0 7px 16px #0003;
  border:1px solid #343537!important
}
.mad-ranking-modal__prizes p:before {
  content:"";
  background:#aa8140;
  width:4px;
  position:absolute;
  inset:0 auto 0 0
}
.mad-ranking-modal__prizes p strong,.mad-ranking-modal__prizes p span {
  flex-direction:column;
  justify-content:center;
  min-height:65px;
  padding:11px 20px;
  display:flex
}
.mad-ranking-modal__prizes p strong {
  font:700 1.05rem Georgia,serif
}
.mad-ranking-modal__prizes p span {
  color:#ece7da;
  font-size:.88rem
}
.mad-ranking-modal__prizes p small {
  color:#777b83;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:5px;
  font:800 .52rem/1 Arial,sans-serif;
  display:block
}
.mad-ranking-modal__prizes p.is-place-1 {
  background:radial-gradient(circle at 10%,#dfad3e2b,#0000 32%),#111214;
  border-color:#806329!important
}
.mad-ranking-modal__prizes p.is-place-1:before {
  background:#e5b943;
  box-shadow:0 0 13px #e5b94380
}
.mad-ranking-modal__prizes p.is-place-1 strong {
  color:#f2cf67
}
.mad-ranking-modal__prizes p.is-place-2 {
  background:radial-gradient(circle at 10%,#b4c0d01f,#0000 32%),#111214;
  border-color:#555b63!important
}
.mad-ranking-modal__prizes p.is-place-2:before {
  background:#b9c2cf
}
.mad-ranking-modal__prizes p.is-place-2 strong {
  color:#d3dae3
}
.mad-ranking-modal__prizes p.is-place-3 {
  background:radial-gradient(circle at 10%,#b5653024,#0000 32%),#111214;
  border-color:#68472e!important
}
.mad-ranking-modal__prizes p.is-place-3:before {
  background:#b96a35
}
.mad-ranking-modal__prizes p.is-place-3 strong {
  color:#d9925e
}
@media (max-width:680px) {
  .mad-ranking-modal__info {
    grid-template-columns:1fr;
    padding:14px
  }
.mad-ranking-modal__info>.mad-ranking-modal__lead {
    grid-column:auto
  }
.mad-ranking-modal__info article {
    min-height:0
  }
.mad-ranking-modal__prizes {
    padding:14px
  }
.mad-ranking-modal__prizes p {
    grid-template-columns:115px 1fr
  }
.mad-ranking-modal__prizes p strong,.mad-ranking-modal__prizes p span {
    min-height:60px;
    padding:10px 13px
  }

}
.mad-ranking__countdown {
  text-align:center;
  justify-content:center;
  align-items:center;
  gap:12px;
  min-height:58px;
  padding:9px 20px;
  display:flex
}
.mad-ranking__countdown>span {
  grid-row:auto;
  justify-content:center;
  align-items:center;
  font-size:1.5rem;
  display:flex
}
.mad-ranking__countdown small,.mad-ranking__countdown strong {
  align-self:auto
}
.mad-ranking__countdown small {
  letter-spacing:.14em;
  font-size:.62rem
}
.mad-ranking__countdown strong {
  color:#f3d477;
  letter-spacing:.07em;
  text-shadow:0 0 12px #e4b13f38;
  min-width:126px;
  font-size:1.02rem
}
.mad-ranking-modal__prizes>.mad-ranking-modal__lead {
  box-sizing:border-box;
  white-space:nowrap;
  width:100%;
  display:block
}
.mad-ranking-modal__prizes>div p {
  display:grid
}
@media (max-width:680px) {
  .mad-ranking__countdown {
    gap:8px;
    min-height:56px;
    padding:8px 12px
  }
.mad-ranking__countdown strong {
    min-width:0;
    font-size:.9rem
  }
.mad-ranking-modal__prizes>.mad-ranking-modal__lead {
    white-space:normal
  }

}
.mad-ranking__ranking-tools>button,.mad-ranking__ranking-tools>button.is-prizes {
  min-height:44px;
  box-shadow:none;
  color:#f0f0f2;
  letter-spacing:0;
  text-shadow:none;
  background:#27292f;
  border:1px solid #ffffff12;
  font-size:.8rem;
  transform:none
}
.mad-ranking__ranking-tools>button:before,.mad-ranking__ranking-tools>button:after {
  display:none
}
.mad-ranking__ranking-tools>button:hover {
  color:#fff;
  filter:none;
  background:#303238;
  border-color:#a98b4a;
  transform:none
}
.mad-ranking__ranking-tools>button.is-active,.mad-ranking__ranking-tools>button.is-active:hover {
  color:#171006;
  background:linear-gradient(#dfbd70,#b98b35);
  border-color:#e0b85d;
  box-shadow:inset 0 1px #ffffff59,0 0 14px #c3943626
}
.mad-ranking__ranking-tools {
  grid-template-columns:minmax(350px,1fr) 160px 160px
}
.mad-ranking__countdown strong {
  white-space:nowrap;
  min-width:0;
  font-size:clamp(.76rem,1vw,.92rem)
}
@media (max-width:820px) {
  .mad-ranking__ranking-tools {
    grid-template-columns:1fr 1fr
  }
.mad-ranking__countdown {
    grid-column:1/-1
  }
.mad-ranking__countdown strong {
    font-size:clamp(.68rem,2.4vw,.9rem)
  }

}
.mad-ranking__countdown {
  text-align:left;
  grid-template-columns:82px minmax(0,1fr);
  justify-content:start;
  align-items:center;
  gap:10px;
  padding:9px 20px;
  display:grid
}
.mad-ranking__countdown>span {
  display:none
}
.mad-ranking__countdown small {
  color:#8f95a2;
  letter-spacing:.13em;
  white-space:nowrap;
  place-self:center start;
  width:82px;
  font-size:.66rem;
  font-weight:800
}
.mad-ranking__countdown strong {
  color:#f3d477;
  font-variant-numeric:tabular-nums;
  letter-spacing:.045em;
  white-space:nowrap;
  place-self:center start;
  min-width:0;
  font-size:1.02rem
}
@media (max-width:680px) {
  .mad-ranking__countdown {
    grid-template-columns:76px minmax(0,1fr);
    gap:7px;
    padding:8px 12px
  }
.mad-ranking__countdown small {
    width:76px;
    font-size:.6rem
  }

}
.mad-ranking__ranking-tools .mad-ranking__countdown {
  text-align:left;
  justify-content:flex-start;
  align-items:center;
  min-height:58px;
  padding:9px 20px 9px 112px;
  display:flex;
  position:relative
}
.mad-ranking__ranking-tools .mad-ranking__countdown small {
  color:#8f95a2;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:nowrap;
  width:auto;
  margin:0;
  font-size:.66rem;
  font-weight:800;
  line-height:1;
  position:absolute;
  top:50%;
  left:20px;
  transform:translateY(-50%)
}
.mad-ranking__ranking-tools .mad-ranking__countdown strong {
  color:#f3d477;
  font-variant-numeric:tabular-nums;
  letter-spacing:.045em;
  white-space:nowrap;
  min-width:0;
  margin:0;
  font-size:clamp(.76rem,1vw,.92rem);
  display:block
}
@media (max-width:680px) {
  .mad-ranking__ranking-tools .mad-ranking__countdown {
    padding-left:98px;
    padding-right:12px
  }
.mad-ranking__ranking-tools .mad-ranking__countdown small {
    font-size:.6rem;
    left:12px
  }

}
.journey-reward-modal__items strong {
  white-space:pre-line;
  line-height:1.45
}
.journey-toast {
  white-space:pre-line
}
.journey-reward-modal>section {
  background:radial-gradient(circle at 50% 0,#68491729,#0000 40%),#0d0f10;
  border-color:#d0972ab8;
  width:min(700px,100vw - 28px);
  padding:28px;
  box-shadow:0 24px 70px #000000e6,inset 0 0 0 1px #ffda8109
}
.journey-reward-modal>section>small {
  color:#d6a13e;
  letter-spacing:1.4px;
  text-transform:uppercase;
  display:block
}
.journey-reward-modal>section>h2 {
  margin:7px 0 20px;
  font-size:clamp(1.65rem,3vw,2.2rem)
}
.journey-reward-modal__items {
  background:0 0;
  border:0;
  grid-template-columns:1fr;
  gap:11px;
  padding:0;
  display:grid
}
.journey-reward-modal__item {
  background:linear-gradient(110deg,#040506fa,#15120deb);
  border:1px solid #ad7e2b52;
  grid-template-columns:190px minmax(0,1fr);
  align-items:center;
  min-height:142px;
  padding:10px 18px;
  display:grid;
  overflow:hidden
}
.journey-reward-modal__art {
  place-items:center;
  width:180px;
  height:120px;
  display:grid
}
.journey-reward-modal__items .journey-reward-modal__art img {
  object-fit:contain;
  filter:drop-shadow(0 4px 10px #000000b3);
  width:112px;
  max-width:100%;
  height:112px
}
.journey-reward-modal__item.is-wing {
  grid-template-columns:190px minmax(0,1fr)
}
.journey-reward-modal__item.is-wing .journey-reward-modal__art {
  width:180px
}
.journey-reward-modal__item.is-wing .journey-reward-modal__art img {
  filter:drop-shadow(0 0 12px #9b5cff80);
  width:180px;
  height:128px
}
.journey-reward-modal__item.is-mystery .journey-reward-modal__art img {
  width:132px;
  height:108px
}
.journey-reward-modal__item.is-zen .journey-reward-modal__art img {
  filter:drop-shadow(0 0 10px #ffb72352);
  width:104px;
  height:104px
}
.journey-reward-modal__details {
  gap:12px;
  min-width:0;
  display:grid
}
.journey-reward-modal__details>strong {
  color:#f4d681;
  white-space:normal;
  font:500 1.08rem/1.3 Georgia,serif
}
.journey-reward-modal__meta {
  flex-wrap:wrap;
  align-items:center;
  gap:13px;
  display:flex
}
.journey-reward-modal__meta b {
  color:#efc668;
  letter-spacing:1px;
  background:#8c570f29;
  border:1px solid #d0972a85;
  padding:7px 11px;
  font:600 .72rem Arial,sans-serif
}
.journey-reward-modal__meta em {
  color:#aaa295;
  letter-spacing:1.2px;
  border-left:2px solid #d0972a73;
  padding-left:10px;
  font:600 .7rem Arial,sans-serif
}
.journey-reward-modal__hint {
  text-align:center;
  color:#b9b0a2;
  margin:17px 0 0;
  font:400 .84rem/1.45 Arial,sans-serif
}
.journey-reward-modal__claim {
  margin-top:18px
}
@media (max-width:600px) {
  .journey-reward-modal>section {
    padding:20px 16px
  }
.journey-reward-modal__item {
    grid-template-columns:94px minmax(0,1fr);
    min-height:112px;
    padding:8px 10px
  }
.journey-reward-modal__art {
    width:88px;
    height:94px
  }
.journey-reward-modal__items .journey-reward-modal__art img,.journey-reward-modal__item.is-wing .journey-reward-modal__art img,.journey-reward-modal__item.is-mystery .journey-reward-modal__art img {
    width:90px;
    height:90px
  }
.journey-reward-modal__details>strong {
    font-size:.96rem
  }
.journey-reward-modal__meta {
    gap:8px
  }

}
.journey-reward-modal>section {
  border:1px solid #a7792d!important;
  box-shadow:0 24px 70px #000000eb,inset 0 0 0 2px #070809,inset 0 0 0 3px #daa64224!important
}
.journey-reward-modal>section:before {
  content:"";
  z-index:0;
  pointer-events:none;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
  background:linear-gradient(135deg,#d6a440 0 1px,#0000 1px) 0 0/28px 28px no-repeat,linear-gradient(225deg,#d6a440 0 1px,#0000 1px) 100% 0/28px 28px no-repeat,linear-gradient(45deg,#d6a440 0 1px,#0000 1px) 0 100%/28px 28px no-repeat,linear-gradient(315deg,#d6a440 0 1px,#0000 1px) 100% 100%/28px 28px no-repeat;
  border:1px solid #d9a6466b;
  position:absolute;
  inset:8px
}
.journey-reward-modal>section:after {
  content:"◆";
  z-index:2;
  color:#f0c665;
  pointer-events:none;
  background:#17120a;
  border:1px solid #d7a749;
  place-items:center;
  width:22px;
  height:22px;
  font-size:9px;
  display:grid;
  position:absolute;
  top:-12px;
  left:50%;
  transform:translate(-50%)rotate(45deg);
  box-shadow:0 0 12px #daa64347
}
.journey-reward-modal>section>* {
  z-index:1;
  position:relative
}
.journey-reward-modal>section>.journey-reward-modal__close {
  z-index:5!important;
  position:absolute!important;
  top:16px!important;
  left:auto!important;
  right:18px!important
}
.hero-beta-countdown {
  text-align:center;
  background:linear-gradient(#08080ac2,#050507e6);
  border:1px solid #c992388c;
  width:min(47rem,94vw);
  padding:1.15rem 1.7rem 1.3rem;
  position:relative;
  box-shadow:inset 0 0 42px #ad5d0d14,0 16px 50px #0000008f
}
.hero-beta-countdown:before,.hero-beta-countdown:after {
  content:"";
  background:linear-gradient(#0000,#c78b2d,#0000);
  width:1px;
  position:absolute;
  top:.75rem;
  bottom:.75rem
}
.hero-beta-countdown:before {
  left:.45rem
}
.hero-beta-countdown:after {
  right:.45rem
}
.hero-beta-countdown__eyebrow,.hero-beta-countdown__intro,.hero-beta-countdown__date {
  margin:0
}
.hero-beta-countdown__eyebrow {
  color:#d9a53d;
  letter-spacing:.3em;
  text-transform:uppercase;
  font-size:.68rem;
  font-weight:800
}
.hero-beta-countdown h2 {
  color:#f4deb0;
  text-shadow:0 2px 12px #000,0 0 22px #ffab373d;
  margin:.35rem 0 0;
  font-family:Georgia,Times New Roman,serif;
  font-size:clamp(1.3rem,2.4vw,2rem)
}
.hero-beta-countdown__intro {
  color:#b8aea0;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-top:.35rem;
  font-size:.68rem;
  font-weight:700
}
.hero-beta-countdown__units {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.65rem;
  margin-top:.9rem;
  display:grid
}
.hero-beta-countdown__unit {
  background:linear-gradient(#17130e,#08090c);
  border:1px solid #6e4b19;
  padding:.55rem .3rem .45rem;
  box-shadow:inset 0 0 20px #da972d0f,0 7px 18px #000
}
.hero-beta-countdown__unit strong,.hero-beta-countdown__unit span {
  display:block
}
.hero-beta-countdown__unit strong {
  color:#fff3cf;
  text-shadow:0 0 12px #ffb43252;
  font-size:clamp(1.35rem,3vw,2.15rem);
  line-height:1
}
.hero-beta-countdown__unit span {
  color:#c49339;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-top:.3rem;
  font-size:.56rem;
  font-weight:800
}
.hero-beta-countdown__date {
  color:#e2d2b4;
  letter-spacing:.11em;
  text-transform:uppercase;
  margin-top:.75rem;
  font-size:.62rem;
  font-weight:700
}
@media (max-width:540px) {
  .hero-beta-countdown {
    padding:1rem .8rem
  }
.hero-beta-countdown__units {
    gap:.35rem
  }
.hero-beta-countdown__unit span {
    letter-spacing:.06em;
    font-size:.48rem
  }

}
@media (min-width:1100px) {
  .site-header__staff-stack {
    text-align:center;
    grid-template-columns:minmax(7.5rem,auto)!important;
    align-content:center!important;
    justify-items:center!important;
    gap:.05rem!important;
    display:grid!important
  }
.site-header__staff-stack .site-header__admin-link {
    text-align:center;
    width:100%;
    line-height:1.15;
    display:block!important
  }

}
.shop-card__key-bonus {
  gap:.45rem;
  flex-flow:row!important;
  justify-content:center!important;
  align-items:center!important;
  display:inline-flex!important
}
.shop-card__key-bonus-img {
  flex:0 0 2.35rem
}
.shop-card__key-bonus strong {
  white-space:nowrap;
  display:inline-block!important
}
.char-public-equipment__item-card:not(.char-public-equipment__item-card--slot-0):not(.char-public-equipment__item-card--slot-1):not(.char-public-equipment__item-card--slot-7) .char-public-equipment__item-icon {
  place-items:center!important;
  width:114px!important;
  height:114px!important;
  display:grid!important;
  overflow:hidden!important
}
.char-public-equipment__item-card:not(.char-public-equipment__item-card--slot-0):not(.char-public-equipment__item-card--slot-1):not(.char-public-equipment__item-card--slot-7) .char-public-equipment__item-icon .item-icon {
  object-fit:contain!important;
  object-position:center center!important;
  width:100px!important;
  max-width:100px!important;
  height:100px!important;
  max-height:100px!important;
  margin:0!important;
  display:block!important;
  transform:none!important
}
.webshop__products-tools {
  align-items:center;
  gap:16px;
  display:flex
}
.webshop__products-tools label {
  color:#92949b;
  letter-spacing:.04em;
  text-transform:uppercase;
  align-items:center;
  gap:9px;
  font-size:.72rem;
  font-weight:700;
  display:flex
}
.webshop__products-tools select {
  color:#e8e8e8;
  min-width:150px;
  font:600 .76rem var(--font-inter),Arial,sans-serif;
  cursor:pointer;
  background:#111318;
  border:1px solid #c2973259;
  border-radius:3px;
  outline:none;
  padding:8px 30px 8px 10px
}
.webshop__products-tools select:focus {
  border-color:#c29732;
  box-shadow:0 0 0 2px #c2973226
}
@media (max-width:640px) {
  .webshop__products-head {
    align-items:flex-start;
    gap:12px
  }
.webshop__products-tools {
    flex-direction:column;
    align-items:flex-end;
    gap:7px
  }
.webshop__products-tools label {
    flex-direction:column;
    align-items:flex-start;
    gap:5px
  }
.webshop__products-tools select {
    min-width:140px
  }

}
.rankings-page-shell {
  max-width:1500px;
  padding-inline:clamp(12px,1.4vw,22px)
}
.rankings-page-shell .mad-ranking {
  grid-template-columns:280px minmax(0,1fr);
  gap:22px
}
.rankings-page-shell .mad-ranking__character-name {
  min-width:max-content
}
@media (max-width:1180px) and (min-width:981px) {
  .rankings-page-shell .mad-ranking {
    grid-template-columns:245px minmax(0,1fr);
    gap:16px
  }
.rankings-page-shell .mad-ranking__head--online,.rankings-page-shell .mad-ranking__table-wrap--online .mad-ranking__row {
    grid-template-columns:58px minmax(235px,1.25fr) 100px minmax(165px,.75fr) 112px
  }

}
@media (max-width:980px) {
  .rankings-page-shell .mad-ranking {
    grid-template-columns:1fr
  }

}
.rankings-page-shell .mad-ranking__head--level,.rankings-page-shell .mad-ranking__table-wrap--level .mad-ranking__row {
  grid-template-columns:64px minmax(360px,1.25fr) minmax(175px,.65fr) minmax(170px,.65fr) minmax(120px,.45fr);
  column-gap:8px
}
.mad-ranking__level-gens {
  text-align:center;
  justify-content:center;
  align-self:stretch;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:3px 10px;
  display:flex
}
.mad-ranking__level-gens img {
  object-fit:contain;
  filter:drop-shadow(0 2px 4px #000);
  flex:0 0 32px;
  width:32px;
  height:32px
}
.mad-ranking__level-gens strong {
  white-space:nowrap;
  font-size:.76rem
}
.mad-ranking__level-gens.is-duprian {
  color:#70bff1
}
.mad-ranking__level-gens.is-vanert {
  color:#d49ab7
}
.mad-ranking__level-gens.is-empty small {
  color:#666b74;
  white-space:nowrap;
  font-size:.65rem
}
.rankings-page-shell .mad-ranking__level-gens.is-empty {
  justify-content:center;
  justify-self:stretch;
  width:100%;
  min-width:0;
  padding-inline:0
}
.rankings-page-shell .mad-ranking__head--level>span:nth-child(n+3),.rankings-page-shell .mad-ranking__row--level>:nth-child(n+3) {
  text-align:center;
  border-left:1px solid #ffffff0b;
  justify-content:center;
  place-self:stretch stretch;
  align-items:center;
  display:flex
}
@media (max-width:1180px) and (min-width:981px) {
  .rankings-page-shell .mad-ranking__head--level,.rankings-page-shell .mad-ranking__table-wrap--level .mad-ranking__row {
    grid-template-columns:58px minmax(235px,1.1fr) minmax(125px,.55fr) minmax(120px,.55fr) minmax(90px,.4fr);
    column-gap:6px
  }

}
.rankings-page-shell .mad-ranking__head,.rankings-page-shell .mad-ranking__row {
  column-gap:8px
}
.rankings-page-shell .mad-ranking__head:not(.mad-ranking__head--online):not(.mad-ranking__head--level):not(.mad-ranking__head--guild):not(.mad-ranking__head--gens),.rankings-page-shell .mad-ranking__row:not(.mad-ranking__row--online):not(.mad-ranking__row--level):not(.mad-ranking__row--guild):not(.mad-ranking__row--gens) {
  grid-template-columns:64px minmax(340px,1.2fr) minmax(180px,.68fr) minmax(135px,.48fr)
}
.rankings-page-shell .mad-ranking__head--online,.rankings-page-shell .mad-ranking__table-wrap--online .mad-ranking__row {
  grid-template-columns:64px minmax(330px,1.15fr) minmax(165px,.58fr) minmax(210px,.74fr) minmax(130px,.46fr)
}
.rankings-page-shell .mad-ranking__head--guild,.rankings-page-shell .mad-ranking__row--guild {
  grid-template-columns:64px minmax(280px,1fr) minmax(220px,.78fr) minmax(145px,.52fr) minmax(145px,.52fr)
}
.rankings-page-shell .mad-ranking__head--gens,.rankings-page-shell .mad-ranking__row--gens {
  grid-template-columns:64px minmax(320px,1.12fr) minmax(190px,.67fr) minmax(185px,.65fr) minmax(150px,.53fr)
}
.rankings-page-shell .mad-ranking__head--level,.rankings-page-shell .mad-ranking__table-wrap--level .mad-ranking__row {
  grid-template-columns:64px minmax(340px,1.18fr) minmax(180px,.64fr) minmax(180px,.64fr) minmax(125px,.44fr)
}
.rankings-page-shell .mad-ranking__head>span:nth-child(n+3),.rankings-page-shell .mad-ranking__row>:nth-child(n+3) {
  text-align:center;
  border-left:1px solid #ffffff0b;
  justify-content:center;
  place-self:stretch stretch;
  align-items:center;
  padding-inline:8px;
  display:flex
}
.rankings-page-shell .mad-ranking__row--guild .mad-ranking__guild-name {
  text-align:center;
  justify-content:center;
  align-self:stretch;
  padding-inline:12px
}
.rankings-page-shell .mad-ranking__row--guild>:nth-child(3),.rankings-page-shell .mad-ranking__gens-family,.rankings-page-shell .mad-ranking__gens-title {
  text-align:center;
  justify-content:center
}
@media (max-width:1180px) and (min-width:981px) {
  .rankings-page-shell .mad-ranking__head--guild,.rankings-page-shell .mad-ranking__row--guild {
    grid-template-columns:58px minmax(220px,1fr) minmax(150px,.7fr) minmax(100px,.48fr) minmax(105px,.5fr)
  }
.rankings-page-shell .mad-ranking__head--gens,.rankings-page-shell .mad-ranking__row--gens {
    grid-template-columns:58px minmax(235px,1fr) minmax(135px,.58fr) minmax(130px,.56fr) minmax(105px,.46fr)
  }

}
@media (max-width:620px) {
  .rankings-page-shell .mad-ranking__head,.rankings-page-shell .mad-ranking__row {
    column-gap:0
  }
.rankings-page-shell .mad-ranking__head--level,.rankings-page-shell .mad-ranking__table-wrap--level .mad-ranking__row {
    grid-template-columns:52px minmax(0,1fr) 84px
  }
.rankings-page-shell .mad-ranking__head--level>:nth-child(3),.rankings-page-shell .mad-ranking__head--level>:nth-child(4),.rankings-page-shell .mad-ranking__row--level>:nth-child(3),.rankings-page-shell .mad-ranking__row--level>:nth-child(4) {
    display:none
  }
.rankings-page-shell .mad-ranking__head--gens,.rankings-page-shell .mad-ranking__row--gens {
    grid-template-columns:52px minmax(0,1fr) 90px
  }
.rankings-page-shell .mad-ranking__head--gens>:nth-child(3),.rankings-page-shell .mad-ranking__head--gens>:nth-child(4),.rankings-page-shell .mad-ranking__row--gens>:nth-child(3),.rankings-page-shell .mad-ranking__row--gens>:nth-child(4) {
    display:none
  }

}
.rankings-page-shell .mad-ranking__level-gens.is-duprian {
  color:#d8ad54
}
.rankings-page-shell .mad-ranking__level-gens.is-empty {
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:0!important;
  display:flex!important
}
.rankings-page-shell .mad-ranking__level-gens.is-empty:before {
  content:"";
  flex:0 0 32px;
  width:32px;
  height:1px
}
.rankings-page-shell .mad-ranking__level-gens.is-empty small {
  text-align:center;
  display:block
}
.rankings-page-shell .mad-ranking__character-name .mad-ranking__room {
  letter-spacing:.055em!important;
  white-space:nowrap!important;
  border:1px solid!important;
  border-radius:8px!important;
  flex:none!important;
  justify-content:center!important;
  align-items:center!important;
  width:max-content!important;
  min-height:0!important;
  margin:0!important;
  padding:2px 7px!important;
  font:900 .52rem/1.1 Arial,sans-serif!important;
  display:inline-flex!important
}
.rankings-page-shell .mad-ranking__character-name .mad-ranking__room.is-red {
  color:#ff8a8a!important;
  background:linear-gradient(#691919eb,#300a0df7)!important;
  border-color:#ef444494!important;
  box-shadow:inset 0 1px #ffd2d214,0 0 8px #ef444424!important
}
.rankings-page-shell .mad-ranking__character-name .mad-ranking__room.is-green {
  color:#73ed9b!important;
  background:linear-gradient(#165b31eb,#072a18f7)!important;
  border-color:#22c55e8f!important;
  box-shadow:inset 0 1px #d0ffdf14,0 0 9px #22c55e24!important
}
.char-profile-card__presence {
  background:#ffffff09!important;
  border:1px solid #ffffff14!important;
  border-radius:999px!important;
  grid-template-columns:minmax(0,1fr)!important;
  justify-items:stretch!important;
  gap:0!important;
  display:grid!important;
  overflow:hidden!important
}
.char-profile-card__presence.is-online:has(.char-profile-card__room) {
  grid-template-columns:repeat(2,minmax(0,1fr))!important
}
.char-profile-card__presence.is-offline {
  background:linear-gradient(#480f14eb,#1c070af7)!important;
  border-color:#d6363e85!important;
  display:flex!important;
  box-shadow:inset 0 1px #ff9da212,0 0 9px #d22e3721!important
}
.char-profile-card__presence .char-profile-card__status,.char-profile-card__presence .char-profile-card__room {
  border:0!important;
  border-radius:0!important;
  flex:auto!important;
  width:100%!important;
  min-width:0!important;
  padding:.48rem .8rem!important
}
.char-profile-card__presence .char-profile-card__status.is-offline {
  color:#ff6c72!important;
  background:0 0!important;
  justify-content:center!important
}
.char-profile-card__room {
  letter-spacing:.055em!important;
  white-space:nowrap!important;
  justify-content:center!important;
  align-items:center!important;
  font:900 .68rem/1 Arial,sans-serif!important;
  display:inline-flex!important
}
.char-profile-card__room.is-red {
  color:#ff8a8a!important;
  background:linear-gradient(#691919eb,#300a0df7)!important
}
.char-profile-card__room.is-green {
  color:#73ed9b!important;
  background:linear-gradient(#165b31eb,#072a18f7)!important
}
.char-profile-card__room small {
  color:#ffffff9e!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  margin-right:.35rem!important;
  font:800 .58rem/1 Arial,sans-serif!important
}
.char-profile__details {
  align-content:start;
  gap:.5rem;
  display:grid
}
.char-profile__privacy-row {
  grid-column:1/-1
}
@media (min-width:1024px) {
  .char-profile {
    align-items:stretch!important
  }
.char-profile__sidebar,.char-profile-card,.char-profile__main {
    min-height:430px
  }
.char-profile__sidebar,.char-profile-card,.char-profile__main,.char-profile__details {
    height:100%
  }
.char-profile__main {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important
  }
.char-profile__details {
    grid-template-rows:auto minmax(0,1fr);
    align-self:stretch;
    min-height:430px
  }
.char-profile__details .char-summary-grid {
    grid-template-columns:minmax(0,1fr)!important
  }
.char-profile__details .char-guild-strip {
    height:100%;
    min-height:0
  }
.char-profile__tools {
    align-self:start
  }

}
.inv-item-tip__panel {
  font-family:Arial,Helvetica,sans-serif
}
.inv-item-tip__panel .inv-item-tip__name {
  font-size:.75rem;
  font-weight:400;
  line-height:1.15
}
.inv-item-tip__panel .inv-item-tip__stats {
  letter-spacing:0;
  gap:0;
  margin-top:.35rem;
  font-size:.7rem;
  font-weight:400;
  line-height:1.15
}
.inv-item-tip__panel .inv-item-tip__stats>li {
  font-weight:400
}
.inv-item-tip__panel .inv-item-tip__spacer {
  height:1rem;
  min-height:1rem
}
.inv-item-tip__panel .inv-item-tip__name.inv-item-tip__quality--archangel {
  font-weight:400;
  color:#ff22d7!important
}
.inv-item-tip__panel .inv-item-tip__legendary-stars {
  text-shadow:none;
  font-weight:400;
  color:#f2a51f!important
}
.inv-item-tip__panel .inv-item-tip__stats>li.inv-item-tip__legendary-additional {
  font-weight:400;
  color:#ffe100!important
}
.inv-item-tip__panel .inv-item-tip__stats>li.inv-item-tip__expiration-title {
  font-weight:700;
  color:#e7a916!important
}
.inv-item-tip__panel .inv-item-tip__stats>li.inv-item-tip__expiration-date {
  font-weight:400;
  color:#65a9ff!important
}
.panel-card:has(.admin-accounts-table) {
  min-width:0
}
.admin-accounts-table td.admin-table-copy {
  white-space:normal;
  overflow-wrap:anywhere;
  min-width:16rem;
  max-width:32rem
}
@property --tw-rotate-x {
  syntax:"*";
  inherits:false
}
@property --tw-rotate-y {
  syntax:"*";
  inherits:false
}
@property --tw-rotate-z {
  syntax:"*";
  inherits:false
}
@property --tw-skew-x {
  syntax:"*";
  inherits:false
}
@property --tw-skew-y {
  syntax:"*";
  inherits:false
}
@property --tw-space-y-reverse {
  syntax:"*";
  inherits:false;
  initial-value:0
}
@property --tw-divide-y-reverse {
  syntax:"*";
  inherits:false;
  initial-value:0
}
@property --tw-border-style {
  syntax:"*";
  inherits:false;
  initial-value:solid
}
@property --tw-gradient-position {
  syntax:"*";
  inherits:false
}
@property --tw-gradient-from {
  syntax:"<color>";
  inherits:false;
  initial-value:#0000
}
@property --tw-gradient-via {
  syntax:"<color>";
  inherits:false;
  initial-value:#0000
}
@property --tw-gradient-to {
  syntax:"<color>";
  inherits:false;
  initial-value:#0000
}
@property --tw-gradient-stops {
  syntax:"*";
  inherits:false
}
@property --tw-gradient-via-stops {
  syntax:"*";
  inherits:false
}
@property --tw-gradient-from-position {
  syntax:"<length-percentage>";
  inherits:false;
  initial-value:0%
}
@property --tw-gradient-via-position {
  syntax:"<length-percentage>";
  inherits:false;
  initial-value:50%
}
@property --tw-gradient-to-position {
  syntax:"<length-percentage>";
  inherits:false;
  initial-value:100%
}
@property --tw-leading {
  syntax:"*";
  inherits:false
}
@property --tw-font-weight {
  syntax:"*";
  inherits:false
}
@property --tw-tracking {
  syntax:"*";
  inherits:false
}
@property --tw-ordinal {
  syntax:"*";
  inherits:false
}
@property --tw-slashed-zero {
  syntax:"*";
  inherits:false
}
@property --tw-numeric-figure {
  syntax:"*";
  inherits:false
}
@property --tw-numeric-spacing {
  syntax:"*";
  inherits:false
}
@property --tw-numeric-fraction {
  syntax:"*";
  inherits:false
}
@property --tw-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000
}
@property --tw-shadow-color {
  syntax:"*";
  inherits:false
}
@property --tw-shadow-alpha {
  syntax:"<percentage>";
  inherits:false;
  initial-value:100%
}
@property --tw-inset-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000
}
@property --tw-inset-shadow-color {
  syntax:"*";
  inherits:false
}
@property --tw-inset-shadow-alpha {
  syntax:"<percentage>";
  inherits:false;
  initial-value:100%
}
@property --tw-ring-color {
  syntax:"*";
  inherits:false
}
@property --tw-ring-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000
}
@property --tw-inset-ring-color {
  syntax:"*";
  inherits:false
}
@property --tw-inset-ring-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000
}
@property --tw-ring-inset {
  syntax:"*";
  inherits:false
}
@property --tw-ring-offset-width {
  syntax:"<length>";
  inherits:false;
  initial-value:0
}
@property --tw-ring-offset-color {
  syntax:"*";
  inherits:false;
  initial-value:#fff
}
@property --tw-ring-offset-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000
}
@property --tw-outline-style {
  syntax:"*";
  inherits:false;
  initial-value:solid
}
@property --tw-blur {
  syntax:"*";
  inherits:false
}
@property --tw-brightness {
  syntax:"*";
  inherits:false
}
@property --tw-contrast {
  syntax:"*";
  inherits:false
}
@property --tw-grayscale {
  syntax:"*";
  inherits:false
}
@property --tw-hue-rotate {
  syntax:"*";
  inherits:false
}
@property --tw-invert {
  syntax:"*";
  inherits:false
}
@property --tw-opacity {
  syntax:"*";
  inherits:false
}
@property --tw-saturate {
  syntax:"*";
  inherits:false
}
@property --tw-sepia {
  syntax:"*";
  inherits:false
}
@property --tw-drop-shadow {
  syntax:"*";
  inherits:false
}
@property --tw-drop-shadow-color {
  syntax:"*";
  inherits:false
}
@property --tw-drop-shadow-alpha {
  syntax:"<percentage>";
  inherits:false;
  initial-value:100%
}
@property --tw-drop-shadow-size {
  syntax:"*";
  inherits:false
}
@property --tw-backdrop-blur {
  syntax:"*";
  inherits:false
}
@property --tw-backdrop-brightness {
  syntax:"*";
  inherits:false
}
@property --tw-backdrop-contrast {
  syntax:"*";
  inherits:false
}
@property --tw-backdrop-grayscale {
  syntax:"*";
  inherits:false
}
@property --tw-backdrop-hue-rotate {
  syntax:"*";
  inherits:false
}
@property --tw-backdrop-invert {
  syntax:"*";
  inherits:false
}
@property --tw-backdrop-opacity {
  syntax:"*";
  inherits:false
}
@property --tw-backdrop-saturate {
  syntax:"*";
  inherits:false
}
@property --tw-backdrop-sepia {
  syntax:"*";
  inherits:false
}
@property --tw-ease {
  syntax:"*";
  inherits:false
}
@keyframes pulse {
  50% {
    opacity:.5
  }

}